/* ==========================================================================
   about-v4.css — About page upgrade layer  ·  v4.0
   Loaded LAST on about.html + ar/about.html (after inner-v3.css AND rtl.css).
   Pure reskin of the existing markup — no structural HTML changes required.

   What this layer does:
     1. LEADERSHIP  — the GM becomes a rounded feature card with a smaller
                      CIRCULAR portrait (halo + rotating open arc ring).
     2. DIRECTORS   — circular portraits, rounded cards, pill role labels,
                      circular index badges, seam sweep on hover.
     3. VISION/MISSION — flat blocks become rounded cards with pill tags,
                      ghost numerals and a hover seam.
     4. BANDS       — leadership gets a white→icefield wash, Tejoury gets the
                      v3 radial glow + grid, matching the hero.
     5. HEIGHT      — releases the one-viewport cap on the content-dense
                      scenes so nothing can clip once cards gain padding.

   RTL: written with logical properties throughout. Where a physical rule in
   rtl.css must be beaten, the selector is qualified (.gm .gm__quote, etc.) to
   tie on specificity and win on source order.

   TO REVERT: delete this file and its <link> from both About pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Local tokens (fall back if inner-v3.css ever loads after this)
   -------------------------------------------------------------------------- */
:root {
    --a4-r:        16px;
    --a4-r-lg:     22px;
    --a4-shadow:   0 18px 50px -18px rgba(11, 36, 69, 0.28);
    --a4-shadow-lg:0 30px 70px -30px rgba(11, 36, 69, 0.42);
    --a4-ease:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   1 · SCENE HEIGHT — let the content-dense acts breathe.
   .scene is capped to one viewport with overflow:hidden; once cards carry
   real padding that cap can clip. These three flow naturally instead.
   -------------------------------------------------------------------------- */
.about-who,
.about-vmv,
.about-tejoury {
    height: auto;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100dvh - var(--header-h));
    align-items: center;
    padding-block: clamp(72px, 9vh, 124px);
}
.about-who .scene__inner,
.about-vmv .scene__inner,
.about-tejoury .scene__inner { max-height: none; }

/* --------------------------------------------------------------------------
   1b · RTL — the decorative tile clusters are authored as "corner-tr". On the
   Arabic mirror the scene-index sits top-right too, so the tiles land straight
   on top of the label. Mirroring the whole cluster moves it to the free
   corner; the tiles are abstract squares, so flipping costs nothing.
   -------------------------------------------------------------------------- */
[dir="rtl"] .about-who .scene-tiles,
[dir="rtl"] .about-leadership .scene-tiles,
[dir="rtl"] .about-vmv .scene-tiles,
[dir="rtl"] .about-tejoury .scene-tiles { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   2 · WHO WE ARE — light polish only (facts are already v3 cards)
   -------------------------------------------------------------------------- */
.about-who {
    background:
        radial-gradient(720px 420px at 92% -6%, rgba(51, 116, 186, 0.07), transparent 70%),
        var(--icefield);
}
.about-who__lead h2 { margin-bottom: 28px; }
.about-who__lead p  { color: rgba(11, 36, 69, 0.82); }

/* --------------------------------------------------------------------------
   3 · LEADERSHIP BAND
   -------------------------------------------------------------------------- */
.about-leadership {
    background:
        radial-gradient(660px 420px at 8% 0%, rgba(51, 116, 186, 0.06), transparent 68%),
        linear-gradient(180deg, #ffffff 0%, #ffffff 58%, var(--icefield) 100%);
}

/* ---- 3a · The GM feature card ------------------------------------------- */
.gm {
    grid-template-columns: auto 1fr;
    gap: clamp(26px, 3.6vw, 60px);
    align-items: center;
    position: relative;
    /* NOTE: deliberately NOT overflow:hidden. The reveal observers measure the
       intersection of each child, and a clipping ancestor would keep the
       attribution row (which starts life translated 100px down) permanently at
       zero visible area — so it would never reveal. The top seam is therefore
       painted as a background layer, which border-radius clips for free. */
    background-color: var(--white);
    background-image: linear-gradient(90deg, var(--cerulean), var(--cerulean-light));
    background-size: 100% 4px;
    background-repeat: no-repeat;
    background-position: top center;
    border: 1.5px solid var(--ice);
    border-radius: var(--a4-r-lg);
    padding: clamp(30px, 3.4vw, 54px) clamp(28px, 3.4vw, 54px);
    box-shadow: var(--a4-shadow);
}

/* ghost quotation glyph — brand ghost-numeral vocabulary */
.gm::before {
    content: "\201C";
    position: absolute;
    top: 4px;
    inset-inline-end: clamp(18px, 3vw, 46px);
    font-size: clamp(120px, 14vw, 200px);
    font-weight: 900;
    line-height: 1;
    color: var(--ice);
    opacity: 0.65;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
[dir="rtl"] .gm::before { content: "\00AB"; font-size: clamp(96px, 11vw, 150px); top: 10px; }

/* ---- 3b · The circular portrait ----------------------------------------- */
.gm .gm__portrait {
    position: relative;
    z-index: 1;
    width: clamp(146px, 16vw, 202px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: transparent;
    overflow: visible;          /* the rings live outside the circle */
    margin-inline: auto;
}
.gm .gm__portrait img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;   /* bias to the head — tune here if needed */
    border-radius: 50%;
    display: block;
    background: var(--ice);
    box-shadow:
        0 0 0 6px var(--white),
        0 0 0 8px var(--ice),
        0 22px 46px -22px rgba(11, 36, 69, 0.55);
}

/* soft cerulean halo behind the circle */
.gm .gm__portrait::before {
    content: "";
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(51, 116, 186, 0.20), transparent 66%);
    z-index: 0;
    pointer-events: none;
}

/* the old square corner seam becomes a slowly rotating open arc ring */
.gm .gm__portrait::after {
    content: "";
    position: absolute;
    inset: -15px;
    inline-size: auto;
    block-size: auto;
    width: auto;
    height: auto;
    left: -15px; right: -15px; top: -15px; bottom: -15px;
    border: 2px solid var(--cerulean);
    border-inline-end-color: transparent;
    border-radius: 50%;
    background: none;
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
    animation: a4-ring-spin 22s linear infinite;
}
@keyframes a4-ring-spin { to { transform: rotate(360deg); } }

/* ---- 3c · The quote + attribution --------------------------------------- */
.gm__body { position: relative; z-index: 2; }
.gm__role {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    letter-spacing: 0.2em;
}
.gm__role::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--cerulean);
    flex: 0 0 auto;
}
.gm .gm__quote {
    padding-inline: 24px 0;
    padding-block: 2px;
    font-size: clamp(1.15rem, 1.75vw, 1.6rem);
    font-weight: 740;
    line-height: 1.38;
    color: var(--raven);
    margin-block-end: 24px;
}
.gm .gm__quote::before {
    content: "";
    position: absolute;
    inset-block: 2px;
    inset-inline-start: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--cerulean), var(--cerulean-light));
    border-radius: 3px;
}
.gm__attrib {
    align-items: center;
    gap: 14px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--ice);
}
.gm__name { font-size: 1.2rem; font-weight: 860; }
.gm__title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cerulean);
    background: var(--ice);
    border-radius: 999px;
    padding: 6px 14px;
}

/* --------------------------------------------------------------------------
   4 · DIRECTORS — circular portraits in rounded cards
   -------------------------------------------------------------------------- */
.dir-head { margin-block: clamp(34px, 5vh, 60px) clamp(20px, 3vh, 30px); }
.dir-head__label { letter-spacing: 0.2em; color: var(--cerulean); }

.dir-grid {
    gap: clamp(14px, 1.6vw, 22px);
    background: transparent;
    border: 0;
}

.dir {
    background: var(--white);
    border: 1.5px solid var(--ice);
    border-radius: var(--a4-r);
    padding: clamp(26px, 2.6vw, 34px) clamp(18px, 2vw, 24px) clamp(22px, 2.2vw, 28px);
    text-align: center;
    overflow: hidden;
    transition: transform 0.35s var(--a4-ease),
                box-shadow 0.35s var(--a4-ease),
                border-color 0.35s var(--a4-ease);
}
.dir:hover {
    background: var(--white);
    transform: translateY(-6px);
    box-shadow: var(--a4-shadow);
    border-color: var(--cerulean);
}
.dir::before {
    background: linear-gradient(90deg, var(--cerulean), var(--cerulean-light));
    height: 4px;
    transform-origin: center;
}

.dir .dir__portrait {
    position: relative;
    width: clamp(96px, 10vw, 126px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: transparent;
    overflow: visible;
    margin-inline: auto;
    margin-block-end: 4px;
}
.dir .dir__portrait img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 50%;
    background: var(--ice);
    box-shadow:
        0 0 0 5px var(--white),
        0 0 0 7px var(--ice),
        0 16px 32px -16px rgba(11, 36, 69, 0.45);
    transition: box-shadow 0.35s var(--a4-ease);
}
.dir:hover .dir__portrait img {
    box-shadow:
        0 0 0 5px var(--white),
        0 0 0 7px var(--cerulean-light),
        0 18px 36px -16px rgba(11, 36, 69, 0.5);
}

/* the hover seam bar becomes a hover ring around the circle */
.dir .dir__portrait::after {
    content: "";
    position: absolute;
    left: -13px; right: -13px; top: -13px; bottom: -13px;
    width: auto; height: auto;
    border: 2px solid var(--cerulean);
    border-inline-end-color: transparent;
    border-radius: 50%;
    background: none;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.35s var(--a4-ease), transform 0.6s var(--a4-ease);
    transform: rotate(-45deg);
}
.dir:hover .dir__portrait::after { opacity: 0.65; transform: rotate(90deg); }

/* index number: corner tab → circular badge centred on the circle's base */
.dir .dir__index {
    left: 50%;
    right: auto;
    bottom: -4px;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.66rem;
    font-weight: 800;
    background: var(--cerulean);
    color: var(--white);
    box-shadow: 0 0 0 3px var(--white);
    z-index: 3;
    transition: background 0.35s var(--a4-ease);
}
.dir:hover .dir__index { background: var(--deep-sky); }

.dir .dir__meta {
    border-block-start: 0;
    padding: 18px 0 0;
}
.dir__name { margin-block-end: 12px; }
.dir .dir__role {
    border-block-end: 0;
    border-bottom: 0;
    background: var(--icefield);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    transition: background 0.35s var(--a4-ease), color 0.35s var(--a4-ease);
}
.dir:hover .dir__role { background: var(--cerulean); color: var(--white); }

/* --------------------------------------------------------------------------
   5 · VISION / MISSION — flat blocks → rounded cards with ghost numerals
   -------------------------------------------------------------------------- */
.about-vmv {
    background:
        radial-gradient(700px 440px at 6% 4%, rgba(51, 116, 186, 0.07), transparent 68%),
        var(--icefield);
}

.about-vmv .vmv-grid { align-items: stretch; }

.vmv-block {
    position: relative;
    overflow: hidden;
    background: var(--white);
    border: 1.5px solid var(--ice);
    border-radius: var(--a4-r-lg);
    padding: clamp(26px, 3vw, 42px);
    transition: transform 0.35s var(--a4-ease),
                box-shadow 0.35s var(--a4-ease),
                border-color 0.35s var(--a4-ease);
}
.vmv-block:hover {
    transform: translateY(-5px);
    box-shadow: var(--a4-shadow);
    border-color: var(--cerulean);
}
/* seam sweep on hover */
.vmv-block::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cerulean), var(--cerulean-light));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s var(--a4-ease);
    z-index: 2;
}
.vmv-block:hover::before { transform: scaleX(1); }

/* ghost numeral */
.vmv-block::after {
    position: absolute;
    top: 10px;
    inset-inline-end: 20px;
    font-size: clamp(3.4rem, 6vw, 5.4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ice);
    pointer-events: none;
    user-select: none;
    transition: color 0.35s var(--a4-ease);
    z-index: 0;
}
.vmv-block:nth-child(1)::after { content: "01"; }
.vmv-block:nth-child(2)::after { content: "02"; }
.vmv-block:hover::after { color: var(--sky); }

.vmv-block__tag,
.vmv-block__title,
.vmv-block__body { position: relative; z-index: 1; }

.vmv-block__tag {
    border: 0;
    background: var(--ice);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cerulean);
    margin-bottom: 20px;
}
.vmv-block__title { padding-inline-end: clamp(0px, 4vw, 72px); }
.vmv-block__body  { color: rgba(11, 36, 69, 0.82); }

/* --------------------------------------------------------------------------
   6 · TEJOURY BAND — v3 glow + grid, matching the hero
   -------------------------------------------------------------------------- */
.about-tejoury {
    background-color: var(--midnight);
    background-image:
        radial-gradient(620px 460px at 88% -8%, rgba(51, 116, 186, 0.34), transparent 70%),
        linear-gradient(rgba(127, 185, 225, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 185, 225, 0.05) 1px, transparent 1px);
    background-size: auto, 56px 56px, 56px 56px;
}
.tej-statement h2 { text-wrap: balance; }

/* --------------------------------------------------------------------------
   6b · TEJOURY FAMILY — the Cubic cell.
   Every other sibling logo is a wide horizontal lockup, so the shared cell is
   tuned for those (max-height 38px). Cubic's official lockup is stacked and
   diagonal — mark upper-left, wordmarks lower-right, two empty quadrants — so
   at 38px its wordmark reads about half the size of its neighbours. Rather
   than rebuild their lockup, this cell trims its own padding and lets the
   artwork run taller, which restores matching optical weight.
   -------------------------------------------------------------------------- */
.tej-fam-cell--cubic { padding: 6px 10px; }
.tej-fam-cell--cubic img { max-height: 66px; }
@media (max-width: 480px) {
    .tej-fam-cell--cubic img { max-height: 54px; }
}

/* --------------------------------------------------------------------------
   7 · RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
    .gm {
        grid-template-columns: 1fr;
        gap: 26px;
        justify-items: center;
        padding: clamp(26px, 6vw, 38px) clamp(20px, 5vw, 30px);
    }
    .gm::before { font-size: clamp(110px, 26vw, 160px); top: -22px; }
    .gm .gm__quote { font-size: clamp(1.08rem, 4.2vw, 1.3rem); }
    .gm__attrib { justify-content: flex-start; }
}
@media (max-width: 480px) {
    .gm .gm__portrait { width: clamp(130px, 42vw, 160px); }
    .gm .gm__quote { padding-inline: 18px 0; }
    .dir { padding: 24px 18px; }
}

/* --------------------------------------------------------------------------
   8 · REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .gm .gm__portrait::after { animation: none; }
    .dir,
    .dir .dir__portrait img,
    .dir .dir__portrait::after,
    .dir .dir__index,
    .dir .dir__role,
    .vmv-block,
    .vmv-block::before,
    .vmv-block::after { transition: none !important; }
    .dir:hover,
    .vmv-block:hover { transform: none !important; }
    .dir:hover .dir__portrait::after { transform: rotate(-45deg); }
}