:root {
  --page: #ffd24f;
  --cream: #fff8e8;
  --cream-2: #fff1bd;
  --card: #fffdf7;
  --ink: #28231c;
  --muted: #756d61;
  --gold: #ffc329;
  --gold-2: #f4ad18;
  --gold-soft: #fff3c8;
  --line: #f0ddb0;
  --shadow: 0 16px 32px rgba(166, 111, 8, .14);
  --radius: 12px;
  --font: "Roboto", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #f8d67e 0%, #fdf1d2 45%, #f6cc66 100%);
  color: var(--ink);
  font-family: var(--font);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.page-shell {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  /* Belt-and-suspenders against horizontal scroll: `.page-shell` is a
     sibling of the sticky `.site-header` (not an ancestor), so clipping
     horizontal overflow here can never break the header's position:sticky
     the way the same rule on html/body did on the services page earlier
     this session. This guarantees the page frame never scrolls sideways
     even if some component further down miscalculates its width (see the
     .stepper min-width fix below for the actual bug this caught). */
  overflow-x: hidden;
  /* Top: 0 — the hero should sit flush against the header, with no extra
     gold frame strip between them (the header's own bottom edge/border is
     the visual boundary). Left/right: wider frame, per request. Bottom:
     unchanged — this only affects the space at the very end of the whole
     page (before the footer), not the hero's bottom edge; the hero's own
     "flush with the bottom of the screen" comes from its height calc
     below, not from this padding. */
  padding: 0 28px 16px;
  background: linear-gradient(180deg, #f8d67e 0%, #fdf1d2 45%, #f6cc66 100%);
  box-shadow: 0 0 0 1px rgba(234, 174, 22, .4);
}
/* This 28px side frame never shrank at any width -- on top of each
   section's own mobile padding, it was eating into an already-tight
   375px viewport (roughly 260-280px of usable content width once a
   section's own side padding is subtracted too). Narrower frame on
   phones only; unrelated to any section's own internal padding. */
@media (max-width: 640px) {
  .page-shell { padding: 0 14px 12px; }
}
/* Hero: CTA on the left (normal flow), a fixed 640x640 video panel
   pinned to the top-right corner of the hero frame on the right --
   flush against the hero's own top, right, and (since the panel is
   exactly as tall as the hero's floor below) bottom edges at once. A
   fixed pixel size flush on three sides only makes sense together if the
   container's height is pinned to match, so `.hero` is a plain
   position:relative box (no grid/stretch math to fight) with
   min-height:640px -- the video defines the hero's height here, not the
   other way around. `.hero__content` stays in normal flow and reserves
   the right-hand space (688px = 640px video + 48px gap) with its own
   padding so text/CTA never runs under the video. See the
   min-width:761px block further down for the actual panel positioning
   (mobile keeps a simpler stacked layout instead, since a fixed 640px
   square doesn't fit a phone screen). */
.hero {
  position: relative;
  width: 100%;
  min-height: 640px;
  border: 1px solid rgba(111, 67, 0, .28);
  /* Reference video the user sent is the Aceternity "Background Gradient
     Animation" demo: a dark, near-black base with huge, extremely
     blurred, saturated color blobs glowing on top -- the glow itself is
     what reads as "the gradient," not a light glassy tint. Recreated
     here with the site's own gold/amber palette instead of that demo's
     purple/blue/magenta, on a dark base (this site's existing dark
     brown, #2b2118, already used for the video panel elsewhere) instead
     of the previous light frosted-glass panel -- mix-blend-mode:
     hard-light (below, on the blobs) is what makes the gold genuinely
     glow the way it does in the reference, and that effect depends on a
     dark backdrop; it read much flatter over the old light glass. */
  /* Mostly just dark -- the previous version leaned on a left-to-right
     color gradient here to bias where the brightness sits, but with
     small, spread-out blobs (below) doing that job instead, the base
     itself only needs a little depth/interest, not a directional color
     shift; too warm a base fought with "most of it should read dark". */
  background: radial-gradient(140% 140% at 25% 15%, #241a0e, #100a05);
  /* Not overflow:hidden here -- `.hero__gradient-bg` below already clips
     its own blobs to the hero's exact bounds via its own overflow:hidden,
     so this doesn't need to repeat that (and skipping it here means the
     video panel's drop-shadow isn't clipped at the hero's edge). */
}
/* Always-on animated gradient blobs (adapted from the Aceternity
   "Background Gradient Animation" pattern the user linked): several
   large, heavily blurred color circles that continuously drift on their
   own via CSS keyframes -- already moving before anyone touches
   anything -- plus one extra blob that tracks the cursor via --mx/--my
   (the same two custom properties script.js already writes on
   mousemove for the hero, reused here instead of driving a plain
   radial-gradient). The SVG <filter id="hero-goo"> blurs then sharply
   re-thresholds alpha (the feColorMatrix's exaggerated alpha row) so
   overlapping circles visually fuse into one gooey blob shape instead of
   just looking like overlapping soft circles -- the classic "goo" trick
   this pattern is known for. Colors are the site's own gold palette
   (--gold/--gold-2/--cream/--cream-2), nothing imported. */
.hero__gradient-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* Much heavier blur than before (28px -> 64px), matching the reference:
     no distinguishable circle edges at all, just soft glowing color
     fields bleeding into each other and into the dark base. */
  filter: url(#hero-goo) blur(64px);
}
.hero__gradient-blob {
  position: absolute;
  /* Bigger than before too (65% -> 85%+ below) -- in the reference the
     glow fills most of the frame rather than sitting as a contained
     shape in the middle of it. Shifted left (left:7.5% -> -10%) so the
     glow's core sits over the left portion of the panel and fades out
     before it reaches the video seam on the right, instead of peaking
     dead-center (which read as bright right at the boundary). */
  width: 85%;
  height: 85%;
  top: 7.5%;
  left: -10%;
  border-radius: 50%;
  mix-blend-mode: hard-light;
  opacity: .85;
  will-change: transform, translate;
  /* The cursor's effect on the *existing* ambient motion, not a separate
     colored shape that follows the mouse: --px/--py (small px offsets,
     written by script.js, 0 at rest) go on `translate` -- a distinct CSS
     property from `transform`, so it composes with each blob's own
     keyframe `transform` animation below instead of overriding it.
     --depth (per blob) varies how much each one reacts, for a bit of
     parallax depth rather than every blob moving in lockstep. */
  translate: calc(var(--px, 0px) * var(--depth, 1)) calc(var(--py, 0px) * var(--depth, 1));
}
.hero__gradient-blob--1 {
  --depth: 1;
  background: radial-gradient(circle at center, rgba(255, 195, 41, 1) 0, rgba(255, 195, 41, 0) 60%);
  animation: heroBlobVertical 10s ease-in-out infinite;
}
.hero__gradient-blob--2 {
  --depth: 1.35;
  background: radial-gradient(circle at center, rgba(233, 120, 17, 1) 0, rgba(233, 120, 17, 0) 60%);
  animation: heroBlobHorizontal 12s ease-in-out infinite reverse;
}
.hero__gradient-blob--3 {
  --depth: .6;
  width: 95%;
  height: 95%;
  top: 2.5%;
  left: -15%;
  background: radial-gradient(circle at center, rgba(255, 243, 200, 1) 0, rgba(255, 243, 200, 0) 60%);
  animation: heroBlobCircle 15s linear infinite;
}
.hero__gradient-blob--4 {
  --depth: 1.15;
  background: radial-gradient(circle at center, rgba(255, 178, 36, 1) 0, rgba(255, 178, 36, 0) 60%);
  animation: heroBlobHorizontal 9s ease-in-out infinite;
}
/* The dedicated mouse-following blob, brought back (removed earlier,
   then asked back explicitly) -- positioned directly with --mx/--my
   (percentages, script.js) rather than the translate-offset trick the
   4 ambient blobs above use, since this one's whole point is to sit
   right under the cursor. Same gold family as the rest. */
.hero__gradient-blob--pointer {
  /* Cancels the base class's --px/--py translate (0 * anything = 0) --
     this blob's position already comes directly from --mx/--my below,
     it doesn't need the parallax offset on top of that too. */
  --depth: 0;
  width: 55%;
  height: 55%;
  top: var(--my, 40%);
  left: var(--mx, 30%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(255, 166, 26, 1) 0, rgba(255, 166, 26, 0) 60%);
}
@keyframes heroBlobVertical {
  0%, 100% { transform: translateY(-18%); }
  50% { transform: translateY(18%); }
}
@keyframes heroBlobHorizontal {
  0%, 100% { transform: translate(-16%, -8%); }
  50% { transform: translate(16%, 8%); }
}
@keyframes heroBlobCircle {
  0% { transform: rotate(0deg) translateX(6%) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(6%) rotate(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__gradient-blob--1,
  .hero__gradient-blob--2,
  .hero__gradient-blob--3,
  .hero__gradient-blob--4 {
    animation: none;
  }
}
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 640px;
  padding: 48px 32px;
}
.hero__title {
  margin: 0 0 28px;
  max-width: 460px;
  /* Was dark text (#211d18), made sense on the old light glass panel --
     the panel is now a dark glowing background instead (see `.hero`
     above), so this needs to be light to stay readable, same as the
     reference's white text over its dark gradient. */
  color: #fff8e8;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
  /* Matches services.html's hero h1 (.page-intro h1) exactly: same
     font-size clamp, line-height, letter-spacing and font-weight. Font
     family is already Roboto on both pages via the shared --font
     variable / sitewide heading-unification rule, so it's inherited
     here without needing to be repeated. */
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -.045em;
}
/* Desktop only: cap the hero (and its video, which mirrors the hero's own
   height below) to whatever fits in the first screen -- header + hero +
   the 28px gold frame strip after it must never exceed 100vh, otherwise
   the frame isn't visible without scrolling. 640px stays the height on
   any normal/tall window; it only shrinks on short ones. */
@media (min-width: 761px) {
  .hero {
    height: min(640px, calc(100vh - var(--hero-vh-offset, 71px) - 28px));
    min-height: 420px;
  }
  .hero__content {
    min-height: 0;
    /* Center the title/CTA within the glass panel itself (the hero minus
       the 640px video), not the full hero width -- without this,
       align-items:center above would center them across the whole hero,
       including the space the video visually covers. */
    width: calc(100% - 640px);
  }
}
.hero__media {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .32);
}
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #2b2118;
}
/* Desktop: a 640px-wide panel pinned flush to the hero's top-right corner,
   with height:100% so it always matches `.hero`'s own height exactly --
   including on short windows where `.hero` shrinks below 640px (see the
   height:min(...) rule above). top:0 + right:0 + height:100% together
   keep the panel flush against all three edges (top, right, bottom) at
   any hero height. */
@media (min-width: 761px) {
  .hero__media {
    position: absolute;
    top: 0;
    right: 0;
    width: 640px;
    height: 100%;
    /* Sharp on all four corners -- no rounding anywhere on this panel. */
    border-radius: 0;
  }
  /* Visible gold page-shell frame strip below the hero -- this is what
     the user actually needs to see "at the moment of entry", i.e.
     without scrolling; the height:min(...) rule above is what guarantees
     header + hero + this margin never exceeds 100vh. */
  .hero {
    margin-bottom: 28px;
  }
  /* The seam where the gradient panel meets the video was a hard
     vertical cut -- this fades the video's own left edge into the same
     dark tone the gradient panel goes to on its right side (#140d07,
     matching `.hero`'s background), so the two blend together instead of
     butting up against a sharp line. Desktop-only: this is the one
     layout where the panel and video actually sit side by side (mobile
     stacks them, no seam to soften). Sits above the video (z-index:1 vs.
     the video's 0) and is purely decorative. */
  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, #140d07 0%, rgba(20, 13, 7, 0) 16%);
    pointer-events: none;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: #332411;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(184, 122, 0, .24); }
.btn--hero {
  position: relative;
  min-width: 245px;
  height: 58px;
  padding: 0 34px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 239, 172, .72);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff0a8 0%, #ffc746 38%, #f3a61a 72%, #ffd568 100%);
  color: #211505;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow:
    0 18px 34px rgba(181, 104, 0, .36),
    0 0 34px rgba(255, 197, 55, .32),
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -10px 18px rgba(174, 96, 0, .18);
  transform: translateZ(0);
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
}
.btn--hero::before {
  content: "";
  position: absolute;
  inset: -85%;
  z-index: -2;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.05) 72deg, rgba(255,236,155,.95) 118deg, rgba(255,178,34,.86) 150deg, transparent 205deg, transparent 360deg);
  animation: ctaGlowSweep 3.4s linear infinite;
}
.btn--hero::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 45%),
    linear-gradient(135deg, #ffd966, #f4ad20 58%, #ffcb4f);
  box-shadow: inset 0 0 18px rgba(255, 247, 199, .38);
}
.btn--hero:hover {
  transform: scale(1.045);
  filter: saturate(1.08) brightness(1.03);
  box-shadow:
    0 22px 42px rgba(181, 104, 0, .45),
    0 0 46px rgba(255, 207, 69, .5),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -10px 18px rgba(174, 96, 0, .16);
}
.btn--hero:hover::before {
  opacity: 1;
  animation-duration: 2.25s;
}
@keyframes ctaGlowSweep {
  to { transform: rotate(1turn); }
}
.btn--gold { min-width: 160px; height: 42px; padding: 0 24px; border-radius: 10px; font-size: 13px; background: linear-gradient(180deg, #ffc83f, #f8ad18); }
.solutions, .explore, .experts { background: linear-gradient(180deg, #fff3bf, #fff8e7); }
.solutions { padding: 36px 34px 20px; }
.section-title { text-align: center; margin-bottom: 24px; }
.section-title p, .eyebrow {
  margin: 0 0 7px;
  color: #d59a15;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.section-title h2 {
  margin: 0;
  color: #211d18;
  font-size: 36px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.02em;
}
.section-title span { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card {
  position: relative;
  min-height: 304px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
  border: 1px solid rgba(222, 188, 115, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover, .mini-card:hover { transform: translateY(-4px); box-shadow: 0 20px 34px rgba(166,111,8,.18); }
.feature-card__media { height: 135px; overflow: hidden; background: #ead59d; }
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-icon {
  position: absolute;
  top: 16px;
  left: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #5b3b00;
  font-size: 21px;
  box-shadow: 0 7px 13px rgba(105,67,0,.18);
}
.feature-card .label { margin: 16px 16px 7px; color: #ce9515; font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.feature-card h3 { margin: 0 16px 10px; font-size: 17px; line-height: 1.18; }
.feature-card > p:not(.label) { margin: 0 16px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.feature-card > a { position: absolute; right: 17px; bottom: 14px; color: var(--gold-2); font-size: 22px; }
.explore { padding: 12px 34px 18px; }
.divider-title { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; margin: 8px 0 18px; }
.divider-title span { display: none; }
.divider-title h2 { margin: 0; font-size: 15px; font-weight: 900; }
.tabs { display: flex; justify-content: center; gap: 14px; margin-bottom: 26px; }
.tab { min-width: 145px; height: 36px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #746b5a; font-size: 12px; cursor: pointer; }
.tab.is-active { background: var(--gold); color: #382814; box-shadow: 0 8px 15px rgba(184,122,0,.18); }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mini-card {
  min-height: 176px;
  display: grid;
  justify-items: center;
  align-content: start;
  padding: 22px 17px 15px;
  border-radius: 10px;
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(238, 219, 170, .66);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mini-card div { width: 45px; height: 45px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 50%; background: #fff3cf; color: #b97b05; font-size: 23px; border: 1px solid #f0d997; }
.mini-card h3 { margin: 0 0 8px; font-size: 14px; line-height: 1.15; }
.mini-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.38; }
.mini-card a { margin-top: 12px; color: #d79a11; font-size: 11px; font-weight: 800; }
.cta-strip {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 13px;
  margin-top: 16px;
  padding: 13px 20px;
  border-radius: 10px;
  background: linear-gradient(90deg, #ffdf68, #ffc83f);
  box-shadow: 0 10px 20px rgba(184,122,0,.16);
}
.cta-strip__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #ffe894; color: #9c6a00; font-size: 20px; }
.cta-strip strong { font-size: 13px; }
.cta-strip p { margin: 4px 0 0; color: #655232; font-size: 11px; }
.experts { position: relative; padding: 28px 0 66px; overflow: hidden; }
.experts::before, .experts::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.28); border-radius: 50%; transform: scaleX(1.45) translateY(18%); pointer-events: none; }
.experts::after { transform: scaleX(1.15) translateY(34%); }
.section-title--small h2 { font-size: 24px; }
.expert-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 21px; }
.expert-card { border-radius: 8px; background-size: cover; background-position: center top; box-shadow: 0 14px 23px rgba(121,77,0,.18); }
.expert-card.small { width: 104px; height: 148px; }
.expert-card.center { position: relative; width: 145px; height: 205px; background-color: #eee; }
.expert-card.center strong { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 8px; background: #fff; border-radius: 0 0 8px 8px; text-align: center; font-size: 13px; }
.headshot-main { background: linear-gradient(180deg, transparent 0 72%, #fff 72%), radial-gradient(circle at 50% 25%, #f5c39d 0 19%, transparent 20%), linear-gradient(90deg, #1f1f21 30%, #f1f1f1 30% 70%, #1f1f21 70%); }
.headshot-1 { background: linear-gradient(180deg, #e7c5ae, #fff 45%, #d8a770); }
.headshot-2 { background: linear-gradient(180deg, #d6b392, #1f3542 58%, #f6f6f4); }
.headshot-3 { background: linear-gradient(180deg, #e8c8ad, #223144 52%, #fff); }
.headshot-4 { background: linear-gradient(180deg, #eac7a8, #fff 45%, #d1a15b); }
.carousel-controls { position: relative; z-index: 1; display: flex; justify-content: center; gap: 24px; margin-top: 20px; }
.carousel-controls button, .panel-footer button { width: 25px; height: 25px; border-radius: 50%; border: 1px solid #edd58c; background: #fff7d8; color: #b9850c; cursor: pointer; }
.panel-card { margin: 0 8px 44px; padding: 44px 34px; background: #fffdf8; border: 1px solid #f1d580; border-radius: var(--radius); box-shadow: 0 12px 26px rgba(137,91,0,.1); }
.story { display: grid; grid-template-columns: 285px 1fr; gap: 36px; align-items: center; position: relative; }
.story__image img { width: 100%; height: 210px; object-fit: cover; border-radius: 7px; display: block; box-shadow: 0 10px 18px rgba(0,0,0,.12); }
.story__content h2, .quiz h2 { margin: 0; font-size: 27px; line-height: 1.08; font-weight: 800; }
.stepper { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin: 0 0 32px; padding: 0; list-style: none; color: #9d9586; font-size: 8px; text-align: center; }
.stepper li { position: relative; display: grid; justify-items: center; gap: 5px; }
.stepper li::before { content: ""; position: absolute; top: 10px; left: -50%; width: 100%; height: 1px; background: #eadfbf; }
.stepper li:first-child::before { display: none; }
.stepper span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #f4f1e9; color: #a9a092; font-size: 9px; font-weight: 800; }
.stepper .active span { background: var(--gold); color: #4c3505; }
.result-grid { display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr; gap: 10px; margin-top: 25px; }
.result-grid h3 { margin: 0 0 8px; font-size: 12px; }
.result-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.result-grid > span { color: var(--gold-2); font-size: 18px; }
.panel-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 34px; color: #d49a13; font-size: 11px; font-weight: 800; }
.panel-footer div { display: flex; align-items: center; gap: 10px; color: #342a1c; }
.trust-row { position: absolute; left: 34px; bottom: 30px; display: flex; gap: 28px; color: #9a8d73; font-size: 9px; line-height: 1.2; }
.quiz { display: grid; grid-template-columns: 240px 1fr; gap: 42px; align-items: center; margin-bottom: 0; }
.quiz__intro > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 20px 0 42px; }
.trust-row--inline { position: static; gap: 18px; }
.quiz__card h3 { margin: 0 0 20px; font-size: 17px; }
.option-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.option { min-height: 98px; display: grid; place-items: center; gap: 8px; border: 1px solid #eee0b7; border-radius: 3px; background: #fffefb; color: #f0bd36; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; font-size: 24px; text-decoration: none; }
.option span { color: #493e2e; font-size: 10px; line-height: 1.25; }
.option.is-selected { border-color: var(--gold); background: #fffbeb; box-shadow: inset 0 0 0 1px rgba(255,195,41,.35); }
.option:hover { transform: translateY(-2px); }
.next { float: right; min-width: 155px; margin-top: 28px; border-radius: 4px; }
@media (max-width: 760px) {
  .page-shell { margin-top: 0; width: 100%; }
  /* Below 761px the desktop absolute-positioned 640x640 panel (see the
     min-width:761px rule on .hero__media) doesn't apply at all, so
     .hero__media falls back to its base position:relative -- stacking
     normally in DOM order (video first, content below -- see index.html,
     the two are swapped from the desktop source order since desktop
     positions the video with position:absolute, so source order doesn't
     matter there). No padding on `.hero` itself any more -- it moved onto
     `.hero__content` below -- so the video sits flush against the hero's
     own left/right edges, with only the page-shell's own gold margin
     outside it. That's what makes it exactly (viewport width - the gold
     margin on each side), matching the mobile frame exactly, per spec. */
  .hero {
    min-height: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .hero__content {
    align-items: center;
    text-align: center;
    height: auto;
    min-height: 0;
    padding: 32px 24px;
  }
  /* Square, not a 3:4 rectangle -- flush to the hero's own width (no cap,
     no side margin, no rounded corners: sharp on all four corners). */
  .hero__media { width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0; border-radius: 0; }
}
@media (max-width: 640px) {
  /* .hero itself stays flush (padding:0, set above) -- the video must
     stay edge-to-edge against the hero's own bounds at every mobile
     width. Padding narrows here on `.hero__content` instead, matching. */
  .hero__content { padding: 28px 18px; }
  .solutions, .explore { padding-left: 18px; padding-right: 18px; }
  .feature-grid, .mini-grid, .story, .quiz { grid-template-columns: 1fr; }
  .section-title h2 { font-size: 28px; }
  .tabs { flex-wrap: wrap; gap: 8px; }
  .tab { min-width: 132px; }
  .cta-strip { grid-template-columns: 42px 1fr; }
  .cta-strip .btn { grid-column: 1 / -1; width: 100%; }
  .expert-row { gap: 8px; }
  .expert-card.small { width: 70px; height: 104px; }
  .expert-card.center { width: 122px; height: 178px; }
  .panel-card { padding: 28px 18px; margin-left: 8px; margin-right: 8px; }
  .trust-row { position: static; margin-top: 20px; flex-wrap: wrap; }
  .option-grid { grid-template-columns: repeat(2, 1fr); }
  .stepper {
    gap: 6px;
    overflow-x: auto;
    /* Fade the last ~10% at each edge so a phone user can see there's
       more to scroll to, instead of the row just getting cut off flush
       with the card's edge with no visual hint. Purely a mask -- doesn't
       change layout, columns, or any existing rule. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .result-grid { grid-template-columns: 1fr; }
  .result-grid > span { display: none; }
}




/* Reference-tuned financing/explore sections */
.solutions,
.explore {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0% 28%, rgba(255, 255, 255, .44) 0 2px, transparent 210px),
    radial-gradient(circle at 100% 28%, rgba(255, 255, 255, .44) 0 2px, transparent 210px),
    linear-gradient(180deg, #ffd45c 0%, #ffe494 34%, #fff7df 76%, #fffdf5 100%);
}
.solutions::before,
.solutions::after {
  content: "";
  position: absolute;
  top: 116px;
  width: 360px;
  height: 360px;
  border: 2px solid rgba(255,255,255,.33);
  border-radius: 50%;
  pointer-events: none;
}
.solutions::before { left: -210px; }
.solutions::after { right: -210px; }
.solutions > *,
.explore > * {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
.solutions {
  padding: 58px clamp(28px, 5vw, 64px) 38px;
}
.solutions .section-title { margin-bottom: 40px; }
.solutions .section-title p {
  color: #b87b06;
  font-size: 18px;
  letter-spacing: .33em;
  font-weight: 500;
}
.solutions .section-title h2 {
  margin-top: 8px;
  font-size: clamp(42px, 5.2vw, 66px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 900;
}
.solutions .section-title span {
  margin-top: 28px;
  color: #2f2922;
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.35;
}
.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.feature-card {
  min-height: 560px;
  border-radius: 19px;
  background: #fffaf0;
  border: 1px solid rgba(234, 199, 118, .48);
  box-shadow: 0 18px 36px rgba(143, 91, 8, .16);
}
.feature-card__media {
  height: 275px;
  border-radius: 19px 19px 0 0;
}
.feature-card__media img {
  filter: saturate(1.03) contrast(1.02);
}
.card-icon {
  top: 28px;
  left: 28px;
  width: 76px;
  height: 76px;
  background: linear-gradient(180deg, #ffd052, #ffbd32);
  color: #332515;
  border: 1px solid rgba(170, 108, 0, .18);
  font-size: 37px;
  box-shadow: 0 9px 22px rgba(149, 94, 4, .18);
}
.feature-card .label {
  margin: 30px 30px 14px;
  color: #b97e0a;
  font-size: 14px;
  letter-spacing: .08em;
  font-weight: 900;
}
.feature-card h3 {
  margin: 0 30px 24px;
  color: #191714;
  font-size: clamp(22px, 2.05vw, 30px);
  line-height: 1.18;
  letter-spacing: -.025em;
  font-weight: 900;
}
.feature-card > p:not(.label) {
  margin: 0 30px 72px;
  color: #5f574e;
  font-size: 18px;
  line-height: 1.5;
}
/* The whole card is clickable now, not just the small arrow glyph: the
   link covers the entire card (inset:0 -- `.feature-card` is already
   position:relative and overflow:hidden, so this stays clipped to the
   card's own rounded corners) while the visible arrow is just a
   decorative, pointer-events:none span positioned where the old link
   used to sit. The link's real accessible name comes from aria-label
   (set in the HTML) since the visible glyph alone isn't descriptive. */
.feature-card > a {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.feature-card__arrow {
  position: absolute;
  right: 30px;
  bottom: 34px;
  color: #d89507;
  font-size: 38px;
  font-weight: 300;
  pointer-events: none;
}
.explore {
  padding: 42px clamp(28px, 5vw, 64px) 54px;
  background:
    linear-gradient(180deg, #fffdf5 0%, #fff9e9 48%, #fffdf7 100%);
}
.divider-title {
  max-width: 980px;
  gap: 32px;
  margin-bottom: 28px;
}
.divider-title span { display: none; }
.divider-title h2 {
  font-size: 28px;
  letter-spacing: -.02em;
}
.tabs {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 36px;
  padding: 0;
  gap: 0;
  border: 1px solid #eadcae;
  border-radius: 999px;
  background: rgba(255, 253, 246, .74);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65);
}
.tab {
  min-width: 235px;
  height: 66px;
  border-radius: 999px;
  color: #3d352e;
  font-size: 19px;
  font-weight: 500;
}
.tab.is-active {
  background: linear-gradient(180deg, #ffc84a, #ffb636);
  box-shadow: 0 8px 17px rgba(175, 110, 0, .16);
}
.mini-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 36px;
}
.mini-card {
  min-height: 320px;
  padding: 34px 34px 26px;
  border-radius: 16px;
  background: rgba(255, 253, 246, .56);
  border: 1px solid #eee0ad;
  box-shadow: 0 8px 18px rgba(149, 94, 4, .045);
}
.mini-card div {
  width: 96px;
  height: 96px;
  margin-bottom: 24px;
  background: radial-gradient(circle at 35% 30%, #fff1bd, #ffe29a);
  color: #8e6211;
  border: 0;
  font-size: 45px;
}
.mini-card h3 {
  margin-bottom: 13px;
  color: #161411;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 900;
}
.mini-card p {
  max-width: 250px;
  color: #5d554c;
  font-size: 18px;
  line-height: 1.35;
}
.mini-card a {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 2px;
  color: #c9890a;
  font-size: 17px;
  font-weight: 500;
}
.cta-strip {
  max-width: 1160px;
  margin-top: 34px;
  padding: 24px 28px;
  grid-template-columns: 86px 1fr auto;
  border-radius: 16px;
  background: linear-gradient(90deg, #ffd45f, #ffc748 55%, #ffc038);
  box-shadow: 0 15px 28px rgba(170, 105, 0, .14);
}
.cta-strip__icon {
  width: 72px;
  height: 72px;
  background: transparent;
  border: 1px solid rgba(121, 78, 0, .42);
  color: #7e570f;
  font-size: 34px;
}
.cta-strip strong {
  color: #15130f;
  font-size: 23px;
  letter-spacing: -.01em;
}
.cta-strip p {
  margin-top: 10px;
  color: #4b3c23;
  font-size: 17px;
}
.cta-strip .btn {
  min-width: 260px;
  height: 72px;
  border-radius: 11px;
  font-size: 21px;
}
@media (max-width: 900px) {
  .feature-grid,
  .mini-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: auto; padding-bottom: 58px; }
  .tab { min-width: 180px; }
  .cta-strip { grid-template-columns: 72px 1fr; }
  .cta-strip .btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 640px) {
  .solutions { padding: 42px 18px 28px; }
  .solutions .section-title p { font-size: 13px; }
  .solutions .section-title h2 { font-size: 34px; }
  .solutions .section-title span { font-size: 15px; }
  .feature-card__media { height: 210px; }
  .feature-card .label, .feature-card h3, .feature-card > p:not(.label) { margin-left: 22px; margin-right: 22px; }
  .feature-card > p:not(.label) { font-size: 15px; }
  .card-icon { width: 58px; height: 58px; font-size: 29px; }
  .tabs { display: grid; width: 100%; border-radius: 20px; overflow: hidden; }
  .tab { width: 100%; min-width: 0; height: 52px; }
  .mini-card { min-height: 245px; padding: 28px 20px; }
  .mini-card p { font-size: 15px; }
  .cta-strip { padding: 18px; }
  .cta-strip strong { font-size: 18px; }
  .cta-strip p { font-size: 14px; }
  .cta-strip .btn { min-width: 0; height: 54px; font-size: 16px; }
}

/* Card hover video behavior */
.feature-card__media {
  position: relative;
  isolation: isolate;
}
.feature-card__media img,
.feature-card__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feature-card__media img {
  z-index: 1;
  opacity: 1;
  transition: opacity .18s ease;
}
.feature-card__media video {
  z-index: 2;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.feature-card.is-video-hover .feature-card__media video {
  opacity: 1;
}
.feature-card.is-video-hover .feature-card__media img {
  opacity: 0;
}

@media (hover: none) {
  .feature-card__media img {
    opacity: 1 !important;
  }
  .feature-card__media video {
    display: none;
  }
}


/* Service card scale hover */
.feature-card {
  transform-origin: center center;
  will-change: transform;
}
.feature-card:hover {
  transform: scale(1.035);
  box-shadow: 0 24px 44px rgba(143, 91, 8, .22);
  z-index: 4;
}

/* Explore mini card scale hover */
.mini-card {
  transform-origin: center center;
  will-change: transform;
}
.mini-card:hover {
  transform: scale(1.035);
  box-shadow: 0 18px 32px rgba(149, 94, 4, .14);
  z-index: 3;
}

/* Automatic experts carousel */
.experts {
  min-height: 560px;
  padding: 42px 0 74px;
  background:
    radial-gradient(circle at 8% 44%, rgba(255,255,255,.34) 0 2px, transparent 250px),
    radial-gradient(circle at 92% 44%, rgba(255,255,255,.34) 0 2px, transparent 250px),
    linear-gradient(180deg, #ffd451 0%, #ffe084 52%, #ffd057 100%);
}
.experts .section-title--small {
  margin-bottom: 34px;
}
.experts .section-title--small p {
  color: #765a1f;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 500;
}
.experts .section-title--small h2 {
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 500;
}
.expert-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 330px;
  overflow: hidden;
}
.expert-row {
  position: absolute;
  left: 50%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 38px;
  margin: 0;
  transition: transform .75s cubic-bezier(.22, .8, .22, 1);
  will-change: transform;
}
.expert-card,
.expert-card.small,
.expert-card.center {
  position: relative;
  flex: 0 0 250px;
  width: 250px;
  height: 235px;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center top;
  box-shadow: 0 16px 28px rgba(121,77,0,.18);
  opacity: .9;
  transform: scale(.86);
  transform-origin: center center;
  transition: transform .75s cubic-bezier(.22, .8, .22, 1), opacity .55s ease, box-shadow .55s ease;
}
.expert-card.active {
  flex-basis: 315px;
  width: 315px;
  height: 305px;
  opacity: 1;
  transform: scale(1);
  z-index: 4;
  box-shadow: 0 22px 42px rgba(121,77,0,.24);
}
.expert-card strong,
.expert-card.center strong {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 17px 10px 18px;
  border-radius: 0 0 18px 18px;
  background: rgba(255,255,255,.98);
  color: #28231c;
  text-align: center;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 700;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .38s ease, transform .5s cubic-bezier(.22, .8, .22, 1);
}
.expert-card.active strong {
  opacity: 1;
  transform: translateY(0);
}
.expert-card:not(.active) strong {
  pointer-events: none;
}
.carousel-controls {
  position: relative;
  z-index: 2;
  margin-top: 4px;
  gap: 34px;
}
.carousel-controls button,
.panel-footer button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #2c281f;
  font-size: 30px;
  line-height: 1;
  transition: transform .2s ease, color .2s ease;
}
.carousel-controls button:hover {
  transform: scale(1.15);
  color: #9d6900;
}
@media (max-width: 900px) {
  .expert-stage { height: 305px; }
  .expert-row { gap: 24px; }
  .expert-card,
  .expert-card.small,
  .expert-card.center {
    flex-basis: 210px;
    width: 210px;
    height: 205px;
  }
  .expert-card.active {
    flex-basis: 270px;
    width: 270px;
    height: 275px;
  }
}
@media (max-width: 640px) {
  .experts { min-height: 500px; padding-top: 36px; }
  .experts .section-title--small h2 { font-size: 36px; }
  .expert-stage { height: 285px; }
  .expert-row { gap: 18px; }
  .expert-card,
  .expert-card.small,
  .expert-card.center {
    flex-basis: 176px;
    width: 176px;
    height: 190px;
    transform: scale(.78);
  }
  .expert-card.active {
    flex-basis: 235px;
    width: 235px;
    height: 260px;
  }
  .expert-card strong,
  .expert-card.center strong { font-size: 18px; padding: 14px 8px; }
}

/* Real expert portraits */
.headshot-1 { background-image: url("assets/expert-maya.jpg"); background-color: #e7c5ae; }
.headshot-2 { background-image: url("assets/expert-daniel.jpg"); background-color: #d6b392; }
.headshot-main { background-image: url("assets/expert-sean.jpg"); background-color: #f2f2f2; }
.headshot-3 { background-image: url("assets/expert-adam.jpg"); background-color: #e8c8ad; }
.headshot-4 { background-image: url("assets/expert-lina.jpg"); background-color: #eac7a8; }

/* Smooth transform-only expert carousel sizing */
.expert-row {
  gap: clamp(22px, 3vw, 42px);
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.expert-card,
.expert-card.small,
.expert-card.center,
.expert-card.active {
  flex: 0 0 315px;
  width: 315px;
  height: 305px;
  transition: transform .72s cubic-bezier(.22, .8, .22, 1), opacity .45s ease, box-shadow .45s ease;
  will-change: transform, opacity;
  background-size: cover;
  background-position: center top;
}
.expert-card,
.expert-card.small,
.expert-card.center {
  opacity: .86;
  transform: translateZ(0) scale(.78);
}
.expert-card.active {
  opacity: 1;
  transform: translateZ(0) scale(1);
  z-index: 5;
}
@media (max-width: 900px) {
  .expert-card,
  .expert-card.small,
  .expert-card.center,
  .expert-card.active {
    flex-basis: 275px;
    width: 275px;
    height: 280px;
  }
}
@media (max-width: 640px) {
  .expert-card,
  .expert-card.small,
  .expert-card.center,
  .expert-card.active {
    flex-basis: 235px;
    width: 235px;
    height: 260px;
  }
  .expert-card,
  .expert-card.small,
  .expert-card.center { transform: translateZ(0) scale(.74); }
}

/* Non-duplicating circular experts carousel */
.expert-stage {
  height: 345px;
  overflow: hidden;
}
.expert-row {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  display: block;
  transform: none !important;
  transition: none !important;
}
.expert-card,
.expert-card.small,
.expert-card.center,
.expert-card.active {
  position: absolute;
  top: 0;
  left: 50%;
  flex: none;
  width: 315px;
  height: 305px;
  z-index: var(--expert-depth, 1);
  opacity: .88;
  transform: translateX(calc(-50% + (var(--expert-offset, 0) * clamp(205px, 24vw, 365px)))) scale(.78);
  transition: transform .72s cubic-bezier(.22, .8, .22, 1), opacity .42s ease, box-shadow .42s ease;
  will-change: transform, opacity;
  background-size: cover;
  background-position: center top;
}
.expert-card.active {
  opacity: 1;
  transform: translateX(calc(-50% + (var(--expert-offset, 0) * clamp(205px, 24vw, 365px)))) scale(1);
  box-shadow: 0 24px 46px rgba(121,77,0,.25);
}
@media (max-width: 900px) {
  .expert-stage { height: 315px; }
  .expert-card,
  .expert-card.small,
  .expert-card.center,
  .expert-card.active {
    width: 275px;
    height: 280px;
    transform: translateX(calc(-50% + (var(--expert-offset, 0) * 245px))) scale(.76);
  }
  .expert-card.active {
    transform: translateX(calc(-50% + (var(--expert-offset, 0) * 245px))) scale(1);
  }
}
@media (max-width: 640px) {
  .expert-stage { height: 292px; }
  .expert-card,
  .expert-card.small,
  .expert-card.center,
  .expert-card.active {
    width: 235px;
    height: 260px;
    transform: translateX(calc(-50% + (var(--expert-offset, 0) * 178px))) scale(.72);
  }
  .expert-card.active {
    transform: translateX(calc(-50% + (var(--expert-offset, 0) * 178px))) scale(1);
  }
}

/* Hide far carousel cards while they wrap around */
.expert-card.is-offstage {
  opacity: 0 !important;
  transform: translateX(calc(-50% + (var(--expert-offset, 0) * clamp(205px, 24vw, 365px)))) scale(.62) !important;
}
@media (max-width: 900px) {
  .expert-card.is-offstage {
    transform: translateX(calc(-50% + (var(--expert-offset, 0) * 245px))) scale(.62) !important;
  }
}
@media (max-width: 640px) {
  .expert-card.is-offstage {
    transform: translateX(calc(-50% + (var(--expert-offset, 0) * 178px))) scale(.62) !important;
  }
}

/* Sample-matched success story section */
.story.panel-card {
  max-width: 1460px;
  margin: 0 auto 58px;
  padding: 86px 54px 78px;
  display: grid;
  grid-template-columns: minmax(420px, 560px) minmax(520px, 1fr);
  gap: 68px;
  align-items: center;
  border-radius: 7px;
  background: #fffdf8;
  border: 1px solid rgba(242, 211, 128, .82);
  box-shadow: 0 14px 28px rgba(139, 91, 0, .18);
}
.story__image {
  align-self: end;
}
.story__image img,
.story__image video {
  width: 100%;
  aspect-ratio: 1.18 / 1;
  height: auto;
  max-height: 475px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  box-shadow: 0 14px 22px rgba(0,0,0,.14);
  background: #211b16;
}
.story__content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  /* `.story__content` is a grid item of `.story` (which collapses to a
     single 1fr column on mobile); grid items default to min-width:auto,
     so without this it can refuse to shrink below its content's natural
     width and force the whole page wider than the viewport. `.quiz__card`
     already had this same fix (min-width:0) -- this was the one sibling
     pattern missing it. */
  min-width: 0;
}
.story .stepper {
  align-self: stretch;
  grid-template-columns: repeat(5, minmax(84px, 1fr));
  gap: 20px;
  margin: 0 0 88px;
  color: #1f1b16;
  font-size: 16px;
  font-weight: 500;
  overflow: visible;
}
.story .stepper li {
  gap: 16px;
}
.story .stepper li::before {
  top: 23px;
  left: calc(-50% - 10px);
  height: 2px;
  background: #e6decf;
}
.story .stepper .active::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 50%;
  width: 54%;
  height: 2px;
  background: #ecb32c;
}
.story .stepper span {
  width: 48px;
  height: 48px;
  font-size: 18px;
  border: 2px solid #dedbd3;
  background: #faf9f5;
  color: #1c1914;
}
.story .stepper .active span {
  border-color: #f3b32a;
  background: #f7b51f;
  color: #17120a;
}
.story .eyebrow {
  margin-bottom: 22px;
  color: #e0a117;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}
.story__content h2 {
  margin: 0 0 58px;
  color: #11100e;
  font-size: clamp(42px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 500;
}
.story .result-grid {
  grid-template-columns: 1fr 42px 1fr 42px 1fr;
  gap: 24px;
  margin: 0;
  align-items: start;
}
.story .result-grid h3 {
  margin: 0 0 28px;
  color: #14110e;
  font-size: 29px;
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 700;
}
.story .result-grid p {
  color: #211d18;
  font-size: 20px;
  line-height: 1.65;
  font-weight: 400;
}
.story .result-grid > span {
  padding-top: 4px;
  color: #e4a514;
  font-size: 44px;
  line-height: 1;
  font-weight: 300;
}
.story .panel-footer {
  margin-top: auto;
  padding-top: 86px;
  color: #df9d0c;
  font-size: 19px;
  font-weight: 700;
}
.story .panel-footer a {
  display: inline-flex;
  gap: 26px;
  align-items: center;
}
.story .panel-footer div {
  gap: 24px;
  color: #14110e;
  font-size: 22px;
  font-weight: 400;
}
.story .panel-footer button {
  width: 46px;
  height: 46px;
  border: 2px solid #e9b323;
  border-radius: 50%;
  background: transparent;
  color: #e2a416;
  font-size: 30px;
}
.story > .trust-row {
  position: static;
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin: 16px 0 0;
  color: #15120f;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
.story > .trust-row span {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 12px;
}
.story > .trust-row span::first-letter {
  color: #e6aa22;
  font-size: 42px;
  font-weight: 300;
}
@media (max-width: 1100px) {
  .story.panel-card {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 54px 28px;
  }
  .story > .trust-row { grid-row: 2; margin-top: -12px; }
  .story__content { grid-row: 3; }
  .story .stepper { margin-bottom: 52px; }
}
@media (max-width: 640px) {
  .story.panel-card {
    padding: 34px 18px;
    margin-bottom: 36px;
  }
  .story .stepper {
    grid-template-columns: repeat(5, 76px);
    overflow-x: auto;
    font-size: 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .story .stepper span { width: 38px; height: 38px; font-size: 15px; }
  .story__content h2 { font-size: 36px; margin-bottom: 34px; }
  .story .result-grid { grid-template-columns: 1fr; gap: 26px; }
  .story .result-grid > span { display: none; }
  .story .result-grid h3 { font-size: 24px; margin-bottom: 12px; }
  .story .result-grid p { font-size: 17px; line-height: 1.55; }
  .story .panel-footer { display: grid; gap: 22px; padding-top: 40px; }
  .story > .trust-row { grid-template-columns: 1fr; gap: 14px; }
}

/* Stepper connector and hover polish */
.story .stepper li::before,
.quiz .stepper li::before {
  left: calc(-50% + 28px);
  width: calc(100% - 56px);
  z-index: 0;
}
.story .stepper .active::after {
  left: calc(50% + 28px);
  width: calc(50% - 56px);
  z-index: 0;
}
.story .stepper span,
.quiz .stepper span {
  position: relative;
  z-index: 1;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.story .stepper li,
.quiz .stepper li {
  cursor: pointer;
  transition: color .22s ease, font-weight .22s ease;
}
.story .stepper li:hover,
.quiz .stepper li:hover {
  color: #17120a;
  font-weight: 800;
}
.story .stepper li:hover span,
.quiz .stepper li:hover span {
  transform: scale(1.16);
  background: #f7b51f;
  border-color: #f3b32a;
  color: #17120a;
  box-shadow: 0 8px 18px rgba(191, 126, 0, .2);
}
@media (max-width: 640px) {
  .story .stepper li::before,
  .quiz .stepper li::before {
    left: calc(-50% + 22px);
    width: calc(100% - 44px);
  }
  .story .stepper .active::after {
    left: calc(50% + 22px);
    width: calc(50% - 44px);
  }
}

/* Financing form progress hover interaction */
.quiz .stepper {
  --step-yellow: #f7b51f;
  --step-line: #e6decf;
  --step-text: #1f1b16;
}
.quiz .stepper li {
  color: #8f8778;
  font-weight: 500;
}
.quiz .stepper li::before {
  background: var(--step-line);
  transition: background-color .3s ease, opacity .3s ease;
}
.quiz .stepper li.line-filled::before {
  background: var(--step-yellow);
}
.quiz .stepper li.active,
.quiz .stepper li.completed {
  color: var(--step-text);
  font-weight: 800;
}
.quiz .stepper li.completed span {
  background: #f7d978;
  border-color: #f0bd36;
  color: #17120a;
}
.quiz .stepper li.active span {
  transform: scale(1.16);
  background: var(--step-yellow);
  border-color: #f3b32a;
  color: #17120a;
  box-shadow: 0 8px 18px rgba(191, 126, 0, .2);
}
.quiz .stepper li.hovered {
  color: var(--step-text);
  font-weight: 900;
}

/* Neutral stepper hover: yellow only on hovered circle, gray lines stay consistent */
.quiz .stepper li::before,
.story .stepper li::before {
  background: #b8b8b8 !important;
  left: calc(-50% + 34px) !important;
  width: calc(100% - 68px) !important;
}
.quiz .stepper .active::after,
.story .stepper .active::after {
  display: none !important;
}
.quiz .stepper li,
.story .stepper li {
  color: #2f2f2f;
  font-weight: 500;
}
.quiz .stepper span,
.story .stepper span {
  background: #fff !important;
  border: 2px solid #aeb0b3 !important;
  color: #2f2f2f !important;
  transform: scale(1) !important;
  box-shadow: none !important;
}
.quiz .stepper li.active,
.quiz .stepper li.completed,
.quiz .stepper li.hovered,
.story .stepper li.active,
.story .stepper li.completed,
.story .stepper li.hovered {
  color: #2f2f2f;
  font-weight: 500;
}
.quiz .stepper li.hovered,
.story .stepper li.hovered {
  font-weight: 800;
}
.quiz .stepper li.hovered span,
.story .stepper li.hovered span {
  background: #ffc456 !important;
  border-color: #ffc456 !important;
  color: #2b2b2b !important;
  transform: scale(1.16) !important;
  box-shadow: none !important;
}
.quiz .stepper li.line-filled::before,
.story .stepper li.line-filled::before {
  background: #b8b8b8 !important;
}
@media (max-width: 640px) {
  .quiz .stepper li::before,
  .story .stepper li::before {
    left: calc(-50% + 27px) !important;
    width: calc(100% - 54px) !important;
  }
}

/* Final neutral-only stepper behavior */
.stepper li,
.stepper li.active,
.stepper li.completed,
.stepper li.hovered {
  color: #303236 !important;
  font-weight: 500 !important;
}
.stepper span,
.stepper .active span,
.stepper .completed span,
.stepper .hovered span {
  width: 56px;
  height: 56px;
  background: #fff !important;
  border: 2px solid #aeb0b3 !important;
  color: #303236 !important;
  transform: scale(1) !important;
  box-shadow: none !important;
  transition: transform .28s ease, background-color .28s ease, border-color .28s ease, color .28s ease, box-shadow .28s ease;
}
.stepper li::before,
.stepper li.line-filled::before {
  background: #aeb0b3 !important;
  left: calc(-50% + 38px) !important;
  width: calc(100% - 76px) !important;
  height: 2px !important;
  z-index: 0;
}
.stepper .active::after,
.stepper .completed::after,
.stepper .hovered::after {
  display: none !important;
}
.stepper li.hovered {
  font-weight: 800 !important;
}
.stepper li.hovered span {
  background: #ffc456 !important;
  border-color: #ffc456 !important;
  color: #2b2b2b !important;
  transform: scale(1.16) !important;
}
@media (max-width: 640px) {
  .stepper span,
  .stepper .active span,
  .stepper .completed span,
  .stepper .hovered span {
    width: 44px;
    height: 44px;
  }
  .stepper li::before,
  .stepper li.line-filled::before {
    left: calc(-50% + 31px) !important;
    width: calc(100% - 62px) !important;
  }
}

/* Prevent stepper hover from changing page height */
.stepper {
  align-items: start;
}
.stepper li {
  grid-template-rows: 56px 44px;
  align-items: start;
  min-height: 104px;
  line-height: 1.2;
  overflow: visible;
}
.stepper li span {
  align-self: start;
  justify-self: center;
}
.story .stepper li,
.quiz .stepper li {
  min-height: 104px !important;
  grid-template-rows: 56px 44px !important;
}
.story .stepper,
.quiz .stepper {
  overflow: visible;
}
@media (max-width: 640px) {
  .stepper li,
  .story .stepper li,
  .quiz .stepper li {
    grid-template-rows: 44px 42px !important;
    min-height: 88px !important;
  }
}

/* Success story compact bottom utility row */
.story .story-bottom-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  margin-top: 22px;
  width: 100%;
}
.story .story-bottom-row > .trust-row {
  position: static !important;
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(24px, 3.2vw, 54px);
  margin: 0 !important;
  color: #15120f;
  font-size: 16px;
  line-height: 1.22;
  font-weight: 600;
  min-width: 0;
  flex: 1 1 auto;
}
.story .story-bottom-row > .trust-row span {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-width: 142px;
  max-width: 185px;
  flex: 0 0 auto;
  white-space: normal;
}
.story .story-bottom-row > .trust-row span::first-letter {
  color: #e6aa22;
  font-size: 42px;
  line-height: .8;
  font-weight: 300;
}
.story .story-bottom-row .panel-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(24px, 3vw, 52px);
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  color: #df9d0c;
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
}
.story .story-bottom-row .panel-footer a {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
  color: #df9d0c;
}
.story .story-bottom-row .panel-footer div {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  color: #14110e;
}
.story .story-bottom-row .panel-footer b {
  font-size: 22px;
  font-weight: 400;
  white-space: nowrap;
}
.story .story-bottom-row .panel-footer button {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 2px solid #e9b323;
  border-radius: 50%;
  background: transparent;
  color: #e2a416;
  font-size: 30px;
  line-height: 1;
}
@media (max-width: 1180px) {
  .story .story-bottom-row {
    flex-wrap: wrap;
    gap: 24px;
  }
  .story .story-bottom-row .panel-footer {
    width: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 720px) {
  .story .story-bottom-row > .trust-row {
    width: 100%;
    flex-wrap: wrap;
    gap: 18px 28px;
  }
  .story .story-bottom-row > .trust-row span {
    min-width: 150px;
  }
  .story .story-bottom-row .panel-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    white-space: normal;
  }
  .story .story-bottom-row .panel-footer a {
    white-space: normal;
  }
}

/* Screenshot-matched questionnaire section */
.quiz.panel-card[data-quiz-form],
.quiz.panel-card {
  max-width: 1460px;
  margin: 0 auto 54px;
  padding: clamp(56px, 7vw, 112px) clamp(38px, 5vw, 64px) clamp(54px, 6vw, 92px);
  display: grid;
  grid-template-columns: minmax(320px, .38fr) minmax(620px, .62fr);
  gap: clamp(48px, 7vw, 105px);
  align-items: stretch;
  border-radius: 7px;
  background: #fffdf8;
  border: 1px solid rgba(242, 211, 128, .82);
  box-shadow: 0 14px 28px rgba(139, 91, 0, .18);
}
.quiz__intro {
  display: flex;
  flex-direction: column;
  min-height: 520px;
}
.quiz__intro .eyebrow {
  margin: 0 0 30px;
  color: #dca217;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}
.quiz__intro h2 {
  color: #0f0e0c;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1.22;
  letter-spacing: -.045em;
  font-weight: 500;
}
.quiz__intro > p:not(.eyebrow) {
  max-width: 410px;
  margin: 32px 0 auto;
  color: #4b4b4b;
  font-size: 23px;
  line-height: 1.5;
  font-weight: 400;
}
.quiz .trust-row--inline {
  position: static;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(24px, 3vw, 48px);
  margin-top: 76px;
  color: #15120f;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
}
.quiz .trust-row--inline span {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 138px;
  white-space: normal;
}
.quiz .trust-row--inline span::first-letter {
  color: #efb82d;
  font-size: 42px;
  line-height: .8;
  font-weight: 300;
}
.quiz__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.quiz .stepper {
  width: min(100%, 760px);
  margin: 0 auto 76px;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 20px;
  color: #171717;
  font-size: 15px;
  font-weight: 500;
  overflow: visible;
}
.quiz .stepper li,
.quiz .stepper li.active,
.quiz .stepper li.completed,
.quiz .stepper li.hovered {
  min-height: 82px !important;
  grid-template-rows: 48px 28px !important;
  gap: 15px;
  color: #171717 !important;
  font-weight: 500 !important;
  line-height: 1.15;
}
.quiz .stepper li::before,
.quiz .stepper li.line-filled::before {
  top: 23px !important;
  left: calc(-50% + 34px) !important;
  width: calc(100% - 68px) !important;
  height: 2px !important;
  background: #e4ded2 !important;
}
.quiz .stepper li:first-child::before { display: none !important; }
.quiz .stepper span,
.quiz .stepper .completed span,
.quiz .stepper .hovered span,
.quiz .stepper .active span {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  border: 2px solid #dedbd3 !important;
  background: #faf9f5 !important;
  color: #171717 !important;
  font-size: 18px !important;
  font-weight: 700;
  transform: scale(1) !important;
  box-shadow: none !important;
}
.quiz .stepper li.active,
.quiz .stepper li.hovered {
  font-weight: 800 !important;
}
.quiz .stepper li.active span,
.quiz .stepper li.hovered span {
  background: #f7b51f !important;
  border-color: #f7b51f !important;
  color: #17120a !important;
  transform: scale(1.04) !important;
}
.quiz__card h3 {
  margin: 0 0 40px;
  color: #11100e;
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 500;
}
.quiz .option-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(124px, 1fr));
  gap: clamp(12px, 1.3vw, 18px);
}
.quiz .option {
  min-height: 225px;
  padding: 26px 16px 22px;
  border: 1px solid #eee5d6;
  border-radius: 8px;
  background: #fffdf8;
  color: #f2bd38;
  box-shadow: none;
  font-size: 58px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 22px;
}
.quiz .option.is-selected {
  border-color: #f2bd38;
  background: #fffdf8;
  box-shadow: inset 0 0 0 1px rgba(242, 189, 56, .34);
}
.quiz .option span {
  color: #12100d;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 500;
}
.quiz .next {
  align-self: flex-end;
  float: none;
  min-width: 255px;
  height: 64px;
  margin-top: 86px;
  border-radius: 8px;
  font-size: 20px;
  gap: 58px;
  justify-content: space-around;
}
@media (max-width: 1180px) {
  .quiz.panel-card[data-quiz-form],
  .quiz.panel-card {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .quiz__intro { min-height: auto; }
  .quiz__intro > p:not(.eyebrow) { margin-bottom: 0; }
  .quiz .trust-row--inline { margin-top: 44px; }
  .quiz .stepper { margin-bottom: 48px; }
}
@media (max-width: 760px) {
  .quiz.panel-card[data-quiz-form],
  .quiz.panel-card { padding: 36px 18px; }
  .quiz__intro h2 { font-size: 40px; }
  .quiz__intro > p:not(.eyebrow) { font-size: 18px; }
  .quiz .trust-row--inline { flex-wrap: wrap; gap: 18px 26px; }
  /* Previously a fixed repeat(5,92px) track (~530px total) that had to
     scroll horizontally to fit a phone screen -- and, per the desktop
     rule's own minmax(92px,1fr) floor, could never actually shrink below
     that 92px per column. Compressing all 5 columns down to an even,
     scrollbar-free fit instead: no minimum floor, smaller circles/type/
     gaps so five columns plus their labels genuinely fit inside ~360-400px
     of usable width without needing to scroll at all. */
  .quiz .stepper {
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 32px;
  }
  .quiz .stepper li,
  .quiz .stepper li.active,
  .quiz .stepper li.completed,
  .quiz .stepper li.hovered {
    min-height: 56px !important;
    grid-template-rows: 30px 22px !important;
    gap: 6px;
    font-size: 10px !important;
    line-height: 1.15;
  }
  .quiz .stepper span,
  .quiz .stepper .completed span,
  .quiz .stepper .hovered span,
  .quiz .stepper .active span {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
  .quiz .stepper li::before,
  .quiz .stepper li.line-filled::before {
    top: 13px !important;
    left: calc(-50% + 16px) !important;
    width: calc(100% - 32px) !important;
  }
  .quiz .option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiz .option { min-height: 180px; font-size: 44px; }
  .quiz .option span { font-size: 17px; }
  .quiz .next { width: 100%; min-width: 0; margin-top: 36px; }
}

/* Custom option card icons and bottom CTA alignment */
.quiz__card {
  min-height: 520px;
}
.quiz .option {
  overflow: hidden;
  word-break: normal;
  overflow-wrap: normal;
}
.quiz .option-icon {
  width: 74px;
  height: 74px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.quiz .option span {
  max-width: 120px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.quiz .next {
  margin-top: auto !important;
}
@media (max-width: 1180px) {
  .quiz__card { min-height: auto; }
  .quiz .next { margin-top: 42px !important; }
}
@media (max-width: 760px) {
  .quiz .option-icon { width: 58px; height: 58px; }
  .quiz .option span { max-width: 100%; min-height: 44px; }
}

/* Option card alignment polish */
.quiz .option {
  grid-template-rows: 92px auto;
  align-content: center;
  justify-content: center;
  justify-items: center;
  padding: 28px 12px 24px;
  gap: 18px;
  text-align: center;
}
.quiz .option-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto;
  object-fit: contain;
  object-position: center center;
  justify-self: center;
  align-self: center;
}
.quiz .option span {
  width: 100%;
  max-width: 132px;
  min-height: 58px;
  margin: 0 auto;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.22;
  font-size: 20px;
}
.quiz .option img[src$="icon-commercial.png"] {
  transform: translateX(0);
  object-position: center center;
}
.quiz .option img[src$="icon-bridge.png"] {
  width: 104px;
  height: 82px;
  max-width: 112px;
}
.quiz .next {
  margin-top: 112px !important;
}
@media (max-width: 1180px) {
  .quiz .next { margin-top: 56px !important; }
}
@media (max-width: 760px) {
  .quiz .option { grid-template-rows: 72px auto; padding: 22px 10px 20px; }
  .quiz .option-icon { width: 62px; height: 62px; }
  .quiz .option img[src$="icon-bridge.png"] { width: 86px; height: 66px; }
  .quiz .option span { max-width: 118px; min-height: 46px; font-size: 16px; }
  .quiz .next { margin-top: 42px !important; }
}

/* Explore More Solutions supplied icons */
.mini-card div img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  display: block;
}
.mini-card div:has(img) {
  display: grid;
  place-items: center;
}
@media (max-width: 640px) {
  .mini-card div img {
    width: 50px;
    height: 50px;
  }
}



.card-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}
@media (max-width: 640px) {
  .card-icon img { width: 36px; height: 36px; }
}




@media (prefers-reduced-motion: reduce) {
  .btn--hero::before { animation: none; }
}
@media (max-width: 640px) {
  .btn--hero {
    min-width: 218px;
    height: 54px;
    padding: 0 28px;
    font-size: 15px;
  }
}

/* Final consistent golden glow interaction pass */
:root {
  --glow-gold: #ffd45a;
  --glow-amber: #f3a516;
  --glow-deep: #c77700;
}
.btn--hero,
.btn--gold,
.quiz .next {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 58px;
  padding: 0 34px;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 239, 174, .8);
  background: transparent !important;
  color: #201404;
  font-weight: 900;
  box-shadow:
    0 18px 34px rgba(181, 104, 0, .34),
    0 0 34px rgba(255, 202, 54, .38),
    inset 0 1px 0 rgba(255, 255, 255, .58);
  transform: translateZ(0);
  transition: transform 300ms ease, box-shadow 300ms ease, filter 300ms ease;
}
.btn--hero::before,
.btn--gold::before,
.quiz .next::before {
  content: "";
  position: absolute;
  inset: -95%;
  z-index: -2;
  background: conic-gradient(
    from 0deg,
    rgba(255, 212, 90, .18) 0deg,
    rgba(255, 241, 168, .95) 42deg,
    rgba(255, 193, 47, 1) 86deg,
    rgba(243, 165, 22, .92) 128deg,
    rgba(199, 119, 0, .34) 170deg,
    rgba(255, 212, 90, .14) 250deg,
    rgba(255, 241, 168, .9) 308deg,
    rgba(255, 212, 90, .18) 360deg
  );
  filter: blur(2px) saturate(1.15);
  animation: goldenGlowRotate 2.8s linear infinite;
  opacity: .95;
  pointer-events: none;
}
.btn--hero::after,
.btn--gold::after,
.quiz .next::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, #fff0a8 0%, #ffd04f 34%, #f4aa1e 68%, #ffd76d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -12px 20px rgba(173, 96, 0, .18);
  pointer-events: none;
}
.btn--hero:hover,
.btn--gold:hover,
.quiz .next:hover {
  transform: scale(1.04);
  filter: saturate(1.08) brightness(1.04);
  box-shadow:
    0 23px 44px rgba(181, 104, 0, .44),
    0 0 54px rgba(255, 203, 52, .62),
    inset 0 1px 0 rgba(255, 255, 255, .68);
}
.btn--hero:hover::before,
.btn--gold:hover::before,
.quiz .next:hover::before {
  opacity: 1;
  filter: blur(2px) saturate(1.35) brightness(1.08);
}
.btn--hero {
  min-width: 245px;
  height: 58px;
  font-size: 16px;
}
.btn--gold {
  min-width: 230px;
  height: 58px;
  font-size: 16px;
}
.quiz .next {
  min-width: 255px;
  height: 64px;
  font-size: 20px;
}

.mini-card,
.quiz .option {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform-origin: center center;
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease, background 300ms ease;
}
.mini-card::before,
.quiz .option::before {
  content: "";
  position: absolute;
  inset: -65%;
  z-index: 0;
  opacity: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 239, 155, .92) 52deg,
    rgba(255, 194, 45, 1) 102deg,
    rgba(236, 159, 17, .82) 150deg,
    transparent 215deg,
    rgba(255, 218, 91, .55) 306deg,
    transparent 360deg
  );
  filter: blur(3px) saturate(1.18);
  animation: goldenGlowRotate 2.9s linear infinite;
  pointer-events: none;
  transition: opacity 300ms ease, filter 300ms ease;
}
.mini-card::after,
.quiz .option::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  border-radius: inherit;
  background: inherit;
  pointer-events: none;
}
.mini-card > *,
.quiz .option > * {
  position: relative;
  z-index: 1;
}
.mini-card:hover,
.quiz .option:hover {
  transform: scale(1.035) !important;
  border-color: rgba(240, 181, 44, .82) !important;
  box-shadow:
    0 22px 42px rgba(149, 94, 4, .2),
    0 0 34px rgba(255, 202, 54, .32) !important;
}
.mini-card:hover::before,
.quiz .option:hover::before {
  opacity: 1;
}
.quiz .option,
.quiz .option.is-selected {
  border-color: #eee5d6;
  background: #fffefb;
  box-shadow: none;
}
.quiz .option:hover img,
.quiz .option:hover span {
  filter: saturate(1.08) brightness(1.02);
}

@keyframes goldenGlowRotate {
  to { transform: rotate(1turn); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--hero::before,
  .btn--gold::before,
  .quiz .next::before,
  .mini-card::before,
  .quiz .option::before {
    animation: none;
  }
}
@media (max-width: 640px) {
  .btn--hero,
  .btn--gold,
  .quiz .next {
    min-width: 0;
    width: 100%;
    height: 54px;
    font-size: 15px;
  }
}

/* CTA strip rectangular premium glow override */
.cta-strip .btn.btn--gold {
  min-width: 265px;
  height: 66px;
  padding: 0 34px;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 238, 166, .82);
  background: transparent !important;
  color: #211505;
  font-size: 18px;
  font-weight: 900;
  box-shadow:
    0 18px 28px rgba(154, 94, 0, .26),
    0 8px 14px rgba(255, 185, 36, .2),
    0 0 30px rgba(255, 207, 67, .34),
    inset 0 1px 0 rgba(255, 255, 255, .56);
  transform: translateZ(0);
}
.cta-strip .btn.btn--gold::before {
  inset: -88%;
  opacity: .98;
  filter: blur(2px) saturate(1.2) brightness(1.06);
  background: conic-gradient(
    from 0deg,
    rgba(255, 213, 77, .18) 0deg,
    rgba(255, 242, 168, 1) 44deg,
    rgba(255, 194, 39, 1) 92deg,
    rgba(236, 151, 10, .94) 142deg,
    rgba(201, 116, 0, .3) 192deg,
    rgba(255, 211, 76, .15) 258deg,
    rgba(255, 238, 153, .95) 318deg,
    rgba(255, 213, 77, .18) 360deg
  );
  animation-duration: 2.6s;
}
.cta-strip .btn.btn--gold::after {
  inset: 3px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 44%),
    linear-gradient(135deg, #fff0a6 0%, #ffd257 32%, #f2a51b 70%, #ffd76c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -12px 20px rgba(167, 91, 0, .2);
}
.cta-strip .btn.btn--gold:hover {
  transform: scale(1.035);
  box-shadow:
    0 22px 36px rgba(154, 94, 0, .34),
    0 12px 18px rgba(255, 185, 36, .24),
    0 0 46px rgba(255, 207, 67, .56),
    inset 0 1px 0 rgba(255, 255, 255, .66);
}
.cta-strip .btn.btn--gold:hover::before {
  filter: blur(2px) saturate(1.38) brightness(1.12);
}
@media (max-width: 640px) {
  .cta-strip .btn.btn--gold {
    width: 100%;
    min-width: 0;
    height: 58px;
    border-radius: 11px !important;
    font-size: 16px;
  }
  .cta-strip .btn.btn--gold::after {
    border-radius: 8px;
  }
}

/* Final tab CTA and stepper hover refinements */
.tabs {
  position: relative;
  align-items: center;
  border-radius: 999px;
}
.tab {
  position: relative;
  z-index: 1;
  transition: transform 260ms ease, box-shadow 260ms ease, background 260ms ease, color 260ms ease, filter 260ms ease;
}
.tab:hover:not(.is-active) {
  color: #2d2519;
  background: rgba(255, 227, 137, .36);
}
.tab.is-active {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 48%),
    linear-gradient(180deg, #ffd45c 0%, #ffbd37 62%, #f2a719 100%) !important;
  color: #241807 !important;
  transform: translateY(-3px) scale(1.015);
  box-shadow:
    0 16px 28px rgba(166, 100, 0, .24),
    0 6px 12px rgba(255, 187, 45, .22),
    inset 0 1px 0 rgba(255,255,255,.48) !important;
  filter: saturate(1.06);
}

/* Cleaner CTA glow: keep warmth/depth, remove glossy shine rings and glare. */
.btn--hero,
.btn--gold,
.quiz .next {
  border-color: rgba(229, 164, 22, .46) !important;
}
.btn--hero::before,
.btn--gold::before,
.quiz .next::before {
  opacity: .58;
  filter: blur(5px) saturate(1.08) !important;
  background: conic-gradient(
    from 0deg,
    rgba(255, 213, 76, .08) 0deg,
    rgba(255, 210, 68, .58) 58deg,
    rgba(242, 164, 23, .66) 116deg,
    rgba(199, 119, 0, .22) 178deg,
    rgba(255, 213, 76, .08) 248deg,
    rgba(255, 196, 43, .5) 318deg,
    rgba(255, 213, 76, .08) 360deg
  ) !important;
}
.btn--hero::after,
.btn--gold::after,
.quiz .next::after {
  background: linear-gradient(135deg, #ffe076 0%, #ffc247 36%, #eda017 72%, #ffd166 100%) !important;
  box-shadow: inset 0 -10px 18px rgba(149, 82, 0, .16) !important;
}
.btn--hero:hover::before,
.btn--gold:hover::before,
.quiz .next:hover::before {
  opacity: .74;
  filter: blur(5px) saturate(1.18) brightness(1.04) !important;
}
.cta-strip .btn.btn--gold {
  border-radius: 12px !important;
  border-color: rgba(221, 151, 12, .5) !important;
}
.cta-strip .btn.btn--gold::before {
  opacity: .5 !important;
  filter: blur(5px) saturate(1.08) !important;
}
.cta-strip .btn.btn--gold::after {
  border-radius: 9px !important;
  background: linear-gradient(135deg, #ffe078 0%, #ffc24a 38%, #eea01a 72%, #ffd36a 100%) !important;
  box-shadow: inset 0 -10px 18px rgba(149, 82, 0, .16) !important;
}
.cta-strip .btn.btn--gold:hover::before {
  opacity: .66 !important;
  filter: blur(5px) saturate(1.16) brightness(1.04) !important;
}

/* Stepper: neutral default, hover-only yellow circle with rotating golden halo. */
.stepper span,
.stepper .active span,
.stepper .completed span,
.stepper .hovered span,
.story .stepper span,
.quiz .stepper span,
.story .stepper .active span,
.quiz .stepper .active span {
  position: relative !important;
  isolation: isolate;
  overflow: visible;
  background: #fff !important;
  border-color: #aeb0b3 !important;
  color: #303236 !important;
  box-shadow: none !important;
  transform: scale(1) !important;
}
.stepper span::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 50%;
  opacity: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 232, 132, .85) 54deg,
    rgba(255, 195, 43, .95) 112deg,
    rgba(232, 154, 14, .72) 158deg,
    transparent 220deg,
    rgba(255, 211, 70, .54) 315deg,
    transparent 360deg
  );
  filter: blur(3px) saturate(1.16);
  animation: goldenGlowRotate 2.35s linear infinite;
  transition: opacity 260ms ease, filter 260ms ease;
  pointer-events: none;
}
.stepper li.hovered span,
.stepper li:hover span,
.story .stepper li.hovered span,
.quiz .stepper li.hovered span,
.story .stepper li:hover span,
.quiz .stepper li:hover span {
  background: linear-gradient(180deg, #ffd45a, #ffb72d) !important;
  border-color: #f0ad20 !important;
  color: #222222 !important;
  transform: scale(1.14) !important;
  box-shadow: 0 8px 16px rgba(180, 108, 0, .18) !important;
}
.stepper li.hovered span::before,
.stepper li:hover span::before {
  opacity: 1;
}
.stepper li.hovered,
.stepper li:hover {
  font-weight: 800 !important;
}
.stepper li::before,
.stepper li.line-filled::before {
  background: #e4ded2 !important;
}
.stepper li::after,
.stepper .active::after,
.stepper .completed::after,
.stepper .hovered::after {
  display: none !important;
}

/* Tight finance option border glow override */
.quiz .option {
  overflow: hidden !important;
  background: #fffefb !important;
  box-shadow: none !important;
}
.quiz .option::before {
  inset: -2px !important;
  z-index: 0;
  opacity: 0;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 28deg,
    #ffe57d 58deg,
    #ffc12e 94deg,
    #e99a0d 126deg,
    transparent 164deg,
    transparent 360deg
  ) !important;
  filter: none !important;
  animation: goldenGlowRotate 2.25s linear infinite;
  transition: opacity 260ms ease;
  pointer-events: none;
}
.quiz .option::after {
  inset: 3px !important;
  z-index: 0;
  border-radius: 5px !important;
  background: #fffefb !important;
  box-shadow: none !important;
  pointer-events: none;
}
.quiz .option:hover {
  transform: scale(1.025) !important;
  border-color: rgba(236, 170, 33, .78) !important;
  box-shadow: 0 10px 20px rgba(119, 76, 0, .08) !important;
}
.quiz .option:hover::before {
  opacity: 1 !important;
}
.quiz .option:hover::after {
  background: #fffefb !important;
}

/* Sliding tabs and tight step outline glow */
.tabs {
  position: relative !important;
  overflow: visible;
}
.tabs .active-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  height: 100%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 48%),
    linear-gradient(180deg, #ffd45c 0%, #ffbd37 62%, #f2a719 100%);
  box-shadow:
    0 16px 28px rgba(166, 100, 0, .24),
    0 6px 12px rgba(255, 187, 45, .22),
    inset 0 1px 0 rgba(255,255,255,.48);
  transition: transform 420ms cubic-bezier(.2, .85, .24, 1), width 420ms cubic-bezier(.2, .85, .24, 1), box-shadow 260ms ease;
  pointer-events: none;
}
.tabs .active-pill.is-measuring {
  transition: none;
}
.tab {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.tab.is-active {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: #241807 !important;
  font-weight: 800;
}
.tab:hover:not(.is-active) {
  background: rgba(255, 227, 137, .34) !important;
}

.stepper span::before {
  inset: -3px !important;
  z-index: -1 !important;
  opacity: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 34deg,
    #ffe680 66deg,
    #ffc12f 102deg,
    #e99b0e 134deg,
    transparent 168deg,
    transparent 360deg
  ) !important;
  filter: none !important;
  animation: goldenGlowRotate 1.85s linear infinite;
  transition: opacity 220ms ease;
}
.stepper li.hovered span,
.stepper li:hover span,
.story .stepper li.hovered span,
.quiz .stepper li.hovered span,
.story .stepper li:hover span,
.quiz .stepper li:hover span {
  background: #ffc13a !important;
  border-color: transparent !important;
  color: #222222 !important;
  transform: scale(1.14) !important;
  box-shadow: none !important;
}
.stepper li.hovered span::before,
.stepper li:hover span::before {
  opacity: 1 !important;
}
.stepper li::before,
.stepper li.line-filled::before {
  background: #e4ded2 !important;
}
@media (max-width: 640px) {
  .tabs .active-pill {
    display: none;
  }
  .tab.is-active {
    background: linear-gradient(180deg, #ffd45c, #ffbd37) !important;
  }
}

/* Final clean Next CTA and complete option border light */
.quiz .next,
.quiz .next:hover {
  position: relative;
  overflow: hidden;
  isolation: auto;
  border: 1px solid rgba(198, 129, 0, .34) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #ffe17b 0%, #ffc347 38%, #eea21a 72%, #ffd36a 100%) !important;
  color: #201404 !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: 0 12px 22px rgba(104, 69, 8, .16), inset 0 -8px 14px rgba(145, 80, 0, .12) !important;
}
.quiz .next::before,
.quiz .next::after,
.quiz .next:hover::before,
.quiz .next:hover::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}
.quiz .next:hover {
  transform: scale(1.025) !important;
  box-shadow: 0 14px 24px rgba(104, 69, 8, .18), inset 0 -8px 14px rgba(145, 80, 0, .12) !important;
}

.quiz .option {
  position: relative;
  isolation: isolate;
  overflow: hidden !important;
  border: 1px solid #eee5d6 !important;
  background: #fffefb !important;
  box-shadow: none !important;
}
.quiz .option::before {
  content: "" !important;
  position: absolute;
  inset: 0 !important;
  z-index: 0;
  opacity: 0;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 32deg,
    #fff0a2 54deg,
    #ffc02e 82deg,
    #e99a0d 112deg,
    transparent 146deg,
    transparent 360deg
  ) !important;
  filter: none !important;
  animation: goldenGlowRotate 2s linear infinite;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.quiz .option::after {
  content: "" !important;
  position: absolute;
  inset: 3px !important;
  z-index: 1;
  border-radius: 5px !important;
  background: #fffefb !important;
  box-shadow: none !important;
  pointer-events: none;
}
.quiz .option > * {
  position: relative;
  z-index: 2 !important;
}
.quiz .option:hover {
  transform: scale(1.025) !important;
  border-color: #e8ad25 !important;
  box-shadow: 0 8px 16px rgba(106, 72, 8, .08) !important;
}
.quiz .option:hover::before {
  opacity: 1 !important;
}
.quiz .option:hover::after {
  inset: 3px !important;
  background: #fffefb !important;
}
.quiz .option.is-selected {
  border-color: #eee5d6 !important;
  background: #fffefb !important;
  box-shadow: none !important;
}

/* Final masked outline motion for quiz cards and Next */
.quiz .option,
.quiz .next {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}
.quiz .option {
  border: 1px solid #eee5d6 !important;
  background: #fffefb !important;
  box-shadow: none !important;
}
.quiz .option::before,
.quiz .next::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: 0 !important;
  border-radius: inherit !important;
  padding: 4px;
  background: conic-gradient(
    from 0deg,
    rgba(226, 163, 31, .46) 0deg,
    rgba(226, 163, 31, .46) 40deg,
    #fff0a5 70deg,
    #ffc12e 100deg,
    #e8980c 132deg,
    rgba(226, 163, 31, .46) 168deg,
    rgba(226, 163, 31, .46) 360deg
  ) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: none !important;
  box-shadow: none !important;
  animation: goldenGlowRotate 1.85s linear infinite;
  pointer-events: none !important;
  transition: opacity 220ms ease;
}
.quiz .option::after,
.quiz .next::after {
  content: none !important;
  display: none !important;
}
.quiz .option > *,
.quiz .next > * {
  position: relative;
  z-index: 2 !important;
}
.quiz .option:hover {
  transform: scale(1.025) !important;
  border-color: #dca32a !important;
  box-shadow: 0 8px 15px rgba(82, 56, 10, .08) !important;
}
.quiz .option:hover::before {
  opacity: 1 !important;
}
.quiz .option.is-selected {
  border-color: #eee5d6 !important;
  background: #fffefb !important;
  box-shadow: none !important;
}

.quiz .next,
.quiz .next:hover {
  border: 1px solid rgba(198, 129, 0, .38) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #ffe17b 0%, #ffc347 38%, #eea21a 72%, #ffd36a 100%) !important;
  color: #201404 !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: 0 12px 22px rgba(104, 69, 8, .16), inset 0 -8px 14px rgba(145, 80, 0, .12) !important;
}
.quiz .next:hover {
  transform: scale(1.025) !important;
  border-color: #d39416 !important;
  box-shadow: 0 14px 24px rgba(104, 69, 8, .18), inset 0 -8px 14px rgba(145, 80, 0, .12) !important;
}
.quiz .next:hover::before {
  opacity: 1 !important;
}

/* Thick luminous outline hover for quiz cards and hero-style Next */
.quiz .option,
.quiz .next {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}
.quiz .option {
  border: 1px solid #eee5d6 !important;
  background: #fffefb !important;
  box-shadow: none !important;
}
.quiz .option::before,
.quiz .next::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: 0 !important;
  border-radius: inherit !important;
  padding: 12px !important;
  background: conic-gradient(
    from 0deg,
    rgba(214, 145, 10, .7) 0deg,
    rgba(214, 145, 10, .7) 40deg,
    #fff4b6 66deg,
    #ffd247 92deg,
    #f2a116 122deg,
    rgba(214, 145, 10, .7) 156deg,
    rgba(214, 145, 10, .7) 360deg
  ) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask-composite: exclude !important;
  filter: none !important;
  box-shadow: none !important;
  animation: goldenGlowRotate 1.8s linear infinite;
  pointer-events: none !important;
  transition: opacity 240ms ease;
}
.quiz .option::after,
.quiz .next::after {
  content: none !important;
  display: none !important;
}
.quiz .option > *,
.quiz .next > * {
  position: relative;
  z-index: 2 !important;
}
.quiz .option:hover {
  transform: scale(1.025) !important;
  border-color: rgba(224, 160, 27, .85) !important;
  box-shadow: 0 10px 18px rgba(94, 62, 6, .09) !important;
}
.quiz .option:hover::before {
  opacity: 1 !important;
}
.quiz .option.is-selected {
  border-color: #eee5d6 !important;
  background: #fffefb !important;
  box-shadow: none !important;
}

.quiz .next,
.quiz .next:hover {
  border: 1px solid rgba(203, 132, 0, .5) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 48%),
    linear-gradient(135deg, #fff0a8 0%, #ffd052 34%, #f2a51b 70%, #ffd76d 100%) !important;
  color: #201404 !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow:
    0 16px 26px rgba(104, 69, 8, .18),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -10px 18px rgba(145, 80, 0, .13) !important;
}
.quiz .next::before {
  border-radius: inherit !important;
  padding: 10px !important;
}
.quiz .next:hover {
  transform: scale(1.035) !important;
  border-color: rgba(218, 151, 16, .92) !important;
  box-shadow:
    0 18px 30px rgba(104, 69, 8, .2),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -10px 18px rgba(145, 80, 0, .13) !important;
}
.quiz .next:hover::before {
  opacity: 1 !important;
}
@media (max-width: 640px) {
  .quiz .option::before { padding: 8px !important; }
  .quiz .next::before { padding: 8px !important; }
}

/* Robust no-stripe option card border ring */
.quiz .option {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid #eee5d6 !important;
  background: #fffefb !important;
  box-shadow: none !important;
}
.quiz .option::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
  border-radius: inherit !important;
  background: conic-gradient(
    from 0deg,
    rgba(218, 148, 12, .78) 0deg,
    rgba(218, 148, 12, .78) 42deg,
    #fff2a8 68deg,
    #ffc12e 98deg,
    #e99a0d 130deg,
    rgba(218, 148, 12, .78) 164deg,
    rgba(218, 148, 12, .78) 360deg
  ) !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: none !important;
  box-shadow: none !important;
  animation: goldenGlowRotate 1.9s linear infinite;
  pointer-events: none !important;
  transition: opacity 220ms ease;
}
.quiz .option::after {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  z-index: 1 !important;
  display: block !important;
  opacity: 0 !important;
  border-radius: 4px !important;
  background: #fffefb !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
  transition: opacity 220ms ease;
}
.quiz .option:hover {
  transform: scale(1.025) !important;
  border-color: rgba(224, 160, 27, .9) !important;
  box-shadow: 0 8px 14px rgba(94, 62, 6, .08) !important;
}
.quiz .option:hover::before,
.quiz .option:hover::after {
  opacity: 1 !important;
}
.quiz .option > * {
  position: relative !important;
  z-index: 2 !important;
}
.quiz .option.is-selected {
  border-color: #eee5d6 !important;
  background: #fffefb !important;
  box-shadow: none !important;
}

/* Continuous outline with moving highlight for final cards and Next */
.quiz .option {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid #eee5d6 !important;
  background: #fffefb !important;
  box-shadow: none !important;
}
.quiz .option::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: 0 !important;
  display: block !important;
  border-radius: inherit !important;
  background: conic-gradient(
    from 0deg,
    #d99513 0deg,
    #d99513 70deg,
    #ffdc65 98deg,
    #fff1ac 118deg,
    #ffbf2f 142deg,
    #d99513 178deg,
    #d99513 360deg
  ) !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: none !important;
  box-shadow: none !important;
  animation: goldenGlowRotate 2.2s linear infinite;
  pointer-events: none !important;
  transition: opacity 220ms ease;
}
.quiz .option::after {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  z-index: 1 !important;
  display: block !important;
  opacity: 0 !important;
  border-radius: 4px !important;
  background: #fffefb !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
  transition: opacity 220ms ease;
}
.quiz .option:hover {
  transform: scale(1.025) !important;
  border-color: #d99513 !important;
  box-shadow: 0 8px 14px rgba(94, 62, 6, .08) !important;
}
.quiz .option:hover::before,
.quiz .option:hover::after {
  opacity: 1 !important;
}
.quiz .option > * {
  position: relative !important;
  z-index: 2 !important;
}
.quiz .option.is-selected {
  border-color: #eee5d6 !important;
  background: #fffefb !important;
  box-shadow: none !important;
}

.quiz .next {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(203, 132, 0, .5) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 48%),
    linear-gradient(135deg, #fff0a8 0%, #ffd052 34%, #f2a51b 70%, #ffd76d 100%) !important;
  color: #201404 !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow:
    0 16px 26px rgba(104, 69, 8, .18),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -10px 18px rgba(145, 80, 0, .13) !important;
}
.quiz .next::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: 0 !important;
  display: block !important;
  border-radius: inherit !important;
  padding: 5px !important;
  background: conic-gradient(
    from 0deg,
    #d99513 0deg,
    #d99513 74deg,
    #ffe071 102deg,
    #fff3b8 122deg,
    #ffc13a 146deg,
    #d99513 182deg,
    #d99513 360deg
  ) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask-composite: exclude !important;
  filter: none !important;
  box-shadow: none !important;
  animation: goldenGlowRotate 2.2s linear infinite;
  pointer-events: none !important;
  transition: opacity 220ms ease;
}
.quiz .next::after {
  content: none !important;
  display: none !important;
}
.quiz .next:hover {
  transform: scale(1.035) !important;
  border-color: #d99513 !important;
  box-shadow:
    0 18px 30px rgba(104, 69, 8, .2),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -10px 18px rgba(145, 80, 0, .13) !important;
}
.quiz .next:hover::before {
  opacity: 1 !important;
}

/* Final simplified quiz hover and internal Next light */
.quiz .option {
  position: relative !important;
  isolation: auto !important;
  overflow: hidden !important;
  border: 1px solid #eee5d6 !important;
  background: #fffefb !important;
  box-shadow: none !important;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease !important;
}
.quiz .option::before,
.quiz .option::after,
.quiz .option:hover::before,
.quiz .option:hover::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}
.quiz .option:hover {
  transform: scale(1.035) !important;
  border: 3px solid #f0b72f !important;
  box-shadow: 0 14px 24px rgba(115, 76, 6, .1) !important;
}
.quiz .option.is-selected {
  border: 1px solid #eee5d6 !important;
  background: #fffefb !important;
  box-shadow: none !important;
}
.quiz .option > * {
  position: relative !important;
  z-index: 1 !important;
}

.quiz .next {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(199, 126, 0, .38) !important;
  border-radius: 12px !important;
  background: linear-gradient(100deg, #f3a618 0%, #ffd35f 48%, #f2a116 100%) !important;
  color: #201404 !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: 0 14px 24px rgba(104, 69, 8, .17), inset 0 -8px 15px rgba(145, 80, 0, .12) !important;
  transition: transform 300ms ease, box-shadow 300ms ease, filter 300ms ease !important;
}
.quiz .next::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  opacity: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(
    120deg,
    rgba(255, 197, 47, 0) 0%,
    rgba(255, 255, 255, .16) 22%,
    rgba(255, 229, 129, .68) 43%,
    rgba(255, 170, 20, .78) 58%,
    rgba(255, 197, 47, 0) 82%
  ) !important;
  background-size: 250% 250%;
  filter: none !important;
  box-shadow: none !important;
  animation: none;
  transition: opacity 260ms ease;
  pointer-events: none !important;
}
.quiz .next::after,
.quiz .next:hover::after {
  content: none !important;
  display: none !important;
}
.quiz .next:hover {
  transform: scale(1.04) !important;
  border-color: rgba(194, 118, 0, .44) !important;
  filter: saturate(1.06) brightness(1.02) !important;
  box-shadow: 0 16px 26px rgba(104, 69, 8, .2), inset 0 -8px 15px rgba(145, 80, 0, .12) !important;
}
.quiz .next:hover::before {
  opacity: 1 !important;
  animation: moveButtonLight 1.8s linear infinite !important;
}
@keyframes moveButtonLight {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Prevent quiz card hover layout shift */
.quiz .option,
.quiz .option:hover,
.quiz .option.is-selected {
  box-sizing: border-box !important;
  border: 1px solid #eee5d6 !important;
}
.quiz .option:hover {
  transform: scale(1.035) !important;
  outline: 3px solid #f0b72f;
  outline-offset: -3px;
  box-shadow: 0 14px 24px rgba(115, 76, 6, .1) !important;
}

/* ==========================================================================
   Hero CTA — final override block (do not merge into rules above)
   - Global CTA font-weight normalization (regular weight, no bold);
     hero button specifically set to 400
   - Every glow/halo/bloom removed from the hero button, default and hover
     (the legacy box-shadow/filter layers earlier in this file included
     wide symmetric-blur "halo" shadows — fully neutralized below)
   - Frosted-glass stroke stays the button's own static border, unchanged
   - On hover: an SVG rect traces the button's exact rounded-pill outline;
     the comet moves via stroke-dashoffset (constant speed along the real
     perimeter), not by rotating a conic-gradient around the center — a
     center-rotated gradient sweeps evenly in *angle*, which for a wide
     pill spends most of its arc on the flat top/bottom edges and almost
     none on the tight side corners, so it visually snaps/flashes through
     the corners instead of traveling evenly. stroke-dashoffset moves at a
     constant rate along actual arc length, so it's even everywhere.
   ========================================================================== */

/* --- 1. Global CTA typography: regular weight on every CTA button --- */
.btn,
.btn--hero,
.btn--gold,
.quiz .next,
.cta-strip .btn.btn--gold {
  font-weight: 500 !important;
}
/* Hero CTA specifically: regular (400), overriding the 500 above */
.btn--hero {
  font-weight: 400 !important;
}

/* --- 2. Remove every glow/halo from the hero CTA, default and hover.
   The base rule, the shared glow block, and the hover states earlier in
   this file all layer in wide symmetric box-shadows (e.g. "0 0 46px") and
   saturate/brightness filters — this is the halo the button must not
   have. Killing box-shadow/filter entirely, in both states, removes all
   of it while leaving size, padding, border-radius, and fill untouched. --- */
.btn--hero,
.btn--hero:hover {
  box-shadow: none !important;
  filter: none !important;
}

/* --- 3. Default state: the CTA's existing border stays a permanent,
   static, frosted-glass stroke. Same width, same radius, same position —
   only the color/appearance changes. This never animates and never glows. --- */
.btn--hero {
  border-color: rgba(255, 255, 255, .4) !important;
}

/* --- 4. The old conic-gradient pseudo-element is fully retired: it
   rotated around the button's center, which is the wrong motion for a
   wide pill (see note above). No pseudo-element is used for the comet
   anymore. --- */
.btn--hero::before {
  content: none !important;
  display: none !important;
}

/* --- 5. Text sits above everything (z-index 3). Needs `position` for
   z-index to apply; this is a plain inline span, layout is unaffected. --- */
.btn--hero__label {
  position: relative;
  z-index: 3;
}

/* --- 6. Hover-only moving light: a real SVG child of the button.
   x/y/width/height/rx are NOT guessed with percentages — script.js reads
   the button's actual rendered width/height via ResizeObserver and writes
   those exact numbers onto each rect (see initializeHeroCometPath), so
   the traced rounded-rect is always the CTA's real current box, never an
   independent/oversized shape. z-index 2 sits above the fill (::after,
   z-index -1, the base layer) and below the text (z-index 3). --- */
.btn--hero__comet {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* Two identical rects, same stroke, same gradient, same single shared
   animation — two continuous comets, permanently 180°/50-units apart.
   No head/mid/tail layering, no per-rect animation-delay (delays between
   otherwise-identical animations are avoided on principle here since any
   divergent timing property is a drift risk). Both rects use the exact
   same animation-name/duration/timing-function/iteration-count, so they
   are structurally incapable of drifting relative to each other. The only
   difference between them is a static stroke-dasharray: rect --b's dash
   pattern places its visible segment 50 pattern-units after rect --a's,
   which — since both share pathLength="100" and the same dashoffset
   keyframe — pins it at exactly the opposite point of the loop, always.
   The smooth transparent -> low -> medium -> soft-white (max .40 opacity)
   fade comes entirely from the <linearGradient> defined in index.html
   (#heroCometGradient) applied as the shared stroke paint. */
.btn--hero__comet-rect {
  fill: none;
  stroke: url(#heroCometGradient);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-width: 4px;
  opacity: 0;
  animation-name: cometTravel;
  animation-duration: 3.8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  transition: opacity 260ms ease;
}
/* Comet A: visible dash sits at pattern-position 0-23. */
.btn--hero__comet-rect--a {
  stroke-dasharray: 23 77;
}
/* Comet B: same 23-unit dash length, but preceded by a 50-unit gap, so its
   visible dash sits at pattern-position 50-73 — exactly opposite comet A —
   baked into the static geometry rather than into timing. */
.btn--hero__comet-rect--b {
  stroke-dasharray: 0 50 23 27;
}
.btn--hero:hover .btn--hero__comet-rect {
  opacity: 1;
  animation-play-state: running;
}
@keyframes cometTravel {
  to { stroke-dashoffset: -100; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--hero__comet-rect {
    animation: none !important;
  }
}

/* ==========================================================================
   "View All Solutions" CTA — animated stroke recolor only (gold → white)
   Scope is deliberately narrowed to `.cta-strip .btn.btn--gold::before`
   (3 classes + pseudo-element beats the shared `.btn--gold::before` group
   rule earlier in this file, so this wins on specificity even though both
   carry !important) so it touches ONLY the View All Solutions CTA — not
   the quiz "Next" button or any other .btn--gold instance.
   Nothing else about this button changes: same rotating conic-gradient
   (goldenGlowRotate, inherited/untouched), same animation-duration and
   linear timing (inherited/untouched), same blur/inset/thickness sizing
   (inherited/untouched), same hover trigger and the existing opacity/
   filter hover transition (both set elsewhere, untouched here) — only the
   gradient's own color stops move from gold/amber rgba values to soft
   translucent white. The brightest stop is capped at .40 alpha (scaled
   down proportionally from the previous peak of .66 so the same fade
   rhythm/shape is preserved — transparent, low white, medium white, then
   the .40 peak — just recolored and dimmed, never opaque). --- */
.cta-strip .btn.btn--gold::before {
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, .05) 0deg,
    rgba(255, 255, 255, .35) 58deg,
    rgba(255, 255, 255, .40) 116deg,
    rgba(255, 255, 255, .13) 178deg,
    rgba(255, 255, 255, .05) 248deg,
    rgba(255, 255, 255, .30) 318deg,
    rgba(255, 255, 255, .05) 360deg
  ) !important;
}

/* ==========================================================================
   Typography consistency — final override block (do not merge into rules
   above). This file has many overlapping legacy typography declarations
   across several earlier rounds of edits, so — matching the same pattern
   already used for the Hero CTA and gold-recolor blocks above — this
   section wins purely by being !important and last in source order,
   rather than by editing every scattered mid-file rule individually.

   Scope:
   1. Every CTA button/link gets the Hero CTA's exact text styling
      (family, size, weight, line-height, letter-spacing) via shared
      variables — one CTA typography rule reused everywhere.
   2. Every remaining font-weight: 800/900 (and stray 700) on headings,
      card titles, and labels drops to a medium/semibold weight — heavy
      enough to still read as a heading, never blocky.
   3. Eyebrows/small labels consolidate to one consistent medium weight.
   Layout, card/button dimensions, padding, colors, spacing, animations,
   and responsive structure are untouched — only font-family/size/weight/
   line-height/letter-spacing on text itself change, and only where a
   rule below actually names a property. --- */
:root {
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --cta-font-family: var(--font);
  --cta-font-size: 16px;
  --cta-font-weight: var(--font-weight-regular);
  --cta-letter-spacing: .01em;
  --cta-line-height: normal;
}

/* --- 1. CTA text: every full CTA button matches the Hero CTA's exact
   type. Shape, size, background, border-radius, animation, color and
   padding are untouched — only the text styling changes. Each rule
   targets the most specific selector already used for that button's
   sizing, so it wins over the legacy per-button font-size declarations
   (13px/18px/20px) without touching any non-text property. --- */
.btn--hero,
.cta-strip .btn.btn--gold,
.quiz .next {
  font-family: var(--cta-font-family) !important;
  font-size: var(--cta-font-size) !important;
  font-weight: var(--cta-font-weight) !important;
  line-height: var(--cta-line-height) !important;
  letter-spacing: var(--cta-letter-spacing) !important;
}
/* Card and footer text links act as secondary CTAs. Their own (smaller)
   font size is kept — forcing the full 16px CTA size onto an inline link
   inside a compact card or footer row would risk text wrapping, which is
   explicitly out of scope — but weight, family, line-height and letter-
   spacing are unified with the Hero CTA so every clickable action reads
   the same way. */
.mini-card a,
.panel-footer a {
  font-family: var(--cta-font-family) !important;
  font-weight: var(--cta-font-weight) !important;
  line-height: var(--cta-line-height) !important;
  letter-spacing: var(--cta-letter-spacing) !important;
}

/* --- 2. Large section headings: medium weight (500). Sizes, line-heights
   and letter-spacing already set elsewhere are untouched. --- */
.section-title h2,
.solutions .section-title h2,
.divider-title h2,
.story__content h2,
.quiz h2 {
  font-weight: var(--font-weight-medium) !important;
}

/* --- 3. Card and content headings: semibold (600) — enough presence to
   read as a heading without the extra-bold/blocky look. --- */
.feature-card h3,
.mini-card h3,
.story .result-grid h3,
.expert-card strong,
.expert-card.center strong {
  font-weight: var(--font-weight-semibold) !important;
}
/* Card titles only ("Financing & Lending Solutions" / "Explore More
   Solutions" sections): a slightly more open letter-spacing so the
   compressed-looking letterforms read as more refined. Subtle — well
   short of "widely spaced" — and font-size/line-height/card dimensions
   are untouched. Intentionally excludes section headings, body copy,
   and other card/content headings (.result-grid h3, .expert-card strong)
   so only these two title selectors are affected. */
.feature-card h3,
.mini-card h3 {
  letter-spacing: .02em !important;
}

/* --- 4. Eyebrows and small labels: medium weight (500), never 700+.
   Uppercase/tracking already set elsewhere is untouched. --- */
.section-title p,
.eyebrow,
.story .eyebrow,
.quiz__intro .eyebrow,
.feature-card .label,
.panel-footer {
  font-weight: var(--font-weight-medium) !important;
}

/* --- 5. Stepper step numbers: medium by default, semibold only for the
   active/completed/hovered state — keeps the existing step-progress
   hierarchy (the current step still reads as emphasized) without the
   700-900 weight. --- */
.stepper span,
.story .stepper span,
.quiz .stepper span {
  font-weight: var(--font-weight-medium) !important;
}
.stepper li.active span,
.stepper li.completed span,
.stepper li.hovered span,
.story .stepper li.active span,
.story .stepper li.completed span,
.story .stepper li.hovered span,
.quiz .stepper li.active span,
.quiz .stepper li.completed span,
.quiz .stepper li.hovered span {
  font-weight: var(--font-weight-semibold) !important;
}

/* --- 6. Tabs: inactive tabs keep their existing (regular) weight; the
   active tab drops from 800 to semibold (600) — still clearly the
   selected tab, no longer chunky. --- */
.tab.is-active {
  font-weight: var(--font-weight-semibold) !important;
}

/* ==========================================================================
   "Next" CTA — full parity with Hero's actual current implementation
   (single source of truth), adapted only to Next's own rectangular
   geometry (do not merge into rules above; supersedes the prior
   static-fill / single-measured-beam block, which under-matched Hero on
   the fill/hover/::after layer and over-diverged on the beam).

   WIDTH/POSITION: unchanged — Next is the option-grid's own 6th grid
   item at column 4 / span 2, so its width is always exactly cards 4+5
   plus their gap. Height/border-radius/padding stay Next's own compact
   values (this button is a rounded rectangle, not Hero's pill — only the
   effects below are shared, never the shape).

   FILL: the exact same gradient Hero uses (line 88 of this file:
   linear-gradient(135deg, #fff0a8 0%, #ffc746 38%, #f3a61a 72%, #ffd568
   100%)), plus the same ::after inset-highlight layer Hero's final
   implementation still uses (Hero's own ::before is disabled by its
   final override block further up, but ::after is not — it's the
   two-layer white-sheen-over-gold-gradient highlight, still active on
   Hero today). border-radius: inherit on that layer means it
   automatically follows whatever Next's own radius is, with no
   geometry-specific math needed. Hero's own hover transform/filter/
   box-shadow is reproduced identically too, since "exact same fill and
   hover behavior" was explicit.

   BORDER BEAM: driven by initializeCometButtons() in script.js — the
   literal same function Hero uses (see initCometButtonsAll()), not a
   copy, not a second engine. Same two rects, same pathLength="100"
   technique, same 4px stroke-width, same 23-unit dash length, same
   50-unit (180°) permanent offset between the two, same 3.8s linear
   animation, same #nextCometGradient fade (identical stop values to
   Hero's #heroCometGradient). The only thing that differs is which real
   box the shared JS measures — Next's own rounded-rectangle
   width/height/radius instead of Hero's pill.

   LAYERING: fill (::after, z-index -1) → static border → beam SVG
   (z-index 2) → label text (z-index 3), matching Hero's own stacking
   exactly. --- */
.quiz .option-grid > .next {
  grid-column: 4 / span 2 !important;
  grid-row: 2 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 32px 0 0 !important;
  height: 42px !important;
  padding: 0 20px !important;
  gap: 6px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}
@media (max-width: 760px) {
  .quiz .option-grid > .next {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    margin: 20px 0 0 !important;
  }
}

/* ::before stays fully retired, matching Hero's own final state (Hero's
   ::before — the old conic sweep — is disabled by Hero's final override
   block too). Every old Next-specific shimmer/conic/golden-glow round
   that used to paint through ::before is neutralized here. */
.quiz .next::before,
.quiz .next:hover::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* Fill: Hero's exact gradient, static — no size/position animation, no
   hover-triggered background change (only the transform/filter/box-shadow
   below change on hover, exactly like Hero). */
.quiz .next {
  background: linear-gradient(135deg, #fff0a8 0%, #ffc746 38%, #f3a61a 72%, #ffd568 100%) !important;
  background-size: auto !important;
  background-position: 0 0 !important;
}
/* Hero's own ::after highlight layer, reproduced identically: a soft
   white sheen over a second gold gradient, inset 3px, radius inherited
   from whatever Next's own border-radius is. */
.quiz .next::after,
.quiz .next:hover::after,
.quiz .next:focus-visible::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 3px !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24), transparent 45%),
    linear-gradient(135deg, #ffd966, #f4ad20 58%, #ffcb4f) !important;
  box-shadow: inset 0 0 18px rgba(255, 247, 199, .38) !important;
  opacity: 1 !important;
  animation: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}
/* Hover: Hero's exact scale/filter/glow. */
.quiz .next:hover {
  transform: scale(1.045) !important;
  filter: saturate(1.08) brightness(1.03) !important;
  box-shadow:
    0 22px 42px rgba(181, 104, 0, .45),
    0 0 46px rgba(255, 207, 69, .5),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -10px 18px rgba(174, 96, 0, .16) !important;
}

/* Label promoted above the beam explicitly — higher specificity/weight
   than the older blanket ".quiz .next > *" z-index:2 rule further up —
   so the text always reads above the beam, matching Hero's own
   `.btn--hero__label` treatment. */
.quiz .next > .next__label {
  position: relative !important;
  z-index: 3 !important;
}

/* Border beam — Hero's exact CSS values, reused verbatim, just scoped to
   Next's own elements. Driven by the same initializeCometButtons() JS
   Hero uses (see initCometButtonsAll() in script.js) — one beam engine,
   not two. */
.quiz .next .next__comet {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.next__comet-rect {
  fill: none;
  stroke: url(#nextCometGradient);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-width: 4px;
  opacity: 0;
  animation-name: cometTravel;
  animation-duration: 3.8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  transition: opacity 260ms ease;
}
.next__comet-rect--a {
  stroke-dasharray: 23 77;
}
.next__comet-rect--b {
  stroke-dasharray: 0 50 23 27;
}
.quiz .next:hover .next__comet-rect,
.quiz .next:focus-visible .next__comet-rect {
  opacity: 1;
  animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
  .next__comet-rect {
    animation: none !important;
  }
}

/* ==========================================================================
   Expert carousel — pagination dots (replaces the prev/next arrow buttons)
   Five tiny, subtle dots: hollow/low-opacity when inactive, filled solid
   gold for whichever expert is currently centered. script.js keeps
   .is-active in sync with the existing autoplay/circular-offset logic, and
   clicking a dot jumps straight to that expert. Card sizes, movement,
   timing, images, and the active-card styling are untouched — only the
   old .carousel-controls arrows are replaced. --- */
.carousel-dots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.carousel-dot {
  position: relative;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 1px solid rgba(184, 122, 0, .45);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
/* The visible dot stays 6px (unchanged look), but a transparent, larger
   hit-area sits behind it so the actual tap target meets a reasonable
   minimum on phones -- these are the only control for switching experts
   on mobile, and 6px alone is far too small to reliably tap. */
.carousel-dot::before {
  content: '';
  position: absolute;
  inset: -17px;
}
.carousel-dot:hover {
  border-color: rgba(184, 122, 0, .85);
}
.carousel-dot.is-active {
  border-color: var(--gold-2);
  background: var(--gold-2);
  transform: scale(1.15);
}

/* ==========================================================================
   Trust-info rows (story section + final questionnaire section): reduce
   from 600 to 500 — regular/clean, not bold. Font family, size, line-
   height, icon placement (the ::first-letter symbol), spacing, and text
   color are untouched; only the text weight changes. --- */
.story .story-bottom-row > .trust-row,
.quiz .trust-row--inline {
  font-weight: var(--font-weight-medium, 500) !important;
}

/* ==========================================================================
   Quiz option cards — yellow/gold tracing beam on hover (final questionnaire
   section: Home Purchase, Refinance, Commercial Property, Business / SBA,
   Bridge / Hard Money).

   This replaces an earlier attempt that used a single stroke with
   `pathLength="100"` + percentage-style stroke-dasharray on a plain <rect>.
   That relies on the SVG2 `pathLength` attribute being honored on basic
   shapes (not just <path>), which is not reliably supported across
   browsers — when it's ignored, the dasharray/dashoffset values (meant as
   percentages of a normalized 100-unit path) get read as literal small
   pixel units against the card's much larger real perimeter, so the
   comet only ever crawls through a tiny fraction of the path near its
   start point (the top edge/right side) instead of orbiting the whole
   card. This version, adapted directly from the uploaded comet-button.html
   reference, avoids `pathLength` entirely: script.js computes the real
   perimeter in actual pixels from each card's measured geometry and
   builds ~30 short overlapping <rect> segments (a `.option-comet-seg`
   each) whose stroke-dasharray/--from/--to are set in those same real
   units, so the shared stroke-dashoffset keyframe genuinely traces one
   full loop of the card's real rounded-rectangle border.

   Card dimensions, background, border-radius, icon, text, padding,
   layout, and selected-state styling are untouched; `.quiz .option > *`
   already sets position:relative and z-index:1 on every direct child
   (icon, span, and now this svg), so the rule below only raises the svg
   specifically above that, at z-index 2, without touching the icon/text
   layer. --- */
.quiz .option .option__comet {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* Comet trail: a chain of short arcs whose opacity fades from head to
   tail (set per-segment via --op by script.js) — no separate visible
   lines/gaps, just one continuous-looking streak. Paused and invisible
   by default; the static CSS border underneath never changes. */
.option-comet-seg {
  fill: none;
  stroke: #f2bd38;
  stroke-width: 3px;
  stroke-linecap: round;
  opacity: 0;
  animation-name: optionCometMove;
  animation-duration: 3.6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.quiz .option:hover .option-comet-seg,
.quiz .option:focus-visible .option-comet-seg {
  opacity: var(--op);
  animation-play-state: running;
}
@keyframes optionCometMove {
  from { stroke-dashoffset: var(--from); }
  to   { stroke-dashoffset: var(--to); }
}
@media (prefers-reduced-motion: reduce) {
  .option-comet-seg {
    animation: none !important;
  }
}

/* ==========================================================================
   Quiz option cards — remove the yellow hover outline ring (do not merge
   into rules above).

   The card's actual `border` property already correctly stays neutral on
   hover (a later "Prevent quiz card hover layout shift" rule sets
   `border: 1px solid #eee5d6 !important` for both the default and :hover
   states). The visual bug was a *separate* layer: an
   `outline: 3px solid #f0b72f; outline-offset: -3px;` on `.quiz
   .option:hover`, which — because outline is drawn independently of
   border and the negative offset pulls it inward — reads as the entire
   card border turning solid yellow, even though the border itself never
   changed. Removing just the outline here leaves the neutral border,
   the transform, the existing box-shadow, and the working comet beam
   (a separate SVG layer) completely untouched. --- */
.quiz .option:hover {
  outline: none !important;
}

/* ==========================================================================
   Hero — the exact-100vh treatment tried here previously is retired again:
   a fixed 640x640 video panel that must stay flush to the hero's top,
   right, AND bottom edges simultaneously only works if the hero's own
   height is pinned to match (min-height:640px, set on .hero near the top
   of this file) -- a variable viewport-derived height would leave a gap
   at the bottom on any screen taller than 640px+padding, breaking the
   "flush on three sides" request. --hero-vh-offset is still computed by
   script.js but nothing here reads it now; harmless dead weight. ===== */

/* ============================================================
   SITE HEADER + FOOTER — FROSTED GLASS
   Translucent cream/gold "glass" panels (backdrop-filter blur) that
   match the page's own light theme, instead of a solid dark-navy
   frame. Header stays sticky so the blur has scrolling content behind
   it to actually frost; footer gets the same glass treatment against
   the page's own gradient background.
   ============================================================ */
:root {
  /* Gold-tinted glass — same softened, muted yellow as the page-shell
     frame (linear-gradient #f8d67e → #fdf1d2 → #f6cc66), just translucent
     + blurred instead of solid. Toned down from the earlier, more
     saturated gold per request — the original read as too loud/garish. */
  --glass-bg: rgba(248, 214, 126, .5);
  --glass-bg-strong: rgba(246, 204, 102, .85);
  --glass-border: rgba(184, 140, 60, .32);
  --glass-blur: blur(20px) saturate(160%);
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  width: 100%;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px rgba(166, 111, 8, .08);
}
.site-header__inner {
  position: relative;
  max-width: 1460px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.brand__mark svg { width: 30px; height: 30px; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
}
.brand__name b { color: var(--gold-2); font-weight: 900; }
.brand__tagline {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-nav { flex: 1 1 auto; }
.site-nav > ul {
  /* justify-content:center only centers within .site-nav's own flex slot,
     which isn't symmetric now that there's no brand/logo on the left to
     balance the search+Consultation actions on the right — so the group
     drifted off the header's true midpoint. Positioning the ul absolutely
     against .site-header__inner (left:50% + translateX(-50%)) centers it
     on the real center of the whole header instead, regardless of what
     either sibling weighs. .site-nav itself stays flex:1 1 auto so it
     still reserves the space that keeps the actions pushed to the right. */
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.site-nav__link:hover,
.has-dropdown:hover .site-nav__link { color: var(--gold-2); }
.site-nav__link .chev { width: 9px; height: 6px; }
.site-nav__link .chev path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 210px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(166, 111, 8, .18);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown li a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 13.5px;
}
.dropdown li a:hover { background: var(--gold-soft); color: var(--gold-2); }

.site-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-header__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.site-header__phone svg { width: 16px; height: 16px; fill: var(--gold-2); flex: none; }
.site-header__phone b { display: block; font-size: 13.5px; font-weight: 700; }
.site-header__phone small { display: block; font-size: 10px; color: var(--muted); font-weight: 400; }
.btn--header { min-width: 0; padding: 0 20px; gap: 8px; }
.btn--header svg { width: 14px; height: 14px; }

.site-header__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  color: var(--ink);
  cursor: pointer;
}
.site-header__search svg { width: 17px; height: 17px; }
.site-header__search:hover { background: rgba(255, 255, 255, .55); }

.site-header__burger {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .35);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.site-header__burger span { width: 18px; height: 2px; border-radius: 2px; background: var(--ink); display: block; }

.site-nav--mobile {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 20px 24px 26px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
}
.site-nav--mobile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.site-nav--mobile a { color: var(--ink); font-size: 15px; font-weight: 600; }
.site-nav--mobile .site-header__phone { color: var(--ink); }
.site-nav--mobile.is-open { display: flex; }

@media (max-width: 1080px) {
  .site-nav, .site-header__phone, .site-header__search { display: none; }
  .site-header__burger { display: flex; }
  .site-header__actions { gap: 12px; }
  /* `.site-header__inner` is a plain flex row (`justify-content` left at
     its default, flex-start) because normally `.site-nav` (flex:1 1 auto)
     fills the middle and pushes everything after it to the right. Once
     .site-nav is hidden here, that spacer disappears too, so the
     remaining items (Consultation button + burger) collapse to the far
     left instead of staying pinned to the right edge -- exactly the
     mismatch with services.html, whose header uses a 3-column grid
     (site-header.css) where the right-hand column stays right-aligned
     regardless of what's hidden in the middle. Cheapest fix here that
     doesn't require restructuring home's header to match: just push the
     remaining flex items to the end. */
  .site-header__inner { justify-content: flex-end; }
}
@media (max-width: 560px) {
  .site-header__inner { padding: 12px 16px; gap: 12px; }
  .brand__tagline { display: none; }
  .btn--header { padding: 0 14px; font-size: 12px; }
}

/* ---- Footer ---- */
.site-footer {
  width: 100%;
  /* The header's gold-tinted glass reads fine because the hero/page
     content scrolls underneath it. The footer has no scrolling content
     behind it — a gold-on-gold glass tint there just looked like flat
     paint. A whiter, frosted-pane tint (rather than color-matched to the
     background) is what actually reads as "glass sitting on top of the
     yellow" instead of blending into it. */
  background: rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  color: var(--ink);
  font-family: var(--font);
}
.site-footer__top {
  max-width: 1460px;
  margin: 0 auto;
  padding: 56px 32px 40px;
  display: grid;
  grid-template-columns: 1.5fr repeat(5, 1fr);
  gap: 32px;
}
.site-footer .brand__name,
.site-footer .brand__tagline { color: inherit; }
.site-footer .brand__tagline { color: var(--muted); }
.site-footer__blurb {
  margin: 16px 0 18px;
  max-width: 260px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.site-footer__socials { display: flex; gap: 10px; }
.site-footer__socials a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--glass-border);
  color: var(--ink);
}
.site-footer__socials a:hover { background: var(--gold-2); border-color: var(--gold-2); color: #382814; }
.site-footer__socials svg { width: 16px; height: 16px; fill: currentColor; }

.site-footer__head {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.site-footer__col nav { display: grid; gap: 11px; }
.site-footer__col nav a,
.site-footer__col--contact p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.site-footer__col nav a:hover { color: var(--gold-2); }
.site-footer__col--contact p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
}
.site-footer__col--contact svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
  fill: var(--gold-2);
}

.site-footer__bottom {
  max-width: 1460px;
  margin: 0 auto;
  padding: 18px 32px 26px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer__bottom p { margin: 0; font-size: 12px; color: var(--muted); }
.site-footer__housing {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.site-footer__housing svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); }

@media (max-width: 1080px) {
  .site-footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; padding: 44px 20px 30px; gap: 28px; }
  .site-footer__bottom { padding: 16px 20px 22px; justify-content: center; text-align: center; }
}

/* ==========================================================================
   Hero CTA: match services.html's own hero CTA look
   (.page-intro .actions .button in wireframe.css) -- the full glowing
   gold pill with a rotating conic-gradient halo and gold border. An
   earlier round on this same button explicitly stripped all glow/halo
   (see the "Remove every glow/halo from the hero CTA" block above, still
   present and unchanged for anything else that might reuse it) -- rather
   than edit that block, this scopes as `.hero .btn--hero` (an extra
   ancestor class, `.btn--hero` is only ever used in the hero, so nothing
   else is affected) to outrank it on specificity and restore exactly the
   values the base `.btn--hero` rule already had before that override,
   which are themselves identical to services.html's button. --- */
.hero .btn--hero {
  border-color: rgba(255, 239, 172, .72) !important;
  font-weight: 900 !important;
  box-shadow:
    0 18px 34px rgba(181, 104, 0, .36),
    0 0 34px rgba(255, 197, 55, .32),
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -10px 18px rgba(174, 96, 0, .18) !important;
}
.hero .btn--hero::before {
  content: "" !important;
  display: block !important;
}
.hero .btn--hero:hover {
  filter: saturate(1.08) brightness(1.03) !important;
  box-shadow:
    0 22px 42px rgba(181, 104, 0, .45),
    0 0 46px rgba(255, 207, 69, .5),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -10px 18px rgba(174, 96, 0, .16) !important;
}

/* Home hero black title override */
.hero__title{color:#070604 !important}


/* Home white page background override */
body, .page-shell{background:#fff !important;}


/* Home services soft yellow gradient override */
.solutions,
.explore{
  background:
    radial-gradient(circle at 0% 28%, rgba(255,255,255,.46) 0 2px, transparent 210px),
    radial-gradient(circle at 100% 28%, rgba(255,255,255,.46) 0 2px, transparent 210px),
    linear-gradient(180deg, #f8e3a8 0%, #fae9bd 34%, #fff7df 76%, #fffdf5 100%) !important;
}


/* Continuous services/explore background */
.services-home-band{
  background:
    radial-gradient(circle at 0% 18%, rgba(255,255,255,.46) 0 2px, transparent 260px),
    radial-gradient(circle at 100% 18%, rgba(255,255,255,.46) 0 2px, transparent 260px),
    linear-gradient(180deg, #f8e3a8 0%, #fae9bd 28%, #fff7df 72%, #fffdf5 100%) !important;
}
.services-home-band .solutions,
.services-home-band .explore{background:transparent !important;}


/* Whole More Solutions card cursor */
.mini-card[data-href]{cursor:pointer}
.mini-card[data-href]:focus-visible{outline:3px solid rgba(255,195,41,.45);outline-offset:4px}


/* Clean white service band with subtle booking-style pattern */
.services-home-band{
  position: relative;
  overflow: hidden;
  background: #fff !important;
  isolation: isolate;
}
.services-home-band::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  background:
    radial-gradient(900px 300px at -8% 12%, rgba(248, 227, 168, .34), transparent 64%),
    radial-gradient(760px 260px at 108% 18%, rgba(248, 227, 168, .28), transparent 62%),
    radial-gradient(560px 190px at 50% 98%, rgba(248, 227, 168, .18), transparent 70%),
    repeating-linear-gradient(135deg, rgba(232, 168, 26, .045) 0 1px, transparent 1px 30px);
}
.services-home-band::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .34;
  background:
    radial-gradient(closest-side at 12% 28%, transparent 72%, rgba(248, 227, 168, .28) 73%, transparent 75%),
    radial-gradient(closest-side at 88% 31%, transparent 72%, rgba(248, 227, 168, .22) 73%, transparent 75%);
  background-size: 520px 520px, 580px 580px;
  background-repeat: no-repeat;
}
.services-home-band .solutions,
.services-home-band .explore{
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* Remove home service card shadows */
.solutions .feature-card,
.solutions .feature-card:hover,
.services-home-band .feature-card,
.services-home-band .feature-card:hover{
  box-shadow: none !important;
}

/* Black header and footer override */
.site-header,
.site-nav--mobile,
.site-footer{
  background: #050505 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.site-header::before,
.site-header::after,
.site-footer::before,
.site-footer::after{
  display: none !important;
}
.site-header .site-nav__link,
.site-header .site-header__phone,
.site-header .site-header__phone b,
.site-nav--mobile a,
.site-nav--mobile .site-header__phone,
.site-footer,
.site-footer a,
.site-footer p,
.site-footer .brand__name,
.site-footer .site-footer__head{
  color: #fff !important;
}
.site-header .site-header__phone small,
.site-footer .brand__tagline,
.site-footer__blurb,
.site-footer__col nav a,
.site-footer__col--contact p,
.site-footer__bottom p,
.site-footer__housing{
  color: rgba(255,255,255,.68) !important;
}
.site-header__search,
.site-header__burger{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
.site-header__burger span{
  background: #fff !important;
}
.site-header__search svg,
.site-footer svg{
  color: currentColor;
}
.site-footer__bottom{
  border-top-color: rgba(255,255,255,.14) !important;
}
.site-footer__socials a{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* Remove shadows from the last two large home section cards */
.story.panel-card,
.quiz.panel-card{
  box-shadow: none !important;
}

/* Desktop hero should fill the visible screen under the header */
@media (min-width: 761px){
  .page-shell{
    padding: 0 !important;
    background: #fff !important;
  }
  .hero{
    width: 100vw !important;
    height: calc(100vh - var(--hero-vh-offset, 114px)) !important;
    min-height: calc(100vh - var(--hero-vh-offset, 114px)) !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
  .hero__content{
    min-height: 100% !important;
    height: 100% !important;
  }
  .hero__media{
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    width: min(46vw, 880px) !important;
    margin: 0 !important;
  }
}

/* Match home existing large frames to services cards */
.story.panel-card,
.quiz.panel-card{
  background: #fffdf8 !important;
  border: 1px solid rgba(241, 213, 128, .85) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

/* Align yellow CTA strip with More Solutions card grid */
.explore .cta-strip{
  width: 100% !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Softer home hero interactive gradient colors */
.hero__gradient-blob--1{
  background: radial-gradient(circle at center, rgba(255, 236, 174, .82) 0, rgba(255, 236, 174, 0) 62%) !important;
}
.hero__gradient-blob--2{
  background: radial-gradient(circle at center, rgba(255, 248, 220, .70) 0, rgba(255, 248, 220, 0) 64%) !important;
}
.hero__gradient-blob--3{
  background: radial-gradient(circle at center, rgba(255, 255, 246, .76) 0, rgba(255, 255, 246, 0) 64%) !important;
}
.hero__gradient-blob--4{
  background: radial-gradient(circle at center, rgba(248, 227, 168, .62) 0, rgba(248, 227, 168, 0) 62%) !important;
}
.hero__gradient-blob--pointer{
  background: radial-gradient(circle at center, rgba(255, 232, 158, .58) 0, rgba(255, 232, 158, 0) 62%) !important;
}

/* Reduce home hero gradient footprint so motion is visible */
.hero__gradient-blob{
  width: 54% !important;
  height: 54% !important;
  top: 22% !important;
  left: -3% !important;
}
.hero__gradient-blob--1{
  background: radial-gradient(circle at center, rgba(255, 236, 174, .72) 0 18%, rgba(255, 236, 174, 0) 48%) !important;
}
.hero__gradient-blob--2{
  width: 46% !important;
  height: 46% !important;
  background: radial-gradient(circle at center, rgba(255, 248, 220, .60) 0 16%, rgba(255, 248, 220, 0) 48%) !important;
}
.hero__gradient-blob--3{
  width: 58% !important;
  height: 58% !important;
  top: 18% !important;
  left: -8% !important;
  background: radial-gradient(circle at center, rgba(255, 255, 246, .62) 0 18%, rgba(255, 255, 246, 0) 50%) !important;
}
.hero__gradient-blob--4{
  width: 48% !important;
  height: 48% !important;
  background: radial-gradient(circle at center, rgba(248, 227, 168, .52) 0 17%, rgba(248, 227, 168, 0) 48%) !important;
}
.hero__gradient-blob--pointer{
  width: 34% !important;
  height: 34% !important;
  top: var(--my, 40%) !important;
  left: var(--mx, 30%) !important;
  background: radial-gradient(circle at center, rgba(255, 232, 158, .50) 0 16%, rgba(255, 232, 158, 0) 48%) !important;
}

/* Interactive hero title treatment */
.hero-title-motion{
  max-width: min(760px, 92%) !important;
  display: grid;
  gap: clamp(4px, .75vw, 10px);
  color: #070604 !important;
  text-shadow: none !important;
  perspective: 900px;
}
.hero-title__line{
  display: block;
  color: #070604;
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.055em;
  transform: translate3d(calc(var(--px, 0px) * .08), calc(var(--py, 0px) * .08), 0);
  transition: transform .18s ease, filter .18s ease;
  will-change: transform;
}
.hero-title__line--small{
  font-size: clamp(42px, 5.6vw, 92px);
}
.hero-title__line--accent{
  font-size: clamp(56px, 7.2vw, 126px);
  color: transparent;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 40%), rgba(255,255,246,.98) 0 9%, rgba(255,236,169,.95) 18%, rgba(246,183,42,.98) 46%, rgba(211,139,10,.96) 78%),
    linear-gradient(135deg, #ffe8a7, #f6b82d 52%, #d69010);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 12px 22px rgba(111, 71, 6, .18));
  transform: translate3d(calc(var(--px, 0px) * -.12), calc(var(--py, 0px) * -.10), 0) scale(1.015);
}
.hero:hover .hero-title__line--small{
  transform: translate3d(calc(var(--px, 0px) * .12), calc(var(--py, 0px) * .10), 0);
}
.hero:hover .hero-title__line--accent{
  transform: translate3d(calc(var(--px, 0px) * -.18), calc(var(--py, 0px) * -.14), 0) scale(1.025);
  filter: drop-shadow(0 16px 28px rgba(111, 71, 6, .24));
}
@media (max-width: 760px){
  .hero-title-motion{
    max-width: 100% !important;
    gap: 6px;
  }
  .hero-title__line--small{
    font-size: clamp(34px, 10vw, 58px);
  }
  .hero-title__line--accent{
    font-size: clamp(42px, 12vw, 70px);
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-title__line,
  .hero:hover .hero-title__line,
  .hero:hover .hero-title__line--accent{
    transform: none !important;
    transition: none !important;
  }
}

/* Magic UI inspired Kinetic Text for home hero title */
.hero-title-motion{
  max-width: min(860px, 94%) !important;
  gap: clamp(2px, .45vw, 8px) !important;
  cursor: default;
}
.hero-title-motion .hero-title__line{
  transform: none !important;
  transition: none !important;
  line-height: .9 !important;
  letter-spacing: -.06em !important;
  white-space: nowrap;
}
.hero-title-motion .hero-title__line--small{
  font-size: clamp(42px, 5.45vw, 94px) !important;
}
.hero-title-motion .hero-title__line--accent{
  font-size: clamp(58px, 7.35vw, 132px) !important;
  color: #f2b51c !important;
  background: none !important;
  filter: none !important;
  transform: none !important;
}
.hero-title-motion .kinetic-char{
  --kw: 760;
  --klift: 0;
  --ksy: 1;
  display: inline-block;
  color: inherit;
  font-weight: var(--kw);
  font-variation-settings: "wght" var(--kw);
  transform: translateY(calc(var(--klift) * -1px)) scaleY(var(--ksy));
  transform-origin: 50% 70%;
  transition: font-weight 260ms cubic-bezier(.22, 1, .36, 1), font-variation-settings 260ms cubic-bezier(.22, 1, .36, 1), transform 260ms cubic-bezier(.22, 1, .36, 1), color 260ms ease;
  will-change: transform, font-variation-settings;
}
.hero-title-motion .hero-title__line--accent .kinetic-char{
  color: transparent;
  background: linear-gradient(180deg, #ffe7a5 0%, #f5bd34 46%, #d8940d 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-title-motion .kinetic-space{
  width: .28em;
}
.hero-title-motion:hover .hero-title__line--accent .kinetic-char{
  filter: drop-shadow(0 10px 18px rgba(137, 88, 8, .16));
}
@media (max-width: 760px){
  .hero-title-motion .hero-title__line{
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-title-motion .kinetic-char{
    --kw: 800 !important;
    --klift: 0 !important;
    --ksy: 1 !important;
    transition: none !important;
  }
}

/* Home hero title alignment/color refinement */
.hero-title-motion{
  justify-items: start !important;
  text-align: left !important;
  max-width: min(660px, 92%) !important;
}
.hero-title-motion .hero-title__line{
  text-align: left !important;
  white-space: nowrap !important;
}
.hero-title-motion .hero-title__line--small{
  color: #ffffff !important;
  font-size: clamp(34px, 4.45vw, 74px) !important;
}
.hero-title-motion .hero-title__line--accent{
  font-size: clamp(44px, 5.55vw, 96px) !important;
}
.hero-title-motion .hero-title__line--small .kinetic-char{
  color: #ffffff !important;
}
@media (max-width: 760px){
  .hero-title-motion{
    max-width: 100% !important;
  }
  .hero-title-motion .hero-title__line{
    white-space: nowrap !important;
  }
  .hero-title-motion .hero-title__line--small{
    font-size: clamp(30px, 9vw, 48px) !important;
  }
  .hero-title-motion .hero-title__line--accent{
    font-size: clamp(36px, 10.5vw, 58px) !important;
  }
}

/* Kinetic title tuning: neutral by default, bold only near hovered letter */
.hero-title-motion .hero-title__line{
  letter-spacing: .005em !important;
  font-weight: 520 !important;
}
.hero-title-motion .kinetic-char{
  --kw: 520;
  font-weight: var(--kw) !important;
  font-variation-settings: "wght" var(--kw) !important;
  margin-right: .015em;
}
.hero-title-motion .kinetic-space{
  width: .34em !important;
  margin-right: 0;
}
.hero-title-motion:hover .hero-title__line--accent .kinetic-char{
  filter: none !important;
}

/* Kinetic title refinement: stronger/faster hover, tighter fit */
.hero-title-motion{
  max-width: min(610px, 88%) !important;
}
.hero-title-motion .hero-title__line{
  letter-spacing: -.015em !important;
  font-weight: 430 !important;
  line-height: .94 !important;
}
.hero-title-motion .hero-title__line--small{
  font-size: clamp(30px, 3.95vw, 64px) !important;
}
.hero-title-motion .hero-title__line--accent{
  font-size: clamp(38px, 4.85vw, 82px) !important;
}
.hero-title-motion .kinetic-char{
  --kw: 430;
  margin-right: 0;
  transition: font-weight 105ms ease-out, font-variation-settings 105ms ease-out, transform 105ms ease-out, color 105ms ease-out !important;
}
.hero-title-motion .kinetic-space{
  width: .26em !important;
}
@media (min-width: 761px){
  .hero__content{
    max-width: min(47vw, 680px) !important;
    z-index: 3;
  }
}
@media (max-width: 760px){
  .hero-title-motion{
    max-width: 100% !important;
  }
  .hero-title-motion .hero-title__line--small{
    font-size: clamp(26px, 7.7vw, 42px) !important;
  }
  .hero-title-motion .hero-title__line--accent{
    font-size: clamp(32px, 8.9vw, 50px) !important;
  }
}

/* Home hero background: mostly black with a small subtle moving pale glow */
.hero__gradient-blob{
  width: 28% !important;
  height: 28% !important;
  top: 34% !important;
  left: 8% !important;
  opacity: .34 !important;
  filter: blur(30px) !important;
}
.hero__gradient-blob--1{
  background: radial-gradient(circle at center, rgba(255, 255, 246, .36) 0 12%, rgba(255, 241, 194, .18) 25%, rgba(255, 241, 194, 0) 54%) !important;
}
.hero__gradient-blob--2{
  width: 24% !important;
  height: 24% !important;
  top: 27% !important;
  left: 18% !important;
  opacity: .22 !important;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .30) 0 12%, rgba(255, 232, 170, .12) 28%, rgba(255, 232, 170, 0) 55%) !important;
}
.hero__gradient-blob--3{
  width: 31% !important;
  height: 31% !important;
  top: 42% !important;
  left: -2% !important;
  opacity: .20 !important;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .26) 0 14%, rgba(255, 247, 214, .10) 30%, rgba(255, 247, 214, 0) 56%) !important;
}
.hero__gradient-blob--4{
  width: 22% !important;
  height: 22% !important;
  top: 48% !important;
  left: 22% !important;
  opacity: .18 !important;
  background: radial-gradient(circle at center, rgba(255, 244, 198, .22) 0 13%, rgba(255, 244, 198, 0) 54%) !important;
}
.hero__gradient-blob--pointer{
  width: 17% !important;
  height: 17% !important;
  opacity: .26 !important;
  filter: blur(22px) !important;
  background: radial-gradient(circle at center, rgba(255, 255, 246, .34) 0 12%, rgba(255, 236, 174, .14) 29%, rgba(255, 236, 174, 0) 56%) !important;
}

/* Home hero background: visible but compact moving glow */
.hero__gradient-blob{
  width: 42% !important;
  height: 42% !important;
  top: 28% !important;
  left: 0% !important;
  opacity: .62 !important;
  filter: blur(34px) !important;
}
.hero__gradient-blob--1{
  background: radial-gradient(circle at center, rgba(255, 255, 246, .70) 0 13%, rgba(255, 235, 167, .42) 28%, rgba(255, 235, 167, 0) 58%) !important;
}
.hero__gradient-blob--2{
  width: 34% !important;
  height: 34% !important;
  top: 22% !important;
  left: 14% !important;
  opacity: .48 !important;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .58) 0 13%, rgba(255, 229, 145, .32) 30%, rgba(255, 229, 145, 0) 58%) !important;
}
.hero__gradient-blob--3{
  width: 46% !important;
  height: 46% !important;
  top: 36% !important;
  left: -7% !important;
  opacity: .42 !important;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .50) 0 15%, rgba(255, 245, 202, .30) 32%, rgba(255, 245, 202, 0) 60%) !important;
}
.hero__gradient-blob--4{
  width: 32% !important;
  height: 32% !important;
  top: 46% !important;
  left: 20% !important;
  opacity: .36 !important;
  background: radial-gradient(circle at center, rgba(255, 231, 157, .48) 0 14%, rgba(255, 231, 157, 0) 58%) !important;
}
.hero__gradient-blob--pointer{
  width: 25% !important;
  height: 25% !important;
  opacity: .48 !important;
  filter: blur(26px) !important;
  background: radial-gradient(circle at center, rgba(255, 255, 246, .64) 0 13%, rgba(255, 235, 160, .34) 31%, rgba(255, 235, 160, 0) 60%) !important;
}

/* Force home hero base to true black while keeping the subtle moving glow */
.hero,
.hero::before,
.hero::after,
.hero__panel,
.hero__content{
  background-color: #000000 !important;
}
.hero{
  background: #000000 !important;
}
.hero::before{
  background: #000000 !important;
}
.hero::after{
  background: linear-gradient(90deg, #000000 0%, rgba(0,0,0,.96) 42%, rgba(0,0,0,.50) 64%, rgba(0,0,0,.14) 100%) !important;
}
.hero__panel{
  background: #000000 !important;
}
.hero__content{
  background: transparent !important;
}

/* Home hero glow color correction: white glow only, no yellow */
.hero__gradient-blob--1{
  background: radial-gradient(circle at center, rgba(255,255,255,.72) 0 12%, rgba(255,255,255,.34) 29%, rgba(255,255,255,0) 60%) !important;
}
.hero__gradient-blob--2{
  background: radial-gradient(circle at center, rgba(255,255,255,.58) 0 13%, rgba(245,248,255,.26) 31%, rgba(245,248,255,0) 60%) !important;
}
.hero__gradient-blob--3{
  background: radial-gradient(circle at center, rgba(255,255,255,.46) 0 14%, rgba(255,255,255,.22) 32%, rgba(255,255,255,0) 62%) !important;
}
.hero__gradient-blob--4{
  background: radial-gradient(circle at center, rgba(255,255,255,.38) 0 14%, rgba(248,250,255,.18) 32%, rgba(248,250,255,0) 60%) !important;
}
.hero__gradient-blob--pointer{
  background: radial-gradient(circle at center, rgba(255,255,255,.68) 0 13%, rgba(255,255,255,.30) 31%, rgba(255,255,255,0) 61%) !important;
}

/* Home hero glow motion: visible travel, not a tiny center twitch */
.hero__gradient-blob{
  mix-blend-mode: screen !important;
  transform-origin: 50% 50% !important;
}
.hero__gradient-blob--1{
  width: 40% !important;
  height: 40% !important;
  top: 28% !important;
  left: -4% !important;
  opacity: .62 !important;
  animation: heroGlowTravelA 9s ease-in-out infinite !important;
}
.hero__gradient-blob--2{
  width: 32% !important;
  height: 32% !important;
  top: 44% !important;
  left: 10% !important;
  opacity: .44 !important;
  animation: heroGlowTravelB 11s ease-in-out infinite reverse !important;
}
.hero__gradient-blob--3{
  width: 36% !important;
  height: 36% !important;
  top: 20% !important;
  left: 18% !important;
  opacity: .34 !important;
  animation: heroGlowOrbitSoft 13s ease-in-out infinite !important;
}
.hero__gradient-blob--4{
  width: 26% !important;
  height: 26% !important;
  top: 52% !important;
  left: 28% !important;
  opacity: .30 !important;
  animation: heroGlowTravelC 10s ease-in-out infinite !important;
}
.hero__gradient-blob--pointer{
  width: 22% !important;
  height: 22% !important;
  opacity: .40 !important;
  animation: heroPointerDrift 7s ease-in-out infinite !important;
}
@keyframes heroGlowTravelA{
  0%, 100% { transform: translate(-4%, -8%) scale(.92); }
  38% { transform: translate(42%, 10%) scale(1.08); }
  70% { transform: translate(18%, 26%) scale(.98); }
}
@keyframes heroGlowTravelB{
  0%, 100% { transform: translate(24%, 14%) scale(1); }
  45% { transform: translate(-18%, -22%) scale(1.16); }
  72% { transform: translate(34%, -6%) scale(.94); }
}
@keyframes heroGlowTravelC{
  0%, 100% { transform: translate(-18%, 10%) scale(.96); }
  50% { transform: translate(22%, -30%) scale(1.12); }
}
@keyframes heroGlowOrbitSoft{
  0% { transform: rotate(0deg) translateX(18%) rotate(0deg) scale(.96); }
  50% { transform: rotate(180deg) translateX(24%) rotate(-180deg) scale(1.1); }
  100% { transform: rotate(360deg) translateX(18%) rotate(-360deg) scale(.96); }
}
@keyframes heroPointerDrift{
  0%, 100% { transform: translate(-50%, -50%) translate(-18%, -10%) scale(.96); }
  50% { transform: translate(-50%, -50%) translate(18%, 14%) scale(1.08); }
}

/* Align home hero CTA with the left edge of the hero title */
.hero__content .btn--hero{
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
.hero__content{
  align-items: flex-start !important;
  text-align: left !important;
}

/* Add breathing room between hero title lines and CTA */
.hero-title-motion{
  gap: clamp(10px, 1.15vw, 18px) !important;
}
.hero-title-motion .hero-title__line{
  line-height: 1.02 !important;
}
.hero__content .btn--hero{
  margin-top: clamp(34px, 4vw, 58px) !important;
}

/* Slightly enlarge home hero title while keeping the three-line layout */
.hero-title-motion{
  max-width: min(700px, 92%) !important;
}
.hero-title-motion .hero-title__line--small{
  font-size: clamp(34px, 4.35vw, 72px) !important;
}
.hero-title-motion .hero-title__line--accent{
  font-size: clamp(44px, 5.35vw, 92px) !important;
}
@media (max-width: 760px){
  .hero-title-motion .hero-title__line--small{
    font-size: clamp(29px, 8.3vw, 46px) !important;
  }
  .hero-title-motion .hero-title__line--accent{
    font-size: clamp(36px, 9.8vw, 56px) !important;
  }
}

/* Blend home hero background and video into one continuous scene */
@media (min-width: 761px){
  .hero__media{
    overflow: hidden !important;
    box-shadow: none !important;
  }
  .hero__media::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg,
        #000000 0%,
        rgba(0,0,0,.96) 7%,
        rgba(0,0,0,.78) 15%,
        rgba(0,0,0,.42) 25%,
        rgba(0,0,0,.13) 38%,
        rgba(0,0,0,0) 55%),
      radial-gradient(circle at 10% 45%, rgba(255,255,255,.13) 0 10%, rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 48%) !important;
  }
  .hero__media::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(0,0,0,.24);
    mix-blend-mode: multiply;
  }
  .hero__video{
    filter: grayscale(.18) contrast(1.08) brightness(.82) saturate(.72) !important;
    transform: scale(1.015);
  }
  .hero::after{
    background: linear-gradient(90deg,
      #000000 0%,
      #000000 46%,
      rgba(0,0,0,.90) 56%,
      rgba(0,0,0,.42) 68%,
      rgba(0,0,0,.08) 84%,
      rgba(0,0,0,0) 100%) !important;
    pointer-events: none;
  }
}

/* Home hero text position/spacing adjustment */
@media (min-width: 761px){
  .hero__content{
    padding-left: clamp(62px, 6.4vw, 118px) !important;
  }
}
.hero-title-motion{
  gap: clamp(4px, .55vw, 9px) !important;
}
.hero-title-motion .hero-title__line{
  line-height: .96 !important;
}

/* Prevent home hero first-load vertical jump */
:root{
  --hero-vh-offset: 114px;
}
@media (min-width: 761px){
  .hero{
    height: calc(100vh - 114px) !important;
    min-height: calc(100vh - 114px) !important;
  }
}

/* Home hero: split Support to its own line and place CTA lower/center */
@media (min-width: 761px){
  .hero__content{
    position: relative !important;
  }
  .hero__content .btn--hero{
    position: absolute !important;
    left: 50% !important;
    bottom: clamp(62px, 8.5vh, 105px) !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    align-self: auto !important;
  }
  .hero__content .btn--hero:hover{
    transform: translateX(-50%) scale(1.04) !important;
  }
  .hero-title-motion{
    margin-bottom: clamp(120px, 18vh, 190px) !important;
  }
}

/* Final home hero placement fixes */
@media (min-width: 761px){
  .hero{
    height: calc(100vh - 88px) !important;
    min-height: calc(100vh - 88px) !important;
  }
  .hero__content .btn--hero{
    left: 50vw !important;
    bottom: clamp(62px, 8.5vh, 105px) !important;
    transform: translateX(-50%) !important;
  }
  .hero__content .btn--hero:hover{
    transform: translateX(-50%) scale(1.04) !important;
  }
  .hero-title-motion{
    margin-bottom: 0 !important;
  }
}

/* Shared navbar normalization: home matches services/nav-component */
.site-header{
  display: block !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
  width: 100% !important;
  background: #050505 !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
}
.site-header__inner{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 32px !important;
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr) !important;
  align-items: center !important;
  gap: 28px !important;
}
.site-nav{
  grid-column: 2 !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  flex: none !important;
}
.site-nav ul{
  position: static !important;
  left: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.site-header__right{
  grid-column: 3 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 20px !important;
}
.site-header__actions{
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}
.site-header .site-nav__link{
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.site-header .btn--header{
  min-width: 0 !important;
  height: 56px !important;
  padding: 0 26px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
.site-header__search{
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
}
.site-header__burger{
  display: none !important;
}
@media (max-width: 1080px){
  .site-header__inner{
    display: flex !important;
    justify-content: flex-end !important;
  }
  .site-nav,
  .site-header__search{
    display: none !important;
  }
  .site-header__burger{
    display: flex !important;
  }
}
@media (max-width: 560px){
  .site-header__inner{
    padding: 12px 16px !important;
    gap: 12px !important;
  }
  .site-header .btn--header{
    height: 46px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }
}

/* Header CTA anti-flicker: same size in every cascade state */
.site-header .btn--header,
.site-header .btn--header:hover,
.site-header .btn--header:focus-visible{
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 26px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
@media (max-width: 560px){
  .site-header .btn--header,
  .site-header .btn--header:hover,
  .site-header .btn--header:focus-visible{
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }
}

/* Header CTA must never resize/flicker between pages */
.site-header .btn--header,
.site-header .btn--header:hover,
.site-header .btn--header:focus,
.site-header .btn--header:focus-visible,
.site-header .btn--header:active{
  box-sizing: border-box !important;
  width: 166px !important;
  min-width: 166px !important;
  max-width: 166px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: none !important;
  scale: 1 !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
  filter: none !important;
}
.site-header .btn--header::before,
.site-header .btn--header:hover::before,
.site-header .btn--header:focus::before,
.site-header .btn--header:active::before{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}
.site-header .btn--header::after,
.site-header .btn--header:hover::after,
.site-header .btn--header:focus::after,
.site-header .btn--header:active::after{
  inset: 3px !important;
  border-radius: inherit !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
}
@media (max-width: 560px){
  .site-header .btn--header,
  .site-header .btn--header:hover,
  .site-header .btn--header:focus,
  .site-header .btn--header:focus-visible,
  .site-header .btn--header:active{
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    font-size: 13px !important;
  }
}

/* Emergency navbar containment fix: no CTA overflow */
html, body{
  overflow-x: hidden !important;
}
.site-header{
  overflow: hidden !important;
}
.site-header__inner{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 14px clamp(18px, 2.2vw, 32px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(12px, 1.5vw, 24px) !important;
}
.site-nav{
  grid-column: 2 !important;
  justify-self: center !important;
  min-width: 0 !important;
}
.site-nav ul{
  gap: clamp(16px, 1.55vw, 26px) !important;
  white-space: nowrap !important;
}
.site-header__right{
  grid-column: 3 !important;
  justify-self: end !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}
.site-header__actions{
  min-width: 0 !important;
  max-width: 100% !important;
  gap: clamp(12px, 1.1vw, 20px) !important;
}
.site-header .btn--header,
.site-header .btn--header:hover,
.site-header .btn--header:focus,
.site-header .btn--header:active{
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 88px) !important;
  height: 56px !important;
  padding: 0 clamp(20px, 2vw, 26px) !important;
  transform: none !important;
  white-space: nowrap !important;
}
.site-header__search{
  flex: 0 0 44px !important;
}
@media (max-width: 1180px){
  .site-header__inner{
    grid-template-columns: 1fr auto !important;
  }
  .site-nav{
    grid-column: 1 !important;
    justify-self: start !important;
  }
  .site-header__right{
    grid-column: 2 !important;
  }
}
@media (max-width: 1080px){
  .site-header__inner{
    display: flex !important;
    justify-content: flex-end !important;
  }
  .site-nav,
  .site-header__search{
    display: none !important;
  }
  .site-header__burger{
    display: flex !important;
  }
}

/* FINAL shared navbar behavior: fixed, contained, no CTA flicker */
:root{--site-header-h:88px !important;}
html{scroll-padding-top:var(--site-header-h) !important;}
body{padding-top:var(--site-header-h) !important;overflow-x:hidden !important;}
.site-header{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;z-index:5000 !important;width:100% !important;height:var(--site-header-h) !important;overflow:hidden !important;background:#050505 !important;color:#fff !important;border-bottom:1px solid rgba(255,255,255,.12) !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;font-family:Roboto,Arial,sans-serif !important;}
.site-header__inner{box-sizing:border-box !important;width:100% !important;max-width:100% !important;height:100% !important;margin:0 !important;padding:14px clamp(18px,2.2vw,32px) !important;display:grid !important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;align-items:center !important;gap:clamp(12px,1.5vw,24px) !important;}
.site-nav{grid-column:2 !important;justify-self:center !important;min-width:0 !important;display:flex !important;align-items:center !important;justify-content:center !important;}
.site-nav ul{position:static !important;left:auto !important;transform:none !important;display:flex !important;align-items:center !important;gap:clamp(16px,1.55vw,26px) !important;margin:0 !important;padding:0 !important;list-style:none !important;white-space:nowrap !important;}
.site-header__right{grid-column:3 !important;justify-self:end !important;min-width:0 !important;max-width:100% !important;display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:clamp(12px,1.1vw,20px) !important;}
.site-header__actions{display:flex !important;align-items:center !important;gap:clamp(12px,1.1vw,20px) !important;min-width:0 !important;max-width:100% !important;}
.site-header .site-nav__link{color:#fff !important;font-size:14px !important;font-weight:700 !important;line-height:1 !important;text-decoration:none !important;}
.site-header .btn--header,.site-header .btn--header:hover,.site-header .btn--header:focus,.site-header .btn--header:focus-visible,.site-header .btn--header:active{box-sizing:border-box !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;width:auto !important;min-width:0 !important;max-width:calc(100vw - 96px) !important;height:56px !important;min-height:56px !important;max-height:56px !important;padding:0 clamp(20px,2vw,26px) !important;border-radius:999px !important;font-size:16px !important;font-weight:700 !important;line-height:1 !important;white-space:nowrap !important;text-decoration:none !important;transform:none !important;scale:1 !important;filter:none !important;transition:none !important;}
.site-header .btn--header::before,.site-header .btn--header:hover::before,.site-header .btn--header:focus::before,.site-header .btn--header:active::before{content:none !important;display:none !important;opacity:0 !important;animation:none !important;}
.site-header .btn--header::after,.site-header .btn--header:hover::after,.site-header .btn--header:focus::after,.site-header .btn--header:active::after{transform:none !important;animation:none !important;filter:none !important;}
.site-header__search{box-sizing:border-box !important;flex:0 0 44px !important;width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;border-radius:999px !important;background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.18) !important;color:#fff !important;}
.site-header__burger{display:none !important;}
@media(max-width:1180px){.site-header__inner{grid-template-columns:1fr auto !important}.site-nav{grid-column:1 !important;justify-self:start !important}.site-header__right{grid-column:2 !important}}
@media(max-width:1080px){.site-header__inner{display:flex !important;justify-content:flex-end !important}.site-nav,.site-header__search{display:none !important}.site-header__burger{display:flex !important}}
@media(max-width:560px){:root{--site-header-h:70px !important}.site-header .btn--header,.site-header .btn--header:hover,.site-header .btn--header:focus,.site-header .btn--header:focus-visible,.site-header .btn--header:active{height:46px !important;min-height:46px !important;max-height:46px !important;padding:0 16px !important;font-size:13px !important}.site-header__inner{padding:12px 16px !important;gap:12px !important}}

/* Explore section: remove tab control and match major section title scale */
.explore .divider-title{
  display: block !important;
  max-width: 1240px !important;
  margin: 0 auto 34px !important;
}
.explore .divider-title h2{
  font-size: clamp(42px, 4vw, 58px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  font-weight: var(--font-weight-medium, 800) !important;
}

/* Success Story arrows: align with the vertical center of the headings */
.story .result-grid > span{
  align-self: start !important;
  padding-top: 0 !important;
  transform: translateY(-6px) !important;
}

/* Unified section-label / eyebrow typography across pages */
.section-title p,
.eyebrow,
.story .eyebrow,
.quiz__intro .eyebrow,
.mini{
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: .18em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #b77a00 !important;
}

/* Success Story arrows: equal visual spacing between adjacent headings */
.story .result-grid{
  grid-template-columns: minmax(190px, 1fr) 96px minmax(190px, 1fr) 96px minmax(190px, 1fr) !important;
  column-gap: 0 !important;
  align-items: start !important;
}
.story .result-grid > span{
  justify-self: center !important;
  align-self: start !important;
  padding-top: 0 !important;
  transform: translateY(-6px) !important;
  text-align: center !important;
}

/* Success Story arrows: nudge left per visual alignment */
.story .result-grid > span{
  transform: translate(-18px, -6px) !important;
}