/* GENERATED by tools-build-css.py — do not edit. Edit the sources in ORDER. */

/* ===== style.css ===== */
/* Belt-and-suspenders: prevent any child element from causing horizontal
   page scroll. If any component overflows its width, it clips at the viewport
   edge instead of pushing the body sideways. Vertical scroll still works. */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Halo Build Co. — Dark + Terra Cotta
   Vibe: Ethereal Glass (OLED dark + muted clay glow)
   Motion: 8/10 — magnetic buttons, staggered reveals, blur masking
   Skills: Emil Kowalski + High-End Visual + Design Taste + Superpowers */

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

:root {
    --bg: #0e1117;
    --bg-card: #141820;
    --bg-elevated: #1a1f2a;
    --text: #f0f0f5;
    --text-muted: #8888a0;
    --accent: #C45A3C;
    --accent-bright: #E08868;
    --accent-dim: #A84830;
    --accent-glow: rgba(196, 90, 60, 0.2);
    --accent-glow-soft: rgba(196, 90, 60, 0.06);
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(196, 90, 60, 0.25);
    --radius: 1.25rem;
    --radius-lg: 1.75rem;
    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Light Theme ────────────────────────────────────────────── */
[data-theme="light"] {
    --bg: #FAFBFE;
    --bg-card: #ffffff;
    --bg-elevated: #F0F2F8;
    --text: #111827;
    --text-muted: #6B7280;
    --accent: #C45A3C;
    --accent-bright: #D4735C;
    --accent-dim: #A84830;
    --accent-glow: rgba(196, 90, 60, 0.3);
    --accent-glow-soft: rgba(196, 90, 60, 0.06);
    --border: rgba(0,0,0,0.08);
    --border-hover: rgba(196, 90, 60, 0.3);
}
[data-theme="light"] .ambient-orb { opacity: 0.15; }
[data-theme="light"] .cursor-glow { background: radial-gradient(circle, rgba(196,90,60,0.05) 0%, transparent 70%); }
[data-theme="light"] .noise-overlay { opacity: 0.015; }
[data-theme="light"] .nav-inner {
    background: rgba(255,255,255,0.8);
    box-shadow: 0 4px 30px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .service-card-inner,
[data-theme="light"] .testimonial-inner,
[data-theme="light"] .cta-inner,
[data-theme="light"] .info-card-inner,
[data-theme="light"] .contact-form-inner {
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .hero-title-accent {
    background: linear-gradient(135deg, var(--accent), #E08868);
    -webkit-background-clip: text; background-clip: text;
}
[data-theme="light"] .stat-number {
    background: linear-gradient(135deg, var(--text), var(--accent));
    -webkit-background-clip: text; background-clip: text;
}
[data-theme="light"] .footer {
    background: #111827; color: rgba(255,255,255,0.6);
}
[data-theme="light"] .footer .logo-text { color: white; }
[data-theme="light"] .mobile-menu { background: rgba(255,255,255,0.96); }
[data-theme="light"] .mobile-menu-links a { color: var(--text); }
[data-theme="light"] .testimonial-stars { color: #F59E0B; }
[data-theme="light"] .btn-secondary { color: var(--text); border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .hero-image-glow { background: radial-gradient(ellipse, rgba(196,90,60,0.08) 0%, transparent 70%); }

/* ── Focus Styles (accessibility) ───────────────────────────── */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}
.btn-primary:focus-visible, .nav-cta:focus-visible, .btn-secondary:focus-visible {
    outline-offset: 4px;
    border-radius: 100px;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    cursor: default;
}

::selection {
    background: var(--accent);
    color: white;
}

/* ── Ambient Orbs (floating glow background) ───────────────── */
.ambient-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    animation: float 20s ease-in-out infinite;
}
.orb-1 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(196,90,60,0.15) 0%, transparent 70%);
    top: -10%; left: -10%;
    animation-delay: 0s;
}
.orb-2 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(196,120,80,0.1) 0%, transparent 70%);
    top: 40%; right: -15%;
    animation-delay: -7s;
    animation-duration: 25s;
}
.orb-3 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(196,90,60,0.08) 0%, transparent 70%);
    bottom: 10%; left: 20%;
    animation-delay: -13s;
    animation-duration: 30s;
}
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(40px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(30px, 40px) scale(1.03); }
}

/* ── Cursor Glow ───────────────────────────────────────────── */
.cursor-glow {
    position: fixed;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196,90,60,0.10) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition: opacity 500ms;
    opacity: 0;
}
body:hover .cursor-glow { opacity: 1; }

/* ── Noise ─────────────────────────────────────────────────── */
.noise-overlay {
    position: fixed; inset: 0; z-index: 9999;
    pointer-events: none; opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
    position: fixed; top: 1.25rem; left: 50%;
    transform: translateX(-50%); z-index: 100;
    width: calc(100% - 2.5rem); max-width: 1100px;
}
.nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 1rem 0.7rem 1.25rem;
    background: rgba(14,17,23,0.75);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: 100px;
    box-shadow: 0 0 40px rgba(196,90,60,0.03), 0 4px 20px rgba(0,0,0,0.3);
}
.nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--text); }
.logo-chevron { flex-shrink: 0; transition: filter 500ms var(--ease); }
.nav-logo:hover .logo-chevron { filter: drop-shadow(0 0 8px rgba(196,90,60,0.5)); }
.logo-text-group { display: flex; align-items: baseline; gap: 0; }
.logo-text {
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.1rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
}
.logo-text-accent { color: var(--accent); }
.logo-dot { color: var(--accent); margin: 0 0.5rem; font-size: 0.7rem; }
.logo-sub {
    font-family: 'Outfit', sans-serif; font-weight: 600;
    font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--accent);
}
.nav-links { display: flex; gap: 0.125rem; }
.nav-links a {
    text-decoration: none; color: var(--text-muted); font-size: 0.875rem;
    font-weight: 500; padding: 0.5rem 1rem; border-radius: 100px;
    transition: color 400ms var(--ease), background 400ms var(--ease);
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.05); }

/* Nav CTA with glow */
.nav-cta {
    position: relative; text-decoration: none; color: white;
    padding: 0.6rem 1.5rem; border-radius: 100px;
    font-size: 0.875rem; font-weight: 600;
    background: var(--accent); overflow: hidden;
    transition: transform 500ms var(--ease), box-shadow 500ms var(--ease);
    box-shadow: 0 0 20px var(--accent-glow);
}
.nav-cta:hover { box-shadow: 0 0 40px rgba(196,90,60,0.6); transform: scale(1.03); }
.nav-cta:active { transform: scale(0.97); }
.nav-cta-glow {
    position: absolute; inset: -2px; border-radius: inherit;
    background: linear-gradient(135deg, var(--accent-bright), var(--accent-dim));
    z-index: -1; opacity: 0;
    transition: opacity 500ms;
}
.nav-cta:hover .nav-cta-glow { opacity: 1; }

/* Theme Toggle */
.theme-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 100px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--border);
    cursor: pointer; color: var(--text-muted);
    transition: background 400ms var(--ease), color 400ms, border-color 400ms, transform 500ms var(--ease);
    flex-shrink: 0; position: relative; z-index: 10;
}
.theme-toggle:hover {
    background: var(--accent-glow-soft); color: var(--accent-bright);
    border-color: var(--border-hover);
}
.theme-toggle:active { transform: scale(0.9); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle { background: rgba(0,0,0,0.04); }

/* Call button — matches theme-toggle geometry, accent-toned to read as an action */
.nav-tel {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 100px;
    background: rgba(196, 90, 60, 0.08); border: 1px solid rgba(196, 90, 60, 0.22);
    cursor: pointer; color: var(--accent);
    text-decoration: none;
    transition: background 400ms var(--ease), color 400ms, border-color 400ms,
                transform 500ms var(--ease), box-shadow 400ms var(--ease);
    flex-shrink: 0; position: relative; z-index: 10;
}
.nav-tel:hover {
    background: rgba(196, 90, 60, 0.18);
    border-color: rgba(196, 90, 60, 0.5);
    color: var(--accent-bright);
    box-shadow: 0 0 24px rgba(196, 90, 60, 0.28);
    transform: scale(1.05);
}
.nav-tel:active { transform: scale(0.92); }
.nav-tel:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
[data-theme="light"] .nav-tel {
    background: rgba(196, 90, 60, 0.08);
    border-color: rgba(196, 90, 60, 0.28);
}

/* Mobile "Call" menu item — plain text, terra cotta */
.mobile-tel {
    color: var(--accent) !important;
    font-weight: 600;
}

.nav-hamburger {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-hamburger span {
    display: block; width: 22px; height: 1.5px; background: var(--text);
    border-radius: 2px; transition: transform 400ms var(--ease), opacity 300ms;
    transform-origin: center;
}
.nav-hamburger.active span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-hamburger.active span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Mobile menu — z-index: 99 sits BELOW the nav (z-index: 100) so the hamburger
   inside the nav stays tappable to close the menu. Padding-top pushes the link
   list clear of the nav's ~80px zone so items never render underneath the
   translucent header panel. Overflow-y:auto keeps every link reachable on
   short landscape viewports where 9 stacked 2rem links would otherwise clip. */
.mobile-menu {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(5,5,8,0.95); backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 6rem 1rem calc(2rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease);
}
.mobile-menu.active { opacity: 1; pointer-events: auto; }
.mobile-menu-links { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%; }
.mobile-menu-links a {
    text-decoration: none; font-family: 'Outfit', sans-serif; font-size: 2rem;
    font-weight: 600; color: var(--text); padding: 0.5rem 1rem;
    opacity: 0; transform: translateY(1.5rem);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease), color 300ms, text-shadow 300ms;
}
.mobile-menu.active .mobile-menu-links a { opacity: 1; transform: translateY(0); }
.mobile-menu.active .mobile-menu-links a:nth-child(1) { transition-delay: 100ms; }
.mobile-menu.active .mobile-menu-links a:nth-child(2) { transition-delay: 150ms; }
.mobile-menu.active .mobile-menu-links a:nth-child(3) { transition-delay: 200ms; }
.mobile-menu.active .mobile-menu-links a:nth-child(4) { transition-delay: 250ms; }
.mobile-menu.active .mobile-menu-links a:nth-child(5) { transition-delay: 300ms; }
.mobile-menu-links a:hover { color: var(--accent-bright); text-shadow: 0 0 30px var(--accent-glow); }
.mobile-cta {
    margin-top: 1rem; font-size: 1.25rem !important;
    background: var(--accent); color: white !important;
    padding: 0.75rem 2.5rem !important; border-radius: 100px;
    box-shadow: 0 0 30px var(--accent-glow);
}

/* ── Eyebrow ───────────────────────────────────────────────── */
.section-eyebrow, .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 1rem; font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--accent-bright); border-radius: 100px;
    background: var(--accent-glow-soft);
    border: 1px solid rgba(196,90,60,0.1);
    margin-bottom: 1.5rem;
}
.eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
    min-height: 100dvh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 8rem 2rem 4rem; max-width: 1400px; margin: 0 auto;
    position: relative; z-index: 2;
}
.hero-content {
    display: grid; grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem; align-items: center; width: 100%;
}
.hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.75rem, 5vw, 4.5rem); font-weight: 800;
    line-height: 1.05; letter-spacing: -0.04em; margin-bottom: 1.5rem;
}
.hero-title-accent {
    display: inline; position: relative;
    background: linear-gradient(135deg, var(--accent-bright), #D4735C);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.title-underline {
    position: absolute; bottom: -4px; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
    border-radius: 2px;
    animation: shimmer-line 3s ease-in-out infinite;
}
@keyframes shimmer-line {
    0%, 100% { opacity: 0.6; transform: scaleX(0.8); transform-origin: left; }
    50% { opacity: 1; transform: scaleX(1); }
}
.hero-subtitle {
    font-size: 1.125rem; color: var(--text-muted);
    max-width: 480px; line-height: 1.7; margin-bottom: 2.5rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }

/* ── Glow Buttons ──────────────────────────────────────────── */
.glow-btn { position: relative; overflow: hidden; }
.btn-glow {
    position: absolute; inset: -1px; border-radius: inherit;
    opacity: 0; z-index: 0;
    background: linear-gradient(135deg, var(--accent-bright), #D4735C, var(--accent));
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
    transition: opacity 500ms var(--ease);
}
.glow-btn:hover .btn-glow { opacity: 1; }
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn-primary {
    display: inline-flex; align-items: center; gap: 0.75rem;
    background: var(--accent); color: white;
    padding: 1rem 1.25rem 1rem 1.75rem; border-radius: 100px;
    text-decoration: none; font-weight: 600; font-size: 0.95rem;
    box-shadow: 0 0 30px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.1);
    transition: transform 500ms var(--ease), box-shadow 500ms var(--ease);
    position: relative; overflow: hidden; z-index: 1;
}
.btn-primary .btn-text, .btn-primary .btn-icon-wrap { position: relative; z-index: 2; }
.btn-primary:hover {
    box-shadow: 0 0 40px rgba(196,90,60,0.3), 0 0 80px rgba(196,90,60,0.1);
    transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0) scale(0.97); filter: blur(0.5px); }
.btn-lg { padding: 1.15rem 1.5rem 1.15rem 2rem; font-size: 1rem; }

.btn-icon-wrap {
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; background: rgba(255,255,255,0.15);
    border-radius: 100px; position: relative; z-index: 2;
    transition: transform 500ms var(--ease), background 500ms;
}
.btn-primary:hover .btn-icon-wrap {
    transform: translateX(3px) translateY(-2px) scale(1.1);
    background: rgba(255,255,255,0.25);
}

.btn-secondary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: transparent; color: var(--text); padding: 1rem 1.75rem;
    border-radius: 100px; text-decoration: none; font-weight: 500;
    font-size: 0.95rem; border: 1px solid var(--border);
    position: relative; overflow: hidden;
    transition: transform 500ms var(--ease), border-color 500ms, background 500ms, color 500ms;
}
.btn-secondary:hover {
    border-color: var(--accent);
    background: rgba(196,90,60,0.08);
    color: var(--accent-bright);
}
.btn-secondary:active { transform: scale(0.97); }
/* Disable glow overlay on secondary buttons */
.btn-secondary .btn-glow { display: none; }

/* Stats */
.hero-stats { display: flex; align-items: center; gap: 2rem; }
.stat {
    padding: 0.75rem 1rem; border-radius: 1rem; cursor: default;
    transition: transform 500ms var(--ease), background 500ms;
}
.stat:hover {
    transform: translateY(-4px) scale(1.05);
    background: var(--accent-glow-soft);
}
.stat-number {
    display: block; font-family: 'Outfit', sans-serif;
    font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--text), var(--accent-bright));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    transition: transform 500ms var(--ease);
}
.stat:hover .stat-number { transform: scale(1.08); }
.stat-label {
    font-size: 0.8rem; color: var(--text-muted); font-weight: 500;
    transition: color 500ms;
}
.stat:hover .stat-label { color: var(--accent-bright); }
.stat-divider { width: 1px; height: 2.5rem; background: var(--border); }

/* Hero image with tilt */
.hero-image-shell {
    position: relative; border-radius: var(--radius-lg); padding: 0.375rem;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    transition: transform 600ms var(--ease), border-color 600ms;
}
.hero-image-shell:hover { border-color: var(--border-hover); }
.hero-image-inner {
    background: var(--bg-elevated); border-radius: calc(var(--radius-lg) - 0.25rem);
    aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
}
.hero-image-placeholder {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    color: var(--text-muted); font-size: 0.875rem; opacity: 0.4;
}
.hero-parallax-img {
    width: 100%; height: 120%; object-fit: cover;
    border-radius: calc(var(--radius-lg) - 0.25rem);
    position: absolute; top: 0; left: 0;
    will-change: transform;
    transition: transform 100ms linear;
}
.hero-image-glow {
    position: absolute; bottom: -30%; left: 10%; width: 80%; height: 60%;
    background: radial-gradient(ellipse, rgba(196,90,60,0.15) 0%, transparent 70%);
    pointer-events: none; filter: blur(40px);
}

/* Scroll line */
.hero-scroll-line {
    width: 1px; height: 60px; background: var(--border);
    margin-top: 3rem; position: relative; overflow: hidden; border-radius: 1px;
}
.scroll-line-inner {
    width: 100%; height: 20px; background: var(--accent);
    border-radius: 1px; box-shadow: 0 0 8px var(--accent-glow);
    animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse {
    0% { transform: translateY(-20px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(60px); opacity: 0; }
}

/* ── Section Common ────────────────────────────────────────── */
.section-container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 2; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800;
    letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 1rem;
}
.section-subtitle { color: var(--text-muted); font-size: 1.1rem; max-width: 500px; margin: 0 auto; }

/* ── Glow Cards ────────────────────────────────────────────── */
.glow-card {
    position: relative; border-radius: var(--radius-lg);
    transition: transform 600ms var(--ease), box-shadow 600ms var(--ease);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.glow-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(196,90,60,0.08), 0 8px 16px rgba(0,0,0,0.06);
}
.card-glow {
    position: absolute; inset: -1px; border-radius: inherit;
    background: linear-gradient(135deg, rgba(196,90,60,0.2), transparent 50%, rgba(196,120,80,0.1));
    opacity: 0; transition: opacity 600ms var(--ease);
    z-index: 0;
}
.glow-card:hover .card-glow { opacity: 1; }
.card-border {
    position: absolute; inset: 0; border-radius: inherit;
    border: 1px solid var(--border); z-index: 1;
    transition: border-color 600ms var(--ease);
}
.glow-card:hover .card-border { border-color: var(--border-hover); }

/* ── Services ──────────────────────────────────────────────── */
.services { padding: 8rem 0; position: relative; z-index: 2; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.service-card { display: flex; }
a.service-card,
a.service-card:link,
a.service-card:visited,
a.service-card:hover,
a.service-card:active { color: inherit; text-decoration: none; cursor: pointer; }
a.service-card h3,
a.service-card p { color: inherit; text-decoration: none; }
a.service-card:hover .service-card-inner h3 { color: var(--accent); transition: color 300ms var(--ease); }
.service-card .card-glow, .service-card .card-border { position: absolute; inset: 0; }

.service-card-inner {
    position: relative; z-index: 2;
    background: var(--bg-card); border-radius: calc(var(--radius-lg) - 1px);
    padding: 2.5rem 2rem; height: 100%;
    display: flex; flex-direction: column;
}
.service-card-inner p { flex: 1; }
.service-icon {
    display: flex; align-items: center; justify-content: center;
    width: 3.5rem; height: 3.5rem;
    background: var(--accent-glow-soft); border-radius: 1rem;
    color: var(--accent-bright); margin-bottom: 1.5rem;
    border: 1px solid rgba(196,90,60,0.1);
    transition: box-shadow 600ms var(--ease), background 600ms;
}
.glow-card:hover .service-icon {
    box-shadow: 0 0 25px var(--accent-glow);
    background: rgba(196,90,60,0.12);
}
.service-card { cursor: pointer; }
.service-card-inner h3 {
    font-family: 'Outfit', sans-serif; font-size: 1.2rem;
    font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.75rem;
}
.service-card-inner p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.65; }
.card-arrow {
    position: absolute; top: 2rem; right: 2rem;
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 100px;
    background: rgba(255,255,255,0.03); color: var(--text-muted);
    border: 1px solid var(--border);
    opacity: 0; transform: translateX(-8px);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease), border-color 500ms, color 500ms;
}
.glow-card:hover .card-arrow {
    opacity: 1; transform: translateX(0);
    border-color: var(--border-hover); color: var(--accent-bright);
}

/* ── CTA ───────────────────────────────────────────────────── */
.cta-section { padding: 2rem 0 8rem; position: relative; z-index: 2; }
.cta-card { border-radius: var(--radius-lg); }
.cta-glow-bg {
    background: radial-gradient(ellipse at 30% 50%, rgba(196,90,60,0.15), transparent 60%),
                radial-gradient(ellipse at 70% 50%, rgba(196,120,80,0.1), transparent 60%);
    opacity: 1 !important;
}
.cta-inner {
    position: relative; z-index: 2;
    background: var(--bg-card); border-radius: calc(var(--radius-lg) - 1px);
    padding: 6rem 3rem; text-align: center;
}
.cta-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
    letter-spacing: -0.04em; margin-bottom: 1rem;
}
.cta-subtitle {
    color: var(--text-muted); font-size: 1.1rem;
    max-width: 460px; margin: 0 auto 2.5rem;
}

/* ── Testimonials ──────────────────────────────────────────── */
.testimonials { padding: 4rem 0 8rem; position: relative; z-index: 2; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.testimonial-card { display: flex; }
.testimonial-inner {
    position: relative; z-index: 2;
    background: var(--bg-card); border-radius: calc(var(--radius-lg) - 1px);
    padding: 2.5rem 2rem; height: 100%;
    display: flex; flex-direction: column;
}
.testimonial-stars { display: flex; gap: 2px; color: var(--accent-bright); margin-bottom: 1.5rem; }
.testimonial-inner blockquote {
    font-size: 1rem; line-height: 1.7; flex: 1; margin-bottom: 2rem; font-style: normal;
}
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.author-avatar {
    width: 2.5rem; height: 2.5rem; border-radius: 100px;
    background: var(--accent-glow-soft); border: 1px solid rgba(196,90,60,0.1);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem; color: var(--accent-bright);
}
.author-name { display: block; font-weight: 600; font-size: 0.9rem; }
.author-loc { display: block; font-size: 0.8rem; color: var(--text-muted); }

/* ── Footer ────────────────────────────────────────────────── */
.footer {
    background: var(--bg-card); border-top: 1px solid var(--border);
    color: rgba(255,255,255,0.6); padding: 5rem 0 0;
    position: relative; z-index: 2;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4rem; padding-bottom: 4rem; border-bottom: 1px solid var(--border); }
.footer .logo-text { color: white; }
.footer-desc { margin-top: 1rem; font-size: 0.9rem; line-height: 1.7; max-width: 320px; color: rgba(255,255,255,0.58); }
.footer-links-group { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-links-group h4 { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.9rem; color: white; margin-bottom: 0.5rem; }
.footer-links-group a {
    color: rgba(255,255,255,0.58); text-decoration: none; font-size: 0.875rem;
    padding: 0.3rem 0; /* lifts tap target from ~20px to ~30px (WCAG 2.5.8 min 24px) */
    transition: color 400ms var(--ease), text-shadow 400ms;
}
.footer-links-group a:hover { color: var(--accent-bright); text-shadow: 0 0 20px var(--accent-glow); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 2rem 0; font-size: 0.8rem; color: rgba(255,255,255,0.58); }
.footer-legal { display: flex; gap: 2rem; }
.footer-legal a { color: rgba(255,255,255,0.62); text-decoration: none; transition: color 400ms; }
.footer-legal a:hover { color: var(--accent-bright); }

/* ── Scroll Reveal ─────────────────────────────────────────── */
[data-reveal] {
    opacity: 0; transform: translateY(2.5rem);
    filter: blur(4px);
    transition: opacity 800ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 800ms cubic-bezier(0.23, 1, 0.32, 1),
                filter 800ms cubic-bezier(0.23, 1, 0.32, 1);
}
[data-reveal].revealed {
    opacity: 1; transform: translateY(0); filter: blur(0);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero-content { grid-template-columns: 1fr; gap: 3rem; }
    .hero-right { display: none; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .nav-links, .nav-cta { display: none; }
    .nav-hamburger { display: flex; }
    .hero { padding: 7rem 1.25rem 4rem; min-height: auto; }
    .hero-title { font-size: 2.5rem; }
    .hero-stats { flex-wrap: wrap; gap: 1.5rem; }
    .stat-divider { display: none; }
    .services { padding: 5rem 0; }
    .services-grid, .testimonials-grid { grid-template-columns: 1fr; }
    .cta-inner { padding: 4rem 1.5rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
    .section-container { padding: 0 1.25rem; }
    .ambient-orb { opacity: 0.3; }
    .cursor-glow { display: none; }
}

/* ─── Accessibility: skip-to-main-content link (WCAG 2.4.1) ─────
 * Invisible until keyboard focus, then jumps into view at top-left.
 * Lets keyboard/screen-reader users bypass the entire nav to reach
 * the page's main content on first Tab press. */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 9999;
    background: var(--accent);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: top 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.skip-to-main:focus {
    top: 12px;
    outline: 2px solid white;
    outline-offset: 2px;
}

/* ─── Accessibility: prefers-reduced-motion (WCAG 2.3.3) ────────
 * Users who enable "Reduce motion" in OS settings (often vestibular
 * disorders / motion sensitivity) should see the site without the
 * ambient orbs, cursor glow, reveal animations, and long transitions. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .ambient-orb,
    .cursor-glow {
        display: none !important;
    }
    /* Reveal-on-scroll elements should be shown immediately */
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ─── Service Areas section (local SEO / homepage neighborhoods) ── */
.service-areas {
    padding: 8rem 0;
    position: relative;
    z-index: 2;
}
.service-areas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 3rem;
}
.service-area-card {
    position: relative;
    text-decoration: none;
    color: inherit;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 400ms var(--ease-smooth);
}
.service-area-card:hover {
    transform: translateY(-3px);
}
.service-area-inner {
    position: relative;
    z-index: 2;
    padding: 1.75rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-lg) - 1px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 400ms var(--ease);
}
.service-area-card:hover .service-area-inner {
    border-color: var(--border-hover);
}
.service-area-inner h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
}
.service-area-inner p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
    flex-grow: 1;
}
.service-area-link {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--accent);
    margin-top: auto;
    transition: color 300ms;
}
.service-area-card:hover .service-area-link {
    color: var(--accent-bright);
}

@media (max-width: 960px) {
    .service-areas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .service-areas { padding: 5rem 0; }
    .service-areas-grid { grid-template-columns: 1fr; gap: 1rem; }
    .service-area-inner { padding: 1.5rem 1.25rem; }
}

/* Hero urgency banner — emergency framing (SXO fix) */
.hero-urgency {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0.5rem;
    padding: 0.65rem 1.15rem;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 100px;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.45;
}
.hero-urgency .urgency-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: urgency-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
.hero-urgency strong {
    color: var(--accent-bright);
    font-weight: 700;
}
@keyframes urgency-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-glow); }
    50% { opacity: 0.6; box-shadow: 0 0 0 6px transparent; }
}
@media (max-width: 560px) {
    .hero-urgency {
        font-size: 0.82rem;
        padding: 0.55rem 1rem;
        gap: 0.5rem;
    }
}


/* ===== pages.css ===== */
/* Pages — shared styles for skylights, wildfire, contact */

/* Active nav link */
.nav-active { color: var(--accent-bright) !important; }

/* Page Hero (shorter than homepage) */
.page-hero {
    padding: 10rem 0 5rem;
    position: relative; z-index: 2;
}
.page-hero-content { max-width: 720px; }

/* Gallery */
.gallery-section { padding: 2rem 0 8rem; position: relative; z-index: 2; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.gallery-grid-2 { grid-template-columns: repeat(2, 1fr); }

.gallery-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 600ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}
.gallery-item:hover {
    transform: translateY(-6px);
    box-shadow:
        0 25px 80px -10px rgba(196, 90, 60, 0.45),
        0 0 60px rgba(196, 90, 60, 0.3);
}

.gallery-img-wrap {
    position: relative; z-index: 2;
    border-radius: calc(var(--radius-lg) - 1px);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--bg-card);
}
.gallery-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 800ms var(--ease), filter 800ms;
    filter: brightness(0.9);
}
.gallery-item:hover .gallery-img-wrap img {
    transform: scale(1.05);
    filter: brightness(1);
}

/* Feature video/image */
.feature-section { padding: 0 0 6rem; position: relative; z-index: 2; }
.feature-inner {
    position: relative; z-index: 2;
    border-radius: calc(var(--radius-lg) - 1px);
    overflow: hidden; background: var(--bg-card);
}
.feature-video, .feature-img {
    width: 100%; display: block;
    border-radius: calc(var(--radius-lg) - 1px);
    max-height: 500px; object-fit: cover;
}

/* Services 3-col override */
.services-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Contact */
.contact-section { padding: 0 0 8rem; position: relative; z-index: 2; }

.contact-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 1.5rem;
    align-items: start;
}

.contact-form-inner {
    position: relative; z-index: 2;
    background: var(--bg-card);
    border-radius: calc(var(--radius-lg) - 1px);
    padding: 3rem;
}

.contact-form-inner h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem; font-weight: 700;
    letter-spacing: -0.02em; margin-bottom: 2rem;
}

.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.form-group {
    display: flex; flex-direction: column; gap: 0.5rem;
}
.form-group label {
    font-size: 0.8rem; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.05em;
}
.form-group input,
.form-group select,
.form-group textarea {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 400ms var(--ease), box-shadow 400ms;
    outline: none;
    -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow-soft), 0 0 20px rgba(59,130,246,0.08);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255,255,255,0.2);
}
.form-group select {
    cursor: pointer;
    color: var(--text-muted);
}
.form-group select option {
    background: var(--bg-card);
    color: var(--text);
}
.form-group textarea { resize: vertical; min-height: 120px; }

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

.contact-info {
    display: flex; flex-direction: column; gap: 1.25rem;
}

.info-card-inner {
    position: relative; z-index: 2;
    background: var(--bg-card);
    border-radius: calc(var(--radius-lg) - 1px);
    padding: 2rem;
}
.info-card-inner h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem; font-weight: 700;
    margin-bottom: 0.5rem;
}
.info-card-inner p {
    color: var(--text-muted); font-size: 0.9rem; line-height: 1.6;
}
.info-link {
    color: var(--accent-bright); text-decoration: none;
    transition: text-shadow 400ms;
}
.info-link:hover { text-shadow: 0 0 20px var(--accent-glow); }
.info-sub { font-size: 0.8rem !important; margin-top: 0.25rem; opacity: 0.6; }

/* Placeholder images — shimmer loading state */
.placeholder-img {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.75rem;
    width: 100%; height: 100%; min-height: 250px;
    background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-card) 50%, var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
    border-radius: calc(var(--radius-lg) - 1px);
    color: var(--text-muted); font-size: 0.85rem; font-weight: 500;
    border: 2px dashed var(--border);
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Form active/valid/invalid states */
.form-group input:active,
.form-group select:active,
.form-group textarea:active {
    transform: scale(0.99);
    transition: transform 120ms ease-out;
}
.form-group input:valid:not(:placeholder-shown),
.form-group textarea:valid:not(:placeholder-shown) {
    border-color: rgba(34, 197, 94, 0.3);
}
.form-group input:invalid:not(:placeholder-shown) {
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.06);
}

/* Responsive */
@media (max-width: 1024px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .services-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .page-hero { padding: 7rem 0 3rem; }
    .gallery-grid, .gallery-grid-2 { grid-template-columns: 1fr; }
    .services-grid-3 { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .contact-form-inner { padding: 2rem 1.5rem; }
}

/* Form success + error messages (Web3Forms integration) */
.form-success,
.form-error {
    display: none;
    padding: 2.5rem 2rem;
    border-radius: calc(var(--radius-lg) - 1px);
    text-align: center;
    font-family: 'Outfit', sans-serif;
    background: var(--bg-card);
    margin-top: 1.5rem;
}
.form-success {
    background: linear-gradient(135deg, rgba(34,197,94,0.08), var(--bg-card));
    border: 1px solid rgba(34,197,94,0.2);
    color: var(--text);
}
.form-success svg { color: rgb(34,197,94); margin: 0 auto 1rem; display: block; }
.form-success h3 {
    font-size: 1.35rem; font-weight: 700; margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}
.form-success p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }
.form-error {
    background: linear-gradient(135deg, rgba(239,68,68,0.08), var(--bg-card));
    border: 1px solid rgba(239,68,68,0.2);
    color: var(--text);
}
.form-error a { color: var(--accent-bright); text-decoration: underline; }

/* ─── Legal pages (privacy.html, sms-terms.html) ─────────── */
.legal-section {
    padding: 3rem 0 6rem;
}
.legal-container {
    max-width: 780px;
}
.legal-container p,
.legal-container ul,
.legal-container ol {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1.15rem;
}
.legal-container p strong,
.legal-container li strong {
    color: var(--text);
    font-weight: 600;
}
.legal-container ul,
.legal-container ol {
    padding-left: 1.4rem;
}
.legal-container li {
    margin-bottom: 0.5rem;
}
.legal-container h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 2.5rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.legal-container h2:first-of-type {
    margin-top: 1.75rem;
}
.legal-container a:not(.btn-primary):not(.btn-secondary):not(.nav-cta) {
    color: var(--accent-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.legal-container a:not(.btn-primary):not(.btn-secondary):not(.nav-cta):hover {
    color: var(--accent);
}
.legal-meta {
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}
.legal-table-wrap {
    overflow-x: auto;
    margin: 1rem 0 1.5rem;
    border-radius: 10px;
    border: 1px solid var(--border);
}
.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--bg-card);
}
.legal-table th,
.legal-table td {
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.legal-table th {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: var(--text);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--bg-elevated);
}
.legal-table td {
    color: var(--text-muted);
    line-height: 1.55;
}
.legal-table td:first-child {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}
.legal-table tr:last-child td {
    border-bottom: none;
}

/* ─── TCPA consent checkbox on Get a Quote form ──────────── */
.form-consent {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 1.25rem;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-muted);
    transition: border-color 200ms;
}
.form-consent:hover {
    border-color: var(--border-hover);
}
.form-consent input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background 150ms, border-color 150ms;
}
.form-consent input[type=checkbox]:hover {
    border-color: var(--accent);
}
.form-consent input[type=checkbox]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.form-consent input[type=checkbox]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 1px;
    width: 7px;
    height: 13px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
.form-consent input[type=checkbox]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.form-consent a {
    color: var(--accent-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.form-consent a:hover {
    color: var(--accent);
}

/* Feature banner image (full-width hero-style photo on service pages) */
.feature-inner img {
    display: block;
    width: 100%;
    height: 480px;
    max-height: 60vh;
    object-fit: cover;
    filter: brightness(0.92);
    transition: filter 500ms var(--ease-smooth);
}
.feature-card:hover .feature-inner img {
    filter: brightness(1);
}
@media (max-width: 640px) {
    .feature-inner img { height: 300px; }
}

/* ─── FAQ section (FAQPage schema on service pages) ───────── */
.faq-section {
    padding: 6rem 0;
    position: relative;
    z-index: 2;
}
.faq-list {
    max-width: 780px;
    margin: 3rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 300ms;
}
.faq-item[open] {
    border-color: var(--border-hover);
}
.faq-question {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
    padding: 1.15rem 1.5rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: color 300ms;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--accent);
    transition: transform 300ms var(--ease);
    flex-shrink: 0;
}
.faq-item[open] .faq-question::after {
    transform: rotate(45deg);
}
.faq-question:hover {
    color: var(--accent-bright);
}
.faq-answer {
    padding: 0 1.5rem 1.25rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}
.faq-answer p { margin: 0; }
.faq-question:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

@media (max-width: 640px) {
    .faq-section { padding: 4rem 0; }
    .faq-question { font-size: 0.98rem; padding: 1rem 1.25rem; }
    .faq-answer { padding: 0 1.25rem 1rem; font-size: 0.9rem; }
}

/* ─── Hero price signal (roofing.html) ─── */
/* WHY: SXO audit found the $12-28K cost range was buried in a collapsed
 * FAQ details element. Surface it above the fold as a scannable module
 * so cost-conscious buyers get their answer without hunting. */
.hero-price-signal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.75rem 0 2rem;
    padding: 1.15rem 1.5rem;
    background: color-mix(in srgb, var(--bg-card) 85%, var(--accent));
    border: 1px solid var(--border);
    border-radius: 16px;
    max-width: 640px;
}
.price-signal-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.price-signal-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.price-signal-value {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    color: var(--accent-bright);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
    .hero-price-signal {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 1rem 1.15rem;
    }
    .price-signal-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border);
    }
    .price-signal-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .price-signal-value {
        font-size: 1.05rem;
    }
}

/* ═══ Motion graphic (wildfire.html "How the system works") ═══ */
/* Desktop: video with absolute-positioned label tiles.
   Mobile: video plays clean, component list renders below (see @media below). */
.motion-section { padding: 0 0 6rem; position: relative; z-index: 2; }
.motion-section .section-header { margin-bottom: 2.5rem; text-align: center; }
.motion-card { border-radius: var(--radius-lg); overflow: hidden; }
.motion-inner {
    position: relative; z-index: 2;
    border-radius: calc(var(--radius-lg) - 1px);
    overflow: hidden;
    background: #0b0e12;
}
.motion-scene {
    position: relative;
    aspect-ratio: 16/9;
    container-type: inline-size;
}
.motion-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.motion-tiles { position: absolute; inset: 0; pointer-events: none; }
.motion-tile {
    position: absolute;
    background: rgba(15, 17, 22, 0.55);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
    border: 1px solid rgba(255,255,255,0.14);
    border-left: 4px solid var(--accent);
    border-radius: 14px;
    padding: 0.75em 1.15em 0.75em 1.3em;
    color: #f0efeb;
    line-height: 1.25;
    font-size: 1cqi;
    max-width: 40%;
}
.motion-tile strong { display: block; font-weight: 700; font-size: 1.7em; letter-spacing: -0.01em; }
.motion-tile span   { display: block; font-size: 0.95em; color: rgba(240,239,235,0.6); margin-top: 0.15em; }
.motion-tile em {
    display: block; font-style: normal;
    font-size: 0.75em; color: rgba(240,160,88,0.9);
    font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; margin-bottom: 0.15em;
}
.motion-tile.opt {
    background: rgba(15, 17, 22, 0.5);
    border: 1px solid rgba(240, 160, 88, 0.4);
    border-left: 1px solid rgba(240, 160, 88, 0.4);
    padding: 0.6em 1em;
    max-width: 32%;
}
.motion-tile.tl    { top: 5%;  left: 3%; }
.motion-tile.tr    { top: 5%;  right: 3%; }
.motion-tile.ml    { top: 66%; left: 3%; }
.motion-tile.bl    { top: 80%; left: 3%; }
.motion-tile.bc    { top: 90%; left: 50%; transform: translateX(-50%); max-width: 52%; }
.motion-tile.opt-1 { top: 46%; right: 3%; }
.motion-tile.opt-2 { top: 60%; right: 3%; }
.motion-tile.opt-3 { top: 74%; right: 3%; }

.motion-mobile-list { display: none; }

@media (max-width: 720px) {
    /* Mobile: hide overlay tiles, render component list under the video */
    .motion-tiles { display: none; }
    .motion-mobile-list {
        display: block;
        padding: 1.15rem 1rem 1.25rem;
        background: var(--bg-card);
        border-top: 1px solid var(--border);
    }
    .motion-list-title {
        font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em;
        text-transform: uppercase; color: var(--text-muted);
        margin: 0 0 10px 2px;
    }
    .motion-mobile-list ul { list-style: none; padding: 0; margin: 0; }
    .motion-mobile-list li {
        position: relative;
        padding: 11px 0 11px 14px;
        border-bottom: 1px solid var(--border);
    }
    .motion-mobile-list li:last-child { border-bottom: none; }
    .motion-mobile-list li::before {
        content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
        width: 3px; border-radius: 2px; background: var(--accent);
    }
    .motion-mobile-list li strong {
        display: block; font-weight: 600; color: var(--text);
        font-size: 13.5px; letter-spacing: -0.005em;
    }
    .motion-mobile-list li span {
        display: block; color: var(--text-muted);
        font-size: 11.5px; margin-top: 2px; line-height: 1.35;
    }
    .motion-optional {
        margin-top: 12px; padding-top: 12px;
        border-top: 1px solid var(--border);
    }
    .motion-optional summary {
        cursor: pointer; list-style: none;
        display: flex; align-items: center; gap: 10px;
        font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em;
        text-transform: uppercase; color: var(--accent-bright);
        padding: 4px 0;
    }
    .motion-optional summary::-webkit-details-marker { display: none; }
    .motion-optional summary::before {
        content: "+"; width: 18px; height: 18px; border-radius: 50%;
        border: 1px solid var(--accent-bright); display: grid; place-items: center;
        font-size: 13px; line-height: 1; color: var(--accent-bright);
    }
    .motion-optional[open] summary::before { content: "\2212"; }
    .motion-optional ul { padding: 12px 0 0; }
    .motion-optional li {
        border-left: 2px solid var(--accent-bright);
        border-bottom: none;
        padding: 8px 0 8px 12px;
        margin-bottom: 6px;
    }
    .motion-optional li::before { display: none; }
    .motion-optional li:last-child { margin-bottom: 0; }
    .motion-optional li strong { font-size: 13px; }
    .motion-optional li span   { font-size: 11px; }
}


/* Nearby areas module (neighborhood landing pages) */
.nearby-areas {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    padding: 0.5rem 0 1rem;
}
.nearby-area-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: border-color 200ms, color 200ms, background 200ms;
}
.nearby-area-link:hover {
    border-color: var(--accent);
    color: var(--accent-bright);
    background: var(--accent-glow-soft);
}


/* ═══ Homepage service-area cards: 3-link version ═══ */
.service-area-links {
    display: flex;
    gap: 0.4rem;
    margin-top: 1rem;
    width: 100%;
}
.service-area-links .service-area-link {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 0.5rem 0.4rem;
    background: rgba(196, 90, 60, 0.12);
    border: 1px solid rgba(196, 90, 60, 0.25);
    border-radius: 100px;
    color: var(--accent-bright);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-top: 0;
    transition: background 200ms, border-color 200ms, color 200ms;
}
.service-area-links .service-area-link:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

/* ═══ Cross-service section on neighborhood pages ═══ */
.cross-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0 2rem;
}
@media (max-width: 640px) {
    .cross-services { grid-template-columns: 1fr; }
}
.cross-service-card {
    display: block;
    padding: 1.25rem 1.35rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.cross-service-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(196, 90, 60, 0.08);
}
.cross-service-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}
.cross-service-card:hover .cross-service-title {
    color: var(--accent-bright);
}
.cross-service-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}


/* ═══ Blog framework ═══ */
.blog-section { padding: 2rem 0 8rem; position: relative; z-index: 2; }
.post-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (max-width: 768px) {
    .post-grid { grid-template-columns: 1fr; }
}

.post-card { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-lg); overflow: hidden; }
.post-card-inner {
    position: relative; z-index: 2;
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-lg) - 1px);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 400ms;
}
.post-card:hover .post-card-inner { border-color: var(--border-hover); }
.post-card-meta {
    display: flex; gap: 0.5rem; align-items: center;
    font-size: 0.78rem; color: var(--text-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
}
.post-card-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text);
    margin: 0;
    transition: color 300ms;
}
.post-card:hover .post-card-title { color: var(--accent-bright); }
.post-card-excerpt {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    flex-grow: 1;
}
.post-card-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.25rem; }
.post-tag {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(196, 90, 60, 0.12);
    color: var(--accent-bright);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ═══ Blog article (single post) ═══ */
.blog-article { padding: 0 0 6rem; position: relative; z-index: 2; }
.blog-article-container { max-width: 760px; }
.post-meta { margin-bottom: 0.75rem; }
.post-back-link {
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 200ms;
}
.post-back-link:hover { color: var(--accent-bright); }
.post-byline {
    display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
    color: var(--text-muted); font-size: 0.9rem;
    margin-top: 1.25rem;
}
.post-byline strong { color: var(--text); font-weight: 600; }

.blog-article h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 2.5rem 0 1rem;
    line-height: 1.2;
}
.blog-article h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 1.75rem 0 0.75rem;
    line-height: 1.25;
}
.blog-article h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text);
    margin: 1.25rem 0 0.5rem;
}
.blog-article p {
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0 0 1.1rem;
}
.blog-article p strong,
.blog-article li strong {
    color: var(--text);
    font-weight: 600;
}
.blog-article a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 200ms; }
.blog-article a:hover { color: var(--accent); }
.blog-article ul,
.blog-article ol {
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0 0 1.25rem;
    padding-left: 1.4rem;
}
.blog-article li { margin-bottom: 0.5rem; }
.blog-article em { color: var(--text); font-style: italic; }

.tldr {
    background: rgba(196, 90, 60, 0.06);
    border-left: 3px solid var(--accent);
    padding: 1.25rem 1.5rem 0.75rem;
    border-radius: 0 12px 12px 0;
    margin: 2rem 0;
}
.tldr h2 {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-bright);
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}
.tldr ul { margin: 0; padding-left: 1.2rem; }
.tldr li { color: var(--text); }

.cost-example {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1.4rem;
    margin: 1.5rem 0;
}
.cost-example h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.cost-example p { margin: 0 0 0.75rem; font-size: 0.92rem; }
.cost-example ul { margin: 0; }

.post-related {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}
.post-related h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    margin: 0 0 0.75rem;
}
.post-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.post-related li { margin-bottom: 0.5rem; }

/* ═══ Velux manufacturer catalog callout (skylights.html) ═══ */
.velux-catalog-section { padding: 3rem 0 6rem; position: relative; z-index: 2; }
.velux-catalog-card {
    max-width: 1100px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}
.velux-catalog-inner {
    position: relative;
    z-index: 2;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-lg) - 1px);
    padding: 2.5rem 3rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2.5rem;
    align-items: center;
    transition: border-color 400ms var(--ease);
}
.velux-catalog-card:hover .velux-catalog-inner { border-color: var(--border-hover); }
.velux-catalog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
}
.velux-catalog-eyebrow .eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
}
.velux-catalog-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 0.75rem;
    line-height: 1.15;
    text-wrap: balance;
    max-width: 22ch;
}
.velux-catalog-desc {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 65ch;
}
.velux-catalog-btn { white-space: nowrap; }
@media (max-width: 820px) {
    .velux-catalog-inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding: 2rem 1.75rem;
    }
    .velux-catalog-title { font-size: 1.3rem; max-width: none; }
}

/* ═══ Skylights hero — two-column layout with slideshow (matches homepage floating pattern) ═══ */
.skylights-hero {
    padding: 10rem 0 5rem;
    position: relative;
    z-index: 2;
}
.skylights-hero-content {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}
.skylights-hero-left { max-width: 620px; }
.skylights-hero-right .hero-image-shell {
    padding: 0;
    background: transparent;
    border: none;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 600ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}
.skylights-hero-right .hero-image-inner {
    border-radius: var(--radius-lg);
}
.skylights-hero-right:hover .hero-image-shell {
    transform: translateY(-6px);
    box-shadow:
        0 30px 100px -10px rgba(196, 90, 60, 0.5),
        0 0 80px rgba(196, 90, 60, 0.35);
}
.skylights-slideshow-frame {
    aspect-ratio: 3/2;
    padding: 0;
}
.skylights-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: calc(var(--radius-lg) - 0.25rem);
}
.skylights-slideshow .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.skylights-slideshow .slide.active { opacity: 1; }
.slideshow-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0;
    padding: 0.15rem 0.3rem;
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 100px;
    z-index: 2;
}
.slideshow-dot {
    /* Visual dot stays 8px; padding + background-clip grow the TAP target to
       26px so it clears WCAG 2.5.8's 24px minimum without redesigning the pill. */
    width: 8px;
    height: 8px;
    padding: 9px;
    box-sizing: content-box;
    background-clip: content-box;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color 250ms, transform 250ms;
}
.slideshow-dot:hover { background-color: rgba(255, 255, 255, 0.7); transform: scale(1.15); }
.slideshow-dot.active { background-color: #ffffff; transform: scale(1.15); }
.slideshow-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1024px) {
    .skylights-hero-content { grid-template-columns: 1fr; gap: 3rem; }
    .skylights-hero-left { max-width: none; }
}
@media (max-width: 768px) {
    .skylights-hero { padding: 7rem 0 3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .skylights-slideshow .slide { transition: none; }
}

/* Custom architectural skylights footnote */
.custom-skylights-footnote {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 780px;
    margin: 2.5rem auto 0;
}
.custom-skylights-footnote strong { color: var(--text); font-weight: 600; }

/* ═══ Roofing hero — two-column layout with slideshow (mirror of skylights-hero) ═══ */
.roofing-hero {
    padding: 10rem 0 5rem;
    position: relative;
    z-index: 2;
    overflow: hidden; /* safety: nothing inside can leak past the viewport edge */
}
.roofing-hero-content {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
    max-width: 100%;
}
/* CRITICAL: grid items default to min-width:auto which is content-sized. Long
   words, oversized images, or fixed-width inline styles can then push their
   grid track wider than 1fr, blowing out the viewport. min-width:0 lets grid
   tracks actually enforce their fr sizes. */
.roofing-hero-content > * { min-width: 0; }
.roofing-hero-left { max-width: 620px; }
.roofing-hero-right .hero-image-shell {
    padding: 0;
    background: transparent;
    border: none;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 600ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
}
.roofing-hero-right .hero-image-inner {
    border-radius: var(--radius-lg);
}
.roofing-hero-right:hover .hero-image-shell {
    transform: translateY(-6px);
    box-shadow:
        0 30px 100px -10px rgba(196, 90, 60, 0.5),
        0 0 80px rgba(196, 90, 60, 0.35);
}
.roofing-slideshow-frame {
    aspect-ratio: 3/2;
    padding: 0;
}
.roofing-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: calc(var(--radius-lg) - 0.25rem);
}
.roofing-slideshow .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.roofing-slideshow .slide.active { opacity: 1; }
/* Caption overlay: shows current roof material at bottom of slide */
.roofing-slideshow-caption {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    padding: 0.5rem 0.85rem;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    pointer-events: none;
    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 1024px) {
    .roofing-hero-content { grid-template-columns: 1fr; gap: 3rem; }
    .roofing-hero-left { max-width: none; }
}
@media (max-width: 768px) {
    .roofing-hero { padding: 7rem 0 3rem; }
    .roofing-slideshow-caption { font-size: 0.75rem; padding: 0.4rem 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .roofing-slideshow .slide { transition: none; }
}


/* ===== components/chat/chat.css ===== */
/*
 * Halo Build Co — Chat widget styles
 * Reads CSS variables from the site's style.css (--accent, --text, --bg-card, --border).
 * Scoped under .halo-chat-* to avoid collisions.
 */

.halo-chat-root {
    --hc-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --hc-radius: 18px;
    --hc-radius-bubble: 14px;
    --hc-fab-size: 60px;
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text);
}

/* ── FAB (closed state) ──────────────────────────────────── */

.halo-chat-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;
    width: var(--hc-fab-size);
    height: var(--hc-fab-size);
    border-radius: 50%;
    background: var(--accent);
    color: white;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 32px rgba(196, 90, 60, 0.35),
                inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 400ms var(--hc-ease),
                box-shadow 400ms var(--hc-ease),
                background 300ms;
}
.halo-chat-fab:hover {
    transform: scale(1.05);
    background: var(--accent-bright);
    box-shadow: 0 16px 40px rgba(196, 90, 60, 0.45),
                inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.halo-chat-fab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}
.halo-chat-fab svg {
    width: 26px;
    height: 26px;
}
.halo-chat-fab .halo-chat-fab-icon-close {
    display: none;
}
.halo-chat-fab.is-open .halo-chat-fab-icon-chat { display: none; }
.halo-chat-fab.is-open .halo-chat-fab-icon-close { display: block; }

.halo-chat-fab-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: 0.35;
    pointer-events: none;
    animation: halo-chat-pulse 2.4s var(--hc-ease) infinite;
}
.halo-chat-fab.is-open .halo-chat-fab-pulse { display: none; }
@keyframes halo-chat-pulse {
    0%   { transform: scale(1);   opacity: 0.35; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .halo-chat-fab-pulse { animation: none; }
    .halo-chat-fab { transition: none; }
}

.halo-chat-fab-badge {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    background: var(--text);
    color: var(--bg);
    border-radius: 100px;
    display: none;
    place-items: center;
    font-weight: 700;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    border: 2px solid var(--bg);
}
.halo-chat-fab.has-unread .halo-chat-fab-badge { display: grid; }

/* ── Panel ───────────────────────────────────────────────── */

.halo-chat-panel {
    position: fixed;
    right: 24px;
    bottom: calc(var(--hc-fab-size) + 40px);
    z-index: 91;
    width: 360px;
    height: min(560px, calc(100vh - 120px));
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--hc-radius);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    pointer-events: none;
    transition: opacity 320ms var(--hc-ease),
                transform 320ms var(--hc-ease);
}
.halo-chat-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
[data-theme="light"] .halo-chat-panel {
    box-shadow: 0 24px 64px rgba(11, 14, 18, 0.14);
}

/* ── Panel header ────────────────────────────────────────── */

.halo-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 90%, var(--accent));
}
.halo-chat-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.halo-chat-mark {
    width: 34px; height: 34px;
    background: var(--accent);
    color: white;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 15px;
    position: relative;
    flex-shrink: 0;
}
.halo-chat-mark::before {
    content: "";
    position: absolute;
    top: -4px; left: 50%;
    transform: translateX(-50%);
    width: 24px; height: 7px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    border-bottom-color: transparent;
}
.halo-chat-brand-text { min-width: 0; }
.halo-chat-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    line-height: 1.2;
}
.halo-chat-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}
.halo-chat-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #6cbf85;
    box-shadow: 0 0 0 2px rgba(108, 191, 133, 0.25);
    flex-shrink: 0;
}
.halo-chat-status.is-offline .halo-chat-status-dot {
    background: #6b6f7e;
    box-shadow: 0 0 0 2px rgba(107, 111, 126, 0.25);
}
.halo-chat-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.halo-chat-actions button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    width: 30px; height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color 200ms, background 200ms;
}
.halo-chat-actions button:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--text-muted) 15%, transparent);
}
.halo-chat-actions svg { width: 15px; height: 15px; }

/* ── Body ────────────────────────────────────────────────── */

.halo-chat-body {
    padding: 18px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}
.halo-chat-body::-webkit-scrollbar { width: 6px; }
.halo-chat-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 40%, transparent);
    border-radius: 3px;
}

.halo-chat-msg {
    display: flex;
    gap: 8px;
    max-width: 88%;
}
.halo-chat-msg.is-bot { align-self: flex-start; }
.halo-chat-msg.is-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.halo-chat-bubble {
    font-size: 13.5px;
    line-height: 1.5;
    padding: 9px 13px;
    border-radius: var(--hc-radius-bubble);
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.halo-chat-msg.is-bot .halo-chat-bubble {
    background: var(--bg-elevated);
    color: var(--text);
    border-top-left-radius: 4px;
}
.halo-chat-msg.is-user .halo-chat-bubble {
    background: var(--accent);
    color: white;
    border-top-right-radius: 4px;
}
.halo-chat-stamp {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.halo-chat-msg.is-user .halo-chat-stamp {
    text-align: right;
}

/* ── Name gate ───────────────────────────────────────────── */

.halo-chat-gate {
    padding: 6px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.halo-chat-gate-input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    outline: none;
    transition: border-color 200ms, box-shadow 200ms;
}
.halo-chat-gate-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(196, 90, 60, 0.16);
}
.halo-chat-gate-btn {
    background: var(--accent);
    color: white;
    border: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 200ms;
}
.halo-chat-gate-btn:hover:not(:disabled) { background: var(--accent-bright); }
.halo-chat-gate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.halo-chat-gate-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ── Input row ───────────────────────────────────────────── */

.halo-chat-input {
    border-top: 1px solid var(--border);
    padding: 12px 12px 12px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: end;
    background: var(--bg-card);
}
.halo-chat-input textarea {
    background: transparent;
    border: 0;
    outline: 0;
    resize: none;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text);
    padding: 8px 0;
    min-height: 20px;
    max-height: 96px;
    overflow-y: auto;
}
.halo-chat-input textarea::placeholder { color: var(--text-muted); }
.halo-chat-send {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 200ms, transform 150ms;
}
.halo-chat-send:hover:not(:disabled) {
    background: var(--accent-bright);
    transform: scale(1.05);
}
.halo-chat-send:disabled {
    background: var(--bg-elevated);
    color: var(--text-muted);
    cursor: not-allowed;
}
.halo-chat-send svg { width: 16px; height: 16px; }

/* ── System note (sent, offline, etc) ────────────────────── */

.halo-chat-sysnote {
    align-self: center;
    max-width: 92%;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 2px;
    width: 100%;
}
.halo-chat-sysnote::before,
.halo-chat-sysnote::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ── Mobile ─────────────────────────────────────────────── */

@media (max-width: 480px) {
    .halo-chat-panel {
        right: 12px;
        left: 12px;
        bottom: calc(var(--hc-fab-size) + 20px);
        width: auto;
        height: min(560px, calc(100vh - 100px));
    }
    .halo-chat-fab {
        right: 16px;
        bottom: 16px;
    }
}

/* ── Hide widget while mobile nav menu is open ──────────── */

body:has(.mobile-menu.active) .halo-chat-root {
    display: none;
}

/* ── TCPA consent checkbox in name gate ─────────────────── */
.halo-chat-consent {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    padding: 2px 0;
    cursor: pointer;
}
.halo-chat-consent-box {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    border: 1.5px solid var(--border);
    background: var(--bg-elevated);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background 150ms, border-color 150ms;
}
.halo-chat-consent-box:hover {
    border-color: var(--accent);
}
.halo-chat-consent-box:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.halo-chat-consent-box:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.halo-chat-consent-box:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.halo-chat-consent-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
}
.halo-chat-consent-text a {
    color: var(--accent-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.halo-chat-consent-text a:hover {
    color: var(--accent);
}


/* ===== components/consent/consent.css ===== */
/*
 * Halo Build Co — Privacy consent banner
 * Bottom-of-screen bar that appears on first visit. One-time — dismissed via
 * localStorage. Reads CSS variables from site style.css so it matches theme.
 */

.halo-consent-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 80;                              /* under chat panel (91), above content */
    max-width: 720px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    color: var(--text);
    transform: translateY(24px);
    opacity: 0;
    pointer-events: none;
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="light"] .halo-consent-banner {
    box-shadow: 0 20px 60px rgba(11, 14, 18, 0.15);
}
.halo-consent-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.halo-consent-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}
.halo-consent-text strong {
    color: var(--text);
    font-weight: 600;
}
.halo-consent-text a {
    color: var(--accent-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.halo-consent-text a:hover {
    color: var(--accent);
}

.halo-consent-btn {
    background: var(--accent);
    color: white;
    border: 0;
    padding: 10px 20px;
    border-radius: 100px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 200ms, transform 150ms;
    white-space: nowrap;
    flex-shrink: 0;
}
.halo-consent-btn:hover {
    background: var(--accent-bright);
    transform: translateY(-1px);
}
.halo-consent-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (max-width: 560px) {
    /* WHY: on mobile a bottom-fixed banner overlaps the primary CTA above
     * the fold — direct conversion killer. Slide in from the TOP instead
     * so the "Get a Free Quote" button stays visible + clickable. Combined
     * with a 1.5s render delay in consent.js. */
    .halo-consent-banner {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 16px;
        top: 12px;
        bottom: auto;
        left: 12px;
        right: 12px;
        transform: translateY(-24px);
        border-radius: 14px;
    }
    .halo-consent-banner.is-visible {
        transform: translateY(0);
    }
    .halo-consent-btn {
        justify-self: stretch;
        text-align: center;
        padding: 12px 20px;
    }
    .halo-consent-text {
        font-size: 12.5px;
        line-height: 1.5;
    }
}


/* ===== components/conversion/conversion.css ===== */
/* ── Conversion features: sticky mobile CTA + exit-intent modal + inline mini-quote form
   Loaded site-wide. All features respect prefers-reduced-motion where relevant.
   (SMS widget removed — pre-existing components/chat/ FAB owns bottom-right corner.) */

/* ═════════ Sticky mobile CTA bar (mobile only) ═════════ */
.mobile-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 95; /* above chat FAB (90) so the bar is never covered mid-transition */
    display: none;
    padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(15,15,15,0.85), rgba(15,15,15,0.98));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(196, 90, 60, 0.18);
    box-shadow: 0 -12px 32px rgba(0,0,0,0.4);
    transform: translateY(120%);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-cta-bar.mcb-visible { transform: translateY(0); }
.mobile-cta-bar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.55rem;
    max-width: 640px;
    margin: 0 auto;
}
.mcb-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.55rem 0.4rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text, #fff);
    font-size: 0.8rem;
    font-weight: 500;
    background: rgba(255,255,255,0.03);
    transition: background 180ms, border-color 180ms, transform 120ms;
    min-height: 52px;
}
.mcb-btn:active { transform: scale(0.97); }
.mcb-btn svg { width: 18px; height: 18px; stroke-width: 1.8; }
.mcb-btn.mcb-primary {
    background: linear-gradient(135deg, #C45A3C, #E17554);
    color: #fff;
    border-color: rgba(255,255,255,0.15);
    font-weight: 600;
}
.mcb-btn:not(.mcb-primary):hover { background: rgba(255,255,255,0.07); }

/* Desktop hidden; mobile shown */
@media (max-width: 768px) {
    .mobile-cta-bar { display: block; }
    /* Give body room so bar doesn't overlay bottom content */
    body.mcb-active { padding-bottom: 84px; }
}


/* SMS chat widget removed — the pre-existing components/chat/ FAB owns the
   bottom-right corner. SMS remains accessible via the nav phone icon
   (all pages) and the sticky mobile CTA bar (mobile). */


/* ═════════ Exit-intent modal ═════════ */
.exit-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: exitOverlayIn 220ms ease-out;
}
.exit-modal-overlay.open { display: flex; }
@keyframes exitOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.exit-modal {
    max-width: 480px;
    width: 100%;
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 16px;
    padding: 2rem 1.75rem 1.75rem;
    position: relative;
    animation: exitModalIn 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes exitModalIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.exit-modal-close {
    position: absolute; top: 12px; right: 14px;
    width: 32px; height: 32px;
    background: transparent; border: none; color: var(--text-muted, #999);
    cursor: pointer; font-size: 1.4rem; line-height: 1;
    border-radius: 50%;
    transition: background 150ms;
}
.exit-modal-close:hover { background: rgba(255,255,255,0.05); }
.exit-modal h3 {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
    color: var(--text, #fff);
    line-height: 1.2;
}
.exit-modal p {
    margin: 0 0 1.25rem;
    color: var(--text-muted, #999);
    font-size: 0.95rem;
    line-height: 1.5;
}
.exit-modal-form {
    display: grid;
    gap: 0.7rem;
}
.exit-modal-form input {
    padding: 0.7rem 0.9rem;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 8px;
    color: var(--text, #fff);
    font-size: 0.95rem;
    font-family: inherit;
}
.exit-modal-form input:focus {
    outline: none;
    border-color: #C45A3C;
    box-shadow: 0 0 0 3px rgba(196,90,60,0.15);
}
.exit-modal-form button {
    padding: 0.8rem 1.25rem;
    background: linear-gradient(135deg, #C45A3C, #E17554);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: filter 150ms, transform 100ms;
    font-family: inherit;
}
.exit-modal-form button:hover { filter: brightness(1.1); }
.exit-modal-form button:active { transform: scale(0.98); }
.exit-modal-note {
    margin: 0.9rem 0 0;
    color: var(--text-muted, #999);
    font-size: 0.78rem;
    text-align: center;
    line-height: 1.4;
}


/* ═════════ Inline mini quote form ═════════
   Matches the site .glow-card pattern: theme-aware via CSS custom properties,
   accent-glow hover overlay via ::before, subtle lift on hover, focus rings
   mirror the main /contact form's .form-group treatment. */
.mini-quote {
    position: relative;
    margin: 2.5rem 0;
    padding: 1.85rem 1.85rem 1.75rem;
    background: var(--bg-card, #141820);
    border: 1px solid var(--border, rgba(255,255,255,0.06));
    border-radius: var(--radius, 1.25rem);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: transform 400ms cubic-bezier(0.32, 0.72, 0, 1),
                border-color 400ms cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 400ms cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}
/* Hover glow overlay — matches .card-glow pattern from style.css */
.mini-quote::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(196,90,60,0.14), transparent 55%, rgba(196,120,80,0.06));
    opacity: 0;
    transition: opacity 500ms cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
    z-index: 0;
}
.mini-quote:hover {
    transform: translateY(-2px);
    border-color: var(--border-hover, rgba(196,90,60,0.25));
    box-shadow: 0 16px 40px rgba(196,90,60,0.08), 0 4px 12px rgba(0,0,0,0.05);
}
.mini-quote:hover::before { opacity: 1; }
/* All children need z-index above the ::before overlay */
.mini-quote > * { position: relative; z-index: 1; }

/* Eyebrow: small orange dot + uppercase label — matches .section-eyebrow */
.mini-quote-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
    color: var(--text-muted, #8888a0);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.mini-quote-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent, #C45A3C);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-glow, rgba(196,90,60,0.4));
}

.mini-quote-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.35rem;
    flex-wrap: wrap;
}
.mini-quote-header > div:first-child { flex: 1 1 240px; min-width: 0; }
.mini-quote h3 {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--text, #f0f0f5);
    font-weight: 700;
    letter-spacing: -0.005em;
}
.mini-quote-subtitle {
    margin: 0;
    color: var(--text-muted, #8888a0);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Phone pill: matches the small chip pattern used on service pages */
.mini-quote-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text, #f0f0f5);
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--border, rgba(255,255,255,0.06));
    border-radius: 999px;
    font-size: 0.88rem;
    white-space: nowrap;
    background: var(--bg-elevated, transparent);
    transition: border-color 220ms ease, background 220ms ease, transform 120ms ease;
}
.mini-quote-phone:hover {
    border-color: var(--border-hover, rgba(196,90,60,0.25));
    background: var(--accent-glow-soft, rgba(196,90,60,0.06));
}
.mini-quote-phone:active { transform: scale(0.98); }
.mini-quote-phone svg { color: var(--accent, #C45A3C); }

/* Form grid: name + phone + button */
.mini-quote-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.7rem;
}
.mini-quote-form input {
    padding: 0.85rem 1rem;
    background: var(--bg-elevated, #1a1f2a);
    border: 1px solid var(--border, rgba(255,255,255,0.06));
    border-radius: 0.75rem;
    color: var(--text, #f0f0f5);
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 500;
    min-width: 0;
    transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.mini-quote-form input::placeholder {
    color: var(--text-muted, #8888a0);
    opacity: 0.65;
    font-weight: 400;
}
.mini-quote-form input:hover:not(:focus) {
    border-color: var(--border-hover, rgba(196,90,60,0.25));
}
.mini-quote-form input:focus {
    outline: none;
    border-color: var(--accent, #C45A3C);
    box-shadow: 0 0 0 3px var(--accent-glow-soft, rgba(196,90,60,0.06)),
                0 0 20px rgba(196,90,60,0.06);
}
.mini-quote-form input:active { transform: scale(0.995); }

/* Button: matches .btn-primary treatment */
.mini-quote-form button {
    padding: 0.85rem 1.5rem;
    background: linear-gradient(135deg, var(--accent, #C45A3C), var(--accent-bright, #E08868));
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.925rem;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    box-shadow: 0 4px 14px var(--accent-glow, rgba(196,90,60,0.2)), inset 0 1px 0 rgba(255,255,255,0.12);
    transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 260ms cubic-bezier(0.32, 0.72, 0, 1),
                filter 180ms ease;
}
.mini-quote-form button:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 8px 22px var(--accent-glow, rgba(196,90,60,0.3)), inset 0 1px 0 rgba(255,255,255,0.15);
}
.mini-quote-form button:active { transform: translateY(0) scale(0.985); }
.mini-quote-form button:disabled { opacity: 0.65; cursor: wait; }

/* Footer note */
.mini-quote-note {
    margin: 1rem 0 0;
    color: var(--text-muted, #8888a0);
    font-size: 0.8rem;
    line-height: 1.55;
}
.mini-quote-note a { color: var(--accent, #C45A3C); font-weight: 600; text-decoration: none; }
.mini-quote-note a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Success state */
.mini-quote-success {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.28);
    border-radius: 0.75rem;
    color: #22c55e;
    font-size: 0.9rem;
    font-weight: 500;
    display: none;
}
[data-theme="light"] .mini-quote-success { color: #059669; }
.mini-quote-success.visible { display: block; }

/* Light-theme accent boosts (dark shadows too heavy on light bg) */
[data-theme="light"] .mini-quote {
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.03);
}
[data-theme="light"] .mini-quote:hover {
    box-shadow: 0 4px 12px rgba(196,90,60,0.08), 0 12px 32px rgba(0,0,0,0.05);
}
[data-theme="light"] .mini-quote-form button {
    box-shadow: 0 4px 14px rgba(196,90,60,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Mobile — stack the grid */
@media (max-width: 640px) {
    .mini-quote { padding: 1.5rem 1.35rem 1.4rem; }
    .mini-quote-header { flex-direction: column; gap: 0.85rem; margin-bottom: 1.15rem; }
    .mini-quote-phone { align-self: flex-start; }
    .mini-quote-form { grid-template-columns: 1fr; gap: 0.65rem; }
    .mini-quote-form button { width: 100%; padding: 0.95rem 1.25rem; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .mini-quote, .mini-quote::before, .mini-quote-form input, .mini-quote-form button {
        transition: none !important;
    }
    .mini-quote:hover { transform: none; }
    .mini-quote-form button:hover { transform: none; }
}


/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .mobile-cta-bar, .exit-modal, .exit-modal-overlay {
        animation: none !important;
        transition: none !important;
    }
}


/* ═════════ Roof replacement cost calculator (on /roofing) ═════════
   Same design-token discipline as .mini-quote: theme-aware, matches .glow-card
   language, inputs mirror /contact form's .form-group treatment. */
.cost-calc-section {
    padding: 4rem 0;
    position: relative;
    z-index: 2;
}
.cost-calc-inline-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.cost-calc-inline-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cost-calc {
    max-width: 780px;
    margin: 0 auto;
    position: relative;
}
.cost-calc-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem 2rem 2.25rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: border-color 400ms cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 400ms cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}
.cost-calc-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(196,90,60,0.10), transparent 55%, rgba(196,120,80,0.04));
    opacity: 0;
    transition: opacity 500ms cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
    z-index: 0;
}
.cost-calc-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 14px 32px rgba(196,90,60,0.06), 0 4px 12px rgba(0,0,0,0.05);
}
.cost-calc-card:hover::before { opacity: 1; }
.cost-calc-card > * { position: relative; z-index: 1; }

.cost-calc-form { display: grid; gap: 1.25rem; }
.cost-calc-field { display: grid; gap: 0.4rem; min-width: 0; }
.cost-calc-label {
    color: var(--text);
    font-weight: 600;
    font-size: 0.825rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.cost-calc-help {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}
.cost-calc-input,
.cost-calc-select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0.85rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 500;
    transition: border-color 220ms ease, box-shadow 220ms ease;
    /* Native select: prevent long option text from forcing intrinsic width larger than viewport */
    max-width: 100%;
    text-overflow: ellipsis;
}
.cost-calc-select {
    cursor: pointer;
    /* Native browser select arrow — keep it */
    appearance: auto;
    -webkit-appearance: menulist;
}
.cost-calc-input::placeholder { color: var(--text-muted); opacity: 0.7; }
.cost-calc-input:hover:not(:focus),
.cost-calc-select:hover:not(:focus) {
    border-color: var(--border-hover);
}
.cost-calc-input:focus,
.cost-calc-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow-soft), 0 0 20px rgba(196,90,60,0.06);
}
.cost-calc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    min-width: 0;
}
.cost-calc-row > .cost-calc-field { min-width: 0; }

.cost-calc-result {
    margin-top: 1.75rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(196,90,60,0.08), rgba(196,90,60,0.02));
    border: 1px solid rgba(196,90,60,0.28);
    border-radius: 0.85rem;
}
.cost-calc-result-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}
.cost-calc-result-value {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.015em;
    word-break: break-word;
}
.cost-calc-result-sub {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    line-height: 1.45;
    word-wrap: break-word;
}
.cost-calc-ctas {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
[data-theme="light"] .cost-calc-ctas { border-top-color: rgba(0,0,0,0.06); }
.cost-calc-cta-primary {
    flex: 1 1 200px;
    min-width: 0;
    text-align: center;
    padding: 0.8rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cost-calc-cta-secondary {
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
    padding: 0.8rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cost-calc-disclaimer {
    margin: 1.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-align: center;
    line-height: 1.5;
}
[data-theme="light"] .cost-calc-card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.03);
}

/* Mobile: stack the 2-col row, shrink padding, keep everything within viewport */
@media (max-width: 640px) {
    .cost-calc-section { padding: 3rem 0; }
    .cost-calc-card { padding: 1.5rem 1.25rem 1.65rem; }
    .cost-calc-form { gap: 1rem; }
    .cost-calc-row { grid-template-columns: 1fr; gap: 1rem; }
    .cost-calc-result { padding: 1.15rem 1.15rem 1.25rem; }
    .cost-calc-result-value { font-size: 1.5rem; }
    .cost-calc-ctas { flex-direction: column; gap: 0.6rem; }
    .cost-calc-cta-primary,
    .cost-calc-cta-secondary { flex: 1 1 100%; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .cost-calc-card, .cost-calc-card::before,
    .cost-calc-input, .cost-calc-select { transition: none !important; }
}


/* ═════════ Fix: chat FAB vs sticky mobile CTA bar collision ═════════
   The pre-existing chat FAB (components/chat/) sits at bottom:24px (16px at
   ≤480px) and is 60px tall, so it lands inside the 0–84px band the sticky CTA
   bar occupies. Both were z-index:90, so whichever script appended last won and
   one control covered the other on every mobile page.

   Scoped to body.mcb-active — the class conversion.js toggles when the bar is
   actually on screen — so the FAB only lifts while the bar is present and sits
   at its normal height at the top of the page. Specificity (0,2,1) beats
   chat.css's own .halo-chat-fab rules (0,1,0) regardless of load order, so this
   works without editing that component. */
@media (max-width: 768px) {
    body.mcb-active .halo-chat-fab {
        bottom: 100px;
        transition: bottom 320ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* Keep the open panel clear of the lifted FAB (FAB top edge = 100 + 60) */
    body.mcb-active .halo-chat-panel {
        bottom: 168px;
    }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    body.mcb-active .halo-chat-fab { transition: none; }
}


/* ═════════ Location-page service-area map + visual ═════════ */
.area-map {
    position: relative;
    margin: 1.25rem 0 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
}
.area-map iframe {
    width: 100%;
    height: 340px;
    border: 0;
    display: block;
    /* Map tiles are bright in both themes; soften slightly on dark so it doesn't glare */
    filter: saturate(0.9);
}
.area-visual {
    margin: 1.5rem 0 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
}
.area-visual img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.area-visual-caption {
    margin: 0;
    padding: 0.85rem 1.1rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
    border-top: 1px solid var(--border);
}
.area-visual-caption a { color: var(--accent); font-weight: 600; text-decoration: none; }
.area-visual-caption a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
    .area-map iframe { height: 260px; }
}


/* ===== components/blog/blog.css ===== */
/* ── Blog UX enhancements: search, related-posts, TOC, reading-progress
   Loaded on /blog and individual blog post pages. */

/* ═════ Reading progress bar (top of viewport) ═════ */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--accent, #C45A3C), var(--accent-bright, #E17554));
    z-index: 200;
    transition: width 80ms linear;
    pointer-events: none;
    box-shadow: 0 0 8px var(--accent-glow, rgba(196,90,60,0.4));
}
@media (prefers-reduced-motion: reduce) { .reading-progress { transition: none; } }

/* ═════ Blog search (on /blog index page) ═════ */
.blog-search {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    position: relative;
}
.blog-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.95rem 1rem 0.95rem 3rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 500;
    transition: border-color 220ms ease, box-shadow 220ms ease;
}
.blog-search-input::placeholder { color: var(--text-muted); opacity: 0.65; }
.blog-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow-soft, rgba(196,90,60,0.08));
}
.blog-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px; height: 20px;
    color: var(--text-muted);
    pointer-events: none;
}
.blog-search-count {
    display: block;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 0.75rem;
    min-height: 1.2em;
}
.post-card[hidden] { display: none !important; }
.blog-search-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    display: none;
}
.blog-search-empty.visible { display: block; }
.blog-search-highlight {
    background: rgba(196,90,60,0.22);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}

/* ═════ Table of contents (auto-injected on long posts) ═════ */
.blog-toc {
    margin: 2rem 0 2.5rem;
    padding: 1.35rem 1.5rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent, #C45A3C);
    border-radius: 0.75rem;
}
.blog-toc-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.85rem;
}
.blog-toc-header::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--accent, #C45A3C);
    border-radius: 50%;
}
.blog-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
    counter-reset: toc-counter;
}
.blog-toc li {
    counter-increment: toc-counter;
    display: flex;
    gap: 0.6rem;
    line-height: 1.45;
}
.blog-toc li::before {
    content: counter(toc-counter, decimal-leading-zero);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    font-weight: 700;
    padding-top: 0.15rem;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}
.blog-toc a {
    color: var(--text);
    text-decoration: none;
    font-size: 0.925rem;
    font-weight: 500;
    transition: color 180ms ease;
}
.blog-toc a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Scroll offset so anchor jumps don't hide heading behind fixed nav */
.blog-article h2[id] { scroll-margin-top: 100px; }

/* ═════ Related posts (auto-injected at end of post) ═════ */
.related-posts-section {
    margin: 3rem 0 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}
.related-posts-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.25rem;
}
.related-posts-header::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--accent, #C45A3C);
    border-radius: 50%;
}
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.related-post-card {
    display: block;
    padding: 1.25rem 1.35rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    text-decoration: none;
    color: var(--text);
    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1),
                border-color 300ms ease,
                box-shadow 300ms ease;
    min-width: 0;
}
.related-post-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-hover, rgba(196,90,60,0.25));
    box-shadow: 0 10px 24px rgba(196,90,60,0.06), 0 3px 8px rgba(0,0,0,0.05);
}
.related-post-card time {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.related-post-title {
    margin: 0.35rem 0 0.5rem;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-post-tag {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
@media (max-width: 768px) {
    .related-posts-grid { grid-template-columns: 1fr; gap: 0.85rem; }
}

/* Contextual service links folded into the related section — replaces the
   legacy .post-related block that repeated the same 4 links on 20 of 28 posts. */
.related-services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--border);
}
.related-services-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 0.15rem;
}
.related-services a {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.related-services a:hover {
    border-color: var(--border-hover);
    background: var(--accent-glow-soft);
    color: var(--accent);
}
@media (max-width: 640px) {
    .related-services-label { width: 100%; margin-bottom: 0.15rem; }
}

/* ═════════ Comparison tables ═════════
   Added for scannability and AI answer extraction. Wide tables scroll inside
   their own container so the page body never scrolls sideways. */
.cmp-table-wrap {
    margin: 1.5rem 0 2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--bg-card);
}
.cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 520px;
}
.cmp-table caption {
    caption-side: top;
    text-align: left;
    padding: 0.9rem 1rem 0.6rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.cmp-table th,
.cmp-table td {
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    line-height: 1.45;
}
.cmp-table thead th {
    color: var(--text);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-elevated);
    white-space: nowrap;
}
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table tbody tr:hover { background: var(--accent-glow-soft); }
.cmp-table td:first-child { font-weight: 600; color: var(--text); }
.cmp-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Transparency note when a post is genuinely revised (never a date-only bump) */
.post-updated-note {
    margin: 0.85rem 0 0;
    padding: 0.6rem 0.9rem;
    background: var(--accent-glow-soft);
    border-left: 3px solid var(--accent);
    border-radius: 0.4rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}
.post-updated-note strong { color: var(--text); }