/* =========================================================
   Monkey Melody — design system
   Core palette: #fbd42c (brand yellow) / black / white, with
   #00bcd4 (cyan) as the complementary secondary accent.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&family=Permanent+Marker&display=swap");

:root {
  /* --- colour tokens (light mode) --- */
  --color-bg: #ffffff;
  --color-bg-alt: #fdf7e0;         /* soft yellow tint for alt sections */
  --color-surface: #ffffff;
  --color-ink: #101010;            /* near-black brand ink */
  --color-ink-soft: #59595c;
  --color-heading: #101010;        /* h1-h4 text colour */
  --color-primary: #101010;        /* near-black accent text (stats etc.) */
  --color-primary-dark: #000000;   /* always-dark chrome: header pill, dark sections, footer */
  --color-primary-tint: #dff6f9;
  --color-amber: #fbd42c;          /* main brand colour (constant across themes) */
  --color-amber-tint: #fff6cf;
  --color-coral: #2c53fb;          /* complementary secondary accent (constant across themes) */
  --color-coral-tint: #d8f5f9;
  --color-blush: #f0f0f0;          /* neutral tint */
  --color-line: rgba(16, 16, 16, 0.14);
  --color-line-soft: rgba(16, 16, 16, 0.08);
  --color-mark-text: #101010;      /* text sitting on the yellow highlighter mark — always dark */

  /* --- type --- */
  --font-display: "Raleway", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* --- layout --- */
  --container: 1240px;
  --container-narrow: 800px;
  --radius-sm: 8px;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(22, 20, 15, 0.08), 0 12px 32px -16px rgba(22, 20, 15, 0.3);
  --nav-h: 96px;
}

/* --- dark mode: content areas flip, brand accent + "always dark" chrome
   (header pill, dark sections, footer) stay as-is on purpose --- */
:root[data-theme="dark"] {
  --color-bg: #0b0b0b;
  --color-bg-alt: #1b1811;
  --color-surface: #211f1c;
  --color-ink: #f4f4f2;
  --color-ink-soft: #b6b1a8;
  --color-heading: #ffffff;
  --color-primary: #f4f4f2;
  --color-primary-tint: #12363b;
  --color-amber-tint: #3d3115;
  --color-coral-tint: #10373d;
  --color-blush: #272521;
  --color-line: rgba(244, 244, 242, 0.24);
  --color-line-soft: rgba(244, 244, 242, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b0b0b;
    --color-bg-alt: #1b1811;
    --color-surface: #211f1c;
    --color-ink: #f4f4f2;
    --color-ink-soft: #b6b1a8;
    --color-heading: #ffffff;
    --color-primary: #f4f4f2;
    --color-primary-tint: #12363b;
    --color-amber-tint: #3d3115;
    --color-coral-tint: #10373d;
    --color-blush: #272521;
    --color-line: rgba(244, 244, 242, 0.24);
    --color-line-soft: rgba(244, 244, 242, 0.14);
  }
}

/* --- reset --- */
* , *::before, *::after { box-sizing: border-box; }
/* overflow-x must be "clip", not "hidden", here and on body below: any
   non-visible overflow value on EITHER axis makes that element a
   "scroll container", and once html/body are scroll containers every
   position:sticky element on the page (e.g. .tab-nav-wrap below) loses
   its connection to the real viewport and simply stops sticking.
   "clip" gives the same no-horizontal-scrollbar guarantee as "hidden"
   without that side effect. */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100vw;
}
/* safety net: a form control's intrinsic content width (e.g. a <select>'s
   longest option) should never be able to push the page wider than the
   viewport on narrow screens */
select, input, textarea { max-width: 100%; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, p, figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

/* hand-drawn highlighter mark, e.g. <span class="mark">word</span> — the
   yellow background is constant across themes, so the text on top of it
   must always stay dark for contrast, regardless of the current theme */
.mark { position: relative; display: inline-block; color: var(--color-mark-text) !important; padding: 0 0.04em; }
.mark::before {
  content: ""; position: absolute; left: -0.14em; right: -0.12em; top: -0.08em; bottom: -0.1em; z-index: -1;
  background: var(--color-amber); transform: rotate(-1.4deg);
  clip-path: polygon(0.5% 8%, 98% 0%, 100% 92%, 2% 100%);
}
.section--dark .mark::before, .hero .mark::before { transform: rotate(1.2deg); }

/* subtle film-grain texture for large flat colour blocks — keeps dark
   sections from reading as a flat AI gradient */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
.container--narrow { max-width: var(--container-narrow); }

.site-footer { position: relative; z-index: 3; }

.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--dark { background: var(--color-primary-dark); color: #f4efe4; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #ffffff; }
.section--alt { background: var(--color-bg-alt); }
.section--surface { background: var(--color-surface); }

@media (max-width: 900px) {
  .section { padding: 64px 0; }
}

/* --- eyebrow / section head pattern (McKinsey-style) --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-coral);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-coral); display: inline-block; }
/* a handful of "bookend" eyebrows (page intros and closing CTAs) use
   the brand's main yellow instead of the default cyan, in every theme */
.eyebrow--brand { color: var(--color-amber); }
.eyebrow--brand::before { background: var(--color-amber); }
/* in Dark Mode, ALL eyebrows (not just the brand ones above) switch to
   the brand yellow instead of cyan — this also covers the blog post's
   "In this article" side-nav label, which is itself an .eyebrow */
:root[data-theme="dark"] .eyebrow { color: var(--color-amber); }
:root[data-theme="dark"] .eyebrow::before { background: var(--color-amber); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eyebrow { color: var(--color-amber); }
  :root:not([data-theme="light"]) .eyebrow::before { background: var(--color-amber); }
}

.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head--split {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; max-width: none;
  margin: 0 0 48px; text-align: left;
}
/* flex items refuse to shrink below their content's natural width by
   default — a <select>'s widest option can hold this row open past the
   viewport's edge. Stack instead of squeezing once there isn't room. */
@media (max-width: 640px) {
  .section-head--split { flex-direction: column; align-items: stretch; gap: 20px; }
  .section-head--split .filter-select { width: 100%; }
}
.section-head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top: 12px; }
.section-head p { margin-top: 16px; color: var(--color-ink-soft); font-size: 1.05rem; max-width: 60ch; margin-left: auto; margin-right: auto; }
.section-head--split p { margin-left: 0; margin-right: 0; }

/* --- buttons --- */
.btn {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; margin: 0; vertical-align: middle;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 0.95rem; border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn-primary { background: var(--color-coral); color: #fff; }
.btn-primary:hover { background: var(--color-primary); }
.btn-dark { background: var(--color-primary-dark); color: #fff; }
.btn-dark:hover { background: var(--color-coral); }
.btn-outline { border-color: currentColor; color: inherit; background: transparent; }
.btn-outline:hover { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }
.btn-ghost { padding: 0; border-radius: 0; gap: 8px; }
.btn-ghost .arrow { transition: transform .18s ease; }
.btn-ghost:hover .arrow { transform: translateX(4px); }
.btn svg { width: 16px; height: 16px; }

/* =========================================================
   Header / navigation — the nav is fixed top-right at all
   times. The logo is NOT fixed: it sits in normal document
   flow (absolutely positioned relative to the page, not the
   viewport) so it scrolls away like any other page content.
   Unscrolled: plain text over the dark hero. Scrolled: nav
   condenses into a solid pill.
   ========================================================= */
.brand-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 90; padding: 26px 0; pointer-events: none; }
.brand-bar .container { pointer-events: none; display: flex; align-items: center; min-height: 42px; }
.brand-bar a { pointer-events: auto; }

.brand { display: inline-flex; align-items: center; }
.brand .brand-logo { height: 26px; width: auto; display: block; }
.brand-bar .brand-logo { margin-top: 15px; }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 26px 0;
  color: #fff;
  transition: color .3s ease, opacity .18s ease, visibility 0s linear 0s;
  pointer-events: none;
}
/* on pages with a [data-fade-nav] hero (case studies), the nav pill fades
   out once that hero has scrolled past, so it stops clashing with the
   sticky tab-nav underneath; scrolling back up brings it back. Also
   drops out of the layout via visibility (once the opacity fade finishes)
   so the mobile hamburger button can't sit as a visible "ghost" on top of
   the tab-nav's buttons mid-fade, which on mobile read as the buttons
   overlapping/overflowing each other. */
.site-header.nav-hidden { opacity: 0; visibility: hidden; transition: color .3s ease, opacity .18s ease, visibility 0s linear .18s; }
.site-header.nav-hidden a, .site-header.nav-hidden button { pointer-events: none; }
.site-header .container, .header-row { pointer-events: none; }
.site-header a, .site-header button { pointer-events: auto; }
.header-row { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-height: 42px; }

.nav-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 8px; border-radius: var(--radius-pill); border: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, padding .3s ease, box-shadow .3s ease;
}
.nav-links { display: flex; align-items: center; gap: 26px; padding: 0 16px; }
.nav-links a { font-weight: 600; font-size: 0.9rem; position: relative; padding: 6px 0; color: #fff; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--color-amber); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.is-active { color: var(--color-amber); }
.nav-links a.is-active::after { transform: scaleX(1); background: var(--color-amber); }

/* "Resources" dropdown (Blog + Free Content) — opens on hover/focus,
   only relevant above the mobile breakpoint where the nav-links row
   itself is visible */
.nav-item--dropdown { position: relative; }
.nav-item-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret {
  width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s ease;
}
.nav-item--dropdown:hover .nav-caret, .nav-item--dropdown:focus-within .nav-caret { transform: rotate(-135deg) translateY(2px); }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
  min-width: 160px; padding: 8px; border-radius: var(--radius-sm);
  background: var(--color-primary-dark); border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden;
  /* opens instantly (see the :hover rule's transition-delay: 0 below),
     but closing is delayed ~300ms so moving the cursor down across the
     small gap into the panel doesn't get read as "left the dropdown"
     and yank it away before it can be clicked. visibility (unlike
     pointer-events, which browsers don't actually delay-transition) has
     defined discrete transition behaviour: going hidden->visible flips
     immediately, visible->hidden flips only once the delay elapses — so
     it alone gates both the fade and the click-through window. */
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .3s;
}
/* an invisible bridge over the gap between the trigger and the panel —
   hovering through this space still counts as hovering .nav-item--dropdown */
.nav-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item--dropdown:hover .nav-dropdown, .nav-item--dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translate(-50%, 2px);
  transition-delay: 0s;
}
.nav-dropdown a {
  display: block; padding: 9px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.88rem;
  color: #fff; white-space: nowrap;
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover, .nav-dropdown a.is-active { background: rgba(255,255,255,0.1); color: var(--color-amber); }

/* Contact — a distinct CTA button rather than a plain nav link, since
   it's the destination of the funnel every CTA band already points to */
.nav-cta {
  background: var(--color-coral); color: #fff; font-weight: 700; font-size: 0.86rem;
  padding: 10px 20px; border-radius: var(--radius-pill); white-space: nowrap; transition: background .2s ease;
}
.nav-cta:hover { background: var(--color-amber); color: var(--color-mark-text); }

/* Language switch — shows the current language's flag; clicking it
   reveals the other language as a one-item popover. A dedicated left
   margin (beyond the nav-pill's own row gap) keeps it visually separate
   from the Contact CTA rather than reading as part of the same button
   cluster. */
.lang-switch-wrap { position: relative; margin-left: 14px; }
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35);
  background: none; padding: 0; font-size: 1rem; line-height: 1; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.lang-switch:hover { border-color: var(--color-amber); background: rgba(255,255,255,0.06); }

.lang-switch-menu {
  display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: 6px; min-width: 160px; box-shadow: var(--shadow-card);
}
.lang-switch-menu.is-open { display: block; }
.lang-switch-menu a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 600; font-family: var(--font-body); color: var(--color-ink);
}
.lang-switch-menu a:hover { background: var(--color-bg-alt); }
.lang-switch-menu span { font-size: 1.1rem; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 10px;
  color: #fff;
}
.nav-toggle span { width: 22px; height: 2px; background: currentColor; display: block; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle.is-active span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle.is-active span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.site-header.is-scrolled .nav-pill {
  background: var(--color-primary-dark);
  border-color: rgba(255,255,255,0.08);
  box-shadow: var(--shadow-card);
}

@media (max-width: 980px) {
  .nav-links, .nav-cta, .lang-switch-wrap { display: none; }
  .nav-toggle { display: flex; }
  .site-header.is-scrolled .nav-pill,
  .nav-pill { background: var(--color-primary-dark); border-color: rgba(255,255,255,0.08); }
  .site-header .nav-toggle { color: #fff; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--color-primary-dark); color: #fff;
  display: flex; flex-direction: column; justify-content: center; padding: 32px;
  transform: translateY(-100%); transition: transform .35s ease; opacity: 0;
}
.mobile-menu.is-open { transform: translateY(0); opacity: 1; }
.mobile-menu .brand { margin-bottom: 12px; }
.mobile-menu .brand .brand-logo { height: 32px; }
.mobile-menu a { font-family: var(--font-display); font-weight: 600; font-size: 2rem; padding: 8px 0; display: block; }
.mobile-menu a.is-active { color: var(--color-amber); }
.mobile-menu-sub { padding: 0 0 8px 20px; }
/* Center the full-screen mobile nav's text instead of leaving it
   left-aligned — there's no list/indent context on a standalone
   full-screen overlay, so a centered layout reads more intentional. */
@media (max-width: 980px) {
  .mobile-menu { align-items: center; text-align: center; }
  .mobile-menu-sub { padding-left: 0; }
}
.mobile-menu-sub a { font-size: 1.15rem; padding: 6px 0; color: rgba(255,255,255,0.75); }
.mobile-menu-sub a.is-active { color: var(--color-amber); }
/* CTA + language switch sit in their own row, separated by a real gap
   rather than being squeezed next to each other */
.mobile-menu-actions { display: flex; align-items: center; gap: 24px; margin-top: 20px; }
/* padding needs !important: .mobile-menu a (class+element, specificity
   0,1,1) otherwise beats this single-class selector's 0,1,0 and wins the
   cascade, which was silently collapsing this button's padding down to
   the plain nav link's "8px 0" — leaving its text with no horizontal
   breathing room before the pill's rounded edge */
.mobile-menu-cta {
  display: inline-flex !important; margin-top: 0; background: var(--color-coral); color: #fff !important;
  padding: 14px 28px !important; border-radius: var(--radius-pill); font-size: 1.1rem !important;
}
/* mirrors the circular flag button used in the desktop nav
   (.lang-switch) — just sized up a little for a comfortable touch
   target */
.mobile-lang-switch-wrap { position: relative; }
.mobile-menu-lang {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35);
  background: none; padding: 0 !important; margin-top: 0; font-size: 1.3rem; cursor: pointer;
}
.mobile-menu-lang:hover, .mobile-menu-lang:active { border-color: var(--color-amber); }
.lang-switch-menu--mobile { top: auto; bottom: calc(100% + 10px); right: auto; left: 50%; transform: translateX(-50%); }
.lang-switch-menu--mobile a { font-size: 1rem; white-space: nowrap; }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  background: var(--color-primary-dark);
  color: #fff; overflow: hidden; padding-top: var(--nav-h);
}
/* crossfading photo background. The section itself (.hero, below) has a
   solid near-black background-color, so until main.js confirms the
   first photo has actually finished loading+decoding, the images stay
   fully transparent and that solid black is all that's visible — never
   a half-loaded/piece-by-piece progressive JPEG, and never the
   animation's own clock fading in before there's image data to show. */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
}
.hero-bg.is-ready img { animation: hero-crossfade 20s infinite; }
.hero-bg.is-ready img:nth-child(1) { animation-delay: 0s; }
.hero-bg.is-ready img:nth-child(2) { animation-delay: 5s; }
.hero-bg.is-ready img:nth-child(3) { animation-delay: 10s; }
.hero-bg.is-ready img:nth-child(4) { animation-delay: 15s; }
@keyframes hero-crossfade {
  0%, 100% { opacity: 0; }
  3% { opacity: 1; }
  22% { opacity: 1; }
  27% { opacity: 0; }
}
/* with JS disabled, .is-ready never gets added — fall back to the old
   animate-unconditionally behaviour rather than a permanently black hero */
@media (scripting: none) {
  .hero-bg img { animation: hero-crossfade 20s infinite; }
  .hero-bg img:nth-child(1) { animation-delay: 0s; }
  .hero-bg img:nth-child(2) { animation-delay: 5s; }
  .hero-bg img:nth-child(3) { animation-delay: 10s; }
  .hero-bg img:nth-child(4) { animation-delay: 15s; }
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,13,10,0.8) 0%, rgba(14,13,10,0.6) 45%, rgba(14,13,10,0.88) 100%);
}
@media (prefers-reduced-motion: reduce) { .hero-bg img { animation: none; opacity: 0; } .hero-bg img:first-child { opacity: 1; } }

.hero-inner, .hero-scroll { position: relative; z-index: 2; }
/* .hero reserves --nav-h at its top (only) so content clears the fixed
   nav pill, but that reservation isn't matched at the bottom — left
   alone, flexbox centers .hero-inner within the space below that
   reserved band, landing it --nav-h/2 lower than the hero's true
   visual centre. Pull it back up by that same amount. */
.hero-inner { padding: 64px 0; margin-top: calc(var(--nav-h) * -1); display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 {
  color: #fff; font-size: clamp(2rem, 5.6vw, 5.6rem); font-weight: 700; max-width: 24ch; white-space: nowrap;
}
@media (max-width: 600px) {
  .hero h1 { white-space: normal; }
}
.hero-sub { margin-top: 24px; font-size: clamp(0.78rem, 2.6vw, 1.3rem); color: rgba(255,255,255,0.9); display: flex; flex-direction: column; align-items: center; }
.hero-sub-line { display: block; white-space: nowrap; }
/* on narrow phones even the smallest clamped size can't fit a full line
   of hero copy without wrapping — forcing nowrap there clips the text
   past the screen edge instead of reflowing, so let it wrap below that
   width (wider screens keep the one-line-per-phrase layout) */
@media (max-width: 600px) {
  .hero-sub-line { white-space: normal; max-width: 34ch; margin: 0 auto; }
}
.hero-sub .mark { font-weight: 700; }
[data-typewriter]::after {
  content: "|"; display: inline-block; margin-left: 2px; color: var(--color-mark-text);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { [data-typewriter]::after { animation: none; } }
.hero-actions { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
/* the hero always sits on a dark photo backdrop regardless of site theme,
   so the default hover states (which assume a light page background)
   would otherwise fade into it — force a high-contrast amber hover here */
.hero .btn-primary:hover { background: var(--color-amber); color: var(--color-mark-text); }
.hero .btn-outline:hover { background: var(--color-amber); color: var(--color-mark-text); border-color: var(--color-amber); }
.hero-scroll { position: absolute; right: 24px; bottom: 28px; display: flex; align-items: center; gap: 10px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.hero-scroll .line { width: 1px; height: 40px; background: rgba(255,255,255,0.4); position: relative; overflow: hidden; }
.hero-scroll .line::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: #fff; animation: scrollline 1.8s ease-in-out infinite; }
@keyframes scrollline { 50% { top: 100%; } 100% { top: 100%; } }

/* marquee strip under hero */
.marquee { background: var(--color-amber); color: var(--color-mark-text); overflow: hidden; border-top: 1px solid rgba(0,0,0,0.06); }
.marquee-track { display: flex; gap: 48px; white-space: nowrap; padding: 14px 0; animation: marquee 26s linear infinite; width: max-content; }
.marquee span { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 48px; }
.marquee .sep { color: rgba(22,33,26,0.4); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .hero-scroll .line::after { animation: none; }
}

/* =========================================================
   Latest updates carousel
   ========================================================= */
.updates { background: var(--color-bg); }
.carousel { position: relative; z-index: 2; }
.carousel-track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
/* sized so exactly 3 cards are visible per "page" — no partial 4th card peeking */
.carousel-card {
  scroll-snap-align: start; flex: 0 0 auto; width: calc((100% - 48px) / 3);
  background: var(--color-surface); overflow: hidden;
  box-shadow: var(--shadow-card); display: flex; flex-direction: column;
  border: 1px solid var(--color-line-soft);
}
@media (max-width: 900px) { .carousel-card { width: calc((100% - 24px) / 2); } }
@media (max-width: 640px) { .carousel-card { width: 100%; } }
.carousel-card { transition: box-shadow .25s ease, transform .25s ease; }
.carousel-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }
.carousel-card .thumb { aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.carousel-card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.carousel-card .thumb.thumb--logo { background: var(--color-surface); padding: 32px; }
.carousel-card .body { padding: 20px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tag-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tag {
  display: inline-block; align-self: flex-start; text-align: left;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 5px 10px; border-radius: var(--radius-pill); background: var(--color-primary-tint); color: var(--color-primary);
}
.tag--post { background: var(--color-blush); color: #8a4a34; }
.tag--project { background: var(--color-amber-tint); color: #8a5b12; }
.carousel-card h3 { font-size: 1.15rem; }
.carousel-card .meta { color: var(--color-ink-soft); font-size: 0.85rem; margin-top: auto; }

.carousel-controls { display: flex; gap: 12px; margin-top: 28px; justify-content: flex-end; }
.carousel-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--color-line); background: var(--color-surface);
  display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease;
}
.carousel-btn:hover { background: var(--color-ink); color: var(--color-bg); }

.about-intro { max-width: 820px; margin: 0 auto; text-align: center; }
.about-intro .placeholder-video { margin-bottom: 40px; }
.about-intro h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 12px; }
.about-intro p { margin-top: 18px; color: var(--color-ink-soft); }

/* =========================================================
   Placeholder media
   ========================================================= */
.placeholder-video {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden;
  background: linear-gradient(135deg, #262117, #0e0d0a); display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.placeholder-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.placeholder-video .play {
  position: relative; z-index: 1;
  width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.placeholder-video .play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.placeholder-video .label {
  position: absolute; z-index: 1; left: 18px; bottom: 16px; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(0,0,0,0.35); padding: 6px 12px; border-radius: var(--radius-pill);
}

/* =========================================================
   Cards: projects / blog / services / values / stats
   ========================================================= */
.grid { display: grid; gap: 28px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; } }

/* =========================================================
   Capabilities — a scattered, gently-bobbing cluster of chips
   that magnify dock-icon-style on hover (desktop) or tap (mobile,
   handled in JS since it needs a timed "stay magnified" state)
   ========================================================= */
.capability-scatter { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; padding: 28px 0 12px; }
.capability-chip {
  position: relative; padding: 16px 26px; border-radius: var(--radius-pill); border: 1px solid var(--color-line);
  background: var(--color-surface); font-weight: 700; font-size: 0.92rem; color: var(--color-ink);
  box-shadow: var(--shadow-card);
  animation: capability-float 6s ease-in-out infinite;
  transition: scale .3s cubic-bezier(.34,1.56,.64,1), translate .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.capability-chip:nth-child(10n+1) { rotate: -4deg; margin-top: 8px; animation-delay: 0s; }
.capability-chip:nth-child(10n+2) { rotate: 3deg; margin-top: -6px; animation-delay: .5s; }
.capability-chip:nth-child(10n+3) { rotate: -2deg; margin-top: 12px; animation-delay: 1s; }
.capability-chip:nth-child(10n+4) { rotate: 4deg; margin-top: -4px; animation-delay: 1.5s; }
.capability-chip:nth-child(10n+5) { rotate: -3deg; margin-top: 4px; animation-delay: 2s; }
.capability-chip:nth-child(10n+6) { rotate: 2deg; margin-top: -8px; animation-delay: 2.5s; }
.capability-chip:nth-child(10n+7) { rotate: -4deg; margin-top: 10px; animation-delay: 3s; }
.capability-chip:nth-child(10n+8) { rotate: 3deg; margin-top: -2px; animation-delay: 3.5s; }
.capability-chip:nth-child(10n+9) { rotate: -2deg; margin-top: 6px; animation-delay: 4s; }
.capability-chip:nth-child(10n) { rotate: 4deg; margin-top: -6px; animation-delay: 4.5s; }
@keyframes capability-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
.capability-chip.is-magnified {
  animation: none; rotate: 0deg; scale: 1.22; translate: 0 -6px; z-index: 5;
  background: var(--color-amber); border-color: var(--color-amber); color: var(--color-mark-text);
  box-shadow: 0 22px 40px -14px rgba(16, 16, 16, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .capability-chip { animation: none; }
}
@media (max-width: 640px) {
  .capability-chip { padding: 13px 20px; font-size: 0.86rem; }
}

.filter-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.filter-tabs button {
  padding: 10px 20px; border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: transparent;
  font-weight: 700; font-size: 0.88rem; color: var(--color-ink-soft); transition: all .2s ease;
  text-align: center; white-space: nowrap;
}
.filter-tabs button.is-active, .filter-tabs button:hover { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }

.project-card {
  position: relative; overflow: hidden; background: var(--color-primary-dark);
  color: #fff; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4/5;
}
.project-card .thumb { position: absolute; inset: 0; }
.project-card .thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; transition: transform .5s ease, opacity .3s ease; }
.project-card .thumb.thumb--logo { background: var(--color-surface); display: flex; align-items: center; justify-content: center; padding: 40px; }
.project-card .thumb.thumb--logo img { width: 100%; height: 100%; object-fit: contain; opacity: 1; }
.project-card:hover .thumb.thumb--logo img { transform: none; }
.project-card:hover .thumb img { transform: scale(1.07); opacity: 1; }
.project-card .scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,13,10,0.95) 0%, rgba(14,13,10,0.2) 55%, rgba(14,13,10,0) 100%); transition: background .25s ease; }
.project-card:hover .scrim { background: rgba(14,13,10,0.88); }
.project-card .body { position: relative; padding: 28px; }
.project-card .cat { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-amber); }
.project-card h3 { color: #fff; font-size: 1.5rem; margin-top: 10px; }
.project-card .client { color: rgba(255,255,255,0.72); margin-top: 6px; font-size: 0.92rem; }
.project-card .desc {
  color: rgba(255,255,255,0.85); font-size: 0.9rem; line-height: 1.5;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease;
}
.project-card:hover .desc, .project-card:focus-within .desc { max-height: 140px; opacity: 1; margin-top: 12px; }
@media (max-width: 640px) { .project-card { aspect-ratio: 3/4; } }

.blog-card {
  background: var(--color-surface); border: 1px solid var(--color-line-soft); border-radius: var(--radius-md);
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s ease, transform .25s ease;
}
.blog-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }
.blog-card .thumb { aspect-ratio: 16/10; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.blog-card .body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-card h3 { font-size: 1.2rem; }
.blog-card .excerpt { color: var(--color-ink-soft); font-size: 0.95rem; }
.blog-card .meta { margin-top: auto; display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--color-ink-soft); padding-top: 12px; border-top: 1px solid var(--color-line-soft); }

.service-card {
  background: var(--color-surface); border-radius: var(--radius-lg); padding: 36px 32px; border: 1px solid var(--color-line-soft);
  display: flex; flex-direction: column; gap: 16px; transition: border-color .2s ease, transform .2s ease;
}
.service-card:hover { transform: translateY(-4px); border-color: var(--color-coral); }
.service-card .num { font-family: var(--font-display); font-size: 0.95rem; color: var(--color-coral); font-weight: 600; }
.service-card h3 { font-size: 1.35rem; }
.service-card p { color: var(--color-ink-soft); }
.service-card ul { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.service-card ul li { font-size: 0.9rem; color: var(--color-ink-soft); padding-left: 18px; position: relative; }
.service-card ul li::before { content: "—"; position: absolute; left: 0; color: var(--color-coral); }
/* "What We Offer" cards specifically (not the Free Content resource
   cards, which reuse .service-card too) — number and dash bullets are
   always yellow in dark mode; the card border stays a light grey
   outline at rest and only turns yellow on hover */
:root[data-theme="dark"] #track-four-ways-grid .service-card { border-color: var(--color-line); }
:root[data-theme="dark"] #track-four-ways-grid .service-card:hover { border-color: var(--color-amber); }
:root[data-theme="dark"] #track-four-ways-grid .service-card .num,
:root[data-theme="dark"] #track-four-ways-grid .service-card ul li::before { color: var(--color-amber); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #track-four-ways-grid .service-card { border-color: var(--color-line); }
  :root:not([data-theme="light"]) #track-four-ways-grid .service-card:hover { border-color: var(--color-amber); }
  :root:not([data-theme="light"]) #track-four-ways-grid .service-card .num,
  :root:not([data-theme="light"]) #track-four-ways-grid .service-card ul li::before { color: var(--color-amber); }
}

/* =========================================================
   Stat showcase (Home) — a Slack-style two-column feature
   list: three collapsed one-line "drawers" on the left, each
   expanding on click to reveal a title, a short paragraph and
   a link, while the other two collapse back to one line; the
   big number + caption underneath, and the image on the right,
   crossfade to match whichever drawer is open (main.js drives
   all three; this file only does the visual states).

   Every drawer body reserves the SAME fixed max-height (rather
   than auto-height per drawer), so .stat-drawers' total height
   — collapsed titles + exactly one open body's worth of space —
   never changes no matter which drawer is open. That keeps the
   button below the section, and the section itself, from
   shifting on every click. The number/caption and the image use
   the same crossfade-between-two-stacked-layers technique as
   elsewhere on the site, so their box size also stays constant
   while their content swaps. */
.stat-showcase { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; margin-top: 48px; }
.stat-drawers { border-top: 1px solid var(--color-line); }
.stat-drawer {
  display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--color-line);
  padding: 20px 0; cursor: pointer; font: inherit; color: var(--color-heading);
}
.stat-drawer-title { display: block; font-weight: 700; font-size: 1.08rem; transition: color .2s ease; }
.stat-drawer:hover .stat-drawer-title { color: var(--color-coral); }
.stat-drawer.is-active .stat-drawer-title { color: var(--color-coral); }
/* a fixed `height` (not max-height, which only caps — it doesn't force
   shorter content to fill the space) so every drawer's open body takes
   up exactly the same amount of room regardless of how many lines its
   own paragraph happens to wrap to, keeping .stat-drawers' total height
   identical no matter which drawer is open */
.stat-drawer-body {
  display: block; height: 0; overflow: hidden; opacity: 0;
  transition: height .4s ease, opacity .3s ease, margin-top .4s ease;
}
.stat-drawer-body p { color: var(--color-ink-soft); font-size: 0.95rem; line-height: 1.55; max-width: 46ch; }
.stat-drawer-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; font-size: 0.85rem; color: var(--color-coral); }
.stat-drawer-link .arrow { transition: transform .18s ease; }
.stat-drawer:hover .stat-drawer-link .arrow { transform: translateX(4px); }
.stat-drawer.is-active .stat-drawer-body { height: 112px; opacity: 1; margin-top: 8px; }
.stat-showcase-number { position: relative; height: 92px; margin-top: 32px; }
.stat-showcase-num-layer {
  position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease;
}
.stat-showcase-num-layer.is-active { opacity: 1; }
.stat-showcase-num-layer .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 3.6vw, 2.9rem); color: var(--color-coral); line-height: 1; }
.stat-showcase-num-layer p { margin-top: 8px; font-weight: 700; color: var(--color-heading); max-width: 40ch; }
:root[data-theme="dark"] .stat-drawer:hover .stat-drawer-title,
:root[data-theme="dark"] .stat-drawer.is-active .stat-drawer-title,
:root[data-theme="dark"] .stat-drawer-link,
:root[data-theme="dark"] .stat-showcase-num-layer .num { color: var(--color-amber); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat-drawer:hover .stat-drawer-title,
  :root:not([data-theme="light"]) .stat-drawer.is-active .stat-drawer-title,
  :root:not([data-theme="light"]) .stat-drawer-link,
  :root:not([data-theme="light"]) .stat-showcase-num-layer .num { color: var(--color-amber); }
}
.stat-showcase-right { position: relative; }
.stat-showcase-image {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 24px 64px -24px rgba(16,16,16,0.35);
}
.stat-showcase-image img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s ease;
}
.stat-showcase-image img.is-active { opacity: 1; }
@media (max-width: 900px) {
  .stat-showcase { grid-template-columns: 1fr; gap: 32px; }
  .stat-showcase-right { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-drawer-body, .stat-showcase-num-layer, .stat-showcase-image img, .stat-drawer-link .arrow { transition: none; }
}

.value-card {
  padding: 28px; border-radius: var(--radius-md); background: var(--color-bg-alt); border: 1px solid var(--color-line);
  transition: box-shadow .2s ease, transform .2s ease;
}
.value-card:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }
.value-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.value-card p { color: var(--color-ink-soft); font-size: 0.95rem; }

/* =========================================================
   About — T.I.R.E.S+ interactive letter board
   ========================================================= */
.tires-board { margin-top: 40px; }
/* min-height reserves room for the row at rest — the active tile now
   enlarges via transform: scale (see .is-active below) rather than by
   changing width/height, so it never alters any element's layout box;
   the row's flex-wrap line count — and therefore its height — can't
   change when a letter is toggled, which is what previously caused a
   visible resize/jump on mobile (motion-sickness-inducing) each time a
   tile was opened. */
.tires-row { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; gap: 18px; width: 100%; min-height: 136px; }
/* each tile's shape (an irregular "paint splotch", via asymmetric
   border-radius) and base width/height come from --blob-w/--blob-h and
   an inline border-radius set per letter in about.njk — no two letters
   share the same silhouette or size */
.tires-tile {
  position: relative; font-family: var(--font-display); font-weight: 800; cursor: pointer;
  width: var(--blob-w); height: var(--blob-h); display: flex; align-items: center; justify-content: center;
  background: var(--color-amber); border: none; color: var(--color-mark-text); font-size: 2rem;
  transition: transform .3s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.tires-tile:hover { box-shadow: 0 10px 28px -12px rgba(16,16,16,0.35); }
.tires-tile.is-active {
  transform: scale(1.28); background: var(--color-coral); color: #fff;
  box-shadow: 0 10px 28px -12px rgba(16,16,16,0.35); z-index: 2;
}
/* dark mode swaps which brand color means "selected" vs "unselected" */
:root[data-theme="dark"] .tires-tile { background: var(--color-coral); color: #fff; }
:root[data-theme="dark"] .tires-tile.is-active { background: var(--color-amber); color: var(--color-mark-text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tires-tile { background: var(--color-coral); color: #fff; }
  :root:not([data-theme="light"]) .tires-tile.is-active { background: var(--color-amber); color: var(--color-mark-text); }
}
.tires-tile-letter { font-family: "Permanent Marker", var(--font-display); font-weight: 400; line-height: 1; }
/* all six description panels are stacked in the same grid cell and kept
   permanently in the layout (crossfaded with opacity, never unmounted),
   so this box's height is always the tallest panel's height — toggling
   a letter never grows or shrinks the section around it */
.tires-desc { margin-top: 28px; text-align: center; max-width: 60ch; margin-left: auto; margin-right: auto; display: grid; }
.tires-desc-panel {
  grid-area: 1 / 1; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.tires-desc-panel.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tires-desc-panel h3 { font-size: 1.15rem; color: var(--color-heading); }
.tires-desc-panel p { margin-top: 8px; color: var(--color-ink-soft); }
@media (max-width: 640px) {
  .tires-row { gap: 10px; justify-content: center; min-height: 92px; }
  .tires-tile { width: 56px; height: 56px; font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tires-tile, .tires-desc-panel { transition: none; }
}

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-block { text-align: left; }
.stat-block .num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--color-amber); font-weight: 600; }
.stat-block .label { margin-top: 8px; font-size: 0.92rem; color: rgba(255,255,255,0.75); }
.section--dark .stat-block .num { color: var(--color-amber); }
.section--surface .stat-block .num, .section--alt .stat-block .num { color: var(--color-coral); }
.section--surface .stat-block .label, .section--alt .stat-block .label { color: var(--color-ink-soft); }
/* case-study stat numbers switch to the brand yellow in Dark Mode for
   readability against the now dark-grey surface/alt backgrounds */
:root[data-theme="dark"] .section--surface .stat-block .num, :root[data-theme="dark"] .section--alt .stat-block .num { color: var(--color-amber); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .section--surface .stat-block .num, :root:not([data-theme="light"]) .section--alt .stat-block .num { color: var(--color-amber); }
}

/* process steps (services) — a scattered, polaroid-pinned take on a
   step list: each snapshot tilts, alternates sides and straightens up
   on hover, rather than reading as a strict numbered table */
.process { display: flex; flex-direction: column; gap: 12px; }
.process-step {
  display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: center;
  padding: 28px 0;
}
.process-step:nth-child(even) { grid-template-columns: 1fr 260px; }
.process-step:nth-child(even) .process-step-media { order: 2; }
.process-step:nth-child(even) .process-step-copy { order: 1; text-align: right; }
.process-step:nth-child(even) .process-step-copy p { margin-left: auto; }
.process-step:nth-child(3n+1) { margin-left: 0; }
.process-step:nth-child(3n+2) { margin-left: 24px; }
.process-step:nth-child(3n) { margin-right: 24px; }

.process-step-media {
  position: relative; background: var(--color-surface); padding: 12px 12px 34px;
  box-shadow: var(--shadow-card); transform: rotate(-3deg); transition: transform .3s ease;
}
.process-step:nth-child(even) .process-step-media { transform: rotate(3deg); }
.process-step:nth-child(3n) .process-step-media { transform: rotate(-2deg); }
.process-step:hover .process-step-media { transform: rotate(0deg) scale(1.04); }
.process-step-media .thumb { aspect-ratio: 4/3; overflow: hidden; }
.process-step-media .thumb img { width: 100%; height: 100%; object-fit: cover; }

.process-step-badge {
  position: absolute; top: -20px; left: -20px; width: 54px; height: 54px; border-radius: 50%;
  background: var(--color-amber); color: var(--color-mark-text); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; box-shadow: var(--shadow-card);
  transform: rotate(-10deg); z-index: 2;
}
.process-step:nth-child(even) .process-step-badge { left: auto; right: -20px; transform: rotate(10deg); }

.process-step-copy h3 { font-size: 1.5rem; }
.process-step-copy p { margin-top: 10px; color: var(--color-ink-soft); max-width: 42ch; }

@media (max-width: 800px) {
  .process-step, .process-step:nth-child(even) {
    grid-template-columns: 1fr; gap: 24px; margin-left: 0 !important; margin-right: 0 !important;
  }
  .process-step:nth-child(even) .process-step-media, .process-step .process-step-media { order: 0; }
  .process-step:nth-child(even) .process-step-copy, .process-step .process-step-copy { order: 1; text-align: center; }
  .process-step:nth-child(even) .process-step-copy p, .process-step-copy p { margin-left: auto; margin-right: auto; }
  .process-step-media { max-width: 340px; margin: 0 auto; }
}

/* logos / testimonial strip */
.logo-strip { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between; opacity: 0.75; }
.logo-strip img { height: 28px; width: auto; filter: grayscale(1); }
.testimonial {
  background: var(--color-surface); border-radius: var(--radius-lg); padding: 48px; border: 1px solid var(--color-line-soft);
}
.testimonial blockquote { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 500; font-style: italic; color: var(--color-heading); }
.testimonial cite { display: block; margin-top: 24px; font-style: normal; font-weight: 700; }
.testimonial cite span { display: block; font-weight: 500; color: var(--color-ink-soft); font-size: 0.9rem; margin-top: 2px; }

/* =========================================================
   Our Clients — single-row continuous logo marquee
   ========================================================= */
.client-marquee { position: relative; z-index: 2; }
.client-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.client-track {
  display: flex; align-items: center; gap: 28px; width: max-content;
  animation: client-scroll 44s linear infinite;
}
.client-track .logo-chip {
  display: flex; align-items: center; justify-content: center; flex: none;
  padding: 20px 32px; background: var(--color-surface); border: 1px solid var(--color-line-soft); border-radius: var(--radius-md);
}
.client-track .logo-chip img { height: 56px; width: auto; display: block; }
@keyframes client-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .client-track { animation: none; } }

/* =========================================================
   Testimonials — feature layout with a tab per client logo
   ========================================================= */
.testimonial-feature-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; margin-top: 44px; }
.testimonial-quote-mark {
  display: block; font-family: var(--font-display); font-weight: 800; font-size: 3.6rem; line-height: 1;
  color: var(--color-amber); margin-bottom: 6px;
}
/* every slide's quote+name is rendered at once, stacked in the same grid
   cell (like the TIRES+ panels above) and crossfaded with opacity only —
   so this box's height is always the tallest slide's height, and
   switching testimonials never grows/shrinks the dark section around it
   (a resize there reads as the whole page jumping, which is what was
   causing motion sickness on mobile). */
.testimonial-quote-stack { display: grid; }
.testimonial-quote-panel {
  grid-area: 1 / 1; opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.testimonial-quote-panel.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.testimonial-quote-panel blockquote {
  margin: 0; font-family: var(--font-body); font-size: clamp(1.25rem, 2.3vw, 1.7rem); font-weight: 500; font-style: normal;
  line-height: 1.45; color: #fff;
}
.testimonial-quote-panel blockquote em { font-style: italic; }
.testimonial-quote-panel cite { display: block; margin-top: 20px; font-style: normal; font-weight: 700; color: var(--color-amber); }
.testimonial-feature-video { background: #000; overflow: hidden; aspect-ratio: 16/9; }
.testimonial-feature-video iframe { width: 100%; height: 100%; display: block; border: 0; }
.testimonial-tabs { display: flex; justify-content: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.testimonial-tab {
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 140px; height: 64px; padding: 10px 18px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-md);
  transition: background-color .2s ease, border-color .2s ease;
}
.testimonial-tab img { max-width: 100%; max-height: 100%; width: auto; height: auto; opacity: 0.75; transition: opacity .2s ease; }
.testimonial-tab:hover img { opacity: 0.9; }
.testimonial-tab.is-active { background: rgba(251, 212, 44, 0.12); border-color: var(--color-amber); }
.testimonial-tab.is-active img { opacity: 1; }
@media (max-width: 800px) {
  .testimonial-feature-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-quote-panel { transition: none; }
}

/* =========================================================
   Single case study / article
   ========================================================= */
/* padding-top reserves room for the fixed nav (as a hard floor flexbox
   won't center content above, so a long h1 like About's can never land
   under the nav), then justify-content:center balances whatever's left
   of min-height around the content below that floor */
.entry-hero {
  min-height: 46vh; padding: calc(var(--nav-h) + 48px) 0 48px; display: flex; flex-direction: column; justify-content: center;
  text-align: center; position: relative; overflow: hidden;
}
.entry-hero .container { display: flex; flex-direction: column; align-items: center; }
.entry-hero .meta-row { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 20px; color: var(--color-ink-soft); font-size: 0.92rem; }
.entry-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); max-width: 20ch; }
.entry-hero .dek { margin-top: 20px; font-size: 1.15rem; color: var(--color-ink-soft); max-width: 65ch; }
.entry-cover { margin-top: 48px; }
.entry-cover img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16/8; object-fit: cover; }

/* full-bleed cover hero (case study + blog post) */
.cover-hero {
  position: relative; min-height: 66vh; display: flex; flex-direction: column; justify-content: center;
  color: #fff; overflow: hidden; padding-top: var(--nav-h); background: var(--color-primary-dark);
}
.cover-hero .cover-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cover-hero .scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(14,13,10,0.94) 0%, rgba(14,13,10,0.45) 60%, rgba(14,13,10,0.15) 100%);
}
.cover-hero .inner {
  position: relative; z-index: 2; padding: 64px 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cover-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.2vw, 3.4rem); max-width: 22ch; margin-top: 16px; }
.cover-hero .dek { margin-top: 18px; font-size: 1.1rem; color: rgba(255,255,255,0.85); max-width: 62ch; }
.util-row { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.util-row--left { justify-content: flex-start; }
.util-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center; color: #fff; flex: none;
  position: relative; cursor: pointer;
}
.util-btn svg { width: 16px; height: 16px; }

/* Share popover + copy-link toast, anchored to the Share util-btn */
.share-menu {
  display: none; flex-direction: column; gap: 2px;
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 170px; padding: 8px; z-index: 30;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.share-menu.is-open { display: flex; }
.share-menu a, .share-menu button {
  display: block; width: 100%; text-align: left; padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 600; font-family: var(--font-body); color: var(--color-ink);
  background: none; border: none; cursor: pointer;
}
.share-menu a:hover, .share-menu button:hover { background: var(--color-bg-alt); }
.share-toast {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--color-ink); color: var(--color-bg); font-size: 0.75rem; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-pill); white-space: nowrap;
  opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none;
}
.share-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* horizontal "on this page" tab nav (case study) — sticks to the very
   top of the viewport on desktop; the fixed nav pill fades out via
   [data-fade-nav] before this bar reaches the top, so the two never
   overlap. It fades back out for good (via .is-hidden, toggled by
   main.js) once the Team section comes up, since there's nothing left
   on the page for it to jump to. */
.tab-nav-wrap {
  position: sticky; top: 0; z-index: 20; background: var(--color-surface); border-bottom: 1px solid var(--color-line);
  transition: opacity .25s ease;
}
.tab-nav-wrap.is-hidden { opacity: 0; pointer-events: none; }
/* on mobile this bar never floats — it stays in normal document flow
   and scrolls away with the rest of the page like any other element */
@media (max-width: 980px) {
  .tab-nav-wrap { position: static; }
}
.tab-nav { display: flex; gap: 8px; justify-content: center; overflow-x: auto; padding: 18px 0; scrollbar-width: none; }
.tab-nav::-webkit-scrollbar { display: none; }
.tab-nav a { padding: 10px 18px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.86rem; color: var(--color-ink-soft); white-space: nowrap; border: 1px solid var(--color-line); flex: none; }
/* on narrow screens the pill list is usually wider than the viewport and
   scrolls horizontally — give it its own side gutters (so the first/last
   pill isn't flush against the screen edge) and a soft edge fade so a
   partially-visible pill reads as "more to scroll to", not a clipped/
   broken button */
@media (max-width: 700px) {
  .tab-nav-wrap { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); }
  .tab-nav { padding-left: 20px; padding-right: 20px; }
  /* On mobile the pill list almost always overflows and needs its own
     horizontal scroll. Two things otherwise clip/obscure it:
     - .tab-nav also carries .case-study-col (max-width:900px; margin:0
       auto;), a constraint meant for the desktop reading column — drop
       it here so the bar uses the full (margin-only) screen width
       instead of trying to center within that narrower column.
     - justify-content:center (kept for desktop, where the pills usually
       fit) breaks horizontal scrolling once content overflows: browsers
       still center the overflowing row around the midpoint, which pins
       part of it outside the reachable scroll range. flex-start keeps
       the whole row scrollable from its natural start. */
  .tab-nav.case-study-col { max-width: none; margin: 0; }
  .tab-nav { justify-content: flex-start; }
}
.tab-nav a.is-active, .tab-nav a:hover { background: var(--color-ink); color: var(--color-bg); border-color: var(--color-ink); }

/* tinted dek callout box (case study) */
.dek-callout { background: var(--color-primary-tint); padding: 36px 40px; }
.dek-callout p { font-size: 1.15rem; font-weight: 500; color: var(--color-ink); }
@media (max-width: 700px) { .dek-callout { padding: 28px 26px; text-align: center; } }
/* the case-study's large pulled-quote intro switches to white in Dark
   Mode for readability against the tinted box's dark background */
:root[data-theme="dark"] .dek-callout p { color: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dek-callout p { color: #ffffff; }
}
/* project/blog listing "View the project" / "Read the piece" / "Read more"
   links turn brand yellow in Dark Mode */
:root[data-theme="dark"] .arrow-link,
:root[data-theme="dark"] .explainer-banner .btn { color: var(--color-amber); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .arrow-link,
  :root:not([data-theme="light"]) .explainer-banner .btn { color: var(--color-amber); }
}

/* centred content column + "page" card — case study body reads as a
   single bounded page floating on the section background, instead of
   left-aligned text stranded in a wide container */
.case-study-col { max-width: 900px; margin: 0 auto; }
.case-study-page {
  max-width: 900px; margin: 0 auto; background: var(--color-surface);
  border: 1px solid var(--color-line); padding: 64px 72px;
}
@media (max-width: 700px) { .case-study-page { padding: 40px 24px; } }

/* project team credit strip */
.team-strip { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
.team-strip .member { display: flex; align-items: center; gap: 12px; }
.team-strip img { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.team-strip .name { font-weight: 700; font-size: 0.9rem; }
.team-strip .role { font-size: 0.8rem; color: var(--color-ink-soft); }

.entry-layout { display: grid; grid-template-columns: 220px 1fr; gap: 64px; align-items: flex-start; }
.entry-layout--rail { grid-template-columns: 1fr 300px; }
@media (max-width: 900px) { .entry-layout, .entry-layout--rail { grid-template-columns: 1fr; } }
/* below the breakpoint, the rail/TOC column collapses into the same
   single column as the article body (shown first, via order: -1) — left
   sticky there, it would stay pinned at top:24px for the entire scroll
   through the article, floating over and obscuring the text underneath
   it. Pin it only in the two-column desktop layout; let it scroll with
   the page like a normal block once stacked on mobile. */
@media (max-width: 900px) { .entry-layout--rail .rail, .entry-layout .toc { order: -1; position: static; } }

.toc { position: sticky; top: 24px; }
.toc .eyebrow { margin-bottom: 14px; }
.toc ol { display: flex; flex-direction: column; gap: 10px; counter-reset: toc; border-left: 2px solid var(--color-line); }
.toc ol li { counter-increment: toc; padding-left: 16px; }
.toc ol li a { font-size: 0.9rem; color: var(--color-ink-soft); }
.toc ol li a.is-active, .toc ol li a:hover { color: var(--color-coral); font-weight: 700; }

/* rail widget card — replaces the left TOC for the blog-post reference layout */
.rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }
.rail-card { background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: 26px 24px; }
.rail-card .eyebrow { margin-bottom: 12px; }
.rail-card ol { display: flex; flex-direction: column; }
.rail-card ol li a { display: block; padding: 10px 2px; font-size: 0.92rem; color: var(--color-ink-soft); border-bottom: 1px solid var(--color-line-soft); }
.rail-card ol li:last-child a { border-bottom: none; }
.rail-card ol li a.is-active, .rail-card ol li a:hover { color: var(--color-coral); font-weight: 700; }

.prose { max-width: 74ch; font-size: 1.08rem; color: var(--color-ink); }
.prose > * + * { margin-top: 22px; }
.prose h2 { font-size: 1.7rem; margin-top: 52px; scroll-margin-top: 96px; }
.prose h3 { font-size: 1.3rem; margin-top: 36px; scroll-margin-top: 96px; }
.prose p { color: var(--color-ink-soft); line-height: 1.75; }
.prose ul, .prose ol { padding-left: 22px; color: var(--color-ink-soft); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul > * + *, .prose ol > * + * { margin-top: 10px; }
.prose strong { color: var(--color-ink); }
.prose figure { margin-top: 36px; }
.prose figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--color-ink-soft); }
.prose a { color: var(--color-coral); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { opacity: 0.75; }
:root[data-theme="dark"] .prose a { color: var(--color-amber); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prose a { color: var(--color-amber); }
}

.pull-quote {
  border-left: 4px solid var(--color-coral); padding: 4px 0 4px 28px; font-family: var(--font-body);
  font-weight: 700; font-style: normal; font-size: 1.5rem; line-height: 1.35; color: var(--color-coral);
}
/* large pulled-quote text within case-study/blog prose switches to the
   brand yellow in Dark Mode for readability */
:root[data-theme="dark"] .pull-quote { color: var(--color-amber); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pull-quote { color: var(--color-amber); }
}

.callout-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; background: var(--color-primary-tint); border-radius: var(--radius-md); padding: 32px; }
@media (max-width: 700px) { .callout-stats { grid-template-columns: 1fr 1fr; } }
.callout-stats .num { font-family: var(--font-display); font-size: 2.1rem; color: var(--color-primary); font-weight: 600; }
.callout-stats .label { font-size: 0.85rem; color: var(--color-ink-soft); margin-top: 6px; }

.faq-item { border-top: 1px solid var(--color-line); }
.faq-item:last-child { border-bottom: 1px solid var(--color-line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-display); font-size: 1.1rem; color: var(--color-heading); }
.faq-q .icon { flex: none; width: 22px; height: 22px; position: relative; }
.faq-q .icon::before, .faq-q .icon::after { content: ""; position: absolute; background: currentColor; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.faq-q .icon::before { width: 14px; height: 2px; }
.faq-q .icon::after { width: 2px; height: 14px; transition: transform .2s ease; }
.faq-item.is-open .icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding-bottom: 22px; color: var(--color-ink-soft); max-width: 68ch; }

.related { border-top: 1px solid var(--color-line); }

.byline { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.byline img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: center; }
.byline .name { font-weight: 700; font-size: 0.92rem; }
.byline .role { font-size: 0.82rem; color: var(--color-ink-soft); }

/* =========================================================
   Blog overview — editorial layout (McKinsey Explainers style)
   ========================================================= */
/* alternating full-width image/text rows, then a compact horizontal
   thumb+text pair — matches the reference's top-section layout */
.feature-row {
  display: grid; grid-template-columns: 0.85fr 1fr; gap: 44px; align-items: center;
  padding: 44px 0; border-top: 1px solid var(--color-line);
  transition: transform .25s ease;
}
.feature-row:first-child { border-top: none; padding-top: 0; }
.feature-row .thumb { aspect-ratio: 4/3; overflow: hidden; transition: box-shadow .25s ease; display: flex; align-items: center; justify-content: center; }
.feature-row .thumb img { width: 100%; height: 100%; object-fit: contain; }
.feature-row:hover { transform: translateY(-2px); }
.feature-row:hover .thumb { box-shadow: var(--shadow-card); }
.feature-row h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-top: 12px; }
.feature-row p { margin-top: 12px; color: var(--color-ink-soft); }
.feature-row .arrow-link { margin-top: 14px; font-weight: 700; font-size: 0.85rem; color: var(--color-coral); display: inline-flex; align-items: center; gap: 6px; }
.feature-row .arrow-link .arrow { transition: transform .18s ease; }
.feature-row:hover .arrow-link .arrow { transform: translateX(4px); }
.feature-row--reverse { grid-template-columns: 1fr 0.85fr; }
.feature-row--reverse .thumb { order: 2; }
@media (max-width: 800px) {
  .feature-row, .feature-row--reverse { grid-template-columns: 1fr; }
  .feature-row--reverse .thumb { order: 0; }
}

.compact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 44px; border-top: 1px solid var(--color-line); }
.compact-card {
  display: flex; gap: 18px; align-items: flex-start; background: var(--color-surface);
  border: 1px solid var(--color-line); padding: 18px; transition: box-shadow .2s ease, transform .2s ease;
}
.compact-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.compact-card .thumb { width: 108px; height: 108px; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.compact-card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.compact-card .body { display: flex; flex-direction: column; gap: 6px; }
.compact-card h4 { font-size: 1rem; }
@media (max-width: 640px) { .compact-pair { grid-template-columns: 1fr; } .compact-card .thumb { width: 84px; height: 84px; } }

.explainer-banner {
  background: var(--color-primary-dark); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; color: #fff;
  transition: box-shadow .25s ease, transform .25s ease;
}
.explainer-banner:hover { box-shadow: var(--shadow-card); transform: translateY(-4px); }
.explainer-banner .thumb { aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.explainer-banner .thumb img { width: 100%; height: 100%; object-fit: contain; }
.explainer-banner .body { padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.explainer-banner h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.explainer-banner p { color: rgba(255,255,255,0.75); }
@media (max-width: 800px) { .explainer-banner { grid-template-columns: 1fr; } }

.filter-select {
  padding: 12px 42px 12px 20px; border-radius: var(--radius-pill); border: 1px solid var(--color-line);
  background-color: var(--color-surface); font-weight: 700; font-size: 0.88rem; font-family: inherit; color: var(--color-ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316140f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}

.explainer-textcard {
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; min-height: 100%;
  transition: box-shadow .2s ease, transform .2s ease;
}
.explainer-textcard:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.explainer-textcard h4 { font-size: 1.05rem; }
.explainer-textcard .arrow-link { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 0.85rem; color: var(--color-coral); display: inline-flex; align-items: center; gap: 6px; }
.explainer-textcard .arrow-link .arrow { transition: transform .18s ease; }
.explainer-textcard:hover .arrow-link .arrow { transform: translateX(4px); }

.newsletter-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.newsletter-form input {
  height: 52px; padding: 0 20px; border-radius: var(--radius-pill); border: 1px solid var(--color-line);
  font: inherit; background: var(--color-surface); color: var(--color-ink); min-width: 240px; box-sizing: border-box;
}
.newsletter-form .btn { height: 52px; box-sizing: border-box; }

.cta-box {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: 40px 44px; border: 1px solid var(--color-line);
}
.cta-box h3 { font-size: 1.4rem; }
.cta-box p { color: var(--color-ink-soft); margin-top: 8px; max-width: 46ch; }
/* On mobile the email input's own min-width (240px) plus the box's
   generous desktop padding was wider than the available screen space,
   pushing it past the box's right edge. Shrink the padding and let the
   form take the full row so the input can shrink to fit instead. */
@media (max-width: 560px) {
  .cta-box { padding: 28px 24px; }
  .newsletter-form { width: 100%; }
  .newsletter-form input { min-width: 0; width: 100%; }
  .newsletter-form .btn { width: 100%; }
}

/* =========================================================
   About — timeline: a center spine with years branching left
   and right, each with a small associated photo
   ========================================================= */
.timeline-v { position: relative; display: flex; flex-direction: column; gap: 56px; padding: 12px 0; }
.timeline-v::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--color-line); }
.timeline-v-item { position: relative; width: calc(50% - 32px); }
.timeline-v-item--left { margin-right: auto; }
.timeline-v-item--right { margin-left: auto; }
.timeline-v-item::after {
  content: ""; position: absolute; top: 30px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-coral); border: 3px solid var(--color-bg-alt); box-shadow: 0 0 0 1px var(--color-line); z-index: 1;
}
.timeline-v-item--left::after { right: -39px; }
.timeline-v-item--right::after { left: -39px; }
.timeline-v-card {
  background: transparent; border: none; padding: 0;
  display: flex; gap: 20px; align-items: flex-start;
}
/* the photo reads as a pinned polaroid snapshot, matching the Services
   "how we work" steps, rather than a plain enclosed thumbnail */
.timeline-v-media {
  width: 120px; flex: none; background: var(--color-surface); padding: 8px 8px 20px;
  box-shadow: var(--shadow-card); transform: rotate(-4deg); transition: transform .3s ease;
}
.timeline-v-item--right .timeline-v-media { transform: rotate(4deg); }
.timeline-v-card:hover .timeline-v-media { transform: rotate(0deg) scale(1.05); }
.timeline-v-media .thumb { aspect-ratio: 4/3; overflow: hidden; }
.timeline-v-media img { width: 100%; height: 100%; object-fit: cover; }
.timeline-v .yr { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--color-coral); }
.timeline-v h3 { font-size: 1.1rem; margin-top: 4px; }
.timeline-v p { margin-top: 8px; color: var(--color-ink-soft); font-size: 0.92rem; }
@media (max-width: 800px) {
  .timeline-v::before { left: 20px; }
  .timeline-v-item, .timeline-v-item--left, .timeline-v-item--right { width: calc(100% - 48px); margin-left: 48px; margin-right: 0; }
  .timeline-v-item--left::after, .timeline-v-item--right::after { left: -39px; right: auto; }
}
@media (max-width: 560px) {
  .timeline-v-card { flex-direction: column; }
  .timeline-v-media { width: 140px; }
}

/* =========================================================
   CTA band + footer
   ========================================================= */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 18ch; margin: 0 auto; }
.cta-band > .container > .btn { margin-top: 32px; }
.cta-band p { margin-top: 18px; color: rgba(244,239,228,0.75); max-width: 50ch; margin-left: auto; margin-right: auto; }

.site-footer { background: var(--color-primary-dark); color: rgba(244,239,228,0.85); padding: 80px 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-top h4 { color: #fff; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 18px; font-family: var(--font-body); }
.footer-top a { display: block; padding: 6px 0; font-size: 0.95rem; }
.footer-top a:hover { color: var(--color-amber); }
.footer-brand .brand .brand-logo { height: 32px; margin-top: 10px; margin-left: -10px; }
.footer-brand p { margin-top: 16px; max-width: 34ch; color: rgba(244,239,228,0.7); }
.footer-social { display: flex; gap: 14px; margin-top: 22px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(244,239,228,0.3); display: flex; align-items: center; justify-content: center; padding: 0; transition: background .2s ease, border-color .2s ease; }
.footer-social a:hover { background: var(--color-amber); border-color: var(--color-amber); color: var(--color-mark-text); }
.footer-social a svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid rgba(244,239,228,0.15); font-size: 0.82rem; color: rgba(244,239,228,0.6); flex-wrap: wrap; gap: 12px; }

/* Mobile: center the footer's stacked single column instead of leaving
   it left-aligned — reads better once every block spans the full
   screen width edge-to-edge rather than sitting in a multi-column grid. */
@media (max-width: 560px) {
  .footer-top { text-align: center; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-brand .brand .brand-logo { margin-left: 0; }
  .footer-social { justify-content: center; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* =========================================================
   Dark-mode toggle — small, unintrusive, fixed bottom-right
   ========================================================= */
.theme-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 80; background: none; border: none; padding: 4px; cursor: pointer; }
.theme-toggle-track {
  width: 54px; height: 30px; border-radius: var(--radius-pill); background: var(--color-primary-dark);
  border: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: space-between;
  position: relative; padding: 0 7px; box-shadow: var(--shadow-card);
}
.theme-toggle-track svg { width: 14px; height: 14px; color: rgba(255,255,255,0.75); position: relative; z-index: 1; }
.theme-toggle-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-amber); transition: transform .28s ease;
}
[data-theme="dark"] .theme-toggle-knob { transform: translateX(24px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle-knob { transform: translateX(24px); }
}
@media (max-width: 640px) { .theme-toggle { right: 14px; bottom: 14px; } }

/* =========================================================
   Scroll-reveal — subtle fade + rise applied via JS
   (main.js toggles .is-visible once an element enters view)
   ========================================================= */
.js-reveal { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s ease; }
.js-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js-reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Title highlight — a keyframe-scroll effect: as each named
   heading reaches the viewport, a highlighter-yellow mark
   sweeps in behind its text left-to-right, like someone
   marking it up with a highlighter pen as they read down the
   page (main.js toggles .is-highlighted once, via
   IntersectionObserver, on [.js-highlight-title]).
   ========================================================= */
.js-highlight-title { position: relative; }
/* the actual highlight paint lives on separate .highlight-mark elements
   (one per rendered text line, sized/positioned in main.js from the
   .highlight-sweep span's own getClientRects()) rather than on the text
   span itself — a mask/clip-path applied directly to a text element
   clips the text along with the background, which is exactly the bug
   this avoids. Each mark sits behind the text via z-index: -1. */
.highlight-mark {
  position: absolute; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--highlight-color, var(--color-amber)), var(--highlight-color, var(--color-amber)));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  /* an irregular, hand-inked band (wavy top/bottom, uneven ends) rather
     than a clean rectangle */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 110' preserveAspectRatio='none'%3E%3Cpath d='M3 55C40 40 90 62 140 46C190 32 260 58 320 42C360 34 385 50 397 58L396 90C370 98 330 82 290 94C240 108 180 86 130 96C90 104 45 92 4 88Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 110' preserveAspectRatio='none'%3E%3Cpath d='M3 55C40 40 90 62 140 46C190 32 260 58 320 42C360 34 385 50 397 58L396 90C370 98 330 82 290 94C240 108 180 86 130 96C90 104 45 92 4 88Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  transition: background-size 1s cubic-bezier(.22, .8, .25, 1);
}
.js-highlight-title.is-highlighted .highlight-mark { background-size: 100% 100%; }
/* white-text headings (dark sections, or any heading once Dark Mode
   flips --color-heading to white) use the cyan accent instead of
   amber, since a yellow mark under white text reads poorly */
.js-highlight-title--on-dark .highlight-mark { background-image: linear-gradient(var(--color-coral), var(--color-coral)); }
:root[data-theme="dark"] { --highlight-color: var(--color-coral); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --highlight-color: var(--color-coral); }
}
/* ...except a heading explicitly pinned to always-black text regardless
   of theme (e.g. one set via --color-primary-dark, which doesn't flip
   in Dark Mode) — that one should stay on amber in every theme */
.js-highlight-title--force-amber .highlight-mark { background-image: linear-gradient(var(--color-amber), var(--color-amber)) !important; }
@media (prefers-reduced-motion: reduce) {
  .highlight-mark { transition: none; background-size: 100% 100%; }
}

/* =========================================================
   Whiteboard circle — a hand-drawn, multi-loop scribble that
   draws itself around a Services step photo or About timeline
   photo as it scrolls into view, like someone circling a point
   on a whiteboard a few times in one stroke (main.js builds the
   inline <svg data-sketch-circle> path per element and toggles
   .is-drawn via IntersectionObserver — reveals scrolling down,
   un-draws in reverse scrolling back up). Sits below the process
   step's number badge (z-index 2) so an overlap never covers it,
   but above the plain, non-positioned photo underneath it.
   ========================================================= */
.sketch-circle-wrap { position: relative; }
.sketch-circle { position: absolute; overflow: visible; pointer-events: none; z-index: 1; }
/* shifted right/down from a symmetric inset so the loop sits centred
   over the photo instead of reading as off to the upper-left */
.process-step-media .sketch-circle { top: -32px; right: -122px; bottom: -92px; left: -2px; }
.timeline-v-media .sketch-circle { top: -12px; right: -48px; bottom: -36px; left: 0; }
.sketch-circle path {
  fill: none; stroke: var(--color-coral); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--sketch-len, 1000); stroke-dashoffset: var(--sketch-len, 1000);
  transition: stroke-dashoffset 1.6s cubic-bezier(.3, .7, .2, 1);
}
.sketch-circle-wrap.is-drawn .sketch-circle path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .sketch-circle path { transition: none; stroke-dashoffset: 0; }
}

/* generic utilities */
.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }