/* ============================================================
   The Aisle Advisors — "The Thread"
   Fusco Studio · golden-hour palette sampled from the hero film
   ============================================================ */

:root{
  /* ---- Palette: Timeless Celebrations ---------------------- */
  --ivory:      #F9F7F2;   /* the page — clean, elegant, versatile  */
  --paper:      #FFFFFC;   /* raised cards, a half-step above ivory */
  --sand:       #E8DCCF;   /* warm, natural, inviting               */
  --blush:      #E7C6C1;   /* romantic, modern, soft                */
  --blush-wash: #F7EFEC;   /* blush laid over ivory                 */
  --blush-deep: #D6A9A1;   /* blush a step deeper, for a line on ivory */
  --sage:       #A7B09F;   /* calm, organic, balanced               */
  --mist:       #F0F2EC;   /* sage over ivory — the quiet ground    */
  --taupe:      #C9B8A7;   /* classic, refined, understated         */
  --olive:      #5F6B57;   /* earthy, sophisticated — the accent    */
  --olive-t:    #4E5A47;   /* the same green, darkened for TEXT     */
  --olive-deep: #46503F;   /* the dark green ground                 */
  --charcoal:   #2E2E2A;   /* strong, elegant, for contrast         */

  --ink:        #2E2E2A;
  --ink-2:      #4A4A44;
  --muted:      #5B5E55;   /* olive-grey body secondary, 4.9:1 on sand */

  --line:       rgba(46,46,42,.14);
  --line-soft:  rgba(46,46,42,.07);

  --serif: "Cormorant Infant", Georgia, "Times New Roman", serif;
  --sans:  "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.16,.84,.44,1);

  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1280px;
  --r: 6px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* anchors land below the fixed bar, not under it. --hdr-h is measured in JS so
   it tracks the real header height at every breakpoint. */
section[id], div[id]{ scroll-margin-top:var(--hdr-h, 104px); }
#top{ scroll-margin-top:0; }
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.68;
  font-weight:380; letter-spacing:.004em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:1.5px solid var(--olive); outline-offset:4px; border-radius:2px; }
button{ font:inherit; color:inherit; background:none; border:0; }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; letter-spacing:.005em; line-height:1.06; margin:0; }
h1{ font-size:clamp(2.5rem, 4.9vw, 4.5rem); }
h2{ font-size:clamp(2.3rem, 4.6vw, 4rem); line-height:1.02; }
h3{ font-size:clamp(1.5rem, 2.2vw, 2.05rem); line-height:1.14; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:840px; }

/* ---- Shared bits ----------------------------------------- */
.eyebrow{
  font-family:var(--serif); font-style:italic; font-size:1.06rem;
  color:var(--olive-t); letter-spacing:.01em; margin:0 0 .9rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--olive); opacity:.85;
  transform-origin:left; transform:scaleX(0); transition:transform .9s var(--slow) .1s;
}
.in .eyebrow::before, .eyebrow.in::before{ transform:scaleX(1); }

.lede{ font-size:clamp(1.05rem,1.35vw,1.2rem); color:var(--muted); max-width:60ch; }

.rule{ height:1px; background:var(--line); transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--slow); }
.in .rule, .rule.in{ transform:scaleX(1); }

/* Buttons ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; position:relative;
  padding:.92rem 1.55rem; border-radius:var(--r); border:1px solid transparent;
  font-size:.95rem; font-weight:600; letter-spacing:.012em; cursor:pointer;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.btn .arw{ transition:transform .45s var(--ease); }
.btn:hover .arw{ transform:translateX(5px); }
.btn--accent{ background:var(--olive); color:var(--ivory); }
.btn--accent:hover{ background:var(--charcoal); }
.btn--ink{ background:var(--ink); color:var(--ivory); }
.btn--ink:hover{ background:var(--olive); }
.btn--ghost{ border-color:var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--ivory); }
.btn--on-film{ border-color:rgba(249,247,242,.52); color:var(--ivory); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); background:rgba(46,46,42,.26); }
.btn--on-film:hover{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  --hdr-gap:clamp(2.4rem, 6vw, 7rem);
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  gap:var(--hdr-gap); padding:.8rem var(--gut);
  transition:background .6s var(--ease), border-color .6s var(--ease), padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav{ display:flex; align-items:center; gap:var(--hdr-gap); }
.nav a{
  font-size:.98rem; font-weight:600; letter-spacing:.018em; color:var(--ivory);
  position:relative; padding-block:.34rem; transition:color .5s var(--ease);
}
.hdr.solid .nav a{ color:var(--ink); }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.hdr.solid{ background:rgba(249,247,242,.9); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--line-soft); padding-block:.85rem; }
.mark{ display:flex; flex-direction:column; line-height:1; color:var(--ivory); transition:color .6s var(--ease); }
.hdr.solid .mark{ color:var(--ink); }
.mark__n{ font-family:var(--serif); font-size:1.42rem; letter-spacing:.012em; }
.mark__s{ font-size:.62rem; letter-spacing:.19em; text-transform:uppercase; opacity:.72; margin-top:.34rem; font-weight:500; }

/* Header lockup: the client's own mark, keyed off its screenshot background.
   Two colour builds cross-fade with the bar rather than one image being
   filtered, so the ivory and the charcoal are both exact. */
.hdr .mark{ position:relative; display:block; line-height:0; flex:none; }
.mark__img{ display:block; height:76px; width:auto; transition:opacity .6s var(--ease); }
.mark__img--dark{ position:absolute; inset:0; opacity:0; }
.hdr.solid .mark__img--light{ opacity:0; }
.hdr.solid .mark__img--dark{ opacity:1; }

.burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.burger span{ display:block; width:24px; height:1.5px; background:currentColor; margin:5px 0; transition:transform .4s var(--ease), opacity .3s; }
.hdr .burger{ color:var(--ivory); } .hdr.solid .burger{ color:var(--ink); }

.drawer{ position:fixed; inset:0; z-index:70; background:var(--ink); color:var(--ivory);
  display:flex; flex-direction:column; justify-content:center; gap:.2rem; padding:var(--gut);
  transform:translateY(-100%); transition:transform .68s var(--slow); }
.drawer.open{ transform:none; }
.drawer a{ font-family:var(--serif); font-size:2.3rem; padding:.32rem 0; border-bottom:1px solid rgba(249,247,242,.12); }
.drawer .btn{ margin-top:1.6rem; align-self:flex-start; }
.drawer__x{ position:absolute; top:1.4rem; right:var(--gut); background:none; border:0; font-size:1.8rem; cursor:pointer; color:inherit; }

/* ============================================================
   FILM HERO — scroll-scrubbed
   ============================================================ */
.film{ position:relative; }
.film__track{ height:460vh; }
.film__stage{ position:sticky; top:0; height:100svh; overflow:hidden; background:var(--charcoal); }
.film__stage video, .film__stage canvas, .film__stage img.fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.film__grade{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(30,30,26,0) 0%, rgba(30,30,26,0) 46%,
                    rgba(30,30,26,.22) 78%, rgba(30,30,26,.68) 100%),
    radial-gradient(120% 88% at 50% 42%, rgba(0,0,0,0) 44%, rgba(26,28,22,.44) 100%);
}
.film__grain{ position:absolute; inset:-120px; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-14px,9px)} 66%{transform:translate(11px,-12px)} 100%{transform:translate(0,0)} }

/* Centred masthead. The block sits a little above true centre — dead centre
   reads static — and every line is balanced rather than left to rag, which is
   what keeps a centred setting from looking forced. */
.hero{ position:absolute; inset:0; z-index:3; display:flex; align-items:flex-end;
  justify-content:center; padding:0 var(--gut) 13vh; pointer-events:none; }
.hero__in{ width:100%; max-width:var(--maxw); margin-inline:auto; }
.hero__box{ max-width:min(1020px, 92%); margin-inline:auto; text-align:center;
  color:var(--ivory); pointer-events:auto; }
/* The title is the whole hero now, so it carries the voice on its own:
   Fraunces at full optical size with the WONK axis on — its letterforms go
   deliberately odd at display sizes — against Instrument Serif's very fine
   italic for the turn of phrase. */
.hero h1{
  font-family:"Fraunces", var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 40, "WONK" 1;
  font-weight:380; font-size:clamp(2.3rem, 4.9vw, 4.7rem); line-height:1.04;
  letter-spacing:-.014em; text-wrap:balance;
  text-shadow:0 1px 3px rgba(16,14,10,.32), 0 2px 44px rgba(16,14,10,.55);
}
.hero h1 em{
  font-family:"Instrument Serif", var(--serif);
  font-style:italic; font-weight:400; letter-spacing:.005em; color:var(--blush);
  white-space:nowrap;   /* the turn of phrase never splits: on phones it takes a line of its own, never leaves "side." alone */
}
/* Words that ride the descent (kept minimal — the film leads) */
/* The beats sit higher and pulled in from the edges — a narrower measure than
   the page grid brings both the left and the right one toward the middle —
   and they carry the title's face, one size down. */
.beat{ position:absolute; z-index:3; inset:auto var(--gut) 38vh var(--gut);
  color:var(--ivory); opacity:0; pointer-events:none; }
.beat__in{ max-width:880px; margin-inline:auto; }
.beat p{
  font-family:"Fraunces", var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 40, "WONK" 1;
  font-weight:380; font-size:clamp(1.15rem, 2.05vw, 1.95rem); line-height:1.16;
  letter-spacing:-.008em; max-width:22ch;
  text-shadow:0 1px 3px rgba(16,14,10,.32), 0 2px 34px rgba(16,14,10,.5); }
.beat--r .beat__in{ display:flex; justify-content:flex-end; }
.beat--r p{ text-align:right; }

/* ============================================================
   INTERSTITIAL FILM — the table, scroll-scrubbed
   A shallow full-bleed band pinned mid-screen: the film is already
   in the middle of the viewport when it starts to move. The caption
   is centred in the band, so the space above it matches the space
   below it.
   ============================================================ */
.film2{ position:relative; }
.film2__track{ height:500vh; }
.film2__stage{
  position:sticky; top:0; height:100svh; background:var(--ivory);
  display:grid; place-items:center;
}
/* Full-height in layout; the visible window is a symmetric clip that JS
   opens as you scroll. Clipping rather than resizing keeps the caption
   centred and costs no layout. .film2__sizer is the single source of
   truth for the closed window height — JS reads it, CSS sets it. */
.film2__band{
  position:relative; width:100%; height:100svh;
  overflow:hidden; background:var(--charcoal);
  clip-path:inset(var(--in, 27svh) 0 var(--in, 27svh) 0);
}
.film2__sizer{
  position:absolute; left:0; top:0; width:0; pointer-events:none;
  height:clamp(330px, 46svh, 470px);
}
.film2__band video, .film2__band canvas, .film2__band img.fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.film__grade--low{
  background:
    /* weighted toward the text column — the candles sit behind the headline */
    linear-gradient(to right, rgba(28,28,24,.58) 0%, rgba(28,28,24,.44) 32%,
                    rgba(28,28,24,.14) 58%, rgba(28,28,24,0) 74%),
    linear-gradient(to bottom, rgba(30,30,26,.28) 0%, rgba(30,30,26,.16) 34%,
                    rgba(30,30,26,.24) 66%, rgba(30,30,26,.44) 100%),
    radial-gradient(115% 90% at 50% 50%, rgba(0,0,0,0) 40%, rgba(26,28,22,.34) 100%);
}
.film2__cap{
  position:absolute; inset:0; z-index:3; display:grid; align-content:center;
  padding:1.6rem var(--gut); color:var(--ivory); opacity:0; pointer-events:none;
}
.film2__in{ width:100%; max-width:var(--maxw); margin-inline:auto; }
.film2__k{
  font-family:var(--serif); font-style:italic; font-size:1.02rem; color:var(--blush);
  display:flex; align-items:center; gap:.7rem; margin:0 0 .7rem;
}
.film2__k::before{ content:""; width:32px; height:1px; background:var(--blush); opacity:.85; }
.film2__cap h2{ max-width:16ch; font-size:clamp(1.8rem,3vw,2.7rem);
  text-shadow:0 2px 28px rgba(18,18,14,.55); }
.film2__p{
  margin-top:1rem; max-width:44ch; font-size:.98rem;
  color:rgba(249,247,242,.9); text-shadow:0 1px 16px rgba(18,18,14,.6);
}
/* The whole add-on block — heading, copy and both cards — travels up across
   the still-pinned film. There is no section beneath it any more; this IS the
   section. Centred, on nothing but the footage, with a scrim that deepens only
   while it is on screen. */
.film2__scrim{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(to bottom, rgba(20,20,17,.62) 0%, rgba(20,20,17,.70) 100%);
}
.film2__lift{
  position:absolute; inset:0; z-index:4; color:var(--ivory); opacity:0; pointer-events:none;
}
.film2__lift.live{ pointer-events:auto; }
.film2__liftin{
  position:absolute; left:0; right:0; top:0; margin-inline:auto;
  max-width:var(--maxw); padding:.9rem var(--gut); text-align:center;
}
.film2__lift .film2__k{ display:inline-flex; }
.film2__lift .film2__k::after{ content:""; width:32px; height:1px; background:var(--blush); opacity:.85; }
.film2__lift h2{
  max-width:22ch; margin-inline:auto; font-size:clamp(1.5rem,2.3vw,2.05rem); line-height:1.06;
  text-shadow:0 2px 28px rgba(16,16,12,.6);
}
.film2__p--wide{
  max-width:66ch; margin:.8rem auto 0; font-size:.95rem;
  color:rgba(249,247,242,.92); text-shadow:0 1px 16px rgba(16,16,12,.65);
}
.film2__lift .duo{ margin-top:clamp(.9rem,2vh,1.45rem); text-align:left; gap:1rem; }
.film2__lift .panel{
  background:rgba(18,18,15,.30); border-color:rgba(249,247,242,.26);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:clamp(1.1rem,1.6vw,1.4rem);
}
.film2__lift .panel h3{ font-size:1.18rem; margin-bottom:.25rem; }
.film2__lift .panel__price{ color:var(--blush); font-size:.92rem; margin-bottom:.72rem; }
.film2__lift .panel ul{ gap:.38rem; margin-bottom:.92rem; }
.film2__lift .panel li{ font-size:.84rem; line-height:1.44; color:rgba(249,247,242,.9); }
.film2__lift .panel li::before{ background:var(--blush); margin-top:.62rem; }
.film2__lift .panel .note{ color:rgba(249,247,242,.72); font-size:.78rem; margin-bottom:.8rem; }
/* short windows: the block must clear the fixed bar and the fold, so it
   compresses rather than being cropped */
@media(min-width:901px) and (max-height:780px){
  .film2__lift .film2__k{ font-size:.9rem; margin-bottom:.4rem; }
  .film2__lift h2{ font-size:1.7rem; }
  .film2__p--wide{ font-size:.88rem; margin-top:.6rem; }
  .film2__lift .duo{ margin-top:.85rem; gap:.85rem; }
  .film2__lift .panel{ padding:.95rem 1.05rem; }
  .film2__lift .panel h3{ font-size:1.06rem; }
  .film2__lift .panel__price{ font-size:.85rem; margin-bottom:.55rem; }
  .film2__lift .panel ul{ gap:.28rem; margin-bottom:.7rem; }
  .film2__lift .panel li{ font-size:.79rem; line-height:1.38; }
  .film2__lift .panel .note{ font-size:.74rem; margin-bottom:.6rem; }
  .film2__lift .btn{ padding:.6rem 1.05rem; font-size:.83rem; }
}

.film2__lift .btn--ghost{ border-color:rgba(249,247,242,.45); color:var(--ivory); }
.film2__lift .btn--ghost:hover{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); }

@media(max-width:900px){
  /* the block is taller than a phone screen, so it travels through rather than
     parking; the track is sized so it moves at about scroll speed */
  .film2__track{ height:760vh; }
  .film2__sizer{ height:clamp(380px, 58svh, 520px); }
  .film2__cap h2{ max-width:100%; }
  .film2__lift h2{ max-width:100%; font-size:1.75rem; }
  .film2__p--wide{ font-size:.94rem; }
  .film2__liftin{ padding-inline:clamp(16px,5vw,24px); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
section{ position:relative; }
.sec{ padding-block:clamp(5rem, 11vh, 9rem); }
.sec--tight{ padding-block:clamp(3.4rem, 7vh, 5.5rem); }
.sec--sand{ background:var(--sand); }
.sec--mist{ background:var(--mist); }
.sec--olive{ background:var(--olive-deep); color:var(--ivory); }
.sec--ink{ background:var(--ink); color:var(--ivory); }
.sec--ink .lede,.sec--olive .lede{ color:rgba(249,247,242,.66); }
.sec--ink .eyebrow,.sec--olive .eyebrow{ color:var(--blush); }
.sec--ink .eyebrow::before,.sec--olive .eyebrow::before{ background:var(--blush); }
.sec__head{ display:grid; grid-template-columns:1fr; gap:1.4rem; margin-bottom:clamp(2.6rem,5vw,4rem); }
@media(min-width:900px){
  .sec__head{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:3.5rem; align-items:end; }
}

/* Reveal ----------------------------------------------------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--slow), transform 1.15s var(--slow); }
.quote.rv{ transform:translateY(20px); }   /* transition comes from .quote itself */
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.09s } .rv-d2{ transition-delay:.18s } .rv-d3{ transition-delay:.27s }
.rv-d4{ transition-delay:.36s } .rv-d5{ transition-delay:.45s }

/* Split-line headline reveal */
.sl{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.sl > span{ display:block; transform:translateY(102%); transition:transform 1.05s var(--slow); }
.in .sl > span{ transform:none; }
.in .sl:nth-child(2) > span{ transition-delay:.09s }
.in .sl:nth-child(3) > span{ transition-delay:.18s }

/* ---- Destinations ------------------------------------------
   Three groups of type on the open page rather than three boxes:
   no column rules, no card grounds, no row rules. The hover is
   unchanged — a line draws down the left, the name steps across,
   the three lines follow one another, the numeral rises. -------- */
.dest{ display:grid; gap:clamp(2.6rem,5vw,5.5rem); }
@media(min-width:860px){ .dest{ grid-template-columns:repeat(3,1fr); } }
.dcard{ position:relative; padding-left:clamp(1.1rem,1.8vw,1.7rem); }
.dcard::before{ content:""; position:absolute; left:0; top:.2rem; width:1px; height:calc(100% - .4rem);
  background:var(--olive); transform:scaleY(0); transform-origin:top;
  transition:transform .85s var(--slow); }
.dcard__c{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--olive); font-weight:600;
  transition:transform .65s var(--slow); }
.dcard h3{ margin:.55rem 0 1.3rem;
  font-family:"Fraunces", var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 40, "WONK" 1;
  font-weight:360; font-size:clamp(2.1rem,3.2vw,2.9rem); line-height:1.02; letter-spacing:-.012em;
  transition:transform .65s var(--slow); }
.dcard ul{ list-style:none; margin:0; padding:1.15rem 0 0; border-top:1px solid var(--line-soft); }
.dcard li{ padding:.42rem 0; color:var(--muted); font-size:.95rem; line-height:1.5;
  transition:transform .6s var(--slow), color .5s var(--ease); }
.dcard__num{ position:absolute; right:0; top:-.35rem; font-family:var(--serif); font-size:2.6rem;
  color:var(--taupe); opacity:.55; line-height:1; pointer-events:none;
  transition:transform .8s var(--slow), opacity .8s var(--slow); }
@media(hover:hover){
  .dcard:hover::before{ transform:scaleY(1); }
  .dcard:hover .dcard__c{ transform:translateX(9px); }
  .dcard:hover h3{ transform:translateX(9px); transition-delay:.05s; }
  .dcard:hover li{ transform:translateX(9px); color:var(--ink-2); }
  /* the lines follow one after the other on the way in; on the way out the
     delays fall away and they return together */
  .dcard:hover li:nth-child(1){ transition-delay:.10s; }
  .dcard:hover li:nth-child(2){ transition-delay:.17s; }
  .dcard:hover li:nth-child(3){ transition-delay:.24s; }
  .dcard:hover .dcard__num{ transform:translateY(-9px); opacity:.9; }
}

/* Destination films. Hovering a destination that has footage fades it in
   behind the whole section, section-sized, never full screen, at full
   strength. No layer sits between the film and the type: while the film is on
   screen every line turns ivory, and it goes back to dark as the film leaves. */
/* Every film is shown as a <canvas> the JS paints (see faceFor). The <video>
   behind it only feeds frames: 2px and transparent, so browsers that float a
   "pop out" button over sizeable videos (Opera) have nothing to put it on.
   Placed after the stage rules above, which it must beat. */
video.vfeed{ position:absolute; left:0; top:0; right:auto; bottom:auto;
  width:2px; height:2px; opacity:0; pointer-events:none; }

#destinations{ position:relative; overflow:hidden; isolation:isolate; }
.dfilm{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
/* stacked in one frame, so a second destination's film sits over the first
   rather than below it (where the section's overflow would clip it away) */
/* graded on the film itself, not by anything laid over it: at .85 the typical
   ground under every line holds 5.3:1 against ivory type (measured over 12
   frames). At 1.0 the bullets' typical ground falls to 4.1:1. */
.dfilm__v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 55%;
  opacity:0; transform:scale(1.045); filter:brightness(.85);
  transition:opacity .7s var(--ease), transform 2.4s var(--slow); }
.dfilm__v.on{ opacity:var(--dfilm-o,1); transform:none; }

/* the type changes on the film's own timing (.7s, same easing), so it is
   never ivory over ivory or dark over the film for longer than the fade */
#destinations .eyebrow,
#destinations .lede,
#destinations h2{ transition:color .7s var(--ease), text-shadow .7s var(--ease); }
#destinations .dcard__c,
#destinations .dcard h3{ transition:transform .65s var(--slow), color .7s var(--ease), text-shadow .7s var(--ease); }
#destinations .dcard li{ transition:transform .6s var(--slow), color .7s var(--ease), text-shadow .7s var(--ease); }
#destinations .eyebrow::before{ transition:transform .9s var(--slow) .1s, background-color .7s var(--ease); }
#destinations .dcard::before{ transition:transform .85s var(--slow), background-color .7s var(--ease); }
#destinations .dcard ul{ transition:border-color .7s var(--ease); }
#destinations .dcard__num{ transition:transform .8s var(--slow), opacity .8s var(--slow), color .7s var(--ease); }

/* the shadow belongs to the glyphs, not to a layer: it only carries the lines
   that cross the brightest highlights (the white homestead, the aisle, clouds) */
#destinations.film-on .eyebrow,
#destinations.film-on .lede,
#destinations.film-on h2,
#destinations.film-on .dcard__c,
#destinations.film-on .dcard h3,
#destinations.film-on .dcard li{ color:var(--ivory);
  text-shadow:0 1px 2px rgba(20,20,16,.45), 0 0 22px rgba(20,20,16,.38); }
/* the small type has the thinnest strokes to hold against a bright highlight
   (the bullets cross the white chairs and the aisle), so its shadow is tighter
   and darker than the headline's */
#destinations.film-on .eyebrow,
#destinations.film-on .dcard__c,
#destinations.film-on .dcard li{
  text-shadow:0 0 2px rgba(20,20,16,.6), 0 1px 3px rgba(20,20,16,.5), 0 0 16px rgba(20,20,16,.42); }
#destinations.film-on .eyebrow::before,
#destinations.film-on .dcard::before{ background:var(--ivory); }
#destinations.film-on .dcard ul{ border-top-color:rgba(249,247,242,.42); }
#destinations.film-on .dcard__num{ color:var(--ivory); }

/* ---- The ring (Coordinator) ---------------------------------
   Deliberately not the Reality grid and not the Process thread. The
   dial holds still while the four stages of the handover pass beside
   it; the stage under the reading line is in focus, the rest recede,
   and the arc follows the reading position until the ring closes on
   the last stage with a blush chime. */
.relay{ display:grid; gap:2.4rem; }
@media(min-width:960px){
  .relay{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); column-gap:clamp(3rem,7vw,7rem); align-items:start; }
  .relay__side{ position:sticky; top:calc(var(--hdr-h,104px) + 4vh); display:grid; justify-items:center; gap:2.2rem; }
  /* room after the last stage, so the ring closes while the dial is still pinned */
  .stages{ padding-bottom:24vh; }
}
@media(min-width:960px) and (max-height:820px){ .dial{ width:clamp(250px,25vw,330px); } }

.dial{ position:relative; width:min(100%, clamp(300px,31vw,430px)); aspect-ratio:1; }
.dial__svg{ display:block; width:100%; height:100%; overflow:visible; }
.dial__orbit{ fill:none; stroke:var(--sage); stroke-width:1; stroke-dasharray:.6 7.4; stroke-linecap:round; opacity:.75;
  transform-box:fill-box; transform-origin:center; animation:orbit 90s linear infinite; }
@keyframes orbit{ to{ transform:rotate(360deg); } }
.dial__disc{ fill:var(--paper); opacity:.6; transition:fill 1.2s var(--ease), opacity 1.2s var(--ease); }
.dial__line{ fill:none; stroke:var(--line); stroke-width:.7; }
.dial__arc{ fill:none; stroke:var(--olive); stroke-width:1.1; stroke-linecap:round; }
.dial__tick{ fill:var(--mist); stroke:var(--olive); stroke-width:.8; transition:fill .5s var(--ease); }
.dial__tick.lit{ fill:var(--olive); }
.dial__gem{ fill:var(--olive); }
.dial__halo{ fill:var(--blush); opacity:0; transform-box:fill-box; transform-origin:center; }
.relay.closed .dial__halo{ animation:chime 1.6s var(--slow) forwards; }
@keyframes chime{ 0%{ opacity:.8; transform:scale(.4); } 100%{ opacity:0; transform:scale(3.4); } }
.relay.closed .dial__disc{ fill:var(--blush-wash); opacity:1; }

.dial__face{ position:absolute; inset:17%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.dial__k{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:.8rem; }
/* one word at a time: the ones already read roll up and out, the ones still
   to come wait below, so scrolling back up rolls them the other way */
.dial__words{ position:relative; display:block; width:100%; height:5.8rem; overflow:hidden; }
.dial__word{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; transform:translateY(55%); filter:blur(3px);
  transition:opacity .55s var(--ease), transform .8s var(--slow), filter .6s var(--ease); }
.dial__word.past{ transform:translateY(-55%); }
.dial__word.on{ opacity:1; transform:none; filter:none; }
.dial__word b{ font-family:var(--serif); font-style:italic; font-weight:400; line-height:1.05; color:var(--olive-t);
  font-size:clamp(1.9rem,2.7vw,2.7rem); }
.dial__word small{ margin-top:.45rem; font-size:.84rem; color:var(--muted); }

.relay__cta{ text-align:center; max-width:34ch; }
.relay__cta p{ font-family:var(--serif); font-style:italic; font-size:1.18rem; line-height:1.42; color:var(--ink-2); margin-bottom:1.2rem; }
.relay__cta--end{ display:none; }

.stages{ list-style:none; margin:0; padding-left:0; }
.stage{ min-height:clamp(300px,44vh,440px); display:flex; flex-direction:column; justify-content:center;
  padding-block:2rem; opacity:.3; transition:opacity .7s var(--ease); }
.stage.on{ opacity:1; }
@media(hover:hover){ .stage:not(.on):hover{ opacity:.6; } }
.stage__k{ display:flex; align-items:center; gap:.85rem; margin:0 0 1.05rem;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--olive-t); }
.stage__k::after{ content:""; flex:1; height:1px; background:var(--line); transform-origin:left; transform:scaleX(.18);
  transition:transform 1s var(--slow), background-color .7s var(--ease); }
.stage.on .stage__k::after{ transform:scaleX(1); background:rgba(95,107,87,.45); }
.stage__gem{ width:8px; height:8px; flex:none; border:1.1px solid var(--olive); transform:rotate(45deg) scale(.85);
  transition:background-color .5s var(--ease), transform .7s var(--slow); }
.stage.on .stage__gem{ background:var(--olive); transform:rotate(45deg) scale(1.15); }
.stage h3{ font-size:clamp(1.8rem,2.7vw,2.5rem); line-height:1.08; margin-bottom:1rem;
  transform:translateY(10px); transition:transform .9s var(--slow); }
.stage > p:last-child{ color:var(--muted); font-size:1.02rem; max-width:44ch; margin:0;
  transform:translateY(14px); transition:transform 1s var(--slow) .06s; }
.stage.on h3, .stage.on > p:last-child{ transform:none; }

/* phones and tablets: the dial shrinks into a bar pinned under the header */
@media(max-width:959px){
  .relay__side{ position:sticky; top:var(--hdr-h,64px); z-index:3; margin-inline:calc(var(--gut) * -1);
    padding:.7rem var(--gut); background:var(--mist); border-bottom:1px solid var(--line-soft); }
  .dial{ width:auto; aspect-ratio:auto; display:flex; align-items:center; gap:1rem; }
  .dial__svg{ width:62px; height:62px; flex:none; }
  .dial__orbit{ display:none; }
  .dial__arc{ stroke-width:7; } .dial__line{ stroke-width:3.5; } .dial__tick{ stroke-width:3.5; }
  .dial__face{ position:static; align-items:flex-start; text-align:left; flex:1; }
  .dial__k{ margin-bottom:.15rem; font-size:.6rem; }
  .dial__words{ height:3rem; }
  .dial__word{ align-items:flex-start; }
  .dial__word b{ font-size:1.45rem; }
  .dial__word small{ margin-top:.1rem; font-size:.76rem; }
  .relay__cta--side{ display:none; }
  .relay__cta--end{ display:block; text-align:left; margin-top:.6rem; }
  .stage{ min-height:0; padding-block:2.2rem; }
}

/* ---- Reality grid ------------------------------------------ */
.rgrid{ display:grid; gap:0; }
@media(min-width:820px){ .rgrid{ grid-template-columns:repeat(2,1fr); column-gap:clamp(2.5rem,5vw,5rem); } }
.ritem{ position:relative; padding:1.9rem 0; border-top:1px solid var(--line); display:grid;
  grid-template-columns:auto 1fr; gap:1.4rem; align-items:start; }
/* the rule redraws itself in olive as you read the item */
.ritem::before{ content:""; position:absolute; left:0; top:-1px; width:100%; height:1px;
  background:var(--olive); transform:scaleX(0); transform-origin:left;
  transition:transform .75s var(--slow); }
.ritem__n{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--olive-t); line-height:1;
  padding-top:.2rem; transition:color .5s var(--ease), transform .6s var(--slow); }
.ritem__b{ transition:transform .6s var(--slow); }
.ritem h3{ font-size:1.32rem; margin-bottom:.5rem; }
.ritem p{ color:var(--muted); font-size:.96rem; transition:color .5s var(--ease); }
@media(hover:hover){
  .ritem:hover::before{ transform:scaleX(1); }
  .ritem:hover .ritem__n{ color:var(--olive); transform:translateY(-3px); }
  .ritem:hover .ritem__b{ transform:translateX(6px); }
  .ritem:hover p{ color:var(--ink-2); }
}

/* ---- Philosophy -------------------------------------------- */
.phil{ display:grid; gap:clamp(2.4rem,5vw,5rem); align-items:start; }
@media(min-width:960px){ .phil{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); } }
.phil__fig{ position:relative; }
.phil__fig::before{ content:""; position:absolute; left:-14px; top:-14px; width:46%; aspect-ratio:1;
  background:var(--blush); border-radius:var(--r); z-index:0; opacity:0; transform:translateY(10px);
  translate:var(--px,0px) var(--py,0px);   /* drifts against the print's tilt; separate from the reveal's transform */
  transition:opacity 1.1s var(--slow) .2s, transform 1.1s var(--slow) .2s; }
.phil__fig.in::before{ opacity:.5; transform:none; }
.phil__fig img{ position:relative; z-index:1; }
.phil__fig img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r); }

/* The print. JS springs the tilt and writes --lift (0 at rest, 1 hovered, 1.15
   held) and --sx/--sy (shadow offset). Subtle on purpose, and no light or glare,
   only movement. At rest every value is zero, so the figure looks as it did before. */
.tilt{ position:relative; z-index:1; perspective:1100px; }
@media(hover:hover) and (pointer:fine){ .tilt{ cursor:grab; } .tilt.held{ cursor:grabbing; } }
.tilt__card{ position:relative; border-radius:var(--r); overflow:hidden; will-change:transform;
  box-shadow:var(--sx,0px) var(--sy,0px) calc(var(--lift,0) * 40px) calc(var(--lift,0) * -14px)
             rgba(46,46,42,calc(var(--lift,0) * .26)); }
.tilt__card img{ display:block; transform:scale(1.07); will-change:transform;
  -webkit-user-drag:none; user-select:none; }
.phil__fig figcaption{ margin-top:1rem; font-family:var(--serif); font-style:italic; color:var(--muted); font-size:1rem; }
.phil__q{ font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.24; margin-bottom:1.8rem; }
.phil__q em{ color:var(--olive); }
.phil__body p{ color:var(--muted); }
.phil__sig{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line); }
/* signed by hand: a script face stands in until Caitlin's own signature
   arrives. JS redraws it into a canvas and writes it along the pen's path;
   without JS, or under reduced motion, the word simply shows. */
.phil__sig b{ display:inline-block; font-family:"Mrs Saint Delafield", var(--serif); font-size:3.1rem; font-weight:400;
  line-height:1.15; color:var(--ink); }
.phil__sig .sig-ink{ display:block; }
.phil__sig span{ display:block; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ---- The quote, spoken (Philosophy) --------------------------
   Caitlin's quote inks in word by word as it rises through the reading zone
   (scroll-linked, so scrolling back fades it again). The photo opens from a
   strip at its foot with a slow zoom. A blush line draws under her turn of
   phrase once the last word lands, and she signs off by hand. Without JS, or
   under reduced motion, everything simply shows. */
.phil__q.qspoken .qw{ color:rgba(46,46,42,.16); transition:color .45s var(--ease); }
.phil__q.qspoken .qw.on{ color:var(--ink); }
.phil__q.qspoken em .qw.on{ color:var(--olive); }
/* the underline runs across both lines if the phrase wraps: one continuous
   strip, drawn left to right by --u (0 to 1) */
.phil__q em{ background-image:linear-gradient(var(--blush-deep), var(--blush-deep)); background-repeat:no-repeat;
  background-position:0 94%; background-size:calc(var(--u,1) * 100%) 2px; }

/* ============================================================
   THE THREAD — scroll-drawn process timeline
   ============================================================ */
.thread{ position:relative; }
.thread__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.thread__base{ fill:none; stroke:var(--line); stroke-width:1.4; }
.thread__draw{ fill:none; stroke:var(--olive); stroke-width:1.6; stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(181,133,74,.34)); }
.thread__head{ fill:var(--olive); opacity:.9; }
.thread__halo{ fill:var(--olive); opacity:.15; }

.steps{ position:relative; z-index:1; display:grid; gap:clamp(3.6rem,9vh,7.5rem); }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:start; }
@media(min-width:960px){
  .step{ grid-template-columns:1fr 88px 1fr; gap:0; align-items:center; }
  .step__body{ grid-column:1; padding-right:clamp(2rem,4vw,4rem); text-align:right; }
  .step__node{ grid-column:2; justify-self:center; }
  .step__aside{ grid-column:3; padding-left:clamp(2rem,4vw,4rem); }
  .step:nth-child(even) .step__body{ grid-column:3; padding:0 0 0 clamp(2rem,4vw,4rem); text-align:left; }
  .step:nth-child(even) .step__aside{ grid-column:1; padding:0 clamp(2rem,4vw,4rem) 0 0; text-align:right; }
}
.step__node{ position:relative; width:34px; height:34px; display:grid; place-items:center; }
.step__node i{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--line);
  background:var(--mist); transition:border-color .6s var(--ease), transform .7s var(--slow); }
.step__node b{ position:relative; width:7px; height:7px; border-radius:50%; background:var(--line);
  transition:background .5s var(--ease), transform .7s var(--slow); }
.step.lit .step__node i{ border-color:var(--olive); transform:scale(1.12); }
.step.lit .step__node b{ background:var(--olive); transform:scale(1.5); }
.step__node::after{ content:""; position:absolute; inset:-9px; border-radius:50%;
  border:1px solid var(--blush); opacity:0; transform:scale(.6); }
.step.lit .step__node::after{ animation:ping 1.5s var(--slow) forwards; }
@keyframes ping{ 0%{opacity:.9; transform:scale(.6)} 100%{opacity:0; transform:scale(1.34)} }

.step__k{ font-family:var(--serif); font-style:italic; color:var(--olive-t); font-size:1.02rem; margin-bottom:.35rem;
  opacity:0; transform:translateY(12px); transition:opacity .8s var(--slow), transform .8s var(--slow); }
.step__body h3{ margin-bottom:.7rem; opacity:0; transform:translateY(16px);
  transition:opacity .9s var(--slow) .06s, transform .9s var(--slow) .06s; }
.step__body p{ color:var(--muted); font-size:.98rem; max-width:44ch; opacity:0; transform:translateY(16px);
  transition:opacity .9s var(--slow) .14s, transform .9s var(--slow) .14s; }
@media(min-width:960px){ .step__body p{ margin-left:auto; }
  .step:nth-child(even) .step__body p{ margin:0 auto 0 0; } }
.step.lit .step__k,.step.lit .step__body h3,.step.lit .step__body p{ opacity:1; transform:none; }
.step__aside{ opacity:0; transform:translateY(16px); transition:opacity 1s var(--slow) .2s, transform 1s var(--slow) .2s; }
.step.lit .step__aside{ opacity:1; transform:none; }
.step__aside span{ display:inline-block; font-size:.74rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:100px; padding:.42rem .9rem; }
@media(max-width:959px){
  .step{ grid-template-columns:34px minmax(0,1fr); column-gap:1.2rem; }
  .step__node{ grid-column:1; grid-row:1; }
  .step__body{ grid-column:2; grid-row:1; }
  .step__aside{ grid-column:2; grid-row:2; padding-top:.9rem; }
}

.thread__foot{ margin-top:clamp(3rem,7vh,5rem); padding-top:2rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:space-between; }
.thread__foot p{ font-family:var(--serif); font-style:italic; font-size:1.22rem; max-width:46ch; color:var(--ink-2); }

/* ---- Packages — the ladder -----------------------------------
   Three tiers as one ruled progression rather than three cards.
   Every price stays visible; one tier unfolds at a time. The hover
   and the open state share the site's line idiom: a hairline draws
   down the left and the name steps across. ------------------------ */
.tiers{ --tp:clamp(1.1rem,1.8vw,1.7rem); --tg:clamp(1rem,2.6vw,2.4rem); --tn:2.3rem;
  border-top:1px solid var(--line); }
.tier{ position:relative; border-bottom:1px solid var(--line); }
.tier::before{ content:""; position:absolute; left:0; top:0; width:1px; height:100%;
  background:var(--olive); transform:scaleY(0); transform-origin:top;
  transition:transform .85s var(--slow); }
.tier.open::before{ transform:scaleY(1); }

.tier__hd{
  width:100%; display:grid; grid-template-columns:var(--tn) minmax(0,1fr) auto auto;
  align-items:center; gap:var(--tg); text-align:left; cursor:pointer;
  padding:clamp(1.4rem,3vh,2rem) 0 clamp(1.4rem,3vh,2rem) var(--tp);
}
.tier__n{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--olive-t); }
.tier__title{ display:block; min-width:0; }
.tier__name{
  display:inline; font-family:"Fraunces", var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 40, "WONK" 1;
  font-weight:360; font-size:clamp(1.65rem,2.8vw,2.55rem); line-height:1.05; letter-spacing:-.012em;
  color:var(--ink); transition:color .5s var(--ease);
}
.tier__title{ transition:transform .65s var(--slow); }
.tier__for{ display:block; margin-top:.4rem; font-size:.92rem; color:var(--muted); }
.tier__tag{
  display:inline-block; vertical-align:middle; margin-left:.7rem; transform:translateY(-.2em);
  font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ivory); background:var(--olive); padding:.34rem .62rem; border-radius:100px; white-space:nowrap;
}
.tier__tag--ink{ background:var(--charcoal); }
.tier__price{
  text-align:right; font-family:"Fraunces", var(--serif);
  font-variation-settings:"opsz" 144, "SOFT" 40, "WONK" 1;
  font-weight:340; font-size:clamp(1.8rem,3vw,2.7rem); line-height:1; color:var(--ink); white-space:nowrap;
}
.tier__unit{ display:block; margin-top:.45rem; font-family:var(--sans); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
/* a plus that turns into a cross — the only control chrome on the row */
.tier__tog{ position:relative; width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  transition:border-color .5s var(--ease), transform .6s var(--slow), background .5s var(--ease); }
.tier__tog::before,.tier__tog::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:1px;
  background:var(--ink); transform:translate(-50%,-50%); }
.tier__tog::after{ transform:translate(-50%,-50%) rotate(90deg); }
.tier.open .tier__tog{ transform:rotate(45deg); border-color:var(--olive); background:var(--olive); }
.tier.open .tier__tog::before,.tier.open .tier__tog::after{ background:var(--ivory); }

.tier__bd{ height:0; overflow:hidden; transition:height .65s var(--slow); }
.tier__in{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.7fr); gap:clamp(1.5rem,4vw,4rem);
  padding:0 var(--tp) clamp(2rem,4.5vh,3rem) calc(var(--tp) + var(--tn) + var(--tg));
}
.tier__blurb{ color:var(--muted); font-size:.97rem; margin-bottom:1.5rem; }
.tier__lbl{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  font-weight:600; margin-bottom:1rem; }
.tier__in ul{ list-style:none; margin:0; padding:0; columns:2; column-gap:clamp(1.5rem,3vw,2.8rem); }
.tier__in li{ break-inside:avoid; display:grid; grid-template-columns:auto 1fr; gap:.7rem;
  padding:.4rem 0; font-size:.9rem; line-height:1.5; color:var(--ink-2);
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--slow), transform .6s var(--slow); }
.tier__in li::before{ content:""; width:11px; height:1px; background:var(--olive); margin-top:.72rem; }
.tier__side{ opacity:0; transform:translateY(8px); transition:opacity .55s var(--slow), transform .65s var(--slow); }
/* contents arrive as the tier opens: the side first, then the list line by line */
.tier.open .tier__side{ opacity:1; transform:none; transition-delay:.12s; }
.tier.open .tier__in li{ opacity:1; transform:none; }
.tier.open .tier__in li:nth-child(1){ transition-delay:.18s; } .tier.open .tier__in li:nth-child(2){ transition-delay:.23s; }
.tier.open .tier__in li:nth-child(3){ transition-delay:.28s; } .tier.open .tier__in li:nth-child(4){ transition-delay:.33s; }
.tier.open .tier__in li:nth-child(5){ transition-delay:.38s; } .tier.open .tier__in li:nth-child(6){ transition-delay:.43s; }
.tier.open .tier__in li:nth-child(7){ transition-delay:.48s; } .tier.open .tier__in li:nth-child(8){ transition-delay:.53s; }
.tier.open .tier__in li:nth-child(9){ transition-delay:.58s; }

@media(hover:hover){
  .tier:hover::before{ transform:scaleY(1); }
  .tier__hd:hover .tier__title{ transform:translateX(9px); }
  .tier__hd:hover .tier__tog{ border-color:var(--olive); }
}
.tier__hd:focus-visible{ outline-offset:-2px; }

/* landing resets the ladder in one frame so the scroll target is measured
   against its final height; the contents still cascade in */
.tiers--snap .tier__bd{ transition:none !important; }

.tiers__after{ text-align:center; margin-top:2rem; font-family:var(--serif); font-style:italic;
  font-size:1.15rem; color:var(--muted); }

@media(max-width:900px){
  .tiers{ --tn:1.6rem; }
  .tier__hd{ grid-template-columns:var(--tn) minmax(0,1fr) auto; row-gap:.9rem; }
  .tier__price{ grid-column:2; grid-row:2; text-align:left; font-size:1.9rem; }
  .tier__tog{ grid-column:3; grid-row:1; width:34px; height:34px; }
  .tier__tag{ display:table; margin:.55rem 0 0; transform:none; }
  .tier__in{ grid-template-columns:1fr; gap:1.4rem; padding-left:var(--tp); }
  .tier__in ul{ columns:1; }
}

/* ---- Two-up panels (add-on / coordinator) ------------------- */
.duo{ display:grid; gap:1.5rem; }
@media(min-width:900px){ .duo{ grid-template-columns:repeat(2,1fr); } }
.panel{ border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.8rem,2.6vw,2.5rem);
  background:var(--paper); display:flex; flex-direction:column; }
.sec--ink .panel,.sec--olive .panel{ background:rgba(249,247,242,.05); border-color:rgba(249,247,242,.18); }
.panel h3{ font-size:1.55rem; margin-bottom:.4rem; }
.panel__price{ font-family:var(--serif); font-style:italic; color:var(--olive-t); margin-bottom:1.2rem; font-size:1.1rem; }
.panel ul{ list-style:none; margin:0 0 1.8rem; padding:0; display:grid; gap:.7rem; }
.panel li{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; font-size:.93rem; line-height:1.55; }
.panel li::before{ content:""; width:12px; height:1px; background:var(--olive); margin-top:.7rem; }
.panel .note{ font-size:.86rem; color:var(--muted); font-style:italic; margin-bottom:1.4rem; }
.panel .btn{ margin-top:auto; align-self:flex-start; }

/* ---- Platform features ------------------------------------- */
.feat{ border-top:1px solid rgba(249,247,242,.20); }
.frow{ display:grid; grid-template-columns:auto 1fr; gap:1.3rem; padding:1.9rem 0;
  border-bottom:1px solid rgba(249,247,242,.20); align-items:start;
  transition:background .55s var(--ease); }
@media(min-width:900px){ .frow{ grid-template-columns:auto minmax(0,.9fr) minmax(0,1.1fr) auto; gap:2.4rem; align-items:center; } }
.frow:hover{ background:rgba(249,247,242,.04); }
.frow__n{ font-family:var(--serif); font-style:italic; color:var(--blush); font-size:1.1rem; }
.frow h3{ font-size:1.42rem; }
.frow p{ color:rgba(249,247,242,.64); font-size:.94rem; }
.frow__soon{ font-size:.66rem; letter-spacing:.17em; text-transform:uppercase; color:var(--blush);
  border:1px solid var(--sage); border-radius:100px; padding:.36rem .8rem; white-space:nowrap; justify-self:start; }

/* ---- Testimonials ------------------------------------------ */
.tst{ display:grid; gap:1.5rem; }
@media(min-width:820px){ .tst{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1180px){ .tst{ grid-template-columns:repeat(3,1fr); } }
/* The card arrives empty and then fills: stars one at a time, then the words,
   then the rule and the name. --seq is each card's place in the order, set in
   the markup so the three on screen fill 1 / 3 / 2 rather than left to right.
   Per-property delays keep the hover instant while the reveal is staggered. */
.quote{ --seq:0; --d:calc(.30s + var(--seq) * .26s);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.6rem,2.2vw,2.1rem); display:flex; flex-direction:column; break-inside:avoid;
  transition:border-color .55s var(--ease), background .55s var(--ease),
             opacity .9s var(--slow), transform 1s var(--slow); }
.quote.in{ transition-delay:0s, 0s, calc(var(--seq) * .16s), calc(var(--seq) * .16s); }
.quote:hover{ border-color:var(--blush); background:var(--blush-wash); }

.quote__st{ display:flex; gap:.24em; color:var(--olive); font-size:.8rem; margin-bottom:1rem; }
.quote__st i{ font-style:normal; opacity:0; transform:scale(.55);
  transition:opacity .5s var(--slow), transform .65s var(--slow); }
.quote.in .quote__st i{ opacity:1; transform:none; }
.quote.in .quote__st i:nth-child(1){ transition-delay:var(--d); }
.quote.in .quote__st i:nth-child(2){ transition-delay:calc(var(--d) + .075s); }
.quote.in .quote__st i:nth-child(3){ transition-delay:calc(var(--d) + .150s); }
.quote.in .quote__st i:nth-child(4){ transition-delay:calc(var(--d) + .225s); }
.quote.in .quote__st i:nth-child(5){ transition-delay:calc(var(--d) + .300s); }

.quote p:not(.quote__st){ font-family:var(--serif); font-size:1.16rem; line-height:1.42; color:var(--ink-2);
  opacity:0; transform:translateY(9px); transition:opacity .85s var(--slow), transform .95s var(--slow); }
.quote.in p:not(.quote__st){ opacity:1; transform:none;
  transition-delay:calc(var(--d) + .42s), calc(var(--d) + .42s); }

.quote footer{ position:relative; margin-top:1.4rem; padding-top:1.1rem;
  opacity:0; transform:translateY(9px); transition:opacity .8s var(--slow), transform .9s var(--slow); }
.quote footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--line-soft); transform:scaleX(0); transform-origin:left;
  transition:transform .85s var(--slow); }
.quote.in footer{ opacity:1; transform:none;
  transition-delay:calc(var(--d) + .72s), calc(var(--d) + .72s); }
.quote.in footer::before{ transform:scaleX(1); transition-delay:calc(var(--d) + .60s); }
.quote b{ font-weight:600; font-size:.94rem; display:block; }
.quote small{ color:var(--muted); font-size:.8rem; letter-spacing:.05em; }
.tst__more{ display:none; }
.tst__more.show{ display:contents; }

/* the expand control — a rule across the section with the label set into it,
   the same hairline idiom the rest of the page uses */
.more{
  display:flex; align-items:center; gap:clamp(1rem,3.5vw,2.4rem);
  width:100%; padding:0; margin-top:clamp(2.4rem,5vh,3.6rem); cursor:pointer;
}
.more__line{ flex:1; height:1px; background:var(--line);
  transition:background .55s var(--ease), opacity .55s var(--ease); }
.more__lbl{
  display:inline-flex; align-items:center; gap:.68rem; white-space:nowrap;
  font-family:var(--serif); font-style:italic; font-size:clamp(1.02rem,1.3vw,1.16rem);
  color:var(--ink-2); transition:color .45s var(--ease);
}
.more__chev{ width:12px; height:12px; flex:none; transition:transform .55s var(--slow); }
.more:hover .more__lbl{ color:var(--olive-t); }
.more:hover .more__line{ background:var(--olive); opacity:.45; }
.more[aria-expanded="true"] .more__chev{ transform:rotate(180deg); }
.more:hover .more__chev{ transform:translateY(2px); }
.more[aria-expanded="true"]:hover .more__chev{ transform:rotate(180deg) translateY(2px); }
@media(max-width:620px){ .more__line:last-child{ display:none; } }

/* ---- FAQ ---------------------------------------------------- */
.faq{ border-top:1px solid var(--line); }
.q{ border-bottom:1px solid var(--line); }
.q__btn{ width:100%; background:none; border:0; text-align:left; cursor:pointer;
  padding:1.5rem 3rem 1.5rem 0; position:relative; font-family:var(--serif); font-size:clamp(1.15rem,1.6vw,1.42rem);
  line-height:1.3; transition:color .4s var(--ease); }
.q__btn:hover{ color:var(--olive-t); }
.q__btn::after,.q__btn::before{ content:""; position:absolute; right:.3rem; top:50%; width:15px; height:1px;
  background:currentColor; transition:transform .45s var(--ease); }
.q__btn::before{ transform:rotate(90deg); }
.q.open .q__btn::before{ transform:rotate(0); }
.q.open .q__btn{ color:var(--olive-t); }
.q__a{ overflow:hidden; height:0; transition:height .55s var(--slow); }
.q__a div{ padding:0 clamp(2rem,8vw,7rem) 1.7rem 0; color:var(--muted); font-size:.98rem; }

/* The rest of the questions, on request. JS adds .is-shut, so without JS every
   question shows. Opening, they arrive one after another; closing, together. */
.faq__more{ overflow:hidden; transition:height .9s var(--slow); }
.faq__more.is-shut{ height:0; }
.faq__more .q{ transition:opacity .6s var(--ease), transform .85s var(--slow);
  transition-delay:calc(var(--k,0) * 45ms); }
.faq__more:not(.show) .q{ opacity:0; transform:translateY(14px); transition-delay:0s; }

/* ---- Contact ------------------------------------------------ */
.ct{ display:grid; gap:clamp(2.5rem,5vw,5rem); }
@media(min-width:960px){ .ct{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.ct__meta{ margin-top:2rem; display:grid; gap:1rem; }
.ct__meta a,.ct__meta span{ display:block; font-size:.95rem; color:rgba(249,247,242,.7); }
.ct__meta a{ font-family:var(--serif); font-size:1.42rem; color:var(--ivory); }
.form{ display:grid; gap:1.15rem; }
.f2{ display:grid; gap:1.15rem; }
@media(min-width:640px){ .f2{ grid-template-columns:1fr 1fr; } }
.fld{ position:relative; }
.fld label{ display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(249,247,242,.55); margin-bottom:.5rem; }
.fld input,.fld select,.fld textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(249,247,242,.24);
  color:var(--ivory); font:inherit; font-size:1rem; padding:.7rem 0; border-radius:0;
  transition:border-color .45s var(--ease); }
.fld select{ -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(249,247,242,.6) 50%),linear-gradient(135deg,rgba(249,247,242,.6) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.fld select option{ background:var(--ink); color:var(--ivory); }
.fld textarea{ resize:vertical; min-height:120px; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ outline:none; border-bottom-color:var(--blush); }
.form__acts{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-top:.6rem; }
.form__note{ font-size:.85rem; color:rgba(249,247,242,.5); font-style:italic; }
.form__ok{ display:none; padding:1.4rem 0; font-family:var(--serif); font-size:1.5rem; color:var(--blush); }
.form.sent .form__ok{ display:block; }
.form.sent .f2,.form.sent .fld,.form.sent .form__acts{ display:none; }

/* ---- Footer ------------------------------------------------- */
.ft{ background:var(--ink); color:rgba(249,247,242,.62); padding-block:clamp(3.5rem,7vh,5.5rem) 2rem;
  border-top:1px solid rgba(249,247,242,.13); }
.ft__grid{ display:grid; gap:2.6rem; }
@media(min-width:860px){ .ft__grid{ grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,.65fr)); gap:3rem; } }
.ft .mark{ color:var(--ivory); }
.ft p{ margin-top:1.3rem; max-width:44ch; font-size:.94rem; }
.ft h4{ font-family:var(--sans); font-size:.7rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ivory); margin-bottom:1.1rem; font-weight:600; }
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; font-size:.94rem; }
.ft a:hover{ color:var(--blush); }
.ft__base{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(249,247,242,.13);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.8rem; color:rgba(249,247,242,.42); }

/* ---- The selection (mini cart) -------------------------------
   Two steps: "Add to cart" brings in the floating cart (step one); pressing
   the cart opens the drawer from the right (step two), above everything. */
/* Step one: adding an item brings in this cart with the count, and a short note
   slides out beside it. Pressing it opens the drawer (step two). Bottom-right,
   the side the drawer comes from; above the phone CTA bar (55), below the menu (70). */
/* The dock holds both, bottom-right. "Book a free call" is anchored in the corner
   so it never moves; the cart pops in to its left. The call shows once the hero
   is passed and tucks away at the contact form (its width collapses, so nothing
   leaves a gap). On phones the call is already in the bottom bar, so only the cart
   floats, just above that bar. */
.dock{ position:fixed; right:clamp(16px,2.4vw,34px); bottom:clamp(16px,2.4vw,34px); z-index:65;
  display:flex; align-items:center; pointer-events:none; }
.dock > *{ pointer-events:auto; }
.dock__cta{ display:inline-flex; align-items:center; gap:.6rem; height:62px; box-sizing:border-box;
  max-width:0; padding:0; margin-left:0; overflow:hidden; white-space:nowrap; border-radius:10px;
  background:var(--olive); color:var(--ivory); font-size:1rem; font-weight:700; letter-spacing:.012em;
  box-shadow:0 0 0 1px rgba(249,247,242,.16), 0 18px 40px -14px rgba(30,30,26,.5);
  opacity:0; transform:translateY(12px); visibility:hidden; pointer-events:none;
  transition:max-width .7s var(--slow), padding .7s var(--slow), margin .7s var(--slow),
             opacity .45s var(--ease), transform .6s var(--slow), visibility 0s .7s, background-color .4s var(--ease); }
.dock__cta.on{ max-width:260px; padding:0 1.6rem; margin-left:12px; opacity:1; transform:none; visibility:visible; pointer-events:auto;
  transition:max-width .7s var(--slow), padding .7s var(--slow), margin .7s var(--slow),
             opacity .45s var(--ease) .1s, transform .6s var(--slow) .1s, visibility 0s, background-color .4s var(--ease); }
.dock__cta:hover{ background:var(--charcoal); }
.dock__cta .arw{ transition:transform .45s var(--ease); }
.dock__cta:hover .arw{ transform:translateX(4px); }
.cartfab{ position:relative; display:none; align-items:center; padding:0; cursor:pointer; }
.cartfab.has{ display:flex; animation:fabIn .7s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes fabIn{ from{ opacity:0; transform:translateY(22px) scale(.6); } to{ opacity:1; transform:none; } }
.cartfab__disc{ position:relative; width:62px; height:62px; display:grid; place-items:center; border-radius:10px;
  background:var(--ink); color:var(--ivory);
  box-shadow:0 0 0 1px rgba(249,247,242,.16), 0 18px 40px -14px rgba(30,30,26,.55);
  transition:transform .5s var(--slow), background-color .4s var(--ease); }
.cartfab:hover .cartfab__disc{ transform:translateY(-3px) scale(1.04); background:var(--olive-deep); }
.cartfab__disc svg{ width:25px; height:25px; }
.cartfab__n{ position:absolute; top:-3px; right:-3px; display:inline-grid; place-items:center;
  min-width:1.45rem; height:1.45rem; padding:0 .38rem; border-radius:999px;
  background:var(--blush); color:var(--ink); font-size:.74rem; font-weight:700; line-height:1;
  box-shadow:0 0 0 2px var(--ivory); }
.cartfab.pop .cartfab__disc{ animation:bump .6s var(--slow); }
.cartfab.pop .cartfab__n{ animation:pop .55s var(--slow) .05s; }
@keyframes bump{ 0%{ transform:scale(1); } 35%{ transform:scale(1.12); } 100%{ transform:scale(1); } }
@keyframes pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.4); } 100%{ transform:scale(1); } }
.cartfab__say{ position:absolute; right:calc(100% + 12px); top:50%; max-width:min(330px, 68vw);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  padding:.72rem 1.15rem; border-radius:10px; background:var(--ink); color:var(--ivory);
  font-size:.84rem; font-weight:500; letter-spacing:.01em;
  box-shadow:0 0 0 1px rgba(249,247,242,.16), 0 14px 34px -14px rgba(30,30,26,.5);
  opacity:0; transform:translate(14px,-50%); pointer-events:none;
  transition:opacity .45s var(--ease), transform .6s var(--slow); }
.cartfab__say.show{ opacity:1; transform:translate(0,-50%); pointer-events:auto; }
@media(max-width:900px){
  .dock{ bottom:calc(72px + env(safe-area-inset-bottom, 0px)); }
  .dock__cta{ display:none; }
}
/* the stone that flies from the button into the cart */
.cartfly{ position:fixed; left:0; top:0; z-index:66; width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
  background:var(--olive); box-shadow:0 0 0 1.5px var(--ivory); pointer-events:none; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.bag-scrim{ position:fixed; inset:0; z-index:90; background:rgba(30,30,26,.34); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .55s var(--ease), visibility 0s .55s; }
.bag-scrim.open{ opacity:1; visibility:visible; transition:opacity .55s var(--ease), visibility 0s; }
.bag{ position:fixed; top:0; right:0; bottom:0; z-index:91; width:min(440px, 100vw);
  display:flex; flex-direction:column; background:var(--ivory); color:var(--ink);
  box-shadow:-30px 0 80px -30px rgba(30,30,26,.35);
  transform:translateX(104%); visibility:hidden;
  transition:transform .75s var(--slow), visibility 0s .75s; }
.bag.open{ transform:none; visibility:visible; transition:transform .75s var(--slow), visibility 0s; }
.bag [hidden]{ display:none !important; }

.bag__hd{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:2rem 2rem 1.4rem; border-bottom:1px solid var(--line); }
.bag__k{ margin:0; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.bag__title{ margin:.45rem 0 0; font-size:2.2rem; line-height:1; }
.bag__x{ flex:none; width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%;
  cursor:pointer; transition:border-color .4s var(--ease), transform .6s var(--slow); }
.bag__x svg{ width:14px; height:14px; }
.bag__x:hover{ border-color:var(--ink); transform:rotate(90deg); }

/* what just happened: added, swapped, removed */
.bag__note{ margin:0; padding:0 2rem; max-height:0; overflow:hidden; font-size:.86rem; color:var(--olive-t);
  display:flex; align-items:center; gap:.6rem; opacity:0; transition:max-height .5s var(--slow), opacity .4s var(--ease), padding .5s var(--slow); }
.bag__note::before{ content:""; flex:none; width:16px; height:16px; border-radius:50%; background:var(--olive)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23F9F7F2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.bag__note.show{ max-height:5rem; opacity:1; padding:1rem 2rem; }

.bag__body{ flex:1; overflow-y:auto; padding:.2rem 2rem; overscroll-behavior:contain; }
.bag-lines{ list-style:none; margin:0; padding:0; }
.bag-line{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:1rem;
  padding:1.45rem 0; border-bottom:1px solid var(--line-soft);
  animation:lineIn .65s var(--slow) both; animation-delay:calc(var(--i,0) * 70ms + .15s); }
@keyframes lineIn{ from{ opacity:0; transform:translateX(20px); } to{ opacity:1; transform:none; } }
/* the line that was just added glows once, then settles */
.bag-line.fresh::before{ content:""; position:absolute; inset:0 -2rem; z-index:-1; background:var(--blush-wash);
  animation:fresh 2.2s var(--ease) .5s both; }
@keyframes fresh{ from{ opacity:1; } to{ opacity:0; } }
.bag-line__gem{ width:8px; height:8px; margin-top:.62rem; background:var(--olive); transform:rotate(45deg); }
.bag-line__name{ margin:0; font-family:var(--serif); font-size:1.34rem; line-height:1.15; }
.bag-line__note{ margin:.3rem 0 .8rem; font-size:.84rem; line-height:1.45; color:var(--muted); }
.bag-line__price{ margin:0; font-family:var(--serif); font-size:1.32rem; line-height:1.15; white-space:nowrap; }
.bag-line__acts{ display:flex; align-items:center; gap:1.1rem; }
.bag-line__rm{ padding:0; font-size:.78rem; letter-spacing:.04em; color:var(--muted); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line); transition:color .3s var(--ease); }
.bag-line__rm:hover{ color:var(--ink); text-decoration-color:currentColor; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; }
.qty button{ width:30px; height:30px; display:grid; place-items:center; font-size:1rem; cursor:pointer; border-radius:50%;
  transition:background .3s var(--ease); }
.qty button:hover{ background:var(--mist); }
.qty span{ min-width:1.5rem; text-align:center; font-size:.86rem; font-weight:600; }

.bag__empty{ padding:3.4rem 0; text-align:center; }
.bag__empty p{ margin:0 0 1rem; font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--ink-2); }
.bag__empty a{ font-size:.9rem; font-weight:600; color:var(--olive-t); }

.bag__ft{ padding:1.5rem 2rem 1.8rem; border-top:1px solid var(--line); background:var(--paper); }
.bag__sum{ display:flex; justify-content:space-between; align-items:baseline; }
.bag__sum span{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.bag__sum b{ font-family:var(--serif); font-weight:400; font-size:1.95rem; line-height:1; }
.bag__promise{ margin:.35rem 0 1.25rem; font-family:var(--serif); font-style:italic; font-size:1.04rem; color:var(--olive-t); }
.bag__go{ width:100%; justify-content:center; }
.bag__more{ display:block; margin:.95rem auto 0; padding:.2rem; font-size:.86rem; color:var(--muted); cursor:pointer; }
.bag__more:hover{ color:var(--ink); }
.bag__fine{ margin:1rem 0 0; font-size:.76rem; line-height:1.5; text-align:center; color:var(--muted); }
@media(max-width:520px){
  .bag__hd{ padding:1.4rem 1.4rem 1.1rem; }
  .bag__note{ padding-inline:1.4rem; } .bag__note.show{ padding:.9rem 1.4rem; }
  .bag__body{ padding-inline:1.4rem; }
  .bag-line.fresh::before{ inset:0 -1.4rem; }
  .bag__ft{ padding:1.2rem 1.4rem 1.5rem; }
}

/* ---- Sticky mobile CTA -------------------------------------- */
.cta-bar{ position:fixed; left:0; right:0; bottom:0; z-index:55; display:none;
  gap:1px; background:var(--line); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .5s var(--ease); }
.cta-bar.on{ transform:none; }
.cta-bar a{ flex:1; text-align:center; padding:1rem; font-size:.9rem; font-weight:600; background:var(--ivory); }
.cta-bar a.p{ background:var(--olive); color:var(--ivory); }
@media(max-width:900px){ .cta-bar{ display:flex; } body{ padding-bottom:0; } }

/* ---- Responsive -------------------------------------------- */
@media(max-width:900px){
  .nav{ display:none; }
  .burger{ display:block; }
  .hdr{ justify-content:space-between; }
  .mark__img{ height:56px; }
  .hero__box{ max-width:100%; }
  .film__track{ height:400vh; }
}
@media(max-width:520px){
  .beat p{ font-size:1.12rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
  .sl > span{ transform:none; }
  .film__track{ height:100svh; }
  .film2__track{ height:auto; }
  .film2__stage{ position:static; height:auto; }
  .film2__band{ height:clamp(330px,46svh,470px); clip-path:none; }
  /* the ring still tracks the reading position, but nothing is dimmed or blurred */
  .stage{ opacity:1; }
  .stage h3, .stage > p:last-child{ transform:none; }
  .dial__word{ filter:none; }
}

/* ---- Thread meander (desktop only) --------------------------- */
@media(min-width:960px){
  .step:nth-child(odd)  .step__node{ transform:translateX(-46px); }
  .step:nth-child(even) .step__node{ transform:translateX(46px); }
}