/**
 * Prostar Construction - Main Stylesheet (Version 2.1 - Corrected)
 *
 * This file contains all styles for the Prostar Construction website, organized
 * into a layered structure for better maintainability and performance.
 *
 * Layers (in order of precedence):
 * 1. normalize: CSS reset from normalize.css
 * 2. base: Foundational styles, variables, typography
 * 3. layout: Major page structure and containers
 * 4. components: Reusable elements like headers, footers, cards
 * 5. pages: Styles unique to specific pages
 * 6. animations: Complex, JS-driven animation styles
 * 7. scrollbar: Dynamic scrollbar styling
 *
 */

/* 1. CSS LAYERS SETUP (Declare Order First) */
@layer normalize, base, layout, components, pages, animations, scrollbar;

/* 2. NORMALIZE
   normalize.css 8.0.1, self-hosted, is no longer @import-ed from here. It is a
   <link rel="stylesheet"> in header.php, emitted immediately BEFORE this file
   and stamped with its own filemtime, and the vendor file wraps itself in
   `@layer normalize` so the cascade is unchanged.

   Two reasons it moved. First, .htaccess marks .css/.js `immutable` for a
   year: a URL that never changes must never change its bytes, and an @import
   URL inside a static stylesheet cannot be stamped by PHP, so normalize was
   the one asset on the site pinned for a year with no way to bust it. Second,
   an @import is a CSS-fetches-CSS round trip — the browser cannot even start
   normalize until style.css has arrived and parsed.

   It was previously '@import url("https://unpkg.com/normalize.css")' —
   UNVERSIONED, so it resolved to whatever unpkg called latest on the day of
   the request, with no way to pin the bytes. Vendored at the version it was
   actually resolving to; do not point it back at a CDN. */

/* 3. METRIC-ADJUSTED FALLBACK FACES
   The webfonts load with display=swap, so the page paints in a fallback and
   then re-paints in the real face. On the hero that fallback is carrying an h1
   at up to 6rem, and Georgia at 6rem is a visibly different size from Playfair
   Display at 6rem — the swap moved the headline and everything under it, which
   is a layout shift landing on the LCP element itself.

   These two faces are the fallbacks the browser actually uses, re-stated with
   the metrics of the webfonts they stand in for: size-adjust scales the glyphs,
   and the ascent/descent/line-gap overrides pin the line box so the text
   occupies the same height before and after the swap. Nothing new is
   downloaded — src is local(), so this is a local Georgia and a local Arial
   wearing the real face's measurements.

   The numbers are published approximations for these pairings, not measured
   here; they are close enough to take the shift from obvious to imperceptible.
   If either webfont is ever changed, these need recomputing or they will make
   the shift worse rather than better. */
@font-face {
    font-family: "Playfair Display Fallback";
    src: local("Georgia"), local("Times New Roman");
    size-adjust: 106%;
    ascent-override: 103%;
    descent-override: 25%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Geist Fallback";
    src: local("Arial"), local("Helvetica");
    size-adjust: 100%;
    ascent-override: 95%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* ==========================================================================
   Base Layer -- Foundational styles, variables, typography, resets
   ========================================================================== */
@layer base {
    /* The Google Fonts @import used to sit right here, inside the layer block.
       CSS only allows @import at the very top of a stylesheet, so every browser
       discarded it and no webfont on this site has ever loaded — headings
       painted as Times New Roman and body copy as the default sans. It is now a
       <link rel="stylesheet"> in header.php, preceded by preconnects, which
       also removes the CSS-fetches-CSS round trip. Do not move it back. */

    :root {
        /* Colors */
        --color-dark: #121212;
        --color-light: #f0f0f0;
        --color-accent: #D4AF37; /* Prostar Gold */
        --color-grey: #1a1a1a;
        --color-text: #ccc;
        --color-brand-deep-blue: #0B3C5D;
        --color-brand-sky-blue: #328CC1;

        /* Typography */
        /* The *-Fallback families are metric-adjusted local faces declared
           at the top of this file. They sit second so they are what the
           browser paints during the webfont swap, at the real face's
           measurements — without them the swap shifted the hero heading. */
        --font-primary: 'Geist', 'Geist Fallback', sans-serif;
        --font-display: 'Playfair Display', 'Playfair Display Fallback', serif;

        /* --- FLUID TYPOGRAPHY SYSTEM --- */
        --font-size-min: 16;
        --font-size-max: 20;
        --font-ratio-min: 1.2;
        --font-ratio-max: 1.33;
        --font-width-min: 375;
        --font-width-max: 1600;
    }

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

    /* WebP <picture> wrappers must be layout-neutral: several grids/cards
       size the <img> directly, so the wrapper vanishes from layout. */
    picture {
        display: contents;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--color-dark);
        background-image: radial-gradient(circle at bottom, var(--color-brand-deep-blue) 0%, var(--color-dark) 70%);
        color: var(--color-text);
        font-family: var(--font-primary);
        overflow-x: hidden;
    }

    /* --- FLUID TYPOGRAPHY LOGIC --- */
    :where(.fluid) {
        --fluid-min: calc(var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0)));
        --fluid-max: calc(var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0)));
        --fluid-preferred: calc((var(--fluid-max) - var(--fluid-min)) / (var(--font-width-max) - var(--font-width-min)));
        --fluid-type: clamp(
            (var(--fluid-min) / 16) * 1rem,
            ((var(--fluid-min) / 16) * 1rem) - (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) + (var(--fluid-preferred) * 100vi),
            (var(--fluid-max) / 16) * 1rem
        );
        font-size: var(--fluid-type);
    }
    
    h1, h2, h3, h4 {
        color: var(--color-light);
        text-wrap: balance;
    }
    h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 6rem); line-height: 1.1; }
    h2 { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 4rem); line-height: 1.2; }
    p { line-height: 1.6; max-width: 65ch; }

    a {
        color: var(--color-accent);
        text-decoration: none;
        transition: color 0.3s ease;
    }
    a:hover {
        color: var(--color-light);
    }

    .btn {
        display: inline-block;
        background: var(--color-accent);
        color: var(--color-dark);
        padding: 0.75rem 1.5rem;
        border-radius: 50px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .btn:hover {
        transform: scale(1.05);
        box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
    }
}

/* ==========================================================================
   Layout Layer -- Major page structure and containers
   ========================================================================== */
@layer layout {
    main { width: 100%; }

    .content-section {
        padding: 6rem 2rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 5;
    }
    .alt-bg { background-color: var(--color-grey); }
    /* --- START: Ambient Background Canvas --- */
    .background-canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; /* CRUCIAL: Places the canvas behind all other content */
    }
    /* --- END: Ambient Background Canvas --- */
    .text-center { text-align: center; }

    .section-title { margin-bottom: 3rem; text-align: center; }
    .section-subtitle { max-width: 800px; margin: 0 auto 3rem auto; font-size: 1.1rem; line-height: 1.7; opacity: 0.9; }

    .page-intro {
        padding: 10rem 2rem 4rem;
        text-align: center;
        background-color: var(--color-grey);
    }
    .page-intro h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
    .page-intro p { max-width: 60ch; margin: 1rem auto 0; }
    .page-intro.with-bg {
        height: 60vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background-size: cover;
        background-position: center;
        padding: 0;
    }
    .intro-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); }
    .intro-content { position: relative; z-index: 2; color: white; }

    .cta-banner { background: var(--color-accent); width: 100%; text-align: center; }
    .cta-banner h2 { color: var(--color-dark); }
    .cta-banner .btn { background: white; color: var(--color-dark); }
    .cta-banner p { color: var(--color-dark); opacity: 0.9; margin: 1rem auto 2rem; max-width: 60ch; }
}

/* ==========================================================================
   Components Layer -- Reusable elements like headers, footers, cards
   ========================================================================== */
@layer components {
    /* Header & Navigation */
    .main-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }
    .main-header.scrolled, .main-header.static-header {
        background-color: rgba(18, 18, 18, 0.8);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .main-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem 2rem;
        transition: padding 0.3s ease;
    }
    .main-header.scrolled .main-nav { padding: 1rem 2rem; }
    .main-nav .logo img { height: 40px; width: auto; transition: height 0.3s ease; }
    .main-header.scrolled .logo img { height: 35px; }
    .nav-links { display: flex; gap: 2rem; }
    .nav-links a { color: var(--color-light); font-weight: 600; position: relative; }
    .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background-color: var(--color-accent); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; }
    .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
    .nav-links a.active { color: var(--color-accent); }
    .nav-cta { display: block; border: 2px solid var(--color-accent); padding: 0.5rem 1rem; border-radius: 50px; font-weight: 600; }
    .nav-cta:hover { background-color: var(--color-accent); color: var(--color-dark); }
    .hamburger { display: none; background: none; border: none; cursor: pointer; z-index: 1001; }
    .hamburger span { display: block; width: 25px; height: 3px; background-color: var(--color-light); margin: 5px 0; transition: all 0.3s ease; }

    /* Hero Section */
    .hero { height: 100vh; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; overflow: hidden; color: white; }
    .video-background { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: -2; }
    .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: -1; }
    .hero-intro { 
        min-height: 100vh;
        display: flex;
        place-items: center;
        width: 100%;
        padding-inline: clamp(2rem, 10vw, 8rem);
        position: relative;
        z-index: 2;
    }
    .hero-intro h1 {
        --font-level: 8; /* Connects to fluid typography system */
        font-weight: 800;
        line-height: 1.0; /* Increased to prevent descender clipping */
        padding-bottom: 0.1em; /* Safety padding for descenders */
        margin: 0;
        text-wrap: pretty;
        background: linear-gradient(#fff 60%, #ccc);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* --- START: Standard Page Hero Component --- */
    .page-hero {
        height: 100vh;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        overflow: hidden; /* CRUCIAL for reveal effects */
    }
    .page-hero .hero-image-container {
        position: absolute;
        inset: 0; /* Fills the container (top, right, bottom, left: 0) */
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    .page-hero .hero-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
        transform: scale(1.1);
        /* Re-uses the existing keyframe animation, no need to redefine it */
        animation: slow-zoom-pan 25s ease-in-out infinite alternate;
    }

    /* The gold panel that wipes off the hero image. Same problem as the
       heading: it is full-bleed, it sits above the photograph, and the only
       thing that ever moved it was the GSAP timeline — so in a background tab
       or with the library missing it stayed put and the hero was a gold
       rectangle. It is now absent unless the animation has opted in. */
    .page-hero .hero-image-reveal {
        display: none;
    }
    .js-hero-anim .page-hero .hero-image-reveal {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 2;
        transform-origin: top;

        /* 1. The Shimmering Gradient Background */
        /* We create a large gradient with a bright "gleam" in the middle */
        background: linear-gradient(
        100deg, /* Angle of the gleam */
        var(--color-accent) 0%,
        var(--color-accent) 45%,
        #FFFBEB 50%, /* This is the light gleam color */
        var(--color-accent) 55%,
        var(--color-accent) 100%
        );
        background-size: 250% 100%; /* Make the gradient much wider than the screen */

        /* 2. Apply the Animation */
        /* This makes the gleam sweep across the element */
        animation: gleam-animation 1.5s infinite linear;
    }

    .page-hero .intro-content {
        position: relative;
        z-index: 3;
        padding: 3rem;
        color: white;
        text-shadow: 0 2px 15px rgba(0,0,0,0.6);
        text-align: center;
        max-width: 750px;
        background: rgba(18, 18, 18, 0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    }

    .page-hero h1 {
        font-size: clamp(2.5rem, 6vw, 4.5rem);
    }

    /* ── THE HERO HEADING IS VISIBLE BY DEFAULT ────────────────────────────
       It did not used to be, and that was a real bug on every interior page.

       The three rules that now live under .js-hero-anim below used to be
       unconditional: .intro-content started at opacity 0, and the h1 and p
       started at opacity 0 with translateY(100%), with .h1-wrap/.p-wrap
       clipping them. The ONLY thing that ever undid any of it was the GSAP
       timeline in js/script.js section 4.

       GSAP is driven by requestAnimationFrame, and requestAnimationFrame does
       not tick in a tab that is not being looked at. Load an interior page in
       a background tab — a middle-click, a cmd-click, a restored session, any
       automated check — and the timeline is created, unpaused, with its
       targets correctly resolved, and simply never advances a single frame.
       Measured on about.php: gsap.ticker.frame unchanged over 1.2s, the
       heading's computed opacity 0 and its transform still
       matrix(1,0,0,1,0,158.375). A blank gold panel with no words on it.

       It recovers when the tab is focused, which is why it was easy to miss
       and unpleasant when it happened. It does NOT recover at all if GSAP
       fails to load, or if anything earlier in script.js throws.

       So the default state is the finished state, and the animation is the
       thing that has to opt in. .js-hero-anim is added to <html> by a short
       inline script in header.php, and only when the document is actually
       visible; the same script removes it on a timer if the reveal has not
       happened, so a missing library degrades to visible text rather than to
       an empty box. Nothing here depends on the animation library surviving.

       Same reasoning as the preloader dismissal (js/script.js section 0) and
       the deleted 400ms link hijack: whatever is covering the content must not
       be removable only by JavaScript. */
    .js-hero-anim .page-hero .intro-content {
        opacity: 0;
    }
    .js-hero-anim .page-hero .h1-wrap,
    .js-hero-anim .page-hero .p-wrap {
        overflow: hidden; /* Clips the text while it slides into view */
    }
    .js-hero-anim .page-hero h1,
    .js-hero-anim .page-hero p {
        transform: translateY(100%);
        opacity: 0;
    }

    /* Somebody who has asked for less motion gets the finished state, not a
       slide. The inline script checks the same query before opting in; this
       rule is the belt to its braces. */
    @media (prefers-reduced-motion: reduce) {
        .js-hero-anim .page-hero .intro-content,
        .js-hero-anim .page-hero h1,
        .js-hero-anim .page-hero p {
            opacity: 1;
            transform: none;
        }
    }

    /* --- END: Standard Page Hero Component --- */
    
    /* --- Scroll Down Indicator --- */
    .scroll-down-indicator {
        position: absolute;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
        color: rgba(255, 255, 255, 0.7);
        transition: color 0.3s ease, opacity 0.3s ease;
        animation: bounce 2s infinite ease-in-out;
    }

    .scroll-down-indicator:hover {
        color: white;
        animation-play-state: paused; /* Stop bouncing on hover */
    }

    .scroll-down-indicator svg {
        width: 32px;
        height: 32px;
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translate(-50%, 0);
        }
        40% {
            transform: translate(-50%, -10px);
        }
        60% {
            transform: translate(-50%, -5px);
        }
    }

    /* --- START: Process Steps Component (V2 - Grid Layout) --- */
    .process-steps {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        width: 100%;
        max-width: 1400px;
    }

    .step {
        background: var(--color-grey);
        padding: 2.5rem 2rem;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        
        /* CRITICAL: Creates the positioning context for the number */
        position: relative; 
        overflow: hidden; /* Hides the part of the number that bleeds out */
    }

    .step-number {
        /* CRITICAL: Takes the number out of the normal flow */
        position: absolute; 
        top: 0;
        right: 0;
        font-size: clamp(6rem, 20vw, 10rem); /* Make it huge and responsive */
        font-weight: 800;
        line-height: 1;
        color: rgba(255, 255, 255, 0.05); /* Very subtle, transparent white */
        
        /* Pushes the number slightly off the card for a dynamic look */
        transform: translate(20%, -20%);
        
        /* Places the number behind the text content */
        z-index: 0; 
    }

    /* This (optional) div ensures the text stays on top of the number */
    .step-content {
        position: relative;
        z-index: 1;
    }

    .step h3 {
        font-family: var(--font-display);
        font-size: 1.75rem;
        margin-bottom: 1rem;
        color: var(--color-light);
    }

    .step p {
        font-size: 0.95rem;
        max-width: 100%;
    }
    /* --- END: Process Steps Component --- */

    /* Grids & Cards */
    .services-grid, .values-grid, .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; width: 100%; max-width: 1200px; }
    .service-card, .value-card { background: var(--color-grey); padding: 2rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: var(--color-text); }
    .service-card:hover, .value-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
    .service-card h3, .value-card h3 { font-family: var(--font-display); font-size: 1.75rem; margin-bottom: 1rem; }
    .featured-projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; width: 100%; max-width: 1200px; }
    .project-card { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; }
    .project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
    .project-card:hover img { transform: scale(1.1); }
    .card-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 2rem 1.5rem 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: white; }
    .card-overlay h3 { font-family: var(--font-display); }
    .project-card .card-overlay p {
        font-size: 0.9rem;
        opacity: 0.8;
        margin-top: 0.25rem;
        transition: transform 0.3s ease, opacity 0.3s ease;
        transform: translateY(10px);
        opacity: 0;
    }
    .project-card:hover .card-overlay p {
        transform: translateY(0);
        opacity: 0.8;
    }

    /* Process Steps */
    .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; max-width: 1400px; }
    .step { background: var(--color-grey); padding: 2rem; border-radius: 12px; }
    .step-number { font-size: 2rem; font-weight: 800; color: var(--color-accent); margin-bottom: 1rem; }

    /* Accordion (FAQ) */
    .faq-container { width: 100%; max-width: 800px; }
    .faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 1.5rem 0; }
    .faq-item summary { font-size: 1.2rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--color-light); }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: '+'; font-size: 2rem; font-weight: 400; transition: transform 0.3s ease; }
    .faq-item[open] summary::after { transform: rotate(45deg); }
    .faq-item p {color: var(--color-text); /* Restore the correct text color */ overflow: hidden; margin-top: 1rem; max-width: 100%; }

    /* --- Advanced Footer V2.0 --- */
    .main-footer { 
        position: relative; 
        background-color: #0a0a0a;
        padding: 0 2rem;
        overflow: hidden;
        border-top: 4px solid var(--color-accent);
    }
    .main-footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* The blueprint texture that used to load here was a 93 KB WebP painted
           at opacity 0.03 — the second-largest asset on most pages of the site,
           fetched on every page load, and invisible. The ::before is kept
           because the footer's z-index stacking is built around it. */
        z-index: 0;
    }

    /* Footer Section 1: Newsletter CTA Panel */
    .footer-cta-panel {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
        background: var(--color-grey);
        padding: 2.5rem 3rem;
        max-width: 1200px;
        margin: -40px auto 4rem auto;
        border-radius: 12px;
        position: relative;
        z-index: 10;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .cta-panel-content h3 {
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 4vw, 2rem);
        line-height: 1.2;
        margin: 0 0 0.5rem 0;
        color: var(--color-light);
    }
    .cta-panel-content p {
        max-width: 50ch;
        opacity: 0.8;
        margin: 0;
    }
    .newsletter-form {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        /* Was a flat min-width: 400px, which is 25px wider than the phone the
           audit measured on — so the Subscribe button hung 98px off the side
           of the screen and dragged the document with it. min() keeps the
           400px intent everywhere it fits and stops asking for it where it
           does not. */
        min-width: min(400px, 100%);
    }
    .newsletter-form input {
        flex-grow: 1;
        background: rgba(0,0,0,0.2);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 50px;
        padding: 0.75rem 1.5rem;
        color: var(--color-light);
        font-family: var(--font-primary);
        font-size: 1rem;
        transition: border-color 0.3s ease;
    }
    .newsletter-form input:focus {
        outline: none;
        border-color: var(--color-accent);
        /* A 1px border recolour is not a visible focus indicator. This matches
           the 3px gold ring the exit-modal and contact form already use. */
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.35);
    }
    .newsletter-form .btn {
        flex-shrink: 0;
        box-shadow: none;
    }

    /* Footer Section 2: Main Footer Grid */
    .footer-grid {
        display: grid;
        grid-template-columns: 1.25fr 0.75fr 1fr 1fr;
        gap: 3rem;
        max-width: 1400px;
        width: 100%;
        margin: 0 auto 4rem auto;
        padding-top: 4rem;
        position: relative;
        z-index: 1;
    }
    .footer-logo {
        height: 45px;
        /* width:auto is load-bearing now that the <img> carries its intrinsic
           width="1536". Without it the attribute wins, the logo lays out
           1536px wide, and it drags the whole footer grid off the side of a
           phone. The height attribute is still worth having — it is what lets
           the browser reserve the right box before the file arrives. */
        width: auto;
        max-width: 100%;
        margin-bottom: 1.5rem;
        display: inline-block;
        opacity: 0.9;
        transition: opacity 0.3s ease;
    }
    .footer-logo:hover { opacity: 1; }
    #footer-about > p {
        max-width: 35ch;
        line-height: 1.7;
        margin-bottom: 2rem;
    }
    .footer-testimonial {
        border-left: 3px solid var(--color-accent);
        padding-left: 1.5rem;
        margin-bottom: 2rem;
    }
    .footer-testimonial p {
        font-style: italic;
        font-size: 0.95rem;
        opacity: 0.9;
        margin-bottom: 0.5rem;
        max-width: 100%;
    }
    .footer-testimonial footer {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--color-text);
        opacity: 0.7;
    }
    .footer-col h4 {
        color: var(--color-light);
        font-weight: 600;
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 1.5rem;
        position: relative;
    }
    .footer-col h4::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 30px;
        height: 2px;
        background-color: var(--color-accent);
    }
    .footer-col ul { list-style: none; }
    .footer-col ul li { margin-bottom: 1rem; }
    .footer-col ul a {
        color: var(--color-text);
        text-decoration: none;
        transition: color 0.3s ease, padding-left 0.3s ease;
        position: relative;
    }
    .footer-col ul a:hover {
        color: var(--color-accent);
        padding-left: 5px;
    }
    .contact-info-list li {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .contact-info-list li a { padding-left: 0 !important; }
    .contact-info-list svg {
        width: 20px;
        height: 20px;
        fill: var(--color-accent);
        flex-shrink: 0;
    }
    .footer-socials { display: flex; gap: 1.5rem; margin-top: 1.5rem; }
    .footer-socials a { display: inline-block; transition: transform 0.3s ease; }
    .footer-socials a:hover { transform: translateY(-3px); }
    .footer-socials svg { width: 24px; height: 24px; fill: #888; transition: fill 0.3s ease; }
    .footer-socials a:hover svg { fill: var(--color-accent); }
    .footer-cta-btn { margin-top: 1.5rem; width: 100%; text-align: center; }

    /* Footer Section 3: Trust Seals & Bottom Bar */
    .footer-bottom {
        padding: 2rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 0.9rem;
        color: #888;
        position: relative;
        z-index: 1;
        max-width: 1400px;
        margin: 0 auto;
    }
    .footer-trust-seals {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        margin-bottom: 2rem;
        flex-wrap: wrap;
    }
    .trust-seal {
        text-align: center;
        color: #aaa;
        font-size: 0.8rem;
        line-height: 1.4;
    }
    .trust-seal img {
        height: 50px;
        width: auto;
        filter: grayscale(100%) contrast(0.5) brightness(1.5);
        opacity: 0.6;
        transition: filter 0.3s ease, opacity 0.3s ease;
    }
    .trust-seal:hover img {
        filter: grayscale(0%);
        opacity: 1;
    }
    .trust-seal strong {
        color: var(--color-light);
        display: block;
        font-size: 1rem;
    }
    .footer-bottom > p {
        text-align: center;
        max-width: 100%;
    }

/* --- START: Advanced CTA Triggers (Scroll & Exit-Intent) --- */

/* 1. Scroll-Triggered CTA Banner */
.scroll-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 998; /* Below modals but above content */
    
    /* Prostar Styling */
    background-color: rgba(18, 18, 18, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 2px solid var(--color-accent);
    box-shadow: 0 -5px 30px rgba(0,0,0,0.5);
    padding: 1.5rem 2rem;
    color: var(--color-light);

    /* Layout */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;

    /* Initial State for GSAP */
    transform: translateY(100%);
    visibility: hidden;
}

.scroll-cta__content h3 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    margin: 0 0 0.5rem 0;
    color: var(--color-light);
}

.scroll-cta__content p {
    margin: 0;
    max-width: 45ch;
    opacity: 0.9;
}

.scroll-cta .cta-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    min-width: 450px;
}

.scroll-cta .cta-form input {
    flex-grow: 1;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    color: var(--color-light);
    font-family: var(--font-primary);
    font-size: 1rem;
}

.scroll-cta .cta-form input:focus {
    outline: none;
    border-color: var(--color-accent);
    /* Same reason as .newsletter-form input:focus — a border colour change
       alone is too easy to miss to count as a focus indicator. */
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.35);
}

.scroll-cta .cta-form .btn {
    flex-shrink: 0; /* Prevents button from shrinking */
    box-shadow: none;
}

/* The banner holds a link to the quote form now, not an email field and a
   button, so it no longer needs the 450px the field took. Centred, so the
   button sits where it did on a phone. */
.scroll-cta .cta-form--link {
    min-width: 0;
    justify-content: center;
}


/* 2. Exit-Intent Modal */
.exit-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none; /* Initially hidden */
    justify-content: center;
    align-items: center;
}

.exit-modal.is-visible { display: flex; }

.exit-modal__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.exit-modal__content {
    position: relative;
    z-index: 10000;
    
    /* Prostar Styling */
    background-color: var(--color-grey);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    padding: 2.5rem;
    
    /* Layout */
    text-align: center;
    max-width: 500px;
    width: 90%;
}

.exit-modal .cta-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.exit-modal .cta-form h3 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    color: var(--color-light);
    margin: 0 0 0.5rem 0;
}

.exit-modal .cta-form p {
    margin: 0 auto 1rem auto;
    max-width: 40ch;
    opacity: 0.9;
}

.exit-modal .cta-form input {
    width: 100%;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 1rem;
    color: var(--color-light);
    font-family: var(--font-primary);
    font-size: 1rem;
    text-align: center;
}

.exit-modal .cta-form input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
}

/* 3. Shared Thank You Message Style */
.thank-you-message {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 1.2rem;
    padding: 2rem 0;
}

/* Responsive adjustments for CTAs */
@media (max-width: 768px) {
    .scroll-cta {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    .scroll-cta .cta-form {
        min-width: 100%;
        width: 100%;
    }
}
/* --- END: Advanced CTA Triggers --- */

    /* --- START: Legal Pages (Privacy & T&C) --- */
.legal-content-container {
    max-width: 800px;
    width: 100%;
}
.legal-content-container h2 {
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-accent);
}
.legal-content-container h3 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-light);
}
.legal-content-container ul {
    list-style-position: inside;
    padding-left: 1rem;
}
.legal-content-container ul li {
    margin-bottom: 0.5rem;
}
.legal-notice-box {
    background: rgba(212, 175, 55, 0.1); /* Subtle gold background */
    border-left: 4px solid var(--color-accent);
    padding: 1.5rem;
    border-radius: 4px;
    margin-bottom: 2rem;
}
.legal-notice-box p {
    margin: 0;
    max-width: 100%;
}

/* --- New Footer Links --- */
.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allows stacking on mobile */
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-legal-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.footer-legal-links a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-legal-links a:hover {
    color: var(--color-accent);
}
.footer-legal-links span {
    color: #555;
}

/* Remove old footer bottom paragraph margin */
.footer-bottom > p {
    margin-top: 0;
}
@media (max-width: 768px) {
    .footer-bottom-bar {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
}
/* --- END: Legal Pages --- */
    
    /* Scroll To Top Button */
    #scrollToTopBtn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
        /* It is a <button> now rather than an <a href="#">, so the UA's own
           button styling has to be neutralised. */
        border: 0;
        padding: 0;
        appearance: none;
        background-color: var(--color-light);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    }
    #scrollToTopBtn.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    #scrollToTopBtn svg {
        width: 24px;
        height: 24px;
        fill: var(--color-dark);
    }

    /* --- Page Preloader --- */
/* The preloader gets itself out of the way even if no JavaScript ever runs.
   js/script.js still dismisses it at DOMContentLoaded — that is the fast path,
   and it is what visitors normally see. This is the floor underneath it.

   The old arrangement had exactly one exit: script.js. The <noscript> rule
   covers scripts being switched off, and nothing covered the case in between —
   JavaScript enabled, script.js failing to load or throwing on parse — which
   leaves a full-viewport black rectangle with a logo on it, on every page of
   the site, permanently, with nothing in any server log to explain it.

   This is the same rule the hero heading now follows and that the section-0
   comment in script.js states outright: the thing covering the content must
   not be removable only by the thing that might be broken.

   A CSS animation rather than a transition, because a transition needs
   something to change it and an animation runs on its own. It is deliberately
   slower than the JS path (2.4s vs ~0.45s), so on a healthy page the script
   has always won long before this matters; forwards keeps it gone, and the
   compositor owns it, so a background tab that never gets a frame still ends
   up with an element that is display:none once it is looked at. */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-dark);
    display: grid;
    place-items: center;
    z-index: 9999;
    animation: preloader-failsafe 0.6s ease 2.4s forwards;
}

@keyframes preloader-failsafe {
    to { opacity: 0; visibility: hidden; }
}

/* Somebody who has asked for less motion should not sit behind a black screen
   for two and a half seconds waiting for a fade they did not want. */
@media (prefers-reduced-motion: reduce) {
    #preloader {
        animation-duration: 0.01s;
        animation-delay: 1.2s;
    }
    .preloader-logo {
        animation: none;
    }
}
.preloader-logo {
    width: 150px;
    animation: pulse 1.5s infinite ease-in-out;
}

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

/* --- Page Transitions --- */
body.fade-out {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

}

/* ==========================================================================
   Pages Layer -- Styles unique to specific pages
   ========================================================================== */
@layer pages {

   /* --- START: About Page V3 - Reveal Hero Redesign --- */

    /* 1. Reveal Hero */
    .about-hero {
        height: 100vh; /* A slightly different height for variety */
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        overflow: hidden; /* CRUCIAL for reveal effects */
        
    }
    .hero-image-container {
        position: absolute;
        inset: 0; /* Fills the container (top, right, bottom, left: 0) */
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    .hero-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%; /* Pushes image down slightly */
        transform: scale(1.1); /* Start slightly zoomed in for the pan effect */
        animation: slow-zoom-pan 25s ease-in-out infinite alternate;
    }

    /* Keyframe for the subtle background image movement */
    @keyframes slow-zoom-pan {
        100% {
            transform: scale(1);
            object-position: center 40%;
        }
    }

    /* The "curtain" that reveals the image */
    .hero-image-reveal {
        position: absolute;
        inset: 0;
        background-color: var(--color-accent);
        z-index: 2;
        transform-origin: top; /* Animates from the top down */
    }

    /* The text content and its wrappers */
    .about-hero .intro-content {
        position: relative; /* Keep it in the flow but allow z-index */
        z-index: 3; /* Ensure text is above the image and reveal curtain */
        padding: 2rem;
        color: white;
        text-shadow: 0 2px 15px rgba(0,0,0,0.6);
        text-align: center;
        max-width: 750px;
        background: rgba(18, 18, 18, 0.5);      /* Semi-transparent background */
        backdrop-filter: blur(10px);           /* The blur effect */
        -webkit-backdrop-filter: blur(10px);   /* For Safari */
        border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle edge highlight */
        border-radius: 16px;                   /* Rounded corners */
        padding: 3rem;                         /* Increased padding */
        box-shadow: 0 10px 40px rgba(0,0,0,0.4); /* Soft drop shadow */
        opacity: 0; /* Start the box as fully transparent */
        
    }
    /* Wrappers to create the slide-in effect */
    .h1-wrap, .p-wrap {
        overflow: hidden; /* Hides the text until it animates into view */
    }
    .about-hero h1, .about-hero p {
        /* These will be animated by GSAP */
        transform: translateY(100%);
        opacity: 0;
    }
    .about-hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }

        .feature-card:hover .feature-icon,
        .trigger-item:hover .feature-icon,
        .value-card-stack:hover .value-card-icon {
            /* CORRECTED: This filter is specifically calculated to turn BLACK into SKY BLUE */
            filter: invert(51%) sepia(87%) saturate(464%) hue-rotate(162deg) brightness(91%) contrast(91%);
        }
     /* === START: CORRECTED FOUNDER'S STORY LAYOUT === */

        /* The most robust way to create the layout */
        .founder-story-layout {
            display: grid;
            /* Create a flexible text column and a fixed 400px video column */
            grid-template-columns: 1fr 400px; 
            gap: 4rem;
            max-width: 1200px;
            margin: 0 auto;
            align-items: flex-start;
        }
        
        .story-text h2 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: 2rem; }
        .story-text p { margin-bottom: 1.5rem; }

        /* The container for the video/image */
        .story-image-panel {
            position: sticky;
            top: 120px; 
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);     
            /* Gives the panel a defined shape so it cannot collapse */
            aspect-ratio: 4 / 5; 
        }

        /* Rules for BOTH the poster image and the video */
        .story-image-panel img,
        .story-image-panel video {
            width: 100%;
            height: 100%;
            /* The best practice for a correctly cropped video */
            object-fit: cover;
            display: block;
        }

        /* === END: CORRECTED FOUNDER'S STORY LAYOUT === */

    /* 3. Core Values Section */


.value-card-stack {
    /* Basic styling - most of this is the same */
    padding: 2.5rem;
    border-radius: 16px;
    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    /* NEW: Adds a nice hover effect to replace the scroll interactivity */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.values-grid {
    display: grid;
    /* This creates responsive columns that are at least 280px wide */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
}

/* NEW: The hover state itself */
    .value-card-stack:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.6);
        border-color: rgba(255, 255, 255, 0.4); 

    }

    .value-card-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 1.5rem;
        filter: invert(80%) sepia(36%) saturate(1281%) hue-rotate(352deg) brightness(91%) contrast(88%); /* Gold color */
        transition: filter 0.3s ease; /* Add this line */
    }

    .value-card-stack h3 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
        color: var(--color-light);
    }

    .value-card-stack p {
        max-width: 45ch;
        margin: 0;
        color: var(--color-text);
    }

        /* 4. Prostar Difference Section */
        .difference-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            width: 100%;
            max-width: 1200px;
            margin-top: 3rem;
        }
        .feature-card {
            background: var(--color-grey);
            padding: 2.5rem 2rem;
            border-radius: 12px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: transform 0.3s ease, border-color 0.3s ease;

        }
        .feature-card:hover {
        transform: translateY(-5px);
        border-color: rgba(255, 255, 255, 0.4); 
    }
        .feature-icon {
            width: 48px;
            height: 48px;
            margin-bottom: 1.5rem;
            filter: invert(80%) sepia(36%) saturate(1281%) hue-rotate(352deg) brightness(91%) contrast(88%); /* Gold color */
            transition: filter 0.3s ease; /* Add this line */
        }
        .feature-card h3, .feature-card h4 { font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--color-light); }
        .feature-card p { font-size: 0.95rem; max-width: 100%; margin: 0 auto; }

        /* 5. Process Timeline */
        .process-timeline {
            position: relative;
            max-width: 800px;
            width: 100%;
            margin-top: 4rem;
            padding: 2rem 0;
        }
        /* The vertical line */
        .process-timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 40px;
            height: 100%;
            width: 2px;
            /* background: linear-gradient(to bottom, var(--color-accent), rgba(212, 175, 55, 0.1)); maybe I prefer this*/
            background: linear-gradient(to bottom, var(--color-brand-sky-blue), rgba(50, 140, 193, 0.1));
            border-radius: 2px;
        }
        .process-step {
            position: relative;
            padding-left: 100px;
            margin-bottom: 4rem;
        }
        .process-step:last-child { margin-bottom: 0; }

        /* CORRECTED: More robust centering for the step numbers */
        .step-number {
            position: absolute;
            left: 40px; /* Align with the vertical line's position */
            top: 0;
            transform: translateX(-5%); /* Pull back by half its own width to center perfectly */
            font-size: 3rem;
            font-weight: 800;
            color: var(--color-accent);
            line-height: 1;
            z-index: 0; 
        }   
        .step-content {
            position: relative;
            z-index: 1; /* This ensures the text is layered above the number */
        }
        .step-content h3, .step-content h4 { color: var(--color-light); margin-bottom: 0.5rem; }
        .step-content p { font-size: 0.95rem; max-width: 60ch; }

        /* Responsive adjustments for new sections */
        @media (max-width: 900px) {
            .core-values-layout { grid-template-columns: 1fr; }
            .value-icon-panel { display: none; } /* Hide sticky icon on mobile, text is enough */
            .value-item { min-height: auto; }
        }

        @media (max-width: 768px) {
            .process-timeline::before { left: 20px; }
            .process-step { padding-left: 60px; }
            .step-number { font-size: 2.5rem; }
        }
        /* --- END: About Page V2 --- */

        /* --- START: About Page - Prostar Network Section --- */
        .network-content-wrapper {
            background-color: var(--color-grey); /* The lighter dark color */
            padding: clamp(3rem, 6vw, 4rem);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            max-width: 1400px; /* Adjust as needed */
            width: 100%;
            margin: 0 auto;
        }

        .network-layout-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            max-width: 1200px;
            width: 100%;
            margin-top: 4rem;
            align-items: flex-start;
        }

        .network-philosophy h3,
        .network-capabilities h3 {
            font-family: var(--font-display);
            font-size: clamp(1.5rem, 4vw, 2rem);
            margin-bottom: 1.5rem;
            color: var(--color-light);
            line-height: 1.2;
        }

        .network-philosophy p,
        .network-capabilities p {
            max-width: 55ch;
        }

        .trades-list {
            list-style: none;
            padding-left: 0;
            margin-top: 1.5rem;
            columns: 2; /* Creates two columns for the list */
            gap: 1rem;
        }

        .trades-list li {
            margin-bottom: 1rem;
            padding-left: 2rem;
            position: relative;
            font-weight: 600;
            color: var(--color-light);
            font-size: 0.95rem;
            break-inside: avoid; /* Prevents list items from breaking across columns */
        }

        .trades-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 6px;
            width: 18px;
            height: 18px;
            background-color: var(--color-accent);
            /* Creates a simple checkmark using a mask */
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
            mask-size: contain;
            -webkit-mask-size: contain;
        }

        /* Responsive adjustments */
        @media (max-width: 900px) {
            .network-layout-grid {
                grid-template-columns: 1fr;
                gap: 3rem;
            }
        }

        @media (max-width: 500px) {
            .trades-list {
                columns: 1; /* Stack the list into a single column on small screens */
            }
        }
        /* --- END: About Page - Prostar Network Section --- */

    /* --- START: Projects Page Parallax Hero (V3 - Sticky Transition) --- */
        .project-hero-showcase {
            height: 100vh;
            width: 100%;
            
            /* CHANGE 1: Make the hero section sticky */
            position: sticky;
            top: 0;
            
            display: flex;
            justify-content: center; 
            align-items: center;
            overflow: hidden;
            
            /* CHANGE 2: Set a lower z-index so the next section can scroll over it */
            z-index: 0; 
        }

        .project-hero-text {
            text-align: center;
            z-index: 10;
            max-width: 750px;
            background: rgba(18, 18, 18, 0.5);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 3rem;
            box-shadow: 0 10px 40px rgba(0,0,0,0.4);
        }

        .project-hero-grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .image-wrapper {
            position: absolute;
            aspect-ratio: 1 / 1;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            width: 15vw; 
        }

        .image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* --- END: Projects Page Parallax Hero --- */


    /* --- START: Services Page 3D Card Animation --- */
.services-list-3d {
    padding: 10vh 5vw;
    display: grid;
    gap: 5rem;
    max-width: 1800px; /* Constrain width for larger screens */
    margin: 0 auto;    /* Center the list */

    /* This is the most important property for the 3D effect.
       It creates the "depth" in which the cards can rotate. */
    perspective: 2000px;
}

.service-card-3d {
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    background-color: var(--color-grey);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);

    /* Sets the rotation pivot point to the horizontal center */
    transform-origin: center 50%;
    
    /* Performance hint for the browser */
    will-change: transform, opacity;
}

.service-card-3d .card-header { 
    display: flex; 
    align-items: baseline; 
    gap: clamp(1rem, 4vw, 3rem); 
    margin-bottom: 1rem; 
}

.service-card-3d .card-number { 
    font-size: clamp(2rem, 5vw, 3rem); 
    font-weight: 700; 
    line-height: 1;
    color: var(--color-accent); /* Use the main site accent color */
}

.service-card-3d .card-title { 
    font-family: var(--font-display); 
    font-size: clamp(2rem, 6vw, 3.5rem); 
    line-height: 1.1; 
    margin: 0; 
    flex-grow: 1; 
}

.service-card-3d .card-body { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    gap: 2rem; 
    /* Indent the body content to align with the title */
    padding-left: clamp(3.2rem, 9.2vw, 6.2rem); 
}

.service-card-3d .card-description { 
    margin: 0; 
    max-width: 60ch; 
    color: var(--color-text); 
}

.service-card-3d .card-link { 
    color: var(--color-light); 
    text-decoration: none; 
    font-weight: 700; 
    white-space: nowrap; 
    transition: color 0.3s ease; 
}
.service-card-3d .card-link:hover { color: var(--color-accent); }

/* The six service cards used to read "Learn more &rarr;" and lost the glyph
   when the sr-only suffix was added, taking the "this goes somewhere"
   affordance with it — the same arrow the project pages still use on "Next
   Project &rarr;". Generated content rather than markup so the arrow stays out
   of the accessible name: a screen reader would otherwise read "Learn more
   about bathroom renovations right arrow". The leading space is part of the
   content string so it cannot be collapsed away. */
.service-card-3d .card-link::after {
    content: " \2192";
}

/* Responsive adjustments for the card body */
@media (max-width: 768px) {
    .service-card-3d .card-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
}
/* --- END: Services Page 3D Card Animation --- */

/* --- START: Services Page - Reveal Hero --- */

.services-hero-reveal {
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden; /* CRUCIAL for reveal effects */
}
.services-hero-reveal .hero-image-container {
    position: absolute;
    inset: 0; /* Fills the container (top, right, bottom, left: 0) */
    width: 100%;
    height: 100%;
    z-index: 1;
}
.services-hero-reveal .hero-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%; /* Pushes image down slightly */
    transform: scale(1.1); /* Start slightly zoomed in for the pan effect */
    animation: slow-zoom-pan 25s ease-in-out infinite alternate;
}

/* Keyframe for the subtle background image movement (re-uses existing keyframe) */
@keyframes slow-zoom-pan {
    100% {
        transform: scale(1);
        object-position: center 40%;
    }
}

/* The "curtain" that reveals the image */
.services-hero-reveal .hero-image-reveal {
    position: absolute;
    inset: 0;
    background-color: var(--color-accent);
    z-index: 2;
    transform-origin: top; /* Animates from the top down */
}

/* The text content and its wrappers */
.services-hero-reveal .intro-content {
    position: relative;
    z-index: 3; /* Ensure text is above the image and reveal curtain */
    padding: 2rem;
    color: white;
    text-shadow: 0 2px 15px rgba(0,0,0,0.6);
    text-align: center;
    max-width: 750px;
    background: rgba(18, 18, 18, 0.5);      /* Semi-transparent background */
    backdrop-filter: blur(10px);           /* The blur effect */
    -webkit-backdrop-filter: blur(10px);   /* For Safari */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle edge highlight */
    border-radius: 16px;                   /* Rounded corners */
    padding: 3rem;                         /* Increased padding */
    box-shadow: 0 10px 40px rgba(0,0,0,0.4); /* Soft drop shadow */
    opacity: 0; /* Start the box as fully transparent */
}

/* Wrappers to create the slide-in effect */
.services-hero-reveal .h1-wrap, 
.services-hero-reveal .p-wrap {
    overflow: hidden; /* Hides the text until it animates into view */
}

.services-hero-reveal h1, 
.services-hero-reveal p {
    /* These will be animated by GSAP */
    transform: translateY(100%);
    opacity: 0;
}
.services-hero-reveal h1 { 
    font-size: clamp(2.5rem, 6vw, 4.5rem); 
}

/* --- END: Services Page - Reveal Hero --- */

/* --- START: Service Page - Intro Panel Style --- */
.intro-panel {
    background: var(--color-grey);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: clamp(2rem, 5vw, 3.5rem); /* Responsive padding */
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    text-align: center;
}

.intro-panel-heading {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    color: var(--color-light);
    margin-bottom: 1.5rem;
    line-height: 1.3;
    text-wrap: balance;
}

.intro-panel p {
    opacity: 0.9;
    font-size: 1.1rem;
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}
/* --- END: Service Page - Intro Panel Style --- */

    /* Responsive adjustments for the services page */
    @media (max-width: 900px) {
        .services-layout {
            grid-template-columns: 1fr;
        }
        .services-image-panel {
            /* On mobile, the image panel is no longer sticky */
            position: static;
            height: auto;
            aspect-ratio: 16 / 10;
            order: -1; /* Move the image panel before the list */
            margin-bottom: 3rem;
        }
        .service-item {
            margin-bottom: 2rem;
        }
    }
    /* --- END: Interactive Services Page Layout --- */

    /* Service Detail Page */
    .service-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; max-width: 1200px; }
    
    /* --- START: Service Page - Pain Points Grid --- */
    .pain-points-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
        max-width: 1200px;
        width: 100%;
        margin-top: 3rem;
    }

    .pain-point {
        background-color: var(--color-grey);
        padding: 2rem;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: transform 0.3s ease, border-color 0.3s ease;

    }
    .pain-point:hover {
        transform: translateY(-5px);
        border-color: var(--color-accent); /* Keep this one gold for contrast */
    }
    .pain-point h3 {
        color: var(--color-light);
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    /* --- END: Service Page - Pain Points Grid --- */


    /* --- START: Service Page - Image Triptych Showcase --- */
    .image-triptych-showcase {
        display: grid;
        grid-template-columns: 2fr 1fr; /* Asymmetrical columns: main image is twice as wide */
        grid-template-rows: 1fr 1fr;
        grid-template-areas:
            "main side-a"
            "main side-b";
        gap: 1rem;
        max-width: 1100px;
        width: 100%;
        margin: 0 auto;
        height: 60vh; /* Give the container a defined height */
        max-height: 550px;
    }

    .triptych-main { grid-area: main; }
    .triptych-side-a { grid-area: side-a; }
    .triptych-side-b { grid-area: side-b; }

    .triptych-main,
    .triptych-side-a,
    .triptych-side-b {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }

    .triptych-main img,
    .triptych-side-a img,
    .triptych-side-b img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures images fill their containers without distortion */
        display: block;
    }

    /* Responsive adjustments for the triptych */
    @media (max-width: 768px) {
        .image-triptych-showcase {
            grid-template-columns: 1fr; /* Stack into a single column */
            grid-template-rows: auto auto auto; /* Let rows size themselves */
            grid-template-areas:
                "main"
                "side-a"
                "side-b";
            height: auto; /* Let height be determined by content */
        }
    }
    /* --- END: Service Page - Image Triptych Showcase --- */

    /* --- START: Service Page - Permit Triggers Grid --- */
    .triggers-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        max-width: 1100px;
        width: 100%;
        margin: 0 auto;
    }

    .trigger-item {
        background: var(--color-grey);
        padding: 2rem 1.5rem;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
        /* ADDED: This makes the hover effect smooth and elegant */
        transition: transform 0.3s ease, border-color 0.3s ease;
    }

    /* ADDED: This defines what happens on hover */
    .trigger-item:hover {
        transform: translateY(-5px); /* Lifts the card up slightly */
        border-color: var(--color-accent); /* Illuminates the border in gold */
    }

    .trigger-item .feature-icon {
        /* Re-uses the existing icon style for consistency */
        margin-bottom: 1.5rem;
    }

    .trigger-item h3 {
        font-size: 1.2rem;
        color: var(--color-light);
        margin-bottom: 0.75rem;
    }

    .trigger-item p {
        font-size: 0.95rem;
        max-width: 100%;
        margin: 0 auto;
    }
    /* --- END: Service Page - Permit Triggers Grid --- */

    /* Project Detail Page */
    .project-details-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto; align-items: flex-start; }
    .project-story h2 { font-size: 2.5rem; margin-bottom: 1.5rem; }
    .project-info-box { background: var(--color-grey); padding: 2rem; border-radius: 12px; position: sticky; top: 120px; }
    .project-info-box h3 { margin-bottom: 1.5rem; font-size: 1.5rem; }
    .project-info-box ul { list-style: none; padding-left: 0; }
    .project-info-box ul li { margin-bottom: 0.75rem; }
    .project-info-box ul ul { padding-left: 1rem; margin-top: 0.5rem; }
    /* minmax(min(350px, 100%), 1fr), not minmax(350px, 1fr).
       ------------------------------------------------------
       This is the long-standing 7px overflow on all four project pages. At
       375px the section has 2rem of padding each side, leaving 311px of track
       — and a bare minmax(350px, ...) is a floor, not a preference, so the
       grid lays out a 350px column anyway and the page is 382px wide. The
       min() makes the floor "350px, or the full width, whichever is smaller",
       which is what auto-fit was meant to express in the first place.

       Worth remembering for any other auto-fit grid: a minmax() floor wider
       than the narrowest viewport is always a horizontal scrollbar. */
    .project-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); gap: 1rem; padding: 4rem 2rem; background-color: var(--color-dark); }
    .project-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

    /* Only rendered on the two project pages that carry two shoots — Pascoe
       Vale (bathroom + kitchen) and Wollert (kitchen + bathroom). Without it
       the second set reads as "more photos" rather than "this is the other
       room of the same house". */
    .project-gallery__heading {
        max-width: 1200px;
        margin: 0 auto;
        padding: 3rem 2rem 0;
        background-color: var(--color-dark);
        font-family: var(--font-display);
        font-size: clamp(1.4rem, 4vw, 2rem);
        color: var(--color-light);
    }
    .testimonial-section { display: flex; justify-content: center; align-items: center; background: var(--color-grey); }
    .testimonial-section blockquote { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.2rem); text-align: center; max-width: 800px; line-height: 1.5; border-left: 4px solid var(--color-accent); padding-left: 2rem; }
    .testimonial-section footer { font-family: var(--font-primary); font-size: 1rem; font-weight: 600; margin-top: 1.5rem; color: var(--color-text); }
    .project-navigation { display: flex; justify-content: space-between; padding: 2rem; max-width: 1200px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, 0.1); }
    .project-navigation a { font-weight: 600; }

    /* ----------------------------------------------------------------------
       GALLERY PAGE — FILTERABLE GRID
       ----------------------------------------------------------------------
       Replaces the five-row auto-scrolling marquee. The marquee could not be
       paused (WCAG 2.2.2), could not be linked to, and gave no way back to a
       photo you liked. The grid does all three and costs 35 KB less JavaScript
       on every page of the site, because it does not need GSAP Draggable.

       The breakpoints here are load-bearing: includes/gallery.php emits a
       `sizes` attribute of "(min-width: 1200px) 33vw, (min-width: 700px) 50vw,
       100vw" and it has to describe THIS grid. A `sizes` that disagrees with
       the layout silently defeats srcset — the browser picks the 1600 for a
       400-pixel slot and the whole responsive set was pointless. Change one of
       these and change the other in the same commit.
       ---------------------------------------------------------------------- */
    .gallery-section {
        background-color: var(--color-grey);
    }

    .gallery-filters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
        margin: 0 auto 1.5rem;
        max-width: 60rem;
    }

    .gallery-filter {
        padding: 0.55rem 1.3rem;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 999px;
        background: transparent;
        color: var(--color-light);
        font: inherit;
        font-size: 0.92rem;
        cursor: pointer;
        transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }

    .gallery-filter:hover {
        border-color: var(--color-light);
    }

    /* Not colour alone: the active filter also inverts, so it is still
       identifiable to anyone who cannot distinguish the accent. */
    .gallery-filter.is-active {
        background: var(--color-light);
        border-color: var(--color-light);
        color: var(--color-dark);
        font-weight: 600;
    }

    .gallery-count {
        text-align: center;
        margin: 0 auto 2.5rem;
        color: #bbb;
        font-size: 0.95rem;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }

    @media (min-width: 700px) {
        .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (min-width: 1200px) {
        .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    }

    .gallery-card {
        margin: 0;
        border-radius: 12px;
        overflow: hidden;
        background: var(--color-dark);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .gallery-card.is-hidden {
        display: none;
    }

    .gallery-card picture {
        display: block;
    }

    /* aspect-ratio plus the width/height attributes on the <img> means the
       browser reserves the right box before a single byte of the photograph
       arrives, so the grid does not jump as it fills. */
    .gallery-card img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        cursor: zoom-in;
        transition: transform 0.4s ease;
    }

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

    .gallery-card__caption {
        padding: 1rem 1.15rem 1.15rem;
        font-size: 0.9rem;
        line-height: 1.5;
        color: #ccc;
    }

    .gallery-card__text {
        display: block;
        margin-bottom: 0.4rem;
    }

    .gallery-card__link {
        font-size: 0.82rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--color-light);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* The whole page is photographs sliding and scaling. Anyone who has asked
       their operating system to stop that gets a still grid. */
    @media (prefers-reduced-motion: reduce) {
        .gallery-card img,
        .gallery-card:hover img {
            transition: none;
            transform: none;
        }
    }

    /* Lightbox */
    .lightbox-modal {
        position: fixed;
        inset: 0;
        background: rgba(18, 18, 18, 0.8);
        backdrop-filter: blur(10px);
        z-index: 9998;
        display: grid;
        place-items: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s ease;
    }
    .lightbox-modal.active {
        opacity: 1;
        visibility: visible;
    }
    .lightbox-close-btn {
        position: absolute;
        top: 2rem;
        right: 2rem;
        background: none;
        border: none;
        color: white;
        font-size: 3rem;
        cursor: pointer;
        line-height: 1;
        z-index: 10000;
    }
    .lightbox-image-container {
        padding: 2rem;
        max-width: 80vw;
        max-height: 90vh;
    }
    #gallery-lightbox-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 12px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    }


    /* Team Page */
    /*.founder-story, .team-grid-container { max-width: 1200px; margin: 0 auto; }
    .founder-story { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: center; }
    .story-image img { width: 100%; border-radius: 12px; }*/
    .team-member-card { text-align: center; }
    .team-member-img { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 50%; margin-bottom: 1.5rem; border: 4px solid var(--color-grey); }
    .team-member-img img { width: 100%; height: 100%; object-fit: cover; }
    .team-member-info h3 { color: var(--color-light); font-size: 1.5rem; }
    .team-member-info span { color: var(--color-accent); font-weight: 600; display: block; margin-bottom: 1rem; }

    /* FAQ Page */
    .faq-page-container { max-width: 900px; width: 100%; }
    .faq-category { margin-bottom: 3rem; }
    .faq-category h2 { font-size: 2rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--color-accent); }

    /* --- START: FAQ Page - Search Feature --- */
    .faq-search-container {
        max-width: 900px;
        width: 100%;
        margin: 0 auto;
    }

    #faq-search-input {
        width: 100%;
        background: var(--color-grey);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 50px; /* Pill shape */
        padding: 1rem 1.5rem 1rem 3.5rem; /* Add padding on the left for an icon */
        color: var(--color-light);
        font-family: var(--font-primary);
        font-size: 1.1rem;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;

        /* Search Icon */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 1.5rem center;
    }

    #faq-search-input:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
    }

    /* Helper class to be used by JavaScript */
    .faq-hidden {
        display: none !important;
    }
    /* --- END: FAQ Page - Search Feature --- */

    /* Contact Page */
    .contact-card {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 3rem;
        width: 100%;
        max-width: 1100px;
        background: var(--color-grey);
        padding: 3rem;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .contact-info h2, .contact-form h2, .contact-info h3, .contact-form h3 {
        font-family: var(--font-display);
        font-size: 2rem;
        margin-bottom: 2rem;
    }
    .contact-info .contact-info-list { /* Reuse footer styles */
        padding: 0;
        list-style: none;
        margin-bottom: 2rem;
    }
    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .contact-form .form-group {
        width: 100%;
    }
    .contact-form input,
    .contact-form textarea {
        width: 100%;
        background: rgba(0,0,0,0.2);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 8px;
        padding: 1rem;
        color: var(--color-light);
        font-family: var(--font-primary);
        font-size: 1rem;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .contact-form input:focus,
    .contact-form textarea:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3);
    }
    .contact-form textarea {
        resize: vertical;
    }
    .contact-form .btn {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
    }
}

/* ==========================================================================
   Animations Layer -- Complex, JS-driven animations
   ========================================================================== */
@layer animations {
    /* --- START: UPDATED SCROLL ANIMATION STYLES (FROM DEMO) --- */
    :root {
        /* These are used by both the text and the scrollbar */
        --start: 190; /* ProStar Blue/Teal */
        --end: 40;   /* ProStar Gold */
        --lightness: 75%;
        --base-chroma: 0.25;
    }
    .scroll-animation {
        --font-level: 6; /* Connects to fluid typography system for correct size */
        display: flex;
        line-height: 1.25;
        width: 100%;
        padding-left: clamp(2rem, 10vw, 8rem);
        height: 300vh;
        position: relative;
        z-index: 2;
        background-color: var(--color-dark);
    }
    
    /* CRITICAL: This rule makes BOTH the "We" and the final phrase sticky at the same position */
    .scroll-animation > h2,
    .final-phrase {
        position: sticky;
        top: calc(50% - 0.5lh);
        font-size: inherit;
        margin: 0;
        display: inline-block;
        height: fit-content;
        font-weight: 600;
        color: var(--color-light);
    }
    
    .scroll-animation-list {
        font-weight: 600;
        padding-inline: 0;
        margin: 0;
        list-style-type: none;
    }
    
    .final-phrase {
        color: var(--color-accent);
    }
    
    /* This rule applies the color gradient to the list items */
    .scroll-animation-list li {
        --step: calc((var(--end) - var(--start)) / (var(--count) - 1));
        color: oklch(
            var(--lightness) var(--base-chroma)
            calc(var(--start) + (var(--step) * var(--i)))
        );
    }
    
    /* --- END: UPDATED SCROLL ANIMATION STYLES --- */
    /* .sr-only used to be declared here, inside @layer animations. It is a
       global utility used by the six service-card links, not an animation
       style, and inside the lowest-but-one layer any unlayered rule with a
       .sr-only-adjacent selector could un-hide it and dump "about bathroom
       renovations" into the visible page. It now lives unlayered next to
       .skip-link. */

    /* --- START: New Gleam Animation for Hero Reveal --- */
    @keyframes gleam-animation {
    0% {
        background-position: -150% 0; /* Start with the gleam off-screen to the left */
    }
    100% {
        background-position: 150% 0; /* End with the gleam off-screen to the right */
    }
    }
    /* --- END: New Gleam Animation --- */

    
    /* Pinned Projects Scroller */
    .projects-container { position: relative; height: 100vh; overflow: hidden; z-index: 2; background-color: var(--color-dark);}
    .project { position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: transform, opacity; pointer-events: none; }
    .project__content { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; z-index: 1; pointer-events: auto; }
    .project__meta { font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 1rem; text-transform: uppercase; }
    .project__content h2 { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 5rem); line-height: 1.1; margin: 0 0 2rem 0; }
    .project__progress-bar { width: 200px; height: 3px; background-color: rgba(255, 255, 255, 0.2); margin-top: 2rem; border-radius: 3px; }
    .progress-bar__inner { height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); }
    .project__image { position: absolute; top: 15vh; height: 70vh; width: 30vw; border-radius: 12px; overflow: hidden; will-change: transform, opacity; }
    .project__image img { width: 100%; height: 100%; object-fit: cover; }
    .project__image--left { left: 10vw; }
    .project__image--right { right: 10vw; }
    .project-link-wrapper { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; }
    .project__cta-link { margin-top: 1rem; color: var(--color-accent); font-weight: 600; opacity: 0; transition: opacity 0.3s ease}
    .project-link-wrapper:hover .project__cta-link { opacity: 1; }
    
    /* Before & After Slider */
    .slider-container { position: relative; width: 90%; max-width: 900px; height: auto; aspect-ratio: 16 / 9; overflow: hidden; cursor: ew-resize; border: 5px solid #fff; box-shadow: 0 0 15px rgba(0,0,0,0.5); user-select: none; }
    .slider-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .slider-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .slider-after { clip-path: inset(0 0 0 50%); }
    .slider-handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background-color: #fff; transform: translateX(-50%); cursor: ew-resize; z-index: 10; }
    .slider-handle::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background-color: #fff; border-radius: 50%; border: 2px solid #555; box-shadow: 0 0 5px rgba(0,0,0,0.3); }
    
    /* Image Sequence Scroller */
    .sequence-container { height: 200vh; width: 100%; position: relative; }
    #light-shift-sequence { position: sticky; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; }
    .sequence-text-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; text-align: center; color: white; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
    .sequence-text-overlay p { font-size: 1.2rem; margin-top: 1rem; }
}

/* ==========================================================================
   Responsive Styles -- Media queries for adjustments on smaller screens
   ========================================================================== */
@media (max-width: 1024px) {
    .footer-cta-panel {
        flex-direction: column; 
        text-align: center; 
        gap: 1.5rem; 
        padding: 2rem; 
    }
    .newsletter-form {
        min-width: 100%; 
        width: 100%; 
        max-width: 500px; 
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 2rem;
    }
}

@media (max-width: 900px) {
    .project-details-grid { grid-template-columns: 1fr; }
    .project-info-box { position: static; }

    /* .founder-story is a dead selector — the markup and the desktop rules
       both use .founder-story-layout. The typo is why the about page has been
       239px wider than a 375px phone: the desktop grid is `1fr 400px`, nothing
       collapsed it, and the 400px video column simply ran off the side.

       The dead rule is left in place rather than deleted. Removing it is a
       separate question from fixing the bug, and leaving it here next to the
       working one is what explains, to whoever reads this after us, that the
       two names are not a pair. */
    .founder-story { grid-template-columns: 1fr; }
    .founder-story-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    /* Sticky only makes sense beside a scrolling column. With one column it
       pins the video over the text it is meant to sit next to. */
    .story-image-panel { position: static; }
    .contact-card {
        grid-template-columns: 1fr;
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    /* Mobile Navigation */
    .nav-links { position: fixed; top: 0; right: -100%; width: 70%; height: 100vh; background: var(--color-grey); flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; transition: right 0.5s ease-in-out; }
    .nav-links.active { right: 0; }
    .nav-links a { font-size: 1.2rem; }
    .nav-cta { display: none; }
    .hamburger { display: block; }
    .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Layout Adjustments */
    .service-detail { grid-template-columns: 1fr; }
    .project__image { width: 40vw; }
    .project__image--left { left: 5vw; }
    .project__image--right { right: 5vw; }

    /* Footer Responsive */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    #footer-about, .footer-col {
        text-align: center;
    }
    #footer-about p, .footer-testimonial {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-testimonial {
        border-left: none; 
        border-top: 3px solid var(--color-accent); 
        padding-left: 0; 
        padding-top: 1rem; 
    }
    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .contact-info-list li, .footer-socials {
        justify-content: center;
    }
}

/* ==========================================================================
   Scrollbar Layer -- For dynamic, JS-driven scrollbar styling
   ========================================================================== */
@layer scrollbar {
    @property --hue {
        initial-value: 190;
        syntax: '<number>';
        inherits: false;
    }
    @property --chroma {
        initial-value: 0;
        syntax: '<number>';
        inherits: true;
    }
    
    html {
        /* Set a fallback color for browsers that don't support oklch or custom properties */
        scrollbar-color: var(--color-accent) #0000;
        /* Use modern color function with custom properties for animated scrollbar */
        scrollbar-color: oklch(var(--lightness) var(--chroma, 0) var(--hue, 190)) #0000;
    }
}
/* --------------------------------------------------------------------------
   HONEYPOT FIELD
   Paired with the `company` input in the CTA forms. Positioned off-screen
   rather than display:none — bots increasingly skip fields that are hidden
   the obvious way, and an off-screen field still looks real to them. It is
   aria-hidden and tabindex="-1" in the markup, so no keyboard or screen-reader
   user ever meets it.
   -------------------------------------------------------------------------- */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   CONTACT FORM ERROR BANNER
   --------------------------------------------------------------------------
   Rendered server-side by contact.php when process-form.php has bounced the
   visitor back, so it works with JavaScript switched off — which matters,
   because the state it is most often reporting is "your enquiry did not send",
   and that is the worst possible moment to depend on another script loading.

   role="alert" in the markup, so a screen reader announces it on arrival
   rather than leaving someone to discover the form failed by re-reading it.
   -------------------------------------------------------------------------- */
.form-error {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    border-left: 4px solid #c0392b;
    border-radius: 4px;
    background: rgba(192, 57, 43, 0.08);
    color: #7c2018;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* A field the server rejected. Not colour alone — the border weight carries
   the same information for anyone who cannot see the red. */
.contact-form [aria-invalid="true"] {
    border-color: #c0392b;
    border-width: 2px;
}

/* --------------------------------------------------------------------------
   FOOTER — BUILDER REGISTRATION SEAL
   --------------------------------------------------------------------------
   The registration numbers are the strongest trust signal a
   domestic builder has, so this seal is allowed to be a little wider than the
   ABN one beside it and the outbound link is styled to look like a link — the
   point is that people click it and check.
   -------------------------------------------------------------------------- */
.trust-seal--registration {
    max-width: 22rem;
}

.trust-seal-link {
    display: inline-block;
    margin-top: 0.35rem;
    color: #aaa;
    font-size: 0.78rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.trust-seal-link:hover,
.trust-seal-link:focus-visible {
    color: var(--color-light);
}

/* --------------------------------------------------------------------------
   HERO — POSTER IMAGE BEHIND THE OPTIONAL VIDEO
   --------------------------------------------------------------------------
   The homepage hero used to be a 25.7 MB autoplaying MP4 with no poster, which
   every visitor downloaded before they saw anything at all. It is a photograph
   now, and the video is an enhancement layered on top of it when the device and
   the visitor's stated preferences can afford one.

   Both sit at the same z-index band as the old video did, so the overlay and
   the headline stack exactly as before. The poster stays in the document rather
   than being swapped out when the video starts: it is what is behind the video
   while it buffers, and what remains if the video never plays.
   -------------------------------------------------------------------------- */
.hero-poster {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
}

.hero-poster picture,
.hero-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The <video> element is in the markup on every load but empty until the
   script decides to give it a source. Without this it would paint its own
   (transparent) box over the poster before that happens. */
.video-background:not([src]):not(.is-playing) {
    opacity: 0;
}

.video-background.is-playing {
    opacity: 1;
    transition: opacity 0.6s ease;
}

/* --- Local-build markers (never rendered off-local) ----------------------
   A stylesheet is served verbatim, so its comments are public: the history
   and rationale for these rules live in includes/launch-gates.php. */
.launch-gate-placeholder {
    display: block;
    margin: 1rem auto;
    max-width: 60ch;
    padding: 0.75rem 1rem;
    border: 2px dashed #c0392b;
    border-radius: 6px;
    background: rgba(192, 57, 43, 0.06);
    color: #c0392b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: left;
}
.launch-gate-placeholder strong {
    display: block;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.launch-gate-placeholder span {
    display: block;
    margin-top: 0.25rem;
    opacity: 0.85;
}

/* --- Breadcrumb trail ----------------------------------------------------
   Rendered by prostar_render_breadcrumbs() (includes/seo.php) immediately
   under the hero on every page that is not the home page.

   Quiet on purpose. A breadcrumb is not a feature; it answers "where am I and
   how do I get back", and on the project pages it is the only route back to
   the index that is not the main nav. If it competes with the H1 it is
   shouting about the wrong thing.

   The horizontal rules are the load-bearing ones at 375px. The longest trail
   on the site is Home / Projects / Pascoe Vale, which fits, but a suburb name
   is client data and the next one may not: the list wraps rather than
   overflowing, and every item is allowed to break, so no trail can ever push
   the page wider than the viewport. */
.breadcrumbs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem 0;
    font-size: 0.8rem;
    line-height: 1.5;
}
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;          /* wrap, never scroll, never overflow */
    align-items: center;
    gap: 0 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;             /* lets a long crumb shrink instead of pushing */
    overflow-wrap: anywhere;
}
.breadcrumbs a {
    color: inherit;
    opacity: 0.65;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
    opacity: 1;
    border-bottom-color: currentColor;
}
.breadcrumbs__sep {
    opacity: 0.4;
    font-size: 0.9em;
}
.breadcrumbs__current {
    opacity: 0.9;
    font-weight: 600;
}

@media (max-width: 600px) {
    .breadcrumbs {
        padding: 0.85rem 1rem 0;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   Keyboard access -- skip link and a visible focus indicator
   Deliberately un-layered so it outranks the cascade layers above: a focus
   indicator that a component rule can quietly cancel is not an indicator.
   ========================================================================== */

/* WCAG 2.4.1 Bypass Blocks. There was no skip link anywhere on the site, so a
   keyboard or screen-reader user traversed the logo, six nav links and the CTA
   on every page before reaching the content. Off-screen until focused, then it
   pins itself to the top-left over everything else. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: fixed;
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    z-index: 10001; /* above the preloader's 9999 */
    padding: 0.75rem 1.25rem;
    background: var(--color-accent);
    color: var(--color-dark);
    font-family: var(--font-primary);
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Visually hidden, still announced. Deliberately un-layered, alongside the
   skip link: this is the utility that keeps "Learn more" from being six
   identical link texts in a screen reader's link list, and a layered rule is
   one unlayered selector away from being overridden into visibility. */
.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;
}

/* The <main> takes tabindex="-1" so the skip link can move focus into it; that
   makes it focusable by script but it must not paint a ring when a mouse user
   clicks into it.

   :focus-visible is the exception, and it matters: outline:none on every
   focus meant a keyboard user who activated the skip link got no confirmation
   at all — focus moved silently into a region with no visible indicator, which
   reads as "the link did nothing". The ring is only drawn for the keyboard
   case, is offset inwards so it does not overlap the hero, and fades out on
   blur. */
main:focus {
    outline: none;
}

#main-content:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -4px;
    border-radius: 2px;
}

/* :focus-visible, not :focus -- mouse users see nothing, keyboard users always
   see a 3px gold ring. Applied to every interactive control the templates own. */
a:focus-visible,
button:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.main-nav a:focus-visible,
.nav-cta:focus-visible,
.hamburger:focus-visible,
.gallery-card a:focus-visible,
.gallery-filter-btn:focus-visible,
#scrollToTopBtn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* The footer logo is now the 300x96 derivative, but width:auto still matters:
   without it the width attribute wins the layout and the logo drags the footer
   grid sideways on a phone. */
.footer-logo {
    width: auto;
}