/* ==========================================================================
   Lavora — Specialty hub template
   Shared primitives (.wrap, .mark, .btn, .team, .prot, .textlink) come from
   main.css. This file holds only what the specialty template adds.
   Two-per-row on phones is the standing rule: never a single-column stack.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-block-end: var(--sp-4);
  font-size: var(--t-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.crumb a {
  transition: color var(--dur) var(--ease-out);
}
.crumb a:hover {
  color: var(--c-rose);
}
.crumb span {
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Specialty hero
   -------------------------------------------------------------------------- */
.sphero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.sphero__copy {
  min-inline-size: 0;
}
.sphero__title {
  max-inline-size: 15ch;
}
.sphero__cta {
  margin-block-start: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.sphero__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: clip;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.2;
  border-start-start-radius: 999px;
  border-start-end-radius: 999px;
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}
.sphero__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Overview
   -------------------------------------------------------------------------- */
.ov__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: start;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.ov__headside {
  min-inline-size: 0;
}
.ov__aside {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--c-plum);
  line-height: 1.5;
}
.ov__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
  padding-block-start: clamp(2rem, 3vw, 3rem);
  border-block-start: 1px solid var(--line);
}
.ov__stats li {
  min-inline-size: 0;
}
.ov__stats b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-plum);
}
.ov__stats span {
  display: block;
  margin-block-start: 0.35rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* Wide plate under the overview head: breaks the run of text-only bands */
.ov__fig {
  margin: 0 0 clamp(2rem, 3vw, 3rem);
  overflow: clip;
  border-radius: var(--radius-lg);
  aspect-ratio: 21 / 8;
  box-shadow: var(--shadow-md);
}
.ov__fig img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* --------------------------------------------------------------------------
   Full-bleed editorial plate with an overlaid pull quote
   -------------------------------------------------------------------------- */
.plate {
  position: relative;
  margin: 0;
  isolation: isolate;
  overflow: clip;
  min-block-size: clamp(320px, 42vw, 520px);
  display: grid;
  align-items: end;
}
.plate img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Solid tint, never a gradient — copy must stay legible over photography */
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(78, 31, 56, 0.62);
  z-index: -1;
}
.plate__quote {
  inline-size: 100%;
  max-inline-size: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.plate__quote blockquote {
  margin: 0;
  max-inline-size: 30ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem);
  font-style: italic;
  line-height: 1.25;
  color: #fff;
}
.plate__cta {
  margin-block-start: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
/* Ghost button sits on photography, so it needs a light outline rather than
   the plum one used on cream surfaces */
.plate__ghost {
  --btn-fg: #fff;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.plate__ghost:hover {
  color: var(--c-plum);
  background: #fff;
  border-color: #fff;
}

/* --------------------------------------------------------------------------
   Who it is for
   -------------------------------------------------------------------------- */
.who__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.who__copy {
  min-inline-size: 0;
}
.who__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) clamp(2rem, 4vw, 3rem);
  min-inline-size: 0;
}
.who__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-3);
  align-items: start;
}
.who__icon {
  inline-size: 38px;
  block-size: 38px;
  color: var(--c-rose);
}
.who__icon svg {
  inline-size: 100%;
  block-size: 100%;
}
.who__text b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-plum);
  line-height: var(--lh-snug);
}
.who__text span {
  display: block;
  margin-block-start: 0.3rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Conditions — linked cards
   -------------------------------------------------------------------------- */
.cond__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.cond__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
}
.cond__card {
  min-inline-size: 0;
}
/* Image-backed tile — the same pattern as the homepage specialty cards */
.cond__card a {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  min-block-size: clamp(220px, 20vw, 260px);
  padding: var(--sp-5);
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.cond__card a:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.cond__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.cond__card a:hover .cond__img {
  transform: scale(1.06);
}
/* Veil keeps copy legible over photography — a scrim on the image, not a
   gradient background on the section */
.cond__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--veil-cream);
  transition: opacity var(--dur) var(--ease-out);
}
.cond__card a:hover .cond__veil {
  opacity: 0.94;
}
.cond__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--c-rose);
  opacity: 0.6;
  line-height: 1;
  margin-block-end: var(--sp-3);
}
.cond__card h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--c-plum);
  line-height: var(--lh-snug);
}
.cond__card p {
  margin-block-start: var(--sp-2);
  margin-block-end: var(--sp-4);
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
/* Hairline arrow: margin, never padding — padding would inflate its background */
.cond__go {
  display: block;
  inline-size: 30px;
  block-size: 1px;
  margin-block-start: auto;
  margin-block-end: 0;
  background: var(--line-strong);
  position: relative;
  transition:
    inline-size var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}
.cond__go::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -3px;
  inline-size: 7px;
  block-size: 7px;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  transform: rotate(45deg);
  color: var(--line-strong);
  transition: color var(--dur) var(--ease-out);
}
.cond__card a:hover .cond__go {
  inline-size: 44px;
  background: var(--c-rose);
}
.cond__card a:hover .cond__go::after {
  color: var(--c-rose);
}
[dir="rtl"] .cond__go::after {
  transform: rotate(-135deg);
}

/* --------------------------------------------------------------------------
   Treatments
   -------------------------------------------------------------------------- */
.treat__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
/* Full-bleed centre-mode carousel, matching the approved reference:
   tall portrait cards, the centre one larger and in full colour. */
.treat__slider {
  margin-inline: calc(50% - 50vw);
  inline-size: 100vw;
}
/* Pre-init: a plain grid so there is never a flash of a stacked column */
.treat__slider:not(.slick-initialized) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
  margin-inline: 0;
  inline-size: 100%;
}
.treat__slider:not(.slick-initialized) .treat__card:nth-child(n + 4) {
  display: none;
}
.treat__slider .slick-list {
  overflow: hidden;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}
/* Cards scale about their own centre, so the track centres them */
.treat__slider .slick-track {
  display: flex;
  align-items: center;
}
/* Slick marks the slide element, so the centre-slide scale is applied there */
.treat__slider .slick-slide {
  block-size: auto;
  padding-inline: clamp(0.4rem, 0.8vw, 0.75rem);
  transform: scale(0.7);
  transition: transform var(--dur-slow) var(--ease-out);
}
.treat__slider .slick-slide.slick-center {
  transform: scale(1);
}
/* Wrapper must not stretch, or the centre card cannot be taller */
.treat__slider .slick-slide > div {
  display: flex;
  block-size: auto;
}

.treat__card {
  position: relative;
  isolation: isolate;
  display: flex;
  overflow: clip;
  border-radius: var(--radius-md);
  cursor: pointer;
  /* Tall portrait cards; the centre slide is emphasised by scale */
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  box-shadow: none;
  transition: box-shadow var(--dur-slow) var(--ease-out);
}
.slick-center .treat__card {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.34),
    var(--shadow-lg);
}
.treat__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Neighbours sit back; the active card's photograph reads at full strength.
     Several images are pale, so dimming alone does not separate them. */
  filter: brightness(0.82) saturate(0.85);
  transition: filter var(--dur-slow) var(--ease-out);
}
.slick-center .treat__img {
  filter: brightness(1) saturate(1);
}
/* Scrim sits behind the copy only, so the photograph stays readable */
.treat__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(40, 14, 28, 0.66) 0%,
    rgba(40, 14, 28, 0.05) 45%,
    rgba(40, 14, 28, 0.7) 100%
  );
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease-out);
}
/* Active card: lift the scrim so the photograph reads at full strength */
.slick-center .treat__scrim {
  opacity: 1;
}
/* Off-centre cards are dimmed by a wash, never by fading the image itself */
.treat__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(40, 14, 28, 0.34);
  transition: opacity var(--dur-slow) var(--ease-out);
}
.slick-center .treat__card::before {
  opacity: 0;
}

.treat__body {
  position: relative;
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.25rem, 2.2vw, 2rem);
}
/* Eyebrow and title at the top; description and button pinned to the foot */
.treat__name {
  margin-block-end: auto;
}
.treat__desc {
  margin-block-start: 0;
}
.treat__eyebrow {
  font-size: var(--t-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.treat__name {
  margin-block-start: var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 0.75vw, 1.6rem);
  font-weight: var(--fw-regular);
  color: #fff;
  line-height: var(--lh-snug);
}
/* Description and button both reveal on the centre slide */
.treat__desc {
  max-inline-size: 30ch;
  font-size: var(--t-small);
  color: rgba(255, 255, 255, 0.82);
  line-height: var(--lh-body);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.slick-center .treat__desc {
  opacity: 1;
  transform: translateY(0);
}
.treat__btn {
  margin-block-start: var(--sp-4);
  padding-block: 0.7rem;
  padding-inline: 1.4rem;
  font-size: var(--t-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}
.slick-center .treat__btn {
  opacity: 1;
  transform: translateY(0);
}
.treat__btn:hover {
  color: var(--c-plum);
  background: #fff;
  border-color: #fff;
}

/* Dots, as in the reference */
.treat__slider .slick-dots {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
}
.treat__slider .slick-dots li button {
  font-size: 0;
  inline-size: 7px;
  block-size: 7px;
  padding: 0;
  background: rgba(255, 255, 255, 0.34);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.treat__slider .slick-dots li.slick-active button {
  background: #fff;
  transform: scale(1.3);
}



.treat__note {
  margin-block-start: var(--sp-5);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  max-inline-size: 60ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Pathway band — sits over the shared .prot background
   -------------------------------------------------------------------------- */
/* The homepage veil is a physical left-to-right gradient sized for a
   copy-left layout; this band is two-column and must mirror under RTL. */
.sprot .prot__veil {
  background: var(--veil-blush);
}
.sprot {
  min-block-size: 0;
  padding-block: var(--section-pad);
}
.sprot__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.sprot__copy {
  min-inline-size: 0;
}
.sprot__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--col-gap);
  min-inline-size: 0;
}
.sprot__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-3);
  align-items: start;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-strong);
}
.sprot__num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--c-rose);
  line-height: 1;
}
.sprot__step h3 {
  font-size: var(--t-body);
  font-weight: var(--fw-semibold);
  color: var(--c-plum);
}
.sprot__step p {
  margin-block-start: 0.3rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Technology — dark band
   -------------------------------------------------------------------------- */
.stech__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.stech__copy {
  min-inline-size: 0;
}
.stech__copy .btn {
  margin-block-start: var(--sp-5);
}
.stech__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) clamp(2rem, 4vw, 3rem);
  min-inline-size: 0;
}
.stech__item {
  min-inline-size: 0;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-on-dark);
}
.stech__item b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semibold);
  color: #fff;
}
.stech__item span {
  display: block;
  margin-block-start: 0.3rem;
  font-size: var(--t-small);
  color: var(--on-dark-soft);
  line-height: var(--lh-body);
}
.stech__note {
  margin-block-start: var(--sp-3);
  padding-inline-start: var(--sp-4);
  border-inline-start: 1px solid var(--line-on-dark);
  max-inline-size: 42ch;
  font-size: var(--t-small);
  color: var(--on-dark-soft);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Wider integration
   -------------------------------------------------------------------------- */
.integ__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.integ__copy {
  min-inline-size: 0;
}
.integ__boundary {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 1px solid var(--line-strong);
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
.integ__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  min-inline-size: 0;
}
.integ__links a {
  display: block;
  padding: var(--sp-4);
  background: var(--s-cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.integ__links a:hover {
  border-color: var(--c-rose);
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
}
[dir="rtl"] .integ__links a:hover {
  transform: translateX(-4px);
}
.integ__links b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-plum);
}
.integ__links span {
  display: block;
  margin-block-start: 0.25rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   FAQ — native details/summary, no JS
   -------------------------------------------------------------------------- */
.sfaq__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.sfaq__aside {
  min-inline-size: 0;
}
.sfaq__note {
  margin-block-start: var(--sp-4);
  max-inline-size: 32ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
.sfaq__list {
  min-inline-size: 0;
}
.sfaq__item {
  border-block-end: 1px solid var(--line);
}
.sfaq__item summary {
  display: block;
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--c-plum);
  transition: color var(--dur) var(--ease-out);
}
.sfaq__item summary::-webkit-details-marker {
  display: none;
}
.sfaq__item summary:hover {
  color: var(--c-rose);
}
/* Accordion marker is the shared +/- from main.css */
.sfaq__item summary {
  position: relative;
  padding-inline-end: calc(15px + var(--sp-4));
}
.sfaq__item summary::before,
.sfaq__item summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 50%;
  inline-size: 15px;
  block-size: 1px;
  background: var(--c-rose);
  transition: transform var(--dur) var(--ease-out);
}
.sfaq__item summary::after {
  transform: rotate(90deg);
}
.sfaq__item[open] summary::after {
  transform: rotate(0deg);
}
.sfaq__body {
  padding-block-end: var(--sp-4);
  padding-inline-end: var(--sp-6);
}
.sfaq__body p {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .who__grid,
  .stech__grid,
  .integ__grid,
  .sprot__grid,
  .sfaq__grid {
    grid-template-columns: 1fr;
  }
  .cond__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .treat__slider:not(.slick-initialized) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .treat__slider:not(.slick-initialized) .treat__card:nth-child(n + 3) {
    display: none;
  }
  .ov__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

@media (max-width: 900px) and (min-width: 769px) {
  .sphero__grid {
    grid-template-columns: 1fr 0.86fr;
    gap: var(--sp-5);
  }
  .sphero__title {
    max-inline-size: 13ch;
  }
}

@media (max-width: 900px) {
  .ov__head,
  .cond__head,
  .treat__head {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

/* Hero keeps the image beside the copy down to 768px */
@media (max-width: 768px) {
  .sphero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .sphero__figure {
    aspect-ratio: 4 / 3.4;
  }
  .sphero__title {
    max-inline-size: none;
  }
}

@media (max-width: 680px) {
  .ov__fig {
    aspect-ratio: 16 / 9;
  }
  .plate {
    min-block-size: 300px;
  }
  .plate__cta {
    margin-block-start: var(--sp-4);
    gap: var(--sp-2);
  }
  .plate__cta .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  /* Two per row throughout — never a single-column stack */
  .ov__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-3);
    row-gap: var(--sp-4);
  }
  .ov__stats li:last-child {
    grid-column: 1 / -1;
  }
  .who__list {
    column-gap: var(--sp-3);
    row-gap: var(--sp-4);
  }
  /* Icon above the text: side by side leaves no room in half a column */
  .who__item {
    grid-template-columns: 1fr;
    row-gap: var(--sp-2);
  }
  .who__icon {
    inline-size: 32px;
    block-size: 32px;
  }
  .cond__grid {
    column-gap: var(--sp-3);
    row-gap: var(--sp-3);
  }
  .cond__card a {
    padding: var(--sp-4);
  }
  .treat__slider .slick-slide {
    transform: scale(0.88);
  }
  .treat__slider .slick-slide.slick-center {
    transform: scale(1);
  }
  .treat__nav {
    margin-block-start: var(--sp-4);
  }
  .treat__arrow {
    inline-size: 42px;
    block-size: 42px;
  }
  .sprot__steps {
    column-gap: var(--sp-3);
  }
  .sprot__step {
    grid-template-columns: 1fr;
    row-gap: var(--sp-2);
  }
  .stech__list {
    column-gap: var(--sp-3);
    row-gap: var(--sp-4);
  }
  .sfaq__item summary {
    font-size: var(--t-body);
    column-gap: var(--sp-3);
  }
  .sfaq__body {
    padding-inline-end: 0;
  }
  .sphero__cta .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .cond__card h3,
  .who__text b,
  .stech__item b,
  .ov__stats b {
    font-size: 1rem;
  }
}

/* ==========================================================================
   Specialties hub — the index for the six verticals
   ========================================================================== */
.hubhero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.75fr 0.7fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}
/* Arched crown — the site's shared hero figure treatment */
.hubhero__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: clip;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.6;
  border-start-start-radius: 999px;
  border-start-end-radius: 999px;
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}
.hubhero__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.hubhero__title {
  max-inline-size: 14ch;
}
.hubhero__side {
  min-inline-size: 0;
}
.hubhero__note {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  max-inline-size: 36ch;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--c-plum);
  line-height: 1.5;
}

.hub__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.hub__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

/* Editorial grid: a lead tile anchors the composition, the rest are sized to
   their content rather than forced to a common height. */
.hub__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(190px, auto);
  gap: var(--sp-4);
}
.hub__card {
  min-inline-size: 0;
}
/* Split tile: copy keeps its own colour field, the photo takes the outer half,
   so text never sits over an image. --tile-bg keeps the tone a token. */
.hub__card a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: stretch;
  block-size: 100%;
  background: var(--tile-bg, var(--s-cream));
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: clip;
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.hub__fig {
  position: relative;
  min-inline-size: 0;
  overflow: clip;
}
.hub__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.hub__card a:hover .hub__img {
  transform: scale(1.05);
}
.hub__card a:hover {
  transform: translateY(-5px);
  border-color: var(--c-rose);
  box-shadow: var(--shadow-md);
}

/* 01 leads: two rows tall, set larger. 06 is the dark anchor opposite it. */
.hub__card--lead {
  grid-row: span 2;
}
/* Lead is tall and narrow — the image stacks beneath the copy instead */
.hub__card--lead a {
  --tile-bg: var(--s-blush);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
.hub__card--lead h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem);
}
.hub__card--lead .hub__desc {
  font-size: var(--t-lead);
  max-inline-size: 26ch;
}
.hub__card--lead .hub__icon {
  inline-size: 64px;
  block-size: 64px;
}
.hub__card--lead .hub__icon svg {
  inline-size: 30px;
  block-size: 30px;
}

/* Tones set from visual placement, not source order: the lead spans rows 1-2,
   so 02/03 sit on row 1 and 04/05 on row 2 beside it. No tone touches itself. */
.hub__card:nth-child(2) a { --tile-bg: var(--s-cream); }
.hub__card:nth-child(3) a { --tile-bg: var(--s-mauve); }
.hub__card:nth-child(4) a { --tile-bg: var(--s-mauve); }
.hub__card:nth-child(5) a { --tile-bg: var(--s-cream); }

/* Dark anchor — gives the palette range instead of three near-identical pinks.
   Spans the final row so the grid closes on a full-width band, not a stray cell. */
.hub__card--anchor {
  grid-column: 1 / -1;
}
.hub__card--anchor a {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  min-block-size: 0;
}
.hub__card--anchor .hub__body {
  flex-direction: row;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  inline-size: 100%;
  block-size: auto;
}
.hub__card--anchor .hub__icon {
  margin-block-end: 0;
}
.hub__card--anchor h3 {
  flex: none;
  max-inline-size: 22ch;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
}
/* The title's break is set for a tall tile; the anchor runs horizontal */
.hub__card--anchor h3 br {
  display: none;
}
.hub__card--anchor .hub__desc {
  margin-block: 0;
  flex: 1 1 auto;
  min-inline-size: 0;
}
.hub__card--anchor .hub__go {
  margin-block-start: 0;
  flex: none;
}
.hub__card--anchor a {
  --tile-bg: var(--c-plum);
  border-color: transparent;
}
.hub__card--anchor h3 { color: var(--on-dark); }
.hub__card--anchor .hub__desc { color: var(--on-dark-soft); }
.hub__card--anchor .hub__icon {
  color: var(--on-dark);
  border-color: var(--line-on-dark);
}
.hub__card--anchor .hub__go { background: var(--line-on-dark); }
.hub__card--anchor .hub__go::after { color: var(--line-on-dark); }
.hub__card--anchor a:hover { border-color: var(--c-rose); }
.hub__card--anchor a:hover .hub__icon {
  color: var(--on-dark);
  border-color: var(--on-dark);
}
.hub__card--anchor a:hover .hub__go { background: var(--on-dark); }
.hub__card--anchor a:hover .hub__go::after { color: var(--on-dark); }

.hub__body {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  min-inline-size: 0;
  padding: clamp(1.4rem, 2vw, 2rem);
}
/* Icon replaces the numeral — these are destinations, not a ranking */
.hub__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  margin-block-end: var(--sp-3);
  color: var(--c-rose);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition:
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.hub__icon svg {
  inline-size: 22px;
  block-size: 22px;
}
.hub__card a:hover .hub__icon {
  color: var(--c-plum);
  border-color: var(--c-rose);
}
.hub__card h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--c-plum);
  line-height: var(--lh-snug);
}
.hub__desc {
  display: block;
  margin-block-start: var(--sp-2);
  margin-block-end: var(--sp-4);
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
.hub__go {
  display: block;
  inline-size: 30px;
  block-size: 1px;
  margin-block-start: auto;
  background: var(--line-strong);
  position: relative;
  transition:
    inline-size var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}
.hub__go::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -3px;
  inline-size: 7px;
  block-size: 7px;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  transform: rotate(45deg);
  color: var(--line-strong);
  transition: color var(--dur) var(--ease-out);
}
.hub__card a:hover .hub__go {
  inline-size: 44px;
  background: var(--c-rose);
}
.hub__card a:hover .hub__go::after {
  color: var(--c-rose);
}
[dir="rtl"] .hub__go::after {
  transform: rotate(-135deg);
}

/* Not sure yet — reuses the integration link-row idiom */
.unsure__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.unsure__copy {
  min-inline-size: 0;
}
.unsure__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  min-inline-size: 0;
}
.unsure__links a {
  display: block;
  padding: var(--sp-4);
  background: var(--s-cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.unsure__links a:hover {
  border-color: var(--c-rose);
  box-shadow: var(--shadow-sm);
  transform: translateX(4px);
}
[dir="rtl"] .unsure__links a:hover {
  transform: translateX(-4px);
}
.unsure__links b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-plum);
}
.unsure__links span {
  display: block;
  margin-block-start: 0.25rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

@media (max-width: 1100px) {
  .hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Lead tile takes the full first row rather than a tall narrow column */
  .hub__card--lead {
    grid-column: span 2;
    grid-row: auto;
  }
  .hub__card--lead a {
    min-block-size: 240px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    grid-template-rows: none;
  }
  .unsure__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1000px) {
  /* Copy takes the full first row; the image stays beside it, per the hero rule */
  .hubhero__grid {
    grid-template-columns: 1fr 0.62fr;
  }
  .hubhero__side {
    grid-column: 1;
  }
  .hubhero__title {
    grid-column: 1;
  }
  .hubhero__figure {
    grid-column: 2;
    grid-row: 1 / span 2;
    aspect-ratio: 4 / 5.4;
  }
}

@media (max-width: 900px) {
  .hub__head {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

/* Below 768px the image finally moves under the copy */
@media (max-width: 768px) {
  .hubhero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .hubhero__figure {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 680px) {
  /* Two per row — never a single-column stack */
  .hub__grid {
    column-gap: var(--sp-3);
    row-gap: var(--sp-3);
    grid-auto-rows: auto;
  }
  .hub__card--anchor a {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  }
  .hub__card--anchor .hub__body {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }
  .hub__card--anchor .hub__icon {
    margin-block-end: var(--sp-3);
  }
  .hub__card--anchor .hub__desc {
    margin-block-end: var(--sp-4);
  }
  .hub__card--anchor .hub__go {
    margin-block-start: auto;
  }
  .hub__card--anchor h3 br {
    display: inline;
  }
  /* flex:none from the horizontal band would stop the title shrinking here */
  .hub__card--anchor h3 {
    flex: 0 1 auto;
    max-inline-size: none;
    font-size: 1rem;
  }
  .hub__card--lead a {
    min-block-size: 0;
  }
  .hub__card--lead .hub__icon {
    inline-size: 40px;
    block-size: 40px;
  }
  .hub__card--lead .hub__icon svg {
    inline-size: 19px;
    block-size: 19px;
  }
  .hub__icon {
    inline-size: 40px;
    block-size: 40px;
    margin-block-end: var(--sp-3);
  }
  .hub__icon svg {
    inline-size: 19px;
    block-size: 19px;
  }
  .hub__card h3,
  .hub__card--lead h3 {
    font-size: 1rem;
  }
  /* Two-per-row columns are too narrow to split sideways. Copy row sizes to
     its content so a long title is never clipped by the tile's overflow. */
  .hub__card a,
  .hub__card--lead a,
  .hub__card--anchor a {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 82px;
  }
  .hub__fig {
    order: 2;
  }
  .hub__body {
    padding: var(--sp-4);
  }
  .hub__desc {
    font-size: 0.82rem;
    margin-block-end: var(--sp-3);
  }
  .hub__card--lead .hub__desc {
    font-size: 0.82rem;
    max-inline-size: none;
  }
  .hubhero__title {
    max-inline-size: none;
  }
}

/* ==========================================================================
   Treatments hub
   ========================================================================== */
.decide__head,
.txgrid__head,
.cats__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.decide__head {
  align-items: start;
}
.decide__headside {
  min-inline-size: 0;
}
.decide__aside {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--c-plum);
  line-height: 1.5;
}

/* A connected pathway, not four identical columns: one continuous rule
   threads the steps, and each card is a raised surface on the cream band. */
/* A connected pathway: each stage carries an icon, and a directional
   connector between stages makes the sequence explicit. */
.path {
  --path-gap: clamp(1.25rem, 2.5vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--path-gap);
}
.path__step {
  position: relative;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.path__marker {
  position: relative;
  /* flex:none is required — a stretched flex item would render an ellipse */
  flex: none;
  inline-size: 54px;
  block-size: 54px;
  display: grid;
  place-items: center;
  color: var(--c-rose);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--s-cream);
  transition:
    color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.path__marker svg {
  inline-size: 24px;
  block-size: 24px;
}
.path__step:hover .path__marker {
  color: #fff;
  background: var(--c-rose);
  border-color: var(--c-rose);
}

/* Connector is drawn on the step, so it spans the full column width plus the
   grid gap and always lands on the next ring. */
.path__step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block-start: 27px;
  inset-inline-start: 66px;
  inset-inline-end: calc(-1 * var(--path-gap) + 12px);
  block-size: 1px;
  background: var(--line-strong);
}
/* Arrowhead: the connector means "and then", so it points */
.path__step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 27px;
  inset-inline-end: calc(-1 * var(--path-gap) + 12px);
  inline-size: 7px;
  block-size: 7px;
  border-block-start: 1px solid var(--line-strong);
  border-inline-end: 1px solid var(--line-strong);
  transform: translate(50%, -50%) rotate(45deg);
}
[dir="rtl"] .path__step:not(:last-child)::after {
  transform: translate(-50%, -50%) rotate(-135deg);
}

.path__card {
  block-size: 100%;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.path__step:hover .path__card {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.path__card h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--c-plum);
  line-height: var(--lh-snug);
}
.path__card p {
  margin-block-start: var(--sp-2);
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* Specialty cards: the site-standard image-backed tile */
.txgrid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
}
.txgrid__card {
  min-inline-size: 0;
}
.txgrid__card a {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  min-block-size: clamp(260px, 24vw, 330px);
  padding: var(--sp-5);
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.txgrid__card a:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.txgrid__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.txgrid__card a:hover .txgrid__img {
  transform: scale(1.06);
}
.txgrid__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--veil-cream);
  transition: opacity var(--dur) var(--ease-out);
}
.txgrid__card a:hover .txgrid__veil {
  opacity: 0.94;
}
.txgrid__body {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}
.txgrid__num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--c-rose);
  opacity: 0.6;
  line-height: 1;
  margin-block-end: var(--sp-3);
}
.txgrid__card h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--c-plum);
  line-height: var(--lh-snug);
}
.txgrid__desc {
  display: block;
  margin-block-start: var(--sp-2);
  margin-block-end: var(--sp-4);
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
.txgrid__go {
  display: block;
  inline-size: 30px;
  block-size: 1px;
  margin-block-start: auto;
  background: var(--line-strong);
  position: relative;
  transition:
    inline-size var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}
.txgrid__go::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -3px;
  inline-size: 7px;
  block-size: 7px;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  transform: rotate(45deg);
  color: var(--line-strong);
  transition: color var(--dur) var(--ease-out);
}
.txgrid__card a:hover .txgrid__go {
  inline-size: 44px;
  background: var(--c-rose);
}
.txgrid__card a:hover .txgrid__go::after {
  color: var(--c-rose);
}
[dir="rtl"] .txgrid__go::after {
  transform: rotate(-135deg);
}

/* Types of care — icon list */
.cats__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap) clamp(2rem, 4vw, 3.5rem);
}
.cats__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: start;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
}
.cats__icon {
  inline-size: 40px;
  block-size: 40px;
  color: var(--c-rose);
}
.cats__icon svg {
  inline-size: 100%;
  block-size: 100%;
}
.cats__text b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semibold);
  color: var(--c-plum);
}
.cats__text span {
  display: block;
  margin-block-start: 0.3rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* Our limits — commitments on the plum band */
.limits__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.limits__copy {
  min-inline-size: 0;
}
.limits__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) clamp(2rem, 4vw, 3rem);
  min-inline-size: 0;
}
.limits__item {
  min-inline-size: 0;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-on-dark);
}
.limits__item b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--fw-semibold);
  color: #fff;
}
.limits__item span {
  display: block;
  margin-block-start: 0.3rem;
  font-size: var(--t-small);
  color: var(--on-dark-soft);
  line-height: var(--lh-body);
}

@media (max-width: 1100px) {
  .txgrid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .limits__grid {
    grid-template-columns: 1fr;
  }
  .path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-4);
  }
  /* A connector pointing off the end of a wrapped row would mislead */
  .path__step:nth-child(2n)::before,
  .path__step:nth-child(2n)::after {
    display: none;
  }
}

@media (max-width: 900px) {
  .decide__head,
  .txgrid__head,
  .cats__head {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

@media (max-width: 680px) {
  /* Two per row throughout — never a single-column stack */
  .path {
    column-gap: var(--sp-3);
    row-gap: var(--sp-4);
  }
  .path__step {
    gap: var(--sp-3);
  }
  .path__card {
    padding: var(--sp-4);
  }
  .path__marker {
    inline-size: 44px;
    block-size: 44px;
  }
  .path__marker svg {
    inline-size: 20px;
    block-size: 20px;
  }
  .path__step:not(:last-child)::before {
    inset-block-start: 22px;
    inset-inline-start: 54px;
  }
  .path__step:not(:last-child)::after {
    inset-block-start: 22px;
  }
  .path__card h3 {
    font-size: 1rem;
  }
  .txgrid__list {
    column-gap: var(--sp-3);
    row-gap: var(--sp-3);
  }
  .txgrid__card a {
    padding: var(--sp-4);
    min-block-size: 210px;
  }
  .txgrid__card h3 {
    font-size: 1rem;
  }
  .txgrid__desc {
    display: none;
  }
  .cats__list {
    column-gap: var(--sp-3);
    row-gap: var(--sp-4);
  }
  /* Icon above the text: side by side leaves no room in half a column */
  .cats__item {
    grid-template-columns: 1fr;
    row-gap: var(--sp-2);
  }
  .cats__icon {
    inline-size: 34px;
    block-size: 34px;
  }
  .limits__list {
    column-gap: var(--sp-3);
    row-gap: var(--sp-4);
  }
  .cats__text b,
  .limits__item b {
    font-size: 1rem;
  }
}

/* ==========================================================================
   Concerns hub — editorial rows, not tiles
   A symptom list reads as a sequence to scan, so it takes a full-width row
   idiom rather than the card grid used for specialties.
   ========================================================================== */
.clist__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.cidx {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--line);
}
.cidx__item {
  border-block-end: 1px solid var(--line);
}
/* Editorial index: a display numeral in the margin, the title set large, and
   the owning specialty named in the prose rather than in a column. */
.cidx__item a {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  transition: padding-inline-start var(--dur) var(--ease-out);
}
.cidx__item a:hover {
  padding-inline-start: var(--sp-3);
}
.cidx__num {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  color: var(--c-rose);
  opacity: 0.4;
  line-height: 1;
  transition: opacity var(--dur) var(--ease-out);
}
.cidx__item a:hover .cidx__num {
  opacity: 1;
}
.cidx__body {
  min-inline-size: 0;
}
.cidx__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.9rem);
  font-weight: 500;
  color: var(--c-plum);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
.cidx__desc {
  display: block;
  margin-block-start: var(--sp-3);
  max-inline-size: 62ch;
  font-size: var(--t-body);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
/* Named inline — the relationship reads as a sentence, not a table column */
.cidx__spec {
  color: var(--c-rose);
}

.clist__note {
  margin-block-start: var(--sp-5);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  max-inline-size: 60ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* If none fit */
.nofit__grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: var(--col-gap);
  align-items: center;
}
.nofit__copy {
  min-inline-size: 0;
}
.nofit__fig {
  margin: 0;
  overflow: clip;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
}
.nofit__fig img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .clist__head,
  .nofit__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

@media (max-width: 680px) {
  /* The numeral moves above the title; a margin column is too costly here */
  .cidx__item a {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-2);
  }
  .cidx__num {
    font-size: 0.95rem;
  }
  .cidx__desc {
    margin-block-start: var(--sp-2);
    font-size: var(--t-small);
  }
}

/* ==========================================================================
   Concern page
   ========================================================================== */

/* Naming the owning specialty is a brief requirement, so it sits in the hero */
.chero__owner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-4);
}
.chero__ownerlabel {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.75;
}
.chero__ownerlink {
  font-size: var(--t-small);
  color: var(--c-rose);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.chero__ownerlink:hover {
  border-block-end-color: var(--c-rose);
}

/* 01 — what you may notice */
.csigns__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
/* Editorial spread: one sign leads on an image plate, the others read as a
   column. Six equal cells would be a table, not a composition. */
.csigns__spread {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--col-gap);
  align-items: start;
}
.csigns__lead {
  position: relative;
  margin: 0;
  overflow: clip;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
.csigns__lead img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--dur-slow) var(--ease-out);
}
.csigns__lead:hover img {
  transform: scale(1.04);
}
/* Copy sits on a solid field at the foot, never over open photograph */
.csigns__lead figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: clamp(1.4rem, 2.4vw, 2.25rem);
  background: var(--c-plum);
}
.csigns__lead figcaption b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.95rem);
  font-weight: 500;
  color: var(--on-dark);
  line-height: var(--lh-snug);
}
.csigns__lead figcaption span {
  display: block;
  margin-block-start: var(--sp-2);
  font-size: var(--t-small);
  color: var(--on-dark-soft);
  line-height: var(--lh-body);
}
.csigns__rest {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sign;
}
.csigns__rest li {
  counter-increment: sign;
  position: relative;
  padding-block: clamp(1rem, 1.8vw, 1.5rem);
  padding-inline-start: 2.75rem;
  border-block-end: 1px solid var(--line);
}
.csigns__rest li:first-child {
  border-block-start: 1px solid var(--line);
}
/* A light ordinal, not a numbered list — it marks position without shouting */
.csigns__rest li::before {
  content: "0" counter(sign);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: clamp(1rem, 1.8vw, 1.5rem);
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--c-rose);
  opacity: 0.55;
}
.csigns__rest b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--c-plum);
  line-height: var(--lh-snug);
}
.csigns__rest span {
  display: block;
  margin-block-start: 0.35rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* 02 — clinical context */
.cctx__grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: var(--col-gap);
  align-items: start;
}
/* Copy leads the row; the factor list and its figure share the one below */
.cctx__copy {
  grid-column: 1 / -1;
}
.cctx__factors {
  grid-column: 1;
}
.cctx__fig {
  grid-column: 2;
  margin: 0;
  overflow: clip;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5;
  position: sticky;
  inset-block-start: calc(var(--header-h, 76px) + var(--sp-4));
}
.cctx__fig img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.cctx__fig:hover img {
  transform: scale(1.04);
}
.cctx__copy {
  min-inline-size: 0;
  max-inline-size: 72ch;
}
.cctx__aside {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  max-inline-size: 42ch;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--c-plum);
  line-height: 1.5;
}
.cctx__factors {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cctx__factors li {
  position: relative;
  padding-block: var(--sp-3);
  padding-inline-start: var(--sp-4);
  border-block-end: 1px solid var(--line);
}
.cctx__factors li:first-child {
  border-block-start: 1px solid var(--line);
}
/* A short rule anchors each item to the margin rather than boxing it */
.cctx__factors li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--sp-3) + 0.6em);
  inline-size: 10px;
  block-size: 1px;
  background: var(--c-rose);
}
.cctx__factors b {
  display: block;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-plum);
}
.cctx__factors span {
  display: block;
  margin-block-start: 0.35rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* 03 — assessment head (the .path component itself is shared) */
.cassess__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}

/* 04 — where it leads (dark band) */
.cleads__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--col-gap);
  align-items: center;
}
.cleads__copy {
  min-inline-size: 0;
}
.cleads__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cleads__links li {
  border-block-end: 1px solid var(--line-on-dark);
}
.cleads__links li:first-child {
  border-block-start: 1px solid var(--line-on-dark);
}
.cleads__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  transition: padding-inline-start var(--dur) var(--ease-out);
}
.cleads__links a:hover {
  padding-inline-start: var(--sp-3);
}
.cleads__links b {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--on-dark);
}
.cleads__arrow {
  flex: none;
  display: block;
  inline-size: 30px;
  block-size: 1px;
  background: var(--line-on-dark);
  position: relative;
  transition:
    inline-size var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}
.cleads__arrow::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -3px;
  inline-size: 7px;
  block-size: 7px;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  transform: rotate(45deg);
  color: var(--line-on-dark);
  transition: color var(--dur) var(--ease-out);
}
.cleads__links a:hover .cleads__arrow {
  inline-size: 44px;
  background: var(--on-dark);
}
.cleads__links a:hover .cleads__arrow::after {
  color: var(--on-dark);
}
[dir="rtl"] .cleads__arrow::after {
  transform: rotate(-135deg);
}

/* 05 — network medicine */
.cnet__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: start;
}
.cnet__side {
  min-inline-size: 0;
}

/* Closing disclaimer */
.cdisc {
  padding-block: clamp(2rem, 3vw, 3rem);
}
.cdisc__note {
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  max-inline-size: 62ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

@media (max-width: 900px) {
  .csigns__spread {
    grid-template-columns: 1fr;
  }
  .csigns__lead {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 900px) {
  .csigns__head,
  .cassess__head,
  .cctx__grid,
  .cleads__grid,
  .cnet__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .cctx__copy,
  .cctx__factors,
  .cctx__fig {
    grid-column: 1;
  }
  /* Sticky has nothing to scroll against in a single column */
  .cctx__fig {
    position: static;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 680px) {
  .csigns__lead figcaption {
    padding: var(--sp-4);
  }
  .csigns__rest li {
    padding-inline-start: 2.25rem;
  }
  .csigns__rest b {
    font-size: 1rem;
  }
  .csigns__rest span {
    font-size: 0.82rem;
  }
  .cleads__links b {
    font-size: 1.05rem;
  }
  .cleads__links a {
    padding-block: var(--sp-3);
  }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

/* Hero: title leads at full editorial scale, image held to one side */
.cthero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.cthero__copy {
  min-inline-size: 0;
}
/* Arched crown: the site's hero figure treatment, shared with .sphero__figure */
.cthero__fig {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: clip;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.2;
  border-start-start-radius: 999px;
  border-start-end-radius: 999px;
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}
.cthero__fig img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* 01 — the form. Copy leads on the left, the panel is raised beside it. */
.ctform__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--col-gap);
  align-items: start;
}
.ctform__lede {
  min-inline-size: 0;
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--sp-4));
}
.ctform__note {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  max-inline-size: 38ch;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--c-plum);
  line-height: 1.5;
}
.ctform__panel {
  padding: clamp(1.5rem, 3vw, 2.75rem);
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* 02 — channels as an editorial index, matching the concerns hub idiom */
.cch__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.cch__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--line);
}
.cch__item {
  border-block-end: 1px solid var(--line);
}
.cch__item a {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  transition: padding-inline-start var(--dur) var(--ease-out);
}
.cch__item a:hover {
  padding-inline-start: var(--sp-3);
}
.cch__num {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.3vw, 2.1rem);
  color: var(--c-rose);
  opacity: 0.4;
  line-height: 1;
  transition: opacity var(--dur) var(--ease-out);
}
.cch__item a:hover .cch__num {
  opacity: 1;
}
.cch__body {
  min-inline-size: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-4);
  align-items: center;
  row-gap: var(--sp-2);
}
.cch__icon {
  grid-row: span 2;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  color: var(--c-rose);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition:
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.cch__icon svg {
  inline-size: 21px;
  block-size: 21px;
}
.cch__item a:hover .cch__icon {
  color: var(--c-plum);
  border-color: var(--c-rose);
}
.cch__title {
  align-self: end;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  font-weight: 500;
  color: var(--c-plum);
  line-height: var(--lh-snug);
}
.cch__desc {
  align-self: start;
  display: block;
  max-inline-size: 58ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* 03 — journey head (the .path component itself is shared) */
.ctnext__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}

/* 04 — visiting, on the dark band */
.ctvisit__grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: var(--col-gap);
  align-items: center;
}
.ctvisit__copy {
  min-inline-size: 0;
}
.ctvisit__facts {
  margin: 0;
}
.ctvisit__facts > div {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line-on-dark);
}
.ctvisit__facts > div:first-child {
  border-block-start: 1px solid var(--line-on-dark);
}
.ctvisit__facts dt {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.ctvisit__facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--on-dark);
  line-height: var(--lh-snug);
}

@media (max-width: 900px) {
  .ctform__grid,
  .cch__head,
  .ctnext__head,
  .ctvisit__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  /* Hero keeps image beside copy until 768px, per the site-wide hero rule */
  .cthero__grid {
    grid-template-columns: 1fr 0.7fr;
    gap: var(--sp-4);
  }
  /* Sticky has nothing to scroll against once the grid is one column */
  .ctform__lede {
    position: static;
  }
  .cthero__fig {
    aspect-ratio: 4 / 5.4;
  }
}

@media (max-width: 768px) {
  .cthero__grid {
    grid-template-columns: 1fr;
  }
  .cthero__fig {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 680px) {
  /* Numeral moves above the title; a margin column costs too much here */
  .cch__item a {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-2);
  }
  .cch__num {
    font-size: 0.95rem;
  }
  .cch__body {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--sp-3);
  }
  .cch__icon {
    inline-size: 38px;
    block-size: 38px;
  }
  .cch__icon svg {
    inline-size: 18px;
    block-size: 18px;
  }
  .cch__title {
    font-size: 1.05rem;
  }
  .cch__desc {
    grid-column: 1 / -1;
    font-size: 0.82rem;
  }
  .ctform__panel {
    padding: var(--sp-4);
  }
  .ctvisit__facts > div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding-block: var(--sp-3);
  }
  .ctvisit__facts dd {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   Network Medicine
   ========================================================================== */
.nmhero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.nmhero__copy {
  min-inline-size: 0;
}
/* Arched crown — the site's shared hero figure treatment */
.nmhero__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: clip;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.2;
  border-start-start-radius: 999px;
  border-start-end-radius: 999px;
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}
/* Subject sits right of centre in the source; hold it in the arch */
.nmhero__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 68% center;
}

/* 01 — the idea */
.nmidea__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: start;
}
.nmidea__side {
  min-inline-size: 0;
}
.nmidea__aside {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  max-inline-size: 48ch;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--c-plum);
  line-height: 1.5;
}

/* 02 — worked relationships, alternating image side */
.nmrels__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.nmrels__list {
  display: grid;
  gap: clamp(3rem, 6vw, 6rem);
}
.nmrel {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--col-gap);
  align-items: center;
}
/* Alternating sides give the section rhythm rather than a repeating row */
.nmrel--flip .nmrel__fig {
  order: 2;
}
.nmrel__fig {
  margin: 0;
  overflow: clip;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
}
.nmrel__fig img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.nmrel:hover .nmrel__fig img {
  transform: scale(1.03);
}
.nmrel__copy {
  min-inline-size: 0;
}
.nmrel__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: var(--sp-4);
  color: var(--c-rose);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition:
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.nmrel__icon svg {
  inline-size: 24px;
  block-size: 24px;
}
.nmrel:hover .nmrel__icon {
  color: var(--c-plum);
  border-color: var(--c-rose);
}
.nmrel__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.3rem);
  font-weight: 500;
  color: var(--c-plum);
  line-height: var(--lh-snug);
}
.nmrel__body {
  margin-block: var(--sp-3) var(--sp-4);
  max-inline-size: 56ch;
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* 03 — cellular medicine */
.nmcell__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--col-gap);
  align-items: center;
}
.nmcell__fig {
  margin: 0;
  overflow: clip;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5;
}
.nmcell__fig img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.nmcell__copy {
  min-inline-size: 0;
}
.nmcell__note {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  max-inline-size: 44ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* 04 — what this is not (dark band) */
.nmnot__grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: var(--col-gap);
  align-items: start;
}
.nmnot__copy {
  min-inline-size: 0;
}
.nmnot__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nmnot__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line-on-dark);
}
.nmnot__list li:first-child {
  border-block-start: 1px solid var(--line-on-dark);
}
.nmnot__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  color: var(--on-dark);
  border: 1px solid var(--line-on-dark);
  border-radius: 50%;
}
.nmnot__icon svg {
  inline-size: 20px;
  block-size: 20px;
}
.nmnot__text {
  min-inline-size: 0;
}
.nmnot__text b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--on-dark);
  line-height: var(--lh-snug);
}
.nmnot__text span {
  display: block;
  margin-block-start: 0.35rem;
  font-size: var(--t-small);
  color: var(--on-dark-soft);
  line-height: var(--lh-body);
}

/* 05 — how it works head (the .path component is shared) */
.nmhow__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}

@media (max-width: 1000px) {
  .nmrel {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--sp-5);
  }
}

@media (max-width: 900px) {
  .nmidea__grid,
  .nmrels__head,
  .nmcell__grid,
  .nmnot__grid,
  .nmhow__head {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .nmcell__fig {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  /* Hero holds the image beside copy until here, per the site-wide hero rule */
  .nmhero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .nmhero__figure {
    aspect-ratio: 16 / 10;
  }
  .nmrel {
    grid-template-columns: 1fr;
  }
  /* Alternating sides have no meaning once the row is a single column */
  .nmrel--flip .nmrel__fig {
    order: 0;
  }
  .nmrel__fig {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 680px) {
  .nmrel__icon {
    inline-size: 42px;
    block-size: 42px;
    margin-block-end: var(--sp-3);
  }
  .nmrel__icon svg {
    inline-size: 20px;
    block-size: 20px;
  }
  .nmnot__list li {
    gap: var(--sp-3);
    padding-block: var(--sp-3);
  }
  .nmnot__icon {
    inline-size: 36px;
    block-size: 36px;
  }
  .nmnot__icon svg {
    inline-size: 17px;
    block-size: 17px;
  }
  .nmnot__text b {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   Protocols
   ========================================================================== */
.prhero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.prhero__copy {
  min-inline-size: 0;
}
/* Arched crown — the site's shared hero figure treatment */
.prhero__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: clip;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.2;
  border-start-start-radius: 999px;
  border-start-end-radius: 999px;
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}
.prhero__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* 01 — what a protocol is */
.prwhat__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: start;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.prwhat__side {
  min-inline-size: 0;
}
.prwhat__aside {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  max-inline-size: 46ch;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--c-plum);
  line-height: 1.5;
}
.prwhat__marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--col-gap);
}
.prwhat__marks li {
  min-inline-size: 0;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
}
.prwhat__ic {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  margin-block-end: var(--sp-3);
  color: var(--c-rose);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.prwhat__ic svg {
  inline-size: 21px;
  block-size: 21px;
}
.prwhat__marks b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--c-plum);
  line-height: var(--lh-snug);
}
.prwhat__marks span:not(.prwhat__ic) {
  display: block;
  margin-block-start: var(--sp-2);
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* 02 — the pathways, alternating image side */
.prlist__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.prlist__items {
  display: grid;
  gap: clamp(3rem, 6vw, 6rem);
}
.ppath {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--col-gap);
  align-items: center;
  scroll-margin-block-start: calc(var(--header-h) + var(--sp-4));
}
/* Alternating sides give the section rhythm rather than a repeating row */
.ppath--flip .ppath__fig {
  order: 2;
}
.ppath__fig {
  margin: 0;
  overflow: clip;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5;
}
.ppath__fig img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.ppath:hover .ppath__fig img {
  transform: scale(1.03);
}
.ppath__copy {
  min-inline-size: 0;
}
.ppath__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: var(--sp-4);
  color: var(--c-rose);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition:
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.ppath__icon svg {
  inline-size: 24px;
  block-size: 24px;
}
.ppath:hover .ppath__icon {
  color: var(--c-plum);
  border-color: var(--c-rose);
}
.ppath__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.3rem);
  font-weight: 500;
  color: var(--c-plum);
  line-height: var(--lh-snug);
}
.ppath__who {
  margin-block: var(--sp-3) var(--sp-4);
  max-inline-size: 54ch;
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
/* Stages read as a lettered sequence, not a numbered list */
.ppath__stages {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
  counter-reset: stage;
}
.ppath__stages li {
  counter-increment: stage;
  position: relative;
  padding-inline-start: 2.5rem;
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--line);
}
.ppath__stages li:first-child {
  border-block-start: 1px solid var(--line);
}
.ppath__stages li::before {
  content: counter(stage);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--sp-3) + 0.15em);
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--c-rose);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.ppath__stages b {
  display: block;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--c-plum);
}
.ppath__stages span {
  display: block;
  margin-block-start: 0.3rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
.prlist__note {
  margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  max-inline-size: 60ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* 03 — what every pathway shares */
.prcommon__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}

@media (max-width: 1000px) {
  .prwhat__marks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }
  .prwhat__marks li:last-child {
    grid-column: 1 / -1;
  }
  .ppath {
    grid-template-columns: 0.75fr 1.25fr;
    gap: var(--sp-5);
  }
}

@media (max-width: 900px) {
  .prwhat__grid,
  .prlist__head,
  .prcommon__head {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

@media (max-width: 768px) {
  /* Hero holds the image beside copy until here, per the site-wide hero rule */
  .prhero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .prhero__figure {
    aspect-ratio: 16 / 10;
  }
  .ppath {
    grid-template-columns: 1fr;
  }
  /* Alternating sides have no meaning once the row is a single column */
  .ppath--flip .ppath__fig {
    order: 0;
  }
  .ppath__fig {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 680px) {
  .prwhat__marks {
    column-gap: var(--sp-3);
    row-gap: var(--sp-4);
  }
  .prwhat__ic {
    inline-size: 38px;
    block-size: 38px;
  }
  .prwhat__ic svg {
    inline-size: 18px;
    block-size: 18px;
  }
  .prwhat__marks b {
    font-size: 1rem;
  }
  .prwhat__marks span:not(.prwhat__ic) {
    font-size: 0.82rem;
  }
  .ppath__icon {
    inline-size: 42px;
    block-size: 42px;
    margin-block-end: var(--sp-3);
  }
  .ppath__icon svg {
    inline-size: 20px;
    block-size: 20px;
  }
  .ppath__stages li {
    padding-inline-start: 2.1rem;
  }
}

/* ==========================================================================
   Technologies
   ========================================================================== */
.thero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.thero__copy {
  min-inline-size: 0;
}
/* Arched crown — the site's shared hero figure treatment */
.thero__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: clip;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.2;
  border-start-start-radius: 999px;
  border-start-end-radius: 999px;
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}
.thero__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 62% center;
}

/* 01 — the principle */
.tprin__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: start;
}
.tprin__side {
  min-inline-size: 0;
}
.tprin__aside {
  margin-block-start: var(--sp-4);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  max-inline-size: 46ch;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--c-plum);
  line-height: 1.5;
}

/* 02 — capability categories, alternating image side */
.tcats__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.tcats__list {
  display: grid;
  gap: clamp(3rem, 6vw, 6rem);
}
.tcat {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--col-gap);
  align-items: center;
}
/* Alternating sides give the section rhythm rather than a repeating row */
.tcat--flip .tcat__fig {
  order: 2;
}
.tcat__fig {
  margin: 0;
  overflow: clip;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
}
.tcat__fig img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.tcat:hover .tcat__fig img {
  transform: scale(1.03);
}
.tcat__copy {
  min-inline-size: 0;
}
.tcat__icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: var(--sp-4);
  color: var(--c-rose);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition:
    color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.tcat__icon svg {
  inline-size: 24px;
  block-size: 24px;
}
.tcat:hover .tcat__icon {
  color: var(--c-plum);
  border-color: var(--c-rose);
}
.tcat__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.3rem);
  font-weight: 500;
  color: var(--c-plum);
  line-height: var(--lh-snug);
}
.tcat__purpose {
  margin-block: var(--sp-3) var(--sp-4);
  max-inline-size: 56ch;
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
/* Naming the specialties is a brief requirement, so they get their own row */
.tcat__specs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
}
.tcat__specslabel {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.75;
}
.tcat__specs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}
.tcat__specs a {
  font-size: var(--t-small);
  color: var(--c-rose);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.tcat__specs a:hover {
  border-block-end-color: var(--c-rose);
}
.tcats__note {
  margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  max-inline-size: 62ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* 03 — physician oversight (dark band) */
.tover__grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: var(--col-gap);
  align-items: start;
}
.tover__copy {
  min-inline-size: 0;
}
.tover__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tover__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line-on-dark);
}
.tover__list li:first-child {
  border-block-start: 1px solid var(--line-on-dark);
}
.tover__ic {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  color: var(--on-dark);
  border: 1px solid var(--line-on-dark);
  border-radius: 50%;
}
.tover__ic svg {
  inline-size: 20px;
  block-size: 20px;
}
.tover__text {
  min-inline-size: 0;
}
.tover__text b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--on-dark);
  line-height: var(--lh-snug);
}
.tover__text span {
  display: block;
  margin-block-start: 0.35rem;
  font-size: var(--t-small);
  color: var(--on-dark-soft);
  line-height: var(--lh-body);
}

@media (max-width: 1000px) {
  .tcat {
    grid-template-columns: 0.75fr 1.25fr;
    gap: var(--sp-5);
  }
}

@media (max-width: 900px) {
  .tprin__grid,
  .tcats__head,
  .tover__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

@media (max-width: 768px) {
  /* Hero holds the image beside copy until here, per the site-wide hero rule */
  .thero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .thero__figure {
    aspect-ratio: 16 / 10;
  }
  .tcat {
    grid-template-columns: 1fr;
  }
  /* Alternating sides have no meaning once the row is a single column */
  .tcat--flip .tcat__fig {
    order: 0;
  }
  .tcat__fig {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 680px) {
  .tcat__icon {
    inline-size: 42px;
    block-size: 42px;
    margin-block-end: var(--sp-3);
  }
  .tcat__icon svg {
    inline-size: 20px;
    block-size: 20px;
  }
  .tover__list li {
    gap: var(--sp-3);
    padding-block: var(--sp-3);
  }
  .tover__ic {
    inline-size: 36px;
    block-size: 36px;
  }
  .tover__ic svg {
    inline-size: 17px;
    block-size: 17px;
  }
  .tover__text b {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   Journal
   ========================================================================== */
.jhero__grid,
.jahero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.jhero__copy,
.jahero__copy {
  min-inline-size: 0;
}
/* Arched crown — the site's shared hero figure treatment */
.jhero__figure,
.jahero__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: clip;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.2;
  border-start-start-radius: 999px;
  border-start-end-radius: 999px;
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}
.jhero__figure img,
.jahero__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* 01 — the article index. One piece leads; the others sit beside it. */
.jlist__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: end;
  margin-block-end: clamp(2.5rem, 4vw, 3.5rem);
}
.jlist__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: start;
}
.jart {
  min-inline-size: 0;
}
/* The lead piece spans both rows and is set larger */
.jart--lead {
  grid-row: span 2;
}
.jart a {
  display: block;
  block-size: 100%;
}
.jart__fig {
  margin: 0 0 var(--sp-4);
  overflow: clip;
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 10;
}
.jart--lead .jart__fig {
  aspect-ratio: 4 / 3.4;
}
.jart__fig img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.jart a:hover .jart__fig img {
  transform: scale(1.04);
}
.jart__copy {
  min-inline-size: 0;
}
.jart__spec {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-rose);
}
.jart__title {
  margin-block-start: var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  font-weight: 500;
  color: var(--c-plum);
  line-height: var(--lh-snug);
}
.jart--lead .jart__title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
}
.jart__stand {
  margin-block-start: var(--sp-3);
  max-inline-size: 54ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
.jart--lead .jart__stand {
  font-size: var(--t-body);
}
.jart__go {
  display: block;
  inline-size: 30px;
  block-size: 1px;
  margin-block-start: var(--sp-4);
  background: var(--line-strong);
  position: relative;
  transition:
    inline-size var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}
.jart__go::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: -3px;
  inline-size: 7px;
  block-size: 7px;
  border-block-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  transform: rotate(45deg);
  color: var(--line-strong);
  transition: color var(--dur) var(--ease-out);
}
.jart a:hover .jart__go {
  inline-size: 44px;
  background: var(--c-rose);
}
.jart a:hover .jart__go::after {
  color: var(--c-rose);
}
[dir="rtl"] .jart__go::after {
  transform: rotate(-135deg);
}
.jlist__note {
  margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
  padding-inline-start: var(--sp-4);
  border-inline-start: 2px solid var(--c-rose);
  max-inline-size: 58ch;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* Article page — specialty sits above the headline */
.jahero__spec {
  display: block;
  margin-block-end: var(--sp-3);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-rose);
}
.jahero__title {
  max-inline-size: 18ch;
}

/* Article in preparation */
.japrep__grid {
  display: grid;
  place-items: center;
}
.japrep__copy {
  max-inline-size: 56ch;
  text-align: center;
}
.japrep__ic {
  display: grid;
  place-items: center;
  inline-size: 58px;
  block-size: 58px;
  margin: 0 auto var(--sp-4);
  color: var(--c-rose);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.japrep__ic svg {
  inline-size: 26px;
  block-size: 26px;
}
.japrep__note {
  margin-block-start: var(--sp-4);
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}
.japrep__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
}

@media (max-width: 900px) {
  .jlist__head {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  /* Lead takes the full row; the other two sit two-per-row beneath it */
  .jlist__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .jart--lead {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .jart--lead .jart__fig {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  /* Hero holds the image beside copy until here, per the site-wide hero rule */
  .jhero__grid,
  .jahero__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .jhero__figure,
  .jahero__figure {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 680px) {
  /* Two per row — never a single-column stack */
  .jlist__grid {
    column-gap: var(--sp-3);
    row-gap: var(--sp-4);
  }
  .jart__title,
  .jart--lead .jart__title {
    font-size: 1rem;
  }
  .jart__stand {
    font-size: 0.82rem;
  }
  .jart--lead .jart__stand {
    font-size: 0.82rem;
  }
  /* The whole card is tappable — a 30px rule adds nothing at this width */
  .jart:not(.jart--lead) .jart__go {
    display: none;
  }
  .japrep__links .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}