/* ============================================================================ Storm Restoration ATL — cinematic navy+amber theme Extracted from the monolith and rebuilt. Single accent = amber #F7A11B. One easing family. Content is visible from first paint (reveal gated behind .js). ============================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* The UA's [hidden] rule has no !important, so any author `display` beats it and an element marked hidden renders anyway. Bit us on a hero button. */ [hidden] { display: none !important; } :root { --navy: #23246B; --navy-dark: #17184A; --navy-deeper: #0f1035; --navy-abyss: #0a0b26; --amber: #F7A11B; --amber-dark: #d8880c; --amber-light: #ffb949; --white: #FFFFFF; /* text on dark */ --heading: #FFFFFF; --body: rgba(255,255,255,0.68); --body-dim: rgba(255,255,255,0.56); /* 0.44 measured 4.05-4.31:1 on our surfaces — under AA */ --line: rgba(255,255,255,0.09); --line-2: rgba(255,255,255,0.14); --surface: rgba(255,255,255,0.035); --surface-2: rgba(255,255,255,0.055); /* light form-card tokens */ --ink: #101223; --ink-muted: #5b607a; --field: #f6f7fb; --field-line: #e2e5ef; --radius-sm: 4px; --radius: 12px; --radius-lg: 18px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --shadow-md: 0 10px 34px rgba(0,0,0,0.35); --shadow-lg: 0 30px 70px rgba(0,0,0,0.5); } html { scroll-behavior: smooth; background: var(--navy-deeper); } /* iOS Safari samples bg for its top+bottom chrome — keep it dark so no white bars. */ body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: var(--navy-deeper); color: var(--body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3 { color: var(--heading); } /* Kill iOS double-tap-to-zoom on tappable controls (keeps pinch-zoom). */ a, button, summary, label, input, select, textarea, [role="button"], [class*="carousel"], .marquee { touch-action: manipulation; } /* Guaranteed navy iOS safe-area fills (notch + home indicator). */ .safe-fill-top { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--navy-dark); z-index: 9990; pointer-events: none; } .safe-fill-bottom { position: fixed; bottom: 0; left: 0; right: 0; height: env(safe-area-inset-bottom); background: var(--navy-abyss); z-index: 9990; pointer-events: none; } /* Reveal system: hidden state ONLY when .js is present. No JS → content visible. */ .js [data-aos] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--delay, 0ms); } .js [data-aos].in-view { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } [data-aos] { opacity: 1 !important; transform: none !important; } html { scroll-behavior: auto; } } /* ── Layout utilities ── */ /* Labels the lead-band inputs need for screen readers. The placeholders are the only visible label there, and they disappear the moment someone types. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 9999; background: var(--amber); color: var(--navy-abyss); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; padding: 12px 18px; border-radius: var(--radius-sm); transition: top 0.2s var(--ease); } .skip-link:focus { top: calc(12px + env(safe-area-inset-top)); } .container { max-width: 1180px; margin: 0 auto; padding: 0 28px; } .section { position: relative; padding: clamp(56px, 4vw + 40px, 104px) 0; overflow: hidden; } .section--deeper { background: var(--navy-deeper); } .section--dark { background: var(--navy-dark); } .section--band { background: linear-gradient(170deg, var(--navy-dark) 0%, var(--navy-deeper) 100%); } .section--abyss { background: var(--navy-abyss); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--amber); } .eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--amber); border-radius: 2px; flex-shrink: 0; } .eyebrow--center { justify-content: center; } .eyebrow--center::before { display: none; } .section-head { max-width: 760px; } .section-head--center { margin: 0 auto; text-align: center; } .h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1.06; font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.6rem); margin: 14px 0 0; } .h2 em { font-style: normal; color: var(--amber); } .h2 .serif { font-family: 'DM Serif Display', Georgia, serif; font-style: italic; font-weight: 400; color: var(--amber); font-variant-numeric: lining-nums; } .lede { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.18rem); color: var(--body); line-height: 1.7; margin-top: 18px; max-width: 640px; } .section-head--center .lede { margin-left: auto; margin-right: auto; } /* Decorative oversized background word */ .bg-word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: clamp(7rem, 26vw, 22rem); color: #fff; opacity: 0.022; letter-spacing: -0.03em; white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; } .section > .container { position: relative; z-index: 1; } /* Google G helper */ .g-logo svg { display: block; } /* ============================ BUTTONS ============================ */ .btn-cta { --mx: 50%; --my: 50%; background: linear-gradient(135deg, var(--amber) 0%, #f59c10 100%); color: var(--navy-abyss); font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; padding: 13px 24px; border: none; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-sm); min-height: 48px; position: relative; overflow: hidden; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .btn-cta::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s var(--ease); background: radial-gradient(150px circle at var(--mx) var(--my), rgba(255,255,255,0.55), transparent 60%); pointer-events: none; } .btn-cta::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); transition: left 0.55s var(--ease); } .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(247,161,27,0.35), 0 14px 38px rgba(247,161,27,0.32); } .btn-cta:hover::after { left: 160%; } .btn-cta:active { transform: translateY(0); } .btn-cta-lg { font-size: 15px; padding: 17px 34px; min-height: 56px; } .btn-arrow { transition: transform 0.2s var(--ease); } .btn-cta:hover .btn-arrow, .btn-ghost:hover .btn-arrow { transform: translateX(4px); } /* cursor glow enabled only for fine pointers + no reduced motion */ @media (pointer: fine) and (prefers-reduced-motion: no-preference) { .btn-cta.has-glow:hover::before { opacity: 1; } } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(247,161,27,0.55), 0 10px 34px rgba(247,161,27,0.4); } 60% { box-shadow: 0 0 0 18px rgba(247,161,27,0), 0 10px 34px rgba(247,161,27,0.4); } 100% { box-shadow: 0 0 0 0 rgba(247,161,27,0), 0 10px 34px rgba(247,161,27,0.4); } } /* --pulse-delay staggers the CTAs down the page. Pulsing in unison reads as a broken loop; offset, it reads as separate invitations. */ .btn-pulse { animation: pulse-ring 2.8s var(--ease) infinite; animation-delay: var(--pulse-delay, 0s); } .btn-pulse:hover, .btn-pulse:focus-visible { animation: none; } /* Amber ring is invisible on the amber band, so that one pulses in deep navy. */ @keyframes pulse-ring-dark { 0% { box-shadow: 0 0 0 0 rgba(10,11,38,0.45), 0 12px 30px rgba(58,36,0,0.3); } 60% { box-shadow: 0 0 0 18px rgba(10,11,38,0), 0 12px 30px rgba(58,36,0,0.3); } 100% { box-shadow: 0 0 0 0 rgba(10,11,38,0), 0 12px 30px rgba(58,36,0,0.3); } } .section-cta--on-amber .btn-pulse { animation-name: pulse-ring-dark; } @media (prefers-reduced-motion: reduce) { .btn-pulse { animation: none; } } .btn-ghost { background: rgba(255,255,255,0.04); color: #fff; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; padding: 13px 24px; min-height: 48px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease); } .btn-ghost:hover { border-color: var(--amber); background: rgba(247,161,27,0.08); transform: translateY(-2px); } /* ============================ NAV ============================ */ .nav { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 66px; padding: 0 28px; padding-top: max(0px, env(safe-area-inset-top)); background: rgba(15,16,53,0.82); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); } .nav.scrolled { background: rgba(10,11,38,0.92); box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(0,0,0,0.4); } .nav-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .nav-logo { width: 44px; height: 44px; border-radius: 50%; background: #fff; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(247,161,27,0.35), 0 4px 14px rgba(0,0,0,0.4); } .nav-logo img { width: 100%; height: 100%; object-fit: contain; } .nav-name { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .cta-label-short { display: none; } .nav-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(247,161,27,0.25); background: rgba(247,161,27,0.06); border-radius: 100px; padding: 5px 12px 5px 9px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.78); white-space: nowrap; } .nav-pill-stars { color: var(--amber); letter-spacing: 1px; font-size: 11px; } /* ============================ HERO ============================ */ /* max() keeps the 600px floor. Written as three separate declarations, the svh line REPLACED the floor, so on a short screen (iPhone SE, any phone in landscape) the hero box collapsed under its own content and clipped the badge and the top of the headline with no way to scroll to them. */ .hero { position: relative; min-height: 600px; min-height: max(600px, 92vh); min-height: max(600px, 92svh); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Light overall wash + concentrated bottom gradient (text legibility), NOT a dark blanket. Placeholder-phase strength (busy real photo); dial down when the Higgsfield hero lands. */ .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10,11,38,0.82) 0%, rgba(10,11,38,0.42) 20%, rgba(10,11,38,0.04) 48%, rgba(10,11,38,0.0) 66%, rgba(10,11,38,0.30) 100%), linear-gradient(rgba(10,11,38,0.10), rgba(10,11,38,0.10)); } .hero__inner { width: 100%; padding-top: 96px; padding-bottom: clamp(40px, 6vw, 72px); } .hero__badge { display: inline-block; align-self: flex-start; margin-bottom: 20px; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; color: #fff; padding: 8px 15px; border-radius: 100px; background: rgba(247,161,27,0.14); border: 1px solid rgba(247,161,27,0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-shadow: 0 1px 8px rgba(0,0,0,0.6); } .hero__h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 800; letter-spacing: -0.025em; font-size: clamp(2.1rem, 1.1rem + 5vw, 4.6rem); line-height: 1.03; color: #fff; max-width: 15ch; text-shadow: 0 2px 26px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.8); } .hero__h1 em { font-family: 'DM Serif Display', Georgia, serif; font-style: italic; font-weight: 400; color: var(--amber-light); font-variant-numeric: lining-nums; } .hero__subhead { margin-top: 14px; max-width: 28ch; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.15rem, 0.95rem + 1vw, 1.7rem); line-height: 1.2; letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.8); } .hero__sub { margin-top: 22px; max-width: 54ch; font-size: clamp(1rem, 0.92rem + 0.5vw, 1.24rem); line-height: 1.62; color: rgba(255,255,255,0.9); text-shadow: 0 1px 14px rgba(0,0,0,0.8); } .hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 24px; } .hero__trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,0.8); } .hero__trust-item svg { width: 17px; height: 17px; color: var(--amber); flex-shrink: 0; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .hero__stars { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.9); text-shadow: 0 1px 10px rgba(0,0,0,0.85); } .hero__stars .s { color: var(--amber); letter-spacing: 2px; } /* ============================ TRUST / STATS STRIP ============================ */ .trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .trust-inner { display: flex; flex-direction: column; gap: 26px; } .google-verified-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 100px; padding: 7px 15px 7px 9px; } .google-verified-badge svg { width: 16px; height: 16px; } .google-verified-badge span { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.72); } .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .stat-item { padding: 26px 20px; background: var(--surface); text-align: center; } .stat-number { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.8rem); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.03em; } .stat-number sup { font-size: 0.5em; vertical-align: super; color: var(--amber); } .stat-number.amber { color: var(--amber); } .stat-label { font-size: 12px; color: var(--body-dim); margin-top: 8px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; } .stat-sub { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 7px; } .stat-sub svg { width: 12px; height: 12px; } .stat-sub span { font-size: 12px; color: var(--body-dim); } .stat-sub .s { color: var(--amber); font-size: 12px; letter-spacing: 1px; } /* ============================ PUNCH LIST (urgency) ============================ */ .punch-list { margin: 40px auto 0; max-width: 860px; border-top: 1px solid rgba(255,255,255,0.09); } .punch { display: flex; align-items: center; gap: clamp(18px, 3vw, 30px); padding: clamp(24px, 3.4vw, 38px) 4px; border-bottom: 1px solid rgba(255,255,255,0.09); } .feature-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(247,161,27,0.12); border: 1px solid rgba(247,161,27,0.3); color: var(--amber); flex-shrink: 0; } .feature-icon svg { width: 24px; height: 24px; } .punch p { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.3rem, 1rem + 1.9vw, 2.1rem); font-weight: 700; color: #fff; line-height: 1.22; letter-spacing: -0.01em; } .punch p em { font-style: normal; color: var(--amber); } /* ============================ PROCESS (5 one-line steps) ============================ */ .process-list { display: flex; flex-direction: column; margin: 44px auto 0; max-width: 780px; border-top: 1px solid rgba(255,255,255,0.09); } .step { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 26px); padding: clamp(20px, 2.8vw, 30px) 4px; border-bottom: 1px solid rgba(255,255,255,0.09); } .step-num { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 800; color: var(--navy-abyss); background: var(--amber); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(247,161,27,0.4); } .step-line { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.15rem, 0.92rem + 1.5vw, 1.75rem); font-weight: 700; color: #fff; line-height: 1.25; letter-spacing: -0.01em; } .step-line em { font-style: normal; color: var(--amber); } .process-note { margin-top: 30px; font-size: 13px; color: var(--body-dim); text-align: center; } /* ============================ WORK MARQUEE ============================ */ .marquee { margin-top: 44px; position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; } .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; } /* Single track = [6 real][6 clones]; margin-right (not flex gap) makes each half equal width so translateX(-50%) loops seamlessly with no half-gap jump. */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee__item { flex: 0 0 auto; width: clamp(280px, 30vw, 400px); aspect-ratio: 3 / 2; margin-right: 16px; border-radius: var(--radius); overflow: hidden; position: relative; border: 1px solid var(--line); } .marquee__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .marquee__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,11,38,0.5), transparent 55%); opacity: 0; transition: opacity 0.35s var(--ease); } .marquee:hover .marquee__item:hover img { transform: scale(1.05); } .marquee:hover .marquee__item:hover::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .marquee__track { animation: none; width: auto; } .marquee__item { scroll-snap-align: start; } .marquee__item.marquee__clone { display: none; } } /* ============================ REVIEWS ============================ */ .reviews-bg-g { position: absolute; right: -30px; top: 40px; opacity: 0.05; pointer-events: none; user-select: none; z-index: 0; } .reviews-bg-g svg { width: 240px; height: 240px; } .reviews-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 2px 8px; cursor: grab; align-items: stretch; margin-top: 40px; } .reviews-carousel:active { cursor: grabbing; } .reviews-carousel::-webkit-scrollbar { height: 3px; } .reviews-carousel::-webkit-scrollbar-thumb { background: rgba(247,161,27,0.3); border-radius: 3px; } .review-card { flex: 0 0 auto; width: 340px; max-width: 84vw; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; display: flex; flex-direction: column; gap: 15px; position: relative; overflow: hidden; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease); } .review-card::before { content: '\201C'; position: absolute; top: -6px; right: 16px; font-size: 110px; line-height: 1.1; color: rgba(247,161,27,0.08); font-family: Georgia, serif; pointer-events: none; } .review-card:hover { transform: translateY(-6px); background: var(--surface-2); border-color: rgba(247,161,27,0.3); box-shadow: var(--shadow-md); } .review-stars { color: var(--amber); font-size: 14px; letter-spacing: 3px; } .review-text { font-size: 14px; color: rgba(255,255,255,0.82); font-style: italic; line-height: 1.72; flex: 1; position: relative; z-index: 1; } .review-divider { border: none; border-top: 1px solid var(--line); } .review-author { display: flex; align-items: center; gap: 12px; } .review-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--navy) 0%, #3a3cb8 100%); border: 1.5px solid rgba(247,161,27,0.3); display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: var(--amber); } .review-name { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.92); } .review-google-tag { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 100px; padding: 2px 8px 2px 5px; } .review-google-tag svg { width: 11px; height: 11px; } .review-google-tag span { font-size: 11px; font-weight: 600; color: var(--body-dim); } /* Google rating card */ .review-cta-card { flex: 0 0 auto; width: 300px; max-width: 84vw; scroll-snap-align: start; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 40px 26px; background: linear-gradient(rgba(15,16,53,0.7), rgba(15,16,53,0.7)) padding-box, linear-gradient(135deg, rgba(66,133,244,0.5), rgba(234,67,53,0.4) 33%, rgba(251,188,5,0.5) 66%, rgba(52,168,83,0.45)) border-box; border: 1.5px solid transparent; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .review-cta-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.42); } .review-cta-card svg.g { width: 46px; height: 46px; } .review-cta-stars { color: var(--amber); font-size: 18px; letter-spacing: 4px; } .review-cta-rating { font-family: 'Space Grotesk', sans-serif; font-size: 46px; font-weight: 800; color: #fff; letter-spacing: -0.04em; line-height: 1; } .review-cta-card p { font-size: 13px; color: var(--body-dim); line-height: 1.6; } .google-wordmark { font-weight: 700; } .google-wordmark .b { color: #4285F4; } .google-wordmark .r { color: #EA4335; } .google-wordmark .y { color: #FBBC05; } .google-wordmark .g { color: #34A853; } /* Carousel controls */ .carousel-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 14px; } .carousel-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); font-size: 20px; transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease); flex-shrink: 0; } .carousel-arrow:hover { border-color: var(--amber); color: var(--amber); background: rgba(247,161,27,0.08); } /* Looping rail: cloned cards trail the real ones so the drift wraps invisibly. Snap has to be off while it drifts, or the snap engine fights a sub-pixel scroll every frame; it comes back the moment a human takes over. */ .reviews-carousel.is-loop { scroll-snap-type: x proximity; } .reviews-carousel.is-drifting { scroll-snap-type: none; } .reviews-carousel .is-clone { pointer-events: none; } .carousel-arrow[disabled] { opacity: 0.32; cursor: default; border-color: var(--line); color: rgba(255,255,255,0.35); background: transparent; } .carousel-arrow[disabled]:hover { border-color: var(--line); color: rgba(255,255,255,0.35); background: transparent; } .carousel-dots { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; min-width: 0; max-width: 100%; } /* Dots are real buttons: the visible pip stays small, the hit area is 44px tall. */ .carousel-dot { width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; position: relative; flex: 0 0 auto; } .carousel-dot::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.22); transition: width 0.25s var(--ease), background 0.25s var(--ease); } /* The slot is a fixed 22px wide and the pip grows INSIDE it, so the active dot changing never reflows the row. Previously the whole row slid ~7.5px sideways every few seconds and a thumb could miss a moving target. */ .carousel-dot::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 44px; } .carousel-dot:hover::before { background: rgba(255,255,255,0.45); } .carousel-dot.active::before { background: var(--amber); width: 18px; border-radius: 10px; } .reviews-carousel:focus-visible, .carousel-dot:focus-visible, .carousel-arrow:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; } /* ============================ SECTION CTA ============================ */ .section-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-top: clamp(38px, 4vw, 56px); } .section-cta__note { font-size: 13px; color: var(--body-dim); letter-spacing: 0.01em; } .section-cta__note a { color: var(--amber); border-bottom: 1px solid rgba(247,161,27,0.35); } .section-cta__note a:hover { border-bottom-color: var(--amber); } .section-cta .btn-cta { max-width: 100%; white-space: normal; } /* ============================ PROCESS (amber band) ============================ */ /* The one warm section on a navy page. Amber ground, deep-navy cards, so the four steps read as a sequence and the section pops out of the scroll. */ .process { background: radial-gradient(120% 90% at 14% 0%, rgba(255,214,138,0.55) 0%, rgba(255,214,138,0) 58%), linear-gradient(158deg, #ffb63f 0%, var(--amber) 42%, #e8900d 100%); color: var(--navy-abyss); } .process::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.16; background: repeating-linear-gradient(115deg, rgba(10,11,38,0.5) 0 1px, transparent 1px 13px); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 62%); mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 62%); } .process__word { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: clamp(6rem, 22vw, 17rem); color: #fff; opacity: 0.13; letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; user-select: none; } .process .eyebrow { color: var(--navy-abyss); } .process .eyebrow::before { background: var(--navy-abyss); } .process .h2 { color: var(--navy-abyss); } .process .h2 .serif { color: var(--navy-abyss); } .process .lede { color: rgba(10,11,38,0.76); } .process-steps { list-style: none; margin: clamp(40px, 4.5vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; position: relative; } .process-step { position: relative; background: var(--navy-abyss); border: 1px solid rgba(10,11,38,0.5); border-radius: var(--radius-lg); padding: 26px 24px 28px; box-shadow: 0 14px 34px rgba(76,48,0,0.22); transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease); } .process-step:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(58,36,0,0.32); } .process-step__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .process-step__icon { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--amber); background: rgba(247,161,27,0.12); border: 1px solid rgba(247,161,27,0.34); } .process-step__icon svg { width: 25px; height: 25px; } .process-step__num { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.03em; color: rgba(255,255,255,0.34); font-variant-numeric: lining-nums; } .process-step__title { font-family: 'Space Grotesk', sans-serif; font-size: 1.18rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.22; color: #fff; } .process-step__text { margin-top: 10px; font-size: 14.7px; line-height: 1.66; color: rgba(255,255,255,0.7); } /* Skim layer: four different emphasis treatments, one or two per step, so a visitor who reads nothing but the highlighted words still gets the offer. Deliberately varied — the same treatment four times reads as noise. */ .hl-key { /* the load-bearing noun: bright + heavier */ color: #fff; font-weight: 700; } .hl-amber { /* the money words: amber, tracked slightly out */ color: var(--amber-light); font-weight: 700; letter-spacing: 0.005em; } .hl-said { /* the reassurance, in the serif voice */ font-family: 'DM Serif Display', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.16em; color: #fff; letter-spacing: 0.002em; line-height: 1; } .hl-mark { /* underlined promise, hand-drawn feel */ color: #fff; font-weight: 600; background-image: linear-gradient(90deg, rgba(247,161,27,0.85), rgba(247,161,27,0.35)); background-repeat: no-repeat; background-size: 100% 2px; background-position: 0 92%; padding-bottom: 2px; } .hl-num { /* the number you want seen from across the room */ font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 1.3em; color: var(--amber); letter-spacing: -0.02em; font-variant-numeric: lining-nums; line-height: 1; } /* Desktop: four across, joined by a dashed rail behind the icons. */ @media (min-width: 900px) { .process-steps { grid-template-columns: repeat(4, 1fr); gap: 18px; } .process-steps::before { content: ''; position: absolute; left: 6%; right: 6%; top: 52px; height: 2px; background: repeating-linear-gradient(90deg, rgba(10,11,38,0.42) 0 7px, transparent 7px 15px); z-index: 0; } .process-step { z-index: 1; padding: 26px 22px 30px; } .process-step__title { font-size: 1.1rem; } } /* 2-up: the desktop rail spans four cards and the mobile connector is vertical, so this band had no connector at all and the steps stopped reading as a sequence. One dashed rail per row. */ @media (min-width: 620px) and (max-width: 899px) { .process-steps { grid-template-columns: repeat(2, 1fr); gap: 18px; position: relative; } .process-step:nth-child(odd)::after { content: ''; position: absolute; top: 52px; right: -18px; width: 18px; height: 2px; background: repeating-linear-gradient(90deg, rgba(10,11,38,0.42) 0 7px, transparent 7px 15px); } } /* Mobile: vertical dashed connector between the cards. */ @media (max-width: 619px) { .process-steps { gap: 26px; } .process-step::after { content: ''; position: absolute; left: 50px; bottom: -22px; width: 2px; height: 18px; background: repeating-linear-gradient(180deg, rgba(10,11,38,0.5) 0 5px, transparent 5px 10px); } .process-step:last-child::after { display: none; } .process-step__icon { width: 46px; height: 46px; border-radius: 12px; } .process-step__icon svg { width: 22px; height: 22px; } .process-step__num { font-size: 30px; } } /* CTA sitting on the amber band: flip the button to deep navy so it still reads. */ .section-cta--on-amber .btn-cta { background: linear-gradient(135deg, var(--navy-abyss) 0%, #1b1d52 100%); color: #fff; box-shadow: 0 12px 30px rgba(58,36,0,0.3); } .section-cta--on-amber .btn-cta:hover { box-shadow: 0 18px 40px rgba(41,26,0,0.42); } .section-cta--on-amber .section-cta__note { color: rgba(10,11,38,0.72); } @media (max-width: 560px) { .section-cta .btn-cta { width: 100%; } } /* ============================ FAQ ============================ */ .faq-inner { max-width: 760px; margin: 44px auto 0; display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .faq-item[open], .faq-item:hover { border-color: rgba(247,161,27,0.28); background: var(--surface-2); } .faq-trigger { width: 100%; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; gap: 16px; text-align: left; list-style: none; } .faq-trigger::-webkit-details-marker { display: none; } .faq-trigger::marker { content: ''; } .faq-q { font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; font-weight: 700; color: #fff; line-height: 1.35; flex: 1; } .faq-icon-wrap { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); border: 1.5px solid var(--line-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.25s var(--ease), border-color 0.25s var(--ease); } .faq-item[open] .faq-icon-wrap { background: var(--amber); border-color: var(--amber); } .faq-icon { font-size: 20px; color: rgba(255,255,255,0.6); line-height: 1; transition: transform 0.3s var(--ease), color 0.25s var(--ease); } .faq-item[open] .faq-icon { transform: rotate(45deg); color: var(--navy-abyss); } .faq-body { padding: 0 24px 24px; } .faq-item[open] .faq-body { animation: faqReveal 0.34s var(--ease-out); } @keyframes faqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .faq-a { font-size: 14.5px; color: var(--body); line-height: 1.8; } /* ============================ FORM (liquid glass) ============================ */ .form-section::before { content: ''; position: absolute; width: 620px; height: 620px; background: radial-gradient(circle, rgba(247,161,27,0.1) 0%, transparent 65%); bottom: -240px; right: -120px; pointer-events: none; z-index: 0; } .form-header { text-align: center; } .form-card { --card-pad: clamp(28px, 1.7rem + 2.4vw, 46px); position: relative; z-index: 1; max-width: 560px; margin: 40px auto 0; padding: var(--card-pad); border-radius: var(--radius-lg); border: 1px solid transparent; /* Warm graphite body (deliberately NOT the page's navy family) + amber-hued edge. */ background: linear-gradient(160deg, #1c1d24 0%, #141519 58%, #0e0f13 100%) padding-box, linear-gradient(140deg, rgba(247,161,27,0.9) 0%, rgba(247,161,27,0.3) 30%, rgba(129,140,248,0.28) 62%, rgba(247,161,27,0.65) 100%) border-box; box-shadow: 0 40px 90px rgba(0,0,0,0.6), 0 0 90px rgba(247,161,27,0.1); display: flex; flex-direction: column; gap: 18px; overflow: hidden; } .form-card::before { content: ''; position: absolute; top: -90px; right: -90px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(247,161,27,0.12), transparent 70%); pointer-events: none; } /* Amber "inspection ticket" header band — full-bleed across the card top. */ .form-head { display: flex; align-items: center; gap: 13px; margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 4px; padding: 15px var(--card-pad); background: linear-gradient(135deg, var(--amber) 0%, #e8940f 100%); } .form-head-logo { width: 38px; height: 38px; border-radius: 50%; background: #fff; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px rgba(10,11,38,0.22); } .form-head-logo img { width: 34px; height: 34px; object-fit: contain; } .form-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .form-head-title { font-family: 'Space Grotesk', sans-serif; font-size: 14.5px; font-weight: 800; color: var(--navy-abyss); letter-spacing: 0.02em; text-transform: uppercase; } .form-head-sub { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: rgba(10,11,38,0.78); } .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--navy-abyss); box-shadow: 0 0 0 0 rgba(10,11,38,0.45); animation: pulse-dot 2.2s var(--ease) infinite; flex-shrink: 0; } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(10,11,38,0.45); } 70% { box-shadow: 0 0 0 7px rgba(10,11,38,0); } 100% { box-shadow: 0 0 0 0 rgba(10,11,38,0); } } @media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-field { display: flex; flex-direction: column; gap: 7px; } .form-label { font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.62); transition: color 0.18s var(--ease); } .form-field:focus-within .form-label { color: var(--amber); } .form-input { border: 1.5px solid rgba(255,255,255,0.14); border-radius: var(--radius-sm); padding: 13px 15px; font-size: 15px; color: #fff; caret-color: var(--amber); background: rgba(255,255,255,0.05); font-family: 'Inter', sans-serif; width: 100%; outline: none; min-height: 48px; transition: border-color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease); } .form-input:focus { border-color: var(--amber); background: rgba(255,255,255,0.08); box-shadow: 0 0 0 3px rgba(247,161,27,0.16); } /* Placeholders double as the only visible label on the lead-band form, so they have to clear AA: 0.34 measured 3.04:1 on that surface. */ .form-input::placeholder { color: rgba(255,255,255,0.58); } select.form-input { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F7A11B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } select.form-input option { background: var(--navy-deeper); color: #fff; } select.form-input:invalid { color: rgba(255,255,255,0.58); } .form-submit { background: linear-gradient(135deg, var(--amber) 0%, var(--amber-dark) 100%); color: var(--navy-abyss); font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; padding: 17px; border: none; cursor: pointer; border-radius: var(--radius-sm); width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .form-submit::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); transition: left 0.55s var(--ease); } .form-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(247,161,27,0.45); } .form-submit:hover::after { left: 160%; } .form-submit:hover .btn-arrow { transform: translateX(4px); } .form-consent-wrap { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 18px; display: flex; align-items: flex-start; gap: 12px; } .form-consent-cb { margin-top: 2px; flex-shrink: 0; width: 22px; height: 22px; min-width: 22px; cursor: pointer; accent-color: var(--amber); } .form-consent-text { font-size: 12px; color: rgba(255,255,255,0.52); line-height: 1.75; } .form-consent-text a { color: var(--amber); text-decoration: underline; } .form-error { border-radius: var(--radius-sm); font-size: 13px; padding: 14px 16px; display: none; line-height: 1.6; } .form-error.error-msg { background: rgba(220,38,38,0.14); border: 1px solid rgba(248,113,113,0.4); color: #FCA5A5; } .form-error.notice-msg { background: rgba(247,161,27,0.12); border: 1px solid rgba(247,161,27,0.45); color: #FCD9A0; } /* ============================ FOOTER ============================ */ .footer { background: var(--navy-abyss); padding: clamp(48px, 4vw, 72px) 0 0; border-top: 1px solid var(--line); } .footer-top { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; } .footer-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; } .footer-logo { width: 72px; height: 72px; border-radius: 50%; background: #fff; overflow: hidden; box-shadow: 0 0 0 2px rgba(247,161,27,0.35), 0 8px 24px rgba(0,0,0,0.5); } .footer-logo img { width: 100%; height: 100%; object-fit: contain; } .footer-brand-name { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.01em; } .footer-nap { font-size: 13.5px; color: var(--body); line-height: 1.7; max-width: 440px; } .footer-nap a { color: var(--amber); font-weight: 600; } .footer-cta { margin-top: 4px; } .footer-socials { display: flex; gap: 14px; } .footer-social-link { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--body); border: 1.5px solid var(--line-2); border-radius: 50%; background: var(--surface); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease); } .footer-social-link:hover { color: #fff; border-color: var(--amber); background: rgba(247,161,27,0.1); transform: translateY(-2px); } .footer-social-link svg { width: 20px; height: 20px; } .footer-legal { font-size: 12px; color: var(--body-dim); } .footer-legal a { text-decoration: underline; transition: color 0.2s var(--ease); } .footer-legal a:hover { color: var(--amber); } .footer-divider { height: 1px; background: var(--line); margin: 40px 0 0; } .footer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; flex-wrap: wrap; } .footer-bar-contact { font-size: 12px; color: var(--body-dim); word-break: break-word; } .bp-strip { border-top: 1px solid var(--line); padding: 16px 0 max(16px, env(safe-area-inset-bottom)); display: flex; justify-content: center; } .bp-pill { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; background: var(--surface); border: 1px solid rgba(247,161,27,0.28); border-radius: 100px; padding: 8px 18px; letter-spacing: 0.03em; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); } .bp-pill .bp-brand { color: var(--amber); } .bp-pill:hover { color: #fff; border-color: rgba(247,161,27,0.6); background: rgba(247,161,27,0.07); } .bp-pill svg { width: 13px; height: 13px; color: var(--amber); transition: transform 0.25s var(--ease); } .bp-pill:hover svg { transform: translateX(3px); } /* One consistent focus ring everywhere. Only the carousel and the inputs had a designed one; everything else fell back to the UA default. */ .btn-cta:focus-visible, .btn-ghost:focus-visible, .form-submit:focus-visible, .faq-trigger:focus-visible, .lead2__back:focus-visible, .skip-link:focus-visible, .footer a:focus-visible, .bp-pill:focus-visible, .marquee:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: var(--radius-sm); } .section-cta--on-amber .btn-cta:focus-visible { outline-color: var(--navy-abyss); } /* ============================ RESPONSIVE ============================ */ @media (max-width: 900px) { .feature-icon { width: 42px; height: 42px; } .feature-icon svg { width: 21px; height: 21px; } } @media (max-width: 768px) { .container { padding: 0 18px; } .nav { height: 58px; padding: 0 16px; } .nav-pill { display: none; } .nav-logo { width: 40px; height: 40px; } /* Nav collision gate: shorter CTA label + smaller button so the brand name never slides under the button (real bug caught on iPhone, 2026-07-12). */ .nav .cta-label-full { display: none; } .nav .cta-label-short { display: inline; } .nav .btn-cta { padding: 12px 16px; font-size: 13px; min-height: 44px; } .nav-name { font-size: 14px; } .nav-name-tail { display: none; } .form-row { grid-template-columns: 1fr; } .stats-row { gap: 1px; } .stat-item { padding: 18px 8px; } .hero { min-height: max(580px, 90vh); min-height: max(580px, 90svh); } .hero__inner { padding-bottom: 40px; } .hero__cta { gap: 10px; } .hero__cta .btn-cta, .hero__cta .btn-ghost { width: 100%; } } @media (max-width: 560px) { .step-num { width: 32px; height: 32px; font-size: 13px; } .marquee__item { width: 80vw; } } @media (max-width: 380px) { .nav-name { display: none; } } /* Desktop wheel fix: mandatory x-snap latches diagonal wheel gestures and stalls page scroll while hovering the rail; mouse users get proximity snap, touch keeps mandatory. */ @media (pointer: fine) { .reviews-carousel { scroll-snap-type: x proximity; } } /* ── Hero quick-request form (2 fields over the hero photo) ── */ .hero-form { margin-top: 26px; max-width: 500px; padding: 16px; border-radius: var(--radius); background: rgba(15,16,53,0.62); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); border: 1px solid rgba(247,161,27,0.35); box-shadow: 0 18px 48px rgba(0,0,0,0.42); } .hero-form__row { display: flex; gap: 10px; margin-bottom: 10px; } @media (max-width: 560px) { .hero-form__row { flex-direction: column; } } .hero-form .form-input.is-invalid { border-color: #e2685c; box-shadow: 0 0 0 3px rgba(226,104,92,0.14); } .hero-form__btn { width: 100%; justify-content: center; } .hero-form__status { margin: 9px 0 0; font-size: 13px; color: var(--body-dim); min-height: 1.2em; } .hero-form__status.is-err { color: #f0a89f; } /* ── LEAD FORM BAND (owner 2026-07-13): visible contact form directly below the hero, above the reputation strip. Two-column on desktop, stacked on phone; shows on all sizes. ── */ .leadband { padding: clamp(38px, 5vw, 68px) 0; background: linear-gradient(180deg, var(--navy-deeper) 0%, var(--navy-dark) 100%); position: relative; z-index: 2; } .leadband__inner { display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 44px); align-items: center; } @media (min-width: 900px) { .leadband__inner { grid-template-columns: 1.05fr 0.95fr; } } .leadband__title { font-family: var(--font-display, inherit); font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); line-height: 1.08; color: #fff; margin: 0 0 12px; } .leadband__title em { color: var(--amber); font-style: italic; } .leadband__sub { color: rgba(255,255,255,0.72); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.55; margin: 0 0 16px; max-width: 46ch; } .leadband__proof { color: rgba(255,255,255,0.6); font-size: .92rem; letter-spacing: .01em; } .leadband__proof .s { color: var(--amber); letter-spacing: 1px; } /* the form card sits on the band now (not over the hero photo): solid raised surface */ .leadband__form { margin-top: 0; max-width: 520px; width: 100%; justify-self: stretch; background: rgba(10,11,38,0.72); border: 1px solid rgba(247,161,27,0.4); } @media (min-width: 900px) { .leadband__form { justify-self: end; } } /* ── 2-step lead form (owner 2026-07-13) ── */ .lead2__step[data-step="2"] > .form-input { width: 100%; margin-bottom: 10px; } .lead2__step.is-in { animation: lead2In .34s cubic-bezier(.22,1,.36,1); } @keyframes lead2In { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .lead2__consent { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 12px; } .lead2__consent .form-consent-cb { margin-top: 2px; flex: none; accent-color: var(--amber); width: 22px; height: 22px; min-width: 22px; } .lead2__consent .form-consent-text { font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.55); } .lead2__consent .form-consent-text a { color: rgba(255,255,255,0.78); } .lead2__back { display: block; width: 100%; margin: 6px 0 0; padding: 12px 8px; min-height: 44px; background: none; border: 0; color: var(--body-dim); font: inherit; font-size: 13px; cursor: pointer; } .lead2__back:hover { color: #fff; } .lead2__back:hover { color: #fff; } @media (prefers-reduced-motion: reduce) { .lead2__step.is-in { animation: none; } }