/* ============================================================
GM VANTAGE SOLUTIONS — Apple-quality redesign
============================================================ */
:root {
--bg: #05080f;
--bg-2: #070b14;
--bg-3: #0a0f1c;
--card: rgba(255, 255, 255, 0.03);
--card-2: rgba(255, 255, 255, 0.05);
--border: rgba(255, 255, 255, 0.06);
--border-2: rgba(255, 255, 255, 0.10);
--border-3: rgba(255, 255, 255, 0.14);
--text: #f5f7fa;
--text-2: #c7cdda;
--muted: #8b94a7;
--dim: #5d6577;
--gold: #d4b483;
--gold-2: #e2c898;
--gold-3: #b8985f;
--blue: #6b9fd0;
--blue-2: #8fb4d4;
--blue-3: #9ec2dd;
--red: #ef6b6b;
--green: #5dcf8c;
--radius: 16px;
--radius-sm: 10px;
--radius-lg: 24px;
--maxw: 1440px;
--maxw-narrow: 1040px;
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-serif: 'Instrument Serif', Georgia, serif;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html {
scroll-behavior: smooth;
/* Offset for the sticky nav so anchored sections aren't hidden behind it */
scroll-padding-top: 100px;
}
section[id] { scroll-margin-top: 100px; }
body {
margin: 0;
background-color: var(--bg);
/* Static hex pattern — matches the logo and photo backdrop. No scroll-driven animation
on body (that was forcing whole-viewport repaints on every scroll frame). */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
color: var(--text);
font-family: var(--font-sans);
font-weight: 400;
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
scroll-behavior: smooth;
}
/* Ambient gradient orbs — fills the dark space without losing minimalism */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(1100px 800px at 85% -5%, rgba(107, 159, 208, 0.08), transparent 60%),
radial-gradient(1000px 700px at -8% 50%, rgba(212, 180, 131, 0.05), transparent 60%);
transform: translateZ(0);
contain: strict;
}
main { position: relative; z-index: 2; }
/* ============================================================
DNA HELIX SCROLL DECORATIONS — fixed on each side of the viewport.
Cheap to render (small SVG, single transform animation).
Creates the "pattern changes as you scroll" feel without
touching the whole body background.
============================================================ */
.dna {
position: fixed;
top: -10%;
bottom: -10%;
width: 70px;
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.8s var(--ease);
/* Isolate this layer's paint so the helix animation doesn't invalidate
the backdrop-filter on the nav above */
contain: strict;
contain-intrinsic-size: 70px 100vh;
}
.dna.is-visible { opacity: 1; }
.dna-left { left: 16px; }
.dna-right { right: 16px; }
.dna svg {
width: 100%;
height: 100%;
display: block;
/* Slow drift gives life without scroll listeners — combines with content
scrolling for the "moving" feeling */
animation: dnaDrift 18s linear infinite;
transform: translateZ(0);
}
.dna-right svg { animation-direction: reverse; }
@keyframes dnaDrift {
from { transform: translateY(0) translateZ(0); }
to { transform: translateY(-200px) translateZ(0); }
}
.dna-strand {
fill: none;
stroke-width: 1.2;
stroke-linecap: round;
}
.dna-strand-a { stroke: rgba(212, 180, 131, 0.32); }
.dna-strand-b { stroke: rgba(107, 159, 208, 0.32); }
.dna-rung { stroke: rgba(255, 255, 255, 0.10); stroke-width: 1; }
@media (max-width: 900px) {
/* Hide on small screens — would crowd content */
.dna { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.dna svg { animation: none; }
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
/* Italic emphasis = gold serif */
em {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
color: var(--gold);
letter-spacing: -0.01em;
}
::selection { background: rgba(212, 180, 131, 0.3); color: var(--text); }
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 48px;
}
.container.narrow { max-width: var(--maxw-narrow); }
@media (max-width: 900px) {
.container { padding: 0 28px; }
}
@media (max-width: 640px) {
.container { padding: 0 20px; }
}
.accent { color: var(--gold); font-weight: 600; }
/* ============ EYEBROW ============ */
.eyebrow {
display: flex;
align-items: center;
gap: 14px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 32px;
}
.eyebrow-line {
display: inline-block;
width: 36px;
height: 1px;
background: var(--gold);
}
.eyebrow-center { justify-content: center; }
.eyebrow-center .eyebrow-line { width: 28px; }
/* ============ BUTTONS ============ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 24px;
border: 1px solid transparent;
border-radius: 999px;
font-weight: 500;
font-size: 15px;
letter-spacing: -0.005em;
cursor: pointer;
transition: all 0.3s var(--ease);
white-space: nowrap;
}
.btn-lg { padding: 17px 32px; font-size: 16px; }
.btn-primary {
background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 50%, var(--gold-3) 100%);
color: #1a1308;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.25) inset,
0 0 0 1px rgba(212, 180, 131, 0.1),
0 12px 32px -8px rgba(212, 180, 131, 0.35);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 0 0 1px rgba(212, 180, 131, 0.2),
0 20px 40px -8px rgba(212, 180, 131, 0.45);
}
.btn-ghost {
background: rgba(255, 255, 255, 0.02);
color: var(--text);
border: 1px solid var(--border-2);
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.06);
border-color: var(--border-3);
}
.btn-full { width: 100%; padding: 17px 24px; }
/* ============ NAV ============ */
/* ============================================================
TOP BAR — location, phone, Google reviews (above the nav)
============================================================ */
.topbar {
background: linear-gradient(180deg, rgba(212, 180, 131, 0.10) 0%, rgba(0, 0, 0, 0.7) 100%);
border-bottom: 1px solid rgba(212, 180, 131, 0.25);
font-size: 16.5px;
font-weight: 500;
position: relative;
z-index: 101;
}
.topbar-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
padding: 22px 32px;
color: var(--text);
flex-wrap: wrap;
}
.topbar a {
display: inline-flex;
align-items: center;
gap: 9px;
color: inherit;
letter-spacing: 0.01em;
transition: color 0.2s var(--ease);
}
.topbar a:hover { color: var(--gold); }
.topbar a svg { color: var(--gold); flex-shrink: 0; width: 18px; height: 18px; }
.topbar-sep {
width: 1px;
height: 22px;
background: var(--border-2);
}
.topbar-stars { color: #fbbc05; letter-spacing: 1.5px; font-size: 14.5px; margin-left: 5px; }
@media (max-width: 700px) {
.topbar-inner { gap: 14px; padding: 14px 18px; font-size: 13.5px; }
.topbar-sep { display: none; }
.topbar a svg { width: 15px; height: 15px; }
}
/* ============================================================
HERO LOCATION CHIP — anchored location in the hero
============================================================ */
.hero-location {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 32px;
padding: 16px 28px;
border: 1px solid rgba(212, 180, 131, 0.38);
border-radius: 999px;
background: linear-gradient(180deg, rgba(212, 180, 131, 0.10) 0%, rgba(212, 180, 131, 0.03) 100%);
font-size: 16px;
font-weight: 500;
color: var(--text);
letter-spacing: 0.01em;
transition: all 0.3s var(--ease);
text-decoration: none;
animation: heroIn 0.6s var(--ease) 0.42s both;
box-shadow: 0 8px 24px -10px rgba(212, 180, 131, 0.25);
}
.hero-location:hover {
border-color: rgba(212, 180, 131, 0.55);
background: linear-gradient(180deg, rgba(212, 180, 131, 0.14) 0%, rgba(212, 180, 131, 0.04) 100%);
transform: translateY(-1px);
}
.hero-location svg { color: var(--gold); flex-shrink: 0; }
.hero-location-arrow { color: var(--gold); margin-left: 4px; transition: transform 0.3s var(--ease); }
.hero-location:hover .hero-location-arrow { transform: translateX(3px); }
@media (max-width: 500px) {
.hero-location { font-size: 12.5px; padding: 10px 16px; gap: 8px; }
}
.nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(5, 8, 15, 0.78);
backdrop-filter: saturate(150%) blur(8px);
-webkit-backdrop-filter: saturate(150%) blur(8px);
border-bottom: 1px solid transparent;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
/* Isolate as its own paint layer so the DNA + marquee don't invalidate
the backdrop-filter input every frame */
contain: paint;
transform: translateZ(0);
}
.nav.nav-scrolled {
background: rgba(5, 8, 15, 0.94);
border-bottom-color: var(--border);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 33px 48px;
gap: 32px;
}
@media (max-width: 900px) { .nav-inner { padding: 24px 28px; } }
@media (max-width: 640px) { .nav-inner { padding: 20px 20px; } }
.nav-logo {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
transition: opacity 0.25s var(--ease);
}
.nav-logo:hover { opacity: 0.85; }
.nav-logo-mark {
width: 60px;
height: 60px;
object-fit: contain;
mix-blend-mode: screen;
filter: drop-shadow(0 2px 12px rgba(143, 180, 212, 0.45)) drop-shadow(0 0 20px rgba(107, 159, 208, 0.25));
}
.nav-logo-text {
font-weight: 700;
font-size: 17px;
letter-spacing: 0.18em;
color: var(--text);
}
@media (max-width: 640px) {
.nav-logo-mark { width: 44px; height: 44px; }
.nav-logo-text { font-size: 14.5px; }
}
.nav-links {
display: flex;
gap: 44px;
font-size: 16px;
}
.nav-links a {
color: var(--text-2);
font-weight: 400;
transition: color 0.2s;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transition: transform 0.3s var(--ease);
transform-origin: right;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { padding: 15px 26px; font-size: 15px; }
@media (max-width: 900px) {
.nav-links { display: none; }
}
/* ============ HERO ============ */
.hero {
position: relative;
min-height: 78vh;
display: flex;
align-items: center;
justify-content: center;
padding: 56px 0 120px;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-glow {
position: absolute;
top: 50%; left: 50%;
width: 1100px;
height: 1100px;
transform: translate(-50%, -50%);
background:
radial-gradient(circle, rgba(107, 159, 208, 0.16) 0%, rgba(107, 159, 208, 0.05) 30%, transparent 60%),
radial-gradient(circle at 50% 50%, rgba(212, 180, 131, 0.08) 0%, transparent 40%);
will-change: opacity;
}
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
opacity: 0.7;
}
.hero-inner {
position: relative;
z-index: 2;
text-align: center;
}
.hero-mark {
display: flex;
justify-content: center;
margin-bottom: 56px;
position: relative;
animation: heroLogoIn 0.7s var(--ease) both;
}
/* Soft radial halo behind the logo blends it into the dark hero */
.hero-mark::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 360px;
height: 360px;
transform: translate(-50%, -50%);
background: radial-gradient(circle,
rgba(107, 159, 208, 0.16) 0%,
rgba(107, 159, 208, 0.08) 25%,
transparent 60%);
pointer-events: none;
z-index: 0;
}
.hero-logo {
position: relative;
z-index: 1;
width: 180px;
height: 180px;
object-fit: contain;
/* "screen" blend mode turns the logo's black background fully transparent
against the dark page — only the bright G shape remains */
mix-blend-mode: screen;
filter:
drop-shadow(0 0 24px rgba(143, 180, 212, 0.5))
drop-shadow(0 0 56px rgba(107, 159, 208, 0.35))
drop-shadow(0 0 100px rgba(212, 180, 131, 0.18));
}
@media (max-width: 640px) {
.hero-logo { width: 120px; height: 120px; }
.hero-mark::before { width: 280px; height: 280px; }
}
@keyframes heroLogoIn {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-title {
font-size: clamp(56px, 9vw, 124px);
font-weight: 800;
line-height: 0.95;
letter-spacing: -0.04em;
margin: 0 0 32px;
animation: heroIn 0.6s var(--ease) 0.1s both;
}
.hero-title em { font-size: 1.05em; letter-spacing: -0.025em; }
.hero-sub {
font-size: clamp(18px, 1.8vw, 22px);
color: var(--text-2);
max-width: 640px;
margin: 0 auto 48px;
line-height: 1.45;
font-weight: 400;
animation: heroIn 0.6s var(--ease) 0.18s both;
}
.hero-cta {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 28px;
animation: heroIn 0.6s var(--ease) 0.26s both;
}
.hero-foot {
font-size: 13px;
color: var(--muted);
letter-spacing: 0.06em;
margin: 0;
animation: heroIn 0.6s var(--ease) 0.34s both;
}
@keyframes heroIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-scroll {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: var(--muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
transition: color 0.2s, transform 0.2s;
animation: scrollFloat 2.4s ease-in-out infinite;
}
.hero-scroll:hover { color: var(--gold); transform: translateX(-50%) translateY(-2px); }
.hero-scroll-icon {
width: 28px;
height: 44px;
border: 1.5px solid currentColor;
border-radius: 999px;
display: flex;
justify-content: center;
padding-top: 8px;
position: relative;
}
.hero-scroll-line {
width: 2px;
height: 10px;
background: var(--gold);
border-radius: 2px;
animation: scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot {
0%, 100% { transform: translateY(0); opacity: 0.9; }
50% { transform: translateY(14px); opacity: 0.2; }
}
@keyframes scrollFloat {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-6px); }
}
/* ============ MARQUEE (trust strip) ============ */
.marquee {
padding: 28px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, rgba(255,255,255,0.012) 0%, transparent 100%);
overflow: hidden;
position: relative;
z-index: 3;
}
.marquee::before, .marquee::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 140px;
z-index: 2;
pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg) 0%, transparent 100%); }
.marquee::after { right: 0; background: linear-gradient(90deg, transparent 0%, var(--bg) 100%); }
.marquee-eyebrow {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
text-align: center;
margin: 0 0 14px;
}
.marquee-track {
display: flex;
gap: 56px;
width: max-content;
animation: marqueeScroll 42s linear infinite;
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
.marquee { contain: layout paint; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 15px;
letter-spacing: -0.005em;
color: var(--text);
white-space: nowrap;
}
.marquee-pts {
color: var(--gold);
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
font-weight: 400;
letter-spacing: -0.01em;
}
.marquee-name {
color: var(--muted);
font-size: 13px;
letter-spacing: 0.04em;
}
.marquee-dot {
width: 4px;
height: 4px;
background: var(--border-3);
border-radius: 50%;
flex-shrink: 0;
}
@keyframes marqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
}
/* ============ SECTIONS ============ */
.section {
padding: 140px 0;
position: relative;
}
.section-tint {
background:
linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.015) 50%, transparent 100%);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.section-title {
font-size: clamp(40px, 6vw, 80px);
font-weight: 800;
line-height: 0.98;
letter-spacing: -0.035em;
margin: 0 0 28px;
}
.section-title-center { text-align: center; }
.section-sub {
font-size: clamp(17px, 1.4vw, 20px);
color: var(--text-2);
margin: 0 0 64px;
max-width: 680px;
font-weight: 400;
line-height: 1.5;
}
.section-sub-center { margin-left: auto; margin-right: auto; text-align: center; }
.lede {
font-size: 18px;
color: var(--text-2);
line-height: 1.6;
margin: 0 0 20px;
}
.lede strong { color: var(--text); font-weight: 600; }
@media (max-width: 700px) {
.section { padding: 96px 0; }
}
/* Reveal on scroll — fast, GPU-accelerated, triggers early so sections are
ready by the time the user arrives. */
.reveal {
opacity: 0;
transform: translate3d(0, 14px, 0);
transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
will-change: opacity, transform;
}
.reveal.is-in {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* Drop the will-change hint after the animation finishes so the browser can release the GPU layer */
.reveal.is-done {
will-change: auto;
}
/* Note: content-visibility was removed because the intrinsic-size estimate
was wrong for tall sections (some are 3000px+), causing scroll-position jumps
that felt like lag. Static rendering is fine — the page isn't long enough
for the optimization to pay back the layout instability. */
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.hero-mark, .hero-title, .hero-sub, .hero-cta, .hero-foot { animation: none; }
.hero-scroll { animation: none; }
}
/* ============ CALLOUT ============ */
.callout {
margin-top: 56px;
padding: 32px 36px;
border-radius: var(--radius);
background:
linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
border: 1px solid var(--border-2);
position: relative;
overflow: hidden;
}
.callout::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0.5;
}
.callout-label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 10px;
}
.callout-text {
font-size: 21px;
font-weight: 600;
line-height: 1.4;
margin: 0;
letter-spacing: -0.01em;
}
/* ============ TWO COL ============ */
.two-col {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: start;
}
@media (max-width: 900px) {
.two-col { grid-template-columns: 1fr; gap: 48px; }
}
.stat-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.stat, .stat-card {
padding: 32px;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
border: 1px solid var(--border-2);
border-radius: var(--radius);
transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.stat:hover, .stat-card:hover {
border-color: var(--border-3);
transform: translateY(-2px);
}
.stat-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 16px;
}
.stat-num {
font-size: 56px;
font-weight: 800;
letter-spacing: -0.035em;
margin: 0 0 14px;
line-height: 1;
}
.stat-num .pct, .stat-num .x { color: var(--blue); font-weight: 500; font-size: 0.65em; margin-left: 2px; }
.stat-num .dash { color: var(--dim); font-weight: 400; }
.stat-foot {
font-size: 14px;
color: var(--muted);
margin: 0;
line-height: 1.5;
}
/* ============ FIX GRID ============ */
.fix-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 1000px) { .fix-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fix-grid { grid-template-columns: 1fr; } }
.fix-card {
padding: 32px 28px;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
border: 1px solid var(--border-2);
border-radius: var(--radius);
transition: all 0.3s var(--ease);
position: relative;
overflow: hidden;
}
.fix-card::before {
content: '';
position: absolute;
top: 0; left: 50%;
width: 0;
height: 1px;
background: var(--gold);
transition: all 0.4s var(--ease);
transform: translateX(-50%);
}
.fix-card:hover {
transform: translateY(-4px);
border-color: rgba(212, 180, 131, 0.25);
background: linear-gradient(180deg, rgba(212,180,131,0.05) 0%, rgba(255,255,255,0.015) 100%);
}
.fix-card:hover::before { width: 60%; }
.fix-num {
font-size: 13px;
font-weight: 600;
color: var(--blue);
margin: 0 0 16px;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
}
.fix-card h3 {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 14px;
}
.fix-card p {
font-size: 14px;
color: var(--muted);
line-height: 1.55;
margin: 0;
}
/* ============ PROCESS ============ */
.process-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0;
}
.process-list li {
display: grid;
grid-template-columns: 120px 1fr;
gap: 40px;
padding: 44px 0;
border-bottom: 1px solid var(--border);
align-items: start;
transition: background 0.3s var(--ease);
}
.process-list li:last-child { border-bottom: none; }
.process-list li:hover { background: rgba(255,255,255,0.012); }
.process-num {
font-size: 64px;
font-weight: 200;
color: var(--blue);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.process-list h3 {
font-size: 19px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 14px;
}
.process-list p {
font-size: 16px;
color: var(--text-2);
line-height: 1.6;
margin: 0;
}
@media (max-width: 600px) {
.process-list li { grid-template-columns: 60px 1fr; gap: 20px; padding: 32px 0; }
.process-num { font-size: 40px; }
}
/* ============ BIG STAT ============ */
.big-stat {
text-align: center;
padding: 80px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin: 40px 0 56px;
position: relative;
overflow: hidden;
}
.big-stat::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(600px 360px at 50% 50%, rgba(212, 180, 131, 0.08), transparent 70%);
pointer-events: none;
}
.big-stat-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 16px;
position: relative;
}
.big-stat-num {
font-size: clamp(120px, 18vw, 240px);
font-weight: 800;
line-height: 0.9;
letter-spacing: -0.06em;
margin: 0 0 24px;
display: inline-flex;
align-items: baseline;
gap: 4px;
position: relative;
}
.big-stat-num .plus { color: var(--blue); font-weight: 600; font-size: 0.45em; }
.big-stat-num .big-num {
color: var(--gold);
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
}
.big-stat-num .pts {
font-size: 0.20em;
color: var(--muted);
font-weight: 500;
letter-spacing: 0.05em;
margin-left: 12px;
}
.big-stat-foot {
font-size: 16px;
color: var(--muted);
max-width: 580px;
margin: 0 auto;
line-height: 1.55;
position: relative;
}
.stat-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 600px) { .stat-pair { grid-template-columns: 1fr; } }
/* ============ PROOF (REAL FILES) ============ */
.section-proof {
background: linear-gradient(180deg, transparent 0%, rgba(107, 159, 208, 0.025) 50%, transparent 100%);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.proof-case {
margin-bottom: 80px;
padding: 40px;
background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
transition: border-color 0.3s var(--ease);
}
.proof-case:hover { border-color: var(--border-3); }
.proof-case:last-of-type { margin-bottom: 56px; }
.proof-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 36px;
flex-wrap: wrap;
}
.proof-tag {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 12px;
}
.proof-name {
font-size: clamp(32px, 4vw, 48px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
margin: 0;
}
.proof-name em { font-size: 1.05em; }
.proof-delta {
text-align: right;
}
.delta-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 8px;
}
.delta-num {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 800;
color: var(--green);
letter-spacing: -0.02em;
margin: 0;
line-height: 1;
}
.delta-num span { font-size: 0.5em; color: var(--muted); font-weight: 500; margin-left: 4px; }
.proof-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 32px;
}
@media (max-width: 800px) { .proof-grid { grid-template-columns: 1fr; } }
.proof-img {
position: relative;
margin: 0;
background: #ffffff;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-2);
transition: transform 0.4s var(--ease);
cursor: zoom-in;
}
.proof-img:hover { transform: translateY(-3px); }
.proof-img img { width: 100%; height: auto; display: block; }
.proof-corner {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
padding: 6px 12px;
background: rgba(5, 8, 15, 0.9);
color: var(--red);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: 999px;
border: 1px solid rgba(239, 107, 107, 0.3);
}
.proof-corner-good { color: var(--green); border-color: rgba(93, 207, 140, 0.3); }
.proof-stats {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
@media (max-width: 700px) { .proof-stats { grid-template-columns: repeat(2, 1fr); } }
.proof-stats li {
display: flex;
flex-direction: column;
gap: 6px;
}
.proof-stats li span {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.proof-stats li strong {
font-size: 15px;
font-weight: 600;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
/* PROGRESS REPORTS */
.progress-block { margin-top: 56px; }
.progress-eyebrow {
font-size: 14px;
color: var(--muted);
text-align: center;
margin: 0 0 36px;
letter-spacing: 0.01em;
}
.progress-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 900px) { .progress-grid { grid-template-columns: 1fr; } }
.progress-card {
padding: 32px;
background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
transition: border-color 0.3s var(--ease);
}
.progress-card:hover { border-color: var(--border-3); }
.progress-card header { margin-bottom: 20px; }
.progress-tag {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 6px;
}
.progress-meta {
font-size: 13px;
color: var(--muted);
margin: 0;
}
.progress-img {
margin: 0 0 24px;
background: #ffffff;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--border-2);
padding: 16px;
}
.progress-img img { width: 100%; height: auto; display: block; }
.bureaus {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 20px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-bottom: 18px;
}
.bureaus > div { text-align: center; }
.bureaus p { margin: 0; line-height: 1.2; }
.bureaus p:first-child {
font-size: 10.5px;
font-weight: 600;
color: var(--muted);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 10px;
}
.bureaus .from { color: var(--dim); text-decoration: line-through; font-size: 13px; }
.bureaus .to {
font-size: 30px;
font-weight: 800;
letter-spacing: -0.025em;
margin: 6px 0;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.bureaus .d {
font-size: 12.5px;
font-weight: 600;
color: var(--green);
}
.progress-note {
font-size: 14.5px;
color: var(--text-2);
line-height: 1.5;
margin: 0;
}
.progress-note strong { color: var(--gold); font-weight: 600; }
.case-disclaimer {
margin: 0 auto;
max-width: 760px;
font-size: 13px;
color: var(--dim);
text-align: center;
line-height: 1.6;
font-style: italic;
}
/* ============ SECTION DIVIDER ============ */
.section-divider {
position: relative;
padding: 24px 0;
background: var(--bg);
z-index: 2;
}
.section-divider .container {
display: flex;
align-items: center;
gap: 28px;
}
.divider-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--border-3) 50%, transparent 100%);
}
.divider-tag {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
margin: 0;
white-space: nowrap;
text-align: center;
flex-shrink: 0;
}
@media (max-width: 700px) {
.divider-tag { font-size: 10px; letter-spacing: 0.18em; }
.section-divider .container { gap: 14px; }
}
/* ============ MONTHLY PROGRESS REPORTS ============ */
.section-progress {
background:
radial-gradient(900px 600px at 50% 0%, rgba(212, 180, 131, 0.04), transparent 60%),
linear-gradient(180deg, transparent 0%, rgba(212, 180, 131, 0.015) 50%, transparent 100%);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 120px 0 140px;
}
.prog-case {
margin-bottom: 80px;
padding: 48px;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.008) 100%);
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
transition: border-color 0.4s var(--ease);
contain: layout style;
}
.prog-case:hover { border-color: rgba(212, 180, 131, 0.2); }
.prog-case:last-of-type { margin-bottom: 56px; }
@media (max-width: 700px) {
.prog-case { padding: 28px 20px; margin-bottom: 48px; }
}
.prog-head {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 40px;
align-items: center;
margin-bottom: 40px;
padding-bottom: 32px;
border-bottom: 1px solid var(--border);
}
@media (max-width: 900px) {
.prog-head { grid-template-columns: 1fr; gap: 28px; }
}
.prog-tag {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 14px;
}
.prog-name {
font-size: clamp(30px, 4vw, 44px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
margin: 0 0 12px;
}
.prog-name em { font-size: 1.05em; }
.prog-meta {
font-size: 14px;
color: var(--muted);
margin: 0;
line-height: 1.5;
}
.prog-bureaus {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
padding: 20px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.prog-bureaus > div { text-align: center; }
.prog-bureaus p { margin: 0; line-height: 1.2; }
.b-name {
font-size: 10.5px;
font-weight: 600;
color: var(--muted);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 8px;
}
.b-from {
color: var(--dim);
text-decoration: line-through;
font-size: 13px;
}
.b-to {
font-size: 28px;
font-weight: 800;
letter-spacing: -0.025em;
margin: 4px 0 !important;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.b-d {
font-size: 12.5px;
font-weight: 700;
color: var(--green);
}
.prog-stack {
display: grid;
gap: 28px;
max-width: 80%;
margin: 0 auto;
}
@media (max-width: 700px) {
.prog-stack { max-width: 100%; }
}
.prog-img {
margin: 0;
background: #ffffff;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-2);
position: relative;
box-shadow:
0 1px 0 rgba(255,255,255,0.05) inset,
0 24px 60px -20px rgba(0, 0, 0, 0.5);
transition: transform 0.4s var(--ease);
}
.prog-img:hover { transform: translateY(-3px); }
.prog-img img {
width: 100%;
height: auto;
max-height: 580px;
object-fit: contain;
display: block;
padding: 24px;
background: #ffffff;
}
.prog-caption {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 24px;
background: var(--bg-2);
color: var(--text);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
border-bottom: 1px solid var(--border);
}
.prog-step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(180deg, rgba(212, 180, 131, 0.18), rgba(212, 180, 131, 0.08));
border: 1px solid rgba(212, 180, 131, 0.3);
color: var(--gold);
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
.prog-pill {
margin-left: auto;
padding: 4px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.prog-pill-green {
background: rgba(93, 207, 140, 0.14);
color: var(--green);
border: 1px solid rgba(93, 207, 140, 0.3);
}
/* ============ RECEIVE ============ */
.receive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--border);
}
@media (max-width: 800px) { .receive-grid { grid-template-columns: 1fr; } }
.receive-card {
padding: 44px 36px 44px 0;
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
transition: background 0.3s var(--ease);
}
.receive-card:last-child { border-right: none; }
.receive-card:nth-child(n+2) { padding-left: 36px; }
.receive-card:hover { background: rgba(255,255,255,0.012); }
@media (max-width: 800px) {
.receive-card { border-right: none; padding: 32px 0; }
.receive-card:nth-child(n+2) { padding-left: 0; }
}
.receive-arrow {
color: var(--blue);
font-size: 22px;
font-weight: 300;
display: block;
margin-bottom: 24px;
}
.receive-card h3 {
font-size: 17px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 14px;
}
.receive-card p {
font-size: 15px;
color: var(--muted);
margin: 0;
line-height: 1.6;
}
/* ============ OUTCOMES ============ */
.outcomes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 900px) { .outcomes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .outcomes-grid { grid-template-columns: 1fr; } }
.outcome {
padding: 32px;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 100%);
border: 1px solid var(--border-2);
border-radius: var(--radius);
transition: all 0.3s var(--ease);
}
.outcome:hover {
transform: translateY(-3px);
border-color: rgba(212, 180, 131, 0.25);
}
.outcome h3 {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0 0 14px;
color: var(--text);
}
.outcome p {
font-size: 15px;
color: var(--muted);
line-height: 1.6;
margin: 0;
}
.aside {
margin-top: 32px;
padding: 32px 36px;
border-radius: var(--radius);
background:
linear-gradient(180deg, rgba(212,180,131,0.06) 0%, rgba(212,180,131,0.015) 100%);
border: 1px solid rgba(212, 180, 131, 0.18);
}
.aside-label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 10px;
}
.aside-text {
font-size: 19px;
font-weight: 600;
line-height: 1.45;
margin: 0;
letter-spacing: -0.005em;
}
/* ============ COMPARE ============ */
.compare {
margin-top: 56px;
display: grid;
gap: 0;
border-top: 1px solid var(--border);
}
.compare-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
padding: 32px 0;
border-bottom: 1px solid var(--border);
}
@media (max-width: 700px) {
.compare-row { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
}
.compare-side p:last-child {
font-size: 16.5px;
line-height: 1.55;
margin: 0;
}
.compare-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
margin: 0 0 12px;
}
.compare-them .compare-label { color: var(--red); }
.compare-them p:last-child { color: var(--muted); }
.compare-us .compare-label { color: var(--green); }
.compare-us p:last-child { color: var(--text); font-weight: 500; }
/* ============ VSL ============ */
.vsl-wrap {
margin: 32px auto 0;
max-width: 1080px;
}
.vsl-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid var(--border-2);
box-shadow: 0 40px 100px -25px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(212, 180, 131, 0.08);
}
.vsl-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vsl-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.vsl-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
color: var(--dim);
}
.vsl-placeholder svg { opacity: 0.4; }
.vsl-placeholder p {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
margin: 0;
color: var(--muted);
}
/* ============ TEAM ============ */
.team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 820px;
margin: 0 auto;
}
@media (max-width: 700px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
text-align: center;
padding: 56px 40px 44px;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
display: block;
color: inherit;
text-decoration: none;
}
.team-card:hover {
transform: translateY(-4px);
border-color: rgba(212, 180, 131, 0.3);
}
.team-card-link .team-photo {
transition: box-shadow 0.4s var(--ease);
}
.team-card-link:hover .team-photo {
box-shadow:
0 0 0 1px rgba(255,255,255,0.06) inset,
0 0 0 8px rgba(212, 180, 131, 0.10),
0 0 0 9px rgba(212, 180, 131, 0.14),
0 40px 80px -20px rgba(0, 0, 0, 0.6);
}
.team-link-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 20px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
padding: 8px 16px;
border: 1px solid rgba(212, 180, 131, 0.28);
border-radius: 999px;
transition: all 0.3s var(--ease);
}
.team-card-link:hover .team-link-arrow {
background: rgba(212, 180, 131, 0.08);
border-color: rgba(212, 180, 131, 0.5);
transform: translateX(2px);
}
.team-photo {
width: 300px;
height: 300px;
border-radius: 50%;
margin: 0 auto 36px;
overflow: hidden;
background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
border: 2px solid rgba(212, 180, 131, 0.25);
position: relative;
box-shadow:
0 0 0 1px rgba(255,255,255,0.06) inset,
0 0 0 8px rgba(212, 180, 131, 0.05),
0 0 0 9px rgba(212, 180, 131, 0.08),
0 40px 80px -20px rgba(0, 0, 0, 0.6);
}
.team-photo::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
box-shadow: 0 0 80px rgba(107, 159, 208, 0.22) inset;
pointer-events: none;
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 22%;
display: block;
}
@media (max-width: 900px) {
.team-photo { width: 260px; height: 260px; }
}
@media (max-width: 560px) {
.team-photo { width: 220px; height: 220px; }
.team-card { padding: 44px 28px 32px; }
}
.team-name {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 8px;
}
.team-role {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 28px;
}
.team-contact {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
}
.team-contact li { font-size: 14px; }
.team-contact a { color: var(--text-2); transition: color 0.2s; }
.team-contact a:hover { color: var(--gold); }
/* ============ BOOK ============ */
.section-book {
padding: 120px 0 140px;
background:
radial-gradient(1200px 800px at 50% 0%, rgba(212, 180, 131, 0.10) 0%, rgba(212, 180, 131, 0.04) 35%, transparent 75%),
radial-gradient(900px 700px at 80% 100%, rgba(107, 159, 208, 0.08), transparent 60%),
linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
border-top: 1px solid rgba(212, 180, 131, 0.18);
text-align: center;
position: relative;
}
.section-book::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 180, 131, 0.5), transparent);
}
.section-book .eyebrow { margin-bottom: 28px; }
.section-book .section-title { text-align: center; }
.section-book .section-sub { margin-left: auto; margin-right: auto; }
.book-cta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: stretch;
margin: 56px 0;
text-align: left;
position: relative;
}
.book-cta::before {
content: 'OR';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.32em;
color: var(--muted);
background: var(--bg);
padding: 10px;
border-radius: 999px;
border: 1px solid var(--border-2);
min-width: 44px;
text-align: center;
}
@media (max-width: 800px) {
.book-cta { grid-template-columns: 1fr; gap: 16px; }
.book-cta::before { display: none; }
}
.book-call {
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px 36px;
border-radius: var(--radius-lg);
background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 50%, var(--gold-3) 100%);
color: #1a1308;
text-align: center;
transition: all 0.3s var(--ease);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.25) inset,
0 24px 60px -16px rgba(212, 180, 131, 0.4);
}
.book-call:hover {
transform: translateY(-3px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 32px 70px -16px rgba(212, 180, 131, 0.5);
}
.book-call-label {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
margin: 0 0 16px;
opacity: 0.8;
}
.book-call-num {
font-size: clamp(32px, 4vw, 44px);
font-weight: 800;
letter-spacing: -0.025em;
margin: 0 0 14px;
line-height: 1;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.book-call-foot { font-size: 14px; margin: 0; opacity: 0.78; }
.book-form-wrap {
padding: 40px 36px;
background:
linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.025) 100%),
rgba(15, 22, 38, 0.6);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-lg);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 30px 80px -20px rgba(0, 0, 0, 0.5);
}
.book-form-label {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 22px;
text-align: center;
}
.book-form {
display: grid;
gap: 14px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }
.book-form label { display: grid; gap: 8px; }
.book-form label > span {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.book-form input,
.book-form select,
.book-form textarea {
font: inherit;
font-size: 15.5px;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--text);
border-radius: var(--radius-sm);
transition: all 0.2s var(--ease);
}
.book-form input::placeholder { color: var(--dim); }
.book-form input:focus,
.book-form select:focus,
.book-form textarea:focus {
outline: none;
border-color: var(--gold);
background: rgba(0, 0, 0, 0.4);
box-shadow: 0 0 0 3px rgba(212, 180, 131, 0.12);
}
.book-form select {
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--muted) 50%),
linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 40px;
}
.form-status {
min-height: 22px;
margin: 8px 0 0;
font-size: 13.5px;
text-align: center;
color: var(--muted);
}
.form-status.success { color: var(--green); }
.form-status.error { color: var(--red); }
.performance {
margin: 48px auto 0;
max-width: 620px;
padding: 28px 36px;
text-align: center;
border-radius: var(--radius);
border: 1px solid rgba(212, 180, 131, 0.2);
background: rgba(212, 180, 131, 0.03);
}
.performance-label {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 14px;
}
.performance-text {
font-size: 17px;
font-weight: 500;
line-height: 1.5;
margin: 0;
}
/* ============ FOOTER ============ */
.footer {
padding: 72px 0 32px;
border-top: 1px solid var(--border);
position: relative;
z-index: 2;
background: var(--bg);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 56px;
margin-bottom: 56px;
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } }
.footer-brand {
display: flex;
align-items: center;
gap: 16px;
}
.footer-mark {
width: 44px;
height: 44px;
object-fit: contain;
opacity: 0.9;
}
.footer-logo {
font-weight: 700;
font-size: 15px;
letter-spacing: 0.18em;
margin: 0 0 6px;
}
.footer-logo span { color: var(--muted); font-weight: 400; }
.footer-tag {
font-size: 14px;
color: var(--muted);
margin: 0;
letter-spacing: 0.01em;
}
.footer-head {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 20px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
}
.footer ul a {
font-size: 14px;
color: var(--text-2);
transition: color 0.2s;
}
.footer ul a:hover { color: var(--gold); }
.footer-bottom {
padding-top: 32px;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-size: 12px;
color: var(--dim);
letter-spacing: 0.04em;
}
.footer-bottom p { margin: 0; }
.footer-fine { letter-spacing: 0.14em; text-transform: uppercase; }
/* ============================================================
TEAM PROFILE PAGES (team-estuardo.html, team-sebastian.html)
============================================================ */
.profile-hero {
padding: 80px 0 60px;
position: relative;
}
.profile-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
margin-bottom: 32px;
letter-spacing: 0.02em;
transition: color 0.2s var(--ease);
}
.profile-back:hover { color: var(--gold); }
.profile-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
@media (max-width: 900px) {
.profile-hero-grid { grid-template-columns: 1fr; gap: 36px; }
}
.profile-portrait {
position: relative;
aspect-ratio: 4/5;
border-radius: var(--radius-lg);
overflow: hidden;
background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
border: 1px solid var(--border-2);
box-shadow:
0 0 0 1px rgba(255,255,255,0.04) inset,
0 0 0 6px rgba(212, 180, 131, 0.06),
0 40px 80px -20px rgba(0, 0, 0, 0.6);
}
.profile-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 20%;
}
.profile-name {
font-size: clamp(52px, 7vw, 96px);
font-weight: 800;
line-height: 0.96;
letter-spacing: -0.04em;
margin: 24px 0 18px;
}
.profile-name em { font-size: 1.02em; }
.profile-role {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 28px;
}
.profile-meta {
display: grid;
gap: 8px;
padding: 20px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin-bottom: 28px;
}
.profile-meta div {
display: flex;
gap: 14px;
font-size: 14.5px;
}
.profile-meta dt {
width: 110px;
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin: 4px 0 0;
}
.profile-meta dd {
margin: 0;
color: var(--text);
font-weight: 500;
}
.profile-contact {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* Story blocks */
.profile-story {
padding: 80px 0 40px;
}
.profile-block {
padding: 48px 0;
border-top: 1px solid var(--border);
}
.profile-block:first-child { border-top: 1px solid var(--border); }
.profile-block-grid {
display: grid;
grid-template-columns: 220px 1fr;
gap: 56px;
align-items: start;
}
@media (max-width: 800px) {
.profile-block-grid { grid-template-columns: 1fr; gap: 18px; }
}
.profile-block-num {
font-family: var(--font-serif);
font-style: italic;
font-size: 56px;
font-weight: 400;
color: var(--gold);
line-height: 1;
margin: 0 0 14px;
letter-spacing: -0.02em;
}
.profile-block-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--blue);
margin: 0;
}
.profile-block-title {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
margin: 0 0 24px;
}
.profile-block-title em { font-size: 1.05em; }
.profile-block-body p {
font-size: 17px;
line-height: 1.7;
color: var(--text-2);
margin: 0 0 16px;
}
.profile-block-body p:last-child { margin-bottom: 0; }
.profile-block-body strong { color: var(--text); font-weight: 600; }
/* Pull-quote moment */
.profile-pullquote {
padding: 100px 0;
text-align: center;
position: relative;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: radial-gradient(700px 400px at 50% 50%, rgba(212, 180, 131, 0.05), transparent 70%);
}
.profile-pullquote-text {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(28px, 4vw, 48px);
font-weight: 400;
line-height: 1.25;
color: var(--text);
margin: 0 auto 24px;
max-width: 820px;
letter-spacing: -0.015em;
}
.profile-pullquote-text em { color: var(--gold); }
.profile-pullquote-author {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
}
/* Big stats banner */
.profile-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
padding: 64px 0;
}
@media (max-width: 700px) {
.profile-stats { grid-template-columns: 1fr; gap: 20px; }
}
.profile-stat {
text-align: center;
padding: 28px;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
}
.profile-stat-num {
font-size: clamp(48px, 6vw, 72px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: var(--gold);
font-family: var(--font-serif);
font-style: italic;
margin: 0 0 8px;
}
.profile-stat-label {
font-size: 14px;
color: var(--muted);
margin: 0;
letter-spacing: 0.04em;
line-height: 1.4;
}
/* Full-width feature image between story blocks */
.profile-feature {
margin: 56px 0 32px;
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-2);
box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6);
}
/* 2-up row of landscape feature shots, used in the photo showcase */
.profile-feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 0 0 24px;
}
.profile-feature-row .profile-feature {
margin: 0;
}
@media (max-width: 800px) {
.profile-feature-row { grid-template-columns: 1fr; }
}
/* Photo showcase section — wider than the narrow story container so the
gallery photos render larger and the cars are actually visible. */
.profile-showcase {
padding: 40px 0 80px;
}
.profile-feature img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.profile-feature.profile-feature-tall {
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.profile-feature.profile-feature-tall img {
aspect-ratio: 4 / 5;
}
.profile-feature-caption {
position: absolute;
left: 28px;
bottom: 24px;
right: 28px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
/* Photo grid (for client photos they upload) */
.profile-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 32px 0;
}
@media (max-width: 700px) {
.profile-gallery { grid-template-columns: 1fr 1fr; }
}
.profile-gallery-img {
aspect-ratio: 4/5;
background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-2);
position: relative;
}
.profile-gallery-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.profile-gallery-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(107,159,208,0.08), rgba(212,180,131,0.04));
opacity: 0;
}
.profile-gallery-img:not(:has(img))::after { opacity: 1; }
.profile-cta {
padding: 80px 0 100px;
text-align: center;
border-top: 1px solid var(--border);
background: radial-gradient(900px 600px at 50% 50%, rgba(212, 180, 131, 0.05), transparent 70%);
}
/* ============================================================
PRICING PILL (above the VSL — "Starting at $999")
============================================================ */
.price-pill {
display: inline-flex;
align-items: baseline;
gap: 10px;
padding: 14px 28px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(212, 180, 131, 0.14) 0%, rgba(212, 180, 131, 0.05) 100%);
border: 1px solid rgba(212, 180, 131, 0.4);
font-size: 16px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text);
margin: 28px auto 24px;
text-transform: uppercase;
box-shadow: 0 12px 36px -14px rgba(212, 180, 131, 0.4);
}
.price-pill .price-pill-amt {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 30px;
color: var(--gold);
letter-spacing: -0.02em;
text-transform: none;
}
.price-pill-row {
text-align: center;
margin-bottom: 8px;
}
/* ============================================================
PAGE NAVIGATION GRID (4 cards linking to other pages)
============================================================ */
.section-pages {
padding: 80px 0 100px;
}
.page-intro {
text-align: center;
max-width: 760px;
margin: 0 auto 56px;
}
.page-intro p {
font-size: 18px;
color: var(--text-2);
line-height: 1.65;
margin: 0 0 16px;
}
.page-intro strong { color: var(--text); font-weight: 600; }
.page-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
@media (max-width: 1100px) { .page-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .page-grid { grid-template-columns: 1fr; } }
.page-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 32px 28px 28px;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.012) 100%);
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
transition: all 0.4s var(--ease);
}
.page-card::before {
content: '';
position: absolute;
top: 0; left: 50%;
width: 0;
height: 2px;
background: var(--gold);
transform: translateX(-50%);
transition: width 0.4s var(--ease);
}
.page-card:hover {
transform: translateY(-4px);
border-color: rgba(212, 180, 131, 0.35);
background: linear-gradient(180deg, rgba(212, 180, 131, 0.05) 0%, rgba(255,255,255,0.01) 100%);
}
.page-card:hover::before { width: 60%; }
.page-card-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(180deg, rgba(212, 180, 131, 0.2), rgba(212, 180, 131, 0.06));
border: 1px solid rgba(212, 180, 131, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
}
.page-card h3 {
font-size: 19px;
font-weight: 700;
letter-spacing: -0.01em;
margin: 4px 0 4px;
color: var(--text);
}
.page-card p {
font-size: 14.5px;
color: var(--muted);
line-height: 1.55;
margin: 0 0 12px;
flex: 1;
}
.page-card-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--gold);
letter-spacing: 0.04em;
margin-top: auto;
transition: gap 0.3s var(--ease);
}
.page-card:hover .page-card-arrow { gap: 12px; }
/* ============================================================
STEP FLOW (Step 1 → Step 2 visual indicator)
============================================================ */
.step-flow {
text-align: center;
padding: 80px 0 16px;
}
.step-flow-label {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-radius: 999px;
background: rgba(212, 180, 131, 0.1);
border: 1px solid rgba(212, 180, 131, 0.3);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
}
.step-flow-label .step-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--gold);
animation: stepPulse 1.8s ease-in-out infinite;
}
@keyframes stepPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
.step-flow h2 {
font-size: clamp(36px, 5vw, 56px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
margin: 0 0 18px;
}
.step-flow h2 em { font-size: 1.05em; }
.step-flow-sub {
font-size: 18px;
color: var(--text-2);
max-width: 560px;
margin: 0 auto 36px;
line-height: 1.5;
}
/* ============================================================
PULL YOUR REPORT FOR $1 (IdentityIQ referral)
============================================================ */
.section-report {
background:
radial-gradient(900px 600px at 50% 50%, rgba(212, 180, 131, 0.08), transparent 70%),
linear-gradient(180deg, transparent 0%, rgba(212, 180, 131, 0.025) 50%, transparent 100%);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.report-callout {
margin-top: 32px;
padding: 40px;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
}
.price-compare-label {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 24px;
text-align: center;
}
.price-list {
list-style: none;
padding: 0;
margin: 0 0 32px;
display: grid;
gap: 0;
border-top: 1px solid var(--border);
}
.price-list li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 8px;
border-bottom: 1px solid var(--border);
gap: 20px;
}
.price-list .price-name {
font-size: 18px;
color: var(--text);
font-weight: 600;
letter-spacing: -0.005em;
}
.price-list .price-name-sub {
display: block;
font-size: 14px;
color: var(--muted);
font-weight: 400;
margin-top: 4px;
letter-spacing: 0.01em;
}
.price-list .price-amt {
font-size: 26px;
font-weight: 700;
color: var(--muted);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
text-decoration: line-through;
text-decoration-color: rgba(239, 107, 107, 0.5);
text-decoration-thickness: 2px;
}
.price-list .price-our {
background: linear-gradient(180deg, rgba(212, 180, 131, 0.10) 0%, rgba(212, 180, 131, 0.04) 100%);
border-radius: var(--radius-sm);
padding-left: 16px;
padding-right: 16px;
margin: 4px -16px 0;
border: 1px solid rgba(212, 180, 131, 0.28);
border-bottom: 1px solid rgba(212, 180, 131, 0.28);
}
.price-list .price-our {
padding: 26px 20px;
margin: 10px -20px 0;
}
.price-list .price-our .price-name {
color: var(--text);
font-weight: 700;
font-size: 19px;
}
.price-list .price-our .price-name-sub { color: var(--gold); opacity: 0.85; font-size: 14px; }
.price-list .price-our .price-amt {
color: var(--gold);
font-size: 44px;
text-decoration: none;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
text-shadow: 0 2px 16px rgba(212, 180, 131, 0.25);
}
.report-cta {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-top: 8px;
}
/* The big "PULL FOR $1" button gets serious attention */
.btn-identity {
position: relative;
font-size: 19px;
font-weight: 700;
padding: 22px 40px;
letter-spacing: 0.01em;
animation: identityPulse 2.4s ease-in-out infinite;
}
@keyframes identityPulse {
0%, 100% {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.25) inset,
0 0 0 0 rgba(212, 180, 131, 0.55),
0 16px 40px -8px rgba(212, 180, 131, 0.4);
}
50% {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.25) inset,
0 0 0 16px rgba(212, 180, 131, 0),
0 18px 44px -8px rgba(212, 180, 131, 0.5);
}
}
.btn-identity .btn-arrow {
font-size: 22px;
font-weight: 600;
transition: transform 0.3s var(--ease);
}
.btn-identity:hover .btn-arrow { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
.btn-identity { animation: none; }
}
.report-disclosure {
margin: 28px auto 0;
max-width: 640px;
font-size: 12.5px;
line-height: 1.6;
color: var(--dim);
text-align: center;
font-style: italic;
}
/* ============================================================
VISIT US SECTION (location + Google reviews)
============================================================ */
.section-visit {
background:
radial-gradient(900px 600px at 50% 100%, rgba(107, 159, 208, 0.04), transparent 70%);
border-top: 1px solid var(--border);
}
.visit-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
}
@media (max-width: 900px) {
.visit-grid { grid-template-columns: 1fr; gap: 40px; }
}
.visit-cta {
display: flex;
gap: 14px;
margin-top: 32px;
flex-wrap: wrap;
}
.visit-card {
padding: 36px;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.visit-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0.6;
}
.visit-card-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 16px;
}
.visit-card-name {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.015em;
margin: 0 0 8px;
color: var(--text);
}
.visit-card-meta {
font-size: 14.5px;
color: var(--muted);
margin: 0 0 28px;
line-height: 1.5;
}
.visit-points {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 14px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
.visit-points li {
font-size: 14.5px;
color: var(--text-2);
display: flex;
align-items: flex-start;
gap: 12px;
line-height: 1.5;
}
.visit-points li::before {
content: '';
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
border-radius: 50%;
background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
display: flex;
align-items: center;
justify-content: center;
background-image:
linear-gradient(180deg, var(--gold-2), var(--gold-3)),
url("data:image/svg+xml;utf8,");
background-blend-mode: normal;
}
/* Stars in Google CTA button */
.gstars {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 6px;
color: #fbbc05;
letter-spacing: 0;
}
/* Compact Google badge for footer */
.google-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--border-2);
border-radius: 999px;
font-size: 13px;
color: var(--text-2);
transition: all 0.3s var(--ease);
}
.google-badge:hover {
border-color: rgba(212, 180, 131, 0.4);
color: var(--text);
background: rgba(212, 180, 131, 0.05);
}
.google-badge .stars { color: #fbbc05; letter-spacing: 1px; font-size: 11px; }
.google-badge .g-text { font-weight: 500; }
/* ============================================================
RESULTS PAGE (results.html)
============================================================ */
.results-hero {
padding: 100px 0 80px;
position: relative;
text-align: left;
}
.results-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
margin-bottom: 32px;
letter-spacing: 0.02em;
transition: color 0.2s var(--ease);
}
.results-back:hover { color: var(--gold); }
.results-title {
font-size: clamp(48px, 7vw, 96px);
font-weight: 800;
line-height: 0.98;
letter-spacing: -0.035em;
margin: 0 0 28px;
}
.results-sub {
font-size: 17px;
color: var(--text-2);
margin: 0;
line-height: 1.6;
max-width: 720px;
}
.results-case {
padding: 64px 0;
border-top: 1px solid var(--border);
}
.results-case:first-of-type { border-top: 1px solid var(--border); }
.results-case-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
margin-bottom: 40px;
flex-wrap: wrap;
padding-bottom: 28px;
border-bottom: 1px solid var(--border);
}
.results-case-tag {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 14px;
}
.results-case-name {
font-size: clamp(36px, 5vw, 60px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.02;
margin: 0 0 10px;
}
.results-case-name em { font-size: 1.05em; }
.results-case-meta {
font-size: 14px;
color: var(--muted);
margin: 0;
letter-spacing: 0.02em;
}
.results-delta { text-align: right; }
.results-delta-label {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 8px;
}
.results-delta-num {
font-size: clamp(40px, 5vw, 56px);
font-weight: 800;
color: var(--green);
letter-spacing: -0.025em;
margin: 0;
line-height: 1;
}
.results-delta-num span {
font-size: 0.45em;
color: var(--muted);
font-weight: 500;
margin-left: 4px;
}
.results-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 36px;
}
@media (max-width: 800px) {
.results-grid { grid-template-columns: 1fr; gap: 16px; }
}
.results-img {
position: relative;
margin: 0;
background: #ffffff;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-2);
box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.55);
transition: transform 0.4s var(--ease);
}
.results-img:hover { transform: translateY(-3px); }
.results-img img {
width: 100%;
height: auto;
display: block;
}
.results-corner {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
padding: 6px 12px;
background: rgba(5, 8, 15, 0.9);
color: var(--red);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: 999px;
border: 1px solid rgba(239, 107, 107, 0.3);
}
.results-corner-good { color: var(--green); border-color: rgba(93, 207, 140, 0.3); }
.results-stats {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
padding-top: 28px;
border-top: 1px solid var(--border);
}
@media (max-width: 700px) { .results-stats { grid-template-columns: repeat(2, 1fr); } }
.results-stats li {
display: flex;
flex-direction: column;
gap: 6px;
}
.results-stats li span {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.results-stats li strong {
font-size: 16px;
font-weight: 600;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.results-cta {
padding: 100px 0;
text-align: center;
border-top: 1px solid var(--border);
background: radial-gradient(900px 600px at 50% 50%, rgba(212, 180, 131, 0.05), transparent 70%);
}
.results-cta-btns {
display: flex;
gap: 14px;
justify-content: center;
margin-top: 36px;
flex-wrap: wrap;
}
.results-disclaimer {
padding: 48px 0 64px;
text-align: center;
border-top: 1px solid var(--border);
}
.results-disclaimer p {
font-size: 12.5px;
color: var(--dim);
margin: 0;
line-height: 1.7;
font-style: italic;
}
/* ============================================================
"SEE ALL RESULTS" CTA ON INDEX (between proof + book button)
============================================================ */
.see-all-results {
margin: 64px auto 0;
text-align: center;
}
.see-all-results .btn { margin: 0 8px 12px; }
.see-all-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
font-size: 14px;
font-weight: 500;
color: var(--gold);
letter-spacing: 0.04em;
transition: gap 0.3s var(--ease);
}
.see-all-link:hover { gap: 14px; }
/* Make proof case cards on index page look clickable */
a.proof-case,
a.marquee-link {
display: block;
color: inherit;
text-decoration: none;
cursor: pointer;
}
a.marquee-link { position: relative; }
/* ============================================================
LEGAL DISCLOSURES
============================================================ */
.disclosures {
padding: 56px 0 32px;
border-top: 1px solid var(--border);
background: var(--bg);
position: relative;
z-index: 2;
}
.disclosures-head {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 24px;
}
.disclosures-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 36px;
}
@media (max-width: 800px) {
.disclosures-grid { grid-template-columns: 1fr; gap: 28px; }
}
.disclosure-block h4 {
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-2);
margin: 0 0 10px;
}
.disclosure-block p {
font-size: 12.5px;
line-height: 1.6;
color: var(--dim);
margin: 0;
}
/* ============================================================
GUARANTEE / TRUST STRIP
============================================================ */
.guarantee {
padding: 36px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background:
linear-gradient(180deg, transparent 0%, rgba(212, 180, 131, 0.025) 50%, transparent 100%);
position: relative;
z-index: 3;
}
.guarantee-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
@media (max-width: 800px) {
.guarantee-row { grid-template-columns: 1fr; gap: 24px; }
.guarantee-item { border-right: none !important; padding: 0 !important; }
}
.guarantee-item {
display: flex;
align-items: center;
gap: 16px;
padding: 0 28px;
border-right: 1px solid var(--border);
}
.guarantee-item:last-child { border-right: none; }
.guarantee-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(180deg, rgba(212, 180, 131, 0.16), rgba(212, 180, 131, 0.06));
border: 1px solid rgba(212, 180, 131, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
}
.guarantee-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.guarantee-head {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.005em;
color: var(--text);
margin: 0;
line-height: 1.2;
}
.guarantee-sub {
font-size: 12.5px;
color: var(--muted);
margin: 0;
line-height: 1.4;
}
/* ============================================================
TESTIMONIAL REELS
============================================================ */
.reels-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
max-width: 720px;
margin: 0 auto;
}
@media (max-width: 560px) { .reels-grid { gap: 14px; max-width: 100%; } }
.reel {
position: relative;
aspect-ratio: 9 / 16;
border-radius: var(--radius);
overflow: hidden;
background: linear-gradient(160deg, rgba(107, 159, 208, 0.12) 0%, rgba(212, 180, 131, 0.06) 40%, rgba(5, 8, 15, 0.6) 100%);
border: 1px solid var(--border-2);
cursor: pointer;
transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.reel:hover {
transform: translateY(-4px);
border-color: rgba(212, 180, 131, 0.35);
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
.reel video, .reel img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.reel-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 18px;
background: linear-gradient(180deg, transparent 50%, rgba(5, 8, 15, 0.7) 100%);
pointer-events: none;
transition: opacity 0.3s var(--ease);
}
.reel.is-playing .reel-overlay,
.reel.is-playing .reel-play { opacity: 0; pointer-events: none; }
.reel-play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(5, 8, 15, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1.5px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.reel:hover .reel-play {
transform: translate(-50%, -50%) scale(1.08);
background: rgba(212, 180, 131, 0.6);
}
.reel-name {
font-size: 14px;
font-weight: 600;
color: #fff;
margin: 0 0 2px;
letter-spacing: -0.005em;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.reel-result {
font-size: 12px;
font-weight: 500;
color: var(--gold);
margin: 0;
letter-spacing: 0.04em;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.reel-placeholder-icon {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
border: 1px dashed rgba(255,255,255,0.18);
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
}
.reels-eyebrow-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 56px;
}
.reels-eyebrow-row p { margin: 0; }
.reels-note {
font-size: 14px;
color: var(--muted);
max-width: 380px;
line-height: 1.5;
}
/* ============================================================
WATCH-VSL-FIRST BANNER
============================================================ */
.watch-first {
display: flex;
align-items: center;
gap: 20px;
padding: 18px 24px;
margin: 0 auto 40px;
max-width: 760px;
background: linear-gradient(180deg, rgba(212, 180, 131, 0.10) 0%, rgba(212, 180, 131, 0.04) 100%);
border: 1px solid rgba(212, 180, 131, 0.28);
border-radius: 999px;
transition: all 0.4s var(--ease);
text-decoration: none;
color: inherit;
}
.watch-first:hover {
transform: translateY(-2px);
border-color: rgba(212, 180, 131, 0.5);
background: linear-gradient(180deg, rgba(212, 180, 131, 0.14) 0%, rgba(212, 180, 131, 0.06) 100%);
}
.watch-first-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold-3) 100%);
display: flex;
align-items: center;
justify-content: center;
color: #1a1308;
box-shadow: 0 4px 14px rgba(212, 180, 131, 0.35);
}
.watch-first-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.watch-first-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
margin: 0;
}
.watch-first-msg {
font-size: 15px;
color: var(--text);
margin: 0;
font-weight: 500;
}
.watch-first-arrow {
font-size: 18px;
color: var(--gold);
transition: transform 0.3s var(--ease);
}
.watch-first:hover .watch-first-arrow { transform: translateX(4px); }
@media (max-width: 640px) {
.watch-first { flex-direction: row; padding: 14px 18px; gap: 14px; }
.watch-first-msg { font-size: 13.5px; }
}
/* ============================================================
BOOKING CALENDAR
============================================================ */
.calendar-wrap {
margin-top: 32px;
padding: 40px 36px;
background:
linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.025) 100%),
rgba(15, 22, 38, 0.6);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-lg);
text-align: left;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 30px 80px -20px rgba(0, 0, 0, 0.5);
}
.cal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.cal-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--blue);
margin: 0;
}
.cal-strip {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 4px 2px 14px;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: var(--border-3) transparent;
-webkit-overflow-scrolling: touch;
}
.cal-strip::-webkit-scrollbar { height: 6px; }
.cal-strip::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 6px; }
.cal-day {
flex: 0 0 auto;
width: 82px;
padding: 16px 8px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius);
text-align: center;
cursor: pointer;
transition: all 0.3s var(--ease);
scroll-snap-align: start;
font: inherit;
color: var(--text);
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.3);
}
.cal-day:hover {
border-color: rgba(212, 180, 131, 0.55);
background: linear-gradient(180deg, rgba(212, 180, 131, 0.12) 0%, rgba(212, 180, 131, 0.04) 100%);
transform: translateY(-2px);
}
.cal-day.is-selected {
background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold-3) 100%);
border-color: rgba(255, 255, 255, 0.15);
color: #1a1308;
box-shadow: 0 12px 28px -8px rgba(212, 180, 131, 0.4);
}
.cal-day.is-disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.cal-day-name {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 6px;
}
.cal-day-num {
font-size: 26px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 6px;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.cal-day-mon {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-2);
}
.cal-day.is-selected .cal-day-name,
.cal-day.is-selected .cal-day-num,
.cal-day.is-selected .cal-day-mon {
color: #1a1308;
}
.cal-times-label {
margin: 32px 0 16px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--blue);
display: flex;
align-items: center;
gap: 10px;
}
.cal-times-label span:last-child { color: var(--text); letter-spacing: 0.02em; font-weight: 500; text-transform: none; font-size: 15px; }
.cal-times {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 10px;
}
.cal-time {
padding: 14px 10px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-sm);
text-align: center;
cursor: pointer;
font: inherit;
font-size: 15px;
font-weight: 600;
color: var(--text);
transition: all 0.3s var(--ease);
font-variant-numeric: tabular-nums;
}
.cal-time:hover {
border-color: rgba(212, 180, 131, 0.55);
background: linear-gradient(180deg, rgba(212, 180, 131, 0.12) 0%, rgba(212, 180, 131, 0.04) 100%);
transform: translateY(-1px);
}
.cal-time.is-selected {
background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold-3) 100%);
border-color: rgba(255, 255, 255, 0.15);
color: #1a1308;
box-shadow: 0 8px 20px -6px rgba(212, 180, 131, 0.4);
}
.cal-empty {
padding: 24px;
text-align: center;
color: var(--muted);
font-size: 14px;
font-style: italic;
border: 1px dashed var(--border-2);
border-radius: var(--radius);
}
.cal-confirmed {
margin: 24px 0 0;
padding: 16px 22px;
background: rgba(93, 207, 140, 0.08);
border: 1px solid rgba(93, 207, 140, 0.28);
border-radius: var(--radius);
font-size: 14.5px;
display: none;
align-items: center;
gap: 12px;
}
.cal-confirmed.is-shown { display: flex; }
.cal-check {
width: 24px;
height: 24px;
flex-shrink: 0;
border-radius: 50%;
background: var(--green);
color: #07090f;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
}
.cal-confirmed-text strong { color: var(--green); font-weight: 600; }