/* ===========================================================
   ONLINE OVERHAUL.Design System v2
   Combining: Stripe (gradient + weight-300), Linear (mono labels +
   scroll narrative), Wise (concrete numbers), Tesla (radical
   minimalism), BMW (dark/light rhythm + tight line-heights),
   Ferrari (chiaroscuro + one-color-for-one-thing rigor + editorial
   labels), Basecamp (founder voice copy), Oatly (touch of personality).
   =========================================================== */

/* ------------ TOKENS ------------ */
:root {
    /* Surfaces */
    --ink:           #0A0A0A;
    --ink-2:         #141414;
    --ink-3:         #1C1C1C;
    --paper:         #FAFAFA;
    --paper-2:       #F3F3F2;
    --surface:       #FFFFFF;

    /* Text.Ferrari-style "near black" for body warmth */
    --text:          #181818;
    --text-mute:     #6B7280;
    --text-mute-2:   #9CA3AF;
    --text-on-dark:      #F5F5F5;
    --text-mute-on-dark: #A1A1AA;

    /* Accent.signature brand orange (Online Overhaul: #FF6A00) */
    --accent:        #FF6A00;
    --accent-hover:  #FF8533;
    --accent-deep:   #CC5500;
    --accent-soft:   rgba(255, 106, 0, 0.12);
    --accent-glow:   rgba(255, 106, 0, 0.45);

    /* Semantic */
    --danger:        #DC2626;
    --danger-soft:   rgba(220, 38, 38, 0.10);
    --success:       #16A34A;

    /* Borders */
    --border:        rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.14);
    --border-dark:   rgba(255, 255, 255, 0.10);
    --border-dark-2: rgba(255, 255, 255, 0.18);

    /* Radii */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-accent: 0 12px 40px var(--accent-glow), 0 0 0 1px rgba(255, 106, 0, 0.15);

    /* Type. Brand font is Manrope (per branding sheet). Inter as fallback. */
    --font-sans: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Layout. Container bumped 1200 -> 1500 on 2026-05-04 so wide screens
       breathe; narrow bumped 820 -> 920 to match the new scale. */
    --container: 1500px;
    --container-narrow: 920px;
    --pad-x: 2rem;
    --pad-x-mobile: 1.25rem;
    --side-pad: clamp(1.25rem, 5vw, 4rem); /* edge breathing room for asymmetric sections */
}

/* ------------ RESET ------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; }
ul { padding: 0; list-style: none; }

/* ------------ UTILITIES ------------ */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}
.container--narrow { max-width: var(--container-narrow); }
.mono { font-family: var(--font-mono); }

/* ------------ EYEBROW (Linear/Ferrari editorial label) ------------ */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-mute);
    margin-bottom: 1.25rem;
}
.eyebrow--on-dark { color: var(--text-mute-on-dark); }
.eyebrow__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.18);
}

/* ------------ BUTTONS ------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: -0.01em;
    transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 1.05rem 1.6rem; font-size: 1rem; border-radius: var(--r-md); }
.btn--sm { padding: 0.55rem 0.95rem; font-size: 0.85rem; }

.btn--accent {
    background: var(--accent);
    color: var(--ink);
    box-shadow: var(--shadow-accent);
}
.btn--accent:hover { background: var(--accent-hover); transform: translateY(-1px); }

.btn--ghost {
    background: transparent;
    color: var(--text-on-dark);
    border-color: var(--border-dark-2);
}
.btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.32); }
.section--light .btn--ghost { color: var(--text); border-color: var(--border-strong); }
.section--light .btn--ghost:hover { background: rgba(0,0,0,0.04); }

.btn--inline { align-self: flex-start; }

/* ------------ HERO ------------ */
.hero {
    position: relative;
    background: var(--ink);
    color: var(--text-on-dark);
    padding: 5.5rem 0 5rem;
    overflow: hidden;
    isolation: isolate;
}
.hero__glow {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 700px;
    background: radial-gradient(ellipse at center, rgba(255, 106, 0, 0.32) 0%, rgba(255, 106, 0, 0.06) 35%, transparent 65%);
    z-index: -1;
    filter: blur(20px);
    pointer-events: none;
    animation: heroPulse 8s ease-in-out infinite;
}
@keyframes heroPulse {
    0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;    transform: translateX(-50%) scale(1.06); }
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
    mask-image: radial-gradient(ellipse at 50% 30%, black 35%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 35%, transparent 75%);
    z-index: -1;
    pointer-events: none;
}
.hero__inner { text-align: center; }

/* Hero badge."Live in under 7 days" */
.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem 0.5rem 0.7rem;
    background: rgba(255, 106, 0, 0.10);
    border: 1px solid rgba(255, 106, 0, 0.32);
    border-radius: var(--r-pill);
    color: var(--accent);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hero__badge:hover { background: rgba(255, 106, 0, 0.18); transform: translateY(-1px); }
.hero__badge-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.6);
    animation: pulseDot 2s ease-out infinite;
}
@keyframes pulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 106, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0); }
}
.hero__badge-arrow { transition: transform .2s ease; }
.hero__badge:hover .hero__badge-arrow { transform: translateX(3px); }

.hero__heading {
    font-weight: 300;
    font-size: clamp(2.25rem, 5.5vw, 5rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    margin: 0 auto 1.75rem;
    max-width: 900px;
}
.hero__heading-accent {
    color: var(--accent);
    font-weight: 500;
    font-style: italic;
    font-family: var(--font-sans);
}
.hero__sub {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-mute-on-dark);
}
.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 4.5rem;
}

/* Trust strip.promises that earn trust without fake logos */
.trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border-dark);
}
.trust__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-mute-on-dark);
}
.trust__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    flex: 0 0 18px;
}

/* ------------ BEFORE/AFTER SLIDER ------------ */
.ba {
    position: relative;
    margin: 0 auto;
    max-width: 1100px;
}

/* Clear, prominent header above the slider so visitors immediately
   understand what they're looking at and what to do. */
.ba-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-dark);
}
.ba-header__eyebrow {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.75rem;
}
.ba-header__title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 600;
    color: var(--text-on-dark);
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
    line-height: 1.15;
}
.ba-header__sub {
    color: var(--text-mute-on-dark);
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}
.ba-header__arrow {
    display: inline-block;
    color: var(--accent);
    font-weight: 600;
    font-size: 1.1rem;
    animation: arrowNudge 1.6s ease-in-out infinite;
}
.ba-header__arrow:last-child { animation-delay: 0.8s; }
@keyframes arrowNudge {
    0%, 100% { transform: translateX(0); opacity: 0.55; }
    50%      { transform: translateX(3px); opacity: 1; }
}
.ba-header__sub > span:first-child { animation-direction: reverse; }

/* Prominent BEFORE / AFTER status labels with icon + name + subtext */
.ba__label {
    position: absolute;
    top: -22px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    padding: 8px 14px 8px 10px;
    border-radius: var(--r-pill);
    pointer-events: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.ba__label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex: 0 0 22px;
}
.ba__label-text { display: flex; flex-direction: column; line-height: 1.05; }
.ba__label-text strong {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.ba__label-text small {
    font-size: 0.66rem;
    font-weight: 500;
    opacity: 0.85;
    margin-top: 2px;
    letter-spacing: 0.02em;
}

.ba__label--left {
    left: 16px;
    background: rgba(220, 38, 38, 0.92);
    color: #fff;
    border: 1px solid rgba(254, 202, 202, 0.5);
}
.ba__label--left .ba__label-icon { background: rgba(255,255,255,0.95); color: #B91C1C; }

.ba__label--right {
    right: 16px;
    background: rgba(22, 163, 74, 0.92);
    color: #fff;
    border: 1px solid rgba(187, 247, 208, 0.5);
}
.ba__label--right .ba__label-icon { background: rgba(255,255,255,0.95); color: #15803D; }

.ba__frame {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--ink-2);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-dark-2);
    user-select: none;
    touch-action: none;
}
.ba__layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.ba__layer--before {
    z-index: 2;
    width: 50%;
    border-right: 2px solid var(--accent);
}
.ba__handle {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 44px;
    transform: translateX(-50%);
    z-index: 3;
    cursor: ew-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0;
}
.ba__handle-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: var(--accent);
    box-shadow: 0 0 24px rgba(255, 106, 0, 0.5);
}
.ba__handle-grip {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.18), 0 8px 24px rgba(0,0,0,0.4);
    transition: transform .15s ease, box-shadow .25s ease;
    animation: handleBreath 2.4s ease-in-out infinite;
}
@keyframes handleBreath {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.18), 0 8px 24px rgba(0,0,0,0.4); }
    50%      { box-shadow: 0 0 0 12px rgba(255, 106, 0, 0.06), 0 8px 24px rgba(0,0,0,0.4); }
}
.ba__handle:hover .ba__handle-grip {
    transform: scale(1.08);
    animation: none;
    box-shadow: 0 0 0 8px rgba(255, 106, 0, 0.22), 0 8px 32px rgba(0,0,0,0.5);
}

/* Persistent "DRAG" tag floating above the handle so it's unmistakable */
.ba__handle-tag {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: var(--accent);
    color: var(--ink);
    padding: 4px 10px;
    border-radius: var(--r-sm);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    box-shadow: 0 4px 12px rgba(255, 106, 0, 0.35);
    pointer-events: none;
    white-space: nowrap;
}
.ba__handle-tag::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px; height: 8px;
    background: var(--accent);
}

.ba__caption {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-mute-on-dark);
}
.ba__caption .mono { color: var(--accent); }

/* --- Mock browser shells --- */
.mock {
    position: absolute;
    inset: 0;
    width: 1100px;
    max-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.ba__layer--before .mock { width: 1100px; }
.mock__chrome {
    height: 32px;
    flex: 0 0 auto;
    background: #E9ECEF;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
}
.mock__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #C7CCD1;
    flex: 0 0 10px;
}
.mock__dot:nth-child(1) { background: #FF5F57; }
.mock__dot:nth-child(2) { background: #FEBC2E; }
.mock__dot:nth-child(3) { background: #28C840; }
.mock__url {
    margin-left: 14px;
    flex: 1;
    max-width: 380px;
    background: #fff;
    border-radius: 6px;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #6B7280;
    border: 1px solid rgba(0,0,0,0.06);
    white-space: nowrap;
    overflow: hidden;
}
.mock__chrome-actions { margin-left: auto; display: flex; gap: 6px; }
.mock__chrome-icon { width: 14px; height: 14px; background: #C7CCD1; border-radius: 3px; opacity: 0.6; }
.mock__body { flex: 1; padding: 0; overflow: hidden; }

/* AFTER mockup.fictional Bayshore Plumbing & Drain.
   Uses a distinct blue accent (--m-accent) instead of our orange so
   visitors clearly read it as "an example of what we'd build for a
   small business in your area" rather than a copy of our own site. */
.mock__body--after {
    --m-accent:       #2563EB;
    --m-accent-soft:  rgba(37, 99, 235, 0.14);
    --m-accent-glow:  rgba(37, 99, 235, 0.42);
    --m-accent-shadow:rgba(37, 99, 235, 0.40);
    background: #0A0A0A;
    color: #fff;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Mini nav */
.m-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(10, 10, 10, 0.85);
    flex: 0 0 auto;
}
.m-brand { display: flex; align-items: center; gap: 8px; }
.m-brand__mark { display: inline-flex; }
.m-brand__text {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.02em;
}
.m-nav__links { display: flex; gap: 20px; }
.m-nav__links span {
    color: #A1A1AA;
    font-size: 11px;
    font-weight: 500;
}
.m-nav__cta {
    background: var(--m-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 6px;
}

/* Mini hero */
.m-hero {
    flex: 1;
    text-align: center;
    padding: 28px 32px 22px;
    position: relative;
    overflow: hidden;
}
.m-hero::before {
    content: '';
    position: absolute;
    top: -80px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 320px;
    background: radial-gradient(ellipse at center, var(--m-accent-glow), transparent 65%);
    filter: blur(24px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
}
.m-hero > * { position: relative; z-index: 1; }
.m-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 9px;
    background: var(--m-accent-soft);
    border: 1px solid rgba(37, 99, 235, 0.32);
    border-radius: 999px;
    color: #93C5FD;
    font-size: 10.5px;
    font-family: var(--font-mono);
    margin-bottom: 12px;
}
.m-hero__pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--m-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}
.m-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #A1A1AA;
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
}
.m-hero__dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--m-accent);
    box-shadow: 0 0 0 2.5px rgba(37, 99, 235, 0.22);
}
.m-hero__h1 {
    color: #F5F5F5;
    font-weight: 300;
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin-bottom: 12px;
    font-family: var(--font-sans);
}
.m-hero__h1 em {
    color: #60A5FA;
    font-style: italic;
    font-weight: 500;
}
.m-hero__sub {
    color: #A1A1AA;
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 480px;
    margin: 0 auto 18px;
}
.m-hero__buttons {
    display: inline-flex;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: center;
}
.m-btn {
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 7px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.m-btn--primary {
    background: var(--m-accent);
    color: #fff;
    box-shadow: 0 6px 20px var(--m-accent-shadow);
}
.m-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.32);
}

/* Services row.quick scan of what the business offers */
.m-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 28px 14px;
    flex: 0 0 auto;
}
.m-service {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 7px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.m-service__icon {
    font-size: 14px;
    line-height: 1;
}
.m-service__name {
    color: #E5E7EB;
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mini stats strip */
.m-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex: 0 0 auto;
}
.m-stat {
    background: #0A0A0A;
    padding: 16px 14px;
    text-align: left;
}
.m-stat__num {
    display: block;
    font-size: 26px;
    font-weight: 300;
    color: #F5F5F5;
    letter-spacing: -0.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.m-stat__num small {
    font-size: 13px;
    color: #60A5FA;
    font-weight: 500;
    margin-left: 1px;
}
.m-stat__lab {
    display: block;
    font-size: 9px;
    color: #A1A1AA;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-family: var(--font-mono);
}

/* Mini footer hint */
.m-footer {
    padding: 11px 28px;
    text-align: center;
    color: #6B7280;
    font-size: 9.5px;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    flex: 0 0 auto;
    border-top: 1px solid rgba(255,255,255,0.04);
}

/* BEFORE mockup.garish 2005 disaster */
.mock__body--before {
    background: #FFFFCC;
    color: #003366;
    padding: 0;
    font-family: 'Times New Roman', Times, serif;
    overflow: hidden;
}
.mock__before-banner {
    background: linear-gradient(180deg, #ff0000, #cc0000);
    color: yellow;
    text-align: center;
    padding: 6px;
    font-family: 'Comic Sans MS', 'Brush Script MT', cursive;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    border-bottom: 3px ridge #ffcc00;
    text-shadow: 1px 1px 0 #000;
}
.mock__before-nav {
    background: #003366;
    color: #00ffff;
    padding: 6px 12px;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    text-decoration: underline;
    border-bottom: 2px solid #fff;
}
.mock__before-hero {
    padding: 18px 24px;
    text-align: center;
    background:
        repeating-linear-gradient(45deg, transparent 0 10px, rgba(255,200,0,0.06) 10px 11px),
        #FFFFCC;
}
.mock__before-h1 {
    font-family: 'Comic Sans MS', cursive;
    font-size: 32px;
    color: #ff0000;
    text-shadow: 2px 2px 0 yellow, 4px 4px 0 #000;
    font-weight: bold;
    margin-bottom: 8px;
}
.mock__before-blink {
    color: #006600;
    font-family: Verdana, sans-serif;
    font-size: 14px;
    margin-bottom: 14px;
    animation: badBlink 1.2s steps(2, start) infinite;
}
@keyframes badBlink { to { visibility: hidden; } }
.mock__before-clipart {
    display: inline-flex;
    gap: 12px;
    font-size: 26px;
    margin-bottom: 14px;
    filter: saturate(1.3);
}
.mock__before-text {
    width: 80%;
    height: 8px;
    margin: 6px auto;
    background: #336699;
    opacity: 0.6;
}
.mock__before-text--short { width: 50%; background: #993366; }
.mock__before-counter {
    margin-top: 14px;
    display: inline-block;
    text-align: center;
    font-family: 'Courier New', monospace;
    color: #00ff00;
    font-size: 12px;
    background: #000;
    padding: 2px 8px;
    border: 1px solid #00ff00;
}

/* ------------ STATS BAR (Wise-style numbers) ------------ */
.stats {
    background: var(--ink);
    color: var(--text-on-dark);
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}
.stats__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border-dark);
    padding: 0;
    border-left: 1px solid var(--border-dark);
    border-right: 1px solid var(--border-dark);
    margin-block: 0;
}
.stat {
    background: var(--ink);
    padding: 2.5rem 1.75rem;
    text-align: left;
}
.stat__number {
    font-size: clamp(2.2rem, 4vw, 3.25rem);
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--text-on-dark);
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    font-variant-numeric: tabular-nums;
}
.stat__unit {
    color: var(--accent);
    font-size: 0.5em;
    font-weight: 500;
    margin-left: 4px;
}
.stat__label {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-mute-on-dark);
    line-height: 1.4;
    max-width: 18ch;
}

/* ------------ SCROLL-PINNED REVEAL ------------ */
/* The outer .reveal is tall (200vh) so there's scroll room.
   The inner .reveal__sticky pins to the viewport while you scroll past it.
   Word opacity is animated by JS based on scroll progress. */
.reveal {
    position: relative;
    height: 200vh;
    background: var(--ink);
    color: var(--text-on-dark);
}
.reveal__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.reveal__sticky::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 70%);
    pointer-events: none;
}
.reveal__sticky::after {
    /* Subtle accent glow that pulses behind the statement */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse at center, rgba(255, 106, 0, 0.18), transparent 70%);
    filter: blur(40px);
    z-index: 0;
    pointer-events: none;
}
.reveal__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}
.reveal__inner .eyebrow { margin-bottom: 2rem; }
.reveal__statement {
    font-weight: 300;
    font-size: clamp(1.85rem, 5vw, 4.25rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    max-width: 1100px;
    margin: 0 auto;
}
.reveal__word {
    display: inline-block;
    /* Start barely visible. Words light up to full opacity as the user scrolls
       through the pinned section, so the initial state needs to be a clear
       "ghost" to make the contrast with full-opacity feel like a reveal. */
    opacity: 0.07;
    transition: opacity .45s ease, color .45s ease;
    margin: 0 0.18em 0.1em 0;
    color: var(--text-on-dark);
}
.reveal__word.is-active { opacity: 1; }
.reveal__word--accent.is-active { color: var(--accent); }
.reveal__break {
    display: block;
    height: 1.2rem;
}
.reveal__cite {
    margin-top: 3rem;
    font-size: 0.78rem;
    color: var(--text-mute-on-dark);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.5;
    animation: revealHint 2.5s ease-in-out infinite;
}
@keyframes revealHint {
    0%, 100% { transform: translateY(0); opacity: 0.35; }
    50%      { transform: translateY(4px); opacity: 0.7; }
}
@media (max-width: 640px) {
    .reveal { height: 180vh; }
    .reveal__statement { font-size: 1.65rem; line-height: 1.25; }
    .reveal__break { height: 0.6rem; }
}

/* Featured service card.Vercel-style animated gradient border on hover */
.service-card--featured::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(130deg,
        rgba(255, 106, 0, 0) 0%,
        rgba(255, 106, 0, 0.6) 35%,
        rgba(255, 133, 89, 0.9) 50%,
        rgba(255, 106, 0, 0.6) 65%,
        rgba(255, 106, 0, 0) 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease, background-position 1s ease;
    pointer-events: none;
}
.service-card--featured:hover::after {
    opacity: 1;
    background-position: 0 0;
}

/* ------------ SECTIONS ------------ */
.section {
    padding: 7.5rem 0;
    position: relative;
}
.section--tight { padding: 5rem 0 7.5rem; }
.section--light { background: var(--paper); color: var(--text); }
.section--dark { background: var(--ink); color: var(--text-on-dark); }
.section__head { max-width: 720px; margin: 0 0 4rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--on-dark { color: var(--text-on-dark); }
.section__heading {
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: inherit;
}
.section__lead {
    margin-top: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--text-mute);
    max-width: 60ch;
}
.section__head--on-dark .section__lead { color: var(--text-mute-on-dark); }

/* ------------ PROBLEM CARDS ------------ */
.problem__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.problem-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 2rem;
    transition: border-color .25s ease, box-shadow .25s ease;
}
/* Hover changes border + shadow only. Transform is owned by the tilt JS so the
   two do not fight. If JS never runs (cached, blocked, error), the card still
   gets a visible color-and-shadow lift on hover. */
.problem-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.problem-card__num {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent);
    margin-bottom: 1.25rem;
    letter-spacing: 0.1em;
}
.problem-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 0.75rem;
    color: var(--text);
}
.problem-card p { color: var(--text-mute); font-size: 0.98rem; line-height: 1.55; }

/* ------------ SERVICES ------------ */
.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
.service-card {
    position: relative;
    background: var(--ink-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--r-lg);
    padding: 2.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    transition: border-color .25s ease, transform .25s ease;
}
.service-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.service-card--featured {
    background: linear-gradient(180deg, rgba(255, 106, 0, 0.08) 0%, var(--ink-2) 50%);
    border-color: rgba(255, 106, 0, 0.28);
    transform: translateY(-8px);
}
.service-card--featured:hover { transform: translateY(-12px); }
.service-card__tag {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.service-card__title {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    color: var(--text-on-dark);
}

/* Pricing display with strikethrough */
.service-card__price {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-dark);
}
.service-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}
.service-card__price-now {
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--accent);
    line-height: 1;
}
.service-card__price-now small {
    font-size: 0.5em;
    font-weight: 500;
    color: var(--text-mute-on-dark);
    margin-left: 2px;
}
.service-card__price-was {
    font-size: 0.85rem;
    color: var(--text-mute-on-dark);
    text-decoration: line-through;
    text-decoration-color: rgba(220, 38, 38, 0.7);
    text-decoration-thickness: 1.5px;
}
.service-card__price-tag {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.service-card__desc {
    color: var(--text-mute-on-dark);
    font-size: 0.98rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
}
.service-card__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
}
.service-card__list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.92rem;
    color: var(--text-on-dark);
    line-height: 1.5;
}
.service-card__list li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.5em;
    width: 14px; height: 8px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}
.service-card__list li strong { color: var(--accent); font-weight: 600; }
.service-card__best {
    font-size: 0.85rem;
    color: var(--text-mute-on-dark);
    padding-top: 1rem;
    border-top: 1px solid var(--border-dark);
}
.service-card__best .mono { color: var(--accent); }

/* ------------ COMPARE TABLE ------------ */
.compare {
    margin-top: 4.5rem;
    background: linear-gradient(180deg, var(--ink-2), var(--ink-3));
    border: 1px solid var(--border-dark);
    border-radius: var(--r-xl);
    padding: 2.5rem;
}
.compare__head { margin-bottom: 1.5rem; }
.compare__heading {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-on-dark);
    letter-spacing: -0.02em;
}
.compare__rows {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--border-dark);
}
.compare__row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr;
    gap: 1.5rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border-dark);
    align-items: center;
    font-size: 0.95rem;
    color: var(--text-mute-on-dark);
}
.compare__row--us {
    color: var(--text-on-dark);
    font-weight: 600;
    background: rgba(255, 106, 0, 0.05);
    margin: 0 -1rem;
    padding-inline: 1rem;
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 106, 0, 0.18);
}
.compare__price {
    font-family: var(--font-mono);
    color: var(--text-on-dark);
}
.compare__row--us .compare__price { color: var(--accent); font-size: 1.1rem; }
.compare__time {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-align: right;
}
.compare__row--us .compare__time { color: var(--accent); }

/* ------------ PROCESS ------------ */
.process {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--border);
}
.process__step {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 2.5rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border);
    align-items: start;
    transition: background .25s ease;
}
.process__step:hover { background: rgba(255, 106, 0, 0.03); }
.process__num {
    font-size: 2rem;
    color: var(--accent);
    font-weight: 500;
}
.process__title {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.process__badge {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 0.7rem;
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.process__badge--alt {
    background: var(--accent);
    color: var(--ink);
}
.process__body p {
    color: var(--text-mute);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 60ch;
}
.process__time {
    margin-top: 0.75rem !important;
    color: var(--text-mute-2) !important;
    font-size: 0.85rem !important;
}

/* ------------ OFFER ------------ */
.offer {
    background: var(--ink);
    color: var(--text-on-dark);
    border-radius: var(--r-xl);
    padding: 3.5rem 2.5rem;
    margin-bottom: 3.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-dark);
}
.offer::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(255, 106, 0, 0.35), transparent 70%);
    z-index: 0;
}
.offer__inner { position: relative; z-index: 1; max-width: 720px; }
.offer__eyebrow {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
}
.offer__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 1rem;
}
.offer__highlight { color: var(--accent); font-weight: 600; }
.offer__sub {
    color: var(--text-mute-on-dark);
    margin-bottom: 1.75rem;
    font-size: 1rem;
}

/* ------------ WORK GRID ------------ */
.work__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.work-card {
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    transition: border-color .25s ease, transform .25s ease;
}
.work-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.work-card--taken { border-style: solid; opacity: 0.7; }
.work-card__frame {
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(135deg, rgba(255, 106, 0, 0.04), rgba(255, 106, 0, 0.0)),
        repeating-linear-gradient(-45deg, transparent 0 12px, rgba(0,0,0,0.025) 12px 13px);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.work-card__plus {
    font-size: 3rem;
    font-weight: 200;
    color: var(--accent);
    opacity: 0.7;
}
.work-card__title { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; }
.work-card__meta { color: var(--text-mute-2); font-size: 0.8rem; }

/* ------------ AREAS WE SERVE ------------ */
.areas { position: relative; overflow: hidden; }
.areas::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}
.areas > .container { position: relative; z-index: 1; }

.areas__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.area-card {
    background: var(--ink-2);
    border: 1px solid var(--border-dark);
    border-radius: var(--r-lg);
    padding: 2rem 1.75rem;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.area-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(255, 106, 0, 0.12);
}
.area-card--featured {
    background: linear-gradient(180deg, rgba(255, 106, 0, 0.08) 0%, var(--ink-2) 60%);
    border-color: rgba(255, 106, 0, 0.28);
}
.area-card__pin {
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255, 106, 0, 0.25);
}
.area-card__zip {
    font-size: 0.72rem;
    color: var(--text-mute-on-dark);
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}
.area-card__city {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-on-dark);
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}
.area-card__desc {
    font-size: 0.92rem;
    color: var(--text-mute-on-dark);
    line-height: 1.55;
    margin-bottom: 1.5rem;
}
.area-card__status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--success);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-top: 1rem;
    border-top: 1px solid var(--border-dark);
}
.status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
    animation: statusBlink 2.5s ease-in-out infinite;
}
@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
.areas__note {
    text-align: center;
    color: var(--text-mute-on-dark);
    font-size: 0.92rem;
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
    border-top: 1px solid var(--border-dark);
}
.areas__note .mono { color: var(--accent); margin-right: 0.5rem; }

/* ------------ ABOUT ------------ */
.about {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 4rem;
    align-items: start;
}
.about__photo {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--r-xl);
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 106, 0, 0.18), transparent 50%),
        linear-gradient(135deg, var(--ink-2) 0%, var(--ink) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.5rem;
    color: var(--accent);
    border: 1px solid var(--border-dark);
    text-align: center;
}
.about__photo-img { width: 60%; height: auto; max-width: 160px; }
.about__photo-cap {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-mute-on-dark);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.about__sig {
    margin-top: 1rem;
    text-align: right;
    color: var(--text-mute);
    font-size: 0.85rem;
}
.about__copy { padding-top: 0.5rem; }
.about__body {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text-mute);
    margin-top: 1rem;
}
.about__body--strong {
    color: var(--text);
    font-weight: 500;
    margin-top: 1.5rem;
}
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    color: var(--accent);
    font-weight: 600;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 4px;
}
.link-arrow:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

/* ------------ FAQ ------------ */
.faq { display: grid; gap: 0.5rem; margin-top: 2rem; }
.faq__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color .25s ease;
}
.faq__item[open] { border-color: var(--accent); }
.faq__q {
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.01em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon {
    flex: 0 0 28px;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-weight: 400;
    font-size: 1.1rem;
    transition: transform .25s ease;
}
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a {
    padding: 0 1.5rem 1.5rem;
    color: var(--text-mute);
    font-size: 0.98rem;
    line-height: 1.6;
}
.faq__a strong { color: var(--text); font-weight: 600; }

/* ------------ CTA ------------ */
.section--cta {
    background: var(--ink);
    color: var(--text-on-dark);
    padding: 7.5rem 0 5rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.cta__glow {
    position: absolute;
    bottom: -300px;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    height: 700px;
    background: radial-gradient(ellipse at center, rgba(255, 106, 0, 0.28), transparent 60%);
    filter: blur(40px);
    z-index: -1;
}
.cta__head { text-align: center; margin-bottom: 3.5rem; }
.cta__head .section__heading {
    font-weight: 300;
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    letter-spacing: -0.035em;
}
.cta__lead {
    margin: 1.5rem auto 0;
    max-width: 580px;
    color: var(--text-mute-on-dark);
    font-size: 1.0625rem;
    line-height: 1.55;
}

/* ------------ FORM ------------ */
.form {
    background: var(--ink-2);
    border: 1px solid var(--border-dark-2);
    border-radius: var(--r-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-xl);
}
.form__notice {
    background: var(--accent-soft);
    border: 1px solid rgba(255, 106, 0, 0.25);
    border-radius: var(--r-md);
    padding: 1rem 1.25rem;
    color: var(--text-on-dark);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 2rem;
}
.form__notice .mono { color: var(--accent); margin-right: 0.4rem; }

.form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.form__field {
    display: block;
    margin-bottom: 1.25rem;
    position: relative;
}
.form__row .form__field { margin-bottom: 0; }
.form__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-mute-on-dark);
    margin-bottom: 0.5rem;
}
.form__req { color: var(--accent); margin-left: 2px; }
.form__opt { color: var(--text-mute-2); text-transform: none; letter-spacing: 0.04em; }

.form input, .form textarea {
    width: 100%;
    background: var(--ink);
    border: 1px solid var(--border-dark-2);
    border-radius: var(--r-md);
    padding: 0.85rem 1rem;
    font: inherit;
    font-size: 0.98rem;
    color: var(--text-on-dark);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    font-family: var(--font-sans);
}
.form input::placeholder, .form textarea::placeholder { color: #4b5563; }
.form input:focus, .form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.18);
    background: var(--ink-3);
}
.form textarea { resize: vertical; min-height: 120px; }

.form__hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-mute-on-dark);
    line-height: 1.4;
}
.form__hint code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: var(--ink);
    padding: 1px 5px;
    border-radius: var(--r-xs);
    color: var(--accent);
}

/* Inline error state */
.form__error {
    display: none;
    margin-top: 0.5rem;
    color: var(--danger);
    font-size: 0.82rem;
    line-height: 1.4;
}
.form__field.is-invalid .form__error { display: block; }
.form__field.is-invalid input,
.form__field.is-invalid textarea {
    border-color: var(--danger);
    background: var(--danger-soft);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.form__field.is-invalid .form__hint { display: none; }

.form__submit {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.form__fineprint {
    color: var(--text-mute-on-dark);
    font-size: 0.85rem;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.form__fineprint a { color: var(--accent); border-bottom: 1px dotted var(--accent); }
.form__success {
    margin-top: 1.5rem;
    background: var(--accent-soft);
    border: 1px solid rgba(255, 106, 0, 0.3);
    color: var(--text-on-dark);
    padding: 1rem 1.25rem;
    border-radius: var(--r-md);
    text-align: center;
}
.form__success strong { color: var(--accent); }

/* ------------ FOOTER ------------ */
.footer {
    background: var(--ink);
    color: var(--text-mute-on-dark);
    padding: 4.5rem 0 2rem;
    border-top: 1px solid var(--border-dark);
}
.footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1.4fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--border-dark);
}
.footer__tag {
    font-size: 0.92rem;
    color: var(--text-mute-on-dark);
    max-width: 32ch;
    margin-bottom: 1rem;
}
.footer__local {
    font-size: 0.78rem;
    color: var(--accent);
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    font-size: 0.92rem;
    min-width: 0;
}
.footer__col a:not(.btn) {
    color: var(--text-mute-on-dark);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.footer__col a:not(.btn):hover { color: var(--text-on-dark); }
.footer__contact { font-size: 0.9rem; }
.footer__heading {
    font-size: 0.7rem;
    color: var(--accent);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.footer__plain {
    color: #6B7280;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}
.footer__plain--small { font-size: 0.78rem; margin-top: 0.25rem; }
.footer__base {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    font-size: 0.82rem;
    color: #6B7280;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.footer__sig { color: var(--accent); opacity: 0.6; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
    .footer__inner { grid-template-columns: 2fr 1fr 1.4fr; }
    .footer__inner .footer__col:last-child { grid-column: 1 / -1; align-items: flex-start; padding-top: 1.5rem; border-top: 1px solid var(--border-dark); }
    .compare__row { grid-template-columns: 2fr 1fr 1fr; gap: 1rem; }
}

@media (max-width: 980px) {
    :root { --pad-x: 1.5rem; }

    .stats__inner { grid-template-columns: repeat(2, 1fr); }
    .problem__grid, .services__grid, .work__grid, .areas__grid { grid-template-columns: 1fr; }
    .service-card--featured { transform: none; }
    .service-card--featured:hover { transform: translateY(-4px); }

    .compare { padding: 1.75rem; }
    .compare__row { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .compare__time { grid-column: 2 / 3; text-align: right; }
    .compare__price { grid-row: 2; grid-column: 1 / 2; }

    .process__step { grid-template-columns: 60px 1fr; gap: 1.25rem; padding: 2rem 0; }
    .process__num { font-size: 1.5rem; }
    .process__title { font-size: 1.3rem; }

    .about { grid-template-columns: 1fr; gap: 2rem; }
    .about__photo { max-width: 200px; }

    .footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer__inner .footer__col:last-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    :root { --pad-x: 1.25rem; }
    .hero { padding: 4rem 0 3.5rem; }
    .hero__sub { font-size: 1.0625rem; margin-bottom: 2rem; }
    .hero__ctas { flex-direction: column; align-items: stretch; margin-bottom: 3rem; }
    .hero__ctas .btn { justify-content: center; }
    .section { padding: 5rem 0; }
    .section__head { margin-bottom: 2.5rem; }

    .trust { gap: 0.5rem 1rem; padding-top: 2rem; margin-top: 2rem; }
    .trust__item { font-size: 0.8rem; }

    .stats__inner { grid-template-columns: 1fr 1fr; }
    .stat { padding: 1.75rem 1.25rem; }

    .form { padding: 1.5rem; }
    .form__row { grid-template-columns: 1fr; }

    .footer__inner { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; }
    .footer__base { flex-direction: column; gap: 0.5rem; text-align: center; }

    .ba__frame { aspect-ratio: 4 / 3; }

    /* Slider header.scale down */
    .ba-header { margin-bottom: 2.5rem; padding-top: 1.5rem; }
    .ba-header__title { font-size: 1.25rem; }
    .ba-header__sub { font-size: 0.82rem; gap: 0.4rem; }

    /* Slider labels.make sure they fit */
    .ba__label { padding: 6px 10px 6px 8px; top: -18px; }
    .ba__label-icon { width: 18px; height: 18px; font-size: 0.65rem; }
    .ba__label-text strong { font-size: 0.7rem; }
    .ba__label-text small { font-size: 0.58rem; }

    .ba__handle-grip { width: 40px; height: 40px; }
    .ba__handle-tag { top: -28px; font-size: 0.62rem; padding: 3px 8px; }

    /* AFTER mini-site.scale everything down for tiny slider */
    .m-nav { padding: 9px 14px; }
    .m-brand__text { font-size: 10.5px; }
    .m-nav__links { display: none; }
    .m-nav__cta { font-size: 9px; padding: 5px 9px; }

    .m-hero { padding: 14px 12px 12px; }
    .m-hero__badge { font-size: 7.5px; padding: 3px 7px 3px 5px; margin-bottom: 6px; }
    .m-hero__pulse { width: 4px; height: 4px; }
    .m-hero__eyebrow { font-size: 6px; margin-bottom: 6px; letter-spacing: 0.08em; }
    .m-hero__dot { width: 4px; height: 4px; }
    .m-hero__h1 { font-size: 15px; line-height: 1.1; margin-bottom: 6px; }
    .m-hero__sub { font-size: 8px; line-height: 1.4; margin-bottom: 8px; }
    .m-btn { font-size: 7.5px; padding: 5px 8px; border-radius: 5px; }

    .m-services { padding: 0 12px 8px; gap: 5px; }
    .m-service { padding: 5px 6px; gap: 4px; border-radius: 5px; }
    .m-service__icon { font-size: 9px; }
    .m-service__name { font-size: 7px; }

    .m-stat { padding: 7px 6px; }
    .m-stat__num { font-size: 13px; }
    .m-stat__num small { font-size: 7px; }
    .m-stat__lab { font-size: 6px; margin-top: 3px; letter-spacing: 0.05em; }

    .m-footer { font-size: 6.5px; padding: 6px 10px; }

    /* BEFORE mockup.scale down too */
    .mock__before-h1 { font-size: 22px; }
    .mock__before-banner { font-size: 13px; }

    .compare__rows { display: block; }
    .compare__row { display: grid; grid-template-columns: 1fr; gap: 0.25rem; padding: 1rem 0; }
    .compare__row--us { padding: 1rem; }
    .compare__time { text-align: left; }

    .offer { padding: 2rem 1.5rem; }

    .area-card { padding: 1.5rem 1.25rem; }
    .area-card__city { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   ADDITIONS v3 (2026-05-02). Mobile-first.
   New offer + 2 new skills (lead-leak-calculator, instant-preview-builder)
   + industries grid + one-time pricing tiers + footer + form.
   Defaults are the mobile layout. min-width queries scale up.
   ============================================================ */

/* Section heading dark variants used on dark sections. */
.section__head--dark { color: var(--text-on-dark); }
.section__heading--dark { color: var(--text-on-dark); }
.section__lead--dark { color: var(--text-mute-on-dark); }

/* Stat source line under each stat label. */
.stat__src { display: block; margin-top: 0.4rem; opacity: 0.6; font-size: 0.78rem; font-family: var(--font-mono); letter-spacing: 0.04em; }

/* Stats responsive: stack on mobile, 2x2 on tablet, 4-up on desktop. */
.stats__inner { grid-template-columns: 1fr; }
@media (min-width: 600px) { .stats__inner { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .stats__inner { grid-template-columns: repeat(4, 1fr); } }

/* Problem grid. Mobile-first 1-col, then 2, then 3. */
.problem-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) { .problem-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
@media (min-width: 980px) { .problem-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.problem-card__body { color: var(--text-mute); font-size: 0.98rem; line-height: 1.55; margin-top: 0.5rem; }
.problem-card--soft { background: var(--accent-soft); border-color: rgba(255, 106, 0, 0.25); }

/* ============================================================
   LEAD-LEAK CALCULATOR (skill 1)
   ============================================================ */
.section--leak { padding: 6rem 0; }
.leak {
    max-width: 980px;
    margin: 0 auto;
    background: var(--ink-2);
    border: 1px solid var(--border-dark-2);
    border-radius: var(--r-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-xl);
}
@media (min-width: 700px) { .leak { padding: 2.5rem; } }

.leak__inputs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}
@media (min-width: 700px) { .leak__inputs { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.leak__field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border-dark);
    border-radius: var(--r-md);
    padding: 1rem;
}
.leak__label {
    font-size: 0.78rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-mute-on-dark);
}
.leak__slider {
    width: 100%;
    appearance: none;
    background: transparent;
    cursor: pointer;
    height: 24px;
}
.leak__slider::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(90deg, var(--accent), rgba(255,106,0,0.3));
    border-radius: 4px;
}
.leak__slider::-moz-range-track {
    height: 4px;
    background: linear-gradient(90deg, var(--accent), rgba(255,106,0,0.3));
    border-radius: 4px;
}
.leak__slider::-webkit-slider-thumb {
    appearance: none;
    width: 22px; height: 22px;
    background: var(--accent);
    border-radius: 50%;
    margin-top: -9px;
    box-shadow: 0 2px 12px rgba(255,106,0,0.5), 0 0 0 4px rgba(255,106,0,0.18);
    cursor: pointer;
    transition: transform .15s ease;
}
.leak__slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.leak__slider::-moz-range-thumb {
    width: 22px; height: 22px;
    background: var(--accent);
    border-radius: 50%;
    border: 0;
    box-shadow: 0 2px 12px rgba(255,106,0,0.5), 0 0 0 4px rgba(255,106,0,0.18);
}
.leak__value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-on-dark);
    font-variant-numeric: tabular-nums;
}

.leak__results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (min-width: 700px) { .leak__results { grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: stretch; } }

.leak__col {
    background: var(--ink);
    border: 1px solid var(--border-dark-2);
    border-radius: var(--r-md);
    padding: 1.5rem;
    text-align: center;
}
.leak__col--bad { border-color: rgba(220,38,38,0.4); }
.leak__col--good { border-color: rgba(255,106,0,0.5); background: linear-gradient(180deg, rgba(255,106,0,0.06), var(--ink)); }
.leak__col-label {
    font-size: 0.74rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-mute-on-dark);
    margin-bottom: 0.75rem;
}
.leak__col-num {
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    font-weight: 600;
    color: var(--text-on-dark);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.leak__col--good .leak__col-num { color: var(--accent); }
.leak__col-money {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--text-mute-on-dark);
    font-variant-numeric: tabular-nums;
}

.leak__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transform: rotate(90deg);
}
@media (min-width: 700px) { .leak__divider { transform: none; } }

.leak__bottom {
    text-align: center;
    padding: 2rem 1rem;
    background: linear-gradient(180deg, rgba(255,106,0,0.10), rgba(255,106,0,0.02));
    border: 1px solid rgba(255,106,0,0.4);
    border-radius: var(--r-lg);
    margin-bottom: 1rem;
}
.leak__bottom-label {
    font-size: 0.85rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-mute-on-dark);
    margin-bottom: 0.5rem;
}
.leak__bottom-num {
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 300;
    color: var(--accent);
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.75rem;
}
.leak__bottom-sub {
    color: var(--text-mute-on-dark);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}
.leak__bottom-sub strong { color: var(--text-on-dark); font-weight: 600; }
.leak__disclaimer {
    font-size: 0.78rem;
    color: var(--text-mute-on-dark);
    line-height: 1.55;
    opacity: 0.65;
    text-align: center;
    margin-top: 1rem;
}

/* ============================================================
   BEFORE/AFTER MOCK CONTENT
   ============================================================ */
.ba-mock {
    width: 100%;
    height: 100%;
    background: var(--paper);
    color: var(--text);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ba-mock--before { background: #fff; }
.ba-mock--after  { background: linear-gradient(180deg, #0A0A0A 0%, #141414 100%); color: var(--text-on-dark); }

.ba-mock__bar {
    display: flex;
    gap: 5px;
    padding: 8px 10px;
    background: var(--ink-3);
    flex: 0 0 auto;
}
.ba-mock__bar span {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
}
.ba-mock__bar span:first-child { background: #FF5F57; }
.ba-mock__bar span:nth-child(2) { background: #FEBC2E; }
.ba-mock__bar span:nth-child(3) { background: #28C840; }

/* AFTER mock body */
.ba-mock--after .ba-mock__hero {
    padding: 2rem 1.5rem;
    text-align: center;
    background: radial-gradient(ellipse at top, rgba(255,106,0,0.18), transparent 60%);
}
.ba-mock__nav {
    display: inline-block;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: -0.01em;
    color: var(--text-on-dark);
    margin-bottom: 1.25rem;
    padding: 0.4rem 0.9rem;
    background: rgba(255,255,255,0.06);
    border-radius: var(--r-pill);
}
.ba-mock__h {
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 400;
    color: var(--text-on-dark);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 0.5rem;
}
.ba-mock__p { color: var(--text-mute-on-dark); margin-bottom: 1rem; font-size: 0.92rem; }
.ba-mock__ctas { display: inline-flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.ba-mock__btn {
    padding: 0.55rem 1rem;
    border-radius: var(--r-md);
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-block;
}
.ba-mock__btn--accent { background: var(--accent); color: var(--ink); }
.ba-mock__btn--ghost  { background: transparent; color: var(--text-on-dark); border: 1px solid var(--border-dark-2); }

.ba-mock--after .ba-mock__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0.75rem 1.5rem 1.5rem;
}
.ba-mock__card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-dark);
    border-radius: var(--r-sm);
    padding: 0.85rem 0.5rem;
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-mute-on-dark);
}

/* BEFORE mock body */
.ba-mock--before .ba-mock__bad-hero {
    padding: 1.5rem;
    background: #E8E8E8;
}
.ba-mock__bad-logo {
    font-family: 'Times New Roman', Times, serif;
    color: #003366;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-decoration: underline;
}
.ba-mock__bad-line {
    color: #555;
    font-size: 0.85rem;
    margin-bottom: 0.85rem;
    font-family: 'Comic Sans MS', cursive, sans-serif;
}
.ba-mock__bad-call {
    font-size: 0.85rem;
    color: #003366;
    font-weight: 700;
    margin-bottom: 1.25rem;
}
.ba-mock__bad-img {
    background: #FFCC99;
    border: 2px solid #999;
    padding: 2.5rem 1rem;
    text-align: center;
    color: #999;
    font-style: italic;
    font-size: 0.85rem;
}

/* ============================================================
   OFFER LIST + ONE-TIME PRICING
   ============================================================ */
.offer__list {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 2rem;
    padding: 0;
}
.offer__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--text-mute-on-dark);
    font-size: 0.98rem;
    line-height: 1.5;
}
.offer__list li strong { color: var(--text-on-dark); font-weight: 600; }
.offer__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    flex: 0 0 22px;
    font-weight: 700;
    margin-top: 2px;
}

.onetime { margin-top: 3rem; }
.onetime__head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
.onetime__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin-bottom: 0.75rem;
}
.onetime__title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}
.onetime__sub { color: var(--text-mute); font-size: 1rem; line-height: 1.55; }

.onetime__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 600px) { .onetime__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .onetime__grid { grid-template-columns: repeat(4, 1fr); } }

.tier {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    padding: 1.75rem 1.5rem;
    position: relative;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.tier:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tier--featured {
    background: linear-gradient(180deg, rgba(255,106,0,0.04), var(--surface));
    border-color: var(--accent);
    box-shadow: 0 12px 32px rgba(255,106,0,0.15);
}
.tier__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--ink);
    padding: 0.25rem 0.75rem;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.tier__pages {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-mute);
    margin-bottom: 0.85rem;
}
.tier__price {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text);
    margin-bottom: 1rem;
    font-variant-numeric: tabular-nums;
}
.tier__desc { color: var(--text-mute); font-size: 0.92rem; line-height: 1.5; }
.onetime__note { text-align: center; color: var(--text-mute); font-size: 0.88rem; margin-top: 2rem; max-width: 720px; margin-inline: auto; }

/* ============================================================
   INDUSTRIES GRID
   ============================================================ */
.industries-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 600px) { .industries-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .industries-grid { grid-template-columns: repeat(4, 1fr); } }

.ind-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    color: var(--text);
}
.ind-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ind-card--other { background: linear-gradient(180deg, rgba(255,106,0,0.06), var(--surface)); border-style: dashed; }

.ind-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--r-md);
    margin-bottom: 1rem;
}
.ind-card__icon--accent { background: var(--accent); color: var(--ink); font-weight: 600; font-size: 1.5rem; }

.ind-card__title { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.ind-card__body { color: var(--text-mute); font-size: 0.92rem; line-height: 1.55; flex: 1; margin-bottom: 1rem; }
.ind-card__cta { color: var(--accent); font-weight: 600; font-size: 0.92rem; margin-top: auto; }
.ind-card:hover .ind-card__cta { color: var(--accent-deep); }

/* ============================================================
   INSTANT PREVIEW BUILDER (skill 2)
   ============================================================ */
.section--preview { padding: 6rem 0; }
.preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
@media (min-width: 900px) { .preview { grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; } }

.preview__inputs {
    display: grid;
    gap: 1rem;
    background: var(--ink-2);
    border: 1px solid var(--border-dark-2);
    border-radius: var(--r-lg);
    padding: 1.5rem;
}
.preview__field { display: flex; flex-direction: column; gap: 0.4rem; }
.preview__label {
    font-size: 0.74rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-mute-on-dark);
}
.preview__input {
    background: var(--ink);
    color: var(--text-on-dark);
    border: 1px solid var(--border-dark-2);
    border-radius: var(--r-sm);
    padding: 0.65rem 0.85rem;
    font: inherit;
    font-size: 0.95rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.preview__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.preview__field--color { flex-direction: row; align-items: center; gap: 0.75rem; }
.preview__field--color .preview__label { flex: 1; }
.preview__color {
    width: 48px; height: 36px;
    border: 1px solid var(--border-dark-2);
    border-radius: var(--r-sm);
    padding: 2px;
    cursor: pointer;
    background: var(--ink);
}
.preview__color-hex { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-mute-on-dark); }

.preview__frame {
    --preview-accent: #1E73BE;
    background: var(--surface);
    border: 1px solid var(--border-dark-2);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    color: var(--text);
}
.preview__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #2a2a2a;
    padding: 8px 12px;
}
.preview__bar > span:not(.preview__url) {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
}
.preview__bar > span:nth-child(1) { background: #FF5F57; }
.preview__bar > span:nth-child(2) { background: #FEBC2E; }
.preview__bar > span:nth-child(3) { background: #28C840; }
.preview__url {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    margin-left: 0.75rem;
    font-family: var(--font-mono);
    flex: 1;
    text-align: center;
}

.preview__site { padding: 0; }
.preview__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.preview__nav-logo { font-weight: 700; color: var(--preview-accent); letter-spacing: -0.02em; transition: color .3s ease; }
.preview__nav-cta {
    background: var(--preview-accent);
    color: #fff;
    padding: 0.45rem 0.9rem;
    border-radius: var(--r-sm);
    font-size: 0.85rem;
    font-weight: 600;
    transition: background .3s ease;
}

.preview__hero {
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: linear-gradient(180deg, var(--paper-2), var(--surface));
}
.preview__eyebrow {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--preview-accent);
    margin-bottom: 0.75rem;
    transition: color .3s ease;
}
.preview__h {
    font-size: clamp(1.3rem, 3vw, 1.85rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 0.85rem;
}
.preview__p { color: var(--text-mute); font-size: 0.95rem; margin-bottom: 1.5rem; max-width: 480px; margin-inline: auto; }
.preview__ctas { display: inline-flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.preview__btn-primary {
    background: var(--preview-accent);
    color: #fff;
    padding: 0.7rem 1.25rem;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 0.92rem;
    transition: background .3s ease;
}
.preview__btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-strong);
    padding: 0.7rem 1.25rem;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 0.92rem;
}

.preview__strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    padding: 1rem 1.5rem;
    background: var(--paper-2);
    border-top: 1px solid var(--border);
}
.preview__pip { font-size: 0.78rem; color: var(--text-mute); }

.preview__cta-row {
    text-align: center;
    margin-top: 2.5rem;
    max-width: 720px;
    margin-inline: auto;
}
.preview__cta-line { color: var(--text-mute-on-dark); margin-bottom: 1.5rem; font-size: 0.95rem; line-height: 1.55; }

/* ============================================================
   COMPARE TABLE (new flat row/cell variant for homepage)
   ============================================================ */
.compare {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface);
}
.compare__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border);
}
.compare__row:last-child { border-bottom: 0; }
.compare__row--head {
    background: var(--paper-2);
    font-weight: 600;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
}
.compare__cell {
    padding: 0.85rem 1rem;
    font-size: 0.92rem;
    line-height: 1.45;
}
.compare__cell--label { color: var(--text-mute); font-family: var(--font-mono); font-size: 0.82rem; }
.compare__cell--us { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.compare__row--head .compare__cell--us { background: var(--accent); color: var(--ink); }
@media (max-width: 640px) {
    .compare__row { grid-template-columns: 1fr; }
    .compare__cell { padding: 0.65rem 1rem; }
    .compare__cell--label { background: var(--paper-2); font-weight: 700; padding-top: 1rem; }
    .compare__row--head { display: none; }
    .compare__cell::before { content: attr(data-col); display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute-2); margin-bottom: 0.25rem; }
}

/* ============================================================
   PROCESS time pill
   ============================================================ */
.process__when {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.3rem 0.8rem;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ============================================================
   FORM honeypot + submit
   ============================================================ */
.form__honey { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form__submit { width: 100%; margin-top: 1rem; }
.form select.form__input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: 2.25rem; }

/* ============================================================
   FOOTER additions
   ============================================================ */
.footer__brand { margin-bottom: 2rem; }
.footer__logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-on-dark); margin-bottom: 0.5rem; }
.footer__logo-link { display: inline-block; margin-bottom: 0.85rem; }
.footer__logo-img { display: block; height: 56px; width: auto; max-width: 280px; }
.footer__nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}
@media (min-width: 700px) { .footer__nav { grid-template-columns: repeat(3, 1fr); } }
.footer__head {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-mute-on-dark);
    margin-bottom: 0.85rem;
}
.footer__col { display: flex; flex-direction: column; gap: 0.5rem; }
.footer__col span { color: var(--text-mute-on-dark); }
.footer__legal {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-dark);
    color: var(--text-mute-on-dark);
    font-size: 0.82rem;
}

/* Final touch ups for very small screens. */
@media (max-width: 480px) {
    .hero { padding: 3.5rem 0 3rem; }
    .hero__heading { font-size: 2rem; }
    .hero__sub { font-size: 1rem; }
    .hero__ctas .btn { width: 100%; }
    .leak { padding: 1.25rem; }
    .preview__inputs { padding: 1.25rem; }
    .form { padding: 1.5rem; }
}

/* ============================================================
   ADDITIONS v4 (2026-05-02). Polish pass per Caleb's feedback.
   - Footer: kill the broken 4-col grid, mobile-first 1 col → 2-col → final layout
   - Sections: shrink padding everywhere, things were too tall
   - Card tilt CSS (paired with skill JS)
   - Hero "code rain" background animation
   - Reveal section moving background grid
   - Compare animated cross-out
   - Industries dynamic ticker visual
   - Process visual rework (vertical timeline)
   - Contact form polish
   - Smooth scroll/scroll-driven micro-animations
   - Lead-leak calculator: smaller + tighter
   - Instant preview: extra inputs
   - Multi-page nav with dropdowns
   - All mobile-first.
   ============================================================ */

/* ---- 1. Section padding shrink (everything too tall before) ---- */
.section { padding: 3.5rem 0; }
@media (min-width: 700px) { .section { padding: 4.5rem 0; } }
@media (min-width: 1100px) { .section { padding: 5.5rem 0; } }

.section__head { margin: 0 0 2rem; }
@media (min-width: 700px) { .section__head { margin-bottom: 2.5rem; } }

.hero { padding: 3rem 0 3rem; }
@media (min-width: 700px) { .hero { padding: 4.5rem 0 4rem; } }
@media (min-width: 1100px) { .hero { padding: 5rem 0 4.5rem; } }
.hero__ctas { margin-bottom: 2.5rem; }
.trust { margin-top: 2rem; padding-top: 1.75rem; }

.section--cta { padding: 4rem 0 3rem; }
@media (min-width: 700px) { .section--cta { padding: 5rem 0 3.5rem; } }
@media (min-width: 1100px) { .section--cta { padding: 6rem 0 4rem; } }

/* ---- 2. FOOTER FIX (was: forced 4-col grid that smashed letters on mobile) ---- */
/* Override the legacy broken footer__inner. New mobile-first structure. */
.footer { padding: 2.5rem 0 1.5rem; }
@media (min-width: 700px) { .footer { padding: 3.5rem 0 1.75rem; } }

.footer__inner {
    display: flex !important;
    flex-direction: column;
    gap: 2rem !important;
    grid-template-columns: none !important;
    padding-bottom: 2rem;
}
@media (min-width: 900px) {
    .footer__inner {
        flex-direction: row;
        gap: 3rem !important;
        align-items: flex-start;
    }
    .footer__brand { flex: 0 0 280px; max-width: 280px; }
    .footer__nav { flex: 1; }
}

.footer__nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
    margin-bottom: 0;
}
@media (min-width: 480px) { .footer__nav { grid-template-columns: 1fr 1fr !important; gap: 1.75rem; } }
@media (min-width: 900px) { .footer__nav { grid-template-columns: repeat(3, 1fr) !important; gap: 2.5rem; } }

.footer__col {
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.footer__col a, .footer__col span {
    display: inline-block;
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
    font-size: 0.92rem;
}
.footer__head {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 0.4rem;
}
.footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding-top: 1rem;
    font-size: 0.78rem;
}
@media (min-width: 700px) {
    .footer__legal { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---- 3. NAV: multi-page + dropdowns ---- */
.site-nav { position: sticky; top: 0; z-index: 100; backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); background: rgba(10,10,10,0.82); border-bottom: 1px solid var(--border-dark); }
.site-nav__inner { display: flex; align-items: center; gap: 1rem; height: 64px; }
.site-nav__logo { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-on-dark); font-weight: 700; letter-spacing: -0.02em; font-size: 1rem; }
.site-nav__logo-mark { width: 26px; height: 26px; border-radius: 6px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); font-weight: 800; font-size: 0.85rem; }
/* Real brand logo image. Constrained height so it scales cleanly in the nav. */
.site-nav__logo-img { display: block; height: 28px; width: auto; max-width: 200px; }
@media (min-width: 700px) { .site-nav__logo-img { height: 32px; max-width: 240px; } }

.site-nav__links { display: none; align-items: center; gap: 0.25rem; margin-left: auto; margin-right: 1rem; }
@media (min-width: 1000px) { .site-nav__links { display: flex; } }

.site-nav__item { position: relative; }
.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-mute-on-dark);
    border-radius: 6px;
    transition: background .2s ease, color .2s ease;
    cursor: pointer;
}
.site-nav__link:hover, .site-nav__item:hover .site-nav__link, .site-nav__link[aria-expanded="true"] {
    color: var(--text-on-dark);
    background: rgba(255,255,255,0.05);
}
.site-nav__caret {
    width: 10px; height: 10px;
    transition: transform .2s ease;
}
.site-nav__item:hover .site-nav__caret, .site-nav__link[aria-expanded="true"] .site-nav__caret { transform: rotate(180deg); }

.site-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: rgba(20,20,20,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-dark-2);
    border-radius: 10px;
    padding: 0.5rem;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    z-index: 110;
}
.site-nav__item:hover .site-nav__menu, .site-nav__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
.site-nav__menu a {
    display: block;
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem;
    color: var(--text-mute-on-dark);
    border-radius: 6px;
    transition: background .15s ease, color .15s ease;
}
.site-nav__menu a:hover { background: rgba(255,106,0,0.1); color: var(--accent); }
.site-nav__menu-sub {
    padding: 0.4rem 0.75rem 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-mute-on-dark);
    opacity: 0.6;
}

.site-nav__cta {
    display: none;
    align-items: center;
    padding: 0.6rem 1.1rem;
    background: var(--accent);
    color: var(--ink);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background .2s ease, transform .15s ease;
}
@media (min-width: 1000px) { .site-nav__cta { display: inline-flex; } }
.site-nav__cta:hover { background: var(--accent-hover); transform: translateY(-1px); }

.site-nav__toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    margin-left: auto;
    cursor: pointer;
}
@media (min-width: 1000px) { .site-nav__toggle { display: none; } }
.site-nav__toggle span { width: 22px; height: 2px; background: var(--text-on-dark); border-radius: 2px; transition: transform .25s, opacity .2s; }
.site-nav__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.site-nav__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.site-nav__drawer {
    position: fixed;
    top: 64px;
    left: 0; right: 0; bottom: 0;
    background: rgba(10,10,10,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1.25rem 1.5rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 99;
}
.site-nav__drawer.is-open { transform: translateX(0); }
@media (min-width: 1000px) { .site-nav__drawer { display: none; } }

.site-nav__drawer-section { padding: 0.85rem 0; border-bottom: 1px solid var(--border-dark); }
.site-nav__drawer-section:last-child { border-bottom: 0; }
.site-nav__drawer-head {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.site-nav__drawer-link {
    display: block;
    padding: 0.6rem 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-on-dark);
}
.site-nav__drawer-link--sub { font-size: 0.95rem; padding: 0.4rem 0 0.4rem 0.85rem; color: var(--text-mute-on-dark); font-weight: 400; }
.site-nav__drawer-cta {
    display: block;
    margin-top: 1rem;
    padding: 0.85rem 1.25rem;
    background: var(--accent);
    color: var(--ink);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

/* ---- 4. CARD TILT (paired with skill JS) ---- */
[data-tilt] {
    transform-style: preserve-3d;
    transform-origin: center;
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease;
    will-change: transform;
}
/* While the cursor is over the card, drop the transform transition so the JS
   can update transform every frame and the card tracks the cursor instantly.
   On mouseleave the rule no longer matches, so the smooth return-to-flat
   transition takes over and the card relaxes back to identity. */
[data-tilt]:hover {
    transition: box-shadow 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
    [data-tilt] { transform: none !important; transition: none; }
}

/* ---- 5. HERO CODE-RAIN background animation ---- */
.hero__code {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.18;
    z-index: -1;
    mask-image: linear-gradient(180deg, black 30%, transparent 95%);
    -webkit-mask-image: linear-gradient(180deg, black 30%, transparent 95%);
}
.hero__code-col {
    position: absolute;
    top: -100%;
    width: 14px;
    height: 100%;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.4;
    color: var(--accent);
    text-align: center;
    white-space: pre;
    animation: codeRain linear infinite;
}
@keyframes codeRain {
    0%   { transform: translateY(0); }
    100% { transform: translateY(200%); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__code-col { animation: none; }
}

/* HERO SPLIT LAYOUT.
   Mobile: single column, text first then visual below (visual hidden on tiny
   screens to keep the hero compact). Desktop: 2-column grid with text on left
   and the wireframe construct on the right. */
.hero__inner--split {
    display: block;
    text-align: left;
}
.hero__col--text { max-width: 640px; margin: 0 auto; text-align: left; }
.hero__col--visual {
    display: none;
    margin: 2.5rem auto 0;
    max-width: 520px;
}
@media (min-width: 600px) {
    .hero__col--visual { display: block; }
}
@media (min-width: 960px) {
    .hero__inner--split {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3rem;
        align-items: center;
    }
    .hero__col--text   { max-width: none; margin: 0; }
    .hero__col--visual { margin: 0; max-width: none; }
}

/* Re-align text-column children to the left now that the hero is split. */
.hero__col--text .hero__heading,
.hero__col--text .hero__sub { margin-left: 0; margin-right: 0; max-width: none; }
.hero__col--text .hero__ctas { justify-content: flex-start; margin-bottom: 1.25rem; }
.hero__col--text .hero__call { justify-content: flex-start; }
.hero__col--text .trust { justify-content: flex-start; margin-top: 2rem; padding-top: 1.75rem; }

/* Quiet tap-to-call line under the hero CTAs. Secondary to the primary
   "Book a meeting" button. Real tel: link, real number from contact page. */
.hero__call {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 0.95rem;
    color: var(--text-mute-on-dark);
}
.hero__call-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-on-dark);
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 106, 0, 0.45);
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
}
.hero__call-link:hover { color: var(--accent); border-color: var(--accent); }
.hero__call-link svg { color: var(--accent); flex-shrink: 0; }

/* HERO CONSTRUCT VISUAL (rebuilt 2026-05-04).
   A realistic mini OO homepage that builds itself piece by piece on a ~10s
   loop. Real text, real OO orange, real OO copy. Each .step element appears
   with a staggered fade+slide-up via its --d delay variable. Pure CSS for
   the build sequence; one tiny JS bit (skills.js) types the URL letter by
   letter. Decorative only. Fail-open: defaults to fully visible if anything
   goes wrong. */
.hero__construct {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero__construct-frame {
    width: 100%;
    aspect-ratio: 16 / 11;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: linear-gradient(180deg, #1c1c1e 0%, #0d0d0d 100%);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.55),
        0 0 60px rgba(255, 106, 0, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.06);
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* ---- Browser chrome bar with traffic-light dots + typing URL ---- */
.hero__construct-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #2a2a2c;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero__construct-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    flex: 0 0 10px;
}
.hero__construct-dot:nth-child(1) { background: #FF5F57; }
.hero__construct-dot:nth-child(2) { background: #FEBC2E; }
.hero__construct-dot:nth-child(3) { background: #28C840; }
.hero__construct-url {
    flex: 1;
    margin-left: 10px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hero__construct-url-pad { color: rgba(255,255,255,0.3); }
.hero__construct-url-text { color: var(--accent); font-weight: 600; }
.hero__construct-cursor {
    display: inline-block;
    width: 1px; height: 0.62rem;
    background: var(--accent);
    margin-left: 1px;
    animation: caretBlink 0.85s step-end infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* ---- The mini OO site that builds itself ---- */
.hero__construct-site {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px clamp(14px, 4%, 28px) 16px;
    text-align: left;
    overflow: hidden;
    position: relative;
}

/* Each step starts hidden, fades up at its --d delay, holds, then fades out
   at the end of the 10s cycle. Fail-open: if animation fails to load,
   default state is fully visible (handled in @media reduce + safety below). */
.hero__construct .step {
    opacity: 0;
    transform: translateY(8px);
    animation: heroBuildIn 10s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes heroBuildIn {
    0%   { opacity: 0; transform: translateY(8px); }
    /* Element appears at its delay, holds visible for most of the cycle,
       then fades together with the others as the loop wraps. */
    8%   { opacity: 1; transform: translateY(0); }
    82%  { opacity: 1; transform: translateY(0); }
    93%  { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 0; transform: translateY(-4px); }
}

/* ---- Nav row inside the mock site ---- */
.hero__construct-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 14px;
}
.hero__construct-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    background: var(--accent);
    color: #0d0d0d;
    border-radius: 5px;
    font-weight: 800;
    font-size: 0.62rem;
    letter-spacing: -0.04em;
    flex: 0 0 24px;
}
.hero__construct-navlinks {
    display: inline-flex;
    gap: 0.85rem;
    color: rgba(255,255,255,0.55);
    font-size: 0.58rem;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
}
.hero__construct-navcta {
    background: var(--accent);
    color: #0d0d0d;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---- Hero badge ---- */
.hero__construct-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: rgba(255, 106, 0, 0.1);
    border: 1px solid rgba(255, 106, 0, 0.32);
    border-radius: 999px;
    color: var(--accent);
    font-size: 0.55rem;
    font-weight: 500;
    align-self: flex-start;
    margin-bottom: 10px;
}
.hero__construct-badge-pulse {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.6);
    animation: heroBuildPulse 1.8s ease-out infinite;
}
@keyframes heroBuildPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.55); }
    70%  { box-shadow: 0 0 0 5px rgba(255, 106, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 106, 0, 0); }
}

/* ---- Hero headline (real OO copy) ---- */
.hero__construct-h {
    font-weight: 300;
    font-size: clamp(0.95rem, 2.4vw, 1.35rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text-on-dark);
    margin-bottom: 8px;
}
.hero__construct-h em {
    color: var(--accent);
    font-style: italic;
    font-weight: 500;
}

.hero__construct-sub {
    font-size: 0.62rem;
    line-height: 1.45;
    color: rgba(255,255,255,0.6);
    margin-bottom: 12px;
    max-width: 95%;
}

/* ---- CTA buttons ---- */
.hero__construct-ctas {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.hero__construct-cta {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 600;
}
.hero__construct-cta--primary {
    background: var(--accent);
    color: #0d0d0d;
}
.hero__construct-cta--ghost {
    background: transparent;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.18);
}

/* ---- Trust pips ---- */
.hero__construct-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: rgba(255,255,255,0.45);
    font-size: 0.52rem;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ---- "Built. In 7 days." stamp that appears at the end ---- */
.hero__construct-stamp {
    position: absolute;
    bottom: 12px;
    right: 14px;
    padding: 4px 10px;
    background: var(--accent);
    color: #0d0d0d;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 6px 16px rgba(255, 106, 0, 0.35);
    transform: rotate(-3deg);
    transform-origin: right bottom;
}

/* ---- Mobile: shrink slightly so the mock fits comfortably under the hero text ---- */
@media (max-width: 700px) {
    .hero__construct-site { padding: 10px 14px 12px; }
    .hero__construct-bar { padding: 6px 10px; }
    .hero__construct-dot { width: 8px; height: 8px; flex-basis: 8px; }
    .hero__construct-h { font-size: 0.95rem; }
    .hero__construct-sub { font-size: 0.58rem; }
    .hero__construct-cta { font-size: 0.55rem; padding: 5px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__construct .step { animation: none; opacity: 1; transform: none; }
    .hero__construct-cursor, .hero__construct-badge-pulse { animation: none; }
}

/* ---- 6. REVEAL section moving grid background ---- */
.reveal__sticky {
    /* Override existing ::before with stronger animated grid */
}
.reveal__sticky::before {
    animation: revealDrift 18s linear infinite;
}
@keyframes revealDrift {
    0%   { background-position: 0 0; }
    100% { background-position: 56px 56px; }
}
.reveal__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.reveal__particle {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    animation: floatUp linear infinite;
    box-shadow: 0 0 12px rgba(255,106,0,0.6);
}
@keyframes floatUp {
    0%   { transform: translateY(100vh); opacity: 0; }
    8%   { opacity: 0.8; }
    92%  { opacity: 0.8; }
    100% { transform: translateY(-100px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .reveal__sticky::before, .reveal__particle { animation: none; }
}

/* ---- 7. LEAK CALCULATOR: smaller + tighter ---- */
.section--leak { padding: 3.5rem 0; }
@media (min-width: 700px) { .section--leak { padding: 4.5rem 0; } }
.leak { max-width: 760px; padding: 1.5rem; }
@media (min-width: 700px) { .leak { padding: 1.75rem; } }
.leak__inputs { gap: 0.85rem; margin-bottom: 1.25rem; }
.leak__field { padding: 0.85rem; gap: 0.4rem; }
.leak__value { font-size: 1.1rem; }
.leak__col { padding: 1.15rem; }
.leak__col-num { font-size: 1.5rem; }
@media (min-width: 700px) { .leak__col-num { font-size: 1.85rem; } }
.leak__col-money { font-size: 0.9rem; }
.leak__bottom { padding: 1.5rem 1rem; }
.leak__bottom-num { font-size: clamp(2rem, 5.5vw, 3.5rem); }
.leak__bottom-label { font-size: 0.78rem; }
.leak__bottom-sub { font-size: 0.88rem; margin-bottom: 1.25rem; }
.leak__disclaimer { font-size: 0.74rem; margin-top: 0.85rem; }
.leak__results { margin-bottom: 1.25rem; }

/* ---- 8. INSTANT PREVIEW: 5 inputs no longer 5, now 7 (industry + tagline) ---- */
.section--preview { padding: 3.5rem 0; }
@media (min-width: 700px) { .section--preview { padding: 4.5rem 0; } }

/* Industry badge: a small pill above the headline that swaps icon + label
   based on the industry select. Also shows the brand color via accent border. */
.preview__industry-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: rgba(0,0,0,0.04);
    color: var(--preview-accent);
    border: 1px solid color-mix(in srgb, var(--preview-accent) 30%, transparent);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.85rem;
    transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.preview__industry-icon { display: inline-flex; }
.preview__industry-icon svg { display: block; }

/* The fourth pip in the strip carries the industry. Make it stand out vs. the
   static three so the user sees their selection light up that one. */
.preview__pip--accent {
    background: var(--accent-soft);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-weight: 600;
}

/* Brief accent flash on outputs as inputs change. Pure additive overlay,
   defaults to no shadow so removing the class restores the natural look. */
.preview-flash {
    animation: previewFlash .85s ease-out 1;
}
@keyframes previewFlash {
    0%   { box-shadow: 0 0 0 0 rgba(255,106,0,0.45); background-color: rgba(255,106,0,0.18); }
    60%  { box-shadow: 0 0 0 6px rgba(255,106,0,0); background-color: rgba(255,106,0,0.05); }
    100% { box-shadow: 0 0 0 0 rgba(255,106,0,0);    background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { .preview-flash { animation: none; } }

/* ---- 9. COMPARE animated cross-out (cascading row by row) ---- */
.compare__cell--struck {
    position: relative;
    color: var(--text-mute) !important;
    transition: color .4s ease, opacity .4s ease;
}
.compare__cell--struck::after {
    content: '';
    position: absolute;
    top: 50%; left: 0.5rem; right: 0.5rem;
    height: 2px;
    background: var(--bad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s cubic-bezier(.6,.05,.3,1);
    border-radius: 2px;
}
.compare.is-struck .compare__cell--struck::after { transform: scaleX(1); }
.compare.is-struck .compare__cell--struck { opacity: 0.5; }

.compare__cell--us-anim {
    background: rgba(255, 106, 0, 0.04);
    transition: background .55s ease, transform .45s ease;
}
.compare.is-struck .compare__cell--us-anim {
    background: var(--accent-soft);
}

/* Row-by-row stagger. The first .compare__row is the head, no animation needed.
   Data rows are nth-child(2) through nth-child(8). Each delays 110ms after the
   prior row so the strike cascades top-to-bottom. The us-anim background shift
   follows 150ms after each row's strike begins. */
.compare__row:nth-child(2) .compare__cell--struck::after { transition-delay: 0ms; }
.compare__row:nth-child(3) .compare__cell--struck::after { transition-delay: 110ms; }
.compare__row:nth-child(4) .compare__cell--struck::after { transition-delay: 220ms; }
.compare__row:nth-child(5) .compare__cell--struck::after { transition-delay: 330ms; }
.compare__row:nth-child(6) .compare__cell--struck::after { transition-delay: 440ms; }
.compare__row:nth-child(7) .compare__cell--struck::after { transition-delay: 550ms; }
.compare__row:nth-child(8) .compare__cell--struck::after { transition-delay: 660ms; }

.compare__row:nth-child(2) .compare__cell--struck { transition-delay: 280ms; }
.compare__row:nth-child(3) .compare__cell--struck { transition-delay: 390ms; }
.compare__row:nth-child(4) .compare__cell--struck { transition-delay: 500ms; }
.compare__row:nth-child(5) .compare__cell--struck { transition-delay: 610ms; }
.compare__row:nth-child(6) .compare__cell--struck { transition-delay: 720ms; }
.compare__row:nth-child(7) .compare__cell--struck { transition-delay: 830ms; }
.compare__row:nth-child(8) .compare__cell--struck { transition-delay: 940ms; }

.compare__row:nth-child(2) .compare__cell--us-anim { transition-delay: 150ms; }
.compare__row:nth-child(3) .compare__cell--us-anim { transition-delay: 260ms; }
.compare__row:nth-child(4) .compare__cell--us-anim { transition-delay: 370ms; }
.compare__row:nth-child(5) .compare__cell--us-anim { transition-delay: 480ms; }
.compare__row:nth-child(6) .compare__cell--us-anim { transition-delay: 590ms; }
.compare__row:nth-child(7) .compare__cell--us-anim { transition-delay: 700ms; }
.compare__row:nth-child(8) .compare__cell--us-anim { transition-delay: 810ms; }

@media (prefers-reduced-motion: reduce) {
    .compare__cell--struck::after { transition: none; transform: scaleX(1); }
    .compare__cell--struck { opacity: 0.5; }
    .compare__cell--us-anim { background: var(--accent-soft); transition: none; }
}

/* ---- 10. INDUSTRIES: ticker stripe + accent dot per card ---- */
.industries-ticker {
    overflow: hidden;
    background: var(--ink);
    color: var(--text-mute-on-dark);
    padding: 0.6rem 0;
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
    margin-bottom: 2rem;
}
.industries-ticker__track {
    display: inline-flex;
    gap: 2.5rem;
    white-space: nowrap;
    animation: tickerScroll 38s linear infinite;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}
.industries-ticker__item { display: inline-flex; align-items: center; gap: 0.6rem; }
.industries-ticker__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .industries-ticker__track { animation: none; } }

.ind-card { position: relative; overflow: hidden; }
.ind-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.ind-card:hover::before { transform: scaleX(1); }

/* ---- 11. PROCESS visual rework: vertical timeline with connectors ---- */
.process { gap: 0; }
.process__step {
    position: relative;
    padding: 1.5rem 1.25rem 1.5rem 4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.process__step:hover { border-color: var(--accent); transform: translateX(4px); box-shadow: 0 12px 32px rgba(0,0,0,0.05); }
.process__num {
    position: absolute;
    left: 1.25rem; top: 1.25rem;
    width: 38px; height: 38px;
    background: var(--accent);
    color: var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: -0.02em;
    box-shadow: 0 6px 16px rgba(255,106,0,0.3);
}
.process__step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(1.25rem + 19px);
    top: 4rem;
    width: 2px;
    height: calc(100% - 2.25rem);
    background: linear-gradient(180deg, var(--accent), rgba(255,106,0,0.1));
}
.process__title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 0.5rem; line-height: 1.25; }
.process__body { color: var(--text-mute); font-size: 0.95rem; line-height: 1.55; margin-bottom: 0.75rem; }
.process__when { display: inline-block; padding: 0.3rem 0.75rem; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; }

/* ---- 12. CONTACT FORM polish ---- */
.form {
    position: relative;
    background: linear-gradient(180deg, var(--ink-2), var(--ink-3));
    padding: 1.75rem 1.25rem;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
}
.form::before {
    /* Accent ribbon along the top edge */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), rgba(255, 106, 0, 0.25));
}
.form::after {
    /* Soft accent radial glow in the corner, behind the content */
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle at center, rgba(255,106,0,0.18), transparent 70%);
    pointer-events: none;
    filter: blur(20px);
}
.form > * { position: relative; z-index: 1; }
@media (min-width: 700px) { .form { padding: 2.25rem; } }

.form__row { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }

.form__field { position: relative; margin-bottom: 1rem; }
.form__row .form__field { margin-bottom: 0; }

.form__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-mute-on-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
}

.form__input, .form select.form__input, .form textarea.form__input {
    width: 100%;
    background: rgba(255,255,255,0.04);
    color: var(--text-on-dark);
    border: 1px solid var(--border-dark-2);
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
    font: inherit;
    font-size: 0.95rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.form__input:hover, .form select.form__input:hover, .form textarea.form__input:hover {
    border-color: rgba(255, 106, 0, 0.4);
    background: rgba(255,255,255,0.06);
}
.form__input:focus, .form select.form__input:focus, .form textarea.form__input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255,255,255,0.07);
    box-shadow: 0 0 0 4px rgba(255,106,0,0.18);
}
.form__input::placeholder { color: rgba(255,255,255,0.35); }

/* Field-icon set: muted accent SVG on the left of each input. The icon is a
   background-image so it does not touch the input's accessible label. */
.form__field--icon .form__input { padding-left: 42px; background-repeat: no-repeat; background-position: 13px center; background-size: 18px 18px; }
.form__field--icon textarea.form__input { background-position: 13px 14px; }
.form__field--icon-name    .form__input { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6A00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E"); }
.form__field--icon-email   .form__input { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6A00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.form__field--icon-phone   .form__input { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6A00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92V21a1 1 0 01-1.1 1 19.8 19.8 0 01-8.6-3.07 19.5 19.5 0 01-6-6A19.8 19.8 0 013.2 4.3 1 1 0 014.2 3.2h4.1a1 1 0 011 .75c.27 1.1.74 2.55 1.21 3.49a1 1 0 01-.23 1.11l-2.2 1.92a16 16 0 006 6l1.92-2.2a1 1 0 011.11-.23c.94.47 2.39.94 3.49 1.21a1 1 0 01.75 1z'/%3E%3C/svg%3E"); }
.form__field--icon-building .form__input { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6A00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6'/%3E%3C/svg%3E"); }
.form__field--icon-tag     .form__input { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6A00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4L12 22l-9-9 8.6-8.6h8z'/%3E%3Ccircle cx='15' cy='9' r='1.2'/%3E%3C/svg%3E"); }
.form__field--icon-link    .form__input { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6A00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 00-7 0l-3 3a5 5 0 007 7l1-1'/%3E%3C/svg%3E"); }
.form__field--icon-msg     .form__input { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6A00' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 01-9 8.5 8.5 8.5 0 01-3.6-.8L3 21l1.8-5.4A8.5 8.5 0 1121 11.5z'/%3E%3C/svg%3E"); }

.form__error {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--bad);
    min-height: 1em;
}
.form__field.is-invalid .form__input { border-color: var(--bad); background: rgba(220,38,38,0.08); box-shadow: 0 0 0 3px rgba(220,38,38,0.12); }

.form__notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(255,106,0,0.14), rgba(255,106,0,0.05));
    border: 1px solid rgba(255,106,0,0.3);
    border-left: 3px solid var(--accent);
    padding: 1rem 1.1rem;
    border-radius: 0 12px 12px 0;
    margin-bottom: 1.5rem;
    color: var(--text-mute-on-dark);
    font-size: 0.88rem;
    line-height: 1.55;
}
.form__notice-icon {
    flex: 0 0 20px;
    color: var(--accent);
    margin-top: 1px;
}
.form__notice-icon svg { display: block; }
.form__notice strong { color: var(--accent); font-weight: 600; }

.form__honey { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    margin-top: 1.5rem;
    padding: 1.05rem 1.5rem;
    font-size: 1rem;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(255,106,0,0.28);
    transition: transform .2s ease, box-shadow .2s ease;
}
.form__submit:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(255,106,0,0.36); }
.form__submit-arrow {
    display: inline-block;
    font-weight: 700;
    transition: transform .2s ease;
}
.form__submit:hover .form__submit-arrow { transform: translateX(4px); }

.form__trust {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.25rem;
    font-size: 0.78rem;
    color: var(--text-mute-on-dark);
}
.form__trust li { display: inline-flex; align-items: center; gap: 0.4rem; }
.form__trust-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.form__success {
    background: rgba(22,163,74,0.1);
    border: 1px solid #16A34A;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.25rem;
    color: var(--text-on-dark);
}
.form__success h3 { color: #16A34A; font-size: 1.15rem; margin-bottom: 0.5rem; }
.form__success p { color: var(--text-mute-on-dark); font-size: 0.92rem; line-height: 1.55; }
.form__success a { color: var(--accent); text-decoration: underline; }

/* ---- 13. SMOOTH SCROLL ----
   EMERGENCY: 2026-05-03. The fade-in animation was hiding elements
   for some users. Animation removed. .fade-in is now a no-op class.
   Everything is visible by default. No JS dependency. No risk. */
html { scroll-padding-top: 80px; }

.fade-in { opacity: 1; transform: none; }
.fade-in.is-visible { opacity: 1; transform: none; }

/* ---- 14. EDIT-ON-DEMAND visual upgrade in offer ---- */
.offer__list li {
    align-items: flex-start;
    padding: 0.5rem 0.75rem;
    background: rgba(255,255,255,0.025);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
    transition: border-color .25s ease, background .25s ease;
}
.offer__list li:hover { border-color: var(--accent); background: rgba(255,106,0,0.04); }

/* ---- 15. BA section transformation marker (CSS hook for JS animation) ---- */
.ba__phase { position: absolute; top: 12px; right: 16px; z-index: 6; padding: 6px 12px; background: rgba(0,0,0,0.7); color: var(--accent); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(8px); }

/* ---- 16. Hero badge tiny tweak so it doesn't dominate ---- */
.hero__badge { font-size: 0.78rem; padding: 0.4rem 0.85rem 0.4rem 0.6rem; }

/* ---- 17. Stat source tightening ---- */
.stat { padding: 1.5rem 1.25rem; }
@media (min-width: 700px) { .stat { padding: 2rem 1.5rem; } }
.stat__number { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.stat__label { font-size: 0.82rem; }

/* ---- 18. Industries grid spacing ---- */
.section--industries { padding: 3.5rem 0; }
@media (min-width: 700px) { .section--industries { padding: 4.5rem 0; } }
.industries-grid { gap: 0.85rem; }
@media (min-width: 700px) { .industries-grid { gap: 1.1rem; } }
.ind-card { padding: 1.25rem; }
.ind-card__title { font-size: 1.05rem; margin-bottom: 0.4rem; }
.ind-card__body { font-size: 0.88rem; line-height: 1.5; margin-bottom: 0.85rem; }
.ind-card__icon { width: 38px; height: 38px; margin-bottom: 0.85rem; }

/* ---- 19. Tier card padding ---- */
.tier { padding: 1.35rem 1.15rem; }
.tier__price { margin-bottom: 0.65rem; }
.onetime { margin-top: 2rem; }
.onetime__head { margin: 0 auto 1.75rem; }

/* ---- 20. Areas section a touch tighter ---- */
.areas__grid { gap: 0.85rem; margin-bottom: 1.5rem; }
@media (min-width: 700px) { .areas__grid { gap: 1.25rem; } }
.area-card { padding: 1.5rem 1.25rem; }
.area-card__city { font-size: 1.4rem; margin-bottom: 0.5rem; }

/* ---- 21. Compare table on mobile gets a header per cell ---- */
@media (max-width: 640px) {
    .compare__cell--us::before { content: 'OO'; display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.25rem; }
    .compare__row .compare__cell:nth-child(3)::before { content: 'TYPICAL AGENCY'; display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute-2); margin-bottom: 0.25rem; }
}

/* ============================================================
   ADDITIONS v5 (2026-05-03). Polish round 2 per Caleb's feedback.
   - .proc-flow: rich visual rework of process section (icons, large cards)
   - .ba auto-animation hooks (drives the slider on scroll-into-view)
   - Stats fade-in
   ============================================================ */

/* ---- Process section v2: vertical timeline with icons + larger cards ---- */
.proc-flow {
    display: grid;
    gap: 1rem;
    max-width: 720px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    position: relative;
}
@media (min-width: 700px) {
    .proc-flow { gap: 1.25rem; padding-left: 2rem; }
    .proc-flow::before {
        content: '';
        position: absolute;
        left: 0.75rem;
        top: 1.25rem;
        bottom: 1.25rem;
        width: 2px;
        background: linear-gradient(180deg, var(--accent), rgba(255,106,0,0.15));
        border-radius: 2px;
    }
}

.proc-flow__step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    position: relative;
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.proc-flow__step:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.06); }

@media (min-width: 700px) {
    .proc-flow__step { padding: 1.5rem 1.5rem 1.5rem 4.5rem; }
    /* Dot centered on the .proc-flow::before line at left: 0.75rem (12px from the
       proc-flow padding-box edge). The step is offset 2rem (32px) from that edge by
       the proc-flow padding-left. Dot is 14px wide, so its left edge from the step
       must be (12 + 1) - 7 - 32 = -26px = -1.625rem to center on the 2px line. */
    .proc-flow__step::before {
        content: '';
        position: absolute;
        left: -1.625rem;
        top: 1.75rem;
        width: 14px;
        height: 14px;
        background: var(--accent);
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(255,106,0,0.15), 0 0 0 8px var(--paper);
    }
}

.proc-flow__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 12px;
    margin-bottom: 0.85rem;
}
@media (min-width: 700px) {
    .proc-flow__icon {
        position: absolute;
        left: 1.25rem;
        top: 1.5rem;
        margin-bottom: 0;
    }
}

.proc-flow__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.proc-flow__num {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    font-weight: 600;
}
.proc-flow__when {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: var(--ink);
    color: var(--text-on-dark);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.proc-flow__title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}
.proc-flow__body {
    color: var(--text-mute);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ---- BA transformation auto-slide. Class added by JS on scroll-into-view. ---- */
.ba__frame.is-auto-sliding .ba__layer--before,
.ba__frame.is-auto-sliding .ba__handle {
    transition: width 0.45s cubic-bezier(.45,.05,.55,.95), left 0.45s cubic-bezier(.45,.05,.55,.95);
}

.ba__phase {
    transition: opacity .25s ease, background .35s ease;
}

/* Ghost cursor: floats around the AFTER layer during auto-slide to suggest the
   site is being actively edited. Default opacity 0 (decorative only, not a
   visibility risk). Animates only when JS confirms is-auto-sliding. */
.ba__cursor {
    position: absolute;
    top: 30%;
    left: 22%;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
}
.ba__cursor svg { display: block; }
.ba__cursor-tag {
    background: var(--accent);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    font-weight: 700;
}
.ba__frame.is-auto-sliding .ba__cursor {
    opacity: 1;
    animation: cursorPaths 10s ease-in-out infinite;
}
@keyframes cursorPaths {
    0%   { top: 30%; left: 22%; }
    18%  { top: 18%; left: 28%; }
    34%  { top: 30%; left: 50%; }
    52%  { top: 46%; left: 38%; }
    68%  { top: 60%; left: 60%; }
    84%  { top: 38%; left: 72%; }
    100% { top: 30%; left: 22%; }
}

/* Edit pulse on AFTER mock elements during auto-slide. Each element pulses in
   sequence, like the cursor is touching it. Default opacity = 1 (these are
   real content), the pulse is an additive accent ring. Fail-open. */
.ba-mock__edit { position: relative; transition: box-shadow .3s ease; border-radius: 6px; }
.ba__frame.is-auto-sliding .ba-mock__edit {
    animation: editPulse 10s ease-in-out infinite;
}
.ba__frame.is-auto-sliding .ba-mock__edit[data-edit-i="1"] { animation-delay: 0.2s; }
.ba__frame.is-auto-sliding .ba-mock__edit[data-edit-i="2"] { animation-delay: 1.7s; }
.ba__frame.is-auto-sliding .ba-mock__edit[data-edit-i="3"] { animation-delay: 3.4s; }
.ba__frame.is-auto-sliding .ba-mock__edit[data-edit-i="4"] { animation-delay: 5.1s; }
.ba__frame.is-auto-sliding .ba-mock__edit[data-edit-i="5"] { animation-delay: 6.8s; }
@keyframes editPulse {
    0%, 6%, 100% { box-shadow: none; outline: 0 solid transparent; }
    2%  { box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.28); }
    4%  { box-shadow: 0 0 0 6px rgba(255, 106, 0, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
    .ba__frame.is-auto-sliding .ba__cursor,
    .ba__frame.is-auto-sliding .ba-mock__edit { animation: none; }
}

/* ---- Stats: also forced visible to match fade-in fix ---- */
.stat { opacity: 1; transform: none; }

/* ============================================================
   MOBILE OVERFLOW SAFETY NET (added 2026-05-04).
   Caleb reported horizontal scroll on mobile producing a giant
   white space to the side. Likely cause: one of several wide
   absolute-positioned elements (cta__glow, hero__glow, mock
   browser frames at 1100px) leaking past their container, OR
   a flex/grid child whose min-content exceeds viewport.

   Defensive fix: clip horizontal overflow at the document level
   so nothing can ever cause a horizontal scrollbar. `clip` is
   used over `hidden` so it doesn't establish a new scrolling
   context (which would break sticky positioning on .reveal__sticky
   and the FAQ heading). Plus min-width:0 on grid/flex children to
   prevent the classic min-content overflow trap, and max-width:100%
   on media so no rogue image can ever burst the layout.
   ============================================================ */
html, body {
    overflow-x: clip;
    max-width: 100%;
}
body {
    /* Belt-and-suspenders: if a browser doesn't support overflow-x:clip,
       fall back to hidden. Older Safari (<16) needs this. */
    overflow-x: hidden;
}
@supports (overflow-x: clip) {
    body { overflow-x: clip; }
}
img, svg, video, iframe, picture, canvas {
    max-width: 100%;
    height: auto;
}
/* Grid + flex children default to min-content sizing which can blow out
   when the content is wider than the column. Forcing min-width: 0 lets
   them shrink to fit their assigned track. */
.section, .container, .hero__inner, .stats__inner, .problem-grid,
.industries-grid, .areas__grid, .onetime__grid, .footer__inner,
.footer__nav, .preview, .leak, .leak__inputs, .leak__results,
.compare, .compare__row, .form, .form__row, .hero__col,
.hero__construct-frame { min-width: 0; }

/* ============================================================
   ASYMMETRIC FULL-WIDTH LAYOUTS (added 2026-05-04).
   Caleb wants the page to "use every inch" so the eye travels
   across the full screen as it scrolls. Strategy: bumped container
   1200->1500 (above), plus per-section anchoring. Some sections
   lean left, some lean right, some bleed wider, some stay centered
   as a rhythm break. Text-heavy sections still cap at a readable
   width so paragraphs don't become 200-character lines.

   All overrides are wrapped in min-width queries so mobile stays
   single-column stacked. The pattern: at >=1100px, sections take on
   their asymmetric form. Below that, everything stacks naturally.
   ============================================================ */

/* HERO: extend the visual column further toward the right edge
   so the wireframe construct uses more horizontal space. */
@media (min-width: 1100px) {
    .hero .container.hero__inner--split {
        max-width: 1640px;
        padding-left: var(--side-pad);
        padding-right: var(--side-pad);
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
    }
}

/* PROBLEM: section heading anchored LEFT, cards extend right toward the edge. */
@media (min-width: 1100px) {
    #problem > .container {
        max-width: 1700px;
        margin-left: var(--side-pad);
        margin-right: 0;
        padding-right: var(--side-pad);
    }
    #problem .section__head {
        max-width: 560px;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }
    #problem .problem-grid { grid-template-columns: repeat(3, 1fr); }
}

/* REVEAL: shift the sticky statement from center to the left third
   so the eye lands off-center as you pin-scroll through it. */
@media (min-width: 1100px) {
    .reveal__inner {
        max-width: 1100px;
        margin-left: clamp(2rem, 8vw, 9rem);
        margin-right: auto;
        text-align: left;
    }
    .reveal__statement { margin-left: 0; }
}

/* LEAK CALCULATOR: anchor RIGHT. Heading on the left, the calculator
   card on the right. Two-column grid at wide widths. */
@media (min-width: 1100px) {
    .section--leak > .container {
        max-width: 1640px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(420px, 760px);
        gap: clamp(2rem, 5vw, 5rem);
        align-items: center;
    }
    .section--leak .section__head {
        text-align: left;
        max-width: 520px;
        margin: 0;
    }
    .section--leak .leak { margin: 0; }
}

/* BA SLIDER: bleed wider. Slider feels expansive when given the room. */
@media (min-width: 1100px) {
    .section--ba > .container { max-width: 1700px; }
    .ba { max-width: 1500px; }
}

/* INDUSTRIES: heading anchored LEFT, grid uses the full width. */
@media (min-width: 1100px) {
    .section--industries > .container { max-width: 1700px; }
    .section--industries .section__head {
        max-width: 640px;
        margin-left: 0;
        text-align: left;
    }
    .industries-grid { grid-template-columns: repeat(4, 1fr); }
}

/* INSTANT PREVIEW: bump width. Inputs left, mock browser right (already
   internally split, just give it more horizontal room). */
@media (min-width: 1100px) {
    .section--preview > .container { max-width: 1700px; }
    .preview { grid-template-columns: 360px 1fr; }
}

/* PROCESS: anchor LEFT so the timeline dots line up closer to the left
   edge of the page. Section heading sits above and to the left. */
@media (min-width: 1100px) {
    #process > .container {
        max-width: 1500px;
        margin-left: var(--side-pad);
        margin-right: auto;
    }
    #process .section__head {
        max-width: 600px;
        margin-left: 0;
        text-align: left;
    }
    .proc-flow { margin-left: 0; }
}

/* COMPARE: keep this CENTERED narrow. Tables are easier to read when
   the eye doesn't have to track across the full screen. Rhythm break. */
/* (intentionally no override; default behavior is fine) */

/* AREAS: anchor RIGHT. City cards push toward the right edge,
   heading aligns right. */
@media (min-width: 1100px) {
    .areas > .container {
        max-width: 1500px;
        margin-left: auto;
        margin-right: var(--side-pad);
    }
    .areas .section__head {
        text-align: right;
        max-width: 720px;
        margin-left: auto;
        margin-right: 0;
    }
    .areas__note { text-align: right; max-width: 720px; margin-left: auto; }
}

/* ABOUT: photo flush LEFT, copy column extends RIGHT toward the edge. */
@media (min-width: 1100px) {
    #about > .container {
        max-width: 1500px;
        margin-left: var(--side-pad);
        margin-right: auto;
    }
    #about .section__head {
        max-width: 720px;
        margin-left: 0;
        text-align: left;
    }
    .about { grid-template-columns: 320px 1fr; gap: 4rem; }
}

/* FAQ: anchor RIGHT and stick the heading to the side as you scroll. */
@media (min-width: 1100px) {
    #faq > .container {
        max-width: 1500px;
        margin-left: auto;
        margin-right: var(--side-pad);
        display: grid;
        grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
        gap: clamp(2rem, 4vw, 4rem);
        align-items: start;
    }
    #faq .section__head {
        max-width: none;
        text-align: left;
        position: sticky;
        top: 100px;
        margin: 0;
    }
}

/* BOOKING FORM: keep CENTERED and narrow. This is the conversion moment;
   the eye needs to be pulled to one focal point, not pushed to a side. */
/* (intentionally no override) */

/* FOOTER: bleed wider. Footer is brand wrap-up; let it use the page. */
.footer__inner {
    max-width: 1700px;
}
.footer__legal {
    max-width: 1700px;
}

/* STATS BAR: wider full-row layout on big screens. */
@media (min-width: 1100px) {
    .stats > .container { max-width: 1700px; }
}

/* ============================================================
   NUCLEAR EMERGENCY OVERRIDE (last rule in file).
   2026-05-03. This MUST be the last rule in styles.css.
   Forces visibility on every element that any earlier rule might
   try to hide. Defeats fade-in/fail-closed/etc. patterns.
   When debugging "page is broken / things are missing," this
   guarantees everything renders and the diagnosis can focus on
   layout/wording rather than visibility.
   ============================================================ */
.fade-in,
.fade-in:not(.is-visible),
.stat,
.section,
.section--light,
.section--dark,
.section--cta,
.section__head,
.problem-card,
.ind-card,
.tier,
.area-card,
.process__step,
.proc-flow__step,
.compare,
.compare__row,
.compare__cell,
.about,
.faq__item,
.form,
.offer,
.onetime,
.leak,
.preview,
.ba,
.stats,
.industries-ticker,
.reveal,
.reveal__statement,
.problem-grid,
.industries-grid,
.areas__grid,
.onetime__grid,
.cta__head,
.hero,
.hero__inner,
.hero__heading,
.hero__sub,
.hero__ctas,
.trust,
.footer,
.footer__inner,
.footer__nav,
.footer__col,
.footer__legal {
    opacity: 1 !important;
    visibility: visible !important;
}
/* Make sure transforms used for fade-up resets do not push elements off-screen */
.fade-in:not(.is-visible),
.stat {
    transform: none !important;
}