/* ============================================================
   SETTLA — Company Website
   Design tokens & global reset
   ============================================================ */

:root {
    /* ----- Brand palette (per BrandBook 2026) ----- */
    --c-black:        #000000;
    --c-midnight:     #0A0630;   /* Midnight Blue — dark backgrounds */
    --c-extreme-blue: #313CB4;   /* Extreme Blue — secondary accent */
    --c-purple:       #A031F2;   /* Shiny Purple — primary accent */
    --c-orange:       #F97316;   /* Replaces Tech Pink (per brand note) */
    --c-linen:        #F9EFE8;   
    --c-white:        #FFFFFF;

    /* Tints derived from brand Shiny Purple #A031F2 */
    --c-purple-deep:  #A031F2;
    --c-purple-rich:  #8E2EE0;

    --c-purple-50:   #FAF0FF;
    --c-purple-100:  #F2DDFE;
    --c-purple-200:  #E2BAFD;
    --c-purple-300:  #D08CFB;
    --c-purple-400:  #C067FA;
    --c-purple-500:  #A031F2;   /* Brand Shiny Purple — primary accent */
    --c-purple-600:  #A031F2;   /* Brand Shiny Purple */
    --c-purple-700:  #8E2EE0;   /* darker — for hover/active states */
    --c-purple-800:  #5C1791;
    --c-purple-900:  #0A0630;   /* Midnight Blue */

    /* Semantic */
    --c-text:       #0A0630;
    --c-text-muted: #4A4566;
    --c-text-soft:  #7A7592;

    /* Text on dark surfaces (footer, dark sections) */
    --c-on-dark:        #FFFFFF;
    --c-on-dark-soft:   #C9C3E5;   /* near-white, slight lavender tint */
    --c-on-dark-muted:  #B0AAD0;   /* secondary text on dark */
    --c-on-dark-faded:  #8E88AC;   /* tertiary / dividers */

    --c-bg:         #FFFFFF;
    --c-bg-soft:    #FAF7FF;
    --c-bg-section: #F9EFE8;     /* linen sections */
    --c-card:       #FFFFFF;
    --c-border:     #ECE7FA;

    --c-success:    #1FAE5A;
    --c-success-bg: #E5F8EC;
    --c-warn:       #E08A1E;
    --c-warn-bg:    #FFF3DE;
    --c-up:         #16A34A;

    /* Typography (per BrandBook: Poppins headings, Inter body) */
    --ff-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ff-display: 'Poppins', 'Inter', system-ui, sans-serif;

    
    --container: min(92vw, 1700px);
    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 22px;
    --radius-xl: 32px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(31, 15, 92, .06), 0 2px 6px rgba(31, 15, 92, .04);
    --shadow:    0 6px 24px rgba(31, 15, 92, .08), 0 2px 8px rgba(31, 15, 92, .04);
    --shadow-lg: 0 24px 60px rgba(31, 15, 92, .14), 0 8px 22px rgba(31, 15, 92, .06);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--ff-sans);
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; padding: 0; margin: 0; }
button { font: inherit; cursor: pointer; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent;
}

.header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: 170px;
    padding-top: 28px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.site-header .brand {
    margin-top: 40px;
    margin-left: -36px;
}

.brand-logo { display: inline-flex; }

.brand-image { display: inline-flex; align-items: center; }
.brand-img {
    height: 130px;
    width: auto;
    display: block;
    object-fit: contain;
}
.footer-brand-img {
    height: 80px;
    width: auto;
    margin-top: -19px;
}
@media (max-width: 760px) {
    .brand-img { height: 70px; }
    .footer-brand-img { height: 60px; }
}

.brand-text {
    font-family: var(--ff-display);
    font-weight: 800;
    letter-spacing: 4px;
    font-size: 22px;
    color: var(--c-text);
}

.primary-nav {
    margin-left: auto;
    transform: translateX(60px);
}
.primary-nav ul {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 38px;
    white-space: nowrap;
}

.primary-nav a {
    font-size: 14px;
    letter-spacing: .2px;
    font-weight: 500;
    color: var(--c-text);
    transition: color .2s ease;
    white-space: nowrap;
}
.header-inner { flex-wrap: nowrap; }

.primary-nav a:hover { color: var(--c-purple-600); }

.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    width: 40px; height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.nav-toggle span {
    width: 22px; height: 2px;
    background: var(--c-text);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
    padding: 0 0 24px;
    position: relative;
    overflow: hidden;
}

.hero-inner {
    position: relative;
    z-index: 2;
    min-height: 760px;
}

.hero-copy {
    position: relative;
    z-index: 2;
    padding-top: 270px;
    padding-bottom: 32px;
    
    max-width: clamp(620px, 50vw, 820px);
    margin-left: -36px;
}

.eyebrow {
    color: var(--c-purple-600);
    font-weight: 600;
    font-size: 15px;
    margin: 0 0 14px;
    letter-spacing: .2px;
}
/* Small uppercase phase label above each services section heading.
   Shown on all viewports (mobile, tablet, desktop). */
.phase-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--c-purple-600);
    margin: 0 0 12px;
}

h1 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1.15;
    letter-spacing: -.6px;
    color: var(--c-text);
    margin: 0 0 22px;
}

@media (min-width: 1101px) {
    .hero h1 {
        font-size: clamp(24px, 2vw, 34px);
        font-weight: 400;
        line-height: 1.22;
    }
    
    .hero { min-height: 100vh; min-height: 100svh; }
    .hero-inner { min-height: 100vh; min-height: 100svh; }

    
    .about-hero {
        min-height: 100vh;
        min-height: 100svh;
        overflow: hidden;
        padding: 0 !important;
        position: relative;
    }
    
    .about-hero-visual {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    .about-hero-visual img {
        width: 100% !important;
        height: 100% !important;
        /* Contain instead of cover — the entire image fits within
           the section without zoom or cropping. */
        object-fit: contain !important;
        object-position: right center !important;
        transform: none !important;
        display: block;
        
        -webkit-mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 72%,
            rgba(0,0,0,.75) 84%,
            rgba(0,0,0,.4) 94%,
            transparent 100%);
        mask-image: linear-gradient(to bottom,
            #000 0%,
            #000 72%,
            rgba(0,0,0,.75) 84%,
            rgba(0,0,0,.4) 94%,
            transparent 100%);
    }
    /* Kill the original fade pseudos — replaced below. */
    .about-hero-visual::before,
    .about-hero-visual::after { display: none !important; }
    
    .about-hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 120px;
        background: linear-gradient(to bottom,
            rgba(255, 255, 255, .75) 0%,
            rgba(255, 255, 255, .3)  60%,
            transparent 100%);
        pointer-events: none;
        z-index: 1;
    }
    
    .about-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
            linear-gradient(to top,
                #FFFFFF 0%,
                #FFFFFF 40%,
                rgba(255, 255, 255, .92) 60%,
                rgba(255, 255, 255, .65) 78%,
                rgba(255, 255, 255, .3)  92%,
                transparent 100%) bottom left / 100% 480px no-repeat,
            linear-gradient(to right,
                rgba(255, 255, 255, 0.96) 0%,
                rgba(255, 255, 255, 0.88) 18%,
                rgba(255, 255, 255, 0.55) 34%,
                rgba(255, 255, 255, 0.15) 50%,
                transparent 62%);
    }
    /* Inner container sits above the image + overlays. */
    .about-hero-inner {
        position: relative;
        z-index: 3;
        display: block !important;
        min-height: 100vh;
        min-height: 100svh;
        grid-template-columns: 1fr !important;
    }
    .about-hero-copy {
        position: relative;
        z-index: 3;
        padding-top: 100px !important;
        padding-bottom: 0 !important;
        max-width: clamp(560px, 48vw, 760px);
    }
    .about-hero-copy .about-lead {
        margin-top: 60px !important;
    }
    .about-hero-points {
        position: relative;
        z-index: 3;
        margin-top: 120px !important;
    }
    
    .about-hero-points::before {
        content: '';
        position: absolute;
        top: -64px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(to right,
            transparent 0%,
            rgba(160, 49, 242, .25) 15%,
            rgba(160, 49, 242, .75) 50%,
            rgba(160, 49, 242, .25) 85%,
            transparent 100%);
        border-radius: 2px;
        box-shadow:
            0 0 12px rgba(160, 49, 242, .45),
            0 0 28px rgba(160, 49, 242, .25);
    }
    .about-hero-points::after {
        content: '';
        position: absolute;
        top: -68px;
        left: 50%;
        width: 60%;
        height: 10px;
        transform: translateX(-50%);
        background: radial-gradient(ellipse at center,
            rgba(160, 49, 242, .35) 0%,
            rgba(160, 49, 242, .15) 40%,
            transparent 70%);
        filter: blur(8px);
        pointer-events: none;
    }
    /* Origin Story — pull the copy column closer to the image so
       the left gap shrinks. */
    .origin-copy {
        padding-left: 40px !important;
        transform: none !important;
    }
    
    .vm-bg {
        content: url('../images/about-vision-eye-desktop.png');
    }
    
    .creed {
        min-height: 100vh;
        min-height: 100svh;
        padding-top: 64px !important;
        padding-bottom: 64px !important;
        /* Allow the stacked cards to extend past the image's vertical
           bounds without being clipped. */
        overflow: visible !important;
    }
    .creed-image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 0;
        pointer-events: none;
        display: block !important;
    }
    .creed-image img {
        content: url('../images/about-creed-pillars-desktop.jpg?v=20260521');
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: contain !important;
        object-position: left center !important;
        display: block;
        /* Image has its own built-in fade — no CSS mask needed. */
        -webkit-mask-image: none;
        mask-image: none;
    }
    
    .creed > .container {
        z-index: 2;
    }
    
    section.creed h2.creed-title {
        position: absolute !important;
        top: 70px !important;
        right: 0 !important;
        left: auto !important;
        width: 520px !important;
        max-width: 520px !important;
        margin: 0 !important;
        text-align: left !important;
        z-index: 5;
        color: var(--c-text) !important;
        background: transparent;
    }

    .creed-grid {
        grid-template-columns: 1fr !important;
    }
    .creed-cards {

        position: absolute !important;
        /* right=120 keeps the tiles 400px wide but aligns their LEFT edge
           with the title's left edge (0 + 520 - 400 = 120). */
        right: 120px !important;
        top: 155px !important;
        z-index: 2;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        width: 400px;
        max-width: 400px;
        margin: 0 !important;
    }

    .creed-cards li {
        padding: 6px 12px 8px !important;
    }
    .creed-cards li h3 {
        font-size: 13px !important;
        line-height: 1.25 !important;
    }
    .creed-cards li p {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
    }
    .creed-icon {
        width: 18px !important;
        height: 18px !important;
        margin-bottom: 0 !important;
    }

    
    
    .informal {
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        align-items: center;
    }
    
    .informal-copy {
        padding-top: 140px !important;
    }
    .informal-grid {
        align-items: stretch !important;
        min-height: 100vh;
        min-height: 100svh;
        width: 100%;
    }
    .informal-image {
        aspect-ratio: auto !important;
        height: 100% !important;
        align-self: stretch !important;
        display: block;
    }
    .informal-image img {
        content: url('../images/about-who-we-power-desktop.jpg');
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center;
        max-width: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 100%);
        mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 100%);
    }

    .informal-image::before,
    .informal-image::after {
        display: block !important;
        height: 32px !important;
    }
    
    .vm-section {
        min-height: 100vh;
        min-height: 100svh;
        display: flex;
        align-items: flex-start;
        padding-top: 40px !important;
    }
    .vm-overlay {
        width: 100%;
        max-width: none !important;
        margin: 0 !important;
        
        padding-left: 56px !important;
        padding-right: 56px !important;
    }
    .vm-split {
        max-width: 720px;
        margin-left: 0 !important;
        margin-right: auto !important;
    }
    
    .vm-title {
        font-family: var(--ff-display);
        font-size: clamp(28px, 3.4vw, 40px);
        font-weight: 600;
        line-height: 1.18;
        letter-spacing: -.4px;
        color: var(--c-text);
        margin: 0 0 72px;
        text-align: left;
    }
    .vm-title .text-purple {
        color: var(--c-purple-600);
        font-weight: 500;
    }
    
    .corridors-active {
        min-height: 100vh;
        min-height: 100svh;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden;
        display: flex;
        align-items: center;
    }
    .corridors-active-map-wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
    }
    .corridors-active-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block;
        background: #000;
    }
    /* Remove the top white-fade pseudo so the image stays sharp at
       the top edge under the (now-white) header. */
    .corridors-active::before { display: none !important; }
    /* Header nav turns white only on the Corridors page (dark map
       image), same approach used on the Services page. */
    body:has(.corridors-active) .primary-nav a { color: #FFFFFF; }
    body:has(.corridors-active) .primary-nav a:hover,
    body:has(.corridors-active) .primary-nav a.active { color: var(--c-purple-400); }

    
    .about-confidence {
        min-height: 100vh;
        min-height: 100svh;
        position: relative;
        display: flex;
        align-items: center;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden;
    }
    /* Image as full-bleed background — pulled out of the grid into
       absolute positioning so it spans the whole section. */
    .about-confidence-visual {
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        min-height: 0 !important;
        order: initial !important;
        overflow: hidden;
    }
    .about-confidence-visual img {
        content: url('../images/about-confidence-globe-desktop.jpg');
        width: 100% !important;
        height: 100% !important;
        
        object-fit: cover !important;
        object-position: center center !important;
        max-width: none !important;
        transform: scale(1.4) !important;
        transform-origin: center center;
        display: block;
    }
    /* Tile grid sits on top of the image — 2 columns at the far
       edges of the viewport, image visible in the middle. */
    .about-confidence > .container {
        position: relative;
        z-index: 2;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 24px !important;
    }
    .about-confidence-title {
        position: relative;
        z-index: 2;
    }
    .about-confidence-grid {
        display: block !important;
        position: relative;
    }
    .about-confidence-tiles {
        display: grid !important;
        grid-template-columns: 320px 1fr 320px !important;
        gap: 20px !important;
        transform: none !important;
        align-items: start;
    }
    .about-confidence-tiles .confidence-tile {
        background: rgba(255, 255, 255, .92);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, .6);
    }
    .about-confidence-tiles .confidence-tile:nth-child(1) { grid-column: 1; grid-row: 1; }
    .about-confidence-tiles .confidence-tile:nth-child(2) { grid-column: 1; grid-row: 2; }
    .about-confidence-tiles .confidence-tile:nth-child(3) { grid-column: 1; grid-row: 3; }
    .about-confidence-tiles .confidence-tile:nth-child(4) { grid-column: 3; grid-row: 1; }
    .about-confidence-tiles .confidence-tile:nth-child(5) { grid-column: 3; grid-row: 2; }
    .about-confidence-tiles .confidence-tile:nth-child(6) { grid-column: 3; grid-row: 3; }
    /* Extra breathing room between the hero (now 100vh) and the
       4 feature tile cards. */
    .features { padding: 140px 0 16px; }

    
    .services-hero {
        min-height: 100vh;
        min-height: 100svh;
        padding: 0 !important;
    }
    .services-hero-inner {
        min-height: 100vh !important;
        min-height: 100svh !important;
    }
    
    .services-hero-visual img {
        transform: none !important;
        object-position: right center !important;
        /* Subtle bottom + left fades — only the last ~8% of each edge
           dissolves into the section background; the rest of the image
           stays fully opaque. Two gradients are intersected so opacity
           survives only where BOTH masks are solid. */
        -webkit-mask-image:
            linear-gradient(to bottom, #000 0%, #000 92%, transparent 100%),
            linear-gradient(to right,  transparent 0%, #000 8%, #000 100%) !important;
        mask-image:
            linear-gradient(to bottom, #000 0%, #000 92%, transparent 100%),
            linear-gradient(to right,  transparent 0%, #000 8%, #000 100%) !important;
        -webkit-mask-composite: source-in !important;
                mask-composite: intersect !important;
    }
    .services-hero::before,
    .services-hero::after { display: none !important; }

    
    body:has(.services-hero) .primary-nav a { color: #FFFFFF; }
    body:has(.services-hero) .primary-nav a:hover,
    body:has(.services-hero) .primary-nav a.active { color: var(--c-purple-400); }

    
    .services-subhead {
        position: relative;
        margin-top: 120px !important;
    }
    .services-subhead::before {
        content: '';
        position: absolute;
        top: -60px;
        left: 0;
        width: 68%;
        height: 2px;
        background: linear-gradient(to right,
            transparent 0%,
            rgba(160, 49, 242, .35) 10%,
            rgba(160, 49, 242, .85) 50%,
            rgba(160, 49, 242, .35) 90%,
            transparent 100%);
        border-radius: 2px;
        box-shadow:
            0 0 12px rgba(160, 49, 242, .45),
            0 0 28px rgba(160, 49, 242, .25);
    }
    .services-subhead::after {
        content: '';
        position: absolute;
        top: -64px;
        left: 6%;
        width: 56%;
        height: 10px;
        background: radial-gradient(ellipse at center,
            rgba(160, 49, 242, .4) 0%,
            rgba(160, 49, 242, .15) 45%,
            transparent 75%);
        filter: blur(8px);
        pointer-events: none;
    }
}
h1 .text-purple { font-weight: 500; }

.hero-sub {
    color: var(--c-text-muted);
    font-size: 16px;
    line-height: 1.7;
    max-width: 460px;
    margin: 0 0 32px;
}

.hero-ctas {
    display: flex;
    gap: 14px;
    margin-bottom: 56px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .2px;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--c-midnight) 0%, var(--c-purple) 100%);
    box-shadow:
        0 10px 24px rgba(160, 49, 242, .32),
        0 4px 10px rgba(10, 6, 48, .20);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 30px rgba(160, 49, 242, .42),
        0 6px 14px rgba(10, 6, 48, .24);
}

.btn-ghost {
    color: var(--c-text);
    background: #F4EFFF;
    border-color: #E5DEFF;
    box-shadow:
        0 8px 20px rgba(91, 61, 191, .14),
        0 2px 6px rgba(91, 61, 191, .08);
}
.btn-ghost:hover {
    background: #ECE4FF;
    transform: translateY(-1px);
    box-shadow:
        0 12px 26px rgba(91, 61, 191, .20),
        0 4px 10px rgba(91, 61, 191, .12);
}

/* Partners — pinned to bottom-right of hero image */
.hero-partners {
    position: absolute;
    right: 36px;
    bottom: 26px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 22px;
    animation: partnersFadeUp 1s ease-out .4s both;
}
.partners-label {
    font-size: 13px;
    letter-spacing: 2.4px;
    color: var(--c-text);
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
}
.partner-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    opacity: .95;
    transition: opacity .2s ease, transform .2s ease;
}
.partner-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}
@keyframes partnersFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
    .hero-partners {
        position: static;
        margin: 18px auto 0;
        padding: 0 24px;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }
    .partner-logo { height: 28px; }
}

/* Hero visual — full-bleed background of the hero, with left fade for text readability */
.hero-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    transition: opacity .3s ease;
}
.hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0.88) 18%,
        rgba(255, 255, 255, 0.55) 34%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 62%);
    pointer-events: none;
}
/* Bottom fade — light shade so partners are still readable */
.hero-visual::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 90px;
    background: linear-gradient(to top,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
   FEATURE CARDS
   ============================================================ */

.features { padding: 32px 0 16px; }

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.feature-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 28px 26px 30px;
    box-shadow: var(--shadow-sm);
}

.feature-icon {
    width: auto;
    height: auto;
    background: transparent;
    color: var(--c-purple-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.feature-card h3 {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--c-text);
}
.feature-card p {
    font-size: 13.5px;
    color: var(--c-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* ============================================================
   CONVERSION INTELLIGENCE DIAL — heading image (centered)
   ============================================================ */
.conversion-dial-heading {
    position: relative;
    z-index: 2;
    padding: 32px 0 8px;
    text-align: center;
}
.conversion-dial-img {
    max-width: 260px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.dial-disclaimer {
    max-width: 720px;
    margin: 24px auto 0;
    padding: 16px 24px;
    background: #FAF7FF;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--c-text-muted);
    text-align: center;
    letter-spacing: .1px;
}
/* Desktop only (≥1101px): SETTLA heading image acts as an authoritative
   section header with a small disclaimer just below. Both overlay the
   corridor map. Tablet (≤1100px) falls back to the static mobile
   layout — text above the map, no overlay. */
@media (min-width: 1101px) {
    .conversion-dial-heading {
        z-index: 3;
        padding: 130px 0 0;
    }
    .conversion-dial-img {
        max-width: 380px;
    }
    .dial-disclaimer {
        max-width: 620px;
        margin: 40px auto 0;
        padding: 10px 20px;
        font-size: 12px;
        line-height: 1.55;
        background: rgba(250, 247, 255, .82);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        position: relative;
        z-index: 3;
    }
    .corridor-map {
        margin-top: -330px;
    }
    /* Dial sits over a lighter map so it stays the focal point */
    .corridor-map-img {
        opacity: .55;
    }
    /* Soften the map's top fade so the overlay reads cleanly */
    .corridor-map::before {
        height: 30px;
        background: linear-gradient(to bottom,
            rgba(255, 255, 255, .35) 0%,
            transparent 100%);
    }
}
.dial-disclaimer strong {
    color: var(--c-text);
    font-weight: 600;
    white-space: nowrap;
}
.dial-disclaimer a {
    color: var(--c-purple-600);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
}
.dial-disclaimer a:hover { border-bottom-color: var(--c-purple-600); }
@media (max-width: 760px) {
    .conversion-dial-img { max-width: 240px; }
    .dial-disclaimer {
        margin: 20px 18px 0;
        padding: 14px 16px;
        font-size: 12.5px;
        line-height: 1.65;
    }
    .dial-disclaimer strong { white-space: normal; }
}

/* ============================================================
   CORRIDOR MAP — full-bleed map under the feature cards
   ============================================================ */
.corridor-map {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0 0 24px;
}
.corridor-map-img {
    width: 100%;
    height: auto;
    display: block;
}
/* Top fade — solid white band hides the upper edge of the map */
.corridor-map::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to bottom,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* Bottom fade — mirror of top */
.corridor-map::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to top,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
   CONVERSION INTELLIGENCE DIAL
   ============================================================ */

.dial-section {
    position: relative;
    padding: 60px 0 90px;
    overflow: hidden;
    background: transparent;
}

.dial-bg {
    position: absolute; inset: 0;
    background-image: url('../images/world-map.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: .25;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.dial-inner { position: relative; z-index: 1; }

.dial-header {
    text-align: center;
    margin-bottom: 32px;
}

.dial-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.dial-brand span {
    font-family: var(--ff-display);
    font-weight: 800;
    letter-spacing: 6px;
    font-size: 26px;
    color: var(--c-text);
}

.dial-title {
    font-family: var(--ff-display);
    font-size: 18px;
    letter-spacing: 5px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
}

.dial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    justify-items: center;
}
.dial-side { display: none; }

/* Side panels */
.dial-side { display: flex; flex-direction: column; gap: 18px; }

.panel {
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.panel h4 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: .2px;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.panel-head h4 { margin: 0; }
.view-all {
    font-size: 12px;
    color: var(--c-purple-600);
    font-weight: 600;
}

.panel table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.panel th {
    text-align: left;
    color: var(--c-text-soft);
    font-weight: 500;
    font-size: 11px;
    padding: 4px 6px 8px;
    border-bottom: 1px solid #F0EBFB;
}
.panel td {
    padding: 8px 6px;
    border-bottom: 1px solid #F6F2FF;
    color: var(--c-text);
    font-weight: 500;
}
.panel tr:last-child td { border-bottom: 0; }

.up { color: var(--c-up); font-weight: 600; }

.flag {
    display: inline-block;
    width: 14px; height: 10px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
    background: linear-gradient(to right, #ff0000 30%, #fff 30% 70%, #ff0000 70%);
}

.dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}
.dot-green  { background: var(--c-success); }
.dot-amber  { background: var(--c-warn); }
.dot-purple { background: var(--c-purple-500); }

.status {
    font-weight: 600;
    font-size: 12px;
    display: inline-block;
    padding: 0;
    background: transparent;
}
.status.completed { color: var(--c-success); }
.status.progress  { color: var(--c-warn); }

/* Region cards */
.region-card {
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.region-head {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 4px;
    font-size: 13px;
    letter-spacing: .5px;
}
.region-card p {
    margin: 0;
    font-size: 12px;
    color: var(--c-text-muted);
}

/* CENTER: interactive dial — Framer-style dark gradient with two text rings */
.dial-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.dial-wheel {
    position: relative;
    width: 720px;
    aspect-ratio: 1;
    max-width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Dark gradient circular backdrop */
.dial-bg-circle {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(160, 49, 242, .35) 0%, transparent 45%),
        conic-gradient(
            from 215deg,
            #1B1145 0deg,
            #2D1466 90deg,
            #160547 180deg,
            #0E0627 270deg,
            #1B1145 360deg
        );
    box-shadow:
        inset 0 0 0 1px rgba(160, 49, 242, .25),
        inset 0 0 80px rgba(160, 49, 242, .15),
        0 30px 80px rgba(20, 8, 60, .4);
}

/* Both rings sit edge-to-edge of the dial */
.dial-ring-outer,
.dial-rotor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Inner ring rotates */
.dial-rotor {
    --rotation: 0deg;
    transform: rotate(var(--rotation));
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: grab;
    pointer-events: auto;
}
.dial-rotor.is-dragging {
    transition: none;
    cursor: grabbing;
}

/* Ring labels — positioned around the circle by --a (0..9 = step) */
.ring-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    font-family: var(--ff-sans);
    font-weight: 600;
    letter-spacing: 1.5px;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

/* Outer ring — muted, larger radius, static */
.dial-ring-outer .ring-label {
    --r: -300px;
    color: rgba(255, 255, 255, .35);
    font-size: 14px;
    transform: translate(-50%, -50%) rotate(calc(var(--a) * 36deg)) translateY(var(--r));
}

/* Inner ring — bright white, smaller radius, interactive */
.dial-rotor .ring-label {
    --r: -220px;
    color: rgba(255, 255, 255, .92);
    font-size: 17px;
    cursor: pointer;
    pointer-events: auto;
    padding: 6px 10px;
    transition: color .2s ease, text-shadow .2s ease;
    transform: translate(-50%, -50%) rotate(calc(var(--a) * 36deg)) translateY(var(--r));
}
.dial-rotor .ring-label:hover {
    color: #fff;
    text-shadow: 0 0 14px rgba(176, 66, 254, .8);
}
.dial-rotor .ring-label.active {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 18px rgba(176, 66, 254, 1);
}

.dial-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    background: #fff;
    border-radius: 16px;
    padding: 24px 22px 22px;
    text-align: center;
    z-index: 5;
    pointer-events: none;
    box-shadow:
        0 14px 40px rgba(20, 8, 60, .35),
        0 4px 12px rgba(20, 8, 60, .15);
}
.core-label {
    margin: 0 0 8px;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--c-text-soft);
}
.core-rate {
    margin: 0 0 10px;
    font-family: var(--ff-display);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--c-text);
    line-height: 1;
}
.core-save {
    display: inline-block;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-success);
    background: #BFE6CF;
    padding: 5px 14px;
    border-radius: 999px;
}
.dial-core hr {
    width: 100%;
    border: 0;
    border-top: 1px solid #ECE7FA;
    margin: 14px 0 12px;
}
.core-vs {
    margin: 0 0 4px;
    font-size: 9px;
    letter-spacing: 1.8px;
    font-weight: 600;
    color: var(--c-text-soft);
}
.core-bank {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--c-text);
    font-family: var(--ff-display);
    line-height: 1;
}
.core-banks {
    margin: 0;
    font-size: 10px;
    color: var(--c-text-soft);
}

@media (max-width: 760px) {
    .dial-wheel { width: 100%; max-width: 420px; }
    .dial-ring-outer .ring-label { --r: -170px; font-size: 11px; }
    .dial-rotor .ring-label { --r: -125px; font-size: 13px; }
    .dial-core { width: 150px; padding: 18px 14px; }
    .core-rate { font-size: 24px; }
    .core-bank { font-size: 16px; }
}

.dial-wheel {
    position: relative;
    width: 420px;
    aspect-ratio: 1;
    max-width: 100%;
}

.dial-outer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Inner purple gradient ring */
.dial-ring {
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background:
        conic-gradient(
            from 0deg,
            var(--c-midnight) 0deg,
            var(--c-purple) 60deg,
            var(--c-extreme-blue) 130deg,
            var(--c-purple) 200deg,
            var(--c-midnight) 270deg,
            var(--c-purple) 330deg,
            var(--c-midnight) 360deg
        );
    box-shadow:
        inset 0 0 0 8px rgba(255, 255, 255, .35),
        0 18px 40px rgba(58, 31, 158, .35);
}

/* Mask middle to make a ring */
.dial-ring::before {
    content: '';
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        inset 0 4px 14px rgba(58, 31, 158, .12),
        0 4px 18px rgba(58, 31, 158, .12);
}

/* Currency chips on ring */
.chip {
    position: absolute;
    top: 50%; left: 50%;
    transform-origin: center;
    background: #fff;
    color: var(--c-midnight);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(31, 15, 92, .18);
    z-index: 2;
}
.chip-eur  { transform: rotate(-130deg) translate(0, -150px) rotate(130deg); }
.chip-cad  { transform: rotate(-90deg)  translate(0, -150px) rotate(90deg); }
.chip-jpy  { transform: rotate(-50deg)  translate(0, -150px) rotate(50deg); }
.chip-inr  { transform: rotate(-15deg)  translate(0, -150px) rotate(15deg); }
.chip-cny  { transform: rotate(40deg)   translate(0, -150px) rotate(-40deg); }
.chip-eur2 { transform: rotate(85deg)   translate(0, -150px) rotate(-85deg); }
.chip-aud  { transform: rotate(-160deg) translate(0, -150px) rotate(160deg); }
.chip-usd  { transform: rotate(140deg)  translate(0, -150px) rotate(-140deg); }
.chip-ngn {
    background: linear-gradient(135deg, var(--c-purple), var(--c-midnight));
    color: #fff;
    transform: rotate(-115deg) translate(0, -150px) rotate(115deg);
    box-shadow: 0 4px 14px rgba(58, 31, 158, .45);
}

/* Inner core panel */
.dial-core {
    position: absolute;
    inset: 28%;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    box-shadow:
        0 0 0 1px #ECE7FA,
        0 12px 30px rgba(58, 31, 158, .15);
    z-index: 3;
}
.core-label {
    margin: 0;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--c-text-soft);
}
.core-rate {
    margin: 4px 0 6px;
    font-family: var(--ff-display);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--c-text);
}
.core-save {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--c-success);
    background: var(--c-success-bg);
    padding: 3px 10px;
    border-radius: 999px;
}
.up-arrow { font-size: 8px; }
.dial-core hr {
    width: 60%;
    border: 0;
    border-top: 1px solid #ECE7FA;
    margin: 8px 0;
}
.core-vs {
    margin: 0;
    font-size: 9px;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: var(--c-text-soft);
}
.core-bank {
    margin: 2px 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--c-text);
    font-family: var(--ff-display);
}
.core-banks {
    margin: 0;
    font-size: 9px;
    color: var(--c-text-soft);
}

.dial-stamp {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 22px rgba(58, 31, 158, .22);
    z-index: 4;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    background: var(--c-midnight);
    color: var(--c-on-dark-soft);
    padding: 44px 0 24px;
    margin-top: 0;
}

/* ----- Top row: newsletter heading + email form ----- */
.footer-top {
    display: grid;
    
    grid-template-columns: 1.2fr 2fr;
    gap: 56px;
    align-items: center;
    padding-bottom: 32px;
}
.footer-newsletter h3 {
    margin: 0 0 12px;
    font-family: var(--ff-display);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    color: #fff;
    letter-spacing: -.2px;
}
.footer-newsletter p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--c-on-dark-muted);
    max-width: 460px;
}
.footer-subscribe {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    justify-self: start;
    width: 100%;
    max-width: 640px;
}

/* SVG lens-flare spark — hidden, kept in HTML for potential re-use */
.subscribe-spark {
    display: none;
}

.footer-subscribe input[type="email"] {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    padding: 16px 22px;
    font: 400 14px/1 var(--ff-sans);
    color: var(--c-text);
    outline: none;
    transition: box-shadow .2s ease;
}
.footer-subscribe input[type="email"]::placeholder { color: var(--c-text-soft); }
.footer-subscribe input[type="email"]:focus {
    box-shadow: 0 0 0 3px rgba(160, 49, 242, .35);
}

/* SUBSCRIBE button — clean white CTA with permanent subtle purple glow */
.footer-subscribe button {
    background: #FFFFFF;
    color: var(--c-text);
    border: 0;
    border-radius: 12px;
    padding: 16px 32px;
    font: 600 13px/1 var(--ff-sans);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    z-index: 2;
    box-shadow:
        0 0 18px rgba(160, 49, 242, .35),
        0 0 36px rgba(160, 49, 242, .2),
        0 2px 8px rgba(0, 0, 0, .18);
    transition: box-shadow .3s ease, transform .2s ease;
}
.footer-subscribe button:hover {
    transform: translateY(-1px);
}
.footer-subscribe button:active {
    transform: translateY(0);
}

/* ----- Main row: brand block + 3 link columns ----- */
.footer-main {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 56px;
    padding-top: 28px;
    align-items: start;
}

/* New horizontal hex + SETTLA wordmark */
.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.footer-logo-mark {
    height: 100px;
    width: auto;
    display: block;
}
.footer-logo-text {
    font-family: var(--ff-display);
    font-weight: 700;
    letter-spacing: 6px;
    font-size: 22px;
    color: #fff;
}

.footer-tag {
    margin: -28px 0 0;           /* pulled tight to the logo */
    text-align: left;
    width: fit-content;
    padding: 0 0 0 140px;        /* shifted further right */
    font-size: 14px;
    font-weight: 500;
    color: var(--c-on-dark-muted);
    line-height: 1.4;
    letter-spacing: .2px;
}

/* ----- Bottom row: copyright + socials ----- */
.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    margin-top: 16px;
}

.socials {
    display: flex;
    gap: 18px;
    margin: 0;
}
.socials a {
    width: 24px;
    height: 24px;
    color: var(--c-on-dark-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease, transform .15s ease;
}
.socials a:hover {
    color: var(--c-purple-400);
    transform: translateY(-1px);
}

.footer-copy {
    margin: 0;
    font-size: 14px;
    color: var(--c-on-dark-faded);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.footer-col h5 {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    margin: 0 0 12px;
    font-family: var(--ff-display);
}

.footer-col ul li {
    margin-bottom: 8px;
}
.footer-col a {
    font-size: 13.5px;
    color: var(--c-on-dark-muted);
    transition: color .2s ease;
    line-height: 1.45;
    display: inline-block;
}
.footer-col a:hover { color: var(--c-purple-400); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    .site-header {
        position: relative;
        background: var(--c-bg);
    }
    .hero { padding: 24px 0; }
    .hero-inner {
        min-height: 0;
    }
    .hero-copy { padding-top: 0; padding-bottom: 0; max-width: 100%; }
    .hero-visual {
        position: relative;
        inset: auto;
        margin-top: 32px;
        border-radius: 30px 30px 30px 120px;
        aspect-ratio: 5 / 4;
        height: auto;
    }
    .hero-visual::after {
        background: none;
    }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .dial-grid { grid-template-columns: 1fr; }
    .dial-center { order: -1; }

    .footer-top { grid-template-columns: 1fr; gap: 28px; }
    .footer-subscribe { justify-self: stretch; max-width: none; }
    .footer-main { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 1100px) {
    .primary-nav { display: none; }
    .nav-toggle { display: flex; }
    .header-inner { height: 64px; }
}

@media (max-width: 760px) {
    .features-grid { grid-template-columns: 1fr; }
    .footer-links { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-subscribe { flex-direction: column; align-items: stretch; }
    .footer-subscribe button { width: 100%; }

    .dial-wheel { width: 100%; max-width: 360px; }
    .chip { font-size: 9px; padding: 4px 8px; }
    .chip-eur  { transform: rotate(-130deg) translate(0, -130px) rotate(130deg); }
    .chip-cad  { transform: rotate(-90deg)  translate(0, -130px) rotate(90deg); }
    .chip-jpy  { transform: rotate(-50deg)  translate(0, -130px) rotate(50deg); }
    .chip-inr  { transform: rotate(-15deg)  translate(0, -130px) rotate(15deg); }
    .chip-cny  { transform: rotate(40deg)   translate(0, -130px) rotate(-40deg); }
    .chip-eur2 { transform: rotate(85deg)   translate(0, -130px) rotate(-85deg); }
    .chip-aud  { transform: rotate(-160deg) translate(0, -130px) rotate(160deg); }
    .chip-usd  { transform: rotate(140deg)  translate(0, -130px) rotate(-140deg); }
    .chip-ngn  { transform: rotate(-115deg) translate(0, -130px) rotate(115deg); }

    h1 { font-size: 30px; }
}

/* ============================================================
   HOW IT WORKS PAGE
   ============================================================ */

.primary-nav a.active { color: var(--c-purple-600); }

.page-crumb {
    background: var(--c-bg);
    padding: 18px 0 0;
}
.page-crumb span {
    font-size: 12.5px;
    letter-spacing: .2px;
    color: var(--c-text-soft);
}

/* How It Works intro — text on left, large decorative image on right (background-like, doesn't affect layout) */
.hiw-intro {
    position: relative;
    /* No overflow:hidden — image is allowed to bleed down behind the next section */
    padding: 0 0 24px;
}

.hiw-page-wrap {
    position: relative;
}

.hiw-intro-visual {
    position: absolute;
    top: 60px;
    bottom: 0;
    right: 0;
    width: 320px;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
}
.hiw-intro-visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
}
@media (max-width: 980px) {
    .hiw-intro-visual { width: 220px; }
}
@media (max-width: 760px) {
    .hiw-intro-visual { width: 140px; opacity: .6; }
}
.hiw-intro-grid {
    display: block;
    position: relative;
    z-index: 2;
}
.hiw-intro-copy {
    padding-top: 80px;
    padding-bottom: 32px;
    max-width: 540px;
}
@media (max-width: 760px) {
    .hiw-intro-copy { padding-top: 140px; }
}
.hiw-intro h1 {
    font-family: var(--ff-display);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.6px;
    margin: 0 0 24px;
    color: var(--c-text);
}
.hiw-intro h1 .text-purple { font-weight: 500; }
.hiw-lead {
    margin: 0;
    font-size: 15px;
    color: var(--c-text-muted);
    line-height: 1.7;
    max-width: 400px;
}

/* ---------- Layer rows ---------- */

.layers { padding: 32px 0 60px; }

.layer-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: center;
    padding: 18px 28px;
    border-radius: 22px;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* Layer number column */
.layer-num {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.layer-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    color: var(--c-purple-600);
    text-transform: uppercase;
}
.layer-digit {
    font-family: var(--ff-display);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: var(--c-purple-600);
}

.layer-cube-wrap {
    width: 300px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.layer-cube-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
/* Layer 3 — slightly larger cube to highlight the "Live" layer */
.layer-live .layer-cube-wrap {
    width: 340px;
    height: 300px;
}
@media (max-width: 900px) {
    .layer-cube-wrap { width: 220px; height: 200px; }
    .layer-live .layer-cube-wrap { width: 240px; height: 220px; }
}

/* Isometric stacked-card cube */
.iso-cube {
    position: relative;
    width: 160px;
    height: 160px;
}
.iso-cube-back {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 28px;
    background: linear-gradient(135deg, #BFA8EE 0%, #9B82DC 100%);
    top: 26px;
    left: 26px;
    z-index: 0;
    filter: blur(.2px);
    box-shadow: 0 18px 30px rgba(91, 61, 191, .22);
}
.iso-cube-face {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 28px;
    background: linear-gradient(150deg, #FFFFFF 0%, #F2EBFD 100%);
    border: 1px solid #ECE5F8;
    top: 4px;
    left: 4px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-purple-600);
    box-shadow:
        inset 0 -10px 24px rgba(120, 90, 200, .08),
        0 8px 22px rgba(120, 90, 200, .12);
}

/* Green variant for the "Live" layer */
.iso-cube-green .iso-cube-back {
    background: linear-gradient(135deg, #9DD6A8 0%, #5EAB75 100%);
    box-shadow: 0 18px 30px rgba(40, 130, 70, .22);
}
.iso-cube-green .iso-cube-face {
    background: linear-gradient(150deg, #FFFFFF 0%, #ECF7EF 100%);
    border-color: #DCEFE0;
    color: var(--c-success);
    box-shadow:
        inset 0 -10px 24px rgba(40, 130, 70, .08),
        0 8px 22px rgba(40, 130, 70, .12);
}

/* Layer text content */
.layer-content { padding-top: 16px; }
.layer-content h2 {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--c-text);
    letter-spacing: -.2px;
}
.layer-tag {
    color: var(--c-purple-600);
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 14px;
}
.layer-tag-green { color: var(--c-success); }
.layer-desc {
    font-size: 14px;
    color: var(--c-text-muted);
    line-height: 1.7;
    max-width: 760px;
    margin: 0 0 18px;
}
.layer-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    color: var(--c-text);
}
.layer-status strong { font-weight: 700; font-size: 16px; }
.status-text { font-weight: 600; font-size: 16px; }
.status-text.purple { color: var(--c-purple-600); }
.status-text.green  { color: var(--c-success); }

/* Highlighted "Live" layer card — no border (clean, matches reference) */
.layer-live {
    background: transparent;
}

/* ---------- CTA banner ---------- */

.hiw-cta { padding: 30px 0 80px; }

.hiw-cta-card {
    background: #FAF7FF;
    border: 1px solid var(--c-border);
    border-radius: 22px;
    padding: 26px 32px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.hiw-cta-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 240px; height: 100%;
    background-image:
        linear-gradient(45deg, rgba(120, 90, 200, .07) 25%, transparent 25%, transparent 50%, rgba(120, 90, 200, .07) 50%, rgba(120, 90, 200, .07) 75%, transparent 75%, transparent);
    background-size: 14px 14px;
    opacity: .9;
    pointer-events: none;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    mask-image: linear-gradient(to right, transparent, #000 40%);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40%);
}

.hiw-cta-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--c-border);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.hiw-cta-text {
    margin: 0;
    font-size: 14.5px;
    color: var(--c-text);
    line-height: 1.6;
    max-width: 520px;
    position: relative;
    z-index: 1;
}

.hiw-cta-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* ============================================================
   CORRIDORS PAGE — full-width Active Corridors visual + animated currency ticker
   ============================================================ */
.corridors-active,
.corridors-supported {
    position: relative;
    width: 100%;
    background: #FAFAFE;
    overflow: hidden;
}
.corridors-active { margin-top: -200px; }

.corridors-active-img,
.corridors-supported-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Top + bottom soft white fades on both corridors images */
.corridors-active::before,
.corridors-supported::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to bottom,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* Lighter top fade on the second image — much shorter and softer */
.corridors-supported::before {
    height: 40px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, .65) 0%,
        transparent 100%);
}
.corridors-active::after,
.corridors-supported::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to top,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* ----- Active Corridors — region cards under the world map ----- */
.corridors-active-map-wrap {
    position: relative;
    width: 100%;
    line-height: 0;
}
.region-cards {
    list-style: none;
    margin: -56px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    position: relative;
    z-index: 2;
}
.region-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px 18px;
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(58, 31, 158, .08);
}
.region-card-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #FFFFFF;
}
.region-card--navy .region-card-icon {
    background: linear-gradient(135deg, #1F0F5C 0%, #2C1A8E 100%);
}
.region-card--purple .region-card-icon {
    background: linear-gradient(135deg, #7B5CFF 0%, #B042FE 100%);
}
.region-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.region-card-code {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .5px;
    line-height: 1;
}
.region-card--navy .region-card-code { color: #1F0F5C; }
.region-card--purple .region-card-code { color: #B042FE; }
.region-card-name {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--c-text);
}
.region-card-rule {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 10px;
    height: 2px;
    border-radius: 2px;
}
.region-card--navy .region-card-rule { background: #1F0F5C; }
.region-card--purple .region-card-rule { background: #B042FE; }

@media (max-width: 980px) {
    .region-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: -24px;
    }
}
@media (max-width: 560px) {
    .region-cards {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 8px;
    }
    .region-card { padding: 14px 16px 18px; }
}

/* Currency ticker — horizontal scrolling marquee railway, full viewport width */
.currency-ticker {
    width: 100%;
    overflow: hidden;
    background: #FFFFFF;
    color: var(--c-text);
    padding: 18px 0;
    
    margin: 40px 0;
}
/* First ticker sits right under the top map — pull it up close to the
   image without moving the image itself. */
.corridors-active + .currency-ticker {
    margin-top: 0;
}
.currency-ticker-track {
    display: flex;
    width: max-content;
    animation: currencyTickerScroll 40s linear infinite;
}
.currency-ticker-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}
.currency-ticker-list li {
    font-family: var(--ff-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--c-text);
    padding: 0 28px;
    position: relative;
    white-space: nowrap;
}
.currency-ticker-list li::after {
    content: '·';
    position: absolute;
    right: -3px;
    color: var(--c-purple-600);
    font-weight: 700;
}
.currency-ticker-list li:last-child::after { content: ''; }
.currency-ticker:hover .currency-ticker-track { animation-play-state: paused; }
@keyframes currencyTickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 760px) {
    .currency-ticker-list li { font-size: 12px; padding: 0 18px; letter-spacing: 1.5px; }
    .currency-ticker-track { animation-duration: 28s; }
}

/* Responsive — How It Works */
@media (max-width: 900px) {
    .layer-row {
        grid-template-columns: 220px 1fr;
        gap: 24px;
        padding: 16px 14px;
    }
    .layer-live { grid-template-columns: 240px 1fr; }
    .hiw-cta-card { grid-template-columns: 1fr; text-align: center; gap: 18px; }
    .hiw-cta-icon { margin: 0 auto; }
    .hiw-cta-actions { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 640px) {
    .layer-row {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 14px;
        justify-items: center;
    }
    .layer-cube-wrap { width: 180px; height: 170px; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

.text-purple { color: var(--c-purple-600); }

.eyebrow-underline {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-purple-600);
    border-bottom: 2px solid var(--c-purple-600);
    padding-bottom: 4px;
    margin: 0 0 24px;
}

.eyebrow-soft {
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-text-soft);
    margin: 0 0 18px;
}

.section-h2 {
    font-family: var(--ff-display);
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 600;
    letter-spacing: -.4px;
    margin: 0 0 8px;
    color: var(--c-text);
}
.section-divider {
    display: block;
    width: 48px;
    height: 2px;
    background: var(--c-purple-600);
    border-radius: 2px;
    margin: 0 0 18px;
}
.lead-purple {
    color: var(--c-purple-600);
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 24px;
    letter-spacing: .1px;
}

/* ----- Hero ----- */
.about-hero {
    padding: 0 0 16px;
    position: relative;
    overflow: hidden;
}
.about-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    width: 100%;
}
.about-hero-copy {
    
    padding: 220px 40px 40px max(24px, calc((100vw - var(--container)) / 2));
}
.about-hero-visual {
    width: 100%;
    align-self: stretch;
    position: relative;
}
/* Top fade — only at the very top edge of the image */
/* Top + left fades combined into one pseudo (same strength as before) */
.about-hero-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            #FFFFFF 0%,
            rgba(255, 255, 255, .7) 30%,
            rgba(255, 255, 255, .25) 70%,
            transparent 100%) top left / 100% 130px no-repeat,
        linear-gradient(to right,
            #FFFFFF 0%,
            rgba(255, 255, 255, .7) 30%,
            rgba(255, 255, 255, .25) 70%,
            transparent 100%) top left / 130px 100% no-repeat;
    pointer-events: none;
    z-index: 1;
}

.about-hero-visual::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 140px;
    background: linear-gradient(to top,
        #FFFFFF 0%,
        #FFFFFF 28%,
        rgba(255, 255, 255, .7) 55%,
        rgba(255, 255, 255, .25) 80%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.about-h1 {
    font-family: var(--ff-display);
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.5px;
    margin: 0 0 24px;
    color: var(--c-text);
    white-space: nowrap;
}
.about-h1 .text-purple { white-space: nowrap; }
.about-lead {
    margin: 0 0 40px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-muted);
    max-width: 480px;
}
.about-hero-visual {
    position: relative;
}
.about-hero-visual img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.about-hero-points {
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
    width: 100%;
}
.hero-point {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 10px 12px 12px;
    box-shadow: var(--shadow-sm);
}
.hero-point-icon {
    width: 26px;
    height: 26px;
    color: var(--c-purple-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}
.hero-point h3 {
    margin: 0 0 2px;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--c-text);
    text-align: left;
}
.hero-point p {
    margin: 0;
    font-size: 13.5px;
    color: var(--c-text-muted);
    line-height: 1.55;
    text-align: left;
    width: 100%;
}

/* ----- Origin Story ----- */
.origin {
    padding: 16px 0 50px;
    overflow: hidden;
}
.origin-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
    align-items: stretch;
    width: 100%;
}
.origin-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.origin-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
    
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 18%, #000 100%);
    mask-image: linear-gradient(to left, transparent 0%, #000 18%, #000 100%);
}
/* Top fade — tiny solid band hides the edge line, quick taper */
.origin-image::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40px;
    background: linear-gradient(to bottom,
        #FFFFFF 0%,
        #FFFFFF 30%,
        rgba(255, 255, 255, .35) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* Bottom fade — mirror of top */
.origin-image::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 22px;
    background: linear-gradient(to top,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .3) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.origin-copy {
    padding: 80px max(24px, calc((100vw - var(--container)) / 2)) 30px 100px;
    align-self: center;
    text-align: left;
    /* Shift right without resizing the text column (no padding change,
       so wrap/line-length stays identical). */
    transform: translateX(40px);
}
.origin-copy .section-h2 {
    text-align: center;
}
.origin-copy .lead-purple {
    text-align: center;
    margin-bottom: 32px;
}
.origin-copy p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-muted);
    text-align: left;
}
.origin-copy p.lead-purple {
    color: var(--c-purple-600);
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    margin-bottom: 32px;
}
.origin-copy p strong {
    color: var(--c-purple-600);
    font-weight: 600;
}

/* ----- Vision + Mission ----- */
.vm-section {
    position: relative;
    padding: 50px 0;
    overflow: hidden;
    background: #fff;
}

.vm-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
    z-index: 0;
    pointer-events: none;
    /* Fade the image's left edge into the page's #fff so the slightly
       off-white image background blends seamlessly with the section. */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, .65) 18%,
        #000 35%,
        #000 100%);
    mask-image: linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, .65) 18%,
        #000 35%,
        #000 100%);
}
/* Fades removed — image renders edge-to-edge with no top/bottom white blend. */
.vm-overlay {
    position: relative;
    z-index: 2;
}
.vm-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    /* push cards to the LEFT side of the section, where the image's white space now sits */
    margin-right: 44%;
}
.vm-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 28px 32px;
}
.vm-card p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-muted);
}
@media (max-width: 980px) {
    .vm-split {
        grid-template-columns: 1fr;
        margin-left: 0;
        margin-right: 0;
    }
    .vm-bg {
        opacity: .25;       /* fade image on mobile so cards stay readable */
    }
}

/* ----- CREED — What We Stand For ----- */
.creed {
    padding: 50px 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.creed-title {
    font-family: var(--ff-display);
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 600;
    letter-spacing: -.4px;
    margin: 0 0 24px;
    color: var(--c-text);
    line-height: 1.2;
}
.creed-title em {
    font-style: normal;
    font-weight: 700;
    color: var(--c-purple-600);
}
.creed-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.5fr;
    gap: 24px;
    align-items: center;
    /* Constrain to the page container so tiles never reach the viewport edge */
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.creed-image {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.creed-image img {
    width: 100%;
    height: auto;
    display: block;
}
.creed-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* Desktop-only — tiles stacked left, image right with top/bottom fade */
@media (min-width: 1101px) {
    .creed-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .creed-image {
        max-width: 480px;
        order: 2;
        margin: 0 0 0 auto;
    }
    .creed-image img {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .creed-cards {
        order: 1;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .creed-cards li {
        padding: 8px 12px 10px;
        gap: 2px;
    }
    .creed-icon {
        width: 20px;
        height: 20px;
        margin-bottom: 0;
    }
    .creed-cards li h3 {
        font-size: 14px;
        line-height: 1.25;
    }
    .creed-cards li p {
        font-size: 12.5px;
        line-height: 1.5;
    }
}
@media (max-width: 980px) {
    .creed-cards { transform: none; }
}
.creed-cards li {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 12px 14px 14px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.creed-icon {
    color: var(--c-purple-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 2px;
}
.creed-cards li h3 {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    color: var(--c-text);
}
.creed-cards li p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--c-text-muted);
}
.creed-card-wide { grid-column: span 1; }

/* ----- Informal Economy ----- */
.informal {
    padding: 50px 0;
    overflow: hidden;
}
.informal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    width: 100%;
}
.informal-copy {
    padding: 0 56px 0 max(24px, calc((100vw - var(--container)) / 2));
}
.informal-image {
    width: 100%;
    height: 100%;
}
.informal-h2 {
    font-family: var(--ff-display);
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.5px;
    margin: 0 0 28px;
    color: var(--c-text);
}
.informal-h2 em {
    font-style: normal;
    color: var(--c-purple-600);
}
.informal-copy p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-muted);
}
.informal-cta {
    margin: 28px 0 22px !important;
    font-size: 14px;
    font-weight: 600;
}
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .15s ease;
}
.link-arrow:hover { gap: 12px; }
.informal-btn {
    margin-top: 4px;
}
.informal-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    width: 100%;
}
.informal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Top white fade — solid band at the edge fully hides the line */
.informal-image::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to bottom,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* Bottom white fade — solid band at the edge fully hides the line */
.informal-image::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to top,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.about-confidence {
    position: relative;
    width: 100%;
    background: #FFFFFF;
    padding: 0;
    overflow: hidden;
}
.about-confidence picture,
.about-confidence picture img,
.about-confidence-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
.about-confidence-title {
    text-align: left;
    margin: 0 0 40px;
    max-width: 720px;
}
.about-confidence-grid {
    display: grid;
    
    grid-template-columns: 0.85fr 1.5fr;
    gap: 24px;
    align-items: center;
}
.about-confidence-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    min-height: 520px;
}
.about-confidence-visual img {
    width: 100%;
    max-width: 560px;
    height: auto;
    display: block;
    object-fit: contain;
    
    transform: scale(2);
    transform-origin: center center;
}
/* Fades removed */
.about-confidence-visual::before,
.about-confidence-visual::after { display: none; }
.about-confidence-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 980px) {
    .about-confidence-tiles { transform: none; }
}
.confidence-tile {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 16px 18px 18px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.confidence-icon {
    color: var(--c-purple-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 2px;
}
.confidence-tile h3 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--c-text);
    margin: 0;
    line-height: 1.3;
}
.confidence-tile p {
    margin: 0;
    font-family: var(--ff-sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--c-text-muted);
}
.about-confidence-foot {
    text-align: center;
    margin: 36px 0 0;
    font-size: 13px;
    color: var(--c-text-soft);
    letter-spacing: .2px;
}

/* Responsive */
@media (max-width: 980px) {
    .about-confidence-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .about-confidence-title { text-align: left; }
    .about-confidence-visual img { max-width: 460px; }
}
@media (max-width: 640px) {
    .about-confidence { padding: 44px 0 40px; }
    .about-confidence-title { margin-bottom: 28px; }
    .about-confidence-visual img { max-width: 320px; }
    .about-confidence-tiles { grid-template-columns: 1fr; }
    .confidence-tile { padding: 14px 16px 16px; }
}

/* Responsive — About */
@media (max-width: 980px) {
    .about-hero-inner,
    .origin-grid,
    .vm-split,
    .creed-grid,
    .informal-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-hero-points { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .creed-cards { grid-template-columns: 1fr; }
    .creed-image img { width: 280px; }

    /* On smaller screens, restore container padding for the text columns. */
    .about-hero-copy,
    .origin-copy,
    .informal-copy { padding: 32px 24px; }
    .origin-image { aspect-ratio: 16 / 10; }
    .informal-image { aspect-ratio: 16 / 10; }
    .about-hero-inner,
    .origin-grid,
    .informal-grid { display: flex; flex-direction: column; }
    .origin-image { order: -1; }
}
@media (max-width: 640px) {
    .about-hero-points { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICES PAGE
   ============================================================ */

/* Hero — Who We Power (text overlaid on full-bleed image) */
.services-hero {
    position: relative;
    overflow: hidden;
    padding: 0 0 24px;
}
/* Top fade — softens the upper edge of the image */
.services-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom,
        #FFFFFF 0%,
        rgba(255, 255, 255, .95) 18%,
        rgba(255, 255, 255, .8)  35%,
        rgba(255, 255, 255, .55) 55%,
        rgba(255, 255, 255, .25) 78%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* Bottom fade removed — image renders flush to the bottom edge of the section. */
.services-hero::after { display: none; }
/* Full-bleed background image */
.services-hero-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.services-hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchor to top-right so the built-in fade at the bottom of the
       PNG falls below the visible viewport and is cropped out. */
    object-position: right top;
    display: block;
    transform: scale(0.85);
    transform-origin: right top;

    /* Mask: small top fade (kept) + hard cut just above the PNG's
       built-in bottom fade so we never see it. */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 88.01%);
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 88.01%);
}
/* Left-fade overlay so the text is readable */
.services-hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        rgba(255, 255, 255, .96) 0%,
        rgba(255, 255, 255, .85) 22%,
        rgba(255, 255, 255, .55) 42%,
        rgba(255, 255, 255, .15) 60%,
        transparent 75%);
    pointer-events: none;
}
.services-hero-inner {
    position: relative;
    z-index: 2;
    min-height: 620px;
}
.services-hero-copy {
    position: relative;
    z-index: 2;
    padding-top: 80px;
    padding-bottom: 32px;
    max-width: 540px;
}
.services-h1 {
    font-family: var(--ff-display);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.6px;
    margin: 0 0 24px;
    color: var(--c-text);
}
.services-h1 .text-purple {
    font-weight: 500;
}
.services-lead {
    font-size: 15px;
    line-height: 1.7;
    color: var(--c-text-muted);
    max-width: 400px;
    margin: 0 0 32px;
}
.services-subhead {
    font-family: var(--ff-display);
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 600;
    color: var(--c-purple-600);
    margin: 0 0 12px;
    letter-spacing: -.2px;
}
.services-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-muted);
    max-width: 380px;
    margin: 0;
}
@media (max-width: 980px) {
    .services-hero-inner { min-height: 0; }
    .services-hero-copy { padding-top: 140px; }
}

/* Who We Power — 6 tiles grid */
.wwp-section {
    padding: 56px 0;
}
.wwp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 40px;
}
.wwp-tile {
    display: flex;
    flex-direction: column;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 28px 26px 30px;
    box-shadow: var(--shadow-sm);
    
    height: 100%;
}
.wwp-tile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    min-height: 48px;
}
.wwp-tile-icon {
    color: var(--c-purple-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wwp-tile h3 {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--c-text);
    line-height: 1.3;
}
.wwp-tile-image {
    width: 100%;
    
    height: 240px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 18px;
    background: transparent;
    flex-shrink: 0;
}
.wwp-tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.wwp-tile-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--c-text-muted);
    margin: 0 0 16px;
    min-height: 70px;
}
.wwp-tile-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: auto;
}
.wwp-tile-list li {
    position: relative;
    font-size: 13.5px;
    color: var(--c-text);
    line-height: 1.5;
    padding: 4px 0 4px 20px;
}
.wwp-tile-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-purple-600);
}
.wwp-cta {
    text-align: center;
    margin-top: 56px;
}

@media (max-width: 980px) {
    .wwp-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}
@media (max-width: 640px) {
    .wwp-grid { grid-template-columns: 1fr; }
}

/* Service rows (Phase 1, Phase 2, Phase 4) — image + text split */
.service-row {
    padding: 30px 0 30px;
    overflow: hidden;
}
.service-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    width: 100%;
}
.service-row-grid.service-row-reverse .service-row-image { order: 2; }
.service-row-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.service-row-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.service-row-white-glove .service-row-image,
.service-row-roadmap .service-row-image,
.service-row-roadmap-intro .service-row-image,
.service-row-concierge .service-row-image,
.service-row-overlooked .service-row-image {
    aspect-ratio: auto;
    height: 100%;
    min-height: 460px;
}
.service-row-white-glove .service-row-image img,
.service-row-roadmap .service-row-image img,
.service-row-roadmap-intro .service-row-image img,
.service-row-concierge .service-row-image img,
.service-row-overlooked .service-row-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
/* Top + bottom fades for the two new sections (concierge + overlooked engines) */
.service-row-concierge .service-row-image::before,
.service-row-overlooked .service-row-image::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 70px;
    background: linear-gradient(to bottom,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.service-row-concierge .service-row-image::after,
.service-row-overlooked .service-row-image::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 70px;
    background: linear-gradient(to top,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* Road Map intro section — lead "Our journey. Your future." + button spacing */
.roadmap-intro-lead {
    color: var(--c-purple-600);
    font-weight: 600;
    font-size: 16px;
    margin: 8px 0 18px;
}
.roadmap-intro-cta {
    margin-top: 24px;
}
/* Top + bottom fades for the new roadmap-intro image (mirrors the existing roadmap fades) */
.service-row-roadmap-intro .service-row-image::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 70px;
    background: linear-gradient(to bottom,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.service-row-roadmap-intro .service-row-image::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 70px;
    background: linear-gradient(to top,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* Top + bottom fades for roadmap image */

.service-row-roadmap,
.service-row-overlooked,
.service-row-concierge,
.service-row-white-glove {
    position: relative;
    background: #FAFAFE;
    padding: 0 !important;
    margin: 0;
    /* Guarantee enough vertical room so the absolute-positioned text
       overlay never collides with the top/bottom fades. */
    min-height: 360px;
}

.service-row-white-glove .service-row-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0;
    position: relative;
}
.service-row-white-glove .service-row-image {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100%;
    position: relative;
    order: 0;
}
.service-row-white-glove .service-row-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
}
.service-row-white-glove .service-row-image::before,
.service-row-white-glove .service-row-image::after {
    background-color: transparent;
    background-image: linear-gradient(var(--_dir, to bottom),
        #FAFAFE 0%,
        #FAFAFE 45%,
        rgba(250, 250, 254, .55) 75%,
        transparent 100%);
    height: 70px;
}
.service-row-white-glove .service-row-image::before { --_dir: to bottom; }
.service-row-white-glove .service-row-image::after  { --_dir: to top; }
.service-row-white-glove .service-row-copy {
    position: absolute !important;
    top: 50%;
    right: max(24px, calc((100vw - var(--container)) / 2 - 240px)) !important;
    transform: translateY(-50%);
    width: min(500px, 44%);
    max-width: 500px;
    padding: 0 !important;
    z-index: 2;
    text-align: left;
}
/* Desktop-only line break used inside long paragraphs (e.g., white-glove
   blurb) so the dash always starts a new line. Collapses to a space on
   mobile so the text wraps naturally. */
.desktop-only-br { display: inline; }
@media (max-width: 760px) {
    .desktop-only-br { display: none; }
}
.service-row-white-glove .section-h2 { margin: 0 0 14px; }
.service-row-white-glove .service-row-copy p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.65;
}
.service-row-white-glove .service-row-copy p:last-child { margin-bottom: 0; }

/* Mobile: stack image above text */
@media (max-width: 760px) {
    .service-row-white-glove .service-row-copy {
        position: static !important;
        transform: none;
        width: 100%;
        max-width: 100%;
        padding: 24px 18px 0 !important;
    }
}

.service-row-concierge .service-row-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0;
    position: relative;
}
.service-row-concierge .service-row-image {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100%;
    position: relative;
    order: 0;
}
.service-row-concierge .service-row-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
}
.service-row-concierge .service-row-image::before,
.service-row-concierge .service-row-image::after {
    background-color: transparent;
    background-image: linear-gradient(var(--_dir, to bottom),
        #FAFAFE 0%,
        #FAFAFE 45%,
        rgba(250, 250, 254, .55) 75%,
        transparent 100%);
    height: 70px;
}
.service-row-concierge .service-row-image::before { --_dir: to bottom; }
.service-row-concierge .service-row-image::after  { --_dir: to top; }
.service-row-concierge .service-row-copy {
    position: absolute !important;
    top: 50%;
    right: max(24px, calc((100vw - var(--container)) / 2)) !important;
    transform: translateY(-50%);
    width: min(500px, 44%);
    max-width: 500px;
    padding: 0 !important;
    z-index: 2;
    text-align: left;
}
.service-row-concierge .section-h2 { margin: 0 0 14px; }
.service-row-concierge .service-row-copy p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
}

/* Mobile: stack image above text */
@media (max-width: 760px) {
    .service-row-concierge .service-row-copy {
        position: static !important;
        transform: none;
        width: 100%;
        max-width: 100%;
        padding: 24px 18px 0 !important;
    }
}

.service-row-overlooked .service-row-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0;
    position: relative;
}
.service-row-overlooked .service-row-image {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100%;
    position: relative;
    order: 0;
}
.service-row-overlooked .service-row-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
}
.service-row-overlooked .service-row-image::before,
.service-row-overlooked .service-row-image::after {
    background-color: transparent;
    background-image: linear-gradient(var(--_dir, to bottom),
        #FAFAFE 0%,
        #FAFAFE 45%,
        rgba(250, 250, 254, .55) 75%,
        transparent 100%);
    height: 70px;
}
.service-row-overlooked .service-row-image::before { --_dir: to bottom; }
.service-row-overlooked .service-row-image::after  { --_dir: to top; }
.service-row-overlooked .service-row-copy {
    position: absolute !important;
    top: 50%;
    left: max(24px, calc((100vw - var(--container)) / 2)) !important;
    transform: translateY(-50%);
    width: min(420px, 38%);
    max-width: 420px;
    padding: 0 !important;
    z-index: 2;
    text-align: left;
}
.service-row-overlooked .section-h2 { margin: 0 0 14px; }
.service-row-overlooked .service-row-copy p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
}

/* Mobile: stack image above text */
@media (max-width: 760px) {
    .service-row-overlooked .service-row-copy {
        position: static !important;
        transform: none;
        width: 100%;
        max-width: 100%;
        padding: 24px 18px 0 !important;
    }
}
.service-row-roadmap .service-row-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0;
    position: relative;
}
.service-row-roadmap .service-row-image {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100%;
    position: relative;
    order: 0;
}
.service-row-roadmap .service-row-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
}
/* Copy positioned absolutely on the right portion of the image
   (where the photo fades into white). */
.service-row-roadmap .service-row-copy {
    position: absolute !important;
    top: 50%;
    right: max(24px, calc((100vw - var(--container)) / 2 - 160px)) !important;
    transform: translateY(-50%);
    width: min(500px, 44%);
    max-width: 500px;
    padding: 0 !important;
    z-index: 2;
    text-align: left;
}
.service-row-roadmap .section-h2 { margin: 0 0 14px; }
.service-row-roadmap .service-row-copy p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.65;
}
.service-row-roadmap .service-row-copy p:last-child { margin-bottom: 0; }
.service-row-roadmap .roadmap-intro-lead { margin-bottom: 16px; }
.service-row-roadmap .roadmap-intro-cta { margin-top: 18px; }

/* Mobile: stack image above text instead of overlay */
@media (max-width: 760px) {
    .service-row-roadmap .service-row-copy {
        position: static !important;
        transform: none;
        width: 100%;
        max-width: 100%;
        padding: 24px 18px 0 !important;
    }
}

.service-row-roadmap .service-row-image::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 70px;
    background: linear-gradient(to bottom,
        #FAFAFE 0%,
        #FAFAFE 45%,
        rgba(250, 250, 254, .55) 75%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.service-row-roadmap .service-row-image::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 70px;
    background: linear-gradient(to top,
        #FAFAFE 0%,
        #FAFAFE 45%,
        rgba(250, 250, 254, .55) 75%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* Top + bottom fades for service-row images (matches the other sections) */
.service-row-white-glove .service-row-image::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 70px;
    background: linear-gradient(to bottom,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.service-row-white-glove .service-row-image::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 70px;
    background: linear-gradient(to top,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.service-row-copy {
    align-self: center;
    padding: 0 max(24px, calc((100vw - var(--container)) / 2)) 0 56px;
}
.service-row-grid.service-row-reverse .service-row-copy {
    padding: 0 56px 0 max(24px, calc((100vw - var(--container)) / 2));
}
.service-row-copy .eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 14px;
}
.service-row-copy p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-muted);
}
.service-bullets {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
}
.service-bullets li {
    position: relative;
    padding: 0 0 10px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-text);
}
.service-bullets li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--c-purple-600);
}

/* What White-Glove Looks Like — full-bleed pillars image */
.white-glove-pillars {
    position: relative;
    width: 100%;
    background: #fff;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.white-glove-pillars picture,
.white-glove-pillars picture img,
.white-glove-pillars-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
.white-glove-pillars::before,
.white-glove-pillars::after {
    display: none;
}
/* Desktop-only: soft bottom fade so the image dissolves into the page. */
@media (min-width: 761px) {
    .white-glove-pillars::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: linear-gradient(to top,
            #FFFFFF 0%,
            rgba(255, 255, 255, .55) 55%,
            transparent 100%);
        pointer-events: none;
        z-index: 1;
    }
}
.white-glove-pillars-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* New layout — left-aligned heading, tiles left, oversized globe on right */
.white-glove-pillars .container { padding-top: 56px; padding-bottom: 56px; }
.white-glove-pillars { background: #FFFFFF; }
.white-glove-pillars-title {
    text-align: left;
    margin: 0 0 32px;
    max-width: 720px;
}
.white-glove-pillars-grid {
    display: grid;
    /* Tiles on the left, image on the right */
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: center;
}
.white-glove-pillars-tiles { order: 1; }
.white-glove-pillars-visual {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    
    overflow: visible;
    position: relative;
}
.white-glove-pillars-visual img {
    width: 100%;
    max-width: 460px;
    height: auto;
    display: block;
    object-fit: contain;
    /* Big visual scale-up — image extends to the viewport's right edge
       without growing the layout box. */
    transform: scale(1.6) translateX(120px);
    transform-origin: right center;
}
/* 2-column tile grid — more compact, less vertical space */
.white-glove-pillars-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
/* Last (5th) tile spans both columns so it fills the bottom row */
.white-glove-pillars-tiles .wgp-tile:last-child {
    grid-column: 1 / -1;
}
.wgp-tile {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 10px 14px 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wgp-icon {
    color: var(--c-purple-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-bottom: 0;
}
.wgp-icon svg { width: 16px; height: 16px; }
.wgp-tile h3 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--c-text);
    margin: 0;
    line-height: 1.3;
}
.wgp-tile p {
    margin: 0;
    font-family: var(--ff-sans);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-text-muted);
}
@media (max-width: 980px) {
    .white-glove-pillars-grid { grid-template-columns: 1fr; gap: 24px; }
    .white-glove-pillars-visual img { max-width: 360px; }
}

/* ----- OTC Desk & Liquidity — matches the overlooked-engines / roadmap
   full-bleed pattern: image fills the section, copy overlays on the
   left, top + bottom fades blend the image into the cream background. */
.service-row-otc {
    position: relative;
    background: #FAFAFE;
    padding: 0 !important;
    margin: 0;
    overflow: hidden;
    min-height: 360px;
}
.service-row-otc .service-row-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
    gap: 0;
    position: relative;
}
.service-row-otc .service-row-image {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100%;
    position: relative;
    overflow: visible;
    border-radius: 0;
    order: 0;
}
.service-row-otc .service-row-image picture,
.service-row-otc .service-row-image picture img,
.service-row-otc .service-row-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
}
/* Top + bottom fades — same recipe as overlooked/roadmap. */
.service-row-otc .service-row-image::before,
.service-row-otc .service-row-image::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 70px;
    background: linear-gradient(var(--_dir, to bottom),
        #FAFAFE 0%,
        #FAFAFE 45%,
        rgba(250, 250, 254, .55) 75%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.service-row-otc .service-row-image::before { top: 0;    --_dir: to bottom; }
.service-row-otc .service-row-image::after  { bottom: 0; --_dir: to top; }

/* Copy: vertically centered on the LEFT half, aligned to the container. */
.service-row-otc .service-row-copy {
    position: absolute !important;
    top: 50%;
    left: max(24px, calc((100vw - var(--container)) / 2)) !important;
    transform: translateY(-50%);
    width: min(420px, 38%);
    max-width: 420px;
    padding: 0 !important;
    z-index: 2;
    text-align: left;
}
.service-row-otc .section-h2 { margin: 0 0 14px; }
.service-row-otc .service-row-copy p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--c-text-muted);
}

/* Tablet (761–1100px) and Mobile (≤760px) — full-width image on top,
   text below. Same stacked layout as the other service-rows. */
@media (max-width: 1100px) {
    .service-row-otc { padding: 48px 0 !important; min-height: 0; }
    .service-row-otc .service-row-image {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .service-row-otc .service-row-image picture {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .service-row-otc .service-row-image picture img,
    .service-row-otc .service-row-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        object-fit: cover !important;
    }
    /* Slimmer fades — keep the soft top/bottom blend without eating
       into the photo on a smaller viewport. */
    .service-row-otc .service-row-image::before,
    .service-row-otc .service-row-image::after {
        display: block;
        height: 36px;
    }
    .service-row-otc .service-row-copy {
        position: static !important;
        transform: none;
        width: 100%;
        max-width: 100%;
        padding: 24px 32px 0 !important;
    }
}

/* Mobile tightens the side padding under 760px. */
@media (max-width: 760px) {
    .service-row-otc .service-row-copy {
        padding: 24px 18px 0 !important;
    }
}

/* AI-Enhanced — Phase 4, full-bleed image background with text + table on right */
.ai-enhanced {
    position: relative;
    overflow: hidden;
    padding: 30px 0 56px;
    background: #FAFAFE;
    min-height: 720px;
}
.ai-enhanced-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.ai-enhanced {
    min-height: 760px;
    margin-bottom: 64px;
}
.ai-enhanced .ai-enhanced-veil { display: none; }
.ai-enhanced::before,
.ai-enhanced::after { display: none; }
.ai-enhanced-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 560px;
}
.ai-enhanced-copy {
    position: absolute;
    top: 80px;
    left: max(32px, calc((100vw - var(--container)) / 2));
    width: min(480px, 40vw);
    padding: 0;
    margin: 0;
}
.ai-enhanced-copy .section-h2 {
    margin: 0 0 18px;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.6px;
}
.ai-enhanced-copy .section-divider {
    margin: 16px 0 18px;
    width: 56px;
    height: 2px;
    background: var(--c-purple-600);
    display: block;
    border-radius: 2px;
}
.ai-enhanced-tagline {
    font-size: 15px;
    line-height: 1.5;
    color: var(--c-text);
    margin: 0 0 14px;
    font-weight: 500;
}
.ai-enhanced-desc {
    margin: 0 0 24px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-muted);
}
/* AI tile grid — 2x2 cards replace the old feature/description table */
.ai-tile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ai-tile {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 14px 14px 16px;
    box-shadow: 0 4px 14px rgba(58, 31, 158, .05);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ai-tile-icon {
    color: var(--c-purple-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
    background: transparent;
}
.ai-tile-icon svg { width: 18px; height: 18px; }
.ai-tile h3 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    color: var(--c-text);
    margin: 0 0 2px;
}
.ai-tile p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-text-muted);
}
@media (max-width: 980px) {
    .ai-enhanced-inner { min-height: 0; padding: 0 24px; }
    .ai-enhanced-copy {
        position: static;
        right: auto;
        width: 100%;
        max-width: 100%;
    }
    .ai-enhanced-bg { opacity: .25; }
}
@media (max-width: 640px) {
    .ai-tile-grid { grid-template-columns: 1fr; }
}

.settla-x-section {
    position: relative;
    overflow: hidden;
    padding: 0;
    margin-bottom: 0;
    background: #FAFAFE;
}
.settla-x-bg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
}
/* Top + bottom soft white fades — same recipe as the other section images */
.settla-x-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to bottom,
        #FAFAFE 0%,
        #FAFAFE 25%,
        rgba(250, 250, 254, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.settla-x-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 140px;
    background: linear-gradient(to top,
        #FAFAFE 0%,
        #FAFAFE 50%,
        rgba(250, 250, 254, .6) 75%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.settla-x-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 24px;
    padding-right: max(24px, calc((100vw - var(--container)) / 2));
}
.settla-x-copy {
    text-align: left;
    max-width: 600px;
    /* Vertically centered alongside the image — the overlay already
       applies align-items: center, so no additional Y offset needed.
       Small right margin nudges the copy inward from the container edge. */
    margin-right: 40px;
}
.settla-x-logo {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    /* Aligned flush-left with the body copy below it. */
    margin: 0 0 24px 0;
}
.settla-x-copy .section-h2 {
    margin: 14px 0 18px;
    font-size: clamp(32px, 3.6vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.6px;
}
.settla-x-tagline {
    font-weight: 500;
    font-size: 15px;
    color: var(--c-text);
    margin: 18px 0 14px;
    line-height: 1.5;
}
.settla-x-copy p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-muted);
    margin: 0;
}
@media (max-width: 980px) {
    .settla-x-bg { opacity: .25; }
}

/* Old Settla-X dark section (legacy, may be unused) */
.settla-x {
    padding: 30px 0;
    background: var(--c-midnight);
    color: var(--c-on-dark-soft);
}
.settla-x-inner { text-align: center; }
.eyebrow-light {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-purple-300);
    margin: 0 0 14px;
}
.settla-x-title {
    font-family: var(--ff-display);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 18px;
}
.text-purple-light { color: var(--c-purple-300); }
.settla-x-lead {
    margin: 0 auto 48px;
    max-width: 640px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--c-on-dark-muted);
}
.settla-x-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}
.sx-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 26px 24px;
}
.sx-card h3 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 17px;
    color: #fff;
    margin: 0 0 8px;
}
.sx-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--c-on-dark-muted);
}

/* Services CTA */
.services-cta {
    padding: 30px 0 60px;
}
.services-cta-inner {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}
.services-cta-title {
    font-family: var(--ff-display);
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--c-text);
    margin: 0 0 14px;
}
.services-cta-lead {
    font-size: 15px;
    line-height: 1.7;
    color: var(--c-text-muted);
    margin: 0 0 28px;
}

/* Responsive — Services */
@media (max-width: 980px) {
    .sectors-grid { grid-template-columns: 1fr 1fr; }
    .settla-x-grid { grid-template-columns: 1fr; }
    .service-row-grid { display: flex; flex-direction: column; gap: 32px; }
    .service-row-grid.service-row-reverse { flex-direction: column; }
    .service-row-grid.service-row-reverse .service-row-image { order: 0; }
    .service-row-copy { padding: 0 24px !important; }
    .service-row-image { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
    .sectors-grid { grid-template-columns: 1fr; }
}

/* Partner logo size tweaks per logo (Mark Lane is naturally larger) + subtle animation */
.hero-partners .partner-logo[alt="Mark Lane"]      { height: 28px; }
.hero-partners .partner-logo[alt="FINTRAC CANAFE"] { height: 42px; }
.hero-partners .partner-logo[alt="Yellow Card"]    { height: 64px; }

@keyframes partnersDrift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
/* Yellow Card sits 14px lower at rest, drifts inside that offset */
@keyframes partnersDriftYellow {
    0%, 100% { transform: translateY(14px); }
    50%      { transform: translateY(11px); }
}
.hero-partners .partner-logo[alt="Mark Lane"]      { animation: partnersDrift 5s ease-in-out 0s infinite both; }
.hero-partners .partner-logo[alt="FINTRAC CANAFE"] { animation: partnersDrift 5s ease-in-out 1s infinite both; }
.hero-partners .partner-logo[alt="Yellow Card"]    { animation: partnersDriftYellow 5s ease-in-out 2s infinite both; }

/* ---------- Mobile-only brand on inner pages ---------- */

.brand-mobile-only { display: none; }
@media (max-width: 1100px) {
    .brand-mobile-only {
        display: inline-flex;
        align-items: center;
        margin: 0;
    }
}

/* ============================================================
   MOBILE NAV (existing — refined, mobile-only)
   ============================================================ */

@media (max-width: 1100px) {
    
    .primary-nav.open {
        display: block;
        position: absolute;
        top: 64px; left: 0; right: 0;
        background: #FFFFFF;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--c-border);
        border-bottom: 1px solid var(--c-border);
        padding: 8px 0 12px;
        box-shadow: 0 18px 36px rgba(10, 6, 48, .10);
        animation: navDrop .22s ease-out;
        transform-origin: top center;
        transform: none;
        z-index: 100;
    }
    @keyframes navDrop {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .primary-nav.open ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0;
    }
    .primary-nav.open ul li {
        list-style: none;
        border-bottom: 1px solid rgba(10, 6, 48, .06);
    }
    .primary-nav.open ul li:last-child { border-bottom: 0; }
    .primary-nav.open ul li a {
        display: block;
        padding: 14px 24px;
        font-size: 15px;
        font-weight: 500;
        color: var(--c-text);
        letter-spacing: .2px;
        transition: background .15s ease, color .15s ease, padding-left .15s ease;
    }
    .primary-nav.open ul li a:hover,
    .primary-nav.open ul li a:active {
        background: rgba(160, 49, 242, .06);
        color: var(--c-purple-600);
        padding-left: 30px;
    }
    .primary-nav.open ul li a.active {
        color: var(--c-purple-600);
        background: transparent;
        font-weight: 600;
    }

    /* Hamburger button — subtle hover/press state */
    .nav-toggle {
        border-radius: 10px;
        transition: background .15s ease;
    }
    .nav-toggle:hover { background: rgba(10, 6, 48, .04); }
    .nav-toggle[aria-expanded="true"] { background: rgba(160, 49, 242, .08); }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* ----- Footer alignment refinements (mobile + tablet) ----- */
    .footer-newsletter {
        text-align: center;
    }
    .footer-newsletter h3 { margin: 0 0 10px; }
    .footer-newsletter p  { margin: 0 auto; max-width: 520px; }
    .footer-subscribe {
        margin: 0 auto;
        max-width: 520px;
    }
    .footer-brand {
        text-align: center;
        align-items: center;
    }
    .footer-brand .footer-logo {
        display: inline-flex;
        justify-content: center;
    }
    .footer-tag {
        text-align: center;
        
        margin: -22px auto 0;
        padding: 0;
        width: auto;
    }
    .footer-links {
        text-align: left;
    }
    .footer-col {
        text-align: left;
    }
    .footer-col h5 {
        margin: 0 0 14px;
        letter-spacing: 1.6px;
    }
    .footer-col ul { padding: 0; margin: 0; list-style: none; }
    .footer-col ul li { margin-bottom: 10px; }
    .footer-bottom-row {
        align-items: center;
        text-align: center;
    }
}

/* Smaller-screen overrides for the drawer + footer */
@media (max-width: 760px) {
    .primary-nav.open { top: 70px; }
    .primary-nav.open ul li a {
        padding: 15px 20px;
        font-size: 15.5px;
    }
    .primary-nav.open ul li a:hover,
    .primary-nav.open ul li a:active { padding-left: 26px; }

    /* Footer — center brand + newsletter, keep link columns aligned cleanly */
    .footer-main {
        text-align: center;
        gap: 32px;
    }
    .footer-links {
        justify-items: center;
    }
    .footer-col { text-align: center; }
    .footer-col h5 { letter-spacing: 1.4px; }
    .footer-col ul { display: inline-block; text-align: center; }
    .footer-col ul li { margin-bottom: 8px; }

    .footer-bottom-row { gap: 12px; }
}

@media (max-width: 480px) {
    .primary-nav.open ul li a { padding: 14px 18px; font-size: 15px; }
    .primary-nav.open ul li a:hover,
    .primary-nav.open ul li a:active { padding-left: 22px; }
}

/* ============================================================
   HOME PAGE — MOBILE REFINEMENTS
   Desktop view is intentionally untouched — every rule below sits
   inside an @media query and only fires on tablet/mobile widths.
   ============================================================ */

/* ---------- Tablet (≤ 1100px) — header + hero polish ---------- */
@media (max-width: 1100px) {
    
    .site-header {
        padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
    }
    .site-header .brand {
        margin-top: 0;
        margin-left: 0;
    }
    .header-inner {
        height: auto;
        padding: 18px 0;
        align-items: center;
    }
    /* Nav items must stay on one line — "About Us" was wrapping because
       of its space character. */
    .primary-nav a { white-space: nowrap; }
    .primary-nav ul { gap: 22px; }
    /* When the mobile drawer is open, anchor it just below the new header */
    .primary-nav.open {
        top: calc(env(safe-area-inset-top, 0px) + 78px);
    }

    /* Hero copy + heading sizing */
    .hero-copy {
        margin-left: 0;
        padding-top: 8px;
    }
    .hero h1 {
        font-size: clamp(28px, 4.6vw, 40px);
        line-height: 1.2;
    }
    .hero-sub {
        font-size: 15px;
        max-width: 100%;
    }
    .hero-ctas {
        margin-bottom: 24px;
    }

    
    .hero-visual {
        margin-top: -90px;
        margin-bottom: 16px;
        border-radius: 0;
        overflow: hidden;
        box-shadow: none;
        position: relative;
    }
    /* Swap to the mobile/tablet-optimized hero photo. */
    .hero-visual img {
        content: url('../images/hero-cargo-port-mobile.png?v=20260526');
    }
    
    .hero-visual::after { display: none; }
    .hero-visual::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        inset: 0 0 auto 0 !important;
        height: 200px !important;
        background: linear-gradient(to bottom,
            #FFFFFF 0%,
            #FFFFFF 50%,
            rgba(255, 255, 255, .85) 70%,
            rgba(255, 255, 255, .45) 85%,
            transparent 100%) !important;
        pointer-events: none !important;
        z-index: 5 !important;
    }
    .hero-visual img {
        
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 22%,
            #000 88%,
            transparent 100%
        ) !important;
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 22%,
            #000 88%,
            transparent 100%
        ) !important;
    }
    .hero-visual::after { background: none; }
    .hero-visual img {
        object-position: 70% center;
    }

    
    .hero-partners {
        position: static;
        margin: 28px 0 0;
        padding: 22px 18px;
        gap: 18px 28px;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        animation: none;
        background: linear-gradient(180deg, #FFFFFF 0%, #F7F4FE 100%);
        border: 1px solid var(--c-border);
        border-radius: 18px;
        box-shadow: 0 10px 24px rgba(91, 61, 191, .06);
    }
    .hero-partners .partner-logo {
        animation: none !important;
        transform: none !important;
        opacity: 1;
    }
    
    .hero-partners .partner-logo[alt="Yellow Card"] {
        transform: translateY(10px) !important;
    }
    .partners-label {
        font-size: 11.5px;
        letter-spacing: 1.8px;
        color: var(--c-purple-600);
    }

    .features-grid { gap: 18px; }
}

/* ---------- Small tablet / large mobile (≤ 760px) ---------- */
@media (max-width: 760px) {
    
    .container { padding: 0 18px; }

    /* Header */
    .site-header {
        padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
    }
    .header-inner { padding: 16px 0; }
    .nav-toggle { margin-left: auto; }
    .primary-nav.open {
        top: calc(env(safe-area-inset-top, 0px) + 72px);
    }

    /* Hero — drop forced <br> line-breaks so text wraps naturally */
    .hero h1 br { display: none; }
    .hero h1 {
        font-size: clamp(26px, 6.6vw, 34px);
        line-height: 1.22;
        margin-bottom: 18px;
    }
    .hero .eyebrow {
        font-size: 12px;
        letter-spacing: 1.2px;
        margin-bottom: 10px;
    }
    .hero-sub {
        font-size: 14.5px;
        line-height: 1.65;
        margin-bottom: 24px;
    }
    .hero-ctas {
        gap: 10px;
        margin-bottom: 44px;
    }
    .hero-ctas .btn {
        width: 100%;
        padding: 14px 24px;
    }

    /* Hero visual — clean rectangular block, square corners on mobile/tablet */
    .hero-visual {
        margin-top: -16px;
        margin-bottom: 24px;
        border-radius: 0;
        aspect-ratio: 16 / 11;
    }
    .hero-visual img { object-position: 70% center; }
    
    .hero-visual::before {
        height: 90px !important;
        background: linear-gradient(to bottom,
            #FFFFFF 0%,
            #FFFFFF 30%,
            rgba(255, 255, 255, .6) 65%,
            transparent 100%) !important;
    }
    .hero-visual img {
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%
        ) !important;
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%
        ) !important;
    }

    
    .hero-partners {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px 22px;
        padding: 22px 18px 24px;
        margin: 24px 0 0;
        text-align: center;
        background: linear-gradient(180deg, #FFFFFF 0%, #F7F4FE 100%);
        border: 1px solid var(--c-border);
        border-radius: 18px;
        box-shadow: 0 10px 24px rgba(91, 61, 191, .06);
    }
    .partners-label {
        font-size: 11px;
        letter-spacing: 1.4px;
        flex-basis: 100%;
        margin: 4px 0 0;
        color: var(--c-purple-600);
    }
    
    .hero-partners .partner-logo[alt="FINTRAC CANAFE"] {
        margin-bottom: 8px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(10, 6, 48, .08);
        width: clamp(140px, 60%, 200px);
    }
    .hero-partners .partner-logo {
        height: 30px;
        animation: none !important;
        transform: none !important;
    }
    .hero-partners .partner-logo[alt="Mark Lane"]      { height: 24px; }
    .hero-partners .partner-logo[alt="FINTRAC CANAFE"] {
        height: 68px;
    }
    .hero-partners .partner-logo[alt="Yellow Card"] {
        height: 78px;
        
        transform: translateY(14px) !important;
        margin-top: 0;
    }

    /* Features — single column with comfortable padding */
    .features { padding: 16px 0 8px; }
    .features-grid { gap: 14px; }
    .feature-card {
        padding: 22px 22px 24px;
        border-radius: 16px;
    }
    .feature-card h3 { font-size: 15.5px; }
    .feature-card p { font-size: 13.5px; }

    /* Conversion dial heading — slightly tighter */
    .conversion-dial-heading { padding-top: 24px; }
    .conversion-dial-img { max-width: 220px; }

    /* Corridor map fades softer on smaller viewports */
    .corridor-map::before,
    .corridor-map::after { height: 50px; }

    /* Footer — newsletter + form */
    .footer-newsletter h3 { font-size: 22px; }
    .footer-newsletter p  { font-size: 14px; line-height: 1.65; }
    .footer-subscribe input[type="email"] {
        font-size: 15px;
        padding: 14px 18px;
    }
    .footer-subscribe button {
        font-size: 14px;
        padding: 14px 22px;
    }
    .footer-col h5 { font-size: 13px; }
    .footer-col a  { font-size: 14px; }

    /* Footer bottom row — keep the desktop 2-column layout on mobile:
       copyright on the left, socials on the right. */
    .footer-bottom-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
        flex-wrap: nowrap;
    }
    .footer-copy { font-size: 0 !important; flex: 0 0 auto; }
    .footer-copy::before {
        content: '© 2026 Settla';
        font-size: 12.5px;
        color: var(--c-on-dark-faded);
        white-space: nowrap;
    }
    .socials { gap: 12px; flex: 0 0 auto; }
    .socials a { width: 20px; height: 20px; }
    .socials svg { width: 16px; height: 16px; }
}

/* ---------- Phone portrait (≤ 480px) — final tightening ---------- */
@media (max-width: 480px) {
    .container { padding: 0 16px; }

    /* Header logo a touch smaller */
    .brand-img { height: 56px; }

    /* Hero */
    .hero { padding: 12px 0 24px; }
    .hero h1 { font-size: clamp(24px, 7.2vw, 30px); }
    .hero-sub { font-size: 14px; }
    .hero-visual { aspect-ratio: 4 / 3; border-radius: 0; }

    /* Partner logos — tighter card, smaller per-logo overrides on phones */
    .hero-partners {
        gap: 6px 18px;
        padding: 18px 14px 20px;
        margin-top: 20px;
        border-radius: 16px;
    }
    .partners-label { font-size: 10.5px; letter-spacing: 1.2px; }
    .hero-partners .partner-logo[alt="Mark Lane"]      { height: 22px; }
    .hero-partners .partner-logo[alt="FINTRAC CANAFE"] {
        height: 60px;
        width: clamp(180px, 76%, 240px);
        padding-bottom: 12px;
        margin-bottom: 6px;
    }
    .hero-partners .partner-logo[alt="Yellow Card"] {
        height: 68px;
        transform: translateY(12px) !important;
        margin-top: 0;
    }

    /* Feature cards — even more breathing room on small phones */
    .feature-card { padding: 20px 20px 22px; }
    .feature-icon { margin-bottom: 12px; }

    /* Conversion dial — reduced for tiny screens */
    .conversion-dial-img { max-width: 200px; }

    /* Corridor map — pull in the fades a bit more */
    .corridor-map::before,
    .corridor-map::after { height: 36px; }

    /* Footer links — stack to a single column on the smallest screens */
    .footer-links { grid-template-columns: 1fr; gap: 22px; }
    .footer-newsletter h3 { font-size: 20px; }
    .footer-newsletter p  { font-size: 13.5px; }
    .footer-tag { font-size: 13px; }
    .footer-copy { font-size: 12.5px; }
}

/* ---------- Tiny screens (≤ 360px) — guard against overflow ---------- */
@media (max-width: 360px) {
    .container { padding: 0 14px; }
    .brand-img { height: 50px; }
    .hero h1 { font-size: 22px; }
    .hero-ctas .btn { padding: 13px 20px; font-size: 14px; }
    .partners-label { letter-spacing: 1.2px; }
    .feature-card { padding: 18px 18px 20px; }
    .feature-card h3 { font-size: 15px; }
    .feature-card p  { font-size: 13px; }
    .conversion-dial-img { max-width: 180px; }
    .footer-newsletter h3 { font-size: 19px; }
}

/* ============================================================
   PROTOCOLS PAGE — MOBILE REFINEMENTS
   Same approach as the home page — every rule scoped to a media
   query so desktop layout is preserved exactly. The decorative
   "bubbles" hero image is hidden below 1100px because it's purely
   ornamental and pulls focus on smaller screens.
   ============================================================ */

/* ---------- Tablet + below — hide the decorative bubbles ---------- */
@media (max-width: 1100px) {
    .hiw-intro-visual { display: none; }

    
    .layer-h2-suffix { display: block; }

    /* Hero intro — sits tight to the header on tablet/mobile */
    .hiw-intro {
        padding: 0 0 8px;
    }
    .hiw-intro-copy {
        padding-top: 8px;
        padding-bottom: 16px;
        max-width: 100%;
    }
    .hiw-intro h1 {
        font-size: clamp(28px, 4.6vw, 44px);
        line-height: 1.2;
        margin-bottom: 18px;
    }
    .hiw-lead {
        font-size: 15px;
        line-height: 1.65;
        max-width: 100%;
    }

    /* Layers section — tightened top, generous bottom before CTA */
    .layers { padding: 24px 0 48px; }
    .layers .container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    
    .layer-row {
        grid-template-columns: 240px 1fr;
        gap: 28px;
        padding: 22px 24px;
        background: #fff;
        border: 1px solid var(--c-border);
        box-shadow: 0 4px 14px rgba(58, 31, 158, .04);
    }
    .layer-cube-wrap { width: 240px; height: 220px; }
    .layer-live .layer-cube-wrap { width: 260px; height: 240px; }
    .layer-content h2 {
        font-size: clamp(20px, 2.4vw, 24px);
        line-height: 1.25;
        margin-bottom: 8px;
    }
    .layer-tag { font-size: 13.5px; margin-bottom: 12px; }
    .layer-desc { font-size: 13.5px; line-height: 1.65; margin-bottom: 14px; }
    .layer-status { font-size: 14px; }

    /* CTA — clear separation from layers + tight visual weight */
    .hiw-cta { padding: 24px 0 56px; }
}

/* ---------- Small tablet / large mobile (≤ 760px) ---------- */
@media (max-width: 760px) {
    /* Intro — pulled tight to the header on small mobile */
    .hiw-intro { padding: 0 0 4px; }
    .hiw-intro-copy {
        padding-top: 4px;
        padding-bottom: 8px;
    }
    .hiw-intro h1 {
        font-size: clamp(26px, 6.4vw, 34px);
        margin-bottom: 14px;
    }
    .hiw-lead { font-size: 14.5px; line-height: 1.65; }

    /* Layers — tighter top so the first card sits close to the lead text */
    .layers { padding: 12px 0 28px; }
    .layers .container { gap: 16px; }

    /* Layer rows stack: cube on top, content below — centered for clarity */
    .layer-row {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 24px 20px;
        text-align: center;
        justify-items: center;
    }
    .layer-cube-wrap {
        width: 220px;
        height: 200px;
        margin: 0 auto;
    }
    .layer-live .layer-cube-wrap { width: 240px; height: 220px; }
    .layer-content {
        padding-top: 6px;
        max-width: 520px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .layer-content h2 {
        font-size: 22px;
        line-height: 1.25;
        margin: 0;
    }
    .layer-tag {
        font-size: 13px;
        margin: 0;
    }
    .layer-desc {
        font-size: 13.5px;
        line-height: 1.65;
        margin: 4px 0 8px;
    }
    .layer-status {
        justify-content: center;
        font-size: 14px;
        margin: 0;
        padding-top: 4px;
        border-top: 1px solid rgba(10, 6, 48, .06);
        width: 100%;
        padding-top: 12px;
    }
    .layer-status strong, .status-text { font-size: 14px; }

    /* CTA banner — comfortable separation */
    .hiw-cta { padding: 28px 0 56px; }
    .hiw-cta-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 16px;
        padding: 26px 22px 28px;
    }
    .hiw-cta-icon { margin: 0 auto; }
    .hiw-cta-text { font-size: 14.5px; line-height: 1.65; max-width: 460px; margin: 0 auto; }
    .hiw-cta-actions { justify-content: center; flex-wrap: wrap; }
    .hiw-cta-actions .btn { width: 100%; }
}

/* ---------- Phone portrait (≤ 480px) ---------- */
@media (max-width: 480px) {
    .hiw-intro { padding: 12px 0 0; }
    .hiw-intro-copy {
        padding-top: 18px;
        padding-bottom: 8px;
    }
    .hiw-intro h1 {
        font-size: clamp(24px, 7vw, 30px);
        margin-bottom: 12px;
    }
    .hiw-lead { font-size: 14px; }

    .layers { padding: 8px 0 24px; }
    .layers .container { gap: 14px; }

    .layer-row {
        padding: 22px 18px;
        gap: 12px;
        border-radius: 18px;
    }
    .layer-cube-wrap {
        width: 180px;
        height: 165px;
    }
    .layer-live .layer-cube-wrap { width: 200px; height: 180px; }
    .layer-content h2 { font-size: 20px; }
    .layer-tag, .layer-desc { font-size: 13px; }
    .layer-status { padding-top: 10px; }

    .hiw-cta { padding: 20px 0 48px; }
    .hiw-cta-card { padding: 22px 18px 24px; border-radius: 18px; gap: 14px; }
    .hiw-cta-text { font-size: 14px; }
}

/* ---------- Tiny phones (≤ 360px) ---------- */
@media (max-width: 360px) {
    .hiw-intro h1 { font-size: 22px; }
    .layer-cube-wrap { width: 160px; height: 145px; }
    .layer-live .layer-cube-wrap { width: 180px; height: 160px; }
    .layer-content h2 { font-size: 19px; }
}

/* ============================================================
   PARTNERSHIPS PAGE
   ============================================================ */

/* ----- Full-bleed partnerships banner ----- */
.partnerships-banner {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
}
.partnerships-banner-img {
    display: block;
    width: 100%;
    height: auto;
}
/* Top fade — solid white band hides the upper edge of the image */
.partnerships-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to bottom,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* Bottom fade — mirror */
.partnerships-banner::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 90px;
    background: linear-gradient(to top,
        #FFFFFF 0%,
        #FFFFFF 25%,
        rgba(255, 255, 255, .55) 55%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}
/* Suppress fade specifically on the partnerships-banner section */
.partnerships-banner:has(> img[src*="partnerships-banner.jpg"])::before,
.partnerships-banner:has(> img[src*="partnerships-banner.jpg"])::after {
    display: none;
}
/* Desktop-only "Talk to a Specialist" CTA overlaid on the banner image.
   The parent .partnerships-banner sets line-height: 0 to kill the inline
   img whitespace gap — that leaks into the button and squashes its
   height, so we restore line-height here. The button inherits all
   visual styling (gradient, padding, shadow) from the base .btn-primary. */
.partnerships-banner-cta {
    display: none;
}
@media (min-width: 1101px) {
    .partnerships-banner-cta {
        display: block;
        position: absolute;
        left: 6%;
        bottom: 10%;
        z-index: 3;
        line-height: normal;
    }
    .partnerships-banner-cta .btn-primary {
        line-height: 1.2;
    }
}
/* Soften the top fade on the network banner — the image has its own
   built-in fade so we only need a thin CSS fade to blend the seam. */
.partnerships-banner:has(> img[src*="partnerships-network.png"])::before,
.partnerships-banner-network::before {
    height: 20px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, .35) 0%,
        transparent 100%);
}

@media (max-width: 1100px) {
    .partnerships-banner::before,
    .partnerships-banner::after { height: 24px; }
}
@media (max-width: 760px) {
    .partnerships-banner::before,
    .partnerships-banner::after { height: 16px; }
    
    .partnerships-banner:first-of-type { margin-top: 24px; }
    
    .partnerships-banner-img[src*="partnerships-banner.jpg"] {
        content: url('../images/partnerships-banner-mobile.jpg');
    }
    .partnerships-banner-img[src*="partnerships-network.png"] {
        content: url('../images/partnerships-network-mobile.jpg');
    }
}

/* ----- Section eyebrow + heading rhythm shared across the page ----- */
.partner-feature,
.partner-categories,
.partner-why {
    padding: 60px 0;
}
.partner-feature .eyebrow,
.partner-categories .eyebrow,
.partner-why .eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 14px;
    text-align: center;
}
.partner-feature .section-h2,
.partner-categories .section-h2,
.partner-why .section-h2 {
    text-align: center;
    margin: 0 0 40px;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.4px;
}

/* ----- Featured Partner cards (FINTRAC / Mark Lane / Yellow Card) ----- */
.partner-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.partner-feature-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 18px;
    padding: 28px 26px 30px;
    box-shadow: 0 8px 22px rgba(58, 31, 158, .06);
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    align-items: center;
}
.partner-feature-logo {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.partner-feature-logo img {
    max-height: 56px;
    width: auto;
    object-fit: contain;
}
.partner-feature-card h3 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--c-text);
    margin: 0;
}
.partner-feature-tag {
    color: var(--c-purple-600);
    font-weight: 600;
    font-size: 13px;
    margin: 0;
    letter-spacing: .2px;
}
.partner-feature-card p:last-child {
    font-size: 14px;
    color: var(--c-text-muted);
    line-height: 1.65;
    margin: 6px 0 0;
}

/* ----- Partnership Category cards (6-card grid) ----- */
.partner-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.partner-cat-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 28px 26px 30px;
    box-shadow: var(--shadow-sm);
}
.partner-cat-icon {
    color: var(--c-purple-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.partner-cat-card h3 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 8px;
    color: var(--c-text);
}
.partner-cat-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--c-text-muted);
}

/* ----- Why Partner With Settla — 4-card numbered grid ----- */
.partner-why { background: var(--c-bg-soft); }
.partner-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.partner-why-card {
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: 18px;
    padding: 28px 26px 30px;
    box-shadow: var(--shadow-sm);
}
.partner-why-num {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 28px;
    color: var(--c-purple-600);
    margin-bottom: 8px;
}
.partner-why-card h3 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--c-text);
    margin: 0 0 8px;
}
.partner-why-card p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--c-text-muted);
}

/* ----- Partnerships responsive ----- */
@media (max-width: 980px) {
    .partner-feature-grid { grid-template-columns: 1fr 1fr; }
    .partner-cat-grid     { grid-template-columns: 1fr 1fr; }
    .partner-why-grid     { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .partner-feature,
    .partner-categories,
    .partner-why { padding: 44px 0; }
    .partner-feature-grid,
    .partner-cat-grid,
    .partner-why-grid { grid-template-columns: 1fr; gap: 16px; }
    .partner-feature .section-h2,
    .partner-categories .section-h2,
    .partner-why .section-h2 { margin-bottom: 28px; }
}

/* ============================================================
   CORRIDORS PAGE — MOBILE REFINEMENTS
   Same approach: every rule scoped to a media query so the desktop
   layout stays exactly the way it is now.
   ============================================================ */

.corridors-regions { display: none; }
.region-acc {
    background: #fff;
    border: 1px solid var(--c-border, #ECE6F7);
    border-radius: 14px;
    margin: 0 0 10px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(20, 16, 35, .03);
}
.region-acc > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--c-text);
    background: #F8F5FE;
}
.region-acc > summary::-webkit-details-marker { display: none; }
.region-acc-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-purple-600);
    font-size: 16px;
}
.region-acc-name { flex: 1; }
.region-acc-chev {
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--c-text-muted, #6B6480);
    border-bottom: 2px solid var(--c-text-muted, #6B6480);
    transform: rotate(-45deg);
    transition: transform .2s ease;
    margin-right: 4px;
}
.region-acc[open] > summary .region-acc-chev {
    transform: rotate(45deg);
}
.region-acc-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 8px;
    background: #fff;
}
.region-acc-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px 10px 50px;
    font-family: var(--ff-sans);
    font-size: 14px;
    color: var(--c-text);
    border-top: 1px solid rgba(20, 16, 35, .04);
}
.region-acc-list li:first-child { border-top: none; }
.region-acc-list li .flag {
    width: 28px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
    
    box-shadow: 0 0 0 1px rgba(20, 16, 35, .08);
}

/* ---------- Tablet + below (≤ 1100px) ---------- */
@media (max-width: 1100px) {
    
    .corridors-active { margin-top: 0; }

    
    .corridors-active,
    .corridors-supported {
        padding: 4px 0;
    }

    
    .corridors-active::before,
    .corridors-active::after { height: 50px; }
    .corridors-supported::before { height: 30px; }
    .corridors-supported::after  { height: 50px; }

    /* Currency ticker — slightly tighter typography on tablet */
    .currency-ticker { padding: 14px 0; margin: 24px 0; }
    .currency-ticker-list li {
        font-size: 13px;
        padding: 0 22px;
        letter-spacing: 1.6px;
    }
    .corridors-active + .currency-ticker { margin-top: 0; }
}

/* ---------- Small tablet / large mobile (≤ 760px) ---------- */
@media (max-width: 760px) {
    /* Swap to the mobile-optimized active corridors map. */
    .corridors-active-img {
        content: url('../images/corridors-active-map-mobile.png');
    }

    
    .corridors-supported { display: none !important; }

    
    .corridors-regions {
        display: block;
        padding: 24px 0 32px;
    }

    
    .corridors-active {
        padding: 0;
        margin-top: 16px;
    }
    .corridors-supported {
        padding: 0;
    }
    .corridors-active::before,
    .corridors-active::after,
    .corridors-supported::before,
    .corridors-supported::after { height: 28px; }

    
    .currency-ticker {
        padding: 12px 0;
        margin: 24px 0;
    }
    .corridors-active + .currency-ticker {
        margin-top: 24px;
    }
    .currency-ticker:last-of-type {
        margin-bottom: 24px;
    }
    .currency-ticker-list li {
        font-size: 12px;
        padding: 0 16px;
        letter-spacing: 1.4px;
    }
    .currency-ticker-track { animation-duration: 28s; }

    
    .corridors-active,
    .corridors-supported { background: #FAFAFE; }
}

/* ---------- Phone portrait (≤ 480px) ---------- */
@media (max-width: 480px) {
    .corridors-active::before,
    .corridors-active::after,
    .corridors-supported::before,
    .corridors-supported::after { height: 20px; }

    .currency-ticker {
        padding: 10px 0;
        margin: 12px 0;
    }
    .currency-ticker-list li {
        font-size: 11px;
        padding: 0 12px;
        letter-spacing: 1.2px;
    }
    .currency-ticker-track { animation-duration: 24s; }
}

/* ---------- Tiny phones (≤ 360px) ---------- */
@media (max-width: 360px) {
    .currency-ticker-list li {
        font-size: 10.5px;
        padding: 0 10px;
        letter-spacing: 1px;
    }
}

/* ============================================================
   ABOUT PAGE — MOBILE REFINEMENTS
   Same approach: every rule scoped to a media query so desktop
   layout stays exactly the way it is now.
   ============================================================ */

/* ---------- Tablet (≤ 1100px) — hero + section padding ---------- */
@media (max-width: 1100px) {
    
    .about-hero-visual img {
        content: url('../images/about-hero-mobile.png');
    }
    
    .about-hero-visual::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        inset: 0 0 auto 0 !important;
        height: 140px !important;
        background: linear-gradient(to bottom,
            #FFFFFF 0%,
            #FFFFFF 28%,
            rgba(255, 255, 255, .7) 55%,
            rgba(255, 255, 255, .25) 80%,
            transparent 100%) !important;
        pointer-events: none !important;
        z-index: 5 !important;
    }
    .origin-image img {
        content: url('../images/about-origin-story-mobile.png');
    }
    .informal-image img {
        content: url('../images/about-who-we-power-mobile.png');
    }
    /* Shrink the 90px white-fade bands on the informal-image so the
       photo doesn't get visibly cropped at tablet width. */
    .informal-image::before,
    .informal-image::after { height: 24px !important; }

    
    .vm-split,
    .creed-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .vm-bg {
        content: url('../images/about-vision-eye-mobile.png');
        position: relative !important;
        inset: auto !important;
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto 40px;
        object-fit: contain;
        
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 4%,
            #000 96%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 4%,
            #000 96%,
            transparent 100%
        );
    }
    .creed-image {
        margin: 0 auto !important;
        max-width: 320px;
    }
    .creed-image img { width: 100%; max-width: 320px; }
    .creed-title { text-align: center !important; }
    
    .about-hero {
        padding: 16px 0 32px;
        overflow: hidden;
    }
    .about-hero-inner {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 28px;
        width: 100%;
    }
    .about-hero-copy {
        padding: 8px 24px 0 !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .about-hero-visual {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
        order: -1;
    }

    .about-h1 {
        font-size: clamp(28px, 4.2vw, 38px);
        line-height: 1.2;
        white-space: normal !important;
        word-break: normal;
        overflow-wrap: break-word;
    }
    .about-h1 br { display: inline; }
    .about-h1 .text-purple { white-space: normal !important; }
    .about-lead {
        font-size: 15px;
        line-height: 1.65;
        max-width: 100%;
    }
    /* Hero points — small tiles, matches the site's other small-card style */
    .about-hero-points {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-top: 18px;
    }
    .hero-point {
        flex: none;
        padding: 14px 14px 16px;
    }
    .hero-point h3 { font-size: 14.5px; }
    .hero-point p { font-size: 13px; line-height: 1.55; }

    .origin { padding: 40px 0; }
    
    .origin-copy { transform: none; padding: 0 24px !important; }
    .origin-copy .section-h2 { font-size: clamp(28px, 3.4vw, 38px); }

    .vm-section { padding: 32px 0; min-height: 0; }
    .vm-overlay { padding: 32px 24px; }
    .vm-card .section-h2 { font-size: clamp(26px, 3.2vw, 36px); }
    .vm-card p { font-size: 14.5px; line-height: 1.65; }

    .creed { padding: 40px 0 48px; }
    .creed-title { font-size: clamp(28px, 3.6vw, 40px); }
    .creed-image img { width: 320px; }

    .informal { padding: 24px 0; }
    .informal-h2 {
        font-size: clamp(28px, 3.6vw, 40px);
        line-height: 1.18;
    }
    
    .informal-h2 br { display: none; }
    .informal-h2 .text-purple::after {
        content: '\A';
        white-space: pre;
    }

    .about-confidence::before,
    .about-confidence::after { height: 60px; }
}

/* ---------- Small tablet / large mobile (≤ 760px) ---------- */
@media (max-width: 760px) {
    
    .about-hero-visual img,
    .origin-image img,
    .informal-image img {
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%
        );
    }

    /* HERO — image stacks above heading, both at full width */
    .about-hero {
        padding: 16px 0 32px;
        overflow: hidden;
    }
    .about-hero-inner { gap: 8px; }
    .about-hero-visual {
        order: -1;
        width: 100%;
        aspect-ratio: 16 / 10;
        margin: 0;
    }
    .about-hero-visual::before,
    .about-hero-visual::after { display: none; }
    .about-hero-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    .about-hero-copy { padding: 12px 18px 0 !important; }

    .about-h1 {
        white-space: normal !important;
        font-size: clamp(26px, 6.6vw, 34px) !important;
        line-height: 1.22 !important;
        margin-bottom: 14px !important;
    }
    .about-h1 br { display: none; }
    .about-h1 .text-purple { white-space: normal !important; }
    .about-lead {
        font-size: 14.5px;
        margin-bottom: 22px;
        max-width: 100%;
    }

    .about-hero-points {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .hero-point { padding: 12px 14px 14px; }
    .hero-point h3 { font-size: 14px; margin: 0 0 2px; }
    .hero-point p { font-size: 12.5px; line-height: 1.55; }

    /* ORIGIN STORY — image first, text below; both at full width */
    .origin { padding: 32px 0; overflow: hidden; }
    .origin-grid {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
    }
    .origin-image {
        order: -1;
        width: 100%;
        aspect-ratio: 16 / 10;
        height: auto;
    }
    .origin-image::before,
    .origin-image::after { display: none; }
    .origin-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    .origin-copy {
        padding: 40px 18px 0 !important;
        transform: none;
        text-align: left !important;
    }
    .origin-copy .section-h2 {
        font-size: 28px !important;
        margin-bottom: 12px !important;
        text-align: left !important;
    }
    .origin-copy p { font-size: 14px; line-height: 1.7; text-align: left !important; }
    .origin-copy p.lead-purple {
        font-size: 15px;
        margin-bottom: 18px;
        text-align: left !important;
    }

    /* VISION + MISSION — mobile uses a tighter-cropped eye image,
       white background, left-aligned content. */
    .vm-section {
        padding: 32px 0;
        min-height: 0;
        background: #fff;
        position: relative;
        overflow: hidden;
    }
    .vm-section::before,
    .vm-section::after { display: none; }
    
    .vm-bg {
        content: url('../images/about-vision-eye-mobile.png');
        position: relative !important;
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 0 40px;
        object-fit: contain;
        opacity: 1;
        transform: none;
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%
        );
    }
    .vm-overlay { padding: 0 18px; }
    .vm-split {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .vm-card {
        background: #fff;
        padding: 22px 22px 24px !important;
        border-radius: 16px;
        border: 1px solid var(--c-border);
        box-shadow: 0 6px 18px rgba(58, 31, 158, .06);
    }
    .vm-card .section-h2 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }
    .vm-card p { font-size: 14px; line-height: 1.65; margin-bottom: 8px; }

    /* CREED — pillars image centered + cards stacked single column */
    .creed { padding: 32px 0; }
    .creed-title {
        display: block !important;
        font-size: 28px !important;
        margin: 0 0 20px !important;
        text-align: center;
    }
    .creed-grid {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 18px !important;
        padding: 0 18px;
    }
    .creed-image {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
    .creed-image img {
        width: 100%;
        max-width: 200px;
        height: auto;
        object-fit: contain;
        display: block;
    }
    .creed-cards {
        width: 100%;
        padding: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .creed-cards li {
        padding: 14px 16px 16px;
        border-radius: 14px;
    }
    .creed-cards li h3 { font-size: 15px; }
    .creed-cards li p { font-size: 13.5px; line-height: 1.55; }
    .creed-card-wide { grid-column: auto !important; }

    /* INFORMAL ECONOMY — image first, text below */
    .informal { padding: 32px 0; overflow: hidden; }
    .informal-grid {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
    }
    .informal-image {
        order: -1;
        width: 100%;
        aspect-ratio: 16 / 10;
        height: auto;
    }
    .informal-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    .informal-copy { padding: 40px 18px 0 !important; }
    .informal-h2 br { display: none; }
    .informal-h2 {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }
    .informal-copy p { font-size: 14px; line-height: 1.7; }
    .informal-cta { margin-top: 8px; }
    .informal-btn { width: 100%; text-align: center; margin-top: 8px; }

    /* CONFIDENCE — heading + image + tiles stacked, all left-aligned */
    .about-confidence { padding: 32px 0; }
    .about-confidence-title {
        text-align: left !important;
        margin: 0 0 22px !important;
        padding: 0 18px;
        font-size: clamp(24px, 6.4vw, 30px) !important;
        line-height: 1.25 !important;
        letter-spacing: -.3px !important;
    }
    
    .about-confidence-title br { display: none; }
    .about-confidence-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 22px;
    }
    .about-confidence-visual {
        order: -1;
        min-height: 260px;
    }
    .about-confidence-visual img {
        max-width: 280px !important;
        transform: scale(1.4) !important;
    }
    .about-confidence-tiles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        transform: none;
    }
    .confidence-tile { padding: 12px 14px 14px; }
    .confidence-tile h3 { font-size: 14px; }
    .confidence-tile p { font-size: 12.5px; line-height: 1.5; }
    .about-confidence::before,
    .about-confidence::after { height: 30px; }
}

/* ---------- Phone portrait (≤ 480px) ---------- */
@media (max-width: 480px) {
    .about-hero-points { grid-template-columns: 1fr; }
    .about-h1 { font-size: clamp(24px, 7.2vw, 30px) !important; }
    .about-lead { font-size: 14px; }

    .origin { padding: 24px 0; }
    .origin-image,
    .informal-image,
    .about-hero-visual { aspect-ratio: 4 / 3; }

    .origin-copy .section-h2 { font-size: 26px !important; }
    .vm-card .section-h2 { font-size: 22px !important; }
    .creed-title { font-size: 26px !important; }
    .creed-image,
    .creed-image img { max-width: 180px; }
    .informal-h2 { font-size: 24px !important; }

    .about-confidence-tiles { grid-template-columns: 1fr; }
    .about-confidence-visual img { max-width: 240px !important; }

    .about-confidence::before,
    .about-confidence::after { height: 24px; }
}

/* ---------- Tiny phones (≤ 360px) ---------- */
@media (max-width: 360px) {
    .about-h1 { font-size: 22px; }
    .origin-copy .section-h2 { font-size: 24px; }
    .vm-card .section-h2 { font-size: 20px; }
    .creed-title { font-size: 24px; }
    .informal-h2 { font-size: 22px; }
    .creed-image img { width: 170px; }
}

/* ============================================================
   TYPOGRAPHY CONSISTENCY PASS
   Final polish to keep colors, weights, and sizing in lockstep
   across every page. Sits at the end of the file so it can win
   against earlier outliers on equal specificity.
   ============================================================ */

/* ----- Eyebrows: uppercase, brand purple, consistent tracking ----- */
.eyebrow {
    font-family: var(--ff-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-purple-600);
    margin: 0 0 14px;
}
/* Hero eyebrows can stay slightly larger/relaxed (they sit alone above h1) */
.hero .eyebrow,
.about-hero .eyebrow,
.services-hero .eyebrow {
    font-size: 13px;
    letter-spacing: 1.5px;
}

/* ----- Section H2: unified scale + weight + color ----- */
.section-h2 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.18;
    letter-spacing: -.4px;
    color: var(--c-text);
    margin: 0 0 12px;
}
.section-h2 .text-purple { font-weight: 500; }

/* ----- Card / tile h3: same family, 16/600 across the site ----- */
.feature-card h3,
.wwp-tile h3,
.wg-card h3,
.partner-feature-card h3,
.partner-cat-card h3,
.partner-why-card h3 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    color: var(--c-text);
    letter-spacing: -.1px;
}

/* ----- Card / tile body p: muted, 14/1.65 ----- */
.feature-card p,
.wwp-tile-desc,
.wg-card p,
.partner-feature-card p:last-child,
.partner-cat-card p,
.partner-why-card p {
    font-family: var(--ff-sans);
    font-size: 14px;
    line-height: 1.65;
    color: var(--c-text-muted);
}

.ai-tile h3,
.wgp-tile h3 {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    color: var(--c-text);
    letter-spacing: -.1px;
    margin: 0;
}
.ai-tile p,
.wgp-tile p {
    font-family: var(--ff-sans);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-text-muted);
    margin: 0;
}

/* ----- Lead-purple consistency across pages ----- */
.lead-purple {
    font-family: var(--ff-sans);
    color: var(--c-purple-600);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: 0;
}

/* ----- Section body paragraphs: consistent muted body text ----- */
.service-row-copy p,
.origin-copy p,
.informal-copy p {
    font-family: var(--ff-sans);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--c-text-muted);
}

/* ----- Buttons: lock weight + tracking ----- */
.btn {
    font-family: var(--ff-sans);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .2px;
}

/* ============================================================
   ABOUT PAGE — UNIFIED HEADING TYPOGRAPHY
   Sits at the very end so it wins over earlier .section-h2
   overrides. Every About section heading reads with the same
   "Concierge-led" weight + size + color as the hero.
   ============================================================ */
.about-h1,
.origin-copy .section-h2,
.vm-card .section-h2,
.creed-title,
.informal-h2,
.about-confidence-title,
.service-row .section-h2,
.white-glove-pillars-title,
.settla-x-copy .section-h2,
.ai-enhanced-copy .section-h2 {
    font-family: var(--ff-display) !important;
    font-size: clamp(26px, 2.8vw, 36px) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: -.5px !important;
    color: var(--c-text) !important;
}
.about-h1 .text-purple,
.origin-copy .section-h2 .text-purple,
.vm-card .section-h2 .text-purple,
.creed-title .text-purple,
.informal-h2 .text-purple,
.about-confidence-title .text-purple,
.service-row .section-h2 .text-purple,
.white-glove-pillars-title .text-purple,
.settla-x-copy .section-h2 .text-purple,
.ai-enhanced-copy .section-h2 .text-purple {
    font-weight: 500 !important;
    color: var(--c-purple-600) !important;
}

/* ============================================================
   SERVICES PAGE — MOBILE + TABLET REFINEMENTS
   Every rule scoped to a media query so the desktop layout is
   completely untouched. Same approach as the About page.
   ============================================================ */

/* ---------- Tablet (≤ 1100px) — reset absolute overlays so content stacks ---------- */
@media (max-width: 1100px) {
    
    .services-hero {
        padding: 16px 0 32px !important;
        overflow: hidden;
    }
    .services-hero::before,
    .services-hero::after { display: none !important; }
    .services-hero-visual {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        aspect-ratio: 16 / 10;
        margin: 0 0 12px;
        overflow: hidden;
    }
    .services-hero-visual::after { display: none !important; }
    .services-hero-visual img {
        /* Swap to the mobile/tablet-optimized hero image. Desktop
           continues to render services-who-we-power-hero.png. */
        content: url('../images/services-who-we-power-mobile.png');
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%
        );
    }
    .services-hero-inner { min-height: 0; }
    .services-hero-copy {
        padding-top: 8px !important;
        padding-bottom: 24px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .services-h1 {
        font-size: clamp(28px, 4.6vw, 44px) !important;
        line-height: 1.2 !important;
    }
    .services-lead { max-width: 100% !important; font-size: 15px; }
    .services-subhead { font-size: 18px !important; }
    .services-body { max-width: 100% !important; font-size: 14px; }

    /* Who-We-Power 6 tiles — already responsive at 980px (2-col) */
    .wwp-section { padding: 40px 0 !important; }

    /* White-Glove Pillars — single column stack, kill the oversized
       globe transform that overflows on tablet. */
    .white-glove-pillars .container {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    .white-glove-pillars::before,
    .white-glove-pillars::after { display: none !important; }
    .white-glove-pillars-title {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .white-glove-pillars-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .white-glove-pillars-tiles { order: 2 !important; }
    .white-glove-pillars-visual {
        order: 1 !important;
        justify-content: center !important;
        overflow: visible !important;
    }
    .white-glove-pillars-visual img {
        max-width: 360px !important;
        transform: none !important;
    }
    .white-glove-pillars-tiles {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .white-glove-pillars-tiles .wgp-tile:last-child {
        grid-column: 1 / -1 !important;
    }

    
    .service-row-white-glove,
    .service-row-concierge,
    .service-row-overlooked,
    .service-row-roadmap {
        min-height: 0 !important;
        padding: 32px 0 !important;
    }
    .service-row-white-glove .service-row-grid,
    .service-row-concierge .service-row-grid,
    .service-row-overlooked .service-row-grid,
    .service-row-roadmap .service-row-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    .service-row-white-glove .service-row-image,
    .service-row-concierge .service-row-image,
    .service-row-overlooked .service-row-image,
    .service-row-roadmap .service-row-image {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        order: -1 !important;
        overflow: hidden;
    }
    /* Kill the desktop full-bleed fade pseudos — they leave hard
       left/bottom edges on the stacked tablet/mobile layout. */
    .service-row-white-glove .service-row-image::before,
    .service-row-white-glove .service-row-image::after,
    .service-row-concierge .service-row-image::before,
    .service-row-concierge .service-row-image::after,
    .service-row-overlooked .service-row-image::before,
    .service-row-overlooked .service-row-image::after,
    .service-row-roadmap .service-row-image::before,
    .service-row-roadmap .service-row-image::after { display: none !important; }
    /* Swap select service-row photos for mobile-optimized assets on
       tablet/mobile without touching the HTML. */
    .service-row-overlooked .service-row-image img {
        content: url('../images/services-overlooked-engines-mobile.png');
    }
    .service-row-white-glove .service-row-image img {
        content: url('../images/services-white-glove-mobile.png');
    }
    .service-row-concierge .service-row-image img {
        content: url('../images/services-concierge-experience-mobile.png');
    }
    .service-row-roadmap .service-row-image img {
        content: url('../images/services-roadmap-mobile.png');
    }
    
    .service-row-white-glove .service-row-image img,
    .service-row-concierge .service-row-image img,
    .service-row-overlooked .service-row-image img,
    .service-row-roadmap .service-row-image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%
        );
    }
    .service-row-white-glove .service-row-copy,
    .service-row-concierge .service-row-copy,
    .service-row-overlooked .service-row-copy,
    .service-row-roadmap .service-row-copy {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 24px !important;
        text-align: left !important;
    }
    /* Road Map heading on a single line — hide the source <br />. */
    .service-row-roadmap .section-h2 br { display: none !important; }
    .service-row-roadmap .section-h2 .text-purple { margin-left: .35em; }

    /* Settla-X (Phase 3) — reset the desktop translateY shift + position
       overlay text below the image. */
    .settla-x-section { min-height: 0 !important; }
    
    .settla-x-bg { display: none !important; }
    .settla-x-section::before,
    .settla-x-section::after { display: none !important; }
    .settla-x-overlay {
        position: relative !important;
        inset: auto !important;
        padding: 24px 24px !important;
        min-height: 0 !important;
    }
    .settla-x-copy {
        transform: none !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .settla-x-logo {
        display: block !important;
        max-width: 440px !important;
        width: 80% !important;
        margin: 24px auto 0 !important;
        order: 99 !important;
    }

    
    .ai-enhanced { min-height: 0 !important; padding: 32px 0 !important; background: transparent !important; }
    .ai-enhanced-inner { padding: 0 !important; }
    .ai-enhanced-copy {
        position: static !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 24px !important;
        text-align: left !important;
    }
    .ai-enhanced-copy .section-divider { margin-left: 0 !important; margin-right: auto !important; }
    .ai-enhanced-bg { display: none !important; }
    .ai-enhanced .ai-enhanced-veil { display: none !important; }
    
    .ai-enhanced::before,
    .ai-enhanced::after { display: none !important; }
    .ai-enhanced { padding: 32px 0 48px !important; overflow: visible !important; }
}

/* ---------- Small tablet / large mobile (≤ 760px) ---------- */
@media (max-width: 760px) {
    .services-hero-visual { margin: 0 0 8px; }
    .services-hero-copy {
        padding: 12px 18px 16px !important;
    }
    .services-h1 {
        font-size: clamp(26px, 6.4vw, 34px) !important;
        margin-bottom: 14px !important;
    }
    .services-h1 br { display: none; }
    .services-lead { font-size: 14.5px; line-height: 1.65; margin-bottom: 24px; }

    /* WWP tile grid — single column on phones */
    .wwp-section { padding: 28px 0 !important; }
    .wwp-grid { gap: 14px !important; }
    .wwp-tile { padding: 18px 18px 22px !important; }

    /* White-Glove Pillars — single tile column */
    .white-glove-pillars .container {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
    .white-glove-pillars-title {
        font-size: clamp(24px, 6vw, 30px) !important;
    }
    .white-glove-pillars-tiles {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .white-glove-pillars-visual img { max-width: 240px !important; }

    /* Service-row sections */
    .service-row-white-glove,
    .service-row-concierge,
    .service-row-overlooked,
    .service-row-roadmap {
        padding: 24px 0 !important;
    }
    /* Mobile-only: image comes first, text below. */
    .service-row-white-glove .service-row-image,
    .service-row-concierge .service-row-image,
    .service-row-overlooked .service-row-image,
    .service-row-roadmap .service-row-image {
        order: -1 !important;
        margin-top: 0;
        margin-bottom: 16px;
    }
    .service-row-white-glove .service-row-copy,
    .service-row-concierge .service-row-copy,
    .service-row-overlooked .service-row-copy,
    .service-row-roadmap .service-row-copy {
        order: 0 !important;
        padding: 0 18px !important;
    }
    .service-row-white-glove .section-h2,
    .service-row-concierge .section-h2,
    .service-row-overlooked .section-h2,
    .service-row-roadmap .section-h2 {
        font-size: clamp(24px, 6vw, 30px) !important;
    }
    .service-row-white-glove .service-row-copy p,
    .service-row-concierge .service-row-copy p,
    .service-row-overlooked .service-row-copy p,
    .service-row-roadmap .service-row-copy p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    /* Settla-X — logo above heading, centered on mobile. */
    .settla-x-overlay { padding: 20px 18px !important; }
    .settla-x-copy {
        align-items: center !important;
        width: 100% !important;
    }
    .settla-x-logo {
        max-width: 360px !important;
        width: 78% !important;
        order: -1 !important;
        align-self: center !important;
        margin: 0 auto 18px !important;
    }
    .settla-x-copy .phase-eyebrow,
    .settla-x-copy .section-h2,
    .settla-x-tagline,
    .settla-x-copy p {
        align-self: flex-start;
        text-align: left;
        width: 100%;
    }
    .settla-x-copy .section-h2 {
        font-size: clamp(24px, 6vw, 30px) !important;
    }
    .settla-x-tagline { font-size: 14.5px !important; }

    /* AI-Enhanced */
    .ai-enhanced { padding: 24px 0 !important; }
    .ai-enhanced-copy { padding: 0 18px !important; }
    .ai-enhanced-copy .section-h2 {
        font-size: clamp(28px, 6.6vw, 36px) !important;
    }
    .ai-enhanced-tagline { font-size: 14.5px !important; }
    .ai-tile-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* ---------- Phone portrait (≤ 480px) ---------- */
@media (max-width: 480px) {
    .services-h1 { font-size: clamp(24px, 7.2vw, 30px) !important; }
    .services-hero-copy { padding-top: 8px !important; }
    .services-hero-visual { aspect-ratio: 4 / 3; }
    .wwp-tile { padding: 16px 16px 20px !important; }
    .white-glove-pillars-visual img { max-width: 200px !important; }
    .settla-x-logo { max-width: 300px !important; width: 75% !important; }
    .ai-enhanced-copy .section-h2 {
        font-size: clamp(24px, 7.2vw, 30px) !important;
    }
}

/* ---------- Tiny phones (≤ 360px) ---------- */
@media (max-width: 360px) {
    .services-h1 { font-size: 22px !important; }
    .service-row-white-glove .section-h2,
    .service-row-concierge .section-h2,
    .service-row-overlooked .section-h2,
    .service-row-roadmap .section-h2,
    .settla-x-copy .section-h2,
    .ai-enhanced-copy .section-h2 {
        font-size: 22px !important;
    }
    .white-glove-pillars-title { font-size: 22px !important; }
}

@media (min-width: 761px) and (max-width: 1100px) {
    .footer-links {
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 24px;
        width: 100%;
    }
    .footer-col {
        text-align: left;
    }
    .footer-col:nth-child(1) { justify-self: start; }
    .footer-col:nth-child(2) { justify-self: center; }
    .footer-col:nth-child(3) { justify-self: end; }
}

@media (min-width: 761px) and (max-width: 1100px) {
    .primary-nav.open {
        position: fixed !important;
        top: 0 !important;
        padding: 80px 0 24px !important;
        border-top: 0 !important;
        animation: navSlideDown .25s ease-out !important;
    }
    @keyframes navSlideDown {
        from { opacity: 0; transform: translateY(-12px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    /* Hamburger / close button sits above the drawer when open */
    .site-header { z-index: 110; }
    .nav-toggle { position: relative; z-index: 120; }
}

/* ============================================================
   LEGAL / DOCUMENT PAGES
   Shared layout for Terms, Privacy, Cookies, Acceptable Use,
   Risk Disclosure, Disclaimer. Trust Center reuses the wrapper
   and adds its own section blocks.
   ============================================================ */

.legal-page {
    /* Top padding clears the absolute-positioned .site-header (logo is
       130px tall + 40px lifted margin on desktop). */
    padding: 220px 0 80px;
    background: #FFFFFF;
}
.legal-wrap {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.legal-notice {
    background: #FAF7FF;
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-purple-600);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 32px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--c-text-muted);
}
.legal-notice strong { color: var(--c-text); }
.legal-eyebrow {
    display: none;
}
.legal-h1 .text-purple {
    color: var(--c-purple-600);
    font-weight: 600;
}
.legal-h1 {
    font-family: var(--ff-display);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.6px;
    color: var(--c-text);
    margin: 0 0 16px;
}
.legal-meta {
    margin: 0 0 40px;
    font-size: 13px;
    color: var(--c-text-soft);
}
.legal-meta strong { color: var(--c-text); font-weight: 600; }
.legal-page h2 {
    font-family: var(--ff-display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 600;
    letter-spacing: -.2px;
    color: var(--c-text);
    margin: 40px 0 14px;
}
.legal-page h3 {
    font-family: var(--ff-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--c-text);
    margin: 26px 0 10px;
}
.legal-page p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--c-text-muted);
    margin: 0 0 16px;
}
.legal-page ul {
    list-style: disc;
    padding-left: 22px;
    margin: 0 0 18px;
    color: var(--c-text-muted);
}
.legal-page ul li {
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 6px;
    padding-left: 4px;
}
.legal-page hr {
    border: 0;
    border-top: 1px solid var(--c-border);
    margin: 40px 0;
}
.legal-pending {
    background: #FFFFFF;
    border: 1px dashed var(--c-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 18px 0 0;
}
.legal-pending p {
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: .3px;
    text-transform: uppercase;
}
.legal-pending ul {
    margin: 0;
    padding-left: 20px;
}
.legal-pending ul li {
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-text-soft);
    margin: 0 0 3px;
}

/* ----- Trust Center extras ----- */
.trust-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 0;
    margin: 0 0 40px;
    list-style: none;
}
.trust-anchors a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: #FAF7FF;
    border: 1px solid var(--c-border);
    color: var(--c-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.trust-anchors a:hover {
    background: var(--c-purple-600);
    color: #FFFFFF;
    border-color: var(--c-purple-600);
}
.trust-creed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin: 18px 0 8px;
}
.trust-creed-card {
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 22px 22px 20px;
    box-shadow: var(--shadow-sm);
}
.trust-creed-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7B5CFF 0%, #3A1F9E 100%);
    color: #FFFFFF;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 12px;
}
.trust-creed-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
}
.trust-creed-card p {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-text-muted);
}
.trust-creed-card .trust-creed-customer {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--c-border);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--c-purple-600);
}
.trust-creed-card ul {
    margin: 6px 0 0;
    padding-left: 18px;
}
.trust-creed-card ul li {
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0 0 4px;
    color: var(--c-text-muted);
}
.trust-roadmap-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.trust-roadmap-list li {
    background: #FAF7FF;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 14px;
    color: var(--c-text);
}
.trust-roadmap-list strong {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}
.trust-roadmap-list .trust-status {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--c-purple-600);
}
.trust-faq {
    margin: 18px 0 0;
}
.trust-faq details {
    background: #FFFFFF;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 10px;
}
.trust-faq summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--c-text);
    list-style: none;
    position: relative;
    padding-right: 28px;
}
.trust-faq summary::-webkit-details-marker { display: none; }
.trust-faq summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-purple-600);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}
.trust-faq details[open] summary::after { content: '–'; }
.trust-faq details p {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--c-text-muted);
}
.trust-contact-card {
    background: #1F0F5C;
    color: #FFFFFF;
    border-radius: 18px;
    padding: 28px 32px;
    margin: 18px 0 0;
}
.trust-contact-card h3 {
    color: #FFFFFF;
    margin: 0 0 8px;
    font-family: var(--ff-display);
    font-size: 20px;
    font-weight: 600;
}
.trust-contact-card p {
    color: rgba(255, 255, 255, .8);
    margin: 0 0 6px;
    font-size: 14.5px;
    line-height: 1.6;
}

@media (max-width: 1100px) {
    .legal-page { padding: 80px 0 64px; }
    .legal-wrap { max-width: 760px; }
    .trust-creed { gap: 14px; }
    .trust-creed-card { padding: 20px 20px 18px; }
    .trust-roadmap-list { gap: 10px; }
}

@media (max-width: 760px) {
    .legal-page { padding: 84px 0 56px; }
    .legal-wrap { padding: 0 18px; }
    .legal-h1 { font-size: clamp(26px, 7vw, 34px); }
    .legal-meta { margin-bottom: 28px; }
    .legal-page h2 { font-size: 20px; margin: 28px 0 10px; }
    .legal-page h3 { font-size: 16px; }
    .legal-page p,
    .legal-page ul li { font-size: 14.5px; line-height: 1.65; }
    .legal-notice { padding: 12px 14px; font-size: 12.5px; }
    .legal-pending { padding: 12px 14px; }
    .trust-anchors { gap: 6px 8px; }
    .trust-anchors a { padding: 6px 12px; font-size: 12px; }
    .trust-creed { grid-template-columns: 1fr; gap: 12px; }
    .trust-creed-card { padding: 18px 18px 16px; }
    .trust-creed-card h3 { font-size: 15.5px; }
    .trust-roadmap-list { grid-template-columns: 1fr; gap: 8px; }
    .trust-roadmap-list li { padding: 12px 14px; }
    .trust-faq summary { font-size: 14.5px; }
    .trust-faq details { padding: 12px 14px; }
    .trust-contact-card { padding: 22px 22px; border-radius: 14px; }
    .trust-contact-card h3 { font-size: 18px; }
    .trust-contact-card p { font-size: 14px; }
}

/* Small phone */
@media (max-width: 480px) {
    .legal-page { padding: 72px 0 44px; }
    .legal-wrap { padding: 0 16px; }
    .legal-h1 { font-size: clamp(24px, 7.8vw, 30px); }
    .legal-page h2 { font-size: 18.5px; margin: 24px 0 8px; }
    .legal-page p, .legal-page ul li { font-size: 14px; }
    .legal-page hr { margin: 28px 0; }
    .legal-page ul { padding-left: 20px; }
    .trust-anchors { gap: 6px; }
    .trust-anchors a { padding: 5px 10px; font-size: 11.5px; }
    .trust-creed-letter { width: 32px; height: 32px; font-size: 16px; }
    .trust-contact-card { padding: 18px 18px; }
}

/* ============================================================
   HEADER — TRUST CENTER DROPDOWN
   ============================================================ */
.primary-nav .has-dropdown {
    position: relative;
}
.primary-nav .has-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dropdown-caret {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s ease;
    opacity: .75;
}
.primary-nav .nav-dropdown {
    
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0 !important;
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 220px;
    min-width: 0;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow:
        0 14px 36px -16px rgba(20, 16, 35, .18),
        0 4px 12px -6px rgba(20, 16, 35, .10),
        0 0 0 1px rgba(20, 16, 35, .05);
    padding: 6px;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 200;
}
.primary-nav .nav-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 22px;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    transform: rotate(45deg);
    box-shadow: -1px -1px 2px -1px rgba(20, 16, 35, .08);
    border-radius: 1px;
}
.primary-nav .nav-dropdown li {
    list-style: none;
    margin: 0;
    width: 100%;
}
.primary-nav .nav-dropdown a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: var(--ff-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-text);
    text-decoration: none;
    letter-spacing: .1px;
    line-height: 1.3;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.primary-nav .nav-dropdown a:hover,
.primary-nav .nav-dropdown a:focus-visible {
    background: rgba(160, 49, 242, .08);
    color: var(--c-purple-600);
}
/* Dark-hero pages (corridors, services) recolor the primary nav links
   to white. That rule cascades into the dropdown and renders the
   sub-items invisible on a white menu. Scope the dropdown back to
   dark text so it stays readable regardless of page context. */
body:has(.corridors-active) .primary-nav .nav-dropdown a,
body:has(.services-hero) .primary-nav .nav-dropdown a {
    color: var(--c-text);
}
body:has(.corridors-active) .primary-nav .nav-dropdown a:hover,
body:has(.corridors-active) .primary-nav .nav-dropdown a:focus-visible,
body:has(.services-hero) .primary-nav .nav-dropdown a:hover,
body:has(.services-hero) .primary-nav .nav-dropdown a:focus-visible {
    color: var(--c-purple-600);
}
.primary-nav .has-dropdown:hover > .nav-dropdown,
.primary-nav .has-dropdown:focus-within > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.primary-nav .has-dropdown:hover > a .dropdown-caret,
.primary-nav .has-dropdown:focus-within > a .dropdown-caret {
    transform: rotate(225deg) translateY(0);
}
@media (max-width: 1100px) {
    .primary-nav .nav-dropdown {
        
        display: none !important;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent !important;
        padding: 0;
        margin: 0;
        width: 100%;
        min-width: 0;
        border-top: 1px solid rgba(20, 16, 35, .04);
    }
    .primary-nav.open .has-dropdown.expanded > .nav-dropdown {
        display: block !important;
    }
    .primary-nav .nav-dropdown::before { display: none; }
    .primary-nav.open .nav-dropdown li {
        list-style: none;
        border-bottom: 1px solid rgba(20, 16, 35, .03) !important;
    }
    .primary-nav.open .nav-dropdown li:last-child { border-bottom: 0 !important; }
    .primary-nav.open .nav-dropdown li a,
    .primary-nav.open .nav-dropdown li a.active,
    .primary-nav.open .nav-dropdown li a:hover,
    .primary-nav.open .nav-dropdown li a:focus,
    .primary-nav.open .nav-dropdown li a:focus-visible,
    .primary-nav.open .nav-dropdown li a:active,
    .primary-nav.open .nav-dropdown li a:visited {
        display: block;
        padding: 11px 24px 11px 44px !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        
        color: #1F1A35 !important;
        letter-spacing: .1px;
        position: relative;
        background: transparent !important;
    }
    .primary-nav.open .nav-dropdown li a::before {
        content: '';
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--c-purple-600);
    }
    .primary-nav.open .nav-dropdown li a:hover,
    .primary-nav.open .nav-dropdown li a:active,
    .primary-nav.open .nav-dropdown li a:focus-visible {
        background: rgba(160, 49, 242, .06) !important;
        padding-left: 44px !important;
    }
    .primary-nav.open .has-dropdown > a .dropdown-caret {
        display: inline-block;
        margin-left: auto;
        transform: rotate(45deg) translateY(-2px);
        transition: transform .2s ease;
    }
    .primary-nav.open .has-dropdown.expanded > a .dropdown-caret {
        transform: rotate(225deg) translateY(0);
    }
}

/* ============================================================
   TRUST CENTER — ONE-PAGE HUB
   ============================================================ */
.trust-page {
    
    background: #FDFCFF;
    padding: 220px 0 24px;
    color: var(--c-text);
}
.trust-shell {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 32px;
}
.trust-content { width: 100%; }

.trust-section {
    padding: 0 0 80px;
    border-bottom: 1px solid rgba(20, 16, 35, .06);
    margin-bottom: 80px;
    scroll-margin-top: 32px;
}
.trust-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 16px;
}
.trust-eyebrow {
    margin: 0 0 18px;
    font-family: var(--ff-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-purple-600);
}
.trust-h1 {
    font-family: var(--ff-display);
    font-size: clamp(34px, 4.2vw, 52px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.8px;
    color: var(--c-text);
    margin: 0 0 16px;
}
.trust-h2 {
    font-family: var(--ff-display);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.6px;
    color: var(--c-text);
    margin: 0 0 16px;
}
.trust-h1 .text-purple,
.trust-h2 .text-purple {
    color: var(--c-purple-600);
    font-weight: 600;
}
.trust-sub-h {
    font-family: var(--ff-display);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--c-text);
    margin: 56px 0 22px;
    letter-spacing: -.3px;
}
.trust-divider {
    display: inline-block;
    width: 48px;
    height: 3px;
    background: var(--c-purple-600);
    border-radius: 2px;
    margin: 4px 0 22px;
}
.trust-lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--c-text);
    margin: 0 0 14px;
    max-width: 720px;
}
.trust-section p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--c-text-muted, #5b5470);
    max-width: 720px;
    margin: 0 0 14px;
}

.trust-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(160, 49, 242, .10);
    color: var(--c-purple-600);
    margin-bottom: 16px;
}
.trust-card-icon svg { width: 22px; height: 22px; }
.trust-card-icon-sm {
    width: 28px;
    height: 28px;
    margin: 0;
    background: transparent;
    color: var(--c-purple-600);
}
.trust-card-icon-sm svg { width: 18px; height: 18px; }
.trust-card-rule {
    display: block;
    width: 36px;
    height: 2px;
    background: var(--c-purple-600);
    border-radius: 1px;
    margin: 10px 0 14px;
}

.trust-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 36px;
}
.trust-overview-card {
    background: #FFFFFF;
    border: 1px solid rgba(20, 16, 35, .06);
    border-radius: 16px;
    padding: 28px 26px;
    box-shadow: 0 1px 0 rgba(20, 16, 35, .02);
}
.trust-overview-card h3,
.trust-feature-card h4,
.trust-mini-card h5 {
    font-family: var(--ff-display);
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 8px;
    letter-spacing: -.2px;
}
.trust-overview-card h3 { font-size: 18px; }
.trust-overview-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--c-text-muted, #5b5470);
    margin: 0;
}

.trust-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0;
}
.trust-feature-card {
    background: #FFFFFF;
    border: 1px solid rgba(20, 16, 35, .06);
    border-radius: 16px;
    padding: 28px 26px;
    box-shadow: 0 1px 0 rgba(20, 16, 35, .02);
}
.trust-feature-card h4 { font-size: 17px; line-height: 1.3; margin-bottom: 10px; }

.trust-feature-card .trust-card-rule { display: none; }
.trust-feature-card p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--c-text-muted, #5b5470);
    margin: 0;
}

.trust-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 28px;
}
.trust-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px;
}
.trust-mini-card {
    background: #FFFFFF;
    border: 1px solid rgba(20, 16, 35, .06);
    border-radius: 16px;
    padding: 22px 22px;
    box-shadow: 0 1px 0 rgba(20, 16, 35, .02);
}
.trust-mini-card .trust-card-icon { width: 38px; height: 38px; margin-bottom: 12px; }
.trust-mini-card .trust-card-icon svg { width: 18px; height: 18px; }
.trust-mini-card h5 { font-size: 15px; margin: 0 0 8px; }
.trust-mini-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--c-text-muted, #5b5470);
    margin: 0 0 8px;
}

.trust-timeline {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    position: relative;
}
.trust-timeline.trust-timeline-4 { grid-template-columns: repeat(4, 1fr); }
.trust-timeline li {
    position: relative;
    text-align: center;
    padding: 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.trust-timeline li + li::before {
    content: '';
    position: absolute;
    top: 16px;
    left: -50%;
    width: 100%;
    border-top: 2px dashed rgba(160, 49, 242, .35);
    z-index: 0;
}
.trust-timeline-num {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid var(--c-purple-600);
    color: var(--c-purple-600);
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 16px;
}
.trust-timeline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(160, 49, 242, .08);
    color: var(--c-purple-600);
    margin: 0 0 12px;
}
.trust-timeline-icon svg { width: 22px; height: 22px; }
.trust-timeline h4 {
    font-family: var(--ff-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 6px;
    line-height: 1.3;
}
.trust-timeline p {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-text-muted, #5b5470);
    margin: 0;
}

.trust-creed-stack {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.trust-creed-row {
    position: relative;
    background: #FFFFFF;
    border: 1px solid rgba(20, 16, 35, .06);
    border-radius: 18px;
    padding: 32px 32px 32px 110px;
    box-shadow: 0 1px 0 rgba(20, 16, 35, .02);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    overflow: hidden;
}
.trust-creed-row .trust-creed-letter {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 120px;
    line-height: 1;
    color: rgba(160, 49, 242, .10);
    pointer-events: none;
    background: transparent;
    
    width: 110px;
    height: auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trust-creed-body h3 {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 8px;
    letter-spacing: -.2px;
}
.trust-creed-body p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--c-text-muted, #5b5470);
    margin: 0 0 16px;
    max-width: 540px;
}
.trust-creed-outcomes-label {
    font-family: var(--ff-sans);
    font-size: 11.5px !important;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-purple-600) !important;
    margin: 12px 0 8px !important;
}
.trust-creed-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(160, 49, 242, .08);
    color: var(--c-purple-600);
    flex-shrink: 0;
}
.trust-creed-row-icon svg { width: 30px; height: 30px; }

.trust-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.trust-check-list li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    color: var(--c-text-muted, #5b5470);
    line-height: 1.55;
}
.trust-check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: rgba(160, 49, 242, .12);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A031F2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 13 10 18 19 7'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}

.trust-cert-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin: 36px 0 32px;
    position: relative;
    padding-left: 40px;
}
.trust-cert-stack::before {
    content: '';
    position: absolute;
    left: 13px;
    
    top: 33px;
    bottom: 33px;
    width: 1.5px;
    background: rgba(160, 49, 242, .25);
    border-radius: 1px;
}
.trust-cert-row {
    position: relative;
    background: #FFFFFF;
    border: 1px solid rgba(20, 16, 35, .06);
    border-radius: 16px;
    padding: 26px 28px;
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 28px;
    align-items: flex-start;
    box-shadow: 0 1px 0 rgba(20, 16, 35, .02);
}
.trust-cert-row::before {
    content: '';
    position: absolute;
    
    left: -32px;
    top: 27px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--c-purple-600);
    
    box-shadow: 0 0 0 4px #FDFCFF, 0 0 0 5px rgba(160, 49, 242, .25);
    z-index: 1;
}
.trust-cert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(160, 49, 242, .10);
    color: var(--c-purple-600);
}
.trust-cert-icon svg { width: 26px; height: 26px; }
.trust-cert-body h3 {
    font-family: var(--ff-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 10px;
    letter-spacing: -.2px;
}
.trust-cert-status {
    display: inline-block;
    background: rgba(160, 49, 242, .12);
    color: var(--c-purple-600);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.trust-cert-body p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-text-muted, #5b5470);
    margin: 0;
}
.trust-cert-progress-label,
.trust-cert-focus-label {
    font-family: var(--ff-sans);
    font-size: 11.5px !important;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-text-muted, #6B6480) !important;
    margin: 0 0 6px !important;
}
.trust-cert-focus-label { margin-top: 18px !important; }
.trust-cert-progress-pct {
    font-family: var(--ff-display) !important;
    font-size: 22px !important;
    font-weight: 600;
    color: var(--c-text) !important;
    margin: 0 0 10px !important;
}
.trust-progress-bar {
    height: 6px;
    width: 100%;
    border-radius: 999px;
    background: rgba(160, 49, 242, .12);
    overflow: hidden;
    margin-bottom: 4px;
}
.trust-progress-bar span {
    display: block;
    height: 100%;
    background: var(--c-purple-600);
    border-radius: 999px;
}

.trust-callout {
    background: #FFFFFF;
    border: 1px solid rgba(20, 16, 35, .06);
    border-radius: 16px;
    padding: 26px 28px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 1px 0 rgba(20, 16, 35, .02);
}
.trust-callout h3 {
    font-family: var(--ff-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 8px;
    letter-spacing: -.2px;
}
.trust-callout p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-text-muted, #5b5470);
    margin: 0;
}

.trust-disclosure-list {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.trust-disclosure-row {
    background: #FFFFFF;
    border: 1px solid rgba(20, 16, 35, .06);
    border-radius: 16px;
    padding: 22px 26px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 1px 0 rgba(20, 16, 35, .02);
}
.trust-disclosure-row .trust-card-icon { margin-bottom: 0; }
.trust-disclosure-row h4 {
    font-family: var(--ff-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 6px;
    letter-spacing: -.2px;
}
.trust-disclosure-row p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--c-text-muted, #5b5470);
    margin: 0;
}

.trust-section-h3 {
    font-family: var(--ff-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--c-text);
    margin: 40px 0 18px;
    letter-spacing: -.2px;
}
.trust-escalation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 0 16px;
}
.trust-escalation-card {
    background: #FFFFFF;
    border: 1px solid rgba(20, 16, 35, .06);
    border-radius: 16px;
    padding: 22px 22px;
    box-shadow: 0 1px 0 rgba(20, 16, 35, .02);
}
.trust-escalation-card .trust-card-icon { margin-bottom: 10px; }
.trust-escalation-card h5 {
    font-family: var(--ff-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 6px;
}
.trust-escalation-card p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--c-text-muted, #5b5470);
    margin: 4px 0 0;
}
.trust-link {
    color: var(--c-purple-600);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(160, 49, 242, .35);
    transition: color .15s ease, border-color .15s ease;
}
.trust-link:hover { color: var(--c-purple-600); border-bottom-color: var(--c-purple-600); }

.trust-faq-list {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.trust-faq-item {
    background: #FFFFFF;
    border: 1px solid rgba(20, 16, 35, .06);
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 1px 0 rgba(20, 16, 35, .02);
}
.trust-faq-item > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--c-text);
}
.trust-faq-item > summary::-webkit-details-marker { display: none; }
.trust-faq-toggle {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(160, 49, 242, .35);
    color: var(--c-purple-600);
}
.trust-faq-toggle::before,
.trust-faq-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1.6px;
    background: currentColor;
    transform: translate(-50%, -50%);
}
.trust-faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s ease; }
.trust-faq-item[open] .trust-faq-toggle { background: var(--c-purple-600); color: #FFFFFF; border-color: var(--c-purple-600); }
.trust-faq-item[open] .trust-faq-toggle::after { transform: translate(-50%, -50%) rotate(0); }
.trust-faq-chev {
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--c-text-muted, #6B6480);
    border-bottom: 2px solid var(--c-text-muted, #6B6480);
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.trust-faq-item[open] .trust-faq-chev { transform: rotate(225deg); }
.trust-faq-item > p {
    margin: 0;
    padding: 0 22px 22px 66px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-text-muted, #5b5470);
}

.trust-contact-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    margin-top: 0;
    align-items: start;
}
.trust-contact-copy {
    display: block;
}
.trust-contact-copy .trust-eyebrow { margin-top: 0; }
.trust-contact-copy .trust-h2 {
    font-size: clamp(26px, 2.8vw, 34px);
    line-height: 1.15;
    margin-bottom: 12px;
}
.trust-contact-copy > p:first-of-type + p,
.trust-contact-copy .trust-divider + p {
    margin-top: 8px;
}

.trust-contact-copy > .trust-contact-note {
    margin-top: 28px !important;
    margin-bottom: 0 !important;
}
.trust-contact-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: flex-start;
    margin-top: 22px;
}
.trust-contact-row .trust-card-icon { margin-bottom: 0; }
.trust-contact-row h4 {
    font-family: var(--ff-display);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0 0 4px;
    letter-spacing: -.1px;
}
.trust-contact-row p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-text-muted, #5b5470);
    margin: 0;
}
.trust-contact-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 40px 0 0 !important;
    background: #FFFFFF;
    border: 1px solid rgba(20, 16, 35, .06);
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 13.5px !important;
    color: var(--c-text-muted, #5b5470);
}
.trust-contact-form {
    background: #FFFFFF;
    border: 1px solid rgba(20, 16, 35, .06);
    border-radius: 18px;
    padding: 24px 26px;
    box-shadow: 0 8px 24px -16px rgba(20, 16, 35, .15);
}
.trust-contact-form h3 {
    font-family: var(--ff-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--c-text);
    margin: 0;
    letter-spacing: -.2px;
}
.trust-form-intro {
    font-size: 13px !important;
    color: var(--c-text-muted, #5b5470);
    margin: 10px 0 14px !important;
}
.trust-form-status {
    margin: 10px 0 0 0 !important;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid transparent;
}
.trust-form-status[data-tone="success"] {
    background: #ECFDF5;
    border-color: #BBF7D0;
    color: #065F46;
}
.trust-form-status[data-tone="error"] {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #991B1B;
}
.trust-contact-form label {
    display: block;
    margin-bottom: 10px;
    font-family: var(--ff-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-text);
}
.trust-contact-form label span {
    display: block;
    margin-bottom: 4px;
}
.trust-contact-form label em {
    color: var(--c-purple-600);
    font-style: normal;
    margin-left: 2px;
}
.trust-contact-form input,
.trust-contact-form select,
.trust-contact-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid rgba(20, 16, 35, .12);
    border-radius: 10px;
    font-family: var(--ff-sans);
    font-size: 13.5px;
    color: var(--c-text);
    background: #FAFAFE;
    transition: border-color .15s ease, background .15s ease;
}

.trust-contact-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23A031F2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='2 2 6 6 10 2'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px 8px;
    cursor: pointer;
}
.trust-contact-form select:invalid,
.trust-contact-form select option[value=""] {
    color: var(--c-text-muted, #6B6480);
}
.trust-contact-form select option {
    color: var(--c-text);
    font-weight: 500;
    background: #FFFFFF;
}
.trust-contact-form select optgroup {
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--c-purple-600);
    background: #FAFAFE;
}
.trust-contact-form select::-ms-expand { display: none; }
.trust-contact-form input:focus,
.trust-contact-form select:focus,
.trust-contact-form textarea:focus {
    outline: none;
    border-color: var(--c-purple-600);
    background: #FFFFFF;
}
.trust-contact-form textarea {
    resize: vertical;
    min-height: 72px;
}
.trust-contact-form .btn-primary {
    width: 100%;
    margin-top: 4px;
    padding: 11px 24px;
}
.trust-form-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0 !important;
    font-size: 12.5px !important;
    color: var(--c-text-muted, #5b5470) !important;
    text-align: center;
}

.trust-footer-line {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 28px 0 0;
    font-size: 13px;
    color: var(--c-text-muted, #5b5470);
    flex-wrap: wrap;
}
.trust-footer-line-sep {
    flex: 1;
    height: 1px;
    background: rgba(20, 16, 35, .08);
    min-width: 20px;
}

@media (max-width: 1100px) {
    .trust-page { padding: 96px 0 20px; }
    .trust-shell { padding: 0 24px; max-width: 760px; }
    .trust-section { padding-bottom: 60px; margin-bottom: 60px; }
    .trust-overview-grid,
    .trust-grid-2 { grid-template-columns: 1fr; gap: 16px; }
    .trust-grid-3 { grid-template-columns: 1fr; gap: 14px; }
    .trust-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .trust-timeline,
    .trust-timeline.trust-timeline-4 {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .trust-timeline li {
        text-align: left;
        padding-left: 52px;
        min-height: 0;
        align-items: flex-start;
        padding-bottom: 8px;
    }
    
    .trust-timeline li + li::before { display: none; }
    .trust-timeline-num {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
    }
    
    .trust-timeline-icon { display: none !important; }
    .trust-timeline h4 { text-align: left; margin-top: 4px; }
    .trust-timeline p { text-align: left; }
    .trust-creed-row {
        grid-template-columns: 1fr;
        padding: 30px 24px 24px;
        gap: 16px;
    }
    .trust-creed-row .trust-creed-letter {
        position: static;
        transform: none;
        display: block;
        width: auto;
        text-align: left;
        font-size: 72px;
        line-height: 1;
        margin: 0 0 -8px;
    }
    .trust-creed-row-icon { display: none; }
    .trust-cert-stack { padding-left: 0; }
    .trust-cert-stack::before { display: none; }
    .trust-cert-row::before { display: none; }
    .trust-cert-row {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px;
    }
    .trust-contact-shell {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .trust-escalation-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 760px) {
    .trust-page { padding: 48px 0 48px; }
    .trust-shell { padding: 0 18px; }
    .trust-section { padding-bottom: 48px; margin-bottom: 48px; }
    .trust-sub-h { margin: 40px 0 16px; }
    .trust-grid-4 { grid-template-columns: 1fr; }
    .trust-overview-card,
    .trust-feature-card { padding: 22px 20px; }
    .trust-creed-row .trust-creed-letter {
        font-size: 56px;
        text-align: left;
        width: auto;
    }
    .trust-creed-row { padding: 24px 20px; }
    .trust-cert-row { padding: 20px 18px; }
    .trust-disclosure-row { grid-template-columns: 1fr; padding: 20px; }
    .trust-disclosure-row .trust-card-icon { margin-bottom: 6px; }
    .trust-escalation { padding: 24px 20px; }
    
    .trust-escalation-card {
        display: block;
        padding: 22px 22px;
        background: #FFFFFF;
        border: 1px solid rgba(20, 16, 35, .06);
        border-radius: 16px;
        box-shadow: 0 1px 0 rgba(20, 16, 35, .02);
    }
    .trust-escalation-card .trust-card-icon {
        width: 38px;
        height: 38px;
        margin: 0 0 12px;
    }
    .trust-escalation-card .trust-card-icon svg { width: 18px; height: 18px; }
    .trust-escalation-card h5 { margin: 0 0 6px; }
    .trust-escalation-card p { margin: 4px 0 0; }
    .trust-escalation-card .trust-link {
        display: inline-block;
        max-width: 100%;
        word-break: break-word;
        margin: 0 0 6px;
    }
    .trust-escalation-grid { gap: 14px; }
    .trust-callout { flex-direction: column; padding: 22px 20px; }
    .trust-callout .trust-card-icon { margin: 0 0 8px; }
    .trust-contact-form { padding: 24px 20px; }
    .trust-faq-item > summary { padding: 16px 18px; font-size: 15px; gap: 14px; }
    .trust-faq-item > p { padding: 0 18px 18px 58px; font-size: 13.5px; }
    .trust-h1 { letter-spacing: -.4px; }
    .trust-h2 { letter-spacing: -.3px; }
}



/* ============================================================
   SETTLA CURRENCY DIAL
   ============================================================ */
/* Dial overlays the bottom of the home page corridor-map image.
   Dial's bottom edge sits flush with the image's bottom edge. */
.corridor-map { overflow: visible; }
.settla-dial-overlay {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) scale(2.2);
    transform-origin: bottom center;
    z-index: 5;
    pointer-events: auto;
}
.settla-dial-overlay .settla-dial-container { margin: 0 auto; }

/* Desktop laptops with shorter viewports — scale the dial down so it
   fits on screen without scrolling. Width gate keeps mobile/tablet rules
   below from being affected. Transform-origin is bottom center so the
   bottom edge stays anchored while the top contracts toward the viewport. */
@media (min-width: 1101px) and (max-height: 900px) {
    .settla-dial-overlay {
        transform: translateX(-50%) scale(2.2);
    }
}
@media (min-width: 1101px) and (max-height: 800px) {
    .settla-dial-overlay {
        transform: translateX(-50%) scale(1.95);
    }
}
@media (min-width: 1101px) and (max-height: 700px) {
    .settla-dial-overlay {
        transform: translateX(-50%) scale(1.7);
    }
}

@media (min-width: 761px) and (max-width: 1100px) {
    .settla-dial-overlay {
        bottom: 6%;
        transform: translateX(-50%) scale(1);
    }
}
@media (max-width: 760px) {
    .settla-dial-overlay {
        bottom: 2%;
        transform: translateX(-50%) scale(0.75);
    }
}
@media (max-width: 480px) {
    .settla-dial-overlay {
        bottom: 2%;
        transform: translateX(-50%) scale(0.6);
    }
}
@media (max-width: 360px) {
    .settla-dial-overlay {
        bottom: 2%;
        transform: translateX(-50%) scale(0.48);
    }
}
.settla-dial-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
.settla-dial-container {
    width: 380px;
    height: 372px;
    position: relative;
    filter:
        drop-shadow(0 25px 50px rgba(44, 24, 98, 0.22))
        drop-shadow(0 8px 20px rgba(0, 0, 0, 0.06));
    font-family: var(--ff-sans, 'Inter', sans-serif);
}
.settla-dial-frame {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.settla-dial {
    width: 380px;
    height: 380px;
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    border-radius: 50%;
    touch-action: none;
    cursor: grab;
}
.settla-dial.is-dragging { cursor: grabbing; }

.settla-dial-arc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.settla-dial-ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform-origin: 50% 50%;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}
.settla-dial-overlay { will-change: transform; }

.settla-dial-label {
    position: absolute;
    top: 50%;
    left: 50%;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transform:
        translate(-50%, -50%)
        rotate(var(--angle))
        translateY(calc(var(--radius) * -1));
}
.settla-dial-label.is-outer { color: #b4b4be; font-size: 11px; }
.settla-dial-label.is-inner { color: #ffffff; font-size: 11px; }

.settla-dial-pill {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #ffffff;
    color: #1a1a22;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 8;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transform:
        translate(-50%, -50%)
        rotate(var(--angle))
        translateY(calc(var(--radius) * -1));
}
.settla-dial-pill-outer {
    --angle: -30deg;
    --radius: 165px;
    background: linear-gradient(180deg, #3a2278 0%, #2c1862 100%);
    color: #ffffff;
    box-shadow:
        0 4px 12px rgba(44, 24, 98, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.settla-dial-pill-inner {
    --angle: -30deg;
    --radius: 128px;
}

.settla-dial-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54%;
    height: 54%;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 10;
}
.settla-dial-micro {
    font-size: 9px;
    font-weight: 600;
    color: #9a9aa5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.settla-dial-rate {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a22;
    margin: 3px 0 6px;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum";
}
.settla-dial-save {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #e8f9ef;
    color: #0e8f4a;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.settla-dial-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(to right, transparent, #e8e8ee, transparent);
    margin: 0 0 6px;
}
.settla-dial-vs {
    font-size: 9px;
    color: #9a9aa5;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
}
.settla-dial-bank {
    font-size: 17px;
    font-weight: 700;
    color: #4a4a55;
    letter-spacing: -0.01em;
    margin-bottom: 5px;
    font-feature-settings: "tnum";
}
.settla-dial-compared {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 500;
    color: #6e3bb5;
}
.settla-dial-compared svg { width: 11px; height: 11px; }

.settla-dial-brand {
    position: absolute;
    left: 50%;
    top: 298px;
    transform: translateX(-50%);
    height: 72px;
    width: auto;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 6;
}

/* ---------- iPad Pro / tablet (761–1100px) — About page polish ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
    /* ORIGIN STORY — image first (full width), text below */
    .origin { padding: 40px 0; overflow: hidden; }
    .origin-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px;
    }
    .origin-image {
        order: -1;
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
    }
    .origin-image::before,
    .origin-image::after { display: none; }
    .origin-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }
    .origin-copy {
        padding: 40px 32px 0 !important;
        transform: none !important;
        text-align: left !important;
        align-self: stretch !important;
    }

    /* INFORMAL ECONOMY — image first (full width), text below */
    .informal { padding: 40px 0; overflow: hidden; }
    .informal-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px;
    }
    .informal-image {
        order: -1;
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 0 !important;
        align-self: stretch !important;
    }
    .informal-image::before,
    .informal-image::after { display: none !important; }
    .informal-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }
    .informal-copy {
        padding: 40px 32px 0 !important;
    }

    /* Center the "Our Values" heading block. */
    .vm-title {
        text-align: center;
    }
    .vm-overlay {
        text-align: center;
    }
    .vm-split {
        margin-left: auto;
        margin-right: auto;
    }
    .vm-card {
        text-align: left;
    }
    /* Restore full image opacity on tablet — the ≤980px rule fades it to .25
       which looks washed-out on iPad Pro / portrait tablets. */
    .vm-bg {
        opacity: 1 !important;
    }

    /* Settla-X (Phase 3) — logo moves above the heading and is centered;
       text block sits with an 8px left gutter — a touch tighter than the
       other sections so it nudges left without going flush to the edge. */
    .settla-x-overlay {
        justify-content: flex-start !important;
        padding-left: 28px !important;
    }
    .settla-x-copy {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    .settla-x-logo {
        order: -1 !important;
        align-self: center !important;
        margin: 0 auto 18px !important;
    }
    .settla-x-copy .phase-eyebrow,
    .settla-x-copy .section-h2,
    .settla-x-tagline,
    .settla-x-copy p {
        align-self: flex-start;
        text-align: left;
        width: 100%;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Tighten the gap between AI-Enhanced tiles and the footer. */
    .ai-enhanced {
        padding: 32px 0 12px !important;
        margin-bottom: 0 !important;
    }
}

/* Settla-X — mobile/tablet image above the section content (hidden on desktop).
   Same top/bottom mask fade as the other section images. */
.settla-x-mobile-img {
    display: none;
}
@media (max-width: 1100px) {
    .settla-x-mobile-img {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0 0 24px;
        position: relative;
        z-index: 2;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }
}

/* AI-Enhanced — mobile/tablet portrait image (hidden on desktop). */
.ai-enhanced-mobile-img {
    display: none;
}
@media (max-width: 1100px) {
    .ai-enhanced-mobile-img {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0 0 24px;
        position: relative;
        z-index: 2;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }
}

/* CREED — mobile/tablet image above the title (hidden on desktop). */
.creed-mobile-img {
    display: none;
}
@media (max-width: 1100px) {
    .creed-mobile-img {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0 0 40px;
        position: relative;
        z-index: 2;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }
    /* Hide the inline desktop pillars image since the new mobile/tablet image replaces it. */
    .creed-image {
        display: none !important;
    }
}