/* Stride Consultancy Partners.
   Generated by tools/build.py from tools/site.css and data/brand.json.
   Edit the template and the tokens, not this file. */

/* ---------- Tokens, straight from data/brand.json ---------- */
:root {
  --orange: #FF6A00;
  --amber: #FFB347;
  --navy: #0F172A;
  --slate: #475569;
  --mist: #F2F6FB;
  --white: #FFFFFF;
  --surface: #FAFAFA;
  --line: #EBEBEC;
  --line-strong: #DEDEE0;
  --text: #111114;
  --text-dim: #6B6B72;
  --radius: 14px;
  --navy-hover: #1c2942;
  --pill: 999px;
  /* derived, see data/brand.json for the reason behind each */
  --accent-deep: #B84800;
  --on-dark-dim: #A3ADBD;
  --line-on-dark: #2A3650;
  --orange-hover: #E65F00;
  --canvas-2: #F7F9FC;

  /* Semantic roles. Every band remaps these, so a component never names a
     raw colour and contrast is decided once per surface. */
  --ground: var(--white);
  --ground-2: var(--surface);
  --card: var(--white);
  --ink: var(--text);
  --ink-2: var(--slate);
  --ink-3: var(--text-dim);
  --heading: var(--navy);
  --accent: var(--accent-deep);
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --focus: var(--navy);
  --btn-bg: var(--navy);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--navy-hover);
  --btn-outline: var(--slate);
  --btn-outline-fg: var(--navy);
  --btn-outline-hover-bg: var(--mist);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1160px;
  --pad: 40px;
}

/* Inside a dark band the accent goes back to the official orange, which is
   6.22:1 on navy but only 2.87:1 on white. */
.band-dark {
  --ground: var(--navy);
  --ground-2: var(--navy-hover);
  --card: var(--navy-hover);
  --ink: var(--white);
  --ink-2: var(--on-dark-dim);
  --ink-3: var(--on-dark-dim);
  --heading: var(--white);
  --accent: var(--orange);
  --rule: var(--line-on-dark);
  --rule-strong: #3A4761;
  --focus: var(--amber);
  --btn-bg: var(--white);
  --btn-fg: var(--navy);
  --btn-bg-hover: var(--mist);
  --btn-outline: var(--on-dark-dim);
  --btn-outline-fg: var(--white);
  --btn-outline-hover-bg: var(--navy-hover);
  background: var(--ground);
  color: var(--ink);
}

.band-tint {
  --ground: var(--mist);
  --ground-2: var(--canvas-2);
  --card: var(--white);
  --btn-outline-hover-bg: var(--white);
  background: var(--ground);
}

/* ---------- Font ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2?v=f11d729b") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin: 0 0 .35em; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  color: var(--heading);
  font-weight: 600;
  line-height: 1.15;
}
h1 { font-size: 2.5rem; letter-spacing: -0.035em; line-height: 1.08; }
h2 { font-size: 1.85rem; letter-spacing: -0.025em; }
h3 { font-size: 1.3rem; letter-spacing: -0.015em; }
h4 { font-size: 1.08rem; letter-spacing: -0.01em; }
h5, h6 { font-size: 0.92rem; letter-spacing: 0; }
@media (max-width: 640px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
/* Grid children may shrink below their content width, and long addresses wrap. */
.grid > *, .footer-grid > *, .contact-grid > *, .split > *, .with-rail > *, .hero-grid > *, .steps > * { min-width: 0; }
.contact-list a, .footer-contact a, .topbar a, .rail a { overflow-wrap: anywhere; }
@media (max-width: 640px) { :root { --pad: 22px; } }

.eyebrow {
  display: block;
  margin: 0 0 .9rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.lead { font-size: 1.02rem; line-height: 1.65; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: 0.88rem; }
.mono { font-family: var(--mono); font-size: 0.92rem; }

/* Body links: ink with a hairline, accent on hover. Accent is measured on
   every light ground in data/brand.json. */
.prose a, .body-link, .contact-list a, .card-link, .rail a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.prose a:hover, .body-link:hover, .contact-list a:hover, .card-link:hover, .rail a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--pill);
  font-weight: 600;
}
.skip:focus { left: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .65rem 1.25rem;
  border-radius: var(--pill);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn svg { width: 14px; height: 14px; flex: none; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn-primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); transform: translateY(-1px); }
.btn-primary:active { transform: none; }
.btn-secondary { background: transparent; color: var(--btn-outline-fg); border-color: var(--btn-outline); }
.btn-secondary:hover { background: var(--btn-outline-hover-bg); }
/* The one orange control on a page: the header Get a Quote pill. Label is
   --text at 6.56:1 on the rest fill and 5.39:1 on the hover fill. */
.btn-accent { background: var(--orange); color: var(--text); border-color: var(--orange); }
.btn-accent:hover { background: var(--orange-hover); border-color: var(--orange-hover); transform: translateY(-1px); }
.btn-accent:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

/* Firevolve band. The one place on the site that leads with the accent rather
   than using it as a highlight, so it sits on a dark ground where the accent
   is legible: orange is 6.22:1 on navy and amber 10.02:1, both measured. The
   top edge repeats the logo's gradient, which is the only other place the
   palette runs end to end. */
.cta-fv { padding: 124px 0; text-align: center; position: relative; overflow: hidden; }
.cta-fv::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(96deg, var(--navy) 0%, var(--accent-deep) 42%, var(--orange) 76%, var(--amber) 100%);
}
.cta-fv .eyebrow { color: var(--amber); }
.cta-fv h2 { font-size: clamp(2.2rem, 5.4vw, 3.7rem); line-height: 1.04; letter-spacing: -0.022em; margin-bottom: .5em; }
.cta-fv .lead { max-width: 56ch; margin: 0 auto 2.2rem; }
.cta-fv__go { margin: 0; }
.cta-fv .btn { font-size: 1.02rem; padding: .95rem 1.9rem; }
@media (max-width: 640px) { .cta-fv { padding: 76px 0; } }

/* Firevolve, Services page: a short, informational section, not a teaser.
   Deliberately not band-dark: the section right below it already is, and two
   dark bands touching stops reading as a break, the same reasoning that put
   the home page band above the hero rather than against the dark contact
   band. */
.cta-fv-services__highlights {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.cta-fv-services__highlights li {
  font-weight: 600; color: var(--navy); text-align: center;
  padding: 1rem 1.1rem; background: var(--mist); border-radius: var(--radius);
}
.cta-fv-services__integrations { color: var(--ink-2); margin: 0 0 1.75rem; }
.cta-fv-services__go { margin: 0; }
@media (max-width: 640px) {
  .cta-fv-services__highlights { grid-template-columns: 1fr; }
}

/* A bigger, one-time burst from the centre of the whole banner, distinct
   from the small looping burst around the button. Plays twice on load, then
   stays gone. Deliberately NOT built with rotate(var(--ang)) translateX(...):
   that composition, driven entirely by CSS custom properties inside a
   multi-function transform, produced correct positions by every measurement
   (getBoundingClientRect, a CDP-throttled real screenshot) but still failed
   to render as a spread burst for a real visitor, in a way none of that
   tooling reproduced. Rather than keep chasing a browser-specific transform
   composition quirk blind, every spark below carries its OWN precomputed
   pixel destination (--dx, --dy), and animates a plain translate() on two
   independent axes: nothing left for a browser to get creative interpreting. */
/* Pulled 23 Aug 2026: three rebuilds all measured correctly in testing
   (pixel positions, slow-motion capture, plain screenshots) but James kept
   seeing a clustered dot on the real site, live, with his own eyes. That is
   the only signal that actually matters, and it never changed across three
   different techniques, so the fault is something about the real viewing
   conditions this testing never reproduced, not something more CSS tuning
   fixes blind. display:none until diagnosed properly. */
.cta-fv__banner-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
/* Only what every spark shares. Size, colour, delay and the keyframe name
   are per-spark and arrive from the generated :nth-child rules appended to
   this stylesheet by the build, NEVER from a style attribute: the site's
   CSP is style-src 'self' with no 'unsafe-inline', so the browser refuses
   inline styles and any custom property declared there simply never exists.
   See tools/gen_fireworks.py. */
.cta-fv__banner-burst .bspark {
  position: absolute; left: 0; top: 0;
  border-radius: 50%;
  opacity: 0;
  animation-duration: 15s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
/* A photo of the real, deployed page showed the actual fault: sparks were
   growing and fading in place, dead centre, never moving outward. scale()
   was animating correctly; translate(calc(-50% + var(--dx) * .25), ...) was
   not, on whatever real rendering path was being used. Custom properties
   used simply (background: var(--c), animation-delay: var(--delay)) were
   fine; it was specifically the multi-term calc() combining a custom
   property with arithmetic INSIDE an animated transform function that broke,
   silently, with no error, in a way three engines under automation never
   reproduced. Every spark below gets its own literal, fully-baked keyframe
   rule instead, real pixel numbers, no var() or calc()-with-a-variable
   anywhere near transform. See tools/pages/home.html for the generator. */
@media (prefers-reduced-motion: reduce) { .cta-fv__banner-burst { display: none; } }

/* A firework burst around the button. Twelve sparks radiate out along a fixed
   angle each (rotate stays constant, translateX grows), fade in fast, fade
   out before the loop restarts, so it reads as a periodic pop rather than a
   constant spray. Pure CSS, no image, no script; the button underneath is
   real markup with pointer-events untouched, the sparks sit in front but
   cannot be clicked (pointer-events: none) or reached by a screen reader
   (aria-hidden, decorative only). */
.cta-fv__go { margin: 0; position: relative; display: inline-block; }
.cta-fv__fireworks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.cta-fv__fireworks .spark {
  position: absolute; left: 0; top: 0;
  width: 6px; height: 6px; border-radius: 50%;
  opacity: 0;
  animation-duration: 2.8s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
/* Same fix as the banner burst: literal per-spark keyframes, no var()/calc()
   inside transform. */
@media (prefers-reduced-motion: reduce) { .cta-fv__fireworks { display: none; } }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--mist);
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--slate);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; flex-wrap: wrap; }
.topbar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.topbar li { margin: 0; }
.topbar a { color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; }
.topbar a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .18em; }
.topbar svg { width: 14px; height: 14px; }
@media (max-width: 760px) { .topbar { display: none; } }

/* ---------- Header ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--navy); }
/* The coloured lockup is a gradient, and a gradient cannot be re-tinted
   through currentColor the way the old flat mark was. So each ground gets its
   own symbol and CSS chooses between them: the gradient on screen, flat black
   on paper. Widths are fixed from the arrangement ratio so nothing shifts
   while the sprite loads. */
.logo-svg { display: block; color: var(--navy); }
/* 55px, not the old 32px. The mark's proportions changed: the tall S now
   sets the height, so the word is 58% of the box instead of all of it. At
   55px the wordmark is back to the 32px it has always been and the lockup
   is 129px wide against the old 138px, so it occupies the same slot and the
   header does not move. */
.logo-lockup { height: 55px; width: calc(55px * 2.35); }
.logo--print { display: none; }

/* Footer: the gradient lockup with the traced tagline under it. The tagline
   is still currentColor, so it follows the band. */
.logo-stack { display: flex; flex-direction: column; align-items: flex-start; }
.logo-stack__mark { height: 72px; width: calc(72px * 2.35); }
.logo-stack__tag {
  color: var(--white);
  margin-top: calc(72px * 0.3);
  width: calc(72px * 2.35 * 0.62);
  height: calc(72px * 2.35 * 0.62 / 4.3632);
}
.nav { display: flex; align-items: center; gap: 1.25rem; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .15rem; }
.nav li { margin: 0; position: relative; }
.nav a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: .5rem .7rem; border-radius: 8px; color: var(--navy); font-size: 0.92rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav a:hover { background: var(--mist); }
.nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--orange); border-radius: 8px 8px 0 0; }
.nav .has-sub > a svg { width: 10px; height: 10px; }
.nav .sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: .4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.nav .has-sub:hover > .sub, .nav .has-sub:focus-within > .sub { display: flex; }
.nav .sub a { display: flex; width: 100%; border-radius: 9px; }
.menu-toggle { display: none; white-space: nowrap; }
.nav .menu-close { display: none; }
.nav .menu-close svg { width: 16px; height: 16px; }
.header-cta, .menu-cta { white-space: nowrap; }

/* The header pill now reveals two lines instead of one, "Get a Quote" -> the
   Firevolve teaser. white-space stays nowrap so neither LINE wraps on its
   own, but the container becomes a column so the two spans stack instead of
   sitting side by side. */
/* No hyphens around FIREVOLVE?, and the arrow moved out of the text flow
   entirely: with the arrow inline on line 2, its width only added space on
   the right, so FIREVOLVE? centred a few pixels left of the Shhh line above
   it. The arrow now sits pinned to the pill's right edge, vertically
   centred across both lines, so line 1 and line 2 are pure centred text and
   line up on the same axis. */
/* .menu-cta sits inside .nav, and .nav a (0,1,1) outranks a single-class rule
   like .cta-fv-btn (0,1,0): it was silently winning on padding, min-height,
   gap, border-radius and color, so changes here had no visible effect on the
   mobile button. Two classes (0,2,0) beats one-class-one-element regardless
   of source order, so both button instances are named explicitly. */
.header-cta.cta-fv-btn, .menu-cta.cta-fv-btn {
  position: relative; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; line-height: 1.15; padding: .55rem 2.7rem .55rem 1.15rem; min-height: 52px;
  border-radius: var(--pill); color: var(--text);
}
.cta-fv-btn__l1 { font-size: .7rem; font-weight: 700; opacity: .82; }
.cta-fv-btn__l2 { font-size: .95rem; font-weight: 700; }
.cta-fv-btn__arrow { position: absolute; right: .95rem; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; }
body.menu-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav { display: none; }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .5rem .9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
    color: var(--navy);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    background: var(--white);
  }
  .menu-toggle svg { width: 16px; height: 16px; }
  .header-cta { display: none; }
  .logo-lockup { height: 44px; width: calc(44px * 2.35); }
  /* Without JavaScript the Menu link targets #menu and :target opens it. With
     JavaScript the same panel is toggled and gets a focus trap. */
  .nav:target, .nav.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--white);
    overflow: auto;
    padding: 1.5rem var(--pad) 2rem;
  }
  .nav:target ul, .nav.is-open ul { flex-direction: column; align-items: stretch; gap: .2rem; }
  .nav:target a, .nav.is-open a { font-size: 1.05rem; padding: .75rem .9rem; }
  .nav:target .cta-fv-btn, .nav.is-open .cta-fv-btn { padding: .55rem 2.7rem .55rem 1.15rem; font-size: 0.84rem; }
  .nav:target .sub, .nav.is-open .sub { display: flex; position: static; border: 0; padding: 0 0 0 1rem; min-width: 0; }
  .nav:target .has-sub > a svg, .nav.is-open .has-sub > a svg { display: none; }
  .nav:target .menu-close, .nav.is-open .menu-close, .nav .menu-close:where(.nav:target *, .nav.is-open *) {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    margin: 0 0 1rem;
    padding: .5rem .9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
    color: var(--navy);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--white);
  }
  .nav:target .menu-cta, .nav.is-open .menu-cta { margin-top: 1.25rem; }
  .nav .menu-cta { display: none; }
  .nav:target .menu-cta, .nav.is-open .menu-cta { display: inline-flex; }
}
@media (min-width: 901px) { .nav .menu-cta { display: none; } }

/* ---------- Sections ---------- */
.section { padding: 80px 0; }
.section + .section:not(.band-dark):not(.band-tint) { padding-top: 0; }
.section-head { max-width: 62ch; margin-bottom: 2.5rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: .5rem; }
.section-head p { color: var(--ink-2); margin: 0; }
@media (max-width: 640px) { .section { padding: 56px 0; } }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 80px; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 1.1rem; }
.hero .lead { max-width: 46ch; margin-bottom: 1.75rem; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.hero-media img { width: 100%; border-radius: var(--radius); object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .hero { padding: 48px 0 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Page title band on inner pages */
.page-head { padding: 56px 0 48px; border-bottom: 1px solid var(--line); background: var(--surface); }
.page-head h1 { margin-bottom: .6rem; }
.page-head .lead { margin: 0; max-width: 60ch; }
.crumbs { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; font-size: 0.82rem; color: var(--ink-3); }
.crumbs li { margin: 0; display: inline-flex; align-items: center; gap: .35rem; }
.crumbs li + li::before { content: "/"; color: var(--rule-strong); }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.crumbs [aria-current="page"] { color: var(--navy); font-weight: 500; }

/* ---------- Split media ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.rev > .split-media { order: 2; }
.split-media img { width: 100%; border-radius: var(--radius); object-fit: cover; aspect-ratio: 4 / 3; }
.split-media.portrait img { aspect-ratio: 4 / 5; object-position: top; }
.split-copy > :last-child { margin-bottom: 0; }
.split-copy .btn { margin-top: .5rem; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split.rev > .split-media { order: 0; }
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.card > :last-child { margin-bottom: 0; }
.stack-gap { margin-bottom: 20px; }
.card h3, .card h4 { margin-bottom: .25rem; }
.card p { color: var(--ink-2); margin: 0; }
.card ul { margin: .25rem 0 0; padding-left: 1.1em; color: var(--ink-2); }
.card .icon { width: 48px; height: 48px; margin-bottom: .6rem; }
.card .nova-logo { width: 220px; height: auto; margin-bottom: .75rem; }
.card .card-link { margin-top: auto; padding-top: .75rem; font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: .35rem; width: fit-content; }
.card-link svg { width: 14px; height: 14px; }
.card-photo { padding: 0; overflow: hidden; }
.card-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-photo h3 { padding: 18px 24px; margin: 0; }
.band-dark .card { border-color: var(--rule); }

/* Numbered steps */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.steps li { counter-increment: step; margin: 0; }
.steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: .75rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 0.92rem;
}
.band-dark .steps li::before { background: var(--orange); color: var(--text); }
.steps h3 { margin-bottom: .25rem; }
.steps p { color: var(--ink-2); margin: 0; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Lists ---------- */
.checks { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.checks li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.band-dark .checks li::before { background: var(--orange); }

/* ---------- Testimonials ---------- */
.quote { height: 100%; }
.quote blockquote { margin: 0; font-size: 0.98rem; color: var(--ink); }
.quote blockquote p { color: var(--ink); }
.quote .who { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: .9rem; }
.quote .who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
/* Testimonial monogram. The portraits were stock models attached to real
   people's names, so the faces came off and the initials took their place:
   same 44px slot, so the card height and the grid do not move. Decorative,
   the name beside it is the real text. Navy on mist, 16.45:1. */
.quote .who__monogram {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--mist); color: var(--navy);
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em;
}
.band-dark .quote .who__monogram { background: var(--line-on-dark); color: var(--white); }
.quote .who strong { font-size: 0.92rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.contact-list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.contact-list li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .8rem; }
.contact-list svg { width: 18px; height: 18px; flex: none; margin-top: .2rem; color: var(--accent); }
.contact-list a { text-decoration-color: var(--rule-strong); }
.contact-list .label { display: block; font-size: 0.78rem; color: var(--ink-3); }

.form-card {
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  /* A form card sits inside the dark band on the home page, so it declares
     its own light-surface roles rather than inheriting the band's. */
  --ink: var(--text);
  --ink-2: var(--slate);
  --ink-3: var(--text-dim);
  --heading: var(--navy);
  --accent: var(--accent-deep);
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --focus: var(--navy);
  --btn-bg: var(--navy);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--navy-hover);
}
.form-card h2, .form-card h3 { color: var(--navy); }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: .35rem; color: var(--navy); }
.field .hint { display: block; font-size: 0.8rem; color: var(--text-dim); margin-top: .3rem; }
.field input, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: .6rem .8rem;
  border: 1px solid var(--slate);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
  font: inherit;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-color: var(--navy); }
.field .count { font-size: 0.8rem; color: var(--text-dim); text-align: right; margin-top: .3rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 0.82rem; color: var(--text-dim); margin: .75rem 0 0; }
.form-status { display: none; margin-top: 1rem; padding: .9rem 1rem; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--mist); color: var(--text); }
.form-status.show { display: block; }
.form-status.error { border-color: var(--accent-deep); }
.required-note { font-size: 0.8rem; color: var(--text-dim); margin: -.25rem 0 1rem; }

.map-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: .75rem; font-weight: 600; }
.map-link svg { width: 16px; height: 16px; }

/* ---------- Prose (legal pages, about) ---------- */
.prose { max-width: 74ch; overflow-wrap: anywhere; }
.prose h2 { font-size: 1.35rem; margin-top: 2.25rem; }
.prose h3 { font-size: 1.08rem; margin-top: 1.6rem; }
.prose ol, .prose ul { padding-left: 1.4em; }
.prose li { margin-bottom: .5rem; }
.prose dl { margin: 0 0 1.25rem; }
.prose dt { font-weight: 600; color: var(--navy); margin-top: .9rem; }
.prose dd { margin: .2rem 0 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 0 0 1.25rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .6rem .7rem; border-top: 1px solid var(--line); }
.prose th { color: var(--navy); font-weight: 600; }
.table-wrap { overflow-x: auto; }
.prose .note { border-left: 3px solid var(--orange); padding: .1rem 0 .1rem 1rem; color: var(--ink-2); }

.rail { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; background: var(--surface); font-size: 0.92rem; }
.rail h2 { font-size: 1.02rem; margin-bottom: .75rem; }
.rail p { margin-bottom: .6rem; }
.rail p:last-child { margin-bottom: 0; }
.with-rail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
@media (max-width: 900px) { .with-rail { grid-template-columns: 1fr; } }

.facts { font-size: 0.82rem; color: var(--ink-3); }

/* ---------- Footer ---------- */
.site-footer { padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--rule); }
.site-footer h2 { font-size: 0.8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-dim); margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 .55rem; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: .18em; }
.footer-brand .logo-stack { margin-bottom: 1.1rem; }
.footer-brand p { color: var(--on-dark-dim); max-width: 34ch; margin: 0 0 1rem; }
.social { display: flex; gap: .5rem; margin-top: .75rem; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--rule-strong); border-radius: 50%; color: var(--white); }
.social a:hover { border-color: var(--orange); color: var(--orange); }
.social svg { width: 17px; height: 17px; }
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; }
.footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: .25rem; color: var(--orange); }
.footer-legal { padding: 22px 0 28px; font-size: 0.82rem; color: var(--on-dark-dim); display: grid; gap: .5rem; }
.footer-legal p { margin: 0; }
.footer-legal .links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-legal a { color: var(--white); }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Header hairline after scroll (JS adds .scrolled) ---------- */
.site-header.scrolled { border-bottom-color: var(--line-strong); }

/* ---------- 404 / thanks ---------- */
.center-block { max-width: 56ch; margin: 0 auto; text-align: center; padding: 72px 0; }
.center-block .btn { margin-top: .75rem; }

/* ---------- Style guide ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.swatch { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.swatch-fill { height: 88px; }
.swatch-info { padding: 10px 12px; font-size: 0.8rem; }
.swatch-info .mono { display: block; color: var(--text-dim); font-size: 0.76rem; }
.sw-orange { background: var(--orange); }
.sw-amber { background: var(--amber); }
.sw-navy { background: var(--navy); }
.sw-slate { background: var(--slate); }
.sw-mist { background: var(--mist); }
.sw-white { background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sw-surface { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sw-accent-deep { background: var(--accent-deep); }
.sw-on-dark-dim { background: var(--on-dark-dim); }
.sw-line-on-dark { background: var(--line-on-dark); }
.sw-orange-hover { background: var(--orange-hover); }
.sw-navy-hover { background: var(--navy-hover); }
.sw-canvas-2 { background: var(--canvas-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sw-text { background: var(--text); }
.sw-text-dim { background: var(--text-dim); }
.sw-line { background: var(--line); }
.sw-line-strong { background: var(--line-strong); }
.type-sample { display: flex; gap: 28px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.type-sample .label { font-family: var(--mono); font-size: 0.74rem; color: var(--text-dim); width: 150px; flex: none; }
.type-sample > p { margin: 0; flex: 1; min-width: 240px; }
.type-sample .hero-sample { font-size: clamp(2.3rem, 4.6vw, 3.5rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--navy); }
.guide-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.guide-row > * { min-width: 0; max-width: 100%; }
.guide-row .card-link { width: auto; }

/* Logo candidates on the style guide: header, footer and favicon sizes on
   white, mist and navy. Images carry their own fill, so no remap here. */
.logo-compare { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 640px; }
.logo-row { display: flex; align-items: center; gap: 28px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
.logo-row.on-white { background: var(--white); }
.logo-row.on-surface { background: var(--surface); }
.logo-row.on-mist { background: var(--mist); }
.logo-row.on-navy { background: var(--navy); border-color: var(--navy); }
.logo-row img { height: auto; }
.logo-row .lg-header { height: 55px; width: auto; }
.logo-row .lg-footer { height: 128px; width: auto; }
.logo-row .lg-fav32 { width: 32px; height: 32px; }
.logo-row .lg-fav16 { width: 16px; height: 16px; }
/* Two columns at every width: the brief wants A beside B. Rows wrap inside. */
@media (max-width: 760px) { .logo-compare { gap: 12px; } .logo-row { flex-wrap: wrap; gap: 14px; padding: 14px; } }

/* ---------- Print ---------- */
@media print {
  .topbar, .site-header .nav, .menu-toggle, .header-cta, .hero-actions, .social, .skip, .form-card, .map-link { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .band-dark, .band-tint { background: #fff !important; color: #000 !important; --ink: #000; --ink-2: #333; --ink-3: #333; --heading: #000; --accent: #000; }
  .band-dark a, .site-footer a, .site-footer h2, .footer-brand p, .footer-legal { color: #000 !important; }
  .site-footer { border-top: 1px solid #000; }
  .hero-media, .split-media, .card-photo img, .quote .who img { display: none; }
  /* Paper gets the flat black lockup, not the gradient. */
  .logo--screen { display: none; }
  .logo--print { display: block; }
  .logo-svg { color: #000 !important; }
  .logo-stack__mark { height: 64px; width: calc(64px * 2.35); }
  .logo-stack__tag { color: #000 !important; margin-top: calc(64px * 0.3);
    width: calc(64px * 2.35 * 0.62);
    height: calc(64px * 2.35 * 0.62 / 4.3632); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
  .section, .hero, .page-head { padding: 18pt 0; border: 0; }
  .card { border: 1px solid #999; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}

/* generated per-spark keyframes, see tools/pages/home.html */
/* Generated by tools/gen_fireworks.py. Per-spark geometry, colour,
   size and delay live HERE and never in a style attribute, because
   the site's CSP sets style-src 'self' with no 'unsafe-inline' and
   the browser refuses inline styles outright. */
@keyframes cta-fv-bb-0{0%{opacity:0;transform:translate(calc(-50% + -1.1px),calc(-50% + -42.2px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + -2.0px),calc(-50% + -81.1px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + -4.2px),calc(-50% + -168.9px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(1){width:8px;height:8px;background:var(--orange);box-shadow:0 0 10px 1px var(--orange);animation-name:cta-fv-bb-0;animation-delay:0.48s}@keyframes cta-fv-bb-1{0%{opacity:0;transform:translate(calc(-50% + 12.2px),calc(-50% + -53.1px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + 23.4px),calc(-50% + -102.0px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + 48.8px),calc(-50% + -212.5px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(2){width:5px;height:5px;background:var(--amber);box-shadow:0 0 10px 1px var(--amber);animation-name:cta-fv-bb-1;animation-delay:0.44s}@keyframes cta-fv-bb-2{0%{opacity:0;transform:translate(calc(-50% + 26.1px),calc(-50% + -46.7px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + 50.1px),calc(-50% + -89.7px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + 104.4px),calc(-50% + -186.8px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(3){width:6px;height:6px;background:var(--orange);box-shadow:0 0 10px 1px var(--orange);animation-name:cta-fv-bb-2;animation-delay:0.40s}@keyframes cta-fv-bb-3{0%{opacity:0;transform:translate(calc(-50% + 29.6px),calc(-50% + -26.1px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + 56.8px),calc(-50% + -50.2px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + 118.4px),calc(-50% + -104.6px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(4){width:6px;height:6px;background:var(--amber);box-shadow:0 0 10px 1px var(--amber);animation-name:cta-fv-bb-3;animation-delay:0.41s}@keyframes cta-fv-bb-4{0%{opacity:0;transform:translate(calc(-50% + 57.7px),calc(-50% + -27.1px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + 110.8px),calc(-50% + -52.0px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + 230.8px),calc(-50% + -108.4px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(5){width:5px;height:5px;background:#FFFFFF;box-shadow:0 0 10px 1px #FFFFFF;animation-name:cta-fv-bb-4;animation-delay:0.51s}@keyframes cta-fv-bb-5{0%{opacity:0;transform:translate(calc(-50% + 55.6px),calc(-50% + -7.0px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + 106.7px),calc(-50% + -13.3px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + 222.3px),calc(-50% + -27.8px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(6){width:5px;height:5px;background:var(--orange);box-shadow:0 0 10px 1px var(--orange);animation-name:cta-fv-bb-5;animation-delay:0.47s}@keyframes cta-fv-bb-6{0%{opacity:0;transform:translate(calc(-50% + 44.1px),calc(-50% + 5.7px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + 84.7px),calc(-50% + 10.9px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + 176.5px),calc(-50% + 22.8px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(7){width:5px;height:5px;background:var(--amber);box-shadow:0 0 10px 1px var(--amber);animation-name:cta-fv-bb-6;animation-delay:0.47s}@keyframes cta-fv-bb-7{0%{opacity:0;transform:translate(calc(-50% + 47.2px),calc(-50% + 18.7px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + 90.6px),calc(-50% + 35.9px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + 188.7px),calc(-50% + 74.8px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(8){width:6px;height:6px;background:var(--orange);box-shadow:0 0 10px 1px var(--orange);animation-name:cta-fv-bb-7;animation-delay:0.46s}@keyframes cta-fv-bb-8{0%{opacity:0;transform:translate(calc(-50% + 41.4px),calc(-50% + 36.6px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + 79.5px),calc(-50% + 70.3px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + 165.6px),calc(-50% + 146.4px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(9){width:6px;height:6px;background:var(--amber);box-shadow:0 0 10px 1px var(--amber);animation-name:cta-fv-bb-8;animation-delay:0.41s}@keyframes cta-fv-bb-9{0%{opacity:0;transform:translate(calc(-50% + 23.1px),calc(-50% + 36.8px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + 44.4px),calc(-50% + 70.7px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + 92.6px),calc(-50% + 147.3px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(10){width:7px;height:7px;background:#FFFFFF;box-shadow:0 0 10px 1px #FFFFFF;animation-name:cta-fv-bb-9;animation-delay:0.41s}@keyframes cta-fv-bb-10{0%{opacity:0;transform:translate(calc(-50% + 14.1px),calc(-50% + 53.7px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + 27.0px),calc(-50% + 103.1px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + 56.2px),calc(-50% + 214.8px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(11){width:5px;height:5px;background:var(--orange);box-shadow:0 0 10px 1px var(--orange);animation-name:cta-fv-bb-10;animation-delay:0.47s}@keyframes cta-fv-bb-11{0%{opacity:0;transform:translate(calc(-50% + 0.0px),calc(-50% + 54.5px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + 0.0px),calc(-50% + 104.6px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + 0.1px),calc(-50% + 218.0px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(12){width:8px;height:8px;background:var(--amber);box-shadow:0 0 10px 1px var(--amber);animation-name:cta-fv-bb-11;animation-delay:0.49s}@keyframes cta-fv-bb-12{0%{opacity:0;transform:translate(calc(-50% + -14.4px),calc(-50% + 50.0px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + -27.6px),calc(-50% + 96.0px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + -57.6px),calc(-50% + 199.9px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(13){width:7px;height:7px;background:var(--orange);box-shadow:0 0 10px 1px var(--orange);animation-name:cta-fv-bb-12;animation-delay:0.44s}@keyframes cta-fv-bb-13{0%{opacity:0;transform:translate(calc(-50% + -34.4px),calc(-50% + 48.9px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + -66.0px),calc(-50% + 93.9px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + -137.4px),calc(-50% + 195.6px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(14){width:6px;height:6px;background:var(--amber);box-shadow:0 0 10px 1px var(--amber);animation-name:cta-fv-bb-13;animation-delay:0.41s}@keyframes cta-fv-bb-14{0%{opacity:0;transform:translate(calc(-50% + -39.2px),calc(-50% + 36.0px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + -75.4px),calc(-50% + 69.1px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + -157.0px),calc(-50% + 143.9px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(15){width:7px;height:7px;background:#FFFFFF;box-shadow:0 0 10px 1px #FFFFFF;animation-name:cta-fv-bb-14;animation-delay:0.49s}@keyframes cta-fv-bb-15{0%{opacity:0;transform:translate(calc(-50% + -35.6px),calc(-50% + 17.6px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + -68.4px),calc(-50% + 33.7px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + -142.6px),calc(-50% + 70.3px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(16){width:5px;height:5px;background:var(--orange);box-shadow:0 0 10px 1px var(--orange);animation-name:cta-fv-bb-15;animation-delay:0.46s}@keyframes cta-fv-bb-16{0%{opacity:0;transform:translate(calc(-50% + -47.4px),calc(-50% + 9.1px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + -91.0px),calc(-50% + 17.5px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + -189.5px),calc(-50% + 36.4px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(17){width:6px;height:6px;background:var(--amber);box-shadow:0 0 10px 1px var(--amber);animation-name:cta-fv-bb-16;animation-delay:0.51s}@keyframes cta-fv-bb-17{0%{opacity:0;transform:translate(calc(-50% + -58.2px),calc(-50% + -7.7px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + -111.8px),calc(-50% + -14.8px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + -233.0px),calc(-50% + -30.9px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(18){width:5px;height:5px;background:var(--orange);box-shadow:0 0 10px 1px var(--orange);animation-name:cta-fv-bb-17;animation-delay:0.49s}@keyframes cta-fv-bb-18{0%{opacity:0;transform:translate(calc(-50% + -57.5px),calc(-50% + -27.0px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + -110.4px),calc(-50% + -51.8px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + -230.0px),calc(-50% + -107.9px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(19){width:7px;height:7px;background:var(--amber);box-shadow:0 0 10px 1px var(--amber);animation-name:cta-fv-bb-18;animation-delay:0.44s}@keyframes cta-fv-bb-19{0%{opacity:0;transform:translate(calc(-50% + -41.0px),calc(-50% + -34.0px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + -78.7px),calc(-50% + -65.3px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + -163.9px),calc(-50% + -136.1px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(20){width:8px;height:8px;background:#FFFFFF;box-shadow:0 0 10px 1px #FFFFFF;animation-name:cta-fv-bb-19;animation-delay:0.41s}@keyframes cta-fv-bb-20{0%{opacity:0;transform:translate(calc(-50% + -27.0px),calc(-50% + -37.2px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + -51.9px),calc(-50% + -71.5px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + -108.1px),calc(-50% + -148.9px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(21){width:8px;height:8px;background:var(--orange);box-shadow:0 0 10px 1px var(--orange);animation-name:cta-fv-bb-20;animation-delay:0.48s}@keyframes cta-fv-bb-21{0%{opacity:0;transform:translate(calc(-50% + -20.6px),calc(-50% + -57.1px)) scale(.5)}1.2%{opacity:1;transform:translate(calc(-50% + -39.6px),calc(-50% + -109.7px)) scale(1)}6.5%,100%{opacity:0;transform:translate(calc(-50% + -82.5px),calc(-50% + -228.6px)) scale(.25)}}.cta-fv__banner-burst .bspark:nth-child(22){width:7px;height:7px;background:var(--amber);box-shadow:0 0 10px 1px var(--amber);animation-name:cta-fv-bb-21;animation-delay:0.48s}
@keyframes cta-fv-sp-0{0%{opacity:0;transform:translate(calc(-50% + 0.0px),calc(-50% + -23.0px)) scale(.5)}10%{opacity:1;transform:translate(calc(-50% + 0.0px),calc(-50% + -44.2px)) scale(1)}38%,100%{opacity:0;transform:translate(calc(-50% + 0.0px),calc(-50% + -92.0px)) scale(.3)}}.cta-fv__fireworks .spark:nth-child(1){background:var(--orange);box-shadow:0 0 8px 1px var(--orange);animation-name:cta-fv-sp-0;animation-delay:0.00s}@keyframes cta-fv-sp-1{0%{opacity:0;transform:translate(calc(-50% + 13.0px),calc(-50% + -22.5px)) scale(.5)}10%{opacity:1;transform:translate(calc(-50% + 25.0px),calc(-50% + -43.2px)) scale(1)}38%,100%{opacity:0;transform:translate(calc(-50% + 52.0px),calc(-50% + -90.1px)) scale(.3)}}.cta-fv__fireworks .spark:nth-child(2){background:var(--amber);box-shadow:0 0 8px 1px var(--amber);animation-name:cta-fv-sp-1;animation-delay:0.03s}@keyframes cta-fv-sp-2{0%{opacity:0;transform:translate(calc(-50% + 19.1px),calc(-50% + -11.0px)) scale(.5)}10%{opacity:1;transform:translate(calc(-50% + 36.6px),calc(-50% + -21.1px)) scale(1)}38%,100%{opacity:0;transform:translate(calc(-50% + 76.2px),calc(-50% + -44.0px)) scale(.3)}}.cta-fv__fireworks .spark:nth-child(3){background:var(--orange);box-shadow:0 0 8px 1px var(--orange);animation-name:cta-fv-sp-2;animation-delay:0.06s}@keyframes cta-fv-sp-3{0%{opacity:0;transform:translate(calc(-50% + 27.5px),calc(-50% + -0.0px)) scale(.5)}10%{opacity:1;transform:translate(calc(-50% + 52.8px),calc(-50% + -0.0px)) scale(1)}38%,100%{opacity:0;transform:translate(calc(-50% + 110.0px),calc(-50% + -0.0px)) scale(.3)}}.cta-fv__fireworks .spark:nth-child(4){background:var(--amber);box-shadow:0 0 8px 1px var(--amber);animation-name:cta-fv-sp-3;animation-delay:0.00s}@keyframes cta-fv-sp-4{0%{opacity:0;transform:translate(calc(-50% + 20.8px),calc(-50% + 12.0px)) scale(.5)}10%{opacity:1;transform:translate(calc(-50% + 39.9px),calc(-50% + 23.0px)) scale(1)}38%,100%{opacity:0;transform:translate(calc(-50% + 83.1px),calc(-50% + 48.0px)) scale(.3)}}.cta-fv__fireworks .spark:nth-child(5){background:var(--orange);box-shadow:0 0 8px 1px var(--orange);animation-name:cta-fv-sp-4;animation-delay:0.03s}@keyframes cta-fv-sp-5{0%{opacity:0;transform:translate(calc(-50% + 10.8px),calc(-50% + 18.6px)) scale(.5)}10%{opacity:1;transform:translate(calc(-50% + 20.6px),calc(-50% + 35.8px)) scale(1)}38%,100%{opacity:0;transform:translate(calc(-50% + 43.0px),calc(-50% + 74.5px)) scale(.3)}}.cta-fv__fireworks .spark:nth-child(6){background:var(--amber);box-shadow:0 0 8px 1px var(--amber);animation-name:cta-fv-sp-5;animation-delay:0.06s}@keyframes cta-fv-sp-6{0%{opacity:0;transform:translate(calc(-50% + 0.0px),calc(-50% + 25.0px)) scale(.5)}10%{opacity:1;transform:translate(calc(-50% + 0.0px),calc(-50% + 48.0px)) scale(1)}38%,100%{opacity:0;transform:translate(calc(-50% + 0.0px),calc(-50% + 100.0px)) scale(.3)}}.cta-fv__fireworks .spark:nth-child(7){background:var(--orange);box-shadow:0 0 8px 1px var(--orange);animation-name:cta-fv-sp-6;animation-delay:0.00s}@keyframes cta-fv-sp-7{0%{opacity:0;transform:translate(calc(-50% + -11.2px),calc(-50% + 19.5px)) scale(.5)}10%{opacity:1;transform:translate(calc(-50% + -21.6px),calc(-50% + 37.4px)) scale(1)}38%,100%{opacity:0;transform:translate(calc(-50% + -45.0px),calc(-50% + 77.9px)) scale(.3)}}.cta-fv__fireworks .spark:nth-child(8){background:var(--amber);box-shadow:0 0 8px 1px var(--amber);animation-name:cta-fv-sp-7;animation-delay:0.03s}@keyframes cta-fv-sp-8{0%{opacity:0;transform:translate(calc(-50% + -24.2px),calc(-50% + 14.0px)) scale(.5)}10%{opacity:1;transform:translate(calc(-50% + -46.6px),calc(-50% + 26.9px)) scale(1)}38%,100%{opacity:0;transform:translate(calc(-50% + -97.0px),calc(-50% + 56.0px)) scale(.3)}}.cta-fv__fireworks .spark:nth-child(9){background:var(--orange);box-shadow:0 0 8px 1px var(--orange);animation-name:cta-fv-sp-8;animation-delay:0.06s}@keyframes cta-fv-sp-9{0%{opacity:0;transform:translate(calc(-50% + -23.5px),calc(-50% + 0.0px)) scale(.5)}10%{opacity:1;transform:translate(calc(-50% + -45.1px),calc(-50% + 0.0px)) scale(1)}38%,100%{opacity:0;transform:translate(calc(-50% + -94.0px),calc(-50% + 0.0px)) scale(.3)}}.cta-fv__fireworks .spark:nth-child(10){background:var(--amber);box-shadow:0 0 8px 1px var(--amber);animation-name:cta-fv-sp-9;animation-delay:0.00s}@keyframes cta-fv-sp-10{0%{opacity:0;transform:translate(calc(-50% + -18.2px),calc(-50% + -10.5px)) scale(.5)}10%{opacity:1;transform:translate(calc(-50% + -34.9px),calc(-50% + -20.2px)) scale(1)}38%,100%{opacity:0;transform:translate(calc(-50% + -72.7px),calc(-50% + -42.0px)) scale(.3)}}.cta-fv__fireworks .spark:nth-child(11){background:var(--orange);box-shadow:0 0 8px 1px var(--orange);animation-name:cta-fv-sp-10;animation-delay:0.03s}@keyframes cta-fv-sp-11{0%{opacity:0;transform:translate(calc(-50% + -13.2px),calc(-50% + -22.9px)) scale(.5)}10%{opacity:1;transform:translate(calc(-50% + -25.4px),calc(-50% + -44.1px)) scale(1)}38%,100%{opacity:0;transform:translate(calc(-50% + -53.0px),calc(-50% + -91.8px)) scale(.3)}}.cta-fv__fireworks .spark:nth-child(12){background:var(--amber);box-shadow:0 0 8px 1px var(--amber);animation-name:cta-fv-sp-11;animation-delay:0.06s}