/* ==========================================================================
   Shwastik Tech Solutions — Design System
   --------------------------------------------------------------------------
   A single source of truth for the public marketing site.
   Register: enterprise navy / graphite. Hairlines over shadows, typographic
   hierarchy over decoration, one signal colour used sparingly.

   Contents
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Buttons & links
     06  Header / navigation
     07  Section furniture (eyebrow, heading blocks, rules)
     08  Cards & grids
     09  Statistics & metrics
     10  Logo wall / marquee
     11  Editorial (quote, prose, media)
     12  Steps, accordion, tabs
     13  Forms
     14  Night surfaces & CTA band
     15  Footer
     16  Motion & reveal
     17  Utilities
     18  Framework overrides (Bootstrap)
     19  Print
   ========================================================================== */

/* --------------------------------------------------------------------------
   01  Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink ---------------------------------------------------------------- */
  --ink:            #0f172a;
  --ink-soft:       #1e293b;
  --muted:          #64748b;
  --muted-strong:   #475569;   /* supporting copy: ledes, intros */
  --muted-soft:     #94a3b8;

  /* Surfaces ----------------------------------------------------------- */
  --paper:          #ffffff;
  --surface:        #f8fafc;
  --surface-2:      #f1f5f9;

  /* Night (inverted sections) ------------------------------------------ */
  --night:          #0b1220;
  --night-2:        #111c2e;
  --night-rule:     rgba(255, 255, 255, 0.12);
  --night-muted:    #94a3b8;

  /* Rules -------------------------------------------------------------- */
  --rule:           #e2e8f0;
  --rule-strong:    #cbd5e1;

  /* Signal ------------------------------------------------------------- */
  --accent:         #1d4ed8;
  --accent-deep:    #1e3a8a;
  --accent-bright:  #2563eb;
  --accent-wash:    #eff4ff;
  --accent-rule:    #bfdbfe;

  /* Support (charts, status — used sparingly) --------------------------- */
  --positive:       #047857;
  --positive-wash:  #ecfdf5;
  --warn:           #b45309;

  /* Legacy brand tokens kept so untouched templates don't break.
     Remapped to the enterprise palette rather than left as magenta. */
  --primary:        #1d4ed8;
  --secondary:      #0f172a;
  --dark:           #0f172a;
  --light:          #ffffff;
  --gray:           #f8fafc;
  --bg-light:       #ffffff;
  --text-dark:      #0f172a;
  --text-light:     #64748b;

  /* Type --------------------------------------------------------------- */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --step--1:  clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0:   clamp(0.9375rem, 0.91rem + 0.14vw, 1.0625rem);
  --step-1:   clamp(1.0625rem, 1.01rem + 0.28vw, 1.25rem);
  --step-2:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-3:   clamp(1.5rem, 1.31rem + 0.94vw, 2rem);
  --step-4:   clamp(1.875rem, 1.45rem + 2.13vw, 3rem);
  --step-5:   clamp(2.25rem, 1.55rem + 3.5vw, 4rem);
  --step-6:   clamp(2.625rem, 1.6rem + 5.1vw, 5rem);

  /* Label sizes. Uppercase mono with wide tracking needs more size than
     lowercase text to stay legible — 10px is the hard floor, 12px is the
     default for anything that carries meaning. */
  --label:    0.75rem;     /* 12px — eyebrows, section labels, footer titles */
  --label-sm: 0.6875rem;   /* 11px — metadata, indices, chips */
  --label-xs: 0.625rem;    /* 10px — floor; only where space is genuinely tight */

  /* Background grid. --rule (#e2e8f0) was too pale to read once the pattern
     was also masked and set at 0.6 opacity; these are tuned to be visible
     without competing with content. */
  --grid-line:       rgba(15, 23, 42, 0.11);
  --grid-line-night: rgba(255, 255, 255, 0.10);
  --grid-size:       76px;

  /* Space -------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-y: clamp(72px, 8vw, 128px);
  --gutter:    clamp(20px, 3.5vw, 72px);

  /* Shape -------------------------------------------------------------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Elevation — deliberately restrained ---------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.03), 0 12px 28px -14px rgba(15, 23, 42, 0.18);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.04), 0 28px 56px -24px rgba(15, 23, 42, 0.24);

  /* Motion ------------------------------------------------------------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  140ms;
  --dur:       220ms;
  --dur-slow:  420ms;

  /* Frame -------------------------------------------------------------- */
  /* Fluid frame: the shell spans the viewport and gutters do the breathing.
     Line length is governed per-element (ch-based caps) rather than by a
     centred column, so text stays readable on ultrawide displays. */
  --container: 100%;
  --container-wide: 100%;
  --container-prose: 68ch;
  --header-h: 72px;
}

/* --------------------------------------------------------------------------
   02  Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: hidden;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

::selection {
  background: var(--ink);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-7) 0;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   03  Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--step-5);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 600;
}

h2, .h2 {
  font-size: var(--step-4);
  line-height: 1.1;
  letter-spacing: -0.026em;
}

h3, .h3 {
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: -0.018em;
}

h4, .h4 {
  font-size: var(--step-1);
  line-height: 1.35;
  letter-spacing: -0.012em;
}

h5, .h5 {
  font-size: var(--step-0);
  line-height: 1.45;
  letter-spacing: -0.008em;
  font-weight: 600;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.display {
  font-size: var(--step-6);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 600;
}

/* The lede is the bridge between a headline and body copy, so it takes the
   display face rather than the text face: headline and intro then speak with
   one voice and the switch to Inter marks where body copy begins.

   It sets no font-size of its own — it inherits body size deliberately, so the
   distinction is carried by face, colour and measure rather than by scale. */
.lede {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.013em;
  color: var(--muted-strong);
  max-width: 54ch;
  text-wrap: pretty;
}

.text-muted-ink { color: var(--muted) !important; }
.text-ink { color: var(--ink) !important; }

strong, b { font-weight: 600; }

a {
  color: var(--ink);
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}

a:hover { color: var(--accent); }

/* Mono label — the workhorse for eyebrows, indices and metadata */
.mono {
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-feature-settings: "tnum" 1;
}

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --------------------------------------------------------------------------
   04  Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide { max-width: var(--container-wide); }
.wrap--prose { max-width: var(--container-prose); }

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight { padding-block: clamp(48px, 5vw, 80px); }
.section--tint  { background: var(--surface); }
.section--tint-2 { background: var(--surface-2); }

.section--ruled { border-top: 1px solid var(--rule); }
.section--ruled-b { border-bottom: 1px solid var(--rule); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

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

.split {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--40-60 { grid-template-columns: 4fr 6fr; }
  .split--60-40 { grid-template-columns: 6fr 4fr; }
  .split--sticky > :first-child { position: sticky; top: calc(var(--header-h) + 40px); }
}

/* --------------------------------------------------------------------------
   05  Buttons & links
   -------------------------------------------------------------------------- */
/* The base rule must stay at a single class of specificity (0,1,0). Adding
   `a.btn` here would raise it to (0,1,1) and silently outrank every
   `.btn--*` modifier below, which only set custom properties. */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* Bootstrap's `.btn:hover` and `.btn:first-child:active` set background-color
   and border-color from `--bs-btn-hover-bg` / `--bs-btn-active-bg`, which its
   own base rule never defines. Those resolve to `unset` (transparent) and
   outrank the base rule above, so every interactive state has to re-assert the
   painted values from our tokens. */
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
  background: var(--btn-bg);
  border-color: var(--btn-bd);
  color: var(--btn-fg);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active { transform: translateY(0); box-shadow: none; }

.btn i, .btn svg { font-size: 0.9em; }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-bd: var(--accent);
  --btn-fg: #fff;
}
.btn--primary:hover { --btn-bg: var(--accent-deep); --btn-bd: var(--accent-deep); }

.btn--ink { --btn-bg: var(--ink); --btn-bd: var(--ink); --btn-fg: #fff; }
.btn--ink:hover { --btn-bg: #000; --btn-bd: #000; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-bd: var(--rule-strong);
  --btn-fg: var(--ink);
}
.btn--ghost:hover {
  --btn-bd: var(--ink);
  --btn-bg: transparent;
  box-shadow: none;
}

.btn--on-night {
  --btn-bg: #fff;
  --btn-bd: #fff;
  --btn-fg: var(--ink);
}
.btn--on-night:hover { --btn-bg: #e2e8f0; --btn-bd: #e2e8f0; }

.btn--ghost-night {
  --btn-bg: transparent;
  --btn-bd: var(--night-rule);
  --btn-fg: #fff;
}
.btn--ghost-night:hover { --btn-bd: rgba(255,255,255,0.5); box-shadow: none; }

.btn--sm { padding: 10px 16px; font-size: 0.875rem; }
.btn--lg { padding: 16px 28px; font-size: 1rem; }
.btn--block { width: 100%; }

/* Text link with a travelling arrow — replaces "Learn more →" buttons */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.link-arrow i,
.link-arrow .arrow {
  font-size: 0.8em;
  transition: transform var(--dur) var(--ease-out);
}

.link-arrow:hover { color: var(--accent); border-color: var(--accent); }
.link-arrow:hover i,
.link-arrow:hover .arrow { transform: translateX(4px); }

.link-arrow--accent { color: var(--accent); border-color: var(--accent-rule); }

/* --------------------------------------------------------------------------
   06  Header / navigation
   -------------------------------------------------------------------------- */
/* The blur lives on ::before, never on .site-header itself: a backdrop-filter
   (like transform or perspective) makes an element a containing block for
   fixed-position descendants, which would collapse the mobile drawer into the
   header's own 72px box instead of the viewport. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  transition: background-color var(--dur) var(--ease);
}

.site-header.is-stuck { border-bottom-color: var(--rule); }
.site-header.is-stuck::before { background: rgba(255, 255, 255, 0.92); }

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}

.brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Hairline between mark and wordmark — a standard lockup device that stops
   the emblem and the type reading as two unrelated elements. */
.brand__lockup {
  display: block;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
}

.brand__suffix {
  display: block;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: var(--label-xs);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .brand { gap: 9px; }
  .brand img { width: 36px; height: 36px; }
  .brand__lockup { padding-left: 9px; }
  .brand__name { font-size: 1rem; }
  .brand__suffix { font-size: var(--label-xs); letter-spacing: 0.16em; }
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav { display: flex; align-items: center; }

/* The drawer CTA is mobile-only; the header keeps its own on desktop */
.site-nav > .btn { display: none; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 450;
  color: var(--ink-soft);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav__link:hover { color: var(--ink); background: var(--surface-2); }

.nav__link.is-active { color: var(--ink); font-weight: 550; }

.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 1px;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
}

.nav__caret {
  font-size: var(--label-sm);
  color: var(--muted-soft);
  transition: transform var(--dur) var(--ease);
}

.nav__item { position: relative; }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

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

/* Mega menu ----------------------------------------------------------------
   The panel is anchored to the header frame, not to the trigger, so it can
   never overflow the viewport at awkward desktop widths. */
@media (min-width: 1024px) {
  .nav__item--has-menu { position: static; }
}

.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  /* The header frame is fluid; the panel itself should not be */
  max-width: 940px;
  transform: translateY(-6px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out), visibility var(--dur);
}

.nav__item.is-open .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .mega__grid { grid-template-columns: repeat(2, 1fr); }
}

.mega__item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
  transition: background-color var(--dur) var(--ease);
}

.mega__item:hover { background: var(--surface); color: var(--ink); }

.mega__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--accent);
  font-size: 0.8125rem;
}

.mega__item:hover .mega__icon { border-color: var(--accent-rule); background: var(--accent-wash); }

.mega__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1.3;
  margin-bottom: 2px;
}

.mega__desc {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.45;
}

.mega__foot {
  margin-top: 4px;
  padding: 12px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Mobile nav --------------------------------------------------------------- */
.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  cursor: pointer;
  place-items: center;
  color: var(--ink);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after  { top: 5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle { display: grid; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    padding: var(--space-5) var(--gutter) calc(var(--space-8) + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out), visibility var(--dur);
  }

  .site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__link {
    padding: 15px 0;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    justify-content: space-between;
    min-height: 52px;
  }

  .nav__link:hover { background: transparent; }
  .nav__link.is-active::after { display: none; }
  .nav__link.is-active { color: var(--accent); }
  .nav__caret { font-size: 0.7rem; }

  /* Direct contact at the foot of the drawer — on a phone this is more useful
     than a second copy of the navigation. */
  .nav-contact {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
    display: grid;
    gap: var(--space-3);
  }

  .nav-contact__label {
    font-family: var(--font-mono);
    font-size: var(--label-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-soft);
  }

  .nav-contact a {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375rem;
    color: var(--ink);
    text-decoration: none;
    min-height: 44px;
  }

  .nav-contact a i { color: var(--muted); font-size: 0.8125rem; width: 18px; text-align: center; }

  .mega {
    position: static;
    transform: none;
    width: auto;
    border: 0;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    background: transparent;
  }

  .nav__item.is-open .mega { display: block; transform: none; }
  .mega__grid { grid-template-columns: 1fr; padding-block: var(--space-2); }
  .mega__item { padding: 10px 0 10px 8px; }
  .mega__foot { display: none; }

  /* Hide the wrapper, not just its button: an empty flex item would still
     claim the right-hand slot under space-between and push the toggle inward. */
  .header-actions { display: none; }
  .site-nav .btn { display: inline-flex; width: 100%; margin-top: var(--space-6); }
}

/* The contact block only exists inside the mobile drawer */
@media (min-width: 1024px) {
  .nav-contact { display: none; }
}

body.nav-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   07  Section furniture
   -------------------------------------------------------------------------- */
/* flex-start (not center) so the rule stays on the first line when the label
   wraps on narrow screens, instead of floating between the two lines. */
.eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-5);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  flex-shrink: 0;
  margin-top: 0.8em;
  background: var(--rule-strong);
}

@media (max-width: 480px) {
  .eyebrow::before { width: 16px; }
}

.eyebrow--plain::before { display: none; }
.eyebrow--accent { color: var(--accent); }
.eyebrow--accent::before { background: var(--accent-rule); }
.eyebrow--night { color: var(--night-muted); }
.eyebrow--night::before { background: var(--night-rule); }

.section-head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: clamp(40px, 5vw, 72px);
}

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    align-items: end;
    gap: clamp(32px, 6vw, 96px);
  }
}

.section-head h2 { margin: 0; max-width: 22ch; }
.section-head .lede { margin: 0; }

.section-head--center {
  text-align: center;
  justify-items: center;
  max-width: 46rem;
  margin-inline: auto;
}

.section-head--center h2 { max-width: 24ch; }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule--night { background: var(--night-rule); }

/* --------------------------------------------------------------------------
   08  Cards & grids
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* Same reasoning as .logo-wall: borders on the cells, so a partial last row
   leaves nothing to paint rather than a grey block. */
.grid--tight { gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.grid--tight > * {
  background: var(--paper);
  border-radius: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.card--hover:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card--flat { background: var(--surface); border-color: transparent; }
.card--pad-lg { padding: clamp(28px, 4vw, 48px); }

.card__index {
  font-family: var(--font-mono);
  font-size: var(--label-sm);
  letter-spacing: 0.12em;
  color: var(--muted-soft);
  margin-bottom: var(--space-5);
}

.card h3 { margin-bottom: var(--space-3); }

.card p {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.62;
  margin-bottom: 0;
}

.card__foot { margin-top: auto; padding-top: var(--space-5); }

/* Icon: a hairline square, not a gradient blob */
.icon-tile {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  margin-bottom: var(--space-5);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.card--hover:hover .icon-tile,
.card:hover .icon-tile {
  border-color: var(--accent-rule);
  background: var(--accent-wash);
  color: var(--accent);
}

.icon-tile--night {
  border-color: var(--night-rule);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

/* Feature list rows separated by hairlines instead of boxed cards */
.rows { border-top: 1px solid var(--rule); }

.row-item {
  display: grid;
  gap: var(--space-4);
  padding-block: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
  align-items: start;
}

@media (min-width: 800px) {
  .row-item { grid-template-columns: 5rem minmax(0, 20rem) minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: baseline; }
}

.row-item__index { font-family: var(--font-mono); font-size: var(--label-sm); letter-spacing: 0.12em; color: var(--muted-soft); }
.row-item h3 { margin: 0; font-size: var(--step-1); }
.row-item p { margin: 0; color: var(--muted); font-size: 0.9375rem; }

.row-item--link { text-decoration: none; color: inherit; transition: background-color var(--dur) var(--ease); }
.row-item--link:hover { color: inherit; }
.row-item--link:hover h3 { color: var(--accent); }

/* Tag / chip */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: var(--label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  white-space: nowrap;
}

/* Lives in the system, not a page: used by contact, case studies and the
   shared CTA partial as well as the homepage. */
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--positive);
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}

.tag--accent { color: var(--accent); background: var(--accent-wash); border-color: var(--accent-rule); }
.tag--live { color: var(--positive); background: var(--positive-wash); border-color: #a7f3d0; }
.tag--night { color: var(--night-muted); background: rgba(255,255,255,0.05); border-color: var(--night-rule); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Checklist */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.checks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.checks li::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  border-radius: 50%;
  border: 1px solid var(--accent-rule);
  background-color: var(--accent-wash);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231d4ed8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.8'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

.checks--night li { color: rgba(255, 255, 255, 0.8); }
.checks--night li::before {
  border-color: var(--night-rule);
  background-color: rgba(255, 255, 255, 0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.8'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   09  Statistics & metrics
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.stat {
  padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 32px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 10px;
}

.stat__label {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.45;
  display: block;
}

.stat__note {
  font-family: var(--font-mono);
  font-size: var(--label-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-soft);
  display: block;
  margin-top: 6px;
}

.stats--night { border-color: var(--night-rule); }
.stats--night .stat { border-color: var(--night-rule); }
.stats--night .stat__value { color: #fff; }
.stats--night .stat__label { color: var(--night-muted); }
.stats--night .stat__note { color: rgba(255,255,255,0.4); }

/* --------------------------------------------------------------------------
   10  Logo wall / marquee
   -------------------------------------------------------------------------- */
/* Retained for the day real logo assets land — drop <img>s into .logo-wall__cell */
/* Hairlines come from the cells' own right/bottom borders, not from a gap that
   exposes a container background. With auto-fit the last row is often partial,
   and the gap technique paints those empty tracks as a solid grey void. */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
}

.logo-wall__cell {
  background: var(--paper);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  place-items: center;
  padding: clamp(20px, 3vw, 32px);
  min-height: 96px;
}

/* Constrain on BOTH axes: the wall mixes square crests with wide wordmarks,
   and height alone would let a 4:1 wordmark run three times the width of a
   square emblem. */
.logo-wall__cell img {
  max-height: 44px;
  max-width: 132px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.logo-wall__cell:hover img { filter: grayscale(0); opacity: 1; }


@media (max-width: 480px) {
  .logo-wall__cell img { max-height: 36px; max-width: 108px; }
}

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
  display: flex;
  gap: clamp(40px, 6vw, 80px);
  width: max-content;
  animation: marquee 42s linear infinite;
  align-items: center;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee__item {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   11  Editorial
   -------------------------------------------------------------------------- */
.quote {
  border-left: 2px solid var(--ink);
  padding-left: clamp(20px, 3vw, 36px);
  margin: 0;
}

.quote__text {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 var(--space-5);
  text-wrap: pretty;
}

.quote__by { display: flex; align-items: center; gap: 12px; }
.quote__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.quote__name { font-size: 0.875rem; font-weight: 550; color: var(--ink); line-height: 1.3; }
.quote__role { font-size: 0.8125rem; color: var(--muted); line-height: 1.3; }

.quote--night { border-left-color: rgba(255,255,255,0.4); }
.quote--night .quote__text { color: #fff; }
.quote--night .quote__name { color: #fff; }
.quote--night .quote__role { color: var(--night-muted); }

.figure {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}

.figure img { width: 100%; display: block; }

.figure__cap {
  padding: 14px 18px;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--muted);
  background: var(--paper);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.prose { max-width: var(--container-prose); }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { color: var(--ink-soft); line-height: 1.72; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-rule); }
.prose img { border-radius: var(--r); border: 1px solid var(--rule); margin-block: 2em; }
.prose blockquote {
  margin: 2em 0;
  padding-left: 1.4em;
  border-left: 2px solid var(--accent);
  font-size: var(--step-1);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   12  Steps, accordion, tabs
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
  border-top: 1px solid var(--rule);
}

.step {
  display: grid;
  gap: var(--space-3);
  padding-block: clamp(28px, 3.5vw, 44px);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

@media (min-width: 800px) {
  .step { grid-template-columns: 6rem minmax(0, 18rem) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
}

.step__num {
  font-family: var(--font-mono);
  font-size: var(--label-sm);
  letter-spacing: 0.14em;
  color: var(--muted-soft);
  padding-top: 6px;
}

.step h3 { margin: 0; font-size: var(--step-2); letter-spacing: -0.02em; }
.step p  { margin: 0; color: var(--muted); }

.step__meta {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Accordion */
.accordion-list { border-top: 1px solid var(--rule); }

.acc {
  border-bottom: 1px solid var(--rule);
}

.acc__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: clamp(20px, 2.4vw, 28px) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 550;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}

.acc__trigger:hover { color: var(--accent); }

.acc__sign {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  margin-top: 2px;
}

.acc__sign::before,
.acc__sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.5px;
  background: var(--muted);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.acc.is-open .acc__sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc.is-open .acc__sign::before,
.acc.is-open .acc__sign::after { background: var(--accent); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.acc.is-open .acc__panel { grid-template-rows: 1fr; }

.acc__panel > div { overflow: hidden; }

.acc__body {
  padding-bottom: clamp(20px, 2.4vw, 28px);
  color: var(--muted);
  max-width: 68ch;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  padding: 12px 16px;
  background: none;
  border: 0;
  font-family: var(--font-text);
  font-size: 0.9375rem;
  font-weight: 450;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.tab:hover { color: var(--ink); }

.tab.is-active { color: var(--ink); font-weight: 550; }

.tab.is-active::after {
  content: "";
  position: absolute;
  inset: auto 12px -1px;
  height: 1.5px;
  background: var(--ink);
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fade-in var(--dur-slow) var(--ease-out); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   13  Forms
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 8px; margin-bottom: var(--space-5); }

.field__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.field__hint { font-size: 0.75rem; color: var(--muted); }

.input,
.textarea,
.select {
  width: 100%;
  font-family: var(--font-text);
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance: none;
}

.textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
}

.input::placeholder,
.textarea::placeholder { color: var(--muted-soft); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.field-row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

.alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  margin-bottom: var(--space-5);
}

.alert--ok { border-color: #a7f3d0; background: var(--positive-wash); color: #065f46; }

/* --------------------------------------------------------------------------
   14  Night surfaces & CTA band
   -------------------------------------------------------------------------- */
.section--night,
.night {
  background: var(--night);
  color: #fff;
  position: relative;
}

.night h1, .night h2, .night h3, .night h4, .night h5 { color: #fff; }
.night p { color: rgba(255, 255, 255, 0.72); }
.night .lede { color: rgba(255, 255, 255, 0.78); }
/* Must exclude .btn — `.night a` is (0,1,1) and would outrank `.btn` (0,1,0),
   repainting every button label white regardless of its variant. */
.night a:not(.btn) { color: #fff; }
.night .rule { background: var(--night-rule); }

.night--grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line-night) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-night) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 30%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 0%, #000 30%, transparent 82%);
  opacity: 1;
  pointer-events: none;
}

.night > * { position: relative; z-index: 1; }

/* Closing CTA — copy and a direct-contact card, so the band converts rather
   than just repeating the navigation. */
.cta { position: relative; overflow: hidden; }

.cta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6%;
  width: min(760px, 62%);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(37, 99, 235, 0.20), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.cta__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

@media (min-width: 1000px) {
  .cta__grid { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
}

.cta__grid h2 { max-width: 20ch; margin: 0 0 var(--space-4); }
.cta__grid .lede { max-width: 50ch; }

.cta__assur {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--night-rule);
}

.cta__assur span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.58); }
.cta__assur i { font-size: var(--label-sm); color: rgba(255, 255, 255, 0.4); }

.cta__card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--night-rule);
  border-radius: var(--r-lg);
  padding: var(--space-3);
  box-shadow: 0 24px 64px -32px rgba(0, 0, 0, 0.85);
}

.cta__card-title {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--label-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  padding: 12px 14px 14px;
}

.cta__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}

.cta__row + .cta__row { margin-top: 2px; }
.cta__row:hover { background: rgba(255, 255, 255, 0.07); }

.cta__row-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--night-rule);
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8125rem;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.cta__row:hover .cta__row-icon { border-color: rgba(255, 255, 255, 0.34); color: #fff; }

.cta__row-label { display: block; font-family: var(--font-mono); font-size: var(--label-xs); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); margin-bottom: 3px; }
.cta__row-value { display: block; font-size: 0.9375rem; font-weight: 500; color: #fff; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; }
.cta__row-arrow { color: rgba(255, 255, 255, 0.3); font-size: 0.7rem; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.cta__row:hover .cta__row-arrow { transform: translateX(3px); color: #fff; }

.cta__note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--space-3);
  padding: 14px;
  border-top: 1px solid var(--night-rule);
  font-family: var(--font-mono);
  font-size: var(--label-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

/* --------------------------------------------------------------------------
   15  Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--night);
  color: #fff;
  /* The CTA band above is the same navy — without this the two merge */
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: clamp(56px, 6vw, 88px);
  padding-bottom: var(--space-6);
}

.footer-grid {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  padding-bottom: clamp(28px, 3.5vw, 48px);
}

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 2.2fr 1fr 1fr 1.4fr; }
}

.footer-brand { max-width: 32ch; }

.footer-brand__mark {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.footer-brand__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.3;
  color: #fff;
  margin: var(--space-5) 0 var(--space-3);
}

.footer-brand p { color: var(--night-muted); font-size: 0.875rem; line-height: 1.6; }

.footer-title {
  font-family: var(--font-mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-5);
}

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.footer-links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--dur) var(--ease);
}

.footer-links a:hover { color: #fff; }

.footer-social { display: flex; gap: 8px; margin-top: var(--space-5); }

.footer-social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--night-rule);
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.footer-social a:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); color: #fff; }

/* Sits last, beneath the wordmark. No rule above it — the wordmark already
   separates it from the link columns, and a second line mid-footer read as
   clutter. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  justify-content: space-between;
}

.footer-bottom p,
.footer-bottom a {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  text-decoration: none;
}

.footer-bottom a:hover { color: #fff; }

.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }

/* Oversized outlined wordmark closing the footer */
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21vw;
  line-height: 0.8;
  letter-spacing: -0.045em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.17);
  /* Tight above, breathing room below so the legal line is not crowded */
  margin: clamp(12px, 2vw, 28px) 0 clamp(16px, 2.2vw, 30px);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

@media (max-width: 640px) {
  .footer-wordmark { -webkit-text-stroke-width: 0.75px; }
}

/* Back to top */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  z-index: 900;
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { border-color: var(--ink); }

/* --------------------------------------------------------------------------
   16  Motion & reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* --------------------------------------------------------------------------
   17  Utilities
   -------------------------------------------------------------------------- */
.u-center { text-align: center; }
.u-right  { text-align: right; }
.u-mono   { font-family: var(--font-mono); }
.u-nowrap { white-space: nowrap; }
.u-max-40 { max-width: 40ch; }
.u-max-50 { max-width: 50ch; }
.u-max-60 { max-width: 60ch; }
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-7 { margin-top: var(--space-7); }
.u-mt-8 { margin-top: var(--space-8); }
.u-accent { color: var(--accent); }
.u-hide { display: none !important; }

@media (max-width: 767px) { .u-hide-sm { display: none !important; } }
@media (max-width: 1023px) { .u-hide-md { display: none !important; } }

/* Small-screen refinements ------------------------------------------------- */
@media (max-width: 799px) {
  /* The trailing arrow is a desktop affordance; stacked it reads as an orphan */
  .row-item > .link-arrow { display: none; }
}

@media (max-width: 480px) {
  .section-head { margin-bottom: var(--space-7); }
  .quote__text { font-size: var(--step-2); }
  .stat { padding: var(--space-5) var(--space-4); }
  .card { padding: var(--space-5); }
  .btn--lg { padding: 15px 22px; font-size: 0.9375rem; }
  /* Full-width CTAs read as deliberate on a phone, not as squeezed buttons */
  .hero__actions .btn,
  .cta__grid .cluster .btn { flex: 1 1 100%; }
}

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 2000;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}

.skip-link:focus { top: 16px; color: #fff; }

/* --------------------------------------------------------------------------
   18  Framework overrides (Bootstrap 5)
   Legacy templates still lean on Bootstrap's grid and components. Re-skin the
   pieces that carry visual weight so old and new markup read as one site.
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-primary:focus {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #fff !important;
  border-radius: var(--r-sm) !important;
  padding: 14px 22px;
  font-weight: 500;
  font-size: 0.9375rem;
  box-shadow: none !important;
  letter-spacing: -0.006em;
}

.btn-primary:hover {
  background: var(--accent-deep) !important;
  border-color: var(--accent-deep) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
}

.btn-outline-primary,
.btn-outline-light,
.btn-outline-wht {
  border-radius: var(--r-sm) !important;
  font-weight: 500;
  padding: 13px 21px;
  font-size: 0.9375rem;
}

.btn-lg { padding: 16px 28px !important; font-size: 1rem !important; border-radius: var(--r-sm) !important; }

/* Kill legacy gradient fills wherever they survive */
.btn-grad {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: #fff !important;
  border-radius: var(--r-sm) !important;
  font-weight: 500;
}

.btn-grad:hover { background: var(--accent-deep) !important; border-color: var(--accent-deep) !important; }

.text-primary { color: var(--accent) !important; }
.bg-primary { background-color: var(--accent) !important; }
.text-muted { color: var(--muted) !important; }

.card { border-radius: var(--r-lg); }

.badge { border-radius: var(--r-xs); font-weight: 500; letter-spacing: 0.01em; }

.dropdown-menu {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}

.dropdown-item { border-radius: var(--r-sm); font-size: 0.875rem; padding: 10px 12px; }
.dropdown-item:hover { background: var(--surface); color: var(--ink); }

.form-control, .form-select {
  border-radius: var(--r-sm);
  border-color: var(--rule-strong);
  padding: 12px 14px;
  font-size: 0.9375rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.breadcrumb { font-size: 0.8125rem; }

/* Bootstrap's centred .container is fixed-width at every breakpoint. The site
   frame is fluid, so make the legacy pages that still use it match .wrap. */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 100% !important;
  width: 100%;
  padding-inline: var(--gutter);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   19  Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .to-top, .cta, .marquee { display: none !important; }
  body { color: #000; background: #fff; }
  .section { padding-block: 24px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
}