/* =====================================================================
   LUMÉ — Skin & Light Studio
   The high-key, restrained world. Porcelain + travertine + deep petrol.
   Computed-accessible tokens · localized scrims · scroll-bound signatures.
   ===================================================================== */

:root{
  /* --- surfaces (airy, high-key) --- */
  --porcelain:#f5f2ec;      /* page base */
  --porcelain-2:#ece7de;    /* alt band */
  --travertine:#e6ddce;     /* warm stone */
  --card:#fbfaf6;

  /* --- ink (computed WCAG on porcelain) --- */
  --ink:#241f19;            /* ~13:1 on porcelain — primary text */
  --ink-2:#4a4339;          /* ~7:1 — secondary */
  --mute:#6a6153;           /* ~4.6:1 — captions, safe small */
  --line:rgba(36,31,25,.12);
  --line-2:rgba(36,31,25,.20);

  /* --- accent (deep petrol-teal, computed ~6.2:1 on porcelain: safe text/CTA) --- */
  --petrol:#0d5551;
  --petrol-deep:#093f3c;    /* CTA section bg */
  --petrol-ink:#0a4a46;     /* text weight on light */
  --seafoam:#8ac3bc;        /* DECORATIVE ONLY — glow/aurora, fails small text */
  --blush:#e2b9ab;          /* DECORATIVE whisper */
  --nude:#c7a08d;           /* imagery-tie decorative */

  /* on-dark (petrol book section) */
  --on-dark:#eef3f1;        /* ~13:1 on petrol-deep */
  --on-dark-mute:#a9c6c1;   /* ~5:1 on petrol-deep */

  --maxw:1280px;
  --gutter:clamp(20px, 5vw, 76px);
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"Hanken Grotesk", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--porcelain);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-weight:400;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
em{font-style:italic}
::selection{background:var(--petrol);color:#fff}

/* whisper film-grain — porcelain tooth, static (reduced-motion safe) */
body::after{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.04;mix-blend-mode:multiply;
}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;z-index:200}
.skip:focus{left:16px;top:16px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

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

/* ---------- shared type helpers ---------- */
.kicker{
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mute);font-weight:500;
  display:inline-flex;align-items:center;gap:.7em;
}
.kicker__dot{width:6px;height:6px;border-radius:50%;background:var(--petrol);box-shadow:0 0 0 4px rgba(13,85,81,.14);flex:none}
.kicker--petrol{color:var(--petrol-ink)}
.kicker--onlight{color:var(--petrol-ink)}
.kicker--ondark{color:var(--on-dark-mute)}
.kicker--ondark .kicker__dot{background:var(--seafoam);box-shadow:0 0 0 4px rgba(138,195,188,.22)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-weight:600;font-size:.94rem;letter-spacing:.01em;
  padding:.95em 1.7em;border-radius:100px;border:1px solid transparent;
  cursor:pointer;transition:transform .5s var(--ease-out),background .3s,color .3s,box-shadow .3s;
  will-change:transform;
}
.btn--petrol{background:var(--petrol);color:#fff;box-shadow:0 10px 30px -12px rgba(13,85,81,.5)}
.btn--petrol:hover{background:var(--petrol-deep);box-shadow:0 16px 40px -12px rgba(13,85,81,.6)}
.btn--book{background:var(--on-dark);color:var(--petrol-deep);box-shadow:0 12px 34px -12px rgba(0,0,0,.5)}
.btn--book:hover{background:#fff}

.link-arrow{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--petrol-ink);display:inline-flex;align-items:center;gap:.5em;
  border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:gap .3s,border-color .3s;
}
.link-arrow:hover{gap:.9em;border-color:var(--petrol)}
.link-arrow span{transition:transform .3s var(--ease-out)}
.link-arrow:hover span{transform:translateX(3px)}

/* ---------- bespoke contour motif (topographic ripples) ---------- */
.contour{
  position:absolute;color:var(--petrol);
  opacity:.05;pointer-events:none;z-index:0;
  width:min(58vw,720px);height:min(58vw,720px);
  left:-14vw;bottom:-16vw;
}
.contour--tr{left:auto;right:-16vw;top:-14vw;bottom:auto;color:var(--seafoam);opacity:.07}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  transition:background .4s,box-shadow .4s,padding .4s;
}
.nav.is-stuck{
  background:rgba(245,242,236,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 var(--line);padding-top:12px;padding-bottom:12px;
}
.nav__brand{display:flex;align-items:center;gap:.6em}
.nav__mark{
  width:20px;height:20px;border-radius:50%;flex:none;
  border:1.5px solid var(--petrol);position:relative;
}
.nav__mark::after{content:"";position:absolute;inset:5.5px;border-radius:50%;background:var(--petrol)}
.nav__word{font-family:var(--serif);font-size:1.5rem;letter-spacing:.01em;line-height:1}
.nav__links{display:flex;gap:2.1rem}
.nav__links a{
  font-size:.9rem;color:var(--ink-2);position:relative;padding:4px 0;transition:color .3s;
}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--petrol);transition:width .35s var(--ease-out)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}
.nav__cta{
  font-size:.86rem;font-weight:600;padding:.62em 1.25em;border-radius:100px;
  border:1px solid var(--line-2);color:var(--ink);
  transition:transform .5s var(--ease-out),background .3s,border-color .3s,color .3s;will-change:transform;
}
.nav__cta:hover{background:var(--petrol);border-color:var(--petrol);color:#fff}
.nav__links-cta{display:none}
.nav__toggle{
  display:none;width:42px;height:42px;flex:none;
  border:1px solid var(--line-2);border-radius:100px;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.nav__toggle span{display:block;width:18px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
.nav.is-open .nav__toggle span:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav.is-open .nav__toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;padding:clamp(120px,16vh,190px) var(--gutter) clamp(50px,7vh,90px);overflow:hidden;isolation:isolate}
.hero__aurora{
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  display:block;opacity:.9;
}
.hero::before{ /* base wash layer (over canvas, under content) */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(226,185,171,.20), transparent 55%),
    radial-gradient(90% 72% at 20% 44%, rgba(138,195,188,.20), transparent 62%),
    radial-gradient(100% 80% at 6% 96%, rgba(138,195,188,.16), transparent 60%);
}
.hero__grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center;
}
.hero__copy{max-width:38rem}
.kicker__dot{}
.hero__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3.4rem,9vw,7.2rem);line-height:.94;letter-spacing:-.02em;
  margin:.32em 0 .5em;
}
.hero__title em{color:var(--petrol-ink);font-style:italic}
.reveal-line{display:block;overflow:hidden}
.reveal-line>span{display:block}
.reveal-line>span>span{display:inline-block}
.hero__sub{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--ink-2);max-width:34rem;line-height:1.6}
.hero__cta{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin:2.1rem 0 2.4rem}
.hero__facts{list-style:none;display:flex;gap:2.4rem}
.hero__facts li{display:flex;flex-direction:column;gap:.1em}
.hero__facts b{font-family:var(--serif);font-size:1.9rem;line-height:1;color:var(--ink)}
.hero__facts i{font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

.hero__media{
  position:relative;border-radius:6px 6px 60px 6px;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(36,31,25,.4);
  aspect-ratio:1/1.06;
}
.hero__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hero__stamp{
  position:absolute;left:16px;bottom:16px;
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  padding:.55em .95em;border-radius:100px;
  background:rgba(20,17,13,.42);backdrop-filter:blur(8px);
}
.hero__pulse{width:7px;height:7px;border-radius:50%;background:var(--seafoam);box-shadow:0 0 0 0 rgba(138,195,188,.8);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(138,195,188,.55)}70%{box-shadow:0 0 0 10px rgba(138,195,188,0)}100%{box-shadow:0 0 0 0 rgba(138,195,188,0)}}

.hero__scroll{
  position:absolute;left:var(--gutter);bottom:26px;
  display:inline-flex;align-items:center;gap:.8em;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
.hero__scroll-line{width:52px;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.hero__scroll-line::after{content:"";position:absolute;inset:0;width:40%;background:var(--petrol);animation:slide 2.4s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* =====================================================================
   ETHOS — restraint beat
   ===================================================================== */
.ethos{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(90px,15vh,180px) var(--gutter);
  text-align:center;
  background:linear-gradient(180deg,var(--porcelain),var(--porcelain-2));
}
.ethos .contour{color:var(--petrol);opacity:.055;left:50%;top:50%;transform:translate(-50%,-50%);width:min(90vw,900px);height:min(90vw,900px);bottom:auto}
.ethos__eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--petrol-ink);margin-bottom:1.4rem;position:relative}
.ethos__statement{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,5vw,4rem);line-height:1.14;letter-spacing:-.015em;
  max-width:22ch;margin:0 auto;color:var(--ink);position:relative;
}
.ethos__statement em{color:var(--petrol-ink)}
.reveal-word{display:inline-block}
.ethos__sign{margin-top:2rem;font-size:.92rem;color:var(--mute);position:relative}

/* =====================================================================
   TREATMENTS — clinical ledger (hover-reveal preview, not a grid)
   ===================================================================== */
.treatments{
  position:relative;isolation:isolate;padding:clamp(80px,12vh,140px) var(--gutter);
  max-width:var(--maxw);margin:0 auto;
}
.treatments::before{ /* contained satin wash + whisper seafoam/blush bloom */
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:clamp(30px,5vh,80px) calc(var(--gutter) * 0.35);border-radius:26px;
  background:
    radial-gradient(70% 55% at 90% 4%, rgba(138,195,188,.11), transparent 62%),
    radial-gradient(64% 55% at 2% 99%, rgba(226,185,171,.08), transparent 62%),
    linear-gradient(180deg, rgba(251,250,246,.5), transparent 30%);
}
.treatments__head{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);
  align-items:end;margin-bottom:clamp(40px,6vh,72px);
}
.treatments__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.5vw,4.2rem);line-height:.98;letter-spacing:-.02em}
.treatments__title em{color:var(--petrol-ink)}
.treatments__lede{color:var(--ink-2);font-size:1.05rem;max-width:34rem;align-self:end}

.ledger{list-style:none;border-top:1px solid var(--line);position:relative;z-index:1}
.ledger__row{
  display:grid;
  grid-template-columns:auto minmax(8.5rem,1fr) 1.55fr auto;
  gap:clamp(14px,2.4vw,34px);align-items:baseline;
  padding:clamp(20px,3vh,30px) 4px clamp(20px,3vh,30px) 8px;
  border-bottom:1px solid var(--line);
  position:relative;cursor:default;
  transition:transform .5s var(--ease-out),background .4s var(--ease-out);
}
.ledger__row::before{
  content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--petrol);
  transform:scaleY(0);transform-origin:center;transition:transform .45s var(--ease-out);
}
.ledger__no{font-family:var(--mono);font-size:.78rem;color:var(--petrol-ink);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em;padding-top:.2em;transition:color .3s,transform .45s var(--ease-out)}
.ledger__name{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;color:var(--ink);transition:color .3s}
.ledger__desc{color:var(--mute);font-size:.98rem;line-height:1.5}
.ledger__meta{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--ink-2);white-space:nowrap;text-align:right;padding-top:.45em;font-variant-numeric:tabular-nums;transition:color .3s}
/* resting "active" row so the interaction reads even in a still */
.ledger__row--active{background:linear-gradient(90deg,rgba(13,85,81,.06),rgba(13,85,81,.015) 45%,transparent 66%)}
.ledger__row--active::before{transform:scaleY(1)}
.ledger__row--active .ledger__name{color:var(--petrol-ink)}
@media (hover:hover){
  .ledger__row:hover{transform:translateX(14px);background:linear-gradient(90deg,rgba(13,85,81,.07),rgba(13,85,81,.02) 45%,transparent 66%)}
  .ledger__row:hover::before{transform:scaleY(1)}
  .ledger__row:hover .ledger__name{color:var(--petrol-ink)}
  .ledger__row:hover .ledger__meta{color:var(--petrol-ink)}
  .ledger__row:hover .ledger__no{transform:translateY(-1px)}
  /* once you engage the list, the default-active styling steps back */
  .ledger:hover .ledger__row--active:not(:hover){background:none}
  .ledger:hover .ledger__row--active:not(:hover)::before{transform:scaleY(0)}
  .ledger:hover .ledger__row--active:not(:hover) .ledger__name{color:var(--ink)}
}
/* floating preview follows the hovered row (desktop) */
.ledger__preview{
  position:fixed;top:0;left:0;width:230px;height:290px;border-radius:6px 6px 34px 6px;overflow:hidden;
  pointer-events:none;z-index:60;opacity:0;transform:translate(-50%,-50%) scale(.94);
  box-shadow:0 30px 60px -26px rgba(36,31,25,.55);
  transition:opacity .35s var(--ease),transform .45s var(--ease-out);
}
.ledger__preview img{width:100%;height:100%;object-fit:cover}
.ledger__preview.is-on{opacity:1}

/* =====================================================================
   COMPARE — before/after slider (signature)
   ===================================================================== */
.compare{
  position:relative;padding:clamp(80px,12vh,140px) var(--gutter);
  background:var(--porcelain-2);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,80px);align-items:center;
}
.compare__head{max-width:30rem}
.compare__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.5vw,4.4rem);line-height:.98;letter-spacing:-.02em;margin:.5em 0 .6em}
.compare__title em{color:var(--petrol-ink)}
.compare__lede{color:var(--ink-2);font-size:1.05rem}
.compare__note{color:var(--mute);font-size:.9rem}

.ba{
  position:relative;border-radius:8px 8px 8px 60px;overflow:hidden;
  aspect-ratio:4/5;user-select:none;touch-action:pan-y;
  box-shadow:0 40px 80px -40px rgba(36,31,25,.5);
  --split:50%;
}
.ba__img{position:absolute;inset:0}
.ba__img img{width:100%;height:100%;object-fit:cover}
.ba__img--after img{filter:saturate(1.06) brightness(1.04) contrast(1.02)}
.ba__img--before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.ba__img--before img{filter:grayscale(.42) brightness(.92) contrast(.96) saturate(.6)}
.ba__img--before::after{content:"";position:absolute;inset:0;background:rgba(60,54,46,.14)}
.ba__tag{
  position:absolute;top:16px;z-index:4;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  display:inline-flex;align-items:center;gap:.5em;
  padding:.5em .85em;border-radius:100px;background:rgba(16,14,10,.66);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(7px);
  text-shadow:0 1px 3px rgba(18,15,11,.6);
}
.ba__tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85;flex:none}
.ba__tag--before{left:16px}
.ba__tag--after{right:16px;background:rgba(9,63,60,.7);color:#eaf6f3}
.ba__tag--after::before{background:var(--seafoam);opacity:1}
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--split);z-index:5;
  width:44px;transform:translateX(-50%);cursor:ew-resize;
  display:flex;align-items:center;justify-content:center;
}
.ba__line{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.96) 16%,rgba(255,255,255,.96) 84%,rgba(255,255,255,.35));
  box-shadow:0 0 10px rgba(255,255,255,.45),0 0 0 1px rgba(13,85,81,.18)}
.ba__grip{
  position:relative;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#f2eee6);
  box-shadow:0 10px 24px -8px rgba(36,31,25,.55),0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(13,85,81,.14);
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);
}
.ba__grip::before,.ba__grip::after{content:"";width:7px;height:7px;border:1.6px solid var(--petrol);border-width:1.6px 1.6px 0 0}
.ba__grip::before{transform:rotate(-135deg)}
.ba__grip::after{transform:rotate(45deg)}
.ba:hover .ba__grip,.ba__handle:active .ba__grip{transform:scale(1.08);box-shadow:0 14px 30px -8px rgba(36,31,25,.6),0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(13,85,81,.2)}
.ba__handle:focus-visible{outline:none}
.ba__handle:focus-visible .ba__grip{outline:2px solid var(--petrol);outline-offset:3px}

/* =====================================================================
   SPACE — the room (full-bleed image + panel, localized scrim)
   ===================================================================== */
.space{position:relative;display:grid;grid-template-columns:1.15fr .85fr;min-height:88vh;background:var(--travertine)}
.space__media{position:relative;overflow:hidden}
.space__media img{width:100%;height:100%;object-fit:cover;min-height:60vh}
.space__media::after{ /* directional light accent + edge fade toward panel */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 55%,rgba(230,221,206,.55) 92%);
}
.space__panel{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  gap:1.2rem;padding:clamp(48px,7vw,90px);background:var(--travertine);
}
.space__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4vw,3.6rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.space__title em{color:var(--petrol-ink)}
.space__body{color:var(--ink-2);font-size:1.05rem;max-width:32rem}
.space__notes{list-style:none;display:grid;gap:.2rem;margin-top:.6rem;border-top:1px solid var(--line)}
.space__notes li{display:grid;grid-template-columns:6rem 1fr;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.space__notes b{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol-ink);font-weight:500}
.space__notes i{font-style:normal;color:var(--ink-2);font-size:.98rem}

/* =====================================================================
   METHOD — still life + numbered steps
   ===================================================================== */
.method{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(80px,12vh,140px) var(--gutter);
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,86px);align-items:center;
  background:linear-gradient(180deg,var(--porcelain),var(--porcelain-2));
}
.method__media{border-radius:6px 6px 50px 6px;overflow:hidden;box-shadow:0 40px 80px -44px rgba(36,31,25,.45);aspect-ratio:4/5;position:relative;z-index:1}
.method__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.method__body{position:relative;z-index:1;max-width:36rem}
.method__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5vw,4rem);line-height:.98;letter-spacing:-.02em;margin:.4em 0 .5em}
.method__title em{color:var(--petrol-ink)}
.method__lede{color:var(--ink-2);font-size:1.06rem;margin-bottom:2rem}
.steps{list-style:none;display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step__no{font-family:var(--mono);font-size:.82rem;color:var(--petrol-ink);font-weight:500;padding-top:.35em}
.step b{font-family:var(--serif);font-size:1.5rem;font-weight:400;color:var(--ink);display:block;margin-bottom:.2em}
.step p{color:var(--mute);font-size:.98rem;line-height:1.55}

/* =====================================================================
   TRUST — practitioner
   ===================================================================== */
.trust{
  position:relative;padding:clamp(80px,12vh,140px) var(--gutter);
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,90px);align-items:center;
  max-width:var(--maxw);margin:0 auto;
}
.trust__media{border-radius:6px 50px 6px 6px;overflow:hidden;box-shadow:0 40px 80px -44px rgba(36,31,25,.45);aspect-ratio:4/5}
.trust__media img{width:100%;height:100%;object-fit:cover}
.trust__body{max-width:36rem}
.trust__quote{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.12;letter-spacing:-.01em;color:var(--ink);margin:1rem 0 1.4rem}
.trust__attrib{color:var(--ink-2);font-size:1rem;margin-bottom:1.8rem}
.trust__marks{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem}
.trust__marks li{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--petrol-ink);
  border:1px solid var(--line-2);border-radius:100px;padding:.5em 1em;background:var(--card);
}

/* =====================================================================
   BOOK — the one deep petrol beat (conversion)
   ===================================================================== */
.book{position:relative;overflow:hidden;isolation:isolate;background:var(--petrol-deep);color:var(--on-dark);padding:clamp(90px,14vh,170px) var(--gutter)}
.book__glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 60% at 18% 12%, rgba(138,195,188,.28), transparent 60%),
    radial-gradient(70% 70% at 90% 96%, rgba(226,185,171,.18), transparent 60%);
}
.book__inner{position:relative;z-index:1;max-width:660px;margin:0 auto;text-align:center}
.book__inner .kicker{justify-content:center}
.book__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,6.5vw,5.2rem);line-height:.98;letter-spacing:-.02em;margin:.4em 0 .5em;color:#fff}
.book__title em{color:var(--seafoam)}
.book__lede{color:var(--on-dark-mute);font-size:1.08rem;max-width:44ch;margin:0 auto 2.4rem}
.book__form{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left;max-width:560px;margin:0 auto}
.book__field{display:flex;flex-direction:column;gap:.5em}
.book__field--wide{grid-column:1/-1}
.book__field span{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mute)}
.book__field input{
  background:rgba(255,255,255,.06);border:1px solid rgba(238,243,241,.22);border-radius:10px;
  padding:.85em 1em;color:#fff;font-family:var(--sans);font-size:1rem;transition:border-color .3s,background .3s;
}
.book__field input::placeholder{color:rgba(238,243,241,.72)}
.book__field input:focus{border-color:var(--seafoam);background:rgba(255,255,255,.1)}
.book__field input:focus:not(:focus-visible){outline:none}
.book__field input:focus-visible{outline:2px solid var(--seafoam);outline-offset:2px}
.book__form .btn{grid-column:1/-1;justify-self:center;margin-top:.4rem}
.book__ok{grid-column:1/-1;text-align:center;color:var(--seafoam);font-family:var(--mono);font-size:.82rem;letter-spacing:.06em}
.book__fine{margin-top:1.8rem;color:var(--on-dark-mute);font-size:.92rem}
.book__fine a{color:var(--on-dark);border-bottom:1px solid rgba(238,243,241,.4);padding-bottom:1px}
.book__fine a:hover{border-color:var(--seafoam)}

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{background:var(--porcelain);padding:clamp(56px,8vh,90px) var(--gutter) 30px;border-top:1px solid var(--line)}
.foot__top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,5vw,70px);padding-bottom:clamp(40px,6vh,64px)}
.foot__word{font-family:var(--serif);font-size:2.4rem;line-height:1}
.foot__tag{color:var(--mute);font-size:.98rem;max-width:30rem;margin-top:.6rem}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot__cols h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:1rem;font-weight:500}
.foot__cols a{display:block;color:var(--mute);font-size:.94rem;padding:.28em 0;transition:color .3s}
.foot__cols a:hover{color:var(--petrol-ink)}
.foot__base{max-width:var(--maxw);margin:0 auto;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot__base span{color:var(--mute);font-size:.82rem}
.foot__weebie{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--petrol-ink);display:inline-flex;gap:.4em;border-bottom:1px solid transparent;transition:border-color .3s;padding-bottom:2px}
.foot__weebie:hover{border-color:var(--petrol)}

/* =====================================================================
   MOTION — reveal system (visible by default; hidden only when JS + motion OK)
   ===================================================================== */
.gsap-ready .reveal{opacity:0}
.gsap-ready .reveal-img{opacity:0}
.gsap-ready .reveal-img>img{transform:scale(1.06)}
.gsap-ready .reveal-line>span>*{transform:translateY(105%)}
.gsap-ready .reveal-word{opacity:0;transform:translateY(28px)}
.gsap-ready .ledger__row{opacity:0;transform:translateY(20px)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .gsap-ready .reveal,.gsap-ready .reveal-img,.gsap-ready .reveal-word,.gsap-ready .ledger__row{opacity:1!important;transform:none!important}
  .gsap-ready .reveal-img>img,.gsap-ready .reveal-line>span>*{transform:none!important}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .hero__media{max-width:520px;order:-1}
  .compare{grid-template-columns:1fr;gap:40px}
  .method,.trust{grid-template-columns:1fr;gap:40px}
  .method__media,.trust__media{max-width:480px;order:-1}
  .space{grid-template-columns:1fr}
  .space__media img{min-height:52vh}
  .space__media::after{background:linear-gradient(180deg,transparent 60%,rgba(230,221,206,.7) 100%)}
}
@media (max-width:760px){
  .nav__cta{display:none}
  .nav__toggle{display:inline-flex}
  .nav__links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;align-items:stretch;
    background:rgba(245,242,236,.97);backdrop-filter:saturate(1.4) blur(16px);
    border-top:1px solid var(--line);box-shadow:0 20px 40px -24px rgba(36,31,25,.4);
    padding:6px var(--gutter) 16px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
  }
  .nav.is-open .nav__links{opacity:1;visibility:visible;transform:none}
  .nav__links a{padding:.95em 0;font-size:1.06rem;color:var(--ink);border-bottom:1px solid var(--line)}
  .nav__links a::after{display:none}
  .nav__links a:last-child{border-bottom:none}
  .nav__links-cta{display:block;color:var(--petrol-ink);font-weight:600;margin-top:.2rem}
  .treatments__head{grid-template-columns:1fr;gap:18px}
  .ledger__row{grid-template-columns:auto 1fr;grid-template-areas:"no name" "desc desc" "meta meta";gap:.4rem 1rem;row-gap:.5rem}
  .ledger__no{grid-area:no}
  .ledger__name{grid-area:name}
  .ledger__desc{grid-area:desc}
  .ledger__meta{grid-area:meta;text-align:left;color:var(--petrol-ink)}
  .book__form{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr;gap:36px}
  .foot__cols{grid-template-columns:repeat(3,1fr)}
  .hero__facts{gap:1.5rem}
  .trust__media{order:-1}
}
@media (max-width:440px){
  .hero__facts{gap:1.1rem}
  .hero__facts b{font-size:1.55rem}
  .foot__cols{grid-template-columns:1fr 1fr}
  .space__notes li{grid-template-columns:1fr}
  .space__notes li i{margin-top:.1rem}
}