/* === aluminium-recovery.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-alr {
    --nav-h: 75px;
    --alr-scale: 1;
    background: #f2f2f2;
    color: #000;
    font-family: "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.page-alr #navbar {
    opacity: 1;
    transform: none;
}
.page-alr #site-footer {
    background: #021c25;
}

/* Fluid: scale the fixed 1440 design to fill the viewport edge-to-edge */
.alr-scale {
    width: 1440px;
    margin: 0 auto;
    zoom: calc(100vw / 1440px);
}
.alr-page {
    width: 1440px;
    margin: 0 auto;
    background: #f2f2f2;
    overflow: hidden;
}
.alr-page * {
    font-family: inherit;
}

/* Figma-canvas stage: pixel-exact 1440px layout, scaled below 1440 */
.alr-stage {
    position: relative;
    left: 50%;
    width: 1440px;
    transform: translateX(-50%) scale(var(--alr-scale));
    transform-origin: top center;
}

.alr-h2 {
    margin: 0;
    color: #000;
    font-size: 60px;
    font-weight: 700;
    line-height: 60px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}

/* ── Hero ─────────────────────────────────────────────────── */
.alr-hero {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background: #021c25;
}
.alr-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 80%;
}
.alr-hero__overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.3;
}
.alr-hero__content {
    position: absolute;
    left: 61px;
    bottom: 115px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 953px;
    z-index: 2;
}
.alr-crumb {
    font-size: 18px;
    line-height: 16px;
    font-weight: 400;
    color: #f2f2f2;
    margin: 0;
}
.alr-crumb strong {
    font-weight: 700;
}
.alr-hero__title {
    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);
    margin: 0;
}
.alr-hero__swipe {
    position: absolute;
    right: max(70px, calc(50% - 650px));
    bottom: 31px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
}

/* ── Statement ────────────────────────────────────────────── */
.alr-statement {
    max-width: 1197px;
    margin: 34px auto 0;
}
.alr-statement p {
    margin: 0;
    font-size: 32px;
    line-height: 40px;
    font-weight: 500;
    color: #074158;
    text-align: center;
}
.alr-statement strong {
    font-weight: 700;
}

/* ── Waste as an Opportunity ──────────────────────────────── */
.alr-opportunity {
    margin-top: 50px;
    text-align: center;
}
.alr-opportunity .alr-h2 {
    text-align: center;
}
.alr-body {
    max-width: 1197px;
    margin: 35px auto 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    color: #000;
    text-align: left;
}
.alr-body p {
    margin: 0;
}
.alr-body p + p {
    margin-top: 32px;
}

/* ── Recovery stats infographic ───────────────────────────── */
.alr-stats-wrap {
    height: calc(299px * var(--alr-scale));
    margin-top: 54px;
}
.alr-stats {
    height: 299px;
}
.alr-stats__curve {
    position: absolute;
    top: 35.5px;
    width: 524px;
    height: 228px;
}
.alr-stats__curve--left {
    left: 119.5px;
}
.alr-stats__curve--right {
    left: 795.5px;
}
.alr-stats__logo-outer {
    position: absolute;
    left: 564px;
    top: 0;
    width: 298.67px;
    height: 298.66px;
}
.alr-stats__logo-inner {
    position: absolute;
    left: 599.86px;
    top: 35.86px;
    width: 226.95px;
    height: 226.95px;
}
.alr-stats__num {
    position: absolute;
    top: 91px;
    margin: 0;
    font-size: 48px;
    line-height: 48px;
    font-weight: 700;
    color: #074158;
    text-align: center;
}
.alr-stats__num--left {
    left: 190px;
    width: 344px;
}
.alr-stats__num--right {
    left: 893px;
    width: 356px;
}
.alr-stats__sub {
    position: absolute;
    top: 149px;
    margin: 0;
    font-size: 24px;
    line-height: normal;
    font-weight: 400;
    color: #000;
    text-align: center;
}
.alr-stats__sub--left {
    left: 190px;
    width: 344px;
}
.alr-stats__sub--right {
    left: 893px;
    width: 357px;
}

/* ── TAHA process band ────────────────────────────────────── */
.alr-taha {
    position: relative;
    height: calc(634px * var(--alr-scale));
    margin-top: 100px;
    background: rgba(54, 57, 61, 0.1);
    overflow: hidden;
}
.alr-taha__bg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 1516px);
    height: auto;
    transform: translate(-50%, -50%) translateY(-109.5px);
    opacity: 0.1;
    pointer-events: none;
}
.alr-taha__stage {
    height: 634px;
}
.alr-taha__intro {
    position: absolute;
    left: 204px;
    top: 50px;
    width: 1032px;
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    color: #074158;
    text-align: center;
}
.alr-taha__intro strong {
    font-weight: 700;
}
.alr-taha__connector {
    position: absolute;
    left: 81px;
    top: 182px;
    width: 1278px;
    height: 402px;
}
.alr-step {
    position: absolute;
    top: 217.4px;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: rgba(242, 242, 242, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow: hidden;
    text-align: center;
}
.alr-step--1 { left: 116px; }
.alr-step--2 { left: 555px; }
.alr-step--3 { left: 994px; }
.alr-step__label {
    position: absolute;
    left: 50%;
    top: 35px;
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    margin: 0;
    color: #000;
    letter-spacing: 4.8px;
    text-transform: uppercase;
    white-space: nowrap;
}
.alr-step__label span:first-child {
    font-size: 24px;
    line-height: 32px;
}
.alr-step__label span:last-child {
    font-size: 80px;
    line-height: 64px;
}
.alr-step__title {
    position: absolute;
    left: 50%;
    top: 203.5px;
    transform: translate(-50%, -50%);
    width: 100%;
    margin: 0;
    font-size: 36px;
    line-height: 42px;
    font-weight: 400;
    color: #021c25;
}

/* ── Engineering Circular Value diagram ───────────────────── */
.alr-value-wrap {
    height: calc(501px * var(--alr-scale));
    margin-top: 100px;
}
.alr-value {
    height: 501px;
}
.alr-value__diagram-wrap { display: contents; }
.alr-value__diagram {
    position: absolute;
    left: 67px;
    top: 0;
    width: 1303.2px;
    height: 501.07px;
    overflow: visible;
}
.alr-value__title {
    position: absolute;
    left: 548px;
    top: 189px;
    width: 338px;
    margin: 0;
    font-size: 50px;
    line-height: 50px;
    font-weight: 700;
    color: #000;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}
.alr-value__label {
    position: absolute;
    margin: 0;
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    color: #021c25;
}
.alr-value__label--tl { left: 170px; top: 45px; width: 220px; text-align: right; }
.alr-value__label--tr { left: 1041px; top: 57px; width: 220px; }
.alr-value__label--ml { left: 101px; top: 228px; width: 220px; text-align: right; }
.alr-value__label--mr { left: 1117px; top: 240px; width: 230px; }
.alr-value__label--bl { left: 170px; top: 411px; width: 220px; text-align: right; }
.alr-value__label--br { left: 1041px; top: 411px; width: 220px; }

/* ── Our Products band ────────────────────────────────────── */
.alr-products {
    position: relative;
    height: calc(606px * var(--alr-scale));
    margin-top: 70.3125px;
    background: rgba(54, 57, 61, 0.1);
    overflow: hidden;
}
.alr-products__media {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(528px * var(--alr-scale));
    height: 100%;
    background: #c6c6c6;
    overflow: hidden;
}
.alr-products__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 56% 50%;
}
.alr-products__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}
.alr-products__stage {
    height: 606px;
}
.alr-products__title {
    position: absolute;
    left: 91px;
    top: 50px;
    width: 772px;
}
.alr-products__card {
    position: absolute;
    left: 61px;
    top: 133px;
    width: 801px;
    height: 423px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow: hidden;
}
.alr-products__card h3 {
    position: absolute;
    left: 30px;
    top: 38px;
    width: 741px;
    margin: 0;
    font-size: 48px;
    line-height: 60px;
    font-weight: 500;
    color: #000;
}
.alr-products__copy {
    position: absolute;
    left: 30px;
    top: 116px;
    width: 739px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: #000;
}
.alr-products__copy p {
    margin: 0;
}
.alr-products__copy p + p {
    margin-top: 24px;
}
.alr-products__copy strong {
    font-weight: 700;
}
.alr-products__copy ul {
    margin: 0;
    padding: 0;
    list-style: disc;
}
.alr-products__copy li {
    margin-left: 27px;
    list-style: disc;
}

/* ── Circular by Design ───────────────────────────────────── */
.alr-circular-wrap {
    height: calc(506px * var(--alr-scale));
    margin-top: 100px;
    margin-bottom: 100px;
}
.alr-circular {
    height: 506px;
}
.alr-circular__title {
    position: absolute;
    left: 55px;
    top: 0;
    width: 400px;
}
.alr-circular__copy {
    position: absolute;
    left: 505px;
    top: 0;
    width: 870px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    color: #000;
}
.alr-circular__copy p {
    margin: 0;
}
.alr-circular__copy p + p {
    margin-top: 32px;
}
.alr-circular__copy strong {
    font-weight: 700;
}
.alr-circular__band {
    position: absolute;
    left: 57px;
    top: 164px;
    width: 1318px;
    height: 342px;
    border-radius: 10px;
    overflow: hidden;
}
.alr-circular__band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Engineering Circular Value - hover affordance */
.alr-pill, .alr-value__label, .alr-value__title { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE (<768px) — real phone layout, desktop untouched above.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .alr-scale { zoom: 1 !important; width: auto; }
    .alr-page { width: auto; }
    .alr-stage { left: 0; width: auto; transform: none; }
    .alr-page img { max-width: 100%; }

    /* hero */
    .alr-hero { height: 800px; }
    .alr-hero__content { left: 16px; right: 16px; bottom: 32px; max-width: none; gap: 10px; }
    .alr-crumb { font-size: 13px; line-height: 15px; }
    .alr-hero__title { font-size: 40px; line-height: 42px; }
    .alr-hero__swipe { right: 16px; bottom: 20px; font-size: 14px; line-height: 14px; }

    /* statement + opportunity */
    .alr-statement { max-width: none; margin: 32px 16px 0; }
    .alr-statement p { font-size: 20px; line-height: 28px; }
    .alr-opportunity { margin-top: 36px; }
    .alr-h2 { font-size: 32px; line-height: 38px; }
    .alr-opportunity .alr-h2 { margin: 0 16px; }
    .alr-body { max-width: none; margin: 18px 16px 0; font-size: 16px; line-height: 24px; }
    .alr-body p + p { margin-top: 20px; }

    /* recovery stats — logo emblem above, stats stacked below */
    .alr-stats-wrap { height: auto; margin-top: 36px; }
    .alr-stats { height: auto; }
    .alr-stats__curve { display: none; }   /* 524px connector arcs tuned to the 1440 composition */
    .alr-stats__logo-outer { position: relative; left: 0; top: 0; display: block; width: 220px; height: 220px; margin: 0 auto; }
    .alr-stats__logo-inner {
        position: relative; left: 0; top: 0; display: block;
        width: 167px; height: 167px;
        margin: -193.5px auto 56px;      /* overlays the centre of the outer ring; extra gap before the stats */
    }
    .alr-stats__num, .alr-stats__sub { position: relative; left: 0 !important; top: 0; width: auto; }
    .alr-stats__num { margin: 22px 16px 0; font-size: 36px; line-height: 40px; }
    .alr-stats__sub { margin: 6px 16px 0; font-size: 16px; line-height: 22px; }

    /* TAHA process band — steps stacked */
    .alr-taha { height: auto; margin-top: 40px; }
    .alr-taha__bg { left: 0; top: 0; width: 100%; height: 100%; transform: none; object-fit: cover; }
    .alr-taha__stage { height: auto; padding: 28px 0 32px; }
    .alr-taha__intro { position: relative; left: 0; top: 0; width: auto; margin: 0 16px; font-size: 16px; line-height: 24px; }
    .alr-taha__connector { display: none; }   /* 1278px connector frame */
    .alr-step {
        position: relative; left: 0; top: 0;
        width: 260px; height: 260px;
        margin: 22px auto 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 10px;
    }
    .alr-step__label { position: static; transform: none; letter-spacing: 3px; }
    .alr-step__label span:first-child { font-size: 18px; line-height: 24px; }
    .alr-step__label span:last-child { font-size: 56px; line-height: 48px; }
    .alr-step__title { position: static; transform: none; width: auto; padding: 0 20px; font-size: 24px; line-height: 30px; }

    /* engineering circular value */
    .alr-value-wrap { height: auto; margin-top: 40px; }
    .alr-value { height: auto; }
    .alr-value__diagram-wrap { display: block; position: relative; margin: 14px 0 4px; }
    .alr-value__diagram { display: block; position: relative; left: 0; top: 0; width: 100%; height: auto; margin: 0; }
    .alr-value__title { position: relative; left: 0; top: 0; width: auto; margin: 18px 16px 0; font-size: 32px; line-height: 38px; }
    .alr-value__label {
        position: absolute; z-index: 1; margin: 0;
        font-size: clamp(8px, 2.5vw, 10px); line-height: 1.15;
        display: flex; align-items: center; justify-content: center;
        text-align: center !important;
    }
    .alr-value__label--tl { left: 6.9% !important; top: 4%; width: 17.6% !important; height: 18.9%; }
    .alr-value__label--tr { left: 74.4% !important; top: 4%; width: 18% !important; height: 18.9%; }
    .alr-value__label--ml { left: 1.2% !important; top: 40%; width: 18% !important; height: 18.9%; }
    .alr-value__label--mr { left: 80.8% !important; top: 40%; width: 18% !important; height: 18.9%; }
    .alr-value__label--bl { left: 6.9% !important; top: 76.3%; width: 17.6% !important; height: 18.9%; }
    .alr-value__label--br { left: 74.4% !important; top: 76.3%; width: 18% !important; height: 18.9%; }

    /* our products — image band above, card stacked */
    .alr-products { height: auto; margin-top: 40px; }
    .alr-products__media { position: relative; right: 0; top: 0; width: 100%; height: 220px; }
    .alr-products__stage { height: auto; padding: 24px 16px 32px; }
    .alr-products__title { position: relative; left: 0; top: 0; width: auto; }
    .alr-products__card { position: relative; left: 0; top: 0; width: auto; height: auto; margin-top: 16px; padding: 22px 18px; }
    .alr-products__card h3 { position: static; width: auto; margin: 0 0 12px; font-size: 26px; line-height: 32px; }
    .alr-products__copy { position: static; width: auto; font-size: 15px; line-height: 22px; }
    .alr-products__copy p + p { margin-top: 16px; }
    .alr-products__copy li { margin-left: 22px; }

    /* circular by design */
    .alr-circular-wrap { height: auto; margin-top: 40px; margin-bottom: 44px; }
    .alr-circular { height: auto; }
    .alr-circular__title { position: relative; left: 0; top: 0; width: auto; margin: 0 16px; }
    .alr-circular__copy { position: relative; left: 0; top: 0; width: auto; margin: 14px 16px 0; font-size: 16px; line-height: 24px; }
    .alr-circular__copy p + p { margin-top: 20px; }
    .alr-circular__band { position: relative; left: 0; top: 0; width: auto; height: 200px; margin: 20px 16px 0; }
}

/* ── Full-bleed hero past the 16" cap ─────────────────────────────────────
   Relative/flow hero: widen it and pull it left to span the viewport; the
   inset:0 bg fills automatically, text shifts into the centred column. */
@media (min-width: 1729px) {
    /* .alr-page (not .alr-stage) carries overflow:hidden and was clipping the
       full-bleed banner back to the centred width. */
    .alr-page, .alr-stage { overflow: visible; }
    .alr-hero { width: var(--bleed-w); margin-left: var(--bleed-left); }
    .alr-hero__content { left: calc(61px + var(--bleed-shift)); }
    .alr-taha,
    .alr-products {
        width: var(--bleed-w);
        margin-left: var(--bleed-left);
        margin-right: 0;
    }
    .alr-products__media { right: var(--bleed-shift); }
}