/*
 * CormackCoreWeb 2.0 - Custom Stylesheet
 * Author: Charlie - Cormack Advertising
 * Add your custom styles here
 */

/* ===========================================================================
 * HERO
 * ======================================================================== */
.hero {
    position: sticky;
    top: 0;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--space-topbar) var(--space-edge) var(--space-edge);  /* 50 top, 100 sides/bottom */
    display: flex;
    flex-direction: column;
    align-items: flex-start;        /* all content left-aligned (overrides .section center) */
    justify-content: space-between;
    text-align: left;
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-navy);
    isolation: isolate;
}

/* Top bar must span full width even with left-aligned column */
.hero-topbar { align-self: stretch; }

/* Background image — center/cover with slow Ken Burns zoom-in pan.
   Pulled up 6% (with extended height so no gap appears at the bottom). */
.hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6%;
    height: 106%;
    z-index: -2;
    background: url('../images/hero/hero-bg.jpg') center center / cover no-repeat;
    transform: scale(1);
    animation: hero-kenburns 22s ease-out forwards;
    will-change: transform;
}

/* Brand gradient overlay — blue (top-left) → green (top-right) */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, rgba(0, 90, 255, 0.55) 0%, rgba(0, 200, 130, 0.45) 60%, rgba(0, 255, 149, 0.35) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
}

@keyframes hero-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .hero::before { animation: none; }
}

/* --- Top bar: logo left, hamburger true-center, Logicor right ---
   All elements are --topbar-h tall and vertically centred on one line.
   A centre spacer reserves room for the (fixed) menu button so the logo and
   pill can never grow/overlap into it at any width. */
.hero-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 20px);
    min-height: var(--topbar-h);
}

/* Invisible centre spacer = menu button width + breathing room on each side */
.hero-topbar::before {
    content: "";
    flex: 0 0 auto;
    width: calc(var(--topbar-h) + 24px);
    height: var(--topbar-h);
    order: 0;                /* sits between logo (order:-1) and pill (default) */
    pointer-events: none;
}
.hero-logo { order: -1; }    /* force logo before the spacer */

/* Single page-level menu toggle — fixed, top-centre, always above the overlay.
   One element for both open & close, so there is nothing to misalign. */
.nav-toggle.hero-menu-toggle {
    position: fixed;
    top: calc(var(--space-topbar) + (var(--topbar-h) / 2));   /* aligned to the 50px-inset top bar */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;   /* above .nav-overlay (1000) */
    transition: transform 0.35s ease, opacity 0.35s ease;
}

/* Hidden on scroll-down: slide up off the top edge + fade (revealed on scroll-up) */
.nav-toggle.hero-menu-toggle.is-hidden {
    transform: translate(-50%, calc(-50% - 140px));
    opacity: 0;
    pointer-events: none;
}


/* Top-bar elements all match the glass button height (--topbar-h) and centre vertically.
   Logo can shrink (min-width:0) so it scales down instead of colliding. */
.hero-logo {
    display: inline-flex;
    align-items: center;
    height: var(--topbar-h);
    min-width: 0;
    flex: 0 1 auto;
}
.hero-logo img {
    display: block;
    height: clamp(20px, 3vw, 29px);
    width: auto;
    max-width: 100%;
}

.hero-logicor {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;          /* pill never shrinks/clips its logo */
    height: var(--topbar-h);
    background: var(--color-white);
    border-radius: var(--radius-pill);
    padding: 0 clamp(14px, 1.8vw, 22px);
}
.hero-logicor img { display: block; height: clamp(15px, 2vw, 20px); width: auto; }

/* Liquid-glass round hamburger button (glassmorphism) — size tracks the navbar */
.hero-menu-toggle {
    position: relative;
    width: var(--topbar-h);
    height: var(--topbar-h);
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);   /* perfect circle at any --topbar-h */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: all ease-in-out 0.15s;
    /* Glass surface (clipped to padding box) + diagonal shine ring (border box) */
    background:
        radial-gradient(120% 120% at 50% 20%, rgb(255 255 255 / 0%) 0%, rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.10) 100%) padding-box,
        linear-gradient(135deg, rgb(255 255 255 / 26%) 0%, rgb(255 255 255 / 0%) 40%, rgb(255 255 255 / 27%) 55%, rgb(255 255 255 / 0%) 100%) border-box;
    /* Diagonal edge shine: bright rim top-left, soft rim bottom-right; subtle lift */
    box-shadow:
        1px 1px 1px 0 rgba(255, 255, 255, 0.55) inset,   /* top-left bright rim   */
        -1px -1px 1px 0 rgba(255, 255, 255, 0.20) inset, /* bottom-right soft rim */
        0 1px 2px 0 rgba(255, 255, 255, 0.30) inset,
        0 4px 14px 0 rgba(0, 0, 0, 0.12);                /* light outer shadow    */
}

/* Bottom glow */
.hero-menu-toggle::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 70%;
    height: 20px;
    background-color: #ffffff;
    border-radius: 100%;
    filter: blur(10px);
    opacity: 0.3;
    z-index: 2;
    transform-origin: bottom;
    transition: all ease-in-out 0.15s;
    pointer-events: none;
}
.hero-menu-toggle:hover::before {
    transform: scaleX(1.1) scaleY(1.3);
    opacity: 0.4;
}
.hero-menu-toggle:active {
    background-color: rgba(33, 40, 48, 0.8);
}
.hero-menu-toggle:active::before {
    transform: scaleX(1.3) scaleY(1.4);
    opacity: 0.45;
}

/* Diagonal shine reflection — sweeps top-left → bottom-right on hover,
   and slides back to origin when the pointer leaves (transition-driven). */
.hero-menu-toggle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 220%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    /* Rest position: tucked off the top-left corner */
    transform: rotate(45deg) translate(-220%, -40%);
    transition: transform 0.6s ease-in-out;
}
.hero-menu-toggle:hover::after {
    /* Swept across to the bottom-right; reverses on hover-out automatically */
    transform: rotate(45deg) translate(220%, -40%);
}
@media (prefers-reduced-motion: reduce) {
    .hero-menu-toggle::after { transition: none; }
}

/* Hamburger icon — 3 black 1px lines */
.hero-menu-icon,
.hero-menu-icon::before,
.hero-menu-icon::after {
    content: "";
    display: block;
    width: 22px;
    height: 1px;
    background: #000000;
}
.hero-menu-icon {
    position: relative;
    z-index: 3;
    transition: background 0.2s ease;
}
.hero-menu-icon::before,
.hero-menu-icon::after {
    position: absolute;
    left: 0;
    transition: transform 0.25s ease, top 0.25s ease;
}
.hero-menu-icon::before { top: -7px; }
.hero-menu-icon::after  { top: 7px; }

/* Morph to X when nav is open */
body.nav-open .hero-menu-icon {
    background: transparent;   /* hide middle line */
}
body.nav-open .hero-menu-icon::before {
    top: 0;
    transform: rotate(45deg);
}
body.nav-open .hero-menu-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* ===========================================================================
 * FULL-SCREEN NAV OVERLAY
 * ======================================================================== */

/* Lock page scroll behind the open nav */
body.nav-open {
    overflow: hidden;
}

.nav-overlay {
    position: fixed;
    inset: 0;                              /* full screen */
    z-index: 1000;
    background: rgba(94, 94, 94, 0.5);     /* semi-transparent: page shows through at 50% */
    background-blend-mode: overlay;
    display: flex;
    align-items: center;       /* centre content vertically   */
    justify-content: center;   /* centre content horizontally */
    /* Hidden state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: opacity 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease, visibility 0s linear 0.4s;
}

/* Open state (toggled via .is-open on <body> or the overlay) */
.nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Frosted glass: strong blur + saturation/brightness lift */
    backdrop-filter: blur(12px) saturate(180%) brightness(1.05);
    -webkit-backdrop-filter: blur(12px) saturate(180%) brightness(1.05);
    transition: opacity 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease;
}

.nav-overlay__menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.nav-overlay__menu li {
    /* Entrance: drop in from top, staggered by --nav-i */
    opacity: 0;
    transform: translateY(-28px);
}

.nav-overlay.is-open .nav-overlay__menu li {
    animation: nav-item-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--nav-i, 0) * 90ms);
}

@keyframes nav-item-in {
    to { opacity: 1; transform: translateY(0); }
}

.nav-overlay__menu a {
    display: inline-block;
    color: var(--color-green);   /* #00FF95 ≈ #00FF94 */
    text-align: center;
    font-family: var(--font-body);
    font-size: var(--fs-nav);        /* fluid: clamp(20px … 30px) */
    font-weight: var(--fw-medium);   /* 500 */
    line-height: 236%;               /* 70.8px */
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.nav-overlay__menu a:hover,
.nav-overlay__menu a:focus-visible {
    color: var(--color-white);
}

/* Full-bleed click-to-close backdrop (sits behind the links) */
.nav-overlay__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 0;
}

.nav-overlay__menu { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .nav-overlay.is-open .nav-overlay__menu li { animation: none; opacity: 1; transform: none; }
    .nav-overlay { transition: opacity 0.2s ease; }
}
/* Nav link size scales via --fs-nav token — no breakpoint override needed. */

/* --- Hero content --- */
.hero-inner {
    margin-top: 10%;
    margin-bottom: auto;
    max-width: 60rem;
    transform: translateY(6vh);
}

.hero-title {
    font-family: var(--font-body);
    font-weight: var(--fw-heading);       /* 300 — light */
    font-size: var(--fs-hero);            /* variable: clamp(28px … 54px) */
    line-height: 1.11;                    /* = 60px at 54px desktop; scales with font */
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-white);
}
.hero-title span {
    font-family: var(--font-heading);     /* Eurostile Extended */
    font-weight: var(--fw-emphasis);      /* 600 — semibold */
    font-size: var(--fs-hero);
    line-height: inherit;                 /* match the title so it can't inflate the line box */
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-location {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    font-weight: var(--fw-medium);        /* 500 */
    font-size: var(--fs-lead);            /* fluid: clamp(16px … 19px) */
    line-height: 1.1;
}
.hero-location img { display: block; height: 24px; width: auto; }

.hero-cta {
    display: inline-block;
    margin-top: 40px;
    padding: 16px 32px;
    border-radius: var(--radius-pill);
    background: var(--color-green);
    color: var(--color-navy);
    font-weight: var(--fw-button);        /* 600 — one step down from bold */
    font-size: var(--fs-body);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 255, 149, 0.35);
}

/* --- Bottom-left lease note --- */
.hero-note {
    font-weight: var(--fw-medium);        /* 500 */
    font-size: var(--fs-lead);            /* fluid: clamp(16px … 19px) */
    line-height: 1.1;
    color: var(--color-white);
}
.hero-note strong { font-weight: var(--fw-bold); }

/* --- Responsive --- */
/* Navbar (button/pill) scales fluidly via clamp() on --topbar-h. The logo needs
   a hard cap on mobile so it never overlaps the centre button. */
@media (max-width: 768px) {
    /* Un-pin: hero stays a full-screen splash but scrolls normally (no card-stack) */
    .hero {
        position: relative;
        top: auto;
    }
    .hero-logo img { height: 11px; }     /* hard cap so logo never overlaps centre button */
    /* Tighten headline leading on mobile — the inline Eurostile span inflates
       the line box, so the gaps look huge at small sizes. */
    .hero-title,
    .hero-title span { line-height: 1.05; }
}

/* ===========================================================================
 * AERIAL SECTION — annotated aerial map + centred heading
 * ======================================================================== */
.section-aerial {
    position: sticky;
    top: 0;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--space-edge);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;     /* heading sits near the top */
    background: url('../images/aerial/aerial-map.jpg') center center / cover no-repeat;
    isolation: isolate;
}

/* Top fade — white→transparent overlay between the bg image and the heading,
   improves legibility of the heading over the photo. */
.section-aerial::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 278px;
    z-index: 0;
    opacity: 0.72;
    background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.section-aerial__heading {
    position: relative;
    z-index: 1;                      /* sit above the top fade */
    max-width: 60rem;
    text-align: center;
}

.section-aerial h2 {
    color: var(--color-white);
    font-family: var(--font-heading);   /* Eurostile Extended */
    font-weight: var(--fw-heading);     /* 300 — light */
    font-size: var(--fs-h2);            /* fluid: clamp(24px … 39px) */
    line-height: 91.215%;               /* 35.574px */
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: center;
}

.section-aerial h2 span {
    font-weight: var(--fw-emphasis);    /* 600 — semibold */
}

/* --- Mobile pannable image layer (desktop: hidden, section bg is used) --- */
.section-aerial__pan { display: none; }

.aerial-slider { display: none; }      /* shown on mobile only */

@media (max-width: 760px) {
    /* Un-pin so it scrolls normally (no card-stack), but keep one-screen height
       so the absolute pan-image layer + slider have a frame to live in. */
    .section-aerial {
        position: relative;
        top: auto;
        background-image: none;
    }

    .section-aerial__pan {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;              /* clip the over-wide image to the viewport */
    }
    .section-aerial__panimg {
        position: absolute;
        top: 0;
        left: 50%;
        height: 100%;
        width: auto;
        max-width: none;               /* allow natural (wide) width */
        /* --pan: -50% centres it; JS shifts it ± as the slider scrubs. */
        transform: translateX(calc(-50% + var(--pan, 0px)));
    }

    /* Spring slider under the heading */
    .aerial-slider {
        display: block;
        margin: clamp(20px, 5vh, 40px) auto 0;
        max-width: 320px;
        padding: clamp(10px, 2.4vw, 16px) clamp(14px, 3.5vw, 22px);
        border-radius: var(--radius-pill);
        background: rgba(120, 120, 120, 0.55);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .aerial-slider__input {
        -webkit-appearance: none;
        appearance: none;
        display: block;
        width: 100%;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, #00FF94 0%, #00CBC4 50%, #008DFF 100%);
        outline: none;
        cursor: grab;
    }
    .aerial-slider__input:active { cursor: grabbing; }

    /* Knob — white circle, both engines */
    .aerial-slider__input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        border: none;
    }
    .aerial-slider__input::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        border: none;
    }
}

/* ===========================================================================
 * SPECIFICATION SECTION — 3 feature tiles on a blue→green gradient
 * Content-height (not pinned); never taller than one screen; 50px padding.
 * ======================================================================== */
.section-spec {
    position: relative;       /* lift above the pinned (sticky) aerial behind it */
    z-index: 1;
    box-sizing: border-box;
    max-height: 100vh;
    max-height: 100svh;
    padding: var(--space-edge);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Gradient at 35% opacity over a white underlay (desaturated, paler wash) */
    background:
        linear-gradient(90deg,
            rgba(0, 141, 255, 0.35) 0.41%,
            rgba(0, 203, 196, 0.35) 56.41%,
            rgba(0, 255, 148, 0.35) 99.41%,
            rgba(0, 255, 148, 0.35) 100.41%),
        #FFFFFF;
}

.section-spec__grid {
    width: 100%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 3vw, 48px);
}

/* --- Tile: white, 0.8 opacity, large radius, tight margins --- */
.spec-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(10px, 0.4vw, 10px);
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
}

/* Image FRAME — fixed-size, clips the image; the image scales INSIDE it */
.spec-tile__media {
    position: relative;
    width: 100%;
    aspect-ratio: 409 / 273;
    border-radius: var(--radius-lg);
    background-color: lightgray;
    overflow: hidden;                   /* clip the zoom to the frame */
}
/* Inner image layer that actually zooms (frame stays put) */
.spec-tile__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;          /* image set via inline style on .spec-tile__media */
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1);                /* default */
    transition: transform 0.6s ease;
    will-change: transform;
}
.spec-tile:hover .spec-tile__media::before {
    transform: scale(1.08);             /* zoom IN on hover — frame unchanged */
}

@media (prefers-reduced-motion: reduce) {
    .spec-tile__media::before { transition: none; transform: none; }
}

.spec-tile__headline {
    margin-top: clamp(20px, 2vw, 36px);
    color: var(--color-navy);
    font-family: var(--font-heading);   /* Eurostile Extended */
    font-weight: 300;                   /* 100 down from regular */
    font-size: var(--fs-h3);            /* fluid: clamp(20px … 27px) */
    line-height: 109.458%;              /* 29.554px */
    text-transform: uppercase;
    text-align: center;
}

.spec-tile__copy {
    margin-top: clamp(12px, 1.4vw, 24px);
    margin-bottom: 25px;                /* breathing room below copy */
    max-width: 22ch;
    color: var(--color-navy);
    font-family: var(--font-body);      /* Montserrat */
    font-weight: var(--fw-regular);     /* 400 */
    font-size: var(--fs-body);          /* fluid: clamp(15px … 21px) */
    line-height: 109.458%;              /* 22.986px */
    text-align: center;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    /* Font sizes + radii already scale via fluid tokens — only the layout changes. */
    .section-spec { max-height: none; }     /* stack vertically — let it grow */
    .section-spec__grid {
        grid-template-columns: 1fr;
        max-width: 460px;
    }
}

/* ===========================================================================
 * SPECIFICATION (detail) SECTION — left feature grid + right site plan/table
 * Pinned stacking section (sticky) — sits above the spec tiles behind it.
 * ======================================================================== */
.section-spec2 {
    position: relative;
    z-index: 2;                         /* above the spec-tiles section */
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    min-height: 100svh;
    max-height: 100vh;                  /* never exceed one screen */
    max-height: 100svh;
    overflow: hidden;
    background: var(--color-white);
}

/* --- Left: info column (fills column height, content distributes to fit) --- */
.section-spec2__info {
    height: 100%;
    box-sizing: border-box;
    padding: clamp(20px, 3.5vh, 44px) var(--space-edge);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(14px, 3vh, 40px);        /* heading ↔ grid gap, compresses */
    overflow: hidden;
}

.spec2-heading {
    flex: 0 0 auto;
    color: var(--color-navy);
    font-family: var(--font-heading);   /* Eurostile Extended */
    font-weight: var(--fw-heading);     /* light — un-spanned ("Engineered for") */
    font-size: var(--fs-h2);            /* 39px @ desktop */
    line-height: 1.1;                   /* 43px */
    text-transform: uppercase;
}
.spec2-heading span { font-weight: var(--fw-emphasis); }   /* 600 — emphasised lines */

/* 3-column feature grid — rows share remaining height evenly */
.spec2-grid {
    flex: 1 1 auto;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;                /* 4 rows split the space evenly */
    column-gap: clamp(16px, 2vw, 32px);
    row-gap: clamp(10px, 2vh, 28px);    /* compresses on short screens */
    align-content: stretch;
}

.spec2-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.spec2-feature__icon {
    width: clamp(28px, 2.4vw, 36px);
    height: auto;
    margin-bottom: clamp(10px, 1.2vw, 16px);
}
.spec2-feature__title {
    color: var(--color-navy);
    font-family: var(--font-heading);   /* Eurostile Extended */
    font-weight: 300;                   /* 100 down from regular */
    font-size: var(--fs-body-sm);       /* 15px @ desktop, per Figma */
    line-height: 1.095;
    text-transform: uppercase;
    margin-bottom: clamp(8px, 1vw, 14px);
}
.spec2-feature__detail {
    color: var(--color-navy);
    font-family: var(--font-body);      /* Montserrat */
    font-weight: var(--fw-regular);
    font-size: var(--fs-label);         /* 14px @ desktop, per Figma */
    line-height: 1.125;                 /* 112.5% */
}
/* Blue-accented features (EPC / BREEAM / EV / PV) */
.spec2-feature.is-accent .spec2-feature__title { color: var(--color-blue); }

/* --- Right: gradient backdrop + site plan + table --- */
.section-spec2__plan {
    position: relative;
    padding: 0 clamp(9px, 10vw, 50px) clamp(20px, 4vh, 50px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;        /* image + table stack from the top, no void */
    gap: clamp(10px, 1.6vh, 20px);
    overflow: hidden;
    background: url('../images/specification/spec-bg-gradient.jpg') center center / cover no-repeat;
}

.spec2-siteplan {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 73vh;
    align-self: center;
    object-fit: contain;
    object-position: center top;
}

/* Totals table — compact so the image can be larger */
.spec2-areas {
    flex: 0 0 auto;                     /* fixed height — always visible at the bottom */
    width: 100%;
    border-collapse: collapse;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--fs-label);        /* smaller → shorter table */
    line-height: 1.1;
}
.spec2-areas th {
    font-weight: var(--fw-regular);
    text-align: right;
    padding: 2px clamp(8px, 1vw, 14px);
    opacity: 0.85;
}
.spec2-areas td {
    text-align: right;
    padding: clamp(3px, 0.35vw, 5px) clamp(8px, 1vw, 14px);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.spec2-areas__label { text-align: left !important; }
.spec2-areas thead th { border-bottom: none; }
.spec2-areas__total td {
    font-weight: var(--fw-bold);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
}
.spec2-areas__total .spec2-areas__label { text-transform: uppercase; }
.spec2-areas__foot td { border-top: 1px solid rgba(255, 255, 255, 0.35); }

/* --- Responsive: stack to one column --- */
@media (max-width: 1000px) {
    /* Drop the one-screen clamp + clip so the full icon grid shows (no cut-off rows) */
    .section-spec2 {
        grid-template-columns: 1fr;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }
    /* Info column: stop forcing full height + vertical-centre clip; let it grow */
    .section-spec2__info {
        height: auto;
        justify-content: flex-start;
        overflow: visible;
    }
    .spec2-grid { gap: clamp(20px, 5vw, 36px) clamp(12px, 3vw, 24px); }
    .spec2-siteplan { max-height: none; }
}
@media (max-width: 560px) {
    .spec2-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================================
 * GALLERY SECTION — full-bleed bg (Ken Burns), heading + 4 bottom images
 * ======================================================================== */
.section-gallery {
    position: sticky;
    top: 0;
    z-index: 3;                         /* above the spec2 section behind it */
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--space-edge);
    display: flex;
    flex-direction: column;
    justify-content: space-between;     /* heading top, images bottom */
    overflow: hidden;
    isolation: isolate;
    color: var(--color-white);
}

/* Background with slow Ken Burns zoom-in (same as hero) */
.section-gallery::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('../images/gallery/gallery-bg.jpg') center bottom / cover no-repeat;
    transform: scale(1);                /* start at the furthest-out (least-cropped) cover view */
    animation: hero-kenburns 22s ease-out forwards;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .section-gallery::before { animation: none; }
}

.gallery-heading {
    color: var(--color-white);
    font-family: var(--font-heading);   /* Eurostile Extended */
    font-weight: var(--fw-heading);     /* 300 light */
    font-size: var(--fs-h2);
    line-height: 1.1;
    text-transform: uppercase;
}
.gallery-heading span { font-weight: var(--fw-emphasis); }   /* 600 semibold */

/* 4-image row spanning full width, bottom-aligned, ALL images same height.
   Horizontal items get more width (grow:3), vertical less (grow:2). */
.gallery-row {
    --gallery-h: 400px;                /* shared image height */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;              /* align to bottom */
    gap: clamp(12px, 1.5vw, 24px);
}
.gallery-item {
    min-width: 0;
    position: relative;
}
.gallery-item--h { flex: 3 1 0; }      /* horizontal — wider  */
.gallery-item--v { flex: 2 1 0; }      /* vertical — narrower */

/* Image frame — fills the item width at the shared height */
.gallery-item__media {
    position: relative;
    width: 100%;
    height: var(--gallery-h);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: lightgray;
}

.gallery-item__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 0.6s ease;
    will-change: transform;
}
.gallery-item:hover .gallery-item__media::before {
    transform: scale(1.08);            /* zoom IN on hover (same as tiles) */
}
@media (prefers-reduced-motion: reduce) {
    .gallery-item__media::before { transition: none; transform: none; }
}

/* Caption hangs below image 1 without shifting the media bottom-alignment */
.gallery-item__caption {
    position: absolute;
    top: calc(100% + clamp(6px, 0.8vw, 10px));
    left: 0;
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-label);
    white-space: nowrap;
}
/* Reserve room under the row so the absolute caption stays inside the section */
.gallery-row { padding-bottom: calc(var(--fs-label) + clamp(6px, 0.8vw, 10px)); }

/* Desktop: caption shows under image 1 only (image 3's copy is the mobile fallback) */
.gallery-item:nth-child(3) .gallery-item__caption { display: none; }

/* --- Responsive: smaller shared height on narrow screens --- */
@media (max-width: 760px) {
    /* Un-pin so it scrolls normally instead of stack-covering the section above,
       and grow to fit the 2×2 grid (no clipping). */
    .section-gallery {
        position: relative;
        top: auto;
        min-height: 0;
        overflow: visible;
        justify-content: flex-start;
        gap: clamp(24px, 6vh, 48px);
    }

    /* 2×2 grid: row 1 = horizontal + vertical, row 2 = vertical + horizontal. */
    .gallery-row {
        --gallery-h: clamp(150px, 30vw, 240px);
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: 10px;
    }
    /* DOM order is H, V, H, V → swap the 2nd-row pair to get V, H */
    .gallery-item { flex: none; }                 /* grid handles sizing, drop flex grow */
    .gallery-item:nth-child(3) { order: 4; }      /* 2nd-row H moves to the right */
    .gallery-item:nth-child(4) { order: 3; }      /* 2nd-row V moves to the left  */

    /* Vertical items taller than horizontal so orientation still reads */
    .gallery-item--v .gallery-item__media { height: calc(var(--gallery-h) * 1.35); }
    .gallery-item--h .gallery-item__media { height: var(--gallery-h); }

    /* Bottom-align each pair so the row baselines line up */
    .gallery-item { align-self: end; }
    /* …except the bottom-right image (3rd DOM item, sits in row-2 right) — top-align it */
    .gallery-item:nth-child(3) { align-self: start; }

    /* Move the caption from image 1 to under image 3 on mobile */
    .gallery-item:nth-child(1) .gallery-item__caption { display: none; }
    .gallery-item:nth-child(3) .gallery-item__caption {
        display: block;
        white-space: normal;            /* allow wrap in the narrow column */
    }
}

/* ===========================================================================
 * LOCATION SECTION — styled map + getting-here cards + drive-time tables
 * ======================================================================== */
.section-location {
    position: relative;
    z-index: 4;                         /* above the gallery behind it */
    padding: var(--space-edge);
    background: var(--color-white);
    color: var(--color-navy);
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 8vh, 70px);
}

/* Top: map | info */
.loc-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 3vw, 56px);
    align-items: stretch;               /* both columns equal height */
}

/* --- Map (fills column height so its bottom aligns with the info content) --- */
.loc-map {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-navy);
    min-height: 0;
    height: 100%;
}
.loc-map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.loc-map__btn {
    position: absolute;
    left: clamp(16px, 2vw, 32px);
    bottom: clamp(16px, 2vw, 32px);
    z-index: 1;
    padding: clamp(12px, 1.2vw, 18px) clamp(20px, 2vw, 32px);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-green);
    color: var(--color-navy);
    font-family: var(--font-body);
    font-weight: var(--fw-regular);       /* 400 — one step down from medium */
    font-size: var(--fs-body-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.loc-map__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 255, 148, 0.4); }

/* --- Info column (flex so the cards row fills remaining height) --- */
.loc-info {
    display: flex;
    flex-direction: column;
}
.loc-info .loc-cards { flex: 1 1 auto; }   /* cards grow to fill, green card stretches */

.loc-heading {
    color: var(--color-navy);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);     /* 300 light */
    font-size: var(--fs-h2);
    line-height: 1.1;
    text-transform: uppercase;
}
.loc-heading span { font-weight: var(--fw-emphasis); }   /* 600 semibold */

.loc-intro {
    margin-top: clamp(16px, 2vh, 28px);
    max-width: 34rem;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--color-navy);
}

.loc-cards {
    margin-top: clamp(20px, 3vh, 40px);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;   /* wider green card → more room for content */
    gap: clamp(20px, 2vw, 40px);
    align-items: stretch;                 /* both columns equal height */
}

/* Green "getting here" card — squarer */
.loc-card--here {
    padding: clamp(22px, 2.2vw, 40px);
    border-radius: var(--radius-xl);
    background: var(--color-green);
    color: var(--color-navy);
}
.loc-card__title {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-h2);              /* larger */
    line-height: 1.0;
    text-transform: uppercase;
    margin-bottom: clamp(20px, 3vh, 36px);
}
.loc-card__label {
    font-family: var(--font-heading);
    font-size: var(--fs-lead);            /* larger, matches value */
    text-transform: uppercase;
    margin-top: clamp(14px, 1.6vh, 22px);
}
.loc-card__value {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-lead);            /* same size as label */
    margin-top: 4px;
}
.loc-card__navrow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.loc-card__car { width: clamp(40px, 4vw, 56px); height: auto; }

/* Golden-triangle text block */
.loc-card__triangle-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    font-size: var(--fs-h4);
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--color-navy);
}
.loc-card__triangle-copy {
    margin-top: clamp(14px, 2vh, 24px);
    padding-right: clamp(40px, 8vw, 140px);   /* narrows text → wraps after "30-minute" */
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--color-navy);
}

/* --- Bottom: 4 drive-time tables --- */
.loc-tables {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 2.5vw, 48px);
}
.loc-table table { width: 100%; border-collapse: separate; border-spacing: 0; }
.loc-table th {
    font-family: var(--font-body);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body-sm);
    text-align: right;
    color: var(--color-navy);
    padding: 6px 0;
    white-space: nowrap;
}
.loc-table th.loc-table__name {
    text-align: left;
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h4);
    text-transform: uppercase;
}
.loc-table td {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    text-align: right;
    color: var(--color-navy);
    padding: clamp(8px, 1vh, 12px) 0;
}
.loc-table td.loc-table__name { text-align: left; }

/* Gradient row separator — spans the FULL row width (drawn on the <tr>) */
.loc-table tbody tr {
    background-image: linear-gradient(90deg, #00FF94 1.11%, #00A26C 108.94%, #004042 230.96%, #001A32 284.87%);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 2px;
}
.loc-table tbody tr:last-child { background-image: none; }

/* --- Drive-times modal --- */
.drivetimes-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-edge);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.drivetimes-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}
.drivetimes-modal__backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: rgba(0, 26, 50, 0.85);
    cursor: pointer;
}
.drivetimes-modal__dialog {
    position: relative;
    z-index: 1;
    width: fit-content;                 /* shrink-wrap the image — no frame margin */
    max-width: 90vw;
    max-height: 90vh;
    line-height: 0;                     /* kill inline-image baseline gap */
}
.drivetimes-modal__dialog img {
    display: block;
    width: auto;
    height: auto;
    max-width: 90vw;                    /* image itself is the 90% box */
    max-height: 90vh;
    border-radius: var(--radius-xl);    /* same as the map; sits on the image edges */
}
.drivetimes-modal__close {
    position: absolute;
    top: 8px;
    right: 0px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--color-green);
    color: var(--color-navy);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

/* --- Responsive --- */
@media (max-width: 1000px) {
    .loc-top { grid-template-columns: 1fr; }
    .loc-map { height: auto; aspect-ratio: 16 / 11; }   /* stacked: give the map its own height */
    .loc-tables { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .loc-cards { grid-template-columns: 1fr; }
    .loc-tables { grid-template-columns: 1fr; }
}

/* ===========================================================================
 * ECOSYSTEM SECTION — centred intro band on the blue→green gradient
 * ======================================================================== */
.section-ecosystem {
    position: relative;
    z-index: 5;                         /* above the location section behind it */
    padding: clamp(56px, 10vh, 120px) var(--space-edge);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Same overlay as the spec-tiles section: gradient at 35% over white */
    background:
        linear-gradient(90deg,
            rgba(0, 141, 255, 0.35) 0.41%,
            rgba(0, 203, 196, 0.35) 56.41%,
            rgba(0, 255, 148, 0.35) 99.41%,
            rgba(0, 255, 148, 0.35) 100.41%),
        #FFFFFF;
}

.ecosystem-inner { max-width: 60rem; }

.ecosystem-heading {
    color: var(--color-navy);
    font-family: var(--font-heading);   /* Eurostile Extended */
    font-weight: var(--fw-heading);     /* 300 light */
    font-size: var(--fs-h2);
    line-height: 1.1;
    text-transform: uppercase;
}
.ecosystem-heading span { font-weight: var(--fw-emphasis); }   /* 600 semibold */

.ecosystem-copy {
    margin-top: clamp(20px, 3vh, 36px);
    color: var(--color-navy);
    font-family: var(--font-body);      /* Montserrat */
    font-size: var(--fs-body);
    line-height: 1.45;
}

/* ===========================================================================
 * "BUILT" ACCORDION SECTION — driver bg + 3 expandable tabs
 * ======================================================================== */
.section-built {
    position: relative;
    z-index: 6;                         /* above the ecosystem section behind it */
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--space-edge);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    color: var(--color-white);
    background: var(--color-navy);
}
/* Driver image (left) + dark navy gradient over it (right) */
.section-built::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('../images/built/built-bg.jpg') left center / cover no-repeat;
}
.section-built::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(0, 26, 50, 0) 0%, rgba(0, 26, 50, 0.75) 38%, rgba(0, 26, 50, 0.96) 60%, #001A32 100%);
}

/* Accordion sits on the right half */
.built-accordion {
    margin-left: auto;
    width: min(52%, 920px);
}
@media (max-width: 1100px) {
    .built-accordion { width: 100%; }
}

/* --- Tab --- */
.built-tab { position: relative; }
.built-tab__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(16px, 2.4vh, 32px) 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-white);
}
.built-tab__title {
    font-family: var(--font-heading);
    font-weight: var(--fw-emphasis);    /* bold tab titles */
    font-size: var(--fs-h4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Green chevron toggle (ui-21.svg) — flips when open */
.built-tab__chev {
    flex: 0 0 auto;
    width: clamp(48px, 5vw, 64px);
    height: clamp(32px, 3.4vw, 42px);
    border-radius: var(--radius-pill);
    background: var(--color-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.built-tab__chev img {
    width: clamp(18px, 1.6vw, 24px);
    height: auto;
    transition: transform 0.3s ease;
    transform: rotate(180deg);          /* closed: chevron points down */
}
.built-tab.is-open .built-tab__chev img { transform: rotate(0deg); }   /* open: points up */

/* Gradient separator line under each header (flipped: green left → blue right) */
.built-tab__header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(270deg, #008DFF 0.41%, #00CBC4 56.41%, #00FF94 99.41%, #00FF94 100.41%);
}

/* Collapsible panel */
.built-tab__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}
.built-tab.is-open .built-tab__panel { grid-template-rows: 1fr; }
.built-tab__inner {
    overflow: hidden;
    min-height: 0;
}
.built-tab.is-open .built-tab__inner { padding: clamp(20px, 3vh, 36px) 0 clamp(24px, 4vh, 48px); }

/* Feature grid */
.built-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.4vw, 44px) clamp(16px, 2vw, 36px);
}
/* Each feature: 2 columns — icon left (30%), content right (70%) */
.built-feature {
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-areas:
        "icon title"
        "icon copy";
    align-content: start;
    column-gap: clamp(8px, 1vw, 16px);
}
.built-feature__icon {
    grid-area: icon;
    align-self: start;
    justify-self: end;                  /* sit close to the content on its right */
    width: auto;
    height: clamp(28px, 2.4vw, 36px);   /* size by height so all icons match (incl. narrow suitcase) */
    margin-right: clamp(10px, 1vw, 18px);
    /* icons are navy by default — make them white on the dark bg */
    filter: brightness(0) invert(1);
}
.built-feature__title {
    grid-area: title;
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);      /* 500 — 100 down from emphasis (600) */
    font-size: var(--fs-body-lg);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: clamp(8px, 1vh, 14px);
}
.built-feature__copy {
    grid-area: copy;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
}

/* Turbine image — fixed below all tabs (always visible) */
.built-image {
    margin-top: clamp(20px, 8vh, 55px);
    width: 100%;
    aspect-ratio: 16 / 6;
    border-radius: var(--radius-lg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* --- Responsive --- */
/* Narrow columns: stack icon ABOVE content so the 30/70 layout can't overlap */
@media (max-width: 1100px) {
    .built-feature {
        grid-template-columns: 1fr;
        grid-template-areas:
            "icon"
            "title"
            "copy";
    }
    .built-feature__icon {
        justify-self: start;
        margin-right: 0;
        margin-bottom: clamp(10px, 1.4vh, 16px);
    }
}

@media (max-width: 760px) {
    /* Let the section grow to fit content — no one-screen clamp, no clipping. */
    .section-built {
        min-height: 0;
        overflow: visible;
        align-items: stretch;
    }
    .section-built::after {
        background: linear-gradient(180deg, rgba(0,26,50,0.6) 0%, rgba(0,26,50,0.92) 50%, #001A32 100%);
    }
    .built-features { grid-template-columns: 1fr; }
}

/* ===========================================================================
 * Contact / footer section (#contact)
 * Normal-flow block on the brand gradient. Scrolls up over the last pinned
 * section (sits above it via z-index), then the page ends.
 * ======================================================================== */
.section-contact {
    position: relative;
    z-index: 10;                 /* above every pinned .section below it */
    color: var(--color-white);
    background: linear-gradient(180deg, #00FF94 0.41%, #00CBC4 43.59%, #008DFF 99.59%);
    padding: clamp(50px, 8vh, 90px) var(--space-edge) clamp(36px, 5vh, 56px);
}

/* --- Top: intro (left) + agent columns (right) --- */
.contact-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
    padding-bottom: clamp(48px, 8vh, 96px);
}

.contact-heading {
    color: var(--color-white);
    font-weight: var(--fw-heading);          /* light — un-spanned */
    font-size: var(--fs-h2);
    letter-spacing: 0.02em;
}
.contact-heading span { font-weight: var(--fw-emphasis); }   /* semibold emphasis */

.contact-copy {
    margin-top: clamp(18px, 2.4vw, 26px);
    max-width: 30ch;
    color: var(--color-white);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body);
}

.contact-cta {
    display: inline-block;
    margin-top: clamp(24px, 3vw, 34px);
    padding: 16px 32px;                  /* same as hero-cta */
    border-radius: var(--radius-pill);
    background: var(--color-green);
    color: var(--color-navy);
    font-weight: var(--fw-button);       /* Montserrat 600 — same as hero-cta */
    font-size: var(--fs-body);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 255, 149, 0.4);
}

/* --- Agent contact columns --- */
.contact-agents {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
}

.contact-agent__logo {
    display: block;
    width: auto;
    height: clamp(22px, 2.2vw, 32px);        /* wordmark sized by height */
    margin-bottom: clamp(16px, 1.8vw, 24px);
}
/* Tall 3-line LSH wordmark — keep its baseline aligned with single-line ones */
.contact-agent:last-child .contact-agent__logo {
    height: clamp(34px, 3.4vw, 50px);
    margin-top: clamp(-12px, -1vw, -6px);
}

.contact-agent__people {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.8vw, 22px);
}

.contact-person__name {
    font-weight: var(--fw-bold);
    font-size: var(--fs-label);
    line-height: 1.3;
}
.contact-person__email,
.contact-person__phone {
    display: block;
    font-size: var(--fs-label);
    line-height: 1.45;
    color: var(--color-white);
    word-break: break-word;
}
.contact-person__email:hover,
.contact-person__phone:hover { text-decoration: underline; }

/* --- Brand bar (DIRFT logo · copyright · Logicor pill) --- */
.contact-brandbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
}

.contact-brandbar__logo img {
    display: block;
    height: clamp(20px, 2.2vw, 30px);
    width: auto;
}

.contact-brandbar__copy {
    text-align: center;
    font-size: var(--fs-body-sm);
    color: var(--color-white);
    white-space: nowrap;
}

.contact-brandbar__logicor {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    background: var(--color-white);
    border-radius: var(--radius-pill);
    padding: clamp(8px, 1vw, 12px) clamp(16px, 1.8vw, 24px);
}
.contact-brandbar__logicor img {
    display: block;
    height: clamp(14px, 1.4vw, 19px);
    width: auto;
}

/* --- Separator rule under the brand bar --- */
.contact-rule {
    display: block;
    height: 1px;
    margin-top: clamp(28px, 4vh, 48px);
    background: rgba(255, 255, 255, 0.55);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .contact-top {
        grid-template-columns: 1fr;
        gap: clamp(36px, 7vw, 56px);
    }
}
@media (max-width: 560px) {
    .contact-agents {
        grid-template-columns: 1fr;
        gap: clamp(28px, 7vw, 40px);
    }
    .contact-agent:last-child .contact-agent__logo { margin-top: 0; }

    .contact-brandbar {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: clamp(20px, 6vw, 32px);
    }
    .contact-brandbar__logicor { justify-self: center; }
}