/* VAXA semantic color system — loaded last across public routes.
   Color = meaning. Synthesis-only colors are prefixed and scoped. */
:root {
  --c-bg: #0a0a0a;
  --c-surface: #111111;
  --c-surface-elevated: #151515;
  --c-text: #fff;
  --c-muted: rgba(255,255,255,.55);
  --c-hairline: rgba(255,255,255,.12);
  --c-accent: #a2e435;
  --c-live: #ff7a5c;
  --c-synth-cyan: #4ee0ff;
  --c-synth-magenta: #ff5cc7;
  --c-synth-purple: #b08bff;

  --bg: var(--c-bg);
  --bg-alt: var(--c-bg);
  --fg: var(--c-text);
  --fg-strong: var(--c-text);
  --fg-medium: var(--c-muted);
  --fg-faint: var(--c-hairline);
  --muted: var(--c-muted);
  --line: var(--c-hairline);
  --lime: var(--c-accent);
  --accent: var(--c-accent);
  --accent-bright: var(--c-accent);
  --coral: var(--c-live);
  --warm: var(--c-live);

  --vaxa-site-bg: var(--c-bg);
  --vaxa-site-fg: var(--c-text);
  --vaxa-site-muted: var(--c-muted);
  --vaxa-site-faint: var(--c-hairline);
  --vaxa-site-lime: var(--c-accent);
  --vaxa-site-accent-secondary: var(--c-accent);
  --vaxa-site-violet: var(--c-accent);
  --tnr-bg: var(--c-bg);
  --tnr-fg: var(--c-text);
  --tnr-muted: var(--c-muted);
  --tnr-accent: var(--c-accent);
  --tnr-accent-hover: var(--c-accent);

  --t-display: clamp(3.6rem, 12vw, 11rem);
  --t-statement: clamp(2.6rem, 7vw, 6rem);
  --t-headline: clamp(2.2rem, 5vw, 4.2rem);
  --t-body: .95rem;
  --t-label: .78rem;
  --t-proof: clamp(2.2rem, 4.6vw, 3.6rem);
  --t-proof-large: clamp(2.4rem, 5vw, 4rem);
  --t-proof-card: clamp(1rem, 1.25vw, 1.22rem);
  --t-proof-credit: clamp(1.4rem, 1.85vw, 1.625rem);
  --t-work-title: clamp(1.45rem, 2vw, 2rem);
  --leading-display: .82;
  --leading-statement: .9;
  --leading-body: 1.42;
  --tracking-label: .14em;

  --space-section-y: clamp(88px, 10vw, 144px);
  --space-section-x: clamp(18px, 4vw, 56px);
  --space-grid-gap: clamp(14px, 1.6vw, 22px);
  --space-card-gap: 14px;
  --space-zero: 0px;
  --eyebrow-dot-size: 7px;
  --eyebrow-dot-gap: 10px;
  --eyebrow-dot-block-gap: 18px;
  --contact-rule-w: 64px;
  --contact-rule-gap: 20px;

  --radius-pill: 999px;
  --radius-panel: 18px;
  --hairline: 1px;
  --bracket-size: 28px;
  --bracket-stroke: 1px;
  --bracket-offset: 0;

  --motion-ease: cubic-bezier(.22,1,.36,1);
  --motion-fast: .18s;
  --motion-med: .32s;
  --motion-slow: .6s;
  --marquee-speed: 55s;
  --media-grade: saturate(.88) contrast(1.08) brightness(.78) sepia(.06) hue-rotate(8deg);
  --media-grade-hover: saturate(.96) contrast(1.1) brightness(.9) sepia(.04) hue-rotate(8deg);
  --media-scrim: linear-gradient(180deg, rgba(10,10,10,.06) 0%, rgba(10,10,10,.30) 48%, rgba(10,10,10,.82) 100%);

  --testimonial-bracket-size: var(--bracket-size);
  --testimonial-bracket-thick: var(--bracket-stroke);
  --testimonial-dur: var(--marquee-speed);
  --testimonial-fade: var(--motion-med);
  --marquee-brands-dur: var(--marquee-speed);
}

html,
body { background: var(--c-bg) !important; color: var(--c-text) !important; }
::selection { background: var(--c-accent) !important; color: var(--c-bg) !important; }

/* Type system */
h1, h2, h3, h4,
.hero-h1,
.h2,
.system-kicker,
.nm,
.case h3,
.card h3,
.person .name,
.section-head h2,
.band h2,
.quote,
.testimonial-quote,
.founder-quote,
.hero-copy .lead,
.hero-display h1,
.hero-deck h2 {
  color: var(--c-text) !important;
  text-wrap: balance !important;
  line-height: var(--leading-statement) !important;
}
.hero-h1,
.hero-display h1 { font-size: var(--t-display) !important; line-height: var(--leading-display) !important; max-width: 12ch !important; }
@media (min-width: 641px) {
  body[data-vaxa-route="home"] .hero-h1 {
    max-width: none !important;
    font-size: clamp(3.6rem, 9vw, 8.8rem) !important;
  }
  body[data-vaxa-route="home"] .hero-h1 span > i { white-space: nowrap; }
}
.h2,
.system-kicker,
.section-head h2,
.band h2 { font-size: var(--t-statement) !important; max-width: 13ch !important; }
.founder-headline,
.card h3,
.person .name { font-size: var(--t-headline) !important; }
.case h3,
.case .nm { font-size: var(--t-work-title) !important; }
p,
.lead,
.copy,
.body,
.sub,
.hero-pre,
.hero-stat-sub,
.hero-deck,
.hero-note,
.card p,
.person p,
.section-head p,
.band p,
.case .cat,
.site-footer p {
  color: var(--c-muted) !important;
  font-size: var(--t-body) !important;
  line-height: var(--leading-body) !important;
}
.lead { font-size: var(--t-label) !important; line-height: 1.6 !important; }
.hero-eyebrow,
.label-c,
.label-lime,
.eyebrow,
.mono,
.meta,
.meta-year,
.tag,
.stat-sm,
.ledger-group .ll,
.ledger-group .lm .lu,
.count-line,
.caption,
figcaption,
.person .role,
.build-pill,
.site-nav,
.nav,
.site-drawer-foot,
.site-drawer-list .fine,
.founder-pretitle,
.founder-label,
.svc-eb,
.svc-when,
.svc-progress-labels,
.synth-eb,
.synth-lead,
.synth-hint {
  color: var(--c-muted) !important;
  font-size: var(--t-label) !important;
  letter-spacing: var(--tracking-label) !important;
  text-transform: uppercase !important;
}

/* Intentional lime: eyebrow dot, one key number, CTAs/interactions, brackets. */
.hero-eyebrow .dot,
.dotmark,
.label-c::before,
.label-lime::before,
.synth-eb .ed,
.founder-pretitle::before,
.services-intro::before,
.contact-block::before,
.site-footer::before,
.card-corner i,
.hero-display h1 .dot,
.reticle-dot,
.live-velocity-dot,
.velocity-dot {
  background: var(--c-accent) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c-accent) 55%, transparent) !important;
}
.label-c::before,
.label-lime::before,
.founder-pretitle::before,
.services-intro::before,
.contact-block::before {
  content: "";
  display: inline-block;
  width: var(--eyebrow-dot-size);
  height: var(--eyebrow-dot-size);
  border-radius: var(--radius-pill);
  margin-right: var(--eyebrow-dot-gap);
  vertical-align: .08em;
}
.services-intro::before,
.contact-block::before {
  margin: 0 auto var(--eyebrow-dot-block-gap);
  display: block;
}

/* CTAs, links, hover/active, reticle */
a:hover,
button:hover,
.nav-pill a:hover,
.nav-pill a.is-active,
.site-nav a:hover,
.site-nav a[aria-current="page"],
.site-drawer-list .ix,
.project-link,
.hero-cta,
.pill-link,
.load-more,
.button,
.cta-pill,
.widget.accent,
.reticle,
.view-link,
.sources a,
.founder-toggle {
  color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
}
.button,
.cta-pill,
.widget.accent,
.load-more,
.pill-link,
.hero-cta,
.founder-toggle {
  border-radius: var(--radius-pill) !important;
  background: color-mix(in srgb, var(--c-accent) 12%, transparent) !important;
  box-shadow: 0 0 28px color-mix(in srgb, var(--c-accent) 14%, transparent) !important;
}
.nav-pill a::after,
.site-nav a::after,
.progress,
.hero-line {
  background: var(--c-accent) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c-accent) 60%, transparent) !important;
}

/* Proof numbers: aligned, same figure logic. */
.hero-stat,
.velocity-stat,
.vi-value,
.ledger-group .lm,
.intro-text .credit > strong,
.credit-num,
.law-num,
.step-num,
.svc-num,
.track span,
.info-stat,
.capital-proof b,
.meta .meta-num,
.filter span,
.person .num,
.case .stat,
.synth-case-result strong,
.source-list strong,
.ocean-detail b,
.result-card strong,
.stat,
.stat b,
.num,
.number,
[data-stat] {
  color: var(--c-accent) !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  font-weight: 650 !important;
}
.hero-stat { font-size: var(--t-proof) !important; line-height: 1 !important; }
.ledger-group .lm { font-size: var(--t-proof-large) !important; line-height: 1 !important; }
.case .stat { font-size: var(--t-proof-card) !important; line-height: 1 !important; }
.intro-text .credit > strong,
.credit-num { font-size: var(--t-proof-credit) !important; line-height: 1 !important; }
.stat-sm,
.case .stat .stat-sm { color: var(--c-muted) !important; font-size: var(--t-label) !important; font-weight: 400 !important; }

/* Live/now only. */
.live-dot,
.velocity-dot,
.vi-status,
.vi-status::before,
.campaign-live,
.live-velocity,
.live-velocity-dot {
  color: var(--c-live) !important;
  background-color: var(--c-live) !important;
  border-color: var(--c-live) !important;
}

/* Bracket / reticle signature motif. */
.t-bracket,
.reticle-corner,
.founder-label > .t-bracket,
.intro-text .credit > .t-bracket {
  width: var(--bracket-size) !important;
  height: var(--bracket-size) !important;
  border-color: var(--c-accent) !important;
  border-style: solid !important;
  border-width: 0 !important;
}
.t-bracket.tl,
.reticle-corner.tl { top: var(--bracket-offset) !important; left: var(--bracket-offset) !important; border-top-width: var(--bracket-stroke) !important; border-left-width: var(--bracket-stroke) !important; }
.t-bracket.tr,
.reticle-corner.tr { top: var(--bracket-offset) !important; right: var(--bracket-offset) !important; border-top-width: var(--bracket-stroke) !important; border-right-width: var(--bracket-stroke) !important; }
.t-bracket.bl,
.reticle-corner.bl { bottom: var(--bracket-offset) !important; left: var(--bracket-offset) !important; border-bottom-width: var(--bracket-stroke) !important; border-left-width: var(--bracket-stroke) !important; }
.t-bracket.br,
.reticle-corner.br { bottom: var(--bracket-offset) !important; right: var(--bracket-offset) !important; border-bottom-width: var(--bracket-stroke) !important; border-right-width: var(--bracket-stroke) !important; }
.founder-label,
.contact-block .hero-cta { position: relative !important; }

/* Spacing + surfaces */
main > section,
.block,
.services,
.synth,
.founder,
.contact-block,
.team,
section.section,
.chapter,
.site-footer {
  padding-top: max(var(--space-section-y), var(--nav-clearance, var(--space-zero))) !important;
  padding-bottom: var(--space-section-y) !important;
  padding-left: var(--space-section-x) !important;
  padding-right: var(--space-section-x) !important;
}
.gallery,
.grid,
.team-grid,
.method,
.proof,
.image-band,
.collage,
.synth-flow,
.services-wrap { gap: var(--space-grid-gap) !important; }
.case,
.card,
.person,
.product-card,
.founder-card,
.synth-case-shell,
.synth-step,
.result-card,
.controls,
.modal-panel,
.portrait,
.site-footer,
.contact-block {
  background-color: var(--c-surface) !important;
  border: var(--hairline) solid var(--c-hairline) !important;
  border-radius: var(--radius-panel) !important;
}
.case:hover,
.card:hover,
.person:hover,
.product-card:hover { border-color: var(--c-accent) !important; }
.site-footer,
.contact-block { background: linear-gradient(180deg, var(--c-surface), var(--c-bg)) !important; }

/* Components */
button,
input,
select,
.filter,
.tag,
.chip,
.widget,
.hero-cta,
.pill-link,
.load-more,
.button,
.cta-pill,
.site-menu-toggle,
.site-drawer-close { border-radius: var(--radius-pill) !important; }
hr,
.rule,
.divider,
.site-header,
.ledger,
section { border-color: var(--c-hairline) !important; }

/* Media grade and text scrim consistency. */
img,
video,
.card img,
.card video,
.case .photo,
.product-card .pimg,
.svc-image,
.hero-video,
.t-photo,
.portrait img,
.hero-media img,
.hero-media video {
  filter: var(--media-grade) !important;
}
.card:hover img,
.card:hover video,
.case:hover .photo,
.product-card:hover .pimg { filter: var(--media-grade-hover) !important; }

/* Methodology evidence cards: graded down + desaturated until focused.
   The full-colour portfolio reveal is reserved for Recent launches. */
#introCards .product-card .pimg,
#introCards .product-card:hover .pimg { filter: var(--media-grade) grayscale(1) brightness(.92) !important; }
#introCards .product-card.is-current .pimg,
#introCards .product-card.is-current:hover .pimg { filter: var(--media-grade) !important; }
.card::before,
.case .photo::after,
.product-card::before,
.hero-scrim,
.founder-eyes::after { background: var(--media-scrim) !important; }

/* Motion scale */
*, *::before, *::after { transition-timing-function: var(--motion-ease) !important; }
.ledger-track,
.brands-track,
.team-track,
.testimonial-track { animation-duration: var(--marquee-speed) !important; }
.reveal,
.card,
.case,
.product-card,
.person,
.svc-image,
.testimonial-card { transition-duration: var(--motion-med) !important; animation-timing-function: var(--motion-ease) !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ledger-track,
  .brands-track,
  .team-track { transform: none !important; }
}

/* Remove orphan standalone dots only where they have no label. Keep labeled eyebrow dots. */
.services-intro::before,
.contact-block::before,
.contact-block > .label-c:last-child::before {
  content: none !important;
  display: none !important;
}

/* Mobile has no hover target; hide the site-wide hover reticle so its dot cannot read as an orphan section marker. */
@media (max-width: 768px), (hover: none) {
  .reticle { display: none !important; }
}

/* Old per-section rainbow accents stay neutral outside synthesis. */
.label-c.c-lime,
.label-c.c-muted,
.accent-lime h2 em,
.accent-lime .h2 em,
.accent-neutral h2 em,
.accent-neutral .h2 em { color: var(--c-muted) !important; }
.contact-block .h2::after {
  content: "";
  display: block;
  width: var(--contact-rule-w);
  height: var(--hairline);
  background: var(--c-accent);
  margin: var(--contact-rule-gap) auto 0;
}

/* Synthesis section is the only place where non-lime chroma can speak. */
.synth .synth-eb,
.synth .synth-eb .ed,
.synth h2 em,
.synth-key--magenta { color: var(--c-synth-magenta) !important; }
.synth .synth-eb .ed { background: var(--c-synth-magenta) !important; }
.synth-key--cyan { color: var(--c-synth-cyan) !important; }
.synth-key--purple,
.synth-key--violet { color: var(--c-synth-purple) !important; }
.synth-key--yellow { color: var(--c-accent) !important; }


/* HOTFIX v3 — type sizes restored to pre-fine-tune proportions. */
.hero-h1 { font-size: clamp(3.6rem, 12vw, 11rem) !important; }
.h2, .system-kicker, .section-head h2, .band h2 { font-size: clamp(2.6rem, 7vw, 6rem) !important; }
.lead { font-size: .78rem !important; line-height: 1.6 !important; }
.case .cat, .card p, .person p, .section-head p, .band p { font-size: .95rem !important; }
.hero-stat { font-size: clamp(2.2rem, 4.6vw, 3.6rem) !important; }
.ledger-group .lm { font-size: clamp(2.4rem, 5vw, 4rem) !important; }
.case .stat { font-size: clamp(1rem, 1.25vw, 1.22rem) !important; }
.credit-num, .intro-text .credit > strong { font-size: clamp(1.4rem, 1.85vw, 1.625rem) !important; }
.case .nm { font-size: clamp(1.45rem, 2vw, 2rem) !important; }
.hero-eyebrow, .label-c, .label-lime, .eyebrow, .mono, .meta, .tag, .stat-sm, .ledger-group .ll, .ledger-group .lm .lu, .count-line, .caption, figcaption, .person .role, .build-pill, .site-nav, .nav, .founder-pretitle, .founder-label, .svc-eb, .svc-progress-labels, .synth-eb, .synth-lead, .synth-hint { font-size: .68rem !important; letter-spacing: var(--tracking-label) !important; }
/* HOTFIX v3 — exact small-label restoration by component. */
.hero-eyebrow { font-size: .7rem !important; }
.label-c, .label-lime { font-size: .78rem !important; }
.case .stat .stat-sm { font-size: .58rem !important; letter-spacing: .12em !important; }
.intro-text .credit-label { font-size: .85rem !important; }
/* HOTFIX v3b — ensure labels are never larger than old build; shrink mobile hero to avoid longest-line clipping at 390px. */
:root { --t-display: clamp(3.25rem, 12vw, 11rem); --t-label: .68rem; }
.hero-eyebrow, .label-c, .label-lime { font-size: var(--t-label) !important; }
@media (min-width: 641px) {
  body[data-vaxa-route="home"] .hero-h1 {
    max-width: none !important;
    font-size: clamp(3.6rem, 8.2vw, 8.2rem) !important;
    line-height: .94 !important;
  }
  body[data-vaxa-route="home"] .hero-h1 span { overflow: visible !important; }
  body[data-vaxa-route="home"] .hero-h1 span > i { white-space: nowrap; }
}
@media (max-width: 640px) {
  body[data-vaxa-route="home"] .hero-h1 {
    font-size: clamp(2rem, 10vw, 3.1rem) !important;
    line-height: .96 !important;
  }
  body[data-vaxa-route="home"] .hero-h1 span { overflow: visible !important; }
}