/* ================================
   TPGC - Elevated Design System
   ================================ */

/* CSS Property for animated border */
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ================================
   CSS Variables & Reset

   One canonical :root block for the entire site.
   Division stylesheets (residential, commercial, siteworks)
   and project-styles.css no longer redeclare tokens — they
   only contain selectors that reference the tokens below.

   Naming conventions:
   - Long names (--residential-primary) used in homepage service cards
   - Short names (--res-primary, --com-primary, --sw-primary)
     used inside division stylesheets — same values as long names
   - --fp-* used on featured-project pages
   ================================ */
:root {
    /* ---- Brand primaries ---- */
    --primary-deep: #0a2540;
    --primary-color: #1a4670;
    --primary-light: #2d6a9f;
    --primary-muted: #3d7ab3;

    /* ---- Warm accent — refined gold/copper ---- */
    --accent-color: #c9a66b;
    --accent-warm: #d4b483;
    --accent-deep: #a67c3d;
    --accent-glow: rgba(201, 166, 107, 0.15);

    /* ---- Neutrals with warmth ---- */
    --text-primary: #0a1628;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-light: #ffffff;

    --bg-primary: #fafbfc;
    --bg-cream: #f7f5f2;
    --bg-warm: #f5f3f0;
    --bg-dark: #0a1628;
    --bg-darker: #060d18;

    /* ---- Division colors (homepage service cards) ---- */
    /* Values aligned with the short-name tokens below so
       commercial/siteworks cards on the homepage match the
       division pages. Previously drifted by ~5-10 hex units. */
    --residential-primary: #1a4670;
    --residential-secondary: #2d6a9f;
    --commercial-primary: #8B2635;      /* was #8b3a3a — aligned */
    --commercial-secondary: #c25858;
    --siteworks-primary: #2C6E49;       /* was #2d5a40 — aligned */
    --siteworks-secondary: #4a8c64;

    /* ---- Residential theme (used in residential-styles.css) ---- */
    --res-primary: #1a4670;
    --res-primary-dark: #0a2540;
    --res-primary-light: #4a8ac2;
    --res-accent: #6ba3d6;
    --res-accent-light: #a8cce8;

    /* ---- Commercial theme (used in commercial-styles.css) ---- */
    --com-primary: #8B2635;
    --com-primary-dark: #5c1a24;
    --com-primary-light: #b84d5c;
    --com-accent: #E85D75;
    --com-accent-light: #f2a0ad;

    /* ---- Site Works theme (used in siteworks-styles.css) ---- */
    --sw-primary: #2C6E49;
    --sw-primary-dark: #1e4d33;
    --sw-primary-light: #68B684;
    --sw-accent: #8FBC8F;
    --sw-accent-light: #a8d4a8;

    /* ---- Featured Project theme (used in project-styles.css) ----
       Defaults match residential; the .fp-commercial and .fp-siteworks
       body classes override these tokens in project-styles.css. */
    --fp-primary: #1a4670;
    --fp-primary-dark: #0a2540;
    --fp-primary-light: #4a8ac2;
    --fp-accent: #6ba3d6;
    --fp-accent-light: #a8cce8;

    /* ---- Typography ---- */
    --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-accent: 'Instrument Serif', Georgia, serif;
    --font-serif: 'Instrument Serif', Georgia, serif;     /* alias used in project-styles */

    /* ---- Layout & spacing ---- */
    --container-width: 1400px;
    --nav-height: 90px;                 /* new: used by hero padding-top */
    --nav-height-scrolled: 74px;
    --section-padding: 140px;
    --section-padding-mobile: 80px;

    /* 8-point spacing scale (for future use as components are extracted) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-6: 48px;
    --space-8: 64px;
    --space-12: 96px;
    --space-16: 128px;

    /* ---- Motion ---- */
    --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Shadows ---- */
    --shadow-soft: 0 4px 20px rgba(10, 37, 64, 0.06);
    --shadow-medium: 0 8px 30px rgba(10, 37, 64, 0.1);
    --shadow-strong: 0 20px 50px rgba(10, 37, 64, 0.15);
    --shadow-glow: 0 0 60px rgba(201, 166, 107, 0.2);

    /* ---- Border radius ---- */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--bg-primary);
    line-height: 1.7;
    font-size: 17px;
    overflow-x: hidden;
    font-weight: 400;
    animation: pageFadeIn 0.6s ease-out;
}

@keyframes pageFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 48px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 24px;
    }
}

/* ================================
   Navigation
   ================================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(250, 251, 252, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(10, 37, 64, 0.06);
    transition: all 0.4s ease;
}

.nav.scrolled {
    background: rgba(250, 251, 252, 0.95);
    box-shadow: 0 4px 30px rgba(10, 37, 64, 0.08);
}

.nav-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 20px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo-link {
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    transition: var(--transition);
}

.nav-logo-link:hover .logo-image {
    transform: scale(1.02);
}

.logo-image {
    height: 52px;
    width: auto;
    transition: var(--transition);
}

.logo-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--accent-color), transparent);
    opacity: 0.5;
}

.logo-tagline {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.5;
}

.nav-links {
    display: flex;
    gap: 40px;
    align-items: center;
}

.nav-links a {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
    position: relative;
    padding: 8px 0;
}

.nav-links a:not(.nav-cta)::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(26, 26, 26, 0.4);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links a:not(.nav-cta):hover {
    color: var(--text-primary);
}

.nav-links a:not(.nav-cta):hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--primary-deep);
    color: white !important;
    padding: 14px 28px !important;
    border-radius: 100px;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(10, 37, 64, 0.2);
}

.nav-cta svg {
    transition: transform 0.3s ease;
}

.nav-cta:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(10, 37, 64, 0.25);
}

.nav-cta:hover svg {
    transform: translateX(4px);
}

.nav-cta::before {
    display: none !important;
}

/* Services Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dropdown-arrow {
    transition: transform 0.3s ease;
}

.nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 280px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(10, 37, 64, 0.15), 0 10px 20px rgba(0, 0, 0, 0.05);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    pointer-events: none;
    overflow: hidden;
}

.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 4px;
    transform: translateX(-50%) rotate(45deg);
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.nav-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    padding: 22px 28px 22px 36px !important;
    border-radius: 0;
    text-decoration: none;
    transition: all 0.3s ease;
    margin: 0;
}

.nav-dropdown-menu .dropdown-item:first-child {
    border-radius: 16px 16px 0 0;
}

.nav-dropdown-menu .dropdown-item:last-child {
    border-radius: 0 0 16px 16px;
}

.nav-dropdown-menu .dropdown-item[data-service="residential"]:hover {
    background: transparent;
}

.nav-dropdown-menu .dropdown-item[data-service="commercial"]:hover {
    background: transparent;
}

.nav-dropdown-menu .dropdown-item[data-service="siteworks"]:hover {
    background: transparent;
}

.dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.dropdown-item[data-service="residential"]:hover .dropdown-title,
.dropdown-item[data-service="commercial"]:hover .dropdown-title,
.dropdown-item[data-service="siteworks"]:hover .dropdown-title {
    color: var(--text-primary);
}

.dropdown-desc {
    font-size: 13px;
    color: var(--text-secondary);
}


/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--primary-deep);
    transition: var(--transition);
    transform-origin: center;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    padding: 100px 32px 40px;
    flex-direction: column;
    gap: 0;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    overflow-y: auto;
}

.mobile-menu.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.mobile-menu > a,
.mobile-menu-label {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    padding: 18px 0;
    border-bottom: 1px solid rgba(10, 37, 64, 0.08);
    transition: var(--transition);
    display: block;
}

.mobile-menu > a:first-child {
    border-top: 1px solid rgba(10, 37, 64, 0.08);
}

.mobile-menu > a:hover {
    color: var(--accent-color);
    padding-left: 12px;
}

.mobile-menu-label {
    color: var(--accent-color);
    cursor: default;
    border-bottom: none;
    padding-bottom: 4px;
}

.mobile-submenu {
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    margin-bottom: 0;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(10, 37, 64, 0.08);
}

.mobile-submenu a {
    font-size: 16px !important;
    padding: 10px 0 !important;
    color: var(--text-secondary) !important;
    text-decoration: none;
    display: flex !important;
    align-items: center;
    gap: 10px;
    border-bottom: none !important;
}

.mobile-submenu a:hover {
    color: var(--accent-color) !important;
    padding-left: 8px !important;
}

.mobile-service-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mobile-service-dot.dot-residential {
    background: #1a4670;
}

.mobile-service-dot.dot-commercial {
    background: #8B2635;
}

.mobile-service-dot.dot-siteworks {
    background: #2C6E49;
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-container {
        padding: 16px 24px;
    }
    
    .logo-image {
        height: 44px;
    }
    
    .logo-divider,
    .logo-tagline {
        display: none;
    }
}

/* ================================
   Hero Section
   ================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--primary-deep);
    /* Clear the fixed nav so hero content isn't hidden behind it. */
    padding-top: var(--nav-height);
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.hero-bg-image {
    /* Batch 11: now an <img> element instead of a background-image div.
       object-fit + object-position replicate background-size: cover / position: center.
       Width/height 100% + absolute position fills the hero-bg container. */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(20%);
    transform: scale(1.1);
    animation: heroZoom 20s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    0% { transform: scale(1.1); }
    100% { transform: scale(1.15); }
}

.hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, 
            rgba(10, 37, 64, 0.92) 0%, 
            rgba(26, 70, 112, 0.85) 50%, 
            rgba(10, 37, 64, 0.88) 100%
        );
}

/* Floating geometric elements - now grid based */
.hero-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Animated grid lines for hero */
.hero-shapes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(201, 166, 107, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 166, 107, 0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: heroGridMove 30s linear infinite;
}

@keyframes heroGridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(80px, 80px);
    }
}

.shape {
    display: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1000px;
    padding: 0 40px;
}

/* Staggered title animation */
.hero-title {
    margin-bottom: 32px;
}

.title-line {
    display: block;
    font-family: var(--font-body);
    /* Batch 4.5c: Reduced from clamp(42px, 8vw, 90px) so the hero content
       fits within 100vh on standard laptop viewports (~720-800px tall)
       without overflow. Keeps the dramatic scale on larger screens. */
    font-size: clamp(38px, 7vw, 78px);
    font-weight: 700;
    color: var(--text-light);
    line-height: 1.05;
    letter-spacing: -0.03em;
    opacity: 0;
    transform: translateY(40px);
    animation: revealTitle 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.title-line em {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: linear-gradient(
        90deg, 
        var(--accent-color) 0%, 
        var(--accent-color) 40%,
        #e8d5a8 50%,
        var(--accent-color) 60%,
        var(--accent-color) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerWave 8s ease-in-out infinite;
}

@keyframes shimmerWave {
    0% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.title-line-1 { animation-delay: 0.2s; }
.title-line-2 { animation-delay: 0.35s; }
.title-line-3 { animation-delay: 0.5s; }
.title-line-4 { animation-delay: 0.65s; }

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

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(201, 166, 107, 0.1);
    border: 1px solid rgba(201, 166, 107, 0.25);
    border-radius: 100px;
    color: var(--accent-warm);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 40px;
    backdrop-filter: blur(10px);
    opacity: 0;
    animation: fadeIn 0.8s ease forwards 0.1s;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-color);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.hero-divider {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards 0.8s;
}

.hero-divider span {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
}

.hero-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards 0.9s;
}

.service-tag {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.service-dot {
    color: var(--accent-color);
    font-size: 20px;
}

.hero-cta-group {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards 1s;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 36px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 100px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    overflow: hidden;
}

.hero-btn.primary {
    background: var(--accent-color);
    color: var(--primary-deep);
    box-shadow: 0 8px 30px rgba(201, 166, 107, 0.35);
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.hero-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(201, 166, 107, 0.45);
}

.hero-btn.primary:hover .btn-shine {
    left: 100%;
}

.hero-btn.secondary {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.hero-btn.secondary svg {
    transition: transform 0.3s ease;
}

.hero-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
}

.hero-btn.secondary:hover svg {
    transform: translateX(4px);
}

/* Scroll Indicator */
/* Batch 4.5:
   Scroll indicator moved from bottom-center to bottom-left so it doesn't
   collide with the CTA buttons on shorter laptop viewports.
   Rotated 90° to read vertically, mirroring editorial conventions —
   also pairs visually with the "EST. 1989" badge on the bottom-right. */
.scroll-indicator {
    position: absolute;
    bottom: 48px;
    left: 48px;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
}

.scroll-indicator:hover {
    color: var(--accent-color);
}

.scroll-line {
    /* Shorter, anchored to left edge; keeps the animation but less theatrical */
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--accent-color), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50% { transform: scaleY(0.6); opacity: 0.5; }
}

/* Year Badge */
.hero-year {
    position: absolute;
    bottom: 48px;
    right: 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Batch 10: was rgba(255,255,255,0.4) — too faint.
       0.55 keeps it quiet but intentional, not apologetic. */
    color: rgba(255, 255, 255, 0.55);
    z-index: 10;
}

.hero-year span {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero-year strong {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 600;
    color: var(--accent-color);
    line-height: 1;
    /* Batch 10: was 0.6 — too muted against the hero parallax.
       0.8 reads as confidently understated. */
    opacity: 0.8;
}

@media (max-width: 768px) {
    .hero {
        min-height: 100svh;
    }
    
    .hero-content {
        padding: 0 24px;
    }
    
    .hero-cta-group {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        padding: 16px 28px;
        font-size: 13px;
        letter-spacing: 0.06em;
    }
    
    .scroll-indicator,
    .hero-year {
        display: none;
    }
    
    .hero-subtitle {
        flex-wrap: wrap;
        gap: 6px 10px;
        justify-content: center;
    }

    .service-tag {
        font-size: 12px;
        letter-spacing: 0.08em;
    }

    .service-dot {
        font-size: 14px;
    }

    /* Equalize project card heading sizes on mobile */
    .project-card.large .project-name {
        font-size: 24px;
    }

    .project-card.large {
        height: 320px;
    }
}

/* ================================
   Section Headers
   ================================ */
.section-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
}

.section-header-left {
    text-align: left;
}

.section-number {
    display: none;
}

.section-label {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

.section-title {
    font-family: var(--font-body);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.section-title em {
    font-style: normal;
    color: var(--primary-color);
}

/* ================================
   Services Overview Section
   ================================ */
.services-overview {
    padding: var(--section-padding) 0;
    background: var(--bg-cream);
    position: relative;
    overflow: hidden;
}

.services-overview::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(201, 166, 107, 0.03) 100%);
    pointer-events: none;
}

.service-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
    z-index: 2;
}

/* ========== SERVICE CARDS ========== */
.service-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
    z-index: 2;
}

.service-card {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 520px;
    display: block;
    text-decoration: none;
    color: white;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}

.service-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Batch 4.5: Background image scale on hover removed for a calmer feel.
   The parent card's translateY lift is retained. */
.service-card:hover .service-card-bg {
    transform: none;
}

.service-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.25) 70%,
        rgba(0, 0, 0, 0.15) 100%);
    transition: opacity 0.5s ease;
}

.service-card:hover .service-card-overlay {
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.55) 40%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.2) 100%);
}

/* Batch 4.5: Grid pattern removed — redundant with the body grain overlay
   and contributing to the "agency template" feel.
   Selector kept so the matching <div> in HTML is still valid. */
.service-card-grid-pattern {
    display: none;
}

/* Batch 4.5: Gold hover-accent bar removed — felt like an agency template move
   and introduced gold on an element that wasn't gold at rest. Selectors kept
   for HTML compatibility. */
.service-card-accent {
    display: none;
}

.service-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.service-card-label {
    /* Batch 4.5: Kept as numeric accent but aligned with hero's typographic voice.
       Switched from gold tracked caps to a quieter italic-serif number, which
       pairs with the italic serif accent words used elsewhere on the page. */
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 22px;
    font-weight: 400;
    color: var(--accent-color);
    letter-spacing: 0;
    margin-bottom: 16px;
    line-height: 1;
}

.service-card-title {
    font-family: var(--font-body);
    font-size: 36px;
    font-weight: 700;
    color: white;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

/* Batch 4.5: italic-serif period accent on the card title.
   Matches the hero language ("Quality." / "Excellence.") */
.service-card-title em {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    color: var(--accent-color);
}

.service-card-desc {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 24px;
    max-width: 280px;
}

.service-card-link {
    /* Batch 4.5: Sentence case, quieter letter-spacing.
       Previously: uppercase + 0.1em tracking (agency-template feel). */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0;
    transition: all 0.3s ease;
    opacity: 0.9;
}

.service-card:hover .service-card-link {
    opacity: 1;
    color: var(--accent-color);
}

.service-card-link svg {
    transition: transform 0.3s ease;
}

.service-card:hover .service-card-link svg {
    transform: translateX(6px);
}

/* Service Cards Responsive */
@media (max-width: 900px) {
    .service-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-card {
        height: 360px;
    }

    .service-card-content {
        padding: 32px;
    }

    .service-card-title {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .services-overview {
        padding: var(--section-padding-mobile) 0;
    }

    .section-header {
        margin-bottom: 48px;
    }

    .service-card {
        height: 320px;
    }

    .service-card-content {
        padding: 28px;
    }

    .service-card-title {
        font-size: 28px;
    }

    .service-card-desc {
        font-size: 14px;
        margin-bottom: 20px;
    }
}

/* ================================
   Stats Section
   ================================ */
.stats-section {
    padding: 120px 0;
    background: var(--primary-deep);
    position: relative;
    overflow: hidden;
}

.stats-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Animated grid lines */
.stats-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(201, 166, 107, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 166, 107, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 30s linear infinite;
}

@keyframes gridMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(60px, 60px);
    }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    position: relative;
    z-index: 2;
}

/* Mouse-following glow effect */
.stats-mouse-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(201, 166, 107, 0.15) 0%, rgba(201, 166, 107, 0.05) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.stat-item {
    text-align: center;
    padding: 48px 32px;
    position: relative;
}

.stat-item::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: linear-gradient(to bottom, transparent, rgba(201, 166, 107, 0.2), transparent);
}

.stat-item:last-child::after {
    display: none;
}

.stat-number {
    font-family: var(--font-body);
    font-size: clamp(56px, 10vw, 100px);
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.stat-divider {
    width: 40px;
    height: 2px;
    background: var(--accent-color);
    margin: 0 auto 20px;
    opacity: 0.4;
}

.stat-label {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .stats-section {
        padding: 80px 0;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .stat-item {
        padding: 40px 24px;
    }
    
    .stat-item::after {
        top: auto;
        bottom: 0;
        right: 50%;
        transform: translateX(50%);
        width: 60%;
        height: 1px;
    }
}

/* ================================
   Featured Projects
   ================================ */
.featured-projects {
    padding: var(--section-padding) 0;
    background: white;
    position: relative;
}

.projects-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: repeat(2, 280px);
    gap: 24px;
    margin-bottom: 60px;
}

.project-card {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    display: block;
    text-decoration: none;
    color: inherit;
}

.project-card.large {
    grid-row: span 2;
}

/* Batch 4.5: Calmer hover — no scale lift, rely on overlay darken (below) */
.project-card:hover {
    box-shadow: var(--shadow-medium);
}

.project-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.project-placeholder {
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Batch 4.5: Placeholder image scale on hover removed for calmer feel */
.project-card:hover .project-placeholder {
    transform: none;
}

.project-1 {
    background: url('/assets/images/res-project-6.jpg');
    background-size: cover;
    background-position: center;
}

.project-2 {
    background: url('/assets/images/com-project-1.jpg');
    background-size: cover;
    background-position: center;
}

.project-3 {
    background: url('/assets/images/siteworks-project.jpg');
    background-size: cover;
    background-position: center;
}

/* Batch 4.5: Grid pattern removed — same cleanup as service cards. */
.project-grid-overlay {
    display: none;
}

.project-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    padding: 32px;
    padding-top: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.85) 0%, 
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.3) 70%,
        rgba(0, 0, 0, 0.2) 100%);
    color: white;
    transition: var(--transition);
    z-index: 2;
}

.project-card:hover .project-info {
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.9) 0%, 
        rgba(0, 0, 0, 0.6) 40%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.3) 100%);
}

.project-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.project-category {
    /* Batch 10: From gold italic-serif to white italic-serif.
       Reason: too much gold on the card (category label + project-name
       accent period both competing). Keeping the period accent gold for
       consistency with service cards above; making the category label
       white + slightly transparent to establish clear hierarchy. */
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0;
    text-transform: none;
}

.project-name {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.project-card.large .project-name {
    font-size: 32px;
}

/* Batch 4.5: italic-serif accent on project names — same pattern as service cards */
.project-name em {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    color: var(--accent-color);
}

.project-desc {
    /* Batch 10: explicit rgba instead of opacity:0.8 —
       avoids double-dimming when the parent card is semi-transparent,
       and renders more crisply on the gradient background. */
    font-size: 15px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.5;
}

.project-hover-indicator {
    /* Batch 4.5: Square instead of circular, no backdrop-filter circle — quieter */
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
}

.project-card:hover .project-hover-indicator {
    opacity: 1;
    transform: translateY(0);
}

/* Service-specific hover indicator colors */
.project-card[data-service="residential"]:hover .project-hover-indicator {
    background: var(--residential-primary);
}

.project-card[data-service="commercial"]:hover .project-hover-indicator {
    background: var(--commercial-primary);
}

.project-card[data-service="siteworks"]:hover .project-hover-indicator {
    background: var(--siteworks-primary);
}

.projects-cta {
    text-align: center;
}

@media (max-width: 900px) {
    .featured-projects {
        padding: var(--section-padding-mobile) 0;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 20px;
    }
    
    .project-card {
        height: 320px;
    }
    
    .project-card.large {
        grid-row: span 1;
        height: 400px;
    }
}

/* ================================
   About Section
   ================================ */
.about-section {
    padding: var(--section-padding) 0;
    background: var(--bg-cream);
    position: relative;
    overflow: hidden;
}

.about-bg-element {
    position: absolute;
    top: 10%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(201, 166, 107, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: stretch;
    position: relative;
    z-index: 2;
}

.about-content {
    display: flex;
    flex-direction: column;
}

.about-content .section-header {
    margin-bottom: 32px;
}

.about-text-wrapper {
    margin-bottom: 40px;
}

.about-text {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.about-text.lead {
    font-size: 20px;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.7;
}

.about-features {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: auto;
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: white;
    border-radius: 100px;
    box-shadow: var(--shadow-soft);
}

.feature-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-glow);
    border-radius: 50%;
    color: var(--accent-deep);
}

.about-feature span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.about-image {
    position: relative;
    display: flex;
    flex-direction: column;
}

.about-image-wrapper {
    position: relative;
    flex: 1;
    min-height: 450px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.about-placeholder {
    width: 100%;
    height: 100%;
    background: url('/assets/images/about-image.jpg');
    background-size: cover;
    background-position: center;
}

.about-image-frame {
    position: absolute;
    top: -20px;
    right: -20px;
    bottom: 20px;
    left: 20px;
    border: 2px solid var(--accent-color);
    border-radius: var(--radius-lg);
    opacity: 0.3;
    pointer-events: none;
}

.about-accent-box {
    position: absolute;
    bottom: -30px;
    left: -30px;
    background: var(--accent-color);
    padding: 28px 36px;
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--shadow-medium);
}

.accent-number {
    display: block;
    font-family: var(--font-body);
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-deep);
    line-height: 1;
    margin-bottom: 4px;
}

.accent-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-deep);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

@media (max-width: 1000px) {
    .about-section {
        padding: var(--section-padding-mobile) 0;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .about-image-wrapper {
        min-height: 400px;
    }
    
    .about-image-frame {
        display: none;
    }
    
    .about-accent-box {
        bottom: -20px;
        left: 20px;
    }
    
    .about-features {
        margin-top: 0;
    }
}

/* ================================
   Contact Section
   ================================ */
.contact-section {
    padding: var(--section-padding) 0;
    background: white;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: stretch;
}

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

.contact-info .section-header {
    margin-bottom: 24px;
}

.contact-title {
    font-size: clamp(32px, 4vw, 48px);
}

.contact-subtitle {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 48px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: auto;
}

.contact-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.contact-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-cream);
    border-radius: var(--radius-md);
    color: var(--accent-deep);
    flex-shrink: 0;
}

.contact-item > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.contact-item a {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.contact-item a:hover {
    color: var(--primary-color);
}

.contact-item span:not(.contact-label) {
    font-size: 18px;
    color: var(--text-primary);
}

/* Contact Form */
.contact-form {
    background: var(--bg-cream);
    padding: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
}

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

.form-group {
    position: relative;
    margin-bottom: 28px;
}

.form-group.full-width {
    grid-column: span 2;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group.full-width textarea {
    flex: 1;
    min-height: 100px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 20px 0 12px;
    font-family: var(--font-body);
    font-size: 16px;
    border: none;
    border-bottom: 2px solid rgba(10, 37, 64, 0.1);
    background: transparent;
    transition: var(--transition);
    color: var(--text-primary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
}

.input-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-group input:focus ~ .input-line,
.form-group select:focus ~ .input-line,
.form-group textarea:focus ~ .input-line {
    width: 100%;
}

.form-group label {
    position: absolute;
    top: 20px;
    left: 0;
    font-size: 15px;
    color: var(--text-muted);
    pointer-events: none;
    transition: var(--transition);
}

.form-group label.select-label {
    top: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: 0;
    font-size: 12px;
    color: var(--accent-deep);
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234a5568' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: 24px;
    cursor: pointer;
}

.form-group textarea {
    resize: none;
    padding-top: 28px;
}

.contact-form .btn-primary {
    margin-top: auto;
}

@media (max-width: 900px) {
    .contact-section {
        padding: var(--section-padding-mobile) 0;
    }
    
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .contact-form {
        padding: 32px 24px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-group.full-width {
        grid-column: span 1;
    }
    
    .contact-details {
        margin-top: 0;
    }
}

/* ================================
   Buttons
   ================================ */
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 36px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 100px;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.btn-primary {
    background: var(--primary-deep);
    color: var(--text-light);
    box-shadow: 0 4px 20px rgba(10, 37, 64, 0.2);
}

.btn-primary svg {
    transition: transform 0.3s ease;
}

.btn-primary:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(10, 37, 64, 0.25);
}

.btn-primary:hover svg {
    transform: translateX(4px);
}

.btn-secondary {
    background: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

.btn-secondary svg {
    transition: transform 0.3s ease;
}

.btn-secondary:hover {
    background: var(--accent-color);
    color: var(--primary-deep);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.btn-secondary:hover svg {
    transform: translateX(4px);
}

/* ================================
   Footer
   ================================ */
.footer {
    background: var(--bg-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 60px 0 30px;
    position: relative;
    overflow: hidden;
}

.footer-top-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color), var(--primary-color));
}

/* Motion graphics for footer */
.footer::before,
.footer::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.footer::before {
    width: 400px;
    height: 400px;
    top: -150px;
    left: -100px;
    background: radial-gradient(circle, rgba(201, 166, 107, 0.1) 0%, rgba(201, 166, 107, 0.02) 40%, transparent 70%);
    animation: floatGoldLight 25s ease-in-out infinite;
}

.footer::after {
    width: 300px;
    height: 300px;
    bottom: -100px;
    right: -50px;
    background: radial-gradient(circle, rgba(45, 106, 159, 0.08) 0%, transparent 70%);
    animation: floatBlueLight 22s ease-in-out infinite;
}

.footer-main {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.footer-brand {
    max-width: 320px;
}

.footer-logo {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.footer-logo .logo-text {
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 800;
    color: white;
    letter-spacing: -0.02em;
}

.footer-logo .logo-est {
    font-family: var(--font-accent);
    font-size: 14px;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--accent-color);
}

.footer-tagline {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
    opacity: 0.7;
}

.social-links {
    display: flex;
    gap: 12px;
}

.social-links a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--primary-deep);
    transform: translateY(-3px);
}

.footer-links {
    display: flex;
    gap: 60px;
    position: relative;
    z-index: 2;
}

.footer-col h4 {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: var(--transition);
    font-size: 14px;
}

.footer-col a:hover {
    color: var(--accent-color);
}

.footer-bottom {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
}

.footer-bottom p {
    font-size: 13px;
    opacity: 0.5;
}

@media (max-width: 900px) {
    .footer {
        padding: 48px 0 24px;
    }
    
    .footer-main {
        flex-direction: column;
        gap: 36px;
    }
    
    .footer-links {
        gap: 36px;
    }
}

@media (max-width: 480px) {
    .footer-links {
        flex-direction: column;
        gap: 28px;
    }
}

/* ================================
   Animations & Scroll Effects
   ================================ */

/* Selection styling */
::selection {
    background: var(--accent-color);
    color: var(--primary-deep);
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 4px;
}

/* Smooth scrollbar with gold thumb and dark blue track */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--primary-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-warm);
}


/* ================================
   Skip-to-main-content link  (Batch 7a)
   ================================
   Visually hidden until focused via Tab. When a keyboard user presses
   Tab as the first action after page load, this link appears in the
   top-left corner. Activating it (Enter) moves focus past the nav to
   the main content. Crucial for keyboard-only navigation.
*/
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 9999;
    padding: 12px 20px;
    background: var(--primary-deep);
    color: white;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--accent-color);
    border-radius: 4px;
    transition: top 0.2s ease;
}
.skip-to-main:focus {
    top: 16px;
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Prevent the <main> element from showing a focus ring when
   focused programmatically via the skip link (we want focus
   there, but not a visible outline since the user just clicked
   a skip link — they know where they are). */
main:focus {
    outline: none;
}


/* ================================
   Reduced motion support  (Batch 7a)
   ================================
   Respects user's operating system preference for reduced motion.
   Set via: System Preferences → Accessibility → Display → Reduce motion (macOS),
            Settings → Ease of Access → Display → Show animations (Windows),
            Settings → Accessibility → Reduce Motion (iOS/Android).

   Strategy: zero-duration animations and transitions rather than removing them
   entirely. This preserves end states (elements stay visible where they would
   have been after animating) without the animation playing.

   Uses !important to override more specific selectors throughout the codebase.
   This is the appropriate use of !important — a user-preference override that
   must win against any other rule.
*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Parallax backgrounds and decorative infinite animations:
       explicitly cancel instead of racing at 0.01ms. */
    .hero-bg-image,
    .service-hero-bg-image,
    .siteworks-hero-bg-image,
    .cta-mouse-glow,
    .shimmer,
    .title-final.visible.ready {
        animation: none !important;
        transform: none !important;
    }
}


/* ================================
   Below-the-fold paint optimization  (Batch 11)
   ================================
   content-visibility: auto tells the browser to skip rendering (layout, paint)
   for these sections until they scroll near the viewport. This is the biggest
   "free" modern CSS perf win — speeds up initial paint noticeably on content-
   heavy pages.

   contain-intrinsic-size reserves space so the scrollbar behaves correctly
   even before the section has been laid out. Values are rough heights in the
   range that each section actually occupies.

   Hero is excluded — we want it to render immediately (it's above the fold).
*/
.services-overview,
.featured-projects,
.stats-section,
.about-section,
.contact-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}