/* ============================================================
   neoSKiN — chrome
   The top banner and the mobile menu, shared by every page.

   These rules used to live in home.css, which only index.html
   loads, so the homepage grew a 72px fixed bar with a menu sheet
   while the other 29 pages kept treatment.css's 64px sticky bar
   with no sheet at all. The banner changed size the moment you
   clicked off the homepage, and between 760-920px the sub-pages
   dropped their links with nothing replacing them.

   One file, loaded everywhere. Page stylesheets must not restyle
   .nav — put page-specific work elsewhere.
   ============================================================ */

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:10;height:var(--nav-h);
  display:flex;align-items:center;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--hairline-2);
  transition:transform var(--dur-enter) var(--ease-out);
}
.nav.hidden{transform:translateY(-100%)}
.nav-inner{
  width:min(1240px,calc(100% - 48px));margin-inline:auto;
  display:flex;align-items:center;gap:var(--s6);
}
.nav .logo{margin-right:auto;display:flex;align-items:center}
.nav .logo img{height:24px;width:auto}
.nav-links{display:flex;gap:var(--s6)}
.nav-links a{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ivory-dim);position:relative;padding-block:6px;
  transition:color var(--dur-state) var(--ease-soft);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--sage-fill);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-state) var(--ease-out);
}
.nav-links a:hover{color:var(--ivory)}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-cta{display:flex;align-items:center;gap:var(--s4)}
.nav .btn{padding:11px 6px 11px 20px;font-size:var(--t-label)}
.nav .btn-orb{width:28px;height:28px}

.menu-toggle{
  display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:44px;height:44px;margin-right:-10px;
}
.menu-toggle span{
  display:block;width:20px;height:1.5px;background:var(--ivory);
  transition:transform var(--dur-enter) var(--ease-out);
}
.menu-open .menu-toggle span:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-open .menu-toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.menu-overlay{
  position:fixed;inset:0;z-index:9;
  background:color-mix(in srgb, var(--bg) 96%, transparent);
  -webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--s5);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-enter) var(--ease-soft), visibility 0s var(--dur-enter);
}
.menu-open .menu-overlay{opacity:1;visibility:visible;transition:opacity var(--dur-enter) var(--ease-soft)}
.menu-open{overflow:hidden}
.menu-overlay nav{display:flex;flex-direction:column;gap:2px}
.menu-overlay nav > a{
  font-family:'Expose',sans-serif;font-weight:500;
  font-size:clamp(2rem,10vw,2.8rem);letter-spacing:-.028em;
  color:var(--ivory);padding:8px 0;
  transform:translateY(20px);opacity:0;
  transition:transform var(--dur-enter) var(--ease-out), opacity var(--dur-enter), color var(--dur-tap);
}
.menu-open .menu-overlay nav > a{transform:none;opacity:1}
.menu-overlay nav > a:hover{color:var(--sage-label)}
.menu-foot{
  margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:var(--s2);
  opacity:0;transition:opacity var(--dur-enter) .24s;
}
.menu-open .menu-foot{opacity:1}
.menu-foot a{color:var(--sage-label)}

@media (max-width:920px){
  .nav-links{display:none}
  .menu-toggle{display:flex}
  .nav .btn{padding:13px 6px 13px 18px}
  /* "Book consultation" wrapped to two lines inside a 72px bar at 375px.
     The bar keeps the verb; the word it qualifies goes. */
  .nav .btn-long{display:none}
}
@media (min-width:921px){ .menu-overlay{display:none} }


/* ============================================================
   section rhythm — shared
   The numbered rule-head (01 — PRESENTING CONCERN ——— link),
   band spacing and heading measure. Lived in home.css, so only
   index.html could use it; the other 29 pages had their own
   .section-head and none of the numbering. Moved here so a
   section head is the same object everywhere.
   ============================================================ */
/* ---------- section rhythm ---------- */
.band-sec{padding-block:var(--sec-md)}
.band-sec--tight{padding-block:var(--sec-sm)}

.rule-head{
  display:flex;align-items:center;gap:var(--s5);
  margin-bottom:var(--s5);
}
.rule-head .mono{white-space:nowrap;color:var(--ivory-dim)}
.rule-head .mono a{color:var(--sage-label)}
.rule-head .mono a:hover{text-decoration:underline;text-underline-offset:3px}
.rule-line{flex:1;height:1px;background:var(--hairline)}
@media (max-width:640px){
  /* The rule drops to its own row here, and the two mono labels then read
     as one run-on string — "03 — TO TAKE HOME SHOP ONLINE →".

     space-between was the previous attempt and cannot work: .mono is
     white-space:nowrap, and at 375 the two labels together are wider than
     the container, so there is no free space for space-between to
     distribute and they butt up against each other. Where they did fit
     the row wrapped instead, so the same head rendered two different ways
     down one page.

     Giving each label its own row is width-independent — it cannot fail
     on a longer label the way a distributed row does. Reading order stays
     index, rule, link. */
  .rule-head{flex-wrap:wrap;gap:var(--s2)}
  .rule-head .mono{flex-basis:100%}
  .rule-line{order:2;flex-basis:100%}
  .rule-head .mono:last-child{order:3}
}
.band-sec > .container > h2{margin-bottom:var(--s7);max-width:20ch}



/* ============================================================
   SPLIT BAND — headline column left, content right.

   The stacked shape (full-width headline, grid immediately
   under it) reads dense: every band is the same rectangle and
   nothing gives the eye a rest. This is the shape used across
   the reference sites — roughly a third for the headline, the
   rest for content, and real distance between the two.

   The left column is sticky on tall bands so the heading stays
   with its content while the right side scrolls. Collapses to
   stacked under 900px, where a 33% column would leave 120px of
   text width.
   ============================================================ */
.band-split{
  display:grid;
  grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);
  gap:clamp(40px,6vw,110px);
  align-items:start;
}
.band-split > .split-head{position:sticky;top:calc(var(--nav-h) + var(--s7))}
.band-split > .split-head h2{
  margin-bottom:var(--s5);
  max-width:14ch;          /* the headline wants to break early here */
}
.band-split > .split-head .lede{
  color:var(--ink-dim);max-width:32ch;
  margin-bottom:var(--s6);
}
.band-split > .split-head .eyebrow{margin-bottom:var(--s5)}

/* the headline column stops being sticky once it is taller than
   the viewport can hold, otherwise it clips */
@media (max-height:760px){ .band-split > .split-head{position:static} }

@media (max-width:900px){
  /* minmax(0,1fr), not 1fr. A bare 1fr is minmax(auto,1fr), which has a
     min-content floor - so a horizontal rail inside the track inflated it
     to 810px and the whole document scrolled sideways on a phone. */
  .band-split{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .band-split > .split-head{position:static}
  .band-split > .split-head h2{max-width:18ch}
  .band-split > .split-head .lede{max-width:52ch;margin-bottom:0}
}

/* ---- more air around the section rules themselves ---- */
.rule-head{margin-bottom:var(--s7)}
.band-sec > .container > h2{margin-bottom:var(--s6)}
.band-sec > .container > h2 + .lede{margin-bottom:var(--s8)}

/* ============================================================
   MOTION — sticky header and media reveal
   Driven by assets/motion.js. Transform and opacity only; no
   property here can trigger layout.
   ============================================================ */

.nav{
  transition:transform var(--dur-state) var(--ease-soft),
             background-color var(--dur-state) var(--ease-soft),
             border-color var(--dur-state) var(--ease-soft),
             box-shadow var(--dur-state) var(--ease-soft);
  will-change:transform;
}
/* weight once the reader has left the hero */
.nav.is-scrolled{
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom-color:var(--hairline);
  box-shadow:0 1px 0 rgba(33,29,24,.04), 0 10px 30px -22px rgba(33,29,24,.5);
}
/* The retreat/return tuck is retired: over pinned scenes and long
   editorial pages the bar sliding in and out read as bobbing.
   The bar now stays present (weight still arrives via .is-scrolled);
   the homepage film hero hides it with .nav-hold instead. */
.nav.is-tucked{transform:none}

/* ---- media reveal ----
   The frame clips; the picture sits slightly over-scale and
   settles back. Scale and opacity only. */
.mr{overflow:hidden}
.mr img,.mr video{
  transform:scale(1.06);
  opacity:0;
  transition:transform 1.1s var(--ease-out), opacity .8s var(--ease-out);
  will-change:transform,opacity;
}
.mr.in img,.mr.in video{transform:none;opacity:1}

@media (prefers-reduced-motion:reduce){
  .nav{transition:none}
  .nav.is-tucked{transform:none}
  .mr img,.mr video{transform:none;opacity:1;transition:none}
}

/* ---- nav button ----
   Sized so "Book consultation" holds one line at every width it is
   shown at. Below 1080px the label shortens to "Book" rather than
   wrapping, and the pill stays symmetrical around the arrow. */
.nav-cta .btn{
  padding:12px 8px 12px 20px;
  gap:12px;
  font-size:.75rem;
  letter-spacing:.06em;
}
.nav-cta .btn .btn-orb{width:30px;height:30px;flex:none}
@media (max-width:1180px){
  .nav-cta .btn .btn-long{display:none}
  .nav-cta .btn{padding-left:18px}
}

/* ---- mobile header ----
   At 375 the bar was lopsided and cramped: a 54px Book pill inside a
   72px bar, and a 14px right gutter against a 24px left one. Every
   element in the bar now sits at 44px - the tap-target floor - and
   the gutters match. */
@media (max-width:920px){
  .nav-cta{gap:10px;padding-right:0}
  .nav-cta .btn{
    height:44px;padding:0 6px 0 16px;
    font-size:.75rem;letter-spacing:.06em;
  }
  .nav-cta .btn .btn-orb{width:32px;height:32px}
  .menu-toggle{width:44px;height:44px;margin-right:0}
  .logo{height:44px;display:flex;align-items:center}
}
@media (max-width:400px){
  /* the wordmark can give up a little rather than the gutters */
  .logo img{width:84px}
  .nav-cta .btn{padding-left:14px}
}

/* ============================================================
   AUDIT FIX — button label centring, 2026-07-30
   .btn's asymmetric padding (26px left / 8px right, and 20/6 in the
   nav) exists to leave room for the arrow orb on the right. Buttons
   with no orb inherited it and sat off-centre — measured 18px on
   "Book consultation" and 13px on the voucher buttons.

   Worse, home.css sets .hero-actions .btn{justify-content:space-
   between} for the orb layout; on an orb-less button that pushed the
   label a measured 122px off at 375px wide.

   These live in chrome.css because base.css loses to chrome.css and
   home.css on load order, and they carry enough specificity to beat
   .nav .btn and .hero-actions .btn outright.
   ============================================================ */
.nav .btn:not(:has(.btn-orb)),
.hero-actions .btn:not(:has(.btn-orb)),
.btn:not(:has(.btn-orb)){
  padding-inline:22px;
  justify-content:center;
  /* letter-spacing is applied after the final glyph as well, leaving
     a phantom .08em to the right of every uppercase label */
  text-indent:.08em;
}

/* NAV OVER A DARK HERO — unresolved, deliberately not guessed at.

   shop.html and the treatment pages open with a pine hero and the
   nav sits over it unscrolled, where --ivory-dim links measure very
   low. A rule keyed off `body:has(.t-hero)` was tried and reverted:
   team.html, packages.html and concerns/index.html also match those
   selectors but their nav sits over putty, so the fix turned THEIR
   links bone at 1.1:1 — trading one broken page for three.

   This needs to know what is actually rendered behind a fixed bar,
   which an ancestor-walking contrast check cannot determine. It
   wants either a per-page ground flag in the markup, or a pixel
   sample of the rendered page. Left as found.
   ============================================================ */

/* ============================================================
   MOBILE BOOKING DOCK — persistent Book + Call, thumb zone.
   Hidden on desktop; safe-area aware; hides while the menu is
   open so it never covers the way out.

   Lives here rather than in subpages.css because the .dock markup ships
   on 42 pages while subpages.css is linked by only some of them. index /
   shop / packages / team got the markup without the rules, so the dock
   fell into normal flow as unstyled "Book Call" text under the footer.
   Every page carrying .dock loads chrome.css.
   ============================================================ */
.dock{display:none}
@media (max-width:760px){
  .dock{
    position:fixed;left:12px;right:12px;z-index:9;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    display:flex;gap:8px;
    padding:8px;border-radius:999px;
    background:color-mix(in srgb, var(--pine) 92%, transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 12px 40px -12px rgba(33,29,24,.5);
    border:1px solid rgba(247,244,238,.14);
  }
  .dock a{
    /* box-sizing and a pinned height, because .dk-call carries a 1px border
       and .dk-book does not: on min-height alone the two pills came out
       46px and 70px, and the taller one overflowed the 64px dock. */
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    box-sizing:border-box;height:46px;align-self:center;
    border-radius:999px;
    font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:500;
    letter-spacing:.08em;text-transform:uppercase;
  }
  /* the dock's primary action follows the glass the rest of the site's
     buttons now use; it sits over the page, so the blur has something
     real to pick up here */
  .dock .dk-book{background:var(--glass-fill);color:var(--bone);
    border:1px solid var(--glass-edge-strong);
    -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
  .dock .dk-call{color:var(--bone);border:1px solid rgba(247,244,238,.3)}
  .dock .ic{width:16px;height:16px}
  .menu-open .dock,.quiz-open .dock{display:none}
  /* keep the last content clear of the dock */
  footer{padding-bottom:84px}
}


/* ---- film-hero hold ----
   The homepage hero is a pinned film; a bar sliding in and out
   over it reads as chrome fighting the picture. While the
   sequence is running the bar stays out of frame entirely -
   hero-film.js lifts the hold at the handover and the bar slides
   in once. Pages that set .nav-steady keep the bar present
   instead of the retreat/return tuck, which read as bobbing over
   long scroll sections. Lives here because chrome.css owns .nav. */
.nav.nav-steady.is-tucked{transform:none}
.nav.nav-hold,
.nav.nav-hold.is-tucked,
.nav.nav-steady.nav-hold{transform:translate3d(0,-102%,0)}