/* =========================================================================
   ADRAA  ·  design system
   Lane: a gold leafed hammam at night, seen through a Copenhagen gallery
   invitation. Espresso ground, gold as the only light, one repeated device.
   Palette is committed brand identity from the ADRAA Brand Deck.
   ========================================================================= */

/* ---------- 1. Reset ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100svh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
p,li,h1,h2,h3,h4{overflow-wrap:break-word}
ul[class],ol[class]{list-style:none;padding:0}
[hidden]{display:none !important}
a{color:inherit}
:where(table){border-collapse:collapse}

/* ---------- 2. Tokens --------------------------------------------------- */
:root{
  /* Brand palette, straight from the deck */
  --espresso:#361F10;
  --cocoa:#572F15;
  --rust:#945634;
  --terracotta:#B66639;
  --taupe:#836041;
  --camel:#CBA67A;
  --gold:#E1C082;
  --cream:#F0E3D1;
  --midnight:#001C53;

  /* Derived surfaces */
  --espresso-deep:oklch(20% 0.036 52.9);
  --espresso-lift:oklch(30.5% 0.048 52.9);
  --gold-soft:oklch(82.2% 0.088 82.6 / .34);
  --gold-hair:oklch(82.2% 0.088 82.6 / .22);
  --gold-warm:oklch(88% 0.075 84);
  /* Derived, not from the deck. Cream on brand rust is 4.56:1 and cream on
     terracotta is 3.36:1, so panels that carry text use this darker rust
     (cream 6.3:1, gold 4.5:1) and terracotta stays decoration only. */
  --rust-deep:#7A4325;
  /* The Circle, her note: a darker blue, and only white and gold with it.
     #001C53 was oklch 25%, this is 18.3%. White 18.8:1, gold 10.8:1. */
  --midnight-deep:#00112E;
  --midnight-card:#08244D;

  /* Ink. Every value below is measured against its named ground. */
  --ink:var(--cream);              /* on espresso  12.2 : 1 */
  --ink-mute:var(--camel);         /* on espresso   6.8 : 1 */
  --ink-faint:#A89172;             /* on espresso   5.1 : 1 */
  --ink-dark:var(--espresso);      /* on cream     12.2 : 1 */
  --ink-dark-mute:#6B4526;         /* on cream      6.6 : 1 */

  /* Type */
  --serif:"Young Serif",Charter,"Bitstream Charter","Iowan Old Style",Georgia,serif;
  --sans:"Hanken Grotesk",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;

  --step--2:clamp(.75rem,.73rem + .1vw,.8125rem);
  --step--1:clamp(.875rem,.85rem + .14vw,.9375rem);
  --step-0:clamp(1.0625rem,1.03rem + .18vw,1.1875rem);
  --step-1:clamp(1.25rem,1.18rem + .34vw,1.4375rem);
  --step-2:clamp(1.5rem,1.35rem + .74vw,2rem);
  --step-3:clamp(1.9rem,1.55rem + 1.75vw,3rem);
  --step-4:clamp(2.4rem,1.85rem + 2.75vw,4.15rem);
  --step-5:clamp(2.9rem,1.95rem + 4.75vw,5.5rem);

  /* Space */
  --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;   --sp-5:1.5rem;
  --sp-6:2rem;   --sp-7:2.75rem;--sp-8:4rem;   --sp-9:6rem;
  --section:clamp(4.5rem,2.6rem + 8vw,8.5rem);
  --gutter:clamp(1.25rem,.6rem + 3vw,3rem);
  --wrap:72rem;
  --measure:68ch;

  /* Form */
  --r:2px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --dur:.62s;

  /* z scale */
  --z-base:0; --z-rise:10; --z-sticky:100; --z-nav:200; --z-overlay:900; --z-modal:1000;
}

/* ---------- 3. Base ----------------------------------------------------- */
body{
  font-family:var(--sans);
  font-size:var(--step-0);
  font-weight:380;
  line-height:1.7;
  letter-spacing:.002em;
  color:var(--ink);
  background:var(--espresso);
}
/* Lacquer grain. Fixed so it never scrolls with content.
   No mix-blend-mode on purpose: a blended full viewport fixed layer costs a
   full page recomposite per frame and was measurably janking the scroll. */
body::before{
  content:"";position:fixed;inset:0;z-index:var(--z-base);pointer-events:none;
  opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4{line-height:1.15;text-wrap:balance;font-weight:400}
.display{
  font-family:var(--serif);font-weight:400;
  line-height:1.06;letter-spacing:-.02em;
  text-wrap:balance;
}
h1.display{font-size:var(--step-5)}
h2.display{font-size:var(--step-4)}
h3.display{font-size:var(--step-3)}
.h-work{font-family:var(--sans);font-weight:600;letter-spacing:-.012em;line-height:1.28}
h3.h-work{font-size:var(--step-1)}
h4.h-work{font-size:var(--step-0)}
p{text-wrap:pretty}
strong,b{font-weight:650;color:var(--gold-warm)}
em{font-style:italic}
.lede{font-size:var(--step-1);line-height:1.6;font-weight:340;color:var(--ink)}
.mute{color:var(--ink-mute)}
.faint{color:var(--ink-faint);font-size:var(--step--1)}
.gold{color:var(--gold)}
.measure{max-width:var(--measure)}
.measure-tight{max-width:52ch}

::selection{background:var(--gold);color:var(--espresso)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r)}

.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:var(--z-modal);
  background:var(--gold);color:var(--espresso);padding:.7rem 1.1rem;
  font-weight:650;border-radius:var(--r);transition:top .2s var(--ease)
}
.skip:focus{top:.75rem}

/* ---------- 4. Layout --------------------------------------------------- */
.wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto}
.wrap-wide{width:min(100% - var(--gutter)*2,86rem);margin-inline:auto}
section{position:relative;z-index:var(--z-rise)}
.sec{padding-block:var(--section)}
.sec-sm{padding-block:clamp(3rem,2rem + 4vw,5rem)}
.stack>*+*{margin-top:var(--sp-5)}
.stack-sm>*+*{margin-top:var(--sp-3)}
.stack-lg>*+*{margin-top:var(--sp-7)}

/* Panels. Full bleed colour changes, never card edges. */
.panel{position:relative;z-index:var(--z-rise)}
.panel--cream{background:var(--cream);color:var(--ink-dark);--ink:var(--ink-dark);--ink-mute:var(--ink-dark-mute);--ink-faint:var(--ink-dark-mute)}
.panel--cream strong,.panel--cream b{color:var(--rust)}
.panel--cream .gold{color:var(--rust)}
.panel--cocoa{background:var(--cocoa);--ink-faint:var(--camel)}  /* #A89172 is only 3.82:1 on cocoa */
/* Deep navy, white and gold. No cream, no camel, no terracotta: the warm
   palette belongs to the rest of the site, The Circle is its own room. */
.panel--midnight{
  background:var(--midnight-deep);
  /* color, not only the token: body resolved --ink once, so children inherited
     the computed cream rather than re-reading the variable. */
  color:#FFFFFF;
  --ink:#FFFFFF;                       /* 18.8 : 1 */
  --ink-mute:oklch(100% 0 0 / .78);    /* 11.1 : 1 */
  --ink-faint:oklch(100% 0 0 / .62)    /*  7.6 : 1 */
}
.panel--midnight strong,.panel--midnight b{color:var(--gold)}
.panel--midnight .rung{background:var(--midnight-card)}
.panel--midnight .rung--now{background:var(--midnight-card);outline:1px solid var(--gold-soft)}
.panel--midnight .rung--now .rung__price,
.panel--midnight .rung--now .rung__seats{color:var(--gold)}
.panel--midnight .rung__price{color:var(--ink-mute)}
.panel--midnight .week__n,.panel--midnight .stack-row__v{color:var(--gold)}
.panel--midnight .honest,.panel--midnight .stack-list,.panel--midnight .stack-row,
.panel--midnight .rows,.panel--midnight .row2{border-color:oklch(82.2% .088 82.6 / .26)}
.panel--deep{background:var(--espresso-deep)}

/* ---------- 5. The gold band, the recurring device ---------------------- */
.band{display:flex;align-items:center;gap:var(--sp-5)}
.band::before,.band::after{
  content:"";height:1px;flex:1;background:currentColor;opacity:.28;
  transform:scaleX(var(--band-x,1));transform-origin:var(--band-o,left);
  transition:transform 1.1s var(--ease)
}
.band::before{--band-o:right}
.band--start::after{display:none}
.band--start::before{display:none}
.band--start{display:block;height:1px;background:currentColor;opacity:.28;
  transform:scaleX(var(--band-x,1));transform-origin:left;transition:transform 1.1s var(--ease)}
.band__label{
  font-size:var(--step--2);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap
}
.rule{height:1px;background:currentColor;opacity:.2;border:0}
.rule-gold{height:1px;background:var(--gold);opacity:.34;border:0}

/* The nine colour spectrum from the deck cover */
.spectrum{display:flex;height:var(--spectrum-h,9px);width:100%}
.spectrum span{flex:1;transition:flex-grow .7s var(--ease)}
.spectrum--tall{--spectrum-h:15px}

/* ---------- 6. The mark ------------------------------------------------- */
.mark{display:block;flex:none}
.mark circle{fill:none;stroke-linecap:round}
.mark__a{stroke:var(--gold)}
.mark__b{stroke:var(--terracotta)}

/* ---------- 7. Header --------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:var(--z-nav);
  background:var(--espresso);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),background .4s var(--ease)
}
.site-head[data-stuck]{border-bottom-color:var(--gold-hair)}
.site-head__in{display:flex;align-items:center;gap:var(--sp-6);min-height:4.5rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none;position:relative;z-index:2}
.brand__word{
  font-family:var(--sans);font-weight:700;font-size:1.0625rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--cream);
  padding-left:.06em
}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);margin-left:auto}
.nav a:not(.btn){
  text-decoration:none;font-size:var(--step--1);font-weight:500;color:var(--ink-mute);
  position:relative;padding-block:.4rem;transition:color .3s var(--ease)
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)
}
.nav a:not(.btn):hover,.nav a:not(.btn)[aria-current]{color:var(--cream)}
.nav a:not(.btn):hover::after,.nav a:not(.btn)[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav-toggle{display:none}

@media (max-width:60rem){
  .nav-toggle{
    display:flex;align-items:center;gap:.6rem;margin-left:auto;position:relative;z-index:2;
    font-size:var(--step--1);font-weight:600;color:var(--gold);
    letter-spacing:.08em;text-transform:uppercase;padding:.6rem 0
  }
  .nav-toggle__bars{display:grid;gap:4px;width:20px}
  .nav-toggle__bars i{display:block;height:1px;background:var(--gold);transition:transform .4s var(--ease),opacity .3s}
  .nav-toggle[aria-expanded="true"] i:first-child{transform:translateY(5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] i:last-child{transform:translateY(-5px) rotate(-45deg)}
  /* Anchored to the top rather than below the header, so translateY(-100%)
     clears the viewport completely. Offset by -102% from top:4.5rem it left a
     strip of the panel on screen. visibility also keeps the closed links out
     of the tab order. */
  .nav{
    position:fixed;inset:0 0 auto;margin:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--espresso);border-bottom:1px solid var(--gold-hair);
    padding:calc(4.5rem + var(--sp-4)) var(--gutter) var(--sp-6);
    transform:translateY(-100%);visibility:hidden;
    transition:transform .5s var(--ease),visibility 0s linear .5s;
    z-index:1
  }
  .nav[data-open]{transform:translateY(0);visibility:visible;transition-delay:0s,0s}
  .nav a:not(.btn){padding-block:1rem;font-size:var(--step-1);border-bottom:1px solid var(--gold-hair)}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin-top:var(--sp-5);text-align:center}
}

/* ---------- 8. Buttons -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.6rem;border-radius:var(--r);
  font-size:var(--step--1);font-weight:650;letter-spacing:.04em;
  text-decoration:none;white-space:nowrap;
  transition:background-color .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease)
}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold);color:var(--espresso);border:1px solid var(--gold)}
.btn--gold:hover{background:var(--gold-warm);border-color:var(--gold-warm)}
.btn--ghost{background:transparent;color:var(--gold);border:1px solid var(--gold-soft)}
.btn--ghost:hover{border-color:var(--gold);background:oklch(82.2% .088 82.6 / .1)}
.btn--dark{background:var(--espresso);color:var(--cream);border:1px solid var(--espresso)}
.btn--dark:hover{background:var(--cocoa);border-color:var(--cocoa)}
.btn--lg{padding:1.15rem 2.1rem;font-size:var(--step-0)}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn__arrow{transition:transform .4s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

.link-gold{
  color:var(--gold);text-decoration:none;font-weight:600;
  border-bottom:1px solid var(--gold-soft);padding-bottom:2px;
  transition:border-color .3s var(--ease)
}
.link-gold:hover{border-bottom-color:var(--gold)}
.panel--cream .link-gold{color:var(--rust);border-bottom-color:oklch(51.8% .095 48.4 / .4)}
.panel--cream .link-gold:hover{border-bottom-color:var(--rust)}

/* ---------- 9. Hero ----------------------------------------------------- */
.hero{
  position:relative;overflow:clip;
  padding-block:clamp(2.25rem,1.2rem + 5.5vw,5rem) clamp(2.5rem,1.5rem + 5vw,4.5rem);
  min-height:min(92svh,54rem);display:flex;align-items:center
}
.hero__glow{
  position:absolute;pointer-events:none;z-index:0;
  inset-inline-end:-18%;inset-block-start:-22%;
  width:min(78vw,60rem);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
    oklch(82.2% .088 82.6 / .17) 0%,
    oklch(59.3% .119 48.4 / .11) 38%,
    transparent 68%);
  filter:blur(12px)
}
.hero__in{position:relative;z-index:var(--z-rise)}
.hero__grid{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
@media (min-width:64rem){.hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.hero h1{max-width:16ch;font-size:clamp(2.6rem,1.7rem + 4.1vw,4.75rem)}
.hero .lede{max-width:54ch}
.hero .stack>*+*{margin-top:1.15rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}

/* The mark, large, as the hero's companion image */
.mark-large{
  width:min(100%,26rem);margin-inline:auto;aspect-ratio:1;position:relative;
  display:grid;place-items:center
}
.mark-large svg{width:82%;height:auto}
/* Rings sit inside the box. At inset:-15% they pushed the page 42px wide on
   any section that does not clip, which showed up as a horizontal scrollbar. */
.mark-large__ring{
  position:absolute;inset:7%;border:1px solid var(--gold-hair);border-radius:50%;
  animation:spin 64s linear infinite
}
.mark-large__ring:nth-of-type(2){inset:0;border-style:dashed;animation-duration:96s;animation-direction:reverse;opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 10. Tiers --------------------------------------------------- */
.tiers{display:grid;gap:var(--sp-4);grid-template-columns:repeat(12,1fr)}
.tier{
  position:relative;display:flex;flex-direction:column;gap:var(--sp-4);
  padding:clamp(1.6rem,1rem + 2.4vw,2.75rem);border-radius:var(--r);
  grid-column:span 12;text-decoration:none;overflow:clip;
  transition:transform .5s var(--ease)
}
@media (min-width:56rem){
  .tier--lead{grid-column:span 7}
  .tier--sec{grid-column:span 5}
  .tier--strip{grid-column:span 12;flex-direction:row;align-items:center;gap:var(--sp-6);flex-wrap:wrap}
}
.tier:hover{transform:translateY(-3px)}
.tier--lead{background:var(--rust-deep);color:var(--cream);min-height:clamp(19rem,30vw,24rem)}
.tier--sec{background:var(--midnight);color:var(--cream)}
.tier--strip{background:var(--camel);color:var(--espresso)}
.tier__name{
  font-family:var(--sans);font-weight:700;font-size:var(--step-1);
  letter-spacing:.2em;text-transform:uppercase
}
.tier--lead .tier__name{font-size:var(--step-2);letter-spacing:.16em}
.tier__kind{font-size:var(--step--1);letter-spacing:.02em;color:inherit}
.tier__body{font-size:var(--step-0);max-width:38ch}
.tier__foot{margin-top:auto;display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap;padding-top:var(--sp-4)}
.tier__price{font-family:var(--serif);font-size:var(--step-2);line-height:1}
.tier--strip .tier__body{max-width:52ch;flex:1 1 22rem}
.tier__go{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:650;
  font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:3px
}
.tier__arc{
  position:absolute;inset-block-start:-30%;inset-inline-end:-14%;
  width:60%;aspect-ratio:1;border:1px solid currentColor;opacity:.22;border-radius:50%;
  pointer-events:none
}

/* Culture cards. The three tones are shown as swatches rather than used as
   text backgrounds, because cream on taupe is 4.47:1 and on terracotta 3.36:1. */
.cultures{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.culture{
  display:flex;flex-direction:column;gap:var(--sp-3);
  background:var(--espresso-lift);border-radius:var(--r);overflow:clip;
  padding-bottom:clamp(1.4rem,1rem + 1.4vw,2rem)
}
.culture__swatch{display:block;width:100%;aspect-ratio:5/2;border-bottom:1px solid var(--gold-hair)}
.culture>*:not(.culture__swatch){padding-inline:clamp(1.2rem,.9rem + 1.2vw,1.75rem)}
.culture__name{
  font-weight:700;font-size:var(--step--1);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-top:var(--sp-2)
}
.culture__hex{
  font-size:var(--step--2);letter-spacing:.12em;color:var(--ink-faint);
  text-transform:uppercase;font-variant-numeric:tabular-nums;margin-top:-.4rem
}
.culture p{color:var(--ink-mute);font-size:var(--step--1)}

/* ---------- 11. Frequency words ---------------------------------------- */
.freq{display:flex;flex-wrap:wrap;gap:.6rem 0;align-items:center}
.freq li{font-family:var(--serif);font-size:var(--step-2);line-height:1.25;color:var(--gold)}
.freq li:not(:last-child)::after{
  content:"";display:inline-block;width:.42em;height:.42em;border:1px solid var(--gold-soft);
  border-radius:50%;margin-inline:.7em;vertical-align:.16em
}

/* ---------- 12. Obstacle rows ------------------------------------------ */
.obstacles{border-top:1px solid var(--gold-hair)}
.obstacle{
  display:grid;gap:var(--sp-3) var(--sp-7);
  padding-block:clamp(1.4rem,1rem + 1.4vw,2.1rem);
  border-bottom:1px solid var(--gold-hair)
}
@media (min-width:52rem){.obstacle{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}}
.obstacle__her{
  font-family:var(--serif);font-size:var(--step-1);line-height:1.35;
  color:var(--ink);letter-spacing:-.01em
}
.obstacle__get{color:var(--ink-mute);font-size:var(--step-0)}
.obstacle__get b{display:block;color:var(--gold);font-weight:650;margin-bottom:.25rem;font-size:var(--step-0)}
.panel--cream .obstacle__get b{color:var(--rust)}
.panel--cream .obstacles,.panel--cream .obstacle{border-color:oklch(35.1% .07 51.5 / .18)}

/* Recognition list. One voice per line, not a two column obstacle row. */
.recog{border-top:1px solid var(--gold-hair)}
.recog li{
  padding-block:clamp(1rem,.8rem + .8vw,1.55rem);
  border-bottom:1px solid var(--gold-hair);
  font-family:var(--serif);font-size:var(--step-1);line-height:1.4;
  letter-spacing:-.01em;color:var(--ink);max-width:40ch
}
.panel--cream .recog,.panel--cream .recog li{border-color:oklch(35.1% .07 51.5 / .18)}

/* ---------- 13. The twelve weeks --------------------------------------- */
.phase{position:relative;padding-block:var(--sp-6)}
.phase__head{
  display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap;
  padding-bottom:var(--sp-4);margin-bottom:var(--sp-2)
}
.phase__name{
  font-family:var(--serif);font-size:var(--step-3);line-height:1;color:var(--gold)
}
.phase__weeks{font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.phase__note{color:var(--ink-mute);font-size:var(--step-0);max-width:44ch;margin-left:auto}
.weeks{border-top:1px solid var(--gold-hair)}
.week{
  display:grid;gap:.35rem var(--sp-5);align-items:baseline;
  grid-template-columns:2.6rem 1fr;
  padding-block:clamp(.9rem,.7rem + .7vw,1.3rem);border-bottom:1px solid var(--gold-hair)
}
@media (min-width:52rem){.week{grid-template-columns:2.6rem minmax(0,15rem) minmax(0,1fr)}}
.week__n{font-family:var(--serif);font-size:var(--step-1);color:var(--camel);line-height:1}
.week__t{font-weight:650;color:var(--ink)}
.week__d{color:var(--ink-mute);font-size:var(--step--1);grid-column:2/-1}
@media (min-width:52rem){.week__d{grid-column:auto;font-size:var(--step-0)}}

/* ---------- 14. Value stack -------------------------------------------- */
.stack-list{border-top:1px solid var(--gold-hair)}
.stack-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-5);
  padding-block:clamp(.75rem,.6rem + .5vw,1.05rem);border-bottom:1px solid var(--gold-hair)
}
.stack-row__t{color:var(--ink);max-width:46ch}
.stack-row__t small{display:block;color:var(--ink-mute);font-size:var(--step--1);margin-top:.15rem}
.stack-row__v{font-variant-numeric:tabular-nums;color:var(--ink-mute);white-space:nowrap;font-weight:500}
.stack-row--sum{border-bottom:0;padding-top:var(--sp-5)}
.stack-row--sum .stack-row__t{font-weight:700;color:var(--gold);font-size:var(--step-1)}
.stack-row--sum .stack-row__v{font-family:var(--serif);color:var(--gold);font-size:var(--step-2)}
/* Gold is 1.38:1 on cream. On light panels these switch to the deep rust. */
.panel--cream .stack-row--sum .stack-row__t,
.panel--cream .stack-row--sum .stack-row__v,
.panel--cream .total__n{color:var(--rust-deep)}
.panel--cream .total{border-color:oklch(44.4% .087 47.9 / .32)}
.panel--cream .band__label,
.panel--cream .phase__name,
.panel--cream .site-foot h4,
.panel--cream .field>label,
.panel--cream .legend,
.panel--cream .culture__name,
.panel--cream .guarantee__kind,
.panel--cream .freq li{color:var(--rust-deep)}
.panel--cream .rule-gold{background:var(--rust-deep);opacity:.3}

.total{
  text-align:center;padding:clamp(2.5rem,1.5rem + 5vw,4.5rem) var(--gutter);
  border:1px solid var(--gold-soft);border-radius:var(--r)
}
.total__n{
  font-family:var(--serif);font-size:clamp(3.2rem,2rem + 6.5vw,6rem);
  line-height:.95;color:var(--gold);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums
}
.total__l{
  font-size:var(--step--2);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:var(--sp-4)
}

/* ---------- 15. The seat ladder ---------------------------------------- */
.ladder{display:grid;gap:2px;container-type:inline-size}
.rung{
  display:grid;gap:.4rem var(--sp-5);align-items:center;
  grid-template-columns:1fr auto;
  padding:clamp(1.1rem,.85rem + 1vw,1.6rem) clamp(1.1rem,.8rem + 1.4vw,1.9rem);
  border-radius:var(--r);background:var(--espresso-lift);
  position:relative;overflow:clip
}
@container (min-width:38rem){.rung{grid-template-columns:11rem 8rem 1fr}}
.rung__seats{font-weight:700;color:var(--ink);letter-spacing:.02em}
.rung__price{font-family:var(--serif);font-size:var(--step-2);color:var(--ink-mute);line-height:1;text-align:right}
@container (min-width:38rem){.rung__price{text-align:left}}
.rung__give{color:var(--ink-mute);font-size:var(--step--1);grid-column:1/-1}
@container (min-width:38rem){.rung__give{grid-column:auto;font-size:var(--step-0)}}
.rung--now{background:var(--cocoa);outline:1px solid var(--gold-soft)}
.rung--now .rung__price{color:var(--gold)}
.rung--now .rung__seats{color:var(--gold)}
.rung--now .rung__give{color:var(--ink)}

/* Navy cards on a light section, which is what her reference shows. Placed
   after the .rung--now rules above: same specificity, so source order decides. */
.ladder--navy .rung{background:var(--midnight-card);color:#fff}
.ladder--navy .rung__seats{color:#fff}
.ladder--navy .rung__price{color:oklch(100% 0 0 / .82)}
.ladder--navy .rung__give,
.ladder--navy .rung--now .rung__give{color:oklch(100% 0 0 / .74)}
.ladder--navy .rung--now{outline:1px solid var(--gold-soft)}
.ladder--navy .rung--now .rung__price,
.ladder--navy .rung--now .rung__seats{color:var(--gold)}
.rung__tag{
  display:block;width:fit-content;margin-bottom:.5rem;font-style:normal;
  background:var(--gold);color:var(--espresso);
  font-size:var(--step--2);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.2rem .55rem;border-radius:var(--r)
}
.rung--gone{opacity:.45}

/* ---------- 16. Guarantees --------------------------------------------- */
.guarantees{display:grid;gap:var(--sp-4)}
@media (min-width:52rem){.guarantees{grid-template-columns:1fr 1fr}}
.guarantee{
  padding:clamp(1.6rem,1.1rem + 2vw,2.4rem);border-radius:var(--r);
  border:1px solid var(--gold-soft);display:flex;flex-direction:column;gap:var(--sp-3)
}
.guarantee__kind{
  font-size:var(--step--2);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)
}
.panel--cream .guarantee{border-color:oklch(51.8% .095 48.4 / .35)}
.panel--cream .guarantee__kind{color:var(--rust)}

/* Honest note. Voice device: where the site says the costly thing out loud. */
.honest{
  padding:clamp(1.4rem,1rem + 1.6vw,2rem) 0;
  border-top:1px solid var(--gold-hair);border-bottom:1px solid var(--gold-hair)
}
.honest__k{
  font-size:var(--step--2);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--sp-3);display:block
}
.panel--cream .honest__k{color:var(--rust)}
.panel--cream .honest{border-color:oklch(35.1% .07 51.5 / .2)}

/* ---------- 17. Quote / promise block ---------------------------------- */
.promise{
  font-family:var(--serif);font-size:var(--step-3);line-height:1.28;
  letter-spacing:-.018em;text-wrap:balance;max-width:24ch
}
.promise-wide{max-width:32ch}

/* ---------- 18. Feature rows (The Circle) ------------------------------ */
.rows{border-top:1px solid var(--gold-hair)}
.row2{
  display:grid;gap:.4rem var(--sp-7);
  padding-block:clamp(1.2rem,.9rem + 1.2vw,1.8rem);border-bottom:1px solid var(--gold-hair)
}
@media (min-width:52rem){.row2{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.row2__t{font-weight:650;color:var(--ink)}
.row2__d{color:var(--ink-mute);font-size:var(--step-0)}
.panel--midnight .rows,.panel--midnight .row2{border-color:oklch(82.2% .088 82.6 / .2)}

/* ---------- 19. Image apertures (awaiting Adraa's shoot) --------------- */
.shot{
  position:relative;border-radius:var(--r);overflow:clip;
  background:
    radial-gradient(130% 100% at 24% 6%, oklch(59.3% .119 48.4 / .62) 0%, transparent 58%),
    radial-gradient(110% 95% at 90% 96%, oklch(82.2% .088 82.6 / .34) 0%, transparent 56%),
    linear-gradient(158deg, oklch(35.1% .07 51.5) 0%, oklch(19% .034 52.9) 72%);
  border:1px solid var(--gold-hair);
  display:grid;place-items:center;isolation:isolate
}
.shot img{width:100%;height:100%;object-fit:cover;grid-area:1/1}
.shot__art{grid-area:1/1;width:100%;height:100%;pointer-events:none}
.shot__note{
  grid-area:1/1;align-self:end;justify-self:start;z-index:2;
  margin:var(--sp-4);padding:.45rem .7rem;border-radius:var(--r);
  background:oklch(20% .036 52.9 / .78);
  color:var(--camel);font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--gold-hair)
}
/* The mark itself, where the copy is about the mark. This slot used to hold a
   generated picture of two circles the SAME size, which contradicted the logo
   on every other page. Now it is the real geometry, lit rather than drawn. */
.shot--mark{
  background:
    radial-gradient(74% 60% at 50% 50%, oklch(30% .05 62 / .5) 0%, transparent 72%),
    oklch(12.5% .018 52.9)
}
.shot--mark::after{display:none}
.shot--mark .mark-large{width:min(82%,23rem)}
.shot--mark .mark-large__ring{border-color:oklch(82.2% .088 82.6 / .16)}
/* Stacked drop-shadows rather than an SVG blur filter: the strokes are the only
   painted thing, and where the two rings cross both halos land on the same
   pixels, so the overlap lights up on its own. */
/* Gold on gold here, not the two tone lockup. The paragraph beside it says the
   mark is drawn in gold, and terracotta at this size reads as a duller second
   ring rather than as the same light seen twice. */
.shot--mark .mark__a{stroke:var(--gold)}
.shot--mark .mark__b{stroke:oklch(88% .075 84)}
.shot--mark .mark{
  filter:
    drop-shadow(0 0 3px oklch(82.2% .088 82.6 / .65))
    drop-shadow(0 0 12px oklch(82.2% .088 82.6 / .40))
    drop-shadow(0 0 32px oklch(59.3% .119 48.4 / .32))
}
.shot--portrait{aspect-ratio:4/5}
.shot--wide{aspect-ratio:16/9}
.shot--square{aspect-ratio:1}

/* ---------- 20. Forms --------------------------------------------------- */
.form{max-width:44rem}
fieldset{border:0;padding:0;margin:0;min-width:0}
.step+.step{margin-top:var(--sp-8)}
.field{margin-bottom:var(--sp-5)}
.field>label,.legend{
  display:block;font-size:var(--step--1);font-weight:600;letter-spacing:.02em;
  color:var(--gold);margin-bottom:.5rem
}
.field__hint{display:block;font-weight:400;color:var(--ink-faint);font-size:var(--step--1);margin-top:.3rem}
.input,.textarea,.select{
  width:100%;background:var(--espresso-deep);color:var(--ink);
  border:1px solid var(--gold-hair);border-radius:var(--r);
  padding:.85rem 1rem;font-size:var(--step-0);line-height:1.5;
  transition:border-color .3s var(--ease),background-color .3s var(--ease)
}
.textarea{min-height:8rem;resize:vertical}
.select{appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23E1C082' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.input:hover,.textarea:hover,.select:hover{border-color:var(--gold-soft)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--gold);background:var(--espresso)}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.input::placeholder,.textarea::placeholder{color:var(--ink-faint);opacity:1}
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--terracotta)}
.error{display:block;color:var(--terracotta);font-size:var(--step--1);margin-top:.4rem;font-weight:500}
.error:empty{display:none}

/* Choice cards for radio groups */
.choices{display:grid;gap:.5rem}
.choice{
  display:flex;gap:var(--sp-4);align-items:flex-start;cursor:pointer;
  padding:1rem 1.1rem;border:1px solid var(--gold-hair);border-radius:var(--r);
  background:var(--espresso-deep);
  transition:border-color .3s var(--ease),background-color .3s var(--ease)
}
.choice:hover{border-color:var(--gold-soft)}
.choice input{
  appearance:none;flex:none;width:1.05rem;height:1.05rem;margin-top:.32rem;
  border:1px solid var(--camel);border-radius:50%;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)
}
.choice input[type="checkbox"]{border-radius:var(--r)}
.choice input:checked{border-color:var(--gold);box-shadow:inset 0 0 0 3.5px var(--espresso-deep),inset 0 0 0 1rem var(--gold)}
.choice:has(input:checked){border-color:var(--gold-soft);background:var(--cocoa)}
.choice:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.choice__t{display:block;font-weight:600;color:var(--ink)}
.choice__d{display:block;color:var(--ink-mute);font-size:var(--step--1);margin-top:.15rem}

/* Steps */
.steps{margin-bottom:var(--sp-7)}
.steps__bar{height:2px;background:var(--gold-hair);overflow:hidden;border-radius:2px}
.steps__fill{
  display:block;height:100%;background:var(--gold);
  transform-origin:left;transform:scaleX(var(--p,.34));
  transition:transform .6s var(--ease)
}
.steps__meta{
  display:flex;justify-content:space-between;gap:var(--sp-4);
  margin-top:.7rem;font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase
}
.steps__meta span:first-child{color:var(--gold)}
.steps__meta span:last-child{color:var(--ink-faint)}
.step[hidden]{display:none}
.form-actions{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;margin-top:var(--sp-6)}
.form-status{margin-top:var(--sp-5);font-size:var(--step--1)}
.form-status[data-state="error"]{color:var(--terracotta)}
.form-status[data-state="ok"]{color:var(--gold)}

/* ---------- 21. FAQ ----------------------------------------------------- */
.faq{border-top:1px solid var(--gold-hair)}
.faq details{border-bottom:1px solid var(--gold-hair)}
.faq summary{
  display:flex;justify-content:space-between;gap:var(--sp-5);align-items:baseline;
  padding-block:clamp(1.1rem,.9rem + .8vw,1.5rem);cursor:pointer;list-style:none;
  font-weight:650;color:var(--ink);font-size:var(--step-0);
  transition:color .3s var(--ease)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{
  content:"+";flex:none;color:var(--gold);font-size:var(--step-1);line-height:1;
  transition:transform .4s var(--ease)
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__a{padding-bottom:var(--sp-5);color:var(--ink-mute);max-width:62ch}
.panel--cream .faq,.panel--cream .faq details{border-color:oklch(35.1% .07 51.5 / .18)}

/* ---------- 22. Footer -------------------------------------------------- */
.site-foot{background:var(--espresso-deep);padding-block:var(--sp-8) var(--sp-6)}
.site-foot__grid{display:grid;gap:var(--sp-7)}
@media (min-width:52rem){.site-foot__grid{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.8fr))}}
.site-foot h4{
  font-size:var(--step--2);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--sp-4);font-weight:600
}
.foot-list{display:grid;gap:.6rem}
.foot-list a{text-decoration:none;color:var(--ink-mute);font-size:var(--step--1);transition:color .3s var(--ease)}
.foot-list a:hover{color:var(--cream)}
.site-foot__base{
  margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--gold-hair);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;
  font-size:var(--step--2);color:var(--ink-faint);letter-spacing:.04em
}

/* ---------- 23. Utility ------------------------------------------------- */
.grid-2{display:grid;gap:clamp(2rem,4vw,4rem)}
@media (min-width:56rem){.grid-2{grid-template-columns:1fr 1fr;align-items:start}}
.grid-2--lead{}
@media (min-width:56rem){.grid-2--lead{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.sticky-col{position:sticky;top:7rem}
@media (max-width:55.99rem){.sticky-col{position:static}}
.center{text-align:center;margin-inline:auto}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.tabnum{font-variant-numeric:tabular-nums}

/* ---------- 23b. Very narrow phones (320 and up) ----------------------- */
@media (max-width:34rem){
  /* nowrap buttons and band labels were being clipped at 320px */
  .btn{white-space:normal;text-align:center}
  .btn--lg{padding-inline:1.35rem}
  .hero__actions>.btn{flex:1 1 100%}
  .band{gap:var(--sp-4)}
  .band__label{white-space:normal}
  .phase__head{gap:var(--sp-3)}
}

/* ---------- 24. Motion -------------------------------------------------- */
/* Content is visible by default. Reveal only enhances. */
[data-reveal]{opacity:1}
.js [data-reveal]{opacity:0;translate:0 18px;
  transition:opacity .8s var(--ease-soft),translate .8s var(--ease)}
.js [data-reveal][data-in]{opacity:1;translate:none}
.js [data-reveal-stagger]>*{opacity:0;translate:0 14px;
  transition:opacity .7s var(--ease-soft),translate .7s var(--ease);
  transition-delay:calc(var(--i,0)*70ms)}
.js [data-reveal-stagger][data-in]>*{opacity:1;translate:none}
.js .band[data-reveal-band]{--band-x:0}
.js .band[data-reveal-band][data-in]{--band-x:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.12s !important;scroll-behavior:auto !important
  }
  .js [data-reveal],.js [data-reveal-stagger]>*{opacity:1 !important;translate:none !important}
  .js .band[data-reveal-band]{--band-x:1}
  .mark-large__ring{animation:none}
}

/* ---------- 25. Print --------------------------------------------------- */
@media print{
  body{background:#fff;color:#000}
  .site-head,.site-foot,.hero__glow,.spectrum,body::before{display:none}
  .panel--cream,.panel--cocoa,.panel--midnight{background:#fff;color:#000}
}

/* =========================================================================
   26. PREMIUM LAYER
   Material, light and choreography. Everything below enhances a page that
   already renders and reads correctly without it.
   ========================================================================= */

/* ---------- 26.1 Ambient light ------------------------------------------ */
/* A single warm source that drifts almost imperceptibly, so the dark never
   sits completely flat. One element, one transform, no repaint. */
.ambient{
  position:fixed;inset:-20% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(38% 42% at 72% 18%,
    oklch(82.2% .088 82.6 / .13) 0%,
    oklch(59.3% .119 48.4 / .07) 40%,
    transparent 72%);
  animation:drift 34s ease-in-out infinite alternate;
  will-change:transform
}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-6%,4%,0) scale(1.12)}
}
.panel--cream .ambient,.panel--midnight .ambient{display:none}

/* ---------- 26.2 Scroll progress ---------------------------------------- */
.progress{
  position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:var(--z-overlay);
  background:var(--gold);transform:scaleX(var(--p,0));transform-origin:left;
  pointer-events:none;opacity:.85
}

/* ---------- 26.3 Hero media --------------------------------------------- */
.hero{isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:0;overflow:clip;pointer-events:none}
.hero__media img,.hero__media video{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06) translate3d(0,var(--par,0px),0);
  will-change:transform
}
/* The scrim keeps the left column at essentially solid espresso, so the
   headline contrast is the same as it is on a plain background. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,
      var(--espresso) 0%, var(--espresso) 33%,
      oklch(26.6% .044 52.9 / .92) 48%,
      oklch(26.6% .044 52.9 / .62) 70%,
      oklch(26.6% .044 52.9 / .3) 100%),
    radial-gradient(150% 125% at 10% 45%, transparent 40%, oklch(20% .036 52.9 / .62) 100%)
}
/* Centred heroes: the text sits in the middle, so the scrim has to be
   radial. Measured 2.96:1 on the thank you page before this existed. */
.hero__scrim--center{
  background:
    radial-gradient(86% 78% at 50% 50%,
      oklch(24% .04 52.9 / .95) 0%,
      oklch(24% .04 52.9 / .9) 52%,
      oklch(24% .04 52.9 / .62) 100%),
    linear-gradient(180deg, var(--espresso) 0%, transparent 30%, transparent 70%, var(--espresso) 100%)
}
.hero--media .hero__glow{opacity:.55}
.hero--media .hero__in{z-index:2}

/* ---------- 26.4 Photography -------------------------------------------- */
/* One grade across every image so generated, stock and real photographs all
   sit inside the same palette. */
.shot{isolation:isolate}
.shot img{
  grid-area:1/1;width:100%;height:100%;object-fit:cover;
  filter:saturate(.88) contrast(1.05) brightness(.96);
  transform:scale(1.02) translate3d(0,var(--par,0px),0)
}
.shot::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, transparent 44%, oklch(19% .034 52.9 / .62) 100%),
    linear-gradient(0deg, oklch(59.3% .119 48.4 / .13), oklch(59.3% .119 48.4 / .13));
  mix-blend-mode:multiply
}
.shot:has(img) .shot__art{display:none}
/* Real photographs. The atmosphere grade above was tuned for generated imagery
   and turns skin orange, so these keep the frame and drop the wash. */
.shot--real img{filter:saturate(.97) contrast(1.02) brightness(1)}
.shot--real::after{
  background:linear-gradient(180deg, transparent 56%, oklch(19% .034 52.9 / .38) 100%);
  mix-blend-mode:normal
}
/* <picture> is now the grid child, so it carries the cell the img used to. */
.shot picture{grid-area:1/1;display:block;width:100%;height:100%}
.hero__media picture{display:block;width:100%;height:100%}
.shot__note{z-index:3}

/* Corner marks. The gold band, folded into a frame. */
.shot::before{
  content:"";position:absolute;z-index:2;pointer-events:none;
  inset:10px;
  border:1px solid oklch(82.2% .088 82.6 / .28);
  clip-path:polygon(
    0 0, 26px 0, 26px 1px, 1px 1px, 1px 26px, 0 26px,
    0 100%, 26px 100%, 26px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 26px), 0 calc(100% - 26px),
    100% 100%, calc(100% - 26px) 100%, calc(100% - 26px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 26px), 100% calc(100% - 26px),
    100% 0, calc(100% - 26px) 0, calc(100% - 26px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 26px, 100% 26px)
}

/* Full bleed media band, used between sections */
.plate{position:relative;overflow:clip;isolation:isolate}
.plate__media{position:absolute;inset:0;z-index:0}
.plate__media img,.plate__media video{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.04);
  transform:scale(1.08) translate3d(0,var(--par,0px),0);will-change:transform
}
.plate__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    var(--espresso) 0%, oklch(26.6% .044 52.9 / .58) 26%,
    oklch(26.6% .044 52.9 / .58) 74%, var(--espresso) 100%)
}
.plate__in{position:relative;z-index:2}
.plate--thin{height:clamp(9rem,18vw,17rem)}
/* A plate that follows the midnight room has to fade out of midnight, not
   out of espresso, or the seam shows as a hard band. */
/* Navy above and navy below, so the band never introduces a second colour. */
.plate--from-midnight .plate__scrim{
  background:linear-gradient(180deg,
    var(--midnight-deep) 0%,
    oklch(18.3% .065 256.8 / .52) 26%,
    oklch(18.3% .065 256.8 / .52) 74%,
    var(--midnight-deep) 100%)
}

/* ---------- 26.5 Line reveals ------------------------------------------- */
/* Applied by script after measuring real line boxes. The element renders
   normally until it has been split, so nothing depends on this running. */
.split{display:block}
.split .ln{display:block;overflow:hidden}
.split .ln>span{
  display:block;
  transform:translate3d(0,110%,0) rotate(1.6deg);
  transform-origin:left top;
  opacity:0;
  transition:transform 1s var(--ease),opacity .8s var(--ease-soft);
  transition-delay:calc(var(--l,0)*88ms)
}
.split[data-in] .ln>span{transform:none;opacity:1}

/* ---------- 26.6 Buttons, refined --------------------------------------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn--gold{
  background-image:linear-gradient(180deg,
    oklch(88% .075 84) 0%, var(--gold) 46%, oklch(78% .09 80) 100%);
  box-shadow:0 1px 0 oklch(94% .05 88 / .55) inset, 0 8px 24px -14px oklch(82.2% .088 82.6 / .8)
}
.btn--gold:hover{box-shadow:0 1px 0 oklch(96% .04 88 / .7) inset, 0 12px 30px -12px oklch(82.2% .088 82.6 / .9)}
/* One slow light sweep across the fill on hover */
.btn--gold::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg, transparent 34%,
    oklch(99% .02 90 / .55) 50%, transparent 66%);
  transform:translateX(-120%);
  transition:transform .9s var(--ease)
}
.btn--gold:hover::after{transform:translateX(120%)}
.btn--ghost{backdrop-filter:none}
.btn--ghost::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, oklch(82.2% .088 82.6 / .1), transparent 70%);
  opacity:0;transition:opacity .4s var(--ease)
}
.btn--ghost:hover::after{opacity:1}

/* ---------- 26.7 The mark, drawn ---------------------------------------- */
.first-visit .mark--draw .mark__a{
  stroke-dasharray:214;stroke-dashoffset:214;
  animation:draw 1.3s var(--ease) forwards
}
.first-visit .mark--draw .mark__b{
  stroke-dasharray:168;stroke-dashoffset:168;
  animation:draw 1.3s var(--ease) .18s forwards
}
@keyframes draw{to{stroke-dashoffset:0}}

/* The large mark draws itself once, when it enters */
.mark-large .mark__a{stroke-dasharray:214;stroke-dashoffset:214;transition:stroke-dashoffset 1.7s var(--ease)}
.mark-large .mark__b{stroke-dasharray:168;stroke-dashoffset:168;transition:stroke-dashoffset 1.7s var(--ease) .22s}
.mark-large[data-in] .mark circle{stroke-dashoffset:0}
html:not(.js) .mark-large .mark circle{stroke-dashoffset:0}

/* ---------- 26.7a The mark in three dimensions -------------------------- */
/* A canvas over the vector. It only fades in once it has actually drawn, so a
   browser without canvas, or with scripting off, keeps the flat mark. */
.mark-large__gl{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .9s var(--ease)
}
.mark-large[data-mark3d-ready] .mark-large__gl{opacity:1}
.mark-large[data-mark3d-ready] .mark{opacity:0;transition:opacity .7s var(--ease)}
.mark-large[data-mark3d] .mark-large__ring{opacity:.5}

/* ---------- 26.7b The mark, as film ------------------------------------- */
/* The animated mark sits over the drawn SVG rather than replacing it, so a
   refused autoplay, a reduced-motion setting or a missing file all fall back
   to the crisp vector underneath with nothing missing. */
.mark-large__film{
  position:absolute;inset:0;z-index:2;border-radius:50%;overflow:clip;
  opacity:0;transition:opacity .9s var(--ease);pointer-events:none
}
/* lighten, not normal: the film's own dark ground is the same espresso as the
   page, so max-of-channels drops it away and only the gold survives. That keeps
   the hero video visible straight through the mark. */
.mark-large__film video{
  width:100%;height:100%;object-fit:cover;display:block;
  mix-blend-mode:lighten
}
.mark-large__film[data-playing]{opacity:1}
.mark-large:has(.mark-large__film[data-playing]) .mark{opacity:0;transition:opacity .6s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .mark-large__film{display:none}
}

/* ---------- 26.8 Section seams ------------------------------------------ */
/* A soft wedge where dark meets light, so panels read as one lit room rather
   than stacked blocks. */
.panel--cream::before{
  content:"";position:absolute;inset-inline:0;inset-block-start:-1px;height:clamp(3rem,7vw,6rem);
  pointer-events:none;z-index:1;
  background:linear-gradient(180deg, oklch(26.6% .044 52.9 / .28), transparent)
}
/* Navy gets its own seam. Fading espresso over blue mixes brown into it and
   leaves a muddy band; this fades a darker navy instead. */
.panel--midnight::before{
  content:"";position:absolute;inset-inline:0;inset-block-start:-1px;height:clamp(2rem,5vw,4rem);
  pointer-events:none;z-index:1;
  background:linear-gradient(180deg, oklch(10% .05 258 / .55), transparent)
}
/* Two navy panels touching do not need a seam between them at all. */
.panel--midnight + .panel--midnight::before{display:none}
.panel--cream>*,.panel--midnight>*{position:relative;z-index:2}

/* ---------- 26.9 Type detail -------------------------------------------- */
.display{font-feature-settings:"kern" 1,"liga" 1;font-kerning:normal}
/* No hanging punctuation. It was applied to every .promise, but only one of
   them actually opens with a quote, so the rest had their first letter pulled
   left and clipped away by the line mask's overflow. It cannot work here
   anyway: every line is an overflow:hidden box, so anything hung outside the
   text edge is cut off by definition. */
.tabnum,.stack-row__v,.rung__price,.total__n{font-variant-numeric:tabular-nums lining-nums}
.lede{letter-spacing:-.004em}
.freq li{transition:color .5s var(--ease)}

/* Weight and size do the work where a single serif weight cannot */
.eyebrow-band .band__label{font-weight:700}

/* ---------- 26.10 Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ambient{animation:none}
  .hero__media img,.hero__media video,.shot img,.plate__media img,.plate__media video{transform:none}
  .split .ln>span{transform:none !important;opacity:1 !important}
  .first-visit .mark--draw circle{animation:none;stroke-dashoffset:0}
  .mark-large .mark circle{stroke-dashoffset:0 !important;transition:none}
  .btn--gold::after{display:none}
  .progress{display:none}
}

/* =========================================================================
   27. INTERACTION
   Everything under the cursor answers. Scoped entirely to fine pointers, so a
   touch screen never inherits a hover state it cannot leave.
   ========================================================================= */

:root{ --z-cursor:1100; }

@media (hover:hover) and (pointer:fine){

  /* ---------- 27.1 The cursor is the mark ------------------------------- */
  /* Big gold ring lags, small terracotta ring leads. Moving pulls them apart;
     stopping lets them settle back into the logo. */
  .cursor{position:fixed;inset:0;z-index:var(--z-cursor);pointer-events:none;
          contain:layout style;display:none}
  html.cursor-on .cursor{display:block}
  html.cursor-on,html.cursor-on body,
  html.cursor-on a,html.cursor-on button,html.cursor-on summary,
  html.cursor-on label,html.cursor-on select{cursor:none}
  /* Text entry keeps its own caret, and the ring gets out of the way. */
  html.cursor-on input,html.cursor-on textarea{cursor:text}
  html.cursor-on[data-cursor="text"] .cursor{opacity:0}
  html.cursor-on[data-cursor="off"] .cursor{opacity:0}

  .cursor span{
    position:absolute;top:0;left:0;border-radius:50%;
    border:1px solid var(--gold);
    translate:var(--x,-200px) var(--y,-200px);
    scale:var(--s,1);
    transition:scale .38s var(--ease),opacity .3s var(--ease),
               border-color .3s var(--ease),background-color .3s var(--ease);
    will-change:translate
  }
  .cursor__a{width:30px;height:30px}
  .cursor__b{width:23.6px;height:23.6px;border-color:var(--terracotta)}
  .cursor{transition:opacity .25s var(--ease)}

  /* Over anything you can act on, the mark opens up */
  html[data-cursor="act"] .cursor__a{--s:1.75;border-color:var(--gold-warm)}
  html[data-cursor="act"] .cursor__b{--s:1.75;background:oklch(59.3% .119 48.4 / .16)}

  /* ---------- 27.2 Cards ------------------------------------------------- */
  .tier{transition:transform .5s var(--ease)}
  .tier::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(16rem 16rem at var(--mx,50%) var(--my,50%),
      oklch(97% .03 88 / .17), transparent 68%);
    opacity:0;transition:opacity .45s var(--ease)
  }
  .tier>*{position:relative;z-index:1}
  .tier:hover{transform:translateY(-5px)}
  .tier:hover::after{opacity:1}
  .tier__arc{transition:transform .8s var(--ease),opacity .5s var(--ease)}
  .tier:hover .tier__arc{transform:scale(1.14) rotate(14deg);opacity:.4}
  .tier__go{transition:gap .35s var(--ease)}
  .tier:hover .tier__go{gap:.95rem}

  .culture{transition:transform .5s var(--ease)}
  .culture:hover{transform:translateY(-4px)}
  .culture__swatch{transition:filter .5s var(--ease)}
  .culture:hover .culture__swatch{filter:brightness(1.16)}

  .guarantee,.honest{transition:border-color .4s var(--ease)}
  .guarantee:hover{border-color:var(--gold)}

  /* ---------- 27.3 Rows -------------------------------------------------- */
  /* A wash that opens from the left, so a row lights up along its reading
     direction rather than just tinting. */
  .obstacle,.week,.stack-row,.row2,.rung,.recog li,.faq summary{position:relative}
  .obstacle::after,.week::after,.stack-row::after,.row2::after,
  .rung::after,.recog li::after,.faq summary::after{
    content:"";position:absolute;z-index:-1;
    inset:0 calc(var(--gutter) * -0.5);
    background:linear-gradient(90deg,
      oklch(82.2% .088 82.6 / .09), oklch(82.2% .088 82.6 / .02) 62%, transparent);
    transform:scaleX(0);transform-origin:left;
    transition:transform .55s var(--ease)
  }
  .obstacle:hover::after,.week:hover::after,.stack-row:hover::after,
  .row2:hover::after,.rung:hover::after,.recog li:hover::after{transform:scaleX(1)}

  .obstacle__get b,.week__n,.stack-row__v,.row2__t{transition:color .3s var(--ease)}
  .obstacle:hover .obstacle__get b{color:var(--gold-warm)}
  .week:hover .week__n{color:var(--gold)}
  .stack-row:hover .stack-row__v{color:var(--gold)}
  .panel--cream .obstacle:hover .obstacle__get b,
  .panel--cream .stack-row:hover .stack-row__v{color:var(--rust-deep)}

  .rung{transition:outline-color .4s var(--ease)}
  .rung:hover{outline:1px solid var(--gold-soft);outline-offset:-1px}

  /* The FAQ marker keeps its own ::after, so its wash rides the details row */
  .faq summary::after{content:"+";position:static;background:none;transform:none;
    inset:auto;z-index:auto}
  .faq details{position:relative;transition:background-color .4s var(--ease)}
  .faq details:hover{background:oklch(82.2% .088 82.6 / .045)}

  /* ---------- 27.4 Imagery ----------------------------------------------- */
  .shot img{transition:transform .9s var(--ease),filter .6s var(--ease)}
  .shot:hover img{transform:scale(1.055);filter:saturate(.97) contrast(1.03) brightness(1.04)}
  .shot::before{transition:border-color .5s var(--ease),inset .5s var(--ease)}
  .shot:hover::before{border-color:oklch(82.2% .088 82.6 / .55);inset:6px}

  /* ---------- 27.5 Type and small things --------------------------------- */
  .freq li{transition:color .35s var(--ease),transform .45s var(--ease);cursor:default}
  .freq li:hover{color:var(--gold-warm);transform:translateY(-3px)}
  .panel--cream .freq li:hover{color:var(--rust)}

  .spectrum span{transition:flex-grow .6s var(--ease),filter .4s var(--ease)}
  .spectrum:hover span{filter:saturate(.7)}
  .spectrum span:hover{flex-grow:2.2;filter:saturate(1.25) brightness(1.1)}

  .foot-list a{transition:color .3s var(--ease),padding-left .35s var(--ease)}
  .foot-list a:hover{padding-left:.4rem}

  .choice{transition:transform .35s var(--ease),border-color .3s var(--ease),
                     background-color .3s var(--ease)}
  .choice:hover{transform:translateX(3px)}

  /* ---------- 27.6 Buttons pull toward the cursor ------------------------ */
  .btn{translate:var(--mgx,0) var(--mgy,0);
       transition:background-color .35s var(--ease),color .35s var(--ease),
                  border-color .35s var(--ease),transform .35s var(--ease),
                  translate .5s var(--ease),box-shadow .35s var(--ease)}
  .btn[data-magnet]{transition:background-color .35s var(--ease),color .35s var(--ease),
                  border-color .35s var(--ease),transform .35s var(--ease),
                  box-shadow .35s var(--ease)}

  /* ---------- 27.7 The mark answers too ---------------------------------- */
  .mark-large{transition:scale .6s var(--ease)}
  .mark-large:hover{scale:1.04}
  .brand .mark{transition:scale .5s var(--ease),rotate .8s var(--ease)}
  .brand:hover .mark{scale:1.1}
}

@media (prefers-reduced-motion:reduce){
  .cursor{display:none !important}
  html.cursor-on,html.cursor-on body{cursor:auto !important}
  .tier:hover,.culture:hover,.choice:hover,.freq li:hover,.mark-large:hover{transform:none;scale:1}
  .shot:hover img{transform:none}
}

/* The blue room, top to bottom. An espresso header capping an all navy page
   was the hard seam in her screenshot, so on this page the chrome follows the
   page rather than the site. Not inside any media query: touch needs it too. */
body[data-page="circle"] .site-head{background:var(--midnight-deep)}
body[data-page="circle"] .site-head[data-stuck]{border-bottom-color:var(--gold-hair)}
body[data-page="circle"] .site-foot{background:oklch(13% .055 257)}
body[data-page="circle"] .panel--midnight::before{display:none}
/* Form fields default to espresso, which read as brown boxes on the blue. */
.panel--midnight .input,
.panel--midnight .textarea,
.panel--midnight .select{background:oklch(13% .055 257);border-color:oklch(82.2% .088 82.6 / .3)}
.panel--midnight .input:focus,
.panel--midnight .textarea:focus,
.panel--midnight .select:focus{background:oklch(16% .06 257);border-color:var(--gold)}
.panel--midnight .input::placeholder,
.panel--midnight .textarea::placeholder{color:oklch(100% 0 0 / .5)}
.panel--midnight .field>label,.panel--midnight .legend{color:var(--gold)}
.panel--midnight .honest{border-color:oklch(82.2% .088 82.6 / .26)}
.panel--midnight .honest__k{color:var(--gold)}

/* =========================================================================
   28. PHONE
   Notch and home-indicator safety, and thumb-sized targets. Measured on a
   390x844 at DPR 3, and in landscape where the notch eats the left edge.
   ========================================================================= */

/* The sticky header and the slide-down nav both run edge to edge, so in
   landscape on a notched phone their contents sat under the sensor housing. */
.site-head__in{
  padding-inline:max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
}
.site-foot,
.hero__in,
.wrap,
.wrap-wide{
  padding-inline:max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
}
/* Nothing should end up behind the home indicator. */
.site-foot{padding-bottom:calc(var(--sp-6) + env(safe-area-inset-bottom))}

@media (max-width:60rem){
  .nav{
    padding-left:calc(var(--gutter) + env(safe-area-inset-left));
    padding-right:calc(var(--gutter) + env(safe-area-inset-right));
    padding-bottom:calc(var(--sp-6) + env(safe-area-inset-bottom))
  }
}

/* ---------- Thumb targets ------------------------------------------------ */
/* Apple asks for 44px. Inline links inside a paragraph are exempt and stay as
   they are, since padding them out would wreck the line spacing. */
@media (pointer:coarse){
  .brand{min-height:44px}
  .nav-toggle{min-height:44px;padding-block:.75rem}
  .foot-list{gap:0}
  .foot-list a{display:flex;align-items:center;min-height:44px}
  .site-foot__base{gap:var(--sp-3) var(--sp-5)}
  .faq summary{padding-block:1.15rem}
  .spectrum{--spectrum-h:12px}
}