/**
 * home.css — page chrome (navbar, tab bar, footer) + homepage sections.
 * Mobile-first: base rules are the phone layout, media queries scale up.
 */

/* =========================================================
   SKIP LINK
   ========================================================= */
.skip-link {
    position: absolute;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    z-index: 200;
    padding: 0.7rem 1.2rem;
    background: var(--brand-accent);
    color: var(--brand-accent-ink);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus { top: 0; color: var(--brand-accent-ink); }

/* =========================================================
   FIRST-LOAD INTRO
   ========================================================= */
html.intro-pending {
    overflow: hidden;
}

html.intro-pending body {
    overflow: hidden;
}

.site-intro {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 400;
    place-items: center;
    pointer-events: auto;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 44%),
        linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #131316 0%, #0a0a0c 100%);
    transition: opacity 0.7s var(--ease-out), visibility 0.7s var(--ease-out);
}

html.intro-pending .site-intro {
    display: grid;
}

.site-intro.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-intro__stage {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--space-6);
    perspective: 1400px;
}

.site-intro__emblem {
    --intro-size: min(72vw, 268px);
    position: relative;
    width: var(--intro-size);
    height: var(--intro-size);
    transform-style: preserve-3d;
    animation: intro-emblem 3.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-intro__glow {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    filter: blur(18px);
    animation: intro-pulse 2.4s ease-in-out infinite;
}

.site-intro__rings {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    overflow: visible;
    animation: intro-spin 20s linear infinite;
}

.site-intro__arc {
    fill: none;
    stroke-linecap: round;
}

.site-intro__arc--outer {
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 0.9;
    stroke-dasharray: 12 14;
}

.site-intro__arc--mid {
    stroke: rgba(255, 255, 255, 0.75);
    stroke-width: 1.4;
    stroke-dasharray: 86 430;
    animation: intro-dash 3.2s linear infinite;
}

.site-intro__arc--inner {
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 0.7;
    stroke-dasharray: 48 390;
    animation: intro-dash-rev 4.6s linear infinite;
}

.site-intro__orbit {
    position: absolute;
    inset: -6%;
    animation: intro-spin 6s linear infinite;
}

.site-intro__orbit--slow { animation-duration: 11s; animation-direction: reverse; }

.site-intro__spark {
    position: absolute;
    left: 50%;
    top: 0;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.95), 0 0 22px rgba(255, 255, 255, 0.55);
}

.site-intro__spark--soft {
    top: auto;
    bottom: 12%;
    width: 5px;
    height: 5px;
    background: var(--brand-accent-bright);
    box-shadow: 0 0 8px var(--brand-accent-glow);
}

.site-intro__card {
    position: absolute;
    inset: 14%;
    transform-style: preserve-3d;
}

.site-intro__face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: #131316;
    border: 2px solid rgba(255, 255, 255, 0.45);
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.12),
        0 18px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.site-intro__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
}

.site-intro__face--back {
    display: grid;
    place-items: center;
    transform: rotateY(180deg);
    background: linear-gradient(145deg, #1a1b1e, #0d0d0f);
}

.site-intro__face--front::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 48%, transparent 62%);
    transform: translateX(-120%);
    animation: intro-shine 1.1s var(--ease-out) 1.15s both;
}

.site-intro__monogram {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 8vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-bright));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.site-intro__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--page-text-soft);
    animation: intro-name 3.6s var(--ease-out) both;
}

@keyframes intro-emblem {
    0% {
        transform: translate3d(58vw, 0, 0) rotateY(92deg) scale(0.88);
        opacity: 0;
    }
    26% {
        transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(8deg) scale(1);
        opacity: 1;
    }
    32% {
        transform: rotateY(0deg) rotateX(8deg) scale(1);
    }
    68% {
        transform: rotateY(-360deg) rotateX(8deg) scale(1);
        opacity: 1;
    }
    74% {
        transform: rotateY(-360deg) rotateX(8deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate3d(-58vw, 0, 0) rotateY(-450deg) scale(0.9);
        opacity: 0;
    }
}

@keyframes intro-name {
    0%, 22% {
        opacity: 0;
        transform: translateY(12px);
    }
    34%, 72% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
        transform: translateY(-8px);
    }
}

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

@keyframes intro-dash {
    to { stroke-dashoffset: -516; }
}

@keyframes intro-dash-rev {
    to { stroke-dashoffset: 438; }
}

@keyframes intro-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes intro-shine {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .site-intro,
    html.intro-pending .site-intro { display: none; }
}

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-line);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    transition: background-color var(--dur-med) var(--ease-out),
                border-color var(--dur-med) var(--ease-out),
                backdrop-filter var(--dur-med) var(--ease-out);
}

.navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--nav-wash);
}

.navbar.is-stuck {
    background: var(--nav-bg-stuck);
    border-bottom-color: var(--nav-line);
}

/* Mobile: no bar chrome, just the theme toggle floating in the corner —
   navigation lives in the bottom tab bar instead. Clicks pass through the
   now-invisible bar except on the toggle itself. */
@media (max-width: 991.98px) {
    .navbar {
        background: none;
        border-bottom-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        pointer-events: none;
    }
    .navbar::before { display: none; }
    .navbar.is-stuck { background: none; border-bottom-color: transparent; }
    .header-actions { pointer-events: auto; }
}

.nav-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
}

.logo-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--brand-accent);
    color: var(--brand-accent-ink);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 2px var(--brand-accent-glow);
}

.logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 16%;
}

/* Hidden on mobile, where the bar itself has no chrome (see the
   max-width:991.98px block above) — only the theme toggle floats there. */
.logo { display: none; }

.logo-text {
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--page-muted);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.logo-name {
    display: block;
    white-space: nowrap;
}

.logo-accent {
    color: var(--page-text);
    font-weight: 700;
}

.logo-tagline {
    display: block;
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--page-faint);
}

.nav-links { display: none; }

.nav-link {
    position: relative;
    padding: 0.4rem 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--page-muted);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--brand-accent-bright);
    transition: width var(--dur-med) var(--ease-spring);
}

.nav-link:hover,
.nav-link.is-active { color: var(--page-text); }
.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; }

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.theme-toggle {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    border-radius: 11px;
    border: 1px solid var(--page-border-strong);
    background: var(--page-surface);
    color: var(--page-text);
    cursor: pointer;
    flex-shrink: 0;
}

.theme-toggle:hover {
    border-color: var(--brand-accent-border);
    color: var(--brand-accent-bright);
}

.theme-toggle__moon { display: none; }

html[data-theme="light"] .theme-toggle__sun { display: none; }
html[data-theme="light"] .theme-toggle__moon { display: block; }

.nav-cta { display: none; }

.nav-progress {
    display: none;
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-bright));
}

/* =========================================================
   BOTTOM TAB BAR (mobile only)
   ========================================================= */
.bottom-tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    overflow: visible;
    background: var(--page-nav);
    backdrop-filter: var(--page-glass-blur);
    -webkit-backdrop-filter: var(--page-glass-blur);
}

.bottom-tab-link,
.bottom-tab-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--page-faint);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.bottom-tab-link svg { transition: transform var(--dur-fast) var(--ease-spring); }

.bottom-tab-link.is-active,
.bottom-tab-more.is-active {
    color: var(--brand-accent-bright);
}

.bottom-tab-link.is-active svg { transform: translateY(-2px); }

.bottom-tab-more__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: -18px;
    border-radius: 50%;
    color: var(--brand-accent-ink);
    background: var(--brand-accent);
    box-shadow: 0 0 0 5px var(--page-nav);
    transition: transform var(--dur-med) var(--ease-spring),
                box-shadow var(--dur-med) var(--ease-out);
}

.bottom-tab-more__icon svg {
    display: block;
    transition: transform var(--dur-med) var(--ease-spring);
}

.bottom-tab-more[aria-expanded="true"] .bottom-tab-more__icon {
    box-shadow: 0 0 0 5px var(--page-nav);
}

.bottom-tab-more[aria-expanded="true"] .bottom-tab-more__icon svg {
    transform: rotate(45deg);
}

.bottom-tab-more.is-active .bottom-tab-more__icon {
    box-shadow: 0 0 0 5px var(--page-nav);
}

/* Extra destinations opened from the center + button */
.more-sheet {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.more-sheet[hidden] { display: none; }

.more-sheet__backdrop {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: var(--page-overlay);
    cursor: pointer;
}

.more-sheet__panel {
    position: absolute;
    left: var(--shell-pad);
    right: var(--shell-pad);
    bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 14px);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    background: var(--sheet-bg);
    border: 1px solid var(--page-border-strong);
    box-shadow: var(--page-glass-shadow);
    backdrop-filter: var(--page-glass-blur);
    -webkit-backdrop-filter: var(--page-glass-blur);
}

.more-sheet__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.more-sheet__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 104px;
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-lg);
    border: 1px solid var(--page-border);
    background: var(--page-surface);
    color: var(--page-text-soft);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    transition: transform var(--dur-fast) var(--ease-spring),
                border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.more-sheet__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    color: var(--brand-accent-bright);
    background: var(--brand-accent-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.more-sheet__item:hover,
.more-sheet__item.is-active {
    color: var(--page-text);
    background: var(--page-surface-strong);
    border-color: var(--brand-accent-border);
    transform: translateY(-2px);
}

.more-sheet__item.is-active .more-sheet__icon {
    color: var(--brand-accent-ink);
    background: var(--brand-accent);
    box-shadow: none;
}

body.more-open { overflow: hidden; }

/* =========================================================
   MAIN
   ========================================================= */
.page-main {
    padding-top: var(--nav-height);
    padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
}

/* =========================================================
   01 — HERO
   ========================================================= */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    padding-block: clamp(2.5rem, 8vw, 5rem);
    overflow: hidden;
    isolation: isolate;
    background: var(--hero-bg);
}

/* No bar on mobile means no reserved top offset either — the toggle floats
   over the hero instead of over a blank strip the same color as the old
   bar. Placed after the base .page-main/.hero rules so it actually wins
   the cascade (equal specificity, same source order, so declaration order
   is what decides — an earlier media-query block here would have lost). */
@media (max-width: 991.98px) {
    .page-main { padding-top: 0; }
    .hero { min-height: calc(100svh - var(--tabbar-height)); }
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 8%, var(--brand-accent-soft) 50%, transparent 92%);
}

.hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    gap: var(--space-9);
    align-items: center;
}

.hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero__eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--page-muted);
    margin-bottom: var(--space-4);
}

.hero__title {
    font-size: var(--fs-hero);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--page-muted);
    margin-bottom: var(--space-5);
}

/* Monochrome emphasis: no accent hue to lean on, so the highlighted words
   step up in weight and full-strength ink instead of changing color. */
.hero__title span {
    color: var(--page-text);
    font-weight: 700;
}

.hero__text {
    max-width: 46ch;
    color: var(--page-muted);
    margin-bottom: var(--space-6);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-7);
}

.hero__actions .ui-btn { flex: 0 1 auto; }

.ui-btn__play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-accent);
    color: var(--brand-accent-ink);
    flex-shrink: 0;
}

.hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--page-border);
}

.hero__stats li {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-right: var(--space-4);
    border-right: 1px solid var(--page-border);
}

.hero__stats li:last-child {
    padding-right: 0;
    border-right: 0;
}

.hero__stats-value {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1vw + 0.9rem, 1.5rem);
    font-weight: 700;
    color: var(--page-text);
    line-height: 1.1;
}

.hero__stats-label {
    font-size: var(--fs-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--page-faint);
}

/* ---- Hero media: photo + floating note + floating goal card ---- */
.hero__media {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: 420px;
    margin-inline: auto;
}

.hero__photo {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--page-surface);
    border: 1px solid var(--page-border);
    box-shadow: var(--shadow-md);
}

.hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
}

/* Two lines, clear of the photo: quote on one, attribution on the next.
   Sitting on the photo made the light grey text unreadable. On mobile it
   stays in flow (order:-1 puts it above the photo) — floated there it
   landed on top of the stats row instead. */
.hero__note {
    order: -1;
    margin-bottom: var(--space-3);
    text-align: right;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--page-text-soft);
}

.hero__note p {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
}

.hero__note cite {
    display: block;
    margin-top: 0.15rem;
    font-style: normal;
    font-size: var(--fs-small);
    color: var(--page-muted);
}

.hero__goal-card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: -2.5rem 0 0 calc(var(--space-5) * -1);
    max-width: min(280px, 88%);
    background: var(--page-surface);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-4) var(--space-5);
}

.hero__goal-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--page-text);
    line-height: 1.5;
}

.hero__goal-card a {
    flex-shrink: 0;
    color: var(--page-faint);
}

/* ---- Featured ventures strip ---- */
.featured-ventures {
    border-top: 1px solid var(--page-border);
    border-bottom: 1px solid var(--page-border);
    background: var(--page-surface);
    padding-block: var(--space-5);
}

.featured-ventures__row {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.featured-ventures__label {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--page-faint);
    margin: 0;
}

/* Mobile: the photo is centred in a single column, so the quote above it and
   the goal card below it centre with it instead of hugging one edge. The
   strip label is dropped — the logos speak for themselves at this width. */
@media (max-width: 991.98px) {
    .hero__note { text-align: center; }

    .hero__goal-card {
        justify-content: center;
        margin: -2.5rem auto 0;
        text-align: center;
    }

    .featured-ventures__label { display: none; }
}

@media (min-width: 640px) {
    .hero__media { max-width: 480px; }
}

@media (min-width: 992px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
        gap: var(--space-10);
        align-items: stretch;
    }

    /* The media column is bounded by the text column beside it: the photo
       flexes into whatever height is left once the floating card is placed,
       so photo and card finish level with the stats row rather than
       overhanging the hero. Capped width too — an uncapped photo grows with
       the fr column on wide screens and dwarfs the text. */
    .hero__media {
        max-width: 440px;
        margin-left: auto;
        margin-top: var(--space-8);
    }

    .hero__photo {
        aspect-ratio: auto;
        flex: 1;
        min-height: 0;
    }

    .hero__note {
        position: absolute;
        bottom: calc(100% + 0.6rem);
        right: 0;
        width: max-content;
        max-width: 100%;
        margin-bottom: 0;
    }

    .hero__note p { white-space: nowrap; }
}

/* Logo strip auto-slides; edges fade instead of cutting hard. */
.brand-marquee {
    flex: 1 1 280px;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.brand-pills--marquee {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    animation: brand-marquee-scroll 26s linear infinite;
}

.brand-marquee:hover .brand-pills--marquee,
.brand-marquee:focus-within .brand-pills--marquee {
    animation-play-state: paused;
}

@keyframes brand-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .brand-pills--marquee { animation: none; }
}

.brand-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.brand-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--page-border);
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: var(--page-glass-blur);
    -webkit-backdrop-filter: var(--page-glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform var(--dur-med) var(--ease-spring),
                border-color var(--dur-med) var(--ease-out),
                background-color var(--dur-med) var(--ease-out);
}

.brand-pill:hover {
    transform: translateY(-3px);
    border-color: var(--brand-accent-border);
    background: var(--brand-accent-soft);
}

.brand-pill img {
    height: 30px;
    width: auto;
    object-fit: contain;
}

/* Some venture logos are white/light artwork with no dark text of their own —
   they need a fixed dark backdrop to stay legible in the light theme, where
   the pill itself is otherwise a near-white glass surface. */
.brand-pill--on-dark {
    background: var(--brand-navy);
    border-color: rgba(255, 255, 255, 0.08);
}

.brand-pill--on-dark:hover {
    background: var(--brand-navy-800);
    border-color: rgba(255, 255, 255, 0.16);
}

.brand-pill__text {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--page-text);
    white-space: nowrap;
}

/* =========================================================
   02 — ABOUT
   ========================================================= */
.about__content {
    max-width: 46rem;
    margin-inline: auto;
}

.about__lead {
    font-size: var(--fs-lead);
    color: var(--page-text-soft);
}

/* =========================================================
   SPLIT (narrative sections 03–06, 09–11)
   ========================================================= */
.split {
    display: grid;
    gap: var(--space-7);
    align-items: center;
}

.split__body p { color: var(--page-muted); }

.split__body .split__lead {
    font-size: var(--fs-lead);
    color: var(--page-text-soft);
}

/* ---- Mindset: thought → idea → vision → action, read as one ladder ----
   Numbered nodes on a single rail make the four lines a progression rather
   than a bullet list; the last step is inverted because it is the payoff. */
.split__lead strong {
    color: var(--page-text);
    font-weight: 700;
}

.mindset-steps {
    position: relative;
    list-style: none;
    margin: var(--space-6) 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

/* The rail runs node-centre to node-centre, behind the numbers. */
.mindset-steps::before {
    content: "";
    position: absolute;
    top: 1.4rem;
    bottom: 1.4rem;
    left: calc(var(--space-4) + 17px);
    width: 1px;
    background: linear-gradient(180deg, var(--page-border-strong), var(--page-text) 100%);
    opacity: 0.5;
}

.mindset-steps li {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    font-family: var(--font-display);
    font-size: clamp(1.02rem, 0.9vw + 0.85rem, 1.3rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--page-text);
    transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}

.mindset-steps li:not(.mindset-steps__key):hover {
    background: var(--page-surface);
    border-color: var(--page-border);
}

.mindset-steps__num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--page-surface);
    border: 1px solid var(--page-border-strong);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--page-muted);
}

.mindset-steps .mindset-steps__key {
    margin-top: var(--space-2);
    background: var(--brand-accent);
    color: var(--brand-accent-ink);
    box-shadow: var(--shadow-md);
}

.mindset-steps__key .mindset-steps__num {
    background: var(--brand-accent-ink);
    border-color: transparent;
    color: var(--brand-accent);
}

.split__body .mindset-note {
    margin: 0;
    padding-left: var(--space-4);
    border-left: 2px solid var(--page-border-strong);
    font-size: var(--fs-small);
    color: var(--page-faint);
}

/* Quote card: lighter than the section default so it sits on the artwork
   instead of competing with the headline beside it. */
.split--mindset .split__quote-card {
    max-width: min(340px, 86%);
    padding: var(--space-6);
}

.split--mindset .split__quote-text {
    font-size: clamp(1rem, 0.4vw + 0.9rem, 1.12rem);
    font-weight: 500;
    font-style: normal;
    line-height: 1.55;
    color: var(--page-text-soft);
}

.split__quote-cite {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-style: normal;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--page-faint);
}

.split__quote-cite::before {
    content: "";
    width: 18px;
    height: 1px;
    background: currentColor;
}

/* ---- About traits: icon + title + line, 2/4-up ---- */
.about__traits {
    list-style: none;
    margin: var(--space-7) 0 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--page-border);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
}

.about__traits li {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.about__traits-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--page-surface-strong);
    border: 1px solid var(--page-border);
    color: var(--page-text);
    font-size: 0.8rem;
}

.about__traits-title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--page-text);
    font-size: 0.95rem;
}

.about__traits-text {
    font-size: var(--fs-small);
    color: var(--page-muted);
}

@media (min-width: 768px) {
    .about__traits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Split aside — section image with the quote tucked underneath */
.split__aside {
    display: grid;
    align-content: start;
}

/**
 * Section artwork is treated, not dropped in raw: desaturated and tinted into
 * the brand navy so it reads as texture behind the words. Untouched neon stock
 * art is the loudest "generated page" signal there is.
 */
.split__media {
    position: relative;
    margin: 0;
    border: 1px solid var(--page-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--page-surface);
    aspect-ratio: 5 / 4;
    box-shadow: var(--shadow-sm);
}

.split__media img {
    filter: saturate(0.1) brightness(0.72) contrast(1.08);
}

.split__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 45%, rgba(6, 6, 8, 0.75) 100%),
        linear-gradient(120deg, rgba(19, 19, 22, 0.5), rgba(255, 255, 255, 0.06));
    mix-blend-mode: normal;
}

.split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html[data-theme="light"] .split__media img {
    filter: saturate(0.1) brightness(0.98) contrast(1.05);
}

html[data-theme="light"] .split__media::after {
    background:
        linear-gradient(180deg, transparent 52%, rgba(247, 247, 248, 0.72) 100%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.18), rgba(16, 17, 19, 0.05));
}

/* The quote floats as a card over the photo's lower corner, not as a caption
   underneath it — pulled up with a negative margin so it visually overlaps. */
.split__quote-card {
    position: relative;
    z-index: 2;
    margin: -2.75rem clamp(0px, 4vw, 1.25rem) 0 auto;
    max-width: min(320px, 84%);
    background: var(--page-surface);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-5) var(--space-6);
}

.split__quote-text {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-style: italic;
    font-size: var(--fs-lead);
    line-height: 1.4;
    color: var(--page-text);
}

/* Trust ladder */
.trust-ladder {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.trust-ladder li {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-lg);
    background: var(--page-surface);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--page-text);
}

.trust-ladder li:nth-child(2) { margin-left: clamp(0px, 4vw, 34px); }
.trust-ladder li:nth-child(3) { margin-left: clamp(0px, 8vw, 68px); }

/* =========================================================
   07 — VENTURES
   ========================================================= */
.ventures__grid {
    display: grid;
    gap: var(--space-4);
}

.venture-card {
    display: flex;
    flex-direction: column;
}

/* Brand mark panel. Every card gets the same neutral panel; the two logos
   that are drawn in white sit on their own dark chip inside it, so the row
   doesn't read as two dark cards and two light ones. */
.venture-card__visual {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--page-surface-strong);
    border: 1px solid var(--page-border);
    overflow: hidden;
}

.venture-card__visual img {
    max-width: 68%;
    max-height: 52%;
    object-fit: contain;
}

.venture-card__visual--on-dark img {
    max-width: 74%;
    max-height: 62%;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--brand-navy);
}

.venture-card__visual-initial {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--page-faint);
}

.venture-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.venture-card__name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--page-text);
    margin: 0;
}

.venture-card__owned {
    flex-shrink: 0;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--page-surface-strong);
    border: 1px solid var(--page-border);
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--page-muted);
}

.venture-card__kicker {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--page-faint);
}

.venture-card__text {
    margin: 0 0 var(--space-5);
    font-size: var(--fs-small);
    color: var(--page-muted);
}

.venture-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--page-border);
}

.venture-card__role {
    font-size: var(--fs-small);
    color: var(--page-faint);
}

.venture-card__link {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Phones: four full-height cards stacked made the section four screens
   long. They become a swipe row instead — edge to edge, snapping, with the
   next card peeking in so it's obvious there's more — and each card is
   tightened so it fits on one screen. */
@media (max-width: 639.98px) {
    .ventures__grid {
        display: flex;
        gap: var(--space-3);
        margin-inline: calc(var(--shell-pad) * -1);
        padding: var(--space-2) var(--shell-pad) var(--space-4);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--shell-pad);
        scrollbar-width: none;
    }

    .ventures__grid::-webkit-scrollbar { display: none; }

    .venture-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
        padding: var(--space-4);
    }

    .venture-card__visual {
        aspect-ratio: auto;
        height: 104px;
        margin-bottom: var(--space-4);
    }

    .venture-card__visual img { max-height: 58%; }
    .venture-card__visual--on-dark img { max-height: 70%; }

    .venture-card__name { font-size: 1.05rem; }
    .venture-card__kicker { margin-bottom: var(--space-2); }
    .venture-card__text { margin-bottom: var(--space-4); }
    .venture-card__foot { padding-top: var(--space-3); }
}

/* =========================================================
   12 + 15 — TIMELINE
   ========================================================= */
.timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--space-7);
}

.timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--page-border-strong);
}

.timeline__item {
    position: relative;
    padding-bottom: var(--space-7);
}

.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
    content: "";
    position: absolute;
    left: calc(var(--space-7) * -1);
    top: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--page-bg);
    border: 3px solid var(--brand-accent);
    box-shadow: 0 0 0 5px var(--brand-accent-glow);
}

.timeline__year {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-accent-bright);
    margin-bottom: var(--space-2);
}

.timeline__title {
    font-size: var(--fs-h3);
    margin-bottom: var(--space-2);
}

.timeline__text {
    color: var(--page-muted);
    margin: 0;
}

/* Then / Today / Next columns */
.phases {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.phase__title {
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--brand-accent-bright);
    margin-bottom: var(--space-3);
}

.phase ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    color: var(--page-muted);
}

.phase li { padding-left: var(--space-4); position: relative; }

.phase li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-accent);
}

/* =========================================================
   13 — COUNTRIES
   ========================================================= */
.countries {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    margin: 0 0 var(--space-7);
    padding: 0;
}

/* A ruled list reads like a real record of travel; pill chips read as filler. */
.countries {
    display: block;
    border-top: 1px solid var(--page-border);
}

.country-chip {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--page-border);
    font-weight: 500;
    color: var(--page-text);
}

.country-chip {
    align-items: center;
}

.flag {
    flex-shrink: 0;
    width: 24px;
    height: 16px;
    display: block;
    border-radius: 2px;
    /* A hairline keeps white-edged flags from bleeding into the dark page. */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* =========================================================
   14 — PHILOSOPHY
   ========================================================= */
.philosophy__grid {
    display: grid;
    gap: var(--space-4);
}

.philosophy-card__no {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--page-border-strong);
    margin-bottom: var(--space-3);
    transition: color var(--dur-med) var(--ease-out);
}

.philosophy-card:hover .philosophy-card__no { color: var(--brand-accent-bright); }

/* =========================================================
   16 — GALLERY
   ========================================================= */
.gallery__filters {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-5);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.gallery__filters::-webkit-scrollbar { display: none; }

.gallery__filter {
    flex-shrink: 0;
    padding: 0.5rem 1.05rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--page-border);
    background: var(--page-surface);
    color: var(--page-muted);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--dur-fast) var(--ease-out);
}

.gallery__filter.is-active,
.gallery__filter:hover {
    color: var(--page-text);
    border-color: var(--brand-accent-border);
    background: var(--brand-accent-soft);
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.gallery__item {
    position: relative;
    display: block;
    padding: 0;
    border: 1px solid var(--page-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--page-surface);
    aspect-ratio: 1;
    cursor: zoom-in;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-fast) var(--ease-out);
}

.gallery__item:hover { box-shadow: var(--shadow-md); }

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-spring);
}

.gallery__item:hover img { transform: scale(1.06); }

.gallery__item[hidden] { display: none; }

/* Placeholder when no images have been added yet */
.gallery__empty {
    display: grid;
    gap: var(--space-4);
}

.gallery__empty-card {
    padding: var(--space-6);
    border: 1px dashed var(--page-border-strong);
    border-radius: var(--radius-lg);
    background: var(--page-surface);
}

.gallery__empty-card h3 { font-size: 1.05rem; margin-bottom: var(--space-2); }
.gallery__empty-card p { color: var(--page-faint); font-size: var(--fs-small); margin: 0; }

/* Lightbox */
/* A closed <dialog> must stay hidden — only style the open state, or the
   overlay covers the whole page and swallows every section below it. */
.lightbox {
    display: none;
}

.lightbox[open] {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    background: var(--page-overlay-strong);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
}

.lightbox::backdrop { background: var(--page-overlay-strong); }

.lightbox img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: var(--radius-lg);
    object-fit: contain;
}

.lightbox__close {
    position: absolute;
    top: max(var(--space-4), env(safe-area-inset-top));
    right: var(--space-4);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--page-border-strong);
    background: var(--page-surface-strong);
    color: var(--page-text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox__caption {
    margin-top: var(--space-4);
    text-align: center;
    color: var(--page-muted);
    font-size: var(--fs-small);
}

/* =========================================================
   SOCIAL ICONS (contact block + footer)
   ========================================================= */
.social-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.social-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    background: var(--page-surface);
    color: var(--page-muted);
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.social-icon:hover,
.social-icon:focus-visible {
    color: var(--page-text);
    border-color: var(--brand-accent-border);
    background: var(--brand-accent-soft);
}

/* Contact block */
.contact__social {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--page-border);
}

.contact__social .social-icons { margin-top: var(--space-3); }

/* =========================================================
   18 — VISION CTA
   ========================================================= */
.vision__goal {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-7);
    list-style: none;
    padding: 0;
}

.vision__goal li {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw + 0.9rem, 2.2rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--page-text);
}

.vision__goal li:nth-child(even) { color: var(--page-muted); }

/* =========================================================
   CTA BAND — always dark, independent of the light/dark toggle
   ========================================================= */
.cta-band {
    background: var(--brand-page-dark);
    padding-block: var(--space-section);
    overflow: hidden;
}

.cta-band__inner {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

.cta-band__eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--brand-faint);
    margin-bottom: var(--space-4);
}

.cta-band__title {
    font-size: var(--fs-h1);
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--space-4);
}

.cta-band__text {
    color: var(--brand-faint);
    max-width: 46ch;
    margin-bottom: var(--space-6);
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.cta-band__media {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 380px;
    margin-inline: auto;
}

.cta-band__photo {
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-band__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
}

.cta-band__quote {
    position: relative;
    z-index: 2;
    margin: -2.5rem 0 0 calc(var(--space-5) * -1);
    max-width: min(300px, 88%);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
}

.cta-band__quote p {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-style: italic;
    color: #fff;
    font-size: var(--fs-small);
    line-height: 1.5;
}

.cta-band__quote cite {
    display: block;
    margin-top: var(--space-2);
    font-style: normal;
    font-size: 0.7rem;
    color: var(--brand-faint);
}

@media (min-width: 992px) {
    .cta-band__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
        gap: var(--space-10);
        align-items: stretch;
    }

    /* Capped like the hero photo — left uncapped it grows with the fr
       column on wide screens and towers over the text beside it. The
       photo then flexes so photo + quote finish level with the text. */
    .cta-band__media { max-width: 340px; margin-inline: 0 0 0 auto; }

    .cta-band__photo {
        aspect-ratio: auto;
        flex: 1;
        min-height: 320px;
    }
}

/* =========================================================
   19 — CONTACT
   ========================================================= */
.contact__grid {
    display: grid;
    gap: var(--space-7);
}

.contact__methods {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
    list-style: none;
    padding: 0;
}

.contact__method {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-lg);
    background: var(--page-surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.contact__method:hover {
    border-color: var(--page-border-strong);
    box-shadow: var(--shadow-md);
}

.contact__method-label {
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--page-faint);
    display: block;
}

.contact__method-value {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--page-text);
    word-break: break-word;
}

.contact__form {
    padding: var(--space-6);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-lg);
    background: var(--page-surface);
    box-shadow: var(--shadow-sm);
}

.form-row { display: grid; gap: var(--space-4); }

/* =========================================================
   20 — FOOTER
   ========================================================= */
/**
 * Hidden on mobile: the bottom tab bar already carries navigation there, and
 * the social links live in the contact block, so the footer only repeated
 * itself above a fixed bar. It comes back with the desktop chrome at 992px.
 */
.site-footer {
    display: none;
    position: relative;
    padding-block: var(--space-6) var(--space-5);
    background: var(--footer-bg);
    border-top: 1px solid var(--nav-line);
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--nav-wash);
}

.site-footer__bar,
.site-footer__bottom {
    position: relative;
    z-index: 1;
}

.site-footer__bar {
    display: grid;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
}

.site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--page-text);
}

.site-footer__brand:hover { color: var(--page-text); }

.site-footer__id {
    display: grid;
    gap: 0.12rem;
}

.site-footer__roles {
    color: var(--page-faint);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.site-footer__creed {
    margin: 0;
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.5;
    color: var(--page-muted);
}

.site-footer__socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.site-footer__socials .social-icon {
    width: 36px;
    height: 36px;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--nav-line);
    font-size: var(--fs-small);
    color: var(--page-faint);
}

.site-footer__bottom p { margin: 0; }

.site-footer__top-link {
    font-weight: 600;
    color: var(--page-muted);
}

.site-footer__top-link:hover { color: var(--brand-accent-bright); }

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */
@media (min-width: 640px) {
    .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ventures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .philosophy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   RESPONSIVE — DESKTOP
   ========================================================= */
@media (min-width: 992px) {
    .logo { display: inline-flex; align-items: center; gap: var(--space-3); }

    /* Absolute + translate keeps the links centered on the bar itself,
       independent of how wide the logo or actions cluster is on either
       side — an equal-fr grid column would fight that instead. */
    .nav-links {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .header-actions { margin-left: auto; }

    .nav-cta {
        display: inline-flex;
        padding: 0.68rem 1.2rem;
        font-size: 0.88rem;
    }
    .nav-progress { display: block; }
    .bottom-tab-bar,
    .more-sheet { display: none !important; }
    .site-footer { display: block; }
    .page-main { padding-bottom: 0; }
    body.more-open { overflow: unset; }

    .hero { min-height: calc(100svh - var(--nav-height)); }

    .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); }
    .split--reverse .split__body { order: 2; }

    .ventures__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
    .philosophy__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .contact__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-10); align-items: start; }

    .site-footer__bar {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
        align-items: center;
        gap: var(--space-6);
    }

    .site-footer__creed { text-align: center; }
    .site-footer__socials { justify-content: flex-end; }

    /* Alternating timeline on wide screens */
    /**
     * Alternating timeline. Every entry gets its own grid row, so entries can
     * never overlap however long their text runs — the previous rule pulled
     * even entries up by a fixed amount, which collided the moment an entry
     * grew past that height.
     *
     * column-gap is 0 so the column edge IS the rail at 50%; each dot is
     * offset by half its own width to straddle it. Breathing room comes from
     * the items' side padding instead of the gap.
     */
    .timeline--split {
        padding-left: 0;
        /* Block flow, not grid: grid packs an odd/even pair into one row, which
           puts two entries side by side and breaks the chronology. In block
           flow each entry takes its own line and simply sits on one side. */
        display: block;
    }

    .timeline--split::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .timeline--split .timeline__item {
        width: 50%;
        text-align: right;
        padding: 0 var(--space-8) var(--space-8) 0;
    }

    .timeline--split .timeline__item:nth-child(even) {
        margin-left: 50%;
        text-align: left;
        padding: 0 0 var(--space-8) var(--space-8);
    }

    .timeline--split .timeline__item::before {
        left: auto;
        right: -8px;
    }

    .timeline--split .timeline__item:nth-child(even)::before {
        right: auto;
        left: -8px;
    }

    /* Hold a readable measure now that entries run the full half-width. */
    .timeline--split .timeline__text {
        max-width: 46ch;
        margin-left: auto;
    }

    .timeline--split .timeline__item:nth-child(even) .timeline__text {
        margin-left: 0;
        margin-right: auto;
    }
}

@media (min-width: 1200px) {
    .ventures__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
}