:root {
  /* ---- primitives (raw brand values) ---- */
  --ink: #231F20;
  --ink-soft: #3A3536;
  --red: #ED1C24;
  --red-dark: #C7151C;
  --red-deep: #A81119;
  --red-light: #FF6E63;
  --paper: #F7F6F4;
  --stone: #EDEAE6;
  --muted: #6A6462;
  --white: #FFFFFF;
  --line: rgba(35, 31, 32, 0.13);
  --line-light: rgba(255, 255, 255, 0.18);

  /* ---- dark-theme primitives (Direction B, "cinematic dark") ---- */
  --black: #0E0D0D;
  --panel: #151414;
  --pit: #080808;
  --off-white: #F2F0EE;
  --grey: #8C8683;
  --red-glow: #FF8B82;
  --line-dark: rgba(242, 240, 238, 0.14);

  /* ---- semantic tokens (mirror the Figma Color collection) ---- */
  --surface-page: var(--paper);
  --surface-raised: var(--white);
  --surface-sunken: var(--stone);
  --surface-inverse: var(--ink);
  --text-primary: var(--ink);
  --text-secondary: var(--muted);
  --text-inverse: var(--white);
  --border-default: var(--line);
  --border-on-dark: var(--line-light);
  --border-strong: var(--ink);
  /* Neutral line tokens. Pages that belong to neither service line (home,
     work, method, about, contact) and the header and footer on EVERY page use
     these, so the chrome always reads as one agency. */
  --n-text: var(--ink);
  --n-on-dark: var(--white);
  --n-fill: var(--ink);
  --n-fill-text: var(--white);
  --n-fill-hover: var(--ink-soft);
  --n-fill-on-dark: var(--white);
  --n-fill-on-dark-text: var(--ink);
  --n-mark: var(--red);
  --button-primary-bg: var(--ink);
  --button-primary-text: var(--white);
  /* header over a flat surface, and softened text on an inverse surface.
     These were hardcoded rgba values, which is why nothing could follow a theme. */
  --header-bg: rgba(247, 246, 244, .95);
  --text-inverse-soft: rgba(255, 255, 255, .78);
  --hero-shade: linear-gradient(180deg, rgba(35,31,32,.62) 0%, rgba(35,31,32,.18) 38%, rgba(35,31,32,.88) 100%);
  --on-dark-hairline: rgba(255, 255, 255, .45);
  /* Feature panels: the footer, the CTA band and .section--dark.
     In light these invert to ink. In dark they must NOT invert, or they become
     a blinding white block; they lift to the panel colour instead. */
  --surface-feature: var(--ink);
  --text-on-feature: var(--white);
  --text-on-feature-soft: rgba(255, 255, 255, .74);
  --feature-hairline: rgba(255, 255, 255, .18);

  /* ---- radius / layout ---- */
  --radius-sm: 2px;
  --radius: 2px;
  --pill: 999px;
  --layout-wrap: 1320px;
  --layout-page-padding: clamp(22px, 5vw, 68px);
  --layout-section-y: clamp(80px, 13vw, 180px);
  --wrap: var(--layout-wrap);
  --pad: var(--layout-page-padding);
  --section: var(--layout-section-y);
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
  --hero-vignette: radial-gradient(120% 90% at 50% 20%, rgba(247,246,244,.10) 0%, rgba(20,18,18,.55) 62%, rgba(14,13,13,.88) 100%);
}

/* ----------------------------------------------------------------------------
   Dark theme.
   Only the SEMANTIC tokens are redefined; every primitive above stays put. The
   "inverse" and "on-dark" tokens keep their meaning ("for use on the opposite
   surface"), which is why they swap rather than staying still.
   Defined in a mixin-style list so the explicit toggle and the system
   preference cannot drift apart.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"],
:root[data-theme="dark"] .page-light {
  color-scheme: dark;
  --surface-page: var(--black);
  --surface-raised: var(--panel);
  --surface-sunken: var(--pit);
  --surface-inverse: var(--off-white);
  --text-primary: var(--off-white);
  --text-secondary: var(--grey);
  --text-inverse: var(--ink);
  --border-default: var(--line-dark);
  --border-on-dark: var(--line);
  --border-strong: var(--off-white);
  --n-text: var(--off-white);
  --n-on-dark: var(--off-white);
  --n-fill: var(--off-white);
  --n-fill-text: var(--black);
  --n-fill-hover: var(--white);
  --n-fill-on-dark: var(--off-white);
  --n-fill-on-dark-text: var(--black);
  --n-mark: var(--red);
  --button-primary-bg: var(--off-white);
  --button-primary-text: var(--black);
  --header-bg: rgba(14, 13, 13, .92);
  --text-inverse-soft: rgba(35, 31, 32, .78);
  --hero-shade: linear-gradient(180deg, rgba(14,13,13,.55) 0%, rgba(14,13,13,.20) 38%, rgba(14,13,13,.95) 100%);
  --on-dark-hairline: rgba(35, 31, 32, .32);
  --surface-feature: var(--panel);
  --text-on-feature: var(--off-white);
  --text-on-feature-soft: var(--grey);
  --feature-hairline: var(--line-dark);
  --hero-vignette: radial-gradient(120% 90% at 50% 20%, rgba(14,13,13,.25) 0%, rgba(14,13,13,.82) 70%, rgba(14,13,13,.97) 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"]) .page-light {
    color-scheme: dark;
    --surface-page: var(--black);
    --surface-raised: var(--panel);
    --surface-sunken: var(--pit);
    --surface-inverse: var(--off-white);
    --text-primary: var(--off-white);
    --text-secondary: var(--grey);
    --text-inverse: var(--ink);
    --border-default: var(--line-dark);
    --border-on-dark: var(--line);
    --border-strong: var(--off-white);
    --n-text: var(--off-white);
    --n-on-dark: var(--off-white);
    --n-fill: var(--off-white);
    --n-fill-text: var(--black);
    --n-fill-hover: var(--white);
    --n-fill-on-dark: var(--off-white);
    --n-fill-on-dark-text: var(--black);
    --n-mark: var(--red);
    --button-primary-bg: var(--off-white);
    --button-primary-text: var(--black);
    --header-bg: rgba(14, 13, 13, .92);
    --text-inverse-soft: rgba(35, 31, 32, .78);
    --hero-shade: linear-gradient(180deg, rgba(14,13,13,.55) 0%, rgba(14,13,13,.20) 38%, rgba(14,13,13,.95) 100%);
    --on-dark-hairline: rgba(35, 31, 32, .32);
    --surface-feature: var(--panel);
    --text-on-feature: var(--off-white);
    --text-on-feature-soft: var(--grey);
    --feature-hairline: var(--line-dark);
    --hero-vignette: radial-gradient(120% 90% at 50% 20%, rgba(14,13,13,.25) 0%, rgba(14,13,13,.82) 70%, rgba(14,13,13,.97) 100%);
  }
}

/* ----------------------------------------------------------------------------
   Service-line accent system (build spec 2.1).
   One brand, two lines, and colour is the only variable. A page opts in with
   .line-sport or .line-corporate on <body>; a single card can opt in on its own.
   Components never name a line colour: they read --accent-*, which every scope
   below re-derives from its --line-* values.

   Contrast was measured, not assumed. The spec's own starting points failed in
   two places and were adjusted in lightness only, as the spec instructs:
     sport on ink    #E8475C  4.26  ->  #EA596C  4.77 on ink, 5.68 on near-black
     corporate fill  #0F4C5C  2.04 on near-black  ->  #3FA3B5 with dark text in dark
   ------------------------------------------------------------------------- */
body, .site-header, .site-footer {
  --line-text: var(--n-text);
  --line-on-dark: var(--n-on-dark);
  --line-fill: var(--n-fill);
  --line-fill-text: var(--n-fill-text);
  --line-fill-hover: var(--n-fill-hover);
  --line-fill-on-dark: var(--n-fill-on-dark);
  --line-fill-on-dark-text: var(--n-fill-on-dark-text);
  --line-mark: var(--n-mark);
}
.line-sport {
  --line-text: #C8102E;            /* 5.45 on paper, 5.88 on white */
  --line-on-dark: #EA596C;         /* 4.77 on ink */
  --line-fill: #C8102E;            /* white text 5.88 */
  --line-fill-text: #FFFFFF;
  --line-fill-hover: #A50D26;
  --line-fill-on-dark: #C8102E;
  --line-fill-on-dark-text: #FFFFFF;
  --line-mark: #EA596C;
}
.line-corporate {
  --line-text: #0F4C5C;            /* 8.80 on paper */
  --line-on-dark: #3FA3B5;         /* 5.52 on ink */
  --line-fill: #0F4C5C;            /* white text 9.51 */
  --line-fill-text: #FFFFFF;
  --line-fill-hover: #0B3945;
  --line-fill-on-dark: #3FA3B5;    /* near-black text 6.58 */
  --line-fill-on-dark-text: #0E0D0D;
  --line-mark: #3FA3B5;
}
:root[data-theme="dark"] .line-sport { --line-text: #EA596C; }
:root[data-theme="dark"] .line-corporate { --line-text: #3FA3B5; --line-fill: #3FA3B5; --line-fill-text: #0E0D0D; --line-fill-hover: #5FB6C6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .line-sport { --line-text: #EA596C; }
  :root:not([data-theme="light"]) .line-corporate { --line-text: #3FA3B5; --line-fill: #3FA3B5; --line-fill-text: #0E0D0D; --line-fill-hover: #5FB6C6; }
}
/* Every scope that can change the line re-derives the accents, because a custom
   property built from var() resolves where it is declared, not where it is used. */
body, .line-sport, .line-corporate, .site-header, .site-footer {
  --accent-default: var(--line-text);
  --accent-strong: var(--line-text);
  --accent-hover: var(--line-text);
  --accent-on-dark: var(--line-on-dark);
  --accent-on-feature: var(--line-on-dark);
  --accent-fill: var(--line-fill);
  --accent-fill-hover: var(--line-fill-hover);
  --text-on-accent: var(--line-fill-text);
}
/* On photography and on dark feature panels the on-dark variants take over. */
.hero, .section--dark, .cta-band, .case__headline {
  --accent-default: var(--line-on-dark);
  --accent-strong: var(--line-on-dark);
  --accent-fill: var(--line-fill-on-dark);
  --accent-fill-hover: var(--line-fill-on-dark);
  --text-on-accent: var(--line-fill-on-dark-text);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Poppins", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  font-size: 16px; line-height: 1.75; font-weight: 300;
  color: var(--text-primary); background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }

/* The browser's own [hidden] rule is weaker than any author rule that sets
   display, so components like .case (display: grid) ignore it. The work
   filters rely on el.hidden, so make it win. */
[hidden] { display: none !important; }

/* theme toggle ------------------------------------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; flex: none; order: 2;
  border: 1px solid var(--border-default); border-radius: var(--pill);
  background: transparent; color: currentColor; cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.theme-toggle:hover { border-color: currentColor; }
.theme-toggle:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
/* show the icon for the mode you would switch TO, which is the clearer affordance */
.theme-toggle__moon { display: block; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
}
/* the header sits over the hero image on dark pages, so the control needs to
   read against photography as well as against a flat surface */
.site-header:not(.is-scrolled) .theme-toggle { border-color: var(--border-on-dark); }

a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
address { font-style: normal; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--surface-inverse); color: var(--text-inverse); padding: 10px 16px; text-decoration: none; border-radius: var(--pill); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

.eyebrow { font-size: 10px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 20px; }
.eyebrow--muted { color: var(--text-secondary); }
.title { font-size: clamp(30px, 4.2vw, 46px); margin-bottom: 24px; }
.lead { font-size: 18px; color: var(--text-secondary); }
.section { padding: var(--section) 0; }
.section--tight { padding: clamp(52px, 7vw, 84px) 0; }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }
.section--dark { background: var(--surface-feature); color: var(--text-on-feature); }
.section--dark .title, .section--dark h3 { color: var(--text-on-feature); }
.section--dark .lead, .section--dark p { color: var(--text-on-feature-soft); }
.section--stone { background: var(--surface-sunken); }

/* accent text on ink surfaces uses the lightened accent (AA: 5.85:1) */
.section--dark .eyebrow,
.section--dark .caps li::before,
.section--dark .step__num,
.cta-band .eyebrow { color: var(--accent-on-feature); }
.section--dark .stat { border-top-color: var(--accent-on-feature); }
.section--dark .tile { border-top-color: var(--accent-on-feature); }
/* Inside a feature panel, remap the page-level tokens rather than chasing each
   component: any rule reaching for --text-secondary or --border-default now
   gets the on-panel value automatically. This was a real bug, grey #6A6462 on
   ink measures 2.8, and it predates the redesign. */
.section--dark, .cta-band, .site-footer {
  --text-secondary: var(--text-on-feature-soft);
  --border-default: var(--feature-hairline);
  --accent-strong: var(--accent-on-feature);
}

/* Buttons. Every filled variant pairs its background with the matching text
   token rather than assuming white, because in dark the accent is a LIGHT red
   and white on it is only 2.74. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 30px;
  font: inherit; font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--button-primary-text); background: var(--button-primary-bg);
  border: 1px solid var(--button-primary-bg);
  border-radius: var(--pill); text-decoration: none; cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover {
  background: var(--accent-fill); border-color: var(--accent-fill);
  color: var(--text-on-accent); transform: translateY(-1px);
}
.btn--red { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--text-on-accent); }
.btn--red:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); color: var(--text-on-accent); }
.btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--button-primary-bg); color: var(--button-primary-text); border-color: var(--button-primary-bg); }
.btn--on-dark { background: transparent; color: var(--white); border-color: var(--on-dark-hairline); }
.btn--on-dark:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--small { min-height: 40px; padding: 0 20px; font-size: 10.5px; letter-spacing: .2em; }

.link-arrow { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; letter-spacing: .03em; color: var(--text-primary); text-decoration: none; border-bottom: 1.5px solid var(--accent-default); padding-bottom: 3px; transition: gap .25s var(--ease); }
.link-arrow:hover { gap: 14px; }
.section--dark .link-arrow { color: var(--text-on-feature); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.site-header__inner { display: flex; align-items: center; gap: 22px; height: 100px; }
.brand { display: block; position: relative; width: 132px; flex: none; }
.brand img { width: 132px; height: auto; transition: opacity .3s var(--ease); }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav { margin-left: auto; order: 1; }
.site-nav a:not(.btn) { position: relative; color: var(--text-inverse); text-decoration: none; font-size: 10.5px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; padding: 4px 0; opacity: .66; transition: opacity .25s var(--ease); }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { opacity: 1; }
.site-nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: currentColor; transition: right .3s var(--ease); }
.site-nav a:not(.btn):hover::after, .site-nav a[aria-current="page"]::after { right: 0; }
.site-nav .btn { background: transparent; border-color: var(--border-on-dark); }
.site-nav .btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
/* While the header floats over hero photography it is on an image, not on a
   themed surface, so its contents are white in BOTH themes. Using
   --text-inverse here put ink on a dark photograph in dark mode.
   Scoped to body:not(.page-light) so inner pages, which start flat, keep the
   solid treatment below. */
body:not(.page-light) .site-header:not(.is-scrolled) .site-nav a:not(.btn) { color: var(--white); }
body:not(.page-light) .site-header:not(.is-scrolled) .site-nav .btn {
  background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .45);
}
body:not(.page-light) .site-header:not(.is-scrolled) .site-nav .btn:hover {
  background: var(--white); color: var(--black); border-color: var(--white);
}
body:not(.page-light) .site-header:not(.is-scrolled) .nav-toggle__bar { background: var(--white); }
body:not(.page-light) .site-header:not(.is-scrolled) .theme-toggle { color: var(--white); border-color: rgba(255, 255, 255, .45); }

/* Two header states: floating over hero photography, or sitting on a flat
   surface (scrolled, or an inner page that starts on the page colour).
   The flat state is written once and shared, so the two cannot drift. */
.site-header.is-scrolled,
.page-light .site-header {
  background: var(--header-bg);
  box-shadow: 0 1px 0 var(--border-default);
  backdrop-filter: blur(10px);
}
.site-header.is-scrolled .site-nav a:not(.btn),
.page-light .site-header .site-nav a:not(.btn) { color: var(--text-primary); }
.site-header.is-scrolled .site-nav .btn,
.page-light .site-header .site-nav .btn {
  background: var(--button-primary-bg); color: var(--button-primary-text); border-color: var(--button-primary-bg);
}
.site-header.is-scrolled .site-nav .btn:hover,
.page-light .site-header .site-nav .btn:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--text-on-accent); }
.site-header.is-scrolled .nav-toggle__bar,
.page-light .site-header .nav-toggle__bar { background: var(--text-primary); }
.site-header.is-scrolled .theme-toggle,
.page-light .site-header .theme-toggle { color: var(--text-primary); border-color: var(--border-default); }

/* Wordmark. There is a white and a dark artwork, and which one is correct
   depends on the theme AND the header state, not on the page alone:
     - over hero photography it is always the white one
     - on a flat surface it follows the theme, because in dark mode that flat
       surface is near-black and the dark artwork would vanish into it
   Default below is white; only light-theme-on-a-flat-surface swaps it. */
.brand__dark { position: absolute; inset: 0; opacity: 0; }
.brand__light { opacity: 1; }
:root[data-theme="light"] .site-header.is-scrolled .brand__light,
:root[data-theme="light"] .page-light .site-header .brand__light { opacity: 0; }
:root[data-theme="light"] .site-header.is-scrolled .brand__dark,
:root[data-theme="light"] .page-light .site-header .brand__dark { opacity: 1; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header.is-scrolled .brand__light,
  :root:not([data-theme="dark"]) .page-light .site-header .brand__light { opacity: 0; }
  :root:not([data-theme="dark"]) .site-header.is-scrolled .brand__dark,
  :root:not([data-theme="dark"]) .page-light .site-header .brand__dark { opacity: 1; }
}

.nav-toggle { display: none; position: relative; z-index: 2; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; }
.nav-toggle__bar { position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--surface-raised); transition: transform .3s var(--ease), top .3s var(--ease); }
.nav-toggle__bar:nth-child(1) { top: 18px; }
.nav-toggle__bar:nth-child(2) { top: 25px; }

/* Hero */
/* Hero. Always dark regardless of theme: it is photography under a vignette,
   so it is not a themed surface, it is an image. */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  color: var(--white); overflow: hidden; background: var(--black);
  /* always photography, so the hairline stays light in both themes. The accent
     needs no pinning here: --accent-fill is already theme-invariant. */
  --on-dark-hairline: rgba(255, 255, 255, .45);
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
  filter: saturate(.9) contrast(1.05);
  animation: hero-zoom 26s ease-out forwards;
}
@keyframes hero-zoom { from { transform: scale(1.001); } to { transform: scale(1.1); } }
.hero__shade { position: absolute; inset: 0; background: var(--hero-vignette); }
.hero__content { position: relative; padding-top: 150px; padding-bottom: clamp(46px, 7vw, 88px); }
.hero__title { font-size: clamp(40px, 7.6vw, 104px); font-weight: 200; line-height: 1.04; letter-spacing: -0.03em; }
.hero__title .dot { color: var(--line-mark); }
.hero__eyebrow { color: var(--accent-strong); }
.hero__eyebrow span { color: var(--line-mark); }
/* the rule line that carries the lead on one side and the calls to action on
   the other: the device that makes this direction feel editorial */
.hero__meta {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 28px; flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 44px); padding-top: 24px;
  border-top: 1px solid var(--on-dark-hairline);
}
.hero__lead { max-width: 42ch; font-size: 15px; color: rgba(242, 240, 238, .82); margin: 0; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.hero__cta {
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--white); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--line-mark); padding-bottom: 7px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.hero__cta:hover { color: var(--white); border-color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .hero__img { animation: none; }
}

/* Division heroes are shorter than the home hero: the page below them is the
   pitch, so they should not eat a whole screen before the reader reaches it. */
.hero--division { min-height: 74vh; min-height: 74svh; }
.hero--division .hero__title { font-size: clamp(32px, 5.2vw, 68px); }
.hero--division .hero__content { padding-top: 140px; }

/* Cross-reference band: a signpost to the other division. Deliberately lighter
   than the sections around it, so it reads as a pointer and not a second pitch. */
.crossref { border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.crossref__title { font-size: clamp(20px, 2.4vw, 28px); font-weight: 300; max-width: 24ch; margin-bottom: 14px; }
.crossref__body { color: var(--text-secondary); font-size: 15px; max-width: 66ch; margin-bottom: 20px; }

.section__more { margin-top: clamp(28px, 4vw, 44px); }

/* Two-division routing cards on the home page. Equal visual weight on purpose:
   neither service line outranks the other. */
.divisions { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); }
.division {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--surface-raised); border-top: 1px solid var(--accent-strong);
  text-decoration: none; color: inherit;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.division:hover { transform: translateY(-3px); }
.division h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 300; }
.division p { color: var(--text-secondary); font-size: 15px; flex: 1; margin: 0; }
.division__go { font-size: 10px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-strong); display: inline-flex; align-items: center; gap: 9px; transition: gap .25s var(--ease); }
.division:hover .division__go { gap: 14px; }

/* Page header (inner pages) */
.page-head { padding: 150px 0 clamp(40px, 6vw, 72px); background: var(--surface-page); }
.page-head .title { font-size: clamp(34px, 5.4vw, 60px); }
.page-head .lead { max-width: 660px; }

/* Trust strip */
.trust { padding: 40px 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.trust__label { font-size: 10px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 20px; }
.trust__list { display: flex; flex-wrap: wrap; gap: 10px 0; }
.trust__list li { font-size: 15px; color: var(--text-primary); padding-right: 20px; margin-right: 20px; border-right: 1px solid var(--border-default); }
.trust__list li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

/* The second client tier is pre-Victoriam work, delivered by Louis before the
   studio existed. It must stay visually subordinate to the first and never
   flatten into one logo wall: a rule above it, smaller and lighter type. */
.trust__label--earlier {
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid var(--border-default);
  margin-bottom: 14px;
}
.trust__list--earlier li { font-size: 13px; font-weight: 300; color: var(--text-secondary); }

/* Client logo band -------------------------------------------------------- */
/* One continuous row that loops. The track holds the set twice and animates by
   exactly -50%, so the second copy lands where the first began: no seam. */
.logos { overflow: hidden; position: relative; padding: 4px 0; }
.logos::before, .logos::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(36px, 8vw, 120px);
  z-index: 2; pointer-events: none;
}
.logos::before { left: 0; background: linear-gradient(90deg, var(--surface-page), transparent); }
.logos::after { right: 0; background: linear-gradient(270deg, var(--surface-page), transparent); }
.logos__track { display: flex; width: max-content; animation: logo-scroll 56s linear infinite; }
.logos__set { display: flex; align-items: center; }
.logos:hover .logos__track { animation-play-state: paused; }
.logos__item { flex: none; display: flex; align-items: center; justify-content: center; padding: 0 clamp(20px, 3vw, 46px); }
/* --s is the per-logo optical scale: a 4:1 wordmark and a square crest look the
   same size only when the wide one is set shorter. Computed from each file's
   aspect ratio, not guessed. */
.logos__item img {
  height: calc(clamp(26px, 3vw, 36px) * var(--s, 1));
  width: auto; max-width: none;
  /* Greyscale, not a hard flatten: brightness(0) would turn the fine-line
     crests (ATCL, UAE Jiu-Jitsu) into solid blobs. The source artwork ranges
     from near-black to mid-tone, so brightness pulls them to a common weight
     rather than leaving some shouting and some invisible. */
  filter: grayscale(1) brightness(.45) contrast(1.15);
  opacity: .85; transition: opacity .3s var(--ease), filter .3s var(--ease);
}
.logos__item img:hover { opacity: 1; filter: grayscale(0) contrast(1); }
@keyframes logo-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* the artwork is all dark, so on a dark surface it inverts to read */
:root[data-theme="dark"] .logos__item img { filter: grayscale(1) invert(1) brightness(1.05) contrast(1.1); opacity: .82; }
:root[data-theme="dark"] .logos__item img:hover { filter: grayscale(0) contrast(1); opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logos__item img { filter: grayscale(1) invert(1) brightness(1.05) contrast(1.1); opacity: .82; }
  :root:not([data-theme="light"]) .logos__item img:hover { filter: grayscale(0) contrast(1); opacity: 1; }
}

/* Motion off: a centred static wrap, every logo still visible */
@media (prefers-reduced-motion: reduce) {
  .logos { overflow: visible; }
  .logos::before, .logos::after { display: none; }
  .logos__track { animation: none; width: 100%; }
  .logos__set { flex-wrap: wrap; justify-content: center; row-gap: 20px; width: 100%; }
  .logos__set[aria-hidden="true"] { display: none; }
}

/* Earlier work on /work: a credentials list, not case studies. Reads as a
   dense run of names rather than a set of cards. */
.earlier { border-top: 1px solid var(--border-default); }
.earlier__list { display: flex; flex-wrap: wrap; gap: 12px 0; max-width: 92ch; }
.earlier__list li {
  font-size: 14px; font-weight: 300; color: var(--text-secondary);
  padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--border-default);
}
.earlier__list li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.split--reverse .split__media { order: -1; }

/* Stats */
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.stat { padding-top: 20px; border-top: 2px solid var(--accent-default); }
.stat__num { font-size: clamp(38px, 4.6vw, 56px); font-weight: 500; line-height: 1; letter-spacing: -0.02em; margin-bottom: 12px; font-variant-numeric: tabular-nums; color: var(--accent-strong); }
.stat__label { font-size: 14px; color: var(--text-on-feature-soft); max-width: 250px; }
/* the stat band sits in .section--dark, whose "p" rule outranks .stat__num
   alone, so the accent never reached the numbers; this matches its weight */
.section--dark .stat__num { color: var(--accent-strong); }

/* Proof list */
.proof { display: grid; gap: 0; border-top: 1px solid var(--border-default); }
.proof__row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--border-default); align-items: baseline; }
.proof__who { font-size: clamp(17px, 2vw, 20px); font-weight: 400; }
.proof__what { color: var(--text-secondary); font-size: 16px; }

/* Capability grid */
.caps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border-default); border-left: 1px solid var(--border-default); counter-reset: cap; }
.caps li { counter-increment: cap; min-height: 176px; padding: 26px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; font-size: 17px; line-height: 1.35; border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.caps li::before { content: counter(cap, decimal-leading-zero); font-size: 12px; letter-spacing: .18em; color: var(--accent-strong); }
.section--dark .caps { border-color: var(--border-on-dark); }
.section--dark .caps li { border-color: var(--border-on-dark); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { background: var(--surface-raised); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(35,31,32,.10); }
.card__img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card__body { padding: 24px 24px 28px; }
.card__tag { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 10px; }
.card__title { font-size: 19px; margin-bottom: 8px; }
.card__meta { font-size: 14px; color: var(--text-secondary); }

/* Work filter + cases */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter { font: inherit; font-size: 10px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; padding: 11px 20px; border-radius: var(--pill); border: 1px solid var(--border-default); background: transparent; color: var(--text-primary); cursor: pointer; transition: all .2s var(--ease); }
.filter:hover { border-color: var(--text-primary); }
.filter[aria-pressed="true"] { background: var(--button-primary-bg); border-color: var(--button-primary-bg); color: var(--button-primary-text); }

/* Case studies, concept-b's editorial treatment ---------------------------- */
.case { padding: 0 0 clamp(60px, 9vw, 120px); }

/* full-bleed cinematic plate with the title sitting on it */
.case__head { position: relative; margin-bottom: clamp(30px, 4vw, 52px); }
.case__img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; background: var(--surface-sunken); }
.case__headline {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(22px, 4vw, 44px) 0 clamp(18px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(14,13,13,0) 0%, rgba(14,13,13,.78) 60%, rgba(14,13,13,.92) 100%);
  color: var(--white);
}
.case__tag {
  font-size: 10px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(242, 240, 238, .82); margin-bottom: 12px;
}
.case__tag span { color: var(--line-mark); margin: 0 10px; }
.case__title { font-size: clamp(24px, 3.4vw, 44px); color: var(--white); margin: 0; }

/* facts rail on the left, the two narrative columns on the right */
.case__grid { display: grid; grid-template-columns: minmax(140px, 1fr) 4fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.case__facts { display: grid; gap: 22px; }
.case__fact { margin: 0; font-size: 15px; color: var(--text-primary); }
.case__fact .label { display: block; margin-bottom: 6px; }
.label { font-size: 10px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase; color: var(--text-secondary); }

.case__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.4vw, 44px); }
.case__label { font-size: 10px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase; color: var(--accent-strong); margin: 0 0 12px; }
.case__cols p, .case__result p { color: var(--text-secondary); font-size: 15px; margin: 0; }

/* the result is the payoff and carries the press link, so it gets its own
   rule-lined row across the narrative columns rather than a cramped third one */
.case__result { grid-column: 2; padding-top: 24px; margin-top: 4px; border-top: 1px solid var(--border-default); }
.case__result p { max-width: 70ch; }
.case__result a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-strong); }
.case__result a:hover { color: var(--accent-strong); }

.case__gallery { grid-column: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.case__gallery a { display: block; overflow: hidden; background: var(--surface-sunken); }
.case__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease), opacity .3s; }
.case__gallery a:hover img { transform: scale(1.06); opacity: .92; }

/* Method steps */
.steps { display: grid; gap: 2px; }
.step { display: grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 30px 0; border-top: 1px solid var(--border-default); }
.step__num { font-size: 13px; font-weight: 500; letter-spacing: .16em; color: var(--accent-strong); padding-top: 5px; }
.step h3 { font-size: 21px; margin-bottom: 10px; }
.step p { color: var(--text-secondary); font-size: 16px; max-width: 640px; }
.section--dark .step { border-color: var(--border-on-dark); }

/* Feature tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile { background: var(--surface-raised); border-radius: var(--radius); padding: 32px 28px; border-top: 3px solid var(--accent-default); }
.tile h3 { font-size: 19px; margin-bottom: 10px; }
.tile p { color: var(--text-secondary); font-size: 15px; }
.section--dark .tile { background: color-mix(in srgb, var(--text-on-feature) 6%, transparent); border-top-color: var(--accent-on-feature); }
.section--dark .tile p { color: var(--text-on-feature-soft); }

/* Service groups */
.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service { background: var(--surface-raised); border-radius: var(--radius); padding: 28px 24px; }
.service h3 { font-size: 17px; margin-bottom: 16px; }
.service li { font-size: 15px; color: var(--text-secondary); padding: 8px 0; border-bottom: 1px solid var(--border-default); }
.service li:last-child { border-bottom: 0; }

/* Founder */
.founder__inner { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
.founder__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 28%; border-radius: var(--radius); }
.founder__role { color: var(--accent-strong); font-size: 14px; letter-spacing: .04em; margin-bottom: 22px; }

/* Team */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* The bench: how a one-principal studio staffs a production. Sits under the
   principal block, set wider and quieter so it reads as explanation. */
.bench { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(30px, 4vw, 44px); border-top: 1px solid var(--border-default); display: grid; grid-template-columns: minmax(180px, 1fr) 2.4fr; gap: clamp(20px, 4vw, 56px); }
.bench__title { font-size: clamp(18px, 2vw, 22px); font-weight: 300; }
.bench__body p { color: var(--text-secondary); font-size: 15px; max-width: 70ch; }
.bench__body p + p { margin-top: 1em; }

/* Previous / next between case studies */
.case-nav { border-top: 1px solid var(--border-default); }
.case-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.case-nav__link { display: grid; gap: 5px; text-decoration: none; font-size: 14.5px; color: var(--text-primary); max-width: 32ch; }
.case-nav__link:hover { color: var(--accent-strong); }
.case-nav__link--next { text-align: right; }

/* Work index grid. Four across on wide screens, since eight cases read better
   as two tidy rows than as a long column. */
.cards--work { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .cards--work { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .cards--work { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .cards--work { grid-template-columns: 1fr; } }
.member img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); margin-bottom: 18px; }
.member h3 { font-size: 20px; font-weight: 300; margin-bottom: 6px; }
.member__role { font-size: 10px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 14px; }
.member__bio { font-size: 14.5px; color: var(--text-secondary); }
.section--dark .member__role { color: var(--accent-on-dark); }

/* Quotes */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: 26px; padding: 34px 30px; background: var(--surface-raised); border-top: 1px solid var(--accent-strong); }
.quote blockquote p { font-size: 16px; font-weight: 300; line-height: 1.62; }
.quote blockquote p::before { content: "“"; display: block; font-size: 50px; line-height: .6; height: 24px; color: var(--accent-strong); font-weight: 400; }
.quote figcaption { padding-top: 18px; border-top: 1px solid var(--border-default); font-size: 14px; }
.quote figcaption strong { display: block; font-weight: 400; }
.quote figcaption span { color: var(--text-secondary); }

/* Quotes carousel. A scroll container before it is anything else: snapping does
   the moving, so swipe, trackpad and keyboard all work before a line of JS runs.
   The controls are added by CSS only once main.js has set .js on <html>, so
   nothing dead is ever shown. */
.carousel { position: relative; }
.quotes--track { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.quotes--track::-webkit-scrollbar { display: none; }
.quotes--track:focus-visible { outline-offset: 6px; }
.quotes__slide { flex: 0 0 calc((100% - 22px) / 2); display: flex; scroll-snap-align: start; }
.quotes__slide .quote { flex: 1; }
.carousel__controls { display: none; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; }
.js .carousel__controls:not([hidden]) { display: flex; }
.carousel__arrow { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; font: inherit; font-size: 15px; line-height: 1; color: var(--text-primary); background: none; border: 1px solid var(--border-default); border-radius: 50%; cursor: pointer; transition: border-color .25s var(--ease), color .25s var(--ease); }
.carousel__arrow:hover { border-color: var(--accent-default); color: var(--accent-strong); }
.carousel__dots { display: flex; align-items: center; gap: 9px; list-style: none; margin: 0; padding: 0; }
.carousel__dots button { display: block; width: 8px; height: 8px; padding: 0; background: var(--border-default); border: 0; border-radius: 50%; cursor: pointer; transition: background .25s var(--ease); }
.carousel__dots button[aria-current="true"] { background: var(--accent-strong); }
@media (max-width: 720px) { .quotes__slide { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .quotes--track { scroll-behavior: auto; } }

/* CTA band */
.cta-band { background: var(--surface-feature); color: var(--text-on-feature); text-align: center; padding: clamp(60px, 9vw, 104px) 0; }
.cta-band .title { max-width: 700px; margin: 0 auto 14px; }
.cta-band p { color: var(--text-on-feature-soft); max-width: 560px; margin: 0 auto 32px; }

/* Contact */
.contact__inner { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
.contact__details { display: grid; gap: 10px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border-default); font-size: 16px; }
.contact__details a { text-decoration: none; }
.contact__details a:hover { color: var(--accent-strong); }
.contact__details span { color: var(--text-secondary); }
.form { background: var(--surface-raised); padding: clamp(26px, 4vw, 42px); border-radius: var(--radius); }
.form__row { margin-bottom: 18px; }
.form__row--half { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: block; font-size: 10px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
/* no opacity here: at .7 this fell to 3.14 in dark and 2.93 in light. The
   "(optional)" already reads as secondary from its position in the label. */
.form .optional { letter-spacing: .42em; }
.form input, .form textarea, .form select {
  width: 100%; font: inherit; font-size: 15px; font-weight: 400; color: var(--text-primary);
  background: var(--surface-page); border: 1.5px solid transparent; border-bottom-color: var(--border-default);
  border-radius: var(--radius); padding: 12px 14px; transition: border-color .2s, background .2s;
}
.form textarea { resize: vertical; min-height: 130px; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; background: var(--surface-raised); border-color: var(--text-primary); }
.form [aria-invalid="true"] { border-color: var(--accent-strong); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { width: 100%; margin-top: 6px; }
.form .btn[disabled] { opacity: .6; cursor: progress; }
.form__status { margin-top: 15px; font-size: 14px; min-height: 1.5em; }
.form__status.is-ok { color: var(--text-primary); }
.form__status.is-error { color: var(--accent-strong); }

/* Footer */
.site-footer { background: var(--surface-feature); color: var(--text-on-feature-soft); padding: clamp(64px, 9vw, 96px) 0 40px; border-top: 1px solid var(--border-default); }
.site-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid var(--feature-hairline); }
.site-footer img { width: 150px; margin-bottom: 18px; }
.site-footer h4 { font-size: 10px; font-weight: 400; letter-spacing: .42em; text-transform: uppercase; color: var(--text-on-feature); margin-bottom: 18px; }
.site-footer a { text-decoration: none; font-size: 15px; display: block; padding: 5px 0; }
.site-footer a:hover { color: var(--text-on-feature); }
.site-footer p { font-size: 15px; }
.site-footer__bottom { padding-top: 26px; font-size: 12.5px; color: var(--text-on-feature-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Lightbox */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 18, 18, .97); color: var(--text-inverse); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(20, 18, 18, .92); }
.lightbox__figure { max-width: min(1200px, 88vw); text-align: center; }
.lightbox__figure img { max-width: 100%; max-height: 80vh; margin: 0 auto; border-radius: 3px; }
.lightbox__figure figcaption { margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.62); }
.lightbox button { position: absolute; background: none; border: 0; color: var(--text-inverse); cursor: pointer; font: inherit; line-height: 1; opacity: .8; }
.lightbox button:hover { opacity: 1; }
.lightbox__close { top: 16px; right: 20px; font-size: 38px; width: 48px; height: 48px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 54px; width: 56px; height: 80px; }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
}
@media print {
  .js .reveal { opacity: 1; transform: none; }
  .site-header, .lightbox, .form { display: none; }
  .hero { min-height: 0; }
}

@media (max-width: 1024px) {
  .stats__grid, .caps, .services, .cards, .tiles, .quotes, .team { grid-template-columns: repeat(2, 1fr); }
  .case { grid-template-columns: 1fr; }
  .case--flip .case__cover { order: 0; }
  .case__cover { position: static; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 24px;
    /* deliberately the fixed dark panel in both themes, not --surface-inverse,
       which in dark resolves to off-white and gave a white sheet under white text */
    background: var(--black); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
  }
  .site-nav a:not(.btn) { font-size: 22px; letter-spacing: .12em; color: var(--white) !important; opacity: 1; }
  /* --red with white text is 4.38, so the menu CTA uses the AA-safe red (5.91) */
  .site-nav .btn { margin-top: 10px; background: var(--white) !important; color: var(--black) !important; border-color: var(--white) !important; }
  .nav-open .site-nav { opacity: 1; visibility: visible; }
  .nav-open .nav-toggle__bar { background: var(--white) !important; }
  .nav-open .nav-toggle__bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .nav-open .nav-toggle__bar:nth-child(2) { top: 21px; transform: rotate(-45deg); }
  .nav-open .brand__light { opacity: 1 !important; }
  .nav-open .brand__dark { opacity: 0 !important; }
  .nav-open .site-header { background: transparent; box-shadow: none; }
  .nav-open { overflow: hidden; }
  .brand { z-index: 2; }
  .split, .founder__inner, .contact__inner, .proof__row, .divisions, .bench { grid-template-columns: 1fr; }
  .case-nav__link--next { text-align: left; }
  /* the facts rail drops above the narrative, and the two columns become one */
  .case__grid { grid-template-columns: 1fr; }
  .case__cols { grid-template-columns: 1fr; }
  .case__facts { grid-auto-flow: column; gap: 28px; }
  .case__result, .case__gallery { grid-column: 1; }
  .case__img { aspect-ratio: 16 / 9; }
  .split--reverse .split__media { order: 0; }
  .split__media img { aspect-ratio: 4 / 3; }
  .founder__photo { max-width: 400px; }
  .proof__row { gap: 6px; padding: 20px 0; }
  .step { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 560px) {
  .stats__grid, .caps, .services, .cards, .tiles, .quotes, .team, .form__row--half { grid-template-columns: 1fr; }
  .member img { max-width: 320px; }
  .caps li { min-height: 0; flex-direction: row; align-items: baseline; gap: 16px; padding: 20px; }
  .trust__list li { border-right: 0; margin-right: 0; padding-right: 0; width: 100%; padding-bottom: 10px; border-bottom: 1px solid var(--border-default); }
  .trust__list li:last-child { border-bottom: 0; }
  .earlier__list li { border-right: 0; margin-right: 0; padding-right: 0; width: 100%; padding-bottom: 8px; border-bottom: 1px solid var(--border-default); }
  .earlier__list li:last-child { border-bottom: 0; }
  .case__gallery { grid-template-columns: repeat(2, 1fr); }
  .case__facts { grid-auto-flow: row; gap: 18px; }
  .case__img { aspect-ratio: 4 / 3; }
  .hero__meta { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; }
  .site-footer__top { grid-template-columns: 1fr; }
  .lightbox__nav { top: auto; bottom: 16px; transform: none; }
}

/* ---- Line pages: promise, results, challenges, services, trusted, record,
        why, how, retention. Built for /sport and /corporate. ---------------- */
.points, .how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.point, .how__step { padding-top: 22px; border-top: 1px solid var(--accent-default); }
.point__num, .how__num { display: block; font-size: 10px; letter-spacing: .42em; color: var(--accent-strong); margin: 0 0 14px; }
.point h3, .how__step h3, .why__item h3 { font-size: clamp(18px, 1.8vw, 21px); font-weight: 300; margin-bottom: 8px; }
.point p, .how__step p, .why__item p { color: var(--text-secondary); font-size: 15px; margin: 0; }
.how__note { display: block; font-size: 13px; font-style: italic; color: var(--text-secondary); margin-bottom: 10px; }

.results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-default); }
.results__item { display: grid; grid-template-columns: minmax(170px, 1fr) 2.4fr; gap: clamp(18px, 3vw, 48px); align-items: baseline; padding: clamp(20px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--border-default); }
.results__figure { margin: 0; font-size: clamp(26px, 3.4vw, 44px); font-weight: 200; line-height: 1.08; letter-spacing: -.02em; color: var(--accent-strong); }
.results__text { margin: 0; font-size: 16px; color: var(--text-secondary); max-width: 62ch; }

.challenges { border-top: 1px solid var(--border-default); }
.challenges__labels, .challenge { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 56px); }
.challenges__labels { padding: 14px 0; border-bottom: 1px solid var(--border-default); }
.challenge { padding: clamp(18px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--border-default); }
.challenge__q { margin: 0; font-size: 16px; font-style: italic; color: var(--text-secondary); }
.challenge__a { margin: 0; font-size: 16px; color: var(--text-primary); }

.svc { list-style: none; margin: 0; padding: 0; }
.svc__item { display: grid; grid-template-columns: 90px 1fr; gap: 28px; padding: clamp(28px, 3.4vw, 40px) 0; border-top: 1px solid var(--border-default); }
.svc__num { margin: 0; padding-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: .16em; color: var(--accent-strong); }
.svc__item h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 300; margin-bottom: 8px; }
.svc__tagline { font-style: italic; color: var(--text-primary); margin-bottom: 12px; }
.svc__body, .svc__includes { color: var(--text-secondary); max-width: 72ch; }
.svc__includes span { color: var(--text-primary); font-weight: 400; }
.svc__proven { margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--accent-default); color: var(--text-primary); font-weight: 400; max-width: 72ch; }

.retention { list-style: none; margin: 0; padding: 0; }
.retention__item { display: grid; grid-template-columns: minmax(200px, 1.2fr) 2fr; gap: clamp(18px, 3vw, 48px); padding: 22px 0; border-top: 1px solid var(--border-default); }
.retention__item h3 { margin: 0; font-size: 17px; font-weight: 400; }
.retention__item p { margin: 0; color: var(--text-secondary); }

.trusted__group { padding: 22px 0; border-top: 1px solid var(--border-default); }
.trusted__group > .label { display: block; margin-bottom: 16px; }
.wall { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(24px, 3.4vw, 48px); }
.wall__item img { height: calc(clamp(26px, 3vw, 34px) * var(--s, 1)); width: auto; max-width: none; filter: grayscale(1) brightness(.45) contrast(1.15); opacity: .85; }
.wall__name, .logos__name { font-size: 12px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
/* the static walls wrap; only the scrolling band needs names on one line. Long
   names like "Union of Municipalities of Keserwan-Ftouh" overflowed a 375px screen */
.wall__item { max-width: 100%; }
.wall__name { white-space: normal; }
:root[data-theme="dark"] .wall__item img { filter: grayscale(1) invert(1) brightness(1.05) contrast(1.1); opacity: .82; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wall__item img { filter: grayscale(1) invert(1) brightness(1.05) contrast(1.1); opacity: .82; }
}
/* Pale or colourful artwork (a gold crest, a green-and-cream column) turns dark
   grey when inverted, so on a dark page it is brightened instead. Set per logo in
   Backstage; dark wordmarks keep the invert above, or they would vanish. */
:root[data-theme="dark"] .wall__item--light img,
:root[data-theme="dark"] .logos__item--light img { filter: grayscale(1) brightness(1.65) contrast(1.25); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wall__item--light img,
  :root:not([data-theme="light"]) .logos__item--light img { filter: grayscale(1) brightness(1.65) contrast(1.25); }
}
.trusted__recent { margin-top: 26px; padding-left: 14px; border-left: 2px solid var(--accent-default); font-size: 14px; color: var(--text-primary); }

.record { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.record__group h3 { font-size: 17px; font-weight: 400; margin-bottom: 12px; padding-top: 18px; border-top: 1px solid var(--accent-default); }
.record__list { list-style: none; margin: 0; padding: 0; }
.record__list li { padding: 7px 0; font-size: 15px; border-bottom: 1px solid var(--border-default); }
.section--dark .record__list li { color: var(--text-on-feature); }
.record__note { margin-top: 14px; font-size: 14px; font-style: italic; }

.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 64px); }
.why__item { padding: 24px 0; border-top: 1px solid var(--border-default); }

.division__kicker { margin: -8px 0 0; font-size: 10px; letter-spacing: .42em; text-transform: uppercase; color: var(--accent-strong); }

/* case covers: photography when supplied, a typographic plate until then */
div.card__img { overflow: hidden; }
div.card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__img--none { display: flex; align-items: flex-end; padding: 22px; background: var(--surface-feature); border-bottom: 2px solid var(--accent-default); }
.card__img--none span { font-size: 10px; letter-spacing: .42em; text-transform: uppercase; color: var(--text-on-feature-soft); }
.case__head--plain { background: var(--surface-feature); padding-top: clamp(140px, 16vw, 200px); }
.case__head--plain .case__headline { position: static; background: none; padding-bottom: clamp(40px, 5vw, 64px); }
.case__lede { max-width: 62ch; margin: 18px 0 0; font-size: clamp(16px, 1.6vw, 19px); font-weight: 300; color: var(--text-on-feature-soft); }
/* Every narrative block pins to the second column. Without this, a case with an
   Objective let auto-placement drop the challenge columns into the narrow facts
   column, where they overlapped the result. */
.case__objective, .case__cols { grid-column: 2; }
.case__quote { grid-column: 2; margin: 0; padding-top: 24px; border-top: 1px solid var(--border-default); }
.case__quote p { font-size: 18px; font-weight: 300; margin: 0; }
.case__quote figcaption { margin-top: 10px; font-size: 14px; color: var(--text-secondary); }
.case__quote figcaption strong { color: var(--text-primary); font-weight: 400; }

@media (max-width: 860px) {
  .points, .how, .record, .why { grid-template-columns: 1fr; }
  .results__item, .retention__item { grid-template-columns: 1fr; gap: 6px; }
  .challenges__labels { display: none; }
  .challenge { grid-template-columns: 1fr; gap: 8px; }
  .challenge__a { color: var(--accent-strong); }
  .svc__item { grid-template-columns: 1fr; gap: 8px; }
  .case__objective, .case__quote, .case__cols { grid-column: 1; }
}