/* ==========================================================================
   About Us Premium (page-about.php) — panel order: hero → stats → intro → blocks
   RTL/LTR: logical properties + html[dir] overrides. Optional VMG block styles below.
   ========================================================================== */

.yre-about-page {
    --ab-gold: var(--color-secondary, #c9a227);
    --ab-gold-rgb: var(--color-secondary-rgb, 201, 162, 39);
    --ab-dark: var(--color-primary, #0c2340);
    --ab-dark-rgb: var(--color-primary-rgb, 12, 35, 64);
    --ab-radius: clamp(16px, 2.5vw, 26px);
    --ab-radius-lg: clamp(22px, 4vw, 36px);
    --ab-shadow: 0 4px 28px rgba(0, 0, 0, 0.07);
    --ab-shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.12);
    --ab-surface: color-mix(in srgb, var(--color-card-bg, #fff) 92%, var(--ab-dark) 8%);
    --ab-surface-elevated: color-mix(in srgb, var(--color-card-bg, #fff) 96%, transparent);
    --ab-text-muted: var(--color-card-text, #5c5c5c);
    --ab-border: var(--color-card-border, rgba(12, 35, 64, 0.08));
}

.yre-about-page .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ---------- 1. Hero ---------- */
.yre-about-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(5.25rem, 13vw, 7.5rem) 0 clamp(2.75rem, 7vw, 4.5rem);
    text-align: center;
    overflow: hidden;
    background: linear-gradient(
        155deg,
        var(--ab-dark) 0%,
        color-mix(in srgb, var(--ab-dark) 75%, #000) 45%,
        var(--color-dark, #030a14) 100%
    );
}

.yre-about-hero__mesh {
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--ab-gold-rgb), 0.35), transparent 55%),
        radial-gradient(ellipse 60% 40% at 100% 50%, rgba(var(--ab-gold-rgb), 0.12), transparent 50%),
        radial-gradient(ellipse 50% 50% at 0% 80%, rgba(255, 255, 255, 0.06), transparent 45%);
    pointer-events: none;
    z-index: 0;
}

.yre-about-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.45;
}

.yre-about-hero__orb--a {
    width: min(42vw, 380px);
    height: min(42vw, 380px);
    top: -12%;
    inset-inline-start: -8%;
    background: rgba(var(--ab-gold-rgb), 0.35);
    animation: yre-about-float-a 22s ease-in-out infinite;
}

.yre-about-hero__orb--b {
    width: min(36vw, 320px);
    height: min(36vw, 320px);
    bottom: -18%;
    inset-inline-end: -6%;
    background: rgba(255, 255, 255, 0.12);
    animation: yre-about-float-b 26s ease-in-out infinite;
}

@keyframes yre-about-float-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(4%, 6%) scale(1.05); }
}

@keyframes yre-about-float-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-5%, -4%) scale(1.08); }
}

.yre-about-hero__gridline {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 100% 48px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
    pointer-events: none;
    z-index: 0;
}

.yre-about-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 52rem;
    margin-inline: auto;
}

.yre-about-hero__kicker {
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(var(--ab-gold-rgb), 0.95);
}

.yre-about-hero__title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 5.2vw, 3.65rem);
    font-weight: 900;
    line-height: 1.08;
    color: var(--color-white, #fff);
    letter-spacing: -0.03em;
}

.yre-about-hero__subtitle {
    margin: 0 auto;
    max-width: 36rem;
    font-size: clamp(0.98rem, 2.1vw, 1.2rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}

.yre-about-hero__rule {
    display: block;
    width: 3rem;
    height: 3px;
    margin-block-start: 1.5rem;
    margin-inline: auto;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--ab-gold),
        rgba(var(--ab-gold-rgb), 0.4),
        transparent
    );
}

/* ---------- 2. Statistics band ---------- */
.yre-about-stats {
    position: relative;
    z-index: 1;
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.yre-about-stats__band {
    padding-block: clamp(1rem, 2vw, 2rem);
}

.yre-about-stats__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

.yre-about-stats__item {
    position: relative;
    text-align: center;
    padding: clamp(1.15rem, 2.8vw, 1.85rem) clamp(0.75rem, 2vw, 1.25rem);
    border-radius: var(--ab-radius);
    border: 1px solid var(--ab-border);
    background: var(--ab-surface-elevated);
    box-shadow: var(--ab-shadow);
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease,
        box-shadow 0.4s ease;
}

@supports (backdrop-filter: blur(14px)) {
    .yre-about-stats__item {
        backdrop-filter: blur(14px);
        background: color-mix(in srgb, var(--ab-surface-elevated) 88%, transparent);
    }
}

.yre-about-stats__item:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--ab-gold) 45%, var(--ab-border));
    box-shadow: var(--ab-shadow-hover);
}

.yre-about-stats__glow {
    position: absolute;
    inset-inline: 20%;
    top: 0;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(var(--ab-gold-rgb), 0.18), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.yre-about-stats__item:hover .yre-about-stats__glow {
    opacity: 1;
}

.yre-about-stats__number {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin-block-end: 0.4rem;
    font-size: clamp(1.85rem, 3.8vw, 2.85rem);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    background: linear-gradient(135deg, #ffffff, var(--ab-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.yre-about-stats__suffix {
    font-size: 0.55em;
    font-weight: 800;
    opacity: 0.9;
}

.yre-about-stats__label {
    position: relative;
    margin: 0;
    font-size: clamp(0.88rem, 1.8vw, 1.05rem);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.75);
}


/* Dark bg stats overrides */
.yre-about-stats .yre-about-stats__item {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px);
}
.yre-about-stats .yre-about-stats__item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-4px);
}

/* ---------- 3. Intro (story + media) ---------- */
.yre-about-intro {
    padding-block: clamp(3rem, 9vw, 5.5rem);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-card-bg, #fafaf7) 100%, transparent) 0%,
        color-mix(in srgb, var(--color-card-bg, #f5f5f0) 100%, var(--ab-dark) 2%) 100%
    );
}

.yre-about-intro__shell {
    position: relative;
}

.yre-about-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

.yre-about-intro__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ab-gold) 85%, var(--ab-dark));
}

.yre-about-intro__heading {
    margin: 0 0 1.1rem;
    font-size: clamp(1.65rem, 3.8vw, 2.45rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-title-section, var(--ab-dark));
}

.yre-about-intro__prose {
    font-size: clamp(0.98rem, 2vw, 1.08rem);
    line-height: 1.82;
    color: rgba(255, 255, 255, 0.75);
}

.yre-about-intro__prose p:last-child {
    margin-bottom: 0;
}

.yre-about-intro__cta {
    margin-block-start: 1.75rem;
}

.yre-about-intro__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.yre-about-intro__btn:focus-visible {
    outline: 2px solid var(--ab-gold);
    outline-offset: 3px;
}

.yre-about-intro__media {
    position: relative;
}

.yre-about-intro__frame {
    position: relative;
    padding: clamp(0.35rem, 1.2vw, 0.55rem);
    border-radius: var(--ab-radius-lg);
    background: linear-gradient(
        135deg,
        rgba(var(--ab-gold-rgb), 0.25),
        color-mix(in srgb, var(--ab-dark) 15%, transparent)
    );
    box-shadow: var(--ab-shadow);
}

.yre-about-intro__figure {
    margin: 0;
    position: relative;
    border-radius: calc(var(--ab-radius-lg) - 6px);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.yre-about-intro__figure::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.yre-about-intro__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.yre-about-intro__img--placeholder {
    min-height: 280px;
    aspect-ratio: 4 / 3;
    background: linear-gradient(
        135deg,
        rgba(var(--ab-gold-rgb), 0.28),
        rgba(15, 23, 42, 0.45)
    );
}

.yre-about-intro__frame:hover .yre-about-intro__img {
    transform: scale(1.06);
}

/* Offset accent — logical: extends toward inline-end */
.yre-about-intro__media::after {
    content: '';
    position: absolute;
    inset-block: 8%;
    inset-inline-end: -10px;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--ab-gold), rgba(var(--ab-gold-rgb), 0.2));
    z-index: 2;
    pointer-events: none;
}

html[dir="rtl"] .yre-about-intro__media::after {
    inset-inline-end: auto;
    inset-inline-start: -10px;
}

/* ---------- 4. Company blocks (bento + featured first) ---------- */
/* ---------- 4. Company blocks — Timeline stack (no cards, content-driven) ---------- */
.yre-co {
    --co-bg: color-mix(in srgb, var(--ab-dark) 92%, #000);
    --co-text: rgba(255, 255, 255, 0.93);
    --co-muted: rgba(255, 255, 255, 0.62);
    --co-line: rgba(255, 255, 255, 0.1);
    --co-dot-size: 3rem;
    --co-aside-w: 5.5rem;
    position: relative;
    padding: clamp(3.5rem, 10vw, 6.5rem) 0;
    overflow: hidden;
    color: var(--co-text);
    background:
        radial-gradient(ellipse 80% 50% at 50% -5%, rgba(var(--ab-gold-rgb), 0.1), transparent 50%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(var(--ab-dark-rgb), 0.3), transparent 50%),
        linear-gradient(172deg, var(--co-bg) 0%, color-mix(in srgb, var(--co-bg) 85%, #000) 100%);
}

.yre-co__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.yre-co__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(72px);
    opacity: 0.35;
    pointer-events: none;
}

.yre-co__orb--a {
    width: min(38vw, 320px);
    height: min(38vw, 320px);
    top: -8%;
    inset-inline-start: -6%;
    background: rgba(var(--ab-gold-rgb), 0.3);
    animation: yre-co-drift 20s ease-in-out infinite;
}

.yre-co__orb--b {
    width: min(28vw, 240px);
    height: min(28vw, 240px);
    bottom: -12%;
    inset-inline-end: -4%;
    background: rgba(255, 255, 255, 0.08);
    animation: yre-co-drift 24s ease-in-out infinite reverse;
}

@keyframes yre-co-drift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(3%, 5%); }
}

.yre-co__wrap {
    position: relative;
    z-index: 1;
}

/* Header */
.yre-co__header {
    text-align: center;
    margin-block-end: clamp(2.5rem, 6vw, 4rem);
}

.yre-co__heading {
    margin: 0;
    font-size: clamp(1.65rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--co-text);
}

.yre-co__rule {
    display: block;
    width: 4rem;
    height: 3px;
    margin: 1rem auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--ab-gold), transparent);
    opacity: 0.9;
}

/* Stack — each row is full-width, flows with content */
.yre-co__stack {
    position: relative;
    max-width: 52rem;
    margin-inline: auto;
}

/* Individual row */
.yre-co__row-inner {
    display: flex;
    gap: clamp(1rem, 3vw, 1.75rem);
    align-items: stretch;
}

/* Aside: number + icon-dot + connecting line */
.yre-co__aside {
    position: relative;
    flex-shrink: 0;
    width: var(--co-aside-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block-start: 0.15rem;
}

.yre-co__num {
    font-size: clamp(0.65rem, 1.2vw, 0.72rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.15em;
    color: rgba(var(--ab-gold-rgb), 0.55);
    margin-block-end: 0.55rem;
    line-height: 1;
}

.yre-co__dot {
    position: relative;
    z-index: 2;
    width: var(--co-dot-size);
    height: var(--co-dot-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--ab-gold), color-mix(in srgb, var(--ab-gold) 60%, #c45c26));
    box-shadow:
        0 0 0 5px rgba(var(--ab-gold-rgb), 0.15),
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(var(--ab-gold-rgb), 0.2);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.yre-co__row:hover .yre-co__dot {
    transform: scale(1.08);
    box-shadow:
        0 0 0 7px rgba(var(--ab-gold-rgb), 0.2),
        0 8px 30px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(var(--ab-gold-rgb), 0.3);
}

.yre-co__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.yre-co__icon svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.yre-co__line {
    flex: 1;
    width: 2px;
    margin-block: 0.65rem;
    background: linear-gradient(
        180deg,
        rgba(var(--ab-gold-rgb), 0.35),
        var(--co-line) 40%,
        var(--co-line) 75%,
        transparent 100%
    );
    border-radius: 2px;
}

/* Body: title + prose — fills remaining width, grows with content */
.yre-co__body {
    flex: 1;
    min-width: 0;
    padding-block: 0.1rem clamp(2rem, 5vw, 3.25rem);
}

.yre-co__row--last .yre-co__body {
    padding-block-end: 0;
}

.yre-co__title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.2rem, 2.8vw, 1.55rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--co-text);
}

.yre-co__prose {
    font-size: clamp(0.92rem, 2vw, 1.06rem);
    line-height: 1.85;
    color: var(--co-muted);
}

.yre-co__prose p {
    margin: 0 0 0.8rem;
}

.yre-co__prose p:last-child {
    margin-bottom: 0;
}

.yre-co__prose ul,
.yre-co__prose ol {
    margin: 0.5rem 0 0;
    padding-inline-start: 1.25rem;
}

.yre-co__prose li {
    margin-bottom: 0.4rem;
}

.yre-co__prose a {
    color: color-mix(in srgb, var(--ab-gold) 85%, #fff);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(var(--ab-gold-rgb), 0.4);
    transition: text-decoration-color 0.25s ease;
}

.yre-co__prose a:hover {
    text-decoration-color: #ffffff;
    background: linear-gradient(135deg, #ffffff, var(--ab-gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.yre-co__prose a:focus-visible {
    outline: 2px solid var(--ab-gold);
    outline-offset: 3px;
}

/* Desktop: wider aside, better spacing */
@media (min-width: 768px) {
    .yre-co__stack {
        max-width: 56rem;
    }

    .yre-co {
        --co-dot-size: 3.5rem;
        --co-aside-w: 6.5rem;
    }

    .yre-co__icon svg {
        width: 22px;
        height: 22px;
    }
}

/* Mobile: compact aside */
@media (max-width: 479px) {
    .yre-co {
        --co-dot-size: 2.5rem;
        --co-aside-w: 3.75rem;
    }

    .yre-co__num {
        font-size: 0.6rem;
    }

    .yre-co__icon svg {
        width: 16px;
        height: 16px;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .yre-about-stats__band {
        margin-block-start: -1rem;
    }

    .yre-about-stats__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yre-about-intro__grid {
        grid-template-columns: 1fr;
    }

    /* Story before image on small viewports */
    .yre-about-intro__body {
        order: -1;
    }
}

@media (max-width: 599px) {
    .yre-about-stats__grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yre-about-hero__orb--a,
    .yre-about-hero__orb--b,
    .yre-co__orb--a,
    .yre-co__orb--b {
        animation: none;
    }

    .yre-about-stats__item,
    .yre-co__dot,
    .yre-about-intro__img {
        transition: none;
    }

    .yre-about-stats__item:hover {
        transform: none;
    }

    .yre-co__row:hover .yre-co__dot {
        transform: none;
    }

    .yre-about-intro__frame:hover .yre-about-intro__img {
        transform: scale(1.02);
    }
}

/* ==========================================================================
   About Page — Vision / Mission / Goals (optional legacy block)
   ========================================================================== */

.yre-about-vmg {
    --vmg-gold: var(--color-secondary, #c9a227);
    --vmg-gold-rgb: 201, 162, 39;
    --vmg-dark: var(--color-primary, #0c2340);
    --vmg-dark-rgb: 12, 35, 64;
    --vmg-radius: 20px;
    --vmg-radius-sm: 14px;

    position: relative;
    padding: clamp(3rem, 8vw, 6rem) 0;
    overflow: hidden;
    background-color: #fafaf7;
}

/* decorative blurred circles */
.yre-about-vmg::before,
.yre-about-vmg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .18;
    pointer-events: none;
    z-index: 0;
}

.yre-about-vmg::before {
    width: 500px;
    height: 500px;
    top: -140px;
    left: -120px;
    background: var(--vmg-gold);
}

.yre-about-vmg::after {
    width: 400px;
    height: 400px;
    bottom: -100px;
    right: -80px;
    background: var(--vmg-dark);
}

.yre-about-vmg__container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------- Section heading ---------- */
.yre-about-vmg__heading {
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.yre-about-vmg__heading-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    color: var(--vmg-dark);
    margin: 0;
    line-height: 1.25;
}

.yre-about-vmg__heading-bar {
    display: block;
    width: 64px;
    height: 4px;
    margin: .75rem auto 0;
    border-radius: 2px;
    background: var(--vmg-gold);
}

/* ---------- Vision + Mission row ---------- */
.yre-about-vmg__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .yre-about-vmg__row {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/* ---------- Card base ---------- */
.yre-about-vmg__card {
    position: relative;
    border-radius: var(--vmg-radius);
    padding: clamp(1.75rem, 4vw, 2.5rem);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 8px 32px rgba(0, 0, 0, .06);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}

.yre-about-vmg__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06), 0 20px 48px rgba(0, 0, 0, .1);
}

/* top accent stripe */
.yre-about-vmg__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--vmg-gold), rgba(var(--vmg-gold-rgb), .3));
}

/* card type modifiers */
.yre-about-vmg__card--vision::before {
    background: linear-gradient(90deg, var(--vmg-gold), rgba(var(--vmg-gold-rgb), .15));
}

.yre-about-vmg__card--mission::before {
    background: linear-gradient(90deg, var(--vmg-dark), rgba(var(--vmg-dark-rgb), .2));
}

/* ---------- Card icon ---------- */
.yre-about-vmg__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin-bottom: 1.25rem;
    color: #fff;
    flex-shrink: 0;
}

.yre-about-vmg__card--vision .yre-about-vmg__card-icon {
    background: linear-gradient(135deg, var(--vmg-gold), rgba(var(--vmg-gold-rgb), .7));
}

.yre-about-vmg__card--mission .yre-about-vmg__card-icon {
    background: linear-gradient(135deg, var(--vmg-dark), rgba(var(--vmg-dark-rgb), .7));
}

.yre-about-vmg__card-icon svg {
    width: 28px;
    height: 28px;
}

/* ---------- Card text ---------- */
.yre-about-vmg__card-label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vmg-gold);
    margin-bottom: .5rem;
}

.yre-about-vmg__card--mission .yre-about-vmg__card-label {
    color: var(--vmg-dark);
}

.yre-about-vmg__card-title {
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 800;
    color: var(--vmg-dark);
    margin: 0 0 .75rem;
    line-height: 1.3;
}

.yre-about-vmg__card-text {
    font-size: clamp(.9rem, 2vw, 1.05rem);
    line-height: 1.75;
    color: #555;
    margin: 0;
}

/* ---------- Goals section ---------- */
.yre-about-vmg__goals-header {
    text-align: center;
    margin-bottom: 2rem;
}

.yre-about-vmg__goals-title {
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 800;
    color: var(--vmg-dark);
    margin: 0;
}

.yre-about-vmg__goals-bar {
    display: block;
    width: 48px;
    height: 3px;
    margin: .6rem auto 0;
    border-radius: 2px;
    background: var(--vmg-gold);
}

.yre-about-vmg__goals-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 600px) {
    .yre-about-vmg__goals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .yre-about-vmg__goals-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---------- Goal card ---------- */
.yre-about-vmg__goal {
    position: relative;
    border-radius: var(--vmg-radius-sm);
    padding: clamp(1.5rem, 3vw, 2rem) 1.25rem 1.5rem;
    background: #fff;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
    overflow: hidden;
}

.yre-about-vmg__goal:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .09);
}

/* numbered corner badge */
.yre-about-vmg__goal-num {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    font-size: .7rem;
    font-weight: 800;
    color: rgba(var(--vmg-gold-rgb), .35);
    line-height: 1;
}

.yre-about-vmg__goal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 14px;
    background: rgba(var(--vmg-gold-rgb), .1);
    color: var(--vmg-gold);
    transition: background .3s ease, color .3s ease;
}

.yre-about-vmg__goal:hover .yre-about-vmg__goal-icon {
    background: var(--vmg-gold);
    color: #fff;
}

.yre-about-vmg__goal-icon svg {
    width: 24px;
    height: 24px;
}

.yre-about-vmg__goal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vmg-dark);
    margin: 0 0 .5rem;
    line-height: 1.35;
}

.yre-about-vmg__goal-text {
    font-size: .875rem;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/* ---------- RTL adjustments ---------- */
[dir="rtl"] .yre-about-vmg__card::before,
[dir="rtl"] .yre-about-vmg__card--vision::before,
[dir="rtl"] .yre-about-vmg__card--mission::before {
    left: auto;
    right: 0;
    background-position: right;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .yre-about-vmg__card,
    .yre-about-vmg__goal {
        transition: none;
    }
    .yre-about-vmg__card:hover,
    .yre-about-vmg__goal:hover {
        transform: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — Vision & Mission Cards
   ═══════════════════════════════════════════════════════════════ */

.about-vm-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFB 100%);
    position: relative;
    overflow: hidden;
}

.about-vm-header {
    text-align: center;
    margin-bottom: 60px;
}

.about-vm-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--color-dark, #0D1520);
    margin: 0 0 16px;
    font-family: var(--font-primary, inherit);
}

.about-vm-divider {
    width: 60px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-primary, #d65231), var(--color-tertiary, #33A1AD));
    margin: 0 auto;
}

.about-vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.about-vm-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 44px 36px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease;
}

.about-vm-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

.about-vm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.about-vm-card--vision::before {
    background: linear-gradient(90deg, var(--color-primary, #d65231), #f0845a);
}

.about-vm-card--mission::before {
    background: linear-gradient(90deg, var(--color-tertiary, #33A1AD), #5bc4d0);
}

.about-vm-card__icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.about-vm-card--vision .about-vm-card__icon {
    background: rgba(214, 82, 49, 0.08);
    color: var(--color-primary, #d65231);
}

.about-vm-card--mission .about-vm-card__icon {
    background: rgba(51, 161, 173, 0.08);
    color: var(--color-tertiary, #33A1AD);
}

.about-vm-card__label {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 12px;
    color: var(--color-dark, #0D1520);
    font-family: var(--font-primary, inherit);
}

.about-vm-card--vision .about-vm-card__label {
    color: var(--color-primary, #d65231);
}

.about-vm-card--mission .about-vm-card__label {
    color: var(--color-tertiary, #33A1AD);
}

.about-vm-card__text {
    font-size: 1rem;
    line-height: 1.85;
    color: #5D6D7E;
    margin: 0;
    font-family: var(--font-primary, inherit);
}

.about-vm-card__text strong {
    color: var(--color-dark, #0D1520);
}


/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — Philosophy Section
   ═══════════════════════════════════════════════════════════════ */

.about-philosophy-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.about-philosophy-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-dark, #0D1520) 0%, #162033 100%);
    z-index: 0;
}

/* Respect admin bg_mode for philosophy */
.about-philosophy-section.about-bg--light .about-philosophy-bg,
.about-philosophy-section.about-bg--default .about-philosophy-bg,
.about-philosophy-section.about-bg--custom.about-bg--is-light .about-philosophy-bg,
.about-philosophy-section[data-scheme="light"] .about-philosophy-bg {
    background: #f8f9fb;
}

/* Light mode text colors for philosophy */
.about-philosophy-section.about-bg--light .about-philosophy-title,
.about-philosophy-section.about-bg--default .about-philosophy-title,
.about-philosophy-section[data-scheme="light"] .about-philosophy-title,
.about-philosophy-section.about-bg--light .about-philosophy-card__title,
.about-philosophy-section.about-bg--default .about-philosophy-card__title,
.about-philosophy-section[data-scheme="light"] .about-philosophy-card__title {
    color: #1a1a2e;
}

.about-philosophy-section.about-bg--light .about-philosophy-desc,
.about-philosophy-section.about-bg--default .about-philosophy-desc,
.about-philosophy-section[data-scheme="light"] .about-philosophy-desc,
.about-philosophy-section.about-bg--light .about-philosophy-card__text,
.about-philosophy-section.about-bg--default .about-philosophy-card__text,
.about-philosophy-section[data-scheme="light"] .about-philosophy-card__text {
    color: #555;
}

.about-philosophy-section.about-bg--light .about-philosophy-eyebrow,
.about-philosophy-section.about-bg--default .about-philosophy-eyebrow,
.about-philosophy-section[data-scheme="light"] .about-philosophy-eyebrow {
    color: var(--color-primary, #007aa1);
}

.about-philosophy-section.about-bg--light .about-philosophy-card,
.about-philosophy-section.about-bg--default .about-philosophy-card,
.about-philosophy-section[data-scheme="light"] .about-philosophy-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.about-philosophy-section.about-bg--light .about-philosophy-card__icon,
.about-philosophy-section.about-bg--default .about-philosophy-card__icon,
.about-philosophy-section[data-scheme="light"] .about-philosophy-card__icon {
    background: rgba(0,122,161,0.08);
    color: var(--color-primary, #007aa1);
}

.about-philosophy-section .container {
    position: relative;
    z-index: 1;
}

.about-philosophy-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.about-philosophy-eyebrow {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.5);
    margin: 0 0 12px;
    font-family: var(--font-primary, inherit);
}

.about-philosophy-title {
    font-size: 2rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 20px;
    line-height: 1.5;
    font-family: var(--font-primary, inherit);
}

.about-philosophy-title__accent {
    background: linear-gradient(90deg, var(--color-primary, #d65231), #f0845a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-philosophy-desc {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.7);
    margin: 0;
    font-family: var(--font-primary, inherit);
}

.about-philosophy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

.about-philosophy-card {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 40px 32px;
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
}

.about-philosophy-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-4px);
}

.about-philosophy-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(214,82,49,0.15), rgba(214,82,49,0.05));
    color: var(--color-primary, #d65231);
}

.about-philosophy-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 14px;
    font-family: var(--font-primary, inherit);
}

.about-philosophy-card__text {
    font-size: 0.95rem;
    line-height: 1.85;
    color: rgba(255,255,255,0.65);
    margin: 0;
    font-family: var(--font-primary, inherit);
}

.about-philosophy-card__text strong {
    color: var(--color-primary, #d65231);
}


/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — Board of Trustees
   ═══════════════════════════════════════════════════════════════ */

.about-board-section {
    padding: 100px 0;
    background: #FFFFFF;
}

.about-board-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px;
}

.about-board-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-dark, #0D1520);
    margin: 0 0 16px;
    font-family: var(--font-primary, inherit);
}

.about-board-subtitle {
    font-size: 1rem;
    line-height: 1.8;
    color: #7B8794;
    margin: 0 0 20px;
    font-family: var(--font-primary, inherit);
}

.about-board-divider {
    width: 60px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--color-primary, #d65231), var(--color-tertiary, #33A1AD));
    margin: 0 auto;
}

.about-board-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.about-board-card {
    background: #FAFBFC;
    border-radius: 20px;
    padding: 40px 28px 36px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.04);
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    overflow: hidden;
}

.about-board-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary, #d65231), var(--color-tertiary, #33A1AD));
    transition: width 0.4s ease;
    border-radius: 0 0 3px 3px;
}

.about-board-card:hover::before {
    width: 80%;
}

.about-board-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    background: #FFFFFF;
}

.about-board-card__photo-wrap {
    width: auto;
    height: auto;
    border-radius: 10%;
    margin: 0 auto 24px;
    overflow: hidden;
    border: 1px solid rgba(214,82,49,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    box-shadow: 0px 10px 16px 7px rgb(0 0 0 / 53%);
    max-height: 290px;
}

.about-board-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-board-card__photo--placeholder {
    color: #C4C9D0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F2F4F7;
}

.about-board-card__name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark, #0D1520);
    margin: 0 0 6px;
    font-family: var(--font-primary, inherit);
}

.about-board-card__role {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary, #d65231);
    margin: 0 0 12px;
    font-family: var(--font-primary, inherit);
}

.about-board-card__bio {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #7B8794;
    margin: 0;
    font-family: var(--font-primary, inherit);
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — New Sections
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .about-vm-grid,
    .about-philosophy-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .about-vm-section,
    .about-philosophy-section {
        padding: 60px 0;
    }

    .about-vm-title,
    .about-philosophy-title {
        font-size: 1.8rem;
    }

    .about-board-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 400px;
    }

    .about-board-section {
        padding: 60px 0;
    }

    .about-board-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .about-vm-card {
        padding: 32px 24px;
    }

    .about-philosophy-card {
        padding: 28px 20px;
    }

    .about-philosophy-title {
        font-size: 1.5rem;
    }

    .about-board-card {
        padding: 32px 20px 28px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION BACKGROUND MODES
   ═══════════════════════════════════════════════════════════════ */
.about-bg--default { background: transparent; }
.about-bg--light   { background: var(--color-neutral-100, #f1f3f5); }
.about-bg--dark    { background: var(--color-dark, #1a1d23); color: #fff; }
.about-bg--custom  { /* inline style sets background-color */ }
.about-bg--is-dark { color: #fff; }
.about-bg--is-dark .about-vm-title,
.about-bg--is-dark .about-board-title,
.about-bg--is-dark .about-vm-card__label { color: #fff; }
.about-bg--is-dark .about-vm-card__text,
.about-bg--is-dark .about-board-subtitle { color: rgba(255,255,255,0.7); }
.about-bg--is-dark .about-vm-divider { background: rgba(255,255,255,0.2); }
.about-bg--is-light { color: var(--color-text, #1a1d23); }

/* ═══════════════════════════════════════════════════════════════
   COLOR DISTRIBUTION — 60/30/10 Rule
   
   Intro:     PRIMARY accent (eyebrow, CTA)
   V&M:       SECONDARY accent (vision card = secondary, mission = tertiary)
   Philosophy: TERTIARY accent on dark bg
   Board:     PRIMARY accent (role badge, hover border)
   Stats:     PRIMARY glow numbers on dark bg
   
   Each section uses a DIFFERENT color — never all primary.
   ═══════════════════════════════════════════════════════════════ */

/* ── INTRO: Primary accent ── */
.yre-about-intro__eyebrow {
    color: var(--color-primary, #007aa1);
}
.yre-about-intro__heading {
    color: var(--color-dark, #1a1d23);
}

/* ── STATS: Primary glow on dark ── */
.yre-about-stats__glow {
    background: radial-gradient(circle, rgba(var(--color-primary-rgb, 0,122,161), 0.15), transparent 70%);
}
.yre-about-stats__number {
    color: var(--color-primary, #007aa1);
}
.yre-about-stats__label {
    color: var(--color-neutral-600, #868e96);
}
.about-bg--dark .yre-about-stats__number {
    color: #fff;
    text-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.3);
}
.about-bg--dark .yre-about-stats__label {
    color: rgba(255,255,255,0.65);
}

/* ── VISION & MISSION: Secondary + Tertiary ── */
.about-vm-title { color: var(--color-dark, #1a1d23); }
.about-vm-divider {
    background: linear-gradient(90deg, var(--color-secondary, #1a7a8a), var(--color-tertiary, #e8a838));
}

/* Vision card → SECONDARY accent */
.about-vm-card--vision { border-top: 4px solid var(--color-secondary, #1a7a8a); }
.about-vm-card--vision .about-vm-card__icon {
    background: rgba(var(--color-secondary-rgb, 26,122,138), 0.08);
    color: var(--color-secondary, #1a7a8a);
}
.about-vm-card--vision .about-vm-card__label { color: var(--color-secondary, #1a7a8a); }
.about-vm-card--vision:hover {
    border-top-color: var(--color-secondary-hover, #156b78);
}

/* Mission card → TERTIARY accent */
.about-vm-card--mission { border-top: 4px solid var(--color-tertiary, #e8a838); }
.about-vm-card--mission .about-vm-card__icon {
    background: rgba(var(--color-tertiary-rgb, 232,168,56), 0.08);
    color: var(--color-tertiary, #e8a838);
}
.about-vm-card--mission .about-vm-card__label { color: var(--color-tertiary, #e8a838); }
.about-vm-card--mission:hover {
    border-top-color: var(--color-tertiary-hover, #d49530);
}

.about-vm-card__text { color: var(--color-neutral-700, #495057); }

/* ── PHILOSOPHY: Tertiary accent on dark ── */
.about-philosophy-section.about-bg--dark,
.about-philosophy-section.about-bg--default .about-philosophy-bg {
    background: linear-gradient(135deg, var(--color-dark, #1a1d23) 0%, #162033 100%);
}
.about-philosophy-title {
    color: #fff;
}
.about-philosophy-title span,
.about-philosophy-title strong {
    background: linear-gradient(90deg, var(--color-tertiary, #e8a838), #f0c060);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.about-philosophy-desc { color: rgba(255,255,255,0.7); }
.about-philosophy-eyebrow { color: rgba(255,255,255,0.5); }

.about-philosophy-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}
.about-philosophy-card:hover {
    background: rgba(255,255,255,0.1);
}
.about-philosophy-card__icon {
    background: linear-gradient(135deg, rgba(var(--color-tertiary-rgb, 232,168,56), 0.15), rgba(var(--color-tertiary-rgb), 0.05));
    color: var(--color-tertiary, #e8a838);
}
.about-philosophy-card__title { color: #fff; }
.about-philosophy-card__text { color: rgba(255,255,255,0.65); }
.about-philosophy-card__text strong { color: var(--color-tertiary, #e8a838); }

/* ── BOARD: Primary accent on light ── */
.about-board-title { color: var(--color-dark, #1a1d23); }
.about-board-subtitle { color: var(--color-neutral-600, #868e96); }
.about-board-divider {
    background: linear-gradient(90deg, var(--color-primary, #007aa1), var(--color-secondary, #1a7a8a));
}
.about-board-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.04);
}
.about-board-card::before {
    background: linear-gradient(90deg, var(--color-primary, #007aa1), var(--color-secondary, #1a7a8a));
}
.about-board-card:hover {
    background: #fff;
}
.about-board-card__photo-wrap {
    border-color: rgba(var(--color-primary-rgb, 0,122,161), 0.1);
}
.about-board-card__name { color: var(--color-dark, #1a1d23); }
.about-board-card__role { color: var(--color-primary, #007aa1); }
.about-board-card__bio { color: var(--color-neutral-600, #868e96); }

/* ── LTR/RTL Support ── */
[dir="ltr"] .yre-about-intro__grid {
    direction: ltr;
}
[dir="rtl"] .yre-about-intro__grid {
    direction: rtl;
    flex-direction: row-reverse;
}
[dir="rtl"] .about-vm-grid {
    direction: rtl;
}
[dir="rtl"] .about-philosophy-grid {
    direction: rtl;
}
[dir="rtl"] .about-board-grid {
    direction: rtl;
}
[dir="rtl"] .about-vm-card {
    text-align: right;
}
[dir="ltr"] .about-vm-card {
    text-align: left;
}
[dir="rtl"] .about-vm-card__icon,
[dir="rtl"] .about-philosophy-card__icon {
    margin-right: 0;
    margin-left: 0;
}
[dir="rtl"] .about-vm-header,
[dir="rtl"] .about-philosophy-header,
[dir="rtl"] .about-board-header {
    text-align: center;
}