/* RKS Design — base styles and site chrome.

   Tokens live in tokens.css (extracted from the live Elementor kit) and are linked
   separately, in parallel, ahead of this file. Do not restate token values here:
   read them through var(). If a value you need has no token, add it to tokens.css.

   Deliberately small at standup. Archetype styles (Case Study, Service, Blog /
   Insight, About/Team, Contact/Form) get added as each template lands, per the
   template-first conversion model in website/migration/README.md.

   FONT NOTE: Poppins (weights 300/400/500/600) is now self-hosted. The woff2 files
   live in src/static/fonts/ and are declared with @font-face in tokens.css
   (font-display: swap); base.njk preloads the 400 and 600 weights (body + hero).
   Latin subset only, which covers all current content (basic Latin, plus the ®, ™,
   en dash and curly quotes the site uses). If a page ever needs latin-ext glyphs,
   add that subset file and a matching @font-face rather than widening these ranges. */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--ink); margin: 0 0 0.5em; }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-body); }
h3 { font-size: var(--fs-lead); font-weight: var(--fw-medium); }
p  { margin: 0 0 1em; }

a { color: var(--brand); }
a:hover, a:focus { color: var(--ink); }

/* Visible focus is a WCAG 2.x AA requirement and the first thing a keyboard audit
   checks. Never remove this without replacing it with something at least as clear. */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

.container {
  width: 80%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 0;
}

/* Keyboard users jump the nav with this. Off-screen until focused, then visible —
   `display: none` would remove it from the tab order and defeat the purpose. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* ── Header ─────────────────────────────────────────────────────────────────
   White logo + nav on a dark bar by default (inner pages); on the homepage it goes
   transparent and overlays the hero, matching the live site. */
.site-header {
  position: relative;
  z-index: 40;
  background: var(--ink);
  padding-block: 16px;
  transition: background .3s ease, backdrop-filter .3s ease, padding .3s ease, box-shadow .3s ease;
}
/* The homepage AND any inner page that opens on a full-bleed dark hero (`body.has-hero`,
   set by base.njk when the page body contains an svc-/cs-/pa-/about-/contact-hero) share
   the SAME overlay-nav behaviour: a transparent bar with white nav over the hero, turning
   into the frosted-glass bar once you scroll onto light content. The JS toggles .over-dark
   from the dark sections (hero/contact/footer) so the text stays white while a dark band is
   behind the header. */
:is(body.home, body.has-hero) .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0));
  padding-block: 22px;
}
:is(body.home, body.has-hero) .site-header.scrolled {
  padding-block: 12px;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
/* Over a light band: frosted-white bar. */
:is(body.home, body.has-hero) .site-header.scrolled:not(.over-dark) {
  background: rgba(255,255,255,0.72);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
/* Over a dark section (hero / contact / footer): subtle dark frosted bar. */
:is(body.home, body.has-hero) .site-header.scrolled.over-dark {
  background: rgba(20,20,20,0.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Inner pages (non-home): white header by default, frosted glass on scroll ──
   Pages without a dark hero get a white header bar with ink nav text. It is sticky,
   so once the page scrolls it turns into the same frosted-glass bar the homepage
   uses over light content. base.njk's scroll script toggles .scrolled at 40px. */
body:not(.home):not(.has-hero) .site-header {
  position: sticky;
  top: 0;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
body:not(.home):not(.has-hero) .site-nav a,
body:not(.home):not(.has-hero) .mega-trigger { color: var(--ink); }
body:not(.home):not(.has-hero) .site-header .button { border-color: var(--ink); color: var(--ink); }
body:not(.home):not(.has-hero) .site-header .button:hover,
body:not(.home):not(.has-hero) .site-header .button:focus { background: var(--ink); color: #fff; }
body:not(.home):not(.has-hero) .nav-burger span { background: var(--ink); }
body:not(.home):not(.has-hero) .site-header.scrolled {
  padding-block: 12px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header__brand { flex-shrink: 0; }
.site-header__logo { height: 42px; width: auto; display: block; }
/* Nav absolutely centred in the header, so it sits dead-centre regardless of the
   logo (left) and Contact button (right) widths. */
/* Nav fills the header inner and centres its list with flexbox (NOT a transform):
   a transform here would become the containing block for the fixed mega-menu panel
   and trap it at the nav's width instead of the viewport. pointer-events:none lets
   the transparent flanks pass clicks through to the logo (left) and Contact (right);
   the list + its links/buttons re-enable them. */
.site-nav { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: auto; pointer-events: none; }
.site-nav > ul { pointer-events: auto; }
.site-header__cta { flex-shrink: 0; }
.site-nav__cta { display: none; }
.site-nav ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: var(--fw-body);
}
.site-nav a:hover,
.site-nav a:focus { opacity: 0.7; }
/* Current-page indicator is for TOP-LEVEL nav links only (direct > ul > li > a); it must
   NOT reach the Services/Markets sub-links, or the item matching the current URL would
   dim/recolour inconsistently inside the panel (the "red highlight on Markets" report). */
.site-nav > ul > li > a[aria-current="page"] { opacity: 0.7; }
.site-nav .caret { font-size: 9px; opacity: 0.85; }
.site-header .button { border-color: #fff; color: #fff; padding: 9px 26px; border-radius: 28px; }
.site-header .button:hover, .site-header .button:focus { background: #fff; color: var(--ink); opacity: 1; }
/* Over a light band the nav + Contact flip to ink; over dark they stay white (base). */
:is(body.home, body.has-hero) .site-header.scrolled:not(.over-dark) .site-nav a,
:is(body.home, body.has-hero) .site-header.scrolled:not(.over-dark) .mega-trigger { color: var(--ink); }
:is(body.home, body.has-hero) .site-header.scrolled:not(.over-dark) .site-nav > ul > li > a[aria-current="page"] { color: var(--brand); }
:is(body.home, body.has-hero) .site-header.scrolled:not(.over-dark) .button { border-color: var(--ink); color: var(--ink); }
:is(body.home, body.has-hero) .site-header.scrolled:not(.over-dark) .button:hover,
:is(body.home, body.has-hero) .site-header.scrolled:not(.over-dark) .button:focus { background: var(--ink); color: #fff; }

/* ── Services mega-menu ─────────────────────────────────────────────────────
   The "Services" nav item is a toggle (no landing page, like the live) that opens a
   3-column panel (Strategy / Design / Development) from nav.serviceMenu, fixed just
   below the header. Shown on :hover / :focus-within (works with no JS) and via
   .is-open (the JS in base.njk adds click/touch toggling, a close-delay to bridge the
   gap to the panel, Escape, outside-click, and sets the panel's top to the live header
   height). Mirrors the live rksdesign.com Elementor mega menu. */
.has-mega { position: relative; }
.mega-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 15px; font-weight: var(--fw-body);
  color: #fff;                     /* base = over the dark hero; ink/white states track .site-nav a */
  background: none; border: 0; margin: 0; padding: 0; cursor: pointer;
}
.mega-trigger .caret { font-size: 9px; opacity: 0.85; transition: transform 0.2s ease; }

.mega {
  position: fixed; top: 74px; left: 0; right: 0; z-index: 39;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
  pointer-events: none;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega,
.has-mega.is-open .mega {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: auto;
}
/* Card sizing mirrors the live mega: a COMPACT ~800px card, LEFT-aligned to the site
   container (not full-width), dropping below the header. Measured off rksdesign.com:
   grid padding 24, column-gap 32, radius 8, header->link 20, link->link 16. */
/* The card sits in the site container (same measure as the header content) and
   right-aligns to the container's right edge, like the live. */
.mega__bar { width: 80%; max-width: 1600px; margin-inline: auto; }
/* Columns come from nav.serviceMenu, so lay them out adaptively (one even row for
   however many columns the nav defines) rather than hard-coding a count. */
.mega__inner {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: 32px; row-gap: 0;
  /* Right-aligned to the container's right edge (card right lines up with the Contact
     button). The no-JS fallback width; the JS below narrows it so the LEFT edge starts
     at the "Work" nav item. */
  width: 72%; margin-left: auto;
  background: #fff; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 24px 32px;
}
/* A hairline divider on the right of every column (3, incl. the trailing one, as on
   the live); the 32px column-gap seats it in the gap. */
.mega__col { border-right: 1px solid #e3e3e3; }
.mega__head {
  font-size: 15px; font-weight: var(--fw-medium); letter-spacing: 1px; line-height: 1;
  text-transform: uppercase; color: var(--ink); margin: 0 0 18px;
}
/* .mega scope beats the top-level `.site-nav ul` rules that otherwise leak into this
   vertical list: `gap: 40px` (wrong spacing) and `align-items: center` (which would
   centre the links instead of left-aligning them under their column header). */
.mega .mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.mega__list a { display: block; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 21px; font-weight: var(--fw-body); }
.mega__list a:hover, .mega__list a:focus { color: var(--brand-red); }
/* Active trigger: label turns raspberry + caret flips, matching the live. */
.has-mega:hover .mega-trigger,
.has-mega:focus-within .mega-trigger,
.has-mega.is-open .mega-trigger { color: var(--brand-red); }
.has-mega:hover .mega-trigger .caret,
.has-mega:focus-within .mega-trigger .caret,
.has-mega.is-open .mega-trigger .caret { transform: rotate(180deg); opacity: 1; }

/* Mobile (<=1024): the mega never renders. #site-nav is display:none there and the
   full-screen #mobile-menu overlay surfaces the same serviceMenu links instead. */

/* ── Markets dropdown ───────────────────────────────────────────────────────
   The "Markets" nav item is a toggle (no landing page, like the live) that opens a
   single-column panel from nav.marketMenu. It reuses .mega-trigger for the button
   (so it inherits the nav colour/scroll/mobile states), and a small fixed card that
   the JS in base.njk drops from the header bottom and left-aligns under the trigger.
   Shown on :hover / :focus-within (works with no JS) and via .is-open. Mirrors the
   live rksdesign.com Elementor Markets dropdown. */
.has-dropdown { position: relative; }
.dropdown {
  position: fixed; top: 74px; left: 0; z-index: 39;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s;
  pointer-events: none;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: auto;
}
/* .has-dropdown scope beats the top-level `.site-nav ul` / `.site-nav a` rules that
   otherwise leak into this list: `gap: 40px`, `align-items: center` and the inline-flex
   link display would space the items out and centre them instead of a tight left column. */
.has-dropdown .dropdown__list {
  list-style: none; margin: 0; padding: 14px 16px; min-width: 210px;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.has-dropdown .dropdown__list a { display: block; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 21px; font-weight: var(--fw-body); padding: 9px 6px; border-radius: 4px; }
.has-dropdown .dropdown__list a:hover, .has-dropdown .dropdown__list a:focus { color: var(--brand-red); opacity: 1; }
/* Active trigger: label turns raspberry + caret flips, matching the live + the mega. */
.has-dropdown:hover .mega-trigger,
.has-dropdown:focus-within .mega-trigger,
.has-dropdown.is-open .mega-trigger { color: var(--brand-red); }
.has-dropdown:hover .mega-trigger .caret,
.has-dropdown:focus-within .mega-trigger .caret,
.has-dropdown.is-open .mega-trigger .caret { transform: rotate(180deg); opacity: 1; }

/* Mobile (<=1024): the dropdown never renders. #site-nav is display:none there and
   the full-screen #mobile-menu overlay surfaces the same marketMenu links instead. */

/* Mobile hamburger; hidden on desktop. The spans transition so aria-expanded="true"
   can fold them into an X (see the mobile-menu block below). */
.nav-burger { display: none; position: relative; width: 28px; height: 20px; cursor: pointer; margin-left: auto; background: none; border: 0; padding: 0; -webkit-appearance: none; appearance: none; }
.nav-burger span { position: absolute; left: 0; right: 0; height: 2px; background: #fff; border-radius: 2px; transition: top .25s ease, transform .25s ease, opacity .2s ease, background .3s ease; }
.nav-burger span:nth-child(1) { top: 0; }
.nav-burger span:nth-child(2) { top: 9px; }
.nav-burger span:nth-child(3) { top: 18px; }
:is(body.home, body.has-hero) .site-header.scrolled:not(.over-dark) .nav-burger span { background: var(--ink); }

/* ── Mobile full-screen menu (<=1200px) ─────────────────────────────────────
   The burger's target is #mobile-menu (base.njk, just after the header): a fixed
   ink takeover in the Oryn mould: blurred near-black backdrop that fades and
   settles in from a slight scale, large light-weight primary links, Services and
   Markets surfaced as labelled columns, Contact as the standard pill CTA, and a
   social row pinned to the bottom. It sits at z-index 39, one below the header
   bar (40), so the logo and the burger (folded into an X) stay on top of it;
   body.nav-open strips the bar's background in every header colour state so only
   the overlay reads as chrome, and locks body scroll.
   The brand red #EC1308 (matched to the logo mark) is reserved for the large
   active/hover primary links (3.9:1 on the ink backdrop: passes AA at large-text
   scale, so small text on the overlay stays white) and for non-text accents (label ticks, current-page
   underlines), matching how the blog system uses it.
   Desktop never sees any of this: the base rule below hides the overlay and
   every other rule lives inside the <=1024 block. */
.mobile-menu { display: none; }

@media (max-width: 1200px) {
  body.nav-open { overflow: hidden; }

  .mobile-menu {
    position: fixed; inset: 0; z-index: 39;
    display: block;
    background: rgba(20, 20, 20, 0.94);       /* --bl-dark at 94%, like the blog dark bands */
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: scale(1.02);
    transition: opacity .35s ease, transform .4s ease, visibility 0s linear .4s;
  }
  .mobile-menu.is-open {
    opacity: 1; visibility: visible; transform: scale(1);
    transition: opacity .35s ease, transform .4s ease;
  }
  .mobile-menu__inner {
    display: flex; flex-direction: column; gap: 26px;
    min-height: 100%;
    padding: 96px 0 max(28px, env(safe-area-inset-bottom));
  }

  .mobile-menu__primary { list-style: none; margin: 0; padding: 0; }
  .mobile-menu__primary a {
    display: block; padding: 10px 0;
    font-size: clamp(26px, 14px + 3vw, 34px); line-height: 1.3;
    font-weight: var(--fw-light); letter-spacing: -0.01em;
    color: #fff; text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    transition: color .25s ease;
  }
  .mobile-menu__primary li:last-child a { border-bottom: 0; }
  .mobile-menu__primary a:hover,
  .mobile-menu__primary a:focus,
  .mobile-menu__primary a[aria-current="page"] { color: var(--brand-on-dark); }

  /* Secondary: Services (3 titled sub-lists) beside Markets. The columns hold to
     narrow phones too; long service labels simply wrap. */
  .mobile-menu__groups { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 28px; align-items: start; }
  .mobile-menu__group { min-width: 0; }
  .mobile-menu__label {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.64);
    margin: 0 0 10px;
  }
  .mobile-menu__label::before { content: ""; flex: none; width: 18px; height: 2px; background: var(--brand-red); }
  .mobile-menu__sublabel {
    font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 12px 0 2px;
  }
  .mobile-menu__list { list-style: none; margin: 0; padding: 0; }
  .mobile-menu__list a {
    display: block; padding: 7px 0;
    font-size: 15px; line-height: 1.4;
    color: #fff; text-decoration: none;
    transition: opacity .2s ease;
  }
  .mobile-menu__list a:hover,
  .mobile-menu__list a:focus { opacity: 0.7; }
  /* Small text stays white for AA; current page gets the raspberry underline. */
  .mobile-menu__list a[aria-current="page"] {
    text-decoration: underline; text-decoration-color: var(--brand-on-dark);
    text-decoration-thickness: 2px; text-underline-offset: 5px;
  }

  .mobile-menu__cta { margin: 0; }
  .mobile-menu .button { border-color: #fff; color: #fff; }
  .mobile-menu .button:hover,
  .mobile-menu .button:focus { background: #fff; color: var(--ink); }

  .mobile-menu__footer {
    list-style: none; margin: auto 0 0; padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex; flex-wrap: wrap; gap: 10px 22px;
  }
  .mobile-menu__footer a { font-size: 13px; color: rgba(255, 255, 255, 0.75); text-decoration: none; }
  .mobile-menu__footer a:hover,
  .mobile-menu__footer a:focus { color: #fff; }

  /* Staggered entrance: blocks rise as the overlay settles. Closed state snaps
     (no transition) so nothing lags under the fading backdrop on the way out. */
  .mobile-menu__primary li a,
  .mobile-menu__group,
  .mobile-menu__cta,
  .mobile-menu__footer { opacity: 0; transform: translateY(14px); }
  .mobile-menu.is-open .mobile-menu__primary li a,
  .mobile-menu.is-open .mobile-menu__group,
  .mobile-menu.is-open .mobile-menu__cta,
  .mobile-menu.is-open .mobile-menu__footer {
    opacity: 1; transform: translateY(0);
    transition: opacity .45s ease, transform .5s ease, color .25s ease;
  }
  .mobile-menu.is-open .mobile-menu__primary li:nth-child(1) a { transition-delay: .08s; }
  .mobile-menu.is-open .mobile-menu__primary li:nth-child(2) a { transition-delay: .14s; }
  .mobile-menu.is-open .mobile-menu__primary li:nth-child(3) a { transition-delay: .20s; }
  .mobile-menu.is-open .mobile-menu__primary li:nth-child(4) a { transition-delay: .26s; }
  .mobile-menu.is-open .mobile-menu__group:nth-child(1) { transition-delay: .30s; }
  .mobile-menu.is-open .mobile-menu__group:nth-child(2) { transition-delay: .36s; }
  .mobile-menu.is-open .mobile-menu__cta { transition-delay: .42s; }
  .mobile-menu.is-open .mobile-menu__footer { transition-delay: .48s; }

  /* Open state: the bar above the overlay goes clear in every colour state and the
     burger folds into a white X. Each selector matches or beats the specificity of
     the header colour rule it overrides; ties resolve to these (later in file). */
  body.nav-open .site-header,
  body.nav-open:not(.home):not(.has-hero) .site-header,
  body.nav-open:not(.home):not(.has-hero) .site-header.scrolled,
  :is(body.home, body.has-hero).nav-open .site-header.scrolled:not(.over-dark),
  :is(body.home, body.has-hero).nav-open .site-header.scrolled.over-dark {
    background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.nav-open .nav-burger span,
  body.nav-open:not(.home):not(.has-hero) .nav-burger span,
  :is(body.home, body.has-hero).nav-open .site-header.scrolled:not(.over-dark) .nav-burger span { background: #fff; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { top: 9px; transform: rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { top: 9px; transform: rotate(-45deg); }
}

/* Reduced motion: the sitewide 0.01ms rule already collapses the fade, but not the
   stagger DELAYS or the scale offset, so zero those here (same pattern as bl-reveal:
   content is simply there, no motion). */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu.is-open { transform: none; transition-delay: 0s !important; }
  .mobile-menu__primary li a,
  .mobile-menu__group,
  .mobile-menu__cta,
  .mobile-menu__footer { transform: none !important; transition-delay: 0s !important; }
}

/* Fixed vertical social rail (live). mix-blend-mode inverts the white icons against
   whatever is behind them, so they stay legible over the dark hero and light bands. */

/* ── Main content ───────────────────────────────────────────────────────── */
main { display: block; }

.page,
.post {
  max-width: var(--container);
  margin-inline: auto;
  padding: 48px 20px;
}

.post__date {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}

.standup-notice { padding-block: 80px; }

/* ── Footer (dark) ──────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: #fff;
  margin-top: 0;
  padding-block: 64px 40px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)) auto;
  gap: 36px;
  align-items: start;
}
.site-footer__heading--stacked { margin-top: 28px; }
.site-footer .button { white-space: nowrap; }
/* Tablet band (iPad 13" portrait is 1032px): the CTA takes its own row and the
   five columns sit three across, so nothing squeezes to 75px. */
@media (max-width: 1200px) and (min-width: 1025px) {
  .site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
  .site-footer__cta { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; }
  .site-footer__cta .site-footer__logo, .site-footer__cta .site-footer__tagline { margin: 0; }
  .site-footer__social { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; }
}
.site-footer__tagline { font-size: var(--fs-lead); font-weight: var(--fw-medium); color: #fff; margin: 0 0 20px; }
.site-footer .button { border-color: #fff; color: #fff; }
.site-footer .button:hover, .site-footer .button:focus { background: #fff; color: var(--ink); }
.site-footer__heading { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 1px; color: #fff; margin: 0 0 16px; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin-bottom: 10px; }
.site-footer__col a { color: #cfcfcf; text-decoration: none; }
.site-footer__col a:hover, .site-footer__col a:focus { color: #fff; }
.site-footer__social { list-style: none; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; align-items: flex-end; }
.site-footer__social a { color: #fff; display: inline-flex; }
.site-footer__social a:hover, .site-footer__social a:focus { color: #cfcfcf; }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
}
.site-footer__legal, .site-footer__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; color: #bdbdbd; }
.site-footer__meta { text-align: right; }
.site-footer__legal a, .site-footer__meta a { color: #fff; text-decoration: none; }
.site-footer__legal a:hover, .site-footer__meta a:hover { text-decoration: underline; }

@media (max-width: 1200px) {
  /* Header collapses to a hamburger below 1200px (raised from 1024 on 2026-09-08: the
     desktop nav is centred absolutely across the bar, so between ~1025 and ~1180px it
     overlapped the Contact pill). The desktop nav (and the mega/dropdown panels inside
     it) never renders here; the burger opens the full-screen #mobile-menu overlay
     instead (see its block above). */
  .nav-burger { display: block; }
  .site-nav { display: none; }
  /* Scoped: the later .button component rule (display:inline-block) outweighs a
     bare .site-header__cta at equal specificity, leaving the pill visible. */
  .site-header .site-header__cta { display: none; }
}
@media (max-width: 1024px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer__social { flex-direction: row; align-items: center; justify-content: flex-start; grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .page, .post { padding-block: 32px; }
  .site-footer__top { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__bottom { flex-direction: column; }
  .site-footer__meta { text-align: left; }
}

/* ── Shared components (archetype layer) ────────────────────────────────────
   Added as archetypes land, per the template-first model. Every page draws on
   these named classes; pages must not ship their own <style> blocks. Values read
   from tokens.css so the whole system moves together. */

/* Outline pill button — the live kit's button (transparent, 1px ink, pill). */
.button {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  background: transparent;
}
.button:hover,
.button:focus { background: var(--ink); color: #fff; }

/* Page lead / hero intro. */
.lead { padding: 56px 0 8px; }
.lead__title {
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.lead__intro {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
}

/* ── Home archetype: the work-card grid ─────────────────────────────────────
   The homepage is a hero lead plus a responsive grid of project cards. Card art
   is the live 768x433 ratio; the aspect-ratio box holds layout before the image
   loads, so the grid never reflows (a CLS win). */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 24px 0 64px;
  margin: 0;
  list-style: none;
}
.work-card { margin: 0; }
.work-card a {
  display: block;
  color: var(--ink);
  text-decoration: none;
}
.work-card__media {
  aspect-ratio: 768 / 433;
  overflow: hidden;
  background: #f2f2f2;
  border-radius: 4px;
}
.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.work-card a:hover .work-card__media img,
.work-card a:focus .work-card__media img { transform: scale(1.03); }
.work-card__title {
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: 28px;
  color: var(--ink);
  margin: 8px 0 0;
}

.work-card__desc {
  font-size: 16px;
  line-height: 22px;
  font-weight: var(--fw-body);
  color: var(--ink-soft);
  margin: 2px 0 0;
}

/* ── Home archetype (full-length homepage) ──────────────────────────────────
   The homepage is a full-width document: a full-bleed video hero, centred copy
   bands, the work grid, a service grid, and a dark contact CTA. index.njk wraps
   the body in .page--home, so that wrapper drops the normal .page max-width and
   padding and lets each band control its own width (via .container) instead. */
.page--home { max-width: none; margin: 0; padding: 0; }

/* Screen-reader-only text: visible to assistive tech, removed from view. Used for
   the hero label, the work-grid heading, and the "Learn more about X" link context. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hero: full-bleed autoplay video behind a left-aligned white headline + stats.
   Base colour is ink so a missing/slow video degrades to a solid dark panel with
   legible white text rather than a flash of unstyled content. The overlay keeps
   AA text contrast over any video frame. */
.home-hero {
  position: relative;
  background: var(--ink);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
/* Still fallback UNDER the video (2026-09-18, Alex): what shows whenever the video
   cannot, i.e. under reduced motion (the video is removed), when autoplay is refused (iOS
   Low Power Mode: the video is hidden, see .is-autoplay-blocked), and while it buffers
   (a <video> with no frame yet is transparent). Art-directed <picture>: a portrait crop
   on portrait phones, the 3:2 original elsewhere. Decorative, like the video: alt="". */
.home-hero__still, .home-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* The still is darkened ON ITS OWN LAYER, so the overlay tuned for the video frames is
   untouched. Measured, not assumed: with the overlay alone the white headline sat over the
   wall's white posters at 3.11:1 (brightest 2% of pixels, 1280x800), a bare pass for large
   text. With this filter the worst case is recorded in state.md, 2026-09-18. */
.home-hero__img { object-fit: cover; object-position: 60% 40%; filter: brightness(0.7); }
.home-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.home-hero.is-autoplay-blocked .home-hero__video { visibility: hidden; }
/* Scrim keeps white text legible over any video frame. Kept dark enough across
   the full height the headline occupies (>=0.35) so AA contrast holds even on the
   flythrough's bright glass/sky frames, not only over the dark stat row. */
.home-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.38) 45%, rgba(0,0,0,0.75) 100%);
}
.home-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 22vh 7vh;
}
.home-hero__title {
  color: #fff;
  font-size: 46px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 4px;
  max-width: 16ch;
  margin: 0 0 14vh;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* Keyboard-accessible pause/play for the hero video (WCAG 2.2.2). Hidden until the
   video actually starts playing (revealed by the hero script), so there is no dead
   control when the mp4 is absent or reduced-motion has removed it. */
.home-hero__toggle {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  padding: 8px 16px;
  border: 1px solid #fff;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.5);
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.home-hero__toggle:hover,
.home-hero__toggle:focus { background: #fff; color: var(--ink); }
.home-hero__toggle[hidden] { display: none; }
/* Pause/play on every other self-starting looped video (WCAG 2.2.2), injected after the
   <video> by the videoToggle transform. Same pill as the homepage control, pinned to the
   bottom-right of the video's own box; the box is made the positioning context. */
.cs-hero, .cs-video__frame, .svc-topiccard__media, :has(> video + .video-toggle) { position: relative; }
.video-toggle {
  position: absolute; z-index: 3; right: 16px; bottom: 16px;
  padding: 6px 14px; border: 1px solid #fff; border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.55); color: #fff;
  font: inherit; font-size: 14px; font-weight: var(--fw-medium); cursor: pointer;
}
.video-toggle:hover, .video-toggle:focus { background: #fff; color: var(--ink); }
.video-toggle[hidden] { display: none; }
/* Phones: the stat row reaches the foot of the hero, so bottom-right sat on "Patents".
   Top-right, just under the fixed header, is empty on every phone size. */
@media (max-width: 767px) {
  .home-hero__toggle { top: 100px; bottom: auto; right: 16px; padding: 6px 14px; font-size: 14px; }
}

/* Stat row sitting at the foot of the hero, white over the video. */
.home-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-stats__item { display: flex; flex-direction: column; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.home-stats__num { font-size: 68px; font-weight: var(--fw-bold); line-height: 1; }
.home-stats__label { font-size: 18px; font-weight: var(--fw-body); margin-top: 4px; }

/* Content bands. --intro bands are centred and narrow (intro, Psycho-Aesthetics,
   why-choose); plain bands run full container width (services list, work, grid). */
.band { padding-block: 56px; }
.band__title { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: 1.25; margin: 0 0 24px; }
.band--intro {
  max-width: 820px;
  text-align: center;
  padding-block: 76px;
}
.band--intro .band__title { color: var(--ink); margin-bottom: 20px; }
.band--intro p { margin: 0; }
/* Live centres these section headings but sets the body copy black and left-aligned. */
.band--intro p { color: var(--ink); font-size: 16px; line-height: 24px; text-align: left; }
.band--work { padding-block: 36px 60px; }

/* "Our Services Include" — a two-column list of label + one-line description. */
.svc-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 60px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.svc-list__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.svc-list__label { font-weight: var(--fw-medium); font-size: 18px; color: var(--ink); }
.svc-list__desc { color: var(--ink-soft); font-size: 18px; line-height: 28px; }

/* Service detail grid — the eight capability write-ups, each a card with an
   uppercase title, body copy, and a "Learn more" link to the pillar page. */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 64px;
}
.svc { margin: 0; }
.svc__title {
  font-size: 24px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 16px;
}
.svc__body { color: var(--ink-soft); font-size: 18px; line-height: 28px; margin: 0 0 16px; }
/* Service link rendered as the live outline button (white, 1px ink-soft, 3px radius). */
.svc__link {
  display: inline-block;
  border: 1px solid var(--ink-soft);
  border-radius: 3px;
  padding: 12px 24px;
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--ink-soft);
  background: #fff;
  text-decoration: none;
}
.svc__link:hover, .svc__link:focus { background: var(--ink-soft); color: #fff; }

/* Dark contact CTA, full-bleed. Inverted outline button for contrast on ink. */
/* Contact: dark banner over the live product-sketch background image (served from
   R2 at /media/; the ink colour + gradient are the fallback until it is migrated). */
.home-contact {
  background-color: var(--ink);
  background-image: linear-gradient(rgba(0,0,0,0.62), rgba(0,0,0,0.62)), url("/media/2025/03/Product-Design-and-Development-Banner-Image-1024x768.png");
  background-size: cover;
  background-position: center;
  color: #fff;
  padding-block: 96px;
}
.home-contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: start; text-align: left; }
.home-contact__title { color: #fff; font-size: var(--fs-h1); font-weight: var(--fw-bold); margin: 0 0 20px; }
.home-contact__body { color: #e6e6e6; font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.home-contact__form { display: flex; flex-direction: column; gap: 16px; }
.home-contact__field {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  border-radius: 4px;
}
.home-contact__field::placeholder { color: #cfcfcf; }
textarea.home-contact__field { resize: vertical; min-height: 120px; }
.home-contact__form .button--invert { align-self: flex-start; margin-top: 4px; }
/* Live contact button: uppercase, filled, small 4px radius (not the outline pill). */
.button--invert {
  border-color: #fff;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 4px;
  padding: 14px 30px;
  font-weight: var(--fw-bold);
}
.button--invert:hover, .button--invert:focus { background: #fff; color: var(--ink); }

/* Hero: "RKS DESIGN" set heavier than the rest of the headline, per the live <b>. */
.home-hero__title strong { font-weight: 700; }

/* Intro lead band: centred heading, then the body copy in two columns (live layout).
   The 8% top padding matches the generous whitespace above this band on the live. */
.band--lead { text-align: left; padding-top: 8%; }
.band--lead .band__title { color: var(--ink); }
.band--include .band__title { text-align: left; }
.band__title--center { text-align: center; }

/* Split band: heading in the left column, body copy in the right (live Psycho /
   Why-Choose layout), with a hairline rule above. --caps uppercases the heading. */
.band--split {
  display: grid;
  grid-template-columns: 35% 50%;
  justify-content: space-between;
  gap: 0;
  align-items: start;
  border-top: 1px solid #e6e6e6;
}
.band--split .band__title { font-size: 32px; font-weight: var(--fw-bold); color: var(--ink); line-height: 1.15; margin: 0; }
.band--caps .band__title { text-transform: uppercase; }
.band__split-body p { font-size: 18px; color: var(--ink-soft); line-height: 28px; margin: 0 0 1em; }
.band__split-body p:last-child { margin-bottom: 0; }
.band__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  text-align: left;
  margin-top: 28px;
}
.band__cols p { color: var(--ink-soft); font-size: var(--fs-body); line-height: var(--lh-body); }
.band__cols > div > p:last-child { margin-bottom: 0; }

/* Service detail rows: image + text, alternating side (live). Service illustrations
   are served from R2 at /media/; until they are migrated the media box holds its
   aspect-ratio space (a neutral panel) rather than shifting the layout. */
.band--services { padding-block: 24px 40px; }
.svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 50vh;
  margin-bottom: 0;
}
.svc-row--img-left .svc-row__media { order: -1; }
/* Text block vertically centred against the image; its OUTER edge sits flush with the
   image edge (no outer padding), only an inner gap toward the image. */
.svc-row__text { align-self: center; }
.svc-row--img-right .svc-row__text { padding-right: clamp(24px, 4vw, 56px); }
.svc-row--img-left .svc-row__text { padding-left: clamp(24px, 4vw, 56px); }
.svc-row__media {
  background: #f2f2f2;
  overflow: hidden;
}
.svc-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* FAQ accordion — native <details>/<summary>, accessible with no JS. */
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; }
.faq__item { border-bottom: 1px solid #e6e6e6; }
.faq__q {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 20px 44px 20px 0;
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 26px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); top: 30px; }
.faq__a { padding: 0 44px 24px 0; }
.faq__a p { color: var(--ink-soft); font-size: 16px; line-height: 24px; margin: 0; }

/* On the dark (ink) bands the brand-blue focus ring only reaches ~3:1; use a white
   ring there so the focus indicator clears WCAG 1.4.11 with room to spare. */
.home-hero :focus-visible,
.home-contact :focus-visible { outline-color: #fff; }

/* ── About / marketing archetype ─────────────────────────────────────
   Values extracted from the live post-12922.css (rksdesign.com/about/): body text
   is off-black #3C3C3C; large statements are Poppins 300 (light) at 1.8rem / 46px;
   section headings are 2rem/600; reason cards use the warm orange->pink gradient at
   350px with a 4rem index; process steps are photo-backed cards; sections alternate
   white / #F5F5F5 / #F3F3F3. Full-bleed via .page--wide. */

/* Full-bleed page wrapper, mirroring .page--home. Reusable for any marketing page. */
.page--wide { max-width: none; margin: 0; padding: 0; }
/* Consistent, generous vertical rhythm between the full-bleed marketing sections
   (8% of viewport width, per the About spacing spec). Hero and CTA set their own. */
.page--wide .band { padding-block: 8%; }

/* Full-width background helpers so each band's colour spans edge to edge while its
   .container keeps the copy measure (live alternates white / #F5F5F5 / #F3F3F3). */
.band--muted { background: var(--bg-muted); }
.band--muted-2 { background: var(--bg-muted-2); }

/* Large light statement, shared by the mission and the team/reasons intros. */
.statement {
  font-size: var(--fs-statement);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  color: var(--ink-soft);
  margin: 0;
}

/* Section heading used across About (2rem / 600 / off-black). */
.about-mission__label, .about-story__label, .about-team__heading,
.about-reasons__heading, .about-process__heading, .about-clients__heading {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--ink-soft);
  margin: 0 0 20px;
}

/* Hero: live Innovation-Headquarters photo, ink fallback, white 40px/600 title. Inner
   page header is the solid dark bar, so the hero sits cleanly below it. */
.about-hero {
  position: relative;
  background: var(--ink) center / cover no-repeat;
  min-height: var(--hero-h-main);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
/* LCP (2026-09-18): the About, PA and Contact heroes were CSS background images, which
   the browser cannot fetch until the stylesheet is parsed (mobile LCP 3.6 to 13.6 s). Each
   is now a real <img> (eager, fetchpriority=high) the preload scanner finds in the HTML,
   in web-weight WebP, laid out exactly as the old `center / cover` background. */
.about-hero__img, .pa-hero__img, .contact-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.26) 0%, rgba(0,0,0,0.32) 40%, rgba(0,0,0,0.70) 100%); }
.about-hero__inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; padding-block: var(--hero-pad-top) var(--hero-pad-bottom); }
.about-hero__title {
  color: #fff;
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.about-hero :focus-visible { outline-color: #fff; }

/* Mission: centred label + large light statement, on white. */
.about-mission { text-align: center; }
.about-mission .statement { max-width: none; margin-inline: auto; }

/* Story: copy + image, two columns on muted gray. */
.about-story__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; align-items: center; }
.about-story__lead { font-size: var(--fs-body); font-weight: var(--fw-body); color: var(--ink-soft); line-height: 1.5; margin: 0 0 16px; }
.about-story__text p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); margin: 0 0 1em; }
.about-story__text p:last-child { margin-bottom: 0; }
.about-story__media { align-self: stretch; min-height: 300px; border-radius: var(--radius-card); overflow: hidden; }
.about-story__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Team: heading + light statement + intro, then 3-up portrait cards. */
.about-team { text-align: center; }
.about-team .statement { max-width: none; margin-inline: auto; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; margin: 44px 0 0; padding: 0; list-style: none; text-align: left; }
.team-card { margin: 0; border: 1px solid #e6e6e6; border-radius: var(--radius-card); background: #fff; padding: 16px; }
.team-card__media { aspect-ratio: 681 / 1024; overflow: hidden; background: #111; border-radius: 10px; }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card__name { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--ink); margin: 16px 0 2px; }
.team-card__role { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0 0 14px; }
.team-card__social { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.team-card__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: var(--ink-soft); color: #fff; font-weight: var(--fw-bold); font-size: 14px; text-decoration: none;
  transition: background .2s ease;
}
.team-card__social a:hover, .team-card__social a:focus { background: #000; color: #fff; }

/* Reasons: 3-up warm-gradient cards, 4rem index, white text (live 350px / 16px radius). */
.about-reasons { text-align: center; }
.about-reasons .statement { max-width: 72ch; margin: 0 auto 44px; }
.reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; text-align: left; }
.reason-card {
  background: var(--bg-muted);
  border: 1px solid #e3e3e3;
  border-radius: var(--radius-card);
  padding: 44px 36px;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  margin: 0;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.reason-card__num { font-size: var(--fs-num); font-weight: var(--fw-body); line-height: 1; color: var(--ink-soft); margin-bottom: 24px; }
.reason-card__title { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.35; margin: 0 0 12px; }
.reason-card__body { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); margin: 0; }
/* Live hover state: the warm gradient card revealed on the extracted post-12922.css. */
/* Live hover state: the warm gradient fills the card; text stays ink (matches the
   live interactive element in the screenshot, not a white-on-gradient flip). */
.reason-card:hover { background: var(--grad-warm); border-color: transparent; box-shadow: 0 12px 28px rgba(242,41,91,0.25); }

/* Clients: grey band with two logo marquees scrolling opposite directions. The
   source strips are white logos on transparent, recoloured to black with
   filter: brightness(0) (alpha is preserved, so edges stay clean) to read on grey.
   Pure-CSS loop: each track holds its images twice and slides to -50%, landing on
   an identical frame (seamless). */
.about-clients { text-align: center; background: var(--bg-muted); }
.logo-marquee { display: flex; flex-direction: column; gap: 8px; margin-top: 48px; }
.logo-marquee__row { overflow: hidden; }
.logo-marquee__track { display: flex; width: max-content; }
.logo-marquee__track img { height: 140px; width: auto; display: block; flex: none; filter: brightness(0); opacity: 0.85; }
.logo-marquee__row--left .logo-marquee__track { animation: marquee-left 48s linear infinite; }
.logo-marquee__row--right .logo-marquee__track { animation: marquee-right 48s linear infinite; }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Closing CTA: uppercase heading + outline button, on white. */
.about-cta { text-align: center; }
.about-cta__title { font-size: var(--fs-h1); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 2px; color: var(--ink); margin: 0 0 32px; }

/* ── Psycho-Aesthetics archetype ───────────────────────────────
   Long-form methodology page. Reuses .band / .statement / .about-mission / .about-cta
   and adds: an image hero, a click-to-play YouTube facade (JS in base.njk), image+text
   split rows, book + Harvard callout cards, a 3-up value row, centered diagram figures,
   and the numbered "roots" steps. Media on wp-content placeholders until R2. */

/* Hero — live RKS-Books photo, ink fallback + overlay, centred white title. */
.pa-hero {
  position: relative;
  background: var(--ink) center / cover no-repeat;
  min-height: var(--hero-h-main);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.pa-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.38) 40%, rgba(0,0,0,0.74) 100%); }
.pa-hero__inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; padding-block: var(--hero-pad-top) var(--hero-pad-bottom); }
.pa-hero__eyebrow { color: #fff; opacity: 0.85; }
.pa-hero__title { color: #fff; font-size: var(--fs-display); font-weight: var(--fw-bold); letter-spacing: 1px; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.pa-hero :focus-visible { outline-color: #fff; }

/* Section heading shared across PA sections. */
.pa-title { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--ink); margin: 0 0 20px; }
.pa-title--center { text-align: center; }

/* Centred media wrapper for the videos + a couple of figures. */
.pa-media-wide { max-width: 900px; margin: 32px auto 0; }

/* Click-to-play YouTube facade (base.njk swaps in the iframe on click). */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: radial-gradient(circle at center, #2a2a2a 0%, #0d0d0d 100%);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed__play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; cursor: pointer;
  background: rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.video-embed__play::before { content: ""; width: 84px; height: 84px; border-radius: 50%; background: rgba(0,0,0,0.55); border: 2px solid rgba(255,255,255,0.9); }
.video-embed__play::after { content: ""; position: absolute; border-style: solid; border-width: 15px 0 15px 26px; border-color: transparent transparent transparent #fff; margin-left: 6px; }
.video-embed__play:hover, .video-embed__play:focus-visible { background: rgba(0,0,0,0.4); }

/* Centred diagram / photo figure. */
.pa-figure { margin: 32px auto 0; max-width: 820px; }
.pa-figure img { width: 100%; height: auto; border-radius: var(--radius-card); display: block; }

/* Image + text split rows (tool sections). Source order sets the column side. */
.pa-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; align-items: center; }
.pa-split__media img { width: 100%; height: auto; border-radius: var(--radius-card); display: block; }
.pa-split__text .pa-title { margin-bottom: 16px; }
.pa-split__text p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); margin: 0 0 1em; }
.pa-split__text .button { margin-top: 8px; }

/* Book callouts (2-up). */
.pa-books { text-align: center; }
.pa-book-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 820px; margin: 40px auto 0; padding: 0; list-style: none; }
.pa-book { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; }
.pa-book__media img { max-height: 320px; width: auto; margin-inline: auto; display: block; }
.pa-book__title { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--ink); margin: 0; }

/* Harvard case-study callouts (2-up cards). */
.pa-harvard-sec { text-align: center; }
.pa-harvard-intro { max-width: 60ch; margin: 0 auto 40px; }
.pa-harvard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 900px; margin: 0 auto; padding: 0; list-style: none; }
.pa-harvard { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px; border: 1px solid #e3e3e3; border-radius: var(--radius-card); background: #fff; margin: 0; }
.pa-harvard__logo img { max-height: 60px; width: auto; }
.pa-harvard__title { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--ink); margin: 0; }

/* 3-up value points. */
.pa-values-sec { text-align: center; }
.pa-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 900px; margin: 40px auto 0; padding: 0; list-style: none; }
.pa-value { display: flex; flex-direction: column; gap: 4px; padding: 32px 24px; background: #fff; border-radius: var(--radius-card); margin: 0; }
.pa-value__lead { font-size: var(--fs-body); color: var(--ink-soft); }
.pa-value__key { font-size: 28px; font-weight: var(--fw-bold); color: var(--brand); }

/* "Roots" history: intro + 3 numbered steps + conclusion. */
.pa-roots { text-align: center; }
.pa-roots .statement { max-width: none; margin: 0 auto 32px; text-align: left; }
.pa-roots .container > p:not(.statement) { max-width: none; margin: 0 auto; text-align: left; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); }
.pa-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 auto 32px; padding: 0; list-style: none; text-align: left; }
.pa-step { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; background: #fff; border-radius: var(--radius-card); margin: 0; }
.pa-step__num { font-size: 40px; font-weight: var(--fw-bold); line-height: 1; color: var(--brand); }
.pa-step__body { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); margin: 0; }

/* ── Psycho-Aesthetics v2 (aligned to live full-page screenshots) ── */
.pa-intro { text-align: center; }
.pa-brandmark { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--ink); text-align: center; letter-spacing: 0.5px; margin: 0 0 8px; }
.pa-title--lg { font-size: var(--fs-accent); }
.pa-subtitle { margin: 0 0 8px; }

/* Resource row: 2 books + a P/A download + 2 Harvard case studies, uniform cards. */
.pa-resource-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.pa-resource { flex: 1 1 300px; max-width: 360px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 32px 28px; background: #fff; border: 1px solid #e3e3e3; border-radius: var(--radius-card); margin: 0; }
.pa-resource__media { height: 260px; display: flex; align-items: center; justify-content: center; }
.pa-resource__media img { max-height: 260px; max-width: 100%; width: auto; object-fit: contain; }
.pa-resource__title { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.3; margin: 0; flex: 1 1 auto; display: flex; align-items: center; }
.pa-resource .button { font-size: 14px; padding: 9px 20px; }

/* Value points as outlined circles. */
.pa-values-sec { text-align: center; }
.pa-values-lead { max-width: 60ch; margin: 0 auto 44px; text-align: center; }
.pa-values { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; max-width: none; margin: 0; padding: 0; list-style: none; }
.pa-value { width: 240px; height: 240px; border-radius: 50%; border: 1px solid #d0d0d0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; margin: 0; gap: 4px; }
/* Colour-changing cards: lift the lead text off 16px so it's not "small and hard to
   read" (Helena row 267); the key word stays large. Nothing below --fs-body here. */
.pa-value__lead { font-size: var(--fs-body); color: var(--ink-soft); }
.pa-value__key { font-size: 30px; font-weight: var(--fw-bold); color: var(--ink); }

/* P/A Map split: top-align image + copy (copy runs long). */
.pa-split { align-items: start; }

/* Hero's Journey: centred diagram + copy. */
.pa-centered { text-align: center; }
.pa-centered .pa-figure { margin: 0 auto 28px; }
.pa-centered p { max-width: 64ch; margin: 0 auto 1em; color: var(--ink-soft); font-size: var(--fs-body); line-height: var(--lh-body); }
.pa-figure--md { max-width: 460px; }
.pa-figure--wide { max-width: 900px; }
.pa-figure--tall { max-width: none; text-align: center; }
.pa-figure--tall img { width: auto; max-width: 100%; max-height: 900px; margin-inline: auto; }

/* ── Psycho-Aesthetics v3 (screenshot-aligned pass 2) ── */
/* Videos: full container width (= 80% of page), YouTube poster + red play button. */
.pa-media-wide { max-width: none; margin: 32px 0 0; }
.video-embed { background: #000; }
.video-embed__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-embed__play { background: transparent; }
.video-embed__play::before { content: ""; width: 68px; height: 48px; background: #ff0000; border: 0; border-radius: 14px; opacity: 0.9; transition: opacity .2s ease; }
.video-embed__play::after { content: ""; position: absolute; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff; margin-left: 0; }
.video-embed__play:hover::before, .video-embed__play:focus-visible::before { opacity: 1; }

/* Value circles — large, filling the row. */
.pa-value { width: auto; height: auto; flex: 1 1 280px; max-width: 400px; aspect-ratio: 1; gap: 8px; }
.pa-value__key { font-size: 34px; }

/* P/A Map split: vertically centre the map against its copy. */
.pa-split { align-items: center; }

/* Roots steps → reason-card behaviour: dark index, warm gradient on hover. */
.pa-step { border: 1px solid #e3e3e3; background: #fff; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pa-step__num { color: var(--ink-soft); }
.pa-step:hover { background: var(--grad-warm); border-color: transparent; box-shadow: 0 12px 28px rgba(242,41,91,0.25); }

/* Roots + Success: centred intro paragraph. */
.pa-success { text-align: center; }
.pa-roots .statement, .pa-success .statement { max-width: none; margin: 0 auto 40px; text-align: center; }

/* ── Psycho-Aesthetics v4 ── */
/* Value circles get the warm-gradient hover, same as the roots/reason cards. */
.pa-value { transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pa-value:hover { background: var(--grad-warm); border-color: transparent; box-shadow: 0 12px 28px rgba(242,41,91,0.25); }

/* Roots step cards sit at the section grey when inactive (not white). */
.pa-step { background: var(--bg-muted); }

/* "How it's created" + "Success" photos run full container width (= 80% of page). */
.pa-figure--wide { max-width: none; }

/* ── Psycho-Aesthetics v5 ── */
/* Roots step cards: taller, number top / text bottom (match live proportions). */
.pa-step { min-height: 360px; justify-content: space-between; }
/* Resource cards read as a larger ~3-across row (match live, not a 5-up thumbnail
   strip); they wrap 3+2 rather than squeezing all five onto one row (Helena row 264). */
.pa-resource-grid { flex-wrap: wrap; }
.pa-resource { flex: 1 1 300px; min-width: 0; max-width: 360px; }

/* ── Psycho-Aesthetics v6 ── */
.pa-hero__title { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.7rem); }

/* ── Psycho-Aesthetics v7 — type scale aligned to the live site (smaller) ── */
.pa-title { font-size: clamp(1.375rem, 1.12rem + 1.1vw, 2rem); }
.pa-title--light { font-weight: var(--fw-light); }
.pa-subtitle { font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); }
.pa-roots .statement, .pa-success .statement { font-size: clamp(1.125rem, 1.07rem + 0.22vw, 1.25rem); }
.pa-split__text p { font-size: 1rem; line-height: 1.6; }
.pa-step__body { font-size: var(--fs-sm); }
.pa-resource__title { font-size: var(--fs-body); }

/* ── Psycho-Aesthetics v8 — tighter vertical rhythm (live is denser than the 8% About bands) ── */
.page--wide .pa-band { padding-block: 4%; }

/* Tablet (Elementor tablet breakpoint <=1024): grid drops to 2 columns, type steps down. */
@media (max-width: 1024px) {
  .home-hero__title { font-size: 32px; letter-spacing: 2px; }
  .home-stats { gap: 40px; }
  .home-stats__num { font-size: 48px; }
  .home-stats__label { font-size: 16px; }
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .work-card__desc { font-size: 14px; }
  .home-contact__title { font-size: 24px; }
  .about-hero__title { font-size: 32px; }
  .statement { font-size: 1.5rem; line-height: 34px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .reasons-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile (Elementor mobile breakpoint <=767): single-column copy, stacked stats. */
@media (max-width: 767px) {
  .container { width: 90%; }
  .home-hero__inner { padding-block: 15vh 6vh; }
  .home-hero__title { font-size: 30px; letter-spacing: 2px; text-align: left; margin: 0 0 11vh; }
  .home-stats { gap: 8px; }
  .home-stats__num { font-size: 26px; }
  .home-stats__label { font-size: 13px; }
  .band { padding-block: 40px; }
  .band--lead, .band--include { width: 90%; }
  .band__title { font-size: 24px; }
  .band--intro { text-align: left; }
  .band--intro .band__title { font-size: 20px; }
  .band__cols { grid-template-columns: 1fr; gap: 1.25em; margin-top: 20px; }
  .faq__grid { grid-template-columns: 1fr; }
  .svc-list { grid-template-columns: 1fr; }
  .svc-row { grid-template-columns: 1fr; gap: 20px; margin-bottom: 44px; min-height: 0; }
  .svc-row__media { order: -1; aspect-ratio: 4 / 3; }
  .svc-row--img-right .svc-row__text,
  .svc-row--img-left .svc-row__text { padding: 0; }
  .svc__title { font-size: 20px; }
  .band--split { grid-template-columns: 1fr; gap: 12px; }
  .band--split .band__title { font-size: 24px; }
  .home-contact__inner { grid-template-columns: 1fr; gap: 28px; }
  .about-hero__title { font-size: 24px; }
  .statement { font-size: 1.25rem; line-height: 30px; }
  .about-story__inner { grid-template-columns: 1fr; gap: 24px; }
  .page--wide .band { padding-block: 44px; }
  .team-grid { grid-template-columns: 1fr; gap: 28px; max-width: 420px; margin-inline: auto; }
  .reasons-grid { grid-template-columns: 1fr; }
  .logo-marquee__track img { height: 84px; }
}

/* Respect a reduced-motion preference sitewide. Any animation added later inherits
   this unless it deliberately opts out, which it should not. The hero video is
   decorative, so it is removed entirely under reduced-motion: the ink hero panel
   and white headline remain, with no autoplaying motion. */
@media (prefers-reduced-motion: reduce) {
  .home-hero__video { display: none; }
  .logo-marquee__track { animation: none; transform: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── Psycho-Aesthetics responsive — appended LAST so it overrides the archetype base.
   (The earlier PA media rules had landed in the header/footer media block, ahead of the
   PA base styles, and were being overridden — this block is the authoritative one.) ── */
@media (max-width: 1024px) {
  .pa-split { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .pa-resource-grid { flex-wrap: wrap; }
  .pa-resource { flex: 1 1 200px; }
  .pa-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pa-steps { grid-template-columns: 1fr; }
  .pa-value { flex-basis: 300px; }
  .pa-resource { flex: 1 1 260px; }
}


/* ── Work index archetype — /work-all/ ──────────────────────────────────────
   The portfolio listing: a two-column grid of project cards (reuses the shared
   .work-card component) with a category filter beside it. On desktop the filter is
   a sticky rail to the RIGHT of the grid; on tablet/mobile it collapses to a centred
   row above the grid. The filter itself is a progressive enhancement wired in
   base.njk — with no JS every card shows, which is the default "All" state.
   Appended LAST so these rules win over the archetype base + earlier media blocks
   (the same ordering lesson as the Psycho-Aesthetics responsive block above). */
.work-index {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  padding-block: 40px 72px;
  /* Live's work-all sits in the wider (85%) container; left-aligned to the 80%
     header container (10% left margin) so the cards still line up with the logo
     while the block extends further right, giving the filter room + a clear gap
     from the grid. */
  width: 85%;
  margin-inline: 10% auto;
}
.work-index__main { flex: 1 1 auto; min-width: 0; order: 1; }
/* Filter sits visually on the right (order:2) but comes FIRST in the DOM, so keyboard
   and screen-reader users reach the controls before the long card list. The 160px
   basis + 16px gap keep the two card columns at the live width (~410px at 1280,
   where the live max-width container is at its widest). Sticky top clears the
   sticky white header (~74px) so it never hides behind it. */
.work-index__filter { flex: 0 0 160px; order: 2; position: sticky; top: 100px; }

.work-index__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Card titles on the index read as the live page does: black, uppercase, tracked.
   Scoped to .work-index so the homepage work grid (Title Case) is unaffected. */
.work-index .work-card__title {
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.2;
  margin-top: 16px;
}
.work-index .work-card__desc { color: var(--ink-soft); line-height: 24px; margin-top: 8px; }
.work-index .work-card[hidden] { display: none; }

/* Filter labels: tall padded rows (~54px apart, matching live) that double as large
   click targets. Active + hover + focus resolve to ink; resting inactive is grey. */
.work-filter { display: flex; flex-direction: column; gap: 2px; }
.work-filter__btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 16px 0;
  font: var(--fw-medium) 16px/24px var(--font);
  color: #6F6F6F; /* WCAG AA: 5.0:1 on white (was #929292 = 3.1:1, a11y-gate fix) */
  text-align: left;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.work-filter__btn:hover { color: var(--ink); }
.work-filter__btn.is-active { color: var(--ink); }
.work-filter__btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; color: var(--ink); }
.work-index__empty { color: var(--ink-soft); padding: 24px 0; font-size: var(--fs-sm); }

@media (max-width: 1024px) {
  /* Stacked layout (filter on top): reset the desktop 85% left-aligned container
     back to the standard centred container so it matches the rest of the site. */
  .work-index { flex-direction: column; gap: 0; padding-block: 24px 56px; width: 80%; margin-inline: auto; }
  .work-index__filter {
    order: -1;
    position: static;
    flex-basis: auto;
    width: 100%;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E6E6E6;
  }
  .work-filter { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px 26px; }
  .work-filter__btn { padding: 4px 2px; }
}
@media (max-width: 767px) {
  .work-index { width: 90%; }
  .work-index__grid { gap: 20px 14px; }
  .work-index .work-card__title { font-size: 15px; letter-spacing: 0.5px; margin-top: 8px; }
  .work-index .work-card__desc { display: none; }
}


/* ── Contact archetype — /contact/ ───────────────────────────────────────────
   Photo hero (white heading + light lead over a left-weighted dark gradient),
   the enquiry form (4-col grid), and an "experts" video row. Reuses .band,
   .container, .button and the shared .video-embed facade (click-to-play JS in
   base.njk). Appended last so it wins over the archetype base + earlier media. */
.contact-hero {
  position: relative;
  background: var(--ink) center / cover no-repeat;
  min-height: var(--hero-h-contact);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
/* Bottom-weighted overlay. It used to be a LEFT-to-right gradient built for left-aligned
   text; now the text is centered and bottom-anchored, so a 90deg gradient would drop white
   type onto the bright right-hand side of the photo (Alex 2026-09-17). */
.contact-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.36) 40%, rgba(0,0,0,0.74) 100%); }
.contact-hero__inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; padding-block: var(--hero-pad-top) var(--hero-pad-bottom); }
.contact-hero__title {
  color: #fff;
  font-size: clamp(2.25rem, 1.55rem + 2.9vw, 4rem);
  font-weight: var(--fw-bold);
  line-height: 1.04;
  letter-spacing: 2px;
  margin: 0 0 18px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.contact-hero__lead {
  color: #fff;
  font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.5rem);
  font-weight: var(--fw-light);
  line-height: 1.5;
  max-width: 32ch;
  margin: 0 auto;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.contact-hero :focus-visible { outline-color: #fff; }

.contact-email { font-size: 1.25rem; line-height: 1.5; color: var(--ink); margin: 0 0 6px; }
.contact-email a { color: var(--ink); text-decoration: none; }
.contact-required { font-size: var(--fs-sm); color: var(--ink); margin: 0 0 28px; }

.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 20px;
}
.contact-field-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.contact-field-group--quarter { grid-column: span 1; }
.contact-field-group--half { grid-column: span 2; }
.contact-field-group--full { grid-column: span 4; }
.contact-form__actions { grid-column: span 2; align-items: flex-start; }
.contact-label { font-size: var(--fs-sm); font-weight: var(--fw-body); color: var(--ink-soft); }
/* Was var(--danger) #FF0000: 3.9985:1 on white, fails AA as text (found by the 2026-09-18
   brand-red sweep). The tint token clears it at 4.89:1 and stays the RKS red. */
.contact-required-mark { color: var(--brand-on-tint); }
.contact-field {
  width: 100%;
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg-muted-2);
  border: 1px solid var(--ink-soft);
  border-radius: 4px;
  padding: 10px 16px;
}
.contact-field::placeholder { color: #8a8a8a; }
.contact-field:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.contact-field--textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.contact-field--select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C3C3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.contact-form__actions .button { margin-top: 4px; }
/* Turnstile gap (pre-flight 2026-09-18): the slot measured 73px because the widget's iframe
   sat on a text baseline, and the empty status line added ~17px more, so ~60px of dead
   space sat above Submit. Reserve the widget's real 65px (also stops the slot growing from
   0 when the widget renders) and let the status line take no height until it has text.
   It stays in the DOM, so the role="status" live region still announces. */
.cf-turnstile { min-height: 65px; line-height: 0; }
.cf-turnstile iframe { display: block; }
.form-status:empty { min-height: 0; }

.contact-experts__heading {
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  font-weight: var(--fw-bold);
  color: var(--ink);
  text-align: center;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
}
/* Experts video carousel: the whole RKS YouTube gallery, 3 videos per page (2 at
   tablet, 1 at mobile). Prev/next circles FLANK the video row (vertically centred);
   a "1-3 of 52" counter sits below (dots do not scale to 50+ videos). JS in base.njk,
   guarded on .contact-carousel; with no JS it is a native scrollable strip. The wide
   bottom margin gives the gallery room to breathe before "Interested in more?". */
/* The video row is the same width as the form (the full .container); the prev/next
   circles sit OUTSIDE it in the side margins, absolutely positioned and vertically
   centred on the videos. Small, borderless, quiet grey bubbles. */
.contact-carousel { position: relative; margin: 0 0 64px; }
.contact-carousel__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.contact-carousel__track::-webkit-scrollbar { display: none; }
.contact-carousel__slide { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }
.contact-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #efefef; color: var(--ink);
  border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.contact-carousel__nav svg { width: 17px; height: 17px; }
.contact-carousel__nav--prev { left: -46px; }
.contact-carousel__nav--next { right: -46px; }
.contact-carousel__nav:hover:not(:disabled),
.contact-carousel__nav:focus-visible:not(:disabled) { background: var(--ink); color: #fff; }
.contact-carousel__nav:disabled { opacity: 0.35; cursor: default; }
.contact-experts__more { text-align: center; font-size: 1.25rem; font-weight: var(--fw-body); color: var(--ink-soft); margin: 4px 0 22px; }
.contact-experts__cta { text-align: center; }
/* Solid ink pill for the "Explore More Work" CTA (a confident filled button rather
   than a faint outline), inverting to an outline on hover. */
.contact-experts__cta .button { background: var(--ink); color: #fff; padding: 13px 34px; }
.contact-experts__cta .button:hover,
.contact-experts__cta .button:focus { background: transparent; color: var(--ink); }

@media (max-width: 1024px) {
  .contact-carousel__slide { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 767px) {
  .contact-form__grid { grid-template-columns: 1fr; gap: 18px; }
  .contact-field-group--quarter,
  .contact-field-group--half,
  .contact-field-group--full,
  .contact-form__actions { grid-column: 1 / -1; }
  .contact-carousel { margin-bottom: 44px; }
  .contact-carousel__slide { flex-basis: 100%; }
  /* No side-margin room on mobile: overlay the arrows on the video edges. */
  .contact-carousel__nav { background: rgba(0, 0, 0, 0.5); color: #fff; }
  .contact-carousel__nav--prev { left: 8px; }
  .contact-carousel__nav--next { right: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEDIA & PRESS  (/rks-design-media-and-press/)
   Featured hero + newsletter + a 4-tab media library (Blog / Podcasts / Videos /
   Press). Each tab is a 3-up grid of square image tiles (2 at tablet, 1 at mobile)
   with white text over a dark scrim, matching the live Elementor build. Video tiles
   are click-to-play into a lightbox (JS in base.njk, guarded on #mp-lightbox / .mp-tabs).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tighter than the 8% default `.page--wide .band` gives (that rule out-specifies a
   bare .mp-*-band, so these carry .page--wide to win and keep the page rhythm tight). */
.page--wide .mp-top-band { padding-block: 36px 18px; }
.page--wide .mp-library-band { padding-block: 18px 56px; }

/* Featured hero (left, ~2/3) + newsletter (right, ~1/3) share ONE top row, matching
   live. align-items:stretch makes both cards equal height; it stacks below 1024. */
.mp-top { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: stretch; }

/* ── Featured "latest thoughts" hero ─────────────────────────────────────── */
.mp-featured {
  position: relative;
  display: block;
  min-height: 460px;
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: 48px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.mp-featured__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.mp-featured__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 42%, rgba(0,0,0,0.72) 100%);
}
.mp-featured__eyebrow {
  position: relative; z-index: 1;
  display: block;
  font-size: 18px; line-height: 1.15;   /* one line, matching live (was oversized and wrapped) */
  font-weight: var(--fw-light);
  letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  margin-bottom: 20px;
}
.mp-featured__panel {
  position: relative; z-index: 1;
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 16px;
  max-width: 620px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: var(--radius-card);
  background: rgba(20,20,20,0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mp-featured__title {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem);   /* 32px at desktop, matching live */
  font-weight: var(--fw-bold);
  line-height: 1.18;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.mp-featured__meta { font-size: 18px; font-weight: var(--fw-light); }
.mp-featured__cta {
  display: inline-block; margin-top: 8px;
  padding: 8px 16px;
  border: 1px solid #fff; border-radius: 0;   /* square, matching live (was a pill) */
  font-size: 16px; font-weight: var(--fw-medium);
}
.mp-featured:hover, .mp-featured:focus { color: #fff; }   /* keep hero text white on hover (see .mp-card note) */
.mp-featured:focus-visible .mp-featured__cta { background: #fff; color: var(--ink); }
.mp-featured:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Very subtle lift + faint shadow; the Read More button fills white on hover. */
.mp-featured:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,0.16); }
.mp-featured:hover .mp-featured__img { transform: scale(1.015); }
.mp-featured:hover .mp-featured__cta { background: #fff; color: var(--ink); }

/* ── Newsletter sign-up band ─────────────────────────────────────────────── */
.mp-newsletter {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: 40px 34px;
  text-align: left;   /* left-aligned like live (was centred) */
  display: flex; flex-direction: column; justify-content: center;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.mp-newsletter:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,0.16); }
.mp-newsletter__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp-newsletter__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.62); }
.mp-newsletter__inner { position: relative; z-index: 1; }
.mp-newsletter__title {
  color: #fff;
  font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem);   /* 28px at desktop, matching live */
  font-weight: var(--fw-bold);
  line-height: 1.3;
  margin: 0 0 26px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.mp-newsletter__form { display: flex; flex-direction: column; gap: 12px; }
.mp-newsletter__field {
  width: 100%;
  font-family: var(--font); font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid #fff; border-radius: 4px;
  padding: 13px 18px;
}
.mp-newsletter__field::placeholder { color: #8a8a8a; }
.mp-newsletter__field:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* Solid black button with rounded corners; inverts to white on hover/focus. */
.mp-newsletter__submit { width: 100%; background: var(--ink); color: #fff; border: 1px solid #fff; border-radius: 6px; padding: 12px 16px; font-size: 16px; font-weight: var(--fw-medium); }
.mp-newsletter__submit:hover, .mp-newsletter__submit:focus { background: #fff; color: var(--ink); border-color: #fff; }

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.mp-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
.mp-tab {
  font-family: var(--font);
  font-size: 16px; font-weight: var(--fw-medium);
  color: var(--ink-soft);
  background: rgba(2,1,1,0.05);
  border: 0; border-radius: 4px;
  padding: 20px 16px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.mp-tab:hover { background: rgba(2,1,1,0.1); }
.mp-tab.is-active { background: var(--ink); color: #fff; }
.mp-tab:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ── Card grid ───────────────────────────────────────────────────────────── */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mp-card {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  color: #fff;
  background: #000;
  font-family: var(--font);
  cursor: pointer;
  border: 0; padding: 0;
  aspect-ratio: 324 / 385;   /* portrait tile, matching the live 0.842 ratio */
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.mp-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.mp-card__scrim {
  position: absolute; inset: 0;
  /* Live darkens the WHOLE tile with a uniform ~40% black overlay so the white date
     reads at the top too. A bottom-only gradient left the date illegible over light
     image tops, so mirror live: a near-uniform tint + a bottom boost for the title. */
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.42) 42%, rgba(0,0,0,0.72) 100%);
}
.mp-card__body {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 23px;
}
.mp-card__date { font-size: 16px; font-weight: var(--fw-body); line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.5); }
.mp-card__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mp-card__title {
  font-size: clamp(1.5rem, 1.2rem + 0.95vw, 1.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.mp-card__meta { font-size: 16px; font-weight: var(--fw-light); line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,0.55); }
.mp-card__meta:empty { display: none; }
.mp-card__cta {
  display: inline-block; margin-top: 2px;
  padding: 8px 16px;
  border: 1px solid #fff; border-radius: 0;
  font-size: 16px; font-weight: var(--fw-medium);
  transition: background 0.18s ease, color 0.18s ease;
}
/* The card body is a <div>, so its text is never inside a link and nothing changes on
   hover. A transparent stretched <a> makes the whole tile clickable; the visible
   "Read Now" stays a static span (no hover fill), matching live. */
.mp-card__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.mp-card__link:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
/* Very subtle interaction: a small lift + faint shadow, a barely-there image ease. */
.mp-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.14); }
.mp-card:hover .mp-card__img { transform: scale(1.015); }

/* Video tiles: centred play badge; the whole tile opens the lightbox. */
.mp-card--video .mp-card__title { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); }
.mp-card__play {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 68px; height: 68px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0,0,0,0.55); border: 2px solid rgba(255,255,255,0.9);
  transition: background 0.18s ease;
}
.mp-card__play::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-45%, -50%);
  border-style: solid; border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
}
.mp-card--video:focus-visible .mp-card__play { background: rgba(0,0,0,0.72); }

/* ── Video lightbox ──────────────────────────────────────────────────────── */
.mp-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.mp-lightbox[hidden] { display: none; }
.mp-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.82); }
.mp-lightbox__dialog { position: relative; z-index: 1; width: min(960px, 100%); }
.mp-lightbox__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-card); overflow: hidden; }
.mp-lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mp-lightbox__close {
  position: absolute; top: -46px; right: 0;
  width: 38px; height: 38px;
  background: transparent; border: 0; color: #fff;
  font-size: 34px; line-height: 1; cursor: pointer;
}
.mp-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 1024px) {
  .mp-grid { grid-template-columns: repeat(2, 1fr); }
  .mp-top { grid-template-columns: 1fr; }   /* hero over newsletter once the row gets tight */
  .mp-featured { padding: 36px; min-height: 400px; }
  .mp-newsletter { min-height: 220px; }
}
@media (max-width: 767px) {
  .mp-grid { grid-template-columns: 1fr; }
  .mp-tabs { gap: 10px; }
  .mp-tab { padding: 12px 6px; font-size: 13px; }
  .mp-featured { padding: 24px; min-height: 340px; }
  .mp-featured__panel { padding: 24px; }
  .mp-newsletter { padding: 40px 22px; }
  .mp-newsletter__form { flex-direction: column; align-items: stretch; }
  .mp-newsletter__field { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VISUAL ESSAY / CASE STUDY archetype  (cs-*)
   Reusable template for the migrated visual essays (first use: /lynx/). Ported
   from the design toolkit reference. The base reset, .container, .skip-link,
   .visually-hidden, site header and site footer are owned by the repo already,
   so only the archetype-specific tokens, typography roles and cs-* blocks live
   here. Visual language: minimal, editorial, generous whitespace, heading-left /
   body-right blocks, large image grids beneath each section.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Colour */
  --rks-color-ink: #000000;
  --rks-color-bg: #ffffff;
  --rks-color-ink-80: rgba(0, 0, 0, 0.8);
  --rks-color-ink-70: rgba(0, 0, 0, 0.7);
  --rks-color-ink-64: rgba(0, 0, 0, 0.64);
  --rks-color-ink-50: rgba(0, 0, 0, 0.5);
  --rks-color-hairline: rgba(0, 0, 0, 0.12);
  --rks-color-surface: #f5f5f5;
  --rks-color-surface-2: #efefef;
  --rks-gradient-accent: linear-gradient(90deg, #3a2f7d 0%, #c62828 100%);
  --rks-color-dark-bg: #000000;
  --rks-color-on-dark: #ffffff;
  --rks-color-on-dark-64: rgba(255, 255, 255, 0.64);
  --rks-color-on-dark-hairline: rgba(255, 255, 255, 0.18);

  /* Typography (self-hosted Poppins is already @font-face'd in tokens.css) */
  --rks-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rks-fw-regular: 400;
  --rks-fw-medium: 500;
  --rks-fw-semibold: 600;
  --rks-lh-tight: 1.15;
  --rks-lh-snug: 1.5;   /* was 1.3; bumped 2026-08-25 for the >=1.5 readability pass */
  --rks-lh-body: 1.7;
  --rks-ls-eyebrow: 0.14em;
  --rks-ls-tight: -0.01em;

  --rks-fs-caption: 0.75rem;
  --rks-fs-eyebrow: 0.75rem;
  --rks-fs-meta: 0.875rem;
  --rks-fs-body: 1rem;
  --rks-fs-lead: 1.125rem;
  --rks-fs-h3: 1.25rem;
  --rks-fs-h2: 2rem;
  --rks-fs-h1: 3rem;
  --rks-fs-stat: 2.5rem;

  /* Spacing */
  --rks-space-1: 0.25rem;
  --rks-space-2: 0.5rem;
  --rks-space-3: 0.75rem;
  --rks-space-4: 1rem;
  --rks-space-5: 1.5rem;
  --rks-space-6: 2rem;
  --rks-space-7: 3rem;
  --rks-space-8: 4rem;
  --rks-space-9: 6rem;
  --rks-space-10: 8rem;
  --rks-section-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* Borders / radius / motion */
  --rks-border-hairline: 1px solid var(--rks-color-hairline);
  --rks-radius-media: 12px;
  --rks-radius-card: 20px;
  --rks-ease: cubic-bezier(0.2, 0, 0, 1);
  --rks-duration: 200ms;
}

/* Responsive type scale (desktop values above; tablet <=1024, mobile <=767). */
@media (max-width: 1024px) {
  :root {
    --rks-fs-lead: 1rem;
    --rks-fs-h1: 2.25rem;
    --rks-fs-h2: 1.625rem;
    --rks-fs-h3: 1.125rem;
    --rks-fs-stat: 2rem;
  }
}
@media (max-width: 767px) {
  :root {
    --rks-fs-body: 0.9375rem;
    --rks-fs-lead: 0.9375rem;
    --rks-fs-meta: 0.8125rem;
    --rks-fs-h1: 1.875rem;
    --rks-fs-h2: 1.375rem;
    --rks-fs-h3: 1.0625rem;
    --rks-fs-stat: 1.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --rks-duration: 0ms; }
}

/* --- Typography roles ----------------------------------------------------- */
.eyebrow,
.cs-label {
  font-size: var(--rks-fs-eyebrow);
  font-weight: var(--rks-fw-semibold);
  letter-spacing: var(--rks-ls-eyebrow);
  text-transform: uppercase;
  color: var(--rks-color-ink-64);
  margin: 0;
}
.text-lead { font-size: var(--rks-fs-lead); line-height: var(--rks-lh-body); }
.text-body { font-size: var(--rks-fs-body); line-height: var(--rks-lh-body); }
.text-meta { font-size: var(--rks-fs-meta); line-height: var(--rks-lh-snug); }
.text-caption { font-size: var(--rks-fs-caption); line-height: var(--rks-lh-snug); letter-spacing: var(--rks-ls-eyebrow); }

/* --- Title block (alternative to the hero, for text-first essays) --------- */
.cs-titleblock { text-align: center; padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.cs-titleblock .eyebrow { margin-bottom: var(--rks-space-4); }
.cs-titleblock h1 {
  font-size: var(--rks-fs-h1);
  font-weight: var(--rks-fw-semibold);
  line-height: var(--rks-lh-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.cs-titleblock__lead { font-size: var(--rks-fs-lead); color: var(--rks-color-ink-64); max-width: 46ch; margin: var(--rks-space-4) auto 0; }

/* --- Hero: full-width cover image (90vh) with left-aligned overlaid title -- */
.cs-hero { position: relative; display: flex; align-items: center; width: 100%; min-height: 90vh; overflow: hidden; }
.cs-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; }
/* Scrim: darker on the left where the title + subtitle sit, fading over the product on the
   right, so white hero text meets WCAG AA regardless of how light the hero image is. */
.cs-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.44) 45%, rgba(0, 0, 0, 0.2) 68%, rgba(0, 0, 0, 0.16) 100%); }
@media (max-width: 767px) {
  /* On phones the title spans the full width and sits centred, so protect the whole text band. */
  .cs-hero::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.52) 40%, rgba(0, 0, 0, 0.52) 74%, rgba(0, 0, 0, 0.34) 100%); }
}
/* BRIGHT-MEDIA variant (/quatro/, 2026-09-18). Quatro's hero is a product video shot on a
   near-WHITE background, so the standard scrim leaves white type at 3.23:1 on 12 of 15
   sampled frames: the large title scrapes 3:1 but the subtitle fails AA's 4.5:1. Measured
   against the real frames (brightest 2% of the text band, overlay composited), alpha 0.58
   at the text gives a worst case of 5.33:1 with 0 frames under 4.5:1. Scoped to heroes that
   need it; every other case study keeps the lighter wash. */
.cs-hero--bright::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.58) 45%, rgba(0, 0, 0, 0.3) 68%, rgba(0, 0, 0, 0.22) 100%); }
@media (max-width: 767px) {
  .cs-hero--bright::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.6) 35%, rgba(0, 0, 0, 0.6) 74%, rgba(0, 0, 0, 0.42) 100%); }
}
.cs-hero__overlay { position: relative; z-index: 1; width: 100%; text-align: left; color: var(--rks-color-on-dark); }
.cs-hero__overlay h1 {
  color: #fff;
  font-size: var(--rks-fs-h1);
  font-weight: var(--rks-fw-semibold);
  line-height: var(--rks-lh-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  margin: 0;
  /* Constrain to half the content column so long titles stack (short ones stay on one line). */
  max-width: 50%;
}
@media (max-width: 767px) {
  /* 50% is too narrow on phones; let the title use the full column. */
  .cs-hero__overlay h1 { max-width: 100%; }
}
.cs-hero__subtitle { color: rgba(255, 255, 255, 0.94); font-size: clamp(1rem, 0.75rem + 0.85vw, 1.5rem); font-weight: 300; line-height: 1.5; max-width: 50%; margin: var(--rks-space-4) 0 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
@media (max-width: 767px) { .cs-hero__subtitle { max-width: 100%; } }

/* Standardized separation: 4% top margin + 2% bottom padding on each section
   below the hero (the "How We Used..." sub-block counts as its own section). */
.cs-overview, .cs-feature, .cs-section, .cs-subblock, .cs-prose, .cs-gallery { margin-top: 4%; padding-bottom: 2%; }

/* --- Overview (white, single column) -------------------------------------- */
/* The gap between the hero and the FIRST section below it is 16% (4x the 4%
   inter-section rhythm above): a generous, balanced break after the full-bleed cover
   image. Pinned to whatever section directly follows the hero, so it holds even if an
   essay does not lead with .cs-overview; % of the article width, matching this
   archetype's percentage-based vertical rhythm. */
.cs-hero + section,
.cs-overview { margin-top: 16%; }
.cs-overview__intro { display: grid; grid-template-columns: 1fr; gap: var(--rks-space-6); align-items: start; }
.cs-overview__lead { font-size: var(--rks-fs-h2); font-weight: var(--rks-fw-semibold); line-height: var(--rks-lh-snug); letter-spacing: var(--rks-ls-tight); color: var(--rks-color-ink); margin: 0; }
.cs-overview__body { color: var(--rks-color-ink-70); }
.cs-overview__body p + p { margin-top: var(--rks-space-4); }

/* Stats: borderless numbers in a row */
.cs-stats { list-style: none; margin: var(--rks-space-7) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--rks-space-6) var(--rks-space-8); }
.cs-stat__value { display: block; font-size: var(--rks-fs-stat); font-weight: var(--rks-fw-semibold); line-height: var(--rks-lh-tight); letter-spacing: var(--rks-ls-tight); }
.cs-stat__label { display: block; font-size: var(--rks-fs-meta); color: var(--rks-color-ink-64); margin-top: var(--rks-space-1); }

/* Project meta: stacked, bold label + short underline + value(s) */
.cs-meta { display: grid; grid-template-columns: 1fr; gap: var(--rks-space-7); margin: var(--rks-space-8) 0 0; }
.cs-meta__group { margin: 0; }
.cs-meta dt { font-size: var(--rks-fs-body); font-weight: var(--rks-fw-semibold); color: var(--rks-color-ink); margin: 0; }
.cs-meta dt::after { content: ""; display: block; width: 2.25rem; height: 2px; background: var(--rks-color-ink); margin: var(--rks-space-3) 0 var(--rks-space-4); }
.cs-meta dd { margin: 0; color: var(--rks-color-ink-64); font-size: var(--rks-fs-body); }
.cs-meta dd a { color: inherit; text-decoration: none; }
.cs-meta dd a:hover { text-decoration: underline; }
.cs-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--rks-space-4) var(--rks-space-6); color: var(--rks-color-ink-64); font-size: var(--rks-fs-body); }
.cs-services a { color: inherit; text-decoration: none; }
.cs-services a:hover { text-decoration: underline; }

/* --- Feature band (matches the site content column) ----------------------- */
.cs-feature { width: 80%; max-width: 1600px; margin-inline: auto; text-align: center; }
/* Never upscale: a dimensioned feature image renders at its natural width (capped at
   100%) and centers, so an 800px asset stays 800px instead of stretching to ~1034 and
   pixelating (Tier-2 finding 5). Undimensioned ones fill and rely on the aspect-ratio
   reservation below. */
.cs-feature img { max-width: 100%; height: auto; display: inline-block; border-radius: var(--rks-radius-media); }
.cs-feature img:not([width]) { width: 100%; }

/* --- Generic prose section ------------------------------------------------ */
.cs-prose { border-top: var(--rks-border-hairline); }
.cs-prose__inner { max-width: 68ch; color: var(--rks-color-ink-70); }
.cs-prose h2 { font-size: var(--rks-fs-h2); color: var(--rks-color-ink); margin-bottom: var(--rks-space-5); }
.cs-prose p + p { margin-top: var(--rks-space-4); }

/* Readability pass (2026-08-25): every visual-essay section heading and all running
   text carries a line-height of at least 1.5em; only the big uppercase display H1
   (.cs-hero__overlay h1 / .cs-titleblock h1, --rks-lh-tight) stays tight by design. */
.cs-prose__inner, .cs-overview__body, .cs-services, .cs-meta dd, .cs-titleblock__lead,
.cs-subblock__text, .cs-card__right { line-height: 1.6; }
.cs-prose h2, .cs-prose h3, .cs-prose li, .cs-cta h2, .cs-related h2, .cs-card__title,
.cs-subblock__title, .cs-overview__lead, .cs-quote p { line-height: 1.5; }
/* Reinforcement pass (2026-08-26): set the line-height on the section WRAPPERS so every
   text descendant inherits >= 1.5 (unitless => each child multiplies its own size),
   catching anything the enumeration above misses (stray <p>, captions, list items, any
   H2). Display type keeps its own tighter value via a more specific rule and so is
   unaffected: the hero / titleblock H1 (--rks-lh-tight) and the big stat numbers. */
.cs-overview, .cs-feature, .cs-section, .cs-subblock, .cs-prose, .cs-gallery,
.cs-cta, .cs-related, .cs-titleblock { line-height: 1.6; }

/* --- Process sections: each is a CARD ------------------------------------- */
.cs-section { scroll-margin-top: var(--rks-space-7); }
.cs-card { background: var(--rks-color-bg); border: var(--rks-border-hairline); border-radius: var(--rks-radius-card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.05); padding: clamp(1.5rem, 3vw, 3rem); }
.cs-card__title { font-size: var(--rks-fs-h2); font-weight: var(--rks-fw-semibold); margin: 0 0 var(--rks-space-5); }
.cs-card__grid { display: grid; grid-template-columns: 1fr; gap: var(--rks-space-6); }
.cs-card__right { color: var(--rks-color-ink-70); font-size: var(--rks-fs-lead); }
.cs-card__right p + p { margin-top: var(--rks-space-4); }
.cs-card__label { font-size: var(--rks-fs-body); letter-spacing: var(--rks-ls-eyebrow); text-transform: uppercase; color: var(--rks-color-ink); font-weight: var(--rks-fw-semibold); margin: 0; }
.cs-card__label::after { content: ""; display: block; width: 2.25rem; height: 2px; background: var(--rks-color-ink); margin: var(--rks-space-3) 0 var(--rks-space-4); }
.cs-outputs__list { list-style: none; margin: 0; padding: 0; }
.cs-outputs__list li { position: relative; padding-left: var(--rks-space-5); margin-bottom: var(--rks-space-3); color: var(--rks-color-ink-70); font-size: var(--rks-fs-body); }
.cs-outputs__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; background: var(--rks-color-ink); border-radius: 50%; }

/* Sub-block ("How we used..."): text (left) + image (right), then a full image. */
.cs-subblock { margin-top: var(--rks-space-9); }
.cs-subblock__grid { display: grid; grid-template-columns: 1fr; gap: var(--rks-space-6); align-items: center; }
.cs-subblock__title { font-size: var(--rks-fs-h3); color: var(--rks-color-ink); margin: 0; }
.cs-subblock__title::after { content: ""; display: block; width: 2.25rem; height: 2px; background: var(--rks-color-ink); margin: var(--rks-space-3) 0 var(--rks-space-4); }
.cs-subblock__text { color: var(--rks-color-ink-70); font-size: var(--rks-fs-lead); }
.cs-subblock__text p + p { margin-top: var(--rks-space-4); }
.cs-media-full { display: grid; gap: var(--rks-space-5); margin-top: var(--rks-space-6); }

/* Media beneath a card. Images marked `--full` span the full column; unmarked
   images pair two-up (>=768px). Natural aspect ratio, no forced crop. */
.cs-media { display: grid; grid-template-columns: 1fr; gap: var(--rks-space-5); margin-top: var(--rks-space-6); align-items: start; }
.cs-figure { margin: 0; }
.cs-figure--full { grid-column: 1 / -1; }
.cs-figure a { display: block; }
.cs-figure img { width: 100%; height: auto; object-fit: cover; object-position: center; border-radius: var(--rks-radius-media); }
.cs-figure figcaption { font-size: var(--rks-fs-meta); color: var(--rks-color-ink-64); margin-top: var(--rks-space-2); }

/* --- Optional gallery grid ------------------------------------------------ */
.cs-gallery { border-top: var(--rks-border-hairline); }
.cs-gallery__grid { display: grid; grid-template-columns: 1fr; gap: var(--rks-space-5); margin: 0; padding: 0; list-style: none; }

/* --- Ready-to-partner CTA (dark full-bleed band) -------------------------- */
.cs-cta { background: var(--rks-color-dark-bg); color: var(--rks-color-on-dark); text-align: center; padding-block: var(--rks-space-9); }
.cs-cta h2 { font-size: var(--rks-fs-h2); font-weight: var(--rks-fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--rks-color-on-dark); }
.cs-cta__btn { display: inline-block; margin-top: var(--rks-space-5); padding: var(--rks-space-3) var(--rks-space-6); border: 1px solid var(--rks-color-on-dark); color: var(--rks-color-on-dark); text-decoration: none; font-weight: var(--rks-fw-medium); font-size: var(--rks-fs-meta); letter-spacing: var(--rks-ls-eyebrow); text-transform: uppercase; transition: background var(--rks-duration) var(--rks-ease), color var(--rks-duration) var(--rks-ease); }
.cs-cta__btn:hover { background: var(--rks-color-on-dark); color: var(--rks-color-ink); }
.cs-cta__btn:focus-visible { outline-color: var(--rks-color-on-dark); }

/* --- Related works -------------------------------------------------------- */
.cs-related { padding-block: var(--rks-section-y); border-top: var(--rks-border-hairline); }
.cs-related h2 { font-size: var(--rks-fs-h3); text-transform: uppercase; letter-spacing: var(--rks-ls-eyebrow); color: var(--rks-color-ink-64); font-weight: var(--rks-fw-semibold); margin-bottom: var(--rks-space-6); }
.cs-related__grid { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; }
.cs-related__item { padding: var(--rks-space-5) 0; border-top: var(--rks-border-hairline); }
.cs-related__item a { text-decoration: none; font-size: var(--rks-fs-h3); font-weight: var(--rks-fw-medium); }
.cs-related__item a:hover { text-decoration: underline; }
.cs-related__sub { display: block; font-size: var(--rks-fs-meta); color: var(--rks-color-ink-64); margin-top: var(--rks-space-1); }

/* --- Sticky section nav (bottom) ------------------------------------------ */
.cs-sectionnav { position: sticky; bottom: 0; z-index: 20; background: var(--rks-color-bg); border-top: var(--rks-border-hairline); }
.cs-sectionnav__list { display: flex; flex-wrap: nowrap; justify-content: center; gap: var(--rks-space-2); margin: 0; padding: var(--rks-space-3) 0; list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-sectionnav a { text-decoration: none; white-space: nowrap; font-size: var(--rks-fs-eyebrow); letter-spacing: var(--rks-ls-eyebrow); text-transform: uppercase; font-weight: var(--rks-fw-medium); color: #6f6f6f; display: inline-block; padding: var(--rks-space-2) 0.85rem; border-radius: 999px; border: 1px solid transparent; transition: color var(--rks-duration) var(--rks-ease), background-color var(--rks-duration) var(--rks-ease), border-color var(--rks-duration) var(--rks-ease); }
.cs-sectionnav a:hover { color: var(--rks-color-ink); }
/* "You are here" indicator: no pill or outline, just a text-colour contrast. The section
   currently in view is black; every other link is the site's light grey (#6f6f6f, the
   AA-legible light grey standardised elsewhere in this stylesheet -- a lighter grey would
   drop this 12px nav text below WCAG AA). Hover darkens an inactive link toward black.
   Driven by the scroll-spy in base.njk. */
.cs-sectionnav a.is-active, .cs-sectionnav a.is-active:hover { color: var(--rks-color-ink); background-color: transparent; border-color: transparent; }

/* --- Case-study responsive (raw px mirror the 767 / 1024 breakpoints) ----- */
@media (min-width: 768px) {
  .cs-media { grid-template-columns: repeat(2, 1fr); }
  .cs-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .cs-overview__intro { grid-template-columns: 1fr 1.1fr; gap: var(--rks-space-8); }
  .cs-meta { grid-template-columns: 1fr 1fr; column-gap: var(--rks-space-8); }
  .cs-meta__group--services { grid-column: 1 / -1; }
  .cs-services { grid-template-columns: repeat(2, 1fr); }
  .cs-card__grid { grid-template-columns: 1fr 1fr; gap: var(--rks-space-8); align-items: start; }
  .cs-subblock__grid { grid-template-columns: 1fr 1fr; gap: var(--rks-space-8); }
}
@media (min-width: 1024px) {
  .cs-services { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  /* Keep the sticky bar to a single compact row on small screens (rather than a tall
     3-row wrap); it scrolls horizontally and the active pill is auto-centered by the
     scroll-spy. flex-start avoids centered-overflow clipping the first item. */
  .cs-sectionnav__list { justify-content: flex-start; gap: var(--rks-space-1); padding-inline: var(--rks-space-4); }
}

/* --- Pull quote / testimonial (narrative essays + quoted endorsements) -----
   Used by Type-B narrative essays (e.g. Teddy Ruxpin) and testimonial blocks
   (e.g. RKS Guitars). A left-ruled block by default; --center for a standalone
   statement quote near the hero. Reuses the cs-* tokens. */
.cs-quote { margin: var(--rks-space-7) 0; padding-left: var(--rks-space-6); border-left: 3px solid var(--rks-color-ink); }
.cs-quote p { font-size: var(--rks-fs-h3); font-weight: var(--rks-fw-regular); line-height: var(--rks-lh-snug); color: var(--rks-color-ink); font-style: italic; margin: 0; }
.cs-quote p + p { margin-top: var(--rks-space-4); }
.cs-quote__cite { display: block; margin-top: var(--rks-space-4); font-size: var(--rks-fs-meta); font-style: normal; font-weight: var(--rks-fw-medium); letter-spacing: var(--rks-ls-eyebrow); text-transform: uppercase; color: var(--rks-color-ink-64); }
.cs-quote--center { border-left: 0; padding-left: 0; text-align: center; max-width: 62ch; margin-inline: auto; }

/* --- Inline video / embed (self-hosted mp4 or provider iframe) -------------
   16:9 responsive frame with the media radius. Holds a <video> (self-hosted
   wp-content mp4, not touched by the image guard) or an <iframe> (Vimeo/YouTube).
   Drop inside a section's .cs-media (spans full width) or a standalone block. */
.cs-video { margin: 0; }
.cs-video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--rks-radius-media); overflow: hidden; }
.cs-video__frame > video, .cs-video__frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-video__frame > video { object-fit: cover; }
.cs-media .cs-video { grid-column: 1 / -1; }
.cs-media .cs-video--half { grid-column: auto; }

/* Key Outcomes: match the live site. A list item that only groups a nested list
   ("Status:", "Market Impact:") reads as a plain label, and nested items carry ONE
   marker (the theme dot), not the browser disc on top of it. */
.cs-outputs__list ul { list-style: none; margin: var(--rks-space-2) 0 0; padding: 0; }
.cs-outputs__list > li:has(> ul) { padding-left: 0; }
.cs-outputs__list > li:has(> ul)::before { display: none; }
.cs-outputs__list > li:has(> ul) > ul > li { padding-left: var(--rks-space-5); }

/* Media layout vocabulary, mirroring the live Elementor rows and grids:
   default .cs-media = 2 across; --3 = three across; a figure with --full spans. */
@media (min-width: 768px) {
  .cs-media--3 { grid-template-columns: repeat(3, 1fr); }
  .cs-media--1 { grid-template-columns: 1fr; }
}
/* A figure that must show the whole image (diagrams, the PA grid): no cover crop. */
.cs-media .cs-figure--contain img, .cs-figure--contain img { height: auto; object-fit: contain; }

/* CLS reservation for lazy images WITHOUT intrinsic width/height attrs (the ~45% of
   media keys with no -WxH filename dims). Images that DO carry width/height reserve
   their own exact box, so these fallbacks are scoped to :not([width]). Cover-cropped
   figures get a landscape box; the PA grid keeps contain (letterbox, never crops the
   diagram). Prevents the collapse-then-shift the Tier-2 pass measured. */
.cs-feature img:not([width]), .cs-media .cs-figure:not(.cs-figure--contain) img:not([width]) { aspect-ratio: 16 / 10; object-fit: cover; }
.cs-pa__grid img:not([width]), .cs-figure--contain img:not([width]) { aspect-ratio: 16 / 9; }

/* Psycho-Aesthetics block: the square PA map beside its explanation, and the wide
   PA grid underneath, never cropped. */
/* Layout mirrors the live site: PA explanation TEXT on the LEFT, the square PA MAP
   on the RIGHT (DOM order is text then map), text vertically centered against the
   map, then the wide PA grid full-width below with extra space above it. The label
   reads at heading size and the body at lead size (Helena rounds 3/4). */
.cs-pa { margin-top: var(--rks-space-7); display: grid; grid-template-columns: 1fr; gap: var(--rks-space-5); align-items: center; }
.cs-pa__text { align-self: center; }
/* Label at heading size (24px, matches live's 24px DIV). Scoped as .cs-pa__text
   .cs-pa__label (0,2,0) so it beats `.cs-pa__text p` (0,1,1) — the earlier plain
   `.cs-pa__label` lost that specificity race and rendered at the lead 18px. */
.cs-pa__text .cs-pa__label { font-size: 1.5rem; font-weight: var(--rks-fw-semibold); color: var(--rks-color-ink); line-height: var(--rks-lh-snug); margin: 0 0 var(--rks-space-4); }
.cs-pa__text p { color: var(--rks-color-ink-70); font-size: var(--rks-fs-lead); margin: 0 0 var(--rks-space-3); }
@media (max-width: 767px) { .cs-pa__text .cs-pa__label { font-size: 1.25rem; } }
.cs-pa__map { margin: 0; }
/* aspect-ratio 1/1 reserves the square box before the (lazy) map loads, so it never
   collapses to 0 height and shoves the layout ~850px on load (Tier-2 CLS finding).
   Every PA map is square (768x768 / 1920x1920); object-fit:contain keeps it undistorted. */
.cs-pa__map img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--rks-radius-media); }
.cs-pa__grid { grid-column: 1 / -1; margin: var(--rks-space-6) 0 0; }
.cs-pa__grid img { width: 100%; height: auto; object-fit: contain; border-radius: var(--rks-radius-media); }
@media (min-width: 768px) {
  .cs-pa { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--rks-space-7); }
}
.cs-video figcaption { font-size: var(--rks-fs-meta); color: var(--rks-color-ink-64); margin-top: var(--rks-space-2); }

/* Full-width single figures never upscale (Tier-2 finding 5, e.g. JBL's 800px sketch
   was stretched to 1034): a dimensioned image renders at its natural width, centered
   in the column and capped at 100%; only undimensioned ones fill. Placed after the
   equal-height cover rules so it wins on source order. */
.cs-media .cs-figure--full { display: flex; justify-content: center; align-items: flex-start; }
.cs-media .cs-figure--full img { width: auto; max-width: 100%; height: auto; object-fit: contain; }
.cs-media .cs-figure--full img:not([width]) { width: 100%; }

/* --- Equal-height media rows (2026-08-21) ---------------------------------
   Images sharing a `.cs-media` row match the tallest image's height (cover-
   cropped) so 2-up (or more) rows never render ragged. Single `--full` figures
   own their row, so they are unaffected. `.cs-media-full` and `.cs-feature`
   (standalone images) are untouched. */
.cs-media { align-items: stretch; }
.cs-media .cs-figure { height: 100%; min-height: 0; margin: 0; }
.cs-media .cs-figure > a { display: block; height: 100%; }
.cs-media .cs-figure img { height: 100%; min-height: 0; object-fit: cover; }

/* --- Sticky section nav: hide once scrolled past the last essay image (on the
   way down), reappear on any upward scroll. JS toggles --hidden in base.njk. */
.cs-sectionnav { transition: transform 0.28s var(--rks-ease), opacity 0.28s var(--rks-ease), visibility 0s linear 0.28s; will-change: transform; }
/* Hide with opacity + visibility, not just the slide: at the very bottom the sticky bar
   unsticks into normal flow just above the footer, where translateY(110%) alone would push
   it DOWN onto the footer instead of hiding it. opacity/visibility hides it in both states. */
.cs-sectionnav--hidden { transform: translateY(110%); opacity: 0; visibility: hidden; }

/* --- "Explore More Work" carousel -----------------------------------------
   Same design language as the contact-page experts carousel: a paged scroll-
   snap track, 3-up desktop / 2-up tablet / 1-up mobile, with small circular
   prev/next controls flanking the row. Slides reuse the `.work-card` component.
   JS (multi-instance) in base.njk, guarded on `.cs-carousel`; with no JS it is a
   native horizontally scrollable strip. */
.cs-carousel { position: relative; margin-top: var(--rks-space-6); }
.cs-carousel__track {
  display: flex; gap: 20px; overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
  list-style: none; margin: 0; padding: 0;
}
.cs-carousel__track::-webkit-scrollbar { display: none; }
.cs-carousel__slide { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }
.cs-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--rks-color-surface-2); color: var(--rks-color-ink);
  border: 0; border-radius: 50%; cursor: pointer; z-index: 2;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.cs-carousel__nav svg { width: 17px; height: 17px; }
.cs-carousel__nav--prev { left: -46px; }
.cs-carousel__nav--next { right: -46px; }
.cs-carousel__nav:hover:not(:disabled),
.cs-carousel__nav:focus-visible:not(:disabled) { background: var(--rks-color-ink); color: #fff; }
.cs-carousel__nav:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 1024px) {
  .cs-carousel__slide { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 767px) {
  .cs-carousel__slide { flex-basis: 100%; }
  .cs-carousel__nav { background: rgba(0, 0, 0, 0.5); color: #fff; }
  .cs-carousel__nav--prev { left: 8px; }
  .cs-carousel__nav--next { right: 8px; }
}

/* --- Video hero cover on responsive (2026-08-21) --------------------------
   An <iframe> (Vimeo/YouTube bg video) cannot use object-fit, so on portrait/
   mobile a 16:9 video letterboxes inside the hero box. Size the iframe as an
   oversized 16:9 element (>= the hero in both axes), centered, and let the hero's
   overflow:hidden clip it, so the video always COVERS with no bars. <video> and
   <img> heroes already cover via object-fit:cover. */
.cs-hero iframe.cs-hero__img {
  inset: auto; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100vw, 160vh);            /* 160vh = 90vh * 16/9 */
  height: calc(max(100vw, 160vh) * 9 / 16);
  max-width: none;
}
/* Belt-and-braces: force cover on <video> heroes too (some engines need it). */
.cs-hero video.cs-hero__img { object-fit: cover; }

/* ══════════════════════════════════════════════════════════════════════════
   SERVICE ARCHETYPE (svc-*)  —  first built on /research/ (Ethnographic Research),
   the reusable template for every RKS capability / service page (the way cs-*
   seeds the case studies and pa-* was the bespoke Service one-off). Grounded in
   the SITE tokens (tokens.css): titles use --ink, body copy --ink-soft, layout via
   .container + the 767 / 1024 breakpoints. Reuses shared components where they fit:
   .work-card (project grid), .button, .video-embed, the .band rhythm, and the
   about-clients logo-recolour trick.

   NOTE ON NAMING: the bare .svc / .svc-list / .svc-grid / .svc__title selectors
   ABOVE belong to the HOMEPAGE "Our Services Include" block — a different thing.
   Every Service-archetype class here is namespaced svc-<section>__<part>, so it
   never collides with those.

   Per-page Service (+ FAQ) JSON-LD is emitted by render-pages.njk from the page
   JSON (`serviceSchema` + `faq`), replicating the retired RKS Custom Schema plugin.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Hero: full-bleed photo (an <img> cover, so the image guard sees it and it
   carries alt text), dark scrim, centred uppercase title. One <h1> per page. ---- */
.svc-hero { position: relative; min-height: var(--hero-h-main); display: flex; align-items: stretch; overflow: hidden; background: var(--ink); }
.svc-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Bottom-weighted scrim, not a flat wash: the photo reads at the top where nothing sits
   on it, and the dark end lands where the title now sits. Same idea as .home-hero__overlay.
   Contrast measured against the real pixels behind each title, see the 2026-09-17 entry. */
.svc-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.34) 40%, rgba(0,0,0,0.72) 100%); }
/* Text bottom-anchored the way .home-hero__inner does it: the inner stretches to the full
   hero height and pushes its content to the bottom, with token padding above and below. */
.svc-hero__inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; padding-block: var(--hero-pad-top) var(--hero-pad-bottom); }
.svc-hero__title { color: #fff; font-size: clamp(1.2rem, 0.55rem + 2.7vw, 2.7rem); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.svc-hero :focus-visible { outline-color: #fff; }

/* --- Intro statement: centred large heading + light subtitle (the pa/about
   "statement" voice). Section titles across the archetype are --ink. ------------- */
.svc-intro { text-align: center; padding-block: 80px 48px; }
/* Wide (matches the live: 32px / lh46, wraps to 2 lines, not the narrow measure). */
.svc-intro__title { font-size: 32px; font-weight: var(--fw-bold); line-height: 46px; color: var(--ink); margin: 0 auto; max-width: 1090px; }
.svc-intro__subtitle { font-size: 1.125rem; font-weight: var(--fw-body); line-height: 1.5; color: var(--ink-soft); margin: 10px 0 0; }

/* --- Shared section title (left, --ink) + optional lead paragraph -------------- */
.svc-heading { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: 46px; color: var(--ink-soft); margin: 0 0 16px; }
.svc-heading--center { text-align: center; }
/* Light section heading (e.g. the "More ethnographic research done by us." carousel title). */
.svc-heading--light { font-weight: var(--fw-light); }
/* Section intro / lead: the live renders these as a LARGE, LIGHT statement (Poppins 300,
   28.8px, lh ~1.6, off-black #3C3C3C, centred), NOT small body copy. Every svc-lead-copy on
   the service + market pages is a section intro, so this is the archetype-wide rule. */
.svc-lead-copy { font-size: 1.5rem; font-weight: var(--fw-light); line-height: 1.6; color: var(--ink-soft); margin: 0 0 0.7em; max-width: 62rem; }
.svc-lead-copy:last-child { margin-bottom: 0; }
.svc-lead-copy--center { margin-inline: auto; text-align: center; }
/* Sections Helena flagged as not spanning full width (live is full-bleed within the
   container): drop the 62rem readable cap on those specific intro/approach/process
   blocks only. */
.svc-lead-copy--wide { max-width: none; }
@media (max-width: 767px) { .svc-lead-copy { font-size: 20px; line-height: 1.55; } }

/* Section rhythm on the service + market pages, matched to the live (measured off
   rksdesign.com/medical-device-design-development/): the breathing room lives BETWEEN the
   intro and the content (~128px), NOT piled between sections. So each section band gets a
   modest 64px/side (~128px between sections, the live gap), the section heading sits 16px
   above its intro (svc-heading margin), and the content (topic cards / phase grid / process
   figure) drops ~128px below the intro via its margin-top. Scoped via :has(.svc-hero) so the
   other .band pages (home / about) stay unchanged. */
.page--wide:has(.svc-hero) .band { padding-block: 64px; }
.page--wide:has(.svc-hero) .svc-featured { padding-block: 32px 64px; }
.page--wide:has(.svc-hero) .svc-work { padding-block: 64px; }
.page--wide:has(.svc-hero) .svc-topics,
.page--wide:has(.svc-hero) .svc-phases__grid { margin-top: 128px; }
.page--wide:has(.svc-hero) .svc-process__figure { margin-top: 128px; }
@media (max-width: 767px) {
  .page--wide:has(.svc-hero) .band { padding-block: 44px; }
  .page--wide:has(.svc-hero) .svc-work { padding-block: 40px; }
  .page--wide:has(.svc-hero) .svc-topics,
  .page--wide:has(.svc-hero) .svc-phases__grid,
  .page--wide:has(.svc-hero) .svc-process__figure { margin-top: 48px; }
}

/* --- Featured projects: 2-3 flagship studies, each a bordered card with a text
   panel and a cover image. Text left / image right at desktop, stacked on mobile. */
.svc-featured { padding-block: 8px 48px; }
.svc-featured__list { display: flex; flex-direction: column; gap: 32px; margin: 0; padding: 0; list-style: none; }
/* Card design mirrors the live rksdesign.com cards: a white OUTER card (24px radius,
   soft grey glow, 16px padding) wrapping a light #FBFBFB TEXT PANEL (8px radius, 32px
   padding) beside a rounded cover image. Measured off the live /research/ cards. */
.svc-featured__card { border: 0; border-radius: 24px; background: #fff; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 0 4px rgba(123,123,123,0.5); }
.svc-featured__text { background: #fbfbfb; border-radius: 8px; padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.svc-featured__eyebrow { font-size: 1.2rem; font-weight: var(--fw-light); letter-spacing: normal; text-transform: none; color: var(--ink-soft); margin: 0 0 14px; }
.svc-featured__eyebrow a { color: inherit; text-decoration: none; }
/* Hover/focus grows the whole card subtly instead of a red link highlight. */
.svc-featured__card { transition: transform .28s ease, box-shadow .28s ease; }
/* Whole card is the click target: the title link is stretched over the card via
   ::after; the eyebrow link sits above it so both stay keyboard-reachable. */
.svc-featured__card { position: relative; cursor: pointer; }
.svc-featured__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc-featured__eyebrow { position: relative; z-index: 2; }
/* Lead copy under a centered section heading is centered too (Helena, 2026-09-11). */
.svc-heading--center + .svc-lead-copy, .svc-heading--center ~ .svc-lead-copy { text-align: center; margin-left: auto; margin-right: auto; }

/* Three-size section hierarchy (heading / subheading / body) restored on the service
   pages, matching live: the H2 svc-heading (32px) reads as the heading, the first
   paragraph becomes a 24px medium subheading, the rest drop to 18px body. Fixes the
   "one block, no distinction" sections (Helena rounds 3/4). Kept as styled <p> rather
   than a paragraph-length <h3>, which would hurt the mid-recovery SEO structure. */
.svc-subhead { font-size: 1.5rem; font-weight: var(--fw-medium); line-height: 1.5; color: var(--ink-soft); margin: 0 0 0.7em; max-width: 62rem; }
.svc-body-copy { font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); color: var(--ink-soft); margin: 0 0 1em; max-width: 62rem; }
.svc-body-copy:last-child { margin-bottom: 0; }
.svc-heading--center ~ .svc-subhead, .svc-heading--center ~ .svc-body-copy { text-align: center; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) { .svc-subhead { font-size: 20px; } }
.svc-featured__card:hover, .svc-featured__card:focus-within { transform: scale(1.01); box-shadow: 0 10px 30px rgba(0,0,0,.10); }
@media (prefers-reduced-motion: reduce) { .svc-featured__card { transition: none; } .svc-featured__card:hover, .svc-featured__card:focus-within { transform: none; } }
.svc-featured__title { font-size: 2rem; font-weight: 600; line-height: 1.2; color: var(--ink-soft); margin: 0 0 16px; }
.svc-featured__title a { color: inherit; text-decoration: none; }
.svc-featured__eyebrow a:focus-visible, .svc-featured__title a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.svc-featured__body { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
/* Fixed landscape ratio (matches the ~451x372 the landscape cards already resolve to)
   so a portrait source image can't balloon one card taller than its siblings — the
   Discus card was 708px vs ~404 (Tier-2 finding 3). object-fit:cover keeps every
   featured card the same media height regardless of source orientation. */
.svc-featured__media { background: #f2f2f2; border-radius: 8px; overflow: hidden; aspect-ratio: 6 / 5; }
.svc-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* --- Work grid: "More ethnographic research done by us." Reuses .work-card. ---- */
.svc-work { padding-block: 24px 48px; }
/* Square-image cards with a gap between them; the project title + subtitle overlay at
   bottom-left, revealed on hover / focus over a light scrim. */
.svc-work__grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 40px 0 0; padding: 0; list-style: none; }
.svc-workcard { margin: 0; position: relative; }
.svc-workcard a { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; text-decoration: none; border-radius: 0; }
.svc-workcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.svc-workcard__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; background: linear-gradient(to top, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.55) 28%, rgba(255,255,255,0) 58%); opacity: 0; transition: opacity .25s ease; }
.svc-workcard a:hover .svc-workcard__overlay, .svc-workcard a:focus-visible .svc-workcard__overlay { opacity: 1; }
.svc-workcard a:hover .svc-workcard__img { transform: scale(1.03); }
/* An unlinked work card (e.g. a live "SINGULAR GENOMICS" card with no href) has no <a>,
   which is what carries the position/aspect-ratio/overflow box. Without it the card's
   absolute image escaped to the top of the page and covered the hero. Give the card
   itself that box and show its label. */
.svc-workcard:not(:has(> a)) { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.svc-workcard:not(:has(> a)) .svc-workcard__overlay { opacity: 1; }
/* Overlay type matches the live: label 16px/400 with 1px tracking, product line 20px/600,
   both ink-soft. (Square corners, no radius, to match the live grid.) */
.svc-workcard__title { font-size: 16px; font-weight: var(--fw-body); letter-spacing: 1px; color: var(--ink-soft); margin: 0 0 6px; }
.svc-workcard__desc { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink-soft); margin: 0; }
/* Unlinked work card (a project with no case-study page yet, e.g. ThermoFisher on the
   Medical page): same square tile, but the label overlay stays visible (no hover). */
.svc-workcard__static { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 0; }
.svc-workcard__static .svc-workcard__overlay { opacity: 1; }

/* --- Lead statement band (centred heading + copy on a muted ground) ------------ */
.svc-statement { text-align: center; }
.svc-statement .svc-lead-copy { margin-inline: auto; }

/* --- Process infographic: a wide landscape diagram centred under the process lead
   (the live "Our Medical Product Design Process" graphic). Scales down responsively;
   width/height on the <img> reserve its aspect ratio so it never shifts layout. --- */
.svc-process__figure { margin: 44px auto 0; max-width: 1120px; }
.svc-process__img { display: block; width: 100%; height: auto; }

/* --- Stat band: big ink numbers on light, evenly spaced. ----------------------- */
/* Stat cards: a photo behind each metric, white number + label bottom-left (live). */
.svc-statcards { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 48px 0 0; padding: 0; list-style: none; }
.svc-statcard { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 328 / 450; display: flex; }
.svc-statcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-statcard__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%); }
.svc-statcard__body { position: relative; z-index: 1; align-self: flex-end; padding: 28px; }
.svc-statcard__num { display: block; font-size: 80px; font-weight: var(--fw-medium); line-height: 1; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.svc-statcard__label { display: block; font-size: 24px; font-weight: var(--fw-light); color: #fff; margin-top: 4px; text-shadow: 0 1px 5px rgba(0,0,0,0.45); }
/* Legacy plain stats (kept for any other page that used them). */
.svc-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px 72px; padding-block: 8px; margin: 0; list-style: none; text-align: center; }
.svc-stat { display: flex; flex-direction: column; }
.svc-stat__num { font-size: var(--fs-num); font-weight: var(--fw-bold); line-height: 1; color: var(--ink); }
.svc-stat__label { font-size: var(--fs-lead); font-weight: var(--fw-body); color: var(--ink-soft); margin-top: 6px; }

/* --- Disclosure (native <details>): a labelled, collapsible chip set. Mirrors the
   live Elementor nested-accordion (open by default). No JS needed. --------------- */
.svc-disclosure { border: 1px solid #e6e6e6; border-radius: var(--radius-card); background: var(--bg-muted); margin: 0 0 32px; overflow: hidden; }
.svc-disclosure > summary { list-style: none; cursor: pointer; padding: 20px 24px; font-size: var(--fs-lead); font-weight: var(--fw-medium); color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.svc-disclosure > summary::-webkit-details-marker { display: none; }
.svc-disclosure > summary::after { content: ""; width: 12px; height: 12px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); transition: transform 0.2s ease; flex: none; }
.svc-disclosure[open] > summary::after { transform: rotate(-135deg); }
.svc-disclosure > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.svc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0 24px 24px; list-style: none; }
.svc-chips__item { background: #fff; border: 1px solid #e0e0e0; border-radius: var(--radius-pill); padding: 8px 18px; font-size: var(--fs-sm); color: var(--ink-soft); }

/* --- Phase cards: image + label + description, a 3-up row on desktop. ---------- */
.svc-phases__grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 0 0 48px; padding: 0; list-style: none; }
/* White card, soft shadow, image on top (matches the live phase cards). */
.svc-phase { display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 0 12px rgba(122,122,122,0.28); padding: 24px; }
.svc-phase__media { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #f2f2f2; }
.svc-phase__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-phase__label { font-size: 24px; line-height: 30px; font-weight: var(--fw-bold); color: var(--ink-soft); margin: 18px 0 12px; }
.svc-phase__body { font-size: 16px; line-height: 24px; color: var(--ink-soft); margin: 0; }
/* FLAT variant, /brand/ only (Helena row 61, Alex 2026-09-17). Those four "Branding Design
   Research" items were a 3-up card grid, which left the 4th card orphaned on its own row and
   read as a different system from "Branding Design Services" directly below it. Flat = one
   full-width row per item (text left, photo right at >=768px), no card ground, and the type
   of the Services block (title 24/28 ink, body 18/28 ink), so the two sections read as one.
   That is also closer to live, where these four are full-width rows with the photo as a
   section background, not cards. Scoped: the Market pages keep their 3-up phase grid, and the
   sticky topic stack (`.svc-topics .svc-topiccard`, rows 220/224/230/234/249/261) is untouched
   here, it was never on these cards. */
.svc-phases--flat .svc-phases__grid { grid-template-columns: 1fr; gap: 48px; }
.svc-phases--flat .svc-phase { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }
/* Pre-flight 2026-09-18: three of /brand/'s four images (and /software-development/'s IoT
   one) are DIAGRAMS and document sheets, and the fixed 16:11 box with object-fit: cover cut
   their tops, bottoms and edges off. Flat rows now show the whole image at its own shape,
   capped so a square diagram cannot make its row twice as tall as a photo row; any spare
   width letterboxes on the section ground, not the grey media ground. */
.svc-phases--flat .svc-phase__media { border-radius: 0; aspect-ratio: auto; background: transparent; display: flex; justify-content: center; }
/* width: 100% (not auto) so the width/height attributes reserve the row's height before a
   lazy image loads; with width: auto an unloaded image was 0px tall and every row shifted
   as it loaded (caught by the 2026-09-18 engine pass). contain keeps the whole diagram. */
.svc-phases--flat .svc-phase__media img { width: 100%; height: auto; max-height: 420px; object-fit: contain; border-radius: 8px; }
.svc-phases--flat .svc-phase__label { line-height: 28px; color: var(--ink); margin: 8px 0 12px; }
.svc-phases--flat .svc-phase__body { font-size: 18px; line-height: 28px; color: var(--ink); }
/* A flat row whose card has no photo (the "Cloud" card on /software-development/) lets its
   text span the whole row rather than leaving an empty half. Alex 2026-09-17: do not borrow
   an image from another card; a Cloud image is on the RKS asset ask. */
.svc-phases--flat .svc-phase:not(:has(.svc-phase__media)) { display: block; }

/* --- Topic list: heading + paragraph blocks (approach steps, market expertise). - */
/* Topic CARDS: a horizontal card (text + photo) per topic, matching the live
   Research Approach / Markets sections. `--stack` sticky-stacks them on desktop. */
.svc-topics { display: flex; flex-direction: column; gap: 24px; margin: 12px 0 0; padding: 0; list-style: none; }
.svc-topiccard { display: flex; flex-direction: column; gap: 16px; background: #fff; border-radius: 24px; box-shadow: 0 0 4px rgba(123,123,123,0.5); overflow: hidden; padding: 16px; }
.svc-topiccard__text { background: #fbfbfb; border-radius: 8px; padding: 32px; display: flex; flex-direction: column; justify-content: center; }
/* Card title + body match the live kit exactly: title 20px/600/lh30, body 16px/400/lh24,
   both off-black #3C3C3C (was 24px title / 18px body). */
.svc-topiccard__title { font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--ink-soft); margin: 0 0 16px; }
.svc-topiccard__body { font-size: 16px; line-height: 24px; color: var(--ink-soft); margin: 0; }
/* Image fills absolutely so it never drives the card height (the text does); the
   photo just cover-crops to whatever height the text needs. */
.svc-topiccard__media { position: relative; background: #eaeaea; border-radius: 8px; overflow: hidden; min-height: 220px; }
.svc-topiccard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* "Market Expertise" sub-heading. */
.svc-topic__title { font-size: 24px; font-weight: var(--fw-bold); color: var(--ink); margin: 8px 0 12px; }

/* Alternating topic card: image on the LEFT (text right), for the sections the live
   renders with the image side flipping each row (e.g. the Medical page's "Our Medical
   Design Services"). Desktop only; below 768 the card single-columns text-then-image. */
@media (min-width: 768px) {
  .svc-topiccard--media-left .svc-topiccard__text { order: 2; }
  .svc-topiccard--media-left .svc-topiccard__media { order: 1; }
}
/* Borderless variant (Medical "Our Medical Design Services", matching the live editorial
   layout): the image and text sit directly on the page with a gutter between them, no card
   background / shadow / rounded corners. Alternating image side (--media-left) still applies.
   Kept off the stacking "Development and Prototyping" section, which needs its card grounds
   to read as an overlapping stack. */
.svc-topics--bare { gap: 56px; }
.svc-topics--bare .svc-topiccard { background: transparent; box-shadow: none; border-radius: 0; }
.svc-topics--bare .svc-topiccard__media { min-height: 300px; background: transparent; }
@media (min-width: 768px) {
  .svc-topics--bare .svc-topiccard { column-gap: 56px; }
  .svc-topics--bare .svc-topiccard__text { padding: 0; }
}

/* --- Client logo wall: white-on-transparent brand marks recoloured to ink (the
   about-clients trick), centred and wrapping. Static (no auto-motion) for a11y. -- */
.svc-clients { text-align: center; background: var(--bg-muted); }
.svc-clients__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 48px; margin: 40px 0 0; padding: 0; list-style: none; }
.svc-clients__item { flex: 0 0 auto; }
.svc-clients__item img { height: 46px; width: auto; display: block; filter: brightness(0); opacity: 0.6; transition: opacity 0.2s ease; }
.svc-clients__item a:hover img, .svc-clients__item a:focus img { opacity: 0.9; }

/* --- Closing CTA: dark full-bleed band, inverted button (mirrors cs-cta). ------ */
.svc-cta { background: var(--ink); color: #fff; text-align: center; padding-block: 80px; }
.svc-cta__title { color: #fff; font-size: var(--fs-h1); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 2px; margin: 0 0 28px; }
.svc-cta .button { border-color: #fff; color: #fff; }
.svc-cta .button:hover, .svc-cta .button:focus { background: #fff; color: var(--ink); }
.svc-cta :focus-visible { outline-color: #fff; }

/* --- FAQ (rendered by render-pages.njk from the page `faq` array; also drives the
   FAQPage JSON-LD). Accessible native <details> accordion. ---------------------- */
.svc-faq { padding-block: 8px 8px; }
.svc-faq__list { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid #e6e6e6; }
.svc-faq__item { border-bottom: 1px solid #e6e6e6; }
.svc-faq__item > summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-size: var(--fs-lead); font-weight: var(--fw-medium); color: var(--ink); }
.svc-faq__item > summary::-webkit-details-marker { display: none; }
.svc-faq__item > summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; }
.svc-faq__item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.svc-faq__item > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.svc-faq__answer { padding: 0 0 24px; }
/* Full container width to match live (was capped at 82ch, which read as ~two-thirds
   width with the answer clipped short — Helena rounds 3/4). */
.svc-faq__answer p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); margin: 0 0 1em; }
.svc-faq__answer p:last-child { margin-bottom: 0; }

/* --- Work page: client statement band + "Hear from some of our experts" --------- */
.work-statement { text-align: center; }
.work-statement__lead { font-size: var(--fs-statement); font-weight: var(--fw-light); line-height: 1.4; color: var(--ink); max-width: 40ch; margin: 0 auto; }
.work-statement__since { font-size: var(--fs-lead); color: var(--ink-soft); margin: 16px 0 0; }
.work-experts__grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
@media (min-width: 768px) { .work-experts__grid { grid-template-columns: 1fr 1fr; } }

/* --- Service archetype responsive (mirrors the 767 / 1024 breakpoints) --------- */
@media (min-width: 768px) {
  .svc-featured__card { flex-direction: row; gap: 20px; align-items: stretch; }
  .svc-featured__text { flex: 1 1 54%; }
  .svc-featured__media { flex: 1 1 46%; min-height: 0; }
  .svc-work__grid { grid-template-columns: repeat(2, 1fr); }
  .svc-phases__grid { grid-template-columns: repeat(3, 1fr); }
  /* Market pages carry --2col: the design/engineering capability cards read 2-across
     (not 3), so 6-9 cards land in even rows instead of a ragged 3-wide grid
     (Helena round 4). Cards already stretch to equal height per row. */
  .svc-phases__grid--2col { grid-template-columns: repeat(2, 1fr); }
  /* Flat phase rows (/brand/): text left, photo right, image spanning both text rows. Grid
     rather than flex so it needs no extra wrapper element in the page body. */
  .svc-phases--flat .svc-phase { display: grid; grid-template-columns: minmax(0, 1fr) 46%; grid-template-rows: auto auto; column-gap: 56px; align-content: center; }
  .svc-phases--flat .svc-phase__media { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .svc-phases--flat .svc-phase__label { grid-column: 1; align-self: end; margin: 0 0 12px; }
  .svc-phases--flat .svc-phase__body { grid-column: 1; align-self: start; }
  .svc-statcards { grid-template-columns: repeat(3, 1fr); }
  .svc-topiccard { flex-direction: row; gap: 20px; align-items: stretch; }
  .svc-topiccard__text { flex: 1 1 50%; padding: 40px; }
  .svc-topiccard__media { flex: 1 1 50%; min-height: 0; }
}
@media (min-width: 1024px) {
  .svc-work__grid { grid-template-columns: repeat(3, 1fr); }
}
/* Sticky-stack topic cards on desktop — applies to EVERY svc-topics section, so the
   Service capability pages (Industrial Design, Product Dev, etc.) stack the same way as
   the Markets pages, not just the ones tagged --stack. Each card sticks a little lower
   than the one before, so they pile into a fanned stack as you scroll and the previous
   card still peeks behind. Offsets are defined through the 10th card with an n+10
   catch-all (industrial-design-firm has 11), so it never breaks on longer stacks the way
   the old :nth-child(4)-capped version did. Below 1025px the cards flow as a normal
   single column (no room to stack on narrow screens). */
@media (min-width: 1025px) {
  .svc-topics .svc-topiccard { position: sticky; top: 96px; }
  .svc-topics .svc-topiccard:nth-child(2) { top: 120px; }
  .svc-topics .svc-topiccard:nth-child(3) { top: 144px; }
  .svc-topics .svc-topiccard:nth-child(4) { top: 168px; }
  .svc-topics .svc-topiccard:nth-child(5) { top: 192px; }
  .svc-topics .svc-topiccard:nth-child(6) { top: 216px; }
  .svc-topics .svc-topiccard:nth-child(7) { top: 240px; }
  .svc-topics .svc-topiccard:nth-child(8) { top: 264px; }
  .svc-topics .svc-topiccard:nth-child(9) { top: 288px; }
  .svc-topics .svc-topiccard:nth-child(n+10) { top: 312px; }
  /* --row opts a specific svc-topics out of the sticky stack (UI/UX "Expertise":
     the three cards read as a 3-across equal row on live, not a scroll-stack). */
  .svc-topics--row .svc-topiccard { position: static; top: auto; }
}
/* UI/UX "Expertise": three equal cards in a row (row 64), not the sticky stack. */
.svc-topics--row { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) {
  .svc-topics--row { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .svc-topics--row .svc-topiccard { flex-direction: column; }
  .svc-topics--row .svc-topiccard__text, .svc-topics--row .svc-topiccard__media { flex: 1 1 auto; }
}
/* svc-topic items presented as cards, not a bare list (Innovation Consulting
   Approach + Markets, rows 73/74): 2-up card grid with the site card chrome. */
.svc-topics--cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .svc-topics--cards { grid-template-columns: 1fr 1fr; } }
.svc-topics--cards .svc-topic { background: #fff; border-radius: 24px; box-shadow: 0 0 4px rgba(123, 123, 123, 0.5); padding: 32px; margin: 0; }
.svc-topics--cards .svc-topic__title { margin-top: 0; }
/* 3-across image row closing the Innovation Research Process block (row 73): the
   image cards live shows at the foot of that section, equal-width, uniform height. */
.svc-imagerow { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 32px; padding: 0; list-style: none; }
@media (min-width: 768px) { .svc-imagerow { grid-template-columns: repeat(3, 1fr); } }
.svc-imagerow__item { margin: 0; }
.svc-imagerow__item img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; display: block; }
/* Touch devices can't hover, so keep the work-card labels visible there. */
@media (hover: none) {
  .svc-workcard__overlay { opacity: 1; }
  /* Logo-showcase grids (e.g. /brand/): the logo is self-labelling, so match the
     live site and keep the card clean on touch rather than overlaying the caption. */
  .svc-work--logos .svc-workcard__overlay { opacity: 0; }
}
@media (max-width: 767px) {
  .svc-hero__title { letter-spacing: 2px; }
  .svc-intro__title { font-size: 20px; line-height: 1.3; }
  .svc-intro__subtitle { font-size: 16px; line-height: 1.5; }
  .svc-intro { padding-block: 48px 32px; }
  .svc-heading { font-size: 20px; line-height: 1.3; }
  .svc-featured__title { font-size: 19px; line-height: 1.3; }
  .svc-cta__title { font-size: 22px; }
  .svc-clients__item img { height: 38px; }
  .svc-statcard__num { font-size: 40px; }
  .svc-phase__label, .svc-topiccard__title, .svc-topic__title { font-size: 18px; line-height: 1.35; }
  .svc-workcard__overlay { opacity: 1; }
}

/* ============================================================================
   BLOG / INSIGHTS ARCHETYPE (bl-*)  — added 2026-08-25
   Two authored lanes (From Ravi's Desk / Field Notes) + the Insights hub.
   Namespaced bl-* so nothing collides with existing archetypes. Accent is the
   brand red #EC1308, matched to the logo mark (#F31408, nudged darker to clear
   WCAG AA 4.5:1 on white). Set site-wide, replacing the earlier raspberry #CC3366.
   ============================================================================ */
.bl { --bl-accent: var(--brand-red); --bl-accent-deep: #BF0F06; --bl-muted: #6B7280; --bl-line: #E6E4E1; --bl-line-2: #D8D5D0; --bl-panel: #F6F5F4; --bl-dark: #141414; --bl-measure: 860px; }
/* Blog pages: consistent breathing room before the footer, below whatever the
   last element is (an FAQ band on the how-to renders after .bl, so this sits on
   the article wrapper, not on .bl). */
.page--wide:has(.bl) { padding-bottom: 96px; }
.bl a { color: var(--bl-accent); }
.bl-wrap { width: 80%; max-width: 1600px; margin-inline: auto; padding-inline: 0; }
.bl-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bl-accent-deep); margin: 0 0 12px; }
.bl-eyebrow--light { color: rgba(255,255,255,.72); }
.bl-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px; border-radius: 3px; border: 1px solid var(--bl-line-2); color: var(--bl-muted); background: #fff; }
.bl-tag--accent { color: var(--ink); border-color: var(--bl-line-2); background: #fff; }
.bl-schema { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--bl-muted); border: 1px dashed var(--bl-line-2); border-radius: 6px; padding: 4px 9px; display: inline-flex; gap: 6px; align-items: center; }
.bl-schema b { color: var(--ink); font-weight: 600; }

/* hub masthead */
.bl-mast { border-bottom: 1px solid var(--bl-line); padding: 30px 0 26px; }
.bl-kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bl-accent-deep); margin: 0 0 8px; }
.bl-masttitle { font-size: clamp(var(--fs-h1), 6vw, var(--fs-display)); font-weight: var(--fw-bold); color: var(--ink); letter-spacing: -.02em; line-height: 1; margin: 0; }
.bl-masttag { color: var(--bl-muted); font-size: 15px; margin: 12px 0 0; max-width: 52ch; }

/* From Ravi's Desk feature band */
.bl-deskband { background: var(--bl-dark); color: #fff; }
.bl-deskband__in { display: grid; grid-template-columns: 1.5fr auto; gap: 44px; align-items: center; padding: 52px 0; }
.bl-deskband h2 { color: #fff; font-size: clamp(var(--fs-h2), 3.4vw, var(--fs-accent)); font-weight: var(--fw-bold); line-height: 1.2; margin: 0 0 16px; }
.bl-deskband__dek { color: rgba(255,255,255,.74); font-size: 17px; max-width: 48ch; margin: 0 0 24px; }
.bl-deskportrait img { width: 210px; height: 260px; object-fit: cover; object-position: center 25%; border-radius: 6px; display: block; }
.bl-byline { display: flex; align-items: center; gap: 13px; }
.bl-byline__name { font-weight: 600; color: var(--ink); font-size: 15px; line-height: 1.3; }
.bl-byline__meta { color: var(--bl-muted); font-size: 13px; line-height: 1.35; }
.bl-deskband .bl-byline__name { color: #fff; }
.bl-deskband .bl-byline__meta { color: rgba(255,255,255,.62); }
.bl-avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; background: var(--bl-panel); border: 1px solid var(--bl-line-2); display: block; }
.bl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-avatar--lg { width: 60px; height: 60px; }

/* Field Notes index list */
.bl-field { padding: 56px 0 0; }
.bl-field__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.bl-field__head h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--ink); margin: 0; }
.bl-reviewed { font-size: 12px; color: var(--bl-muted); display: inline-flex; align-items: center; gap: 6px; }
.bl-reviewed b { color: var(--ink); font-weight: 600; } .bl-tick { color: var(--ink); font-weight: 700; }
.bl-list { display: flex; flex-direction: column; }
.bl-item { display: flex; justify-content: space-between; gap: 44px; padding: 26px 0; border-top: 1px solid var(--bl-line); }
.bl-item:last-child { border-bottom: 1px solid var(--bl-line); }
.bl-item__main { max-width: 64ch; }
.bl-item h3 { font-size: 20px; line-height: 1.3; margin: 9px 0; font-weight: 600; }
.bl-item h3 a { color: var(--ink); text-decoration: none; }
.bl-item h3 a:hover { color: var(--bl-accent); }
.bl-item__dek { color: var(--bl-muted); font-size: 15px; margin: 0; }
.bl-item__aside { flex: none; width: 168px; text-align: right; font-size: 12.5px; color: var(--bl-muted); line-height: 1.5; }
.bl-item__aside b { color: var(--ink); font-weight: 600; }
.bl-item__lead-row { display: flex; gap: 24px; align-items: flex-start; }
.bl-item__thumb { border-radius: 4px; overflow: hidden; flex: none; }
.bl-item__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); display: block; }
.bl-item:hover .bl-item__thumb img { transform: scale(1.05); }
.bl-item--lead h3 { font-size: 27px; margin: 12px 0; }
.bl-go { color: var(--bl-accent); font-weight: 600; font-size: 13px; white-space: nowrap; opacity: 0; transform: translateX(-5px); transition: opacity .25s, transform .25s; }
.bl-item:hover .bl-go { opacity: 1; transform: none; }

/* article */
.bl-article { padding: 56px 0 0; }
.bl-article__head { max-width: var(--bl-measure); }
.bl-article h1 { font-size: clamp(var(--fs-h1), 3.6vw, var(--fs-accent)); font-weight: var(--fw-bold); color: var(--ink); margin: 14px 0 16px; line-height: 1.15; text-wrap: balance; }
.bl-dek { font-size: var(--fs-lead); line-height: 1.5; color: var(--bl-muted); max-width: 62ch; margin: 0 0 26px; }
.bl-hero { margin: 4px 0 30px; }
/* Natural aspect within a max height (PM rule 2026-09-12): a wide cover shows in full; a
   tall image is capped and cropped from the top only, never force-cropped to a fixed band. */
.bl-hero img { width: 100%; height: auto; max-height: 520px; object-fit: cover; object-position: center top; border-radius: 6px; display: block; }
.bl-hero figcaption { font-size: 12.5px; color: var(--bl-muted); margin-top: 9px; }
.bl-authorcard { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid var(--bl-line); border-bottom: 1px solid var(--bl-line); }
.bl-authorcard__id { display: flex; gap: 14px; align-items: flex-start; }
.bl-authorcard__id > div { min-width: 0; }   /* let the text column shrink + wrap, never clip */
.bl-authorcard__name { font-weight: 600; color: var(--ink); font-size: 16px; }
/* Ravi's role line wraps to multiple lines, never clips (PM round-5 batch-2). */
.bl-authorcard__role { color: var(--bl-muted); font-size: 13.5px; max-width: 60ch; white-space: normal; overflow-wrap: anywhere; }
.bl-same { display: inline-flex; gap: 7px; margin-top: 6px; }
.bl-same a { width: 26px; height: 26px; border: 1px solid var(--bl-line-2); border-radius: 6px; display: grid; place-items: center; color: var(--bl-muted); font-size: 11px; font-weight: 600; text-decoration: none; }
.bl-same a:hover { color: #fff; background: var(--ink); border-color: var(--ink); }
.bl-postmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 26px 0 26px; font-size: 13.5px; color: var(--bl-muted); }
.bl-postmeta b { color: var(--ink); font-weight: 600; } .bl-postmeta__rev { color: var(--ink-soft); }
/* Width model (PM 2026-09-14, Alex-approved): the prose column spans the full content
   container (.bl-article = .bl-wrap, ~1034px at a 1293 viewport); TEXT blocks stay a readable
   ~860px measure centered, while MEDIA figures break out to the full container width. Tall/
   portrait images keep natural aspect and never upscale (img max-width:100% + no set width =
   natural-or-container). TOC, answer, sources stay in the text column. */
.bl-prose { max-width: 100%; margin-top: 8px; }
.bl-prose > h2, .bl-prose > h3, .bl-prose > p, .bl-prose > ul, .bl-prose > ol,
.bl-prose > blockquote, .bl-prose > .bl-postmeta, .bl-prose > .bl-answer, .bl-prose > .bl-takeaways,
.bl-prose > .bl-pullquote, .bl-prose > .bl-contents, .bl-prose > .bl-evidence, .bl-prose > .bl-sources,
.bl-prose > .bl-boxlabel, .bl-prose > .bl-signoff {
  max-width: var(--bl-measure); margin-inline: auto;
}
/* media breaks out to the full content width; captions follow their media width */
.bl-prose > .bl-inlinefig, .bl-prose > .bl-video, .bl-prose > .bl-video-row { max-width: 100%; margin-inline: auto; }
.bl-prose h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.3; color: var(--ink); margin: 34px 0 12px; }
.bl-prose h3 { font-size: var(--fs-lead); font-weight: var(--fw-bold); line-height: 1.35; color: var(--ink); margin: 28px 0 10px; }
.bl-prose p { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-soft); margin: 0 0 1.1em; }
.bl-prose strong { color: var(--ink); }
/* Inline prose links: same style in paragraphs, list items and blockquotes (not just <p>),
   so body links read consistently (PM round-5 batch-2: DreamWarmer "Learn More" links). The
   accent underline sits at rest and fills on hover, so a link is always distinguishable. */
.bl-prose p a, .bl-prose li a, .bl-prose blockquote a { color: var(--bl-accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; transition: opacity .2s; overflow-wrap: anywhere; }
.bl-prose p a:hover, .bl-prose li a:hover, .bl-prose blockquote a:hover { opacity: .72; }
.bl-signoff { margin-top: 26px; font-weight: 600; color: var(--ink); }
.bl-boxlabel { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bl-muted); margin: 0 0 10px; }
/* Opening standfirst (was the tinted "Short answer" box). Neutral editorial lead:
   no fill/label, a thin hairline left rule, slightly larger than body copy. */
.bl-answer { border-left: 2px solid var(--bl-line-2); padding: 2px 0 2px 22px; margin: 26px 0; }
.bl-answer p { margin: 0; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-soft); }
.bl-takeaways { border-left: 3px solid var(--ink); padding: 4px 0 4px 22px; margin: 24px 0; }
.bl-takeaways ul { margin: 0; padding-left: 20px; } .bl-takeaways li { margin: 7px 0; color: var(--ink-soft); }
.bl-pullquote { border-left: 3px solid var(--bl-accent); padding: 6px 0 6px 22px; margin: 30px 0; font-size: 21px; line-height: 1.42; color: var(--ink); font-weight: 500; }
.bl-contents { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin: 24px 0 6px; padding-bottom: 18px; border-bottom: 1px solid var(--bl-line); }
.bl-contents__label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bl-muted); }
.bl-contents a { font-size: 14px; color: var(--ink-soft); text-decoration: none; } .bl-contents a:hover { color: var(--bl-accent); }
.bl-evidence { border: 1px solid var(--bl-line); border-radius: 4px; overflow: hidden; margin: 28px 0; }
.bl-evidence__label { background: var(--bl-panel); padding: 10px 18px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bl-muted); border-bottom: 1px solid var(--bl-line); }
.bl-evidence__row { display: flex; gap: 16px; align-items: center; padding: 16px 18px; }
.bl-evidence__row + .bl-evidence__row { border-top: 1px solid var(--bl-line); }
.bl-evidence__thumb { width: 76px; height: 60px; border-radius: 3px; overflow: hidden; flex: none; background: var(--bl-panel); }
.bl-evidence__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-evidence__t { font-weight: 600; color: var(--ink); font-size: 15px; } .bl-evidence__d { color: var(--bl-muted); font-size: 13px; }
/* Inline figures are centered in the text column. Images render at their natural
   width UP TO the full prose measure (max-width:100%, never upscaled), so a
   high-res image fills the column and a smaller one stays its own size, both
   centered. `--narrow` is retained as a no-op alias (older posts reference it);
   the natural-width rule already keeps genuinely small images from stretching. */
.bl-inlinefig { margin: 30px 0; text-align: center; }
.bl-inlinefig img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin-inline: auto; }
.bl-inlinefig figcaption { font-size: 12.5px; color: var(--bl-muted); margin-top: 9px; max-width: 60ch; margin-inline: auto; }
/* Inline video figure (bl-video): native controls, no JS, poster carries the still
   frame. preload=none keeps it off the critical path. Same measure as bl-inlinefig. */
.bl-video { margin: 30px 0; }
.bl-video video { width: 100%; height: auto; border-radius: 6px; display: block; background: var(--bl-dark); }
.bl-video figcaption { font-size: 12.5px; color: var(--bl-muted); margin-top: 9px; max-width: 60ch; }
/* "Hear from Some of Our Experts": two self-hosted clips side by side. */
.bl-video-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; }
.bl-video-row .bl-video { margin: 0; }
@media (max-width: 640px) { .bl-video-row { grid-template-columns: 1fr; } }

/* Sources & coverage: external listen/watch/read/download links a live post showed as
   buttons (podcast episode, press article, press release, PDF, campaign). Drawn from the
   post's `sources` field, never baked into the body. */
.bl-sources { margin: 34px 0 8px; padding: 16px 18px; border: 1px solid var(--bl-border, #e4e0d8); border-radius: 10px; background: var(--bl-tint, #faf8f4); }
.bl-sources__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bl-muted); margin-bottom: 10px; }
.bl-sources__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bl-source a { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; }
.bl-source__act { font-weight: 600; color: var(--brand-on-tint); }
.bl-source__act::before { content: "\2197\00a0"; font-weight: 400; }
.bl-source--listen .bl-source__act::before { content: "\25B6\00a0"; }
.bl-source--watch .bl-source__act::before { content: "\25B6\00a0"; }
.bl-source--download .bl-source__act::before { content: "\2913\00a0"; }
.bl-source__name { color: var(--bl-muted); font-size: 13.5px; }
.bl-artfoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 30px; }

/* Explore more from RKS: 3 related-post cards (drawn from `related`). */
.bl-more { padding: 40px 0; }
.bl-more__title { font-size: 22px; margin: 0 0 20px; }
.bl-more__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 720px) { .bl-more__grid { grid-template-columns: 1fr; } }
.bl-more__card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--bl-border, #e4e0d8); border-radius: 10px; overflow: hidden; background: var(--bl-tint, #faf8f4); transition: transform .15s ease, box-shadow .15s ease; }
.bl-more__card:hover, .bl-more__card:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.bl-more__img { display: block; aspect-ratio: 16 / 9; background: var(--bl-dark, #1a1a1a); }
.bl-more__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-more__cat { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bl-muted); margin: 14px 16px 4px; }
.bl-more__h { font-size: 15.5px; font-weight: 600; line-height: 1.35; margin: 0 16px 16px; }

/* motion (one-time reveal + clip + reading progress), reduced-motion safe */
.bl-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--bl-accent); z-index: 60; }
.js .bl-reveal > * { opacity: 0; transform: translateY(16px); }
.js .bl-reveal.in > * { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.75,.2,1), transform .7s cubic-bezier(.2,.75,.2,1); }
.js .bl-reveal.in > *:nth-child(2) { transition-delay: .07s; }
.js .bl-reveal.in > *:nth-child(3) { transition-delay: .14s; }
.js .bl-reveal.in > *:nth-child(4) { transition-delay: .21s; }
.js .bl-reveal.in > *:nth-child(5) { transition-delay: .28s; }
.js .bl-clip { clip-path: inset(0 100% 0 0); }
.js .bl-clip.in { clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.2,.75,.2,1); }
@media (prefers-reduced-motion: reduce) { .js .bl-reveal > *, .js .bl-clip { opacity: 1 !important; transform: none !important; clip-path: none !important; } .bl-item__thumb img { transition: none !important; } }

@media (max-width: 900px) {
  .bl-deskband__in { grid-template-columns: 1fr; }
  .bl-item { flex-direction: column; gap: 12px; } .bl-item__aside { width: auto; text-align: left; }
  .bl-hero img { height: 260px; }
  .bl-article { padding-top: 32px; }
}

/* Hub cards, sizes formerly inline in the hand-authored insights page body; the
   data-driven insights.njk hub renders them as classes so the stylesheet stays
   the single source of truth. */
.bl-item--lead .bl-item__thumb { width: 210px; height: 140px; }
.bl-item__topic { margin: 0 0 6px; }
.bl-deskband__cta { margin-top: 26px; }
.bl-deskportrait { margin: 0; }

/* ---- In the News hub (nw-*, inside .bl for the shared accent vars) ---------- */
.nw-filter { display: flex; gap: 8px; flex-wrap: wrap; padding: 26px 0 28px; }
.nw-btn { border: 1px solid var(--bl-line-2); background: #fff; color: var(--bl-muted); font-family: var(--font); font-size: 12.5px; font-weight: 500; padding: 7px 15px; border-radius: 3px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.nw-btn:hover { border-color: var(--ink); color: var(--ink); }
.nw-btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.nw-feature { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--bl-line); padding: 24px 0 30px; margin-bottom: 36px; }
.nw-feature h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 600; line-height: 1.2; color: var(--ink); margin: 10px 0 12px; max-width: 22ch; }
.bl-item__thumb { width: 150px; height: 100px; }
.nw-feature__dek { color: var(--bl-muted); font-size: 16px; max-width: 62ch; margin: 0 0 18px; }
.nw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 26px; }
.nw-card { display: flex; flex-direction: column; gap: 11px; }
.nw-card__media { position: relative; display: block; border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bl-panel); }
.nw-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); display: block; }
.nw-card:hover .nw-card__media img { transform: scale(1.04); }
.nw-card__media--text { display: grid; place-items: center; background: var(--bl-dark); }
.nw-card__srcbig { color: rgba(255,255,255,.92); font-weight: 600; font-size: 15px; text-align: center; padding: 0 14px; }
.nw-card__play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; background: rgba(20,20,20,.66); color: #fff; display: grid; place-items: center; font-size: 13px; padding-left: 3px; }
.nw-card__src { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bl-accent-deep); }
.nw-card h3 { font-size: 17px; line-height: 1.32; font-weight: 600; }
.nw-card h3 a { color: var(--ink); text-decoration: none; } .nw-card h3 a:hover { color: var(--bl-accent); }
.nw-card__foot { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--bl-muted); margin-top: auto; padding-top: 2px; }
.nw-card__action { color: var(--bl-accent); font-weight: 600; white-space: nowrap; text-decoration: none; }
.nw-inquiry { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--bl-line); color: var(--bl-muted); font-size: 14px; }

/* In the News — data-driven sections (Videos / Podcasts / Press). Each <section>
   carries data-type so the shared .nw-filter shows all three (All) or one (per tab). */
/* Top margin is 0 by design: see .bl--gal .nw-filter. The 8px that used to sit here is
   carried by .bl-mosaic's bottom margin so the mosaic-to-Videos rhythm is unchanged. */
.nw-section { margin: 0 0 44px; }
.nw-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.nw-section__more { font-size: 13px; font-weight: 600; color: var(--bl-accent); text-decoration: none; white-space: nowrap; }
.nw-section__more:hover { text-decoration: underline; }
.nw-card[data-needs-review] { /* editorial-only marker; no visible change */ }

/* /rks-video/ — self-hosted clip gallery (native <video>, no autoplay). */
.rv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; padding: 34px 0 8px; }
.rv-item { margin: 0; }
.rv-video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; border-radius: var(--radius-card); }
.rv-cap { margin: 12px 2px 0; font-size: 16px; font-weight: var(--fw-medium); line-height: 1.35; color: var(--ink); }
.rv-back { margin: 26px 0 8px; }
.rv-back a { color: var(--bl-accent); font-weight: 600; text-decoration: none; }
.rv-back a:hover { text-decoration: underline; }
@media (max-width: 640px) { .rv-grid { grid-template-columns: 1fr; } }

/* ── Option 3 (Gallery) for the Insights hub and In the News, matched to the approved mock
   (Alex, 2026-09-08). Quiet one-line masthead, full-bleed hero on a scrim, asymmetric
   image-led cards, press wall, image + dark panel feature. Every size is a site token
   (--fs-sm 16 / --fs-body 18 / --fs-lead 20 / --fs-h2 28 / --fs-h1 32, the feature clamp);
   colors are the blog palette; #EC1308 (--bl-accent) is the only accent. ─────────── */
.bl-galmast-band { background: var(--bl-dark); }
.bl-gal-hero__mast { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 26px 0 44px; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 100%); }
.bl-gal-hero__mast .bl-galmast { padding: 0; }
.bl-gal-hero--text-light .bl-galmast__title { color: #fff; }
.bl-gal-hero--text-light .bl-galmast__tag { color: rgba(255,255,255,.82); }
.bl-gal-hero--text-dark .bl-gal-hero__mast { background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 100%); }
.bl-gal-hero--text-dark .bl-galmast__title { color: var(--ink); }
.bl-gal-hero--text-dark .bl-galmast__tag { color: var(--ink-soft); }
.bl--gal .bl-galmast { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 30px 0 26px; }
.bl--gal .bl-galmast__title { font-size: var(--fs-h1); font-weight: var(--fw-medium); letter-spacing: -.01em; color: #fff; margin: 0; }
.bl--gal .bl-galmast__tag { font-size: var(--fs-sm); color: rgba(255,255,255,.72); margin: 0; text-align: right; max-width: 48ch; }
.bl-gal-hero { position: relative; background: var(--bl-panel); }
.bl-gal-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 640px; object-fit: cover; object-position: center 25%; display: block; }
.bl-gal-hero__band { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 0 32px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.66) 100%); color: #fff; }
.bl-gal__cat { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--bl-accent); margin: 0 0 8px; }
.bl-gal__cat--light { color: #fff; opacity: .85; }
.bl-gal-hero__title { font-size: clamp(var(--fs-h2), 3.4vw, var(--fs-accent)); font-weight: var(--fw-medium); line-height: 1.15; color: #fff; margin: 0; max-width: 26ch; text-wrap: balance; }
.bl-gal-hero__title a { color: #fff; text-decoration: none; }
.bl-gal-hero__title a:hover, .bl-gal-hero__title a:focus { text-decoration: underline; text-decoration-color: var(--bl-accent); text-underline-offset: 4px; }
.bl-gal-hero__meta { font-size: var(--fs-sm); color: rgba(255,255,255,.85); margin: 12px 0 0; }
.bl-gal__label { font-size: var(--fs-sm); color: var(--bl-muted); margin: 0; }
.bl-gal__label b { color: var(--ink); font-weight: var(--fw-bold); }
.bl-gal-hero__label { display: block; margin: 12px auto 0; }
.bl-gal-field { padding-top: 44px; }
.bl-gal-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.bl-gal-field__head h2 { font-size: var(--fs-h2); font-weight: var(--fw-medium); color: var(--ink); margin: 0; }
.bl-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.bl-gal__card { display: flex; flex-direction: column; gap: 10px; }
.bl-gal__card--lead { grid-column: span 2; }
.bl-gal__media { display: block; height: clamp(240px, 26vw, 340px); overflow: hidden; background: var(--bl-panel); }
.bl-gal__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.bl-gal__card:hover .bl-gal__media img { transform: scale(1.04); }
.bl-gal__card h3, .bl-gal-rest__item h3 { font-size: var(--fs-lead); line-height: 1.3; font-weight: var(--fw-medium); margin: 0; }
.bl-gal__card h3 a, .bl-gal-rest__item h3 a { color: var(--ink); text-decoration: none; }
.bl-gal__card h3 a:hover, .bl-gal-rest__item h3 a:hover { color: var(--bl-accent); }
.bl-gal-rest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--bl-line); }
.bl-gal__media--small { height: clamp(170px, 17vw, 230px); }
.bl-gal-rest__item { display: flex; flex-direction: column; gap: 10px; }
.nw-wall { border-top: 1px solid var(--bl-line); border-bottom: 1px solid var(--bl-line); }
.nw-wall__in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 18px 0; }
.nw-wall__label { font-size: var(--fs-sm); color: var(--bl-muted); }
.nw-wall__name { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--ink); }
/* At phone width the three bold lead-size names wrapped into three stacked lines that read
   as headings (pre-flight 2026-09-18). Below 600px: one label-with-names line that wraps
   inline, smaller and lighter. */
@media (max-width: 600px) {
  .nw-wall__in { justify-content: flex-start; gap: 4px 16px; padding: 14px 0; }
  .nw-wall__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
}
.bl--gal .nw-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 0; padding: 0; margin: 0 0 40px; }
.nw-feature__media { display: block; height: clamp(320px, 34vw, 440px); background: var(--bl-panel); }
.nw-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-feature__panel { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; padding: 36px 48px; background: var(--bl-dark); color: #fff; }
.nw-feature__panel h2 { font-size: var(--fs-h2); line-height: 1.15; font-weight: var(--fw-medium); color: #fff; margin: 0; }
.nw-feature__panel .nw-feature__dek { font-size: var(--fs-body); color: rgba(255,255,255,.8); margin: 0; }
.bl .nw-feature__cta, .nw-feature__cta { color: var(--brand-on-dark); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; border-bottom: 2px solid var(--bl-accent); padding-bottom: 2px; }
.nw-feature__cta:hover, .nw-feature__cta:focus { color: #fff; opacity: .85; }
.bl--gal .nw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.bl--gal .nw-card { display: flex; flex-direction: column; gap: 10px; }
.bl--gal .nw-grid > .nw-card:first-child { grid-column: span 2; }
.bl--gal .nw-card__media { position: relative; display: block; height: clamp(200px, 22vw, 300px); overflow: hidden; background: var(--bl-panel); border-radius: 0; text-decoration: none; }
.bl--gal .nw-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.nw-chip { position: absolute; left: 16px; bottom: 16px; background: #fff; color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-medium); padding: 6px 10px; }
.bl--gal .nw-card__media--text { display: grid; place-items: center; background: var(--bl-dark); }
.bl--gal .nw-card__media--text .nw-card__srcbig { color: #fff; font-size: var(--fs-lead); font-weight: var(--fw-bold); text-decoration: none; text-align: center; padding: 0 16px; }
.bl--gal .nw-card h3 { font-size: var(--fs-lead); line-height: 1.3; font-weight: var(--fw-medium); margin: 0; }
.bl--gal .nw-card h3 a { color: var(--ink); text-decoration: none; }
.bl--gal .nw-card h3 a:hover { color: var(--bl-accent); }
.bl--gal .nw-inquiry { font-size: var(--fs-body); margin-top: 40px; }
/* The gap under the tab row is owned by the TAB ROW (Alex 2026-09-17). It used to come
   from whatever happened to render first: .nw-feature's 36px top margin. Any tab that
   filtered the feature out lost the whole gap and the first section sat against the tabs
   (Insights: 36/36/0/8/8/8 px across its six tabs). Every candidate first element below
   now has NO top margin, so this one value is the first gap on every tab of both hubs.
   Margins between sections are unchanged: they come from the bottom margins. */
.bl--gal .nw-filter { display: flex; gap: 28px; flex-wrap: wrap; padding: 24px 0 4px; margin-bottom: 36px; }
.bl--gal .nw-btn { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 6px 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-soft); }
.bl--gal .nw-btn:hover, .bl--gal .nw-btn:focus-visible { color: var(--ink); border-bottom-color: var(--bl-line-2); }
.bl--gal .nw-btn.is-active { color: var(--ink); background: transparent; border-bottom-color: var(--bl-accent); }
/* The gallery rules set an explicit display on the feature and cards, which would beat the UA's
   [hidden] { display: none }; keep the media-type filter working. */
.bl--gal [hidden] { display: none !important; }

/* ── Hub pages under the transparent header (Alex, 2026-09-08). Both hubs opt into the
   fixed, see-through header the homepage uses; the mastheads drop below it. ──────── */
body.has-hero .bl-gal-hero__mast { padding-top: 104px; }
body.has-hero .bl-galmast-band .bl-galmast { padding-top: 104px; }
/* Insights mosaic: 1 / 2 / 3-column tiles packed densely so there are no holes; wider tiles
   get a taller image and a larger title so the variation reads as intentional. */
.bl-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 32px 24px; margin-bottom: 8px; }
.bl-mosaic__item--2 { grid-column: span 2; }
.bl-mosaic__item--3 { grid-column: span 3; }
.bl-mosaic__item--2 .nw-card__media { height: clamp(240px, 26vw, 340px); }
.bl-mosaic__item--3 .nw-card__media { height: clamp(300px, 34vw, 460px); }
.nw-feature__panel h2 a { color: #fff; text-decoration: none; }
.nw-feature__panel h2 a:hover, .nw-feature__panel h2 a:focus { color: #fff; text-decoration: underline; text-decoration-color: var(--bl-accent); text-underline-offset: 4px; }
@media (max-width: 800px) {
  .bl-mosaic { grid-template-columns: minmax(0, 1fr); }
  .bl-mosaic__item--2, .bl-mosaic__item--3 { grid-column: auto; }
  .bl-mosaic__item--2 .nw-card__media, .bl-mosaic__item--3 .nw-card__media { height: clamp(200px, 56vw, 300px); }
}
/* over-light: the header is sitting on a LIGHT hero (the adaptive Insights hero chose
   black type), so use ink text while staying transparent. Generated by mirroring the
   existing scrolled-over-light rules so the two states cannot drift. */
:is(body.home, body.has-hero) .site-header.over-light:not(.scrolled) { background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0)); }
:is(body.home, body.has-hero) .site-header.over-light .mega-trigger { color: var(--ink); }
:is(body.home, body.has-hero) .site-header.over-light .site-nav > ul > li > a[aria-current="page"] { color: var(--brand); }
:is(body.home, body.has-hero) .site-header.over-light .button { border-color: var(--ink); color: var(--ink); }
:is(body.home, body.has-hero) .site-header.over-light .button:focus { background: var(--ink); color: #fff; }
:is(body.home, body.has-hero) .site-header.over-light .nav-burger span { background: var(--ink); }
@media (max-width: 800px) {
  .bl-gal, .bl-gal-rest, .bl--gal .nw-grid, .bl--gal .nw-feature { grid-template-columns: minmax(0, 1fr); }
  .bl-gal__card--lead, .bl--gal .nw-grid > .nw-card:first-child { grid-column: auto; }
  .nw-feature__panel { padding: 24px; }
  .bl-gal__media, .bl--gal .nw-card__media { height: clamp(200px, 56vw, 300px); }
  .bl--gal .bl-galmast { flex-direction: column; align-items: flex-start; }
  .bl--gal .bl-galmast__tag { text-align: left; }
}
@media (max-width: 820px) { .nw-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .nw-grid { grid-template-columns: 1fr; } }

/* ── Founder / person page (ravi-sawhney) ──────────────────────────────────
   Reuses the about-story two-column pattern; only the intro grid, name scale,
   and bio measure are new. Base rules first, its own @media after (cascade). */
.founder-intro__inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px 56px; align-items: center; }
.founder-intro__media { border-radius: var(--radius-card); overflow: hidden; background: #111; max-width: 400px; }
.founder-intro__media img { width: 100%; height: auto; display: block; }
.founder-intro__name { font-size: var(--fs-hero); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.1; margin: 6px 0 6px; }
.founder-intro__role { font-size: var(--fs-lead); color: var(--ink-soft); font-weight: var(--fw-medium); margin: 0 0 22px; }
.founder-intro__lead { margin: 0 0 26px; }
.founder-links { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.founder-bio__measure { max-width: 72ch; margin-inline: auto; }
.founder-bio__measure p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); margin: 0 0 1.2em; }
.founder-bio__measure p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .founder-intro__inner { grid-template-columns: 1fr; gap: 28px; }
  .founder-intro__media { max-width: 280px; margin-inline: auto; }
}

/* ── Legal / policy pages (privacy-policy) ─────────────────────────────────
   Readable single-column measure; quiet, document-like typography. */
.legal { padding: 56px 0 72px; }
.legal__inner { max-width: 74ch; margin-inline: auto; }
.legal__title { font-size: var(--fs-hero); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.15; margin: 0 0 6px; }
.legal__meta { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0 0 32px; }
.legal h2 { font-size: 1.15rem; font-weight: var(--fw-bold); color: var(--ink); line-height: 1.35; margin: 40px 0 12px; }
.legal p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); margin: 0 0 1em; }
.legal ul { margin: 0 0 1em; padding-left: 1.3em; }
.legal li { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); margin: 0 0 .4em; }
.legal a { color: var(--brand); text-underline-offset: 2px; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: var(--fs-sm); }
.legal td, .legal th { border: 1px solid #e2e2e2; padding: 10px 12px; text-align: left; vertical-align: top; color: var(--ink-soft); }

/* ── Awards page (rks-awards) ──────────────────────────────────────────────
   Intro + recognition badge grid + two-column product-award list. */
.awards-title { font-size: var(--fs-hero); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.1; margin: 0 0 14px; }
.awards-lead { max-width: 70ch; }
.awards-subhead { font-size: 1.4rem; font-weight: var(--fw-bold); color: var(--ink); text-align: center; margin: 0 0 30px; }
.awards-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 32px; align-items: center; justify-items: center; }
.awards-badges li { display: flex; align-items: center; justify-content: center; width: 100%; }
.awards-badges img { max-width: 128px; max-height: 72px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: opacity .2s ease, filter .2s ease; }
.awards-badges img:hover { filter: grayscale(0); opacity: 1; }
.awards-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 52px; }
.awards-item { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid #ececec; }
.awards-item__product { font-weight: var(--fw-medium); color: var(--ink); }
.awards-item__client { font-size: var(--fs-sm); color: var(--ink-soft); text-align: right; white-space: nowrap; }
@media (max-width: 767px) {
  .awards-badges { grid-template-columns: repeat(2, 1fr); gap: 26px 24px; }
  .awards-list { grid-template-columns: 1fr; gap: 0; }
}

/* ── Markets hub (markets) ─────────────────────────────────────────────────
   Intro + market-card grid (link to each market page) + featured-work strip. */
.markets-title { font-size: var(--fs-hero); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.1; margin: 0 0 14px; }
.markets-lead { max-width: 74ch; }
.market-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.market-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e6e6; border-radius: var(--radius-card); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.market-card:hover { box-shadow: 0 14px 34px -14px rgba(0,0,0,.2); transform: translateY(-3px); }
.market-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.market-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.market-card:hover .market-card__media img { transform: scale(1.04); }
.market-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.market-card__title { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--ink); margin: 0; }
.market-card__desc { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-soft); margin: 0; flex: 1; }
.market-card__link { font-weight: var(--fw-medium); color: var(--brand); text-decoration: none; align-self: flex-start; }
.market-card__link:hover { text-decoration: underline; }
.mk-feature-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mk-feature { display: flex; flex-direction: column; gap: 10px; }
.mk-feature__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card); background: #111; }
.mk-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-feature__cat { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.mk-feature__body { display: flex; flex-direction: column; gap: 4px; }
.mk-feature__title { font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--ink); text-decoration: none; }
.mk-feature__title:hover { color: var(--brand); }
@media (max-width: 900px) { .market-grid, .mk-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .market-grid, .mk-feature-grid { grid-template-columns: 1fr; } }

/* ── Form status line (shared by all .contact-form flows) ──────────────────*/
.form-status { margin: 0; font-size: var(--fs-sm); min-height: 1.2em; color: var(--ink-soft); }
.form-status--ok { color: #1f7a55; font-weight: var(--fw-medium); }
.form-status--error { color: var(--error-text); font-weight: var(--fw-medium); }
/* The home form sits on the dark photo banner, where the grey, green and red status
   colours all fail AA (1.9, 3.97 and 4.00:1 even on pure black). White on the banner;
   the message wording carries the error, not the colour. */
.home-contact .form-status, .home-contact .form-status--ok, .home-contact .form-status--error { color: #fff; }
.form-status a { color: inherit; }

/* ── Footer RKS logo (above the tagline) ───────────────────────────────────*/
.site-footer__logo { display: block; width: 52px; height: 52px; margin: 0 0 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   MOTION (2026-09-10, Alex: options 1 + 2 + 3 together). Content is always in the
   HTML and visible at rest; motion is layered on top and removed under
   prefers-reduced-motion, so crawlers and screen readers never see hidden copy.
   1. Scroll-driven reveal (no JS) where the browser supports view() timelines.
   2. Slow drift on hero media (image/video heroes only; iframe heroes keep their
      centering transform).
   3. Entrance-fade fallback: base.njk adds .rks-motion-js only when view() is
      unsupported, and marks elements BELOW the first viewport with .rks-wait;
      an IntersectionObserver swaps that for .is-in. Nothing above the fold is
      ever parked invisible.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cs-card, .cs-media > .cs-figure, .cs-video, .cs-pa, .cs-feature, .cs-quote, .cs-cta .container,
    .cs-gallery__grid > *, .cs-related__grid > *, .cs-overview__intro, .cs-prose__inner,
    .svc-featured__card, .svc-topic, .svc-section .container > *, .bl-gal__card, .bl-authorcard,
    [data-motion="review"] .bl-inlinefig {
      animation: rks-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
    /* 2025-year-in-review only (PM 2026-09-14): reproduce live's section-bg scroll parallax on
       the image figures. `translate` composes with the :hover transform below (no conflict). */
    [data-motion="review"] .bl-inlinefig img {
      animation: yir-parallax linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
  @keyframes rks-rise { from { opacity: 0.0001; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes yir-parallax { from { translate: 0 -14px; } to { translate: 0 14px; } }
  /* live's 1.02 tap/hover scale (desktop pointer only) */
  [data-motion="review"] .bl-inlinefig img { transition: transform .3s ease; }
  @media (hover: hover) and (pointer: fine) { [data-motion="review"] .bl-inlinefig img:hover { transform: scale(1.02); } }
  /* entrance + parallax OFF on mobile, exactly like live (content stays visible at rest) */
  @media (max-width: 640px) {
    [data-motion="review"] .bl-inlinefig { animation: none !important; opacity: 1 !important; transform: none !important; }
    [data-motion="review"] .bl-inlinefig img { animation: none !important; translate: none !important; }
  }

  .rks-motion-js .rks-wait { opacity: 0; transform: translateY(16px); }
  .rks-motion-js .rks-wait.is-in { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.55s ease; }

  img.cs-hero__img, video.cs-hero__img, .home-hero__video { animation: rks-drift 28s ease-in-out infinite alternate; transform-origin: 55% 50%; }
  @keyframes rks-drift { from { transform: scale(1); } to { transform: scale(1.05); } }
}