/* ============================================
   SOUTHERN ELECTRIC & CONTROLS — main stylesheet
   Cinematic dark theme inspired by the JM2 reference;
   SEC red palette pulled from the app's brand tokens.
   ============================================ */

:root {
    /* SEC brand palette — single source of truth */
    --sec-red:        #D81E26;
    --sec-red-hover:  #B91820;
    --sec-red-soft:   #FF6B72;
    --sec-red-glow:   rgba(216, 30, 38, 0.35);

    /* Surfaces */
    --bg:             #0a0a0d;
    --bg-darker:      #050507;
    --bg-section:     #101015;
    --bg-card:        #16161d;
    --bg-card-hover:  #1c1c25;
    --border:         #2a2a36;

    /* Text */
    --text:           #ffffff;
    --text-soft:      #c8c8d4;
    --text-muted:     #8a8a96;

    /* Gradients used in heroes / spotlights */
    --gradient-hero:    linear-gradient(135deg, rgba(10,10,13,0.95) 0%, rgba(60,10,12,0.55) 55%, rgba(216,30,38,0.20) 100%);
    --gradient-section: linear-gradient(180deg, var(--bg) 0%, var(--bg-section) 100%);

    /* Layout / motion */
    --header-h:           110px;
    --header-h-scrolled:  76px;
    --container-max:      1400px;
    --section-pad:        110px;
    --t-fast:             0.18s ease;
    --t-smooth:           0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --t-dramatic:         0.7s cubic-bezier(0.16, 1, 0.3, 1);

    /* Shadows */
    --shadow-glow:    0 0 30px var(--sec-red-glow);
    --shadow-card:    0 10px 40px rgba(0, 0, 0, 0.5);

    /* Angled corner cut - the Arc Select shape language (see css/team-select.css).
       45-degree chamfer on the bottom-right; step the size with the surface.
       NOTE: clip-path also clips box-shadow. Only put these on shadow-free
       surfaces, or move the shadow to filter: drop-shadow() so it follows
       the cut silhouette (do not animate that filter - it repaints per frame). */
    --cut-sm: polygon(0 0, 100% 0, 100% calc(100% - 8px),  calc(100% - 8px)  100%, 0 100%);
    --cut-md: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
    --cut-lg: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Typography --- */
h1, h2, h3, h4, h5 {
    font-family: 'Oswald', 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.05;
    color: var(--text);
}
h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }
h4 { font-size: 1rem; font-weight: 700; }
h5 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; color: var(--text-soft); }
p  { color: var(--text-soft); max-width: 65ch; }
a  { color: inherit; text-decoration: none; transition: color var(--t-fast); }

/* --- Container --- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
}

/* --- Reusable bits --- */
.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sec-red-soft);
    margin-bottom: 1rem;
}
.section-eyebrow--light { color: var(--sec-red-soft); }
.section-title { max-width: 24ch; margin-bottom: 3rem; }
.section-title--light { color: var(--text); }
.accent { color: var(--sec-red-soft); }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 1.6rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: background-color var(--t-smooth), border-color var(--t-smooth), color var(--t-smooth), transform var(--t-smooth), box-shadow var(--t-smooth);
    cursor: pointer;
    border: 2px solid transparent;
}
.btn--primary {
    background: var(--sec-red);
    color: white;
    box-shadow: 0 6px 18px rgba(216, 30, 38, 0.35);
}
.btn--primary:hover { background: var(--sec-red-hover); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(216, 30, 38, 0.55); }
.btn--ghost { border-color: var(--text-soft); color: var(--text); }
.btn--ghost:hover { border-color: var(--sec-red-soft); color: var(--sec-red-soft); }
.btn--wide { width: 100%; justify-content: center; }

/* --- Loading screen — light backdrop so the SEC logo's black portions stay visible --- */
.loading-screen {
    position: fixed; inset: 0;
    background:
        radial-gradient(circle at center, #f7f5f0 0%, #e9e6df 100%);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-mark {
    font-family: 'Oswald', sans-serif;
    font-size: 5rem; font-weight: 700;
    color: var(--sec-red);
    letter-spacing: 0.1em;
    text-shadow: 0 0 40px var(--sec-red-glow);
    animation: pulse 1.6s ease-in-out infinite;
}
.loading-logo {
    max-width: 380px; width: 70%;
    filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.15));
    animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.04); } }

/* --- Header --- */
.header {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--header-h);
    z-index: 1000;
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 100%);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    transition: height var(--t-smooth), background var(--t-smooth), border-bottom-color var(--t-smooth), box-shadow var(--t-smooth);
}
.header.scrolled { height: var(--header-h-scrolled); border-bottom-color: rgba(0,0,0,0.12); background: rgba(255,255,255,0.98); box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
.header-inner {
    height: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex; align-items: center; justify-content: space-between;
}
.logo {
    display: flex; align-items: center; gap: 14px;
    color: var(--text);
    transition: opacity var(--t-fast);
}
.logo:hover { opacity: 0.85; }
.logo-img {
    width: auto;
    display: block;
    /* Display both logos at sizes that preserve their wordmarks legibly. */
}
/* The SEC logo has black ink + a red mark.  On a near-black background the black
   portions disappear.  Wrap it in a soft off-white plate so it stays readable on
   every theme background.  Padding accounts for the logo's tagline. */
.logo-img--sec {
    height: 72px;
    background: #f5f5f1;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.logo-img--ice { height: 52px; }       /* ICE logo is light-colored; reads fine on black */
.logo-divider { width: 1px; height: 56px; background: var(--border); }
.logo--footer .logo-img--sec { height: 80px; }
.logo--footer .logo-img--ice { height: 58px; }
.header.scrolled .logo-img--sec { height: 52px; }
.header.scrolled .logo-img--ice { height: 38px; }
.header.scrolled .logo-divider { height: 44px; }

.nav-list { display: flex; align-items: center; gap: 2.2rem; list-style: none; }
.nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2b2b2b;
    padding: 0.5rem 0;
    position: relative;
    transition: color var(--t-fast);
}
.nav-link::after {
    content: ''; position: absolute; bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: var(--sec-red);
    transition: width var(--t-smooth);
}
.nav-link:hover { color: var(--sec-red); }
.nav-link:hover::after { width: 100%; }
.nav-link--cta {
    padding: 0.55rem 1.2rem;
    background: var(--sec-red);
    color: white;
    border-radius: 4px;
}
.nav-link--cta:hover { background: var(--sec-red-hover); color: white; }
.nav-link--cta::after { display: none; }

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    width: 36px; height: 36px;
    flex-direction: column; justify-content: space-around;
    background: transparent; border: none; cursor: pointer; padding: 6px 0;
}
.menu-toggle span {
    display: block; width: 100%; height: 2px;
    background: #1a1a1a;
    transition: transform var(--t-smooth), opacity var(--t-smooth);
}

/* ── Light header: SEC logo needs no dark plate on white; divider goes light ── */
.header .logo-img--sec {
    background: transparent;
    box-shadow: none;
    padding: 4px 0;
}
.header .logo-divider { background: rgba(0,0,0,0.14); }

/* Mobile nav */
.nav-overlay { display: none; }
.mobile-nav { display: none; }

/* --- HERO ---
   Full-width banner strip with aspect-ratio 1920/500 — same aspect as the
   video, so EVERYTHING inside (gradient bg, logo, video) scales together at
   every viewport width.  The logo always sits at the same proportional
   position whether the banner is 1920px or 800px wide.
   After the video ends, the logo slides to the right and the text slides
   in from the left so they sit side-by-side. */
.hero {
    position: relative;
    width: 100%;
    padding-top: var(--header-h);
    overflow: hidden;
    background: #0a0a0d;
}

/* Layer 0 — full-bleed gradient.  Page-level background that extends behind
   the banner; relevant on the mobile stack where text sits below the banner. */
.hero-bg {
    position: absolute; inset: 0;
    background: url('../Images/Gradient.webp') center center / cover no-repeat;
    z-index: 0;
}

/* Layer 1 — the banner strip.  Width follows the viewport, height comes from
   the aspect ratio.  All children are absolutely positioned and scale with
   the strip — so the banner height ALWAYS equals the video's rendered height,
   and the gradient behind matches it exactly. */
.hero-strip {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 500;
    overflow: hidden;
    z-index: 1;
}

/* Banner background — Gradient.webp stretched to the banner's aspect so it
   matches the gradient baked into the video's final frame.  When the video
   fades to 0, this is what's underneath at the exact same height. */
.hero-banner-bg {
    position: absolute; inset: 0;
    background: #fff;   /* white base — the intro fades to this (logo on white) before the drone loop fades in */
    z-index: 0;
}

/* Layer 1b — Banner-Drone.mp4 loops as the moving background, painting above
   the static gradient (same z-index, later in the DOM) but behind the logo.
   Hidden under truck2.mp4 (Layer 3) until that fades out on `ended`. */
.hero-drone {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    background: #fff;
    /* Starts hidden. After the intro fades to white, this fades in from white
       behind the logo and then loops with no further fades. */
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero-drone.is-in { opacity: 1; }

/* Layer 2 — logo lives inside a wrapper so the state-driven slide (center →
   right) and the scroll-driven shift/scale don't fight each other on the
   transform property.  Wrapper handles state, inner <img> handles scroll. */
.hero-logo-wrap {
    position: absolute;
    left: 50%; top: 50%;
    width: 40%;  /* matches the logo's width in the video's final frame */
    transform: translate(-50%, -50%);
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}
.hero.is-revealed .hero-logo-wrap {
    /* Original SE position — wrapper slides from 30–70% to 58–98% of banner. */
    transform: translate(20%, -50%);
}
.hero-logo {
    display: block;
    width: 100%; height: auto;
    transform: translate(0, var(--logo-shift, 0px)) scale(var(--logo-scale, 1));
    transform-origin: center center;
    will-change: opacity, transform;
}

/* Layer 3 — truck2.mp4 fills the strip at its native aspect (no cropping
   needed since the strip aspect matches the video).  When the intro finishes
   it FADES TO WHITE (the drone underneath is still hidden), revealing the logo
   on white; the drone loop then fades in from white behind the logo.  Because
   the hand-off goes through solid white — never two moving videos at once — the
   background doesn't flicker and the logo stays the focus. */
.hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 1;
    pointer-events: none;
    background: #fff;
    transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
.hero-video.is-finished {
    opacity: 0;
    visibility: hidden;
}

/* Hero text — absolute-overlay on the LEFT side of the banner.  Sized so
   the content fits within the banner's scaled height at any viewport ≥880px.
   Initial state: parked off-screen left.  After video ends and `.is-revealed`
   is set on `.hero`, it slides in. */
.hero-content {
    position: absolute;
    top: var(--header-h);
    /* `left:` aligns the text with the .container max-width on wide
       viewports (or sits at 1.75rem on narrow ones).  Doing this via
       `left:` not `padding-left:` is critical — padding would subtract
       from the 780px width cap and crush the text into 1-2 words per
       line on ultrawide screens. */
    left: max(1.75rem, calc((100vw - 1400px) / 2));
    bottom: 0;
    width: min(50%, 780px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
    padding: clamp(1rem, 2vw, 2rem) 1.75rem;
    z-index: 4;
    margin: 0;
    transform: translateX(-110%);
    opacity: 0;
    /* Delayed so the (light) text only slides in once the drone has faded in
       behind it — during the white "logo moment" the text would be invisible. */
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.5s,
                opacity 1.1s ease-out 1.5s;
}
.hero.is-revealed .hero-content {
    transform: translateX(0);
    opacity: 1;
}

/* Hero typography — sized to fit inside the banner's scaled height
   (banner ≈ 26vw tall; at 1280 viewport that's 333px). */
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-size: clamp(0.65rem, 0.8vw, 0.8rem);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-soft);
    font-weight: 600;
    margin-bottom: 0.8rem;
}
.hero-eyebrow .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--sec-red);
    box-shadow: 0 0 12px var(--sec-red-glow);
    animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.hero-title {
    margin-bottom: 0.9rem;
    font-size: clamp(1.1rem, 2.4vw, 2.4rem);
    line-height: 1.2;
    /* No max-width — let the title fill the hero-content width so it doesn't
       wrap into 1-2 words per line on wider screens.  The hardcoded <br>
       in the markup still controls where the two phrases break. */
}
.hero-lead {
    font-size: clamp(0.82rem, 1.05vw, 1.05rem);
    line-height: 1.55;
    margin-bottom: 1.4rem;
    color: var(--text-soft);
}
.hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hero-cta .btn { padding: 0.6rem 1.1rem; font-size: clamp(0.78rem, 0.9vw, 0.9rem); }

.scroll-cue {
    position: absolute; left: 50%; bottom: 2rem;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--text-muted);
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.9s ease-out 0.4s;
}
.hero.is-revealed .scroll-cue {
    opacity: 1;
    pointer-events: auto;
}
.scroll-cue-bar {
    width: 1px; height: 36px;
    background: linear-gradient(180deg, transparent, var(--sec-red-soft));
    animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100% { opacity: 0.4; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.4); } }

/* --- Companies section --- */
.companies { padding: var(--section-pad) 0; background: var(--bg-section); }
.company-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.company-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    clip-path: var(--cut-sm);
    padding: 2.4rem;
    transition: transform var(--t-smooth), border-color var(--t-smooth);
    position: relative; overflow: hidden;
}
.company-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 0; height: 3px;
    background: var(--sec-red);
    transition: width var(--t-smooth);
}
.company-card:hover { transform: translateY(-4px); border-color: var(--sec-red); }
.company-card:hover::before { width: 100%; }
.company-mark {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem; font-weight: 700;
    color: var(--sec-red);
    letter-spacing: 0.08em;
    line-height: 1;
    margin-bottom: 1rem;
}
.company-card--ice .company-mark { color: var(--sec-red-soft); }
.company-name { margin-bottom: 0.4rem; }
.company-tag {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 1.4rem;
}
.company-bullets {
    list-style: none;
    margin-bottom: 1.8rem;
}
.company-bullets li {
    padding: 0.55rem 0 0.55rem 1.6rem;
    position: relative;
    color: var(--text-soft);
    border-bottom: 1px solid var(--border);
}
.company-bullets li:last-child { border-bottom: none; }
.company-bullets li::before {
    content: '';
    position: absolute; left: 0; top: 1.1rem;
    width: 10px; height: 2px;
    background: var(--sec-red);
}
.company-link {
    font-size: 0.9rem; font-weight: 600;
    color: var(--sec-red-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color var(--t-fast);
}
.company-link:hover { color: var(--text); }

/* --- Memberships & certifications badge strip --- */
.affiliations {
    padding: 4rem 0 4.5rem;
    background: var(--bg-section);
    text-align: center;
    content-visibility: auto;
    contain-intrinsic-size: auto 380px;
}
.affiliations-lead {
    max-width: 720px;
    margin: 0.9rem auto 2.2rem;
    color: var(--text-soft);
}
.affiliations-lead strong { color: var(--text); }
.affiliation-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
}
.affiliation-badge {
    display: flex; align-items: center; justify-content: center;
    height: 112px;
    min-width: 170px;
    padding: 1rem 1.6rem;
    background: #f5f5f7;   /* light tile — the badge art was drawn for white */
    clip-path: var(--cut-md);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
    transition: transform var(--t-smooth);
}
.affiliation-badge:hover {
    transform: translateY(-4px);
}
.affiliation-badge img {
    max-height: 80px;
    max-width: 200px;
    object-fit: contain;
}
@media (max-width: 900px) {
    .affiliation-badge { height: 96px; min-width: 140px; padding: 0.8rem 1.2rem; }
    .affiliation-badge img { max-height: 66px; max-width: 160px; }
}

/* --- Three-company explorer (SEC / ICE / SDG panels) --- */
.co-stage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-top: 3rem;
}
.co-panel {
    position: relative;
    height: min(560px, 64vh);
    border: 1px solid transparent;
    clip-path: var(--cut-lg);
    overflow: hidden;
    /* per-company palette (overridden below) */
    --co-c1: var(--sec-red);
    --co-c2: rgba(216, 30, 38, 0.30);
    --co-glow1: rgba(216, 30, 38, 0.15);
    --co-glow2: rgba(120, 10, 14, 0.10);
    /* card surface + gradient border in the company colors */
    background:
        linear-gradient(180deg, var(--bg-card), var(--bg-darker)) padding-box,
        linear-gradient(165deg, var(--co-c1), var(--border) 32%, var(--border) 68%, var(--co-c2)) border-box;
    transition: transform var(--t-smooth), box-shadow var(--t-smooth);
}
.co-panel--sec { --co-c1: #d81e26; --co-c2: rgba(216, 30, 38, 0.35); --co-glow1: rgba(216, 30, 38, 0.16); --co-glow2: rgba(120, 10, 14, 0.10); }
.co-panel--ice { --co-c1: #2f7bff; --co-c2: rgba(255, 122, 20, 0.50); --co-glow1: rgba(47, 123, 255, 0.14); --co-glow2: rgba(255, 122, 20, 0.10); }
.co-panel--sdg { --co-c1: #ff5b62; --co-c2: rgba(190, 198, 212, 0.40); --co-glow1: rgba(216, 30, 38, 0.13); --co-glow2: rgba(150, 160, 180, 0.08); }
/* ambient company glow + faint schematic grid */
.co-panel::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse at 18% 0%, var(--co-glow1), transparent 55%),
        radial-gradient(ellipse at 85% 100%, var(--co-glow2), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 42px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 42px);
    opacity: 0.85;
    transition: opacity 0.5s ease;
}
/* ghost watermark logo, upper right */
.co-panel::after {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background: var(--co-ghost, none) no-repeat right -14% top -4% / 62%;
    opacity: 0.05;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.co-panel--sec::after { --co-ghost: url('../assets/images/logos/ghost-sec.webp'); }
.co-panel--ice::after { --co-ghost: url('../assets/images/logos/ghost-ice.webp'); }
.co-panel--sdg::after { --co-ghost: url('../assets/images/logos/ghost-sdg.webp'); }
.co-panel:hover::before,
.co-panel:focus-within::before { opacity: 1; }
.co-panel:hover::after,
.co-panel:focus-within::after { opacity: 0.09; }
.co-panel:hover,
.co-panel:focus-visible {
    transform: translateY(-6px);
    outline: none;
}
/* Face: big brand logo by default; the description crossfades in over it
   on hover (same pattern as the project cards' logo→image swap) */
.co-face {
    position: absolute;
    inset: 0 0 150px 0;   /* leave room for the totem strip */
    z-index: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.co-face-logo {
    max-width: 86%;
    max-height: 76%;
    object-fit: contain;
    opacity: 0.95;
    /* soft white halo so dark logo art reads against the dark card.
       PERF: the filter stays CONSTANT (only opacity/transform animate on
       hover), so the filtered result is rendered once and then composited —
       animating blur/drop-shadow here caused per-frame repaints. */
    filter:
        drop-shadow(0 0 2px rgba(255, 255, 255, 0.45))
        drop-shadow(0 0 20px rgba(255, 255, 255, 0.28));
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.co-panel:hover .co-face-logo,
.co-panel:focus-within .co-face-logo {
    opacity: 0.04;
    transform: scale(0.95);
}
.co-face-desc {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 2rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}
.co-panel:hover .co-face-desc,
.co-panel:focus-within .co-face-desc {
    opacity: 1;
    transform: none;
}
/* Totem: the small animated selector at the bottom center — grows and
   glows on hover; it IS the click target */
.co-totem {
    position: absolute;
    left: 50%; bottom: 1.3rem;
    transform: translateX(-50%);
    width: 180px; height: 120px;
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; padding: 0;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
    filter: drop-shadow(0 0 0 rgba(216, 30, 38, 0));
}
/* the totem's stage: a soft company-colored pool of light it sits on */
.co-totem::before {
    content: '';
    position: absolute;
    left: 50%; bottom: -10px;
    transform: translateX(-50%);
    width: 145%; height: 30px;
    border-radius: 50%;
    background: radial-gradient(ellipse, var(--co-glow1), transparent 68%);
    opacity: 0.9;
    transition: opacity 0.35s ease, width 0.35s ease;
    pointer-events: none;
}
.co-totem:hover::before,
.co-totem:focus-visible::before {
    opacity: 1;
    width: 175%;
}
.co-totem:hover,
.co-totem:focus-visible {
    transform: translateX(-50%) scale(1.15);
    filter: drop-shadow(0 0 16px rgba(216, 30, 38, 0.55));
    outline: none;
}
.co-totem-img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    /* lighter version of the face halo — keeps the small dark marks legible */
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.4))
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.22));
}
.co-totem canvas { width: 100%; height: 100%; display: block; }
.co-totem-spin { animation: coCoinSpin 7s linear infinite; }
@keyframes coCoinSpin {
    from { transform: perspective(700px) rotateY(0deg); }
    to   { transform: perspective(700px) rotateY(360deg); }
}
.co-mark {
    font-family: 'Oswald', sans-serif;
    font-size: 2.4rem; font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--sec-red);
    line-height: 1;
}
.co-name {
    font-size: 1.15rem;
    margin: 0.4rem 0 0.5rem;
}
.co-tag {
    font-size: 0.92rem;
    color: var(--text-soft);
    margin-bottom: 1rem;
}
.co-cta {
    font-size: 0.85rem; font-weight: 600;
    color: var(--sec-red-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color var(--t-fast);
}
.co-panel:hover .co-cta { color: var(--text); }

/* --- Explore drawer (right slide-over) --- */
.explore-scrim {
    position: fixed; inset: 0;
    z-index: 1400;   /* above the fixed header (1000) */
    background: rgba(5, 5, 7, 0.65);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.explore-scrim.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    backdrop-filter: blur(4px);
}
.explore-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    z-index: 1401;   /* above the scrim, below the loading screen */
    width: min(620px, 94vw);
    background: var(--bg-darker);
    border-left: 1px solid var(--border);
    box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
    transform: translateX(102%);
    /* visibility too — so nothing (e.g. the tow's page-shake overriding
       transforms on body children) can ever flash it into view while closed */
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
    overflow-y: auto;
    padding: 3.2rem 2.4rem 3rem;
}
.explore-drawer.is-open { transform: translateX(0); visibility: visible; }
.explore-close {
    /* sticky, so the X rides along as the drawer content scrolls */
    position: sticky; top: 0.8rem;
    display: block;
    margin: -2rem -1rem -44px auto;   /* sit in the top-right; don't push content down */
    width: 44px; height: 44px;
    font-size: 1.8rem; line-height: 1;
    color: var(--text-soft);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.explore-close:hover { color: var(--text); border-color: var(--sec-red); }
.explore-head { margin-bottom: 1.4rem; }
.explore-head h3 {
    font-size: 1.6rem;
    margin: 0.5rem 0 0.2rem;
}
.explore-tagline {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.explore-content > p { color: var(--text-soft); margin-bottom: 1.6rem; }
.explore-acc {
    border-top: 1px solid var(--border);
    padding: 0.2rem 0;
}
.explore-acc:last-child { border-bottom: 1px solid var(--border); }
.explore-acc summary {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1rem;
    padding: 0.9rem 0;
    cursor: pointer;
    list-style: none;
    position: relative;
}
.explore-acc summary::-webkit-details-marker { display: none; }
.explore-acc summary::after {
    content: '+';
    position: absolute; right: 0.2rem;
    color: var(--sec-red-soft);
    transition: transform var(--t-fast);
}
.explore-acc[open] summary::after { content: '–'; }
.explore-acc > *:not(summary) { margin-bottom: 1rem; }
.explore-acc .company-link { display: inline-block; margin: 0.2rem 0 1rem; }
.explore-acc p { color: var(--text-soft); }
.explore-acc .btn { margin: 0.4rem 0 1.2rem; }
/* Honeywell badge inside the drawer — the section's badge-ring, scaled down */
.explore-badge { display: flex; justify-content: center; padding: 0.6rem 0 1rem; }
.explore-badge .badge-ring { width: 200px; height: 200px; }
.explore-badge .badge-num { font-size: 1.4rem; }
.explore-badge .badge-logo { height: 32px; }

@media (max-width: 900px) {
    .co-stage { grid-template-columns: 1fr; gap: 1.2rem; }
    .co-panel { height: 480px; }
    .co-mark { font-size: 2rem; }
    .co-tag { font-size: 0.88rem; }
}
/* Touch devices have no hover: keep the description permanently visible
   with the brand logo dimmed to a backdrop behind it */
@media (hover: none) {
    .co-face-logo { opacity: 0.10; }
    .co-face-desc { opacity: 1; transform: none; }
}

/* --- Services --- */
.services { padding: var(--section-pad) 0; background: var(--bg); }
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}
.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    clip-path: var(--cut-md);
    padding: 2rem;
    transition: background-color var(--t-smooth), border-color var(--t-smooth), transform var(--t-smooth);
}
.service-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--sec-red);
    transform: translateY(-3px);
}
.service-icon {
    width: 56px; height: 56px;
    border-radius: 8px;
    background: rgba(216, 30, 38, 0.12);
    color: var(--sec-red-soft);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.4rem;
    transition: background-color var(--t-smooth), color var(--t-smooth);
}
.service-icon svg { width: 28px; height: 28px; }
.service-card:hover .service-icon {
    background: var(--sec-red);
    color: white;
}
.service-card h3 { margin-bottom: 0.7rem; }
/* Cards tagged by js/company-panels.js open a company drawer — show it */
.service-card[data-open-drawer] { cursor: pointer; }
.service-card[data-open-drawer]::after {
    content: 'More \2192';
    display: inline-block;
    margin-top: 1.1rem;
    font-size: 0.8rem; font-weight: 600;
    color: var(--sec-red-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.55;
    transition: opacity var(--t-fast), transform var(--t-fast);
}
.service-card[data-open-drawer]:hover::after,
.service-card[data-open-drawer]:focus-visible::after { opacity: 1; transform: translateX(4px); }

/* --- Automation spotlight --- */
.automation {
    position: relative;
    padding: var(--section-pad) 0;
    overflow: hidden;
}
.automation-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 80% 30%, rgba(216, 30, 38, 0.22) 0%, transparent 50%),
        var(--bg-section);
}
.automation-inner {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    align-items: center;
}
.automation-text p { margin-bottom: 1.6rem; font-size: 1.05rem; }
.automation-bullets { list-style: none; margin-bottom: 2rem; }
.automation-bullets li {
    padding: 0.7rem 0 0.7rem 1.8rem;
    position: relative;
    color: var(--text-soft);
    border-top: 1px solid var(--border);
}
.automation-bullets li:last-child { border-bottom: 1px solid var(--border); }
.automation-bullets li::before {
    content: '✓';
    position: absolute; left: 0; top: 0.65rem;
    color: var(--sec-red-soft);
    font-weight: 700;
}
.automation-bullets strong { color: var(--text); margin-right: 0.4rem; }
.automation-badge { display: flex; justify-content: center; }
.badge-ring {
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle at center, var(--sec-red) 0%, var(--sec-red-hover) 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow:
        0 0 40px var(--sec-red-glow),
        inset 0 0 30px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: gentleFloat 6s ease-in-out infinite;
}
.badge-ring::before {
    content: ''; position: absolute; inset: 10px;
    border: 2px dashed rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: spinSlow 30s linear infinite;
}
@keyframes gentleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.badge-content { text-align: center; color: white; }
.badge-line {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0.9;
}
.badge-num {
    font-family: 'Oswald', sans-serif;
    font-size: 1.9rem; font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0.3rem 0;
}
.badge-logo {
    height: 42px;
    width: auto;
    margin-bottom: 0.6rem;
    filter: brightness(0) invert(1);   /* Honeywell logo to white */
}

/* --- ICE Industrial Controls spotlight (3D panel viewer) --- */
.controls-spotlight {
    position: relative;
    padding: var(--section-pad) 0;
    overflow: hidden;
}
.controls-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 15% 65%, rgba(216, 30, 38, 0.14) 0%, transparent 55%),
        var(--bg);
}
/* Full-width cinematic stage: the canvas fills the whole section, the 3D
   panel sits left-of-center, and the text overlays the right side */
.controls-inner {
    position: relative; z-index: 2;
    min-height: 86vh;
}
.controls-viewer {
    position: absolute; inset: 0;    /* the whole stage is the viewer */
    cursor: grab;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 2;
}
.controls-viewer.is-dragging { cursor: grabbing; }
.controls-text {
    position: absolute;
    right: 1%; top: 50%;
    transform: translateY(-50%);
    width: min(500px, 44%);
    z-index: 3;
}
/* During the intro the canvas sits ABOVE the text: the splash + panel
   physically cover it, and the camera pull-back unveils it as the panel
   shrinks away. Afterwards the text goes back on top so its CTA is clickable. */
.controls-spotlight.is-intro .controls-viewer { z-index: 4; }
.controls-spotlight.is-intro .controls-hint { opacity: 0; }
.controls-viewer.is-loaded { opacity: 1; }
.controls-viewer.is-failed { display: none; }
.controls-viewer canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
}
.controls-hint {
    position: absolute; left: 50%; bottom: 4%;
    transform: translateX(-50%);
    padding: 0.45rem 1.2rem;
    font-size: 0.85rem;
    color: var(--text-soft);
    background: rgba(22, 22, 29, 0.75);
    border: 1px solid var(--border);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.5s ease;
}
.controls-hint .hint-touch { display: none; }
@media (hover: none) {
    .controls-hint .hint-desktop { display: none; }
    .controls-hint .hint-touch { display: inline; }
}
.controls-viewer.is-open .controls-hint,
.controls-hint.is-dismissed { opacity: 0; }
.controls-text p { margin-bottom: 1.6rem; font-size: 1.05rem; color: var(--text-soft); }
@media (max-width: 900px) {
    /* stacked: viewer on top, text below (no overlay tricks) */
    .controls-inner { min-height: 0; }
    .controls-viewer { position: relative; inset: auto; height: 62vh; }
    .controls-text {
        position: static;
        transform: none;
        width: auto;
        margin-top: 2rem;
    }
}

/* --- Southern Design Group spotlight ---
   Section bg is a white "spotlight" with a thin dark vignette at the edges
   so the section reads as a bright card framed by the surrounding dark
   sections.  Default ellipse sizing extends to the farthest corner — so
   the corners land on `transparent` (revealing the dark layer beneath),
   the edges feather, and the center stays solid white. */
.design-group {
    position: relative;
    overflow: hidden;
    background: var(--bg-darker);
}
/* The white "spotlight" now lives on the intro wrapper only, so the
   creations showcase below it sits on the dark base. */
.design-group-intro {
    position: relative;
    padding: var(--section-pad) 0;
    background:
        radial-gradient(
            ellipse at center,
            #ffffff 0%,
            #ffffff 68%,
            transparent 100%
        ),
        var(--bg-darker);
}
/* Visual is absolutely positioned so it can fill the full section height
   from edge to edge, ignoring the section's vertical padding. */
.design-group-visual {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}
.design-group-bim {
    height: 100%;
    width: auto;        /* aspect (≈ 1:1) → width tracks height */
    max-width: 50vw;    /* never let the BIM eat past half the viewport */
    display: block;
    object-fit: contain;
    object-position: left center;
}
/* SDG logo overlays the BIM image — bottom-centered with a touch of overhang.
   `left: 15%` centers a 70%-wide element without using `translateX(-50%)`,
   which would conflict with the data-reveal transform. */
.design-group-logo {
    position: absolute;
    left: 15%;
    bottom: 6%;
    width: 70%;
    max-width: 360px;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.35));
}
/* The container holds only the text now; flex-end pushes it to the right
   half of the viewport so it sits cleanly on the dark side of the gradient. */
.design-group-inner {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
}
.design-group-text {
    width: 55%;
    max-width: 640px;
}
/* Text colors flipped for the white spotlight background. */
.design-group .section-eyebrow { color: rgba(10, 10, 13, 0.55); }
.design-group .section-title   { color: #0a0a0d; }
.design-group-text p {
    margin-bottom: 1.6rem;
    font-size: 1.05rem;
    color: rgba(10, 10, 13, 0.72);
    line-height: 1.7;
}
.design-group-bullets { list-style: none; margin-bottom: 2rem; }
.design-group-bullets li {
    padding: 0.7rem 0 0.7rem 1.8rem;
    position: relative;
    color: rgba(10, 10, 13, 0.72);
    border-top: 1px solid rgba(10, 10, 13, 0.12);
}
.design-group-bullets li:last-child { border-bottom: 1px solid rgba(10, 10, 13, 0.12); }
.design-group-bullets li::before {
    content: '✓';
    position: absolute; left: 0; top: 0.65rem;
    color: var(--sec-red);
    font-weight: 700;
}
.design-group-bullets strong { color: #0a0a0d; margin-right: 0.4rem; }

/* --- Industries strip --- */
.industries {
    padding: 50px 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.industries-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sec-red-soft);
    margin-bottom: 1.2rem;
    text-align: center;
}
.industries-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.6rem;
}
.industries-strip span {
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    padding: 0.3rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    transition: background-color var(--t-smooth), border-color var(--t-smooth), color var(--t-smooth);
}
.industries-strip span:hover {
    border-color: var(--sec-red);
    color: var(--text);
    background: var(--bg-card-hover);
}

/* --- Stats --- */
.stats { padding: 80px 0; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}
.stat {
    background: var(--bg);
    padding: 2rem 1rem;
    text-align: center;
}
.stat-num {
    font-family: 'Oswald', sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--sec-red);
    line-height: 1;
    margin-bottom: 0.6rem;
}
.stat-num--sm { font-size: 1.8rem; color: var(--sec-red-soft); }
.stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

/* --- Service area / licensed-states map --- */
.service-area {
    position: relative;
    overflow: hidden;
    padding: var(--section-pad) 0;
    background: var(--bg-section);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
/* the real office, full colour on the left, fading to the section's black so
   the map reads clearly on the right */
.service-area-photo {
    position: absolute; inset: 0; z-index: 0;
    background: url('../assets/images/sec/our-office.webp') left center / cover no-repeat;
}
.service-area-photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right,
        rgba(8, 9, 12, 0.5) 0%,
        rgba(8, 9, 12, 0.32) 26%,
        rgba(10, 11, 15, 0.4) 42%,
        var(--bg-section) 62%,
        var(--bg-section) 100%);
}
.service-area-inner { position: relative; z-index: 1; }
.service-area-text { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65); }
.service-area .service-area-lead { color: #d9dbe0; }
.service-area .service-area-note { color: #b7bac1; }
.service-area-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3.5rem;
    align-items: center;
}
.service-area-lead { color: var(--text-soft); font-size: 1.02rem; line-height: 1.7; margin: 1.2rem 0 1rem; }
.service-area-note { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.4rem; }
.service-area-legend {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-soft);
}
.service-area-legend .swatch {
    width: 15px; height: 15px; border-radius: 3px;
    background: var(--sec-red); box-shadow: 0 0 10px var(--sec-red-glow);
}

.usmap-wrap { width: 100%; }
.usmap-svg {
    width: 100%; height: auto; display: block; overflow: visible;
    filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.55));
}
.usmap-svg .st  { fill: #232b38; stroke: #0c0e13; stroke-width: 1; transition: fill 0.25s; }
.usmap-svg .svc { fill: #2c3543; }                 /* dimmed until the map scrolls in */
.usmap-wrap.is-visible .svc {
    animation: stateLight 0.5s ease forwards;
    animation-delay: calc(var(--i, 0) * 0.05s);
}
@keyframes stateLight {
    0%   { fill: #2c3543; }
    55%  { fill: #ff5b62; }
    100% { fill: var(--sec-red); }
}
.usmap-svg .svc:hover { fill: #ff5b62; }
.usmap-hq { fill: #fff; opacity: 0; }
.usmap-wrap.is-visible .usmap-hq {
    opacity: 1;
    animation: hqPulse 2.2s ease-in-out 1.5s infinite;
}
@keyframes hqPulse {
    0%, 100% { r: 4.5; opacity: 0.95; }
    50%      { r: 7;   opacity: 0.5; }
}
@media (max-width: 880px) {
    .service-area-inner { grid-template-columns: 1fr; gap: 2.2rem; }
    /* stacked: photo sits behind the text up top, fading down to black */
    .service-area-photo { background-position: top center; }
    .service-area-photo::after {
        background: linear-gradient(to bottom,
            rgba(8, 9, 12, 0.45) 0%,
            rgba(8, 9, 12, 0.4) 28%,
            var(--bg-section) 60%,
            var(--bg-section) 100%);
    }
}

/* --- Projects --- */
.projects { padding: var(--section-pad) 0; background: var(--bg-section); }
.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    margin-bottom: 3rem;
}
.project-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    clip-path: var(--cut-md);
    overflow: hidden;
    transition: transform var(--t-smooth), border-color var(--t-smooth);
}
.project-card:hover { transform: translateY(-4px); border-color: var(--sec-red); }
.project-img {
    aspect-ratio: 16 / 10;
    background: #16161d center / cover no-repeat;
    position: relative;
    overflow: hidden;
    transition: transform var(--t-dramatic);
}
.project-img::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(10, 10, 13, 0.85) 100%);
    pointer-events: none;
}
.project-card:hover .project-img { transform: scale(1.04); }
.project-tag {
    position: absolute; top: 1rem; left: 1rem;
    z-index: 2;
    padding: 0.3rem 0.8rem;
    background: rgba(216, 30, 38, 0.92);
    color: white;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    border-radius: 3px;
}
.project-card h3 { padding: 1.4rem 1.4rem 0.5rem; }
.project-card p { padding: 0 1.4rem 1.4rem; font-size: 0.95rem; }
/* Big centered "Be our next project" call-to-action */
.projects-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}
.projects-cta-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.2rem 3rem;
    border-radius: 6px;
    background: var(--sec-red);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 2.6vw, 1.6rem);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    box-shadow: 0 10px 30px var(--sec-red-glow);
    animation: ctaPulse 2.4s ease-in-out infinite;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.projects-cta-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
}
.projects-cta-btn:hover,
.projects-cta-btn:focus-visible {
    background: var(--sec-red-hover);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 16px 46px rgba(216, 30, 38, 0.7);
    animation-play-state: paused;
    outline: none;
}
.projects-cta-btn:hover .projects-cta-arrow,
.projects-cta-btn:focus-visible .projects-cta-arrow { transform: translateX(7px); }

/* periodic shine sweep across the button */
.projects-cta-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -130%;
    width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    animation: ctaShine 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 10px 30px var(--sec-red-glow); }
    50%      { box-shadow: 0 14px 44px rgba(216, 30, 38, 0.66); }
}
@keyframes ctaShine {
    0%        { left: -130%; }
    55%, 100% { left: 130%; }
}

/* --- About --- */
.about { padding: var(--section-pad) 0; background: var(--bg); }
.about-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: start;
}
.about-text p { margin-bottom: 1.2rem; font-size: 1.05rem; }
.about-callouts { display: grid; gap: 1rem; }
.callout {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--sec-red);
    padding: 1.4rem 1.6rem;
    clip-path: var(--cut-sm);
    position: relative;
}
.callout-num {
    position: absolute; top: 1rem; right: 1.2rem;
    font-family: 'Oswald', sans-serif;
    font-size: 2.4rem; font-weight: 700;
    color: var(--sec-red);
    opacity: 0.18;
    line-height: 1;
}
.callout h4 { margin-bottom: 0.4rem; }
.callout p { font-size: 0.95rem; }

/* --- Contact --- */
.contact {
    padding: var(--section-pad) 0;
    background: var(--bg-darker);
    position: relative;
}
.contact-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
/* Re-center the constrained-width title and lead inside the centered header.
   Both `.section-title` (max-width 24ch) and `p` (max-width 65ch) need
   explicit auto margins to actually sit centered within their parent. */
.contact-header .section-title {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}
.contact-header p {
    margin-left: auto;
    margin-right: auto;
    color: var(--text-soft);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* Left column — contact info */
.contact-info {
    padding: 0.5rem 0;
}
.contact-info h3 {
    color: var(--sec-red-soft);
    margin-bottom: 2rem;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.contact-details {
    list-style: none;
    margin-bottom: 2rem;
    padding: 0;
}
.contact-details li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.6rem;
    color: var(--text-soft);
}
.contact-details strong {
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.contact-details svg {
    width: 24px;
    height: 24px;
    fill: var(--sec-red);
    flex-shrink: 0;
    margin-top: 2px;
}
.contact-details a {
    color: var(--text-soft);
    transition: color var(--t-fast);
}
.contact-details a:hover { color: var(--sec-red-soft); }

/* Brochure pill link sits below the contact details */
.brochure-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-soft);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.brochure-link svg {
    width: 18px;
    height: 18px;
    fill: var(--sec-red);
    transition: fill var(--t-fast);
}
.brochure-link:hover {
    border-color: var(--sec-red);
    color: var(--text);
    background: rgba(216, 30, 38, 0.08);
}

/* Right column — form card */
.contact-form-wrapper {
    background: var(--bg-card);
    padding: 2.5rem;
    clip-path: var(--cut-lg);
    border: 1px solid var(--border);
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.form-group { position: relative; }
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-soft);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    background: var(--bg-section);
    border: 2px solid transparent;
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--sec-red);
    box-shadow: 0 0 0 3px var(--sec-red-glow);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }
.form-group textarea {
    min-height: 150px;
    resize: vertical;
    line-height: 1.5;
}

/* Submit button */
.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--sec-red);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color var(--t-smooth), box-shadow var(--t-smooth), transform var(--t-smooth);
    position: relative;
    overflow: hidden;
}
.submit-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}
.submit-btn:hover {
    background: var(--sec-red-hover);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}
.submit-btn:hover::before { left: 100%; }
.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.submit-btn.loading .btn-text { opacity: 0; }
.submit-btn .spinner {
    display: none;
    width: 20px; height: 20px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    position: absolute;
}
.submit-btn.loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Form feedback message */
.form-feedback {
    padding: 1rem;
    clip-path: var(--cut-sm);
    text-align: center;
    display: none;
    font-size: 0.95rem;
}
.form-feedback.success {
    display: block;
    background: rgba(0, 200, 100, 0.15);
    border: 1px solid rgba(0, 200, 100, 0.5);
    color: #4ade80;
}
.form-feedback.error {
    display: block;
    background: rgba(216, 30, 38, 0.15);
    border: 1px solid rgba(216, 30, 38, 0.5);
    color: var(--sec-red-soft);
}

/* --- Footer --- */
.footer { background: var(--bg-darker); padding: 4rem 0 0; border-top: 1px solid var(--border); }
.footer-inner {
    display: grid;
    grid-template-columns: 1.3fr 2fr;
    gap: 4rem;
    padding-bottom: 3rem;
}
.footer-tagline { color: var(--text-muted); margin-top: 1.2rem; max-width: 38ch; }
.footer-right { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer-col ul { list-style: none; }
.footer-col li { padding: 0.4rem 0; }
.footer-col a { color: var(--text-muted); font-size: 0.92rem; }
.footer-col a:hover { color: var(--sec-red-soft); }
.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 1.4rem 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* PERF: skip layout/paint for these offscreen sections until they scroll near the viewport
   (content-visibility is Baseline 2025). contain-intrinsic-size gives a size estimate so the
   scrollbar doesn't jump; "auto" makes the browser remember the real size after first render.
   The hero, companies (near top) and #about (live canvas) are intentionally excluded. */
.services, .projects, .stats, .contact, .footer,
.industries, .design-group, .service-area {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}