/* ==========================================================================
   EqanTech — prototype stylesheet
   Authored against MOCK-BUILD-RULES.md (Bricks 2.4 converter-ready).

   Visual direction takes cues from the Bahwan CyberTek reference: centred hero,
   two-tone headings (ink + brand colour), staggered overlay cards, split
   visual/copy bands, heading-left/quotes-right testimonials, airier rhythm.
   Section STRUCTURE is unchanged and still follows the IA spec.

   Conventions enforced here:
   - R3.2  Flat BEM only. No descendant/compound selectors for components.
   - R4.1  Every colour/space/type/radius/shadow is a :root custom property.
   - R4.2  Component rules reference var(--token) — never raw values.
   - R5.1  Type + spacing scales are clamp() (Bricks scale categories require it).
   - R6.1  Base styles = DESKTOP. Overrides are @media (max-width:...) ONLY.
   - R7.1  Component CSS is restricted to natively-mapped properties.
   - R7.3  No inline styles. R7.4 No ID styling.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS  ->  Bricks global variables
   -------------------------------------------------------------------------- */
:root {
  /* --- Colour: EqanTech Brand Guideline. HEX is authoritative; the guide's
         RGB/CMYK values are wrong and are ignored (open clarification #4). --- */
  --clr-primary: #007266;
  --clr-accent: #25e0bb;
  --clr-tint: #d9fbf3;
  --clr-ink: #0e0e0e;
  --clr-grey: #96a2ab;
  --clr-bg: #f3f5f7;
  --clr-white: #ffffff;

  /* --- Colour: DERIVED. Not in the brand guide. Added because the brand
         palette alone cannot meet the committed WCAG 2.2 AA obligation:
         --clr-grey is only 2.61:1 on white, so it must never carry text.
         Measured ratios noted per token. --- */
  --clr-muted: #5b6770;         /* body-secondary. 5.80:1 on white, 5.31:1 on --clr-bg */
  --clr-primary-deep: #005a51;  /* hover/pressed. 8.14:1 on white */
  --clr-line: #dfe4e8;          /* hairline borders, decorative only */
  --clr-line-dark: #2a3a38;         /* hairlines on dark sections */
  --clr-line-faint: rgba(255, 255, 255, 0.1); /* footer row separator */
  --clr-line-soft: rgba(255, 255, 255, 0.18); /* rule inside dark/primary cards */
  --clr-ink-deep: #08211e;      /* dark section background */

  /* --- Colour: HERO AURORA. Brand HEX carried at alpha so the animated hero
         stays inside the palette. Decorative only —
         no text ever sits on these unscrimmed. --- */
  --clr-glow-deep: rgba(0, 114, 102, 0.9);      /* --clr-primary  @ 90% */
  --clr-glow-mid: rgba(0, 114, 102, 0.6);       /* --clr-primary  @ 60% */
  --clr-glow-accent: rgba(37, 224, 187, 0.32);  /* --clr-accent   @ 32% */
  --clr-glow-faint: rgba(37, 224, 187, 0.18);   /* --clr-accent   @ 18% */
  --clr-glow-crest: rgba(217, 251, 243, 0.22);  /* --clr-tint     @ 22% — the bright edge of a curtain */

  /* --- Typography --- */
  --font-body: "Satoshi", "Aptos", "Calibri", system-ui, -apple-system, sans-serif;
  --font-display: "Orbitron", var(--font-body); /* brand: LOGO/display use only */
  /* Technical accent. System stack only (R12.1 forbids @import/<link> fonts).
     Carries eyebrows, counters and figures: the contrast Satoshi cannot give
     on its own now that Orbitron is logo-locked by the brand guide. */
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Fluid type scale (R5.1). Group under a --text- scale category in Bricks. */
  --text-2xs: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);
  --text-xs: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);
  --text-md: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lg: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --text-xl: clamp(1.1875rem, 1.11rem + 0.39vw, 1.4375rem);
  --text-2xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --text-3xl: clamp(1.75rem, 1.47rem + 1.4vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
  --text-5xl: clamp(2.5rem, 1.6rem + 3.4vw, 5rem); /* hero display only */

  /* Fluid 8-pt spacing scale in rem (UI/UX spec §2). --space- scale category. */
  --space-1: clamp(0.25rem, 0.24rem + 0.05vw, 0.3125rem);
  --space-2: clamp(0.5rem, 0.48rem + 0.1vw, 0.625rem);
  --space-3: clamp(0.75rem, 0.72rem + 0.15vw, 0.9375rem);
  --space-4: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  --space-5: clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem);
  --space-6: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
  --space-7: clamp(2rem, 1.7rem + 1.5vw, 3.25rem);
  --space-8: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  --space-9: clamp(3.5rem, 2.6rem + 4.5vw, 7rem);
  --space-10: clamp(3rem, 2.3rem + 3.5vw, 6rem);

  /* --- Radius --- */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --radius-pill: 62.5rem;

  /* --- Shadow --- */
  --shadow-sm: 0 1px 2px rgba(14, 14, 14, 0.05);
  --shadow-md: 0 6px 20px rgba(14, 14, 14, 0.07);
  --shadow-lg: 0 18px 48px rgba(14, 14, 14, 0.11);
  --shadow-focus: 0 0 0 3px var(--clr-white), 0 0 0 6px var(--clr-primary);
  --shadow-focus-dark: 0 0 0 3px var(--clr-ink-deep), 0 0 0 6px var(--clr-accent);

  /* --- Sizing --- */
  --size-shell: 86rem;
  --size-shell-narrow: 54rem;
  --size-icon: 2.75rem;
  --size-icon-lg: 3.5rem;
  /* Header grew with the logo (client feedback, 1st-draft review): the lockup
     is 3.85:1, so 12rem of logo is 3.12rem tall and needs the taller bar. */
  --size-header: 5.5rem;

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1); /* long tail, for entrances */
  --speed: 220ms;
}

/* --------------------------------------------------------------------------
   2. BASE
   Element selectors do not become global classes — this block is expected to
   land in a single fallback Code element on convert, and should be REPLACED by
   Bricks Theme Styles (Typography / Container) then deleted. Kept minimal.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--clr-ink);
  background-color: var(--clr-white);
}

h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* <summary> loses its disclosure triangle once display != list-item, which
   .faq__question already sets. This covers older WebKit, which needs the
   pseudo-element hidden explicitly. */
summary::-webkit-details-marker { display: none; }

/* The only compound selector in this stylesheet. Kept here deliberately: it is
   state styling for a native <details> that the Bricks Accordion element will
   own after conversion, at which point this rule is deleted. */
details[open] .faq__sign { transform: rotate(180deg); }
details[open] .sp-detail__chevron { transform: rotate(0deg); }

/* --------------------------------------------------------------------------
   3. PRIMITIVES
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  transform: translateY(-200%);
  border-radius: var(--radius-sm);
  background-color: var(--clr-primary);
  color: var(--clr-white);
  font-weight: 600;
  transition: transform var(--speed) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.shell {
  width: 100%;
  max-width: var(--size-shell);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-6);
  padding-left: var(--space-6);
}

.section {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
  background-color: var(--clr-white);
}
.section--bg { background-color: var(--clr-bg); }
.section--dark { background-color: var(--clr-ink-deep); color: var(--clr-white); }
.section--primary { background-color: var(--clr-primary); color: var(--clr-white); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 68rem;
  margin-bottom: var(--space-7);
}
.section-head--center {
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-primary);
}
.eyebrow--center { justify-content: center; }
.eyebrow--light { color: var(--clr-accent); }

/* Prefix glyph. R9.1: the converter strips _cssClasses from <svg> itself, so
   the size and colour must live on this wrapper and the inner svg runs at
   100%/100% with stroke="currentColor" — it inherits .eyebrow's colour, which
   is why one glyph serves both the light and dark grounds. */
.eyebrow__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--clr-accent);
}

/* Two-tone heading — the reference's signature move: a bold ink statement with
   the emphasis half carried in brand colour, usually on its own line. */
.section-title {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
}
.section-title__accent { color: var(--clr-primary); }
.section-title__accent--light { color: var(--clr-accent); }

.section-lead { max-width: var(--size-shell-narrow); font-size: var(--text-lg); color: var(--clr-muted); }
.section-lead--light { color: var(--clr-tint); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { box-shadow: var(--shadow-focus); }

.btn--primary { background-color: var(--clr-primary); border-color: var(--clr-primary); color: var(--clr-white); }
.btn--primary:hover { background-color: var(--clr-primary-deep); border-color: var(--clr-primary-deep); }

.btn--outline { border-color: var(--clr-line); color: var(--clr-ink); }
.btn--outline:hover { border-color: var(--clr-primary); color: var(--clr-primary); }

.btn--light { background-color: var(--clr-white); border-color: var(--clr-white); color: var(--clr-primary); }
.btn--light:hover { background-color: var(--clr-tint); border-color: var(--clr-tint); }
.btn--light:focus-visible { box-shadow: var(--shadow-focus-dark); }

.btn--ghost { border-color: var(--clr-grey); color: var(--clr-white); }
.btn--ghost:hover { border-color: var(--clr-accent); color: var(--clr-accent); }
.btn--ghost:focus-visible { box-shadow: var(--shadow-focus-dark); }

.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }


/* --- Icon wrapper.
       NOTE: the converter drops _cssClasses on <svg> itself (element-mapper.php
       :617), so icons MUST be sized/coloured from this wrapper, with the inner
       <svg> set to width/height 100% and fill="currentColor". --- */
.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--size-icon);
  height: var(--size-icon);
  border-radius: var(--radius-md);
  /* High-contrast tile: dark-green ground, white glyph — never dark green on a
     light-green tint (client 24 Aug). */
  background-color: var(--clr-primary);
  color: var(--clr-white);
}
.icon--lg { width: var(--size-icon-lg); height: var(--size-icon-lg); }

/* --- Pending-content marker.
       Marks copy/figures awaiting Client input. Purely a prototype affordance:
       DELETE these elements and this rule before conversion. --- */

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--clr-white);
  border-bottom: 1px solid var(--clr-line);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.site-header--stuck { box-shadow: var(--shadow-md); }
/* Retreats on downward scroll past the threshold, returns on upward intent.
   Sticky elements keep their space in flow, so translating it does not shift
   the page. Driven from the prototype layer; becomes a Bricks Interaction. */
.site-header--hidden { transform: translateY(-100%); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--size-header);
}

.site-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 12rem;   /* client feedback: logo one step larger than the 1st draft */
  color: var(--clr-ink);
}
.site-header__brand:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

.site-header__logo { width: 100%; height: auto; }

.site-header__nav { display: flex; flex-grow: 1; justify-content: center; }

/* Gap tightened one step to pay for the larger logo and nav type below, so the
   bar still fits four items plus the CTA at ~1100px without wrapping. */
.site-header__list { display: flex; align-items: center; gap: var(--space-5); }

.site-header__item { display: flex; }

.site-header__link {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-1);
  border-bottom: 2px solid transparent;
  /* client feedback: nav type was too small to read comfortably. --text-sm ->
     --text-md is +14%, which puts the nav at body size. */
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--clr-ink);
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.site-header__link:hover { color: var(--clr-primary); border-bottom-color: var(--clr-accent); }
.site-header__link:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.site-header__link--active { color: var(--clr-primary); border-bottom-color: var(--clr-primary); }

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

.site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--size-icon);
  height: var(--size-icon);
  border-radius: var(--radius-sm);
  color: var(--clr-ink);
}
.site-header__toggle:focus-visible { box-shadow: var(--shadow-focus); }

/* --- Mega-menu (Services dropdown) --- */
.site-header__item--mega { position: relative; }

.site-header__chevron {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: var(--space-1);
  transition: transform var(--speed) var(--ease);
}

.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  z-index: 60;
  width: 38rem;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background-color: var(--clr-white);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--clr-line);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--speed) var(--ease), visibility var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.site-header__item--mega:hover .mega,
.site-header__item--mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-header__item--mega:hover .site-header__chevron {
  transform: rotate(180deg);
}

.mega__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  list-style: none;
}

.mega__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background-color var(--speed) var(--ease);
}

.mega__link:hover { background-color: var(--clr-bg); }
.mega__link:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-md); }

.mega__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  /* High-contrast tile, not dark-green-on-tint (client 24 Aug). */
  background-color: var(--clr-primary);
  color: var(--clr-white);
}

.mega__body { display: flex; flex-direction: column; gap: 1px; }

.mega__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--clr-ink);
  line-height: 1.3;
}

.mega__desc {
  font-size: var(--text-xs);
  color: var(--clr-muted);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   5. HERO — full-bleed animated aurora, centred copy, display scale
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Header + hero fill exactly one viewport. --size-header is the header's
     inner min-height; the extra 1px is its bottom border. Padding is the
     floor for short viewports, where the hero grows past 100vh rather than
     crushing the content. */
  min-height: calc(100vh - var(--size-header) - 1px);
  padding-top: clamp(2rem, 0.2rem + 4.2vw, 7rem);
  padding-bottom: clamp(2rem, 0.2rem + 4.2vw, 7rem);
  background-color: var(--clr-ink-deep);
  color: var(--clr-white);
}

/* The hero background. Three CSS layers behind a scrim, so headline contrast
   never depends on the artwork behind it. No photograph and no image request:
   the Client chose the animated aurora at the 2nd-draft review. */
.hero__media {
  animation: hero-media-in 1.5s var(--ease-editorial) both;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__scrim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(90deg, var(--clr-ink-deep), transparent 78%);
}

/* --- HERO BACKGROUND: ANIMATED BRAND AURORA (chosen, 2nd-draft feedback §1)
   Four treatments were offered at the 2nd-draft review; the Client picked the
   aurora, so the other three are deleted — the signal grid, both licensed
   photographs and the panel control that switched between them.

   The field below plus the two aurora layers after it are the whole
   background. Every layer animates transform or opacity only, so all of it
   stays on the compositor and costs nothing per frame, and every layer is
   inset beyond the hero on all four sides so the drift never exposes an edge.
   R7.5: `animation` is custom territory on convert; rebuild as a Bricks
   Interaction, or ship the layers static if the performance budget is tight. */
.hero__mesh {
  animation: mesh-drift 26s var(--ease) infinite alternate;
  position: absolute;
  top: -20%;
  right: -20%;
  bottom: -20%;
  left: -20%;
  /* Weighted to the RIGHT of the frame on purpose: .hero__scrim runs
     ink-deep -> transparent across the left 78%, so a glow placed left of
     centre is paid for and never seen. */
  background-image:
    radial-gradient(36rem 36rem at 46% 26%, var(--clr-glow-deep), transparent 62%),
    radial-gradient(30rem 30rem at 78% 18%, var(--clr-glow-accent), transparent 60%),
    radial-gradient(44rem 44rem at 66% 90%, var(--clr-glow-mid), transparent 66%),
    radial-gradient(26rem 26rem at 30% 84%, var(--clr-glow-faint), transparent 60%);
}

/* --- Aurora, the two layers that make it read as one -----------------------
   A drifting gradient field alone looks like a drifting gradient field. Two
   more things are what make it read as aurora, and both are cheap:

     1. CURTAINS. Near-vertical soft bands (`.hero__veil`) that undulate — the
        layer skews and stretches as it drifts, so the bands lean and breathe
        rather than sliding rigidly.
     2. INTENSITY. A broad glow (`.hero__glow`) whose OPACITY rises and falls,
        which is what a real aurora actually does. Drift without brightness
        variation is the thing that reads as fake.

   The three periods are deliberately coprime-ish — 26s / 19s / 7.5s — so the
   layers beat against each other and the composite never visibly repeats.

   NOTHING HERE IS BLURRED OR BLENDED, and that is the point. A later pass
   chased photographic realism with `filter: blur()`, `mix-blend-mode: screen`
   and an `feTurbulence` + `feDisplacementMap` warp — the technique every
   published CSS-aurora uses. It looked more like an aurora and it HUNG THE
   PAGE: SVG filters are not GPU-accelerated, so full-bleed displacement
   re-rasterises on the CPU every frame. This version animates transform and
   opacity only, so all three layers stay on the compositor and cost nothing
   per frame. It also stays inside the R7.2 property budget, so it converts.

   Static opacity is declared on the rules as well as in the keyframes, so
   `prefers-reduced-motion` (which kills the animation) still lands on a
   sensible still frame rather than a blank one. */
.hero__veil {
  animation: veil-drift 19s var(--ease) infinite alternate;
  position: absolute;
  top: -30%;
  right: -30%;
  bottom: -30%;
  left: -30%;
  /* Weighted right of centre for the same reason the mesh is: the scrim
     covers the left 78% and would eat anything placed there. */
  background-image:
    linear-gradient(104deg, transparent 38%, var(--clr-glow-accent) 48%, transparent 58%),
    linear-gradient(97deg, transparent 56%, var(--clr-glow-crest) 64%, transparent 73%),
    linear-gradient(112deg, transparent 70%, var(--clr-glow-deep) 80%, transparent 92%);
  opacity: 0.85;
}

.hero__glow {
  animation: glow-pulse 7.5s var(--ease) infinite alternate;
  position: absolute;
  top: -25%;
  right: -25%;
  bottom: -25%;
  left: -25%;
  background-image:
    radial-gradient(50rem 34rem at 62% 12%, var(--clr-glow-accent), transparent 68%),
    radial-gradient(38rem 30rem at 88% 60%, var(--clr-glow-faint), transparent 66%);
  opacity: 0.65;
}

@keyframes mesh-drift {
  from { transform: translate(-2%, -1%) scale(1.04); }
  to { transform: translate(3%, 2%) scale(1.12); }
}

@keyframes veil-drift {
  from { transform: translate(-5%, 0) skewX(-5deg) scaleY(1.02); }
  to { transform: translate(6%, 0) skewX(6deg) scaleY(1.12); }
}

@keyframes glow-pulse {
  from { opacity: 0.34; transform: translateY(-2%) scale(1); }
  to { opacity: 0.92; transform: translateY(2%) scale(1.07); }
}

/* Hero entrance is CSS, not GSAP, and deliberately so: motion is loaded lazily
   after first paint, so a JS tween on above-the-fold content would snap it back
   to a start state and replay — a visible flash. A CSS animation is already
   running at first paint. Same technique as vardharma.konanspade.com.
   R7.5: `animation` is outside the 7.1 mapped set and becomes custom CSS on
   convert; rebuild as a Bricks entrance Interaction. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-media-in {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}

.hero__eyebrow { animation: hero-rise 0.9s var(--ease-editorial) 0.05s both; }

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 76rem;
}

.hero__title {
  animation: hero-rise 0.9s var(--ease-editorial) 0.18s both;
  max-width: 22ch;
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.hero__accent {
  font-weight: 300;
  color: var(--clr-accent);
}

/* --- Word-swap typewriter (client feedback) -------------------------------
   `certainty` cycles through the three promises the page goes on to make in
   "Four things you should take for granted": continuity, clarity, control.

   FIXED-WIDTH CONTAINER (2nd-draft feedback §1: "keep a fixed placeholder so
   the layout stays stable, especially on mobile"). The box is an inline grid
   with ONE cell. Every word in the cycle is placed in that cell as an
   invisible sizer, and the animated word is placed in it too, so the cell —
   and therefore the headline — is permanently as wide as the longest word in
   the cycle and never changes width while typing. R6.5 satisfied by
   construction rather than by a hand-measured min-width, and the reservation
   cannot drift out of date, because the sizers ARE the words.

   Why the sizers use opacity rather than visibility: `opacity` is in the R7.1
   natively-mapped set and converts to a real Bricks control; `visibility` is
   not. They are aria-hidden, so nothing is announced twice.

   On a phone the box wraps to the next line as one unit, at a width that is
   the same on every frame — which is the shift the Client was seeing.

   The visible word is aria-hidden and a static duplicate carries the sentence
   for assistive technology — otherwise the h1 would be re-announced on every
   keystroke. With the prototype JS stripped the markup still reads
   "…gives your business certainty", so the JS-free build is unaffected. */
.hero__swapbox { display: inline-grid; }

.hero__swap-sizer {
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
}

.hero__swap {
  grid-row: 1;
  grid-column: 1;
  color: var(--clr-accent);
}

.hero__swap-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
}

.hero__lead {
  animation: hero-rise 0.9s var(--ease-editorial) 0.34s both;
  max-width: 46rem;
  font-size: var(--text-lg);
  color: var(--clr-tint);
}

.hero__actions {
  animation: hero-rise 0.9s var(--ease-editorial) 0.5s both;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Rule-separated value strip. The divider is a border rather than a literal
   "|" so it disappears cleanly when items wrap. */
.hero__strip {
  animation: hero-rise 0.9s var(--ease-editorial) 0.62s both;
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--clr-line-dark);
}

.hero__strip-item {
  display: flex;
  align-items: center;
  padding-right: var(--space-5);
  padding-left: var(--space-5);
  border-left: 1px solid var(--clr-line-dark);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-grey);
}
.hero__strip-item--first { border-left: 0; padding-left: 0; }


/* --------------------------------------------------------------------------
   5A. FROM REACTIVE TO MANAGED  (3rd-draft feedback §2)

   A BEFORE/AFTER, NOT A CROSSFADE. The first version of this section faded
   six small glyphs between two states on a pale panel, and it had no weight:
   the change was too small to notice and it read as an icon row. Both states
   are now on screen AT THE SAME TIME, separated by a lit edge that travels
   across the panel — so the reader watches the boundary cross rather than
   trying to spot what changed.

   HOW THE WIPE IS BUILT. Two full scenes are stacked. The reactive one is in
   flow and sets the height; the managed one sits over it inside a clipping
   wrapper. The wrapper and its inner child carry EQUAL AND OPPOSITE
   transforms, so the clip travels while the content stays put. That is a
   reveal made of transform alone — no `clip-path`, no `mask`, both of which
   are on the R7.2 avoid list and neither of which converts, and both of which
   would have cost a per-frame repaint. Three elements animate in total (the
   wrapper, the inner, the scan line), all on the compositor.

   BOTH SCENES CONTAIN BOTH WORDS, one of them a zero-opacity sizer. The two
   layers are therefore identical in height at every width, and the wipe cannot
   reveal a scene that does not line up with the one beneath it. Same
   reservation trick as the hero word swap.

   THE STILL FRAME IS THE MANAGED STATE: the base rules leave the wipe fully
   open and the scan hidden. `prefers-reduced-motion` and any unanimated render
   (mock/dist, and the converted page before Interactions are rebuilt) land on
   the managed scene with the reactive one completely covered.

   Cycle: 7s, which is inside the 5–7s the Client asked for.

   R7.5: `animation` is custom territory on convert. Rebuild as a Bricks
   Interaction, or ship the stage on its managed frame — it is designed to be
   legible standing still.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   2A. FROM REACTIVE TO MANAGED
   Client-supplied design (4th draft, 5 Aug 2026). Three-column layout:
   reactive cards (left), SVG hub with buildings + connections (center),
   managed cards (right). White background.
   -------------------------------------------------------------------------- */
/* 3-column grid: [reactive-cards] [SVG wiring] [managed-cards]
   The SVG spans cols 2 and all 5 rows, drawing buildings + connections + arrow. */
.rtm {
  display: grid;
  grid-template-columns: 1fr clamp(24rem, 20rem + 16vw, 40rem) 1fr;
  grid-template-rows: repeat(5, auto);
  align-items: center;
  gap: var(--space-5) 0;
}

.rtm__card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-line);
  background-color: var(--clr-white);
}

.rtm__card--managed {
  border-color: var(--clr-primary);
}

/* Place reactive cards in col 1, managed cards in col 3 */
.rtm__card--r1 { grid-column: 1; grid-row: 1; }
.rtm__card--r2 { grid-column: 1; grid-row: 2; }
.rtm__card--r3 { grid-column: 1; grid-row: 3; }
.rtm__card--r4 { grid-column: 1; grid-row: 4; }
.rtm__card--r5 { grid-column: 1; grid-row: 5; }
.rtm__card--m1 { grid-column: 3; grid-row: 1; }
.rtm__card--m2 { grid-column: 3; grid-row: 2; }
.rtm__card--m3 { grid-column: 3; grid-row: 3; }
.rtm__card--m4 { grid-column: 3; grid-row: 4; }
.rtm__card--m5 { grid-column: 3; grid-row: 5; }

.rtm__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon);
  height: var(--size-icon);
  flex-shrink: 0;
  color: var(--clr-grey);
}

.rtm__icon--managed { color: var(--clr-primary); }

.rtm__text { flex: 1; min-width: 0; }

.rtm__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--clr-ink);
  line-height: 1.3;
}

.rtm__sub {
  font-size: var(--text-2xs);
  color: var(--clr-muted);
  line-height: 1.4;
}

.rtm__status {
  font-size: var(--text-2xs);
  font-style: italic;
  line-height: 1.4;
}

.rtm__status--bad { color: var(--clr-grey); }
.rtm__status--good { color: var(--clr-primary); }

.rtm__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
}

.rtm__badge--x {
  color: var(--clr-grey);
  background-color: var(--clr-bg);
}

.rtm__badge--check {
  color: var(--clr-white);
  background-color: var(--clr-primary);
}

/* Column headers — hidden on desktop, shown at tablet for paired layout */
.rtm__col-head { display: none; }

/* Center hub: buildings + arrow as HTML (proper circles), lines as overlay */
.rtm__hub {
  grid-column: 2;
  grid-row: 1 / 6;
  align-self: stretch;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.rtm__bldg {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.rtm__bldg-icon {
  width: clamp(5.5rem, 5rem + 2vw, 7rem);
  height: auto;
}

.rtm__bldg-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-muted);
  white-space: nowrap;
}

.rtm__bldg-label--managed {
  color: var(--clr-primary);
}

.rtm__arrow {
  width: clamp(4rem, 3rem + 3vw, 6rem);
  height: auto;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  align-self: center;
}

.rtm__lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}

/* Arrow: a single pulse travels along the shaft toward the arrowhead — the same
   connector-style animation as the managed lines, on the same CSS timeline. */
.rtm__arrow-pulse {
  offset-path: path("M8 12 L80 12");
  offset-rotate: 0deg;
  opacity: 0;
  animation: rtm-pulse-travel 2.4s linear infinite;
}

/* Travelling pulse on the managed connection lines. Driven by CSS offset-path
   (not SMIL) so it shares the SAME document timeline as the arrow dots — the two
   can no longer drift out of phase. All five travel together on the 2.4s cycle. */
.rtm__pulse {
  offset-rotate: 0deg;
  opacity: 0;
  animation: rtm-pulse-travel 2.4s linear infinite;
}
.rtm__pulse--1 { offset-path: path("M372,214 C406,214 455,50 498,50"); }
.rtm__pulse--2 { offset-path: path("M386,228 C418,228 455,150 498,150"); }
.rtm__pulse--3 { offset-path: path("M392,250 C422,250 455,250 498,250"); }
.rtm__pulse--4 { offset-path: path("M386,272 C418,272 455,350 498,350"); }
.rtm__pulse--5 { offset-path: path("M372,286 C406,286 455,450 498,450"); }

@keyframes rtm-pulse-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.9; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Legend bar */
.rtm-legend {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-8);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--clr-line);
}

.rtm-legend__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.rtm-legend__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Swatch mirrors the check/x markers used on the diagram cards */
.rtm-legend__swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-xs, 4px);
  flex-shrink: 0;
}

.rtm-legend__badge--reactive {
  background-color: var(--clr-bg);
  color: var(--clr-muted);
}
.rtm-legend__swatch--x {
  background-color: var(--clr-white);
  color: var(--clr-grey);
}

.rtm-legend__badge--managed {
  background-color: var(--clr-primary);
  color: var(--clr-white);
}
.rtm-legend__swatch--check {
  background-color: var(--clr-white);
  color: var(--clr-primary);
}

.rtm-legend__desc {
  font-size: var(--text-sm);
  color: var(--clr-muted);
  line-height: 1.5;
}

/* Screen-reader list */
.rtm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. TRUST STRIP
   -------------------------------------------------------------------------- */
.trust {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  border-top: 1px solid var(--clr-line);
  background-color: var(--clr-white);
}

.trust__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.trust__label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

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

.trust__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 9.5rem;
  min-height: 3rem;
  padding: var(--space-2) var(--space-4);
  border: 1px dashed var(--clr-line);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-grey);
}

/* --------------------------------------------------------------------------
   7. OVERLAY CARDS — staggered grid (reference industry grid)
   Photography is deliberately NOT used here: the UI/UX spec bans generic stock
   business imagery, posed corporate scenes and handshake photos. Visual weight
   comes from brand-toned panels plus a logomark-derived arc motif.
   -------------------------------------------------------------------------- */
.stagger {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: var(--space-5);
}

.overlay-card {
  position: relative;
  /* z-index:0 makes the card a stacking context, which is what lets the arc
     motif sit at z-index:-1 — above the card's own background, behind the
     copy. Without it the decoration would paint over the text. */
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 21rem;
  padding: var(--space-6);
  overflow: hidden;
  /* THREE ROUNDED CORNERS, ONE SQUARE (2nd-draft feedback §2, which asked for
     the Industry Solutions treatment to be used consistently). The rule is
     not "square the bottom-left" — it is "square the corner the arc motif
     anchors to", which is what made it read as deliberate rather than
     decorative. The arc is top-right by default, so that is the corner
     squared here; --sector moves both the arc and the square corner to the
     bottom-left together, so neither can end up without the other. */
  border-radius: var(--radius-lg);
  border-top-right-radius: 0;
  background-color: var(--clr-ink-deep);
  color: var(--clr-white);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.overlay-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.overlay-card--offset { margin-top: var(--space-7); }
.overlay-card--primary { background-color: var(--clr-primary); }

/* EQUAL-HEIGHT VARIANT (client feedback: "keep the staggered layout, but show
   me a version where all cards are the same height").
   The grid is `align-items: stretch`, so each card fills the row minus its own
   margins — which is exactly why the 1st draft's offset cards came out shorter.
   Giving the un-offset cards the same amount of margin on the BOTTOM makes both
   rows of the stagger resolve to an identical card height while keeping the
   two-level rhythm. Applied at runtime by the review panel so the Client can
   flip between the two; whichever wins becomes the default and this comment
   goes away. */
.overlay-card--balance { margin-bottom: var(--space-7); }

/* THIRD VARIANT: equal heights with the stagger dropped entirely — a flat row.
   Declared AFTER --offset and --balance on purpose: all three are single-class
   selectors, so source order is what decides, and this one has to be able to
   cancel whichever of the other two the card is carrying. */
.overlay-card--flat { margin-top: 0; margin-bottom: 0; }

/* Industry Solutions variant: the arc anchors bottom-left here, so the square
   corner travels with it and the top-right corner is rounded back. */
.overlay-card--sector {
  border-top-right-radius: var(--radius-lg);
  border-bottom-left-radius: 0;
}

.overlay-card__deco {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 15rem;
  height: 15rem;
  opacity: 0.16;
  color: var(--clr-accent);
}

/* Client feedback: keep the arc top-right on Business Challenges, move it
   bottom-left on Industry Solutions. Deliberately not a mirror — the motif is
   larger and a touch stronger, so the second section reads as a sibling
   rather than the same card flipped over.

   2nd-draft feedback §3: two rings here, not three. The third ring was what
   made these cards feel crowded. The pair kept (r70/r112 in a 200 viewBox at
   18rem) renders the same ring spacing as Business Challenges (r86/r136 at
   15rem), so dropping one ring reads as breathing room and not as a different
   motif. */
.overlay-card__deco--bottom-left {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  width: 18rem;
  height: 18rem;
  opacity: 0.2;
}

.overlay-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-accent);
}

/* Industry Solutions moves the category label from the top of the card to a
   ruled tag at the foot of it — the other half of that section's identity.
   Same vocabulary (mono, uppercase, accent), different card anatomy. */
.overlay-card__tag {
  padding-top: var(--space-3);
  border-top: 1px solid var(--clr-line-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-accent);
}

.overlay-card__title {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

.overlay-card__text {
  margin-top: auto;
  font-size: var(--text-sm);
  color: var(--clr-tint);
}

/* --------------------------------------------------------------------------
   8. BUSINESS IMPACT — KPI STATS
   -------------------------------------------------------------------------- */
.kpi-band { position: relative; }

.kpi-plot {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  color: var(--clr-line-dark);
}

.kpi-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 2px solid var(--clr-line-dark);
}
.kpi--active { border-top-color: var(--clr-accent); }

/* Names the business theme each figure speaks to (client 22 Aug §3). */
.kpi__theme {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-grey);
}

.kpi__value {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--clr-accent);
}

.kpi__label { font-size: var(--text-lg); font-weight: 700; color: var(--clr-white); }

/* --- Sourcing, on demand ---------------------------------------------------
   The band carried the qualifying sentence AND the citation on every card,
   which was three blocks of text under each figure: the numbers stopped being
   the thing you looked at. Both now live in a tooltip behind an asterisk, so
   the card is a figure, one line, and a mark.

   Built on <details>/<summary>, the same primitive as the FAQ: click, keyboard
   operation and the expanded state are native, so the tooltip needs NO
   JavaScript and survives into mock/dist intact. Hover and focus-within are
   layered on in CSS.

   The mark is 1.5rem square, which is the WCAG 2.2 AA target-size minimum
   (2.5.8) — the bare glyph would have been a 7px target. margin-top:auto
   parks it at the foot of the card, so the four marks line up across the row
   however long the labels above them run.

   Each opening route earns its place: hover is the reviewer's, focus is the
   keyboard user's, click is the only one that exists on touch. WCAG 1.4.13
   (content on hover) is satisfied on all three counts: hoverable (the tip is
   flush under the mark, so the pointer reaches it without crossing a gap),
   persistent (nothing times out) and dismissible (Escape — the one part that
   does need script, see index.html). */
.kpi__cite {
  position: relative;
  display: block;
  margin-top: auto;
}

.kpi__cite-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--clr-accent);
}
.kpi__cite-mark:focus-visible { box-shadow: var(--shadow-focus-dark); border-radius: var(--radius-sm); }

/* Visually hidden, same technique as .hero__swap-label: the asterisk is not
   an accessible name, so the summary carries one. */
.kpi__cite-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
}

/* display:none -> grid rather than a fade, deliberately: `display` is in the
   R7.1 natively-mapped set, so this converts to a real Bricks control, where
   `visibility` and `pointer-events` would both fall to custom CSS. */
.kpi__cite-tip {
  display: none;
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  /* Card-width by construction: .kpi__cite is a block child of .kpi, so 100%
     is one column at every breakpoint and the panel can never run off the
     side of the page — which a fixed width anchored to the mark did on the
     fourth card at 1440. */
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--clr-line-soft);
  border-radius: var(--radius-md);
  background-color: var(--clr-ink);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.kpi__cite-text { color: var(--clr-tint); }

/* Underlined, not colour-only: the link must be identifiable without relying
   on hue (WCAG 1.4.1). --clr-accent measures 9.99:1 on --clr-ink, so on THIS
   background it clears AA comfortably — it is only unusable on white
   (1.69:1), which is why it carries no body text anywhere else. */
.kpi__cite-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--clr-accent);
  text-decoration: underline;
}
.kpi__cite-link:focus-visible { box-shadow: var(--shadow-focus-dark); border-radius: var(--radius-sm); }

/* THE THREE WAYS IN. Element-anchored like `details[open] .faq__sign`, which
   is what keeps R3.2 intact: a tooltip is a parent-state-to-child-visibility
   relationship and no flat selector can express one. After conversion all of
   this becomes a Bricks Interaction and these rules are deleted.

   HOVER IS THE WHOLE CARD, not the asterisk. A 24px target that has to be
   found before anything happens is a worse invitation than a card that simply
   answers when you look at it, and it is the figure the reader is already
   pointing at. `article` is the anchor because .kpi is an <article>; the
   selector cannot leak to the page's other cards, because .kpi__cite-tip only
   exists inside this band.

   `[open]` stays, and is the only route on touch, where hover does not exist:
   the asterisk is a real <summary>, so tapping it works with no script. */
article:hover .kpi__cite-tip, article:focus-within .kpi__cite-tip, details[open] .kpi__cite-tip {
  display: grid;
  gap: var(--space-3);
}

/* DISMISSED WITH ESCAPE (WCAG 1.4.13). Hover-revealed content has to be
   dismissible WITHOUT moving the pointer, and CSS alone cannot un-hover
   anything, so the prototype JS marks the tip and this rule wins the tie:
   same specificity as the reveal above, declared after it. The mark is
   cleared as soon as the pointer leaves, so the next hover behaves normally. */
article:hover .kpi__cite-tip--off, article:focus-within .kpi__cite-tip--off, details[open] .kpi__cite-tip--off { display: none; }

/* The honesty line. Deliberately full body size and not small print: it is
   the sentence that makes the band above it truthful. */
.kpi-basis {
  max-width: 62rem;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--clr-line-dark);
  font-size: var(--text-sm);
  color: var(--clr-grey);
}

/* --------------------------------------------------------------------------
   9. SPLIT — visual left, copy right (reference "Is your firm, future fit?")
   -------------------------------------------------------------------------- */
/* stretch, not center: the two columns then resolve to the SAME height by
   definition, whichever is taller. The copy was tightened to close most of
   the gap; this closes the remainder without leaving one column floating
   against a shorter panel. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: var(--space-9);
}

/* A single-cell grid so the illustration — which has a fixed aspect ratio and
   cannot stretch — stays vertically centred in whatever height the copy
   column sets. Any leftover reads as panel padding. */
.split__visual {
  display: grid;
  align-items: center;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--clr-tint);
}

.split__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.split__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.split__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

/* Slightly smaller, well-padded glyph inside every icon tile — more breathing
   room in the dark-green tile (client 24 Aug). */
.icon svg {
  width: 58%;
  height: 58%;
}

.split__body { display: flex; flex-direction: column; gap: var(--space-1); }
.split__title { font-size: var(--text-lg); }
.split__text { font-size: var(--text-sm); color: var(--clr-muted); }

/* --------------------------------------------------------------------------
   10. FRAMEWORK — process timeline
   -------------------------------------------------------------------------- */
.framework {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.framework__track {
  margin-bottom: var(--space-5);
  color: var(--clr-accent);
}

.framework__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.framework__num {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--clr-accent);
}

.framework__title { font-size: var(--text-lg); color: var(--clr-white); }
.framework__text { font-size: var(--text-sm); color: var(--clr-tint); }

/* --------------------------------------------------------------------------
   11. CARD GRIDS  (capabilities / why)
   -------------------------------------------------------------------------- */
/* min() caps the track floor at the container width. Without it a 24rem
   minimum is wider than a 390px phone's content box and the whole PAGE
   scrolls sideways — auto-fit does not shrink below the minmax minimum.
   R5.1: min() is one of the functions parse_unit() passes through natively. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--space-5);
}
.grid--four { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  background-color: var(--clr-white);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--clr-accent); }

.card--flat { border-color: var(--clr-line); background-color: var(--clr-bg); }
.card--flat:hover { transform: none; box-shadow: none; }

.card__title { font-size: var(--text-xl); letter-spacing: -0.01em; }
.card__title--sm { font-size: var(--text-lg); }
.card__text { color: var(--clr-muted); }

.card__list {
  display: flex;
  flex-direction: column; /* also suppresses list markers without list-style */
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--clr-muted);
}

.card__tick {
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  margin-top: var(--space-1);
  color: var(--clr-primary);
}

.card__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--clr-primary);
  transition: gap var(--speed) var(--ease);
}
.card__link:hover { gap: var(--space-4); }
.card__link:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

.card__arrow { width: var(--space-4); height: var(--space-4); color: currentColor; }

/* --------------------------------------------------------------------------
   12. PROOF — heading left, stacked quote cards right (reference layout)

   CURRENTLY UNUSED. The Client Success & Results section was removed at the
   2nd-draft review: the testimonials in it were written for the comp, and
   nothing simulated goes on the site. These rules are kept so the section can
   be restored as a paste once there are real client results and consent to
   publish them. Delete this block instead if the decision hardens.
   -------------------------------------------------------------------------- */
.proof {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  gap: var(--space-9);
}

.proof__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.proof__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.proof__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background-color: var(--clr-white);
  box-shadow: var(--shadow-sm);
}

.proof__glyph { width: var(--space-7); height: var(--space-7); color: var(--clr-accent); }

.proof__quote { font-size: var(--text-md); line-height: 1.6; color: var(--clr-muted); }

.proof__author { display: flex; flex-direction: column; gap: var(--space-1); }
.proof__name { font-size: var(--text-md); font-weight: 700; color: var(--clr-primary); }
.proof__role { font-size: var(--text-sm); color: var(--clr-muted); }

/* --------------------------------------------------------------------------
   13. FAQ
   Authored as <details>/<summary> so the prototype needs zero JavaScript.
   These convert to Divs with customTag (R2.3) and are REBUILT as the native
   Bricks Accordion element in the post-conversion pass (R11.1).
   -------------------------------------------------------------------------- */
/* Two columns rather than a centred stack: the intro sticks while the
   questions scroll past it. Rows are hairline-separated with a mono index,
   matching the KPI/framework figure voice — no card chrome, which is what
   made five white pills on white read as filler. */
.faq-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  gap: var(--space-9);
}

.faq-intro {
  position: sticky;
  top: var(--space-9);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.faq {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--clr-line);
}

.faq__item {
  border-top: 1px solid var(--clr-line);
  transition: border-color var(--speed) var(--ease);
}
.faq__item:hover { border-color: var(--clr-primary); }

/* Smooth open/close so answers ease rather than snap. Height animates via
   ::details-content where supported (graceful instant fallback elsewhere) —
   the same mechanism as the service-page scope rows. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    height: 0;
    overflow: hidden;
    transition: height var(--speed) var(--ease),
                content-visibility var(--speed) allow-discrete;
  }
  .faq__item[open]::details-content { height: auto; }
}

.faq__question {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  font-size: var(--text-lg);
  font-weight: 700;
}
.faq__question:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

.faq__index {
  flex-shrink: 0;
  width: 2rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--clr-grey);
}

.faq__text { flex-grow: 1; }

.faq__sign {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  color: var(--clr-primary);
  transition: transform var(--speed) var(--ease);
}

.faq__answer {
  overflow: hidden;
  padding-bottom: var(--space-5);
  padding-left: 3rem;
  max-width: 42rem;
  color: var(--clr-muted);
}

/* --------------------------------------------------------------------------
   14. FINAL CTA
   -------------------------------------------------------------------------- */
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: 48rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.cta__title { font-size: var(--text-3xl); letter-spacing: -0.03em; }
.cta__accent { display: block; font-weight: 500; color: var(--clr-accent); }
.cta__lead { font-size: var(--text-lg); color: var(--clr-tint); }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background-color: var(--clr-ink-deep); color: var(--clr-white); }

.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: var(--space-8);
  padding-top: var(--space-7);
  padding-bottom: var(--space-8);
}

.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.site-footer__logo { width: 12rem; height: auto; }
.site-footer__tagline { font-size: var(--text-sm); color: var(--clr-tint); }

.site-footer__col { display: flex; flex-direction: column; gap: var(--space-3); }

.site-footer__heading {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-accent);
}

.site-footer__list { display: flex; flex-direction: column; gap: var(--space-2); }

.site-footer__item { display: flex; }

.site-footer__link {
  font-size: var(--text-sm);
  color: var(--clr-tint);
  transition: color var(--speed) var(--ease);
}
.site-footer__link:hover { color: var(--clr-accent); }
.site-footer__link:focus-visible { box-shadow: var(--shadow-focus-dark); border-radius: var(--radius-sm); }

.site-footer__contact {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--clr-tint);
}

.site-footer__contact-icon {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  margin-top: var(--space-1);
  color: var(--clr-accent);
}

.site-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-2); }

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon);
  height: var(--size-icon);
  border: 1px solid var(--clr-line-dark);
  border-radius: var(--radius-pill);
  color: var(--clr-tint);
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.site-footer__social-link:hover { background-color: var(--clr-accent); border-color: var(--clr-accent); color: var(--clr-ink); }
.site-footer__social-link:focus-visible { box-shadow: var(--shadow-focus-dark); }

.site-footer__locations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--clr-line-dark);
}

.site-footer__location {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-tint);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
  border-top: 1px solid var(--clr-line-faint);
  font-size: var(--text-sm);
  color: var(--clr-grey);
}

.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }

/* --------------------------------------------------------------------------
   15A. SERVICE PAGES — editorial layouts
   All classes use the sp- prefix. No homepage layout class (section-head,
   eyebrow, split, framework, faq-layout, card--flat, cta__inner) appears
   on service pages — only shared tokens + site-wide utilities.
   -------------------------------------------------------------------------- */

/* --- Heading patterns (replace section-head/eyebrow on service pages) --- */

.sp-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: var(--space-3);
}
/* Prefix icon, matching the homepage eyebrow glyph. */
.sp-label__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--clr-primary);
}

.sp-label--light { color: var(--clr-grey); }

.sp-heading {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.sp-heading--bar {}

.sp-heading--ruled {
  padding-bottom: var(--space-4);
  border-bottom: 1.5px solid rgba(108, 111, 118, 0.08);
}

.sp-heading__accent { color: var(--clr-primary); }

.sp-heading__accent--light { color: var(--clr-accent); }

.sp-lead {
  font-size: var(--text-lg);
  color: var(--clr-muted);
  margin-top: var(--space-4);
  margin-bottom: var(--space-7);
}

.sp-bar {
  width: 3rem;
  height: 3px;
  background-color: var(--clr-accent);
  margin-top: var(--space-4);
  margin-right: auto;
  margin-left: auto;
}

/* --- 1. Service Hero: two-column grid with facts sidebar --- */

.sp-hero {
  position: relative;
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  background-color: var(--clr-ink-deep);
  color: var(--clr-white);
  overflow: hidden;
}

.sp-hero__mesh {
  position: absolute;
  top: -15%;
  right: -15%;
  bottom: -15%;
  left: -15%;
  background-image:
    radial-gradient(28rem 28rem at 70% 20%, var(--clr-glow-accent), transparent 60%),
    radial-gradient(36rem 36rem at 30% 80%, var(--clr-glow-mid), transparent 65%),
    radial-gradient(20rem 20rem at 85% 70%, var(--clr-glow-faint), transparent 55%);
  opacity: 0.5;
  pointer-events: none;
  animation: mesh-drift 26s var(--ease) infinite alternate;
}

.sp-hero__grid {
  display: grid;
  grid-template-columns: 1fr 26rem;
  gap: var(--space-8);
  align-items: center;
}

.sp-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sp-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-grey);
}

.sp-hero__breadcrumb-link {
  color: var(--clr-grey);
  transition: color var(--speed) var(--ease);
}
.sp-hero__breadcrumb-link:hover { color: var(--clr-accent); }

.sp-hero__breadcrumb-sep { color: var(--clr-line-dark); }

.sp-hero__breadcrumb-current { color: var(--clr-tint); }

.sp-hero__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--clr-accent);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-accent);
  background-color: rgba(37, 224, 187, 0.08);
}

.sp-hero__badge-dot {
  display: block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background-color: var(--clr-accent);
}

.sp-hero__title {
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.sp-hero__lead {
  max-width: 48rem;
  font-size: var(--text-lg);
  color: var(--clr-tint);
}

.sp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.sp-hero__visual {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sp-topo {
  /* Enlarged for stronger visual presence (client 22 Aug §5). */
  max-width: 27rem;
  margin: 0 auto;
}

.sp-topo__hub-glow {
  animation: sp-topo-glow 3s ease infinite;
}

.sp-topo__pulse {
  opacity: 0.8;
}

.sp-topo__status {
  animation: sp-topo-blink 2s ease infinite;
}

@keyframes sp-topo-glow {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.22; }
}

@keyframes sp-topo-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.sp-hero__metrics {
  display: flex;
  gap: var(--space-4);
}

.sp-hero__metric {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.04);
}

.sp-hero__metric-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--clr-accent);
  line-height: 1.1;
}

.sp-hero__metric-label {
  font-size: var(--text-2xs);
  color: var(--clr-grey);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* --- 2. Business Challenges: numbered cards --- */

.sp-challenges__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.sp-challenges__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-7) var(--space-8);
  border-radius: var(--radius-lg);
  border: 1.5px solid rgba(108, 111, 118, 0.06);
  background-color: var(--clr-bg);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}

.sp-challenges__row:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 114, 102, 0.14);
}

.sp-challenges__num {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--clr-primary);
  line-height: 1;
  opacity: 0.35;
}

.sp-challenges__title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sp-challenges__text {
  font-size: var(--text-md);
  color: var(--clr-muted);
  line-height: 1.7;
}

/* --- 3. Our Approach: asymmetric grid with process sidebar --- */

.sp-approach {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.sp-approach__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sp-approach__narrative {
  font-size: var(--text-lg);
  color: var(--clr-muted);
  line-height: 1.7;
  max-width: 36rem;
}

.sp-approach__sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background-color: var(--clr-bg);
  border-radius: var(--radius-lg);
  border: 1.5px solid rgba(108, 111, 118, 0.06);
  overflow: hidden;
}

.sp-approach__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-7);
  border-bottom: 1.5px solid rgba(108, 111, 118, 0.06);
  transition: background-color 320ms var(--ease);
}

.sp-approach__step:last-child {
  border-bottom: 0;
}

.sp-approach__step:hover {
  background-color: var(--clr-tint);
}

.sp-approach__step-num {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--clr-primary);
  letter-spacing: 0.1em;
  font-weight: 700;
}

.sp-approach__step-title {
  font-size: var(--text-lg);
  font-weight: 700;
}

.sp-approach__step-text {
  font-size: var(--text-sm);
  color: var(--clr-muted);
}

/* --- 3b. Network Health Dashboard: animated metrics visual --- */

.sp-dash {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  background-color: #0c2d29;
  color: var(--clr-white);
}

.sp-dash__grid {
  display: grid;
  grid-template-columns: 10rem 1fr 16rem;
  gap: var(--space-8);
  align-items: center;
}

.sp-dash__ring-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-dash__ring {
  width: 100%;
  max-width: 10rem;
}

.sp-dash__ring-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sp-dash__ring-value {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--clr-accent);
  line-height: 1;
}

.sp-dash__ring-text {
  font-size: var(--text-2xs);
  color: var(--clr-grey);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.sp-dash__bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sp-dash__bar-row {
  display: grid;
  grid-template-columns: 7rem 1fr 4rem;
  gap: var(--space-4);
  align-items: center;
}

.sp-dash__bar-name {
  font-size: var(--text-sm);
  color: var(--clr-grey);
}

.sp-dash__bar-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.sp-dash__bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--clr-primary);
  width: 0;
  transition: width 1.5s var(--ease-editorial);
}

.sp-dash__bar-fill--good {
  background-color: var(--clr-accent);
}

.sp-dash__bar-val {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clr-tint);
  text-align: right;
}

.sp-dash__feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1.5px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.03);
}

.sp-dash__feed-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sp-dash__feed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--clr-accent);
  animation: sp-topo-blink 2s ease infinite;
}

.sp-dash__feed-title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--clr-grey);
}

.sp-dash__feed-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sp-dash__feed-item {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.sp-dash__feed-time {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--clr-grey);
  flex-shrink: 0;
  min-width: 2.5rem;
}

.sp-dash__feed-msg {
  color: rgba(255, 255, 255, 0.6);
}

/* --- 4. Sub-Service Details: full-width accordion with tag pills --- */

.sp-detail {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--clr-line);
}

.sp-detail__item {
  border-top: 1px solid var(--clr-line);
}

.sp-detail__summary {
  display: grid;
  grid-template-columns: 3rem var(--size-icon) 1fr auto;
  gap: var(--space-4);
  align-items: start;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  cursor: pointer;
  transition: color var(--speed) var(--ease);
}

.sp-detail__summary:hover {
  color: var(--clr-primary);
}

.sp-detail__summary:hover .sp-detail__chevron {
  background-color: var(--clr-primary);
  color: var(--clr-white);
}

.sp-detail__num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--clr-primary);
  letter-spacing: 0.1em;
  font-weight: 700;
  padding-top: 0.15em;
}

.sp-detail__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon);
  height: var(--size-icon);
  color: var(--clr-primary);
  padding-top: 0.05em;
}

.sp-detail__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sp-detail__title {
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
}

.sp-detail__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--clr-line);
  color: var(--clr-primary);
  transform: rotate(-90deg);
  transition: transform var(--speed) var(--ease), background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.sp-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  padding-left: calc(3rem + var(--size-icon) + var(--space-4) + var(--space-4));
}

.sp-detail__desc {
  font-size: var(--text-md);
  color: var(--clr-muted);
  max-width: 48rem;
  font-weight: 400;
  line-height: 1.55;
}

.sp-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sp-detail__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--clr-primary-deep);
  background-color: var(--clr-tint);
  font-weight: 500;
}

.sp-detail__depth {
  font-size: var(--text-sm);
  color: var(--clr-muted);
  max-width: 48rem;
  line-height: 1.6;
  background-color: var(--clr-tint);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
}

/* --- 4b. Service Scope: numbered inclusion rows ----------------------
   Client reference (14 Aug): every inclusion is legible at a glance —
   icon, index, title, business description and tags — while the deeper
   technical scope stays behind the arrow and reveals on click. The
   visitor understands the service WITHOUT expanding anything. No tabs,
   no auto-cycle. Native <details> so touch/keyboard work and it converts
   to a Bricks Accordion (R11.1). */

.sp-scope {
  margin-top: var(--space-7);
  border-top: 1px solid var(--clr-line);
}

.sp-scope__row {
  border-bottom: 1px solid var(--clr-line);
}

.sp-scope__summary {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-2);
  cursor: pointer;
  list-style: none;
  transition: background-color 320ms var(--ease);
}
.sp-scope__summary::-webkit-details-marker { display: none; }
.sp-scope__summary::marker { content: ""; }
.sp-scope__summary:hover { background-color: var(--clr-bg); }
.sp-scope__summary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

.sp-scope__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-md);
  background-color: var(--clr-tint);
  color: var(--clr-primary-deep);
  flex-shrink: 0;
}
.sp-scope__icon svg { width: 1.6rem; height: 1.6rem; }

/* Big mono index with the vertical divider rule from the reference */
.sp-scope__num {
  padding-right: var(--space-5);
  border-right: 1.5px solid var(--clr-line);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--clr-primary);
}

.sp-scope__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.sp-scope__title {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--clr-ink);
}

.sp-scope__desc {
  font-size: var(--text-md);
  color: var(--clr-muted);
  line-height: 1.6;
  max-width: 44rem;
}

.sp-scope__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.sp-scope__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--clr-primary-deep);
  background-color: var(--clr-tint);
}

/* Circular expand control */
.sp-scope__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--clr-line);
  color: var(--clr-primary);
  flex-shrink: 0;
  transition: transform var(--speed) var(--ease),
              border-color 320ms var(--ease),
              background-color 320ms var(--ease);
}
.sp-scope__toggle svg { width: 1.1rem; height: 1.1rem; }
.sp-scope__summary:hover .sp-scope__toggle {
  border-color: var(--clr-primary);
  background-color: var(--clr-tint);
}
.sp-scope__row[open] .sp-scope__toggle {
  transform: rotate(180deg);
  border-color: var(--clr-primary);
}

/* Revealed technical detail, indented under the body column */
.sp-scope__detail {
  padding: 0 var(--space-2) var(--space-6) 5.5rem;
}
.sp-scope__tech {
  font-size: var(--text-md);
  color: var(--clr-muted);
  line-height: 1.6;
  max-width: 44rem;
  padding: var(--space-5);
  background-color: var(--clr-bg);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--clr-primary);
}

/* Smooth open/close (same technique as the FAQ) */
@supports (interpolate-size: allow-keywords) {
  .sp-scope__row::details-content {
    height: 0;
    overflow: hidden;
    transition: height var(--speed) var(--ease),
                content-visibility var(--speed) allow-discrete;
  }
  .sp-scope__row[open]::details-content { height: auto; }
}

/* --- 5. Business Outcomes: 2x2 card grid --- */

.sp-outcomes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.sp-outcomes__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background-color: var(--clr-white);
  border-radius: var(--radius-lg);
  border: 1.5px solid rgba(108, 111, 118, 0.06);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}

.sp-outcomes__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Was a flat grey tint on an already-grey section (read as non-premium,
   client 22 Aug). Keep every card the same crisp white-on-grey with the
   border + hover shadow doing the separation. */
.sp-outcomes__item--tinted {
  background-color: var(--clr-white);
}

.sp-outcomes__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background-color: var(--clr-primary);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--clr-white);
}

.sp-outcomes__title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sp-outcomes__text {
  font-size: var(--text-md);
  color: var(--clr-muted);
  line-height: 1.65;
}

/* --- 6. Who It's For: dark badge strip --- */

.sp-audience {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
  background-color: var(--clr-ink-deep);
  color: var(--clr-white);
}

.sp-audience__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.sp-audience__rule {
  flex-grow: 1;
  height: 1px;
  background-color: var(--clr-line-dark);
}

.sp-audience__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.sp-audience__strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.sp-audience__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  color: var(--clr-tint);
  font-size: var(--text-sm);
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.04);
  transition: border-color 320ms var(--ease), background-color 320ms var(--ease);
}

.sp-audience__badge:hover {
  border-color: rgba(37, 224, 187, 0.2);
  background-color: rgba(255, 255, 255, 0.06);
}

.sp-audience__badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--clr-accent);
}

/* --- 7. FAQ: single-column centred accordion --- */

.sp-faq {
  max-width: var(--size-shell-narrow);
  margin-right: auto;
  margin-left: auto;
}

.sp-faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.sp-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sp-faq__item {
  border: 1.5px solid rgba(108, 111, 118, 0.08);
  border-radius: var(--radius-lg);
  background-color: var(--clr-white);
  transition: background-color 320ms var(--ease), border-color 320ms var(--ease);
}

.sp-faq__item[open] {
  background-color: var(--clr-bg);
  border-color: rgba(108, 111, 118, 0.12);
}

.sp-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-lg);
  font-weight: 600;
  cursor: pointer;
  transition: color 320ms var(--ease);
}

.sp-faq__question:hover {
  color: var(--clr-primary);
}

.sp-faq__sign {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  color: var(--clr-primary);
  transition: transform var(--speed) var(--ease);
}

.sp-faq__answer {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--text-md);
  color: var(--clr-muted);
  max-width: 42rem;
  line-height: 1.7;
}

/* Chevron rotation + smooth open/close, matching the homepage FAQ. */
.sp-faq__item[open] .sp-faq__sign { transform: rotate(180deg); }

@supports (interpolate-size: allow-keywords) {
  .sp-faq__item::details-content {
    height: 0;
    overflow: hidden;
    transition: height var(--speed) var(--ease),
                content-visibility var(--speed) allow-discrete;
  }
  .sp-faq__item[open]::details-content { height: auto; }
}

/* --- 8. Cross-Links: vertical card grid with bottom-accent hover --- */

.sp-crosslinks__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: var(--space-5);
}

.sp-crosslinks__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}

.sp-crosslink {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background-color: var(--clr-primary);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  color: var(--clr-white);
  text-align: center;
  transition: border-color 320ms var(--ease), transform 320ms var(--ease), box-shadow 320ms var(--ease);
}

.sp-crosslink:hover {
  border-color: var(--clr-accent);
  transform: translateY(-3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 12px 40px rgba(0, 0, 0, 0.3);
}

.sp-crosslink__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--clr-white);
  color: var(--clr-primary);
}

.sp-crosslink__name {
  font-size: var(--text-md);
  font-weight: 700;
}

.sp-crosslink__hook {
  font-size: var(--text-sm);
  color: var(--clr-tint);
}

.sp-crosslink__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  width: var(--space-4);
  height: var(--space-4);
  color: var(--clr-accent);
}

/* --- 9. Contact CTA: asymmetric split --- */

/* Full-bleed green band — same green as the homepage pre-footer CTA. */
.sp-cta {
  background-color: var(--clr-primary);
  color: var(--clr-white);
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.sp-cta__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-9);
  align-items: center;
  max-width: var(--size-shell);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-6);
  padding-left: var(--space-6);
}

.sp-cta__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  justify-content: center;
}

/* Only the four-point column is white — a card sitting on the green band. */
.sp-cta__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  justify-content: center;
  padding: var(--space-8);
  background-color: var(--clr-white);
  color: var(--clr-ink);
  border-radius: var(--radius-lg);
}

.sp-cta__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.sp-cta__accent { color: var(--clr-accent); }

.sp-cta__lead {
  font-size: var(--text-lg);
  color: var(--clr-tint);
  max-width: 32rem;
  line-height: 1.65;
}

.sp-cta__promise {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md);
  color: var(--clr-ink);
}

.sp-cta__dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--clr-primary);
}

/* --------------------------------------------------------------------------
   15B. ABOUT US — narrative / grounded
   Narrow prose column, vertical spine, blockquote, scroll strip.
   All classes use the ab- prefix.
   -------------------------------------------------------------------------- */

.ab-philosophy {
  max-width: var(--size-shell-narrow);
  margin-right: auto;
  margin-left: auto;
}

.ab-philosophy__quote {
  padding-left: var(--space-6);
  border-left: 4px solid var(--clr-primary);
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--clr-ink);
  margin-bottom: var(--space-8);
}

.ab-philosophy__list {
  display: flex;
  flex-direction: column;
}

.ab-philosophy__item {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-6);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  border-top: 1px solid var(--clr-line);
}

.ab-philosophy__name {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ab-philosophy__desc {
  font-size: var(--text-md);
  color: var(--clr-muted);
  line-height: 1.65;
}

.ab-approach {
  max-width: var(--size-shell-narrow);
  margin-right: auto;
  margin-left: auto;
}

.ab-approach__spine {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.ab-approach__pillar {
  padding-left: var(--space-7);
  border-left: 3px solid var(--clr-accent);
}

.ab-approach__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: var(--space-2);
}

.ab-approach__title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

.ab-approach__text {
  font-size: var(--text-md);
  color: var(--clr-muted);
  line-height: 1.65;
  max-width: 38rem;
}

.ab-reasons__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}

.ab-reasons__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--clr-white);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.ab-reasons__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--clr-tint);
}

.ab-reasons__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon);
  height: var(--size-icon);
  border-radius: var(--radius-md);
  background-color: var(--clr-tint);
  color: var(--clr-primary);
}

.ab-reasons__icon svg { width: 1.5rem; height: 1.5rem; }

.ab-reasons__title {
  font-size: var(--text-lg);
  font-weight: 700;
}

.ab-reasons__text {
  font-size: var(--text-md);
  color: var(--clr-muted);
  line-height: 1.65;
}

.ab-commit__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: var(--size-shell-narrow);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.ab-commit__title {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
}

.ab-commit__accent { color: var(--clr-accent); }

.ab-commit__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.ab-commit__item {
  padding-top: var(--space-5);
  border-top: 1px solid var(--clr-line-soft);
  font-size: var(--text-lg);
  color: var(--clr-tint);
  line-height: 1.55;
}

.ab-commit__strong {
  font-weight: 700;
  color: var(--clr-white);
}

.ab-people__strip {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  padding-bottom: var(--space-4);
}

.ab-people__card {
  flex-shrink: 0;
  width: 18rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--clr-white);
  border: 1px solid var(--clr-line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.ab-people__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--clr-tint);
}

.ab-people__avatar {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-pill);
  background-color: var(--clr-tint);
  color: var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-lg);
}

.ab-people__name {
  font-size: var(--text-lg);
  font-weight: 700;
}

.ab-people__role {
  font-size: var(--text-sm);
  color: var(--clr-primary);
  font-weight: 600;
  margin-top: calc(-1 * var(--space-2));
}

.ab-people__bio {
  font-size: var(--text-sm);
  color: var(--clr-muted);
  line-height: 1.55;
}

.ab-faq {
  max-width: var(--size-shell-narrow);
  margin-right: auto;
  margin-left: auto;
}

.ab-faq__head {
  text-align: center;
  margin-bottom: var(--space-7);
}

.ab-faq__list {
  display: flex;
  flex-direction: column;
}

.ab-faq__item {
  border-bottom: 1px solid var(--clr-line);
}

.ab-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  font-size: var(--text-lg);
  font-weight: 700;
}

.ab-faq__sign {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  color: var(--clr-primary);
  transition: transform var(--speed) var(--ease);
}

.ab-faq__answer {
  padding-bottom: var(--space-5);
  max-width: 42rem;
  font-size: var(--text-md);
  color: var(--clr-muted);
  line-height: 1.65;
}

.ab-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: var(--size-shell-narrow);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.ab-cta__title {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
}

.ab-cta__accent { color: var(--clr-accent); }

.ab-cta__lead {
  font-size: var(--text-lg);
  color: var(--clr-tint);
}

/* --------------------------------------------------------------------------
   15C. INDUSTRY SOLUTIONS — showcase / immersive
   Full-width alternating panels, stat strip, vertical-rule columns.
   All classes use the ind- prefix.
   -------------------------------------------------------------------------- */

.ind-overview {
  max-width: var(--size-shell-narrow);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.ind-overview__title {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
}

.ind-overview__accent { color: var(--clr-primary); }

.ind-overview__lead {
  font-size: var(--text-lg);
  color: var(--clr-muted);
  line-height: 1.55;
}

.ind-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.ind-panel__visual {
  position: relative;
  min-height: 26rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(64% 64% at 50% 42%, var(--clr-tint), transparent 72%),
    var(--clr-bg);
}

/* faint blueprint grid, faded at the edges */
.ind-panel__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--clr-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--clr-line) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000, transparent 78%);
  mask-image: radial-gradient(72% 72% at 50% 50%, #000, transparent 78%);
}

/* white disc the icon floats on */
.ind-panel__visual::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11rem;
  height: 11rem;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  background-color: var(--clr-white);
  border: 1px solid var(--clr-line);
  box-shadow: var(--shadow-md);
}

.ind-panel__visual--reverse { order: 2; }

.ind-panel__icon {
  position: relative;
  z-index: 1;
  width: 4.75rem;
  height: 4.75rem;
  color: var(--clr-primary);
  filter: drop-shadow(0 4px 10px rgba(0, 114, 102, 0.18));
}

.ind-panel__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
}

.ind-panel__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-primary);
}

.ind-panel__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ind-panel__text {
  font-size: var(--text-md);
  color: var(--clr-muted);
  line-height: 1.65;
}

.ind-panel__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ind-panel__point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--clr-muted);
}

.ind-panel__tick {
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  margin-top: var(--space-1);
  color: var(--clr-primary);
}

.ind-help__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.ind-help__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-right: var(--space-6);
  padding-left: var(--space-6);
  border-left: 1px solid var(--clr-line-dark);
}

.ind-help__item--first {
  border-left: 0;
  padding-left: 0;
}

.ind-help__num {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--clr-accent);
}

.ind-help__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--clr-white);
}

.ind-help__text {
  font-size: var(--text-sm);
  color: var(--clr-tint);
  line-height: 1.55;
}

.ind-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: 48rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.ind-cta__title {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
}

.ind-cta__accent { color: var(--clr-accent); }

.ind-cta__lead {
  font-size: var(--text-lg);
  color: var(--clr-tint);
}

/* --------------------------------------------------------------------------
   15D. CONTACT US — functional / direct
   Form-forward, step timeline, office cards.
   All classes use the ct- prefix.
   -------------------------------------------------------------------------- */

.ct-hero {
  padding-top: var(--space-8);
  padding-bottom: var(--space-7);
  background-color: var(--clr-white);
  border-bottom: 1px solid var(--clr-line);
}

.ct-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}

.ct-hero__breadcrumb-link {
  color: var(--clr-muted);
  transition: color var(--speed) var(--ease);
}
.ct-hero__breadcrumb-link:hover { color: var(--clr-primary); }

.ct-hero__breadcrumb-sep { color: var(--clr-line); }

.ct-hero__breadcrumb-current { color: var(--clr-ink); }

.ct-hero__title {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}

.ct-hero__accent { color: var(--clr-primary); }

.ct-hero__lead {
  font-size: var(--text-lg);
  color: var(--clr-muted);
  max-width: 42rem;
  line-height: 1.55;
}

.ct-main {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-7);
  align-items: start;
}

.ct-form-card {
  padding: var(--space-7);
  background-color: var(--clr-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.ct-form-card__title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
}

.ct-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.ct-next {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ct-next__title {
  font-size: var(--text-xl);
  font-weight: 700;
}

.ct-next__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ct-next__step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

.ct-next__step--last { padding-bottom: 0; }

.ct-next__num {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--clr-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--clr-primary);
  background-color: var(--clr-bg);
}

.ct-next__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ct-next__step-title {
  font-size: var(--text-md);
  font-weight: 700;
}

.ct-next__step-text {
  font-size: var(--text-sm);
  color: var(--clr-muted);
  line-height: 1.55;
}

.ct-offices__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.ct-office {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-lg);
}

.ct-office__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--clr-line);
}

.ct-office__map {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-md);
  background-color: var(--clr-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-primary);
  flex-shrink: 0;
}

.ct-office__map-icon {
  width: var(--space-5);
  height: var(--space-5);
}

.ct-office__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ct-office__city {
  font-size: var(--text-xl);
  font-weight: 700;
}

.ct-office__type {
  font-size: var(--text-sm);
  color: var(--clr-muted);
}

.ct-office__detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--clr-muted);
}

.ct-office__detail-icon {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  margin-top: var(--space-1);
  color: var(--clr-primary);
}

.ct-faq {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-8);
  align-items: start;
}

.ct-faq__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ct-faq__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ct-faq__lead {
  font-size: var(--text-md);
  color: var(--clr-muted);
  line-height: 1.55;
}

.ct-faq__list {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--clr-line);
}

.ct-faq__item { border-top: 1px solid var(--clr-line); }

.ct-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  font-size: var(--text-lg);
  font-weight: 700;
}

.ct-faq__sign {
  flex-shrink: 0;
  width: var(--space-5);
  height: var(--space-5);
  color: var(--clr-primary);
  transition: transform var(--speed) var(--ease);
}

.ct-faq__answer {
  padding-bottom: var(--space-5);
  max-width: 38rem;
  font-size: var(--text-md);
  color: var(--clr-muted);
  line-height: 1.65;
}

.ct-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: 48rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.ct-cta__title {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
}

.ct-cta__accent { color: var(--clr-accent); }

.ct-cta__lead {
  font-size: var(--text-lg);
  color: var(--clr-tint);
}

/* --------------------------------------------------------------------------
   15E. LEGAL PAGES — clean / typographic
   TOC sidebar, narrow prose column, generous line-height.
   All classes use the legal- prefix.
   -------------------------------------------------------------------------- */

.legal-header {
  padding-top: var(--space-9);
  padding-bottom: var(--space-7);
  background-color: var(--clr-white);
  border-bottom: 1px solid var(--clr-line);
}

.legal-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}

.legal-header__breadcrumb-link {
  color: var(--clr-muted);
  transition: color var(--speed) var(--ease);
}
.legal-header__breadcrumb-link:hover { color: var(--clr-primary); }

.legal-header__breadcrumb-sep { color: var(--clr-line); }

.legal-header__breadcrumb-current { color: var(--clr-ink); }

.legal-header__title {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}

.legal-header__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-muted);
}

.legal-body {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: var(--space-8);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--size-header) + var(--space-6));
}

.legal-toc__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-bottom: var(--space-4);
}

.legal-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.legal-toc__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid transparent;
  font-size: var(--text-sm);
  color: var(--clr-muted);
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.legal-toc__link:hover { color: var(--clr-primary); }

.legal-toc__link--active {
  border-left-color: var(--clr-primary);
  color: var(--clr-primary);
  font-weight: 600;
}

.legal-prose { max-width: 48rem; }

.legal-prose__h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--clr-line);
}

.legal-prose__h2--first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-prose__h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.legal-prose__p {
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--clr-ink);
  margin-bottom: var(--space-4);
}

.legal-prose__list {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.legal-prose__item {
  margin-bottom: var(--space-2);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--clr-ink);
}

.legal-prose__link {
  color: var(--clr-primary);
  font-weight: 600;
  text-decoration: underline;
  transition: color var(--speed) var(--ease);
}
.legal-prose__link:hover { color: var(--clr-primary-deep); }

.legal-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: 42rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.legal-cta__title {
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
}

.legal-cta__lead {
  font-size: var(--text-md);
  color: var(--clr-muted);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   15F. UTILITY PAGES — minimal / branded
   Full-viewport centered composition, decorative ring, no header/footer.
   All classes use the util- prefix.
   -------------------------------------------------------------------------- */

.util-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-6);
  background-color: var(--clr-ink-deep);
  color: var(--clr-white);
}

.util-page__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 32rem;
  text-align: center;
  z-index: 1;
}

.util-page__logo {
  width: 10rem;
  height: auto;
  margin-bottom: var(--space-4);
}

.util-page__ring {
  position: absolute;
  z-index: 0;
  width: 24rem;
  height: 24rem;
  border: 2px solid var(--clr-accent);
  border-radius: var(--radius-pill);
  opacity: 0.08;
}

.util-page__code {
  font-family: var(--font-mono);
  font-size: var(--text-5xl);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--clr-accent);
  opacity: 0.6;
}

.util-page__title {
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
}

.util-page__text {
  font-size: var(--text-lg);
  color: var(--clr-tint);
  line-height: 1.55;
  max-width: 28rem;
}

.util-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   R6.2: max-width ONLY, at the exact Bricks breakpoint widths.
   Values below are the Bricks DEFAULTS. Confirm against the staging site with
   bricks-get-design-context and correct if it differs before converting.
   -------------------------------------------------------------------------- */

/* --- tablet_portrait --- */
@media (max-width: 991px) {
  .site-header__nav { display: none; }
  .site-header__toggle { display: flex; }

  /* Flat BEM modifiers toggled by the prototype JS. Replaced by the native
     Bricks Nav Menu element after conversion. */
  .site-header__nav--open {
    display: flex;
    position: absolute;
    top: var(--size-header);
    right: 0;
    left: 0;
    padding-top: var(--space-5);
    padding-right: var(--space-6);
    padding-bottom: var(--space-5);
    padding-left: var(--space-6);
    border-bottom: 1px solid var(--clr-line);
    background-color: var(--clr-white);
    box-shadow: var(--shadow-md);
  }
  .site-header__list--open {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    width: 100%;
  }

  .mega {
    position: static;
    transform: none;
    width: 100%;
    padding: var(--space-4) 0 0 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    border: 0;
    opacity: 1;
    visibility: visible;
  }

  .mega__grid { grid-template-columns: 1fr; gap: 0; }

  .mega__link { padding: var(--space-3) 0; }
  .mega__link:hover { background-color: transparent; }

  .site-header__chevron { display: none; }

  .hero__strip { flex-direction: column; align-items: center; gap: var(--space-2); }
  .hero__strip-item { padding-right: 0; padding-left: 0; border-left: 0; }

  /* Six stations across is too tight below this width for the longest word
     ("Disorganised Microsoft 365") to hold two lines. Three across gives two
     rows, each drawing its own continuous rail. Both scenes take the same
     rule, so the two layers stay identical and the wipe stays aligned. */
  .rtm {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: var(--space-4);
  }
  .rtm__card--r1, .rtm__card--r2, .rtm__card--r3, .rtm__card--r4, .rtm__card--r5,
  .rtm__card--m1, .rtm__card--m2, .rtm__card--m3, .rtm__card--m4, .rtm__card--m5 {
    grid-column: auto; grid-row: auto;
  }
  .rtm__hub { display: none; }
  .rtm__col-head {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-muted);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--clr-line);
  }
  .rtm__col-head--managed { color: var(--clr-primary); }
  .rtm-legend { flex-direction: column; gap: var(--space-5); }

  .stagger { grid-template-columns: repeat(2, 1fr); }
  /* Two columns cannot carry a two-level stagger, so both the offset and its
     equal-height counterweight are dropped together. */
  .overlay-card--offset { margin-top: 0; }
  .overlay-card--balance { margin-bottom: 0; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); }

  /* Once the statistics stack, an absolutely-positioned tooltip lands on top
     of the next card and hides the figure you have not read yet, so in
     stacked layouts it joins the flow and pushes the cards below it down.

     HOVER IS NOT DISABLED HERE. An earlier version switched it off below this
     width on the theory that these are touch widths — but a laptop window
     dragged narrower than 991px is a mouse at 900px, and it lost the
     interaction entirely with no way to know why. Every width hovers now; the
     cost is that opening a panel shifts the cards below it at these widths,
     which is the lesser problem by a distance. */
  .kpi__cite-tip { position: static; margin-top: var(--space-3); }

  .split { grid-template-columns: 1fr; gap: var(--space-7); }

  .framework { grid-template-columns: repeat(2, 1fr); }
  /* a single horizontal connector cannot describe a stacked grid */
  .framework__track { display: none; }
  .framework__step { padding-top: var(--space-5); border-top: 2px solid var(--clr-line-dark); }
  .kpi-plot { display: none; }

  .proof { grid-template-columns: 1fr; gap: var(--space-7); }
  .faq-layout { grid-template-columns: 1fr; gap: var(--space-7); }
  .faq-intro { position: static; }

  .site-footer__top { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); }

  .sp-hero__grid { grid-template-columns: 1fr; }
  .sp-topo { max-width: 18rem; }
  .sp-hero__metrics { flex-direction: row; flex-wrap: wrap; }
  .sp-dash__grid { grid-template-columns: 8rem 1fr 14rem; gap: var(--space-6); }
  .sp-dash__bar-row { grid-template-columns: 6rem 1fr 3.5rem; }
  .sp-challenges__list { grid-template-columns: 1fr 1fr; }
  .sp-approach { grid-template-columns: 1fr; }
  .sp-approach__sidebar { flex-direction: row; gap: var(--space-4); }
  .sp-approach__step { flex-grow: 1; flex-basis: 0; }
  .sp-crosslinks__grid { grid-template-columns: repeat(3, 1fr); }
  .sp-cta__inner { grid-template-columns: 1fr; }

  .ab-philosophy__item { grid-template-columns: 1fr; }
  .ab-reasons__grid { grid-template-columns: repeat(2, 1fr); }

  .ind-panel { grid-template-columns: 1fr; }
  .ind-panel__visual { min-height: 16rem; }
  .ind-panel__visual--reverse { order: 0; }
  .ind-help__grid { grid-template-columns: repeat(2, 1fr); }

  .ct-main { grid-template-columns: 1fr; }
  .ct-faq { grid-template-columns: 1fr; }

  .legal-body { grid-template-columns: 14rem 1fr; }
}

/* --- mobile_landscape --- */
@media (max-width: 767px) {
  .section { padding-top: var(--space-9); padding-bottom: var(--space-9); }

  .shell { padding-right: var(--space-5); padding-left: var(--space-5); }

  /* THE HERO STOPS BEING ONE SCREEN TALL (3rd-draft feedback §1: "feels too
     large on mobile and takes up almost the entire screen").

     The cause was structural, not the copy. `.hero` carries
     `min-height: calc(100vh - header)`, which makes it exactly one viewport
     tall BY CONSTRUCTION — so shortening the paragraph would have changed
     nothing at all. The box would have stayed the same height and only the
     empty space inside it would have grown. That is why the Client's suggested
     copy cut is not applied: they said they would rather keep the paragraph if
     the height could come down another way, and it can.

     Released here, the hero is as tall as its content, which is what puts the
     next section at the fold. Above 767px the full-screen hero is untouched.

     The padding is raised TWO steps with it. Once min-height goes, the hero's
     own padding is the only thing holding the copy off the header above and
     the section below, and the base value was sitting on the floor of its
     clamp at 32px. --space-8 was tried first and was still tight: it resolves
     to 42px at 390, against a 40px headline, so the breathing room either side
     of the block came to roughly one line of display type. --space-9 gives
     59px, which is where it starts to read as deliberate space rather than as
     a hero that ran out of room.

     There is no height cap involved anywhere in this, which is the obvious
     thing to suspect: measured at 390, min-height is 0, max-height is none on
     .hero, .hero__inner and .shell alike, and the gap above the first line and
     below the last button matched the declared padding exactly. The padding
     was simply small. */
  .hero {
    min-height: 0;
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }

  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }

  /* The value strip goes on phones (3rd-draft feedback: the hero takes up
     almost the whole screen on mobile). It is the cheapest thing in the hero
     to lose: at these widths it has already stacked into four full-width rows,
     so it costs more height than anything else here, and every claim it makes
     is made again in full further down the page — "Predictable operations" in
     Business Challenges, "Documented environments" and "One accountable
     partner" in Why EqanTech, "Planned investment" in the Framework. Nothing
     is only said here. Above 767px it stays. */
  .hero__strip { display: none; }

  .stagger { grid-template-columns: 1fr; }
  .overlay-card { min-height: 0; }

  .framework { grid-template-columns: 1fr; }

  /* Two across on phones. One column would make this the tallest section on
     the page, which is the opposite of the "compact" the Client asked for —
     and the section sits directly under a hero that was just shortened for
     exactly that reason. */
  .rtm__card { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .rtm__name { font-size: var(--text-xs); }

  .proof__card { padding: var(--space-6); }

  .site-footer__top { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .modal__panel { padding: var(--space-6); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }

  .sp-hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .sp-hero__metrics { gap: var(--space-3); }
  .sp-hero__metric { padding: var(--space-3) var(--space-4); }
  .sp-dash__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .sp-dash__ring-wrap { justify-content: flex-start; }
  .sp-dash__ring { max-width: 8rem; }
  .sp-dash__bar-row { grid-template-columns: 5.5rem 1fr 3rem; gap: var(--space-3); }
  .sp-dash__feed { margin-top: 0; }
  .sp-challenges__list { grid-template-columns: 1fr; }
  .sp-challenges__num { font-size: var(--text-2xl); }
  .sp-approach__sidebar { flex-direction: column; }
  .sp-detail__summary { grid-template-columns: 2rem 1fr auto; }
  .sp-detail__icon { display: none; }
  .sp-detail__body { padding-left: calc(2rem + var(--space-4)); }
  /* Scope rows: drop the big index column so the icon + text keep room. */
  .sp-scope__summary { grid-template-columns: auto 1fr auto; gap: var(--space-4); padding: var(--space-5) var(--space-1); }
  .sp-scope__num { display: none; }
  .sp-scope__icon { width: 2.75rem; height: 2.75rem; }
  .sp-scope__icon svg { width: 1.35rem; height: 1.35rem; }
  .sp-scope__title { font-size: var(--text-lg); }
  .sp-scope__toggle { width: 2.5rem; height: 2.5rem; }
  .sp-scope__detail { padding-left: calc(2.75rem + var(--space-4)); padding-right: 0; }
  .sp-outcomes__grid { grid-template-columns: 1fr; }
  .sp-outcomes__item--tinted { background-color: var(--clr-white); border-top: 1px solid var(--clr-line); }
  .sp-faq__question { font-size: var(--text-lg); padding-top: var(--space-5); padding-bottom: var(--space-5); }
  .sp-crosslinks__grid { grid-template-columns: 1fr 1fr; }
  .sp-cta__main { padding: var(--space-7); }
  .sp-cta__aside { padding: var(--space-7); }

  .ab-philosophy__quote { font-size: var(--text-xl); }
  .ab-reasons__grid { grid-template-columns: 1fr; }
  .ab-approach__pillar { padding-left: var(--space-5); }
  .ab-faq__question { font-size: var(--text-md); }

  .ind-panel__visual { min-height: 12rem; }
  .ind-help__grid { grid-template-columns: 1fr; }
  .ind-help__item { border-left: 0; border-top: 1px solid var(--clr-line-dark); padding: var(--space-5) 0; }
  .ind-help__item--first { border-top: 0; padding-top: 0; }

  .ct-offices__grid { grid-template-columns: 1fr; }
  .ct-form-card { padding: var(--space-5); }
  .ct-faq__question { font-size: var(--text-md); }

  .legal-body { grid-template-columns: 1fr; }
  .legal-toc { position: static; display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-6); border-bottom: 1px solid var(--clr-line); margin-bottom: var(--space-6); }
  .legal-toc__link { border-left: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--clr-line); border-radius: var(--radius-pill); font-size: var(--text-xs); }
  .legal-toc__link--active { border-color: var(--clr-primary); background-color: var(--clr-tint); }

  .util-page__ring { width: 18rem; height: 18rem; }
  .util-page__code { font-size: var(--text-4xl); }
  .util-page__title { font-size: var(--text-2xl); }
}

/* --- mobile_portrait --- */
@media (max-width: 478px) {
  .site-header__brand { width: 9rem; }

  .card { padding: var(--space-5); }

  .kpi-grid { grid-template-columns: 1fr; }

  .faq__question { padding: var(--space-4) var(--space-5); font-size: var(--text-md); }
  .faq__answer { padding-right: var(--space-5); padding-bottom: var(--space-5); padding-left: var(--space-5); }

  .trust__item { min-width: 7rem; }

  .rtm__card { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .rtm__icon { width: 1rem; height: 1rem; }
  .rtm__name { font-size: var(--text-2xs); }
  .rtm__sub { display: none; }
  .rtm__badge { width: 1.25rem; height: 1.25rem; }

  .sp-audience__badge { width: 100%; }
  .sp-crosslinks__grid { grid-template-columns: 1fr; }
  .sp-outcomes__item { padding: var(--space-5); }

  .ab-people__card { width: 15rem; }

  .ct-form-card { padding: var(--space-4); }

  .legal-prose__h2 { font-size: var(--text-lg); }
  .legal-header__title { font-size: var(--text-2xl); }

  .util-page__ring { width: 14rem; height: 14rem; }
  .util-page__logo { width: 8rem; }
  .util-page__actions { flex-direction: column; align-items: stretch; width: 100%; }
}

/* --------------------------------------------------------------------------
   17. REDUCED MOTION
   UI/UX spec §10: "Motion shall respect reduced-motion user preferences."
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
  .reveal { opacity: 1; transform: none; }
  .sp-dash__bar-fill { transition: none; }
  .sp-topo__pulse,
  .rtm__pulse,
  .rtm__arrow-pulse { display: none; }
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__actions,
  .hero__strip,
  .hero__mesh,
  .hero__veil,
  .hero__glow,
  .hero__media { animation: none; opacity: 1; }
  /* No word swap without motion: the h1 just reads "…gives your business
     certainty". The reserved width stays, so the line does not move if the
     preference is changed mid-visit. */
}

/* --------------------------------------------------------------------------
   18. PROTOTYPE-ONLY SCROLL REVEAL
   Approved motion (UI/UX §11: fade-in on scroll, staggered reveal).
   Driven by throwaway JS in index.html — REBUILD as a native Bricks
   Interaction after conversion (R11.1) and delete this block.
   -------------------------------------------------------------------------- */
/* Marker class only. The prototype motion layer sets the hidden state at
   runtime (gsap.set), so a JS-free render (mock/dist, and the converted page
   before Interactions are rebuilt) shows everything rather than nothing. */
.reveal { opacity: 1; transform: translateY(0); }


/* --------------------------------------------------------------------------
   18. CONTACT MODAL + FORM
   Hidden by default so the JS-free build does not render a stray form; the
   prototype layer toggles .modal--open. Becomes a Bricks Popup on conversion.
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-5);
  overflow: auto;
}
.modal--open { display: flex; }

.modal__scrim {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--clr-ink-deep);
  opacity: 0.72;
}

.modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 34rem;
  margin-top: auto;
  margin-bottom: auto;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--clr-white);
  box-shadow: var(--shadow-lg);
}

.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon);
  height: var(--size-icon);
  padding: var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--clr-muted);
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.modal__close:hover { background-color: var(--clr-bg); color: var(--clr-ink); }
.modal__close:focus-visible { box-shadow: var(--shadow-focus); }

.modal__title {
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
}

.modal__lead {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--clr-muted);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.form__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--clr-ink);
}

.form__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--clr-ink);
  background-color: var(--clr-white);
  transition: border-color var(--speed) var(--ease);
}
.form__input:focus-visible { border-color: var(--clr-primary); box-shadow: var(--shadow-focus); }

.form__select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--clr-ink);
  background-color: var(--clr-white);
}
.form__select:focus-visible { border-color: var(--clr-primary); box-shadow: var(--shadow-focus); }

.form__textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--clr-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--clr-ink);
  background-color: var(--clr-white);
  transition: border-color var(--speed) var(--ease);
}
.form__textarea:focus-visible { border-color: var(--clr-primary); box-shadow: var(--shadow-focus); }

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.form__note {
  flex-grow: 1;
  font-size: var(--text-xs);
  color: var(--clr-grey);
}