/* ============================================================ ForgeLine homeowner landing — pipeline stylesheet. Moved from public/main/forgeline-home.css (Step 2 of the landing integration) and namespaced under `.fl-landing` so its styles can't collide with the app design system once the page uses the app layout. Global-only here (this file is loaded just on the landing): - @keyframes (names are landing-specific) - html scroll behavior - .reveal-on-scroll (the `.reveal-ready` flag is toggled on ) ============================================================ */ /* ---------- keyframes (global) ---------- */ @keyframes gridDrift { to { background-position: 64px 64px; } } @keyframes sweep { 0% { transform: translateX(-12%); opacity: 0; } 30% { opacity: 0.55; } 70% { opacity: 0.55; } 100% { transform: translateX(12%); opacity: 0; } } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } } @keyframes hero-globe-badge-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(15,23,42,0.34), 0 12px 24px rgba(2,6,23,0.24), 0 0 14px var(--badge-glow, rgba(96,165,250,0.2)); } 50% { box-shadow: 0 0 0 1px rgba(15,23,42,0.34), 0 14px 28px rgba(2,6,23,0.3), 0 0 24px var(--badge-glow, rgba(96,165,250,0.38)); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes qualification-trade-option-in { to { opacity: 1; transform: translateY(0); } } @keyframes fl-breathe { 0%,100% { opacity: .82; filter: brightness(.95); } 50% { opacity: 1; filter: brightness(1.3); } } @keyframes fl-spark { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 12% { left: 100%; opacity: 0; } 100% { left: 100%; opacity: 0; } } @keyframes fl-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* ---------- page scroll behavior ---------- */ html { scroll-behavior: smooth; scroll-padding-top: 84px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- reveal-on-scroll (global: `.reveal-ready` lives on ) ---------- */ .reveal { transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1); } .reveal-ready .reveal:not(.in) { opacity: 0; transform: translateY(26px); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-ready .reveal:not(.in) { opacity: 1 !important; transform: none !important; } } /* ---------- custom overlay scrollbar (global) ---------- Mirrors the app shell scrollbar. Created/driven by the `app-interactions` Stimulus controller, which adds the classes below to / and appends the `.app-scrollbar` overlay to . Kept global (not scoped under .fl-landing) so it matches /partners exactly. */ html.app-overlay-scrollbar-enabled, body.app-overlay-scrollbar-enabled { scrollbar-width: none; -ms-overflow-style: none; } html.app-overlay-scrollbar-enabled::-webkit-scrollbar, body.app-overlay-scrollbar-enabled::-webkit-scrollbar { width: 0; height: 0; } .app-scrollbar { position: fixed; top: 8px; right: 4px; bottom: 8px; width: 14px; z-index: 1500; opacity: 0; pointer-events: none; transition: opacity 180ms ease; } body.has-overlay-scrollbar .app-scrollbar { pointer-events: auto; } .app-scrollbar.is-visible { opacity: 1; } .app-scrollbar__thumb { position: absolute; top: 0; left: 3px; width: 8px; min-height: 48px; border-radius: 999px; background: rgba(15, 23, 42, 0.54); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 2px 8px rgba(15, 23, 42, 0.18); transition: background 160ms ease, box-shadow 160ms ease, transform 40ms linear; cursor: grab; } .app-scrollbar:hover .app-scrollbar__thumb, body.is-scrollbar-dragging .app-scrollbar__thumb { background: rgba(15, 23, 42, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 12px rgba(15, 23, 42, 0.24); } body.is-scrollbar-dragging .app-scrollbar__thumb { cursor: grabbing; } @media (prefers-reduced-motion: reduce) { .app-scrollbar, .app-scrollbar__thumb { transition: none; } } /* region overlay scrollbars (scrollable panels such as the coverage market list) */ [data-overlay-scrollbar] { position: relative; scrollbar-width: none; -ms-overflow-style: none; } [data-overlay-scrollbar]::-webkit-scrollbar { width: 0; height: 0; } .app-scroll-region { position: relative; scrollbar-width: none; -ms-overflow-style: none; } .app-scroll-region::-webkit-scrollbar { width: 0; height: 0; } .app-scroll-region-host { position: relative; } .app-scrollbar--region { position: absolute; top: 8px; right: 4px; bottom: 8px; width: 14px; z-index: 4; pointer-events: none; } .app-scrollbar--region.is-visible { pointer-events: auto; } .app-scrollbar--picker { z-index: 45; } /* ============================================================ Everything else is scoped under `.fl-landing` ============================================================ */ .fl-landing { /* design tokens (scoped so they don't override app tokens) */ --warm-bg: #eef1f8; --warm-bg-deep: #e1e7f4; --warm-border: #dde3f1; --charcoal: #212529; --card-dark: linear-gradient(157deg, #1d2536 0%, #0f1524 100%); --card-dark-bd: rgba(255,255,255,0.08); --line: #e5e7eb; --ink: #0f172a; --ink-body: #334155; --ink-muted: #64748b; --ink-subtle: #94a3b8; --blue: #2563eb; --blue-hover: #1d4ed8; --blue-soft: #eff4ff; --blue-line: #d7e3fb; --green: #16a34a; --green-soft: #ecfdf3; --navy: #0b1220; --navy-2: #111a2e; --shadow-sm: 0 1px 2px rgba(15,23,42,0.06); --shadow-card: 0 10px 30px rgba(15,23,42,0.07); --shadow-lift: 0 18px 44px rgba(15,23,42,0.13); --shadow-blue: 0 12px 26px rgba(37,99,235,0.22); --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; --maxw: 1240px; --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --fl-core: #dbe8ff; --fl-glow: #4f8bff; --fl-deep: #2563eb; /* fonts (was provided by the dropped _ds token bundle; IBM Plex Sans loaded in the landing layout head) */ --font-display: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* marketing accents used by the coverage globe badges */ --home-accent-green: #22c55e; --home-accent-amber: #f59e0b; --home-accent-gold: #fbbf24; --home-accent-violet: #a78bfa; /* base (was the global body{} / element resets) */ box-sizing: border-box; font-family: var(--font-body, system-ui, sans-serif); color: var(--ink-body); background: #fff; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; & *, & *::before, & *::after { box-sizing: border-box; } & * { margin: 0; padding: 0; } & h1, & h2, & h3, & h4, & .display { font-family: var(--font-display, "IBM Plex Sans", system-ui, sans-serif); } & a { color: inherit; text-decoration: none; } & img { max-width: 100%; display: block; } & button { font-family: inherit; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blue); display: inline-flex; align-items: center; gap: 9px; } .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--blue); } .eyebrow.on-dark { color: #7aa6f5; } .eyebrow.on-dark::before { background: #7aa6f5; } .eyebrow.centered { justify-content: center; } .section { padding: 96px 0; position: relative; } .section--warm { background: linear-gradient(180deg, #eef1f8 0%, #f4f6fb 100%); } .section--warm::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 12% 0%, rgba(37,99,235,0.05), transparent 38%), radial-gradient(circle at 92% 100%, rgba(122,166,245,0.06), transparent 40%); } .section--warm > .wrap { position: relative; z-index: 1; } .section-head { max-width: 680px; margin-bottom: 48px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-title { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 700; color: var(--ink); line-height: 1.08; letter-spacing: -0.02em; margin: 16px 0 0; } .section-sub { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-muted); margin-top: 18px; max-width: 560px; } .section-head.center .section-sub { margin-left: auto; margin-right: auto; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0.85rem 1.4rem; border-radius: var(--r-sm); border: 1.5px solid transparent; font-size: 0.95rem; font-weight: 600; line-height: 1; cursor: pointer; transition: transform .16s var(--ease-spring), background .16s ease, border-color .16s ease, box-shadow .16s ease; white-space: nowrap; } .btn i { font-size: 1.05em; } /* primary button — matches the marketing home "Check Market Availability" CTA */ .btn-primary { border: 1px solid rgba(147,197,253,0.6); background: linear-gradient(140deg, rgba(37,99,235,0.95), rgba(29,78,216,0.95)); color: #eff6ff; font-weight: 700; box-shadow: 0 12px 24px rgba(30,64,175,0.36); } .btn-primary:hover { border-color: rgba(191,219,254,0.78); background: linear-gradient(140deg, rgba(59,130,246,0.98), rgba(37,99,235,0.98)); color: #eff6ff; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(30,64,175,0.42); } .btn-primary:active { transform: translateY(0); } .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(147,197,253,0.38), 0 12px 24px rgba(30,64,175,0.36); } .btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn-secondary:hover { border-color: #cbd5e1; transform: translateY(-2px); } .btn-ghost-dark { background: rgba(255,255,255,0.06); color: #e9eefb; border-color: rgba(148,163,184,0.4); backdrop-filter: blur(6px); } .btn-ghost-dark:hover { background: rgba(255,255,255,0.12); border-color: rgba(148,163,184,0.7); transform: translateY(-2px); } .btn-lg { padding: 1rem 1.7rem; font-size: 1rem; } .btn-block { width: 100%; } /* ---------- NAV ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; border-bottom: 1px solid transparent; } .nav__inner { display: flex; align-items: center; gap: 28px; height: 72px; } .nav.scrolled { background: rgba(33,37,41,0.92); backdrop-filter: blur(12px) saturate(1.4); border-bottom-color: rgba(148,163,184,0.22); box-shadow: 0 2px 20px rgba(2,6,23,0.32); } .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); } .brand img { width: 26px; height: 26px; border-radius: 6px; } .brand b { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; color: #eaf0fb; } .nav .nav__links a { color: #c3cee0; } .nav .nav__phone { color: #c3d2ee; } .nav__links { display: flex; gap: 28px; margin-left: 8px; } .nav__links a { font-size: 0.94rem; font-weight: 500; position: relative; transition: color .15s ease; } .nav__links a:hover { color: #fff; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: linear-gradient(90deg, var(--fl-glow, #4f8bff), var(--fl-core, #dbe8ff), var(--fl-glow, #4f8bff)); border-radius: 2px; transform: scaleX(0); transform-origin: left; box-shadow: 0 0 7px rgba(79,139,255,0.85), 0 0 16px rgba(37,99,235,0.5); transition: transform .2s var(--ease-spring); } .nav__links a:hover::after { transform: scaleX(1); } .nav__spacer { flex: 1; } .nav__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.94rem; transition: color .15s; } .nav__phone i { color: var(--blue); } .nav__cta { padding: 0.7rem 1.15rem; } .nav__burger { display: none; background: none; border: 0; cursor: pointer; font-size: 1.5rem; color: #eaf0fb; } /* ---------- HERO ---------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--navy); } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media video { width: 100%; height: 100%; object-fit: cover; } .hero__fallback { position: absolute; inset: 0; background: radial-gradient(circle at 78% 18%, rgba(37,99,235,0.28), transparent 46%), radial-gradient(circle at 12% 88%, rgba(56,98,168,0.22), transparent 50%), linear-gradient(160deg, #0a1426 0%, #0b1220 55%, #0a101d 100%); } .hero__grid { position: absolute; inset: -2px; background-image: linear-gradient(rgba(122,166,245,0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(122,166,245,0.10) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 70% 40%, #000 10%, transparent 72%); -webkit-mask-image: radial-gradient(circle at 70% 40%, #000 10%, transparent 72%); animation: gridDrift 26s linear infinite; } .hero__sweep { position: absolute; inset: 0; overflow: hidden; } .hero__sweep span { position: absolute; height: 1px; left: -20%; right: -20%; background: linear-gradient(90deg, transparent, rgba(122,166,245,0.5), transparent); opacity: 0.5; animation: sweep 9s var(--ease-spring) infinite; } .hero__sweep span:nth-child(1) { top: 28%; animation-delay: 0s; } .hero__sweep span:nth-child(2) { top: 52%; animation-delay: 3s; } .hero__sweep span:nth-child(3) { top: 74%; animation-delay: 6s; } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(95deg, rgba(7,12,22,0.92) 0%, rgba(7,12,22,0.74) 38%, rgba(7,12,22,0.30) 70%, rgba(7,12,22,0.5) 100%); } .hero__inner { position: relative; z-index: 2; width: 100%; padding-top: 96px; padding-bottom: 64px; } .hero__col { max-width: 660px; } .hero h1 { color: #f8fbff; font-size: clamp(2.7rem, 5.4vw, 4.2rem); font-weight: 700; line-height: 1.03; letter-spacing: -0.03em; margin: 22px 0 0; text-wrap: balance; } .hero h1 .accent { color: #7aa6f5; } .hero__lead { color: #c6d4ec; font-size: 1.18rem; line-height: 1.6; margin-top: 18px; max-width: 540px; } .hero__actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .hero__trust { display: flex; align-items: center; gap: 22px; margin-top: 34px; flex-wrap: wrap; } .hero__check { display: flex; gap: 12px; margin-top: 30px; max-width: 560px; flex-wrap: wrap; } .hero__checkfield { position: relative; flex: 1 1 240px; display: flex; align-items: center; } .hero__checkfield i { position: absolute; left: 16px; color: #7aa6f5; font-size: 1.12rem; pointer-events: none; } .hero__checkfield input { width: 100%; padding: 1rem 1.1rem 1rem 44px; border-radius: var(--r-sm); border: 1.5px solid rgba(148,163,184,0.32); background: rgba(8,14,26,0.55); color: #f8fbff; font-size: 1rem; font-family: inherit; outline: none; backdrop-filter: blur(6px); transition: border-color .15s, box-shadow .15s, background .15s; } .hero__checkfield input::placeholder { color: #93a6c4; } .hero__checkfield input:focus { border-color: var(--fl-glow, #4f8bff); background: rgba(8,14,26,0.72); box-shadow: 0 0 0 3px rgba(79,139,255,0.22), 0 0 18px rgba(37,99,235,0.35); } .hero__check .btn { white-space: nowrap; } .hero__checkhint { margin-top: 14px; font-size: 0.9rem; color: #aebbd4; } .hero__checkhint a { color: #7aa6f5; font-weight: 600; } .hero__checkhint a:hover { color: #a9c6ff; text-decoration: underline; } .hero__trust .item { display: inline-flex; align-items: center; gap: 9px; color: #d3deef; font-size: 0.92rem; } .hero__trust .item i { color: #5ee08e; font-size: 1.05rem; } .hero__trust .divider { width: 1px; height: 18px; background: rgba(255,255,255,0.16); } .hero__scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; color: #9fb2d4; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; } .hero__scroll i { font-size: 1.1rem; animation: bob 1.8s ease-in-out infinite; } .hero__videoslot { position: absolute; right: 22px; top: 88px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: var(--r-pill); background: rgba(8,14,26,0.62); border: 1px dashed rgba(122,166,245,0.55); color: #c6d4ec; font-size: 0.76rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); transition: background .16s, border-color .16s; } .hero__videoslot:hover { background: rgba(20,32,56,0.82); border-color: rgba(122,166,245,0.9); } .hero__videoslot i { color: #7aa6f5; } .hero.dragover .hero__videoslot { border-color: #7aa6f5; background: rgba(37,99,235,0.3); } .hero.has-video .hero__fallback { display: none; } /* ---------- STATS STRIP ---------- */ .stats { background: var(--navy-2); position: relative; padding: 0; } .stats__inner { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,0.06); } .stat { padding: 40px 28px; text-align: center; border-right: 1px solid rgba(255,255,255,0.07); position: relative; } .stat:last-child { border-right: 0; } .stat__val { font-family: var(--font-display); font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 700; color: #f8fbff; letter-spacing: -0.03em; line-height: 1; } .stat__val .suffix { color: #7aa6f5; } .stat__lbl { margin-top: 10px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; } /* ---------- SERVICES — inline cards (inclusions always visible) ---------- */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .svc { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--card-dark); border: 1px solid var(--card-dark-bd); border-radius: var(--r-lg); padding: 28px; box-shadow: 0 16px 34px rgba(2,6,23,0.22); transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-spring), border-color .3s ease; } .svc:hover { transform: translateY(-4px); border-color: rgba(122,166,245,0.42); box-shadow: 0 24px 46px rgba(2,6,23,0.36); } /* soft blue arc glow behind the icon, brightening on hover */ .svc::before { content: ""; position: absolute; top: -50px; left: -40px; width: 200px; height: 200px; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--ic, #2563eb) 34%, transparent), transparent 70%); opacity: .42; transition: opacity .35s ease; } .svc:hover::before { opacity: .9; } /* top hairline */ .svc::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); } .svc:nth-child(1) { --ic: #2563eb; } .svc:nth-child(2) { --ic: #a78bfa; } .svc:nth-child(3) { --ic: #22c55e; } .svc:nth-child(4) { --ic: #fbbf24; } .svc:nth-child(5) { --ic: #38bdf8; } .svc:nth-child(6) { --ic: #f59e0b; } .svc__icon { position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 1.55rem; margin-bottom: 18px; background: color-mix(in srgb, var(--ic, #2563eb) 16%, transparent); color: var(--ic, #2563eb); border: 1px solid color-mix(in srgb, var(--ic, #2563eb) 34%, transparent); } .svc h3 { position: relative; z-index: 1; align-self: flex-start; font-size: 1.3rem; font-weight: 700; color: #f4f7fc; letter-spacing: -0.02em; } /* forged glowing line draws under the title on hover */ .svc h3::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--fl-glow), var(--fl-core), var(--fl-glow)); box-shadow: 0 0 7px rgba(79,139,255,0.7), 0 0 16px rgba(37,99,235,0.45); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-spring); } .svc:hover h3::after, .svc:focus-within h3::after { transform: scaleX(1); } .svc__lead { position: relative; z-index: 1; color: #9fb0cc; font-size: 0.95rem; line-height: 1.55; margin-top: 12px; } .svc__list { position: relative; z-index: 1; list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 18px; flex: 1; } .svc__list li { display: flex; gap: 9px; font-size: 0.9rem; color: #c6d4ec; line-height: 1.4; } .svc__list li i { color: #5ee08e; flex-shrink: 0; margin-top: 2px; } .svc .btn { position: relative; z-index: 1; margin-top: 22px; } /* ---------- GALLERY (pills styled like the marketing market tabs) ---------- */ .gallery__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; } .fpill { display: inline-flex; align-items: center; padding: 9px 20px; border-radius: 13px; border: 1px solid rgba(148,163,184,0.28); background: linear-gradient(165deg, rgba(15,23,42,0.88) 0%, rgba(17,24,39,0.92) 55%, rgba(8,15,29,0.96) 100%); color: #cdd9ee; font-size: 0.86rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; } .fpill:hover { border-color: rgba(148,163,184,0.5); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(2,6,23,0.32); } .fpill.active { border-color: rgba(125,211,252,0.6); color: #7dd3fc; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(56,189,248,0.16), 0 8px 20px rgba(2,6,23,0.32); transform: translateY(-1px); } .gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; grid-auto-flow: dense; } .gcell { border-radius: var(--r-md); overflow: hidden; background: var(--warm-bg); transition: opacity .35s ease, transform .35s ease; } .gcell image-slot { width: 100%; height: 100%; } .gcell.span-6 { grid-column: span 6; } .gcell.span-4 { grid-column: span 4; } .gcell.span-8 { grid-column: span 8; } .gcell.tall { aspect-ratio: 4/5; } .gcell.wide { aspect-ratio: 16/10; } .gcell.sq { aspect-ratio: 1/1; } .gcell.hide { display: none; } /* ---------- COVERAGE — live globe + market list ---------- */ .coverage { display: grid; grid-template-columns: 1fr 0.92fr; gap: 48px; align-items: center; } /* Coverage status callout — populated by the hero "check your city" search */ .cov-result { margin: 22px 0 4px; } .cov-result:empty { display: none; margin: 0; } .cov-result__card { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--blue-line); background: var(--blue-soft); box-shadow: var(--shadow-sm); animation: fadeInUp .45s var(--ease-spring) both; } .cov-result__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; background: #fff; color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-line); } .cov-result__text { font-size: 0.98rem; line-height: 1.45; color: var(--ink); } .cov-result__text b { font-weight: 700; } .cov-result--active .cov-result__card { border-color: #bbf7d0; background: var(--green-soft); } .cov-result--active .cov-result__icon { color: var(--green); box-shadow: inset 0 0 0 1px #bbf7d0; } .cov-result--soon .cov-result__card { border-color: #fde68a; background: #fffbeb; } .cov-result--soon .cov-result__icon { color: #b45309; box-shadow: inset 0 0 0 1px #fde68a; } /* markets grouped by state (state tabs reuse the markets-tabs controller) */ .mk-tabs { margin-top: 22px; } .mk-tabbar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; } .mk-tab { padding: 7px 14px; border-radius: 10px; border: 1px solid rgba(148,163,184,0.28); background: linear-gradient(165deg, rgba(15,23,42,0.88), rgba(8,15,29,0.96)); color: #cdd9ee; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; } .mk-tab:hover { border-color: rgba(148,163,184,0.5); color: #fff; transform: translateY(-1px); } .mk-tab[aria-selected="true"] { border-color: rgba(125,211,252,0.6); color: #7dd3fc; box-shadow: 0 0 0 1px rgba(56,189,248,0.16), 0 8px 20px rgba(2,6,23,0.32); } .mk-panel[aria-hidden="true"] { display: none; } .region-list { display: flex; flex-direction: column; gap: 9px; height: 320px; overflow-y: auto; } /* reserve a right gutter only when the overlay scrollbar is actually present, so rows stay full-width when the list doesn't overflow (track is right:4px + 14px wide) */ .region-list.has-overlay-scrollbar { padding-right: 18px; } .region-list + .app-scrollbar--region { right: -8px; } .region { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease; } .region:hover { border-color: var(--blue-line); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .region:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.16); } .region.is-pinpoint { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px rgba(37,99,235,0.16); } .region__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .region__dot.live { background: var(--home-accent-green, #22c55e); box-shadow: 0 0 0 4px var(--green-soft); } .region__dot.soon { background: var(--home-accent-amber, #f59e0b); box-shadow: 0 0 0 4px #fef3c7; } .region__dot.coming { background: var(--home-accent-violet, #a78bfa); box-shadow: 0 0 0 4px rgba(167,139,250,0.16); } .region__name { font-weight: 600; color: var(--ink); flex: 1; } .region__status { font-size: 0.8rem; font-weight: 600; color: var(--ink-muted); } /* live coverage globe (ported from the marketing hero) */ .coverage-globe { position: relative; } .hero-globe-stage { position: relative; width: 100%; aspect-ratio: 1/1; display: grid; place-items: center; overflow: visible; isolation: isolate; } .hero-globe-stage::before { content: ""; position: absolute; inset: 8%; z-index: 0; border-radius: 999px; background: radial-gradient(circle at 54% 44%, rgba(30,41,59,0.34), transparent 48%), radial-gradient(circle at 34% 62%, rgba(125,211,252,0.08), transparent 42%); filter: blur(14px); opacity: 0.95; pointer-events: none; } .hero-globe-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; border-radius: 50%; filter: saturate(1.08) contrast(1.05); } .hero-globe-badges { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 50%; overflow: hidden; } .hero-globe-badge { position: absolute; width: 0; height: 0; border: 0; background: transparent; color: var(--badge-color, #bfdbfe); padding: 0; opacity: 0; pointer-events: none; transform: scale(0.94); transform-origin: 0 0; transition: opacity 180ms ease, transform 180ms ease; white-space: nowrap; } .hero-globe-badge.is-on-globe { opacity: 1; transform: scale(1); } .hero-globe-badge__leader { position: absolute; left: 0; top: -48px; width: 2px; height: 46px; transform: translateX(-50%); transform-origin: bottom center; background: linear-gradient(0deg, var(--badge-color, #bfdbfe), rgba(226,232,240,0.56), rgba(226,232,240,0.08)); border-radius: 999px; box-shadow: 0 0 8px var(--badge-glow, rgba(96,165,250,0.35)), 0 0 18px var(--badge-glow, rgba(96,165,250,0.22)); opacity: 0.62; transition: opacity 180ms ease; } .hero-globe-badge__panel { position: absolute; left: 0; top: -77px; min-width: 78px; padding: 6px 8px; border: 1px solid rgba(148,163,184,0.34); border-radius: 8px; background: rgba(15,23,42,0.88); box-shadow: 0 0 0 1px rgba(15,23,42,0.34), 0 12px 24px rgba(2,6,23,0.28), 0 0 14px var(--badge-glow, rgba(96,165,250,0.18)); opacity: 0; transform: translate(-50%, 4px) scale(0.96); transform-origin: center bottom; transition: opacity 180ms ease, transform 180ms ease; } .hero-globe-badge[data-callout-side="left"] .hero-globe-badge__panel { left: 0; right: auto; } .hero-globe-badge__city, .hero-globe-badge__status { display: block; line-height: 1; } .hero-globe-badge__city { color: #f8fafc; font-size: 10.5px; font-weight: 800; } .hero-globe-badge__status { margin-top: 4px; color: var(--badge-color, #bfdbfe); font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.94; } .hero-globe-badge.is-visible { pointer-events: auto; } .hero-globe-badge.is-visible .hero-globe-badge__leader { opacity: 0.96; } .hero-globe-badge.is-visible .hero-globe-badge__panel { opacity: 1; transform: translate(-50%, 0) scale(1); } .hero-globe-badge.is-featured .hero-globe-badge__panel { animation: hero-globe-badge-pulse 1.8s ease-in-out infinite; } .hero-globe-badge--live { --badge-color: var(--home-accent-green); --badge-glow: rgba(34,197,94,0.28); } .hero-globe-badge--amber { --badge-color: var(--home-accent-amber); --badge-glow: rgba(245,158,11,0.3); } .hero-globe-badge--gold { --badge-color: var(--home-accent-gold); --badge-glow: rgba(251,191,36,0.3); } .hero-globe-badge--violet { --badge-color: var(--home-accent-violet); --badge-glow: rgba(167,139,250,0.3); } .hero-globe-badge--blue { --badge-color: #60a5fa; --badge-glow: rgba(96,165,250,0.3); } /* ---------- INTAKE / QUOTE ---------- */ .intake { position: relative; background: #eef3fb; overflow: hidden; } .intake::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(620px 240px at 10% -14%, rgba(147,197,253,0.18), transparent 60%), radial-gradient(560px 220px at 90% -18%, rgba(56,189,248,0.11), transparent 58%); } .intake__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 640px); justify-content: center; } .form-steps { display: flex; gap: 8px; margin-bottom: 26px; padding: 0 2px; } .form-steps .step { flex: 1; height: 4px; border-radius: 4px; background: var(--warm-bg-deep); overflow: hidden; } .form-steps .step.done { background: var(--blue); } .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .fg { min-width: 0; } .fg.full { grid-column: 1 / -1; } /* floating-label fields — mirrors the /partners qualification form */ .form-floating { position: relative; } .form-floating > .form-control, .form-floating > .form-select { width: 100%; height: calc(3.5rem + 2px); min-height: calc(3.5rem + 2px); padding: 1rem 0.95rem; border: 1px solid rgba(148,163,184,0.44); border-radius: 12px; background: rgba(15,23,42,0.5); color: #f4f7fc; font-size: 0.96rem; font-family: inherit; line-height: 1.25; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; } .form-floating > .form-select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-top: 1.625rem; padding-bottom: 0.5rem; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23cbd5e1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px; } .form-floating > .form-select option { color: #0f172a; } .form-floating > textarea.form-control { height: auto; min-height: 8rem; padding-top: 1.625rem; resize: vertical; } .form-floating > .form-control::placeholder { color: transparent; } .form-floating > .form-control:focus, .form-floating > .form-select:focus { border-color: rgba(125,211,252,0.78); background: rgba(15,23,42,0.62); color: #fff; box-shadow: 0 0 0 3px rgba(56,189,248,0.2); } .form-floating > label { position: absolute; top: 0; left: 0; height: 100%; max-width: 100%; padding: 1rem 0.95rem; color: #9fb0cc; font-size: 0.96rem; font-weight: 500; line-height: 1.25; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: 0 0; transition: opacity .12s ease, transform .12s ease, color .12s ease; } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { opacity: 0.85; color: #cdd9ee; transform: scale(0.82) translateY(-0.62rem) translateX(0.08rem); } .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) { padding-top: 1.625rem; padding-bottom: 0.5rem; } .form-foot { display: flex; align-items: center; margin-top: 18px; } .form-foot .btn { width: 100%; min-height: 54px; border-radius: 12px; } /* custom dropdown — ported from the /partners qualification trade-picker (driven by qualification_prefill.js via the data-trade-picker* hooks) */ .qualification-trade-picker { position: relative; } .qualification-trade-picker__button { position: relative; display: grid; align-content: center; gap: 2px; width: 100%; min-height: calc(3.5rem + 2px); padding: 0.75rem 3rem 0.6rem 0.95rem; border: 1px solid rgba(148, 163, 184, 0.44); border-radius: 12px; background: rgba(15, 23, 42, 0.5); color: #f8fbff; text-align: left; box-shadow: none; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; } .qualification-trade-picker__button:hover { border-color: rgba(147, 197, 253, 0.62); background: rgba(15, 23, 42, 0.58); } .qualification-trade-picker__button:focus-visible, .qualification-trade-picker.is-open .qualification-trade-picker__button { outline: none; border-color: rgba(125, 211, 252, 0.78); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2); background: rgba(15, 23, 42, 0.62); } .qualification-trade-picker__hint { display: block; order: -1; color: #9fb4d3; font-size: 12px; font-weight: 500; line-height: 1.2; } .qualification-trade-picker__label { display: block; color: #9fb0cc; font-size: 0.96rem; font-weight: 500; line-height: 1.25; } .qualification-trade-picker__button.has-value .qualification-trade-picker__label { color: #f8fbff; } .qualification-trade-picker__chevron { position: absolute; top: 50%; right: 1.1rem; width: 9px; height: 9px; border-right: 2px solid #cbd5e1; border-bottom: 2px solid #cbd5e1; transform: translateY(-62%) rotate(45deg); transition: transform 180ms ease; } .qualification-trade-picker.is-open .qualification-trade-picker__chevron { transform: translateY(-28%) rotate(225deg); } .qualification-trade-picker__list { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; display: grid; gap: 4px; max-height: 280px; overflow-y: auto; padding: 8px; border: 1px solid rgba(147, 197, 253, 0.45); border-radius: 12px; background: #0f172a; box-shadow: 0 18px 38px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(0.985); transform-origin: top center; transition: opacity 150ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 180ms; } .qualification-trade-picker.is-open .qualification-trade-picker__list { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; } .qualification-trade-picker__list.has-overlay-scrollbar { padding-right: 18px; } .qualification-trade-picker__option { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #dbeafe; font-size: 14px; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; opacity: 0; transform: translateY(-4px); transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } .qualification-trade-picker.is-open .qualification-trade-picker__option { animation: qualification-trade-option-in 170ms ease both; } .qualification-trade-picker__option:hover, .qualification-trade-picker__option:focus-visible { outline: none; border-color: rgba(147, 197, 253, 0.34); background: rgba(37, 99, 235, 0.2); color: #f8fbff; } .qualification-trade-picker__option.is-selected { border-color: rgba(147, 197, 253, 0.52); background: rgba(37, 99, 235, 0.28); color: #eff6ff; } .qualification-trade-picker__option.is-selected::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #93c5fd; border-bottom: 2px solid #93c5fd; transform: rotate(-45deg) translateY(-1px); flex-shrink: 0; margin-left: 12px; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(1) { animation-delay: 12ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(2) { animation-delay: 24ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(3) { animation-delay: 36ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(4) { animation-delay: 48ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(5) { animation-delay: 60ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(6) { animation-delay: 72ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(7) { animation-delay: 84ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(8) { animation-delay: 96ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(n+9) { animation-delay: 108ms; } @media (prefers-reduced-motion: reduce) { .qualification-trade-picker__button, .qualification-trade-picker__chevron, .qualification-trade-picker__list, .qualification-trade-picker__option { animation: none !important; transition: none !important; } .qualification-trade-picker.is-open .qualification-trade-picker__option { opacity: 1; transform: none; } } .form-success { text-align: center; padding: 30px 10px; display: none; } .form-success.show { display: block; animation: fadeInUp .4s ease; } .form-success .check { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-size: 2rem; } .form-success h3 { font-size: 1.5rem; color: var(--ink); font-weight: 700; } .form-success p { color: var(--ink-muted); margin-top: 10px; } /* ---------- QUOTE PANELS (mirrors marketing "Apply for Your City") ---------- */ .qpanel { position: relative; border: 1px solid rgba(148,163,184,0.32); border-radius: var(--r-lg); background: linear-gradient(165deg, rgba(15,23,42,0.92) 0%, rgba(17,24,39,0.95) 55%, rgba(8,15,29,0.97) 100%); box-shadow: 0 18px 38px rgba(2,6,23,0.34); padding: 32px; } .qpanel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(125,211,252,0.18); pointer-events: none; } .qpanel--form .form-steps .step { background: rgba(148,163,184,0.22); } .qpanel--form .form-steps .step.done { background: linear-gradient(90deg, #3b82f6, #60a5fa); box-shadow: 0 0 10px rgba(59,130,246,0.5); } .qpanel--form .form-success h3 { color: #f4f7fc; } .qpanel--form .form-success p { color: #9fb2d4; } .qpanel--form .form-errors { color: #fca5a5; font-size: 0.85rem; line-height: 1.45; margin-bottom: 14px; } /* ---------- VISUALIZER — "Watch your space transform" ---------- */ .fx { max-width: 1040px; margin: 0 auto; } .fx__tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; } /* room toggle — matches the gallery filter pills (dark navy + blue active highlight) */ .fx__tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 13px; border: 1px solid rgba(148,163,184,0.28); background: linear-gradient(165deg, rgba(15,23,42,0.88) 0%, rgba(17,24,39,0.92) 55%, rgba(8,15,29,0.96) 100%); color: #cdd9ee; font-size: 0.9rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; } .fx__tab i { font-size: 1rem; } .fx__tab:hover { border-color: rgba(148,163,184,0.5); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(2,6,23,0.32); } .fx__tab.active { border-color: rgba(125,211,252,0.6); color: #7dd3fc; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(56,189,248,0.16), 0 8px 20px rgba(2,6,23,0.32); transform: translateY(-1px); } .fx__stage { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lift); border: 1px solid var(--line); background: var(--navy); cursor: ew-resize; user-select: none; touch-action: none; } .fx__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; } .fx__fallback { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; color: #5b6b86; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(160deg, #0a1426, #0b1220); } .fx__tag { position: absolute; bottom: 16px; z-index: 3; padding: 6px 14px; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(8,14,26,0.78); color: #fff; backdrop-filter: blur(4px); pointer-events: none; } .fx__tag--before { left: 16px; } .fx__tag--after { right: 16px; background: var(--blue); } .fx__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; z-index: 4; pointer-events: none; } .fx__grip { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(79,139,255,0.35), 0 10px 26px rgba(2,6,23,0.4), 0 0 22px rgba(79,139,255,0.6); display: grid; place-items: center; color: var(--blue); font-size: 1.15rem; } .fx__grip i { transform: rotate(90deg); } .fx__hint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-pill); background: rgba(8,14,26,0.6); color: #cfe0ff; font-size: 0.78rem; font-weight: 600; backdrop-filter: blur(6px); transition: opacity .35s ease; } .fx.is-touched .fx__hint { opacity: 0; } .fx__caption { text-align: center; margin-top: 20px; color: var(--ink-muted); font-size: 0.98rem; } .fx__gallery { max-width: 1040px; margin: 56px auto 0; } /* ---------- FOOTER ---------- */ .footer { background: #1a1e24; color: #9fb2d4; padding: 64px 0 32px; } .footer__top { display: grid; grid-template-columns: minmax(280px, 1.6fr) minmax(160px, 0.8fr) minmax(180px, 0.9fr); gap: 56px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer__brand b { color: #fff; font-family: var(--font-display); font-size: 1.15rem; } .footer__brand p { margin-top: 16px; font-size: 0.94rem; line-height: 1.7; max-width: 420px; color: #b9c9e6; } .footer__brand .brand { margin-bottom: 0; } .footer__brand .brand b { color: #fff; } .footer h5 { color: #e9eefb; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } .footer ul a { font-size: 0.9rem; color: #b7c7e4; transition: color .15s; } .footer ul a:hover { color: #fff; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 0.84rem; flex-wrap: wrap; gap: 12px; } .footer__legal { display: inline-flex; align-items: center; gap: 18px; } .footer__legal a { color: #b7c7e4; transition: color .15s; } .footer__legal a:hover { color: #fff; } /* ---------- FORGELINE forged glowing line (hero ignite + dividers + wordmark) ---------- */ .forge-line { position: relative; display: block; width: 100%; height: 2px; } .forge-line::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, transparent 0%, var(--fl-glow) 16%, var(--fl-core) 50%, var(--fl-glow) 84%, transparent 100%); box-shadow: 0 0 7px rgba(79,139,255,0.70), 0 0 20px rgba(37,99,235,0.45); animation: fl-breathe 4.6s ease-in-out infinite; } .forge-line__spark { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0%, var(--fl-core) 34%, var(--fl-glow) 68%, transparent 72%); box-shadow: 0 0 10px 3px rgba(120,170,255,0.9), 0 0 26px 9px rgba(37,99,235,0.55); animation: fl-spark 9s ease-in-out infinite; } .hero__ignite { position: relative; z-index: 2; width: clamp(220px, 40%, 420px); margin: 20px 0 0; } .hero__ignite .forge-line::before { animation: fl-draw 1.05s var(--ease-spring) .35s both, fl-breathe 4.6s ease-in-out 1.6s infinite; } .hero__ignite .forge-line__spark { animation: fl-spark 9s ease-in-out .35s infinite; } /* ---------- mobile nav drawer ---------- */ .mnav { position: fixed; inset: 0; z-index: 200; background: rgba(8,14,26,0.96); backdrop-filter: blur(8px); display: none; flex-direction: column; padding: 28px 24px; } .mnav.open { display: flex; animation: fadeInUp .26s ease; } .mnav__close { align-self: flex-end; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; } .mnav a { color: #e9eefb; font-size: 1.5rem; font-weight: 600; font-family: var(--font-display); padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .mnav .btn { margin-top: 24px; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .coverage, .intake__grid { grid-template-columns: 1fr; } .coverage__panel { order: 2; } .coverage-globe { max-width: 460px; margin: 0 auto; } } @media (max-width: 760px) { .wrap { padding: 0 20px; } .section { padding: 68px 0; } .nav__links, .nav__phone { display: none; } .nav__burger { display: block; } .nav__spacer { flex: 1; } .stats__inner { grid-template-columns: repeat(2, 1fr); } .stat { border-bottom: 1px solid rgba(255,255,255,0.07); } .stat:nth-child(even) { border-right: 0; } .services-grid { grid-template-columns: 1fr; } .qpanel { padding: 24px; } .fgrid { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .gcell.span-6, .gcell.span-4, .gcell.span-8 { grid-column: span 1; } .footer__top { grid-template-columns: 1fr; gap: 30px; } .hero__videoslot { top: 76px; right: 16px; } .hero__check { flex-direction: column; } .hero__check .btn, .hero__checkfield { width: 100%; } } @media (prefers-reduced-motion: reduce) { & * { animation: none !important; } .forge-line::before, .hero__ignite .forge-line::before { clip-path: none !important; } .forge-line__spark { display: none !important; } } }