/* ==========================================================================
   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-ink-deep: #08211e;      /* dark section background */

  /* --- 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-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;
  --size-header: 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); }

/* --------------------------------------------------------------------------
   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);
  background-color: var(--clr-tint);
  color: var(--clr-primary);
}
.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: 10.5rem;
  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; }

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

.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;
  font-size: var(--text-sm);
  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); }

/* --------------------------------------------------------------------------
   5. HERO — full-bleed photograph, left-aligned, 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);
}

/* Licensed stock, permitted by UI/UX spec §9 for technical subject matter.
   The generic-corporate genre it bans (handshakes, posed desks) is avoided.
   Sits behind a scrim so headline contrast never depends on the photograph. */
.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__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
}

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

/* 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);
}

.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; }


/* --------------------------------------------------------------------------
   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;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 21rem;
  padding: var(--space-6);
  overflow: hidden;
  border-radius: var(--radius-lg);
  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); }

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

.overlay-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  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); }

.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); }
.kpi__note { font-size: var(--text-sm); color: var(--clr-grey); }

/* --------------------------------------------------------------------------
   9. SPLIT — visual left, copy right (reference "Is your firm, future fit?")
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-9);
}

.split__visual {
  display: block;
  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);
}

.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)
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: var(--space-5);
}
.grid--four { grid-template-columns: repeat(auto-fit, minmax(17rem, 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)
   -------------------------------------------------------------------------- */
.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); }

.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); }

/* --------------------------------------------------------------------------
   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%;
  }

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

  .stagger { grid-template-columns: repeat(2, 1fr); }
  .overlay-card--offset { margin-top: 0; }

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

  .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); }
}

/* --- 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); }

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

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

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

  .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; }
}

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

  .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; }
}

/* --------------------------------------------------------------------------
   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; }
  .hero__eyebrow,
  .hero__title,
  .hero__lead,
  .hero__actions,
  .hero__strip,
  .hero__media { animation: none; }
}

/* --------------------------------------------------------------------------
   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-3);
  width: 100%;
  max-width: 46rem;
  margin-top: auto;
  margin-bottom: auto;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background-color: var(--clr-white);
  box-shadow: var(--shadow-lg);
}

.modal__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  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-2xl);
  letter-spacing: -0.02em;
}

.modal__lead {
  margin-bottom: var(--space-3);
  color: var(--clr-muted);
}

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

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

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

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

.form__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  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-3) var(--space-4);
  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-3) var(--space-4);
  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-4);
  margin-top: var(--space-2);
}

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