/* ==========================================================================
   UB HERITAGE — ABOUT PAGE
   File: assets/css/about.css   (enqueue on the About page template)

   Structure convention (every section):
     section.about-{name}.about-section
       > .about-container        (max-width 1820, gutters)
         > .about-{name}__row    (grid / flex layout row)
           > .about-{name}__inner  (single-column content)
           OR __media + __content (two-column)

   Typography: semantic size tokens defined on .about, STEPPED DOWN at
   breakpoints 1440 / 1200 / 1024 / 768 / 425 (no clamp — discrete scale):
     hero 64 · title 48 · heading 40 · lead 28 · body 18 · body-sm 16 · label 14 · btn 13
   Gold #d2ab67. No border-radius on images (buttons/icons exempt).
   ========================================================================== */

/* -------------------------------------------------------------------------
   TOKENS  (desktop base ≥ 1441px)
   ------------------------------------------------------------------------- */
.about {
    /* palette */
    --about-ink: #1a1a1a;
    --about-muted: #4a4a4a;
    --about-gold: var(--gold, #d2ab67);
    --about-dark: #000;

    /* fonts */
    --about-serif: var(--font-ivy, "IvyBodoni", Georgia, serif);
    --about-sans: var(--font-avenir, "Avenir", "Helvetica Neue", Arial, sans-serif);

    /* type scale */
    --fs-hero: 64px;
    --fs-title: 48px;
    --fs-heading: 40px;
    --fs-lead: 28px;
    --fs-body: 18px;
    --fs-body-sm: 16px;
    --fs-label: 14px;
    --fs-btn: 13px;

    /* line-heights */
    --lh-display: 1.14;
    --lh-heading: 1.2;
    --lh-body: 1.7;

    /* layout */
    --container: 1820px;
    --gutter: 50px;
    --sec-py: 48px;
    /* section vertical padding */
    --gap-col: 120px;
    /* two-column gap */

    color: var(--about-ink);
    font-family: var(--about-sans);
    font-size: var(--fs-body);
}

/* -------------------------------------------------------------------------
   SHARED PRIMITIVES
   ------------------------------------------------------------------------- */
.about-section {
    padding-block: var(--sec-py);
    position: relative;
}

.about-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* serif italic headings */
.about-hero__title,
.about-legacy__title,
.about-promoters__title,
.about-values__title,
.about-value__name,
.about-media__title,
.about-foundation__title {
    font-family: var(--about-serif);
    font-style: italic;
    font-weight: 400;
    line-height: var(--lh-heading);
    margin: 0;
}

/* rich-text (WYSIWYG) body blocks */
.about-rte {
    color: var(--about-muted);
}

.about-rte p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    margin: 0 0 1.1em;
}

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

.about-rte a {
    color: inherit;
    text-decoration: underline;
}

/* PILL button (matches Figma: fully rounded, thin border, uppercase) */
.about-btn {
    display: inline-block;
    font-family: var(--about-sans);
    font-size: var(--fs-btn);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #2a2a2a;
    text-decoration: none;
    padding: 15px 34px;
    border: 1px solid rgba(20, 20, 20, .4);
    border-radius: 999px;
    background: transparent;
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

.about-btn:hover {
    background: var(--about-ink);
    border-color: var(--about-ink);
    color: #fff;
}

/* =========================================================================
   1. HERO
   ========================================================================= */
.about-hero {
    position: relative;
    min-height: clamp(440px, 42vw, 640px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--about-dark);
    padding-block: 0;
}

.about-hero__bg {
    position: absolute;
    inset: 0;
    display: block;
}

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

.about-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, .05) 100%);
}

.about-hero__row {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: clamp(40px, 5vw, 96px);
}

.about-hero__inner {
    max-width: 22ch;
}

.about-hero__title {
    color: #fff;
    font-size: var(--fs-hero);
}

/* =========================================================================
   2. INTRO   (centred lead + body)
   ========================================================================= */
.about-intro__row {
    display: flex;
    justify-content: center;
}

.about-intro__inner {
    max-width: 70%;
    text-align: center;
}

.about-intro__lead.about-rte p {
    color: var(--about-ink);
    font-size: 32px;
    line-height: 120%;
    margin: 0 0 1.2em;
    font-family: var(--font-body);
    font-weight: 400;
    text-align: center;
}

.about-intro__body {
    margin-top: 1.4em;
}

.about-intro__body.about-rte p {
    font-size: 20px;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
	color: #000000;
}

/* =========================================================================
   3. STATS   (number graphics + labels, then body)
   ========================================================================= */
.about-stats {
    padding-top: clamp(24px, 3vw, 48px);
}

.about-stats__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.about-stats__figures {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(40px, 8vw, 130px);
    margin-bottom: clamp(36px, 5vw, 70px);
}

.about-stat {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
}

.about-stat__num img {
    display: block;
    height: 299px;
    width: auto;
}

.about-stat__label {
    font-family: var(--about-sans);
    font-weight: 800;
    font-size: var(--fs-label);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--about-ink);
    line-height: 1.35;
    max-width: 15ch;
}

.about-stats__body {
    max-width: 900px;
}

.about-stats__body.about-rte p {
    text-align: center;
}

/* =========================================================================
   4. LEGACY   (FIXED dark bg photo + centred white card)
   ========================================================================= */
.about-legacy {
    position: relative;
    padding-block: clamp(90px, 12vw, 220px);
    background-color: #111;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    background-attachment: fixed;
    /* the "fixed bg" parallax from Figma */
}

.about-legacy__row {
    display: flex;
    justify-content: center;
}

.about-legacy__inner {
    /* the white card */
    background: #fff;
    max-width: 760px;
    width: 100%;
    text-align: center;
    padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 72px);
}

.about-legacy__title {
    font-size: var(--fs-heading);
    margin-bottom: .7em;
}

.about-legacy__body {
    margin-inline: auto;
    max-width: 52ch;
}

.about-legacy__body.about-rte p {
    text-align: center;
}

.about-legacy .about-btn {
    margin-top: clamp(28px, 3vw, 44px);
}

/* =========================================================================
   5. PROMOTERS   (illustration | gold divider | content)
   ========================================================================= */
.about-promoters__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap-col);
    align-items: center;
}

.about-promoters__media img {
    width: 100%;
    height: auto;
    display: block;
}

.about-promoters__content {
    position: relative;
    padding-left: clamp(32px, 3.5vw, 70px);
    align-self: center;
}

.about-promoters__content::before {
    /* gold divider in the gap */
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: var(--about-gold);
    opacity: .85;
}

.about-promoters__title {
    font-size: var(--fs-heading);
    margin-bottom: .9em;
}

.about-promoters__body {
    margin-bottom: 2em;
    max-width: 46ch;
}

/* =========================================================================
   6. VALUES   — PINNED SCROLL SECTION  (behaviour approved; do not alter)
   ========================================================================= */
.about-values {
    position: relative;
    background: var(--about-dark);
    color: #fff;
    padding-block: 0;
}

.about-values__track {
    position: relative;
    height: 300vh;
}

.about-values__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.about-values__texture {
    position: absolute;
    inset: 0;
    background: radial-gradient(1400px 700px at 50% -8%, rgba(210, 171, 103, .05), transparent 62%), #000;
    pointer-events: none;
}

.about-values__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: clamp(56px, 9vh, 120px);
    padding-bottom: clamp(40px, 8vh, 100px);
}

.about-values__title {
    color: var(--about-gold);
    text-align: center;
    font-size: var(--fs-heading);
    margin: 0 0 clamp(48px, 10vh, 140px);
}

.about-values__field {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.about-values__lines {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    column-gap: 10.7%;
    pointer-events: none;
}

.about-values__lines>span {
    position: relative;
}

.about-values__lines>span::before {
    content: "";
    position: absolute;
    left: 9.6%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--about-gold);
    opacity: .55;
}

.about-values__cards {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    column-gap: 10.7%;
    align-items: start;
}

.about-value {
    --t: 0;
    position: relative;
    min-height: clamp(210px, 18vw, 289px);
    padding: clamp(26px, 2.3vw, 44px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(24px, 3vw, 60px);
    background: rgba(255, 250, 244, .20);
    transform: translateY(calc((1 - var(--t)) * 66vh));
    opacity: var(--t);
    will-change: transform, opacity;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.about-value__icon {
    width: clamp(46px, 3.1vw, 59px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    flex: none;
}

.about-value__icon img {
    width: 56%;
    height: auto;
    display: block;
}

.about-value__name {
    color: var(--about-gold);
    font-size: var(--fs-title);
    line-height: 1;
}

/* =========================================================================
   7. MEDIA & AWARDS   (content | illustration; no divider)
   ========================================================================= */
.about-media__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap-col);
    align-items: center;
}

.about-media__content {
    align-self: center;
}

.about-media__title {
    font-size: var(--fs-heading);
    margin-bottom: .9em;
}

.about-media__body {
    margin-bottom: 2em;
    max-width: 42ch;
}

.about-media__media img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================================
   8. FOUNDATION   (illustration | content)
   ========================================================================= */
.about-foundation__row {
    display: flex;
    gap: 0;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
}

.about-foundation__media {
    max-width: 70%;
    width: 100%;
}

.about-foundation__content {
    max-width: 30%;
    width: 100%;
    align-self: center;
    padding-right: 8%;
}

.about-foundation__media img {
    max-width: 60%;
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
}

.about-foundation__title {
    font-size: var(--fs-heading);
    margin-bottom: .9em;
}

.about-foundation__body {
    margin-bottom: 2em;
    max-width: 100%;
}

/* =========================================================================
   RESPONSIVE — TYPE SCALE + SPACING STEPPED AT EACH BREAKPOINT
   ========================================================================= */
@media (max-width: 1440px) {
    .about {
        --fs-hero: 56px;
        --fs-title: 44px;
        --fs-heading: 36px;
        --fs-lead: 26px;
        --fs-body: 18px;
        --fs-body-sm: 16px;
        --fs-label: 14px;
        --fs-btn: 13px;
        --sec-py: 100px;
        --gap-col: 100px;
    }

    .about-foundation__media,
    .about-foundation__content {
        max-width: 50%;
        padding: 0;
    }

    .about-foundation__media img {
        max-width: 50%;
        width: 100%;
        height: auto;
        display: block;
        position: absolute;
        top: 0%;
        left: 0%;
    }

}

@media (max-width: 1200px) {
    .about {
        --fs-hero: 48px;
        --fs-title: 40px;
        --fs-heading: 32px;
        --fs-lead: 24px;
        --fs-body: 17px;
        --fs-body-sm: 16px;
        --fs-label: 13px;
        --fs-btn: 12px;
        --sec-py: 90px;
        --gap-col: 56px;
    }

    /* two-column sections stack */
    .about-promoters__row,
    .about-media__row,
    .about-foundation__row {
        grid-template-columns: 1fr;
        gap: clamp(28px, 6vw, 56px);
    }

    .about-media__media {
        order: -1;
    }

    /* image above text on mobile */
    .about-promoters__content {
        padding-left: 24px;
    }

    .about-promoters__body,
    .about-media__body,
    .about-foundation__body {
        max-width: none;
    }

    /* LEGACY: drop fixed bg (janky on touch), keep cover */
    .about-legacy {
        background-attachment: scroll;
    }

    /* VALUES: UNPIN → vertical left-rail timeline */
    .about-values__track {
        height: auto;
    }

    .about-values__stage {
        position: static;
        height: auto;
        overflow: visible;
    }

    .about-values__inner {
        height: auto;
        padding-block: clamp(70px, 12vw, 110px);
    }

    .about-values__title {
        margin-bottom: clamp(40px, 10vw, 80px);
    }

    .about-values__field {
        display: block;
    }

    .about-values__lines {
        display: none;
    }

    .about-values__cards {
        grid-template-columns: 1fr;
        row-gap: clamp(24px, 6vw, 48px);
        column-gap: 0;
    }

    .about-value {
        min-height: auto;
        padding: clamp(24px, 6vw, 40px) clamp(24px, 6vw, 40px) clamp(24px, 6vw, 40px) 56px;
        transform: translateY(40px);
        opacity: 0;
        transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    }

    .about-value::before {
        content: "";
        position: absolute;
        left: 18px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--about-gold);
        opacity: .55;
    }

    .about-value.is-visible {
        opacity: 1;
        transform: none;
    }

    .about-foundation__row {
        gap: 0;
    }

    .about-foundation__media,
    .about-foundation__content {
        max-width: 50%;
    }

    .about-foundation__media img {
        max-width: 50%;
        width: 100%;
        height: auto;
        display: block;
        position: absolute;
        top: 0%;
        left: 0%;
    }
}

@media (max-width: 1024px) {
    .about {
        --fs-hero: 42px;
        --fs-title: 36px;
        --fs-heading: 30px;
        --fs-lead: 22px;
        --fs-body: 16px;
        --fs-body-sm: 15px;
        --fs-label: 13px;
        --fs-btn: 12px;
        --sec-py: 72px;
        --gutter: 40px;
    }
}

@media (max-width: 768px) {
    .about {
        --fs-hero: 34px;
        --fs-title: 30px;
        --fs-heading: 26px;
        --fs-lead: 20px;
        --fs-body: 16px;
        --fs-body-sm: 15px;
        --fs-label: 12px;
        --fs-btn: 12px;
        --sec-py: 56px;
        --gutter: 32px;
    }

    .about-stat {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .about-stat__label {
        max-width: none;
    }

    .about-hero__inner {
        max-width: none;
    }

    .about-legacy__inner {
        text-align: center;
    }

    .about-foundation__media,
    .about-foundation__content {
        max-width: 100%;
    }

    .about-foundation__media img {
        position: relative;
        max-width: 100%;
        width: 100%;
        left: -5%;
        top: 0;
    }
}

@media (max-width: 425px) {
    .about {
        --fs-hero: 28px;
        --fs-title: 26px;
        --fs-heading: 24px;
        --fs-lead: 18px;
        --fs-body: 15px;
        --fs-body-sm: 14px;
        --fs-label: 12px;
        --fs-btn: 11px;
        --sec-py: 44px;
        --gutter: 20px;
    }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .about-value {
        --t: 1;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}