/* Owner: shell. The page system: scroll behaviour, focus, buttons, reveals, two-tone headings, split heads.
   Every section file may rely on these; none of them has to repeat them. */

/* Anchors land below the fixed header. Smooth scrolling only for people who allow motion. */
html { scroll-padding-top: calc(var(--header) + var(--space-4)); }
/* Smooth only while an in-page link scrolls (shell.js sets .is-anchoring), never for keyboard focus or find-in-page. */
html { scroll-behavior:auto; }
@media (prefers-reduced-motion:no-preference) { html.is-anchoring { scroll-behavior:smooth; } }
/* Booking locks page scroll. The phone menu does not — the sheet is mid-height and the page stays usable underneath. */
html.booking-open { overflow:hidden; }

/* The light band: the shared contract flips the tokens, the paper is painted here. */
.section--light { --page:#FFFFFF; --text:#111418; --text-2:#5B6270; --hair:rgba(0,0,0,.10); --violet:#7C3AED; --violet-bright:#7C3AED; --surface:#F5F6F8; --line:#ECEEF1; background:var(--page); color:var(--text); }

/* Focus: one ring everywhere. The light band flips --violet-bright to the ink violet. */
:focus-visible { outline:2px solid var(--violet-bright); outline-offset:3px; border-radius:4px; }
.nav a:focus-visible, .menu-b:focus-visible { border-radius:999px; }
.btn:focus-visible { border-radius:8px; }

/* Heading system: label, two tones, optional split head. */
.label { display:block; margin:0 0 var(--sp-eyebrow); font:400 14px/1 var(--pixel); letter-spacing:.01em; color:var(--violet-bright); }
h2.h2x, h1.h2x { font-size:var(--t-h2x); line-height:1.02; letter-spacing:var(--track-h2); font-weight:480; text-wrap:balance; }
h2 .dim, h1.h2x .dim { color:var(--dim); }
h2.h2x .dim, h1.h2x .dim { display:block; }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,var(--sp-lead-col)); column-gap:var(--sp-head-gap); align-items:end; margin-bottom:var(--sp-head); }
.split .lead { margin:0; padding-bottom:.45em; color:var(--text-2); font-size:var(--t-lead); line-height:1.5; }
@media (max-width:860px) { .split { grid-template-columns:minmax(0,1fr); row-gap:18px; } .split .lead { padding:0; } }

/* Reveal: a block rises 18px as it enters. Heading words light one by one. Both fire once.
   Without html.js-motion (script failed, or reduced motion) nothing is hidden. */
.w { display:inline-block; }
html.js-motion [data-reveal] { opacity:0; transform:translateY(var(--reveal-rise)); transition:opacity var(--reveal-time) var(--ease),transform var(--reveal-time) var(--ease); }
html.js-motion [data-reveal].is-in { opacity:1; transform:none; }
html.js-motion [data-words] .w { opacity:.12; transform:translateY(.12em); transition:opacity 620ms var(--ease),transform 620ms var(--ease); transition-delay:calc(var(--i) * 42ms); }
html.js-motion [data-words].is-in .w { opacity:1; transform:none; }

/* The one primary button, the same on every page and band. White on black, black on white, no icon.
   Hover: the fill fades to a quiet violet tint and the text keeps its colour. Nothing moves. The legacy cascade is frozen, so its sizes, press and phone rules are reset here. */
.btn, .hero .btn { display:inline-flex; align-items:center; justify-content:center; gap:0; height:52px; min-height:52px; padding:0 26px; border:0; border-radius:8px; background:#fff; color:#000; font:500 15.5px/1 var(--font); letter-spacing:-.012em; white-space:nowrap; text-decoration:none; cursor:pointer; transition:background-color 180ms ease; }
.btn.btn-s { height:38px; min-height:38px; padding:0 15px; font-size:14px; }
.section--light .btn { background:#000; color:#fff; }
.nav a:last-child.btn { color:#000; }
@media (hover:hover) and (pointer:fine) {
  .btn:hover { background:#DED6FF; color:#000; }
  .section--light .btn:hover { background:#2C2640; color:#fff; }
  .nav a:last-child.btn:hover { color:#000; }
}
.btn:active { transform:none; background:#CFC4FF; color:#000; }
.section--light .btn:active { transform:none; background:#3A3354; color:#fff; }
@media (prefers-reduced-motion:reduce) { .btn, .hero .btn { transition:none; } }

/* Approved pixel primary CTA. Static source and decorative decode share the same baseline. */
.primary-cta.btn,.hero .primary-cta.btn{position:relative;border-radius:8px;gap:0;font-family:var(--pixel);font-weight:400;letter-spacing:0;font-kerning:none;font-variant-ligatures:none;transition:background-color 150ms ease,color 150ms ease,transform 100ms ease-out}
.primary-cta.btn.btn-s{font-size:12px;padding-inline:14px}
.primary-cta .button-label,.primary-cta .cta-label{position:relative;display:inline-grid;vertical-align:baseline}
.primary-cta .button-source,.primary-cta .typing-ink,.primary-cta .decode-ink{grid-area:1/1}
.primary-cta .decode-ink{position:absolute;inset:0;white-space:pre;pointer-events:none}
.primary-cta.is-decoding .button-source,.primary-cta.is-decoding .typing-ink{opacity:0}
/* Only the final glyph reserves width. The digit has zero intrinsic width in the same grid cell. */
.primary-cta .decode-char{display:inline-grid;vertical-align:baseline}
.primary-cta .decode-char::before,.primary-cta .decode-char::after{grid-area:1/1;white-space:pre}
.primary-cta .decode-char::before{content:attr(data-final);visibility:hidden}
.primary-cta .decode-char::after{content:attr(data-c);width:0;justify-self:start}
.primary-cta.btn:focus-visible,.nav a:last-child.primary-cta.btn:focus-visible{background:var(--violet);color:#fff}
@media(hover:hover) and (pointer:fine){.primary-cta.btn:hover,.nav a:last-child.primary-cta.btn:hover{background:var(--violet);color:#fff}}
.primary-cta.btn:active,.hero .primary-cta.btn:active{transform:scale(.98);background:#e8dff9;color:#000}
@media(prefers-reduced-motion:reduce){
 .primary-cta.btn,.hero .primary-cta.btn{transition:none}
 .primary-cta .decode-ink{display:none}
 .primary-cta.is-decoding .button-source,.primary-cta.is-decoding .typing-ink{opacity:1}
 .primary-cta.btn:active,.hero .primary-cta.btn:active{transform:none}
}