/* core 0.1.1, skin 98-movieposter */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/anton/anton-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/anton/anton-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anton Fallback"; src: local("Impact"); size-adjust: 100%; ascent-override: 117%; descent-override: 33%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-condensed/barlow-condensed-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-condensed/barlow-condensed-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed Fallback"; src: local("Arial Narrow"); size-adjust: 92%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }

/* AuraicPulse core tokens (WEBSITE-TEMPLATE-SPEC 10). Sections read only these.
   Skins override the values in skin.json; facts.brand colours override primary
   and accent when they pass the contrast check. Light first, then dark. */
:root {
  color-scheme: light dark;
  /* colour: light */
  --color-bg: oklch(0.99 0.004 90);
  --color-surface: oklch(0.965 0.006 90);
  --color-surface-2: oklch(0.93 0.008 90);
  --color-fg: oklch(0.22 0.012 250);
  --color-fg-muted: oklch(0.45 0.012 250);
  --color-line: oklch(0.88 0.01 250);
  --color-line-strong: oklch(0.56 0.012 250);
  --color-primary: oklch(0.45 0.11 250);
  --color-primary-fg: oklch(0.99 0 0);
  --color-accent: oklch(0.8 0.12 75);
  --color-accent-fg: oklch(0.22 0.03 60);
  --color-link: oklch(0.45 0.12 250);
  --color-focus: oklch(0.5 0.16 250);
  --color-success: oklch(0.5 0.12 150);
  --color-warning: oklch(0.75 0.14 80);
  --color-danger: oklch(0.52 0.18 28);
  --color-overlay: oklch(0.2 0.01 250 / 0.55);

  /* type */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-base: 1.0625rem;
  --scale: 1.25;
  --measure: 68ch;
  --leading: 1.6;
  --leading-tight: 1.15;
  --weight-body: 400;
  --weight-strong: 650;
  --weight-display: 600;
  --tracking-display: -0.01em;
  --step--1: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --step-0: clamp(1rem, 0.97rem + 0.2vw, var(--text-base));
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.6rem, 1.35rem + 1.2vw, 2.3rem);
  --step-4: clamp(1.9rem, 1.5rem + 2vw, 3.1rem);
  --step-5: clamp(2.1rem, 1.6rem + 2.8vw, 4rem);

  /* space */
  --space: 1rem;
  --density: 1;
  --space-1: calc(var(--space) * 0.25 * var(--density));
  --space-2: calc(var(--space) * 0.5 * var(--density));
  --space-3: calc(var(--space) * 0.75 * var(--density));
  --space-4: calc(var(--space) * 1 * var(--density));
  --space-5: calc(var(--space) * 1.5 * var(--density));
  --space-6: calc(var(--space) * 2 * var(--density));
  --space-7: calc(var(--space) * 3 * var(--density));
  --space-8: calc(var(--space) * 4.5 * var(--density));
  --section-pad: clamp(2.5rem, 1.5rem + 4vw, 6rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --container: 74rem;
  --container-wide: 96rem;
  --tap: 2.75rem;

  /* shape */
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-lg: calc(var(--radius) * 1.6);
  --radius-pill: 999px;
  --border: 1px;
  --shadow: 0 1px 2px oklch(0 0 0 / 0.06), 0 8px 24px oklch(0 0 0 / 0.06);
  --shadow-lg: 0 2px 4px oklch(0 0 0 / 0.06), 0 18px 48px oklch(0 0 0 / 0.1);

  /* motion: --motion 0 turns everything off */
  --motion: 1;
  --dur-1: calc(160ms * var(--motion));
  --dur-2: calc(320ms * var(--motion));
  --dur-3: calc(640ms * var(--motion));
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-distance: calc(1rem * var(--motion));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: oklch(0.17 0.01 250);
    --color-surface: oklch(0.21 0.012 250);
    --color-surface-2: oklch(0.26 0.014 250);
    --color-fg: oklch(0.95 0.005 90);
    --color-fg-muted: oklch(0.77 0.01 250);
    --color-line: oklch(0.33 0.012 250);
    --color-line-strong: oklch(0.62 0.012 250);
    --color-primary: oklch(0.78 0.1 250);
    --color-primary-fg: oklch(0.17 0.02 250);
    --color-accent: oklch(0.8 0.12 75);
    --color-accent-fg: oklch(0.2 0.03 60);
    --color-link: oklch(0.82 0.09 250);
    --color-focus: oklch(0.82 0.12 250);
    --color-success: oklch(0.75 0.12 150);
    --color-warning: oklch(0.8 0.13 80);
    --color-danger: oklch(0.72 0.15 28);
    --color-overlay: oklch(0 0 0 / 0.65);
    --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.35);
    --shadow-lg: 0 2px 4px oklch(0 0 0 / 0.4), 0 18px 48px oklch(0 0 0 / 0.45);
  }
}
:root[data-theme="dark"] {
  --color-bg: oklch(0.17 0.01 250);
  --color-surface: oklch(0.21 0.012 250);
  --color-surface-2: oklch(0.26 0.014 250);
  --color-fg: oklch(0.95 0.005 90);
  --color-fg-muted: oklch(0.77 0.01 250);
  --color-line: oklch(0.33 0.012 250);
  --color-line-strong: oklch(0.62 0.012 250);
  --color-primary: oklch(0.78 0.1 250);
  --color-primary-fg: oklch(0.17 0.02 250);
  --color-accent: oklch(0.8 0.12 75);
  --color-accent-fg: oklch(0.2 0.03 60);
  --color-link: oklch(0.82 0.09 250);
  --color-focus: oklch(0.82 0.12 250);
  --color-success: oklch(0.75 0.12 150);
  --color-warning: oklch(0.8 0.13 80);
  --color-danger: oklch(0.72 0.15 28);
  --color-overlay: oklch(0 0 0 / 0.65);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.35);
  --shadow-lg: 0 2px 4px oklch(0 0 0 / 0.4), 0 18px 48px oklch(0 0 0 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
}

:root {
  --color-bg: #070707;
  --color-surface: #111009;
  --color-surface-2: #18160d;
  --color-fg: #fff8e6;
  --color-fg-muted: #c9bc95;
  --color-line: #25210f;
  --color-line-strong: #7d7140;
  --color-primary: #ffc414;
  --color-primary-fg: #0a0800;
  --color-accent: #ffb000;
  --color-accent-fg: #070a0c;
  --color-link: #ffd451;
  --color-focus: #ffc414;
  --text-base: 1.125rem;
  --leading: 1.5;
  --measure: 60ch;
  --radius: 2px;
  --weight-body: 500;
  --weight-strong: 700;
  --weight-display: 400;
  --tracking-display: 0;
  --leading-tight: 0.95;
  --step-5: clamp(3.4rem, 1.6rem + 9vw, 11rem);
  --step-4: clamp(2.4rem, 1.5rem + 4vw, 5rem);
  --step-3: clamp(1.8rem, 1.3rem + 2vw, 3rem);
  --shadow: 0 30px 80px rgb(0 0 0 / 0.6);
  --night: #050505;
  --night-2: #0d0c09;
  --bone: #fff8e6;
  --bone-dim: #cdbf96;
  --night-line: #2c2717;
  --flare: #ffc414;
  --flare-fg: #0a0800;
  --flare-hi: #ffe27a;
  --flare-lo: #c98a00;
  --teal: #1a1504;
  --teal-hi: #ffb000;
  --font-display: "Anton", "Anton Fallback", system-ui, sans-serif;
  --font-body: "Barlow Condensed", "Barlow Condensed Fallback", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --color-bg: #070707;
  --color-surface: #111009;
  --color-surface-2: #18160d;
  --color-fg: #fff8e6;
  --color-fg-muted: #c9bc95;
  --color-line: #25210f;
  --color-line-strong: #7d7140;
  --color-primary: #ffc414;
  --color-primary-fg: #0a0800;
  --color-accent: #ffb000;
  --color-accent-fg: #070a0c;
  --color-link: #ffd451;
  --color-focus: #ffc414;
  --shadow: 0 30px 80px rgb(0 0 0 / 0.6);
}
}
:root[data-theme="dark"] {
  --color-bg: #070707;
  --color-surface: #111009;
  --color-surface-2: #18160d;
  --color-fg: #fff8e6;
  --color-fg-muted: #c9bc95;
  --color-line: #25210f;
  --color-line-strong: #7d7140;
  --color-primary: #ffc414;
  --color-primary-fg: #0a0800;
  --color-accent: #ffb000;
  --color-accent-fg: #070a0c;
  --color-link: #ffd451;
  --color-focus: #ffc414;
  --shadow: 0 30px 80px rgb(0 0 0 / 0.6);
}

/* Core base: reset, type, layout primitives, buttons, forms. Tokens only. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html:not([data-motion-off]) { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; background: var(--color-bg); color: var(--color-fg);
  font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading); font-weight: var(--weight-body);
  overflow-wrap: break-word; hyphens: auto; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-3); overflow-wrap: break-word; text-wrap: balance; hyphens: manual; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--space-4); }
p { text-wrap: pretty; }
a { color: var(--color-link); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.14em; }
strong { font-weight: var(--weight-strong); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection { background: var(--color-accent); color: var(--color-accent-fg); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: start; padding: var(--space-2) var(--space-3); border-block-end: var(--border) solid var(--color-line); vertical-align: top; }
th { font-weight: var(--weight-strong); }
[hidden] { display: none !important; }

.skip-link { position: absolute; inset-inline-start: var(--space-3); inset-block-start: -10rem; z-index: 100; background: var(--color-primary); color: var(--color-primary-fg); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
.skip-link:focus { inset-block-start: var(--space-3); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* layout */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--container-wide); }
.section { padding-block: var(--section-pad); }
.section--alt { background: var(--color-surface); }
.section__head { max-width: var(--measure); margin-block-end: var(--space-6); }
.section__head p { color: var(--color-fg-muted); font-size: var(--step-1); }
.measure { max-width: var(--measure); }
.grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)); }
.grid > *, .split > * { min-width: 0; }
.split { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split--wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.stack > * + * { margin-block-start: var(--space-4); }
.muted { color: var(--color-fg-muted); }
.small { font-size: var(--step--1); }
.lead { font-size: var(--step-1); max-width: var(--measure); }
.card { background: var(--color-surface); border: var(--border) solid var(--color-line); border-radius: var(--radius); padding: var(--space-5); min-width: 0; }
.section--alt .card { background: var(--color-bg); }
.media { border-radius: var(--radius); overflow: hidden; background: var(--color-surface-2); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.index-num { font-family: var(--font-display); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap); padding: var(--space-2) var(--space-5); border-radius: var(--radius); border: var(--border) solid transparent; font: inherit; font-weight: var(--weight-strong); line-height: 1.2; text-decoration: none; cursor: pointer; text-align: center; max-width: 100%; transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.btn--primary { background: var(--color-primary); color: var(--color-primary-fg); }
.btn--primary:hover { background: color-mix(in oklch, var(--color-primary) 88%, var(--color-fg)); }
.btn--ghost { background: transparent; color: var(--color-fg); border-color: var(--color-line-strong); }
.btn--ghost:hover { background: var(--color-surface-2); }
.btn--accent { background: var(--color-accent); color: var(--color-accent-fg); }
.btn:active { transform: translateY(1px); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.textlink { font-weight: var(--weight-strong); }

/* forms */
.form { display: grid; gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); min-width: 0; }
.field label { font-weight: var(--weight-strong); }
.field .hint { color: var(--color-fg-muted); font-size: var(--step--1); }
.field input, .field select, .field textarea { width: 100%; min-height: var(--tap); font: inherit; color: var(--color-fg); background: var(--color-bg); border: var(--border) solid var(--color-line-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.field .error { color: var(--color-danger); font-size: var(--step--1); min-height: 0; }
.form__row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.form__trust { color: var(--color-fg-muted); font-size: var(--step--1); margin: 0; }
.form__status { font-weight: var(--weight-strong); }
.form__status[data-state="error"] { color: var(--color-danger); }
.form__done { border: var(--border) solid var(--color-success); border-radius: var(--radius); padding: var(--space-5); }
.hp { position: absolute; inset-inline-start: -100vw; width: 1px; height: 1px; overflow: hidden; }

/* shell parts */
.crumbs { font-size: var(--step--1); color: var(--color-fg-muted); padding-block: var(--space-3) 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--color-fg-muted); }
.crumbs a { color: inherit; }
.page-title { padding-block: var(--space-7) var(--space-4); }
.updated { color: var(--color-fg-muted); font-size: var(--step--1); padding-block: var(--space-4); border-block-start: var(--border) solid var(--color-line); }
.preview-mark { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 90; background: var(--color-warning); color: var(--color-accent-fg); text-align: center; font-weight: var(--weight-strong); font-size: var(--step--1); padding: var(--space-1) var(--space-3); pointer-events: none; }
.has-preview { padding-block-start: 2rem; }
.demo-note { font-size: var(--step--1); color: var(--color-fg-muted); }

/* motion: reveal is opt-in by the skin's motion module; content is visible without JS */
.js-motion [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(var(--reveal-distance)); }
@media print { .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; } .sticky, .site-header, .promo { display: none !important; } }
.js-motion [data-reveal] { transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
@media (prefers-reduced-motion: reduce) { .js-motion [data-reveal]:not(.is-in) { opacity: 1; transform: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }

/* about */
.about__grid { --grid-min: 18rem; }
.about__part h3, .about__story h3 { font-size: var(--step-1); }
.about__part p:last-child { margin-block-end: 0; }
.about__story { max-width: var(--measure); }
.about__people { margin-block-start: var(--space-6); }
.s-about--b .about__people { margin-block-start: 0; }
.about__team { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.about__team p { margin: var(--space-2) 0 0; }

/* areas */
.areas__chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.areas__chips li { border: var(--border) solid var(--color-line-strong); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4); max-width: 100%; }
.areas__cols { list-style: none; padding: 0; margin: 0; columns: 2 12rem; column-gap: var(--space-6); }
.areas__cols li { break-inside: avoid; padding-block: var(--space-2); border-block-end: var(--border) solid var(--color-line); }

/* booking */
.booking__steps { padding-inline-start: var(--space-5); }
.booking__steps li + li { margin-block-start: var(--space-2); }
.booking__band { max-width: calc(52rem + 2 * var(--gutter)); }
.s-booking--b .form { background: var(--color-bg); border-radius: var(--radius); padding: var(--space-5); border: var(--border) solid var(--color-line); }

/* contact */
.contact__rows { display: grid; gap: var(--space-4); margin: 0; }
.contact__rows dt { color: var(--color-fg-muted); font-size: var(--step--1); }
.contact__rows dd { margin: 0; font-weight: var(--weight-strong); }
.contact__narrow { max-width: calc(46rem + 2 * var(--gutter)); }
.s-contact--b .contact__head { text-align: center; margin-inline: auto; }
.s-contact--b .contact__rows { margin-block-start: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.contact__form { box-shadow: var(--shadow); }
.enquiry__title { font-size: var(--step-2); }
.contact__rows dd, .contact__rows a { overflow-wrap: anywhere; min-width: 0; }

/* faq */
.faq__wrap { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.faq__list { border-block-start: var(--border) solid var(--color-line); }
.faq__item { border-block-end: var(--border) solid var(--color-line); }
.faq__item summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding-block: var(--space-4); min-height: var(--tap); font-weight: var(--weight-strong); font-size: var(--step-1); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: var(--step-2); color: var(--color-fg-muted); transition: transform var(--dur-1) var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__a { padding-block-end: var(--space-4); max-width: var(--measure); }
.faq__a p { margin: 0; }
@media (min-width: 900px) { .split--faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

/* footer */
.site-footer { background: var(--color-surface); border-block-start: var(--border) solid var(--color-line); padding-block: var(--space-7) var(--space-5); margin-block-start: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding-block: var(--space-1); }
.site-footer a { color: var(--color-fg); }
.foot__cols { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.foot__h { font-weight: var(--weight-strong); margin-block-end: var(--space-2); }
.foot__name { font-family: var(--font-display); font-size: var(--step-1); display: flex; align-items: center; gap: var(--space-2); }
.foot__name svg { width: 1.75rem; height: 1.75rem; color: var(--color-primary); flex: none; }
.foot__bottom { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: space-between; border-block-start: var(--border) solid var(--color-line); margin-block-start: var(--space-6); padding-block-start: var(--space-4); color: var(--color-fg-muted); }
.foot__bottom p { margin: 0; }
.foot__row { display: grid; gap: var(--space-4); }
.foot__inline { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.foot__inline li { min-height: var(--tap); display: flex; align-items: center; }
.site-footer a { overflow-wrap: anywhere; }

/* gallery */
.gallery__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.gallery__fig { margin: 0; min-width: 0; }
.gallery__fig .media { aspect-ratio: 4 / 3; }
.gallery__fig figcaption { margin-block-start: var(--space-2); }
.gallery__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 70vw); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); padding-block-end: var(--space-3); scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
@media (min-width: 900px) { .gallery__row { grid-auto-columns: minmax(18rem, 28rem); padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); } }
.gallery__row .gallery__fig { scroll-snap-align: start; }

/* hero */
.s-hero { padding-block: clamp(2rem, 1rem + 4vw, 5rem); }
.hero__kicker { font-family: var(--font-display); color: var(--color-fg-muted); font-size: var(--step-1); margin-block-end: var(--space-3); }
.hero__answer { color: var(--color-fg); }
.s-hero h1 { max-width: 20ch; }
.s-hero--a .hero__grid { align-items: center; }
.s-hero--a .hero__media { aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.s-hero--b .hero__center { text-align: center; display: grid; justify-items: center; }
.s-hero--b .hero__center h1 { margin-inline: auto; }
.s-hero--b .actions { justify-content: center; }
.s-hero--b .hero__wide { margin-block-start: var(--space-7); aspect-ratio: 21 / 9; }
@media (max-width: 599px) { .s-hero--b .hero__wide { aspect-ratio: 4 / 3; } }
.s-hero--c .hero__type { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .s-hero--c .hero__type { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.s-hero--c h1 { font-size: clamp(2.2rem, 1.4rem + 4vw, 5rem); max-width: 16ch; }
.hero__facts { display: grid; gap: var(--space-4); margin: 0; border-inline-start: 3px solid var(--color-accent); padding-inline-start: var(--space-5); }
.hero__facts dt { color: var(--color-fg-muted); font-size: var(--step--1); }
.hero__facts dd { margin: 0; font-family: var(--font-display); font-size: var(--step-2); }

/* nav */
.site-header { position: sticky; inset-block-start: 0; z-index: 50; background: color-mix(in oklch, var(--color-bg) 92%, transparent); backdrop-filter: blur(10px); border-block-end: var(--border) solid var(--color-line); }
.nav__bar { display: flex; align-items: center; gap: var(--space-3) var(--space-5); min-height: 4rem; padding-block: var(--space-2); }
.nav__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-fg); text-decoration: none; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--step-1); min-width: 0; min-height: var(--tap); }
.nav__brand svg { width: 2rem; height: 2rem; flex: none; color: var(--color-primary); }
.nav__brand span { overflow-wrap: anywhere; }
.nav__main ul, .nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__main ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.nav__main a { color: var(--color-fg); text-decoration: none; padding-block: var(--space-2); display: inline-block; }
.nav__main a:hover, .nav__main a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 0.15em; }
.nav__tools { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.nav__icon { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-pill); border: var(--border) solid var(--color-line); background: transparent; color: var(--color-fg); cursor: pointer; }
.nav__icon[aria-pressed="true"] { background: var(--color-surface-2); }
.nav__back { display: none; color: var(--color-fg); text-decoration: none; min-height: var(--tap); align-items: center; padding-inline-end: var(--space-2); }
.nav__menu { display: none; }
.nav__drawer { position: fixed; inset: 0; z-index: 80; background: var(--color-overlay); display: flex; justify-content: flex-end; }
.nav__drawer[hidden] { display: none; }
.nav__panel { background: var(--color-bg); width: min(22rem, 88vw); height: 100%; overflow-y: auto; padding: var(--space-5); display: grid; align-content: start; gap: var(--space-4); box-shadow: var(--shadow-lg); }
.nav__panel ul a { display: block; padding-block: var(--space-3); font-size: var(--step-1); color: var(--color-fg); text-decoration: none; border-block-end: var(--border) solid var(--color-line); }
.nav__panel ul a[aria-current="page"] { font-weight: var(--weight-strong); }
.nav__close { justify-self: end; }
@media (max-width: 959px) {
  .nav__main, .nav__cta { display: none; }
  .nav__menu { display: inline-flex; }
  .nav__back { display: inline-flex; }
  .nav__brand { font-size: var(--step-0); }
}
@media (min-width: 960px) {
  .nav--b .nav__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding-block: var(--space-3) 0; }
  .nav--b .nav__brand { grid-column: 2; justify-self: center; font-size: var(--step-2); }
  .nav--b .nav__tools { grid-column: 3; justify-self: end; }
  .nav--b .nav__main { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .nav--b .nav__back { display: none; }
}

/* pricing */
.pricing__cards { --grid-min: 15rem; margin-block-end: var(--space-5); }
.pricing__card { display: grid; gap: var(--space-2); align-content: start; }
.pricing__card h3 { font-size: var(--step-1); margin: 0; }
.pricing__price { font-family: var(--font-display); font-size: var(--step-3); margin: 0; }
.pricing__note { max-width: var(--measure); color: var(--color-fg-muted); }
.pricing__scroll { overflow-x: auto; margin-block-end: var(--space-4); }
.pricing__table { min-width: 28rem; background: var(--color-bg); }

/* process */
.process__cols { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.process__cols li { counter-increment: step; border-block-start: 3px solid var(--color-primary); padding-block-start: var(--space-4); min-width: 0; }
.process__cols li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-display); font-size: var(--step-3); color: var(--color-fg-muted); margin-block-end: var(--space-2); }
.process__cols h3, .process__line h3 { font-size: var(--step-1); }
.process__cols p, .process__line p { margin: 0; color: var(--color-fg-muted); }
.process__line { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.process__line li { counter-increment: step; position: relative; padding-inline-start: var(--space-7); padding-block-end: var(--space-6); border-inline-start: 2px solid var(--color-line-strong); margin-inline-start: var(--space-4); }
.process__line li:last-child { border-color: transparent; padding-block-end: 0; }
.process__line li::before { content: counter(step); position: absolute; inset-inline-start: -1.25rem; inset-block-start: 0; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-primary-fg); font-weight: var(--weight-strong); }

/* promo-banner */
.promo { font-size: var(--step--1); }
.promo__inner { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; padding-block: var(--space-2); }
.promo__text { margin: 0; flex: 1 1 16rem; min-width: 0; }
.promo__close { background: transparent; border: var(--border) solid currentColor; color: inherit; border-radius: var(--radius-sm); min-height: 2rem; min-width: var(--tap); padding: 0 var(--space-3); font: inherit; cursor: pointer; }
.promo--a { background: var(--color-primary); color: var(--color-primary-fg); }
.promo--a a { color: inherit; }
.promo--b .promo__inner { margin-block-start: var(--space-3); background: var(--color-surface-2); border: var(--border) solid var(--color-line); border-radius: var(--radius); padding: var(--space-2) var(--space-4); max-width: calc(var(--container) - 2 * var(--gutter)); width: calc(100% - 2 * var(--gutter)); }
.promo--warning.promo--a { background: var(--color-accent); color: var(--color-accent-fg); }

/* proof */
.proof__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin: 0; }
.proof__item { background: var(--color-bg); border: var(--border) solid var(--color-line); border-radius: var(--radius); padding: var(--space-4); min-width: 0; }
.proof__item dt { color: var(--color-fg-muted); font-size: var(--step--1); }
.proof__item dd { margin: var(--space-1) 0 0; font-family: var(--font-display); font-size: var(--step-1); }
.proof__item .source { font-family: var(--font-body); }
.s-proof--b .measure-wrap > * { max-width: 48rem; }
.proof__table th { width: 38%; color: var(--color-fg-muted); font-weight: var(--weight-body); }
.proof__table { table-layout: fixed; width: 100%; }
.proof__table th, .proof__table td, .proof__item dd, .proof__table a { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 30rem) { .proof__table, .proof__table tbody, .proof__table tr, .proof__table th, .proof__table td { display: block; width: auto; } .proof__table th { border-block-end: 0; padding-block-end: 0; } }

/* prose */
.prose h2 { font-size: var(--step-3); margin-block-start: var(--space-6); }
.prose h2:first-child { margin-block-start: 0; }
.prose h3 { font-size: var(--step-1); margin-block-start: var(--space-5); }
.prose ul, .prose ol { padding-inline-start: var(--space-5); }
.prose li + li { margin-block-start: var(--space-1); }
.prose__grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .prose__grid { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } .prose__toc { position: sticky; inset-block-start: 6rem; align-self: start; } }
.prose__toc ul { list-style: none; padding: 0; margin: 0; }
.prose__toc li { padding-block: var(--space-1); }

/* services */
.services__cards { --grid-min: 17rem; }
.services__card h3 { font-size: var(--step-2); }
.services__card h3 a { color: var(--color-fg); text-decoration: none; }
.services__card h3 a:hover { text-decoration: underline; }
.services__media { aspect-ratio: 3 / 2; margin-block-end: var(--space-4); }
.services__price { margin: 0; }
.services__rows { list-style: none; padding: 0; margin: 0; border-block-start: var(--border) solid var(--color-line); }
.services__row { display: grid; grid-template-columns: minmax(2.5rem, auto) minmax(0, 1fr); gap: var(--space-2) var(--space-5); padding-block: var(--space-5); border-block-end: var(--border) solid var(--color-line); align-items: baseline; }
.services__row .index-num { font-size: var(--step-3); }
.services__row .services__price { grid-column: 2; }
@media (min-width: 900px) { .services__row { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 14rem); } .services__row .services__price { grid-column: 3; text-align: end; } }
.services__body h3 { margin-block-end: var(--space-2); }
.services__body h3 a { color: var(--color-fg); }
.services__body p { margin: 0; color: var(--color-fg-muted); }

/* sticky-cta: phones only */
.sticky { display: none; }
@media (max-width: 899px) {
  body.has-sticky { padding-block-end: 5rem; }
  .sticky { display: flex; position: fixed; z-index: 60; transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
  .sticky.is-hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }
  .sticky--a { inset-inline: 0; inset-block-end: 0; padding: var(--space-2) var(--gutter); gap: var(--space-3); align-items: center; background: var(--color-bg); border-block-start: var(--border) solid var(--color-line); box-shadow: var(--shadow); }
  .sticky--a .sticky__btn { flex: 1 1 auto; }
  .sticky__note { margin: 0; flex: 1 1 40%; min-width: 0; color: var(--color-fg-muted); }
  .sticky--b { inset-inline-end: var(--gutter); inset-block-end: var(--space-4); }
  .sticky--b .sticky__btn { border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); }
}

/* testimonials */
.testimonials__fig { margin: 0; }
.testimonials__fig blockquote { margin: 0 0 var(--space-3); }
.testimonials__fig blockquote p { margin: 0; }
.testimonials__grid blockquote p { font-size: var(--step-1); }
.testimonials__col { max-width: calc(52rem + 2 * var(--gutter)); }
.testimonials__list { display: grid; gap: var(--space-7); }
.testimonials__big blockquote p { font-family: var(--font-display); font-size: var(--step-3); line-height: var(--leading-tight); }
.testimonials__big { border-inline-start: 4px solid var(--color-accent); padding-inline-start: var(--space-5); }

/* work */
.work__cards { --grid-min: 22rem; }
.work__media { aspect-ratio: 3 / 2; margin-block-end: var(--space-4); }
.work__meta { margin-block-end: var(--space-2); }
.work__results { font-size: var(--step--1); margin-block-start: var(--space-3); }
.work__results th[scope="row"] { font-weight: var(--weight-body); color: var(--color-fg-muted); }
.work__card h4, .work__row h4 { font-family: var(--font-body); font-size: var(--step-0); font-weight: var(--weight-strong); margin-block: var(--space-4) var(--space-1); letter-spacing: 0; }
.work__rows { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .work__row:nth-child(even) > .media { order: 2; } }
.work__results { table-layout: fixed; } .work__results th, .work__results td { overflow-wrap: anywhere; }

/* 98-movieposter: only what tokens and variants cannot express. Tokens only.
   The hero is a one-sheet: always night, in both themes. */
h1, h2, h3, .btn, .nav__main a, .hero__kicker, .index-num { text-transform: uppercase; }
h2, h3 { letter-spacing: 0.01em; }
h3 { font-family: var(--font-display); font-weight: 400; }
.btn { letter-spacing: 0.14em; font-weight: 700; border-radius: var(--radius); }
.nav__main a { letter-spacing: 0.14em; }
.nav__brand span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }

/* one-sheet hero */
.s-hero {
  --color-bg: var(--night); --color-surface: var(--night-2); --color-fg: var(--bone); --color-fg-muted: var(--bone-dim); --color-line: var(--night-line);
  --color-primary: var(--flare); --color-primary-fg: var(--flare-fg); --color-link: var(--flare-hi); --color-focus: var(--flare);
  position: relative; isolation: isolate; overflow: hidden; color: var(--bone); text-align: center;
  min-height: min(92svh, 62rem); display: grid; align-content: end;
  background:
    radial-gradient(70% 60% at 85% 95%, color-mix(in oklch, var(--flare) 45%, transparent), transparent 70%),
    radial-gradient(80% 70% at 10% 10%, color-mix(in oklch, var(--teal-hi) 28%, transparent), transparent 70%),
    linear-gradient(160deg, var(--teal) 0%, var(--night-2) 45%, var(--night) 100%);
}
.s-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in oklch, var(--night) 70%, transparent) 0%, transparent 25%, transparent 45%, color-mix(in oklch, var(--night) 60%, transparent) 70%, var(--night) 100%); }
.s-hero .grade-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0; transition: opacity 0.6s var(--ease); }
.s-hero .grade-canvas.is-ready { opacity: 1; }
.s-hero .hero__type { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-5); }
.s-hero .hero__facts { grid-column: 1; margin: 0; }
.s-hero .hero__text { display: grid; justify-items: center; max-width: none; }
.s-hero .hero__kicker { font-weight: 500; letter-spacing: 0.42em; font-size: var(--step--1); color: var(--bone-dim); }
.s-hero h1 {
  font-size: var(--step-5); line-height: 0.86; max-width: 12ch; margin-inline: auto;
  color: transparent; background: linear-gradient(180deg, var(--bone) 0%, var(--bone) 45%, var(--flare-hi) 62%, var(--flare) 82%, var(--flare-lo) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 40px color-mix(in oklch, var(--flare) 35%, transparent));
}
.s-hero .hero__answer { margin-inline: auto; text-wrap: balance; color: var(--bone); }
.s-hero .actions { justify-content: center; }
.s-hero .textlink { color: var(--bone); letter-spacing: 0.12em; text-transform: uppercase; }
/* billing block: the compressed credit wall at the foot of a one-sheet */
.s-hero .hero__facts { display: flex; border-inline-start: 0; padding-inline-start: 0; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.2rem; width: min(60rem, 100%); padding-block-start: var(--space-4); border-block-start: 1px solid color-mix(in oklch, var(--bone) 22%, transparent); text-transform: uppercase; }
.s-hero .hero__facts > div { display: flex; gap: 0.4em; align-items: baseline; transform: scaleY(1.35); padding: 0; background: none; border: 0; }
.s-hero .hero__facts dt { font-size: 0.7em; color: var(--bone-dim); letter-spacing: 0.04em; }
.s-hero .hero__facts dd { margin: 0; font-family: var(--font-body); font-size: var(--step-0); font-weight: 700; color: var(--bone); letter-spacing: 0.03em; }
/* letterbox bars, opened by motion.js */
.s-hero .letterbox { position: absolute; inset-inline: 0; height: 12vh; background: var(--night); z-index: 4; pointer-events: none; transition: transform 1.2s cubic-bezier(0.7, 0, 0.2, 1); }
.s-hero .letterbox--top { inset-block-start: 0; transform-origin: top; }
.s-hero .letterbox--bot { inset-block-end: 0; transform-origin: bottom; }
.s-hero.is-open .letterbox { transform: scaleY(0); }
.s-hero.is-developing h1 { animation: mp-develop 1.6s cubic-bezier(0.16, 1, 0.3, 1) both 0.35s; }
@keyframes mp-develop { 0% { opacity: 0; filter: blur(18px); transform: scale(1.12); } 55% { opacity: 1; filter: blur(2px); } 100% { opacity: 1; transform: none; } }

/* develop-in for revealed items: blur resolves to crisp, like the title */
.js-motion [data-reveal]:not(.is-in) { filter: blur(8px); }
.js-motion [data-reveal] { transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease), filter var(--dur-3) var(--ease); }

/* section heads: an orange reel number line */
.section__head h2 { font-size: var(--step-4); }
.section__head::before { content: ""; display: block; width: 3rem; height: 4px; background: var(--color-primary); margin-block-end: var(--space-4); }
.index-num { color: var(--color-primary); font-size: var(--step-2); }
.card { border-radius: var(--radius); }

/* end credits footer */
.site-footer { --color-bg: var(--night); --color-fg: var(--bone); --color-fg-muted: var(--bone-dim); --color-line: var(--night-line); --color-link: var(--flare-hi); --color-focus: var(--flare);
  background: var(--night); color: var(--bone); text-align: center; }
.site-footer a { color: var(--bone); }
.site-footer .foot__name, .site-footer .foot__brand span { font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-4); line-height: 1; color: transparent;
  background: linear-gradient(180deg, var(--flare-hi), var(--flare) 60%, var(--flare-lo)); -webkit-background-clip: text; background-clip: text; }

/* ===== depth below the hero (motion.js "depth" block). Tokens only. ===== */
main .section:not(.s-hero) { position: relative; isolation: isolate; }
main .section:not(.s-hero) > :not(.sd-fx) { position: relative; z-index: 1; }
.sd-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sd-depth .section__head h2 { transition: opacity var(--dur-3, 0.6s) var(--ease), translate var(--dur-3, 0.6s) var(--ease), clip-path 0.9s var(--ease), filter 0.9s var(--ease); }
/* one-sheet: every section opens like a letterbox, headings develop from blur, a projector streak crosses the cards, the release plan runs like a reel */
.sd-fx::before, .sd-fx::after { content: ""; position: absolute; inset-inline: 0; height: 9%; background: var(--night); transition: scale 1.1s var(--ease); }
.sd-fx::before { inset-block-start: 0; transform-origin: top; }
.sd-fx::after { inset-block-end: 0; transform-origin: bottom; }
.sd-depth .section.sd-in .sd-fx::before, .sd-depth .section.sd-in .sd-fx::after, .sd-still .sd-fx::before, .sd-still .sd-fx::after { scale: 1 0; }
.sd-fx { background: linear-gradient(105deg, transparent 40%, color-mix(in oklch, var(--flare) 14%, transparent) 50%, transparent 60%) no-repeat; background-size: 220% 100%; background-position: calc(140% - var(--sd-p, 0.5) * 180%) 0; }
.sd-depth .section:not(.sd-in) .section__head h2 { filter: blur(10px); opacity: 0.2; translate: 0 0.3em; }
.process__cols, .process__line { translate: calc((0.5 - var(--sd-p, 0.5)) * 6%) 0; }
.services__card, .gallery__fig, .testimonials__fig { transition: box-shadow var(--dur-2) var(--ease), filter var(--dur-2) var(--ease); }
.services__card:hover, .sd-hot.services__card, .gallery__fig:hover, .sd-hot.gallery__fig, .sd-hot.testimonials__fig { box-shadow: 0 0 0 1px var(--flare), 0 14px 40px color-mix(in oklch, var(--flare) 25%, transparent); filter: saturate(1.15) contrast(1.05); }

/* BananaShake hybrid: the mascot as the poster's star (parallax), a gold halo ring, HUD corners */
.s-hero { min-height: min(100svh, 66rem); }
.bs-stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: grid; place-items: start center; padding-block-start: clamp(4.5rem, 9vh, 7rem); }
.bs-ring { position: absolute; top: clamp(5rem, 12vh, 9rem); width: min(46vh, 72vw); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--flare) 55%, transparent);
  box-shadow: 0 0 120px color-mix(in oklch, var(--flare) 30%, transparent), inset 0 0 80px color-mix(in oklch, var(--flare) 18%, transparent); }
.bs-star { position: relative; width: auto; height: min(52vh, 34rem); max-width: 80vw; object-fit: contain;
  filter: drop-shadow(0 30px 50px color-mix(in oklch, var(--night) 80%, transparent)) drop-shadow(0 0 30px color-mix(in oklch, var(--flare) 30%, transparent));
  will-change: transform; }
.s-hero.is-developing .bs-star { animation: bs-rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) both 0.5s; }
@keyframes bs-rise { from { opacity: 0; transform: translateY(8%) scale(0.96); } to { opacity: 1; transform: none; } }
.s-hero h1 { font-size: clamp(3.2rem, 1rem + 10vw, 12rem); max-width: none; white-space: nowrap; letter-spacing: 0.01em; line-height: 0.82; }
.bs-hud { position: absolute; inset: clamp(4.5rem, 8vw, 6rem) var(--gutter) var(--space-5); z-index: 3; pointer-events: none;
  font-family: var(--font-body); font-size: var(--step--1); letter-spacing: 0.3em; color: color-mix(in oklch, var(--bone) 70%, transparent); }
.bs-hud i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--flare); }
.bs-hud i:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }
.bs-hud i:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }
.bs-hud i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.bs-hud i:nth-child(4) { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.bs-read { position: absolute; top: 4px; }
.bs-read--l { left: 34px; } .bs-read--r { right: 34px; display: flex; align-items: center; gap: 0.6em; }
.bs-read b { width: 8px; height: 8px; border-radius: 50%; background: var(--flare); animation: bs-blink 1.2s steps(2) 8; }
@keyframes bs-blink { 50% { opacity: 0; } }
.brand-logo { width: 40px; height: 40px; border-radius: 8px; display: block; }
@media (max-width: 600px) { .bs-read { display: none; } .bs-star { height: 38vh; } .s-hero h1 { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .bs-read b { animation: none; } }

/* Apex: skewed broadcast buttons and slash cuts. Mono and Manifesto: thick rules, outline words, a ticker band */
.btn--primary { clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding-inline: var(--space-6); }
.btn--primary:hover { transform: translateY(-2px); }
.s-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.07;
  background: repeating-linear-gradient(-55deg, transparent 0 22px, var(--flare) 22px 24px); mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000); }
.s-hero .hero__kicker { color: var(--flare); }
.bs-ticker { overflow: hidden; background: var(--flare); color: var(--flare-fg); border-block: 3px solid var(--night); transform: rotate(-1.2deg); margin-block: -0.6rem; position: relative; z-index: 2; }
.bs-ticker div { display: flex; gap: 1.2em; width: max-content; padding-block: 0.35em; font-family: var(--font-display); font-size: var(--step-3); line-height: 1; animation: bs-tick 28s linear infinite; }
.bs-ticker em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--flare-fg); }
@keyframes bs-tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bs-ticker div { animation: none; } }
.section__head { border-block-start: 6px solid var(--color-fg); padding-block-start: var(--space-4); }
.section__head h2 { font-size: var(--step-4); line-height: 0.9; }
/* the crew sheet runs full width */
.gallery__grid, .gallery__row { display: block; }
.gallery__fig { max-width: none; width: 100%; }
.gallery__fig .media, .gallery__fig img { aspect-ratio: auto; height: auto; width: 100%; object-fit: contain; }
/* crew lineup: nine cut out poses on one stage line */
.bs-crew { padding-block: var(--section-pad); background: radial-gradient(60% 50% at 50% 100%, color-mix(in oklch, var(--flare) 18%, transparent), transparent 70%); }
.bs-crew h2 { font-size: var(--step-4); line-height: 0.9; border-block-start: 6px solid var(--color-fg); padding-block-start: var(--space-4); margin-block-end: var(--space-6); }
.bs-crew ul { list-style: none; margin: 0; padding: 0 0 var(--space-3); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-2); border-block-end: 2px solid color-mix(in oklch, var(--flare) 60%, transparent); }
.bs-crew li { flex: 1 1 0; display: grid; justify-items: center; gap: var(--space-2); }
.bs-crew img { width: 100%; max-width: 120px; height: auto; transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.5)); }
.bs-crew li:hover img { transform: translateY(-14px) rotate(-4deg) scale(1.08); }
.bs-crew span { font-family: var(--font-body); font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-fg-muted); white-space: nowrap; }
@media (max-width: 760px) { .bs-crew ul { flex-wrap: wrap; justify-content: center; row-gap: var(--space-5); } .bs-crew li { flex: 0 0 30%; } .bs-crew span { font-size: 0.7rem; letter-spacing: 0.1em; } }
.bs-crew img { width: auto; max-width: 100%; height: clamp(9rem, 14vw, 13rem); object-fit: contain; }
@media (max-width: 760px) { .bs-crew img { height: 9rem; } }

/* ===== push: crime scene tapes ===== */
.bs-tapes { position: relative; height: clamp(9rem, 16vw, 14rem); margin-block: calc(clamp(9rem, 16vw, 14rem) / -2); z-index: 5; pointer-events: none; overflow: hidden; }
.bs-tape { position: absolute; inset-inline: -10%; top: 50%; overflow: hidden; color: var(--flare-fg);
  background:
    repeating-linear-gradient(-45deg, var(--flare-fg) 0 14px, var(--flare) 14px 28px) top / 100% 8px no-repeat,
    repeating-linear-gradient(-45deg, var(--flare-fg) 0 14px, var(--flare) 14px 28px) bottom / 100% 8px no-repeat,
    var(--flare);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.55); }
.bs-tape--a { transform: translateY(-50%) rotate(-4deg); }
.bs-tape--b { transform: translateY(-50%) rotate(3deg); filter: brightness(0.85); z-index: -1; }
.bs-tape div { display: flex; align-items: center; gap: 1.1em; width: max-content; padding-block: 0.85em 0.75em; font-family: var(--font-display); font-size: var(--step-2); letter-spacing: 0.08em; line-height: 1; animation: bs-tick 40s linear infinite; }
.bs-tape--b div { animation-direction: reverse; animation-duration: 55s; }
.bs-tape b { width: 0.55em; height: 0.55em; background: var(--flare-fg); transform: rotate(45deg); flex: none; }

/* ===== push: hero monogram and scroll zoom ===== */
.bs-mono { position: absolute; left: 50%; top: clamp(1rem, 4vh, 3rem); transform: translate(-50%, 0); font-family: var(--font-display); font-size: clamp(16rem, 42vw, 40rem); line-height: 0.8; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 3px color-mix(in oklch, var(--flare) 45%, transparent); opacity: 0.55; will-change: transform; }
.bs-js .s-hero .hero__type { opacity: calc(1 - var(--bs-z, 0) * 1.4); transform: translateY(calc(var(--bs-z, 0) * -60px)); }

/* ===== push: crew on a dark stage with a spotlight ===== */
.bs-crew { position: relative; isolation: isolate; padding-block: clamp(10rem, 16vw, 14rem) var(--section-pad); background: var(--night); }
.bs-crew::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
  background: radial-gradient(260px 260px at var(--sx, 50%) var(--sy, 50%), transparent 0, transparent 40%, rgb(0 0 0 / 0.72) 100%); }
.bs-crew.is-lit::after { opacity: 1; }
.bs-crew::before { content: ""; position: absolute; inset: auto 0 0; height: 60%; z-index: -1; background: radial-gradient(50% 60% at 50% 100%, color-mix(in oklch, var(--flare) 28%, transparent), transparent 75%); }
.bs-crew h2 { font-size: clamp(3rem, 1rem + 8vw, 9rem); }
.bs-crew h2::after { content: " (9)"; color: var(--flare); font-size: 0.4em; vertical-align: super; }
.bs-js .bs-crew li { opacity: 0; transform: translateY(60px) scale(0.9); transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); }
.bs-crew.is-in li { opacity: 1; transform: none; }
.bs-crew.is-in li:nth-child(2) { transition-delay: 0.06s; } .bs-crew.is-in li:nth-child(3) { transition-delay: 0.12s; }
.bs-crew.is-in li:nth-child(4) { transition-delay: 0.18s; } .bs-crew.is-in li:nth-child(5) { transition-delay: 0.24s; }
.bs-crew.is-in li:nth-child(6) { transition-delay: 0.3s; } .bs-crew.is-in li:nth-child(7) { transition-delay: 0.36s; }
.bs-crew.is-in li:nth-child(8) { transition-delay: 0.42s; } .bs-crew.is-in li:nth-child(9) { transition-delay: 0.48s; }
.bs-crew li:hover span { color: var(--flare); }

/* ===== push: the statement ===== */
.bs-say { background: var(--flare); color: var(--flare-fg); padding-block: clamp(4rem, 10vw, 9rem); overflow: hidden; }
.bs-say p { margin: 0; max-width: none; text-align: center; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(3.5rem, 1rem + 12vw, 14rem); line-height: 0.85; letter-spacing: -0.01em; }
.bs-say em { font-style: normal; color: transparent; -webkit-text-stroke: 3px var(--flare-fg); }
.bs-say__hot { display: inline-block; background: var(--flare-fg); color: var(--flare); padding-inline: 0.12em; transform: rotate(-3deg); }
@media (max-width: 600px) { .bs-say p span, .bs-say p em { display: block; } .bs-tape div { font-size: var(--step-1); } }
@media (prefers-reduced-motion: reduce) { .bs-tape div { animation: none; } }

/* ===== mobile pass ===== */
/* the header blur made it the containing block for the fixed drawer, squashing the menu: drop it */
.site-header { backdrop-filter: none; background: color-mix(in oklch, var(--night) 94%, transparent); }
.nav__drawer { background: var(--night); justify-content: stretch; }
.nav__panel { width: 100%; height: 100svh; background:
    url("/brand/mascot.png") right -2rem bottom -1rem / auto 52svh no-repeat,
    radial-gradient(80% 50% at 80% 100%, color-mix(in oklch, var(--flare) 30%, transparent), transparent 70%),
    var(--night);
  box-shadow: none; padding: var(--space-5) var(--gutter); align-content: start; }
.nav__panel ul a { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2.6rem, 13vw, 4.5rem); line-height: 1; padding-block: var(--space-2); border-block-end: 2px solid var(--night-line); color: var(--bone); }
.nav__panel ul a[aria-current="page"] { color: var(--flare); }
.nav__drawer:not([hidden]) .nav__panel li { animation: bs-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nav__drawer:not([hidden]) .nav__panel li:nth-child(2) { animation-delay: 0.06s; }
.nav__drawer:not([hidden]) .nav__panel li:nth-child(3) { animation-delay: 0.12s; }
.nav__drawer:not([hidden]) .nav__panel li:nth-child(4) { animation-delay: 0.18s; }
@keyframes bs-in { from { opacity: 0; transform: translateX(-30px); } }
.bs-say__hot { display: inline-block !important; }

@media (max-width: 760px) {
  /* hero: the mascot and title own the screen */
  .s-hero { min-height: 100svh; }
  .bs-star { height: 46svh; }
  .bs-ring { width: 84vw; top: 6rem; }
  .bs-mono { font-size: 78vw; top: 3rem; }
  .s-hero h1 { font-size: 19vw; line-height: 0.82; }
  .s-hero .hero__answer { font-size: var(--step-0); }
  .s-hero .btn--primary { width: 100%; justify-content: center; min-height: 3.5rem; font-size: var(--step-0); }
  /* crew: a swipeable lineup, big characters, snap per pose */
  .bs-crew { padding-block-start: 8rem; }
  .bs-crew h2 { font-size: 16vw; }
  .bs-crew ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-5); padding-inline: 10vw; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .bs-crew ul::-webkit-scrollbar { display: none; }
  .bs-crew li { flex: 0 0 56vw; scroll-snap-align: center; }
  .bs-crew img { height: 18rem; }
  .bs-crew span { font-size: var(--step-0); letter-spacing: 0.2em; color: var(--flare); }
  .bs-crew h2 + ul::before { content: none; }
  .bs-crew .wrap::after { content: "Swipe the crew"; display: block; margin-block-start: var(--space-3); text-align: center; font-size: var(--step--1); letter-spacing: 0.3em; text-transform: uppercase; color: var(--bone-dim); }
  /* statement: stacked, full bleed */
  .bs-say p { font-size: 26vw; line-height: 0.82; }
  .bs-say em { -webkit-text-stroke: 2px var(--flare-fg); }
  .bs-tapes { height: 8rem; margin-block: -4rem; }
  .bs-tape div { font-size: var(--step-0); padding-block: 0.7em 0.6em; }
}
/* always dark, so the theme switch has nothing to do */
.nav__tools .nav__icon[aria-pressed] { display: none; }
@media (max-width: 760px) { .s-hero h1 { font-size: 16.5vw; } .bs-crew img { height: 15rem; } }