/* ═══════════════════════════════════════════════════════════
   ATRIUM · Recovery Sanctuary
   The daylight house with glowing rooms.
   Fraunces (display) · Newsreader (body) · Karla (labels)
   ═══════════════════════════════════════════════════════════ */

:root{
  /* the dark house: charcoal ground, ivory type, marble greys as the accent */
  --ink:#1F1E1D;              /* page ground, filled buttons */
  --ink-deep:#2B2927;         /* raised panels, image placeholders */
  --ink-raise:#3E3B39;        /* thumb placeholders, hover grounds */
  --on-dark:#EEECE8;          /* body text */
  --on-dark-dim:#ABA59F;      /* secondary text */
  --plaster:#F3F2EF;          /* text on the darkest grounds, the hero */
  --copper:#6B6560;
  --copper-deep:#B9B3AC;      /* accent text on dark (4.5:1 on --ink) */
  --copper-lit:#B9B3AC;
  --green:#3E5A47;
  --hero-em:#E8E3DC;
  --rule:rgba(238,236,232,.15);
  --rule-2:rgba(238,236,232,.32);
  --rule-ctl:rgba(238,236,232,.5);   /* interactive borders */
  --rule-dark:rgba(238,236,232,.17);
  --radius:12px;
  --radius-sm:8px;

  --ease:cubic-bezier(.22,1,.36,1);
  --f-display:"Fraunces",Georgia,serif;
  --f-body:"Newsreader",Georgia,serif;
  --f-label:"Karla",Verdana,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* armed by JS after load, so an arriving #hash still gets the browser's instant jump */
html.smooth{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html.smooth{scroll-behavior:auto}}

body{
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--f-body);
  font-size:1.15rem;
  line-height:1.72;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  -webkit-tap-highlight-color:rgba(238,236,232,.14);
}
a{color:inherit;touch-action:manipulation}
button{touch-action:manipulation;font:inherit}
img{display:block;width:100%;height:auto}
em{font-style:italic}
strong{font-weight:560}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:360;line-height:1.02;letter-spacing:-.014em}
::selection{background:var(--copper-lit);color:var(--ink)}
:focus-visible{outline:2px solid var(--on-dark);outline-offset:3px;border-radius:2px}

.skip{
  position:fixed;top:-4rem;left:1rem;z-index:100;
  background:var(--on-dark);color:var(--ink);
  font-family:var(--f-label);font-size:.8rem;letter-spacing:.08em;
  padding:.85rem 1.25rem;text-decoration:none;transition:top .3s var(--ease);
}
.skip:focus{top:1rem}

/* ── scaffolding ───────────────────────────────────────── */
.wrap{max-width:86rem;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4.5rem)}
[id]{scroll-margin-top:5.5rem}

.h-lg{font-size:clamp(2.9rem,7vw,6.2rem);font-variation-settings:"opsz" 144,"SOFT" 28;line-height:.96}
.h-md{font-size:clamp(2.25rem,4.6vw,3.9rem);font-variation-settings:"opsz" 144;line-height:1}
.h-sm{font-size:clamp(1.6rem,2.9vw,2.35rem);font-variation-settings:"opsz" 72;font-weight:400;line-height:1.12}
.lede{font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.55;font-weight:340;color:var(--on-dark);text-wrap:pretty}
p{text-wrap:pretty}

.eyebrow{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--f-label);font-size:.71rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--copper-deep);
}
/* botanical green lives here only · the daylight eyebrows' arch glyphs.
   The light-pocket eyebrows carry no glyph, so their scoped accents stay pure. */
.eyebrow .glyph{flex:0 0 auto;color:var(--green);opacity:.9}
.eyebrow--lit{color:rgba(243,242,239,.9)}
.eyebrow--foot{color:var(--copper-lit);margin-bottom:.85rem}

.sig{margin-top:2.4rem;font-family:var(--f-display);font-style:italic;font-size:1.45rem;color:var(--copper-deep)}

.u{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .35s var(--ease),background-image .35s var(--ease);
  padding-bottom:2px;
}
.u:hover,.u:focus-visible{
  background-image:linear-gradient(var(--copper-deep),var(--copper-deep));
  background-size:100% 2px;
}
.foot .u:hover,.foot .u:focus-visible{background-image:linear-gradient(var(--copper-lit),var(--copper-lit))}
/* D8: standalone links need a real target · the underline rides with the padding */
.foot-cols .u,.practical .u{
  display:inline-block;padding-block:.6rem;background-position:0 calc(100% - .45rem);
}
.micro-book a{display:inline-block;padding-block:.8rem;background-position:0 calc(100% - .65rem)}

/* maps link: the address carries the underline, the cue names the action */
.dirs{display:inline-block;text-decoration:none}
/* the address stays inline so both of its lines keep the underline */
.dirs .u{display:inline;padding-block:0 2px;background-position:0 100%}
.dirs-cue{
  display:block;width:max-content;margin-top:.55rem;
  font-family:var(--f-label);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--copper-deep);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  padding-bottom:.35rem;
}
.foot .dirs-cue{color:var(--on-dark)}

/* ── photography: rounded frames ───────────────────────── */
.ph{position:relative;overflow:hidden;background:var(--ink-deep);border-radius:var(--radius);aspect-ratio:3/4}
.ph img{width:100%;height:100%;object-fit:cover}
figcaption{font-size:.92rem;font-style:italic;color:var(--on-dark-dim);padding-top:.9rem;max-width:40ch}

/* ── header ────────────────────────────────────────────── */
.head{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.15rem clamp(1.25rem,4.5vw,3.25rem);
  color:var(--plaster);
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .4s var(--ease);
}
.head.is-solid{
  background:rgba(31,30,29,.93);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--rule);
  padding-block:.8rem;
}
.mark{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;white-space:nowrap;
  min-height:44px;
  font-family:var(--f-display);font-size:1.1rem;font-weight:470;letter-spacing:.005em;
}
.mark-arch{color:var(--plaster)}
.nav{display:flex;gap:clamp(1rem,2.4vw,2.1rem)}
.nav a{
  font-family:var(--f-label);font-size:.73rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  padding-block:.95rem;min-height:44px;display:inline-flex;align-items:center;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 calc(100% - .5rem);background-repeat:no-repeat;
  transition:background-size .5s var(--ease);
}
.nav a:hover,.nav a:focus-visible{background-size:100% 1px}
.mark,.head-act{position:relative;z-index:50} /* above the menu panel, which lives inside .head */
.head-act{display:flex;align-items:center;gap:.6rem}
.head-cta{
  font-family:var(--f-label);font-size:.73rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border:1px solid currentColor;border-radius:999px;
  padding:.72rem 1.3rem;white-space:nowrap;min-height:44px;
  display:inline-flex;align-items:center;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.head-cta:hover,.head-cta:focus-visible{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
.cta-short{display:none}
.burger{
  display:none;width:44px;height:44px;border-radius:50%;
  border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;
  align-items:center;justify-content:center;
}
.burger-bars{display:block;width:18px;height:10px;position:relative}
.burger-bars span{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .3s var(--ease),top .3s var(--ease);
}
.burger-bars span:first-child{top:0}
.burger-bars span:last-child{top:8.5px}
.burger[aria-expanded="true"] .burger-bars span:first-child{top:4.25px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger-bars span:last-child{top:4.25px;transform:rotate(-45deg)}

/* the phone menu: a full-height panel under the bar */
.menu{
  position:fixed;inset:0;z-index:49;
  background:rgba(31,30,29,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;flex-direction:column;justify-content:center;justify-content:safe center;gap:.2rem;
  overflow-y:auto;overscroll-behavior:contain;
  padding:6rem clamp(1.25rem,5vw,4.5rem) 2.5rem;
  color:var(--on-dark);
  opacity:0;transition:opacity .2s var(--ease);
}
.menu[hidden]{display:none}
.menu.is-open{opacity:1}
.menu a{
  font-family:var(--f-display);font-size:clamp(1.9rem,6vw,2.6rem);font-weight:360;
  line-height:1.2;text-decoration:none;padding:.35rem 0;min-height:44px;
  display:inline-flex;align-items:center;
}
.menu a:hover,.menu a:focus-visible{color:var(--copper-lit)}
.menu-foot{
  margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--rule);
  font-size:.95rem;color:var(--on-dark-dim);line-height:1.7;
}
.menu-foot a{color:var(--on-dark);text-decoration:none;display:inline-block;padding-block:.4rem}
body.menu-open{overflow:hidden}
body.menu-open .head{-webkit-backdrop-filter:none;backdrop-filter:none}

@media (max-width:560px){
  .cta-long{display:none}
  .cta-short{display:inline}
  .mark{font-size:1rem}
  .eb-brand{display:none}
}
@media (max-width:1240px){
  .nav{display:none}
  .burger{display:inline-flex}
  .head-cta{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
  .head-cta:hover,.head-cta:focus-visible{background:var(--copper-lit);border-color:var(--copper-lit)}
}
@media (min-width:1241px){
  .menu{display:none}
}

/* ── hero ──────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  color:var(--plaster);isolation:isolate;
  padding-bottom:clamp(1.75rem,5vh,3rem);
}
.hero-ph{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--ink)}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(26,25,24,.55) 0%,rgba(26,25,24,.12) 30%,rgba(26,25,24,.30) 58%,rgba(26,25,24,.86) 100%),
    linear-gradient(to right,rgba(26,25,24,.62) 0%,rgba(26,25,24,.06) 52%);
}
.hero-in{
  margin-top:auto;
  padding-inline:clamp(1.25rem,5vw,4.5rem);
  max-width:86rem;width:100%;margin-inline:auto;
  padding-bottom:clamp(2.5rem,8vh,5rem);
}
.hero-in .eyebrow{margin-bottom:clamp(1rem,2.6vh,1.7rem)}
.hero-h{
  font-size:clamp(3.1rem,9vw,8.2rem);
  font-weight:330;line-height:.93;letter-spacing:-.02em;
  font-variation-settings:"opsz" 144,"SOFT" 42,"WONK" 1;
  text-shadow:0 2px 46px rgba(26,25,24,.4);
}
.hero-h em{font-weight:300;color:var(--hero-em)}
.hero-sub{
  margin-top:clamp(1.3rem,3.2vh,2.1rem);
  max-width:46ch;font-size:clamp(1.02rem,1.35vw,1.2rem);
  color:rgba(243,242,239,.88);
}
.hero-micro{display:flex;flex-direction:column;gap:.4rem}
.micro-book{
  font-family:var(--f-label);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(243,242,239,.88);
}
.hero-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:clamp(2rem,5vw,4rem);
  padding-inline:clamp(1.25rem,5vw,4.5rem);
  max-width:86rem;width:100%;margin-inline:auto;
}
.cue{
  display:inline-flex;flex-direction:column;align-items:flex-end;gap:.75rem;
  font-family:var(--f-label);font-size:.68rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  color:rgba(243,242,239,.86);padding:.4rem .2rem;min-height:44px;
}
.cue svg{animation:drift 3s var(--ease) infinite}
@keyframes drift{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(6px);opacity:.42}}
.coords{
  font-family:var(--f-label);font-size:.68rem;font-weight:500;
  letter-spacing:.2em;color:rgba(243,242,239,.72);
  font-variant-numeric:tabular-nums;
}

/* ── sessions / price plate ────────────────────────────── */
.sessions{padding-block:clamp(4rem,10vh,7.5rem) clamp(6rem,16vh,11rem)}
.sessions-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.25rem,2.8vw,3rem);align-items:start;
}
.sessions-head{grid-column:1/5;position:sticky;top:7rem}
.sessions-head .h-md{margin:1.4rem 0 1.5rem}
.sessions-head .h-md em{color:var(--copper-deep)}
.sessions-note{font-size:1rem;color:var(--on-dark-dim);max-width:32ch}

.plate-wrap{grid-column:6/13}
.plate{
  list-style:none;
  background:rgba(31,30,29,.72);border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2.4rem) clamp(1.4rem,3vw,2.6rem);
}
.lr{
  display:grid;
  grid-template-columns:2.6rem minmax(0,1fr) auto auto;
  align-items:baseline;gap:0 clamp(.9rem,2vw,1.8rem);
  padding:1.4rem 0;
  border-bottom:1px solid var(--rule);
  transition:padding-left .45s var(--ease);
}
.lr:last-child{border-bottom:0;padding-bottom:.4rem}
.lr:first-child{padding-top:.4rem}
@media (hover:hover){.lr:hover{padding-left:.6rem}}
.lr-no{
  font-family:var(--f-label);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  color:var(--copper-deep);font-variant-numeric:tabular-nums;
}
.lr-name h3{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:420}
.lr-name p{font-size:.9rem;font-style:italic;color:var(--on-dark-dim);margin-top:.25rem;line-height:1.4}
.lr-dur{
  font-family:var(--f-label);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-dim);white-space:nowrap;
}
.lr-fig{
  font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2.15rem);font-weight:350;
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:4.4ch;text-align:right;
}
.lr-book{
  display:inline-flex;align-items:center;min-height:44px;
  grid-column:2/3;grid-row:2;justify-self:start;
  margin-top:.2rem;background:none;border:0;padding:.75rem 0;
  font-family:var(--f-label);font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--copper-deep);cursor:pointer;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-position:0 calc(100% - .75rem);background-repeat:no-repeat;
  transition:background-size .35s var(--ease);
}
@media (hover:hover){.lr-book:hover{background-size:0 1px}}
.lr-book:focus-visible{background-size:0 1px}
.plate-note{
  margin-top:1.4rem;font-size:.95rem;font-style:italic;color:var(--on-dark);max-width:60ch;
}
.lr--single .lr-fig{color:var(--copper-deep)}
.lr--single .lr-name p{color:var(--copper-deep);font-style:normal;letter-spacing:.01em}

/* ── service chapters ─────────────────────────────────── */
.chapter{position:relative;padding-block:clamp(4rem,10vh,7rem);border-top:1px solid var(--rule)}
#lounge{border-top:0}
.chapter-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,34%);
  gap:clamp(1.5rem,3vw,3rem);align-items:start;
}
.chapter-info .eyebrow{margin-top:1.4rem}
.chapter-info .h-md{margin:.9rem 0 1rem}
.chapter-info .h-md em{color:var(--copper-deep)}
.chapter-info .lede{font-size:clamp(1.12rem,1.45vw,1.3rem);max-width:36ch;margin-bottom:1.4rem}
.chapter-info .btn{width:100%}
.chapter-copy{margin-top:1.8rem}
.chapter-copy .spec{max-width:none}
.facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;
  font-family:var(--f-label);font-size:.76rem;font-weight:600;letter-spacing:.06em;
  color:var(--on-dark-dim);
}
.facts li{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.fi{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.room-list{margin-top:clamp(2rem,5vh,3rem)}
.room-list .eyebrow{margin-bottom:.9rem}
.room-list ul{
  list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem clamp(1.5rem,3vw,3rem);border-top:1px solid var(--rule-2);padding-top:1rem;
  font-size:1.02rem;color:var(--on-dark);
}
.room-list li{padding:.45rem 0;border-bottom:1px solid var(--rule)}

/* ── gallery: rail + stage on desktop, swipe track + dots on the phone ── */
.gal{display:grid;grid-template-columns:90px minmax(0,1fr);gap:1rem;align-items:stretch}
.gal-rail{position:relative;display:none}
.js .gal-rail{display:block}
.gal-thumbs{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:.5rem;
  overflow-y:auto;scrollbar-width:none;padding-bottom:3rem;
}
.gal-thumbs::-webkit-scrollbar{display:none}
.gal-thumb{
  position:relative;flex:0 0 auto;width:90px;height:90px;padding:0;border:0;cursor:pointer;
  border-radius:var(--radius-sm);overflow:hidden;background:var(--ink-raise);
  opacity:.72;transition:opacity .3s var(--ease),outline-color .3s var(--ease);
  outline:2px solid transparent;outline-offset:-2px;
}
.gal-thumb img{width:100%;height:100%;object-fit:cover}
.gal-thumb:hover,.gal-thumb:focus-visible{opacity:1}
.gal-thumb[aria-current]{opacity:1;outline-color:var(--copper-lit)}
.gal-thumb:focus-visible{outline-color:var(--on-dark)}
.gal-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--plaster);background:rgba(31,30,29,.28);pointer-events:none;
}
.gal-play svg{width:22px;height:22px;fill:currentColor;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.gal-more{
  position:absolute;left:50%;bottom:.25rem;transform:translateX(-50%);
  width:36px;height:36px;border-radius:50%;border:1px solid var(--rule-ctl);
  background:rgba(31,30,29,.85);color:var(--on-dark);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.gal-more[hidden]{display:none}
.gal-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gal-stage{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  background:var(--ink-deep);
}
.gal-stage:focus-visible{outline-offset:2px}
.gal-slide{margin:0;height:100%}
.js .gal-slide:not(.is-active){display:none}
.gal-slide img,.gal-slide video{display:block;width:100%;height:100%;object-fit:cover}
.gal-dots{display:none}
.gal--single{grid-template-columns:minmax(0,1fr)}
.gal--single .gal-rail,.gal--single .gal-dots{display:none!important}

@media (max-width:899px){
  .chapter-grid{display:block}
  /* initGallery moves .gal into .chapter-info right after the lede on the phone
     (DOM order, not CSS order), so facts · name · lede · slider · Book · copy */
  .gal{display:block;margin-top:1.4rem}
  .chapter-info .eyebrow{margin-top:1rem}
  .chapter-info .lede{margin-bottom:0}
  .chapter-info .btn{margin-top:1.4rem}
  .js .gal-rail{display:none}
  .gal-stage{
    aspect-ratio:auto;border-radius:0;overflow:visible;background:none;
    display:flex;gap:.75rem;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(-1 * clamp(1.25rem,5vw,4.5rem));
    padding-inline:7vw;scroll-padding-inline:7vw;
  }
  .gal-stage::-webkit-scrollbar{display:none}
  .js .gal-slide:not(.is-active){display:block}
  .gal-slide{
    flex:0 0 86vw;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
    scroll-snap-align:start;background:var(--ink-deep);
  }
  .gal-dots{display:flex;justify-content:center;gap:0;margin-top:.6rem}
  .gal-dot{
    position:relative;width:24px;height:44px;border:0;background:none;padding:0;cursor:pointer;
    color:var(--on-dark);
  }
  .gal-dot::before{
    content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:999px;
    background:currentColor;opacity:.4;transform:translate(-50%,-50%);
    transition:width .3s var(--ease),opacity .3s var(--ease);
  }
  .gal-dot[aria-current]::before{width:18px;opacity:1}
  .room-list ul{grid-template-columns:1fr}
}

/* ── session facts: one plain sentence, then a hairline spec list ── */
.spec{border-top:1px solid var(--rule-2);max-width:34rem}
.spec>div{
  display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1.25rem;
  padding:.8rem 0;border-bottom:1px solid var(--rule);
}
.spec dt{
  font-family:var(--f-label);font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-dim);padding-top:.3rem;
}
.spec dd{font-family:var(--f-body);font-size:1.05rem;line-height:1.5;color:var(--on-dark)}
p.spec-note{margin-top:1rem;font-size:.95rem;font-style:italic;color:var(--on-dark-dim);max-width:40ch}

/* ── questions ─────────────────────────────────────────── */
.asked{padding-bottom:clamp(5rem,13vh,8rem)}
.panel{background:var(--ink-deep);border-radius:var(--radius);padding:clamp(1.75rem,4.5vw,3.5rem)}
.asked-head{margin-bottom:clamp(2rem,5vh,3rem)}
.asked-head .h-md{margin-top:1.1rem}
.asked-head .h-md em{color:var(--copper-deep)}
.faq{border-top:1px solid var(--rule-2)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:44px;padding:.9rem 0;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-size:1.2rem;font-weight:440;line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;width:.5rem;height:.5rem;margin-bottom:.25rem;
  border-right:1px solid var(--copper-lit);border-bottom:1px solid var(--copper-lit);
  transform:rotate(45deg);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-bottom:-.1rem}
.faq p{color:var(--on-dark-dim);font-size:1rem;line-height:1.62;padding-bottom:1.2rem;max-width:60ch}
.final-book{margin-top:clamp(2rem,5vh,3rem)}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-label);font-size:.76rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  border-radius:999px;padding:1.05rem 2rem;min-height:44px;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn--ghost{border:1px solid var(--rule-ctl);color:var(--on-dark);background:transparent}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
.btn--solid{background:var(--on-dark);border:1px solid var(--on-dark);color:var(--ink)}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--copper-lit);border-color:var(--copper-lit)}

/* ── visit ─────────────────────────────────────────────── */
.visit{padding-block:clamp(6rem,16vh,11rem)}
.visit-top{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.25rem,2.8vw,3rem);align-items:center;
  margin-bottom:clamp(4rem,11vh,7.5rem);
}
.visit-figs{grid-column:1/7;display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
.visit-copy{grid-column:8/13}
.visit-copy .h-md{margin:1.4rem 0 2.2rem}
.visit-copy .h-md em{color:var(--copper-deep)}
.practical{border-top:1px solid var(--rule-2)}
.practical>div{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1.5rem;
  padding:1.15rem 0;border-bottom:1px solid var(--rule);
}
.practical dt{
  font-family:var(--f-label);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-dim);padding-top:.35rem;
}
.practical dd{font-size:1.05rem;line-height:1.55}


/* ── footer ────────────────────────────────────────────── */
.foot{background:var(--ink-deep);color:var(--on-dark);padding-block:clamp(4rem,10vh,6.5rem) 2.5rem}
.foot-mark{display:flex;align-items:center;gap:1.1rem;margin-bottom:clamp(2.5rem,7vh,4.5rem);color:var(--copper-lit)}
.foot-word{
  font-family:var(--f-display);font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:360;
  letter-spacing:-.01em;color:var(--on-dark);
}
.foot-cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;
  padding-bottom:2.8rem;border-bottom:1px solid var(--rule-dark);
}
.foot-cols p{font-size:1rem;color:var(--on-dark);line-height:1.75}
.foot-cols a{color:var(--on-dark)}
.foot-base{
  display:flex;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;padding-top:1.7rem;
  font-size:.9rem;font-style:italic;color:var(--on-dark);
}

/* ── reveals (JS adds .anim) ───────────────────────────── */
.anim .reveal-img .ph{clip-path:inset(0 0 100% 0 round var(--radius))}
.anim .reveal-img.is-in .ph{clip-path:inset(0 0 0 0 round var(--radius));transition:clip-path 1.15s var(--ease)}
.anim .reveal-img .ph img{transform:scale(1.07);transition:transform 1.6s var(--ease)}
.anim .reveal-img.is-in .ph img{transform:scale(1)}
.rise{opacity:0;transform:translateY(26px)}
.rise.is-in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1100px){
  .sessions-head{position:static}
}

@media (max-width:940px){
  .sessions-grid,.visit-top{
    display:block;
  }
  .plate-wrap{margin-top:2.5rem}
  .visit-figs{max-width:34rem;margin-bottom:2.8rem}
  .foot-cols{grid-template-columns:1fr;gap:2rem}
}

@media (max-width:720px){
  body{font-size:1.08rem}
  .hero-foot .coords{display:none}
  .hero-ph img{object-position:30% 42%}
  .veil{
    background:
      linear-gradient(to bottom,rgba(26,25,24,.55) 0%,rgba(26,25,24,.12) 26%,rgba(26,25,24,.28) 56%,rgba(26,25,24,.88) 100%),
      linear-gradient(to right,rgba(26,25,24,.55) 0%,rgba(26,25,24,.12) 70%);
  }
  /* facts before the action: name, note, duration, price, then Book this */
  .lr{position:relative;grid-template-columns:2.1rem minmax(0,1fr) auto;row-gap:.35rem}
  .lr-dur{grid-column:2/3;grid-row:2}
  .lr-fig{grid-column:3/4;grid-row:1/3;align-self:center}
  .lr .lr-book{grid-column:2/4;grid-row:3;justify-self:start;margin-top:0}
  .lr .lr-book::after{content:"";position:absolute;inset:0}
  /* label floor: nothing interactive under 12.5px */
  .lr-book:not(.btn),.lr-dur,.micro-book{font-size:.79rem;letter-spacing:.16em}
  .head-cta{font-size:.8rem;letter-spacing:.16em}
  .practical>div{grid-template-columns:1fr;gap:.35rem}
  .spec>div{grid-template-columns:5.6rem minmax(0,1fr);gap:1rem}
  .final-book .btn{width:100%}
  .foot-base{flex-direction:column}
}

@media (max-width:420px){
  .hero-h{font-size:clamp(2.6rem,12vw,3.4rem)}
}

/* ── reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important;
  }
  .cue svg{animation:none}
  .anim .reveal-img .ph{clip-path:none}
  .anim .reveal-img .ph img{transform:none}
  .rise{opacity:1;transform:none}
}

/* ── granite: Ben's marble wall on the three bands ─────── */
.granite{
  position:relative;color:var(--on-dark);
  /* a generated grey marble close to Ben's wall, rolled by half with the centre cross blended back so it tiles without seams from the original */
  background:linear-gradient(rgba(31,30,29,.3),rgba(31,30,29,.38)),url(../assets/marble-tile.webp) 0 0/1200px repeat;
}
.foot{background:linear-gradient(rgba(31,30,29,.3),rgba(31,30,29,.38)),url(../assets/marble-tile.webp) 0 0/1200px repeat}
.granite .eyebrow{color:var(--on-dark)}

/* ── the founder ───────────────────────────────────────── */
.quote{padding-block:clamp(4.5rem,12vh,8rem)}
.quote-in{max-width:52rem}
.quote-text{margin:1.6rem 0 0;font-family:var(--f-display);font-style:italic;font-weight:340}
.quote-text p{font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.25;text-wrap:balance;color:var(--on-dark)}
.quote-text footer{
  margin-top:1.4rem;font-family:var(--f-label);font-style:normal;font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark);
}

@keyframes fringe-sway{
  from{transform:rotate(-.25deg) scale(1.02)}
  to{transform:rotate(.25deg) scale(1.02)}
}
.sessions,.asked{position:relative;overflow:hidden}
.sessions > .wrap,.asked > .wrap{position:relative;z-index:1}
.plant{position:absolute;bottom:0;z-index:0;pointer-events:none;width:clamp(11rem,24vw,22rem)}
.plant img{display:block;width:100%;height:auto}
.plant--l{left:clamp(-5rem,-3vw,-1rem)}
.plant--r{right:clamp(-5rem,-3vw,-1rem)}
@media (max-width:760px){.plant{width:36vw}.plant--l{left:-8vw}.plant--r{right:-8vw}.sessions,.asked{padding-bottom:58vw}}
@media (prefers-reduced-motion:no-preference){
  .plant img{transform-origin:50% 100%;animation:fringe-sway 20s ease-in-out infinite alternate}
  .plant--top img{transform-origin:50% 0}
}

/* more of Ben's greenery through the middle chapters: palms, a pothos, a rubber plant */
.sessions .plant{width:clamp(12rem,27vw,25rem)}
.plant--top{top:0;bottom:auto}
.plant--flip{transform:scaleX(-1)}
.plant--visit{width:clamp(8rem,12vw,11rem);left:clamp(-2rem,-1vw,0rem)}
.visit{position:relative;overflow:hidden}
.visit > .wrap{position:relative;z-index:1}
@media (max-width:760px){
  .sessions .plant{width:46vw}.sessions{padding-bottom:74vw}
  .plant--visit{display:none}
}