/**
 * 4TS Main Stylesheet
 * To The Top Tree Service
 *
 * Table of Contents:
 * 1. Font Declarations
 * 2. CSS Custom Properties (Design Tokens)
 * 3. Reset & Base Styles
 * 4. Accessibility
 * 5. Utility Classes
 * 6. Buttons
 * 7. Typography
 * 8. Header (Top Bar + Main Nav)
 * 9. Hero
 * 10. Content Blocks (Placeholder)
 * 11. Footer
 * 12. Responsive Overrides
 */

/* ==========================================================================
   1. FONT DECLARATIONS
   ========================================================================== */

@font-face {
    font-family: 'Gotham';
    src: url('../../../font/Gotham-Book.woff2') format('woff2'),
         url('../../../font/Gotham-Book.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../../../font/Gotham-BookItalic.woff2') format('woff2'),
         url('../../../font/Gotham-BookItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../../../font/Gotham-Medium.woff2') format('woff2'),
         url('../../../font/Gotham-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../../../font/Gotham-MediumItalic.woff2') format('woff2'),
         url('../../../font/Gotham-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../../../font/Gotham-Bold.woff2') format('woff2'),
         url('../../../font/Gotham-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../../../font/Gotham-BoldItalic.woff2') format('woff2'),
         url('../../../font/Gotham-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   2. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */

:root {
    /* Colors */
    --color-brown: #4E2F09;
    --color-dark-green: #0E4329;
    --color-mid-green: #789B4A;
    --color-light-green: #B2D335;
    --color-bg-green: #F4FADD;
    --color-orange: #D37E00;
    --color-body-text: #707070;
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* Typography */
    --font-primary: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-book: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Font sizes */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 2rem;      /* 32px */
    --text-4xl: 2.5rem;    /* 40px */
    --text-5xl: 3.5rem;    /* 56px */

    /* Spacing */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    --space-4xl: 6rem;     /* 96px */

    /* Container widths */
    --width-sm: 640px;
    --width-md: 768px;
    --width-lg: 1024px;
    --width-xl: 1280px;
    --width-2xl: 1440px;

    /* Brand angle */
    --brand-angle: 20deg;

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

    /* Animation system */
    --anim-duration: 350ms;
    --anim-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --anim-distance: 24px;
    --anim-stagger: 100ms;

    /* Z-index scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-dropdown: 2px 2px 6px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   3. RESET & BASE STYLES
   ========================================================================== */

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-book);
    line-height: 1.6;
    color: var(--color-body-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a {
    color: var(--color-mid-green);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-orange);
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-md) 0;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
}

h1 {
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}

h2 {
    font-size: var(--text-4xl);
    color: var(--color-orange);
}

h3 {
    font-size: var(--text-2xl);
    color: var(--color-orange);
}

p {
    margin: 0 0 var(--space-md) 0;
}

p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   4. ACCESSIBILITY
   ========================================================================== */

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

/* Skip link */
.skip {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 9999;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-dark-green);
    color: var(--color-white);
    font-weight: var(--font-weight-medium);
}

.skip:focus {
    top: 0;
    outline: 2px solid var(--color-light-green);
    outline-offset: 2px;
}

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--color-light-green);
    outline-offset: 2px;
}

/* ==========================================================================
   5. UTILITY CLASSES
   ========================================================================== */

/* Containers - XD uses 140px left/right margins on 1920px canvas */
.wrap {
    width: 100%;
    max-width: 1640px; /* 1920 - (140×2) */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

/* Content blocks use narrower container — 1260px per XD content width
   This scopes to .block sections only, leaving header/nav/hero unaffected */
.block .wrap {
    max-width: 1260px;
}

.wrap-xl {
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 140px; /* XD grid margin */
    padding-right: 140px;
}

/* Padding utilities */
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }

.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Flex utilities */
.d-flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 24px;
    font-family: var(--font-primary);
    font-size: 1rem; /* 16px */
    font-weight: var(--font-weight-bold);
    line-height: 1.1875; /* 19px */
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary {
    background-color: var(--color-light-green);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-mid-green);
    color: var(--color-white);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-mid-green);
    border: 2px solid var(--color-mid-green);
}

.btn-outline:hover {
    background-color: var(--color-mid-green);
    color: var(--color-white);
}

/* ==========================================================================
   7. TYPOGRAPHY
   ========================================================================== */

.eyebrow {
    display: block;
    margin-bottom: var(--space-sm);
    font-size: 1.0625rem; /* 17px */
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-light-green);
}

.callout {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-mid-green);
}

/* ==========================================================================
   8. HEADER (TOP BAR + MAIN NAV)
   Per XD: Brown bar with angled corners on BOTH sides, logo overlaps UP from nav
   ========================================================================== */

.site-header {
    position: relative;
    z-index: var(--z-sticky);
}

/* Top Bar - Brown bar (960px) with angled corner caps (60px each) = 1080px total */
/* Shape: ◥████████████████████████████████◤ */
.topbar {
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    background-color: var(--color-white);
}

.topbar__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 960px;
    height: 52px;
    background-color: var(--color-brown);
    color: var(--color-white);
}

/* Left corner cap - solid at top, tapers down toward bar */
.topbar__bar::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(
        to bottom left,
        var(--color-brown) 50%,
        transparent 50%
    );
}

/* Right corner cap - solid at top, tapers down toward bar */
.topbar__bar::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(
        to bottom right,
        var(--color-brown) 50%,
        transparent 50%
    );
}

/* Contact info - centered in bar, influenced by social cluster width */
.topbar__contact {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    /* flex-grow allows centering while socials stay right */
    flex: 1;
    justify-content: center;
    padding-left: 16px; /* Balance with social cluster margin */
}

.topbar__phone,
.topbar__email {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    text-decoration: none;
}

.topbar__email {
    color: var(--color-light-green);
}

.topbar__phone:hover,
.topbar__email:hover {
    color: var(--color-light-green);
}

/* Social icons - right-aligned, 16px from right edge */
.topbar__social {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-right: 16px;
}

.topbar__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transition: color var(--transition-fast);
}

.topbar__social a:hover {
    color: var(--color-light-green);
}

.topbar__social svg {
    width: 28px;
    height: 28px;
}

/* Primary Navigation */
.primary-nav {
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.primary-nav__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Logo overlaps UP into the topbar area and breaks out left */
.primary-nav__logo {
    position: absolute;
    left: -190px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -20px; /* Shift up to overlap topbar */
    z-index: 10;
    flex-shrink: 0;
}

.primary-nav__logo img {
    width: 142px;
    height: 143px;
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    background-color: var(--color-brown);
    border-radius: 0;
    transition: all var(--transition-base);
}

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

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

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

/* Navigation menu */
.primary-nav__menu {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.primary-nav__list {
    display: flex;
    align-items: center;
    gap: 50px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-nav__list > .menu-item > a {
    display: block;
    padding: var(--space-sm) 0;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    line-height: 19px;
    color: var(--color-orange);
    transition: color var(--transition-fast);
}

/* Tree Services is green by default */
.primary-nav__list > .menu-item:first-child > a {
    color: var(--color-mid-green);
}

.primary-nav__list > .menu-item > a:hover {
    color: var(--color-mid-green);
}

.primary-nav__list > .menu-item:first-child > a:hover {
    color: var(--color-orange);
}

/* Dropdown menus */
.primary-nav__list .menu-item-has-children {
    position: relative;
}

/* Dropdown indicator: + sign - Gotham Light 23px per XD */
.primary-nav__list .submenu-toggle {
    font-size: 23px;
    font-weight: 300;
    margin-left: 4px;
}

.primary-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-white);
    box-shadow: var(--shadow-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-fast);
    list-style: none;
    padding: var(--space-sm) 0;
    margin: 0;
}

.primary-nav__list .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.primary-nav__list .sub-menu a {
    display: block;
    padding: var(--space-sm) var(--space-lg);
    color: var(--color-orange);
    font-size: var(--text-base);
    white-space: nowrap;
}

.primary-nav__list .sub-menu a:hover {
    color: var(--color-mid-green);
}

/* CTA button in nav */
.primary-nav__cta {
    margin-left: var(--space-md);
}

/* Nav overlay for mobile */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-sticky) - 1);
}

/* At 1400px, snap logo back (still absolute, just remove offset) */
@media (max-width: 1400px) {
    .primary-nav__logo {
        left: 0;
    }

    .primary-nav__inner {
        padding-left: 32px;
        padding-right: 32px;
    }

    .primary-nav__list {
        gap: 24px;
    }
}

/* ==========================================================================
   MOBILE NAV (1080px breakpoint)

   TOUCH DEVICE PATTERN: No hover effects at mobile sizes.
   Hover effects cause double-tap issues on touch - first tap triggers hover,
   second tap triggers click. This is a universal pattern for this codebase.
   ========================================================================== */

@media (max-width: 1080px) {
    /* Show hamburger menu toggle - light green, simple rectangle */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        background-color: var(--color-light-green);
        border-radius: 2px;
        gap: 5px;
        /* Z-index to appear on top of full-screen nav */
        position: relative;
        z-index: calc(var(--z-modal) + 10);
    }

    .menu-toggle span {
        background-color: var(--color-white);
        width: 24px;
        height: 3px;
    }

    /* No hover effect - only active state (touch pattern) */
    .menu-toggle.active {
        background-color: var(--color-mid-green);
    }

    /* Logo positioning at mobile - z-index to appear on top of nav */
    .primary-nav__logo {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        margin-top: 0;
        z-index: calc(var(--z-modal) + 10);
    }

    .primary-nav__logo img {
        width: 100px;
        height: auto;
    }

    /* Padding aligns logo/hamburger with topbar bar edges (32px + 60px cap) */
    .primary-nav__inner {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 16px calc(32px + 60px);
    }

    /* Mobile nav - FULL SCREEN overlay */
    .primary-nav__menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--color-dark-green);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        /* Padding top accounts for logo/close bar */
        padding: 140px 24px 40px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.3s ease;
        z-index: var(--z-modal);
        overflow-y: auto;
    }

    .primary-nav__menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Body when nav is open - prevent scroll */
    body.nav-open {
        overflow: hidden;
    }

    /* Nav overlay - hidden, we use full-screen menu instead */
    .nav-overlay {
        display: none;
    }

    /* Mobile nav list */
    .primary-nav__list {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
    }

    .primary-nav__list > .menu-item {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .primary-nav__list > .menu-item > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 0;
        font-size: 22px;
        color: var(--color-white);
    }

    /* Neutralize desktop hover effects (touch pattern) */
    .primary-nav__list > .menu-item > a:hover,
    .primary-nav__list > .menu-item:first-child > a:hover {
        color: var(--color-white);
    }

    /* Mobile dropdown indicator */
    .primary-nav__list .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        font-size: 28px;
        font-weight: 300;
        color: var(--color-light-green);
        transition: transform 0.3s ease;
    }

    .primary-nav__list .menu-item-has-children.open > a .submenu-toggle {
        transform: rotate(45deg);
    }

    /* Mobile submenu - collapsed by default, opened via .open class not hover */
    .primary-nav__list .sub-menu {
        position: static;
        transform: none;
        background: transparent;
        box-shadow: none;
        padding: 0 0 0 var(--space-md);
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    /* Neutralize desktop hover dropdown (touch pattern - use .open class instead) */
    .primary-nav__list .menu-item-has-children:hover > .sub-menu {
        opacity: 0;
        visibility: hidden;
    }

    .primary-nav__list .menu-item-has-children.open > .sub-menu {
        max-height: 500px;
        opacity: 1;
        visibility: visible;
    }

    .primary-nav__list .sub-menu li {
        border-bottom: none;
    }

    .primary-nav__list .sub-menu a {
        padding: 14px 0;
        font-size: 18px;
        color: rgba(255, 255, 255, 0.7);
        white-space: normal;
    }

    /* Neutralize desktop hover effects (touch pattern) */
    .primary-nav__list .sub-menu a:hover {
        color: rgba(255, 255, 255, 0.7);
        background-color: transparent;
    }

    /* Mobile CTA button - at bottom of nav */
    .primary-nav__cta {
        margin-left: 0;
        margin-top: auto;
        padding-top: var(--space-xl);
        width: 100%;
        text-align: center;
    }

    /* Larger, better-centered button for mobile nav */
    .primary-nav__cta.btn {
        font-size: 1.25rem; /* 20px - bigger for mobile */
        line-height: 1;
        padding: 20px 24px; /* Slightly less vertical, text centers better */
    }
}

/* ==========================================================================
   9. HERO — Rewritten to match XD design
   Green overlay with diagonal clip-path reveals background image on right
   ========================================================================== */

/* Hero band wrapper - full width green background */
.hero-band {
    background-color: var(--color-dark-green);
    clip-path: inset(0 -200px 0 -200px); /* Allow extension on both left (leaves) and right (plate) */
}

.hero {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    aspect-ratio: 1920 / 818;
    overflow: visible;
}

/* ==========================================================================
   INTERIOR HERO - Layer-based approach

   Layers (bottom to top):
   1. hero-band: dark green background
   2. hero__background: image "plate" with clip-path, positioned from right
   3. hero__leaves: decorative leaves layer
   4. hero__content-wrap: text content layer
   ========================================================================== */

.hero--interior {
    aspect-ratio: 1920 / 594;
    clip-path: inset(0 -200px 0 -200px); /* Allow extension on both sides */
}

/* ==========================================================================
   INTERIOR HERO - Plate approach

   The plate is a self-contained unit with image + triangles inside.
   Positioned so 350px is off-screen to the right at 1920px.
   Everything scales together proportionally.
   ========================================================================== */

/* ==========================================================================
   PHASE 1: Image in plate only (triangles hidden)
   Position plate from LEFT where image visibility starts.
   Image extends naturally to the right, clipped by overflow: hidden on hero.
   ========================================================================== */

/* The plate container - holds image (and later, triangles) */
.hero__plate {
    position: absolute;
    top: 0;
    left: calc(50% - 45px);  /* Offset from center */
    height: 100%;
    z-index: 1; /* Above the green overlay background */
}

/* Image inside plate - height controlled, maintains proportions */
.hero__plate-img {
    display: block;
    height: 100%;
    width: auto;  /* Maintains aspect ratio - image extends right as needed */
    max-width: none; /* Override global img max-width: 100% */
}

/* Triangles - HIDDEN FOR PHASE 1 */
.hero__plate-triangle {
    display: none;
    /* Below will be enabled in Phase 2/3 */
    position: absolute;
    z-index: 2;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* Left triangle - creates main diagonal edge (Phase 2) */
.hero__plate-triangle--left {
    display: block; /* Override the hide */
    top: 0;
    left: 0;
    height: 100%;
    width: 27.76vw;
    max-width: 533px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 533 594' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 533,0 0,594' fill='%230E4329'/%3E%3C/svg%3E");
}

/* Corner triangle - creates bottom-right cutoff (Phase 3) */
.hero__plate-triangle--corner {
    display: block; /* Override the hide */
    bottom: 0;
    right: 0;
    height: 100%;
    width: 27.76vw;
    max-width: 533px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 533 594' preserveAspectRatio='none'%3E%3Cpolygon points='533,594 0,594 533,0' fill='%230E4329'/%3E%3C/svg%3E");
}

/* Interior hero: green fill for left content area (behind plate) */
.hero--interior .hero__overlay--left {
    clip-path: none;
    inset: 0;
    background-color: var(--color-dark-green);
    z-index: 0; /* Behind the plate */
}

/* Interior hero: hide the corner overlay (triangle is inside plate now) */
.hero--interior .hero__overlay--corner {
    display: none;
}

/* Interior hero content positioning - vertically centered */
.hero--interior .hero__content-wrap {
    align-items: center;
}

.hero--interior .hero__content {
    transform: none;
}

/* ==========================================================================
   HOME HERO - Plate approach (adapted from interior)

   Same concept as interior but with:
   - Wider offset: calc(50% - 305px) vs calc(50% - 45px)
   - Larger triangles: 730px wide for 820px height
   - Aspect ratio: 1920 / 818
   ========================================================================== */

.hero--home {
    aspect-ratio: 1920 / 818;
}

/* Home plate - 34.11% = 655px at 1920px, scales proportionally with triangles/image */
.hero--home .hero__plate {
    left: 34.11%;
}

/* Home left triangle - 730px wide for 820px height, same angle as original */
.hero--home .hero__plate-triangle--left {
    display: block;
    width: 38vw;
    max-width: 730px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 730 820' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 730,0 0,820' fill='%230E4329'/%3E%3C/svg%3E");
}

/* Home corner triangle - 730px wide for 820px height */
.hero--home .hero__plate-triangle--corner {
    display: block;
    width: 38vw;
    max-width: 730px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 730 820' preserveAspectRatio='none'%3E%3Cpolygon points='730,820 0,820 730,0' fill='%230E4329'/%3E%3C/svg%3E");
}

/* Home overlay - simple green fill (no clip-path needed, plate handles diagonal) */
.hero--home .hero__overlay--left {
    clip-path: none;
    inset: 0;
    background-color: var(--color-dark-green);
    z-index: 0;
}

/* ==========================================================================
   LEGACY: Background image approach (kept for reference/mobile fallback)
   ========================================================================== */

/* Background image — positioned to fill only the visible diagonal window
   XD visible area: x=749 to x=1920 (39% to 100%), full height
   Image is 3:2, window is ~1.43:1 — minimal cropping needed */
.hero__background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 36.5%;  /* Aligns with bottom of main diagonal */
    right: 0;
    z-index: 0;
}

.hero__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Green overlay — two parts to create the diagonal window with corner cutoff
   Based on XD path: image bounded by main diagonal AND bottom-right diagonal */
.hero__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-dark-green);
    z-index: 1;
}

/* Left overlay - main diagonal
   Shrunk mask by ~50px (2.5%) to reveal more image */
.hero__overlay--left {
    clip-path: polygon(
        0 0,        /* top-left */
        74.5% 0,    /* top edge where diagonal starts */
        36.5% 100%, /* bottom edge where diagonal ends */
        0 100%      /* bottom-left */
    );
}

/* Bottom-right corner triangle */
.hero__overlay--corner {
    clip-path: polygon(
        73.5% 100%, /* where right diagonal meets bottom */
        100% 100%,  /* bottom-right corner */
        100% 24%    /* where right diagonal meets right edge */
    );
}

/* Leaf SVGs — positioned on the green overlay area */
.hero__leaves {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2; /* Above overlay, below content */
}

.hero__leaf {
    position: absolute;
    opacity: 0.22; /* 22% per XD */
}

/* Leaf sizes from XD at 1920px - these are MAX sizes, scale down responsively */

.hero__leaf--1 {
    top: 4%;
    left: 33.7%;
    width: 117px;
    height: 152px;
}

.hero__leaf--2 {
    top: 31%;
    left: -4%;
    width: 207px;
    height: 236px;
}

.hero__leaf--3 {
    top: 75%;
    left: 24%;
    width: 231px;
    height: 290px;
    transform: rotate(20deg);
}

.hero__leaf--4 {
    top: 70%;
    left: 91%;
    width: 130px;
    height: 245px;
    transform: rotate(-25deg);
}

/* Content wrapper — padding aligns with logo position
   Hero is 1920px centered, logo is at (viewport-960)/2 - 190
   For alignment: (viewport-1920)/2 + 290 = (viewport-960)/2 - 190 */
.hero__content-wrap {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 290px;
}

.hero__content {
    width: 55%;
    max-width: 750px;
    transform: translateY(-64px); /* Shifted up per XD design */
}

/* Eyebrow styling */
.hero__content .eyebrow {
    color: var(--color-light-green);
    margin-bottom: var(--space-md);
}

/* H1 styling — fluid scaling for hero headlines
   Scales smoothly: ~48px at 1920px → ~40px at 1280px → ~32px at 1024px → ~24px at 768px */
.hero__content h1 {
    color: var(--color-white);
    margin-bottom: var(--space-lg);
    font-size: clamp(24px, 2.5vw + 8px, 54px);
}

/* Body reverse text */
.hero__body-reverse {
    font-size: 20px;
    color: var(--color-white);
    opacity: 0.9;
    margin-top: var(--space-xl);   /* 32px */
    margin-bottom: var(--space-2xl); /* 48px */
}

/* Hero responsive — adjust padding/content width, keep diagonal fixed until mobile */

/* 1400px — small diagonal shift (~100px / 5%), adjust padding and leaf scale */
@media (max-width: 1400px) {
    .hero__background {
        left: 41.5%;
    }

    .hero__overlay--left {
        clip-path: polygon(0 0, 79.5% 0, 41.5% 100%, 0 100%);
    }

    .hero__overlay--corner {
        clip-path: polygon(78.5% 100%, 100% 100%, 100% 38%);
    }

    .hero__content-wrap {
        padding-left: 140px;
    }

    /* Scale leaves ~85% */
    .hero__leaf--1 { width: 100px; height: auto; }
    .hero__leaf--2 { width: 176px; height: auto; }
    .hero__leaf--3 { width: 196px; height: auto; }
    .hero__leaf--4 { width: 110px; height: auto; }
}

/* 1200px — tighter padding, narrower content, smaller leaves */
@media (max-width: 1200px) {
    .hero__content-wrap {
        padding-left: 100px;
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    .hero__content {
        width: 48%;
        transform: none; /* Remove vertical offset, use normal centering */
    }

    /* Interior hero: switch to centering at responsive sizes */
    .hero--interior .hero__content-wrap {
        align-items: center;
        padding-top: var(--space-xl);
    }

    /* Tighter spacing on text elements */
    .hero__content h1 {
        margin-bottom: var(--space-md);
    }

    .hero__body-reverse {
        margin-top: var(--space-md);
        margin-bottom: var(--space-lg);
    }

    /* Scale leaves ~70% */
    .hero__leaf--1 { width: 82px; height: auto; }
    .hero__leaf--2 { width: 145px; height: auto; }
    .hero__leaf--3 { width: 162px; height: auto; }
    .hero__leaf--4 { width: 91px; height: auto; }
}

/* 1024px — tablet, ensure vertical padding */
@media (max-width: 1024px) {
    .hero__content-wrap {
        padding-left: var(--space-xl);
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .hero__content {
        width: 52%;
    }

    .hero__body-reverse {
        margin-top: var(--space-sm);
        margin-bottom: var(--space-md);
        font-size: var(--text-base);
    }

    /* Scale leaves ~55% */
    .hero__leaf--1 { width: 64px; height: auto; }
    .hero__leaf--2 { width: 114px; height: auto; }
    .hero__leaf--3 { width: 127px; height: auto; }
    .hero__leaf--4 { width: 72px; height: auto; }
}

/* 900px — approaching mobile, tighter spacing */
@media (max-width: 900px) {
    .hero__content {
        width: 58%;
    }

    .hero__content .eyebrow {
        margin-bottom: var(--space-xs);
    }

    .hero__content h1 {
        margin-bottom: var(--space-sm);
    }

    /* Scale leaves ~45% */
    .hero__leaf--1 { width: 53px; height: auto; }
    .hero__leaf--2 { width: 93px; height: auto; }
    .hero__leaf--3 { width: 104px; height: auto; }
    .hero__leaf--4 { width: 59px; height: auto; }
}

/* 768px — mobile: full green, no image, centered text, leaves 1 and 4 only */
@media (max-width: 768px) {
    .hero {
        aspect-ratio: auto;
        min-height: auto;
    }

    /* Hide the image entirely (old approach) */
    .hero__background {
        display: none;
    }

    /* Hide the plate (new approach) */
    .hero--home .hero__plate {
        display: none;
    }

    /* Reset clip-path for mobile */
    .hero--home {
        clip-path: none;
    }

    /* Full green coverage, no diagonal */
    .hero__overlay--left {
        clip-path: none;
    }

    .hero__overlay--corner {
        display: none;
    }

    /* Center content with 35px horizontal padding per XD grid */
    .hero__content-wrap {
        padding: 112px 35px;
        justify-content: center;
    }

    .hero__content {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    /* Typography per XD mobile artboard */
    .hero__content .eyebrow {
        font-size: 17px;
        margin-bottom: 20px;
    }

    .hero__content h1 {
        font-size: 45px;
        line-height: 1.2;
        margin-bottom: 20px;
        text-wrap: balance;
    }

    .hero__body-reverse {
        font-size: 20px;
        margin-top: var(--space-sm);
        margin-bottom: 64px;
        text-wrap: balance;
    }

    /* Center the CTA - auto width, not full */
    .hero__content .btn {
        display: inline-block;
        width: auto;
        font-size: 17px;
    }

    /* FIXED: Hide leaves 2 and 3, keep 1 and 4 only per XD */
    .hero__leaf--2,
    .hero__leaf--3 {
        display: none;
    }

    /* leaf--1: Upper left */
    .hero__leaf--1 {
        top: 5%;
        left: -8%;
        right: auto;
        width: 110px;
        transform: none;
    }

    /* leaf--4: Lower right */
    .hero__leaf--4 {
        top: 65%;
        left: auto;
        right: -6%;
        width: 110px;
        transform: rotate(-25deg);
    }
}

/* Interior hero breaks to mobile earlier - not enough room for image + content */
@media (max-width: 1160px) {
    .hero--interior {
        aspect-ratio: auto;
        overflow: visible; /* Reset overflow for mobile */
    }

    /* Hide the plate (image + triangles) - interior only */
    .hero--interior .hero__plate {
        display: none;
    }

    /* Full green coverage */
    .hero--interior .hero__overlay--left {
        inset: 0;
        width: auto;
        height: auto;
        background: var(--color-dark-green);
    }

    /* Center content */
    .hero--interior .hero__content-wrap {
        padding: 80px 35px;
        justify-content: center;
    }

    .hero--interior .hero__content {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
}

/* --- Legal Page Content --- */
.legal-content {
    padding: var(--space-3xl) 0;
    background: var(--color-white);
}

.legal-content__container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.legal-content__header {
    margin-bottom: var(--space-2xl);
}

.legal-content__title {
    position: relative;
    color: var(--color-orange);
    font-size: 36px;
    line-height: 1;
    margin: 0 0 var(--space-xl) 0;
    padding: 8px 0 8px var(--space-lg);
    border-left: 10px solid var(--color-light-green);
}


.legal-content h2,
.legal-content h3 {
    color: var(--color-dark-green);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.legal-content h2 {
    font-size: 28px;
}

.legal-content h3 {
    font-size: 22px;
}

.legal-content p {
    margin-bottom: var(--space-md);
    line-height: 1.7;
}

.legal-content ul {
    list-style: disc;
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.legal-content ol {
    list-style: decimal;
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.legal-content li {
    margin-bottom: var(--space-xs);
    line-height: 1.6;
}

.legal-content a {
    color: var(--color-mid-green);
    text-decoration: underline;
}

.legal-content a:hover {
    color: var(--color-dark-green);
}

@media (max-width: 768px) {
    .legal-content__title {
        font-size: 28px;
    }
}

/* ==========================================================================
   10. CONTENT BLOCKS
   ========================================================================== */

.block {
    padding: var(--space-3xl) 0;
}

.block--bg-white {
    background-color: var(--color-white);
}

.block--bg-light-green {
    background-color: var(--color-bg-green);
}

.block--bg-dark-green {
    background-color: var(--color-dark-green);
    color: var(--color-white);
}

/* --- Intro With Image Block --- */
.block--intro-with-image {
    padding-top: 64px;
    padding-bottom: 128px; /* Extra space for branch extending below */
}

.intro-with-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px; /* Exact 64px per design spec — do NOT change to 32px */
    align-items: center;
}

.intro-with-image__images {
    position: relative;
    /* Let content determine height */
    padding-left: 60px; /* Room for branch */
}

/* Diamond: clip-path approach — no rotation needed, any image works predictably */
.intro-with-image__diamond {
    position: relative;
    width: 100%; /* Fills column */
    aspect-ratio: 1;
    z-index: 2;
}

/* Green border layer - clipped to diamond shape */
.intro-with-image__diamond::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-light-green);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Image container - inset creates the border width
   14px inset ≈ 10px visual border on angled diamond edges (10 × √2) */
.intro-with-image__diamond-inner {
    position: absolute;
    inset: 14px;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    overflow: hidden;
}

.intro-with-image__diamond-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Any image fills predictably */
}

/* Branch: extends from bottom-left of diamond */
.intro-with-image__branch {
    position: absolute;
    left: -25%;
    bottom: -45px;
    width: 330px;
    z-index: 3; /* Above diamond (z-index: 2) */
}

.intro-with-image__branch img {
    width: 100%;
    height: auto;
    /* No rotation - image is pre-cropped correctly */
}

/* Typography: sizes from Figma (font-size/line-height/weight) */
.intro-with-image__content .eyebrow {
    color: var(--color-light-green); /* #B2D335 */
    font-size: 17px;
    line-height: 20px;
    font-weight: var(--font-weight-medium);
}

.intro-with-image__content h2 {
    margin-top: 24px;
    font-size: 54px;
    line-height: 64px;
    font-weight: var(--font-weight-medium);
    text-wrap: balance;
}

.intro-with-image__body {
    margin-top: 24px;
    font-size: 20px;
    line-height: 30px;
    font-weight: var(--font-weight-book);
    color: var(--color-body-text);
}

.intro-with-image__body p {
    margin-top: 24px;
}

.intro-with-image__body p:first-child {
    margin-top: 0; /* First paragraph doesn't need top margin */
}

.intro-with-image__body strong,
.intro-with-image__body b {
    color: var(--color-light-green) !important;
    font-weight: var(--font-weight-bold) !important;
}

.intro-with-image__content .callout {
    margin-top: 24px;
}

/* --- Intro With Image: 960px breakpoint --- */
@media (max-width: 960px) {
    .block--intro-with-image {
        padding-bottom: 80px; /* Less bottom space needed when centered */
    }

    .block--intro-with-image .wrap {
        padding-left: 40px;
        padding-right: 40px;
    }

    .intro-with-image {
        grid-template-columns: 1fr;
        gap: 72px; /* 40px visual + ~32px for branch extending below (bottom: -8% of 400px max) */
    }

    .intro-with-image__images {
        order: -1; /* Images first on mobile */
        padding-left: 0; /* No offset needed when centered */
        width: 80%;
        max-width: 400px; /* Cap size so it doesn't get huge */
        margin: 0 auto;
    }

    /* Diamond centers within __images */
    .intro-with-image__diamond {
        margin: 0 auto;
    }

    /* Branch scales proportionally with diamond
       Desktop: 330px branch on ~598px diamond ≈ 55% of diamond width
       Using percentage keeps them in proportion at any size */
    .intro-with-image__branch {
        width: 55%;
        left: -20%;
        bottom: -8%; /* Percentage-based scales with container */
    }

    .intro-with-image__content {
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        text-wrap: balance; /* Prevent ugly centered line breaks */
    }

    .intro-with-image__content h2 {
        font-size: 48px;
        line-height: 56px;
    }

    .intro-with-image__body {
        font-size: 18px;
        line-height: 28px;
    }

}

/* --- Service Cards Block --- */
.block--service-cards {
    padding-top: 112px;
    padding-bottom: 160px;
}

/* Photo variant uses wider 1360px container and equal top/bottom padding */
.block--service-cards:has(.service-card--has-photo) {
    padding-bottom: 112px; /* Match top padding on interior */
}

.block--service-cards:has(.service-card--has-photo) .wrap {
    max-width: 1360px;
}

.service-cards__heading {
    font-size: 54px;
    line-height: 64px;
    font-weight: var(--font-weight-medium);
    color: var(--color-orange);
    margin-bottom: 32px;
    text-wrap: balance;
}

.service-cards__intro {
    font-size: 20px;
    line-height: 30px;
    font-weight: var(--font-weight-book);
    color: var(--color-body-text);
    max-width: 800px;
    margin: 0 auto 64px;
}

.service-cards__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px; /* 50px both directions - listing page default */
}

/* Home page: wider column gap */
.home .service-cards__grid {
    gap: 50px 160px;
}

/* Card wrapper - stripe + content side by side */
.service-card {
    display: flex;
}

/* Green stripe - 20px wide, full height */
.service-card__stripe {
    width: 20px;
    flex-shrink: 0;
    background-color: var(--color-light-green);
}

/* Card content - horizontal layout: icon | text */
.service-card__content {
    flex: 1;
    display: flex;
    align-items: flex-start; /* Top-align icon with text */
    gap: 24px;
    padding: 50px 40px 75px 32px;
    background: var(--color-white);
}

/* Icon - sized by width, height auto for varying SVG heights */
.service-card__icon {
    width: 45px;
    flex-shrink: 0;
}

.service-card__icon img {
    width: 100%;
    height: auto;
}

/* Text container - takes remaining space */
.service-card__text {
    flex: 1;
}

.service-card__title {
    font-size: 24px;
    line-height: 29px;
    font-weight: var(--font-weight-medium);
    color: var(--color-orange);
    margin-bottom: 12px;
}

.service-card__body {
    font-size: 20px;
    line-height: 30px;
    font-weight: var(--font-weight-book);
    color: var(--color-body-text);
}

.service-card__body p {
    margin: 0;
}

.service-card__body p + p {
    margin-top: 32px;
}

.service-card__body ul {
    list-style: disc;
    margin: 16px 0 0 0;
    padding-left: 20px;
}

.service-card__body ul + p {
    margin-top: 32px;
}

.service-card__body li {
    margin-bottom: 8px;
}

.service-card__link {
    font-weight: var(--font-weight-medium);
    color: var(--color-mid-green);
    display: none; /* Hidden on home page per design spec */
    margin-top: 12px;
}

.service-card__link:hover {
    color: var(--color-orange);
}

/* Clickable card variant: whole card is an <a> tag (link has URL but no title text) */
.service-card--linked {
    text-decoration: none;
    color: inherit;
}

/* Photo variant: text area becomes flex column to allow button bottom-alignment */
.service-card--has-photo .service-card__text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Photo variant: link becomes button, pushed to bottom */
.service-card--has-photo .service-card__link {
    display: inline-block;
    align-self: flex-start; /* Don't stretch full width */
    margin-top: auto; /* Push to bottom */
    background-color: var(--color-light-green);
    color: var(--color-white);
    padding: 24px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 17px;
    line-height: 20px;
    font-weight: var(--font-weight-medium);
}

.service-card--has-photo .service-card__link:hover {
    background-color: var(--color-mid-green);
    color: var(--color-white);
}

/* Photo variant: photo on top, stripe+content side-by-side below */
.service-card--has-photo {
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-template-rows: auto 1fr;
}

.service-card__photo {
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 658 / 253;
    overflow: hidden;
}

.service-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 80x80 diagonal notch on top-left corner */
    clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%, 0 80px);
}

/* Photo cards: stripe on left side (same as home cards - 20px) */
.service-card--has-photo .service-card__stripe {
    grid-column: 1;
    grid-row: 2;
    width: 20px;
    height: auto;
}

/* Photo cards: content area - same horizontal layout as home cards */
.service-card--has-photo .service-card__content {
    grid-column: 2;
    grid-row: 2;
    gap: 32px;
    align-items: stretch; /* Allow text area to fill height for button alignment */
    padding: 50px 40px 50px 32px;
}

/* Photo cards: icon */
.service-card--has-photo .service-card__icon {
    width: 65px;
}

.service-card--has-photo .service-card__icon img {
    width: 65px;
    height: auto;
}

/* Photo cards: body needs margin for button spacing */
.service-card--has-photo .service-card__body {
    margin-bottom: 24px; /* 24px gap between copy and button */
}

/* --- Service Cards 960px --- */
@media (max-width: 960px) {
    .block--service-cards {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .block--service-cards .wrap {
        padding-left: 40px;
        padding-right: 40px;
    }

    .service-cards__heading {
        font-size: 48px;
        line-height: 56px;
        text-wrap: balance;
    }

    .service-cards__intro {
        text-wrap: balance;
        margin-bottom: 48px;
    }

    .service-cards__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Keep card horizontal but center icon vertically */
    .service-card__content {
        align-items: center;
    }

    .service-card__icon {
        width: 35px;
    }

    .service-card__text {
        text-wrap: balance;
    }

    .service-card__title {
        font-size: 22px;
        line-height: 27px;
    }

    .service-card__body {
        font-size: 20px;
        line-height: 30px;
        font-weight: var(--font-weight-book);
    }

    .service-card--has-photo .service-card__icon {
        width: 50px;
    }
}

/* Photo variant: single column at 1100px */
@media (max-width: 1100px) {
    .service-cards__grid:has(.service-card--has-photo) {
        grid-template-columns: 1fr;
    }
}

/* --- Dark Feature Block --- */
/* Full-width 50/50 split: image left (full-bleed), content right (dark green) */
.block--dark-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0; /* Override .block padding - this is full-bleed */
}

/* Left: Full-bleed image covering entire left half */
/* Image is absolutely positioned so content side drives height */
.dark-feature__image {
    position: relative;
}

.dark-feature__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right: Dark green background with leaves and content */
.dark-feature__right {
    background: var(--color-dark-green);
    position: relative;
    overflow: hidden;
    padding: 112px 40px 112px 120px; /* Interior pages: equal top/bottom */
}

/* Home page: larger top padding for square appearance */
.block--dark-feature--home .dark-feature__right {
    padding-top: 180px;
}

/* Content container: 540px max per XD to prevent text touching leaves */
.dark-feature__content {
    max-width: 540px;
    position: relative;
    z-index: 2;
}

/* Leaves container */
.dark-feature__leaves {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Base leaf styles (matching hero pattern) */
.dark-feature__leaf {
    position: absolute;
    opacity: 0.22;
    pointer-events: none;
}

/* Top leaf: leaf--2, 207x236, partially hidden at top, 35% from left */
.dark-feature__leaf--2 {
    top: -60px;
    left: 35%;
    width: 207px;
    height: 236px;
}

/* Middle leaf: leaf--1, 117x152, pushed up 75px from 45%, 75% from left */
.dark-feature__leaf--1 {
    top: calc(45% - 75px);
    left: 75%;
    width: 117px;
    height: 152px;
}

/* Bottom leaf: leaf--3, 231x290, 55% from left */
.dark-feature__leaf--3 {
    bottom: -35px;
    left: 55%;
    width: 231px;
    height: 290px;
}

/* leaf--4: Hidden on desktop, shown on mobile for lower-right position */
.dark-feature__leaf--4 {
    display: none;
}

/* Typography: matching intro-with-image */
.dark-feature__content .eyebrow {
    color: var(--color-light-green);
    font-size: 17px;
    line-height: 20px;
    font-weight: var(--font-weight-medium);
}

.dark-feature__content h2 {
    margin-top: 24px;
    font-size: 54px;
    line-height: 64px;
    font-weight: var(--font-weight-medium);
    color: var(--color-orange);
}

.dark-feature__body {
    margin-top: 24px;
    font-size: 20px;
    line-height: 30px;
    font-weight: var(--font-weight-book);
    color: var(--color-white);
    text-wrap: balance;
}

.dark-feature__body p {
    margin-top: 24px;
}

.dark-feature__body p:first-child {
    margin-top: 0;
}

.dark-feature__body strong,
.dark-feature__body b {
    color: var(--color-light-green);
    font-weight: var(--font-weight-bold);
}

/* List: dots aligned with text left edge (no padding/margin-left) */
.dark-feature__body ul {
    list-style: disc inside;
    padding-left: 0;
    margin: 24px 0 0 0;
}

.dark-feature__body li {
    margin-bottom: 8px;
}

.dark-feature__callout {
    margin-top: 24px;
    font-size: 20px;
    line-height: 30px;
    font-weight: var(--font-weight-bold);
    color: var(--color-light-green);
    text-wrap: balance;
}

.dark-feature__content .btn {
    margin-top: 24px;
}

/* --- CTA Section Block --- */
/* Full-width 50/50 split: content left, tree-roots SVG right */
.block--cta-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center; /* Vertically center both sides */
    padding: 100px 0; /* Top/bottom padding at parent level */
    overflow: visible; /* Let branch extend left, tree extend right */
}

/* Left side: content area with decorative branch */
.cta-section__left {
    position: relative;
    overflow: visible; /* Allow branch to extend left */
}

/* Decorative branch - 90px hidden off left edge, 310px visible */
.cta-section__branch {
    position: absolute;
    left: -90px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.cta-section__branch img {
    max-width: 400px;
    max-height: 337px;
    width: auto;
    height: auto;
}

/* Content container - magnetizes toward center (right side of left column) */
.cta-section__content {
    max-width: 540px;
    margin-left: auto; /* Push content to the right, toward center */
    padding: 24px;
    margin-top: -24px; /* Offset padding so positioning stays the same */
    margin-bottom: -24px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    z-index: 2;
}

/* Right side: Tree-roots SVG container */
.cta-section__right {
    position: relative;
    aspect-ratio: 650 / 590; /* Desktop tree container ratio */
    width: 650px; /* Fixed until 1440px */
    height: 590px;
    margin-left: 120px; /* Gap from center axis */
    overflow: visible; /* Allow pseudo-element to extend */
}

/* Scale tree down below 1440px */
@media (max-width: 1440px) {
    .cta-section__right {
        width: calc(50vw - 120px); /* Half viewport minus margin */
        max-width: 650px;
        min-width: 290px; /* Never smaller than mobile size */
        min-height: 260px;
        height: auto; /* Let aspect-ratio control height */
    }
}

/* Tree as pseudo-element so it can overflow */
.cta-section__right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 300%; /* Extend well beyond container */
    height: 100%;
    background-image: url('../../../img/Tree-roots.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%; /* Height matches container */
    pointer-events: none;
}

/* Hide the img element - using background instead */
.cta-section__roots {
    display: none;
}

/* Typography */
.cta-section__content .eyebrow {
    color: var(--color-light-green); /* Match other eyebrows */
    font-size: 17px;
    line-height: 20px;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cta-section__content h2 {
    margin-top: 24px;
    font-size: 54px;
    line-height: 64px;
    font-weight: var(--font-weight-medium);
    color: var(--color-orange);
    text-wrap: balance;
}

.cta-section__body {
    margin-top: 24px;
    font-size: 20px;
    line-height: 30px;
    font-weight: var(--font-weight-book);
    color: var(--color-body-text);
    text-wrap: balance;
}

.cta-section__body p {
    margin-top: 24px;
}

.cta-section__body p:first-child {
    margin-top: 0;
}

/* Bullet list styling */
.cta-section__body ul {
    list-style: disc inside;
    padding-left: 0;
    margin: 24px 0 0 0;
}

.cta-section__body li {
    margin-bottom: 8px;
}

.cta-section__callout {
    margin-top: 24px;
    font-size: 20px;
    line-height: 30px;
    font-weight: var(--font-weight-bold);
    color: var(--color-mid-green);
    text-wrap: balance;
}

/* --- CTA Section: Simple variant (no roots, interior pages) --- */
/* Full-width section, branch magnetized to left viewport edge, content in centered wrapper */
.block--cta-section--simple {
    display: block;
    position: relative;
    padding: 80px 0;
    background: var(--color-white);
    overflow: visible;
}

/* Left side becomes the wrapper container */
.block--cta-section--simple .cta-section__left {
    display: block;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 56px; /* 56px + 24px content padding = 80px to match pre-footer */
    position: relative;
}

/* Contact page CTA: align with contact form's 1400px container */
.page-id-12 .block--cta-section {
    padding-top: 0;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

.page-id-12 .block--cta-section .cta-section__content {
    margin-left: 0;
}

/* Branch reaches viewport edge at all viewport sizes */
/* Large viewport: calc(668px - 50vw) is negative, reaches edge */
/* Small viewport (<1400px): container fills width, -32px reaches edge */
.page-id-12 .block--cta-section .cta-section__branch {
    left: min(calc(668px - 50vw), calc(-1 * var(--space-lg)));
}

/* Branch magnetized to left viewport edge (not negative offset like home) */
.block--cta-section--simple .cta-section__branch {
    position: absolute;
    left: calc(-50vw + 50%); /* Align to left viewport edge from within centered container */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.block--cta-section--simple .cta-section__branch img {
    max-width: 400px;
    max-height: 337px;
    width: auto;
    height: auto;
}

/* Content with frosted glass effect for collision handling */
.block--cta-section--simple .cta-section__content {
    max-width: none; /* Override base 540px constraint */
    margin-left: 0;
    padding: 24px; /* Full padding for overlap handling */
    margin-top: -24px;
    margin-bottom: -24px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    z-index: 2;
}

/* Eyebrow: 17/20/medium */
.block--cta-section--simple .cta-section__content .eyebrow {
    font-size: 17px;
    line-height: 20px;
    font-weight: var(--font-weight-medium);
}

/* Title: 54/64/medium */
.block--cta-section--simple .cta-section__content h2 {
    margin-top: 32px;
    font-size: 54px;
    line-height: 64px;
    font-weight: var(--font-weight-medium);
}

/* Content: 25/40/regular */
.block--cta-section--simple .cta-section__body {
    margin-top: 24px;
    font-size: 25px;
    line-height: 40px;
    font-weight: var(--font-weight-book);
}

/* Inline link styling for simple variant */
.block--cta-section--simple .cta-section__body a {
    color: var(--color-mid-green);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

.block--cta-section--simple .cta-section__body a:hover {
    text-decoration: underline;
}

/* Simple variant responsive - hide branch on mobile, center content */
@media (max-width: 1100px) {
    .block--cta-section--simple {
        padding: 60px 0;
    }

    .block--cta-section--simple .cta-section__left {
        padding: 0 40px;
    }

    .block--cta-section--simple .cta-section__branch {
        display: none;
    }

    .block--cta-section--simple .cta-section__content {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        text-align: center;
    }

    .block--cta-section--simple .cta-section__content h2 {
        font-size: 36px;
        line-height: 44px;
    }

    .block--cta-section--simple .cta-section__body {
        font-size: 20px;
        line-height: 32px;
    }
}

/* --- CTA Section: 1100px breakpoint --- */
@media (max-width: 1100px) {
    .block--cta-section {
        grid-template-columns: 1fr;
        padding: 40px;
    }

    /* Hide branch on mobile */
    .cta-section__branch {
        display: none;
    }

    /* Tree roots on top */
    .cta-section__right {
        order: -1;
        aspect-ratio: 290 / 260; /* Mobile tree container ratio */
        max-width: 290px;
        max-height: 260px;
        margin-left: auto;
        margin-right: auto; /* Center the tree */
        margin-bottom: 32px;
        overflow: visible;
    }

    .cta-section__roots {
        display: none; /* Using pseudo-element instead */
    }

    /* Content - full width, centered */
    .cta-section__left {
        padding: 0;
        justify-content: center;
    }

    .cta-section__content {
        max-width: none;
        padding-right: 0;
        margin-right: 0;
        text-align: center;
    }

    .cta-section__content h2 {
        font-size: 40px;
        line-height: 48px;
    }

    /* Bullet list centered but text left-aligned */
    .cta-section__body ul {
        text-align: left;
        display: inline-block;
    }
}

/* --- Dark Feature: 1100px breakpoint --- */
@media (max-width: 1100px) {
    .block--dark-feature {
        grid-template-columns: 1fr;
    }

    .dark-feature__image {
        order: -1; /* Image on top */
        aspect-ratio: 393 / 327; /* Mobile aspect ratio */
    }

    .dark-feature__image img {
        height: 100%;
        object-fit: cover;
    }

    .dark-feature__right {
        padding: 80px 40px; /* Mobile padding matching other blocks */
    }

    .dark-feature__content {
        max-width: none;
        text-align: center;
    }

    .dark-feature__content h2 {
        font-size: 48px;
        line-height: 56px;
    }

    .dark-feature__body {
        font-size: 20px;
        line-height: 30px;
        font-weight: var(--font-weight-book);
    }

    .dark-feature__body ul {
        text-align: center; /* Centered per design */
    }

    /* Mobile leaves: same as hero 768px pattern */
    /* Hide leaves 2 and 3, keep 1 positioned upper-left like hero leaf--1 */
    .dark-feature__leaf--2,
    .dark-feature__leaf--3 {
        display: none;
    }

    /* leaf--1: Upper left (matching hero__leaf--1 at 768px) */
    .dark-feature__leaf--1 {
        top: 5%;
        left: -8%;
        right: auto;
        width: 110px;
        height: auto;
        transform: none;
    }

    /* leaf--4: Lower right */
    .dark-feature__leaf--4 {
        display: block;
        top: 77%;
        left: auto;
        right: -6%;
        width: 110px;
        height: auto;
        transform: rotate(-25deg);
    }
}

/* --- Block Responsive --- */
@media (max-width: 768px) {
    /* 768px overrides for intro-with-image - builds on 960px breakpoint */
    .intro-with-image__images {
        width: 90%; /* Slightly wider on small phones */
    }

    /* Note: service-cards responsive handled at 960px breakpoint */
}

/* ==========================================================================
   10b. REVIEWS GRID BLOCK
   Customer reviews with leaf ratings
   ========================================================================== */

.block--reviews-grid {
    padding: 64px 0;
    background: var(--color-bg-green);
}

.reviews-grid__container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* Aggregate Summary */
.reviews-grid__summary {
    text-align: center;
    margin-bottom: 60px;
}

.reviews-grid__aggregate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.reviews-grid__score {
    font-size: 72px;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark-green);
    line-height: 1;
}

.reviews-grid__aggregate .review-card__leaves {
    gap: 8px;
}

.reviews-grid__aggregate .review-card__leaf {
    width: 32px;
    height: 32px;
}

.reviews-grid__count {
    font-size: 20px;
    color: var(--color-body-text);
    margin: 0;
}

.reviews-grid__count strong {
    color: var(--color-dark-green);
}

/* Reviews Grid - 3 columns */
.reviews-grid__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* Review Card */
.review-card {
    background: #fff;
    border-left: 6px solid var(--color-light-green);
    border-radius: 0 8px 8px 0;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.review-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.review-card__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.review-card__name {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-dark-green);
    margin: 0;
}

.review-card__leaves {
    display: flex;
    gap: 4px;
}

.review-card__leaf {
    width: 20px;
    height: 20px;
}

.review-card__leaf--filled {
    fill: var(--color-light-green);
}

.review-card__leaf--empty {
    fill: #ddd;
}

.review-card__date-badge {
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    color: #fff;
    background: var(--color-mid-green);
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.review-card__text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-body-text);
    margin: 0;
    border: none;
    padding: 0;
}

/* Reviews Grid Load More */
.reviews-grid__load-more {
    text-align: center;
    margin-top: 48px;
}

.reviews-grid__load-more .btn--outline {
    border: 2px solid var(--color-dark-green);
    background: transparent;
    color: var(--color-dark-green);
    padding: 14px 40px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease;
}

.reviews-grid__load-more .btn--outline:hover {
    background: var(--color-dark-green);
    color: #fff;
}

.reviews-grid__loading {
    display: inline-block;
    color: var(--color-dark-green);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
}

.reviews-grid__empty {
    text-align: center;
    font-size: 18px;
    color: var(--color-body-text);
    padding: 48px 0;
}

/* Reviews Grid Responsive */
@media (max-width: 1200px) {
    .reviews-grid__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .block--reviews-grid {
        padding: 48px 0;
    }

    .reviews-grid__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .reviews-grid__score {
        font-size: 48px;
    }

    .reviews-grid__aggregate .review-card__leaf {
        width: 24px;
        height: 24px;
    }

    .review-card {
        padding: 24px;
    }

    .review-card__header {
        flex-direction: column;
        gap: 12px;
    }
}

/* Reviews Grid Header (summary + CTA button) */
.reviews-grid__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
    flex-wrap: wrap;
    gap: 24px;
}

.reviews-grid__header .reviews-grid__summary {
    margin-bottom: 0;
}

/* Leave a Review button - outline style */
.reviews-grid__header .btn--primary {
    border: 2px solid var(--color-dark-green);
    background: transparent;
    color: var(--color-dark-green);
    padding: 14px 32px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.reviews-grid__header .btn--primary:hover {
    background: var(--color-dark-green);
    color: #fff;
}

@media (max-width: 768px) {
    .reviews-grid__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Review Form Modal */
/* Note: display is controlled via JS to prevent FOUC (starts with inline style="display:none") */
.review-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.review-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
}

.review-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.review-modal__container {
    position: relative;
    background: #fff;
    width: 90%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.review-modal[aria-hidden="false"] .review-modal__container {
    transform: translateY(0);
}

.review-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px;
    border-bottom: 1px solid #eee;
    background: var(--color-bg-green);
}

.review-modal__header h2 {
    margin: 0;
    font-size: 22px;
    color: var(--color-dark-green);
}

.review-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--color-dark-green);
    transition: color 0.2s ease;
}

.review-modal__close:hover {
    color: var(--color-orange);
}

.review-modal__body {
    padding: 24px 28px 28px;
}

/* Form styling within modal */
.review-modal .gform_wrapper.gform-theme,
.review-modal .gform_wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.review-modal .gform_wrapper.gform-theme .gform_heading,
.review-modal .gform_wrapper .gform_heading {
    margin-bottom: 16px !important;
}

.review-modal .gform_wrapper.gform-theme .gform_description,
.review-modal .gform_wrapper .gform_description {
    font-size: 15px !important;
    color: var(--color-body-text) !important;
    margin-bottom: 20px !important;
}

.review-modal .gform_wrapper.gform-theme .gform_body,
.review-modal .gform_wrapper .gform_body {
    padding: 0 !important;
}

.review-modal .gform_wrapper.gform-theme .gfield,
.review-modal .gform_wrapper .gfield {
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.review-modal .gform_wrapper.gform-theme .gfield_label,
.review-modal .gform_wrapper .gfield_label {
    font-size: 16px !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--color-body-text) !important;
    margin-bottom: 8px !important;
}

/* Required indicator - modern pill badge */
.review-modal .gform_wrapper .gfield_required {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 8px !important;
    padding: 3px 10px !important;
    background: var(--color-bg-green) !important;
    border: 1px solid var(--color-mid-green) !important;
    border-radius: 12px !important;
    vertical-align: middle !important;
}

/* Hide the inner text span */
.review-modal .gform_wrapper .gfield_required .gfield_required_text {
    display: none !important;
}

/* Show clean "Required" text */
.review-modal .gform_wrapper .gfield_required::after {
    content: "Required" !important;
    font-size: 10px !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-dark-green) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.review-modal .gform_wrapper.gform-theme input[type="text"],
.review-modal .gform_wrapper.gform-theme input[type="email"],
.review-modal .gform_wrapper.gform-theme textarea,
.review-modal .gform_wrapper input[type="text"],
.review-modal .gform_wrapper input[type="email"],
.review-modal .gform_wrapper textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid var(--color-mid-green) !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    font-family: var(--font-primary) !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(14, 67, 41, 0.08) !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.review-modal .gform_wrapper.gform-theme input[type="text"]:focus,
.review-modal .gform_wrapper.gform-theme input[type="email"]:focus,
.review-modal .gform_wrapper.gform-theme textarea:focus,
.review-modal .gform_wrapper input[type="text"]:focus,
.review-modal .gform_wrapper input[type="email"]:focus,
.review-modal .gform_wrapper textarea:focus {
    outline: 2px solid var(--color-mid-green) !important;
    outline-offset: -2px !important;
}

.review-modal .gform_wrapper.gform-theme textarea,
.review-modal .gform_wrapper textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Rating field - styled as pill buttons */
.review-modal .gform_wrapper.gform-theme .gf-rating-field,
.review-modal .gform_wrapper .gf-rating-field {
    margin-bottom: 24px !important;
}

.review-modal .gform_wrapper.gform-theme .gf-rating-field .gfield_label,
.review-modal .gform_wrapper .gf-rating-field .gfield_label {
    margin-bottom: 12px !important;
    display: block !important;
}

.review-modal .gform_wrapper.gform-theme .gf-rating-field .ginput_container,
.review-modal .gform_wrapper .gf-rating-field .ginput_container,
.review-modal .gf-rating-field .ginput_container_radio {
    width: 100% !important;
}

.review-modal .gform_wrapper.gform-theme .gfield_radio,
.review-modal .gform_wrapper .gfield_radio,
.review-modal .gform-theme .ginput_container_radio .gfield_radio,
.review-modal .ginput_container_radio .gfield_radio {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
}

.review-modal .gform_wrapper.gform-theme .gfield_radio > .gchoice,
.review-modal .gform_wrapper .gfield_radio > .gchoice,
.review-modal .gfield_radio .gchoice,
.review-modal .gform_wrapper .gfield_radio li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
}

.review-modal .gform_wrapper.gform-theme .gfield_radio input[type="radio"],
.review-modal .gform_wrapper .gfield_radio input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

.review-modal .gform_wrapper.gform-theme .gfield_radio .gchoice,
.review-modal .gform_wrapper .gfield_radio .gchoice {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.review-modal .gform_wrapper.gform-theme .gfield_radio label,
.review-modal .gform_wrapper .gfield_radio label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 12px 8px !important;
    border: 2px solid transparent !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 28px !important;
    font-weight: var(--font-weight-bold) !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    color: #fff !important;
}

/* Text labels below buttons */
.review-modal .gfield_radio .gchoice::after {
    display: block !important;
    font-size: 11px !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--color-body-text) !important;
    margin-top: 6px !important;
    text-align: center !important;
}

.review-modal .gfield_radio .gchoice:nth-child(1)::after {
    content: "Excellent" !important;
}
.review-modal .gfield_radio .gchoice:nth-child(2)::after {
    content: "Very Good" !important;
}
.review-modal .gfield_radio .gchoice:nth-child(3)::after {
    content: "Good" !important;
}
.review-modal .gfield_radio .gchoice:nth-child(4)::after {
    content: "Fair" !important;
}
.review-modal .gfield_radio .gchoice:nth-child(5)::after {
    content: "Poor" !important;
}

/* Rating gradient: 5-Excellent (green) to 1-Poor (orange) */
.review-modal .gfield_radio .gchoice:nth-child(1) label {
    background: #B2D335 !important; /* 5 - Excellent - lime green */
}
.review-modal .gfield_radio .gchoice:nth-child(2) label {
    background: #9FB72E !important; /* 4 - Very Good */
}
.review-modal .gfield_radio .gchoice:nth-child(3) label {
    background: #8AAF27 !important; /* 3 - Good */
}
.review-modal .gfield_radio .gchoice:nth-child(4) label {
    background: #B5901A !important; /* 2 - Fair */
}
.review-modal .gfield_radio .gchoice:nth-child(5) label {
    background: #D37E00 !important; /* 1 - Poor - orange */
}

.review-modal .gform_wrapper.gform-theme .gfield_radio label:hover,
.review-modal .gform_wrapper .gfield_radio label:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-1px) !important;
}

.review-modal .gform_wrapper.gform-theme .gfield_radio input[type="radio"]:checked + label,
.review-modal .gform_wrapper .gfield_radio input[type="radio"]:checked + label {
    border-color: var(--color-dark-green) !important;
    box-shadow: 0 0 0 3px var(--color-dark-green) !important;
    filter: brightness(1.1) !important;
    color: #fff !important;
}

.review-modal .gform_wrapper.gform-theme .gfield_radio input[type="radio"]:focus + label,
.review-modal .gform_wrapper .gfield_radio input[type="radio"]:focus + label {
    outline: 2px solid var(--color-dark-green) !important;
    outline-offset: 2px !important;
}

/* Name and Email on same line */
.review-modal .gform_wrapper.gform-theme .gform_fields,
.review-modal .gform_wrapper .gform_fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.review-modal .gform_wrapper.gform-theme .gfield.gf-full-width,
.review-modal .gform_wrapper .gfield.gf-full-width {
    grid-column: 1 / -1 !important;
}

/* Name and email side by side - each takes one column */
.review-modal .gform_wrapper.gform-theme .gfield.gf-name-field,
.review-modal .gform_wrapper .gfield.gf-name-field,
.review-modal .gform_wrapper.gform-theme .gfield.gf-email-field,
.review-modal .gform_wrapper .gfield.gf-email-field {
    grid-column: span 1 !important;
}

/* Responsive: stack on mobile */
@media (max-width: 500px) {
    .review-modal .gform_wrapper.gform-theme .gform_fields,
    .review-modal .gform_wrapper .gform_fields {
        grid-template-columns: 1fr !important;
    }

    .review-modal .gform_wrapper.gform-theme .gfield.gf-name-field,
    .review-modal .gform_wrapper .gfield.gf-name-field,
    .review-modal .gform_wrapper.gform-theme .gfield.gf-email-field,
    .review-modal .gform_wrapper .gfield.gf-email-field {
        grid-column: 1 / -1 !important;
    }

    /* Wrap rating buttons on very small screens */
    .review-modal .gform_wrapper.gform-theme .gfield_radio,
    .review-modal .gform_wrapper .gfield_radio {
        flex-wrap: wrap !important;
    }

    .review-modal .gform_wrapper.gform-theme .gfield_radio .gchoice,
    .review-modal .gform_wrapper .gfield_radio li {
        flex: 1 1 calc(50% - 4px) !important;
    }

    .review-modal .gform_wrapper.gform-theme .gfield_radio label,
    .review-modal .gform_wrapper .gfield_radio label {
        padding: 12px 8px !important;
        font-size: 13px !important;
    }
}

/* Submit button */
.review-modal .gform_wrapper.gform-theme .gform_footer,
.review-modal .gform_wrapper .gform_footer {
    margin-top: 20px !important;
    padding: 0 !important;
    grid-column: 1 / -1 !important;
}

.review-modal .gform_wrapper.gform-theme .gform_button,
.review-modal .gform_wrapper.gform-theme input[type="submit"],
.review-modal .gform_wrapper .gform_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 165px !important;
    padding: 24px 60px !important;
    background: var(--color-light-green) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 1rem !important;
    font-weight: var(--font-weight-bold) !important;
    font-family: var(--font-primary) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.review-modal .gform_wrapper.gform-theme .gform_button:hover,
.review-modal .gform_wrapper.gform-theme input[type="submit"]:hover,
.review-modal .gform_wrapper .gform_button:hover {
    background: var(--color-mid-green) !important;
}

/* Field description */
.review-modal .gform_wrapper.gform-theme .gfield_description,
.review-modal .gfield_description {
    font-size: 12px !important;
    color: #888 !important;
    margin-top: 4px !important;
    font-style: italic !important;
}

/* Success message styling */
.review-modal .review-success {
    text-align: center;
    padding: 24px 0;
}

.review-modal .review-success h3 {
    color: var(--color-dark-green);
    margin-bottom: 12px;
}

.review-modal .review-success p {
    color: var(--color-body-text);
    margin: 0;
}

/* Body scroll lock when modal is open */
body.modal-open {
    overflow: hidden;
}

/* ==========================================================================
   10c. CONTACT FORM BLOCK
   Two-column: info sidebar (41.4%) + form (58.6%), 1400px container, 96px gap
   ========================================================================== */

.block--contact-form {
    padding: 128px 0;
    background: #fff;
}

.contact-form__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    gap: 96px;
}

.contact-form__left {
    flex: 0 0 calc(41.4286% - 48px);
    padding-left: var(--space-lg);
}

.contact-form__right {
    flex: 0 0 calc(58.5714% - 48px);
}

/* Left Column Typography */
/* H2: 53px/64px/medium, 24px margin */
.contact-form__heading {
    color: var(--color-orange);
    font-size: 53px;
    font-weight: var(--font-weight-medium);
    line-height: 64px;
    margin: 0 0 24px 0;
}

/* Body: 20px/30px/book, 50px margin, 20px between paragraphs */
.contact-form__intro {
    color: var(--color-body-text);
    font-size: 20px;
    font-weight: var(--font-weight-book);
    line-height: 30px;
    margin: 0 0 50px 0;
}

/* Space between paragraphs created by nl2br */
.contact-form__intro br {
    display: block;
    content: "";
    margin-bottom: 20px;
}

/* H3 Subhead: 24px/30px/medium, 32px margin */
.contact-form__callout-heading {
    color: var(--color-orange);
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    line-height: 30px;
    margin: 0 0 32px 0;
}

/* Body under subhead: 20px/30px/book, 50px margin */
.contact-form__callout-text {
    color: var(--color-body-text);
    font-size: 20px;
    font-weight: var(--font-weight-book);
    line-height: 30px;
    margin: 0 0 50px 0;
}

/* Contact Info Items - 30px between icons, 15px gap to text */
.contact-form__info {
    margin-bottom: 46px; /* Space after icon group, before hours */
}

.contact-info__item {
    display: flex;
    align-items: center; /* Vertically center icon and text */
    gap: 15px;
    margin-bottom: 30px; /* Space between icons */
}

.contact-info__item:last-child {
    margin-bottom: 0;
}

/* Icon box: 60x60, lime green, 4px radius, white icon */
.contact-info__icon-box {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background-color: var(--color-light-green);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-info__icon-box img {
    width: 35px;
    height: 35px;
    filter: brightness(0) invert(1); /* Make icon white */
}

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

/* Icon title: 24px/29px/medium, 4px margin - orange color */
.contact-info__label {
    color: var(--color-orange);
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    line-height: 29px;
    margin-bottom: 4px;
}

/* Icon value: 20px/30px/bold */
.contact-info__value {
    color: var(--color-mid-green);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 30px;
}

.contact-info__value--link {
    text-decoration: none;
}

.contact-info__value--link:hover {
    text-decoration: underline;
}

/* Hours: 20px/30px/book */
.contact-form__hours {
    margin-bottom: 30px;
}

.contact-form__hours p {
    color: var(--color-body-text);
    font-size: 20px;
    font-weight: var(--font-weight-book);
    line-height: 30px;
    margin: 0;
}

/* Service Areas: 20px/30px/bold */
.contact-form__service-areas {
    margin-bottom: 30px;
}

.contact-form__service-areas-label {
    color: var(--color-body-text);
    font-size: 20px;
    font-weight: var(--font-weight-book);
    line-height: 30px;
    margin-bottom: 4px;
}

.contact-form__areas-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.contact-form__areas-list li {
    color: var(--color-body-text);
    font-size: 20px;
    font-weight: var(--font-weight-book);
    line-height: 30px;
}

/* Emergency: 20px/30px/bold - same as body but bold */
.contact-form__emergency {
    color: var(--color-mid-green);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    line-height: 30px;
    margin-top: 24px;
}

/* Right Column - Form Box */
.contact-form__form-box {
    background-color: var(--color-bg-green);
    padding: 40px;
}

/* Form intro heading: 24px/33px/medium - orange color */
.contact-form__form-intro {
    color: var(--color-orange);
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    line-height: 33px;
    margin-bottom: 32px;
}

/* Gravity Forms Overrides - using !important for specificity */
.contact-form__form-box .gform_wrapper {
    margin: 0 !important;
}

.contact-form__form-box .gform_wrapper .gform_body {
    padding: 0 !important;
}

.contact-form__form-box .gfield {
    margin-bottom: 16px !important;
}

.contact-form__form-box .gfield_label {
    color: var(--color-body-text) !important;
    font-size: 16px !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
}

.contact-form__form-box input[type="text"],
.contact-form__form-box input[type="email"],
.contact-form__form-box input[type="tel"],
.contact-form__form-box textarea,
.contact-form__form-box select,
.contact-form__form-box .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-form__form-box .gform_wrapper textarea,
.contact-form__form-box .gform_wrapper select {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid var(--color-mid-green) !important;
    border-radius: 5px !important;
    font-size: 16px !important;
    font-family: var(--font-primary) !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(14, 67, 41, 0.08) !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
}

.contact-form__form-box input:focus,
.contact-form__form-box textarea:focus,
.contact-form__form-box select:focus,
.contact-form__form-box .gform_wrapper input:focus,
.contact-form__form-box .gform_wrapper textarea:focus,
.contact-form__form-box .gform_wrapper select:focus {
    outline: 2px solid var(--color-mid-green) !important;
    outline-offset: -2px !important;
}

.contact-form__form-box textarea,
.contact-form__form-box .gform_wrapper textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Checkboxes/Radios */
.contact-form__form-box .gfield_checkbox,
.contact-form__form-box .gfield_radio,
.contact-form__form-box .gform_wrapper .gfield_checkbox,
.contact-form__form-box .gform_wrapper .gfield_radio {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.contact-form__form-box .gchoice {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 6px !important;
}

.contact-form__form-box .gchoice:last-child {
    margin-bottom: 0 !important;
}

.contact-form__form-box .gchoice label {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

.contact-form__form-box .gchoice input[type="checkbox"],
.contact-form__form-box .gchoice input[type="radio"],
.contact-form__form-box .gform_wrapper .gchoice input[type="checkbox"],
.contact-form__form-box .gform_wrapper .gchoice input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border: 2px solid var(--color-mid-green) !important;
    background: #fff !important;
    margin-right: 10px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.contact-form__form-box .gchoice input[type="checkbox"] {
    border-radius: 3px !important;
}

.contact-form__form-box .gchoice input[type="radio"] {
    border-radius: 50% !important;
}

.contact-form__form-box .gchoice input[type="checkbox"]:checked,
.contact-form__form-box .gchoice input[type="radio"]:checked {
    background-color: var(--color-mid-green) !important;
    border-color: var(--color-mid-green) !important;
}

.contact-form__form-box .gchoice input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 6px !important;
    height: 10px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.contact-form__form-box .gchoice input[type="radio"]:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 4px !important;
    width: 8px !important;
    height: 8px !important;
    background: #fff !important;
    border-radius: 50% !important;
}

/* Select/Dropdown styling */
.contact-form__form-box select,
.contact-form__form-box .gform_wrapper select,
.contact-form__form-box .gform_wrapper .gfield select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23789B4A' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
    padding-right: 44px !important;
    cursor: pointer !important;
    overflow: visible !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    height: auto !important;
    min-height: 48px !important;
    line-height: 1.4 !important;
}

.contact-form__form-box .gform_wrapper .gfield_select {
    position: relative !important;
}

/* Fix for Gravity Forms select wrapper if present */
.contact-form__form-box .ginput_container_select {
    position: relative !important;
}

.contact-form__form-box .ginput_container_select select {
    width: 100% !important;
}

/* Address field layout - Address 1/2 side by side, City/State/ZIP on same row */
.contact-form__form-box .ginput_container_address {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.contact-form__form-box .ginput_container_address > span {
    display: block !important;
}

/* Address 1 and 2 - each half width */
.contact-form__form-box .ginput_container_address .address_line_1,
.contact-form__form-box .ginput_container_address .address_line_2 {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 180px !important;
}

/* City - about 50% */
.contact-form__form-box .ginput_container_address .address_city {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 140px !important;
}

/* State - about 25% */
.contact-form__form-box .ginput_container_address .address_state {
    flex: 1 1 calc(25% - 9px) !important;
    min-width: 100px !important;
}

/* ZIP - about 25% */
.contact-form__form-box .ginput_container_address .address_zip {
    flex: 1 1 calc(25% - 9px) !important;
    min-width: 80px !important;
}

/* Ensure proper spacing between fields */
.contact-form__form-box .gfield {
    margin-bottom: 16px !important;
}

/* Radio and Checkbox use Gravity Forms grid (layoutGridColumnSpan: 6 each) */
/* Just ensure they align properly */
.contact-form__form-box .gfield--type-radio,
.contact-form__form-box .gfield--type-checkbox {
    margin-bottom: 16px !important;
}

/* Submit Button - matches .btn-primary, min-width ~165px */
.contact-form__form-box .gform_button,
.contact-form__form-box input[type="submit"],
.contact-form__form-box .gform_wrapper input[type="submit"],
.contact-form__form-box .gform_wrapper .gform_footer input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--color-light-green) !important;
    color: var(--color-white) !important;
    font-family: var(--font-primary) !important;
    font-size: 1rem !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: 1.1875 !important;
    padding: 24px 60px !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    width: auto !important;
    min-width: 165px !important;
}

.contact-form__form-box .gform_button:hover,
.contact-form__form-box input[type="submit"]:hover,
.contact-form__form-box .gform_wrapper input[type="submit"]:hover {
    background-color: var(--color-mid-green) !important;
    color: var(--color-white) !important;
}

/* Required indicator - modern pill badge */
.contact-form__form-box .gform_wrapper .gfield_required {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 8px !important;
    padding: 3px 10px !important;
    background: var(--color-bg-green) !important;
    border: 1px solid var(--color-mid-green) !important;
    border-radius: 12px !important;
    vertical-align: middle !important;
}

.contact-form__form-box .gform_wrapper .gfield_required .gfield_required_text {
    display: none !important;
}

.contact-form__form-box .gform_wrapper .gfield_required::after {
    content: "Required" !important;
    font-size: 10px !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-dark-green) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* --- Contact Form: 1200px breakpoint - stack columns --- */
@media (max-width: 1200px) {
    .block--contact-form {
        padding: 80px 0;
    }

    .contact-form__container {
        flex-direction: column;
        gap: 48px;
    }

    .contact-form__left,
    .contact-form__right {
        flex: 1 1 100%;
        padding-left: 0;
    }

    .contact-form__left {
        max-width: 600px;
    }
}

/* --- Contact Form: 768px breakpoint --- */
@media (max-width: 768px) {
    .block--contact-form {
        padding: 60px 0;
    }

    .contact-form__heading {
        font-size: 36px;
        line-height: 42px;
    }

    .contact-form__form-box {
        padding: 24px;
    }

    .contact-info__icon-box {
        width: 50px;
        height: 50px;
    }

    .contact-info__icon-box img {
        width: 28px;
        height: 28px;
    }

    /* Radio and checkbox stack on mobile via Gravity's responsive grid */

    /* Stack address fields on mobile */
    .contact-form__form-box .ginput_container_address .address_line_1,
    .contact-form__form-box .ginput_container_address .address_line_2,
    .contact-form__form-box .ginput_container_address .address_city,
    .contact-form__form-box .ginput_container_address .address_state,
    .contact-form__form-box .ginput_container_address .address_zip {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

/* ==========================================================================
   FOOTER WRAPPER - Common background for 3 elements
   ========================================================================== */

.footer-wrapper {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* ==========================================================================
   PRE-FOOTER CTA
   50/50 split, 64px gap, padding 60/40/80/80, bottom aligned
   ========================================================================== */

.prefooter-cta {
    /* No background - uses footer-wrapper background */
}

.prefooter-cta__inner {
    max-width: 1260px;
    margin: 0 auto;
    padding: 60px 32px 40px 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: end; /* Bottom aligned */
}

.prefooter-cta__content h2 {
    color: var(--color-orange);
    font-size: clamp(40px, 4vw, 54px);
    line-height: 1.2;
    font-weight: var(--font-weight-medium);
    margin: 0;
}

.prefooter-cta__action {
    text-align: left;
}

.prefooter-cta__phone {
    font-size: 25px;
    line-height: 25px;
    font-weight: var(--font-weight-book);
    color: var(--color-dark-green);
}

.prefooter-cta__phone a {
    color: var(--color-dark-green);
    text-decoration: none;
}

.prefooter-cta__phone a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   SUBSCRIBE BAND
   Creamy background, 40px T-B / 80px L-R padding, 16px gap
   ========================================================================== */

.subscribe-band {
    /* No background - contained in inner */
}

.subscribe-band__inner {
    max-width: 1260px;
    margin: 0 auto;
    padding: 40px 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: center;
    background-color: var(--color-bg-green);
}

.subscribe-band__content .eyebrow {
    color: var(--color-mid-green);
    font-size: 17px;
    line-height: 20px;
    font-weight: var(--font-weight-medium);
    margin-bottom: 8px;
}

.subscribe-band__content h2 {
    font-size: 35px;
    line-height: 42px;
    font-weight: var(--font-weight-medium);
    color: var(--color-orange);
    margin: 0;
}

.subscribe-form__field {
    display: flex;
    background: var(--color-white);
    border: 4px solid var(--color-white);
    border-radius: 5px;
    overflow: hidden;
}

.subscribe-form input[type="email"] {
    flex: 1;
    padding: 12px 16px;
    font-family: var(--font-primary);
    font-size: 16px;
    border: none;
    background: transparent;
    min-width: 0;
}

.subscribe-form input[type="email"]:focus {
    outline: none;
}

.subscribe-form input[type="email"]::placeholder {
    color: var(--color-body-text);
}

.subscribe-form button {
    flex-shrink: 0;
    padding: 22px 34px;
    line-height: 1;
}

/* Gravity Form Subscribe Styling - Inline input + button */
.subscribe-band__form .gform_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

.subscribe-band__form .gform_wrapper.gform-theme .gform_footer,
.subscribe-band__form .gform_wrapper .gform_footer {
    margin: 0 !important;
    padding: 0 !important;
}

.subscribe-band__form form.tts-subscribe-form {
    display: flex !important;
    flex-direction: row !important;
    background: var(--color-white);
    border: 4px solid var(--color-white);
    border-radius: 5px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.subscribe-band__form .tts-subscribe-form .gform_body {
    flex: 1;
    min-width: 0;
}

.subscribe-band__form .tts-subscribe-form .gform_fields {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.subscribe-band__form .tts-subscribe-form .gfield {
    margin: 0 !important;
    padding: 0 !important;
}

.subscribe-band__form .tts-subscribe-form .ginput_container {
    margin: 0 !important;
}

.subscribe-band__form .tts-subscribe-form input[type="email"],
.subscribe-band__form .tts-subscribe-form input.large {
    width: 100% !important;
    padding: 12px 16px !important;
    font-family: var(--font-primary);
    font-size: 16px !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    box-shadow: none !important;
    height: auto !important;
}

.subscribe-band__form .tts-subscribe-form input[type="email"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

.subscribe-band__form .tts-subscribe-form input[type="email"]::placeholder {
    color: var(--color-body-text);
}

.subscribe-band__form .tts-subscribe-form .gform_footer {
    flex-shrink: 0;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}

.subscribe-band__form .tts-subscribe-form .gform_button,
.subscribe-band__form .tts-subscribe-form input[type="submit"] {
    padding: 22px 34px !important;
    line-height: 1 !important;
    font-family: var(--font-primary);
    font-size: 1rem !important;
    font-weight: var(--font-weight-bold);
    background-color: var(--color-light-green) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: 0 5px 5px 0 !important;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin: 0 !important;
    height: 100%;
    white-space: nowrap;
}

.subscribe-band__form .tts-subscribe-form .gform_button:hover,
.subscribe-band__form .tts-subscribe-form input[type="submit"]:hover {
    background-color: var(--color-mid-green) !important;
}

/* Hide Gravity Form labels/validation in compact form */
.subscribe-band__form .tts-subscribe-form .gfield_label,
.subscribe-band__form .tts-subscribe-form .gfield_description,
.subscribe-band__form .gform_validation_errors,
.subscribe-band__form .validation_message,
.subscribe-band__form .tts-subscribe-form .gfield_required {
    display: none !important;
}

.subscribe-band__form .tts-subscribe-form .gform_ajax_spinner {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* ==========================================================================
   MAIN FOOTER (Brown Section)
   Width 1769px, notched top, icon row with logo, 5 columns
   ========================================================================== */

.site-footer {
    background-color: var(--color-brown);
    color: var(--color-white);
    position: relative;
    max-width: 1769px;
    margin: 0 auto;
    padding-top: 50px; /* Extra space for clipped corners */
    /* 50x50 triangular cutouts at top corners */
    clip-path: polygon(
        50px 0,               /* top-left inset */
        calc(100% - 50px) 0,  /* top-right inset */
        100% 50px,            /* right edge at 50px down */
        100% 100%,            /* bottom-right */
        0 100%,               /* bottom-left */
        0 50px                /* left edge at 50px down */
    );
}

/* Icon Row Wrapper */
.site-footer__icons-wrapper {
    padding: 0 40px 50px; /* Sides for viewport safety, bottom gap to divider - top handled by clip-path */
    overflow: visible; /* Allow logo to overflow */
}

.site-footer__icons {
    display: flex;
    align-items: center;
    max-width: 1260px;
    margin: 0 auto;
    /* No padding - content fills full 1260px like divider */
}

.site-footer__logo-col {
    flex-shrink: 0;
    margin-left: -32px; /* Extend 32px beyond left edge of container */
    margin-right: 112px; /* Gap between logo and icon boxes */
}

.site-footer__logo {
    display: block;
}

.site-footer__logo img {
    width: 197px;
    height: 198px;
}

/* Container for the 3 icon boxes - fills remaining space, spreads items */
.site-footer__icon-boxes {
    flex: 1;
    min-width: 0; /* Allow proper flex sizing */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-footer__icon-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* All content left-aligned */
    gap: 5px;
    white-space: nowrap; /* Prevent text wrapping */
}

.site-footer__icon-svg {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
}

.site-footer__icon-label {
    font-size: 24px;
    line-height: 29px;
    font-weight: var(--font-weight-medium);
    color: var(--color-orange);
}

.site-footer__icon-item a,
.site-footer__icon-item > span:last-child {
    font-size: 20px;
    line-height: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    text-decoration: none;
}

.site-footer__icon-item a:hover {
    color: var(--color-light-green);
}

/* Green Divider Line */
.site-footer__divider {
    height: 1px;
    background-color: var(--color-light-green);
    max-width: 1260px;
    margin: 0 auto;
}

/* Footer Main Content: 5 columns with space-between */
.site-footer__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Top-align columns */
    width: min(1260px, calc(100% - 80px)); /* Full width at desktop, 40px safety at narrow viewports */
    margin: 0 auto;
    padding: 40px 0; /* Only vertical padding */
}

/* All columns */
.site-footer__col {
    flex-shrink: 0;
}

.site-footer__license {
    font-size: 18px;
    line-height: 21px;
    font-weight: var(--font-weight-book);
    color: var(--color-white);
    margin-bottom: 32px; /* Space to socials below */
}

.site-footer__social {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.site-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--color-white);
    transition: color 0.2s;
}

.site-footer__social a:hover {
    color: var(--color-light-green);
}

.site-footer__social svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Nav Columns */
.site-footer__heading {
    font-size: 20px;
    line-height: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-bottom: 12px; /* Space between heading and list */
}

.site-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.site-footer__links li {
    display: flex;
    align-items: center; /* Vertically center bullet with text */
    gap: 10px;
    font-size: 15px;
    line-height: 1.2; /* Dense list spacing */
}

.site-footer__links li::before {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    background-color: var(--color-light-green);
    border-radius: 50%;
}

.site-footer__links a {
    color: var(--color-white);
    font-weight: var(--font-weight-book);
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--color-light-green);
}

/* CTA Column */
.site-footer__col--cta {
    text-align: center;
}

.site-footer__cta {
    margin-bottom: 24px; /* Space between button and discount text */
}

.site-footer__discount {
    font-size: 15px;
    line-height: 20px;
    font-weight: var(--font-weight-book);
    color: var(--color-light-green);
}

/* Quick Links (mobile only - hidden on desktop) */
.site-footer__quick-links {
    display: none; /* Hidden on desktop */
}

.site-footer__quick-links-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    padding: 0;
}

/* Hamburger icon - lime green square with white lines */
.site-footer__quick-links-toggle .hamburger-icon {
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background-color: var(--color-light-green);
    border-radius: 2px;
    padding: 8px;
}

.site-footer__quick-links-toggle .hamburger-icon span {
    display: block;
    width: 20px;
    height: 3px;
    background: var(--color-white);
    border-radius: 1px;
}

/* Full-screen popup overlay - matches mobile nav pattern */
.site-footer__quick-links-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-dark-green);
    padding: 100px 24px 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    z-index: var(--z-modal);
    overflow-y: auto;
}

.site-footer__quick-links-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Close button at top */
.site-footer__quick-links-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}

.site-footer__quick-links-close:hover {
    color: var(--color-light-green);
}

/* Menu columns inside popup */
.site-footer__quick-links-menu .quick-links-columns {
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-align: left; /* Keep content left-aligned */
}

/* Each nav section */
.site-footer__quick-links-menu .quick-links-section h3 {
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 8px;
    text-align: left; /* Headlines stay left-aligned */
}

.site-footer__quick-links-menu .quick-links-section a {
    display: block;
    padding: 12px 0;
    color: var(--color-white);
    font-size: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.site-footer__quick-links-menu .quick-links-section a:hover {
    color: var(--color-light-green);
}

/* Body scroll lock when Quick Links is open */
body.quick-links-open {
    overflow: hidden;
}

/* ==========================================================================
   BOTTOM BAR (Dark Green Strip)
   1260px content width with safe padding, matches divider above
   ========================================================================== */

.bottom-bar {
    background-color: var(--color-dark-green);
    padding: 16px 40px; /* Vertical padding + safe side padding */
}

.bottom-bar__inner {
    width: min(1260px, 100%); /* Match divider width */
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    line-height: 1.4;
    font-weight: var(--font-weight-book);
    color: var(--color-white);
}

.bottom-bar__copyright,
.bottom-bar__license {
    margin: 0;
}

.bottom-bar__legal {
    display: flex;
    gap: 16px; /* 16px gap between nav items */
    list-style: none;
    padding: 0;
    margin: 0;
}

.bottom-bar__legal li {
    list-style: none;
}

.bottom-bar__legal a {
    color: var(--color-white);
}

.bottom-bar__legal a:hover {
    color: var(--color-light-green);
}

/* Bottom bar tablet: 1260px - nav on top, copyright + license on bottom row */
@media (max-width: 1260px) {
    .bottom-bar__inner {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    /* Nav moves to top, full width */
    .bottom-bar__legal {
        order: 1;
        width: 100%;
        justify-content: center;
    }

    /* Copyright and license share bottom row */
    .bottom-bar__copyright {
        order: 2;
    }

    .bottom-bar__license {
        order: 3;
    }

    /* Add separator between copyright and license */
    .bottom-bar__copyright::after {
        content: " | ";
        margin-left: 8px;
    }
}

/* Bottom bar mobile: 1100px - full stack */
@media (max-width: 1100px) {
    .bottom-bar {
        padding: 8px 40px; /* Minimal vertical padding, 40px sides */
    }

    .bottom-bar__inner {
        flex-direction: column;
        text-align: center;
    }

    /* Each on its own line: nav, license, copyright */
    .bottom-bar__legal {
        order: 1;
    }

    .bottom-bar__license {
        order: 2;
    }

    .bottom-bar__copyright {
        order: 3;
    }

    /* Remove separator at mobile */
    .bottom-bar__copyright::after {
        content: none;
    }
}

/* ==========================================================================
   12. RESPONSIVE OVERRIDES
   ========================================================================== */

/* Topbar: Below 1144px (1080 + 64 for margins), maintain 32px margins */
@media (max-width: 1143px) {
    .topbar {
        padding: 0 32px;
    }

    .topbar__bar {
        width: calc(100% - 120px); /* Leave room for 60px caps on each side */
    }
}

/* Topbar mobile: At 960px, switch to compact version */
@media (max-width: 960px) {
    .topbar__bar {
        height: 36px;
        width: calc(100% - 84px); /* 42px caps on each side to maintain angle */
        justify-content: center;
    }

    .topbar__bar::before,
    .topbar__bar::after {
        width: 42px; /* Scaled to maintain ~41° angle at 36px height */
    }

    .topbar__contact {
        display: none;
    }

    .topbar__social {
        display: flex;
        margin-right: 0;
        gap: var(--space-xs);
    }

    .topbar__social svg {
        width: 20px;
        height: 20px;
    }

    /* Align nav with smaller topbar caps (32px + 42px) */
    .primary-nav__inner {
        padding: 16px calc(32px + 42px);
    }
}

@media (max-width: 1024px) {
    :root {
        --text-5xl: 2.5rem;
        --text-4xl: 2rem;
    }

    /* Reduce grid margins on tablets */
    .wrap-xl {
        padding-left: var(--space-xl);
        padding-right: var(--space-xl);
    }

    /* Note: nav padding is set at 1080px breakpoint - don't override here */
}

/* Footer icon row: remove logo offset at 1260px */
@media (max-width: 1260px) {
    .site-footer__logo-col {
        margin-left: 0; /* Remove -32px offset, snap logo back */
    }
}

/* Footer rows: intermediate layout at 1200px */
@media (max-width: 1200px) {
    /* Icon row: Logo on its own row, 3 boxes below spread out */
    .site-footer__icons {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .site-footer__logo-col {
        margin-left: 0;
        margin-right: 0;
    }

    .site-footer__icon-boxes {
        width: 100%;
        justify-content: space-around; /* Spread the 3 boxes evenly */
        gap: 24px;
    }

    /* Footer main: Brand + CTA top row, 3 nav columns bottom row */
    .site-footer__main {
        flex-wrap: wrap;
        gap: 40px 32px; /* Row gap, column gap */
    }

    /* Top row: Brand + CTA fill entire first row */
    .site-footer__col--brand {
        order: 1;
        flex: 1 0 auto; /* Grow but don't shrink */
        min-width: 60%; /* Ensures Brand + CTA take full row */
    }

    .site-footer__col--cta {
        order: 2;
        flex: 0 0 auto;
    }

    /* Bottom row: 3 nav columns - spread across full width */
    .site-footer__col--nav {
        order: 3;
        flex: 1 0 25%; /* Each takes ~1/3 of row */
    }

    /* Divider stays full width with padding */
    .site-footer__divider {
        width: calc(100% - 80px);
        margin: 0 auto;
    }
}

/* Footer rows: full mobile at 960px */
@media (max-width: 960px) {
    /* Icon row: all single column */
    .site-footer__icons {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .site-footer__logo-col {
        margin-left: 0;
        margin-right: 0;
    }

    .site-footer__logo img {
        width: 156px;
        height: 157px;
    }

    .site-footer__icon-boxes {
        flex-direction: column;
        width: auto;
        gap: 32px;
    }

    .site-footer__icon-item {
        align-items: center;
        text-align: center;
    }

    /* Footer main: single column, hide nav, show Quick Links */
    .site-footer__main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
    }

    /* Reset column flex */
    .site-footer__col {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* Hide nav columns - replaced by Quick Links */
    .site-footer__col--nav {
        display: none;
    }

    /* Show Quick Links hamburger */
    .site-footer__quick-links {
        display: block;
        order: 10;
        width: 100%;
    }

    .site-footer__col--brand {
        order: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .site-footer__col--cta {
        order: 2;
    }

    .site-footer__social {
        justify-content: center;
    }

    /* Divider full width with padding */
    .site-footer__divider {
        width: calc(100% - 80px);
    }
}

/* Subscribe band: constrain to match 50px notch at narrower viewports */
@media (max-width: 1360px) {
    .subscribe-band__inner {
        max-width: calc(100vw - 100px);
        /* margin: 0 auto inherited - stays centered */
    }
}

/* Pre-footer CTA and Subscribe band: tablet stacking at 1100px */
@media (max-width: 1100px) {
    /* Pre-footer CTA: stack, 40px padding, 16px gap */
    .prefooter-cta__inner {
        grid-template-columns: 1fr;
        padding: 40px;
        gap: 16px;
        text-align: center;
    }

    .prefooter-cta__content h2 {
        font-size: 40px;
        line-height: 48px;
        text-wrap: balance;
    }

    .prefooter-cta__action {
        text-align: center;
    }

    /* Subscribe band: stack, 24px T/B, 8px L/R cream padding, 16px gap */
    /* max-width: calc(100vw - 100px) inherited from 1360px to stay aligned with 50px notches */
    .subscribe-band__inner {
        grid-template-columns: 1fr;
        padding: 24px 8px;
        gap: 16px;
        text-align: center;
    }

    .subscribe-band__content .eyebrow {
        font-size: 17px;
        line-height: 20px;
        font-weight: var(--font-weight-medium);
    }

    .subscribe-band__content h2 {
        font-size: 30px;
        line-height: 36px;
        font-weight: var(--font-weight-medium);
    }

    .subscribe-band__form {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    /* Gravity Form stacking at 1100px */
    .subscribe-band__form form.tts-subscribe-form {
        flex-direction: column !important;
    }

    .subscribe-band__form .tts-subscribe-form .gform_button,
    .subscribe-band__form .tts-subscribe-form input[type="submit"] {
        border-radius: 0 0 5px 5px !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    :root {
        --text-5xl: 2rem;
        --text-4xl: 1.75rem;
        --text-xl: 1.125rem;
    }

    /* Mobile containers - reduce margins */
    .wrap-xl {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    /* Note: hamburger and nav padding set at 1080px - don't override here */

    .primary-nav__logo-space {
        display: none;
    }

    /* NOTE: Footer mobile styles now handled at 960px breakpoint */

    /* Subscribe band: restore internal padding at narrow viewports */
    .subscribe-band__inner {
        padding: 24px 32px;
    }

    /* Footer list bullets - hide on mobile for centered text */
    .site-footer__links li {
        justify-content: center;
    }

    .site-footer__links li::before {
        display: none;
    }
}

/* ==========================================================================
   ANIMATIONS
   Page load + scroll-triggered reveal animations
   ========================================================================== */

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */

/* Top bar drops down from above */
@keyframes dropDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Generic fade up */
@keyframes fadeUp {
    from {
        transform: translateY(var(--anim-distance));
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Fade in with slight rotation (for leaves) */
@keyframes fadeRotateIn {
    from {
        opacity: 0;
        transform: rotate(calc(var(--leaf-rotate, 0deg) - 10deg)) scale(0.9);
    }
    to {
        opacity: 0.22; /* Match XD spec */
        transform: rotate(var(--leaf-rotate, 0deg)) scale(1);
    }
}

/* --------------------------------------------------------------------------
   PAGE LOAD ANIMATIONS
   -------------------------------------------------------------------------- */

/* Top bar animation */
.js .topbar {
    animation: dropDown 300ms var(--anim-ease) both;
}

/* Hero content staggered load - only when JS is active */
.js .hero__content .eyebrow {
    animation: fadeUp var(--anim-duration) var(--anim-ease) 100ms both;
}

.js .hero__content h1 {
    animation: fadeUp var(--anim-duration) var(--anim-ease) 200ms both;
}

.js .hero__content .hero__body,
.js .hero__content .hero__body-reverse {
    animation: fadeUp var(--anim-duration) var(--anim-ease) 300ms both;
}

.js .hero__content .btn {
    animation: fadeUp var(--anim-duration) var(--anim-ease) 400ms both;
}

/* Hero leaves staggered fade-rotate */
.js .hero__leaf--1 {
    --leaf-rotate: 15deg;
    animation: fadeRotateIn 500ms var(--anim-ease) 200ms both;
}

.js .hero__leaf--2 {
    --leaf-rotate: -8deg;
    animation: fadeRotateIn 500ms var(--anim-ease) 300ms both;
}

.js .hero__leaf--3 {
    --leaf-rotate: 12deg;
    animation: fadeRotateIn 500ms var(--anim-ease) 400ms both;
}

.js .hero__leaf--4 {
    --leaf-rotate: -25deg;
    animation: fadeRotateIn 500ms var(--anim-ease) 500ms both;
}

/* Hero triangles slide in */
@keyframes slideFromLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.js .hero__plate-triangle--left {
    animation: slideFromLeft 600ms var(--anim-ease) 150ms both;
}

.js .hero__plate-triangle--corner {
    animation: slideFromRight 600ms var(--anim-ease) 150ms both;
}

/* Green overlay on plate that fades to reveal image */
@keyframes fadeOutOverlay {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.js .hero__plate::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-dark-green);
    z-index: 1; /* Above image, below triangles */
    pointer-events: none;
    animation: fadeOutOverlay 900ms var(--anim-ease) 150ms both; /* 150% of 600ms */
}

/* --------------------------------------------------------------------------
   SCROLL-TRIGGERED ANIMATIONS (IntersectionObserver)
   -------------------------------------------------------------------------- */

/* Base state: hidden, ready to animate */
.js [data-animate] {
    opacity: 0;
    transition: opacity var(--anim-duration) var(--anim-ease),
                transform var(--anim-duration) var(--anim-ease);
}

/* Fade up (default) */
.js [data-animate="fade-up"] {
    transform: translateY(var(--anim-distance));
}

/* Slide from left */
.js [data-animate="slide-left"] {
    transform: translateX(calc(var(--anim-distance) * -1.5));
}

/* Slide from right */
.js [data-animate="slide-right"] {
    transform: translateX(calc(var(--anim-distance) * 1.5));
}

/* Visible state - triggered by JS */
.js [data-animate].is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Stagger delays for sequential animations */
.js [data-animate-delay="1"] { transition-delay: var(--anim-stagger); }
.js [data-animate-delay="2"] { transition-delay: calc(var(--anim-stagger) * 2); }
.js [data-animate-delay="3"] { transition-delay: calc(var(--anim-stagger) * 3); }
.js [data-animate-delay="4"] { transition-delay: calc(var(--anim-stagger) * 4); }
.js [data-animate-delay="5"] { transition-delay: calc(var(--anim-stagger) * 5); }
.js [data-animate-delay="6"] { transition-delay: calc(var(--anim-stagger) * 6); }

/* --------------------------------------------------------------------------
   FOOTER REVEAL
   Prefooter and subscribe band rise up from the brown footer
   -------------------------------------------------------------------------- */

.js .prefooter-cta[data-animate]:not(.is-visible) {
    transform: translateY(40px);
}

.js .subscribe-band[data-animate]:not(.is-visible) {
    transform: translateY(30px);
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   Respect user preference - disable all animations
   -------------------------------------------------------------------------- */

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

    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
    }
}