/* === reach.css — Runaya Reach page rebuilt to the 1440 Figma canvas (node 17:624) === */

@font-face {
    font-family: "NHaasGroteskTX";
    src: url("/dist/fonts/NHaasGroteskTXPro-Rg.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

.page-reach {
    background: #f2f2f2;
    color: #000;
}
body.page-reach main { padding-top: 0; }
body.page-reach { overflow-x: hidden; }
.page-reach #site-footer { background: #021c25; }

/* Fluid: scale the fixed 1440 design to fill the viewport edge-to-edge */
.reach-scale {
    width: 1440px;
    margin: 0 auto;
    zoom: calc(100vw / 1440px);
}

.reach-stage img { max-width: none; }  /* app.css caps img at 100% */

.reach-stage {
    position: relative;
    width: 1440px;
    height: 3266px;
    margin: 0 auto;
    background: #f2f2f2;
    overflow: hidden;
}

/* ══ HERO (17:625) — three stacked photos · overlay · title · swipe ══ */
.reach-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440px;
    height: 600px;
    overflow: hidden;
    background: #fff;
}
.reach-hero__img { position: absolute; object-fit: cover; }
.reach-hero__layer-two { left: -75.5px; top: 6px; width: 1591px; height: 946px; }
.reach-hero__shade {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.2;
}
.reach-hero__title {
    position: absolute;
    left: 61px;
    bottom: 37px;                  /* cap bottom at y 550 (Figma cap-trimmed) */
    width: 953px;
    margin: 0;
    font-size: 80px;
    font-weight: 700;
    line-height: 80px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
}
.reach-hero__swipe { position: absolute; inset: 0; pointer-events: none; }
/* The full-bleed overlay stays inert so it doesn't hijack clicks across the
   whole hero. A generous invisible pad over the swipe cluster is the actual
   hit area: a click on this ::after targets .reach-hero__swipe itself, firing
   the [data-swipe] handler in app.js, which cuts the banner. */
.reach-hero__swipe::after {
    content: "";
    position: absolute;
    right: 26px;
    bottom: 30px;
    width: 120px;
    height: 130px;
    pointer-events: auto;
    cursor: pointer;
}
.reach-hero__mouse,
.reach-hero__arrow,
.reach-hero__swipe-label { pointer-events: auto; cursor: pointer; }
.reach-hero__mouse {
    position: absolute;
    left: 1343px;
    bottom: 62px;
    width: 21px;
    height: 40px;
    border: 1px solid #fff;
    border-radius: 10px;
}
.reach-hero__arrow {
    position: absolute;
    left: 1345.5px;
    bottom: 75.5px;
    width: 15px;
    height: 8px;
    transform: rotate(-90deg);
}
.reach-hero__swipe-label {
    position: absolute;
    left: 1354px;
    bottom: 46.5px;
    transform: translate(-50%, 50%);
    font-size: 18px;
    line-height: 16px;
    color: #fff;
    text-align: center;
}

/* ══ OUR COMMITMENT (17:652/17:653) — gradient band · ribbon · map · medallions ══ */
.reach-commit {
    position: absolute;
    left: 0;
    top: 600px;
    width: 1440px;
    height: 559px;
    background: radial-gradient(720px 583.37px at 720px 280px, #074158 0%, #05313f 50%, #022025 100%);
    overflow: hidden;
}
.reach-commit__background {
    position: absolute;
    inset: 0;
    width: 1440px;
    height: 559px;
    object-fit: cover;
    object-position: center;
}
.reach-commit__texture {
    position: absolute;
    left: 82.89px;
    top: 69px;
    width: 1275.31px;
    height: 134.05px;
    mix-blend-mode: multiply;
    object-fit: fill;
}
.reach-commit__ribbon {
    position: absolute;
    left: 92.13px;
    top: 81.33px;
    width: 1253.8px;
    height: 101.86px;
}
.reach-commit__map {
    position: absolute;
    left: 345px;
    top: 81.17px;
    width: 746px;
    height: 409px;
}
.reach-commit__title {
    position: absolute;
    left: 469px;
    top: 96.2px;                   /* cap top at 103.17 */
    margin: 0;
    font-size: 60px;
    font-weight: 700;
    line-height: 60px;
    color: #000;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

/* three medallion items — wrapper anchored at the label column */
.reach-commit__item {
    position: absolute;
    top: 148.17px;
    width: 321px;
    height: 274px;
}
.reach-commit__item--1 { left: 168px; }
.reach-commit__item--2 { left: 559px; }
.reach-commit__item--3 { left: 950px; }

.reach-commit__badge { position: absolute; top: 0; width: 168.967px; height: 171.08px; }
.reach-commit__item--1 .reach-commit__badge { left: 79px; }
.reach-commit__item--2 .reach-commit__badge { left: 77px; }
.reach-commit__item--3 .reach-commit__badge { left: 75px; }
.reach-commit__badge img { position: absolute; }
.reach-commit__badge img:nth-child(1) { left: 0; top: 0; width: 168.967px; height: 168.925px; }
.reach-commit__badge img:nth-child(2) { left: 10.602px; top: 10.6px; width: 147.763px; height: 147.726px; }
.reach-commit__badge img:nth-child(3) { left: 27.291px; top: 27.285px; width: 114.384px; height: 114.355px; }

.reach-commit__icon { position: absolute; }
.reach-commit__item--1 .reach-commit__icon { left: 135px; top: 44px; width: 60px; height: 60px; }
.reach-commit__item--2 .reach-commit__icon { left: 129px; top: 48px; width: 68px; height: 52px; }
.reach-commit__item--3 .reach-commit__icon { left: 130px; top: 44px; width: 62.06px; height: 60.18px; }

.reach-commit__pin { position: absolute; top: 147.75px; width: 11.679px; height: 48.93px; }
.reach-commit__item--1 .reach-commit__pin { left: 158.68px; }
.reach-commit__item--2 .reach-commit__pin { left: 157px; }
.reach-commit__item--3 .reach-commit__pin { left: 155px; }

.reach-commit__label {
    position: absolute;
    left: 0;
    top: 208px;                    /* cap top at 214.03 (y 962.17 − 748.17 + trim) */
    width: 321px;
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    color: #fff;
    text-align: center;
}

/* ══ PROJECT LAADLI (17:643) — photo · blurred overlay · masked reveal · copy ══ */
.reach-laadli {
    position: absolute;
    left: 0;
    top: 1159px;
    width: 1440px;
    height: 613px;
    overflow: hidden;
    color: #f2f2f2;
}
.reach-laadli__base {
    position: absolute;
    left: calc(50% + 70px);
    top: 0;
    width: 1886px;
    height: 613px;
    transform: translateX(-50%);
    object-fit: cover;
}
.reach-laadli__overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 70, 91, 0.8);
    backdrop-filter: blur(10.15px);
    -webkit-backdrop-filter: blur(10.15px);
}
.reach-laadli__reveal {
    position: absolute;
    top: 0;
    left: calc(50% + 589px);
    width: 1890px;
    height: 613px;
    transform: translateX(-50%);
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: url("/dist/images/reach/laadli-mask.svg");
    mask-image: url("/dist/images/reach/laadli-mask.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 79px -8px;
    mask-position: 79px -8px;
    -webkit-mask-size: 997px 782px;
    mask-size: 997px 782px;
}
.reach-laadli__reveal img {
    display: block;
    width: 100%;
    height: 100.18%;
    max-width: none;
    object-fit: fill;
}
.reach-laadli__title {
    position: absolute;
    left: 96px;
    top: 62px;                     /* cap top at 69 */
    width: 780px;
    margin: 0;
    font-size: 60px;
    font-weight: 700;
    line-height: 60px;
    text-transform: capitalize;
}
.reach-laadli__body {
    position: absolute;
    left: 96px;
    top: 158.5px;                  /* cap top at 164 */
    width: 638px;
    margin: 0;
    font-size: 20px;
    line-height: 28px;
}

/* ══ PROGRAMMES (17:710) — gradient band · faint photo · two centred blocks ══ */
.reach-prog {
    position: absolute;
    left: 0;
    top: 1770px;
    width: 1440px;
    height: 646px;
    overflow: hidden;
    color: #f2f2f2;
    background: radial-gradient(720px 674.16px at 720px 323.58px, #074158 0%, #05313f 50%, #022025 100%);
}
.reach-prog__photo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1451.5px;
    height: 967.785px;
    transform: translate(calc(-50% + 0.42px), calc(-50% + 57.61px)) rotate(-0.53deg);
    object-fit: cover;
    opacity: 0.1;
}
.reach-prog__item { position: absolute; text-align: center; }
.reach-prog__item--school { left: 377px; width: 686px; }
.reach-prog__item--scholarship { left: 321px; width: 798px; }
.reach-prog h2 {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 36px;
    text-transform: capitalize;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    text-align: center;
}
.reach-prog h3 {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    text-transform: capitalize;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    text-align: center;
}
.reach-prog p {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
}
.reach-prog__item--school h2 { top: 93px; }         /* cap 100 */
.reach-prog__item--school h3 { top: 148px; }        /* cap 154 */
.reach-prog__item--school p { top: 196.5px; }       /* cap 202 */
.reach-prog__item--scholarship h2 { top: 338px; }   /* cap 345 */
.reach-prog__item--scholarship h3 { top: 393px; }   /* cap 399 */
.reach-prog__item--scholarship p { top: 441.5px; }  /* cap 447 */

/* ══ TESTIMONIALS — carried over verbatim from the approved implementation.
      DO NOT MODIFY: cards, photos, hover animations. ══ */
.reach-testimonials {
    position: absolute;
    left: 0;
    top: 2416px;
    width: 1440px;
    height: 850px;
    background: #f2f2f2;
}
/* Auto-scrolling, infinitely looped stories (4 cards can't share the 1440 row: they'd need
   2664px). The window is exactly the approved pair — first card at x=60 through the second
   photo's right edge at 1380 — so at rest it reads exactly as the component shipped. Each
   card travels with its own photo as a 672px pair (the original 60 -> 732 pitch), and two
   identical sets shift -50% (one whole set) for a seamless rejoin, as .accolades-track does. */
/* Full bleed: cards run to both edges and enter/leave at the screen, rather than popping
   in and out of a 60px gutter. */
.reach-testimonials__window {
    position: absolute;
    left: 0;
    top: 100px;
    width: 1440px;
    height: 650px;
    overflow: hidden;
}
.reach-testimonials__track {
    display: flex;
    width: max-content;
    animation: reachStoryScroll 60s linear infinite;
}
.reach-testimonials__track:hover { animation-play-state: paused; }   /* cards have their own hover */
.reach-testimonials__set { display: flex; }
/* Arrows sit below the cards in the section's own gap (cards end at 750, section is 850) —
   never over the copy. Same nav-pair shape as .tel-products__nav. */
.reach-testimonials__nav {
    position: absolute;
    left: 50%;
    top: 779px;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 2;
}
.reach-testimonials__arrow {
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid #6b7d84;
    border-radius: 50%;
    background: transparent;
    color: #21424e;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.reach-testimonials__arrow:hover { background: #fff; border-color: #21424e; }
.reach-testimonials__arrow svg { width: 16px; height: 16px; }
.reach-testimonial-pair { position: relative; flex: none; width: 672px; height: 650px; }

@keyframes reachStoryScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Motion-sensitive users get the row static and scrollable, so every story stays reachable. */
@media (prefers-reduced-motion: reduce) {
    .reach-testimonials__window { overflow-x: auto; }
    .reach-testimonials__track { animation: none; }
    .reach-testimonials__set[aria-hidden="true"] { display: none; }
}

.reach-testimonial {
    position: absolute;
    left: 0;
    top: 0;
    width: 528px;
    height: 650px;
    border-radius: 10px;
    padding: 50px 30px;
    box-sizing: border-box;
}
.reach-testimonial p { width: 356px; margin: 0; font-size: 24px; line-height: 32px; }
.reach-testimonial strong { position: absolute; left: 30px; bottom: 74px; font-size: 24px; line-height: 24px; }
.reach-testimonial span { position: absolute; left: 30px; bottom: 48px; font-size: 18px; line-height: 24px; opacity: 0.7; }
.reach-testimonials figure {
    position: absolute;
    left: 408px;    /* was 468 on the stage, i.e. 408 inside the pair that starts at 60 */
    top: 50px;      /* was 150 on the stage, i.e. 50 below the card top at 100 */
    width: 240px;
    height: 250px;
    margin: 0;
    overflow: hidden;
    border-radius: 220px;
    background: #d7d7d7;
}
.reach-testimonials figure img { width: 100%; height: 100%; object-fit: cover; }

/* Match the #SheRises testimonial-card hover treatment on both Reach stories. */
.reach-testimonial {
    overflow: hidden;
    background: #fff;
    color: #021c25;
    transition: background 0.3s ease, color 0.3s ease;
}
.reach-testimonial--dark { background: #fff; color: #021c25; }
.reach-testimonial strong,
.reach-testimonial span { transition: color 0.3s ease; }
.reach-testimonial:hover,
.reach-testimonial:focus-within { background: #021c25; color: #f2f2f2; }
.reach-testimonial--dark::after,
.reach-testimonial:not(.reach-testimonial--dark)::after {
    content: '';
    position: absolute;
    display: block;
    left: 376px;
    top: 509px;
    width: 171px;
    height: 178px;
    background: url('/dist/images/reach/testimonial-quote.svg') center / contain no-repeat;
    transform: rotate(180deg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.reach-testimonial--dark:hover::after,
.reach-testimonial--dark:focus-within::after,
.reach-testimonial:not(.reach-testimonial--dark):hover::after,
.reach-testimonial:not(.reach-testimonial--dark):focus-within::after {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE (<768px) — real phone layout, desktop untouched above.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .reach-scale { zoom: 1 !important; width: auto; }
    .reach-stage { width: auto; height: auto; overflow: visible; }
    .reach-stage img { max-width: 100%; }

    /* hero */
    .reach-hero { position: relative; width: auto; height: 800px; }
    .reach-hero__layer-two { left: 0; top: 0; width: 100%; height: 100%; }
    .reach-hero__title {
        left: 16px;
        right: 16px;
        bottom: 32px;
        width: auto;
        font-size: 38px;
        line-height: 42px;
    }
    .reach-hero__mouse { left: auto; right: 24px; bottom: 44px; }
    .reach-hero__arrow { left: auto; right: 30.5px; bottom: 57.5px; }
    .reach-hero__swipe-label { left: auto; right: 12px; bottom: 28px; transform: none; font-size: 14px; }

    /* commitment — stacked medallions */
    .reach-commit {
        position: relative; top: 0; width: auto; height: auto; padding: 32px 16px 40px;
        display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
        column-gap: 10px; row-gap: 22px;
        background: #0e3d49;
    }
    .reach-commit__background { display: block; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .reach-commit__texture, .reach-commit__ribbon, .reach-commit__map { display: none; }
    .reach-commit__title { flex-basis: 100%; position: relative; left: 0; top: 0; margin: 0 0 4px; font-size: 32px; line-height: 38px; text-align: center; white-space: normal; color: #fff; }
    /* zoom (not transform) so the fixed 169px badge shrinks its layout box and two fit per row */
    .reach-commit__item { position: relative; left: 0 !important; top: 0; width: auto; height: auto; margin: 0; text-align: center; zoom: 0.85; }
    .reach-commit__badge { position: relative; display: inline-block; left: 0 !important; }
    .reach-commit__icon { position: absolute; z-index: 1; }
    .reach-commit__item--1 .reach-commit__icon { left: calc(50% - 30px); top: 44px; }
    .reach-commit__item--2 .reach-commit__icon { left: calc(50% - 34px); top: 48px; }
    .reach-commit__item--3 .reach-commit__icon { left: calc(50% - 31px); top: 44px; }
    .reach-commit__pin { display: none; }
    .reach-commit__label { position: relative; top: 0; width: auto; margin: 12px auto 0; max-width: 170px; font-size: 18px; line-height: 24px; color: #f2f2f2; }

    /* laadli */
    .reach-laadli { position: relative; top: 0; width: auto; height: auto; padding: 36px 16px 40px; }
    .reach-laadli__base { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
    .reach-laadli__reveal { display: none; }
    .reach-laadli__title { position: relative; left: 0; top: 0; width: auto; font-size: 32px; line-height: 38px; }
    .reach-laadli__body { position: relative; left: 0; top: 0; width: auto; margin-top: 18px; font-size: 16px; line-height: 24px; }

    /* programmes */
    .reach-prog { position: relative; top: 0; width: auto; height: auto; padding: 36px 16px 40px; }
    /* cover the whole section with the programme photo (the fixed 1451px image only reached the top) */
    .reach-prog__photo {
        left: 0; top: 0;
        width: 100%; height: 100%;
        transform: none;
        object-fit: cover;
    }
    .reach-prog__item { position: relative; left: 0 !important; width: auto; }
    .reach-prog h2, .reach-prog h3, .reach-prog p { position: relative; top: 0 !important; }
    .reach-prog h2 { font-size: 24px; line-height: 30px; }
    .reach-prog h3 { margin-top: 12px; font-size: 18px; line-height: 24px; }
    .reach-prog p { margin-top: 12px; font-size: 16px; line-height: 24px; }
    .reach-prog__item--scholarship { margin-top: 36px; }

    /* testimonials — stack all four and drop the marquee (and its duplicate set) */
    .reach-testimonials { position: relative; top: 0; width: auto; height: auto; padding: 30px 0; }
    .reach-testimonials__window { position: static; width: auto; height: auto; overflow: visible; }
    .reach-testimonials__track { display: block; width: auto; animation: none; }
    /* Swipeable carousel — one testimonial per view, manual (no auto-scroll), pfp on top */
    .reach-testimonials__set {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 16px 4px;
    }
    .reach-testimonials__set::-webkit-scrollbar { display: none; }
    .reach-testimonials__set[aria-hidden="true"] { display: none; }
    .reach-testimonials__nav { display: none; }
    .reach-testimonial-pair {
        flex: 0 0 86%;
        scroll-snap-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: auto;
        height: auto;
        margin: 0;
    }
    .reach-testimonials figure {
        display: block;
        order: 1;
        position: static;
        left: auto; top: auto;
        width: 96px; height: 96px;
        margin: 0 auto 14px;
        border-radius: 50%;
    }
    .reach-testimonial {
        order: 2;
        flex: 1;                 /* all cards fill their (equal-height) slide, so heights match */
        position: relative; left: 0; top: 0;
        width: 100%; height: auto;
        margin: 0;
        padding: 24px 22px 26px;
        text-align: center;
    }
    .reach-testimonial p { width: auto; font-size: 16px; line-height: 24px; }
    .reach-testimonial strong, .reach-testimonial span { position: static; display: block; margin-top: 8px; text-align: center; }
    /* keep cards visually consistent — no tap/hover colour flip on phone */
    .reach-testimonial:hover, .reach-testimonial:focus-within { background: #fff; color: #021c25; }
}

/* ── Full-bleed hero past the 16" cap ───────────────────────────────────── */
@media (min-width: 1729px) {
    .reach-stage { overflow: visible; }
    .reach-hero { left: var(--bleed-left); width: var(--bleed-w); }
    .reach-hero__layer-two, .reach-hero__shade { left: 0; width: var(--bleed-w); }
    .reach-hero__layer-two { top: 0; height: 100%; }
    .reach-hero__title { left: calc(61px + var(--bleed-shift)); }

    /* Keep the 1440px composition centred while its background bands extend
       to the viewport edges on displays wider than the 16" scale cap. */
    .reach-commit,
    .reach-laadli,
    .reach-prog {
        left: var(--bleed-left);
        width: var(--bleed-w);
    }

    .reach-commit__background { width: var(--bleed-w); }
    .reach-commit__texture,
    .reach-commit__ribbon,
    .reach-commit__title,
    .reach-commit__item,
    .reach-laadli__title,
    .reach-laadli__body,
    .reach-prog__item {
        translate: var(--bleed-shift) 0;
    }

    .reach-laadli__base { width: calc(var(--bleed-w) + 140px); }
    .reach-prog__photo { width: max(1451.5px, var(--bleed-w)); }

    .reach-testimonials__window { width: var(--bleed-w); margin-left: var(--bleed-left); }
}