/* ===========================================================================
   Markato — shared stylesheet
   Consolidated from the original per-page <style> blocks.
   =========================================================================== */

/* --- Motion tokens ---------------------------------------------------------
   Three durations and one signature easing. Every transition and keyframe in
   this file maps to one of these so the site has a single motion language:
     micro      — hovers, colour and icon shifts
     standard   — reveals, panel and card movement
     expressive — hero-scale entrances
   Brand accents live here too so one-off inline colours can be retired. */
:root {
    --motion-micro: 200ms;
    --motion-standard: 500ms;
    --motion-expressive: 900ms;
    --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);

    --plum: #4f1628;
    --plum-soft: #7c2d3e;
    --ivory: #faf8f5;
}

/* Ivory page background (matches the Editorial B2B design token) */
html {
    overflow-x: clip;
}
body {
    overflow-x: clip;
    background-color: #faf8f5;
}

/* --- Material Symbols icon defaults ---------------------------------------
   The original pages used slightly different weights and two different "fill"
   conventions (.fill and [data-weight="fill"]). Both are supported here. */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.fill,
.material-symbols-outlined[data-weight="fill"] {
    font-variation-settings: 'FILL' 1;
}

/* --- Elevation & surface treatments --------------------------------------- */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.ambient-shadow {
    box-shadow: 0 10px 30px rgba(107, 44, 62, 0.08);
}
.custom-shadow {
    box-shadow: 0 10px 40px -10px rgba(107, 44, 62, 0.08);
}

/* Bento cards (Solutions page) */
.bento-card {
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(133, 115, 118, 0.2); /* soft taupe */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.bento-card:hover {
    box-shadow: 0 10px 30px -10px rgba(107, 44, 62, 0.12); /* ambient plum */
    transform: translateY(-2px);
}

/* Remove default focus rings on the Partner form inputs */
input:focus,
select:focus,
textarea:focus {
    box-shadow: none !important;
}

/* --- Scroll-reveal animation (Homepage) ----------------------------------- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(4px);
    transition: opacity var(--motion-expressive) var(--ease-brand),
                transform var(--motion-expressive) var(--ease-brand),
                filter var(--motion-expressive) ease;
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
/* After the reveal settles, switch to fast transitions for hover interactions.
   Must stay after any rule that also targets revealed elements so hover speed
   wins. Sections revealed once per session need no rule of their own: the
   router re-adds .is-visible to an element that already has it, so there is no
   state change to animate on a return visit. */
.reveal-on-scroll.revealed {
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Timeline dot pulse — marks live/active market milestones */
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 22, 40, 0.45); }
    60%       { box-shadow: 0 0 0 7px rgba(79, 22, 40, 0); }
}
.timeline-dot-live {
    animation: dotPulse 2.4s ease-in-out infinite;
}

@media (max-width: 767px) {
    /* Shorter travel on phones: the same 28px reads as a lurch at this scale. */
    .reveal-on-scroll {
        transform: translateY(16px);
        filter: none;
        transition: opacity var(--motion-standard) var(--ease-brand),
                    transform var(--motion-standard) var(--ease-brand);
    }
}

/* --- SPA routing ----------------------------------------------------------
   Each page lives in <section class="route" data-route="...">. The router
   adds [hidden] to inactive routes; the active one is shown. */
.route[hidden] {
    display: none !important;
}
/* Routes are children of a column flex container, and most carry `mx-auto`.
   Auto cross-axis margins suppress `align-items: stretch`, so those routes size
   to fit-content instead of the viewport — one wide descendant (the why-us
   comparison table at 522px) then inflated the entire page past 390px and
   clipped every heading on it. A definite width restores stretch; max-width
   and mx-auto still cap and centre the column on desktop. */
.route {
    width: 100%;
    min-width: 0;
}
/* Route entrance — a short settle so hash navigation reads as a transition
   rather than an instant swap. */
.route-enter {
    animation: route-in var(--motion-standard) var(--ease-brand);
}
@keyframes route-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Active state for the top-nav links (set by the router) */
.nav-link {
    border-bottom: 2px solid transparent;
    padding-bottom: 0.25rem;
    transition: color 0.25s ease, border-color 0.25s ease;
}
.nav-link:hover {
    color: #4f1628;
}
.nav-link.is-active {
    color: #4f1628;
    font-weight: 700;
    border-bottom-color: #4f1628;
}

/* --- About Us desktop dropdown -------------------------------------------
   The panel's own pt-3 padding bridges the gap between trigger and card so the
   cursor never crosses dead space (prevents hover flicker). Driven off the
   wrapper :hover / :focus-within so it's keyboard-reachable too. */
.nav-dropdown-panel {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    pointer-events: none;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

/* --- Mobile nav panel ----------------------------------------------------- */
.mobile-nav-panel[hidden] {
    display: none !important;
}
.mobile-nav-panel {
    box-shadow: 0 18px 40px -18px rgba(36, 28, 26, 0.45);
}
.mobile-nav-scrim[hidden] {
    display: none !important;
}
.mobile-nav-scrim {
    position: fixed;
    inset: 72px 0 0;
    background: rgba(36, 28, 26, 0.5);
    z-index: 30;
    animation: scrim-in var(--motion-micro) ease;
}
@keyframes scrim-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.mobile-nav-link {
    transition: color 0.2s ease;
}
.mobile-nav-link:hover,
.mobile-nav-link.is-active {
    color: #4f1628;
}

/* --- Logo carousel (Who We Are) ------------------------------------------ */
.logo-carousel-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: logo-scroll 36s linear infinite;
}
.logo-carousel-track:hover {
    animation-play-state: paused;
}
.logo-carousel-set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.logo-carousel-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 48px;
}
.logo-carousel-item img {
    display: block;
    height: 64px;
    width: auto;
    object-fit: contain;
}
@keyframes logo-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* Soft edge masks so logos fade out rather than clipping at the rails. */
.logo-carousel-mask {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
@media (max-width: 767px) {
    /* At 390px the marquee showed ~1.5 logos at a time and never rested.
       Freezing it into a 3-up grid removes the motion AND is the stronger
       proof: every retail partner is visible at once instead of most of them
       being off-screen at any given moment. */
    .logo-carousel-track {
        animation: none;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    .logo-carousel-track .logo-carousel-set[aria-hidden="true"] {
        display: none; /* the duplicate set only exists to seam the loop */
    }
    .logo-carousel-set {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: center;
    }
    .logo-carousel-item {
        padding: 12px 8px;
        flex: 0 0 33.333%;
        min-width: 0;
        overflow: hidden;
    }
    /* Each logo carries a per-brand inline max-width tuned for the desktop
       marquee (up to 310px); !important is the only way to cap them to the
       grid cell without editing ten inline styles. */
    .logo-carousel-item img {
        height: 26px;
        max-width: 100% !important;
        object-fit: contain;
    }
    .logo-carousel-mask {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* === Sticky mobile CTA ====================================================
   Solutions and the Lilyeve case study run past 8,000px on a phone with the
   only conversion point at the very bottom. This surfaces one after the
   reader is committed, and only on mobile. */
.sticky-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 999px;
    background: var(--plum);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 12px 28px -10px rgba(36, 28, 26, 0.55);
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(120%);
    transition: opacity var(--motion-standard) var(--ease-brand),
                transform var(--motion-standard) var(--ease-brand);
    pointer-events: none;
}
.sticky-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.sticky-cta-label {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.sticky-cta-label small {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
}
.sticky-cta-arrow {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) {
    .sticky-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sticky-cta { transition: none; }
}

/* === Case study cards =====================================================
   The index used to be ten identical full-width rows, each with its own tag
   colour and its own metric styling, and only one of them actually linked
   anywhere. Now: Lilyeve is the featured full-width card, the rest form a
   two-up grid, and tag + metric styling is shared. */
.case-card {
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--motion-standard) var(--ease-brand),
                border-color var(--motion-standard) var(--ease-brand);
}
/* Only cards that lead somewhere get a lift on hover — the others offered a
   clickable affordance that went nowhere. */
.case-card:has(a):hover,
.case-card-featured:hover {
    box-shadow: 0 14px 34px -18px rgba(79, 22, 40, 0.3);
    border-color: rgba(79, 22, 40, 0.22);
}
.case-card-media {
    height: 240px;
    flex: none;
}
.case-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* One tag palette: tonal plum, not six unrelated hues. */
.case-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(79, 22, 40, 0.07);
    color: var(--plum);
    border: 1px solid rgba(79, 22, 40, 0.12);
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* One metric lockup: serif figure over a small-caps label. */
.case-metric {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--plum);
}
.case-metric-label {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #857376;
    margin-top: 4px;
    line-height: 1.4;
}
.case-featured-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--plum);
    margin-bottom: 14px;
}
.case-featured-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: currentColor;
}
@media (max-width: 767px) {
    .case-card-media {
        height: 200px;
    }
}

/* === Partner page "trusted by" wordmarks ==================================
   Three brand names that previously used three different type treatments.
   One face, one size, one colour, separated by a hairline dot. */
.partner-wordmark {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
}
.partner-wordmark-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    display: inline-block;
}

/* === Why-Us comparison table ==============================================
   Desktop: a normal table with the Markato column pulled forward — deeper
   tint, side rules, and a chip header — so the winning column is legible at a
   glance rather than being one of four equal-weight columns.
   Mobile: the same markup restacks into one card per feature via data-label,
   which beats a 522px table in a sideways-scrolling box. */
.compare-wrap {
    background: #fff;
    border: 1px solid rgba(133, 115, 118, 0.3);
    border-radius: 16px;
    overflow: hidden;
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 15px;
    color: #241c1a;
}
.compare-table th,
.compare-table td {
    padding: 22px 20px;
    vertical-align: middle;
}
.compare-table thead th {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #6b5f5b;
    text-align: center;
    border-bottom: 1px solid rgba(133, 115, 118, 0.25);
    width: 25%;
}
.compare-table thead th.compare-feature-head {
    text-align: left;
}
.compare-table tbody tr + tr td {
    border-top: 1px solid rgba(133, 115, 118, 0.18);
}
.compare-table td {
    text-align: center;
    color: #6b5f5b;
}
.compare-table td.compare-feature {
    text-align: left;
    font-weight: 600;
    color: #241c1a;
}

/* The emphasised column */
.compare-mk-head,
.compare-mk {
    background: rgba(79, 22, 40, 0.06);
    border-left: 1px solid rgba(79, 22, 40, 0.16);
    border-right: 1px solid rgba(79, 22, 40, 0.16);
}
.compare-mk-head {
    border-top: 2px solid var(--plum);
}
.compare-mk-chip {
    display: inline-block;
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--plum);
}
.compare-table td.compare-mk {
    color: #241c1a;
}
.compare-mk-value {
    display: block;
    font-size: 14px;
    margin-top: 6px;
    font-weight: 500;
}
.compare-check {
    color: var(--plum);
    font-size: 22px;
    line-height: 1;
}
.compare-table tbody tr:last-child .compare-mk {
    border-bottom: 2px solid var(--plum);
}

@media (max-width: 767px) {
    .compare-wrap {
        background: none;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }
    .compare-table,
    .compare-table tbody,
    .compare-table tr,
    .compare-table td {
        display: block;
        width: 100%;
    }
    .compare-table thead {
        display: none; /* each cell carries its own label below */
    }
    .compare-table tr {
        background: #fff;
        border: 1px solid rgba(133, 115, 118, 0.3);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 16px;
    }
    .compare-table tbody tr + tr td {
        border-top: 0;
    }
    .compare-table td {
        padding: 14px 18px;
        text-align: left;
        border-top: 1px solid rgba(133, 115, 118, 0.18);
    }
    .compare-table td.compare-feature {
        background: #f7f3ee;
        font-family: 'Playfair Display', serif;
        font-size: 18px;
        padding: 16px 18px;
        border-top: 0;
    }
    /* Restore the label the hidden thead used to provide. */
    .compare-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #9a8b82;
        margin-bottom: 4px;
    }
    .compare-mk,
    .compare-table tbody tr:last-child .compare-mk {
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 3px solid var(--plum);
    }
    .compare-table td[data-label="Markato"]::before {
        color: var(--plum);
    }
    .compare-mk-value {
        display: inline;
        margin-top: 0;
    }
    .compare-check {
        font-size: 18px;
        vertical-align: -3px;
        margin-right: 4px;
    }
}

/* === Shared closing CTA banner ============================================
   Extracted from the Lilyeve case study so every page can end on a next step
   instead of running into the footer. */
.cta-banner {
    background: linear-gradient(135deg, #5a1a2e 0%, var(--plum) 100%);
    border-radius: 22px;
    padding: 64px 40px;
    text-align: center;
    /* No bottom margin: every host route already ends in pb-24, and stacking
       the two left a dead band above the footer. */
    margin: 0;
}
.cta-banner-eyebrow {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #d99bab;
}
.cta-banner-title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(26px, 4.4vw, 34px);
    line-height: 1.15;
    margin: 0 auto 16px;
    max-width: 540px;
    color: #fff;
}
.cta-banner-lede {
    font-size: 17px;
    line-height: 1.55;
    color: #e7c4cd;
    margin: 0 auto 32px;
    max-width: 500px;
}
.cta-banner-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: var(--plum);
    padding: 15px 30px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform var(--motion-standard) var(--ease-brand),
                box-shadow var(--motion-standard) var(--ease-brand);
}
.cta-banner-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.4);
}
@media (max-width: 640px) {
    .cta-banner {
        padding: 48px 24px;
        border-radius: 18px;
    }
}

/* === "Backed by" investor section (home) ==================================
   Previously a wall of inline styles in Spectral + Hanken Grotesk — the only
   place on the site using either face. Rebuilt on the shared Playfair/Geist
   and plum tokens, and collapsed to one column below 900px (the fixed
   two-column grid used to push half the section off small screens). */
.investor-section {
    background: #f3f0eb;
    padding: 96px 48px;
    box-sizing: border-box;
    color: #241c1a;
    margin-bottom: 0;
}
.investor-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.18fr;
    gap: 80px;
    align-items: start;
}
.investor-eyebrow {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: #9a6a56;
    text-transform: uppercase;
}
.investor-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 18px 0 0;
    color: #241c1a;
}
.investor-amount-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 44px;
}
.investor-amount {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(56px, 12vw, 104px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--plum-soft);
    font-variant-numeric: tabular-nums;
}
.investor-amount-note {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--plum-soft);
    padding-bottom: 14px;
}
.investor-lede {
    font-size: 17px;
    line-height: 1.6;
    color: #5c534e;
    margin: 24px 0 0;
    max-width: 430px;
}
.investor-lede strong {
    color: #241c1a;
    font-weight: 600;
}
.investor-timeline {
    display: flex;
    align-items: center;
    margin-top: 36px;
    max-width: 430px;
}
.investor-timeline-node {
    flex: none;
}
.investor-timeline-node-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.investor-timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--plum-soft);
    display: inline-block;
}
.investor-timeline-label {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 16px;
    color: #241c1a;
}
.investor-timeline-sub {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9a8b82;
    margin-top: 5px;
}
.investor-timeline-rule {
    flex: 1;
    height: 0;
    border-top: 2px dotted #c6b7ac;
    margin: 0 16px;
    transform: translateY(-9px);
}
.investor-vcs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 44px;
}
.vc-mark {
    text-decoration: none;
    flex: none;
    padding: 14px 22px;
    border: 1px solid #dad0c6;
    border-bottom: 2px solid var(--plum-soft);
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #3d332f;
    transition: border-color var(--motion-micro) ease,
                color var(--motion-micro) ease,
                background var(--motion-micro) ease;
}
.vc-mark:hover {
    border-color: var(--plum-soft);
    color: var(--plum-soft);
    background: rgba(124, 45, 62, 0.04);
}
.angel-list {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}
.angel-card {
    background: var(--ivory);
    border: 1px solid #eae1d7;
    border-radius: 8px;
    padding: 26px 28px;
    transition: box-shadow var(--motion-standard) var(--ease-brand),
                transform var(--motion-standard) var(--ease-brand),
                border-color var(--motion-micro) ease;
}
.angel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px -16px rgba(124, 45, 62, 0.28);
    border-color: rgba(124, 45, 62, 0.28);
}
.angel-card-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.angel-icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(124, 45, 62, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
}
.angel-icon::before {
    content: '';
    width: 14px;
    height: 14px;
    background: var(--plum-soft);
    transform: rotate(45deg);
    border-radius: 2px;
    display: inline-block;
}
.angel-role {
    font-size: 17px;
    font-weight: 700;
    color: #241c1a;
    line-height: 1.25;
}
.angel-org {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: var(--plum-soft);
    margin-top: 3px;
}
@media (max-width: 900px) {
    .investor-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}
@media (max-width: 640px) {
    .investor-section {
        padding: 64px 24px;
    }
    .investor-amount-row {
        margin-top: 32px;
    }
    .investor-lede,
    .investor-timeline {
        max-width: none;
    }
    .investor-vcs {
        margin-top: 32px;
    }
}

/* --- Who We Are section background ---------------------------------------- */
.whoweare-section {
    background-color: rgb(87, 47, 62);
}

/* Text color overrides for dark background */
.whoweare-heading {
    color: #f5ede9;
}
.whoweare-body-strong {
    color: #e8d5cc;
}
.whoweare-body {
    color: #c9a89a;
}

/* --- Sticky scroll collage ------------------------------------------------ */
/* Outer: enough scroll room for all 5 images to appear one by one */
/* Scroll runway for the pinned collage. Was 600vh — six full viewports of
   scrolling that bought one image-reveal sequence and no copy. 260vh keeps the
   staged reveal but returns roughly four screens of scrolling to the user. */
.whoweare-sticky-outer {
    height: 260vh;
    background-color: rgb(87, 47, 62);
}
/* Inner: sticks at the very top of the viewport */
.whoweare-sticky-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* --- Who We Are collage --------------------------------------------------- */
.whoweare-collage {
    width: 100%;
    height: 100vh;
    background-color: rgb(87, 47, 62);
    position: relative;
    overflow: hidden;
}

/* "VALUE CREATOR" watermark */
.whoweare-watermark,
.whoweare-watermark-m {
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    color: #f0ddd5;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transition: opacity 1s ease;
}
.whoweare-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    /* 12vw clipped "BRAND BUILDER" at both viewport edges — 14 nowrap
       characters need roughly 7.7x the font size in width. */
    font-size: clamp(2rem, 8vw, 7rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    z-index: 0;
}
.whoweare-watermark-m {
    font-size: clamp(2rem, 11vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
}
.whoweare-watermark.is-revealed,
.whoweare-watermark-m.is-revealed {
    opacity: 0.18;
}

/* Collage images */
.whoweare-img {
    position: absolute;
    border-radius: 14px;
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.45);
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.whoweare-img.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/*
 * Collage layout — 10 images in a 5-col × 2-row scattered grid.
 * Uses px for height so images stay within the 100vh collage at any screen size.
 *
 * TOP ROW:    tops 5-10%,  height ~38-42% of viewport → bottom max ~52%
 * BOTTOM ROW: tops 54-57%, height ~34-37% of viewport → bottom max ~94%
 * CENTER:     dermafirm spans full height as the anchor piece
 *
 * Column left anchors: ~0% | ~16% | ~50% (center) | ~64% | ~right edge
 */

/* ── SCATTERED COLLAGE LAYOUT ── */
/*
 * Loose, airy scatter spanning the FULL viewport width with generous plum
 * gaps between cards. Smaller cards than the old packed mosaic. Designed for
 * ~1280–1440px viewport width.
 *
 * Reading the target left→right:
 *   BB Lab (far left mid) · purple serums (left lower) · nutseline (tall, L-of-center)
 *   · NE:AR chews (top center) · jars cluster (center anchor) · narka gold (center lower)
 *   · wellage heart (center-right lower) · ILSO serum (right, tall) · gynomaster (upper right)
 *   · lilyeve orange (far right lower)
 */

/*
 * NOTE: the data-collage-index / class names do NOT match the HTML comments.
 * Actual image per class (verified from the asset files):
 *   pos-far-left     idx0  BB Lab lemons        (square)
 *   pos-upper-left   idx1  colourful jars set   (square)
 *   pos-center       idx2  nutseline pink stick (square)
 *   pos-upper-right  idx3  ilso blue serum      (tall 5:6)
 *   pos-far-right    idx4  gynomaster green tabs(square)
 *   pos-lower-left   idx5  narka gold set       (wide 750x400)
 *   pos-upper-center idx6  lilyeve orange       (square)
 *   pos-lower-center idx7  NE:AR yellow chews   (square)
 *   pos-mid-right    idx8  dermafirm purple set (wide 2:1)
 *   pos-lower-right  idx9  wellage blue heart   (square)
 */

/* BB Lab lemons — far left, vertical middle */
.pos-far-left {
    width: 165px;
    height: 28vh;
    top: 34%;
    left: 4%;
    transform: translateY(36px);
}
.pos-far-left.is-revealed {
    transform: translateY(0);
}

/* Colourful jars set — centre anchor */
.pos-upper-left {
    width: 232px;
    height: 34vh;
    top: 42%;
    left: 34%;
    transform: translateY(36px);
}
.pos-upper-left.is-revealed {
    transform: translateY(0);
}

/* Nutseline pink stick — left-of-centre, tall, top */
.pos-center {
    width: 200px;
    height: 200px;
    top: 11%;
    left: 22%;
    transform: translateY(36px);
    object-fit: contain;
    background: #f2c4c4;
}
.pos-center.is-revealed {
    transform: translateY(0);
}

/* ILSO blue serum — right side, tall */
.pos-upper-right {
    width: 168px;
    height: 42vh;
    top: 27%;
    left: 62%;
    right: auto;
    transform: translateY(36px);
}
.pos-upper-right.is-revealed {
    transform: translateY(0);
}

/* Gynomaster green tabs — upper right, rightmost */
.pos-far-right {
    width: 170px;
    height: 30vh;
    top: 12%;
    left: 80%;
    transform: translateY(36px);
}
.pos-far-right.is-revealed {
    transform: translateY(0);
}

/* Narka gold set (wide) — centre, lower */
.pos-lower-left {
    width: 240px;
    height: 25vh;
    top: 72%;
    left: 28%;
    transform: translateY(36px);
}
.pos-lower-left.is-revealed {
    transform: translateY(0);
}

/* Lilyeve orange — far right, lower */
.pos-upper-center {
    width: 250px;
    height: 30vh;
    top: 53%;
    left: 77%;
    transform: translateY(36px);
}
.pos-upper-center.is-revealed {
    transform: translateY(0);
}

/* NE:AR yellow chews — top centre */
.pos-lower-center {
    width: 260px;
    height: 195px;
    top: 14%;
    left: 40%;
    transform: translateY(36px);
    object-fit: contain;
    background: #f5e96e;
}
.pos-lower-center.is-revealed {
    transform: translateY(0);
}

/* Dermafirm purple set (wide 2:1) — left, lower */
.pos-mid-right {
    width: 250px;
    height: 24vh;
    top: 61%;
    left: 8%;
    transform: translateY(36px);
}
.pos-mid-right.is-revealed {
    transform: translateY(0);
}

/* Wellage blue heart — centre-right, lower */
.pos-lower-right {
    width: 190px;
    height: 36vh;
    top: 55%;
    left: 52%;
    transform: translateY(36px);
}
.pos-lower-right.is-revealed {
    transform: translateY(0);
}

/* Mobile: simple centered vertical stack */
/* Two-up grid: four square-cropped tiles instead of six full-width cards. */
.whoweare-collage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.whoweare-img-m {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    height: auto;
    margin: 0;
    border-radius: 14px;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--motion-standard) var(--ease-brand),
                transform var(--motion-standard) var(--ease-brand);
}
.whoweare-img-m.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Respect reduced-motion.
   This used to cover only the collage; it now applies to every animation
   family on the site — marquees, slider zoom, shimmer, reveals, and the
   route entrance. Looping decorative animation is stopped outright,
   entrances collapse to an instant state change. */
@media (prefers-reduced-motion: reduce) {
    .whoweare-img,
    .whoweare-img.is-revealed,
    .pos-far-left,
    .pos-far-left.is-revealed,
    .pos-center,
    .pos-center.is-revealed,
    .pos-far-right,
    .pos-far-right.is-revealed,
    .whoweare-img-m,
    .whoweare-img-m.is-revealed,
    .whoweare-watermark,
    .whoweare-watermark-m,
    .reveal-on-scroll,
    .reveal-on-scroll.is-visible,
    .reveal-on-scroll.revealed {
        transition: none !important;
    }

    /* Looping decorative motion: stop entirely. */
    .logo-carousel-track,
    .cs-slide-img,
    .route-enter,
    .timeline-dot-live,
    .lilyeve-cta-box {
        animation: none !important;
    }

    /* Entrance animations resolve straight to their end state rather than
       leaving the element stuck at opacity:0. */
    .lilyeve-hero-panel {
        animation: none !important;
        opacity: 1;
    }

    /* Nothing should start life invisible if it can never animate in. */
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        filter: none;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }
}

/* === Orbital "Engineered for Scale" Section === */

/* Engineered for Scale — in-flow section.
   Constrained narrower than the page so the glass panel reads as a floating
   card with visible left/right edges. */
.orbital-efs-section {
    position: relative;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* One frosted-glass panel that encloses BOTH columns (ring + content) */
.orbital-efs-glass {
    position: relative;
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 56px 48px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* layered shadow so the contained card's edges read clearly */
    box-shadow:
        0 1px 2px rgba(79, 22, 40, 0.06),
        0 12px 32px rgba(79, 22, 40, 0.10),
        0 24px 60px rgba(79, 22, 40, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
}

/* Soft dusty-rose tint behind the glass so the blur has something to frost */
.orbital-efs-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        ellipse 55% 75% at 28% 50%,
        rgba(79, 22, 40, 0.06) 0%,
        transparent 70%
    );
    z-index: -1;
    pointer-events: none;
}

/* Left column: holds the static ring + hub + nodes */
.orbital-efs-container {
    position: relative;
    flex: 0 0 560px;
    height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    overflow: visible;
}

.orbital-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    height: 560px;
    border-radius: 50%;
    border: 2px solid rgba(79, 22, 40, 0.13);
    box-shadow:
        0 0 0 1px rgba(79, 22, 40, 0.05),
        inset 0 0 0 1px rgba(79, 22, 40, 0.05);
    pointer-events: none;
}

/* Hub */
.orbital-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.orbital-hub-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(79, 22, 40, 0.14);
}

.orbital-hub-ring-1 { width: 332px; height: 332px; }
.orbital-hub-ring-2 { width: 356px; height: 356px; }

.orbital-hub-core {
    position: relative;
    width: 308px;
    height: 308px;
    border-radius: 50%;
    background: #fbf9f6;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(79, 22, 40, 0.12);
    /* overflow must stay visible so the ring can extend to the nodes */
    overflow: visible;
}

/* Conic-gradient ring that extends from hub edge out through each node centre.
   Hub radius = 154px, nodes at 230px.
   Ring spans 195 px → 265 px (centred on 230 px).
   inset: -(265-154) = -111px  |  padding: 265-195 = 70px  */
.orbital-hub-core::before {
    content: '';
    position: absolute;
    inset: -111px;            /* pseudo is 308+222 = 530px × 530px */
    border-radius: 50%;
    padding: 70px;            /* ring width – inner clear area is 530-(2×70)=390px diam */
    background: conic-gradient(
        from 0deg,
        rgba(79,  22,  40,  0.70)  0deg,
        rgba(107, 44,  62,  0.25) 45deg,
        rgba(79,  22,  40,  0.70) 90deg,
        rgba(107, 44,  62,  0.25) 135deg,
        rgba(79,  22,  40,  0.70) 180deg,
        rgba(107, 44,  62,  0.25) 225deg,
        rgba(79,  22,  40,  0.70) 270deg,
        rgba(107, 44,  62,  0.25) 315deg,
        rgba(79,  22,  40,  0.70) 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;              /* behind hub background, visible outside hub circle */
    pointer-events: none;
}

.orbital-hub-text {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 44px;
}

/* Nodes — statically positioned by JS, no rotation */
.orbital-node {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
}

.orbital-node-btn {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1.5px solid rgba(213, 193, 196, 0.7);
    background: #f5f3f0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
    box-shadow: 0 4px 12px rgba(79, 22, 40, 0.07);
}

.orbital-node-btn .material-symbols-outlined {
    color: #4f1628;
    font-size: 38px;
    font-variation-settings: 'FILL' 1;
    transition: color 0.35s ease;
}

.orbital-node.active .orbital-node-btn {
    background: #4f1628;
    border-color: #4f1628;
    /* lift the enlarged circle upward so it clears the label beneath it */
    transform: translateY(-14px) scale(1.28);
    box-shadow: 0 6px 22px rgba(79, 22, 40, 0.32);
}

.orbital-node.active .orbital-node-btn .material-symbols-outlined {
    color: #ffffff;
}

/* The left/right nodes sit on the ring, so a bare label collided with the
   ring band behind it. A soft chip backing lifts it clear and reads as an
   intentional tag rather than an overlap. */
.orbital-node-label {
    margin-top: 14px;
    font-family: 'Geist', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(27, 28, 26, 0.62);
    text-align: center;
    max-width: 118px;
    line-height: 1.35;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(250, 248, 245, 0.92);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: color var(--motion-standard) ease,
                background var(--motion-standard) ease;
    pointer-events: none;
}

.orbital-node.active .orbital-node-label {
    color: #4f1628;
}

/* Right column: content panel driven by the selected node */
.orbital-content {
    flex: 1;
    min-width: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.orbital-content.is-swapping {
    opacity: 0;
    transform: translateY(8px);
}

.orbital-content-media {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(79, 22, 40, 0.13);
}

.orbital-content-img {
    display: block;
    width: 100%;
    height: 390px;
    object-fit: cover;
    object-position: center;
}

/* Mannings storefront: crop so the mall ceiling is out of frame while the
   full "mannings" sign sits just below the top edge */
.orbital-content-img[src*="Mannings-storefront"] {
    object-position: center 38%;
}

.orbital-content-title {
    margin: 26px 0 12px;
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.25;
    color: #1b1c1a;
}

.orbital-content-body {
    font-family: 'Geist', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: #524346;
    max-width: 46ch;
}

/* Mobile fallback grid */
.orbital-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
}

.orbital-mobile-card {
    background: #f5f3f0;
    border: 1px solid rgba(213, 193, 196, 0.4);
    border-radius: 16px;
    padding: 24px 20px;
}

/* Mobile overrides */
@media (max-width: 767px) {
    .orbital-efs-glass {
        padding: 32px 20px;
        gap: 0;
    }
    .orbital-efs-section {
        padding-left: 12px;
        padding-right: 12px;
    }
    .orbital-mobile-grid {
        grid-template-columns: 1fr;
    }
    .logo-carousel-item {
        padding: 0 28px;
    }
}

/* ===== Lilyeve KOL Carousel ===== */
#kol-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
#kol-carousel::-webkit-scrollbar {
    display: none;
}
.kol-panel {
    flex-shrink: 0;
    width: 196px;
    scroll-snap-align: start;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.kol-panel:hover {
    transform: translateY(-5px);
}
.kol-dot.is-active {
    background-color: #4f1628;
}

/* Gradient edge fade for KOL carousel */
.kol-carousel-mask {
    position: relative;
}
.kol-carousel-mask::before,
.kol-carousel-mask::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    z-index: 1;
    pointer-events: none;
}
.kol-carousel-mask::before {
    left: 0;
    background: linear-gradient(to right, #faf8f5, transparent);
}
.kol-carousel-mask::after {
    right: 0;
    background: linear-gradient(to left, #faf8f5, transparent);
}

/* Image zoom on hover */
.img-zoom {
    overflow: hidden;
}
.img-zoom img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.img-zoom:hover img {
    transform: scale(1.06);
}

/* ===== Lilyeve Hero — cinematic panel curtain-rise ===== */
.lilyeve-hero-panel {
    opacity: 0;
    animation: lilyeveHeroIn 0.9s ease-out forwards;
}

@keyframes lilyeveHeroIn {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
}

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

/* Hero bottom gradient overlay */
.lilyeve-hero-wrap {
    position: relative;
    margin-bottom: 4rem;
}
.lilyeve-hero-wrap > .lilyeve-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, #faf8f5 100%);
    pointer-events: none;
    border-radius: 0.75rem;
    z-index: 1;
}

/* Stats stagger — children animate when parent gets is-visible */
.stats-row .stat-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.stats-row.is-visible .stat-item:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.05s;
}
.stats-row.is-visible .stat-item:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.18s;
}
.stats-row.is-visible .stat-item:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.31s;
}

/* Award card individual slide-in (applied via reveal-on-scroll + delay) */
.lilyeve-award-card {
    transition: box-shadow 0.3s ease, transform 0.25s ease;
}
.lilyeve-award-card:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 30px -8px rgba(79, 22, 40, 0.18);
}

/* Lilyeve CTA — animated gradient background */
@keyframes lilyeveCTAShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.lilyeve-cta-box {
    background: linear-gradient(135deg, rgba(79,22,40,0.06) 0%, rgba(60,110,87,0.05) 50%, rgba(79,22,40,0.06) 100%);
    background-size: 300% 300%;
    animation: lilyeveCTAShimmer 10s ease infinite;
}


/* ===== Case Studies — Brand Showcase Slider ===== */
.cs-slider {
    position: relative;
    width: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #0a0608;
    /* 16:9 on mobile, taller on desktop via aspect-ratio */
    aspect-ratio: 16 / 9;
    min-height: 420px;
    max-height: 680px;
    user-select: none;
}

/* Track holds all slides side-by-side; we translate it */
.cs-track {
    display: flex;
    width: 100%;
    height: 100%;
    will-change: transform;
    transition: transform 0.75s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Each slide is exactly 100% of the slider width */
.cs-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.cs-slide-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.cs-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* subtle Ken Burns per slide */
    animation: csKenBurns 8s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes csKenBurns {
    from { transform: scale(1);   }
    to   { transform: scale(1.06); }
}

@media (max-width: 767px) {
    /* Motion stacked on motion: the slide is already swipeable and the card
       is small. A permanent zoom here is cost without payoff on phones. */
    .cs-slide-img {
        animation: none;
        will-change: auto;
    }
}

/* Gradient overlay — dark at bottom */
.cs-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(10, 6, 8, 0.88) 0%,
        rgba(10, 6, 8, 0.45) 45%,
        rgba(10, 6, 8, 0.10) 100%
    );
}

/* Content block sitting on the overlay */
.cs-slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 2.5rem 3rem;
}

.cs-slide-meta {
    margin-bottom: 0.5rem;
}

.cs-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f5e4ea;
    background: rgba(79, 22, 40, 0.65);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 100px;
    padding: 0.2em 0.85em;
    backdrop-filter: blur(6px);
}

.cs-slide-brand {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin: 0.4rem 0 0.75rem;
}

.cs-slide-desc {
    font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    max-width: 52ch;
    margin-bottom: 1.25rem;
}

.cs-slide-stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

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

.cs-stat-num {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: #f5c5d0;
    line-height: 1;
}

.cs-stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}

.cs-stat-divider {
    width: 1px;
    height: 2.5rem;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.cs-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 100px;
    padding: 0.45em 1.2em;
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,0.08);
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease;
}
.cs-cta:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.6);
}

/* ---- Arrow buttons ---- */
.cs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(10, 6, 8, 0.45);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cs-arrow:hover {
    background: rgba(79, 22, 40, 0.75);
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-50%) scale(1.08);
}
.cs-arrow-prev { left: 1.25rem; }
.cs-arrow-next { right: 1.25rem; }

/* ---- Dot nav ---- */
.cs-dots {
    position: absolute;
    bottom: 1.25rem;
    right: 1.5rem;
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.cs-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}

.cs-dot.cs-dot-active {
    background: #fff;
    width: 24px;
    border-radius: 100px;
}

/* ---- Progress bar ---- */
.cs-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,0.12);
    z-index: 10;
}

.cs-progress-fill {
    height: 100%;
    background: #f5c5d0;
    border-radius: 0 2px 2px 0;
    width: 0%;
    transition: width linear;
}

/* ---- Mobile tweaks ---- */
@media (max-width: 640px) {
    .cs-slider {
        aspect-ratio: 4 / 5;
        min-height: 480px;
        border-radius: 0.75rem;
    }
    .cs-slide-content {
        padding: 1.5rem 1.25rem 2rem;
    }
    .cs-arrow {
        width: 2.25rem;
        height: 2.25rem;
    }
    .cs-arrow-prev { left: 0.75rem; }
    .cs-arrow-next { right: 0.75rem; }
}

/* Hero slider variant — matches the original image column height */
.cs-slider--hero {
    aspect-ratio: unset;
    height: 500px;
    min-height: unset;
    max-height: unset;
    border-radius: 0.75rem;
}
@media (min-width: 768px) {
    .cs-slider--hero {
        height: 600px;
    }
}
/* Suppress Ken Burns in hero to keep it lighter-weight alongside copy */
.cs-slider--hero .cs-slide-img {
    animation: none;
}

/* ===========================================================================
   Partner CTA — dark glassmorphism panel (Solutions page footer)
   =========================================================================== */
.partner-cta {
    background: #1C1917;
    border-radius: 12px;
    padding: 64px 48px;
    position: relative;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: center;
}
@media (max-width: 640px) {
    .partner-cta { padding: 48px 28px; min-height: 0; }
}
.partner-cta__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.partner-cta__glow--1 {
    width: 400px; height: 400px;
    background: rgba(124, 45, 62, 0.15);
    top: -120px; left: -80px;
}
.partner-cta__glow--2 {
    width: 300px; height: 300px;
    background: rgba(124, 45, 62, 0.08);
    bottom: -100px; right: 20%;
}
.partner-cta__glow--3 {
    width: 200px; height: 200px;
    background: rgba(168, 130, 100, 0.06);
    top: 40%; right: 10%;
}
.partner-cta__glass-border {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
}
.partner-cta__content {
    position: relative;
    z-index: 1;
    max-width: 480px;
}
.partner-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(124, 45, 62, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(124, 45, 62, 0.25);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #D4A0A0;
    margin-bottom: 28px;
}
.partner-cta__eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #C47070;
    flex-shrink: 0;
}
.partner-cta__headline {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 600;
    color: #FAF8F5;
    line-height: 1.2;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}
@media (max-width: 640px) {
    .partner-cta__headline { font-size: 28px; }
}
.partner-cta__subtitle {
    font-size: 15px;
    line-height: 1.65;
    color: #A8A29E;
    margin-bottom: 36px;
}
.partner-cta__btn-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.partner-cta__btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #FAF8F5;
    background: #7C2D3E;
    border: none;
    padding: 12px 28px;
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow 0.25s, transform 0.15s;
    letter-spacing: 0.01em;
}
.partner-cta__btn-primary:hover {
    box-shadow: 0 0 24px rgba(124, 45, 62, 0.4);
    transform: translateY(-1px);
}
.partner-cta__btn-primary:active { transform: translateY(0); }
.partner-cta__btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #A8A29E;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 12px 24px;
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.partner-cta__btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: #D6D3D1;
}

/* ===========================================================================
   Investor section — funding timeline bar
   =========================================================================== */
.funding-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 20px 0 32px;
}
.funding-timeline__node {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.funding-timeline__node--end {
    align-items: flex-end;
}
.funding-timeline__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #4f1628;
    flex-shrink: 0;
}
.funding-timeline__label {
    font-size: 13px;
    font-weight: 600;
    color: #1c1917;
    line-height: 1;
}
.funding-timeline__sublabel {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a8a29e;
}
.funding-timeline__line {
    flex: 1;
    height: 1px;
    border-top: 1.5px dashed rgba(79, 22, 40, 0.25);
    margin: 0 12px;
    margin-bottom: 14px;
}

/* ============================================================
   Solutions / Services page  (#route-solutions .svcs-*)
   ============================================================ */

/* --- Hero ------------------------------------------------------- */
.svcs-hero {
    padding-bottom: 64px;
    border-bottom: 1px solid rgba(27, 28, 26, 0.08);
}
.svcs-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
}
.svcs-eyebrow {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #4f1628;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.svcs-eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: #4f1628;
}
.svcs-hero h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(48px, 6vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: #1b1c1a;
}
.svcs-hero h1 em {
    font-style: italic;
    font-weight: 400;
    color: #4f1628;
}
.svcs-hero-sub {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 19px;
    line-height: 1.5;
    color: #524346;
    max-width: 480px;
    padding-bottom: 8px;
}

/* --- Act Index -------------------------------------------------- */
.svcs-act-index {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(27, 28, 26, 0.08);
    border: 1px solid rgba(27, 28, 26, 0.08);
}
.svcs-act-card {
    background: #fbf9f6;
    padding: 32px 36px;
    cursor: pointer;
    transition: background 0.25s;
    text-decoration: none;
    color: #1b1c1a;
    display: block;
}
.svcs-act-card:hover { background: #efeeeb; }
.svcs-act-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: #857376;
    margin-bottom: 16px;
}
.svcs-act-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.015em;
    margin-bottom: 8px;
    color: #1b1c1a;
}
.svcs-act-desc {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    color: #524346;
    line-height: 1.5;
}

/* --- Act Sections ----------------------------------------------- */
.svcs-act-section { padding: 96px 0 32px; }
.svcs-act-header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: baseline;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(27, 28, 26, 0.12);
}
.svcs-act-marker { display: flex; flex-direction: column; gap: 4px; }
.svcs-act-marker-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 72px;
    line-height: 0.9;
    color: #4f1628;
    letter-spacing: -0.03em;
    display: block;
}
.svcs-act-marker-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #857376;
    display: block;
}
.svcs-act-headline {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #1b1c1a;
}

/* --- Services Grid ---------------------------------------------- */
.svcs-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}
.svcs-service {
    padding: 48px 0;
    border-bottom: 1px solid rgba(27, 28, 26, 0.12);
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 24px;
}
.svcs-service:nth-child(odd) {
    padding-right: 56px;
    border-right: 1px solid rgba(27, 28, 26, 0.12);
}
.svcs-service:nth-child(even) { padding-left: 56px; }
/* Strip bottom border from the last visual row (2 items) */
.svcs-services .svcs-service:nth-last-child(-n+2) { border-bottom: none; }
/* For 3-service grids: row 1 items should still have border-bottom; only row 2 item loses it */
.svcs-services--three .svcs-service:nth-last-child(2) {
    border-bottom: 1px solid rgba(27, 28, 26, 0.12);
}
.svcs-services--three .svcs-service:last-child { border-bottom: none; }
.svcs-service-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 500;
    color: #4f1628;
    letter-spacing: 0.05em;
    padding-top: 6px;
}
.svcs-service-body h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    color: #1b1c1a;
}
.svcs-service-body p {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 15px;
    color: #524346;
    line-height: 1.55;
    margin-bottom: 16px;
}
.svcs-service-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-top: 16px;
    border-top: 1px dashed rgba(27, 28, 26, 0.18);
}
.svcs-meta-item {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: #857376;
    text-transform: uppercase;
}
.svcs-meta-item strong {
    color: #1b1c1a;
    font-weight: 500;
}

/* --- Speed Callout ---------------------------------------------- */
.svcs-speed-callout { margin: 80px 0; }
.svcs-speed-inner {
    background: #1b1c1a;
    color: #fbf9f6;
    padding: 80px 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}
.svcs-speed-inner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 11px,
        rgba(251, 249, 246, 0.04) 11px,
        rgba(251, 249, 246, 0.04) 12px
    );
}
.svcs-speed-eyebrow {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffd9e0;
    margin-bottom: 28px;
}
.svcs-speed-headline {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fbf9f6;
}
.svcs-speed-headline em {
    font-style: italic;
    color: #ffd9e0;
}
.svcs-speed-body {
    font-family: 'Geist', system-ui, sans-serif;
    margin-top: 24px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(251, 249, 246, 0.75);
    max-width: 380px;
}
.svcs-speed-compare {
    display: grid;
    gap: 32px;
    position: relative;
    z-index: 1;
}
.svcs-compare-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: baseline;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(251, 249, 246, 0.15);
}
.svcs-compare-row:last-child { border-bottom: none; padding-bottom: 0; }
.svcs-compare-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 52px;
    font-weight: 400;
    line-height: 0.9;
    color: #fbf9f6;
    letter-spacing: -0.03em;
}
.svcs-compare-row.svcs-legacy .svcs-compare-num {
    color: #857376;
    opacity: 0.7;
}
.svcs-compare-label {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    color: rgba(251, 249, 246, 0.88);
    line-height: 1.4;
}
.svcs-compare-who {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 6px;
}

/* --- CTA -------------------------------------------------------- */
.svcs-cta {
    padding: 96px 0 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
    border-top: 1px solid rgba(27, 28, 26, 0.08);
    margin-top: 80px;
}
.svcs-cta h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #1b1c1a;
}
.svcs-cta h2 em { font-style: italic; color: #4f1628; }
.svcs-cta-body p {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 17px;
    color: #524346;
    line-height: 1.55;
    margin-bottom: 28px;
    max-width: 440px;
}
.svcs-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    background: #1b1c1a;
    color: #fbf9f6;
    text-decoration: none;
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: background 0.25s;
    border-radius: 2px;
}
.svcs-cta-button:hover { background: #4f1628; }
.svcs-cta-button::after {
    content: "→";
    font-size: 18px;
}

/* --- Responsive ------------------------------------------------- */
@media (max-width: 920px) {
    .svcs-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .svcs-hero-sub { font-size: 17px; }
    .svcs-act-index { grid-template-columns: 1fr; }
    .svcs-act-section { padding: 64px 0 24px; }
    .svcs-act-header {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-bottom: 32px;
    }
    .svcs-act-marker-num { font-size: 56px; }
    .svcs-act-headline { font-size: 26px; }
    .svcs-services { grid-template-columns: 1fr; }
    .svcs-service:nth-child(odd),
    .svcs-service:nth-child(even) {
        padding: 36px 0;
        border-right: none;
    }
    .svcs-services .svcs-service:nth-last-child(-n+2) {
        border-bottom: 1px solid rgba(27, 28, 26, 0.12);
    }
    .svcs-services .svcs-service:last-child { border-bottom: none; }
    .svcs-services--three .svcs-service:nth-last-child(2) {
        border-bottom: 1px solid rgba(27, 28, 26, 0.12);
    }
    .svcs-speed-callout { margin: 48px 0; }
    .svcs-speed-inner {
        grid-template-columns: 1fr;
        padding: 48px 32px;
        gap: 40px;
    }
    .svcs-speed-headline { font-size: 30px; }
    .svcs-speed-inner::before { display: none; }
    .svcs-cta {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 64px 0 48px;
    }
    .svcs-cta h2 { font-size: 36px; }
}