/* ========================================================
   DrainCleaningNearMe.us — Mobile-First Design System
   ======================================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
    /* Colors */
    --c-bg: #0B1120;
    --c-bg-alt: #111827;
    --c-bg-card: rgba(17, 24, 39, 0.7);
    --c-surface: #1F2937;
    --c-border: rgba(255, 255, 255, 0.08);
    --c-text: #E5E7EB;
    --c-text-muted: #9CA3AF;
    --c-heading: #FFFFFF;
    --c-primary: #00A3FF;
    --c-primary-glow: rgba(0, 163, 255, 0.25);
    --c-accent: #FF6B35;
    --c-accent-hover: #FF8A5C;
    --c-success: #00E676;

    /* Typography */
    --ff: 'Inter', system-ui, -apple-system, sans-serif;
    --fs-base: 1rem;
    /* 16px */
    --fs-sm: 0.875rem;
    /* 14px */
    --fs-xs: 0.75rem;
    /* 12px */
    --fs-lg: 1.125rem;
    /* 18px */
    --fs-xl: 1.5rem;
    /* 24px */
    --fs-2xl: 2rem;
    /* 32px */
    --fs-3xl: 2.5rem;
    /* 40px */
    --fs-4xl: 3rem;
    /* 48px */

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;

    /* Radius */
    --r-sm: 0.375rem;
    --r-md: 0.75rem;
    --r-lg: 1rem;
    --r-xl: 1.5rem;
    --r-full: 9999px;

    /* Transitions */
    --tr-fast: 150ms ease;
    --tr-base: 250ms ease;
    --tr-slow: 400ms ease;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 25px var(--c-primary-glow);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--ff);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--c-primary);
    text-decoration: none;
    transition: color var(--tr-fast);
}

a:hover {
    color: var(--c-accent);
}

ul {
    list-style: none;
}

address {
    font-style: normal;
    color: var(--c-text-muted);
    line-height: 1.7;
}

/* ---------- Utility ---------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--sp-5);
    box-sizing: border-box;
}

.section-title {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--c-heading);
    text-align: center;
    margin-bottom: var(--sp-3);
    line-height: 1.2;
}

.section-subtitle {
    text-align: center;
    color: var(--c-text-muted);
    max-width: 680px;
    margin: 0 auto var(--sp-12);
    font-size: var(--fs-lg);
    line-height: 1.6;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff);
    font-weight: 700;
    border: none;
    border-radius: var(--r-full);
    cursor: pointer;
    transition: all var(--tr-base);
    text-decoration: none;
    white-space: nowrap;
}

.btn--primary {
    background: var(--c-primary);
    color: #fff;
    padding: var(--sp-2) var(--sp-5);
    font-size: var(--fs-sm);
}

.btn--primary:hover {
    background: #0090e0;
    color: #fff;
    box-shadow: var(--shadow-glow);
}

.btn--accent {
    background: var(--c-accent);
    color: #fff;
    padding: var(--sp-4) var(--sp-8);
    font-size: var(--fs-lg);
}

.btn--accent:hover {
    background: var(--c-accent-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}

.btn--large {
    padding: var(--sp-4) var(--sp-8);
    font-size: var(--fs-lg);
}

.btn--jumbo {
    padding: var(--sp-5) var(--sp-10);
    font-size: var(--fs-xl);
}

/* ========== HEADER ========== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(11, 17, 32, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-border);
    transition: transform var(--tr-base);
}

.header--hidden {
    transform: translateY(-100%);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: var(--sp-3);
}

.header__logo {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--c-heading);
    font-weight: 800;
    font-size: var(--fs-lg);
    text-decoration: none;
    min-width: 0;
    flex: 1 1 auto;
}

.header__logo:hover {
    color: var(--c-heading);
}

.header__logo-image {
    width: min(600px, 100%);
    height: auto;
}

.header__logo-fallback {
    max-width: 100%;
    white-space: nowrap;
}

.header__logo-icon {
    flex-shrink: 0;
}

.logo-dot {
    color: var(--c-primary);
}

.header__cta {
    flex-shrink: 0;
    gap: var(--sp-2);
}

.header__cta svg {
    flex-shrink: 0;
}

/* ========== HERO ========== */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: calc(64px + var(--sp-10)) 0 var(--sp-16);
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(0, 163, 255, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(255, 107, 53, 0.08) 0%, transparent 50%),
        var(--c-bg);
}

.hero__bg-overlay {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 780px;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: rgba(255, 107, 53, 0.12);
    border: 1px solid rgba(255, 107, 53, 0.3);
    color: var(--c-accent);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 600;
    margin-bottom: var(--sp-6);
    animation: fadeInUp 0.6s ease both;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--c-accent);
    border-radius: 50%;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.6);
    }
}

.hero h1 {
    font-size: var(--fs-3xl);
    font-weight: 900;
    color: var(--c-heading);
    line-height: 1.15;
    margin-bottom: var(--sp-6);
    animation: fadeInUp 0.6s 0.1s ease both;
}

.hero__sub {
    font-size: var(--fs-lg);
    color: var(--c-text);
    line-height: 1.7;
    margin-bottom: var(--sp-8);
    animation: fadeInUp 0.6s 0.2s ease both;
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    animation: fadeInUp 0.6s 0.3s ease both;
}

.hero__micro {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== TRUST BAR ========== */
.trust-bar {
    background: var(--c-bg-alt);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding: var(--sp-6) 0;
}

.trust-bar__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
}

.trust-bar__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-text);
}

.trust-bar__item svg {
    flex-shrink: 0;
}

/* ========== SERVICES ========== */
.services {
    padding: var(--sp-16) 0;
    background: var(--c-bg);
}

.services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

.service-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-8);
    transition: all var(--tr-base);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.service-card:hover {
    border-color: var(--c-primary);
    box-shadow: var(--shadow-glow);
    transform: translateY(-4px);
}

.service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--r-md);
    background: rgba(0, 163, 255, 0.08);
    margin-bottom: var(--sp-5);
}

.service-card h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-heading);
    margin-bottom: var(--sp-3);
}

.service-card p {
    color: var(--c-text-muted);
    line-height: 1.7;
}

#emergency-drain-cleaning .service-card__icon {
    background: rgba(255, 107, 53, 0.1);
}

/* ========== CTA BAND ========== */
.cta-band {
    padding: var(--sp-12) 0;
    background:
        linear-gradient(135deg, rgba(0, 163, 255, 0.08) 0%, rgba(255, 107, 53, 0.08) 100%),
        var(--c-bg-alt);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}

.cta-band--alt {
    background:
        linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(0, 163, 255, 0.05) 100%),
        var(--c-bg-alt);
}

.cta-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-6);
}

.cta-band__text h2 {
    font-size: var(--fs-2xl);
    font-weight: 800;
    color: var(--c-heading);
    margin-bottom: var(--sp-3);
}

.cta-band__text p {
    color: var(--c-text-muted);
    font-size: var(--fs-lg);
    max-width: 520px;
}

/* ========== WHY CHOOSE US ========== */
.why-us {
    padding: var(--sp-16) 0;
    background: var(--c-bg);
}

.why-us__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

.why-us__card {
    text-align: center;
    padding: var(--sp-8);
    border-radius: var(--r-lg);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    transition: all var(--tr-base);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.why-us__card:hover {
    border-color: var(--c-primary);
    box-shadow: var(--shadow-glow);
    transform: translateY(-4px);
}

.why-us__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 163, 255, 0.08);
    color: var(--c-primary);
    margin-bottom: var(--sp-5);
}

.why-us__card h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-heading);
    margin-bottom: var(--sp-3);
}

.why-us__card p {
    color: var(--c-text-muted);
    line-height: 1.7;
}

/* ========== SERVICE AREAS ========== */
.service-areas {
    padding: var(--sp-16) 0;
    background: var(--c-bg-alt);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}

.service-areas__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
}

.area-chip {
    padding: var(--sp-2) var(--sp-5);
    background: rgba(0, 163, 255, 0.08);
    border: 1px solid rgba(0, 163, 255, 0.2);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-primary);
    transition: all var(--tr-fast);
}

.area-chip:hover {
    background: rgba(0, 163, 255, 0.15);
    border-color: var(--c-primary);
}

.service-areas__note {
    text-align: center;
    color: var(--c-text-muted);
    font-size: var(--fs-base);
}

.service-areas__note a {
    color: var(--c-accent);
    font-weight: 700;
}

/* ========== HOW IT WORKS ========== */
.how-it-works {
    padding: var(--sp-16) 0;
    background: var(--c-bg);
}

.steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.step {
    text-align: center;
    padding: var(--sp-6);
    max-width: 340px;
    position: relative;
}

.step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary), #0077CC);
    color: #fff;
    font-size: var(--fs-xl);
    font-weight: 800;
    margin-bottom: var(--sp-4);
    box-shadow: 0 0 20px var(--c-primary-glow);
}

.step h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--c-heading);
    margin-bottom: var(--sp-2);
}

.step p {
    color: var(--c-text-muted);
    line-height: 1.6;
}

.step p a {
    font-weight: 700;
    color: var(--c-accent);
}

.step__connector {
    width: 2px;
    height: 32px;
    background: linear-gradient(to bottom, var(--c-primary), transparent);
}

/* ========== FAQ ========== */
.faq {
    padding: var(--sp-16) 0;
    background: var(--c-bg-alt);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}

.faq__list {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.faq__item {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    transition: border-color var(--tr-fast);
    overflow: hidden;
}

.faq__item[open] {
    border-color: var(--c-primary);
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    cursor: pointer;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--c-heading);
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
    transition: color var(--tr-fast);
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question:hover {
    color: var(--c-primary);
}

.faq__chevron {
    flex-shrink: 0;
    transition: transform var(--tr-base);
}

.faq__item[open] .faq__chevron {
    transform: rotate(180deg);
}

.faq__answer {
    padding: 0 var(--sp-6) var(--sp-6);
    animation: faqSlide 0.25s ease;
}

.faq__answer p {
    color: var(--c-text-muted);
    line-height: 1.7;
}

@keyframes faqSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== FINAL CTA ========== */
.final-cta {
    padding: var(--sp-20) 0;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255, 107, 53, 0.10) 0%, transparent 70%),
        var(--c-bg);
}

.final-cta__inner {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.final-cta h2 {
    font-size: var(--fs-3xl);
    font-weight: 900;
    color: var(--c-heading);
    margin-bottom: var(--sp-5);
    line-height: 1.15;
}

.final-cta p {
    color: var(--c-text);
    font-size: var(--fs-lg);
    line-height: 1.7;
    margin-bottom: var(--sp-8);
}

.final-cta__subtext {
    display: block;
    margin-top: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

/* ========== FOOTER ========== */
.footer {
    background: var(--c-bg-alt);
    border-top: 1px solid var(--c-border);
    padding: var(--sp-12) 0 0;
    /* Extra bottom padding to clear sticky CTA on mobile */
    padding-bottom: 80px;
}

.footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    padding-bottom: var(--sp-8);
}

.footer__logo {
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--c-heading);
    text-decoration: none;
    display: block;
    margin-bottom: var(--sp-4);
}

.footer__logo:hover {
    color: var(--c-heading);
}

.footer__disclaimer {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: 1.7;
    border-left: 3px solid var(--c-accent);
    padding-left: var(--sp-4);
}

.footer__contact h3,
.footer__links h3 {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--c-heading);
    margin-bottom: var(--sp-3);
}

.footer__contact a {
    color: var(--c-accent);
    font-size: var(--fs-xl);
}

.footer__contact a:hover {
    color: var(--c-accent-hover);
}

.footer__contact p {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    margin-top: var(--sp-2);
}

.footer__links ul {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.footer__links a {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    transition: color var(--tr-fast);
}

.footer__links a:hover {
    color: var(--c-primary);
}

.footer__bottom {
    border-top: 1px solid var(--c-border);
    padding: var(--sp-5) 0;
}

.footer__bottom p {
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

/* ========== STICKY MOBILE CTA ========== */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: var(--sp-3);
    background: rgba(11, 17, 32, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--c-border);
    transform: translateY(100%);
    transition: transform var(--tr-base);
}

.sticky-cta--visible {
    transform: translateY(0);
}

.sticky-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    width: 100%;
    padding: var(--sp-4);
    background: var(--c-accent);
    color: #fff;
    font-family: var(--ff);
    font-size: var(--fs-lg);
    font-weight: 700;
    border: none;
    border-radius: var(--r-full);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--tr-fast);
    box-shadow: 0 -4px 20px rgba(255, 107, 53, 0.3);
}

.sticky-cta__btn:hover {
    background: var(--c-accent-hover);
    color: #fff;
}

/* ========== SCROLL ANIMATIONS ========== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================
   RESPONSIVE BREAKPOINTS — Full Device Coverage
   320px  → Extra-small phones (iPhone SE, Galaxy S mini)
   480px  → Small phones / phablets (standard phones)
   640px  → Large phones landscape / small tablets
   768px  → Tablets portrait (iPad mini, standard tablets)
   1024px → Tablets landscape / small laptops
   1280px → Laptops / standard desktops
   1440px → Large desktops / ultra-wide
   ========================================================== */

/* ---------- EXTRA-SMALL PHONES (≤ 374px) ---------- */
@media (max-width: 374px) {
    :root {
        --fs-base: 0.875rem;
        --fs-sm: 0.75rem;
        --fs-xs: 0.6875rem;
        --fs-lg: 1rem;
        --fs-xl: 1.25rem;
        --fs-2xl: 1.5rem;
        --fs-3xl: 1.875rem;
        --fs-4xl: 2.25rem;
    }

    .container {
        padding: 0 var(--sp-3);
    }

    .header__inner {
        height: 56px;
    }

    .header__logo {
        font-size: 0.7rem;
        gap: var(--sp-1);
    }

    .header__logo-image {
        width: 300px;
    }

    .header__logo-fallback {
        font-size: 0.72rem !important;
        gap: 6px !important;
    }

    .header__logo-icon {
        width: 24px;
        height: 24px;
    }

    .header__cta {
        min-width: 44px;
        min-height: 44px;
        padding: var(--sp-2);
        border-radius: 50%;
    }

    .header__cta-text {
        display: none;
    }

    .header__cta svg {
        width: 18px;
        height: 18px;
    }

    .btn--primary {
        padding: var(--sp-1) var(--sp-2);
        font-size: var(--fs-sm);
    }

    .hero {
        min-height: auto;
        padding: calc(56px + var(--sp-8)) 0 var(--sp-10);
    }

    .hero h1 {
        font-size: var(--fs-2xl);
    }

    .hero__badge {
        font-size: var(--fs-xs);
        padding: var(--sp-1) var(--sp-3);
    }

    .hero__sub {
        font-size: var(--fs-sm);
    }

    .hero__actions .btn--accent {
        width: 100%;
        justify-content: center;
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--fs-sm);
    }

    .trust-bar__inner {
        grid-template-columns: 1fr;
        gap: var(--sp-3);
    }

    .trust-bar__item {
        font-size: var(--fs-xs);
    }

    .service-card {
        padding: var(--sp-5);
    }

    .service-card h3 {
        font-size: var(--fs-lg);
    }

    .service-card p {
        font-size: var(--fs-sm);
    }

    .section-title {
        font-size: var(--fs-xl);
    }

    .section-subtitle {
        font-size: var(--fs-sm);
    }

    .why-us__card {
        padding: var(--sp-5);
    }

    .why-us__icon-wrap {
        width: 56px;
        height: 56px;
    }

    .area-chip {
        font-size: var(--fs-xs);
        padding: var(--sp-1) var(--sp-3);
    }

    .step {
        padding: var(--sp-4);
        max-width: 280px;
    }

    .step__number {
        width: 40px;
        height: 40px;
        font-size: var(--fs-lg);
    }

    .faq__question {
        padding: var(--sp-4);
        font-size: var(--fs-sm);
    }

    .faq__answer {
        padding: 0 var(--sp-4) var(--sp-4);
    }

    .faq__answer p {
        font-size: var(--fs-sm);
    }

    .final-cta {
        padding: var(--sp-12) 0;
    }

    .final-cta h2 {
        font-size: var(--fs-2xl);
    }

    .final-cta p {
        font-size: var(--fs-sm);
    }

    .btn--jumbo {
        padding: var(--sp-4) var(--sp-6);
        font-size: var(--fs-lg);
    }

    .cta-band__text h2 {
        font-size: var(--fs-xl);
    }

    .cta-band__text p {
        font-size: var(--fs-sm);
    }

    .footer__logo {
        font-size: var(--fs-lg);
    }

    .footer__disclaimer {
        font-size: var(--fs-xs);
    }

    .sticky-cta {
        padding: var(--sp-2);
        padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
    }

    .sticky-cta__btn {
        font-size: var(--fs-base);
        padding: var(--sp-3);
    }
}

/* ---------- SMALL PHONES (375px–479px) — Default mobile base ---------- */
@media (min-width: 375px) and (max-width: 479px) {

    .header__inner {
        gap: var(--sp-2);
    }

    .header__logo {
        font-size: 0.7rem;
    }

    .header__logo-image {
        width: 450px;
    }

    .header__logo-fallback {
        font-size: 0.82rem !important;
        gap: 6px !important;
    }

    .header__cta {
        min-width: 44px;
        min-height: 44px;
        padding: var(--sp-2);
        border-radius: 50%;
    }

    .header__cta-text {
        display: none;
    }

    .hero {
        min-height: auto;
        padding: calc(64px + var(--sp-8)) 0 var(--sp-12);
    }

    .hero h1 {
        font-size: var(--fs-2xl);
    }

    .hero__actions .btn--accent {
        width: 100%;
        justify-content: center;
    }

    .trust-bar__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-3);
    }

    .section-title {
        font-size: var(--fs-xl);
    }

    .cta-band__text h2 {
        font-size: var(--fs-xl);
    }

    .final-cta h2 {
        font-size: var(--fs-2xl);
    }

    .btn--jumbo {
        padding: var(--sp-4) var(--sp-6);
        font-size: var(--fs-lg);
    }

    .sticky-cta {
        padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- PHABLETS / LARGE PHONES (480px–639px) ---------- */
@media (min-width: 480px) and (max-width: 639px) {
    .hero h1 {
        font-size: var(--fs-3xl);
    }

    .hero__actions {
        flex-direction: row;
        align-items: center;
    }

    .trust-bar__inner {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-4);
    }

    .section-title {
        font-size: var(--fs-2xl);
    }

    .cta-band__text h2 {
        font-size: var(--fs-2xl);
    }

    .final-cta h2 {
        font-size: var(--fs-3xl);
    }

    .services__grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }

    .why-us__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sticky-cta {
        padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- SMALL TABLETS / LANDSCAPE PHONES (640px–767px) ---------- */
@media (min-width: 640px) and (max-width: 767px) {
    .hero h1 {
        font-size: var(--fs-3xl);
    }

    .hero__actions {
        flex-direction: row;
        align-items: center;
    }

    .trust-bar__inner {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--sp-3);
    }

    .trust-bar__item {
        flex-direction: column;
        text-align: center;
        font-size: var(--fs-xs);
    }

    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-us__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-title {
        font-size: var(--fs-2xl);
    }

    .cta-band__inner {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
    }

    .cta-band__text h2 {
        font-size: var(--fs-2xl);
    }

    .footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-6);
    }

    .footer__brand {
        grid-column: 1 / -1;
    }

    .sticky-cta {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }

    .sticky-cta--visible {
        transform: translateX(-50%) translateY(0);
    }
}

/* ---------- TABLETS PORTRAIT (768px+) ---------- */
@media (min-width: 768px) {
    .container {
        padding: 0 var(--sp-6);
    }

    .hero h1 {
        font-size: var(--fs-4xl);
    }

    .hero__actions {
        flex-direction: row;
        align-items: center;
    }

    .trust-bar__inner {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--sp-6);
    }

    .trust-bar__item {
        flex-direction: column;
        text-align: center;
    }

    .services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-us__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-band__inner {
        flex-direction: row;
        text-align: left;
        justify-content: space-between;
    }

    .steps {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .step__connector {
        width: 40px;
        height: 2px;
        align-self: center;
        background: linear-gradient(to right, var(--c-primary), transparent);
    }

    .footer__inner {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .section-title {
        font-size: var(--fs-3xl);
    }

    .cta-band__text h2 {
        font-size: var(--fs-3xl);
    }

    /* Sticky CTA becomes narrower and centered on tablets */
    .sticky-cta {
        max-width: 420px;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }

    .sticky-cta--visible {
        transform: translateX(-50%) translateY(0);
    }
}

/* ---------- TABLETS LANDSCAPE / SMALL LAPTOPS (1024px+) ---------- */
@media (min-width: 1024px) {
    .container {
        padding: 0 var(--sp-8);
    }

    .hero h1 {
        font-size: 3.25rem;
    }

    .hero__sub {
        font-size: var(--fs-xl);
    }

    .services__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .why-us__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .steps {
        flex-wrap: nowrap;
    }

    .final-cta h2 {
        font-size: var(--fs-4xl);
    }

    /* Hide sticky CTA on desktop — header CTA is enough */
    .sticky-cta {
        display: none;
    }

    .footer {
        padding-bottom: 0;
    }
}

/* ---------- STANDARD DESKTOPS (1280px+) ---------- */
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
        padding: 0 var(--sp-10);
    }

    .hero h1 {
        font-size: 3.5rem;
    }

    .hero__content {
        max-width: 860px;
    }

    .services__grid {
        gap: var(--sp-8);
    }

    .why-us__grid {
        gap: var(--sp-8);
    }

    .service-card {
        padding: var(--sp-10);
    }

    .why-us__card {
        padding: var(--sp-10);
    }

    .section-title {
        font-size: var(--fs-4xl);
    }

    .final-cta h2 {
        font-size: 3.5rem;
    }

    .step {
        max-width: 240px;
    }

    .step__connector {
        width: 60px;
    }
}

/* ---------- LARGE DESKTOPS / ULTRA-WIDE (1440px+) ---------- */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
        padding: 0 var(--sp-12);
    }

    .hero {
        padding: calc(64px + var(--sp-16)) 0 var(--sp-20);
    }

    .hero h1 {
        font-size: 4rem;
    }

    .hero__sub {
        font-size: 1.375rem;
    }

    .hero__content {
        max-width: 920px;
    }

    .services,
    .why-us,
    .how-it-works {
        padding: var(--sp-20) 0;
    }

    .services__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-10);
    }

    .service-card {
        padding: var(--sp-12);
    }

    .final-cta {
        padding: 6rem 0;
    }

    .final-cta h2 {
        font-size: 4rem;
    }
}

/* ---------- LANDSCAPE ORIENTATION FIX (short viewports) ---------- */
@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        min-height: auto;
        padding: calc(56px + var(--sp-6)) 0 var(--sp-8);
    }

    .hero h1 {
        font-size: var(--fs-2xl);
        margin-bottom: var(--sp-3);
    }

    .hero__badge {
        margin-bottom: var(--sp-3);
    }

    .hero__sub {
        margin-bottom: var(--sp-4);
        font-size: var(--fs-base);
    }
}

/* ---------- TOUCH TARGET MINIMUMS (coarse pointers) ---------- */
@media (pointer: coarse) {

    .btn,
    .faq__question,
    .sticky-cta__btn,
    .footer__links a,
    a[href^="tel:"] {
        min-height: 44px;
    }

    .faq__question {
        padding: var(--sp-5) var(--sp-6);
    }

    .area-chip {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ========== PRINT STYLES ========== */
@media print {

    .header,
    .sticky-cta,
    .cta-band,
    .final-cta {
        display: none;
    }

    body {
        color: #000;
        background: #fff;
    }

    .service-card,
    .why-us__card,
    .faq__item {
        border-color: #ccc;
        background: #fff;
        break-inside: avoid;
    }

    a[href^="tel:"]::after {
        content: " (" attr(href) ")";
    }
}

/* ========== COOKIE BANNER ========== */
.cookie-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1100;
    background: rgba(17, 24, 39, 0.98);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 1rem 0;
    transform: translateY(100%);
    transition: transform 250ms ease;
}
.cookie-banner.cookie-banner--visible { transform: translateY(0); }
.cookie-banner__inner {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
}
.cookie-banner__text {
    font-size: 0.875rem; color: #9CA3AF;
    flex: 1; min-width: 220px;
}
.cookie-banner__text a { color: #00A3FF; text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 0.75rem; align-items: center; }
.cookie-banner__decline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    color: #9CA3AF; padding: 0.5rem 1rem;
    font-size: 0.875rem; border-radius: 9999px;
    cursor: pointer; font-family: var(--ff);
    transition: all 250ms ease;
}
.cookie-banner__decline:hover { border-color: #9CA3AF; color: #E5E7EB; }

/* ========== FOOTER LEGAL ROW ========== */
.footer__bottom__inner {
    display: flex; align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem;
}
.footer__legal { display: flex; gap: 1.25rem; }
.footer__legal a {
    font-size: 0.75rem; color: #9CA3AF;
    transition: color 150ms ease;
}
.footer__legal a:hover { color: #00A3FF; }

@media (max-width: 639px) {
    .cookie-banner__inner { flex-direction: column; align-items: flex-start; }
    .footer__bottom__inner { flex-direction: column; text-align: center; }
    .footer__legal { justify-content: center; }
}