/* ═══════════════════════════════════════════════════════════
   Haus of Life & Co.
   Editorial luxury - one palette, one light, one type system.
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Bodoni Moda";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("../assets/fonts/bodoni-moda-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Bodoni Moda";
  font-style:italic;
  font-weight:400 900;
  font-display:swap;
  src:url("../assets/fonts/bodoni-moda-italic-latin.woff2") format("woff2");
}
/* Copy and labels (October 9, 2026): Montserrat, the open, wide sans of the
   client's own marble mockup, replacing Inter, which read cold and cramped. */
@font-face{
  font-family:"Montserrat";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../assets/fonts/montserrat-latin.woff2") format("woff2");
}
:root{
  --bone:#F6F2EA;
  --alabaster:#EDE6DA;
  --oat:#DDD0BC;
  --clay:#765F47;
  --bronze:#7E6038;
  --champagne:#C9AC80;
  --umber:#3B3129;
  --ink:#221D18;
  --ink-soft:#5B5147;

  --display:"Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans:"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Subtle white marble for the light sections (October 9, 2026): soft grey
     veins and a faint gold thread, generated to tile with no seams. Its darkest
     pixel is held at luminance .78, so every text colour used on the light
     sections keeps AA contrast wherever it lands (clay 4.7:1, bronze 4.6:1,
     ink-soft 6:1 at that worst spot). */
  --marble-white:url("../assets/images/marble-white-tile.webp");
  --marble-size:1200px auto;

  --gut:clamp(1.25rem, 5vw, 5.5rem);
  --sec:clamp(5rem, 12vw, 11rem);
  --max:88rem;
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:1.05s;
  --z-actions:90;
  --z-nav:100;
  --z-skip:200;
}

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

.sr-only{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}

body{
  margin:0;
  background:var(--bone) var(--marble-white) 0 0 / var(--marble-size) repeat;
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem,.95rem + .25vw,1.075rem);
  line-height:1.7;
  font-kerning:normal;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
h1,h2,h3,p,dl,dd,figure,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}

::selection{background:var(--champagne);color:var(--ink)}

:where(a,button,summary,video):focus-visible{
  outline:2px solid var(--bronze);
  outline-offset:4px;
  border-radius:2px;
}

/* Keep the focus indicator above 3:1 on dark and image-backed surfaces. */
.section--dark :focus-visible,
.foot :focus-visible{
  outline-color:var(--champagne);
}

.skip-link{
  position:absolute;left:.75rem;top:.75rem;z-index:var(--z-skip);
  background:var(--ink);color:var(--bone);
  padding:.75rem 1.25rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;transform:translateY(-5rem);transition:transform .25s var(--ease);
}
.skip-link:focus{transform:none}

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

.display{
  font-family:var(--display);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.display em{font-style:italic;font-weight:400}

/* Gilt italic accent (October 7, 2026): the italic phrase of a heading on a
   light surface, in polished antique gold (section headings such as "your
   plan" and "small step."). The lightest stop, #A07C3E, keeps about 3.4:1 on bone,
   enough for text this large; the bright gold of the dark sections would drop
   under 2:1 here. One slow pass of light crosses it as its heading fades in
   (the hero's sweep), then it rests; reduced motion shows it at rest. */
:is(h1,h2).display em.gilt{font-weight:500;color:#6E532B}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  :is(h1,h2).display em.gilt{
    /* Room for italic tails on the left (the y in "your") and the lean on the
       right, so the gold reaches every stroke; negative margins keep layout. */
    padding:0 .1em .12em .14em;margin:0 -.1em 0 -.14em;
    background:linear-gradient(100deg,#5A4122 0%,#7A5C30 30%,#A07C3E 48%,#7A5C30 66%,#5A4122 100%);
    background-size:220% 100%;background-position:0 0;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
}
@media (prefers-reduced-motion:no-preference){
  .motion-ready h2.display.is-in em.gilt{animation:hero-gold-sweep 2.6s var(--ease) .5s both}
}

.display--xl{font-size:clamp(3rem,7vw,6rem)}
.display--lg{font-size:clamp(2.3rem,6.2vw,5.25rem)}
.display--md{font-size:clamp(1.9rem,4.4vw,3.5rem)}
.display--sm{font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.05}

.eyebrow{
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--clay);
  margin-bottom:clamp(1.25rem,2.5vw,2rem);
}

.lede{
  font-size:clamp(1.08rem,1.5vw,1.35rem);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:38ch;
  margin-top:1.75rem;
}
.lede--center{margin-inline:auto;text-align:center;max-width:46ch}

.prose{margin-top:2rem;max-width:44ch;color:var(--ink-soft)}
.prose p + p{margin-top:1.15rem}

.section{padding:var(--sec) var(--gut)}

.section__head{
  max-width:var(--max);margin:0 auto clamp(3.5rem,8vw,7rem);
  text-align:center;
}
.section__head .eyebrow{margin-inline:auto}

/* ── Buttons & links ──────────────────────────────────── */

.btn{
  --btn-fg:var(--bone);
  --btn-bg:var(--ink);
  --sheen:rgba(255,255,255,.34);
  --btn-edge:rgba(255,255,255,.18);
  --shine-delay:1.2s;
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3.25rem;
  padding:1rem 2.15rem;
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  text-decoration:none;border:1px solid var(--btn-bg);white-space:nowrap;
  box-shadow:inset 0 1px 0 var(--btn-edge);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .12s var(--ease);
}
.btn:hover{--btn-bg:var(--bronze);border-color:var(--bronze)}
.btn:active{transform:translateY(1px)}
.btn--sm{min-height:2.75rem;padding:.7rem 1.4rem;font-size:.75rem;letter-spacing:.14em}
.btn--light{
  --btn-bg:var(--bone);--btn-fg:var(--ink);
  --sheen:rgba(126,96,56,.22);--btn-edge:rgba(255,255,255,.72);
}
.btn--light:hover{--btn-bg:var(--champagne);--btn-fg:var(--ink);border-color:var(--champagne)}

/* A slow light sweep gives primary actions a polished cue without constant motion. */
.btn::after{
  content:"";
  position:absolute;top:-50%;bottom:-50%;left:0;width:65%;
  pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,var(--sheen) 50%,transparent 100%);
  transform:translate3d(-190%,0,0) skewX(-14deg);
}
@media (prefers-reduced-motion:no-preference){
  .btn::after{
    animation:btn-shine 7.2s var(--shine-delay) var(--ease) infinite;
  }
  .btn:hover::after,
  .btn:focus-visible::after{animation:btn-sheen .72s var(--ease) 1}
}

@keyframes btn-sheen{
  0%{transform:translate3d(-190%,0,0) skewX(-14deg)}
  100%{transform:translate3d(250%,0,0) skewX(-14deg)}
}
@keyframes btn-shine{
  0%{transform:translate3d(-190%,0,0) skewX(-14deg)}
  12%,100%{transform:translate3d(250%,0,0) skewX(-14deg)}
}

.nav__cta{--shine-delay:2.2s}

.link-inline{
  display:inline-flex;align-items:center;min-height:2.75rem;
  color:var(--bronze);text-decoration:none;
  border-bottom:1px solid rgba(156,123,78,.45);
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.link-inline:hover{color:var(--ink);border-bottom-color:currentColor}

.link-quiet{
  display:inline-flex;align-items:center;min-height:3.25rem;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.link-quiet:hover{color:var(--ink);border-bottom-color:currentColor}
.link-quiet--light{color:rgba(246,242,234,.92)}
.link-quiet--light:hover{color:var(--bone)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.7rem;
  min-height:3rem;margin-top:2.5rem;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:inherit;
  border-bottom:1px solid currentColor;
  align-self:flex-start;
}
.link-arrow span{transition:transform .4s var(--ease)}
.link-arrow:hover span{transform:translateX(.4rem)}

/* ── Nav ──────────────────────────────────────────────── */

.nav{
  position:fixed;inset:0 0 auto;z-index:var(--z-nav);
  background:rgba(246,242,234,.92);
  box-shadow:0 1px 0 rgba(59,49,41,.12);
  transition:background .5s var(--ease),box-shadow .5s var(--ease);
}
@supports (backdrop-filter:blur(1px)){
  .nav{
    background:rgba(246,242,234,.84);
    backdrop-filter:blur(14px) saturate(1.05);
  }
}
.nav__inner{
  position:relative;z-index:3;
  max-width:var(--max);margin:0 auto;
  padding:clamp(.75rem,1.25vw,1rem) var(--gut);
  display:flex;align-items:center;gap:2rem;
}

.nav__mark{
  font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:500;
  letter-spacing:.01em;text-decoration:none;color:var(--ink);
  white-space:nowrap;transition:color .5s var(--ease);
  display:inline-flex;align-items:center;min-height:44px;
}
.nav__mark-b{font-style:italic;margin-left:.3em}

.nav__links{display:flex;gap:clamp(1.25rem,2.5vw,2.5rem);margin-left:auto}
.nav__links a{
  display:inline-flex;align-items:center;min-height:2.75rem;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);font-weight:500;
  padding:.5rem 0;position:relative;
  transition:color .4s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after,
.nav__links a[aria-current="location"]::after,
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__links a[aria-current="location"],
.nav__links a[aria-current="page"]{color:var(--ink)}

.nav__cta{
  --btn-bg:transparent;--btn-fg:var(--ink);
  --btn-edge:rgba(255,255,255,.52);
  border-color:rgba(34,29,24,.35);
  min-height:2.75rem;
}
.nav__cta:hover{--btn-bg:var(--ink);--btn-fg:var(--bone);border-color:var(--ink)}

.nav__toggle{
  display:none;
  width:2.9rem;height:2.9rem;margin-left:auto;
  background:none;border:0;cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:.4rem;
}
.nav__toggle span{
  display:block;width:1.35rem;height:1px;background:var(--ink);
  transition:transform .4s var(--ease),opacity .3s var(--ease),background .5s var(--ease);
}

/* scrolled state */
.nav.is-stuck{background:rgba(246,242,234,.96);box-shadow:0 1px 0 rgba(59,49,41,.1)}
@supports (backdrop-filter:blur(1px)){
  .nav.is-stuck{background:rgba(246,242,234,.9);backdrop-filter:blur(14px) saturate(1.1)}
}
.nav.is-stuck .nav__mark{color:var(--ink)}
.nav.is-stuck .nav__links a{color:var(--ink-soft)}
.nav.is-stuck .nav__links a:hover{color:var(--ink)}
.nav.is-stuck .nav__links a[aria-current="location"],
.nav.is-stuck .nav__links a[aria-current="page"]{color:var(--ink)}
.nav.is-stuck .nav__cta{--btn-fg:var(--ink);border-color:rgba(34,29,24,.35)}
.nav.is-stuck .nav__cta:hover{--btn-bg:var(--ink);--btn-fg:var(--bone);border-color:var(--ink)}
.nav.is-stuck .nav__toggle span{background:var(--ink)}

.nav__scrim{display:none}
.nav__panel{
  display:none;flex-direction:column;
  padding:.5rem var(--gut) 2.25rem;
  background:rgba(246,242,234,.97);
  border-top:1px solid rgba(59,49,41,.1);
}
@supports (backdrop-filter:blur(1px)){
  .nav__panel{background:rgba(246,242,234,.9);backdrop-filter:blur(16px)}
}
.nav__panel a{
  font-family:var(--display);font-size:1.6rem;color:var(--ink);
  text-decoration:none;padding:.85rem 0;
  border-bottom:1px solid rgba(59,49,41,.09);
}
.nav__panel a[aria-current="location"],
.nav__panel a[aria-current="page"]{color:var(--bronze)}
.nav__panel-cta{
  font-family:var(--sans)!important;font-size:.78rem!important;
  letter-spacing:.18em;text-transform:uppercase;
  margin-top:1.5rem;padding:1.05rem 1.5rem!important;
  background:var(--ink);color:var(--bone)!important;
  text-align:center;border-bottom:0!important;
}

.mobile-actions{display:none}

/* ── Hero ─────────────────────────────────────────────── */

/* October 12, 2026: rebuilt after the client's concept (a friend's StoryBrand
   homepage): the outcome as the headline, who it is for and where, one booking
   button, proof points, and Audrey, on the client's black-and-gold marble.
   The copy sits on the left over the deepest part of the wash; Audrey stands
   on the bottom edge at the right, sized so her head always clears the menu
   bar. --nav-h is replaced with the menu bar's measured height by main.js. */
.hero{
  --nav-h:4.75rem;
  --top:calc(var(--nav-h) + clamp(1.5rem,4vh,3rem));
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;
  min-height:100svh;
  padding:var(--top) var(--gut) 0;
  background:var(--ink);
  color:var(--bone);
}
.hero__scene{position:absolute;inset:-3% 0;z-index:0;background:var(--ink)}
.hero__scene picture,
.motion__media picture{width:100%;height:100%}
.hero__scene img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Deepest behind the copy, so the ivory and gold text keeps its contrast over
   the brightest gold vein; lighter around Audrey so the stone still shows. */
.hero__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(24,20,16,.9) 0%,rgba(24,20,16,.82) 40%,rgba(24,20,16,.42) 68%,rgba(24,20,16,.5) 100%),
    linear-gradient(180deg,rgba(24,20,16,.25),transparent 40%,rgba(24,20,16,.35));
}
.hero__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:end;column-gap:clamp(1.5rem,4vw,4rem);
}
.hero__copy{
  align-self:center;
  max-width:37rem;
  padding-bottom:clamp(3rem,10vh,6.5rem);
}
.hero__eyebrow{
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--champagne);
}
.hero__title{
  margin-top:clamp(1rem,2vw,1.5rem);
  font-family:var(--display);font-weight:400;
  font-size:clamp(3rem,6vw,5.9rem);
  line-height:.98;letter-spacing:-.02em;
  color:var(--bone);
  text-wrap:balance;
}
.hero__title em{font-style:italic;font-weight:500;color:#D7B56A}
/* Gold leaf, as on the dark sections. Darkest stop #D4B068 stays well above
   3:1 on the wash; the padding lets the gold reach the italic tails. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__title em{
    padding:0 .08em .14em .12em;margin:0 -.08em 0 -.12em;
    background:linear-gradient(100deg,#D4B068 0%,#F5E1A8 30%,#D8B66E 50%,#F0D89A 70%,#D4B068 100%);
    background-size:220% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
}
.hero__lede{
  margin-top:clamp(1.25rem,2.4vw,1.75rem);
  max-width:34ch;
  font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;
  color:rgba(237,230,218,.86);
}
.hero__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;
  margin-top:clamp(1.75rem,3vw,2.5rem);
}
.hero__cta{
  --btn-bg:#D7B56A;--btn-fg:var(--ink);
  --sheen:rgba(255,255,255,.5);--btn-edge:rgba(255,255,255,.4);
  --shine-delay:.8s;
  border-color:#D7B56A;
}
.hero__cta:hover{--btn-bg:var(--bone);--btn-fg:var(--ink);border-color:var(--bone)}
.hero__more{
  display:inline-flex;align-items:center;min-height:2.75rem;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--bone);text-decoration:none;
  border-bottom:1px solid rgba(215,181,106,.75);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.hero__more:hover{color:#E8CC88;border-bottom-color:currentColor}
.hero :focus-visible{outline-color:var(--champagne)}
/* Proof points: the concept's three, with the Google rating (SDM standard)
   linked down to the reviews. */
.hero__proof{
  display:flex;flex-wrap:wrap;gap:.55rem;
  margin-top:clamp(1.75rem,3vw,2.4rem);
}
.hero__proof li{
  display:inline-flex;align-items:center;
  min-height:2.75rem;padding:0 1.05rem;
  border:1px solid rgba(215,181,106,.42);border-radius:999px;
  background:rgba(24,20,16,.4);
  font-size:.8rem;line-height:1.2;letter-spacing:.02em;
  color:rgba(246,242,234,.92);
}
.hero__proof li:has(> a){padding:0}
.hero__proof a{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:2.75rem;padding:0 1.05rem;border-radius:999px;
  color:inherit;text-decoration:none;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.hero__proof a:hover{background:rgba(215,181,106,.16);color:var(--bone)}
.hero__stars{color:#D7B56A;letter-spacing:.06em;font-size:.85em}
/* Phones show the concept's shorter "12 years". */
.hero__long{display:inline}

/* Audrey: square portrait, her head about .07 down it, so a width equal to the
   room under the menu bar keeps all of her head in view at every size. */
.hero__portrait{
  position:relative;align-self:end;justify-self:center;
  width:min(118%,calc(100svh - var(--top)),50rem);
  margin:0;pointer-events:none;
  animation:hero-portrait-in .95s .08s var(--ease) both;
}
.hero__portrait::before{
  content:"";
  position:absolute;left:50%;top:1.5%;z-index:0;
  width:52%;height:49%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 42%,
    rgba(240,216,154,.34) 0%,
    rgba(215,181,106,.2) 34%,
    rgba(169,132,63,.08) 55%,
    transparent 75%);
  filter:blur(14px);
  opacity:.86;
  transform:translate3d(-50%,0,0);
}
.hero__portrait picture{position:relative;z-index:1;width:100%}
.hero__portrait img{
  width:100%;height:auto;
  filter:saturate(.88) sepia(.04) contrast(.98) drop-shadow(0 1.5rem 1.75rem rgba(34,29,24,.18));
}

@keyframes hero-portrait-in{
  from{opacity:0;transform:translate3d(0,1.5rem,0) scale(.985)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:no-preference){
  .hero__title em{animation:hero-gold-sweep 2.6s 1s var(--ease) both}
  .hero__portrait::before{
    animation:hero-halo-breathe 6.5s .8s ease-in-out infinite alternate;
  }
}
/* One slow pass of light across gold lettering, then it rests (also used by
   the gilt headings). */
@keyframes hero-gold-sweep{
  from{background-position:100% 0}
  to{background-position:0 0}
}
@keyframes hero-halo-breathe{
  from{opacity:.76;transform:translate3d(-50%,0,0) scale(.98)}
  to{opacity:.9;transform:translate3d(-50%,0,0) scale(1.035)}
}

/* ── The problem (October 12, 2026) ───────────────────── */
/* StoryBrand pass: straight after the hero the page names the visitor's
   problem before it talks about Audrey. Three pains on slabs of the white
   marble in the facts-strip language (hairline grid, bronze rule drawn in on
   reveal, the founder panel's gold diamond), then the turn to the guide. */
.problem{
  padding-block:clamp(4.5rem,9vw,8.5rem);
  background:
    linear-gradient(rgba(237,230,218,.5),rgba(237,230,218,.5)),
    var(--bone) var(--marble-white) 30% 60% / var(--marble-size);
  border-bottom:1px solid rgba(59,49,41,.12);
}
.problem__head{margin-bottom:clamp(2.75rem,6vw,4.5rem)}
.problem__head .display{
  max-width:19ch;margin-inline:auto;
  font-size:clamp(2.15rem,5vw,4.4rem);
}
.pains{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;overflow:hidden;
  background:rgba(59,49,41,.16);
  border:1px solid rgba(59,49,41,.16);
}
.pain{
  position:relative;isolation:isolate;
  padding:clamp(1.6rem,2.8vw,2.6rem);
  background:var(--bone) var(--marble-white) 14% 22% / var(--marble-size);
}
.pain:nth-child(2){background-position:62% 70%}
.pain:nth-child(3){background-position:90% 12%}
.pain::after{
  content:"";position:absolute;inset:0 auto auto 0;z-index:0;
  width:100%;height:2px;background:var(--bronze);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease);
}
.pains.is-in .pain::after{transform:scaleX(1)}
.pains.is-in .pain:nth-child(2)::after{transition-delay:.12s}
.pains.is-in .pain:nth-child(3)::after{transition-delay:.24s}
.pain > *{position:relative;z-index:1}
/* Body / Mind / Soul: the Feel. Live. Be. paths each pain belongs to. */
.pain__tag{
  display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bronze);
}
.pain__mark{
  display:block;flex:none;width:.45rem;height:.45rem;margin-left:.1rem;
  background:#A9843F;transform:rotate(45deg);
}
.pain p{margin-top:.8rem;max-width:30ch;color:var(--ink-soft)}
.problem__close{
  max-width:var(--max);margin:clamp(2.75rem,6vw,4.5rem) auto 0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.problem__turn{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.1;letter-spacing:-.01em;
  text-wrap:balance;
}
.problem__turn em{font-style:italic;color:var(--bronze)}
.problem__close .link-arrow{margin-top:1.4rem;align-self:center}
@media (max-width:820px){
  .pains{grid-template-columns:1fr}
}

/* ── Manifesto ────────────────────────────────────────── */

/* Audrey's credentials in the guide section, on the founder panel's diamonds. */
.creds{margin-top:1.4rem;display:grid;gap:.6rem}
.creds li{position:relative;padding-left:1.5rem;color:var(--ink);line-height:1.5}
.creds li::before{
  content:"";position:absolute;left:.15rem;top:.55em;
  width:.4rem;height:.4rem;background:#A9843F;transform:rotate(45deg);
}
.prose .creds + p{margin-top:1.15rem}
.manifesto__links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2rem}
.manifesto__links .link-arrow{margin-top:0}

/* The plan ends on the booking button (website review: "Button repeated"). */
.plan-cta{
  max-width:var(--max);margin:clamp(3rem,6vw,4.5rem) auto 0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.plan-cta .btn{
  max-width:100%;
  white-space:normal;
  text-align:center;
}
.plan-cta__note{margin-top:.85rem;font-size:.82rem;color:var(--ink-soft)}

.manifesto__grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
.manifesto__figure{
  position:sticky;top:7rem;align-self:start;
}
.manifesto__frame{
  position:relative;
  padding:0 0 clamp(1rem,2vw,1.5rem) clamp(1rem,2vw,1.5rem);
  overflow:visible;
}
.manifesto__frame::before{
  content:"";position:absolute;inset:auto auto 0 0;z-index:0;
  width:78%;height:74%;background:var(--oat);
}
.manifesto__frame picture{
  position:relative;z-index:1;overflow:hidden;
  background:var(--alabaster);
}
.manifesto__figure img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:92% center;
}
.manifesto__figure figcaption{
  margin:1rem 0 0 clamp(1rem,2vw,1.5rem);
  font-size:.85rem;line-height:1.5;
  color:var(--ink-soft);max-width:32ch;
}

/* ── The Vessel (dark) ────────────────────────────────── */

.section--dark{
  background:var(--umber);color:var(--alabaster);
  padding:var(--sec) var(--gut);
}
.section--dark .eyebrow{color:var(--champagne)}
.section--dark .lede{color:rgba(237,230,218,.74)}

.vessel__grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem);align-items:center;
}
.vessel__figure img{width:100%;aspect-ratio:2/1;object-fit:cover}

/* Theraphi photograph: lifted off the marble in a floating gilded frame, with a
   low gold light spilling onto the stone behind it. The reveal zoom is cropped
   by the picture, so the figure can let its frame, glow and shadow show. */
.vessel{overflow:hidden} /* keeps the glow from widening the page on phones */
.vessel__figure.reveal-media{
  position:relative;isolation:isolate;overflow:visible;
  padding:clamp(.65rem,1.2vw,1rem);
}
.vessel__figure::before{
  content:"";position:absolute;inset:0;z-index:1;
  border:2px solid #B08A44;
  border-image:linear-gradient(120deg,#8F6A2E 0%,#EBCF8C 22%,#B8904A 46%,#F5E1A8 70%,#9C7634 100%) 1;
  pointer-events:none;
}
.vessel__figure::after{
  content:"";position:absolute;inset:-26% -14%;z-index:-1;
  /* The photo covers the inner ~70% of this ellipse, so the light holds until
     just past its edge and fades out across the marble. */
  background:radial-gradient(ellipse closest-side,
    rgba(226,192,118,.42) 0%,
    rgba(226,192,118,.32) 66%,
    rgba(215,181,106,.12) 84%,
    transparent 100%);
  pointer-events:none;
}
.vessel__figure picture{
  position:relative;overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(240,216,154,.45),
    0 0 2.5rem rgba(226,192,118,.18),
    0 1.6rem 3.2rem rgba(10,8,6,.55);
  filter:contrast(1.07) saturate(1.1) brightness(1.08);
}
.vessel__text{display:flex;flex-direction:column;align-items:flex-start}

.spec{
  width:100%;margin-top:clamp(2.5rem,4vw,3.25rem);
  border-top:1px solid rgba(237,230,218,.2);
}
.spec li{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;
  justify-content:space-between;align-items:baseline;
  padding:1.05rem 0;
  border-bottom:1px solid rgba(237,230,218,.14);
}
.spec__k{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--champagne);
}
.spec__v{font-size:.95rem;color:rgba(237,230,218,.9);text-align:right}

/* ── Black marble surface ─────────────────────────────── */
/* Client-supplied black-and-gold marble (October 2026), cropped clear of the
   source poster's text and book-matched so tall sections never stretch it.
   The stone is decoration only; every word stays live text over a warm-ink
   scrim that keeps the lightest gold vein under AA contrast. */

.marble-surface{
  position:relative;isolation:isolate;
  background:var(--ink);
}
.marble-surface__stone{
  position:absolute;inset:0;z-index:-1;
  overflow:hidden;background:var(--ink);
}
.marble-surface__stone picture,
.marble-surface__stone img{width:100%;height:100%}
.marble-surface__stone img{object-fit:cover;object-position:center top}
.marble-surface__stone::after{
  content:"";position:absolute;inset:0;
  background:rgba(34,29,24,.88);
}
/* Polished gold edge, after the gold bands framing each section in the brief.
   Drawn as a border so it never competes with a section's own pseudo-elements,
   and sits inside border-box sizing so the hero stays one viewport tall. */
.gold-edge{
  border:0 solid #B08A44;
  border-image:linear-gradient(90deg,#7A5A27 0%,#D7B56A 18%,#A9843F 40%,#F0D89A 62%,#B08A44 82%,#7A5A27 100%) 1;
}
.gold-edge--both{border-top-width:3px;border-bottom-width:3px}
.gold-edge--top{border-top-width:3px}
.gold-edge--bottom{border-bottom-width:3px}

/* Theraphi: let the stone breathe beside the photograph, settle behind the copy. */
.vessel .marble-surface__stone::after{
  background:linear-gradient(90deg,
    rgba(34,29,24,.5) 0%,
    rgba(34,29,24,.58) 36%,
    rgba(34,29,24,.88) 49%,
    rgba(34,29,24,.88) 100%);
}

/* ── Protocol ─────────────────────────────────────────── */

/* The first visit as a gilded path (October 2026). A sticky step rail fills with
   gold as you read and jumps to any step; the numbers are gold medallions; the
   card nearest the middle of the screen lights up; on a precise pointer a card
   turns to black marble, spreading from wherever the cursor enters. Keyboard
   focus inside a card gives the same marble state. */

.journey{
  position:sticky;top:5.25rem;z-index:3;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:34rem;margin:0 auto clamp(1.75rem,3.5vw,2.75rem);
  padding:.6rem .75rem .55rem;
  border:1px solid rgba(169,132,63,.38);
  border-radius:999px;
  background:rgba(246,242,234,.92);
  box-shadow:0 .75rem 2rem rgba(59,49,41,.08);
}
@supports (backdrop-filter:blur(1px)){
  .journey{background:rgba(246,242,234,.8);backdrop-filter:blur(12px) saturate(1.05)}
}
/* Short screens (phones held sideways) keep the rail in place rather than
   pinning it, so the reading area isn't squeezed between three bars. */
@media (max-height:500px){
  .journey{position:relative;top:auto}
}
.journey li{position:relative;display:flex;justify-content:center}
/* Connector from the previous step; it fills with gold once this step is reached. */
.journey li + li::before{
  content:"";position:absolute;top:1.05rem;right:50%;width:100%;height:2px;
  margin-top:-1px;
  background:
    linear-gradient(90deg,#A9843F,#E3C47E) left center/0% 100% no-repeat,
    rgba(59,49,41,.16);
  transition:background-size .7s var(--ease);
}
.journey li.is-reached::before{background-size:100% 100%,auto}
.journey__node{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  min-height:2.75rem;
  color:var(--ink-soft);text-decoration:none;
}
.journey__dot{
  display:grid;place-items:center;
  width:2.1rem;height:2.1rem;border-radius:50%;
  border:1px solid rgba(169,132,63,.75);
  background-color:var(--bone);
  font-family:var(--display);font-size:.88rem;line-height:1;
  color:var(--bronze);
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .3s var(--ease);
}
.journey__label{
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  white-space:nowrap;
  transition:color .45s var(--ease);
}
.journey li.is-reached .journey__dot{
  border-color:#B8904A;
  background:linear-gradient(140deg,#F0D89A,#C9A35A 55%,#A9843F);
  color:var(--ink);
}
.journey__node[aria-current="step"] .journey__label,
.journey__node:hover .journey__label{color:var(--ink)}
.journey__node:hover .journey__dot{transform:scale(1.08);border-color:#B8904A}

.steps{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:1rem;
}
.step{
  --step-bg:rgba(237,230,218,.52);
  --step-pad:clamp(2rem,3.2vw,3rem);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;
  grid-column:span 4;
  min-height:clamp(18rem,24vw,21rem);
  padding:var(--step-pad);
  border:1px solid rgba(59,49,41,.15);
  /* A gold rule waits at the top edge and draws across when the card lights up. */
  background:
    linear-gradient(90deg,#A9843F,#F0D89A 45%,#C9A35A) left top/0% 2px no-repeat,
    var(--step-bg);
  scroll-margin-top:6rem;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease),background-size .8s var(--ease);
}
/* The concept's three steps (October 12, 2026) sit side by side; the middle
   card carries the deeper tint. */
.step:nth-child(2){--step-bg:rgba(221,208,188,.34)}
.step__num{
  display:grid;place-items:center;
  width:3.4rem;height:3.4rem;border-radius:50%;
  margin-bottom:clamp(1.75rem,3.2vw,2.75rem);
  border:1px solid rgba(169,132,63,.7);
  background-color:transparent;
  box-shadow:0 0 0 .3rem rgba(246,242,234,.55),0 0 0 calc(.3rem + 1px) rgba(169,132,63,.3);
  font-family:var(--display);font-size:1.3rem;line-height:1;
  color:var(--bronze);
  transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
}
.step h3{margin-bottom:1.15rem;transition:color .4s var(--ease) .08s}
.step p{color:var(--ink-soft);font-size:.97rem;transition:color .4s var(--ease) .08s}
/* Spacing sits on the paragraph so the link's focus outline hugs the link
   instead of reaching up through the copy. */
.step .link-arrow{margin-top:auto;font-size:.75rem;transition:color .4s var(--ease) .08s}
.step p:has(+ .link-arrow){padding-bottom:1.75rem}

.step--wide{
  align-items:flex-start;text-align:left;
}
.step--wide p{max-width:44ch}
/* The note runs the full width, like the timeline above it. */
.step--wide .step__note{max-width:none}
.step__note{
  margin-top:auto;font-size:.9rem;color:var(--clay);
  padding-top:1.25rem;border-top:1px solid rgba(59,49,41,.14);
  transition:color .4s var(--ease) .08s,border-color .4s var(--ease) .08s;
}
.step p:has(+ .step__note){padding-bottom:1.25rem}
.step__note a{color:inherit}

/* Second pass on the cards (October 7, 2026): each card carries a gold line
   emblem for its step - a voice for the call, a brain-wave trace for the map,
   sound rings for the session, rising readings for the follow-through. It draws
   itself in when the card lights and keeps a slow loop going while it stays
   lit. Card 01 lists the call at a glance; card 03 compares the two sessions
   with a gold slider. On a precise pointer the card tilts toward the cursor. */

.step .step__emblem{
  --em:4.3rem;
  position:absolute;z-index:1;
  top:calc(var(--step-pad) - (var(--em) - 3.4rem) / 2);
  right:calc(var(--step-pad) - (var(--em) - 3.4rem) / 2);
  width:var(--em);height:var(--em);
  overflow:visible;pointer-events:none;
  color:#A9843F;
  fill:none;stroke:currentColor;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;
  transform:translate3d(calc(var(--px,0) * 4px),calc(var(--py,0) * 4px),0);
  transition:color .4s var(--ease) .08s,transform .3s var(--ease);
}
.step__emblem .em-ghost{opacity:.28}
.step__emblem .em-dot{fill:currentColor;stroke:none}
.step__emblem .em-bars,
.step__emblem .em-bar,
.step__emblem .em-ripple{transform-box:fill-box;transform-origin:center}
.step__emblem .em-pulse,
.step__emblem .em-ripple{opacity:0;transition:opacity .4s var(--ease)}
/* A short bright stretch of line that runs along the trace while lit. The
   gaps are longer than the path, so no stray end cap shows between runs. */
.step__emblem .em-pulse{stroke-width:2.4;stroke-dasharray:.16 1.25;stroke-dashoffset:.17}

/* Drawn by default; once JavaScript confirms motion is welcome, each emblem
   waits undrawn (only its faint ring shows) until its card lights. */
.motion-ready .step__emblem .em-draw{
  stroke-dasharray:1 2;stroke-dashoffset:1.02;
  transition:stroke-dashoffset .6s var(--ease);
}
.motion-ready .step__emblem .em-bars{
  transform:scaleY(0);
  transition:transform .5s var(--ease);
}
.motion-ready .step__emblem .em-dot{opacity:0;transition:opacity .4s var(--ease)}

.motion-ready :is(.step.is-current,.step:has(:focus-visible)) .step__emblem .em-draw{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.3s var(--ease);
}
.motion-ready :is(.step.is-current,.step:has(:focus-visible)) .step__emblem .em-draw + .em-draw{transition-delay:.25s}
.motion-ready :is(.step.is-current,.step:has(:focus-visible)) .step__emblem .em-draw + .em-draw + .em-draw{transition-delay:.4s}
.motion-ready :is(.step.is-current,.step:has(:focus-visible)) .step__emblem .em-draw + .em-draw + .em-draw + .em-draw{transition-delay:.55s}
.motion-ready :is(.step.is-current,.step:has(:focus-visible)) .step__emblem .em-bars{
  transform:none;
  transition:transform .9s var(--ease) .35s;
}
.motion-ready :is(.step.is-current,.step:has(:focus-visible)) .step__emblem .em-dot{
  opacity:1;
  transition:opacity .5s var(--ease) .75s;
}

@keyframes em-talk{
  from{transform:scaleY(1)}
  to{transform:scaleY(.42)}
}
@keyframes em-run{
  from{stroke-dashoffset:.17}
  to{stroke-dashoffset:-1.03}
}
@keyframes em-ripple{
  from{transform:scale(.35);stroke-opacity:.95}
  to{transform:scale(1.5);stroke-opacity:0}
}
/* The loops pause wherever they are when a card dims and pick up again when it
   lights. Visibility rides on opacity, which the loops never touch, so a paused
   pulse or ripple can't be left hanging on screen. */
@media (prefers-reduced-motion:no-preference){
  .step__emblem .em-bar{animation:em-talk 1.1s var(--ease) infinite alternate paused}
  .step__emblem .em-bar:nth-child(2n){animation-duration:.8s;animation-delay:-.25s}
  .step__emblem .em-bar:nth-child(3n){animation-duration:1.35s;animation-delay:-.6s}
  .step__emblem .em-bar:nth-child(4){animation-duration:.95s;animation-delay:-.45s}
  .step__emblem .em-pulse{animation:em-run 2.6s linear infinite paused}
  .step__emblem .em-ripple{animation:em-ripple 2.8s var(--ease) infinite paused}
  :is(.step.is-current,.step:has(:focus-visible)) .step__emblem :is(.em-bar,.em-pulse,.em-ripple){animation-play-state:running}
  :is(.step.is-current,.step:has(:focus-visible)) .step__emblem :is(.em-pulse,.em-ripple){opacity:1;transition-delay:1s}
}

/* At a glance: short facts set as gold-edged pills. In a card footer they sit
   to the left of the link when there's room, and the link drops below when
   there isn't. */
.step__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.6rem 1.75rem;
  width:100%;margin-top:auto;
}
.step .step__foot .link-arrow{margin-top:0}
.step__facts{display:flex;flex-wrap:wrap;gap:.45rem}
.step__facts li{
  padding:.3rem .75rem;
  border:1px solid rgba(169,132,63,.42);border-radius:999px;
  font-size:.74rem;font-weight:500;letter-spacing:.04em;line-height:1.35;
  color:var(--ink-soft);
  transition:color .4s var(--ease) .08s,border-color .4s var(--ease) .08s;
}
.step p:has(+ .step__foot),
.step p:has(+ .choose){padding-bottom:1.5rem}

/* Card 03: a two-way gold slider compares the sessions. Plain radio buttons
   underneath, so it works with arrow keys and without JavaScript. */
.choose{margin:auto 0 0;padding:0;border:0;min-width:0;width:100%}
.choose__tabs{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  padding:.25rem;
  border:1px solid rgba(169,132,63,.45);border-radius:999px;
  background-color:rgba(246,242,234,.6);
  transition:background-color .4s var(--ease) .08s,border-color .4s var(--ease) .08s;
}
.choose__thumb{
  position:absolute;z-index:0;top:.25rem;bottom:.25rem;left:.25rem;
  width:calc(50% - .25rem);
  border-radius:999px;
  background:linear-gradient(140deg,#F0D89A,#C9A35A 55%,#A9843F);
  box-shadow:0 .4rem 1rem rgba(126,96,56,.22);
  transition:transform .5s var(--ease);
}
.choose:has(input[value="audrey"]:checked) .choose__thumb{transform:translate3d(100%,0,0)}
.choose__opt{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  min-height:2.75rem;padding:.35rem .9rem;
  border-radius:999px;
  font-size:.8rem;font-weight:500;letter-spacing:.02em;line-height:1.2;text-align:center;
  color:var(--ink-soft);cursor:pointer;
  transition:color .35s var(--ease);
}
.choose__opt input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;
}
.choose__opt:hover,
.choose__opt:has(input:checked){color:var(--ink)}
.choose__opt:has(input:focus-visible){outline:2px solid var(--bronze);outline-offset:3px}
.choose__panels{display:grid;margin-top:1.15rem}
.choose__panel{
  grid-area:1/1;margin-top:0;
  transition:opacity .45s var(--ease) .1s,transform .45s var(--ease) .1s,visibility 0s linear 0s;
}
.choose:has(input[value="theraphi"]:checked) [data-session="audrey"],
.choose:has(input[value="audrey"]:checked) [data-session="theraphi"]{
  opacity:0;visibility:hidden;transform:translate3d(0,.5rem,0);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;
}

/* Card 04: the follow-through as a three-stop timeline. Picking a stop fills
   the gold line up to it, lights the readings gathered so far and slides a
   marker along; the caption restates the card's own sentence. Radio buttons
   again, so arrow keys and no-JavaScript both work. The readings are a neutral
   wave on purpose: nothing here suggests a result. main.js plays it through
   once the first time the card lights (not under reduced motion). */
.trail{
  --p:0;--dot:.875rem;
  margin:0 0 1.5rem;padding:0;border:0;min-width:0;width:100%;
}
.trail:has(input[value="home"]:checked){--p:.5}
.trail:has(input[value="next"]:checked){--p:1}
.step p:has(+ .trail){padding-bottom:1.5rem}
.trail__chart{
  position:relative;height:2.75rem;
  margin:0 calc(var(--dot) / 2);
}
.trail__trace{
  position:absolute;inset:0 0 .45rem;width:100%;height:calc(100% - .45rem);
  fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;
  color:rgba(169,132,63,.3);
  transition:color .4s var(--ease) .08s;
}
.trail__trace path{vector-effect:non-scaling-stroke}
.trail__trace--lit{
  color:#A9843F;stroke-width:1.6;
  clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0);
  transition:clip-path .9s var(--ease),color .4s var(--ease) .08s;
}
.trail__line{
  position:absolute;left:0;right:0;bottom:0;height:2px;margin-bottom:-1px;
  background:rgba(59,49,41,.16);
  transition:background-color .4s var(--ease) .08s;
}
.trail__fill{
  position:absolute;inset:0;
  background:linear-gradient(90deg,#A9843F,#E3C47E);
  transform-origin:left center;transform:scaleX(var(--p));
  transition:transform .9s var(--ease);
}
.trail__now{
  position:absolute;bottom:0;left:calc(var(--p) * 100%);
  width:1px;height:100%;margin-left:-.5px;
  background:linear-gradient(to top,#C9A35A,rgba(201,163,90,0));
  transition:left .9s var(--ease);
}
.trail__stops{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:calc(var(--dot) / -2);
}
.trail__stop{
  position:relative;
  display:flex;flex-direction:column;gap:.45rem;
  min-height:2.75rem;
  font-size:.74rem;font-weight:500;letter-spacing:.04em;line-height:1.25;
  color:var(--ink-soft);cursor:pointer;
  transition:color .35s var(--ease);
}
.trail__stop:nth-child(1){align-items:flex-start;text-align:left}
.trail__stop:nth-child(2){align-items:center;text-align:center}
.trail__stop:nth-child(3){align-items:flex-end;text-align:right}
.trail__stop::before{
  content:"";flex:none;
  width:var(--dot);height:var(--dot);border-radius:50%;
  border:1px solid rgba(169,132,63,.75);
  background-color:var(--bone);
  transition:background-color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),transform .3s var(--ease);
}
.trail__stop input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;
}
.trail__stop:hover,
.trail__stop:has(input:checked){color:var(--ink)}
.trail__stop:hover::before{transform:scale(1.15)}
/* Stops up to and including the chosen one turn gold; the chosen one gets a halo. */
.trail__stop:has(input:checked)::before,
.trail__stop:has(~ .trail__stop input:checked)::before{
  border-color:#B8904A;
  background:linear-gradient(140deg,#F0D89A,#C9A35A 55%,#A9843F);
}
.trail__stop:has(input:checked)::before{box-shadow:0 0 0 .3rem rgba(201,163,90,.22)}
.trail__stop:has(input:focus-visible){outline:2px solid var(--bronze);outline-offset:3px}
.trail__notes{display:grid;margin-top:.6rem}
.trail__note{
  grid-area:1/1;
  font-family:var(--display);font-style:italic;font-size:1.05rem;line-height:1.35;
  color:var(--ink);
  transition:opacity .45s var(--ease) .1s,transform .45s var(--ease) .1s,visibility 0s linear 0s,color .4s var(--ease) .08s;
}
.trail:has(input[value="visit"]:not(:checked)) [data-stop="visit"],
.trail:has(input[value="home"]:not(:checked)) [data-stop="home"],
.trail:has(input[value="next"]:not(:checked)) [data-stop="next"]{
  opacity:0;visibility:hidden;transform:translate3d(0,.4rem,0);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s;
}

/* Lit: the card nearest the middle of the screen (set by main.js), or the
   card holding keyboard focus. */
.step.is-current,
.step:has(:focus-visible){
  background-size:100% 2px;
  border-color:rgba(169,132,63,.5);
  box-shadow:0 1.25rem 2.5rem rgba(59,49,41,.08);
}
.step.is-current .step__num,
.step:has(:focus-visible) .step__num{
  border-color:#B8904A;
  background:linear-gradient(140deg,#F0D89A,#C9A35A 55%,#A9843F);
  color:var(--ink);
}

/* Black marble layer: spreads from the cursor on hover, from the centre on focus.
   The warm spotlight sits above it and the content above both. */
.step::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(rgba(24,20,16,.86),rgba(24,20,16,.9));
  clip-path:circle(0% at var(--spot-x) var(--spot-y));
  transition:clip-path .75s var(--ease);
}
.step.spotlight-card::before{z-index:1}
.step:has(:focus-visible)::after{clip-path:circle(160% at 50% 50%)}
.step:has(:focus-visible) h3{color:var(--bone)}
.step:has(:focus-visible) p{color:rgba(237,230,218,.84)}
.step:has(:focus-visible) .link-arrow,
.step:has(:focus-visible) p a{color:#E8CC88}
.step:has(:focus-visible) .step__note{color:var(--champagne);border-top-color:rgba(237,230,218,.2)}
.step:has(:focus-visible) :focus-visible{outline-color:var(--champagne)}
.step:has(:focus-visible) .step__num{box-shadow:0 0 0 .3rem transparent,0 0 0 calc(.3rem + 1px) rgba(215,181,106,.45)}
.step:has(:focus-visible) .step__emblem{color:#E3C47E}
.step:has(:focus-visible) .step__facts li{color:rgba(237,230,218,.84);border-color:rgba(215,181,106,.4)}
.step:has(:focus-visible) .choose__tabs{background-color:rgba(246,242,234,.06);border-color:rgba(215,181,106,.5)}
.step:has(:focus-visible) .choose__opt{color:rgba(237,230,218,.84)}
.step:has(:focus-visible) .choose__opt:has(input:checked){color:var(--ink)}
.step:has(:focus-visible) .choose__opt:has(input:focus-visible){outline-color:var(--champagne)}
.step:has(:focus-visible) .trail__trace{color:rgba(227,196,126,.3)}
.step:has(:focus-visible) .trail__trace--lit{color:#E3C47E}
.step:has(:focus-visible) .trail__line{background-color:rgba(237,230,218,.2)}
.step:has(:focus-visible) .trail__stop{color:rgba(237,230,218,.8)}
.step:has(:focus-visible) .trail__stop:has(input:checked){color:var(--bone)}
.step:has(:focus-visible) :where(.trail__stop)::before{background-color:#18140F;border-color:rgba(215,181,106,.7)}
.step:has(:focus-visible) .trail__stop:has(input:focus-visible){outline-color:var(--champagne)}
.step:has(:focus-visible) .trail__note{color:var(--bone)}

@media (hover:hover) and (pointer:fine){
  .step::after{
    background:
      linear-gradient(rgba(24,20,16,.84),rgba(24,20,16,.9)),
      url("../assets/images/marble-black-b.webp") center/cover;
  }
  .steps .step:hover{
    background-size:100% 2px;
    border-color:rgba(215,181,106,.6);
    box-shadow:0 1.5rem 3rem rgba(24,20,16,.18);
  }
  .step:hover::after{clip-path:circle(160% at var(--spot-x) var(--spot-y))}
  .step:hover h3{color:var(--bone)}
  .step:hover p{color:rgba(237,230,218,.84)}
  .step:hover .link-arrow,
  .step:hover p a{color:#E8CC88}
  .step:hover .step__note{color:var(--champagne);border-top-color:rgba(237,230,218,.2)}
  .step:hover .step__num{
    border-color:#B8904A;
    background:linear-gradient(140deg,#F0D89A,#C9A35A 55%,#A9843F);
    color:var(--ink);
    box-shadow:0 0 0 .3rem transparent,0 0 0 calc(.3rem + 1px) rgba(215,181,106,.45);
  }
  .step:hover .step__emblem{color:#E3C47E}
  .step:hover .step__facts li{color:rgba(237,230,218,.84);border-color:rgba(215,181,106,.4)}
  .step:hover .choose__tabs{background-color:rgba(246,242,234,.06);border-color:rgba(215,181,106,.5)}
  .step:hover .choose__opt{color:rgba(237,230,218,.84)}
  .step:hover .choose__opt:hover{color:var(--bone)}
  .step:hover .choose__opt:has(input:checked){color:var(--ink)}
  .step:hover .choose__opt:has(input:focus-visible){outline-color:var(--champagne)}
  .step:hover .trail__trace{color:rgba(227,196,126,.3)}
  .step:hover .trail__trace--lit{color:#E3C47E}
  .step:hover .trail__line{background-color:rgba(237,230,218,.2)}
  .step:hover .trail__stop{color:rgba(237,230,218,.8)}
  .step:hover .trail__stop:hover,
  .step:hover .trail__stop:has(input:checked){color:var(--bone)}
  .step:hover :where(.trail__stop)::before{background-color:#18140F;border-color:rgba(215,181,106,.7)}
  .step:hover .trail__stop:has(input:focus-visible){outline-color:var(--champagne)}
  .step:hover .trail__note{color:var(--bone)}

  /* Hovering lights the emblem as well. */
  .motion-ready .step:hover .step__emblem .em-draw{
    stroke-dashoffset:0;
    transition:stroke-dashoffset 1.3s var(--ease);
  }
  .motion-ready .step:hover .step__emblem .em-draw + .em-draw{transition-delay:.25s}
  .motion-ready .step:hover .step__emblem .em-draw + .em-draw + .em-draw{transition-delay:.4s}
  .motion-ready .step:hover .step__emblem .em-draw + .em-draw + .em-draw + .em-draw{transition-delay:.55s}
  .motion-ready .step:hover .step__emblem .em-bars{transform:none;transition:transform .9s var(--ease) .35s}
  .motion-ready .step:hover .step__emblem .em-dot{opacity:1;transition:opacity .5s var(--ease) .75s}
}

/* The tilt: a couple of degrees toward the cursor, with the shadow falling
   away from it. main.js feeds the pointer position in as --px / --py (-1 to 1)
   and the angles as --tilt-x / --tilt-y. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .step:hover .step__emblem :is(.em-bar,.em-pulse,.em-ripple){animation-play-state:running}
  .step:hover .step__emblem :is(.em-pulse,.em-ripple){opacity:1;transition-delay:1s}
  .steps .step:hover{
    transform:perspective(64rem) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
    box-shadow:calc(var(--px,0) * -1rem) calc(1.6rem - var(--py,0) * .6rem) 3.25rem rgba(24,20,16,.22);
    transition:transform .2s ease-out,border-color .4s var(--ease),box-shadow .25s ease-out,background-size .8s var(--ease);
  }
}

/* ── Motion ───────────────────────────────────────────── */

/* White marble band. White text over pale stone measured 1.5-2.6:1 (October
   2026), so the stone now carries a bone wash that deepens where the copy sits,
   and the copy is ink: the white marble reads as white, the words pass AA. */
.motion{
  position:relative;
  min-height:clamp(28rem,45svh,38rem);
  display:grid;align-items:end;
  overflow:hidden;background:var(--bone);
}
.motion__media{
  position:absolute;inset:0;
  width:100%;height:100%;overflow:hidden;background:var(--bone);
}
.motion__media img{width:100%;height:100%;object-fit:cover}
/* Since October 8, 2026 the copy sits on a frosted glass panel, which carries
   the contrast, so this wash is lighter than it was and more of the stone shows
   around the panel. */
.motion::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(246,242,234,.12) 0%,
    rgba(246,242,234,.38) 45%,
    rgba(246,242,234,.48) 100%);
}

.motion__caption{
  position:relative;z-index:2;width:100%;
  max-width:var(--max);margin:0 auto;
  padding:clamp(3rem,6vw,5.5rem) var(--gut);
  color:var(--ink);
}
/* Frosted ivory glass, so the words separate from the stone and read as raised
   off it: the glass softens the veins behind them, a gold hairline and an inner
   gold rule edge it (the founder panel's language), and a soft shadow lifts it.
   Reduced transparency gives a solid bone panel. */
.motion__panel{
  position:relative;
  /* The heading's column takes the width its lines need, so it stays on two
     lines on wide screens; the paragraph takes the rest. */
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
  padding:clamp(1.75rem,3.6vw,3.25rem);
  border:1px solid rgba(169,132,63,.5);
  background:rgba(246,242,234,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 .6rem 1.4rem rgba(59,49,41,.08),
    0 2.25rem 4.5rem -1rem rgba(59,49,41,.24);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .motion__panel{
    background:rgba(246,242,234,.68);
    -webkit-backdrop-filter:blur(14px) saturate(1.06);
    backdrop-filter:blur(14px) saturate(1.06);
  }
}
.motion__panel::before{
  content:"";position:absolute;inset:.5rem;pointer-events:none;
  border:1px solid rgba(201,163,90,.32);
}
.motion__caption .display em{font-style:italic;color:var(--bronze)}
.motion__caption p{color:var(--ink-soft);max-width:44ch}
/* The band's heading (October 7-8, 2026): larger and a touch heavier so
   Bodoni's hairlines hold up; the italic line a deeper bronze that parts from
   the gold veins; a short gold rule above it; and a light edge on top with a
   soft shadow below, so the letters sit raised on the glass. */
.motion__caption #ethos-h{
  font-size:clamp(2.2rem,4.6vw,4rem);
  font-weight:500;
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    0 .08em .2em rgba(59,49,41,.16);
}
.motion__caption #ethos-h em{color:#5A4122;font-weight:500}
.motion__caption #ethos-h::before{
  content:"";display:block;
  width:3.5rem;height:2px;margin-bottom:clamp(1rem,1.8vw,1.5rem);
  background:linear-gradient(90deg,#A9843F,#F0D89A 45%,#C9A35A);
  box-shadow:0 1px 2px rgba(59,49,41,.18);
}

/* ── The House ────────────────────────────────────────── */

/* Technology heading, second pass (October 8, 2026). It sat flat on plain bone
   with half its row empty. Now the section opens in a soft pool of light that
   falls off to a warmer shade, so the heading stands in its own lit field; the
   letters are lifted by a light top edge and layered soft shadows; and the
   intro moves up beside the heading, behind a gold hairline, filling the row. */
.house{position:relative;isolation:isolate}
.house::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#EEE6D9 0%,rgba(246,242,234,0) clamp(24rem,46vw,38rem));
}
.house__head{
  position:relative;
  max-width:var(--max);margin:0 auto clamp(2.75rem,5vw,4rem);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(2rem,6vw,5.5rem);align-items:end;
}
/* The light pool: brightest just behind the heading, gone before the edges. */
.house__head::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:clamp(-6rem,-7vw,-3rem) calc(-1 * var(--gut)) clamp(-5rem,-6vw,-2.5rem);
  background:radial-gradient(ellipse 58% 72% at 27% 50%,
    rgba(255,253,249,.98) 0%,rgba(255,253,249,.7) 38%,rgba(255,253,249,0) 72%);
}
/* The heading carries the gilt accent (see "Gilt italic accent" under the type
   primitives). The shadows sit in text-shadow, not filter, because the in-view
   reveal animates filter on this element. */
.house__head h2{
  font-weight:500;
  text-shadow:
    0 -1px 0 rgba(255,255,255,.75),
    0 .025em .03em rgba(59,49,41,.2),
    0 .1em .22em rgba(59,49,41,.16),
    0 .32em .85em rgba(59,49,41,.12);
}
/* The gold italic is painted by a clipped gradient, which a text-shadow would
   cover, so it takes the same lift as a drop-shadow filter instead. */
.house__head h2 em.gilt{
  display:inline-block;text-shadow:none;
  filter:
    drop-shadow(0 .025em .03em rgba(59,49,41,.22))
    drop-shadow(0 .1em .2em rgba(59,49,41,.15))
    drop-shadow(0 .3em .7em rgba(59,49,41,.1));
}
.house__intro{
  margin-top:0;max-width:none;
  padding:0 0 .5rem clamp(1.5rem,2.6vw,2.4rem);
  border-left:1px solid rgba(169,132,63,.5);
}
.house__intro p:first-child{
  font-size:clamp(1.02rem,.9rem + .4vw,1.2rem);line-height:1.6;color:var(--ink-soft);
}
.house__intro .wellness-note{margin-top:1.25rem}

/* Single column: no honest photograph of this equipment exists, and the
   nine-row list is the section's real content. */
.house__split{max-width:var(--max);margin:0 auto}
/* Device plate - the source is a white-background product frame, so it is set
   inside a bone panel rather than cropped edge-to-edge. */

/* Technology cards, "more fun" pass (October 8, 2026). Each tool carries a gold
   line emblem that draws itself in as the cards cascade onto the screen. A
   stage picker above the grid (the intro's own words: assessment, sessions,
   follow-through) lights the matching tools; every card names its stage too,
   so nothing depends on the picker. On a precise pointer a card turns to black
   marble from the cursor, tilts toward it and its emblem comes alive, as the
   first-visit cards do. No-JavaScript and reduced motion show it all at rest. */

/* The stage picker: gold-edged pills, the chosen one filled with gold. Plain
   radio buttons underneath, so arrow keys and no-JavaScript both work. */
.tools-filter{margin:0 0 clamp(1.25rem,2.4vw,1.75rem);padding:0;border:0;min-width:0}
.tools-filter__legend{
  padding:0;margin-bottom:.8rem;
  font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay);
}
.tools-filter__opts{display:flex;flex-wrap:wrap;gap:.5rem}
.tools-filter__opt{
  position:relative;
  display:inline-flex;align-items:center;gap:.55rem;
  min-height:2.75rem;padding:.35rem .5rem .35rem 1.15rem;
  border:1px solid rgba(169,132,63,.45);border-radius:999px;
  background-color:rgba(246,242,234,.72);
  font-size:.82rem;font-weight:500;letter-spacing:.02em;line-height:1.2;
  color:var(--ink-soft);cursor:pointer;
  transition:color .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.tools-filter__opt input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  border-radius:999px;opacity:0;cursor:pointer;
}
.tools-filter__n{
  display:grid;place-items:center;
  min-width:1.6rem;height:1.6rem;padding:0 .4rem;
  border:1px solid rgba(169,132,63,.5);border-radius:999px;
  font-family:var(--display);font-size:.85rem;line-height:1;
  color:var(--bronze);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.tools-filter__opt:hover{color:var(--ink);border-color:#B8904A}
.tools-filter__opt:has(input:checked){
  color:var(--ink);border-color:#B8904A;
  background:linear-gradient(140deg,#F0D89A,#C9A35A 55%,#A9843F);
  box-shadow:0 .4rem 1rem rgba(126,96,56,.22);
}
.tools-filter__opt:has(input:checked) .tools-filter__n{color:var(--ink);border-color:rgba(34,29,24,.4)}
.tools-filter__opt:has(input:focus-visible){outline:2px solid var(--bronze);outline-offset:3px}

.house__facts{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:1rem;
}
.house__facts > div{
  --tool-bg:rgba(237,230,218,.46);
  --em:clamp(3.4rem,4.5vw,4.25rem);
  grid-column:span 4;
  display:flex;flex-direction:column;
  min-height:clamp(11rem,13vw,12.5rem);
  padding:clamp(1.25rem,2.2vw,1.8rem);
  border:1px solid rgba(59,49,41,.14);
  /* A gold rule waits at the top edge and draws across when the card lights. */
  background:
    linear-gradient(90deg,#A9843F,#F0D89A 45%,#C9A35A) left top/0% 2px no-repeat,
    var(--tool-bg);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease),background-size .8s var(--ease);
}
.house__facts > div:nth-child(1){grid-column:span 6}
.house__facts > div:nth-child(2),
.house__facts > div:nth-child(3){grid-column:span 3}
.house__facts > div:nth-child(4),
.house__facts > div:nth-child(5),
.house__facts > div:nth-child(6){grid-column:span 4}
.house__facts > div:nth-child(7){grid-column:span 3}
.house__facts > div:nth-child(8){grid-column:span 4}
.house__facts > div:nth-child(9){grid-column:span 5}
.house__facts > div:nth-child(1),
.house__facts > div:nth-child(9){--tool-bg:var(--alabaster)}
/* Cascade order for the entrance. */
.house__facts > div:nth-child(2){--i:1}
.house__facts > div:nth-child(3){--i:2}
.house__facts > div:nth-child(4){--i:3}
.house__facts > div:nth-child(5){--i:4}
.house__facts > div:nth-child(6){--i:5}
.house__facts > div:nth-child(7){--i:6}
.house__facts > div:nth-child(8){--i:7}
.house__facts > div:nth-child(9){--i:8}
.house__facts dt{
  min-height:calc(var(--em) - .5rem);
  padding-right:calc(var(--em) + .75rem);
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);
  transition:color .4s var(--ease) .08s;
}
.house__facts dd{
  max-width:28ch;margin:auto 0 0;padding-top:1.25rem;
  font-family:var(--display);font-size:clamp(1.1rem,1.6vw,1.35rem);
  line-height:1.2;text-align:left;
  transition:color .4s var(--ease) .08s;
}
.house__facts .tool__stages{
  max-width:none;margin-top:.85rem;padding-top:0;
  font-family:var(--sans);font-size:.74rem;font-weight:500;letter-spacing:.04em;line-height:1.3;
  color:var(--ink-soft);
}
.tool__stages ul{display:flex;flex-wrap:wrap;gap:.35rem 1rem}
.tool__stages li{display:inline-flex;align-items:center;gap:.45rem;transition:color .4s var(--ease) .08s}
.tool__stages li::before{
  content:"";flex:none;width:.42rem;height:.42rem;border-radius:50%;
  border:1px solid #A9843F;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}

/* The emblem sits in the card's top corner, opposite the name. */
.tool__emblem{
  position:absolute;top:-.6rem;right:-.55rem;
  width:var(--em);height:var(--em);
  overflow:visible;pointer-events:none;
  color:#A9843F;
  fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
  transform:translate3d(calc(var(--px,0) * 4px),calc(var(--py,0) * 4px),0);
  transition:color .4s var(--ease) .08s,opacity .4s var(--ease),transform .3s var(--ease);
}
.tool__emblem .em-ghost{opacity:.28}
.tool__emblem .em-dot{fill:currentColor;stroke:none}
.tool__emblem .em-ripple{transform-box:fill-box;transform-origin:center}
.tool__emblem .em-pulse,
.tool__emblem .em-ripple{opacity:0;transition:opacity .4s var(--ease)}
.tool__emblem .em-pulse{stroke-width:2.4;stroke-dasharray:.16 1.25;stroke-dashoffset:.17}

/* Entrance: the grid itself stays put and the cards cascade in, each emblem
   drawing itself just after its card lands. Only once JavaScript confirms
   motion is welcome; otherwise everything is simply there. */
.motion-ready main > section:not(.hero) .house__facts.reveal{opacity:1;transform:none;filter:none}
.motion-ready .house__facts:not(.is-in) > div{opacity:0}
@keyframes tool-in{
  from{opacity:0;transform:translate3d(0,1.25rem,0) scale(.98)}
}
.motion-ready .house__facts.is-in > div{animation:tool-in .8s var(--ease) calc(var(--i,0) * 70ms) backwards}
.motion-ready .tool__emblem .em-draw{
  stroke-dasharray:1 2;stroke-dashoffset:1.02;
  transition:stroke-dashoffset 1.3s var(--ease) calc(var(--i,0) * 70ms + .45s + var(--d,0s));
}
.tool__emblem .em-draw + .em-draw{--d:.2s}
.tool__emblem .em-draw + .em-draw + .em-draw{--d:.35s}
.tool__emblem .em-draw + .em-draw + .em-draw + .em-draw{--d:.5s}
.tool__emblem .em-draw + .em-draw + .em-draw + .em-draw + .em-draw{--d:.65s}
.motion-ready .house__facts.is-in .tool__emblem .em-draw{stroke-dashoffset:0}
.motion-ready .tool__emblem .em-dot{
  opacity:0;
  transition:opacity .5s var(--ease) calc(var(--i,0) * 70ms + 1.4s);
}
.motion-ready .house__facts.is-in .tool__emblem .em-dot{opacity:1}

/* Lit by the stage picker: the gold rule draws across, the edge turns gold
   and the card lifts. The others quieten without dropping below AA. A card
   under the pointer is left to its hover state. */
:is(
  .house__text:has(input[name="tool-stage"][value="assess"]:checked) .tool[data-stage~="assess"],
  .house__text:has(input[name="tool-stage"][value="session"]:checked) .tool[data-stage~="session"],
  .house__text:has(input[name="tool-stage"][value="follow"]:checked) .tool[data-stage~="follow"]
):not(:hover){
  background-size:100% 2px;
  border-color:rgba(169,132,63,.62);
  box-shadow:inset 0 0 0 1px rgba(240,216,154,.35),0 1.1rem 2.4rem rgba(59,49,41,.12);
  transform:translate3d(0,-.3rem,0);
}
:is(
  .house__text:has(input[name="tool-stage"][value="assess"]:checked) .tool:not([data-stage~="assess"]),
  .house__text:has(input[name="tool-stage"][value="session"]:checked) .tool:not([data-stage~="session"]),
  .house__text:has(input[name="tool-stage"][value="follow"]:checked) .tool:not([data-stage~="follow"])
):not(:hover){
  --tool-bg:rgba(237,230,218,.18);
  border-color:rgba(59,49,41,.08);
}
:is(
  .house__text:has(input[name="tool-stage"][value="assess"]:checked) .tool:not([data-stage~="assess"]),
  .house__text:has(input[name="tool-stage"][value="session"]:checked) .tool:not([data-stage~="session"]),
  .house__text:has(input[name="tool-stage"][value="follow"]:checked) .tool:not([data-stage~="follow"])
):not(:hover) :is(dd,.tool__emblem){color:var(--ink-soft)}
:is(
  .house__text:has(input[name="tool-stage"][value="assess"]:checked) .tool:not([data-stage~="assess"]),
  .house__text:has(input[name="tool-stage"][value="session"]:checked) .tool:not([data-stage~="session"]),
  .house__text:has(input[name="tool-stage"][value="follow"]:checked) .tool:not([data-stage~="follow"])
):not(:hover) .tool__emblem{opacity:.32}
/* In a lit card, the stage that matched gets a filled gold dot. */
:is(
  .house__text:has(input[name="tool-stage"][value="assess"]:checked) .tool__stages li[data-s="assess"],
  .house__text:has(input[name="tool-stage"][value="session"]:checked) .tool__stages li[data-s="session"],
  .house__text:has(input[name="tool-stage"][value="follow"]:checked) .tool__stages li[data-s="follow"]
){color:var(--ink)}
:is(
  .house__text:has(input[name="tool-stage"][value="assess"]:checked) .tool__stages li[data-s="assess"],
  .house__text:has(input[name="tool-stage"][value="session"]:checked) .tool__stages li[data-s="session"],
  .house__text:has(input[name="tool-stage"][value="follow"]:checked) .tool__stages li[data-s="follow"]
)::before{
  border-color:#A9843F;
  background:linear-gradient(140deg,#F0D89A,#C9A35A 55%,#A9843F);
  box-shadow:0 0 0 .2rem rgba(240,216,154,.35);
}

/* The emblems' loops: paused until the card is lit or under the pointer.
   Visibility rides on opacity, which the loops never touch. */
@media (prefers-reduced-motion:no-preference){
  .tool__emblem .em-pulse{animation:em-run 2.4s linear infinite paused}
  .tool__emblem .em-ripple{animation:em-ripple 2.6s var(--ease) infinite paused}
  :is(
    .house__text:has(input[name="tool-stage"][value="assess"]:checked) .tool[data-stage~="assess"],
    .house__text:has(input[name="tool-stage"][value="session"]:checked) .tool[data-stage~="session"],
    .house__text:has(input[name="tool-stage"][value="follow"]:checked) .tool[data-stage~="follow"]
  ) .tool__emblem :is(.em-pulse,.em-ripple){animation-play-state:running;opacity:1;transition-delay:.35s}
}

/* Precise pointers: black marble spreads from wherever the cursor enters, with
   the warm spotlight above it and ivory and gold type above both. */
@media (hover:hover) and (pointer:fine){
  .house__facts > .tool::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
      linear-gradient(rgba(24,20,16,.84),rgba(24,20,16,.9)),
      url("../assets/images/marble-black-b.webp") center/cover;
    clip-path:circle(0% at var(--spot-x) var(--spot-y));
    transition:clip-path .7s var(--ease);
  }
  .house__facts > .tool.spotlight-card::before{z-index:1}
  .house__facts > .tool:hover{
    background-size:100% 2px;
    border-color:rgba(215,181,106,.6);
    box-shadow:0 1.5rem 3rem rgba(24,20,16,.18);
  }
  .house__facts > .tool:hover::after{clip-path:circle(160% at var(--spot-x) var(--spot-y))}
  .house__facts > .tool:hover dt{color:var(--champagne)}
  .house__facts > .tool:hover dd{color:var(--bone)}
  .house__facts > .tool:hover .tool__stages li{color:rgba(237,230,218,.84)}
  .house__facts > .tool:hover .tool__stages li::before{border-color:#E3C47E}
  .house__facts > .tool:hover .tool__emblem{color:#E3C47E;opacity:1}
}
/* ...and the card tilts a couple of degrees toward the cursor, its shadow
   falling away from it, while the emblem floats after it and comes alive. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .house__facts > .tool:hover{
    transform:perspective(48rem) translate3d(0,-.25rem,0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
    box-shadow:calc(var(--px,0) * -.8rem) calc(1.3rem - var(--py,0) * .5rem) 2.75rem rgba(24,20,16,.22);
    transition:transform .2s ease-out,border-color .4s var(--ease),box-shadow .25s ease-out,background-size .8s var(--ease);
  }
  .house__facts > .tool:hover .tool__emblem :is(.em-pulse,.em-ripple){animation-play-state:running;opacity:1;transition-delay:.15s}
}
.wellness-note{
  padding-top:1rem;
  border-top:1px solid rgba(59,49,41,.14);
  font-size:.9rem;
}

/* Trademark marks - always set small and raised, never at display size. */
.reg{
  font-family:var(--sans);font-weight:400;font-size:.4em;
  vertical-align:.85em;letter-spacing:0;line-height:0;
}

/* ── Paths (October 12, 2026) ─────────────────────────── */
/* Website review: "Replace the 13-card list. Three cards, Feel (Body), Live
   (Mind), Be (Soul), each showing two or three services and one outcome.
   Devices move to a Services page." The cards are slabs of the client's black
   marble with a gold inner rule, like Audrey's one-on-one session card; the
   path word is in the hero's gold. Services named here are only those on the
   page already; the device catalog lives on services.html. */
.path-cards{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.75rem,1.5vw,1.25rem);
}
.path-card{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;
  padding:clamp(1.75rem,3vw,2.75rem);
  color:var(--bone);
  border:1px solid rgba(215,181,106,.6);
  background:
    linear-gradient(rgba(24,20,16,.8),rgba(24,20,16,.88)),
    url("../assets/images/marble-black-b.webp") center/cover,
    #1d1915;
  box-shadow:0 2.25rem 4.5rem -1.25rem rgba(24,20,16,.4);
}
.path-card:nth-child(2){background-position:center,30% 70%,center}
.path-card:nth-child(3){background-position:center,80% 20%,center}
.path-card::after{
  content:"";position:absolute;inset:.5rem;z-index:-1;pointer-events:none;
  border:1px solid rgba(215,181,106,.3);
}
.path-card__word{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.6rem,4.6vw,3.9rem);line-height:1;letter-spacing:-.02em;
  color:#E3C47E;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .path-card__word{
    padding-top:.12em;margin-top:-.12em;
    background:linear-gradient(100deg,#D4B068 0%,#F0D89A 45%,#D4B068 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.path-card__name{
  margin-top:.9rem;
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--champagne);
}
.path-card__for{
  margin-top:.55rem;
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.25;
  color:var(--bone);
}
.path-card__list{
  display:grid;gap:.6rem;
  margin-top:1.5rem;padding-top:1.35rem;
  border-top:1px solid rgba(215,181,106,.28);
}
.path-card__list li{
  position:relative;padding-left:1.35rem;
  font-size:.92rem;line-height:1.5;color:rgba(237,230,218,.86);
}
.path-card__list li::before{
  content:"";position:absolute;left:.1rem;top:.62em;
  width:.36rem;height:.36rem;background:#D7B56A;transform:rotate(45deg);
}
.paths__foot{
  max-width:var(--max);margin:clamp(2.25rem,4.5vw,3.25rem) auto 0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.paths__foot .link-arrow{margin-top:0;align-self:center}
.paths__foot .wellness-note{margin-top:1.25rem}

/* ── Reviews (October 12, 2026) ───────────────────────── */
/* Three short Google reviews, word for word with the reviewer's name as it
   appears on Google, then a link to all of them. Ivory cards with a gold
   opening quote mark, on the white marble under an alabaster veil. */
.reviews{
  background:
    linear-gradient(rgba(237,230,218,.5),rgba(237,230,218,.5)),
    var(--bone) var(--marble-white) 60% 30% / var(--marble-size);
  border-top:1px solid rgba(59,49,41,.12);
}
.reviews__head{margin-bottom:clamp(2.75rem,6vw,4.5rem)}
.reviews__score{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem .8rem;
  margin-top:1.4rem;
  font-size:.82rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
}
.reviews__stars{font-size:1.05rem;letter-spacing:.14em;color:#A9843F}
.quotes{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.75rem,1.5vw,1.25rem);
}
.quote figure{
  position:relative;
  height:100%;
  display:flex;flex-direction:column;
  padding:clamp(1.75rem,3vw,2.5rem);
  background:rgba(255,253,249,.82);
  border:1px solid rgba(169,132,63,.32);
  box-shadow:0 1.5rem 3rem -1.75rem rgba(59,49,41,.3);
}
.quote figure::before{
  content:"\201C";
  display:block;height:.55em;margin-bottom:.35rem;
  font-family:var(--display);font-size:4rem;line-height:1;
  color:#A9843F;
}
.quote blockquote{margin:0 0 1.4rem}
.quote blockquote p{
  font-family:var(--display);
  font-size:clamp(1.15rem,1.55vw,1.35rem);line-height:1.4;
  color:var(--ink);
}
.quote figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;
  margin-top:auto;padding-top:1.1rem;
  border-top:1px solid rgba(169,132,63,.25);
}
.quote__name{font-size:.9rem;font-weight:600;color:var(--ink)}
.quote__src{
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronze);
}
.reviews__foot{
  max-width:var(--max);margin:clamp(2.25rem,4.5vw,3.25rem) auto 0;
  display:flex;justify-content:center;
}
.reviews__foot .link-arrow{margin-top:0}

@media (max-width:900px){
  .path-cards,
  .quotes{grid-template-columns:1fr;max-width:34rem}
}

/* ── Sessions ─────────────────────────────────────────── */

/* Conversion pass (October 8, 2026, "make sure this is on point and really
   conveys they should get one of these"). A ladder instead of a row of equals:
   the free call is the "Start here" ticket in a gold double frame; the two
   sessions follow under "Or book a session directly", Audrey's one-on-one on
   the client's black marble with a gold button, and Theraphi (moved up from a
   footnote) beside it; practice consulting, for a different audience, drops to
   a quiet strip. Every line restates a fact stated elsewhere on the page. */

/* White marble under a light alabaster veil, so Sessions still reads as its own
   warmer band; the veil keeps the darkest vein above the contrast floor. */
.member{
  background:
    linear-gradient(rgba(237,230,218,.5),rgba(237,230,218,.5)),
    var(--bone) var(--marble-white) 40% 0 / var(--marble-size);
}
.member__grid{max-width:var(--max);margin:0 auto}
.member__head{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(2rem,6vw,5.5rem);align-items:end;
  margin-bottom:clamp(2.5rem,5vw,3.75rem);
}
.member__head h2{font-weight:500}
.member__text > .member__head .member__lede{margin-top:0;max-width:48ch;padding-bottom:.5rem;text-wrap:pretty}

.offer{position:relative}
.offer__flag{
  margin-bottom:.85rem;
  font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronze);
}
.offer__name{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,2.2vw,1.95rem);line-height:1.1;
}
.offer__price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .8rem;
  margin-top:.8rem;
  font-family:var(--display);font-size:clamp(2.3rem,3.6vw,3.15rem);
  line-height:1;letter-spacing:-.02em;
}
.offer__price span{
  font-family:var(--sans);font-size:.74rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--clay);
}
.offer__body{
  max-width:46ch;margin-top:1.15rem;
  font-size:.97rem;line-height:1.6;color:var(--ink-soft);
}
.offer__list{display:grid;gap:.7rem;margin-top:1.35rem}
.offer__list li{
  position:relative;padding-left:1.75rem;
  font-size:.95rem;line-height:1.45;color:var(--ink-soft);
}
/* A small gold tick before each line. */
.offer__list li::before{
  content:"";position:absolute;left:.1rem;top:.38em;
  width:.8rem;height:.42rem;
  border-left:1.5px solid #A9843F;border-bottom:1.5px solid #A9843F;
  transform:rotate(-45deg);
}

/* Step one: the free call, a wide ticket in the founder panel's double gold
   rule, with a gold "Start here" tab hanging from its top edge. */
.offer--start{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"head list act";
  align-items:center;gap:1.75rem clamp(2rem,4vw,4rem);
  padding:clamp(3.4rem,4.4vw,3.9rem) clamp(1.75rem,3.4vw,3rem) clamp(2.25rem,3.4vw,2.9rem);
  border:1px solid rgba(169,132,63,.6);
  background:var(--bone);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 .6rem 1.4rem rgba(59,49,41,.06),
    0 2.25rem 4.5rem -1.5rem rgba(59,49,41,.22);
  transition:transform .4s var(--ease),box-shadow .5s var(--ease);
}
.offer--start::after{
  content:"";position:absolute;inset:.5rem;z-index:0;pointer-events:none;
  border:1px solid rgba(201,163,90,.34);
}
.offer.offer--start .offer__badge{
  position:absolute;top:-1px;left:clamp(1.75rem,3.4vw,3rem);z-index:2;
  padding:.45rem 1rem .5rem;
  border-radius:0 0 .55rem .55rem;
  background:linear-gradient(140deg,#F0D89A,#C9A35A 55%,#B8904A);
  box-shadow:0 .45rem 1rem rgba(126,96,56,.24);
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);
}
.offer--start .offer__head{grid-area:head}
.offer--start .offer__act{grid-area:act}
.offer--start .offer__price{margin-top:.6rem}
.offer--start .offer__list{
  grid-area:list;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem 2rem;margin-top:0;
}
/* Mid widths: name and button share the top row, the list runs full width. */
@media (max-width:1220px){
  .offer--start{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"head act" "list list";
  }
  .offer--start .offer__list{padding-top:1.5rem;border-top:1px solid rgba(169,132,63,.25)}
}
.offer--start .offer__list li{color:var(--ink)}
.offer--start .btn{--shine-delay:1.4s}

/* "Or book a session directly": a gold hairline either side. */
.offers__or{
  display:flex;align-items:center;gap:1.25rem;
  margin:clamp(2.75rem,5vw,4rem) 0 clamp(1.5rem,3vw,2rem);
  font-size:.74rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clay);text-align:center;
}
.offers__or::before,
.offers__or::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(169,132,63,0),rgba(169,132,63,.55))}
.offers__or::after{background:linear-gradient(90deg,rgba(169,132,63,.55),rgba(169,132,63,0))}

.offers{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:1rem;align-items:stretch;
}
.offers .offer{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(2rem,3.2vw,2.85rem);
  border:1px solid rgba(59,49,41,.15);
  background:var(--bone);
  transition:transform .4s var(--ease),box-shadow .5s var(--ease);
}
.offers .offer__list{margin-bottom:2.25rem}
/* Auto top margin pins both buttons to a shared line across uneven copy. */
.offers .offer__cta{margin-top:auto}

/* The featured session, on the client's black-and-gold marble. */
.offers .offer--feature{
  color:var(--bone);
  border-color:rgba(215,181,106,.6);
  background:
    linear-gradient(rgba(24,20,16,.8),rgba(24,20,16,.88)),
    url("../assets/images/marble-black-b.webp") center/cover,
    #1d1915;
  box-shadow:0 2.25rem 4.5rem -1.25rem rgba(24,20,16,.45);
}
.offer--feature::after{
  content:"";position:absolute;inset:.5rem;z-index:0;pointer-events:none;
  border:1px solid rgba(215,181,106,.3);
}
.offer--feature .offer__flag{color:var(--champagne)}
.offer--feature .offer__price span{color:var(--champagne)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .offer--feature .offer__price{
    background:linear-gradient(100deg,#D4B068 0%,#F0D89A 45%,#D4B068 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.offer--feature .offer__body,
.offer--feature .offer__list li{color:rgba(237,230,218,.86)}
.offer--feature .offer__list li::before{border-color:#E3C47E}
.offer--feature .btn{
  --btn-bg:linear-gradient(140deg,#F0D89A,#D7B56A 55%,#C9A35A);
  --btn-fg:var(--ink);
  --sheen:rgba(255,255,255,.5);--btn-edge:rgba(255,255,255,.4);
  --shine-delay:2.6s;
  border-color:#D7B56A;
}
.offer--feature .btn:hover{--btn-bg:#F6E7BF;--btn-fg:var(--ink);border-color:#F0D89A}
.offer--feature :focus-visible{outline-color:var(--champagne)}

/* Theraphi: an outlined button, so the gold one stays the clear lead. */
.offer--theraphi .btn{
  --btn-bg:transparent;--btn-fg:var(--ink);
  --sheen:rgba(126,96,56,.16);--btn-edge:transparent;
  --shine-delay:3.8s;
  border-color:rgba(34,29,24,.6);
}
.offer--theraphi .btn:hover{--btn-bg:var(--ink);--btn-fg:var(--bone);border-color:var(--ink)}
.offer--theraphi .offer__more{margin-top:.35rem;font-size:.72rem}
/* The number is its own unit, so it never splits; on narrow phones it can
   drop to a second line as a whole. */
.offer--theraphi .btn{flex-wrap:wrap;column-gap:.55em;row-gap:.2rem}
.offer__tel{display:inline-block}

/* For practice owners: a quieter strip for a different audience. */
.offer--pro{
  display:grid;
  grid-template-columns:minmax(15rem,.85fr) minmax(0,1.4fr) auto;
  grid-template-areas:"flag flag flag" "head body link";
  align-items:center;gap:.35rem clamp(2rem,4vw,4rem);
  margin-top:1rem;
  padding:clamp(1.5rem,2.6vw,2rem) clamp(1.75rem,3.2vw,2.85rem);
  border:1px solid rgba(59,49,41,.15);
  background:rgba(246,242,234,.5);
}
.offer--pro .offer__flag{grid-area:flag;margin-bottom:.4rem;color:var(--clay)}
.offer--pro .offer__head{grid-area:head}
.offer--pro .offer__name{font-size:clamp(1.2rem,1.6vw,1.4rem)}
.offer--pro .offer__price{margin-top:.45rem;font-size:clamp(1.5rem,2.1vw,1.85rem)}
.offer--pro .offer__body{grid-area:body;margin:0;font-size:.92rem}
.offer--pro .offer__link{grid-area:link;margin-top:0;font-size:.74rem;color:var(--ink)}

.member__note{
  max-width:72ch;margin-top:clamp(1.75rem,3vw,2.25rem);
  font-size:.9rem;line-height:1.6;color:var(--ink-soft);
}
.member__note a{color:inherit}

/* A quiet adaptation of Magic UI's spotlight card. It stays within the site's
   warm material palette and only responds on devices with precise pointers. */
.spotlight-card{
  --spot-x:50%;
  --spot-y:50%;
  position:relative;isolation:isolate;overflow:hidden;
}
.spotlight-card::before{
  content:"";position:absolute;inset:0;z-index:0;
  pointer-events:none;opacity:0;
  background:radial-gradient(
    20rem circle at var(--spot-x) var(--spot-y),
    rgba(201,172,128,.3),
    transparent 64%
  );
  transition:opacity .4s var(--ease);
}
.spotlight-card > *{position:relative;z-index:1}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .spotlight-card:hover::before{opacity:1}
  .step:hover{
    transform:translate3d(0,-.18rem,0);
    border-color:rgba(126,96,56,.38);
  }
  .offer--start:hover,
  .offers .offer:hover{transform:translate3d(0,-.18rem,0)}
}

/* ── Reserve ──────────────────────────────────────────── */

/* Closing section, second pass (October 8, 2026, "really dull, falls flat with
   the rest of the site; make it engaging and make people want to click"). Warm
   light spills onto the ivory page beside the free-call calendar (since
   October 12, 2026; before that a sunset in an arched window). The copy stays on the solid
   ivory surface. Since the concept pass (October 12, 2026) it is the concept's
   "Book your free 15-minute call": a line on how to book, the phone number,
   the place and the hours, beside the calendar. */
.reserve{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:min(92svh,52rem);
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center;
  background:var(--bone) var(--marble-white) 70% 40% / var(--marble-size);
  color:var(--ink);
  border-top:1px solid rgba(59,49,41,.14);
}
/* Golden-hour light from the window, warmest just behind the arch. */
.reserve__glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 42% 62% at 74% 52%,rgba(240,168,104,.26),rgba(240,168,104,0) 70%),
    radial-gradient(ellipse 30% 40% at 72% 30%,rgba(240,216,154,.4),rgba(240,216,154,0) 72%),
    linear-gradient(180deg,rgba(237,230,218,.6),rgba(246,242,234,0) 40%);
}
.reserve__body{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(5rem,8vw,7rem) clamp(1.5rem,3vw,3rem) clamp(4rem,6vw,5.5rem) var(--gut);
}
.reserve__body .display{
  max-width:12ch;
  font-size:clamp(2.6rem,5.4vw,5.2rem);
  font-weight:500;
}
.reserve__body .display em{
  display:block;
  padding-bottom:.12em;
  font-style:italic;color:var(--bronze);
}
.reserve__sub{
  max-width:40ch;margin-top:clamp(1.25rem,2.6vw,2rem);
  color:var(--ink-soft);font-size:clamp(1.05rem,1.35vw,1.22rem);
}

/* Phone, place and hours, as in the concept: the number is the one link. */
.reserve__contact{
  display:flex;flex-direction:column;gap:.3rem;
  margin-top:clamp(1.75rem,3vw,2.5rem);
  color:var(--ink-soft);
}
.reserve__phone{
  display:inline-flex;align-items:center;min-height:2.75rem;
  font-family:var(--display);font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.1;
  color:var(--ink);font-variant-numeric:tabular-nums;
  text-decoration:underline;text-decoration-color:rgba(59,49,41,.22);
  text-decoration-thickness:1px;text-underline-offset:.2em;
  transition:color .35s var(--ease),text-decoration-color .35s var(--ease);
}
.reserve__phone:hover{color:var(--bronze);text-decoration-color:currentColor}

/* The calendar (October 12, 2026). The website review asked for the free-call
   calendar on the page, so a visitor books without leaving the site; it
   replaced the arched sunset window. Calendly's booking page sits in a frame
   on an ivory mat with a double gold hairline, the founder doorway's rule in
   straight lines. main.js sizes the frame to the calendar's own height. */
.reserve__calendar{
  position:relative;z-index:1;
  align-self:center;min-width:0;
  padding:clamp(4rem,6vw,5.5rem) var(--gut) clamp(4rem,6vw,5.5rem) clamp(1rem,2vw,2rem);
}
.reserve__calendar-label{
  margin-bottom:.9rem;
  font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay);
}
.reserve__frame{
  position:relative;
  padding:.6rem;
  background:rgba(255,253,249,.78);
  border:1px solid rgba(169,132,63,.5);
  box-shadow:0 2.5rem 5rem -1.5rem rgba(59,49,41,.28),0 0 5rem rgba(232,150,92,.16);
}
.reserve__frame::after{
  content:"";position:absolute;inset:.3rem;pointer-events:none;
  border:1px solid rgba(169,132,63,.28);
}
.reserve__iframe{
  display:block;position:relative;z-index:1;
  width:100%;height:44rem;border:0;
  background:#FBF8F2;
}
.reserve__calendar-alt{margin-top:.6rem;font-size:.82rem;color:var(--ink-soft)}
.reserve__calendar-alt a{
  display:inline-flex;align-items:center;min-height:2.75rem;
  color:var(--bronze);text-underline-offset:.2em;
}
.reserve__calendar-alt a:hover{color:var(--ink)}

/* ── Stakes (October 12, 2026) ───────────────────────── */
/* The concept's dark band before the booking section: what staying stuck
   costs, set against one small step. Black-and-gold marble, as on the hero. */
.stakes{
  padding-block:clamp(5rem,10vw,8rem);
  text-align:center;
}
.stakes__inner{max-width:52rem;margin:0 auto}
.stakes .display{color:var(--bone);text-wrap:balance}
.stakes .display em{font-weight:500;color:#D7B56A}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stakes .display em{
    padding:0 .08em .12em .12em;margin:0 -.08em 0 -.12em;
    background:linear-gradient(100deg,#D4B068 0%,#F5E1A8 30%,#D8B66E 50%,#F0D89A 70%,#D4B068 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-box-decoration-break:clone;box-decoration-break:clone;
  }
}
.stakes__sub{
  max-width:46ch;margin:clamp(1.25rem,2.4vw,1.75rem) auto 0;
  font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;
  color:rgba(237,230,218,.86);
}

/* ── Inner pages: About, Services (October 12, 2026) ──── */
/* Website review: move the full story to its own page and the device catalog
   to a Services page. Both reuse the home page's sections; these are the few
   parts that are new: a centred page head under the menu bar, Audrey's letter
   beside her portrait, and a closing call band. */
.page-head{
  max-width:var(--max);margin:0 auto;
  padding:clamp(8rem,14vw,11rem) var(--gut) clamp(1.5rem,4vw,3rem);
  text-align:center;
}
.page-head .eyebrow{margin-inline:auto}
.page-head .display{max-width:16ch;margin-inline:auto}

.story{padding-top:clamp(2.5rem,6vw,5rem)}
.story__welcome{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.2;color:var(--ink);
}
.story__sign{display:flex;flex-direction:column;gap:.2rem;margin-top:2rem!important}
.story__sign-line{font-style:italic}
.story__sign-name{
  font-family:var(--display);font-size:clamp(1.8rem,3vw,2.4rem);line-height:1.1;
  color:var(--ink);
}
.story__sign-role{font-size:.78rem;letter-spacing:.06em;color:var(--bronze)}
.story__letter .creds{margin-top:2rem}
.story__letter .manifesto__links{margin-top:1.25rem}
/* Her portrait, cut out, on the frame's warm ivory. */
.story__figure img{aspect-ratio:1;object-fit:contain;object-position:center bottom}

.paths--page{padding-top:clamp(1.5rem,4vw,3rem)}

.page-cta{
  background:
    linear-gradient(rgba(237,230,218,.5),rgba(237,230,218,.5)),
    var(--bone) var(--marble-white) 40% 60% / var(--marble-size);
  border-top:1px solid rgba(59,49,41,.12);
}
.page-cta__inner{
  max-width:44rem;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.page-cta__inner .eyebrow{margin-inline:auto}
.page-cta__sub{margin:1.25rem 0 2rem;max-width:40ch;color:var(--ink-soft)}
.page-cta__alt{margin-top:1rem;font-size:.85rem;color:var(--ink-soft)}
.page-cta__alt a{
  display:inline-flex;align-items:center;min-height:2.75rem;
  color:var(--ink);font-variant-numeric:tabular-nums;text-underline-offset:.2em;
}
.page-cta__alt a:hover{color:var(--bronze)}

/* ── Footer ───────────────────────────────────────────── */

.foot{background:var(--umber);color:var(--alabaster);padding:clamp(3.5rem,7vw,6rem) var(--gut) 2rem}
.foot__inner{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1.1fr 1.9fr;gap:clamp(2.5rem,6vw,5rem);
}
.foot__logo{width:clamp(13rem,20vw,17rem);height:auto}
.foot__line{margin-top:1.5rem;font-size:.85rem;color:rgba(237,230,218,.6);max-width:26ch}

.foot__social{
  display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;
  margin-top:1.25rem;padding-top:1.25rem;
  border-top:1px solid rgba(237,230,218,.16);
  max-width:26rem;
}
.foot__social a{
  display:inline-flex;align-items:center;min-height:2.75rem;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(237,230,218,.7);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.foot__social a:hover{color:var(--champagne);border-bottom-color:currentColor}

.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.foot__h{
  font-family:var(--sans);font-weight:500;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--champagne);margin-bottom:1.15rem;
}
.foot__cols li a{
  display:inline-flex;align-items:center;min-height:2.75rem;
  font-size:.9rem;color:rgba(237,230,218,.76);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .35s var(--ease),border-color .35s var(--ease);
}
.foot__text{
  display:inline-flex;align-items:center;min-height:2.75rem;
  font-size:.9rem;color:rgba(237,230,218,.76);
}
.foot__cols li a:hover{color:var(--alabaster);border-bottom-color:currentColor}

.foot__base{
  max-width:var(--max);margin:clamp(3rem,6vw,4.5rem) auto 0;
  padding-top:1.75rem;border-top:1px solid rgba(237,230,218,.18);
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;
  font-size:.8rem;color:rgba(237,230,218,.72);
}
.foot__disc{margin-right:auto}
.foot__base a{
  display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;
  text-decoration:none;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;
  color:rgba(237,230,218,.72);
  border-bottom:1px solid transparent;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.foot__base a:hover{color:var(--alabaster);border-bottom-color:currentColor}
/* Agency credit (October 9, 2026): the last line of the page, quiet and
   centred under a fainter rule, with the studio's name in champagne. */
.foot__credit{
  position:relative;
  max-width:var(--max);margin:1.25rem auto 0;
  padding-top:1rem;border-top:1px solid rgba(237,230,218,.1);
  text-align:center;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,230,218,.62);
}
.foot__credit a{
  display:inline-flex;align-items:center;min-height:2.75rem;
  color:var(--champagne);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.foot__credit a:hover{color:var(--alabaster);border-bottom-color:currentColor}

/* ── Reveal animations ────────────────────────────────── */

.reveal{
  opacity:1;transform:none;filter:none;
}
.reveal.is-in{opacity:1;transform:none;filter:none}

.reveal-media{overflow:hidden}
.reveal-media img{
  opacity:1;transform:none;
}
.reveal-media.is-in img{opacity:1;transform:none}

/* Native in-view blur fade: visible by default, enhanced only after JS confirms
   both IntersectionObserver support and an active motion preference. */
.motion-ready main > section:not(.hero) .reveal,
.motion-ready main > section:not(.hero) .reveal-media{
  opacity:0;
  transform:translate3d(0,.9rem,0);
  filter:blur(5px);
  transition:
    opacity .72s var(--ease),
    transform .72s var(--ease),
    filter .72s var(--ease);
}
.motion-ready main > section:not(.hero) .reveal.is-in,
.motion-ready main > section:not(.hero) .reveal-media.is-in{
  opacity:1;transform:none;filter:none;
}
.motion-ready main > section:not(.hero) .reveal-media img{
  transform:scale(1.035);
  transition:transform 1.05s var(--ease);
}
.motion-ready main > section:not(.hero) .reveal-media.is-in img{transform:none}
.motion-ready main > section:not(.hero) [data-delay="1"]{transition-delay:.06s}
.motion-ready main > section:not(.hero) [data-delay="2"]{transition-delay:.12s}
.motion-ready main > section:not(.hero) [data-delay="3"]{transition-delay:.18s}
.motion-ready main > section:not(.hero) [data-delay="4"]{transition-delay:.24s}
.motion-ready main > section:not(.hero) [data-delay="5"]{transition-delay:.3s}
.motion-ready main > section:not(.hero) [data-delay="6"]{transition-delay:.36s}

/* The hero keeps its own clipped-word choreography instead of inheriting the
   quieter section reveal. */
.hero .reveal{
  opacity:0;
  transform:translate3d(0,1rem,0);
  animation:hero-enter .75s var(--ease) forwards;
}
.hero .reveal[data-delay="1"]{animation-delay:.08s}
.hero .reveal[data-delay="2"]{animation-delay:.16s}
.hero .reveal[data-delay="3"]{animation-delay:.24s}
@keyframes hero-enter{
  to{opacity:1;transform:none}
}

/* Native scroll-driven drift keeps full-bleed media moving without a global scroll listener. */
@keyframes media-drift{
  from{transform:translate3d(0,-3%,0)}
  to{transform:translate3d(0,3%,0)}
}
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    [data-parallax]{
      animation:media-drift linear both;
      animation-timeline:view();
      animation-range:cover;
    }
  }
}

/* ── Responsive ───────────────────────────────────────── */

@media (max-width:1000px){

  .manifesto__grid,
  .vessel__grid,
  .motion__panel,
  .foot__inner{grid-template-columns:1fr}

  .vessel__figure{order:2}
  .vessel .marble-surface__stone::after{background:rgba(34,29,24,.88)}
  .vessel__text{order:1}
  .manifesto__figure{
    position:relative;top:auto;
    width:100%;max-width:42rem;
  }

  .house__head{grid-template-columns:1fr;gap:clamp(1.75rem,4vw,2.5rem)}
  .house__intro{max-width:60ch;padding:.25rem 0 0 clamp(1.25rem,3vw,1.75rem)}
  .house__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .house__facts > div{grid-column:auto!important}
  .reserve{grid-template-columns:minmax(0,1.05fr) minmax(21rem,.95fr)}

  .member__head{grid-template-columns:1fr;gap:clamp(1.25rem,3vw,1.75rem)}
  .member__text > .member__head .member__lede{max-width:56ch;padding-bottom:0}
  .offer--start{
    grid-template-columns:1fr;grid-template-areas:"head" "list" "act";
    align-items:start;
  }
  .offer--pro{
    grid-template-columns:1fr;
    grid-template-areas:"flag" "head" "body" "link";
    gap:.35rem;
  }
  .offer--pro .offer__body{margin-top:.85rem}
  .offer--pro .offer__link{margin-top:.5rem;justify-self:start}
  .motion__panel{align-items:start}
  .step{grid-column:auto;--step-pad:clamp(1.5rem,2.6vw,2.25rem)}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:820px){
  :root{
    --mobile-actions-offset:calc(4.1rem + env(safe-area-inset-bottom));
  }
  html{scroll-padding-bottom:var(--mobile-actions-offset)}
  body{padding-bottom:var(--mobile-actions-offset)}
  .offers{grid-template-columns:1fr}
  body.menu-open{overflow:hidden}

  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
  .nav{background:rgba(246,242,234,.92)}
  .nav.is-open{background:rgba(246,242,234,.97)}
  .nav.is-open .nav__mark{color:var(--ink)}
  .nav.is-open .nav__toggle span{background:var(--ink)}
  .nav.is-open .nav__toggle span:first-child{transform:translateY(.2rem) rotate(45deg)}
  .nav.is-open .nav__toggle span:last-child{transform:translateY(-.2rem) rotate(-45deg)}
  .nav__scrim{
    display:block;position:fixed;inset:0;z-index:1;
    background:rgba(34,29,24,.48);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .4s var(--ease),visibility 0s linear .4s;
  }
  .nav.is-open .nav__scrim{
    opacity:1;visibility:visible;pointer-events:auto;
    transition-delay:0s;
  }
  .nav__scrim[hidden]{display:none}
  .nav__panel{
    position:fixed;inset:0 0 0 auto;z-index:2;
    display:flex;width:min(88vw,24rem);height:100svh;
    padding:clamp(5.5rem,13vh,7.5rem) clamp(1.5rem,7vw,2.5rem) calc(2rem + env(safe-area-inset-bottom));
    background:rgba(246,242,234,.985);
    border-top:0;border-left:1px solid rgba(59,49,41,.14);
    box-shadow:-1.5rem 0 4rem rgba(34,29,24,.18);
    transform:translate3d(105%,0,0);
    visibility:hidden;pointer-events:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    scroll-padding-block:5.5rem 2rem;
    -webkit-overflow-scrolling:touch;
    transition:transform .45s var(--ease),visibility 0s linear .45s;
  }
  .nav.is-open .nav__panel{
    transform:none;visibility:visible;pointer-events:auto;
    transition-delay:0s;
  }
  .nav__panel a{
    padding:.7rem 0;
    font-size:clamp(1.4rem,6vw,1.8rem);
  }
  .nav__panel a{scroll-margin-block:.5rem}
  .nav__panel[hidden]{display:none}
  .nav__panel-cta{
    width:100%;margin-top:1.25rem!important;
    min-height:3.1rem!important;
  }

  .mobile-actions{
    display:grid;grid-template-columns:.78fr 1.22fr;gap:.55rem;
    position:fixed;inset:auto 0 0;z-index:var(--z-actions);
    padding:.55rem var(--gut) calc(.55rem + env(safe-area-inset-bottom));
    background:rgba(246,242,234,.95);
    border-top:1px solid rgba(59,49,41,.17);
    box-shadow:0 -1rem 2.5rem rgba(59,49,41,.12);
    transition:opacity .35s var(--ease),transform .35s var(--ease);
  }
  @supports (backdrop-filter:blur(1px)){
    .mobile-actions{
      background:rgba(246,242,234,.89);
      backdrop-filter:blur(16px) saturate(1.02);
    }
  }
  .mobile-actions .btn{
    width:100%;min-width:0;min-height:3rem;
    padding:.75rem .85rem;
    font-size:.72rem;letter-spacing:.13em;
  }
  .mobile-actions__call{
    --btn-bg:transparent;--btn-fg:var(--ink);
    --sheen:rgba(126,96,56,.22);--btn-edge:rgba(255,255,255,.58);
    --shine-delay:2.3s;
    border-color:rgba(34,29,24,.34);
  }
  .mobile-actions__call:hover{
    --btn-bg:var(--alabaster);--btn-fg:var(--ink);
    border-color:rgba(34,29,24,.48);
  }
  .mobile-actions__book{--shine-delay:1s}
  body.menu-open .mobile-actions{
    opacity:0;transform:translate3d(0,110%,0);pointer-events:none;
  }

  /* Phones and small tablets: the copy first, then Audrey standing on the
     bottom edge. No buttons in the phone hero (SDM standard): the pinned
     Call / Book a Call bar does that job. */
  .hero{
    --nav-h:4.4rem;
    --top:calc(var(--nav-h) + 2.25rem);
    min-height:0;
  }
  .hero__scene{inset:0}
  .hero__wash{
    background:
      linear-gradient(180deg,rgba(24,20,16,.88) 0%,rgba(24,20,16,.8) 48%,rgba(24,20,16,.42) 78%,rgba(24,20,16,.5) 100%);
  }
  .hero__inner{grid-template-columns:minmax(0,1fr);row-gap:2rem}
  .hero__copy{max-width:34rem;padding-bottom:0}
  .hero__title{font-size:clamp(2.6rem,11vw,4.2rem)}
  .hero__actions{display:none}
  .hero__proof{gap:.45rem}
  .hero__proof li{font-size:.76rem;padding-inline:.9rem}
  .hero__proof a{padding-inline:.9rem}
  .hero__portrait{width:min(100%,26rem)}
  .hero__long{display:none}
  .hero__portrait::before{top:3%;width:54%;height:47%;filter:blur(11px);opacity:.8}
  .hero__portrait img{filter:saturate(.88) sepia(.04) contrast(.98)}

  .steps{grid-template-columns:1fr}
  .step{min-height:0;scroll-margin-top:4.5rem}
  .step .step__emblem{--em:3.6rem}
  /* Phones: the rail tucks under the menu bar and keeps only the numbered dots;
     the step names stay available to screen readers. */
  .journey{top:4.875rem;max-width:none;border-radius:1.6rem;padding:.45rem .5rem}
  .journey__label{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .motion__panel{grid-template-columns:1fr}
  .motion{min-height:30rem}

  .reserve{
    min-height:0;
    grid-template-columns:1fr;
  }
  .reserve__glow{
    background:
      radial-gradient(ellipse 70% 32% at 50% 16%,rgba(240,168,104,.26),rgba(240,168,104,0) 72%),
      radial-gradient(ellipse 50% 22% at 50% 10%,rgba(240,216,154,.4),rgba(240,216,154,0) 72%);
  }
  .reserve__body{
    padding:clamp(2rem,6vw,3rem) var(--gut) clamp(4.5rem,12vw,6rem);
  }
  /* One column: the copy first, then the calendar under it. */
  .reserve__body{padding-top:clamp(4rem,12vw,5.5rem);padding-bottom:2.5rem}
  .reserve__calendar{padding:0 var(--gut) clamp(4.5rem,12vw,6rem)}
  .reserve__iframe{height:46rem}
}

@media (max-width:560px){
  .spec li{flex-direction:column;align-items:flex-start;gap:.3rem}
  .spec__v{text-align:left}
  .house__facts{grid-template-columns:1fr}
  /* One column: the cards size to their content instead of a tall minimum. */
  .house__facts > div{min-height:0}
  .house__facts dd{padding-top:.9rem}
  .offer--start .offer__list{grid-template-columns:1fr}
  /* Long button labels wrap rather than push past a narrow card. */
  .offer .btn{white-space:normal;text-align:center}
  .manifesto__frame{padding:0 0 1rem 1rem}
  .manifesto__figure figcaption{margin-left:1rem}
  .foot__cols{grid-template-columns:1fr}
  .foot__base{font-size:.75rem}
}

@media (max-height:500px) and (orientation:landscape) and (min-width:600px){
  /* Landscape phones: copy beside Audrey, as on a computer, with Audrey
     sized to the short screen. */
  .hero__inner{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .hero__copy{padding-bottom:2rem}
  .hero__title{font-size:clamp(2.2rem,11vh,3rem)}
  .hero__lede{font-size:1rem}
  .hero__portrait{width:min(100%,calc(100svh - var(--top) - var(--mobile-actions-offset,0px)))}
}

@media (pointer:coarse){
  .btn,
  .link-quiet,
  .link-arrow,
  .nav__links a,
  .foot__social a,
  .foot__cols li a,
  .foot__base a{min-height:2.75rem}
}

/* ── Reduced motion ───────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal,.reveal-media,.reveal-media img{
    opacity:1!important;transform:none!important;filter:none!important;
  }
  .hero__scene{transform:none!important;inset:0}
  .hero__portrait{opacity:1!important;animation:none!important;transform:none!important}
}

@media (prefers-reduced-transparency:reduce){
  .nav{
    background:var(--bone);
    backdrop-filter:none;
  }
  .marble-surface__stone{display:none}
  .motion__panel{
    background:var(--bone);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
}