*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video { max-width: 100%; }
:root {
--blue: #3a9bd5;
--green: #4caf7d;
--amber: #dc9a3c;
--amber-light: #f0b862;
--dark: #000000;
--dark2: #080808;
--dark3: #101010;
--card: #0a0a0a;
--card2: #111111;
--border: rgba(255,255,255,0.07);
--border2: rgba(255,255,255,0.12);
--text: #e8e8f0;
--text-soft: #b8b8c0;
--muted: #82828a;
}
html { scroll-behavior: auto; background: var(--dark); }
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html.lenis.lenis-stopped { overflow: hidden; }
body { font-family: 'Inter', sans-serif; background: var(--dark); color: var(--text); }
button { font-family: inherit; }
/* ═══════════════════════════════════════════
PAGE AMBIENT GRADIENT — one continuous colour canvas.
Sections sit transparently on top (same approach as Apple / Linear / Vercel).
═══════════════════════════════════════════ */
#page-clip {
overflow-x: clip;
background:
radial-gradient(ellipse 100% 38% at 12% 36%, #061910 0%, transparent 42%),
linear-gradient(180deg, #000000 0%, #000000 100%);
}
/* All sections are transparent — colour comes from #page-clip above */
.compare-section,
.support-section,
.life-section,
.faq-section,
.apply-section { background: transparent !important; }
/* Trust strip — continues the light Earnings zone */
.trust-strip { background: #f2ede2 !important; }
/* ═══════════════════════════════════════════
GLOBAL CARD SPOTLIGHT
Radial glow follows cursor via --mx/--my CSS vars (set by JS)
═══════════════════════════════════════════ */
.hero-offer-card,
.hm-card,
.result-card,
.benefit-card,
.people-card {
position: relative;
}
.hero-offer-card::before,
.hm-card::before,
.result-card::before,
.benefit-card::before,
.people-card::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
rgba(76,175,125,0.13), transparent 65%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
z-index: 1;
}
.hero-offer-card:hover::before,
.hm-card:hover::before,
.result-card:hover::before,
.benefit-card:hover::before,
.people-card:hover::before { opacity: 1; }
/* Card content stays above spotlight layer */
.hero-offer-card > *,
.hm-card > *,
.result-card > *,
.benefit-card > * { position: relative; z-index: 2; }
/* people-card has overflow:hidden with photo — only text children need z-index */
.people-card .people-info { position: relative; z-index: 2; }
/* ═══════════════════════════════════════════
TOP BAR
═══════════════════════════════════════════ */
.topbar { background: var(--dark); border-bottom: 1px solid rgba(255,255,255,0.04); padding: 7px 0; font-size: 11px; animation: topbarIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s both; }
@keyframes topbarIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.topbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; color: rgba(106,106,138,0.6); }
.topbar-inner i { color: var(--green); margin-right: 4px; font-size: 10px; }
.topbar-phone { margin-left: auto; color: rgba(232,232,240,0.75); font-weight: 600; text-decoration: none; font-size: 12px; transition: color 0.2s; }
.topbar-phone:hover { color: var(--green); }
/* ═══════════════════════════════════════════
NAV
═══════════════════════════════════════════ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 8px 0; transition: top 0.4s cubic-bezier(0.22,1,0.36,1), background 0.4s, backdrop-filter 0.4s, border-color 0.4s; transform: translateZ(0); will-change: transform; backface-visibility: hidden; }
/* Entrance now driven by a one-shot GSAP timeline (script.js, "NAV ENTRANCE")
so the nav can resolve as the LAST layer of the Hero choreography (after
the headline) instead of this keyframe's fixed 0.15s delay — kept unused
rather than deleted in case anything still references it. */
@keyframes navIn { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
/* Static pre-JS baseline for the nav entrance — .hero-fx's sibling for the
nav (nav isn't part of Hero itself, so it gets its own class), same
reasoning: script.js loads near the end of body, so this guards against a
flash of the unrevealed nav before the JS timeline sets its real start state. */
.nav-fx { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.nav-fx { opacity: 1 !important; transform: none !important; filter: none !important; }
}
.nav.scrolled { top: 0; background: rgba(7,7,15,0.88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 28px; }
.logo-img { height: 96px; width: 123.5px; display: block; transition: height 0.3s, width 0.3s; }
.nav.scrolled .logo-img { height: 72px; width: 92.6px; }
.nav-links { display: flex; gap: 28px; list-style: none; margin-left: auto; }
/* Padding + matching negative margin cancel out at rest, so the capsule that
appears on hover/active never shifts the link's resting text position. */
.nav-links a {
position: relative;
display: inline-flex; align-items: center;
padding: 7px 13px; margin: -7px -13px;
border-radius: 11px;
border: 1px solid transparent;
background: transparent;
color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
transition: color 200ms cubic-bezier(0.4,0,0.2,1), background 200ms cubic-bezier(0.4,0,0.2,1),
border-color 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.4,0,0.2,1);
}
.nav-links a:hover {
color: #fff;
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.10);
transform: translateY(-1px);
}
/* Active section — same visual family as hover, quieter, no lift (it's a resting
state, not an interaction), plus one tiny KLG accent line under the label. */
.nav-links a.nav-active {
color: rgba(255,255,255,0.88);
background: rgba(255,255,255,0.035);
border-color: rgba(255,255,255,0.07);
}
.nav-links a.nav-active::after {
content: '';
position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%);
width: 12px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--green), var(--blue));
opacity: 0.6;
transition: width 200ms cubic-bezier(0.4,0,0.2,1), opacity 200ms cubic-bezier(0.4,0,0.2,1);
}
/* Hovering the already-active item strengthens the existing capsule rather
than stacking the plain hover effect (no extra lift, no second glow). */
.nav-links a.nav-active:hover {
color: #fff;
background: rgba(255,255,255,0.075);
border-color: rgba(255,255,255,0.13);
transform: none;
}
.nav-links a.nav-active:hover::after { width: 14px; opacity: 0.85; }
.nav-phone { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: color 200ms cubic-bezier(0.4,0,0.2,1); white-space: nowrap; }
.nav-phone:hover { color: rgba(255,255,255,0.92); }
.nav-phone-icon { position: relative; display: inline-flex; }
.nav-phone-icon::after {
content: '';
position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
width: 0; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, var(--green), var(--blue));
opacity: 0;
transition: width 220ms cubic-bezier(0.4,0,0.2,1), opacity 220ms cubic-bezier(0.4,0,0.2,1);
}
.nav-phone:hover .nav-phone-icon::after { width: 10px; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
.nav-links a { transition: color 150ms, background 150ms, border-color 150ms; }
.nav-links a:hover, .nav-links a.nav-active:hover { transform: none; }
}
.btn-nav { background: transparent; border: 1px solid rgba(255,255,255,0.28); color: #fff; padding: 9px 21px; border-radius: 20px; text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap; transition: background 0.2s, border-color 0.2s; }
.btn-nav:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.45); }
@keyframes navPulse {
0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(76,175,125,0); }
70% { box-shadow: 0 0 0 6px rgba(76,175,125,0.5), 0 0 20px rgba(76,175,125,0.4); }
85% { box-shadow: 0 0 0 10px rgba(76,175,125,0.0); }
}
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; margin-left: auto; }
.burger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.3s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; background: rgba(7,7,15,0.98); backdrop-filter: blur(20px); z-index: 190; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; visibility: hidden; }
.mobile-menu.open { opacity: 1; pointer-events: auto; visibility: visible; }
/* min-height + flex-center (not padding) so every link clears the 44px
touch-target guideline regardless of font-size — .mm-phone runs smaller
text than the rest and padding sized for the 26px links wouldn't carry
over correctly. Container gap dropped 20->10px to compensate for the
larger boxes, while staying above the 8px minimum tap-target spacing. */
.mm-link { font-size: 26px; font-weight: 700; color: var(--text); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.mm-link:hover { color: var(--green); }
.mm-phone { font-size: 18px; color: var(--green); }
/* Component-consistency fix: this used to be a one-off .btn-primary (green,
different from every other CTA on the site) — now reuses the same
klg-cta system as the desktop nav/hero CTAs. Only the spacing is a
local override; sizing/color come entirely from klg-cta/klg-cta--dark. */
.mm-cta { margin-top: 12px; }
/* ═══════════════════════════════════════════
HERO
═══════════════════════════════════════════ */
.hero { min-height: 100svh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 140px calc((100vw - 1280px)/2 + 40px) 80px; gap: 60px; background: linear-gradient(180deg, #10103e 0%, #0c0c2c 22%, #08081a 50%, #07070f 75%, #020208 100%); }
/* Opacity/scale entrance now driven by one coordinated GSAP timeline (script.js)
instead of this CSS keyframe, so it doesn't race the scroll-linked parallax
tween below for control of the same transform/opacity. */
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 42%; filter: saturate(0.84) brightness(0.90); will-change: transform; }
.hero-overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(5,6,10,0.80) 0%, rgba(5,6,10,0.0) 16%),
linear-gradient(0deg, rgba(5,6,10,0.55) 0%, rgba(5,6,10,0.0) 22%),
radial-gradient(ellipse 80% 70% at 18% 58%, rgba(76,175,125,0.10) 0%, transparent 62%),
linear-gradient(108deg, rgba(7,7,15,0.94) 0%, rgba(7,7,15,0.80) 45%, rgba(7,7,15,0.42) 72%, rgba(7,7,15,0.32) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 580px; flex-shrink: 0; }
/* ── Hero entrance animations ── */
.ha-up { opacity: 0; animation: haUp 0.70s cubic-bezier(0.22,1,0.36,1) both; }
.ha-right { opacity: 0; animation: haRight 0.70s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes haUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes haRight { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
/* Replaces .ha-up for the Hero's own coordinated GSAP entrance timeline (script.js) —
just the pre-JS-safe hidden baseline; the actual reveal (opacity/y/blur, staggered
per phase) is driven entirely by GSAP so background + content can be sequenced
as one choreography instead of independent per-element CSS delays. */
.hero-fx { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.ha-up, .ha-right, .hero-fx { animation: none !important; opacity: 1 !important; }
.hero-offer-card { animation: none !important; transition: none !important; opacity: 1 !important; }
.hoc-num { animation: none !important; transition: none !important; opacity: 1 !important; }
}
/* Hiring badge */
.hero-hiring-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(76,175,125,0.10); border: 1px solid rgba(76,175,125,0.28); color: var(--green); font-size: 10.5px; font-weight: 700; padding: 7px 15px; border-radius: 100px; margin-bottom: 36px; letter-spacing: 0.8px; text-transform: uppercase; }
.badge-dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.5)} }
/* PRIMARY: 10% offer card */
.hero-offer-card {
background: linear-gradient(145deg, rgba(8,24,16,0.84) 0%, rgba(5,10,8,0.93) 100%);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(76,175,125,0.20);
border-radius: 24px; padding: 26px 36px 24px; margin-bottom: 32px; display: inline-block;
box-shadow: inset 0 1px 0 rgba(76,175,125,0.16), inset 0 0 0 1px rgba(76,175,125,0.04), 0 0 80px rgba(76,175,125,0.06), 0 14px 42px rgba(0,0,0,0.30);
animation: haRight 0.70s cubic-bezier(0.22,1,0.36,1) 0.24s both, cardBreath 4.8s ease-in-out 1.5s infinite;
transition: box-shadow 600ms ease-out, border-color 500ms ease-out, transform 600ms cubic-bezier(0.25,0,0,1);
transform-origin: center center;
overflow: hidden;
position: relative;
cursor: pointer;
}
/* All card content above photo layer */
.hero-offer-card > *:not(.hoc-photo) { position: relative; z-index: 2; }
.hero-offer-card:hover {
border-color: rgba(76,175,125,0.34);
box-shadow: inset 0 1px 0 rgba(76,175,125,0.24), inset 0 0 0 1px rgba(76,175,125,0.07), 0 0 110px rgba(76,175,125,0.10), 0 24px 60px rgba(0,0,0,0.40);
}
.hero-offer-card:hover .hoc-num {
filter: brightness(1.16) drop-shadow(0 0 16px rgba(76,175,125,0.36));
}
@keyframes cardBreath {
0%,100% { box-shadow: inset 0 1px 0 rgba(76,175,125,0.16), inset 0 0 0 1px rgba(76,175,125,0.04), 0 0 80px rgba(76,175,125,0.06), 0 14px 42px rgba(0,0,0,0.30); }
50% { box-shadow: inset 0 1px 0 rgba(76,175,125,0.20), inset 0 0 0 1px rgba(76,175,125,0.06), 0 0 120px rgba(76,175,125,0.10), 0 14px 42px rgba(0,0,0,0.30); }
}
.hoc-label { font-size: 9.5px; font-weight: 700; letter-spacing: 3.5px; text-transform: uppercase; color: var(--green); margin-bottom: 10px; opacity: 0.65; }
.hoc-main { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.hoc-only { font-size: 20px; font-weight: 600; color: rgba(255,255,255,0.28); letter-spacing: 3px; text-transform: uppercase; align-self: center; }
.hoc-num { font-size: 120px; font-weight: 900; letter-spacing: -5px; background: linear-gradient(140deg, #8ff5c0 0%, #4caf7d 55%, #3a9bd5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 0.88; animation: hocNumIn 0.7s cubic-bezier(0.22,1,0.36,1) 0.55s both; transition: filter 500ms ease-out; }
@keyframes hocNumIn { from{opacity:0;transform:scale(0.84)} to{opacity:1;transform:scale(1)} }
.hoc-sub { font-size: 18px; font-weight: 800; color: rgba(255,255,255,0.88); letter-spacing: 5px; text-transform: uppercase; margin-top: 8px; }
.hoc-divider { height: 1px; background: rgba(76,175,125,0.18); margin: 16px 0; }
.hoc-earn { display: flex; align-items: baseline; gap: 10px; }
.hoc-earn-num { font-size: 34px; font-weight: 900; color: #fff; letter-spacing: -1.5px; line-height: 1; }
.hoc-earn-plus { font-size: 18px; font-weight: 700; color: var(--green); vertical-align: super; }
.hoc-earn-label { font-size: 11px; font-weight: 600; color: rgba(180,180,215,0.55); text-transform: uppercase; letter-spacing: 0.6px; }
.hoc-includes { font-size: 11.5px; color: rgba(255,255,255,0.50); font-weight: 600; margin-top: 10px; letter-spacing: 0.5px; }
.hoc-nofees { font-size: 12.5px; font-weight: 700; color: var(--green); margin-top: 10px; letter-spacing: 0.3px; opacity: 0.92; }
/* Headline */
.hero-title { font-size: clamp(48px, 5.6vw, 82px); font-weight: 900; line-height: 1.12; letter-spacing: -3.5px; margin-bottom: 34px; color: #f0f0fa; }
/* Masked line-level reveal: each visual line sits in its own overflow-hidden
window; the line itself starts pushed fully below it (static CSS baseline,
not JS-set, so there's never a frame of unmasked text) and GSAP animates it
up into view. yPercent is relative to the line's own box, so this scales
correctly across the clamp()'d font-size without separate breakpoint tuning. */
.htl-mask { display: block; overflow: hidden; }
.htl-line { display: block; transform: translateY(100%); will-change: transform; }
.hero-title.hero-title-settled .htl-line { transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
.htl-line { transform: none !important; }
}
.gradient-text {
background: linear-gradient(135deg, var(--amber-light) 0%, var(--amber) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
/* Sub-headline */
.hero-sub { font-size: 17px; line-height: 1.70; color: rgba(215,215,240,0.82); margin-bottom: 22px; max-width: 480px; font-weight: 400; }
.hero-sub strong { color: rgba(255,255,255,0.96); font-weight: 700; }
/* CTAs */
.hero-btns { display: flex; flex-direction: row; align-items: center; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.hero-btns a { width: auto; text-align: center; justify-content: center; box-sizing: border-box; }
.hero-btns .btn-ghost { font-size: 14px; padding: 13px 22px; }
.hero-btns--stacked { flex-direction: row; align-items: center; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.btn-text-link { display: inline-flex; align-items: center; gap: 7px; color: rgba(220,220,235,0.62); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: color 0.2s; }
.btn-text-link:hover { color: rgba(255,255,255,0.88); }
.btn-hero-cta {
font-size: 17px; padding: 19px 39px; border-radius: 16px;
background: linear-gradient(145deg, var(--amber-light) 0%, var(--amber) 100%);
color: #181005;
box-shadow: 0 12px 46px rgba(220,154,60,0.55), inset 0 1px 0 rgba(255,255,255,0.22);
position: relative; overflow: hidden;
transition: transform 180ms cubic-bezier(0.25,0,0,1), box-shadow 200ms ease-out;
}
.btn-hero-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 58px rgba(220,154,60,0.70), inset 0 1px 0 rgba(255,255,255,0.22); }
.ha-arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
.btn-hero-cta:hover .ha-arrow { transform: translateX(5px); }
/* Idle shine — applied by JS after 15s of inactivity */
@keyframes btnShineSweep {
0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { transform: translateX(240%) skewX(-18deg); opacity: 0; }
}
.btn-hero-cta.btn-idle-shine::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0.16) 50%, transparent 80%);
animation: btnShineSweep 1.6s cubic-bezier(0.4,0,0.2,1) forwards;
pointer-events: none;
}
@keyframes btnHeroPulse {
0% { transform: scale(1); box-shadow: 0 10px 40px rgba(76,175,125,0.50), inset 0 1px 0 rgba(255,255,255,0.18); }
40% { transform: scale(1.02); box-shadow: 0 12px 52px rgba(76,175,125,0.62), 0 0 0 7px rgba(76,175,125,0.07), inset 0 1px 0 rgba(255,255,255,0.20); }
100% { transform: scale(1); box-shadow: 0 10px 40px rgba(76,175,125,0.50), inset 0 1px 0 rgba(255,255,255,0.18); }
}
@keyframes btnHeroPulseAmber {
0% { transform: scale(1); box-shadow: 0 12px 46px rgba(220,154,60,0.55), inset 0 1px 0 rgba(255,255,255,0.22); }
40% { transform: scale(1.02); box-shadow: 0 14px 56px rgba(220,154,60,0.68), 0 0 0 7px rgba(220,154,60,0.10), inset 0 1px 0 rgba(255,255,255,0.24); }
100% { transform: scale(1); box-shadow: 0 12px 46px rgba(220,154,60,0.55), inset 0 1px 0 rgba(255,255,255,0.22); }
}
.btn-hero-cta.btn-pulse { animation: btnHeroPulseAmber 1.1s cubic-bezier(0.34,1,0.56,1) forwards; }
.btn-owner-apply.btn-pulse { animation: btnHeroPulse 1.1s cubic-bezier(0.34,1,0.56,1) forwards; }
.calc-apply-btn.ek-conc-cta.btn-pulse,
.res-cta .res-cta-btn.btn-pulse { animation: btnHeroPulseAmber 1.1s cubic-bezier(0.34,1,0.56,1) forwards; }
@keyframes ekArrowNudge {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(6px); }
}
.ek-conc-cta.btn-pulse .ek-conc-arrow { animation: ekArrowNudge 0.7s cubic-bezier(0.34,1,0.56,1); }
/* ══════════════════════════════════════════════
KLG CTA — unified Apply Now component (approved "B — Refined").
Used in: nav (compact), Hero (full + hero-cue), Earnings (light surface),
Results V2 (calm), Settlement Modal (calm). Off-white on dark / graphite
on light, Apply Now + 2 MIN + arrow, one green→blue accent line, no
yellow fill, no autonomous pulse/glow/sweep except the scoped Hero cue.
Sections after How It Works are untouched and keep the legacy .btn-*
classes/animations above — this component is intentionally separate.
══════════════════════════════════════════════ */
.klg-cta{
--h:58px; --radius:15px; --pad-x:26px; --fs:16px; --gap:15px;
position:relative;
display:inline-flex; align-items:center; gap:var(--gap);
height:var(--h); padding:0 var(--pad-x);
border-radius:var(--radius);
font-family:inherit; font-size:var(--fs); font-weight:600;
text-decoration:none; cursor:pointer; user-select:none;
border:1px solid transparent;
isolation:isolate;
-webkit-tap-highlight-color:transparent;
transition:
transform 320ms cubic-bezier(0.16,1,0.3,1),
box-shadow 320ms cubic-bezier(0.16,1,0.3,1),
background 320ms cubic-bezier(0.16,1,0.3,1),
border-color 320ms cubic-bezier(0.16,1,0.3,1);
}
.klg-cta:active{ transform:translateY(0) scale(0.985) !important; transition-duration:110ms; }
.klg-cta--dark{
background:#f3ede0; color:#1a1712;
border-color:rgba(255,255,255,0.10);
box-shadow:0 10px 28px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.6);
}
.klg-cta--dark:hover{
background:#fffdf8;
transform:translateY(-2px);
box-shadow:0 16px 38px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.75);
}
.klg-cta--light{
background:#1a1712; color:#f3ede0;
border-color:rgba(0,0,0,0.06);
box-shadow:0 10px 24px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.06);
}
.klg-cta--light:hover{
background:#242019;
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
}
.klg-cta:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(8,9,11,0.9), 0 0 0 4.5px rgba(220,154,60,0.75); }
.earnings-section .klg-cta:focus-visible{ box-shadow:0 0 0 2px #f2ede2, 0 0 0 4.5px rgba(220,154,60,0.85); }
.klg-cta-label{ white-space:nowrap; line-height:1; }
/* 2 MIN — explicit shade rather than plain opacity so it reads without squinting */
.klg-cta-micro{
white-space:nowrap; line-height:1;
font-size:10.5px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase;
}
.klg-cta--dark .klg-cta-micro{ color:rgba(26,23,18,0.68); }
.klg-cta--light .klg-cta-micro{ color:rgba(243,237,224,0.68); }
/* micro divider — short, low-opacity, not a full-height UI bar */
.klg-cta-div{ width:1px; height:14px; flex-shrink:0; background:currentColor; opacity:0.16; }
.klg-cta--light .klg-cta-div{ opacity:0.14; }
/* arrow zone — own breathing room, houses the KLG accent line */
.klg-cta-arrow{
position:relative; flex-shrink:0; margin-left:2px;
display:flex; flex-direction:column; align-items:center; justify-content:center;
width:32px; height:36px;
}
.klg-cta-arrow svg{ width:17px; height:17px; transition:transform 320ms cubic-bezier(0.16,1,0.3,1); }
.klg-cta:hover .klg-cta-arrow svg{ transform:translate(3px,-3px); }
/* KLG brand signature — ONE micro accent: green→blue line under the arrow */
.klg-cta-accent{
width:12px; height:2px; border-radius:2px; margin-top:5px;
background:linear-gradient(90deg, var(--green), var(--blue));
opacity:0.32;
transition: width 320ms cubic-bezier(0.16,1,0.3,1), opacity 320ms cubic-bezier(0.16,1,0.3,1);
}
.klg-cta--light .klg-cta-accent{ opacity:0.4; }
.klg-cta:hover .klg-cta-accent{ width:18px; opacity:0.88; }
/* compact — nav variant, no 2 MIN, same arrow/accent DNA at reduced scale */
.klg-cta--compact{ --h:44px; --radius:12px; --pad-x:18px; --fs:13.5px; --gap:9px; font-weight:700; }
.klg-cta--compact .klg-cta-arrow{ width:26px; height:30px; margin-left:1px; }
.klg-cta--compact .klg-cta-arrow svg{ width:14px; height:14px; }
.klg-cta--compact .klg-cta-accent{ width:10px; margin-top:4px; }
.klg-cta--compact:hover .klg-cta-accent{ width:15px; }
/* calm — Results/proof + Modal: same DNA, quieter physical emphasis */
.klg-cta--calm{ --h:52px; --radius:14px; --pad-x:23px; --fs:15px; }
/* Hero periodic cue — wakes the accent line + a soft arrow ring only, never the whole button */
@keyframes klgCueLine{ 0%,100%{ width:12px; opacity:0.32; } 50%{ width:19px; opacity:0.95; } }
@keyframes klgCueRing{ 0%,100%{ box-shadow:0 0 0 0 rgba(76,175,125,0); } 50%{ box-shadow:0 0 0 5px rgba(76,175,125,0.16); } }
.klg-cta--hero-cue.klg-cue-play .klg-cta-accent{ animation:klgCueLine 800ms cubic-bezier(0.4,0,0.2,1) 1; }
.klg-cta--hero-cue.klg-cue-play .klg-cta-arrow{ animation:klgCueRing 800ms cubic-bezier(0.4,0,0.2,1) 1; border-radius:50%; }
@media (prefers-reduced-motion: reduce){
.klg-cta, .klg-cta *{ transition:none !important; animation:none !important; }
.klg-cta:hover{ transform:none; }
}
@media (max-width:480px){
.klg-cta{
--h:48px; --radius:12px; --pad-x:14px; --gap:7px; --fs:13.5px;
}
.klg-cta--calm{ --h:44px; }
.klg-cta .klg-cta-arrow{ width:26px; height:28px; margin-left:0; }
.klg-cta .klg-cta-arrow svg{ width:14px; height:14px; }
.klg-cta .klg-cta-micro{ font-size:9.5px; letter-spacing:1px; }
/* Full-width mobile CTA contexts felt oversized next to their content.
Keep them easy to tap, but cap their visual width on small phones. */
.ks-detail-footer .klg-cta{ max-width:230px; margin-inline:auto; }
}
/* Dispatcher promise pill */
.hero-dispatcher {
display: inline-flex; align-items: center; gap: 14px;
padding: 13px 20px; margin-bottom: 28px;
background: rgba(76,175,125,0.07);
border: 1px solid rgba(76,175,125,0.20);
border-radius: 16px;
}
.hd-icon {
width: 38px; height: 38px; flex-shrink: 0;
border-radius: 10px;
background: rgba(76,175,125,0.14);
display: flex; align-items: center; justify-content: center;
color: var(--green); font-size: 15px;
}
.hd-text { display: flex; flex-direction: column; gap: 3px; }
.hd-main { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.88); }
.hd-sub { font-size: 10.5px; color: rgba(160,160,195,0.60); }
/* Social proof + urgency strip below CTA */
.hero-proof { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; flex-wrap: wrap; }
.hp-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(205,203,196,0.70); font-weight: 500; }
.hp-item i { color: var(--green); font-size: 11px; }
.hp-sep { width: 3px; height: 3px; background: rgba(255,255,255,0.18); border-radius: 50%; flex-shrink: 0; }
.hp-urgency { font-size: 12px; color: var(--green); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; opacity: 0.9; }
.hp-urgency i { font-size: 10px; }
/* Trust stat row */
.htr-program-tag {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--green);
margin-bottom: 10px;
opacity: 0.82;
}
.hero-trust-row {
display: flex; align-items: center; justify-content: space-between;
gap: 0; flex-wrap: wrap;
padding-top: 26px;
border-top: 1px solid rgba(255,255,255,0.07);
}
.htr-item { display: flex; flex-direction: column; gap: 3px; }
.htr-num { font-size: 19px; font-weight: 800; color: #ffffff; letter-spacing: -0.5px; line-height: 1; }
.htr-plus { font-size: 13px; font-weight: 700; color: var(--green); vertical-align: super; }
.htr-label { font-size: 9.5px; font-weight: 600; color: rgba(150,150,185,0.55); text-transform: uppercase; letter-spacing: 0.6px; }
.htr-div { width: 1px; height: 26px; background: rgba(255,255,255,0.09); flex-shrink: 0; }
/* Trailer icon items in hero */
.htr-trailer {
flex-direction: row; align-items: center; gap: 10px;
padding: 4px 8px; font-size: 12px; font-weight: 600;
color: rgba(255,255,255,0.58); letter-spacing: 0.3px;
transition: color 0.3s ease; cursor: pointer;
position: relative; overflow: hidden; border-radius: 6px;
}
.htr-trailer::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.18) 50%, transparent 75%);
transform: translateX(-150%) skewX(-15deg);
pointer-events: none;
}
@keyframes htrBeam {
0% { transform: translateX(-150%) skewX(-15deg); opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { transform: translateX(250%) skewX(-15deg); opacity: 0; }
}
.htr-trailer.htr-lit::after {
animation: htrBeam 1.4s ease-in-out forwards;
}
.htr-trailer.htr-lit {
color: #ffffff;
text-shadow: 0 0 12px rgba(255,255,255,0.55);
transition: color 0.25s ease, text-shadow 0.25s ease;
}
.htr-trailer.htr-lit .htr-icon {
color: var(--green);
filter: drop-shadow(0 0 6px rgba(76,175,125,0.90));
transition: color 0.25s ease, filter 0.25s ease;
}
.htr-icon {
width: 52px; height: 22px; flex-shrink: 0;
color: rgba(76,175,125,0.65);
transition: color 0.3s ease;
}
.htr-trailer:hover { color: rgba(255,255,255,0.75); }
.htr-trailer:hover .htr-icon { color: rgba(76,175,125,0.85); }
.htr-trailer .htr-label { font-size: 12px; font-weight: 600; color: inherit; text-transform: none; letter-spacing: 0.3px; }
/* Stat strip — below hero, replaces the old floating hero-right cards */
.stat-strip { background: #0a0b10; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 30px calc((100vw - 1280px)/2 + 40px); }
.stat-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.stat-item { display: flex; justify-content: center; text-decoration: none; flex: 1; min-width: 150px; }
.stat-item.reveal { transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.stat-item--1.reveal { transition-delay: 0s; }
.stat-item--2.reveal { transition-delay: 0.1s; }
.stat-item--3.reveal { transition-delay: 0.2s; }
.stat-item--static { cursor: default; }
.stat-inner { display: flex; flex-direction: column; gap: 4px; text-align: left; min-width: 170px; position: relative; padding-bottom: 10px; }
.stat-num { font-size: 26px; font-weight: 900; letter-spacing: -0.5px; color: var(--amber); line-height: 1.1; }
.stat-plus { font-size: 16px; font-weight: 700; vertical-align: super; }
.stat-label { font-size: 11.5px; font-weight: 600; color: #9a9ca3; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s ease; }
.stat-item:hover .stat-label { color: rgba(255,255,255,0.88); }
.stat-inner::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--amber); transition: width 0.25s ease; }
.stat-item:hover .stat-inner::after { width: 36px; }
.stat-div { width: 1px; height: 32px; background: rgba(255,255,255,0.11); flex-shrink: 0; align-self: center; }
@media (max-width: 900px) {
.stat-strip { padding: 26px 24px; }
.stat-div { display: none; }
.stat-item { min-width: 42%; }
.stat-inner { align-items: center; width: 100%; min-width: 0; text-align: center; }
.stat-inner::after { left: 50%; transform: translateX(-50%); }
/* Pair the two rate/terms metrics on row one, then give the strongest
outcome ($9,500+ weekly gross) the centered full-width closing row.
Desktop keeps the original source order because this is <=900px only. */
.stat-item--1 { order: 1; }
.stat-item--3 { order: 2; }
.stat-item--2 { order: 3; flex-basis: 100%; }
.stat-item--1.reveal { transition-delay: 0s; }
.stat-item--3.reveal { transition-delay: 0.1s; }
.stat-item--2.reveal { transition-delay: 0.2s; }
}
/* RIGHT side (unused since hero-right was removed from hero, kept to avoid breaking dependent rules) */
.hero-right { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; width: 380px; perspective: 1200px; }
/* Offer card in right column — full width, block */
.hero-right .hero-offer-card { display: block; width: 100%; margin-bottom: 0; }
/* Metrics */
.hero-metrics { display: flex; flex-direction: column; gap: 14px; perspective: 1200px; }
.hm-card { background: rgba(255,255,255,0.045); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1px solid rgba(255,255,255,0.10); border-radius: 22px; padding: 23px 27px; box-shadow: 0 8px 32px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08); transition: box-shadow 600ms cubic-bezier(0.25,0,0,1), border-color 500ms ease-out, background 500ms ease-out, transform 600ms cubic-bezier(0.25,0,0,1); transform-origin: center center; cursor: default; }
.hm-card--big { background: rgba(76,175,125,0.09); border-color: rgba(76,175,125,0.26); padding: 30px 32px; box-shadow: 0 12px 48px rgba(0,0,0,0.34), 0 0 60px rgba(76,175,125,0.07), inset 0 1px 0 rgba(76,175,125,0.18); margin-left: 40px; }
.hm-card:hover { border-color: rgba(255,255,255,0.20); box-shadow: 0 20px 56px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.13); }
.hm-card--big:hover { background: rgba(76,175,125,0.13); border-color: rgba(76,175,125,0.42); box-shadow: 0 24px 64px rgba(0,0,0,0.44), 0 0 90px rgba(76,175,125,0.14), inset 0 1px 0 rgba(76,175,125,0.28); }
.hm-card:hover .hm-num { text-shadow: 0 0 28px rgba(255,255,255,0.26); }
.hm-num { font-size: 46px; font-weight: 900; color: #fff; letter-spacing: -2px; line-height: 1; transition: text-shadow 500ms ease-out; }
.hm-num--md { font-size: 30px; font-weight: 900; color: #fff; letter-spacing: -0.5px; line-height: 1; }
.hm-plus { font-size: 28px; vertical-align: super; font-weight: 700; color: var(--green); }
.hm-label { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 7px; text-transform: uppercase; letter-spacing: 1px; }
.hm-micro { font-size: 9px; font-weight: 600; color: rgba(76,175,125,0.72); letter-spacing: 0.9px; text-transform: uppercase; opacity: 0; max-height: 0; overflow: hidden; margin-top: 0; transition: opacity 500ms ease-out, max-height 400ms ease-out, margin-top 350ms ease-out; }
.hm-card--big:hover .hm-micro { opacity: 1; max-height: 20px; margin-top: 7px; }
#hm-states {
cursor: pointer;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
#hm-states .hm-trailers-title {
font-size: 28px !important;
letter-spacing: -1px !important;
line-height: 1 !important;
transition: font-size 0.45s cubic-bezier(0.22,1,0.36,1),
letter-spacing 0.45s ease;
position: relative;
z-index: 2;
}
#hm-states:hover .hm-trailers-title {
font-size: 17px !important;
letter-spacing: -0.3px !important;
}
#hm-states:hover .hm-trailers-sub {
opacity: 1;
max-height: 30px;
margin-top: 8px;
}
.hm-trailers-sub {
font-size: 8px;
letter-spacing: 0.6px;
white-space: nowrap;
position: relative;
z-index: 2;
opacity: 1;
max-height: 30px;
margin-top: 8px;
}
/* Flying trailer sprites */
.hm-trailer-sprites {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
border-radius: inherit;
opacity: 0;
transition: opacity 0.5s ease;
}
#hm-states:hover .hm-trailer-sprites { opacity: 1; }
.hms-t {
position: absolute;
width: 56px;
color: rgba(76,175,125,0.25);
}
@keyframes hmsDrive1 {
from { transform: translateX(140%) translateY(0); }
to { transform: translateX(-160%) translateY(-3px); }
}
@keyframes hmsDrive2 {
from { transform: translateX(140%) translateY(0); }
to { transform: translateX(-160%) translateY(5px); }
}
@keyframes hmsDrive3 {
from { transform: translateX(140%) translateY(0); }
to { transform: translateX(-160%) translateY(-2px); }
}
.hms-t1 { top: 18%; animation: hmsDrive1 3.2s linear infinite; }
.hms-t2 { top: 46%; animation: hmsDrive2 4.4s linear 0.8s infinite; }
.hms-t3 { top: 70%; animation: hmsDrive3 2.8s linear 1.6s infinite; }
.hm-icon { font-size: 16px; color: var(--green); margin-bottom: 6px; }
.hm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* 10% banner */
.ten-banner { background: linear-gradient(135deg, #071a0e, #091a14, #07070f); border-top: 1px solid rgba(76,175,125,0.2); border-bottom: 1px solid rgba(76,175,125,0.2); padding: 32px 40px; }
.ten-banner-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.tb-big { font-size: 80px; font-weight: 900; line-height: 1; background: linear-gradient(135deg, var(--green), #6ee4a8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -4px; flex-shrink: 0; }
.tb-mid { flex: 1; }
.tb-main { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.tb-subs { display: flex; flex-wrap: wrap; gap: 14px; }
.tb-subs span { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.tb-subs i { color: var(--green); font-size: 10px; }
.ten-banner-cta { flex-shrink: 0; }
/* Buttons */
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: #fff; padding: 15px 28px; border-radius: 12px; text-decoration: none; font-size: 15px; font-weight: 700; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; box-shadow: 0 6px 24px rgba(76,175,125,0.35); border: none; cursor: pointer; font-family: inherit; justify-content: center; }
.btn-primary:hover { background: #3d9e6a; transform: translateY(-2px); box-shadow: 0 12px 36px rgba(76,175,125,0.45); }
.btn-primary.btn-hero-cta { background: linear-gradient(145deg, var(--amber-light) 0%, var(--amber) 100%); color: #181005; box-shadow: 0 10px 40px rgba(220,154,60,0.45), inset 0 1px 0 rgba(255,255,255,0.18); }
.btn-primary.btn-hero-cta:hover { background: linear-gradient(145deg, #f5c47a 0%, #e5a850 100%); box-shadow: 0 20px 58px rgba(220,154,60,0.70), inset 0 1px 0 rgba(255,255,255,0.22); }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.24); color: rgba(230,230,255,0.90); padding: 16px 28px; border-radius: 16px; text-decoration: none; font-size: 15px; font-weight: 600; transition: border-color 0.18s ease-out, background 0.18s ease-out, box-shadow 0.18s ease-out, transform 0.18s cubic-bezier(0.25,0,0,1); background: rgba(255,255,255,0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; overflow: hidden; }
.btn-ghost:hover { border-color: rgba(255,255,255,0.40); background: rgba(255,255,255,0.10); box-shadow: 0 4px 20px rgba(255,255,255,0.06); transform: translateY(-2px); color: #fff; }
@keyframes dollarRise {
0% { transform: translateY(0) scale(1); opacity: 0; }
10% { opacity: 0.6; }
75% { opacity: 0.25; }
100% { transform: translateY(-72px) scale(0.75); opacity: 0; }
}
.dollar-sign {
position: absolute; bottom: 6px;
font-size: 18px; font-weight: 800;
color: rgba(76,175,125,0.7);
pointer-events: none; user-select: none;
animation: dollarRise var(--dur, 3.2s) ease-out forwards;
z-index: 0;
}
.btn-block { display: block; width: 100%; text-align: center; }
.btn-lg { padding: 18px 32px; font-size: 16px; border-radius: 14px; }
/* ═══════════════════════════════════════════
BROKER TRUST STRIP
═══════════════════════════════════════════ */
.trust-strip { background: #f2ede2; border-bottom: 1px solid #e5ddc9; padding: 20px 40px 24px; }
.ts-label { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #8a8168; margin-bottom: 14px; }
/* Viewport clips the rail's scroll-driven horizontal drift (see script.js
BROKER STRIP block) so it can never create page-level horizontal overflow.
max-width keeps the whole assembly from sprawling edge-to-edge on very
wide screens. Centering happens here (flex + justify-content) rather than
margin:auto on the rail itself — margin:auto on a block wider than its
container resolves to 0/left-anchored when over-constrained (no visual
centering, all overflow dumped on one side), while justify-content:center
on the parent correctly splits an oversized flex child's overflow evenly
on both sides, which the "never expose an empty edge" travel-clamp in
script.js depends on. */
.broker-viewport { overflow: hidden; max-width: 1280px; margin: 0 auto; display: flex; justify-content: center; }
.ts-logos {
display: flex; align-items: center; flex-wrap: nowrap; flex-shrink: 0;
gap: 36px; width: max-content; padding: 0 10px;
will-change: transform;
}
.trust-strip.reveal { opacity: 1; transform: none; transition: none; }
.ts-logo-img { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 0 0 auto; opacity: 0; transform: translateY(10px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.trust-strip.visible .ts-logo-img { opacity: 0.62; transform: translateY(0); }
.trust-strip.visible .ts-logo-img:hover { opacity: 1; }
.trust-strip.visible .ts-logo-img:nth-child(1) { transition-delay: 0s; }
.trust-strip.visible .ts-logo-img:nth-child(2) { transition-delay: 0.14s; }
.trust-strip.visible .ts-logo-img:nth-child(3) { transition-delay: 0.28s; }
.trust-strip.visible .ts-logo-img:nth-child(4) { transition-delay: 0.42s; }
.trust-strip.visible .ts-logo-img:nth-child(5) { transition-delay: 0.56s; }
.trust-strip.visible .ts-logo-img:nth-child(6) { transition-delay: 0.7s; }
.trust-strip.visible .ts-logo-img:nth-child(7) { transition-delay: 0.84s; }
.trust-strip.visible .ts-logo-img:nth-child(8) { transition-delay: 0.98s; }
.trust-strip.visible .ts-logo-img:nth-child(9) { transition-delay: 1.12s; }
.trust-strip.visible .ts-logo-img:nth-child(10) { transition-delay: 1.26s; }
.trust-strip.visible .ts-logo-img:nth-child(11) { transition-delay: 1.4s; }
.trust-strip.visible .ts-logo-img:nth-child(12) { transition-delay: 1.54s; }
.ts-logo-img img { height: 30px; width: auto; max-width: 100%; filter: brightness(0) saturate(100%); }
.ts-logo-img--uber img { height: 22px; }
.ts-uber-sub { font-size: 7.5px; font-weight: 800; letter-spacing: 4px; color: #4a4536; text-transform: uppercase; }
.ts-logo-img--coyote img { filter: none; mix-blend-mode: multiply; height: 36px; }
.ts-logo-img--scotlynn img { height: 26px; }
.ts-logo-img--england img { height: 40px; }
.ts-logo-img--allenlund img { height: 44px; }
.ts-logo-img--iel img { height: 27px; }
/* Ultrawide proof row: the same nine currently confirmed broker marks,
given enough scale and spacing to read as an intentional trust band on
2400px+ canvases. No logos are duplicated and no unverified broker is
introduced merely to fill the available width. */
@media (min-width: 2400px) {
.trust-strip { padding: 28px 64px 34px; }
.ts-label { font-size: 11.5px; letter-spacing: 3px; margin-bottom: 20px; }
.broker-viewport { max-width: 1800px; }
.ts-logos { gap: 70px; padding: 0 18px; }
.ts-logo-img img { height: 38px; }
.ts-logo-img--uber img { height: 28px; }
.ts-uber-sub { font-size: 8px; letter-spacing: 4.5px; }
.ts-logo-img--coyote img { height: 46px; }
.ts-logo-img--scotlynn img { height: 34px; }
.ts-logo-img--england img { height: 50px; }
.ts-logo-img--allenlund img { height: 54px; }
.ts-logo-img--iel img { height: 34px; }
}
/* Equipment types row */
.ts-equip {
display: flex; align-items: center; justify-content: center;
gap: 0; margin-top: 18px;
border-top: 1px solid rgba(255,255,255,0.05); padding-top: 16px;
}
.ts-equip-item {
display: flex; align-items: center; gap: 10px;
padding: 6px 22px; font-size: 12px; font-weight: 600;
color: rgba(255,255,255,0.35); letter-spacing: 0.3px;
transition: color 0.25s ease, text-shadow 0.25s ease; cursor: pointer;
position: relative; overflow: hidden; border-radius: 6px;
}
.ts-equip-item::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.18) 50%, transparent 75%);
transform: translateX(-150%) skewX(-15deg);
pointer-events: none;
}
.ts-equip-item.ts-lit::after {
animation: htrBeam 1.4s ease-in-out forwards;
}
.ts-equip-item.ts-lit {
color: #ffffff;
text-shadow: 0 0 12px rgba(255,255,255,0.55);
}
.ts-equip-item.ts-lit .ts-icon {
color: #6ee4a0;
filter: drop-shadow(0 0 6px rgba(76,175,125,0.90));
}
.ts-equip-item:hover { color: rgba(255,255,255,0.75); }
.ts-icon {
width: 52px; height: 22px; flex-shrink: 0;
color: rgba(76,175,125,0.45);
transition: color 0.25s ease, filter 0.25s ease;
}
.ts-equip-item:hover .ts-icon { color: rgba(76,175,125,0.85); }
.ts-equip-div { width: 1px; height: 18px; background: rgba(255,255,255,0.07); flex-shrink: 0; }
/* ═══════════════════════════════════════════
SECTIONS COMMON
═══════════════════════════════════════════ */
.section { padding: 96px 0; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
@keyframes labelGlow {
0%, 100% {
text-shadow: 0 0 8px rgba(76,175,125,0.25), 0 0 20px rgba(76,175,125,0.10);
opacity: 0.70;
filter: brightness(0.9);
}
50% {
text-shadow: 0 0 16px rgba(76,175,125,0.80), 0 0 36px rgba(76,175,125,0.40), 0 0 60px rgba(76,175,125,0.15);
opacity: 1;
filter: brightness(1.15);
}
}
@keyframes labelGlowAmber {
0%, 100% {
text-shadow: 0 0 8px rgba(220,154,60,0.25), 0 0 20px rgba(220,154,60,0.10);
opacity: 0.70;
filter: brightness(0.9);
}
50% {
text-shadow: 0 0 16px rgba(220,154,60,0.80), 0 0 36px rgba(220,154,60,0.40), 0 0 60px rgba(220,154,60,0.15);
opacity: 1;
filter: brightness(1.15);
}
}
@keyframes labelLineGlow {
0%, 100% { opacity: 0.30; transform: scaleX(0.85); }
50% { opacity: 1; transform: scaleX(1); }
}
@keyframes gradientShimmer {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
}
.section-label {
font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
color: var(--green); margin-bottom: 12px;
display: inline-flex; align-items: center; gap: 8px;
animation: labelGlow 3s ease-in-out infinite;
}
.section-label::before {
content: ''; display: inline-block; width: 24px; height: 1px;
background: linear-gradient(90deg, transparent, #4caf7d);
flex-shrink: 0;
animation: labelLineGlow 3s ease-in-out infinite;
}
.section-label::after {
content: ''; display: inline-block; width: 24px; height: 1px;
background: linear-gradient(90deg, #4caf7d, transparent);
flex-shrink: 0;
animation: labelLineGlow 3s ease-in-out infinite;
}
.results-section .section-label {
color: var(--amber);
animation: none;
}
.results-section .section-label::before { background: linear-gradient(90deg, transparent, var(--amber)); animation: none; }
.results-section .section-label::after { background: linear-gradient(90deg, var(--amber), transparent); animation: none; }
.section-title { font-size: clamp(36px, 5.5vw, 68px); font-weight: 900; line-height: 1.06; letter-spacing: -2px; margin-bottom: 48px; color: #fff; }
.section-center { text-align: center; }
.section-center .section-title { margin-bottom: 16px; }
.section-desc { font-size: 17px; color: var(--muted); max-width: 460px; margin: 0 auto 52px; line-height: 1.65; }
.section-cta { text-align: center; margin-top: 48px; }
.reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1),
transform 0.85s cubic-bezier(0.22,1,0.36,1);
}
.section-title.reveal {
filter: blur(4px);
transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1),
transform 0.85s cubic-bezier(0.22,1,0.36,1),
filter 0.72s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity: 1; transform: none; filter: none; }
.reveal.visible.reveal-settled {
transform: none;
filter: none;
transition-property: opacity;
}
@media (max-width: 860px) {
.reveal { transform: translateY(14px); transition-duration: 0.65s; }
.section-title.reveal { filter: blur(2px); }
.section-title.reveal.visible { filter: none; }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}
/* ── Generic stagger utility ──
Add class="reveal" data-stagger to any container; children get
auto-indexed (--i) by script.js and fade+rise in sequence when
the container scrolls into view. Container itself doesn't animate. */
[data-stagger].reveal { opacity: 1; transform: none; filter: none; transition: none; }
[data-stagger] > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
transition-delay: calc(var(--i, 0) * 0.09s);
}
[data-stagger].reveal.visible > * { opacity: 1; transform: none; }
@media (max-width: 860px) {
[data-stagger] > * { transform: translateY(10px); transition-delay: calc(var(--i, 0) * 0.05s); }
}
@media (prefers-reduced-motion: reduce) {
[data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ─── Smooth scroll transitions ──────────────────────────────── */
/* 2px scroll progress bar at top of page */
#scroll-progress-bar {
position: fixed;
top: 0; left: 0;
height: 2px; width: 0%;
background: linear-gradient(to right, #4caf7d, #3a9bd5);
z-index: 10000;
pointer-events: none;
will-change: width;
transition: width 0.08s linear;
}
/* Viewport edge vignette — creates the "window" framing effect */
body::before {
content: '';
position: fixed;
inset: 0;
background:
linear-gradient(to bottom, rgba(0,0,0,0.13) 0%, transparent 6%),
linear-gradient(to top, rgba(0,0,0,0.13) 0%, transparent 6%);
pointer-events: none;
z-index: 9500;
}
/* CSS scroll-driven section entrance — Chrome 115+, silent elsewhere */
@supports (animation-timeline: view()) {
.section {
animation: secScrReveal linear both;
animation-timeline: view();
animation-range: entry 0% entry 14%;
}
@keyframes secScrReveal {
from { opacity: 0.82; }
to { opacity: 1; }
}
}
/* Subtle top shadow on every section so edges "peel" off the previous one */
.section { position: relative; }
.section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 80px;
background: linear-gradient(to bottom, rgba(3,3,9,0.28), transparent);
pointer-events: none;
z-index: 5;
}
/* Hero doesn't need the peel shadow */
.hero::before { display: none; }
/* Hero bottom — dissolves into the transparent page canvas below */
.hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0; height: 220px;
background: linear-gradient(to bottom, transparent, #07070f);
pointer-events: none; z-index: 4;
}
/* Sections need position:relative to host ::after overlays */
.hero, .results-section, .benefits-section, .compare-section,
.support-section, .life-section,
.earnings-section, .testi-section, .faq-section {
position: relative;
}
/* Replace the generic "peel" dark shadow with a taller, softer reveal
that blends each section INTO the ambient page gradient */
.section::before {
height: 160px;
background: linear-gradient(to bottom, rgba(6,6,13,0.55), transparent);
}
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.18s; }
.delay-3 { transition-delay: 0.30s; }
.delay-4 { transition-delay: 0.44s; }
.delay-5 { transition-delay: 0.58s; }
/* ═══════════════════════════════════════════
WORK WITH OWNER
═══════════════════════════════════════════ */
/* ── Owner Section ─────────────────────────────────────────────── */
.owner-section {
background: #f2ede2;
padding: 48px 0 0; position: relative; overflow: hidden;
}
/* Results hands off directly from dark to warm editorial ivory here.
The global .section::before peel shadow becomes a one-off 160px gray
gradient on this light surface, so remove it for the founder section only. */
.owner-section::before { display: none; }
.owner-photo-col {
background: transparent;
border-radius: 24px;
overflow: hidden;
}
/* Truck background ─────────────────────────────────────────────────────────
Static filter. Depth is created by lowered contrast + 0.5px blur so the
truck reads as behind the glass card and text column.
The sun-emergence and headlight effects live entirely in ::before / ::after
so the base image never animates.
─────────────────────────────────────────────────────────────────────────── */
.owner-truck-bg {
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
background: url('truck-bg.webp') center 55% / cover no-repeat;
filter: brightness(0.03) saturate(0.68) contrast(0.90) blur(0.5px);
pointer-events: none;
z-index: 0;
opacity: 0;
will-change: opacity;
transition: none;
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, black 12%, black 80%, transparent 100%);
mask-image:
linear-gradient(to bottom, transparent 0%, black 12%, black 80%, transparent 100%);
}
/* ── Layer 1: warm sunset atmosphere ─────────────────────────────────────
Radial gradient centered where sky meets the horizon behind the truck.
Transitions from 0 → 1 in 1.4s (the sun-emergence moment).
After truck-ambient class is added, it breathes very slowly.
Keyframe starts at opacity:1 so there is zero visual jump on class switch.
─────────────────────────────────────────────────────────────────────── */
.owner-truck-bg::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 65% 45% at 50% 38%,
rgba(255, 155, 48, 0.10) 0%,
transparent 68%
);
pointer-events: none;
opacity: 0;
will-change: opacity;
transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.owner-truck-bg.sun-out::after { opacity: 1; }
.owner-truck-bg.truck-ambient::after {
transition: none;
animation: truckAtmoBreath 7s ease-in-out infinite;
}
@keyframes truckAtmoBreath {
/* starts and ends at 1 — exactly where the reveal transition left off */
0%, 100% { opacity: 1.00; }
50% { opacity: 0.88; }
}
/* ── Layer 2: headlight glow + road reflection ───────────────────────────
Two warm-white ellipses simulating the headlights of the truck,
plus a faint warm strip on the road below.
Same 1.4s reveal transition and same 7s ambient loop as Layer 1
so both layers peak and dip in perfect sync.
Headlight brightness variation ≈ 2–3% perceived (opacity 0.80–1.00 on a
6.5% overlay = effective Δ of ~1.3% on the composited image).
─────────────────────────────────────────────────────────────────────── */
.owner-truck-bg::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 26% 13% at 40% 65%, rgba(255, 235, 148, 0.065) 0%, transparent 74%),
radial-gradient(ellipse 26% 13% at 60% 65%, rgba(255, 235, 148, 0.065) 0%, transparent 74%),
radial-gradient(ellipse 40% 8% at 50% 88%, rgba(255, 210, 100, 0.022) 0%, transparent 85%);
pointer-events: none;
opacity: 0;
will-change: opacity;
transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.owner-truck-bg.sun-out::before { opacity: 1; }
.owner-truck-bg.truck-ambient::before {
transition: none;
animation: truckLightsBreath 7s ease-in-out infinite;
}
@keyframes truckLightsBreath {
/* Headlights vary slightly more than the atmosphere above them.
Both peak at 1.0 simultaneously — the synchronized moment. */
0%, 100% { opacity: 1.00; }
50% { opacity: 0.80; }
}
/* ── Reduced motion ───────────────────────────────────────────────────────
Base image still fades in. Overlays appear instantly at full opacity.
All looping animations disabled.
─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.owner-truck-bg { transition: opacity 4.5s cubic-bezier(0.16, 1, 0.3, 1); }
.owner-truck-bg::before,
.owner-truck-bg::after { transition: none; }
.owner-truck-bg.sun-out::before,
.owner-truck-bg.sun-out::after { opacity: 1; }
.owner-truck-bg.truck-ambient::before,
.owner-truck-bg.truck-ambient::after { animation: none; opacity: 1; }
}
/* VP1 — Roman + Headline ────────────────────────────────────── */
.owner-vp1 {
display: flex;
flex-direction: column;
gap: 32px;
padding-bottom: 36px;
position: relative; z-index: 1;
}
/* ── Intro block ── */
.owner-intro { max-width: 720px; }
.owner-intro-quote-mark {
font-family: Georgia, 'Times New Roman', serif;
font-size: 48px;
line-height: 0.5;
color: rgba(47,125,86,0.35);
display: block;
margin-bottom: 6px;
}
.owner-intro-text {
font-family: 'Dancing Script', cursive;
font-size: 39px;
font-weight: 600;
color: rgba(22,20,9,0.88);
line-height: 1.35;
margin-top: 6px;
max-width: 620px;
padding-left: 18px;
border-left: 2px solid rgba(47,125,86,0.4);
}
@media (max-width: 768px) { .owner-intro-text { font-size: 30px; } }
/* ── Main two-column ── */
.owner-main-cols {
display: grid;
grid-template-columns: 350px 1fr;
gap: 40px;
align-items: start;
}
.owner-mobile-heading { display: none; }
/* ── Story column (right) ── */
.owner-story-col { display: flex; flex-direction: column; gap: 22px; position: relative; }
/* Constellation/map background */
.owner-map-bg {
position: absolute;
right: -40px; top: -20px;
width: 460px; height: 460px;
pointer-events: none; z-index: 0;
background:
radial-gradient(circle at 22% 28%, rgba(76,175,125,0.14) 0%, transparent 32%),
radial-gradient(circle at 72% 18%, rgba(76,175,125,0.09) 0%, transparent 26%),
radial-gradient(circle at 88% 55%, rgba(58,155,213,0.11) 0%, transparent 28%),
radial-gradient(circle at 55% 82%, rgba(76,175,125,0.07) 0%, transparent 22%),
radial-gradient(circle at 40% 50%, rgba(58,155,213,0.05) 0%, transparent 40%);
opacity: 0.85;
}
/* Story header block */
.owner-story-header { position: relative; z-index: 1; }
/* Static pre-JS baseline for the OWNER — ONE-SHOT ENTRANCE timeline (script.js).
Deliberately NOT applied to .section-label itself — it has its own infinite
labelGlow animation on opacity, which would fight a JS-driven opacity tween
on the same element (CSS animations win over inline styles) — this plain
wrapper carries the entrance fade instead, same pattern as .ek-eyebrow-fx. */
.owner-eyebrow-fx { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.owner-eyebrow-fx { opacity: 1 !important; transform: none !important; }
}
.owner-story-header .section-label {
margin-bottom: 12px;
color: #a3742f;
animation: labelGlowAmber 3s ease-in-out infinite;
}
.owner-story-header .section-label::before { background: linear-gradient(90deg, transparent, #a3742f); }
.owner-story-header .section-label::after { background: linear-gradient(90deg, #a3742f, transparent); }
.owner-story-header .owner-headline { margin-top: 0; }
.owner-story-header .owner-intro-text { max-width: 540px; }
/* ── Founder promises ── */
.owner-promises {
list-style: none;
margin: 28px 0 0;
padding: 0 0 0 20px;
border-left: 2px solid rgba(76,175,125,0.22);
display: flex;
flex-direction: column;
gap: 0;
}
.owner-promises li {
display: flex;
align-items: flex-start;
gap: 13px;
padding: 13px 0;
border-bottom: 1px solid rgba(22,20,9,0.08);
border-radius: 6px;
opacity: 0;
transform: translateY(11px);
transition: opacity 0.48s ease, transform 0.48s cubic-bezier(0.22,1,0.36,1);
transition-delay: calc(var(--i) * 0.10s);
}
.owner-promises li:last-child { border-bottom: none; }
/* .owner-in (JS-timed, see OWNER — ONE-SHOT ENTRANCE in script.js) replaces the old
.reveal.visible gate — resolves once and stays put, no ambient state after. */
.owner-story-header.owner-in .owner-promises li {
opacity: 1;
transform: translateY(0);
}
.owner-promises li i {
color: #2f7d56;
font-size: 13px;
margin-top: 3px;
flex-shrink: 0;
}
.owner-promises li span {
font-size: 18px;
color: rgba(22,20,9,0.82);
line-height: 1.55;
font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
.owner-promises li { opacity: 1 !important; transform: none !important; }
}
/* ── Story card ── */
.owner-story-card {
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.065);
border-radius: 20px;
padding: 32px 34px 36px;
position: relative;
overflow: hidden;
z-index: 1;
flex: 1;
}
.owner-story-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent 5%, rgba(76,175,125,0.38) 38%, rgba(58,155,213,0.26) 62%, transparent 95%);
}
.osc-eyebrow {
font-size: 14px;
font-weight: 700;
color: var(--green);
margin-bottom: 18px;
opacity: 0.88;
}
.osc-body { display: flex; flex-direction: column; gap: 13px; }
.osc-body p {
font-size: 15.5px;
color: rgba(210,225,218,0.78);
line-height: 1.70;
margin: 0;
}
.osc-close { font-size: 15px !important; color: rgba(190,208,200,0.68) !important; }
.osc-close strong { color: rgba(255,255,255,0.92); font-weight: 700; }
/* Icon row (replaces facts list) */
.osc-icons-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
text-align: center;
padding: 6px 0;
}
.osc-icon-item {
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.osc-icon-circle {
width: 46px; height: 46px;
border-radius: 50%;
border: 1px solid rgba(76,175,125,0.30);
background: rgba(76,175,125,0.08);
display: flex; align-items: center; justify-content: center;
font-size: 17px; color: var(--green);
}
.osc-icon-item span {
font-size: 12px; color: rgba(210,225,218,0.78); font-weight: 500; line-height: 1.4;
}
/* Story card reveal: slides from right */
.owner-story-card.reveal { transform: translateX(22px); transition-duration: 0.82s; }
.owner-story-card.reveal.visible { transform: translateX(0); }
/* ── Problem → Solution comparison block ── */
.osc-driver-line {
font-size: 14.5px;
color: rgba(200,218,210,0.72);
margin: 0 0 22px;
line-height: 1.6;
}
.osc-vs {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 16px;
align-items: start;
}
.osc-vs-col { display: flex; flex-direction: column; gap: 10px; }
.osc-vs-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(200,218,210,0.42);
margin-bottom: 4px;
}
.osc-vs-label--green { color: rgba(76,175,125,0.72); }
.osc-vs-list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 9px;
}
.osc-vs-list li {
font-size: 14px;
line-height: 1.45;
display: flex; align-items: flex-start; gap: 8px;
}
.osc-vs-list--pain li {
color: rgba(200,218,210,0.58);
}
.osc-vs-list--pain li::before {
content: '—';
color: rgba(200,218,210,0.28);
font-size: 12px;
flex-shrink: 0;
margin-top: 1px;
}
.osc-vs-list--solution li {
color: rgba(210,238,225,0.88);
}
.osc-vs-list--solution li::before {
content: '✓';
color: rgba(76,175,125,0.80);
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.osc-vs-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid rgba(76,175,125,0.28);
background: rgba(76,175,125,0.08);
color: rgba(76,175,125,0.72);
font-size: 13px;
flex-shrink: 0;
margin-top: 28px;
}
/* ── Pull-quote variant ── */
.osc-pull-quote {
position: relative;
margin-bottom: 22px;
padding: 18px 20px 18px 24px;
border-left: 2px solid rgba(76,175,125,0.40);
background: rgba(76,175,125,0.05);
border-radius: 0 10px 10px 0;
}
.osc-pq-mark {
display: block;
color: rgba(76,175,125,0.38);
font-size: 16px;
margin-bottom: 8px;
}
.osc-pq-text {
font-size: 18px;
font-style: italic;
font-weight: 500;
color: rgba(232,242,238,0.92);
line-height: 1.58;
margin: 0;
}
/* ── Stat strip ── */
.osc-stat-strip {
display: flex;
align-items: center;
gap: 0;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.07);
}
.osc-stat {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}
.osc-stat-num {
font-size: 28px;
font-weight: 800;
color: rgba(76,175,125,0.90);
letter-spacing: -1px;
line-height: 1;
}
.osc-stat-label {
font-size: 11px;
font-weight: 500;
color: rgba(170,188,182,0.62);
letter-spacing: 0.3px;
text-transform: uppercase;
}
.osc-stat-div {
width: 1px;
height: 32px;
background: rgba(255,255,255,0.08);
flex-shrink: 0;
}
/* ── Founder story text (replaces story card) ── */
.owner-story-text {
display: flex;
flex-direction: column;
gap: 15px;
position: relative;
z-index: 1;
padding-left: 18px;
border-left: 2px solid rgba(76,175,125,0.22);
}
.owner-story-text p {
font-size: 16px;
color: rgba(205,220,214,0.78);
line-height: 1.75;
margin: 0;
}
.owner-story-text .ost-lead {
font-size: 18px;
font-weight: 500;
color: rgba(228,240,235,0.92);
line-height: 1.60;
}
.owner-story-text.reveal { transform: translateX(18px); transition-duration: 0.78s; }
.owner-story-text.reveal.visible { transform: translateX(0); }
/* ── Why KLG Exists block ── */
.owner-why-section {
background: rgba(255,255,255,0.022);
border: 1px solid rgba(255,255,255,0.058);
border-radius: 20px;
padding: 30px 36px 34px;
position: relative;
overflow: hidden;
}
.owner-why-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg,
transparent 4%,
rgba(76,175,125,0.28) 36%,
rgba(58,155,213,0.18) 64%,
transparent 96%);
}
.owy-eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(76,175,125,0.55);
margin-bottom: 22px;
}
.owy-cols {
display: grid;
grid-template-columns: 1fr 1px 1fr;
gap: 32px;
align-items: start;
}
.owy-divider {
background: rgba(255,255,255,0.07);
align-self: stretch;
}
.owy-col-title {
display: flex;
align-items: center;
gap: 9px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(195,210,205,0.68);
margin-bottom: 18px;
}
.owy-col-icon { font-size: 13px; }
.owy-col-icon--dim { color: rgba(180,140,140,0.50); }
.owy-col-icon--green { color: rgba(76,175,125,0.72); }
.owy-list {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
.owy-list li {
font-size: 14px;
line-height: 1.55;
padding-left: 20px;
position: relative;
}
.owy-list--pain li {
color: rgba(185,195,192,0.62);
}
.owy-list--pain li::before {
content: '–';
position: absolute;
left: 0;
color: rgba(180,140,140,0.45);
}
.owy-list--solution li {
color: rgba(200,220,212,0.78);
}
.owy-list--solution li::before {
content: '✓';
position: absolute;
left: 0;
color: rgba(76,175,125,0.65);
font-size: 12px;
}
/* ── The KLG Difference (3-card grid) ── */
.owner-diff-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.ods-header { text-align: center; }
.ods-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(76,175,125,0.62);
}
.ods-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
/* ── Small text CTA ── */
.owner-link-cta {
text-align: center;
padding: 6px 0 18px;
}
.owner-link-cta-a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: rgba(76,175,125,0.72);
text-decoration: none;
letter-spacing: 0.2px;
transition: color 0.24s ease, gap 0.24s ease;
}
.owner-link-cta-a i {
font-size: 12px;
transition: transform 0.24s ease;
}
.owner-link-cta-a:hover {
color: rgba(76,175,125,1);
gap: 13px;
}
.owner-link-cta-a:hover i { transform: translateX(3px); }
.owner-photo-col { position: relative; display: flex; flex-direction: column; }
.owner-glass-photo { flex: 1; }
.owner-glass-photo {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 24px; overflow: hidden;
box-shadow: 0 16px 48px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.04);
cursor: default;
}
/* Entrance is GSAP-driven (see OWNER — ONE-SHOT ENTRANCE in script.js); the hover
transition is only attached once entrance completes, via .owner-hover-ready,
so it never fights the inline GSAP transform during the timeline. */
.owner-glass-photo.owner-hover-ready {
transition: transform 650ms cubic-bezier(0.25,0,0,1),
box-shadow 650ms ease-out,
border-color 500ms ease-out;
}
.owner-glass-photo.owner-hover-ready:hover {
transform: translateY(-2px);
border-color: rgba(0,210,195,0.22);
box-shadow:
0 20px 52px rgba(0,0,0,0.34),
0 0 0 1px rgba(0,210,195,0.10);
}
.owner-photo-frame { position: relative; overflow: hidden; }
.owner-photo-frame::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 65% at 50% 36%, transparent 36%, rgba(0,0,0,0.26) 100%);
pointer-events: none;
}
.owner-photo-img {
width: 100%; height: 430px;
object-fit: cover; object-position: center top; display: block;
}
.owner-name-tag {
padding: 26px 26px 28px;
border-top: 1px solid rgba(255,255,255,0.06);
background: #030710;
}
.ont-verified { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ont-name { font-size: 23px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.ont-role { font-size: 15px; font-weight: 500; color: var(--green); margin-top: 6px; letter-spacing: 0.1px; opacity: 0.85; }
/* Simple icon list */
.ont-meta-list {
list-style: none; padding: 0; margin: 20px 0 0;
display: flex; flex-direction: column; gap: 14px;
}
.ont-meta-list li {
font-size: 15px; font-weight: 400; color: rgba(195,208,202,0.72);
display: flex; align-items: center; gap: 10px;
}
.ont-icon { font-size: 15px; color: rgba(76,175,125,0.55); flex-shrink: 0; width: 16px; text-align: center; }
/* Divider + quote */
.ont-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 18px 0; }
.ont-quote-block { position: relative; }
.ont-signature { font-family: 'Dancing Script', cursive; font-size: 26px; font-weight: 600; color: rgba(76,175,125,0.82); line-height: 1; }
.owner-intro-signature {
color: #161409;
font-size: 30px;
max-width: 620px;
margin: 0 0 24px;
padding: 0 12px 0 18px;
text-align: right;
transform: rotate(-4deg);
transform-origin: right center;
}
.owner-sig-flourish {
display: block;
width: 110px;
height: auto;
margin: -2px 4px 0 auto;
opacity: 0.85;
}
/* Signature "written on scroll" reveal */
.owner-sig-text {
display: inline-block;
clip-path: inset(0 100% 0 0);
transition: clip-path 0.9s cubic-bezier(0.65,0,0.35,1);
}
.owner-sig-flourish path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 0.5s ease-out;
}
.owner-intro-signature.sig-write .owner-sig-text {
clip-path: inset(0 0% 0 0);
}
.owner-intro-signature.sig-write .owner-sig-flourish path {
transition-delay: 0.7s;
stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
.owner-sig-text { clip-path: inset(0 0% 0 0) !important; }
.owner-sig-flourish path { stroke-dashoffset: 0 !important; }
}
/* Under-card stats */
.owner-card-stats { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ocs-item { font-size: 12px; font-weight: 600; color: var(--green); opacity: 0.84; letter-spacing: 0.3px; text-align: center; }
.ocs-sep { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0.15px; text-align: center; }
/* Vertical divider between photo and text */
.owner-divider-line {
width: 1px; align-self: stretch; position: relative;
opacity: 1 !important; transform: none !important; filter: none !important;
}
.owner-divider-line::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to bottom,
transparent 0%,
rgba(255,255,255,0.06) 18%,
rgba(76,175,125,0.10) 50%,
rgba(255,255,255,0.06) 82%,
transparent 100%);
transform: scaleY(0);
transform-origin: top center;
transition: transform 0.82s cubic-bezier(0.22,1,0.36,1) 0.4s;
}
.owner-divider-line.visible::before { transform: scaleY(1); }
/* ── Owner section — directional reveal overrides ── */
/* Intro block: label + headline rise from below */
.owner-intro .section-label.reveal,
.owner-intro .oh-l1.reveal,
.owner-intro .oh-l2.reveal {
transform: translateY(16px);
transition-duration: 0.78s;
}
.owner-intro .section-label.reveal.visible,
.owner-intro .oh-l1.reveal.visible,
.owner-intro .oh-l2.reveal.visible { transform: translateY(0); }
/* Intro text: same rise */
.owner-intro-text.reveal { transform: translateY(12px); transition-duration: 0.74s; }
.owner-intro-text.reveal.visible { transform: translateY(0); }
/* Benefits: slide from left one by one */
.ob-item.reveal { opacity: 0; transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1); }
.ob-item.reveal.visible { opacity: 1; }
/* Quote: subtle scale + rise */
.owner-quote.reveal { transform: scale(0.96) translateY(10px); transition-duration: 0.84s; }
.owner-quote.reveal.visible { transform: scale(1) translateY(0); }
/* CTA row: rise from below, slightly more distance */
.owner-ctas .reveal { transform: translateY(22px); transition-duration: 0.78s; }
.owner-ctas .reveal.visible { transform: translateY(0); }
.owner-text-col { display: flex; flex-direction: column; position: relative; overflow: hidden; }
/* ── Cinematic Peterbilt sunset background behind the text column ── */
.owner-text-bg {
position: absolute;
top: -25px; right: -25px; bottom: -25px; left: -25px;
background: url('peterbilt-sunset.jpg') right 30% / cover no-repeat;
filter: blur(2px) brightness(0.42) contrast(1.10) saturate(1.25);
opacity: 0;
pointer-events: none;
z-index: 0;
will-change: transform, opacity, filter;
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 18%, black 42%);
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 18%, black 42%);
}
/* Time-of-day filter cycle — brightness/saturation/contrast */
@keyframes timeOfDay {
0% { filter: blur(2px) brightness(0.14) contrast(1.18) saturate(0.28); } /* ночь */
14% { filter: blur(2px) brightness(0.26) contrast(1.06) saturate(0.60); } /* рассвет */
28% { filter: blur(2px) brightness(0.50) contrast(1.00) saturate(0.80); } /* утро */
44% { filter: blur(2px) brightness(0.58) contrast(0.96) saturate(0.70); } /* полдень */
60% { filter: blur(2px) brightness(0.48) contrast(1.04) saturate(1.00); } /* вторая пол дня */
75% { filter: blur(2px) brightness(0.42) contrast(1.10) saturate(1.25); } /* закат ← стартовая точка */
88% { filter: blur(2px) brightness(0.22) contrast(1.14) saturate(0.88); } /* сумерки */
100% { filter: blur(2px) brightness(0.14) contrast(1.18) saturate(0.28); } /* ночь */
}
/* Sky colour temperature overlay */
@keyframes skyTint {
0% { background: rgba(5,12,52,0.62); } /* ночь: тёмно-синий */
14% { background: rgba(155,75,45,0.30); } /* рассвет: пурпурно-розовый */
28% { background: rgba(255,175,90,0.16); } /* утро: тёплый жёлтый */
44% { background: rgba(230,245,255,0.10); }/* полдень: нейтральный холодный */
60% { background: rgba(255,195,80,0.18); } /* вторая пол: золотой */
75% { background: rgba(255,110,35,0.20); } /* закат: глубокий оранжевый */
88% { background: rgba(55,25,85,0.48); } /* сумерки: сине-фиолетовый */
100% { background: rgba(5,12,52,0.62); } /* ночь */
}
/* Анимация всегда активна — начинаем с 75% (закат) чтобы не было рывка при появлении */
.owner-text-bg {
animation: timeOfDay 42s ease-in-out -31.5s infinite;
}
.owner-text-bg::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: overlay;
animation: skyTint 42s ease-in-out -31.5s infinite;
}
/* Lift text content above the cinematic bg; exclude both overlay layers */
.owner-text-col > *:not(.owner-text-bg):not(.owner-text-lights) { position: relative; z-index: 2; }
.owner-text-lights { display: none; }
.owner-text-bg.lights-on { animation: truckBrightPulse 5s ease-in-out 0s infinite; }
/* Headline line spans */
.oh-l1 { display: block; }
.oh-l2 { display: block; }
.owner-headline {
font-size: clamp(34px, 4.2vw, 58px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -1.5px;
color: #161409;
margin: 10px 0 24px;
}
.owner-headline .gradient-text {
background: linear-gradient(135deg, #c9852f, #a3742f);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.owner-desc { display: flex; flex-direction: column; gap: 22px; margin-bottom: 32px; max-width: 660px; }
.owner-desc p, .owner-p { font-size: 18px; color: rgba(232,238,235,0.88); line-height: 1.68; margin: 0; }
@media (max-width: 768px) { .owner-desc p, .owner-p { font-size: 17px; } }
.owner-highlight {
display: flex; flex-direction: column; gap: 6px;
padding: 18px 22px;
border-left: 2px solid rgba(76,175,125,0.45);
background: rgba(76,175,125,0.05);
border-radius: 0 4px 4px 0;
}
.owner-highlight span {
font-size: 17px; font-weight: 600; line-height: 1.5;
color: rgba(235,245,240,0.94);
letter-spacing: 0.1px;
}
/* ── KLG System section ── */
.owner-system-section { display: flex; flex-direction: column; gap: 20px; }
.osys-header { text-align: center; }
.osys-label {
font-size: 10px; font-weight: 700; letter-spacing: 3px;
text-transform: uppercase; color: rgba(76,175,125,0.62);
}
.osys-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.ops-card {
background: rgba(255,255,255,0.028);
border: 1px solid rgba(255,255,255,0.065);
border-radius: 18px;
padding: 26px 22px 24px;
position: relative;
overflow: hidden;
transition: transform 0.42s cubic-bezier(0.25,0,0,1),
box-shadow 0.42s ease,
border-color 0.32s ease;
}
.ops-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(76,175,125,0.45), rgba(58,155,213,0.30), transparent);
opacity: 0;
transition: opacity 0.32s ease;
}
.ops-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.32), 0 0 0 1px rgba(76,175,125,0.10);
border-color: rgba(76,175,125,0.18);
}
.ops-card:hover::before { opacity: 1; }
.ops-card:hover .ops-accent { opacity: 1; transform: scaleX(1); }
/* Shimmer sweep — diagonal light passes through card once on hover */
.ops-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
108deg,
transparent 22%,
rgba(255,255,255,0.07) 50%,
transparent 78%
);
transform: translateX(-110%) skewX(-15deg);
pointer-events: none;
z-index: 2;
}
.ops-card:hover::after {
animation: ops-shimmer 0.68s cubic-bezier(0.22,1,0.36,1);
}
@keyframes ops-shimmer {
from { transform: translateX(-110%) skewX(-15deg); }
to { transform: translateX(210%) skewX(-15deg); }
}
/* Number brightens on hover */
.ops-num { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: rgba(76,175,125,0.40); margin-bottom: 12px; transition: color 0.28s ease; }
.ops-card:hover .ops-num { color: rgba(76,175,125,0.82); }
.ops-card-main { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
/* Icon ring pulse — expands outward while hovering */
.ops-icon-wrap {
width: 52px; height: 52px; flex-shrink: 0;
border-radius: 50%;
border: 1px solid rgba(76,175,125,0.28);
background: rgba(76,175,125,0.08);
display: flex; align-items: center; justify-content: center;
font-size: 20px; color: var(--green);
transition: box-shadow 0.50s ease-out,
border-color 0.28s ease,
background 0.28s ease;
}
.ops-card:hover .ops-icon-wrap {
border-color: rgba(76,175,125,0.55);
background: rgba(76,175,125,0.14);
animation: ops-icon-ring 1.55s ease-out infinite;
}
@keyframes ops-icon-ring {
0% { box-shadow: 0 0 0 0 rgba(76,175,125,0.52); }
100% { box-shadow: 0 0 5px 13px rgba(76,175,125,0); }
}
.ops-card-text {}
.ops-title { font-size: 13px; font-weight: 800; color: rgba(238,245,242,0.95); letter-spacing: 0.8px; text-transform: uppercase; line-height: 1.2; }
.ops-desc { font-size: 13px; color: rgba(170,188,182,0.65); line-height: 1.60; margin-top: 4px; }
.ops-accent {
position: absolute; bottom: 0; left: 22px; right: 22px; height: 1px;
background: linear-gradient(90deg, rgba(76,175,125,0.55), rgba(58,155,213,0.35));
opacity: 0; transform: scaleX(0.4); transform-origin: left;
transition: opacity 0.38s ease, transform 0.48s cubic-bezier(0.22,1,0.36,1) 0.06s;
}
.ops-card.reveal { transform: translateY(18px); transition-duration: 0.65s; }
.ops-card.reveal.visible { transform: translateY(0); }
.ops-card.reveal.visible:hover { transform: translateY(-5px); }
/* Founder quote */
.owner-gross-stat {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: rgba(185,200,195,0.62); font-weight: 400;
margin: 14px 0 22px; text-decoration: none;
transition: color 0.2s ease;
}
.owner-gross-stat strong { color: rgba(255,255,255,0.88); font-weight: 700; transition: color 0.2s ease; animation: grossPulse 4s ease-in-out infinite; }
.owner-gross-stat:hover { color: rgba(185,200,195,0.85); }
.owner-gross-stat:hover strong { color: #fff; animation: none; }
@keyframes grossPulse {
0%, 100% { color: rgba(255,255,255,0.88); }
50% { color: rgba(120,220,160,0.95); }
}
.ogs-dot {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
background: var(--green);
box-shadow: 0 0 6px rgba(76,175,125,0.70);
animation: pulse 2s infinite;
}
.ogs-trend { color: var(--green); font-size: 13px; flex-shrink: 0; }
.owner-quote {
margin: 20px 0 38px;
padding: 0 0 0 20px;
border-left: 2px solid rgba(76,175,125,0.55);
font-size: 15.5px;
font-style: italic;
color: rgba(205,218,208,0.82);
line-height: 1.76;
max-width: 480px;
}
.owner-quote-attr {
display: flex; flex-direction: column; gap: 1px;
margin-top: 12px;
font-style: normal; font-size: 12.5px; font-weight: 600;
color: rgba(255,255,255,0.55);
letter-spacing: 0.2px;
}
.owner-quote-attr span { font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.32); }
/* Trust badges row below photo */
.owner-trust-row {
display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
align-items: center;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
padding: 8px 8px;
margin-top: 10px;
gap: 0;
}
.otr-item {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 2px 4px;
font-size: 9px; font-weight: 700; color: rgba(200,210,205,0.55);
text-transform: uppercase; letter-spacing: 0.5px; text-align: center;
}
.otr-icon { font-size: 11px; color: rgba(76,175,125,0.55); }
.otr-div { width: 1px; height: 22px; background: rgba(255,255,255,0.06); flex-shrink: 0; }
.owner-ctas { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; }
/* ── Why KLG Exists card ── */
.wke-header {
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 800;
letter-spacing: -0.8px;
line-height: 1.1;
color: rgba(240,248,244,0.96);
margin-bottom: 20px;
}
/* ── Paired rows (strikethrough animation) ── */
.wke-pairs {
display: flex;
flex-direction: column;
gap: 0;
}
.wke-pair {
display: grid;
grid-template-columns: 1fr 28px 1fr;
align-items: center;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
position: relative;
overflow: hidden;
}
/* Light beam sweep */
.wke-pair::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(105deg,
transparent 35%,
rgba(255,255,255,0.038) 44%,
rgba(255,255,255,0.11) 50%,
rgba(255,255,255,0.038) 56%,
transparent 65%);
transform: translateX(-110%);
pointer-events: none;
z-index: 4;
}
.wke-pairs.wke-active .wke-pair:nth-child(1)::after {
animation: wke-beam 13s cubic-bezier(0.4,0,0.2,1) infinite;
animation-delay: 1.0s;
}
.wke-pairs.wke-active .wke-pair:nth-child(2)::after {
animation: wke-beam 17s cubic-bezier(0.4,0,0.2,1) infinite;
animation-delay: 5.8s;
}
.wke-pairs.wke-active .wke-pair:nth-child(3)::after {
animation: wke-beam 15s cubic-bezier(0.4,0,0.2,1) infinite;
animation-delay: 3.2s;
}
.wke-pairs.wke-active .wke-pair:nth-child(4)::after {
animation: wke-beam 19s cubic-bezier(0.4,0,0.2,1) infinite;
animation-delay: 9.4s;
}
@keyframes wke-beam {
0% { transform: translateX(-110%); }
16% { transform: translateX(110%); }
100% { transform: translateX(110%); }
}
.wke-pair:last-child { border-bottom: none; }
/* Pain side */
.wke-pain {
display: flex;
align-items: center;
gap: 9px;
opacity: 0;
transform: translateX(-10px);
transition: opacity 0.38s ease, transform 0.38s ease;
transition-delay: calc(var(--i) * 0.22s);
}
.wke-pairs.wke-active .wke-pain {
opacity: 1;
transform: translateX(0);
}
.wke-pain > i {
color: rgba(210,75,75,0.70);
font-size: 12px;
flex-shrink: 0;
}
.wke-pain > span {
position: relative;
font-size: 13.5px;
color: rgba(210,210,215,0.62);
line-height: 1.4;
}
/* Strikethrough line */
.wke-strike {
position: absolute;
left: 0; top: 50%;
height: 1.5px;
width: 0;
background: rgba(210,75,75,0.55);
transform: translateY(-50%);
border-radius: 1px;
}
.wke-pairs.wke-active .wke-strike {
animation: wke-strike 0.38s ease-out forwards;
animation-delay: calc(var(--i) * 0.22s + 0.42s);
}
@keyframes wke-strike {
from { width: 0; }
to { width: 100%; }
}
/* Arrow */
.wke-pair-arrow {
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: rgba(76,175,125,0.35);
opacity: 0;
transition: opacity 0.28s ease;
transition-delay: calc(var(--i) * 0.22s + 0.82s);
}
.wke-pairs.wke-active .wke-pair-arrow {
opacity: 1;
}
/* Solution side */
.wke-sol {
display: flex;
align-items: center;
gap: 9px;
opacity: 0;
transform: translateX(10px);
transition: opacity 0.38s ease, transform 0.38s ease;
transition-delay: calc(var(--i) * 0.22s + 0.82s);
}
.wke-pairs.wke-active .wke-sol {
opacity: 1;
transform: translateX(0);
}
.wke-sol > i {
color: var(--green);
font-size: 12px;
flex-shrink: 0;
}
.wke-sol > span {
font-size: 13.5px;
color: rgba(210,238,225,0.88);
line-height: 1.4;
font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
.wke-pain, .wke-sol, .wke-pair-arrow { opacity: 1 !important; transform: none !important; }
.wke-strike { width: 100% !important; animation: none !important; }
.wke-pair::after { animation: none !important; }
}
/* ── THE KLG DIFFERENCE ── */
.klgd-section { display: flex; flex-direction: column; gap: 22px; }
.klgd-header {
display: flex; align-items: center; gap: 18px;
justify-content: center;
}
.klgd-label {
font-size: 10px; font-weight: 700;
letter-spacing: 4px; text-transform: uppercase;
color: rgba(200,218,210,0.55);
white-space: nowrap;
}
.klgd-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
max-width: 160px;
}
.klgd-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
position: relative;
}
.klgd-card {
position: relative;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.07);
min-height: 240px;
transition: transform 0.40s cubic-bezier(0.25,0,0,1),
border-color 0.30s ease,
box-shadow 0.40s ease;
}
.klgd-card:hover {
transform: translateY(-5px);
border-color: rgba(76,175,125,0.22);
box-shadow: 0 20px 44px rgba(0,0,0,0.40);
}
/* ── Photo background layer (grayscale → color on hover) ── */
.klgd-photo-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
filter: grayscale(1) brightness(0.72);
transform: scale(1.0);
transition: filter 0.60s ease, transform 0.60s ease;
z-index: 0;
}
.klgd-card:hover .klgd-photo-bg {
filter: grayscale(0) brightness(1.0);
transform: scale(1.08);
}
/* Photo assignments */
.klgd-card--road .klgd-photo-bg {
background-image: url('card_headlights.jpg');
background-position: center 40%;
}
.klgd-card--highway .klgd-photo-bg {
background-image: url('card_highway.jpg');
}
.klgd-card--growth .klgd-photo-bg {
background-image: url('card_trucks.jpg');
background-position: center 55%;
}
/* Card base backgrounds (fallback + CSS-only for office) */
.klgd-card--road { background: #060a0e; }
.klgd-card--highway { background: #060a0e; }
.klgd-card--growth { background: #060808; }
.klgd-card--office {
background:
radial-gradient(ellipse 70% 50% at 80% 20%, rgba(30,50,90,0.60) 0%, transparent 60%),
linear-gradient(145deg, #0c1422 0%, #0e1a2e 50%, #080e18 100%);
}
/* ::before dark gradient overlays (sit above photo, below content) */
.klgd-card--road::before,
.klgd-card--highway::before,
.klgd-card--growth::before {
content: '';
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to bottom,
rgba(4,8,12,0.62) 0%,
rgba(4,8,12,0.22) 40%,
rgba(4,8,12,0.68) 100%);
}
.klgd-card--office::before {
content: '';
position: absolute; inset: 0; z-index: 1;
background:
radial-gradient(ellipse 40% 40% at 75% 25%, rgba(58,130,200,0.10) 0%, transparent 70%),
linear-gradient(to bottom, transparent 60%, rgba(76,175,125,0.05) 100%);
}
.klgd-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,0.50) 100%);
z-index: 2;
}
.klgd-content {
position: relative; z-index: 3;
padding: 28px 26px 32px;
display: flex; flex-direction: column;
height: 100%;
box-sizing: border-box;
}
.klgd-num {
font-size: 10px; font-weight: 700;
letter-spacing: 2px;
color: rgba(76,175,125,0.55);
margin-bottom: 10px;
transition: color 0.45s ease;
}
.klgd-card:hover .klgd-num { color: rgba(76,175,125,1); }
.klgd-title {
font-size: clamp(20px, 2vw, 26px); font-weight: 800;
color: rgba(240,248,244,0.82);
letter-spacing: -0.6px;
line-height: 1.2;
transition: color 0.45s ease;
}
.klgd-card:hover .klgd-title { color: rgba(240,248,244,1); }
.klgd-accent {
width: 28px; height: 2px;
background: linear-gradient(90deg, var(--green), rgba(58,155,213,0.60));
border-radius: 2px;
margin: 12px 0;
transition: width 0.45s ease, opacity 0.45s ease;
opacity: 0.55;
}
.klgd-card:hover .klgd-accent { width: 52px; opacity: 1; }
.klgd-desc {
font-size: 13px;
color: rgba(195,218,208,0.45);
line-height: 1.7;
margin: 0;
transition: color 0.45s ease;
}
.klgd-card:hover .klgd-desc { color: rgba(210,232,222,0.90); }
.btn-owner-apply {
display: inline-flex; align-items: center; gap: 12px;
background: linear-gradient(145deg, #5ecb93 0%, #4ebe85 40%, #3aabe0 100%);
color: #fff;
padding: 24px 58px; border-radius: 16px;
text-decoration: none; font-size: 19px; font-weight: 700;
letter-spacing: -0.3px;
box-shadow: 0 12px 48px rgba(76,175,125,0.46), inset 0 1px 0 rgba(255,255,255,0.18);
transition: transform 380ms cubic-bezier(0.25,0,0,1), box-shadow 380ms ease-out, background 380ms ease-out;
}
.btn-owner-apply:hover,
.btn-owner-apply.reveal.visible:hover {
background: linear-gradient(145deg, #68d49e 0%, #5ecb93 40%, #4abde8 100%);
transform: translateY(-4px);
box-shadow: 0 20px 60px rgba(76,175,125,0.60), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-owner-arrow { display: inline-flex; align-items: center; transition: transform 380ms cubic-bezier(0.25,0,0,1); }
.btn-owner-apply:hover .btn-owner-arrow { transform: translateX(5px); }
.btn-owner-apply--xl { font-size: 19px; padding: 24px 58px; border-radius: 16px; }
.btn-owner-talk {
display: inline-flex; align-items: center; gap: 9px;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.12);
color: var(--text); padding: 17px 34px; border-radius: 16px;
text-decoration: none; font-size: 15px; font-weight: 600;
transition: background 400ms ease-out, border-color 400ms ease-out, box-shadow 400ms ease-out;
}
.btn-owner-talk:hover {
background: rgba(255,255,255,0.09);
border-color: rgba(255,255,255,0.26);
box-shadow: 0 0 20px rgba(255,255,255,0.04);
}
.btn-owner-talk--under {
display: flex;
justify-content: center;
width: 100%;
margin-top: 14px;
box-sizing: border-box;
}
.owner-response {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: rgba(195,200,215,0.70); font-weight: 500;
}
.owner-online-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--green); flex-shrink: 0;
animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,125,0.55); }
60% { box-shadow: 0 0 0 7px rgba(76,175,125,0); }
}
/* VP2 — 10% Commission ─────────────────────────────────────── */
.owner-vp3 {
padding: 120px 0 160px;
border-top: 1px solid rgba(255,255,255,0.05);
text-align: center;
}
.owner-comm-wrap { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.owner-comm-pct {
font-size: clamp(120px, 18vw, 220px);
font-weight: 900; line-height: 0.88;
letter-spacing: -8px;
background: linear-gradient(135deg, #7febb5, #4caf7d, #3a9bd5);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
margin-bottom: 20px;
}
.owner-comm-label {
font-size: 13px; font-weight: 800;
letter-spacing: 5px; text-transform: uppercase;
color: var(--text); margin-bottom: 14px;
}
.owner-comm-includes {
font-size: 15px; color: var(--muted);
letter-spacing: 0.3px; margin-bottom: 36px;
}
.owner-comm-body { display: flex; flex-direction: column; gap: 4px; margin-bottom: 52px; }
.owner-comm-body p { font-size: 21px; color: rgba(255,255,255,0.5); margin: 0; line-height: 1.8; }
.owner-comm-perks { margin-top: 18px; font-size: 13px; color: var(--muted); letter-spacing: 0.2px; }
.owner-body { font-size: 16px; color: var(--muted); line-height: 1.8; margin-bottom: 16px; }
/* ═══════════════════════════════════════════
RESULTS
═══════════════════════════════════════════ */
/* ─── Real Results ─────────────────────────── */
/* ── Cinematic mountain background — Benefits only ── */
.benefits-section { background: #000; }
.results-section { background: transparent; }
/* Header fade-up */
.res-header { opacity: 0; transform: translateY(16px); filter: blur(3px); transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1), filter 0.4s cubic-bezier(0.22,1,0.36,1); }
.res-header.res-in { opacity: 1; transform: none; filter: none; }
/* Grid */
.results-grid {
display: grid;
grid-template-columns: 1fr 1.08fr 1fr;
gap: 20px;
align-items: center;
margin-bottom: 28px;
}
/* Base card */
.result-card {
background: rgba(10,12,24,0.88);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 24px;
padding: 32px 28px;
position: relative;
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
opacity: 0;
transform: translateY(32px);
filter: blur(4px);
transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
transform 0.75s cubic-bezier(0.22,1,0.36,1),
filter 0.55s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.35s ease,
border-color 0.35s ease;
}
.result-card.res-in { opacity: 1; transform: translateY(0); filter: blur(0); }
.result-card.res-in:hover { transform: translateY(-4px); }
/* Featured card */
.result-card--featured {
border-color: rgba(220,154,60,0.3);
background: linear-gradient(160deg, rgba(220,154,60,0.09) 0%, rgba(10,12,24,0.94) 100%);
padding: 40px 32px;
box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(220,154,60,0.15);
}
.result-card--featured:hover { transform: scale(1.05) translateY(-4px); }
@keyframes resBreathe {
0%, 100% { box-shadow: 0 8px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(76,175,125,0.15), 0 0 40px rgba(76,175,125,0); }
50% { box-shadow: 0 8px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(76,175,125,0.25), 0 0 40px rgba(76,175,125,0.08); }
}
@keyframes resBreatheAmber {
0%, 100% { box-shadow: 0 8px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(220,154,60,0.15), 0 0 40px rgba(220,154,60,0); }
50% { box-shadow: 0 8px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(220,154,60,0.28), 0 0 40px rgba(220,154,60,0.10); }
}
/* Badge — see below in photo section */
/* Cursor spotlight — amber instead of the shared green */
.result-card::before {
background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
rgba(220,154,60,0.13), transparent 65%);
}
/* Trailer type tag */
.rc-trailer-tag {
position: absolute;
top: 18px;
right: 18px;
font-size: 9px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 100px;
padding: 4px 10px;
}
.result-card--featured .rc-trailer-tag { top: 26px; }
/* Settlement label */
.rc-settlement-label {
font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
text-transform: uppercase; color: var(--muted);
margin-bottom: 12px;
}
/* Gross number */
.rc-gross {
font-size: 52px; font-weight: 900; line-height: 1;
background: linear-gradient(135deg, #ffffff, #d0dff0);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
margin-bottom: 4px;
}
.result-card--featured .rc-gross { font-size: 58px; }
/* Labels */
.rc-label { font-size: 12px; color: var(--muted); margin-bottom: 20px; }
/* Divider */
.rc-divider { height: 1px; background: rgba(255,255,255,0.07); margin-bottom: 20px; }
/* Stats row */
.rc-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.rc-stat { text-align: center; padding: 10px 4px; background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px solid rgba(255,255,255,0.05); }
.rc-val { font-size: 16px; font-weight: 800; color: var(--text); }
.rc-key { font-size: 9px; color: var(--muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
/* Disclaimer */
.results-note { font-size: 12px; color: var(--muted); text-align: center; margin-bottom: 28px; opacity: 0.7; }
.results-note a,
.faq-body a {
color: var(--amber, #c9822b);
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* CTA */
.res-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.res-cta-btn {
display: inline-flex; align-items: center; gap: 12px;
padding: 20px 52px;
background: linear-gradient(135deg, var(--amber-light), var(--amber));
color: #181005; font-size: 19px; font-weight: 700;
border-radius: 16px; text-decoration: none;
box-shadow: 0 8px 36px rgba(220,154,60,0.40);
transition: transform 0.25s ease, box-shadow 0.25s ease, animation 0s;
}
.res-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 16px 52px rgba(220,154,60,0.55) !important;
animation: none;
}
.res-cta-btn:hover .res-arrow { transform: translateX(5px); }
.res-arrow { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
@keyframes resBtnPulse {
0%, 55%, 100% { box-shadow: 0 8px 36px rgba(76,175,125,0.45); }
65% { box-shadow: 0 8px 36px rgba(76,175,125,0.45), 0 0 0 8px rgba(76,175,125,0.26); }
75% { box-shadow: 0 8px 36px rgba(76,175,125,0.45), 0 0 0 18px rgba(76,175,125,0.12), 0 0 0 8px rgba(76,175,125,0.06); }
88% { box-shadow: 0 8px 36px rgba(76,175,125,0.45), 0 0 0 30px rgba(76,175,125,0.03), 0 0 0 18px rgba(76,175,125,0.00); }
}
.res-cta-sub { font-size: 13px; color: var(--muted); margin: 0; }
/* ══════════════════════════════════════════════
RESULTS V2 — editorial / data-first proof layout.
Deliberately new class names (rv2-), not reusing result-card, rc-,
or results-grid, so none of the old spotlight/tilt/infinite-breathe CSS
or JS below can attach to these cards. That old CSS/JS stays in place
(harmless, unmatched) since .res-cta-btn/.res-arrow above are still used
by the Benefits closing CTA.
══════════════════════════════════════════════ */
.rv2-section{ position:relative; overflow:hidden; }
.rv2-wide-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background:#07080b; }
/* Real KLG truck photo, kept barely visible and mask-faded top/bottom — no visible
rectangle. Just enough to remind the visitor this is a real trucking business,
without competing with the numbers for attention. Do not raise the opacity. */
.rv2-wide-bg::before{
content:''; position:absolute; inset:-60px;
background-image:url('truck-scene.jpg');
background-size:cover; background-position:center 38%;
filter:grayscale(0.55) brightness(0.24) contrast(0.85) blur(9px);
opacity:0.14;
mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 26%, rgba(0,0,0,0.45) 44%, rgba(0,0,0,0.18) 66%, transparent 84%);
-webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 26%, rgba(0,0,0,0.45) 44%, rgba(0,0,0,0.18) 66%, transparent 84%);
}
.rv2-wide-bg::after{
content:''; position:absolute; inset:0;
background:radial-gradient(ellipse 70% 45% at 50% -8%, rgba(220,154,60,0.055), transparent 65%);
}
.rv2-rail{ position:relative; z-index:1; max-width:1680px; margin:0 auto; padding:0 40px; }
.rv2-trust-line{
max-width:560px; margin:14px auto 0;
font-size:14.5px; line-height:1.55; color:rgba(255,255,255,0.55);
text-align:center;
}
.rv2-proof-grid{
display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:stretch;
margin:48px 0 32px;
}
.rv2-side-col{ display:flex; flex-direction:column; gap:20px; }
.rv2-card{
position:relative;
background:rgba(255,255,255,0.02);
border:1px solid rgba(255,255,255,0.08);
border-radius:20px;
padding:36px 34px;
cursor:pointer;
opacity:0; transform:translateY(20px);
transition:opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1),
filter 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease, background 0.3s ease;
}
.rv2-card.rv2-in{ opacity:1; transform:none; }
/* Featured — strongest proof item: a little more travel/scale so it resolves with
more presence than the supporting cards without rasterizing all of its body text.
Side cards get a lighter inward motion — supporting evidence, not the headline.
Both .rv2-in overrides sit ABOVE :hover in source order so the existing hover lift
still wins once a card has settled (equal-specificity classes, source order decides). */
.rv2-card--featured{ background:rgba(255,255,255,0.035); border-color:rgba(255,255,255,0.11); padding:44px 40px; transform:translateY(22px) translateX(-8px) scale(0.997); }
.rv2-card--featured.rv2-in{ transform:none; filter:none; }
.rv2-card--side{ padding:28px 26px; transform:translateY(16px) translateX(8px); }
.rv2-card--side.rv2-in{ transform:none; }
.rv2-card:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,0.16); }
.rv2-card:focus-visible{ outline:2px solid rgba(220,154,60,0.6); outline-offset:3px; }
.rv2-card--featured:hover{ border-color:rgba(220,154,60,0.32); }
.rv2-top-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.rv2-settlement-label{ font-size:10px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; color:rgba(220,154,60,0.75); }
.rv2-trailer-tag{
font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.5);
border:1px solid rgba(255,255,255,0.15); border-radius:100px; padding:4px 10px;
}
.rv2-gross{
font-size:56px; font-weight:900; line-height:1; letter-spacing:-1.5px; color:#fff;
margin-bottom:6px; font-variant-numeric:tabular-nums;
}
.rv2-card--featured .rv2-gross{ font-size:76px; letter-spacing:-2px; }
.rv2-card--side .rv2-gross{ font-size:42px; }
.rv2-gross-label{ font-size:12.5px; color:rgba(255,255,255,0.45); margin-bottom:26px; }
.rv2-metrics{ display:flex; align-items:stretch; justify-content:space-between; padding-top:22px; border-top:1px solid rgba(255,255,255,0.08); }
.rv2-metric{ flex:1; text-align:center; }
.rv2-metric-sep{ width:1px; background:rgba(255,255,255,0.08); margin:0 4px; }
.rv2-metric-val{ font-size:20px; font-weight:800; color:rgba(255,255,255,0.92); font-variant-numeric:tabular-nums; margin-bottom:5px; }
.rv2-card--featured .rv2-metric-val{ font-size:23px; }
.rv2-metric-key{ font-size:9.5px; font-weight:600; letter-spacing:0.8px; text-transform:uppercase; color:rgba(255,255,255,0.4); }
.rv2-metric--accent .rv2-metric-val{ color:var(--amber-light); }
.rv2-doc-divider{ margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.08); }
.rv2-doc-label{ font-size:10px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,255,255,0.36); margin-bottom:10px; }
.rv2-doc-preview{
position:relative; height:118px; border-radius:10px; overflow:hidden;
border:1px solid rgba(255,255,255,0.08); background:#0b0d13;
}
.rv2-doc-preview img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:center 80%;
filter:grayscale(0.5) brightness(0.68) contrast(1.08);
opacity:0.88;
}
.rv2-doc-preview::after{
content:''; position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(180deg, rgba(7,8,11,0.88) 0%, rgba(7,8,11,0.05) 38%, rgba(7,8,11,0.05) 62%, rgba(7,8,11,0.92) 100%),
linear-gradient(90deg, rgba(7,8,11,0.75) 0%, transparent 16%, transparent 84%, rgba(7,8,11,0.75) 100%);
}
.rv2-proof-action{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:15px; font-weight:700; color:rgba(255,255,255,0.9); transition:color 0.25s ease; }
.rv2-proof-action span{ padding-bottom:2px; border-bottom:1px solid rgba(255,255,255,0.22); transition:border-color 0.25s ease; }
.rv2-proof-action i{ font-size:12px; color:rgba(220,154,60,0.9); transition:transform 0.25s ease; }
.rv2-card:hover .rv2-proof-action{ color:#fff; }
.rv2-card:hover .rv2-proof-action span{ border-color:rgba(255,255,255,0.55); }
.rv2-card:hover .rv2-proof-action i{ transform:translate(3px,-3px); }
.rv2-note{
max-width:980px;
margin:16px auto 32px;
font-size:13px;
line-height:1.65;
color:rgba(255,255,255,0.62);
opacity:1;
}
.rv2-cta{ gap:14px; }
@media (max-width:900px){
.rv2-proof-grid{ grid-template-columns:1fr; }
.rv2-card--featured{ padding:36px 30px; }
}
@media (max-width:480px){
.rv2-gross{ font-size:42px; }
.rv2-card--featured .rv2-gross{ font-size:56px; }
.rv2-metrics{ flex-wrap:wrap; row-gap:14px; }
.rv2-metric{ flex:1 1 40%; }
}
/* ── Results section ─────────────────────── */
.results-section { padding-top: 32px; padding-bottom: 56px; }
.results-section .section-title { }
/* Header — headline almost directly above image */
.res-header { margin-bottom: 16px; }
/* Grid: cards overlap image, CTA tight */
.results-grid {
position: relative;
z-index: 2;
margin-bottom: 14px;
}
.results-note { margin-bottom: 16px; }
/* Center card 5% larger */
.result-card--featured { transform: scale(1.05) translateY(32px); filter: blur(4px); }
.result-card--featured.res-in { transform: scale(1.05) translateY(0); filter: blur(0); }
.result-card--featured.res-in:hover { transform: scale(1.05) translateY(-4px) !important; }
/* ── Cinematic photo banner ─────────────── */
.res-photo-banner {
position: relative;
z-index: 0;
width: 100%;
height: 320px;
margin: 0 0 -56px;
overflow: hidden;
background: #000;
opacity: 0;
transition: opacity 2.4s cubic-bezier(0.22,1,0.36,1);
pointer-events: none;
}
.res-photo-banner.sil-in { opacity: 1; }
/* Cover any sub-pixel rendering seam at the bottom edge */
.res-photo-banner::after {
content: '';
position: absolute;
bottom: -1px; left: -1px; right: -1px;
height: 6px;
background: #000;
z-index: 10;
pointer-events: none;
}
.res-photo-inner {
position: absolute;
inset: -4px;
}
/* Photo — zoom animation only, no conflicting transform */
.res-photo-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 46%;
filter: brightness(0.80) saturate(0.80) contrast(1.05);
animation: resCinZoom 26s ease-in-out infinite alternate;
display: block;
}
@keyframes resCinZoom {
from { transform: scale(1.00); }
to { transform: scale(1.07); }
}
/* Vignette: heavy left/right darkness, brighter open centre */
.res-photo-vignette {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 90% at 50% 45%,
transparent 10%,
rgba(0,0,0,0.55) 60%,
rgba(0,0,0,0.92) 100%),
linear-gradient(90deg,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0.55) 18%,
transparent 38%,
transparent 62%,
rgba(0,0,0,0.55) 82%,
rgba(0,0,0,1) 100%);
pointer-events: none;
z-index: 2;
}
/* Top fog — blends image top into dark section background */
.res-photo-fog-top {
position: absolute;
top: 0; left: 0; right: 0;
height: 115px;
background: linear-gradient(to bottom,
rgba(0,0,0,0.88) 0%,
rgba(0,0,0,0.70) 28%,
rgba(0,0,0,0.35) 62%,
transparent 100%);
pointer-events: none;
z-index: 3;
}
/* Bottom fog — solid at base so card overlap is seamless */
.res-photo-fog {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 200px;
background: linear-gradient(to top,
#000000 0%,
rgba(0,0,0,0.98) 16%,
rgba(0,0,0,0.86) 36%,
rgba(0,0,0,0.42) 60%,
transparent 100%);
pointer-events: none;
z-index: 3;
}
.res-photo-sweep { display: none; }
/* Badge — premium gradient + soft glow */
.rc-badge {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--amber-light), var(--amber));
color: #181005;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.4px;
padding: 6px 18px;
border-radius: 100px;
white-space: nowrap;
text-transform: uppercase;
box-shadow: 0 0 18px rgba(220,154,60,0.35);
}
/* Tablet */
@media (max-width: 768px) {
.benefits-section { background-attachment: scroll; background-position: center 25%; }
.res-photo-banner { height: 240px; margin-bottom: -36px; }
.res-header { margin-bottom: 14px; }
.result-card--featured { transform: scale(1.02) translateY(24px); }
.result-card--featured.res-in { transform: scale(1.02) translateY(0); }
.result-card--featured:hover { transform: scale(1.02) translateY(-4px) !important; }
}
/* Mobile */
@media (max-width: 480px) {
.res-photo-banner { height: 180px; margin-bottom: -20px; }
.res-header { margin-bottom: 12px; }
.results-grid { margin-top: 0; }
.result-card--featured { transform: none; }
.result-card--featured.res-in { transform: none; }
.result-card--featured:hover { transform: translateY(-4px) !important; }
}
@media (prefers-reduced-motion: reduce) {
.res-photo-banner { transition: none !important; opacity: 1 !important; transform: none !important; }
.res-photo-img { animation: none !important; }
.res-photo-banner.sil-in .res-photo-sweep { animation: none !important; }
}
/* Click hint */
.rc-click-hint {
margin-top: 16px;
font-size: 11px;
font-weight: 600;
color: rgba(76,175,125,0.55);
letter-spacing: 0.5px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
opacity: 1;
transition: color 0.3s ease;
}
.result-card:hover .rc-click-hint {
color: #8dffd0;
animation: hintPulse 1.6s ease-in-out infinite;
}
@keyframes hintPulse {
0%, 100% { opacity: 1; text-shadow: 0 0 0px rgba(76,175,125,0); }
50% { opacity: 0.55; text-shadow: 0 0 12px rgba(76,175,125,0.6); }
}
.result-card { cursor: pointer; }
.result-card:focus-visible { outline: 2px solid rgba(220,154,60,0.6); outline-offset: 3px; }
.result-card:hover:not(.result-card--featured) {
transform: translateY(-6px);
border-color: rgba(255,255,255,0.22);
animation: cardHoverPulseNeutral 2s ease-in-out infinite;
}
@keyframes cardHoverPulseNeutral {
0%, 100% { box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.10), 0 0 28px rgba(255,255,255,0.04); }
50% { box-shadow: 0 28px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.18), 0 0 48px rgba(255,255,255,0.08); }
}
@keyframes cardHoverPulseAmber {
0%, 100% { box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(220,154,60,0.28), 0 0 28px rgba(220,154,60,0.10); }
50% { box-shadow: 0 28px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(220,154,60,0.45), 0 0 48px rgba(220,154,60,0.20); }
}
.result-card--featured:hover {
transform: scale(1.05) translateY(-6px);
border-color: rgba(220,154,60,0.45);
animation: cardHoverPulseAmber 2s ease-in-out infinite !important;
}
/* ── Settlement Modal — card-to-modal container transform ── */
.smt-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}
.smt-overlay.smt-open {
opacity: 1;
pointer-events: auto;
}
.smt-box {
position: relative;
background: rgba(13,14,16,0.97);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 16px;
width: 100%;
max-width: min(70vw, 1200px);
max-height: 88vh;
overflow-y: auto;
box-shadow: 0 24px 64px rgba(0,0,0,0.55);
transform-origin: 0 0;
will-change: transform, border-radius;
outline: none;
}
.smt-inner { padding: 24px 32px 22px; transform-origin: 0 0; will-change: transform; }
.smt-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 50%;
color: #fff;
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s;
z-index: 2;
}
.smt-close:hover { background: rgba(255,255,255,0.09); }
.smt-eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 6px;
}
.smt-title {
font-size: 25px;
font-weight: 800;
color: #f3ede0;
letter-spacing: -0.5px;
margin-bottom: 18px;
padding-right: 40px;
}
/* Metrics: one flat data strip instead of four boxed dashboard tiles. */
.smt-stats-grid {
display: flex;
align-items: stretch;
gap: 0;
padding: 15px 0;
margin-bottom: 16px;
border-top: 1px solid rgba(255,255,255,0.09);
border-bottom: 1px solid rgba(255,255,255,0.09);
}
.smt-stat {
flex: 1;
text-align: center;
background: none;
border: none;
border-left: 1px solid rgba(255,255,255,0.09);
border-radius: 0;
padding: 0 6px;
order: 3;
}
.smt-stat--gross {
order: 1;
border-left: none;
padding-left: 0;
}
.smt-stat--net {
order: 2;
background: none;
border-color: transparent;
border-left: 1px solid rgba(255,255,255,0.09);
}
.smt-stat-val {
font-size: 21px;
font-weight: 800;
color: #f3ede0;
line-height: 1;
margin-bottom: 4px;
}
.smt-stat--gross .smt-stat-val,
.smt-stat--net .smt-stat-val {
font-size: 30px;
font-weight: 900;
}
.smt-stat--gross .smt-stat-val {
background: linear-gradient(135deg, #fff, #f0d9b0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.smt-stat--net .smt-stat-val {
color: var(--amber-light);
position: relative;
display: inline-block;
}
.smt-stat--net .smt-stat-val::after {
content: '';
position: absolute;
left: 2px; right: 2px; bottom: -5px;
height: 2px;
background: rgba(240,184,98,0.42);
border-radius: 2px;
}
.smt-stat-key {
font-size: 11px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-top: 7px;
}
/* Document: the hero of the modal — large, undistorted, fully legible, no filters. */
.smt-photo {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.smt-photo-inner { text-align: center; }
.smt-photo-icon {
font-size: 30px;
color: rgba(220,154,60,0.3);
margin-bottom: 8px;
display: block;
}
.smt-photo-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.smt-photo-sub { font-size: 11px; color: rgba(255,255,255,0.2); }
.smt-photo.has-photo {
height: auto;
max-height: min(52vh, 640px);
overflow-y: auto;
border-color: rgba(255,255,255,0.10);
background: #0d0e10;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
padding: 4px;
display: block;
}
.smt-photo.has-photo img { width: 100%; height: auto; display: block; border-radius: 8px; }
.smt-disclaimer {
font-size: 13px;
color: rgba(255,255,255,0.42);
line-height: 1.5;
margin-bottom: 16px;
text-align: center;
}
.smt-btns {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
.smt-btn-primary {
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 24px;
background: linear-gradient(135deg, var(--amber-light), var(--amber));
color: #181005;
font-size: 15px;
font-weight: 700;
border-radius: 12px;
text-decoration: none;
box-shadow: 0 4px 20px rgba(220,154,60,0.35);
transition: transform 0.2s, box-shadow 0.2s;
}
.smt-btn-primary::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
border: 1.5px solid rgba(220,154,60,0.6);
opacity: 0;
pointer-events: none;
}
.smt-btn-primary.smt-pulse {
--pulse-glow: 0 0 26px 5px rgba(220,154,60,0.40);
--pulse-ring-op: 0.45;
animation: smtBtnPulse 5.6s ease-in-out infinite;
}
.smt-btn-primary.smt-pulse::after {
animation: smtBtnRing 5.6s ease-out infinite;
}
@keyframes smtBtnPulse {
0% { transform: scale(1); box-shadow: 0 4px 20px rgba(220,154,60,0.35); }
16% { transform: scale(1.022); box-shadow: 0 4px 20px rgba(220,154,60,0.35), var(--pulse-glow); }
32% { transform: scale(1); box-shadow: 0 4px 20px rgba(220,154,60,0.35); }
100% { transform: scale(1); box-shadow: 0 4px 20px rgba(220,154,60,0.35); }
}
@keyframes smtBtnRing {
0% { opacity: 0; transform: scale(1); }
8% { opacity: var(--pulse-ring-op); transform: scale(1.02); }
32% { opacity: 0; transform: scale(1.16); }
100% { opacity: 0; transform: scale(1.16); }
}
/* Existing hover/focus/active behaviour stays untouched — pulse just steps aside */
.smt-btn-primary.smt-pulse:hover,
.smt-btn-primary.smt-pulse:focus-visible,
.smt-btn-primary.smt-pulse:active {
animation: none;
}
.smt-btn-primary.smt-pulse:hover::after,
.smt-btn-primary.smt-pulse:focus-visible::after,
.smt-btn-primary.smt-pulse:active::after {
animation: none;
opacity: 0;
}
@media (max-width: 640px) {
.smt-btn-primary.smt-pulse { --pulse-glow: 0 0 16px 3px rgba(220,154,60,0.28); --pulse-ring-op: 0.28; }
}
@media (prefers-reduced-motion: reduce) {
.smt-btn-primary.smt-pulse,
.smt-btn-primary.smt-pulse::after { animation: none !important; }
}
.smt-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(220,154,60,0.48); }
.smt-btn-secondary {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 24px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
color: #f3ede0;
font-size: 15px;
font-weight: 600;
border-radius: 12px;
text-decoration: none;
transition: background 0.2s, border-color 0.2s;
}
.smt-btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
/* Modal mobile */
@media (max-width: 900px) {
.smt-stats-grid { flex-wrap: wrap; row-gap: 18px; }
.smt-stat { flex: 0 0 50%; border-left: none !important; padding: 0; }
}
@media (max-width: 640px) {
.smt-overlay { padding: 16px; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.smt-box { max-height: 88vh; }
.smt-inner { padding: 26px 20px 22px; }
.smt-title { font-size: 20px; padding-right: 34px; }
.smt-stat--gross .smt-stat-val,
.smt-stat--net .smt-stat-val { font-size: 24px; }
.smt-stat-val { font-size: 17px; }
.smt-btns { flex-direction: column; }
.smt-photo { height: 130px; }
.smt-photo.has-photo { max-height: 56vh; }
}
@media (prefers-reduced-motion: reduce) {
.res-header, .result-card { opacity: 1 !important; transform: none !important; transition: none !important; }
.result-card--featured { animation: none !important; }
.smt-overlay, .smt-box, .smt-inner { transition: none !important; }
}
/* ══════════════════════════════════════════════
INSIDE KLG — UNIFIED STORYTELLING SECTION
══════════════════════════════════════════════ */
.ks-section {
background: #000;
padding: 72px 0 0;
position: relative;
}
/* ── 3. CTA Bar ── */
.ks-cta-bar {
display: flex; align-items: center; justify-content: space-between; gap: 32px;
max-width: 1000px; margin: 0 auto 72px;
padding: 22px 36px;
background: linear-gradient(135deg, rgba(220,154,60,0.10) 0%, rgba(220,154,60,0.03) 100%);
border: 1px solid rgba(220,154,60,0.25);
border-radius: 24px;
position: relative; overflow: hidden;
}
.ks-cta-bar::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(220,154,60,0.5), transparent);
}
.ks-cta-left { flex: 1; min-width: 0; }
.ks-cta-live {
display: inline-flex; align-items: center; gap: 9px;
font-size: 11px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: #4caf7d; margin-bottom: 12px;
}
.ks-cta-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #4caf7d; flex-shrink: 0;
animation: statusPulse 2.2s ease-out infinite;
}
.ks-cta-quote {
font-size: 17px; font-style: italic; white-space: nowrap;
color: rgba(240,184,98,0.82); line-height: 1.5;
}
.ks-cta-sig {
font-style: normal; font-weight: 700;
color: rgba(220,154,60,0.55); font-size: 14px;
}
.ks-cta-actions {
display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.ks-cta-phone {
display: inline-flex; align-items: center; gap: 9px;
padding: 16px 30px; border-radius: 13px;
border: 1px solid rgba(255,255,255,0.16);
color: rgba(255,255,255,0.65); font-size: 15px; font-weight: 600;
text-decoration: none; white-space: nowrap;
transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.ks-cta-phone:hover { border-color: rgba(220,154,60,0.45); color: #fff; transform: translateY(-2px); }
.ks-cta-apply {
display: inline-flex; align-items: center; gap: 8px;
padding: 16px 30px; border-radius: 13px;
background: linear-gradient(135deg, var(--amber-light), var(--amber));
color: #181005; font-size: 15px; font-weight: 700;
text-decoration: none; white-space: nowrap;
transition: opacity 0.3s ease, transform 0.3s ease;
box-shadow: 0 8px 28px rgba(220,154,60,0.3);
}
.ks-cta-apply:hover { opacity: 0.88; transform: translateY(-2px); }
/* ── 4. Light zone: Team + Real Work ── */
.ks-light-zone {
background: #f2ede2;
color: #161409;
padding: 56px 0 0;
position: relative;
}
.ks-lz-label {
font-size: 11px; font-weight: 700; letter-spacing: 3px;
text-transform: uppercase; color: #a3742f;
text-align: center; margin-bottom: 14px;
}
.ks-lz-title {
font-size: clamp(36px, 5.5vw, 68px); font-weight: 900; letter-spacing: -2px;
text-align: center; line-height: 1.06; margin-bottom: 48px; color: #161409;
}
.ks-lz-amber { color: #a3742f; }
.ks-lz-kicker {
text-align: center; font-size: 15px; color: #6b6656;
max-width: 480px; margin: 0 auto 52px;
}
/* Retention stat, promoted next to the section headline */
.ks-lz-stat {
display: flex; align-items: baseline; justify-content: center; gap: 8px;
margin: 0 0 40px;
}
.ks-lz-stat-num { font-size: 22px; font-weight: 900; color: #a3742f; letter-spacing: -0.3px; }
.ks-lz-stat-label { font-size: 13px; font-weight: 600; color: #6b6656; }
/* Team — asymmetric editorial grid */
.ks-team-grid {
display: grid; grid-template-columns: 5fr 7fr; gap: 22px; align-items: stretch;
}
.ks-lead-card {
position: relative; border-radius: 16px; overflow: hidden; cursor: pointer;
background: #0c1018; min-height: 480px;
display: flex; align-items: flex-end;
border: 1px solid rgba(22,20,9,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ks-lead-card:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(30,25,10,0.14); }
.ks-lead-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.ks-lead-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.ks-lead-grad {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(5,4,1,0.86) 0%, rgba(5,4,1,0.18) 55%, transparent 75%);
}
.ks-card-expand {
position: absolute; top: 16px; right: 16px; z-index: 2;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(0,0,0,0.35); backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.2); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.ks-lead-body { position: relative; z-index: 1; padding: 26px 28px 28px; color: #fff; }
.ks-lead-name { font-size: 26px; font-weight: 900; letter-spacing: -0.4px; }
.ks-lead-role {
font-size: 12.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.6px; color: #f0c988; margin: 3px 0 12px;
}
.ks-lead-quote { font-size: 14px; color: rgba(255,255,255,0.82); font-style: italic; max-width: 300px; line-height: 1.5; }
.ks-team-list { display: flex; flex-direction: column; gap: 10px; }
.ks-team-row {
flex: 1; display: flex; align-items: center; gap: 16px;
background: #fbf8f1; border: 1px solid #ddd2b4; border-radius: 10px;
padding: 16px 18px; cursor: pointer;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ks-team-row:hover { transform: translateX(4px); border-color: #c9b788; box-shadow: 0 10px 26px rgba(30,25,10,0.08); }
.ks-team-row:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.ks-row-photo {
width: 84px; height: 84px; border-radius: 8px; flex-shrink: 0;
background-size: cover; background-position: center;
}
.ks-row-text { flex: 1; min-width: 0; }
.ks-row-name { font-size: 15.5px; font-weight: 800; color: #161409; }
.ks-row-role {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px; color: #2f7d56; margin: 2px 0 4px;
}
.ks-row-line { font-size: 12.5px; color: #6b6656; line-height: 1.5; }
.ks-row-arrow { font-size: 14px; color: rgba(22,20,9,0.28); flex-shrink: 0; }
/* Real Work — scroll-scrubbed filmstrip, opens the site's existing lightbox.
Bottom padding was sized for the closing CTA block that used to follow
(now removed — Safety & Compliance follows directly) — trimmed so the
two sections don't stack their spacing on top of each other. */
.ks-work-outer { padding: 64px 0 32px; }
/* Entrance (opacity/y/blur) lives on this wrapper only. .ks-strip-track carries
ONLY the ScrollTrigger-driven horizontal x — keeping the two on separate DOM
nodes so they never fight over the same `transform` property (see the
REAL WORK — FILMSTRIP SCRUB block in script.js for the historical bug this
avoids: a raw scroll listener used to overwrite this same reveal's translateY). */
.ks-strip-entrance { overflow: visible; }
.ks-strip-viewport { overflow: hidden; margin: 0 -40px; padding: 0 40px; }
.ks-strip-track { display: flex; gap: 14px; width: max-content; will-change: transform; }
.ks-strip-thumb {
position: relative; border-radius: 6px; overflow: hidden; cursor: pointer;
flex-shrink: 0; height: 260px;
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
--ks-photo-brightness: 0.99;
--ks-photo-contrast: 1.04;
--ks-photo-saturation: 0.86;
}
.ks-strip-thumb--220 { width: 220px; }
.ks-strip-thumb--240 { width: 240px; }
.ks-strip-thumb--260 { width: 260px; }
.ks-strip-thumb--280 { width: 280px; }
.ks-strip-thumb--300 { width: 300px; }
.ks-strip-thumb--340 { width: 340px; }
.ks-strip-thumb:hover { transform: translateY(-2px); }
.ks-strip-photo {
position: absolute; inset: 0; display: block; width: 100%; height: 100%;
object-fit: cover; object-position: center; pointer-events: none;
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
filter:
brightness(var(--ks-photo-brightness))
contrast(var(--ks-photo-contrast))
saturate(var(--ks-photo-saturation));
}
.ks-strip-thumb[data-grade="bright"],
.klg-lb-slide[data-grade="bright"] {
--ks-photo-brightness: 0.96;
--ks-photo-contrast: 1.03;
--ks-photo-saturation: 0.76;
}
.ks-strip-thumb[data-grade="shadow"],
.klg-lb-slide[data-grade="shadow"] {
--ks-photo-brightness: 1.07;
--ks-photo-contrast: 1.02;
--ks-photo-saturation: 0.80;
}
.ks-strip-thumb[data-grade="cool"],
.klg-lb-slide[data-grade="cool"] {
--ks-photo-brightness: 1.01;
--ks-photo-contrast: 1.05;
--ks-photo-saturation: 0.74;
}
.ks-strip-thumb[data-grade="warm"],
.klg-lb-slide[data-grade="warm"] {
--ks-photo-brightness: 0.98;
--ks-photo-contrast: 1.04;
--ks-photo-saturation: 0.78;
}
.ks-strip-thumb[data-grade="night"],
.klg-lb-slide[data-grade="night"] {
--ks-photo-brightness: 1.04;
--ks-photo-contrast: 1.03;
--ks-photo-saturation: 0.78;
}
.ks-strip-thumb[data-grade="mono"],
.klg-lb-slide[data-grade="mono"] {
--ks-photo-brightness: 0.99;
--ks-photo-contrast: 1.06;
--ks-photo-saturation: 1;
}
.ks-strip-thumb:hover .ks-strip-photo { transform: scale(1.025); }
.ks-strip-thumb::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,8,2,0.68), transparent 55%);
transition: opacity 0.3s ease;
}
.ks-strip-thumb:hover::after { opacity: 0.8; }
.ks-strip-label {
position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
padding: 12px; font-size: 11.5px; font-weight: 700; color: #fff;
}
/* At ultrawide widths the old 2278px track was narrower than its viewport,
leaving it left-anchored with zero horizontal travel. The larger editorial
frames and centered 3000px viewport restore a deliberate clipped rail and
a restrained traverse at 3440px. Normal desktop/tablet/mobile geometry
remains exactly as before. */
@media (min-width: 2400px) {
.ks-strip-viewport {
width: min(3000px, calc(100vw - 240px));
margin-left: auto; margin-right: auto; padding: 0;
}
.ks-strip-track { gap: 18px; }
.ks-strip-thumb { height: 340px; }
.ks-strip-thumb--220 { width: 330px; }
.ks-strip-thumb--240 { width: 360px; }
.ks-strip-thumb--260 { width: 390px; }
.ks-strip-thumb--280 { width: 420px; }
.ks-strip-thumb--300 { width: 450px; }
.ks-strip-thumb--340 { width: 510px; }
}
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
/* Mobile, or reduced-motion at any width: the desktop ScrollTrigger
horizontal drift is not created (see script.js) — the rail becomes a
native scrollable/swipeable gallery instead, so every photo stays
reachable without relying on scroll-linked motion. */
.ks-strip-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 860px) {
.ks-strip-viewport {
margin: 0; padding: 0 18px; overflow-y: hidden;
scroll-snap-type: x proximity; scroll-padding-inline: 18px;
overscroll-behavior-x: contain; scrollbar-width: none;
}
.ks-strip-viewport::-webkit-scrollbar { display: none; }
.ks-strip-track { gap: 12px; }
.ks-strip-thumb { max-width: calc(100vw - 36px); }
.ks-strip-thumb { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
.ks-strip-thumb:hover { transform: none; }
.ks-strip-thumb:hover .ks-strip-photo { transform: none; }
}
/* Team detail overlay — FLIP, mirrors the Results settlement modal */
.ks-detail-overlay {
position: fixed; inset: 0; z-index: 400;
background: rgba(10,8,2,0.55); backdrop-filter: blur(8px);
opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
display: flex; align-items: center; justify-content: center; padding: 16px;
transform: translateZ(0);
}
.ks-detail-overlay.open { opacity: 1; pointer-events: auto; }
.ks-detail-box {
position: relative; width: min(560px, 100%); max-height: 95vh; overflow: hidden;
background: #fbf8f1; border: 1px solid #d8c79a; border-radius: 20px;
box-shadow: 0 40px 90px rgba(20,16,4,0.35);
visibility: hidden; transform-origin: 0 0; will-change: transform; outline: none;
display: flex; flex-direction: column;
}
.ks-detail-inner {
display: flex; flex-direction: column; min-height: 0; flex: 1;
transform-origin: 0 0; will-change: transform;
}
/* Photo + text scroll if they don't fit; the Apply Now footer never does — always visible, no scrolling needed to reach it. */
.ks-detail-scroll {
overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain;
scrollbar-width: none; -ms-overflow-style: none;
}
.ks-detail-scroll::-webkit-scrollbar { display: none; }
/* Sticks to the bottom of the visible scroll area; only reads as a hint once there's actually more to scroll to. */
.ks-detail-scroll::after {
content: ''; display: block;
position: sticky; bottom: 0; left: 0; right: 0;
height: 28px; margin-top: -28px;
background: linear-gradient(to bottom, transparent, #fbf8f1);
pointer-events: none;
}
.ks-detail-photo { aspect-ratio: 3 / 2; position: relative; background-size: cover; background-position: center; }
.ks-detail-photo::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(5,4,1,0.35), transparent 60%);
}
.ks-detail-close {
position: absolute; top: 14px; right: 14px; z-index: 3;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.25);
color: #fff; font-size: 15px; display: flex; align-items: center; justify-content: center;
transition: background 0.2s ease;
}
.ks-detail-close:hover { background: rgba(0,0,0,0.5); }
.ks-detail-close:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ks-detail-text { padding: 18px 26px 14px; }
.ks-detail-name { font-size: 22px; font-weight: 900; color: #161409; }
.ks-detail-role {
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px; color: #2f7d56; margin: 3px 0 14px;
}
.ks-detail-bio { font-size: 15px; color: #6b6656; line-height: 1.55; margin-bottom: 18px; }
/* PM Service Shop only — hidden (via [hidden] on the wrapper) for every
other trigger, which never sets data-services. */
.ks-detail-services { margin: 0 0 16px; }
.ks-detail-services-label {
font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: #6b6656; margin-bottom: 10px;
}
.ks-detail-services-list {
display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(4, auto);
gap: 8px 20px; list-style: none; padding: 0; margin: 0;
}
.ks-detail-services-list li { display: flex; align-items: baseline; gap: 8px; }
.ks-detail-services-list i { color: #2f7d56; font-size: 11px; flex-shrink: 0; }
.ks-detail-services-list span { font-size: 13.5px; font-weight: 600; color: #161409; line-height: 1.4; }
@media (max-width: 600px) {
.ks-detail-services-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
}
.ks-detail-quote {
font-size: 13.5px; font-style: italic; color: rgba(22,20,9,0.85);
border-left: 2px solid #ddd2b4; padding-left: 10px;
}
.ks-detail-footer {
flex-shrink: 0; padding: 12px 26px 18px;
border-top: 1px solid #e5dcc3; background: #fbf8f1;
}
/* Reuses the global KLG CTA component as-is — this only stretches it to the
modal footer's width, it does not introduce a new CTA variant. */
.ks-detail-footer .klg-cta { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
.ks-lead-card, .ks-team-row, .ks-strip-thumb { transition: none; }
}
/* ── 5. Emotional ending ── */
.ks-end {
position: relative; text-align: center;
padding: 36px 0 120px;
}
.ks-end-rule {
width: 1px; height: 56px;
background: linear-gradient(to bottom, transparent, rgba(76,175,125,0.45), transparent);
margin: 0 auto 24px;
}
.ks-end-message { max-width: 480px; margin: 0 auto 32px; position: relative; z-index: 1; }
.ks-end-headline {
font-size: clamp(21px, 2.6vw, 27px); font-weight: 800; color: #fff;
letter-spacing: -0.3px; line-height: 1.28; margin: 0 0 8px;
}
.ks-end-sub { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.5; margin: 0; }
.ks-end-glow {
position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);
width: 900px; height: 700px; pointer-events: none;
background: radial-gradient(ellipse at center,
rgba(76,175,125,0.14) 0%, rgba(76,175,125,0.05) 40%, transparent 70%);
}
.ks-end-btns { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.ks-end-primary {
display: inline-flex; align-items: center; gap: 9px;
padding: 20px 48px; border-radius: 14px;
background: linear-gradient(135deg, var(--amber-light), var(--amber));
color: #181005; font-size: 17px; font-weight: 700;
text-decoration: none; letter-spacing: -0.2px;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.ks-end-primary:hover { opacity: 0.88; transform: translateY(-2px); }
.ks-end-outline {
display: inline-flex; align-items: center;
padding: 20px 48px; border-radius: 14px;
border: 1px solid rgba(255,255,255,0.16);
color: rgba(255,255,255,0.65); font-size: 17px; font-weight: 600;
text-decoration: none;
transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.ks-end-outline:hover { border-color: rgba(76,175,125,0.45); color: #fff; transform: translateY(-2px); }
.ks-end-micro {
font-size: 12px; color: rgba(255,255,255,0.18);
margin-top: 20px; letter-spacing: 0.3px;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.ks-cta-bar { flex-direction: column; align-items: flex-start; padding: 28px 28px; gap: 24px; }
.ks-cta-actions { width: 100%; }
.ks-cta-phone, .ks-cta-apply { flex: 1; justify-content: center; }
.ks-team-grid { grid-template-columns: 1fr; }
.ks-lead-card { min-height: 320px; }
.ks-strip-viewport { margin: 0; padding: 0 18px; }
}
@media (max-width: 640px) {
.ks-section { padding: 80px 0 0; }
.ks-light-zone { padding: 40px 0 0; }
.ks-work-outer { padding: 48px 0 32px; }
.ks-team-row { padding: 14px; gap: 12px; }
.ks-end-btns { flex-direction: column; align-items: stretch; }
.ks-end-primary, .ks-end-outline { justify-content: center; }
}
/* ═══════════════════════════════════════════
COMPARISON TABLE — PREMIUM
═══════════════════════════════════════════ */
.compare-section { background: #08080f; position: relative; overflow: hidden; }
.cmp-bg-glow {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 900px; height: 600px; pointer-events: none;
background: radial-gradient(ellipse at center, rgba(58,155,213,0.06) 0%, rgba(76,175,125,0.04) 40%, transparent 70%);
}
.compare-section { padding: 60px 0; }
.compare-section .section-title { margin-bottom: 8px; }
.compare-section .section-label { margin-bottom: 8px; }
/* Section subtext */
.cmp-sub {
font-size: 14px;
color: rgba(160,160,200,0.48);
margin: 0;
letter-spacing: 0.1px;
}
/* Header */
.cmp-header { margin-bottom: 32px; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.cmp-header.cmp-in { opacity: 1; transform: translateY(0); }
/* Wrapper */
.cmp-table-wrap {
opacity: 0; transform: translateY(20px);
transition: opacity 0.55s ease 0.15s, transform 0.55s ease 0.15s;
}
.cmp-table-wrap.cmp-in { opacity: 1; transform: translateY(0); }
/* Table grid */
.cmp-table {
background: rgba(255,255,255,0.025);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.065);
border-radius: 20px;
overflow: hidden;
}
/* Column grid: feature wider, KLG dominant, Other recessed */
.cmp-head, .cmp-row {
display: grid;
grid-template-columns: 1.4fr 1.15fr 0.85fr;
align-items: center;
}
/* Header row */
.cmp-head {
border-bottom: 1px solid rgba(255,255,255,0.065);
}
.cmp-head-col {
display: flex;
align-items: center;
justify-content: center;
}
.cmp-head-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 14px 20px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
width: 100%;
}
.cmp-head-sub {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.2px;
text-transform: none;
opacity: 0.60;
}
.cmp-head-klg {
background: rgba(76,175,125,0.10);
color: var(--green);
border-left: 1px solid rgba(76,175,125,0.22);
border-right: 1px solid rgba(76,175,125,0.22);
animation: cmpGlow 5s ease-in-out infinite;
}
.cmp-head-klg .cmp-head-sub { color: rgba(76,175,125,0.70); }
@keyframes cmpGlow {
0%, 100% { box-shadow: inset 0 0 40px rgba(76,175,125,0); }
50% { box-shadow: inset 0 0 40px rgba(76,175,125,0.08); }
}
.cmp-head-other { color: #44445a; }
.cmp-head-other .cmp-head-sub { color: #3a3a52; }
/* Data rows */
.cmp-row {
border-bottom: 1px solid rgba(255,255,255,0.042);
opacity: 0;
transform: translateY(14px);
transition: opacity 0.68s cubic-bezier(0.22,1,0.36,1), transform 0.68s cubic-bezier(0.22,1,0.36,1), background 0.22s ease;
}
.cmp-row.cmp-in { opacity: 1; transform: translateY(0); }
.cmp-row:last-child { border-bottom: none; }
.cmp-row:nth-child(even) { background: rgba(255,255,255,0.012); }
/* Row hover — KLG wins, Other recedes, text scales up */
.cmp-row:hover { background: rgba(255,255,255,0.035); }
.cmp-row:hover .cmp-col-klg {
background: rgba(76,175,125,0.11);
box-shadow: inset 0 0 28px rgba(76,175,125,0.10);
transform: scale(1.025);
}
.cmp-row:hover .cmp-col-feature {
color: rgba(200,205,240,0.80);
transform: scale(1.03);
}
.cmp-row:hover .cmp-col-other { opacity: 0.42; }
/* Highlighted emotional rows */
.cmp-row--highlight .cmp-col-feature { color: rgba(210,215,240,0.78); }
.cmp-row--highlight .cmp-col-klg { color: #e0f8ec; }
/* Cells */
.cmp-col-feature {
padding: 13px 22px;
font-size: 14px;
font-weight: 500;
color: #8888aa;
transition: color 0.3s ease, transform 0.38s cubic-bezier(0.22,1,0.36,1);
transform-origin: left center;
}
.cmp-col-klg {
padding: 13px 20px;
font-size: 14px;
font-weight: 600;
color: #d8f5e8;
background: rgba(76,175,125,0.065);
border-left: 1px solid rgba(76,175,125,0.18);
border-right: 1px solid rgba(76,175,125,0.18);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background 0.28s ease, box-shadow 0.28s ease, transform 0.38s cubic-bezier(0.22,1,0.36,1);
animation: cmpGlow 5s ease-in-out infinite;
transform-origin: center center;
}
.cmp-col-other {
padding: 13px 20px;
font-size: 14px;
font-weight: 400;
color: #42425a;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: opacity 0.28s ease;
}
/* Helper text inside KLG cells — centered under value */
.cmp-cell-text {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.cmp-row-helper {
font-size: 10.5px;
font-weight: 400;
color: rgba(120,200,155,0.58);
overflow: hidden;
max-height: 0;
opacity: 0;
line-height: 1.3;
margin-top: 0;
letter-spacing: 0.1px;
white-space: nowrap;
transition:
max-height 0.32s cubic-bezier(0.22,1,0.36,1),
opacity 0.25s ease 0.05s,
margin-top 0.25s ease;
}
.cmp-row:hover .cmp-row-helper {
max-height: 18px;
opacity: 1;
margin-top: 3px;
}
/* Icons */
.cmp-check { color: var(--green); flex-shrink: 0; }
.cmp-warn { color: #a06030; flex-shrink: 0; }
.cmp-neutral { color: #3a3a52; flex-shrink: 0; }
/* Trust strip */
.cmp-badges {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: 16px;
flex-wrap: wrap;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
}
.cmp-badges.cmp-in { opacity: 1; transform: translateY(0); }
.cmp-trust-item {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
color: rgba(120,185,150,0.65);
white-space: nowrap;
}
.cmp-trust-item i { font-size: 9px; color: var(--green); opacity: 0.70; }
.cmp-trust-div {
width: 1px; height: 12px;
background: rgba(76,175,125,0.18);
flex-shrink: 0;
}
/* CTA */
.cmp-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-top: 24px;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s ease 0.65s, transform 0.5s ease 0.65s;
}
.cmp-cta.cmp-in { opacity: 1; transform: translateY(0); }
.cmp-cta-headline {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.8px;
color: #fff;
}
.cmp-cta-sub {
font-size: 12.5px;
color: rgba(150,150,195,0.45);
margin: 0 0 6px;
}
.cmp-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
width: 340px;
max-width: 100%;
justify-content: center;
background: linear-gradient(135deg, #4caf7d, #3a9bd5);
color: #fff;
font-size: 15px;
font-weight: 700;
border-radius: 12px;
text-decoration: none;
box-shadow: 0 4px 22px rgba(76,175,125,0.28);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cmp-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 36px rgba(76,175,125,0.42);
}
.cmp-cta-btn:hover .cmp-arrow { transform: translateX(4px); }
.cmp-arrow { transition: transform 0.25s ease; }
.cmp-cta-link {
font-size: 12.5px;
color: rgba(76,175,125,0.48);
text-decoration: none;
transition: color 0.25s ease;
}
.cmp-cta-link:hover { color: var(--green); }
/* Mobile cards */
.cmp-mobile-cards { display: none; }
.cmp-mc {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
padding: 18px;
margin-bottom: 10px;
}
.cmp-mc-feat { font-size: 11px; font-weight: 600; color: rgba(120,120,160,0.65); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.cmp-mc-klg {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 700; color: #d8f5e8;
padding: 10px 14px;
background: rgba(76,175,125,0.08);
border: 1px solid rgba(76,175,125,0.18);
border-radius: 10px;
margin-bottom: 8px;
}
.cmp-mc-klg i { color: var(--green); }
.cmp-mc-other {
display: flex; align-items: center; gap: 8px;
font-size: 14px; color: #40405a;
padding: 10px 14px;
background: rgba(255,255,255,0.018);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
}
.cmp-mc-other i { color: #a06030; }
@media (prefers-reduced-motion: reduce) {
.cmp-header, .cmp-table-wrap, .cmp-row, .cmp-badges, .cmp-cta {
opacity: 1 !important; transform: none !important; transition: none !important;
}
.cmp-head-klg, .cmp-col-klg { animation: none !important; }
}
/* ═══════════════════════════════════════════
ON THE ROAD IN 48 HOURS — CINEMATIC SCROLL JOURNEY
Pinned canvas frame-sequence (truck driving, scroll-scrubbed) with a
Cinematic Progress Rail overlay (rail/marker/step number/time badge/
icon/headline/copy) driven by the same GSAP timeline. See script.js.
═══════════════════════════════════════════ */
.journey-vs-section { background: #050608; position: relative; padding-top: 100px; padding-bottom: 32px; }
.journey-vs-section .section-label { color: var(--amber); animation: none; }
.journey-vs-section .section-label::before { background: linear-gradient(90deg, transparent, var(--amber)); animation: none; }
.journey-vs-section .section-label::after { background: linear-gradient(90deg, var(--amber), transparent); animation: none; }
.how-apply-badge {
font-size: 13.5px; font-weight: 600; color: var(--green);
letter-spacing: 0.2px; margin: 0 0 30px;
}
.journey-vs-pin {
--jvs-desktop-frame-h: min(calc(100vw / 2.4), 666.667px);
height: 100vh;
position: relative;
display: flex; align-items: flex-start; justify-content: center;
overflow: hidden;
background: radial-gradient(ellipse 90% 65% at 50% 0%, rgba(5,6,8,0.6) 0%, #000 100%);
}
.journey-vs-frame {
position: relative;
width: 100%; max-width: 1600px;
aspect-ratio: 2.4/1;
background: #000;
overflow: hidden;
margin: 0 auto;
box-shadow: 0 40px 120px rgba(0,0,0,0.6);
}
.journey-vs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* ── Brand watermark — fills the unavoidable letterbox space below the frame
(frame is aspect-ratio-capped, pin is 100vh; see .journey-vs-pin) with a
quiet brand signature instead of leaving it visually empty. Sits behind
the frame's own z-stack, absolutely positioned so it never affects flex
layout of the frame itself. Reveal/hold/fade driven by the existing
railTl GSAP timeline in script.js — no new animation system. Deliberately
NOT a pure stroke outline (reads as a cheap CSS effect) — a whisper-low
translucent fill plus a hairline edge and a very soft glow, so it feels
painted into the scene rather than typed on top of it. Opacity stays low
by design at every layer (wrapper reveal AND the text's own alpha) — it's
meant to be noticed on a second look, not read like a headline. ── */
.jvs-watermark {
position: absolute;
inset: var(--jvs-desktop-frame-h) 0 0;
z-index: 2;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
pointer-events: none;
opacity: 0;
}
.jvs-watermark-text {
display: flex; flex-direction: column; align-items: center;
gap: 0.05em;
}
.jvs-watermark-text span {
display: block;
font-size: clamp(30px, 4.6vw, 80px);
font-weight: 600;
letter-spacing: 6.5px;
text-transform: uppercase;
line-height: 1.08;
white-space: nowrap;
color: rgba(228,178,104,0.05);
-webkit-text-stroke: 0.5px rgba(228,178,104,0.14);
text-stroke: 0.5px rgba(228,178,104,0.14);
text-shadow: 0 0 22px rgba(228,178,104,0.08);
}
/* Wide, short desktop windows leave less vertical room below the 2.4:1
cinematic frame. Scale the two-line signature from that actual remaining
height so neither line is clipped by the pinned chapter's overflow. On
regular/tall desktops 4.6vw remains the limiting value, preserving the
established composition. */
@media (min-width: 1025px) {
.jvs-watermark-text span {
font-size: clamp(
24px,
min(
4.6vw,
calc((100vh - var(--jvs-desktop-frame-h) - 24px) / 2.18)
),
80px
);
}
}
/* Mobile: the frame (width-bound, aspect-ratio 2.4/1) is much shorter than
the 100vh pin at narrow viewports, so the bottom-anchored desktop position
leaves the wordmark stranded far below the frame with a dead void between
them. Anchor it to the frame's own height instead (100vw / 2.4, same math
as the aspect-ratio) so it sits just under the frame — attached to the
cinematic moment, not floating at the foot of an empty pin. */
@media (max-width: 680px) {
.jvs-watermark {
align-items: flex-start;
justify-content: center;
padding-bottom: 0;
padding-top: calc(100vw / 2.4 + 16px);
}
.jvs-watermark-text span {
font-size: clamp(22px, 7.6vw, 32px);
letter-spacing: 4px;
}
}
/* ── Cinematic Progress Rail ── */
.jvs-overlay {
position: absolute; left: calc(6.5% + 24px); bottom: 21%; z-index: 5;
display: flex; align-items: flex-end; gap: 22px;
max-width: 460px;
opacity: 0;
}
/* Local readability wash — no box, no card, just enough to lift text off a
bright frame. Always present, never animated. Kept deliberately faint —
must never read as a panel/card edge. */
.jvs-scrim {
position: absolute; left: -40px; right: -60px; top: -60px; bottom: -40px;
z-index: -1; pointer-events: none;
background: radial-gradient(ellipse at left center, rgba(4,8,11,0.36), rgba(4,8,11,0.14) 45%, transparent 74%);
}
.jvs-rail { position: relative; width: 1px; height: 130px; flex-shrink: 0; margin-bottom: 3px; }
.jvs-rail-line { position: absolute; inset: 0; width: 1px; background: rgba(255,255,255,0.15); }
.jvs-rail-fill {
position: absolute; left: 0; top: 0; width: 1px; height: 0;
background: linear-gradient(180deg, var(--green), var(--blue));
opacity: 0.42;
}
.jvs-rail-dot {
position: absolute; left: 50%; width: 6px; height: 6px; border-radius: 50%;
transform: translate(-50%,-50%);
background: rgba(8,10,13,0.7); border: 1px solid rgba(255,255,255,0.32);
}
.jvs-rail-marker {
position: absolute; left: 50%; top: 0; width: 7px; height: 7px; border-radius: 50%;
transform: translate(-50%,-50%) scale(0.6);
background: #fff;
box-shadow: 0 0 0 3px rgba(76,175,125,0.16), 0 0 10px rgba(76,175,125,0.45);
opacity: 0;
}
.jvs-content { position: relative; padding-bottom: 2px; }
.jvs-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.jvs-step-num-mask { display: inline-block; overflow: hidden; height: 16px; line-height: 16px; }
.jvs-step-num {
position: relative; display: inline-block;
font-size: 13px; font-weight: 500; letter-spacing: 0.12em; color: rgba(255,255,255,0.55);
font-variant-numeric: tabular-nums; line-height: 16px;
}
.jvs-badge {
position: relative; display: inline-flex; align-items: center; gap: 6px;
height: 26px; padding-inline: 10px;
background: rgba(8,14,18,0.28); border: 1px solid rgba(255,255,255,0.16);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-radius: 8px;
}
.jvs-badge-dot {
width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--green), var(--blue));
}
.jvs-badge-text-mask { display: inline-block; overflow: hidden; height: 14px; line-height: 14px; }
.jvs-badge-text {
position: relative; display: inline-block;
font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255,255,255,0.88); white-space: nowrap; line-height: 14px;
}
.jvs-icon { width: 20px; height: 20px; margin-bottom: 8px; color: rgba(255,255,255,0.92); opacity: 0; }
.jvs-icon svg { width: 100%; height: 100%; display: block; }
.jvs-icon svg path, .jvs-icon svg rect, .jvs-icon svg circle, .jvs-icon svg line, .jvs-icon svg polyline {
vector-effect: non-scaling-stroke;
}
.jvs-headline-mask { overflow: hidden; margin-bottom: 10px; }
.jvs-headline {
font-size: clamp(28px, 2.3vw, 44px); font-weight: 600; line-height: 1;
letter-spacing: -0.025em; color: rgba(255,250,242,0.97); margin: 0;
text-shadow: 0 3px 18px rgba(0,0,0,0.55);
}
.jvs-copy {
font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.72); margin: 0;
max-width: 34ch;
}
/* ── Closing CTA — final chapter of the same pinned timeline, not a card ──
Always laid out (flex-centered, full frame) so it's ready the instant the
GSAP timeline in script.js starts revealing it; opacity/transform on the
inner elements start at 0 in this stylesheet and are the only thing script.js
ever touches for these nodes — matches the file's existing pattern of
authoring the hidden baseline in CSS/at-position-0, not inventing a second
source of truth for "hidden". */
.jvs-cta {
position: absolute; inset: 0; z-index: 6;
display: flex; align-items: center; justify-content: center;
text-align: center; pointer-events: none;
}
.jvs-cta-scrim {
position: absolute; inset: 0; opacity: 0;
background: radial-gradient(ellipse at center, rgba(5,6,8,0.62) 0%, rgba(5,6,8,0.8) 60%, rgba(5,6,8,0.88) 100%);
}
.jvs-cta-inner { position: relative; z-index: 1; max-width: 520px; padding: 0 24px; }
.jvs-cta-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
color: var(--green); margin-bottom: 14px;
opacity: 0; transform: translateY(8px);
}
.jvs-cta-headline {
font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.8px;
color: #fff; line-height: 1.15; margin: 0 0 12px;
opacity: 0; transform: translateY(14px);
}
.jvs-cta-sub {
font-size: 14.5px; color: rgba(255,255,255,0.62); line-height: 1.5; margin: 0 0 28px;
opacity: 0; transform: translateY(14px);
}
.jvs-cta-actions {
display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
opacity: 0; transform: translateY(10px);
}
/* Outline secondary — same restrained DNA as the site's other dark-surface
outline button (border only, no fill, hover -> green), correctly
namespaced to this component; also reused as-is by the reduced-motion
fallback CTA below. */
.jvs-cta-outline {
display: inline-flex; align-items: center; gap: 9px;
height: 58px; padding: 0 26px; border-radius: 15px;
border: 1px solid rgba(255,255,255,0.16);
color: rgba(255,255,255,0.72); font-size: 15px; font-weight: 600;
text-decoration: none;
transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.jvs-cta-outline i { font-size: 12px; }
.jvs-cta-outline:hover { border-color: rgba(76,175,125,0.45); color: #fff; transform: translateY(-2px); }
@media (max-width: 640px) {
.jvs-cta-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin: 0 auto; }
.jvs-cta-actions .klg-cta, .jvs-cta-outline { justify-content: center; }
}
/* Mobile/tablet composition: keep the cinematic frame, but stop forcing all
of the useful content into the frame's very short 2.4:1 letterbox. The
canvas becomes a taller, center-cropped visual chapter at the top; process
copy and the closing CTA use the remaining pinned viewport below it. */
@media (max-width: 1024px) {
.journey-vs-pin {
--jvs-mobile-media-h: clamp(
270px,
min(max(min(44svh, 90vw), calc(100vw / 2.2)), calc(100svh - 230px)),
520px
);
height: 100svh;
display: block;
}
.journey-vs-frame {
width: 100%; max-width: none; height: 100%;
aspect-ratio: auto;
margin: 0;
background:
radial-gradient(circle at 18% 68%, rgba(51,104,111,0.12), transparent 34%),
radial-gradient(circle at 82% 84%, rgba(228,178,104,0.05), transparent 32%),
linear-gradient(180deg, #10151b 0%, #050608 46%, #030405 100%);
box-shadow: none;
}
.journey-vs-frame::after {
content: "";
position: absolute; z-index: 1;
left: 0; right: 0;
top: calc(var(--jvs-mobile-media-h) - 72px);
height: 74px;
pointer-events: none;
background: linear-gradient(180deg, transparent 0%, #050608 100%);
}
.journey-vs-canvas {
inset: 0 auto auto 48%;
width: auto; min-width: 100%;
height: var(--jvs-mobile-media-h);
transform: translateX(-48%);
}
.jvs-overlay {
left: clamp(22px, 6vw, 46px);
right: clamp(22px, 6vw, 46px);
top: calc(50% + var(--jvs-mobile-media-h) / 2);
bottom: auto;
max-width: none;
gap: 18px;
transform: translateY(-50%);
}
.jvs-watermark {
inset: 0;
align-items: flex-start;
justify-content: center;
padding: calc(var(--jvs-mobile-media-h) + 18px) 0 0;
}
.jvs-cta {
inset: var(--jvs-mobile-media-h) 0 0;
align-items: center;
}
.jvs-cta-scrim {
background:
radial-gradient(ellipse at center, rgba(5,6,8,0.68) 0%, rgba(5,6,8,0.86) 68%, rgba(5,6,8,0.94) 100%),
linear-gradient(180deg, rgba(5,6,8,0.28), #050608 32%);
}
.jvs-cta-inner { width: 100%; }
.jvs-cta-sub { margin-bottom: 22px; }
}
.journey-vs-fallback { display: none; }
.journey-vs-fallback-cta { display: none; }
@media (prefers-reduced-motion: reduce) {
.journey-vs-pin { display: none; }
.journey-vs-fallback {
display: block; max-width: 1600px; margin: 0 auto; padding: 40px 40px 60px;
}
.journey-vs-fallback-img { width: 100%; border-radius: 12px; display: block; margin-bottom: 24px; }
.journey-vs-fallback-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; color: #fff; font-size: 14px; }
.journey-vs-fallback-cta { display: block; text-align: center; margin-top: 44px; }
.journey-vs-fallback-cta-line { font-size: clamp(22px, 2.8vw, 30px); font-weight: 800; color: #fff; margin: 0 0 22px; }
.journey-vs-fallback-cta-actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
.journey-vs-fallback-cta-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin: 0 auto; }
.journey-vs-fallback-cta-actions .klg-cta, .journey-vs-fallback-cta-actions .jvs-cta-outline { justify-content: center; }
}
/* ═══════════════════════════════════════════
EARNINGS CALCULATOR
═══════════════════════════════════════════ */
/* Section base gradient */
.earnings-section {
background: transparent;
position: relative; overflow: hidden;
}
/* Static pre-JS baseline for the Earnings entrance timeline (script.js,
"EARNINGS ENTRANCE") — .hero-fx/.nav-fx's sibling for this section.
Deliberately NOT applied to .section-label itself (that element has its
own infinite labelGlowAmber glow animation on opacity/filter, which would
fight a JS-driven opacity tween on the same element) — a plain wrapper
(.ek-eyebrow-fx) carries the entrance fade instead, leaving the glow
untouched. */
.ek-fx { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.ek-fx { opacity: 1 !important; transform: none !important; filter: none !important; }
}
.earnings-section .container { position: relative; z-index: 1; }
/* Topographic contour texture — 2% opacity, barely noticeable premium grain */
.calc-particles {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cellipse cx='80' cy='60' rx='72' ry='52' fill='none' stroke='white' stroke-width='0.6'/%3E%3Cellipse cx='80' cy='60' rx='58' ry='40' fill='none' stroke='white' stroke-width='0.5'/%3E%3Cellipse cx='80' cy='60' rx='44' ry='30' fill='none' stroke='white' stroke-width='0.5'/%3E%3Cellipse cx='80' cy='60' rx='30' ry='20' fill='none' stroke='white' stroke-width='0.4'/%3E%3Cellipse cx='80' cy='60' rx='16' ry='10' fill='none' stroke='white' stroke-width='0.4'/%3E%3C/svg%3E");
background-size: 160px 120px;
background-repeat: repeat;
background-position: center;
opacity: 0.022;
}
.ek-cards.reveal:not(.visible) { opacity: 0; transform: translateY(12px); }
.ek-cards.reveal.visible { animation: calcFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.52s both; }
.ek-conclusion.reveal:not(.visible) { opacity: 0; transform: translateY(12px); }
.ek-conclusion.reveal.visible { animation: calcFadeUp 0.55s cubic-bezier(0.22,1,0.36,1) 0.68s both; }
@keyframes calcSlideLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@keyframes calcSlideRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes calcFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* CTA nudge — one-shot pulse after user changes a value */
.calc-apply-btn.is-nudge {
animation: calcBtnNudge 0.7s cubic-bezier(0.22,1,0.36,1) forwards !important;
}
@keyframes calcBtnNudge {
0% { transform: translateY(0); box-shadow: 0 4px 24px rgba(76,175,125,0.24); }
38% { transform: translateY(-4px); box-shadow: 0 14px 44px rgba(76,175,125,0.42); }
100% { transform: translateY(0); box-shadow: 0 4px 24px rgba(76,175,125,0.24); }
}
/* Card */
.calc-wrap {
position: relative; overflow: hidden;
background: linear-gradient(160deg,
rgba(8,14,24,0.78) 0%,
rgba(4,7,14,0.82) 50%,
rgba(6,12,22,0.78) 100%);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 22px; padding: 18px 40px 24px;
display: flex; flex-direction: column; gap: 12px;
max-width: 900px; margin: 0 auto;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.07),
inset 0 -1px 0 rgba(255,255,255,0.03),
0 0 0 1px rgba(255,255,255,0.03),
0 8px 32px rgba(0,0,0,0.48),
0 32px 96px rgba(0,0,0,0.64),
0 80px 180px rgba(0,0,0,0.40);
isolation: isolate;
}
/* ═══════════════════════════════════════════
EARNINGS — LIGHT SECTION REDESIGN
Scoped under .earnings-light so no other
(dark) section using shared classes is affected.
═══════════════════════════════════════════ */
.earnings-section.earnings-light { background: #f2ede2; padding: 72px 0 64px; margin-top: 0; position: relative; z-index: 2; }
.earnings-light::before { display: none; }
.earnings-light .section-label {
color: #a3742f;
/* Autonomous glow disabled for this section only — Earnings should go
fully calm after its entrance. Keyframe itself stays defined globally
(other sections using labelGlowAmber are unaffected). */
animation: none;
}
.earnings-light .section-label::before { background: linear-gradient(90deg, transparent, #a3742f); }
.earnings-light .section-label::after { background: linear-gradient(90deg, #a3742f, transparent); }
.earnings-light .section-title { color: #161409; }
.earnings-light .section-title .gradient-text { background: linear-gradient(135deg, #c9852f, #a3742f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.earn-lede { font-size: 15.5px; line-height: 1.6; color: #6b6552; max-width: 460px; margin: 0 auto 28px; }
.earnings-light .ek-panel {
background: #fffdf9;
border: 1px solid #e5ddc9;
backdrop-filter: none; -webkit-backdrop-filter: none;
box-shadow: 0 30px 60px -30px rgba(30,20,0,0.18);
max-width: 620px;
}
.earnings-light .calc-wrap {
padding: 30px 38px 22px;
}
.earnings-light .ek-panel .calc-wrap {
border-bottom: 1px solid #ece4d0;
}
.earnings-light .ek-slider-label { color: #8a8168; }
.earnings-light .ek-gross-num { color: #161409; filter: none; font-size: clamp(40px, 5vw, 52px); }
.earnings-light .calc-range-labels { color: #a39a80; }
.earnings-light .ek-avg-ref { color: #8a8168; }
.earnings-light .ek-avg-ref strong { color: #a3742f; }
.earnings-light .calc-slider { background: rgba(0,0,0,0.08); }
.ek-breakdown { border-top: 1px solid #ece4d0; border-bottom: 1px solid #ece4d0; margin: 20px 0 16px; }
.ek-b-row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; font-size: 14.5px; border-top: 1px dashed #ece4d0; }
.ek-b-row:first-child { border-top: none; }
.ek-b-l { color: #6b6552; }
.ek-b-v { font-weight: 700; color: #161409; font-variant-numeric: tabular-nums lining-nums; }
.ek-b-total { border-top: 2px solid #161409; margin-top: 2px; padding-top: 14px; font-size: 19px; }
.ek-b-total .ek-b-l { color: #161409; font-weight: 800; }
.ek-b-total .ek-b-v { color: #a3742f; font-size: 26px; }
.ek-bar-9010 { display: flex; height: 12px; border-radius: 7px; overflow: hidden; margin: 4px 0 8px; }
.ek-bar-you { background: linear-gradient(90deg,#e0ac54,#a3742f); width: 90%; }
.ek-bar-fee { background: #dcd4bc; width: 10%; }
.ek-bar-caption { display: flex; justify-content: space-between; font-size: 11px; color: #8a8168; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.earnings-light .ek-th-yr { color: #8a8168; font-size: 13px; margin-top: 14px; text-align: center; }
.ek-disclaimer { font-size: 10.5px; line-height: 1.5; color: #b8ae94; margin: 14px 0 0; text-align: center; }
.ek-plus-marker { display: inline-flex; align-items: center; gap: 6px; }
.ek-plus-marker i { color: #4c8c5f; font-size: 10px; flex-shrink: 0; }
.ek-compare-adv { color: #3c7a4d !important; }
/* "Extra kept with KLG" briefly emphasizes while the truck slider is
actively changing (script.js EARNINGS CALCULATOR, markSavingsUpdating) —
fast in (~180ms) while dragging, slower settle back to rest (~400ms) once
input stops. Deliberately scoped to #cgSavingsWeek only, not .ek-compare-adv
generally, so this can't silently spread to another element that later
reuses that class. Row gets only a near-invisible tint, never a pill/card;
all visible emphasis lives on the number itself. */
#cgSavingsWeek {
display: inline-block;
font-size: 16px;
font-weight: 900;
transition: color 400ms cubic-bezier(0.22,1,0.36,1), transform 400ms cubic-bezier(0.22,1,0.36,1);
}
#cgSavingsWeek.is-updating {
color: #1c9e54 !important;
transform: scale(1.05) translateY(-1px);
transition: color 180ms cubic-bezier(0.22,1,0.36,1), transform 180ms cubic-bezier(0.22,1,0.36,1);
}
.ek-compare-row.ek-compare-row--savings {
margin: 3px -10px 2px;
padding: 9px 10px;
border: 1px solid rgba(60,122,77,0.13);
border-radius: 8px;
background: rgba(60,122,77,0.065);
transition: background 400ms ease, border-color 400ms ease;
}
.ek-compare-row--savings .ek-plus-marker {
color: #315f42;
font-weight: 700;
}
.ek-compare-row.ek-compare-row--savings:has(#cgSavingsWeek.is-updating) {
background: rgba(60,122,77,0.11);
border-color: rgba(60,122,77,0.22);
transition: background 180ms ease, border-color 180ms ease;
}
@media (prefers-reduced-motion: reduce) {
#cgSavingsWeek.is-updating { transform: none; }
}
.ek-compare-diff-val {
font-variant-numeric: tabular-nums lining-nums;
/* Same amber family as the main Weekly Settlement result (#a3742f), but
kept weaker than it (15px/800 here vs 26px there) — this is proof, not
a second headline. */
color: #a3742f; font-weight: 800; font-size: 15px;
}
.ek-compare { max-width: 620px; margin: 26px auto 0; background: #eee6d2; border-radius: 14px; padding: 22px 28px; }
.ek-compare-title {
font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
color: #96692a; margin-bottom: 10px; position: relative; text-align: center;
transition: color 350ms cubic-bezier(0.22,1,0.36,1);
}
/* Short thin line under the label — the one structural accent, restrained
enough not to read as a divider or a pill. margin:auto centers it under
the now-centered heading (text-align only centers inline content, not
this block-level pseudo-element, hence the explicit auto margins). */
.ek-compare-title::after {
content: ''; display: block; width: 28px; height: 2px; margin: 8px auto 0;
background: #96692a; opacity: 0.55; border-radius: 1px;
transition: opacity 350ms ease, background 350ms ease;
}
/* Secondary, much softer echo of the same #ekCompare.is-updating state that
drives #cgSavingsWeek's green emphasis (script.js markSavingsUpdating) —
one shared trigger/timer, two responses at different strengths. Stays in
the amber family (never turns green), no scale, so it reads as "quietly
awake" rather than a second competing headline.
No transform here (unlike #cgSavingsWeek) — this element already carries
a GSAP-managed inline transform from its own entrance animation (.ek-fx),
which would silently win over any transform set here and never visibly
apply. Color/underline-only avoids that fight entirely; the spec listed
the translate as optional "only if it improves polish" for exactly this
reason. */
#ekCompare.is-updating .ek-compare-title {
color: #b8822f;
transition: color 180ms cubic-bezier(0.22,1,0.36,1);
}
#ekCompare.is-updating .ek-compare-title::after {
opacity: 0.6;
background: #b8822f;
transition: opacity 180ms ease, background 180ms ease;
}
.ek-compare-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; color: #4a4536; }
.ek-compare-row b { color: #161409; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
/* Label half stays neutral/muted (matches .ek-b-l) — only .ek-compare-diff-val
(above) carries the amber accent, so the row reads as proof under the
result rather than a second, equally-loud headline. */
.ek-compare-diff { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ddd2b4; font-size: 14px; font-weight: 600; color: #6b6552; display: flex; justify-content: space-between; font-variant-numeric: tabular-nums lining-nums; }
.ek-diff-underline { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.earn-cta-row { text-align: center; margin-top: 30px; }
.earn-micro { margin-top: 10px; font-size: 12px; color: #8a8168; }
/* Ambient glow — sits behind the card, bleeds into the grid */
.calc-wrap::after {
content: '';
position: absolute;
inset: -60px -80px;
z-index: -1;
pointer-events: none;
background:
radial-gradient(ellipse 70% 55% at 72% 60%, rgba(76,175,125,0.10) 0%, transparent 65%),
radial-gradient(ellipse 50% 40% at 25% 40%, rgba(58,155,213,0.07) 0%, transparent 60%);
filter: blur(32px);
animation: calcAmbient 12s ease-in-out infinite alternate;
}
@keyframes calcAmbient {
0% { opacity: 0.8; transform: scale(1) translate(0, 0); }
100% { opacity: 1.0; transform: scale(1.04) translate(12px, -8px); }
}
/* Top-edge accent line — static, very subtle */
.calc-wrap::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,0.14) 35%,
rgba(255,255,255,0.10) 65%,
transparent 100%);
opacity: 1;
}
/* Cursor spotlight layer */
.calc-cursor-glow {
position: absolute; inset: 0; border-radius: inherit;
background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
rgba(76,175,125,0.11), transparent 65%);
opacity: 0; pointer-events: none; z-index: 0;
transition: opacity 0.4s ease;
}
.calc-wrap:hover .calc-cursor-glow { opacity: 1; }
.calc-wrap > *:not(.calc-cursor-glow) { position: relative; z-index: 1; }
/* Presets */
.calc-presets { display: flex; gap: 8px; margin-bottom: 40px; }
.calc-preset {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 13px 8px; border-radius: 12px;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
color: rgba(255,255,255,0.45); cursor: pointer;
transition: border-color 200ms ease, background 200ms ease,
color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.calc-preset:hover {
border-color: rgba(76,175,125,0.32);
background: rgba(76,175,125,0.055);
color: rgba(255,255,255,0.82);
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.calc-preset.is-active {
background: rgba(76,175,125,0.09);
border-color: rgba(76,175,125,0.40);
color: #fff;
transform: translateY(-3px);
box-shadow:
0 6px 20px rgba(76,175,125,0.14),
0 0 0 1px rgba(76,175,125,0.10),
inset 0 1px 0 rgba(76,175,125,0.18);
}
.cp-label { font-size: 12px; font-weight: 700; letter-spacing: 0.2px; }
.cp-val { font-size: 10px; color: rgba(255,255,255,0.35); }
.calc-preset.is-active .cp-val { color: #4caf7d; }
/* Sliders */
.calc-field { margin-bottom: 28px; }
.calc-field-row {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 14px;
}
.calc-field-row label {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 1.5px; color: rgba(255,255,255,0.4);
}
.calc-field-val { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -0.5px; }
/* KLG avg pin on miles slider — at 50% = 3,500 mi */
.calc-slider-wrap { position: relative; }
.calc-avg-pin {
position: absolute; left: 50%; top: -22px;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 2px;
pointer-events: none;
}
.calc-avg-label {
font-size: 8px; font-weight: 800; letter-spacing: 1.2px;
color: rgba(76,175,125,0.55); text-transform: uppercase; white-space: nowrap;
}
.calc-avg-pin::after {
content: ''; width: 1px; height: 10px;
background: linear-gradient(to bottom, rgba(76,175,125,0.5), transparent);
}
.calc-slider {
width: 100%; -webkit-appearance: none; -moz-appearance: none; height: 5px; border-radius: 5px;
background: rgba(255,255,255,0.08); outline: none; border: none; cursor: pointer;
transition: background 180ms linear;
}
/* Without an explicit border:none here, the site-wide `input:focus{border-color:
var(--green)}` rule colors this input's default UA border green on focus —
a generic form-field treatment never meant for this custom slider. */
/* Smoothing is for discrete click/jump changes only — during an active drag
(script.js toggles this class) input fires continuously, and a rolling
transition would trail the pointer instead of tracking it 1:1. */
.calc-slider.is-dragging { transition: none; }
/* Firefox draws a dotted focus box around the whole input by default —
::-moz-focus-outer removes it so the real focus treatment below (the
thumb's own ring) is the only one shown. */
.calc-slider::-moz-focus-outer { border: 0; }
/* Thumb — precise/premium regulator character, not a generic range input.
17px so it reads as a control, not a decorative knob. -6px margin-top is
the classic WebKit centering offset: (track height 5px - thumb 17px) / 2.
WebKit and Firefox rules are kept in fully separate rulesets throughout —
grouping ::-webkit-slider-thumb and ::-moz-range-thumb in one comma-list
would make the whole selector invalid in both engines (an unrecognized
vendor pseudo-element drops the entire rule, not just its own branch). */
.calc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 17px; height: 17px; border-radius: 50%;
margin-top: -6px;
background: linear-gradient(145deg, var(--amber-light) 0%, var(--amber) 100%);
border: 1.5px solid rgba(255,255,255,0.35);
cursor: grab;
/* Rest — crisp edge, restrained shadow, no permanent colored glow. */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.35),
0 1px 3px rgba(0,0,0,0.35),
0 2px 6px rgba(0,0,0,0.22);
transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.calc-slider::-moz-range-thumb {
-moz-appearance: none;
width: 17px; height: 17px; border-radius: 50%;
box-sizing: border-box; /* Firefox centers on the track natively */
background: linear-gradient(145deg, var(--amber-light) 0%, var(--amber) 100%);
border: 1.5px solid rgba(255,255,255,0.35);
cursor: grab;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.35),
0 1px 3px rgba(0,0,0,0.35),
0 2px 6px rgba(0,0,0,0.22);
transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
/* Hover — extremely small lift via shadow only, thumb never visibly enlarges. */
.calc-slider:hover::-webkit-slider-thumb {
border-color: rgba(255,255,255,0.45);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.4),
0 2px 5px rgba(0,0,0,0.4),
0 3px 9px rgba(0,0,0,0.26);
}
.calc-slider:hover::-moz-range-thumb {
border-color: rgba(255,255,255,0.45);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.4),
0 2px 5px rgba(0,0,0,0.4),
0 3px 9px rgba(0,0,0,0.26);
}
/* Active/drag — tactile compression, not growth: the thumb presses slightly
inward with a firmer edge and a tighter, grounded shadow (a hint of inset
darkness at the base) instead of the old expanding glow/halo. */
.calc-slider:active::-webkit-slider-thumb {
cursor: grabbing;
transform: scale(0.95);
border-color: rgba(255,255,255,0.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -1px 2px rgba(0,0,0,0.18),
0 1px 2px rgba(0,0,0,0.45);
}
.calc-slider:active::-moz-range-thumb {
cursor: grabbing;
transform: scale(0.95);
border-color: rgba(255,255,255,0.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -1px 2px rgba(0,0,0,0.18),
0 1px 2px rgba(0,0,0,0.45);
}
/* Focus (keyboard only) — thin, low-opacity amber ring, small offset. */
.calc-slider:focus-visible::-webkit-slider-thumb {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.35),
0 1px 3px rgba(0,0,0,0.35),
0 0 0 3px rgba(163,116,47,0.38);
}
.calc-slider:focus-visible::-moz-range-thumb {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.35),
0 1px 3px rgba(0,0,0,0.35),
0 0 0 3px rgba(163,116,47,0.38);
}
/* ── Earnings slider vehicle — real truck+trailer, approved (was "Variant B")
The round-thumb rules above are intentionally left in place as the
progressive-enhancement fallback: if script.js's injection fails for any
reason, #cgGross still renders as a fully working round-thumb slider.
Once script.js successfully builds .evt-layer, these rules make the
native thumb invisible and the vehicle becomes the visible control — the
native stays the real interactive element throughout (drag,
click-jump, keyboard, focus all still act on it directly).
Three crops of one approved photo (klg-slider-vehicle.png), nothing
hand-drawn or redrawn:
REAR = klg-slider-trailer-rear.png (rear wall + ALL trailer wheels
+ fenders — fixed size, always fully visible, never clipped)
CENTER = klg-slider-trailer-tile.png (clean sidewall sliver, tiled via
background-repeat-x — the ONLY thing that changes width)
FRONT = klg-slider-front-tractor.png (landing gear + full tractor incl.
its own wheels — fixed size, tractor nose = value point)
Composition: [REAR][CENTER][FRONT→] — REAR moves left as CENTER grows,
FRONT's right edge (tractor nose) always tracks the real slider value. At
progress=0 the trailer is already complete (rear+wheels+body+front), just
shorter — never clipped/incomplete at the low end. */
:root{
--evt-rail:rgba(80,72,55,0.30);
--evt-rail-hover:rgba(80,72,55,0.44);
--evt-progress:rgba(220,154,60,0.55);
--evt-progress-hover:rgba(220,154,60,0.72);
--evt-marker:#c9903f;
--evt-marker-hover:#dc9a3c;
}
#ekTruckEntranceWrap .calc-slider-wrap { height:22px; }
#cgGross{
background:transparent !important;
height:64px;
margin:0;
padding:0;
position:absolute;
left:0;
top:-23px;
z-index:2;
touch-action:pan-y;
}
#cgGross::-webkit-slider-thumb{ background:transparent !important; border:none !important; box-shadow:none !important; }
#cgGross::-moz-range-thumb{ background:transparent !important; border:none !important; box-shadow:none !important; }
/* -11px: shifts the whole vehicle+rail lane down as one rigid unit (moves
rail/wheel alignment along with it, nothing to recompute in JS) so the
trailer roof clears WEEKLY GROSS REVENUE / the main value comfortably.
(-6px, then -2px, then this final -3px pass.) */
.evt-layer{ position:absolute; left:0; bottom:-11px; width:100%; pointer-events:none; overflow:visible; transform-origin:right bottom; }
.evt-svg{ position:absolute; left:0; bottom:0; width:100%; overflow:visible; }
/* The vehicle is taller than its native range lane, so reserve real layout
space above that lane instead of letting a larger truck collide with the
gross-value header. Mobile needs a little more because that header stacks. */
#ekTruckEntranceWrap { padding-top: 14px; }
@media (max-width: 860px) {
#ekTruckEntranceWrap { padding-top: 18px; }
}
@media (min-width: 2400px) {
#ekTruckEntranceWrap { padding-top: 24px; }
}
.evt-rail-track{ stroke:var(--evt-rail); stroke-width:1.3; stroke-linecap:round; transition:stroke 200ms ease; }
.evt-rail-progress{ stroke:var(--evt-progress); stroke-width:1.3; stroke-linecap:round; transition:stroke 200ms ease; }
.evt-rail-marker{ fill:var(--evt-marker); transition:fill 200ms ease, r 150ms ease; }
.evt-rear, .evt-front{
position:absolute; bottom:0; pointer-events:none; user-select:none; -webkit-user-drag:none;
transition:left 160ms linear, filter 200ms ease;
}
.evt-center{
position:absolute; bottom:0; pointer-events:none;
background-repeat:repeat-x; background-position:left center;
transition:left 160ms linear, width 160ms linear, filter 200ms ease;
}
.evt-rear, .evt-front, .evt-center{ filter:drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
#cgGross.evt-armed{ cursor:grab; }
#cgGross.is-dragging{ cursor:grabbing; }
#cgGross.is-dragging ~ .evt-layer,
#cgGross.is-dragging ~ .evt-layer *{ transition:none !important; }
#cgGross.is-dragging ~ .evt-layer .evt-front{ transform:scale(0.99); transform-origin:right bottom; }
#cgGross.is-dragging ~ .evt-layer .evt-rear,
#cgGross.is-dragging ~ .evt-layer .evt-center,
#cgGross.is-dragging ~ .evt-layer .evt-front{ filter:drop-shadow(0 3px 6px rgba(0,0,0,.22)); }
#cgGross.is-dragging ~ .evt-layer .evt-rail-track{ stroke:var(--evt-rail-hover); }
#cgGross.is-dragging ~ .evt-layer .evt-rail-progress{ stroke:var(--evt-progress-hover); }
#cgGross.is-dragging ~ .evt-layer .evt-rail-marker{ fill:var(--evt-marker-hover); }
#cgGross:hover ~ .evt-layer .evt-rear,
#cgGross:hover ~ .evt-layer .evt-center,
#cgGross:hover ~ .evt-layer .evt-front{ filter:drop-shadow(0 3px 6px rgba(0,0,0,.18)); }
#cgGross:hover ~ .evt-layer .evt-rail-track{ stroke:var(--evt-rail-hover); }
#cgGross:hover ~ .evt-layer .evt-rail-progress{ stroke:var(--evt-progress-hover); }
#cgGross:hover ~ .evt-layer .evt-rail-marker{ fill:var(--evt-marker-hover); }
#cgGross:focus-visible ~ .evt-layer .evt-rail-track{ stroke:var(--evt-rail-hover); }
#cgGross:focus-visible ~ .evt-layer .evt-rail-progress{ stroke:var(--evt-progress-hover); }
#cgGross:focus-visible ~ .evt-layer .evt-rail-marker{ fill:var(--evt-marker-hover); r:2.6; }
.evt-drag-arrow{
position:absolute; bottom:13px; width:24px; height:12px;
overflow:visible; pointer-events:none; opacity:0.72;
transition:opacity 220ms ease;
filter:drop-shadow(0 1px 2px rgba(163,116,47,0.18));
}
.evt-drag-arrow path{
fill:none; stroke:#a3742f; stroke-width:1.45;
stroke-linecap:round; stroke-linejoin:round;
}
#cgGross.evt-learned ~ .evt-layer .evt-drag-arrow{ opacity:0; }
.evt-hint{
position:absolute; right:0; top:-18px; font-size:9px; font-weight:700; letter-spacing:1.6px;
text-transform:uppercase; color:#a89a7c; opacity:0; pointer-events:none;
transition:opacity 400ms ease;
}
.evt-hint.evt-hint-show{ opacity:0.85; }
@media (prefers-reduced-motion:reduce){
.evt-rear, .evt-center, .evt-front, .evt-rail-track, .evt-rail-progress, .evt-rail-marker{ transition:none !important; }
}
@media (max-width: 860px){
.evt-drag-arrow{ width:21px; height:11px; bottom:12px; }
}
.calc-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.2); margin-top: 8px; }
/* ── Truck Track Slider ── */
.ek-truck-track { position: relative; padding-top: 54px; }
/* Hide the native input but keep it interactive */
.ek-truck-track .calc-slider {
position: absolute; inset: 0; width: 100%; height: 100%;
opacity: 0; cursor: pointer; z-index: 10; margin: 0;
-webkit-appearance: none; background: transparent;
}
.ek-truck-track .calc-slider::-webkit-slider-thumb {
-webkit-appearance: none; width: 68px; height: 68px;
background: transparent; box-shadow: none; cursor: grab;
}
.ek-truck-track .calc-slider:active::-webkit-slider-thumb { cursor: grabbing; transform: none; }
/* The visual rail */
.ek-tt-rail {
position: relative; width: 100%; height: 40px;
display: flex; align-items: flex-end; pointer-events: none;
}
/* Road surface */
.ek-tt-rail::before {
content: '';
position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
background: rgba(255,255,255,0.06);
border-radius: 4px;
}
/* Dashed center line */
.ek-tt-rail::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 3px; height: 2px;
background: repeating-linear-gradient(
to right,
rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 8px,
transparent 8px, transparent 16px
);
}
/* Green fill left of cab */
.ek-tt-fill {
position: absolute; left: 0; bottom: 0; height: 8px;
border-radius: 4px;
background: linear-gradient(to right, rgba(76,175,125,0.18), rgba(76,175,125,0.42));
transition: width 0.06s linear;
}
/* Truck cab thumb */
.ek-tt-thumb {
position: absolute; bottom: 4px;
transform: translateX(-50%);
transition: left 0.06s linear;
z-index: 5;
}
.ek-tt-cab {
width: 68px; height: auto;
color: #fff;
filter: drop-shadow(0 0 10px rgba(76,175,125,0.55)) drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}
/* Trailer stop icons */
.ek-tt-stop {
position: absolute; bottom: 30px;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 3px;
transition: color 0.3s ease, filter 0.3s ease;
}
.ek-tt-svg {
width: 44px; height: auto;
color: rgba(255,255,255,0.18);
transition: color 0.3s ease, filter 0.3s ease;
}
.ek-tt-tag {
font-size: 8px; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase; color: rgba(255,255,255,0.18);
transition: color 0.3s ease; white-space: nowrap;
}
/* Active trailer (truck has reached or passed it) */
.ek-tt-stop.is-active .ek-tt-svg {
color: rgba(76,175,125,0.82);
filter: drop-shadow(0 0 6px rgba(76,175,125,0.50));
}
.ek-tt-stop.is-active .ek-tt-tag { color: rgba(76,175,125,0.70); }
/* Connector dot under each stop */
.ek-tt-stop::after {
content: ''; width: 4px; height: 4px; border-radius: 50%;
background: rgba(255,255,255,0.15); margin-top: -2px;
transition: background 0.3s ease;
}
.ek-tt-stop.is-active::after { background: rgba(76,175,125,0.70); }
/* Compact the normal range-label row when truck track is used */
.ek-truck-track ~ .calc-range-labels { margin-top: 10px; }
/* Comparison warning */
.calc-vs {
padding: 22px 24px 16px; border-radius: 14px;
background: rgba(255,255,255,0.022);
border: 1px solid rgba(255,255,255,0.07);
margin-top: 8px;
transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.calc-vs.is-flash {
border-color: rgba(255,168,0,0.32);
box-shadow: 0 0 22px rgba(255,140,0,0.07);
}
.calc-vs-head {
display: flex; align-items: center; justify-content: center; gap: 8px;
font-size: 15px; font-weight: 600;
color: rgba(255,255,255,0.52); margin-bottom: 18px; text-align: center;
}
.calc-vs-head i { font-size: 13px; color: rgba(255,168,0,0.72); }
.calc-vs-body { display: flex; align-items: center; }
.calc-vs-stat { flex: 1; text-align: center; padding: 2px 8px; }
.cvs-val {
display: block;
font-size: 36px; font-weight: 900; letter-spacing: -2px; line-height: 1;
color: rgba(255,168,0,0.92); margin-bottom: 7px;
transition: filter 0.4s ease;
}
.calc-vs.is-flash .cvs-val {
filter: drop-shadow(0 0 16px rgba(255,160,0,0.50));
}
.cvs-label {
font-size: 11px; font-weight: 500;
color: rgba(255,255,255,0.30); letter-spacing: 0.15px; line-height: 1.4;
}
.calc-vs-div {
width: 1px; height: 48px; flex-shrink: 0;
background: linear-gradient(to bottom,
transparent 0%,
rgba(255,255,255,0.11) 30%,
rgba(255,255,255,0.11) 70%,
transparent 100%);
}
.calc-vs-foot {
margin-top: 14px; text-align: center;
font-size: 11px; color: rgba(255,255,255,0.20); letter-spacing: 0.1px;
}
/* Section header — premium overrides for earnings */
.earnings-section .section-label { margin-bottom: 8px; }
.earnings-section .section-title { }
.earnings-section { padding: 2px 0 28px; }
.earnings-section .section-center { margin-bottom: 0; }
.earnings-section .section-center .section-title { margin-bottom: 4px; }
.earnings-section .section-desc { max-width: 480px; }
/* ── Feature badges strip ──────────────────────────────────────────────── */
.calc-badges {
display: flex; align-items: center; justify-content: center;
gap: 0; margin-bottom: 28px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
padding: 16px 24px;
}
.calc-badge {
display: flex; align-items: center; gap: 10px;
flex: 1; justify-content: center;
}
.cb-icon {
font-size: 15px; color: var(--green); flex-shrink: 0;
width: 32px; height: 32px; border-radius: 8px;
background: rgba(76,175,125,0.10);
border: 1px solid rgba(76,175,125,0.18);
display: flex; align-items: center; justify-content: center;
}
.cb-text { display: flex; flex-direction: column; gap: 2px; }
.cb-title { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.88); white-space: nowrap; }
.cb-sub { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.36); white-space: nowrap; }
.cb-sep { width: 1px; height: 32px; background: rgba(255,255,255,0.07); flex-shrink: 0; margin: 0 4px; }
/* ── Preset checkmark ─────────────────────────────────────────────────── */
.cp-check {
font-size: 9px; font-weight: 900;
width: 16px; height: 16px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(76,175,125,0.15);
border: 1px solid rgba(76,175,125,0.25);
color: rgba(76,175,125,0.4);
margin-bottom: 4px;
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.calc-preset.is-active .cp-check {
background: var(--green);
border-color: var(--green);
color: #fff;
}
/* Hero NET number */
.calc-results {
display: flex; flex-direction: column;
position: relative;
}
/* Vertical divider centred in the 44px gap */
.calc-results::before {
content: '';
position: absolute; top: 8%; bottom: 8%; left: -22px; width: 1px;
background: linear-gradient(180deg,
transparent 0%, rgba(255,255,255,0.07) 18%,
rgba(255,255,255,0.07) 82%, transparent 100%);
pointer-events: none;
}
.calc-hero {
text-align: center; padding: 52px 16px 44px;
position: relative;
}
/* Glow aura behind the big number — static, no loop */
.calc-hero::before {
content: '';
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 300px; height: 140px; pointer-events: none;
background: radial-gradient(ellipse, rgba(76,175,125,0.11) 0%, rgba(58,155,213,0.06) 50%, transparent 72%);
opacity: 1;
}
.calc-hero-label {
font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
color: rgba(255,255,255,0.35); margin-bottom: 12px; position: relative; z-index: 1;
}
.calc-hero-num {
font-size: clamp(80px, 9.5vw, 122px); font-weight: 900; letter-spacing: -5px;
line-height: 1;
background: none;
-webkit-text-fill-color: rgba(255,255,255,0.95);
color: rgba(255,255,255,0.95);
margin-bottom: 10px; position: relative; z-index: 1;
filter: drop-shadow(0 0 18px rgba(255,255,255,0.08));
display: flex; align-items: baseline;
}
/* Odometer digits */
.od-digit-wrap {
display: inline-block;
overflow: hidden;
height: 1.14em;
vertical-align: top;
}
.od-col {
display: flex; flex-direction: column;
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.od-col span { display: block; height: 1.14em; line-height: 1.14; text-align: center; }
.od-static { display: inline-block; vertical-align: top; line-height: 1.14; }
/* One-shot glow sweep after each number animation finishes */
.calc-hero-num.is-sweep {
animation: numSweep 0.65s ease-out forwards !important;
}
@keyframes numSweep {
0% { filter: drop-shadow(0 0 22px rgba(76,175,125,0.30)); }
35% { filter: drop-shadow(0 0 60px rgba(76,175,125,0.72)) drop-shadow(0 0 24px rgba(58,155,213,0.32)); }
100% { filter: drop-shadow(0 0 30px rgba(76,175,125,0.40)); }
}
/* Milestone flare when gross > $10K */
.calc-hero-num.is-milestone {
animation: milestoneFlare 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes milestoneFlare {
0% { filter: drop-shadow(0 0 20px rgba(76,175,125,0.3)); transform: scale(1); }
30% { filter: drop-shadow(0 0 70px rgba(76,175,125,0.95)) drop-shadow(0 0 140px rgba(58,155,213,0.5));
transform: scale(1.04); }
100% { filter: drop-shadow(0 0 42px rgba(76,175,125,0.5)); transform: scale(1); }
}
/* Annual NET line */
.calc-hero-annual {
font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
color: rgba(76,175,125,0.55); margin-bottom: 8px; position: relative; z-index: 1;
transition: color 0.4s ease;
}
.calc-hero-num.is-milestone ~ .calc-hero-annual { color: rgba(76,175,125,0.85); }
.calc-hero-sub { font-size: 13px; color: rgba(255,255,255,0.3); }
/* Split bar */
.calc-bar-wrap { padding: 0 0 28px; }
.calc-bar {
display: flex; border-radius: 10px; overflow: hidden;
height: 52px; background: rgba(255,255,255,0.04);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
position: relative;
}
.calc-bar-you {
background: linear-gradient(90deg, #4caf7d 0%, #3a9bd5 50%, #5dce92 100%);
background-size: 200% 100%;
animation: barGradShift 18s ease-in-out infinite;
display: flex; align-items: center; padding: 0 16px;
font-size: 12px; font-weight: 700; color: #fff;
width: 0%;
transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
white-space: nowrap; overflow: hidden; position: relative;
box-shadow: 4px 0 24px rgba(76,175,125,0.32);
}
@keyframes barPulse {
0% { filter: brightness(1); }
40% { filter: brightness(1.4) drop-shadow(0 0 12px rgba(76,175,125,0.6)); }
100% { filter: brightness(1); }
}
.calc-bar-you.is-pulse { animation: barGradShift 18s ease-in-out infinite, barPulse 0.45s ease-out; }
@keyframes barGradShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Animated sheen on the bar */
.calc-bar-you::after {
content: '';
position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
animation: barSheen 8s ease-in-out infinite;
}
@keyframes barSheen {
0% { left: -60%; }
100% { left: 130%; }
}
.calc-bar-klg {
flex: 1; display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.25);
background: transparent;
}
/* ── Gross input block ── */
/* ── New 2-row layout ── */
.cg-top-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
}
.cg-panel-left, .cg-panel-right { display: flex; flex-direction: column; }
.cg-gross-note {
font-size: 11px; color: rgba(255,255,255,0.22); margin-top: 16px; letter-spacing: 0.2px;
}
/* ── VS comparison ── */
.cg-vs-wrap {
display: flex; align-items: stretch; gap: 16px;
margin-bottom: 28px;
}
.cg-vs-col {
flex: 1; display: flex; flex-direction: column; align-items: center;
text-align: center; padding: 22px 16px; border-radius: 16px;
}
.cg-vs-typical {
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
}
.cg-vs-klg {
background: rgba(76,175,125,0.07); border: 1px solid rgba(76,175,125,0.28);
box-shadow: 0 0 28px rgba(76,175,125,0.08);
}
.cg-vs-carrier {
font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; color: rgba(255,255,255,0.28); margin-bottom: 10px;
}
.cg-vs-carrier--klg { color: rgba(76,175,125,0.75); }
.cg-vs-pct {
font-size: clamp(44px, 5.5vw, 60px); font-weight: 900; letter-spacing: -2px; line-height: 1;
color: rgba(255,255,255,0.22); margin-bottom: 6px;
}
.cg-vs-fee {
font-size: 22px; font-weight: 800; letter-spacing: -0.5px;
color: rgba(255,255,255,0.38);
}
.cg-fee-green { color: rgba(255,255,255,0.88); }
.cg-vs-sub {
font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
color: rgba(255,255,255,0.18); margin-top: 4px;
}
.cg-vs-divider {
display: flex; align-items: center;
font-size: 13px; font-weight: 800; letter-spacing: 2px;
color: rgba(255,255,255,0.18); flex-shrink: 0;
}
/* ── YOU KEEP 90% bar ── */
.cg-youkeep {
display: flex; align-items: center; justify-content: center; gap: 18px;
padding: 28px 36px; border-radius: 18px;
background: linear-gradient(100deg,
rgba(76,175,125,0.12) 0%,
rgba(58,155,213,0.08) 100%);
border: 1px solid rgba(76,175,125,0.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 40px rgba(76,175,125,0.06);
}
.cg-yk-pct {
font-size: clamp(52px, 6.5vw, 80px); font-weight: 900; letter-spacing: -4px; line-height: 1;
background: linear-gradient(135deg, #5dce92, #4ab5e0);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cg-yk-text {
font-size: clamp(20px, 2.5vw, 30px); font-weight: 900; letter-spacing: 5px;
text-transform: uppercase; color: rgba(255,255,255,0.82);
}
.cg-yk-sub {
font-size: 12px; color: rgba(255,255,255,0.28); letter-spacing: 0.3px;
border-left: 1px solid rgba(255,255,255,0.1); padding-left: 18px;
}
/* ── Footer row ── */
.cg-footer-row {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
}
.cg-trust-badges {
display: flex; gap: 24px; flex-wrap: wrap;
font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
color: rgba(255,255,255,0.38);
}
.cg-footer-actions {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
/* legacy layout classes — no longer rendered, kept for dead-CSS safety */
.calc-left { display: flex; flex-direction: column; }
.cg-bar-block { margin-top: auto; }
.cg-input-label {
font-size: 10px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: rgba(255,255,255,0.3);
margin-bottom: 12px;
}
.cg-input-num {
font-size: clamp(52px, 6vw, 80px); font-weight: 900; letter-spacing: -3px;
line-height: 1; color: rgba(255,255,255,0.95);
display: flex; align-items: baseline;
margin-bottom: 4px;
}
/* ── Bar redesign ── */
.cg-bar-block { margin-top: auto; }
.cg-bar-top {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 14px;
}
.cg-bar-pct {
font-size: 56px; font-weight: 900; letter-spacing: -3px; line-height: 1;
background: linear-gradient(135deg, #5dce92, #4ab5e0);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.cg-bar-you-label {
font-size: 11px; font-weight: 700; letter-spacing: 3px;
text-transform: uppercase; color: rgba(255,255,255,0.35);
padding-bottom: 6px;
}
.cg-bar-sub {
margin-top: 10px;
font-size: 11px; color: rgba(255,255,255,0.22); letter-spacing: 0.2px;
}
/* ── Comparison cards ── */
.cg-compare {
display: grid; grid-template-columns: 1fr 1fr;
gap: 12px; margin-bottom: 28px;
}
.cg-comp-card {
border-radius: 16px; padding: 22px 20px;
display: flex; flex-direction: column; gap: 2px;
position: relative;
}
.cg-comp-typical {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
}
.cg-comp-klg {
background: rgba(76,175,125,0.07);
border: 1px solid rgba(76,175,125,0.28);
box-shadow: 0 0 32px rgba(76,175,125,0.08);
}
.cg-comp-carrier {
font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
text-transform: uppercase; color: rgba(255,255,255,0.28);
margin-bottom: 10px;
}
.cg-comp-badge {
font-size: 9px; font-weight: 800; letter-spacing: 2px;
text-transform: uppercase; color: rgba(76,175,125,0.8);
margin-bottom: 10px;
}
.cg-comp-pct {
font-size: 48px; font-weight: 900; letter-spacing: -2px; line-height: 1;
color: rgba(255,255,255,0.25); margin-bottom: 2px;
}
.cg-pct-green {
background: linear-gradient(135deg, #5dce92, #4ab5e0);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.cg-comp-plabel {
font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
color: rgba(255,255,255,0.22); margin-bottom: 14px;
}
.cg-comp-cost {
font-size: 28px; font-weight: 900; letter-spacing: -1px;
color: rgba(255,255,255,0.45);
}
.cg-comp-cost--green {
color: rgba(255,255,255,0.92);
}
.cg-comp-cost-sub {
font-size: 9px; color: rgba(255,255,255,0.2);
letter-spacing: 0.5px; margin-top: 3px;
}
/* ── Savings highlight ── */
.cg-savings {
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 24px; margin-bottom: 28px;
}
.cg-savings-row {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 6px;
}
.cg-savings-num {
font-size: clamp(44px, 5.5vw, 68px); font-weight: 900; letter-spacing: -3px;
line-height: 1;
background: linear-gradient(135deg, #5dce92, #4ab5e0);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.cg-savings-period {
font-size: 16px; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: rgba(255,255,255,0.3);
}
.cg-savings-label {
font-size: 12px; color: rgba(255,255,255,0.35); margin-bottom: 12px;
}
.cg-savings-year {
font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.5);
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.cg-savings-year span:first-child {
color: rgba(255,255,255,0.85); font-size: 22px; letter-spacing: -0.5px;
}
.cg-savings-year-note {
font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.22);
letter-spacing: 0.2px;
}
/* ═══════════════════════════════════════════
EARNINGS — ek- PREMIUM SINGLE-CARD LAYOUT
═══════════════════════════════════════════ */
/* Gross block — centred header */
.ek-gross-block { text-align: center; }
.ek-gross-block .ek-gross-label { text-align: center; }
.ek-gross-block .ek-gross-num { justify-content: center; margin-bottom: 0; }
/* 3-column comparison grid */
.ek-3col {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.ek-col {
border-radius: 18px; padding: 28px 18px 24px;
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.ek-col-save {
background: rgba(76,175,125,0.08);
border: 1px solid rgba(76,175,125,0.26);
box-shadow: 0 0 48px rgba(76,175,125,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ek-col-loss {
background: rgba(180,40,40,0.06);
border: 1px solid rgba(200,60,60,0.16);
}
.ek-col-win {
background: rgba(76,175,125,0.07);
border: 1px solid rgba(76,175,125,0.22);
}
.ek-col-tag {
font-size: 8px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: rgba(255,255,255,0.25); margin-bottom: 12px;
}
.ek-tag-loss { color: rgba(196,124,108,0.65); }
.ek-tag-win { color: rgba(76,175,125,0.70); }
.ek-col-save-num {
font-size: clamp(34px, 4.5vw, 52px); font-weight: 900; letter-spacing: -3px; line-height: 1;
background: linear-gradient(135deg, #5dce92, #4ab5e0);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
margin-bottom: 4px;
}
.ek-col-per {
font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: rgba(255,255,255,0.25); margin-bottom: 10px;
}
.ek-col-yr {
font-size: 12px; color: rgba(255,255,255,0.30);
}
.ek-col-yr span { color: rgba(255,255,255,0.65); font-weight: 700; }
.ek-col-pct {
font-size: clamp(36px, 4.5vw, 52px); font-weight: 900; letter-spacing: -2px; line-height: 1;
margin-bottom: 8px;
}
.ek-pct-loss { color: rgba(255,255,255,0.16); }
.ek-pct-win {
background: linear-gradient(135deg, #5dce92, #4ab5e0);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ek-col-fee {
font-size: clamp(18px, 2.3vw, 26px); font-weight: 800; letter-spacing: -0.5px;
margin-bottom: 5px;
}
.ek-fee-loss { color: rgba(196,124,108,0.90); }
.ek-fee-win { color: rgba(255,255,255,0.85); }
.ek-col-sub {
font-size: 8px; text-transform: uppercase; letter-spacing: 1px;
color: rgba(255,255,255,0.18); margin-top: 2px;
}
/* Compact 90% trust band */
.ek-90-band {
display: flex; align-items: center; gap: 24px;
padding: 20px 30px; border-radius: 16px;
background: rgba(76,175,125,0.05);
border: 1px solid rgba(76,175,125,0.16);
}
.ek-90-pct {
font-size: 38px; font-weight: 900; letter-spacing: -2px; line-height: 1; flex-shrink: 0;
background: linear-gradient(135deg, #5dce92, #4ab5e0);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ek-90-sep {
width: 1px; height: 36px; flex-shrink: 0;
background: rgba(255,255,255,0.07);
}
.ek-90-info { display: flex; flex-direction: column; gap: 3px; }
.ek-90-info strong { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.72); }
.ek-90-info span { font-size: 11px; color: rgba(255,255,255,0.28); letter-spacing: 0.2px; }
/* ═══════════════════════════════════════════
EARNINGS — ek- PREMIUM REDESIGN
═══════════════════════════════════════════ */
/* Cinematic scene: real photo background */
.ek-scene {
position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.ek-photo-bg {
display: none;
}
/* Left panel: gross input */
.ek-left { display: flex; flex-direction: column; }
.ek-gross-label {
font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
color: rgba(255,255,255,0.28); margin-bottom: 10px;
}
.ek-gross-num {
font-size: clamp(62px, 7.5vw, 96px); font-weight: 900; letter-spacing: -5px;
line-height: 1; color: rgba(255,255,255,0.95);
display: flex; align-items: baseline; margin-bottom: 0;
filter: drop-shadow(0 0 22px rgba(255,255,255,0.06));
}
.ek-gross-note {
font-size: 11px; color: rgba(255,255,255,0.2); margin-top: 14px; letter-spacing: 0.15px;
}
/* Trust pill (compact 90% card) */
.ek-trust-pill {
display: flex; align-items: center; gap: 18px;
margin-top: 32px; padding: 18px 22px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
}
.ek-tp-pct {
font-size: 36px; font-weight: 900; letter-spacing: -2px; line-height: 1; flex-shrink: 0;
background: linear-gradient(135deg, #5dce92, #4ab5e0);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ek-tp-text { display: flex; flex-direction: column; gap: 3px; }
.ek-tp-text strong { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.72); }
.ek-tp-text span { font-size: 11px; color: rgba(255,255,255,0.28); letter-spacing: 0.15px; }
/* Right panel: savings hero + battle */
.ek-right { display: flex; flex-direction: column; gap: 18px; }
/* Savings hero — the emotional centrepiece */
.ek-save-hero {
padding: 28px 28px 22px;
background: rgba(76,175,125,0.07);
border: 1px solid rgba(76,175,125,0.24);
border-radius: 20px;
box-shadow:
0 0 60px rgba(76,175,125,0.08),
inset 0 1px 0 rgba(255,255,255,0.05);
}
.ek-sh-eyebrow {
font-size: 9px; font-weight: 800; letter-spacing: 3.5px; text-transform: uppercase;
color: rgba(76,175,125,0.75); margin-bottom: 6px;
}
.ek-sh-row {
display: flex; align-items: baseline; gap: 10px;
margin-bottom: 10px;
}
.ek-sh-num {
font-size: clamp(48px, 6.5vw, 76px); font-weight: 900; letter-spacing: -4px; line-height: 1;
background: linear-gradient(135deg, #5dce92 0%, #4ab5e0 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ek-sh-per {
font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
color: rgba(255,255,255,0.28); padding-bottom: 8px;
}
.ek-sh-sub {
font-size: 12px; color: rgba(255,255,255,0.32); letter-spacing: 0.2px;
}
.ek-sh-sub span {
font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.68); letter-spacing: -0.3px;
}
/* Battle: loss card vs win card */
.ek-battle {
display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
}
.ek-vs {
font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
color: rgba(255,255,255,0.18); text-align: center;
}
.ek-card {
border-radius: 16px; padding: 20px 16px;
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
}
.ek-loss {
background: rgba(180,44,44,0.07);
border: 1px solid rgba(200,60,60,0.18);
}
.ek-win {
background: rgba(76,175,125,0.09);
border: 1px solid rgba(76,175,125,0.30);
box-shadow: 0 0 32px rgba(76,175,125,0.09);
}
.ek-card-tag {
font-size: 8px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: rgba(255,255,255,0.22); margin-bottom: 8px;
}
.ek-tag-win { color: rgba(76,175,125,0.72); }
.ek-card-pct {
font-size: clamp(34px, 4vw, 46px); font-weight: 900; letter-spacing: -2px; line-height: 1;
margin-bottom: 6px;
}
.ek-pct-loss { color: rgba(255,255,255,0.18); }
.ek-pct-win {
background: linear-gradient(135deg, #5dce92, #4ab5e0);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ek-card-fee {
font-size: clamp(17px, 2vw, 22px); font-weight: 800; letter-spacing: -0.5px;
margin-bottom: 4px;
}
.ek-fee-loss { color: rgba(196,124,108,0.90); }
.ek-fee-win { color: rgba(255,255,255,0.88); }
.ek-card-sub {
font-size: 8px; text-transform: uppercase; letter-spacing: 1px;
color: rgba(255,255,255,0.18);
}
/* CTA row */
.ek-conclusion { margin-top: 0; }
/* ═══════════════════════════════════════════
EARNINGS CALCULATOR — CONVERSION REDESIGN
═══════════════════════════════════════════ */
/* Section sub-headline */
.ek-header-sub {
font-size: 15px; color: rgba(255,255,255,0.38); margin-top: 12px; letter-spacing: 0.2px;
}
/* Slider block */
.ek-slider-block { display: flex; flex-direction: column; }
.ek-slider-header {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 10px; gap: 16px;
}
.ek-slider-label {
font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
color: rgba(255,255,255,0.35); white-space: nowrap;
}
.ek-slider-header .ek-gross-num {
font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -2px;
justify-content: flex-end; margin-bottom: 0; flex-shrink: 0;
}
.earnings-light .ek-slider-header .ek-gross-num {
font-size: clamp(30px, 3.5vw, 42px);
letter-spacing: -0.8px;
line-height: 1.12;
font-variant-numeric: tabular-nums lining-nums;
padding-block: 1px 2px;
}
/* Side-by-side comparison */
.ek-split {
display: grid; grid-template-columns: 1fr auto 1fr;
border-radius: 20px; overflow: hidden;
}
.ek-split-col {
padding: 32px 28px; display: flex; flex-direction: column;
}
.ek-split-typical {
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.07);
border-right: none; border-radius: 20px 0 0 20px;
}
.ek-split-vs {
display: flex; align-items: center; justify-content: center;
padding: 0 14px;
font-size: 9px; font-weight: 800; letter-spacing: 2px; color: rgba(255,255,255,0.18);
background: rgba(255,255,255,0.018);
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
writing-mode: vertical-rl;
}
.ek-split-klg {
background: rgba(76,175,125,0.07);
border: 1px solid rgba(76,175,125,0.28);
border-left: none; border-radius: 0 20px 20px 0;
box-shadow: inset 0 0 60px rgba(76,175,125,0.04), 0 0 48px rgba(76,175,125,0.09);
position: relative;
}
.ek-split-klg::before {
content: '';
position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: radial-gradient(ellipse 80% 60% at 60% 70%, rgba(76,175,125,0.09) 0%, transparent 70%);
}
/* Avg reference under slider */
.ek-avg-ref {
margin-top: 4px; font-size: 11px; color: rgba(255,255,255,0.28);
display: flex; align-items: center; gap: 7px; letter-spacing: 0.2px;
}
.ek-avg-ref i { color: rgba(76,175,125,0.60); font-size: 10px; flex-shrink: 0; }
.ek-avg-ref strong { color: rgba(76,175,125,0.82); font-weight: 700; }
/* ── 90% HERO BLOCK ── */
.ek-90-hero {
display: flex; align-items: center; gap: 0;
padding: 36px 40px; border-radius: 20px;
background: linear-gradient(110deg, rgba(76,175,125,0.10) 0%, rgba(58,155,213,0.06) 100%);
border: 1px solid rgba(76,175,125,0.24);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 60px rgba(76,175,125,0.08);
position: relative; overflow: hidden;
}
.ek-90-hero::before {
content: '';
position: absolute; top: -40px; left: -40px; width: 220px; height: 220px;
background: radial-gradient(circle, rgba(76,175,125,0.13) 0%, transparent 70%);
pointer-events: none;
}
.ek-90h-left {
display: flex; flex-direction: column; align-items: flex-start;
flex-shrink: 0; position: relative; z-index: 1;
}
.ek-90h-pct {
font-size: clamp(72px, 9vw, 108px); font-weight: 900; letter-spacing: -6px; line-height: 0.9;
background: linear-gradient(135deg, #5dce92 0%, #4ab5e0 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
filter: drop-shadow(0 0 32px rgba(76,175,125,0.35));
}
.ek-90h-yours {
font-size: clamp(14px, 1.8vw, 20px); font-weight: 900; letter-spacing: 5px;
text-transform: uppercase; color: rgba(255,255,255,0.72); margin-top: 2px;
}
.ek-90h-sub {
font-size: 11px; color: rgba(255,255,255,0.28); letter-spacing: 0.3px;
margin-top: 10px; max-width: 160px; line-height: 1.5;
}
.ek-90h-sep {
width: 1px; align-self: stretch; flex-shrink: 0; margin: 0 36px;
background: linear-gradient(to bottom, transparent, rgba(76,175,125,0.22) 25%, rgba(76,175,125,0.22) 75%, transparent);
}
.ek-90h-right {
display: flex; flex-direction: column; justify-content: center;
position: relative; z-index: 1;
}
.ek-90h-label {
font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
color: rgba(76,175,125,0.60); margin-bottom: 8px;
}
.ek-90h-num {
font-size: clamp(48px, 6.5vw, 80px); font-weight: 900; letter-spacing: -4px; line-height: 1;
color: #fff; filter: drop-shadow(0 0 24px rgba(255,255,255,0.10));
transition: filter 0.35s ease;
}
.ek-90h-per {
font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: rgba(255,255,255,0.28); margin-top: 4px;
}
.ek-90h-yr {
font-size: 15px; font-weight: 700; letter-spacing: -0.3px;
color: rgba(76,175,125,0.65); margin-top: 8px;
}
/* ── COMPACT COMPARISON STRIP ── */
.ek-cmp-strip {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
padding: 22px 28px; border-radius: 16px; gap: 0;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.07);
}
.ek-cmp-col {
display: flex; flex-direction: column; gap: 8px; padding: 0 24px;
}
.ek-cmp-col--typical { border-right: 1px solid rgba(255,255,255,0.06); justify-content: flex-start; }
.ek-cmp-col--klg { border-left: 1px solid rgba(76,175,125,0.15); }
.ek-cmp-takes {
font-size: 11px; color: rgba(255,255,255,0.25); letter-spacing: 0.2px; margin-bottom: 10px;
}
.ek-cmp-takes span { color: rgba(196,124,108,0.60); font-weight: 700; }
.ek-overpay-block {
padding: 14px 16px; border-radius: 12px;
background: rgba(220,60,60,0.07);
border: 1px solid rgba(220,60,60,0.18);
}
.ek-overpay-label {
font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
color: rgba(220,80,80,0.65); margin-bottom: 8px;
display: flex; align-items: center; gap: 5px;
}
.ek-overpay-label i { font-size: 9px; }
.ek-overpay-num {
font-size: clamp(32px, 4vw, 46px); font-weight: 900; letter-spacing: -2px; line-height: 1;
color: rgba(230,85,85,0.92); margin-bottom: 3px;
}
.ek-overpay-per {
font-size: 10px; color: rgba(255,255,255,0.22); letter-spacing: 0.3px;
}
.ek-overpay-yr {
font-size: 12px; font-weight: 700; color: rgba(220,80,80,0.50); margin-top: 6px;
}
.ek-cmp-name {
font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.30);
display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.ek-cmp-name--klg { color: rgba(76,175,125,0.70); }
.ek-cmp-pct {
font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
color: rgba(255,255,255,0.20); background: rgba(255,255,255,0.06);
padding: 2px 7px; border-radius: 4px;
}
.ek-cmp-pct--klg {
color: rgba(76,175,125,0.80); background: rgba(76,175,125,0.10);
}
.ek-cmp-line {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.ek-cmp-key {
font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.22); white-space: nowrap;
}
.ek-cmp-key--green { color: rgba(76,175,125,0.60); }
.ek-cmp-val {
font-size: 16px; font-weight: 800; letter-spacing: -0.5px;
color: rgba(200,70,70,0.65);
}
.ek-cmp-val--dim { color: rgba(255,255,255,0.35); }
.ek-cmp-val--green { color: rgba(255,255,255,0.88); font-size: 18px; }
.ek-cmp-line--win { margin-top: 2px; }
.ek-cmp-check {
font-size: 10px; color: rgba(76,175,125,0.80); margin-left: 4px;
}
.ek-cmp-yr {
font-size: 10px; color: rgba(255,255,255,0.18); letter-spacing: 0.2px; margin-top: 2px;
}
.ek-cmp-yr--green { color: rgba(76,175,125,0.45); }
.ek-cmp-vs {
font-size: 9px; font-weight: 800; letter-spacing: 2px;
color: rgba(255,255,255,0.18); padding: 0 4px;
}
/* Mobile */
@media (max-width: 640px) {
.ek-90-hero { flex-direction: column; padding: 28px 24px; gap: 24px; }
.ek-90h-sep { width: 100%; height: 1px; margin: 0; align-self: auto; }
.ek-90h-pct { font-size: 80px; }
.ek-cmp-strip { grid-template-columns: 1fr auto 1fr; padding: 16px 12px; }
.ek-cmp-col { padding: 0 10px; gap: 6px; }
.ek-cmp-val { font-size: 14px; }
.ek-cmp-val--green { font-size: 15px; }
}
/* Carrier label */
.ek-sc-label {
font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: rgba(255,255,255,0.22); margin-bottom: 18px;
}
.ek-sc-badge {
font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
color: rgba(76,175,125,0.80); margin-bottom: 18px;
}
/* Large % */
.ek-sc-pct {
font-size: clamp(40px, 5vw, 58px); font-weight: 900; letter-spacing: -3px; line-height: 1;
color: rgba(255,255,255,0.16); margin-bottom: 4px;
}
.ek-sc-pct-plus {
font-size: 0.45em; font-weight: 700; letter-spacing: 0; vertical-align: super; margin-left: 1px;
}
.ek-sc-pct--green {
background: linear-gradient(135deg, #5dce92, #4ab5e0);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ek-sc-pct-sub {
font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase;
color: rgba(255,255,255,0.18); margin-bottom: 22px;
}
.ek-sc-pct-sub--green { color: rgba(76,175,125,0.52); }
/* Divider rule */
.ek-sc-rule { height: 1px; background: rgba(255,255,255,0.06); margin-bottom: 18px; }
.ek-sc-rule--green { background: rgba(76,175,125,0.16); }
/* "They take" row */
.ek-sc-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px; margin-bottom: 18px; flex-wrap: wrap;
}
.ek-sc-row-key {
font-size: 10px; font-weight: 600; letter-spacing: 0.4px; color: rgba(255,255,255,0.26);
}
.ek-sc-row-val {
font-size: 20px; font-weight: 800; letter-spacing: -0.5px; color: rgba(200,70,70,0.72);
}
.ek-sc-row-val--dim { color: rgba(255,255,255,0.40); }
/* "You keep" section */
.ek-sc-keep-key {
font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: rgba(255,255,255,0.25); margin-bottom: 10px;
}
.ek-sc-keep-key--green { color: rgba(76,175,125,0.62); }
.ek-sc-keep-typical {
font-size: clamp(32px, 4vw, 48px); font-weight: 900; letter-spacing: -3px; line-height: 1;
color: rgba(255,255,255,0.30); margin-bottom: 8px;
}
.ek-sc-keep-klg {
font-size: clamp(44px, 6vw, 76px); font-weight: 900; letter-spacing: -4px; line-height: 1;
color: #fff; margin-bottom: 8px;
filter: drop-shadow(0 0 28px rgba(76,175,125,0.38));
transition: filter 0.35s ease;
position: relative; z-index: 1;
}
.ek-sc-yr {
font-size: 12px; font-weight: 600; letter-spacing: -0.2px; color: rgba(255,255,255,0.20);
}
.ek-sc-yr--green { color: rgba(76,175,125,0.62); }
/* Savings strip */
.ek-savings-strip {
display: flex; align-items: center; gap: 20px;
padding: 22px 28px; border-radius: 16px;
background: linear-gradient(105deg, rgba(76,175,125,0.12) 0%, rgba(58,155,213,0.07) 100%);
border: 1px solid rgba(76,175,125,0.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 32px rgba(76,175,125,0.06);
}
.ek-ss-icon {
font-size: 20px; color: rgba(76,175,125,0.78); flex-shrink: 0;
}
.ek-ss-body { display: flex; flex-direction: column; gap: 4px; }
.ek-ss-main {
font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.68); line-height: 1.4;
}
.ek-ss-main strong {
color: #5dce92; font-size: 18px; font-weight: 900; letter-spacing: -0.5px;
}
.ek-ss-yr { font-size: 13px; color: rgba(255,255,255,0.32); }
.ek-ss-yr strong { color: rgba(76,175,125,0.78); font-weight: 800; }
/* Mobile layout for old split (kept for CSS safety) */
@media (max-width: 640px) {
.ek-savings-strip { flex-direction: column; text-align: center; gap: 10px; }
.ek-slider-header { flex-direction: column; gap: 4px; }
.ek-slider-header .ek-gross-num { justify-content: flex-start; }
}
/* ── TAKE-HOME HERO BLOCK ── */
/* Row wrapper: slider left, take-home right */
.ek-calc-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 0;
align-items: stretch;
}
.ek-th-block {
text-align: center;
padding: 8px 0 8px 28px;
border-left: 1px solid rgba(255,255,255,0.07);
margin-left: 24px;
display: flex; flex-direction: column; justify-content: center; align-items: center;
min-width: 190px;
}
.ek-th-label {
font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
color: rgba(76,175,125,0.55); margin-bottom: 8px;
}
.ek-th-row {
display: inline-flex; align-items: flex-end; gap: 10px; justify-content: center;
}
.ek-th-num {
font-size: clamp(44px, 6vw, 78px); font-weight: 900; letter-spacing: -4px; line-height: 0.92;
color: #fff;
filter: drop-shadow(0 0 32px rgba(76,175,125,0.22));
transition: filter 0.35s ease;
}
.ek-th-meta {
display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px;
}
.ek-th-per {
font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: rgba(255,255,255,0.25);
}
.ek-th-badge {
font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
color: rgba(76,175,125,0.80); background: rgba(76,175,125,0.10);
border: 1px solid rgba(76,175,125,0.22); border-radius: 6px; padding: 3px 9px;
white-space: nowrap;
}
.ek-th-yr {
font-size: 13px; font-weight: 600; letter-spacing: -0.3px;
color: rgba(76,175,125,0.42); margin-top: 6px;
}
/* ══════════════════════════════════════════════════════
UNIFIED OUTER PANEL — wraps calc-wrap + card + conclusion
══════════════════════════════════════════════════════ */
.ek-panel {
max-width: 900px;
margin: 0 auto;
position: relative;
border-radius: 22px;
border: 1px solid rgba(255,255,255,0.08);
background: linear-gradient(175deg,
rgba(8,14,24,0.82) 0%,
rgba(6,11,20,0.88) 52%,
rgba(7,12,21,0.82) 100%);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.07),
inset 0 -1px 0 rgba(255,255,255,0.03),
0 0 0 1px rgba(255,255,255,0.03),
0 8px 32px rgba(0,0,0,0.48),
0 32px 96px rgba(0,0,0,0.64),
0 80px 180px rgba(0,0,0,0.40);
}
/* calc-wrap inside panel → transparent, loses its own shell */
.ek-panel .calc-wrap {
background: transparent;
backdrop-filter: none; -webkit-backdrop-filter: none;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.06);
border-radius: 0;
box-shadow: none;
max-width: none;
margin: 0;
padding: 4px 40px 18px;
gap: 4px;
overflow: visible;
}
.ek-panel .calc-wrap::before,
.ek-panel .calc-wrap::after { display: none; }
.ek-panel .calc-wrap:hover { box-shadow: none; }
/* conclusion inside panel → no separate panel shell */
.ek-panel .ek-conclusion {
background: transparent;
border: none;
backdrop-filter: none; -webkit-backdrop-filter: none;
border-radius: 0;
margin-top: 0;
padding: 20px 40px 36px;
}
/* connector inside panel */
.ek-panel .ek-card-connector { margin: 10px 0 -2px; }
/* ── COMPARISON CARDS ── */
.ek-cards {
display: block;
max-width: 66%;
margin-left: auto; margin-right: auto;
margin-top: 20px;
position: relative; z-index: 10;
}
.ek-card {
border-radius: 16px; padding: 20px 24px;
display: flex; flex-direction: column; gap: 0;
}
.ek-card--loss {
background: rgba(16,9,7,0.88);
border: 1px solid rgba(168,86,70,0.16);
box-shadow:
inset 0 0 80px rgba(143,70,61,0.06),
inset 0 1px 0 rgba(214,160,150,0.04),
0 8px 40px rgba(0,0,0,0.50),
0 20px 60px rgba(0,0,0,0.32),
0 0 0 1px rgba(255,255,255,0.02);
}
.ek-card--win {
background: rgba(76,175,125,0.07);
border: 1px solid rgba(76,175,125,0.28);
box-shadow: 0 0 36px rgba(76,175,125,0.07);
}
.ek-card-head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ek-card-name {
font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.55);
}
.ek-card-name--klg { color: rgba(76,175,125,0.88); }
.ek-card-rate {
font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
border-radius: 6px; padding: 3px 8px;
}
.ek-card-rate--loss {
color: rgba(196,124,108,0.75); background: rgba(168,86,70,0.12);
border: 1px solid rgba(168,86,70,0.20);
}
.ek-card-rate--win {
color: rgba(76,175,125,0.82); background: rgba(76,175,125,0.10);
border: 1px solid rgba(76,175,125,0.22);
}
/* ── CARD LOSS ROWS ── */
.ek-card-you-lose {
font-size: 9px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
color: rgba(196,124,108,0.60); padding-top: 6px; margin-bottom: 0;
}
/* CSS grid: year full-width, month+week side by side */
.ek-card-loss-rows {
display: grid;
grid-template-columns: 1fr 1fr;
}
.ek-card-loss-row {
display: flex; align-items: baseline; gap: 8px;
padding: 12px 0; border-top: 1px solid rgba(168,86,70,0.14);
}
.ek-card-loss-row:first-child {
grid-column: 1 / -1;
border-top: none; padding-top: 10px;
}
/* month + week share the second grid row with a subtle divider */
.ek-card-loss-row:nth-child(2) { padding-right: 20px; border-right: 1px solid rgba(168,86,70,0.12); }
.ek-card-loss-row:nth-child(3) { padding-left: 20px; }
/* Typography hierarchy — year is the hero, month+week equal secondary */
.ek-card-loss-row:nth-child(1) .ek-card-loss-val {
font-size: clamp(36px, 4.8vw, 50px); letter-spacing: -2.5px;
text-shadow: 0 0 24px rgba(168,86,70,0.28);
}
.ek-card-loss-row:nth-child(2) .ek-card-loss-val,
.ek-card-loss-row:nth-child(3) .ek-card-loss-val {
font-size: clamp(18px, 2.2vw, 24px); letter-spacing: -0.8px;
}
.ek-card-loss-val {
font-weight: 900;
color: rgba(196,124,108,0.92);
}
.ek-card-loss-per {
font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
color: rgba(255,255,255,0.22);
}
/* Scale pulse when value updates */
@keyframes numPulse {
0% { transform: scale(1); }
45% { transform: scale(1.015); }
100% { transform: scale(1); }
}
.ek-num-pulse { animation: numPulse 0.32s cubic-bezier(0.22,1,0.36,1); }
/* ── CARD CONNECTOR ARROW ── */
.ek-card-connector {
display: flex; justify-content: center;
margin: 18px 0 -2px;
position: relative; z-index: 10;
}
/* ── CONCLUSION ── */
.ek-conclusion {
margin-top: 20px;
padding: 44px 40px 52px;
text-align: center;
background: rgba(255,255,255,0.018);
border: 1px solid rgba(255,255,255,0.055);
border-radius: 18px;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* ── FINANCIAL BACKGROUND CANVAS ── */
.ek-finance-bg {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 0;
}
/* ── FLOATING CHART TOOLTIP ── */
.ek-chart-tooltip {
position: absolute; right: 9%; top: 29%;
background: rgba(6,12,9,0.80);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(76,175,125,0.22);
border-radius: 10px; padding: 9px 14px;
pointer-events: none; z-index: 3;
box-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(76,175,125,0.07);
animation: ctFloat 4s ease-in-out infinite alternate;
}
@keyframes ctFloat {
from { transform: translateY(0); }
to { transform: translateY(-7px); }
}
.ek-ct-label {
font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: rgba(76,175,125,0.62); margin-bottom: 4px;
}
.ek-ct-val {
font-size: 15px; font-weight: 800; letter-spacing: -0.5px; color: rgba(255,255,255,0.90);
}
.ek-ct-per {
font-size: 10px; color: rgba(255,255,255,0.30); margin-top: 1px;
}
/* ── KLG 10% BADGE ── */
.ek-klg-badge {
position: absolute; right: 3%; top: 67%;
background: rgba(5,13,9,0.84);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(76,175,125,0.30);
border-radius: 8px; padding: 6px 14px;
font-size: 11px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase;
color: rgba(76,175,125,0.88);
pointer-events: none; z-index: 3;
box-shadow: 0 0 24px rgba(76,175,125,0.12), 0 4px 16px rgba(0,0,0,0.40);
animation: klgFloat 5s ease-in-out infinite alternate;
}
@keyframes klgFloat {
from { transform: translateY(0); }
to { transform: translateY(6px); }
}
/* Hide overlays below 1100px — they would overlap content */
@media (max-width: 1100px) {
.ek-chart-tooltip, .ek-klg-badge { display: none; }
}
.ek-conc-cta {
display: inline-flex;
padding: 18px 22px;
min-width: 280px;
justify-content: center;
margin: 0 auto;
}
.ek-conc-head {
font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
color: rgba(255,255,255,0.28); margin-bottom: 12px;
}
.ek-conc-main {
font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.4px;
color: rgba(255,255,255,0.92); line-height: 1.25; margin-bottom: 12px;
}
.ek-conc-body {
display: flex; align-items: center; justify-content: center; gap: 10px;
font-size: 15px; color: rgba(255,255,255,0.80); line-height: 1.65;
max-width: 460px; margin: 0 auto 20px;
}
.ek-conc-body span { color: #4ecf8a; font-weight: 700; }
.ek-conc-shield {
flex-shrink: 0;
width: 18px; height: 20px;
position: relative; top: 1px;
}
/* Mobile */
@media (max-width: 620px) {
.ek-calc-row { grid-template-columns: 1fr; }
.ek-th-block {
border-left: none; border-top: 1px solid rgba(255,255,255,0.07);
margin-left: 0; padding: 20px 0 0;
}
.ek-th-num { font-size: 60px; letter-spacing: -3px; }
.ek-th-row { flex-direction: column; align-items: center; gap: 8px; }
.ek-th-meta { flex-direction: row; align-items: center; gap: 10px; }
.ek-cards { max-width: 100%; margin-top: 20px; }
.ek-card-loss-rows { grid-template-columns: 1fr; }
.ek-card-loss-row:nth-child(2) { padding-right: 0; border-right: none; }
.ek-card-loss-row:nth-child(3) { padding-left: 0; }
.ek-panel .calc-wrap { padding: 20px 18px 28px; }
.ek-panel .ek-conclusion { padding: 28px 18px 40px; }
.ek-conc-cta { min-width: 0; width: 100%; }
}
/* Responsive */
@media (max-width: 700px) {
.ek-truck-svg { width: 90%; opacity: 0.7; }
.ek-battle { grid-template-columns: 1fr auto 1fr; gap: 8px; }
.ek-cta-row { flex-direction: column; gap: 16px; }
}
/* Calc idle flashlight sweep */
@keyframes calcSweepMove {
0% { transform: translateY(-120px); opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { transform: translateY(calc(100% + 80px)); opacity: 0; }
}
.calc-sweep {
position: absolute;
left: -10px; right: -10px; top: 0;
height: 130px;
background: radial-gradient(ellipse 70% 65px at 50% 50%,
rgba(76,175,125,0.11) 0%, transparent 70%);
pointer-events: none;
opacity: 0;
z-index: 0;
}
.calc-sweep.calc-sweep-run {
animation: calcSweepMove 4.8s cubic-bezier(0.37,0,0.63,1) forwards;
}
@keyframes calcResBeam {
0% { filter: drop-shadow(0 0 0px transparent); }
28% { filter: drop-shadow(0 0 18px rgba(76,175,125,0.90)) drop-shadow(0 0 8px rgba(58,155,213,0.45)); }
100% { filter: drop-shadow(0 0 0px transparent); }
}
.calc-res-num.calc-beam {
animation: calcResBeam 1.8s cubic-bezier(0.4,0,0.6,1) forwards;
}
/* Actions */
.calc-actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.calc-apply-btn {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 22px 20px; border-radius: 13px;
background: linear-gradient(145deg, var(--amber-light) 0%, var(--amber) 100%);
color: #181005; font-size: 17px; font-weight: 700;
text-decoration: none; text-align: center; position: relative; overflow: hidden;
box-shadow: 0 4px 24px rgba(220,154,60,0.30), 0 1px 4px rgba(0,0,0,0.25);
transition: transform 260ms cubic-bezier(0.25,0,0,1), box-shadow 260ms ease-out;
}
/* Inner top highlight */
.calc-apply-btn::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 44%;
background: linear-gradient(to bottom, rgba(255,255,255,0.12), transparent);
border-radius: 13px 13px 0 0; pointer-events: none;
}
.calc-apply-btn i {
transition: transform 240ms cubic-bezier(0.25,0,0,1);
}
.calc-apply-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 36px rgba(220,154,60,0.42), 0 3px 12px rgba(0,0,0,0.22);
}
.calc-apply-btn:hover i { transform: translateX(6px); }
/* Micro-copy trust line */
.calc-micro {
font-size: 11px; color: rgba(255,255,255,0.25);
text-align: center; letter-spacing: 0.2px; margin: -2px 0;
}
/* Phone alternative CTA */
.calc-alt-cta {
display: flex; align-items: center; justify-content: center; gap: 10px;
font-size: 12px; color: rgba(255,255,255,0.25);
}
.calc-alt-phone {
display: flex; align-items: center; gap: 5px;
color: rgba(76,175,125,0.6); font-weight: 700; font-size: 12px;
text-decoration: none; transition: color 0.2s ease;
}
.calc-alt-phone:hover { color: #4caf7d; }
.calc-alt-phone i { font-size: 10px; }
.calc-settle-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px; border-radius: 12px;
background: none; border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.45); font-size: 13px; font-weight: 600;
text-decoration: none;
transition: border-color 0.25s ease, color 0.25s ease;
}
.calc-settle-btn:hover { border-color: rgba(76,175,125,0.4); color: rgba(255,255,255,0.8); }
/* Border hover — very subtle lift on card hover */
.calc-wrap { transition: box-shadow 0.35s ease; }
.calc-wrap:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.09),
inset 0 -1px 0 rgba(255,255,255,0.03),
0 0 0 1px rgba(255,255,255,0.04),
0 12px 48px rgba(0,0,0,0.52),
0 40px 110px rgba(0,0,0,0.68),
0 90px 200px rgba(0,0,0,0.44);
}
/* Animated gradient on section title */
.earnings-section .gradient-text {
background: linear-gradient(135deg, var(--amber-light) 0%, var(--amber) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
@keyframes titleGradientShift {
0% { background-position: 0% 50%; }
100% { background-position: 300% 50%; }
}
/* ═══════════════════════════════════════════
TESTIMONIALS SLIDER
═══════════════════════════════════════════ */
.testi-section { background: #f2ede2; }
.testi-section::before { display: none; }
.testi-section .section-label { color: #a3742f; animation: none; }
.testi-section .section-label::before { background: linear-gradient(90deg, transparent, #a3742f); animation: none; }
.testi-section .section-label::after { background: linear-gradient(90deg, #a3742f, transparent); animation: none; }
.testi-section .section-title { color: #161409; }
.testi-section .section-title .gradient-text {
background: linear-gradient(135deg, #c9852f, #a3742f);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.testi-carousel { position: relative; }
.testi-stage { display: flex; align-items: stretch; gap: 14px; }
/* Same 57/43 grid the design already had — just renamed from .testi-slide
since it's now the single reusable "active" pane instead of one of many
full-width slides in a translateX track. */
.testi-pane { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 1.33fr 1fr; gap: 40px; align-items: center; }
.testi-video-placeholder { background: rgba(22,20,9,0.03); border: 1px solid rgba(22,20,9,0.10); border-radius: 20px; height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; transition: border-color 0.3s; }
.testi-video-placeholder:hover { border-color: rgba(76,175,125,0.4); }
.tvp-play { width: 64px; height: 64px; background: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; padding-left: 4px; transition: transform 0.2s; }
.testi-video-placeholder:hover .tvp-play { transform: scale(1.1); }
.tvp-label { font-size: 12px; color: #6b6656; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
/* Real driver photo, no video/play affordance since there's no video —
same 360px/20px-radius footprint as .testi-video-placeholder so the
carousel stays visually consistent across testimonials. Crop values
here are the manually-approved framing — do not touch. */
.testi-photo { border-radius: 20px; height: 360px; overflow: hidden; }
.testi-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 21%; display: block; }
.testi-media { position: relative; cursor: grab; touch-action: pan-y; }
.testi-media:active { cursor: grabbing; }
.testi-pane.is-dragging .testi-media { cursor: grabbing; }
.testi-stars { font-size: 22px; color: #f59e0b; margin-bottom: 16px; letter-spacing: 2px; }
.testi-quote { font-size: 16px; color: #6b6656; line-height: 1.75; font-style: italic; margin-bottom: 22px; }
.testi-author { display: flex; align-items: center; gap: 14px; }
.testi-avatar-wrap .testi-avatar { width: 48px; height: 48px; background: rgba(22,20,9,0.06); border: 1px solid rgba(22,20,9,0.12); border-radius: 50%; overflow: hidden; }
.testi-avatar-wrap .testi-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.testi-name { font-size: 15px; font-weight: 700; color: #161409; }
.testi-meta { font-size: 12px; color: #6b6656; margin-top: 2px; }
/* — Next-story peek: a restrained cropped sliver, not a second card.
Clicking it is a bonus affordance (same as pressing next), not required
reading — aria-hidden-equivalent via a plain descriptive label. */
.testi-peek {
flex: 0 0 auto; width: clamp(46px, 7%, 84px); height: 360px;
border-radius: 20px; overflow: hidden; border: none; padding: 0;
background: rgba(22,20,9,0.05); cursor: pointer;
opacity: 0.72; transform: scale(0.98);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.testi-peek:hover { opacity: 0.9; transform: scale(0.985); }
.testi-peek:focus-visible { outline: 2px solid #a3742f; outline-offset: 2px; }
.testi-peek-inner { width: 100%; height: 100%; }
.testi-peek-inner img { width: 100%; height: 100%; object-fit: cover; object-position: center 21%; display: block; }
/* The peek is only a narrow desktop sliver, so each source needs its own
horizontal focal point to show the next driver's face instead of an arm,
seat, or empty cab. Main testimonial crops remain independent. */
.testi-peek-photo--peter { object-position: 52% 21% !important; }
.testi-peek-photo--maxim { object-position: 50% 21% !important; }
.testi-peek-photo--jonas { object-position: 68% 21% !important; }
.testi-peek-photo--yuriy { object-position: 27% 21% !important; }
/* — Controls: arrows + editorial counter/progress line, dots retired — */
.testi-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 25px; }
.testi-controls--mobile { display: none; }
.testi-arrow {
width: 40px; height: 40px; border-radius: 50%;
background: rgba(22,20,9,0.03); border: 1px solid rgba(22,20,9,0.12); color: #161409;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.testi-arrow:hover { border-color: #a3742f; color: #a3742f; }
.testi-arrow.testi-prev:hover { transform: translateX(-2px); }
.testi-arrow.testi-next:hover { transform: translateX(2px); }
.testi-arrow:active { transform: scale(0.98); }
.testi-progress { display: flex; align-items: center; gap: 12px; }
.testi-counter { font-size: 12px; color: #6b6656; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.testi-counter [data-testi-cur] { color: #a3742f; font-weight: 700; }
.testi-progress-track { position: relative; width: 140px; height: 2px; background: rgba(22,20,9,0.12); border-radius: 2px; overflow: hidden; }
.testi-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; background: #a3742f; border-radius: 2px; transition: width 0.4s cubic-bezier(0.22,1,0.36,1); }
@media (prefers-reduced-motion: reduce) {
.testi-peek, .testi-peek-inner img, .testi-progress-fill { transition: none !important; }
}
/* — Desktop scale (>=1280px): the carousel outgrows .container's 1200px
content box, centered on the same axis via the left:50%/translateX(-50%)
breakout (containing block is .container, so this stays mathematically
centered on the viewport regardless of the clamp()'d width — verified
safe with zero overflow at 1280px and comfortable ~285px side margins at
1920px). Every internal element scales with it so the composition reads
as one intentional editorial piece instead of a small component sitting
in a large section. Approved per-photo object-position/scale overrides
(Jonas/Yuriy/Peter/Maxim) are untouched — only the shared container
geometry changes, so crops scale with the box instead of being rewritten. */
@media (min-width: 1280px) {
.testi-carousel { width: clamp(1220px, 90vw, 1350px); position: relative; left: 50%; transform: translateX(-50%); }
.testi-stage { gap: 16px; }
.testi-pane { gap: 46px; }
.testi-video-placeholder, .testi-photo { height: 405px; }
.testi-stars { font-size: 24px; margin-bottom: 18px; }
.testi-quote { font-size: 18px; line-height: 1.72; margin-bottom: 26px; }
.testi-author { gap: 16px; }
.testi-avatar-wrap .testi-avatar { width: 54px; height: 54px; }
.testi-name { font-size: 16px; }
.testi-meta { font-size: 13px; }
.testi-peek { width: clamp(58px, 6.5%, 85px); height: 405px; }
.testi-controls { gap: 22px; margin-top: 30px; }
.testi-arrow { width: 44px; height: 44px; }
.testi-counter { font-size: 13px; }
.testi-progress-track { width: 160px; }
}
/* ═══════════════════════════════════════════
TRUST BADGES
═══════════════════════════════════════════ */
.trust-badges-section { background: linear-gradient(135deg, rgba(76,175,125,0.06), rgba(58,155,213,0.05)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 0; }
.trust-badges-grid { max-width: 1280px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.tb-item { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 20px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.tb-item i { color: var(--green); font-size: 14px; }
/* ═══════════════════════════════════════════
FAQ
═══════════════════════════════════════════ */
.faq-section { }
.faq-section .section-label { color: var(--amber); animation: none; }
.faq-section .section-label::before { background: linear-gradient(90deg, transparent, var(--amber)); animation: none; }
.faq-section .section-label::after { background: linear-gradient(90deg, var(--amber), transparent); animation: none; }
/* Label gets its own quieter reveal: less travel than the generic .reveal
(spec caps movement at 20px), no blur, plus a letter-spacing "settle"
from tight to its normal 4px tracking — reads as a premium detail rather
than the standard fade-up used everywhere else. */
.faq-label-reveal.reveal {
transform: translateY(16px);
filter: none;
letter-spacing: 1px;
transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
transform 0.7s cubic-bezier(0.22,1,0.36,1),
letter-spacing 0.7s cubic-bezier(0.22,1,0.36,1);
}
.faq-label-reveal.reveal.visible { transform: none; letter-spacing: 3px; }
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 11px; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; }
.faq-item[open] {
border-color: rgba(76,175,125,0.28);
background: linear-gradient(180deg, rgba(76,175,125,0.055), var(--card) 65%);
box-shadow: 0 0 0 1px rgba(76,175,125,0.06), 0 14px 34px rgba(0,0,0,0.30);
}
.faq-item summary { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q-text { transition: color 0.25s ease, font-weight 0.25s ease; }
.faq-item[open] summary .faq-q-text { color: #fff; font-weight: 700; }
.faq-item summary i {
color: var(--muted);
transition: transform 0.26s cubic-bezier(0.22,1,0.36,1), color 0.26s ease, background 0.26s ease;
flex-shrink: 0;
font-size: 11px;
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.04);
}
.faq-item[open] summary i { transform: rotate(180deg); color: #fff; background: var(--green); }
/* Smooth NATURAL-height animation for the native /
toggle. .faq-body is the JS-height-driven panel (script.js measures
scrollHeight and animates between 0 and that value — no fixed
max-height guess, so any answer length works). .faq-body-inner is a
second, independent layer: it fades/rises in slightly after the panel
starts expanding, so long answers feel like they're being revealed
rather than dumped on screen. Opening and closing intentionally use
different durations/easratios — closing is faster and the two layers
overlap (content starts leaving before the panel finishes collapsing)
so the close reads as one continuous motion, not two sequential ones.
[open] alone (no JS/.faq-open class) is a static-visible fallback for
prefers-reduced-motion and any no-JS edge case — see the
reduced-motion block below and script.js's reduceMotion early return. */
.faq-body {
overflow: hidden; height: 0;
transition: height 340ms cubic-bezier(0.22,1,0.36,1) 40ms;
}
/* Resting state once JS clears its inline px height after the animation
settles (or immediately, for the reduced-motion/no-JS [open] fallback) —
auto height so content reflow (resize, font load) keeps working normally.
Inline style set by script.js always wins over this during the actual
transition, so there's no fight with the measured-height animation. */
.faq-item[open] .faq-body { height: auto; }
.faq-item.faq-open .faq-body { transition: height 480ms cubic-bezier(0.22,1,0.36,1) 0ms; }
.faq-item.faq-closing .faq-body { height: 0; }
.faq-body-inner {
padding: 0 24px 22px; font-size: 14px; color: var(--muted); line-height: 1.72;
max-width: 620px;
opacity: 0; transform: translateY(8px);
transition: opacity 180ms cubic-bezier(0.22,1,0.36,1) 0ms, transform 180ms cubic-bezier(0.22,1,0.36,1) 0ms;
}
.faq-item[open] .faq-body-inner { opacity: 1; transform: none; }
.faq-item.faq-open .faq-body-inner {
opacity: 1; transform: none;
transition: opacity 380ms cubic-bezier(0.22,1,0.36,1) 90ms, transform 380ms cubic-bezier(0.22,1,0.36,1) 90ms;
}
.faq-item.faq-closing .faq-body-inner {
opacity: 0; transform: translateY(-4px);
transition: opacity 180ms cubic-bezier(0.22,1,0.36,1) 0ms, transform 180ms cubic-bezier(0.22,1,0.36,1) 0ms;
}
.faq-body-inner p { margin: 0 0 13px; }
.faq-body-inner p:last-child { margin-bottom: 0; }
.faq-body-inner p.faq-emphasis { color: var(--text); font-weight: 600; }
/* FAQ #4 — weekly performance-report metrics. A compact editorial list,
not cards/pills: restrained dash marker, 2-column on desktop where the
620px answer column allows it, single column on mobile. Each row gets
its own short entrance so a 10-line list "resolves into place" instead
of flashing in as one block — small movement, short per-row stagger. */
.faq-metrics {
list-style: none; margin: 2px 0 15px; padding: 0;
display: grid; grid-template-columns: 1fr; gap: 7px 20px;
font-size: 13.5px; color: var(--muted);
}
@media (min-width: 560px) {
.faq-metrics { grid-template-columns: 1fr 1fr; }
}
.faq-metrics li {
position: relative; padding-left: 14px; line-height: 1.5;
opacity: 0; transform: translateY(5px);
transition: opacity 220ms cubic-bezier(0.22,1,0.36,1) 0ms, transform 220ms cubic-bezier(0.22,1,0.36,1) 0ms;
}
.faq-metrics li::before { content: '\2013'; position: absolute; left: 0; color: var(--amber); font-weight: 700; }
.faq-item[open] .faq-metrics li { opacity: 1; transform: none; }
.faq-item.faq-open .faq-metrics li:nth-child(1) { transition-delay: 100ms; }
.faq-item.faq-open .faq-metrics li:nth-child(2) { transition-delay: 128ms; }
.faq-item.faq-open .faq-metrics li:nth-child(3) { transition-delay: 156ms; }
.faq-item.faq-open .faq-metrics li:nth-child(4) { transition-delay: 184ms; }
.faq-item.faq-open .faq-metrics li:nth-child(5) { transition-delay: 212ms; }
.faq-item.faq-open .faq-metrics li:nth-child(6) { transition-delay: 240ms; }
.faq-item.faq-open .faq-metrics li:nth-child(7) { transition-delay: 268ms; }
.faq-item.faq-open .faq-metrics li:nth-child(8) { transition-delay: 296ms; }
.faq-item.faq-open .faq-metrics li:nth-child(9) { transition-delay: 324ms; }
.faq-item.faq-open .faq-metrics li:nth-child(10) { transition-delay: 352ms; }
.faq-item.faq-closing .faq-metrics li { opacity: 0; transform: translateY(-3px); transition: opacity 140ms ease 0ms, transform 140ms ease 0ms; }
@media (max-width: 680px) {
.faq-body-inner { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.faq-body { transition: none !important; }
.faq-body-inner, .faq-metrics li {
opacity: 1 !important; transform: none !important; transition: none !important;
}
}
/* Secondary trust action, not a second "Apply" button — the Final CTA
right below owns the actual conversion. Reuses the same restrained
amber-link pattern as .apply-talk-phone (no new color/weight invented). */
.faq-talk-cta {
display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center;
gap: 8px; font-size: 14.5px; color: var(--muted); text-decoration: none;
}
.faq-talk-cta span { display: inline-flex; align-items: center; gap: 7px; color: var(--amber); font-weight: 700; transition: color 0.2s; }
.faq-talk-cta:hover span { color: var(--amber-light); }
.faq-talk-cta i { font-size: 12px; }
/* ═══════════════════════════════════════════
APPLY
═══════════════════════════════════════════ */
.apply-section { background: linear-gradient(180deg, var(--dark2), var(--dark)); padding: 96px 0 88px; }
/* Same amber-label treatment already applied to .results-section /
.journey-vs-section (How It Works) — reused verbatim, not a new color. */
.apply-section .section-label { color: var(--amber); animation: none; }
.apply-section .section-label::before { background: linear-gradient(90deg, transparent, var(--amber)); animation: none; }
.apply-section .section-label::after { background: linear-gradient(90deg, var(--amber), transparent); animation: none; }
/* One shared "environment" instead of floating text beside a card: the
whole apply-wrap is now the surface (same restrained rgba(255,255,255,.025)
+ thin-border language as .owner-story-card), and apply-left/apply-form
are two zones inside it separated by a hairline rather than two
independently-boxed pieces. align-items:stretch (not center) so the
divider runs the full height and both zones share one top edge.
A single soft amber wash behind the headline is the section's only
"ambient lighting" — restrained, not a background flood. */
.apply-wrap {
position: relative; isolation: isolate;
display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
background: rgba(255,255,255,0.022); border: 1px solid rgba(255,255,255,0.07);
border-radius: 32px; overflow: hidden;
box-shadow: 0 40px 100px rgba(0,0,0,0.35);
}
.apply-wrap::before {
content: ''; position: absolute; top: -20%; left: -10%; width: 55%; height: 70%;
background: radial-gradient(ellipse at center, rgba(220,154,60,0.10) 0%, transparent 70%);
pointer-events: none; z-index: 0;
}
.apply-left { position: relative; z-index: 1; padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; }
.apply-left .section-title { margin-bottom: 10px; font-size: clamp(38px, 5.8vw, 72px); }
.apply-desc { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-bottom: 22px; }
.apply-perks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
/* Sequenced after the label/heading/desc reveal above it — see .reveal
delays in index.html; higher specificity than the generic
[data-stagger] > * rule so this container's items land later. */
.apply-perks[data-stagger] > * { transition-delay: calc(340ms + var(--i, 0) * 90ms); }
.perk { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); font-weight: 500; }
.perk i { color: var(--amber); font-size: 11px; flex-shrink: 0; }
/* Talk With Roman — a quiet secondary row, not another boxed card nested
inside the shared surface. A hairline top border is enough separation. */
.apply-talk { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.07); }
.apply-talk-label { font-size: 12px; color: var(--muted); }
.apply-talk-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.apply-talk-phone { display: inline-flex; align-items: center; gap: 7px; color: var(--amber); font-weight: 700; font-size: 13px; text-decoration: none; transition: color 0.2s; }
.apply-talk-phone:hover { color: var(--amber-light); }
.apply-talk-phone i { font-size: 11px; }
.apply-talk-whatsapp { display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); font-weight: 700; font-size: 13px; text-decoration: none; transition: color 0.2s; }
.apply-talk-whatsapp:hover { color: #7ee2a8; }
.apply-talk-whatsapp i { color: #57c785; font-size: 14px; }
.apply-form {
position: relative; z-index: 1;
background: rgba(0,0,0,0.18); border: none; border-left: 1px solid rgba(255,255,255,0.07);
border-radius: 0; padding: 70px 60px;
box-shadow: inset 0 1px 0 rgba(240,184,98,0.06);
display: flex; flex-direction: column; justify-content: center;
}
.apply-form-header { margin-bottom: 24px; }
.apply-form-header h3 { font-size: clamp(20px, 1.5vw, 22px); line-height: 1.2; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.apply-form-header p { font-size: 13px; color: var(--muted); }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group > label, .form-field-label { font-size: 11px; font-weight: 700; color: var(--text-soft); letter-spacing: 1px; text-transform: uppercase; }
.req { color: #f87171; }
input, select { width: 100%; background: var(--dark3); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; color: var(--text); font-family: inherit; font-size: 14px; transition: border-color 0.2s; outline: none; appearance: none; height: 44px; }
input:focus, select:focus { border-color: var(--amber); background: rgba(7,7,15,0.8); }
input::placeholder { color: var(--muted); }
select option { background: var(--dark3); }
/* Scale bump for the Final CTA form only — the global input/select rule
above stays the shared baseline (also used for nothing else site-wide
today, but scoped rather than edited directly so future form fields
don't inherit this section's specific proportions). */
.apply-form input, .apply-form select { height: 47px; padding: 11px 16px; font-size: 14.5px; border-radius: 11px; }
@media (max-width: 1024px) {
.apply-form input:not([type="checkbox"]), .apply-form select { font-size: 16px; }
}
.form-group > label.experience-confirm {
position: relative; display: flex; align-items: center; gap: 12px;
min-height: 52px; padding: 10px 14px; border-radius: 11px;
background: var(--dark3); border: 1px solid var(--border); cursor: pointer;
color: var(--text); font-size: 14px; font-weight: 600;
letter-spacing: 0; line-height: 1.35; text-transform: none;
transition: border-color 0.2s, background 0.2s;
}
.experience-confirm:hover { border-color: rgba(220,154,60,0.55); }
.apply-form .experience-confirm input {
position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.experience-check {
width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,0.22); color: #1a1712;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.experience-check i { font-size: 11px; opacity: 0; transform: scale(0.7); transition: opacity 0.2s, transform 0.2s; }
.experience-confirm input:checked + .experience-check { background: var(--amber); border-color: var(--amber); }
.experience-confirm input:checked + .experience-check i { opacity: 1; transform: scale(1); }
.experience-confirm input:focus-visible + .experience-check { box-shadow: 0 0 0 3px rgba(220,154,60,0.25); border-color: var(--amber); }
.experience-copy { position: relative; z-index: 1; }
.experience-confirm.is-invalid { border-color: #f87171; background: rgba(248,113,113,0.06); }
.experience-confirm.is-invalid .experience-check { border-color: #f87171; }
.experience-error { margin: 1px 2px 0; color: #fca5a5; font-size: 12px; line-height: 1.45; }
.experience-error[hidden] { display: none; }
.form-note { font-size: 11px; color: var(--muted); text-align: center; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.form-note i { color: var(--amber); }
.form-error { font-size: 12px; color: #e07a5f; text-align: center; margin-top: 10px; line-height: 1.5; }
.form-error.hidden { display: none; }
.form-error a { color: inherit; text-decoration: underline; }
/* Honeypot — off-screen (not display:none) so basic bots that only skip
hidden/invisible-via-display fields still fill it in and out themselves. */
.apply-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Submit is the site's one non-.btn-hero-cta ivory pill — same warm
off-white / dark-graphite-text values as .klg-cta--dark (nav "Apply
Now"), scoped here only so the global green .btn-primary used
elsewhere on the site is untouched. */
.apply-form .btn-primary { background: #f3ede0; color: #1a1712; box-shadow: 0 10px 28px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.6); }
.apply-form .btn-primary:hover { background: #fffdf8; box-shadow: 0 16px 38px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.75); }
.apply-form .btn-primary.btn-lg { height: 51px; padding: 0 32px; }
/* ═══════════════════════════════════════════
FOOTER
═══════════════════════════════════════════ */
.footer { background: #000; position: relative; }
/* Warm, restrained atmospheric wash instead of a hard green seam — ties
the Final CTA and Footer into one closing sequence rather than two
unrelated black sections. No hard line; just a soft amber glow that
fades out almost immediately. */
.footer::before {
content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 220px;
background: radial-gradient(ellipse 55% 100% at 50% 0%, rgba(220,154,60,0.07) 0%, transparent 78%);
pointer-events: none;
}
/* One shared premium surface for the two things that make KLG a real
company — the brand itself and its physical service facility — instead
of four equal-weight nav columns. Same "one environment" card language
as .apply-wrap above: near-transparent white wash, hairline border,
generous internal padding, one restrained ambient glow. */
.footer-hq {
position: relative; isolation: isolate; z-index: 1;
display: grid; grid-template-columns: 1.35fr 1fr; align-items: start; gap: 64px;
background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.065);
border-radius: 32px; padding: 56px 60px;
margin: 72px 0 0;
}
.footer-hq::before {
content: ''; position: absolute; top: -20%; right: -8%; width: 46%; height: 90%;
background: radial-gradient(ellipse at center, rgba(220,154,60,0.08) 0%, transparent 70%);
pointer-events: none; z-index: 0;
}
.footer-brand, .footer-infra { position: relative; z-index: 1; }
/* — Karo Lara Group: the dominant ~55% weight block — */
.footer-brand { display: flex; align-items: flex-start; gap: 20px; }
.footer-logo-frame {
flex: 0 0 96px; width: 96px; min-height: 78px;
display: flex; align-items: flex-start; justify-content: center;
overflow: visible; margin-top: 0;
}
.footer-logo-img {
position: static; width: 90px; height: auto !important; max-width: 100%;
transform: none; filter: none; display: block;
}
.footer-company-name { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.3px; margin-bottom: 4px; }
.footer-tagline { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 8px; letter-spacing: -0.2px; }
.footer-desc { font-size: 14px; color: var(--muted); line-height: 1.68; margin: 0 0 16px; max-width: 380px; }
.footer-address { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); text-decoration: none; margin-bottom: 14px; transition: color 0.2s; }
.footer-address:hover { color: var(--amber); }
.footer-address > i { color: var(--amber); font-size: 12px; }
.footer-directions { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255,255,255,0.28); transition: color 0.2s; }
.footer-directions i { font-size: 8px; }
.footer-address:hover .footer-directions { color: var(--amber); }
.footer-copy { font-size: 11.5px; color: rgba(255,255,255,0.32); line-height: 1.9; }
.footer-email {
display: inline-flex; align-items: center; gap: 7px;
min-height: 44px;
font-size: 12.5px; color: var(--text-soft); text-decoration: none;
transition: color 0.2s;
}
.footer-email:hover { color: var(--amber); }
.footer-email i { color: var(--amber); font-size: 11px; }
/* — Big Truck Repair: physical infrastructure, ~45% weight, one hairline
divider from the brand block. The logo carries its own red/white/teal
identity untouched; everything else around it stays graphite/ivory/amber
so it reads as "KLG also has a real shop," not a second brand. */
.footer-infra {
padding-left: 56px; border-left: 1px solid rgba(255,255,255,0.08);
display: flex; flex-direction: column; align-items: flex-start;
}
.footer-infra-details { display: contents; }
.footer-infra .footer-col-title { order: -1; color: var(--amber); margin-bottom: 0; }
.footer-truck-logo { height: 46px; width: auto; margin: 8px 0 8px; display: block; }
.footer-truck-sub { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.footer-infra .footer-address { font-size: 12.5px; margin-bottom: 8px; }
.footer-truck-phone { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--amber); text-decoration: none; transition: color 0.2s; margin-bottom: 12px; }
.footer-truck-phone:hover { color: var(--amber-light); }
.footer-truck-phone i { font-size: 12px; }
.footer-truck-services { font-size: 11.5px; color: var(--muted); letter-spacing: 0.15px; line-height: 1.65; }
/* — Quiet secondary row: navigation / contact / social. Deliberately
smaller and lower-contrast than the hq block above — reference
information, not a second wave of primary content. — */
.footer-secondary { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding: 44px 40px 0; }
.footer-col-title { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.32); margin-bottom: 10px; }
.footer-nav, .footer-contact, .footer-social { display: flex; flex-direction: column; gap: 9px; }
.footer-nav a { color: rgba(255,255,255,0.42); text-decoration: none; font-size: 12.5px; transition: color 0.2s; }
.footer-nav a:hover { color: #fff; }
.footer-contact a { color: var(--muted); text-decoration: none; font-size: 13px; transition: color 0.2s; display: flex; align-items: center; gap: 7px; }
.footer-contact a.footer-contact-phone { color: var(--text); font-weight: 700; font-size: 16px; }
.footer-contact a.footer-contact-phone:hover { color: var(--amber); }
.footer-contact-sub { font-size: 11.5px; color: rgba(255,255,255,0.32) !important; font-weight: 400 !important; }
.footer-contact-sub:hover { color: var(--amber) !important; }
/* Minimal, recognizable, warm ivory at rest — amber only on hover. */
.social-links { display: flex; gap: 12px; margin-top: 2px; }
.social-links a { width: 44px; height: 44px; background: transparent; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: rgba(243,237,224,0.72); font-size: 19px; text-decoration: none; transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, color 0.28s ease; }
.social-links a:hover { background: rgba(220,154,60,0.10); border-color: var(--amber); color: var(--amber); transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 16px rgba(220,154,60,0.18); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 26px 40px; margin-top: 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 12px; transition: color 0.2s; }
.footer-links a:hover { color: #fff; }
.footer-bottom .footer-copy { font-size: 11.5px; }
/* ═══════════════════════════════════════════
STICKY WIDGET
═══════════════════════════════════════════ */
.sticky-widget { display: none; /* temporarily disabled — revisit later */ position: fixed; bottom: 28px; right: 28px; z-index: 300; flex-direction: column; align-items: flex-end; gap: 10px; }
.sw-toggle { display: flex; align-items: center; gap: 7px; background: rgba(10,12,16,0.90); color: var(--green); border: 1px solid rgba(76,175,125,0.35); border-radius: 28px; padding: 11px 18px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; backdrop-filter: blur(12px); box-shadow: 0 6px 22px rgba(0,0,0,0.30); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.sw-toggle:hover { transform: translateY(-2px); border-color: rgba(76,175,125,0.55); box-shadow: 0 10px 30px rgba(0,0,0,0.38); }
.sw-label { font-size: 14px; }
.sw-menu { display: flex; flex-direction: column; gap: 8px; transform-origin: bottom right; transition: opacity 0.25s, transform 0.25s; }
.sw-menu.hidden { opacity: 0; transform: scale(0.8); pointer-events: none; }
.sw-item { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 12px; font-size: 13px; font-weight: 700; text-decoration: none; color: #fff; min-width: 140px; transition: transform 0.2s, opacity 0.2s; backdrop-filter: blur(10px); }
.sw-item:hover { transform: translateX(-4px); }
.sw-item i { width: 18px; text-align: center; }
.sw-call { background: #2563eb; }
.sw-text { background: #7c3aed; }
.sw-tg { background: #0088cc; }
.sw-wa { background: #25d366; }
/* ═══════════════════════════════════════════
MODAL
═══════════════════════════════════════════ */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal.hidden { display: none; }
.modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 28px; max-width: 440px; width: 100%; padding: 44px 40px; text-align: center; max-height: calc(100vh - 48px); overflow-y: auto; }
.modal-icon { width: 64px; height: 64px; background: rgba(76,175,125,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 28px; color: var(--green); }
.modal-box h3 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.modal-box > p { font-size: 14px; color: var(--muted); line-height: 1.65; margin-bottom: 24px; }
.modal-steps { background: var(--dark3); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; text-align: left; margin-bottom: 24px; }
.modal-steps-title { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: var(--muted); margin-bottom: 10px; text-transform: uppercase; }
.modal-step { font-size: 13px; color: var(--green); padding: 4px 0; }
/* Talk to Roman — one consistent chooser for secondary contact CTAs.
The number stays visible on desktop without launching FaceTime; touch
devices keep native calling, and WhatsApp works naturally everywhere.
Can be opened from inside the settlement modal (.smt-overlay, z-index
500) via its "Talk to Roman" button, so it needs to stack above that,
not just above the base .modal z-index (400). */
.roman-contact-modal { z-index: 600; }
.roman-contact-box { position: relative; max-width: 460px; padding: 40px 36px 36px; }
.roman-contact-close {
position: absolute; top: 14px; right: 14px;
width: 44px; height: 44px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid var(--border); color: var(--muted);
cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.roman-contact-close:hover { color: var(--text); border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.04); }
.roman-contact-close:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.roman-contact-icon {
width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--amber); font-size: 21px;
background: rgba(220,154,60,0.10); border: 1px solid rgba(220,154,60,0.22);
overflow: hidden;
}
.roman-contact-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 20%; display: block; }
.roman-contact-eyebrow { margin-bottom: 8px; color: var(--amber); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.roman-contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.roman-contact-action {
min-height: 78px; padding: 14px; border-radius: 14px;
display: flex; align-items: center; gap: 11px; text-align: left;
text-decoration: none; border: 1px solid var(--border);
transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.roman-contact-action:hover { transform: translateY(-2px); }
.roman-contact-action > i { flex: 0 0 20px; width: 20px; font-size: 18px; text-align: center; }
.roman-contact-action span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.roman-contact-action strong { color: var(--text); font-size: 13px; line-height: 1.25; }
.roman-contact-action small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.roman-contact-action--call { background: rgba(243,237,224,0.06); }
.roman-contact-action--call:hover { border-color: rgba(220,154,60,0.55); background: rgba(220,154,60,0.09); }
.roman-contact-action--call > i { color: var(--amber); }
.roman-contact-action--number { background: rgba(243,237,224,0.06); cursor: text; }
.roman-contact-action--number:hover { transform: none; }
.roman-contact-action--number > i { color: var(--amber); }
.roman-contact-call--mobile { display: none; }
.roman-contact-call--desktop { display: flex; }
.roman-contact-action--whatsapp { background: rgba(37,211,102,0.045); }
.roman-contact-action--whatsapp:hover { border-color: rgba(87,199,133,0.55); background: rgba(37,211,102,0.08); }
.roman-contact-action--whatsapp > i { color: #57c785; }
@media (hover: hover) and (pointer: fine) {
a[href^="tel:"] { cursor: text; }
}
@media (hover: none) and (pointer: coarse) {
.roman-contact-call--mobile { display: flex; }
.roman-contact-call--desktop { display: none; }
}
@media (max-width: 480px) {
.roman-contact-box { padding: 38px 20px 22px; border-radius: 22px; }
.roman-contact-actions { grid-template-columns: 1fr; }
.roman-contact-action { min-height: 68px; }
}
/* ─── Persistent "Talk to Roman" corner nudge ───
A secondary trust/contact route, deliberately quieter than Apply Now.
JS introduces it after the Hero and hides it around the application and
modal overlays so it never competes with the visitor's current task. */
.roman-nudge {
position: fixed; right: 18px; bottom: 18px; z-index: 180;
display: flex; align-items: center;
max-width: calc(100vw - 24px);
background: rgba(9,9,10,0.94); color: var(--text);
border: 1px solid rgba(243,237,224,0.16);
border-radius: 100px; padding: 6px 14px 6px 6px;
box-shadow: 0 10px 28px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
opacity: 0; transform: translateY(8px);
transition: opacity 360ms ease, transform 360ms ease;
pointer-events: none;
}
.roman-nudge.is-visible:not(.is-context-hidden) { opacity: 1; transform: translateY(0); pointer-events: auto; }
.roman-nudge.is-context-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; }
.roman-nudge-link { min-height: 48px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.roman-nudge-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 100px; }
.roman-nudge-avatar {
width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center 15%;
border: 1px solid rgba(243,237,224,0.34); flex-shrink: 0;
}
.roman-nudge-text { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; line-height: 1.3; color: rgba(232,232,240,0.62); }
.roman-nudge-text strong { font-size: 13.5px; font-weight: 700; color: var(--text); }
.roman-nudge-close {
position: absolute; top: -14px; right: -8px; width: 44px; height: 44px;
border-radius: 50%; background: transparent; color: #f3ede0; border: 0;
display: flex; align-items: center; justify-content: center; font-size: 10px;
cursor: pointer; padding: 0;
}
.roman-nudge-close::before {
content: ''; position: absolute; inset: 11px; border-radius: 50%;
background: #171717; border: 1px solid rgba(243,237,224,0.45);
box-shadow: 0 3px 10px rgba(0,0,0,0.32);
transition: background 0.2s, border-color 0.2s;
}
.roman-nudge-close i { position: relative; z-index: 1; }
.roman-nudge-close:hover::before { background: #8f6428; border-color: rgba(243,237,224,0.72); }
.roman-nudge-close:focus-visible { outline: 2px solid var(--amber); outline-offset: -6px; }
@media (max-width: 680px) {
.roman-nudge {
right: 10px;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
padding: 5px 12px 5px 5px;
}
.roman-nudge-link { min-height: 44px; gap: 9px; }
.roman-nudge-avatar { width: 44px; height: 44px; }
.roman-nudge-text { font-size: 11px; }
.roman-nudge-text strong { font-size: 13px; }
.roman-nudge-close { top: -14px; right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
.roman-nudge { transition: opacity 200ms ease; transform: none; }
}
/* ═══════════════════════════════════════════
BENEFITS — WHY OWNER OPERATORS STAY
═══════════════════════════════════════════ */
.benefits-section {
position: relative;
padding: 56px 0;
}
.benefits-section .container { position: relative; z-index: 1; }
.benefits-header { margin-bottom: 28px; }
.benefits-header .section-label {
color: #a3742f;
animation: labelGlowAmber 3s ease-in-out infinite;
}
.benefits-header .section-label::before { background: linear-gradient(90deg, transparent, #a3742f); }
.benefits-header .section-label::after { background: linear-gradient(90deg, #a3742f, transparent); }
/* Static pre-JS baseline for the BENEFITS — ONE-SHOT ENTRANCE timeline (script.js).
Deliberately NOT applied to .section-label itself — it has its own infinite
labelGlowAmber animation on opacity, which would fight a JS-driven opacity
tween on the same element (CSS animations win over inline styles) — this
plain wrapper carries the entrance fade instead, same pattern as .owner-eyebrow-fx. */
.benefits-eyebrow-fx { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.benefits-eyebrow-fx { opacity: 1 !important; transform: none !important; }
}
/* Local Benefits-only override: freezes the shared .section-label glow once this
section's own entrance resolves. Does not touch the global .section-label rule
or any other section using it (Hero/Earnings/Results/Owner unaffected). */
.benefits-header.bnf-settled .section-label { animation: none; }
/* ── Two-row grid layout ─────────────────── */
.bc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* ── Money confirmation — deliberately small, no card/background/border ── */
.bc-money-line {
text-align: center; font-size: 14px; font-weight: 600;
color: rgba(200,200,212,0.62); letter-spacing: 0.2px;
margin: 0 0 10px;
}
.bc-money-line:last-of-type { margin-bottom: 44px; }
/* ── Control / Support — editorial two-column split, no card grid ── */
.bc-cs-split {
display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 48px;
align-items: start; margin-bottom: 40px;
}
.bc-cs-divider { background: rgba(255,255,255,0.08); align-self: stretch; }
.bc-cs-col { padding: 4px 0; }
.bc-cs-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
color: var(--muted); margin-bottom: 14px;
}
.bc-cs-headline {
font-size: clamp(26px, 3vw, 34px); font-weight: 900; letter-spacing: -0.5px;
line-height: 1.12; color: #fff; margin-bottom: 16px;
}
.bc-cs-fact {
font-size: 17px; font-weight: 700; color: var(--amber-light);
margin-bottom: 10px;
}
.bc-cs-sub {
font-size: 15px; line-height: 1.65; color: rgba(214,214,224,0.78);
max-width: 38ch; margin-bottom: 18px;
}
/* Support's compact proof row — number-forward, no card, no checkmarks */
.bc-cs-proof {
list-style: none; padding: 0; margin: 0 0 18px;
display: flex; flex-wrap: wrap; gap: 22px 28px;
}
.bc-cs-proof li { display: flex; flex-direction: column; gap: 3px; }
.bc-cs-proof-num { font-size: 19px; font-weight: 900; color: #fff; letter-spacing: -0.3px; }
.bc-cs-proof-label { font-size: 12px; font-weight: 500; color: rgba(200,200,212,0.62); }
/* Progressive disclosure — same native interaction as the FAQ section */
.bc-cs-more { margin-top: 2px; }
.bc-cs-more summary {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
font-size: 13px; font-weight: 600; color: var(--muted);
transition: color 0.28s cubic-bezier(.22,1,.36,1);
}
.bc-cs-more summary::-webkit-details-marker { display: none; }
.bc-cs-more summary i {
font-size: 10px;
transition: transform 0.28s cubic-bezier(.22,1,.36,1), color 0.28s cubic-bezier(.22,1,.36,1);
}
/* Active state is driven by .bc-more-active (toggled in script.js the instant the
user clicks — not by the native [open] attribute, which JS only flips at the very
end of the close animation) so the chevron/summary stay in sync with the actual
motion instead of snapping only once the disclosure has fully closed. Restrained
on purpose: contrast only, no amber — this indicates state, it isn't a second CTA. */
.bc-cs-more.bc-more-active summary i { transform: rotate(180deg); color: rgba(230,230,238,0.95); }
.bc-cs-more.bc-more-active summary { color: rgba(230,230,238,0.92); }
.bc-cs-more-body {
margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08);
font-size: 14px; line-height: 1.65; color: rgba(200,200,212,0.72); max-width: 40ch;
transition: border-color 0.28s cubic-bezier(.22,1,.36,1);
}
.bc-cs-more.bc-more-active .bc-cs-more-body { border-top-color: rgba(255,255,255,0.16); }
.bc-cs-more-body p { margin: 0 0 10px; }
.bc-cs-more-body p:last-child { margin-bottom: 0; }
.bc-cs-mini-stat { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.bc-cs-mini-num { font-size: 18px; font-weight: 900; color: var(--amber-light); }
.bc-cs-mini-label { font-size: 12.5px; color: rgba(200,200,212,0.62); }
.bc-closing-cta { margin-top: 44px; }
@media (prefers-reduced-motion: reduce) {
.bc-cs-more summary i,
.bc-cs-more summary,
.bc-cs-more-body { transition: none; }
}
.bc-trailer-strip {
margin-top: 8px;
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.bc-trailer-strip-label {
font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
color: var(--muted); margin-bottom: 20px;
}
.bc-trailer-icons { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; }
.bc-trailer-icon-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,0.82); cursor: default; }
.bc-trailer-icon-item svg { width: 46px; height: auto; color: rgba(255,255,255,0.82); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), color 0.28s ease, filter 0.28s ease; }
.bc-trailer-icon-item span { font-size: 12.5px; font-weight: 500; transition: color 0.28s ease; }
.bc-trailer-icon-item:hover svg { transform: scale(1.05) translateY(-1px); color: #fff; filter: drop-shadow(0 0 4px rgba(255,255,255,0.18)); }
.bc-trailer-icon-item:hover span { color: #fff; }
@media (prefers-reduced-motion: reduce) {
.bc-trailer-icon-item:hover svg { transform: none; }
}
@media (max-width: 860px) {
.bc-cs-split { grid-template-columns: 1fr; gap: 32px; }
.bc-cs-divider { width: 100%; height: 1px; }
.bc-cs-sub, .bc-cs-more-body { max-width: none; }
.bc-trailer-icons { flex-wrap: wrap; justify-content: center; gap: 28px; }
}
/* ── Bento grid (legacy — unused, kept until new layout confirmed) ──────────────────────────── */
.bc-bento {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
margin-bottom: 16px;
}
/* Left hero */
.bc-bento-hero {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 18px 20px;
}
/* Right column — single 2x2 stat grid, matches hero card height */
.bc-bento-right {
display: flex;
flex-direction: column;
}
.bc-bento-bottom {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
height: 100%;
}
.bc-bento-bottom > .benefit-card {
min-height: 116px;
padding: 18px 18px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* Compact stat number */
.bc-bento-stat {
font-size: 46px;
font-weight: 900;
letter-spacing: -2.5px;
color: #fff;
line-height: 1;
margin-bottom: 0;
}
.bc-bento-stat-unit {
font-size: 16px;
font-weight: 600;
color: var(--green);
letter-spacing: 0;
}
/* ── Base card ───────────────────────────── */
.benefit-card {
background: rgba(255,255,255,0.042);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 22px;
padding: 36px 32px;
position: relative;
overflow: hidden;
transition:
transform 0.45s cubic-bezier(0.22,1,0.36,1),
border-color 0.35s ease,
box-shadow 0.45s ease;
}
/* Idle hover — mirrors :hover via transition */
.benefit-card.bc-idle-hover {
transform: translateY(-6px);
border-color: rgba(76,175,125,0.38);
box-shadow:
0 0 0 1px rgba(76,175,125,0.18),
0 24px 60px rgba(0,0,0,0.48),
0 0 40px rgba(76,175,125,0.08);
}
.bc-bento-bottom > .benefit-card.bc-idle-hover { transform: translateY(-3px); }
.benefit-card:hover {
transform: translateY(-6px);
border-color: rgba(76,175,125,0.38);
box-shadow:
0 0 0 1px rgba(76,175,125,0.18),
0 24px 60px rgba(0,0,0,0.48),
0 0 40px rgba(76,175,125,0.08);
}
/* ── Bottom-row hover lift stays subtle ── */
.bc-bento-bottom > .benefit-card:hover { transform: translateY(-3px); }
/* ── Top row: taller, dominant ───────────── */
.bc-card--top {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 340px;
padding: 40px 36px;
}
/* ── Mini map canvas & overlay (Card 1) ── */
.bc-map-canvas {
position: absolute !important;
inset: 0; width: 100%; height: 100%;
z-index: 0 !important;
pointer-events: none;
opacity: 0.30;
border-radius: inherit;
}
.bc-map-overlay {
position: absolute !important;
inset: 0; z-index: 1 !important;
background:
linear-gradient(to top,
rgba(4,6,16,0.98) 0%,
rgba(4,6,16,0.88) 30%,
rgba(4,6,16,0.65) 55%,
rgba(4,6,16,0.38) 76%,
rgba(4,6,16,0.18) 100%);
pointer-events: none;
border-radius: inherit;
}
.bc-card--map {
background: #050810;
border-color: rgba(76,175,125,0.12);
}
/* ── Hero heading (No Forced Dispatch card) ── */
.benefit-card .bc-hero-heading {
font-size: 58px;
font-weight: 900;
letter-spacing: -3px;
line-height: 0.95;
color: #fff;
margin-bottom: 10px;
}
/* ── Map card hover — reveal animated routes ── */
.bc-map-canvas {
transition: opacity 0.70s cubic-bezier(0.22,1,0.36,1);
}
.bc-card--map:hover .bc-map-canvas {
opacity: 1;
filter: brightness(1.4);
}
.bc-map-overlay {
transition: opacity 0.70s cubic-bezier(0.22,1,0.36,1);
}
.bc-card--map:hover .bc-map-overlay {
opacity: 0.10;
}
.bc-card--map:hover .bc-hero-heading,
.bc-card--map:hover .bc-eyebrow {
text-shadow: 0 0 24px rgba(0,0,0,0.95), 0 2px 10px rgba(0,0,0,1);
}
/* ── Always-visible stat label (bottom row) ── */
.bc-stat-label {
font-size: 10.5px;
font-weight: 600;
color: rgba(155,160,200,0.50);
margin-top: 2px;
letter-spacing: 0.2px;
line-height: 1.3;
}
/* ── Text-based stat (In-House Shop) ── */
.bc-bento-stat--text {
font-size: 28px;
font-weight: 900;
letter-spacing: -1px;
line-height: 1.1;
}
/* ── Eyebrow micro-label ── */
.bc-eyebrow {
font-size: 9px;
font-weight: 700;
letter-spacing: 2.2px;
text-transform: uppercase;
color: rgba(150,155,195,0.42);
margin-bottom: 10px;
}
.bc-eyebrow--green {
color: var(--green);
opacity: 0.78;
}
/* ── Freedom card photo + dark sweep ── */
.bc-photo--freedom {
background:
linear-gradient(to top,
rgba(4,6,16,1.00) 0%,
rgba(4,6,16,0.88) 30%,
rgba(4,6,16,0.60) 58%,
rgba(4,6,16,0.35) 80%,
rgba(4,6,16,0.18) 100%),
url('freedom-road.jpg') center 40% / cover no-repeat;
}
.bc-dark-sweep {
position: absolute !important;
inset: 0; z-index: 2 !important;
background: linear-gradient(128deg,
rgba(4,6,16,0.68) 0%,
transparent 45%,
rgba(4,6,16,0.48) 100%);
opacity: 0;
transform: translateX(-55%);
transition:
opacity 0.55s ease,
transform 1.0s cubic-bezier(0.16,1,0.3,1);
pointer-events: none;
border-radius: inherit;
}
.bc-card--freedom:hover .bc-dark-sweep {
opacity: 1;
transform: translateX(0);
}
/* ── "No Forced Dispatch" reveal line ── */
.bc-freedom-sub {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--green);
overflow: hidden;
max-height: 0;
opacity: 0;
margin-top: 0;
transition:
max-height 0.42s cubic-bezier(0.22,1,0.36,1),
opacity 0.30s ease 0.07s,
margin-top 0.30s ease;
}
.benefit-card:hover .bc-freedom-sub {
max-height: 22px;
opacity: 0.82;
margin-top: 5px;
}
/* ── RPM animated graph SVG ── */
.bc-graph-svg {
position: absolute !important;
bottom: 0; left: 0; right: 0;
width: 100%; height: 48%;
z-index: 1 !important;
pointer-events: none;
overflow: hidden;
}
.bc-graph-fill {
fill: rgba(76,175,125,0.055);
}
.bc-graph-line {
fill: none;
stroke: rgba(76,175,125,0.30);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 250;
stroke-dashoffset: 250;
transition: stroke-dashoffset 1.7s cubic-bezier(0.22,1,0.36,1) 0.45s;
}
.benefit-card.reveal.visible .bc-graph-line {
stroke-dashoffset: 0;
}
/* ── $3+ superscript ── */
.bc-stat-sup {
font-size: 18px;
font-weight: 900;
vertical-align: super;
line-height: 0;
color: var(--green);
}
/* ── Fuel card (wider, no photo) ── */
.bc-card--fuel {
background: rgba(255,255,255,0.036);
position: relative;
overflow: hidden;
}
.bc-fuel-bg {
position: absolute !important;
bottom: -10px; right: -6px;
font-size: 72px;
color: rgba(76,175,125,0.055);
z-index: 0 !important;
pointer-events: none;
line-height: 1;
}
/* ── Shop photo (placeholder until photo added) ── */
.bc-photo--shop {
background:
linear-gradient(to top,
rgba(4,6,16,1.00) 0%,
rgba(4,6,16,0.88) 30%,
rgba(4,6,16,0.60) 58%,
rgba(4,6,16,0.35) 80%,
rgba(4,6,16,0.20) 100%),
url('andy.webp') center 25% / cover no-repeat;
}
/* ── Ensure content above pseudo-elements ── */
.benefit-card > * { position: relative; z-index: 2; }
/* ── Icon ────────────────────────────────── */
.bc-icon-wrap {
width: 38px; height: 38px; border-radius: 10px;
background: rgba(76,175,125,0.12);
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: var(--green);
margin-bottom: 8px;
flex-shrink: 0;
opacity: 0; transform: scale(0.5);
transition: background 0.3s, transform 0.3s;
}
.benefit-card.reveal.visible .bc-icon-wrap { animation: iconBounceIn 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.benefit-card:nth-child(1).reveal.visible .bc-icon-wrap { animation-delay: 0.15s; }
.benefit-card:nth-child(2).reveal.visible .bc-icon-wrap { animation-delay: 0.25s; }
.benefit-card:nth-child(3).reveal.visible .bc-icon-wrap { animation-delay: 0.35s; }
@keyframes iconBounceIn {
from { transform: scale(0.4); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.benefit-card:hover .bc-icon-wrap { background: rgba(76,175,125,0.22); transform: scale(1.10) !important; opacity: 1 !important; }
/* ── Typography ──────────────────────────── */
.benefit-card h3 {
font-size: 26px;
font-weight: 900;
letter-spacing: -0.8px;
line-height: 1.1;
color: #fff;
margin-bottom: 0;
}
/* ── Two-state: description hidden by default ── */
.benefit-card p {
font-size: 12.5px;
color: rgba(200,200,220,0.50);
line-height: 1.45;
overflow: hidden;
max-height: 0;
opacity: 0;
margin-top: 0;
transition:
max-height 0.42s cubic-bezier(0.22,1,0.36,1),
opacity 0.32s ease 0.06s,
margin-top 0.32s ease;
}
.benefit-card:hover p {
max-height: 80px;
opacity: 1;
margin-top: 7px;
}
/* Freedom tags hidden by default */
.bc-freedom-tags {
overflow: hidden;
max-height: 0;
opacity: 0;
margin-top: 0;
gap: 6px;
transition:
max-height 0.42s cubic-bezier(0.22,1,0.36,1),
opacity 0.32s ease 0.08s,
margin-top 0.32s ease;
}
.benefit-card:hover .bc-freedom-tags {
max-height: 60px;
opacity: 1;
margin-top: 10px;
}
/* ── Shimmer sweep on reveal ─────────────── */
.benefit-card::after {
content: '';
position: absolute;
top: 0; left: -90%;
width: 55%; height: 100%;
background: linear-gradient(105deg,
transparent 20%,
rgba(255,255,255,0.045) 50%,
transparent 80%);
transform: skewX(-12deg);
pointer-events: none;
z-index: 1;
opacity: 0;
}
.benefit-card.reveal.visible::after { animation: benefitShimmer 1s ease-out forwards; }
.benefit-card:nth-child(1).reveal.visible::after { animation-delay: 0.05s; }
.benefit-card:nth-child(2).reveal.visible::after { animation-delay: 0.18s; }
.benefit-card:nth-child(3).reveal.visible::after { animation-delay: 0.30s; }
@keyframes benefitShimmer {
0% { left: -90%; opacity: 0; }
12% { opacity: 1; }
100% { left: 130%; opacity: 0; }
}
/* ── Photo background card ───────────────── */
.benefit-card--photo {
overflow: hidden;
background: #070710;
border-color: rgba(255,255,255,0.07);
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 240px;
}
.benefit-card--photo .bc-icon-wrap { background: rgba(76,175,125,0.14); }
.benefit-card--photo h3 { color: #fff; margin-bottom: 8px; }
.bc-photo {
position: absolute; inset: 0; z-index: 0;
background:
linear-gradient(to top,
rgba(7,7,15,1.00) 0%,
rgba(7,7,15,0.92) 30%,
rgba(7,7,15,0.78) 55%,
rgba(7,7,15,0.60) 75%,
rgba(7,7,15,0.46) 100%),
url('fuel-station.jpg') center 42% / cover no-repeat;
opacity: 0.22;
transform: scale(1.03);
transition:
opacity 1.1s cubic-bezier(0.16,1,0.3,1),
transform 1.4s cubic-bezier(0.16,1,0.3,1),
filter 0.8s ease;
}
.benefit-card--photo:hover .bc-photo {
opacity: 1;
transform: scale(1.05);
filter: brightness(1.10) saturate(1.06) contrast(1.02);
}
.benefit-card--photo:hover { border-color: rgba(76,175,125,0.35); }
/* Fleet photo — Card 1 ($9,500) */
.bc-photo--fleet {
background:
linear-gradient(to top,
rgba(7,7,15,1.00) 0%,
rgba(7,7,15,0.92) 28%,
rgba(7,7,15,0.75) 52%,
rgba(7,7,15,0.55) 72%,
rgba(7,7,15,0.40) 100%),
url('trucks-lineup.jpg') center 35% / cover no-repeat;
}
/* RPM cab photo */
.bc-photo--rpm {
background:
linear-gradient(to top,
rgba(7,7,15,1.00) 0%,
rgba(7,7,15,0.92) 30%,
rgba(7,7,15,0.75) 55%,
rgba(7,7,15,0.55) 75%,
rgba(7,7,15,0.42) 100%),
url('rpm-cab.jpg') center 40% / cover no-repeat;
}
/* First Load photo */
.bc-photo--load {
background:
linear-gradient(to top,
rgba(7,7,15,1.00) 0%,
rgba(7,7,15,0.92) 30%,
rgba(7,7,15,0.78) 55%,
rgba(7,7,15,0.60) 75%,
rgba(7,7,15,0.48) 100%),
url('first-load.jpg') center 40% / cover no-repeat;
}
/* ── Centered CTA Block ── */
.bc-cta-block {
background: rgba(255,255,255,0.028);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(76,175,125,0.18);
border-radius: 20px;
padding: 28px 36px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 48px;
animation: ctaGlowBreath 6s ease-in-out infinite;
}
.bc-cta-left { flex: 1 1 auto; }
.bc-cta-right {
display: flex;
flex-direction: column;
align-items: flex-end;
flex-shrink: 0;
gap: 8px;
}
@keyframes ctaGlowBreath {
0%,100% { box-shadow: 0 0 0 1px rgba(76,175,125,0.07), 0 0 40px rgba(76,175,125,0.06), 0 16px 48px rgba(0,0,0,0.28); }
50% { box-shadow: 0 0 0 1px rgba(76,175,125,0.13), 0 0 56px rgba(76,175,125,0.11), 0 16px 48px rgba(0,0,0,0.28); }
}
.bc-cta-title {
font-size: 26px;
font-weight: 900;
letter-spacing: -1px;
color: #fff;
line-height: 1.1;
margin-bottom: 7px;
}
.bc-cta-sub {
font-size: 13px;
color: rgba(180,180,215,0.50);
line-height: 1.5;
margin: 4px 0 0;
}
.bc-cta-btn {
display: inline-flex;
align-items: center;
white-space: nowrap;
gap: 12px;
padding: 20px 52px;
background: linear-gradient(135deg, #4caf7d, #3a9bd5);
color: #fff;
font-size: 19px;
font-weight: 700;
border-radius: 16px;
text-decoration: none;
box-shadow: 0 8px 36px rgba(76,175,125,0.45);
transition: transform 0.25s ease, box-shadow 0.25s ease, animation 0s;
animation: resBtnPulse 4s ease-out 1s infinite;
}
.bc-cta-btn:hover {
transform: translateY(-3px);
box-shadow: 0 16px 52px rgba(76,175,125,0.62) !important;
animation: none;
}
.bc-cta-btn:hover .ha-arrow { transform: translateX(5px); }
.bc-cta-phone {
font-size: 12px;
color: rgba(150,150,185,0.42);
margin: 0;
}
.bc-cta-phone a {
color: rgba(76,175,125,0.58);
text-decoration: none;
transition: color 0.25s;
}
.bc-cta-phone a:hover { color: var(--green); }
/* ── Button starts shifted left ── */
@media (min-width: 768px) {
.bc-cta-btn-wrap {
transform: translateX(-90px);
}
}
/* ── Forklift outer wrapper — JS controls translateX ── */
.bc-fk-wrap {
position: absolute;
right: 0;
bottom: -6px;
pointer-events: none;
z-index: 10;
display: none;
will-change: transform;
}
@media (min-width: 768px) {
.bc-fk-wrap { display: block; }
}
/* ── Suspension bounce — inner layer, JS adds/removes class ── */
@keyframes fkSuspension {
0%,100% { transform: translateY(0px) rotate(0deg); }
22% { transform: translateY(-2.8px) rotate(-0.15deg); }
60% { transform: translateY(1px) rotate(0.08deg); }
}
.bc-fk-bounce.is-driving {
animation: fkSuspension 0.40s cubic-bezier(0.45,0,0.55,1) infinite;
}
/* ── Auto-hover flash class — mirrors :hover rules ── */
.benefit-card.bc-card--lit {
transform: translateY(-6px);
border-color: rgba(76,175,125,0.38);
box-shadow:
0 0 0 1px rgba(76,175,125,0.18),
0 24px 60px rgba(0,0,0,0.48),
0 0 40px rgba(76,175,125,0.08);
}
.bc-bento-bottom > .benefit-card.bc-card--lit { transform: translateY(-3px); }
.bc-card--map.bc-card--lit .bc-map-canvas { opacity: 1; filter: brightness(1.4); }
.bc-card--map.bc-card--lit .bc-map-overlay { opacity: 0.10; }
.bc-card--map.bc-card--lit .bc-hero-heading,
.bc-card--map.bc-card--lit .bc-eyebrow { text-shadow: 0 0 24px rgba(0,0,0,0.95), 0 2px 10px rgba(0,0,0,1); }
/* ── SVG container ── */
.bc-forklift {
width: 172px;
height: 100px;
display: block;
}
.bc-forklift svg { display: block; }
/* ── Fork carriage raise / lower ── */
#fk-forks {
transition: transform 600ms cubic-bezier(0.0, 0.0, 0.18, 1);
}
.bc-fk-wrap.forks-up #fk-forks { transform: translateY(-20px); }
.bc-fk-wrap.forks-down #fk-forks { transform: translateY(0px); }
/* ── Beacon flash when driving ── */
@keyframes beaconFlash {
0%, 100% { opacity: 1; filter: drop-shadow(0 0 3px rgba(255,80,0,0.5)); }
48% { opacity: 0.25; filter: none; }
}
.bc-fk-bounce.is-driving #fk-beacon {
animation: beaconFlash 0.75s ease-in-out infinite;
}
/* ── Headlight beam ── */
.bc-fk-beam {
position: absolute;
right: 146px;
top: 15px;
width: 120px;
height: 34px;
background: linear-gradient(
to left,
rgba(255,252,180,0.26) 0%,
rgba(255,252,180,0.10) 55%,
transparent 100%
);
clip-path: polygon(100% 28%, 100% 72%, 0% 100%, 0% 0%);
opacity: 0;
transition: opacity 0.8s ease;
pointer-events: none;
}
.bc-fk-beam::after {
content: '';
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
width: 14px; height: 14px;
border-radius: 50%;
background: rgba(255,252,200,0.60);
box-shadow: 0 0 14px 7px rgba(255,252,150,0.28), 0 0 28px 14px rgba(255,250,100,0.10);
}
.bc-fk-wrap.is-lit .bc-fk-beam { opacity: 1; }
/* ── Ground shadow under forklift ── */
.bc-fk-shadow {
position: absolute;
bottom: -2px;
left: 14px;
width: 130px;
height: 10px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(0,0,0,0.40) 0%, transparent 70%);
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* ── Button placed glow ── */
@keyframes btnPlacedPulse {
0% { box-shadow: 0 6px 24px rgba(76,175,125,0.32); }
28% { box-shadow: 0 0 0 3px rgba(76,175,125,0.55), 0 0 65px rgba(76,175,125,0.65), 0 8px 48px rgba(76,175,125,0.52); }
100% { box-shadow: 0 6px 24px rgba(76,175,125,0.32); }
}
.bc-cta-btn--placed {
animation: btnPlacedPulse 1.6s cubic-bezier(0.22,1,0.36,1) !important;
}
/* ── Mobile glow pulse ── */
@keyframes klgBtnGlowPulse {
0%,100% { box-shadow: 0 6px 24px rgba(76,175,125,0.32); }
50% { box-shadow: 0 0 0 2px rgba(76,175,125,0.48), 0 8px 40px rgba(76,175,125,0.54); }
}
.bc-cta-btn--pulse {
animation: klgBtnGlowPulse 1.8s ease-in-out !important;
}
/* ═══════════════════════════════════════════
MAINTENANCE SECTION
═══════════════════════════════════════════ */
.maint-section { }
.maint-wrap { display: grid; grid-template-columns: 1fr 480px; gap: 80px; align-items: start; }
.maint-sub { font-size: 20px; font-weight: 700; color: var(--muted); margin-bottom: 28px; font-style: italic; }
.maint-body { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.maint-body p { font-size: 15px; color: var(--muted); line-height: 1.65; }
.maint-callout { font-size: 18px !important; font-weight: 700 !important; color: var(--text) !important; border-left: 3px solid var(--green); padding-left: 16px; }
.maint-body strong { color: var(--text); }
.maint-features { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 120px; }
.maint-feat { display: flex; align-items: flex-start; gap: 18px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; transition: border-color 0.2s, transform 0.2s; }
.maint-feat:hover { border-color: rgba(76,175,125,0.2); transform: translateX(4px); }
.mf-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(76,175,125,0.1); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--green); flex-shrink: 0; }
.mf-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.mf-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
/* ═══════════════════════════════════════════
MECHANIC SECTION
═══════════════════════════════════════════ */
.mechanic-section { background: var(--dark2); }
.mechanic-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 80px; align-items: start; }
.mechanic-photo { background: var(--card); border: 1px solid var(--border); border-radius: 24px; overflow: hidden; margin-bottom: 0; }
.mechanic-placeholder { height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); gap: 14px; background: linear-gradient(160deg, var(--card), var(--card2)); }
.mechanic-placeholder i { font-size: 64px; opacity: 0.3; }
.mechanic-placeholder span { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; opacity: 0.4; }
.mechanic-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 24px 0 32px; }
.ms-item { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ms-item i { color: var(--green); font-size: 11px; flex-shrink: 0; }
/* ═══════════════════════════════════════════
MORE THAN JUST DISPATCH
═══════════════════════════════════════════ */
.morethan-section { background: var(--dark3); }
.morethan-wrap { display: grid; grid-template-columns: 1fr 440px; gap: 80px; align-items: start; }
.morethan-body { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.morethan-body p { font-size: 16px; color: var(--muted); line-height: 1.65; }
.morethan-body strong { color: var(--text); }
.morethan-callout { font-size: 20px !important; font-weight: 800 !important; color: var(--text) !important; background: linear-gradient(135deg, var(--blue), var(--green)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.morethan-trust { background: var(--card); border: 1px solid rgba(76,175,125,0.15); border-radius: 24px; padding: 32px; position: sticky; top: 120px; }
.mt-header { font-size: 10px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--green); margin-bottom: 20px; }
.mt-list { display: flex; flex-direction: column; gap: 12px; }
.mt-item { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--text); padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,0.03); transition: background 0.2s; }
.mt-item:hover { background: rgba(76,175,125,0.07); }
.mt-item i { color: var(--green); font-size: 12px; flex-shrink: 0; }
/* ═══════════════════════════════════════════
FINAL HIGH-CONVERSION CTA
═══════════════════════════════════════════ */
.final-cta-section { background: linear-gradient(135deg, #050510 0%, #0a1a12 50%, #050510 100%); border-top: 1px solid rgba(76,175,125,0.15); border-bottom: 1px solid rgba(76,175,125,0.15); padding: 96px 0; }
.final-cta-inner { display: grid; grid-template-columns: 1fr 380px; gap: 80px; align-items: center; }
.fci-title { font-size: clamp(32px, 4vw, 56px); font-weight: 900; line-height: 1.05; letter-spacing: -1.5px; margin-bottom: 12px; }
.fci-sub { font-size: 18px; color: var(--muted); margin-bottom: 28px; }
.fci-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.fci-item { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); }
.fci-item i { color: var(--green); flex-shrink: 0; }
.fci-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fci-note { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.fci-note i { color: var(--green); }
.fci-stat-block { background: rgba(255,255,255,0.03); border: 1px solid rgba(76,175,125,0.2); border-radius: 24px; padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; overflow: hidden; }
.fsb-item { padding: 28px 20px; text-align: center; background: rgba(76,175,125,0.04); }
.fsb-item:nth-child(2n) { background: rgba(58,155,213,0.04); }
.fsb-num { font-size: 40px; font-weight: 900; background: linear-gradient(135deg, var(--blue), var(--green)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.fsb-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
/* ═══════════════════════════════════════════
ANIMATIONS
═══════════════════════════════════════════ */
/* ─────────────────────────────────────────
UNIVERSAL CARD GLOW SYSTEM
Same breathing language as 10% card and Roman photo.
One keyframe, applied everywhere with staggered delay.
───────────────────────────────────────── */
@keyframes borderBreath {
0%, 100% { border-color: rgba(255,255,255,0.08); }
50% { border-color: rgba(76,175,125,0.17); }
}
/* — Benefit cards — */
.benefit-card.reveal.visible {
animation: borderBreath 5.5s ease-in-out infinite;
}
/* Card-specific entrance directions */
.bc-bento-hero.reveal { transform: translateX(-32px) translateY(0); }
.bc-bento-hero.reveal.visible { transform: translateX(0); }
.bc-card--freedom.reveal { transform: translateX(32px) translateY(0); }
.bc-card--freedom.reveal.visible { transform: translateX(0); }
.benefit-card:hover {
transform: translateY(-6px);
border-color: rgba(76,175,125,0.38);
box-shadow: 0 0 0 1px rgba(76,175,125,0.18), 0 24px 60px rgba(0,0,0,0.48), 0 0 40px rgba(76,175,125,0.08);
}
.bc-bento-hero:hover { transform: translateY(-4px); }
.benefit-card:hover .bc-icon-wrap { background: rgba(76,175,125,0.22); transform: scale(1.10); }
/* — Result cards (non-featured breathe neutral; featured breathes amber) — */
@keyframes borderBreathNeutral {
0%, 100% { border-color: rgba(255,255,255,0.08); }
50% { border-color: rgba(255,255,255,0.22); }
}
.result-card.res-in:not(.result-card--featured) {
animation: borderBreathNeutral 6.2s ease-in-out 1s infinite;
}
.result-card--featured.res-in {
animation: resBreatheAmber 5s ease-in-out 0.5s infinite;
}
.result-card:hover:not(.result-card--featured) {
transform: translateY(-4px);
border-color: rgba(255,255,255,0.24);
box-shadow: 0 0 30px rgba(255,255,255,0.06), 0 20px 56px rgba(0,0,0,0.45);
}
.result-card--featured:hover {
transform: scale(1.05) translateY(-4px);
border-color: rgba(220,154,60,0.45);
box-shadow: 0 0 34px rgba(220,154,60,0.14), 0 20px 56px rgba(0,0,0,0.45);
}
/* — People / team cards — */
.people-card.reveal.visible {
animation: borderBreath 5s ease-in-out 0.4s infinite;
}
.people-card:hover {
transform: translateY(-8px);
border-color: rgba(76,175,125,0.36);
box-shadow: 0 32px 80px rgba(0,0,0,0.45), 0 0 40px rgba(76,175,125,0.11);
}
.people-card:hover .people-photo img { transform: scale(1.05); }
/* — FAQ items — */
.faq-item:not([open]):hover {
border-color: rgba(76,175,125,0.22);
box-shadow: 0 0 24px rgba(76,175,125,0.07);
}
/* — Trust badges — */
.tb-item {
transition: border-color 0.32s ease, box-shadow 0.32s ease, transform 0.32s ease;
}
.tb-item:hover {
border-color: rgba(76,175,125,0.30);
box-shadow: 0 0 18px rgba(76,175,125,0.09);
transform: translateY(-2px);
}
/* — Earnings calculator card — */
.calc-wrap {
transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.calc-wrap:hover {
border-color: rgba(76,175,125,0.22);
box-shadow: 0 0 38px rgba(76,175,125,0.07), 0 12px 48px rgba(0,0,0,0.35);
}
/* Suppress all breathing on reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
.benefit-card.reveal.visible,
.result-card.res-in:not(.result-card--featured),
.people-card.reveal.visible {
animation: none !important;
}
.earnings-section::after { animation: none; }
.calc-bar-you { animation: none; background-position: 0% 50%; }
.calc-bar-you::after { animation: none; }
.calc-hero-num.is-sweep,
.calc-hero-num.is-milestone { animation: none !important; filter: drop-shadow(0 0 18px rgba(76,175,125,0.22)); }
.calc-wrap.reveal.visible .calc-left,
.calc-wrap.reveal.visible .calc-results,
.calc-wrap.reveal.visible .calc-apply-btn { animation: none; opacity: 1; transform: none; }
.calc-apply-btn.is-nudge { animation: none !important; }
}
/* ═══════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1200px) {
.hero { padding: 130px 40px 80px; }
.hero-content { max-width: 500px; }
.hero-right { width: 336px; }
.owner-main-cols { grid-template-columns: 340px 1fr; gap: 32px; }
.osc-icons-row { grid-template-columns: repeat(2, 1fr); }
.ods-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
.nav-links, .desktop-only { display: none; }
.burger { display: flex; }
.hero { flex-direction: column; justify-content: center; align-items: flex-start; min-height: auto; height: auto; padding: 120px 40px 60px; gap: 32px; }
.hero-right { width: 100%; max-width: 480px; }
.hero-metrics { flex: 1; min-width: 260px; }
/* Flex-wrap packed 3 icons on row one / 1 alone on row two anywhere in the
stacked-hero range (681-1024px included, not just <=680) — different
label widths mean the wrap point isn't predictable. Force an even 2x2
grid instead so it's always symmetric regardless of label length. The
row also contains 3 .htr-div separators (thin vertical dividers, meant
for the single-row flex layout) interleaved between the 4 icons — those
must be excluded from the grid or they each claim a column-2 cell,
leaving every icon alone in column 1. */
.hero-trust-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
.hero-trust-row .htr-div { display: none; }
.owner-main-cols { grid-template-columns: 290px 1fr; gap: 24px; }
.owner-photo-img { height: 380px; }
.ops-grid { grid-template-columns: repeat(2, 1fr); }
.osys-grid { grid-template-columns: repeat(3, 1fr); }
.klgd-grid { grid-template-columns: repeat(2, 1fr); }
.osc-icons-row { grid-template-columns: repeat(2, 1fr); }
.ods-grid { grid-template-columns: repeat(3, 1fr); }
.owy-cols { gap: 22px; }
.owner-why-section { padding: 26px 28px 30px; }
.owner-comm-pct { letter-spacing: -5px; }
.results-grid { display: flex; flex-direction: column; gap: 16px; max-width: 400px; margin: 0 auto 24px; }
.result-card { order: 2; }
.result-card--featured { order: 1; padding: 36px 28px; }
.result-card--featured .rc-gross { font-size: 52px; }
.bc-bento { grid-template-columns: 1fr; }
.bc-bento-bottom { grid-template-columns: 1fr 1fr; }
.bc-cta-block { padding: 28px 24px; }
.bc-cta-title { font-size: 22px; letter-spacing: -0.7px; }
.calc-badges { flex-wrap: wrap; gap: 10px; padding: 14px 18px; }
.calc-badge { flex: 1; min-width: calc(50% - 10px); justify-content: flex-start; }
.cb-sep { display: none; }
.calc-wrap { grid-template-columns: 1fr; gap: 32px; padding: 36px 32px; }
.calc-hero-num { font-size: 60px; }
.calc-presets { flex-direction: row; }
.testi-stage { flex-direction: column; gap: 24px; }
.testi-pane { grid-template-columns: 1fr; gap: 24px; }
/* No "next edge" concept once photo/quote stack vertically — swipe is
the whole interaction here, so the peek adds nothing but clutter. */
.testi-peek { display: none; }
/* Tablet stack: preserve a photographic 2:1 frame instead of collapsing
portraits into the old 300px panoramic strip. The <=680px rule below
still switches phones to their taller approved 4:3 composition. */
.testi-video-placeholder, .testi-photo { width: 100%; height: auto; aspect-ratio: 2 / 1; }
/* Shared top-biased anchor preserves headroom for Peter and Maxim;
portrait sources that need a different focal point are overridden below. */
.testi-photo img { object-position: center 9%; }
/* In the stacked composition, navigation belongs to the photo rather than
below a variable-length quote. Keeping the controls adjacent to the media
lets drivers change stories without scrolling the active image under the
fixed navigation bar. The original controls remain the desktop version. */
.testi-controls--mobile { display: flex; margin-top: 12px; }
.testi-controls--desktop { display: none; }
.testi-controls--mobile .testi-arrow { width: 44px; height: 44px; flex: 0 0 44px; }
.testi-progress-track { width: 100px; }
.cmp-table-wrap { display: none; }
.cmp-mobile-cards { display: block; }
.apply-section { padding: 72px 0 64px; }
.apply-wrap { grid-template-columns: 1fr; border-radius: 24px; }
.apply-left { padding: 40px 36px; }
.apply-form { border-left: none; border-top: 1px solid rgba(255,255,255,0.07); padding: 40px 36px; }
/* Mobile priority: 1 Karo Lara Group, 2 Big Truck Repair (the two stay
paired — they share one surface by design), then within the quiet
row: contact/apply path before social before secondary navigation. */
.footer-hq { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; border-radius: 24px; margin-top: 48px; }
.footer-infra {
padding-left: 0; border-left: none; padding-top: 28px;
border-top: 1px solid rgba(255,255,255,0.08);
display: grid; grid-template-columns: 96px minmax(0, 1fr);
align-items: start; column-gap: 20px;
}
.footer-infra-details { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.footer-infra .footer-col-title { order: 0; margin-bottom: 9px; }
.footer-infra .footer-truck-logo {
grid-column: 1; grid-row: 1; order: 0;
width: 96px; height: auto; margin: 0;
}
.footer-infra .footer-truck-sub { margin-bottom: 12px; }
.footer-secondary { grid-template-columns: 1fr; gap: 28px; padding: 36px 40px 0; }
.footer-nav, .footer-contact, .footer-social { order: 0; }
.footer-contact { order: 1; }
.footer-social { order: 2; }
.footer-nav { order: 3; }
.maint-wrap { grid-template-columns: 1fr; }
.maint-features { position: static; }
.mechanic-wrap { grid-template-columns: 280px 1fr; gap: 50px; }
.people-grid { grid-template-columns: 1fr 1fr; }
.people-card--wide { grid-column: span 2; }
.people-card--wide .people-photo img { height: 280px; }
.support-team-grid { grid-template-columns: repeat(2, 1fr); }
.morethan-wrap { grid-template-columns: 1fr; }
.morethan-trust { position: static; }
.final-cta-inner { grid-template-columns: 1fr; }
.fci-right { display: none; }
}
/* Yuriy-only desktop/tablet crop: his source photo's thumbs-up sits low in
frame, so the shared 21% anchor cut it off near the bottom edge. Placed
here (after the 1024px block, same specificity as its shared 9% rule) so
it wins for >680px — including the 681-1024px tablet range, which reuses
the shared mobile height/position — while the <=680px block below still
wins for phones via its own Yuriy-specific rule + later source position. */
.testi-photo--yuriy img { object-position: center 26%; }
/* Jonas's portrait source places his face lower than the other drivers.
In the stacked tablet 2:1 frame, the shared 9% anchor clips him at the
bottom; this tablet-only anchor keeps his full face visible. Phone and
desktop crops remain controlled by their existing rules. */
@media (min-width: 681px) and (max-width: 1024px) {
.testi-photo--jonas img { object-position: center 23%; }
}
/* ─── Tablet portrait (768px) ─────────────── */
@media (max-width: 768px) {
.ha-right { animation-name: haUp; }
.container { padding: 0 24px; }
.section { padding: 72px 0; }
.calc-wrap { padding: 28px 22px; }
.results-grid { display: flex; flex-direction: column; gap: 16px; max-width: 440px; margin: 0 auto 24px; }
.result-card { order: 2; }
.result-card--featured { order: 1; }
.people-photo img { height: 280px; }
.people-card--wide .people-photo img { height: 280px; }
.people-photo--placeholder { height: 280px; }
.rc-gross { font-size: 44px; }
.result-card--featured .rc-gross { font-size: 50px; }
.cmp-table-wrap { display: none; }
.cmp-mobile-cards { display: block; }
.hero-offer-card { padding: 18px 24px 16px; }
.hoc-num { font-size: 88px; }
}
/* ─── Phone (680px) ───────────────────────── */
@media (max-width: 680px) {
.logo-img { height: 68px; width: 87.5px; }
.nav-inner { padding: 0 20px; }
.nav.scrolled .logo-img { height: 56px; width: 72.1px; }
.container { padding: 0 18px; }
.section { padding: 60px 0; }
.apply-section { padding: 60px 0 52px; }
.trust-strip { padding: 14px 18px; }
.trust-badges-grid { padding: 0 18px; }
.hero { padding: 96px 18px 48px; min-height: auto; }
.hero-title { font-size: clamp(28px, 8vw, 44px); letter-spacing: -1px; }
.hoc-num { font-size: 76px; letter-spacing: -3px; }
.hoc-sub { font-size: 14px; letter-spacing: 3px; }
.hoc-only { font-size: 20px; }
.hero-offer-card { padding: 16px 20px 14px; }
.ten-banner { padding: 20px 18px; }
.tb-big { font-size: 52px; }
.tb-main { font-size: 16px; }
.ten-banner-inner { gap: 16px; }
.ten-banner-cta { width: 100%; }
.ten-banner-cta .btn-primary { width: 100%; justify-content: center; }
.hero-btns { flex-direction: column; }
.hero-btns a { text-align: center; justify-content: center; width: 100%; }
/* klg-cta stays content-driven even here — never stretched to fill empty width */
.hero-btns .klg-cta { width: auto; max-width: 100%; }
.hero-sub { font-size: 14.5px; }
.hero-dispatcher { flex-direction: row; }
.htr-num { font-size: 16px; }
.hero-right { flex-direction: column; max-width: 100%; }
.hm-row2 { grid-template-columns: 1fr 1fr; }
.hm-num { font-size: 30px; }
.hm-num--md { font-size: 20px; }
.people-grid { grid-template-columns: 1fr; }
.people-card--wide { grid-column: span 1; }
.people-photo img, .people-card--wide .people-photo img { height: 240px; }
.people-photo--placeholder { height: 240px; }
.support-team-grid { grid-template-columns: 1fr; }
.shop-photos { grid-template-columns: 1fr; }
.shop-photo img { height: 260px; }
.owner-vp1 { gap: 32px; }
.owner-main-cols { grid-template-columns: 1fr; gap: 28px; }
.owner-mobile-heading { display: block; order: 0; text-align: center; padding-inline: 8px; }
.owner-mobile-heading .section-label { color: #a3742f; }
.owner-mobile-heading .section-label::before { background: linear-gradient(90deg, transparent, #a3742f); }
.owner-mobile-heading .section-label::after { background: linear-gradient(90deg, #a3742f, transparent); }
.owner-mobile-heading .owner-headline { max-width: 620px; margin: 0 auto; text-align: center; }
.owner-photo-col { order: 1; }
.owner-story-col { order: 2; }
.owner-story-header > .owner-eyebrow-fx,
.owner-story-header > .owner-headline { display: none; }
.owner-story-card { padding: 24px 20px 28px; }
.ops-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.osys-grid { grid-template-columns: 1fr; gap: 12px; }
.osc-vs { grid-template-columns: 1fr auto 1fr; gap: 10px; }
.osc-vs-arrow { margin-top: 24px; }
.klgd-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.klgd-title { font-size: 15px; }
.wke-pair { grid-template-columns: 1fr 20px 1fr; gap: 6px; }
.wke-pain > span, .wke-sol > span { font-size: 12px; }
.osc-icons-row { grid-template-columns: repeat(2, 1fr); }
.owner-map-bg { display: none; }
.ods-grid { grid-template-columns: 1fr; gap: 12px; }
.owy-cols { grid-template-columns: 1fr; gap: 0; }
.owy-divider { display: none; }
.owy-col:first-child { padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 20px; }
.owner-why-section { padding: 22px 20px 26px; }
.owner-story-text { padding-left: 14px; }
.owner-story-text .ost-lead { font-size: 16px; }
.owner-ctas { align-items: stretch; }
.owner-card-stats { align-items: flex-start; }
.owner-photo-img { height: 340px; }
.owner-truck-bg { width: 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 70%, transparent 100%); -webkit-mask-composite: unset; mask-composite: unset; }
.owner-vp3 { padding: 72px 0 80px; }
.owner-comm-pct { letter-spacing: -4px; }
.btn-owner-apply { width: 100%; justify-content: center; }
.btn-owner-talk { width: 100%; justify-content: center; }
.owner-ctas { width: 100%; }
.bc-bento { grid-template-columns: 1fr; }
.bc-bento-bottom { grid-template-columns: 1fr 1fr; }
.bc-cta-block { flex-direction: column; align-items: stretch; text-align: center; }
.bc-cta-right { align-items: center; }
.bc-cta-btn { width: 100%; }
.results-grid { max-width: 100%; }
.rc-gross { font-size: 40px; }
.result-card--featured .rc-gross { font-size: 44px; }
.rc-stats { gap: 4px; }
.rc-stat { padding: 8px 2px; }
.rc-val { font-size: 14px; }
.calc-badges { padding: 12px 14px; gap: 8px; }
.cb-title { font-size: 11.5px; }
.cb-sub { display: none; }
.calc-wrap { padding: 22px 18px; border-radius: 18px; }
.calc-hero-num { font-size: 48px; letter-spacing: -2px; }
.calc-presets { gap: 6px; }
.cp-label { font-size: 11px; }
.calc-res-item { padding: 16px 12px; }
.apply-left { padding: 28px 20px; }
.apply-form { padding: 24px 18px; }
.footer-bottom { flex-direction: column; text-align: center; }
.footer-links { justify-content: center; flex-wrap: wrap; }
.footer-hq { padding: 28px 20px; margin-top: 36px; }
.footer-secondary { padding: 28px 18px 0; gap: 24px; }
.footer-bottom { padding: 16px 18px; }
.sticky-widget { bottom: 14px; right: 14px; }
.sw-label { display: none; }
.sw-toggle { padding: 14px 16px; border-radius: 50%; width: 52px; height: 52px; justify-content: center; }
.cmp-badges { gap: 10px; flex-wrap: wrap; justify-content: center; }
.cmp-cta-btn { padding: 13px 28px; font-size: 14px; }
.mechanic-wrap { grid-template-columns: 1fr; }
.fci-btns { flex-direction: column; }
.fci-btns a { justify-content: center; width: 100%; }
.section-title { letter-spacing: -0.5px; }
.res-cta-btn { width: 100%; justify-content: center; }
.cmp-cta-btn { width: 100%; justify-content: center; }
.btn-primary { width: 100%; justify-content: center; }
/* Testimonials — phone-only portrait-friendly photo box. Replaces the
1024px block's wide clamp(210px,60vw,300px) box with a 4:3 ratio so the
photo reads as an intentional portrait crop instead of a wide letterbox
strip. Desktop (>=769px) and the 769-1024px tablet clamp are untouched —
this only wins at <=680px because it's later in source + same specificity. */
.testi-video-placeholder, .testi-photo { height: auto; aspect-ratio: 4 / 3; }
.testi-pane { gap: 20px; }
/* Jonas-only mobile crop: his source photo is portrait (0.75 aspect),
wider than the 4:3 box, so object-fit:cover always width-matches and
object-position alone can't trim the empty cab on the left — there's
no horizontal overflow for it to shift. A small optical zoom (the
standalone `scale` property, independent of `transform` so it can't
collide with GSAP's translateX/clipPath drag-and-transition animations
on .testi-pane/.testi-photo) creates that overflow; transform-origin
matches object-position so the zoom expands away from Jonas and crops
the empty left side instead of the whole frame evenly. */
.testi-photo--jonas img { object-position: 68% 10%; transform-origin: 68% 10%; scale: 1.15; }
/* Yuriy-only phone crop: same low-thumb issue as desktop (see the
.testi-photo--yuriy rule above the 768px block), tuned separately for
the taller 4:3 phone box. Pure object-position was enough here too —
no scale needed, unlike Jonas's left/right framing problem. */
.testi-photo--yuriy img { object-position: center 18%; }
}
/* ─── Small phones (480px) ───────────────── */
@media (max-width: 480px) {
.container { padding: 0 14px; }
.section { padding: 52px 0; }
.apply-section { padding: 52px 0 48px; }
.hoc-num { font-size: 60px; letter-spacing: -2px; }
.hoc-only { font-size: 16px; }
.hm-row2 { grid-template-columns: 1fr; }
.bc-bento, .bc-bento-bottom { grid-template-columns: 1fr; }
.bc-cta-block { padding: 32px 20px; }
.tb-big { font-size: 40px; }
.section-title { font-size: clamp(28px, 8vw, 44px); }
.people-photo img, .people-card--wide .people-photo img { height: 200px; }
.people-photo--placeholder { height: 200px; }
.calc-wrap { padding: 18px 14px; }
.cmp-mc { padding: 14px; }
.testi-quote { font-size: 14px; }
.repair-img-real, .repair-slider { height: 180px; }
.jvs-cta-actions,
.journey-vs-fallback-cta-actions { max-width: 240px; }
}
/* ─── KLG Lightbox ─────────────────────────────────────────────── */
#klg-lb {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,0.94);
display: flex; flex-direction: column;
opacity: 0; pointer-events: none;
transition: opacity 0.28s ease;
overflow: hidden;
}
#klg-lb.is-open { opacity: 1; pointer-events: all; }
.klg-lb-x {
position: absolute; top: 18px; right: 22px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 50%; width: 40px; height: 40px;
color: #fff; font-size: 18px; line-height: 1;
cursor: pointer; z-index: 10;
transition: background 0.2s;
}
.klg-lb-x:hover { background: rgba(255,255,255,0.18); }
.klg-lb-counter {
position: absolute; top: 24px; left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5); font-size: 13px;
font-family: 'Inter', sans-serif; letter-spacing: 0.12em;
z-index: 10; pointer-events: none;
}
.klg-lb-wrap {
flex: 1; overflow: hidden;
display: flex; align-items: center;
cursor: grab; touch-action: pan-y;
}
.klg-lb-wrap.is-dragging { cursor: grabbing; }
.klg-lb-track {
display: flex; height: 100%;
align-items: center;
will-change: transform;
user-select: none; -webkit-user-select: none;
}
.klg-lb-slide {
flex-shrink: 0; width: 100vw; height: 100%;
display: flex; align-items: center; justify-content: center;
padding: 68px 48px 48px;
box-sizing: border-box;
transform-origin: center center;
--ks-photo-brightness: 0.99;
--ks-photo-contrast: 1.04;
--ks-photo-saturation: 0.86;
}
.klg-lb-slide img {
max-width: 100%; max-height: 100%;
object-fit: contain; border-radius: 8px;
box-shadow: 0 24px 64px rgba(0,0,0,0.6);
pointer-events: none; user-select: none;
-webkit-user-select: none;
filter:
brightness(var(--ks-photo-brightness))
contrast(var(--ks-photo-contrast))
saturate(var(--ks-photo-saturation));
}
.klg-lb-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 50%; width: 52px; height: 52px;
color: #fff; font-size: 22px; line-height: 1;
cursor: pointer; z-index: 10;
transition: background 0.2s, opacity 0.2s;
display: flex; align-items: center; justify-content: center;
}
.klg-lb-arrow:hover { background: rgba(255,255,255,0.22); }
.klg-lb-arrow:disabled { opacity: 0.2; pointer-events: none; }
.klg-lb-prev { left: 18px; }
.klg-lb-next { right: 18px; }
@media (max-width: 600px) {
.klg-lb-arrow { width: 40px; height: 40px; font-size: 18px; }
.klg-lb-prev { left: 8px; }
.klg-lb-next { right: 8px; }
}
@media (max-width: 600px) {
.klg-lb-slide { padding: 56px 12px 32px; }
.klg-lb-wrap { touch-action: none; }
}
/* ═══════════════════════════════════════════
SAFETY & COMPLIANCE
Light/beige chapter between Team ("Real Work") and How It Works — both
dark. Tokens below are scoped to .safety-section (not :root) since they're
a dark-ink-on-light-beige palette local to this one section; global
--amber/--green/--blue etc. are tuned for the site's dark sections and are
deliberately not reused here except --green/--blue, whose values already
match. Road-Ready System is the primary content; the sticky portrait image
stage is supporting atmosphere driven by a continuous scroll-progress
controller in script.js (own rAF loop, no GSAP/ScrollTrigger/Lenis
dependency — reads live getBoundingClientRect() each frame, which stays
correct under Lenis's native-scroll mode used on this site).
═══════════════════════════════════════════ */
.safety-section {
--ink: #161409; --ink-muted: #6b6656; --amber: #a3742f; --green-ink: #2f7d56;
--hairline: rgba(22,20,9,0.08); --hairline2: rgba(22,20,9,0.14); --rail: rgba(22,20,9,0.22);
background: #f2ede2;
color: var(--ink);
padding: 96px 0 88px;
}
.safety-header { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.safety-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
color: var(--amber); margin-bottom: 14px;
}
.safety-title {
font-size: clamp(32px, 4.6vw, 54px); font-weight: 900; letter-spacing: -1.5px;
line-height: 1.1; margin: 0 0 16px; color: var(--ink);
}
.safety-title em { font-style: normal; color: var(--amber); }
.safety-sub { font-size: 16px; color: var(--ink-muted); line-height: 1.6; margin: 0; }
.safety-system-label {
font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
color: var(--ink-muted); margin-bottom: 10px;
}
/* Visual stage — two-zone composition (~65/35). Local to Safety only; the
site's global .container (1280px/40px) is untouched. Road-Ready System
remains the primary content; the image is supporting atmosphere aligned
to start near row 01, not the section headline. */
.safety-body {
display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 430px);
gap: 60px; align-items: start;
max-width: 1120px; margin: 0 auto 72px;
}
.safety-system { min-width: 0; }
.safety-visual-stage {
position: relative; width: 100%; aspect-ratio: 0.72;
margin-top: 6px; /* aligns near row 01's marker/title, not the header above */
border-radius: 28px 8px 28px 8px; overflow: hidden;
box-shadow: 0 24px 54px rgba(22,20,9,0.12);
}
.safety-visual-stage img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: 1;
}
/* Visibility is layered, not toggled: all three images sit at opacity:1
permanently, stacked by z-index (01 on top, 04 on the bottom). The
continuous controller in script.js reveals what's underneath via
mask-image (a soft directional dissolve) rather than crossfading opacity,
so two photographs can coexist on screen during a transition. Default/
no-JS state is simply "img 01 fully covers everything", which is also
state 01 itself, so there's nothing to flash into place. */
.safety-visual-stage img[data-safety-visual="01"] {
object-position: center 40%; z-index: 3; will-change: transform;
mask-repeat: no-repeat; mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%;
}
.safety-visual-stage img[data-safety-visual="02-03"] {
object-position: 60% 40%; z-index: 2; will-change: transform;
mask-repeat: no-repeat; mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%;
}
.safety-visual-stage img[data-safety-visual="04"] { object-position: 22% 22%; z-index: 1; }
/* Sticky travel is scoped to .safety-body's grid row, which is sized by
.safety-system (the taller column) — so the stage naturally releases the
instant Road-Ready System ends, before .safety-legal begins. No spacer
element needed. Desktop only; tablet/mobile stack the stage above the
system and stay static (see breakpoints below). Two other sticky sidebars
already exist on this site (.maint-features, .morethan-trust) under the
same Lenis config, so this pattern is proven compatible here. */
@media (min-width: 1041px) {
.safety-visual-stage { position: sticky; top: 110px; }
}
/* Row emphasis (title/number/proof/marker colors) and the rail's transient
tint are driven continuously by inline style from the scroll controller
in script.js — no CSS transition here, since a CSS transition racing a
per-frame JS update would fight it and read as laggy/rubbery. */
.safety-visual-scrim {
position: absolute; inset: auto 0 0 0; height: 42%; z-index: 1;
background: linear-gradient(to top, rgba(10,8,2,0.55), transparent);
pointer-events: none;
}
.safety-row {
position: relative;
display: grid; grid-template-columns: 92px 1fr; gap: 30px;
padding: 32px 0; border-top: 1px solid var(--hairline);
}
.safety-row:first-child { border-top: none; padding-top: 8px; }
.safety-row:last-child { padding-bottom: 0; }
/* Divider accent — the thin neutral line above rows 02-04 stays as-is; this
is a second, absolutely-positioned segment sitting right on top of it
that grows from the rail side as that row's transition progresses,
driven by the exact same progress value as the photo dissolve and the
row-emphasis transfer. Bell-shaped (0 -> peak -> 0), so it only reads as
"in motion" during the transition itself and returns to fully quiet once
a row has settled — never a permanent progress bar. width:100% + JS-
driven scaleX means the scaleX value IS the fraction of divider width
shown (see ACCENT_MAX in script.js) — no compounding. */
.safety-row-divider-accent {
position: absolute; top: -1px; left: 0; width: 100%; height: 1.5px;
background: linear-gradient(90deg, var(--green-ink), var(--blue));
transform-origin: left center; transform: scaleX(0);
pointer-events: none;
}
.safety-row-rail { position: relative; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.safety-row-rail::before {
content: ''; position: absolute; top: -32px; bottom: -32px; left: 50%; width: 1.5px;
background: var(--rail); transform: translateX(-50%); z-index: 0;
}
.safety-row:first-child .safety-row-rail::before { top: 50%; }
.safety-row:last-child .safety-row-rail::before { bottom: 50%; }
.safety-row-num {
font-size: 13px; font-weight: 900; letter-spacing: 1.2px; color: var(--amber);
position: relative; z-index: 1; background: #f2ede2; padding: 0 5px;
}
.safety-row-marker {
position: relative; z-index: 1;
width: 47px; height: 47px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #eef1e4; border: 1.5px solid rgba(76,175,125,0.38);
color: var(--green-ink); font-size: 16px;
box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
}
.safety-row-title { font-size: 24px; font-weight: 800; letter-spacing: -0.3px; color: var(--ink); margin: 2px 0 9px; }
.safety-row-lead {
font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.5;
margin: 0 0 10px; padding-left: 13px; border-left: 2px solid #ddd2b4;
}
.safety-row-proof {
font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
color: var(--green-ink); margin: 0 0 14px; padding-left: 13px;
}
.safety-row-tags { display: flex; flex-wrap: wrap; font-size: 14px; color: #5c5848; line-height: 1.7; }
.safety-row-tags span:not(:last-child)::after { content: '·'; margin: 0 9px; color: rgba(22,20,9,0.25); }
/* LegalShield resource — compact, secondary, not a promotional card. */
.safety-legal {
max-width: 1120px; margin: 0 auto; padding: 26px 28px 20px;
background: rgba(22,20,9,0.02); border: 1px solid var(--hairline);
border-radius: 14px;
}
.safety-legal-eyebrow {
font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
color: rgba(22,20,9,0.42); margin-bottom: 16px;
}
.safety-legal-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 34px; }
.safety-legal-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
/* Placeholder ONLY — plain text, not a redrawn/approximated logo. Swap for
the official LegalShield associate-approved logo asset once Roman
supplies it from his associate portal/marketing materials. Do not use a
logo pulled from the public LegalShield website, and do not redraw/
approximate/AI-generate the mark in the meantime — LegalShield's own
Terms restrict use of their logo/trademarks without permission. */
.safety-legal-mark {
font-size: 12.5px; font-weight: 800; letter-spacing: 0.2px; color: var(--ink);
padding: 4px 9px; border: 1px solid rgba(22,20,9,0.18); border-radius: 5px;
}
.safety-legal-label {
font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
color: var(--ink-muted);
}
.safety-legal-sub { font-size: 13px; color: var(--ink-muted); line-height: 1.6; margin: 0; }
.safety-legal-plan {
display: flex; align-items: baseline; gap: 7px;
font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.4;
margin: 0 0 9px;
}
.safety-legal-plan i { color: var(--green-ink); font-size: 11px; flex-shrink: 0; position: relative; top: -1px; }
.safety-legal-desc { font-size: 12.5px; color: var(--ink-muted); line-height: 1.6; margin: 0 0 12px; }
.safety-legal-cta {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
font-size: 13.5px; font-weight: 700; color: var(--ink);
text-decoration: none; border-bottom: 1px solid rgba(22,20,9,0.3);
padding-bottom: 1px; margin-bottom: 12px;
transition: border-color 0.25s ease, color 0.25s ease, gap 0.25s ease;
}
.safety-legal-cta i { font-size: 10.5px; transition: transform 0.25s ease; }
.safety-legal-cta:hover { color: var(--amber); border-color: var(--amber); gap: 8px; }
.safety-legal-cta:hover i { transform: translate(2px, -2px); }
.safety-legal-disclosure { font-size: 11.5px; color: var(--ink-muted); line-height: 1.5; margin: 0; }
/* Closing Safety CTA — two clearly unequal actions, centered as one group.
Apply Now reuses the site's real .klg-cta component as-is (no redefine
here). CDL Protection is a real secondary button (outline, same height/
radius family as Apply Now) — hierarchy comes from fill-vs-outline
contrast, not color/size tricks or a text-link treatment. */
.safety-close { max-width: 1120px; margin: 40px auto 0; }
.safety-close-line {
font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -0.15px;
margin: 0 0 28px; text-align: center;
}
.safety-close-actions { display: flex; align-items: flex-start; justify-content: center; gap: 32px; flex-wrap: wrap; }
.safety-close-secondary { max-width: 460px; text-align: center; }
.safety-close-cdl {
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
height: 52px; padding: 0 22px; border-radius: 14px;
font-size: 14.5px; font-weight: 700; color: var(--ink);
background: rgba(22,20,9,0.02);
border: 1.5px solid rgba(22,20,9,0.3);
text-decoration: none; cursor: pointer;
transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, gap 0.25s ease;
}
.safety-close-cdl i { font-size: 11px; transition: transform 0.25s ease; }
.safety-close-cdl:hover {
border-color: rgba(22,20,9,0.52); background: rgba(22,20,9,0.045);
gap: 11px; transform: translateY(-1px);
}
.safety-close-cdl:hover i { transform: translate(2px, -2px); }
.safety-close-cdl:active { transform: translateY(0) scale(0.985); transition-duration: 110ms; }
.safety-close-cdl:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(8,9,11,0.9), 0 0 0 4.5px rgba(220,154,60,0.75); }
.safety-close-plan { font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; margin: 14px 0 5px; }
.safety-close-plan strong { color: var(--ink); font-weight: 700; }
.safety-close-indep { font-size: 12.5px; font-weight: 600; color: rgba(22,20,9,0.66); line-height: 1.5; margin: 0; }
@media (prefers-reduced-motion: reduce) {
.safety-close-cdl, .safety-close-cdl * { transition: none !important; }
.safety-close-cdl:hover { transform: none; }
}
/* Tablet / narrow desktop: stack, but keep the image portrait. Breakpoint
chosen by testing — below ~1040px the 65/35 split leaves the text column
too narrow for the row tags to read comfortably. */
@media (max-width: 1040px) {
.safety-body { grid-template-columns: 1fr; gap: 40px; max-width: 640px; }
.safety-visual-stage { order: -1; width: 100%; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 760px) {
.safety-section { padding: 64px 0 56px; }
.safety-section .container { padding: 0 22px; }
.safety-header { margin-bottom: 44px; }
.safety-body { gap: 32px; margin-bottom: 48px; }
/* Wide cinematic crop instead of a tall portrait dominating a small screen. */
.safety-visual-stage { aspect-ratio: 16 / 10; max-width: none; border-radius: 20px 6px 20px 6px; }
.safety-row { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
.safety-row-rail { flex-direction: row; justify-content: flex-start; gap: 12px; }
.safety-row-rail::before { display: none; }
.safety-row-title { font-size: 20px; }
.safety-row-lead { font-size: 15px; }
.safety-legal { padding: 22px; }
.safety-legal-grid { grid-template-columns: 1fr; gap: 22px; }
.safety-close { margin-top: 32px; }
.safety-close-actions { flex-direction: column; align-items: center; gap: 26px; }
.safety-close-secondary { max-width: none; }
}
/* ═══════════════════════════════════════════
MAJOR SECTION EYEBROWS — shared hierarchy and rhythm
═══════════════════════════════════════════ */
.section-eyebrow {
font-size: 11px;
font-weight: 700;
line-height: 1.25;
letter-spacing: 3px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 14px;
animation: none;
}
.section-eyebrow::before,
.section-eyebrow::after { animation: none; }
.section-eyebrow.section-label {
margin: 0 0 14px;
letter-spacing: 3px;
line-height: 1.25;
animation: none;
}
.section-eyebrow.section-label::before,
.section-eyebrow.section-label::after { animation: none; }
.section-eyebrow.ks-lz-label {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: fit-content;
max-width: 100%;
margin: 0 auto 14px;
}
.section-eyebrow.safety-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
}
.section-eyebrow.ks-lz-label::before,
.section-eyebrow.safety-eyebrow::before,
.section-eyebrow.ks-lz-label::after,
.section-eyebrow.safety-eyebrow::after {
content: '';
display: inline-block;
width: 24px;
height: 1px;
flex-shrink: 0;
opacity: 0.62;
}
.section-eyebrow.ks-lz-label::before,
.section-eyebrow.safety-eyebrow::before {
background: linear-gradient(90deg, transparent, currentColor);
}
.section-eyebrow.ks-lz-label::after,
.section-eyebrow.safety-eyebrow::after {
background: linear-gradient(90deg, currentColor, transparent);
}
@media (max-width: 680px) {
.section-eyebrow,
.section-eyebrow.section-label,
.faq-label-reveal.reveal.visible {
letter-spacing: 2.4px;
}
.section-eyebrow::before,
.section-eyebrow::after {
width: 16px;
}
}
/* ═══════════════════════════════════════════
CONTENT PAGES (SEO/GEO) — standalone informational
pages (weekly-results.html, settlement-examples.html, etc).
Reuses the site's nav/footer chrome and colour system, but
simpler than the landing page: no canvas/GSAP scroll scenes,
just article-style content built for direct-answer extraction.
═══════════════════════════════════════════ */
.content-page-hero { width: calc(100% - 40px); padding: 160px 0 56px; max-width: 780px; margin: 0 auto; text-align: center; }
.content-page-hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.15; margin-bottom: 14px; }
.content-page-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 22px; }
.content-page-answer { font-size: 17px; line-height: 1.7; color: var(--text-soft); text-align: left; }
.content-page-body { width: calc(100% - 40px); max-width: 780px; margin: 0 auto; padding: 0 0 100px; }
.content-page-body h2 { font-size: 24px; font-weight: 800; margin: 52px 0 16px; }
.content-page-body p { font-size: 15.5px; line-height: 1.75; color: var(--text-soft); margin-bottom: 16px; }
.content-page-body ul { margin: 0 0 20px; padding-left: 20px; }
.content-page-body li { font-size: 15px; line-height: 1.7; color: var(--text-soft); margin-bottom: 8px; }
.content-page-body a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }
.content-stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 28px 0; }
.content-stat-card {
flex: 1 1 200px; background: var(--card2); border: 1px solid var(--border);
border-radius: 16px; padding: 22px 20px; text-align: center;
}
.content-stat-num { font-size: 30px; font-weight: 800; color: var(--amber); line-height: 1; margin-bottom: 6px; }
.content-stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.content-page-proof-imgs { display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 0; }
.content-page-proof-imgs img {
flex: 1 1 200px; max-width: 260px; border-radius: 10px; border: 1px solid var(--border);
}
.content-page-cta {
width: calc(100% - 40px); max-width: 780px; margin: 0 auto 100px; padding: 40px 32px; text-align: center;
background: var(--card2); border: 1px solid var(--border); border-radius: 24px;
}
.content-page-cta h2 { margin: 0 0 10px; font-size: 22px; }
.content-page-cta p { color: var(--text-soft); margin-bottom: 22px; }
@media (max-width: 680px) {
.content-page-hero { padding: 130px 0 40px; }
.content-page-body { padding-bottom: 60px; }
.content-page-cta { margin-bottom: 60px; padding: 32px 20px; }
}