/* The concept. Visual system carried from direction 3: warm cream,
   Gabarito over Source Sans, pill and rounded-block shapes, one warm
   grade across the photography. Architecture is a proper homepage. */

:root {
  --bg: #fbf6ee;
  --bg-alt: #f2eade;
  --bg-warm: #f8ebe2;
  --paper: #ffffff;
  --fg: #1b2228;
  --fg-muted: #56626b;
  --rule: rgba(27, 34, 40, 0.14);
  --rule-soft: rgba(27, 34, 40, 0.08);
  --accent: #2b7fb5;
  --accent-deep: #1a5c86;
  --dark: #17313f;
  --dark-lift: #21414f;
  --on-dark: #f3ece2;
  --on-dark-muted: #a9bfcb;

  --font-display: "Gabarito", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;

  --sec: clamp(2.75rem, 1.8rem + 3.1vw, 5rem);
  --pull-fert: clamp(3.25rem, 3.9rem + 3.9vw, 8rem);
  --pull-quiz: clamp(3rem, 3.2rem + 3.2vw, 7rem);
  --card-drop: clamp(0.6rem, 0.6rem + 0.7vw, 1.25rem);
  --hero-pad-top: clamp(2rem, 1.2rem + 3vw, 4rem);
  --wrap: 100rem;
  --gutter: clamp(1.25rem, 0.7rem + 2.4vw, 3rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --grade: saturate(0.85) contrast(1.03) brightness(1.03) sepia(0.2);

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --tint-blue: #b6d5ea;
  --tint-warm: #dda884;
  --star: #e8a33d;
  --r-img: 6px 48px 6px 6px;
  --r-img-sm: 4px 24px 4px 4px;
  --accent-on-dark: #6cb0dc;
}

body { font-size: 1.125rem; }
.hl { color: var(--accent); }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.028em; }

.sec { padding-block: var(--sec); }
.sec--tight { padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem); }

.lead2 { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.6; color: var(--fg-muted); }

/* Buttons and links */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0 1.9rem;
  border-radius: 999px;
  background: var(--dark);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 200ms var(--ease);
}

/* The fill grows from wherever the pointer entered, so it answers the
   person rather than always running the same way. Falls back to the
   centre for keyboard focus, where there is no pointer. */
.btn > i {
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 999px;
  background: var(--fill, var(--accent-deep));
  transform: scale(0);
  transition: transform 380ms var(--ease);
  z-index: -1;
  pointer-events: none;
}
/* The fill front is the dot's radius, which is linear in scale, so the curve
   on the scale is the curve the eye reads on the sweep. On --ease the front
   had crossed the whole button in 115ms of the 380, and the remaining 265ms
   was the circle growing past the edges where nothing is visible: 30% of the
   transition doing all the work. Linear gives the front a constant speed and
   spreads the visible crossing over 285ms. The way out keeps --ease, which
   Nick likes, so the two directions are deliberately not symmetrical. */
.btn:hover > i,
.btn:focus-visible > i { transform: scale(62); transition-timing-function: linear; }
.btn:active > i { transform: scale(62); transition-duration: 120ms; }
.btn--line { --fill: rgba(23, 49, 63, 0.1); background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn--line:hover, .btn--line:focus-visible { box-shadow: inset 0 0 0 1.5px rgba(27,34,40,.4); }
.btn--light { --fill: var(--tint-blue); background: var(--paper); color: var(--dark); }
.btn--ondark { --fill: var(--dark-lift); background: transparent; color: var(--on-dark); box-shadow: inset 0 0 0 1.5px rgba(243,236,226,.3); }
.btn--ondark:hover, .btn--ondark:focus-visible { box-shadow: inset 0 0 0 1.5px rgba(243,236,226,.6); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 60; background: var(--bg); }
.nav__inner { display: flex; align-items: center; gap: 1.5rem; padding-block: 0.8rem; }
.nav__logo { flex: none; line-height: 0; }
.nav__logo img { height: 4.25rem; width: auto; transition: height 300ms var(--ease); }
.nav.is-stuck .nav__logo img { height: 3.4rem; }
.nav .btn { min-height: 2.9rem; padding-inline: 1.4rem; }
.nav__links { display: none; align-items: center; gap: 0.25rem; margin-inline: auto; }
.nav__links a { padding: 0.7rem var(--np, 1rem); border-radius: 999px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 220ms var(--ease); }
.nav__links a:hover, .nav__links a:focus-visible { background: var(--bg-alt); }
.nav__end { display: none; align-items: center; gap: 1.1rem; }
.nav__tel { display: inline-block; padding-block: 0.55rem; font-family: var(--font-display); font-weight: 700; text-decoration: none; white-space: nowrap; }
.burger { margin-left: auto; display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 3rem; height: 3rem; align-items: flex-end; }
.burger > span:not(.visually-hidden) { display: block; height: 2px; border-radius: 2px; background: var(--fg); transition: width 240ms var(--ease); }
.burger span:nth-child(1) { width: 60%; }
.burger span:nth-child(2) { width: 100%; }
.burger span:nth-child(3) { width: 78%; }
/* on a touch device the hover state sticks after the tap that closes the
   menu, so the bars stayed at equal width until you tapped elsewhere. The
   icon is only meant to even out under an actual pointer. */
@media (hover: hover) { .burger:hover > span:not(.visually-hidden) { width: 100%; } }
@media (min-width: 62rem) { .nav__links, .nav__end { display: flex; } .burger { display: none; } }

/* 1. Hero: copy beside a tall rounded photograph */
.hero { position: relative; padding-block: var(--hero-pad-top) clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1.4rem + 3vw, 3.5rem); align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 1.35rem + 4.2vw, 4rem); line-height: 1.04; font-weight: 600; max-width: 16ch; }
.hero__deck { margin-top: 1.4rem; font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem); line-height: 1.5; color: var(--fg-muted); }
.hero__sub { margin-top: 1.15rem; font-size: 1.0625rem; line-height: 1.6; color: var(--fg-muted); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.1rem; }
.hero__shot { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; }
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: 1.04fr 0.96fr; }
  .hero__shot { aspect-ratio: 5 / 6; }
}

/* 2. Proof: a dark rounded block floating on the cream */
.proof__block { background: var(--dark); color: var(--on-dark); border-radius: var(--r-lg); padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.proof__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
.proof__n { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.625rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.proof__l { display: block; margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.5; color: var(--on-dark-muted); max-width: 22ch; }
@media (min-width: 48rem) { .proof__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 1rem + 1.8vw, 2.75rem); } }

/* 3. What happens when you call */
.steps h2 { font-size: clamp(1.875rem, 1.35rem + 2.3vw, 3.25rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; }
.steps__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 1.6rem + 3vw, 4rem); align-items: start; }
.steps__lead { max-width: 32rem; }
.steps__intro { margin-top: 1.35rem; }
.steps__shot { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.step { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding-block: 1.15rem; border-top: 1px solid var(--rule-soft); }
.step:first-child { border-top: 0; padding-top: 0; }
.step__n { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.step h3 { font-size: 1.1875rem; font-weight: 600; }
.step p { margin-top: 0.35rem; font-size: 1rem; line-height: 1.58; color: var(--fg-muted); }
@media (min-width: 62rem) {
  .steps__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); column-gap: clamp(3rem, 1.5rem + 4vw, 6rem); }
  .steps__lead { max-width: none; }
  .steps__shot { aspect-ratio: 1; }
}

/* 5. Fertility, the one place the palette warms */
.fert { background: var(--bg-warm); }
.fert__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 1.6rem + 3vw, 4rem); align-items: center; }
.fert__body { max-width: 30rem; }
.fert h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); font-weight: 600; }
.fert p { margin-top: 1.15rem; font-size: 1.0625rem; line-height: 1.62; color: var(--fg-muted); }
.fert ul { margin-top: 1.5rem; display: grid; gap: 0.7rem; }
.fert li { position: relative; padding-left: 1.5rem; font-size: 1rem; line-height: 1.55; color: var(--fg-muted); }
.fert li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 999px; background: #c98a6d; }
.fert__ctas { margin-top: 2rem; }
.fert__shot { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; }
@media (min-width: 62rem) {
  .fert__grid { grid-template-columns: minmax(0, 58rem) minmax(0, 30rem); justify-content: space-between; column-gap: clamp(2.5rem, 1.2rem + 3.4vw, 5rem); }
  .fert__shot { aspect-ratio: 4 / 3; }
  .fert__grid > .shotwrap { order: -1; }
}

/* 6. One case manager. The warm ground carries on from fertility rather
   than cutting to cream underneath an inset block. */
.one { background: var(--bg-warm); }
.one__block { background: var(--dark); color: var(--on-dark); border-radius: var(--r-lg); padding: clamp(2rem, 1.4rem + 3vw, 4rem); }
.one__top { display: grid; grid-template-columns: 1fr; gap: 1.35rem; }
.one .hl { color: var(--accent-on-dark); }
.one h2 { font-size: clamp(1.875rem, 1.35rem + 2.3vw, 3.25rem); font-weight: 600; }
.one__body { font-size: 1.0625rem; line-height: 1.62; color: var(--on-dark-muted); }
@media (min-width: 56rem) { .one__top { grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); align-items: end; } }
.one__lower { margin-top: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 1.4rem + 2vw, 3rem); }
/* the quotes grid handles its own two columns, so the row that used to
   hold a quote and a name list is a single column now */
@media (min-width: 56rem) { .one__lower { grid-template-columns: 1fr; } }

/* 8. Close. Same ground as the clinics section above it. */
.close__block {
  background: var(--bg-warm);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 1.4rem + 3vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.4rem + 3vw, 3.5rem);
}
.close__lead { max-width: 33rem; }
.close h2 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.875rem); font-weight: 600; }
.close p { margin-top: 1.35rem; font-size: 1.0625rem; line-height: 1.62; color: var(--fg-muted); }
.close__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.25rem; }
.close__aside { display: grid; gap: 1.5rem; align-content: center; }
.close__ring { display: block; text-decoration: none; }
.close__ring small { display: block; font-size: 0.9375rem; color: var(--fg-muted); }
.close__ring b {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
  transition: color 220ms var(--ease);
}
.close__ring:hover b, .close__ring:focus-visible b { color: var(--dark); }
@media (min-width: 56rem) {
  .close__block { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); column-gap: clamp(3rem, 1.5rem + 4vw, 6rem); }
}


/* Three deliberate overlaps, each one crossing a real edge: the proof
   block over the hero photograph, the fertility photograph up into the
   treatments section, and the questionnaire card out of the top of the
   blue. Desktop only: at mobile the columns stack and an overlap would
   just collide. */
.proof__block { position: relative; z-index: 3; }
.fert__grid > .shotwrap { position: relative; z-index: 3; }
.one__block { position: relative; z-index: 3; }

@media (min-width: 62rem) {
  .hero { padding-bottom: 0; }
  .proof-sec { margin-top: -2.75rem; padding-block: 0 var(--sec); }
  .proof__block { max-width: 62rem; }
  .treat { padding-bottom: calc(var(--sec) + var(--pull-fert)); }
  .faq { padding-bottom: calc(var(--sec) + var(--pull-quiz)); }
  .fert__grid > .shotwrap { align-self: start; margin-top: calc(var(--pull-fert) * -1); }
}


/* The corner needs a companion or it reads as a mistake. A block of the
   same geometry sits behind each photograph, offset up and right, so the
   big corner is echoed just outside the image and the square corners
   read as deliberate. */
.shotwrap { position: relative; --slab-off: clamp(0.85rem, 0.8rem + 0.8vw, 1.5rem); }
.shotwrap::before {
  content: "";
  position: absolute;
  top: calc(var(--slab-off) * -1);
  right: calc(var(--slab-off) * -1);
  left: var(--slab-off);
  bottom: var(--slab-off);
  background: var(--tint, var(--tint-blue));
  border-radius: var(--r-img);
  z-index: 0;
}
.shotwrap > * { position: relative; z-index: 1; }
.shotwrap--warm { --tint: var(--tint-warm); }

/* And something in front, on the square corner, so the two corner
   treatments meet and the asymmetry gets pointed at. It carries a fact,
   not a badge. */
.shotcard {
  position: absolute;
  left: calc(var(--card-drop) * -1);
  bottom: calc(var(--card-drop) * -1);
  z-index: 2;
  display: grid;
  gap: 0.15rem;
  max-width: 15rem;
  padding: 0.9rem 1.15rem 1rem;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: 0 18px 34px -22px rgba(23, 38, 28, 0.5), 0 2px 6px -3px rgba(23, 38, 28, 0.12);
}
.shotcard b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.shotcard span {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--fg-muted);
}


/* 8. Eligibility. The feature: tells someone where they stand before
   asking for a single detail. */
.elig { background: var(--accent-deep); color: #fff; }
.fails { display: grid; gap: 0; }
.fails li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.75rem; padding-block: 0.9rem; font-size: 1rem; line-height: 1.55; color: #cfe4f1; }
.fails b { font-family: var(--font-display); font-weight: 700; color: #a8d4ef; font-variant-numeric: tabular-nums; }

.panel__bars { display: flex; gap: 4px; margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.panel__bars span { flex: 1; height: 5px; border-radius: 999px; background: #3d7ea8; transition: background 260ms var(--ease); }
.panel__bars span.on { background: #a8d4ef; }
.panel__q { font-family: var(--font-display); font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2rem); font-weight: 600; line-height: 1.2; }
.panel__opts { display: grid; gap: 0.5rem; margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.opt {
  display: flex;
  align-items: center;
  min-height: 3.4rem;
  width: 100%;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  background: #14547c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: left;
  transition: background 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.opt:hover, .opt:focus-visible { background: #1b6b9d; box-shadow: inset 0 0 0 1px #a8d4ef; transform: translateX(5px); }
.panel__back { margin-top: 1.25rem; font-size: 0.9375rem; color: #cfe4f1; }
.panel__back button,
.panel__note button {
  display: inline-block;
  padding-block: 0.6rem;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease);
}
.panel__back button:hover, .panel__back button:focus-visible,
.panel__note button:hover, .panel__note button:focus-visible { color: var(--dark); text-decoration-thickness: 2px; }
.panel__res h4 { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem); font-weight: 600; }
.panel__res p { margin-top: 0.95rem; font-size: 1.0625rem; line-height: 1.6; color: #cfe4f1; }
.panel__res .btn { margin-top: 1.75rem; --fill: var(--tint-blue); background: var(--paper); color: var(--dark); }
.panel__note { margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid rgba(255,255,255,.22); font-size: 0.9375rem; line-height: 1.55; color: #cfe4f1; }

/* 9. Footer */
.foot { background: var(--dark); color: var(--on-dark); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); }
.foot__top { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); border-bottom: 1px solid rgba(243,236,226,.16); }
.foot__mark img { width: 12rem; height: auto; }
.foot__mark p { margin-top: 1.25rem; max-width: 30ch; font-size: 1rem; line-height: 1.7; color: var(--on-dark-muted); }
.foot__tel { display: inline-block; margin-top: 0.9rem; padding-block: 0.4rem; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; text-decoration: none; }
.foot__cols { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); }
.foot h3 { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-on-dark); }
.foot__cols ul { margin-top: 0.85rem; display: grid; }
.foot__cols a { display: inline-block; padding-block: 0.6rem; font-size: 1rem; color: var(--on-dark-muted); text-decoration: none; transition: color 200ms var(--ease); }
.foot__cols a:hover, .foot__cols a:focus-visible { color: #fff; }
.foot__base { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; padding-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-size: 0.9375rem; color: var(--on-dark-muted); }
.foot__base a { display: inline-block; padding-block: 0.65rem; text-decoration: none; color: #fff; font-weight: 600; }
@media (min-width: 40rem) { .foot__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .foot__top { grid-template-columns: 0.85fr 1.15fr; gap: clamp(3rem, 2rem + 3vw, 5rem); } }


/* The close had a 287px hole through its middle: two clusters pushed to
   the ends by space-between with nothing between them. Controlled gap
   instead, and the phone number carries real weight so the right column
   is a column rather than a leftover. */
@media (min-width: 56rem) {
  .close__block {
    grid-template-columns: 1.08fr 0.92fr;
    justify-content: stretch;
    column-gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
    align-items: center;
  }
  .close__aside { padding-left: clamp(1.5rem, 1rem + 2vw, 3rem); border-left: 1px solid rgba(27,34,40,.14); }
}
.close__ring b { font-size: clamp(2.125rem, 1.5rem + 2.8vw, 3.75rem); }

/* Nav and footer are allowed to be plain, but the hovers were a background
   swap and a colour swap, which is the exact thing the rules ban. A rule
   draws from the left and the label lifts. */
.nav__links a,
.nav__tel,
.foot__cols a,
.foot__tels a,
.foot__tel,
.foot__base a {
  position: relative;
  transition: color 200ms var(--ease), transform 240ms var(--ease);
}
.nav__links a::after,
.nav__tel::after,
.foot__cols a::after,
.foot__tels a::after,
.foot__tel::after,
.foot__base a::after {
  content: "";
  position: absolute;
  left: var(--np, 1rem);
  right: var(--np, 1rem);
  bottom: 0.45rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-deep);
  transform: scaleX(0);
  transform-origin: var(--org, left) center;
  transition: transform 300ms var(--ease);
}
.nav__tel::after { left: 0; right: 0; bottom: 0.3rem; }
.foot__cols a::after { left: 0; right: 0; bottom: 0.35rem; background: var(--accent-on-dark); }
.foot__tels a::after { left: 0; right: 0; bottom: 0.2rem; background: var(--accent-on-dark); }
.foot__tel::after { left: 0; right: 0; bottom: 0.1rem; height: 3px; background: var(--accent-on-dark); }
.foot__base a::after { left: 0; right: 0; bottom: 0.4rem; background: var(--accent-on-dark); }
.nav__links a:hover, .nav__links a:focus-visible, .nav__tel:hover, .nav__tel:focus-visible,
.foot__cols a:hover, .foot__cols a:focus-visible, .foot__tel:hover, .foot__tel:focus-visible,
.foot__tels a:hover, .foot__tels a:focus-visible,
.foot__base a:hover, .foot__base a:focus-visible { transform: translateY(-2px); }
.nav__links a:hover::after, .nav__links a:focus-visible::after, .nav__tel:hover::after, .nav__tel:focus-visible::after,
.foot__cols a:hover::after, .foot__cols a:focus-visible::after, .foot__tel:hover::after, .foot__tel:focus-visible::after,
.foot__tels a:hover::after, .foot__tels a:focus-visible::after,
.foot__base a:hover::after, .foot__base a:focus-visible::after { transform: scaleX(1); }
.nav__links a:hover, .nav__links a:focus-visible,
.nav__tel:hover, .nav__tel:focus-visible { background: transparent; color: var(--accent-deep); }
.foot__cols a:hover, .foot__cols a:focus-visible,
.foot__tels a:hover, .foot__tels a:focus-visible { color: #fff; }


/* 4. Treatments. Three shapes were stacked in every cell: the photograph,
   its companion slab and the card behind them, all the same rounded
   rectangle. The slab and the card are gone, so a cell is one photograph
   and some type. The slab stays on the four feature photographs, which is
   what now separates a feature from a thumbnail. The column stagger gives
   the set a rhythm, and the sixth cell has no image at all. */
.treat h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); font-weight: 600; max-width: 20ch; }
.treat__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.75rem, 1.8rem + 3.5vw, 5rem) clamp(1.5rem, 1rem + 2vw, 2.75rem); margin-top: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); }
.tc { display: block; text-decoration: none; color: inherit; padding-top: clamp(1rem, 0.85rem + 0.6vw, 1.35rem); }
.tc__img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-img);
  overflow: hidden;
  box-shadow: 0 20px 36px -26px rgba(23, 38, 28, 0.5), 0 0 0 0 var(--tint-blue);
  transition: box-shadow 300ms var(--ease);
}
.tc:hover .tc__img, .tc:focus-visible .tc__img { box-shadow: 0 20px 36px -26px rgba(23, 38, 28, 0.5), 15px -15px 0 0 var(--tint-blue); }
.tc__img .ph { transform-origin: var(--px, 50%) var(--py, 50%); transition: transform 320ms var(--ease); }
.tc:hover .ph, .tc:focus-visible .ph { transform: scale(1.05); }
.tc h3 { margin-bottom: clamp(1rem, 0.85rem + 0.6vw, 1.35rem); font-size: 1.3125rem; font-weight: 600; transition: color 200ms var(--ease); }
.tc:not(.tc--ask) p { margin-top: 1.1rem; font-size: 1rem; line-height: 1.55; color: var(--fg-muted); }
.tc:hover h3, .tc:focus-visible h3 { color: var(--accent-deep); }

.tc--ask {
  padding-top: 0;
  display: grid;
  align-content: center;
  padding: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  border-radius: var(--r-lg);
  background: var(--dark);
  color: var(--on-dark);
}
.tc__ask { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem); font-weight: 600; line-height: 1.24; color: var(--on-dark); }
.tc__asksub { margin-top: 0.7rem; font-size: 1rem; line-height: 1.55; color: var(--on-dark-muted); }
.tc--ask .btn { margin-top: 1.4rem; justify-self: start; --fill: var(--tint-blue); }
@media (min-width: 40rem) { .treat__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) {
  .treat__grid { grid-template-columns: repeat(4, 1fr); }
  .tc h3 { font-size: 1.1875rem; }
  .tc:not(.tc--ask) p { font-size: 0.9375rem; }
}

/* 5. Eligibility. It is the one thing on the page that answers the
   question before asking for anything, and it was sitting in a card in a
   side column. It now runs corner to corner in the mark's own blue, which
   is the only place on the page that colour is used at any scale. */
.panel { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); }
.panel__intro h2 { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; color: #fff; }
.panel__intro p { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.6; color: #cfe4f1; }
.panel__bars { margin-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.panel__body { min-height: 13rem; display: grid; align-content: center; }
.panel__card {
  position: relative;
  z-index: 4;
  padding: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: 0 40px 70px -42px rgba(9, 32, 48, 0.55), 0 4px 10px -5px rgba(9, 32, 48, 0.18);
}
.panel__bars span { background: #e4dbcb; }
.panel__bars span.on { background: var(--accent); }
.panel__q { color: var(--fg); }
.panel__res h4 { color: var(--fg); }
.panel__res p { color: var(--fg-muted); }
.panel__res .btn { background: var(--dark); color: var(--on-dark); --fill: var(--accent-deep); }
.panel__back { color: var(--fg-muted); }
.panel__note { color: var(--fg-muted); border-top-color: var(--rule-soft); }
.opt { background: var(--bg-alt); box-shadow: inset 0 0 0 1px rgba(27,34,40,.16); color: var(--fg); }
.opt:hover, .opt:focus-visible { background: #e9dfd0; box-shadow: inset 0 0 0 1px var(--accent-deep); }
.fails-wrap { margin-top: clamp(3rem, 2rem + 3vw, 5rem); display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 1rem + 1.4vw, 2.5rem); }
.fails-wrap h3 { font-size: 1.375rem; font-weight: 600; max-width: 18ch; color: #fff; }
@media (min-width: 62rem) {
  .panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: clamp(3rem, 1.5rem + 4vw, 6rem); align-items: start; }
  .panel__card { margin-top: calc(var(--pull-quiz) * -1); }
  .panel__intro { padding-top: clamp(0.5rem, 0.2rem + 1vw, 1.5rem); }
  .fails-wrap { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); column-gap: clamp(3rem, 1.5rem + 4vw, 6rem); }
  .fails { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); }
}

/* 6. Clinics. It was the fertility layout again in a different colour: a
   photograph on one side, copy on the other. It is the section the
   business actually earns from, so it gets the one thing nothing else on
   the page has, type at full container width, and the only letterbox
   photograph in the build. */
.clin { background: var(--bg); padding-bottom: calc(var(--sec) + var(--card-drop)); }
.clin__head h2 {
  max-width: 36ch;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.875rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.028em;
}
.clin__head p { margin-top: 1.6rem; font-size: 1.0625rem; line-height: 1.62; color: var(--fg-muted); }

.clin__shot { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(23, 38, 28, 0.55); }
.clin__row { margin-top: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); display: grid; grid-template-columns: 1fr; gap: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); align-items: center; }
.clin__side { display: grid; gap: clamp(2rem, 1.4rem + 2vw, 2.75rem); }
.clin__points { display: grid; grid-template-columns: 1fr; gap: 0; }
.clin__points li { padding-block: 1.1rem; border-top: 1px solid var(--rule); }
.clin__points b { display: block; font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--accent-deep); }
.clin__points span { display: block; margin-top: 0.3rem; font-size: 1rem; line-height: 1.5; color: var(--fg-muted); }
.clin__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; }
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .clin__points { grid-template-columns: repeat(3, 1fr); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
}
@media (min-width: 62rem) {
  .clin__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(3rem, 1.5rem + 4vw, 6rem); align-items: end; }
  .clin__head p { margin-top: 0; }
  .clin__row { grid-template-columns: minmax(0, 0.26fr) minmax(0, 1fr); column-gap: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }
  .clin__points li:first-child { border-top: 0; padding-top: 0; }
}

/* 7. The review score. It was a sentence in the middle of a paragraph, so
   the strongest independent proof on the page read as a footnote. */
.rev {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.6rem) clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem);
  border-radius: var(--r-md);
  background: var(--dark);
  color: var(--on-dark);
  text-decoration: none;
  box-shadow: 0 22px 42px -30px rgba(12, 30, 40, 0.8);
}
.rev__stars { display: block; width: 8.5rem; height: auto; fill: var(--star); }
.rev__row { display: flex; align-items: baseline; gap: 0.7rem; }
.rev__n {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.035em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.rev__c { font-size: 0.9375rem; line-height: 1.4; color: var(--on-dark-muted); }
.rev__c strong { color: #fff; font-weight: 600; }


/* The treatments dropdown. Opens on hover and on focus, so a keyboard
   reaches it without script; the script only exists for touch, where
   there is no hover to open it with. */
.nav__has { position: relative; }
.nav__has > a { display: inline-flex; align-items: center; gap: 0.4rem; }
.nav__chev { width: 12px; height: 8px; flex: none; transition: transform 260ms var(--ease); }
.nav__has > a[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__drop {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -0.5rem;
  z-index: 70;
  min-width: 17rem;
  padding: 0.6rem;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: 0 30px 60px -30px rgba(9, 32, 48, 0.45), 0 2px 8px -4px rgba(9, 32, 48, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 220ms var(--ease), transform 260ms var(--ease), visibility 0s linear 260ms;
}
.nav__has:hover .nav__drop,
.nav__has:focus-within .nav__drop,
.nav__has > a[aria-expanded="true"] + .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.nav__drop ul { display: grid; }
.nav__drop a {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--fg);
  text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.nav__drop a::after { content: none; }
.nav__drop a:hover, .nav__drop a:focus-visible { background: var(--bg-alt); color: var(--accent-deep); transform: none; }




/* A small pill for secondary actions that sit beside a full-size button */
.btn--sm { min-height: 2.9rem; padding-inline: 1.1rem; font-size: 0.9375rem; }
.lock {
  width: 11px;
  height: 13px;
  flex: none;
  margin-right: 0.5rem;
  border-radius: 2px;
  background:
    linear-gradient(currentColor, currentColor) bottom / 11px 8px no-repeat,
    radial-gradient(circle at 50% 50%, transparent 2.2px, currentColor 2.2px 3.4px, transparent 3.4px) top / 11px 8px no-repeat;
}


/* 4. Mobile menu. It hangs off the bottom of the sticky header, so it
   travels with it and needs no measuring. */
.burger span:nth-child(1),
.burger span:nth-child(3) { transition: width 240ms var(--ease), transform 300ms var(--ease); }
.burger span:nth-child(2) { transform-origin: right center; transition: width 240ms var(--ease), opacity 180ms var(--ease), transform 260ms var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { width: 100%; transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { width: 100%; transform: translateY(-8px) rotate(-45deg); }

.menu:focus { outline: none; }
.menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  box-shadow: 0 30px 50px -30px rgba(9, 32, 48, 0.35);
  animation: menuIn 260ms var(--ease) both;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
.menu__inner { padding-block: 1.5rem 2.25rem; display: grid; gap: 1.75rem; }
.menu__label { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.menu__sub { margin-top: 0.5rem; display: grid; grid-template-columns: 1fr; }
.menu__sub a { display: block; padding-block: 0.65rem; font-size: 1.0625rem; color: var(--fg); text-decoration: none; }
.menu__main { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); display: grid; }
.menu__main a { display: block; padding-block: 0.75rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--fg); text-decoration: none; }
.menu__sub a:hover, .menu__sub a:focus-visible,
.menu__main a:hover, .menu__main a:focus-visible { color: var(--accent-deep); }
.menu__end { display: grid; gap: 0.75rem; justify-items: start; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.menu__end .btn { width: 100%; justify-content: center; }
.menu__tel { display: inline-block; margin-top: 0.35rem; padding-block: 0.5rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--accent-deep); text-decoration: none; }
.menu__tel:hover, .menu__tel:focus-visible { color: var(--dark); }
@media (min-width: 34rem) { .menu__sub { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
@media (min-width: 62rem) { .menu { display: none; } }


/* The top bar. The portal is a returning-user utility for partner clinics
   and the phone number is a contact detail; neither is navigation. It never
   sticks: the rule caps a sticky nav at 80px and the two together exceed
   it. The hover is the page's own bloom rather than an underline, so the
   bar needs no vertical room to carry one. */
.topbar { display: none; background: var(--dark); color: var(--on-dark); }
.topbar__inner { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; padding-block: 0.3rem; }
.topbar a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms var(--ease);
}
.topbar a > i {
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 999px;
  background: var(--dark-lift);
  transform: scale(0);
  transition: transform 300ms var(--ease);
  z-index: -1;
}
.topbar a:hover > i, .topbar a:focus-visible > i { transform: scale(26); }
.topbar a:hover, .topbar a:focus-visible { color: #fff; }
.topbar__tel { font-weight: 700; }
.topbar__link .lock { margin-right: 0.45rem; }
@media (min-width: 62rem) { .topbar { display: block; } }

/* The nav carries five links, a dropdown and a button, and the logo went
   up a size. It needs a little help at the bottom of the desktop range
   before the burger takes over. */
@media (min-width: 62rem) and (max-width: 72rem) {
  .nav__links a { --np: 0.45rem; }
  .nav__inner { gap: 0.9rem; }
  .nav__logo img { height: 3.4rem; }
  .nav.is-stuck .nav__logo img { height: 2.9rem; }
  .nav .btn { padding-inline: 1.1rem; font-size: 0.9375rem; }
}

/* The container went from 82rem to 100rem, so every column got wider.
   Body copy keeps its own measure rather than following the column, or
   the lines run past the 75ch ceiling on a large screen. */
.steps__intro { max-width: 54ch; }
.step p { max-width: 62ch; }
.panel__intro p { max-width: 54ch; }
.fails li span { max-width: 54ch; }
.close p { max-width: 48ch; }
.foot__mark p { max-width: 34ch; }

/* Those two wrappers were capped, so in a wider fractional track the
   leftover showed up as a gap between the columns rather than as a wider
   column. The text inside keeps its own measure; the wrapper does not
   need one as well. */
@media (min-width: 62rem) {
  .close__lead { max-width: none; }
}

/* 2. The steps stick while the taller left column scrolls past them. The
   grid is align-items: start, so the wrapper has travel: the left column
   runs 750px at 1440 against the list's 630. */

/* 5. Four real reviews rather than a line asserting that people thank
   individuals. Three of the four name their case manager, so the reviews
   make the point instead of the page claiming it. */
.quotes { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 0.85rem + 0.8vw, 1.5rem); }
.quote {
  margin: 0;
  padding: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  border-radius: var(--r-md);
  background: var(--dark-lift);
}
.quote blockquote {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--on-dark);
}
.quote figcaption { margin-top: 0.9rem; font-size: 0.9375rem; color: var(--on-dark-muted); }
@media (min-width: 48rem) { .quotes { grid-template-columns: repeat(2, 1fr); } }

/* A warm band through the hero, full width. It starts between the top of
   the photograph and the top of the headline, and stops at the middle of
   the stat block, so the block sits half on the warm and half on the
   cream. Percentage top, because the distance between the photograph and
   the headline changes with the container; the bottom is a fixed offset
   past the hero, because the stat block's own overlap is fixed. */
.hero__band { display: none; }
@media (min-width: 62rem) {
  .hero__band {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 17%;
    bottom: -3rem;
    z-index: 0;
    background: var(--bg-warm);
  }
  .hero__grid { position: relative; z-index: 1; }
}

/* Mobile: the photograph goes above the copy, and the band runs from
   partway down it to the middle of the stat block. The top is derived
   from the photograph rather than guessed: the shot is the full shell
   width at 4:3, so its height is known, and the band starts 45% down it.
   The bottom is a vw fit across the mobile range, because the stat block
   reflows from two rows to one as the viewport grows. */
@media (max-width: 61.99rem) {
  .hero__grid > .hero__shot { order: -1; }
  .hero__band {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--hero-pad-top) + (100vw - 2 * var(--gutter)) * 0.75 * 0.45);
    bottom: calc(9.9vw - 209px);
    z-index: 0;
    background: var(--bg-warm);
  }
  .hero__grid { position: relative; z-index: 1; }
}

/* Three stats in a two column grid left the third one half width on its
   own row. It takes the row. */
@media (max-width: 47.99rem) {
  .proof__grid li:nth-child(3) { grid-column: 1 / -1; }
}


/* The steps stick while the taller left column scrolls past them. */
@media (min-width: 62rem) {
  .steps__side { position: sticky; top: 6.5rem; }
}

/* The FAQ keeps the case manager section's ground. The join stays on the
   standard rhythm, matching the fertility to case-manager join above it. */
.faq { background: var(--bg-warm); }

/* 7. Common questions.
   Placed after the clinics section rather than before it: the eligibility
   checker is already a question-and-answer object, so running the FAQ
   straight after it repeats the family. Native details/summary, so it is
   keyboard operable and works with no script at all. */
.faq__lead { max-width: 54ch; }
.faq__lead p { margin-top: 1.15rem; }
.faq__list { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--rule); }

.q { border-bottom: 1px solid var(--rule); }
.q summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-block: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.32;
  color: var(--fg);
  transition: color 240ms var(--ease);
}
.q summary::-webkit-details-marker { display: none; }
.q summary span { max-width: 62ch; }
.q summary:hover, .q summary:focus-visible { color: var(--accent-deep); }
.q summary:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; }

/* The marker is a plus that becomes a minus. Two bars, one of which turns. */
.q summary i {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
}
.q summary i::before,
.q summary i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-deep);
  transform: translate(-50%, -50%);
  transition: transform 260ms var(--ease);
}
.q summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.q[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.q[open] summary { color: var(--accent-deep); }

.q__a { padding-bottom: clamp(1.25rem, 1rem + 1vw, 1.85rem); max-width: 74ch; }
.q__a p { font-size: 1.0625rem; line-height: 1.65; color: var(--fg-muted); }
.q__a p + p, .q__a ul + p { margin-top: 1rem; }
.q__sub { font-weight: 600; color: var(--fg); }
.q__pts { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.q__pts li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--fg-muted);
}
.q__pts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}
@media (min-width: 62rem) {
  .faq .shell { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); column-gap: clamp(3rem, 1.5rem + 4vw, 6rem); align-items: start; }
  .faq__lead { position: sticky; top: 6.5rem; }
  .faq__list { margin-top: 0; }
}

/* Footer: the contact, hours, legal and index content the current site
   carries. The keyword strip has to stay for search, so it is set as a
   quiet index band rather than hidden or dropped. */
.foot__social { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.foot__social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(243,236,226,.1);
  color: var(--on-dark);
  transition: background 240ms var(--ease), color 240ms var(--ease);
}
.foot__social svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.foot__social a:hover, .foot__social a:focus-visible { background: var(--accent-on-dark); color: var(--dark); }

.foot__contact address { margin-top: 0.85rem; font-style: normal; font-size: 1rem; line-height: 1.7; color: var(--on-dark-muted); }
.foot__tels { margin-top: 0.5rem; display: grid; }
.foot__tels a { display: inline-block; padding-block: 0.65rem; font-size: 1rem; line-height: 1.5; color: var(--on-dark-muted); text-decoration: none; }
/* In the two-column band the hours sit in a half-width cell, which wrapped
   "9am to 5pm" onto two lines. They take the row there. At one column they
   already have the full width. */
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .foot__hours { grid-column: 1 / -1; }
}
.foot__hrs { margin-top: 0.85rem; display: grid; grid-template-columns: auto 1fr; column-gap: clamp(1rem, 0.8rem + 0.6vw, 1.75rem); font-size: 1rem; line-height: 1.95; color: var(--on-dark-muted); }
.foot__hrs dt { color: var(--on-dark); }
.foot__hrs dd { margin-left: 0; }

.foot__legal { padding-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
.foot__legal > div p { margin-top: 0.85rem; font-size: 0.9375rem; line-height: 1.7; color: var(--on-dark-muted); }

/* The paperless line sits with the brand, under the social row. */
.foot__paper { margin-top: 1.5rem; font-size: 0.9375rem; line-height: 1.6; color: var(--on-dark-muted); }

/* Disclaimer left, search terms right. The terms are set exactly as the
   current site carries them, one run of text with pipes, only Articles a
   link. They cannot be dropped without risking their rankings, so the job
   is to make them read as fine print rather than as a link farm. */
.foot__legal { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); }
.foot__terms { font-size: 0.8125rem; line-height: 1.9; color: rgba(243,236,226,.42); }
.foot__terms a { color: var(--on-dark-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243,236,226,.35); transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease); }
.foot__terms a:hover, .foot__terms a:focus-visible { color: #fff; text-decoration-color: #fff; }


@media (min-width: 62rem) {
  .foot__cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  .foot__top { grid-template-columns: 0.8fr 2fr; }
  .foot__legal { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: clamp(3rem, 1.5rem + 4vw, 6rem); align-items: end; }
}

/* ---------------------------------------------------------------- motion
   Restrained, so 200 to 400ms and nothing that moves the page around. The
   base layer is opacity only: no translate, because content sliding up on
   entry is the one motion pattern every template on the web already uses.
   The moments that do move are the concept's own devices, not effects laid
   over the top. Everything here is gated on .js-rv, which an inline script
   in the head sets, so with no script the page is simply static and whole. */

.js-rv .rv { opacity: 0; transition: opacity 260ms var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }

/* The stagger lives in CSS rather than being written onto each element: the
   pre-flight bans inline styles, and this ports to a block cleanly. Capped at
   six so the last card in a group is not left waiting. */
[data-stagger] > *:nth-child(2) { --i: 1; }
[data-stagger] > *:nth-child(3) { --i: 2; }
[data-stagger] > *:nth-child(4) { --i: 3; }
[data-stagger] > *:nth-child(5) { --i: 4; }
[data-stagger] > *:nth-child(6) { --i: 5; }
[data-stagger] > *:nth-child(n+7) { --i: 6; }
.js-rv .rv.is-in { opacity: 1; }

/* The companion slab arrives. It starts sitting exactly behind its
   photograph and steps out to its offset, which is the one moment on the
   page that explains what the device is. Three of them: hero, fertility,
   clinics. */
.js-rv .shotwrap::before { transition: transform 360ms var(--ease); }
.js-rv .shotwrap.rv:not(.is-in)::before {
  transform: translate(calc(var(--slab-off) * -1), var(--slab-off));
}


/* The process is the one genuinely sequential section, so its rules draw in
   order rather than everything appearing at once. The rule moves from being
   a border to being a line that can be drawn. */
.step { position: relative; border-top: 0; }
.step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rule-soft);
  transform-origin: left center;
}
.step:first-child::before { content: none; }
.js-rv .steps__side .step::before {
  transform: scaleX(0);
  transition: transform 380ms var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.js-rv .steps__side.is-in .step::before { transform: scaleX(1); }


@media (prefers-reduced-motion: reduce) {
  .js-rv .rv,
  .js-rv .rv.is-in { opacity: 1; }
  .js-rv .shotwrap.rv:not(.is-in)::before { transform: none; }
  .js-rv .steps__side .step::before { transform: scaleX(1); }
}

/* ---------------------------------------------------------------- mobile
   Three things that only go wrong once the layouts stack. */

@media (max-width: 61.99rem) {
  /* The fact card hangs off the photograph's bottom-left corner, which needs
     room outside the photograph to hang into. Once the layout stacks the
     photograph is the full content width, so the card had nowhere to go: it
     sat 13px outside the gutter, closer to the screen edge than anything else
     on the page, and covered a third of the image. It sits just inside the
     photograph's bottom-left corner instead, so the device survives and the
     clinics section stops paying for a drop that no longer happens.
     Do not make it `position: static` here: it is a child of .shotwrap, so
     it loses its z-index and falls behind the companion slab, and the slab
     then stretches to cover the taller wrapper. */
  .shotcard {
    left: 0.7rem;
    bottom: 0.7rem;
    max-width: 13.5rem;
    padding: 0.75rem 1rem 0.85rem;
  }
  .clin { padding-bottom: var(--sec); }
}

@media (max-width: 39.99rem) {
  /* One column, so a 4:3 photograph on all eight cards made this section
     3,428px, four screens of scrolling and a quarter of the whole page.
     16:9 keeps the photograph doing its job at two thirds the height. */
  .tc__img { aspect-ratio: 16 / 9; }
  .treat__grid { row-gap: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); }
}

@media (max-width: 33rem) {
  /* Stacked call to action pairs were ragged, 36px and 49px apart, because
     each button is sized to its label. Full width once they stack, which is
     also a bigger target. */
  .hero__ctas .btn,
  .close__ctas .btn,
  .clin__ctas .btn { width: 100%; justify-content: center; }
}

/* The clinic route, inside the first screen.
   Section 9 of the strategy brief asks for "a clear, early route for
   clinics", and the built hero had none: the topbar's Clinic portal is a
   login for existing members, and the clinics section sits 71% down the
   page. The concept brief rejected a plain line under the CTAs because it
   reads as a footnote, so this is one line dressed as an object. It stays
   out of the blue, which the design system reserves for actions, the
   highlighted word and the eligibility section only. */
.clinroute {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: clamp(1.4rem, 1.2rem + 0.8vw, 2rem);
  padding: 0.8rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--bg-alt);
  box-shadow: inset 0 0 0 1px var(--rule-soft);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--fg-muted);
  text-decoration: none;
  transition: background 240ms var(--ease), box-shadow 240ms var(--ease);
}
.clinroute__lead { font-weight: 600; color: var(--fg); }
.clinroute__arw {
  width: 1rem;
  height: 1px;
  position: relative;
  background: var(--accent-deep);
  transition: transform 240ms var(--ease);
}
.clinroute__arw::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 1px solid var(--accent-deep);
  border-right: 1px solid var(--accent-deep);
  transform: translateY(-50%) rotate(45deg);
}
.clinroute:hover,
.clinroute:focus-visible { background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.clinroute:hover .clinroute__arw,
.clinroute:focus-visible .clinroute__arw { transform: translateX(3px); }

@media (max-width: 33rem) {
  .clinroute { display: flex; justify-content: space-between; width: 100%; }
}