/* ============================================================
   APPROVED BY SAINI — V9 design layer (over proto.css)
   Smoothness Law build: no pinned mobile stages, no per-frame
   scroll JS, entrance-only + compositor motion, zero mobile
   canvases. New type: Bricolage Grotesque / Plus Jakarta Sans.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Bricolage'; font-weight: 500; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage'; font-weight: 600; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage'; font-weight: 700; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage'; font-weight: 800; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jakarta'; font-weight: 400; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jakarta'; font-weight: 500; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jakarta'; font-weight: 600; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jakarta'; font-weight: 700; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }

:root {
  --fd: 'Bricolage', 'Sora', system-ui, sans-serif;
  --fb: 'Jakarta', 'Inter', system-ui, sans-serif;
  --ok: #2dd4a7;            /* the "approved" green-teal, confirmations only */
  --surface1: #10151f; --surface2: #151b28; --surface3: #1b2333;
  --h1: clamp(2.3rem, 4.8vw, 3.8rem);
}
h1 { letter-spacing: -.028em; }
h2, .sec-h2 { letter-spacing: -.022em; }

/* ============================================================
   HERO — split composition; desktop scrub pin, mobile calm loop
   ============================================================ */
.hero-pin { position: relative; }
.hero-stick { position: sticky; top: 0; height: 100svh; min-height: 0; }
/* #60/#61: the pin is restored on phones. Only heroes that are NOT scrubbing
   fall back to the un-pinned layout. */
@media (max-width: 1023px) {
  .hero-pin:not(.scrub) { height: auto !important; }
  .hero-pin:not(.scrub) .hero-stick { position: relative; height: 100svh; }
  .hero-pin.scrub .hero-stick { position: sticky; top: 0; height: 100svh; }
}
.hero-video { min-height: 100svh; }
.hero-film { position: absolute; inset: 0; z-index: -1; overflow: clip; background: #0a0c11; }
.hero-film video, .hero-film .hero-postimg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%;
}
.hero-grade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,7,11,.60), rgba(5,7,11,.10) 34% 58%, rgba(8,9,13,.92) 96%),
    linear-gradient(94deg, rgba(8,9,13,.5), transparent 44%); }
.hero-copyshade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,7,13,.78), rgba(4,7,13,.34) 26%, transparent 44%),
    linear-gradient(0deg, rgba(4,7,13,.82), rgba(4,7,13,.36) 26%, transparent 46%); }
.hero-water { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-video .hero-in { padding-block: 0; display: flex; flex-direction: column;
  justify-content: space-between; height: 100svh; align-self: stretch; }
.hero-top { margin-top: clamp(92px, 13vh, 148px); }
.hero-bot { margin-bottom: clamp(96px, 13vh, 150px); max-width: 640px; }
.hero-bot .hero-sub { margin-top: 0; color: rgba(240,244,250,.94); }
.hero-bot .hero-cta { margin-top: 1.3em; }
.hero-video .kicker { color: #fff; opacity: .96; display: flex; align-items: center; gap: 12px; }
.hero-video .kicker::before { content: ''; width: 26px; height: 2px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, var(--eblue), #7c6fd0); }
.hero-video h1 { color: #fff; }
.hero-video em.ac { background: linear-gradient(92deg, #85bcff, #ffc65c 120%); -webkit-background-clip: text; background-clip: text; }
.hero-load { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 3; display: flex; align-items: center; gap: 10px;
  font: 600 .68rem var(--fb); letter-spacing: .26em; text-transform: uppercase; color: var(--ink3);
  opacity: 0; transition: opacity .5s var(--easeO); pointer-events: none; }
.hero-load.show { opacity: 1; }
.hero-load i { width: 120px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; font-style: normal; display: block; }
.hero-load i b { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--eblue), #7c6fd0); transition: transform .3s linear; }
html.video-fail .hero-film video { display: none; }
/* static hero for pages without films */
.hero-plain { min-height: 78svh; }
.hero-plain .hero-in { padding-block: 0; display: flex; flex-direction: column; justify-content: space-between; height: 78svh; }

/* ============================================================
   DNA TRUST SCENE — position 2 on every page.
   Pure CSS keyframes, IO adds .play; zero per-frame JS.
   ============================================================ */
.dna { position: relative; isolation: isolate;
  background:
    radial-gradient(60% 50% at 82% 18%, rgba(75,59,143,.26), transparent 60%),
    radial-gradient(70% 55% at 12% 82%, rgba(18,48,94,.4), transparent 62%),
    linear-gradient(178deg, #06070b, #0b0e15 60%, #080a10); }
/* Scroll budget for the scrubbed photo story (correction #1). The stage
   sticks for one screen while the section scrolls past underneath.
   Clipping lives on the stage, not on .dna — an overflow on the sticky
   element's ancestor would break the sticky. */
/* #102 round 5c: the story needed scroll DISTANCE, not just tighter windows —
   at 245svh the whole 8-photo story fit inside ~2 swipes. */
.dna { height: 400svh; }
.dna.dna-compact { height: 300svh; }
.dna-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
.dna-head { position: absolute; top: clamp(56px, 8vh, 96px); left: 0; right: 0; text-align: center; z-index: 4; padding: 0 6vw; pointer-events: none; }
.dna-helix { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .6; }
.dna-helix g { transform-origin: 50% 50%; }
.dna.play .dna-helix g { animation: helixdrift 26s linear infinite; }
@keyframes helixdrift { to { transform: rotate(8deg) translateY(-2%); } }
.dna-helix path { stroke-dasharray: 8 14; }
.dna.play .dna-helix path { animation: dashflow 9s linear infinite; }
@keyframes dashflow { to { stroke-dashoffset: -220; } }
.dna-field { position: absolute; inset: 0; z-index: 2; }
.dna-card { position: absolute; left: 50%; top: 46%; width: min(44vw, 560px); aspect-ratio: 4/3;
  transform: translate(-50%, -50%) translate3d(-84vw, 4vh, 0) scale(.86); opacity: 0;
  will-change: transform, opacity; }
.dna-frame { position: absolute; inset: 0; border-radius: 18px; overflow: clip;
  background: linear-gradient(150deg, var(--graphite), var(--graphite2));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.dna-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dna-fall { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 8%;
  background: linear-gradient(155deg, #171d29, #10131c 60%, #1c1712);
  color: var(--ink3); font: 600 .78rem/1.7 var(--fb); letter-spacing: .12em; text-transform: uppercase; }
.dna-fall b { display: block; font: 700 1rem var(--fd); color: var(--amber); letter-spacing: .06em; margin-bottom: 6px; }
.dna-card.has-img .dna-fall { display: none; }
/* grid slots via per-card vars (--gx/--gy vw/vh units baked in, --gs scale) */
.dna.play .dna-card[data-s] { animation: var(--anim) 26s cubic-bezier(.45,.05,.25,1) both; animation-delay: var(--d, 0s); }
.dna.play .dna-card[data-x] { animation: dnaextra 1.4s var(--easeO) both; animation-delay: var(--d, 20s); }
.dna-card[data-s] { --anim: dnastory; }
@keyframes dnastory {
  0%   { transform: translate(-50%,-50%) translate3d(-84vw, 4vh, 0) scale(.86); opacity: 0; }
  5%   { transform: translate(-50%,-50%) translate3d(0, 0, 0) scale(1); opacity: 1; }
  13.5%{ transform: translate(-50%,-50%) translate3d(0, -1vh, 0) scale(1.015); opacity: 1; }
  20%  { transform: translate(-50%,-50%) translate3d(var(--gx), var(--gy), 0) scale(var(--gs)); opacity: 1; }
  100% { transform: translate(-50%,-50%) translate3d(var(--gx), var(--gy), 0) scale(var(--gs)); opacity: 1; }
}
@keyframes dnaextra {
  from { transform: translate(-50%,-50%) translate3d(var(--gx), var(--gy), 0) scale(calc(var(--gs) * .7)); opacity: 0; }
  to   { transform: translate(-50%,-50%) translate3d(var(--gx), var(--gy), 0) scale(var(--gs)); opacity: 1; }
}
/* paused until in view; finished wall persists (fill-mode both) */
.dna:not(.play) .dna-card { animation-play-state: paused; }
/* When the scroll engine is driving, JS owns transform/opacity outright. */
.dna.dna-js .dna-card[data-s], .dna.dna-js .dna-card[data-x] { animation: none !important; }
.dna.dna-js .dna-cta { opacity: 0; pointer-events: none; transition: opacity .5s var(--easeO); transition-delay: 0s; }
.dna.dna-js .dna-cta.show { opacity: 1; pointer-events: auto; }
.dna.dna-js .dna-note { transition: opacity .4s var(--easeO); }
.dna.dna-js .dna-note.off { opacity: 0; }
.dna-note { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 4;
  font: 600 .66rem var(--fb); letter-spacing: .26em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.dna-cta { position: absolute; left: 50%; bottom: clamp(40px, 6vh, 70px); transform: translateX(-50%); z-index: 6;
  opacity: 0; transition: opacity .8s var(--easeO) 22s; pointer-events: none; }
.dna.play .dna-cta { opacity: 1; pointer-events: auto; transition-delay: 23s; }
html.reduced .dna .dna-card, html.no-js .dna .dna-card {
  animation: none !important; opacity: 1;
  transform: translate(-50%,-50%) translate3d(var(--gx), var(--gy), 0) scale(var(--gs)); }
html.reduced .dna-cta, html.no-js .dna-cta { opacity: 1; pointer-events: auto; transition: none; }
@media (max-width: 760px) {
  .dna { height: 440svh; }
  .dna.dna-compact { height: 330svh; }
  .dna-card { width: min(78vw, 460px); top: 42%; }
}

/* ============================================================
   OFFER CARDS — crisp DOM grid (no pin), cosmic CSS backdrop
   ============================================================ */
.offer-sec { position: relative; overflow: clip;
  background:
    radial-gradient(70% 55% at 82% 78%, rgba(75,59,143,.28), transparent 58%),
    radial-gradient(55% 45% at 12% 16%, rgba(18,48,94,.42), transparent 60%),
    linear-gradient(178deg, #07080d, #0b0e15 55%, #090b11); }
.offer-sec .wrap { position: relative; z-index: 2; }
.stars-css { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(205,220,255,.6), transparent 100%),
    radial-gradient(1px 1px at 28% 68%, rgba(205,220,255,.42), transparent 100%),
    radial-gradient(2px 2px at 45% 20%, rgba(205,220,255,.5), transparent 100%),
    radial-gradient(1px 1px at 62% 52%, rgba(205,220,255,.4), transparent 100%),
    radial-gradient(1.6px 1.6px at 78% 34%, rgba(205,220,255,.55), transparent 100%),
    radial-gradient(1px 1px at 88% 74%, rgba(205,220,255,.4), transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 86%, rgba(205,220,255,.38), transparent 100%),
    radial-gradient(1.4px 1.4px at 70% 88%, rgba(205,220,255,.44), transparent 100%),
    radial-gradient(1px 1px at 6% 60%, rgba(205,220,255,.34), transparent 100%),
    radial-gradient(1.4px 1.4px at 94% 14%, rgba(205,220,255,.46), transparent 100%);
  animation: twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
html.reduced .stars-css { animation: none; }
.o-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 2.2em; perspective: 1100px; }
.o-card { position: relative; border-radius: var(--rl);
  background: linear-gradient(178deg, rgba(23,29,41,.97), rgba(13,17,25,.99));
  border: 1px solid var(--line); box-shadow: var(--sh1);
  padding: clamp(24px, 2.6vw, 34px); display: grid; gap: 13px; align-content: start;
  transition: transform .35s var(--easeO), box-shadow .35s var(--easeO), border-color .3s; }
.o-card::after { content: ''; position: absolute; inset: 0 0 auto; height: 42%; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent); pointer-events: none; }
/* Correction #2: cards no longer rise on hover — the card stays put and
   only the edge/glow responds. Applies site-wide, every page. */
.o-card:hover {
  border-color: color-mix(in srgb, var(--acc, #3d8bff) 45%, transparent);
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 60px -20px var(--acc, rgba(61,139,255,.5)); }
.o-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.o-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--acc, #3d8bff) 55%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--acc, #3d8bff) 18%, transparent), rgba(75,59,143,.10));
  color: var(--acc, var(--eblue)); }
.o-ico svg { width: 24px; height: 24px; }
.o-num { font: 800 2.2rem/1 var(--fd); color: transparent; -webkit-text-stroke: 1.4px color-mix(in srgb, var(--acc, #3d8bff) 75%, transparent); }
.o-card h3, .o-card h4 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); font-weight: 700; }
.o-card p { color: var(--ink2); font-size: .97rem; line-height: 1.66; }
.o-card p strong { color: var(--ink); }

/* ============================================================
   TOOLS
   ============================================================ */
.est-taxnote { margin-top: -6px; min-height: 1.2em; }
.est-row select { grid-column: 1 / -1; appearance: none; -webkit-appearance: none;
  padding: .82em 2.6em .82em 1em; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255,255,255,.045) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23aeb6c2' stroke-width='1.8'/%3E%3C/svg%3E") right 14px center/12px no-repeat;
  color: var(--ink); font: 500 .95rem var(--fb); cursor: pointer; }
.est-row select:focus { border-color: var(--eblue); box-shadow: 0 0 0 3px rgba(61,139,255,.22); outline: none; }
.est-row select option { background: var(--graphite); color: var(--ink); }
.disc { font-size: .74rem; color: var(--ink3); line-height: 1.6; max-width: 68ch; }

/* equity calculator (loan transfer) */
.eq-grid { display: grid; gap: 30px; align-items: start; }
@media (min-width: 1000px) { .eq-grid { grid-template-columns: 1fr 1.05fr; } }
.eq-out { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 8px; }
.eq-line { display: flex; justify-content: space-between; gap: 12px; font: 500 .92rem var(--fb); color: var(--ink2); }
.eq-line strong { font: 700 1.05rem var(--fd); color: var(--ink); }
.eq-verdict { border-radius: 14px; padding: 14px 16px; font: 600 .95rem var(--fb);
  background: rgba(61,139,255,.1); border: 1px solid rgba(61,139,255,.3); color: var(--ink); }
.eq-verdict.pos { background: rgba(45,212,167,.1); border-color: rgba(45,212,167,.36); }
.eq-verdict.neg { background: rgba(245,165,36,.1); border-color: rgba(245,165,36,.36); }

/* eligibility checker */
.elig { display: grid; gap: 14px; }
.elig-q { display: grid; gap: 8px; }
.elig-q span { font: 600 .85rem var(--fb); color: var(--ink2); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line2); border-radius: var(--pill); background: rgba(255,255,255,.04);
  color: var(--ink2); font: 600 .85rem var(--fb); padding: .55em 1.2em; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, transform .2s var(--easeO); }
.chip:hover { transform: translateY(-1px); }
.chip.on { background: rgba(61,139,255,.18); border-color: var(--eblue); color: #fff; }
.elig-res { border-radius: 14px; padding: 15px 17px; font: 600 .95rem var(--fb);
  border: 1px solid var(--line); color: var(--ink2); }
.elig-res.ok { background: rgba(45,212,167,.1); border-color: rgba(45,212,167,.4); color: var(--ink); }
.elig-res.no { background: rgba(245,165,36,.09); border-color: rgba(245,165,36,.34); color: var(--ink); }

/* chooser (home) */
.choose { display: grid; gap: 16px; }
.choose-q { font: 700 1.05rem var(--fd); color: var(--ink); }
.choose-res { margin-top: 6px; }
.choose-res a { display: inline-flex; }

/* comparison table (sell) */
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 1.6em;
  border: 1px solid var(--line); border-radius: var(--rl); overflow: hidden; }
.cmp th, .cmp td { padding: 14px 18px; text-align: left; font: 500 .93rem var(--fb); color: var(--ink2); border-bottom: 1px solid var(--line); }
.cmp thead th { font: 700 .95rem var(--fd); color: var(--ink); background: var(--surface2); }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td:nth-child(2) { color: var(--ink); }
.cmp .ok-cell::before { content: '✓  '; color: var(--ok); font-weight: 700; }
.cmp .no-cell::before { content: '✕  '; color: var(--amber); font-weight: 700; }
@media (max-width: 700px) { .cmp th, .cmp td { padding: 11px 12px; font-size: .84rem; } }

/* timeline (steps-pro) */
.steps-pro { position: relative; }
.steps-pro::before { content: ''; position: absolute; left: 8%; right: 8%; top: 44px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(61,139,255,.4) 12% 88%, transparent); z-index: 0; }
@media (max-width: 760px) { .steps-pro::before { display: none; } }
.steps-pro .step { position: relative; z-index: 1; transition: transform .35s var(--easeO), border-color .3s, box-shadow .35s var(--easeO); }
.steps-pro .step:hover { border-color: rgba(61,139,255,.45); box-shadow: 0 0 0 1px rgba(61,139,255,.22), var(--sh2); }
.steps-pro .step-num { background: linear-gradient(92deg, var(--eblue), #7c6fd0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0; }

/* ============================================================
   CHROME — logo badge, reviews, language, glossary, photostrip
   ============================================================ */
.logo-badge { display: inline-flex; align-items: center; background: #fff; padding: 7px 12px;
  border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(16,20,28,.07); }
.hd-logo .logo-badge img { height: 32px; width: auto; display: block; }
.ft .logo-badge { padding: 9px 14px; }
.ft .logo-badge img { height: 44px; width: auto; display: block; }
@media (max-width: 700px) { .hd-logo .logo-badge img { height: 26px; } .hd-logo .logo-badge { padding: 6px 10px; border-radius: 10px; } }

.grev { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line2);
  border-radius: var(--pill); padding: .5em 1.1em; background: rgba(255,255,255,.03);
  font: 600 .85rem var(--fb); color: var(--ink); transition: border-color .25s, transform .25s var(--easeO); }
.grev:hover { border-color: rgba(245,165,36,.55); transform: translateY(-2px); }
.grev-stars { color: #f5b501; letter-spacing: 2px; font-size: .92rem; }
.grev small { color: var(--ink3); font-weight: 500; }

.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--line2);
  border-radius: var(--pill); color: var(--ink2); font: 600 .82rem var(--fb); padding: .5em 1em; cursor: pointer;
  transition: border-color .25s, color .25s; }
.lang-btn:hover { color: var(--ink); border-color: var(--eblue); }
.lang-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px; background: var(--graphite);
  border: 1px solid var(--line); border-radius: var(--r); padding: 6px; display: grid; z-index: 70;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: .28s var(--easeO); box-shadow: var(--sh2); }
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu button { display: flex; justify-content: space-between; gap: 12px; background: none; border: 0;
  color: var(--ink2); font: 500 .9rem var(--fb); padding: 9px 12px; border-radius: 9px; cursor: pointer; text-align: left; }
.lang-menu button:hover { background: rgba(61,139,255,.12); color: var(--ink); }
.lang-menu button.on { color: #fff; background: rgba(61,139,255,.2); }
.mnav .lang-inline { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.mnav .lang-inline button { border: 1px solid var(--line2); background: none; color: var(--ink2);
  border-radius: var(--pill); font: 600 .8rem var(--fb); padding: .5em 1em; cursor: pointer; }
.mnav .lang-inline button.on { border-color: var(--eblue); color: #fff; background: rgba(61,139,255,.2); }

/* glossary marker + popover */
.gl { position: relative; }
.gl-btn { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 3px;
  vertical-align: super; font: 700 .6rem/1 var(--fb); color: var(--eblue); background: rgba(61,139,255,.16);
  border: 1px solid rgba(61,139,255,.5); border-radius: 50%; cursor: pointer; padding: 0;
  transition: background .2s, transform .2s var(--easeO); }
.gl-btn:hover { background: rgba(61,139,255,.3); transform: scale(1.12); }
.gl-pop { display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: min(300px, calc(100vw - 28px)); background: var(--graphite2); border: 1px solid var(--line2); border-radius: 14px;
  padding: 13px 15px; z-index: 80; box-shadow: var(--sh2); white-space: normal; text-align: left; font-style: normal; }
.gl.open .gl-pop { display: block; animation: glpop .25s var(--easeO); }
@keyframes glpop { from { opacity: 0; transform: translateX(-50%) translateY(5px); } }
.gl-pop b { display: block; font: 700 .88rem var(--fd); color: var(--ink); margin-bottom: 4px; }
.gl-pop .gl-def { display: block; font: 400 .84rem/1.6 var(--fb); color: var(--ink2); font-style: normal; }
.gl-pop::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--line2); }

/* compact photo strip (deliveries page grid) */
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 2em; }
.wall-grid .ph { aspect-ratio: 4/3; }

/* owner portrait */
.owner-photo { background: #fff; border: 0; border-radius: 20px; overflow: clip;
  width: min(460px, 100%); min-height: 0; box-shadow: 0 24px 70px rgba(0,0,0,.45); margin-top: 1.6em; }
.owner-photo::before { display: none; }
.owner-photo img { position: static; width: 100%; height: auto; object-fit: contain; display: block; }
.owner-photo:not(.loaded) { aspect-ratio: 3/4; background: linear-gradient(160deg, #fff, #eef1f6); }
.owner-photo:not(.loaded) figcaption { color: #7a828f; }
.owner-photo.loaded figcaption { display: none; }

/* vehicle selector */
.veh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 2em auto 0; max-width: 940px; perspective: 1100px; }
.veh-grid .card { padding: 12px 12px 14px; }
.veh-grid .card h4 { font-size: .95rem; }
.veh-grid .card-img { aspect-ratio: 16/10; margin: -4px -4px 8px; min-height: 0; }
@media (max-width: 1023px) { .veh-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 700px) {
  .veh-grid { gap: 8px; margin-top: 1em; }
  .veh-grid .card { padding: 7px 7px 9px; border-radius: 14px; gap: 4px; }
  .veh-grid .card h4 { font-size: .78rem; line-height: 1.25; }
  .veh-grid .card-img { border-radius: 10px; margin: -2px -2px 5px; }
}

/* seller block */
.sell-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sell-card .o-ico { --acc: #3d8bff; margin-bottom: 2px; }
.sell-card:nth-child(2n) .o-ico { --acc: #f5a524; }
.sell-card:nth-child(3n) .o-ico { --acc: #aeb6c2; }
.sell-card h4 { font-size: 1.06rem; }
.sell-card p { color: var(--ink2); font-size: .93rem; line-height: 1.62; }
.ready { text-align: center; margin-top: clamp(40px, 7vh, 70px); }
.ready .cta-row { justify-content: center; margin-top: 1.5em; }

/* ============================================================
   FORM SHELL — focus header + trust rail
   ============================================================ */
body.formpage .hd-nav, body.formpage .hd-burger, body.formpage .nav-more { display: none !important; }
.fs-back { font: 600 .86rem var(--fb); color: var(--ink2); display: inline-flex; align-items: center; gap: 7px; }
.fs-back:hover { color: var(--ink); }
.fs-tel { margin-left: auto; font: 700 .95rem var(--fd); color: var(--ink); }
.fs-tel:hover { color: var(--eblue); }
.fs-wrap { display: grid; gap: 26px; align-items: start; padding-block: 4vh 10vh; }
@media (min-width: 1060px) { .fs-wrap { grid-template-columns: 1.25fr .75fr; } }
.fs-form { position: relative; }
.fs-rail { position: sticky; top: 90px; display: grid; gap: 14px; }
@media (max-width: 1059px) { .fs-rail { position: static; order: -1; } }
.fs-rail .card { gap: 8px; }
.fs-rail .fsr-k { font: 600 .7rem var(--fb); letter-spacing: .2em; text-transform: uppercase; color: var(--acc, var(--eblue)); }
.fs-rail p { font-size: .9rem; color: var(--ink2); }
.fs-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fs-strip .ph { aspect-ratio: 4/3; border-radius: 12px; min-height: 0; }
.fs-id { display: inline-flex; align-items: center; gap: 9px; font: 600 .72rem var(--fb); letter-spacing: .18em;
  text-transform: uppercase; color: var(--acc, var(--eblue)); border: 1px solid color-mix(in srgb, var(--acc, #3d8bff) 40%, transparent);
  border-radius: var(--pill); padding: .5em 1.1em; margin-bottom: 12px; }
.fs-resume { display: none; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: rgba(61,139,255,.1); border: 1px solid rgba(61,139,255,.35); border-radius: 14px;
  padding: 12px 16px; margin-bottom: 16px; font: 500 .9rem var(--fb); color: var(--ink); }
.fs-resume.show { display: flex; }
.fs-resume .btn { padding: .55em 1.2em; font-size: .82rem; }

/* ============================================================
   Misc & motion hygiene
   ============================================================ */
.rv { transition-duration: .8s; }
.band .band-form input { font-family: var(--fb); }
.in-short { border-left: 3px solid var(--eblue); padding: 10px 16px; margin-top: 1.2em;
  background: rgba(61,139,255,.06); border-radius: 0 12px 12px 0; font: 500 .95rem/1.65 var(--fb); color: var(--ink2); }
.in-short b { color: var(--ink); }
html.no-js .rv { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .stars-css, .dna-helix g, .dna-helix path { animation: none !important; }
}

/* ============================================================
   V9 additions — page-specific components
   ============================================================ */
/* DNA slot indirection: inline styles set --dx/--dy/--ds (desktop)
   and --mx/--my/--ms (phone); keyframes read --gx/--gy/--gs. */
.dna-card { --gx: var(--dx); --gy: var(--dy); --gs: var(--ds); }
@media (max-width: 760px) { .dna-card { --gx: var(--mx); --gy: var(--my); --gs: var(--ms); } }

/* film hero bits (V9 owns these now; gpa.css is not loaded) */
.hero-film video { opacity: 0; transition: opacity .8s var(--easeO); }
.hero-film.film-on video { opacity: 1; }
.hero-scrub-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font: 600 .68rem var(--fb); letter-spacing: .3em; text-transform: uppercase; color: rgba(244,246,250,.75);
  display: grid; justify-items: center; gap: 8px; z-index: 3; text-shadow: 0 1px 12px rgba(5,7,11,.8); }
.hero-scrub-hint > span:first-child { width: 1px; height: 44px; background: linear-gradient(var(--eblue), transparent); animation: drip 2s var(--easeIO) infinite; }
.hero-scroll span + span, .hero-scrub-hint span + span { width: auto; height: auto; background: none; animation: none; }
html.reduced .hero-load, html.reduced .hero-scrub-hint, html.no-js .hero-load, html.no-js .hero-scrub-hint { display: none; }
.scene-est { padding-top: clamp(80px, 12vh, 140px); }
.sell-kicker { color: var(--amber); }

/* six-service grid (home) */
.svc6-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.svc6-card { position: relative; display: grid; gap: 10px; align-content: start; }
.svc6-card .card-img { aspect-ratio: 16/9; min-height: 0; margin: -6px -6px 6px; }
.svc6-card .o-num { position: absolute; top: 18px; right: 20px; font-size: 1.7rem; z-index: 2; }
.svc6-card h3 { font-size: 1.25rem; }
.svc6-card p { color: var(--ink2); font-size: .94rem; line-height: 1.64; }
.svc6-card .cta-row { margin-top: 6px; gap: 10px; }
.svc6-card .btn { padding: .62em 1.35em; font-size: .84rem; }
.svc6-card:hover { border-color: color-mix(in srgb, var(--acc, #3d8bff) 45%, transparent); }

/* about service links */
.svc-links { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.svc-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; }
.svc-link h4 { font-size: 1.02rem; }
.svc-link .svc-go { color: var(--eblue); font-size: 1.2rem; transition: transform .3s var(--easeO); }
.svc-link:hover .svc-go { transform: translateX(6px); }

/* loan-transfer scenario cards */
.eq-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.eq-cards .card h4 { color: var(--eblue); }
.eq-cards .ticks li { font-size: .88rem; }

/* contact info column */
.contact-info { display: grid; gap: 12px; justify-items: start; align-content: start; }

/* footer legal name + small review badge */
.ft-legalname { opacity: .75; }
.grev-sm { padding: .4em .9em; font-size: .78rem; }

/* form-shell skeleton + autosave demo */
.skel { display: grid; gap: 14px; padding: 6px 0 2px; }
.skel-row { display: grid; gap: 7px; }
.skel-row i { display: block; width: 34%; height: 10px; border-radius: 6px; background: rgba(255,255,255,.10); }
.skel-row b { display: block; height: 42px; border-radius: 12px;
  background: linear-gradient(100deg, rgba(255,255,255,.05) 40%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 60%);
  background-size: 220% 100%; animation: skelsheen 2.2s linear infinite; }
@keyframes skelsheen { to { background-position: -120% 0; } }
html.reduced .skel-row b { animation: none; }
.fs-demo input { width: 100%; padding: .78em 1em; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(255,255,255,.045); color: var(--ink); font: 500 .92rem var(--fb); }
.fs-demo input:focus { border-color: var(--acc, var(--eblue)); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc, #3d8bff) 24%, transparent); }
.fs-demo + .fs-demo { margin-top: 8px; }
body.formpage .hd { display: flex; align-items: center; gap: 18px; }
body.formpage .fs-back { margin-left: 4px; }
body.formpage .dock { display: none; }
.fs-wrap h1.sec-h2 { margin: 6px 0 14px; }

/* RTL guard (Arabic) — text flows RTL, layout stays sane */
html[dir="rtl"] .in-short { border-left: 0; border-right: 3px solid var(--eblue); border-radius: 12px 0 0 12px; }
html[dir="rtl"] .hero-scroll, html[dir="rtl"] .hero-scrub-hint { direction: ltr; }

/* language menu on phones lives in the burger sheet */
@media (max-width: 1023px) { .hd .lang { display: none; } }
.mnav .lang-inline { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 4px 0 26px; }
.mnav .lang-inline button { border: 1px solid var(--line2); background: none; color: var(--ink2);
  border-radius: var(--pill); font: 600 .8rem var(--fb); padding: .5em 1em; cursor: pointer; }
.mnav .lang-inline button.on { border-color: var(--eblue); color: #fff; background: rgba(61,139,255,.2); }

/* tab hidden → hold the DNA choreography */
html.halt .dna-card { animation-play-state: paused !important; }

/* overflow hygiene: heroes clip their decorative layers */
.hero { overflow: clip; }

/* ============================================================
   OWNER VIDEO CORRECTIONS — 2026-08-01 review
   Each rule is tagged with its numbered correction.
   ============================================================ */

/* --- #12/#24/#26/#31/#35/#37 hero heading a little bigger on desktop.
       Owner: "just make the font size little big as it appear small in
       the desktop." Font size only — no taller sections, no re-layout.
       Phone sizing is deliberately untouched pending the mobile review. */
@media (min-width: 1024px) {
  :root { --h1: clamp(2.6rem, 5.9vw, 4.7rem); }
  .hero h1, .hero-pin h1 { letter-spacing: -.032em; }
}

/* --- #19 "End-to-End Auto Solutions / We Handle Everything" reads bigger --- */
@media (min-width: 1024px) {
  #endtoend .sec-h2 { font-size: clamp(2.1rem, 3.7vw, 3.2rem); }
  #endtoend .sec-rich { font-size: 1.06rem; max-width: 68ch; }
  #endtoend .kicker { font-size: .78rem; letter-spacing: .3em; }
}

/* --- #20 cursor-reactive star field behind End-to-End --- */
#endtoend { position: relative; isolation: isolate; }
#endtoend > .wrap { position: relative; z-index: 2; }
.sky-fx { position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: .95; }
html.reduced .sky-fx { display: none; }

/* --- #3 FAQ: questions beside the picture, not underneath --- */
.faq-split { display: grid; gap: 30px; align-items: start; }
@media (min-width: 1060px) {
  .faq-split { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 46px; }
  .faq-aside { position: sticky; top: 96px; }
}
.faq-aside .ph { margin-top: 18px; }
.faq-main .faq { margin-top: 0; }
.faq-all { margin-top: 20px; }
@media (min-width: 1060px) { .faq-all { text-align: left; } }

/* --- #23 "Next — Choose Monthly Payment" centred under the vehicle grid --- */
#vehicles .cta-row { display: flex; justify-content: center; }

/* --- #25/#28 seller panel: three long boxes, two items inside each --- */
.sell-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.sell-pair { display: grid; gap: 14px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--rl);
  background: linear-gradient(178deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  align-content: start; }
.sell-pair .sell-card { background: linear-gradient(178deg, var(--graphite), var(--graphite2));
  box-shadow: none; }
@media (max-width: 1023px) { .sell-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .sell-grid { grid-template-columns: 1fr; } }

/* --- #15 Our Core Services: scroll/swipe depth deck instead of a static grid --- */
.svc-deck { position: relative; height: 190svh; padding-block: 0; }
.svc-deck > .wrap.svc-stage { position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  overflow: clip; perspective: 1400px; }
.svc-deck .sec-h2, .svc-deck .kicker, .svc-deck .sec-rich { text-align: center; }
.svc-deck .sec-rich { max-width: 62ch; }
.svc-deck .svc6-grid { display: block; position: relative;
  width: min(560px, 84vw); height: min(560px, 74svh);
  transform-style: preserve-3d; margin: 0; max-width: none; }
.svc-deck .svc6-card { position: absolute; inset: 0; margin: auto; height: max-content;
  transition: none; will-change: transform, opacity; backface-visibility: hidden; }
.svc-deck .svc-dots { position: absolute; left: 50%; bottom: clamp(26px, 5vh, 54px);
  transform: translateX(-50%); display: flex; gap: 9px; z-index: 6; }
.svc-deck .svc-dots i { width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.24); transition: background .3s, transform .3s; }
.svc-deck .svc-dots i.on { background: var(--eblue); transform: scale(1.35); }
html.reduced .svc-deck { height: auto; }
html.reduced .svc-deck > .wrap.svc-stage { position: static; height: auto; overflow: visible; display: block; }
html.reduced .svc-deck .svc6-grid { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 20px; height: auto; }
html.reduced .svc-deck .svc6-card { position: static; transform: none; opacity: 1; }

/* --- #9/#10/#11 form shell --- */
.fsx { display: grid; gap: 18px; }
.fsx-top { display: flex; align-items: center; gap: 14px; }
.fsx-count { font: 600 .74rem var(--fb); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.fsx-bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.09); overflow: clip; }
.fsx-bar i { display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(92deg, var(--eblue), #7c6fd0); transition: width .35s var(--easeO); }
.fsx-body { display: grid; gap: 18px; min-height: 180px; align-content: start; }
.fx { display: grid; gap: 8px; }
.fx-lab { font: 600 .95rem/1.45 var(--fb); color: var(--ink); }
.fx-req { color: var(--amber); font-style: normal; }
.fx-note { font: 400 .92rem/1.6 var(--fb); color: var(--ink2); margin: 0; }
.fx-opts { display: grid; gap: 9px; }
.fx-opt { display: flex; align-items: center; gap: 10px; padding: .68em .9em;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03);
  font: 400 .93rem var(--fb); color: var(--ink); cursor: pointer;
  transition: border-color .2s, background .2s; }
.fx-opt:hover { border-color: rgba(61,139,255,.45); background: rgba(61,139,255,.06); }
.fx-opt input { accent-color: var(--eblue); }
.fsx-nav { display: flex; gap: 12px; justify-content: space-between; padding-top: 4px; }
.fsx-nav .btn[disabled] { opacity: .4; pointer-events: none; }
.fs-unavailable { font: 400 .92rem var(--fb); color: var(--ink3); }

/* ============================================================
   OWNER MOBILE CORRECTIONS — 2026-08-02/03 review (#40-#73)
   ============================================================ */

/* --- #43 nothing lifts, scales or slides on hover, anywhere --- */
.btn:hover { transform: none; box-shadow: 0 10px 34px var(--glowB); }
.chip:hover, .grev:hover, .dock-top:hover { transform: none; }
.ft-col a:hover { transform: none; }
.svc-link:hover .svc-go { transform: none; }
.ph:hover img, .rail-ph:hover, .proof-ph:hover, .gl-btn:hover { transform: none; }
.est-row input::-webkit-slider-thumb:hover { transform: none; }
.card, .o-card, .steps-pro .step { will-change: auto; }

/* --- #62 grid tracks must be allowed to shrink below image width.
       1fr is minmax(auto,1fr), so wide images blew the track out and
       pushed the right column off the phone screen. --- */
.veh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .veh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sell-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .sell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .sell-grid { grid-template-columns: minmax(0, 1fr); } }
.fs-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.veh-grid .card, .veh-grid .card-img, .veh-grid img { min-width: 0; max-width: 100%; }

/* --- #40 hero fills the phone screen, type and spacing opened to use it --- */
@media (max-width: 760px) {
  :root { --h1: clamp(2.5rem, 10.2vw, 3.5rem); }
  .hero-plain { min-height: 100svh; }
  .hero-plain .hero-in { height: 100svh; padding-block: 0; }
  .hero-top { margin-top: clamp(84px, 16svh, 150px); }
  .hero-bot { margin-bottom: clamp(56px, 10svh, 110px); }
  .hero-bot .hero-sub { margin-top: .35em; }
  .hero-bot .hero-cta { margin-top: 1.6em; display: flex; flex-wrap: wrap; gap: 12px; }
  .hero .kicker { margin-bottom: .5em; }
  .hero-video .hero-in { height: 100svh; }
  .hero-video .hero-top { margin-top: clamp(96px, 18svh, 170px); }
}

/* --- #41 the photo story must never sit on top of its own heading --- */
@media (max-width: 760px) {
  .dna-head { top: clamp(40px, 6svh, 74px); }
  .dna-field { transform: translateY(9svh); }
  .dna-card { width: min(70vw, 400px); }
}
.dna-head h2, .dna-head .kicker { text-shadow: 0 2px 18px rgba(4,7,13,.85); }

/* --- #48 kicker closer to Our Core Services --- */
#services .kicker { margin-bottom: .25em; }
#services .sec-h2 { margin-top: 0; }

/* --- #50 End-to-End: no white panel --- */
#endtoend.scene-light, #endtoend { background: transparent; }
#endtoend.scene-light .card { background: linear-gradient(178deg, var(--graphite), var(--graphite2));
  border-color: var(--line); }
#endtoend.scene-light, #endtoend.scene-light h2, #endtoend.scene-light h3,
#endtoend.scene-light p, #endtoend.scene-light li { color: var(--ink); }
#endtoend.scene-light .sec-rich, #endtoend.scene-light .disc { color: var(--ink2); }

/* --- #56 form headings fit on one line --- */
.fs-wrap h1.sec-h2 { font-size: clamp(1.5rem, 4.4vw, 2rem); line-height: 1.14; }
.fs-id { font-size: .68rem; }
@media (max-width: 760px) {
  .fs-wrap h1.sec-h2 { font-size: clamp(1.35rem, 6.4vw, 1.7rem); }
  .fs-wrap { padding-block: 2vh 6vh; }
}
.fs-wrap { grid-template-columns: minmax(0, 1fr) !important; }
.fs-what .card { max-width: 880px; margin-inline: auto; }

/* --- #58 required-field feedback --- */
.fx.is-missing .fx-lab { color: #ffb4b4; }
.fx.is-missing input, .fx.is-missing textarea, .fx.is-missing select,
.fx.is-missing .fx-opts { outline: 1px solid rgba(255,120,120,.65); outline-offset: 3px; border-radius: 12px; }
.fsx-err { margin: 0; font: 600 .86rem var(--fb); color: #ffb4b4; }

/* #65 now lives in proto.js as the single fail-open card reveal (#84). */

/* --- #49 Our Core Services: one full-screen panel per service --- */
.svc-panels { position: relative; }
.svc-panels .svc-stage { position: sticky; top: 0; height: 100svh; overflow: clip;
  display: block; padding: 0; max-width: none; width: 100%; }
.svc-panels .svc-head { position: absolute; left: 0; right: 0; top: clamp(74px, 11svh, 130px);
  z-index: 5; text-align: center; padding: 0 6vw; pointer-events: none; }
.svc-panels .svc6-grid { display: block; position: absolute; inset: 0; margin: 0; max-width: none; }
.svc-panels .svc6-card { position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  padding: clamp(96px, 16svh, 190px) 7vw clamp(80px, 12svh, 140px);
  background: none; border: 0; box-shadow: none; border-radius: 0;
  will-change: transform, opacity; }
.svc-panels .svc6-card > * { max-width: 720px; }
.svc-panels .svc6-card h3 { font-size: clamp(2rem, 6.4vw, 3.4rem); line-height: 1.05; margin-bottom: .3em; }
.svc-panels .svc6-card p { font-size: clamp(1rem, 2.1vw, 1.16rem); color: var(--ink2); }
.svc-panels .svc6-card .card-img { display: none; }
.svc-panels .svc-num { position: absolute; right: clamp(14px, 5vw, 84px); bottom: clamp(48px, 9svh, 120px);
  font: 800 clamp(6rem, 20vw, 15rem) var(--fd); line-height: .8; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(120,170,255,.30);
  pointer-events: none; z-index: 0; }
.svc-panels .svc-rule { position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(180deg, rgba(120,170,255,.10) 0 1px, transparent 1px 14px);
  opacity: .45; pointer-events: none; }
.svc-panels .svc-dots { position: absolute; right: clamp(10px, 2.4vw, 26px); top: 50%;
  transform: translateY(-50%); display: grid; gap: 10px; z-index: 6; }
.svc-panels .svc-dots i { width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.26); transition: background .3s, transform .3s; }
.svc-panels .svc-dots i.on { background: var(--eblue); transform: scale(1.5); }
html.reduced .svc-panels { height: auto !important; }
html.reduced .svc-panels .svc-stage { position: static; height: auto; overflow: visible; }
html.reduced .svc-panels .svc6-grid { display: grid; position: static;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 20px; }
html.reduced .svc-panels .svc6-card { position: static; opacity: 1; transform: none;
  padding: 26px 24px; text-align: left; align-items: flex-start; }

/* --- #46 first-visit language chooser --- */
.lang-modal { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center;
  background: rgba(4,6,11,.78); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .45s var(--easeO); }
.lang-modal.on { opacity: 1; pointer-events: auto; }
.lang-box { width: min(460px, 90vw); padding: clamp(24px, 4vw, 38px);
  background: linear-gradient(178deg, var(--graphite), var(--graphite2));
  border: 1px solid var(--line); border-radius: var(--rl); box-shadow: var(--sh2);
  text-align: center; }
.lang-box h2 { font-size: clamp(1.3rem, 4vw, 1.7rem); margin-bottom: .2em; }
.lang-box p { color: var(--ink2); font-size: .92rem; margin-bottom: 1.2em; }
.lang-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-bottom: 1.3em; }
.lang-list button { padding: .72em .6em; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,.04); color: var(--ink); font: 500 .92rem var(--fb); cursor: pointer;
  transition: border-color .2s, background .2s; }
.lang-list button:hover { border-color: rgba(61,139,255,.5); background: rgba(61,139,255,.08); }
.lang-list button.on { border-color: var(--eblue); background: rgba(61,139,255,.16); }

/* --- #70 contact details in the hero space --- */
.contact-quick { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 1.2em; }
.contact-quick .contact-line { font: 600 1rem var(--fb); color: var(--ink); }

/* --- #52 close the gap between "See all questions" and
       "Get Approved & Drive Faster" (owner, 2026-08-03) --- */
.scene-faq { padding-bottom: clamp(28px, 4vh, 54px); }
#getstarted { padding-top: clamp(28px, 4vh, 54px); }
.faq-all { margin-top: 16px; margin-bottom: 0; }

/* ============================================================
   ROUND 4 — desktop1 + mobile1 corrections (#74–#91), 2026-08-03
   ============================================================ */

/* --- #84 single fail-open card entrance (JS adds/removes the classes) --- */
.stk-pre { opacity: 0; transform: translateY(26px); }
.stk-in { opacity: 1 !important; transform: none !important;
  transition: opacity .65s var(--easeO), transform .65s var(--easeO); }
html.reduced .stk-pre { opacity: 1; transform: none; }

/* --- #74/#86/#91 hero owns the whole first screen, on every viewport.
       Centered composition: title, then subtitle right under it — no more
       screen-corner split with a void in the middle. Film heroes exempt. --- */
.hero-plain { min-height: 100svh; }
.hero-plain .hero-in { height: 100svh; padding-block: 0;
  display: flex; flex-direction: column; justify-content: center; }
.hero-plain .hero-top { margin-top: 0; }
.hero-plain .hero-bot { margin-top: clamp(20px, 3.4svh, 40px); margin-bottom: 0; max-width: 720px; }
.hero-plain .hero-bot .hero-sub { margin-top: 0; }
@media (min-width: 1024px) {
  :root { --h1: clamp(3rem, 6.1vw, 5.1rem); }
  .hero-plain .hero-sub { font-size: 1.1rem; max-width: 62ch; }
}
@media (max-width: 760px) {
  .hero-plain .hero-top { margin-top: 0; }
  .hero-plain .hero-bot { margin-top: clamp(16px, 2.6svh, 30px); margin-bottom: 0; }
}

/* --- #75/#87 settled photo story becomes a drifting wall --- */
.dna-wall { position: absolute; left: 0; right: 0;
  top: clamp(110px, 16svh, 190px); bottom: 0; z-index: 3;
  overflow: hidden; opacity: 0; pointer-events: none;
  transition: opacity .8s var(--easeO); }
.dna.wall-on .dna-wall { opacity: 1; }
.dna.wall-on .dna-card { opacity: 0 !important; transition: opacity .45s var(--easeO); }
.dna-wall-track { display: flex; height: 100%; width: max-content;
  animation: dnadrift 46s linear infinite; }
@keyframes dnadrift { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.dna-wall-half { display: grid; grid-template-rows: repeat(3, 1fr); grid-auto-flow: column;
  gap: clamp(8px, 1.2vw, 16px); padding: clamp(8px, 1.2vw, 16px); height: 100%; }
.dna-tile { width: clamp(150px, 16vw, 250px); border-radius: 14px; overflow: hidden;
  background: linear-gradient(155deg, #171d29, #10131c 60%, #1c1712);
  border: 1px solid rgba(255,255,255,.10); }
.dna-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .dna-tile { width: clamp(112px, 30vw, 150px); }
  .dna-wall { top: clamp(96px, 14svh, 150px); }
  .dna-cta { bottom: clamp(16px, 2.6svh, 34px); }        /* #87 button further down */
}
html.reduced .dna-wall-track { animation: none; }

/* --- #78/#88 services intro is its own clean block; panels own the stage --- */
.svc-intro { padding-block: clamp(60px, 9vh, 110px) clamp(30px, 5vh, 60px); }
.svc-intro .wrap { text-align: center; }
.svc-intro .kicker { margin-bottom: .3em; }
.svc-intro .sec-rich { max-width: 62ch; margin-inline: auto; }
.svc-intro .disc { max-width: 58ch; margin-inline: auto; }
.svc-panels .svc6-card { padding: clamp(70px, 9svh, 120px) 7vw clamp(80px, 12svh, 140px); }

/* --- #79/#80 form header: photo + greeting, like the live site --- */
.fs-hi { display: grid; justify-items: center; gap: 10px; text-align: center;
  margin-bottom: 18px; }
.fs-hi-photo { width: 86px; height: 86px; border-radius: 50%; display: block;
  background: #ffffff center/cover no-repeat;   /* owner: white behind the portrait */
  background-color: #ffffff;
  border: 3px solid rgba(255,255,255,.85); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.fs-hi-line { font: 700 clamp(1.25rem, 4.6vw, 1.6rem) var(--fd); color: var(--ink); margin: 0; }

/* --- #81 image option tiles (vehicle types etc.) --- */
.fx-opts-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 560px) { .fx-opts-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.fx-opt-img { flex-direction: column; align-items: stretch; text-align: center;
  padding: 10px 10px 12px; gap: 8px; display: flex; }
/* The owner's vehicle photos are 4:3 cut-outs on white — show them whole
   (contain, never cover) so no bumper or roofline is cropped away. */
.fx-opt-img .fx-pic { display: block; aspect-ratio: 4/3; border-radius: 10px;
  background-color: #fff; background-size: contain; background-repeat: no-repeat;
  background-position: center; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.fx-opt-img:hover .fx-pic { transform: scale(1.035); }
.fx-opt-img:has(input:checked) .fx-pic { transform: scale(1.045); }
.fx-opt-img > span { font-weight: 600; font-size: .95rem; }
.fx-opt-img input { position: absolute; opacity: 0; pointer-events: none; }
.fx-opt-img:has(input:checked) { border-color: var(--eblue);
  background: rgba(61,139,255,.14); box-shadow: 0 0 0 1px var(--eblue); }

/* --- #89 form-page header: nothing wraps mid-text on the phone --- */
.fs-back, .fs-tel { white-space: nowrap; }
@media (max-width: 760px) {
  .hd .fs-back { font-size: .78rem; }
  .hd .fs-tel { font-size: .82rem; }
}

/* --- #82b About Us: bio text sits beside the photo --- */
@media (min-width: 1024px) {
  #bio .wrap { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
    column-gap: clamp(30px, 4vw, 60px); align-items: center; }
  #bio .wrap > .kicker, #bio .wrap > .sec-h2 { grid-column: 1 / -1; }
  #bio .wrap > figure, #bio .wrap > .media-grid { grid-column: 1; grid-row: span 8; }
  #bio .wrap > p, #bio .wrap > .sec-rich, #bio .wrap > ul, #bio .wrap > .cta-row { grid-column: 2; }
}

/* --- #77 merge section seams: every sectional background starts and ends
       on the page base colour, and the metal band loses its rule lines --- */
.scene-metal { border-block: 0;
  background: linear-gradient(180deg, var(--obsidian), var(--obsidian2) 22% 78%, var(--obsidian)); }
.band { background:
  radial-gradient(70% 90% at 50% 110%, rgba(30,94,255,.28), transparent 60%),
  linear-gradient(180deg, var(--obsidian), var(--obsidian2) 45%, var(--obsidian)); }
.dna { background:
  radial-gradient(60% 50% at 82% 18%, rgba(75,59,143,.26), transparent 60%),
  radial-gradient(70% 55% at 12% 82%, rgba(18,48,94,.4), transparent 62%),
  linear-gradient(178deg, var(--obsidian), #0b0e15 55%, var(--obsidian)); }
.scene-est { background: linear-gradient(180deg, var(--obsidian), transparent 30%); }

/* ============================================================
   ROUND 5 — website2 + mobile2 corrections (#92–#104), 2026-08-03
   ============================================================ */

/* --- #94 "Get Approved & Drive Faster": subtitle and button centred --- */
#getstarted .band-in > p { margin-inline: auto; text-align: center; }
#getstarted .cta-row { display: flex; justify-content: center; }

/* --- #95 form photo: bigger, hair uncropped (desktop AND phone) --- */
.fs-hi-photo { width: 128px; height: 128px; background-position: center top; }
@media (max-width: 760px) { .fs-hi-photo { width: 116px; height: 116px; } }

/* --- #98 mobile heroes: spread out, occupy the screen (desktop untouched) --- */
@media (max-width: 760px) {
  .hero-plain .hero-in { justify-content: flex-start; }
  .hero-plain .hero-top { margin-top: clamp(90px, 14svh, 140px); }
  .hero-plain .kicker { margin-bottom: 1.1em; }
  .hero-plain .hero-bot { margin-top: auto; margin-bottom: clamp(48px, 9svh, 90px); }
  .hero-plain .hero-bot .hero-sub { margin-top: 0; }
  .hero-plain .hero-bot .hero-cta { margin-top: 2em; }
  .hero-plain .hero-bot .grev { margin-top: .5em; }
  .hero-plain h1 { margin-top: .15em; }
  .hero-plain .in-short { margin-top: 1.4em; }
}

/* --- #99 mobile section gaps: tighter, no dead bands between sections --- */
@media (max-width: 760px) {
  .scene { padding-block: clamp(38px, 6svh, 60px); }
  .scene-est { padding-top: clamp(44px, 7svh, 70px); }
  .scene-faq { padding-bottom: clamp(22px, 3.4svh, 40px); }
  #getstarted { padding-block: clamp(26px, 4svh, 46px) clamp(34px, 5svh, 56px); }
  #endtoend { padding-block: clamp(38px, 6svh, 60px); }
}

/* --- #100 mobile alignment: CTA rows centred, no left-stuck buttons --- */
@media (max-width: 760px) {
  .scene .cta-row { display: flex; justify-content: center; flex-wrap: wrap; }
  .scene .cta-row .btn { margin-inline: 0; }
  .est-actions, .eq-actions { display: flex; justify-content: center; }
}

/* --- #103 seams: soften every tinted band so no boundary line survives.
       Center-weighted fades replace hard-edged gradient stops. --- */
.scene-alt { background: radial-gradient(120% 90% at 50% 50%, rgba(21,26,35,.5), transparent 78%); }
.scene-metal { background: radial-gradient(130% 100% at 50% 45%, var(--obsidian2), var(--obsidian) 85%); }
.scene-est { background: radial-gradient(120% 90% at 50% 40%, rgba(13,16,22,.7), transparent 80%); }
.dna { background:
  radial-gradient(60% 50% at 82% 18%, rgba(75,59,143,.22), transparent 62%),
  radial-gradient(70% 55% at 12% 82%, rgba(18,48,94,.34), transparent 64%),
  radial-gradient(140% 110% at 50% 50%, #0b0e15, var(--obsidian) 88%); }
.band { background:
  radial-gradient(70% 90% at 50% 110%, rgba(30,94,255,.24), transparent 62%),
  radial-gradient(130% 100% at 50% 50%, var(--obsidian2), var(--obsidian) 88%); }

/* --- round 5b: real upload control for the photo ID --- */
.fx-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; cursor: pointer; }
.fx-file input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fx-file-btn { display: inline-block; padding: .66em 1.4em; border-radius: var(--pill);
  border: 1px solid var(--line2); background: rgba(255,255,255,.05);
  font: 600 .9rem var(--fb); color: var(--ink); }
.fx-file:hover .fx-file-btn { border-color: rgba(61,139,255,.55); background: rgba(61,139,255,.08); }
.fx-file-name { font: 500 .85rem var(--fb); color: var(--eblue); word-break: break-all; }

/* --- round 5b: smoothness --- */
.hero-seq { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the film-grain overlay and the header blur both force full-screen repaints
   on phones — the two biggest scroll costs found in the audit */
@media (max-width: 1023px) {
  .grain { display: none; }
  body.scrolled .hd { backdrop-filter: none; background: rgba(10,12,17,.96); }
}

/* ============================================================
   ROUND 6 — "smoothest on earth" pass
   Law: nothing paints or lays out on the main thread mid-scroll.
   ============================================================ */

/* Cross-document View Transitions: page-to-page navigation becomes one
   compositor-driven fade instead of a white flash. One line, huge feel. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* Off-screen sections skip layout AND paint entirely until approached —
   the browser renders a fraction of the page per frame. */
.scene-faq, #getstarted, .ft {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* Isolate the heavy animated scenes so their per-frame transforms can never
   trigger layout outside their own box. */
.dna-field, .svc-panels .svc6-grid { contain: layout style paint; }

/* The helix SVG's dash/drift animations repaint a viewport-sized layer
   continuously — static image on phones, imperceptible loss. */
@media (max-width: 1023px) {
  .dna.play .dna-helix g, .dna.play .dna-helix path { animation: none; }
}

/* Hint the compositor about the two scrub canvases. */
.hero-seq, .dna-card { will-change: transform; }

/* --- cinematic services section: fail-open fallbacks --- */
html.reduced .svc, html.no-js .svc { height: auto !important; }
html.reduced .svc-stage, html.no-js .svc-stage { position: static; height: auto; display: block; }
html.reduced .svc-slide, html.no-js .svc-slide {
  position: static; opacity: 1; visibility: visible; padding: 48px min(7vw, 110px); }
html.reduced .svc-inter, html.no-js .svc-inter { position: static; padding: 40px 8vw; }

/* --- #94 done right: inside any centred band, capped-width text blocks
       centre as BLOCKS, not just their text. The old fix targeted a
       .band-in wrapper that does not exist in this markup. --- */
.band .wrap > .sec-rich, .band .wrap > p,
.band .wrap > .cta-row, .band .wrap > .disc,
.ready > .sec-rich, .ready > p {
  margin-inline: auto;
}

/* #116: a capped-width paragraph inside a centred block must centre as a
   BLOCK. .sec-rich caps at 68ch with no side margins, so it sat flush left
   — measured 187px off centre under "Ready to find your next car?". */

/* #115: service panels now carry two or three buttons. */
.svc-cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
@media (max-width: 560px) { .svc-cta .btn { flex: 1 1 100%; text-align: center; } }

/* #122 (owner mobile6): on the one LIGHT service panel the ghost buttons were
   near-white text on a near-white background — invisible. .svc-light recolours
   the heading, kicker and description but was never told about buttons, so the
   two added in #115 vanished while the filled blue one stayed readable. */
.svc-slide.svc-light .btn-ghost {
  color: var(--inkD);
  border-color: rgba(16, 20, 28, .22);
  background: rgba(16, 20, 28, .04);
}
.svc-slide.svc-light .btn-ghost:hover {
  border-color: rgba(30, 94, 255, .55);
  background: rgba(30, 94, 255, .08);
}

/* --- form question sub-lines (live-site descriptions) --- */
.fx-desc { display: block; font: 400 .92rem/1.5 var(--fb); color: var(--ink2); margin-top: 2px; }

/* --- submitted state --- */
.fsx-done { text-align: center; display: grid; gap: 14px; padding: 30px 0 10px; }
.fsx-done h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
.fsx-ref { font-size: .84rem; letter-spacing: .04em; color: rgba(226,232,246,.62); }
.fsx-ref b { color: var(--eblue); letter-spacing: .08em; }

/* ============================================================
   MOBILE3 corrections — 2026-08-04
   ============================================================ */

/* The pinned six-service scene must behave EXACTLY as on desktop —
   the phone override used to flatten it into a static list. */
@media (max-width: 1023px) {
  .svc-stage { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; align-items: center; }
  .svc-inter { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 8vw; }
  .svc-slide { position: absolute; inset: 0; display: grid; align-items: center;
    padding: 0 7vw; opacity: 0; visibility: hidden; }
  .svc-copy { max-width: none; }
  .svc-slide h3 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .svc-desc { font-size: 1rem; max-width: 38ch; }
  .svc-index { font-size: clamp(5rem, 26vw, 9rem); }
  .svc-progress { bottom: clamp(18px, 4svh, 36px); }
}

/* Mobile menu: list starts below the header and scrolls, so Home is
   always reachable (it used to be centred and pushed off-screen). */
.mnav { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mnav nav { padding: clamp(96px, 15svh, 150px) 0 clamp(40px, 8svh, 80px); min-height: 100%;
  align-content: start; }
.mnav a { padding: .42em; font-size: clamp(1.25rem, 5.4vw, 1.7rem); }


/* ============================================================
   #124/#125 WHAT WE OFFER — photographic panels
   Replaces the pinned 700vh cross-fading scene. THE EFFECT: the photo is
   locked to the screen and each panel is a moving window over it, so the
   words ride up while the picture stays still and a hard edge sweeps
   between services. clip-path makes the panel the containing block for
   the position:fixed photo. No scroll driver — which is also why the
   shaking in #121 cannot come back here.
   ============================================================ */
.ofr-intro { text-align: center; padding-block: clamp(56px,11svh,130px) clamp(30px,6svh,64px); }
.ofr-intro .sec-rich { max-width: 46ch; margin-inline: auto; }

.ofr { position: relative; min-height: 100svh; display: grid; align-items: center;
  clip-path: inset(0); }
/* the whole photograph, never cropped, on a blurred bed of itself so the
   frame is still edge to edge — every face and banner stays in view */
.ofr-blur { position: fixed; inset: 0; z-index: 0; background-image: var(--photo);
  background-size: cover; background-position: center;
  filter: blur(26px) brightness(.40) saturate(.9); transform: scale(1.16); }
.ofr-pic { position: fixed; inset: 0; z-index: 1; background-image: var(--photo);
  background-repeat: no-repeat; background-size: auto 100%; background-position: right center; }
.ofr-r .ofr-pic { background-position: left center; }
.ofr-scrim { position: fixed; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(6,9,16,.96) 0%, rgba(6,9,16,.92) 24%,
    rgba(6,9,16,.72) 42%, rgba(6,9,16,.10) 56%, rgba(6,9,16,0) 66%); }
.ofr-r .ofr-scrim { background: linear-gradient(270deg, rgba(6,9,16,.96) 0%,
  rgba(6,9,16,.92) 24%, rgba(6,9,16,.72) 42%, rgba(6,9,16,.10) 56%, rgba(6,9,16,0) 66%); }

.ofr-in { position: relative; z-index: 3; width: min(1240px,100%); margin: 0 auto;
  padding: 10svh clamp(22px,5vw,72px); }
.ofr-copy { max-width: 30rem; }
.ofr-r .ofr-copy { margin-left: auto; }
.ofr-kick { font: 600 .72rem/1 var(--fb); letter-spacing: .26em; text-transform: uppercase;
  color: var(--eblue); margin: 0 0 1.1em; }
.ofr h3 { font: 700 clamp(2.3rem,6.6vw,4.6rem)/1.02 var(--fd); margin: 0 0 .3em;
  letter-spacing: -.03em; color: #f4f6fa; }
.ofr-desc { margin: 0 0 1.8em; color: #dfe6f2; font-size: clamp(1rem,1.9vw,1.13rem);
  line-height: 1.62; text-wrap: pretty; }
.ofr-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ofr-more { display: inline-flex; align-items: center; gap: .5em; color: #c9d6ea;
  text-decoration: none; font: 600 .92rem/1 var(--fb); padding: .5em 0;
  border-bottom: 1px solid rgba(255,255,255,.22); transition: color .3s, border-color .3s; }
.ofr-more:hover { color: #fff; border-color: var(--eblue); }
.ofr-more svg { width: 15px; height: 15px; transition: transform .45s var(--easeO); }
.ofr-more:hover svg { transform: translateX(4px); }
.ofr-no { position: absolute; right: clamp(16px,3vw,44px); bottom: clamp(14px,3svh,34px);
  z-index: 3; font: 700 clamp(3rem,9vw,7rem)/1 var(--fd); color: transparent;
  -webkit-text-stroke: 1.4px rgba(255,255,255,.18); pointer-events: none; user-select: none; }

@media (max-width: 900px) {
  /* PHONE. Two things learned from the owner's screen recordings:

     1. The picture is sized and placed in FIXED PIXELS, never percentages of
        the screen height. A phone's address bar slides away as you swipe,
        which changes that height — with percentages the picture visibly grew
        and shrank mid-swipe. Pixels cannot be affected by it. It is drawn
        tall enough to still cover once the bar is gone.
     2. No blur filter. A full-screen blur must be redrawn every frame while
        scrolling, and that is what made the page judder.

     Each photo carries its own crop so the banner lands in the clear upper
     half, above where the words begin. */
  .ofr { align-items: end; }
  .ofr-blur { display: none; }
  .ofr-pic { background-color: #070b13;
    background-size: var(--msize,100%) auto !important;
    background-position: var(--mox,0px) var(--moy,0px) !important; }
  .ofr-scrim { background: linear-gradient(180deg, rgba(6,9,16,0) 0%, rgba(6,9,16,.08) 48%,
      rgba(6,9,16,.60) 63%, rgba(6,9,16,.93) 75%, rgba(6,9,16,.97) 100%) !important; }
  .ofr-in { align-self: end; width: 100%; padding: 0 clamp(20px,6vw,34px) 5svh; }
  .ofr-copy, .ofr-r .ofr-copy { max-width: none; margin: 0; }
  .ofr h3 { font-size: clamp(1.85rem,7.2vw,2.4rem); margin-bottom: .22em; }
  .ofr-desc { font-size: .95rem; line-height: 1.52; margin-bottom: 1.1em; }
  .ofr-kick { margin-bottom: .7em; }
  .ofr-cta .btn { padding: .8em 1.45em; font-size: .88rem; }
  .ofr-no { display: none; }
}