/* =========================================
   ABOUT PAGE STYLES
   ========================================= */

/* =========================================
   WHO WE ARE
   Left-aligned and edge-to-edge inside .container,
   so titles, copy and the carousel all share the
   exact same left/right margins as every other
   section on the site (homepage included).
   ========================================= */
.wwa-about {
    background-color: var(--color-white);
    text-align: left;
}

.wwa-about .desc-text {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: justify;
    margin-bottom: 1.15rem;
}

.wwa-about .desc-text:last-of-type {
    margin-bottom: 0;
}

/* =========================================
   WHO WE ARE — 5-UP COVERFLOW CAROUSEL (full container width)
   All five images are on screen at once: the main one centered,
   two flanking it, and two outer ones that run off the edges so
   only part of each is visible. overflow:hidden clips them at
   exactly the container margins, so nothing bleeds outside.
   ========================================= */
.wwa-carousel {
    position: relative;
    width: 100%;
    height: 420px;
    margin-top: 2.75rem;
    perspective: 1600px;
    overflow: hidden;
}

.wwa-slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30%;
    height: 100%;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    background-color: var(--color-light);
    box-shadow: var(--shadow-md);
    border: 3px solid transparent;
    transition: transform 0.75s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.75s ease,
                filter 0.6s ease,
                box-shadow 0.4s ease,
                border-color 0.4s ease;
}

.wwa-slide.is-center {
    transform: translateX(-50%) scale(1) rotateY(0deg);
    z-index: 5;
    opacity: 1;
    filter: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-lg);
    cursor: default;
}

.wwa-slide.is-left {
    transform: translateX(-136.7%) scale(0.84) rotateY(26deg);
    z-index: 4;
    opacity: 0.72;
    filter: brightness(0.9);
    cursor: pointer;
}

.wwa-slide.is-right {
    transform: translateX(36.7%) scale(0.84) rotateY(-26deg);
    z-index: 4;
    opacity: 0.72;
    filter: brightness(0.9);
    cursor: pointer;
}

/* Outer pair — roughly half of each sits past the container edge */
.wwa-slide.is-far-left {
    transform: translateX(-210%) scale(0.7) rotateY(34deg);
    z-index: 3;
    opacity: 0.45;
    filter: brightness(0.82);
    cursor: pointer;
}

.wwa-slide.is-far-right {
    transform: translateX(110%) scale(0.7) rotateY(-34deg);
    z-index: 3;
    opacity: 0.45;
    filter: brightness(0.82);
    cursor: pointer;
}

.wwa-slide.is-left:hover,
.wwa-slide.is-right:hover {
    opacity: 0.92;
    filter: brightness(1);
}

.wwa-slide.is-far-left:hover,
.wwa-slide.is-far-right:hover {
    opacity: 0.68;
    filter: brightness(0.95);
}

/* Manual switching — arrows sit on top of the side slides */
.wwa-nav {
    position: absolute;
    top: 50%;
    z-index: 6;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(40, 65, 162, 0.16);
    background-color: var(--color-white);
    color: var(--color-navy);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease,
                color 0.3s ease, transform 0.3s ease;
}

.wwa-nav-prev { left: 0.75rem; }
.wwa-nav-next { right: 0.75rem; }

.wwa-nav:hover {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
    transform: translateY(-50%) scale(1.08);
}

/* Dots row under the carousel (the old caption block is gone) */
.wwa-carousel-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 1.5rem;
}

.wwa-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.wwa-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(40, 65, 162, 0.22);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wwa-dot:hover { background-color: rgba(40, 65, 162, 0.45); }

.wwa-dot.active {
    background-color: var(--color-blue);
    width: 24px;
    border-radius: 5px;
}

/* =========================================
   GM QUOTE BANNER — one sentence at a time, looping.
   Advances automatically, and also responds to a click
   anywhere on the box, a scroll over it, or a swipe.
   ========================================= */
.gm-quote-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    margin-top: 2.25rem;
    padding: 2rem 3.25rem;
    border-radius: 16px;
    border: 1px solid rgba(40, 65, 162, 0.14);
    border-left: 4px solid var(--color-blue);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Border colour intentionally stays put on hover — the quote marks
   are the element that reacts instead (see .gm-quote-mark below). */
.gm-quote-banner:hover {
    box-shadow: 0 10px 26px rgba(24, 38, 74, 0.08);
}

/* Two decorative quote marks: top-left and bottom-right */
.gm-quote-mark {
    position: absolute;
    font-size: 2rem;
    line-height: 1;
    color: var(--color-blue);
    opacity: 0.35;
    pointer-events: none;
    transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

/* Hovering anywhere on the box lights both quote marks up */
.gm-quote-banner:hover .gm-quote-mark,
.gm-quote-banner:focus-visible .gm-quote-mark {
    color: #18264a;
    opacity: 1;
}

.gm-quote-banner:hover .gm-quote-mark--open  { transform: translate(-2px, -2px) scale(1.14); }
.gm-quote-banner:hover .gm-quote-mark--close { transform: translate(2px, 2px) scale(1.14); }

.gm-quote-mark--open  { top: 1rem; left: 1.15rem; }
.gm-quote-mark--close { bottom: 1rem; right: 1.15rem; }

.gm-quote-body {
    flex: 1;
    min-width: 0;
    /* Two-line reserve so the banner height doesn't jump between sentences */
    min-height: 4.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gm-quote-text {
    color: var(--color-navy);
    font-size: 1.25rem;
    font-weight: 500;
    font-style: italic;
    line-height: 1.6;
    margin: 0 0 0.4rem;
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Toggled by about.js between sentences — direction-aware */
.gm-quote-text.is-swapping-next { opacity: 0; transform: translateY(-10px); }
.gm-quote-text.is-swapping-prev { opacity: 0; transform: translateY(10px); }
.gm-quote-text.no-transition { transition: none; }

.gm-quote-author {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--color-blue);
}

.gm-quote-author em {
    font-style: normal;
    font-weight: 500;
    color: var(--color-gray);
}

@media (max-width: 640px) {
    .gm-quote-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 2.25rem 1.5rem;
    }
    .gm-quote-text { font-size: 1.05rem; }
    .gm-quote-mark { font-size: 1.6rem; }
}

@media (max-width: 900px) {
    .wwa-carousel { height: 340px; }
    .wwa-slide { width: 44%; }
    .wwa-slide.is-left      { transform: translateX(-118%) scale(0.82) rotateY(24deg); }
    .wwa-slide.is-right     { transform: translateX(18%) scale(0.82) rotateY(-24deg); }
    .wwa-slide.is-far-left  { transform: translateX(-166%) scale(0.68) rotateY(32deg); }
    .wwa-slide.is-far-right { transform: translateX(66%) scale(0.68) rotateY(-32deg); }
}

@media (max-width: 640px) {
    .wwa-carousel { height: 290px; }
    .wwa-slide { width: 58%; }
    .wwa-slide.is-left      { transform: translateX(-112%) scale(0.76) rotateY(22deg); }
    .wwa-slide.is-right     { transform: translateX(12%) scale(0.76) rotateY(-22deg); }
    .wwa-slide.is-far-left  { transform: translateX(-150%) scale(0.62) rotateY(30deg); }
    .wwa-slide.is-far-right { transform: translateX(50%) scale(0.62) rotateY(-30deg); }
    .wwa-nav { width: 38px; height: 38px; font-size: 0.85rem; }
}

/* =========================================
   OUR JOURNEY — wavy connected timeline
   ========================================= */
.story-section {
    background-color: var(--color-navy);
    text-align: left;

    /* Single shared gradient for every year's text box — off-white to slate gray */
    --story-card-gradient: linear-gradient(135deg, #f3f6fa , #f3f6fac2 90%);}

.story-section .overline {
    color: var(--color-accent);
}

.story-section .section-title {
    color: var(--color-white);
}

.story-section .section-title .highlight-blue {
    color: var(--color-accent);
}

.story-section .desc-text {
    color: rgba(255, 255, 255, 0.75);
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: justify;
    margin-bottom: 3%;
}


/* No scrollbar: the track is fluid and always fits its container. */
.story-wave-wrap {
    position: relative;
    margin-top: 0;
    overflow: visible;
    padding: 0;
}

.story-track {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-width: 0;
    /* Just enough room for the wave swing plus the year label above and
       the caption below each circle — no more dead space than that. */
    padding: 5.25rem 0 6.75rem;
}

.story-wave-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
}

.story-wave-base {
    stroke: rgba(255, 255, 255, 0.3);
    opacity: 1;
}

.story-wave-highlight {
    stroke: var(--color-accent);
    filter: drop-shadow(0 0 5px rgba(94, 200, 229, 0.7));
    transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
}

/* The node box is exactly as tall as its circle, with the year label and
   the caption both absolutely positioned outside it. Because every node
   therefore has identical height, the circle centres always land on the
   same two baselines — nodes 1/3/5/7 parallel, nodes 2/4/6/8 parallel —
   no matter how long or short an individual caption happens to be. */
.story-node {
    position: relative;
    z-index: 1;
    display: block;
    /* Each node takes an equal share of the track, capped so it never
       stretches on very wide screens. Nothing spills past the track
       edges, so no horizontal scrollbar is ever needed. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 150px;
    height: 78px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
}

/* Wider swing than before, so the wave reads as a real wave */
.story-node--up { transform: translateY(-40px); }
.story-node--down { transform: translateY(40px); }

.story-node-year {
    position: absolute;
    bottom: calc(100% + 0.65rem);
    left: 0;
    right: 0;
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-accent);
    transition: color 0.3s ease, transform 0.3s ease;
}

.story-node-circle {
    width: 78px;
    height: 78px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: var(--color-navy);
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.story-node-title {
    position: absolute;
    top: calc(100% + 0.8rem);
    left: 0;
    right: 0;
    display: block;
    font-size: 0.98rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    line-height: 1.35;
    transition: color 0.3s ease;
}

.story-node:hover .story-node-circle {
    transform: translateY(-4px) scale(1.06);
    border-color: var(--color-white);
}

.story-node:hover .story-node-year,
.story-node.active .story-node-year {
    color: var(--color-white);
}

.story-node.active .story-node-circle {
    background-color: #f3f6fa;
    border-color: #f3f6fa;
    color: var(--color-navy);
    transform: scale(1.12);
    box-shadow: 0 6px 20px rgba(94, 200, 229, 0.45);
}

.story-node.active .story-node-title {
    color: var(--color-white);
}

/* Year detail box — full container width, one shared gradient for all
   years, and a staged cross-dissolve instead of the 3D flip. */
.story-detail-flip {
    width: 100%;
    max-width: none;
    margin: 0;
}

.story-detail-card {
    position: relative;
    display: grid;               /* both faces share one cell -> no height jump */
    width: 100%;
    min-height: 210px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--story-card-gradient);
    border: 1px solid rgba(24, 38, 74, 0.12);
    border-right: none;   /* right edge intentionally open */
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
    margin-top: 3%;
}

/* Accent sweep — makes it unmistakable that the content changed */
.story-detail-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    /* Thicker + slower than before so the sweep is unmissable */
    height: 6px;
    background: linear-gradient(90deg, transparent 0%, var(--color-accent) 42%, var(--color-accent) 50%,  transparent 100%);
    box-shadow: 0 0 14px rgba(40, 65, 162, 0.5);
    transform: translateX(-100%);
    pointer-events: none;
}

.story-detail-card.is-sweeping::after {
    animation: storySweep 1.7s cubic-bezier(0.33, 0, 0.2, 1);
}

/* Hovering the box replays the same sweep on its own */
.story-detail-card:hover::after {
    animation: storySweep 1.7s cubic-bezier(0.33, 0, 0.2, 1);
}

@keyframes storySweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.story-detail-face {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 2.1rem 2.5rem;
    text-align: left;
    background: transparent;

    /* resting (outgoing) state */
    opacity: 0;
    transform: translateY(16px) scale(0.99);
    filter: blur(5px);
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
                filter 0.5s ease;
}

.story-detail-face.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
    z-index: 2;
    transition-delay: 0.14s;
}

/* Staggered reveal of the three text elements */
.story-detail-face .story-detail-year,
.story-detail-face h3,
.story-detail-face p {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.story-detail-face.is-active .story-detail-year,
.story-detail-face.is-active h3,
.story-detail-face.is-active p {
    opacity: 1;
    transform: translateY(0);
}

.story-detail-face.is-active .story-detail-year { transition-delay: 0.20s; }
.story-detail-face.is-active h3                 { transition-delay: 0.28s; }
.story-detail-face.is-active p                  { transition-delay: 0.36s; }

.story-detail-year {
    display: inline-block;
    background-color: rgba(24, 38, 74, 0.08);
    border: 1px solid rgba(24, 38, 74, 0.24);
    color: var(--color-navy);
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 1.5px;
    padding: 0.5rem 1.6rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.story-detail-face h3 {
    font-size: 1.5rem;
    color: var(--color-navy);
    margin-bottom: 0.6rem;
}

/* Copy runs the full width of the card */
.story-detail-face p {
    color: var(--color-navy);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0;
    width: 100%;
    max-width: none;
    text-align: justify;
}

@media (prefers-reduced-motion: reduce) {
    .story-detail-face,
    .story-detail-face .story-detail-year,
    .story-detail-face h3,
    .story-detail-face p { transition-duration: 0.01s; filter: none; transform: none; }
    .story-detail-card.is-sweeping::after { animation: none; }
}

/* Timeline scales down rather than scrolling sideways */
@media (max-width: 1100px) {
    .story-track { padding: 4.5rem 0 6rem; }
    .story-node { height: 64px; }
    .story-node-circle { width: 64px; height: 64px; font-size: 1.35rem; }
    .story-node-year { font-size: 0.95rem; }
    .story-node-title { font-size: 0.86rem; }
    .story-node--up { transform: translateY(-32px); }
    .story-node--down { transform: translateY(32px); }
}

@media (max-width: 800px) {
    .story-track { padding: 3.75rem 0 5.5rem; }
    .story-node { height: 48px; }
    .story-node-circle { width: 48px; height: 48px; font-size: 1.05rem; }
    .story-node-year { font-size: 0.8rem; }
    .story-node-title { font-size: 0.72rem; line-height: 1.3; }
    .story-node--up { transform: translateY(-24px); }
    .story-node--down { transform: translateY(24px); }
}

@media (max-width: 560px) {
    .story-track { padding: 3rem 0 4.75rem; }
    .story-node { height: 36px; }
    .story-node-circle { width: 36px; height: 36px; font-size: 0.8rem; }
    .story-node-year { font-size: 0.66rem; }
    .story-node-title { font-size: 0.6rem; }
    .story-node--up { transform: translateY(-18px); }
    .story-node--down { transform: translateY(18px); }
}

@media (max-width: 640px) {
    .story-detail-face { padding: 1.6rem 1.35rem; }
    .story-detail-card { min-height: 260px; }
    .story-detail-face p { text-align: left; }
}

/* ---- Mobile-only redesign: vertical timeline ----
   The horizontal SVG wave (built for wide screens) is replaced by a
   plain vertical spine. Each year's marker sits on the left; its
   short label and its full sentence (the same copy used in the
   desktop flip-card, via data-desc) sit beside it on the right. This
   block intentionally comes last so it wins over the narrower-screen
   sizing tweaks above. */
@media (max-width: 640px) {
    .story-wave-svg { display: none; }

    .story-track {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2.25rem;
        padding: 1rem 0;
    }

    .story-track::before {
        content: "";
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 27px;
        width: 2px;
        background: rgba(255, 255, 255, 0.25);
        z-index: 0;
    }

    .story-node,
    .story-node--up,
    .story-node--down {
        transform: none;
        flex: none;
        max-width: none;
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 1.1rem;
        row-gap: 0.3rem;
        align-items: start;
        text-align: left;
    }

    .story-node-circle {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
        width: 56px;
        height: 56px;
        margin: 0;
        font-size: 1.2rem;
    }

    .story-node-year {
        grid-column: 2;
        grid-row: 1;
        position: static;
        text-align: left;
        font-size: 1rem;
    }

    .story-node-title {
        grid-column: 2;
        grid-row: 2;
        position: static;
        text-align: left;
        font-size: 0.92rem;
    }

    /* The full sentence for this year, sourced straight from the same
       data-desc attribute the desktop detail card reads via JS — no
       markup duplication needed. */
    .story-node::after {
        content: attr(data-desc);
        grid-column: 2;
        grid-row: 3;
        display: block;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.82rem;
        line-height: 1.5;
        font-weight: 400;
        text-align: left;
    }

    /* The shared flip-card is no longer needed — every node already
       shows its own full sentence inline. */
    .story-detail-flip { display: none; }
}

/* =========================================
   REGIONAL PRESENCE
   ========================================= */
/* The 50/50 column split and stretch alignment come from the
   `.media-split` class on this element (see main.css) — the global
   standard shared by every text+photo section, so it can't drift out
   of sync page to page. Only the gap is tuned here. */
.regional-grid {
    gap: 3.5rem;
}

.regional-tabs-col {
    padding-right: 3rem;
    border-right: 1px solid var(--color-light);
}

.regional-tabs-col .section-title {
    white-space: nowrap;
    font-size: clamp(1rem, 2.3vw, 1.9rem);
}

.regional-intro-text {
    text-align: justify;
    margin-bottom: 2rem;
}

/* The closing paragraph is the last thing in the text column, so its
   trailing margin would push the column (and therefore the map frame
   beside it) 2rem past the last line of type. Drop it so the map ends
   exactly level with that last line. */
.regional-tabs-col > :last-child,
.regional-tabs-col > :last-child > :last-child {
    margin-bottom: 0;
}

.region-tabs-list {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--color-light);
}

.region-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0 0.25rem 0.85rem;
    margin-right: 1.5rem;
    font-family: var(--font-main);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-gray);
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.region-tab-btn i {
    font-size: 0.95rem;
    color: var(--color-gray);
    transition: color 0.3s ease;
}

.region-tab-btn:hover {
    color: var(--color-navy);
}

.region-tab-btn.active {
    color: var(--color-navy);
    border-bottom-color: var(--color-blue);
}

.region-tab-btn.active i {
    color: var(--color-blue);
}

.region-detail {
    display: none;
    animation: fadeInTab 0.4s ease-in-out;
}

.region-detail.active {
    display: block;
}

.region-detail .region-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-accent-dark);
    margin-bottom: 0.5rem;
}

.region-detail h3 {
    font-size: 1.6rem;
    color: var(--color-navy);
    margin-bottom: 0.85rem;
}

.region-detail p {
    color: var(--color-navy);
    font-size: 1rem;
    line-height: 1.7;
}

.regional-map-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    height: 100%;
}

/* No aspect-ratio: the frame takes its height from the text column
   beside it (see .media-frame in main.css). */
.regional-map-frame {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    background-color: var(--color-light);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Static regional artwork — replaces the old interactive Leaflet map.
   The frame is now taller than the artwork's native ratio, so `cover`
   crops the left/right edges slightly. If any pin gets clipped, either
   nudge the focal point with object-position, or switch to `contain`. */
.regional-static-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

@media (max-width: 900px) {
    .regional-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
    .regional-tabs-col {
        padding-right: 0;
        border-right: none;
    }
    .regional-tabs-col .section-title {
        white-space: normal;
        font-size: clamp(1.7rem, 4vw, 2.5rem);
    }
    /* Stacked: no text column to match, so fall back to a fixed ratio */
    .regional-map-frame {
        max-width: 400px;
        margin: 0 auto;
        height: auto;
        flex: 0 0 auto;
        aspect-ratio: 5 / 4;
    }
}

/* =========================================
   Strategic Intent & Values
   ========================================= */
/* Section background is now the Vision artwork, darkened for legibility */
.strategic-section {
    position: relative;
    isolation: isolate;
    background-color: var(--color-navy); /* Acts as a fallback */
    /* Add a linear-gradient with rgba colors BEFORE the url() */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
        url('Images/backgrounds/about_bgs/vision.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* No tint layer — the artwork shows in its own colours. Headings lean on
   a text shadow rather than an overlay to stay readable over it. */
.strategic-section .overline {
    color: var(--color-accent);
    text-shadow: 0 2px 10px rgba(10, 16, 36, 0.85);
}

.strategic-section .section-title {
    color: var(--color-white);
    text-shadow: 0 2px 14px rgba(10, 16, 36, 0.8);
}

.strategic-section .section-title .highlight-blue { color: var(--color-accent); }

.strategic-intro-text {
    color: var(--color-white);
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    text-align: justify;
    margin-bottom: 2rem;
    text-shadow: 0 2px 10px rgba(10, 16, 36, 0.9);
}

/* No per-tab photo any more — the card is just a wrapper for the text box */
.strategic-visual-card {
    position: relative;
    min-height: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.strategic-visual-card::before { content: none; }

.strategic-visual-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 780px;
    min-height: 270px;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* Lighter, more transparent glass panel */
    background: rgba(10, 16, 36, 0.205);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    border-radius: 14px;
    padding: 2.6rem 2.9rem;
}

#mission .strategic-visual-overlay,
#vision .strategic-visual-overlay,
#values .strategic-visual-overlay {
    margin: 0;
    text-align: left;
}

.strategic-visual-overlay h3 {
    color: var(--color-white);
    font-size: 2.05rem;
    font-weight: 800;
    margin: 0 0 0.85rem 0;
}

/* Values tab — four bullets instead of a paragraph */
.strategic-values-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.strategic-values-list li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.55;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Plain round bullet — no tick mark */
.strategic-values-list li::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 0.62rem;
    border-radius: 50%;
    background-color: var(--color-accent);
}

.strategic-values-list strong {
    font-weight: 800;
    color: var(--color-white);
}

.strategic-visual-overlay p,
.strategic-visual-overlay .desc-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.65;
    margin: 0;
    max-width: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    .strategic-visual-overlay,
    #mission .strategic-visual-overlay,
    #vision .strategic-visual-overlay,
    #values .strategic-visual-overlay {
        margin: 0;
        max-width: none;
        min-height: 0;
        padding: 1.75rem 1.5rem;
    }
    .strategic-visual-overlay h3 {
        font-size: 1.6rem;
    }
    .strategic-visual-overlay p,
    .strategic-visual-overlay .desc-text {
        font-size: 1rem;
    }
    .strategic-values-list li { font-size: 1rem; gap: 0.7rem; }
    .strategic-intro-text { text-align: left; }
}

/* Tabs (Mission/Vision/Values) */
.tabs-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Resting: solid white pill with dark-navy label.
   Hover / selected: pill goes transparent with light-grey label. */
.tab-btn {
    background: var(--color-white);
    border: 1px solid var(--color-white);
    padding: 0.6rem 1.6rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-navy);
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.tab-btn:hover,
.tab-btn:focus-visible,
.tab-btn.active {
    background-color: transparent;
    border-color: rgba(243, 246, 250, 0.7);
    color: var(--color-light);
    text-shadow: 0 1px 6px rgba(10, 16, 36, 0.85);
}

.tab-content {
    display: none;
    animation: fadeInTab 0.4s ease-in-out;
}

.tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   Trust & Governance
   ========================================= */
.trust-section {
    background-color: var(--color-white);
}

/* The 50/50 split + stretch alignment are inherited from `.media-split`
   in main.css (this element also carries that class in the HTML) —
   `.grid-2` here only sets the gap. Keeping `stretch` is what lets the
   image column stay level with the title at the top and the copy at
   the bottom. */
.grid-2 {
    gap: 4rem;
}

.trust-detail-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 2rem;
}

.trust-detail-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    /* Single-colour navy, fading from lower opacity on the left up to
       full opacity on the right — rather than blending into a second
       colour. */
    background-image: linear-gradient(90deg, #18264a 0%, #18264abe 100%);
    background-color: var(--color-navy);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-main);
    box-shadow: 0 8px 20px rgba(24, 38, 74, 0.18);
    transition: transform 0.3s ease, box-shadow 0.3s ease,
                border-color 0.3s ease, background-image 0.3s ease;
}

/* Same treatment on hover, just in royal blue instead of navy — still
   one colour fading from lower opacity (left) to full opacity (right). */
.trust-detail-btn:hover {
    background-image: linear-gradient(90deg, #2841A2 0%, #2840a275 100%);
    background-color: var(--color-blue);
    border-color: var(--color-white);
    transform: translateX(4px);
    box-shadow: 0 12px 26px rgba(40, 65, 162, 0.28);
}

.trust-detail-btn .list-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.trust-detail-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.trust-detail-text strong {
    color: var(--color-white);
    font-size: 1.1rem;
    font-weight: 700;
}

.trust-detail-text span {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
}

.trust-detail-text strong { line-height: 1.35; }

.trust-detail-arrow {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.trust-detail-btn:hover .trust-detail-arrow {
    transform: translateX(4px);
    color: var(--color-white);
}

/* Selected state — same royal blue → sky blue gradient as hover + white outline */
.trust-detail-btn.active {
    background-image: linear-gradient(135deg, #2841A2 0%, #2840a2b9 100%);
    background-color: var(--color-blue);
    border-color: var(--color-white);
    box-shadow: 0 14px 30px rgba(40, 65, 162, 0.3);
}

.trust-detail-btn.active .list-icon {
    background-color: rgba(255, 255, 255, 0.22);
    color: var(--color-white);
}

.trust-detail-btn.active .trust-detail-text strong,
.trust-detail-btn.active .trust-detail-text span,
.trust-detail-btn.active .trust-detail-arrow {
    color: var(--color-white);
}

/* No aspect-ratio and no max-width cap: the panel fills the whole
   column, so it runs from the top of the "— TRUST & GOVERNANCE"
   overline down to the bottom of the last bullet button. */
.trust-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--color-light);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Five stacked images — the first is the static default shown on load,
   the other four are revealed by the bullet buttons. */
.local-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(0.9);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.trust-img {
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}

.trust-img.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

/* Text box: absent on load / refresh, appears with the selected image */
.trust-image-caption {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 3;
    background: rgba(14, 23, 48, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;

    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.45s ease,
                transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0s linear 0.5s;
}

.trust-image-caption.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0.15s, 0.15s, 0s;
}

.trust-image-eyebrow {
    display: block;
    color: var(--color-accent);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}

.trust-image-caption p {
    color: var(--color-white);
    font-size: 1.08rem;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 992px) {

    /* Panel stays completely hidden until a button is tapped */
    .trust-image-wrapper {
        display: none;
    }

    /* Once JS moves it under a button, it becomes a text box */
    .trust-image-wrapper.is-inline-panel {
        display: block;
        position: static;
        width: 100%;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        flex: 0 0 auto;

        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
        padding: 0;
        margin: -0.85rem 0 0;

        font-size: 0;
        line-height: 0;
    }

    /* No images anywhere on mobile */
    .trust-image-wrapper .local-img,
    .trust-image-wrapper .trust-img {
        display: none !important;
    }

    /* Single caption rule — royal blue */
    .trust-image-wrapper.is-inline-panel .trust-image-caption {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;

        background: #2841A2;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-top: 0;
        border-radius: 0 0 14px 14px;
        padding: 1.1rem 1.25rem;

        font-size: 1rem;
        line-height: 1.55;
    }

    /* Square off the active button's bottom so the box reads as attached */
    .trust-detail-btn.active {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-color: transparent;
    }

    .trust-image-eyebrow { font-size: 0.9rem; }
    .trust-image-caption p { font-size: 0.98rem; }
}

/* =========================================
   Elite Technical Expertise / Certifications
   ========================================= */
.expertise-section {
    background-color: var(--color-navy);
}

.expertise-section .overline {
    color: var(--color-accent);
}

.expertise-section .section-title {
    color: var(--color-white);
}

.expertise-section .desc-text {
    color: rgba(255, 255, 255, 0.75);
}

.expertise-row-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.12);
    margin: 0 auto 3rem;
    max-width: 1280px;
}

.expertise-container {
    max-width: 1280px;
    margin: 0 auto;
}

.expertise-split-grid {
    display: grid;
    grid-template-columns: 1.21fr 1fr;
    gap: 5rem;
    align-items: flex-start;
    width: 100%;
}

.expertise-header h2 {
    margin-bottom: 1.5rem !important;
}

/* Twelve short bullets — six per column, reading top-to-bottom */
.expertise-points {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(6, auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1.75rem;
}

.expertise-points li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}

.expertise-points li i {
    flex-shrink: 0;
    font-size: 0.9rem;
    color: var(--color-accent);
}

@media (max-width: 600px) {
    .expertise-points {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: 1fr;
    }
}

.certifications-grid-13 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 100%;
}

.cert-box {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.75rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    cursor: default;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cert-box img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    /* Zoom in slightly so the badge text inside the artwork is legible */
    transform: scale(1.14);
    transition: transform 0.3s ease;
}

.cert-box:hover {
    transform: translateY(-5px) scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    background-color: var(--color-white);
}

.cert-box:hover img {
    transform: scale(1.22);
}

/* =========================================
   Final CTA — reuses main.css cta-rounded-box
   ========================================= */
/* Full-bleed band — same edge-to-edge treatment as the homepage
   statistics strip, but with the banner video running behind it
   instead of a flat navy fill. */
.about-cta-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--color-white);
    padding: 3.5rem 0;
    text-align: center;
}

.about-cta-section .cta-bg-image,
.about-cta-section .cta-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    display: block;
    pointer-events: none;
}


.about-cta-section .cta-video-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg,
                rgba(126, 138, 150, 0.13) 0%,
                rgba(243, 246, 250, 0.58) 50%,
                rgba(126, 138, 150, 0.13) 100%);
} 

.about-cta-section .cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
}

/* Dark type now that the band behind it is light */
.cta-justify-heading {
    font-size: clamp(1.5rem, 2.9vw, 2.15rem) !important;
    color: var(--color-navy);
    text-align: center;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
}

/* main.css turns this button transparent-with-white-text on hover, which
   would vanish against the light band — flip it to navy instead. */
.about-cta-section .btn-solid-navy {
    background-color: var(--color-navy);
    color: var(--color-white);
    border-color: var(--color-navy);
}

.about-cta-section .btn-solid-navy:hover {
    background-color: transparent;
    color: #18264a;
    border-color: #18264a;
}

.about-cta-section .cta-button-group {
    margin: 0;
}

@media (max-width: 700px) {
    .about-cta-section { padding: 2.75rem 0; }
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 992px) {
    .expertise-split-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .expertise-split-grid .expertise-header {
        order: -1;
    }
    .certifications-grid-13 {
        grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
        gap: 0.85rem;
    }
    .cert-box {
        padding: 0.25rem;
    }
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .trust-section .grid-2 {
        grid-template-columns: 1fr;
    }
    .trust-image-wrapper {
        max-width: 560px;
        margin: 0 auto;
        height: auto;
        min-height: 0;
        flex: 0 0 auto;
        aspect-ratio: 1 / 1;
    }

    /* Once JS has moved the panel to sit directly under the button that
       was pressed, give it its own breathing room in that new spot. */
    .trust-image-wrapper.is-inline-panel {
        margin: 0.85rem auto 0.35rem;
    }
}

@media (max-width: 900px) {
    .about-hero {
        padding: 8.5rem 0 3.5rem;
    }
}

@media (max-width: 600px) {
    .tabs-header {
        flex-wrap: wrap;
    }
    .tab-btn {
        flex: 1 1 auto;
        text-align: center;
    }
    /* Keep all three country buttons beside each other in a single
       row (rather than wrapping/stacking) — each takes an equal
       share of the width, with smaller type so "Saudi Arabia" still
       fits comfortably next to the other two. */
    .region-tabs-list {
        flex-wrap: nowrap;
        gap: 0.25rem;
    }
    .region-tab-btn {
        flex: 1 1 0;
        min-width: 0;
        margin-right: 0;
        padding: 0 0 0.65rem;
        gap: 0.35rem;
        font-size: 0.8rem;
        justify-content: center;
        text-align: center;
    }
    .region-tab-btn i {
        font-size: 0.8rem;
    }

    /* Exactly 3 certification badges per row on phones, sized down
       (smaller padding/gap) so all 3 fit comfortably and more rows
       fit on screen without scrolling. Placed after the 992px block
       above so it correctly overrides that rule's auto-fit columns
       at phone widths. */
    .certifications-grid-13 {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }
    .cert-box {
        padding: 0.3rem;
        border-radius: 8px;
    }
}