/* ==========================================================================
   Vyapari Solutions — Design System v3
   Editorial, hairline-led, quiet. Motion is used where it carries meaning
   and nowhere else: no ambient loops, no glow, no glass.

   Sections: 1 Tokens · 2 Reset · 3 Backdrop · 4 Layout · 5 Typography
             6 Buttons · 7 Topbar/Header/Nav · 8 Hero · 9 Components
            10 Page blocks · 11 Footer · 12 Dock · 13 Utilities
            14 Motion · 15 Responsive · 16 Print
   ========================================================================== */

/* 1 ─────────────────────────────────────────────────── DESIGN TOKENS ── */
/*
   The page is a MIX of light and dark bands, not a theme toggle. Two tones
   exist side by side and every component is written against the same token
   names, so the same card works on paper or on ink.

     .tone-light  warm paper — the reading surface, most of the page
     .tone-dark   ink — hero, the mid-page proof band, CTA panel, chrome

   `--sf-0 … --sf-5` is a surface ramp from page → raised, and it flips with
   the tone. Never hard-code a colour in a component; use the ramp.
*/
:root {
  /* Terracotta against navy — a complementary pair, so the colour lives in the
     surfaces themselves and not only in the accent. */
  --brand:     #C74B29;
  --brand-600: #AB3A21;

  /* Data-viz, used by the hero dashboard and nothing else */
  --data:      #D4714B;
  --data-2:    #D9A441;
  --data-3:    #7EA6D9;
  --emerald:   #D9A441;
  --rose:      #D2453C;

  --ring: rgba(199, 75, 41, .32);
  --shadow-sm: 0 1px 2px rgba(10, 16, 23, .06);
  --shadow:    0 12px 28px -18px rgba(10, 16, 23, .28);
  --shadow-lg: 0 26px 60px -32px rgba(10, 16, 23, .38);

  /* Geometry — tighter radii read as considered, not template */
  --r-sm: 4px;
  --r:    6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 18px;
  --r-pill: 999px;

  --pad: clamp(1.15rem, 4vw, 2rem);
  --sec: clamp(3.6rem, 7vw, 6.5rem);
  --maxw: 1180px;

  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 70px;
  color-scheme: light;
}

/* ── The two tones ─────────────────────────────────────────────────────── */
/* Paper is the default for the document; ink is opted into per band. */
/* Warm sand — a light band with real warmth in it, never white */
:root, .tone-light {
  --sf-0: #F0E6D6;   /* page */
  --sf-1: #EBDFCB;   /* band */
  --sf-2: #E5D4BD;   /* band, alternate */
  --sf-3: #F9F4EB;   /* raised: cards, panels */
  --sf-4: #FCF9F2;   /* raised, hovered */
  --sf-5: #D6C0A4;

  --line:   rgba(35, 40, 58, .16);
  --line-2: rgba(35, 40, 58, .26);
  --line-3: rgba(35, 40, 58, .4);

  --text:   #23283A;   /* navy-tinted ink ties the sand bands to the navy ones */
  --text-2: #545B6E;
  --text-3: #5F6577;

  --brass:     #A9371E;   /* terracotta, deepened to hold contrast on sand */
  --brass-2:   #922B16;
  --brass-dim: rgba(169, 55, 30, .24);
  --brand-300: #922B16;   /* links on sand */

  color-scheme: light;
  color: var(--text);
}

/* Bands and chrome that are always ink. Everything else inherits paper. */
.tone-dark,
.topbar, .site-header, .mega, .drawer,
.hero, .logo-strip,
.section--mute, .section--dark,
.cta-band, .site-footer, .dock {
  /* Deep navy-indigo, not black — a real hue, mid-dark, so the page never
     reads as a dark-mode site and never as monochrome. */
  --sf-0: #121E3A;
  --sf-1: #192648;
  --sf-2: #202F55;
  --sf-3: #283962;
  --sf-4: #344774;
  --sf-5: #445A88;

  --line:   rgba(216, 226, 245, .14);
  --line-2: rgba(216, 226, 245, .24);
  --line-3: rgba(216, 226, 245, .36);

  --text:   #EEF1F7;
  --text-2: #AEB8CC;
  --text-3: #8894AC;

  --brass:     #E7936A;
  --brass-2:   #EFAF8A;
  --brass-dim: rgba(231, 147, 106, .26);
  --brand-300: #EFAF8A;
  --rose:      #F08A80;

  color-scheme: dark;
  color: var(--text);
}

/* 2 ──────────────────────────────────────────────────────────── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--text);
  background: var(--sf-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 3px; border-radius: 3px; }
/* works over stone and over graphite */
::selection { background: rgba(191, 85, 53, .26); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #E7DECD; }
::-webkit-scrollbar-thumb { background: #BFB49D; border-radius: 0; border: 3px solid #E7DECD; }
::-webkit-scrollbar-thumb:hover { background: #A2957B; }

/* 3 ────────────────────────────────────────────────────────  BACKDROP ── */
/* A faint paper texture behind the light bands. Nothing here moves. */
.ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background: var(--sf-0); }
.ambient__mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 84% 2%, rgba(191, 85, 53, .07), transparent 70%),
    radial-gradient(52% 38% at 6% 10%, rgba(35, 40, 58, .06), transparent 72%);
}
.ambient__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(35, 40, 58, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 40, 58, .045) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.ambient__noise { display: none; }

/* 4 ─────────────────────────────────────────────────────────── LAYOUT ── */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.container-wide { max-width: 1320px; }
.container-narrow { max-width: 800px; }
.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: clamp(2.4rem, 4.5vw, 3.8rem); }
/* Band rhythm: paper → paper-alt → ink. `--soft` is the alternate paper,
   `--mute` and `--dark` are the ink bands that break the page up. */
.section--soft { background: var(--sf-2); border-block: 1px solid var(--line); }
.section--mute, .section--dark { background: var(--sf-1); }
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.g-auto-sm { grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); }
/* Asymmetric by default — a 50/50 split is the most template-looking layout there is */
.split { display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(1.8rem, 4vw, 4.5rem); align-items: center; }
.split--top { align-items: start; }
.grid > *, .split > * { min-width: 0; }
.stack > * + * { margin-top: 1rem; }
.flow > * + * { margin-top: clamp(.9rem, 2vw, 1.15rem); }

.h-scroll {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--pad);
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  padding-block: .4rem 1.1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--sf-5) transparent;
}
.h-scroll > * { flex: 0 0 clamp(250px, 74vw, 300px); scroll-snap-align: start; }
.h-scroll::-webkit-scrollbar { height: 6px; }
.h-scroll::-webkit-scrollbar-track { background: var(--sf-3); border: 0; border-radius: 0; }
.h-scroll::-webkit-scrollbar-thumb { background: var(--sf-5); border: 0; border-radius: 0; }

/* 5 ─────────────────────────────────────────────────────── TYPOGRAPHY ── */
h1, h2 {
  font-family: var(--font-display); font-weight: 600;
  line-height: 1.08; letter-spacing: -.012em; color: var(--text);
}
h3, h4, h5 { font-family: var(--font-body); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--text); }
h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); }
h2 { font-size: clamp(1.85rem, 3.3vw, 2.6rem); line-height: 1.12; }
h3 { font-size: 1.08rem; }
h4 { font-size: 1rem; }
p { color: var(--text-2); }
.lead { font-size: clamp(1.02rem, 1.4vw, 1.14rem); color: var(--text-2); line-height: 1.72; max-width: 62ch; }

.eyebrow {
  display: inline-flex; align-items: baseline; gap: .6rem;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}
.eyebrow::after {
  content: ""; align-self: center; width: 28px; height: 1px; background: var(--line-3);
}
.eyebrow--center { justify-content: center; }

/* Content sections carry a running index, set by CSS counter so no markup
   has to know its own number. Hero, CTA, panels and menus are exempt. */
main { counter-reset: sec; }
.eyebrow { counter-increment: sec; }
.eyebrow::before {
  content: counter(sec, decimal-leading-zero);
  color: var(--brass); font-weight: 500; letter-spacing: .06em;
}
.hero .eyebrow, .cta-band .eyebrow, .feature-media .eyebrow,
.mega .eyebrow, .logo-strip .eyebrow, .highlight-band .eyebrow { counter-increment: none; }
.hero .eyebrow::before, .cta-band .eyebrow::before, .feature-media .eyebrow::before,
.mega .eyebrow::before, .logo-strip .eyebrow::before, .highlight-band .eyebrow::before { content: none; }
.section-head { max-width: 46rem; position: relative; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: .9rem; }
.section-head .lead { margin-top: 1.05rem; }
.section-head--center .lead { margin-inline: auto; }
/* Heading left, standfirst right — the layout an editor would set */
.section-head--split {
  max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 0 clamp(2rem, 5vw, 4.5rem); align-items: end;
  padding-bottom: 1.6rem; border-bottom: 1px solid var(--line);
}
.section-head--split > .eyebrow { grid-column: 1 / -1; }
.section-head--split .lead { margin-top: 0; padding-bottom: .35rem; }

/* Figures — numerals set in the display serif read as considered, not generated */
.gradient-text, .figure { font-family: var(--font-display); color: var(--brass-2); font-weight: 600; }

.prose h2 { margin-top: 2.8rem; }
.prose h3 { margin-top: 2rem; font-size: 1.12rem; }
.prose p, .prose ul, .prose ol { margin-top: .95rem; }
.prose p { max-width: 66ch; }
.prose ul li, .prose ol li { position: relative; padding-left: 1.5rem; color: var(--text-2); margin-top: .5rem; max-width: 64ch; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .82em; width: 10px; height: 1px; background: var(--brass);
}
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; }
.prose ol li::before {
  content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: .06em;
  font-size: .74rem; font-family: var(--font-mono); color: var(--brass);
}
.prose strong { color: var(--text); font-weight: 600; }
.prose a:not(.btn) { color: var(--brand-300); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-3); }
.prose a:not(.btn):hover { text-decoration-color: currentColor; }

/* 6 ────────────────────────────────────────────────────────── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.25rem; border-radius: var(--r);
  font-weight: 550; font-size: .92rem; letter-spacing: -.005em;
  background: var(--brand); color: #fff;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .22s var(--ease); }
.btn:hover svg:last-child { transform: translateX(3px); }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-600); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .04); }
.btn--light { background: rgba(255, 255, 255, .07); color: var(--text); border-color: var(--line-2); }
.btn--light:hover { background: rgba(255, 255, 255, .12); border-color: var(--line-3); }
.btn--white { background: #F7F1E6; color: #23283A; }
.btn--white:hover { background: #fff; }
.btn--sm { padding: .5rem .9rem; font-size: .85rem; }
.btn--lg { padding: .92rem 1.5rem; font-size: .96rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 550; font-size: .88rem; color: var(--brand-300); }
.link-arrow svg { width: 14px; height: 14px; transition: transform .22s var(--ease); }
.link-arrow:hover svg, .card:hover .link-arrow svg, .sector-card:hover .link-arrow svg { transform: translateX(4px); }

/* 7 ──────────────────────────────────────────── TOPBAR · HEADER · NAV ── */
.skip-link {
  position: absolute; left: 50%; top: -80px; transform: translateX(-50%); z-index: 200;
  background: var(--brand); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 6px 6px; font-weight: 600;
}
.skip-link:focus { top: 0; }

/* sits over the ink header, so it keeps the light terracotta regardless of tone */
.progress-bar { position: fixed; inset: 0 auto auto 0; height: 2px; width: 0%; z-index: 120; background: var(--brass); }

.topbar {
  position: relative; z-index: 101; font-size: .76rem; font-family: var(--font-mono);
  /* 500 is the heaviest weight IBM Plex Mono is loaded at. Asking for 600 here
     without adding it to the font request would get a synthesised bold, which
     smears a monospace face badly. */
  font-weight: 500; letter-spacing: .01em; color: var(--text);
  background: var(--sf-1); border-bottom: 1px solid var(--line);
}
/* The bar is a single strip by definition — a phone number broken across two
   lines reads as a fault, so nothing here wraps. If the viewport runs out of
   room the message truncates and the links, which are the useful half, keep
   their full width. */
.topbar .container { display: flex; align-items: center; gap: 1rem; min-height: 38px; flex-wrap: nowrap; }
.topbar__msg {
  display: inline-flex; align-items: center; gap: .5rem; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__msg .topbar__extra { overflow: hidden; text-overflow: ellipsis; }
.topbar__msg svg { width: 13px; height: 13px; color: var(--brass); flex: none; }
.topbar__links { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; flex: none; }
.topbar__links a { display: inline-flex; align-items: center; gap: .38rem; white-space: nowrap; transition: color .18s; }
.topbar__links a:hover { color: var(--brass); }
.topbar__links svg { width: 13px; height: 13px; color: var(--text-2); }
.topbar__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brass); flex: none; }

.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(27, 35, 56, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.site-header.is-stuck { border-bottom-color: var(--line); background: rgba(27, 35, 56, .97); }
.site-header .container { display: flex; align-items: center; gap: 1.25rem; }

.brand { display: inline-flex; align-items: center; gap: .58rem; font-weight: 600; font-size: 1.08rem; letter-spacing: -.02em; color: var(--text); }
/* The supplied wordmark is a 6:1 horizontal lockup, not a square badge — its
   height is set inline per placement and the width follows the artwork. */
.brand__mark { height: 30px; width: auto; flex: none; display: block; }
.brand__name b { font-weight: 600; }
.brand__name span { color: var(--text-2); font-weight: 400; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .1rem; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .75rem; border-radius: var(--r-sm);
  font-size: .9rem; font-weight: 450; color: var(--text-2);
  transition: color .18s;
}
.nav__link::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .22rem; height: 1px;
  background: var(--brass); scale: 0 1; transform-origin: left; transition: scale .22s var(--ease);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { scale: 1 1; }
.nav__link[aria-current="page"] { color: var(--text); }
.nav__link .caret { width: 12px; height: 12px; opacity: .55; transition: transform .22s; }
.nav__item:hover .caret, .nav__item:focus-within .caret { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 1px); left: 50%; translate: -50% 0;
  width: min(940px, calc(100vw - 2rem));
  background: var(--sf-2); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .22s var(--ease), visibility .18s;
}
.mega--sm { width: min(600px, calc(100vw - 2rem)); grid-template-columns: repeat(2, 1fr); }
.nav__item:hover > .mega, .nav__item:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }
.mega::before { content: ""; position: absolute; inset: -12px 0 auto; height: 14px; }
.mega__col h4 { font-size: .68rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.mega__link {
  display: flex; gap: .65rem; align-items: flex-start; padding: .45rem .1rem;
  transition: color .18s;
}
.mega__link i { display: grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--text-3); transition: color .18s; margin-top: .1rem; }
.mega__link:hover i { color: var(--brass); }
.mega__link i svg { width: 15px; height: 15px; }
.mega__link b { display: block; font-size: .87rem; font-weight: 550; color: var(--text); line-height: 1.35; }
.mega__link small { display: block; font-size: .76rem; color: var(--text-3); line-height: 1.45; margin-top: .1rem; }
.mega__promo {
  grid-column: span 1; border-radius: var(--r); padding: 1.25rem; position: relative;
  background: var(--sf-3); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
}
.mega__promo svg { width: 18px; height: 18px; color: var(--brass); }
.mega__promo h5 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text); line-height: 1.25; margin-top: .7rem; }
.mega__promo p { font-size: .82rem; color: var(--text-3); margin-top: .45rem; }

.header-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--line-2); color: var(--text-2); cursor: pointer;
  transition: border-color .18s, color .18s;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-3); }
.icon-btn svg { width: 18px; height: 18px; }
.nav-toggle { display: none; }

.drawer {
  position: fixed; inset: 0; z-index: 130; display: none;
  background: var(--sf-0);
  padding: 1rem var(--pad) 2.5rem; overflow-y: auto;
}
.drawer.is-open { display: block; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; height: calc(var(--header-h) - 10px); }
.drawer__nav { margin-top: 1.2rem; display: grid; }
.drawer__nav > a, .acc__btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: .95rem .1rem; font-weight: 550; font-size: 1.02rem;
  border-bottom: 1px solid var(--line); background: none; border-top: 0; border-inline: 0; text-align: left; cursor: pointer;
  transition: color .18s;
}
.drawer__nav > a:hover, .acc__btn:hover { color: var(--brand-300); }
.acc__btn svg { width: 15px; height: 15px; color: var(--text-3); transition: transform .22s; }
.acc__btn[aria-expanded="true"] svg { transform: rotate(45deg); color: var(--brass); }
.acc__panel { display: none; padding: .4rem 0 .9rem; }
.acc__panel.is-open { display: block; }
.acc__panel a { display: block; padding: .48rem .1rem; font-size: .9rem; color: var(--text-2); }
.acc__panel a:hover { color: var(--text); }

/* 8 ───────────────────────────────────────────────────────────── HERO ── */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--sf-1);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(3.4rem, 6vw, 5.6rem) clamp(3.6rem, 6.5vw, 6rem);
}
.hero p { color: var(--text-2); }
.hero--page { padding-block: clamp(2.8rem, 4.5vw, 4rem) clamp(2.8rem, 4.5vw, 4rem); }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 78% 0%, #000 10%, transparent 72%);
}
.hero__scan, .hero__particles, .hero__fade { display: none; }
/* Optional photographic backdrop. Two layers: the photo, then a navy scrim that
   is heaviest on the left so the headline keeps its contrast while the picture
   stays legible on the right. Both sit under the grid and the orbs. */
.hero__photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: 62% center;
  opacity: .46;
  filter: saturate(.85) contrast(1.04);
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--sf-1) 2%, transparent 26%),
    linear-gradient(100deg,
      var(--sf-1) 4%,
      color-mix(in srgb, var(--sf-1) 82%, transparent) 38%,
      color-mix(in srgb, var(--sf-1) 46%, transparent) 78%,
      color-mix(in srgb, var(--sf-1) 58%, transparent) 100%);
}
@media (max-width: 960px) {
  /* Narrow screens stack the copy over the whole width, so the photo has to
     drop back or the headline loses contrast. */
  .hero__photo { opacity: .22; }
  .hero__scrim { background: linear-gradient(to top, var(--sf-1) 6%, color-mix(in srgb, var(--sf-1) 72%, transparent) 60%, color-mix(in srgb, var(--sf-1) 64%, transparent) 100%); }
}
/* Soft static light — a gradient, not a blurred element, so it costs nothing */
.orb { position: absolute; border-radius: 50%; }
.orb--1 { width: 620px; height: 620px; top: -280px; right: -160px; background: radial-gradient(closest-side, rgba(84, 116, 184, .28), transparent 72%); }
.orb--2 { width: 460px; height: 460px; top: 20%; left: -220px; background: radial-gradient(closest-side, rgba(199, 75, 41, .10), transparent 72%); }
.orb--3 { display: none; }

.hero__head { max-width: 46rem; }
.hero__head h1 { margin-top: 1.1rem; }
.hero__head .lead { margin-top: 1.25rem; }
.hero__head .btn-row { margin-top: 2rem; }
.hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 3.6rem); align-items: center; }
.hero__copy h1 { margin-top: 1.2rem; max-width: 15ch; }
/* the one emphasised word in the headline, set in the serif italic */
.hero h1 em { font-style: italic; color: var(--brass-2); }
.hero__copy .lead { margin-top: 1.3rem; max-width: 46ch; }
.hero__cta { margin-top: 2rem; }
.hero__meta { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1.4rem 3rem; }
.hero__meta div { display: flex; flex-direction: column; }
.hero__meta b { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; color: var(--text); line-height: 1; }
.hero__meta span { font-size: .78rem; color: var(--text-3); margin-top: .45rem; }
.hero__pills { display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; margin-top: 1.5rem; }
.pill-dark {
  display: inline-flex; align-items: center; gap: .45rem; padding: .25rem 0;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--text-3);
  background: none; border: 0;
}
.pill-dark svg { width: 11px; height: 11px; color: var(--brass); }

.rotator { display: inline; }
.rotator > span { display: none; }
.rotator > span:first-child { display: inline; color: var(--brass-2); }

.hero__trust { display: flex; align-items: center; gap: .8rem; margin-top: 1.5rem; flex-wrap: wrap; }
.avatar-stack { display: flex; }
.avatar-stack span {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-left: -8px;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500; color: var(--text-2);
  border: 1px solid var(--line-2); background: var(--sf-3);
}
.avatar-stack span:first-child { margin-left: 0; }
.hero__trust p { font-size: .8rem; color: var(--text-3); }
.hero__trust b { color: var(--text-2); font-weight: 550; }
.stars { display: inline-flex; gap: 1px; color: var(--brass); }
.stars svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }

/* Hero dashboard — a flat instrument panel, not a floating glass card */
.hero__visual { position: relative; }
.dash {
  position: relative; border-radius: var(--r-lg); padding: 1.3rem;
  background: var(--sf-2); border: 1px solid var(--line-2);
}
.dash__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.dash__head b { font-size: .86rem; font-weight: 600; color: var(--text); }
.dash__live { display: inline-flex; align-items: center; gap: .4rem; font-size: .68rem; font-family: var(--font-mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .12em; }
.dash__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--data); }
.dash__body { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: center; padding-block: 1.2rem; }
.ring { width: 96px; height: 96px; flex: none; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring__track { stroke: var(--line-2); }
.ring__fill { stroke: var(--data); stroke-linecap: butt; stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset 1.4s var(--ease-out); }
.ring.is-in .ring__fill { stroke-dashoffset: 35; }
.ring__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring__label b { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--text); line-height: 1; }
.ring__label span { font-size: .6rem; font-family: var(--font-mono); color: var(--text-3); letter-spacing: .12em; }
.bars { display: grid; gap: .8rem; }
.bar__top { display: flex; justify-content: space-between; font-size: .76rem; color: var(--text-3); margin-bottom: .35rem; }
.bar__top b { color: var(--text-2); font-weight: 500; font-family: var(--font-mono); font-size: .74rem; }
.bar__track { height: 3px; border-radius: 0; background: var(--line); overflow: hidden; }
.bar__fill { display: block; height: 100%; width: 0; background: var(--data); transition: width 1.2s var(--ease-out); }
.bar__fill--v { background: var(--data-2); }
.bar__fill--a { background: var(--data-3); }
.dash__foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.dash__stat { text-align: left; }
.dash__stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--text); }
.dash__stat span { font-size: .68rem; color: var(--text-3); }
/* audit ledger — gives the panel the height the copy column has */
.dash__log { padding-top: 1.1rem; margin-top: 1rem; border-top: 1px solid var(--line); }
.dash__log-title {
  display: block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: .5rem;
}
.dash__log li { display: flex; align-items: baseline; gap: .55rem; padding: .48rem 0; font-size: .76rem; color: var(--text-3); }
.dash__log li + li { border-top: 1px solid var(--line); }
.dash__log i { width: 5px; height: 5px; border-radius: 50%; background: var(--data); flex: none; translate: 0 -2px; }
.dash__log li:nth-child(2) i { background: var(--brass); }
.dash__log li:nth-child(3) i { background: var(--emerald); }
.dash__log b { color: var(--text-2); font-weight: 550; }
.dash__log span { margin-left: auto; text-align: right; }

.hero__caption {
  margin-top: 1rem; font-size: .76rem; line-height: 1.6; color: var(--text-3);
  padding-left: .9rem; border-left: 1px solid var(--line-2); max-width: 46ch;
}

.dash__badge {
  display: flex; align-items: center; gap: .6rem; margin-top: .9rem; padding: .75rem .9rem;
  background: var(--sf-3); border: 1px solid var(--line);  border-radius: var(--r);
}
.dash__badge svg { width: 20px; height: 20px; color: var(--brass); }
.dash__badge b { display: block; font-size: .8rem; color: var(--text); }
.dash__badge span { font-size: .7rem; color: var(--text-3); }
.dash__chip {
  display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .85rem;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--text-3);
}
.dash__chip svg { width: 13px; height: 13px; color: var(--emerald); }
.dash__chip b { color: var(--text-2); font-weight: 500; }

.hero__strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(2rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--line);
}
.hero__strip div { padding: 1.1rem 1.2rem 0 0; }
.hero__strip div + div { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.hero__strip b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.24rem; color: var(--text); }
.hero__strip span { font-size: .76rem; color: var(--text-3); }

/* 9 ──────────────────────────────────────────────────────── COMPONENTS ── */
.card {
  position: relative;
  background: var(--sf-3); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.3rem, 2.2vw, 1.65rem);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.card:hover { border-color: var(--line-2); background: var(--sf-4); }
/* Photo band at the head of a card — same construction as .sector-card__media,
   but the card's padding is fluid, so the break-out margin has to match it. */
.card__media {
  margin: calc(-1 * clamp(1.3rem, 2.2vw, 1.65rem));
  margin-bottom: 1.05rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--sf-5);
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04);
  transition: filter .25s var(--ease);
}
.card:hover .card__media img { filter: saturate(1.04) contrast(1.04); }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: .9rem; line-height: 1.6; }
/* footers line up across a row even when the copy above them does not */
.card__foot { margin-top: auto; padding-top: 1.1rem; }
.card, a.card { display: flex; flex-direction: column; }
.card--glass { background: var(--sf-3); }

/* Icons sit bare on the surface — no gradient tiles */
.icon-tile {
  width: 22px; height: 22px; display: grid; place-items: center; margin-bottom: 1.1rem;
  background: none; border: 0; border-radius: 0; color: var(--brass);
  transition: color .2s;
}
.icon-tile svg { width: 20px; height: 20px; stroke-width: 1.5; }
/* one icon colour across the site — a per-card palette reads accidental */
.icon-tile--accent, .icon-tile--violet { color: var(--brass); }
.icon-tile--sm { width: 20px; height: 20px; margin-bottom: .9rem; }
.icon-tile--sm svg { width: 18px; height: 18px; }

/* A tile holding a 3D render instead of a line icon has to be far larger — a
   rendered object needs enough pixels for its form and lighting to read at all,
   where a 1.5px stroke is legible at 18px. The tile sizes above still apply to
   the icons that have no render yet, so the two can sit on one page. */
.icon-tile:has(.i3d) { width: 46px; height: 46px; margin-bottom: .9rem; }
.icon-tile--sm:has(.i3d) { width: 42px; height: 42px; margin-bottom: .8rem; }
.i3d { width: 100%; height: 100%; object-fit: contain; }
/* The renders are terracotta and bone, which carry on the sand bands but sit
   close to the ink on the navy ones; a touch of lift keeps them off the floor. */
.tone-dark .i3d, .section--dark .i3d, .section--mute .i3d { filter: brightness(1.08) saturate(1.06); }
.cert-wall__item .i3d { width: 30px; height: 30px; }

.badge {
  display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .6rem;
  border-radius: var(--r-sm); font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  background: none; color: var(--brass); border: 1px solid var(--brass-dim);
}
.badge--accent { color: var(--brass); border-color: var(--brass-dim); }
.badge--mute { color: var(--text-3); border-color: var(--line); }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem; border-radius: var(--r-sm);
  font-size: .83rem; font-weight: 450; background: none; border: 1px solid var(--line); color: var(--text-2);
  transition: border-color .18s, color .18s;
}
a.chip:hover { border-color: var(--line-3); color: var(--text); }

.checks li { position: relative; padding-left: 1.6rem; margin-top: .6rem; color: var(--text-2); font-size: .92rem; max-width: 62ch; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 6px;
  border-left: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass);
  transform: rotate(-45deg);
}

.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; gap: 2.4rem; width: max-content; animation: marquee 64s linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 78s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee + .marquee { margin-top: .4rem; }
.marquee__item {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 0; white-space: nowrap;
  border: 0; background: none;
  font-family: var(--font-mono); font-weight: 400; font-size: .82rem; letter-spacing: .06em; color: var(--text-3);
}
.marquee__item svg { width: 13px; height: 13px; color: var(--line-3); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.stat { background: none; padding: 1.6rem 1.4rem 0 0; }
.stat + .stat { padding-left: 1.6rem; border-left: 1px solid var(--line); }
.stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; letter-spacing: -.02em; color: var(--brass-2); }
.stat span { display: block; margin-top: .6rem; font-size: .82rem; color: var(--text-3); max-width: 22ch; }

.steps { counter-reset: s; display: grid; gap: 0; border-top: 1px solid var(--line); grid-template-columns: repeat(4, 1fr); }
.step { counter-increment: s; background: none; padding: 1.5rem 1.5rem 0 0; position: relative; }
.step + .step { padding-left: 1.6rem; border-left: 1px solid var(--line); }
.step__n {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .14em;
  color: var(--brass); display: block; margin-bottom: .9rem;
}
.step h3 { font-size: 1.02rem; margin-bottom: .45rem; }
.step p { font-size: .87rem; line-height: 1.6; }
/* Optional photograph above a step. Sits inside the column padding so the
   vertical hairlines that separate the steps stay unbroken — this row is ruled,
   not boxed, and the picture must not turn it into four cards. */
.step__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sf-2);
}
.step__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Held below the band's own brightness so the type stays the loudest thing. */
  filter: saturate(.86) contrast(1.04) brightness(.96);
}

.timeline { position: relative; padding-left: 1.9rem; }
.timeline::before { content: ""; position: absolute; left: 4px; top: .55rem; bottom: .55rem; width: 1px; background: var(--line-2); }
.timeline::after {
  content: ""; position: absolute; left: 4px; top: .55rem; width: 1px; height: var(--fill, 0%);
  background: var(--brass); transition: height .3s linear;
}
.timeline li { position: relative; padding-bottom: 1.6rem; }
.timeline li::before {
  content: ""; position: absolute; left: -1.9rem; top: .5rem; width: 9px; height: 9px; border-radius: 50%; z-index: 1;
  background: var(--sf-0); border: 1px solid var(--line-3); transition: border-color .25s, background .25s;
}
.timeline li.is-in::before { border-color: var(--brass); background: var(--brass); }
.timeline h4 { margin-bottom: .25rem; }
.timeline p { font-size: .88rem; }

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-weight: 550; font-size: 1rem; color: var(--text);
  transition: color .18s;
}
.faq__q:hover { color: var(--brand-300); }
.faq__icon { flex: none; width: 16px; height: 16px; margin-top: .25rem; position: relative; color: var(--text-3); transition: color .2s; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: currentColor; transition: transform .25s var(--ease); }
.faq__icon::before { width: 13px; height: 1.5px; top: 7px; left: 1.5px; }
.faq__icon::after { width: 1.5px; height: 13px; left: 7px; top: 1.5px; }
.faq__q[aria-expanded="true"] .faq__icon { color: var(--brass); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p { padding: 0 3rem 1.35rem 0; font-size: .93rem; max-width: 68ch; }

.tabs { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--line); }
.tab {
  padding: 0 0 .8rem; border: 0; border-bottom: 1px solid transparent; background: none; border-radius: 0;
  font-size: .88rem; font-weight: 500; color: var(--text-3); cursor: pointer; transition: color .18s, border-color .18s;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text-2); }
.tab.is-active { color: var(--text); border-bottom-color: var(--brass); background: none; box-shadow: none; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.quote-card { position: relative; background: none; border: 0; border-top: 1px solid var(--line); padding: 2.2rem 0 0; }
.quote-card blockquote {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.72rem); line-height: 1.45; color: var(--text); letter-spacing: -.005em;
  max-width: 34ch;
}
.quote-mark { display: none; }
.quote-person { display: flex; align-items: center; gap: .8rem; margin-top: 1.8rem; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 500; font-size: .74rem; color: var(--text-2);
  background: var(--sf-3); border: 1px solid var(--line-2);
}
.quote-person b { display: block; font-size: .88rem; color: var(--text); font-weight: 550; }
.quote-person span { font-size: .8rem; color: var(--text-3); }
.slider__dots { display: flex; gap: .5rem; margin-top: 2rem; }
.slider__dot { width: 22px; height: 1px; border-radius: 0; border: 0; background: var(--line-3); cursor: pointer; transition: background .25s; padding: 0; }
.slider__dot.is-active { width: 22px; background: var(--brass); }

.cta-band {
  /* `isolation` is load-bearing, not decoration. .cta-band__grid sits at
     z-index:-1, and a negative-z child only paints above its parent's own
     background when that parent forms a stacking context. .cta-band also
     carries .reveal, whose transform forms one — so without this the backdrop
     showed during the reveal and vanished the moment `transform: none` landed.
     .hero already does this; the CTA band was the one that missed it. */
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg); padding: clamp(2.4rem, 4.5vw, 3.6rem);
  background: var(--sf-2); border: 1px solid var(--line-2);
  text-align: left;
}
/* copy on the left, actions parked at the foot of the right column */
.cta-band {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  column-gap: clamp(2rem, 5vw, 4rem);
}
.cta-band > .eyebrow, .cta-band h2, .cta-band p { grid-column: 1; }
.cta-band h2 { max-width: 24ch; }
.cta-band p { max-width: 52ch; margin-top: 1rem; }
.cta-band .btn-row { grid-column: 2; grid-row: 1 / 4; align-self: end; flex-direction: column; align-items: stretch; }
.cta-band__note { grid-column: 1 / -1; }
/* Three stacked layers, top to bottom: the existing corner light, a flat scrim
   that holds the texture back so the type stays dominant, and the photograph.
   The scrim is a gradient because only the last background layer may be a
   colour, and that slot belongs to the image. */
.cta-band__grid {
  position: absolute; inset: 0; z-index: -1; opacity: 1;
  background-image:
    radial-gradient(70% 120% at 88% 0%, rgba(84, 116, 184, .18), transparent 62%),
    linear-gradient(color-mix(in srgb, var(--sf-2) 62%, transparent),
                    color-mix(in srgb, var(--sf-2) 62%, transparent)),
    url("../img/backdrop/cta-texture.webp");
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}
.cta-band__note { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); font-size: .78rem; color: var(--text-3); display: flex; gap: 1.6rem; flex-wrap: wrap; }
.cta-band__note span { display: inline-flex; align-items: center; gap: .45rem; }
.cta-band__note svg { width: 13px; height: 13px; color: var(--brass); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-family: var(--font-mono); font-size: .74rem; color: var(--text-3); }
.crumbs a { transition: color .18s; }
.crumbs a:hover { color: var(--text-2); }
.crumbs span[aria-current] { color: var(--text-2); }
.crumbs .sep { opacity: .5; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; min-width: 540px; }
th, td { text-align: left; padding: .9rem 1.1rem; font-size: .89rem; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-mono); font-weight: 500; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); background: none; }
td { color: var(--text-2); }
tbody tr { transition: background .18s; }
tbody tr:hover { background: rgba(255, 255, 255, .022); }
tr:last-child td, tr:last-child th { border-bottom: 0; }
td strong { color: var(--text); font-weight: 550; }
.table-wrap--facts { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.table-wrap--facts table { min-width: 0; }
.table-wrap--facts th { width: 40%; vertical-align: top; }
.table-wrap--facts th, .table-wrap--facts td { padding: .8rem 0; font-size: .86rem; }
.table-wrap--facts td { padding-left: 1rem; }

.toc { position: sticky; top: calc(var(--header-h) + 22px); border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: .2rem 0 .2rem 1.2rem; background: none; }
.toc h4 { font-size: .68rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: .9rem; }
.toc a { display: block; padding: .38rem 0; border: 0; font-size: .86rem; color: var(--text-3); transition: color .18s; }
.toc a:hover, .toc a.is-active { color: var(--text); background: none; }

.field { display: block; margin-bottom: 1.05rem; }
.field > span { display: block; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: .5rem; }
.field .req { color: var(--rose); }
/* fields sit one step above the panel they are on, in either tone */
.input, .select, .textarea {
  width: 100%; padding: .78rem .9rem; border-radius: var(--r-sm); background: var(--sf-3);
  border: 1px solid var(--line-2); color: var(--text); font-size: .93rem;
  transition: border-color .18s, box-shadow .18s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.textarea { resize: vertical; min-height: 128px; }
.select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369767F' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 15px; padding-right: 2.4rem;
}
.field .err { display: none; font-size: .77rem; color: var(--rose); margin-top: .35rem; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--rose); }
.field.is-invalid .err { display: block; }
.checkbox { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; font-size: .84rem; color: var(--text-2); cursor: pointer; }
.checkbox input { width: 16px; height: 16px; margin-top: .2rem; accent-color: var(--brand); flex: none; }
.checkbox > span:not(.err) { flex: 1; min-width: 0; }
.checkbox .err { display: none; flex-basis: 100%; }
.checkbox.is-invalid .err { display: block; }
.checkbox.is-invalid input { outline: 1px solid var(--rose); outline-offset: 2px; }
.form-note { font-size: .78rem; color: var(--text-3); margin-top: .9rem; }
.form-alert {
  display: none; align-items: flex-start; gap: .7rem; padding: 1rem 1.1rem; border-radius: var(--r-sm);
  background: var(--sf-3); border: 1px solid var(--brass-dim);
  font-size: .88rem; color: var(--text-2); margin-bottom: 1.2rem;
}
.form-alert.is-visible { display: flex; }
.form-alert svg { width: 18px; height: 18px; flex: none; color: var(--brass); }

.info-tile { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.info-tile:hover { border-color: var(--line); box-shadow: none; }
.info-tile b { display: block; font-size: .9rem; margin-bottom: .2rem; font-weight: 550; }
.info-tile p, .info-tile a { font-size: .86rem; color: var(--text-2); }
.info-tile a:hover { color: var(--text); }

/* 10 ───────────────────────────────────────────────────── PAGE BLOCKS ── */
.logo-strip { padding-block: clamp(1.5rem, 2.6vw, 2.2rem); border-bottom: 1px solid var(--line); background: var(--sf-0); }
.logo-strip__label { text-align: left; font-size: .7rem; font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1rem; }

.feature-media { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--sf-2); padding: clamp(1.3rem, 2.4vw, 1.8rem); box-shadow: none; }
/* A panel that is a single image. Like .map-art--photo, the artwork carries its
   own sand ground, so it runs to the border instead of floating on a second,
   darker sand. */
.feature-media--photo { display: block; padding: 0; overflow: hidden; background: var(--sf-3); transition: border-color .2s var(--ease); }
a.feature-media--photo:hover { border-color: var(--line-2); }
.feature-media--photo img { width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.feature-media--photo .card__foot { display: flex; margin: 0; padding: .85rem 1.1rem; }

.matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.matrix__cell {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: .85rem .2rem;
  display: flex; gap: .7rem; align-items: center; transition: color .18s;
}
.matrix__cell:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 1rem; }
.matrix__cell:nth-child(even) { padding-left: 1rem; }
.matrix__cell:hover { transform: none; box-shadow: none; background: rgba(255, 255, 255, .022); }
.matrix__cell b { font-size: .85rem; display: block; line-height: 1.3; font-weight: 550; }
.matrix__cell span { font-size: .74rem; color: var(--text-3); }
.dot-ok { width: 4px; height: 4px; border-radius: 50%; background: var(--brass); flex: none; box-shadow: none; }

.sector-card { position: relative; display: block; padding: 1.4rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--sf-3); transition: border-color .2s, background .2s; }
.sector-card:hover { border-color: var(--line-2); background: var(--sf-4); }
.sector-card h3 { font-size: 1.04rem; }
/* Photo band. Breaks out of the card padding to sit flush against three edges,
   separated from the copy by the same hairline everything else uses. The
   desaturation is what keeps eight separately-generated photographs reading as
   one set, and stops any of them shouting over the sand band around them. */
.sector-card__media {
  margin: -1.4rem -1.4rem 1.1rem;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--sf-5);
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.sector-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04);
  transition: filter .25s var(--ease);
}
.sector-card:hover .sector-card__media img { filter: saturate(1.04) contrast(1.04); }

.value-row { display: flex; gap: 1rem; align-items: flex-start; }
.value-row .icon-tile { margin-bottom: 0; }

/* Bento — flat cells, one accented */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.bento__cell {
  position: relative; overflow: hidden;
  grid-column: span 2; padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: var(--sf-3); border: 0; border-radius: 0; box-shadow: none;
  transition: background .2s var(--ease);
}
.bento__cell:hover { background: var(--sf-4); transform: none; box-shadow: none; }
.bento__cell--wide { grid-column: span 4; }
.bento__cell--half { grid-column: span 3; }
.bento__cell--tall { grid-row: span 2; }
.bento__cell--full { grid-column: span 6; }
/* the one cell that carries the argument, tinted in the brand green */
.bento__cell--feature,
.bento__cell--feature:hover { background: color-mix(in srgb, var(--brand) 12%, var(--sf-3)); }
/* A feature cell carrying a photograph. The picture is a layer behind the copy,
   not a banner above it — the image is framed with its upper left kept empty for
   exactly this. The scrim is what guarantees the text stays readable whatever
   the photograph turns out to look like. */
/* The surface has to be the SAME tint as the non-photo feature cell. It was
   built on --sf-0, four steps darker than every neighbouring cell, so instead
   of reading as the featured panel it read as a hole punched in the grid. */
.bento__cell--photo,
.bento__cell--photo:hover { background: color-mix(in srgb, var(--brand) 12%, var(--sf-3)); isolation: isolate; }
.bento__cell--photo::before,
.bento__cell--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.bento__cell--photo::before {
  background-image: var(--cell-img);
  background-size: cover; background-position: 70% center;
  filter: saturate(.82) contrast(1.04);
}
/* The scrim is mixed from the cell's own surface, not from the page ground, so
   the photograph fades into the panel it sits in rather than into a darker one. */
.bento__cell--photo::after {
  --cell-surface: color-mix(in srgb, var(--brand) 12%, var(--sf-3));
  background: linear-gradient(100deg,
    var(--cell-surface) 4%,
    color-mix(in srgb, var(--cell-surface) 86%, transparent) 44%,
    color-mix(in srgb, var(--cell-surface) 46%, transparent) 100%);
}
.bento__cell--photo h3, .bento__cell--photo p { position: relative; }
@media (max-width: 680px) {
  /* Stacked, the copy runs the full width, so the scrim has to cover it all. */
  .bento__cell--photo::after {
    --cell-surface: color-mix(in srgb, var(--brand) 12%, var(--sf-3));
    background: linear-gradient(to top,
      var(--cell-surface) 8%, color-mix(in srgb, var(--cell-surface) 78%, transparent) 100%);
  }
}
.bento__cell--feature .bento__kicker { color: var(--brass); }
.bento__kicker { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.bento__cell h3 { margin-top: .8rem; font-size: 1.05rem; }
.bento__cell p { font-size: .89rem; margin-top: .55rem; line-height: 1.6; max-width: 46ch; }
.bento__big { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 4.4vw, 3rem); line-height: 1; letter-spacing: -.02em; margin-top: .7rem; color: var(--brass-2); }
.bento__art { display: none; }

.kpi { display: grid; gap: .5rem; padding: 1.2rem 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.kpi:hover { transform: none; }
.kpi__label { font-size: .7rem; color: var(--text-3); letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-mono); }
.kpi__value { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--text); }
.kpi__delta { font-size: .76rem; color: var(--text-3); display: inline-flex; align-items: center; gap: .3rem; }
.kpi svg.spark { width: 100%; height: 34px; overflow: visible; }
.kpi svg.spark path { fill: none; stroke: var(--brass); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 240; stroke-dashoffset: 240; }
.kpi.is-in svg.spark path { animation: drawLine 1.4s var(--ease-out) forwards; }

/* Comparison — a ledger, not a pricing table */
.compare { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.compare > div { background: none; padding: 1rem .8rem 1rem 0; font-size: .89rem; color: var(--text-2); display: flex; align-items: flex-start; gap: .55rem; border-bottom: 1px solid var(--line); line-height: 1.55; }
.compare > .compare__head { font-family: var(--font-mono); font-weight: 500; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); background: none; padding-block: .8rem; }
.compare > .compare__head--us { color: var(--brass); }
.compare > .compare__row-label { color: var(--text); font-weight: 550; }
.compare .yes, .compare .no { display: inline-flex; flex: none; margin-top: .18rem; }
.compare .yes { color: var(--brass); }
.compare .no { color: var(--text-3); opacity: .55; }
.compare svg { width: 14px; height: 14px; flex: none; stroke-width: 2; }
.compare > .is-us { color: var(--text); padding-left: 1.2rem; border-left: 1px solid var(--line); }
.compare > .compare__head--us { padding-left: 1.2rem; border-left: 1px solid var(--line); }

/* Engagement models */
.plan {
  position: relative; display: flex; flex-direction: column; gap: .85rem;
  padding: clamp(1.5rem, 2.4vw, 1.9rem); border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--sf-3); transition: border-color .2s;
}
.plan:hover { border-color: var(--line-2); transform: none; box-shadow: none; }
.plan--featured { border-color: var(--brass-dim); background: var(--sf-4); box-shadow: none; }
.plan__tag { position: absolute; top: 1.5rem; right: 1.5rem; }
.plan h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; }
.plan__price { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; color: var(--brass); text-transform: uppercase; }
.plan__meta { font-size: .84rem; color: var(--text-3); padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.plan ul li { position: relative; padding-left: 1.35rem; font-size: .87rem; color: var(--text-2); margin-top: .55rem; }
.plan ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--line-3); }
.plan .btn { margin-top: auto; }

/* Coverage */
.globe-panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.6rem, 3.5vw, 3.5rem); align-items: center; }
.coverage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.coverage__item { display: flex; align-items: flex-start; gap: .55rem; padding: .8rem .8rem .8rem 0; border-bottom: 1px solid var(--line); background: none; border-radius: 0; font-size: .85rem; color: var(--text-2); transition: color .18s; }
.coverage__item:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.coverage__item:hover { color: var(--text); transform: none; border-color: var(--line); }
.coverage__item svg { width: 13px; height: 13px; color: var(--brass); flex: none; margin-top: .28rem; }
.map-art { position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--sf-2); padding: 1.6rem; overflow: hidden; }
.map-art svg { width: 100%; height: auto; color: var(--line-2); }
.map-art .pin { fill: var(--brass); opacity: .8; }
/* The map is drawn on its own sand ground, so it runs to the panel edge rather
   than floating on a second, slightly darker sand. */
.map-art--photo { padding: 0; background: var(--sf-3); }
.map-art--photo img { width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.map-art--photo p { margin: 0; padding: .85rem 1.1rem; }

.cert-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.cert-wall__item {
  display: flex; flex-direction: row; align-items: center; gap: .6rem; text-align: left;
  padding: 1rem 1rem 1rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; font-size: .82rem; color: var(--text-2); font-weight: 400;
  transition: color .18s;
}
.cert-wall__item svg { width: 16px; height: 16px; color: var(--brass); flex: none; }
.cert-wall__item:hover { transform: none; box-shadow: none; color: var(--text); border-color: var(--line); }

.highlight-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.5rem; justify-content: space-between;
  padding: clamp(1.4rem, 2.4vw, 1.8rem) 0 0; border-radius: 0;
  border: 0; border-top: 1px solid var(--line); background: none;
}
.highlight-band h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -.01em; }
.highlight-band p { font-size: .88rem; margin-top: .35rem; max-width: 54ch; }

/* 11 ───────────────────────────────────────────────────────── FOOTER ── */
.site-footer { background: var(--sf-1); color: var(--text-2); padding-top: clamp(3rem, 5vw, 4.5rem); position: relative; border-top: 1px solid var(--line); }
.site-footer h4 { color: var(--text-3); font-size: .68rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.15fr; gap: clamp(1.6rem, 3vw, 2.6rem); }
.footer__brand p { font-size: .86rem; color: var(--text-3); margin-top: 1rem; max-width: 34ch; line-height: 1.65; }
.footer__links li { margin-bottom: .5rem; }
.footer__links a { font-size: .85rem; color: var(--text-2); transition: color .18s; }
.footer__links a:hover { color: var(--text); }
.footer__offices li { font-size: .82rem; margin-bottom: .9rem; line-height: 1.55; color: var(--text-3); }
.footer__offices b { color: var(--text-2); display: block; font-size: .82rem; font-weight: 550; }
.socials { display: flex; gap: .4rem; margin-top: 1.4rem; }
.socials a {
  width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: none; border: 1px solid var(--line); color: var(--text-3); transition: color .18s, border-color .18s;
}
.socials a:hover { color: var(--text); border-color: var(--line-3); background: none; transform: none; }
.socials svg { width: 15px; height: 15px; }
.footer__badges { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: clamp(2rem, 3.5vw, 2.8rem); padding-top: clamp(1.4rem, 2.5vw, 1.9rem); border-top: 1px solid var(--line); }
.footer__badge {
  display: inline-flex; align-items: center; gap: .45rem; padding: 0;
  border: 0; background: none;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--text-3);
}
.footer__badge svg { width: 13px; height: 13px; color: var(--line-3); }
.footer__badge:hover { color: var(--text-2); }
.footer__bottom {
  margin-top: clamp(1.4rem, 2.5vw, 2rem); padding-block: 1.4rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: .8rem; color: var(--text-3);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer__bottom a:hover { color: var(--text-2); }
.newsletter { display: flex; gap: .5rem; margin-top: 1.1rem; }
.newsletter input {
  flex: 1; min-width: 0; padding: .65rem .8rem; border-radius: var(--r-sm); font-size: .85rem;
  background: var(--sf-2); border: 1px solid var(--line-2); color: var(--text);
  transition: border-color .18s;
}
.newsletter input::placeholder { color: var(--text-3); }
.newsletter input:focus { outline: 0; border-color: var(--brand); }
.newsletter button { padding: .65rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: none; color: var(--text-2); font-weight: 500; font-size: .85rem; cursor: pointer; transition: color .18s, border-color .18s; }
.newsletter button:hover { color: var(--text); border-color: var(--line-3); transform: none; box-shadow: none; }
.newsletter-msg { font-size: .78rem; color: var(--brass); margin-top: .55rem; display: none; }
.newsletter-msg.is-visible { display: block; }

/* 12 ─────────────────────────────────────────────────────────── DOCK ── */
.dock { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: grid; gap: .45rem; justify-items: center; }
.dock__btn {
  width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; border: 1px solid var(--line-2);
  background: var(--sf-2); color: var(--text-3); cursor: pointer;
  transition: color .18s, border-color .18s; position: relative;
}
.dock__btn svg { width: 17px; height: 17px; }
.dock__btn:hover { color: var(--text); border-color: var(--line-3); background: var(--sf-3); transform: none; box-shadow: none; }
.dock__btn--wa { color: var(--text-3); }
.dock__btn::after {
  content: attr(data-label); position: absolute; right: calc(100% + 8px); top: 50%; translate: 0 -50%;
  padding: .3rem .55rem; border-radius: var(--r-sm); font-size: .72rem; white-space: nowrap;
  background: var(--sf-3); border: 1px solid var(--line-2); color: var(--text-2);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.dock__btn:hover::after { opacity: 1; }
.to-top {
  width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--sf-2); color: var(--text-3); border: 1px solid var(--line-2); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .25s, color .18s, border-color .18s;
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { color: var(--text); border-color: var(--line-3); background: var(--sf-3); }
.to-top svg { width: 17px; height: 17px; }

/* 13 ─────────────────────────────────────────────────────── UTILITIES ── */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.6rem; } .mt-4 { margin-top: 2.2rem; } .mt-5 { margin-top: 2.8rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.6rem; } .mb-4 { margin-bottom: 2.2rem; }
.muted { color: var(--text-3); }
.small { font-size: .85rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.divider { height: 1px; border: 0; background: var(--line); margin-block: clamp(2rem, 4vw, 3rem); }

/* 14 ────────────────────────────────────────────────────────── MOTION ── */
/* Two loops on the whole site (the ticker rows). Everything else is a
   response to scroll, hover or a click. */
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--left, .reveal--right, .reveal--zoom { transform: translateY(14px); }
.reveal--blur { transform: translateY(14px); filter: none; }
.reveal[data-delay="1"] { transition-delay: .04s; }
.reveal[data-delay="2"] { transition-delay: .08s; }
.reveal[data-delay="3"] { transition-delay: .12s; }
.reveal[data-delay="4"] { transition-delay: .16s; }
.reveal[data-delay="5"] { transition-delay: .2s; }
.reveal[data-delay="6"] { transition-delay: .24s; }
.reveal[data-delay="7"] { transition-delay: .28s; }
.reveal[data-delay="8"] { transition-delay: .32s; }
.stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
.stagger.is-in > * { opacity: 1; transform: none; }

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

/* 15 ────────────────────────────────────────────────────── RESPONSIVE ── */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__offices { grid-column: span 2; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(odd) { padding-left: 0; border-left: 0; }
  .step:nth-child(n+3) { margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
  .bento__cell, .bento__cell--half { grid-column: span 3; }
  .bento__cell--wide, .bento__cell--full { grid-column: span 6; }
  .globe-panel { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  :root { --header-h: 62px; }
  .nav, .header-actions .btn { display: none; }
  .nav-toggle { display: grid; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: 520px; width: 100%; }
  .split { grid-template-columns: 1fr; }
  .g-4, .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cert-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc { display: none; }
  .topbar__links a span { display: none; }
  .hero__strip { grid-template-columns: repeat(2, 1fr); }
  .hero__strip div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hero__strip div:nth-child(n+3) { margin-top: .4rem; }
  .cta-band { grid-template-columns: 1fr; }
  .cta-band .btn-row { grid-column: 1; grid-row: auto; margin-top: 1.9rem; flex-direction: row; align-items: center; }
}
@media (max-width: 680px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .matrix { grid-template-columns: 1fr; }
  .matrix__cell:nth-child(odd) { border-right: 0; padding-right: .2rem; }
  .matrix__cell:nth-child(even) { padding-left: .2rem; }
  .steps { grid-template-columns: 1fr; }
  .step { padding-right: 0; }
  .step + .step { padding-left: 0; border-left: 0; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .stats { grid-template-columns: 1fr; }
  .stat + .stat { padding-left: 0; border-left: 0; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand, .footer__offices { grid-column: span 2; }
  .hero__meta { gap: 1.2rem 2rem; }
  .faq__a p { padding-right: 1rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .bento__cell, .bento__cell--wide, .bento__cell--half, .bento__cell--full { grid-column: span 6; }
  .bento__cell--tall { grid-row: span 1; }
  .compare { grid-template-columns: 1fr; }
  .compare > .compare__head { display: none; }
  .compare > .compare__row-label { padding-top: 1.2rem; border-bottom: 0; }
  .compare > .is-us { padding-left: 0; border-left: 0; }
  .compare > [data-label] { flex-wrap: wrap; }
  .compare > [data-label]::before {
    content: attr(data-label); flex-basis: 100%; margin-bottom: .3rem;
    font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-3);
  }
  .compare > .is-us::before { color: var(--brass); }
  .coverage { grid-template-columns: 1fr; }
  .coverage__item:nth-child(even) { padding-left: 0; border-left: 0; }
  .cert-wall { grid-template-columns: 1fr; }
  .topbar__links, .topbar__extra { display: none; }
  .topbar .container { justify-content: center; }
  /* the trailing rule strands itself on a wrapped eyebrow */
  .eyebrow::after { display: none; }
  .section-head--split { grid-template-columns: 1fr; gap: 1rem; }
  .hero__strip { grid-template-columns: 1fr; }
  .plan__tag { position: static; align-self: flex-start; }
}
@media (max-width: 460px) {
  .btn-row .btn { width: 100%; }
  /* the ledger detail drops under its label rather than crushing against it */
  .dash__log li { flex-wrap: wrap; }
  .dash__log span { margin-left: 0; width: 100%; text-align: left; padding-left: 1.1rem; }
}

/* 16 ─────────────────────────────────────────────────────────── PRINT ── */
@media print {
  .site-header, .site-footer, .to-top, .dock, .progress-bar, .cta-band, .drawer, .topbar, .ambient { display: none !important; }
  body { color: #000; background: #fff; }
  .hero { background: #fff !important; color: #000 !important; }
  .hero h1, .hero p { color: #000 !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
}

/* 17 ───────────────────────── HOME · EDITORIAL PRINT LAYER ── */
/*
   Scoped to .page-index so the other 35 pages keep the existing system while
   this one is pushed further. The brief was "premium and traditional", and the
   traditions being borrowed are print ones: a ruled and numbered section head,
   oldstyle figures in running text, a raised initial to open the argument, and
   a pull quote set across the measure. No new colour is introduced — the whole
   layer is type, rules and space.
*/

/* ── Figures ─────────────────────────────────────────────────────────────
   Oldstyle (lowercase) numerals sit on the baseline with ascenders and
   descenders, the way a book sets them, so "1200" inside a sentence stops
   shouting. Anything that has to align in a column keeps lining tabular
   figures instead — a stat row with oldstyle numerals looks broken. */
.page-index p, .page-index li, .page-index .lead { font-variant-numeric: oldstyle-num proportional-nums; }
.page-index .stat b, .page-index .bento__big, .page-index .hero__meta b,
.page-index .dash b, .page-index table, .page-index .step__n,
.page-index .eyebrow, .page-index .hero__strip b { font-variant-numeric: lining-nums tabular-nums; }

/* ── Section head: the ruled, numbered opening ───────────────────────────
   A double rule — one heavy, one hair, with a thread of space between — is the
   oldest section-break device in printing, and it reads as considered in a way
   a single 1px line does not. The index number hangs above it in the serif. */
.page-index .section-head { padding-top: 1.5rem; }
.page-index .section-head::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  border-top: 2px solid var(--brass);
  border-bottom: 1px solid var(--line-2);
  box-sizing: content-box;
}
.page-index .section-head .eyebrow { font-size: .68rem; letter-spacing: .18em; }
/* The running index is already produced by a CSS counter; this only dresses it. */
.page-index .section-head .eyebrow::before {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--brass); margin-right: .1rem;
}
.page-index .section-head h2 { margin-top: 1.1rem; letter-spacing: -.018em; }
.page-index .section-head .lead { text-wrap: pretty; }

/* ── The raised initial ──────────────────────────────────────────────────
   Once on the page, on the paragraph that opens the argument. A drop cap used
   more than once stops being a device and becomes a texture. Float + a tuned
   line-height is the only way to get the cap to sit on the third baseline
   without hard-coding pixel offsets. */
.page-index .lead--opening::first-letter {
  float: left;
  font-family: var(--font-display); font-weight: 600;
  font-size: 3.4em; line-height: .84;
  margin: .06em .12em 0 0;
  color: var(--brass);
}

/* ── Pull quote ──────────────────────────────────────────────────────────
   Set across the measure between two bands, with the mark hung into the left
   margin so the first letter of the quote still aligns with the text column. */
.page-index .pullquote {
  position: relative;
  margin-block: clamp(2.4rem, 5vw, 4rem);
  padding-block: clamp(1.8rem, 3vw, 2.6rem);
  border-top: 2px solid var(--brass);
  border-bottom: 1px solid var(--line-2);
  max-width: 44rem; margin-inline: auto; text-align: center;
}
.page-index .pullquote p {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  line-height: 1.32; letter-spacing: -.012em;
  color: var(--text); text-wrap: balance;
}
.page-index .pullquote cite {
  display: block; margin-top: 1.1rem;
  font-family: var(--font-mono); font-style: normal;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3);
}

/* ── Hairline ornament between bands ─────────────────────────────────────
   A rule broken by a small diamond: the printer's way of marking a pause that
   is longer than a paragraph but shorter than a chapter. */
.page-index .rule-ornament {
  display: flex; align-items: center; gap: 1rem;
  margin-block: clamp(2rem, 4vw, 3.2rem);
  color: var(--brass);
}
.page-index .rule-ornament::before,
.page-index .rule-ornament::after {
  content: ""; flex: 1; height: 1px; background: var(--line-2);
}
.page-index .rule-ornament i {
  width: 6px; height: 6px; background: currentColor;
  transform: rotate(45deg); flex: none;
}

/* ── Headline refinement ─────────────────────────────────────────────────
   Source Serif 4 is loaded with its optical-size axis, so at display sizes the
   browser already picks a finer-cut, tighter-spaced drawing. All this does is
   let the headline run larger and pull the tracking in to match. */
.page-index .hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.2rem);
  letter-spacing: -.022em; line-height: 1.04;
  text-wrap: balance;
}
.page-index .hero .lead { text-wrap: pretty; }

/* ── Quiet entrance ──────────────────────────────────────────────────────
   The hero is the one place the page performs, and it performs once, on load.
   Each part arrives on the same short curve a beat after the one above it, so
   it reads as a page being set rather than as animation. Everything else on
   the site still waits for a scroll. */
@keyframes set-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page-index .hero__copy > *,
.page-index .hero__visual {
  animation: set-in .62s var(--ease-out) backwards;
}
.page-index .hero__copy > .eyebrow    { animation-delay: .05s; }
.page-index .hero__copy > h1          { animation-delay: .13s; }
.page-index .hero__copy > .lead       { animation-delay: .23s; }
.page-index .hero__copy > .hero__cta  { animation-delay: .33s; }
.page-index .hero__copy > .hero__trust{ animation-delay: .40s; }
.page-index .hero__copy > .hero__pills{ animation-delay: .46s; }
.page-index .hero__copy > .hero__meta { animation-delay: .52s; }
.page-index .hero__visual             { animation-delay: .30s; animation-duration: .8s; }

@media (prefers-reduced-motion: reduce) {
  .page-index .hero__copy > *,
  .page-index .hero__visual { animation: none; }
}

/* ── Service card ────────────────────────────────────────────────────────
   A catalogue entry rather than a tile: a hanging reference number, the
   framework citation set in mono under the rule, then the description. The
   citation is the point — "PCI DSS v4.0.1 · QSA-led" is what tells a buyer
   this is the real thing, and it was sitting unused in the data. */
.card--service { display: flex; flex-direction: column; padding-top: 1.5rem; }
.card--service .icon-tile { margin-bottom: 1rem; }
.card--service h3 { margin-bottom: .55rem; }

/* The number hangs top-right like a plate number in a printed catalogue. It is
   set large and low-contrast so it reads as apparatus, not as content. */
.card__index {
  position: absolute; top: .9rem; right: 1.1rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.45rem;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1; color: var(--brass);
  opacity: .28; transition: opacity .2s var(--ease);
}
.card--service:hover .card__index { opacity: .6; }

/* The citation line, ruled off above the way a source note is. */
.card__ref {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass); line-height: 1.5;
  padding-top: .6rem; margin-bottom: .7rem;
  border-top: 1px solid var(--brass-dim);
}
.card--service > p:not(.card__ref) { font-size: .875rem; }
/* Pin the arrow to the foot so eight cards of unequal copy still line up. */
.card--service .card__foot { margin-top: auto; padding-top: .9rem; }

@media (max-width: 680px) {
  .card__index { font-size: 1.2rem; top: .75rem; right: .9rem; }
}

/* ── The difference, as six numbered entries ─────────────────────────────
   Replaces a three-column comparison table. Two reasons the table had to go:
   it gave the alternative the same width, the same size and the same weight as
   the position being argued — half the layout spent describing someone else's
   work — and a table reads as data when this is prose. Here the entry leads,
   and the alternative sits under a rule as a correction. */
.ledger {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  counter-reset: led;
  border-top: 1px solid var(--line-2);
}
.ledger__item {
  counter-increment: led;
  position: relative;
  padding: 1.6rem 2.2rem 1.7rem 3.2rem;
  border-bottom: 1px solid var(--line);
}
/* Vertical rule between the two columns, drawn only on the left-hand cells so
   it never appears at the outer edge of the block. */
.ledger__item:nth-child(odd) { border-right: 1px solid var(--line); }

/* The entry number, hanging in the left margin the way a marginal note does. */
.ledger__item::before {
  content: counter(led, decimal-leading-zero);
  position: absolute; left: 0; top: 1.75rem;
  font-family: var(--font-mono); font-weight: 500; font-size: .68rem;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: .1em;
  color: var(--brass);
}
.ledger__label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.12rem; letter-spacing: -.012em; line-height: 1.2;
  color: var(--text); margin-bottom: .5rem;
}
/* The position. Full size, full contrast — it is the sentence that matters. */
.ledger__us { font-size: .93rem; line-height: 1.6; color: var(--text); margin: 0; }

/* The alternative, ruled off beneath and set small. Deliberately not given
   equal billing: it is context for the claim above, not a competing column. */
.ledger__them {
  margin: .85rem 0 0; padding-top: .75rem;
  border-top: 1px solid var(--line);
  font-size: .82rem; line-height: 1.55; color: var(--text-3);
}
.ledger__them span {
  display: inline; margin-right: .45rem;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-3);
  opacity: .8;
}
.ledger__them span::after { content: " —"; }

@media (max-width: 860px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger__item { padding: 1.4rem 0 1.5rem 2.6rem; }
  .ledger__item:nth-child(odd) { border-right: 0; }
  .ledger__item::before { top: 1.55rem; }
}

/* ── Hero circuit field ──────────────────────────────────────────────────
   The stock version of this idea is cyan neon with a bloom on every trace.
   Both of those are what make it generic, so neither is here: the network is
   brass on navy at low opacity with no glow filter at all, which also means no
   per-frame blur for the compositor to carry.

   The network and its nodes are painted once. Only the runs marked as pulses
   animate, via stroke-dashoffset — a repaint, but on six hairline paths. */
.hero__circuit { position: absolute; inset: 0; overflow: hidden; color: var(--brass); }
.hero__circuit svg { width: 100%; height: 100%; display: block; }
.cx__net { opacity: .85; }
.cx__nodes { opacity: .8; }

/* Each pulse is one short dash on a long empty stroke, walked from the end of
   the run back to its origin. The dasharray is generous so the same rule works
   on every path regardless of its length. */
.cx__pulse {
  stroke-dasharray: 46 1400;
  stroke-dashoffset: 1446;
  opacity: .75;
  animation: cx-run var(--dur) linear var(--lag) infinite;
}
@keyframes cx-run { to { stroke-dashoffset: 0; } }

@media (max-width: 860px) {
  /* The copy runs full width here, so the field sits directly behind the
     headline — pull it back rather than competing with the type. */
  .hero__circuit { opacity: .55; }
  .cx__pulse { animation: none; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cx__pulse { animation: none; opacity: 0; }
}



/* ── Bento refinements ───────────────────────────────────────────────────
   The grid was carrying its whole hierarchy in cell size alone. These add the
   things a printed figure page would have: a rule under the kicker, the unit
   set apart from the numeral, and a foot that tells you which cells are links. */

/* No rule under the kicker. The grid is already built entirely out of 1px gaps,
   so a rule inside each cell put a second line within a few pixels of the first
   and the band turned into a mesh. The kicker is distinguished by being mono,
   uppercase, small and muted — that is enough. */
.bento__kicker { display: block; margin-bottom: .1rem; }

/* Figures: tabular so 70%, 14, 19 and 24/7 sit on one optical baseline across
   the row, and the unit dropped to two-thirds so "14 days" reads as a quantity
   rather than as two words of equal weight. */
.bento__big {
  font-variant-numeric: lining-nums tabular-nums;
  display: flex; align-items: baseline; gap: .12em;
}
.bento__big .unit {
  font-size: .56em; font-weight: 600; letter-spacing: 0;
  color: color-mix(in srgb, var(--brass-2) 82%, transparent);
}

/* Linked cells earn a brass top edge on hover — the grid has no other signal
   that two of these six go somewhere. */
a.bento__cell { text-decoration: none; }
a.bento__cell::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: var(--brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease-out);
}
a.bento__cell:hover::after { transform: scaleX(1); }
a.bento__cell .card__foot { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  a.bento__cell::after { transition: none; }
}

/* ── Quote modal ─────────────────────────────────────────────────────────
   A native <dialog>, so the backdrop, the focus trap and Escape come from the
   browser. It is styled as a paper panel on the ink backdrop — the same two
   tones the rest of the site runs on, rather than the grey overlay a generic
   modal would use. */
.modal {
  width: min(94vw, 520px);
  /* The browser centres a modal dialog with `margin: auto` against `inset: 0`.
     This sheet's reset sets `* { margin: 0 }`, which beats the UA rule and drops
     the panel into the top-left corner — so the centring has to be restated. */
  margin: auto;
  padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--sf-3); color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: visible;
}
.modal::backdrop { background: rgba(10, 16, 28, .62); }
/* The body scrolls, not the dialog, so the close button stays pinned to the
   panel on a short viewport instead of scrolling away with the form. */
.modal__body { padding: clamp(1.5rem, 4vw, 2.1rem); max-height: 88dvh; overflow-y: auto; }
.modal__body h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); }
.modal__dismiss { position: absolute; top: .55rem; right: .55rem; margin: 0; }
.modal__close {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--sf-3); color: var(--text-2); cursor: pointer;
  transition: color .18s, border-color .18s;
}
.modal__close:hover { color: var(--text); border-color: var(--line-3); }
.modal__close svg { width: 16px; height: 16px; }
/* The success line is present from the start so the layout does not jump when
   it appears; it is simply invisible until the form reports back. */
#modal-success { opacity: 0; transition: opacity .25s; }
#modal-success.is-visible { opacity: 1; color: var(--brass); }

/* Entry: a short rise, matched by the backdrop fading in. Dialogs are display:
   none until opened, so `allow-discrete` is what lets the transition run at
   all — without it the panel simply appears. */
@media (prefers-reduced-motion: no-preference) {
  .modal { opacity: 0; transform: translateY(8px); transition: opacity .22s, transform .22s, overlay .22s allow-discrete, display .22s allow-discrete; }
  .modal[open] { opacity: 1; transform: none; }
  @starting-style { .modal[open] { opacity: 0; transform: translateY(8px); } }
  .modal::backdrop { opacity: 0; transition: opacity .22s, overlay .22s allow-discrete, display .22s allow-discrete; }
  .modal[open]::backdrop { opacity: 1; }
  @starting-style { .modal[open]::backdrop { opacity: 0; } }
}

@media (max-width: 560px) {
  .modal { width: 100%; max-width: none; margin: auto auto 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ── Section CTA rows ────────────────────────────────────────────────────
   A button closing a section, with the reassurance set beside it rather than
   inside it — the button says what happens, the note says what it costs. */
.btn-row--cta { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; }
.btn-row--center { justify-content: center; }
.btn-row__note {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
/* Sitting directly under the section head rather than after the content, so it
   is reachable without scrolling the whole band first. */
.btn-row--head { margin-top: 1.6rem; }