/* =========================================================================
   STUDIO NINE — GLOBAL CSS
   Design tokens, base, typography, layout, components, transitions.
   All custom classes are namespaced `s9-` for XTheme compatibility later.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Color — dark by default */
  --s9-bg: #0A0A0A;
  --s9-bg-2: #121212;
  --s9-bg-3: #181818;
  --s9-fg: #FAFAFA;
  --s9-fg-mute: #B5B5B5;
  --s9-mute: #7A7A7A;
  --s9-line: rgba(250, 250, 250, 0.10);
  --s9-line-strong: rgba(250, 250, 250, 0.22);

  /* Brand quartet:
       --s9-bg + --s9-fg  (near-black + off-white)
       --s9-accent        = lime neon — fills/buttons/strokes (always)
       --s9-blue          = electric ultramarine — companion accent (always)
     --s9-accent-text rebinds per theme: lime on dark, blue on light.
     Both stay 100% saturated — single-hex, but the active accent-as-text
     swaps between the two for surface contrast. */
  --s9-accent: #D4FF3F;
  --s9-accent-ink: #0A0A0A;
  --s9-blue: #2A2AFF;
  --s9-accent-text: var(--s9-accent);

  /* Header scrolled bg — theme-aware so the navbar reads on both surfaces */
  --s9-header-scrolled-bg: rgba(10, 10, 10, 0.72);

  /* Alt-section tokens — for the contrasting-section rhythm (manifesto,
     philosophy, values, outcome). In dark mode these are a SUBTLE LIFT
     darker (still dark) so we never flip to cream. Always light text. */
  --s9-light-bg:    #161616;
  --s9-light-bg-2:  #1F1F1F;
  --s9-light-fg:    #FAFAFA;
  --s9-light-mute:  #9A9A9A;
  --s9-light-line:  rgba(250, 250, 250, 0.08);

  /* Type families */
  --s9-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --s9-font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --s9-font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --s9-font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale — calmer than v1; everything fits the viewport */
  --s9-size-xs:    0.75rem;
  --s9-size-sm:    0.875rem;
  --s9-size-base:  1rem;
  --s9-size-lg:    1.125rem;
  --s9-size-xl:    clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --s9-size-2xl:   clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --s9-size-3xl:   clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  --s9-size-4xl:   clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
  --s9-size-5xl:   clamp(3rem, 2.2rem + 3.4vw, 5rem);
  --s9-size-6xl:   clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --s9-size-7xl:   clamp(4rem, 2.8rem + 6vw, 8.5rem);

  /* Spacing */
  --s9-space-1:  0.25rem;
  --s9-space-2:  0.5rem;
  --s9-space-3:  0.75rem;
  --s9-space-4:  1rem;
  --s9-space-5:  1.5rem;
  --s9-space-6:  2rem;
  --s9-space-7:  3rem;
  --s9-space-8:  4rem;
  --s9-space-9:  6rem;
  --s9-space-10: 8rem;
  --s9-space-11: 12rem;

  /* Layout */
  --s9-container-max: 1440px;
  --s9-gutter: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
  --s9-header-h: 76px;

  /* Radii */
  --s9-r-sm: 4px;
  --s9-r-md: 10px;
  --s9-r-lg: 20px;
  --s9-r-pill: 999px;

  /* Motion */
  --s9-ease:        cubic-bezier(0.6, 0.05, -0.01, 0.9);
  --s9-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --s9-ease-curtain: cubic-bezier(0.76, 0, 0.24, 1);
  --s9-d-fast:  200ms;
  --s9-d-base:  400ms;
  --s9-d-slow:  800ms;
  --s9-d-curtain: 700ms;

  /* Z-index */
  --s9-z-cursor:  9999;
  --s9-z-curtain: 9500;
  --s9-z-loader:  9000;
  --s9-z-menu:    8000;
  --s9-z-header:  1000;
}

/* -------------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: clip; /* clip not hidden — keeps sticky working */
}

body {
  background: var(--s9-bg);
  color: var(--s9-fg);
  font-family: var(--s9-font-body);
  font-size: var(--s9-size-base);
  line-height: 1.5;
  font-weight: 400;
  overflow-x: clip;
  position: relative;
  min-height: 100vh;
}

img, video, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; transition: color var(--s9-d-fast) var(--s9-ease); }

button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }

input, textarea, select { font: inherit; color: inherit; background: transparent; border: 0; outline: 0; }

/* Native fieldset/legend ship with browser borders + spacing — wipe them */
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend   { padding: 0; margin: 0; display: block; }

ul, ol { list-style: none; }

::selection { background: var(--s9-accent); color: var(--s9-accent-ink); }

@media (hover: none) {
  .s9-cursor { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   3. AMBIENT GRAIN — adds quiet texture to the dark background
   ------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* -------------------------------------------------------------------------
   4. TYPOGRAPHY
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--s9-font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  /* Prevent descender/ascender clipping on dense type */
  padding-block: 0.04em;
}

.s9-display {
  font-family: var(--s9-font-display);
  font-weight: 700;
  font-size: var(--s9-size-7xl);
  line-height: 0.96;
  letter-spacing: -0.035em;
  padding-block: 0.06em;
}

.s9-h1 { font-size: var(--s9-size-6xl); line-height: 0.98; letter-spacing: -0.03em; padding-block: 0.05em; }
.s9-h2 { font-size: var(--s9-size-5xl); line-height: 1.02; letter-spacing: -0.025em; padding-block: 0.04em; }
.s9-h3 { font-size: var(--s9-size-4xl); line-height: 1.04; letter-spacing: -0.02em; }
.s9-h4 { font-size: var(--s9-size-3xl); line-height: 1.1; letter-spacing: -0.015em; }
.s9-h5 { font-size: var(--s9-size-2xl); line-height: 1.2; letter-spacing: -0.01em; }

.s9-eyebrow {
  font-family: var(--s9-font-mono);
  font-size: var(--s9-size-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s9-mute);
}
.s9-eyebrow--accent { color: var(--s9-accent-text); }

.s9-lead {
  font-size: var(--s9-size-xl);
  line-height: 1.4;
  color: var(--s9-fg-mute);
  max-width: 60ch;
  letter-spacing: -0.005em;
}

.s9-body { font-size: var(--s9-size-base); line-height: 1.6; }
.s9-body--lg { font-size: var(--s9-size-lg); line-height: 1.55; }
.s9-meta { font-family: var(--s9-font-mono); font-size: var(--s9-size-sm); color: var(--s9-mute); letter-spacing: 0.02em; }

/* SERIF ITALIC EMPHASIS — the premium-pair that lifts the whole site.
   Use <em> inside display headings, or .s9-em. Optical size kept conservative
   (1.04em) to avoid descender overflow against the sans baseline. */
.s9-em,
.s9-display em,
.s9-h1 em, .s9-h2 em, .s9-h3 em, .s9-h4 em, .s9-h5 em,
h1 em, h2 em, h3 em, h4 em {
  font-family: var(--s9-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  font-size: 1.04em;
  line-height: inherit;
  color: var(--s9-accent-text);
  -webkit-font-smoothing: antialiased;
}

/* When italic-em is used inside a paragraph (body type), use serif italic
   but at body weight + size — for prose flair. */
.s9-post-body em,
p em {
  font-family: var(--s9-font-serif);
  font-style: italic;
  font-weight: 400;
}

.s9-italic { font-family: var(--s9-font-serif); font-style: italic; font-weight: 400; }
.s9-accent { color: var(--s9-accent-text); }
.s9-mute   { color: var(--s9-mute); }

/* -------------------------------------------------------------------------
   5. LAYOUT
   ------------------------------------------------------------------------- */
.s9-container {
  width: 100%;
  max-width: var(--s9-container-max);
  margin-inline: auto;
  padding-inline: var(--s9-gutter);
  position: relative;
  z-index: 2; /* sit above ambient grain */
}

.s9-container--wide   { max-width: 1680px; }
.s9-container--narrow { max-width: 880px; }

.s9-section {
  padding-block: clamp(4rem, 8vw, 9rem);
  position: relative;
}
.s9-section--tight { padding-block: clamp(3rem, 5vw, 5rem); }
.s9-section--xl    { padding-block: clamp(6rem, 12vw, 13rem); }

.s9-section--light {
  background: var(--s9-light-bg);
  color: var(--s9-light-fg);
}
.s9-section--light .s9-mute,
.s9-section--light .s9-eyebrow { color: var(--s9-light-mute); }
.s9-section--light .s9-lead { color: var(--s9-light-mute); }

.s9-grid { display: grid; gap: var(--s9-gutter); }
.s9-grid--2  { grid-template-columns: repeat(2, 1fr); }
.s9-grid--3  { grid-template-columns: repeat(3, 1fr); }
.s9-grid--4  { grid-template-columns: repeat(4, 1fr); }
.s9-grid--12 { grid-template-columns: repeat(12, 1fr); }

@media (max-width: 900px) {
  .s9-grid--2, .s9-grid--3, .s9-grid--4 { grid-template-columns: 1fr; }
  .s9-grid--12 { grid-template-columns: repeat(6, 1fr); }
}

.s9-stack { display: flex; flex-direction: column; }
.s9-stack > * + *      { margin-top: var(--s9-space-4); }
.s9-stack--lg > * + *  { margin-top: var(--s9-space-6); }
.s9-stack--xl > * + *  { margin-top: var(--s9-space-8); }

.s9-row { display: flex; align-items: center; gap: var(--s9-space-4); }
.s9-row--between { justify-content: space-between; }
.s9-row--wrap    { flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   6. COMPONENTS
   ------------------------------------------------------------------------- */

/* Buttons */
.s9-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s9-space-3);
  padding: 0.95rem 1.4rem;
  font-family: var(--s9-font-body);
  font-size: var(--s9-size-base);
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--s9-r-pill);
  border: 1px solid var(--s9-line-strong);
  background: transparent;
  color: var(--s9-fg);
  transition:
    background var(--s9-d-fast) var(--s9-ease),
    color var(--s9-d-fast) var(--s9-ease),
    border-color var(--s9-d-fast) var(--s9-ease),
    transform var(--s9-d-fast) var(--s9-ease);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.s9-btn:hover {
  background: var(--s9-fg);
  color: var(--s9-bg);
  border-color: var(--s9-fg);
}
.s9-btn:active { transform: scale(0.98); }

.s9-btn--accent { background: var(--s9-accent); color: var(--s9-accent-ink); border-color: var(--s9-accent-text); }
.s9-btn--accent:hover { background: var(--s9-fg); color: var(--s9-bg); border-color: var(--s9-fg); }

.s9-btn--ghost { border-color: transparent; }
.s9-btn--ghost:hover { background: rgba(255,255,255,0.06); color: var(--s9-fg); border-color: transparent; }

.s9-btn--lg { padding: 1.15rem 1.75rem; font-size: var(--s9-size-lg); }
.s9-btn--sm { padding: 0.55rem 0.95rem; font-size: var(--s9-size-sm); }

.s9-btn .s9-btn__arrow { transition: transform var(--s9-d-fast) var(--s9-ease); display: inline-block; }
.s9-btn:hover .s9-btn__arrow { transform: translateX(4px); }

/* Tags */
.s9-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s9-space-2);
  padding: 0.375rem 0.7rem;
  font-family: var(--s9-font-mono);
  font-size: var(--s9-size-xs);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--s9-line);
  border-radius: var(--s9-r-pill);
  color: var(--s9-fg-mute);
  background: transparent;
}
.s9-tag--solid { background: var(--s9-bg-3); border-color: transparent; }
.s9-tag--accent { background: var(--s9-accent); color: var(--s9-accent-ink); border-color: transparent; }

/* Number markers */
.s9-num {
  font-family: var(--s9-font-mono);
  font-size: var(--s9-size-sm);
  font-weight: 400;
  color: var(--s9-mute);
  letter-spacing: 0.04em;
}
.s9-num--lg { font-size: var(--s9-size-base); }

/* Dividers */
.s9-divider { height: 1px; background: var(--s9-line); width: 100%; }
.s9-divider--strong { background: var(--s9-line-strong); }

/* Marquee — calmer + larger spacing for premium feel */
.s9-marquee {
  overflow: hidden;
  width: 100%;
  display: flex;
  white-space: nowrap;
  user-select: none;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.s9-marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: clamp(2rem, 5vw, 5rem);
  animation: s9-marquee 60s linear infinite;
  padding-right: clamp(2rem, 5vw, 5rem);
}
.s9-marquee:hover .s9-marquee__track { animation-play-state: paused; }
@keyframes s9-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 800ms var(--s9-ease-out),
    transform 800ms var(--s9-ease-out);
  transition-delay: var(--s9-reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-revealed { transform: translateX(0); }

/* Word-level reveal for headlines — fade-up. No overflow mask, so descenders
   (italic g, y, p tails) display correctly. */
.s9-reveal-words .s9-word {
  display: inline-block;
  vertical-align: baseline;
}
.s9-reveal-words .s9-word__inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 700ms var(--s9-ease-out),
    transform 700ms var(--s9-ease-out);
  transition-delay: var(--s9-word-delay, 0ms);
  will-change: opacity, transform;
}
.s9-reveal-words.is-revealed .s9-word__inner {
  opacity: 1;
  transform: translateY(0);
}

/* Cursor */
.s9-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--s9-accent);
  border-radius: var(--s9-r-pill);
  pointer-events: none;
  z-index: var(--s9-z-cursor);
  transform: translate(-50%, -50%);
  transition:
    width var(--s9-d-fast) var(--s9-ease),
    height var(--s9-d-fast) var(--s9-ease),
    background var(--s9-d-fast) var(--s9-ease);
  mix-blend-mode: difference;
}
.s9-cursor.is-hover {
  width: 48px;
  height: 48px;
}

/* Preloader (first visit only) */
.s9-loader {
  position: fixed;
  inset: 0;
  z-index: var(--s9-z-loader);
  background: var(--s9-bg);
  display: grid;
  place-items: center;
  transition: opacity 600ms var(--s9-ease), visibility 600ms var(--s9-ease);
}
.s9-loader.is-done { opacity: 0; visibility: hidden; }
.s9-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s9-space-5);
}
.s9-loader__brand {
  height: clamp(28px, 4vw, 44px);
  opacity: 0.85;
}
.s9-loader__count {
  font-family: var(--s9-font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--s9-fg);
  font-variant-numeric: tabular-nums;
}
.s9-loader__count::after {
  content: "%";
  font-size: 0.4em;
  vertical-align: super;
  margin-left: 0.1em;
  color: var(--s9-accent-text);
}
.s9-loader__bar {
  width: clamp(160px, 20vw, 280px);
  height: 1px;
  background: var(--s9-line-strong);
  position: relative;
  overflow: hidden;
}
.s9-loader__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--s9-accent);
  transform: scaleX(var(--s9-loader-progress, 0));
  transform-origin: left;
  transition: transform 120ms linear;
}

/* PAGE TRANSITION — pending state set by inline head script BEFORE paint
   so we don't flash content under the curtain. */
html.s9-pending body > main,
html.s9-pending body > header,
html.s9-pending body > .s9-header,
html.s9-pending body > footer,
html.s9-pending body > .s9-footer,
html.s9-pending body > .s9-loader,
html.s9-pending body > .s9-progress { opacity: 0; }
html.s9-pending body .s9-curtain { transform: translateY(0); }
html.s9-pending body .s9-curtain__brand { opacity: 0.8; }

/* PAGE TRANSITION CURTAIN
   Slides up from bottom on out, continues sliding off the top on in
   — feels like one continuous wipe. */
.s9-curtain {
  position: fixed;
  inset: 0;
  background: var(--s9-bg);
  z-index: var(--s9-z-curtain);
  transform: translateY(100%);
  pointer-events: none;
  display: grid;
  place-items: center;
}
.s9-curtain__brand {
  height: clamp(40px, 5vw, 56px);
  opacity: 0;
  transition: opacity 200ms var(--s9-ease) 100ms;
}

/* Outgoing: slide up from bottom to cover */
body.s9-page-out .s9-curtain {
  transform: translateY(0);
  transition: transform var(--s9-d-curtain) var(--s9-ease-curtain);
}
body.s9-page-out .s9-curtain__brand { opacity: 0.8; transition-delay: 280ms; }

/* Incoming: start covered, slide off top */
body.s9-page-in-init .s9-curtain {
  transform: translateY(0);
  transition: none;
}
body.s9-page-in-init .s9-curtain__brand { opacity: 0.8; transition: none; }

body.s9-page-in .s9-curtain {
  transform: translateY(-100%);
  transition: transform var(--s9-d-curtain) var(--s9-ease-curtain);
}
body.s9-page-in .s9-curtain__brand {
  opacity: 0;
  transition: opacity 200ms var(--s9-ease);
}

/* Hide page content during enter init so it doesn't flash before the curtain reveal */
body.s9-page-in-init main,
body.s9-page-in-init .s9-header,
body.s9-page-in-init .s9-footer { opacity: 0; }
body.s9-page-in main,
body.s9-page-in .s9-header,
body.s9-page-in .s9-footer {
  opacity: 1;
  transition: opacity 600ms var(--s9-ease) 200ms;
}

/* Scroll progress */
.s9-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--s9-accent);
  width: var(--s9-progress, 0%);
  z-index: calc(var(--s9-z-header) + 10);
  transition: width 80ms linear;
}

/* Cards */
.s9-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--s9-r-md);
  background: var(--s9-bg-2);
  border: 1px solid var(--s9-line);
  transition: border-color var(--s9-d-fast) var(--s9-ease), transform var(--s9-d-base) var(--s9-ease);
}
.s9-card:hover { border-color: var(--s9-line-strong); }
.s9-card__media {
  aspect-ratio: 16 / 10;
  background: var(--s9-bg-3);
  position: relative;
  overflow: hidden;
}
.s9-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--s9-ease);
}
.s9-card:hover .s9-card__media img { transform: scale(1.04); }
.s9-card__body { padding: var(--s9-space-5) var(--s9-space-5) var(--s9-space-6); }
.s9-card__title {
  font-family: var(--s9-font-display);
  font-size: var(--s9-size-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--s9-space-3);
}

/* Hide any leftover placeholder containers (until real images supplied) */
.s9-cs-hero-image:has(> .s9-placeholder),
.s9-cs-gallery:has(.s9-placeholder),
.s9-pillar__media:has(> .s9-placeholder),
.s9-founder__photo:has(> .s9-placeholder) { display: none !important; }
.s9-index__preview .s9-placeholder,
.s9-work-row__preview .s9-placeholder { display: none; }
/* Collapse founder grid to single column when photo is hidden */
.s9-founder:has(> .s9-founder__photo .s9-placeholder) { grid-template-columns: 1fr; }

/* Placeholder image */
.s9-placeholder {
  background:
    linear-gradient(135deg, rgba(212,255,63,0.04) 0%, transparent 50%, rgba(212,255,63,0.04) 100%),
    linear-gradient(135deg, #131313 0%, #1d1d1d 50%, #131313 100%);
  background-size: 200% 200%, 200% 200%;
  animation: s9-shimmer 6s ease infinite;
  display: grid;
  place-items: center;
  color: var(--s9-mute);
  font-family: var(--s9-font-mono);
  font-size: var(--s9-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: var(--s9-space-5);
}
@keyframes s9-shimmer {
  0%, 100% { background-position: 0% 50%, 0% 50%; }
  50%      { background-position: 100% 50%, 100% 50%; }
}

/* Link with arrow */
.s9-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s9-space-2);
  font-family: var(--s9-font-body);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap var(--s9-d-fast) var(--s9-ease);
}
.s9-link-arrow:hover { gap: var(--s9-space-4); }
.s9-link-arrow::after { content: "↗"; display: inline-block; }

/* -------------------------------------------------------------------------
   7. UTILITIES
   ------------------------------------------------------------------------- */
.s9-text-center { text-align: center; }
.s9-flex-1 { flex: 1; }
.s9-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.s9-mt-0 { margin-top: 0 !important; }
.s9-mt-4 { margin-top: var(--s9-space-4); }
.s9-mt-6 { margin-top: var(--s9-space-6); }
.s9-mt-8 { margin-top: var(--s9-space-8); }
.s9-mt-9 { margin-top: var(--s9-space-9); }

body.s9-no-scroll { overflow: hidden; }

/* =========================================================================
   THEME SYSTEM — light/dark
   The default ":root" tokens above describe DARK mode. Light mode rebinds
   the same tokens via [data-theme="light"]. Note: --s9-light-bg etc. mean
   "alternate-flip section bg" — they invert in light mode so the rhythm of
   contrasting sections still works in both themes.
   ========================================================================= */
:root[data-theme="light"] {
  --s9-bg:          #F4F2EB;
  --s9-bg-2:        #ECEAE0;
  --s9-bg-3:        #DFDDD2;
  --s9-fg:          #0A0A0A;
  --s9-fg-mute:     #4A4A4A;
  --s9-mute:        #707070;
  --s9-line:        rgba(10, 10, 10, 0.10);
  --s9-line-strong: rgba(10, 10, 10, 0.22);

  /* Light mode: bright neon is unreadable as text. Use the brand blue
     as the accent-text companion (same color the cursor naturally produces
     on light backgrounds via mix-blend-mode: difference). */
  --s9-accent-text: var(--s9-blue);

  /* Light-mode scrolled header — cream tint instead of dark */
  --s9-header-scrolled-bg: rgba(244, 242, 235, 0.78);

  /* Alt-flip sections in light mode = full dark for drama. Light mode
     benefits from bold dark moments; light mode never has "extra-light"
     sections — that would have no rhythm. */
  --s9-light-bg:    #0A0A0A;
  --s9-light-bg-2:  #121212;
  --s9-light-fg:    #FAFAFA;
  --s9-light-mute:  #B5B5B5;
  --s9-light-line:  rgba(250, 250, 250, 0.10);
}

/* Logo PNG is white-on-transparent (suits dark mode). In light mode invert
   so the wordmark reads as black on cream — except inside dark .s9-section--light
   blocks where we invert back. */
:root[data-theme="light"] .s9-logo__img,
:root[data-theme="light"] .s9-loader__brand,
:root[data-theme="light"] .s9-curtain__brand,
:root[data-theme="light"] .s9-footer__wordmark img {
  filter: invert(1);
}
:root[data-theme="light"] .s9-section--light .s9-logo__img,
:root[data-theme="light"] .s9-section--light .s9-footer__wordmark img {
  filter: none;
}

/* Adapt the ambient grain blend mode for light mode so it doesn't look muddy */
:root[data-theme="light"] body::before {
  mix-blend-mode: multiply;
  opacity: 0.04;
}

/* Subtle color transitions when toggling theme */
html, body, .s9-header, .s9-section--light, .s9-footer,
.s9-card, .s9-engagement, .s9-contact-aside,
.s9-cs-outcome, .s9-manifesto, .s9-philosophy, .s9-values {
  transition:
    background-color 280ms var(--s9-ease),
    border-color 280ms var(--s9-ease),
    color 280ms var(--s9-ease);
}

/* =========================================================================
   ICON BUTTONS — minimal, interactive, theme-aware
   Used in header for theme toggle + fullscreen toggle.
   ========================================================================= */
.s9-header__icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.s9-icon-btn {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--s9-r-pill);
  border: 1px solid transparent;
  color: var(--s9-fg-mute);
  position: relative;
  cursor: pointer;
  transition:
    color var(--s9-d-fast) var(--s9-ease),
    background var(--s9-d-fast) var(--s9-ease),
    border-color var(--s9-d-fast) var(--s9-ease),
    transform var(--s9-d-fast) var(--s9-ease);
}
.s9-icon-btn:hover {
  color: var(--s9-fg);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--s9-line);
}
:root[data-theme="light"] .s9-icon-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
.s9-icon-btn:active { transform: scale(0.94); }
.s9-icon-btn .s9-icon {
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  transition:
    opacity var(--s9-d-fast) var(--s9-ease),
    transform 400ms var(--s9-ease-out);
}
/* Theme toggle: sun visible by default (dark mode), moon visible in light mode */
.s9-icon--sun  { opacity: 1; transform: rotate(0); }
.s9-icon--moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root[data-theme="light"] .s9-icon--sun  { opacity: 0; transform: rotate(90deg) scale(0.6); }
:root[data-theme="light"] .s9-icon--moon { opacity: 1; transform: rotate(0); }

/* Fullscreen toggle: enter visible by default, exit visible while in fullscreen */
.s9-icon--fs-exit  { opacity: 0; transform: scale(0.6); }
body.s9-is-fullscreen .s9-icon--fs-enter { opacity: 0; transform: scale(0.6); }
body.s9-is-fullscreen .s9-icon--fs-exit  { opacity: 1; transform: scale(1); }

/* Hover micro-flourish on fullscreen icon — corners flare outward */
.s9-icon-btn[data-fs-toggle]:hover .s9-icon path { transform-origin: center; }

/* =========================================================================
   BACKGROUND MEDIA — for hero / section bgs (image or video)
   Use: <div class="s9-bg-media s9-bg-media--dim"><video autoplay muted loop>...</video></div>
   ========================================================================= */
.s9-bg-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.s9-bg-media video,
.s9-bg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.s9-bg-media--dim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.85) 100%);
}

/* Ambient mesh gradient — used on hero by default, very subtle */
.s9-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 18% 22%, rgba(212,255,63,0.10), transparent 70%),
    radial-gradient(50% 50% at 82% 78%, rgba(212,255,63,0.06), transparent 70%);
  filter: blur(40px);
  opacity: 0.9;
  animation: s9-glow-drift 28s ease-in-out infinite alternate;
}
:root[data-theme="light"] .s9-hero-glow {
  background:
    radial-gradient(60% 50% at 18% 22%, rgba(212,255,63,0.22), transparent 70%),
    radial-gradient(50% 50% at 82% 78%, rgba(212,255,63,0.16), transparent 70%);
  opacity: 0.7;
}
@keyframes s9-glow-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.05); }
}
.s9-hero { position: relative; }
.s9-hero > .s9-container { position: relative; z-index: 1; }

/* =========================================================================
   ANIMATION UTILITIES — parallax, scale-in
   ========================================================================= */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--s9-parallax-y, 0px), 0);
  transition: transform 80ms linear;
}

[data-scale-in] {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 700ms var(--s9-ease-out),
    transform 700ms var(--s9-ease-out);
  transition-delay: var(--s9-reveal-delay, 0ms);
}
[data-scale-in].is-revealed {
  opacity: 1;
  transform: scale(1);
}

/* Card lift on hover (used on case study cards, journal teaser items, etc.) */
.s9-card,
.s9-work-preview__item {
  transition: transform 500ms var(--s9-ease-out);
}
.s9-card:hover,
.s9-work-preview__item:hover {
  transform: translateY(-4px);
}

/* Image zoom on hover wrappers — applies to media inside hovered cards */
.s9-work-preview__media img,
.s9-card__media img,
.s9-cs-hero-image img {
  transition: transform 1.4s var(--s9-ease);
}
.s9-work-preview__item:hover .s9-work-preview__media img,
.s9-card:hover .s9-card__media img {
  transform: scale(1.05);
}

/* =========================================================================
   MOBILE TIGHTENING — bigger tap targets, smoother menu, safer spacing
   ========================================================================= */
@media (max-width: 900px) {
  :root { --s9-header-h: 64px; }
  .s9-btn { padding: 0.85rem 1.25rem; }
  .s9-btn--lg { padding: 1rem 1.4rem; }
  .s9-icon-btn { width: 40px; height: 40px; }
  /* CTA section breathing on small screens */
  .s9-cta-section { padding-block: clamp(4rem, 16vw, 7rem); }
  /* Footer email lockup wraps cleanly */
  .s9-footer__email { font-size: clamp(2rem, 11vw, 4rem); }
  /* Hero strap: stack the CTA buttons left-aligned */
  .s9-hero__cta { width: 100%; }
  .s9-hero__cta .s9-btn { flex: 1; min-width: 0; justify-content: center; }
}
@media (max-width: 540px) {
  .s9-cta-section__heading { max-width: 14ch; }
  .s9-meta { font-size: 0.75rem; }
}

/* Smoother menu open + entrance stagger for menu items */
.s9-menu__list a {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 500ms var(--s9-ease-out),
    transform 500ms var(--s9-ease-out),
    color var(--s9-d-fast) var(--s9-ease);
}
.s9-menu.is-open .s9-menu__list a {
  opacity: 1;
  transform: translateY(0);
}
.s9-menu.is-open .s9-menu__list li:nth-child(1) a { transition-delay: 80ms; }
.s9-menu.is-open .s9-menu__list li:nth-child(2) a { transition-delay: 140ms; }
.s9-menu.is-open .s9-menu__list li:nth-child(3) a { transition-delay: 200ms; }
.s9-menu.is-open .s9-menu__list li:nth-child(4) a { transition-delay: 260ms; }
.s9-menu.is-open .s9-menu__list li:nth-child(5) a { transition-delay: 320ms; }
.s9-menu__email,
.s9-menu .s9-meta {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 500ms var(--s9-ease-out) 380ms,
    transform 500ms var(--s9-ease-out) 380ms;
}
.s9-menu.is-open .s9-menu__email,
.s9-menu.is-open .s9-meta { opacity: 1; transform: translateY(0); }

/* -------------------------------------------------------------------------
   8. HEADER
   ------------------------------------------------------------------------- */
.s9-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--s9-z-header);
  background: transparent;
  transition:
    background var(--s9-d-base) var(--s9-ease),
    border-color var(--s9-d-base) var(--s9-ease),
    backdrop-filter var(--s9-d-base) var(--s9-ease);
  border-bottom: 1px solid transparent;
}
.s9-header.is-scrolled {
  background: var(--s9-header-scrolled-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--s9-line);
}
.s9-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s9-space-5);
  height: var(--s9-header-h);
}

/* Logo — image-based, image is "white-on-transparent" by default */
.s9-logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding-block: 1.25rem;
  transition: opacity var(--s9-d-fast) var(--s9-ease);
}
.s9-logo:hover { opacity: 0.7; }
.s9-logo__img {
  height: 28px;
  width: auto;
  display: block;
}
@media (min-width: 1280px) {
  .s9-logo__img { height: 32px; }
}

/* On light sections (footer flips, etc.), invert the logo color */
.s9-section--light .s9-logo__img,
.s9-on-light .s9-logo__img { filter: invert(1); }

/* Nav */
/* v2 — header collapses to logo + MENU. Visible nav links removed; everything
   moves into the full-screen menu. The .s9-header__cta + .s9-nav nodes still
   exist in markup but are hidden so we don't have to edit 12 HTML files. */
.s9-nav,
.s9-header__cta { display: none !important; }
.s9-menu-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--s9-font-mono);
  font-size: var(--s9-size-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  width: auto !important;
  min-width: 0 !important;
  height: 40px !important;
  padding: 0 1.1rem !important;
  border: 1px solid var(--s9-line-strong);
  border-radius: var(--s9-r-pill);
  color: var(--s9-fg);
  background: transparent;
  white-space: nowrap;
  transition: background var(--s9-d-fast) var(--s9-ease), color var(--s9-d-fast) var(--s9-ease), border-color var(--s9-d-fast) var(--s9-ease);
}
.s9-menu-toggle:hover { background: var(--s9-fg); color: var(--s9-bg); border-color: var(--s9-fg); }
.s9-menu-toggle::before { content: "Menu"; }
.s9-menu-toggle.is-active::before { content: "Close"; }
.s9-menu-toggle span { display: none !important; }

/* When the menu is open, lift the entire header above the menu so the
   logo + Close toggle remain clickable. Transparent bg so the menu shows
   through behind them. */
body.s9-no-scroll .s9-header {
  z-index: calc(var(--s9-z-menu) + 10) !important;
  background: transparent !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.s9-nav-old {
  display: flex;
  gap: var(--s9-space-6);
  align-items: center;
}
.s9-nav__link {
  font-family: var(--s9-font-body);
  font-size: var(--s9-size-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--s9-fg-mute);
  position: relative;
  padding-block: 4px;
}
.s9-nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--s9-accent);
  transition: width var(--s9-d-fast) var(--s9-ease);
}
.s9-nav__link:hover { color: var(--s9-fg); }
.s9-nav__link:hover::after,
.s9-nav__link.is-active::after { width: 100%; }
.s9-nav__link.is-active { color: var(--s9-fg); }

.s9-header__cta { display: flex; align-items: center; gap: var(--s9-space-3); }

/* Menu toggle */
.s9-menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--s9-line-strong);
  border-radius: var(--s9-r-pill);
  position: relative;
  z-index: calc(var(--s9-z-menu) + 1);
}
.s9-menu-toggle span {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 16px; height: 1.5px;
  background: var(--s9-fg);
  transition: transform var(--s9-d-fast) var(--s9-ease), top var(--s9-d-fast) var(--s9-ease);
}
.s9-menu-toggle span:first-child { top: 17px; }
.s9-menu-toggle span:last-child  { top: 25px; }
.s9-menu-toggle.is-active span:first-child { top: 21px; transform: translateX(-50%) rotate(45deg); }
.s9-menu-toggle.is-active span:last-child  { top: 21px; transform: translateX(-50%) rotate(-45deg); }

@media (max-width: 900px) {
  .s9-nav,
  .s9-header__cta { display: none; }
  .s9-menu-toggle { display: inline-grid; place-items: center; }
}

/* -------------------------------------------------------------------------
   9. FULL-SCREEN MENU
   ------------------------------------------------------------------------- */
.s9-menu {
  position: fixed;
  inset: 0;
  background: var(--s9-bg);
  z-index: var(--s9-z-menu);
  display: flex; flex-direction: column;
  padding: calc(var(--s9-header-h) + var(--s9-space-6)) 0 var(--s9-space-7);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--s9-d-base) var(--s9-ease), visibility var(--s9-d-base) var(--s9-ease);
}
.s9-menu.is-open { opacity: 1; visibility: visible; }
.s9-menu__inner {
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--s9-space-7);
}
.s9-menu__list {
  display: flex; flex-direction: column;
  gap: var(--s9-space-3);
}
.s9-menu__list a {
  display: flex; align-items: baseline; gap: var(--s9-space-4);
  font-family: var(--s9-font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--s9-fg);
  transition: color var(--s9-d-fast) var(--s9-ease);
  padding-block: 0.05em;
}
.s9-menu__list a:hover { color: var(--s9-accent-text); }
.s9-menu__list .s9-num { color: var(--s9-mute); }
.s9-menu__email {
  font-family: var(--s9-font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--s9-fg);
  display: inline-block;
  border-bottom: 2px solid var(--s9-accent);
  padding-bottom: 4px;
}
.s9-menu__email:hover { color: var(--s9-accent-text); }
.s9-menu__icons {
  display: inline-flex;
  gap: 4px;
  margin-top: var(--s9-space-5);
}

/* Hide socials until Simon supplies handles (kept in DOM for easy turn-on) */
.s9-hidden-social { display: none !important; }

/* =========================================================================
   COOKIE CONSENT BANNER — self-hosted, GDPR-friendly, no third-party.
   Shows once until user accepts or declines. Stores choice in localStorage.
   ========================================================================= */
.s9-cookies {
  position: fixed;
  bottom: var(--s9-space-4);
  left: var(--s9-space-4);
  right: var(--s9-space-4);
  max-width: 460px;
  z-index: calc(var(--s9-z-header) + 5);
  background: #0A0A0A;
  color: #FAFAFA;
  border-radius: var(--s9-r-md);
  padding: var(--s9-space-5);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  font-family: var(--s9-font-body);
  font-size: var(--s9-size-sm);
  line-height: 1.5;
  transform: translateY(120%);
  opacity: 0;
  transition:
    transform 600ms var(--s9-ease-out) 600ms,
    opacity 600ms var(--s9-ease-out) 600ms;
}
.s9-cookies.is-shown { transform: translateY(0); opacity: 1; }
.s9-cookies.is-dismissed { transform: translateY(120%); opacity: 0; pointer-events: none; }
.s9-cookies__heading {
  font-family: var(--s9-font-display);
  font-weight: 600;
  font-size: var(--s9-size-lg);
  letter-spacing: -0.015em;
  color: #FAFAFA;
  margin-bottom: var(--s9-space-2);
}
.s9-cookies__body { color: rgba(250,250,250,0.78); margin-bottom: var(--s9-space-4); }
.s9-cookies__body a { color: var(--s9-accent); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.s9-cookies__actions { display: flex; gap: var(--s9-space-2); flex-wrap: wrap; }
.s9-cookies__btn {
  flex: 1;
  min-width: 120px;
  padding: 0.65rem 1rem;
  font-family: var(--s9-font-mono);
  font-size: var(--s9-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--s9-r-pill);
  cursor: pointer;
  transition: background var(--s9-d-fast) var(--s9-ease), color var(--s9-d-fast) var(--s9-ease);
}
.s9-cookies__btn--accept { background: var(--s9-accent); color: var(--s9-accent-ink); border: 1px solid var(--s9-accent); }
.s9-cookies__btn--accept:hover { background: #FAFAFA; color: #0A0A0A; border-color: #FAFAFA; }
.s9-cookies__btn--decline { background: transparent; color: #FAFAFA; border: 1px solid rgba(250,250,250,0.25); }
.s9-cookies__btn--decline:hover { background: rgba(250,250,250,0.08); }
@media (max-width: 540px) {
  .s9-cookies { left: var(--s9-space-3); right: var(--s9-space-3); bottom: var(--s9-space-3); padding: var(--s9-space-4); }
}

/* =========================================================================
   .s9-cream — Adcker-inspired cream page foundation.
   Apply to <body> on any page that should use the cream + dark-flip system.
   Wins over theme tokens for visual consistency across the site.
   ========================================================================= */
body.s9-cream {
  /* Token overrides (cascade-wins over :root + [data-theme="light"]) */
  --s9-bg: #EFEDEA;
  --s9-bg-2: #DFDDD2;
  --s9-bg-3: #D2CFC2;
  --s9-fg: #0A0A0A;
  --s9-fg-mute: #4A4A4A;
  --s9-mute: #707070;
  --s9-line: rgba(10, 10, 10, 0.10);
  --s9-line-strong: rgba(10, 10, 10, 0.22);
  --s9-accent-text: var(--s9-blue);
  --s9-header-scrolled-bg: rgba(244, 242, 235, 0.78);
  /* Alt-flip sections = full dark for drama */
  --s9-light-bg: #0A0A0A;
  --s9-light-bg-2: #161616;
  --s9-light-fg: #FAFAFA;
  --s9-light-mute: #B5B5B5;
  --s9-light-line: rgba(250, 250, 250, 0.10);
  /* Aliases used by home.css cover/pillars/etc. */
  --s9-page-bg: var(--s9-bg);
  --s9-page-fg: var(--s9-fg);
  --s9-page-mute: var(--s9-fg-mute);
  --s9-page-line: var(--s9-line);
  --s9-page-line-strong: var(--s9-line-strong);
  background: var(--s9-bg);
  color: var(--s9-fg);
}
body.s9-cream::before { mix-blend-mode: multiply; opacity: 0.04; }

/* Loader/curtain on cream */
.s9-cream .s9-curtain { background: var(--s9-bg); }
.s9-cream .s9-loader  { background: var(--s9-bg); }
.s9-cream .s9-loader__count { color: var(--s9-fg); }
.s9-cream .s9-loader__brand,
.s9-cream .s9-curtain__brand { filter: invert(1); }
.s9-cream .s9-logo__img { filter: invert(0); }

/* Header — subtle cream tint with backdrop blur. Logo + MENU always visible
   in solid dark, no longer relies on mix-blend (which was rendering too
   faint on some pages). */
.s9-cream .s9-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #0A0A0A;
  border-bottom: 1px solid transparent;
}
.s9-cream .s9-header.is-scrolled {
  background: rgba(239, 237, 234, 0.85) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border-bottom-color: rgba(10, 10, 10, 0.10) !important;
}
.s9-cream .s9-logo__img { filter: invert(1) !important; }
.s9-cream .s9-menu-toggle {
  color: #0A0A0A !important;
  border-color: rgba(10, 10, 10, 0.25) !important;
  background: transparent !important;
}
.s9-cream .s9-menu-toggle:hover {
  background: #0A0A0A !important;
  color: #FAFAFA !important;
  border-color: #0A0A0A !important;
}

/* Full-screen menu stays black-on-white regardless of page */
.s9-cream .s9-menu { background: #0A0A0A; color: #FAFAFA; }
.s9-cream .s9-menu__list a { color: #FAFAFA; }
.s9-cream .s9-menu__list a:hover { color: var(--s9-accent); }
.s9-cream .s9-menu__list .s9-num { color: rgba(250, 250, 250, 0.45); }
.s9-cream .s9-menu__email { color: #FAFAFA; }
.s9-cream .s9-menu__email:hover { color: var(--s9-accent); }
.s9-cream .s9-menu__meta .s9-meta { color: rgba(250, 250, 250, 0.55); }

/* Header overrides while menu is open — invert logo + MENU/Close pill so
   they show against the dark menu underneath. */
body.s9-no-scroll.s9-cream .s9-logo__img { filter: none !important; }
body.s9-no-scroll.s9-cream .s9-menu-toggle {
  color: #FAFAFA !important;
  border-color: rgba(250, 250, 250, 0.4) !important;
}
body.s9-no-scroll.s9-cream .s9-menu-toggle:hover {
  background: #FAFAFA !important;
  color: #0A0A0A !important;
  border-color: #FAFAFA !important;
}

/* Footer flips to full dark on cream pages — Adcker-style */
.s9-cream .s9-footer {
  background: #0A0A0A;
  color: #FAFAFA;
  border-top: 0;
  margin-top: 0;
}
.s9-cream .s9-footer .s9-eyebrow,
.s9-cream .s9-footer .s9-meta { color: rgba(250, 250, 250, 0.55); }
.s9-cream .s9-footer .s9-footer__email { color: #FAFAFA; }
.s9-cream .s9-footer .s9-footer__email .s9-accent { color: var(--s9-accent); }
.s9-cream .s9-footer .s9-footer__links { color: rgba(250, 250, 250, 0.85); }
.s9-cream .s9-footer .s9-footer__links a:hover { color: var(--s9-accent); }
.s9-cream .s9-footer .s9-lead { color: rgba(250, 250, 250, 0.7); }
.s9-cream .s9-footer .s9-footer__wordmark img { opacity: 0.70; filter: none !important; }
/* Wordmark dividers visible on the dark footer (cream-page footer flips to
   #0A0A0A so the default dark-alpha line tokens disappear into it). */
.s9-cream .s9-footer__wordmark {
  border-top-color: rgba(250, 250, 250, 0.10);
  border-bottom-color: rgba(250, 250, 250, 0.10);
}

/* =========================================================================
   MOBILE TIGHTENING for cover hero + showreel + general site
   ========================================================================= */
@media (max-width: 760px) {
  .s9-cover__corner { font-size: 0.6875rem; top: calc(var(--s9-header-h) + 0.75rem); }
  .s9-cover__bar .s9-cover__scroll { display: none; }
  .s9-cover__bar { font-size: 0.65rem; }
  .s9-showreel { height: 130vh; }
  .s9-showreel__frame { width: 88%; }
  .s9-pillar__line { padding-block: 1.25rem; }
  .s9-pillar__title { font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .s9-pillar__arrow { width: 32px; height: 32px; }
  /* Footer email scales tighter for narrow viewports */
  .s9-footer__email { font-size: clamp(1.75rem, 11vw, 3.25rem); }
}
@media (max-width: 480px) {
  .s9-cover__lockup { font-size: clamp(2.75rem, 13vw, 5rem); }
  .s9-cover__lockup .line { white-space: normal; }
  .s9-cover__sub { font-size: 0.6875rem; }
}

/* -------------------------------------------------------------------------
   10. FOOTER
   ------------------------------------------------------------------------- */
.s9-footer {
  background: var(--s9-bg);
  border-top: 1px solid var(--s9-line);
  padding-top: clamp(4rem, 8vw, 8rem);
  padding-bottom: var(--s9-space-6);
  position: relative;
  z-index: 2;
}
.s9-footer__lockup {
  padding-bottom: clamp(3rem, 6vw, 6rem);
  border-bottom: 1px solid var(--s9-line);
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: var(--s9-space-5);
}
.s9-footer__email {
  font-family: var(--s9-font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 6rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--s9-fg);
  padding-block: 0.05em;
}
.s9-footer__email-arrow {
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.45em;
  color: var(--s9-accent-text);
  transition: transform var(--s9-d-fast) var(--s9-ease);
}
.s9-footer__email:hover .s9-footer__email-arrow {
  transform: translate(6px, -6px);
}
.s9-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s9-gutter);
  padding-block: clamp(3rem, 5vw, 5rem);
}
@media (max-width: 900px) { .s9-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .s9-footer__grid { grid-template-columns: 1fr; } }
.s9-footer__col p.s9-eyebrow { margin-bottom: var(--s9-space-4); }
.s9-footer__links {
  display: flex; flex-direction: column;
  gap: var(--s9-space-3);
  font-size: var(--s9-size-base);
  color: var(--s9-fg-mute);
}
.s9-footer__links a:hover { color: var(--s9-accent-text); }

/* -------------------------------------------------------------------------
   CTA SECTION — used at the bottom of most pages just above the footer.
   Generous vertical breathing room, subtle top accent, asymmetric grid on
   wide screens so the headline doesn't float in the middle of nothing.
   ------------------------------------------------------------------------- */
.s9-cta-section {
  padding-block: clamp(6rem, 12vw, 13rem);
  position: relative;
  border-top: 1px solid var(--s9-line);
  text-align: center;
}
.s9-cta-section::before {
  /* Tiny accent tick that sits over the top border, signalling section start */
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: var(--s9-accent);
}
.s9-cta-section__eyebrow {
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
  display: inline-flex;
  align-items: center;
  gap: var(--s9-space-2);
}
.s9-cta-section__heading {
  font-family: var(--s9-font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6.5vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  padding-block: 0.08em;
  max-width: 18ch;
  margin-inline: auto;
  color: var(--s9-fg);
}
.s9-cta-section__sub {
  margin-top: clamp(1.25rem, 2.5vw, 2.25rem);
  font-size: var(--s9-size-xl);
  line-height: 1.45;
  color: var(--s9-fg-mute);
  max-width: 52ch;
  margin-inline: auto;
}
.s9-cta-section__btns {
  display: flex;
  gap: var(--s9-space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
}
/* Subtle bottom row — small meta line that anchors the section before footer */
.s9-cta-section__meta {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s9-space-4);
  font-family: var(--s9-font-mono);
  font-size: var(--s9-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s9-mute);
}
.s9-cta-section__meta::before,
.s9-cta-section__meta::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--s9-line-strong);
}

/* Footer wordmark — uses logo image at oversized scale */
.s9-footer__wordmark {
  padding-block: clamp(2rem, 4vw, 4rem);
  border-top: 1px solid var(--s9-line);
  border-bottom: 1px solid var(--s9-line);
  margin-block: var(--s9-space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.s9-footer__wordmark img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  opacity: 0.05;
}

.s9-footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s9-space-3);
  padding-top: var(--s9-space-5);
}
.s9-footer__bar a:hover { color: var(--s9-accent-text); }