/* ==========================================================================
   Base — reboot overrides, typography, layout primitives, motion utilities
   Loads after vendor/bootstrap.min.css and tokens.css
   ========================================================================== */

:root {
  --bs-body-font-family: var(--ff-body);
  --bs-body-font-size: var(--fs-body);
  --bs-body-line-height: var(--lh-body);
  --bs-body-color: var(--c-text);
  --bs-body-bg: var(--c-white);
  --bs-link-color: var(--c-primary);
  --bs-link-color-rgb: 66, 44, 108;
  --bs-link-hover-color: var(--c-primary-deep);
  --bs-link-hover-color-rgb: 42, 27, 71;
  --bs-border-color: var(--c-line);
  --bs-emphasis-color: var(--c-ink);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { font-family: var(--ff-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); background: var(--c-white); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }

h1, h2, h3, h4, h5, h6, .htitle { font-family: var(--ff-head); font-weight: 700; color: var(--c-ink); line-height: var(--lh-tight); letter-spacing: -.01em; margin: 0; }
/* .htitle: a card or step title that looks like an h3 but is a <p> (one H1 + one H2 rule: cards are not headings) */
h3, h4, .htitle { font-weight: 600; line-height: 1.3; letter-spacing: 0; }
/* One section heading size sitewide (user rule, 2026-10-22): every H2 (and h3.sec-title) is --fs-h2, at most 2 lines on desktop */
h2 { font-size: var(--fs-h2); }
p { margin: 0; }
p + p { margin-top: var(--s-4); }
/* a card title that used to be an <h3> (.htitle) must not push the next paragraph down:
   same specificity as `p + p`, so any component class rule still wins */
p:where(.htitle) + p { margin-top: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-deep); }
strong { color: var(--c-ink); font-weight: 600; }
address { margin: 0; font-style: normal; }
::selection { background: var(--c-primary); color: #fff; }

/* Focus — visible everywhere; ink ring on amber buttons (see .btn-tp--accent) */
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Container — 1380 incl. gutters (--container-max), 16/24/32px side padding */
.container { max-width: var(--container-max); padding-inline: 16px; }
@media (min-width: 768px) { .container { padding-inline: 24px; } }
@media (min-width: 1200px) { .container { padding-inline: 32px; } }

.section { padding-block: var(--section-y); }
.section--surface { background: var(--c-surface); border-block: 1px solid var(--c-line); }
.section--dark { position: relative; overflow: hidden; background-color: var(--c-primary-deep); background-image: var(--grid-dark); background-size: var(--grid-size) var(--grid-size); color: var(--c-on-dark); }
.section--dark h2, .section--dark h3 { color: #fff; }
.bg-grid { background-color: var(--c-surface); background-image: var(--grid-light); background-size: var(--grid-size) var(--grid-size); }

/* Skip link */
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10000; background: var(--c-ink); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); font-weight: 600; transition: top var(--t-fast) var(--ease); }
.skip-link:focus { top: 16px; color: #fff; }

/* Icons (sprite) */
.ico { width: 1.25em; height: 1.25em; flex: 0 0 auto; stroke-width: 1.75; }
.ico--sm { width: 1em; height: 1em; }
.ico--lg { width: 1.5em; height: 1.5em; }
.ico--bold { stroke-width: 2.25; }

/* Visually hidden (keeps Bootstrap's name too) */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* ==========================================================================
   Motion utilities (spec: docs/04 → Motion)
   ========================================================================== */
@keyframes tp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tp-spin { to { transform: rotate(360deg); } }
@keyframes tp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes tp-marquee { to { transform: translateX(-50%); } }
@keyframes tp-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); } 70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }
@keyframes tp-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Ambient loops (CSS) — never put data-anim / data-parallax on the same element
   (GSAP and CSS animations would fight over `transform`; wrap instead). */
/* Retired 2026-10-29 (rework: no continuous decorative motion). Only the hero drive and the logo marquee move. */
.spin, .spin-fast, .spin-slow, .float { animation: none; }
.pulse { animation: tp-pulse 2.6s ease-out infinite; }

/* Count-up: number rendered by CSS counter (GSAP tweens --n); real value in .sr-only sibling.
   Without JS the final value (--to) shows. */
@property --n { syntax: "<integer>"; initial-value: 0; inherits: false; }
.count { --n: var(--to); counter-reset: n var(--n); font-variant-numeric: tabular-nums; }
.count::after { content: counter(n); }

/* GSAP reveals (assets/js/animations.js). html.js-anim is set by the inline head script
   only when motion is allowed; a failsafe removes it if GSAP doesn't load. Elements stay
   hidden until GSAP animates them in, then get .is-animated. */
.js-anim [data-anim]:not(.is-animated):not([data-anim="rise"]) { visibility: hidden; }
/* "rise" never hides (LCP-safe for H1 / lead text): painted at first frame, offset, then slides in */
.js-anim [data-anim="rise"]:not(.is-animated) { transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-anim] { visibility: visible !important; }
}