@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;
}

:root {
    --ab-teal: #074158;
    --ab-ink: #021c25;
    --ab-paper: #f2f2f2;
    --ab-muted: #507989;
}

.page-about {
    --nav-h: 75px;
    background: var(--ab-paper);
    color: #000;
    font-family: "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* The About header must remain usable when the external GSAP bundle is unavailable. */
.page-about #navbar {
    opacity: 1;
    transform: none;
}

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

.about-page { --about-canvas-scale: 1; --about-foundation-height: 1264px; background: var(--ab-paper); overflow: hidden; }
.about-page * { font-family: inherit; }
.ab-h2 { margin: 0; color: #000; font-size: 60px; font-weight: 700; line-height: 60px; letter-spacing: 0; text-align: center; text-shadow: 0 2px 2px rgba(0, 0, 0, .12); }
.ab-h2--left { text-align: left; }

.ab-hero { position: relative; height: 600px; overflow: hidden; }
.ab-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ab-hero__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
.ab-hero__title { position: absolute; left: 61px; bottom: 50px; z-index: 1; margin: 0; color: #fff; font-size: 80px; font-weight: 700; line-height: .96; letter-spacing: 0; text-transform: uppercase; text-shadow: 4px 4px 10px rgba(0, 0, 0, .25); }
.ab-hero__title span { display: block; }
.ab-hero__swipe { position: absolute; right: 24px; bottom: 31px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 18px; font-weight: 400; line-height: 18px; }

.ab-who { min-height: 903px; padding: 50px 61px 0; background: var(--ab-paper); text-align: center; }
.ab-who .ab-h2 { margin-bottom: 33px; }
.ab-who__copy { width: 1200px; height: 210px; margin: 0 auto; color: #000; font-size: 24px; font-weight: 400; line-height: 32px; text-align: left; }
.ab-who__copy p + p { margin-top: 20px; }
.ab-who__img { width: 1318px; aspect-ratio: 1318 / 500; height: auto; margin: 50px auto 0; overflow: hidden; border-radius: 10px; }
.ab-who__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

.ab-foundations { position: relative; z-index: 1; height: var(--about-foundation-height); background: var(--ab-paper); overflow: visible; }
.val-icon-filters { position: absolute; width: 0; height: 0; overflow: hidden; }
.ab-foundations__pattern { position: absolute; inset: 0; opacity: .25; overflow: hidden; background-image: url("/dist/images/about/figma-pattern.svg"); background-position: center -55px; background-repeat: repeat; background-size: 1440px 510px; -webkit-mask-image: url("/dist/images/about/figma-pattern-mask.svg"); mask-image: url("/dist/images/about/figma-pattern-mask.svg"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.ab-foundations__pattern img { display: none; }
.ab-foundations__pattern img:nth-child(1) { top: -55px; }
.ab-foundations__pattern img:nth-child(2) { top: 455px; }
.ab-foundations__pattern img:nth-child(3) { top: 964px; }

.ab-vm-stage { position: absolute; top: 0; left: 50%; width: 1440px; height: 1264px; transform: translateX(-50%) scale(var(--about-canvas-scale)); transform-origin: top center; }
.ab-vm-card { position: absolute; width: 651.334px; height: 403.827px; transition: transform 300ms ease-in-out; }
.ab-vm-card:hover { transform: scale(1.03); }
.ab-vm-card--vision { top: 54.086px; left: 64px; }
.ab-vm-card--mission { top: 179px; left: 735px; }
.ab-vm-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ab-vm-card__icon { position: absolute; object-fit: contain; }
.ab-vm-card--vision .ab-vm-card__icon { top: 58px; left: 208px; width: 83.695px; height: 56.69px; }
.ab-vm-card--mission .ab-vm-card__icon { top: 52px; left: 358px; width: 74.253px; height: 74.202px; }
.ab-vm-card__pill { position: absolute; display: grid; width: 299.613px; height: 65.133px; margin: 0; place-items: center; border-radius: 52.107px; background: var(--ab-paper); color: var(--ab-teal); font-size: 39.08px; font-weight: 700; line-height: 46.896px; }
.ab-vm-card--vision .ab-vm-card__pill { top: 54.711px; left: 332.18px; }
.ab-vm-card--mission .ab-vm-card__pill { top: 54.711px; left: 19.838px; }
.ab-vm-card__text { position: absolute; margin: 0; color: #000; font-size: 30px; font-weight: 500; line-height: 37.99px; }
.ab-vm-card--vision .ab-vm-card__text { top: 229.914px; left: 217.447px; width: 385.837px; }
.ab-vm-card--mission .ab-vm-card__text { top: 202.914px; left: 51px; width: 593px; }

.ab-values-layout { position: absolute; top: 683px; left: 50%; display: grid; width: 1317.99px; height: 584px; grid-template-columns: repeat(3, 419.33px); grid-template-rows: repeat(2, 277px); gap: 30px; transform: translateX(-50%) scale(var(--about-canvas-scale)); transform-origin: top center; }
.ab-values-layout .ab-h2 { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.val-card { position: relative; overflow: hidden; padding: 20px; border-radius: 10px; transition: border-color 520ms cubic-bezier(.22, .61, .36, 1), color 520ms cubic-bezier(.22, .61, .36, 1); }
.val-card--purpose { grid-column: 2; grid-row: 1; background: linear-gradient(123.4058deg, #043a4d 0%, #021c25 100.06%); color: var(--ab-paper); }
.val-card--sustainable { grid-column: 3; grid-row: 1; }
.val-card--diverse { grid-column: 2; grid-row: 2; }
.val-card--safety { grid-column: 3; grid-row: 2; }
.val-card--light { border: 2px solid var(--ab-ink); background: var(--ab-paper); color: #000; }
.val-card--light::before { content: ""; position: absolute; inset: 0; background: linear-gradient(123.4058deg, #043a4d 0%, #021c25 100.06%); opacity: 0; transition: opacity 520ms cubic-bezier(.22, .61, .36, 1); pointer-events: none; }
.val-card--light:hover::before { opacity: 1; }
.val-card__decoration { position: absolute; z-index: 1; top: 65px; right: -77px; width: 328px; height: 328px; max-width: none; opacity: 0; transition: opacity 520ms cubic-bezier(.22, .61, .36, 1); }
.val-dot { position: absolute; z-index: 2; top: 20px; right: 20px; width: 15px; height: 15px; border-radius: 50%; background: var(--ab-ink); transition: background-color 520ms cubic-bezier(.22, .61, .36, 1); }
.val-ic { position: relative; z-index: 2; display: block; width: 90px; height: 90px; max-width: none; object-fit: contain; transition: filter 520ms cubic-bezier(.22, .61, .36, 1); }
.val-ic--safety { display: grid; place-items: center; border-radius: 50%; background: var(--ab-teal); }
.val-ic--safety img { width: 58.051px; height: 62.64px; }
.val-card--purpose:hover .val-ic { filter: url("#value-icon-colors-inverted"); }
.val-card--light:hover .val-ic { filter: url("#value-icon-colors-inverted"); }
.val-card--sustainable:hover .val-ic { filter: url("#value-icon-colors-inverted-offwhite"); }
.val-title { position: relative; z-index: 2; margin: 20px 0 8px; font-size: 30px; font-weight: 700; line-height: 36px; letter-spacing: 0; transition: color 520ms cubic-bezier(.22, .61, .36, 1); }
.val-card--light .val-title { color: var(--ab-teal); }
.val-desc { position: relative; z-index: 2; margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; transition: color 520ms cubic-bezier(.22, .61, .36, 1); }
.val-card--light:hover { border-color: #043a4d; color: var(--ab-paper); }
.val-card--light:hover .val-title { color: var(--ab-paper); }
.val-card--light:hover .val-desc { color: var(--ab-paper); }
.val-card--light:hover .val-dot { background: var(--ab-paper); }
.val-card--light:hover .val-card__decoration { opacity: 1; }

.ab-leadership { position: relative; z-index: 0; min-height: 543px; padding: 85px 61px 52px; background: var(--ab-paper); text-align: center; }
.ab-leadership .ab-h2 { margin-bottom: 35px; }
.ab-leadership__row { display: grid; width: 1318px; margin: 0 auto; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30.04px; }
.ldr-card { position: relative; aspect-ratio: 239.57 / 292.635; overflow: hidden; border-radius: 7.887px; background: #84a0ab; cursor: pointer; user-select: none; }
.ldr-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; }
.ldr-photo--naivedya { object-position: 28% center; }
.ldr-photo--vivek { object-position: 59% center; }
.ldr-overlay { position: absolute; inset: 0; color: var(--ab-paper); background: linear-gradient(0deg, rgba(2, 28, 37, .86), rgba(2, 28, 37, .05) 61%, transparent 80%); transition: background 300ms ease-in-out; }
.ldr-meta { position: absolute; right: 14px; bottom: 15px; left: 14px; text-align: center; }
.ldr-name { margin: 0; font-size: 18px; font-weight: 700; line-height: 20px; }
.ldr-role { margin: 4px 0 0; color: rgba(242, 242, 242, .7); font-size: 16px; font-weight: 400; line-height: 20px; }
.ldr-card--featured { background: var(--ab-teal); }
.ldr-card--featured .ldr-photo { opacity: 1; transform: none; }
.ldr-card--featured .ldr-overlay { background: rgba(7, 65, 88, .6); }
.ldr-card--featured .ldr-meta { top: auto; right: auto; bottom: 15px; left: 15px; display: flex; width: 210.596px; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.ldr-card--featured .ldr-detail { max-height: 260px; margin-top: 12px; opacity: 1; transform: translateY(0); pointer-events: auto; }
.ldr-card--featured .ldr-role { margin-top: 0; }
.ldr-card--featured .ldr-detail p { margin: 0; }
.ldr-detail { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-height: 0; margin-top: 0; opacity: 0; transform: translateY(18px); overflow: hidden; pointer-events: none; transition: max-height 380ms ease, margin-top 380ms ease, opacity 260ms ease, transform 380ms cubic-bezier(.22, .61, .36, 1); }
.ldr-card.is-expanded { background: var(--ab-teal); }
.ldr-card.is-expanded .ldr-photo { opacity: 1; transform: none; }
.ldr-card.is-expanded .ldr-overlay { background: rgba(7, 65, 88, .6); }
.ldr-card.is-expanded .ldr-meta { top: auto; right: auto; bottom: 15px; left: 15px; display: flex; width: 210.596px; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.ldr-card.is-expanded .ldr-detail { max-height: 260px; margin-top: 12px; opacity: 1; transform: translateY(0); pointer-events: auto; }
.ldr-card.is-expanded .ldr-role { margin-top: 0; }
.ldr-card.is-expanded .ldr-detail p { margin: 0; }
.ldr-detail p { margin: 0; font-size: 14px; font-weight: 400; line-height: 22px; }
.ldr-more { display: block; font-size: 14px; font-weight: 700; line-height: 17px; text-decoration: underline; text-decoration-color: currentColor; transition: color 220ms ease, text-decoration-color 220ms ease; }
.ldr-more:hover { color: #ff5f1a; }
.ldr-li { display: grid; width: 24px; height: 24px; margin-top: 0; place-items: center; }
.ldr-li img { width: 24px; height: 24px; }

.leader-quote { width: 1075px; height: 519px; margin: auto; padding: 0; overflow: visible; border: 0; background: transparent; }
.leader-quote::backdrop { background: rgba(2, 28, 37, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 260ms ease, -webkit-backdrop-filter 260ms ease, backdrop-filter 260ms ease; }
@starting-style {
    .leader-quote[open]::backdrop { background: rgba(2, 28, 37, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
}
.leader-quote__card { position: relative; width: 1075px; height: 519px; overflow: hidden; border-radius: 10px; background: var(--ab-teal); color: var(--ab-paper); }
.leader-quote__watermark { position: absolute; top: 211px; left: 687px; width: 605px; height: 605px; max-width: none; }
.leader-quote__portrait { position: absolute; top: 30px; left: 30px; width: 307px; height: 323px; overflow: hidden; border-radius: 10px; background: var(--ab-teal); }
.leader-quote__portrait img { position: absolute; top: 10px; left: -180px; width: 680px; height: 450px; max-width: none; }
.leader-quote__portrait--amit img { top: 0; left: -34px; width: 375px; height: 375px; object-fit: cover; }
.leader-quote__portrait--square img { top: 0; left: -34px; width: 375px; height: 375px; object-fit: cover; }
.leader-quote__portrait--vivek img { top: 0; left: -42px; width: 375px; height: 375px; object-fit: cover; }
.leader-quote__identity { position: absolute; top: 354px; left: 30px; }
.leader-quote__identity--long { width: 307px; }
.leader-quote__identity--vivek p { margin-top: 8px; line-height: 20px; }
.leader-quote__identity h3 { margin: 0; color: var(--ab-paper); font-size: 24px; font-weight: 400; line-height: 36px; }
.leader-quote__identity p { margin: 4px 0 20px; color: var(--ab-paper); font-size: 18px; font-weight: 400; line-height: 24px; opacity: .7; }
.leader-quote__identity img { width: 31px; height: 31px; }
/* The mark's bottom sits on the BASELINE of the copy's first line, not on the line box.
   Copy starts at y 67 with 18px/24px Neue Haas (ascent 18, half-leading 0.5), so that
   baseline is 85.5 — the mark is 50 tall, hence top 35.5. At 41 it hung 5.5px low. */
.leader-quote__mark { position: absolute; top: 35.5px; left: 387px; width: 48px; height: 50px; }
.leader-quote__copy { position: absolute; top: 67px; left: 387px; width: 638px; color: var(--ab-paper); font-size: 18px; font-weight: 400; line-height: 24px; }
.leader-quote__copy p { margin: 0; }
.leader-quote__copy p:first-child { text-indent: 56px; }
.leader-quote__copy p + p { margin-top: 24px; }
.leader-quote__close { position: absolute; top: -42px; right: 0; width: 32px; height: 32px; padding: 0; color: var(--ab-paper); font-size: 32px; font-weight: 400; line-height: 28px; }

.page-about .reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(.16, 1, .3, 1), transform 900ms cubic-bezier(.16, 1, .3, 1); }
.page-about .reveal.is-visible { opacity: 1; transform: translateY(0); }
.page-about .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(.16, 1, .3, 1), transform 700ms cubic-bezier(.16, 1, .3, 1); }
.page-about .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.page-about .reveal-stagger.is-visible > :nth-child(1) { transition-delay: .05s; }
.page-about .reveal-stagger.is-visible > :nth-child(2) { transition-delay: .12s; }
.page-about .reveal-stagger.is-visible > :nth-child(3) { transition-delay: .19s; }
.page-about .reveal-stagger.is-visible > :nth-child(4) { transition-delay: .26s; }
.page-about .reveal-stagger.is-visible > :nth-child(5) { transition-delay: .33s; }
.page-about .ab-values-layout > * { transition-duration: .1s; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE (<768px) — real phone layout, desktop untouched above.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .ab-scale { zoom: 1 !important; width: auto; }

    /* hero */
    .ab-hero { height: 800px; }
    .ab-hero__title { left: 16px; right: 16px; bottom: 32px; font-size: 40px; line-height: 42px; }
    .ab-hero__swipe { right: 16px; bottom: 16px; font-size: 14px; line-height: 14px; }

    /* who we are */
    .ab-h2 { font-size: 40px; line-height: 44px; }
    .ab-who { min-height: 0; padding: 40px 16px 0; }
    .ab-who .ab-h2 { margin-bottom: 24px; }
    .ab-who__copy { width: auto; height: auto; font-size: 16px; line-height: 24px; }
    .ab-who__img { width: auto; margin-top: 32px; }

    /* foundations — absolute 1440 stage becomes stacked flow */
    .ab-foundations { height: auto; padding: 40px 0 8px; }
    .ab-foundations__pattern { display: none; } /* decorative pattern tuned to the 1440 canvas */
    .ab-vm-stage { position: static; width: auto; height: auto; transform: none; }
    .ab-vm-card { position: relative; top: 0 !important; left: 0 !important; margin: 0 auto; zoom: .54; } /* 651px Figma card composition fits 352px */
    .ab-vm-card--mission { margin-top: 44px; }
    .ab-vm-card:hover { transform: none; }

    /* core values — single column */
    .ab-values-layout { position: static; width: auto; height: auto; margin: 44px 16px 0; grid-template-columns: 1fr; grid-template-rows: none; gap: 20px; transform: none; }
    .ab-values-layout .ab-h2 { grid-column: auto; grid-row: auto; }
    .val-card--purpose, .val-card--sustainable, .val-card--diverse, .val-card--safety { grid-column: auto; grid-row: auto; }

    /* leadership — stacked cards */
    .ab-leadership { min-height: 0; padding: 48px 16px 40px; }
    .ab-leadership .ab-h2 { margin-bottom: 24px; }
    .ab-leadership__row { width: auto; grid-template-columns: 1fr; gap: 20px; }
    .ldr-card { width: 100%; max-width: 320px; margin: 0 auto; }

    /* leader profile dialog — 1075px card becomes a scrollable sheet */
    .leader-quote { width: calc(100vw - 24px); height: auto; }
    .leader-quote__card { width: auto; height: auto; max-height: 82vh; overflow: auto; padding: 20px 20px 28px; }
    .leader-quote__watermark { display: none; } /* decorative logo sized for the 1075px card */
    .leader-quote__portrait { position: relative; top: 0; left: 0; margin: 0 auto; } /* stays the containing block so the cropped photo keeps clipping */
    .leader-quote__identity { position: static; width: auto; margin-top: 16px; }
    .leader-quote__mark { position: static; display: block; margin: 12px 0 0; }
    .leader-quote__copy { position: static; width: auto; margin-top: 12px; font-size: 16px; line-height: 24px; }
    .leader-quote__copy p:first-child { text-indent: 0; }
    .leader-quote__close { top: 8px; right: 8px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; background: rgba(2, 28, 37, .55); line-height: 34px; }
}

/* ── Full-bleed hero past the 16" cap ───────────────────────────────────── */
@media (min-width: 1729px) {
    .about-page { overflow: visible; }
    .ab-hero { width: var(--bleed-w); margin-left: var(--bleed-left); margin-right: 0; }
    .ab-hero__title { left: calc(61px + var(--bleed-shift)); }
    .ab-foundations { width: var(--bleed-w); margin-left: var(--bleed-left); margin-right: 0; }
}