/* =========================================
   DESIGN SYSTEM & VARIABLES
   ========================================= */
:root {
    /* Colors — cream/light-beige palette (matches the former
       .about-pillars-sand "Core Pillars and Values" surface).
       Warm cocoa-on-cream type, deeper gold for contrast. */
    --color-bg-base: #E6D5B8;
    --color-bg-surface: #F0E3C8;
    --color-bg-elevated: #FAF1DA;

    --color-text-primary: #1A1206;
    --color-text-secondary: rgba(26, 18, 6, 0.78);
    --color-text-tertiary: rgba(26, 18, 6, 0.60);

    --color-accent-gold: #9C7A2A;
    --color-accent-gold-dim: rgba(156, 122, 42, 0.32);
    --color-accent-bronze: #8E5524;
    --color-accent-cocoa: #4A2C13;
    --color-accent-sand: #D8C39C;

    /* Typography */
    --font-heading-primary: 'Cinzel', serif;
    --font-heading-secondary: 'Playfair Display', serif;
    --font-body: 'Outfit', sans-serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;

    /* Layout */
    --container-max-width: 1400px;
    --container-padding: 2rem;

    /* Transitions */
    --transition-fast: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================
   RESET & FOUNDATION
   ========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--color-bg-base);
    color: var(--color-text-primary);
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.loading {
    overflow: hidden;
}

/* Typography Hierarchy */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

/* =========================================
   UTILITIES
   ========================================= */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* =========================================
   PRELOADER
   ========================================= */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-bg-base);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease-in-out;
}

.preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-content {
    text-align: center;
    width: 80%;
    max-width: 400px;
}

.loader-title {
    font-family: var(--font-heading-primary);
    font-size: 2rem;
    letter-spacing: 0.2em;
    color: var(--color-accent-gold);
    margin-bottom: var(--space-md);
}

.progress-bar-container {
    width: 100%;
    height: 2px;
    background-color: var(--color-bg-elevated);
    margin-bottom: var(--space-sm);
    position: relative;
    overflow: hidden;
}

.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: var(--color-accent-gold);
    transition: width 0.1s linear;
}

.loader-text {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.05em;
}

/* =========================================
   HEADER & NAVIGATION
   ========================================= */
.main-header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: var(--space-md) var(--container-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Minimum guaranteed gap between logo, nav, and CTA blocks so they
       never crowd each other on narrower laptop widths. */
    gap: clamp(2.5rem, 4vw, 4rem);
    z-index: 1000;
    transition: background-color var(--transition-fast), padding var(--transition-fast);
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 100%);
}

.main-header.scrolled {
    background-color: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(10px);
    padding: var(--space-sm) var(--container-padding);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    cursor: pointer;
    /* Slight gap to control vertical rhythm */
}

.logo-icon {
    width: 60px;
    /* aspect-ratio reserves the height before the (square) image loads,
       preventing the header from shifting on load (CLS). */
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 2px;
}

.logo-text {
    font-family: var(--font-heading-primary);
    font-size: 1.35rem;
    /* slightly larger */
    font-weight: 700;
    letter-spacing: 0.25em;
    /* more luxurious tracking */
    color: var(--color-accent-gold);
    line-height: 1;
    text-transform: uppercase;
}

.logo-subtext {
    font-family: var(--font-body);
    /* consistent body font */
    font-size: 0.65rem;
    font-weight: 400;
    /* slightly heavier for readability */
    letter-spacing: 0.4em;
    /* wide tracking to match width of title */
    color: var(--color-text-secondary);
    line-height: 1;
    text-transform: uppercase;
}

.main-nav {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 1.05rem;
    letter-spacing: 0.18em;
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    transition: color var(--transition-fast);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-accent-gold);
}

/* Contact lives in the header CTA on desktop; surfaced in the mobile nav
   overlay instead (where the CTA button is hidden). */
.nav-link-contact {
    display: none;
}

.cta-button {
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    white-space: nowrap;
}

.cta-button.primary {
    background-color: var(--color-accent-cocoa);
    color: #DDB04A;
    border: 1px solid var(--color-accent-cocoa);
    box-shadow: 0 6px 18px rgba(74, 44, 19, 0.22);
}

.cta-button.primary:hover,
.cta-button.primary:focus-visible {
    background-color: #DDB04A;
    color: var(--color-accent-cocoa);
    border-color: #DDB04A;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(74, 44, 19, 0.28);
}

/* =========================================
   HERO SEQUENCE
   ========================================= */
.hero-sequence {
    height: 100vh;
    position: relative;
    background-color: var(--color-bg-base);
}

.hero-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    /* Immediate poster fallback — prevents flicker while video loads */
    background: url('../hero-poster.jpg') center/cover no-repeat;
    background-color: var(--color-bg-base);
}

.hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0);
    /* Start hidden — JS fades in once video is ready to play */
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero-bg.is-ready {
    opacity: 1;
}

/* Let the image fade slightly towards the bottom via pseudo element */
.hero-bg-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30vh;
    background: linear-gradient(to top, var(--color-bg-base) 0%, transparent 100%);
    pointer-events: none;
}

.hero-overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    /* Tall viewports only (cue visible): reserve just enough above the scroll
       cue for the CTA to clear it. Kept to the minimum so that when the cue
       hides on shorter screens (below) the padding step down is small. */
    padding-bottom: max(8vh, 5.5rem);
    pointer-events: none;
}

.hero-text-block {
    opacity: 0;
    /* Handled by intersection observer / fade in */
    transform: translateY(30px);
}

.hero-text-block .subtitle {
    font-size: 0.8rem;
    letter-spacing: 0.4em;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-text-block .title {
    font-family: var(--font-heading-primary);
    font-size: 6rem;
    line-height: 1.1;
    color: var(--color-text-primary);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
    margin-bottom: var(--space-sm);
}

/* Legacy rule removed — was painting every nested span gold, which beat
   the lockup's per-line colours via specificity. The lockup sets explicit
   colours on .title-line-top (white) and .title-line-bottom (honey-gold). */

.hero-text-block .description {
    font-size: 1.25rem;
    font-weight: 600;
    max-width: 600px;
    margin: 0 auto var(--space-xs);
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-text-block .location {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 300;
    font-style: italic;
    font-family: var(--font-heading-secondary);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.scroll-indicator {
    position: absolute;
    bottom: var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: bounce 2s infinite ease-in-out;
}

.scroll-text {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.scroll-indicator svg {
    color: var(--color-accent-gold);
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

/* =========================================
   ANIMATIONS (Intersection Observer)
   ========================================= */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* We want the hero text block to be visible immediately as the page loads */
.hero-sequence .fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   COMMON SECTION STYLES
   ========================================= */
section {
    padding: var(--space-xl) 0;
    position: relative;
    z-index: 10;
    background-color: var(--color-bg-base);
}

.section-header {
    margin-bottom: var(--space-lg);
    max-width: 900px;
}

.section-header.align-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-subtitle {
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--color-accent-gold);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.section-title {
    font-family: var(--font-heading-primary);
    font-size: 3.5rem;
    color: var(--color-text-primary);
    line-height: 1.1;
    margin-bottom: var(--space-sm);
}

.section-intro {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    font-weight: 300;
}

/* Reusable Glass Card / Premium Card */
.glass-card {
    background: rgba(26, 26, 26, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 3rem 2.5rem;
    backdrop-filter: blur(10px);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.glass-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-accent-gold-dim);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.card-badge {
    display: inline-block;
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: 1rem;
    color: var(--color-accent-gold);
    margin-bottom: var(--space-sm);
    background-color: transparent;
}

/* =========================================
   OUR STORY SECTION
   ========================================= */
.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
}

.story-grid .card-title {
    font-family: var(--font-heading-secondary);
    font-size: 2rem;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.story-grid .card-text {
    color: var(--color-text-secondary);
    font-weight: 300;
    max-width: 400px;
    line-height: 1.7;
}

/* =========================================
   OUR LEADERSHIP SECTION
   ========================================= */
.our-leadership {
    background-color: var(--color-bg-surface);
    /* Slightly lighter dark for contrast */
}

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
}

.leader-card {
    background: var(--color-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.leader-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    border-color: rgba(212, 175, 55, 0.2);
}

.leader-image-wrapper {
    position: relative;
    height: 350px;
    /* Adjust based on image aspect ratio */
    width: 100%;
}

.absolute-top {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 2;
    background: var(--color-bg-elevated);
    backdrop-filter: blur(5px);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-text-primary);
}

.placeholder-img {
    width: 100%;
    height: 100%;
    /* Gradient placeholder until images are provided */
}

.leader-info {
    padding: var(--space-md);
}

.leader-name {
    font-family: var(--font-heading-secondary);
    font-size: 1.75rem;
    margin-bottom: var(--space-xs);
}

.leader-quote {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
    font-size: 1rem;
}

.link-btn {
    display: inline-flex;
    align-items: center;
    color: var(--color-accent-gold);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color var(--transition-fast);
}

.link-btn:hover {
    color: var(--color-text-primary);
}

.link-btn .arrow {
    margin-left: 0.5rem;
    transition: transform var(--transition-fast);
}

.link-btn:hover .arrow {
    transform: translateX(5px);
}

/* =========================================
   THE VENUE SECTION
   ========================================= */
.the-venue {
    background-color: var(--color-bg-base);
}

.venue-showcase {
    width: 100%;
    margin-bottom: var(--space-md);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.venue-hero-image {
    width: 100%;
    height: 60vh;
    min-height: 400px;
    transition: transform var(--transition-smooth);
}

.venue-showcase:hover .venue-hero-image {
    transform: scale(1.02);
}

/* Venue CTA Card (Homepage) */
.venue-cta-card {
    display: block;
    position: relative;
    width: 100%;
    min-height: 400px;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.venue-cta-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(212, 175, 55, 0.08);
}

.venue-cta-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.6s ease;
}

.venue-cta-card:hover .venue-cta-bg {
    transform: scale(1.05);
}

.venue-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.15) 100%);
}

.venue-cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: 400px;
    padding: 2.5rem;
    gap: 1.5rem;
}

.venue-cta-stats {
    display: flex;
    gap: 2.5rem;
}

.venue-cta-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.venue-cta-number {
    font-family: var(--font-heading-primary);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-accent-gold);
    letter-spacing: 0.02em;
}

.venue-cta-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.venue-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    border: 1px solid rgba(212, 175, 55, 0.4);
    padding: 0.85rem 2rem;
    border-radius: 50px;
    width: fit-content;
    transition: all 0.3s ease;
}

.venue-cta-card:hover .venue-cta-btn {
    background: var(--color-accent-gold);
    color: var(--color-text-primary);
    border-color: var(--color-accent-gold);
}

@media (max-width: 768px) {
    .venue-cta-content {
        padding: 1.5rem;
        min-height: 300px;
    }

    .venue-cta-stats {
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .venue-cta-number {
        font-size: 1.5rem;
    }
}

/* =========================================
   VENUE PAGE HERO
   ========================================= */
.venue-page-hero {
    position: relative;
    width: 100%;
    height: 85vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.venue-page-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.venue-page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.65) 60%, rgba(10, 10, 10, 1) 100%);
    z-index: 1;
}

.venue-page-hero .hero-overlay-content {
    position: relative;
    z-index: 2;
}

.venue-stats-section {
    background-color: var(--color-bg-surface);
}

/* Form select and date inputs (venue page) */
.form-input[type="date"],
select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    cursor: pointer;
}

select.form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.5);
    cursor: pointer;
}

/* Venue Quadrant Grid */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-sm);
}

.stat-card {
    background: var(--color-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: var(--space-md) var(--space-sm);
    text-align: left;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.3);
}

.stat-number {
    font-family: var(--font-heading-secondary);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.stat-unit {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 300;
}

.stat-label {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--color-accent-gold);
    text-transform: uppercase;
}

/* =========================================
   PREMIUM ADD-ONS SECTION (Refined Carousel)
   ========================================= */
.premium-addons {
    background-color: var(--color-bg-surface);
    overflow: hidden;
}

.sphere-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--space-lg) 0;
}

.sphere-bg-ring {
    display: none;
}

.sphere-carousel {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 560px;
    overflow: visible;
}

.sphere-card {
    position: absolute;
    width: 900px;
    height: 500px;
    left: 50%;
    top: 50%;
    padding: 28px 32px;
    box-sizing: border-box;
    background: linear-gradient(145deg, rgba(30, 30, 30, 0.95), rgba(18, 18, 18, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    user-select: none;
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    pointer-events: none;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

.sphere-card.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
    z-index: 3;
    border-color: rgba(212, 175, 55, 0.15);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(212, 175, 55, 0.05);
}

.sphere-card.prev {
    opacity: 0.25;
    transform: translate(calc(-50% - 860px), -50%) scale(0.85);
    z-index: 1;
    filter: blur(2px);
}

.sphere-card.next {
    opacity: 0.25;
    transform: translate(calc(-50% + 860px), -50%) scale(0.85);
    z-index: 1;
    filter: blur(2px);
}

.sphere-card.far-prev {
    opacity: 0;
    transform: translate(calc(-50% - 900px), -50%) scale(0.7);
    z-index: 0;
}

.sphere-card.far-next {
    opacity: 0;
    transform: translate(calc(-50% + 900px), -50%) scale(0.7);
    z-index: 0;
}

.sphere-card h2 {
    color: var(--color-text-primary);
    margin-top: 0;
    text-transform: none;
    letter-spacing: 0.5px;
    font-family: var(--font-heading-secondary);
    font-size: 1.3rem;
    margin-bottom: var(--space-sm);
}

.sphere-card p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-weight: 300;
    font-size: 0.9rem;
    order: 3;
}

.sphere-card img {
    flex: 1;
    margin: 8px 0;
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    user-select: none;
    order: 2;
    pointer-events: none;
}

.sphere-nav {
    display: flex;
    gap: 16px;
    margin-top: var(--space-md);
    z-index: 5;
}

.sphere-btn {
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--color-accent-gold);
    padding: 12px 36px;
    cursor: pointer;
    border-radius: 50px;
    text-transform: uppercase;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    font-weight: 500;
    transition: all 0.3s ease;
}

.sphere-btn:hover {
    background: var(--color-accent-gold);
    color: var(--color-text-primary);
    border-color: var(--color-accent-gold);
}

/* =========================================
   EVENT GALLERY SECTION
   ========================================= */
.event-gallery {
    background-color: var(--color-bg-base);
}

.gallery-showcase {
    width: 100%;
    height: 70vh;
    min-height: 500px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    position: relative;
}

.gallery-image {
    width: 100%;
    height: 100%;
    transition: transform var(--transition-smooth);
}

.gallery-showcase:hover .gallery-image {
    transform: scale(1.02);
}

/* Gallery Quadrant Grid */
.gallery-quadrant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    width: 100%;
    height: 70vh;
    min-height: 500px;
}

.gallery-quadrant {
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.gallery-quadrant:hover {
    transform: scale(1.02);
    z-index: 1;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.gallery-quadrant-grid.has-expanded {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.gallery-quadrant-grid.has-expanded .gallery-quadrant {
    display: none;
}

.gallery-quadrant-grid.has-expanded .gallery-quadrant.expanded {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    border-radius: 16px;
}

/* =========================================
   CONTACT SECTION
   ========================================= */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.contact-details-card,
.contact-form-card {
    background: var(--color-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 2.5rem;
}

.contact-card-title {
    font-family: var(--font-heading-secondary);
    font-size: 1.5rem;
    color: var(--color-text-primary);
    margin-bottom: 2rem;
    font-weight: 600;
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-detail-icon {
    color: var(--color-accent-gold);
    font-size: 0.5rem;
    margin-top: 0.5rem;
}

.contact-detail-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-tertiary);
    margin-bottom: 0.25rem;
    font-family: var(--font-body);
}

.contact-detail-value {
    display: block;
    font-size: 1rem;
    color: var(--color-text-primary);
    font-family: var(--font-body);
}

.contact-link {
    text-decoration: none;
    color: var(--color-text-primary);
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: var(--color-accent-gold);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* Allow the group to shrink to its grid/flex track instead of the input's
       intrinsic min-content, which otherwise overflows inside .form-row. */
    min-width: 0;
}

.form-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-tertiary);
    font-family: var(--font-body);
}

.form-input {
    background: var(--color-bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
    outline: none;
}

.form-input::placeholder {
    color: var(--color-text-tertiary);
}

.form-input:focus {
    border-color: var(--color-accent-gold-dim);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-submit-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    margin-top: 0.5rem;
    transition: all 0.3s ease;
}

.contact-submit-btn.btn-success {
    background: #2ecc71;
    border-color: #2ecc71;
    color: #fff;
}

.contact-submit-btn.btn-error {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   INVESTMENT FOCUS SECTION
   ========================================= */
.investment-focus {
    background-color: var(--color-bg-surface);
}

.focus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
}

.focus-card {
    gap: var(--space-sm);
}

.focus-icon {
    color: var(--color-accent-gold);
    margin-bottom: var(--space-xs);
}

/* =========================================
   PARTNERS SECTION
   ========================================= */
.partners-section {
    background-color: var(--color-bg-base);
    overflow: hidden;
}

.partners-track-wrapper {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.partners-track {
    display: flex;
    gap: 4rem;
    align-items: center;
    animation: scroll-partners 35s linear infinite;
    width: max-content;
}

.partners-track:hover {
    animation-play-state: paused;
}

.partner-logo {
    height: 60px;
    width: auto;
    opacity: 0.85;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
    background: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.partner-logo:hover {
    opacity: 1;
    transform: scale(1.06);
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15);
}

@keyframes scroll-partners {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .partners-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =========================================
   HERO DESCRIPTOR
   ========================================= */
.hero-text-block .hero-descriptor {
    font-size: 1rem;
    font-weight: 300;
    max-width: 550px;
    margin: 0 auto var(--space-xs);
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    line-height: 1.6;
}

/* =========================================
   FORM VALIDATION STYLES
   ========================================= */
.form-error {
    font-size: 0.75rem;
    color: #e74c3c;
    min-height: 0;
    transition: min-height var(--transition-fast);
}

.form-input.invalid {
    border-color: #e74c3c;
}

.form-honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* =========================================
   SITE FOOTER
   ========================================= */
.site-footer {
    background-color: var(--color-bg-surface);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--space-lg) 0 var(--space-md);
    position: relative;
    z-index: 10;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center align the icon, DUNESGATE, and RIYADH */
    gap: 4px;
    margin-bottom: var(--space-sm);
}

.footer-logo-icon {
    width: 48px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 4px;
}

.footer-logo-text {
    font-family: var(--font-heading-primary);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    color: var(--color-accent-gold);
    line-height: 1.15;
    text-transform: uppercase;
    /* Centre the wrapped lines (they left-align by default once the longer
       "Holdings Co." name wraps on narrow screens) and offset the trailing
       letter-spacing so the block sits optically centred under the icon. */
    text-align: center;
    padding-left: 0.25em;
}

.footer-logo-subtext {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.4em;
    color: var(--color-text-secondary);
    line-height: 1;
    text-transform: uppercase;
}

.footer-tagline {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--color-text-tertiary);
    max-width: 300px;
    line-height: 1.6;
    text-align: center;
    /* Center the text */
    margin: 0 auto;
    /* Keep it centered within the column constraint */
}

.footer-heading {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin-bottom: var(--space-sm);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    transition: color var(--transition-fast);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.footer-link:hover {
    color: var(--color-accent-gold);
}

.footer-address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-address p {
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.footer-address a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-address a:hover {
    color: var(--color-accent-gold);
}

.footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: var(--space-md);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

.footer-copyright,
.footer-legal {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-tertiary);
    letter-spacing: 0.03em;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subordinate to the centred copyright when both are present (home, about) */
.footer-legal {
    font-size: 0.78rem;
    opacity: 0.85;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

/* =========================================
   MEDIA QUERIES & MOBILE MENU
   ========================================= */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.menu-toggle span {
    width: 100%;
    height: 2px;
    background-color: var(--color-bg-base);
    transition: all var(--transition-fast);
}

.menu-open .menu-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
}

.menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mid-width laptops (1100–1366px): main nav is dense (7 items + dropdown +
   button). Trim nav typography and gap so nothing crowds the Contact button. */
@media (max-width: 1366px) {
    .nav-link {
        font-size: 0.92rem;
        letter-spacing: 0.14em;
    }

    .main-nav {
        gap: 1.4rem;
    }
}

@media (max-width: 1024px) {
    .section-title {
        font-size: 2.5rem;
    }

    .hero-text-block .title {
        font-size: 2.6rem;
    }

    .main-nav {
        gap: 1rem;
    }

    .nav-link {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    /* Hide the header CTA on phones so the logo + hamburger always fit
       (even at 320px); Contact moves into the nav overlay below. */
    .header-actions .cta-button.primary {
        display: none;
    }

    .nav-link-contact {
        display: block;
    }

    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        /* Brand espresso (--color-text-primary #1A1206) at near-full opacity:
           on-palette, and solid enough that the page doesn't bleed through. */
        background-color: rgba(26, 18, 6, 0.97);
        backdrop-filter: blur(18px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-fast);
        z-index: 1000;
    }

    .menu-open .main-nav {
        opacity: 1;
        pointer-events: all;
    }

    /* The overlay is dark, so force links + the close icon light regardless
       of the per-page header colour scheme. */
    .menu-open .main-nav .nav-link {
        color: #F5ECD9;
        text-shadow: none;
    }

    .menu-open .main-nav .nav-link:hover,
    .menu-open .main-nav .nav-link.active {
        /* Brighter honey reads better than deep gold on the espresso panel. */
        color: #DDB04A;
    }

    .menu-open .menu-toggle span {
        background-color: #F5ECD9;
    }

    .nav-link {
        font-size: 1.25rem;
    }

    .hero-text-block .title {
        font-size: 1.95rem;
    }

    .cta-button {
        font-size: 0.75rem;
        padding: 0.75rem 1rem;
        /* Increased padding vertically to hit min 44px touch height */
    }

    .section-title {
        font-size: 2rem;
    }

    .story-grid,
    .leadership-grid,
    .stats-grid,
    .focus-grid {
        grid-template-columns: 1fr;
    }

    .partner-logo {
        height: 48px;
        padding: 10px 16px;
    }

    .leader-image-wrapper {
        height: 250px;
    }

    .venue-hero-image {
        min-height: 250px;
    }

    .sphere-carousel {
        height: 400px;
    }

    .sphere-card {
        width: calc(100vw - 40px);
        max-width: 500px;
        height: 380px;
    }

    .sphere-card img {
        height: 180px;
    }

    .sphere-card.prev,
    .sphere-card.next {
        opacity: 0;
    }

    .sphere-btn {
        padding: 14px 24px;
        /* Increased vertical padding to hit min 44px touch height */
        font-size: 0.75rem;
    }
}

/* =========================================
   MULTI-PAGE ARCHITECTURE — SHARED COMPONENTS
   ========================================= */

/* ---- Nav: MORE dropdown ---- */
.nav-more {
    position: relative;
    display: inline-block;
}

.nav-more-btn {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.nav-more-chev {
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.nav-more:hover .nav-more-chev,
.nav-more:focus-within .nav-more-chev {
    transform: rotate(180deg);
}

.nav-more-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-accent-gold-dim);
    border-radius: 4px;
    padding: 0.5rem 0;
    min-width: 180px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    margin-top: 0.75rem;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.nav-more:hover .nav-more-menu,
.nav-more:focus-within .nav-more-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-more-menu a {
    display: block;
    padding: 0.65rem 1.25rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s;
}

.nav-more-menu a:hover {
    background: rgba(212, 175, 55, 0.08);
    color: var(--color-accent-gold);
}

/* ---- Home page teaser sections ---- */
.home-teaser {
    padding: var(--space-xl) 0;
    position: relative;
}

/* Subtle banding between teasers */
.home-teaser:nth-of-type(odd) {
    background: var(--color-bg-base);
}

.home-teaser:nth-of-type(even) {
    background: var(--color-bg-surface);
}

.teaser-cta-row {
    text-align: center;
    margin-top: var(--space-md);
}

.cta-button.primary svg {
    margin-left: 0.5rem;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.cta-button.primary:hover svg {
    transform: translateX(4px);
}

/* About teaser — typography-led, asymmetric */
.teaser-about .teaser-text-block {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
}

.teaser-about .section-subtitle {
    text-align: left;
}

.teaser-about .section-title {
    text-align: left;
}

.teaser-pullquote {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    border-left: 2px solid var(--color-accent-gold);
    padding-left: var(--space-md);
    margin: var(--space-md) 0;
}

.teaser-body {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

/* Investments teaser — numbered pillars */
.teaser-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.pillar {
    text-align: center;
    padding: var(--space-md) var(--space-sm);
    border-top: 1px solid var(--color-accent-gold-dim);
    transition: border-color 0.3s, transform 0.3s;
}

.pillar:hover {
    border-top-color: var(--color-accent-gold);
    transform: translateY(-4px);
}

.pillar-num {
    display: block;
    font-family: var(--font-heading-primary);
    font-size: 2.5rem;
    color: var(--color-accent-gold);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    opacity: 0.85;
}

.pillar-title {
    font-family: var(--font-heading-primary);
    font-size: 1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0;
}

/* Assets teaser — total value hero + 3-card preview */
.total-value-block {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    border: 1px solid var(--color-accent-gold-dim);
    border-radius: 6px;
    margin-bottom: var(--space-lg);
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.08), transparent 70%);
}

.total-value-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
}

.total-value-num {
    font-family: var(--font-heading-primary);
    font-size: 4rem;
    color: var(--color-accent-gold);
    margin: var(--space-sm) 0;
    letter-spacing: 0.05em;
    line-height: 1;
}

.total-value-sub {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.assets-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: var(--space-md);
}

.asset-card {
    background: var(--color-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.4s, border-color 0.4s;
}

.asset-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-gold-dim);
}

.asset-img {
    height: 180px;
    background: linear-gradient(135deg, var(--color-bg-surface), var(--color-bg-elevated));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    font-family: var(--font-body);
}

.asset-body {
    padding: 1.5rem;
}

.asset-name {
    font-family: var(--font-heading-primary);
    font-size: 1.1rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.asset-desc {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.asset-value {
    font-family: var(--font-heading-primary);
    color: var(--color-accent-gold);
    font-size: 1rem;
    letter-spacing: 0.05em;
}

/* Leadership teaser — portrait thumbs */
.leadership-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin: var(--space-lg) 0 var(--space-md);
}

.leader-thumb {
    text-align: center;
}

.leader-thumb-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin: 0 auto var(--space-sm);
    border: 2px solid var(--color-accent-gold-dim);
    transition: border-color 0.4s, transform 0.4s;
}

.leader-thumb:hover .leader-thumb-img {
    border-color: var(--color-accent-gold);
    transform: scale(1.04);
}

.leader-thumb-name {
    font-family: var(--font-heading-primary);
    font-size: 0.95rem;
    color: var(--color-text-primary);
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.leader-thumb-role {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--color-accent-gold);
    text-transform: uppercase;
    margin: 0;
}

/* Arena teaser — reuses venue-cta style, with external link */
.arena-cta-card {
    display: block;
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--color-accent-gold-dim);
    text-decoration: none;
    transition: transform 0.5s, border-color 0.5s;
}

.arena-cta-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-gold);
}

.arena-cta-bg {
    position: absolute;
    inset: 0;
    transition: transform 1s ease;
}

.arena-cta-card:hover .arena-cta-bg {
    transform: scale(1.04);
}

.arena-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 0.8) 100%);
}

.arena-cta-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: var(--space-md);
    gap: 0.5rem;
}

.arena-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.75rem;
    background: var(--color-accent-gold);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border-radius: 3px;
    transition: background 0.3s, transform 0.3s;
}

.arena-cta-card:hover .arena-cta-btn {
    background: #fff;
    transform: translateY(-2px);
}

.arena-cta-hint {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
}

/* Partners & Sponsors split */
.partners-sponsors-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
}

.ps-group {
    text-align: center;
}

.partner-group-title {
    font-family: var(--font-heading-primary);
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    color: var(--color-accent-gold);
    margin-bottom: var(--space-md);
}

.partner-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
}

.partner-row .partner-logo {
    max-height: 80px;
    max-width: 180px;
    opacity: 0.85;
    transition: opacity 0.3s, transform 0.3s;
}

.partner-row .partner-logo:hover {
    opacity: 1;
    transform: scale(1.04);
}

/* Connect teaser — 3 cards (Location / FAQ / Contact) */
.connect-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.connect-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--color-bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: var(--space-md);
    text-align: center;
    transition: transform 0.4s, border-color 0.4s, background 0.4s;
}

.connect-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-accent-gold);
    background: var(--color-bg-surface);
}

.connect-icon {
    color: var(--color-accent-gold);
    margin-bottom: var(--space-sm);
    display: inline-flex;
}

.connect-title {
    font-family: var(--font-heading-primary);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.connect-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.connect-cta {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    transition: letter-spacing 0.3s;
}

.connect-card:hover .connect-cta {
    letter-spacing: 0.28em;
}

/* ---- Footer: centered logo top + 3-column links ---- */
.footer-top {
    display: flex;
    justify-content: center;
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    justify-items: center;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.footer-contact-link {
    display: inline-block;
    margin-top: 0.6rem;
    color: var(--color-accent-gold);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.footer-contact-link:hover,
.footer-contact-link:focus-visible {
    color: var(--color-text-primary);
}

.site-footer .footer-nav,
.site-footer .footer-address {
    align-items: center;
}

.social-icons-row {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    padding: var(--space-md) 0;
    margin-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.social-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--color-accent-gold-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    transition: all 0.3s;
    text-decoration: none;
}

.social-icon:hover {
    color: var(--color-accent-gold);
    border-color: var(--color-accent-gold);
    transform: translateY(-2px);
}

/* ---- Responsive: collapse home teaser grids ---- */
@media (max-width: 900px) {
    .site-footer .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .home-teaser {
        padding: var(--space-lg) 0;
    }

    .teaser-pillars,
    .assets-preview-grid,
    .leadership-strip,
    .partners-sponsors-grid,
    .connect-grid {
        grid-template-columns: 1fr;
    }

    .total-value-num {
        font-size: 2.5rem;
    }

    .teaser-pullquote {
        font-size: 1.3rem;
        padding-left: var(--space-sm);
    }

    .site-footer .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-address,
    .footer-nav {
        align-items: center;
    }

    .nav-more-menu {
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        margin-top: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        min-width: 0;
    }

    .nav-more-chev {
        display: none;
    }
}

/* =========================================
   HOME HERO REFINEMENTS — monumental title,
   tightened stack, CTA, scroll cue, manifesto
   ========================================= */

/* Override title — fluid monumental sizing (appended after media queries
   to win at all widths via source order with equal specificity). */
.hero-text-block .title {
    /* min() caps the title by viewport *height* as well as width, so a short
       laptop viewport scales it down smoothly instead of colliding with the
       fixed header (which reserves no space over the bottom-anchored hero).
       The bottom padding can't be reduced to make room — a 9rem floor there
       protects the scroll cue — so the block's own height is the lever: title
       size and the margin below it both track viewport height. */
    font-size: clamp(1.95rem, min(5.5vw, 9.5vh), 5.85rem);
    letter-spacing: 0.08em;
    line-height: 0.95;
    margin-bottom: clamp(var(--space-sm), 2.4vh, var(--space-md));
    font-weight: 700;
}

/* Letter-by-letter reveal */
.hero-text-block .title .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px);
    will-change: transform, opacity;
    color: var(--color-text-primary);
}

.hero-text-block .title.animate-in .letter {
    animation-name: letterReveal;
    animation-duration: 1.4s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: var(--letter-delay, 0ms);
    animation-fill-mode: forwards;
}

.hero-text-block .hero-descriptor {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    color: var(--color-text-primary);
    max-width: 600px;
    margin: 0 auto var(--space-sm);
    line-height: 1.5;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-text-block .location {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.4em;
    /* nudge right by one tracking unit so trailing letter-spacing centers optically */
    text-indent: 0.4em;
    color: rgba(255, 255, 255, 0.55);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* Primary CTA — solid warm cocoa fill with honey-gold text. Reads cleanly
   on both the cream pages and over the bright sunset video. */
.hero-cta {
    pointer-events: auto;
    /* Continuous across the short/tall boundary — no step at the cue line. */
    margin-top: clamp(1.25rem, 4vh, 4rem);
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.05rem 2.4rem;
    background: var(--color-accent-cocoa);
    border: 1px solid var(--color-accent-cocoa);
    color: #DDB04A;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.4s, color 0.4s, transform 0.4s, box-shadow 0.4s, border-color 0.4s;
    box-shadow: 0 8px 26px rgba(74, 44, 19, 0.24);
}

.hero-cta:hover,
.hero-cta:focus-visible {
    background: #DDB04A;
    color: var(--color-accent-cocoa);
    border-color: #DDB04A;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(74, 44, 19, 0.28);
}

.hero-cta-arrow {
    display: inline-block;
    transition: transform 0.4s;
}

.hero-cta:hover .hero-cta-arrow {
    transform: translateY(3px);
}

/* Floating scroll cue at hero bottom */
.hero-scroll-cue {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-body);
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    pointer-events: auto;
    animation: heroScrollFloat 2.6s ease-in-out infinite;
    z-index: 3;
}

.hero-scroll-cue:hover {
    color: var(--color-accent-gold);
}

.hero-scroll-cue svg {
    width: 18px;
    height: 18px;
}

/* Laptop-height viewports (incl. 1080p @150% scaling → ~600px logical, and
   zoomed-out states up to ~950px): hide the floating scroll cue and shrink the
   bottom padding with height so the bottom-anchored hero stack slides down and
   clears the fixed header instead of riding up behind it. Placed AFTER the
   base .hero-scroll-cue rule so this display:none actually wins the cascade —
   otherwise the base display:flex, being later in source, kept the cue visible
   and it collided with the CTA. Threshold at 950px keeps the whole laptop
   range in this clean, cue-hidden treatment; only true desktop monitors
   (>950px tall) show the cue, where there's room for it to clear the CTA. */
@media (max-height: 950px) {
    .hero-overlay-content {
        padding-bottom: clamp(1.5rem, 5vh, 5.5rem);
    }

    .hero-scroll-cue {
        display: none;
    }
}

/* Ultra-short viewports (landscape phones, ~375px tall): the full hero stack
   can't fit above the fold at normal sizes, so the title rode up behind the
   header. Compress title, descriptor, spacing and padding so the whole block
   clears the nav. Heights this small only occur in landscape / tiny windows —
   portrait phones are ≥650px tall and are unaffected. */
@media (max-height: 480px) {
    /* Reclaim vertical space from the fixed header — its stacked logo + 2rem
       padding is ~64px, the biggest single block of height on a 375px screen. */
    .main-header {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    .hero-text-block .title {
        font-size: clamp(1.5rem, 6vh, 2.4rem);
        margin-bottom: 0.4rem;
    }

    .hero-text-block .hero-descriptor {
        font-size: clamp(0.8rem, 2.4vh, 0.95rem);
        line-height: 1.35;
        margin-bottom: 0.4rem;
    }

    .hero-text-block .location {
        font-size: 0.7rem;
    }

    .hero-cta {
        margin-top: clamp(0.6rem, 2.5vh, 1.25rem);
        padding: 0.7rem 1.8rem;
    }

    .hero-overlay-content {
        padding-bottom: clamp(0.75rem, 3vh, 1.5rem);
    }
}

@keyframes letterReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroScrollFloat {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.7;
    }

    50% {
        transform: translateX(-50%) translateY(8px);
        opacity: 1;
    }
}

/* Manifesto — single quiet statement below hero */
.home-manifesto {
    padding: var(--space-xl) 0;
    background: var(--color-bg-base);
    text-align: center;
}

.manifesto-mark {
    display: block;
    width: 60px;
    height: 1px;
    background: var(--color-accent-gold);
    margin: 0 auto var(--space-lg);
}

.manifesto-mark-bottom {
    margin: var(--space-lg) auto 0;
}

.manifesto-statement {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2.5rem);
    line-height: 1.45;
    color: var(--color-text-primary);
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

@media (max-width: 600px) {
    .hero-cta {
        padding: 0.85rem 1.5rem;
        font-size: 0.72rem;
        letter-spacing: 0.25em;
    }

    .hero-scroll-cue {
        bottom: 1rem;
        font-size: 0.6rem;
    }

    .home-manifesto {
        padding: var(--space-lg) 0;
    }
}

/* =========================================================
   ABOUT PAGE
   Editorial typography hero + sectioned narrative
   ========================================================= */

.about-hero {
    min-height: 100vh;
    padding: calc(var(--space-xl) + 4rem) 0 var(--space-xl);
    background: var(--color-bg-base);
    display: flex;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(212, 175, 55, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

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

.about-hero-eyebrow {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.42em;
    color: var(--color-accent-gold);
    margin: 0 0 var(--space-md);
    text-transform: uppercase;
}

.about-hero-rule {
    display: block;
    width: 72px;
    height: 1px;
    background: var(--color-accent-gold);
    margin: var(--space-md) auto;
    opacity: 0.8;
}

.about-hero-quote {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.9rem, 5.2vw, 4.4rem);
    line-height: 1.25;
    color: var(--color-text-primary);
    max-width: 1000px;
    margin: var(--space-md) auto;
    padding: 0 var(--space-md);
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.about-hero-meta {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: var(--color-text-tertiary);
    margin: var(--space-md) 0 0;
    text-transform: uppercase;
}

/* Visionary statement opens the page — centred quote beneath the eyebrow
   and rule. The body is constrained and centred for an editorial column. */
.about-hero-vision .container {
    max-width: 1180px;
}

.about-vision-body {
    max-width: 900px;
    margin-top: var(--space-lg);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.about-vision-quote {
    font-size: clamp(1.5rem, 2.8vw, 2.6rem);
    line-height: 1.34;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Decorative opening quotation mark above the statement */
.about-vision-quote::before {
    content: '\201C';
    display: block;
    font-family: var(--font-heading-secondary);
    font-style: italic;
    color: var(--color-accent-gold);
    font-size: 3.2em;
    line-height: 0.1;
    margin-bottom: 0.22em;
    opacity: 0.5;
}

.about-vision-meta {
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 0.92rem;
    font-style: normal;
    margin-top: var(--space-md);
}

.about-vision-meta em {
    font-style: italic;
}

/* Brand statement now sits second — give it presence in the band. */
.about-visionary-quote-brand {
    font-size: clamp(1.7rem, 3.4vw, 2.8rem);
    line-height: 1.3;
    max-width: 940px;
}

.about-visionary-quote-brand + .about-visionary-attr {
    text-transform: uppercase;
    letter-spacing: 0.32em;
}

/* (A) Warm grain + brighter body for narrative readability */
.about-grid-body p {
    color: var(--color-text-secondary) !important;
}

.about-section,
.about-pillars,
.about-closing {
    position: relative;
}

.about-section::after,
.about-pillars::after,
.about-closing::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.25;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.83  0 0 0 0 0.69  0 0 0 0 0.46  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.about-section > .container,
.about-pillars > .container,
.about-closing > .container {
    position: relative;
    z-index: 1;
}

/* Narrative sections — 2-col label/body grid */
.about-section {
    padding: var(--space-xl) 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(212, 175, 55, 0.05) 0%, transparent 55%),
        var(--color-bg-base);
}

.about-section-alt {
    background: var(--color-bg-elevated);
    border-top: 1px solid var(--color-accent-gold-dim);
    border-bottom: 1px solid var(--color-accent-gold-dim);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-lg);
    align-items: start;
}

.about-grid-label {
    border-top: 1px solid var(--color-accent-gold-dim);
    padding-top: var(--space-sm);
}

.about-section-num {
    display: block;
    font-family: var(--font-heading-primary);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: var(--color-accent-gold);
    margin-bottom: var(--space-xs);
}

.about-section-title {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: 0.04em;
}

.about-grid-body p {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md);
    max-width: 60ch;
}

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

/* (B) Image break with pull quote */
.about-imagebreak {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: var(--space-xl) 0;
}

.about-imagebreak-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.04);
    filter: saturate(0.9);
}

.about-imagebreak-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(10, 10, 10, 0.78) 0%,
            rgba(10, 10, 10, 0.62) 50%,
            rgba(10, 10, 10, 0.85) 100%);
}

.about-imagebreak .container {
    position: relative;
    z-index: 1;
    text-align: center;
}

.about-imagebreak-quote {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: clamp(1.4rem, 3.4vw, 2.6rem);
    line-height: 1.4;
    color: var(--color-text-secondary);
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

/* Pillars */
.about-pillars {
    padding: var(--space-xl) 0;
    background: var(--color-bg-base);
    text-align: center;
}

/* (C) Sand-flipped pillars variant */
/* Sand variant restyled for the cream palette — the section is framed as a
   deliberate "pause" with hairline rules and a slightly deeper warm-bronze
   band, since sand-on-cream is no longer enough of a tonal shift. */
.about-pillars-sand {
    background:
        linear-gradient(180deg,
            rgba(156, 122, 42, 0.06) 0%,
            rgba(156, 122, 42, 0.12) 50%,
            rgba(156, 122, 42, 0.06) 100%);
    border-top: 1px solid rgba(156, 122, 42, 0.35);
    border-bottom: 1px solid rgba(156, 122, 42, 0.35);
}

.about-pillars-sand::after {
    opacity: 0;
}

.about-pillars-sand .about-pillars-title {
    color: var(--color-text-primary);
}

.about-pillars-sand .manifesto-mark {
    background: var(--color-accent-gold);
    opacity: 0.7;
}

.about-pillars-sand .about-pillar {
    background: var(--color-bg-elevated);
    border: 1px solid rgba(156, 122, 42, 0.22);
    border-top: 2px solid var(--color-accent-gold);
    box-shadow: 0 6px 22px rgba(74, 44, 19, 0.06);
    transition: border-color var(--transition-fast), background var(--transition-fast),
        transform var(--transition-fast), box-shadow var(--transition-fast);
}

.about-pillars-sand .about-pillar:hover {
    border-color: var(--color-accent-gold);
    border-top-color: var(--color-accent-gold);
    background: #FFF7E4;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(74, 44, 19, 0.10);
}

.about-pillars-sand .about-pillar-num {
    color: var(--color-accent-gold);
}

.about-pillars-sand .about-pillar-title {
    color: var(--color-text-primary);
}

.about-pillars-sand .about-pillar-body {
    color: var(--color-text-secondary);
}

.about-pillars-header {
    margin-bottom: var(--space-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-pillars-title {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: 0.06em;
}

.about-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.about-pillar {
    padding: var(--space-md);
    background: var(--color-bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-top: 1px solid var(--color-accent-gold-dim);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.about-pillar:hover {
    border-top-color: var(--color-accent-gold);
    transform: translateY(-2px);
}

.about-pillar-num {
    display: block;
    font-family: var(--font-heading-primary);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--color-accent-gold);
    margin-bottom: var(--space-sm);
}

.about-pillar-title {
    font-family: var(--font-heading-primary);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm);
    letter-spacing: 0.06em;
}

.about-pillar-body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Closing CTA */
.about-closing {
    padding: var(--space-xl) 0;
    background: var(--color-bg-base);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.about-closing-line {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md);
}

.about-closing-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .about-pillars-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
    }
}

@media (max-width: 600px) {
    .about-hero {
        min-height: auto;
        padding: calc(var(--space-lg) + 4rem) 0 var(--space-lg);
    }

    .about-section,
    .about-pillars,
    .about-closing {
        padding: var(--space-lg) 0;
    }

    .about-hero-eyebrow,
    .about-hero-meta {
        letter-spacing: 0.28em;
        font-size: 0.7rem;
    }
}

/* =========================================================
   ABOUT — Dune contour background (Vault concept)
   ========================================================= */

.page-about {
    background: var(--color-bg-base);
}

.dunes-bg {
    position: fixed;
    inset: 0;
    /* inset:0 sizes to the viewport content box; an explicit 100vw would
       include the scrollbar gutter and force horizontal scroll. */
    color: var(--color-accent-gold);
    opacity: 0.18;
    z-index: 0;
    pointer-events: none;
}

/* Make About sections transparent so dunes show through.
   Sand pillars stay opaque on purpose — they're the visual pause. */
.page-about main {
    position: relative;
    z-index: 1;
}

.page-about .about-hero,
.page-about .about-section,
.page-about .about-section-alt,
.page-about .about-pillars:not(.about-pillars-sand),
.page-about .about-closing {
    background: transparent;
}

/* Keep the radial gold wash on the dark sections, but layer over transparent bg */
.page-about .about-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 20% 0%, rgba(212, 175, 55, 0.05) 0%, transparent 55%);
}

/* Alt section needs a slight tint so it still reads as distinct */
.page-about .about-section-alt {
    background: linear-gradient(180deg,
            rgba(26, 18, 6, 0.04) 0%,
            rgba(26, 18, 6, 0.08) 50%,
            rgba(26, 18, 6, 0.04) 100%);
    border-top: 1px solid var(--color-accent-gold-dim);
    border-bottom: 1px solid var(--color-accent-gold-dim);
}

/* =========================================================
   ABOUT — Orbit rings behind hero (Orbit concept)
   ========================================================= */

.about-orbit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.about-orbit-core {
    position: absolute;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.55) 0%, rgba(212, 175, 55, 0) 70%);
    border-radius: 50%;
    filter: blur(24px);
    opacity: 1;
}

.about-orbit-ring {
    position: absolute;
    border: 1px dashed rgba(212, 175, 55, 0.42);
    border-radius: 50%;
    animation: about-orbit-spin linear infinite;
}

.about-orbit-ring.r1 {
    width: 38vw;
    height: 38vw;
    max-width: 520px;
    max-height: 520px;
    animation-duration: 60s;
    border-color: rgba(212, 175, 55, 0.5);
}

.about-orbit-ring.r2 {
    width: 62vw;
    height: 62vw;
    max-width: 860px;
    max-height: 860px;
    animation-duration: 90s;
    animation-direction: reverse;
    border-style: solid;
    border-color: rgba(212, 175, 55, 0.22);
}

.about-orbit-ring.r3 {
    width: 96vw;
    height: 96vw;
    max-width: 1320px;
    max-height: 1320px;
    animation-duration: 140s;
    border-style: dashed;
    border-color: rgba(212, 175, 55, 0.16);
}

@keyframes about-orbit-spin {
    to {
        transform: rotate(360deg);
    }
}

/* The hero's existing ::before radial wash conflicts with orbit — drop it on About */
.page-about .about-hero::before {
    display: none;
}

.page-about .about-hero .container {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .about-orbit-ring {
        animation: none;
    }
}

@media (max-width: 600px) {
    .about-orbit-core {
        width: 160px;
        height: 160px;
    }

    .dunes-bg {
        opacity: 0.12;
    }
}


/* =========================================================
   LEADERSHIP PAGE
   Dark-theme org-chart: Chairman top, three reports below
   ========================================================= */

.page-leadership {
    background: var(--color-bg-base);
}

.page-leadership main {
    position: relative;
    z-index: 1;
}

/* Intro band */
.lead-intro {
    padding: calc(var(--space-xl) + 4rem) 0 var(--space-lg);
    text-align: center;
    background: transparent;
}

.lead-eyebrow {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.42em;
    color: var(--color-accent-gold);
    margin: 0 0 var(--space-md);
    text-transform: uppercase;
}

.lead-rule {
    display: block;
    width: 72px;
    height: 1px;
    background: var(--color-accent-gold);
    margin: var(--space-md) auto;
    opacity: 0.8;
}

.lead-title {
    font-family: var(--font-heading-primary);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm);
    letter-spacing: 0.05em;
}

.lead-sub {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Chart */
.lead-chart {
    padding: var(--space-lg) 0 var(--space-xl);
    background: transparent;
}

.lead-chart .container {
    position: relative;
}

/* Card — shared */
.lead-card {
    background: rgba(18, 18, 18, 0.92);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-top: 2px solid var(--color-accent-gold);
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    transition: border-color var(--transition-fast), transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.lead-card:hover {
    border-color: rgba(212, 175, 55, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(212, 175, 55, 0.08);
}

.lead-card-portrait {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin: 0 auto var(--space-md);
    background: var(--color-bg-elevated);
    position: relative;
}

.lead-card-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(10, 10, 10, 0.35) 100%);
    pointer-events: none;
}

.lead-card-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform var(--transition-smooth), filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-card:hover .lead-card-portrait img {
    transform: scale(1.03);
}

.lead-card-name {
    font-family: var(--font-heading-primary);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-xs);
    letter-spacing: 0.04em;
    /* Reserve two-line height so roles line up across cards even when names
       wrap differently. Matches line-height: 1.3 × 2 lines = 2.6em. */
    min-height: 2.6em;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.lead-card-role {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin: 0 0 var(--space-md);
}

.lead-card-bio {
    font-family: var(--font-body);
    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--color-text-primary);
    margin: 0 auto;
    max-width: 38ch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Chairman — centered, slightly larger, in its own slot */
.lead-card-chairman {
    max-width: 460px;
    margin: 0 auto;
    border-top-width: 3px;
}

.lead-card-chairman .lead-card-name {
    font-size: 1.5rem;
}

.lead-card-chairman .lead-card-role {
    color: var(--color-text-secondary);
}

/* Connector tree between chairman and reports — SVG draws itself in */
.lead-chart-svg {
    display: block;
    margin: 0 auto;
    width: 66.66%;
    max-width: 800px;
    height: 70px;
}

.lead-chart-svg .conn {
    fill: none;
    stroke: var(--color-accent-gold);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.85;
}

/* Bottom row of three */
.lead-reports {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 1400px;
    margin: 0 auto;
}

/* Closing CTA */
.lead-closing {
    padding: var(--space-xl) 0;
    text-align: center;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.lead-closing-line {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md);
}

/* Responsive */
@media (max-width: 900px) {
    .lead-reports {
        grid-template-columns: 1fr;
        max-width: 420px;
        gap: var(--space-lg);
    }

    .lead-chart-connectors {
        display: none;
    }

    .lead-card-chairman {
        margin-bottom: var(--space-lg);
    }
}

@media (max-width: 600px) {
    .lead-intro {
        padding: calc(var(--space-lg) + 4rem) 0 var(--space-md);
    }

    .lead-chart,
    .lead-closing {
        padding: var(--space-lg) 0;
    }
}

/* =========================================================
   PORTFOLIO PAGE
   ========================================================= */

.page-portfolio {
    background: var(--color-bg-base);
}

.page-portfolio main {
    position: relative;
    z-index: 1;
}

.pf-intro {
    padding: calc(var(--space-xl) + 4rem) 0 var(--space-lg);
    text-align: center;
    background: transparent;
}

.pf-eyebrow {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.42em;
    color: var(--color-accent-gold);
    margin: 0 0 var(--space-md);
    text-transform: uppercase;
}

.pf-rule {
    display: block;
    width: 72px;
    height: 1px;
    background: var(--color-accent-gold);
    margin: var(--space-md) auto;
    opacity: 0.8;
}

.pf-title {
    font-family: var(--font-heading-primary);
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm);
    letter-spacing: 0.05em;
}

.pf-sub {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    color: var(--color-text-secondary);
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.55;
}

/* Triptych hero */
.pf-triptych {
    padding: var(--space-lg) 0 var(--space-md);
    background: transparent;
}

.pf-triptych-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 1300px;
    margin: 0 auto;
}

.pf-pillar {
    background: var(--color-bg-elevated);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background var(--transition-smooth),
        opacity var(--transition-fast),
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.pf-pillar:focus-visible {
    outline: none;
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 0 1px var(--color-accent-gold);
}

/* Spotlight: hovering one pillar dims the other two; gold border appears. */
@media (hover: hover) {
    .pf-triptych-grid:hover .pf-pillar {
        opacity: 0.45;
    }

    .pf-triptych-grid .pf-pillar:hover {
        opacity: 1;
        background: var(--color-bg-surface);
        transform: translateY(-3px);
        border-color: var(--color-accent-gold);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    }
}

.pf-pillar:hover {
    background: var(--color-bg-surface);
}

.pf-pillar-num {
    display: inline-block;
    font-family: var(--font-heading-primary);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    color: var(--color-accent-gold);
    background: transparent;
    padding: 0;
    margin: 0 auto var(--space-sm);
    border: 0;
    align-self: center;
}

.pf-pillar-title {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    color: var(--color-text-primary);
    background: transparent;
    line-height: 1.2;
    display: block;
    padding: 0;
    margin: 0 0 var(--space-md);
    letter-spacing: 0.04em;
    border: 0;
}

.pf-pillar-line {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    max-width: 32ch;
    margin: 0 auto var(--space-md);
    -webkit-font-smoothing: antialiased;
}

.pf-pillar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    transition: color var(--transition-fast), letter-spacing var(--transition-fast);
    pointer-events: none;
}

.pf-pillar-link-arrow {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.pf-pillar:hover .pf-pillar-link {
    color: var(--color-text-secondary);
    letter-spacing: 0.36em;
}

.pf-pillar:hover .pf-pillar-link-arrow {
    transform: translateX(3px);
}

/* =========================================================
   PORTFOLIO MODAL
   Centered dialog with dim+blur backdrop, fade/scale-in entrance
   ========================================================= */

.pf-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.pf-modal[hidden] {
    /* Override default display:none so we can transition in/out */
    display: flex;
}

.pf-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.pf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.pf-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(720px, calc(100% - 2 * var(--space-md)));
    max-height: calc(100vh - 2 * var(--space-md));
    overflow-y: auto;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-accent-gold);
    border-top: 3px solid var(--color-accent-gold);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    text-align: center;
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.35s ease;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.pf-modal.is-open .pf-modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.pf-modal-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.pf-modal-close:hover {
    color: var(--color-accent-gold);
    transform: rotate(90deg);
}

.pf-modal-content {
    margin-top: var(--space-sm);
}

.pf-modal-eyebrow {
    display: block;
    font-family: var(--font-heading-primary);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    text-align: center;
    margin-bottom: var(--space-sm);
}

.pf-modal-title {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: 0.04em;
    text-align: center;
}

.pf-modal-subquote {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    line-height: 1.55;
    color: var(--color-text-secondary);
    max-width: 38ch;
    margin: var(--space-md) auto 0;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.pf-modal-rule {
    display: block;
    width: 50px;
    height: 1px;
    background: var(--color-accent-gold);
    margin: var(--space-md) auto;
}

.pf-modal-content p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text-primary);
    max-width: 56ch;
    margin: 0 auto var(--space-md);
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.pf-modal-content p:last-child {
    margin-bottom: 0;
}

.pf-modal-content .pf-focus-cta {
    margin-top: var(--space-xs);
}

/* Body scroll lock when modal open */
body.pf-modal-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .pf-modal-dialog {
        padding: var(--space-lg) var(--space-md) var(--space-md);
    }
}

/* Focus detail sections */
.pf-focus {
    padding: var(--space-xl) 0;
    background: transparent;
    position: relative;
}

.pf-focus-alt {
    background: linear-gradient(180deg,
            rgba(26, 26, 26, 0.55) 0%,
            rgba(26, 26, 26, 0.7) 50%,
            rgba(26, 26, 26, 0.55) 100%);
    border-top: 1px solid var(--color-accent-gold-dim);
    border-bottom: 1px solid var(--color-accent-gold-dim);
}

.pf-focus-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-lg);
    align-items: start;
}

.pf-focus-label {
    border-top: 1px solid var(--color-accent-gold-dim);
    padding-top: var(--space-sm);
}

.pf-focus-num {
    display: block;
    font-family: var(--font-heading-primary);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: var(--color-accent-gold);
    margin-bottom: var(--space-xs);
}

.pf-focus-title {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.15;
    letter-spacing: 0.04em;
}

.pf-focus-body p {
    font-family: var(--font-body);
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md);
    max-width: 60ch;
    -webkit-font-smoothing: antialiased;
}

.pf-focus-cta {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    text-decoration: none;
    border-bottom: 1px solid var(--color-accent-gold-dim);
    padding-bottom: 4px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.pf-focus-cta:hover {
    color: var(--color-text-secondary);
    border-color: var(--color-accent-gold);
}

/* Shared section headers */
.pf-section-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.pf-section-title {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm);
    letter-spacing: 0.05em;
}

.pf-section-sub {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Ventures grid */
.pf-ventures {
    padding: var(--space-md) 0 var(--space-xl);
    background: transparent;
}

.pf-ventures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    max-width: 1300px;
    margin: 0 auto;
}

.pf-venture {
    background: rgba(18, 18, 18, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-top: 2px solid var(--color-accent-gold);
    padding: var(--space-md);
    transition: border-color var(--transition-fast), transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.pf-venture:hover {
    border-color: rgba(212, 175, 55, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}

.pf-venture-status {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border: 1px solid;
    margin-bottom: var(--space-sm);
}

.pf-status-live {
    color: var(--color-accent-gold);
    border-color: var(--color-accent-gold);
}

.pf-status-build {
    color: var(--color-text-secondary);
    border-color: var(--color-text-tertiary);
}

.pf-status-future {
    color: var(--color-text-tertiary);
    border-color: rgba(26, 18, 6, 0.22);
}

.pf-venture-name {
    font-family: var(--font-heading-primary);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-xs);
    letter-spacing: 0.04em;
}

.pf-venture-meta {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin: 0 0 var(--space-sm);
}

.pf-venture-blurb {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* Partners + Sponsors */
.pf-partners {
    padding: var(--space-xl) 0;
    background: transparent;
}

.pf-partners-block {
    margin-bottom: var(--space-lg);
}

.pf-partners-block:last-of-type {
    margin-bottom: 0;
}

.pf-partners-heading {
    font-family: var(--font-heading-primary);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    text-align: center;
    margin: 0 0 var(--space-md);
}

.pf-partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch;
}

.pf-partner-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: var(--space-md);
    min-height: 140px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
    opacity: 0.85;
}

.pf-partner-tile:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.pf-partner-tile img {
    max-width: 80%;
    max-height: 90px;
    object-fit: contain;
}

.pf-partners-placeholder {
    text-align: center;
    font-family: var(--font-heading-secondary);
    font-style: italic;
    color: var(--color-text-tertiary);
    margin: 0;
}

/* Closing CTA */
.pf-closing {
    padding: var(--space-xl) 0;
    text-align: center;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.pf-closing-line {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-md);
}

@media (max-width: 900px) {
    .pf-triptych-grid {
        grid-template-columns: 1fr;
    }

    .pf-focus-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
}

@media (max-width: 600px) {
    .pf-intro {
        padding: calc(var(--space-lg) + 4rem) 0 var(--space-md);
    }

    .pf-triptych,
    .pf-focus,
    .pf-ventures,
    .pf-partners,
    .pf-closing {
        padding: var(--space-lg) 0;
    }

    .pf-pillar {
        padding: var(--space-lg) var(--space-md);
    }
}

/* Five focus-area pillars — same triptych concept and card proportions,
   but flowed (3 + 2 centred) so the layout stays balanced with 5 cards.
   Placed after the base grid media queries so it wins by source order. */
.pf-triptych-grid-5 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.pf-triptych-grid-5 .pf-pillar {
    flex: 1 1 340px;
    max-width: 380px;
}

/* Focus-area cards — non-interactive, so the triptych spotlight is
   suppressed and replaced with an editorial, framed treatment:
   cream surface, fine gold keyline, tapered rule under the numeral. */
.pf-pillar-static {
    position: relative;
    cursor: default;
    justify-content: center;
    background:
        linear-gradient(180deg, #FFFBF0 0%, var(--color-bg-elevated) 60%);
    border-color: var(--color-accent-gold-dim);
    border-radius: 2px;
    box-shadow: 0 14px 44px rgba(26, 18, 6, 0.06);
}

/* No trailing link below the line as the triptych had, so drop its
   bottom margin and let the centred content sit balanced. */
.pf-pillar-static .pf-pillar-line {
    margin-bottom: 0;
}

/* Inner keyline — the classic luxury double-frame detail. */
.pf-pillar-static::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(156, 122, 42, 0.14);
    border-radius: 1px;
    pointer-events: none;
    transition: border-color var(--transition-smooth);
}

.pf-pillar-static > * {
    position: relative;
    z-index: 1;
}

/* Tapered gold rule beneath the Roman numeral. */
.pf-pillar-static .pf-pillar-num::after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    margin: 0.85rem auto 0;
    background: linear-gradient(90deg, transparent, var(--color-accent-gold), transparent);
}

/* No sibling-dimming; a restrained lift + frame-brighten on hover. */
.pf-triptych-grid-5:hover .pf-pillar {
    opacity: 1;
}

.pf-triptych-grid-5 .pf-pillar-static:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-gold);
    box-shadow: 0 22px 60px rgba(26, 18, 6, 0.12);
}

.pf-triptych-grid-5 .pf-pillar-static:hover::before {
    border-color: rgba(156, 122, 42, 0.4);
}

@media (max-width: 600px) {
    .pf-triptych-grid-5 .pf-pillar {
        flex-basis: 100%;
    }
}

/* =========================================================
   ASSETS PAGE
   Anchor figure, donut + bar charts (raw SVG, no library),
   holdings grid sharing the pf-modal pattern.
   ========================================================= */

.page-assets {
    background: var(--color-bg-base);
}

.page-assets main {
    position: relative;
    z-index: 1;
}

/* --- Anchor figure --- */
.as-anchor {
    padding: var(--space-md) 0 var(--space-lg);
    text-align: center;
    background: transparent;
}

.as-anchor-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    opacity: 0.7;
    margin: 0 0 var(--space-md);
}

.as-anchor-figure {
    font-family: var(--font-heading-primary);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    letter-spacing: 0.04em;
}

.as-anchor-currency {
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    color: var(--color-accent-gold);
    letter-spacing: 0.3em;
}

.as-anchor-number {
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.as-anchor-rule {
    display: block;
    width: 120px;
    height: 1px;
    background: var(--color-accent-gold);
    opacity: 0.6;
    margin: var(--space-md) auto;
}

/* --- Chart cards --- */
.as-charts {
    padding: var(--space-md) 0 var(--space-xl);
    background: transparent;
}

.as-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    max-width: 1300px;
    margin: 0 auto;
}

.as-chart-card {
    background: var(--color-bg-elevated);
    border: 1px solid rgba(212, 175, 55, 0.12);
    padding: var(--space-lg) var(--space-md);
}

.as-chart-head {
    text-align: center;
    margin-bottom: var(--space-md);
}

.as-chart-eyebrow {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin: 0 0 0.5rem;
}

.as-chart-title {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: 0.05em;
}

/* --- Donut --- */
.as-donut-wrap {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: var(--space-md);
    align-items: center;
}

.as-donut {
    width: 100%;
    height: auto;
    transform: rotate(-90deg);
    /* start segments at 12 o'clock */
}

.as-donut-track {
    stroke: rgba(212, 175, 55, 0.1);
}

/* Donut segments: drawn via stroke-dasharray. Until .is-drawn fires
   the dasharray is 0 502.65 (invisible). Each segment's
   stroke-dashoffset is set inline by JS so they butt up cleanly. */
.as-donut-seg {
    stroke-dasharray: 0 502.65;
    transition: stroke-dasharray 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.as-seg-1 {
    stroke: var(--color-accent-gold);
}

.as-seg-2 {
    stroke: var(--color-accent-sand);
}

.as-seg-3 {
    stroke: rgba(212, 175, 55, 0.45);
}

.as-donut-centre-top {
    font-family: var(--font-heading-primary);
    font-size: 18px;
    font-weight: 700;
    fill: var(--color-accent-gold);
    letter-spacing: 0.08em;
    /* Counter the parent svg rotation so the text stays upright */
    transform: rotate(90deg);
    transform-origin: 100px 100px;
}

.as-donut-centre-sub {
    font-family: var(--font-body);
    font-size: 7px;
    font-weight: 500;
    fill: var(--color-accent-sand);
    letter-spacing: 0.32em;
    opacity: 0.7;
    transform: rotate(90deg);
    transform-origin: 100px 100px;
}

.as-donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.as-donut-legend li {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-text-secondary);
}

.as-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.as-dot-1 {
    background: var(--color-accent-gold);
}

.as-dot-2 {
    background: var(--color-accent-sand);
}

.as-dot-3 {
    background: rgba(212, 175, 55, 0.45);
}

.as-legend-label {
    color: var(--color-text-primary);
    letter-spacing: 0.02em;
}

.as-legend-pct {
    font-family: var(--font-heading-primary);
    font-weight: 600;
    color: var(--color-accent-gold);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

/* --- Bar list --- */
.as-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.as-bar-row {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.as-bar-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.as-bar-name {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
}

.as-bar-value {
    font-family: var(--font-heading-primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent-gold);
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

.as-bar-track {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(212, 175, 55, 0.08);
    overflow: hidden;
}

.as-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-sand));
    transition: width 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- Holdings grid --- */
.as-grid-section {
    padding: var(--space-lg) 0 var(--space-xl);
    background: transparent;
}

.as-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 1300px;
    margin: 0 auto;
}

/* --- Filter chips --- */
.as-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin: 0 auto var(--space-md);
    max-width: 1300px;
}

.as-chip {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.25);
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.as-chip:hover {
    color: var(--color-text-secondary);
    border-color: rgba(212, 175, 55, 0.55);
}

.as-chip.is-active {
    color: var(--color-text-primary);
    background: var(--color-accent-gold);
    border-color: var(--color-accent-gold);
}

.as-chip:focus-visible {
    outline: 1px solid var(--color-accent-gold);
    outline-offset: 2px;
}

.as-card {
    position: relative;
    background: var(--color-bg-elevated);
    border: 1px solid transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background var(--transition-smooth),
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        opacity 0.35s ease;
    overflow: hidden;
}

.as-card.is-filtered-out {
    opacity: 0.18;
    pointer-events: none;
    transform: scale(0.97);
}

/* Card image (top slot) */
.as-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: var(--color-bg-surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(156, 122, 42, 0.2);
}

/* Placeholder gradients — varied per card so it doesn't look identical.
   TODO: replace each with `background-image: url('/images/assets/asset-NN.jpg')` once delivered. */
.as-card-image-1 {
    background-image: linear-gradient(135deg, rgba(212, 175, 55, 0.32), rgba(26, 18, 6, 0.18) 60%);
}

.as-card-image-2 {
    background-image: linear-gradient(135deg, rgba(230, 213, 184, 0.22), rgba(26, 18, 6, 0.18) 65%);
}

.as-card-image-3 {
    background-image: linear-gradient(160deg, rgba(212, 175, 55, 0.2), rgba(26, 18, 6, 0.18) 65%);
}

.as-card-image-4 {
    background-image: linear-gradient(115deg, rgba(212, 175, 55, 0.28), rgba(26, 18, 6, 0.18) 60%);
}

.as-card-image-5 {
    background-image: linear-gradient(145deg, rgba(230, 213, 184, 0.18), rgba(26, 18, 6, 0.18) 60%);
}

.as-card-image-6 {
    background-image: linear-gradient(125deg, rgba(212, 175, 55, 0.22), rgba(20, 16, 10, 0.95) 60%);
}

.as-card-image-label {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.55);
}

.as-card:hover .as-card-image::after {
    opacity: 1;
}

.as-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(212, 175, 55, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.as-card-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}

.as-card-meta {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin: 0;
}

.as-card:focus-visible {
    outline: none;
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 0 1px var(--color-accent-gold);
}

.as-card:hover {
    background: var(--color-bg-surface);
    transform: translateY(-3px);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.as-card-tag {
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    border: 1px solid rgba(212, 175, 55, 0.4);
    padding: 0.3rem 0.6rem;
}

.as-card-name {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0.2rem 0 0;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.as-card-value {
    font-family: var(--font-heading-primary);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-accent-gold);
    letter-spacing: 0.06em;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.as-card-note {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    margin: 0;
}

.as-card-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    transition: color var(--transition-fast), letter-spacing var(--transition-fast);
    pointer-events: none;
    padding-top: 0.6rem;
}

.as-card-link-arrow {
    display: inline-block;
    transition: transform var(--transition-fast);
}

.as-card:hover .as-card-link {
    color: var(--color-text-secondary);
    letter-spacing: 0.36em;
}

.as-card:hover .as-card-link-arrow {
    transform: translateX(3px);
}

.as-footnote {
    text-align: center;
    margin: var(--space-lg) auto 0;
    max-width: 720px;
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--color-text-tertiary);
    letter-spacing: 0.06em;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .as-charts-grid {
        grid-template-columns: 1fr;
    }

    .as-donut-wrap {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .as-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .as-anchor {
        padding: var(--space-sm) 0 var(--space-md);
    }

    .as-charts {
        padding: 0 0 var(--space-lg);
    }

    .as-grid {
        grid-template-columns: 1fr;
    }

    .as-chart-card {
        padding: var(--space-md) var(--space-sm);
    }
}

/* =========================================================
   GALLERY PAGE
   Override the venue's 2x2 grid for a larger staggered mosaic.
   Reuses .gallery-quadrant + the existing toggleGalleryQuadrant JS.
   ========================================================= */

.page-gallery {
    background: var(--color-bg-base);
}

.page-gallery main {
    position: relative;
    z-index: 1;
}

.gal-section {
    padding: var(--space-md) 0 var(--space-xl);
    background: transparent;
}

.page-gallery .gallery-quadrant-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
    gap: 14px;
    height: auto;
    min-height: 0;
    max-width: 1300px;
    margin: 0 auto;
}

.page-gallery .gallery-quadrant {
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.08);
    grid-column: span 1;
    grid-row: span 1;
    position: relative;
}

.page-gallery .gal-feature {
    grid-column: span 2;
    grid-row: span 2;
}

.page-gallery .gal-tall {
    grid-row: span 2;
}

.page-gallery .gal-wide {
    grid-column: span 2;
}

.page-gallery .gallery-quadrant:hover {
    transform: scale(1.015);
    border-color: rgba(212, 175, 55, 0.35);
}

/* Subtle gold sheen on hover, layered above the photo */
.page-gallery .gallery-quadrant::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(212, 175, 55, 0.12), transparent 55%);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.page-gallery .gallery-quadrant:hover::after {
    opacity: 1;
}

/* Placeholder tiles — varied gold-tinted gradients */
.gal-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gal-placeholder-1 {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(26, 18, 6, 0.18) 65%);
}

.gal-placeholder-2 {
    background: linear-gradient(115deg, rgba(230, 213, 184, 0.18), rgba(26, 18, 6, 0.18) 60%);
}

.gal-placeholder-3 {
    background: linear-gradient(150deg, rgba(212, 175, 55, 0.18), rgba(20, 16, 10, 0.95) 60%);
}

.gal-placeholder-4 {
    background: linear-gradient(125deg, rgba(212, 175, 55, 0.28), rgba(26, 18, 6, 0.18) 60%);
}

.gal-placeholder-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.55);
}

/* Expanded state: one tile fills the viewport width */
.page-gallery .gallery-quadrant-grid.has-expanded {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-auto-rows: 1fr;
    height: 78vh;
    min-height: 520px;
}

.page-gallery .gallery-quadrant-grid.has-expanded .gallery-quadrant.expanded {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    border-radius: 6px;
}

.gal-footnote {
    text-align: center;
    margin: var(--space-lg) auto 0;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-text-tertiary);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .page-gallery .gallery-quadrant-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
    }

    .page-gallery .gal-feature {
        grid-column: span 2;
        grid-row: span 2;
    }

    .page-gallery .gal-wide,
    .page-gallery .gal-tall {
        grid-column: span 1;
        grid-row: span 1;
    }
}

@media (max-width: 600px) {
    .page-gallery .gallery-quadrant-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }

    .page-gallery .gal-feature,
    .page-gallery .gal-wide,
    .page-gallery .gal-tall {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* =========================================================
   LOCATION PAGE
   Two address+map cards, origin toggle, accordion of nearby
   categories. Vanilla JS handlers live in scripts/main.js.
   ========================================================= */

.page-location {
    background: var(--color-bg-base);
}

.page-location main {
    position: relative;
    z-index: 1;
}

/* --- Address + map cards --- */
.loc-addr-section {
    padding: var(--space-md) 0 var(--space-lg);
}

.loc-addr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    max-width: 900px;
    margin: 0 auto;
}

.loc-addr-card {
    background: var(--color-bg-elevated);
    border: 1px solid rgba(156, 122, 42, 0.2);
    display: grid;
    grid-template-rows: auto 280px;
    overflow: hidden;
}

.loc-addr-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.loc-addr-eyebrow {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin: 0;
}

.loc-addr-name {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: 0.05em;
}

.loc-addr-text {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-primary);
    margin: 0;
}

.loc-addr-note {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.loc-addr-cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    text-decoration: none;
    padding-top: 0.4rem;
    transition: color var(--transition-fast), letter-spacing var(--transition-fast);
}

.loc-addr-cta:hover {
    color: var(--color-text-secondary);
    letter-spacing: 0.36em;
}

.loc-addr-cta-arrow {
    transition: transform var(--transition-fast);
}

.loc-addr-cta:hover .loc-addr-cta-arrow {
    transform: translateX(3px);
}

/* Map iframe — desaturated to match brand */
.loc-map {
    position: relative;
    background: var(--color-bg-base);
    border-top: 1px solid rgba(156, 122, 42, 0.2);
}

.loc-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(0.65) contrast(0.95) brightness(0.85);
    transition: filter 0.6s ease;
}

.loc-addr-card:hover .loc-map iframe {
    filter: grayscale(0.25) contrast(1) brightness(0.95);
}

/* --- Nearby section --- */
.loc-nearby {
    padding: var(--space-lg) 0 var(--space-xl);
}

.loc-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: var(--space-md) auto var(--space-lg);
    max-width: 460px;
    border: 1px solid rgba(212, 175, 55, 0.25);
}

.loc-toggle-btn {
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.loc-toggle-btn:hover {
    color: var(--color-text-secondary);
}

.loc-toggle-btn.is-active {
    color: var(--color-text-primary);
    background: var(--color-accent-gold);
}

.loc-toggle-btn:focus-visible {
    outline: 1px solid var(--color-accent-gold);
    outline-offset: 2px;
}

/* --- Accordion --- */
.loc-accordion {
    max-width: 920px;
    margin: 0 auto;
    display: none;
}

.loc-accordion.is-visible {
    display: block;
}

.loc-acc-item {
    border-top: 1px solid rgba(212, 175, 55, 0.18);
}

.loc-acc-item:last-child {
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.loc-acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 1.4rem 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.loc-acc-trigger:hover {
    background: rgba(212, 175, 55, 0.04);
}

.loc-acc-trigger:focus-visible {
    outline: 1px solid var(--color-accent-gold);
    outline-offset: -1px;
}

.loc-acc-cat {
    display: inline-flex;
    align-items: baseline;
    gap: 1.2rem;
    font-family: var(--font-heading-primary);
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: 0.05em;
}

.loc-acc-num {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    color: var(--color-accent-gold);
}

.loc-acc-meta {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
}

.loc-acc-count {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.loc-acc-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--color-accent-gold);
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.35s ease, background var(--transition-fast);
}

.loc-acc-trigger[aria-expanded="true"] .loc-acc-chev {
    transform: rotate(45deg);
    background: rgba(212, 175, 55, 0.12);
}

/* Panel: collapsed (max-height 0) → expanded (set inline by JS) */
.loc-acc-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.loc-place-list {
    list-style: none;
    margin: 0;
    padding: 0 0 1.4rem 3.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.loc-place {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dotted rgba(212, 175, 55, 0.15);
}

.loc-place:last-child {
    border-bottom: none;
}

.loc-place-name {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-primary);
    letter-spacing: 0.02em;
}

.loc-place-dist {
    font-family: var(--font-heading-primary);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-accent-gold);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Placeholder when HQ data isn't available yet */
.loc-empty {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    border: 1px dashed rgba(212, 175, 55, 0.25);
}

.loc-empty-eyebrow {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin: 0 0 0.6rem;
    opacity: 0.7;
}

.loc-empty-title {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm);
    letter-spacing: 0.04em;
}

.loc-empty-body {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: 1rem;
    color: var(--color-text-secondary);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}

.loc-empty-body strong {
    color: var(--color-accent-gold);
    font-style: normal;
    font-weight: 600;
    font-family: var(--font-heading-primary);
    letter-spacing: 0.05em;
}

.loc-footnote {
    text-align: center;
    max-width: 720px;
    margin: var(--space-lg) auto 0;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    letter-spacing: 0.04em;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .loc-addr-grid {
        grid-template-columns: 1fr;
    }

    .loc-addr-card {
        grid-template-rows: auto 260px;
    }
}

@media (max-width: 600px) {
    .loc-acc-cat {
        gap: 0.7rem;
        font-size: 1rem;
    }

    .loc-place-list {
        padding-left: 1.2rem;
    }

    .loc-acc-count {
        display: none;
    }

    .loc-place {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
}

/* =========================================================
   CONTACT PAGE
   Two-column split: details panel + EmailJS form.
   Reuses .form-input / .form-group / .form-error / .contact-submit-btn.
   ========================================================= */

.page-contact {
    background: var(--color-bg-base);
}

.page-contact main {
    position: relative;
    z-index: 1;
}

.ct-section {
    padding: var(--space-md) 0 var(--space-xl);
}

.ct-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-lg);
    max-width: 1180px;
    margin: 0 auto;
}

/* Details panel */
.ct-details {
    background: var(--color-bg-elevated);
    border: 1px solid rgba(212, 175, 55, 0.12);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.ct-eyebrow {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin: 0;
}

.ct-heading {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.4rem;
    letter-spacing: 0.05em;
}

.ct-subheading {
    font-family: var(--font-heading-primary);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: 0.04em;
}

.ct-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.ct-list-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ct-list-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.ct-list-value {
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--color-text-primary);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color var(--transition-fast);
}

a.ct-list-value:hover {
    color: var(--color-accent-gold);
}

.ct-list-link {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    text-decoration: none;
    transition: color var(--transition-fast), letter-spacing var(--transition-fast);
    align-self: flex-start;
}

.ct-list-link:hover {
    color: var(--color-text-secondary);
    letter-spacing: 0.34em;
}

.ct-rule {
    display: block;
    height: 1px;
    background: rgba(212, 175, 55, 0.2);
    margin: 0.6rem 0;
}

.ct-address {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text-primary);
    margin: 0;
}

.ct-social {
    display: flex;
    gap: 0.7rem;
    margin-top: 0.2rem;
}

.ct-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--color-text-secondary);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.ct-social-link:hover {
    color: var(--color-text-primary);
    background: var(--color-accent-gold);
    border-color: var(--color-accent-gold);
}

/* Form wrap */
.ct-form-wrap {
    background: var(--color-bg-elevated);
    border: 1px solid rgba(212, 175, 55, 0.12);
    padding: var(--space-md);
}

.ct-form-eyebrow {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin: 0;
}

.ct-form-heading {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0.3rem 0 0.6rem;
    letter-spacing: 0.05em;
}

.ct-form-disclaimer {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-text-tertiary);
    margin: 0 0 var(--space-md);
}

.ct-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-label-opt {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    text-transform: none;
    letter-spacing: 0.02em;
    margin-left: 0.3rem;
}

.form-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

#contact-submit-btn {
    align-self: flex-start;
    min-width: 220px;
}

.ct-form-note {
    margin: 0.4rem 0 0;
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--color-text-tertiary);
}

@media (max-width: 900px) {
    .ct-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    /* Let the single column follow the container on very narrow phones
       instead of the panels' padded min-content. */
    .ct-details,
    .ct-form-wrap {
        min-width: 0;
    }
}

/* =========================================================
   FAQ PAGE
   Reuses .loc-accordion + .loc-acc-* classes from the Location
   page. Just adds answer-block typography and a footnote.
   ========================================================= */

.page-faq {
    background: var(--color-bg-base);
}

.page-faq main {
    position: relative;
    z-index: 1;
}

.faq-section {
    padding: var(--space-md) 0 var(--space-xl);
}

/* Three-category tab switcher — overrides the two-up Location toggle width */
.faq-toggle.loc-toggle {
    max-width: 760px;
    margin: var(--space-lg) auto var(--space-xl);
    border-color: rgba(156, 122, 42, 0.32);
}

.faq-toggle .loc-toggle-btn {
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    padding: 0.95rem 0.6rem;
}

.faq-toggle .loc-toggle-btn.is-active {
    color: var(--color-bg-base);
    background: var(--color-accent-gold);
}

@media (max-width: 640px) {
    .faq-toggle.loc-toggle {
        flex-direction: column;
        max-width: 360px;
    }
    .faq-toggle .loc-toggle-btn {
        letter-spacing: 0.22em;
    }
    .faq-toggle .loc-toggle-btn + .loc-toggle-btn {
        border-top: 1px solid rgba(156, 122, 42, 0.32);
    }
}

.faq-answer {
    padding: 0 0 1.4rem 3.6rem;
    max-width: 760px;
}

.faq-answer p {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin: 0;
}

.faq-link {
    color: var(--color-accent-gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.faq-link:hover {
    color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
}

.faq-footnote {
    text-align: center;
    margin: var(--space-lg) auto 0;
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: 1rem;
    color: var(--color-text-secondary);
}

@media (max-width: 600px) {
    .faq-answer {
        padding-left: 1.2rem;
    }
}

/* ---- Gallery: social platforms dropdown ---- */
.gal-social {
    padding: var(--space-md) 0 var(--space-lg);
}

.gal-social-drop {
    max-width: 720px;
    margin: 0 auto;
    border-top: 1px solid var(--color-accent-gold-dim);
    border-bottom: 1px solid var(--color-accent-gold-dim);
}

.gal-social-summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.gal-social-summary::-webkit-details-marker {
    display: none;
}

.gal-social-summary:hover {
    color: var(--color-accent-gold);
}

.gal-social-chev {
    font-family: var(--font-heading-primary);
    font-size: 1.4rem;
    color: var(--color-accent-gold);
    transition: transform var(--transition-fast);
}

.gal-social-drop[open] .gal-social-chev {
    transform: rotate(45deg);
}

.gal-social-list {
    display: flex;
    flex-direction: column;
    padding: 0 0.5rem 1rem;
    gap: 0.5rem;
}

.gal-social-link {
    font-family: var(--font-body);
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    text-decoration: none;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.gal-social-link:hover {
    color: var(--color-accent-gold);
    padding-left: 0.5rem;
}

.gal-social-link:last-child {
    border-bottom: none;
}

/* ---- About: HRH visionary statement block ---- */
.about-visionary {
    padding: var(--space-lg) 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.about-visionary-eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin: var(--space-sm) 0;
}

.about-visionary-quote {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: clamp(1.3rem, 2.4vw, 1.85rem);
    line-height: 1.55;
    color: var(--color-text-primary);
    max-width: 880px;
    margin: 0 auto var(--space-md);
    quotes: none;
}

.about-visionary-attr {
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin: 0 auto var(--space-md);
    max-width: 700px;
}

/* About location block — pulls the location intro band off the page top */
.about-location-intro {
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ---- Per-page palette overrides ----
   Neutralised after the cream repaint — every page shares one base
   palette so the visual identity is unified. Page-specific accents
   can be re-introduced here once the new tone is signed off. */

/* ---- Hero overlay: hard-coded light text + bright gold ----
   The hero sits over a dark video/poster on the home page, so its
   typography must stay light regardless of the cream token base. */
.hero-text-block .title,
.hero-text-block .title .letter,
.title-lockup .title-line,
.title-lockup .title-line-top,
.hero-text-block .subtitle,
.hero-text-block .description {
    color: #ffffff;
}

.hero-text-block .hero-descriptor {
    color: rgba(255, 255, 255, 0.92);
}

.hero-text-block .location {
    color: rgba(255, 255, 255, 0.58);
}

.title-lockup .title-line-bottom {
    color: #ffffff;
}

/* Hero-overlay CTA inherits the default dark-fill primary button — same
   treatment as the page-closing CTAs so the action reads identically. */

/* FAQ page: hide the dune-contour background — the curves were colliding
   visually with the accordion's horizontal dividers. */
body.page-faq .dunes-bg {
    display: none;
}

.hero-scroll-cue {
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Header: cream-mode by default; transparent + light text only
   over the home-page hero (and only until the user scrolls past it). */
.main-header {
    background-color: rgba(230, 213, 184, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(26, 18, 6, 0.08);
}

.main-header .logo-text,
.main-header .nav-link {
    color: var(--color-text-primary);
}

.main-header .nav-link:hover,
.main-header .nav-link.active {
    color: var(--color-accent-gold);
}

/* Home page — transparent header over the dark hero video, light text */
body.page-home .main-header:not(.scrolled) {
    background-color: transparent;
    backdrop-filter: none;
    border-bottom: 0;
}

body.page-home .main-header:not(.scrolled) .logo-text,
body.page-home .main-header:not(.scrolled) .nav-link {
    color: #ffffff;
    /* Shadow only over the dark hero video — keeps nav legible without blurring text on light subpages */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

body.page-home .main-header:not(.scrolled) .nav-link.active,
body.page-home .main-header:not(.scrolled) .nav-link:hover {
    color: #DDB04A;
}

/* When the user scrolls past the hero on home, header adopts cream mode */
.main-header.scrolled {
    background-color: rgba(230, 213, 184, 0.96);
    border-bottom: 1px solid rgba(26, 18, 6, 0.08);
}

/* Menu toggle bars on cream backgrounds */
.menu-toggle span {
    background-color: var(--color-text-primary);
}

body.page-home .main-header:not(.scrolled) .menu-toggle span {
    background-color: #ffffff;
}

/* ---- Site footer: cream surface ---- */
.site-footer {
    background-color: var(--color-bg-surface);
    border-top: 1px solid rgba(26, 18, 6, 0.08);
}

.footer-link,
.footer-address p,
.footer-address a {
    color: var(--color-text-secondary);
}

.footer-link:hover,
.footer-address a:hover {
    color: var(--color-accent-gold);
}

.footer-heading {
    color: var(--color-accent-gold);
}

.footer-copyright,
.footer-legal {
    color: var(--color-text-tertiary);
}

.footer-divider {
    background-color: rgba(26, 18, 6, 0.08);
}

.social-icons-row {
    border-top: 1px solid rgba(26, 18, 6, 0.08);
    border-bottom: 1px solid rgba(26, 18, 6, 0.08);
}

.social-icon {
    color: var(--color-text-secondary);
    border-color: rgba(156, 122, 42, 0.45);
}

.social-icon:hover {
    color: var(--color-accent-gold);
    border-color: var(--color-accent-gold);
}

/* ---- Card surfaces: flip dark-tinted backgrounds to cream-tinted ---- */
.pf-pillar,
.pf-pillar:hover,
.pf-venture,
.lead-card,
.as-card {
    background: var(--color-bg-elevated);
    border-color: rgba(26, 18, 6, 0.10);
}

@media (hover: hover) {
    .pf-triptych-grid .pf-pillar:hover {
        background: var(--color-bg-surface);
        border-color: var(--color-accent-gold);
        box-shadow: 0 18px 50px rgba(26, 18, 6, 0.10);
    }
}

.lead-card:hover {
    border-color: var(--color-accent-gold);
    box-shadow: 0 18px 50px rgba(26, 18, 6, 0.10), 0 0 0 1px rgba(156, 122, 42, 0.10);
}

.lead-card-portrait,
.lead-chairman-portrait {
    background: rgba(26, 18, 6, 0.06);
    border-color: rgba(156, 122, 42, 0.25);
}

.lead-card-portrait::after,
.lead-chairman-portrait::after {
    background: linear-gradient(180deg, transparent 70%, rgba(26, 18, 6, 0.18) 100%);
}

/* ---- Modal: cream surface ---- */
.pf-modal-dialog {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border: 1px solid rgba(156, 122, 42, 0.25);
    box-shadow: 0 24px 80px rgba(26, 18, 6, 0.25);
}

.pf-modal-backdrop {
    background: rgba(26, 18, 6, 0.55);
}

.pf-modal-content p {
    color: var(--color-text-secondary);
}

.pf-modal-title {
    color: var(--color-text-primary);
}

/* ---- Accordion (FAQ + location) on cream ---- */
.loc-acc-item {
    border-color: rgba(26, 18, 6, 0.10);
}

.loc-acc-trigger {
    color: var(--color-text-primary);
}

.loc-acc-trigger:hover {
    color: var(--color-accent-gold);
}

/* ---- Map iframe: drop the dark filter; let the map show in its own colors ---- */
.loc-map iframe {
    filter: none;
}

.loc-addr-card:hover .loc-map iframe {
    filter: none;
}

/* ---- Forms: cream surface ---- */
.form-input,
.ct-form-wrap input,
.ct-form-wrap textarea {
    background: rgba(255, 255, 255, 0.55);
    color: var(--color-text-primary);
    border-color: rgba(26, 18, 6, 0.18);
}

.form-input::placeholder,
.ct-form-wrap input::placeholder,
.ct-form-wrap textarea::placeholder {
    color: rgba(26, 18, 6, 0.42);
}

.form-input:focus,
.ct-form-wrap input:focus,
.ct-form-wrap textarea:focus {
    border-color: var(--color-accent-gold);
    outline: none;
}

/* ---- Preloader stays dark for a confident loading moment ---- */
#preloader {
    background-color: #0a0a0a;
}

#preloader .loader-title,
#preloader .loader-text {
    color: #ffffff;
}

/* ---- Hero title lockup ("Dunes Gate" / "Holding" stacked) ----
   Overrides the single-line .title sizing and disables the per-letter reveal
   (the per-letter animation is JS-gated on .title-lockup absence). */
.hero-text-block .title.title-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.1em, 0.4vw, 0.25em);
    line-height: 0.92;
    letter-spacing: 0.06em;
    text-transform: none;
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.title-lockup .title-line {
    display: block;
    font-family: var(--font-heading-primary);
    color: #ffffff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.title-lockup .title-line-top {
    font-size: clamp(2.6rem, 8.5vw, 8rem);
    letter-spacing: 0.04em;
    padding-left: 0.04em; /* compensates trailing letter-spacing so the lockup centres optically */
}

.title-lockup .title-line-bottom {
    font-size: clamp(1.6rem, 4.8vw, 4.4rem);
    letter-spacing: 0.32em;
    font-weight: 500;
    color: #ffffff;
    text-transform: uppercase;
    padding-left: 0.32em; /* visually balances the wide letter-spacing */
}

/* ---- Home: Aggregate value brief (reuses .as-anchor* tokens from /assets/) ---- */
.home-anchor {
    padding: var(--space-lg) 0 var(--space-xl);
    border-top: 1px solid rgba(221, 176, 74, 0.12);
}

.home-anchor-note {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    line-height: 1.7;
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: var(--space-md) auto 0;
}

.home-anchor-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: var(--space-md);
    padding: 0.85rem 1.9rem;
    border: 1px solid var(--color-accent-gold);
    color: var(--color-accent-gold);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-size: 0.72rem;
    text-decoration: none;
    transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.home-anchor-cta:hover,
.home-anchor-cta:focus-visible {
    background: var(--color-accent-gold);
    color: var(--color-text-primary);
    transform: translateY(-2px);
}

.home-anchor-cta-arrow {
    display: inline-block;
    transition: transform 0.4s ease;
}

.home-anchor-cta:hover .home-anchor-cta-arrow,
.home-anchor-cta:focus-visible .home-anchor-cta-arrow {
    transform: translateX(3px);
}

/* ============================================================
   Leadership rebuild — Chairman block + Board of Directors
   ============================================================ */

.lead-chairman-section {
    padding: var(--space-md) 0 var(--space-md);
}

.lead-divider {
    display: block;
    width: 100%;
    max-width: 1100px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(221, 176, 74, 0.5) 18%,
        rgba(221, 176, 74, 0.5) 82%,
        transparent 100%);
    margin: 0 auto;
}

.lead-divider-top {
    margin-bottom: var(--space-lg);
}

.lead-divider-bottom {
    margin-top: var(--space-lg);
}

.lead-chairman-card {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 1.4fr;
    gap: var(--space-lg);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.lead-chairman-portrait {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-bg-elevated);
    position: relative;
    border: 1px solid rgba(221, 176, 74, 0.18);
}

.lead-chairman-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 65%, rgba(10, 10, 10, 0.28) 100%);
    pointer-events: none;
}

.lead-chairman-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform var(--transition-smooth);
}

.lead-chairman-card:hover .lead-chairman-portrait img {
    transform: scale(1.02);
}

.lead-chairman-body {
    text-align: left;
}

.lead-chairman-name {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: 0.04em;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm);
}

.lead-chairman-role {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin: 0 0 var(--space-md);
}

.lead-chairman-bio {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--color-text-secondary);
    max-width: 56ch;
    margin: 0;
}

.lead-board-section {
    padding: var(--space-md) 0 var(--space-xl);
}

.lead-board-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.lead-board-title {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0;
}

@media (max-width: 820px) {
    .lead-chairman-card {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    /* Let the single column shrink to the container instead of the portrait's
       intrinsic width (which pushed the page into horizontal scroll). */
    .lead-chairman-portrait,
    .lead-chairman-body {
        min-width: 0;
    }
    /* The one-line name treatment is desktop-only; allow it to wrap on phones
       so a long name doesn't force horizontal scroll. Scoped to the card to
       outrank the later base `.lead-chairman-given { white-space: nowrap }`. */
    .lead-chairman-card .lead-chairman-given {
        white-space: normal;
    }
    .lead-chairman-body {
        text-align: center;
    }
    .lead-chairman-bio {
        margin: 0 auto;
    }
}

/* =========================================================
   HRH 100M+ / 4-SEGMENT DONUT / HRH FRAME / 3-UP ASSET GRID
   Adjustments for 2026-06 client revisions.
   ========================================================= */

/* "+" sibling next to the count-up number (Aggregate Value figure).
   Sized slightly larger than the number so it reads as a deliberate
   "and counting" mark rather than an after-thought. */
.as-anchor-plus {
    font-family: var(--font-heading-primary);
    font-size: clamp(3rem, 7.5vw, 6.2rem);
    font-weight: 700;
    color: var(--color-accent-gold);
    line-height: 0.9;
    margin-left: 0.08em;
}

/* Secondary metric (land area) beneath the SAR aggregate figure.
   display:flex (not the base inline-flex) forces it onto its own line. */
.as-anchor-figure-sub {
    display: flex;
    justify-content: center;
    margin-top: var(--space-sm);
    gap: 0.3rem;
}

.as-anchor-number-sub {
    font-size: clamp(1.5rem, 3.4vw, 2.8rem);
    color: var(--color-accent-gold);
}

.as-anchor-plus-sub {
    font-size: clamp(1.5rem, 3.4vw, 2.8rem);
}

.as-anchor-unit {
    align-self: center;
    margin-left: 0.25rem;
    font-family: var(--font-body);
    font-size: clamp(0.7rem, 1.3vw, 0.95rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    opacity: 0.75;
}

/* Phones: the 9-digit aggregate figure ("SAR 100,000,000+") is too wide to
   stay at its desktop floor; scale the primary figure down so it never
   forces horizontal scroll (the secondary sqm metric keeps its own sizing). */
@media (max-width: 520px) {
    .as-anchor-currency {
        font-size: 0.82rem;
        letter-spacing: 0.18em;
    }
    .as-anchor-number[data-count-to] {
        font-size: clamp(1.3rem, 6.8vw, 2.1rem);
    }
    .as-anchor-figure:not(.as-anchor-figure-sub) .as-anchor-plus {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
    }
}

/* 4th + 5th donut segments + legend dots */
.as-seg-4 {
    stroke: var(--color-accent-cocoa);
}
.as-dot-4 {
    background: var(--color-accent-cocoa);
}
.as-seg-5 {
    stroke: var(--color-accent-bronze);
}
.as-dot-5 {
    background: var(--color-accent-bronze);
}

/* HRH framed card — matches the cream/gold framing of the other board cards
   but scaled up to host the chairman portrait + name together. */
.lead-chairman-framed {
    background: var(--color-surface-card, rgba(255, 248, 230, 0.55));
    border: 1px solid var(--color-accent-gold-dim, rgba(156, 122, 42, 0.32));
    padding: clamp(1.4rem, 3vw, 2.4rem);
    border-radius: 2px;
    box-shadow: 0 12px 40px rgba(26, 18, 6, 0.05);
}

/* Two-line chairman name with italicised "HRH Prince" prefix */
.lead-chairman-prefix {
    display: block;
    font-family: var(--font-heading-secondary);
    font-size: 0.65em;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--color-accent-gold);
    margin-bottom: 0.35rem;
}
.lead-chairman-prefix em {
    font-style: italic;
}
.lead-chairman-given {
    display: block;
    font-family: var(--font-heading-primary);
    line-height: 1.05;
    white-space: nowrap;
}

/* About: title-only pillars — rendered as architectural columns/stelae.
   Capital (top): Roman numeral crowned by a hairline gold rule.
   Shaft (middle): faint vertical gold fluting, soft cream gradient.
   Plinth (bottom): thicker gold rule with the value title sitting on it.
   Hover deepens the rules and lifts the column. */
.about-pillars-grid.about-pillars-grid-titleonly {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.8rem);
    max-width: 1080px;
}

.about-pillars-grid-titleonly .about-pillar {
    position: relative;
    min-height: clamp(240px, 28vw, 340px);
    padding: clamp(2rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.6rem) clamp(1.6rem, 2.4vw, 2rem);
    background:
        linear-gradient(180deg,
            #FFF8E7 0%,
            #FBEFD0 55%,
            #F4E4BD 100%);
    border: 1px solid rgba(156, 122, 42, 0.28);
    border-top: 1px solid var(--color-accent-gold);
    border-bottom: 3px solid var(--color-accent-gold);
    box-shadow: 0 6px 22px rgba(74, 44, 19, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 300ms ease,
        box-shadow 400ms ease;
}

/* Vertical "flute" line down the centre of the shaft */
.about-pillars-grid-titleonly .about-pillar::before {
    content: '';
    position: absolute;
    top: clamp(3.6rem, 5.2vw, 4.8rem);
    bottom: clamp(3.6rem, 5.2vw, 4.6rem);
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent,
        rgba(156, 122, 42, 0.45) 18%,
        rgba(156, 122, 42, 0.45) 82%,
        transparent);
    transform: translateX(-50%);
    pointer-events: none;
    transition: background 400ms ease;
}

/* Capital crowning hairline beneath the numeral */
.about-pillars-grid-titleonly .about-pillar::after {
    content: '';
    position: absolute;
    top: clamp(2.8rem, 4vw, 3.4rem);
    left: 28%;
    right: 28%;
    height: 1px;
    background: var(--color-accent-gold);
    opacity: 0.55;
    transition: opacity 400ms ease, left 400ms ease, right 400ms ease;
}

.about-pillars-grid-titleonly .about-pillar-num {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.3rem, 1.6vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.4em;
    padding-left: 0.4em; /* balances trailing letter-spacing so numerals centre optically */
    color: var(--color-accent-gold);
    margin: 0;
    line-height: 1;
}

.about-pillars-grid-titleonly .about-pillar-title {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 1.4rem;
    font-family: var(--font-heading-primary);
    font-size: clamp(1.1rem, 1.5vw, 1.45rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    position: relative;
    z-index: 1;
}

/* Override sand-block hover so the architectural treatment owns the state */
.about-pillars-sand .about-pillars-grid-titleonly .about-pillar:hover,
.about-pillars-grid-titleonly .about-pillar:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-gold);
    border-bottom-color: var(--color-accent-gold);
    box-shadow: 0 16px 42px rgba(74, 44, 19, 0.14);
    background:
        linear-gradient(180deg,
            #FFFAEA 0%,
            #FBEFD0 55%,
            #F2DDA8 100%);
}

.about-pillars-grid-titleonly .about-pillar:hover::before {
    background: linear-gradient(180deg,
        transparent,
        rgba(156, 122, 42, 0.75) 18%,
        rgba(156, 122, 42, 0.75) 82%,
        transparent);
}

.about-pillars-grid-titleonly .about-pillar:hover::after {
    opacity: 1;
    left: 18%;
    right: 18%;
}

@media (max-width: 900px) {
    .about-pillars-grid.about-pillars-grid-titleonly {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .about-pillars-grid.about-pillars-grid-titleonly {
        grid-template-columns: 1fr;
    }
    .about-pillars-grid-titleonly .about-pillar {
        min-height: 220px;
    }
}

/* Assets: 3-up grid (was 6-up) — keep cards from stretching across full width */
.as-grid.as-grid-3 {
    /* min(280px,100%) keeps the 280px multi-column rhythm on wide screens
       but never forces a track wider than the container on small phones. */
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

/* Status line on asset cards */
.as-card-status {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin: 0.4rem 0 0;
}
.as-card-status.as-status-active {
    color: var(--color-accent-gold);
}

/* Portfolio partners: 2-up (was 3-up after COLLECTR removed) */
.pf-partners-grid.pf-partners-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 540px;
    margin: 0 auto;
}

/* Asset cards rendered without the image placeholder slot.
   Adds a hairline gold top accent so the card still has a deliberate
   crown instead of looking chopped where the image used to sit. */
.as-card.as-card-no-image {
    border-top: 2px solid var(--color-accent-gold);
}
.as-card.as-card-no-image .as-card-body {
    padding-top: clamp(1.4rem, 2.2vw, 1.8rem);
}

/* Gallery set header (Partnership Signing — SIIN x Dunes Gate) */
.gal-set-header {
    text-align: center;
    margin: 0 auto var(--space-lg);
    max-width: 720px;
}
.gal-set-eyebrow {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    margin: 0 0 var(--space-xs);
}
.gal-set-title {
    font-family: var(--font-heading-primary);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: 0.06em;
}

/* Reportage spread: one large feature on top, two supporting photos
   in a side-by-side row beneath. Reads as a magazine spread.
   Each frame is an <a> opening the full-res image in a new tab. */
.gal-spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.8rem, 1.6vw, 1.4rem);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-sm);
}

.gal-spread-item {
    margin: 0;
}

.gal-spread-feature {
    grid-column: span 2;
}

.gal-spread-frame {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center 28%;
    background-repeat: no-repeat;
    border-radius: 2px;
    border: 1px solid rgba(156, 122, 42, 0.22);
    box-shadow: 0 12px 32px rgba(74, 44, 19, 0.10);
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 400ms ease,
        border-color 300ms ease;
}

.gal-spread-feature .gal-spread-frame {
    aspect-ratio: 16 / 9;
    background-position: center 32%;
}

.gal-spread-frame:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent-gold);
    box-shadow: 0 18px 44px rgba(74, 44, 19, 0.16);
}

.gal-spread-frame:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 4px;
}

@media (max-width: 720px) {
    .gal-spread {
        grid-template-columns: 1fr;
    }
    .gal-spread-feature {
        grid-column: auto;
    }
    .gal-spread-feature .gal-spread-frame {
        aspect-ratio: 16 / 10;
    }
}

/* Gallery lightbox overlay */
.gal-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(26, 18, 6, 0.82);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 300ms ease;
    cursor: pointer;
}

/* The hidden attribute must win over display:flex above, otherwise the
   invisible overlay covers the page and swallows clicks. */
.gal-lightbox[hidden] {
    display: none;
}

.gal-lightbox.is-open {
    opacity: 1;
}

.gal-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.96);
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gal-lightbox.is-open .gal-lightbox-img {
    transform: scale(1);
}

.gal-lightbox-close {
    position: absolute;
    top: clamp(0.8rem, 2vw, 1.6rem);
    right: clamp(0.8rem, 2vw, 1.6rem);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 248, 230, 0.12);
    border: 1px solid rgba(255, 248, 230, 0.3);
    border-radius: 50%;
    color: #FFF8E6;
    cursor: pointer;
    transition: background 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.gal-lightbox-close:hover {
    background: var(--color-accent-gold);
    border-color: var(--color-accent-gold);
    transform: rotate(90deg);
}

.gal-lightbox-close:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .gal-lightbox,
    .gal-lightbox-img,
    .gal-lightbox-close {
        transition: none;
    }
}

/* Cinematic stack (kept for reference / fallback) */
.gallery-quadrant-grid.gal-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3.4rem);
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--space-sm);
}

.gal-stack-item {
    position: relative;
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: clamp(0.8rem, 1.6vw, 1.4rem);
    row-gap: clamp(0.6rem, 1vw, 1rem);
    align-items: end;
}

.gal-stack-index {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    font-family: var(--font-heading-primary);
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.4em;
    color: var(--color-accent-gold);
    padding-bottom: 0.3rem;
    line-height: 1;
}

/* The image frame itself */
.gallery-quadrant-grid.gal-stack .gallery-quadrant.gal-stack-frame {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 2px;
    border: 1px solid rgba(156, 122, 42, 0.22);
    box-shadow: 0 14px 40px rgba(74, 44, 19, 0.10);
    transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 450ms ease,
        border-color 300ms ease;
}

.gallery-quadrant-grid.gal-stack .gallery-quadrant.gal-stack-frame:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-gold);
    box-shadow: 0 22px 56px rgba(74, 44, 19, 0.18);
}

.gal-stack-caption {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--color-accent-gold-dim);
    max-width: 720px;
}

.gal-stack-caption-eyebrow {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
}

.gal-stack-caption-line {
    font-family: var(--font-heading-secondary);
    font-style: italic;
    font-size: clamp(0.95rem, 1.25vw, 1.1rem);
    color: var(--color-text-secondary);
    line-height: 1.55;
}

/* Alternating offset — every other item nudges the index to the
   right of the image instead of the left, giving the scroll a slight
   editorial rhythm without going full-asymmetric. */
.gal-stack-item:nth-child(even) {
    grid-template-columns: 1fr auto;
}
.gal-stack-item:nth-child(even) .gal-stack-index {
    grid-column: 2;
    text-align: right;
    padding-left: 0.4rem;
}
.gal-stack-item:nth-child(even) .gallery-quadrant.gal-stack-frame,
.gal-stack-item:nth-child(even) .gal-stack-caption {
    grid-column: 1;
}

@media (max-width: 720px) {
    .gal-stack-item,
    .gal-stack-item:nth-child(even) {
        grid-template-columns: 1fr;
    }
    .gal-stack-index,
    .gal-stack-item:nth-child(even) .gal-stack-index {
        grid-column: 1;
        grid-row: 1;
        text-align: left;
        padding: 0 0 0.4rem;
    }
    .gallery-quadrant-grid.gal-stack .gallery-quadrant.gal-stack-frame,
    .gal-stack-item:nth-child(even) .gallery-quadrant.gal-stack-frame {
        grid-column: 1;
        grid-row: 2;
        aspect-ratio: 4 / 3;
    }
    .gal-stack-caption,
    .gal-stack-item:nth-child(even) .gal-stack-caption {
        grid-column: 1;
        grid-row: 3;
    }
}

/* =========================================
   COOKIE CONSENT BANNER
   ========================================= */
.consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    /* Override the global `section` padding (8rem) — the inner wrapper owns
       spacing, so the bar hugs its content. */
    padding: 0;
    /* Frosted sand — strongly translucent so page content reads through it;
       the blur keeps text legible despite the low opacity. */
    background-color: rgba(250, 241, 218, 0.45);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--color-accent-gold-dim);
    box-shadow: 0 -6px 24px rgba(26, 18, 6, 0.10);
    transform: translateY(100%);
    transition: transform var(--transition-smooth);
}

/* Older browsers without backdrop-filter get a more opaque fallback so text
   stays legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .consent-banner {
        background-color: rgba(250, 241, 218, 0.95);
    }
}

.consent-banner.is-visible {
    transform: translateY(0);
}

.consent-inner {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0.85rem var(--container-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.consent-text {
    flex: 1 1 32ch;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.consent-link {
    color: var(--color-accent-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.consent-link:hover {
    color: var(--color-accent-bronze);
}

.consent-actions {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.consent-btn {
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.55rem 1.4rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

/* Decline is kept as visually present as Accept — PDPL expects refusal to be
   as easy as consent. */
.consent-decline {
    background-color: transparent;
    color: var(--color-accent-cocoa);
    border: 1px solid var(--color-accent-gold-dim);
}

.consent-decline:hover {
    border-color: var(--color-accent-cocoa);
}

.consent-accept {
    background-color: var(--color-accent-cocoa);
    color: var(--color-bg-elevated);
    border: 1px solid var(--color-accent-cocoa);
}

.consent-accept:hover {
    background-color: var(--color-accent-bronze);
    border-color: var(--color-accent-bronze);
}

.consent-btn:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .consent-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    /* In the column layout the `32ch` flex-basis would otherwise apply to the
       vertical axis and stretch the text box (and the banner) to ~300px tall.
       Reset to content height. */
    .consent-text {
        flex: 0 0 auto;
    }

    .consent-actions {
        width: 100%;
    }

    .consent-btn {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .consent-banner {
        transition: none;
    }
}

/* =========================================
   LEGAL / PRIVACY PROSE
   ========================================= */
.legal-section {
    padding: var(--space-lg) 0 var(--space-xl);
}

.legal-body {
    max-width: 760px;
    margin: 0 auto;
}

.legal-updated {
    font-size: 0.85rem;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-md);
}

.legal-body h2 {
    font-family: var(--font-heading-secondary);
    font-size: 1.5rem;
    color: var(--color-text-primary);
    margin: var(--space-md) 0 var(--space-sm);
}

.legal-body p,
.legal-body li {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-text-secondary);
}

.legal-body p {
    margin-bottom: var(--space-sm);
}

.legal-body ul {
    margin: 0 0 var(--space-sm) 1.25rem;
}

.legal-body li {
    margin-bottom: 0.4rem;
}

.legal-body a {
    color: var(--color-accent-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-manage {
    margin-top: var(--space-md);
}

.legal-manage-btn {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.75rem 1.6rem;
    border-radius: 5px;
    cursor: pointer;
    background-color: var(--color-accent-cocoa);
    color: var(--color-bg-elevated);
    border: 1px solid var(--color-accent-cocoa);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.legal-manage-btn:hover {
    background-color: var(--color-accent-bronze);
    border-color: var(--color-accent-bronze);
}

.legal-manage-btn:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 2px;
}