/* === aluminium-powder.css === */

@font-face {
    font-family: "Neue Haas Grotesk Text Pro";
    src: url("/dist/fonts/NHaasGroteskTXPro-Rg.ttf") format("truetype");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

.page-gap {
    --nav-h: 75px;
    background: #f2f2f2;
    color: #000;
    font-family: "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.page-gap #navbar { opacity: 1; transform: none; }
.page-gap #site-footer { background: #021c25; }

/* Fluid: scale the fixed 1440 design to fill the viewport edge-to-edge */
.gap-scale {
    width: 1440px;
    margin: 0 auto;
    zoom: calc(100vw / 1440px);
}
.gap-stage img { max-width: none; }
.gap-stage {
    position: relative;
    width: 1440px;
    height: 2474px;
    margin: 0 auto;
    background: #f2f2f2;
    overflow: hidden;
}

/* ── Hero ─────────────────────────────────────────────────── */
.gap-hero { position: absolute; top: 0; left: 0; width: 1440px; height: 600px; overflow: hidden; background: #021c25; }
.gap-hero__bg { position: absolute; left: 0; top: 0; width: 1440px; height: 600px; object-fit: cover; object-position: 50% 62%; }
.gap-hero__overlay { position: absolute; left: 0; top: 0; width: 1440px; height: 600px; background: #000; opacity: 0.3; }
.gap-hero__content { position: absolute; left: 61px; top: 300px; width: 953px; }
.gap-crumb { margin: 0; font-size: 18px; line-height: 16px; font-weight: 400; color: #f2f2f2; }
.gap-crumb strong { font-weight: 700; }
.gap-hero__title { margin: 17px 0 0; font-size: 80px; line-height: 80px; font-weight: 700; color: #fff; text-transform: uppercase; text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25); }
.gap-hero__swipe { position: absolute; left: 1328px; top: 488px; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 18px; line-height: 16px; }

/* ── JV statement ─────────────────────────────────────────── */
.gap-statement { position: absolute; left: 155px; top: 650px; width: 1131px; margin: 0; font-size: 32px; line-height: 40px; font-weight: 500; color: #074158; text-align: center; }
.gap-statement strong { font-weight: 700; }

/* ── Heading + intro ──────────────────────────────────────── */
.gap-heading { position: absolute; left: 124px; top: 764px; width: 1193px; margin: 0; font-size: 60px; line-height: 60px; font-weight: 700; color: #000; text-align: center; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); }
.gap-intro { position: absolute; left: 122px; top: 859px; width: 1197px; font-size: 24px; line-height: 32px; font-weight: 400; color: #000; }
.gap-intro p { margin: 0; }
.gap-intro p + p { margin-top: 32px; }

/* ── Three-circle diagram ─────────────────────────────────── */
.gap-diagram { position: absolute; left: 190px; top: 1375px; width: 1060px; height: 433px; }
/* Each pillar's bbox sits flush against the viewBox edge, so the 1.06 hover scale pushes it
   ~9px outside; an SVG clips to its viewport by default, which sliced the circles square. */
.gap-diagram__svg { position: absolute; inset: 0; width: 1060px; height: 433px; overflow: visible; }
.gap-diagram__svg #gapSupply, .gap-diagram__svg #gapLowCarbon, .gap-diagram__svg #gapIndustrial { cursor: pointer; }
.gap-circle-title { position: absolute; margin: 0; font-size: 32px; line-height: 34px; font-weight: 700; text-align: center; }
.gap-circle-title--scs { left: 227px; top: 1517px; width: 211px; color: #074158; }
.gap-circle-title--ind { left: 1003px; top: 1517px; width: 211px; color: #074158; }
.gap-circle-title--lcm { left: 604px; top: 1631px; width: 228px; color: #074158; }
.gap-caption { position: absolute; margin: 0; font-size: 20px; line-height: 24px; font-weight: 500; color: #021c25; text-align: center; }
.gap-caption--top { left: 515px; top: 1393px; width: 410px; }
.gap-caption--left { left: 127px; top: 1704px; width: 410px; }
.gap-caption--right { left: 903px; top: 1704px; width: 410px; }

/* ── Advanced Manufacturing band ──────────────────────────── */
.gap-adv { position: absolute; left: 61px; top: 1908px; width: 1318px; height: 466px; border-radius: 10px; overflow: hidden; background: #507989; }
.gap-adv__img { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: none; }
.gap-adv__panel { position: absolute; inset: 0; background: linear-gradient(90deg, #043a4d 0%, #021c25 46%, rgba(2, 28, 37, 0) 66%); }
.gap-adv__title { position: absolute; left: 67px; top: 50px; width: 535px; margin: 0; font-size: 60px; line-height: 60px; font-weight: 700; color: #f2f2f2; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); }
.gap-adv__body { position: absolute; left: 67px; top: 205px; width: 535px; margin: 0; font-size: 20px; line-height: 27px; font-weight: 400; color: #f2f2f2; }

/* ── Phone layout ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .gap-scale { zoom: 1 !important; width: auto; }
    .gap-stage { width: auto; height: auto; overflow: visible; }
    .gap-stage img { max-width: 100%; }

    /* hero */
    .gap-hero { position: relative; width: auto; height: 800px; }
    .gap-hero__bg { width: 100%; height: 100%; }
    .gap-hero__overlay { width: 100%; height: 100%; }
    .gap-hero__content { left: 16px; right: 16px; top: auto; bottom: 32px; width: auto; }
    .gap-crumb { font-size: 13px; line-height: 15px; }
    .gap-hero__title { margin-top: 10px; font-size: 40px; line-height: 42px; }
    .gap-hero__swipe { left: auto; right: 16px; top: auto; bottom: 20px; font-size: 14px; }

    /* JV statement + intro */
    .gap-statement { position: relative; left: 0; top: 0; width: auto; margin: 32px 16px 0; font-size: 20px; line-height: 28px; }
    .gap-heading { position: relative; left: 0; top: 0; width: auto; margin: 24px 16px 0; font-size: 32px; line-height: 38px; }
    .gap-intro { position: relative; left: 0; top: 0; width: auto; margin: 18px 16px 0; font-size: 16px; line-height: 24px; }
    .gap-intro p + p { margin-top: 20px; }

    /* three-circle diagram — svg scales, captions stack below */
    .gap-diagram { position: relative; left: 0; top: 0; width: auto; height: auto; margin: 32px 16px 0; }
    .gap-diagram__svg { position: static; width: 100%; height: auto; }
    .gap-caption {
        position: relative; left: 0; top: 0; width: auto;
        display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 10px; align-items: start;
        margin: 14px 16px 0; font-size: 16px; line-height: 24px; text-align: left;
    }
    .gap-caption::before { content: "•"; color: #021c25; font-size: 16px; line-height: 24px; }

    /* advanced manufacturing band — stacked card */
    .gap-adv { position: relative; left: 0; top: 0; width: auto; height: auto; margin: 32px 16px 40px; background: #021c25; }
    .gap-adv__img { position: static; transform: none; display: block; width: 100%; height: auto; }
    .gap-adv__panel { display: none; }  /* horizontal fade built for the 1318px band */
    .gap-adv__title { position: static; width: auto; margin: 22px 18px 0; font-size: 32px; line-height: 38px; }
    .gap-adv__body { position: static; width: auto; margin: 14px 18px 24px; font-size: 16px; line-height: 24px; }
}

/* ── Full-bleed hero past the 16" cap ───────────────────────────────────── */
@media (min-width: 1729px) {
    .gap-stage { overflow: visible; }
    .gap-hero { left: var(--bleed-left); width: var(--bleed-w); }
    .gap-hero__bg,
    .gap-hero__overlay { width: var(--bleed-w); }
    .gap-hero__content { left: calc(61px + var(--bleed-shift)); }
    .gap-hero__swipe { left: calc(1328px + var(--bleed-shift)); }
}