/* ==========================================================================
   TheVVProject - Design System
   --------------------------------------------------------------------------
   Vision sets the direction. Velocity closes the distance.

   One stylesheet. No build step. No imports. No external URLs, no image
   files - every texture, glow, grid and icon here is drawn with CSS.

   Contents
     01. Tokens                 11. Trust bar
     02. Reset                  12. Stat band
     03. Typography scale       13. Cards
     04. Layout                 14. Service list
     05. Buttons                15. Method / timeline
     06. Header / nav           16. Feature / split
     07. Drawer                 17. Regions
     08. Hero                   18. Plans
     09. Page hero              19. Quotes
     10. (see 11 below)         20. Insights / posts
                                21. People
                                22. Accordion
                                23. CTA band
                                24. Forms
                                25. Footer
                                26. Prose
                                27. Reveal animation
                                28. Utilities
                                29. Responsive
                                30. Reduced motion / print

   Surface model
     Every component reads contextual tokens (--surface, --text, --text-2,
     --border, --accent, --card-bg ...). Light surfaces get the defaults from
     :root. Dark surfaces (.hero, .section--dark, .cta-band, .site-footer,
     .drawer, .page-hero[data-tone="dark"]) re-declare the same token names,
     so nested components flip automatically without extra classes.

   Header offset
     .site-header is fixed. The FIRST element inside <main> must be one of
     .hero, .page-hero, or .section - each of those reserves --header-h of
     top padding for itself.
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  /* --- Ink / dark surfaces ------------------------------------------------ */
  --void:      #08080F;
  --ink-950:   #0D0D16;
  --ink-900:   #14141F;
  --ink-800:   #1D1D2B;
  --ink-700:   #2A2A3C;

  /* --- Paper / light surfaces --------------------------------------------- */
  --paper:     #FBFAF7;
  --paper-2:   #F3F1EC;
  --paper-3:   #EAE7E0;
  --line:      #E3DFD6;
  --line-dark: rgba(255,255,255,0.12);

  /* --- Text ---------------------------------------------------------------- */
  --ink:       #0E0E16;
  --ink-2:     #3A3A4C;
  --muted:     #63637A;   /* 4.5:1+ on both --paper and --paper-2 */
  --on-dark:   #F4F3F0;
  --on-dark-2: rgba(244,243,240,0.70);
  --on-dark-3: rgba(244,243,240,0.56);  /* 4.5:1+ over --void and --ink-900 */

  /* --- Accents: violet = VISION, aqua = VELOCITY --------------------------- */
  --v1:        #6D4AFF;
  --v1-soft:   #8E74FF;
  --v1-tint:   #EFEAFF;
  --v2:        #14CBB4;
  --v2-soft:   #45DCC8;
  --v2-tint:   #E1FAF6;

  /* The gradient. Declared once, reused everywhere. */
  --grad:      linear-gradient(100deg, var(--v1) 0%, var(--v2) 100%);
  --grad-soft: linear-gradient(100deg, var(--v1-soft) 0%, var(--v2-soft) 100%);

  /* --- Status (form feedback only; never decorative) ----------------------- */
  --ok:         #0E8C77;
  --ok-tint:    #E1FAF6;
  --danger:     #B3243C;
  --danger-tint:#FCECEF;

  /* --- Radii --------------------------------------------------------------- */
  --radius:      6px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* --- Shadows: soft, cool-tinted ----------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(14,14,22,0.04), 0 2px 8px -2px rgba(14,14,22,0.06);
  --shadow-md: 0 2px 4px rgba(14,14,22,0.04), 0 14px 32px -12px rgba(14,14,22,0.14);
  --shadow-lg: 0 4px 10px rgba(14,14,22,0.05), 0 36px 70px -28px rgba(14,14,22,0.24);

  /* --- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.5s;

  /* --- Layout -------------------------------------------------------------- */
  --container:        1240px;
  --container-narrow: 900px;
  --gutter:           clamp(1.25rem, 4vw, 3rem);
  --header-h:         76px;
  --section-y:        clamp(4.5rem, 9vw, 8rem);
  --section-y-tight:  clamp(2.75rem, 5.5vw, 4.5rem);

  /* --- Type ---------------------------------------------------------------- */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Helvetica, Arial, sans-serif;

  /* --- Contextual surface tokens: LIGHT default --------------------------- */
  --surface:       var(--paper);
  --surface-2:     var(--paper-2);
  --surface-3:     var(--paper-3);
  --text:          var(--ink);
  --text-2:        var(--ink-2);
  --text-3:        var(--muted);
  --border:        var(--line);
  --border-strong: #D6D1C6;
  --accent:        var(--v1);
  --accent-2:      var(--v2);
  --accent-tint:   var(--v1-tint);
  --focus:         var(--v1);
  --grad-fallback: var(--v1);
  --card-bg:       #FFFFFF;
  --card-bd:       var(--line);
  --card-shadow:   var(--shadow-sm);
}

/* --- Contextual surface tokens: DARK ------------------------------------- */
.hero,
.section--dark,
.cta-band,
.site-footer,
.drawer,
.card--dark,
.page-hero[data-tone="dark"],
.page-hero--dark {
  --surface:       var(--void);
  --surface-2:     var(--ink-900);
  --surface-3:     var(--ink-800);
  --text:          var(--on-dark);
  --text-2:        var(--on-dark-2);
  --text-3:        var(--on-dark-3);
  --border:        var(--line-dark);
  --border-strong: rgba(255,255,255,0.22);
  --accent:        var(--v2-soft);
  --accent-2:      var(--v1-soft);
  --accent-tint:   rgba(109,74,255,0.16);
  --focus:         var(--v2);
  --grad-fallback: var(--v1-soft);
  --card-bg:       var(--ink-900);
  --card-bd:       var(--line-dark);
  --card-shadow:   none;
}


/* ==========================================================================
   02. RESET
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  min-height: 100%;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
video,
canvas,
picture { display: block; max-width: 100%; }

img,
video { height: auto; }

svg { flex: none; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; }

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.18em;
}

ul[class],
ol[class] { list-style: none; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

hr { border: 0; }

[hidden] { display: none !important; }

:target { scroll-margin-top: calc(var(--header-h) + 24px); }

[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

::selection {
  background: var(--v1);
  color: #FFFFFF;
}

/* --- Focus ring ----------------------------------------------------------- */
:focus { outline: none; }

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

/* Dark surfaces get the aqua ring so it survives the violet glow. */
.hero :focus-visible,
.section--dark :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.drawer :focus-visible,
.card--dark :focus-visible,
.site-header[data-mode="over"] :focus-visible,
.page-hero[data-tone="dark"] :focus-visible,
.page-hero--dark :focus-visible {
  outline-color: var(--v2);
}


/* ==========================================================================
   03. TYPOGRAPHY SCALE
   .display-xl / .display-lg / .display-md / .display-sm
   .eyebrow / .lede / .small / .tiny / .gradient-text / .muted / .text-center
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

h4, h5, h6 { letter-spacing: -0.02em; line-height: 1.25; }

p { text-wrap: pretty; }

strong, b { font-weight: 600; color: var(--text); }

.display-xl,
.display-lg,
.display-md,
.display-sm {
  font-family: var(--font-display);
  color: var(--text);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.display-xl {
  font-size: clamp(2.9rem, 6.2vw, 5.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.042em;
}

.display-lg {
  font-size: clamp(2.3rem, 4.8vw, 3.9rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.038em;
}

.display-md {
  font-size: clamp(1.85rem, 3.3vw, 2.8rem);
  font-weight: 600;
  line-height: 1.12;
}

.display-sm {
  font-size: clamp(1.35rem, 2.1vw, 1.8rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.028em;
}

/* --- Gradient text -------------------------------------------------------
   Solid colour is declared FIRST so the text is always legible; the clipped
   gradient is layered on top only where the browser supports it.
   The fallback colour travels through --grad-fallback so dark surfaces can
   swap it without out-specificity-ing the @supports block below.
   -------------------------------------------------------------------------- */

.gradient-text,
.display-xl em,
.display-lg em,
.display-md em,
.display-sm em,
h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: inherit;
  color: var(--grad-fallback);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gradient-text,
  .display-xl em,
  .display-lg em,
  .display-md em,
  .display-sm em,
  h1 em, h2 em, h3 em {
    background-image: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Keeps descenders (g, y, p) from being clipped by the text box. */
    padding-bottom: 0.06em;
    margin-bottom: -0.06em;
  }
}

/* --- Eyebrow -------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background-image: var(--grad);
  flex: none;
}

.section-head--center .eyebrow,
.text-center .eyebrow { justify-content: center; }

/* --- Lede ----------------------------------------------------------------- */
.lede {
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 62ch;
  letter-spacing: -0.01em;
}

.text-center .lede,
.section-head--center .lede { margin-inline: auto; }

/* --- Small print ---------------------------------------------------------- */
.small {
  font-size: 0.925rem;
  line-height: 1.6;
}

.tiny {
  font-size: 0.8rem;
  line-height: 1.55;
  letter-spacing: 0.005em;
}

.muted { color: var(--text-3); }

.text-center { text-align: center; }

/* Body copy inside dark surfaces. */
.hero p,
.section--dark p,
.cta-band p,
.card--dark p,
.page-hero[data-tone="dark"] p,
.page-hero--dark p { color: var(--text-2); }

.hero .muted,
.section--dark .muted,
.cta-band .muted,
.card--dark .muted { color: var(--on-dark-2); }


/* ==========================================================================
   04. LAYOUT
   .container / .container--narrow / .section / .section--tight
   .section--dark / .section--paper2 / .section-head / .grid / .stack
   .divider   (.split and .split--reverse live in section 16)
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--surface);
  color: var(--text-2);
}

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

.section--paper2 { --surface: var(--paper-2); --card-bg: #FFFFFF; }

.section--dark {
  background: var(--void);
  color: var(--text-2);
}

/* A hairline seam so two stacked dark blocks stay distinguishable. */
.section--dark + .section--dark { border-top: 1px solid var(--line-dark); }

/* Safety net: if a page opens <main> with a plain .section, it still clears
   the fixed header. */
main > .section:first-child { padding-top: calc(var(--header-h) + var(--section-y)); }
main > .cta-band:first-child { padding-top: calc(var(--header-h) + var(--section-y-tight)); }

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head > * + * { margin-top: 1rem; }

.section-head .eyebrow + * { margin-top: 0; }

/* --- Grids ---------------------------------------------------------------- */
.grid,
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.75rem);
  align-items: start;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Stack ---------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, 1.15rem);
  align-items: flex-start;
}

.text-center .stack,
.section-head--center .stack { align-items: center; }

/* --- Divider -------------------------------------------------------------- */
.divider {
  height: 1px;
  width: 100%;
  border: 0;
  background: var(--border);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}


/* ==========================================================================
   05. BUTTONS
   .btn / .btn--primary / .btn--grad / .btn--ghost / .btn--light
   .btn--sm / .btn--lg / .btn-row / .link-arrow
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.86rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform 0.28s var(--ease),
    box-shadow 0.28s var(--ease),
    background-color 0.28s var(--ease),
    background-position 0.5s var(--ease),
    border-color 0.28s var(--ease),
    color 0.28s var(--ease),
    opacity 0.2s linear;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn[disabled],
.btn[aria-disabled="true"],
.btn.is-busy {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Primary: solid violet ------------------------------------------------ */
.btn--primary {
  background-color: var(--v1);
  color: #FFFFFF;
  box-shadow: 0 8px 20px -10px rgba(109,74,255,0.85);
}

.btn--primary:hover {
  background-color: #5C39F5;
  box-shadow: 0 14px 30px -12px rgba(109,74,255,0.95);
}

/* --- Gradient: the one loud button ---------------------------------------- */
.btn--grad {
  color: #FFFFFF;
  background-color: var(--v1);
  background-image: var(--grad);
  background-size: 190% 100%;
  background-position: 0% 50%;
  box-shadow: 0 8px 22px -10px rgba(109,74,255,0.75);
}

.btn--grad:hover {
  background-position: 100% 50%;
  box-shadow: 0 16px 34px -12px rgba(20,203,180,0.6);
}

/* --- Ghost: outline, inherits its surface --------------------------------- */
.btn--ghost {
  background-color: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: var(--v1);
  color: var(--v1);
  background-color: rgba(109,74,255,0.05);
}

.hero .btn--ghost,
.section--dark .btn--ghost,
.cta-band .btn--ghost,
.site-footer .btn--ghost,
.drawer .btn--ghost,
.page-hero[data-tone="dark"] .btn--ghost,
.page-hero--dark .btn--ghost {
  border-color: rgba(244,243,240,0.28);
  color: var(--on-dark);
}

.hero .btn--ghost:hover,
.section--dark .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.site-footer .btn--ghost:hover,
.drawer .btn--ghost:hover,
.page-hero[data-tone="dark"] .btn--ghost:hover,
.page-hero--dark .btn--ghost:hover {
  border-color: var(--v2-soft);
  color: var(--v2-soft);
  background-color: rgba(20,203,180,0.08);
}

/* --- Light: for dark backgrounds ------------------------------------------ */
.btn--light {
  background-color: var(--paper);
  color: var(--ink);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,0.7);
}

.btn--light:hover {
  background-color: #FFFFFF;
  color: var(--v1);
}

/* --- Sizes ---------------------------------------------------------------- */
.btn--sm {
  padding: 0.6rem 1.15rem;
  font-size: 0.86rem;
}

.btn--lg {
  padding: 1.05rem 2.05rem;
  font-size: 1.02rem;
}

/* --- Button rows ---------------------------------------------------------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

.text-center .btn-row,
.section-head--center .btn-row { justify-content: center; }

/* --- Inline arrow link ---------------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  transition: gap 0.28s var(--ease), color 0.2s linear;
}

.link-arrow::after {
  content: "\2192";
  font-size: 1.05em;
  line-height: 1;
  transform: translateX(0);
  transition: transform 0.28s var(--ease);
}

.link-arrow:hover { gap: 0.7em; }
.link-arrow:hover::after { transform: translateX(3px); }

.link-arrow:hover,
.link-arrow:focus-visible { text-decoration: underline; }


/* ==========================================================================
   06. HEADER / NAV
   .skip-link / .site-header[data-start][data-mode] / .brand / .brand-name
   .vv-mark / .vv-mark--mono / .nav / .nav-link / .header-actions
   .header-phone / .burger
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1200;
  transform: translateY(-140%);
  margin: 0.75rem;
  padding: 0.7rem 1.15rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.25s var(--ease);
}

.skip-link:focus-visible { transform: translateY(0); }

/* --- The bar -------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  color: var(--ink);
  transition:
    background-color 0.4s var(--ease),
    border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    color 0.4s var(--ease),
    backdrop-filter 0.4s var(--ease);
}

.site-header > .container {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.4vw, 2.25rem);
}

/* Transparent over the hero. */
.site-header[data-mode="over"] {
  background-color: transparent;
  border-bottom-color: transparent;
  color: var(--on-dark);
  box-shadow: none;
}

/* Opaque paper once scrolled, or on every inner page. */
.site-header[data-mode="solid"] {
  background-color: rgba(251,250,247,0.86);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line);
  color: var(--ink);
  box-shadow: 0 1px 24px -14px rgba(14,14,22,0.5);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header[data-mode="solid"] { background-color: var(--paper); }
}

/* --- Brand ---------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  color: inherit;
  flex: none;
}

.vv-mark {
  width: 40px;
  height: auto;
  overflow: visible;
  transition: transform 0.45s var(--ease);
}

.brand:hover .vv-mark { transform: translateY(-2px); }

.vv-mark--mono path { stroke: currentColor; }

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: -0.035em;
  color: inherit;
}

.brand-name > span {
  margin-top: 0.28rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.62;
}

/* --- Primary nav ---------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.1rem, 0.8vw, 0.5rem);
}

.nav-link {
  position: relative;
  padding: 0.55rem 0.7rem;
  font-size: 0.925rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: inherit;
  opacity: 0.72;
  transition: opacity 0.22s linear, color 0.22s linear;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background-image: var(--grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible { opacity: 1; }

.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }

.nav-link.is-active,
.nav-link[aria-current="page"] {
  opacity: 1;
  font-weight: 600;
}

.nav-link.is-active::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* --- Header actions ------------------------------------------------------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1.15rem);
  flex: none;
}

.header-phone {
  font-size: 0.85rem;
  font-weight: 500;
  color: inherit;
  opacity: 0.66;
  transition: opacity 0.22s linear;
}

.header-phone:hover { opacity: 1; text-decoration: underline; }

/* --- Burger --------------------------------------------------------------- */
.burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.site-header[data-mode="over"] .burger { border-color: rgba(244,243,240,0.28); }

.burger span {
  position: absolute;
  left: 11px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    top 0.3s var(--ease),
    transform 0.3s var(--ease),
    opacity 0.18s linear;
}

.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }

.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }


/* ==========================================================================
   07. DRAWER (mobile overlay)
   .drawer / .drawer.is-open / .drawer-link / .drawer-meta / body.nav-open
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 940;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: calc(var(--header-h) + 1.75rem) var(--gutter) 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--ink-950);
  background-image:
    radial-gradient(60% 45% at 78% 8%, rgba(109,74,255,0.30), transparent 70%),
    radial-gradient(55% 40% at 12% 96%, rgba(20,203,180,0.20), transparent 72%);
  color: var(--on-dark);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  pointer-events: none;
  transition:
    opacity 0.34s var(--ease),
    transform 0.34s var(--ease),
    visibility 0s linear 0.34s;
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.34s var(--ease),
    transform 0.34s var(--ease),
    visibility 0s linear 0s;
}

.drawer-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 7vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--on-dark);
  transition: color 0.22s linear, padding-left 0.3s var(--ease);
}

.drawer-link:hover,
.drawer-link:focus-visible {
  color: var(--v2-soft);
  padding-left: 0.4rem;
}

.drawer-link > span {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--on-dark-3);
  font-variant-numeric: tabular-nums;
}

.drawer .btn {
  align-self: flex-start;
  margin-top: 1.75rem;
}

.drawer-meta {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--on-dark-2);
}

.drawer-meta p + p { margin-top: 0.75rem; }

.drawer-meta a {
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: rgba(244,243,240,0.35);
}

.drawer-meta a:hover { text-decoration-color: var(--v2-soft); }

/* --- Open state ----------------------------------------------------------- */
body.nav-open {
  overflow: hidden;
  touch-action: none;
}

body.nav-open .site-header { z-index: 960; }

body.nav-open .site-header,
body.nav-open .site-header[data-mode="solid"],
body.nav-open .site-header[data-mode="over"] {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
  color: var(--on-dark);
}

body.nav-open .burger { border-color: rgba(244,243,240,0.28); }


/* ==========================================================================
   08. HERO
   .hero / .hero__bg / .hero__glow / .hero__grid / .hero__inner
   .hero-tag / .hero-stats / .hero-stat
   Everything below is drawn with CSS gradients. No image files.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--void);
  color: var(--on-dark);
  padding-top: calc(var(--header-h) + clamp(4.5rem, 10vw, 8.5rem));
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* Base wash: a cool vertical fall plus a violet bloom from the top. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    radial-gradient(120% 80% at 50% -25%, rgba(109,74,255,0.28), transparent 62%),
    radial-gradient(90% 70% at 88% 110%, rgba(20,203,180,0.16), transparent 64%),
    linear-gradient(180deg, var(--ink-950) 0%, var(--void) 58%, var(--void) 100%);
}

/* The soft violet-to-aqua glow. */
.hero__glow {
  position: absolute;
  top: -22%;
  left: 50%;
  z-index: -2;
  width: min(1180px, 135%);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.85;
  filter: blur(30px);
  background-image:
    radial-gradient(circle at 36% 40%, rgba(109,74,255,0.55), rgba(109,74,255,0) 56%),
    radial-gradient(circle at 66% 58%, rgba(20,203,180,0.40), rgba(20,203,180,0) 55%),
    radial-gradient(circle at 52% 46%, rgba(142,116,255,0.22), rgba(142,116,255,0) 48%);
  animation: vv-drift 18s var(--ease) infinite alternate;
}

@keyframes vv-drift {
  from { transform: translateX(-50%) translateY(0) scale(1); }
  to   { transform: translateX(-50%) translateY(2.5%) scale(1.06); }
}

/* Faint dot + line grid, faded out at the edges with a mask. */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(244,243,240,0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,243,240,0.055) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(244,243,240,0.20) 1px, transparent 1.6px);
  background-size: 72px 72px, 72px 72px, 72px 72px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 85% 72% at 50% 32%, #000 18%, transparent 76%);
  mask-image: radial-gradient(ellipse 85% 72% at 50% 32%, #000 18%, transparent 76%);
}

/* Hairline at the very bottom so the hero meets the next section cleanly. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background-image: linear-gradient(90deg,
    transparent 0%, rgba(109,74,255,0.5) 22%, rgba(20,203,180,0.5) 78%, transparent 100%);
  opacity: 0.5;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 58rem;
}

.hero__inner .display-xl { margin-bottom: 1.5rem; }
.hero__inner .lede { max-width: 56ch; }
.hero__inner .btn-row { margin-top: 2.25rem; }

/* --- Hero tag ------------------------------------------------------------- */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  padding: 0.45rem 1rem 0.45rem 0.85rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-pill);
  background-color: rgba(244,243,240,0.045);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

.hero-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-image: var(--grad);
  box-shadow: 0 0 0 0 rgba(20,203,180,0.55);
  animation: vv-pulse 2.6s var(--ease) infinite;
  flex: none;
}

@keyframes vv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(20,203,180,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(20,203,180,0); }
  100% { box-shadow: 0 0 0 0 rgba(20,203,180,0); }
}

/* --- Hero stats ----------------------------------------------------------- */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line-dark);
}

.hero-stat {
  flex: 1 1 160px;
  min-width: 150px;
  padding-right: 1.5rem;
}

.hero-stat + .hero-stat {
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--line-dark);
}

.hero-stat b,
.hero-stat strong,
.hero-stat .stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--grad-fallback);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-stat b,
  .hero-stat strong,
  .hero-stat .stat__num {
    background-image: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.hero-stat span,
.hero-stat small,
.hero-stat p,
.hero-stat .stat__label {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--on-dark-2);
}


/* ==========================================================================
   09. PAGE HERO (compact hero for inner pages)
   .page-hero / .page-hero__inner / .breadcrumb
   Dark variant (used by 404) via [data-tone="dark"] or .page-hero--dark
   ========================================================================== */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--paper-2);
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 5rem));
  padding-bottom: clamp(2.75rem, 5.5vw, 4.5rem);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(70% 120% at 88% -20%, rgba(109,74,255,0.10), transparent 62%),
    radial-gradient(50% 90% at 4% 120%, rgba(20,203,180,0.09), transparent 64%);
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background-image: var(--grad);
  opacity: 0.55;
}

.page-hero__inner { max-width: 60rem; }

.page-hero__inner .display-lg,
.page-hero__inner .display-xl { margin-bottom: 1.15rem; }

.page-hero__inner .lede { max-width: 58ch; }

.page-hero__inner .btn-row { margin-top: 1.85rem; }

/* --- Dark variant (404 and any dark inner hero) --------------------------- */
.page-hero[data-tone="dark"],
.page-hero--dark {
  background-color: var(--void);
  color: var(--on-dark-2);
  border-bottom-color: var(--line-dark);
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

.page-hero[data-tone="dark"]::before,
.page-hero--dark::before {
  background-image:
    radial-gradient(80% 110% at 50% -30%, rgba(109,74,255,0.30), transparent 66%),
    radial-gradient(60% 90% at 82% 120%, rgba(20,203,180,0.16), transparent 66%),
    linear-gradient(180deg, var(--ink-950), var(--void) 70%);
}

.page-hero[data-tone="dark"] .page-hero__inner,
.page-hero--dark .page-hero__inner { margin-inline: auto; }

/* --- Breadcrumb ----------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.35rem;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.breadcrumb ol,
.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Only list-based breadcrumbs get a generated separator. The inline markup
   used across the site supplies its own <span aria-hidden="true">/</span>,
   so generating one there too would render "Home // Services". */
.breadcrumb li + li::before {
  content: "\002F";
  color: var(--border-strong);
}

.breadcrumb a {
  color: var(--text-2);
  transition: color 0.2s linear;
}

.breadcrumb a:hover { color: var(--v1); text-decoration: underline; }

.breadcrumb [aria-current="page"] { color: var(--text-3); }

.page-hero[data-tone="dark"] .breadcrumb a,
.page-hero--dark .breadcrumb a { color: var(--on-dark-2); }

.page-hero[data-tone="dark"] .breadcrumb a:hover,
.page-hero--dark .breadcrumb a:hover { color: var(--v2-soft); }


/* ==========================================================================
   10 / 11. TRUST BAR
   .trust-bar / .trust-item
   Qualifier statements, not logos.
   ========================================================================== */

.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(1rem, 2vw, 1.75rem);
  font-size: 0.925rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--text);
}

.trust-item + .trust-item { border-left: 1px solid var(--border); }

.trust-item::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 0.42em;
  border-radius: 2px;
  background-image: var(--grad);
  transform: rotate(45deg);
}

.trust-item svg {
  width: 20px;
  height: 20px;
  margin-top: 0.15em;
  color: var(--accent);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
}

.trust-item svg + * { margin-top: 0; }

.section--dark .trust-item,
.hero .trust-item { color: var(--on-dark); }


/* ==========================================================================
   12. STAT BAND
   .stat-band / .stat / .stat__num / .stat__label
   Only honest, structural numbers belong here.
   ========================================================================== */

.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background-color: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat {
  background-color: var(--surface);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
  text-align: center;
}

.section--paper2 .stat { background-color: var(--paper-2); }
.section--dark .stat,
.cta-band .stat { background-color: var(--void); }

.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--grad-fallback);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat__num {
    background-image: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.stat__label {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.775rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}

.section--dark .stat__label,
.cta-band .stat__label { color: var(--on-dark-2); }


/* ==========================================================================
   13. CARDS
   .card / .card--dark / .card--outline / .card__icon / .card__title
   .card__text / .card__meta / .card-link
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background-color: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  color: var(--text-2);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease),
    background-color 0.35s var(--ease);
}

/* Gradient hairline that wakes up on hover. */
.card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-image: var(--grad);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.card:hover::before { opacity: 1; }

.card--dark {
  background-color: var(--ink-900);
  border-color: var(--line-dark);
  color: var(--on-dark-2);
  box-shadow: none;
}

.card--dark .card__title,
.card--dark strong,
.card--dark b { color: var(--on-dark); }

.card--outline {
  background-color: transparent;
  box-shadow: none;
  border-color: var(--border-strong);
}

.card--outline:hover { background-color: rgba(109,74,255,0.035); }

.section--dark .card--outline:hover { background-color: rgba(244,243,240,0.035); }

.card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 0.35rem;
  border-radius: 12px;
  background-color: var(--accent-tint);
  color: var(--v1);
  flex: none;
}

.card--dark .card__icon,
.section--dark .card__icon {
  background-color: rgba(109,74,255,0.18);
  color: var(--v1-soft);
}

.card__icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card__title {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.028em;
  color: var(--text);
}

.card__text {
  font-size: 0.965rem;
  line-height: 1.62;
  color: var(--text-2);
}

.card__meta {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.755rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}

.card__meta + .card__meta { padding-top: 0.35rem; }

.card .link-arrow { margin-top: auto; padding-top: 0.6rem; }

/* --- Card that is itself a link ------------------------------------------ */
.card-link {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  height: 100%;
  color: inherit;
  cursor: pointer;
}

.card-link:hover,
a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(109,74,255,0.35);
}

.section--dark .card-link:hover,
.section--dark a.card:hover,
.card--dark.card-link:hover {
  box-shadow: 0 26px 60px -30px rgba(0,0,0,0.9);
  border-color: rgba(69,220,200,0.35);
}

.card-link .card__title { transition: color 0.22s linear; }
.card-link:hover .card__title { color: var(--v1); }
.section--dark .card-link:hover .card__title,
.card--dark.card-link:hover .card__title { color: var(--v2-soft); }


/* ==========================================================================
   14. SERVICE LIST (numbered rows)
   .svc-list / .svc / .svc__num / .svc__body / .svc__title / .svc__text
   .svc__tags / .tag
   ========================================================================== */

.svc-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.svc {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: start;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  transition: padding-left 0.4s var(--ease);
}

a.svc:hover,
.svc:hover { padding-left: clamp(0rem, 1.2vw, 0.9rem); }

/* Soft wash that slides in behind the row on hover. */
.svc::before {
  content: "";
  position: absolute;
  inset: 0 -1.25rem;
  z-index: -1;
  border-radius: var(--radius-lg);
  background-image: linear-gradient(90deg, rgba(109,74,255,0.06), rgba(20,203,180,0.04) 60%, transparent);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.svc:hover::before { opacity: 1; }

.section--dark .svc::before {
  background-image: linear-gradient(90deg, rgba(109,74,255,0.16), rgba(20,203,180,0.08) 60%, transparent);
}

.svc__num {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  transition: color 0.3s linear;
  min-width: 2.2em;
}

.svc:hover .svc__num { color: var(--grad-fallback); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .svc:hover .svc__num {
    background-image: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.svc__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.svc__title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.032em;
  color: var(--text);
  transition: color 0.22s linear;
}

.svc__title::after {
  content: "\2192";
  font-size: 0.78em;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.svc:hover .svc__title { color: var(--v1); }
.svc:hover .svc__title::after { opacity: 1; transform: translateX(0); }

.section--dark .svc:hover .svc__title,
.hero .svc:hover .svc__title { color: var(--v2-soft); }

.svc__text {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--text-2);
  max-width: 68ch;
}

.svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--surface-2);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.section--dark .tag,
.card--dark .tag,
.hero .tag {
  background-color: rgba(244,243,240,0.06);
  border-color: var(--line-dark);
  color: var(--on-dark-2);
}


/* ==========================================================================
   15. METHOD / TIMELINE
   .method / .method__rail / .method__step / .method__num / .method__title
   .method__text
   Phases 01-02 are Vision (violet); 03-05 are Velocity (aqua). The split is
   automatic via :nth-child and can be forced with data-phase="vision|velocity".
   ========================================================================== */

.method {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-left: 0;
}

/* The rail: violet at the top, aqua at the bottom. */
.method__rail {
  position: absolute;
  top: 0.5rem;
  bottom: 2.5rem;
  left: 27px;
  width: 2px;
  border-radius: 2px;
  background-image: linear-gradient(180deg,
    var(--v1) 0%, var(--v1) 32%, var(--v2) 62%, var(--v2) 100%);
  opacity: 0.35;
  pointer-events: none;
}

.method__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}

.method__num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--v1);
  background-color: var(--surface);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--v1);
  box-shadow: 0 0 0 6px var(--surface);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.section--paper2 .method__num { background-color: var(--paper-2); box-shadow: 0 0 0 6px var(--paper-2); }
.section--dark .method__num,
.hero .method__num { background-color: var(--void); box-shadow: 0 0 0 6px var(--void); }

/* Velocity half. */
.method__step:nth-child(n+4) .method__num,
.method__step[data-phase="velocity"] .method__num {
  border-color: var(--v2);
  color: var(--v2);
}

.section--dark .method__step:nth-child(n+4) .method__num,
.section--dark .method__step[data-phase="velocity"] .method__num { color: var(--v2-soft); }

.section--dark .method__step:nth-child(-n+3) .method__num,
.section--dark .method__step[data-phase="vision"] .method__num { color: var(--v1-soft); }

.method__step:hover .method__num { transform: scale(1.06); }

.method__step > div,
.method__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.6rem;
  padding-bottom: 0.5rem;
  min-width: 0;
}

.method__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.03em;
  color: var(--text);
}

.method__text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 66ch;
}

.method__text + .method__text { margin-top: 0.25rem; }

.method .tag { align-self: flex-start; }

/* The rail is decorative; hide it if a page omits the element. */
.method:not(:has(.method__rail))::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 2.5rem;
  left: 27px;
  width: 2px;
  border-radius: 2px;
  background-image: linear-gradient(180deg,
    var(--v1) 0%, var(--v1) 32%, var(--v2) 62%, var(--v2) 100%);
  opacity: 0.3;
}


/* ==========================================================================
   16. FEATURE / SPLIT
   .split / .split--reverse / .feature / .feature__media / .feature__body
   .checklist / .checklist li
   ========================================================================== */

.split,
.feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split > *,
.feature > * { min-width: 0; }

/* Reverse the visual order without touching the DOM order. */
.split--reverse > *:first-child { order: 2; }
.split--reverse > *:last-child  { order: 1; }

.split + .split,
.feature + .feature { margin-top: clamp(3rem, 7vw, 6rem); }

.feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

.feature__body > .btn-row { margin-top: 0.6rem; }

/* --- Media panel: a CSS-drawn stage, no image files ----------------------- */
.feature__media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: clamp(260px, 34vw, 400px);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  background-color: var(--ink-950);
  background-image:
    radial-gradient(80% 90% at 22% 12%, rgba(109,74,255,0.34), transparent 62%),
    radial-gradient(70% 80% at 84% 92%, rgba(20,203,180,0.26), transparent 62%),
    linear-gradient(160deg, var(--ink-900), var(--void));
  color: var(--on-dark);
  box-shadow: var(--shadow-lg);
}

.feature__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right,  rgba(244,243,240,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,243,240,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 10%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 10%, transparent 80%);
}

/* Sheen across the top edge. */
.feature__media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, rgba(244,243,240,0.35), transparent);
}

.feature__media > svg {
  position: relative;
  width: min(72%, 340px);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(8,8,15,0.6));
}

.feature__media > .vv-mark { width: min(56%, 220px); }

.feature__media p,
.feature__media .tiny { position: relative; color: var(--on-dark-2); text-align: center; }

/* --- Checklist ------------------------------------------------------------ */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  padding-left: 2.1rem;
  font-size: 0.985rem;
  line-height: 1.6;
  color: var(--text-2);
}

.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.12em;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--v2-tint);
  color: var(--ok);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.section--dark .checklist li::before,
.card--dark .checklist li::before,
.hero .checklist li::before {
  background-color: rgba(20,203,180,0.18);
  color: var(--v2-soft);
}

/* A checklist marked as symptoms/problems reads better with a violet dot. */
.checklist[data-tone="vision"] li::before {
  content: "\2022";
  background-color: var(--v1-tint);
  color: var(--v1);
  font-size: 1.1rem;
}

.section--dark .checklist[data-tone="vision"] li::before {
  background-color: rgba(109,74,255,0.22);
  color: var(--v1-soft);
}

.checklist li strong { color: var(--text); }


/* ==========================================================================
   17. REGIONS
   .region-grid / .region / .region__name / .region__meta / .globe-visual
   ========================================================================== */

.region-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.region {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.35rem, 2.6vw, 1.9rem);
  background-color: var(--surface);
  transition: background-color 0.3s var(--ease);
}

.section--paper2 .region { background-color: var(--paper-2); }
.section--dark .region { background-color: var(--void); }

.region:hover { background-color: var(--surface-2); }
.section--dark .region:hover { background-color: var(--ink-900); }

.region__name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.028em;
  color: var(--text);
}

.region__name::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-image: var(--grad);
}

.region__meta {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-2);
}

.region .tag { align-self: flex-start; margin-top: 0.15rem; }

/* --- Globe: pure CSS ------------------------------------------------------ */
.globe-visual {
  position: relative;
  isolation: isolate;
  width: min(420px, 100%);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--void);
  background-image:
    radial-gradient(circle at 32% 26%, rgba(142,116,255,0.42), transparent 56%),
    radial-gradient(circle at 72% 74%, rgba(69,220,200,0.34), transparent 56%),
    repeating-linear-gradient(to bottom,
      rgba(244,243,240,0.10) 0 1px, transparent 1px 30px),
    radial-gradient(circle at 50% 50%, var(--ink-900) 0%, var(--void) 74%);
  box-shadow:
    inset 0 0 70px rgba(109,74,255,0.28),
    inset -18px -22px 60px rgba(0,0,0,0.65),
    0 34px 80px -34px rgba(8,8,15,0.85);
}

/* Rotating meridian dots. */
.globe-visual::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  background-image: radial-gradient(circle at center, rgba(244,243,240,0.32) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle at 42% 38%, #000 8%, rgba(0,0,0,0.35) 52%, transparent 72%);
  mask-image: radial-gradient(circle at 42% 38%, #000 8%, rgba(0,0,0,0.35) 52%, transparent 72%);
  animation: vv-spin 42s linear infinite;
}

/* Specular highlight. */
.globe-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: radial-gradient(circle at 30% 22%, rgba(244,243,240,0.16), transparent 42%);
  border: 1px solid rgba(244,243,240,0.14);
}

@keyframes vv-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ==========================================================================
   18. PLANS (engagement models)
   .plans / .plan / .plan--featured / .plan__name / .plan__pitch
   .plan__list / .plan__foot / .plan__badge
   ========================================================================== */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2vw, 1.75rem);
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
  padding: clamp(1.6rem, 2.8vw, 2.25rem);
  background-color: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  color: var(--text-2);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

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

.section--dark .plan:hover { box-shadow: 0 30px 70px -34px rgba(0,0,0,0.9); }

/* --- Featured ------------------------------------------------------------- */
.plan--featured {
  border-color: rgba(109,74,255,0.45);
  box-shadow: var(--shadow-lg);
}

.plan--featured::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-image: var(--grad);
}

.section--dark .plan--featured {
  background-color: var(--ink-900);
  border-color: rgba(142,116,255,0.5);
}

.plan__badge {
  position: absolute;
  top: -0.8rem;
  right: clamp(1.25rem, 2.5vw, 1.9rem);
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.85rem;
  border-radius: var(--radius-pill);
  background-color: var(--v1);
  background-image: var(--grad);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(109,74,255,0.9);
}

.plan__name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.032em;
  color: var(--text);
}

.plan__pitch {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-2);
}

.plan__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}

.plan__list li {
  position: relative;
  padding-left: 1.65rem;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text-2);
}

.plan__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--v2);
  font-size: 0.85rem;
  font-weight: 700;
}

.section--dark .plan__list li::before,
.plan--featured .plan__list li::before { color: var(--ok); }

.section--dark .plan__list li::before { color: var(--v2-soft); }

.plan__foot {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-3);
}

.plan__foot .btn { align-self: stretch; }


/* ==========================================================================
   19. QUOTES
   .quote-grid / .quote / .quote__text / .quote__attr
   ========================================================================== */

.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2vw, 1.75rem);
  align-items: stretch;
}

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  height: 100%;
  padding: clamp(1.75rem, 3vw, 2.4rem);
  padding-top: clamp(2.5rem, 4vw, 3.25rem);
  background-color: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
}

.quote::before {
  content: "\201C";
  position: absolute;
  top: clamp(0.4rem, 1.5vw, 0.9rem);
  left: clamp(1.5rem, 2.6vw, 2.1rem);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--v1-tint);
  pointer-events: none;
}

.section--dark .quote::before,
.card--dark.quote::before { color: rgba(142,116,255,0.28); }

.quote__text {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.022em;
  color: var(--text);
  text-wrap: pretty;
}

.quote__attr {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.quote__attr::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-image: var(--grad);
  flex: none;
}

.quote .tag { align-self: flex-start; }


/* ==========================================================================
   20. INSIGHTS / POSTS
   .post-list / .post / .post__kicker / .post__title / .post__excerpt
   .post__meta
   Posts may be plain <article> elements (no link) - styles never assume <a>.
   ========================================================================== */

.post-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.post {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: clamp(1.75rem, 3.4vw, 2.6rem) 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left 0.4s var(--ease);
}

.post::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -1px;
  left: -1.25rem;
  width: 2px;
  border-radius: 2px;
  background-image: var(--grad);
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: center;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.post:hover::before { opacity: 1; transform: scaleY(1); }

.post:hover { padding-left: clamp(0rem, 1vw, 0.75rem); }

.post__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--accent);
}

.post__kicker::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

.post__title {
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 2.3vw, 1.65rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.033em;
  color: var(--text);
  max-width: 34ch;
  transition: color 0.22s linear;
}

.post:hover .post__title { color: var(--v1); }
.section--dark .post:hover .post__title { color: var(--v2-soft); }

.post__title a { color: inherit; }

.post__excerpt {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--text-2);
  max-width: 68ch;
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.775rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.post__meta > * + *::before {
  content: "\00B7";
  margin-right: 0.75rem;
  color: var(--border-strong);
}

.post__meta .tag { text-transform: uppercase; }

.post .tag { align-self: flex-start; }


/* ==========================================================================
   21. PEOPLE
   .people / .person / .person__avatar / .person__name / .person__role
   .person__bio
   ========================================================================== */

.people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2vw, 1.75rem);
  align-items: stretch;
}

.person {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background-color: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
}

.person__avatar {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 0.6rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--ink-900);
  background-image: var(--grad);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--border);
}

.person__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.person__avatar svg { width: 60%; height: auto; }

.person__name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--text);
}

.person__role {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--accent);
}

.person__bio {
  margin-top: 0.35rem;
  font-size: 0.955rem;
  line-height: 1.62;
  color: var(--text-2);
}

.person .tag { align-self: flex-start; margin-top: auto; padding-top: 0; }


/* ==========================================================================
   22. ACCORDION (FAQ)
   .acc / .acc__item / .acc__btn / .acc__panel
   Collapse is driven by the button's aria-expanded state. The collapsed
   panel is visibility:hidden, so it is removed from the a11y tree and the
   tab order as well as being visually hidden.
   ========================================================================== */

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

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

.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: clamp(1.15rem, 2.2vw, 1.5rem) 0;
  background: none;
  border: 0;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.028em;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: color 0.22s linear;
}

.acc__btn:hover { color: var(--v1); }
.section--dark .acc__btn:hover,
.cta-band .acc__btn:hover { color: var(--v2-soft); }

/* Chevron drawn from two borders. */
.acc__btn::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-3px) rotate(45deg);
  transform-origin: center;
  transition: transform 0.35s var(--ease);
}

.acc__btn[aria-expanded="true"] { color: var(--v1); }
.section--dark .acc__btn[aria-expanded="true"] { color: var(--v2-soft); }

.acc__btn[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
}

.acc__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height 0.36s var(--ease),
    opacity 0.2s linear,
    padding-bottom 0.36s var(--ease),
    visibility 0s linear 0.36s;
}

.acc__btn[aria-expanded="true"] + .acc__panel,
.acc__panel.is-open {
  /* Generous ceiling: FAQ answers are short, this never clips in practice. */
  max-height: 60rem;
  opacity: 1;
  visibility: visible;
  padding-bottom: clamp(1.15rem, 2.2vw, 1.6rem);
  transition:
    max-height 0.5s var(--ease),
    opacity 0.32s linear 0.04s,
    padding-bottom 0.5s var(--ease),
    visibility 0s linear 0s;
}

.acc__panel > * {
  font-size: 1rem;
  line-height: 1.68;
  color: var(--text-2);
  max-width: 74ch;
}

.acc__panel > * + * { margin-top: 0.9rem; }

.acc__panel ul,
.acc__panel ol {
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.acc__panel a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(109,74,255,0.4);
}

.acc__panel a:hover { text-decoration-color: currentColor; }


/* ==========================================================================
   23. CTA BAND
   .cta-band / .cta-band__inner
   ========================================================================== */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background-color: var(--ink-950);
  color: var(--on-dark-2);
  border-top: 1px solid var(--line-dark);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(70% 130% at 12% 0%, rgba(109,74,255,0.32), transparent 62%),
    radial-gradient(60% 120% at 92% 100%, rgba(20,203,180,0.24), transparent 62%);
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(244,243,240,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,243,240,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 5%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 5%, transparent 78%);
}

.cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.cta-band__inner > *:first-child { max-width: 34ch; }

.cta-band__inner .display-md { margin-bottom: 0.9rem; }

.cta-band__inner .lede { color: var(--on-dark-2); max-width: 46ch; }

.cta-band__inner .btn-row { justify-content: flex-end; }


/* ==========================================================================
   24. FORMS
   .form / .form-grid / .field / .field--full / labels / inputs / selects
   .field__hint / .hp / .form-status (.is-ok .is-err .is-busy) / .consent
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.field--full { grid-column: 1 / -1; }

.field label {
  font-size: 0.735rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text-2);
}

.field label abbr,
.field label [aria-hidden="true"] {
  color: var(--v1);
  text-decoration: none;
  border: 0;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.82rem 0.95rem;
  background-color: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  transition:
    border-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease),
    background-color 0.22s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

.field textarea {
  min-height: 9.5rem;
  resize: vertical;
  line-height: 1.62;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--border-strong); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--v1);
  box-shadow: 0 0 0 3px rgba(109,74,255,0.16);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }

.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background-color: var(--paper-2);
  color: var(--muted);
  cursor: not-allowed;
}

/* Only flag invalid fields the user has actually engaged with. */
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid { border-color: rgba(179,36,60,0.55); }

/* Caret drawn with two gradients - no image, no data URI. */
.field select {
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% - 2px), calc(100% - 15px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field__hint {
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--text-3);
}

/* Dark-surface forms. */
.section--dark .field input,
.section--dark .field select,
.section--dark .field textarea,
.card--dark .field input,
.card--dark .field select,
.card--dark .field textarea {
  background-color: rgba(244,243,240,0.05);
  border-color: var(--line-dark);
  color: var(--on-dark);
}

.section--dark .field input::placeholder,
.section--dark .field textarea::placeholder { color: var(--on-dark-3); }

.section--dark .field select {
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--on-dark-2) 50%),
    linear-gradient(135deg, var(--on-dark-2) 50%, transparent 50%);
}

.section--dark .field input:focus,
.section--dark .field select:focus,
.section--dark .field textarea:focus {
  border-color: var(--v2-soft);
  box-shadow: 0 0 0 3px rgba(20,203,180,0.2);
}

/* --- Honeypot: present for bots, gone for everyone else ------------------- */
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* --- Consent row ---------------------------------------------------------- */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-3);
}

.consent input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 0.18em;
  accent-color: var(--v1);
  cursor: pointer;
}

.consent a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(109,74,255,0.4);
}

.consent a:hover { text-decoration-color: currentColor; }

/* --- Status message ------------------------------------------------------- */
.form-status {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface-2);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-2);
}

.form-status:empty { display: none; }

.form-status::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 0.5em;
  border-radius: 50%;
  background-color: var(--muted);
}

.form-status.is-ok {
  background-color: var(--ok-tint);
  border-color: rgba(14,140,119,0.32);
  color: #0A6153;
}

.form-status.is-ok::before { background-color: var(--ok); }

.form-status.is-err {
  background-color: var(--danger-tint);
  border-color: rgba(179,36,60,0.32);
  color: #8E1B2F;
}

.form-status.is-err::before { background-color: var(--danger); }

.form-status.is-busy {
  background-color: var(--v1-tint);
  border-color: rgba(109,74,255,0.3);
  color: #45299E;
}

.form-status.is-busy::before {
  background-color: var(--v1);
  animation: vv-blink 1.1s var(--ease) infinite;
}

@keyframes vv-blink {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}

.section--dark .form-status,
.card--dark .form-status {
  background-color: rgba(244,243,240,0.06);
  border-color: var(--line-dark);
  color: var(--on-dark-2);
}

.section--dark .form-status.is-ok  { background-color: rgba(20,203,180,0.14); color: var(--v2-soft); border-color: rgba(20,203,180,0.35); }
.section--dark .form-status.is-err { background-color: rgba(179,36,60,0.16);  color: #FF9AAA;        border-color: rgba(255,154,170,0.35); }
.section--dark .form-status.is-busy{ background-color: rgba(109,74,255,0.16); color: var(--v1-soft); border-color: rgba(142,116,255,0.35); }

/* Newsletter form sits inline on wide screens. */
#newsletter-form .form-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
#newsletter-form .btn { white-space: nowrap; }


/* ==========================================================================
   25. FOOTER
   .site-footer / .footer-top / .footer-brand / .footer-col / .footer-col h4
   .footer-links / .footer-bottom / .footer-legal / .social
   ========================================================================== */

.site-footer {
  position: relative;
  background-color: var(--void);
  color: var(--on-dark-2);
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(3.5rem, 6.5vw, 5.25rem);
  padding-bottom: 2rem;
  font-size: 0.94rem;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background-image: linear-gradient(90deg,
    transparent, rgba(109,74,255,0.45) 30%, rgba(20,203,180,0.45) 70%, transparent);
  opacity: 0.7;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  max-width: 42ch;
  color: var(--on-dark);
}

.footer-brand .brand { margin-right: 0; color: var(--on-dark); }

.footer-brand p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--on-dark-2);
}

.footer-brand .tiny { color: var(--on-dark-2); }

.footer-brand a {
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: rgba(244,243,240,0.3);
  transition: text-decoration-color 0.22s linear, color 0.22s linear;
}

.footer-brand a:hover {
  color: var(--v2-soft);
  text-decoration-color: var(--v2-soft);
}

.footer-col h4 {
  margin-bottom: 1.05rem;
  font-family: var(--font-display);
  font-size: 0.755rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--on-dark);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  position: relative;
  display: inline-block;
  font-size: 0.925rem;
  line-height: 1.5;
  color: var(--on-dark-2);
  transition: color 0.22s linear;
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background-image: var(--grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--ease);
}

.footer-links a:hover { color: var(--on-dark); }
.footer-links a:hover::after { transform: scaleX(1); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  color: var(--on-dark-2);
}

.footer-bottom .tiny { color: var(--on-dark-2); }

.footer-legal { letter-spacing: 0.02em; }

.social {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--on-dark-2);
  transition:
    border-color 0.25s var(--ease),
    color 0.25s var(--ease),
    background-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.social a:hover {
  border-color: var(--v2-soft);
  color: var(--v2-soft);
  background-color: rgba(20,203,180,0.1);
  transform: translateY(-2px);
}

.social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}


/* ==========================================================================
   26. PROSE (legal + long-form pages)
   .prose / .legal-meta / .toc
   ========================================================================== */

.prose {
  max-width: 74ch;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-2);
}

.prose > * + * { margin-top: 1.15rem; }

.prose h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.032em;
  color: var(--text);
  scroll-margin-top: calc(var(--header-h) + 28px);
}

.prose h2:first-child { margin-top: 0; }

.prose h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 0.7rem;
  border-radius: 2px;
  background-image: var(--grad);
}

.prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.028em;
  color: var(--text);
  scroll-margin-top: calc(var(--header-h) + 28px);
}

.prose h4 {
  margin-top: 1.6rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.prose p { text-wrap: pretty; }

.prose ul,
.prose ol {
  padding-left: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.prose ul { list-style: none; padding-left: 0; }

.prose ul > li {
  position: relative;
  padding-left: 1.6rem;
}

.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background-image: var(--grad);
  transform: rotate(45deg);
}

.prose ol { list-style: decimal; }

.prose ol > li::marker {
  color: var(--accent);
  font-weight: 600;
}

.prose li > ul,
.prose li > ol { margin-top: 0.55rem; }

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(109,74,255,0.4);
  transition: text-decoration-color 0.22s linear;
}

.prose a:hover { text-decoration-color: currentColor; }

.prose strong { color: var(--text); font-weight: 600; }

.prose blockquote {
  margin-top: 1.5rem;
  padding: 1rem 0 1rem 1.35rem;
  border-left: 3px solid var(--v1);
  background-image: linear-gradient(90deg, rgba(109,74,255,0.05), transparent 70%);
  font-size: 1.02rem;
  color: var(--text-2);
}

.prose code {
  padding: 0.15em 0.4em;
  border: 1px solid var(--border);
  border-radius: 4px;
  background-color: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--text);
}

.prose hr {
  height: 1px;
  margin-block: 2.25rem;
  background-color: var(--border);
}

.prose table {
  width: 100%;
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.95rem;
}

.prose thead th {
  background-color: var(--surface-2);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.prose th,
.prose td {
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.prose tbody tr:last-child td { border-bottom: 0; }

.prose tbody tr:nth-child(even) { background-color: rgba(227,223,214,0.28); }

.section--dark .prose tbody tr:nth-child(even) { background-color: rgba(244,243,240,0.04); }

/* --- Legal meta ----------------------------------------------------------- */
.legal-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-bottom: 2rem;
  padding: 0.6rem 1.05rem 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--v1);
  border-radius: var(--radius);
  background-color: var(--surface-2);
  font-size: 0.79rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-3);
}

.legal-meta strong { color: var(--text); }

/* --- Table of contents ---------------------------------------------------- */
.toc {
  margin-bottom: 2.5rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface-2);
}

.toc h2,
.toc h3,
.toc > p:first-child {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-size: 0.755rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.toc h2::after,
.toc h3::after { display: none; }

.toc ol,
.toc ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc li { counter-increment: toc; }

.toc a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.925rem;
  line-height: 1.5;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s linear;
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.toc a:hover { color: var(--v1); text-decoration: underline; }


/* ==========================================================================
   27. REVEAL ANIMATION
   [data-reveal] + .is-in
   JS adds .is-in via IntersectionObserver. If scripting is unavailable the
   media query below shows everything immediately.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

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

@media (scripting: none) {
  [data-reveal] { opacity: 1; transform: none; }
}


/* ==========================================================================
   28. UTILITIES
   .sr-only / .nowrap / [data-count] / [data-year] / .vv-mark sizing
   ========================================================================== */

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nowrap { white-space: nowrap; }

[data-count],
[data-year] { font-variant-numeric: tabular-nums; }

/* Reserve the digits so the count-up never reflows its neighbours. */
[data-count] { display: inline-block; min-width: 1ch; }


/* ==========================================================================
   29. RESPONSIVE
   Breakpoints: 1080 / 900 / 720 / 520
   ========================================================================== */

/* --- <= 1080px: tighten the header, four-ups become two-ups -------------- */
@media (max-width: 1080px) {
  .header-phone { display: none; }

  .nav-link { padding-inline: 0.55rem; font-size: 0.9rem; }
  .nav-link::after { left: 0.55rem; right: 0.55rem; }

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

  .footer-top { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }

  .cta-band__inner { grid-template-columns: minmax(0, 1fr); }
  .cta-band__inner .btn-row { justify-content: flex-start; }
  .cta-band__inner > *:first-child { max-width: 44ch; }

  .feature__media { min-height: 240px; }
}

/* --- <= 900px: burger replaces the nav; most grids halve ----------------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }

  .grid-3,
  .grid-4,
  .people,
  .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan--featured { order: -1; }
  .plan__badge { right: auto; left: clamp(1.25rem, 2.5vw, 1.9rem); }

  .quote-grid { grid-template-columns: minmax(0, 1fr); }

  /* Splits stack; the reverse modifier must stop reordering or the media
     panel ends up above the copy on every other block. */
  .split,
  .feature { grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 2.75rem); }
  .split--reverse > *:first-child { order: 0; }
  .split--reverse > *:last-child  { order: 0; }

  .trust-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item:nth-child(odd) { border-left: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--border); }

  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }

  .toc ol,
  .toc ul { grid-template-columns: minmax(0, 1fr); }

  .hero__inner { max-width: none; }

  .feature__media { min-height: 220px; order: 2; }
}

/* --- <= 720px: single column almost everywhere --------------------------- */
@media (max-width: 720px) {
  :root { --header-h: 64px; }

  .grid-2,
  .grid-3,
  .grid-4,
  .people,
  .region-grid { grid-template-columns: minmax(0, 1fr); }

  .form-grid { grid-template-columns: minmax(0, 1fr); }
  #newsletter-form .form-grid { grid-template-columns: minmax(0, 1fr); }

  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .svc { grid-template-columns: minmax(0, 1fr); gap: 0.55rem; }
  .svc__num { min-width: 0; }
  .svc:hover { padding-left: 0; }
  .svc::before { inset: 0 -1rem; }

  .method__num { width: 46px; height: 46px; font-size: 0.85rem; }
  .method__rail,
  .method:not(:has(.method__rail))::before { left: 22px; }
  .method__step { gap: 1rem; }
  .method__step > div,
  .method__body { padding-top: 0.35rem; }

  .hero-stat {
    flex: 1 1 100%;
    padding: 0.9rem 0;
  }
  .hero-stat + .hero-stat {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line-dark);
  }

  .stat-band { grid-template-columns: minmax(0, 1fr); }

  .prose table { display: block; overflow-x: auto; white-space: nowrap; }

  .drawer { padding-top: calc(var(--header-h) + 1.25rem); }

  .globe-visual { width: min(320px, 100%); }

  .quote { padding-top: clamp(2.25rem, 6vw, 2.75rem); }
}

/* --- <= 520px: phone -------------------------------------------------------- */
@media (max-width: 520px) {
  body { font-size: 16px; }

  .brand-name > span { display: none; }
  .brand-name b { font-size: 1rem; }
  .vv-mark { width: 34px; }

  .header-actions .btn { display: none; }

  .trust-bar { grid-template-columns: minmax(0, 1fr); }
  .trust-item { border-left: 0 !important; }
  .trust-item + .trust-item { border-top: 1px solid var(--border); }

  .btn-row { width: 100%; }
  .btn-row > .btn { flex: 1 1 100%; }

  .drawer .btn { align-self: stretch; }

  .hero-tag {
    letter-spacing: 0.06em;
    font-size: 0.7rem;
  }

  .card,
  .plan,
  .person,
  .quote { padding: 1.35rem; }

  .quote { padding-top: 2.4rem; }

  .post__meta { gap: 0.35rem 0.6rem; }

  .legal-meta { width: 100%; }
}

/* --- Tall / wide screens: let the hero breathe --------------------------- */
@media (min-width: 1440px) {
  .hero { padding-top: calc(var(--header-h) + 9rem); }
}


/* ==========================================================================
   30. REDUCED MOTION + PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  /* Never trap content behind an animation that will not play. */
  [data-reveal],
  [data-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__glow,
  .globe-visual::before,
  .hero-tag::before,
  .form-status.is-busy::before { animation: none !important; }

  .btn:hover,
  .card-link:hover,
  a.card:hover,
  .plan:hover,
  .social a:hover,
  .brand:hover .vv-mark { transform: none !important; }

  .svc:hover,
  .post:hover { padding-left: 0 !important; }

  .drawer-link:hover { padding-left: 0 !important; }
}

@media print {
  :root {
    --header-h: 0px;
    --surface: #FFFFFF;
    --text: #000000;
    --text-2: #000000;
    --text-3: #333333;
    --border: #BBBBBB;
    --card-bg: #FFFFFF;
    --card-bd: #BBBBBB;
    --card-shadow: none;
  }

  * {
    background: transparent !important;
    box-shadow: none !important;
    color: #000000 !important;
    text-shadow: none !important;
  }

  body {
    background: #FFFFFF !important;
    font-size: 11pt;
    line-height: 1.5;
  }

  .skip-link,
  .site-header,
  .drawer,
  .burger,
  .cta-band,
  .hero__glow,
  .hero__grid,
  .hero__bg,
  .globe-visual,
  .feature__media,
  .social,
  .btn,
  .btn-row { display: none !important; }

  .hero,
  .page-hero,
  .section,
  .site-footer {
    padding-block: 1.25rem !important;
    border: 0 !important;
  }

  .hero::after,
  .page-hero::after,
  .site-footer::before,
  .card::before,
  .plan--featured::before { display: none !important; }

  /* Gradient text has no meaning on paper - force it solid. */
  .gradient-text,
  .display-xl em,
  .display-lg em,
  .display-md em,
  .display-sm em,
  h1 em, h2 em, h3 em,
  .stat__num,
  .hero-stat b,
  .hero-stat strong {
    background-image: none !important;
    -webkit-text-fill-color: #000000 !important;
    color: #000000 !important;
  }

  [data-reveal] { opacity: 1 !important; transform: none !important; }

  /* Collapsed FAQ answers should still print. */
  .acc__panel {
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-bottom: 0.75rem !important;
  }

  .acc__btn::after { display: none !important; }

  .prose a[href^="http"]::after,
  .prose a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; }
  .card, .plan, .quote, .person, .svc, .method__step { page-break-inside: avoid; break-inside: avoid; }
}