/* site.css
   Consumes CSS custom properties from tokens.css (GENERATED, do not hand-edit).
   Each section class here maps 1:1 to a block pattern planned for
   wp/themes/reddot/patterns/, so these names are the pattern names.

   Section treatment system, per the approved plan section 2. No two adjacent
   sections may share a treatment:
     .band-dark    dark ink, white type, NO RED ANYWHERE
     .band-ground  warm off-white, the default reading surface
     .band-raised  white panels lifting off the warm ground
     .band-image   full-bleed photography with a dark overlay
     .stat-rail    tight horizontal band, first red on the page
*/

/* No @import here. tokens.css, fonts.css and motion.css are enqueued in
   functions.php with an explicit dependency chain, which is what fixes the
   load order. The imports this replaces were a liability three ways over:
   one pointed at ./fonts/self-hosted.css, which does not exist in the theme
   and 404'd on every page load; the other two re-fetched stylesheets already
   enqueued, so motion.css was downloaded twice; and @import serialises
   downloads, blocking render while each is fetched in turn.

   Consequence worth knowing: site.css is no longer standalone. Loading it
   without tokens.css first leaves every custom property undefined. */

/* ---------------------------------------------------------------------- */
/* Reset and base                                                         */
/* ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-ink);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-line); letter-spacing: var(--text-h1-tracking); }
h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-tracking); }
h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); }
p  { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

/* Links draw their underline from the left rather than appearing. */
a { color: var(--color-text-red); text-decoration: none; }
.prose a,
a.inline-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--motion-duration-fast) var(--motion-ease-out);
}
.prose a:hover, .prose a:focus-visible,
a.inline-link:hover, a.inline-link:focus-visible { background-size: 100% 1px; }

:focus-visible { outline: 2px solid var(--color-text-red); outline-offset: 3px; border-radius: 2px; }
.band-dark :focus-visible { outline-color: var(--color-white); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-ink); color: var(--color-white);
  padding: var(--space-xs) var(--space-sm);
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---------------------------------------------------------------------- */
/* Layout primitives                                                      */
/* ---------------------------------------------------------------------- */

.wrap {
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}
.wrap-narrow { max-width: var(--layout-narrow); }

/* Prose measure: keep running text near 65 characters. */
.prose { max-width: 38rem; }
.prose p + p { margin-top: var(--space-sm); }

.legal-content { max-width: 44rem; }
.legal-content h2 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); font-size: 1.25rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { color: var(--color-grey-mid); margin-bottom: var(--space-sm); }
.legal-content ul { margin: var(--space-sm) 0 var(--space-md); display: grid; gap: var(--space-xs); }
.legal-content ul li { padding-left: 1.25em; position: relative; color: var(--color-grey-mid); }
.legal-content ul li::before { content: "\2013"; position: absolute; left: 0; }
.legal-content ul li strong { color: var(--color-ink); }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-text-red);
  margin-bottom: var(--space-sm);
}
.band-dark .eyebrow,
.band-image .eyebrow { color: var(--color-grey-on-dark); }

.lead {
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-line);
  max-width: 38rem;
}

.section-head { max-width: 46rem; margin-bottom: var(--space-xl); }
.section-head .lead { margin-top: var(--space-md); }

/* Utility classes replacing what were one-off inline style="" attributes on
   a handful of patterns. Needed now that those patterns are native blocks:
   a hand-authored inline style with no matching block attribute makes the
   editor flag that block as "unexpected or invalid content" every time
   someone opens it, since it can't reproduce an attribute-less style from
   the block's own save output. A class always round-trips safely. */
.pad-tight { padding-block: var(--space-xl); }
.text-muted { color: var(--color-grey-mid); }
/* Shorter hero for secondary pages — the same treatment About, Contact and
   the legal pages carry as a one-off inline style. Kept as a class here so
   newer patterns can be authored as native blocks: an inline style with no
   matching block attribute makes the editor flag the block as invalid. */
.hero--compact { padding-block: var(--space-2xl); }
/* Steps the hero heading down from display size to h1, matching the legal
   pages. Those set it inline; this is the class-based equivalent. */
.hero-title--compact {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  max-width: 24ch;
}
/* Product wordmarks. Height-constrained with width:auto so differently
   proportioned logos (RDTrace is 3:2, CH67 is 5:4) sit on a common optical
   baseline rather than a common width. */
.product-logo { height: 56px; width: auto; display: block; margin-bottom: var(--space-md); }

/* ---------------------------------------------------------------------- */
/* The five section treatments                                            */
/* ---------------------------------------------------------------------- */

.band-dark,
.band-ground,
.band-raised,
.band-image { padding-block: var(--space-2xl); }

.band-dark {
  background: var(--color-ink-deep);
  color: var(--color-white);
}
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--color-white); }
.band-dark p { color: #D6D6DC; }
/* Red is banned on dark grounds, so links here invert instead. */
.band-dark a { color: var(--color-white); }
.band-dark .scope-list li { color: #D6D6DC; }
.band-dark .scope-list li::before { background: var(--color-white); }

.band-ground { background: var(--color-surface); }

/* The two light treatments must be visibly different or the alternation does
   no work. Ground is the warm off-white; raised is true white. Cards invert
   between them so a card never disappears into the band behind it. */
.band-raised { background: var(--color-surface-raised); }
.band-raised .service-card,
.band-raised .contrast-card {
  background: var(--color-surface);
  border-color: #DEDDD9;
}

.band-image {
  position: relative;
  color: var(--color-white);
  background: var(--color-ink-deep);
  overflow: hidden;
}
.band-image > .band-image-media {
  position: absolute; inset: 0; z-index: 0;
}
.band-image > .band-image-media img {
  width: 100%; height: 100%; object-fit: cover;
}
.band-image > .band-image-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,16,18,0.94) 0%, rgba(16,16,18,0.78) 55%, rgba(16,16,18,0.55) 100%);
}
.band-image > .wrap { position: relative; z-index: 1; }
.band-image h1, .band-image h2, .band-image h3 { color: var(--color-white); }
.band-image p { color: #D6D6DC; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                */
/* ---------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; font-size: var(--text-small-size);
  padding: 0.9em 1.5em; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out),
              border-color var(--motion-duration-fast) var(--motion-ease-out),
              color var(--motion-duration-fast) var(--motion-ease-out);
}
.btn .arrow {
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}
.btn:hover .arrow, .btn:focus-visible .arrow { transform: translateX(3px); }

/* On light grounds red is permitted, at #CC0000 for contrast with white text. */
.btn-primary { background: var(--color-text-red); color: var(--color-white); }
.btn-primary:hover { background: #A80000; }

.btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-grey-border); }
.btn-secondary:hover { border-color: var(--color-ink); }

/* Inside dark bands there is no red, so CTAs invert to white / outlined.
   .hero is included here: it is a dark band like .band-dark and .band-image,
   just styled under its own class, and was previously missing from this list.
   That gap meant the hero's primary button rendered red-on-dark (violating
   the same rule enforced everywhere else) and the secondary button rendered
   dark ink text on a dark background, effectively invisible. */
.band-dark .btn-primary,
.band-image .btn-primary,
.hero .btn-primary { background: var(--color-white); color: var(--color-ink); }
.band-dark .btn-primary:hover,
.band-image .btn-primary:hover,
.hero .btn-primary:hover { background: #E5E5E8; }
.band-dark .btn-secondary,
.band-image .btn-secondary,
.hero .btn-secondary { color: var(--color-white); border-color: #43434C; }
.band-dark .btn-secondary:hover,
.band-image .btn-secondary:hover,
.hero .btn-secondary:hover { border-color: var(--color-white); }

.btn-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-lg); }

/* ---------------------------------------------------------------------- */
/* Header                                                                 */
/* ---------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-surface);
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-duration-fast) ease,
              box-shadow var(--motion-duration-fast) ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-grey-border);
  box-shadow: 0 1px 12px rgba(16,16,18,0.05);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 0.7rem;
  gap: var(--space-md);
}
/* flex-shrink: 0 is load-bearing, not defensive. .brand is a flex item in
   .site-header .wrap; without it, a crowded nav squeezes the link
   horizontally while `height` holds the image's vertical size fixed, so the
   logo renders visibly distorted on narrow screens. */
.brand { flex-shrink: 0; }
.brand img { height: 44px; width: auto; }
/* .primary-nav itself is also a flex row, not just its <ul>: the "Talk to
   us" CTA is a sibling of the <ul> (hardcoded outside the editable nav
   menu, since it's a styled button rather than a plain link — see
   patterns/header.php), so both levels need the same flex/gap/align to
   read as one continuous row, matching how they rendered as sibling <li>s
   before the nav menu became wp_nav_menu()-driven. */
.primary-nav, .primary-nav ul { display: flex; gap: var(--space-md); align-items: center; }
.primary-nav a {
  color: var(--color-ink); font-weight: 500; font-size: var(--text-small-size);
}
.primary-nav a:not(.btn):hover { color: var(--color-text-red); }
.primary-nav a[aria-current="page"]:not(.btn) { color: var(--color-text-red); }
/* .primary-nav a sets color: ink at specificity (0,1,1), which silently beat
   .btn-primary's color: white at (0,1,0). Two classes here outranks that. */
.primary-nav .btn-primary { color: var(--color-white); }

@media (max-width: 40rem) {
  .primary-nav, .primary-nav ul { gap: var(--space-sm); }
  /* .nav-label wraps ", 20 minutes" (not "Talk to us,") so hiding it leaves
     a button reading "Talk to us" rather than a bare, meaningless
     "20 minutes" — see patterns/header.php. */
  .primary-nav .nav-label { display: none; }
  .brand img { height: 34px; }
  /* The four nav items plus the logo do not fit a 375px viewport at desktop
     sizing once the logo is no longer allowed to squash. Tightening type and
     button padding buys back roughly 60px, which is enough down to ~360px.
     Below that the row is genuinely too crowded — see the note in
     CUTOVER-PLAN.md about a collapsible menu being the proper fix. */
  .primary-nav a { font-size: 0.8125rem; }
  .primary-nav .btn { padding: 0.7em 1em; }
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                   */
/* ---------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--space-3xl) var(--space-2xl);
  background: var(--color-ink-deep);
  color: var(--color-white);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(16,16,18,0.78) 0%, rgba(16,16,18,0.62) 45%, rgba(16,16,18,0.38) 100%);
}
.hero > .wrap { position: relative; z-index: 1; }

.hero h1 {
  font-size: var(--text-display-size);
  line-height: var(--text-display-line);
  letter-spacing: var(--text-display-tracking);
  max-width: 16ch;
  color: var(--color-white);
}
.hero .lead { margin-top: var(--space-md); color: #D6D6DC; }
.hero .eyebrow { color: var(--color-grey-on-dark); }

/* Audience-split cards sitting inside the hero. No red, dark ground.
   Three cards as a maturity spectrum: no IT function, behind on the
   technology, a lean team. Widened from the earlier 2-card 52rem to give
   each card comparable room. */
.audience-split {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md);
  margin-top: var(--space-2xl);
  max-width: 68rem;
}
.audience-card {
  display: block;
  padding: var(--space-md);
  border: 1px solid #33333B;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03);
  color: var(--color-white);
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out),
              border-color var(--motion-duration-fast) var(--motion-ease-out);
}
.audience-card:hover, .audience-card:focus-visible {
  background: rgba(255,255,255,0.07);
  border-color: #5A5A66;
}
.audience-card h2 {
  font-size: 1.0625rem; margin-bottom: var(--space-xs); color: var(--color-white);
}
.audience-card p { font-size: var(--text-small-size); color: #A8A8B0; margin-bottom: var(--space-sm); }
.audience-card .card-link {
  font-size: var(--text-small-size); font-weight: 600; color: var(--color-white);
  display: inline-flex; gap: 0.4em; align-items: center;
}
.audience-card:hover .arrow { transform: translateX(3px); }
.audience-card .arrow { transition: transform var(--motion-duration-fast) var(--motion-ease-out); }

@media (max-width: 62rem) {
  .audience-split { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 48rem) {
  .audience-split { grid-template-columns: 1fr; margin-top: var(--space-xl); }
  .hero h1 { max-width: 100%; }
}

/* ---------------------------------------------------------------------- */
/* Stat rail. First red on the page.                                      */
/* ---------------------------------------------------------------------- */

.stat-rail {
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-grey-border);
  padding-block: var(--space-xl);
}
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.stat-item { border-top: 3px solid var(--color-brand-red); padding-top: var(--space-sm); }
.stat-figure {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-stat-size);
  line-height: var(--text-stat-line);
  letter-spacing: var(--text-stat-tracking);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}
.stat-label { font-size: var(--text-small-size); color: var(--color-grey-mid); display: block; }

@media (max-width: 56rem) { .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); } }
@media (max-width: 30rem) { .stat-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Contrast pair, the two bad options                                     */
/* ---------------------------------------------------------------------- */

.contrast-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-xl); }
.contrast-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-grey-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.contrast-card .tag {
  font-family: var(--font-mono); font-size: var(--text-eyebrow-size);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-grey-mid); display: block; margin-bottom: var(--space-sm);
}
.contrast-card h3 { margin-bottom: var(--space-xs); }
.contrast-card p { color: var(--color-grey-mid); margin-bottom: 0; }

/* Light treatment deliberately, not dark. The converging-lines diagram lives
   here and its target dot is the brand mark at #FF0000, which the no-red-on-
   dark rule would forbid on an ink ground. A red top rule carries the accent. */
.resolution {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-grey-border);
  border-top: 3px solid var(--color-brand-red);
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-md) var(--radius-md);
  padding: var(--space-xl);
}
.resolution h3 { font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-tracking); margin-bottom: var(--space-md); }
.resolution p { color: var(--color-grey-mid); max-width: 40rem; }
.resolution .converge-caption {
  font-size: var(--text-small-size); color: var(--color-grey-mid);
  text-align: center; margin-top: var(--space-sm);
}

@media (max-width: 48rem) { .contrast-pair { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Service cards                                                          */
/* ---------------------------------------------------------------------- */

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.service-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-grey-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  color: inherit;
  transition: transform var(--motion-duration-fast) var(--motion-ease-out),
              border-color var(--motion-duration-fast) var(--motion-ease-out),
              box-shadow var(--motion-duration-fast) var(--motion-ease-out);
}
/* :focus-within rather than :focus-visible — the card is a <div> and the
   link now lives inside the <h3>, so focus lands on a descendant. */
.service-card:hover, .service-card:focus-within {
  transform: translateY(-2px);
  border-color: var(--color-ink);
  box-shadow: 0 8px 24px rgba(16,16,18,0.07);
}
.service-card h3 { margin-bottom: var(--space-xs); }
/* Stretched link: the anchor sits in the heading (so it has a meaningful
   accessible name and no duplicate text), but its ::after covers the whole
   card, keeping the entire card clickable.

   The card used to be <a class="service-card"> wrapping the h3 and p
   directly. That is valid HTML5, but WordPress's content sanitiser strips
   an <a> that wraps block-level elements — which silently flattened all six
   cards on production into loose grid children. An inline <a> inside a
   block element is never touched, so this structure is sanitiser-proof. */
.service-card h3 a {
  color: inherit; text-decoration: none;
  transition: color var(--motion-duration-fast) var(--motion-ease-out);
}
.service-card h3 a::after { content: ""; position: absolute; inset: 0; }
/* Title turns red with the rest of the hover treatment. Driven from
   .service-card rather than the anchor's own :hover so that pointing
   anywhere on the card — not only at the words — lights the title, matching
   the stretched link's actual hit area. */
.service-card:hover h3 a, .service-card:focus-within h3 a { color: var(--color-text-red); }
/* Red rule drawing left to right beneath the title on hover. */
.service-card h3::after {
  content: ""; display: block; height: 2px; width: 100%;
  background: var(--color-brand-red);
  transform: scaleX(0); transform-origin: left;
  margin-top: var(--space-xs);
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}
.service-card:hover h3::after, .service-card:focus-within h3::after { transform: scaleX(1); }

.service-price {
  font-family: var(--font-mono); font-size: var(--text-small-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-red); font-weight: 500;
  display: block; margin-bottom: 0.15em;
}
.service-model { font-size: var(--text-small-size); color: var(--color-grey-mid); display: block; margin-bottom: var(--space-sm); }
.service-card p { font-size: var(--text-small-size); color: var(--color-grey-mid); }

@media (max-width: 60rem) { .service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) { .service-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------- */
/* Service detail, alternating image and text                             */
/* ---------------------------------------------------------------------- */

.service-detail { padding-block: var(--space-2xl); }
.service-detail .wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl); align-items: center;
}
.service-detail--reverse .service-detail-media { order: 2; }
.service-detail-media img,
.service-detail-media .img-placeholder { border-radius: var(--radius-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.service-detail-price {
  font-family: var(--font-mono); font-size: var(--text-small-size);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-red); font-weight: 500; display: block; margin-bottom: var(--space-sm);
}
/* list-style and padding are reset again here, not just in the global
   `ul, ol` rule at the top. Core's block stylesheet targets .wp-block-list,
   and a class beats an element selector — so once these became core/list
   blocks, the global reset silently stopped applying and native markers
   reappeared alongside the custom dash. */
.scope-list { margin-top: var(--space-md); display: grid; gap: var(--space-xs); list-style: none; padding-left: 0; }
.scope-list li { padding-left: 1.5em; position: relative; font-size: var(--text-small-size); color: var(--color-grey-mid); }
.scope-list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 2px; background: var(--color-brand-red);
}
/* Defensive: on production, content sanitisation was observed wrapping each
   list item in its own nested <ul>, which rendered a doubled dash — one from
   the empty wrapper item, one from the real one. `display: contents` folds
   any such wrapper away so its children sit in the parent grid, and the
   wrapper's own marker is suppressed. Renders identically whether or not the
   nesting is present, so it is safe to keep either way. */
.scope-list ul { display: contents; }
.scope-list li:has(> ul) { padding-left: 0; }
.scope-list li:has(> ul)::before { content: none; }
.tier-note {
  margin-top: var(--space-md); padding: var(--space-sm) var(--space-md);
  background: var(--color-surface); border-left: 3px solid var(--color-brand-red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-small-size); color: var(--color-grey-mid);
}
.band-raised .tier-note { background: var(--color-surface); }

@media (max-width: 56rem) {
  .service-detail .wrap { grid-template-columns: 1fr; gap: var(--space-lg); }
  .service-detail--reverse .service-detail-media { order: 0; }
}

/* ---------------------------------------------------------------------- */
/* Trade-off list                                                         */
/* ---------------------------------------------------------------------- */

.tradeoff-list { display: grid; gap: 0; }
.tradeoff-item {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-grey-border);
  align-items: start;
}
.tradeoff-item:last-child { border-bottom: 1px solid var(--color-grey-border); }
.tradeoff-item h3 { margin-bottom: var(--space-xs); }
.tradeoff-item > div > p { color: var(--color-grey-mid); }
.tradeoff-cost {
  border-left: 3px solid var(--color-brand-red);
  padding-left: var(--space-md);
  font-size: var(--text-small-size);
  color: var(--color-grey-mid);
  margin: 0; /* was a bare div (zero default margin); now core/paragraph
                (a <p>, which carries a global margin-bottom default) once
                converted to a native block — reset explicitly so the two
                render identically regardless of which tag it ends up as. */
}
.tradeoff-cost strong {
  display: block; margin-bottom: 0.3em;
  font-size: var(--text-eyebrow-size); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-ink); font-weight: 600;
}

@media (max-width: 52rem) { .tradeoff-item { grid-template-columns: 1fr; gap: var(--space-md); } }

/* ---------------------------------------------------------------------- */
/* Belief / two-column prose list                                         */
/* ---------------------------------------------------------------------- */

.belief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl) var(--space-2xl); }
.belief-item h3 { margin-bottom: var(--space-xs); }
.belief-item p { color: var(--color-grey-mid); }
@media (max-width: 52rem) { .belief-grid { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* ---------------------------------------------------------------------- */
/* Team                                                                   */
/* ---------------------------------------------------------------------- */

.team-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.team-layout img { border-radius: var(--radius-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.team-photo {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-md);
  filter: grayscale(1);
  transition: filter var(--motion-duration-base) var(--motion-ease-out);
}
.team-photo:hover { filter: grayscale(0); }
.team-note { font-size: var(--text-small-size); color: var(--color-grey-mid); margin-top: var(--space-md); }

.director-list { margin-top: var(--space-2xl); display: grid; gap: var(--space-2xl); }
.director-item { padding-top: var(--space-lg); border-top: 1px solid var(--color-grey-border); }
.director-item:first-child { padding-top: 0; border-top: none; }
.director-item h3 { margin-bottom: 0.2em; }
.director-role {
  display: block; font-family: var(--font-mono); font-size: var(--text-small-size);
  font-weight: 500; color: var(--color-text-red); margin-bottom: var(--space-sm);
}
.director-item p { color: var(--color-grey-mid); max-width: 62rem; margin-bottom: var(--space-sm); }
.director-item p:last-child { margin-bottom: 0; }

@media (max-width: 56rem) { .team-layout { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* ---------------------------------------------------------------------- */
/* Steps                                                                  */
/* ---------------------------------------------------------------------- */

.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); counter-reset: step; }
.step-item { counter-increment: step; }
.step-item::before {
  content: counter(step);
  font-family: var(--font-mono); font-size: var(--text-small-size);
  color: var(--color-text-red); font-weight: 500;
  display: block; margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-grey-border);
}
.step-item h3 { margin-bottom: var(--space-xs); font-size: 1.0625rem; }
.step-item p { color: var(--color-grey-mid); font-size: var(--text-small-size); }

@media (max-width: 48rem) { .step-grid { grid-template-columns: 1fr; gap: var(--space-md); } }

/* ---------------------------------------------------------------------- */
/* FAQ. Native details/summary keeps answers in the DOM for extraction.   */
/* ---------------------------------------------------------------------- */

.faq-list { max-width: 48rem; border-top: 1px solid var(--color-grey-border); }
.faq-item { border-bottom: 1px solid var(--color-grey-border); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  padding-block: var(--space-md);
  cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none;
  width: 10px; height: 10px;
  border-right: 2px solid var(--color-text-red);
  border-bottom: 2px solid var(--color-text-red);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-item summary:hover { color: var(--color-text-red); }
.faq-answer { padding-bottom: var(--space-md); }
.faq-answer p { color: var(--color-grey-mid); max-width: 46rem; margin-bottom: 0; }

/* ---------------------------------------------------------------------- */
/* Not-for list                                                           */
/* ---------------------------------------------------------------------- */

.notfor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.notfor-item { border-top: 1px solid var(--color-border-on-dark); padding-top: var(--space-sm); }
.notfor-item h3 { font-size: 1.0625rem; margin-bottom: var(--space-xs); }
.notfor-item p { font-size: var(--text-small-size); }
@media (max-width: 52rem) { .notfor-grid { grid-template-columns: 1fr; gap: var(--space-md); } }

/* ---------------------------------------------------------------------- */
/* Contact                                                                */
/* ---------------------------------------------------------------------- */

.contact-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-2xl); align-items: start; }
.contact-form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: 0.45em; }
.field label { font-size: var(--text-small-size); font-weight: 600; }
.field input, .field select, .field textarea {
  font: inherit; padding: 0.8em 0.95em;
  border: 1px solid var(--color-grey-border); border-radius: var(--radius-sm);
  background: var(--color-surface-raised); color: var(--color-ink);
  transition: border-color var(--motion-duration-fast) ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #C9C8C4; }
.field textarea { resize: vertical; min-height: 6.5rem; }

.office-list { display: grid; gap: var(--space-lg); }
.office-card h3 { font-size: 1.0625rem; margin-bottom: 0.3em; }
.office-card address { font-style: normal; color: var(--color-grey-mid); font-size: var(--text-small-size); }
.contact-media img,
.contact-media .img-placeholder { border-radius: var(--radius-md); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; height: auto; margin-bottom: var(--space-lg); }

@media (max-width: 56rem) { .contact-layout { grid-template-columns: 1fr; gap: var(--space-xl); } }

/* ---------------------------------------------------------------------- */
/* Image placeholders, shown until supplied artwork lands                 */
/* ---------------------------------------------------------------------- */

.img-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(
    45deg, #E8E7E4, #E8E7E4 10px, #EFEEEB 10px, #EFEEEB 20px
  );
  border: 1px dashed #C9C8C4;
  color: var(--color-grey-mid);
  font-family: var(--font-mono); font-size: 0.8125rem;
  padding: var(--space-md); border-radius: var(--radius-md);
  min-height: 12rem;
}
.band-dark .img-placeholder,
.hero .img-placeholder {
  background: repeating-linear-gradient(
    45deg, #1C1C21, #1C1C21 10px, #212127 10px, #212127 20px
  );
  border-color: #3A3A44; color: #8A8A94;
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */

/* Every page ends in a dark closing CTA immediately followed by the dark
   footer, and <footer> is a sibling of <main> in the DOM, not of the CTA
   section, so an adjacent-sibling selector can't target this case. Instead:
   a visible border-top always marks the start of the footer regardless of
   what precedes it, and the top padding is trimmed from 6rem to 4rem so a
   dark-CTA-into-footer transition doesn't stack two full paddings into one
   oversized empty gap. 4rem still reads as intentional space coming from a
   light section, where the colour change itself provides the visual break. */
.site-footer {
  background: var(--color-ink-deep); color: #A8A8B0;
  padding-block: var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--color-border-on-dark);
}
.site-footer a { color: #A8A8B0; }
.site-footer a:hover { color: var(--color-white); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.footer-grid h4 {
  font-family: var(--font-body); font-size: var(--text-eyebrow-size); font-weight: 600;
  letter-spacing: var(--text-eyebrow-tracking); text-transform: uppercase;
  color: #6E6E78; margin: 0 0 var(--space-md);
}
.footer-grid li { margin-bottom: 0.55em; font-size: var(--text-small-size); }
/* Same uploaded logo file as the header (reddot_logo_url() in functions.php
   deliberately doesn't offer a separate "reversed" upload — one less thing
   for a content editor to keep in sync). brightness(0) flattens it to a
   black silhouette while preserving transparency, invert(1) flips that to
   white; safe for this brand specifically since dark-band red is banned
   outright, so white is always the correct reversed treatment. Height sized
   down from 44px, proportionally (width stays auto, not fixed), to
   compensate for the optical halation effect: light shapes on a dark ground
   read as bolder/bigger than the identical dark shape on light. */
.footer-brand img { height: 38px; width: auto; margin-bottom: var(--space-md); filter: brightness(0) invert(1); }
.footer-brand p { font-size: var(--text-small-size); max-width: 24ch; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm);
  border-top: 1px solid var(--color-border-on-dark); padding-top: var(--space-md);
  font-size: var(--text-small-size);
}

@media (max-width: 56rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 32rem) { .footer-grid { grid-template-columns: 1fr; } }