/* ==========================================================================
   about-page.css — the About page.
   Built on the cinematic scene system (scenes.css): full-height acts, scene
   index markers, [data-rise] reveals, scroll-assembled tiles. Adds the
   leadership layout, Vision/Mission/Values, and the Tejoury parentage block.
   Brand flat-rule holds: NO shadow / elevation / hover-lift on cards. Hover =
   colour-shift or cerulean top-seam only. Tiles are always squares.
   ========================================================================== */

/* ---------- ABOUT HERO ----------
   A quieter cinematic hero than the home page: sky field, tile scatter, a
   single declarative line. Same one-viewport cap as the scenes. */
.about-hero {
    position: relative;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow: hidden;
    background: #A5CFED;
    display: flex;
    align-items: center;
}
.about-hero__scatter { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ---- About-hero background video (optional) — mirrors .hero__video ------
   Same behaviour as the home hero: full-bleed muted autoplay loop at z-index:1,
   content (z-index:5) on top, scatter hidden while the video is active. To
   REVERT: remove the <video class="about-hero__video"> and the
   data-video-active attribute on .about-hero. ----------------------------- */
.about-hero__video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    display: block;
}
.about-hero[data-video-active] .about-hero__scatter { display: none; }
.about-hero__inner {
    position: relative; z-index: 5;
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}
.about-hero__eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 800;
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--midnight);
    opacity: 0.7;
    margin-bottom: 20px;
}
.about-hero__title {
    font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.4rem);
    font-weight: 880;
    letter-spacing: var(--tr-hero);
    line-height: 0.98;
    color: var(--raven);
    max-width: 16ch;
    margin-bottom: 26px;
}
.about-hero__title .accent { color: var(--cerulean); }
.about-hero__lead {
    font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
    line-height: 1.55;
    color: var(--midnight);
    max-width: 52ch;
}
.about-hero__status {
    position: absolute;
    left: var(--pad-x); right: var(--pad-x);
    bottom: clamp(20px, 4vh, 40px);
    z-index: 5;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--midnight); opacity: 0.62;
}
@media (max-width: 768px) {
    .about-hero { height: auto; min-height: 0; padding: clamp(96px,22vw,160px) 0 clamp(72px,16vw,110px); }
    .about-hero__inner { padding-inline: var(--pad-x-mobile); }
    .about-hero__status { position: static; padding: 0 var(--pad-x-mobile); margin-top: 40px; }
}

/* ---------- WHO WE ARE (scene--intro reuses .scene) ---------- */
.about-who { background: var(--icefield); }
.about-who__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
@media (max-width: 900px) { .about-who__grid { grid-template-columns: 1fr; gap: 44px; } }
.about-who__lead h2 {
    font-size: clamp(2rem, 4.4vw, 3.3rem);
    font-weight: 860;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--raven);
    margin-bottom: 26px;
}
.about-who__lead h2 .accent { color: var(--cerulean); }
.about-who__lead p {
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.62;
    color: var(--midnight);
    margin-bottom: 18px;
    max-width: 56ch;
}

/* the at-a-glance facts column */
.about-facts { display: flex; flex-direction: column; gap: 0; }
.about-fact {
    position: relative;
    padding: 20px 0 20px 24px;
    border-top: 1px solid var(--border-soft);
}
.about-fact:last-child { border-bottom: 1px solid var(--border-soft); }
.about-fact::before {
    content: ""; position: absolute;
    left: 0; top: 20px; bottom: 20px;
    width: 2px; background: var(--cerulean);
}
.about-fact__label {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--silver-dark);
    margin-bottom: 6px;
}
.about-fact__value {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    font-weight: 780; letter-spacing: -0.01em; color: var(--raven);
    line-height: 1.2;
}

/* ---------- LEADERSHIP ---------- */
/* Leadership is content-dense (GM + three directors), so it isn't forced into
   a single viewport — it flows naturally with generous breathing room top and
   bottom, and aligns to the TOP rather than vertically centering (which had
   pushed the GM portrait/quote flush against the section above). */
.about-leadership {
    background: #ffffff;
    height: auto;                 /* override .scene viewport cap — let it breathe */
    min-height: calc(100vh - var(--header-h));
    align-items: flex-start;
    padding-top: clamp(72px, 9vh, 130px);
    padding-bottom: clamp(64px, 8vh, 110px);
}
.about-leadership .scene__inner { max-height: none; }

/* Featured GM row — portrait + the GM word, side by side */
.gm {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: stretch;
    margin-bottom: clamp(44px, 6vh, 72px);
    padding-top: clamp(8px, 2vh, 24px);   /* extra air above the portrait + quote */
}
@media (max-width: 820px) { .gm { grid-template-columns: 1fr; gap: 32px; } }

.gm__portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--midnight);
    overflow: hidden;
}
.gm__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* cerulean corner seam — flat brand accent, not a shadow */
.gm__portrait::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 56px; height: 4px; background: var(--cerulean);
}
.gm__body { display: flex; flex-direction: column; justify-content: center; }
.gm__role {
    font-size: var(--fs-eyebrow); font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--cerulean); margin-bottom: 14px;
}
.gm__quote {
    font-size: clamp(1.2rem, 1.9vw, 1.7rem);
    font-weight: 760;
    letter-spacing: -0.015em;
    line-height: 1.32;
    color: var(--raven);
    margin: 0 0 22px;
    position: relative;
    padding-left: 26px;
}
.gm__quote::before {
    content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
    width: 3px; background: var(--cerulean);
}
.gm__quote .accent { color: var(--cerulean); }
.gm__attrib { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gm__name {
    font-size: 1.15rem; font-weight: 820; letter-spacing: -0.01em; color: var(--raven);
}
.gm__title { font-size: 0.92rem; color: var(--silver-dark); font-weight: 600; }

/* Directors grid — three flat cards */
.dir-head {
    display: flex; align-items: center; gap: 16px;
    margin: clamp(28px,4vh,48px) 0 clamp(20px,3vh,32px);
}
.dir-head__label {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--silver-dark);
}
.dir-head__rule { flex: 1; height: 1px; background: var(--border-soft); }

.dir-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
}
@media (max-width: 820px) { .dir-grid { grid-template-columns: 1fr; } }

.dir {
    background: #ffffff;
    position: relative;
    transition: background var(--dur-mid) var(--ease-inout);
}
.dir:hover { background: var(--icefield); }          /* colour-shift only, no lift */
.dir::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--cerulean);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-mid) var(--ease-out);
    z-index: 2;
}
.dir:hover::before { transform: scaleX(1); }

.dir__portrait {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--icefield);
    overflow: hidden;
}
.dir__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* index number floats over the portrait, bottom-left */
.dir__index {
    position: absolute; left: 0; bottom: 0;
    font-family: var(--f-mono, ui-monospace, monospace);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    color: #fff;
    background: var(--cerulean);
    padding: 5px 10px;
    z-index: 2;
}
/* cerulean corner seam echoing the GM portrait */
.dir__portrait::after {
    content: ""; position: absolute; right: 0; top: 0;
    width: 4px; height: 44px; background: var(--cerulean);
    opacity: 0; transition: opacity var(--dur-mid) var(--ease-inout);
}
.dir:hover .dir__portrait::after { opacity: 1; }

.dir__meta {
    padding: clamp(18px, 2vw, 26px);
    border-top: 1px solid var(--border-soft);
}
.dir__name {
    font-size: clamp(1.08rem, 1.35vw, 1.28rem);
    font-weight: 820; letter-spacing: -0.015em; color: var(--raven);
    line-height: 1.15; margin-bottom: 10px;
}
.dir__role {
    display: inline-block;
    font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--cerulean);
    line-height: 1.3;
    padding-bottom: 2px;
    border-bottom: 2px solid var(--border-soft);
}

/* ---------- VISION / MISSION / VALUES ---------- */
.about-vmv { background: var(--icefield); }
.vmv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
@media (max-width: 820px) { .vmv-grid { grid-template-columns: 1fr; gap: 32px; } }

.vmv-block { }
.vmv-block__tag {
    display: inline-block;
    font-family: var(--f-mono, ui-monospace, monospace);
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
    color: var(--cerulean);
    border: 1px solid var(--border-soft);
    padding: 5px 12px;
    margin-bottom: 18px;
}
.vmv-block__title {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 840; letter-spacing: -0.025em; color: var(--raven);
    line-height: 1.1; margin-bottom: 14px;
}
.vmv-block__body {
    font-size: clamp(0.98rem, 1.2vw, 1.12rem);
    line-height: 1.6; color: var(--midnight);
    max-width: 52ch;
}

/* values — a hairline-separated list, cerulean rule per item */
.values-list { display: flex; flex-direction: column; }
.values-list .about-fact { padding-block: 16px; }
.value-line__title {
    font-size: 1rem; font-weight: 800; letter-spacing: -0.005em;
    color: var(--raven); margin-bottom: 4px;
}
.value-line__body { font-size: 0.9rem; line-height: 1.5; color: var(--silver-dark); }

/* ---------- TEJOURY PARENTAGE ---------- */
.about-tejoury {
    background: var(--midnight);
    color: #fff;
}
.about-tejoury .scene-index__n { color: var(--cerulean-light); }
.about-tejoury .scene-index__rule { background: rgba(255,255,255,0.18); }
.about-tejoury .scene-index__label { color: rgba(255,255,255,0.55); }
.about-tejoury .close-grid-tex { opacity: 0.5; }

.tej-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: center;
    width: 100%;
}
@media (max-width: 900px) { .tej-layout { grid-template-columns: 1fr; gap: 44px; } }

.tej-statement h2 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 880; letter-spacing: -0.035em; line-height: 1.02;
    color: #fff; margin-bottom: 22px; max-width: 18ch;
}
.tej-statement h2 .accent { color: var(--cerulean-light); }
.tej-statement p {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.62; color: rgba(255,255,255,0.66);
    max-width: 48ch; margin-bottom: 16px;
}

/* the Tejoury logo lockup — links out to tejoury.com */
.tej-logo-card {
    background: #fff;
    padding: clamp(32px, 4vw, 52px);
    display: flex; flex-direction: column; gap: 22px;
}
.tej-logo-card__brand {
    display: inline-flex; align-items: center;
    text-decoration: none;
    transition: opacity var(--dur-mid) var(--ease-inout);
}
.tej-logo-card__brand:hover { opacity: 0.7; }
.tej-logo-card__brand img { height: clamp(38px, 5vw, 56px); width: auto; display: block; }
.tej-logo-card__note {
    font-size: 0.9rem; line-height: 1.55; color: var(--silver-dark);
}
.tej-logo-card__link {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--cerulean);
    text-decoration: none;
    transition: gap var(--dur-mid) var(--ease-inout), color var(--dur-mid) var(--ease-inout);
}
.tej-logo-card__link:hover { gap: 14px; color: var(--deep-sky); }
.tej-logo-card__link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* sub-brand family — a clean 2×2 framed grid INSIDE the white logo card.
   Each logo is optically centered in an equal cell, so wildly different
   aspect ratios read with consistent visual weight. Logos are their own
   multi-colour artwork on white (transparent PNGs, autocropped). */
.tej-family {
    margin-top: clamp(22px, 3vh, 36px);
    border-top: 1px solid var(--border-soft);
    padding-top: 22px;
}
.tej-family__label {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--silver-dark);
    margin-bottom: 18px;
}
.tej-family__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
}
.tej-fam-cell {
    background: #fff;
    aspect-ratio: 5 / 2;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(12px, 1.6vw, 20px);
    transition: background var(--dur-mid) var(--ease-inout);
}
.tej-fam-cell:hover { background: var(--icefield); }
.tej-fam-cell img {
    max-width: 100%;
    max-height: 38px;
    width: auto; height: auto;
    object-fit: contain;
    opacity: 0.9;
    transition: opacity var(--dur-mid) var(--ease-inout);
}
.tej-fam-cell:hover img { opacity: 1; }
@media (max-width: 480px) {
    .tej-fam-cell { aspect-ratio: 2 / 1; }
    .tej-fam-cell img { max-height: 30px; }
}

/* reveal hooks reuse [data-rise] from scenes.css */