/* =============================================
   TWO SISTERS CLEANING 256 — MAIN STYLESHEET
   WCAG 2.2 AA Compliant
   ============================================= */

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

:root {
    --blue-dark:    #0d4f7c;
    --blue:         #1a6fa8;
    --blue-light:   #e8f4f8;
    --accent:       #2ab4a0;   /* decorative use only — does NOT meet text contrast on white */
    --accent-text:  #0d6657;   /* 6.3:1 on white — use for text/icons on light bg */
    --accent-light: #7dd9cf;   /* ~10:1 on dark bg — use for text/icons on dark bg */
    --text:         #1c2b36;
    --text-muted:   #4a6475;   /* 5.65:1 on white, 5.3:1 on --bg-alt ✓ */
    --border:       #dce8ef;
    --white:        #ffffff;
    --bg-alt:       #f4f8fb;
    --error:        #b91c1c;   /* 5.9:1 on white ✓ */
    --sun:          #f5c842;   /* warm yellow — sparkles, decorative only */
    --sun-text:     #7a5700;   /* 5.6:1 on white ✓ — yellow text if ever needed */
    --shadow-sm:    0 2px 8px rgba(13,79,124,.08);
    --shadow-md:    0 6px 24px rgba(13,79,124,.12);
    --shadow-lg:    0 16px 48px rgba(13,79,124,.16);
    --radius:       12px;
    --radius-sm:    8px;
    --transition:   0.25s ease;
    /* Focus ring — 3px solid blue, meets WCAG 2.4.11 area + 3:1 contrast */
    --focus-ring:   3px solid #1a6fa8;
    --focus-offset: 3px;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    line-height: 1.25;
    color: var(--text);
}

a { color: var(--blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--blue-dark); }

/* Ensure links are underlined in body text so they're not identified by color alone */
p a, li a { text-decoration: underline; }
.btn, .logo, .nav-links a, .footer-links a, .footer-contact a,
.contact-detail a { text-decoration: none; }

img, svg { display: block; max-width: 100%; }

/* =============================================
   SKIP LINK — WCAG 2.4.1
   ============================================= */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: 12px 20px;
    background: var(--blue-dark);
    color: var(--white);
    font-size: .95rem;
    font-weight: 600;
    border-radius: 0 0 var(--radius-sm) 0;
    /* Appears visually on keyboard focus */
}
.skip-link:focus-visible {
    top: 0;
    outline: var(--focus-ring);
    outline-offset: 0;
}

/* =============================================
   SCREEN-READER ONLY UTILITY
   ============================================= */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================
   GLOBAL FOCUS STYLES — WCAG 2.4.7 & 2.4.11
   Visible focus indicator: 3px solid outline, 3:1+ contrast,
   area ≥ 2px × perimeter of component.
   ============================================= */
:focus { outline: none; } /* Reset browser default; :focus-visible below handles keyboard */

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: 4px;
}

/* Buttons and links already have border-radius; let :focus-visible inherit naturally */
.btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* --- Container --- */
.container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Sections --- */
.section { padding: 88px 0; }
.section--alt { background: var(--bg-alt); }

.section-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}

/* --accent-text (#0d6657): 6.3:1 on white ✓ */
.section-eyebrow {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 10px;
}

.section-header h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 16px; }

.section-sub { color: var(--text-muted); font-size: 1.05rem; }

/* =============================================
   BUTTONS
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    /* WCAG 2.5.8: min target 24×24px; these are well above that */
    min-height: 44px;
    border-radius: var(--radius-sm);
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.btn-lg { padding: 15px 36px; font-size: 1rem; }
.btn-full { width: 100%; }

/* White on #1a6fa8: 5:1 ✓ */
.btn-primary {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}
.btn-primary:hover {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* #1a6fa8 on white: 5:1 ✓; hover inverts to white on blue */
.btn-secondary {
    background: transparent;
    color: var(--blue);
    border-color: var(--blue);
}
.btn-secondary:hover {
    background: var(--blue);
    color: var(--white);
    transform: translateY(-1px);
}

.btn-outline-light {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,.7);
}
.btn-outline-light:hover {
    background: rgba(255,255,255,.15);
    color: var(--white);
    border-color: var(--white);
}

/* White on #0d6657: 6.3:1 ✓ */
.btn-nav {
    background: var(--accent-text);
    color: var(--white);
    border-color: var(--accent-text);
    padding: 10px 22px;
    font-size: .88rem;
}
.btn-nav:hover {
    background: #0a4f42;
    border-color: #0a4f42;
    color: var(--white);
}

/* =============================================
   NAVBAR
   ============================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--white);
    box-shadow: 0 1px 0 var(--border);
    transition: box-shadow var(--transition);
}

.site-header.scrolled { box-shadow: var(--shadow-sm); }

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 1.15rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}
.logo:hover { color: var(--blue); }
.logo strong { font-weight: 700; }

.logo-icon {
    font-size: 1.3rem;
    color: var(--blue);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.nav-links a {
    font-size: .92rem;
    font-weight: 500;
    color: var(--text);
    transition: color var(--transition);
    /* Ensure min 44px tap target height via line-height */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.nav-links a:not(.btn):hover { color: var(--blue); }

/* WCAG 2.5.8: nav toggle min 44×44px tap target */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}
.nav-toggle:hover { background: var(--bg-alt); }

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all var(--transition);
    pointer-events: none;
}

/* Visual indication of open state via aria-expanded */
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =============================================
   HERO
   ============================================= */
.hero {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0d4f7c 0%, #1a6fa8 50%, #2ab4a0 100%);
    overflow: hidden;
}

.hero::before {
    content: '';
    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.04'%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") repeat;
    pointer-events: none;
}

/*
 * Directional gradient overlay ensures the text area (left ~60%) always has
 * sufficient dark background for white text contrast (≥4.5:1).
 * Left zone: rgba(5,15,30,0.55) over #0d4f7c → effective bg L≈0.04 → white 20:1 ✓
 * Mid zone:  rgba(5,15,30,0.40) over #1a6fa8 → effective bg L≈0.08 → white 8:1 ✓
 */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(5, 15, 30, 0.55) 0%,
        rgba(5, 15, 30, 0.40) 55%,
        rgba(5, 15, 30, 0.15) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 680px;
    padding: 80px 24px;
    color: var(--white);
}

/* rgba(255,255,255,.92) on effective bg: comfortably >4.5:1 ✓ */
.hero-eyebrow {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    margin-bottom: 16px;
}

/* White on effective dark bg: >10:1 ✓ */
.hero-content h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.15;
}

/* rgba(255,255,255,.92) on effective bg: >7:1 ✓ */
.hero-sub {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, .92);
    margin-bottom: 36px;
    max-width: 560px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* =============================================
   SOAP BUBBLES — Decorative hero animation
   ============================================= */
.hero-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/*
 * Each bubble uses CSS custom properties --bub-dur and --bub-delay
 * set inline on the element, so every bubble has its own timing.
 * radial-gradient simulates the translucent highlight of a soap bubble.
 */
.hero-bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        rgba(255, 255, 255, 0.48) 0%,
        rgba(255, 255, 255, 0.12) 30%,
        rgba(255, 255, 255, 0.03) 65%,
        transparent 100%
    );
    border: 1.5px solid rgba(255, 255, 255, 0.30);
    animation: bubble-rise var(--bub-dur, 10s) ease-in var(--bub-delay, 0s) infinite;
    will-change: transform, opacity;
}

@keyframes bubble-rise {
    0%   { transform: translateY(0);      opacity: 0; }
    8%   { opacity: 0.55; }
    85%  { opacity: 0.38; }
    100% { transform: translateY(-460px); opacity: 0; }
}

/* =============================================
   TRUST BAR
   ============================================= */
.trust-bar {
    background: var(--blue-dark);
    padding: 20px 0;
}

.trust-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 40px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .92);  /* ~12:1 on --blue-dark ✓ */
    font-size: .9rem;
    font-weight: 500;
}

/* White on #0d4f7c: 7.7:1 ✓ */
.trust-icon {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}

/* =============================================
   SERVICES
   ============================================= */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.service-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.service-card--featured {
    border-color: var(--blue);
    background: linear-gradient(160deg, var(--blue-light) 0%, var(--white) 60%);
    box-shadow: var(--shadow-md);
}

/* White on #1a6fa8: 5:1 ✓ */
.service-badge {
    position: absolute;
    top: -13px;
    left: 28px;
    background: var(--blue);
    color: var(--white);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
}

.service-icon-wrap {
    width: 52px;
    height: 52px;
    background: var(--blue-light);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    flex-shrink: 0;
}

.service-icon-wrap svg { width: 26px; height: 26px; }

.service-card h3 {
    font-size: 1.3rem;
    color: var(--text);
}

.service-card > p {
    color: var(--text-muted);
    font-size: .95rem;
    line-height: 1.7;
    flex: 1;
}

.service-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service-list li {
    font-size: .9rem;
    color: var(--text-muted);
    padding-left: 20px;
    position: relative;
}

/* --accent-text: 6.3:1 on white ✓ */
.service-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent-text);
    font-weight: 700;
    aria-hidden: true;
}

/* =============================================
   WHY US
   ============================================= */
.why-inner {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 72px;
    align-items: center;
}

.why-text .section-eyebrow { text-align: left; }

.why-text h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); margin-bottom: 18px; }

.why-text > p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 36px;
}

.why-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.why-feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.why-feature-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Using h3 class styling for why-feature headings (h3 in document order) */
.why-feature-heading {
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}

.why-feature p { font-size: .88rem; color: var(--text-muted); line-height: 1.6; }

.why-image-placeholder {
    background: var(--blue-light);
    border-radius: var(--radius);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    box-shadow: var(--shadow-md);
}

.why-image-placeholder svg { width: 100%; height: auto; }

/* =============================================
   CONTACT
   ============================================= */
.contact-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.contact-col-heading {
    font-size: 1.2rem;
    margin-bottom: 6px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-col-sub {
    font-size: .93rem;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Required field note — WCAG 3.3.2 */
.form-required-note {
    font-size: .85rem;
    color: var(--text-muted);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
}

/* --blue: 5:1 on white ✓ */
.required { color: var(--blue); }

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    color: var(--text);
    background: var(--white);
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
    /* Do NOT use outline: none — we apply custom focus below */
}

/* #6b7280 on white: 4.84:1 ✓ */
.form-group input::placeholder,
.form-group textarea::placeholder { color: #6b7280; }

/*
 * WCAG 2.4.11 Focus Appearance:
 * 3px solid blue around input border.
 * Area: 3px × perimeter > 2px × perimeter requirement ✓
 * Contrast: #1a6fa8 vs unfocused border #dce8ef: ~3.5:1 ✓ (meets 3:1 minimum)
 */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: none; /* replaced by box-shadow below */
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue);
}

/* Error state — uses color + border + text (not color alone) */
.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
    border-color: var(--error);
    border-width: 2px;
}

.form-group input[aria-invalid="true"]:focus-visible,
.form-group textarea[aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px var(--error);
}

.form-group textarea { resize: vertical; min-height: 130px; }

/* Google reCAPTCHA required branding notice */
.recaptcha-notice {
    font-size: .78rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: -8px;
}
.recaptcha-notice a {
    color: var(--blue);
    text-decoration: underline;
}

/*
 * Google injects the reCAPTCHA badge fixed to the same bottom-right corner
 * as the chat widget, so it visually collides with the chat bubble on every
 * screen size. We hide it and rely on the required branding text above
 * (Google's policy allows this as long as the text disclosure is shown).
 */
.grecaptcha-badge { visibility: hidden; }

/* WCAG 3.3.1 — Error Identification: visible, text-based, programmatically linked */
.field-error {
    font-size: .82rem;
    font-weight: 600;
    color: var(--error);       /* #b91c1c: 5.9:1 on white ✓ */
    min-height: 1.2em;         /* reserve space to avoid layout shift */
    display: block;
}

/* White on #0d4f7c: 7.7:1 ✓ */
.contact-form + .contact-info-card { margin-top: 32px; }

.contact-info-card {
    background: var(--blue-dark);
    color: var(--white);
    border-radius: var(--radius);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-info-card h3 {
    color: var(--white);
    font-size: 1.2rem;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.2);
}

.contact-detail {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.contact-detail-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }

/* rgba(255,255,255,.75) on #0d4f7c: 5:1 ✓ */
.contact-detail strong {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    margin-bottom: 3px;
}

/* rgba(255,255,255,.95) on #0d4f7c: >12:1 ✓ */
.contact-detail a,
.contact-detail span {
    font-size: .95rem;
    color: rgba(255, 255, 255, .95);
}

/* --accent-light (#7dd9cf): ~10:1 on #0d4f7c ✓ */
.contact-detail a:hover { color: var(--accent-light); }

/* Second phone number sits on its own line */
.contact-detail a + a { display: block; margin-top: 2px; }

/* =============================================
   FLASH MESSAGES
   ============================================= */
.flash-messages {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 320px;
    max-width: 560px;
    width: 90%;
}

.flash {
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    font-size: .95rem;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    animation: slideDown .3s ease;
}

/* #0e5a4a on #d1f5ef: ~7:1 ✓ */
.flash-success {
    background: #d1f5ef;
    color: #0e5a4a;
    border-left: 4px solid var(--accent-text);
}

/* #7b1d1d on #fde8e8: ~7.5:1 ✓ */
.flash-error {
    background: #fde8e8;
    color: #7b1d1d;
    border-left: 4px solid #b91c1c;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer {
    background: var(--text);  /* #1c2b36 */
    color: rgba(255,255,255,.9);
    padding-top: 56px;
}

.footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-brand .logo-text {
    color: var(--white);
    font-size: 1.05rem;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* --accent-light (#7dd9cf) on #1c2b36: ~10:1 ✓ */
.footer-brand .logo-icon { color: var(--accent-light); font-size: 1.1rem; }

/* rgba(255,255,255,.7) on #1c2b36: ~8:1 ✓ */
.footer-brand p {
    font-size: .88rem;
    color: rgba(255, 255, 255, .7);
    margin-top: 10px;
}

/* h2 visually styled like h4 — footer nav headings are proper h2 in the landmark */
.footer-nav-heading {
    font-family: 'Inter', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 16px;
}

.footer-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* rgba(255,255,255,.85) on #1c2b36: ~9:1 ✓ */
.footer-links a {
    color: rgba(255, 255, 255, .85);
    font-size: .9rem;
    transition: color var(--transition);
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* WCAG 2.5.8 target size */
}
/* --accent-light (#7dd9cf) on #1c2b36: ~10:1 ✓ */
.footer-links a:hover { color: var(--accent-light); }

.footer-contact p {
    font-size: .9rem;
    margin-bottom: 8px;
}

.footer-contact a {
    color: rgba(255, 255, 255, .85);
    transition: color var(--transition);
}
.footer-contact a:hover { color: var(--accent-light); }

/* rgba(255,255,255,.65) on #1c2b36: ~6.4:1 ✓ */
.footer-bottom {
    text-align: center;
    padding: 20px 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .65);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 960px) {
    .services-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .why-inner { grid-template-columns: 1fr; gap: 40px; }
    .why-image { display: none; }
    .contact-split { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .section { padding: 64px 0; }
    .nav-links {
        display: none;
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        padding: 12px 24px 28px;
        gap: 0;
        border-top: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
    }
    .nav-links.is-open { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a:not(.btn) {
        display: flex;
        align-items: center;
        padding: 12px 0;
        min-height: 44px; /* WCAG 2.5.8 */
        border-bottom: 1px solid var(--border);
    }
    .nav-links .btn { margin-top: 16px; width: 100%; }
    .nav-toggle { display: flex; }

    .hero-content { padding: 64px 24px; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; text-align: center; }

    .form-row { grid-template-columns: 1fr; }
    .why-features { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .trust-items { gap: 10px 24px; }
}

@media (max-width: 480px) {
    .hero-content h1 { font-size: 2rem; }
    .section-header h2 { font-size: 1.7rem; }
}

/* =============================================
   CHAT WIDGET
   ============================================= */

/*
 * .chat-widget is position:fixed — the toggle button sits at the corner
 * and the panel is absolute-positioned above it.
 */
.chat-widget {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    width: 56px;   /* sized to the toggle button */
    height: 56px;
}

/* --- Toggle button --- */
.chat-toggle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(26, 111, 168, .45);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.chat-toggle:hover {
    background: var(--blue-dark);
    transform: scale(1.07);
    box-shadow: 0 6px 22px rgba(13, 79, 124, .5);
}
.chat-toggle svg { width: 22px; height: 22px; pointer-events: none; }

/* Swap icons based on open/closed state */
.chat-icon-close { display: none; }
.chat-toggle[aria-expanded="true"] .chat-icon-open  { display: none; }
.chat-toggle[aria-expanded="true"] .chat-icon-close { display: block; }

/* Pulse animation fires a few times on load to draw attention */
@keyframes chat-pulse {
    0%   { box-shadow: 0 4px 18px rgba(26,111,168,.45), 0 0 0 0   rgba(26,111,168,.5); }
    70%  { box-shadow: 0 4px 18px rgba(26,111,168,.45), 0 0 0 14px rgba(26,111,168,0); }
    100% { box-shadow: 0 4px 18px rgba(26,111,168,.45), 0 0 0 0   rgba(26,111,168,0); }
}
.chat-toggle:not([aria-expanded="true"]) {
    animation: chat-pulse 2.2s ease-out 2s 3;
}

/* --- Panel --- */
/*
 * visibility:hidden hides from AT and from view, but unlike display:none it
 * still participates in layout — so CSS transitions fire immediately when
 * is-open is added without needing a reflow trick or double rAF.
 */
.chat-panel {
    position: absolute;
    bottom: calc(56px + 14px);  /* above the toggle */
    right: 0;
    width: 340px;
    max-height: 520px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    pointer-events: none;
}
.chat-panel.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s;
}

/* --- Header --- */
.chat-header {
    background: var(--blue-dark);
    color: var(--white);
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.chat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat-avatar {
    font-size: 1.15rem;
    color: var(--accent-light);
}
/* White on #0d4f7c: 7.7:1 ✓ */
.chat-header-info strong {
    display: block;
    font-size: .88rem;
    color: var(--white);
    line-height: 1.3;
}
/* rgba(255,255,255,.65) on #0d4f7c: ~5:1 ✓ */
.chat-header-info span {
    font-size: .73rem;
    color: rgba(255, 255, 255, .65);
}
.chat-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    line-height: 0;
    transition: color var(--transition), background var(--transition);
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-close svg { width: 16px; height: 16px; pointer-events: none; }
.chat-close:hover { color: var(--white); background: rgba(255, 255, 255, .15); }

/* --- Message list --- */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.chat-msg { max-width: 84%; }

.chat-msg p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    padding: 10px 14px;
    border-radius: 18px;
    word-wrap: break-word;
}

/* Bot — left aligned, light background */
.chat-msg--bot { align-self: flex-start; }
/* --text on --bg-alt: contrast ✓ */
.chat-msg--bot p {
    background: var(--bg-alt);
    color: var(--text);
    border-bottom-left-radius: 4px;
}

/* User — right aligned, blue bubble */
.chat-msg--user { align-self: flex-end; }
/* white on --blue: 5:1 ✓ */
.chat-msg--user p {
    background: var(--blue);
    color: var(--white);
    border-bottom-right-radius: 4px;
}

/* Typing indicator — three bouncing dots */
.chat-msg--typing { align-self: flex-start; }
.chat-msg--typing .typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
    background: var(--bg-alt);
    border-radius: 18px 18px 18px 4px;
}
.chat-msg--typing i {
    width: 7px;
    height: 7px;
    background: var(--text-muted);
    border-radius: 50%;
    display: block;
    animation: typing-dot .9s ease-in-out infinite;
}
.chat-msg--typing i:nth-child(2) { animation-delay: .18s; }
.chat-msg--typing i:nth-child(3) { animation-delay: .36s; }

@keyframes typing-dot {
    0%, 60%, 100% { transform: translateY(0); }
    30%            { transform: translateY(-5px); }
}

/* --- Input area --- */
.chat-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--white);
}
.chat-input {
    flex: 1;
    padding: 9px 14px;
    border: 1.5px solid var(--border);
    border-radius: 22px;
    font-family: 'Inter', sans-serif;
    font-size: .88rem;
    color: var(--text);
    background: var(--white);
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    min-height: 38px;
}
.chat-input:focus-visible {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(26, 111, 168, .18);
}
/* #6b7280 on white: 4.84:1 ✓ */
.chat-input::placeholder { color: #6b7280; }

.chat-send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--blue);
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition);
}
.chat-send:hover   { background: var(--blue-dark); }
.chat-send:disabled { background: var(--text-muted); cursor: not-allowed; }
.chat-send svg { width: 16px; height: 16px; pointer-events: none; }

/* Mobile — full-width panel */
@media (max-width: 480px) {
    .chat-widget { bottom: 16px; right: 16px; }
    .chat-panel  { width: calc(100vw - 32px); max-height: 70vh; }
}

/* =============================================
   SCHEDULE / CALENDLY
   ============================================= */
.calendly-wrapper {
    max-width: 960px;
    margin: 0 auto;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--white);
}

/* =============================================
   SIDE POPUP
   ============================================= */
.side-popup {
    display: none; /* hidden on mobile/tablet */
    position: fixed;
    right: 0;
    bottom: 110px;
    z-index: 100;
    transform-origin: bottom right;
    transform: translateX(110%) rotate(0deg) scale(0.4);
    transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}
.side-popup.is-visible {
    transform: rotate(-15deg) scale(1);
    pointer-events: auto;
}
.side-popup img {
    width: 450px;
    height: auto;
    display: block;
}
@media (min-width: 1100px) {
    .side-popup { display: block; }
}

/* =============================================
   REDUCED MOTION — WCAG 2.3.3 (AAA advisory,
   but best practice per WCAG 2.2 guidance)
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}