/* ========================================================================== LIQUID GLASS v2 — LANDING PAGE DESIGN SYSTEM (business-agnostic) Apple Liquid Glass aesthetic: deeply frosted translucent panels over a soft aurora-mesh backdrop, specular rim highlights, glossy pill controls, large continuous radii, system (SF) typography. THEMING: edit the :root tokens only. The whole page recolors from --brand-mid / --accent-a / --accent-b / --accent-glow and the three --aurora-* washes. Nothing below the token block needs touching. ACCESSIBILITY GUARDRAILS • Any glass surface carrying body text uses --glass-strong (≥0.80 white fill) so WCAG AA contrast holds over the busy backdrop. Decorative glass may be lighter — never put body copy on light chips. • Real backdrop blur only where it is perceptible (header pill, hero panels, light cards, sticky bar, lightbox). Near-opaque dark bands and tiny chips use plain fills — same look, far fewer GPU layers. • @supports fallback for browsers without backdrop-filter; print styles; forced-colors support; prefers-reduced-motion and prefers-reduced-transparency both honored. INSERTION POINTS: every [data-slot] element is an injection container — the hosting app replaces ONLY its children. Styling for injected form fields is provided via [data-slot="lead-form"] descendant rules, so the live form inherits the design with no classes required. Class "slots-live" on hides the purple preview tags. SECTIONS: styles are grouped per page section (banner comments). Leaving the CSS of a deleted HTML section in place is harmless. ========================================================================== */ /* ---------- Design tokens ---------- */ :root { /* ====================================================================== SHARED THEME PALETTE — single source of truth. Every lime accent and every page/band background below derives from these raw ramps. Components must never hardcode a hex; use the semantic tokens instead. ====================================================================== */ /* Lime ramp (raw) */ --lime-100: #f4f7ea; /* palest lime wash */ --lime-200: #e6f0bd; --lime-300: #dbe9a6; /* lime tint for text/icons on dark bands */ --lime-400: #d8e783; --lime-500: #e3ff57; /* electric lime — primary accent */ --lime-600: #cbf133; /* electric lime, deeper edge */ --lime-700: #a9cf1f; --lime-800: #4f6d10; /* AA-safe lime on white */ --lime-950: #171d05; /* ink on lime surfaces */ /* Neutral ramp (raw) */ --neutral-0: #ffffff; --neutral-50: #fbfcfb; --neutral-100: #f4f5f0; --neutral-150: #eef0e8; --neutral-200: #e9ece2; --neutral-600: #4c5751; --neutral-800: #1c2523; --neutral-900: #14170e; --neutral-950: #111408; /* --- Semantic accent tokens --- */ --heading: var(--neutral-900); /* headings on light */ --brand: var(--neutral-950); /* deep ink: reserved moments */ --brand-mid: var(--lime-800); /* icons, links, highlights (AA on white) */ --accent-a: var(--lime-500); /* CTA gradient start */ --accent-b: var(--lime-600); /* CTA gradient end */ --accent-ink: var(--lime-950); /* text/icon color on lime surfaces */ --accent-glow: rgba(203, 241, 51, 0.38); --cta-green-start: #36bd79; --cta-green-mid: #17825a; --cta-green-end: #0b4530; --accent-on-dark: var(--lime-400); /* lime text/icons on dark bands */ --accent-on-dark-soft: var(--lime-300); /* secondary lime on dark bands */ --accent-pale: var(--lime-100); /* lime wash text on dark bands */ --accent-chip-bg: var(--lime-200); /* pale lime chips on light */ /* --- Semantic surfaces --- */ --tint: var(--neutral-100); /* neutral page base */ --surface-light-top: var(--neutral-50); /* light band gradient start */ --surface-light-bot: var(--neutral-150);/* light band gradient end */ --surface-tint-top: var(--neutral-0); /* tinted band gradient start */ --surface-tint-bot: var(--neutral-200); /* tinted band gradient end */ /* Aurora mesh washes — strong enough for the glass blur to visibly refract, still composited to pale neutral washes over the light base */ --aurora-1: rgba(215, 248, 105, 0.44); --aurora-2: rgba(140, 152, 118, 0.40); --aurora-3: rgba(230, 250, 160, 0.42); /* Ink (--muted holds ≥4.5:1 even over the strongest aurora wash) */ --ink: #1c2523; --muted: #4c5751; --on-dark: #f3f6f4; --on-dark-muted: #bcc7c1; /* Glass surfaces */ --glass: rgba(255, 255, 255, 0.52); /* decorative / chips */ --glass-strong: rgba(255, 255, 255, 0.82); /* text-bearing cards */ --glass-border: rgba(22, 32, 28, 0.10); --glass-blur: 24px; --glass-dark: rgba(21, 27, 25, 0.90); /* neutral charcoal band */ --glass-dark-border: rgba(255, 255, 255, 0.16); --hero-panel: rgba(14, 20, 18, 0.80); /* dark glass over the photo — ≥0.80 keeps body text AA-readable over bright photos */ /* Specular rim: top highlight + faint inner frost */ --specular: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(255, 255, 255, 0.28); --specular-dark: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.05); /* Feedback */ --success: #127a4e; --error: #bb3a2b; --star: #7a4300; /* Shape & elevation */ --radius-xl: 30px; --radius-card: 22px; --radius-btn: 999px; --shadow-soft: 0 4px 16px rgba(12, 42, 32, 0.07), 0 14px 44px rgba(12, 42, 32, 0.10); --shadow-lifted: 0 10px 30px rgba(12, 42, 32, 0.15), 0 26px 72px rgba(12, 42, 32, 0.18); /* Type — system stack renders SF Pro on Apple devices */ --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Layout */ --container: 73rem; --section-gap: clamp(3.5rem, 6vw, 5.75rem); --header-clear: 94px; /* fixed-header clearance for anchor jumps */ --hero-pad-b: 4.5rem; /* hero bottom padding — single source of truth */ --hero-form-gap: 1.25rem; /* guaranteed beat between hero panel and form card */ } /* Cheaper blur on small screens — imperceptible at 375px, kinder to GPUs */ @media (max-width: 720px) { :root { --glass-blur: 14px; } } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-clear) + 0.75rem); scroll-padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); } body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background-color: var(--tint); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } /* Aurora mesh: fixed, behind everything; glass panels refract it */ .aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(44rem 32rem at 12% 6%, var(--aurora-1), transparent 65%), radial-gradient(40rem 30rem at 88% 14%, var(--aurora-2), transparent 65%), radial-gradient(46rem 36rem at 20% 88%, var(--aurora-3), transparent 65%), radial-gradient(38rem 30rem at 78% 70%, var(--aurora-1), transparent 65%), linear-gradient(180deg, var(--surface-tint-top) 0%, var(--tint) 48%, var(--surface-tint-bot) 100%); } img, svg, video { max-width: 100%; height: auto; display: block; } /* wrappers are layout-transparent: sizing rules on the inner behave exactly as if it were a direct child */ picture { display: contents; } h1, h2, h3, h4 { line-height: 1.08; margin: 0 0 0.6em; color: var(--heading); font-weight: 800; letter-spacing: -0.022em; text-wrap: balance; } h1 { font-size: clamp(2.25rem, 5.4vw, 4rem); } h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 760; } h3 { font-size: 1.25rem; letter-spacing: -0.008em; } h3, h4 { font-weight: 650; } p { margin: 0 0 1em; max-width: 65ch; } a { color: var(--brand-mid); } :focus-visible { outline: 3px solid var(--brand-mid); outline-offset: 2px; border-radius: 6px; } /* Dark surfaces: the brand-green ring is invisible on near-black glass */ .glass-dark :focus-visible, .hero-copy-panel :focus-visible { outline-color: #fff; } .container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } /* One shared vertical beat between sections */ section, .cta-strip { padding-block: 0 var(--section-gap); } .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); } .section-head.centered { margin-inline: auto; text-align: center; } .section-head.centered p { margin-inline: auto; } .section-head p { color: var(--muted); font-size: 1.1rem; } .kicker { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-mid); margin-bottom: 0.9rem; } .section-cta { text-align: center; margin-top: 2.5rem; } .nowrap { white-space: nowrap; } /* keeps license/credential numbers whole */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 100; padding: 0.7rem 1.2rem; background: var(--heading); color: #fff; border-radius: var(--radius-btn); font-weight: 700; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus-visible { top: 0.75rem; } /* JS-availability gates: .js-only shows only when main.js booted, .no-js-only only when it didn't (the head boot script manages html.js) */ html:not(.js) .js-only { display: none; } html.js .no-js-only { display: none; } /* ---------- Glass primitives ---------- */ .glass, .glass-strong { background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7); backdrop-filter: blur(var(--glass-blur)) saturate(1.7); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--specular), var(--shadow-soft); } .glass-dark { background: var(--glass-dark); border: 1px solid var(--glass-dark-border); border-radius: var(--radius-xl); box-shadow: var(--specular-dark), var(--shadow-lifted); color: var(--on-dark); } .glass-dark h2, .glass-dark h3 { color: var(--on-dark); } .glass-dark p { color: var(--on-dark-muted); } /* ---------- Buttons & pills ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.78rem 1.55rem; min-height: 44px; border: 0; border-radius: var(--radius-btn); font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.005em; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; position: relative; transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease; } .btn:active { transform: scale(0.975); } .btn-primary { color: #fff; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(60, 80, 10, 0.22), 0 10px 26px var(--accent-glow); } .btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 10px rgba(10, 60, 42, 0.28), 0 14px 34px var(--accent-glow); } .btn-primary:active { transform: scale(0.975); } .btn-glass { color: var(--heading); background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 2px 10px rgba(12, 42, 32, 0.10); } .btn-glass:hover { background: rgba(255, 255, 255, 0.78); } /* On dark surfaces the glass button flips to frosted-dark */ .glass-dark .btn-glass, .hero-copy-panel .btn-glass { color: #fff; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .glass-dark .btn-glass:hover, .hero-copy-panel .btn-glass:hover { background: rgba(255, 255, 255, 0.22); } .btn-lg { padding: 0.95rem 1.9rem; font-size: 1.0625rem; } .btn-block { width: 100%; } .chip { display: inline-flex; align-items: center; padding: 0.28rem 0.85rem; border-radius: var(--radius-btn); background: rgba(255, 255, 255, 0.6); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); font-size: 0.9rem; font-weight: 600; color: var(--heading); } .stars { color: var(--star); letter-spacing: 0.08em; } /* ══════════════════ SECTION: header ══════════════════ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: 0.75rem; } .header-pill { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem 0.6rem 1.25rem; border-radius: var(--radius-btn); background: rgba(255, 255, 255, 0.66); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8); backdrop-filter: blur(var(--glass-blur)) saturate(1.8); border: 1px solid var(--glass-border); box-shadow: var(--specular), 0 6px 24px rgba(12, 42, 32, 0.10); transition: box-shadow 0.25s ease; } .site-header.scrolled .header-pill { box-shadow: var(--specular), 0 10px 34px rgba(12, 42, 32, 0.18); } .header-logo img { width: clamp(150px, 18vw, 220px); height: auto; } .header-badge { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 650; color: var(--heading); white-space: nowrap; } .header-badge .icon { color: var(--brand-mid); flex: none; } .header-actions { display: flex; align-items: center; gap: 0.9rem; } .header-phone { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--heading); } .header-phone .icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px var(--accent-glow); flex: none; } .header-phone-text { display: flex; flex-direction: column; line-height: 1.25; } .phone-label { font-size: 0.75rem; font-weight: 600; color: var(--heading); } .phone-number { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; } @media (max-width: 900px) { .header-badge { display: none; } } @media (max-width: 640px) { .phone-label { display: none; } .header-cta { display: none; } /* the sticky bar covers mobile CTA */ .header-pill { padding: 0.25rem 0.9rem; } /* absorbs the 44px tap target below */ .header-phone { min-height: 44px; } } @media (max-width: 480px) { .header-logo img { width: 118px; } .phone-number { font-size: 0.95rem; } .header-phone .icon-wrap { width: 34px; height: 34px; } } /* ══════════════════ SECTION: hero ══════════════════ */ .hero { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--header-clear) + 1.5rem) 0 var(--hero-pad-b); } .hero-media { position: absolute; inset: 0; overflow: hidden; } .hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 13, 0.32) 0%, rgba(10, 14, 13, 0.08) 45%, rgba(10, 14, 13, 0.38) 100%); } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; } /* Two hero columns only when JS booted (it's what docks the form card into the right column) — no-JS/broken-JS desktops get a clean single column with the form card below the hero instead of a phantom gap */ @media (min-width: 980px) { html.js .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); } } .hero-copy-panel { padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: var(--radius-xl); background: var(--hero-panel); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: var(--specular-dark), var(--shadow-lifted); color: var(--on-dark); max-width: 44rem; } .hero-copy-panel h1 { color: #fff; margin-bottom: 0.35em; } .hero-copy-panel h1 .grad { background: linear-gradient(92deg, var(--accent-a), var(--accent-b)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { color: var(--on-dark-muted); font-size: 1.15rem; margin-bottom: 1.1rem; } .hero-rating { display: inline-flex; align-items: center; flex-wrap: wrap; /* narrow screens: the count drops to its own line */ gap: 0.15rem 0.5rem; padding: 0.4rem 1rem; margin-bottom: 1.2rem; border-radius: var(--radius-btn); background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.12); font-size: 0.95rem; } .hero-rating .count { white-space: nowrap; } /* wraps as a whole, never mid-phrase */ .hero-rating strong { font-size: 1.05rem; } .hero-rating .count { color: var(--on-dark); } .hero-area-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 1.05rem; margin: 0 0 1.1rem; border-radius: var(--radius-btn); background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.12); font-size: 0.95rem; color: var(--on-dark); max-width: 100%; } .hero-area-pill .icon { color: var(--accent-on-dark); flex: none; } .hero-points { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.55rem; } .hero-points li { display: flex; align-items: baseline; gap: 0.65rem; font-weight: 600; } .hero-points .icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); color: #fff; flex: none; transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.1rem; } /* The hidden attribute must always win over the display rule below — the pill only ever shows when main.js computed a real open/closed state */ .open-now[hidden] { display: none !important; } .open-now { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 1.1rem; font-size: 0.95rem; font-weight: 650; color: var(--on-dark); } .open-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-b); box-shadow: 0 0 0 0 rgba(53, 214, 141, 0.55); animation: openPulse 2.4s ease-out infinite; flex: none; } @keyframes openPulse { 0% { box-shadow: 0 0 0 0 rgba(53, 214, 141, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(53, 214, 141, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 214, 141, 0); } } .hero-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; } .trust-item { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.8rem; border-radius: var(--radius-btn); background: rgba(255, 255, 255, 0.11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.10); font-size: 0.875rem; font-weight: 600; color: var(--on-dark); } .hero-trust .icon, .owner-chips .icon { color: var(--accent-on-dark); flex: none; } /* Mobile hero: portrait photo fills the screen; panel hugs the bottom */ @media (max-width: 979px) { .hero { align-items: flex-end; padding-top: calc(var(--header-clear) + 0.5rem); } .hero-copy-panel { max-width: 100%; } } @media (max-width: 640px) { :root { --hero-pad-b: 3.5rem; } .hero-sub { font-size: 1.05rem; } .hero-points li { font-size: 0.98rem; } .hero-actions .btn { flex: 1 1 100%; } } /* ══════════════════ SECTION: hero-form (lead-form slot) ══════════════════ */ /* <980px: the card sits here, after the hero, pulled up to overlap the photo's bottom edge. ≥980px: main.js docks the card inside the hero; this wrap then holds nothing. If JS never runs, the card simply stays here at every width — fully functional. */ .hero-form-wrap { position: relative; z-index: 5; margin-top: calc(var(--hero-form-gap) - var(--hero-pad-b)); padding-bottom: var(--section-gap); } /* Docked state — main.js toggles .is-docked whenever the card actually sits in the hero dock. The overlap margin and padding then reset, so the hero's own bottom padding provides the beat before the next section (without this, the leftover negative margin can pull the next section over the hero photo at ~1000-1100px). */ .hero-form-wrap.is-docked { margin-top: 0; padding-bottom: 0; } .hero-form-card { background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7); backdrop-filter: blur(var(--glass-blur)) saturate(1.7); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--specular), var(--shadow-lifted); padding: clamp(1.5rem, 3vw, 2.25rem); max-width: 34rem; margin-inline: auto; } .hero-form-card h2 { font-size: 1.55rem; margin-bottom: 0.4rem; } .form-privacy { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); margin-bottom: 1.25rem; } .form-privacy .icon { color: var(--brand-mid); flex: none; transform: translateY(2px); } .form-speed-note { font-size: 0.9rem; color: var(--muted); text-align: center; margin: 1rem 0 0; } /* Docked position (main.js moves the card here at ≥980px). While empty (mobile/tablet/no-JS) the dock must not render — as a grid item it would otherwise add a phantom gap row inside the hero. The div has no whitespace children, so :empty matches until the card is docked. */ .hero-form-dock { min-width: 0; } .hero-form-dock:empty { display: none; } .hero-form-dock .hero-form-card { margin-inline: auto 0; } /* Form styling targets BOTH the mock form and any injected live form: bare inputs inside the slot inherit the design with no classes. */ [data-slot="lead-form"] { position: relative; } [data-slot="lead-form"] form { display: grid; gap: 0.95rem; } [data-slot="lead-form"] label { display: block; font-size: 0.92rem; font-weight: 700; color: var(--heading); margin-bottom: 0.3rem; } [data-slot="lead-form"] label .optional { font-weight: 500; color: var(--muted); } [data-slot="lead-form"] input, [data-slot="lead-form"] select, [data-slot="lead-form"] textarea { width: 100%; padding: 0.72rem 0.95rem; font-family: inherit; font-size: 1.0625rem; /* ≥16px prevents iOS focus zoom */ color: var(--ink); background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(22, 32, 28, 0.16); border-radius: 14px; box-shadow: inset 0 1px 2px rgba(12, 42, 32, 0.05); transition: border-color 0.15s ease, box-shadow 0.15s ease; } [data-slot="lead-form"] input:focus, [data-slot="lead-form"] select:focus, [data-slot="lead-form"] textarea:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 3px rgba(18, 146, 95, 0.22); } [data-slot="lead-form"] input[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 3px rgba(187, 58, 43, 0.15); } [data-slot="lead-form"] ::placeholder { color: var(--muted); opacity: 1; } [data-slot="lead-form"] .field { min-width: 0; } .field-error { color: var(--error); font-size: 0.88rem; font-weight: 600; margin: 0.35rem 0 0; } .microcopy { color: var(--muted); font-size: 0.85rem; margin: 0.35rem 0 0; } /* Mock-form success panel (spec for the injected form's success state) */ .form-success { display: none; text-align: center; padding: 1.5rem 0.5rem 0.5rem; } .form-success.visible { display: block; } .lead-form.submitted { display: none; } .form-success:focus { outline: none; } .success-icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; margin-bottom: 1rem; color: #fff; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 26px var(--accent-glow); } .success-title { font-size: 1.35rem; } .success-copy { color: var(--muted); margin-inline: auto; } /* ---------- Insertion-point preview chrome (hidden when slots-live) ---------- */ [data-slot] { position: relative; } .ip-tag { position: absolute; top: -0.65rem; left: 1rem; z-index: 3; padding: 0.1rem 0.7rem; border-radius: var(--radius-btn); background: #7c3aed; color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; white-space: nowrap; } body:not(.slots-live) [data-slot] { outline: 2px dashed rgba(124, 58, 237, 0.55); outline-offset: 6px; border-radius: 8px; } body.slots-live .ip-tag { display: none; } body.slots-live [data-slot] { outline: none; } /* ══════════════════ SECTION: trust-strip ══════════════════ */ /* At ≥980px (hero photo edge exposed below the docked form) the badge row rides up over the hero, overlapping the photo's bottom edge by roughly half a card height — same layering trick as the mobile form card. */ .trust-strip { position: relative; z-index: 6; } @media (min-width: 980px) { /* Only lift when main.js actually docked the form card into the hero — otherwise this eats the form card's own section gap instead of the photo. */ html.js .trust-strip { margin-top: -2.8rem; } /* ≈ half the badge-row height */ } /* Explicit column counts (1 → 2+2 → 4) so four badges never strand an orphan on its own row the way auto-fit does at in-between widths */ .trust-strip-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; } @media (min-width: 540px) { .trust-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .trust-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .trust-badge { display: flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1.2rem; border-radius: var(--radius-card); background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6); backdrop-filter: blur(var(--glass-blur)) saturate(1.6); border: 1px solid var(--glass-border); box-shadow: var(--specular), 0 4px 14px rgba(12, 42, 32, 0.06); } .trust-badge .icon { color: var(--brand-mid); flex: none; } /* Direct child only — nested [data-bind] spans must stay inline, or the bound values break onto their own lines */ .trust-badge > span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .trust-badge strong { font-size: 0.98rem; color: var(--heading); } .trust-badge small { font-size: 0.82rem; color: var(--muted); } /* ══════════════════ SECTION: emergency ══════════════════ */ .emergency-card { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3.5vw, 2.5rem); } .emergency-copy { flex: 1 1 22rem; } .emergency-copy h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: 0.3rem; } .emergency-copy p { margin: 0; } /* The long "Call Now — (number)" label must never overflow tiny screens */ .emergency-card .btn { max-width: 100%; } @media (max-width: 460px) { .emergency-card .btn-lg { white-space: normal; text-align: center; width: 100%; } } .pulse-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent-b); box-shadow: 0 0 0 0 rgba(53, 214, 141, 0.55); animation: openPulse 2.4s ease-out infinite; flex: none; } /* ══════════════════ SECTION: services (cards) ══════════════════ */ .card-grid { display: grid; gap: 1.15rem; } /* 1 → 2 → 4 columns: keeps 4 or 8 cards perfectly balanced (6 shows as 4+2) */ .card-grid.cols-4 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 600px) { .card-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Photo-led service cards: real service photo on top, copy below. The photo is clipped to the card radius by overflow: hidden. */ .card { display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6); backdrop-filter: blur(var(--glass-blur)) saturate(1.6); border: 1px solid var(--glass-border); box-shadow: var(--specular), var(--shadow-soft); transition: transform 0.22s ease, box-shadow 0.22s ease; } @media (hover: hover) { .card:hover { transform: translateY(-4px); box-shadow: var(--specular), var(--shadow-lifted); } } .card-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; /* 16:10 intrinsic ratio keeps the crop even where aspect-ratio is unsupported */ /* opaque hairline covers the sub-pixel seam under a fractional-height photo, so the aurora can't bleed through the glass card as a faint colored line below the image (most visible on the first services row) */ box-shadow: 0 1px 0 0 #fbfcfd; } .card-body { padding: 1.15rem 1.5rem 1.35rem; } .card h3 { margin-bottom: 0.4rem; } .card p { margin: 0; color: var(--muted); font-size: 0.99rem; } /* ══════════════════ SECTION: results (before/after + gallery) ══════════════════ */ .ba-slider { --ba-pos: 50%; position: relative; margin-inline: auto; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16 / 9; max-height: 620px; box-shadow: var(--shadow-lifted); border: 1px solid rgba(255, 255, 255, 0.4); } @media (max-width: 1023px) { .ba-slider { aspect-ratio: 4 / 3; } } @media (max-width: 767px) { .ba-slider { aspect-ratio: 1 / 1; } } /* Engines without aspect-ratio (iOS ≤14): the absolutely-positioned images would collapse the box — give it an explicit height instead */ @supports not (aspect-ratio: 1) { .ba-slider { height: 56vw; max-height: 620px; } @media (max-width: 767px) { .ba-slider { height: 92vw; } } } .ba-slider .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ba-before-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); } .ba-label { position: absolute; top: 1rem; z-index: 2; padding: 0.25rem 0.85rem; border-radius: var(--radius-btn); background: rgba(14, 20, 18, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; } .ba-label.before { left: 1rem; } .ba-label.after { right: 1rem; } .ba-divider { position: absolute; top: 0; bottom: 0; left: var(--ba-pos); width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 12px rgba(0, 0, 0, 0.35); pointer-events: none; } .ba-handle { position: absolute; top: 50%; left: var(--ba-pos); transform: translate(-50%, -50%); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 18px rgba(0, 0, 0, 0.28); color: var(--heading); pointer-events: none; } .ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; /* pan-y keeps vertical swipes scrolling the page (no touch dead-zone); horizontal drags still drive the range natively */ touch-action: pan-y pinch-zoom; -webkit-appearance: none; appearance: none; } /* White ring — the handle floats over photos where brand-green vanishes */ .ba-range:focus-visible ~ .ba-handle { outline: 3px solid #fff; outline-offset: 3px; } /* No JS = nothing drives --ba-pos: hide the interactive affordances and leave an honest static 50/50 comparison (labels + divider stay) */ html:not(.js) .ba-range, html:not(.js) .ba-handle { display: none; } .ba-caption { text-align: center; color: var(--muted); font-size: 0.95rem; margin: 0.9rem auto 3rem; } .gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; } @media (max-width: 1023px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 540px) { .gallery-grid { grid-template-columns: 1fr; } } .gallery-link { position: relative; display: block; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-soft); border: 1px solid rgba(255, 255, 255, 0.45); } .gallery-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } @media (hover: hover) { .gallery-link:hover img { transform: scale(1.04); } } .gallery-zoom { position: absolute; right: 0.8rem; bottom: 0.8rem; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(14, 20, 18, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); } /* Lightbox */ /* Browsers without support render it as a plain block — keep the closed lightbox invisible there (gallery links open in a new tab instead) */ dialog:not([open]) { display: none; } .lightbox { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; } .lightbox::backdrop { background: rgba(10, 14, 13, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .lightbox-inner { position: relative; display: flex; flex-direction: column; align-items: center; } .lightbox-img { max-width: min(92vw, 1200px); max-height: 80vh; width: auto; height: auto; border-radius: var(--radius-card); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5); background: #23302b; } .lightbox-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; } .lightbox-btn:hover { background: rgba(255, 255, 255, 0.28); } .lightbox-close { top: -0.4rem; right: -0.4rem; transform: translate(50%, -50%); } .lightbox-prev { left: 0.6rem; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 0.6rem; top: 50%; transform: translateY(-50%); } @media (max-width: 640px) { .lightbox-close { top: 0.4rem; right: 0.4rem; transform: none; } } /* ══════════════════ SECTION: video ══════════════════ */ .video-frame { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lifted); border: 1px solid rgba(255, 255, 255, 0.4); max-width: 62rem; margin-inline: auto; background: #10201a; } .video-frame video { width: 100%; height: auto; aspect-ratio: 16 / 9; } /* ══════════════════ SECTION: project-preview (slot) ══════════════════ */ /* The hosting app injects the AI preview app into the slot; the card only provides the glass surface and the centered 320–560px column the widget needs. The mock inside is preview-only chrome (replaced at publish). */ .preview-slot { position: relative; /* anchors the .ip-tag preview label */ width: 100%; max-width: 34rem; /* 544px — inside the widget's 320–560px band */ margin-inline: auto; padding: 1.5rem; border-radius: var(--radius-card); } .preview-mock { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 360px; text-align: center; color: var(--muted); } .preview-mock-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; color: var(--brand-mid); background: linear-gradient(180deg, rgba(18, 146, 95, 0.14), rgba(18, 146, 95, 0.07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(18, 146, 95, 0.12); } .preview-mock-title { margin: 0.9rem 0 0.3rem; font-weight: 800; color: var(--heading); } .preview-mock-copy { margin: 0; max-width: 34ch; font-size: 0.95rem; } /* ══════════════════ SECTION: stats ══════════════════ */ .stats-card { padding: clamp(2rem, 4.5vw, 3.5rem); } .stats-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } /* Four stats: 2×2 on small screens, one row of 4 from tablet up */ .stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; text-align: center; } @media (min-width: 768px) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stat-number { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.1; } .stat-number [data-bind] { color: inherit; } .stat-label { color: var(--on-dark-muted); font-weight: 600; font-size: 0.95rem; margin-top: 0.3rem; } /* ══════════════════ SECTION: cta-strip ══════════════════ */ .cta-strip-card { padding: clamp(1.75rem, 4vw, 2.5rem); text-align: center; } .cta-strip-card h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); margin-bottom: 1.1rem; } .cta-strip-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; } .or-call { color: var(--muted); font-weight: 600; } .or-call a { font-weight: 800; text-decoration: none; } /* ══════════════════ SECTION: reviews ══════════════════ */ .review-summary { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; font-size: 1.05rem; color: var(--muted); margin: -1.5rem auto 2rem; text-align: center; } .review-summary strong { color: var(--heading); font-size: 1.15rem; } /* Three mock cards: 1 column, then 3 — never a stranded 2+1 layout. (Only preview chrome — the live widget replaces this grid.) */ .review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; } @media (min-width: 820px) { .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .review-card { padding: 1.5rem 1.4rem; border-radius: var(--radius-card); background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6); backdrop-filter: blur(var(--glass-blur)) saturate(1.6); border: 1px solid var(--glass-border); box-shadow: var(--specular), var(--shadow-soft); } .review-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; } .review-avatar { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(180deg, rgba(18, 146, 95, 0.18), rgba(18, 146, 95, 0.10)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(18, 146, 95, 0.14); color: var(--brand-mid); font-weight: 800; font-size: 0.95rem; flex: none; } .review-name { font-weight: 750; color: var(--heading); } .review-loc { font-size: 0.85rem; color: var(--muted); } .review-stars { display: flex; align-items: center; gap: 0.6rem; color: var(--star); font-size: 0.95rem; margin-bottom: 0.6rem; } .review-date { color: var(--muted); font-size: 0.85rem; } .review-card blockquote { margin: 0; color: var(--ink); font-size: 0.99rem; } /* ══════════════════ SECTION: comparison ══════════════════ */ /* Two side-by-side cards: ours carries the accent ring and reads first; the "typical company" card is visually muted. Stacks below 820px. */ .compare-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; align-items: stretch; max-width: 60rem; margin-inline: auto; } @media (min-width: 820px) { .compare-duo { grid-template-columns: 1.08fr 0.92fr; } } .compare-col { padding: clamp(1.5rem, 3vw, 2.1rem); border-radius: var(--radius-card); } .compare-col-us { background: var(--glass-strong); box-shadow: var(--specular), inset 0 0 0 2px rgba(18, 146, 95, 0.35), var(--shadow-lifted); } .compare-col-them { background: var(--glass); } .compare-col-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1.15rem; margin-bottom: 1.1rem; } .compare-col-us .compare-col-title { color: var(--brand-mid); } .compare-col-them .compare-col-title { color: var(--muted); } .compare-col-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); color: #fff; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); } .compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; } .compare-list li { display: flex; gap: 0.7rem; align-items: baseline; font-size: 0.99rem; } .compare-list li > span:last-child { min-width: 0; } .compare-col-us .compare-list li { color: var(--ink); } .compare-col-us .compare-list strong { color: var(--heading); } .compare-col-them .compare-list li { color: var(--muted); } .compare-list .tick, .compare-list .cross { transform: translateY(4px); } .tick, .cross { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 0.35rem; border-radius: 50%; font-size: 0.8rem; font-weight: 800; vertical-align: -0.3em; } .tick { background: rgba(160, 200, 40, 0.22); color: var(--brand-mid); } .cross { background: rgba(120, 130, 126, 0.14); color: #55605b; } /* ══════════════════ SECTION: process ══════════════════ */ /* Exactly three steps: 1 column, then 3 — never a stranded 2+1 layout */ .process-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; } @media (max-width: 819px) { .process-grid { gap: 2.6rem; } } /* clear the -1.1rem step badge */ @media (min-width: 820px) { .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .process-step { position: relative; padding: 2.1rem 1.6rem 1.6rem; border-radius: var(--radius-card); } .step-number { position: absolute; top: -1.1rem; left: 1.4rem; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); color: #fff; font-weight: 800; font-size: 1.15rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px var(--accent-glow); } .process-step h3 { margin: 0.4rem 0 0.45rem; } .process-step p { margin: 0; color: var(--muted); font-size: 0.99rem; } .process-grid { padding-top: 1.1rem; } /* ══════════════════ SECTION: owner ══════════════════ */ .owner-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(1.5rem, 3.5vw, 2.75rem); align-items: center; } @media (min-width: 768px) { .owner-card { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); } } .owner-photo { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); border: 1px solid rgba(255, 255, 255, 0.5); margin-inline: auto; } .owner-copy h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); } .owner-copy p { color: var(--ink); } .owner-sign { font-weight: 750; color: var(--heading); } .owner-chips { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .owner-chips .trust-item { /* text-only chips: inline-block so the flex gap never pads the words apart */ display: inline-block; background: rgba(18, 146, 95, 0.10); color: var(--heading); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(18, 146, 95, 0.12); } /* ══════════════════ SECTION: team ══════════════════ */ /* Expanded-bio cards: 1 column on phones, 2 per row from 768px — any EVEN member count lands balanced, never an orphan row. From 1024px each card turns sideways (portrait left, bio right) so the longer bios read comfortably without towering cards. */ .team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; justify-items: center; } .team-card { display: flex; flex-direction: column; width: 100%; max-width: 26rem; /* keeps single-column portraits sane on large phones */ padding: 0; overflow: hidden; /* clips the portrait to the card radius */ border-radius: var(--radius-card); } .team-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; /* 4:5 intrinsic ratio keeps the crop even where aspect-ratio is unsupported */ } .team-body { padding: 1.1rem 1.25rem 1.3rem; } @media (min-width: 768px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team-card { max-width: none; } } @media (min-width: 1024px) { .team-card { flex-direction: row; align-items: stretch; } .team-photo { width: 40%; max-width: 15rem; aspect-ratio: auto; /* stretch fills the card's full height; object-fit keeps the crop centered */ flex-shrink: 0; } .team-body { padding: 1.4rem 1.5rem; align-self: center; } } .team-name { margin: 0 0 0.2rem; font-size: 1.15rem; } .team-role { margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; color: var(--brand-mid); } .team-bio { margin: 0; font-size: 0.92rem; color: var(--muted); } /* ══════════════════ SECTION: offer ══════════════════ */ .offer-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem; padding: clamp(1.75rem, 4vw, 3rem); } .offer-tag { display: inline-block; padding: 0.3rem 0.9rem; margin-bottom: 0.9rem; border-radius: var(--radius-btn); background: rgba(53, 214, 141, 0.16); box-shadow: inset 0 0 0 1px rgba(53, 214, 141, 0.3); color: var(--accent-on-dark); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .offer-card h2 { margin-bottom: 0.4rem; } .offer-card p { max-width: 38rem; } .offer-fine { font-size: 0.85rem; opacity: 0.85; margin-bottom: 0; } .offer-cta { display: flex; flex-direction: column; gap: 0.8rem; align-items: stretch; min-width: 15rem; } /* Variant switch: only the variant matching data-offer-mode renders */ .offer-variant { display: none; } [data-offer-mode="discount"] .variant-discount { display: block; } [data-offer-mode="seasonal"] .variant-seasonal { display: block; } [data-offer-mode="financing"] .variant-financing { display: block; } [data-offer-mode="scarcity"] .variant-scarcity { display: block; } /* ══════════════════ SECTION: guarantee ══════════════════ */ /* Capped + centered: the card hugs its content instead of stretching the full container width and leaving dead space beside the text */ .guarantee-card { display: flex; align-items: flex-start; gap: 1.5rem; padding: clamp(1.75rem, 4vw, 2.75rem); max-width: 56rem; margin-inline: auto; } .guarantee-shield { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 24px; color: var(--brand-mid); background: linear-gradient(180deg, rgba(18, 146, 95, 0.15), rgba(18, 146, 95, 0.07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 0 1px rgba(18, 146, 95, 0.14); flex: none; } .guarantee-card h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); } .guarantee-card p { margin: 0; color: var(--muted); } @media (max-width: 640px) { .guarantee-card { flex-direction: column; } } /* ══════════════════ SECTION: area (gbp card + map slot) ══════════════════ */ .gbp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; align-items: stretch; } @media (min-width: 900px) { .gbp-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } } .gbp-card { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius-card); } .gbp-name-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; } .gbp-name-row h3 { margin: 0; font-size: 1.3rem; } .gbp-pin { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; color: var(--brand-mid); background: linear-gradient(180deg, rgba(18, 146, 95, 0.15), rgba(18, 146, 95, 0.07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(18, 146, 95, 0.12); flex: none; } .gbp-info-list { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.85rem; } .gbp-info-list li { display: flex; align-items: baseline; gap: 0.7rem; } .gbp-info-list .icon { color: var(--brand-mid); flex: none; transform: translateY(3px); } .gbp-info-list a { font-weight: 750; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .gbp-hours-week { display: grid; gap: 0.15rem; font-size: 0.95rem; width: 100%; max-width: 21rem; } .gbp-hours-week div { display: flex; justify-content: space-between; gap: 1rem; } .gbp-hours-week span:first-child { color: var(--muted); } .area-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; } .area-chips.in-card { margin-bottom: 1.4rem; } .gbp-card-cta { margin-top: auto; } .map-frame { position: relative; min-height: 340px; border-radius: var(--radius-card); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: var(--shadow-soft); background: #e8ede9; } .map-frame > img, .map-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } @media (max-width: 899px) { .map-frame { min-height: 340px; height: 46vw; max-height: 420px; } } /* ══════════════════ SECTION: faq ══════════════════ */ .faq-list { max-width: 46rem; margin-inline: auto; display: grid; gap: 0.8rem; } .faq-item { border-radius: var(--radius-card); padding: 0; overflow: hidden; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; font-weight: 700; color: var(--heading); cursor: pointer; list-style: none; min-height: 44px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-chevron { flex: none; color: var(--brand-mid); transition: transform 0.25s ease; } .faq-item[open] .faq-chevron { transform: rotate(180deg); } .faq-body { padding: 0 1.35rem 1.15rem; } .faq-body p { margin: 0; color: var(--muted); } /* ══════════════════ SECTION: final-cta ══════════════════ */ .final-card { text-align: center; padding: clamp(2.25rem, 5vw, 3.75rem); } .final-card h2 { font-size: clamp(1.8rem, 3.8vw, 2.8rem); } .final-sub { margin-inline: auto; font-size: 1.1rem; } .final-actions { justify-content: center; margin-top: 1.4rem; } .final-phone-line { margin: 1.1rem auto 0; color: var(--on-dark-muted); } .final-phone-line a { color: var(--accent-on-dark); font-weight: 800; text-decoration: none; } /* ══════════════════ SECTION: footer ══════════════════ */ .site-footer { padding-bottom: 2rem; } .footer-card { display: flex; flex-direction: column; gap: 0.9rem; align-items: center; text-align: center; padding: 1.75rem 1.5rem; border-radius: var(--radius-xl); font-size: 0.92rem; color: var(--muted); } .footer-nap { display: flex; flex-direction: column; gap: 0.2rem; align-items: center; } .footer-biz-name { font-weight: 800; color: var(--heading); font-size: 1.05rem; } .footer-phone { color: var(--brand-mid); font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .footer-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; } .footer-legal a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; } @media (max-width: 979px) { .site-footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); } } /* ══════════════════ SECTION: sticky-bar ══════════════════ */ .sticky-bar { position: fixed; left: 50%; bottom: calc(0.8rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: flex; gap: 0.6rem; padding: 0.55rem; border-radius: var(--radius-btn); background: rgba(255, 255, 255, 0.66); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8); backdrop-filter: blur(var(--glass-blur)) saturate(1.8); border: 1px solid var(--glass-border); box-shadow: var(--specular), 0 12px 34px rgba(12, 42, 32, 0.22); transition: transform 0.28s ease, opacity 0.28s ease; width: max-content; max-width: calc(100vw - 1.5rem); } .sticky-bar .btn { flex: none; } @media (max-width: 360px) { .sticky-bar { gap: 0.4rem; padding: 0.45rem; } .sticky-bar .btn { padding-inline: 1.1rem; font-size: 0.95rem; } } .sticky-bar.hidden-bar { transform: translateX(-50%) translateY(140%); opacity: 0; pointer-events: none; } @media (min-width: 980px) { .sticky-bar { display: none; } html { scroll-padding-bottom: 0; } } /* ══════════════════ Thank-you page ══════════════════ */ .thanks-section { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 3rem 0; } .thanks-card { max-width: 38rem; margin-inline: auto; text-align: center; padding: clamp(2rem, 5vw, 3.25rem); } .thanks-icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; margin-bottom: 1.4rem; color: #fff; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 30px var(--accent-glow); } .thanks-sub { color: var(--muted); font-size: 1.1rem; margin-inline: auto; } .thanks-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.9rem; text-align: left; } .thanks-steps li { display: flex; gap: 0.9rem; align-items: baseline; } .thanks-step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, rgba(160, 200, 40, 0.22), rgba(18, 146, 95, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(18, 146, 95, 0.14); color: var(--brand-mid); font-weight: 800; font-size: 0.9rem; flex: none; transform: translateY(4px); } /* ══════════════════ Reveal-on-scroll (JS-gated, subtle, one-time) ══════════════════ */ html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.38s ease, transform 0.38s ease; } html.js .reveal.in { opacity: 1; transform: none; } /* SAFETY NET (hosting-app contract): anything injected INSIDE a slot is always visible, even if it carries a copied .reveal class the observer never saw — never remove this rule */ html.js [data-slot] .reveal { opacity: 1; transform: none; } /* ══════════════════ Degradation & preference fallbacks ══════════════════ */ /* No backdrop-filter → near-solid fills, same hierarchy */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, .glass-strong, .card, .review-card, .hero-form-card, .trust-badge, .header-pill, .sticky-bar { background: rgba(255, 255, 255, 0.94); } .btn-glass { background: rgba(255, 255, 255, 0.94); } .hero-copy-panel, .hero-copy-panel .btn-glass, .glass-dark .btn-glass { background: rgba(14, 20, 18, 0.88); } .glass-dark .btn-glass, .hero-copy-panel .btn-glass { background: rgba(255, 255, 255, 0.14); } } /* Reduced transparency → same, by preference */ @media (prefers-reduced-transparency: reduce) { .glass, .glass-strong, .card, .review-card, .hero-form-card, .trust-badge, .header-pill, .sticky-bar { background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: none; backdrop-filter: none; } .hero-copy-panel { background: rgba(14, 20, 18, 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Reduced motion → no reveals, no sweeps, no pulses, no smooth scroll */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .reveal { opacity: 1; transform: none; transition: none; } .open-dot, .pulse-dot { animation: none; } .btn, .card, .gallery-link img, .faq-chevron, .sticky-bar { transition: none; } .btn-primary:hover, .card:hover { transform: none; } } /* Forced colors (Windows High Contrast) — keep structure visible */ @media (forced-colors: active) { .glass, .glass-strong, .glass-dark, .card, .review-card, .hero-form-card, .header-pill, .sticky-bar, .trust-badge, .faq-item, .compare-card, .hero-copy-panel { border: 1px solid CanvasText; } .btn { border: 1px solid CanvasText; } .aurora { display: none; } /* box-shadow focus rings are stripped in forced colors — restore outlines */ [data-slot="lead-form"] input:focus, [data-slot="lead-form"] select:focus, [data-slot="lead-form"] textarea:focus { outline: 2px solid Highlight; } } /* Print — quote-friendly, no chrome */ @media print { .aurora, .site-header, .sticky-bar, .ip-tag, .skip-link, .lightbox, video { display: none !important; } body { background: #fff; color: #000; } .hero { min-height: 0; padding: 1rem 0; } .hero-media { display: none; } .hero-copy-panel, .glass, .glass-strong, .glass-dark, .card, .review-card, .hero-form-card { background: #fff !important; color: #000 !important; box-shadow: none !important; border: 1px solid #999 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .hero-copy-panel h1, .glass-dark h2, .glass-dark h3, .glass-dark p, .stat-number, .stat-label { color: #000 !important; } section, .cta-strip { padding-block: 0 1.5rem; } } /* Hero service chips */ .hero-chips{ list-style:none; margin:0.9rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:0.5rem; } .hero-chips li{ display:inline-flex; align-items:center; padding:0.42rem 0.85rem; border-radius:999px; font-size:0.95rem; font-weight:600; line-height:1; color:#fff; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } @media (max-width:600px){ .hero-chips li{ font-size:0.85rem; padding:0.36rem 0.7rem; } } /* Google review badge */ .trust-badge--google { background: rgba(255,255,255,0.9); border: 1px solid rgba(22,32,28,0.08); box-shadow: var(--specular), 0 8px 22px rgba(12,42,32,0.10); } .trust-badge--google .g-mark { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.14); } .trust-badge--google .g-body { display: flex; flex-direction: column; line-height: 1.25; } .trust-badge--google .g-top { display: flex; align-items: center; gap: 0.42rem; flex-wrap: wrap; } .trust-badge--google .g-score { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.01em; color: var(--heading); } .trust-badge--google .g-stars { color: #f5a623; font-size: 0.95rem; letter-spacing: 0.06em; } .trust-badge--google .g-on { font-size: 0.86rem; font-weight: 600; color: var(--muted); } .trust-badge--google small { font-size: 0.82rem; color: var(--muted); } /* ══════════════════ Hero project strip (on dark hero) ══════════════════ */ .hero-strip{ margin-top:1.5rem; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent); } .hstrip-track{ display:flex; gap:0.85rem; width:max-content; animation:hstrip 42s linear infinite; } .hero-strip:hover .hstrip-track{ animation-play-state:paused; } .hstrip-item{ flex:none; width:200px; aspect-ratio:4/3; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,0.18); box-shadow:0 14px 32px rgba(0,0,0,0.45); background:rgba(255,255,255,0.06); } .hstrip-item img{ width:100%; height:100%; object-fit:cover; display:block; } @keyframes hstrip{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion:reduce){ .hstrip-track{ animation:none; } .hero-strip{ overflow-x:auto; } } @media (max-width:600px){ .hstrip-item{ width:150px; border-radius:14px; } } /* ══════════════════ Auto-scrolling project strip ══════════════════ */ .strip-viewport{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); } .strip-track{ list-style:none; margin:0; padding:0.35rem 0; display:flex; gap:1rem; width:max-content; animation:strip-scroll 60s linear infinite; will-change:transform; } .strip-viewport:hover .strip-track, .strip-viewport:focus-within .strip-track{ animation-play-state:paused; } .strip-track .gallery-item{ margin:0; flex:0 0 clamp(240px, 31vw, 420px); } .strip-track .gallery-link{ display:block; position:relative; overflow:hidden; border-radius:18px; aspect-ratio:4/3; box-shadow:0 16px 38px rgba(16,35,28,0.16); } .strip-track .gallery-link img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.7s cubic-bezier(0.22,0.61,0.36,1); } .strip-track .gallery-link:hover img{ transform:scale(1.05); } @keyframes strip-scroll{ from{ transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } } .strip-hint{ display:none; } /* Mobile: real swipe carousel with snap, no auto-scroll */ @media (max-width:860px){ .strip-viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-inline:1px; } .strip-viewport::-webkit-scrollbar{ display:none; } .strip-track{ animation:none; gap:0.7rem; padding-inline:0.15rem; width:auto; } .strip-track .gallery-item{ flex:0 0 82vw; max-width:82vw; scroll-snap-align:center; } .strip-track .gallery-item[aria-hidden="true"]{ display:none; } .strip-track .gallery-link{ aspect-ratio:4/3; border-radius:14px; } .strip-track .gallery-zoom{ display:none; } .strip-hint{ display:block; margin:0.7rem 0 0; text-align:center; font-size:0.85rem; letter-spacing:0.02em; opacity:0.6; } } @media (prefers-reduced-motion:reduce){ .strip-track{ animation:none; } .strip-viewport{ overflow-x:auto; scroll-snap-type:x mandatory; } .strip-track .gallery-item{ scroll-snap-align:center; } .strip-track .gallery-item[aria-hidden="true"]{ display:none; } } } /* ══════════════════ Hero CTA + trust refinement ══════════════════ */ .hero-rating{ gap:0.2rem 0.6rem; padding:0.55rem 1.1rem; margin-bottom:1.15rem; font-size:1rem; background:rgba(255,255,255,0.18); box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0 0 1px rgba(255,255,255,0.2), 0 8px 22px rgba(6,26,19,0.25); } .hero-rating .stars{ color:#ffc53d; font-size:1.05rem; letter-spacing:0.06em; text-shadow:0 1px 2px rgba(0,0,0,0.25); } .hero-rating strong{ font-size:1.2rem; font-weight:800; color:#fff; letter-spacing:-0.01em; } .hero-rating .count{ font-size:0.9rem; font-weight:600; opacity:0.9; } /* Actions: equal, generous, predictable at every width */ .hero-actions{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-bottom:1.25rem; max-width:34rem; } .hero-actions .btn{ flex:1 1 14rem; min-width:0; justify-content:center; padding:1.05rem 1.5rem; font-size:1.075rem; font-weight:750; letter-spacing:-0.005em; white-space:nowrap; } .hero-actions .btn-primary{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 12px rgba(60,80,10,0.26), 0 16px 38px var(--accent-glow); } .hero-copy-panel .hero-actions .btn-glass{ background:rgba(255,255,255,0.16); box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0 0 1.5px rgba(255,255,255,0.34); } .hero-copy-panel .hero-actions .btn-glass:hover{ background:rgba(255,255,255,0.26); } /* Trust chips: one consistent rhythm, readable on small screens */ .hero-trust{ gap:0.5rem; } .hero-trust .trust-item{ padding:0.42rem 0.9rem; font-size:0.9rem; background:rgba(255,255,255,0.14); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), inset 0 0 0 1px rgba(255,255,255,0.14); } @media (max-width:640px){ .hero-actions{ grid-template-columns:1fr; max-width:none; } .hero-actions .btn{ padding:1.1rem 1.25rem; font-size:1.05rem; } .hero-rating{ justify-content:center; padding:0.5rem 0.95rem; font-size:0.95rem; } .hero-rating strong{ font-size:1.1rem; } .hero-rating .count{ font-size:0.85rem; } .hero-trust{ gap:0.4rem; } .hero-trust .trust-item{ font-size:0.82rem; padding:0.36rem 0.7rem; } } /* ============================================================ OLYMPUS PROJECTS — 2026 refresh: alternating bands, badges, gallery, before/after, offer stack, mobile form fixes ============================================================ */ :root { --sc-green: #0a6b5b; --sc-green-dk: #063d38; --sc-tint: #eef5f3; } /* ---------- alternating section bands ---------- */ [data-section="services"], [data-section="comparison"], [data-section="area"] { background: var(--sc-tint); } [data-section="before-after"], [data-section="project-preview"], [data-section="reviews"], [data-section="guarantee"] { background: #fff; } [data-section="gallery"], [data-section="video"], [data-section="process"], [data-section="faq"], [data-section="video-reviews"] { background: linear-gradient(165deg, var(--sc-green) 0%, var(--sc-green-dk) 100%); color: var(--accent-pale); } [data-section="gallery"] h2, [data-section="video"] h2, [data-section="process"] h2, [data-section="faq"] h2, [data-section="video-reviews"] h2, [data-section="gallery"] h3, [data-section="process"] h3, [data-section="faq"] h3, [data-section="video-reviews"] h3 { color: #fff; } [data-section="gallery"] .section-head p, [data-section="video"] .section-head p, [data-section="process"] .section-head p, [data-section="faq"] .section-head p, [data-section="video-reviews"] .section-head p, [data-section="process"] .process-step p { color: rgba(255,255,255,0.82); } [data-section="gallery"] .kicker, [data-section="video"] .kicker, [data-section="process"] .kicker, [data-section="faq"] .kicker, [data-section="video-reviews"] .kicker { color: var(--accent-on-dark); } [data-section="process"] .glass, [data-section="faq"] .glass { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.16); color: var(--accent-pale); backdrop-filter: blur(6px); } [data-section="faq"] summary { color: #fff; } [data-section="faq"] .faq-body, [data-section="faq"] .faq-body p { color: rgba(255,255,255,0.85); } [data-section="process"] .step-number { background: rgba(255,255,255,0.16); color: #fff; } /* breathing room so the services block isn't glued to the hero */ [data-section="services"] { padding-top: clamp(3.5rem, 7vw, 6rem); } [data-section="results"] { padding-bottom: clamp(2.5rem, 5vw, 4rem); } /* ---------- header financing badge ---------- */ .header-badge--fin .icon { color: var(--brand-mid); } @media (max-width: 1180px) { .header-badge--fin { display: none; } } /* ---------- hero rating with Google mark ---------- */ .hero-rating .g-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.18); flex: none; } .hero-area-pill { margin-top: 0.9rem; } .hero-trust--bubbles .trust-item { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.26); border-radius: 999px; padding: 0.42rem 0.8rem; backdrop-filter: blur(6px); } /* ---------- trust strip: white cards + colorful marks ---------- */ .trust-strip-row { gap: 0.9rem; flex-wrap: wrap; } .trust-strip .trust-badge { background: #fff; border: 1px solid rgba(16,40,32,0.09); border-radius: 16px; box-shadow: 0 8px 22px -14px rgba(12,40,30,0.35); padding: 0.85rem 1.05rem; display: flex; align-items: center; gap: 0.7rem; flex: 1 1 210px; } .trust-strip .trust-badge strong { display: block; font-size: 0.95rem; color: var(--heading, #12211c); } .trust-strip .trust-badge small { display: block; font-size: 0.78rem; opacity: 0.7; } .tb-mark { width: 40px; height: 40px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; } .tb-mark--shield { background: #e8f1ff; color: #1a73e8; } .tb-mark--star { background: #fff5e0; color: #f4b400; } .tb-mark--home { background: var(--accent-chip-bg); color: var(--brand-mid); } .tb-mark--card { background: #f1ecff; color: #6b4dd6; } .trust-badge--google .g-mark { width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid rgba(16,40,32,0.1); display: inline-flex; align-items: center; justify-content: center; flex: none; } .trust-badge--google .g-stars { color: #f4b400; letter-spacing: 0.5px; } /* ---------- lead form: cleaner frame + mobile ---------- */ .hero-form-card { border: 1px solid rgba(16,40,32,0.10); border-radius: 22px; box-shadow: 0 30px 60px -34px rgba(10,40,30,0.45); background: #fff; } .hero-form-card .lead-form input, .hero-form-card .lead-form textarea { background: #fbfcfb; border: 1px solid rgba(16,40,32,0.16); border-radius: 12px; font-size: 16px; padding: 0.85rem 0.95rem; width: 100%; } .bh-preview__phone--solo { display: block; } .bh-preview__phone--solo input { width: 100%; } @media (max-width: 760px) { .hero-form-card { padding: 1.15rem; border-radius: 18px; } .hero-form-card h2 { font-size: 1.45rem; } .hero-form-card .lead-form { display: grid; grid-template-columns: 1fr; gap: 0.7rem; } .hero-form-card .lead-form .btn { width: 100%; } .hero-form-card .form-privacy { font-size: 0.8rem; } } /* ---------- gallery grid ---------- */ .gal-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .gal-tile { margin: 0; position: relative; border-radius: 18px; overflow: hidden; background: #0b1f18; } .gal-tile img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .6s ease; } .gal-tile:hover img { transform: scale(1.05); } .gal-tile figcaption { position: absolute; inset: auto 0 0 0; padding: 1.4rem 1rem 0.85rem; background: linear-gradient(180deg, transparent, rgba(6,20,15,0.82)); color: #fff; display: flex; flex-direction: column; gap: 0.1rem; } .gal-tile figcaption strong { font-size: 0.98rem; } .gal-tile figcaption span { font-size: 0.8rem; opacity: 0.85; } /* ---------- before / after ---------- */ .ba-grid { display: grid; gap: 1.25rem; } .ba-card { border: 1px solid rgba(16,40,32,0.1); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px -30px rgba(10,40,30,0.5); } .ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(16,40,32,0.12); } .ba-half { position: relative; } .ba-half img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .ba-tag { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2; font-size: 0.7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; color: #fff; } .ba-tag--before { background: rgba(20,24,22,0.78); } .ba-tag--after { background: var(--sc-green); } .ba-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; align-items: baseline; padding: 0.85rem 1.1rem; } .ba-meta strong { font-size: 1rem; } .ba-meta span { font-size: 0.85rem; opacity: 0.7; } @media (min-width: 900px) { .ba-grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- client video slots ---------- */ .vr-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .vr-slot { aspect-ratio: 16/9; border-radius: 18px; background: rgba(255,255,255,0.08); border: 1px dashed rgba(255,255,255,0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; color: rgba(255,255,255,0.85); text-align: center; padding: 1rem; } .vr-play { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.16); display: grid; place-items: center; font-size: 1.1rem; } .vr-note { font-size: 0.85rem; max-width: 22ch; } /* ---------- offer stack ---------- */ .offer-stack .offer-lead { margin-bottom: 0.9rem; } .offer-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.55rem; } .offer-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 1rem; line-height: 1.5; } .offer-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-b); color: var(--accent-ink); font-size: 0.8rem; font-weight: 800; display: grid; place-items: center; margin-top: 2px; } .offer-guarantee { border-left: 3px solid var(--accent-b); padding: 0.6rem 0 0.6rem 0.9rem; margin: 0 0 0.8rem; font-size: 0.97rem; } .vr-slot--wide { max-width: 960px; margin: 0 auto; } @media (max-width: 720px) { .lead-form .field, .lead-form .form-row, .lead-form input, .lead-form textarea { width: 100% !important; grid-column: 1 / -1 !important; } } /* ===== Brands & Awards ===== */ .brands-subhead { text-align:center; margin: 56px 0 24px; font-size: clamp(20px,2.4vw,28px); font-weight:800; color:var(--heading); } .brand-grid, .award-grid { list-style:none; margin:32px 0 0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(6,1fr); } .brand-card { background:#fff; border:1px solid rgba(16,54,38,.09); border-radius:16px; padding:22px 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:104px; box-shadow:0 8px 24px -18px rgba(9,40,27,.5); } .brand-name { font-weight:800; letter-spacing:-.02em; font-size:19px; color:var(--neutral-950); } .brand-sub { font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#7b8b83; font-weight:700; } .award-grid { grid-template-columns:repeat(3,1fr); gap:18px; } .award-card { background:#fff; border:1px solid rgba(16,54,38,.09); border-radius:18px; padding:20px; display:flex; align-items:center; gap:16px; box-shadow:0 12px 30px -22px rgba(9,40,27,.6); } .aw-icon { flex:0 0 auto; width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:#f3f6f4; } .aw-body { display:flex; flex-direction:column; line-height:1.3; } .aw-body strong { font-size:16px; color:var(--heading); font-weight:800; } .aw-body span { font-size:13px; color:#69786f; } .aw-mark { font-weight:900; font-size:14px; letter-spacing:-.02em; color:#fff; padding:5px 8px; border-radius:8px; } .aw-angi { background:#ff6153; } .aw-houzz { background:#4dbc15; } .aw-yelp { background:#d32323; } .aw-bbb { background:#005a78; } .aw-cslb { background:var(--neutral-950); font-size:12px; } @media (max-width: 980px) { .brand-grid { grid-template-columns:repeat(3,1fr); } .award-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width: 620px) { .brand-grid { grid-template-columns:repeat(2,1fr); } .award-grid { grid-template-columns:1fr; } } /* ── Hero testimonials rotator ─────────────────────────────────────── */ .testimonials-strip { padding: 2.5rem 0 0.5rem; } .tq-card { position: relative; background: #fff; border: 1px solid rgba(11, 61, 43, 0.1); border-radius: 22px; box-shadow: 0 18px 44px -28px rgba(11, 61, 43, 0.35); padding: 1.5rem 1.25rem 1.1rem; } .tq-head { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: baseline; justify-content: space-between; margin-bottom: 0.85rem; } .tq-title { font-size: clamp(1.15rem, 3.6vw, 1.5rem); margin: 0; letter-spacing: -0.01em; } .tq-rating { margin: 0; font-size: 0.92rem; color: rgba(11, 61, 43, 0.7); } .tq-rating strong { color: var(--brand-mid); } .tq-viewport { position: relative; min-height: 170px; } .tq-slide { margin: 0; position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s; } .tq-slide.is-active { opacity: 1; visibility: visible; transform: none; position: relative; } .tq-stars { color: #f5a623; letter-spacing: 2px; font-size: 1rem; } .tq-quote { margin: 0.5rem 0 0.9rem; font-size: clamp(1rem, 2.9vw, 1.18rem); line-height: 1.55; font-weight: 600; } .tq-meta { display: flex; flex-direction: column; gap: 0.15rem; } .tq-name { font-weight: 800; } .tq-sub { font-size: 0.86rem; color: rgba(11, 61, 43, 0.65); } .tq-dots { display: flex; gap: 0.45rem; justify-content: center; margin-top: 0.9rem; } .tq-dot { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; cursor: pointer; background: rgba(11, 61, 43, 0.2); transition: background 0.2s ease, width 0.2s ease; } .tq-dot.is-active { background: var(--brand-mid); width: 26px; } @media (min-width: 720px) { .tq-card { padding: 1.9rem 2rem 1.4rem; } .tq-viewport { min-height: 150px; } } @media (prefers-reduced-motion: reduce) { .tq-slide { transition: none; } } /* ── Mini FAQ under hero ───────────────────────────────────────────── */ .mini-faq { padding: 2.75rem 0 0.5rem; } .mini-faq-head { text-align: center; max-width: 44ch; margin: 0 auto 1.35rem; } .mini-faq-eyebrow { margin: 0 0 0.35rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-mid); } .mini-faq-title { margin: 0; font-size: clamp(1.4rem, 4.4vw, 2rem); letter-spacing: -0.02em; } .mini-faq-grid { display: grid; gap: 0.7rem; } .mini-faq-item { background: #fff; border: 1px solid rgba(11, 61, 43, 0.11); border-radius: 16px; box-shadow: 0 12px 30px -26px rgba(11, 61, 43, 0.4); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .mini-faq-item[open] { border-color: rgba(14, 106, 73, 0.35); box-shadow: 0 16px 36px -26px rgba(11, 61, 43, 0.5); } .mini-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; min-height: 56px; font-weight: 750; font-size: 1.02rem; cursor: pointer; list-style: none; } .mini-faq-q::-webkit-details-marker { display: none; } .mini-faq-q:hover { color: var(--brand-mid); } .mini-faq-chevron { flex: none; color: var(--brand-mid); transition: transform 0.25s ease; } .mini-faq-item[open] .mini-faq-chevron { transform: rotate(180deg); } .mini-faq-a { padding: 0 1.15rem 1.1rem; } .mini-faq-a p { margin: 0; color: rgba(11, 61, 43, 0.78); line-height: 1.6; } .mini-faq-cta { margin-top: 1.35rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; justify-content: center; text-align: center; } .mini-faq-cta p { margin: 0; font-weight: 650; color: rgba(11, 61, 43, 0.8); } @media (min-width: 860px) { .mini-faq-grid { grid-template-columns: 1fr 1fr; align-items: start; } } @media (prefers-reduced-motion: reduce) { .mini-faq-chevron { transition: none; } } /* ============================================================ 2026 differentiation pass: hero offer, county chips, softer bands, compact brands band ============================================================ */ /* hero: offer card */ .hero-offer { margin-top: 1rem; border-radius: 18px; padding: 0.95rem 1.05rem 0.9rem; background: linear-gradient(150deg, rgba(16,166,132,0.26), rgba(6,47,42,0.55)); border: 1px solid rgba(255,255,255,0.24); backdrop-filter: blur(10px); box-shadow: 0 22px 48px -30px rgba(0,0,0,0.6); } .hero-offer-tag { display: inline-block; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: 0.55rem; } .hero-offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; } .hero-offer-list li { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.94rem; line-height: 1.45; color: var(--on-dark); } .hero-offer-list li::before { content: "✓"; color: #6fe3bd; font-weight: 900; flex: none; } .ho-amt { font-weight: 850; color: #fff; } .hero-offer-promise { margin: 0.7rem 0 0; padding-top: 0.65rem; border-top: 1px solid rgba(255,255,255,0.18); font-size: 0.86rem; line-height: 1.5; color: var(--on-dark-muted); } .hero-offer-promise strong { color: #fff; } /* hero: counties as separate chips */ .hero-area { margin-top: 1rem; } .hero-area-label { display: block; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 0.45rem; } .hero-counties { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .hero-counties li { font-size: 0.82rem; font-weight: 700; color: var(--on-dark); background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); border-radius: 10px; padding: 0.32rem 0.6rem; backdrop-filter: blur(6px); } /* trust strip additions */ .tb-mark--fb { background: #e7f0fe; color: #1877f2; } /* softer bands — kill the pale white */ [data-section="before-after"], [data-section="reviews"] { background: linear-gradient(180deg, var(--surface-light-top) 0%, var(--surface-light-bot) 100%); } [data-section="project-preview"] { background: #f6faf8; } [data-section="guarantee"] { background: #f1f7f5; } [data-section="brands"] { background: linear-gradient(180deg, var(--surface-light-bot) 0%, var(--surface-light-top) 100%); } /* compact brands + awards band */ .band-compact { padding-top: clamp(2.5rem, 5vw, 3.75rem); padding-bottom: clamp(2.5rem, 5vw, 3.75rem); } .band-compact .brand-grid { gap: 0.6rem; } .band-compact .brand-card { padding: 0.7rem 0.6rem; } .band-compact .brands-subhead { margin-top: 1.5rem; font-size: 1.05rem; } .band-compact .award-grid { gap: 0.6rem; } .band-compact .award-card { padding: 0.65rem 0.75rem; } .band-compact .award-card strong { font-size: 0.9rem; } .band-compact .award-card span { font-size: 0.76rem; } .aw-fb { background: #1877f2; color: #fff; font-weight: 900; font-family: Georgia, serif; width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; } /* awards: real badge images */ .badge-grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 720px) { .badge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1080px) { .badge-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .badge-card { background: #fff; border: 1px solid rgba(6,47,42,0.09); border-radius: 14px; padding: 0.7rem 0.8rem; display: grid; place-items: center; box-shadow: 0 12px 26px -22px rgba(6,47,42,0.5); } .badge-card img { width: 100%; height: 48px; object-fit: contain; } /* ══════════════ V2 — modern type + clean hero ══════════════ */ h1, h2, h3, h4, .ho2-title, .ho2-amt, .hr-num, .phone-number, .btn { font-family: var(--font-display); letter-spacing: -0.02em; } h1 { font-weight: 800; } h2, h3 { font-weight: 700; } /* Flat header — no competitor pill */ .site-header { padding-top: 0; } .header-pill { border-radius: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,0.14); background: rgba(6, 33, 29, 0.42); box-shadow: none; padding: 0.55rem 1.25rem; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); } .site-header .container { padding-inline: 0; max-width: none; } .site-header.scrolled .header-pill { background: rgba(6, 33, 29, 0.92); box-shadow: 0 10px 30px rgba(0,0,0,0.25); } .header-badge, .phone-label, .phone-number { color: #fff; } /* Hero shell */ .hero { min-height: 0; padding-bottom: 2.5rem; } .hero-grid { align-items: start; } .hero-copy-panel { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; } .hero-copy-panel h1 { font-size: clamp(2.35rem, 5.6vw, 4rem); line-height: 1.02; margin: 0.9rem 0 0.7rem; text-wrap: balance; } .hero-lede { color: rgba(255,255,255,0.86); font-size: 1.075rem; max-width: 34rem; margin: 0 0 1.1rem; } /* Review row */ .hero-reviews { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; } .hr-score { display: flex; align-items: baseline; gap: 0.4rem; } .hr-num { font-size: 1.65rem; font-weight: 800; color: #fff; line-height: 1; } .hr-stars { color: #ffc94d; font-size: 1rem; letter-spacing: 0.06em; } .hr-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-width: 0; } .hr-logos { display: inline-flex; align-items: center; gap: 0.3rem; } .hr-logo { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .hr-text { font-size: 0.875rem; line-height: 1.35; color: rgba(255,255,255,0.82); max-width: 22rem; } .hr-text strong { color: #fff; } /* Service chips — flatter, no glass bubbles */ .hero-chips { gap: 0.4rem 0.45rem; margin-bottom: 1.35rem; } .hero-chips li { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 8px; padding: 0.3rem 0.6rem; font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.92); letter-spacing: 0.01em; } /* Offer card */ .hero-offer2 { border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(244,252,248,0.97)); color: var(--heading); padding: 1rem 1.1rem 1.05rem; box-shadow: 0 18px 44px rgba(0,0,0,0.28); max-width: 36rem; margin-bottom: 1.25rem; } .ho2-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.8rem; } .ho2-badge { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); padding: 0.25rem 0.5rem; border-radius: 6px; } .ho2-title { font-size: 1.12rem; font-weight: 800; } .ho2-note { font-size: 0.8rem; font-weight: 600; color: var(--muted); } .ho2-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.05rem 0; border-top: 1px solid rgba(6,47,42,0.10); } .ho2-grid li { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid rgba(6,47,42,0.10); } .ho2-grid li:nth-child(odd) { border-right: 1px solid rgba(6,47,42,0.10); } .ho2-grid li:nth-child(even) { padding-left: 0.85rem; } .ho2-amt { font-size: 1rem; font-weight: 800; color: var(--brand-mid); letter-spacing: -0.01em; } .ho2-lbl { font-size: 0.88rem; line-height: 1.35; font-weight: 700; color: var(--muted); } .ho2-promise { margin: 0.8rem 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--muted); } .ho2-promise strong { color: var(--heading); } .ho2-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.7rem; font-size: 0.85rem; font-weight: 800; color: var(--brand-green-700, #14664c); text-decoration: none; border-bottom: 2px solid color-mix(in oklab, var(--accent-a) 65%, transparent); } .ho2-link:hover { color: var(--heading); } /* Counties — bold, no bubble */ .hero-area2 { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 1.35rem; } .ha2-label, .ha2-suffix { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); } .ha2-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem; margin: 0; padding: 0; } .ha2-list li { font-family: var(--font-display); font-size: clamp(0.95rem, 1.5vw, 1.1rem); font-weight: 800; color: #fff; position: relative; } .ha2-list li + li::before { content: ""; position: absolute; left: -0.4rem; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--accent-b); transform: translateY(-50%); } /* Three hero shots — the first thing customers see */ .hero-shots { list-style: none; margin: 1.5rem 0 0.6rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.6rem; } .hero-shots li { margin: 0; } .hero-shots img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 14px 34px rgba(0,0,0,0.3); } .hero-shots-note { margin: 0; font-size: 0.82rem; color: rgba(255,255,255,0.72); } .hero-shots-note a { color: var(--accent-on-dark); } @media (max-width: 860px) { .hero-copy-panel h1 { font-size: clamp(2.1rem, 8.5vw, 2.9rem); } .ho2-grid { grid-template-columns: 1fr; } .ho2-grid li:nth-child(odd) { border-right: 0; } .ho2-grid li:nth-child(even) { padding-left: 0; } .hr-text { max-width: 100%; font-size: 0.82rem; } .hero-shots { gap: 0.45rem; } .hero-shots img { border-radius: 11px; } } /* Hero legibility + density pass */ .hero-scrim { background: linear-gradient(180deg, rgba(4,26,23,0.86) 0%, rgba(4,26,23,0.62) 38%, rgba(4,26,23,0.78) 100%), linear-gradient(90deg, rgba(4,26,23,0.72) 0%, rgba(4,26,23,0.25) 70%); } .hero-offer2 { padding: 0.85rem 0.95rem 0.9rem; } .ho2-grid li { padding-top: 0.5rem; padding-bottom: 0.5rem; } .ho2-amt { font-size: 0.95rem; } .ho2-lbl { font-size: 0.85rem; } .ho2-promise { font-size: 0.8rem; } .hero-area2 { gap: 0.35rem 0.5rem; } @media (max-width: 860px) { .hero-copy-panel h1 { font-size: clamp(1.95rem, 7.6vw, 2.6rem); margin-bottom: 0.55rem; } .hero-lede { font-size: 0.98rem; margin-bottom: 0.9rem; } .hero-chips { margin-bottom: 1rem; } .hero-chips li { font-size: 0.76rem; padding: 0.26rem 0.5rem; } .hero-offer2 { margin-bottom: 1rem; } .ha2-list li { font-size: 0.95rem; } .hero { padding-bottom: 1.75rem; } } .hero-area2 { display: block; } .ha2-label { display: block; margin-bottom: 0.3rem; } .ha2-list { gap: 0.2rem 0.85rem; } /* ---------- Lime accent: dark ink on all lime surfaces ---------- */ .btn-primary, .header-phone-icon, .hero-points .icon, .success-icon, .compare-col-icon, .step-number, .thanks-icon, .ho2-badge, .compare-cta .btn-primary { color: var(--accent-ink); } .btn-primary { text-shadow: none; } /* ---------- Multi-platform review badge ---------- */ .trust-badge--platforms .tb-logos { display: inline-flex; align-items: center; flex: none; } .trust-badge--platforms .tb-logo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 26, 12, 0.14), inset 0 0 0 1px rgba(20, 26, 12, 0.07); } .trust-badge--platforms .tb-logo + .tb-logo { margin-left: -10px; } .trust-badge--platforms .tb-logo:nth-child(1) { z-index: 3; } .trust-badge--platforms .tb-logo:nth-child(2) { z-index: 2; } .trust-badge--platforms .tb-logo:nth-child(3) { z-index: 1; } .trust-badge--platforms .tb-logos { flex-direction: row !important; flex-wrap: nowrap; gap: 0; width: auto; height: auto; background: none; box-shadow: none; padding: 0; } /* ===== Real brand logo wall ===== */ .brand-grid--logos { grid-template-columns:repeat(6,1fr); gap:14px; margin-top:28px; } .brand-grid--logos .brand-card { background:linear-gradient(180deg,#fff, #f7faf7); border:1px solid rgba(16,54,38,.10); border-radius:18px; padding:20px 16px 14px; min-height:128px; gap:12px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .brand-grid--logos .brand-card:hover { transform:translateY(-4px); border-color:rgba(16,54,38,.18); box-shadow:0 22px 44px -26px rgba(9,40,27,.55); } .brand-logo { display:flex; align-items:center; justify-content:center; width:100%; height:52px; } .brand-logo img { max-width:100%; max-height:52px; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.62; transition:filter .25s ease, opacity .25s ease; } .brand-grid--logos .brand-card:hover .brand-logo img { filter:none; opacity:1; } .brand-grid--logos .brand-sub { font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#8a978f; font-weight:700; text-align:center; line-height:1.4; } @media (max-width: 980px) { .brand-grid--logos { grid-template-columns:repeat(3,1fr); } } @media (max-width: 620px) { .brand-grid--logos { grid-template-columns:repeat(2,1fr); gap:10px; } .brand-grid--logos .brand-card { min-height:104px; padding:16px 12px 12px; } .brand-logo, .brand-logo img { height:38px; max-height:38px; } } /* ========================================================================== Hero v3 — centered layout, clean photo strip, richer offer card ========================================================================== */ /* Center the hero row: the form dock now lives inside the container grid. */ .hero { justify-content: center; } .hero > .container.hero-grid { margin-inline: auto; } /* ---------- Serving row ---------- */ .hero-area3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.5rem; margin: 0 0 1.15rem; } .ha3-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.62); } .ha3-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; } .ha3-list li { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; color: rgba(255,255,255,0.94); padding: 0.3rem 0.65rem; border: 1px solid rgba(255,255,255,0.26); border-radius: 999px; background: rgba(255,255,255,0.08); } /* ---------- Offer card ---------- */ .hero-offer3 { position: relative; margin: 0 0 1.15rem; padding: 1.1rem 1.15rem 1.15rem; border-radius: 20px; color: var(--accent-pale); background: radial-gradient(120% 140% at 100% 0%, rgba(194,212,77,0.22) 0%, rgba(194,212,77,0) 58%), linear-gradient(165deg, rgba(16,22,10,0.92) 0%, rgba(24,32,14,0.94) 100%); border: 1px solid rgba(194,212,77,0.32); box-shadow: 0 22px 48px -26px rgba(0,0,0,0.65); overflow: hidden; } .hero-offer3::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); } .ho3-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; } .ho3-flag { font-size: 0.66rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); padding: 0.28rem 0.6rem; border-radius: 6px; } .ho3-deadline { display: inline-flex; align-items: center; gap: 0.34rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; color: var(--accent-on-dark-soft); padding: 0.26rem 0.6rem; border: 1px solid rgba(219,233,166,0.34); border-radius: 999px; } .ho3-title { font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0.75rem 0 0.3rem; color: #fff; } .ho3-sub { margin: 0 0 0.9rem; font-size: 0.86rem; line-height: 1.5; color: rgba(244,247,234,0.74); } .ho3-list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; } .ho3-list li { display: flex; align-items: flex-start; gap: 0.5rem; } .ho3-check { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 999px; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); } .ho3-text { display: grid; gap: 0.1rem; min-width: 0; } .ho3-text strong { font-size: 0.9rem; font-weight: 800; color: #fff; letter-spacing: -0.005em; } .ho3-text span { font-size: 0.78rem; line-height: 1.4; color: rgba(244,247,234,0.68); } .ho3-promise { margin: 0 0 0.95rem; padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; line-height: 1.5; color: rgba(244,247,234,0.7); } .ho3-promise strong { color: var(--accent-on-dark-soft); } .ho3-cta { width: 100%; justify-content: center; } /* ---------- Clean photo strip (3-up, auto paging) ---------- */ .shots-panel { margin: 1.35rem 0 0; padding: 0.9rem 0.9rem 0.75rem; border-radius: 20px; background: rgba(255,255,255,0.94); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 24px 54px -30px rgba(10,18,6,0.55); } .shots-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0 0.15rem 0.65rem; } .shots-eyebrow { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-mid); } .shots-link { font-size: 0.78rem; font-weight: 700; color: var(--heading); text-decoration: none; border-bottom: 1px solid rgba(25,29,18,0.28); } .shots-link:hover { border-bottom-color: var(--brand-mid); color: var(--brand-mid); } .shots-viewport { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .shots-viewport::-webkit-scrollbar { display: none; } .shots-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; } .shots-slide figure { margin: 0; } .shots-slide img { display: block; width: 100%; height: clamp(96px, 13vw, 158px); object-fit: cover; border-radius: 13px; background: #e9ece2; } .shots-dots { display: flex; justify-content: center; gap: 0.35rem; margin-top: 0.7rem; } .shots-dot { width: 22px; height: 5px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(25,29,18,0.16); transition: background 0.2s ease, width 0.2s ease; } .shots-dot.is-on { background: var(--brand-mid); width: 32px; } @media (max-width: 979px) { .ho3-list { grid-template-columns: 1fr; } .shots-panel { margin-top: 1.1rem; } } @media (max-width: 560px) { .hero-offer3 { padding: 0.95rem 0.95rem 1rem; border-radius: 18px; } .ho3-title { margin-top: 0.65rem; } .shots-panel { padding: 0.7rem 0.7rem 0.6rem; border-radius: 17px; } .shots-slide { gap: 0.4rem; } .shots-slide img { height: 92px; border-radius: 11px; } .ha3-list li { font-size: 0.78rem; padding: 0.26rem 0.55rem; } } /* Accent unification: no mint/teal leftovers */ .hero h1 .grad, .hero-copy-panel h1 .grad { color: var(--accent-on-dark); background: none; -webkit-text-fill-color: currentColor; } .hero-area-pill .icon, .hero-trust .icon, .owner-chips .icon, .final-phone-line a { color: var(--accent-on-dark); } [data-slot="lead-form"] .lead-form .btn-primary { background: linear-gradient(135deg, var(--accent-a), var(--accent-b)) !important; border-color: var(--accent-b) !important; color: var(--accent-ink) !important; } /* ---------- Display type ---------- */ h1, h2, h3, .hero-title, .section-title, .sec-title, .offer-title, .cta-title, .faq-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; } h1 strong, h2 strong, .hero-title strong { font-weight: 800; } /* ---------- Hero: lighter photo, centered stack, review bubble ---------- */ .hero-scrim { background: linear-gradient(180deg, rgba(6,22,20,0.46) 0%, rgba(6,22,20,0.26) 42%, rgba(6,22,20,0.52) 100%); } .hero-copy-panel { max-width: 62rem; margin-inline: auto; text-align: center; } .hero-copy-panel h1 { margin-inline: auto; max-width: 22ch; text-shadow: 0 2px 18px rgba(0,0,0,0.35); } .hero-lede { margin-inline: auto; text-align: center; max-width: 40rem; color: rgba(255,255,255,0.94); } .hero-reviews { justify-content: center; margin-inline: auto; width: max-content; max-width: 100%; gap: 0.7rem; padding: 0.5rem 1rem 0.5rem 0.85rem; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: 0 10px 26px rgba(0,0,0,0.22); } .hero-reviews .hr-text { max-width: 20rem; text-align: left; } .hero-reviews .hr-num { font-size: 1.35rem; } .hero-chips { justify-content: center; } .hero-area3 { justify-content: center; } .shots-panel { margin-inline: auto; } .hero-offer3 { margin-inline: auto; text-align: left; } .hero-offer3 .ho3-cta { display: block; } /* Logo readability in the dark header pill */ .header-logo { display: inline-flex; align-items: center; background: #fff; border-radius: 12px; padding: 0.4rem 0.7rem; box-shadow: 0 4px 14px rgba(0,0,0,0.18); } .header-logo img { display: block; width: clamp(122px, 14vw, 168px); } @media (max-width: 860px) { .hero-reviews { width: 100%; justify-content: center; padding: 0.6rem 0.8rem; } .hero-reviews .hr-text { text-align: center; max-width: 100%; } .hero-reviews .hr-meta { justify-content: center; } .header-logo { padding: 0.32rem 0.55rem; } } @media (min-width: 980px) { html.js .hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; } .hero-form-dock { width: 100%; max-width: 34rem; margin-inline: auto; } .hero-form-dock .hero-form-card { margin-inline: auto !important; } } @media (max-width: 860px) { .hero-reviews { border-radius: 20px; width: max-content; max-width: 100%; flex-direction: column; gap: 0.35rem; } .hero-reviews .hr-text { font-size: 0.8rem; } } /* ═══════════ Clean light header: logo left, phone right ═══════════ */ .site-header { padding-top: 0; } .site-header .container { padding-inline: 0; max-width: none; } .header-pill { border-radius: 0; border: 0; border-bottom: 1px solid rgba(25,29,18,0.10); background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 2px 14px rgba(16,24,10,0.06); padding: 0.5rem clamp(0.9rem, 4vw, 2rem); justify-content: space-between; } .site-header.scrolled .header-pill { background: #fff; box-shadow: 0 6px 22px rgba(16,24,10,0.12); } .header-logo { background: none !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; } .header-logo img { width: clamp(126px, 15vw, 190px); } .header-badge, .header-cta { display: none !important; } .header-actions { gap: 0.6rem; margin-left: auto; } .header-phone { color: var(--heading); } .header-phone .phone-label, .header-phone .phone-number { color: var(--heading); } /* ═══════════ Hero copy bubble ═══════════ */ .hero-copy-panel { background: rgba(9, 22, 16, 0.52) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7) !important; border-radius: 30px !important; padding: clamp(1.15rem, 3.4vw, 2.1rem) clamp(1.1rem, 3.4vw, 2.25rem) clamp(1.35rem, 3.4vw, 2.1rem) !important; text-align: center; max-width: 62rem; margin-inline: auto; } .hero-copy-panel .hero-lede { margin-inline: auto; } .hero-copy-panel .hero-chips, .hero-copy-panel .hero-reviews { justify-content: center; } /* ═══════════ Staggered 3-up photo strip (center raised) ═══════════ */ .shots-panel { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } .shots-panel-head { display: none; } .shots-slide { align-items: end; gap: clamp(0.4rem, 1.4vw, 0.8rem); padding: 0.9rem 0.1rem 0.2rem; } .shots-fig img { height: clamp(112px, 15vw, 190px); border-radius: 18px; box-shadow: 0 22px 46px -24px rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.85); } .shots-fig--mid img { height: clamp(140px, 19vw, 236px); border-radius: 20px; } .shots-dot { background: rgba(255,255,255,0.35); } .shots-dot.is-on { background: var(--accent-on-dark, #d9ee5a); } @media (max-width: 560px) { .shots-fig img { height: 96px; border-radius: 14px; } .shots-fig--mid img { height: 122px; border-radius: 16px; } .hero-copy-panel { border-radius: 24px !important; } } .hero-grid > * { min-width: 0; } .hero-copy-panel { min-width: 0 !important; width: 100%; } .hero-copy-panel h1 { overflow-wrap: break-word; } .shots-panel, .shots-viewport, .shots-slide { min-width: 0; max-width: 100%; } .shots-slide { flex: 0 0 100%; } /* ══════════════ V3 — flow, bubbles, geo band, sticky bar ══════════════ */ /* one dark surface for every dark band — no second green in the palette */ :root { --sc-green: #232c1c; --sc-green-dk: #14170e; --sc-tint: var(--neutral-100); } [data-section="gallery"], [data-section="video"], [data-section="process"], [data-section="faq"], [data-section="testimonials"], [data-section="hero-testimonials"], [data-section="video-reviews"] { background: linear-gradient(168deg, #262f20 0%, #14170e 100%); } /* soft transition into/out of the dark bands */ [data-section="gallery"] { border-top: 1px solid rgba(255,255,255,0.10); } /* dark bubbles: a touch lighter so they read on bright backgrounds */ .glass-dark { background: linear-gradient(180deg, rgba(30,52,44,0.86) 0%, rgba(22,42,35,0.90) 100%); border-color: rgba(255,255,255,0.14); } .hero-copy-panel { background: linear-gradient(180deg, rgba(68,78,63,0.80) 0%, rgba(48,59,46,0.86) 100%) !important; border-color: rgba(255,255,255,0.30) !important; box-shadow: 0 30px 72px -34px rgba(0,0,0,0.54), inset 0 1px 0 rgba(255,255,255,0.18) !important; } /* bubbles shouldn't sit flush on the band edge */ .stats-band, .guarantee-section, .cta-strip, .final-cta, .testimonials-strip { padding-top: clamp(2.75rem, 6vw, 4.5rem); padding-bottom: clamp(2.75rem, 6vw, 4.5rem); } .stats-card { padding: clamp(1.9rem, 4vw, 3rem); } /* brand + award logos in full colour (no grayscale) */ .brand-logo img, .badge-card img { filter: none !important; opacity: 1 !important; } .brand-grid--logos .brand-card:hover .brand-logo img { filter: none; opacity: 1; } /* bigger hero project photos — closer to the bathroom reference */ .shots-fig img { height: clamp(160px, 21vw, 260px); border-radius: 20px; } .shots-fig--mid img { height: clamp(196px, 26vw, 320px); border-radius: 22px; } @media (max-width: 560px) { .shots-fig img { height: 132px; border-radius: 16px; } .shots-fig--mid img { height: 164px; border-radius: 18px; } } /* ---------- service-area band ---------- */ .geo-band { padding: clamp(1.1rem, 3vw, 1.6rem) 0; background: linear-gradient(180deg, #14705d 0%, #126554 100%); } .geo-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; text-align: center; } .geo-pin { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.14); color: var(--accent-on-dark, #d9ee5a); flex: none; } .geo-copy { display: grid; gap: 0.15rem; text-align: left; } .geo-copy strong { color: #fff; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.01em; } .geo-copy span { color: rgba(255,255,255,0.78); font-size: 0.86rem; } .geo-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; } .geo-pills li { font-size: 0.82rem; font-weight: 700; color: #fff; padding: 0.34rem 0.75rem; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); } @media (max-width: 640px) { .geo-copy { text-align: center; } .geo-inner { flex-direction: column; } } /* ---------- sticky bar v2 (full-width, own look) ---------- */ .sticky-bar--v2 { left: 0; right: 0; bottom: 0; transform: none; width: auto; max-width: none; border-radius: 0; padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(18,32,26,0.94) 0%, rgba(13,25,20,0.97) 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 0; border-top: 1px solid rgba(255,255,255,0.12); box-shadow: 0 -12px 30px rgba(0,0,0,0.28); gap: 0.5rem; } .sticky-bar--v2 .btn { flex: 1 1 0; min-width: 0; font-size: 0.95rem; padding-inline: 0.6rem; } .sticky-bar--v2 .sticky-quote { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.45); } .sticky-bar--v2.hidden-bar { transform: translateY(140%); } /* lead form now lives near the bottom of the page — no hero overlap */ .hero-form-wrap { margin-top: 0 !important; padding-block: clamp(2.5rem, 6vw, 4.5rem) !important; } /* ══════════════ V4 — bright hero bubble, floating header, sticky bar ══════════════ */ /* Hero review bubble: bright white glass with ink text */ .hero-reviews { background: rgba(255,255,255,0.99) !important; border: 1px solid var(--neutral-0) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 14px 34px rgba(0,0,0,0.28) !important; } .hero-reviews .hr-num, .hero-reviews .hr-text, .hero-reviews .hr-text strong { color: var(--neutral-900) !important; } .hero-reviews .hr-stars { color: #f2a900; } .hero-reviews .hr-logo { background: #fff; box-shadow: 0 1px 4px rgba(16,24,10,0.18); } /* Header: floating rounded bar instead of a full-width square slab */ .site-header { padding-top: clamp(0.5rem, 1.6vw, 0.9rem); } .site-header .container { padding-inline: clamp(0.75rem, 3vw, 1.5rem); max-width: 82rem; margin-inline: auto; } .header-pill { border-radius: var(--radius-btn); border: 1px solid rgba(25,29,18,0.08); border-bottom: 1px solid rgba(25,29,18,0.08); background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 10px 30px rgba(16,24,10,0.12); padding: 0.45rem clamp(0.85rem, 2.4vw, 1.35rem); } .site-header.scrolled .header-pill { background: rgba(255,255,255,0.97); box-shadow: 0 12px 32px rgba(16,24,10,0.16); } /* Sticky bar: outline "Call Now" + lime "Book a Consultation" */ .sticky-bar--v2 .sticky-call { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); } .sticky-bar--v2 .sticky-book { background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); color: var(--accent-ink); border: 0; box-shadow: 0 8px 22px var(--accent-glow); } /* Hero review bubble: logos on top, then 4.9/5 + stars, then the count */ .hero-reviews { flex-direction: column !important; align-items: center; gap: 0.3rem !important; padding: 0.7rem 1.15rem !important; border-radius: 22px !important; text-align: center; } .hr-logos-row { display: flex; justify-content: center; } .hero-reviews .hr-score { align-items: center; gap: 0.3rem; } .hero-reviews .hr-num { font-size: 1.5rem; } .hr-outof { font-size: 1rem; font-weight: 700; color: var(--neutral-600); margin-right: 0.15rem; } .hero-reviews .hr-stars { font-size: 1.05rem; } .hero-reviews .hr-text { margin: 0; text-align: center !important; max-width: 22rem !important; font-size: 0.88rem; } /* Header phone: dark circle so the icon actually reads */ .header-phone .icon-wrap { background: var(--neutral-900) !important; color: var(--lime-500) !important; box-shadow: 0 4px 12px rgba(16,24,10,0.22) !important; border: 0 !important; } .header-phone .icon-wrap svg { stroke: var(--lime-500); } /* Hero review bubble v5 — logos, big stars + score on one line, clean copy */ .hero-reviews { gap: 0.42rem !important; padding: 0.75rem 1.3rem !important; } .hr-logos-row { margin-bottom: 0.05rem; } .hero-reviews .hr-logo { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; } .hr-main { display: flex; align-items: center; gap: 0.55rem; } .hero-reviews .hr-stars { font-size: 1.15rem; letter-spacing: 0.08em; color: #f2a900; line-height: 1; } .hero-reviews .hr-score { display: flex; align-items: baseline; gap: 0.28rem; } .hero-reviews .hr-num { font-size: 1.35rem; font-weight: 800; line-height: 1; } .hero-reviews .hr-outof { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-600); margin: 0; } .hero-reviews .hr-text { font-size: 0.86rem; letter-spacing: 0.01em; } /* Hero services: gentle staggered movement without turning them into bubbles */ @keyframes service-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .hero-chips li { animation: service-drift 3.2s ease-in-out infinite; box-shadow: 0 6px 14px rgba(0,0,0,0.10); } .hero-chips li:nth-child(2n) { animation-delay: -0.8s; } .hero-chips li:nth-child(3n) { animation-delay: -1.6s; } .hero-chips li:nth-child(4n) { animation-delay: -2.4s; } @media (prefers-reduced-motion: reduce) { .hero-chips li { animation: none; } } /* ══════════════ V6 — tighter palette, animated CTAs, brighter service band ══════════════ */ :root { /* one green family + one lime accent + ink. Nothing else. */ --brand-green-500: #16745f; --brand-green-600: #115d4c; --brand-green-700: #0d4b3d; } /* --- 1. Colored bands all share ONE green (no more near-black green) --- */ .band-green, [data-section="gallery"], .stats-band, .cta-strip, .final-cta, .testimonials-strip, .guarantee-section { background: linear-gradient(180deg, var(--brand-green-500) 0%, var(--brand-green-700) 100%) !important; } .band-green .kicker, .stats-band .kicker, .final-cta .kicker { color: var(--lime-400) !important; } /* --- 2. Service-area band: brighter, pins on every county --- */ .geo-band { background: linear-gradient(180deg, #1a8b70 0%, #13735e 100%); padding: clamp(1.4rem, 3.6vw, 2.1rem) 0; border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(0,0,0,0.14); } .geo-pin { background: var(--lime-500); color: var(--lime-950); width: 48px; height: 48px; } .geo-copy strong { font-size: clamp(1.1rem, 3.4vw, 1.35rem); } .geo-copy span { color: rgba(255,255,255,0.9); } .geo-pills { gap: 0.5rem; } .geo-pills li { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.34); padding: 0.42rem 0.85rem; font-size: 0.86rem; } .geo-pills .geo-pin-sm { color: var(--lime-400); flex: none; } /* --- 3. Sticky CTAs: colors swapped + animated --- */ .sticky-bar--v2 .sticky-call { background: linear-gradient(180deg, var(--accent-a), var(--accent-b)) !important; color: var(--accent-ink) !important; border: 0 !important; box-shadow: 0 8px 22px var(--accent-glow); } .sticky-bar--v2 .sticky-book { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,0.55) !important; box-shadow: none !important; } @keyframes cta-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(227,255,87,0.28); } 50% { transform: scale(1.035); box-shadow: 0 12px 30px rgba(227,255,87,0.5); } } @keyframes cta-glow { 0%, 100% { border-color: rgba(255,255,255,0.45); box-shadow: 0 0 0 0 rgba(255,255,255,0.18); } 50% { border-color: var(--lime-400); box-shadow: 0 0 0 4px rgba(227,255,87,0.14); } } .cta-pulse { animation: cta-pulse 2.2s ease-in-out infinite; } .cta-glow { animation: cta-glow 2.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .cta-pulse, .cta-glow { animation: none; } } /* header phone: shimmering lime ring on the dark circle */ .header-phone.cta-glow { border-radius: 999px; padding-inline: 0.35rem; } .header-phone.cta-glow .icon-wrap { animation: cta-pulse 2.4s ease-in-out infinite; } /* --- 4. Review bubble: 4.9/5 bold, before the stars --- */ .hr-main { gap: 0.5rem; } .hero-reviews .hr-score { align-items: baseline; gap: 0.02rem; } .hero-reviews .hr-num { font-size: 1.5rem; font-weight: 800; } .hr-slash { font-size: 1.5rem; font-weight: 800; color: var(--neutral-900); line-height: 1; } .hr-outof { display: none !important; } /* --- 5. Hero copy bubble: deep green glass instead of olive grey --- */ .hero-copy-panel { background: linear-gradient(180deg, rgba(22,116,95,0.60) 0%, rgba(13,75,61,0.74) 100%) !important; border-color: rgba(227,255,87,0.28) !important; box-shadow: 0 30px 72px -34px rgba(6,28,22,0.6), inset 0 1px 0 rgba(255,255,255,0.22) !important; } /* --- 6. Service chips: no motion --- */ .hero-chips li { animation: none !important; } /* hero copy bubble — brighter green glass */ .hero-copy-panel { background: linear-gradient(180deg, rgba(41,150,124,0.62) 0%, rgba(24,111,91,0.72) 100%) !important; border-color: rgba(227,255,87,0.42) !important; box-shadow: 0 26px 64px -30px rgba(6,28,22,0.5), inset 0 1px 0 rgba(255,255,255,0.3) !important; } /* review bubble — compact, secondary, not the hero's focal point */ .hero-reviews { display: inline-flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 0.55rem !important; width: auto !important; max-width: max-content !important; margin-inline: auto !important; padding: 0.34rem 0.7rem !important; border-radius: 999px !important; background: rgba(255,255,255,0.9) !important; box-shadow: 0 6px 16px rgba(0,0,0,0.16) !important; } .hr-logos-row { margin: 0; } .hero-reviews .hr-logo { width: 17px; height: 17px; box-shadow: none; } .hero-reviews .hr-logo svg { width: 13px; height: 13px; } .hr-logos { gap: 0.18rem; } .hr-main { gap: 0.3rem; } .hero-reviews .hr-num, .hr-slash { font-size: 0.86rem !important; } .hero-reviews .hr-stars { font-size: 0.72rem; letter-spacing: 0.04em; } .hero-reviews .hr-text { font-size: 0.72rem !important; color: var(--neutral-600) !important; max-width: none !important; } .hero-reviews .hr-text strong { font-weight: 700; color: var(--neutral-700) !important; } @media (max-width: 420px) { .hero-reviews .hr-text { font-size: 0.68rem !important; } } /* hero copy bubble — cooler forest/emerald green */ .hero-copy-panel { background: linear-gradient(180deg, rgba(26,92,84,0.66) 0%, rgba(13,62,58,0.78) 100%) !important; border-color: rgba(255,255,255,0.26) !important; box-shadow: 0 26px 64px -30px rgba(4,24,22,0.52), inset 0 1px 0 rgba(255,255,255,0.26) !important; } /* keep the review pill on one tight line */ .hero-reviews { flex-wrap: nowrap !important; gap: 0.45rem !important; } .hero-reviews .hr-text { white-space: nowrap; font-size: 0.7rem !important; } /* hero bubble: brighter panel + high-contrast rating pill at every size */ .hero-copy-panel { background: linear-gradient(180deg, rgba(30,102,92,0.76) 0%, rgba(16,71,65,0.86) 100%) !important; border-color: rgba(255,255,255,0.34) !important; } .hero-reviews { background: #fff !important; border: 1px solid rgba(16,24,10,0.10) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.22) !important; padding: 0.4rem 0.85rem !important; } .hero-reviews .hr-num, .hero-reviews .hr-slash { color: #0d1b12 !important; font-size: 0.95rem !important; font-weight: 800 !important; } .hero-reviews .hr-stars { color: #f59e0b !important; font-size: 0.82rem !important; letter-spacing: 0.05em; } .hero-reviews .hr-text { color: #3f4a3f !important; font-size: 0.75rem !important; font-weight: 600; } .hero-reviews .hr-text strong { color: #0d1b12 !important; } @media (max-width: 400px) { .hero-reviews { padding: 0.36rem 0.7rem !important; gap: 0.36rem !important; } .hero-reviews .hr-num, .hero-reviews .hr-slash { font-size: 0.9rem !important; } .hero-reviews .hr-stars { font-size: 0.76rem !important; } .hero-reviews .hr-text { font-size: 0.7rem !important; } } /* hero rating pill: typographic polish — bold score, clean rhythm */ .hero-reviews { gap: 0.5rem !important; align-items: center !important; line-height: 1 !important; } .hero-reviews .hr-main { display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; line-height: 1 !important; } .hero-reviews .hr-num { font-weight: 800 !important; letter-spacing: -0.015em !important; line-height: 1 !important; font-variant-numeric: tabular-nums; } .hero-reviews .hr-slash { font-weight: 700 !important; opacity: 0.7 !important; line-height: 1 !important; } .hero-reviews .hr-stars { line-height: 1 !important; letter-spacing: 0.06em !important; margin-top: -1px; } .hero-reviews .hr-text { line-height: 1.15 !important; letter-spacing: 0.005em !important; } /* hero bubble: whisper-soft glass shine */ .hero-copy-panel { position: relative; overflow: hidden; isolation: isolate; } .hero-copy-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 22%, rgba(255,255,255,0) 55%), radial-gradient(120% 70% at 18% -10%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 60%); } .hero-copy-panel > * { position: relative; z-index: 1; } /* ══════════════ V7: header slab + lime-tinted service chips ══════════════ */ /* Header: edge-to-edge square bar — logo left, CTA right */ .site-header { padding-top: 0 !important; } .site-header .container { max-width: none !important; margin-inline: 0 !important; padding-inline: 0 !important; } .header-pill { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-bottom: 1px solid rgba(25,29,18,0.10) !important; background: rgba(255,255,255,0.96) !important; box-shadow: 0 2px 14px rgba(16,24,10,0.08) !important; padding: 0.55rem clamp(1rem, 4vw, 2.25rem) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; } .site-header.scrolled .header-pill { background: rgba(255,255,255,0.99) !important; box-shadow: 0 3px 18px rgba(16,24,10,0.12) !important; } .header-pill .header-logo { margin-right: auto; } .header-pill .header-phone, .header-pill .btn { margin-left: auto; } @media (max-width: 900px) { .header-pill .header-badge { display: none !important; } } /* Service chips: subtle lime pop so they read on the dark hero */ .hero-chips li { border-radius: 999px !important; padding: 0.34rem 0.72rem !important; color: #f4ffd6 !important; background: linear-gradient(180deg, color-mix(in oklab, var(--accent-a) 20%, transparent), color-mix(in oklab, var(--accent-a) 9%, transparent)) !important; border: 1px solid color-mix(in oklab, var(--accent-a) 42%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 10px color-mix(in oklab, var(--accent-a) 14%, transparent) !important; letter-spacing: 0.01em; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .hero-chips li:hover { color: var(--accent-ink) !important; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)) !important; border-color: transparent !important; } /* ══════════════ V8: full-bleed header + hero brightness + summer offer ══════════════ */ .site-header .container { width: 100% !important; max-width: none !important; margin-inline: 0 !important; padding-inline: 0 !important; } /* brighter photo hero: lighter scrim so the new daylight shot reads */ .hero-scrim { background: linear-gradient(180deg, rgba(12,26,16,0.42) 0%, rgba(12,26,16,0.22) 42%, rgba(12,26,16,0.46) 100%) !important; } .hero-img { object-position: center 60%; } @media (max-width: 767px) { .hero-img { object-position: center 55%; } } /* ---------- Summer offer ---------- */ .offer-section--v8 { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-gap); } .offer-hype { position: relative; text-align: center; border-radius: 28px; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.1rem, 3.5vw, 3rem); color: #fff; background: radial-gradient(120% 90% at 50% -10%, color-mix(in oklab, var(--accent-a) 26%, transparent) 0%, transparent 62%), linear-gradient(180deg, var(--brand-green-500) 0%, var(--brand-green-700) 100%); border: 1px solid color-mix(in oklab, var(--accent-a) 45%, transparent); box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 80px -32px rgba(6,20,14,0.7), 0 0 60px -12px color-mix(in oklab, var(--accent-a) 34%, transparent); animation: offer-halo 3.6s ease-in-out infinite; } @keyframes offer-halo { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 80px -32px rgba(6,20,14,0.7), 0 0 50px -16px color-mix(in oklab, var(--accent-a) 28%, transparent); } 50% { box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 30px 80px -32px rgba(6,20,14,0.7), 0 0 90px -8px color-mix(in oklab, var(--accent-a) 48%, transparent); } } @media (prefers-reduced-motion: reduce) { .offer-hype, .oe-dot, .btn-lock { animation: none !important; } } .offer-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime-950); background: var(--accent-a); padding: 0.4rem 0.9rem; border-radius: 999px; } .oe-dot { width: 8px; height: 8px; border-radius: 50%; background: #b3231f; animation: cta-pulse 1.6s ease-in-out infinite; } .offer-mega { margin: 0.85rem 0 0; font-size: clamp(2.4rem, 11vw, 4.6rem); line-height: 0.95; letter-spacing: -0.03em; font-weight: 900; color: #fff; text-transform: uppercase; } .offer-mega-hl { color: var(--accent-a); text-shadow: 0 0 28px color-mix(in oklab, var(--accent-a) 45%, transparent); } .offer-sub { margin: 0.9rem auto 0; max-width: 46rem; font-size: clamp(1rem, 2.6vw, 1.18rem); color: rgba(255,255,255,0.86); } .offer-deadline-line { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: fit-content; margin: 1rem auto 0; padding: 0.7rem 1.35rem; border-radius: 999px; background: var(--accent-a); color: var(--accent-ink); font-size: clamp(1rem, 3.5vw, 1.25rem); font-weight: 800; box-shadow: 0 10px 30px -12px var(--accent-glow); animation: deadline-glow 2.2s ease-in-out infinite; } .offer-deadline-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.75) 50%, transparent 75%); transform: translateX(-120%); animation: deadline-shine 3.2s ease-in-out infinite; pointer-events: none; } @keyframes deadline-glow { 0%, 100% { box-shadow: 0 8px 22px -14px color-mix(in oklab, var(--accent-a) 60%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent-a) 22%, transparent), 0 16px 42px -12px color-mix(in oklab, var(--accent-a) 90%, transparent); } } @keyframes deadline-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .offer-deadline-line .offer-deadline { color: inherit; border: 0; font-weight: 900; } .offer-clock-label { margin: 1.25rem 0 0; color: var(--on-dark); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .offer-deadline { color: var(--accent-a); font-weight: 900; border-bottom: 2px solid color-mix(in oklab, var(--accent-a) 70%, transparent); } .offer-clock { display: flex; justify-content: center; align-items: flex-end; gap: 0.35rem; margin-top: 0.55rem; } .oc-cell { min-width: clamp(58px, 16vw, 86px); padding: 0.7rem 0.35rem 0.55rem; border-radius: 12px; background: var(--neutral-0); color: var(--heading); border: 2px solid color-mix(in oklab, var(--accent-a) 55%, transparent); box-shadow: 0 10px 28px -16px var(--accent-glow); } .oc-num { display: block; font-size: clamp(1.55rem, 6vw, 2.25rem); font-weight: 900; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; } .oc-lbl { display: block; margin-top: 0.3rem; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-green-700); } .oc-sep { font-size: 1.4rem; font-weight: 800; color: rgba(255,255,255,0.4); padding-bottom: 1.1rem; } /* compact clock used next to the "Offer ends" note in the hero offer block */ .offer-clock--mini { position: relative; justify-content: center; align-items: stretch; gap: 0.25rem; margin: 0.85rem auto 0; flex-wrap: nowrap; width: fit-content; padding: 0.45rem 0.6rem; border-radius: 16px; background: linear-gradient(180deg, #0f3a25, #082018); border: 1.5px solid color-mix(in oklab, var(--accent-a, #c2d44d) 65%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-a, #c2d44d) 16%, transparent), 0 14px 34px -18px rgba(0,0,0,0.75); animation: mini-clock-pulse 2.6s ease-in-out infinite; } @keyframes mini-clock-pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-a, #c2d44d) 14%, transparent), 0 14px 34px -18px rgba(0,0,0,0.75); } 50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--accent-a, #c2d44d) 22%, transparent), 0 18px 40px -16px rgba(0,0,0,0.8); } } .offer-clock--mini .oc-cell { min-width: clamp(46px, 12vw, 60px); padding: 0.3rem 0.3rem 0.28rem; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); } .offer-clock--mini .oc-num { font-size: clamp(1.05rem, 3.8vw, 1.4rem); color: var(--accent-a, #c2d44d); text-shadow: 0 0 14px color-mix(in oklab, var(--accent-a, #c2d44d) 55%, transparent); } .offer-clock--mini .oc-lbl { margin-top: 0.1rem; font-size: 0.5rem; letter-spacing: 0.12em; color: rgba(255,255,255,0.68); } .offer-clock--mini .oc-sep { display: flex; align-items: center; padding: 0 0.05rem 0.35rem; font-size: 1rem; color: color-mix(in oklab, var(--accent-a, #c2d44d) 70%, transparent); animation: mini-clock-blink 1s steps(1, end) infinite; } @keyframes mini-clock-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .offer-clock--mini, .offer-clock--mini .oc-sep { animation: none; } } .offer-cards { list-style: none; margin: clamp(1.5rem, 4vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: 1fr; text-align: left; } @media (min-width: 720px) { .offer-cards { grid-template-columns: repeat(3, 1fr); } .offer-cardlet--wide { grid-column: 1 / -1; } } .offer-cardlet { position: relative; padding: 1rem 1rem 1.05rem 1rem; border-radius: 18px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); } .oc-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-a); color: var(--lime-950); font-weight: 900; font-size: 0.82rem; } .oc-kicker { margin: 0.55rem 0 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .oc-title { margin: 0.35rem 0 0.25rem; font-size: 1.12rem; font-weight: 800; color: #fff; } .oc-title em { font-style: normal; font-weight: 700; font-size: 0.86rem; color: var(--accent-a); } .oc-copy { margin: 0; font-size: 0.92rem; color: rgba(255,255,255,0.8); } .oc-copy em { color: var(--accent-a); font-style: normal; font-weight: 700; } .offer-cards--center { text-align: center; } .offer-cards--center .offer-cardlet { display: flex; flex-direction: column; align-items: center; padding: 1.15rem 1.1rem 1.25rem; } .offer-cards--center .oc-badge { width: 52px; height: 52px; font-size: 1.5rem; background: linear-gradient(180deg, var(--accent-a), color-mix(in oklab, var(--accent-a) 78%, #0d1a12)); color: var(--accent-ink, #16210f); border: 1px solid color-mix(in oklab, #fff 55%, transparent); box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent-a) 16%, transparent), 0 12px 26px -14px color-mix(in oklab, var(--accent-a) 85%, transparent); } .offer-cards--center .oc-copy { max-width: 34rem; margin-inline: auto; } .oc-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.8rem; } .oc-pick { margin: 0; text-align: center; } .oc-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #fff; } .oc-pick figcaption { margin-top: 0.35rem; font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.85); } .beatit { margin-top: clamp(1.6rem, 4vw, 2.4rem); padding: clamp(1.25rem, 3.5vw, 2rem) 1rem; border-radius: 22px; text-align: center; background: linear-gradient(180deg, color-mix(in oklab, var(--accent-a) 16%, transparent), rgba(255,255,255,0.04)); border: 1px dashed color-mix(in oklab, var(--accent-a) 55%, transparent); } .beatit-kicker { margin: 0; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; color: color-mix(in oklab, var(--accent-a) 85%, #fff); } .beatit-title { margin: 0.35rem 0 0; font-size: clamp(1.9rem, 8vw, 3.1rem); font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; color: #fff; } .beatit-copy { margin: 0.8rem auto 0; max-width: 40rem; font-size: clamp(0.98rem, 2.6vw, 1.1rem); color: rgba(255,255,255,0.88); } .beatit-copy strong { color: #fff; } .beatit-prize { margin: 0.6rem 0 0; font-size: clamp(1.6rem, 7vw, 2.5rem); font-weight: 900; color: var(--accent-a); text-shadow: 0 0 26px color-mix(in oklab, var(--accent-a) 50%, transparent); } .beatit-fine { margin: 0.5rem 0 0; font-size: 0.84rem; color: rgba(255,255,255,0.66); } .offer-lock { margin-top: clamp(1.4rem, 4vw, 2rem); display: flex; flex-direction: column; align-items: center; gap: 0.7rem; } .btn-lock { width: min(100%, 26rem); justify-content: center; background: var(--accent-a); color: var(--lime-950); font-weight: 900; font-size: 1.06rem; padding: 0.95rem 1.4rem; border-radius: 999px; border: 0; box-shadow: 0 12px 34px -12px color-mix(in oklab, var(--accent-a) 70%, transparent); animation: lock-glow 2.4s ease-in-out infinite; } @keyframes lock-glow { 0%, 100% { transform: translateY(0); box-shadow: 0 10px 28px -14px color-mix(in oklab, var(--accent-a) 60%, transparent); } 50% { transform: translateY(-2px); box-shadow: 0 18px 44px -12px color-mix(in oklab, var(--accent-a) 85%, transparent); } } .btn-lock-ghost { width: min(100%, 26rem); justify-content: center; background: transparent; color: #fff; font-weight: 700; border: 1.5px solid rgba(255,255,255,0.45); border-radius: 999px; padding: 0.8rem 1.4rem; } .offer-hype .offer-fine { margin: 0.5rem auto 0; max-width: 42rem; font-size: 0.76rem; color: rgba(255,255,255,0.6); } /* ---------- Free signature gift (emoji cards) ---------- */ .oc-gifts { display: grid; gap: 0.75rem; margin-top: 1rem; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 860px) { .oc-gifts { grid-template-columns: 1fr auto 1fr; } } .oc-gift { position: relative; overflow: hidden; text-align: center; padding: 2rem 1.15rem 1.4rem; border-radius: 22px; background: radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--accent-a) 14%, #fff), #fff 62%); color: var(--heading); border: 1px solid color-mix(in oklab, var(--accent-a) 40%, transparent); box-shadow: 0 22px 48px -28px rgba(8,20,14,0.55), inset 0 1px 0 #fff; transition: transform 0.35s ease, box-shadow 0.35s ease; } .oc-gift:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -26px rgba(8,20,14,0.6); } .oc-gift-ribbon { position: absolute; top: 0.9rem; left: 50%; transform: translateX(-50%); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-ink, #16210f); background: var(--accent-a); padding: 0.28rem 0.7rem; border-radius: 999px; box-shadow: 0 6px 18px -10px color-mix(in oklab, var(--accent-a) 90%, transparent); } .oc-gift-emoji, .oc-gift-icon { display: inline-flex; align-items: center; justify-content: center; margin-top: 1rem; width: 84px; height: 84px; border-radius: 50%; font-size: 2rem; line-height: 1; background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--accent-a) 18%, #fff)); border: 1px solid color-mix(in oklab, var(--accent-a) 55%, transparent); box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent-a) 10%, transparent), 0 14px 30px -18px rgba(8,20,14,0.5); } .oc-gift-icon img { width: 52px; height: 52px; object-fit: contain; display: block; } .oc-gift-name { margin: 0.9rem 0 0; font-size: clamp(1.08rem, 3.4vw, 1.3rem); font-weight: 900; color: var(--heading); letter-spacing: -0.015em; text-wrap: balance; } .oc-gift-rule { display: block; width: 42px; height: 3px; margin: 0.6rem auto 0.55rem; border-radius: 999px; background: var(--accent-a); } .oc-gift-copy { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; } .oc-gift-or { align-self: center; justify-self: center; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--lime-950); background: var(--accent-a); padding: 0.35rem 0.7rem; border-radius: 999px; } /* ---------- Hero headline / lede typography ---------- */ .hero-h1 { display: flex; flex-direction: column; align-items: center; gap: 0.18em; text-wrap: balance; max-width: none !important; } .hero-h1 .h1-line { display: block; } .hero-h1 .h1-kicker { font-size: clamp(0.78rem, 3.2vw, 0.95rem); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-on-dark, #dff37a); margin-bottom: 0.25em; text-shadow: none; } .hero-h1 .h1-main { font-size: clamp(2.25rem, 9.2vw, 4.05rem); line-height: 1.03; letter-spacing: -0.028em; font-weight: 800; max-width: 21ch; margin-inline: auto; } .hero-h1 .h1-tag { font-size: clamp(1.72rem, 7.2vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 900; margin-top: 0.1em; } /* ---------- Hero headline entrance + living shimmer ---------- */ @keyframes h1-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes h1-kicker-in { from { opacity: 0; letter-spacing: 0.42em; transform: translate3d(0, 8px, 0); } to { opacity: 1; letter-spacing: 0.2em; transform: none; } } @keyframes h1-kicker-shine { 0%, 55% { background-position: -160% 0; } 100% { background-position: 260% 0; } } @keyframes h1-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes h1-tag-glow { 0%, 100% { text-shadow: 0 0 0 rgba(223,243,122,0); } 50% { text-shadow: 0 0 26px rgba(223,243,122,0.35); } } .hero-h1 .h1-line { opacity: 0; animation: h1-rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero-h1 .h1-kicker { position: relative; animation: h1-kicker-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; background-image: linear-gradient(100deg, transparent 0%, transparent 38%, rgba(255,255,255,0.95) 50%, transparent 62%, transparent 100%); background-size: 220% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; } /* ---- Houston underline: tweak these three knobs ---- --uline-thickness : line height (try 1px – 4px) --uline-opacity : overall strength (0 – 1) --uline-fade : opacity at the two ends (0 = fully faded tips, 1 = solid edge-to-edge) --uline-offset : vertical distance below the word -------------------------------------------------- */ .hero-h1 .h1-uline { position: relative; display: inline-block; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; hyphens: none; --uline-thickness: 3px; --uline-opacity: 1; --uline-fade: 0; --uline-offset: -0.12em; } .hero-h1 .h1-uline::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--uline-offset); width: 100%; height: var(--uline-thickness); transform-origin: left center; transform: scaleX(0); opacity: var(--uline-opacity); border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent-a, #dff37a) calc(var(--uline-fade) * 100%), transparent), var(--accent-a, #dff37a) 30%, var(--accent-a, #dff37a) 70%, color-mix(in srgb, var(--accent-a, #dff37a) calc(var(--uline-fade) * 100%), transparent)); animation: h1-underline 0.9s 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero-h1 .h1-main { animation-delay: 0.18s; } .hero-h1 .h1-tag { animation-delay: 0.36s; } /* second pass: gentle looping life once the entrance settles */ .hero-h1 .h1-kicker { animation: h1-kicker-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards, h1-kicker-shine 6.5s 1.6s ease-in-out infinite; } .hero-h1 .h1-tag { animation: h1-rise 0.85s 0.36s cubic-bezier(0.16, 1, 0.3, 1) forwards, h1-tag-glow 5s 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .hero-h1 .h1-line, .hero-h1 .h1-kicker, .hero-h1 .h1-tag { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; } .hero-h1 .h1-uline::after { animation: none !important; transform: scaleX(1); } } .hero-copy-panel .hero-lede { max-width: 34ch; margin-inline: auto; text-wrap: pretty; font-size: clamp(0.98rem, 3.5vw, 1.1rem); line-height: 1.6; } @media (min-width: 768px) { .hero-copy-panel .hero-lede { max-width: 46ch; } } .hero-lede .lede-strong { display: inline; font-weight: 700; color: #fff; } /* ---------- Closing CTA + footer: light neutral, same family as the header ---------- */ .final-cta { background: linear-gradient(180deg, #f8f9f5 0%, #eef0e8 100%) !important; border-top: 1px solid rgba(19,58,48,0.08); } .final-cta .final-card, .final-cta .glass-dark { background: #fff !important; border: 1px solid rgba(19,58,48,0.10) !important; box-shadow: 0 26px 60px -34px rgba(19,58,48,0.22), inset 0 1px 0 #fff !important; } .final-cta .final-card h2, .final-cta .final-card strong { color: var(--heading) !important; } .final-cta .final-sub, .final-cta .final-card p { color: var(--muted) !important; } .final-cta .final-card a[href^="tel"] { color: var(--brand-mid) !important; } .final-cta .kicker { color: var(--brand-mid) !important; } .site-footer { background: linear-gradient(180deg, #eef0e8 0%, #f4f5f0 100%); } .site-footer .footer-card { background: #fff; border: 1px solid rgba(19,58,48,0.08); } /* ---------- Sticky header retracts on scroll ---------- */ .site-header { transition: transform 0.28s ease, opacity 0.22s ease; will-change: transform; } .site-header.header-hidden { transform: translateY(-105%); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } /* ══════════════ V9: hero offer teaser + hero-scale Summer Offer ══════════════ */ /* --- Hero teaser (links down to the offer) --- */ .hero-teaser { display: block; text-align: center; text-decoration: none; margin-top: clamp(1rem, 3vw, 1.4rem); padding: 0.95rem 1.1rem 1rem; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)); border: 1px solid color-mix(in oklab, var(--accent-a) 55%, transparent); box-shadow: 0 18px 40px -26px rgba(6,20,14,0.7), 0 0 34px -14px var(--accent-glow); transition: transform 0.2s ease, box-shadow 0.2s ease; } .hero-teaser:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -24px rgba(6,20,14,0.75), 0 0 46px -10px var(--accent-glow); } .htz-flag { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime-950); background: var(--accent-a); padding: 0.32rem 0.75rem; border-radius: 999px; } .htz-dot { width: 7px; height: 7px; border-radius: 50%; background: #b3231f; animation: cta-pulse 1.6s ease-in-out infinite; } .htz-head { display: block; margin-top: 0.6rem; font-size: clamp(1rem, 4vw, 1.22rem); font-weight: 800; color: #fff; line-height: 1.3; text-wrap: balance; } .htz-head strong { color: var(--accent-a); } .htz-sub { display: block; margin-top: 0.35rem; font-size: 0.85rem; line-height: 1.5; color: rgba(255,255,255,0.82); } .htz-sub strong { color: var(--accent-a); } .htz-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; font-size: 0.9rem; font-weight: 900; color: var(--accent-a); border-bottom: 2px solid color-mix(in oklab, var(--accent-a) 60%, transparent); padding-bottom: 2px; } @media (prefers-reduced-motion: reduce) { .htz-dot { animation: none !important; } } /* --- Offer section v9 (inherits v8 visuals) --- */ .offer-section--v9 { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-gap); scroll-margin-top: 90px; } .promise-bar { margin: 0 0 clamp(1.25rem, 3.5vw, 1.9rem); padding: clamp(0.9rem, 3vw, 1.25rem) 1rem; border-radius: 18px; text-align: center; background: linear-gradient(180deg, color-mix(in oklab, var(--accent-a) 20%, transparent), rgba(255,255,255,0.05)); border: 1px dashed color-mix(in oklab, var(--accent-a) 60%, transparent); } .pb-title { margin: 0; font-size: clamp(1.35rem, 6vw, 2.15rem); font-weight: 900; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.02em; color: #fff; } .pb-title span { color: var(--accent-a); text-shadow: 0 0 24px color-mix(in oklab, var(--accent-a) 50%, transparent); } .pb-copy { margin: 0.5rem auto 0; max-width: 44rem; font-size: clamp(0.9rem, 2.4vw, 1rem); color: rgba(255,255,255,0.86); } .offer-huge { margin: 0.9rem 0 0; font-size: clamp(3.2rem, 17vw, 7rem); line-height: 0.86; letter-spacing: -0.045em; font-weight: 900; color: #fff; text-transform: uppercase; } .offer-endline { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.9rem auto 0; padding: 0.6rem 1.15rem; border-radius: 999px; background: var(--accent-a); color: var(--accent-ink); font-size: clamp(1.15rem, 5vw, 1.8rem); font-weight: 800; line-height: 1; box-shadow: 0 12px 34px -12px var(--accent-glow); animation: lock-glow 2.6s ease-in-out infinite; } .offer-endline strong { font-weight: 900; } .offer-section--v9 .offer-sub strong { color: var(--accent-a); font-weight: 800; } .offer-lock-nudge { margin: 0 0 0.2rem; font-size: 0.92rem; color: rgba(255,255,255,0.85); } .offer-lock-nudge strong { color: var(--accent-a); } @media (prefers-reduced-motion: reduce) { .offer-endline { animation: none !important; } } /* ══════════════ Sticky bottom bar — light header-style surface ══════════════ */ .sticky-bar--v2 { background: linear-gradient(180deg, rgba(248,249,245,0.97) 0%, rgba(238,240,233,0.98) 100%) !important; border-top: 1px solid rgba(25,29,18,0.12) !important; box-shadow: 0 -8px 26px rgba(16,24,10,0.14) !important; } .sticky-bar--v2 .sticky-quote { background: transparent !important; color: #1b2016 !important; border: 1.5px solid rgba(25,29,18,0.28) !important; } .sticky-bar--v2 .sticky-book { color: #1b2016 !important; border: 1.5px solid rgba(25,29,18,0.28) !important; } /* offer card amounts — brighter, more noticeable */ /* offer card amounts — bigger + brighter green */ .hero-offer2 .ho2-amt { font-size: 1.3rem !important; font-weight: 900 !important; line-height: 1.15 !important; background: linear-gradient(100deg, #14512a 0%, #2c7a1a 48%, #17542b 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; } @media (max-width: 600px) { .hero-offer2 .ho2-amt { font-size: 1.18rem !important; } } /* sticky bottom: transparent outline buttons on the light surface (restored) */ .sticky-bar--v2 .sticky-book, .sticky-bar--v2 .sticky-quote { background: transparent !important; color: #1b2016 !important; border: 1.5px solid rgba(25,29,18,0.28) !important; } /* ══════════════ Service chips → CTA modal ══════════════ */ .hero-chips li { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } .hero-chips .chip-cta { font: inherit; cursor: pointer; border-radius: 999px; padding: 0.36rem 0.78rem; color: #f4ffd6; background: linear-gradient(180deg, color-mix(in oklab, var(--accent-a) 20%, transparent), color-mix(in oklab, var(--accent-a) 9%, transparent)); border: 1px solid color-mix(in oklab, var(--accent-a) 42%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 10px color-mix(in oklab, var(--accent-a) 14%, transparent); letter-spacing: 0.01em; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; } .hero-chips .chip-cta:hover, .hero-chips .chip-cta:focus-visible { color: var(--accent-ink); background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); border-color: transparent; transform: translateY(-1px); } @media (max-width:600px){ .hero-chips .chip-cta{ font-size:0.8rem; padding:0.3rem 0.6rem; } } .chip-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 1.1rem; background: rgba(10,13,8,0.62); backdrop-filter: blur(6px); animation: chipModalIn .18s ease-out; } @keyframes chipModalIn { from { opacity: 0 } to { opacity: 1 } } .chip-modal__card { position: relative; width: 100%; max-width: 27rem; text-align: center; border-radius: 22px; padding: 1.6rem 1.35rem 1.4rem; background: linear-gradient(180deg,#ffffff 0%,#f5f7ef 100%); border: 1px solid rgba(25,29,18,0.1); box-shadow: 0 30px 70px -20px rgba(8,14,4,0.6); } .chip-modal__eyebrow { margin: 0 0 0.3rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #4f7d18; } .chip-modal__title { margin: 0 0 0.4rem; font-size: 1.5rem; line-height: 1.15; font-weight: 900; color: #14170f; } .chip-modal__text { margin: 0 0 1.1rem; font-size: 0.95rem; line-height: 1.5; color: #4b5142; } .chip-modal__actions { display: grid; gap: 0.55rem; } .chip-modal__btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: 999px; padding: 0.82rem 1rem; font-weight: 800; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; } .chip-modal__btn--primary { background: #14170f; color: #fff; } .chip-modal__btn--ghost { background: transparent; color: #14170f; border-color: rgba(25,29,18,0.28); } .chip-modal__note { margin: 0.85rem 0 0; font-size: 0.78rem; color: #6a7060; } .chip-modal__close { position: absolute; top: 0.55rem; right: 0.65rem; width: 2rem; height: 2rem; border-radius: 999px; border: 0; background: rgba(20,23,15,0.07); color: #14170f; font-size: 1.15rem; line-height: 1; cursor: pointer; } /* ══════════════ Hero offer card: glowing animated deadline ══════════════ */ .hero-offer2 .ho2-note { position: relative; overflow: hidden; display: inline-flex !important; align-items: center; gap: 0.35rem; margin-top: 0.4rem; padding: 0.4rem 0.85rem !important; border-radius: 999px; background: linear-gradient(135deg, #d51616, #ff4b1f) !important; color: #fff !important; font-size: 0.95rem !important; font-weight: 800 !important; letter-spacing: 0.01em; box-shadow: 0 8px 24px -9px rgba(213,22,22,0.8); animation: ho2-note-pulse 2s ease-in-out infinite; } .hero-offer2 .ho2-note::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.28); animation: ho2-dot 1.2s ease-in-out infinite; } @keyframes ho2-dot { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } } .hero-offer2 .ho2-note::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.6) 50%, transparent 75%); transform: translateX(-130%); animation: ho2-note-shine 3s ease-in-out infinite; pointer-events: none; } .hero-offer2 .ho2-note strong { color: #fff !important; font-weight: 900 !important; text-decoration: underline; text-underline-offset: 3px; } @keyframes ho2-note-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 8px 22px -12px rgba(255,90,43,0.7); } 50% { transform: scale(1.035); box-shadow: 0 0 0 6px rgba(255,120,50,0.18), 0 14px 34px -10px rgba(255,90,43,0.95); } } @keyframes ho2-note-shine { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } } @media (prefers-reduced-motion: reduce) { .hero-offer2 .ho2-note, .hero-offer2 .ho2-note::after { animation: none !important; } } /* Hero offer badge — larger, more prominent */ .hero-offer2 .ho2-badge { font-size: 0.86rem !important; letter-spacing: 0.09em; padding: 0.4rem 0.8rem !important; border-radius: 999px !important; box-shadow: 0 6px 18px -8px var(--accent-glow); } @media (max-width: 420px) { .hero-offer2 .ho2-badge { font-size: 0.8rem !important; } } /* Summer offer link — animated gradient underline + sliding arrow */ .ho2-link { position: relative; border-bottom: 0 !important; color: #0f5f3f !important; padding-bottom: 0.3rem; overflow: hidden; } .ho2-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #0f8a4a 0%, #35c46a 35%, #ffb020 65%, #0f8a4a 100%); background-size: 220% 100%; animation: ho2LinkSweep 2.6s linear infinite; } .ho2-link .ho2-arrow, .ho2-link::first-letter { } .ho2-link { will-change: transform; } .ho2-link:hover { color: #0b4a31 !important; } @keyframes ho2LinkSweep { 0% { background-position: 0% 0; } 100% { background-position: -220% 0; } } .ho2-arrow { display: inline-block; animation: ho2ArrowSlide 1.4s ease-in-out infinite; } @keyframes ho2ArrowSlide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } } /* Offer card header — clean centered stack (badge / title) */ .hero-offer2 .ho2-head { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.5rem; } /* Offer title — clean, bold, larger */ .hero-offer2 .ho2-title { text-align: center; font-size: clamp(1.24rem, 4.2vw, 1.55rem) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.01em; color: var(--ink, #1b2016) !important; -webkit-text-fill-color: currentColor; background: none !important; animation: none !important; text-wrap: balance; } /* deadline pill now sits after the promise line */ .hero-offer2 .ho2-note { margin: 0.15rem auto 0.6rem !important; } .hero-offer2 .ho2-note { display: flex !important; width: fit-content; } .hero-offer2 .ho2-promise { margin-bottom: 0.55rem; } /* ══════════════ Bottom offer section: contrast + warm gift palette ══════════════ */ /* cardlets read as distinct dark tiles against the green panel */ .offer-section--v8 .offer-cardlet { background: linear-gradient(180deg, rgba(9,22,15,0.72), rgba(9,22,15,0.9)) !important; border: 1px solid rgba(255,255,255,0.2) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 20px 40px -26px rgba(3,10,6,0.85) !important; } .offer-section--v8 .offer-cardlet--wide { background: linear-gradient(180deg, rgba(6,17,11,0.82), rgba(6,17,11,0.94)) !important; } .offer-section--v8 .oc-copy { color: rgba(255,255,255,0.86) !important; } /* emoji badges: soft neutral disc, no lime flood */ .offer-section--v8 .offer-cards--center .oc-badge { background: linear-gradient(180deg, #ffffff, #e9eee6) !important; border: 1px solid rgba(255,255,255,0.7) !important; box-shadow: 0 0 0 4px rgba(255,255,255,0.1), 0 12px 26px -16px rgba(0,0,0,0.6) !important; } /* ---- gift cards: warm amber treatment ---- */ .oc-gift { padding: 2.1rem 1.2rem 1.5rem !important; background: radial-gradient(130% 85% at 50% 0%, #fff6e4 0%, #ffffff 58%) !important; border: 1px solid rgba(196,132,26,0.42) !important; box-shadow: 0 24px 52px -28px rgba(8,20,14,0.6), inset 0 1px 0 #fff, 0 0 0 1px rgba(255,255,255,0.5) !important; } .oc-gift::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #b45309, #f0a52a 45%, #ffd580 70%, #b45309); } .oc-gift-ribbon { background: linear-gradient(135deg, #b45309, #e79a22) !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgba(180,83,9,0.85) !important; } .oc-gift-emoji, .oc-gift-icon { width: 92px !important; height: 92px !important; background: linear-gradient(180deg, #fffaf0, #f6e3c2) !important; border: 1px solid rgba(196,132,26,0.45) !important; box-shadow: 0 0 0 6px rgba(240,165,42,0.12), 0 16px 30px -20px rgba(90,50,5,0.55) !important; } .oc-gift-icon img { width: 58px !important; height: 58px !important; } .oc-gift-rule { width: 54px !important; height: 3px !important; background: linear-gradient(90deg, #b45309, #f0a52a) !important; } .oc-gift-or { color: #fff !important; background: linear-gradient(135deg, #1d2a1e, #33452f) !important; border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 10px 22px -14px rgba(0,0,0,0.8); } /* ══════════════ Bottom offer: contrast, scan-speed type, interaction ══════════════ */ /* --- tiles: deeper ink, crisper edge, alive on hover/focus --- */ .offer-section--v8 .offer-cardlet { background: linear-gradient(180deg, rgba(7,19,13,0.86), rgba(4,13,9,0.94)) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 22px 44px -28px rgba(2,8,5,0.9) !important; transition: transform 0.3s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .offer-section--v8 .offer-cardlet::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--accent-a) 16%, transparent), transparent 70%); opacity: 0; transition: opacity 0.3s ease; } .offer-section--v8 .offer-cardlet:hover, .offer-section--v8 .offer-cardlet:focus-within { transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent-a) 52%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 26px 52px -26px rgba(2,8,5,0.95), 0 0 0 1px color-mix(in oklab, var(--accent-a) 30%, transparent) !important; } .offer-section--v8 .offer-cardlet:hover::after, .offer-section--v8 .offer-cardlet:focus-within::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .offer-section--v8 .offer-cardlet:hover, .offer-section--v8 .offer-cardlet:focus-within { transform: none; } } /* --- type: headline first, detail second --- */ .offer-section--v8 .oc-title { font-size: clamp(1.35rem, 5.2vw, 1.72rem) !important; font-weight: 900 !important; line-height: 1.05; letter-spacing: -0.025em; margin: 0.75rem 0 0.4rem !important; color: #fff !important; text-wrap: balance; } .offer-section--v8 .offer-cardlet--wide .oc-title { font-size: clamp(1.2rem, 4.2vw, 1.5rem) !important; } .offer-section--v8 .oc-title em { display: block; margin-top: 0.3rem; font-size: 0.74rem !important; font-weight: 800 !important; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in oklab, var(--accent-a) 88%, #fff) !important; } .offer-section--v8 .oc-copy { font-size: 0.9rem !important; line-height: 1.5; color: rgba(240,247,238,0.8) !important; } .offer-section--v8 .oc-copy em { display: block; margin-top: 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in oklab, var(--accent-a) 85%, #fff) !important; } .offer-section--v8 .oc-kicker { color: color-mix(in oklab, var(--accent-a) 90%, #fff) !important; } .offer-section--v8 .oc-lbl { color: #2f4a17 !important; } /* --- icon discs: bright, warm-neutral, higher separation --- */ .offer-section--v8 .offer-cards--center .oc-badge { background: radial-gradient(85% 85% at 50% 22%, #ffffff, #dfe7d8) !important; border: 1px solid rgba(255,255,255,0.85) !important; box-shadow: 0 0 0 5px rgba(255,255,255,0.08), 0 14px 28px -16px rgba(0,0,0,0.75) !important; transition: transform 0.3s ease, box-shadow 0.3s ease; } .offer-section--v8 .offer-cardlet:hover .oc-badge { transform: scale(1.06) rotate(-3deg); box-shadow: 0 0 0 7px color-mix(in oklab, var(--accent-a) 14%, transparent), 0 16px 32px -16px rgba(0,0,0,0.8) !important; } /* ══════════════ Gift cards: side-by-side layout, warm ivory panel ══════════════ */ .offer-section--v8 .oc-gifts { gap: 0.9rem; margin-top: 1.1rem; } .offer-section--v8 .oc-gift { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.95rem; text-align: left; padding: 1.6rem 1.15rem 1.25rem !important; border-radius: 20px !important; background: linear-gradient(150deg, #fffdf7 0%, #fdf3e2 58%, #f7e9cf 100%) !important; border: 1px solid rgba(150,98,16,0.34) !important; box-shadow: 0 26px 50px -30px rgba(6,16,10,0.7), inset 0 1px 0 rgba(255,255,255,0.9) !important; transition: transform 0.35s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease; } .offer-section--v8 .oc-gift::before { height: 3px; background: linear-gradient(90deg, #8a4b06, #d98c12 40%, #f6c266 68%, #8a4b06); } .offer-section--v8 .oc-gift:hover, .offer-section--v8 .oc-gift:focus-within { transform: translateY(-5px); border-color: rgba(150,98,16,0.6) !important; box-shadow: 0 34px 60px -28px rgba(6,16,10,0.75), inset 0 1px 0 #fff, 0 0 0 3px rgba(217,140,18,0.16) !important; } @media (prefers-reduced-motion: reduce) { .offer-section--v8 .oc-gift:hover { transform: none; } } .offer-section--v8 .oc-gift-ribbon { top: 0; left: auto; right: 0; transform: none; border-radius: 0 20px 0 14px !important; padding: 0.34rem 0.8rem 0.3rem !important; font-size: 0.58rem !important; letter-spacing: 0.2em; background: linear-gradient(135deg, #7c3f04, #c9820f) !important; } .offer-section--v8 .oc-gift-icon { grid-row: 1 / span 3; margin-top: 0 !important; width: 78px !important; height: 78px !important; border-radius: 18px !important; background: linear-gradient(165deg, #ffffff, #f3dfba) !important; border: 1px solid rgba(150,98,16,0.32) !important; box-shadow: inset 0 1px 0 #fff, 0 12px 24px -16px rgba(80,44,4,0.55) !important; } .offer-section--v8 .oc-gift-icon img { width: 50px !important; height: 50px !important; } .offer-section--v8 .oc-gift-name { margin: 0 !important; font-size: clamp(1.02rem, 3.2vw, 1.18rem) !important; line-height: 1.15; color: #24170a !important; } .offer-section--v8 .oc-gift-rule { margin: 0.45rem 0 0.4rem !important; width: 40px !important; background: linear-gradient(90deg, #8a4b06, #e0a12c) !important; } .offer-section--v8 .oc-gift-copy { font-size: 0.85rem !important; line-height: 1.5; color: #5b4a33 !important; } .offer-section--v8 .oc-gift-or { font-size: 0.68rem !important; background: linear-gradient(135deg, #f7fbf0, #dfe8d3) !important; color: #16210f !important; border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 10px 22px -14px rgba(0,0,0,0.7); } /* ══════════════ V9 — light mint bands (reference: soft green gradient) ══════════════ */ .ho2-nowrap { white-space: nowrap; } /* Shared light-mint gradient background */ .geo-band, [data-section="results"], .video-section, [data-section="video-reviews"], .stats-band, [data-section="process"] { background: linear-gradient(180deg, #dff0e2 0%, #eef8ee 55%, #f6fbf5 100%) !important; color: #16241b !important; } /* geo + results read as ONE section */ .geo-band { border-top: 1px solid rgba(17, 93, 76, 0.12); border-bottom: 0 !important; padding-bottom: clamp(1.4rem, 4vw, 2.2rem) !important; } [data-section="results"] { padding-top: clamp(1.4rem, 4vw, 2.2rem) !important; } /* Text + element recolor inside the light bands */ .geo-band .geo-copy strong, .geo-band .geo-copy span, .video-section h2, .video-section p, [data-section="video-reviews"] h2, [data-section="video-reviews"] p, .stats-band h2, .stats-band p, [data-section="process"] h2, [data-section="process"] p, [data-section="results"] h2, [data-section="results"] p { color: #16241b !important; } .geo-band .geo-copy span, .video-section p, [data-section="video-reviews"] p, .stats-band p, [data-section="process"] p, [data-section="results"] p { color: #3d5546 !important; } .geo-band .kicker, .video-section .kicker, [data-section="video-reviews"] .kicker, .stats-band .kicker, [data-section="process"] .kicker, [data-section="results"] .kicker { color: #11705a !important; } /* County pills on light background */ .geo-pills li { background: #ffffff !important; border: 1px solid rgba(17, 93, 76, 0.2) !important; color: #16241b !important; box-shadow: 0 2px 8px rgba(17, 93, 76, 0.07); } .geo-pills .geo-pin-sm { color: #11705a !important; } .geo-pin { background: linear-gradient(180deg, #16745f, #0d4b3d) !important; color: #fff !important; } /* Cards inside the light bands */ .stats-band .stats-card, .video-section .glass, .video-section .glass-dark, [data-section="video-reviews"] .glass, [data-section="video-reviews"] .glass-dark, [data-section="process"] .glass, [data-section="process"] .glass-dark { background: rgba(255, 255, 255, 0.92) !important; border: 1px solid rgba(17, 93, 76, 0.14) !important; box-shadow: 0 14px 34px rgba(17, 93, 76, 0.1) !important; color: #16241b !important; } .stats-band .stat-row strong, .stats-band .stat-row .stat-num, [data-section="process"] .process-step h3, [data-section="process"] .process-step p, [data-section="video-reviews"] .glass * , .stats-band .stats-card * { color: inherit; } .stats-band .stat-row strong { color: #11705a !important; } [data-section="process"] .step-number { background: linear-gradient(180deg, #16745f, #0d4b3d) !important; color: #fff !important; border-color: transparent !important; } .stats-band .stat-number { color: #11705a !important; -webkit-text-fill-color: #11705a; background: none !important; } .stats-band .stat-label { color: #3d5546 !important; } .video-section .vr-slot, [data-section="video-reviews"] .vr-slot { background: rgba(255,255,255,0.7) !important; border: 1px dashed rgba(17,93,76,0.28) !important; } .video-section .vr-note, .video-section .vr-play, [data-section="video-reviews"] .vr-note, [data-section="video-reviews"] .vr-play { color: #3d5546 !important; } /* ══════════════ Sticky bar buttons — hover / focus / press states ══════════════ */ .sticky-bar--v2 .sticky-call, .sticky-bar--v2 .sticky-book, .sticky-bar--v2 .sticky-quote { transition: transform 0.18s ease, box-shadow 0.22s ease, background-color 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease; } @media (hover: hover) { .sticky-bar--v2 .sticky-call:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 28px var(--accent-glow, rgba(108, 174, 31, 0.45)); } .sticky-bar--v2 .sticky-book:hover, .sticky-bar--v2 .sticky-quote:hover { transform: translateY(-2px); background: rgba(17, 93, 76, 0.1) !important; border-color: rgba(17, 93, 76, 0.6) !important; color: #0d4b3d !important; box-shadow: 0 10px 24px rgba(17, 93, 76, 0.18); } } .sticky-bar--v2 .sticky-call:focus-visible, .sticky-bar--v2 .sticky-book:focus-visible, .sticky-bar--v2 .sticky-quote:focus-visible { outline: 2px solid #0d4b3d; outline-offset: 3px; } .sticky-bar--v2 .sticky-call:active, .sticky-bar--v2 .sticky-book:active, .sticky-bar--v2 .sticky-quote:active { transform: translateY(0) scale(0.985); box-shadow: 0 4px 12px rgba(17, 93, 76, 0.2); } /* ══════════════ Service chip modal: refreshed CTA colors ══════════════ */ .chip-modal__btn--primary { background: linear-gradient(180deg, #1c7a4a, #145c37) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 24px rgba(20, 92, 55, 0.3); } .chip-modal__btn--ghost { background: #f3f8ef !important; color: #145c37 !important; border-color: rgba(20, 92, 55, 0.4) !important; } @media (hover: hover) { .chip-modal__btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); } .chip-modal__btn--ghost:hover { background: #e6f2e2 !important; border-color: rgba(20, 92, 55, 0.7) !important; } } .chip-modal__btn { transition: transform 0.16s ease, filter 0.2s ease, background 0.2s ease, border-color 0.2s ease; } /* ══════════ Shared CTA palette (from consultation modal) ══════════ */ .cta-strip .btn-primary, .final-cta .btn-primary, .hero-form-wrap button[type="submit"], .hero-form-wrap .btn-primary { background: linear-gradient(180deg, #1c7a4a, #145c37) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 24px rgba(20, 92, 55, 0.3); transition: transform 0.16s ease, filter 0.2s ease; } .cta-strip .btn-secondary, .final-cta .btn-secondary, .guarantee-section .btn-primary { background: #f3f8ef !important; color: #145c37 !important; border: 1.5px solid rgba(20, 92, 55, 0.4) !important; box-shadow: none !important; transition: transform 0.16s ease, background 0.2s ease, border-color 0.2s ease; } @media (hover: hover) { .cta-strip .btn-primary:hover, .final-cta .btn-primary:hover, .hero-form-wrap button[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); } .cta-strip .btn-secondary:hover, .final-cta .btn-secondary:hover, .guarantee-section .btn-primary:hover { background: #e6f2e2 !important; border-color: rgba(20, 92, 55, 0.7) !important; } } /* Requested section refinements — hero intentionally excluded */ .hero-offer2 .ho2-or { display: inline-block; margin-block: 0.16rem; font-size: 0.82em; font-weight: 800; } [data-section="gallery"] { background: linear-gradient(160deg, #526146 0%, #3d4b34 52%, #303c29 100%) !important; } [data-section="reviews"], [data-section="testimonials"], [data-section="hero-testimonials"] { background: linear-gradient(160deg, #627257 0%, #4a5940 55%, #394630 100%) !important; } /* Bottom offer tiles: lighter sage surfaces with strong dark type */ .offer-section--v8 .offer-cardlet, .offer-section--v8 .offer-cardlet--wide { background: linear-gradient(155deg, #f7faF2 0%, #e5eedc 100%) !important; border-color: rgba(20, 92, 55, 0.24) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 20px 42px -28px rgba(8,35,22,0.55) !important; } .offer-section--v8 .oc-title { color: #173522 !important; } .offer-section--v8 .oc-copy { color: #405548 !important; } .offer-section--v8 .oc-title em, .offer-section--v8 .oc-copy em, .offer-section--v8 .oc-kicker { color: #1c7a4a !important; } .offer-section--v8 .offer-cardlet:hover, .offer-section--v8 .offer-cardlet:focus-within { border-color: rgba(28,122,74,0.55) !important; box-shadow: inset 0 1px 0 #fff, 0 26px 50px -27px rgba(8,35,22,0.48), 0 0 0 2px rgba(28,122,74,0.12) !important; } /* Bottom deadline matches the urgent red treatment used in the hero */ .offer-section--v8 .offer-deadline-line { position: relative; overflow: hidden; width: fit-content; margin-inline: auto; padding: 0.58rem 1rem !important; border-radius: 999px; background: linear-gradient(135deg, #d51616, #ff4b1f) !important; color: #fff !important; box-shadow: 0 8px 24px -9px rgba(213,22,22,0.8); animation: ho2-note-pulse 2s ease-in-out infinite; } .offer-section--v8 .offer-deadline-line strong { color: #fff !important; } /* Bottom lock-in actions use the consultation popup palette */ .offer-section--v8 .btn-lock { background: linear-gradient(180deg, #1c7a4a, #145c37) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 24px rgba(20,92,55,0.3) !important; } .offer-section--v8 .btn-lock-ghost { background: #f3f8ef !important; color: #145c37 !important; border: 1.5px solid rgba(20,92,55,0.4) !important; } @media (hover: hover) { .offer-section--v8 .btn-lock:hover { filter: brightness(1.08); transform: translateY(-1px); } .offer-section--v8 .btn-lock-ghost:hover { background: #e6f2e2 !important; border-color: rgba(20,92,55,0.7) !important; } } @media (prefers-reduced-motion: reduce) { .offer-section--v8 .offer-deadline-line { animation: none !important; } } /* ══════════════ Offer badges, lock-in CTAs & sticky bar (final pass) ══════════════ */ /* Emoji discs: dark disc so the emoji pops off it */ .offer-section--v8 .offer-cards--center .oc-badge, .offer-section--v8 .oc-badge { background: radial-gradient(85% 85% at 50% 20%, #123a26, #06170f) !important; border: 1px solid color-mix(in oklab, var(--accent-a) 55%, transparent) !important; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-a) 18%, transparent), 0 14px 28px -16px rgba(0,0,0,0.8) !important; color: #fff !important; font-size: 1.6rem !important; line-height: 1 !important; text-shadow: 0 1px 6px rgba(0,0,0,0.45); } .offer-section--v8 .offer-cardlet:hover .oc-badge { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent-a) 30%, transparent), 0 16px 32px -16px rgba(0,0,0,0.85) !important; } /* Lock-in button: white/grey pill with black type for max contrast */ .offer-section--v8 .btn-lock { background: linear-gradient(180deg, #ffffff, #e9ecea) !important; color: #101613 !important; border: 1px solid rgba(255,255,255,0.9) !important; box-shadow: 0 12px 28px -12px rgba(0,0,0,0.55) !important; } @media (hover: hover) { .offer-section--v8 .btn-lock:hover { background: linear-gradient(180deg, #ffffff, #f5f7f6) !important; transform: translateY(-1px); } } .offer-section--v8 .offer-lock-or { margin: 0.15rem 0 0; display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.82); } .offer-section--v8 .btn-lock-call { background: #f3f8ef !important; color: #145c37 !important; border: 1.5px solid rgba(20,92,55,0.4) !important; font-weight: 800; padding: 0.6rem 1.15rem !important; border-radius: 999px; box-shadow: none !important; } @media (hover: hover) { .offer-section--v8 .btn-lock-call:hover { background: #e6f2e2 !important; border-color: rgba(20,92,55,0.7) !important; } } /* Sticky bar: back to the dark background */ .sticky-bar--v2 { background: linear-gradient(180deg, rgba(16,22,15,0.96) 0%, rgba(9,14,9,0.98) 100%) !important; border-top: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 -10px 30px rgba(0,0,0,0.42) !important; } .sticky-bar--v2 .sticky-book, .sticky-bar--v2 .sticky-quote { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,0.5) !important; } @media (hover: hover) { .sticky-bar--v2 .sticky-book:hover, .sticky-bar--v2 .sticky-quote:hover { background: rgba(255,255,255,0.12) !important; border-color: #fff !important; color: #fff !important; } } /* ══════════════ Reviews strip: photo background ══════════════ */ .testimonials-strip { position: relative; isolation: isolate; padding: 3rem 0 2.25rem !important; overflow: hidden; } .testimonials-strip::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/__l5e/assets-v1/9e0fd866-3dae-4dc9-93ad-c83dc9d5c534/sc-gallery-2.webp") center/cover no-repeat; } .testimonials-strip::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(246,251,245,0.9) 0%, rgba(232,242,231,0.86) 55%, rgba(246,251,245,0.94) 100%); backdrop-filter: blur(2px); } .testimonials-strip .tq-card { background: rgba(255,255,255,0.94) !important; backdrop-filter: blur(6px); box-shadow: 0 26px 60px -30px rgba(11,61,43,0.5) !important; } /* Scarcity line: clear, prominent, no financing mention */ .hero-offer2 .ho2-promise--limit { display: block; margin: 0.65rem 0 0; padding: 0.8rem 0.95rem; border-radius: 14px; background: linear-gradient(180deg, rgba(230,251,82,0.32), rgba(194,212,77,0.18)); border: 1px solid rgba(20,92,55,0.22); border-left: 5px solid #c2d44d; box-shadow: 0 6px 16px rgba(15,47,29,0.10); color: #0f2f1d; font-size: clamp(1rem, 2.6vw, 1.12rem); font-weight: 700; line-height: 1.42; text-align: center; text-wrap: balance; } .hero-offer2 .ho2-promise--limit strong { font-weight: 900; color: #0b2415; text-wrap: balance; } .hero-offer2 .ho2-promise-sub { display: block; margin-top: 0.2rem; font-size: 0.82rem; font-weight: 600; opacity: 0.75; text-wrap: balance; } /* ══════════════ Hero offer — clean, high-contrast final design ══════════════ */ .hero-offer2 { position: relative; overflow: hidden; padding: clamp(1.1rem, 3vw, 1.4rem) !important; border: 1px solid rgba(20, 92, 55, 0.22) !important; border-top: 5px solid #1c7a4a !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 24px 54px -28px rgba(4, 32, 19, 0.72) !important; } .hero-offer2::before { content: none !important; } .hero-offer2 .ho2-head { gap: 0.4rem !important; margin-bottom: 1rem !important; } .hero-offer2 .ho2-title { font-size: clamp(1.45rem, 4.5vw, 1.9rem) !important; color: #123c27 !important; } .hero-offer2 .ho2-grid { gap: 0.6rem !important; border: 0 !important; } .hero-offer2 .ho2-grid li, .hero-offer2 .ho2-grid li:nth-child(odd), .hero-offer2 .ho2-grid li:nth-child(even) { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 0; padding: 0.85rem 0.8rem !important; border: 1px solid rgba(20, 92, 55, 0.16) !important; border-radius: 10px; background: #f2f7ef; text-align: center; } /* Icon row (centered, no category label) */ .hero-offer2 .ho2-top { display: flex; align-items: center; justify-content: center; margin-bottom: 0.1rem; } .hero-offer2 .ho2-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 7px; background: #dcead0; color: #1a6039; line-height: 1; } .hero-offer2 .ho2-ico svg { display: block; } .hero-offer2 .ho2-tag { color: #2f6a45; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .hero-offer2 .ho2-amt { font-size: clamp(1.42rem, 4.2vw, 1.72rem) !important; font-weight: 900 !important; line-height: 1.12 !important; letter-spacing: 0; color: #114a2c !important; background: none !important; -webkit-text-fill-color: currentColor !important; } .hero-offer2 .ho2-lbl { color: #36483d !important; font-size: 0.88rem !important; font-weight: 600 !important; line-height: 1.36 !important; } /* Scarcity note: intentionally different from the offer tiles — dark panel, ivory text */ /* Scarcity note: light lime panel (restored previous design) */ .hero-offer2 .ho2-promise--limit { display: block; margin: 0.95rem 0 0 !important; padding: 0.85rem 0.95rem !important; border: 1px solid rgba(20,92,55,0.22) !important; border-left: 5px solid #c2d44d !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(230,251,82,0.32), rgba(194,212,77,0.18)) !important; box-shadow: 0 6px 16px rgba(15,47,29,0.10) !important; color: #0f2f1d !important; font-size: clamp(1rem, 2.6vw, 1.12rem) !important; font-weight: 700 !important; line-height: 1.42 !important; text-align: center !important; text-wrap: balance; } .hero-offer2 .ho2-promise--limit strong { color: #0b2415 !important; font-weight: 900; text-wrap: balance; } .hero-offer2 .ho2-promise--limit .ho2-promise-sub { color: #24422f !important; font-size: 0.86rem !important; font-weight: 600 !important; opacity: 0.85 !important; } .hero-offer2 .ho2-note { margin: 0.7rem auto 0.45rem !important; padding: 0.38rem 0.72rem !important; animation: none !important; box-shadow: none !important; } .hero-offer2 .ho2-note::after { content: none !important; animation: none !important; } .hero-offer2 .ho2-note strong, .hero-offer2 .ho2-title, .hero-offer2 .ho2-title * { text-decoration: none !important; border-bottom: 0 !important; } /* Full-offer link: colorful gradient underline (restored) */ .hero-offer2 .ho2-link { position: relative; display: inline-block; padding-bottom: 0.28rem !important; color: #145c37 !important; font-weight: 800; text-decoration: none !important; border-bottom: 0 !important; } .hero-offer2 .ho2-link::after { content: "" !important; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #145c37, #7fbf3f 42%, #e6fb52 68%, #f5a524) !important; animation: none !important; } .hero-offer2 .ho2-link:hover::after { height: 4px; } @media (max-width: 600px) { .hero-offer2 .ho2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; } .hero-offer2 .ho2-grid li { padding: 0.7rem 0.62rem !important; } .hero-offer2 .ho2-ico { width: 1.3rem; height: 1.3rem; font-size: 0.75rem; } .hero-offer2 .ho2-tag { font-size: 0.62rem; letter-spacing: 0.07em; } .hero-offer2 .ho2-amt { font-size: 1.3rem !important; } .hero-offer2 .ho2-lbl { font-size: 0.84rem !important; } .hero-offer2 .ho2-nowrap { display: block; white-space: normal !important; text-wrap: balance; } .hero-offer2 .ho2-promise--limit { font-size: 0.94rem !important; padding: 0.8rem 0.8rem !important; } .hero-offer2 .ho2-promise--limit .ho2-promise-sub { font-size: 0.84rem !important; } } .offer-section--v8 .offer-fine--limit { font-size: 0.95rem; line-height: 1.5; text-align: center; opacity: 1; } .offer-section--v8 .offer-fine--limit strong { font-weight: 800; } /* ══════════════ V10 — ONE page surface (soft mint → white), two accent bands ══════════════ Reference: a single continuous light-mint gradient page, with only the two CTA bands (mid-page strip + final CTA) in deep green. Nothing else is tinted. */ :root { --page-top: #e2f0e5; --page-mid: #eef7ee; --page-bot: #f7fbf6; --ink: #16241b; --ink-soft: #46584c; } html, body { background: linear-gradient(180deg, var(--page-top) 0%, var(--page-mid) 38%, var(--page-bot) 100%) !important; background-attachment: fixed !important; color: var(--ink); } /* every band becomes part of the same surface */ .band, .band-light, .band-green, .geo-band, .stats-band, .video-section, .guarantee-section, .mini-faq, .comparison, .hero-form-wrap, .site-footer, [data-section="results"], [data-section="services"], [data-section="brands"], [data-section="gallery"], [data-section="before-after"], [data-section="video"], [data-section="project-preview"], [data-section="video-reviews"], [data-section="reviews"], [data-section="comparison"], [data-section="process"], [data-section="guarantee"], [data-section="area"], [data-section="faq"] { background: transparent !important; border-top: 0 !important; border-bottom: 0 !important; color: var(--ink) !important; } /* ink text everywhere on the light surface */ .band-green h2, .band-green h3, .band-green p, .band-green li, .stats-band h2, .stats-band h3, .stats-band p, .guarantee-section h2, .guarantee-section h3, .guarantee-section p, [data-section="gallery"] h2, [data-section="gallery"] h3, [data-section="gallery"] p, [data-section="faq"] h2, [data-section="faq"] h3, [data-section="faq"] summary, [data-section="faq"] .faq-body, [data-section="faq"] .faq-body p, [data-section="video"] h2, [data-section="video"] h3, [data-section="video"] p, [data-section="video-reviews"] h2, [data-section="video-reviews"] h3, [data-section="video-reviews"] p, [data-section="gallery"] .section-head p, [data-section="faq"] .section-head p, [data-section="video"] .section-head p, [data-section="video-reviews"] .section-head p { color: var(--ink) !important; -webkit-text-fill-color: var(--ink); } .band-green .section-head p, .stats-band .section-head p, .guarantee-section .section-head p, [data-section="gallery"] .section-head p, [data-section="faq"] .section-head p { color: var(--ink-soft) !important; } .band-green .kicker, .stats-band .kicker, .guarantee-section .kicker, [data-section="gallery"] .kicker, [data-section="faq"] .kicker, [data-section="video"] .kicker, [data-section="video-reviews"] .kicker { color: #11705a !important; } /* cards on the light surface: white glass, soft green edge */ .band-green .glass, .band-green .glass-dark, .stats-band .stats-card, .guarantee-section .glass, .guarantee-section .glass-dark, [data-section="gallery"] .glass, [data-section="gallery"] .glass-dark, [data-section="faq"] .glass, [data-section="faq"] .glass-dark, [data-section="video"] .glass, [data-section="video"] .glass-dark, [data-section="video-reviews"] .glass, [data-section="video-reviews"] .glass-dark { background: rgba(255,255,255,0.92) !important; border: 1px solid rgba(17,93,76,0.14) !important; color: var(--ink) !important; box-shadow: 0 22px 48px -30px rgba(11,61,43,0.35) !important; } /* the only two colored bands left — deep green, full-width CTA moments */ .cta-strip, .final-cta { background: linear-gradient(180deg, #16745f 0%, #0d4b3d 100%) !important; color: #fff !important; } .cta-strip h2, .cta-strip h3, .cta-strip p, .final-cta h2, .final-cta h3, .final-cta p { color: #fff !important; -webkit-text-fill-color: #fff; } .cta-strip .kicker, .final-cta .kicker { color: #d9ee5a !important; } /* footer sits on the same surface, separated by a hairline only */ .site-footer { border-top: 1px solid rgba(17,93,76,0.12) !important; } /* ══════════════ Hero offer amounts — larger, no highlight tile ══════════════ */ .hero-offer2 .ho2-amt { font-size: 1.6rem !important; letter-spacing: -0.025em !important; } @media (max-width: 600px) { .hero-offer2 .ho2-amt { font-size: 1.42rem !important; } } /* ══════════════ Before/After: tinted cards instead of plain white ══════════════ */ [data-section="before-after"] .ba-card { background: linear-gradient(165deg, #10382a 0%, #0b2a20 55%, #123c26 100%) !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 20px 40px -26px rgba(6,26,18,0.55) !important; } [data-section="before-after"] .ba-pair { background: rgba(255,255,255,0.14); } [data-section="before-after"] .ba-meta strong { color: #f4fbe8; } [data-section="before-after"] .ba-meta span { color: rgba(233,246,224,0.78); opacity: 1; } [data-section="before-after"] .ba-tag--after { background: linear-gradient(180deg, #7cc328, #3f8c1c); color: #0d2410; } [data-section="before-after"] .ba-card:hover { transform: translateY(-3px); transition: transform .25s ease; } @media (min-width: 900px) { [data-section="before-after"] .ba-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 700px) and (max-width: 899px) { [data-section="before-after"] .ba-grid { grid-template-columns: repeat(2, 1fr); } } [data-section="video-reviews"] .vr-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* avoid single-word orphan lines on address text */ .footer-nap [data-bind="address"], .gbp-card [data-bind="address"], [data-section="area"] li span, .footer-nap { text-wrap: balance; } /* ============ Font lab (design tool) ============ */ .fontlab { position: fixed; top: 92px; right: 12px; z-index: 9999; font-family: var(--font); } .fontlab__toggle { border: 1px solid rgba(14,106,73,0.25); background: rgba(255,255,255,0.94); color: #0e6a49; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.01em; padding: 8px 12px; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 18px rgba(16,32,24,0.14); backdrop-filter: blur(8px); } .fontlab__toggle:hover { background: #fff; box-shadow: 0 8px 22px rgba(16,32,24,0.2); } .fontlab__panel { margin-top: 8px; width: 268px; max-height: 76vh; overflow-y: auto; background: #fff; border: 1px solid rgba(16,32,24,0.12); border-radius: 14px; padding: 14px; box-shadow: 0 18px 44px rgba(16,32,24,0.22); display: grid; gap: 10px; } .fontlab__pairs { display: grid; gap: 6px; } .fontlab__pair { display: grid; gap: 2px; text-align: left; cursor: pointer; padding: 8px 10px; border-radius: 10px; background: #f6f9f4; border: 1px solid rgba(16,32,24,0.10); } .fontlab__pair:hover { background: #eef5ea; } .fontlab__pair.is-active { border-color: #0e6a49; background: #e6f4ec; box-shadow: inset 0 0 0 1px #0e6a49; } .fontlab__pair strong { font-size: 0.95rem; line-height: 1.15; color: #12241b; } .fontlab__pair em { font-style: normal; font-size: 0.72rem; color: #5c6b62; } .fontlab__row { display: grid; gap: 4px; } .fontlab__label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #5c6b62; } .fontlab__select { width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(16,32,24,0.18); font-size: 0.86rem; font-weight: 600; color: #16241d; background: #fbfcfb; } .fontlab__preview { display: grid; gap: 3px; padding: 10px; border-radius: 10px; background: #f4f8f2; } .fontlab__preview strong { font-size: 1.05rem; line-height: 1.15; color: #0e6a49; } .fontlab__preview span { font-size: 0.78rem; line-height: 1.4; color: #46564d; } .fontlab__reset { border: none; background: none; padding: 0; text-align: left; cursor: pointer; font-size: 0.76rem; font-weight: 700; color: #7a8a80; text-decoration: underline; } @media (max-width: 700px) { .fontlab { top: auto; bottom: 96px; right: 10px; } } /* ══════════════════════════════════════════════════════════════ ROUND 12 — CTA system, clickable offer zones, B/W before-after ══════════════════════════════════════════════════════════════ */ /* ---- 1. Two alternating CTA looks: lime/black and black/white ---- */ .btn-yellow { background: linear-gradient(180deg, #e6fb52, #cfe63c) !important; color: #10190a !important; -webkit-text-fill-color: #10190a; border: 1px solid rgba(16,25,10,0.18) !important; font-weight: 900 !important; text-shadow: none !important; box-shadow: 0 10px 26px -12px rgba(160,200,40,0.65) !important; } .btn-ink { background: linear-gradient(180deg, #1c2420, #0c110e) !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 1px solid rgba(255,255,255,0.14) !important; font-weight: 800 !important; box-shadow: 0 12px 28px -14px rgba(6,12,8,0.7) !important; } @media (hover: hover) { .btn-yellow:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn-ink:hover { background: linear-gradient(180deg, #2a3430, #141a16) !important; transform: translateY(-1px); } } .btn-yellow:focus-visible, .btn-ink:focus-visible { outline: 3px solid #0a7d68; outline-offset: 3px; } /* ---- 2. Clickable offer / badge zones behave like CTAs ---- */ [data-cta] { cursor: pointer; } [data-cta]:focus-visible { outline: 3px solid #0a7d68; outline-offset: 3px; border-radius: 12px; } @media (hover: hover) { .hero-offer2 .ho2-grid > li[data-cta]:hover { transform: translateY(-2px); transition: transform .2s ease; } .header-badge[data-cta]:hover { filter: brightness(1.04); } } /* ---- 3. Before / after: white cards, plain black & white tags ---- */ [data-section="before-after"] .ba-card { background: #fff !important; border: 1px solid rgba(17,93,76,0.14) !important; box-shadow: 0 20px 44px -30px rgba(11,61,43,0.32) !important; } [data-section="before-after"] .ba-pair { background: rgba(17,93,76,0.08); } [data-section="before-after"] .ba-meta strong { color: var(--heading) !important; } [data-section="before-after"] .ba-meta span { color: var(--muted) !important; opacity: 1; } [data-section="before-after"] .ba-tag--before { background: #0d100e !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.25); } [data-section="before-after"] .ba-tag--after { background: #fff !important; color: #0d100e !important; border: 1px solid rgba(13,16,14,0.18); } /* ---- 4. CTA strip headline: dark text on a light band ---- */ .cta-strip { background: linear-gradient(180deg, #eef4e6 0%, #e3ecdb 100%) !important; color: var(--ink) !important; } .cta-strip h2, .cta-strip h3, .cta-strip p { color: #0b1410 !important; -webkit-text-fill-color: #0b1410; } .cta-strip .kicker { color: #14603f !important; } .cta-strip .or-call, .cta-strip .or-call a { color: #0b1410 !important; } .cta-strip .glass.cta-strip-card { background: rgba(255,255,255,0.7) !important; border: 1px solid rgba(17,93,76,0.14) !important; } /* ---- 5. Comparison ticks & crosses: identical size, top aligned ---- */ .compare-list li { align-items: flex-start !important; } .compare-list .tick, .compare-list .cross { flex: 0 0 auto; width: 22px !important; height: 22px !important; min-width: 22px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 999px; font-size: 0.78rem !important; line-height: 1 !important; font-weight: 900; transform: translateY(1px) !important; } /* ---- 6. Google mark next to review headings ---- */ .kicker--google { display: inline-flex; align-items: center; gap: 0.4rem; } .rs-google { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 0.4rem; } .review-summary .rs-google { transform: translateY(2px); } /* ---- 7. Offer lock stack: "Or" on its own line, contrasting buttons ---- */ .offer-section--v8 .offer-lock-or { margin: 0.15rem 0 0 !important; font-size: 0.82rem !important; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,0.78) !important; } .offer-section--v8 .btn-lock, .offer-section--v8 .btn-lock-call { background-image: none; } .offer-section--v8 .btn-lock { background: linear-gradient(180deg, #e6fb52, #cfe63c) !important; color: #10190a !important; -webkit-text-fill-color: #10190a; border: 1px solid rgba(16,25,10,0.18) !important; } .offer-section--v8 .btn-lock-call { background: linear-gradient(180deg, #1c2420, #0c110e) !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 1px solid rgba(255,255,255,0.28) !important; } @media (hover: hover) { .offer-section--v8 .btn-lock:hover { filter: brightness(1.06); transform: translateY(-1px); } .offer-section--v8 .btn-lock-call:hover { background: linear-gradient(180deg, #2a3430, #141a16) !important; } } /* ---- 8. Limited slots fine print: small, bold, quiet ---- */ .offer-fine--limit { margin-top: 0.9rem !important; font-size: 0.74rem !important; line-height: 1.5; letter-spacing: 0.04em; color: rgba(255,255,255,0.7) !important; } .offer-fine--limit .ofl-strong { display: inline-block; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: #e6fb52; } /* ---- 9. Sticky bar: back to grey ---- */ .sticky-bar--v2 { background: linear-gradient(180deg, rgba(247,249,246,0.97) 0%, rgba(232,236,230,0.98) 100%) !important; border-top: 1px solid rgba(17,93,76,0.16) !important; box-shadow: 0 -10px 30px rgba(20,40,30,0.16) !important; } .sticky-bar--v2 .sticky-book, .sticky-bar--v2 .sticky-quote { background: #fff !important; color: #0b1410 !important; -webkit-text-fill-color: #0b1410; border: 1.5px solid rgba(13,20,16,0.35) !important; } @media (hover: hover) { .sticky-bar--v2 .sticky-book:hover, .sticky-bar--v2 .sticky-quote:hover { background: #0c110e !important; color: #fff !important; -webkit-text-fill-color: #fff; border-color: #0c110e !important; } } /* ══════════════════════════════════════════════════════════════ ROUND 13 — red header phone, single top button colour, green/white comparison marks, louder deadline glow, footer gap ══════════════════════════════════════════════════════════════ */ /* ---- 1. Header phone: compact deep-blue pill ---- */ .header-phone, .header-phone.cta-glow { padding: 0.28rem 0.8rem 0.28rem 0.32rem !important; border-radius: 999px !important; background: linear-gradient(180deg, #1b211c, #0a0d0b) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: 0 8px 20px -12px rgba(6,10,8,0.85), inset 0 1px 0 rgba(255,255,255,0.16) !important; animation: none !important; } .header-phone:hover { filter: brightness(1.06); } .header-phone, .header-phone .phone-label, .header-phone .phone-number, .site-header.scrolled .header-phone, .site-header.scrolled .header-phone .phone-label, .site-header.scrolled .header-phone .phone-number { color: #fff !important; -webkit-text-fill-color: #fff; } .header-phone .phone-number { font-size: 1.02rem !important; font-weight: 800 !important; letter-spacing: -0.01em; } .header-phone .phone-label { font-size: 0.64rem !important; opacity: 0.88; letter-spacing: 0.02em; } .header-phone .icon-wrap { width: 30px !important; height: 30px !important; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)) !important; border: 0 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important; animation: none !important; } .header-phone .icon-wrap svg { stroke: var(--accent-ink) !important; color: var(--accent-ink) !important; width: 17px; height: 17px; } @media (max-width: 480px) { .header-phone .phone-number { font-size: 0.95rem !important; } .header-phone .icon-wrap { width: 28px !important; height: 28px !important; } } /* ---- 2. Top-of-page buttons: one calm colour, no rainbow ---- */ .site-header .header-cta, .site-header .btn-yellow { background: linear-gradient(180deg, #1c2420, #0c110e) !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 12px 26px -14px rgba(6,12,8,0.7) !important; animation: none !important; } .header-badge .icon { color: #14603f !important; } .header-badge--fin .icon { color: #14603f !important; } /* ---- 3. Comparison marks: green & white only ---- */ .compare-list .tick, .compare-col-icon { background: #14603f !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 0 !important; } .compare-col-icon svg { stroke: #fff !important; } .compare-list .cross { background: #fff !important; color: #14603f !important; -webkit-text-fill-color: #14603f; border: 1.5px solid rgba(20,96,63,0.45) !important; } /* ---- 4. Deadline: stronger glow ---- */ .hero-offer2 .ho2-note { box-shadow: 0 0 0 5px rgba(224,32,32,0.16), 0 14px 34px -10px rgba(213,22,22,0.95) !important; } @keyframes ho2-note-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(224,32,32,0.14), 0 10px 26px -12px rgba(255,90,43,0.8); } 50% { transform: scale(1.045); box-shadow: 0 0 0 9px rgba(255,120,50,0.22), 0 18px 44px -8px rgba(255,60,20,1); } } .offer-section--v8 .offer-deadline-line { animation: deadline-glow 1.8s ease-in-out infinite !important; } /* ---- 5. Last section: tighten the gap above the footer ---- */ .hero-form-wrap { padding-bottom: clamp(1rem, 2.5vw, 1.75rem) !important; } .site-footer { padding-top: clamp(1rem, 2.5vw, 1.75rem) !important; } /* ---- Round 14: comparison column titles look distinct from list ticks ---- */ .compare-col-title { align-items: center; gap: 0.7rem; font-size: clamp(1.18rem, 2.6vw, 1.42rem); letter-spacing: -0.015em; padding-bottom: 0.85rem; margin-bottom: 1.1rem; border-bottom: 1px solid rgba(20, 96, 63, 0.16); } .compare-col-us .compare-col-title, .compare-col-them .compare-col-title { color: #16241c; } .compare-tag { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0.28rem 0.68rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; } .compare-tag--us { background: #14603f; color: #fff; } .compare-tag--them { background: #fff; color: #14603f; box-shadow: inset 0 0 0 1.5px rgba(20, 96, 63, 0.35); } /* ---- Service CTA modal: per-service ad copy ---- */ .chip-modal__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; } .chip-modal__list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; color: #16241c; } .chip-modal__tick { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #14603f; color: #fff; font-size: 0.7rem; font-weight: 800; margin-top: 0.1rem; } .chip-modal__offer { margin: 0 0 1.1rem; padding: 0.7rem 0.85rem; border-radius: 14px; background: rgba(215, 236, 120, 0.28); box-shadow: inset 0 0 0 1px rgba(20, 96, 63, 0.16); font-size: 0.9rem; color: #16241c; } .chip-modal__offer strong { color: #0f4d33; } /* ══════════════ V8: hero panel — even, see-through green all the way down ══════════════ */ /* The panel used to darken toward the bottom until the photo disappeared. Keep the same light, translucent green from top to bottom so the backyard photo stays visible behind the whole hero block. */ .hero-copy-panel { background: linear-gradient(180deg, rgba(34,110,98,0.52) 0%, rgba(32,106,95,0.54) 55%, rgba(30,102,92,0.56) 100%) !important; -webkit-backdrop-filter: blur(10px) saturate(1.25) !important; backdrop-filter: blur(10px) saturate(1.25) !important; border-color: rgba(255,255,255,0.30) !important; box-shadow: 0 26px 64px -32px rgba(4,24,22,0.45), inset 0 1px 0 rgba(255,255,255,0.24) !important; } /* text stays legible over the lighter glass */ .hero-copy-panel h1, .hero-copy-panel .hero-lede, .hero-copy-panel .hero-sub { text-shadow: 0 2px 14px rgba(4,20,16,0.45); } /* ══════════════ Sticky bar call button: match the header phone CTA ══════════════ */ /* black pill, white label, lime-yellow phone icon — same palette as the header */ .sticky-bar--v2 .sticky-call { background: linear-gradient(180deg, #1b211c, #0a0d0b) !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 8px 20px -12px rgba(6,10,8,0.85), inset 0 1px 0 rgba(255,255,255,0.16) !important; animation: none !important; } .sticky-bar--v2 .sticky-call svg { stroke: var(--accent-a) !important; color: var(--accent-a) !important; } @media (hover: hover) { .sticky-bar--v2 .sticky-call:hover { filter: brightness(1.08); background: linear-gradient(180deg, #1b211c, #0a0d0b) !important; } } /* ══════════════ V9: hero clarity pass — less blur, crisper edges ══════════════ */ /* Too many stacked frosted layers made the hero read as mushy. Drop the backdrop blur to near-zero and lean on solid-ish fills instead. */ .hero-copy-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(180deg, rgba(24,92,82,0.80) 0%, rgba(18,78,70,0.86) 100%) !important; border-color: rgba(255,255,255,0.22) !important; box-shadow: 0 24px 60px -34px rgba(4,24,22,0.55) !important; } /* kill the glossy sheen overlay */ .hero-copy-panel::before { display: none !important; } /* crisp text instead of glow */ .hero-copy-panel h1, .hero-copy-panel .hero-lede, .hero-copy-panel .hero-sub { text-shadow: 0 1px 2px rgba(0,0,0,0.28) !important; } /* chips / counties / offer card: solid fills, no blur */ .hero-chips li, .hero-counties li { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255,255,255,0.16) !important; border-color: rgba(255,255,255,0.34) !important; } .hero-offer { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: linear-gradient(160deg, rgba(9,60,52,0.72), rgba(6,44,40,0.80)) !important; } .hero-rating { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255,255,255,0.22) !important; } /* photo itself: keep it sharp */ .hero-img { filter: none !important; } .hero-scrim { background: linear-gradient(180deg, rgba(6,22,20,0.34) 0%, rgba(6,22,20,0.18) 45%, rgba(6,22,20,0.44) 100%) !important; } /* V10: hero offer card centered in the hero panel on desktop */ .hero-copy-panel .hero-offer2 { margin-left: auto !important; margin-right: auto !important; max-width: 40rem; width: 100%; } /* ---------- Aerial / bird's-eye section ---------- */ .aerial-section{padding:clamp(48px,7vw,88px) 0;background:#fff} .aer-group{margin-top:40px} .aer-group-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:clamp(1.35rem,3.2vw,2rem);font-weight:900;line-height:1.15;letter-spacing:-.02em;margin:0 0 16px;padding:0 0 12px 16px;color:#0f1b14;border-left:6px solid #c2d44d;border-bottom:1px solid rgba(15,27,20,.12)} .aer-group-title span{font-size:clamp(.95rem,1.9vw,1.1rem);font-weight:700;color:#3f5a48;background:#eef6cf;border-radius:999px;padding:5px 12px;letter-spacing:0} .aer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .aer-fig{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#eef1ee;box-shadow:0 10px 30px rgba(16,32,24,.12)} .aer-fig img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease} .aer-fig:hover img{transform:scale(1.03)} .aer-tag{position:absolute;left:10px;top:10px;padding:5px 11px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:#0f1b14;color:#fff} .aer-fig--wide .aer-tag{background:#fff;color:#0f1b14} @media (max-width:640px){.aer-grid{grid-template-columns:1fr}} /* ---- Pronounced Before/After + Drone pills ---- */ [data-section="before-after"] .ba-tag, .aer-tag { font-size: .8rem !important; font-weight: 900 !important; letter-spacing: .07em !important; padding: .42rem .85rem !important; border-radius: 999px !important; box-shadow: 0 6px 16px rgba(8,20,12,.28) !important; } [data-section="before-after"] .ba-tag--before, .aer-fig .aer-tag { background: #fff !important; color: #0d100e !important; border: 1px solid rgba(13,16,14,.18) !important; } [data-section="before-after"] .ba-tag--after, .aer-fig .aer-tag--done { background: linear-gradient(180deg, #eaf75f, #cfe23f) !important; color: #0d100e !important; border: 1px solid rgba(13,16,14,.22) !important; } /* ---- Clickable county pills (call CTA) ---- */ .geo-pills li { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } .geo-pill-link { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px; background: linear-gradient(180deg, #167a63, #0f5a49); color: #fff !important; font-weight: 800; font-size: .9rem; text-decoration: none; border: 1px solid rgba(255,255,255,.28); box-shadow: 0 6px 16px rgba(8,20,12,.18); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .geo-pill-link:hover, .geo-pill-link:focus-visible { background: linear-gradient(180deg, #eaf75f, #cfe23f); color: #0d100e !important; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(8,20,12,.3); } .geo-pills .geo-pill-link .geo-pin-sm { color: #eaf75f !important; } .geo-pills .geo-pill-link:hover .geo-pin-sm, .geo-pills .geo-pill-link:focus-visible .geo-pin-sm { color: #0d100e !important; } /* ---- customer testimonial videos (owner 2026-08-11) ---- */ .tvid-row{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px 2px 14px; scrollbar-width:thin; } .tvid-card{ flex:0 0 min(260px,74%); scroll-snap-align:center; margin:0; display:flex; flex-direction:column; gap:10px; } .tvid-video{ width:100%; aspect-ratio:9/16; border-radius:18px; background:#0d1a10; object-fit:cover; display:block; box-shadow:0 10px 30px rgba(0,0,0,.14); } .tvid-cap{display:flex; flex-direction:column; gap:2px; text-align:center;} .tvid-name{font-weight:800; font-size:1rem;} .tvid-meta{font-size:.82rem; opacity:.7;} @media (min-width:900px){ .tvid-row{overflow:visible; justify-content:center; flex-wrap:nowrap;} .tvid-card{flex:1 1 0; min-width:0; max-width:230px;} } /* ---- written reviews: platform logo badge + photo avatars (owner 2026-08-11) ---- */ [data-slot="reviews-widget"] .review-source{ margin-left:auto; flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid rgba(15,27,20,.10); border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.08); } [data-slot="reviews-widget"] .review-source svg{display:block;} [data-slot="reviews-widget"] img.review-avatar--photo{ flex:none; width:38px; height:38px; border-radius:50%; object-fit:cover; background:#e7ece8; } /* ============ Comparison board (v2 design) ============ */ .vs-board { border-radius: var(--radius-card); overflow: hidden; border: 1px solid rgba(20, 40, 30, 0.12); background: #fff; box-shadow: 0 18px 44px -30px rgba(15, 40, 25, 0.35); } .vs-head, .vs-row { display: grid; grid-template-columns: minmax(150px, 0.8fr) 1.35fr 1.35fr; } .vs-head { background: linear-gradient(180deg, #0f2a1c, #12351f); color: #fff; font-weight: 800; font-size: 1.02rem; } .vs-head > span { padding: 1rem 1.1rem; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .vs-head-them { color: rgba(255, 255, 255, 0.66); font-weight: 700; } .vs-badge { display: inline-block; padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; } .vs-badge--us { background: linear-gradient(135deg, #f2e35a, #cfe04f); color: #101a12; } .vs-badge--them { background: rgba(255, 255, 255, 0.16); color: #fff; } .vs-row + .vs-row, .vs-head + .vs-row { border-top: 1px solid rgba(20, 40, 30, 0.1); } .vs-cat { padding: 1.05rem 1.1rem; font-weight: 800; color: var(--heading); background: rgba(160, 200, 40, 0.07); display: flex; align-items: center; font-size: 0.98rem; } .vs-cell { padding: 1.05rem 1.1rem; display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.97rem; line-height: 1.5; } .vs-cell p { margin: 0; } .vs-cell--us { color: var(--ink); border-left: 1px solid rgba(20, 40, 30, 0.1); } .vs-cell--them { color: var(--muted); border-left: 1px solid rgba(20, 40, 30, 0.1); background: rgba(20, 30, 25, 0.025); } .vs-mark { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.82rem; font-weight: 900; line-height: 1; } .vs-mark--yes { background: #165c33; color: #fff; } .vs-mark--no { background: rgba(20, 30, 25, 0.09); color: #7a8580; } .vs-cell-lbl { display: none; } @media (max-width: 819px) { .vs-head { display: none; } .vs-head + .vs-row { border-top: 0; } .vs-row { grid-template-columns: 1fr; } .vs-cat { background: linear-gradient(180deg, #0f2a1c, #12351f); color: #fff; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.6rem 1rem; } .vs-cell { border-left: 0; padding: 0.85rem 1rem; } .vs-cell--us { border-top: 0; } .vs-cell-lbl { display: inline-block; flex: none; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.16rem 0.5rem; border-radius: 999px; margin-top: 0.1rem; } .vs-cell--us .vs-cell-lbl { background: linear-gradient(135deg, #f2e35a, #cfe04f); color: #101a12; } .vs-cell--them .vs-cell-lbl { background: rgba(20, 30, 25, 0.08); color: #6b7671; } } /* ============ Build rail (process v2) ============ */ .build-rail { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; position: relative; } .build-rail::before { content: ""; position: absolute; left: 1.65rem; top: 1.6rem; bottom: 1.6rem; width: 2px; background: linear-gradient(180deg, #165c33, rgba(22, 92, 51, 0.15)); } .build-step { position: relative; display: grid; grid-template-columns: 3.4rem 1fr; gap: clamp(0.9rem, 2vw, 1.6rem); padding: 0 0 clamp(1.6rem, 3vw, 2.3rem); } .build-step:last-child { padding-bottom: 0; } .bs-num { position: relative; z-index: 1; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #0f2a1c, #17512f); color: #e8f56d; font-weight: 900; font-size: 1.05rem; box-shadow: 0 0 0 6px #fff; } .bs-body { background: #fff; border: 1px solid rgba(20, 40, 30, 0.12); border-left: 4px solid #cfe04f; border-radius: 14px; padding: clamp(0.95rem, 2vw, 1.35rem) clamp(1rem, 2.2vw, 1.5rem); box-shadow: 0 14px 34px -28px rgba(15, 40, 25, 0.4); } .bs-body h3 { margin: 0 0 0.4rem; font-size: clamp(1.06rem, 2.2vw, 1.28rem); color: var(--heading); } .bs-body p { margin: 0; color: var(--ink); } /* county pills inside the service-area card */ .area-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; } /* ============ Logo v2 sizing (square lockup) ============ */ .header-logo img { width: auto !important; height: clamp(42px, 4.6vw, 62px); } @media (max-width: 640px) { .header-logo img { height: 40px; } } /* ============ Footer v2 ============ */ .site-footer--v2 { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%); } .site-footer--v2 .footer-shell { background: linear-gradient(165deg, #0e2719 0%, #143a24 100%); border-radius: clamp(18px, 2.4vw, 26px); padding: clamp(1.5rem, 3.2vw, 2.6rem); color: rgba(255, 255, 255, 0.82); box-shadow: 0 26px 60px -38px rgba(10, 35, 20, 0.7); } .footer-shell { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); grid-template-columns: 1fr; } @media (min-width: 860px) { .footer-shell { grid-template-columns: 1.5fr 1fr 1fr; align-items: start; } } .footer-logo { display: block; width: auto; height: clamp(64px, 7vw, 86px); filter: brightness(0) invert(1); margin-bottom: 0.9rem; } .footer-tagline { margin: 0 0 1rem; color: rgba(255, 255, 255, 0.72); max-width: 38ch; font-size: 0.96rem; } .footer-lic { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(230, 251, 82, 0.35); color: #fff; font-size: 0.88rem; font-weight: 700; } .footer-lic svg { color: #e2ef62; flex: none; } .footer-lic strong { color: #e2ef62; } .footer-col-title { margin: 0 0 0.8rem; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: #cfe04f; } .footer-line { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0 0 0.6rem; color: rgba(255, 255, 255, 0.8); font-size: 0.96rem; text-decoration: none; } .footer-line svg { flex: none; color: #cfe04f; transform: translateY(2px); } .footer-line--link { color: #fff; font-weight: 800; min-height: 44px; align-items: center; } .footer-line--link:hover { color: #e6fb52; } .footer-hours { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; } .footer-cta { margin-top: 0.6rem; } .footer-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; } .footer-areas li { color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; padding-left: 0.9rem; position: relative; } .footer-areas li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: #cfe04f; } .footer-base { margin-top: clamp(1rem, 2vw, 1.5rem); padding: 0 clamp(0.4rem, 1.5vw, 1rem); display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: space-between; align-items: center; font-size: 0.86rem; color: #5c6b62; } .site-footer--v2 .footer-legal { display: inline-flex; gap: 1.1rem; } .site-footer--v2 .footer-legal a { color: #2c4a38; text-decoration: none; font-weight: 700; } .site-footer--v2 .footer-legal a:hover { color: #0f2a1c; text-decoration: underline; } /* ---- testimonial videos: grid instead of side-scroll (owner 2026-08-11) ---- */ .tvid-row{ display:grid !important; overflow:visible !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:4px 0 6px; } .tvid-card{ flex:none !important; max-width:none !important; width:100%; } .tvid-video{ aspect-ratio:9/14; border-radius:16px; } @media (min-width:640px){ .tvid-row{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } } @media (min-width:1024px){ .tvid-row{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; } } /* ---- glowing: summer offer badge + "Built Once, Built Right" ---- */ @keyframes ho2BadgeGlow{ 0%,100%{ box-shadow:0 0 0 rgba(223,243,122,0), 0 6px 18px -12px rgba(20,40,25,.35); } 50% { box-shadow:0 0 26px rgba(223,243,122,.85), 0 0 54px rgba(223,243,122,.35); } } .hero-offer2 .ho2-badge{ animation:ho2BadgeGlow 2.4s ease-in-out infinite !important; text-shadow:0 0 12px rgba(255,255,255,.45); } @keyframes h1TagGlowStrong{ 0%,100%{ text-shadow:0 0 10px rgba(223,243,122,.35), 0 2px 6px rgba(0,0,0,.35); } 50% { text-shadow:0 0 26px rgba(223,243,122,.95), 0 0 58px rgba(223,243,122,.55), 0 2px 6px rgba(0,0,0,.35); } } .hero-h1 .h1-tag{ animation:h1-rise .85s .36s cubic-bezier(0.16,1,0.3,1) forwards, h1TagGlowStrong 2.8s 1.2s ease-in-out infinite !important; } @media (prefers-reduced-motion: reduce){ .hero-offer2 .ho2-badge{ animation:none !important; } } /* ============ Reviews rotator v3 (avatar + platform badge) ============ */ .testimonials-strip { padding: 3rem 0 1.25rem; } .tq-viewport { min-height: 210px; } @media (min-width: 720px) { .tq-viewport { min-height: 175px; } } .tq-top { display: flex; align-items: center; gap: 0.75rem; } img.tq-face { flex: none; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; background: #e7ece8; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(22, 92, 51, 0.18); } .tq-topmeta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .tq-topmeta .tq-stars { font-size: 1.05rem; letter-spacing: 3px; } .tq-verified { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: rgba(11, 61, 43, 0.6); } .tq-plat { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid rgba(15, 27, 20, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .tq-plat svg { display: block; } .tq-slide .tq-quote { margin: 0.85rem 0 0; font-weight: 600; } /* ============ The Difference (v3 two-card design) ============ */ .diff-grid { display: grid; gap: clamp(0.9rem, 2vw, 1.4rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 860px) { .diff-grid { grid-template-columns: 1fr 1fr; } } .diff-card { border-radius: 22px; padding: clamp(1.1rem, 2.4vw, 1.6rem); border: 1px solid rgba(20, 40, 30, 0.12); background: #fff; } .diff-card--us { background: linear-gradient(170deg, #0f2a1c 0%, #16512f 100%); border-color: rgba(232, 245, 109, 0.35); box-shadow: 0 26px 60px -34px rgba(11, 61, 43, 0.75); color: #f4fbf1; } .diff-card--them { background: #f6f8f5; box-shadow: none; } .dc-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; } .dc-head h3 { margin: 0; font-size: clamp(1.05rem, 2.8vw, 1.3rem); letter-spacing: -0.01em; } .diff-card--us .dc-head h3 { color: #fff; } .diff-card--them .dc-head h3 { color: #6b7671; } .dc-tag { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .dc-tag--us { background: linear-gradient(135deg, #f2e35a, #cfe04f); color: #101a12; } .dc-tag--them { background: rgba(20, 30, 25, 0.1); color: #6b7671; } .dc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .dc-item { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.55rem 0 0; } .dc-item + .dc-item { border-top: 1px solid rgba(20, 40, 30, 0.09); } .diff-card--us .dc-item + .dc-item { border-top-color: rgba(255, 255, 255, 0.12); } .dc-item div { display: flex; flex-direction: column; gap: 0.12rem; } .dc-item strong { font-size: 1rem; font-weight: 800; } .dc-item span:last-child { font-size: 0.9rem; line-height: 1.45; } .diff-card--us .dc-item span:last-child { color: rgba(244, 251, 241, 0.78); } .diff-card--them .dc-item strong { color: #47514c; } .diff-card--them .dc-item span:last-child { color: #7a8580; } .dc-mark { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.85rem; font-weight: 900; line-height: 1; } .dc-mark--us { background: linear-gradient(135deg, #f2e35a, #cfe04f); color: #101a12; } .dc-mark--them { background: rgba(20, 30, 25, 0.09); color: #8b9591; } .tq-slide { transition: opacity .3s ease, transform .3s ease, visibility .3s; } /* ---- stats tile inside the video testimonial grid ---- */ .tvid-stats{ grid-column: span 1; display:flex; flex-direction:column; justify-content:center; gap:.7rem; padding:1rem .9rem; border-radius:16px; background:linear-gradient(170deg,#0f2a1c 0%,#16512f 100%); border:1px solid rgba(232,245,109,.3); box-shadow:0 20px 50px -32px rgba(11,61,43,.7); color:#f4fbf1; text-align:left; } .tvs-head h2{ margin:0; font-size:clamp(.98rem,3.2vw,1.15rem); line-height:1.25; color:#fff; letter-spacing:-.01em; } .tvs-head p{ margin:.35rem 0 0; font-size:.8rem; line-height:1.4; color:rgba(244,251,241,.75); } .tvs-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem .5rem; } .tvs-stat{ display:flex; flex-direction:column; gap:.1rem; } .tvs-num{ font-weight:900; font-size:clamp(1.05rem,4vw,1.35rem); color:#e8f56d; line-height:1.1; } .tvs-num [data-bind]{ color:inherit; } .tvs-lbl{ font-size:.72rem; font-weight:600; color:rgba(244,251,241,.72); line-height:1.25; } @media (min-width:1024px){ .tvid-stats{ grid-column:span 5; flex-direction:row; align-items:center; gap:2rem; padding:1.3rem 1.6rem; } .tvs-head{ flex:1 1 40%; } .tvs-head h2{ font-size:1.25rem; } .tvs-grid{ flex:1 1 60%; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; } .tvs-num{ font-size:1.5rem; } } .tvid-stats .tvs-head h2{ color:#ffffff !important; -webkit-text-fill-color:#ffffff; } .tvid-stats .tvs-head p{ color:rgba(244,251,241,.8) !important; } .tvid-stats .tvs-num, .tvid-stats .tvs-num [data-bind]{ color:#e8f56d !important; -webkit-text-fill-color:#e8f56d; } .tvid-stats .tvs-lbl{ color:rgba(244,251,241,.78) !important; } .tvid-stats .tvs-head p{ color:#cfe8cf !important; -webkit-text-fill-color:#cfe8cf; opacity:1 !important; } /* ---- complimentary design concept section ---- */ .dc-value{ color:#11705a; white-space:nowrap; } .dc-card{ max-width:880px; margin:0 auto; background:#fff; border:1px solid rgba(17,112,90,.14); border-top:5px solid #11705a; border-radius:22px; padding:1.4rem 1.2rem 1.6rem; box-shadow:0 34px 70px -46px rgba(11,61,43,.45); } .dc-steps{ list-style:none; margin:0 0 1.2rem; padding:0 0 1.1rem; display:grid; gap:.6rem; border-bottom:1px solid rgba(17,112,90,.14); } .dc-steps li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.92rem; color:#2c4a38; font-weight:600; line-height:1.4; } .dc-step-n{ flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:#11705a; color:#e8f56d; font-weight:900; font-size:.8rem; display:grid; place-items:center; } .dc-form{ display:grid; grid-template-columns:1fr; gap:.85rem; } .dc-form .field{ display:flex; flex-direction:column; gap:.3rem; } .dc-form label{ font-size:.82rem; font-weight:800; color:#1f3a2c; } .dc-form input[type=text], .dc-form input[type=email], .dc-form input[type=tel], .dc-form textarea{ width:100%; padding:.75rem .85rem; border-radius:12px; border:1px solid rgba(17,112,90,.25); background:#fbfdfa; font:inherit; color:#12241a; } .dc-form input:focus, .dc-form textarea:focus{ outline:none; border-color:#11705a; box-shadow:0 0 0 3px rgba(17,112,90,.14); } .dc-drop{ position:relative; border:2px dashed rgba(17,112,90,.35); border-radius:14px; background:#f4faf5; padding:1.1rem; text-align:center; } .dc-drop input[type=file]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; } .dc-droplabel{ font-weight:800; color:#11705a; font-size:.92rem; } .dc-submit{ margin-top:.2rem; text-align:center; } .dc-submit .btn{ width:100%; } .dc-note{ margin-top:.6rem; } @media (min-width:720px){ .dc-card{ padding:1.8rem 1.9rem 2rem; } .dc-steps{ grid-template-columns:repeat(3,1fr); gap:1rem; } .dc-form{ grid-template-columns:1fr 1fr; gap:1rem; } .dc-full{ grid-column:1 / -1; } .dc-submit .btn{ width:auto; min-width:320px; } } .dc-note{ max-width:560px; margin-left:auto; margin-right:auto; } /* ---- Us vs Them: aligned comparison board (v9) ---- */ .vsx{ max-width:1000px; margin:0 auto; display:grid; gap:.75rem; } .vsx-legend{ display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.3rem; } .vsx-chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .85rem; border-radius:999px; font-weight:800; font-size:.85rem; } .vsx-chip--us{ background:linear-gradient(135deg,#0f2a1c,#16512f); color:#fff; } .vsx-chip--them{ background:#eef0ee; color:#6b7a70; border:1px solid rgba(0,0,0,.07); } .vsx-chip-tag{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:.15rem .45rem; border-radius:999px; } .vsx-chip--us .vsx-chip-tag{ background:#e8f56d; color:#0f2a1c; } .vsx-chip--them .vsx-chip-tag{ background:#fff; color:#8a9990; border:1px solid rgba(0,0,0,.08); } .vsx-vs{ font-weight:900; color:#8a9990; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; } .vsx-row{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; background:#fff; border:1px solid rgba(17,112,90,.12); border-radius:18px; padding:.85rem .8rem; box-shadow:0 20px 44px -40px rgba(11,61,43,.5); } .vsx-topic{ grid-column:1 / -1; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:900; color:#11705a; } .vsx-cell{ display:flex; gap:.5rem; align-items:flex-start; padding:.7rem .7rem; border-radius:14px; } .vsx-cell strong{ display:block; font-size:.92rem; line-height:1.25; } .vsx-cell span:not(.vsx-mark){ display:block; font-size:.8rem; line-height:1.4; margin-top:.2rem; } .vsx-cell--us{ background:linear-gradient(160deg,#0f2a1c,#16512f); color:#f4fbf1; } .vsx-cell--us strong{ color:#fff; } .vsx-cell--us span:not(.vsx-mark){ color:#cfe8cf; } .vsx-cell--them{ background:#f4f5f4; color:#6b7a70; border:1px dashed rgba(0,0,0,.1); } .vsx-cell--them strong{ color:#5d6b62; text-decoration:line-through; text-decoration-color:rgba(200,60,60,.5); } .vsx-cell--them span:not(.vsx-mark){ color:#8a9990; } .vsx-mark{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.8rem; font-weight:900; margin-top:1px; } .vsx-mark--us{ background:#e8f56d; color:#0f2a1c; } .vsx-mark--them{ background:#fff; color:#c14a4a; border:1px solid rgba(193,74,74,.3); } @media (min-width:820px){ .vsx-row{ grid-template-columns:170px 1fr 1fr; align-items:stretch; gap:.9rem; padding:.7rem .9rem; } .vsx-topic{ grid-column:auto; display:flex; align-items:center; font-size:.78rem; } .vsx-cell{ padding:.8rem .9rem; } } /* ══════════════════════════════════════════════════════════════ ROUND 13 — one CTA system, 3-step flow, drone build→done flow, testimonial closer tile, livelier design-concept card ══════════════════════════════════════════════════════════════ */ /* ---- 1. ONE primary CTA everywhere: deep emerald + white, lime hairline. Reads on bright or photo backgrounds; the black/lime phone pill stays as the secondary "call" look. ---- */ body .btn-primary, body .btn-yellow, body .site-header .btn-yellow, body .cta-strip .btn-primary, body .final-cta .btn-primary, body .hero-form-wrap button[type="submit"], body .hero-form-wrap .btn-primary, body .dc-submit .btn, body .sticky-book, body .chip-modal__btn--primary { background: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; border: 1px solid rgba(232, 245, 109, 0.55) !important; font-weight: 900 !important; text-shadow: none !important; box-shadow: 0 14px 30px -14px rgba(9, 60, 40, 0.6), inset 0 1px 0 rgba(255,255,255,0.14) !important; } @media (hover: hover) { body .btn-primary:hover, body .btn-yellow:hover, body .dc-submit .btn:hover, body .sticky-book:hover, body .chip-modal__btn--primary:hover { background: linear-gradient(110deg, #43cb86 0%, #1c9767 48%, #0d5238 100%) !important; border-color: #e8f56d !important; transform: translateY(-1px); } } body .btn-primary:focus-visible, body .btn-yellow:focus-visible { outline: 3px solid #0d5238; outline-offset: 3px; } /* ---- 2. Drone gallery: build → arrow → completed trio ---- */ .aer-flow { display: grid; gap: 12px; } .aer-fig--lead img { aspect-ratio: 16/9; filter: saturate(0.82) contrast(1.02); } .aer-fig--lead { outline: 2px dashed rgba(15, 27, 20, 0.28); outline-offset: 3px; } .aer-flow > .aer-fig--lead + .aer-fig--lead { margin-top: -2px; } @media (min-width: 641px){ .aer-flow { grid-template-columns: repeat(2, minmax(0,1fr)); } .aer-flow > .aer-step { grid-column: 1 / -1; } } .aer-step { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; } .aer-step-line { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(15,27,20,0) 0%, rgba(15,27,20,.22) 60%, rgba(15,27,20,.22) 100%); } .aer-step-line:last-child { background: linear-gradient(270deg, rgba(15,27,20,0) 0%, rgba(15,27,20,.22) 60%, rgba(15,27,20,.22) 100%); } .aer-step-pill { display: inline-flex; align-items: center; gap: .6rem; padding: 9px 18px 9px 12px; border-radius: 999px; background: linear-gradient(180deg, #123a29, #0b2419); color: #f6fbef; font-weight: 900; font-size: clamp(.78rem, 1.7vw, .95rem); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 12px 26px rgba(11, 36, 25, .28); } .aer-step-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: linear-gradient(180deg, #eaf75f, #cfe23f); color: #0d100e; font-size: 1rem; font-weight: 900; line-height: 1; animation: aerStepBob 1.8s ease-in-out infinite; } @keyframes aerStepBob { 0%,100%{ transform: translateY(-2px); } 50%{ transform: translateY(2px); } } @media (prefers-reduced-motion: reduce){ .aer-step-ico { animation: none; } } .aer-grid--done .aer-fig { box-shadow: 0 14px 34px rgba(16, 32, 24, 0.18); border: 2px solid rgba(207, 226, 63, 0.9); } .aer-tag { display: inline-flex; align-items: center; gap: .35rem; } .aer-tag-ico { font-size: .95em; line-height: 1; } .aer-fig .aer-tag--build { background: #ffffff !important; color: #0d100e !important; border: 1px solid rgba(13,16,14,.9) !important; border-bottom-width: 3px !important; } .aer-fig .aer-tag--done { background: linear-gradient(180deg, #eaf75f, #cfe23f) !important; color: #0d100e !important; border: 1px solid rgba(13,16,14,.28) !important; box-shadow: 0 6px 18px rgba(190, 214, 60, .55) !important; } @media (min-width: 641px) { .aer-grid--done { grid-template-columns: repeat(3, minmax(0,1fr)); } } /* ---- 3. How it works: three clean cards ---- */ .flow3 { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: f3; } @media (min-width: 860px) { .flow3 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; } } .flow3-card { position: relative; background: #fff; border: 1px solid rgba(13, 82, 56, 0.14); border-top: 5px solid #0d5238; border-radius: 20px; padding: 2.1rem 1.25rem 1.35rem; box-shadow: 0 26px 60px -40px rgba(11, 61, 43, 0.45); } .f3-num { position: absolute; top: -1.05rem; left: 1.15rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #17825a, #0b4530); color: #e8f56d; font-weight: 900; font-size: 1.05rem; box-shadow: 0 0 0 5px #fff, 0 10px 22px -10px rgba(9,60,40,.6); } .flow3-card h3 { margin: .35rem 0 .5rem; font-size: clamp(1.08rem, 2.4vw, 1.3rem); font-weight: 900; color: #0f1b14; letter-spacing: -.01em; } .flow3-card p { margin: 0; font-size: .95rem; line-height: 1.55; color: #40564a; } /* Material photography is intentionally separate from the written steps. */ .material-gallery { max-width: 1120px; margin: 2rem auto 0; } .material-gallery-track { list-style: none; margin: 0; padding: 0 0 .65rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--cta-green-mid) transparent; } .material-gallery-track li { min-width: 0; } .material-gallery-track img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; border: 1px solid rgba(13,82,56,.12); box-shadow: 0 16px 32px -26px rgba(11,61,43,.55); } @media (min-width: 900px) { .material-gallery-track { grid-auto-flow: initial; grid-template-columns: repeat(6, minmax(0,1fr)); overflow: visible; } } /* ---- 4. Testimonial closer tile ---- */ .tvs-kicker { display: inline-block; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #e8f56d; margin-bottom: .35rem; } .tvs-list { list-style: none; margin: 0 0 .85rem; padding: 0; display: grid; gap: .35rem; } .tvs-list li { position: relative; padding-left: 1.15rem; font-size: .82rem; font-weight: 600; color: #e9f5e6; line-height: 1.4; } .tvs-list li::before { content: "\2713"; position: absolute; left: 0; color: #e8f56d; font-weight: 900; } .tvs-cta { display: grid; gap: .45rem; justify-items: start; } .tvs-next { margin: 0; font-size: .92rem; font-weight: 800; color: #fff; line-height: 1.35; } .tvs-cta .tvs-btn { width: 100%; text-align: center; } .tvs-orcall { font-size: .8rem; color: #cfe8cf; } .tvs-orcall a { color: #e8f56d; font-weight: 800; text-decoration: none; } @media (min-width: 1024px) { .tvid-stats { align-items: stretch; gap: 1.6rem; } .tvs-head, .tvs-mid { flex: 1 1 33%; } .tvs-cta { flex: 0 0 22%; align-content: center; } .tvs-mid .tvs-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ---- 5. Design concept card: more alive ---- */ .dc-card--v2 { background: linear-gradient(180deg, #f4fbf3 0%, #ffffff 42%); border: 1px solid rgba(17, 112, 90, 0.18); border-top: 0; padding-top: 0; overflow: hidden; } .dc-ribbon { margin: 0 -1.2rem 1.15rem; padding: .8rem 1.2rem; background: linear-gradient(120deg, #0b4530 0%, #17825a 55%, #2aa878 100%); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .dc-ribbon-val { background: linear-gradient(180deg, #eaf75f, #cfe23f); color: #0d100e; font-weight: 900; font-size: .82rem; letter-spacing: .02em; padding: .3rem .7rem; border-radius: 999px; } .dc-ribbon-txt { font-size: .84rem; font-weight: 700; color: #eaf7ee; } .dc-card--v2 .dc-steps { border-bottom: 1px dashed rgba(17,112,90,.28); } .dc-card--v2 .dc-steps li { background: #fff; border: 1px solid rgba(17,112,90,.12); border-radius: 14px; padding: .6rem .7rem; box-shadow: 0 10px 24px -22px rgba(11,61,43,.5); } .dc-card--v2 .dc-step-n { background: linear-gradient(160deg, #17825a, #0b4530); } .dc-card--v2 .dc-drop { background: linear-gradient(180deg, #eef8ee, #f9fdf8); border-color: rgba(17,112,90,.45); } @media (min-width: 720px) { .dc-card--v2 .dc-steps { grid-template-columns: repeat(3, minmax(0,1fr)); } .dc-card--v2 .dc-form { grid-template-columns: repeat(2, minmax(0,1fr)); } .dc-card--v2 .dc-full { grid-column: 1 / -1; } } /* stats tile: no overflow on phones */ .tvid-stats { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 1023px) { .tvid-stats { grid-column: 1 / -1; } } .tvs-cta { width: 100%; justify-items: stretch; } .tvid-stats .tvs-next { color: #ffffff !important; -webkit-text-fill-color: #ffffff; } .tvid-stats .tvs-btn { width: 100%; } /* ---- How it works v2: photo steps + material samples ---- */ .proc2 { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 900px) { .proc2 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; } } .proc2-card { position: relative; background: #fff; border: 1px solid rgba(13,82,56,.14); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -42px rgba(11,61,43,.5); display: flex; flex-direction: column; } .proc2-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #eef3ec; } .proc2-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .proc2-step { position: absolute; top: .7rem; left: .7rem; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border-radius: 999px; background: rgba(9,32,22,.82); color: #eaf75f; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(6px); } .proc2-body { padding: 1.1rem 1.15rem 1.3rem; display: grid; gap: .5rem; } .proc2-body h3 { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.32rem); font-weight: 900; color: #0f1b14; letter-spacing: -.01em; } .proc2-body p { margin: 0; font-size: .95rem; line-height: 1.55; color: #40564a; } .proc2-list { list-style: none; margin: .15rem 0 0; padding: 0; display: grid; gap: .3rem; } .proc2-list li { position: relative; padding-left: 1.2rem; font-size: .86rem; font-weight: 650; color: #24382d; line-height: 1.45; } .proc2-list li::before { content: "\2713"; position: absolute; left: 0; color: #17825a; font-weight: 900; } .samples2 { margin: 2.4rem auto 0; max-width: 1120px; background: linear-gradient(165deg, #0e3325, #071b13); border-radius: 26px; padding: 1.6rem 1.15rem 1.5rem; box-shadow: 0 40px 80px -50px rgba(7,32,22,.85); } @media (min-width: 900px) { .samples2 { padding: 2rem 1.9rem 1.9rem; } } .samples2-head { text-align: center; max-width: 640px; margin: 0 auto 1.2rem; } .samples2-kicker { display: inline-block; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #eaf75f; margin-bottom: .4rem; } .samples2-head h3 { margin: 0 0 .45rem; color: #fff; font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 900; letter-spacing: -.015em; } .samples2-head p { margin: 0; color: #cfe2d6; font-size: .95rem; line-height: 1.55; } .samples2-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 700px) { .samples2-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } } .samples2-grid li { border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(234,247,95,.16); } .samples2-grid figure { margin: 0; } .samples2-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .samples2-grid figcaption { padding: .5rem .55rem .6rem; font-size: .74rem; font-weight: 800; letter-spacing: .02em; color: #eef7e9; text-align: center; } .samples2-foot { margin: 1.2rem auto 0; text-align: center; } .samples2-foot p { margin: 0 0 .8rem; color: #dcecd9; font-size: .92rem; font-weight: 650; } /* ---- light panels: replace dark-green blocks with the page's light section wash ---- */ .samples2 { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; border: 1px solid rgba(20, 40, 30, 0.10); box-shadow: 0 26px 60px -46px rgba(11, 61, 43, 0.35) !important; } .samples2-kicker { color: #14603f !important; } .samples2-head h3 { color: #0f1b14 !important; } .samples2-head p, .samples2-foot p { color: #40564a !important; } .samples2-grid li { background: #fff !important; border-color: rgba(20, 40, 30, 0.12) !important; } .samples2-grid figcaption { color: #24382d !important; } .tvid-stats { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; border-color: rgba(20, 40, 30, 0.12) !important; box-shadow: 0 20px 50px -40px rgba(11, 61, 43, 0.35) !important; color: #14251b !important; } .tvs-head h2 { color: #0f1b14 !important; } .tvs-head p { color: #40564a !important; } .diff-card--us { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; border-color: rgba(20, 40, 30, 0.14) !important; box-shadow: 0 26px 60px -44px rgba(11, 61, 43, 0.35) !important; color: #14251b !important; } .diff-card--us .dc-step-lbl, .diff-card--us h3, .diff-card--us p, .diff-card--us li { color: #1a2c22 !important; } .vs-head, .vs-cat, .vsx-cell--us { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; color: #0f1b14 !important; } .vs-head > span, .vs-cat { border-color: rgba(20,40,30,.12); } /* ---- light surface for the former dark green sections ---- */ [data-section="gallery"], [data-section="reviews"], [data-section="testimonials"], [data-section="hero-testimonials"] { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; } [data-section="gallery"] h2, [data-section="gallery"] h3, [data-section="gallery"] p, [data-section="hero-testimonials"] h2, [data-section="hero-testimonials"] h3, [data-section="hero-testimonials"] p, [data-section="hero-testimonials"] li, [data-section="reviews"] h2, [data-section="reviews"] h3, [data-section="reviews"] p { color: #0f1b14 !important; -webkit-text-fill-color: #0f1b14; } [data-section="gallery"] .section-head p, [data-section="hero-testimonials"] .section-head p, [data-section="reviews"] .section-head p { color: #40564a !important; -webkit-text-fill-color: #40564a; } [data-section="gallery"] .kicker, [data-section="hero-testimonials"] .kicker, [data-section="reviews"] .kicker { color: #11705a !important; -webkit-text-fill-color: #11705a; } .testimonials-strip::before { display: none !important; } .testimonials-strip::after { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; backdrop-filter: none !important; } .site-footer--v2 .footer-shell { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; border: 1px solid rgba(20, 40, 30, 0.12); color: #24382d !important; box-shadow: 0 26px 60px -46px rgba(11, 61, 43, 0.35) !important; } .site-footer--v2 .footer-shell h3, .site-footer--v2 .footer-shell strong, .site-footer--v2 .footer-shell a { color: #0f1b14 !important; } .site-footer--v2 .footer-shell p, .site-footer--v2 .footer-shell small, .site-footer--v2 .footer-shell li, .site-footer--v2 .footer-shell span { color: #40564a !important; } .site-footer--v2 .footer-logo { filter: brightness(0) saturate(0) opacity(0.88) !important; } .site-footer--v2 .footer-lic { background: rgba(17,112,90,.08) !important; border-color: rgba(17,112,90,.28) !important; } .site-footer--v2 .footer-shell svg { color: #11705a !important; stroke: currentColor; } .site-footer--v2 .footer-col li::marker { color: #11705a; } /* ---- Mobile galleries: auto-moving 2-row photo wall (no manual scrolling) ---- */ @media (max-width: 860px) { .strip-viewport { overflow: hidden !important; scroll-snap-type: none !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .strip-track { display: grid !important; grid-auto-flow: column; grid-auto-columns: 30vw; grid-template-rows: repeat(3, 1fr); gap: 0.34rem !important; width: max-content !important; animation: strip-scroll 42s linear infinite !important; } .strip-track .gallery-item { flex: none !important; max-width: none !important; display: block !important; scroll-snap-align: none !important; } .strip-track .gallery-link { aspect-ratio: 1 / 1; border-radius: 12px; box-shadow: 0 10px 22px rgba(16, 35, 28, 0.18); } .strip-hint { display: none !important; } } /* ---- ROUND: centered section copy, brighter $750 tag, clearer Us-vs-Them ---- */ .tvid-stats .tvs-head, .tvid-stats .tvs-head h2, .tvid-stats .tvs-head p, .tvid-stats .tvs-kicker { text-align: center; } .tvid-stats .tvs-head { display: block; } .tvid-stats .tvs-cta { text-align: center; } .section-head.centered, .section-head.centered h2, .section-head.centered p { text-align: center; } #preview-heading { text-align: center; } .dc-value { color: #0f1b14 !important; background: linear-gradient(180deg, #f0ff7a, #cfe04f); padding: 0.04em 0.34em; border-radius: 0.38em; box-shadow: 0 6px 16px -12px rgba(11, 61, 43, 0.6); } .dc-card--v2 .dc-form { margin-top: 0.4rem; } /* Us vs Them: bigger labels, clearer sides */ .vsx-legend { gap: 0.75rem; margin-bottom: 0.6rem; } .vsx-chip { font-size: 0.98rem; padding: 0.6rem 1rem; } .vsx-vs { font-size: 0.95rem; color: #2c4a38; } .vsx-topic { font-size: 0.86rem !important; letter-spacing: 0.1em; color: #0f2a1c !important; } .vsx-cell strong { font-size: 1.04rem !important; } .vsx-cell span:not(.vsx-mark) { font-size: 0.92rem !important; } @media (min-width: 820px) { .vsx-topic { font-size: 0.98rem !important; letter-spacing: 0.04em; text-transform: none; } .vsx-row { grid-template-columns: 200px 1fr 1fr; } } @media (max-width: 819px) { .vsx-row { grid-template-columns: 1fr; gap: 0.5rem; } .vsx-cell { padding: 0.8rem 0.85rem; } .vsx-cell::before { order: -1; flex: 0 0 auto; align-self: flex-start; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.12em; padding: 0.22rem 0.45rem; border-radius: 999px; } .vsx-cell--us::before { content: "US"; background: #e8f56d; color: #0f2a1c; } .vsx-cell--them::before { content: "THEM"; background: #fff; color: #8a9990; border: 1px solid rgba(0,0,0,.1); } } /* Us column must stay high-contrast dark green with light text */ .vsx-cell--us { background: linear-gradient(160deg, #0f2a1c, #16512f) !important; } .vsx-cell--us strong { color: #ffffff !important; -webkit-text-fill-color: #ffffff; } .vsx-cell--us span:not(.vsx-mark) { color: #d6ecd8 !important; -webkit-text-fill-color: #d6ecd8; } .vsx-cell--them { background: #f4f5f4 !important; } .vsx-cell--them strong { color: #56635b !important; -webkit-text-fill-color: #56635b; } .vsx-cell--them span:not(.vsx-mark) { color: #7f8b83 !important; -webkit-text-fill-color: #7f8b83; } @media (max-width: 819px) { .vsx-legend { flex-direction: column; gap: 0.4rem; } .vsx-legend .vsx-chip { width: 100%; justify-content: center; } } /* "Why Homeowners Pick Us" tile now sits on the light wash — dark type */ .tvid-stats .tvs-kicker { color: #11705a !important; -webkit-text-fill-color: #11705a; } .tvid-stats .tvs-head h2 { color: #0f1b14 !important; -webkit-text-fill-color: #0f1b14; } .tvid-stats .tvs-head p { color: #3d5147 !important; -webkit-text-fill-color: #3d5147; } .tvid-stats .tvs-list li { color: #1f3a2c !important; -webkit-text-fill-color: #1f3a2c; } .tvid-stats .tvs-num, .tvid-stats .tvs-num [data-bind] { color: #11705a !important; -webkit-text-fill-color: #11705a; } .tvid-stats .tvs-lbl { color: #4a5c52 !important; -webkit-text-fill-color: #4a5c52; } .tvid-stats .tvs-next { color: #0f1b14 !important; -webkit-text-fill-color: #0f1b14; font-weight: 800; } .tvid-stats .tvs-orcall { color: #3d5147 !important; } .tvid-stats .tvs-orcall a { color: #11705a !important; -webkit-text-fill-color: #11705a; } /* ---- Headline: keep the tagline crisp, no glow pulse ---- */ .hero-h1 .h1-tag { animation: h1-rise .85s .36s cubic-bezier(0.16,1,0.3,1) forwards !important; text-shadow: 0 2px 8px rgba(0,0,0,.38) !important; } /* ---- Mobile galleries: denser 3-row photo wall, more work visible at a glance ---- */ @media (max-width: 860px) { .strip-track .gallery-link { border-radius: 10px; box-shadow: 0 6px 14px rgba(16,35,28,.16); } .strip-track .gallery-item figcaption, .strip-track .gallery-item .gallery-cap { display: none !important; } .strip-viewport { padding-block: 0.1rem; } } /* ================= Turn every remaining yellow CTA into the green gradient ============ */ body .btn-lock, body .offer-section--v8 .btn-lock, body .btn-primary.cta-pulse, body .btn-yellow.btn-lock, body .footer-cta, body .gbp-card-cta { background: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; background-image: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; border: 1px solid rgba(232, 245, 109, 0.55) !important; text-shadow: none !important; box-shadow: 0 14px 30px -14px rgba(9, 60, 40, 0.6), inset 0 1px 0 rgba(255,255,255,0.14) !important; } @media (hover: hover) { body .btn-lock:hover, body .btn-primary.cta-pulse:hover, body .footer-cta:hover { background-image: linear-gradient(110deg, #43cb86 0%, #1c9767 48%, #0d5238 100%) !important; transform: translateY(-1px); } } /* ================= Footer contact bubble ============ */ .footer-col--contact { text-align: center; } .footer-col--contact .footer-col-title { margin-bottom: 0.35rem; } .footer-col--contact .footer-line { justify-content: center; } .footer-hours-week { display: grid; gap: 0.15rem; margin: 0.55rem auto 0.7rem; max-width: 20rem; font-size: 0.92rem; width: 100%; } .footer-hours-week > div { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.12rem 0; border-bottom: 1px solid rgba(20, 60, 40, 0.1); } .footer-hours-week > div:last-child { border-bottom: 0; } .footer-col--contact .footer-areas { margin: 0.5rem auto 0.9rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.55rem; list-style: none; padding: 0; } .footer-col--contact .footer-areas li { font-size: 0.86rem; padding: 0.18rem 0.6rem; border-radius: 999px; border: 1px solid rgba(20, 60, 40, 0.16); } .footer-col--contact .footer-cta { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; } .footer-base--in { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(20, 60, 40, 0.12); } .footer-base--in .footer-legal { display: inline-flex; gap: 1rem; justify-content: center; } body [data-slot="lead-form"] .lead-form .btn-primary, body [data-slot="project-preview"] .btn-primary, body [data-slot="lead-form"] .btn-primary { background: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; border: 1px solid rgba(232, 245, 109, 0.55) !important; } .footer-shell > .footer-base--in { grid-column: 1 / -1; width: 100%; } /* ============ Aerial: big arrow between build and finished ============ */ .aer-step--arrow { display: flex; align-items: center; justify-content: center; margin: 0.6rem 0 0.9rem; } .aer-step--arrow .aer-arrow { display: inline-flex; align-items: center; justify-content: center; width: clamp(58px, 12vw, 82px); height: clamp(58px, 12vw, 82px); border-radius: 999px; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1; font-weight: 700; color: #17240c; background: linear-gradient(160deg, #e8f56d 0%, #c8dd45 100%); box-shadow: 0 16px 32px -18px rgba(60, 80, 10, 0.65); animation: aer-bob 2.4s ease-in-out infinite; } @keyframes aer-bob { 0%,100%{transform:translateY(-4px)} 50%{transform:translateY(5px)} } @media (prefers-reduced-motion: reduce) { .aer-step--arrow .aer-arrow { animation: none; } } /* Each drone project reads as its own card */ .aer-group--card { background: #ffffff; border: 1px solid rgba(20, 50, 35, 0.12); border-radius: clamp(16px, 2.2vw, 24px); padding: clamp(1rem, 2.6vw, 1.75rem); box-shadow: 0 24px 50px -40px rgba(11, 61, 43, 0.45); } .aer-group--card + .aer-group--card { margin-top: clamp(1.4rem, 3.4vw, 2.4rem); } .aer-group--card .aer-group-title { text-align: center; margin: 0 0 0.9rem; font-size: clamp(1.05rem, 2.4vw, 1.3rem); } /* ============ How It Works: small material tiles ============ */ .material-gallery--tiles { margin: 0 auto 1.2rem; max-width: 760px; } .material-gallery--tiles .material-gallery-track { display: grid !important; grid-auto-flow: row !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0.5rem; overflow: visible !important; list-style: none; padding: 0; margin: 0; } .material-gallery--tiles .material-gallery-track img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; min-width: 0; } @media (min-width: 700px) { .material-gallery--tiles .material-gallery-track { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } } .process-lede { text-align: center; max-width: 44rem; margin: 0 auto 1.5rem; color: #40564a; } /* ============ Review carousel name ============ */ .tq-name { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.7rem; text-align: center; align-items: center; } .tq-name strong { font-size: 1rem; } .tq-name span { font-size: 0.85rem; opacity: 0.72; } .footer-email { word-break: break-word; } /* ═══════════ Always-visible license pill in the pinned header ═══════════ */ .site-header.header-hidden { transform: none !important; opacity: 1 !important; pointer-events: auto !important; } .header-license { display: inline-flex !important; align-items: center; gap: 0.4rem; margin-left: 0.6rem; padding: 0.34rem 0.7rem; border-radius: 999px; border: 1px solid rgba(25, 40, 20, 0.12); background: linear-gradient(180deg, #f7fbe9 0%, #eef6d8 100%); color: #1d2a13; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.005em; line-height: 1.1; white-space: nowrap; } .header-license .icon { color: #2f7d4f; flex: none; } .header-license strong { font-weight: 800; } @media (max-width: 1024px) { .header-license .hl-long { display: none; } } @media (max-width: 620px) { .header-license { margin-left: 0.4rem; padding: 0.26rem 0.5rem; font-size: 0.68rem; gap: 0.28rem; } .header-license .icon { width: 13px; height: 13px; } } @media (max-width: 400px) { .header-license { font-size: 0.62rem; padding: 0.22rem 0.42rem; } } /* Footer contact rows: email + two phone lines, simple and left-aligned */ .footer-contact-list { display: grid; gap: 0.15rem; margin: 1rem 0 0.4rem; text-align: left; justify-items: start; } .footer-contact-row { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0; min-height: 40px; color: var(--heading); font-weight: 800; font-size: 1rem; text-decoration: none; word-break: break-word; } .footer-contact-row svg { flex: none; color: #2f7d4f; } .footer-contact-row:hover { text-decoration: underline; } .footer-contact-list a:first-child { font-size: 0.92rem; font-weight: 700; } /* ══════════════ Header CTA: match the sticky bar call button ══════════════ */ body .site-header .header-cta, body .site-header .btn-yellow.header-cta { background: linear-gradient(180deg, #1b211c, #0a0d0b) !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 8px 20px -12px rgba(6,10,8,0.85), inset 0 1px 0 rgba(255,255,255,0.16) !important; animation: none !important; } @media (hover: hover) { body .site-header .header-cta:hover { filter: brightness(1.08); } } /* ---- Round 20: every "Get My Free … Quote" section CTA uses the green gradient ---- */ body .section-cta .btn-ink, body .section-cta .btn.btn-ink { background: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; border: 1px solid rgba(232, 245, 109, 0.55) !important; font-weight: 900 !important; text-shadow: none !important; box-shadow: 0 14px 30px -14px rgba(9, 60, 40, 0.6), inset 0 1px 0 rgba(255,255,255,0.14) !important; } @media (hover: hover) { body .section-cta .btn-ink:hover { filter: brightness(1.05); transform: translateY(-1px); } } /* ---- Round 20b: call-first section CTAs ---- */ body .section-cta { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } body .section-call-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; } body .section-call-btn .section-call-ico { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; } body .section-cta-alt { font-size: 0.9rem; font-weight: 700; color: #14532d; text-decoration: underline; text-underline-offset: 3px; text-align: center; } body .section-cta-alt:hover { color: #0a7d68; } /* ══════════════════════════════════════════════════════════════ ROUND 21 — one CTA system: green-gradient "Call" + ghost "Book My Free Visit" (same palette as the consultation modal) ══════════════════════════════════════════════════════════════ */ /* Ghost book-a-visit button, matches .chip-modal__btn--ghost */ body .btn-visit-cta, body .sticky-book, body .site-header .header-cta, body .footer-cta { background: #f3f8ef !important; color: #145c37 !important; -webkit-text-fill-color: #145c37; border: 1.5px solid rgba(20, 92, 55, 0.4) !important; box-shadow: none !important; font-weight: 800 !important; text-shadow: none !important; animation: none !important; } body .btn-visit-cta { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.8rem 1.5rem; font-size: 1rem; text-decoration: none; } @media (hover: hover) { body .btn-visit-cta:hover, body .sticky-book:hover, body .site-header .header-cta:hover, body .footer-cta:hover { background: #e6f2e2 !important; border-color: rgba(20, 92, 55, 0.7) !important; filter: none; } } /* Header phone pill + sticky call: the shared CTA green gradient */ body .header-phone, body .header-phone.cta-glow, body .sticky-bar--v2 .sticky-call { background: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; border: 1px solid rgba(232, 245, 109, 0.55) !important; box-shadow: 0 14px 30px -14px rgba(9, 60, 40, 0.6), inset 0 1px 0 rgba(255,255,255,0.14) !important; color: #fff !important; } body .header-phone .icon-wrap { background: rgba(255,255,255,0.16) !important; box-shadow: none !important; } body .header-phone .icon-wrap svg { stroke: #fff !important; color: #fff !important; } @media (hover: hover) { body .sticky-bar--v2 .sticky-call:hover { filter: brightness(1.06); background: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; } } /* ---- Material samples: 3 per row, two rows (no horizontal scroll) ---- */ .material-gallery--rows3 { max-width: 900px; margin: 1.5rem auto 1.75rem; } .material-gallery--rows3 .material-gallery-track { grid-auto-flow: row !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-columns: auto !important; overflow: visible !important; gap: 10px; padding-bottom: 0; } /* ---- Interleaved review duo: one video + one written review ---- */ .revduo { padding: 1.5rem 0 2.25rem; } .revduo-grid { display: grid; gap: 14px; align-items: stretch; max-width: 1020px; margin: 0 auto; } @media (min-width: 820px) { .revduo-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 20px; } } .revduo-grid--solo { grid-template-columns: 1fr; max-width: 420px; } @media (min-width: 820px) { .revduo-grid--solo { grid-template-columns: 1fr; max-width: 440px; } } .revduo-grid--solo .revduo-video video { aspect-ratio: 9 / 13; max-height: 430px; } .revduo-video, .revduo-quote { margin: 0; background: #fff; border: 1px solid rgba(13,82,56,.12); border-radius: 18px; box-shadow: 0 22px 40px -30px rgba(11,61,43,.55); overflow: hidden; } .revduo-video video { display: block; width: 100%; aspect-ratio: 9 / 12; object-fit: cover; max-height: 430px; background: #0d1c14; } .revduo-video figcaption { padding: .65rem .85rem .8rem; font-size: .82rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #0f1b14; text-align: center; } .revduo-quote { display: flex; flex-direction: column; justify-content: center; gap: .7rem; padding: 1.25rem 1.25rem 1.4rem; } .revduo-top { display: flex; align-items: center; gap: .6rem; } .revduo-face { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; flex: none; } .revduo-meta { display: flex; flex-direction: column; line-height: 1.2; } .revduo-stars { color: #f2b01e; font-size: .95rem; letter-spacing: .06em; } .revduo-verified { font-size: .72rem; font-weight: 700; color: #5d7369; } .revduo-plat { margin-left: auto; display: inline-flex; } .revduo-quote blockquote { margin: 0; font-size: clamp(.98rem, 2.4vw, 1.12rem); line-height: 1.55; color: #16281f; font-weight: 600; } .revduo-quote figcaption { display: flex; flex-direction: column; font-size: .84rem; color: #4b6357; } .revduo-quote figcaption strong { color: #0f1b14; font-size: .92rem; } /* Stats-only variant of the old video row */ .tvid-row--stats { display: block !important; } /* ---- Before/After: smaller cards + smaller tag pills ---- */ [data-section="before-after"] .ba-tag { font-size: 0.6rem !important; padding: 0.2rem 0.45rem !important; top: 0.5rem !important; left: 0.5rem !important; letter-spacing: .06em !important; } [data-section="before-after"] .ba-card { border-radius: 16px !important; } [data-section="before-after"] .ba-meta { padding: 0.6rem 0.8rem !important; gap: 0.2rem 0.6rem !important; } [data-section="before-after"] .ba-meta strong { font-size: 0.9rem !important; } [data-section="before-after"] .ba-meta span { font-size: 0.78rem !important; } @media (min-width: 900px) { [data-section="before-after"] .ba-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; } } /* Offer lock-in CTA: single white call button */ body .offer-lock .btn-lock-white { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; background: linear-gradient(180deg, #ffffff, #f4f6f3) !important; background-image: linear-gradient(180deg, #ffffff, #f4f6f3) !important; color: #0f1b14 !important; -webkit-text-fill-color: #0f1b14; border: 1px solid rgba(15,27,20,.16) !important; box-shadow: 0 16px 32px -18px rgba(9,40,26,.55), inset 0 1px 0 #fff !important; font-weight: 900; } @media (hover: hover) { body .offer-lock .btn-lock-white:hover { background-image: linear-gradient(180deg,#ffffff,#eef2ec) !important; transform: translateY(-1px); } } /* Keep footer email on one line */ .footer-contact-row[href^="mailto:"] { white-space: nowrap; } .footer-contact-row[href^="mailto:"] span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; } @media (max-width: 420px) { .footer-contact-row[href^="mailto:"] span { font-size: 0.78rem; letter-spacing: -0.01em; } } /* ---------- Unified review avatars (carousel + duo cards) ---------- */ img.tq-face, img.revduo-face { flex: none; display: block; width: 56px; height: 56px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; object-position: 50% 25%; background: #e7ece8; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(22, 92, 51, 0.16), 0 3px 12px rgba(15, 27, 20, 0.16); } img.tq-face { margin: 0 auto 0.7rem; } .tq-top img.tq-face { margin: 0; } @media (max-width: 640px) { img.tq-face, img.revduo-face { width: 48px; height: 48px; } } /* ---------- Original yellow-green telephone icon on every call CTA ---------- */ a[href^="tel:"]:not(.footer-contact-row) svg:not(.geo-pin-sm), a[href^="tel:"]:not(.footer-contact-row) .icon-wrap svg { stroke: var(--lime-500) !important; color: var(--lime-500) !important; fill: none !important; } /* footer contact phone rows keep their original green icon */ .footer-contact-row[href^="tel:"] svg { stroke: #2f7d4f !important; color: #2f7d4f !important; } /* ---------- Breathing motion on every CTA button ---------- */ @keyframes cta-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.028); } } @keyframes cta-breathe-glow { 0%, 100% { box-shadow: 0 6px 18px rgba(15, 27, 20, 0.18), 0 0 0 0 rgba(194, 212, 77, 0.45); } 50% { box-shadow: 0 12px 30px rgba(15, 27, 20, 0.26), 0 0 0 10px rgba(194, 212, 77, 0); } } body a.btn, body button.btn, body a.header-phone, body a.sticky-call, body button.chip-cta { animation: cta-breathe 2.6s ease-in-out infinite, cta-breathe-glow 2.6s ease-in-out infinite !important; will-change: transform, box-shadow; } /* stagger so the page doesn't pulse in unison */ body a.btn:nth-of-type(even), body button.btn:nth-of-type(even), body button.chip-cta:nth-of-type(even) { animation-delay: 0.85s, 0.85s !important; } body a.sticky-call { animation-delay: 0.4s, 0.4s !important; } @keyframes cta-breathe-glow-strong { 0%, 100% { box-shadow: 0 12px 30px rgba(15, 27, 20, 0.3), 0 0 22px rgba(194, 212, 77, 0.55), 0 0 0 0 rgba(194, 212, 77, 0.6); } 50% { box-shadow: 0 18px 44px rgba(15, 27, 20, 0.38), 0 0 34px rgba(215, 242, 74, 0.85), 0 0 0 14px rgba(194, 212, 77, 0); } } body a.btn:hover, body button.btn:hover, body a.header-phone:hover, body a.sticky-call:hover, body button.chip-cta:hover, body .site-header a.header-phone.cta-glow:hover, body .site-header a.btn.header-cta:hover, body .sticky-bar--v2 a.btn.sticky-call:hover, body a.btn.cta-glow:hover, body a.btn.cta-pulse:hover, body a.btn.btn-lg:hover, body button.btn.btn-lg:hover { animation: cta-breathe 1.9s ease-in-out infinite, cta-breathe-glow-strong 1.9s ease-in-out infinite !important; filter: brightness(1.06) saturate(1.05); } @media (prefers-reduced-motion: reduce) { body a.btn, body button.btn, body a.header-phone, body a.sticky-call, body button.chip-cta { animation: none !important; } } /* breathing motion: win over per-component animation resets */ body .site-header a.header-phone.cta-glow, body .site-header a.btn.header-cta, body .sticky-bar--v2 a.btn.sticky-call, body a.btn.cta-glow, body a.btn.cta-pulse, body a.btn.btn-lg, body button.btn.btn-lg { animation: cta-breathe 2.6s ease-in-out infinite, cta-breathe-glow 2.6s ease-in-out infinite !important; } @media (prefers-reduced-motion: reduce) { body .site-header a.header-phone.cta-glow, body .site-header a.btn.header-cta, body .sticky-bar--v2 a.btn.sticky-call, body a.btn.cta-glow, body a.btn.cta-pulse, body a.btn.btn-lg, body button.btn.btn-lg { animation: none !important; } } /* ══════════════ Sticky bar CTAs: stronger, visible breathing ══════════════ */ @keyframes sticky-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.045); } } @keyframes sticky-breathe-glow { 0%, 100% { box-shadow: 0 8px 20px rgba(15, 27, 20, 0.28), 0 0 0 0 rgba(194, 212, 77, 0.55); } 50% { box-shadow: 0 16px 34px rgba(15, 27, 20, 0.34), 0 0 0 12px rgba(194, 212, 77, 0); } } body .sticky-bar--v2 a.btn.sticky-call, body .sticky-bar--v2 a.btn.sticky-book, body .sticky-bar--v2 a.btn.sticky-quote, body .sticky-bar--v2 button.btn.sticky-book, body .sticky-bar--v2 button.btn.sticky-quote { animation: sticky-breathe 2.2s ease-in-out infinite, sticky-breathe-glow 2.2s ease-in-out infinite !important; will-change: transform, box-shadow; } body .sticky-bar--v2 a.btn.sticky-book, body .sticky-bar--v2 a.btn.sticky-quote, body .sticky-bar--v2 button.btn.sticky-book, body .sticky-bar--v2 button.btn.sticky-quote { animation-delay: 1.1s, 1.1s !important; } @media (hover: hover) { body .sticky-bar--v2 a.btn.sticky-call:hover, body .sticky-bar--v2 a.btn.sticky-book:hover, body .sticky-bar--v2 a.btn.sticky-quote:hover { animation: sticky-breathe 1.5s ease-in-out infinite, cta-breathe-glow-strong 1.5s ease-in-out infinite !important; } } @media (prefers-reduced-motion: reduce) { body .sticky-bar--v2 a.btn.sticky-call, body .sticky-bar--v2 a.btn.sticky-book, body .sticky-bar--v2 a.btn.sticky-quote, body .sticky-bar--v2 button.btn.sticky-book, body .sticky-bar--v2 button.btn.sticky-quote { animation: none !important; } } /* Sticky bar: only the "Call Now" button breathes; the secondary buttons stay still. */ body .sticky-bar--v2 a.btn.sticky-book, body .sticky-bar--v2 a.btn.sticky-quote, body .sticky-bar--v2 button.btn.sticky-book, body .sticky-bar--v2 button.btn.sticky-quote, body .sticky-bar--v2 a.btn.sticky-book:hover, body .sticky-bar--v2 a.btn.sticky-quote:hover, body .sticky-bar--v2 button.btn.sticky-book:hover, body .sticky-bar--v2 button.btn.sticky-quote:hover { animation: none !important; transform: none !important; will-change: auto; } /* Lower sticky "Call Now" stays completely still. */ body .sticky-bar--v2 a.btn.sticky-call, body .sticky-bar--v2 a.sticky-call, body .sticky-bar--v2 a.btn.sticky-call:hover, body .sticky-bar--v2 a.sticky-call:hover { animation: none !important; transform: none !important; will-change: auto; } /* ---------- Hero credential line (license number) ---------- */ .hero-cred { display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 0.3rem; margin: 0 0 0.6rem; padding: 0; border: 0; background: none; backdrop-filter: none; color: rgba(255, 255, 255, 0.85); font-size: 0.76rem; font-weight: 650; letter-spacing: 0.01em; } .hero-cred .icon { color: var(--lime-500); flex: none; width: 13px; height: 13px; } .hero-cred-dot { opacity: 0.45; } .hero-cred-lic { font-variant-numeric: tabular-nums; color: var(--lime-500); letter-spacing: 0.02em; } @media (max-width: 600px) { .hero-cred { font-size: 0.68rem; margin-bottom: 0.45rem; gap: 0.26rem; } } /* ---------- Google-style initial avatar for reviews without a photo ---------- */ .tq-initial { flex: none; display: grid; place-items: center; width: 56px; height: 56px; aspect-ratio: 1 / 1; border-radius: 50%; background: linear-gradient(160deg, #2f7d4f, #1d5c39); color: #fff; font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: 0; text-transform: uppercase; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(22, 92, 51, 0.16), 0 3px 12px rgba(15, 27, 20, 0.16); } .tq-top .tq-initial { margin: 0; } @media (max-width: 640px) { .tq-initial { width: 48px; height: 48px; font-size: 1.3rem; } } /* ---- Header phone pill: center the label over the number ---- */ body .header-phone { align-items: center !important; gap: 0.55rem !important; } body .header-phone .header-phone-text { align-items: center !important; text-align: center !important; line-height: 1.15 !important; } body .header-phone .phone-label { display: block !important; letter-spacing: 0.03em !important; } /* ══════════════════════════════════════════════════════════════ Countdown clock — redesigned: mono "flip card" tiles ══════════════════════════════════════════════════════════════ */ .offer-clock .oc-num, .offer-clock--mini .oc-num { font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace !important; font-weight: 800 !important; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } body .offer-clock:not(.offer-clock--mini) .oc-num { color: #ff4646 !important; text-shadow: 0 0 18px rgba(255, 70, 70, 0.35) !important; } /* Mini clock: single editorial bar, no boxes around digits */ body .offer-clock--mini { display: inline-flex !important; align-items: stretch !important; gap: 0 !important; padding: 0.7rem 0.35rem 0.25rem !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; margin: 0.9rem auto 0 !important; position: relative; overflow: visible; } body .offer-clock--mini::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 62px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #0f3a25, var(--lime-500)); } body .offer-clock--mini .oc-cell { position: relative; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; min-width: clamp(50px, 12.5vw, 66px); padding: 0.1rem 0.55rem 0 !important; overflow: visible; } body .offer-clock--mini .oc-cell::after { content: ""; position: absolute; right: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(15, 58, 37, 0.12); height: auto; left: auto; } body .offer-clock--mini .oc-cell:last-of-type::after { display: none; } body .offer-clock--mini .oc-num { font-size: clamp(1.4rem, 5.2vw, 1.85rem) !important; color: #d92121 !important; text-shadow: none !important; line-height: 1.05 !important; } body .offer-clock--mini .oc-lbl { margin-top: 0.1rem !important; font-size: 0.5rem !important; font-weight: 800 !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: rgba(15, 58, 37, 0.55) !important; } body .offer-clock--mini .oc-sep { display: none !important; } /* Photo upload preview */ .dc-drop.has-file{ border-style:solid; border-color:rgba(17,112,90,.6); background:#eef8ee; } .dc-drop .dc-preview{ position:relative; z-index:2; display:flex; align-items:center; gap:.7rem; margin-top:.75rem; text-align:left; background:#fff; border:1px solid rgba(17,112,90,.2); border-radius:12px; padding:.5rem .6rem; } .dc-preview-img{ width:56px; height:56px; object-fit:cover; border-radius:9px; flex:0 0 auto; } .dc-preview-meta{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; } .dc-preview-name{ font-size:.85rem; font-weight:800; color:#0f2a1c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dc-preview-size{ font-size:.75rem; color:rgba(15,42,28,.6); font-weight:600; } .dc-preview-remove{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:1px solid rgba(17,112,90,.3); background:#fff; color:#11705a; font-size:1.1rem; line-height:1; cursor:pointer; } .dc-preview-remove:hover{ background:#e6f4ec; } /* Mobile design-concept form: keep every grid item inside the card. The generic phone form rule used grid-column on these fields without first giving them min-width:0, so their intrinsic width pushed 28px past the card edge on narrow screens. */ @media (max-width: 719px) { [data-section="project-preview"] .container { width: min(100% - 1.5rem, var(--container)); } .dc-card, .dc-form, .dc-form .field, .dc-drop, .dc-submit { min-width: 0; max-width: 100%; } .dc-card { width: 100%; padding: 0 0.9rem 1.25rem; border-radius: 16px; } .dc-ribbon { margin: 0 -0.9rem 1rem; padding: 0.75rem 0.9rem; } .dc-form { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; } .dc-form .field, .dc-form .dc-full { width: 100% !important; grid-column: auto !important; } .dc-form input[type="text"], .dc-form input[type="email"], .dc-form input[type="tel"], .dc-form textarea, .dc-drop { width: 100%; max-width: 100%; } .dc-drop { padding: 1rem 0.75rem; } .dc-preview-meta { max-width: calc(100% - 98px); } .dc-submit .btn { min-width: 0; white-space: normal; } } /* ---- testimonial videos: fill the card edge-to-edge (no black bars) while keeping the burned-in captions visible — match the clip's own 9:16 box and anchor the crop to the bottom so subtitles are never cut (owner 2026-08-12). ---- */ .revduo-video video, .tvid-video{ object-fit: cover !important; object-position: 50% 100% !important; background: #0b1710; } .revduo-video video{ aspect-ratio: 9 / 16 !important; max-height: 560px !important; } .revduo-grid--solo .revduo-video video{ aspect-ratio: 9 / 16 !important; max-height: 560px !important; } /* main.js refines aspect-ratio/object-position per clip once metadata loads */ .tvid-video{ aspect-ratio: 9 / 16 !important; } /* ---- drone walkthrough: center the whole flow (owner 2026-08-12) ---- */ .aer-group--card .aer-group-title{ justify-content:center; text-align:center; border-left:0; padding-left:0; } .aer-flow{ grid-template-columns:1fr !important; max-width:820px; margin-left:auto; margin-right:auto; justify-items:center; } .aer-flow > *{ width:100%; } .aer-flow > .aer-fig--lead{ max-width:640px; } .aer-flow > .aer-step{ grid-column:1 / -1 !important; justify-self:center; } .aer-grid--done{ max-width:820px; margin-left:auto; margin-right:auto; } /* ---- logo is a click-to-call link (owner 2026-08-12) ---- */ a.header-logo, a.footer-logo-link{ display:inline-flex; align-items:center; cursor:pointer; text-decoration:none; } a.header-logo:focus-visible, a.footer-logo-link:focus-visible{ outline:2px solid #c2d44d; outline-offset:3px; border-radius:8px; } a.header-logo:hover img, a.footer-logo-link:hover img{ transform:scale(1.03); transition:transform .25s ease; } /* ---------- CTA weight: slightly lighter across all buttons ---------- */ .btn, .btn-primary, .btn-glass, .btn-lg, .hero-actions .btn, .sticky-bar .btn, .sticky-bar--v2 .btn, .compare-cta .btn-primary, [data-slot="lead-form"] .lead-form .btn-primary, .section-cta .btn, .btn-lock { font-weight: 500; } /* ---------- Sticky bottom bar: glowing Call Now CTA ---------- NOTE: earlier rules set box-shadow with !important on .sticky-call, and an animation can never beat an !important declaration — so the glow is animated with filter: drop-shadow() plus a pulsing ring pseudo-element instead. */ @keyframes sticky-cta-glow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(194,212,77,0.7)); transform: scale(1); } 50% { filter: drop-shadow(0 0 20px rgba(226,255,74,1)) drop-shadow(0 0 40px rgba(194,212,77,0.95)) brightness(1.06); transform: scale(1.035); } } @keyframes sticky-cta-ring { 0% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(215,242,74,0.95); } 70% { opacity: 0; transform: scale(1.1); box-shadow: 0 0 0 20px rgba(215,242,74,0); } 100% { opacity: 0; transform: scale(1.1); box-shadow: 0 0 0 20px rgba(215,242,74,0); } } body .sticky-bar--v2 a.sticky-call, body .sticky-bar a.sticky-call { position: relative; overflow: visible; animation: sticky-cta-glow 1.6s ease-in-out infinite !important; } body .sticky-bar--v2 a.sticky-call::after, body .sticky-bar a.sticky-call::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: sticky-cta-ring 1.6s ease-out infinite; } @media (prefers-reduced-motion: reduce) { body .sticky-bar--v2 a.sticky-call, body .sticky-bar a.sticky-call { animation: none !important; filter: none !important; } body .sticky-bar--v2 a.sticky-call::after, body .sticky-bar a.sticky-call::after { animation: none; display: none; } } /* ── We vs. typical contractor: 3-column comparison table ───────── */ .vstab{ max-width: 980px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(15, 40, 30, .10); box-shadow: 0 18px 46px -28px rgba(15, 40, 30, .35); } .vstab-row{ display: grid; grid-template-columns: 1.05fr 1.15fr 1.05fr; border-top: 1px solid rgba(15, 40, 30, .08); } .vstab-row:first-child{ border-top: 0; } .vstab-cell{ padding: 1.05rem 1.15rem; font-size: .98rem; line-height: 1.45; color: #2c3a34; display: flex; align-items: flex-start; gap: .5rem; } .vstab-cell--us{ background: rgba(14, 106, 73, .05); } .vstab-row--head{ border-top: 0; border-bottom: 2px solid rgba(14, 106, 73, .28); } .vstab-row--head .vstab-cell{ font-weight: 700; color: #f4fbf3; font-size: .82rem; letter-spacing: .085em; text-transform: uppercase; padding-block: .85rem; background: linear-gradient(180deg, #14442f, #0e2f22); align-items: center; } .vstab-row--head .vstab-cell--us{ background: linear-gradient(180deg, #0e6a49, #0b5238); box-shadow: inset 0 -3px 0 rgba(227,255,87,.85); color: #fff; } .vstab-row--head .vstab-cell--them{ color: rgba(244,251,243,.72); } .vstab-row--head .vstab-cell strong{ color: inherit; font-weight: 700; } .vstab-cell--topic{ font-weight: 600; color: #12211b; } .vstab-cell--them{ color: #5c6a63; } .vstab-tick{ color: #0e6a49; font-weight: 800; flex: 0 0 auto; line-height: 1.45; } @media (max-width: 640px){ .vstab{ border-radius: 14px; } .vstab-row{ grid-template-columns: 1fr 1fr 1fr; } .vstab-cell{ padding: .8rem .7rem; font-size: .86rem; } .vstab-row--head .vstab-cell{ font-size: .68rem; letter-spacing: .05em; padding: .7rem .55rem; } } /* comparison table: two-line cell content */ .vstab-cell > div{ display: flex; flex-direction: column; gap: .18rem; min-width: 0; } .vstab-cell strong{ font-weight: 600; color: #12211b; line-height: 1.25; } .vstab-cell--them strong{ color: #5c6a63; } .vstab-cell span:not(.vstab-tick){ display: block; } .vstab-cell > div > span{ font-size: .82rem; color: #6b7a72; line-height: 1.4; } .vstab-cell{ align-items: flex-start; } @media (max-width: 640px){ .vstab-cell > div > span{ font-size: .74rem; } } /* ══════════════ Global lime CTA glow (all primary calls-to-action) ══════════════ */ @keyframes cta-lime-glow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), 0 10px 26px -6px rgba(227,255,87,0.42), 0 0 16px 1px rgba(227,255,87,0.20); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), 0 16px 40px -6px rgba(227,255,87,0.70), 0 0 34px 5px rgba(227,255,87,0.40); } } .btn-primary, .dc-form button[type="submit"], .lead-form button[type="submit"], .hero-actions .btn-primary, .sticky-bar--v2 .sticky-call { animation: cta-lime-glow 2.6s ease-in-out infinite; transition: box-shadow .22s ease, transform .16s ease, filter .22s ease; } .btn-primary:hover, .dc-form button[type="submit"]:hover, .lead-form button[type="submit"]:hover, .hero-actions .btn-primary:hover, .sticky-bar--v2 .sticky-call:hover { animation: none; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 20px 48px -8px rgba(227,255,87,0.78), 0 0 44px 8px rgba(227,255,87,0.48); } .btn-primary:active, .dc-form button[type="submit"]:active, .lead-form button[type="submit"]:active, .hero-actions .btn-primary:active, .sticky-bar--v2 .sticky-call:active { animation: none; transform: translateY(0) scale(0.98); box-shadow: inset 0 2px 6px rgba(0,0,0,0.14), 0 6px 18px -4px rgba(227,255,87,0.55), 0 0 22px 3px rgba(227,255,87,0.34); } .btn-primary:focus-visible, .dc-form button[type="submit"]:focus-visible, .lead-form button[type="submit"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(227,255,87,0.55), 0 16px 40px -8px rgba(227,255,87,0.6); } /* header / hero top CTAs get a soft lime halo too */ .header-cta, .header-phone, .hero-teaser, .btn-glass.cta-glow { filter: drop-shadow(0 0 14px rgba(227,255,87,0.38)); transition: filter .22s ease, transform .16s ease; } .header-cta:hover, .header-phone:hover, .hero-teaser:hover, .btn-glass.cta-glow:hover { filter: drop-shadow(0 0 22px rgba(227,255,87,0.55)); } .header-cta:active, .header-phone:active, .hero-teaser:active { transform: scale(0.98); filter: drop-shadow(0 0 12px rgba(227,255,87,0.45)); } @media (prefers-reduced-motion: reduce) { .btn-primary, .dc-form button[type="submit"], .lead-form button[type="submit"], .sticky-bar--v2 .sticky-call { animation: none; } } /* ══════════════ Header (top sticky) CTAs: larger tap targets ══════════════ */ body .site-header .header-phone { padding: 0.72rem 1.15rem !important; border-radius: 999px !important; gap: 0.6rem !important; } body .site-header .header-phone .icon-wrap { width: 2.15rem !important; height: 2.15rem !important; } body .site-header .header-phone .phone-label { font-size: 0.82rem !important; } body .site-header .header-phone .phone-number { font-size: 1.06rem !important; font-weight: 800 !important; } body .site-header .header-cta, body .site-header .btn-yellow.header-cta { padding: 0.78rem 1.35rem !important; font-size: 1.02rem !important; border-radius: 999px !important; } body .site-header .header-cta svg { width: 20px !important; height: 20px !important; } @media (max-width: 720px) { body .site-header .header-phone { padding: 0.68rem 0.95rem !important; } body .site-header .header-phone .icon-wrap { width: 2rem !important; height: 2rem !important; } body .site-header .header-phone .phone-label { font-size: 0.76rem !important; } body .site-header .header-phone .phone-number { font-size: 1rem !important; } body .site-header .header-cta, body .site-header .btn-yellow.header-cta { padding: 0.72rem 1.1rem !important; font-size: 0.97rem !important; } }