/* ============================================================
   CLUB 116 LONGEVITY / Central Park South
   Premium homepage proposal. Self-contained: nothing here depends
   on flagship.css. Same tokens, same type, more air and more nerve.

   Rules that are not negotiable, each one learned the hard way:
   - --gold on light surfaces only. Dark surfaces use --gold-soft.
   - Nothing below 11px.
   - Every pairing at WCAG AA. Text over a photograph sits on a scrim
     that was measured, not guessed.
   - No horizontal scroll from 320px up.
   - prefers-reduced-motion is respected everywhere.
   ============================================================ */

:root{
  --green:#1C1B19;  --green-deep:#121110;  --green-soft:#2A2825;
  --cream:#F5F2EC;  --sand:#E8E3DA;        --sand-2:#DAD3C7;
  --ink:#161513;    --ink-soft:#33312D;    --mute:#4D4A45;
  --mute-on-green:#C9C4BC;
  --gold:#B03A25;   --gold-soft:#F28C6E;
  --line:rgba(17,18,17,.15);  --line-green:rgba(245,241,233,.20);
  --scrim:10,10,9;

  --f-serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-sans:'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-text:'Crimson Pro', Georgia, 'Times New Roman', serif;

  --wrap:1360px;
  --pad:clamp(16px, 4.2vw, 64px);
  --nav-h:clamp(68px, 7vw, 92px);
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:1.1s;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px); }
/* The clip lives on the root only. On body it makes body a scroll container,
   and position:sticky inside it then never sticks. */
html{ overflow-x:hidden; }
html, body{ width:100%; max-width:100%; }
body{
  background:var(--cream); color:var(--ink);
  font-family:var(--f-text); font-weight:400;
  font-size:18px; line-height:1.58;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul, ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
em{ font-style:italic; }
::selection{ background:var(--green); color:var(--cream); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.on-dark :focus-visible{ outline-color:var(--gold-soft); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* ---------- type ---------- */
h1, h2, h3, .serif{ font-family:var(--f-serif); font-weight:600; letter-spacing:-.024em; }
h1, h2, .display, .h2{ text-wrap:balance; }
p, li, dd{ text-wrap:pretty; }

.display{ font-size:clamp(46px, 6.4vw, 100px); line-height:.94; letter-spacing:-.032em; max-width:14ch; }
.h2{ font-size:clamp(36px, 5vw, 78px); line-height:.98; letter-spacing:-.028em; max-width:16ch; }
.h3{ font-size:clamp(22px, 2vw, 30px); line-height:1.15; letter-spacing:-.018em; }
.display em, .h2 em{ font-weight:600; color:var(--gold); }
.on-dark .display em, .on-dark .h2 em{ color:var(--gold-soft); }

.lead{
  font-size:clamp(17px, .9vw + 10px, 21px); line-height:1.5;
  color:var(--ink-soft); font-weight:300; letter-spacing:-.004em; max-width:56ch;
}
.on-dark .lead{ color:var(--mute-on-green); }
.on-dark{ color:var(--cream); }
.on-dark p{ color:var(--mute-on-green); }

/* Eyebrow: a large italic numeral, then a tracked label. */
.eyebrow{
  display:inline-flex; align-items:baseline; gap:16px;
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-weight:400;
}
.eyebrow i{
  font-family:var(--f-serif); font-style:italic; font-weight:600;
  font-size:28px; line-height:1; letter-spacing:0; text-transform:none;
}
.on-dark .eyebrow{ color:var(--gold-soft); }
.on-sand .eyebrow{ color:var(--green); }
.on-sand .eyebrow i{ color:var(--gold); }

/* Specification row: 2 or 3 facts, small caps, gold dots between. */
.spec{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 0;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:400;
}
.spec > span{ display:inline-flex; align-items:center; white-space:nowrap; }
.spec > span:not(:last-child)::after{
  content:""; width:3px; height:3px; border-radius:50%; flex:0 0 3px;
  background:var(--gold); margin:0 14px;
}
.on-dark .spec{ color:var(--mute-on-green); }
.on-dark .spec > span:not(:last-child)::after{ background:var(--gold-soft); }
@media(max-width:560px){ .spec{ letter-spacing:.12em; } .spec > span:not(:last-child)::after{ margin:0 11px; } }

/* Plate caption: small caps with a short gold rule. */
.cap{
  display:flex; align-items:flex-start; gap:12px; margin-top:14px;
  font-size:11px; line-height:1.5; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); font-weight:400;
}
.cap::before{ content:""; flex:0 0 22px; height:1px; margin-top:8px; background:var(--gold); }
.on-dark .cap{ color:var(--mute-on-green); }
.on-dark .cap::before{ background:var(--gold-soft); }

/* Caption laid into a photograph. The gradient holds the text at AA. */
.cap-in{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:flex-start; gap:12px;
  padding:clamp(60px,7vw,88px) clamp(16px,2.4vw,28px) clamp(16px,2vw,24px);
  font-size:11px; line-height:1.5; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream); font-weight:400; pointer-events:none;
  background:linear-gradient(0deg, rgba(var(--scrim),.93) 0%, rgba(var(--scrim),.88) 38%, rgba(var(--scrim),.34) 74%, rgba(var(--scrim),0) 100%);
}
.cap-in::before{ content:""; flex:0 0 22px; height:1px; margin-top:8px; background:var(--gold-soft); }

/* Disclaimer note: a gold left rule, no box. */
.note{
  margin-top:clamp(22px,3vw,34px); padding-left:16px; border-left:2px solid var(--gold);
  font-size:12.5px; line-height:1.65; color:var(--mute); max-width:60ch;
}
.note b{ font-weight:400; color:var(--ink-soft); }
.on-dark .note{ border-left-color:var(--gold-soft); color:var(--mute-on-green); }
.on-dark .note b{ color:var(--cream); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block:clamp(84px, 11vw, 176px); }
.on-cream{ background:var(--cream); }
.on-sand{ background:var(--sand); }
.on-green{ background:var(--green); }
.on-deep{ background:var(--green-deep); }
.section-head{ max-width:64ch; }
.section-head .h2{ margin:clamp(18px,2.2vw,28px) 0 clamp(18px,2vw,24px); }
.section-head .lead{ margin-top:clamp(18px,2vw,26px); }
.cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:16px clamp(18px,2.6vw,30px); margin-top:clamp(30px,4vw,48px); }

/* the seam between two light sections is a hairline that fades at the ends */
.section.on-cream + .section.on-cream::before,
.section.on-sand + .section.on-cream::before,
.section.on-cream + .section.on-sand::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(var(--wrap), 92vw); height:1px;
  background:linear-gradient(90deg, transparent, rgba(118,84,35,.24) 16%, rgba(118,84,35,.24) 84%, transparent);
}

/* grain on the dark blocks so a flat field reads as a printed one */
.grain{ position:relative; }
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > *{ position:relative; z-index:1; }

/* ---------- buttons and links ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:52px; padding:17px 32px; border-radius:1px;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:400;
  white-space:nowrap; transition:background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.btn .arr{ display:inline-block; transition:transform .5s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn-gold{ background:var(--gold); color:var(--cream); }
.btn-gold:hover{ background:#9A3120; transform:translateY(-1px); }
.btn-line{ border:1px solid var(--line); color:var(--ink); }
.btn-line:hover{ border-color:var(--gold); color:var(--gold); }
.on-dark .btn-gold{ background:var(--gold-soft); color:var(--ink); }
.on-dark .btn-gold:hover{ background:#F6A48B; }
.on-dark .btn-line{ border-color:var(--line-green); color:var(--cream); }
.on-dark .btn-line:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }
/* A button label that carries a price is long. On a phone it says the same
   thing in fewer words rather than wrapping or shrinking under the floor. */
.w-narrow{ display:none; }
@media(max-width:480px){
  .w-wide{ display:none; }
  .w-narrow{ display:inline; }
  .btn{ padding:16px 22px; letter-spacing:.16em; max-width:100%; }
  .link{ white-space:normal; }
}

.link{
  display:inline-block; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px solid var(--gold); padding-bottom:6px;
  transition:color .4s var(--ease), border-color .4s var(--ease); white-space:nowrap;
}
.link:hover{ color:var(--gold); }
.on-dark .link{ color:var(--cream); border-bottom-color:var(--gold-soft); }
.on-dark .link:hover{ color:var(--gold-soft); }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background-color .6s var(--ease), box-shadow .6s var(--ease);
}
.nav.scrolled{ background:rgba(245,241,233,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 1px 0 var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:12px; flex:none; z-index:62; }
.brand .mark{
  width:40px; height:34px; flex:none; background-color:var(--gold);
  -webkit-mask:url("mark-116.png") center/contain no-repeat;
          mask:url("mark-116.png") center/contain no-repeat;
}
.brand .words{ display:flex; flex-direction:column; line-height:1.15; }
.brand .name{ font-family:var(--f-serif); font-weight:500; font-size:19px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
.brand .sub{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.menu{ display:none; align-items:center; gap:clamp(18px,2.2vw,34px); }
.menu a{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; position:relative; padding-bottom:4px; }
.menu a i{ font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:15px; letter-spacing:0; text-transform:none; color:var(--gold); margin-right:7px; }
.menu a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.menu a:hover::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-cta .btn{ min-height:0; padding:12px 20px; font-size:11px; letter-spacing:.2em; }
.burger{ display:inline-flex; align-items:center; gap:10px; padding:10px 0 10px 10px; position:relative; z-index:62; }
.burger-label{ font-size:11px; letter-spacing:.26em; text-transform:uppercase; }
.burger-lines{ display:grid; gap:5px; }
.burger-lines span{ display:block; width:22px; height:1.4px; background:currentColor; transition:transform .5s var(--ease), opacity .3s; }
.burger[aria-expanded="true"] .burger-lines span:nth-child(1){ transform:translateY(6.4px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-lines span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] .burger-lines span:nth-child(3){ transform:translateY(-6.4px) rotate(-45deg); }
@media(min-width:1024px){ .menu{ display:flex; } .burger{ display:none; } }
@media(max-width:1023px){
  .brand .sub{ display:none; }
  .brand .name{ font-size:14px; }
  .brand .mark{ width:32px; height:27px; }
  .nav-cta .btn{ padding:10px 14px; }
}
@media(max-width:400px){
  .brand .name{ font-size:11px; letter-spacing:.16em; }
  .brand{ gap:8px; }
  .brand .mark{ width:26px; height:22px; }
  .nav-inner{ gap:10px; }
  .nav-cta{ gap:8px; }
  .nav-cta .btn{ padding:9px 11px; letter-spacing:.14em; }
  .burger{ gap:7px; padding-left:4px; }
  .burger-label{ letter-spacing:.16em; }
  .burger-lines span{ width:18px; }
}

/* the full screen menu */
.sheet{
  position:fixed; inset:0; z-index:61; background:var(--green-deep); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center; padding:var(--pad);
  opacity:0; visibility:hidden; transition:opacity .6s var(--ease), visibility .6s;
}
.sheet.open{ opacity:1; visibility:visible; }
.sheet nav a{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--f-serif); font-weight:600; font-size:clamp(28px,7vw,44px); letter-spacing:-.02em;
  padding-block:12px; border-bottom:1px solid var(--line-green);
}
.sheet nav a .no{ font-family:var(--f-sans); font-weight:400; font-size:11px; letter-spacing:.3em; color:var(--gold-soft); }
.sheet .sheet-cta{ display:flex; gap:10px; margin-top:30px; }
.sheet .sheet-cta .btn{ flex:1 1 0; min-width:0; padding-inline:8px; font-size:11px; letter-spacing:.16em; }
body:has(.sheet.open) .nav{ background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; z-index:62; }
body:has(.sheet.open) .nav .name, body:has(.sheet.open) .nav .burger{ color:var(--cream); }
body:has(.sheet.open) .nav .mark{ background-color:var(--gold-soft); }
/* the Book button and the desktop menu step back; the burger stays, because it
   is the only thing that closes the sheet */
body:has(.sheet.open) .nav .nav-cta > .btn, body:has(.sheet.open) .nav .menu{ opacity:0; pointer-events:none; }

/* ---------- hero ---------- */
/* Below 1024 the masthead wrapper dissolves so its two halves can sit either
   side of the folds: the headline, then the triptych, then the terms and the
   call. On a phone the three sides are on the first screen, not under it. */
.hero{ position:relative; display:grid; grid-template-columns:100%; background:var(--cream); }
.hero-mast{ display:contents; }
.hero-head{ order:1; padding:calc(var(--nav-h) + clamp(20px,3vw,28px)) var(--pad) clamp(26px,4vw,36px); }
.folds{ order:2; }
.hero-aside{ order:3; padding:clamp(30px,5vw,44px) var(--pad) clamp(40px,6vw,56px); }
.hero .flag{
  display:flex; align-items:center; gap:12px; margin-bottom:clamp(20px,2.4vw,32px);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); font-weight:400;
}
.hero .flag::before{ content:""; width:22px; height:1px; background:var(--gold); flex:none; }
.hero .flag span{ display:inline; }
.hero-aside{ display:flex; flex-direction:column; gap:clamp(18px,2vw,26px); }
.hero-aside .lead{ max-width:44ch; }
.hero-aside .cta-row{ margin-top:6px; }
@media(min-width:1024px){
  .hero{ min-height:100vh; min-height:100svh; grid-template-rows:auto 1fr; }
  .hero-mast{
    display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(320px, .75fr); column-gap:clamp(40px,5vw,96px);
    align-items:end; padding-top:calc(var(--nav-h) + 24px); padding-bottom:clamp(30px,3vw,40px);
  }
  .hero-head, .hero-aside{ order:0; padding:0; }
  .hero-aside{ padding-bottom:8px; }
}

/* Three vertical folds, one per side. Selecting one opens it; the other two
   fall back to their spines. The photograph moves on a transform on its own
   layer, and the four lines of copy arrive in sequence. */
.folds{
  display:flex; gap:2px; background:var(--green-deep); width:100%;
  --fold-ease:cubic-bezier(.16,1,.3,1);
}
@media(min-width:1024px){ .folds{ min-height:460px; } }
.fold{
  position:relative; flex:1 1 0; min-width:0; overflow:hidden;
  background:var(--green-deep); color:var(--cream); text-align:left;
  transition:flex-grow .9s var(--fold-ease); will-change:flex-grow;
}
.folds.has-open .fold{ flex-grow:.5; }
.folds.has-open .fold.is-open{ flex-grow:2.7; }
.fold-img{
  position:absolute; inset:0; z-index:0; background-size:cover; background-repeat:no-repeat;
  transform:scale(1.16); transition:transform 1.2s var(--fold-ease); will-change:transform;
}
.fold.is-open .fold-img{ transform:scale(1.02); }
.fold:not(.is-open):hover .fold-img{ transform:scale(1.1); }
/* The scrim holds .90 through the bottom 40%, which is the band the copy
   occupies. Measured against the brightest photograph, not eyeballed. */
.fold::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg,
    rgba(var(--scrim),.96) 0%, rgba(var(--scrim),.90) 40%,
    rgba(var(--scrim),.42) 70%, rgba(var(--scrim),.06) 100%);
}
.fold::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3;
  background:var(--gold-soft); transform:scaleX(0); transform-origin:left; transition:transform .9s var(--fold-ease) .1s;
}
.fold.is-open::before{ transform:scaleX(1); }
.fold:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:-4px; }
.fold-spine{
  position:absolute; left:0; right:0; margin-inline:auto; width:max-content; bottom:clamp(18px,2.4vw,30px); z-index:2;
  writing-mode:vertical-rl; rotate:180deg;
  display:flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--cream); white-space:nowrap;
  transition:opacity .35s var(--fold-ease), translate .5s var(--fold-ease);
}
.fold-spine i{ font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:18px; letter-spacing:0; color:var(--gold-soft); }
.fold.is-open .fold-spine{ opacity:0; translate:0 14px; pointer-events:none; }
.fold-open{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:clamp(22px,3vw,44px);
  opacity:0; translate:0 16px; pointer-events:none;
  transition:opacity .6s var(--fold-ease) .22s, translate .7s var(--fold-ease) .22s;
}
.fold.is-open .fold-open{ opacity:1; translate:0 0; }
.fold-open > *{ opacity:0; translate:0 10px; transition:opacity .55s var(--fold-ease), translate .55s var(--fold-ease); }
.fold.is-open .fold-open > *{ opacity:1; translate:0 0; }
.fold.is-open .fold-open > :nth-child(1){ transition-delay:.26s; }
.fold.is-open .fold-open > :nth-child(2){ transition-delay:.32s; }
.fold.is-open .fold-open > :nth-child(3){ transition-delay:.38s; }
.fold.is-open .fold-open > :nth-child(4){ transition-delay:.44s; }
.fold.is-open .fold-open > :nth-child(5){ transition-delay:.50s; }
.fold-n{ font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:clamp(22px,2vw,30px); line-height:1; color:var(--gold-soft); }
.fold-name{ font-family:var(--f-serif); font-weight:600; font-size:clamp(28px,3.6vw,60px); line-height:1; letter-spacing:-.024em; color:var(--cream); }
.fold-open .spec{ color:var(--cream); margin-top:8px; }
.fold-open .spec > span:not(:last-child)::after{ background:var(--gold-soft); }
.fold-line{ font-size:clamp(14px,1vw,16.5px); line-height:1.55; color:var(--cream); max-width:38ch; font-weight:300; }
.fold-go{
  margin-top:8px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft);
  border-bottom:1px solid rgba(203,167,90,.55); padding-bottom:5px; transition:color .3s, border-color .3s;
}
.fold.is-open:hover .fold-go{ color:var(--cream); border-bottom-color:var(--cream); }
@media(max-width:1023px){
  .folds{ min-height:0; aspect-ratio:16/10; }
  .folds.has-open .fold{ flex-grow:.62; }
  .folds.has-open .fold.is-open{ flex-grow:2.2; }
  .fold-open{ padding:20px; gap:7px; }
  .fold-line{ max-width:32ch; }
}
@media(max-width:700px){
  .folds{ aspect-ratio:4/5; }
  .fold-spine{ letter-spacing:.16em; gap:8px; bottom:16px; }
  .fold-spine i{ font-size:15px; }
  .fold-line{ display:none; }
  .fold-name{ font-size:clamp(24px,7vw,34px); }
}
@media(max-width:420px){
  .fold-open .spec{ display:none; }
  .fold-go{ letter-spacing:.16em; line-height:1.7; }
}
@media (prefers-reduced-motion: reduce){
  .fold, .fold-img, .fold-open, .fold-open > *, .fold-spine, .fold::after, .fold::before{ transition:none !important; }
  .fold-img, .fold:not(.is-open):hover .fold-img{ transform:none; }
}

/* The index under the hero: the three sides stated once more as a row. */
.index{ background:var(--green-deep); color:var(--cream); }
.index .wrap{ display:grid; grid-template-columns:minmax(0,1fr); }
.index a{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px;
  padding:22px 0; border-bottom:1px solid var(--line-green);
  transition:color .4s var(--ease);
}
.index a:last-child{ border-bottom:0; }
.index i{ font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:26px; line-height:1; color:var(--gold-soft); }
.index b{ font-family:var(--f-serif); font-weight:600; font-size:clamp(20px,1.6vw,24px); letter-spacing:-.01em; }
.index small{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute-on-green); margin-top:4px; }
.index .arr{ font-size:18px; color:var(--gold-soft); transition:transform .5s var(--ease); }
.index a:hover .arr{ transform:translateX(6px); }
@media(min-width:900px){
  .index .wrap{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .index a{ padding:30px clamp(20px,3vw,44px) 30px 0; border-bottom:0; border-right:1px solid var(--line-green); }
  .index a + a{ padding-left:clamp(20px,3vw,44px); }
  .index a:last-child{ border-right:0; padding-right:0; }
}

/* ---------- two column editorial grids ---------- */
.duo{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:start; }
@media(min-width:1024px){ .duo{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } .duo.rev > :nth-child(1){ order:2; } .duo.rev > :nth-child(2){ order:1; } .duo > .cta-row{ order:3; } }
.duo .cta-row{ grid-column:1 / -1; }

/* photographs: plates with hard edges */
.plate{ position:relative; overflow:hidden; background:var(--green-deep); background-size:cover; background-position:50% 50%; }
.plate.tall{ aspect-ratio:4/5; }
.plate.wide{ aspect-ratio:16/9; }
.plate.square{ aspect-ratio:1/1; }
.plate.stack{ aspect-ratio:3/2; }
.plate .plate-img{ position:absolute; inset:-6% 0; background-size:cover; background-position:inherit; will-change:transform; }
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .plate .plate-img{ animation:drift linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
    @keyframes drift{ from{ transform:translateY(-3.5%) scale(1.06); } to{ transform:translateY(3.5%) scale(1.06); } }
  }
}
.plate-pair{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
@media(min-width:640px){
  .plate-pair{ grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr); align-items:end; }
  .plate-pair > :last-child{ margin-bottom:clamp(36px,6vw,84px); }
}
.figure{ position:relative; }

/* full-width split: a photograph on one half, copy on the other */
.split{ display:grid; grid-template-columns:minmax(0,1fr); }
.split .plate{ aspect-ratio:4/3; }
.split .copy{ padding:clamp(56px,7vw,112px) var(--pad); max-width:100%; }
@media(min-width:1024px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  /* the photograph holds the screen while the menu scrolls past it */
  .split .plate{ aspect-ratio:auto; position:sticky; top:0; height:100vh; height:100svh; align-self:start; }
  .split .copy{ padding:clamp(80px,9vw,160px) var(--pad) clamp(80px,9vw,160px) clamp(32px,4vw,64px); max-width:calc(var(--wrap) / 2); justify-self:start; }
  .split.rev .plate{ order:2; }
  .split.rev .copy{ order:1; justify-self:end; padding:clamp(80px,9vw,160px) clamp(40px,5vw,96px) clamp(80px,9vw,160px) var(--pad); }
}

/* ---------- house rules ---------- */
.rules{ margin-top:clamp(36px,4vw,56px); border-top:1px solid var(--line); }
.rule{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:14px 18px; padding:clamp(22px,2.6vw,32px) 0; border-bottom:1px solid var(--line); }
.rule i{ font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:clamp(28px,2.6vw,36px); line-height:1; color:var(--gold); padding-top:4px; }
.rule h3{ font-size:clamp(22px,2vw,28px); line-height:1.15; margin-bottom:8px; }
.rule p{ font-size:15.5px; color:var(--mute); max-width:50ch; }

/* ---------- steps (hair) ---------- */
.steps{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin-top:clamp(40px,5vw,72px); border-top:1px solid var(--line-green); }
.step{ padding:clamp(26px,3vw,40px) 0; border-bottom:1px solid var(--line-green); display:flex; flex-direction:column; gap:12px; }
.step i{ font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:clamp(30px,3vw,44px); line-height:1; color:var(--gold-soft); }
.step h3{ font-size:clamp(24px,2.2vw,32px); line-height:1.1; color:var(--cream); }
.step p{ font-size:15.5px; color:var(--mute-on-green); max-width:44ch; }
.step .meta{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--cream); margin-top:auto; padding-top:6px; }
@media(min-width:860px){
  .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(28px,3.5vw,56px); }
  .step{ border-bottom:0; border-right:1px solid var(--line-green); padding-right:clamp(20px,2.5vw,40px); }
  .step:last-child{ border-right:0; padding-right:0; }
}

/* ---------- menu list (aesthetics) ---------- */
.menu-list{ margin-top:clamp(34px,4vw,52px); border-top:1px solid var(--line); }
.row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name price" "desc desc"; gap:6px 20px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--line); position:relative;
}
.row::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease); }
.row:hover::after{ transform:scaleX(1); }
.row .name{ grid-area:name; font-family:var(--f-serif); font-weight:600; font-size:clamp(22px,2vw,30px); line-height:1.1; letter-spacing:-.015em; transition:transform .5s var(--ease); }
.row:hover .name{ transform:translateX(6px); }
.row .desc{ grid-area:desc; font-size:14.5px; color:var(--mute); max-width:52ch; }
.row .price{ grid-area:price; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:clamp(19px,1.6vw,24px); color:var(--gold); white-space:nowrap; }
.row .price small{ font-family:var(--f-sans); font-style:normal; font-weight:400; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin-right:8px; }
/* The menu keeps its description under the name: the split gives the copy
   half the screen, and three columns in half a screen squeezed the middle one. */
.row .desc{ margin-top:2px; }

/* ---------- sequence (longevity) ---------- */
.seq{ border-top:1px solid var(--line-green); margin-top:clamp(34px,4vw,52px); }
.seq-item{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:6px 18px; padding:clamp(20px,2.4vw,28px) 0; border-bottom:1px solid var(--line-green); }
.seq-item i{ font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:26px; line-height:1.1; color:var(--gold-soft); }
.seq-item h3{ font-size:clamp(21px,1.8vw,26px); line-height:1.15; color:var(--cream); }
.seq-item p{ grid-column:2; font-size:15px; color:var(--mute-on-green); max-width:46ch; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:clamp(26px,3vw,36px); }
.chips span{ font-size:12px; letter-spacing:.06em; padding:9px 15px; border:1px solid var(--line-green); border-radius:999px; color:var(--cream); white-space:nowrap; }

/* ---------- bleed statement ---------- */
.bleed{
  position:relative; min-height:clamp(560px, 86vh, 860px); display:flex; align-items:flex-end;
  overflow:hidden; background:var(--green-deep); color:var(--cream); isolation:isolate;
}
.bleed-img{ position:absolute; inset:-8% 0; z-index:0; background-size:cover; background-position:50% 45%; will-change:transform; }
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .bleed-img{ animation:bleedPan linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
    @keyframes bleedPan{ from{ transform:translateY(-4%) scale(1.06); } to{ transform:translateY(4%) scale(1.06); } }
  }
}
/* The copy sits in the bottom half, so the scrim is heaviest there and lets
   the top of the photograph breathe. Values set from sampled pixels. */
.bleed::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg,
    rgba(var(--scrim),.95) 0%, rgba(var(--scrim),.91) 62%,
    rgba(var(--scrim),.70) 80%, rgba(var(--scrim),.30) 92%, rgba(var(--scrim),.12) 100%);
}
@media(max-width:700px){ .bleed{ min-height:100vh; min-height:100svh; } }
.bleed .wrap{ position:relative; z-index:2; padding-top:clamp(120px,22vh,220px); padding-bottom:clamp(56px,8vw,104px); }
/* gold-soft at 11px cannot hold 4.5:1 over a bright photograph at any scrim
   that still shows the photograph, so this one label is cream */
.bleed .eyebrow{ color:var(--cream); }
.bleed .h2{ color:var(--cream); max-width:18ch; margin:clamp(18px,2.2vw,28px) 0 clamp(18px,2vw,24px); }
.bleed .lead{ color:var(--cream); max-width:48ch; }
.bleed .cap-top{
  position:absolute; top:calc(clamp(24px,3vw,40px)); left:var(--pad); z-index:2;
  max-width:calc(100% - var(--pad) * 2);
  display:flex; align-items:flex-start; gap:12px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); line-height:1.5;
  padding:10px 14px; background:rgba(var(--scrim),.9);
}
.bleed .cap-top::before{ content:""; flex:0 0 22px; height:1px; margin-top:8px; background:var(--gold-soft); }

/* ---------- entries (first visit) ---------- */
.entries{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:clamp(40px,5vw,64px); }
.entry{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:clamp(28px,3vw,40px); border:1px solid var(--line); background:rgba(255,255,255,.55);
  transition:border-color .6s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
}
.entry:hover{ border-color:var(--gold); transform:translateY(-4px); box-shadow:0 30px 60px -34px rgba(17,18,17,.35); }
.entry .kick{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.entry h3{ font-size:clamp(26px,2.4vw,34px); line-height:1.05; }
.entry ul{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.entry li{ font-size:15px; color:var(--mute); padding-left:18px; position:relative; }
.entry li::before{ content:""; position:absolute; left:0; top:.72em; width:5px; height:1px; background:var(--gold); }
.entry .meta{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); margin-top:auto; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.entry .price{ font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:clamp(34px,3vw,44px); line-height:1; color:var(--gold); letter-spacing:-.01em; }
.entry .link{ align-self:flex-start; margin-top:6px; }
@media(min-width:900px){ .entries{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } }

/* ---------- visit ---------- */
.visit dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px 28px; margin-top:clamp(30px,3.6vw,44px); }
.visit dt{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); padding-top:5px; white-space:nowrap; }
.visit dd{ font-size:16px; color:var(--ink-soft); max-width:44ch; }
@media(max-width:420px){ .visit dl{ grid-template-columns:minmax(0,1fr); gap:6px 0; } .visit dd{ margin-bottom:12px; } }

/* ---------- footer ---------- */
.footer{ background:var(--green-deep); color:var(--cream); padding:clamp(64px,8vw,112px) 0 clamp(36px,4vw,56px); position:relative; overflow:hidden; }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:40px; }
.foot-brand .brand .mark{ background-color:var(--gold-soft); }
.foot-brand .brand .sub{ color:var(--gold-soft); }
.foot-brand p{ font-size:14px; color:var(--mute-on-green); margin-top:20px; max-width:34ch; }
.foot-col h4{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-soft); font-weight:400; margin-bottom:16px; }
.foot-col ul{ display:flex; flex-direction:column; gap:9px; }
.foot-col a{ font-size:14.5px; color:var(--mute-on-green); transition:color .3s; }
.foot-col a:hover{ color:var(--cream); }
@media(min-width:860px){ .foot-grid{ grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:32px; } }
.statement{
  display:grid; grid-template-columns:minmax(0,1fr); gap:26px 44px;
  margin-top:clamp(44px,5vw,64px); padding-top:clamp(30px,4vw,44px); border-top:1px solid var(--line-green);
}
.statement .pl{ display:block; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:10px; }
.statement p{ font-size:12.5px; line-height:1.65; color:var(--mute-on-green); max-width:46ch; }
.statement a{ color:var(--mute-on-green); text-decoration:underline; text-underline-offset:3px; }
.statement a:hover{ color:var(--cream); }
@media(min-width:860px){ .statement{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.foot-base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  margin-top:clamp(30px,4vw,44px); padding-top:22px; border-top:1px solid var(--line-green);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-on-green);
}
.foot-base a{ color:var(--mute-on-green); }
.foot-base a:hover{ color:var(--cream); }

/* ---------- glossary tooltips ---------- */
.tip{ position:relative; display:inline; white-space:nowrap; }
.tip-t{
  font:inherit; color:inherit; cursor:help; position:relative;
  border-bottom:1px dotted var(--gold); padding:0; white-space:normal;
}
.tip-t::before{ content:""; position:absolute; left:-6px; right:-6px; top:-11px; bottom:-11px; }
.tip-t::after{ content:"\00b0"; font-size:.85em; line-height:1; color:var(--gold); vertical-align:super; margin-left:2px; }
.tip-t:hover, .tip-t:focus-visible{ color:var(--gold); }
.on-dark .tip-t{ border-bottom-color:var(--gold-soft); }
.on-dark .tip-t::after{ color:var(--gold-soft); }
.on-dark .tip-t:hover, .on-dark .tip-t:focus-visible{ color:var(--gold-soft); }
.tip-b{
  position:absolute; left:0; top:calc(100% + 10px); z-index:40;
  width:max-content; max-width:min(300px, 78vw);
  background:var(--green-deep); color:var(--mute-on-green);
  border:1px solid rgba(203,167,90,.32); border-radius:2px;
  padding:13px 15px; font-size:13px; line-height:1.5; letter-spacing:0;
  text-transform:none; font-style:normal; font-weight:300; white-space:normal; font-family:var(--f-sans);
  box-shadow:0 20px 44px -18px rgba(10,10,9,.6);
  /* Closed, it is display:none rather than merely invisible: an invisible box
     still occupies layout, and one near the right edge widened the page. The
     open transition is kept where the browser supports starting styles. */
  display:none; opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), display .25s allow-discrete;
}
.tip-b.flip{ left:auto; right:0; }
.tip:hover .tip-b, .tip:focus-within .tip-b, .tip.is-open .tip-b{ display:block; opacity:1; transform:translateY(0); }
@starting-style{
  .tip:hover .tip-b, .tip:focus-within .tip-b, .tip.is-open .tip-b{ opacity:0; transform:translateY(-4px); }
}
@media (hover: none){
  .tip:hover .tip-b{ display:none; }
  .tip.is-open .tip-b{ display:block; opacity:1; transform:none; }
  .tip-t{ cursor:pointer; }
}
@media(max-width:620px){
  .tip-b, .tip-b.flip{
    position:fixed; left:var(--pad); right:var(--pad); top:auto; bottom:calc(16px + env(safe-area-inset-bottom));
    width:auto; max-width:none; z-index:58; font-size:14px; padding:16px 18px; transform:translateY(8px);
  }
  .tip.is-open .tip-b{ transform:translateY(0); }
  .tip.is-open .tip-t{ color:var(--gold); }
  .on-dark .tip.is-open .tip-t{ color:var(--gold-soft); }
}
@media (prefers-reduced-motion: reduce){ .tip-b{ transition:none; } }

/* ---------- motion ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.12s; } .d2{ transition-delay:.24s; } .d3{ transition-delay:.36s; }
.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--gold); z-index:70; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .link, .row .name, .row::after, .index .arr, .entry, .menu a::after, .nav{ transition:none; }
  .entry:hover{ transform:none; }
  .progress{ display:none; }
}

/* ============================================================
   The live homepage. What follows adapts the proposal to the site as it
   is now: the type system (a text Garamond for reading, a grotesque for
   the official layer), the landing choreography, the plus cues on closed
   folds, and the sticky bar on a phone that every other page carries.
   ============================================================ */

/* ---------- the type system ---------- */
.lead{ font-weight:400; letter-spacing:0; font-size:clamp(18px, .9vw + 11px, 22px); }
.rule p, .step p{ font-size:17px; line-height:1.55; }
.seq-item p, .row .desc, .entry li{ font-size:16.5px; line-height:1.55; }
.visit dd{ font-size:17.5px; }
.fold-line{ font-size:clamp(15.5px, 1.05vw, 18px); font-weight:400; }
.foot-brand p{ font-size:15.5px; }
.eyebrow, .spec, .cap, .cap-in, .cap-top, .note, .btn, .link, .menu a, .brand .sub, .burger-label, .index small,
.chips span, .step .meta, .entry .kick, .entry .meta, .row .price small, .visit dt, .foot-col h4, .foot-col a,
.foot-base, .statement, .tip-b, .sheet nav a .no, .hero .flag, .fold-spine, .fold-go, .fold-open .spec, .mobile-bar{
  font-family:var(--f-sans);
}
.eyebrow, .spec, .cap, .cap-in, .btn, .menu a{ font-weight:500; }
.note, .statement p, .tip-b, .foot-base{ font-weight:400; }
.tip-t{ font-family:inherit; font-size:inherit; }
.on-dark, .footer, .bleed{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.row .price, .entry .price, .index i, .eyebrow i, .rule i, .step i, .seq-item i, .fold-n{ font-variant-numeric:lining-nums; }
h1, h2, .display, .h2{ hanging-punctuation:first; }
.display{ line-height:.98; letter-spacing:-.03em; }
.h2{ line-height:1.02; letter-spacing:-.026em; }

/* ---------- the landing ----------
   On the first arrival in a session the three folds come in as equal
   windows and the first opens itself. The class on html is set by the
   inline script in the head before paint and removed by the page script
   a second later, or the moment anyone reaches for a fold. */
html.is-landing .folds.has-open .fold{ flex-grow:1; }
html.is-landing .fold.is-open .fold-open{ opacity:0; translate:0 16px; }
html.is-landing .fold.is-open .fold-open > *{ opacity:0; translate:0 10px; }
html.is-landing .fold.is-open .fold-spine{ opacity:1; translate:0 0; }
html.is-landing .fold.is-open .fold-img{ transform:scale(1.16); }
html.is-landing .fold.is-open::before{ transform:scaleX(0); }
@media (prefers-reduced-motion: no-preference){
  .fold-img{ animation:foldPhotoIn .9s var(--fold-ease) backwards; }
  .fold:nth-child(2) .fold-img{ animation-delay:.1s; }
  .fold:nth-child(3) .fold-img{ animation-delay:.2s; }
  html.is-landing .fold-spine, .fold:not(.is-open) .fold-spine{ animation:foldSpineIn .7s var(--fold-ease) .4s backwards; }
  .fold:nth-child(2) .fold-spine{ animation-delay:.5s; }
  .fold:nth-child(3) .fold-spine{ animation-delay:.6s; }
  @keyframes foldPhotoIn{ from{ opacity:0; } }
  @keyframes foldSpineIn{ from{ opacity:0; translate:0 10px; } }
}
/* a closed fold says it opens */
.fold-spine::after{ content:"+"; font-family:var(--f-serif); font-weight:300; font-size:17px; line-height:1; color:var(--gold-soft); opacity:.9; }
/* leaving copy is quick and undelayed; arriving copy waits for the width */
.fold-open{ transition:opacity .28s ease, translate .28s ease; }
.fold.is-open .fold-open{ transition:opacity .6s var(--fold-ease) .18s, translate .7s var(--fold-ease) .18s; }
.fold-open > *{ transition:opacity .22s ease, translate .22s ease; }
.fold.is-open .fold-open > *{ transition:opacity .55s var(--fold-ease), translate .6s var(--fold-ease); }
/* the joints between folds are a hairline of light */
.folds{ gap:1px; background:rgba(245,241,233,.14); }

/* ---------- the sticky bar on a phone ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:55; display:flex; gap:8px;
  background:rgba(18,17,16,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .5s var(--ease);
}
.mobile-bar.show{ transform:translateY(0); }
.mobile-bar .btn{ flex:1 1 0; min-width:0; min-height:48px; padding:12px 8px; font-size:11px; letter-spacing:.16em; }
.mobile-bar .btn-gold{ background:var(--gold); color:var(--cream); }
.mobile-bar .btn-line{ border-color:rgba(245,241,233,.3); color:var(--cream); }
@media(min-width:860px){ .mobile-bar{ display:none; } }
@media(max-width:859px){ .footer{ padding-bottom:calc(96px + env(safe-area-inset-bottom)); } }
@media(max-width:620px){ .tip-b, .tip-b.flip{ bottom:calc(84px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce){
  .fold-img, .fold-spine, .mobile-bar{ animation:none !important; transition:none !important; }
}

/* ---------- the phone ---------- */
@media(max-width:639px){
  /* a specification stacks as a list, the dot leading each line, rather than
     a row that wraps and leaves a dot hanging off the end of a line */
  .section .spec, .hero-aside .spec{ flex-direction:column; align-items:flex-start; gap:7px; letter-spacing:.14em; }
  .section .spec > span:not(:last-child)::after, .hero-aside .spec > span:not(:last-child)::after{ display:none; }
  .section .spec > span::before, .hero-aside .spec > span::before{
    content:""; width:3px; height:3px; border-radius:50%; flex:0 0 3px; background:var(--gold); margin-right:10px;
  }
  .on-dark .spec > span::before{ background:var(--gold-soft); }
  /* the three entries are a rail: side by side at a little over four fifths
     of the width, the edge of the next one showing */
  .entries{
    display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad);
    margin-inline:calc(-1 * var(--pad)); padding:4px var(--pad) 6px; scrollbar-width:none;
  }
  .entries::-webkit-scrollbar{ display:none; }
  .entries > *{ flex:0 0 min(82vw, 340px); scroll-snap-align:start; }
  .entry:hover{ transform:none; }
  /* one photograph of the pair is enough on a phone */
  .plate-pair > :last-child{ display:none; }
  .section{ padding-block:clamp(56px,9vw,72px); }
}

/* ---------- corrections after sampling the render ----------
   Inside a button, the rotated spine sat at the fold's left edge rather
   than its centre. The spine is now a plain box across the fold that
   centres a rotated inner label, so nothing about the rotation touches
   the centring. And the scrim holds .92 through the lower half, because
   the gold numeral at the top of the open copy measured 2.7:1 over the
   brightest photograph at 1024. */
.fold-spine{
  left:0; right:0; width:auto; margin:0; display:flex; justify-content:center;
  writing-mode:horizontal-tb; rotate:none;
}
.fold-spine b{
  display:flex; align-items:center; gap:12px; font-weight:inherit;
  writing-mode:vertical-rl; rotate:180deg; white-space:nowrap;
}
.fold-spine::after{ content:none; }
.fold-spine b::after{ content:"+"; font-family:var(--f-serif); font-weight:300; font-size:17px; line-height:1; color:var(--gold-soft); opacity:.9; }
.fold::after{
  background:linear-gradient(0deg,
    rgba(var(--scrim),.96) 0%, rgba(var(--scrim),.92) 50%,
    rgba(var(--scrim),.56) 74%, rgba(var(--scrim),.06) 100%);
}

/* ---------- the language, tightened ---------- */
.plate-img, .fold-img, .bleed-img{ filter:saturate(.84) contrast(1.04); }
.hero .flag{ flex-wrap:wrap; row-gap:8px; }
.hero .flag .flag-x{ display:inline-flex; align-items:center; gap:12px; color:var(--mute); font-variant-numeric:lining-nums; }
.hero .flag .flag-x::before{ content:""; width:3px; height:3px; border-radius:50%; background:var(--gold); }
.hero .flag .flag-x b{ font-weight:500; color:var(--ink-soft); }
.hero .flag .hc-time:empty{ display:none; }
@media(max-width:1023px){ .hero .flag .flag-x{ display:none; } }
/* the nav's controls on a phone are a full 44px tap target */
@media(max-width:1023px){
  .nav-cta .btn{ min-height:44px; padding:12px 16px; }
  .burger{ min-height:44px; padding:12px 0 12px 10px; }
}
@media(max-width:400px){ .nav-cta .btn{ padding:12px 12px; } }

/* ---------- uniform with the rest of the site ---------- */
html{ font-variant-numeric:lining-nums; }
.eyebrow{ letter-spacing:.3em; }
.spec{ letter-spacing:.17em; }
.btn{ min-height:48px; padding:16px 30px; }
.nav-cta .btn{ min-height:0; padding:12px 20px; }
.mobile-bar .btn{ min-height:48px; padding:12px 8px; }
.mobile-bar .btn-gold{ background:var(--gold-soft); color:var(--ink); }
@media(max-width:1023px){ .nav-cta .btn{ min-height:44px; padding:12px 16px; } }
@media(max-width:400px){ .nav-cta .btn{ padding:12px 12px; } }

/* ---------- one structure: house strip, reassurance, bolder display ---------- */
.house{ background:var(--green); color:var(--cream); border-top:1px solid var(--line-green); border-bottom:1px solid var(--line-green); overflow:hidden; position:relative; }
.house-track{ display:flex; width:max-content; animation:house 64s linear infinite; }
.house ul{ display:flex; align-items:center; margin:0; padding:0; list-style:none; flex:none; }
.house li{
  display:flex; align-items:center; gap:22px; padding:15px 0; margin-right:22px;
  font-family:var(--f-sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute-on-green); white-space:nowrap;
}
.house li::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold-soft); flex:none; }
.house li b{ font-weight:500; color:var(--cream); }
.house:hover .house-track{ animation-play-state:paused; }
@keyframes house{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .house-track{ animation:none; width:auto; }
  .house ul{ flex-wrap:wrap; justify-content:center; padding:6px var(--pad); }
  .house ul + ul{ display:none; }
  .house li{ white-space:normal; padding:8px 0; }
}
.cta-sure{ margin-top:18px; font-family:var(--f-sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute-on-green); line-height:1.9; }
.cta-sure i{ font-style:normal; color:var(--gold-soft); margin:0 8px; }
.display{ font-size:clamp(50px, 7.4vw, 116px); font-weight:700; letter-spacing:-.034em; line-height:.94; }
.h2{ font-size:clamp(38px, 5.4vw, 84px); }
h1, .display{ font-weight:700; }

/* ---------- serif headlines, a step lighter ---------- */
h1, .display{ font-weight:600; }
h2, h3, .h2, .h3{ font-weight:500; }
.display em, .h2 em{ font-weight:500; }
.fold-name, .row .name, .index b, .step h3, .seq-item h3, .entry h3{ font-weight:500; }

/* the quiet links may wrap on phones; this sits last so it wins the cascade */
@media(max-width:480px){ .link{ white-space:normal; } }

/* ---------- the new sections, checked across widths ---------- */
@media(min-width:600px) and (max-width:859px){ .fue-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ============================================================
   EACH SIDE, ITS OWN FLAIR
   Hair keeps the house brass on bottle green. Aesthetics warms to
   copper on a browner green and a warmer stone. Longevity cools to
   verdigris on a bluer green and a cooler stone. The accents carry
   the side (eyebrows, numerals, rules, prices, emphasis); the buttons
   stay the house gold everywhere, so the call to action never changes.
   ============================================================ */
:root{ --cta:#B03A25; --cta-hover:#9A3120; --cta-soft:#F28C6E; --cta-soft-hover:#F6A48B; }
.side-hair{ --gold:#B03A25; --gold-soft:#F28C6E; }
.side-aes{ --gold:#98455A; --gold-soft:#EFA9B6; --sand:#F0E2DA; }
.side-aes.on-cream, .side-aes .page-hero{ background:#F9EFEA; }
/* the shared chrome stays the house */
.nav, .sheet, .footer, .house, .mobile-bar{ --gold:#B03A25; --gold-soft:#F28C6E; --green:#1C1B19; --green-deep:#121110; --sand:#E8E3DA; --scrim:10,10,9; }
/* the buttons never take the side */
.btn-gold{ background:var(--cta); color:var(--cream); }
.btn-gold:hover{ background:var(--cta-hover); }
.on-green .btn-gold, .on-deep .btn-gold, .on-dark .btn-gold, .hero-full .btn-gold, .bleed .btn-gold, .cta-band .btn-gold,
.footer .btn-gold, .mobile-bar .btn-gold, .sheet .btn-gold{ background:var(--cta-soft); color:var(--ink); }
.on-green .btn-gold:hover, .on-deep .btn-gold:hover, .on-dark .btn-gold:hover, .hero-full .btn-gold:hover, .bleed .btn-gold:hover, .cta-band .btn-gold:hover,
.footer .btn-gold:hover, .mobile-bar .btn-gold:hover, .sheet .btn-gold:hover{ background:var(--cta-soft-hover); color:var(--ink); }
.news button{ background:var(--cta); } .news button:hover{ background:var(--cta-hover); }

/* ---------- the three sides share one shape: rows on dark surfaces ---------- */
.on-dark .menu-list{ border-top-color:var(--line-green); }
.on-dark .row{ border-bottom-color:var(--line-green); }
.on-dark .row::after{ background:var(--gold-soft); }
.on-dark .row .name{ color:var(--cream); }
.on-dark .row .desc{ color:var(--mute-on-green); }
.on-dark .row .price{ color:var(--gold-soft); }
.on-dark .row .price small{ color:var(--mute-on-green); }
.split .section-head{ max-width:none; }
.split .note{ margin-top:clamp(22px,2.6vw,30px); }
@media(min-width:1024px){ .split .cta-row{ margin-top:clamp(26px,3vw,40px); } }

/* ---------- the hero ends at nine tenths of the screen ---------- */
.hero{ min-height:90vh; min-height:90svh; grid-template-rows:auto auto minmax(0,1fr); }
.display{ font-size:clamp(42px, 5.2vw, 80px); max-width:16ch; }
.hero .flag{ margin-bottom:clamp(14px,1.8vw,22px); }
.hero-head{ padding-bottom:clamp(14px,2vw,22px); }
@media(max-width:1023px){
  .hero-head{ order:1; padding-top:calc(var(--nav-h) + 14px); }
  .hero-aside{ order:2; padding:0 var(--pad) 20px; gap:0; }
  .hero-aside .spec, .hero-aside .cta-row{ display:none; }
  .hero-aside .lead{ font-size:16px; line-height:1.5; max-width:none; }
  .folds{ order:3; aspect-ratio:auto; min-height:300px; }
}
@media(min-width:1024px){
  .hero{ grid-template-rows:auto minmax(0,1fr); }
  .hero-mast{ padding-top:calc(var(--nav-h) + 14px); padding-bottom:clamp(20px,2.4vw,30px); }
  .hero-aside{ gap:14px; }
  .folds{ min-height:360px; }
}

/* ---------- compact rows and section rhythm ---------- */
.menu-list{ margin-top:clamp(24px,3vw,36px); }
.row{ padding:13px 0; gap:2px 16px; }
.row .name{ font-size:clamp(19px,1.6vw,24px); }
.row .desc{ font-size:14.5px; line-height:1.45; max-width:none; }
.row .price{ font-size:clamp(17px,1.4vw,21px); }
.section-head .lead{ margin-top:14px; }
.split .note{ margin-top:18px; }
.split .cta-row{ margin-top:clamp(22px,2.6vw,32px); }
.split .copy{ padding-top:clamp(48px,6vw,88px); padding-bottom:clamp(48px,6vw,88px); }

/* the numerals sit higher in the scrim now the windows are shorter */
.fold-n{ font-size:clamp(24px,2vw,30px); }
@media(max-width:1023px){
  .fold::after{ background:linear-gradient(0deg, rgba(var(--scrim),.96) 0%, rgba(var(--scrim),.93) 52%, rgba(var(--scrim),.7) 74%, rgba(var(--scrim),.1) 100%); }
}
/* short screens: the hero still ends above the fold */
@media(min-width:1024px) and (max-height:820px){
  .folds{ min-height:372px; }
  .display{ font-size:clamp(38px,4.2vw,60px); }
  .hero-mast{ padding-top:calc(var(--nav-h) + 8px); padding-bottom:16px; }
  .hero-aside .lead{ font-size:16.5px; }
  .fold::after{ background:linear-gradient(0deg, rgba(var(--scrim),.96) 0%, rgba(var(--scrim),.93) 50%, rgba(var(--scrim),.72) 74%, rgba(var(--scrim),.1) 100%); }
}
@media(max-width:1023px) and (max-height:620px){ .folds{ min-height:250px; } }

/* ---------- phone masthead: the headline, then the windows ---------- */
@media(max-width:1023px){
  .hero{ grid-template-rows:auto minmax(0,1fr); }
  .hero-aside{ display:none; }
  .hero-head{ padding-top:calc(var(--nav-h) + 10px); padding-bottom:18px; }
  .folds{ min-height:280px; }
  .display{ font-size:clamp(40px, 10.5vw, 56px); line-height:.96; }
}
@media(min-width:600px) and (max-width:1023px){ .folds{ min-height:380px; } }

/* ---------- the mobile sheet: the four doors, the rest, the two buttons ---------- */
.sheet{ justify-content:center; overflow-y:auto; padding-top:calc(var(--nav-h, 76px) + 8px); }
.sheet nav a{ display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--line-green); font-size:inherit; }
.sheet nav a .no{ font-family:var(--f-sans); font-size:11px; letter-spacing:.24em; color:var(--gold-soft); }
.sheet nav a .sh-t{ display:block; min-width:0; }
.sheet nav a b{ display:block; font-family:var(--f-serif); font-weight:500; font-size:clamp(23px,5.8vw,30px); line-height:1.05; letter-spacing:-.015em; color:var(--cream); }
.sheet nav a small{ display:block; margin-top:5px; font-family:var(--f-sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-on-green); line-height:1.4; }
.sheet-more{ display:flex; flex-wrap:wrap; gap:0 20px; margin-top:14px; }
.sheet-more a{ font-family:var(--f-sans); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-on-green); padding:11px 0; min-height:44px; display:inline-flex; align-items:center; }
.sheet .sheet-cta{ margin-top:18px; }
.sheet-foot{ margin-top:16px; font-family:var(--f-sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-on-green); line-height:1.6; }
.sheet-foot i{ font-style:normal; color:var(--gold-soft); margin:0 6px; }
@media(max-height:620px){ .sheet nav a{ padding:9px 0; } .sheet nav a b{ font-size:22px; } .sheet-more a{ min-height:40px; padding:8px 0; } }

/* ---------- phone homepage: the same conversions, less air ---------- */
@media(max-width:1023px){
  .hero{ min-height:95vh; min-height:95svh; }
  .section{ padding-block:clamp(52px,8vw,84px); }
  .split .copy{ padding:40px var(--pad) 46px; }
  .split .plate{ aspect-ratio:3/2; }
  .section-head .h2{ margin:12px 0 12px; }
  .section-head .lead{ margin-top:10px; }
  .menu-list{ margin-top:18px; }
  .row{ padding:11px 0; }
  .split .note{ margin-top:14px; }
  .split .cta-row, .cta-row{ margin-top:20px; }
  .entries{ margin-top:24px; }
  .house li{ padding:12px 0; }
  .visit dl{ margin-top:18px; }
}

/* ---------- the hero, quieter: one device per element ---------- */
.fold-spine i, .fold-n{ display:none; }
.fold-spine b::after{ content:none; }
.fold-spine b{ gap:0; }
.hero-aside .spec{ display:none; }
@media(max-width:1023px){
  nav.index{ display:none; }
  .fold-open{ gap:10px; }
  .house li b{ color:inherit; font-weight:inherit; }
  .house-track{ animation-duration:96s; }
}

/* ---------- the hero ends at the fold; phones get air above the headline and a one line hook ---------- */
.hero{ min-height:100vh; min-height:100svh; }
.hook-narrow{ display:none; }
@media(max-width:1023px){
  .hero{ grid-template-rows:auto auto minmax(0,1fr); }
  .hero-head{ padding-top:calc(var(--nav-h) + 36px); padding-bottom:10px; }
  .hero-aside{ display:flex; padding:0 var(--pad) 24px; gap:0; }
  .hero-aside .hook-wide, .hero-aside .spec, .hero-aside .cta-row{ display:none; }
  .hero-aside .hook-narrow{ display:block; font-size:16px; line-height:1.5; max-width:34ch; color:var(--mute); }
  .folds{ min-height:52vh; min-height:52svh; }

  /* the sections after it: one line of facts, smaller notes, one button, no second photograph */
  .section .spec{ flex-direction:row; flex-wrap:wrap; gap:6px 0; letter-spacing:.13em; }
  .section .spec > span::before{ display:none; }
  .section .spec > span:not(:last-child)::after{ display:inline-block; margin:0 10px; }
  .section-head .lead{ font-size:16.5px; }
  .note{ font-size:12px; margin-top:12px; }
  .bleed .cta-row .btn-line{ display:none; }
  .bleed .cta-sure{ display:none; }
  .entry li{ font-size:15px; }
  .footer{ padding-top:44px; }
  .foot-grid{ gap:26px; }
  .statement p{ font-size:12px; }
}
@media(max-width:1023px) and (max-height:620px){
  .hero-head{ padding-top:calc(var(--nav-h) + 22px); padding-bottom:6px; }
  .display{ font-size:clamp(36px, 10vw, 44px); }
  .hero-aside{ padding-bottom:16px; }
  .hero-aside .hook-narrow{ font-size:15px; }
  .folds{ min-height:54vh; min-height:54svh; }
}
@media(max-width:1023px){
  .foot-col ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 16px; }
  .foot-col a{ font-size:14px; }
}

/* ---------- the sheet arrives one line at a time ---------- */
.sheet nav a, .sheet-more, .sheet-cta, .sheet-foot{ opacity:0; translate:0 12px; transition:opacity .5s var(--ease), translate .55s var(--ease); }
.sheet.open nav a, .sheet.open .sheet-more, .sheet.open .sheet-cta, .sheet.open .sheet-foot{ opacity:1; translate:0 0; }
.sheet.open nav a:nth-child(1){ transition-delay:.06s; } .sheet.open nav a:nth-child(2){ transition-delay:.12s; }
.sheet.open nav a:nth-child(3){ transition-delay:.18s; } .sheet.open nav a:nth-child(4){ transition-delay:.24s; }
.sheet.open .sheet-more{ transition-delay:.32s; } .sheet.open .sheet-cta{ transition-delay:.38s; } .sheet.open .sheet-foot{ transition-delay:.44s; }
/* ---------- a light sweeps the gold button on hover ---------- */
.btn{ position:relative; overflow:hidden; }
.btn-gold::after{ content:""; position:absolute; inset:0; pointer-events:none; translate:-130% 0;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.2) 50%, transparent 68%); transition:translate .9s var(--ease); }
.btn-gold:hover::after{ translate:130% 0; }
@media (prefers-reduced-motion: reduce){
  .sheet nav a, .sheet-more, .sheet-cta, .sheet-foot{ opacity:1; translate:0 0; transition:none; }
  .btn-gold::after{ display:none; }
}

/* ---------- more air above the headline, a smaller phone headline ---------- */
@media(min-width:1024px){ .hero-mast{ padding-top:calc(var(--nav-h) + 34px); } }
@media(max-width:1023px){
  .hero-head{ padding-top:calc(var(--nav-h) + 48px); }
  .display{ font-size:clamp(34px, 9vw, 46px); }
}
@media(max-width:1023px) and (max-height:620px){ .hero-head{ padding-top:calc(var(--nav-h) + 30px); } .display{ font-size:clamp(32px, 8.4vw, 40px); } }

/* ---------- the window facts step down the order; the link keeps a short rule instead of an underline ---------- */
.fold-open .spec{ color:var(--mute-on-green); font-weight:400; letter-spacing:.16em; font-size:11px; margin-top:4px; }
.fold-open .spec > span:not(:last-child)::after{ background:rgba(203,167,90,.7); }
.fold-go{ border-bottom:0; padding-bottom:0; display:inline-flex; align-items:center; gap:10px; margin-top:10px; }
.fold-go::before{ content:""; width:22px; height:1px; background:var(--gold-soft); transition:width .5s var(--fold-ease), background .3s; }
.fold.is-open:hover .fold-go{ color:var(--cream); border-bottom-color:transparent; }
.fold.is-open:hover .fold-go::before{ width:34px; background:var(--cream); }

/* ---------- the light: a soft brass glow follows the cursor across the open window ---------- */
.fold-light{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .7s var(--fold-ease);
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,40%), rgba(203,167,90,.24), rgba(203,167,90,0) 62%); mix-blend-mode:screen; }
@media(hover:hover){ .fold.is-open:hover .fold-light{ opacity:1; } }

/* ---------- headlines rise behind a wipe as they enter ---------- */
.section-head.reveal .h2, .h2.reveal{ clip-path:inset(-6% -2% 102% -2%); transition:clip-path 1.1s var(--ease) .08s; }
.section-head.reveal .h2{ transition:clip-path 1.1s var(--ease) .08s; }
.section-head.reveal.in .h2, .h2.reveal.in{ clip-path:inset(-6% -2% -6% -2%); }
@media (prefers-reduced-motion: reduce){ .section-head.reveal .h2, .h2.reveal{ clip-path:none; transition:none; } }

/* the window link stays on one line in a narrow window */
.fold-go{ white-space:nowrap; }
.fold-go .w-wide, .fold-go .w-narrow{ display:inline; }
.fold-go .w-narrow{ display:none; }
@media(max-width:1023px){ .fold-go{ letter-spacing:.16em; } }
@media(max-width:480px){
  .fold-go{ letter-spacing:.14em; gap:8px; }
  .fold-go .w-wide{ display:none; }
  .fold-go .w-narrow{ display:inline; }
  .folds.has-open .fold.is-open{ flex-grow:3.2; }
}
@media(max-width:360px){
  .fold-open{ padding:18px 16px; }
  .fold-go{ letter-spacing:.12em; }
  .fold-go::before{ display:none; }
}
@media(max-width:480px){ .hero .folds.has-open .fold.is-open{ flex-grow:3.4; } }

/* ---------- side headlines: each sentence on its own line ---------- */
.split .section-head .h2{ font-size:clamp(27px, 3.4vw, 50px); line-height:1.02; max-width:none; }
@media(max-width:1023px){ .split .section-head .h2{ font-size:clamp(26px, 8.4vw, 40px); } }
@media(max-width:360px){ .split .section-head .h2{ font-size:clamp(24px, 8.2vw, 30px); } }

/* ---------- quiet links: a short rule and an arrow, the same treatment as the hero window link ---------- */
.link{ border-bottom:0; padding-bottom:0; display:inline-flex; align-items:center; gap:10px; }
.link::before{ content:""; flex:none; width:22px; height:1px; background:var(--gold); transition:width .5s var(--ease), background .3s; }
.on-dark .link::before{ background:var(--gold-soft); }
.link .arr{ display:inline-block; transition:transform .45s var(--ease); }
.link:hover::before{ width:34px; }
.link:hover .arr{ transform:translateX(4px); }
@media(max-width:480px){ .link{ white-space:normal; } .link::before{ width:18px; } }

/* ---------- the price list: a mark for the most booked, a note for the group under evaluation ---------- */
.mi-tag{ display:inline-block; vertical-align:middle; margin-left:10px; font:500 11px/1 var(--f-sans); letter-spacing:.18em; text-transform:uppercase; font-style:normal; color:var(--gold); border:1px solid rgba(118,84,35,.45); border-radius:var(--radius); padding:5px 8px; }
.mi-note{ font-family:var(--f-sans); font-size:12.5px; letter-spacing:.02em; color:var(--mute); margin:-6px 0 14px; }
@media(min-width:980px){ .pillar-grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:900px){ .tracks.two{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- two windows ---------- */
.folds.has-open .fold{ flex-grow:.72; }
.folds.has-open .fold.is-open{ flex-grow:2.28; }
@media(min-width:720px){ nav.index .wrap{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ============================================================
   Section 22. The hero as two slides on one stage. The two sides no
   longer share the width; one fills the stage and the other waits
   behind a rail of two tabs. Swipe, arrow keys and the first visit
   turn all still move between them; the rail shows the turn.
   ============================================================ */
.folds{ display:grid; grid-template-columns:100%; gap:0; background:var(--green-deep); position:relative; isolation:isolate; overflow:hidden; }
.folds > .fold{
  grid-area:1/1; flex:none; width:100%; min-width:0;
  opacity:0; visibility:hidden; pointer-events:none; translate:14px 0;
  transition:opacity .9s var(--fold-ease), translate .9s var(--fold-ease), visibility 0s linear .9s;
}
.folds > .fold.is-open{ opacity:1; visibility:visible; pointer-events:auto; translate:0 0; z-index:1;
  transition:opacity .9s var(--fold-ease), translate .9s var(--fold-ease), visibility 0s; }
.folds.has-open .fold, .folds.has-open .fold.is-open, html.is-landing .folds.has-open .fold, .hero .folds.has-open .fold.is-open{ flex-grow:0; }
.fold-spine, .fold::before{ display:none; }
/* the photograph settles slowly once its slide is open */
.fold-img{ transform:scale(1.08); transition:transform 1.2s var(--fold-ease); }
.fold.is-open .fold-img{ transform:scale(1); transition:transform 7s cubic-bezier(.2,.6,.2,1); }
.fold:not(.is-open):hover .fold-img{ transform:scale(1.08); }
/* the rail */
.rail{ position:absolute; z-index:3; right:clamp(22px,3vw,44px); bottom:clamp(22px,3vw,44px); display:flex; gap:clamp(18px,2.2vw,30px); }
.rail-tab{
  position:relative; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 0;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:var(--f-sans); font-size:11px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:rgba(245,241,233,.66);
  transition:color .3s;
}
.rail-tab i{ font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:16px; letter-spacing:0; color:var(--gold-soft); }
.rail-tab::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(245,241,233,.26); }
.rail-tab::before{ content:""; position:absolute; left:0; bottom:0; z-index:1; height:1px; width:0; background:var(--gold-soft); transition:width .6s var(--fold-ease); }
.rail-tab.is-on, .rail-tab:hover{ color:var(--cream); }
.rail-tab.is-on::before{ width:100%; }
.rail-tab:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:4px; }
.folds.is-turning .rail-tab.is-on::before{ width:0; animation:railTurn 3.6s linear forwards; }
@keyframes railTurn{ to{ width:100%; } }
@media(max-width:1023px){
  .rail{ left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr 1fr; gap:0; background:rgba(var(--scrim),.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .rail-tab{ justify-content:center; padding:14px 8px; min-height:50px; font-size:11px; letter-spacing:.2em; }
  .rail-tab i{ font-size:15px; }
  .rail-tab::after{ display:none; }
  .rail-tab::before{ bottom:auto; top:0; }
  .rail-tab + .rail-tab{ box-shadow:-1px 0 0 rgba(245,241,233,.14); }
  .fold-open{ padding-bottom:calc(18px + 50px); }
  .folds{ min-height:340px; }
}
@media(max-width:1023px) and (max-height:620px){ .folds{ min-height:280px; } }
@media(max-width:360px){ .rail-tab{ letter-spacing:.14em; font-size:11px; } .fold-open{ padding-bottom:calc(16px + 50px); } }
@media (prefers-reduced-motion: reduce){
  .folds > .fold, .rail-tab::before, .fold.is-open .fold-img{ transition:none !important; }
  .folds.is-turning .rail-tab.is-on::before{ animation:none; width:100%; }
}

/* ---------- the desktop masthead: a smaller, wider set headline and a sans blurb ---------- */
.br-wide{ display:none; }
@media(min-width:1024px){
  .br-wide{ display:inline; }
  .display{ font-size:clamp(40px, 4.5vw, 66px); font-weight:600; letter-spacing:0; line-height:1.04; max-width:none; }
  .hero-aside .hook-wide{ font-family:var(--f-sans); font-size:15.5px; line-height:1.7; letter-spacing:.004em; font-weight:400; color:var(--ink-soft); max-width:40ch; }
  .hero-aside{ gap:16px; }
}
@media(min-width:1024px) and (max-height:820px){ .display{ font-size:clamp(36px, 4vw, 54px); } }
@media(min-width:1024px){ .fold-line{ max-width:46ch; } }
/* the rail sits on its own soft shadow, so it reads over any photograph */
.rail::before{ content:""; position:absolute; inset:-22px -30px -16px; z-index:-1; border-radius:48px; background:rgba(var(--scrim),.62); filter:blur(24px); pointer-events:none; }
.rail-tab{ color:rgba(245,241,233,.74); }
@media(max-width:1023px){ .rail::before{ display:none; } }

/* ---------- each side on its own paper: a warm oat for hair, the blush bone for aesthetics ---------- */
.side-hair.on-cream, .side-hair .page-hero{ background:#F4EFE5; }

/* ---------- the visit section on the same rhythm as the two sides ---------- */
.visit .row .price{ font-size:clamp(16px,1.3vw,19px); }
.visit .row .desc{ max-width:none; }
@media(max-width:1023px){ .visit .row .price{ font-size:16px; } }

/* ============================================================
   Section 23. The first visit shows both sides at once. Before the
   first paint of a session the stage is split down the middle, Hair
   on the left and Aesthetics on the right, each half with its own
   photograph and name. After a beat the first side wipes across to
   the full stage and its copy arrives; reaching for either half opens
   that side instead. A hairline of light marks the seam.
   ============================================================ */
.folds > .fold{
  clip-path:inset(0 0 0 0);
  transition:opacity .5s ease .45s, translate .9s var(--fold-ease), clip-path .9s var(--fold-ease), visibility 0s linear .95s;
}
.folds > .fold.is-open{
  transition:opacity .9s var(--fold-ease), translate .9s var(--fold-ease), clip-path .9s var(--fold-ease), visibility 0s;
}
html.is-landing .folds > .fold{ opacity:1; visibility:visible; pointer-events:auto; translate:0 0; transition:none; }
html.is-landing .folds > .fold:nth-child(1){ clip-path:inset(0 50% 0 0); }
html.is-landing .folds > .fold:nth-child(2){ clip-path:inset(0 0 0 50%); }
/* the hair photograph pans left so its subject sits inside the left half, and pans back as the panel opens */
.fold:nth-child(1) .fold-img{ transition:transform 1.2s var(--fold-ease), translate .7s var(--fold-ease); }
.fold:nth-child(1).is-open .fold-img{ transition:transform 7s cubic-bezier(.2,.6,.2,1), translate .7s var(--fold-ease); }
.fold{ cursor:pointer; }
html.is-landing .fold:nth-child(1) .fold-img{ translate:-28% 0; }
html.is-landing .fold.is-open .fold-img{ transform:scale(1.06); }
/* the seam */
.folds::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; z-index:2; pointer-events:none;
  background:rgba(245,241,233,.3); opacity:0; transition:opacity .35s ease;
}
html.is-landing .folds::before{ opacity:1; transition:opacity .6s ease .3s; }
/* each half is named */
.fold-tag{
  position:absolute; z-index:2; left:0; width:50%; bottom:clamp(30px,5vw,64px); pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  opacity:0; translate:0 10px; transition:opacity .3s ease, translate .3s ease;
}
.fold:nth-child(2) .fold-tag{ left:50%; }
.fold-tag i{ font-family:var(--f-serif); font-style:italic; font-weight:600; font-size:clamp(16px,1.4vw,20px); line-height:1; color:var(--gold-soft); }
.fold-tag b{ font-family:var(--f-serif); font-weight:500; font-size:clamp(20px,2.6vw,38px); line-height:1.05; letter-spacing:-.01em; color:var(--cream); padding-inline:12px; }
html.is-landing .fold-tag{ opacity:1; translate:0 0; transition:opacity .8s var(--fold-ease) .45s, translate .9s var(--fold-ease) .45s; }
/* the copy of the open side waits for the panel to finish opening */
html.was-landing .fold.is-open .fold-open{ transition-delay:.55s; }
html.was-landing .fold.is-open .fold-open > :nth-child(1){ transition-delay:.62s; }
html.was-landing .fold.is-open .fold-open > :nth-child(2){ transition-delay:.68s; }
html.was-landing .fold.is-open .fold-open > :nth-child(3){ transition-delay:.74s; }
html.was-landing .fold.is-open .fold-open > :nth-child(4){ transition-delay:.80s; }
html.was-landing .fold.is-open .fold-open > :nth-child(5){ transition-delay:.86s; }
/* the rail holds back until the stage has settled; on a phone the bar stays and names both halves */
.rail{ transition:opacity .7s var(--fold-ease) .4s, translate .7s var(--fold-ease) .4s; }
@media(min-width:1024px){ html.is-landing .rail{ opacity:0; translate:0 8px; pointer-events:none; transition:none; } }
@media(max-width:1023px){
  html.is-landing .rail-tab{ color:var(--cream); }
  html.is-landing .rail-tab::before{ width:100%; }
  .fold-tag{ bottom:calc(50px + 22px); gap:8px; }
}
@media(max-width:1023px) and (max-height:620px){ .fold-tag{ bottom:calc(50px + 14px); } }
@media (prefers-reduced-motion: reduce){
  .folds > .fold, .fold:nth-child(1) .fold-img, .fold-tag, .rail, .folds::before{ transition:none !important; }
}

/* ============================================================
   Section 24. The house view over a real photograph. The copy sits
   on the left, so on a wide screen the scrim is heaviest there and
   opens to the right, where the corridor, the sconces and the door
   to a treatment room show through. Below that width the copy fills
   the band and the bottom weighted scrim above still applies.
   ============================================================ */
@media(min-width:1024px){
  .bleed::after{
    background:
      linear-gradient(90deg,
        rgba(var(--scrim),.94) 0%, rgba(var(--scrim),.92) 44%, rgba(var(--scrim),.80) 56%,
        rgba(var(--scrim),.46) 70%, rgba(var(--scrim),.20) 86%, rgba(var(--scrim),.12) 100%),
      linear-gradient(0deg, rgba(var(--scrim),.50) 0%, rgba(var(--scrim),0) 26%);
  }
}

/* ============================================================
   Before and after. One two panel frame per case, the same person
   on both sides, split in CSS so the pair can never drift apart.
   Labeled the way the work is priced: treatment, count or sessions,
   and time. A frame marked data-placeholder carries a visible tag
   until a consented client photograph replaces it.
   ============================================================ */
.ba{ margin:0; display:flex; flex-direction:column; gap:12px; min-width:0; }
.ba-pair{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:2px; aspect-ratio:16/9; background:var(--line); overflow:hidden; }
.ba-half{ position:relative; display:block; background-size:204% 100%; background-repeat:no-repeat; filter:saturate(.9) contrast(1.02); }
.ba-before{ background-position:0 50%; }
.ba-after{ background-position:100% 50%; }
.ba-half i{ position:absolute; left:10px; bottom:10px; font-family:var(--f-sans); font-style:normal; font-weight:500; font-size:11px; line-height:1; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); background:rgba(var(--scrim),.74); padding:7px 9px 6px; }
.ba-tag{ position:absolute; top:10px; left:10px; z-index:2; font-family:var(--f-sans); font-weight:500; font-size:11px; line-height:1; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:rgba(245,242,236,.94); border:1px solid var(--line); padding:6px 9px 5px; }
.ba:not([data-placeholder]) .ba-tag{ display:none; }
.ba-meta b{ display:block; font-family:var(--f-serif); font-weight:500; font-size:clamp(18px,1.5vw,21px); line-height:1.2; letter-spacing:-.01em; }
.ba-meta span{ display:block; font-size:13.5px; color:var(--mute); margin-top:4px; }
.ba-meta small{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:8px; }
.ba-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,36px); margin-top:clamp(28px,4vw,40px); }
.ba-grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:1023px){ .ba-grid.three{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px){ .ba-grid, .ba-grid.three{ grid-template-columns:1fr; gap:26px; } }
.ba-disc{ font-size:12.5px; line-height:1.6; color:var(--mute); max-width:78ch; margin-top:20px; }
.ba-one{ max-width:640px; margin-top:clamp(26px,3vw,36px); }
.ba-one .eyebrow{ display:block; margin-bottom:14px; }
.ba-one .ba-disc{ margin-top:14px; }
.on-green .ba-pair, .on-deep .ba-pair{ background:var(--line-green); }
.on-green .ba-meta b, .on-deep .ba-meta b{ color:var(--cream); }
.on-green .ba-meta span, .on-deep .ba-meta span, .on-green .ba-disc, .on-deep .ba-disc{ color:var(--mute-on-green); }
.on-green .ba-meta small, .on-deep .ba-meta small{ color:var(--gold-soft); }
.on-green .ba-disc .link, .on-deep .ba-disc .link{ color:var(--gold-soft); }

.ba-grid.four{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,26px); }
@media(max-width:1023px){ .ba-grid.four{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px){ .ba-grid.four{ grid-template-columns:1fr; } }
.ba-grid.four .ba-meta b{ font-size:clamp(17px,1.25vw,19px); }
/* the start section: copy beside a photograph of a treatment room */
.start-intro{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,72px); align-items:center; }
.start-intro .section-head{ margin:0; }
.start-intro .plate{ max-height:520px; }
@media(max-width:860px){ .start-intro{ grid-template-columns:1fr; } .start-intro .plate{ max-height:none; aspect-ratio:4/3; } }


/* the keyword headline in the hero aside, the why block, the FAQ and the footer keyword line */
.hero-aside .hero-h1{ font-family:var(--f-serif); font-weight:500; font-size:clamp(19px,1.5vw,23px); line-height:1.25; letter-spacing:-.005em; color:var(--ink); margin:0 0 4px; max-width:34ch; text-wrap:balance; }
@media(max-width:1023px){ .hero-aside .hero-h1{ font-size:19px; } }
.why-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px); margin-top:clamp(28px,4vw,40px); }
@media(max-width:860px){ .why-grid{ grid-template-columns:1fr; gap:16px; } }
.why{ border-top:1px solid var(--line); padding-top:16px; }
.why h3{ font-family:var(--f-serif); font-weight:500; font-size:clamp(21px,1.8vw,26px); line-height:1.15; margin:0 0 8px; }
.why p{ margin:0; color:var(--ink-soft); font-size:16px; line-height:1.55; }
.foot-kw{ font-size:12px; line-height:1.6; color:var(--mute-on-green); margin-top:10px; max-width:52ch; }

/* ---------- QA pass 2026-09-28: long headlines, question grid, entry price rows aligned ---------- */
.h2.long{ font-size:clamp(32px, 3.9vw, 58px); line-height:1.02; letter-spacing:-.024em; max-width:22ch; }
.h2.long em{ display:block; }
.qa{ display:grid; grid-template-columns:1fr; gap:28px clamp(30px,5vw,64px); }
.qa .q{ border-top:1px solid var(--line); padding-top:20px; }
.qa .q h3{ font-family:var(--f-serif); font-size:22px; font-weight:500; margin-bottom:9px; letter-spacing:0; text-transform:none; color:var(--ink); line-height:1.2; }
.qa .q p{ font-size:16px; color:var(--mute); line-height:1.62; max-width:none; }
@media(min-width:860px){ .qa{ grid-template-columns:1fr 1fr; } }
.entry .link{ order:5; }
.entry .meta{ order:10; margin-top:auto; }
.entry .meta + .link, .entry .link + .link{ margin-top:10px; }
@media(max-width:700px){ .h2.long{ font-size:clamp(30px, 8vw, 38px); } .qa .q h3{ font-size:20px; } }