/* ==========================================================================
   Homepage styles -- extracted verbatim from index.html inline <style> blocks
   (A1, 2026-06-13). Loaded AFTER style.css + building-explorer.css to preserve
   the original cascade. No rules were deleted; dedup vs style.css is a follow-up.
   ========================================================================== */

/* ---- block 1 of 3 ---- */
/* Brand Colors */
        /* =========================================================================
           Design tokens
           All custom properties live here. Previously split across two :root blocks
           (brand colors near the top + hero easing tokens further down) + three vars
           were referenced without being declared (--navy-deeper, --accent-hover,
           --text-light). Consolidated into one source of truth.
           ========================================================================= */
        :root {
            /* Brand palette */
            --navy: #00475D;
            --navy-deeper: #002233;        /* darker navy used for body bg + service showcase */
            --gray: #58595B;
            --gold: #EA7234;
            --accent-hover: #D65E20;       /* darker orange for CTA / scroll-to-top hover */
            --white: #FFFFFF;
            --light-gray: #F5F5F5;
            --text-light: #C8CDD3;         /* muted light text on dark surfaces */
            --dark: #0F0F0F;

            /* Hero easing tokens -- one source of truth for every hero motion */
            --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
            --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
            --ease-in-out-cinema: cubic-bezier(0.83, 0, 0.17, 1);
        }

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

        body {
            font-family: 'Inter', sans-serif;
            color: var(--gray);
            line-height: 1.6;
            background-color: var(--navy-deeper);
        }

        /* Typography */
        h1, h2, h3, h4, h5, h6 {
            color: var(--navy);
            font-weight: 700;
            line-height: 1.2;
        }

        

        h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        h3 {
            font-size: 1.5rem;
            margin-bottom: 0.75rem;
        }

        p {
            margin-bottom: 1rem;
            font-size: 1rem;
            line-height: 1.7;
        }

        .section-label {
            display: block;
            text-transform: uppercase;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            color: var(--accent-soft);
            margin-bottom: 0.5rem;
        }

        /* Dark-orange label on light sections so contrast clears AA. */
        .section-light .section-label { color: var(--accent-button); }
        /* Explicit AA-safe label color for the FAQ section. */
        #faq .section-label { color: var(--accent-button); }
        /* Inline links inside FAQ answer panels: accessible dark-orange so
           they clear AA contrast on the light FAQ background. */
        .faq-answer a { color: var(--accent-button); }

        .highlight {
            color: var(--gold);
        }

        /* Base heading text is white so it clears AA on the dark navy
           services-showcase background; the highlighted word keeps the
           lighter accent. */
        .services-showcase h2 { color: #ffffff; }
        .services-showcase h2 .highlight { color: var(--accent-soft); }

        /* Container */
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        /* Header - starts transparent over hero, solid white on scroll
           NOTE: backdrop-filter glassmorphism removed entirely.
           iOS Safari has a known compositor bug where position:fixed +
           backdrop-filter + z-index causes scroll jank / flicker.
           A near-opaque white is visually identical and buttery smooth. */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: rgba(255, 255, 255, 0.96);
            z-index: 1000;
            padding: 0.8rem 0;
            transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
            border-bottom: 1px solid rgba(0, 71, 93, 0.1);
            box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        header.scrolled {
            background-color: rgba(255, 255, 255, 0.96);
            box-shadow: 0 1px 16px rgba(0, 0, 0, 0.07);
            padding: 0.4rem 0;
            border-bottom: 1px solid rgba(0, 71, 93, 0.1);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-shrink: 0;
        }

        .logo img {
            height: 70px;
            width: auto;
        }

        .logo-text {
            display: none;
        }

        nav, nav.nav-links {
            display: flex;
            gap: 2.25rem;
            align-items: center;
            list-style: none;
        }

        nav a {
            color: var(--navy);
            text-decoration: none;
            font-size: 0.92rem;
            font-weight: 500;
            transition: color 0.35s ease;
            position: relative;
            white-space: nowrap;
            text-shadow: none;
        }

        nav a:hover {
            color: var(--gold);
        }

        /* Header stays white from the top; .scrolled just adds a bit more lift */
        header.scrolled nav a {
            color: var(--navy);
            text-shadow: none;
        }

        header.scrolled nav a:hover {
            color: var(--gold);
        }

        /* Logo uses its natural colors since header is always white */
        header .logo img {
            filter: none;
        }

        header.scrolled .logo img {
            filter: none;
        }

        

        .dropdown-toggle::after {
            content: '▼';
            font-size: 0.6rem;
            margin-left: 0.4rem;
            display: inline-block;
            opacity: 0.5;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: -1rem;
            background-color: #ffffff;
            border: 1px solid rgba(0, 71, 93, 0.15);
            border-radius: 6px;
            min-width: 240px;
            padding: 0.5rem 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease, margin-top 0.3s ease;
            margin-top: 0.75rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        }

        /* Only show dropdown on real hover (mouse), not on iOS tap */
        @media (hover: hover) {
            .dropdown:hover .dropdown-menu {
                opacity: 1;
                visibility: visible;
                margin-top: 0.25rem;
            }
        }

        /* JS-toggled dropdown for touch devices at all widths */
        .dropdown.active .dropdown-menu {
            opacity: 1;
            visibility: visible;
            margin-top: 0.25rem;
        }

        .dropdown-menu a {
            display: block;
            padding: 0.65rem 1.25rem;
            color: var(--navy) !important;
            text-shadow: none !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            font-size: 0.88rem;
        }

        

        .dropdown-menu a:last-child {
            border-bottom: none;
        }

        .cta-button {
            background-color: var(--accent-button);
            color: #ffffff;
            padding: 0.7rem 1.5rem;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.88rem;
            transition: background-color 0.3s ease, transform 0.3s ease;
            border: none;
            cursor: pointer;
            white-space: nowrap;
        }

        .cta-button:hover {
            background-color: var(--accent-button-hover);
            color: #ffffff;
            transform: translateY(-1px);
        }

        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
            gap: 5px;
            position: relative;
            z-index: 10000;
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            -webkit-appearance: none;
            appearance: none;
        }

        .hamburger span {
            width: 25px;
            height: 3px;
            background-color: var(--navy);
            border-radius: 2px;
            transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
        }

        header.scrolled .hamburger span {
            background-color: var(--navy);
        }

        /* When mobile nav is open, hamburger lines are always white (X icon) */
        .hamburger.active span {
            background-color: #ffffff !important;
        }
        .hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 6px);
        }
        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }
        .hamburger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -6px);
        }

        /* Hero Section */
        .hero {
            margin-top: 0;
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--white);
            position: relative;
            overflow: hidden;
            /* Prevent iOS z-index compositing glitch with fixed header */
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.50) 0%,
                rgba(0, 0, 0, 0.30) 40%,
                rgba(0, 0, 0, 0.10) 70%,
                rgba(0, 0, 0, 0) 100%
            );
            pointer-events: none;
        }

        .hero-slideshow {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 110%; /* extra 10% so scroll parallax never exposes the edge */
            z-index: 0;
            overflow: hidden;
            background: var(--dark);
            will-change: transform;
        }

        /* Unified cinematic grade applied to both video and slides so the handoff is invisible */
        .hero-video,
        .hero-slide {
            filter: brightness(0.72) contrast(1.12) saturate(1.05);
        }

        /* Hero video -- plays once on load then cross-fades to slideshow */
        .hero-video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%) scale(1.015);
            object-fit: cover;
            opacity: 0;
            z-index: 2;
            /* Long fade-in from black, faster fade-out so the slideshow takes over cleanly */
            transition: opacity 2.4s cubic-bezier(0.22, 0.61, 0.36, 1);
            will-change: opacity, transform;
        }

        .hero-video.loaded {
            opacity: 1;
            animation: heroVideoDrift 20s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        }

        .hero-video.fade-out {
            opacity: 0;
            transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes heroVideoDrift {
            0%   { transform: translate(-50%, -50%) scale(1.015); }
            100% { transform: translate(-50%, -50%) scale(1.09); }
        }

        /* Image slideshow layer -- activates as the video fades out */
        .hero-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            z-index: 1;
            transform: scale(1);
            will-change: opacity, transform;
        }

        .hero-slide.active {
            opacity: 1;
            transition: opacity 2s cubic-bezier(0.22, 0.61, 0.36, 1);
            animation: heroKenBurnsIn 8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
        }

        /* Alternate zoom direction + slight pan on every other slide for visual variety */
        .hero-slide:nth-child(even).active {
            animation-name: heroKenBurnsOut;
        }
        .hero-slide:nth-child(3n).active {
            animation-name: heroKenBurnsPanRight;
        }
        .hero-slide:nth-child(5n).active {
            animation-name: heroKenBurnsPanLeft;
        }

        .hero-slide.fade-out {
            opacity: 0;
            transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes heroKenBurnsIn {
            0%   { transform: scale(1.00) translate(0, 0); }
            100% { transform: scale(1.08) translate(0, -1%); }
        }
        @keyframes heroKenBurnsOut {
            0%   { transform: scale(1.08) translate(0, 0); }
            100% { transform: scale(1.00) translate(0,  1%); }
        }
        @keyframes heroKenBurnsPanRight {
            0%   { transform: scale(1.06) translate(-1.5%, 0); }
            100% { transform: scale(1.06) translate( 1.5%, 0); }
        }
        @keyframes heroKenBurnsPanLeft {
            0%   { transform: scale(1.06) translate( 1.5%, 0); }
            100% { transform: scale(1.06) translate(-1.5%, 0); }
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Three-layer legibility stack:
               1) Edge vignette -- clamps the corners without touching the center
               2) Vertical darken -- stronger at top (header area) + bottom (stats)
               3) Faint warm tint wash so slides never feel desaturated or flat */
            background:
                radial-gradient(ellipse 85% 65% at 50% 55%, rgba(5, 12, 24, 0) 0%, rgba(5, 12, 24, 0.35) 70%, rgba(2, 6, 14, 0.78) 100%),
                linear-gradient(180deg,
                    rgba(6, 11, 22, 0.58) 0%,
                    rgba(6, 11, 22, 0.28) 28%,
                    rgba(6, 11, 22, 0.22) 55%,
                    rgba(4, 9, 18, 0.55) 82%,
                    rgba(2, 6, 14, 0.78) 100%
                ),
                linear-gradient(90deg, rgba(30, 18, 6, 0.08) 0%, rgba(6, 14, 28, 0.08) 100%);
            z-index: 3;
            pointer-events: none;
        }

        /* Subtle film grain for cinematic texture (pure CSS, GPU-cheap) */
        .hero-overlay::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                radial-gradient(circle at 30% 20%, rgba(255,255,255,0.02) 0, transparent 1.2px),
                radial-gradient(circle at 70% 70%, rgba(255,255,255,0.02) 0, transparent 1.2px),
                radial-gradient(circle at 40% 80%, rgba(255,255,255,0.015) 0, transparent 1.2px);
            background-size: 3px 3px, 4px 4px, 5px 5px;
            mix-blend-mode: overlay;
            opacity: 0.6;
            pointer-events: none;
        }

        /* Anamorphic light sweep -- a slow diagonal specular glint every 22s */
        .hero-lightsweep {
            position: absolute;
            inset: -20% -40%;
            z-index: 4;
            pointer-events: none;
            background: linear-gradient(
                115deg,
                transparent 40%,
                rgba(255, 240, 210, 0.09) 48%,
                rgba(255, 255, 255, 0.14) 50%,
                rgba(255, 240, 210, 0.09) 52%,
                transparent 60%
            );
            transform: translateX(-100%);
            mix-blend-mode: screen;
            opacity: 0;
            animation: heroLightSweep 22s var(--ease-in-out-cinema) infinite;
            animation-delay: 5s;
        }

        @keyframes heroLightSweep {
            0%, 92%  { transform: translateX(-100%); opacity: 0; }
            93%      { opacity: 0.9; }
            97%      { opacity: 0.9; }
            100%     { transform: translateX(100%); opacity: 0; }
        }

        /* Content scrim -- a soft dark spotlight that anchors behind the headline
           and guarantees legibility regardless of which slide is showing. Replaces
           the earlier orange "screen" glow that was actively reducing contrast. */
        .hero-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 140%;
            height: 100%;
            transform: translate(-50%, -50%);
            z-index: 4;
            pointer-events: none;
            background: radial-gradient(
                ellipse 50% 42% at 50% 50%,
                rgba(4, 10, 22, 0.72) 0%,
                rgba(4, 10, 22, 0.55) 25%,
                rgba(4, 10, 22, 0.28) 55%,
                rgba(4, 10, 22, 0)    85%
            );
            /* A whisper of warm brand tint bled into the edges of the scrim */
            box-shadow:
                inset 0 0 120px 30px rgba(234, 114, 52, 0.035);
            animation: heroGlowBreath 18s ease-in-out infinite;
        }

        @keyframes heroGlowBreath {
            0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
            50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.04); }
        }

        /* Drifting dust particles -- three layered radial gradients that float across the frame */
        .hero-dust {
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            opacity: 0.45;
            mix-blend-mode: screen;
            background-image:
                radial-gradient(circle 1.5px at 15% 20%, rgba(255, 245, 220, 0.8), transparent 100%),
                radial-gradient(circle 1px   at 42% 65%, rgba(255, 245, 220, 0.7), transparent 100%),
                radial-gradient(circle 2px   at 78% 30%, rgba(255, 245, 220, 0.6), transparent 100%),
                radial-gradient(circle 1px   at 62% 85%, rgba(255, 245, 220, 0.7), transparent 100%),
                radial-gradient(circle 1.5px at 90% 55%, rgba(255, 245, 220, 0.6), transparent 100%),
                radial-gradient(circle 1px   at 25% 75%, rgba(255, 245, 220, 0.8), transparent 100%);
            background-size: 100% 100%;
            animation: heroDustDrift 38s linear infinite;
        }

        @keyframes heroDustDrift {
            0%   { transform: translate(0, 0); }
            50%  { transform: translate(-2%, -1.5%); }
            100% { transform: translate(0, 0); }
        }

        /* Slide progress indicator -- thin gold line at the bottom of the hero */
        .hero-progress {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            z-index: 5;
            background: rgba(255, 255, 255, 0.08);
            pointer-events: none;
            opacity: 0;
            transition: opacity 1s var(--ease-out-expo);
        }

        .hero-progress.is-visible {
            opacity: 1;
        }

        .hero-progress__bar {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 0%;
            background: linear-gradient(
                90deg,
                rgba(234, 114, 52, 0.2) 0%,
                rgba(234, 114, 52, 1) 40%,
                rgba(255, 175, 95, 1) 100%
            );
            box-shadow: 0 0 12px rgba(234, 114, 52, 0.7);
            transform-origin: left center;
            transition: width 120ms linear;
        }

        .hero-diagram-teaser {
            position: absolute;
            right: 3%;
            bottom: 0;
            width: 28%;
            max-width: 280px;
            height: auto;
            opacity: 0.04;
            z-index: 1;
            pointer-events: none;
        }

        .hero-content {
            max-width: 740px;
            padding: 0 2rem;
            position: relative;
            /* Must sit ABOVE every scrim/FX layer (overlay:3, glow:4, dust/lightsweep:4-5)
               or the legibility darkeners end up fading the text itself. */
            z-index: 6;
            isolation: isolate; /* let the backdrop pseudo sit above the media but below the text */
        }

        /* Frosted glass halo behind the content -- invisible edge, peak blur centered on text.
           Uses a radial mask so the blur fades cleanly into the hero media, no hard card edge. */
        .hero-content::before {
            content: '';
            position: absolute;
            inset: -6% -14%;
            z-index: -1;
            backdrop-filter: blur(10px) saturate(1.15) brightness(0.92);
            -webkit-backdrop-filter: blur(10px) saturate(1.15) brightness(0.92);
            background: radial-gradient(
                ellipse 65% 60% at 50% 50%,
                rgba(4, 10, 22, 0.42) 0%,
                rgba(4, 10, 22, 0.2) 45%,
                rgba(4, 10, 22, 0) 75%
            );
            -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 0%, #000 40%, transparent 85%);
                    mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 0%, #000 40%, transparent 85%);
            pointer-events: none;
            opacity: 0;
            animation: heroBackdropFadeIn 1.6s var(--ease-out-expo) 0.3s forwards;
        }

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

        /* Decorative gold hairline above the badge for architectural restraint */
        .hero-content::after {
            content: '';
            position: absolute;
            left: 50%;
            top: -36px;
            width: 56px;
            height: 2px;
            transform: translateX(-50%) scaleX(0);
            transform-origin: center;
            background: linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%);
            box-shadow: 0 0 16px rgba(234, 114, 52, 0.6);
            opacity: 0;
            animation: heroAccentDraw 1s var(--ease-out-expo) 0.15s forwards;
        }

        @keyframes heroAccentDraw {
            to { transform: translateX(-50%) scaleX(1); opacity: 1; }
        }

        .hero h1 {
            color: var(--white);
            font-size: clamp(3.25rem, 5.2vw, 4.75rem);
            font-weight: 800;
            line-height: 1.04;
            letter-spacing: -0.022em;
            margin-bottom: 1.5rem;
            /* paint-order draws the stroke *behind* the fill so the 1px dark outline
               bulletproofs edges without thickening the glyph. */
            paint-order: stroke fill;
            -webkit-text-stroke: 1px rgba(0, 0, 0, 0.55);
            /* Five-layer shadow stack: razor edge + tight halo + mid glow + wide atmospheric
               spread + faint brand warmth. Remains legible on every slide and the video. */
            text-shadow:
                0 1px 1px  rgba(0, 0, 0, 0.98),
                0 2px 6px  rgba(0, 0, 0, 0.80),
                0 6px 22px rgba(0, 0, 0, 0.60),
                0 12px 48px rgba(0, 0, 0, 0.42),
                0 0 72px   rgba(8, 14, 28, 0.38);
        }

        .hero h1 .highlight {
            /* Solid warm-cream -- bright, on-brand, and rock solid across every browser.
               Earlier attempts (background-clip:text + transparent fill) were fragile and
               rendered black in some contexts. Kept inside the .hero h1 text-shadow stack,
               so no extra filter is needed. */
            color: var(--accent-tint);
            -webkit-text-fill-color: var(--accent-tint);
            background: none;
        }

        /* Text-reveal: each line masked and slides up */
        .hero-line {
            display: block;
            overflow: hidden;
            padding-bottom: 0.1em;
        }

        .hero-line-inner {
            display: block;
            transform: translateY(110%);
            opacity: 0;
            animation: textRevealUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        .hero-line:nth-child(2) .hero-line-inner {
            animation-delay: 0.18s;
        }

        .hero p {
            opacity: 0;
            animation: heroBadgeFadeIn 0.7s ease forwards;
            animation-delay: 0.5s;
        }

        .hero-cta {
            opacity: 0;
            animation: heroBadgeFadeIn 0.7s ease forwards;
            animation-delay: 0.65s;
        }

        .hero-trust-line {
            opacity: 0;
            animation: heroBadgeFadeIn 0.7s ease forwards;
            animation-delay: 0.8s;
        }

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

        @keyframes heroBadgeFadeIn {
            from { opacity: 0; transform: translateY(12px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .hero p {
            color: rgba(255, 255, 255, 0.97);
            font-size: 1.15rem;
            font-weight: 500;
            letter-spacing: 0.12em;
            margin-bottom: 2rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            text-shadow:
                0 1px 2px  rgba(0, 0, 0, 0.9),
                0 2px 8px  rgba(0, 0, 0, 0.6),
                0 0 32px   rgba(0, 0, 0, 0.4);
            text-align: center;
        }

        .hero-cta {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.85rem;
            margin-bottom: 0;
        }

        /* Secondary ghost CTA -- low-commitment path for researchers not ready
           to request an evaluation. White-on-dark over the hero, same text
           treatment as the hero copy so it passes the contrast gate. */
        .hero-cta .btn-ghost {
            display: inline-flex;
            align-items: center;
            padding: 1rem 2rem;
            border-radius: 5px;
            font-weight: 600;
            font-size: 0.95rem;
            color: #ffffff;
            background: rgba(255, 255, 255, 0.08);
            border: 1.5px solid rgba(255, 255, 255, 0.6);
            text-decoration: none;
            white-space: nowrap;
            text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.5);
            transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
        }
        .hero-cta .btn-ghost:hover {
            background: rgba(255, 255, 255, 0.18);
            border-color: #ffffff;
            transform: translateY(-1px);
        }
        .hero-cta .btn-ghost:focus-visible {
            outline: 2px solid #ffffff;
            outline-offset: 3px;
        }

        .btn-primary {
            background-color: var(--accent-button);
            color: #ffffff;
            padding: 1rem 2rem;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 600;
            border: 2px solid var(--accent-button);
            transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
            cursor: pointer;
            font-size: 0.95rem;
            display: inline-block;
        }

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

        

        

        /* Services Showcase */
        .services-showcase {
            background: var(--navy-deeper, #002233);
            padding: 5rem 0;
            text-align: center;
        }
        .showcase-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        .showcase-card {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 8px;
            overflow: hidden;
            text-decoration: none;
            color: inherit;
            transition: transform 0.35s ease, box-shadow 0.35s ease;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
        }
        .showcase-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 30px -8px rgba(0,0,0,0.3);
        }
        .showcase-img {
            height: 220px;
            overflow: hidden;
        }
        .showcase-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
            border-radius: 8px 8px 0 0;
        }
        .showcase-card:hover .showcase-img img {
            transform: scale(1.06);
        }
        .showcase-info {
            padding: 1.5rem;
            text-align: left;
        }
        .showcase-info h3 {
            font-size: 1.15rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 0.5rem;
        }
        .showcase-info p {
            font-size: 0.9rem;
            color: var(--text-light, #C8CDD3);
            line-height: 1.6;
        }
        @media (max-width: 1024px) {
            .showcase-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .services-showcase { padding: 3rem 0; }
            .showcase-grid { grid-template-columns: 1fr; max-width: 500px; }
        }

        /* Trust Team Photo */
        .trust-team-photo {
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 2rem;
            position: relative;
            max-height: 340px;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.15);
        }
        .trust-team-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 40%;
            display: block;
            filter: brightness(0.7);
        }
        .trust-photo-caption {
            position: absolute;
            bottom: 1.25rem;
            left: 1.5rem;
            color: #fff;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.6);
        }

        /* Trust & Authority Section */
        .trust-authority {
            background-color: var(--navy-deeper);
            padding: 3.5rem 0;
            position: relative;
            overflow: hidden;
        }

        .trust-authority::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 40%;
            height: 100%;
            background: linear-gradient(135deg, rgba(234, 114, 52, 0.06) 0%, transparent 60%);
            pointer-events: none;
        }

        .trust-authority-inner {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .trust-authority-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-bottom: 2.5rem;
        }

        .trust-authority-icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(234, 114, 52, 0.15), rgba(234, 114, 52, 0.05));
            border: 1.5px solid rgba(234, 114, 52, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-bottom: 1.25rem;
        }

        .trust-authority-icon svg {
            width: 34px;
            height: 34px;
            fill: none;
            stroke: var(--gold);
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .trust-authority-header h2 {
            color: var(--white);
            font-size: 1.85rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 0.75rem;
            letter-spacing: -0.01em;
        }

        .trust-authority-header h2 .highlight {
            color: var(--gold);
        }

        .trust-authority-header p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 1rem;
            line-height: 1.7;
            margin: 0 auto;
            max-width: 640px;
        }

        /* Benefits grid tied to diagram zones */
        .trust-benefits-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .trust-benefit-card {
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
            padding: 1.25rem 1.5rem;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px;
            transition: all 0.3s ease;
            cursor: default;
        }

        .trust-benefit-card:hover {
            background: rgba(234,114,52,0.06);
            border-color: rgba(234,114,52,0.2);
            transform: translateY(-2px);
        }

        .zone-icon-inline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            flex-shrink: 0;
        }

        .zone-icon-inline svg {
            width: 24px;
            height: 24px;
            fill: none;
            stroke: var(--gold);
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .trust-benefit-card .zone-icon-inline {
            margin-top: 2px;
        }

        .trust-benefit-text {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }

        .trust-benefit-text strong {
            color: #fff;
            font-size: 0.92rem;
            font-weight: 700;
        }

        .trust-benefit-text span {
            color: rgba(255,255,255,0.55);
            font-size: 0.82rem;
            line-height: 1.5;
        }

        /* Inline testimonial in trust section */
        .trust-testimonial-inline {
            text-align: center;
            padding: 2rem;
            margin-top: 2rem;
            background: rgba(255,255,255,0.02);
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .trust-testimonial-inline p {
            color: rgba(255,255,255,0.7);
            font-size: 1rem;
            line-height: 1.7;
            font-style: italic;
            max-width: 700px;
            margin: 0 auto 0.75rem;
        }

        .trust-testimonial-inline span {
            color: rgba(255,255,255,0.4);
            font-size: 0.82rem;
            font-weight: 500;
        }

        .trust-authority-badges {
            display: flex;
            gap: 0.85rem;
            flex-wrap: wrap;
        }

        .trust-authority-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.45rem 1rem;
            border-radius: 50px;
            font-size: 0.78rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            border: 1px solid rgba(234, 114, 52, 0.3);
            color: var(--gold);
            background: rgba(234, 114, 52, 0.08);
        }

        .trust-authority-badge svg {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: var(--gold);
            stroke-width: 2;
        }

        @media (max-width: 768px) {
            .trust-authority {
                padding: 3rem 0;
            }

            .trust-authority-header {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 1rem;
            }

            .trust-authority-icon {
                margin: 0 auto;
                width: 56px;
                height: 56px;
            }

            .trust-authority-header h2 {
                font-size: 1.5rem;
            }

            .trust-authority-header p {
                font-size: 0.92rem;
            }

            .trust-benefits-grid {
                grid-template-columns: 1fr;
            }

            .trust-authority-badges {
                justify-content: center;
                gap: 0.65rem;
            }

            .trust-authority-badge {
                font-size: 0.72rem;
                padding: 0.35rem 0.75rem;
            }
        }

        @media (max-width: 480px) {
            .trust-authority {
                padding: 2rem 0;
            }

            .trust-authority-icon {
                width: 48px;
                height: 48px;
            }

            .trust-authority-header h2 {
                font-size: 1.3rem;
            }

            .trust-authority-header p {
                font-size: 0.88rem;
            }

            .trust-authority-badges {
                flex-direction: column;
                align-items: center;
                gap: 0.5rem;
            }

            .trust-authority-badge {
                font-size: 0.68rem;
                padding: 0.3rem 0.65rem;
            }

            .trust-benefit-card {
                padding: 1rem 1.2rem;
            }
        }

        /* Section Styles */
        .section-navy {
            background-color: var(--navy);
            color: var(--white);
            padding: 3rem 0;
        }

        .section-navy h2 {
            color: var(--white);
        }

        .section-navy h3 {
            color: var(--white);
        }

        .section-dark {
            background-color: var(--dark);
            color: var(--white);
            padding: 3rem 0;
        }

        .section-dark h2 {
            color: var(--white);
        }

        .section-dark h3 {
            color: var(--white);
        }

        


        /* Featured Project */
        .featured-project {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        .featured-image {
            position: relative;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
            transition: transform 0.45s cubic-bezier(.4,0,.2,1), box-shadow 0.45s cubic-bezier(.4,0,.2,1);
        }

        .featured-image:hover {
            transform: translateY(-4px) scale(1.01);
            box-shadow: 0 16px 44px rgba(0,0,0,0.35);
        }

        .featured-image::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 14px;
            background: linear-gradient(0deg, rgba(0,30,40,0.55) 0%, rgba(0,30,40,0.12) 40%, transparent 70%);
            box-shadow: inset 0 0 40px rgba(0,0,0,0.3), inset 0 0 80px rgba(0,0,0,0.1);
            pointer-events: none;
            z-index: 1;
            transition: background 0.5s ease-in-out;
        }

        .featured-image:hover::after {
            background: linear-gradient(0deg, rgba(0,20,28,0.70) 0%, rgba(0,20,28,0.25) 50%, transparent 80%);
        }

        .featured-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.7s cubic-bezier(.25,.46,.45,.94);
            will-change: transform;
        }

        .featured-image:hover img {
            transform: scale(1.05);
        }

        .featured-badge {
            position: absolute;
            top: 2rem;
            left: 2rem;
            background-color: var(--gold);
            color: var(--navy);
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .featured-content h3 {
            color: var(--white);
            margin-bottom: 0.5rem;
        }

        .featured-meta {
            display: flex;
            gap: 2rem;
            margin-bottom: 1.5rem;
            color: var(--gold);
            font-weight: 500;
            font-size: 0.9rem;
        }

        .featured-content p {
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 2rem;
        }

        /* Why CSI Section */
        .why-csi-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3rem;
            margin-top: 3rem;
        }

        .why-csi-card {
            padding: 2rem;
            border-left: 4px solid var(--gold);
        }

        .why-csi-card h3 {
            color: var(--white);
            margin-bottom: 1rem;
        }

        .why-csi-card p {
            color: rgba(255, 255, 255, 0.8);
        }

        /* Testimonial Section */
        

        .stars {
            color: var(--gold);
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            letter-spacing: 0.25rem;
        }

        

        

        /* Compliance Timeline */
        .compliance-section {
            background: linear-gradient(180deg, var(--navy-deeper) 0%, var(--navy) 100%);
            padding: 3.5rem 0;
        }

        .compliance-section .section-label {
            color: var(--accent-soft);
        }

        .compliance-section h2 {
            color: var(--white);
            font-size: 2.2rem;
            margin-bottom: 0.75rem;
        }

        .compliance-intro {
            color: rgba(255, 255, 255, 0.65);
            font-size: 1.05rem;
            max-width: 640px;
            margin: 0 auto 3rem;
            text-align: center;
        }

        /* Flexbox timeline - evenly spaced, no overlap */
        .timeline-wrapper {
            position: relative;
            padding: 0 0 2rem;
        }

        .timeline-row {
            display: flex;
            justify-content: space-between;
            position: relative;
            padding: 0 1rem;
        }

        /* The track line behind the dots */
        .timeline-row::before {
            content: '';
            position: absolute;
            top: 36px;
            left: 1rem;
            right: 1rem;
            height: 4px;
            background: rgba(255, 255, 255, 0.12);
            border-radius: 4px;
            z-index: 0;
        }

        /* Animated fill bar overlaying the track */
        .timeline-fill {
            position: absolute;
            top: 36px;
            left: 1rem;
            height: 4px;
            width: 0%;
            background: linear-gradient(90deg, var(--gold), #f5923e);
            border-radius: 4px;
            z-index: 1;
            transition: width 1.8s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .timeline-fill.animate {
            width: var(--fill-pct);
        }

        /* Each milestone column */
        .tl-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            z-index: 2;
            min-width: 0;
            padding: 0 4px;
        }

        /* "You Are Here" tag above the dot - reserve consistent height so dots align */
        .tl-flag {
            background: var(--gold);
            color: var(--navy-deeper);
            font-size: 0.62rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            padding: 0.25rem 0.55rem;
            border-radius: 3px;
            white-space: nowrap;
            margin-bottom: 6px;
            visibility: hidden;
            min-height: 20px;
        }

        .tl-item.current .tl-flag {
            visibility: visible;
        }

        /* Dot */
        .tl-dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--navy-dark);
            border: 3px solid rgba(255, 255, 255, 0.2);
            flex-shrink: 0;
            transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        .tl-item.past .tl-dot {
            background: var(--gold);
            border-color: var(--gold);
            box-shadow: 0 0 6px rgba(234, 114, 52, 0.35);
            position: relative;
        }

        /* Checkmark inside past dots */
        .tl-item.past .tl-dot::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 8px;
            border: solid var(--navy);
            border-width: 0 2px 2px 0;
            transform: translate(-50%, -60%) rotate(45deg);
        }

        /* Dim past labels to de-emphasize */
        .tl-item.past .tl-label {
            opacity: 0.5;
        }

        .tl-item.past .tl-date {
            opacity: 0.7;
        }

        .tl-item.current .tl-dot {
            background: var(--gold);
            border-color: #fff;
            width: 20px;
            height: 20px;
            margin-top: -2px;
            box-shadow: 0 0 0 4px rgba(234, 114, 52, 0.25), 0 0 14px rgba(234, 114, 52, 0.3);
            animation: currentPulse 2s ease-in-out infinite;
        }

        @keyframes currentPulse {
            0%, 100% { box-shadow: 0 0 0 4px rgba(234, 114, 52, 0.25), 0 0 14px rgba(234, 114, 52, 0.3); }
            50%      { box-shadow: 0 0 0 7px rgba(234, 114, 52, 0.12), 0 0 20px rgba(234, 114, 52, 0.2); }
        }

        /* Date label */
        .tl-date {
            font-size: 0.72rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.4);
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin-top: 10px;
        }

        .tl-item.past .tl-date,
        .tl-item.current .tl-date {
            color: var(--gold);
        }

        /* "Passed" tag under past dates */
        .tl-item.past .tl-date::after {
            content: 'Passed';
            display: block;
            font-size: 0.56rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(255, 255, 255, 0.3);
            margin-top: 2px;
        }

        /* Description label */
        .tl-label {
            font-size: 0.76rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.35;
            margin-top: 5px;
            max-width: 130px;
        }

        .tl-item.current .tl-label {
            color: var(--white);
            font-weight: 600;
        }

        /* Bottom CTA */
        .compliance-cta {
            text-align: center;
            margin-top: 3rem;
        }

        .compliance-cta .btn-primary {
            font-size: 1.05rem;
            padding: 1.1rem 2.5rem;
            background: var(--accent-button);
            color: #ffffff;
            border: 2px solid var(--accent-button);
        }

        .compliance-cta .btn-primary:hover {
            background: var(--accent-button-hover);
            border-color: var(--accent-button-hover);
            color: #ffffff;
        }

        .compliance-urgency {
            color: rgba(255, 255, 255, 0.45);
            font-size: 0.85rem;
            margin-top: 1rem;
        }

        /* Mobile: vertical timeline */
        @media (max-width: 768px) {
            .compliance-section {
                padding: 3rem 0;
            }

            .compliance-section h2 {
                font-size: 1.6rem;
            }

            .compliance-intro {
                font-size: 0.92rem;
                margin-bottom: 2rem;
            }

            .timeline-row {
                display: grid;
                grid-template-columns: 28px 1fr;
                gap: 0;
                padding: 0 0.5rem;
            }

            .timeline-row::before {
                top: 0;
                bottom: 0;
                left: 20px;
                right: auto;
                width: 4px;
                height: auto;
            }

            .timeline-fill {
                top: 0;
                left: 20px;
                width: 4px !important;
                height: 0%;
                transition: height 1.8s cubic-bezier(0.22, 1, 0.36, 1);
            }

            .timeline-fill.animate {
                height: var(--fill-pct);
                width: 4px !important;
            }

            .tl-item {
                display: contents;
            }

            .tl-flag {
                display: none;
            }

            .tl-dot {
                grid-column: 1;
                margin: 4px auto 0;
                flex-shrink: 0;
            }

            .tl-date {
                grid-column: 2;
                text-align: left;
                margin-top: 0;
                font-size: 0.78rem;
                padding-left: 0.75rem;
            }

            .tl-label {
                grid-column: 2;
                text-align: left;
                margin-top: 2px;
                margin-bottom: 1.25rem;
                max-width: none;
                padding-left: 0.75rem;
                font-size: 0.82rem;
            }

            .tl-item.past .tl-dot::after {
                width: 4px;
                height: 7px;
                border-width: 0 1.5px 1.5px 0;
            }

            .tl-item.past .tl-date::after {
                display: inline;
                margin-left: 0.5em;
                margin-top: 0;
            }

            .tl-item.current .tl-dot {
                width: 18px;
                height: 18px;
            }

            /* "You Are Here" tag inline with date */
            .tl-item.current .tl-date::after {
                content: '  ← You Are Here';
                font-size: 0.6rem;
                font-weight: 800;
                color: var(--gold);
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .compliance-cta .btn-primary {
                font-size: 0.95rem;
                padding: 0.9rem 1.75rem;
            }

            .compliance-urgency {
                font-size: 0.78rem;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .timeline-fill {
                transition: none;
            }
            .tl-item.current .tl-dot {
                animation: none;
            }
        }

        /* Blog Section */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 2rem;
        }

        .blog-card {
            padding: 2rem;
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(212, 168, 83, 0.3);
            border-radius: 8px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .blog-card:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: var(--gold);
        }

        .blog-date {
            color: var(--gold);
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
        }

        .blog-card h3 {
            color: var(--white);
            margin-bottom: 1rem;
        }

        .blog-card p {
            color: rgba(255, 255, 255, 0.8);
        }

        /* Contact Section */
        .contact-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: start;
        }

        .contact-info h2 {
            color: var(--white);
            margin-bottom: 2rem;
        }

        .office-location {
            margin-bottom: 2rem;
        }

        .office-location h4 {
            color: var(--gold);
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.5rem;
        }

        .office-location p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .contact-methods {
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .contact-methods p {
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 0.75rem;
        }

        .contact-methods a {
            color: var(--gold);
            text-decoration: none;
            font-weight: 600;
        }

        .contact-methods a:hover {
            text-decoration: underline;
        }

        /* Contact Form */
        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        

        

        

        

        

        

        .form-submit {
            align-self: flex-start;
        }

        /* ==============================
           Newsletter section (above footer)
           Brand-matched dark card with a subtle gold border + grain; sits flush so
           it visually bridges the page and the footer.
           ============================== */
        .newsletter-section {
            background: var(--navy-deeper);
            padding: 5rem 0 4rem;
            position: relative;
        }
        .newsletter-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 60% 80% at 20% 0%, rgba(234, 114, 52, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse 50% 60% at 85% 100%, rgba(234, 114, 52, 0.06) 0%, transparent 60%);
            pointer-events: none;
        }
        .newsletter-card {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
            gap: 3.5rem;
            align-items: center;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(234, 114, 52, 0.22);
            border-radius: 18px;
            padding: 3rem 3.25rem;
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }
        .newsletter-eyebrow {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.22em;
            color: var(--gold);
            margin-bottom: 1rem;
        }
        .newsletter-copy h2 {
            color: var(--white);
            font-size: clamp(1.75rem, 2.6vw, 2.25rem);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -0.01em;
            margin: 0 0 1rem;
        }
        .newsletter-copy p {
            color: rgba(255, 255, 255, 0.75);
            font-size: 1rem;
            line-height: 1.55;
            margin: 0;
            max-width: 42ch;
        }
        .newsletter-form {
            min-width: 0;
        }
        /* Let Constant Contact's widget render with its own internal styling --
           earlier attempts to force dark inputs inverted text color against CC's
           white card wrapper, which made the user's typed characters invisible.
           CC's default styling is legible on its own card and sits cleanly inside
           our dark brand section. */
        .newsletter-form .ctct-inline-form {
            border-radius: 12px;
            overflow: hidden;
        }
        /* Brand the CC submit button -- CC's default is blue, the only blue
           element on the site. Scoped to the button ONLY (element selector, so
           it works regardless of CC's class names); inputs deliberately keep
           CC's own styling so typed text stays legible on CC's white card per
           the note above. Token matches the site header CTA (#B54E1C, 5.16:1
           with white = WCAG AA). */
        .newsletter-form .ctct-inline-form button,
        .newsletter-form .ctct-inline-form input[type="submit"],
        .newsletter-form .ctct-inline-form button[type="submit"] {
            background-color: var(--accent-button) !important;
            border-color: var(--accent-button) !important;
            color: #ffffff !important;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
        }
        .newsletter-form .ctct-inline-form button:hover,
        .newsletter-form .ctct-inline-form input[type="submit"]:hover,
        .newsletter-form .ctct-inline-form button[type="submit"]:hover {
            background-color: var(--accent-button-hover) !important;
            border-color: var(--accent-button-hover) !important;
        }

        /* Hide reCAPTCHA badge — CTCT widget loads it but it crowds mobile UI.
           Google ToS allows hiding it when a disclosure is present near the form. */
        .grecaptcha-badge { visibility: hidden !important; }

        @media (max-width: 860px) {
            .newsletter-section { padding: 3.5rem 0 3rem; }
            .newsletter-card {
                grid-template-columns: 1fr;
                gap: 2rem;
                padding: 2rem 1.5rem;
            }
            .newsletter-copy p { max-width: none; }
        }

        /* ==========================================================================
           3D Building Explorer: lazy-load placeholder + loading state
           Placeholder covers the canvas area until the heavy Three.js bundle has
           been fetched and booted. Fades out cleanly once the canvas is live; stays
           visible as a fallback if the scripts fail to load (see lazy loader JS).
           ========================================================================== */
        #model-container .model-placeholder {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 4;
            opacity: 1;
            transition: opacity 0.5s ease-out;
            will-change: opacity;
        }
        #model-container .model-placeholder.is-hidden {
            opacity: 0;
            pointer-events: none;
        }
        #model-container .model-loading-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            z-index: 5;
            background: rgba(4, 14, 28, 0.55);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }
        #model-container .model-loading-overlay.is-active { opacity: 1; }
        #model-container .model-loading-spinner {
            width: 36px;
            height: 36px;
            border: 3px solid rgba(255, 255, 255, 0.18);
            border-top-color: var(--gold);
            border-radius: 50%;
            animation: modelSpin 0.9s linear infinite;
        }
        #model-container .model-loading-text {
            color: #fff;
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
        }
        @keyframes modelSpin { to { transform: rotate(360deg); } }
        /* Hard-fail state: script load failed -- remove spinner, retain placeholder */
        #model-container[data-load-failed="true"] .model-loading-overlay { display: none; }
        @media (prefers-reduced-motion: reduce) {
            #model-container .model-loading-spinner { animation-duration: 2s; }
        }

        /* ==========================================================================
           Scroll-trap protector for the 3D Building Explorer
           Lives on top of the canvas on mobile only. Blocks touches until the user
           explicitly taps-in, so vertical swipes to scroll the page are never
           hijacked by OrbitControls rotating the model.
           ========================================================================== */
        @media (max-width: 768px) {
            .be-canvas-wrap,
            .canvas-container {
                position: relative;
            }

            .canvas-protector-overlay {
                position: absolute;
                inset: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 0.75rem;
                padding: 2rem 1.5rem;

                background: rgba(4, 14, 28, 0.62);
                backdrop-filter: blur(2px) saturate(1.1);
                -webkit-backdrop-filter: blur(2px) saturate(1.1);
                color: #ffffff;
                font-family: 'Inter', system-ui, sans-serif;
                border: none;
                cursor: pointer;

                /* Stack above every canvas UI (vignette, toolbar, info panel) */
                z-index: 50;

                /* CRITICAL: intercept every pointer event.
                   Canvas beneath cannot be touched while this is active. */
                pointer-events: auto;
                touch-action: manipulation;

                opacity: 1;
                transition: opacity 0.35s ease, visibility 0.35s ease;
                -webkit-tap-highlight-color: transparent;
            }

            /* Dismissed: fully transparent AND non-blocking so canvas wakes up */
            .canvas-protector-overlay.is-dismissed {
                opacity: 0;
                pointer-events: none;
                visibility: hidden;
            }

            .canvas-protector-icon {
                color: var(--gold);
                opacity: 0.95;
                animation: protectorTapPulse 2.4s ease-in-out infinite;
                filter: drop-shadow(0 4px 12px rgba(234, 114, 52, 0.35));
            }

            .canvas-protector-label {
                font-size: 1rem;
                font-weight: 700;
                letter-spacing: 0.02em;
                text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
                max-width: 18ch;
                text-align: center;
                line-height: 1.3;
            }

            .canvas-protector-subtle {
                font-size: 0.8rem;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.65);
                letter-spacing: 0.04em;
            }

            @keyframes protectorTapPulse {
                0%, 100% { transform: translateY(0) scale(1); opacity: 0.95; }
                50%      { transform: translateY(-3px) scale(1.06); opacity: 1; }
            }

            @media (prefers-reduced-motion: reduce) {
                .canvas-protector-icon { animation: none; }
                .canvas-protector-overlay { transition: opacity 0.15s linear; }
            }
        }

        /* Desktop: never show the protector -- pointer precision makes it unnecessary */
        @media (min-width: 769px) {
            .canvas-protector-overlay { display: none !important; }
        }

        /* Footer */
        footer {
            background-color: var(--navy);
            color: var(--white);
            padding: 3rem 0 1rem;
            border-top: 1px solid rgba(212, 168, 83, 0.2);
        }


        /* Responsive */
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }

            h2 {
                font-size: 1.75rem;
            }

            h3 {
                font-size: 1.25rem;
            }

            p {
                font-size: 0.95rem;
            }

            .container {
                padding: 0 1.5rem;
            }

            .logo img {
                height: 52px !important;
                width: auto !important;
            }

            .header-content {
                padding: 0.75rem 0.75rem;
                gap: 0.5rem;
                align-items: center;
            }

            .hamburger {
                display: flex;
                align-items: center;
            }

            /* Mobile nav (horizontal, readable) inherits from style.css */

            /* Hero Section */
            .hero {
                padding-top: 110px;
            }

            .hero-content {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            /* Hide the decorative gold hairline on mobile -- at narrow widths it collides
               with the sticky header. The frosted glass backdrop is also pulled in so it
               can't overflow past the viewport edges. */
            .hero-content::after {
                display: none;
            }
            .hero-content::before {
                inset: -4% -6%;
                backdrop-filter: blur(8px) saturate(1.1) brightness(0.94);
                -webkit-backdrop-filter: blur(8px) saturate(1.1) brightness(0.94);
            }

            .hero h1 {
                font-size: 2.5rem;
                line-height: 1.15;
                margin-bottom: 1rem;
            }

            .hero p {
                font-size: 0.95rem;
                margin-bottom: 1.5rem;
                line-height: 1.4;
                letter-spacing: 0.08em;
                white-space: normal;
                padding: 0 15px;
                text-align: center;
            }

            .btn-primary,
            .btn-outline {
                width: 100%;
                text-align: center;
                padding: 0.9rem 1.5rem;
                font-size: 0.9rem;
            }

            /* Featured Project */
            .featured-project {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .featured-project-image {
                order: 1;
            }

            .featured-project-content {
                order: 2;
            }

            /* Why CSI Grid */
            .why-csi-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .why-csi-card {
                padding: 1.5rem;
            }

            .why-csi-card h3 {
                font-size: 1.2rem;
                margin-bottom: 0.5rem;
            }

            /* Blog Grid */
            .blog-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .blog-card {
                margin-bottom: 0;
            }

            .blog-card h3 {
                font-size: 1.15rem;
                margin-bottom: 0.75rem;
            }

            /* Contact Wrapper */
            .contact-wrapper {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .contact-info {
                order: 1;
                padding: 1.5rem;
            }

            .contact-form {
                order: 2;
            }

            /* FAQ Section */
            .faq-item {
                margin-bottom: 1rem;
            }

            .faq-question {
                padding: 1rem;
                font-size: 0.95rem;
            }

            .faq-answer {
                padding: 1rem;
                font-size: 0.9rem;
            }


            /* Section padding on mobile */
            .section-navy,
            .section-dark,
            .section-light {
                padding: 3rem 0;
            }

            .section-label {
                font-size: 0.75rem;
            }

            /* Contact form inputs */
            input[type="text"],
            input[type="email"],
            input[type="phone"],
            textarea {
                font-size: 1rem;
                padding: 0.85rem;
                width: 100%;
                border-radius: 4px;
                border: 1px solid rgba(255, 255, 255, 0.2);
            }

            textarea {
                resize: vertical;
                min-height: 120px;
            }

            /* Featured Project Image */
            .featured-image {
                border-radius: 6px;
                margin-bottom: 1rem;
            }

            .featured-image img {
                width: 100%;
                height: auto;
            }

            /* Featured Project Content */
            .featured-project-content h3 {
                font-size: 1.25rem;
                margin-bottom: 0.75rem;
            }

            .featured-project-content p {
                font-size: 0.95rem;
                margin-bottom: 1rem;
            }

            .featured-meta {
                flex-direction: column;
                gap: 0.35rem;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 0 1rem;
            }

            .logo img {
                height: 44px !important;
                width: auto !important;
            }

            .header-content {
                padding: 0.65rem 0.65rem !important;
                align-items: center;
            }

            /* Small-phone nav sizing inherits from style.css */

            h1 {
                font-size: 1.5rem;
                line-height: 1.15;
                margin-bottom: 0.75rem;
            }

            h2 {
                font-size: 1.35rem;
                margin-bottom: 0.75rem;
            }

            h3 {
                font-size: 1.1rem;
            }

            p {
                font-size: 0.9rem;
                margin-bottom: 0.75rem;
            }

            .hero-content {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
                max-width: 100%;
            }

            .hero h1 {
                font-size: clamp(1.5rem, 5vw, 1.8rem);
                margin-bottom: 0.75rem;
            }

            .hero p {
                font-size: 0.95rem;
                margin-bottom: 1.25rem;
                line-height: 1.5;
                max-width: 100%;
                letter-spacing: 0.03em;
                white-space: normal;
                padding: 0 20px;
                text-align: center;
            }

            .btn-primary,
            .btn-outline {
                padding: 0.8rem 1rem;
                font-size: 0.85rem;
            }

            /* Featured Project */
            .featured-project {
                gap: 1.5rem;
            }

            .featured-project h3 {
                font-size: 1.1rem;
            }

            /* Why CSI */
            .why-csi-grid {
                gap: 1rem;
            }

            .why-csi-card {
                padding: 1rem;
            }

            .why-csi-card h3 {
                font-size: 1rem;
                margin-bottom: 0.5rem;
            }

            .why-csi-card p {
                font-size: 0.85rem;
            }

            /* Compliance Timeline */
            .tl-date {
                font-size: 0.7rem;
                padding-left: 0.5rem;
            }

            .tl-label {
                font-size: 0.78rem;
                margin-bottom: 1rem;
                padding-left: 0.5rem;
            }

            .compliance-section h2 {
                font-size: 1.35rem;
            }

            .compliance-intro {
                font-size: 0.85rem;
            }

            /* Blog Cards */
            .blog-grid {
                gap: 1.25rem;
            }

            .blog-card {
                padding: 1rem;
            }

            .blog-card h3 {
                font-size: 1rem;
                margin-bottom: 0.5rem;
            }

            .blog-card p {
                font-size: 0.85rem;
            }

            /* Contact Section */
            .contact-wrapper {
                gap: 1.5rem;
            }

            .contact-info {
                padding: 1rem;
            }

            .contact-info h3 {
                font-size: 1.1rem;
            }

            .contact-form label {
                font-size: 0.9rem;
            }

            .contact-form input,
            .contact-form textarea {
                font-size: 0.9rem;
                padding: 0.75rem;
            }

            /* FAQ */
            .faq-item {
                margin-bottom: 0.75rem;
            }

            .faq-question {
                padding: 0.75rem;
                font-size: 0.9rem;
            }

            .faq-answer {
                padding: 0.75rem;
                font-size: 0.85rem;
            }


            /* Section padding */
            .section-navy,
            .section-dark,
            .section-light {
                padding: 2.5rem 0;
            }

            .section-label {
                font-size: 0.65rem;
                margin-bottom: 0.75rem;
            }

            /* Contact form inputs on 480px */
            input[type="text"],
            input[type="email"],
            input[type="phone"],
            textarea {
                font-size: 1rem;
                padding: 0.75rem;
                border-radius: 3px;
            }

            textarea {
                min-height: 100px;
            }

            /* Featured project layout */
            .featured-project-image {
                max-width: 100%;
            }

            .featured-project-content h3 {
                font-size: 1.1rem;
            }

            .featured-project-content p {
                font-size: 0.85rem;
            }

            /* Why CSI on mobile */
            .why-csi-card p {
                line-height: 1.5;
            }

            /* Blog card image height */
            .blog-card img {
                height: 180px;
                object-fit: cover;
            }

        }

        /* Accessibility: disable all hero animations for reduced-motion users */
        @media (prefers-reduced-motion: reduce) {
            .hero-video.loaded,
            .hero-slide.active,
            .hero-lightsweep,
            .hero-glow,
            .hero-dust {
                animation: none;
            }
            .hero-progress {
                display: none;
            }
            .hero-line-inner {
                animation: none;
                transform: none;
                opacity: 1;
            }
            .hero p,
            .hero-cta,
            .hero-trust-line {
                animation: none;
                opacity: 1;
            }
        }

        /* Mobile: disable GPU-heavy animations that cause iOS jank */
        @media (max-width: 768px) {
            .hero-video.loaded {
                animation: none;
                transform: translate(-50%, -50%) scale(1);
            }
            .hero-slide.active {
                animation: none;
                transform: scale(1);
            }
            /* Cheaper effects only on mobile -- skip dust + lightsweep for battery */
            .hero-dust,
            .hero-lightsweep {
                display: none;
            }
            .hero-glow {
                animation-duration: 24s;
            }
        }

        /* Touch devices: disable sticky hover transforms */
        @media (hover: none) {
            .cta-button:hover {
                transform: none;
                box-shadow: none;
            }
            .btn-primary:hover,
            .btn-outline:hover {
                transform: none;
                box-shadow: none;
            }
            .compliance-cta .btn-primary:hover {
                transform: none;
                box-shadow: none;
            }
            .blog-card:hover {
                transform: none;
                box-shadow: none;
            }
            .trust-benefit-card:hover {
                transform: none;
            }
            .dropdown-menu a:hover {
                background-color: transparent;
                color: var(--navy);
            }
            nav a:hover {
                color: inherit;
            }
        }

        /* Scroll to top button */
        .scroll-to-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--gold);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transform: translateY(10px);
            transition: all 0.3s ease;
            z-index: 999;
            box-shadow: 0 4px 12px rgba(234, 114, 52, 0.25);
        }

        .scroll-to-top:hover {
            background: var(--accent-hover);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(234, 114, 52, 0.35);
        }

        .scroll-to-top.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        @media (max-width: 768px) {
            .scroll-to-top {
                width: 42px;
                height: 42px;
                bottom: 1.5rem;
                right: 1.5rem;
            }
        }

        /* ======== SketchUp Video Grid ======== */
        .sketchup-video-section {
            padding: 3.5rem 0;
            text-align: center;
        }
        .sketchup-video-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-top: 2rem;
        }
        .sketchup-video-card {
            background: rgba(255,255,255,0.04);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.06);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .sketchup-video-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.3);
        }
        .sketchup-video-card .video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
        }
        .sketchup-video-card .video-wrapper iframe {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            border: none;
        }
        .sketchup-video-card .card-info {
            padding: 1rem 1.25rem;
            text-align: left;
        }
        .sketchup-video-card h3 {
            font-size: 0.95rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }
        .sketchup-video-card p {
            font-size: 0.82rem;
            color: var(--text-light, #C8CDD3);
            line-height: 1.5;
        }
        @media (max-width: 768px) {
            .sketchup-video-grid { grid-template-columns: 1fr; }
            .hero { padding-bottom: 2.5rem !important; }
            .building-explorer-section { padding-top: 40px !important; }
            .sketchup-video-section { padding: 2rem 0 !important; }
            .featured-project-section { padding: 2.5rem 0 !important; }
            .faq-section { padding: 2.5rem 0 !important; }
        }

/* ---- block 2 of 3 ---- */
.stat-band { background: var(--navy-deeper, #002233); padding: var(--space-5, 4rem) 0; }
        .stat-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3, 1.5rem); text-align: center; }
        .stat-item { display: flex; flex-direction: column; gap: 0.4rem; }
        .stat-num { font-size: clamp(2.2rem, 4.2vw, 3.2rem); font-weight: 800; line-height: 1; color: #ffffff; }
        .stat-label { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.82); }
        .stat-bbb { display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none; }
        .stat-bbb .stat-num { color: #f59a63; }
        .stat-bbb:hover .stat-label { color: #ffffff; }
        .stat-bbb:focus-visible { outline: 2px solid #f59a63; outline-offset: 4px; border-radius: 4px; }
        @media (max-width: 640px) {
            .stat-band { padding: 2.5rem 0; }
            .stat-band-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
        }

/* ── Unified section-heading scale (28px fluid) — owner-approved 2026-06-16 ── */
.services-showcase h2,
.trust-authority h2,
.section-navy h2,
.compliance-section h2,
.section-light h2,
.newsletter-copy h2 {
    font-size: 1.75rem;
}
@media (max-width: 600px) {
    .services-showcase h2, .trust-authority h2, .section-navy h2, .compliance-section h2, .section-light h2, .newsletter-copy h2 { font-size: 1.4rem; }
}