/* ══════════════════════════════════════════════════════════════════════
   PROF. DR. FAISAL AMIN BAIG, capsule build

   Every colour below was sampled from the approved footage, not chosen
   beside it, so the page and the film read as one place. The film's own
   composition is warm bone on the left and cool sage on the right, and the
   page inherits exactly that: bone canvas, sage bands.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* Sampled from assets/hero-ending.jpg */
  --canvas:#F2EFE7;          /* the film's left, lifted for a page */
  --panel:#FBF9F4;
  --sage:#E4EBE7;            /* the film's right */
  --sage-deep:#D6E2DE;

  --accent:#06605F;          /* the capsule cap */
  --accent-hover:#044745;
  --accent-muted:#D9F1F0;    /* the bead pool, at whisper level */
  --bead:#99E1E0;

  --text-primary:#10302F;
  --text-secondary:#47635F;
  /* Measured on all four grounds, not just the canvas. At #526C67 it cleared
     4.5 everywhere except the footer, the darkest band, where it landed at
     4.27 and took five elements down with it on every page. */
  --text-quiet:#4C6661;

  --line:rgba(16,48,47,.12);
  --line-firm:rgba(16,48,47,.22);

  --lift:0 1px 2px rgba(16,48,47,.04),0 8px 24px rgba(16,48,47,.06);
  --lift-2:0 2px 6px rgba(16,48,47,.05),0 18px 46px rgba(16,48,47,.10);

  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Public Sans",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --wrap:1200px;
  --pad:clamp(1.25rem,5vw,3.5rem);
  --gap:clamp(4rem,9vh,7rem);

  --r:10px; --r-lg:18px;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);

  /* A light halo, not a dark shadow. The film is high key, so the text over
     it is the page's own dark ink and what it needs is the bright ground
     pushed further from it, not a drop shadow. Measured: the dark-on-bright
     pairing clears 3.5:1 with room, and white text on this footage measured
     1.0 to 1.9, which is why it is not white. */
  --tshadow:0 1px 2px rgba(250,249,244,.9),0 2px 10px rgba(250,249,244,.75),0 8px 34px rgba(250,249,244,.6);
}

/* ── Base ───────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}

html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;font-weight:400}
p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
hr{border:0;margin:0}

::selection{background:var(--accent-muted);color:var(--text-primary)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.skip{position:absolute;left:1rem;top:1rem;z-index:200;transform:translateY(-250%);
  background:var(--accent);color:#fff;padding:.8rem 1.3rem;border-radius:var(--r);
  font-weight:600;transition:transform .25s var(--ease)}
.skip:focus-visible{transform:translateY(0)}

/* ── Type ───────────────────────────────────────────────────────────── */

.h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.1rem);line-height:1.12;
  letter-spacing:-.012em;margin-top:.4rem;max-width:20ch;text-wrap:balance}
.h4{font-family:var(--serif);font-size:1.35rem;line-height:1.25;letter-spacing:-.008em}

.kicker{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-quiet)}

.lede{margin-top:1rem;max-width:56ch;font-size:1.125rem;color:var(--text-secondary)}

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.5rem;min-height:3.25rem;border:1px solid transparent;border-radius:var(--r);
  font-size:.975rem;font-weight:600;white-space:nowrap;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),
             color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--lift)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--lift-2);transform:translateY(-1px)}
.btn-ghost{background:var(--panel);color:var(--text-primary);border-color:var(--line-firm)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{min-height:2.75rem;padding:.6rem 1.1rem;font-size:.9rem}
.btn-block{width:100%}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

.row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}

/* ══════════════════════════════════════════════════════════════════════
   THE ENVIRONMENT LAYER
   One fixed thing behind everything, so scrolling reads as moving through
   a place instead of past stacked sections.
   ══════════════════════════════════════════════════════════════════════ */

.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env-glow{position:absolute;left:50%;top:10%;width:min(140vw,80rem);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(217,241,240,.55) 0%,rgba(228,235,231,.25) 45%,transparent 70%);
  animation:drift 90s var(--ease-soft) -20s infinite alternate}
@keyframes drift{from{transform:translate(-52%,-52%) scale(1)}to{transform:translate(-46%,-44%) scale(1.14)}}

/* Whisper particles, echoing the beads. */
.env-motes{position:absolute;inset:0;
  background-image:
    radial-gradient(2px 2px at 12% 22%,var(--bead),transparent),
    radial-gradient(2px 2px at 78% 14%,var(--bead),transparent),
    radial-gradient(1.5px 1.5px at 42% 68%,var(--bead),transparent),
    radial-gradient(2px 2px at 88% 74%,var(--bead),transparent),
    radial-gradient(1.5px 1.5px at 26% 86%,var(--bead),transparent),
    radial-gradient(2px 2px at 62% 40%,var(--bead),transparent);
  opacity:.34;animation:motes 70s linear -18s infinite}
@keyframes motes{from{transform:translateY(0)}to{transform:translateY(-40px)}}

.nav,main,.foot{position:relative;z-index:1}

/* ══════════════════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════════════════ */

.nav{position:sticky;top:0;z-index:60;
  background:rgba(242,239,231,.82);backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border-bottom:1px solid transparent;transition:border-color .25s var(--ease)}
.nav.stuck{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.8rem}

.brand{display:flex;align-items:center;gap:.65rem;min-width:0}
.brand-mark{width:1.65rem;height:1.65rem;flex:none;fill:var(--accent)}
.brand-mark .brand-body{fill:var(--bead)}
.brand-text{display:grid;line-height:1.25;min-width:0}
.brand-name{font-family:var(--serif);font-size:1.0625rem;letter-spacing:-.008em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-role{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-quiet)}

.nav-links{display:none;gap:clamp(1rem,2.2vw,1.9rem)}
.nav-links a{position:relative;padding-block:.35rem;font-size:.9375rem;font-weight:500;
  color:var(--text-secondary);transition:color .2s var(--ease)}
.nav-links a:hover,.nav-links a.on{color:var(--accent)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}

.nav-act{display:flex;align-items:center;gap:.7rem}
.burger{display:grid;gap:5px;width:2.75rem;height:2.75rem;place-content:center}
.burger span{display:block;width:22px;height:2px;background:var(--text-primary);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{display:grid;padding:.4rem var(--pad) 1.2rem;border-top:1px solid var(--line);background:var(--canvas)}
/* `display:grid` on a class beats the browser's own rule for the `hidden`
   attribute, so without this the menu ships open on every phone. */
.drawer[hidden]{display:none}
.drawer a{padding:.9rem 0;border-bottom:1px solid var(--line);font-size:1.0625rem;font-weight:500}
.drawer a:last-child{border-bottom:0;color:var(--accent)}

@media (min-width:64rem){
  .nav-links{display:flex}
  .burger,.drawer{display:none !important}
}
@media (max-width:64rem){.nav-act .btn-primary{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   THE HERO
   500vh of scroll drives 5 seconds of film. The stage sticks; progress
   through the tall section maps 0 to 1 and drives the video's time.
   ══════════════════════════════════════════════════════════════════════ */

.hero{position:relative;height:500vh}

.stage{position:sticky;top:0;height:100svh;min-height:34rem;overflow:hidden;
  display:grid;place-items:center;background:var(--canvas)}

.film{position:absolute;inset:0;z-index:0}
.poster,#hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster{background-size:cover;background-position:50% 50%}
#hero-video{opacity:0;transition:opacity .6s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.ready #hero-video{opacity:1}
.stage.dead #hero-video{display:none}

/* Layer 1 of the legibility system: one soft base scrim so no frame is ever
   raw behind the page. It lightens rather than darkens, in the film's own
   bone tone, and it dies out by 78 percent so the capsule side stays live. */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 130% 100% at 32% 50%,rgba(246,244,237,.55) 0%,rgba(246,244,237,.24) 48%,rgba(246,244,237,0) 78%)}

.ring{position:absolute;left:50%;bottom:2.5rem;transform:translateX(-50%);
  width:34px;height:34px;color:var(--accent);opacity:.7;
  transition:opacity .4s var(--ease)}
.ring circle{transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .12s linear}
.stage.ready .ring,.stage.dead .ring{opacity:0;pointer-events:none}

/* ── The bands ──────────────────────────────────────────────────────── */

.bands{position:relative;z-index:2;width:100%}
.band{position:absolute;inset:0;display:grid;align-items:center;opacity:0;
  pointer-events:none;text-shadow:var(--tshadow);color:var(--text-primary)}
.band .btn{text-shadow:none}
.band .settle-cta{pointer-events:auto}
/* The text lane.
   This element carries both `wrap` and `band-in`, and the first version set
   a narrow max-width on it. `wrap` also sets `margin-inline:auto`, so the
   narrowed box centred itself and the headline ran straight over the
   capsule. The contrast audit caught it: band one's darkest background
   pixel was the teal cap, at 1.36:1.

   So the wrap keeps the page's own column, and the lane is capped on the
   children instead. 58 percent of that column ends well clear of where the
   capsule sits in every frame. */
.band-in{position:relative;z-index:1;max-width:var(--wrap)}
.band-in>*{max-width:min(40rem,58%)}

/* Layer 2: a per-band wash that strengthens only while its band is on. The
   text lane is the left of the frame, which the film keeps clear, so the
   ellipse sits there and the capsule side is never touched. It lifts the
   ground toward the page's own panel tone rather than dimming it. */
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.35 + .65*var(--k,1));
  background:radial-gradient(ellipse 64% 76% at 29% 50%,rgba(249,247,242,.94) 0%,rgba(249,247,242,.78) 44%,rgba(249,247,242,0) 76%)}

.band h1,.band h2{font-family:var(--serif);letter-spacing:-.018em;line-height:1.04}
.band h1{font-size:min(clamp(2.2rem,5.4vw,4.2rem),9.5vh)}
.band h2{font-size:min(clamp(1.9rem,4.4vw,3.4rem),8.5vh);max-width:16ch}
.band .kicker{color:var(--accent);margin-bottom:.9rem}
.band .creds{margin-top:1rem;font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;color:var(--text-secondary)}

.statement{font-family:var(--serif);font-size:min(clamp(1.9rem,4.2vw,3.2rem),8.5vh);
  line-height:1.14;letter-spacing:-.015em;display:grid;gap:.1em;max-width:18ch}

.settle-sub{margin-top:1rem;font-size:1.125rem;color:var(--text-secondary);max-width:36ch}
.settle-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ── Entrances, all scrubbed off --k, transform and opacity only ────── */

.split{display:block}
.split .w{display:inline-block;white-space:pre}
.split .c{display:inline-block}

/* (e) word-by-word rise, the arrival entrance */
.rise .w{--kc:clamp(0,calc((var(--k,0) - var(--th,0))*2.8),1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*.5em))}

/* (h) halves parting, echoing the capsule opening */
.half{display:block;
  --kc:clamp(0,calc(var(--k,0)*2.2),1);opacity:var(--kc)}
.half-l{transform:translateX(calc((1 - var(--kc))*-1.1em))}
.half-r{transform:translateX(calc((1 - var(--kc))*1.1em))}

/* The staged settle: headline, then subline, then the controls.
   Scoped to .band on purpose. These are driven by --k, which only the scroll
   loop writes, and the still hero reuses .settle-cta. Unscoped, the phone's
   two buttons resolved to opacity 0 and simply were not there. */
.band .settle-sub{--ks:clamp(0,calc((var(--k,0) - .5)*3),1);opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*.6em))}
.band .settle-cta{--kb:clamp(0,calc((var(--k,0) - .68)*3.6),1);opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*.7em))}

/* ── The still hero ─────────────────────────────────────────────────── */

.still{display:none;position:relative;z-index:2;width:100%;color:var(--text-primary);
  text-shadow:var(--tshadow)}
.still .btn{text-shadow:none}
.still::before{content:"";position:absolute;inset:-14% -8%;pointer-events:none;
  background:radial-gradient(ellipse 98% 88% at 42% 50%,rgba(249,247,242,.95) 0%,rgba(249,247,242,.84) 50%,rgba(249,247,242,.2) 84%)}
/* Same trap as the bands: this element is also a wrap, so a narrow
   max-width here would centre it. The column is capped on the children. */
.still-in{position:relative;z-index:1;max-width:var(--wrap)}
.still-in>*{max-width:42rem}
.still-name{font-family:var(--serif);font-size:min(clamp(2.1rem,7vw,3.4rem),9vh);
  line-height:1.05;letter-spacing:-.02em;margin-top:.6rem}
.still .creds{margin-top:.8rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--text-secondary)}
.still-sub{margin-top:1.1rem;font-size:1.0625rem;color:var(--text-secondary);max-width:42ch}
.still .kicker{color:var(--accent)}

.cue{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:.6rem;margin:0;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-quiet);text-shadow:var(--tshadow)}
.cue span{display:block;width:1px;height:1.5rem;background:linear-gradient(to bottom,transparent,var(--accent))}

/* ══════════════════════════════════════════════════════════════════════
   THE STATIC-HERO GATES
   These five must match script.js character for character.
   ══════════════════════════════════════════════════════════════════════ */

/* Phones now get the film.

   They did not at first, and that was the careful call: a scroll video is a
   download somebody on a mobile connection did not ask for. But the number
   decided it. The encoded film is 1.5 MB, which is well inside the 8 MB a
   cover-cropped mobile scrub is worth doing at, and the client checked the
   result on a real phone: without the film the first screen was a half-height
   wash of pale colour with the capsule cropped into a corner. A still hero
   has to be a composed picture to earn its place, and that one was not.

   So only two conditions still get the still hero, and neither is about
   bandwidth:
     a landscape phone, which has no vertical room for the journey at all
     reduced motion, which is a request, not a guess

   Data is still respected, in the one place where the device actually tells
   us: `saveData` in script.js skips the download and leaves the poster. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:static;height:auto;min-height:0;padding-block:6rem 4rem;place-items:stretch}
  .bands{display:none}
  .still{display:block}
  .cue{display:none}
  .ring{display:none}
}

/* ── The portrait composition ──────────────────────────────────────────
   The film is 16:9 and a phone is not, so cover-cropping throws away most
   of the width. At the default centre the capsule, which sits at about 70
   percent across, lands off screen entirely and the phone shows an empty
   floor. Pulling the crop to 74 percent puts the capsule in the middle of
   the phone, which is the whole point of the shot. */
@media (orientation:portrait){
  #hero-video{object-position:74% 50%}
  .poster{background-position:74% 50%}

  /* A shorter journey. The film is the same length either way, but a thumb
     covers less ground than a mouse wheel, and 500vh of flicking to see five
     seconds reads as the page being stuck.

     The negative margin pulls the hero up under the sticky nav so the stage
     starts at the top of the screen instead of below it. Without it the
     stage hangs one nav-height past the bottom of the viewport and the first
     frame puts his qualifications behind the Call bar. --nav-h is measured
     and published by script.js; the 0px fallback means no JavaScript simply
     leaves it where it was. */
  .hero{height:360vh;margin-top:calc(-1 * var(--nav-h, 0px))}

  /* Text to the bottom, and the wash with it. On desktop the words flank a
     capsule that sits to one side; here the capsule is centred in the frame,
     so anything laid across the middle would cover the subject. */
  /* `.bands` is a flow child of the stage, so it is only as tall as its own
     content and the absolutely positioned bands inside it inherit that short
     box. On desktop the stage centres it and the words land where they
     should. Here they have to reach the bottom of the screen, so the
     container is stretched to the stage first. */
  .bands{position:absolute;inset:0}
  .band{align-items:end}
  /* Clear of the fixed Call and WhatsApp bar, which is about 66px. Words
     running under the one control a worried reader is looking for is worse
     than any amount of empty space. */
  .band-in{padding-bottom:6rem}
  .band-in>*{max-width:none}
  .band::before{
    inset:0;
    background:linear-gradient(to top,
      rgba(249,247,242,.97) 0%,
      rgba(249,247,242,.92) 30%,
      rgba(249,247,242,.58) 52%,
      rgba(249,247,242,0) 76%)}

  .band h1{font-size:min(clamp(2rem,9vw,2.9rem),7.5vh)}
  .band h2{font-size:min(clamp(1.7rem,7.6vw,2.4rem),7vh);max-width:none}
  .statement{font-size:min(clamp(1.7rem,7.4vw,2.3rem),7vh);max-width:none}
  .settle-sub{font-size:1.0625rem}
  .settle-cta{gap:.6rem}
  .settle-cta .btn{flex:1 1 100%;justify-content:center}

  /* No scroll cue on a phone. The words now reach the bottom of the screen
     and the cue was landing on top of the qualifications line. It is a hint,
     and a hint that collides with the content it is hinting at is worse than
     none. A capsule filling the screen is invitation enough. */
  .cue{display:none}
}

/* A shallow desktop window keeps the scrub but loses the cue, which has no
   room to sit. */
@media (min-width:721px) and (max-height:560px){.cue{display:none}}

/* ══════════════════════════════════════════════════════════════════════
   THE SEAM, the signature element
   Every divider on this page is the capsule's own seam: a hairline with a
   gap at its centre. The gap widens as the section arrives.
   ══════════════════════════════════════════════════════════════════════ */

.seam{position:relative;height:1px;background:transparent;overflow:visible}
.seam::before,.seam::after{content:"";position:absolute;top:0;height:1px;
  background:linear-gradient(to right,transparent,var(--line-firm));
  transition:width 1.1s var(--ease)}
.seam::before{left:0;width:calc(50% - .75rem)}
.seam::after{right:0;width:calc(50% - .75rem);
  background:linear-gradient(to left,transparent,var(--line-firm))}
.seam.in::before,.seam.in::after{width:calc(50% - 2.25rem)}

/* ══════════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════════ */

.sec{padding-block:var(--gap)}
.conditions,.visit,.book{background:var(--sage)}
.closer{background:var(--sage-deep)}

.grid-2{display:grid;gap:clamp(2.5rem,6vw,4.5rem);align-items:center}
.grid-2.align-start{align-items:start}
@media (min-width:58rem){
  .physician .grid-2{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .online .grid-2{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  .book .grid-2{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}

.block{margin-top:2rem}
.block p{margin-top:.55rem;color:var(--text-secondary);max-width:60ch}

.fig{position:relative;justify-self:center;width:min(100%,24rem)}
.fig-plate{position:absolute;inset:10% -6% -7% 9%;border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--accent-muted),var(--sage-deep))}
.fig-frame{position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
  background:var(--sage);box-shadow:var(--lift-2)}
.fig-frame img{width:100%;height:100%;object-fit:cover;object-position:55% 24%}

.posts{display:grid;gap:1.1rem;margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--line)}
@media (min-width:40rem){.posts{grid-template-columns:1fr 1fr;gap:1.75rem}}
.posts li{display:grid;gap:2px}
.posts strong{font-size:.975rem;font-weight:600}
.posts span{font-size:.9rem;color:var(--text-quiet);line-height:1.5}

/* ── Conditions accordion ───────────────────────────────────────────── */

.acc{display:grid;gap:.8rem;margin-top:clamp(2rem,5vh,3rem)}
.ac{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.ac:hover{box-shadow:var(--lift)}
.ac.open{border-color:var(--accent-muted);box-shadow:var(--lift)}
.ac.primary{border-left:3px solid var(--accent)}
.ac-head{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;width:100%;
  text-align:left;align-items:start;padding:1.35rem clamp(1rem,3vw,1.75rem)}
.ac-n{font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--accent);padding-top:.4rem}
.ac-t strong{display:block;font-family:var(--serif);font-size:1.3rem;line-height:1.25}
.ac-t span{display:block;margin-top:.3rem;font-size:.975rem;color:var(--text-secondary);line-height:1.6}
.ac-x{position:relative;width:1.5rem;height:1.5rem;margin-top:.4rem}
.ac-x::before,.ac-x::after{content:"";position:absolute;left:50%;top:50%;background:var(--accent);
  transform:translate(-50%,-50%);border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.ac-x::before{width:14px;height:2px}
.ac-x::after{width:2px;height:14px}
.ac.open .ac-x::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

.ac-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.ac.open .ac-body{grid-template-rows:1fr}
.ac-in{overflow:hidden;padding-inline:clamp(1rem,3vw,1.75rem)}
.ac.open .ac-in{padding-bottom:1.6rem}
.ac-in>p{margin-bottom:.9rem;color:var(--text-secondary);max-width:70ch}
.ac-in .kicker{margin-top:1.4rem;margin-bottom:.75rem;display:block}

.ticks{display:grid;gap:.55rem}
@media (min-width:48rem){.ticks{grid-template-columns:1fr 1fr;gap:.55rem 2rem}}
.ticks.one{grid-template-columns:1fr}
.ticks li{position:relative;padding-left:1.6rem;font-size:.95rem;color:var(--text-secondary);line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;
  background:var(--bead);border:2px solid var(--accent)}

/* ── Look closer: the one interactive moment ────────────────────────── */

.closer-wrap{text-align:center;display:grid;justify-items:center}
.closer .h2{max-width:none}
.lens{margin-top:clamp(2rem,5vh,3rem);width:min(100%,44rem)}
.lens-btn{position:relative;display:grid;place-items:center;width:100%;
  min-height:clamp(11rem,26vh,15rem);padding:2rem;
  background:var(--panel);border:1px solid var(--line-firm);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--lift);cursor:pointer;
  --h:0}
.lens-fill{position:absolute;left:0;bottom:0;width:100%;height:100%;
  background:linear-gradient(to top,var(--accent-muted),rgba(217,241,240,.35));
  transform:scaleY(var(--h));transform-origin:bottom;pointer-events:none}
.lens-surface{position:relative;font-family:var(--serif);
  font-size:clamp(1.8rem,4.2vw,2.8rem);line-height:1.15;
  opacity:calc(1 - var(--h)*1.35);transform:scale(calc(1 - var(--h)*.08))}
.lens-under{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;
  justify-content:center;gap:.5rem .9rem;padding:2rem;
  opacity:calc((var(--h) - .28)*1.9)}
.lens-under em{font-style:normal;font-family:var(--serif);font-size:clamp(1.05rem,2.2vw,1.5rem);
  color:var(--accent);
  transform:translateY(calc((1 - var(--h))*.7em))}
.lens-help{margin-top:1rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-quiet);
  opacity:calc(1 - var(--h)*2)}
.lens.done .lens-help{opacity:0}
.closer-note{margin-top:2rem;max-width:54ch;color:var(--text-secondary)}

/* ── Looking inside ─────────────────────────────────────────────────── */

.inside-head{display:grid;gap:2rem;align-items:center}
@media (min-width:58rem){.inside-head{grid-template-columns:1fr auto}}
.draw{width:clamp(5rem,9vw,7rem);height:auto;justify-self:center;
  fill:none;stroke:var(--accent);stroke-width:2}
.draw-p{stroke-dasharray:720;stroke-dashoffset:720;transition:stroke-dashoffset 2s var(--ease)}
.draw-s{stroke-dasharray:52;stroke-dashoffset:52;transition:stroke-dashoffset .8s var(--ease) .9s;stroke:var(--bead);stroke-width:3}
.inside-head.in .draw-p,.inside-head.in .draw-s{stroke-dashoffset:0}

.cards{display:grid;gap:1.25rem;margin-top:clamp(2rem,5vh,3rem)}
@media (min-width:54rem){.cards{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.card{padding:1.75rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.card:hover{border-color:var(--accent-muted);box-shadow:var(--lift);transform:translateY(-2px)}
.card-sum{margin-top:.6rem;font-size:1rem;color:var(--accent);font-weight:500}
.card>p{margin-top:.8rem;font-size:.975rem;color:var(--text-secondary)}
.card .kicker{display:block;margin-top:1.4rem;margin-bottom:.7rem}

/* ── Your visit ─────────────────────────────────────────────────────── */

.steps{display:grid;gap:1.25rem;margin-top:clamp(2rem,5vh,3rem)}
@media (min-width:56rem){.steps{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.step{padding:1.75rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg)}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;
  margin-bottom:1rem;border-radius:50%;background:var(--accent-muted);color:var(--accent);
  font-family:var(--mono);font-size:.8rem;font-weight:500}
.step p{margin-top:.7rem;font-size:.975rem;color:var(--text-secondary)}

/* ── Online ─────────────────────────────────────────────────────────── */

.checks{display:grid;gap:.7rem;margin-top:1.75rem;margin-bottom:2rem}
.checks li{position:relative;padding-left:1.9rem;color:var(--text-secondary)}
.checks li::before{content:"";position:absolute;left:0;top:.42em;width:1.05rem;height:.55rem;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.warn{padding:1.6rem;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--r-lg)}
.warn p:last-child{margin-top:.7rem;font-size:.975rem;color:var(--text-secondary)}

/* ── Clinics ────────────────────────────────────────────────────────── */

.clinic-grid{display:grid;gap:1.25rem;margin-top:clamp(2rem,5vh,3rem)}
@media (min-width:48rem){.clinic-grid{grid-template-columns:1fr 1fr;gap:1.5rem}}
.clinic{padding:1.85rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:box-shadow .25s var(--ease)}
.clinic:hover{box-shadow:var(--lift)}
.clinic-a{margin-top:.85rem;color:var(--text-secondary)}
.clinic-r{margin-top:.5rem;font-size:.925rem;color:var(--text-quiet)}
.clinic-note{margin-top:1.75rem;font-size:.975rem;color:var(--text-secondary)}
.clinic-note a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ── The form ───────────────────────────────────────────────────────── */

.form{padding:clamp(1.5rem,4vw,2.25rem);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg)}
.f{margin-bottom:1.25rem}
.flabel{display:block;margin-bottom:.45rem;font-size:.875rem;font-weight:600;letter-spacing:.02em}
.opt{font-weight:400;color:var(--text-quiet)}
.form input,.form select,.form textarea{width:100%;padding:.85rem 1rem;min-height:3.1rem;
  background:var(--canvas);border:1px solid var(--line-firm);border-radius:var(--r);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.form textarea{min-height:6rem;resize:vertical;line-height:1.6}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-muted)}
.form ::placeholder{color:#8ba39e}
.fs{border:0;padding:0;margin:0 0 1.25rem;display:grid;gap:.65rem}
@media (min-width:30rem){.fs{grid-template-columns:1fr 1fr}}
.fs .flabel{grid-column:1/-1}
.radio{position:relative;display:block}
.radio input{position:absolute;opacity:0;inset:0;cursor:pointer}
.radio span{display:grid;gap:2px;padding:.85rem 1rem;background:var(--canvas);
  border:1px solid var(--line-firm);border-radius:var(--r);cursor:pointer;
  transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.radio strong{font-size:.975rem;font-weight:600}
.radio em{font-style:normal;font-size:.85rem;color:var(--text-quiet)}
.radio input:checked+span{border-color:var(--accent);background:var(--accent-muted)}
.radio input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.fnote{margin-top:1rem;font-size:.875rem;color:var(--text-quiet);line-height:1.6}
.fdone{margin-top:1.1rem;padding:1rem 1.15rem;background:var(--accent-muted);
  border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  font-size:.95rem;color:var(--text-secondary)}
.fdone strong{display:block;color:var(--text-primary);margin-bottom:.2rem}
.urgent{margin-top:1.75rem;padding:1rem 1.15rem;background:var(--panel);
  border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  font-size:.95rem;color:var(--text-secondary)}
.urgent strong{color:var(--text-primary)}

/* ── Footer and action bar ──────────────────────────────────────────── */

.foot{background:var(--sage-deep);border-top:1px solid var(--line);
  padding-block:clamp(3rem,7vh,4.5rem) 2rem}
.foot-grid{display:grid;gap:2.25rem}
@media (min-width:40rem){.foot-grid{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.foot-grid{grid-template-columns:1.4fr .7fr 1.2fr .8fr;gap:2.5rem}}
.foot-name{font-family:var(--serif);font-size:1.5rem;letter-spacing:-.012em}
.foot-r{margin-top:.3rem;font-size:.925rem;color:var(--text-secondary)}
.foot-grid .kicker{margin-bottom:.9rem;display:block}
.foot-grid a{display:block;padding-block:.3rem;font-size:.95rem;color:var(--text-secondary);
  transition:color .2s var(--ease)}
.foot-grid a:hover{color:var(--accent)}
.foot-l{margin-bottom:.8rem;font-size:.925rem;color:var(--text-secondary);line-height:1.55}
.foot-l strong{color:var(--text-primary);font-weight:600}
.foot-base{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.875rem;color:var(--text-quiet)}

/* The build credit. Deliberately the quietest thing on the page: its own
   line, a step smaller than the copyright above it, and in the same quiet
   ink rather than the accent.
   The two marks are still real links, so they carry a faint underline. A
   link that looks exactly like the text around it is not discoverable, and
   the point of the credit is that somebody can follow it. */
.credit{flex-basis:100%;margin-top:.9rem;font-size:.8125rem;color:var(--text-quiet)}
.credit a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--line-firm);
  transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
.credit a:hover{color:var(--accent);text-decoration-color:var(--accent)}

.bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:.6rem;
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom,0px));
  background:rgba(242,239,231,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line)}
.bar .btn{flex:1}
body{padding-bottom:4.75rem}
@media (min-width:48rem){.bar{display:none}body{padding-bottom:0}}

/* ══════════════════════════════════════════════════════════════════════
   THE INNER PAGES

   Ten of them, and none carries the film. The homepage spends a viewport
   and 1.4 MB establishing who he is; somebody who has landed on the
   diabetes page from a search has already decided to read, and a second
   copy of the film would sit between them and the first sentence.

   What ties them to the homepage instead is the film's own resting frame,
   used as a short page header, plus the same palette, the same type and
   the same seam divider.
   ══════════════════════════════════════════════════════════════════════ */

.phead{position:relative;padding-block:clamp(3.5rem,9vh,5.5rem) clamp(2.5rem,6vh,3.5rem);overflow:hidden}
.phead-img{position:absolute;inset:0;
  background:url("hero-ending.jpg") 68% 60%/cover no-repeat;
  /* Lifted hard toward the canvas, because type sits over it and because a
     header should introduce the page, not compete with it. */
  opacity:.5}
.phead-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--canvas) 0%,rgba(242,239,231,.86) 46%,rgba(242,239,231,.35) 100%)}
.phead-in{position:relative;z-index:1}
.phead-h1{font-family:var(--serif);font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.08;
  letter-spacing:-.018em;margin-top:.5rem;max-width:18ch;text-wrap:balance}
.phead-lead{margin-top:1rem;max-width:54ch;font-size:1.125rem;color:var(--text-secondary)}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.25rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-quiet)}
.crumb a{color:var(--accent)}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── Body and sidebar ───────────────────────────────────────────────── */

.prose-sec{padding-top:clamp(2.5rem,6vh,4rem)}
.prose-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:start}
@media (min-width:62rem){.prose-grid{grid-template-columns:minmax(0,1fr) 20rem}}

.prose>p{margin-bottom:1.3rem;color:var(--text-secondary);max-width:68ch;font-size:1.0625rem}
.h3{font-family:var(--serif);font-size:clamp(1.45rem,2.4vw,1.85rem);line-height:1.2;
  letter-spacing:-.01em;margin-top:2.75rem;margin-bottom:1.1rem}
.note{margin-top:2.5rem;padding:1.1rem 1.25rem;background:var(--panel);
  border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  font-size:.975rem;color:var(--text-secondary);max-width:68ch}
.note strong{color:var(--text-primary)}

/* The sidebar sticks on a wide screen so the way to book stays in reach
   through a long read, and simply sits in the flow below that. */
.side{display:grid;gap:1rem}
@media (min-width:62rem){.side{position:sticky;top:6rem}}
.side-card{padding:1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg)}
.side-name{margin-top:.5rem;font-family:var(--serif);font-size:1.3rem;line-height:1.2}
.side-cred{margin-top:.35rem;font-family:var(--mono);font-size:.73rem;letter-spacing:.05em;color:var(--accent)}
.side-posts{display:grid;gap:.8rem;margin:1.2rem 0 1.4rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.side-posts li{display:grid;gap:1px}
.side-posts strong{font-size:.9rem;font-weight:600}
.side-posts span{font-size:.82rem;color:var(--text-quiet);line-height:1.45}
.side-wa{margin-top:.6rem}
.side-visit .kicker{display:block;margin-bottom:1rem}
.side-step{display:grid;grid-template-columns:auto 1fr;gap:.8rem;margin-bottom:1.1rem}
.side-step:last-child{margin-bottom:0}
.side-n{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;
  border-radius:50%;background:var(--accent-muted);color:var(--accent);
  font-family:var(--mono);font-size:.7rem;font-weight:500}
.side-step strong{display:block;font-size:.925rem;font-weight:600}
.side-step span{display:block;margin-top:.2rem;font-size:.85rem;color:var(--text-quiet);line-height:1.5}

/* ── Related ────────────────────────────────────────────────────────── */

.related{background:var(--sage)}
.rel-grid{display:grid;gap:1rem;margin-top:1.5rem}
@media (min-width:48rem){.rel-grid{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}}
.rel{display:grid;gap:.4rem;height:100%;padding:1.5rem;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.rel:hover{border-color:var(--accent-muted);box-shadow:var(--lift);transform:translateY(-2px)}
.rel strong{font-family:var(--serif);font-size:1.2rem;line-height:1.25}
.rel>span:last-child{font-size:.925rem;color:var(--text-secondary);line-height:1.55}

/* ── The closing call to action ─────────────────────────────────────── */

.cta-band{background:var(--sage-deep);border-top:1px solid var(--line)}
.cta-in{display:grid;justify-items:start;max-width:46rem}
.cta-in .h2{max-width:18ch}
.cta-in .fine{margin-top:1.5rem;font-size:.925rem;color:var(--text-secondary)}
.cta-in .fine a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ── About and contact extras ───────────────────────────────────────── */

.creds-list{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.creds-list li{padding:.5rem .95rem;background:var(--accent-muted);border-radius:999px;
  font-size:.9rem;font-weight:600;color:var(--accent)}
/* The link out of a homepage section into its own page. The arrow travels
   on hover, which is the smallest honest hint that it leaves this page. */
.more{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;margin-top:1.4rem;
  font-size:.95rem;font-weight:600;color:var(--accent)}
.more span{transition:transform .25s var(--ease)}
.more:hover span{transform:translateX(4px)}
.more:hover{text-decoration:underline;text-underline-offset:4px}

.clinic-t{margin-top:1rem;font-size:.95rem;color:var(--text-secondary)}
.clinic-t .kicker{display:block;margin-bottom:.3rem}
.foot-time{color:var(--text-quiet)}

/* ══════════════════════════════════════════════════════════════════════
   ENTRANCES
   ══════════════════════════════════════════════════════════════════════ */

.in-up{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.in-up.in{opacity:1;transform:none}
.no-js .in-up{opacity:1;transform:none}
.no-js .hero{height:auto}
.no-js .stage{position:static;height:auto;min-height:0;padding-block:6rem 4rem;place-items:stretch}
.no-js .bands,.no-js .cue,.no-js .ring{display:none}
.no-js .still{display:block}

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   Everything finished, nothing driving. The video is never requested: it
   is one of the five static-hero gates above.
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .in-up{opacity:1;transform:none;transition:none}
  .seam::before,.seam::after{width:calc(50% - 2.25rem);transition:none}
  .draw-p,.draw-s{stroke-dashoffset:0;transition:none}
  .env-glow,.env-motes{animation:none}
  .ac-body{transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Pause every loop on a hidden tab. animation-play-state does not inherit,
   so this has to reach elements and pseudo-elements directly. */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}