/* ============================================================================
   Mr Chelliah Selvasekar — Consultant Colorectal Surgeon
   PageBot Agency · v4 · Option B "Editorial Practice"

   Warm editorial. Cream page, deep green as the structural colour, gold as the
   accent, sage as the soft fill. Petrona (serif, with italics doing real work)
   + Schibsted Grotesk. Deliberately NOT Inter.

   Signature motif: the arch — a full radius on the top two corners. It appears
   on the hero portrait, the about image and the section markers, and it is what
   ties the page together.

   ---------------------------------------------------------------------------
   v4 note: this file replaces four stacked stylesheets (style + sections +
   pass1b + pass2). Each of those patched the one before it, and roughly 40% of
   the result was dead — eighteen class families that no longer existed in the
   markup. Everything here is reachable. Where the old files disagreed, the
   conflict is resolved once, in place, and the reasoning is in a comment rather
   than left to load order.
   ========================================================================= */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  --cream:#FBF8F3;
  --sand:#F3EDE3;
  --paper:#FFFFFF;
  --green:#1F3B33;
  --green-deep:#162C26;
  --green-soft:#DCE7E0;
  --green-wash:#EDF3EF;
  --gold:#C9A24A;
  --gold-deep:#8A6A3B;
  --gold-wash:#F7EFDF;
  --text:#2A2723;
  --ink:#1B2F29;
  --mute:#5B5750;
  --mute-soft:#8A857C;
  --line:#E6DED1;
  --line-dark:rgba(255,255,255,.16);
  --on-dark:#E7EFE9;
  --on-dark-mute:#A7BBB2;

  --display:"Petrona",Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --r:16px; --r-lg:22px; --r-pill:999px;
  --container:1240px;
  --hdr-h:88px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--cream);color:var(--text);
  font-family:var(--sans);font-size:17.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--green);color:#fff;padding:var(--s3) var(--s5)}
.skip-link:focus{left:var(--s4);top:var(--s4)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- 3. Layout ----------------------------------------------------------- */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:26px}
@media(min-width:900px){.wrap{padding-inline:56px}}
/* v4: the phone rendering was 22,145px — about twenty-six screens. Section
   padding and the gaps between condition rows were set at desktop values on a
   390px screen, so they now scale with the viewport.

   Measured effect: 22,145px -> 21,162px, about 4%. Worth having, but the page
   is still very long, and no amount of spacing work changes that — the length
   is the content. Cutting it needs the editorial pass Mohamed did not choose
   (he took "fix + consolidate", not the length re-cut). Flagged in HANDOVER. */
.section{padding-block:clamp(var(--s8),11vw,var(--s9));position:relative}
@media(min-width:900px){.section{padding-block:var(--s10)}}
.section--sand{background:var(--sand)}
.section--paper{background:var(--paper)}
.section--green{background:var(--green);color:var(--on-dark)}
/* The header is sticky and 88px tall, so an anchor jump has to stop short of
   the section top or the heading lands underneath it. */
:where(section[id],main[id]){scroll-margin-top:calc(var(--hdr-h) + var(--s4))}
/* Trust strip sat in a full --s10 section and read as over-padded. */
.section--tight{padding-block:var(--s8)}
@media(min-width:900px){.section--tight{padding-block:var(--s9)}}

/* --- 4. Type ------------------------------------------------------------- */
.eyebrow{
  display:flex;align-items:center;gap:var(--s3);
  font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:var(--s5);
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--gold);flex:none}
.section--green .eyebrow{color:var(--gold)}

.h1,.h2{font-family:var(--display);font-weight:500;letter-spacing:-.022em;color:var(--ink);line-height:1.05}
.h1{font-size:clamp(42px,5.4vw,70px)}
.h2{font-size:clamp(30px,4vw,50px);line-height:1.08}
.h2 em,.h1 em{font-style:italic;color:var(--green)}
.section--green .h2{color:#fff}
.section--green .h2 em{color:var(--green-soft)}
.h3{font-family:var(--sans);font-size:19px;font-weight:600;line-height:1.34;color:var(--ink)}
.section--green .h3{color:#fff}
.lede{font-size:19px;line-height:1.6;color:var(--mute);max-width:56ch}
.section--green .lede{color:var(--on-dark-mute)}
.h2+.lede{margin-top:var(--s5)}
.section-head{max-width:720px;margin-bottom:clamp(var(--s6),7vw,var(--s8))}

/* --- 5. Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:16px 32px;border-radius:var(--r-pill);font-size:16px;font-weight:600;
  border:1px solid transparent;transition:background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn--green{background:var(--green);color:var(--cream)}
.btn--green:hover{background:var(--green-deep)}
.btn--gold{background:var(--gold);color:#2B1E06}
.btn--gold:hover{background:#D8B265}
.btn--out{border-color:var(--green);color:var(--green)}
.btn--out:hover{background:var(--green);color:var(--cream)}
.btn--sm{padding:13px 26px;font-size:15px}
.btn--link{padding:16px 4px;border-bottom:1px solid var(--gold);border-radius:0;color:var(--green)}
.btn--link:hover{transform:none;border-bottom-color:var(--green)}
@media(max-width:559px){.btn{white-space:normal}}

/* --- 6. Header ----------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:100;background:rgba(251,248,243,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.hdr.is-stuck{border-bottom-color:var(--line);background:rgba(251,248,243,.97)}
.hdr .wrap{display:flex;align-items:center;gap:var(--s5);height:var(--hdr-h)}
.brand{flex:0 0 auto;font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.012em;color:var(--green);line-height:1.1}
.brand span{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-soft);margin-top:1px}
/* Measured: five nav items need ~515px. Below 1180px the container cannot
   give them that beside the wordmark and the CTA, so the nav collapses to the
   menu button rather than clipping. */
.nav{display:none;flex:1 1 auto;min-width:0;overflow:hidden}
@media(min-width:1180px){.nav{display:block}}
.nav ul{display:flex;gap:26px;justify-content:flex-end;flex-wrap:nowrap}
.nav a{font-size:15px;font-weight:500;color:var(--mute);white-space:nowrap;position:relative;padding-block:6px;transition:color .2s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover{color:var(--green)}
.nav a:hover::after{transform:scaleX(1)}
.hdr-act{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:var(--s4)}
@media(min-width:1180px){.hdr-act{margin-left:0}}
@media(max-width:1179px){.brand span{display:none}}
/* Direct child only — the menu panel lives inside .hdr-act and has its own
   CTA, which an unscoped rule hid along with the header one.

   Hidden below 700px, which is exactly where the fixed mobile action bar takes
   over, so there is always one persistent call to action and never two. The
   width sweep caught the old 519px threshold overflowing the header at 600px. */
@media(max-width:699px){.hdr-act>.btn{display:none}}

/* --- 6b. Mobile menu ------------------------------------------------------
   Below 1180px the nav collapses, and before v4 nothing replaced it — on a
   phone the header was a wordmark and nothing else. Built on <details> so it
   opens and closes with no JavaScript at all.

   The panel is positioned against .hdr, NOT fixed: .hdr carries a
   backdrop-filter, which makes it a containing block for fixed descendants, so
   position:fixed here would anchor to the header rather than the viewport. */
.mnav{position:static}
@media(min-width:1180px){.mnav{display:none}}
.mnav>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:13px 18px 13px 15px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:rgba(255,255,255,.5);
  font-size:14.5px;font-weight:600;color:var(--green);
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary:hover{border-color:var(--gold);background:var(--paper)}
.mnav__bars{position:relative;width:17px;height:11px;flex:none}
.mnav__bars i{
  position:absolute;left:0;right:0;height:1.5px;border-radius:2px;
  background:var(--green);transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.mnav__bars i:nth-child(1){top:0}
.mnav__bars i:nth-child(2){bottom:0}
.mnav[open] .mnav__bars i:nth-child(1){transform:translateY(4.75px) rotate(45deg)}
.mnav[open] .mnav__bars i:nth-child(2){transform:translateY(-4.75px) rotate(-45deg)}
.mnav__panel{
  position:absolute;top:100%;left:0;right:0;
  height:calc(100dvh - var(--hdr-h));
  background:var(--cream);border-top:1px solid var(--line);
  padding:var(--s7) 26px calc(var(--s8) + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
}
.mnav__panel ul{display:grid;gap:2px}
/* Scoped to the nav list — an unscoped `.mnav__panel a` also caught the
   telephone link and the button, turning both into space-between rows. */
.mnav__panel nav a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:14px 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-size:23px;font-weight:500;
  letter-spacing:-.015em;color:var(--ink);
}
.mnav__panel nav a svg{color:var(--gold-deep);flex:none}
.mnav__foot{margin-top:var(--s6);display:grid;gap:var(--s5)}
.mnav__tel{
  display:block;font-family:var(--display);font-size:29px;font-weight:500;
  color:var(--green);letter-spacing:-.02em;line-height:1.1;
}
.mnav__tel span{
  display:block;font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:5px;
}
.mnav__panel .btn{width:100%}
/* Under 420px the wordmark and a labelled button together overran the header.
   The button drops to its icon and the wordmark steps down. */
@media(max-width:419px){
  .mnav__lbl{display:none}
  .mnav>summary{padding:13px}
  .brand{font-size:19px}
  .wrap{padding-inline:20px}
}
@media(max-height:720px){
  .mnav__panel{padding-top:var(--s5)}
  .mnav__panel nav a{padding:11px 0;font-size:20px}
}
/* Opening the panel locks the page behind it. */
body.nav-open{overflow:hidden}

/* --- 7. Hero ------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:var(--s7) var(--s9)}
.hero__bg{position:absolute;inset:-12% -6% 0 28%;z-index:0;pointer-events:none}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.85}
.hero .wrap{position:relative;z-index:2}
.hero__grid{display:grid;gap:var(--s7);align-items:center}
@media(min-width:1000px){.hero__grid{grid-template-columns:1.05fr .95fr;gap:var(--s8)}}
.hero h1 em{display:block}
.hero__sub{margin-top:var(--s5);font-size:19px;color:var(--mute);max-width:46ch}
.hero__sub b{color:var(--text);font-weight:600}
.hero__acts{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s7);align-items:center}
.hero__trust{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line)}
.hero__trust img{width:62px;height:62px;flex:none}
.hero__trust b{display:block;font-size:15px;color:var(--ink);font-weight:600;line-height:1.4}
.hero__trust span{display:block;font-size:14px;color:var(--mute)}

.fig{position:relative;padding-bottom:var(--s5)}
.arch{
  position:relative;overflow:hidden;
  border-radius:var(--r-pill) var(--r-pill) var(--r-lg) var(--r-lg);
  background:linear-gradient(168deg,var(--green-soft),#C2D6C9);
  aspect-ratio:1/1.16;max-width:430px;margin-left:auto;
}
.arch img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:104%;max-width:none}
/* Sat low and left of the arch so it overlaps his shoulder, never his face. */
.qcard{
  position:absolute;left:-22px;bottom:8px;z-index:3;width:250px;
  background:var(--paper);border-radius:14px;padding:17px 18px;
  box-shadow:0 22px 46px rgba(43,39,35,.15);
}
.qcard__hd{display:flex;align-items:center;gap:10px}
.qcard__hd img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.qcard__hd b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.2}
.qcard p{margin-top:11px;font-family:var(--display);font-size:16px;line-height:1.42;color:var(--ink)}
/* --mute, not --mute-soft: the soft tone measured 3.67:1 on white, below the
   4.5:1 needed for text this size. */
.qcard small{display:block;margin-top:8px;font-size:12px;color:var(--mute)}
.stars{color:var(--gold);font-size:12.5px;letter-spacing:2.5px}

/* On a phone the arch is pinned right with an empty column beside it, and the
   review card hangs off the left edge across the portrait. Below 900px the
   arch centres and the card sits under it. */
@media(max-width:899px){
  .fig{padding-bottom:0}
  .arch{margin-inline:auto}
  /* relative, not static: the card overlaps the arch by design, and static
     drops it out of the stacking order so the arch paints over its header. */
  .qcard{position:relative;z-index:3;inset:auto;width:auto;max-width:420px;
    margin:-32px auto 0;box-shadow:0 16px 34px rgba(43,39,35,.13)}
}

/* --- 8. Credentials band -------------------------------------------------- */
.band__hd{
  display:grid;gap:var(--s5);align-items:end;
  padding-bottom:var(--s7);border-bottom:1px solid var(--line);
}
@media(min-width:900px){.band__hd{grid-template-columns:1.15fr .85fr;gap:var(--s8)}}
.band__h{
  font-family:var(--display);font-weight:500;font-size:clamp(26px,3.4vw,40px);
  line-height:1.1;letter-spacing:-.02em;color:var(--ink);
}
.band__h em{font-style:italic;color:var(--green)}
.band__note{font-size:15px;line-height:1.6;color:var(--mute);max-width:46ch}
@media(min-width:900px){.band__note{padding-bottom:6px}}

/* Flex rather than grid, because there are five of them and no breakpoint
   divides five evenly. A grid leaves the last item hard against the left edge
   with dead space beside it — two per row on a phone strands the fifth alone,
   three per row on a tablet strands the fourth and fifth. Wrapping flex items
   with justify-content:center leaves any short final row centred at every
   width, and at 1060px all five sit on one row so nothing wraps at all. */
.band__row{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s7) 0;padding-top:var(--s7);
}
.crest{flex:0 0 50%}
@media(min-width:740px){.crest{flex-basis:33.333%}}
@media(min-width:1060px){.crest{flex-basis:20%}}

/* Subgrid so the name, description and category line up across the band. v3
   let each crest size itself, so the category caption sat at a different
   height wherever the description above it wrapped to one line instead of
   two, and the row read ragged. */
.crest{
  display:grid;grid-template-rows:auto auto 1fr auto;justify-items:center;
  text-align:center;padding-inline:var(--s4);position:relative;
}
@media(min-width:1060px){
  .crest+.crest::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)}
}
.crest img{width:84px;height:84px;transition:transform .45s var(--ease)}
.crest:hover img{transform:translateY(-4px) scale(1.05)}
.crest b{
  margin-top:var(--s4);font-family:var(--display);font-size:18px;font-weight:600;
  color:var(--ink);line-height:1.25;
}
.crest span{margin-top:5px;font-size:13.5px;color:var(--mute);line-height:1.45}
.crest em{
  display:block;margin-top:9px;font-style:normal;font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
}
/* At 320–360px the 84px crests overran the viewport. They give way rather than
   pushing the page wide. */
@media(max-width:559px){
  .band__row{gap:var(--s6) 0}
  .crest{padding-inline:var(--s2)}
  .crest img{width:64px;height:64px}
  .crest b{font-size:16px}
  .crest span{font-size:12.5px}
}

/* --- 9. Conditions: editorial rows ---------------------------------------- */
.rows{display:grid;gap:clamp(var(--s8),12vw,var(--s10))}
.row{display:grid;gap:var(--s7);align-items:center}
@media(min-width:900px){
  .row{grid-template-columns:1fr 1fr;gap:var(--s9)}
  .row:nth-child(even) .row__media{order:2}
}
.row__media{position:relative}
.row__media img{
  width:100%;border-radius:var(--r-lg);position:relative;z-index:1;
  box-shadow:0 26px 56px rgba(43,39,35,.13);
}
/* Offset sage block behind the photograph — depth from a shape, not a shadow. */
.row__media::before{
  content:"";position:absolute;z-index:0;width:66%;height:80%;
  background:var(--green-soft);border-radius:var(--r-lg);
  left:-34px;bottom:-34px;
}
/* A gold hairline offset from the opposite corner. v3 sized this at 46%x52%,
   which left it floating clear of the photograph as a detached rounded
   rectangle — it read as a rendering artifact rather than a frame. It now
   spans the full width and height, so it registers against the photo's corner
   as an offset rule. */
.row__media::after{
  content:"";position:absolute;z-index:0;inset:-20px -20px 20px 20px;
  border:1px solid var(--gold);border-radius:var(--r-lg);opacity:.5;
}
@media(min-width:900px){
  .row:nth-child(even) .row__media::before{left:auto;right:-34px}
  .row:nth-child(even) .row__media::after{inset:-20px 20px 20px -20px}
}
@media(max-width:559px){
  .row__media::before{left:-16px;bottom:-16px}
  .row__media::after{inset:-12px -12px 12px 12px}
  .row:nth-child(even) .row__media::after{inset:-12px 12px 12px -12px}
}
.row__n{
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.16em;
  color:var(--gold-deep);display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);
}
.row__n::after{content:"";flex:1;height:1px;background:var(--line);max-width:64px}
.row h3{
  font-family:var(--display);font-weight:500;font-size:clamp(28px,3.4vw,40px);
  line-height:1.1;letter-spacing:-.02em;color:var(--ink);
}
.row h3 em{font-style:italic;color:var(--green)}
.row>div>p{margin-top:var(--s4);font-size:17.5px;line-height:1.62;color:var(--mute);max-width:48ch}
.row .tags{margin-top:var(--s5)}
.row .more{margin-top:var(--s5);font-size:15.5px;display:inline-flex}
.row .more svg{transition:transform .25s var(--ease)}
.row:hover .more svg{transform:translateX(4px)}

.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--green);background:var(--green-wash);border-radius:var(--r-pill);padding:4px 11px}
/* padding-block gets these to a 44px target without moving them visually. */
.more{margin-top:var(--s2);font-size:14.5px;font-weight:600;color:var(--green);display:inline-flex;align-items:center;gap:var(--s2);padding-block:10px;transition:gap .2s var(--ease)}

/* --- 9b. "Also treats" index ---------------------------------------------- */
.index-list{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(var(--s7),9vw,var(--s10))}
@media(min-width:820px){.index-list{grid-template-columns:1fr 1fr;column-gap:var(--s8)}}
.index-list__hd{
  grid-column:1/-1;display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s5);
}
.index-list__hd::after{content:"";flex:1;height:1px;background:var(--line)}
.index-list__hd span{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);white-space:nowrap;
}
/* NOTE (v4): pass1b animated `padding-left` on hover, pass2 then set
   `padding-left:0` on both the base and the hover state while leaving
   `padding-inline:12px` after it — so hovering snapped the content 12px left
   with no transition, because the surviving transition only covered
   background-color. One rule set now, and only transform and colour move. */
/* The four thumbnails are gone. They rendered at 58–74px, where a photograph
   of a lifestyle scene is illegible decoration, and the four that were there
   (a family dinner, a coastal walk, a kitchen, an empty armchair) had no
   relationship to gallstones, diverticular disease, colitis or a fissure. Four
   small circles of unrelated stock is itself one of the tells we are removing.
   The index reads as an index instead. */
.idx{
  display:flex;align-items:center;gap:var(--s5);
  padding:var(--s5) var(--s3);border-bottom:1px solid var(--line);
  border-radius:10px;
  transition:background-color .3s var(--ease);
}
.idx:hover{background-color:rgba(220,231,224,.42)}
.idx__t{flex:1;min-width:0;transition:transform .35s var(--ease)}
.idx:hover .idx__t{transform:translateX(5px)}
.idx__t b{
  display:block;font-family:var(--display);font-size:21px;font-weight:600;
  color:var(--ink);line-height:1.2;letter-spacing:-.01em;
}
.idx__t span{display:block;margin-top:3px;font-size:14.5px;color:var(--mute);line-height:1.45}
.idx>svg{flex:none;color:var(--gold-deep);transition:transform .3s var(--ease)}
.idx:hover>svg{transform:translateX(5px)}
@media(max-width:559px){
  .idx{padding-inline:0;gap:var(--s4)}
  .idx__t b{font-size:18px}
}

/* --- 9c. Booking panel ---------------------------------------------------- */
.book{
  margin-top:clamp(var(--s7),9vw,var(--s10));background:var(--green);border-radius:var(--r-lg);
  overflow:hidden;display:grid;
}
@media(min-width:900px){.book{grid-template-columns:.85fr 1.15fr}}
.book__media{position:relative;min-height:230px}
.book__media img{width:100%;height:100%;object-fit:cover}
.book__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(31,59,51,0) 55%,rgba(31,59,51,.9) 100%);
}
@media(max-width:899px){
  .book__media::after{background:linear-gradient(to bottom,rgba(31,59,51,0) 40%,rgba(31,59,51,.9) 100%)}
}
.book__body{padding:var(--s8) var(--s7);display:flex;flex-direction:column;gap:var(--s4);justify-content:center}
@media(max-width:559px){.book__body{padding:var(--s7) var(--s5)}}
.book__eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
.book__body h3{
  font-family:var(--display);font-weight:500;font-size:clamp(24px,2.9vw,33px);
  line-height:1.16;letter-spacing:-.018em;color:#fff;
}
.book__body h3 em{font-style:italic;color:var(--green-soft)}
.book__body p{color:var(--on-dark-mute);font-size:16.5px;max-width:50ch}
.book__body .btn{align-self:flex-start;margin-top:var(--s2)}
@media(max-width:559px){.book__body .btn{align-self:stretch}}

/* --- 10. Robotic (green) -------------------------------------------------- */
.robotic{overflow:hidden}
/* align-items:center left the short image column floating with ~350px of dead
   green beneath it against the much taller text column. Sticky start-alignment
   keeps the photograph beside whichever part of the argument you are reading. */
.robotic__grid{display:grid;gap:var(--s8);align-items:start}
@media(min-width:1000px){.robotic__grid{grid-template-columns:1fr 1fr;gap:var(--s9)}}
.robotic__media{border-radius:var(--r-lg);overflow:hidden}
@media(min-width:1000px){
  .robotic__media{
    margin-right:calc((min(var(--container),100vw) - 100vw)/2 - var(--s7));
    border-radius:var(--r-lg) 0 0 var(--r-lg);
    position:sticky;top:calc(var(--hdr-h) + var(--s7));
  }
}
.robotic__media img{width:100%}
.bigfig{
  margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line-dark);
  display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  font-family:var(--sans);font-size:17px;color:var(--on-dark-mute);
}
.bigfig span{
  font-family:var(--display);font-weight:500;font-size:clamp(52px,7vw,86px);
  line-height:.9;color:var(--gold);letter-spacing:-.03em;
}
.bigfig em{
  font-family:var(--display);font-style:italic;font-size:19px;color:var(--green-soft);
  flex:1 1 100%;margin-top:var(--s2);line-height:1.45;max-width:34ch;
}
.compare{margin-top:var(--s7);border-top:1px solid var(--line-dark)}
.compare__row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.1fr);align-items:center;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line-dark);font-size:15px}
.compare__hd{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mute)}
.compare__hd b{color:var(--gold);font-weight:600}
.compare__lbl{color:var(--on-dark-mute)}
.compare__open{color:var(--on-dark-mute);font-variant-numeric:tabular-nums}
.compare__val{display:block}
.compare__key{display:block;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.compare__bar{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.16);margin-top:7px;position:relative;overflow:hidden}
.compare__bar i{position:absolute;inset:0 auto 0 0;background:var(--gold);border-radius:2px}

/* --- 11. About ------------------------------------------------------------ */
.about__grid{display:grid;gap:var(--s8);align-items:start}
@media(min-width:1000px){.about__grid{grid-template-columns:1fr .82fr;gap:var(--s9)}}
.about__media{position:relative;display:grid;gap:var(--s5)}
/* The left column is long, so the image and note travel with it instead of
   stranding a column of whitespace. */
@media(min-width:1000px){.about__media{position:sticky;top:112px}}
.about__arch{
  overflow:hidden;border-radius:var(--r-pill) var(--r-pill) var(--r-lg) var(--r-lg);
  background:var(--green-soft);aspect-ratio:1/1.1;
}
.about__arch img{width:100%;height:100%;object-fit:cover}
.about__note{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5)}
.about__note b{display:block;font-family:var(--display);font-size:19px;color:var(--ink)}
.about__note span{display:block;margin-top:4px;font-size:14.5px;color:var(--mute);line-height:1.5}
.timeline{margin-top:var(--s7)}
.timeline li{position:relative;padding-left:var(--s7);padding-bottom:var(--s6);border-left:1px solid var(--line)}
.timeline li:last-child{padding-bottom:0;border-left-color:transparent}
.timeline li::before{content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--cream);border:1.5px solid var(--green)}
.timeline li.key::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-wash)}
.tl-year{display:block;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep)}
.tl-what{display:block;font-size:17px;font-weight:600;color:var(--ink);margin-top:3px;line-height:1.4}
.tl-where{display:block;font-size:15px;color:var(--mute);line-height:1.5}
.pull{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(23px,2.9vw,32px);line-height:1.32;color:var(--green);border-left:2px solid var(--gold);padding-left:var(--s6);margin-top:var(--s8)}
.pull cite{display:block;font-family:var(--sans);font-style:normal;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-soft);margin-top:var(--s4)}

/* --- 12. Fees ------------------------------------------------------------- */
.fees__grid{display:grid;gap:var(--s7)}
@media(min-width:960px){.fees__grid{grid-template-columns:1.15fr .85fr;gap:var(--s9);align-items:start}}
.insurers{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:var(--s6)}
@media(min-width:620px){.insurers{grid-template-columns:repeat(4,1fr)}}
.insurers li{background:var(--paper);padding:var(--s5) var(--s3);text-align:center;font-weight:700;font-size:15px;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:84px}
.insurers li small{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.feecard{background:var(--green);color:#fff;border-radius:var(--r-lg);padding:var(--s7) var(--s6)}
/* A panel with its own dark background inside a light section has to set its
   own heading colour — the .section--green rule does not reach it. */
.feecard .h3{color:#fff}
.feecard dl{margin:var(--s6) 0 0}
.feecard div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding-block:var(--s4);border-top:1px solid var(--line-dark)}
.feecard dt{color:var(--on-dark-mute);font-size:15.5px}
.feecard dd{margin:0;font-family:var(--display);font-size:32px;color:var(--gold);font-variant-numeric:tabular-nums}
.feecard p{margin-top:var(--s5);font-size:14px;color:var(--on-dark-mute);line-height:1.55}

/* --- 13. Reviews ---------------------------------------------------------- */
/* min-width:0 matters here: without it a grid item cannot shrink below its
   content's min-content width, and the review header row (avatar + name +
   stars) was forcing the whole column wider than the viewport at 320px. */
.rev__grid{display:grid;gap:var(--s7);align-items:start}
.rev__grid>*{min-width:0}
@media(min-width:1000px){.rev__grid{grid-template-columns:330px 1fr;gap:var(--s8)}}
/* Sticky only once there is a second column for it to sit beside. In the
   single-column phone layout it pinned to the top and the reviews scrolled
   underneath it, hiding them. */
.score{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s7) var(--s6)}
@media(min-width:1000px){.score{position:sticky;top:calc(var(--hdr-h) + var(--s5))}}
@media(max-width:559px){.score{padding:var(--s6) var(--s5)}}
.score__n{font-family:var(--display);font-size:74px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.score__stars{display:flex;gap:3px;margin-top:var(--s4);color:var(--gold)}
.score__meta{margin-top:var(--s4);font-size:15px;color:var(--mute)}
.score__bars{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.score__bar{display:flex;align-items:center;gap:var(--s3);font-size:13px;color:var(--mute);padding-block:3px}
.score__bar span{flex:none}
.score__bar i{flex:1 1 0;min-width:0;height:4px;background:var(--sand);border-radius:2px;position:relative}
.score__bar i b{position:absolute;inset:0 auto 0 0;background:var(--gold);border-radius:2px}
.rev-list{display:grid;gap:var(--s5)}
.review{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6)}
.review__top{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.review__av{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none}
.review__who{flex:1;min-width:0}
.review__name{font-size:16px;font-weight:600;color:var(--ink)}
.review__date{font-size:13px;color:var(--mute-soft)}
.review p{margin-top:var(--s4);font-family:var(--display);font-size:18.5px;line-height:1.5;color:var(--ink)}

/* --- 14. How it works: a connected journey -------------------------------- */
.journey{display:grid;gap:var(--s7);position:relative}
@media(min-width:900px){.journey{grid-template-columns:repeat(3,1fr);gap:var(--s7)}}
.jstep{position:relative;z-index:1}
/* The badge is positioned against the image, so it lives inside .jstep__media.
   Anchoring it to .jstep put it over the body copy, because .jstep is as tall
   as the text beneath. */
.jstep__media{
  border-radius:var(--r);overflow:hidden;position:relative;
  box-shadow:0 20px 44px rgba(43,39,35,.12);
}
.jstep__media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .55s var(--ease)}
.jstep:hover .jstep__media img{transform:scale(1.04)}
.jstep__media::after{
  content:"";position:absolute;inset:auto 0 0 0;height:42%;z-index:1;
  background:linear-gradient(to bottom,rgba(31,59,51,0),rgba(22,44,38,.55));
  pointer-events:none;
}
.jstep__n{
  position:absolute;left:var(--s5);bottom:var(--s5);z-index:3;
  width:54px;height:54px;border-radius:50%;background:var(--gold);color:#2B1E06;
  display:grid;place-items:center;
  font-family:var(--display);font-size:22px;font-weight:600;
  box-shadow:0 10px 24px rgba(43,39,35,.3);
  transition:transform .35s var(--ease);
}
.jstep:hover .jstep__n{transform:scale(1.06)}
.jstep h3{
  margin-top:var(--s6);font-family:var(--display);font-weight:500;font-size:26px;
  line-height:1.2;letter-spacing:-.015em;color:var(--ink);
}
.jstep p{margin-top:var(--s3);font-size:16px;color:var(--mute);line-height:1.6}

/* --- 15. Locations --------------------------------------------------------
   v4: the illustrated map is gone — it was invented cartography carrying real
   place names, with pins placed by percentage. Three typographic columns say
   the same thing and cannot be wrong. */
.clinics{display:grid;gap:0;border-top:1px solid var(--line)}
@media(min-width:820px){.clinics{grid-template-columns:repeat(3,1fr)}}
.clinics li{
  padding:var(--s6) 0 var(--s7);border-bottom:1px solid var(--line);
  position:relative;
}
@media(min-width:820px){
  .clinics li{padding:var(--s7) var(--s6) var(--s8) 0;border-bottom:0}
  .clinics li+li{padding-left:var(--s6)}
  .clinics li+li::before{
    content:"";position:absolute;left:0;top:var(--s7);bottom:var(--s7);
    width:1px;background:var(--line);
  }
}
.clinics__n{
  font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.16em;
  color:var(--gold-deep);
}
.clinics h3{
  margin-top:var(--s4);font-family:var(--display);font-weight:500;
  font-size:clamp(30px,3.6vw,42px);line-height:1.05;letter-spacing:-.022em;
  color:var(--ink);
}
.clinics__area{margin-top:var(--s3);font-size:16px;color:var(--mute)}
.clinics .pc{
  display:inline-block;margin-left:6px;font-size:11.5px;font-weight:600;
  letter-spacing:.08em;color:var(--gold-deep);
  background:var(--gold-wash);border-radius:var(--r-pill);padding:3px 10px;
  vertical-align:2px;
}
.clinics__day{
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);
}
.clinics__foot{
  margin-top:var(--s8);display:grid;gap:var(--s5);align-items:center;
}
@media(min-width:820px){.clinics__foot{grid-template-columns:1fr auto;gap:var(--s8)}}
.clinics__foot p{font-size:17px;color:var(--mute);max-width:48ch}
.clinics__foot .btn{white-space:nowrap}
@media(max-width:559px){.clinics__foot .btn{width:100%;white-space:normal}}

/* --- 16. FAQ --------------------------------------------------------------
   The background graphic used to be `inset:0` with `height:100%;object-fit:
   cover`, so the section's height was an input to the image's scale. Opening
   any question changed that height and the whole background instantly
   rescaled — a visible lurch on every click, and the worst single defect in
   v3. It is now pinned to the top of the section at its own fixed aspect
   ratio, so nothing below it can affect it.

   The giant "?" watermark that sat on top of it is gone: it is one of the most
   recognisable AI-landing-page ornaments, and it moved with the section too. */
.faq-sec{position:relative;overflow:hidden;isolation:isolate}
.faq-sec__bg{
  position:absolute;top:0;left:0;right:0;z-index:-1;pointer-events:none;
  aspect-ratio:2000/848;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
}
.faq-sec__bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.faq-sec .wrap{position:relative;z-index:1}

.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding-block:var(--s5);font-size:18.5px;font-weight:600;color:var(--ink);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);transition:color .2s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green)}
.faq .chev{flex:none;margin-top:5px;color:var(--gold-deep);transition:transform .3s var(--ease)}
.faq details[open] .chev{transform:rotate(180deg)}
.faq .faq__a{
  display:grid;grid-template-rows:0fr;opacity:0;padding-bottom:0;max-width:74ch;
  transition:grid-template-rows .42s var(--ease),opacity .3s var(--ease),padding-bottom .42s var(--ease);
}
.faq .faq__a>div{overflow:hidden;min-height:0}
.faq details[open] .faq__a{grid-template-rows:1fr;opacity:1;padding-bottom:var(--s6)}
.faq__a p{font-size:16.5px;color:var(--mute);line-height:1.66}
.faq__a p+p{margin-top:var(--s4)}
@media(prefers-reduced-motion:reduce){.faq .faq__a{transition:none}}

/* --- 17. Contact ---------------------------------------------------------- */
.ct{display:grid;gap:var(--s8);align-items:start}
@media(min-width:1000px){.ct{grid-template-columns:.9fr 1.1fr;gap:var(--s9)}}
.tiles{display:grid;gap:var(--s4);margin-top:var(--s7)}
.tile{display:flex;align-items:center;gap:var(--s4);border:1px solid var(--line-dark);border-radius:var(--r);padding:var(--s5);transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.tile:hover{border-color:var(--gold);background:rgba(255,255,255,.05)}
.tile svg{color:var(--gold);flex:none}
.tile__t{min-width:0}
.tile__l{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--on-dark-mute)}
.tile b{display:block;font-size:18px;color:#fff;font-weight:600;margin-top:2px;word-break:break-word}
.tile b.long{font-size:15.5px}
.assure{
  display:flex;gap:var(--s5);align-items:flex-start;margin-top:var(--s5);
  border:1px solid var(--line-dark);border-radius:var(--r);padding:var(--s5);
  background:rgba(255,255,255,.04);
}
.assure img{width:66px;height:66px;flex:none}
.assure b{display:block;font-family:var(--display);font-size:19px;color:#fff;line-height:1.25}
.assure p{margin-top:var(--s2);font-size:14.5px;color:var(--on-dark-mute);line-height:1.55}

/* Form field primitives — shared by the enquiry card. */
.form__g{display:grid;gap:var(--s5)}
@media(min-width:600px){.form__2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}}
.field label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:var(--s2)}
.field input,.field select{width:100%;background:rgba(12,26,22,.5);border:1px solid var(--line-dark);border-radius:10px;color:#fff;padding:15px var(--s4);font-size:16px;font-family:var(--sans);transition:border-color .2s var(--ease)}
.field input::placeholder{color:#7C918A}
.field input:focus,.field select:focus{border-color:var(--gold);outline:none}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23A7BBB2' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.form__note{font-size:13.5px;color:var(--on-dark-mute);line-height:1.55;margin-top:var(--s4)}

/* The cream enquiry card sitting on the green section. */
.card-form{
  background:var(--cream);border-radius:var(--r-lg);padding:var(--s8) var(--s7);
  box-shadow:0 30px 70px rgba(0,0,0,.24);position:relative;
}
@media(max-width:559px){.card-form{padding:var(--s7) var(--s5)}}
.card-form::before{
  content:"";position:absolute;inset:9px;border:1px solid rgba(201,162,74,.3);
  border-radius:calc(var(--r-lg) - 4px);pointer-events:none;
}
.card-form h3{
  font-family:var(--display);font-weight:500;font-size:29px;color:var(--ink);
  letter-spacing:-.015em;line-height:1.15;padding-right:var(--s5);
}
.card-form>p{margin-top:var(--s3);font-size:16px;color:var(--mute)}
.card-form .form__g{margin-top:var(--s6)}
.card-form .field label{color:var(--mute);letter-spacing:.1em}
/* background-color, NOT the `background` shorthand — the shorthand resets
   background-repeat and background-position, which made the select chevron
   tile across the whole control. */
.card-form .field input,.card-form .field select{
  background-color:var(--paper);border:1px solid var(--line);color:var(--text);
  border-radius:8px;padding-block:14px;
}
.card-form .field input::placeholder{color:#A8A199}
.card-form .field input:focus,.card-form .field select:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,74,.16);
}
.card-form .field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235B5750' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
/* --mute, not --mute-soft: 3.46:1 on the cream card failed AA. */
.card-form .form__note{color:var(--mute)}
/* Honeypot — off-screen rather than display:none, which some bots detect. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__msg:empty{display:none}
.form__msg{margin-top:var(--s5);font-size:15.5px;line-height:1.55;border-radius:10px;padding:var(--s4) var(--s5)}
.form__msg.is-err{background:#FBEEE8;color:#8A3A1E;border:1px solid #E8CDBF}
.form__msg.is-ok{background:var(--green-wash);color:var(--ink);border:1px solid var(--green-soft)}
.form__msg.is-ok b{display:block;font-family:var(--display);font-size:20px;font-weight:600;margin-bottom:4px}
.form__msg a{color:var(--green);font-weight:600;border-bottom:1px solid var(--gold)}
.card-form .btn{background:var(--green);color:var(--cream);padding-block:17px;font-size:16.5px}
.card-form .btn:hover{background:var(--green-deep)}

/* --- 18. Footer ----------------------------------------------------------- */
.ftr{background:var(--green-deep);color:var(--on-dark-mute);padding-block:var(--s8) var(--s7)}
.ftr-top{display:grid;gap:var(--s7);padding-bottom:var(--s7);border-bottom:1px solid var(--line-dark)}
@media(min-width:860px){.ftr-top{grid-template-columns:1.4fr 1fr 1fr;gap:var(--s8)}}
.ftr h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin:0 0 var(--s2)}
/* Footer links were 18px tall. Padding takes them past 44px on touch without
   changing how the columns read. */
.ftr li a{display:inline-block;padding-block:11px}
.ftr a{font-size:15px;transition:color .2s var(--ease)}
.ftr a:hover{color:#fff}
.ftr p{font-size:15px;line-height:1.6}
.ftr-btm{padding-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);justify-content:space-between;font-size:13px}

/* --- 19. Mobile bar ------------------------------------------------------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);transform:translateY(100%);transition:transform .35s var(--ease)}
.mbar.on{transform:translateY(0)}
@media(min-width:700px){.mbar{display:none}}
.mbar a{display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:15px;font-size:15.5px;font-weight:600}
.mbar .c{background:var(--green);color:#fff}
.mbar .b{background:var(--gold);color:#2B1E06}
@media(max-width:699px){body.has-bar{padding-bottom:60px}}

/* --- 20. Motion system ----------------------------------------------------
   Staggered entrances, hover intent, and growth on the comparison bars. All
   respects reduced-motion. Scoped to `.js` so the page renders fully when
   JavaScript is unavailable.

   v4: entrances are ANIMATIONS, not transitions, and the fill is `backwards`.
   The old version put `transition:opacity,transform` on every direct child of
   a `.stagger`, at a specificity that beat the element's own rule — so any
   hover transition declared on a stagger child was silently discarded. That is
   why the "also treats" hover snapped instead of easing, and it would have
   broken the locations hover too. `backwards` fill covers the stagger delay and
   then releases the element, so hover states own the resting style. */
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes rise-sm{from{opacity:0;transform:translateY(18px)}}

.js .rv:not(.in){opacity:0;transform:translateY(22px)}
.js .rv.in{animation:rise .7s var(--ease) backwards}

.js .stagger:not(.in)>*{opacity:0;transform:translateY(18px)}
.js .stagger.in>*{animation:rise-sm .6s var(--ease) backwards}
.js .stagger.in>*:nth-child(1){animation-delay:.05s}
.js .stagger.in>*:nth-child(2){animation-delay:.12s}
.js .stagger.in>*:nth-child(3){animation-delay:.19s}
.js .stagger.in>*:nth-child(4){animation-delay:.26s}
.js .stagger.in>*:nth-child(5){animation-delay:.33s}
.js .stagger.in>*:nth-child(6){animation-delay:.40s}
.js .stagger.in>*:nth-child(7){animation-delay:.47s}
.js .stagger.in>*:nth-child(8){animation-delay:.54s}

/* Comparison bars grow as the block enters. Width comes from --w inline. */
.compare__bar i{width:0;transition:width 1.1s var(--ease) .25s}
.compare.in .compare__bar i{width:var(--w)}

@media (prefers-reduced-motion:reduce){
  .js .rv:not(.in),.js .stagger:not(.in)>*{opacity:1;transform:none}
  .js .rv.in,.js .stagger.in>*{animation:none}
  .compare__bar i{width:var(--w);transition:none}
}