/* Razzle Dazzle landing page: the shared styles both options build on, and what B7 takes to lp/.
 *
 * Palette from their logo: gold #B4913F on night #16150F. Gold is never text on a light ground
 * (2.97:1 on white); gold words on light use --gold-deep #7A6230 (5.8:1). Nothing else is
 * added: white, one warm light band, night and gold. Type is Archivo on its weight axis, self
 * hosted. Motion is transform and opacity only, killed under prefers-reduced-motion. The sticky
 * header keeps one flow height and condenses by paint alone, and no box scrolls sideways.
 */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations'), url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --night: #16150F;
  --night-2: #22201A;
  --night-3: #2E2B22;
  --gold: #B4913F;
  --gold-2: #CDAB5C;
  --gold-deep: #7A6230;
  --gold-soft: rgba(180, 145, 63, .18);
  --white: #FFFFFF;
  --paper: #F5F2EB;
  --line: #E3DDCF;
  --line-dark: rgba(255, 255, 255, .14);
  --ink: #16150F;
  --body: #4A463D;
  --muted: #6F6A5C;
  --on-night: #F3EFE4;
  --on-night-muted: #B9B3A3;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --head-h: 84px;
  --radius: 6px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(16px, 4vw, 56px);
  --wrap: 1600px;
}
@media (max-width: 760px) { :root { --head-h: 64px; } }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--body);
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
figure, blockquote { margin: 0; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--head-h) + 16px); }
h1, h2, h3 { margin: 0; color: var(--ink); line-height: 1.08; letter-spacing: -.02em; font-weight: 750; }
h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.9rem); text-wrap: balance; }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.7rem); text-wrap: balance; }
h3 { font-size: 1.2rem; }
p { margin: 0; }
a { color: var(--gold-deep); }
button { font: inherit; }
.on-night { color: var(--on-night); }
.on-night h1, .on-night h2, .on-night h3 { color: var(--white); }
.on-night a { color: var(--gold); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.band { padding-top: clamp(44px, 7vw, 96px); padding-bottom: clamp(44px, 7vw, 96px); }
.band--paper { background: var(--paper); }
.band--night { background: var(--night); }
.band--tight { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(28px, 4vw, 56px); }
.eyebrow {
  display: block;
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.on-night .eyebrow { color: var(--gold); }
.lede { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); line-height: 1.5; max-width: 62ch; }
@media (max-width: 480px) { .lede { font-size: 1rem; line-height: 1.45; } }
.head-row { display: grid; gap: 18px 48px; align-items: end; margin-bottom: clamp(24px, 4vw, 44px); }
@media (min-width: 900px) { .head-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.head-row p { max-width: 56ch; }

/* ---------- header: one flow height, condensed by paint only ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--head-h);
  background: var(--night);
  box-shadow: 0 1px 0 var(--line-dark);
  transition: box-shadow .3s var(--ease);
}
.top.is-scrolled { box-shadow: 0 8px 28px rgba(0, 0, 0, .38); }
.top__in { height: 100%; display: flex; align-items: center; gap: 14px; }
.top__logo { height: 64px; width: auto; flex: none; }
.top__spacer { flex: 1; }
.top__quote { color: var(--on-night); text-decoration: none; font-weight: 650; font-size: 15px; padding: 10px 14px; border-radius: var(--radius); }
.top__quote:hover { color: var(--gold-2); }
.top__call {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--night);
  text-decoration: none;
  font-weight: 750;
  font-size: 16px;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background-color .2s;
}
.top__call:hover { background: var(--gold-2); }
.top__call svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .top__logo { height: 42px; }
  .top__quote { display: none; }
  .top__call { min-height: 44px; padding: 0 14px; font-size: 15px; }
}
@media (max-width: 400px) { .top__call span { display: none; } .top__call { min-width: 44px; justify-content: center; padding: 0 12px; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-weight: 750;
  font-size: 16.5px;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn--gold, .on-night .btn--gold { background: var(--gold); color: var(--night); border-color: var(--gold); }
.btn--gold:hover, .on-night .btn--gold:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--night); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.on-night .btn--ghost { color: var(--on-night); border-color: rgba(255, 255, 255, .5); }
.on-night .btn--ghost:hover { background: var(--white); color: var(--night); border-color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .top__call:focus-visible, .arrow:focus-visible, .tile:focus-visible, .step:focus-visible, .town:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 480px) { .btn-row .btn { flex: 1 1 100%; } }

/* ---------- the form: the interface's fields, one source in shared/form.html ---------- */
.form { container-type: inline-size; }
.form__grid { display: grid; gap: 12px; }
.row2 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 400px) { .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); }
.form--night .field label { color: var(--gold); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
  appearance: none;
  -webkit-appearance: none;
}
.form--night .field input, .form--night .field select, .form--night .field textarea { border-color: rgba(255, 255, 255, .18); }
.field textarea { min-height: 76px; resize: vertical; }
.field select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%2316150F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.field input::placeholder, .field textarea::placeholder { color: #9A9486; }
.form__submit { width: 100%; margin-top: 4px; }
.form__note { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 12px; }
.form--night .form__note { color: var(--on-night-muted); }
.form__title { margin-bottom: 4px; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem); }
.form__sub { margin-bottom: 14px; font-size: 15px; line-height: 1.45; }
/* Honeypot: off screen, not display:none, so a bot that skips hidden inputs still meets it.
   Its label is "Leave this blank" and its name _hp, which match no autofill type (kit lesson 621). */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__ok, .form__err { padding: 18px 20px; border-radius: var(--radius); line-height: 1.5; }
.form__ok { background: var(--night); color: var(--on-night); }
.form__ok b { display: block; color: var(--gold); font-size: 1.15rem; margin-bottom: 6px; }
.form__ok a { color: var(--gold-2); font-weight: 700; }
.form--night .form__ok { background: var(--white); color: var(--body); }
.form--night .form__ok b { color: var(--gold-deep); }
.form--night .form__ok a { color: var(--gold-deep); }
.form__err { background: var(--paper); border: 1.5px solid var(--gold); color: var(--ink); font-size: 15px; margin-top: 12px; }
.form__err a { font-weight: 700; }
.form__preview { display: block; margin-top: 12px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.form--night .form__preview { color: var(--gold-deep); }

/* ---------- claims: only from ads/data/claims.json, every one tagged until confirmed ---------- */
.claim-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 7px;
  padding: 2px 8px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--white);
  color: var(--gold-deep);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}
.on-night .claim-tag { background: transparent; color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
}
.on-night .chip { background: var(--night-2); border-color: var(--line-dark); color: var(--on-night); }

/* ---------- the facts plate: figures on a solid ground ---------- */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-dark); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { background: var(--night); padding: 22px 20px 20px; }
.fact__n { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.9rem); font-weight: 780; letter-spacing: -.03em; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
/* The count up (0 to 10) keeps the final number's width from the start: at 360 wide "10 miles"
   wraps where "0 miles" did not, and the band grew 19px under the reader (Q1, 28 Sep 2026). */
.fact__n [data-count] { display: inline-block; min-width: 2ch; text-align: right; }
.fact__l { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--on-night-muted); }
.fact__l .claim-tag { margin-left: 0; margin-top: 6px; }

/* ---------- the before and after pair, stepped with arrows (v1) ---------- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pair__ph { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--night-2); }
.pair__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s var(--ease); }
.pair__ph img.is-on { opacity: 1; }
.plate {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 6px 11px;
  background: var(--night);
  color: var(--gold);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.plate--after { background: var(--gold); color: var(--night); }
.pair__ctl { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.arrow svg { width: 20px; height: 20px; }
.arrow:hover { background: var(--ink); color: var(--gold); }
.pair__count { font-size: 14px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.pair__cap { font-size: 15.5px; color: var(--body); margin-left: auto; }
@media (max-width: 480px) { .pair__cap { margin-left: 0; flex-basis: 100%; } }

/* ---------- the flip wall (v2): tap a tile to see it after ---------- */
.wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; background: var(--night); }
@media (min-width: 700px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--night-2);
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__after { position: absolute; inset: 0; overflow: hidden; transform: translateX(101%); transition: transform .75s var(--ease); }
.tile__after img { transform: translateX(-101%); transition: transform .75s var(--ease); }
.tile.is-after .tile__after, .tile.is-after .tile__after img { transform: translateX(0); }
.tile .plate { transition: opacity .3s; }
.tile .plate--after { opacity: 0; }
.tile.is-after .plate--before { opacity: 0; }
.tile.is-after .plate--after { opacity: 1; }
.tile__hint {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 7px 10px;
  background: rgba(22, 21, 15, .82);
  color: var(--on-night);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .02em;
  border-radius: 4px;
}
.tile--cta { background: var(--night); display: grid; align-content: center; gap: 14px; padding: 22px; cursor: default; }
.tile--cta h3 { color: var(--gold); font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); line-height: 1.1; }
.tile--cta p { color: var(--on-night-muted); font-size: 14.5px; }

/* ---------- sparkles: the name is the brief ---------- */
.sparkle { position: absolute; width: 20px; height: 20px; pointer-events: none; opacity: 0; transform: scale(.2); z-index: 4; color: var(--gold-2); }
.sparkle.go { animation: sparkle .95s var(--ease) forwards; }
@keyframes sparkle {
  0% { opacity: 0; transform: scale(.2) rotate(0deg); }
  35% { opacity: 1; transform: scale(1.15) rotate(25deg); }
  100% { opacity: 0; transform: scale(.5) rotate(60deg) translateY(-14px); }
}

/* ---------- the dial (v1): how it works, on an oven knob ---------- */
.dial { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .dial { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } }
.dial__knob { width: min(280px, 64vw); margin: 0 auto; }
.dial__knob svg { width: 100%; height: auto; display: block; }
.dial__pointer { transform-box: view-box; transform-origin: 150px 150px; transition: transform .6s var(--ease); }
.dial__steps { display: grid; gap: 10px; }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  padding: 18px 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.step.is-on { border-color: var(--gold); background: var(--paper); }
.step__n { width: 36px; height: 36px; border-radius: 50%; background: var(--night); color: var(--gold); font-weight: 800; display: grid; place-items: center; font-size: 15px; }
.step.is-on .step__n { background: var(--gold); color: var(--night); }
.step h3 { margin-bottom: 4px; }
.step p { font-size: 15.5px; }

/* ---------- the areas map: three circles, pins that drop in, towns that light up ---------- */
.map { display: grid; gap: 28px; }
@media (min-width: 960px) { .map { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; } }
.map__stage { position: relative; }
.map__svg { width: 100%; height: auto; display: block; }
.map__svg text { font-family: var(--font); }
.ring { fill: rgba(180, 145, 63, .10); stroke: var(--gold); stroke-width: 1.4; transition: fill .3s; }
.ring.is-on { fill: rgba(180, 145, 63, .24); }
.base circle { fill: var(--gold); }
.base text { fill: var(--white); font-size: 13px; font-weight: 750; letter-spacing: .04em; }
.pin { cursor: pointer; opacity: 0; transform: translateY(-14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.map.in .pin { opacity: 1; transform: none; }
.pin circle { fill: var(--night); stroke: var(--gold); stroke-width: 1.6; transition: fill .2s, r .2s; }
.pin text { fill: var(--on-night-muted); font-size: 11px; font-weight: 600; transition: fill .2s; }
.pin.is-on circle { fill: var(--gold-2); }
.pin.is-on text { fill: var(--white); }
.map__tip {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 8px 12px;
  background: var(--gold);
  color: var(--night);
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s, transform .25s;
}
.map__tip.is-on { opacity: 1; transform: none; }
.map__towns { display: flex; flex-wrap: wrap; gap: 8px; }
.town {
  min-height: 44px;
  padding: 8px 13px;
  border: 1.5px solid var(--line-dark);
  border-radius: 999px;
  background: transparent;
  color: var(--on-night);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.town.is-on { background: var(--gold); color: var(--night); border-color: var(--gold); }
.map__note { font-size: 13px; color: var(--on-night-muted); margin-top: 14px; }

/* ---------- the running strip (v1): what we clean ---------- */
.strip { overflow: hidden; background: var(--night); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.strip__track { display: flex; width: max-content; animation: strip 46s linear infinite; }
.strip__item { display: flex; align-items: center; gap: 30px; padding: 17px 0 17px 30px; color: var(--gold); font-weight: 750; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.strip__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
@keyframes strip { to { transform: translateX(-50%); } }

/* ---------- the edge bleed split (v2) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split__ph { position: relative; min-height: 340px; }
.split__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__body { padding: clamp(32px, 5vw, 80px) var(--gutter); align-self: center; }
.list { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.list svg { width: 22px; height: 22px; color: var(--gold); margin-top: 2px; }
.list b { color: var(--ink); }
.on-night .list b { color: var(--white); }

/* ---------- footer ---------- */
.foot { background: var(--night); color: var(--on-night-muted); font-size: 14px; padding: 40px 0 110px; }
@media (min-width: 761px) { .foot { padding-bottom: 44px; } }
.foot__in { display: grid; gap: 22px; }
@media (min-width: 760px) { .foot__in { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } }
.foot__logo { height: 56px; width: auto; }
.foot a { color: var(--gold); }
.foot__legal { font-size: 12.5px; line-height: 1.5; }

/* ---------- the sticky phone bar: phones only, once the hero's call button has gone ---------- */
.mbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--night);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .35);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.mbar.is-on { transform: none; }
/* While a field has focus the keyboard is up, and iOS 26 Safari draws this fixed bar just above
   the keyboard, over the next fields (Q1 on the iPhone SE, 28 Sep 2026). It slides away until the
   visitor leaves the field; the number stays in the form's own note. */
html:has(#rd-form :is(input, select, textarea):focus) .mbar { transform: translateY(110%); visibility: hidden; }
.mbar .btn { flex: 1; min-height: 50px; }
@media (max-width: 760px) { .mbar { display: flex; } }

/* ---------- reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv[data-delay="1"] { transition-delay: .1s; }
.rv[data-delay="2"] { transition-delay: .2s; }
.rv[data-delay="3"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- B7: the states rd-form.js sets while sending and after a 422, kept in the palette ---------- */
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea, .field [aria-invalid="true"] { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.field__msg { display: block; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--gold-deep); }
.form--night .field__msg { color: var(--gold-2); }
.form__submit:disabled { opacity: .75; cursor: progress; transform: none; }
.form[aria-busy="true"] .form__grid { opacity: .85; }

/* ---------- B7: the facts plate with a range, a word or the badge where there is no one number ---------- */
.fact__n--word { font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); letter-spacing: -.01em; line-height: 1.05; }
.fact__n small { font-size: .48em; font-weight: 700; letter-spacing: 0; color: var(--gold-2); }
.fact--badge img { width: min(100%, 210px); height: auto; background: var(--white); padding: 7px 10px; border-radius: 4px; }
.hero__claim .dot { display: inline-block; width: 5px; height: 5px; margin: 0 10px 3px; border-radius: 50%; background: var(--gold); vertical-align: middle; }