/* Glomeum.Web.Site
   Hero implementation targets deterministic mockup-v9.
   The hero MP4 is referenced by URL and is not stored in this project. */

:root {
    --color-bg: #06102d;
    --color-bg-mid: #0d275b;
    --color-bg-right: #1c356f;
    --color-surface: #0b1a28;
    --color-surface-soft: #102334;
    --color-text: #f8faff;
    --color-muted: #b9c7e7;
    --color-line: rgba(255,255,255,.14);
    --color-accent: #7f9dd9;
    --font-sans: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --content-width: 1566px;
    --gutter: clamp(1.25rem, 3.7vw, 3.9rem);
    --section-space: clamp(5rem, 10vw, 9rem);
    --radius-sm: .65rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --shadow-soft: 0 24px 70px rgba(0,0,0,.28);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
::selection { background: #8aa8e5; color: #06102d; }

.container {
    width: min(calc(100% - (2 * var(--gutter))), var(--content-width));
    margin-inline: auto;
}

.section { padding-block: var(--section-space); }
.section--surface { background: var(--color-surface); }
.eyebrow {
    margin: 0 0 1rem;
    color: #8aa8e5;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
h1, h2, h3, h4 { margin-top: 0; line-height: 1.1; letter-spacing: -.025em; }
h1 { margin-bottom: 1.5rem; font-weight: 400; }
h2 { margin-bottom: 1.5rem; font-size: clamp(2rem,4vw,3.5rem); font-weight: 620; }
h3 { margin-bottom: .8rem; font-size: clamp(1.35rem,2.2vw,2rem); font-weight: 620; }
h4 { margin-bottom: 1rem; font-size: 1.15rem; font-weight: 600; }
p { margin-top: 0; }
.lead { max-width: 64ch; color: var(--color-muted); font-size: clamp(1.08rem,1.6vw,1.3rem); }

/* Header */
.site-header {
    position: absolute;
    z-index: 20;
    inset: 0 0 auto;
}
.site-header__inner {
    display: flex;
    min-height: 6.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
}
.brand__logo {
    width: auto;
    height: 3.75rem;
    object-fit: contain;
}
.brand__word {
    position: relative;
    font-size: 1.95rem;
    font-weight: 500;
    letter-spacing: -.02em;
}
.brand__word sup {
    position: relative;
    top: -.45em;
    margin-left: .12em;
    font-size: .36em;
    line-height: 0;
    vertical-align: baseline;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem,2.7vw,2.7rem);
}
.site-nav a {
    position: relative;
    padding: .4rem 0;
    color: #becbeb;
    font-size: 1rem;
    transition: color 160ms ease;
}
.site-nav a::after {
    position: absolute;
    right: 0;
    bottom: .12rem;
    left: 0;
    height: 1px;
    transform: scaleX(0);
    transform-origin: center;
    background: currentColor;
    content: "";
    opacity: .7;
    transition: transform 160ms ease;
}
.site-nav a:hover,
.site-nav a:focus-visible { color: #fff; }
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }

.nav-toggle {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,.16);
    color: var(--color-text);
    cursor: pointer;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
    display: block;
    width: 1.2rem;
    height: 1px;
    margin: .28rem auto;
    background: currentColor;
    content: "";
    transition: transform 180ms ease, opacity 180ms ease;
}
.nav-toggle[aria-expanded="true"] span { opacity: 0; }
.nav-toggle[aria-expanded="true"]::before { transform: translateY(.29rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(-.29rem) rotate(-45deg); }

/* Hero — mockup-v9 baseline */
.hero {
    position: relative;
    min-height: min(760px, 100svh);
    overflow: hidden;
    padding: 7.5rem 0 4rem;
    background:
        linear-gradient(90deg,
            #071b38 0%,
            #0a2854 28%,
            #10356f 52%,
            #183b78 72%,
            #202f68 88%,
            #242858 100%);
}
.hero__content {
    position: relative;
    z-index: 2;
}
.hero__copy {
    width: min(61%, 950px);
    max-width: 950px;
    padding-top: 3rem;
}
.hero h1 {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(1.82rem, 1.88vw, 2.05rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
}
.hero .lead {
    max-width: 36.5rem;
    margin-bottom: 0;
    color: #b9c7e7;
    font-size: clamp(1.02rem, 1.08vw, 1.16rem);
    line-height: 1.7;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 1.85rem;
}

/*
  Desktop geometry follows mockup-v9:
  mockup canvas 1690 x 895
  video x=920, y=170, rendered width=770, aspect 16:9.

  CSS masks approximate the deterministic PIL feather:
  left 405 px, top 220 px, bottom 245 px.
  Right edge intentionally remains unfeathered.
*/
.hero__video-shell {
    position: absolute;
    z-index: 1;
    top: 95px;
    right: 20px;
    width: min(41.24vw, 697px);
    height: min(28.86vw, 487.69px);
    pointer-events: none;

    overflow: hidden;
    border: 1px solid rgba(133, 190, 255, .20);
    border-radius: 18px;
    background: #142f62;
    box-shadow:
        0 26px 70px rgba(0, 0, 0, .24),
        0 0 46px rgba(61, 145, 255, .10);
}

/* Harmonize only the left edge of the video panel with the hero palette.
   The tint falls away quickly so the center/right video colors and bright nodes stay crisp. */
.hero__video-shell::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(90deg,
        rgba(13, 35, 126, .50) 0%,
        rgba(16, 42, 134, .37) 10%,
        rgba(19, 49, 136, .21) 20%,
        rgba(21, 53, 132, .10) 29%,
        rgba(18, 49, 132, .07) 38%,
        rgba(18, 49, 132, .10) 50%,
        rgba(18, 49, 132, .07) 62%,
        transparent 66%,
        rgba(13, 45, 99, .12) 82%,
        rgba(12, 42, 91, .24) 100%);
    content: "";
}
.hero__video {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: min(51.31vw, 867px);
    height: min(28.86vw, 487.69px);
    max-width: none;
    object-fit: cover;
    opacity: 1;
    filter: hue-rotate(0deg) saturate(.86) contrast(1.14) brightness(.92);
    transform: translateX(-52.75%) scale(1.12);
    transform-origin: center center;
    -webkit-mask: none;
    mask: none;
}

/* Matching buttons: no movement animation. */
.button {
    display: inline-flex;
    min-height: 3.85rem;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.65rem;
    border: 1px solid rgba(126,158,220,.62);
    border-radius: .65rem;
    background: rgba(8,20,51,.54);
    color: #f8faff;
    font-weight: 650;
    transition: background-color 160ms ease, border-color 160ms ease;
}
.button:hover,
.button:focus-visible {
    border-color: rgba(176,201,249,.9);
    background: rgba(30,57,112,.66);
}

/* Remaining one-page site */
.proposition, .about {
    display: grid;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    gap: clamp(2rem,7vw,7rem);
    align-items: start;
}
.work-header { max-width: 800px; margin-bottom: clamp(3rem,6vw,5rem); }
.work-header h2 { margin-bottom: .8rem; }
.project {
    display: grid;
    grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr);
    gap: clamp(2rem,6vw,5rem);
    align-items: center;
    padding-block: clamp(3rem,7vw,6rem);
    border-top: 1px solid var(--color-line);
}
.project:first-of-type { padding-top: 0; border-top: 0; }
.project--reverse .project__media { order: 2; }
.project--reverse .project__content { order: 1; }
.project__media {
    min-height: 20rem;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface-soft);
    box-shadow: var(--shadow-soft);
}
.project__media img, .project__media video { width: 100%; height: auto; }
.project__content { max-width: 560px; }
.project__content p { color: #aebdcb; }
.text-link { display: inline-block; margin-top: 1.25rem; color: #9bb6ee; font-weight: 650; }
.text-link::after { margin-left: .35rem; content: "→"; }

.capability-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 1px;
    margin-top: 3rem;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-line);
}
.capability { min-height: 15rem; padding: clamp(1.75rem,4vw,3rem); background: var(--color-surface); }
.capability p, .about__copy p { margin-bottom: 0; color: #aebdcb; }
.about { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
.about__copy { max-width: 680px; }

.contact { text-align: center; }
.contact h2 { max-width: 17ch; margin-inline: auto; }
.contact .lead { margin-inline: auto; }
.contact__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }

.site-footer {
    padding: 2rem 0;
    border-top: 1px solid var(--color-line);
    color: #aebdcb;
    font-size: .86rem;
}
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.site-footer p { margin: 0; }

:focus-visible { outline: 2px solid #9bb6ee; outline-offset: 4px; }
.skip-link {
    position: fixed;
    z-index: 100;
    top: 1rem;
    left: 1rem;
    padding: .7rem 1rem;
    transform: translateY(-200%);
    border-radius: var(--radius-sm);
    background: #fff;
    color: #06102d;
}
.skip-link:focus { transform: translateY(0); }

/* Responsive */
@media (max-width: 1100px) {
    .hero { min-height: 820px; }
    .hero__copy { width: 53%; }
    .hero__video-shell {
        top: 180px;
        right: -7vw;
        width: 52vw;
    }
}

@media (max-width: 800px) {
    .nav-toggle { display: block; }
    .site-nav {
        position: absolute;
        top: 5.5rem;
        right: var(--gutter);
        left: var(--gutter);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        background: rgba(5,15,35,.98);
        box-shadow: var(--shadow-soft);
    }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-line); }
    .site-nav a:last-child { border-bottom: 0; }

    .brand__logo { height: 3.2rem; }
    .brand__word { font-size: 1.55rem; }

    .hero {
        min-height: auto;
        padding: 8.5rem 0 5rem;
    }
    .hero__copy {
        width: 100%;
        max-width: 680px;
        padding-top: 0;
    }
    .hero h1 { max-width: 15ch; font-size: clamp(2.7rem,8vw,4rem); }
    .hero__video-shell {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 720px);
        margin: 2.5rem auto -1rem;
        opacity: .72;
    }
    .hero__content { z-index: 2; }

    .proposition, .project, .about { grid-template-columns: 1fr; }
    .project--reverse .project__media, .project--reverse .project__content { order: initial; }
    .project__content { max-width: none; }
    .capability-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .hero__actions, .contact__actions { align-items: stretch; flex-direction: column; }
    .button { width: 100%; }
    .site-footer__inner { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   HERO RESPONSIVE SAFETY — FINAL OVERRIDE
   Keep the locked video panel untouched. The copy column ends
   before the panel, with deliberate whitespace between them.
   ========================================================= */
@media (min-width: 801px) {
    .hero {
        overflow-x: hidden;
    }

    .hero__copy {
        width: auto;
        max-width: calc(
            100vw - var(--gutter) - 20px - min(41.24vw, 697px) - 4rem
        );
    }

    .hero h1 {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: normal;
        text-wrap: pretty;
    }
}

/* Only genuinely wide desktop screens get the single-line title. */
@media (min-width: 1720px) {
    .hero h1 {
        white-space: nowrap;
    }
}

/* Normal laptop / reduced desktop widths: wrap before the video. */
@media (min-width: 1101px) and (max-width: 1719px) {
    .hero h1 {
        white-space: normal;
    }
}


/* Preferred hero headline: retain wording, slightly reduce desktop size,
   and keep it on one line only where it fits inside the established safe boundary. */
@media (min-width: 1101px) {
    .hero h1 {
        font-size: clamp(1.62rem, 1.58vw, 1.82rem);
        line-height: 1.15;
    }
}

@media (min-width: 1720px) {
    .hero h1 {
        white-space: nowrap;
    }
}


/* =========================================================
   HERO HEADLINE RESPONSIVE GUARANTEE
   The locked video panel is not modified.
   ========================================================= */

/* Desktop: reserve a fixed visual gutter before the video and let
   the headline scale down smoothly enough to remain on one line. */
@media (min-width: 1101px) {
    .hero__copy {
        width: auto;
        max-width: calc(
            100vw - var(--gutter) - 20px - min(41.24vw, 697px) - 3.5rem
        );
        min-width: 0;
    }

    .hero h1 {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        white-space: nowrap;
        font-size: clamp(1.48rem, 1.52vw, 1.78rem);
        line-height: 1.15;
    }
}

/* Tablet/smaller laptop: wrapping is preferable to any collision. */
@media (max-width: 1100px) {
    .hero__copy {
        min-width: 0;
    }

    .hero h1 {
        max-width: 100%;
        white-space: normal;
        text-wrap: balance;
        overflow-wrap: normal;
    }
}


/* =========================================================
   HERO BASELINE + SLIGHTLY LARGER TITLE
   Preserve the responsive safety gap and locked video panel.
   ========================================================= */
@media (min-width: 1101px) {
    .hero h1 {
        font-size: clamp(1.52rem, 1.56vw, 1.82rem);
    }
}


/* =========================================================
   TOP BAR — WORDMARK REFINEMENT
   Hero headline/subtext and locked video are unchanged.
   ========================================================= */
.brand__word {
    color: #8FCBFF;
}

.brand__word sup {
    color: #8FCBFF;
    font-size: .45em;
}


/* TOP BAR — registered mark legibility */
.brand__word sup {
    font-size: .52em;
}


/* =========================================================
   TOP BAR — DESKTOP NAVIGATION POSITION
   Shift the navigation moderately left so it occupies its own
   header space rather than visually aligning with the video.
   ========================================================= */
@media (min-width: 1101px) {
    .site-nav {
        transform: translateX(clamp(-8.75rem, -7vw, -6.25rem));
    }
}


/* =========================================================
   TOP BAR — CENTERED DESKTOP NAVIGATION
   Navigation is centered relative to the viewport so it reads
   as part of the header rather than as a label for the video.
   ========================================================= */
@media (min-width: 1101px) {
    .site-nav {
        position: absolute;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}


/* =========================================================
   TOP BAR — NAVIGATION GLOW HOVER
   No underline. Locked centered navigation position unchanged.
   ========================================================= */
.site-nav a {
    transition:
        color 200ms ease,
        text-shadow 200ms ease,
        transform 200ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: #E8F5FF;
    text-shadow:
        0 4px 10px rgba(143, 203, 255, 0.34),
        0 8px 20px rgba(105, 226, 255, 0.20),
        0 12px 30px rgba(90, 145, 255, 0.12);
    transform: translateY(-1px);
}

/* Suppress the baseline underline pseudo-element entirely. */
.site-nav a::after {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav a {
        transition: none;
    }

    .site-nav a:hover,
    .site-nav a:focus-visible {
        transform: none;
    }
}


/* TOP BAR — slightly stronger professional hover glow */
.site-nav a:hover,
.site-nav a:focus-visible {
    text-shadow:
        0 3px 8px rgba(143, 203, 255, 0.46),
        0 7px 18px rgba(105, 226, 255, 0.30),
        0 12px 28px rgba(90, 145, 255, 0.18);
}


/* TOP BAR — stronger but restrained navigation glow */
.site-nav a:hover,
.site-nav a:focus-visible {
    color: #F2FAFF;
    text-shadow:
        0 0 5px rgba(210, 239, 255, 0.58),
        0 4px 10px rgba(143, 203, 255, 0.58),
        0 8px 20px rgba(105, 226, 255, 0.40),
        0 14px 32px rgba(90, 145, 255, 0.24);
}


/* =========================================================
   HERO BUTTONS
   Equal sizing, differentiated primary action, and restrained
   blue/cyan gradient glow on hover.
   ========================================================= */
.hero__actions {
    align-items: stretch;
}

.hero__actions .button {
    width: 18rem;
    min-width: 18rem;
    justify-content: center;
    transition:
        background 200ms ease,
        border-color 200ms ease,
        box-shadow 220ms ease,
        transform 200ms ease;
}

/* Primary action: subtly brighter/bluer than the secondary action. */
.hero__actions .button:first-child {
    background:
        linear-gradient(
            180deg,
            rgba(28, 61, 126, 0.72) 0%,
            rgba(18, 39, 86, 0.82) 100%
        );
    border-color: rgba(143, 203, 255, 0.58);
}

/* Secondary action retains the quieter existing dark treatment. */
.hero__actions .button:last-child {
    background: rgba(7, 17, 48, 0.52);
}

/* Both actions gain a controlled gradient-like glow beneath on hover. */
.hero__actions .button:hover,
.hero__actions .button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(143, 203, 255, 0.82);
    box-shadow:
        0 8px 14px rgba(94, 151, 255, 0.22),
        0 14px 26px rgba(77, 190, 255, 0.18),
        0 22px 40px rgba(105, 226, 255, 0.10);
}

.hero__actions .button:first-child:hover,
.hero__actions .button:first-child:focus-visible {
    background:
        linear-gradient(
            180deg,
            rgba(39, 79, 157, 0.82) 0%,
            rgba(21, 48, 104, 0.90) 100%
        );
}

.hero__actions .button:last-child:hover,
.hero__actions .button:last-child:focus-visible {
    background:
        linear-gradient(
            180deg,
            rgba(24, 49, 104, 0.72) 0%,
            rgba(11, 27, 66, 0.82) 100%
        );
}

@media (max-width: 700px) {
    .hero__actions .button {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__actions .button {
        transition: none;
    }

    .hero__actions .button:hover,
    .hero__actions .button:focus-visible {
        transform: none;
    }
}


/* =========================================================
   HERO BUTTONS — LOCKED COLORS / REFINED SIZE
   Preserve accepted button colors and hover glow.
   ========================================================= */
.hero__actions .button {
    width: 16.25rem;
    min-width: 16.25rem;
}

.hero__actions .button:hover,
.hero__actions .button:focus-visible {
    transform: none;
}

@media (max-width: 700px) {
    .hero__actions .button {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   HERO BUTTONS — NARROWER
   Hover effect and button colors are locked.
   ========================================================= */
.hero__actions .button {
    width: 14.75rem;
    min-width: 14.75rem;
}

@media (max-width: 700px) {
    .hero__actions .button {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================================
   HERO — LOCKED / HEIGHT ONLY
   No other hero styling changes.
   ========================================================= */
@media (min-width: 1101px) {
    .hero {
        min-height: 82svh;
    }
}


/* =========================================================
   OUR WORK — SECTION OPEN + FEATURED PROXIQUEUE
   Locked hero above is unchanged.
   ========================================================= */
#work {
    position: relative;
    padding-block: clamp(5rem, 8vw, 8rem);
    background:
        radial-gradient(circle at 78% 22%, rgba(46, 86, 168, .10), transparent 34rem),
        #071127;
}

#work .work-header {
    max-width: 56rem;
    margin-bottom: clamp(3.25rem, 5vw, 5rem);
}

#work .work-header h2 {
    margin-bottom: .8rem;
    font-size: clamp(2.35rem, 3.5vw, 3.6rem);
    font-weight: 620;
}

#work .work-header .lead {
    max-width: 48rem;
    margin-bottom: 0;
    color: #b9c7e7;
}

#work .project:first-of-type {
    grid-template-columns: minmax(0, 1.16fr) minmax(20rem, .84fr);
    gap: clamp(2.5rem, 5.5vw, 5.5rem);
    padding: clamp(2rem, 3vw, 3rem);
    border: 1px solid rgba(143, 203, 255, .16);
    border-radius: 1.5rem;
    background:
        linear-gradient(135deg, rgba(19, 42, 91, .50), rgba(8, 20, 48, .72));
    box-shadow: 0 28px 70px rgba(0, 0, 0, .20);
}

#work .project:first-of-type .project__media {
    min-height: 0;
    border-color: rgba(143, 203, 255, .20);
    border-radius: 1.1rem;
    background: #08142f;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .24);
}

#work .project:first-of-type .project__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1648 / 928;
    object-fit: cover;
}

#work .project:first-of-type .project__content {
    max-width: 34rem;
}

#work .project:first-of-type .eyebrow {
    margin-bottom: .85rem;
    color: #8FCBFF;
}

#work .project:first-of-type h3 {
    margin-bottom: .85rem;
    font-size: clamp(2rem, 3vw, 3rem);
}

#work .project:first-of-type h4 {
    margin-bottom: 1.15rem;
    color: #eef5ff;
    font-size: clamp(1.15rem, 1.45vw, 1.35rem);
    line-height: 1.35;
}

#work .project:first-of-type p:not(.eyebrow) {
    color: #b8c6df;
}

#work .project:first-of-type .text-link {
    color: #8FCBFF;
    transition: color 180ms ease, text-shadow 180ms ease;
}

#work .project:first-of-type .text-link:hover,
#work .project:first-of-type .text-link:focus-visible {
    color: #e7f5ff;
    text-shadow: 0 4px 14px rgba(105, 226, 255, .24);
}

@media (max-width: 900px) {
    #work .project:first-of-type {
        grid-template-columns: 1fr;
        gap: 2.25rem;
        padding: clamp(1.25rem, 4vw, 2rem);
    }

    #work .project:first-of-type .project__content {
        max-width: 44rem;
    }
}

@media (max-width: 520px) {
    #work {
        padding-block: 4rem;
    }

    #work .work-header {
        margin-bottom: 2.5rem;
    }

    #work .project:first-of-type {
        border-radius: 1.15rem;
    }
}


/* =========================================================
   OUR WORK — REFINEMENT
   Hero design remains locked.
   ========================================================= */
#work {
    padding-top: clamp(3rem, 4.5vw, 4.5rem);
}

#work .work-header .lead {
    max-width: 58rem;
    font-size: clamp(1.25rem, 1.55vw, 1.55rem);
    line-height: 1.55;
}

/* Crop the white surround built into the promotional artwork. */
#work .project:first-of-type .project__media {
    overflow: hidden;
    padding: 0;
    background: #08142f;
}

#work .project:first-of-type .project__media img {
    width: calc(100% + 1.6rem);
    max-width: none;
    margin: -.8rem;
    aspect-ratio: auto;
    object-fit: cover;
}

.proxiqueue-brand__proxi {
    color: #ffffff;
}

.proxiqueue-brand__queue {
    color: #00d9f5;
}

#work .text-link:hover .proxiqueue-brand__proxi,
#work .text-link:focus-visible .proxiqueue-brand__proxi {
    color: #ffffff;
}

#work .text-link:hover .proxiqueue-brand__queue,
#work .text-link:focus-visible .proxiqueue-brand__queue {
    color: #69e2ff;
}

@media (max-width: 900px) {
    #work {
        padding-top: clamp(2.75rem, 7vw, 3.75rem);
    }

    #work .work-header .lead {
        font-size: clamp(1.15rem, 3.4vw, 1.35rem);
    }
}


/* =========================================================
   SECTION BOUNDARY CORRECTION
   Hero: shorter desktop composition.
   Our Work: related blue/navy palette, visibly distinct surface.
   ========================================================= */
@media (min-width: 1101px) {
    .hero {
        min-height: 74svh;
    }
}

#work {
    padding-top: clamp(3rem, 4.5vw, 4.5rem);
    background:
        radial-gradient(
            ellipse 52% 72% at 72% 28%,
            rgba(40, 92, 174, 0.13) 0%,
            rgba(25, 61, 126, 0.06) 48%,
            transparent 76%
        ),
        linear-gradient(
            90deg,
            #07152f 0%,
            #0a1d3f 58%,
            #102750 100%
        );
}


/* =========================================================
   HERO HEIGHT + OUR WORK BACKGROUND — AUTHORITATIVE OVERRIDE
   ========================================================= */

/* Explicit desktop height: do not let the earlier min-height rule keep
   the hero taller than intended. */
@media (min-width: 1101px) {
    .hero {
        min-height: 0;
        height: clamp(620px, 68svh, 680px);
        box-sizing: border-box;
    }
}

/* Same visual family as the hero, but intentionally distinct:
   slightly deeper/cooler gradient rather than a flat dark section. */
#work {
    background:
        radial-gradient(
            ellipse 55% 72% at 76% 32%,
            rgba(40, 92, 174, .12) 0%,
            rgba(30, 72, 150, .055) 48%,
            transparent 76%
        ),
        linear-gradient(
            90deg,
            #081d3d 0%,
            #0b2c5c 30%,
            #123976 54%,
            #1b3d78 74%,
            #252c61 100%
        );
}


/* =========================================================
   HERO HEIGHT — FINAL SPACING CORRECTION
   Remove the excessive empty area beneath the locked hero
   content. No hero child positioning or styling is changed.
   ========================================================= */
@media (min-width: 1101px) {
    .hero {
        min-height: 0;
        height: clamp(540px, 58svh, 590px);
    }
}


/* =========================================================
   OUR WORK — DISTINCT SECTION BACKGROUND
   Hero height above is locked and unchanged.
   ========================================================= */
#work {
    background:
        radial-gradient(
            ellipse 48% 72% at 76% 30%,
            rgba(55, 112, 205, .16) 0%,
            rgba(34, 78, 157, .07) 48%,
            transparent 76%
        ),
        linear-gradient(
            90deg,
            #0b2144 0%,
            #123368 38%,
            #1a4487 66%,
            #263b78 100%
        );
}


/* =========================================================
   OUR WORK — PROXIQUEUE OUTER CARD REMOVED
   Our Work section background is locked and unchanged.
   ========================================================= */
#work .project:first-of-type {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}


/* =========================================================
   PROXIQUEUE — IMAGE + VISIT LINK REFINEMENT
   ========================================================= */

/* Remove the remaining white edge built into the image by cropping
   slightly farther inside the artwork. */
#work .project:first-of-type .project__media {
    overflow: hidden;
    border: 0;
    background: transparent;
}

#work .project:first-of-type .project__media img {
    width: calc(100% + 3rem);
    max-width: none;
    margin: -1.5rem;
}

/* "Visit" remains fully white; brand colors apply only to ProxiQueue. */
#work .project:first-of-type .text-link {
    color: #ffffff;
}

#work .project:first-of-type .text-link:hover,
#work .project:first-of-type .text-link:focus-visible {
    color: #ffffff;
}


/* =========================================================
   OUR WORK — PROJECT DIVIDER
   Add breathing room below ProxiQueue and strengthen divider.
   ========================================================= */
#work .project:first-of-type {
    padding-bottom: 2.25rem;
    margin-bottom: 0;
    border-bottom: 2px solid rgba(143, 203, 255, 0.30);
}


/* =========================================================
   PROXIQUEUE — CLICKABLE ARTWORK + HEADING
   ========================================================= */
#work .project__link-target,
#work .project__heading-link {
    cursor: pointer;
}

#work .project__link-target {
    display: block;
    text-decoration: none;
}

#work .project__heading-link {
    display: inline-block;
    text-decoration: none;
}

#work .project__link-target:focus-visible,
#work .project__heading-link:focus-visible {
    outline: 2px solid rgba(143, 203, 255, .9);
    outline-offset: 5px;
}


/* =========================================================
   PROXIQUEUE — STRONGER PROFESSIONAL LINK GLOW
   Applies to heading and Visit link. No layout changes.
   ========================================================= */
#work .project__heading-link,
#work .project:first-of-type .text-link {
    transition:
        color 200ms ease,
        text-shadow 200ms ease;
}

#work .project__heading-link:hover,
#work .project__heading-link:focus-visible,
#work .project:first-of-type .text-link:hover,
#work .project:first-of-type .text-link:focus-visible {
    text-shadow:
        0 0 5px rgba(220, 244, 255, 0.62),
        0 3px 10px rgba(143, 203, 255, 0.62),
        0 7px 20px rgba(105, 226, 255, 0.44),
        0 12px 30px rgba(90, 145, 255, 0.28);
}

/* Ensure the split-color ProxiQueue heading participates in the glow
   while preserving its locked white/cyan brand colors. */
#work .project__heading-link:hover .proxiqueue-brand,
#work .project__heading-link:focus-visible .proxiqueue-brand,
#work .project:first-of-type .text-link:hover .proxiqueue-brand,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand {
    text-shadow:
        0 0 5px rgba(220, 244, 255, 0.62),
        0 3px 10px rgba(143, 203, 255, 0.62),
        0 7px 20px rgba(105, 226, 255, 0.44),
        0 12px 30px rgba(90, 145, 255, 0.28);
}


/* =========================================================
   PROXIQUEUE — REFINED HOVER GLOW
   Reduced from the previous effect; still clearly visible.
   ========================================================= */
#work .project__heading-link:hover,
#work .project__heading-link:focus-visible,
#work .project:first-of-type .text-link:hover,
#work .project:first-of-type .text-link:focus-visible,
#work .project__heading-link:hover .proxiqueue-brand,
#work .project__heading-link:focus-visible .proxiqueue-brand,
#work .project:first-of-type .text-link:hover .proxiqueue-brand,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand {
    text-shadow:
        0 0 4px rgba(220, 244, 255, 0.42),
        0 3px 9px rgba(143, 203, 255, 0.38),
        0 6px 16px rgba(105, 226, 255, 0.24);
}


/* =========================================================
   PROXIQUEUE — CRISP HOVER GLOW
   Match the character of the locked navigation glow without
   changing layout, movement, or ProxiQueue brand colors.
   ========================================================= */
#work .project__heading-link:hover,
#work .project__heading-link:focus-visible,
#work .project:first-of-type .text-link:hover,
#work .project:first-of-type .text-link:focus-visible,
#work .project__heading-link:hover .proxiqueue-brand,
#work .project__heading-link:focus-visible .proxiqueue-brand,
#work .project:first-of-type .text-link:hover .proxiqueue-brand,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand {
    text-shadow:
        0 0 2px rgba(220, 244, 255, 0.58),
        0 2px 5px rgba(143, 203, 255, 0.48),
        0 4px 9px rgba(105, 226, 255, 0.30);
}


/* =========================================================
   PROXIQUEUE — CRISP, DEFINED HOVER
   Tight highlight rather than broad haze.
   ========================================================= */
#work .project__heading-link:hover,
#work .project__heading-link:focus-visible,
#work .project:first-of-type .text-link:hover,
#work .project:first-of-type .text-link:focus-visible,
#work .project__heading-link:hover .proxiqueue-brand,
#work .project__heading-link:focus-visible .proxiqueue-brand,
#work .project:first-of-type .text-link:hover .proxiqueue-brand,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand {
    text-shadow:
        0 0 1px rgba(255,255,255,.92),
        0 0 3px rgba(143,203,255,.68),
        0 1px 5px rgba(105,226,255,.30);
}


/* =========================================================
   PROXIQUEUE — SHADOW-GRADIENT HOVER
   Keep text perfectly sharp; place the effect beneath it.
   ========================================================= */
#work .project__heading-link,
#work .project:first-of-type .text-link {
    position: relative;
    z-index: 0;
    text-shadow: none;
}

#work .project__heading-link .proxiqueue-brand,
#work .project:first-of-type .text-link .proxiqueue-brand {
    text-shadow: none;
}

#work .project__heading-link::after,
#work .project:first-of-type .text-link::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 8%;
    right: 8%;
    bottom: -0.28em;
    height: 0.42em;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(72, 145, 255, 0.16) 18%,
        rgba(64, 207, 255, 0.58) 50%,
        rgba(72, 145, 255, 0.16) 82%,
        transparent 100%
    );
    clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
    transform: translateY(3px) scaleX(0.88);
    transition: opacity 180ms ease, transform 180ms ease;
}

#work .project__heading-link:hover,
#work .project__heading-link:focus-visible,
#work .project:first-of-type .text-link:hover,
#work .project:first-of-type .text-link:focus-visible,
#work .project__heading-link:hover .proxiqueue-brand,
#work .project__heading-link:focus-visible .proxiqueue-brand,
#work .project:first-of-type .text-link:hover .proxiqueue-brand,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand {
    text-shadow: none;
}

#work .project__heading-link:hover::after,
#work .project__heading-link:focus-visible::after,
#work .project:first-of-type .text-link:hover::after,
#work .project:first-of-type .text-link:focus-visible::after {
    opacity: 1;
    transform: translateY(3px) scaleX(1);
}


/* =========================================================
   PROXIQUEUE — RESTRAINED PROFESSIONAL HOVER
   Crisp color/luminance shift only. No glow, blur, bar,
   shadow, scaling, or movement of the heading text.
   ========================================================= */
#work .project__heading-link,
#work .project:first-of-type .text-link {
    text-shadow: none;
}

#work .project__heading-link::after,
#work .project:first-of-type .text-link::after {
    content: none;
    display: none;
}

#work .project__heading-link .proxiqueue-brand,
#work .project:first-of-type .text-link .proxiqueue-brand,
#work .project__heading-link .proxiqueue-brand__proxi,
#work .project__heading-link .proxiqueue-brand__queue,
#work .project:first-of-type .text-link .proxiqueue-brand__proxi,
#work .project:first-of-type .text-link .proxiqueue-brand__queue {
    text-shadow: none;
    transition: color 180ms ease, filter 180ms ease;
}

#work .project__heading-link:hover,
#work .project__heading-link:focus-visible,
#work .project:first-of-type .text-link:hover,
#work .project:first-of-type .text-link:focus-visible,
#work .project__heading-link:hover .proxiqueue-brand,
#work .project__heading-link:focus-visible .proxiqueue-brand,
#work .project:first-of-type .text-link:hover .proxiqueue-brand,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand {
    text-shadow: none;
}

#work .project__heading-link:hover .proxiqueue-brand__proxi,
#work .project__heading-link:focus-visible .proxiqueue-brand__proxi,
#work .project:first-of-type .text-link:hover .proxiqueue-brand__proxi,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand__proxi {
    color: #ffffff;
    filter: brightness(1.12);
}

#work .project__heading-link:hover .proxiqueue-brand__queue,
#work .project__heading-link:focus-visible .proxiqueue-brand__queue,
#work .project:first-of-type .text-link:hover .proxiqueue-brand__queue,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand__queue {
    color: #19e4ff;
    filter: brightness(1.12) saturate(1.08);
}

/* The Visit link's arrow gets the only movement. */
#work .project:first-of-type .text-link {
    display: inline-flex;
    align-items: center;
}

#work .project:first-of-type .text-link::before {
    content: none;
}


/* ProxiQueue hover refinement — make Proxi visibly more vivid too. */
#work .project__heading-link:hover .proxiqueue-brand__proxi,
#work .project__heading-link:focus-visible .proxiqueue-brand__proxi,
#work .project:first-of-type .text-link:hover .proxiqueue-brand__proxi,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand__proxi {
    color: #f2fbff;
    filter: brightness(1.28);
}

#work .project__heading-link:hover .proxiqueue-brand__queue,
#work .project__heading-link:focus-visible .proxiqueue-brand__queue,
#work .project:first-of-type .text-link:hover .proxiqueue-brand__queue,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand__queue {
    color: #26eaff;
    filter: brightness(1.18) saturate(1.12);
}


/* =========================================================
   PROXIQUEUE — FINAL CRISP HOVER REFINEMENT
   Proxi and Queue both visibly react; arrow moves independently.
   No glow, blur, text shadow, or decorative bar.
   ========================================================= */
#work .project__heading-link .proxiqueue-brand__proxi,
#work .project:first-of-type .text-link .proxiqueue-brand__proxi {
    color: #ffffff;
    transition: color 180ms ease;
}

#work .project__heading-link:hover .proxiqueue-brand__proxi,
#work .project__heading-link:focus-visible .proxiqueue-brand__proxi,
#work .project:first-of-type .text-link:hover .proxiqueue-brand__proxi,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand__proxi {
    color: #bfeaff;
    filter: none;
}

#work .project__heading-link:hover .proxiqueue-brand__queue,
#work .project__heading-link:focus-visible .proxiqueue-brand__queue,
#work .project:first-of-type .text-link:hover .proxiqueue-brand__queue,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand__queue {
    color: #26eaff;
    filter: none;
}

#work .project:first-of-type .text-link .text-link__arrow {
    display: inline-block;
    color: currentColor;
    transform: translateX(0);
    transition: transform 180ms ease, color 180ms ease;
}

#work .project:first-of-type .text-link:hover .text-link__arrow,
#work .project:first-of-type .text-link:focus-visible .text-link__arrow {
    color: #bfeaff;
    transform: translateX(4px);
}

/* =========================================================
   PROXIQUEUE — UNIFIED LINK HOVER STATES
   ========================================================= */
#work .project__heading-link .proxiqueue-brand__proxi,
#work .project__heading-link .proxiqueue-brand__queue,
#work .project:first-of-type .text-link .proxiqueue-brand__proxi,
#work .project:first-of-type .text-link .proxiqueue-brand__queue {
    filter: none;
    text-shadow: none;
    transition: color 180ms ease;
}
#work .project__heading-link:hover .proxiqueue-brand__proxi,
#work .project__heading-link:focus-visible .proxiqueue-brand__proxi {
    color: #bfeaff;
}
#work .project__heading-link:hover .proxiqueue-brand__queue,
#work .project__heading-link:focus-visible .proxiqueue-brand__queue {
    color: #26eaff;
}
#work .project:first-of-type .text-link {
    color: #ffffff;
    transition: color 180ms ease;
}
#work .project:first-of-type .text-link:hover,
#work .project:first-of-type .text-link:focus-visible {
    color: #bfeaff;
}
#work .project:first-of-type .text-link:hover .proxiqueue-brand__proxi,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand__proxi {
    color: #bfeaff;
}
#work .project:first-of-type .text-link:hover .proxiqueue-brand__queue,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand__queue {
    color: #26eaff;
}
#work .project:first-of-type .text-link:hover .text-link__arrow,
#work .project:first-of-type .text-link:focus-visible .text-link__arrow {
    color: #bfeaff;
    transform: translateX(4px);
}


/* =========================================================
   PROXIQUEUE HEADING — NO HOVER EFFECT
   Keep the heading clickable, but visually unchanged on
   hover/focus. Visit ProxiQueue retains its own hover effect.
   ========================================================= */
#work .project__heading-link,
#work .project__heading-link:hover,
#work .project__heading-link:focus-visible {
    text-shadow: none;
    filter: none;
}

#work .project__heading-link .proxiqueue-brand__proxi,
#work .project__heading-link:hover .proxiqueue-brand__proxi,
#work .project__heading-link:focus-visible .proxiqueue-brand__proxi {
    color: #ffffff;
    filter: none;
    text-shadow: none;
}

#work .project__heading-link .proxiqueue-brand__queue,
#work .project__heading-link:hover .proxiqueue-brand__queue,
#work .project__heading-link:focus-visible .proxiqueue-brand__queue {
    color: #00d9f5;
    filter: none;
    text-shadow: none;
}

#work .project__heading-link::after,
#work .project__heading-link:hover::after,
#work .project__heading-link:focus-visible::after {
    content: none;
    display: none;
}

/* =========================================================
   PROXIQUEUE HEADING HOVER
   Match the "UNDER DEVELOPMENT" accent color.
   ========================================================= */
#work .project__heading-link:hover .proxiqueue-brand__proxi,
#work .project__heading-link:hover .proxiqueue-brand__queue,
#work .project__heading-link:focus-visible .proxiqueue-brand__proxi,
#work .project__heading-link:focus-visible .proxiqueue-brand__queue {
    color: #8FCBFF;
    filter: none;
    text-shadow: none;
}


/* =========================================================
   PROXIQUEUE HEADING — AUTHORITATIVE HOVER COLOR
   ========================================================= */
#work .project:first-of-type h3 .project__heading-link:hover .proxiqueue-brand > span,
#work .project:first-of-type h3 .project__heading-link:focus-visible .proxiqueue-brand > span {
    color: #8FCBFF !important;
    filter: none !important;
    text-shadow: none !important;
}


/* =========================================================
   VISIT PROXIQUEUE — UNIFIED HOVER COLOR
   Hover anywhere on the link: all text + arrow become
   #8FCBFF. Preserve the existing rightward arrow animation.
   ========================================================= */
#work .project:first-of-type .text-link:hover,
#work .project:first-of-type .text-link:focus-visible,
#work .project:first-of-type .text-link:hover .proxiqueue-brand,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand,
#work .project:first-of-type .text-link:hover .proxiqueue-brand__proxi,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand__proxi,
#work .project:first-of-type .text-link:hover .proxiqueue-brand__queue,
#work .project:first-of-type .text-link:focus-visible .proxiqueue-brand__queue,
#work .project:first-of-type .text-link:hover .text-link__arrow,
#work .project:first-of-type .text-link:focus-visible .text-link__arrow {
    color: #8FCBFF !important;
    filter: none !important;
    text-shadow: none !important;
}

#work .project:first-of-type .text-link:hover .text-link__arrow,
#work .project:first-of-type .text-link:focus-visible .text-link__arrow {
    transform: translateX(4px);
}


/* =========================================================
   PROXIQUEUE CARD — HOVER
   Mirrors the locked hero-button interaction language:
   crisp prominent border + layered blue/cyan drop shadow.
   No movement, scaling, image changes, or blur over the card.
   Heading and Visit-link hover effects remain locked.
   ========================================================= */
#work .project:first-of-type .project__media--proxiqueue {
    border: 1px solid rgba(143, 203, 255, 0.20);
    transition:
        border-color 200ms ease,
        box-shadow 220ms ease;
}

#work .project:first-of-type .project__media--proxiqueue:hover,
#work .project:first-of-type .project__media--proxiqueue:focus-visible {
    border-color: rgba(143, 203, 255, 0.92);
    box-shadow:
        0 8px 14px rgba(94, 151, 255, 0.24),
        0 14px 26px rgba(77, 190, 255, 0.20),
        0 22px 40px rgba(105, 226, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    #work .project:first-of-type .project__media--proxiqueue {
        transition: none;
    }
}


/* =========================================================
   BOLTBETZ — VISIT LINK
   Match the locked ProxiQueue Visit-link interaction.
   Resting text is white; hover/focus changes the entire link
   to #8FCBFF and preserves the rightward arrow animation.
   ========================================================= */
#work .project:nth-of-type(2) .text-link {
    color: #ffffff;
    text-shadow: none;
    transition: color 180ms ease, text-shadow 180ms ease;
}

#work .project:nth-of-type(2) .text-link:hover,
#work .project:nth-of-type(2) .text-link:focus-visible,
#work .project:nth-of-type(2) .text-link:hover .text-link__arrow,
#work .project:nth-of-type(2) .text-link:focus-visible .text-link__arrow {
    color: #8FCBFF !important;
    filter: none !important;
    text-shadow: none !important;
}

#work .project:nth-of-type(2) .text-link .text-link__arrow {
    display: inline-block;
    color: currentColor;
    transform: translateX(0);
    transition: transform 180ms ease, color 180ms ease;
}

#work .project:nth-of-type(2) .text-link:hover .text-link__arrow,
#work .project:nth-of-type(2) .text-link:focus-visible .text-link__arrow {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    #work .project:nth-of-type(2) .text-link .text-link__arrow {
        transition: none;
    }

    #work .project:nth-of-type(2) .text-link:hover .text-link__arrow,
    #work .project:nth-of-type(2) .text-link:focus-visible .text-link__arrow {
        transform: none;
    }
}


/* =========================================================
   BOLTBETZ — ARROW ANIMATION CORRECTION
   BoltBetz uses the .text-link::after arrow, so animate that
   pseudo-element directly. Matches locked ProxiQueue behavior.
   ========================================================= */
#work .project:nth-of-type(2) .text-link::after {
    display: inline-block;
    margin-left: .35rem;
    color: currentColor;
    content: "→";
    transform: translateX(0);
    transition: transform 180ms ease, color 180ms ease;
}

#work .project:nth-of-type(2) .text-link:hover::after,
#work .project:nth-of-type(2) .text-link:focus-visible::after {
    color: #8FCBFF;
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    #work .project:nth-of-type(2) .text-link::after {
        transition: none;
    }

    #work .project:nth-of-type(2) .text-link:hover::after,
    #work .project:nth-of-type(2) .text-link:focus-visible::after {
        transform: none;
    }
}


/* =========================================================
   BOLTBETZ — APPROVED TRANSPARENT ARTWORK
   No dark card/container background. Existing BoltBetz text
   and Visit-link hover interaction remain locked.
   ========================================================= */
#work .project:nth-of-type(2) .project__media--boltbetz {
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#work .project:nth-of-type(2) .project__media--boltbetz img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}


/* =========================================================
   BOLTBETZ — ARTWORK ONLY / NO IMAGE CONTAINER
   Authoritative override: show only the transparent PNG.
   ========================================================= */
#work .project:nth-of-type(2) .project__media,
#work .project:nth-of-type(2) .project__media--boltbetz {
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

#work .project:nth-of-type(2) .project__media--boltbetz img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    object-fit: contain;
}


/* =========================================================
   BOLTBETZ ARTWORK — CLICKABLE / PROXIQUEUE-STYLE HOVER
   Artwork remains transparent. Hover adds a crisp prominent
   border and layered blue/cyan drop shadow without movement.
   ========================================================= */
#work .project:nth-of-type(2) .project__media--boltbetz {
    cursor: pointer;
    border: 1px solid transparent !important;
    border-radius: 1.35rem !important;
    transition:
        border-color 200ms ease,
        box-shadow 220ms ease;
}

#work .project:nth-of-type(2) .project__media--boltbetz:hover,
#work .project:nth-of-type(2) .project__media--boltbetz:focus-visible {
    border-color: rgba(143, 203, 255, 0.92) !important;
    box-shadow:
        0 8px 14px rgba(94, 151, 255, 0.24),
        0 14px 26px rgba(77, 190, 255, 0.20),
        0 22px 40px rgba(105, 226, 255, 0.12) !important;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    #work .project:nth-of-type(2) .project__media--boltbetz {
        transition: none;
    }
}


/* =========================================================
   BOLTBETZ SECTION — LOCKED ARTWORK HOVER / SPACING
   Keep the approved artwork hover unchanged. Tighten the
   space below the BoltBetz row and match the 2px divider
   thickness used above the section.
   ========================================================= */
#work .project:nth-of-type(2) {
    padding-bottom: 2.25rem;
    margin-bottom: 0;
    border-bottom: 2px solid rgba(143, 203, 255, 0.30);
}


/* =========================================================
   IMMERSIVE EDUCATION — APPROVED PROJECT IMAGE
   Show the supplied artwork directly; no dark placeholder
   container/background. Prior locked sections remain unchanged.
   ========================================================= */
#work .project:nth-of-type(3) .project__media--education {
    min-height: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 1.35rem;
    background: transparent;
    box-shadow: none;
}

#work .project:nth-of-type(3) .project__media--education img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    object-fit: contain;
}


/* =========================================================
   IMMERSIVE LEARNING PLATFORM — STATUS ACCENT
   ========================================================= */
#work .project:nth-of-type(3) .eyebrow {
    color: #8FCBFF;
}


/* =========================================================
   IMMERSIVE LEARNING PLATFORM — FINAL POLISH
   Increase visual weight, add restrained capability markers,
   and give the real project artwork the established project
   hover language. The image is intentionally not clickable.
   ========================================================= */
#work .project:nth-of-type(3) {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}

#work .project:nth-of-type(3) .project__media--education {
    border: 1px solid rgba(143, 203, 255, 0.20);
    transition:
        border-color 200ms ease,
        box-shadow 220ms ease;
}

#work .project:nth-of-type(3) .project__media--education:hover {
    border-color: rgba(143, 203, 255, 0.92);
    box-shadow:
        0 8px 14px rgba(94, 151, 255, 0.24),
        0 14px 26px rgba(77, 190, 255, 0.20),
        0 22px 40px rgba(105, 226, 255, 0.12);
}

#work .project:nth-of-type(3) .project__capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .7rem;
    margin-top: 1.45rem;
}

#work .project:nth-of-type(3) .project__capabilities span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .38rem .72rem;
    border: 1px solid rgba(143, 203, 255, 0.28);
    border-radius: 999px;
    background: rgba(10, 31, 67, 0.28);
    color: #dcecff;
    font-size: .82rem;
    font-weight: 650;
    letter-spacing: .015em;
    line-height: 1.15;
}

@media (max-width: 900px) {
    #work .project:nth-of-type(3) {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    #work .project:nth-of-type(3) .project__media--education {
        transition: none;
    }
}


/* =========================================================
   IMMERSIVE LEARNING PLATFORM — LOCKED SECTION DIVIDER
   Match the established 2px project divider and position it
   below the Education content with the same visual language.
   ========================================================= */
#work .project:nth-of-type(3) {
    padding-bottom: 2.25rem;
    margin-bottom: 0;
    border-bottom: 2px solid rgba(143, 203, 255, 0.30);
}


/* =========================================================
   IMMERSIVE LEARNING PLATFORM — BALANCED DIVIDER SPACING
   Equal space above and below the Education content so the
   complete project row is vertically centered between dividers.
   Education content itself remains locked.
   ========================================================= */
#work .project:nth-of-type(3) {
    padding-top: 4.25rem;
    padding-bottom: 4.25rem;
    margin-top: 0;
    margin-bottom: 0;
    align-items: center;
}

/* CAPABILITIES — BUSINESS-FIRST REDESIGN */
#capabilities.capabilities-section{position:relative;overflow:hidden;background:radial-gradient(ellipse 52% 62% at 18% 18%,rgba(55,112,205,.15) 0%,rgba(34,78,157,.06) 50%,transparent 76%),linear-gradient(115deg,#081a36 0%,#0d2852 48%,#123368 100%)}
#capabilities .capabilities-header{max-width:62rem;margin-bottom:2.6rem}
#capabilities .capabilities-header>h2{margin:0 0 1rem;color:#fff;font-size:clamp(2.55rem,4vw,4rem);line-height:.98;letter-spacing:-.045em}
#capabilities .capabilities-header>h3{margin:0 0 1.15rem;color:#fff;font-size:clamp(1.5rem,2.2vw,2.15rem);line-height:1.16;letter-spacing:-.025em}
#capabilities .capabilities-intro{max-width:58rem;margin:0;color:#c9d8ed;font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.7}
#capabilities .capabilities-intro strong{color:#8FCBFF;font-weight:700}
#capabilities .capability-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
#capabilities .capability{min-width:0;padding:1.65rem 1.45rem 1.55rem;border:1px solid rgba(143,203,255,.18);border-radius:1.25rem;background:linear-gradient(145deg,rgba(18,52,103,.76),rgba(8,27,58,.72));box-shadow:0 16px 36px rgba(0,10,30,.12);transition:border-color 200ms ease,box-shadow 220ms ease,background 220ms ease}
#capabilities .capability:hover{border-color:rgba(143,203,255,.62);background:linear-gradient(145deg,rgba(23,65,126,.82),rgba(9,31,66,.78));box-shadow:0 10px 20px rgba(94,151,255,.12),0 18px 34px rgba(77,190,255,.08)}
#capabilities .capability__icon{display:grid;place-items:center;width:3.35rem;height:3.35rem;margin-bottom:1.15rem;border:1px solid rgba(143,203,255,.28);border-radius:.9rem;background:rgba(13,43,86,.68)}
#capabilities .capability__icon svg{width:1.95rem;height:1.95rem;fill:none;stroke:#8FCBFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#capabilities .capability h3{margin:0 0 .7rem;color:#fff;font-size:1.16rem;line-height:1.25}
#capabilities .capability p{margin:0;color:#b9c9df;font-size:.94rem;line-height:1.6}
@media(max-width:1050px){#capabilities .capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){#capabilities .capability-grid{grid-template-columns:1fr}#capabilities .capabilities-header{margin-bottom:2rem}}
@media(prefers-reduced-motion:reduce){#capabilities .capability{transition:none}}


/* =========================================================
   CAPABILITIES — SPACING + BACKGROUND REFINEMENT
   ========================================================= */
#capabilities.capabilities-section {
    padding-top: 4.25rem;
    padding-bottom: 4.25rem;
    background:
        radial-gradient(
            ellipse 46% 68% at 82% 24%,
            rgba(83, 116, 190, .16) 0%,
            rgba(47, 83, 158, .07) 50%,
            transparent 78%
        ),
        linear-gradient(
            105deg,
            #10264c 0%,
            #173665 46%,
            #263f78 100%
        );
}

#capabilities .capabilities-header {
    margin-bottom: 2.35rem;
}


/* =========================================================
   WORK → CAPABILITIES TRANSITION
   Remove the parent Work section's trailing section padding.
   The Education row already owns the spacing below its content,
   so leaving #work's generic section padding created the large
   empty band above Capabilities.
   ========================================================= */
#work.section {
    padding-bottom: 0;
}

/* Keep Capabilities visually related to the site's blue palette
   without duplicating the Our Work gradient. */
#capabilities.capabilities-section {
    padding-top: 4.25rem;
    padding-bottom: 4.25rem;
    background:
        radial-gradient(
            ellipse 58% 90% at 88% 12%,
            rgba(71, 104, 178, .13) 0%,
            rgba(71, 104, 178, .05) 48%,
            transparent 76%
        ),
        linear-gradient(
            100deg,
            #0d2347 0%,
            #14305c 52%,
            #203a70 100%
        );
}


/* CAPABILITIES — REMOVE OUTER GRID CONTAINER APPEARANCE */
#capabilities .capability-grid {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}


/* =========================================================
   HERO → OUR WORK SPACING — RESTORE
   Preserve a deliberate opening interval inside Our Work.
   ========================================================= */
#work.section {
    padding-top: 4.25rem;
}

/* =========================================================
   PROXIQUEUE IMAGE — REMOVE EMBEDDED WHITE CORNERS
   The source artwork contains a light perimeter at its extreme
   edges. Crop slightly inside it while preserving the locked
   media geometry and hover behavior.
   ========================================================= */
#work .project:first-of-type .project__media--proxiqueue {
    overflow: hidden;
    background: #08142f;
}

#work .project:first-of-type .project__media--proxiqueue img {
    display: block;
    width: calc(100% + 4.5rem);
    max-width: none;
    height: auto;
    margin: -2.25rem;
}


/* =========================================================
   HERO → OUR WORK — BOTTOM BREATHING ROOM
   Add space after the locked hero box without changing the
   locked hero height or any video geometry/positioning.
   The added strip continues the hero's own background so the
   video no longer touches the section boundary.
   ========================================================= */
@media (min-width: 1101px) {
    .hero {
        margin-bottom: 2rem;
        overflow: visible;
    }

    .hero::after {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        height: 2rem;
        background:
            linear-gradient(90deg,
                #071b38 0%,
                #0a2854 28%,
                #10356f 52%,
                #183b78 72%,
                #202f68 88%,
                #242858 100%);
        content: "";
        pointer-events: none;
    }
}


/* HERO → OUR WORK — FINAL BREATHING-ROOM ADJUSTMENT */
@media (min-width: 1101px) {
    .hero {
        margin-bottom: 2.75rem;
    }

    .hero::after {
        height: 2.75rem;
    }
}


/* =========================================================
   HERO / SOLUTIONS TYPOGRAPHY + HERO BUTTON WIDTH
   Explicitly requested refinements.
   Preserve all other locked hero and Solutions styling.
   ========================================================= */
@media (min-width: 701px) {
    .hero__actions .button {
        width: 18rem;
        min-width: 18rem;
        white-space: nowrap;
    }
}

.hero h1 {
    font-size: clamp(2.05rem, 2.35vw, 2.55rem);
}

#capabilities .capabilities-header > h2 {
    font-size: clamp(2.25rem, 3.25vw, 3.35rem);
}


/* Footer: Back To The Top */
.back-to-top { display:inline-flex; align-items:center; gap:.45rem; color:#fff; text-decoration:none; transition:color .2s ease; }
.back-to-top__arrow { display:inline-block; transition:transform .2s ease; }
.back-to-top:hover, .back-to-top:focus-visible { color:#8FCBFF; }
.back-to-top:hover .back-to-top__arrow, .back-to-top:focus-visible .back-to-top__arrow { transform:translateY(-4px); }


/* Footer layout: copyright | Back To The Top | location */
.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem 2rem;
}
.site-footer__inner > p:last-child {
    justify-self: end;
}
.site-footer__inner .back-to-top {
    justify-self: center;
}
@media (max-width: 700px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
    .site-footer__inner > p:last-child,
    .site-footer__inner .back-to-top {
        justify-self: center;
    }
}


/* =========================================================
   CONTACT — authoritative closing-section design
   ========================================================= */
#contact.contact {
    padding: 4.75rem 0 5rem;
    background:
        radial-gradient(
            ellipse 52% 78% at 82% 18%,
            rgba(65, 101, 190, .16) 0%,
            rgba(43, 73, 153, .06) 48%,
            transparent 76%
        ),
        linear-gradient(
            115deg,
            #08152f 0%,
            #0c1b3c 52%,
            #171d4a 100%
        );
}

#contact .contact__inner {
    width: min(1080px, calc(100% - 3rem));
    margin: 0 auto;
}

#contact .contact__intro {
    max-width: 800px;
    margin: 0 auto 2.25rem;
    text-align: center;
}

#contact .eyebrow {
    margin: 0 0 .85rem;
}

#contact h2 {
    max-width: 780px;
    margin: 0 auto 1.1rem;
    font-size: clamp(2.15rem, 3.4vw, 3.25rem);
    line-height: 1.08;
}

#contact .lead {
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.7;
}

#contact .contact-form {
    max-width: 880px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(
        135deg,
        rgba(14, 34, 73, .82),
        rgba(17, 27, 66, .78)
    );
    border: 1px solid rgba(143, 203, 255, .20);
    border-radius: 18px;
    box-shadow: 0 22px 55px rgba(2, 8, 25, .22);
}

#contact .contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 1.25rem;
}

#contact .contact-form__field {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

#contact .contact-form__field--wide {
    grid-column: 1 / -1;
}

#contact .contact-form label {
    color: #f4f7ff;
    font-size: .95rem;
    font-weight: 650;
}

#contact .contact-form input,
#contact .contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .9rem 1rem;
    color: #f7f9ff;
    background: rgba(5, 17, 42, .62);
    border: 1px solid rgba(143, 203, 255, .26);
    border-radius: 9px;
    font: inherit;
    outline: none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

#contact .contact-form textarea {
    min-height: 9rem;
    resize: vertical;
}

#contact .contact-form input:focus,
#contact .contact-form textarea:focus {
    background: rgba(7, 22, 53, .82);
    border-color: #8FCBFF;
    box-shadow: 0 0 0 3px rgba(143, 203, 255, .10);
}

#contact .contact-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

#contact .contact-form__submit {
    min-width: 10.75rem;
    cursor: pointer;
}

#contact .contact__email {
    margin: 0;
    color: rgba(231, 237, 252, .78);
}

#contact .contact__email a {
    color: #fff;
    font-weight: 650;
    text-decoration: none;
    transition: color .2s ease;
}

#contact .contact__email a:hover,
#contact .contact__email a:focus-visible {
    color: #8FCBFF;
}

@media (max-width: 700px) {
    #contact.contact {
        padding: 4rem 0 4.25rem;
    }

    #contact .contact__inner {
        width: min(100% - 2rem, 1080px);
    }

    #contact .contact-form {
        padding: 1.35rem;
    }

    #contact .contact-form__grid {
        grid-template-columns: 1fr;
    }

    #contact .contact-form__field--wide {
        grid-column: auto;
    }

    #contact .contact-form__actions {
        align-items: stretch;
        flex-direction: column;
    }

    #contact .contact-form__submit {
        width: 100%;
    }

    #contact .contact__email {
        text-align: center;
    }
}


/* CONTACT — simple launch CTA */
#contact .contact__intro {
    margin-bottom: 0;
}

#contact .contact__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.35rem;
    margin-top: 2rem;
}

#contact .contact__button {
    min-width: 12rem;
}

#contact .contact__address {
    color: #fff;
    font-weight: 650;
    text-decoration: none;
    transition: color .2s ease;
}

#contact .contact__address:hover,
#contact .contact__address:focus-visible {
    color: #8FCBFF;
}

@media (max-width: 600px) {
    #contact .contact__actions {
        flex-direction: column;
        gap: 1rem;
    }

    #contact .contact__button {
        width: 100%;
        max-width: 20rem;
    }
}


/* =========================================================
   CONTACT — final launch refinements
   ========================================================= */
#contact.contact {
    padding: 4.5rem 0 4.75rem;
    background:
        radial-gradient(
            ellipse 54% 82% at 84% 16%,
            rgba(77, 116, 205, .16) 0%,
            rgba(57, 91, 176, .07) 48%,
            transparent 76%
        ),
        linear-gradient(
            105deg,
            #102953 0%,
            #17386d 52%,
            #253f7a 100%
        );
}

#contact .contact__intro {
    max-width: 800px;
    margin: 0 auto;
}

#contact h2 {
    max-width: 720px;
    margin: 0 auto 1.15rem;
    font-size: clamp(2rem, 2.75vw, 2.7rem);
    line-height: 1.12;
}

#contact .lead {
    max-width: 760px;
    margin: 0 auto;
}

#contact .contact__actions {
    justify-content: center;
    margin-top: 2rem;
}

#contact .contact__button {
    min-width: 13rem;
    color: #fff;
    border-color: rgba(143, 203, 255, .52);
    background: linear-gradient(
        135deg,
        rgba(50, 82, 157, .82),
        rgba(24, 45, 103, .92)
    );
    box-shadow: none;
    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        color .2s ease;
}

#contact .contact__button:hover,
#contact .contact__button:focus-visible {
    color: #fff;
    border-color: rgba(143, 203, 255, .90);
    background: linear-gradient(
        135deg,
        rgba(62, 101, 190, .94),
        rgba(29, 55, 123, .98)
    );
    box-shadow:
        0 9px 20px rgba(18, 92, 190, .32),
        0 15px 34px rgba(71, 173, 255, .18);
    transform: none;
}

@media (max-width: 600px) {
    #contact.contact {
        padding: 3.75rem 0 4rem;
    }
}


/* CONTACT — final typography and boundary */
#contact.contact {
    border-top: 0;
}

#contact.contact::before,
#contact.contact::after {
    display: none;
    content: none;
}

#contact h2 {
    max-width: 680px;
    font-size: clamp(1.9rem, 2.45vw, 2.45rem);
}


/* CONTACT boundary + direct email */
#work {
    border-bottom: 0;
}

#work::after {
    display: none;
    content: none;
}

#contact .contact__direct-email {
    margin: 0;
    color: #fff;
    font-size: clamp(1.2rem, 1.55vw, 1.45rem);
    font-weight: 700;
    letter-spacing: .01em;
    user-select: text;
}

#contact .contact__actions {
    margin-top: 2rem;
}


/* Remove the final Our Work divider above Contact. */
#work .project:nth-of-type(3) {
    border-bottom: 0;
}


/* =========================================================
   FOOTER — authoritative final visual treatment
   ========================================================= */
.site-footer {
    padding: 1.65rem 0;
    background:
        linear-gradient(
            100deg,
            #0b2144 0%,
            #102b58 52%,
            #192f65 100%
        );
    border-top: 0;
}

.site-footer__inner {
    color: rgba(239, 244, 255, .88);
    font-size: clamp(1rem, 1.05vw, 1.075rem);
    line-height: 1.4;
}

.site-footer__inner p {
    margin: 0;
}

.site-footer__inner .back-to-top {
    color: #fff;
    font-size: 1.05em;
    font-weight: 600;
}

.site-footer__inner .back-to-top:hover,
.site-footer__inner .back-to-top:focus-visible {
    color: #8FCBFF;
}

@media (max-width: 700px) {
    .site-footer {
        padding: 1.75rem 0;
    }

    .site-footer__inner {
        gap: 1rem;
    }
}


/* =========================================================
   FINAL RESPONSIVE LAUNCH SAFETY
   Desktop locked presentation remains unchanged.
   ========================================================= */

/* At tablet / narrow-laptop widths, stack project rows before
   their two-column content becomes cramped. */
@media (max-width: 900px) {
    #work .project {
        grid-template-columns: 1fr;
    }

    #work .project--reverse .project__media,
    #work .project--reverse .project__content {
        order: initial;
    }

    #work .project__content {
        max-width: none;
    }
}

/* Use the established stacked hero presentation on narrower
   screens where the desktop copy/video geometry would compete. */
@media (min-width: 801px) and (max-width: 900px) {
    .hero {
        min-height: auto;
        padding: 8.5rem 0 5rem;
    }

    .hero__copy {
        width: 100%;
        max-width: 680px;
        padding-top: 0;
    }

    .hero h1 {
        max-width: 15ch;
        white-space: normal;
        text-wrap: balance;
    }

    .hero__video-shell {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 720px);
        margin: 2.5rem auto -1rem;
        opacity: .72;
    }
}

/* Prevent long text/links from forcing horizontal overflow on phones. */
@media (max-width: 520px) {
    .brand__word {
        font-size: 1.4rem;
    }

    .brand {
        gap: .7rem;
    }

    .brand__logo {
        height: 2.9rem;
    }

    #work .project,
    #work .project:first-of-type,
    #capabilities .capability {
        min-width: 0;
    }

    #work .project__content,
    #capabilities .capability,
    .contact__direct-email {
        overflow-wrap: anywhere;
    }
}

/* Header brand is presentation-only, not interactive. */
.brand,
.brand *,
.brand__word,
.brand__word *,
.brand__logo {
    cursor: default !important;
}

/* =========================================================
   MOBILE HERO — FINAL STRUCTURAL OVERRIDE
   On mobile the header participates in document flow, then the
   video, copy, and actions stack naturally. Desktop is untouched.
   ========================================================= */
@media (max-width: 800px) {
    .site-header {
        position: relative;
        inset: auto;
        background:
            linear-gradient(90deg,
                #071b38 0%,
                #0a2854 28%,
                #10356f 52%,
                #183b78 72%,
                #202f68 88%,
                #242858 100%);
    }

    .site-header__inner {
        min-height: 6.5rem;
    }

    .hero {
        min-height: 0;
        height: auto;
        padding: 1rem 0 3.5rem;
        overflow: hidden;
    }

    .hero__video-shell {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: min(calc(100% - (2 * var(--gutter))), 720px);
        height: auto;
        aspect-ratio: 16 / 9;
        margin: 0 auto 2rem;
        opacity: 1;
        transform: none;
    }

    .hero__video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        transform: none;
    }

    .hero__content {
        position: relative;
        z-index: 2;
    }

    .hero__copy {
        width: 100%;
        max-width: 680px;
        padding-top: 0;
        margin: 0;
        transform: none;
    }

    .hero h1 {
        max-width: 14ch;
        margin: 0 0 1.5rem;
        white-space: normal;
        font-size: clamp(2.35rem, 7.2vw, 3.25rem);
        font-weight: 600;
        line-height: 1.06;
        text-wrap: balance;
    }

    .hero .lead {
        max-width: 38rem;
        margin: 0;
        font-size: clamp(1.05rem, 3.2vw, 1.25rem);
        line-height: 1.55;
    }

    .hero__actions {
        margin-top: 1.75rem;
        gap: .9rem;
    }

    .hero__actions .button {
        min-height: 4rem;
        padding: .9rem 1.25rem;
    }
}

@media (max-width: 520px) {
    .site-header__inner {
        min-height: 5.75rem;
    }

    .hero {
        padding-top: .75rem;
        padding-bottom: 3rem;
    }

    .hero__video-shell {
        margin-bottom: 1.65rem;
        border-radius: 14px;
    }

    .hero h1 {
        max-width: 12ch;
        margin-bottom: 1.25rem;
        font-size: clamp(2.2rem, 10vw, 2.85rem);
        line-height: 1.05;
    }

    .hero .lead {
        font-size: clamp(1.03rem, 4.7vw, 1.18rem);
        line-height: 1.5;
    }

    .hero__actions {
        margin-top: 1.5rem;
        gap: .8rem;
    }

    .hero__actions .button {
        min-height: 3.75rem;
        padding: .8rem 1rem;
    }
}