/* Alvary. Clinic light. One bright theme, locked, no inversion anywhere.
   Tokens per SPEC 2. Radius 4 everywhere including buttons.
   Reference contrast, re-proved from rendered frames: body 13.28:1,
   secondary 5.30:1, accent 7.30:1, white on CTA 7.72:1. */

:root{
  --ground:#F7F9F7;
  --surface:#EDF1EE;
  --hairline:#DCE3DE;
  --ink-display:#1B2420;
  --ink:#232E29;
  --ink-2:#5C6B64;
  --accent:#155E45;
  --accent-wash:rgba(21,94,69,.55);
  --font-sans:'Instrument Sans';

  --r:4px;
  --maxw:1200px;
  --gutter:24px;
  --hd:72px;
}

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

/* form and button elements do not inherit the family by default; every text
   node computes to Instrument Sans and nothing else */
button,input,select,textarea,fieldset,legend{font-family:inherit}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:1.0625rem;
  line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{margin:0;font-weight:600;color:var(--ink-display);letter-spacing:-0.02em}
h1{font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:1.04}
h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.12}
h3{font-size:1.1875rem;line-height:1.3;letter-spacing:-0.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--accent);color:#fff;
  padding:.7rem 1rem;border-radius:var(--r);text-decoration:none}
.skip:focus{left:12px;top:12px}

a{color:var(--accent)}

/* No backdrop-filter support: the frosted panels fall back to near-solid so
   contrast never depends on the blur */
@supports not (backdrop-filter:blur(10px)){
  .s1-inner,.s2-support,.acc,.s4-graf,.tier-note{background:rgba(247,249,247,.92)}
  .readout{background:rgba(247,249,247,.94)}
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* ---------- buttons: one shape system, radius 4 ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 1.15rem;border-radius:var(--r);
  font:inherit;font-weight:500;font-size:1rem;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;
  transition:background-color .18s ease,color .18s ease,transform .12s ease;
}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:#11503B;border-color:#11503B}
/* Ground-filled, not transparent: the quiet button crosses the rendered bench
   and glass at several scrub points, where a transparent fill loses the label */
.btn-quiet{background:rgba(247,249,247,.88);color:var(--accent);border-color:var(--accent)}
.btn-quiet:hover{background:rgba(247,249,247,.97)}
.btn:active{transform:translateY(1px)}

/* ---------- header: one line, 72px cap ---------- */

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  height:var(--hd);
  background:rgba(247,249,247,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.hd-inner{
  height:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;align-items:center;gap:2rem;
}
.wordmark{
  font-weight:500;font-size:1.3rem;letter-spacing:-0.035em;
  color:var(--ink-display);text-decoration:none;
}
.hd-nav{display:flex;gap:1.75rem;margin-left:auto;font-size:.9375rem}
.hd-nav a{color:var(--ink-2);text-decoration:none;transition:color .18s ease}
.hd-nav a:hover{color:var(--accent)}
.hd-cta{min-height:40px;font-size:.9375rem}
.hd-menu{display:none}
.hd-panel{display:none}

/* ---------- the scroll film: pinned behind everything ---------- */

.film-stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.film-stage #poster,.film-stage #film,.film-stage #idle{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  transition:opacity .3s ease;
}
.film-stage #poster{object-fit:cover}
/* ground wash above the film from S3 on; opacity is set by film.js on scroll */
.film-stage .film-dim{
  position:absolute;inset:0;background:var(--ground);opacity:0;
}
@media (prefers-reduced-motion:reduce){
  /* no scroll-driven change: a constant wash keeps every section readable
     over the resolved still */
  .film-stage .film-dim{opacity:.85 !important}
}
/* the frame canvas stays hidden until the first frame is drawn, then crossfades
   in over the poster (film.js adds .film-ready once a frame paints). The poster
   stays beneath as a permanent floor: the opaque frame canvas covers it, and if
   the canvas is ever cleared mid-resize before a redraw the poster shows through
   rather than a blank ground. */
.film-stage #film{opacity:0}
html.film-ready .film-stage #film{opacity:1}
/* total decode failure: poster stays, the page stays fully readable */
html.film-off .film-stage #film{display:none}

/* ---------- sections: the scroll contract's min heights ---------- */

main{position:relative;z-index:1}

.s{
  position:relative;
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
}
.s1{min-height:200vh}
.s2{min-height:160vh}
.s3{min-height:120vh}
.s4{min-height:140vh}
.s5{min-height:100vh}
.s6{min-height:90vh}
.s7{min-height:auto;padding-block:8rem 5rem}

.s3,.s4,.s5,.s6{padding-top:6rem}

/* S1 hero: sticky copy over the film runway. Frames leave the left third clear
   at desktop, so the copy holds there. */
.s1-copy{
  position:sticky;top:0;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--hd);
}
/* Ground panels: every copy block that rides over the film sits on a quiet
   ground-token panel (the same device the phone layout uses), so AA contrast
   is structural rather than dependent on which frame is behind it. */
.s1-inner{
  width:min(52%,620px);
  background:rgba(247,249,247,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:1.6rem 1.75rem;border-radius:var(--r);
}
.s1 .lede{margin-top:1.25rem;max-width:34ch;color:var(--ink-2);font-size:1.1875rem}
.cta-row{margin-top:2.25rem;display:flex;gap:.75rem;flex-wrap:wrap}

/* S2 measure: sticky copy left, the readout on the page ground right */
.s2-copy{
  position:sticky;top:0;min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-start;
  /* the copy holds the frame's bright upper wall; centring it drops the last
     paragraph onto the dark bench */
  padding-top:calc(var(--hd) + 7vh);
}
.s2-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:center}
.s2-support{
  max-width:42ch;
  background:rgba(247,249,247,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:1.5rem 1.6rem;border-radius:var(--r);
}
.s2-support p{margin-top:1.1rem;color:var(--ink-2)}
.s2-support .s2-close{color:var(--ink);border-top:1px solid var(--hairline);padding-top:1.1rem}

/* The readout sits on the page ground, not over the plate. A single ink layer:
   the figure in accent, labels secondary, list items ink, all read against the
   ground token #F7F9F7. It fades and rises in once the resolve completes. */
/* Desktop: pinned to the bright floor strip below the plate, absolute within
   the sticky viewport block so no grid arithmetic can drift it back onto the
   plate. The frame's floor region starts ~59vh down at the resolve pose. */
.readout{
  position:absolute;
  right:max(24px, calc((100% - 1152px) / 2));
  bottom:7vh;
  text-align:right;
  background:rgba(247,249,247,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:1.4rem 1.6rem;border-radius:var(--r);
  opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.22,.9,.24,1),transform .6s cubic-bezier(.22,.9,.24,1);
}
.readout.lit{opacity:1;transform:none}
.ro-num{font-size:clamp(3rem,6vw,4.6rem);font-weight:600;line-height:1;
  letter-spacing:-0.03em;color:var(--accent)}
.ro-lbl{margin-top:.45rem;font-size:.8125rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.ro-mods{margin-top:1.5rem;color:var(--ink);font-size:.8125rem;
  letter-spacing:.1em;text-transform:uppercase}
.ro-mods li{padding:.55rem 0;border-top:1px solid var(--hairline)}

/* S3 treatments: accordion with image */
.s3-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);margin-top:2.5rem}
.acc{
  grid-column:1/8;
  /* the same frosted ground panel as the hero and S2: the accordion body
     crosses the washed bench and loose ink there reads muddy (E7b polish 1) */
  background:rgba(247,249,247,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:.5rem 1.4rem 1rem;border-radius:var(--r);
}
.s3-figure{grid-column:8/13;margin:0}
.s3-figbox{aspect-ratio:3/2;background:var(--surface);border-radius:var(--r);overflow:hidden}
.s3-figbox img{width:100%;height:100%;object-fit:cover;display:block}

.acc-item{border-top:1px solid var(--hairline)}
.acc-item:last-child{border-bottom:1px solid var(--hairline)}
.acc-h{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:normal}
.acc-btn{
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;
  background:none;border:0;padding:1.35rem 2rem 1.35rem 0;font:inherit;text-align:left;cursor:pointer;
  color:var(--ink-display);
  position:relative;
}
/* disclosure affordance: a quiet plus that turns to a cross when open */
.acc-btn::after{
  content:"+";
  /* alternative-text syntax keeps the glyph OUT of the accessible name; the
     plain declaration above is the fallback where the syntax is unsupported */
  content:"+" / "";
  position:absolute;right:.25rem;top:1.2rem;
  font-size:1.35rem;font-weight:400;color:var(--accent);
  transition:transform .2s ease;
}
.acc-btn[aria-expanded="true"]::after{transform:rotate(45deg)}
.acc-title{font-size:1.1875rem;font-weight:600;letter-spacing:-0.01em}
/* full ink, not secondary: this line sits over the washed film bench, where
   ink-2 cannot reach AA at any dim that keeps the assembly visible */
.acc-sub{font-size:1rem;font-weight:400;color:var(--ink)}
.acc-panel{padding-bottom:1.5rem;max-width:56ch;color:var(--ink)}

/* S4 consultation: single column flow */
.s4-graf{
  margin-top:1.1rem;color:var(--ink);max-width:56ch;
  background:rgba(247,249,247,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:.9rem 1.1rem;border-radius:var(--r);
  display:inline-block;
}
.flow{
  margin-top:2.75rem;max-width:640px;
  background:var(--surface);border-radius:var(--r);
  padding:2rem;
}
.flow-h{margin-bottom:1.25rem}
.flow-h:focus{outline:none}
.flow-set{border:0;padding:0;margin:0;display:grid;gap:.5rem}
.opt{
  display:flex;align-items:center;gap:.75rem;
  padding:.85rem 1rem;border:1px solid var(--hairline);border-radius:var(--r);
  background:var(--ground);cursor:pointer;
  transition:border-color .16s ease;
}
.opt:hover{border-color:var(--accent)}
.opt input{accent-color:var(--accent);width:1.05rem;height:1.05rem;margin:0;flex:none}
.opt:has(input:checked){border-color:var(--accent)}
.flow-controls{display:flex;gap:.75rem;margin-top:1.75rem}
.flow-summary{margin:0 0 1.5rem}
.flow-summary div{display:flex;justify-content:space-between;gap:1.5rem;
  padding:.85rem 0;border-bottom:1px solid var(--hairline)}
.flow-summary dt{color:var(--ink-2);font-size:.9375rem}
.flow-summary dd{margin:0;font-weight:500;text-align:right}
.flow-disclosure{color:var(--ink);font-size:.9375rem;
  border-left:2px solid var(--accent);padding-left:.9rem}
.flow-msg{margin-top:.9rem;color:var(--accent);font-size:.9375rem;font-weight:500}
.flow-edit{
  background:none;border:0;padding:0;margin-left:.6rem;
  font:inherit;font-size:.875rem;font-weight:500;color:var(--accent);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.flow-confirm{
  margin:0 0 1.5rem;padding:1.2rem 1.3rem;
  background:var(--ground);border:1px solid var(--hairline);
  border-left:2px solid var(--accent);border-radius:var(--r);
}
.flow-confirm-h{margin:0 0 .35rem;font-size:1.0625rem}
.flow-confirm-h:focus{outline:none}
.flow-confirm-note{margin-top:.6rem;color:var(--ink-2);font-size:.875rem}
.flow-contact-link{
  align-self:center;margin-left:auto;
  font-size:.9375rem;color:var(--accent);
}

/* S5 membership: tier row */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:2.5rem}
.tier{background:var(--surface);border-radius:var(--r);padding:1.9rem 1.6rem}
.tier-name{font-size:1.0625rem;font-weight:600}
.tier-price{margin-top:.5rem;font-size:1.85rem;font-weight:600;letter-spacing:-0.025em;
  color:var(--ink-display)}
.tier-line{margin-top:.7rem;color:var(--ink-2);font-size:.9375rem}
.tier-list{margin-top:1.5rem;display:grid;gap:.7rem;font-size:.9375rem}
.tier-list li{padding-top:.7rem;border-top:1px solid var(--hairline)}
/* ---------- S-care: solid-ground editorial break ---------- */

.scare{
  padding-block:6.5rem;
  background:var(--ground);
  /* full-bleed behind the centred content column */
  box-shadow:0 0 0 100vmax var(--ground);
  clip-path:inset(0 -100vmax);
}
.care-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 3.5rem;
  margin-top:2.5rem;max-width:62rem;
}
.care-item p{margin-top:.5rem;color:var(--ink-2);max-width:44ch}

/* full ink for the same over-film reason as .acc-sub, on the shared frost */
.tier-note{
  margin-top:1.75rem;color:var(--ink);font-size:.9375rem;
  background:rgba(247,249,247,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:.7rem 1rem;border-radius:var(--r);
  display:inline-block;
}

/* S6 clinic: imagery band */
.s6-graf{margin-top:1.1rem;color:var(--ink-2);max-width:52ch}
.band-wide{aspect-ratio:16/9;background:var(--surface);border-radius:var(--r);margin-top:2.5rem;overflow:hidden}
.band-wide img,.band-sq img{width:100%;height:100%;object-fit:cover;display:block}
.band-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:var(--gutter)}
.band-sq{aspect-ratio:1/1;background:var(--surface);border-radius:var(--r);overflow:hidden}

/* S7 contact block */
.contact-block{margin-top:1.75rem;display:grid;gap:.5rem}
.contact-line{font-size:1.1875rem;color:var(--ink)}

.site-footer{
  position:relative;z-index:1;
  max-width:var(--maxw);margin-inline:auto;padding:2rem var(--gutter) 3.5rem;
  border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  color:var(--ink-2);font-size:.9375rem;
}

/* ---------- phone: 4 columns, 20px margin, 56px header ---------- */

@media (max-width:768px){
  :root{--hd:56px;--gutter:20px}

  .hd-nav{display:none}
  .hd-cta{margin-left:auto}
  .hd-menu{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin-left:.5rem;
    background:none;border:1px solid var(--hairline);border-radius:var(--r);cursor:pointer;
  }
  .hd-menu-bars{display:grid;gap:5px}
  .hd-menu-bars i{display:block;width:16px;height:1.5px;background:var(--ink)}
  .hd-panel{
    display:block;background:var(--ground);border-bottom:1px solid var(--hairline);
    padding:.5rem var(--gutter) 1rem;
  }
  .hd-panel[hidden]{display:none}
  .hd-panel a{display:block;padding:.7rem 0;color:var(--ink);text-decoration:none;
    border-bottom:1px solid var(--hairline)}
  .hd-panel a:last-child{border-bottom:0}

  .s{padding-inline:var(--gutter)}
  .s1{min-height:180vh}
  .s2{min-height:150vh}
  .s3,.s4,.s5,.s6{min-height:auto;padding-top:4rem}

  /* the film stays full-bleed behind the copy; a soft ground scrim keeps the
     sticky copy legible where it sits over the lower portion of the frame */
  .s1-inner{
    width:100%;
    background:linear-gradient(rgba(247,249,247,.92),rgba(247,249,247,.92));
    padding:1.1rem 1.15rem;border-radius:var(--r);
  }
  .s1 .lede{max-width:none;font-size:1.0625rem}
  .cta-row{margin-top:1.5rem}
  .cta-row .btn{flex:1 1 100%}

  .s2-grid{
    grid-template-columns:1fr;gap:1.75rem;align-items:start;
    background:linear-gradient(rgba(247,249,247,.92),rgba(247,249,247,.92));
    padding:1.1rem 1.15rem;border-radius:var(--r);
  }
  .s2-support{max-width:none}
  .readout{position:static;justify-self:start;text-align:left}

  .care-grid{grid-template-columns:1fr;gap:1.75rem}
  .flow-contact-link{margin-left:0;flex:1 1 100%;text-align:center;padding:.5rem 0}

  .s3-grid{grid-template-columns:1fr;gap:1.5rem}
  .acc,.s3-figure{grid-column:auto}
  .s3-figure{order:-1}

  .flow{padding:1.35rem}
  .flow-controls .btn{flex:1}
  .opt{padding:.95rem 1rem}

  .tiers{grid-template-columns:1fr}
  .band-pair{grid-template-columns:1fr}

  .site-footer{flex-direction:column;gap:.4rem}
}

/* ---------- reduced motion: resolved still, everything readable ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .s1{min-height:auto;padding-top:calc(var(--hd) + 4rem);padding-bottom:4rem}
  .s2{min-height:auto;padding-top:4rem}
  .s3,.s4,.s5,.s6{min-height:auto}
  .s1-copy{position:static;min-height:0}
  .s2-copy{position:static;min-height:0}
  .readout{opacity:1;transform:none}
}

/* ---------- no backdrop-filter: keep the header legible ---------- */

@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .site-header{background:var(--ground)}
}