/* =============================================================================
   style.css — GGT USA Chicago
   "Chicago Industrial Modern" design system
   Palette: Charcoal #1A2332 · Rust #C0392B · Amber #F39C12 · Steel #7F8C8D
   Fonts:   Bebas Neue (display) · Montserrat (headings) · Source Sans Pro (body)
   Approach: mobile-first, semantic HTML5, CSS custom properties throughout
   ============================================================================= */

/* -----------------------------------------------------------------------------
   FONTS — loaded via css/fonts.css (self-hosted woff2, Latin subset)
   See fonts.css for @font-face declarations and font file notes.
   ----------------------------------------------------------------------------- */

/* =============================================================================
   SECTION 1 — DESIGN TOKENS (CSS Custom Properties)
   All colors, fonts, spacing, and breakpoints live here.
   Change a token and it propagates everywhere — no find-and-replace hunts.
   ============================================================================= */
:root {

    /* --- Color palette -------------------------------------------------------
       Charcoal is both the primary dark background and the body text color.
       Rust is the accent: borders, icons, hover states, section highlights.
       Amber is reserved exclusively for CTAs — high contrast on both dark/light.
       Steel is the mid-tone: captions, borders, secondary text.
       Off-white warm background keeps the "industrial aged paper" feel on light
       sections without the harshness of pure white.
       ---------------------------------------------------------------------- */
    --color-charcoal:   #1A2332;   /* primary dark background, headings on light */
    --color-rust:       #C0392B;   /* accent — borders, icons, highlights        */
    --color-amber:      #F39C12;   /* CTA buttons only — do not dilute           */
    --color-steel:      #7F8C8D;   /* secondary text, rule lines, captions       */
    --color-offwhite:   #F8F5F0;   /* light section background (warm, not stark) */
    --color-white:      #FFFFFF;
    --color-text:       #1A2332;   /* body text on light backgrounds             */
    --color-text-muted: #4A5568;   /* secondary body text, captions              */

    /* Overlay for hero image — charcoal at 75% opacity darkens the photo while
       keeping enough image visible to read the subject matter */
    --color-hero-overlay: rgba(26, 35, 50, 0.38);

    /* --- Typography ----------------------------------------------------------
       Bebas Neue: all-caps condensed — hero headlines only.
       Montserrat: mixed case — section headings, nav, labels.
       Source Sans 3: body copy, form labels, captions. Highly legible at small
       sizes — important for facility managers reading on phones in the field.
       ---------------------------------------------------------------------- */
    --font-display:  'Bebas Neue', 'Montserrat', sans-serif;
    --font-heading:  'Montserrat', sans-serif;
    --font-body:     'Source Sans 3', 'Lato', sans-serif;

    /* Type scale — modular, base 16px.
       Mobile sizes; desktop overrides in the responsive section below. */
    --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:  1.875rem;  /*  30px */
    --text-4xl:  2.25rem;   /*  36px */
    --text-5xl:  3rem;      /*  48px */
    --text-hero: 4rem;      /*  64px — Bebas Neue display size, desktop */

    /* --- Spacing scale -------------------------------------------------------
       Powers of 1.5 from a 0.25rem base. Consistent rhythm top to bottom.
       ---------------------------------------------------------------------- */
    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */

    /* --- Layout -------------------------------------------------------------
       Single max-width keeps content readable on ultra-wide monitors.
       Section padding creates the breathing room between content blocks.
       ---------------------------------------------------------------------- */
    --container-max:    1200px;
    --container-pad:    var(--space-6);   /* side padding on mobile */
    --section-pad-v:    var(--space-16);  /* vertical padding per section */

    /* --- Visual details ----------------------------------------------------- */
    --border-radius:    4px;      /* subtle — industrial look, not bubbly        */
    --border-radius-lg: 8px;
    --transition:       0.25s ease;

    /* Box shadow: charcoal-tinted, not generic black.
       Reinforces the dark palette even in shadow. */
    --shadow-sm:  0 1px 3px rgba(26, 35, 50, 0.15);
    --shadow-md:  0 4px 12px rgba(26, 35, 50, 0.20);
    --shadow-lg:  0 8px 24px rgba(26, 35, 50, 0.25);

    /* --- Breakpoints (reference — not used in custom properties directly,
       but documented here so the values are in one place) -------------------
       sm:  480px   large phones, landscape
       md:  768px   tablets
       lg:  1024px  desktop
       xl:  1280px  wide desktop
       ---------------------------------------------------------------------- */
}

/* =============================================================================
   SECTION 2 — BASE STYLES
   After the reset zeroed everything, re-establish the sensible defaults the
   design system actually wants.
   ============================================================================= */

html {
    /* Smooth scroll for anchor links (service cards → section, etc.) */
    scroll-behavior: smooth;
    /* text-size-adjust removed — inconsistent browser support causes console noise.
       Modern browsers no longer inflate font sizes on orientation change. */
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.6;          /* generous line height for readability on mobile */
    color: var(--color-text);
    background-color: var(--color-offwhite);
}

/* --- Headings --------------------------------------------------------------- */

/* h1 is reserved for the page hero — Bebas Neue at full display size */
h1 {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: 1.05;
    letter-spacing: 0.04em;   /* Bebas Neue benefits from slight tracking */
    color: var(--color-white); /* h1 lives inside the dark hero section */
    text-transform: uppercase;
}

/* h2 — section headings: Montserrat bold, charcoal on light, white on dark */
h2 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-charcoal);
}

/* h3 — card headings, sidebar headings */
h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-charcoal);
}

/* h4–h6 — rarely used, consistent fallback */
h4, h5, h6 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-charcoal);
}

/* --- Body text -------------------------------------------------------------- */

p {
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
}

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

strong, b {
    font-weight: 600;
    color: var(--color-text);
}

em, i {
    font-style: italic;
}

/* --- Links ------------------------------------------------------------------ */

a {
    color: var(--color-rust);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover,
a:focus {
    color: var(--color-amber);
}

a:focus-visible {
    /* Keyboard navigation indicator — accessibility requirement */
    outline: 2px solid var(--color-amber);
    outline-offset: 3px;
    border-radius: var(--border-radius);
}

/* --- Images ----------------------------------------------------------------- */

img {
    /* Images never overflow their container on narrow screens */
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Lists (when used for content, not nav/reset) --------------------------- */

/* Re-enable list styles for prose lists inside <main> content areas */
main ul,
main ol {
    padding-left: var(--space-6);
}

main ul {
    list-style: disc;
}

main ol {
    list-style: decimal;
}

main li {
    margin-bottom: var(--space-2);
}

/* =============================================================================
   SECTION 3 — LAYOUT
   Container, section wrapper, and CSS Grid for the page-level layout.
   No divs — sections and articles carry the layout.
   ============================================================================= */

/* Centered content wrapper — consistent horizontal padding and max-width.
   Applied to inner elements, not the section itself (sections run full width
   so their backgrounds span the viewport). */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* Generic section vertical rhythm — every <section> gets consistent
   top/bottom breathing room without repeated declarations per section */
main > section {
    padding-block: var(--section-pad-v);
}

/* Anchor-target offset — sticky header is ~4rem tall.
   Without this, clicking #quote or any in-page anchor scrolls the section
   top behind the nav bar, pressing the heading against the rust border line. */
main > section[id] {
    scroll-margin-top: 5rem;
}

/* Default section background — off-white warm neutral.
   Each section sets its own background explicitly via ID or class
   in Sections 10, 21–28. nth-child auto-alternation was removed —
   specificity [0,2,1] was overriding all explicit section rules. */
main > section {
    background-color: var(--color-offwhite);
}

/* Section header block — heading + optional subheading above a grid */
.section-header {
    margin-bottom: var(--space-10);
    text-align: center;
}

.section-header h2 {
    margin-bottom: var(--space-3);
}

/* Rust rule under section headings — visual anchor, industrial detail */
.section-header h2::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    background-color: var(--color-rust);
    margin: var(--space-3) auto 0;
}

.section-header p {
    max-width: 640px;
    margin-inline: auto;
    font-size: var(--text-lg);
}

/* =============================================================================
   SECTION 4 — HEADER & NAV
   Sticky header: dark charcoal bar, logo left, nav right.
   Mobile: hamburger menu (JS-toggled .nav-open class on <header>).
   ============================================================================= */

body > header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-charcoal);
    border-bottom: 3px solid var(--color-rust); /* rust accent line — brand marker */
    box-shadow: var(--shadow-md);
}

body > header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4rem;
}

/* Logo / site name */
body > header .site-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
    text-decoration: none;
}

body > header .site-logo img {
    height: 40px;
    width: auto;
    display: block;
    line-height: 0;  /* suppress baseline gap */
}

body > header .site-logo-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    color: var(--color-white);
    line-height: 1.15;
    text-transform: uppercase;
}

body > header .site-logo-name span {
    color: var(--color-rust);
}

/* Primary navigation */
body > header nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

body > header nav a {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color var(--transition);
    padding-block: var(--space-2);
    border-bottom: 2px solid transparent;
}

body > header nav a:hover,
body > header nav a[aria-current="page"] {
    color: var(--color-white);
    border-bottom-color: var(--color-rust);
}

/* CTA in nav — amber "Request a Quote" button */
body > header nav .nav-cta {
    background-color: var(--color-amber);
    color: var(--color-charcoal);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--border-radius);
    font-weight: 700;
    border-bottom: none;
    transition: background-color var(--transition), transform var(--transition);
}

body > header nav .nav-cta:hover {
    background-color: #e6890a;  /* amber darkened 10% on hover */
    color: var(--color-charcoal);
    transform: translateY(-1px);
}

/* Mobile hamburger button — hidden on desktop */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    color: var(--color-white);
    font-size: var(--text-2xl);
    line-height: 1;
}

/* =============================================================================
   SECTION 5 — HERO
   Full-viewport hero with Chicago skyline background image, dark overlay,
   centered display text, and primary CTA.
   ============================================================================= */

#hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding-block: var(--space-24);
}

/* Carousel backdrop — five images crossfade behind the content */
.hero-carousel {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
}

.hero-carousel img {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.hero-carousel img.is-active {
    opacity: 1;
}

/* Charcoal overlay sits above the carousel, below the text.
   Keeps text legible at any image brightness. */
#hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1;
    background-color: var(--color-hero-overlay);
}

/* Hero text content sits above both carousel and overlay */
#hero .hero-content {
    position: relative;
    z-index: 2;
}

#hero h1 {
    font-size: var(--text-hero);
    margin-bottom: var(--space-4);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85),
                 0 4px 32px rgba(0, 0, 0, 0.70);
}

/* Tagline under h1 — Montserrat, not Bebas Neue */
#hero .hero-tagline {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--space-8);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.80);
}

/* "Precision · Passion · Performance" dots as decoration */
#hero .hero-tagline span {
    color: var(--color-rust);
    margin-inline: var(--space-3);
}

/* =============================================================================
   SECTION 6 — BUTTONS & CTAs
   Amber is the exclusive CTA color. Rust is secondary action. Ghost for dark bg.
   ============================================================================= */

/* Base button — shared properties */
.btn {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--space-3) var(--space-8);
    border-radius: var(--border-radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition),
                color var(--transition),
                transform var(--transition),
                box-shadow var(--transition);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Primary CTA — amber on charcoal text. Maximum contrast. */
.btn-primary {
    background-color: var(--color-amber);
    color: var(--color-charcoal);
    border-color: var(--color-amber);
}

.btn-primary:hover {
    background-color: #e6890a;
    border-color: #e6890a;
    color: var(--color-charcoal);
}

/* Secondary CTA — rust fill */
.btn-secondary {
    background-color: var(--color-rust);
    color: var(--color-white);
    border-color: var(--color-rust);
}

.btn-secondary:hover {
    background-color: #a93226;
    border-color: #a93226;
    color: var(--color-white);
}

/* Ghost button — for use on dark charcoal sections */
.btn-ghost {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn-ghost:hover {
    background-color: var(--color-white);
    color: var(--color-charcoal);
}

/* =============================================================================
   SECTION 7 — SERVICES GRID
   9 service cards in a responsive CSS Grid.
   <article> elements — semantically correct for self-contained content units.
   ============================================================================= */

/* Services section gets a wider container than the default 1200px max —
   2 photo columns look better filling more of the viewport.               */
#services .container {
    max-width: 1400px;
}

#services .services-grid {
    display: grid;
    /* 1 column mobile → 2 columns at 640px — client spec */
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

/* Each service card — zero padding so the photo fills edge-to-edge.
   Text children carry their own inline padding below.                   */
#services article {
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    padding: 0;
    overflow: hidden;   /* clips photo corners to card border-radius */
    min-width: 0;       /* prevents grid blowout */
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

/* Service photo — width:100% fills the full card; object-fit:cover crops
   to the 4:3 frame without stretching. No negative margins needed.      */
#services article img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-bottom: 4px solid var(--color-rust);
}

#services article:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Text content inside the card gets its own breathing room */
#services article h3 {
    padding: var(--space-6) var(--space-8) var(--space-3);
}

#services article p {
    font-size: var(--text-sm);
    padding-inline: var(--space-8);
    margin-bottom: var(--space-6);
}

#services article a {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-rust);
    padding: 0 var(--space-8) var(--space-8);
}

#services article a:hover {
    color: var(--color-charcoal);
}

/* =============================================================================
   SECTION 8 — FOOTER
   Dark charcoal, three-column grid on desktop, stacked on mobile.
   ============================================================================= */

body > footer {
    background-color: var(--color-charcoal);
    border-top: 3px solid var(--color-rust);
    color: rgba(255, 255, 255, 0.75);
    padding-block: var(--space-12);
    font-size: var(--text-sm);
}

body > footer .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

body > footer h4 {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(192, 57, 43, 0.5); /* faint rust rule */
}

body > footer ul li {
    margin-bottom: var(--space-2);
}

body > footer a {
    color: rgba(255, 255, 255, 0.75);
}

body > footer a:hover {
    color: var(--color-amber);
}

/* Copyright bar */
body > footer .footer-bottom {
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    text-align: center;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.50);
}

/* =============================================================================
   SECTION 9 — RESPONSIVE BREAKPOINTS
   Mobile-first: base styles above are for small screens.
   Media queries layer in progressively larger layouts.
   ============================================================================= */

/* --- Services grid: 2-column at 640px --------------------------------------- */
@media (min-width: 640px) {

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

    /* 9 cards in 2 columns leaves one orphan — center it spanning both columns */
    #services .services-grid > li:last-child {
        grid-column: 1 / -1;
    }

    #services .services-grid > li:last-child article {
        max-width: 50%;
        margin-inline: auto;
    }
}

/* --- Tablet: 768px ---------------------------------------------------------- */
@media (min-width: 768px) {

    :root {
        --container-pad: var(--space-8);   /* more breathing room on tablet */
        --section-pad-v: var(--space-20);
    }

    h1 {
        font-size: var(--text-5xl);
    }

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

    body > footer .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Desktop: 1024px -------------------------------------------------------- */
@media (min-width: 1024px) {

    :root {
        --text-hero: 5rem;   /* 80px Bebas Neue at full desktop impact */
    }

    /* Nav visible — hamburger hidden */
    .nav-toggle {
        display: none;
    }

    body > header nav ul {
        display: flex;  /* always flex on desktop */
    }

    body > footer .container {
        grid-template-columns: 2fr 1fr 1fr;  /* brand col wider than the two nav cols */
    }
}

/* --- Mobile nav (max-width — the exception to mobile-first) -----------------
   Applied only when viewport is below desktop width and nav is collapsed.
   ---------------------------------------------------------------- */
@media (max-width: 1023px) {

    .nav-toggle {
        display: block;
    }

    /* Nav list hidden by default on mobile — JS toggles .nav-open on <header> */
    body > header nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background-color: var(--color-charcoal);
        border-top: 1px solid rgba(255, 255, 255, 0.10);
        padding: var(--space-4) var(--space-6);
        box-shadow: var(--shadow-lg);
    }

    /* When JS adds .nav-open to <header>, the nav list becomes visible */
    body > header.nav-open nav ul {
        display: flex;
    }

    body > header nav ul li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    body > header nav a {
        display: block;
        padding-block: var(--space-3);
        border-bottom: none;
    }

    body > header nav .nav-cta {
        margin-top: var(--space-3);
        margin-bottom: var(--space-2);
        display: inline-block;
    }

    #hero h1 {
        font-size: var(--text-4xl);
    }

    #hero .hero-tagline {
        font-size: var(--text-base);
        letter-spacing: 0.12em;
    }
}

/* =============================================================================
   SECTION 10 — SECTION BACKGROUNDS
   Explicit per-section colors. More predictable than nth-child auto-alternation
   — easy to see at a glance what each section looks like without counting.
   ============================================================================= */

/* Hero is always dark — overrides any inherited background */
#hero {
    background-color: var(--color-charcoal);
}

/* About — first light break after the dark hero, welcoming tone */
#about {
    background-color: var(--color-white);
}

/* Services — off-white, cards sit on a warm neutral */
#services {
    background-color: var(--color-offwhite);
}

/* Why GGT — dark section, white text applied via dark-section rule below */
#why-us {
    background-color: var(--color-charcoal);
}

/* Projects — light, open feel for the gallery */
#projects {
    background-color: var(--color-white);
}

/* Testimonials — dark, quotes stand out as pull-quotes */
#testimonials {
    background-color: var(--color-charcoal);
}

/* Certifications — off-white, badge row reads clean on neutral */
#certifications {
    background-color: var(--color-offwhite);
}

/* Contact form — dark, amber CTA button pops against charcoal */
#contact {
    background-color: var(--color-charcoal);
}

/* About page — dark sections */
#why-choose {
    background-color: var(--color-charcoal);
}

#values {
    background-color: var(--color-charcoal);
}

/* Apply white text to all explicitly dark sections at once */
#hero, #why-us, #testimonials, #contact, #why-choose, #values {
    color: var(--color-white);
}

#hero h1,
#why-us h2, #why-us h3,
#testimonials h2, #testimonials h3,
#contact h2, #contact h3,
#why-choose h2, #why-choose h3,
#values h2, #values h3 {
    color: var(--color-white);
}

#why-us p,
#testimonials p,
#contact p,
#why-choose p,
#values p {
    color: rgba(255, 255, 255, 0.82);
}

/* =============================================================================
   SECTION 11 — ABOUT STATS
   Three bold callout numbers below the about copy.
   ============================================================================= */

.about-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-10);
    text-align: center;
}

.about-stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-width: 140px;

    /* Rust left border on desktop creates a subtle divider between stats */
    padding: var(--space-4) var(--space-8);
    border-left: 3px solid var(--color-rust);
}

/* Remove left border from first stat — no divider before the first item */
.about-stats li:first-child {
    border-left: none;
}

.about-stats strong {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    color: var(--color-rust);
    line-height: 1;
}

.about-stats span {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

/* =============================================================================
   SECTION 12 — SERVICES GRID (updated for ul > li > article structure)
   The <ul> is the CSS Grid container.
   <li> are the grid cells — height: 100% passes through to <article>.
   <article> is the visible card with hover effect.
   ============================================================================= */

/* Unscoped so it applies on both index.php (#services) and services.php (#pillar-*) */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    list-style: none;
    padding: 0;
}

/* Make <li> pass its full height to <article> */
.services-grid > li {
    display: flex;
}

.services-grid article {
    display: flex;
    flex-direction: column;      /* stack content so the link anchors to bottom */
    width: 100%;
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    border-top: 4px solid var(--color-rust);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.services-grid article:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.services-grid article h3 {
    margin-bottom: var(--space-3);
    color: var(--color-charcoal);
}

.services-grid article p {
    flex-grow: 1;    /* pushes the link to the bottom of the card */
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}

.services-grid article a {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-rust);
    margin-top: auto;
}

.services-grid article a:hover {
    color: var(--color-charcoal);
}

/* =============================================================================
   SECTION 13 — WHY GGT GRID
   2×2 grid of differentiator cards on a dark charcoal background.
   ============================================================================= */

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
    list-style: none;
    padding: 0;
}

.why-grid li {
    padding: var(--space-8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 3px solid var(--color-rust);
    border-radius: var(--border-radius-lg);
    background-color: rgba(255, 255, 255, 0.04);  /* very subtle white lift */
    transition: background-color var(--transition);
}

.why-grid li:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.why-grid h3 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
    color: var(--color-white);
}

/* =============================================================================
   SECTION 14 — GALLERY PLACEHOLDER
   Replaced by a real image grid when photography is available.
   ============================================================================= */

.gallery-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background-color: var(--color-offwhite);
    border: 2px dashed var(--color-steel);
    border-radius: var(--border-radius-lg);
}

.gallery-placeholder figcaption {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    color: var(--color-steel);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Home page — work preview grid (3-photo mini-grid) ───────────────────── */

.work-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin: var(--space-10) 0 0;
}

.work-preview-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    margin: 0;
    aspect-ratio: 4 / 3;
}

.work-preview-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.work-preview-card:hover img {
    transform: scale(1.04);
}

.work-preview-card figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(transparent, rgba(26, 35, 50, 0.82));
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
}

.work-preview-chip {
    display: block;
    background: var(--color-rust);
    color: var(--color-white);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2em 0.55em;
    border-radius: 2px;
    margin-bottom: 0.3em;
    width: fit-content;
}

/* =============================================================================
   SECTION 15 — TESTIMONIALS
   <figure> + <blockquote> + <figcaption> — correct HTML5 attributed quote pattern.
   Dark section — subtle card borders on charcoal background.
   ============================================================================= */

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
    list-style: none;
    padding: 0;
}

.testimonials-grid li {
    display: flex;
}

.testimonials-grid figure {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: var(--space-8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--color-rust);
    border-radius: var(--border-radius-lg);
    background-color: rgba(255, 255, 255, 0.04);
}

/* Opening quote mark — decorative, via CSS so it doesn't affect DOM/accessibility */
.testimonials-grid blockquote::before {
    content: '\201C';   /* " — left double quotation mark */
    display: block;
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--color-rust);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.testimonials-grid blockquote {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.testimonials-grid blockquote p {
    font-size: var(--text-base);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
    flex-grow: 1;
    margin-bottom: 0;
}

.testimonials-grid figcaption {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    font-size: var(--text-sm);
    color: var(--color-steel);
}

.testimonials-grid cite {
    font-style: normal;
    font-weight: 600;
}

/* Avatar circle — sits above the quote */
.testimonials-grid .testimonial-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-rust);
    margin: 0 auto var(--space-4);
    align-self: center;
    background-color: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.testimonials-grid .testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* No-photo spacer — invisible but holds the avatar's height so all three cards
   align at the blockquote. Used when a testimonial has no photo yet. */
.testimonials-grid .testimonial-avatar--empty {
    visibility: hidden;
}

/* Initials fallback — shown when no photo */
.testimonials-grid .testimonial-avatar[data-initials]::after {
    content: attr(data-initials);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-steel);
}

/* Name + role stacked below the separator */
.testimonials-grid .testimonial-name {
    display: block;
    font-weight: 700;
    color: var(--color-white);
    font-size: var(--text-sm);
}

.testimonials-grid .testimonial-role {
    display: block;
    color: var(--color-steel);
    font-size: 0.75rem;
    margin-top: 0.2em;
}

.testimonials-grid .testimonial-origin {
    display: block;
    color: var(--color-rust);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 0.3em;
}

/* =============================================================================
   SECTION 16 — CERTIFICATIONS BADGE ROW
   Flex wrap row of credential badges on a light background.
   ============================================================================= */

.cert-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    list-style: none;
    padding: 0;
    margin-top: var(--space-4);
}

.cert-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: 120px;
    padding: var(--space-6) var(--space-4);
    border: 2px solid var(--color-charcoal);
    border-radius: var(--border-radius-lg);
    text-align: center;
    background-color: var(--color-white);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.cert-grid li:hover {
    border-color: var(--color-rust);
    box-shadow: var(--shadow-md);
}

.cert-grid svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-rust);
    margin-bottom: var(--space-2);
    flex-shrink: 0;
}

.cert-grid strong {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-charcoal);
}

.cert-grid span {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-steel);
    font-weight: 600;
}

.cert-note {
    text-align: center;
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    color: var(--color-steel);
}

/* =============================================================================
   SECTION 17 — CONTACT / QUOTE FORM
   Dark section — inputs need light backgrounds to stay readable.
   Two-column layout on tablet+ (name|phone on same row).
   ============================================================================= */

.quote-form {
    max-width: 640px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.quote-form label {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: calc(-1 * var(--space-2));   /* tighten label-to-input gap */
}

/* Required field marker */
.quote-form label abbr {
    color: var(--color-rust);
    text-decoration: none;
    margin-left: var(--space-1);
}

.quote-form input,
.quote-form select,
.quote-form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background-color: rgba(255, 255, 255, 0.10);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    transition: border-color var(--transition), background-color var(--transition);
    appearance: none;   /* remove browser chrome on select/inputs */
}

.quote-form input::placeholder,
.quote-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.40);
}

/* Select arrow — custom chevron since appearance:none removes the default */
.quote-form select {
    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 d='M1 1l5 5 5-5' stroke='%23F39C12' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-10);
    cursor: pointer;
}

/* Select option text needs to be dark — options inherit OS styling */
.quote-form select option {
    background-color: var(--color-charcoal);
    color: var(--color-white);
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
    outline: none;
    border-color: var(--color-amber);
    background-color: rgba(255, 255, 255, 0.15);
}

.quote-form textarea {
    resize: vertical;   /* allow vertical resize only — horizontal breaks layouts */
    min-height: 120px;
}

.quote-form .btn {
    align-self: flex-start;    /* button stays left-aligned, doesn't stretch */
    margin-top: var(--space-4);
}

/* =============================================================================
   SECTION 18 — FOOTER GRID & DETAILS
   Footer .container becomes a CSS Grid — three content columns plus a
   full-width copyright bar. No wrapper div needed.
   ============================================================================= */

/* Override footer .container to be the CSS grid.
   grid-template-columns is intentionally absent here — the browser defaults
   to a single implicit column on mobile. The @media overrides in Section 7
   (2-col at 768px, 3-col at 1024px) apply when the viewport matches because
   this rule no longer sets grid-template-columns to fight them. */
body > footer .container {
    display: grid;
    gap: var(--space-8);
}

body > footer .footer-bottom {
    grid-column: 1 / -1;              /* always spans full width */
}

/* Footer brand span (GGT in rust) */
body > footer .site-logo span,
body > footer section h4 span,
body > footer h4 span {
    color: var(--color-rust);
}

body > footer address {
    font-style: normal;    /* reset browser italic on <address> */
    margin-top: var(--space-4);
}

body > footer address p {
    margin-bottom: var(--space-2);
    color: rgba(255, 255, 255, 0.75);
}

.footer-cta {
    display: inline-block;
    margin-top: var(--space-6);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-6);
}

/* Social links — horizontal pill row */
.social-links {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-6);
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: rgba(255, 255, 255, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 6px;
    transition: border-color var(--transition), color var(--transition);
}

.social-links a:hover {
    color: var(--color-amber);
    border-color: var(--color-amber);
}

/* =============================================================================
   SECTION 19 — HERO INNER LAYOUT
   Hero content is centered via flexbox. .hero-content wrapper
   provides z-index stacking above the carousel overlay.
   ============================================================================= */

#hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-inline: var(--container-pad);
}

/* CTA nav inside hero — row of two buttons */
#hero nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
    margin-top: var(--space-8);
}

/* Amber glow on primary CTA — makes it pop against the photo */
#hero nav .btn-primary {
    box-shadow: 0 4px 28px rgba(243, 156, 18, 0.65),
                0 2px 8px  rgba(0, 0, 0, 0.40);
    padding: var(--space-4) var(--space-10);
}

#hero nav .btn-primary:hover {
    box-shadow: 0 6px 36px rgba(243, 156, 18, 0.80),
                0 2px 8px  rgba(0, 0, 0, 0.40);
}

/* Frosted-glass tint on ghost — visible without distracting from primary CTA */
#hero nav .btn-ghost {
    background-color: rgba(255, 255, 255, 0.08);
    padding: var(--space-4) var(--space-10);
}

/* =============================================================================
   SECTION 20 — ACCESSIBILITY & UTILITIES
   ============================================================================= */

/* =============================================================================
   SECTION 21 — PAGE BANNER
   Inner page header. Shorter than the home hero — same dark palette, same
   rust bottom border that runs through the header. Used on every page
   except the home page.
   ============================================================================= */

.page-banner {
    background-color: var(--color-charcoal);
    background-size: cover;
    background-position: center;
    padding-block: var(--space-16);
    text-align: center;
    border-bottom: 4px solid var(--color-rust);
}

.page-banner h1 {
    font-size: var(--text-4xl);
    color: var(--color-white);
    margin-bottom: var(--space-3);
}

.page-banner p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.82);
    max-width: 620px;
    margin-inline: auto;
}

/* Breadcrumb — shown on service detail pages */
.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    list-style: none;
    padding: 0;
    font-size: var(--text-sm);
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.60);
}

.breadcrumb a:hover {
    color: var(--color-amber);
}

.breadcrumb [aria-current="page"] {
    color: var(--color-white);
    font-weight: 600;
}

/* =============================================================================
   SECTION 22 — PROSE GRID
   Two-column layout: main content left, aside right.
   Used on About (story + stats) and service detail pages (intro + CTA aside).
   ============================================================================= */

.prose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: start;
}

.prose-content {
    max-width: 760px;   /* comfortable reading line length for long-form content */
}

.prose-content p {
    font-size: var(--text-lg);
    line-height: 1.75;
    margin-bottom: var(--space-6);
}

.prose-content h2 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
    .prose-grid {
        grid-template-columns: 1.6fr 1fr;
    }
}

/* =============================================================================
   SECTION 23 — ABOUT PAGE COMPONENTS
   Story stats sidebar, values grid, team grid.
   ============================================================================= */

/* Story stats — vertical list in the aside */
.story-aside {
    background-color: var(--color-charcoal);
    border-radius: var(--border-radius-lg);
    padding: var(--space-8);
    border-top: 4px solid var(--color-rust);
}

.story-stats {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.story-stats li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.story-stats li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.story-stats strong {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    color: var(--color-amber);
    line-height: 1;
}

.story-stats span {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.70);
}

/* Values grid — 3 columns on desktop */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
    list-style: none;
    padding: 0;
}

.values-grid li {
    padding: var(--space-8);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-top: 3px solid var(--color-amber);
    border-radius: var(--border-radius-lg);
    background-color: rgba(255, 255, 255, 0.04);
}

.values-grid h3 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--color-amber);
    margin-bottom: var(--space-4);
    letter-spacing: 0.04em;
}

/* Team grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-8);
    list-style: none;
    padding: 0;
}

/* li stretches to row height; article fills li so all cards are equal height */
.team-grid > li {
    display: flex;
}

.team-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--color-white);
    border-radius: var(--border-radius-lg);
    border-top: 4px solid var(--color-rust);
    padding: var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.team-card figure {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--color-offwhite);
    border: 3px solid var(--color-rust);
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Placeholder character until photo is available */
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    color: var(--color-steel);
}

.team-card figure::after {
    content: '\1F464';   /* 👤 silhouette — removed when photo img is added */
}

/* Hide silhouette and fill frame when a real photo is present */
.team-card figure:has(img)::after {
    content: none;
}

.team-card figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.team-card h3 {
    margin-bottom: var(--space-1);
}

.team-card .team-title {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-rust);
    margin-bottom: var(--space-4);
}

/* =============================================================================
   SECTION 24 — SERVICE DETAIL PAGE COMPONENTS
   Includes list, CTA aside, why-body, related services.
   ============================================================================= */

/* Section backgrounds for service detail pages */
.service-intro {
    background-color: var(--color-white);
}

.service-why {
    background-color: var(--color-charcoal);
    padding-block: var(--space-16);
}

.service-why .section-header h2 {
    color: var(--color-white);
}

.service-why .section-header h2::after {
    background-color: var(--color-rust);
}

.service-why .why-body {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
    font-size: var(--text-lg);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
}

.service-related {
    background-color: var(--color-offwhite);
    padding-block: var(--space-12);
}

.service-related h2 {
    margin-bottom: var(--space-6);
}

/* What's included — checklist grid */
.service-includes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin-top: var(--space-4);
}

.service-includes li {
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-offwhite);
    border-left: 3px solid var(--color-rust);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}

/* Rust checkmark via CSS — no icon font or SVG needed */
.service-includes li::before {
    content: '\2713';   /* ✓ */
    color: var(--color-rust);
    font-weight: 700;
    flex-shrink: 0;
}

/* Service CTA aside — sticky card on desktop */
.service-cta-aside {
    background-color: var(--color-charcoal);
    border-radius: var(--border-radius-lg);
    border-top: 4px solid var(--color-amber);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.service-cta-aside h3 {
    color: var(--color-white);
    font-size: var(--text-xl);
    margin-bottom: 0;
}

.service-cta-aside p {
    color: rgba(255, 255, 255, 0.80);
    font-size: var(--text-sm);
    margin-bottom: 0;
}

.service-cta-aside .btn {
    text-align: center;
}

@media (min-width: 1024px) {
    .service-cta-aside {
        position: sticky;
        top: calc(4rem + var(--space-6));   /* clear the sticky header */
    }
}

/* Related services — pill links */
.related-services {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
}

.related-services a {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    border: 2px solid var(--color-rust);
    border-radius: var(--border-radius);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-rust);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background-color var(--transition), color var(--transition);
}

.related-services a:hover {
    background-color: var(--color-rust);
    color: var(--color-white);
}

/* =============================================================================
   SECTION 25 — CTA STRIP
   Full-width amber section. Used at the bottom of About, Services,
   and all service detail pages. High-contrast amber on charcoal text.
   ============================================================================= */

.cta-strip {
    background-color: var(--color-amber);
    padding-block: var(--space-16);
    text-align: center;
}

.cta-strip .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.cta-strip h2 {
    color: var(--color-charcoal);
    margin-bottom: 0;
}

.cta-strip h2::after {
    background-color: var(--color-charcoal);
}

.cta-strip p {
    color: rgba(26, 35, 50, 0.80);
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
}

/* On amber, the primary btn goes charcoal to maintain contrast hierarchy */
.cta-strip .btn-primary {
    background-color: var(--color-charcoal);
    border-color: var(--color-charcoal);
    color: var(--color-white);
}

.cta-strip .btn-primary:hover {
    background-color: #0d1520;
    border-color: #0d1520;
}

/* =============================================================================
   SECTION 26 — CONTACT PAGE
   Two-column layout: form left, details right.
   ============================================================================= */

.contact-section {
    background-color: var(--color-charcoal);
    color: var(--color-white);
    padding-block: var(--space-16);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: start;
}

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 1.4fr 1fr;
    }
}

.contact-form-col h2 {
    margin-bottom: var(--space-8);
    color: var(--color-white);
}

/* Success / error messages — styled for dark charcoal contact section */
.form-success {
    background-color: rgba(22, 163, 74, 0.15);
    color: #86efac;
    border: 1px solid rgba(22, 163, 74, 0.3);
    border-left: 4px solid #16a34a;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-6);
    font-weight: 600;
}

.form-error {
    background-color: rgba(192, 57, 43, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(192, 57, 43, 0.3);
    border-left: 4px solid var(--color-rust);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-6);
    font-weight: 600;
}

/* Paragraph text on the charcoal contact background */
.contact-section p {
    color: rgba(255, 255, 255, 0.82);
}

/* Contact details column */
.contact-details-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.contact-details-col h3 {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-rust);
    color: var(--color-white);
}

/* Contact list — label + value pairs */
.contact-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-list li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.contact-list strong {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}

.contact-list a,
.contact-list span {
    font-size: var(--text-lg);
    color: var(--color-white);
    font-weight: 600;
}

.contact-list a:hover {
    color: var(--color-rust);
}

/* Business hours list */
.hours-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hours-list li:last-child {
    border-bottom: none;
}

/* Map placeholder */
.map-placeholder {
    min-height: 180px;
    background-color: rgba(255, 255, 255, 0.06);
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-placeholder figcaption {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* =============================================================================
   SECTION 27 — SERVICES PAGE — dark pillar sections override
   Pillars 2 and 4 on the services overview page are dark sections.
   Service cards inside dark sections need inverted colors.
   ============================================================================= */

#pillar-technical,
#pillar-development {
    background-color: var(--color-charcoal);
    padding-block: var(--space-16);
}

#pillar-technical .section-header h2,
#pillar-development .section-header h2 {
    color: var(--color-white);
}

#pillar-technical .section-header p,
#pillar-development .section-header p {
    color: rgba(255, 255, 255, 0.82);
}

/* Design & Development has one card — cap width so it doesn't span the full container */
#pillar-development .services-grid {
    max-width: 480px;
    margin-inline: auto;
}

/* Dark-variant service cards — used inside charcoal sections */
.services-grid--dark article {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: var(--color-amber);
    color: var(--color-white);
}

.services-grid--dark article h3 {
    color: var(--color-white);
}

.services-grid--dark article p {
    color: rgba(255, 255, 255, 0.80);
}

.services-grid--dark article a {
    color: var(--color-amber);
}

.services-grid--dark article a:hover {
    color: var(--color-white);
}

/* =============================================================================
   SECTION 28 — 404 NOT FOUND
   ============================================================================= */

.not-found {
    background-color: var(--color-charcoal);
    color: var(--color-white);
    min-height: 70vh;
    display: flex;
    align-items: center;
    text-align: center;
    padding-block: var(--space-16);
}

.not-found .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

/* Large display number — decorative, hidden from screen readers */
.not-found-code {
    font-family: var(--font-display);
    font-size: clamp(8rem, 20vw, 16rem);
    line-height: 1;
    color: var(--color-rust);
    opacity: 0.35;
    letter-spacing: .05em;
    margin: 0;
    user-select: none;
}

.not-found h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--color-white);
    margin: 0;
    margin-top: calc(var(--space-6) * -1);  /* pull up under the big 404 */
}

.not-found-msg {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.1rem;
    max-width: 40ch;
    line-height: 1.7;
    margin: 0;
}

.not-found-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
    margin-top: var(--space-4);
}

/* =============================================================================
   SECTION 29 — ACCESSIBILITY & UTILITIES
   ============================================================================= */

/* ── Alert utilities ────────────────────────────────────────────────────────
   .error   — red alert, used by config.inc.php error handler + anywhere else
   .success — green confirmation, general-purpose site-wide use
   Note: .form-error / .form-success (contact form) are separate — same idea
   but scoped to the form column with different margin.                      */

.error {
    background-color: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fca5a5;
    border-left: 4px solid var(--color-rust);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--border-radius);
    margin-block: var(--space-6);
    font-weight: 600;
    line-height: 1.6;
}

/* Dev backtrace — rendered inside .error by config.inc.php (LIVE=false) */
.error pre {
    background: #1e1e1e;
    color: #f8f8f2;
    padding: var(--space-4);
    border-radius: 4px;
    overflow-x: auto;
    font-size: .8rem;
    font-weight: 400;
    margin-top: var(--space-4);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
}

.success {
    background-color: #dcfce7;
    color: #14532d;
    border: 1px solid #86efac;
    border-left: 4px solid #16a34a;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--border-radius);
    margin-block: var(--space-6);
    font-weight: 600;
    line-height: 1.6;
}

/* Screen-reader-only text — visually hidden but available to assistive tech.
   Used for icon-only buttons (hamburger, social icons). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* =============================================================================
   SECTION 30 — PROJECTS PAGE
   Portfolio grid, project cards, chips, Chicago coming-soon strip,
   and testimonial-card variant (blockquote-based, for projects page).
   The SA portfolio represents GGT's Cape Town heritage (13 yrs);
   the Chicago section reflects the new chapter — same quality, new city.
   ============================================================================= */

/* ── Section wrappers ────────────────────────────────────────────────────── */

.projects-section {
    padding: var(--space-20) 0;
    background-color: var(--color-white);
}

/* Alternate section — warm off-white, visual breathing room between grid rows */
.projects-section--alt {
    padding: var(--space-20) 0;
    background-color: var(--color-offwhite);
}

/* ── Portfolio grid ───────────────────────────────────────────────────────── */

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6);
    list-style: none;
    padding: 0;
    margin: var(--space-10) 0 0;
}

/* ── Project card ─────────────────────────────────────────────────────────── */

.project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(26, 35, 50, 0.08);
    transition: transform var(--transition), box-shadow var(--transition);
}

.projects-section--alt .project-card {
    background: var(--color-white);
}

.project-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Image container — fixed height so cards align even without photos */
.project-card__image {
    overflow: hidden;
    background-color: rgba(26, 35, 50, 0.06);
    aspect-ratio: 16 / 9;
}

.project-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.project-card:hover .project-card__image img {
    transform: scale(1.04);
}

/* Card body */
.project-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--space-6);
}

.project-card__body h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-charcoal);
    margin: 0 0 var(--space-2);
    line-height: 1.3;
}

.project-card__body p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.65;
    margin: 0;
    flex-grow: 1;
}

/* ── Chip row ─────────────────────────────────────────────────────────────── */

.project-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.project-chip {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 3px;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* Category — charcoal on near-white */
.project-chip--cat {
    background-color: var(--color-charcoal);
    color: var(--color-white);
}

/* Region — rust tinted pill */
.project-chip--region {
    background-color: rgba(192, 57, 43, 0.10);
    color: var(--color-rust);
    border: 1px solid rgba(192, 57, 43, 0.25);
}

/* Year — muted grey */
.project-chip--year {
    background-color: rgba(26, 35, 50, 0.07);
    color: var(--color-steel);
    border: 1px solid rgba(26, 35, 50, 0.12);
}

/* ── Chicago coming-soon dark strip ──────────────────────────────────────── */

.projects-cta-dark {
    background-color: var(--color-charcoal);
    padding: var(--space-20) 0;
    text-align: center;
    color: var(--color-white);
}

.projects-cta-dark h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-4);
    color: var(--color-white);
}

.projects-cta-dark p {
    max-width: 600px;
    margin: 0 auto var(--space-8);
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--text-lg);
    line-height: 1.7;
}

/* ── Testimonial card — blockquote variant (projects page) ───────────────── */

/* .testimonials-section uses the existing dark section look but on light bg  */
.testimonials-section {
    background-color: var(--color-charcoal);
    padding: var(--space-20) 0;
}

/* Section header on dark bg — lighten the subtext */
.testimonials-section .section-header p {
    color: rgba(255, 255, 255, 0.70);
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: var(--space-8);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-left: 4px solid var(--color-rust);
    border-radius: var(--border-radius-lg);
}

.testimonial-card__quote {
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
    line-height: 1.75;
    flex-grow: 1;
    margin: 0 0 var(--space-6);
}

.testimonial-card__footer {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    font-size: var(--text-sm);
}

.testimonial-card__footer strong {
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--text-base);
}

.testimonial-card__footer span {
    color: var(--color-steel);
}

.testimonial-card__origin {
    color: var(--color-amber) !important;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: var(--space-1);
}

/* ── Responsive — tighten grid on small screens ──────────────────────────── */

@media (max-width: 480px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
}

/* Reduced motion — respect OS preference for users with vestibular disorders */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}