:root {
    --bg: #fbfaf6;
    --bg-2: #fff;
    --bg-card: #fff;
    --bg-soft: #f4f1ea;
    --bg-deep: #0b2545;
    --line: #e8e2d4;
    --line-strong: #d8cfb8;
    --ink: #0b1424;
    --ink-2: #1a2638;
    --ink-dim: #5a6478;
    --ink-mute: #8a8475;
    --navy: #0b2545;
    --navy-2: #13315c;
    --navy-600: #13315c;
    --navy-700: #0b2545;
    --navy-900: #070d18;
    --text-h2: clamp(34px, 4.5vw, 58px);
    --gold: #b8862c;
    --gold-2: #d4a64a;
    --saffron: #e85a1a;
    --green: #0a8754;
    --red: #c44545;
    --ff-display: var(--font-playfair), "Playfair Display", Georgia, serif;
    --ff-body:
        var(--font-inter), "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --ff-mono: var(--font-mono), "JetBrains Mono", monospace;
    --maxw: 1280px;
    --shadow-sm:
        0 1px 3px rgba(11, 37, 69, 0.04), 0 1px 2px rgba(11, 37, 69, 0.03);
    --shadow-md:
        0 10px 30px -8px rgba(11, 37, 69, 0.1),
        0 4px 12px -4px rgba(11, 37, 69, 0.06);
    --shadow-lg:
        0 30px 60px -20px rgba(11, 37, 69, 0.18),
        0 12px 24px -8px rgba(11, 37, 69, 0.08);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    text-transform: capitalize;
}

.mobile-nav {
    display: none;
}

.mobile-toggle-close {
    font-family: var(--ff-mono);
    font-size: 16px;
    color: var(--navy);
    line-height: 1;
}

.mobile-nav-inner {
    max-height: calc(100vh - 82px);
    overflow-y: auto;
    padding: 18px 20px 24px;
    background: hsla(0, 0%, 100%, 0.98);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}

.mobile-nav-group {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.mobile-nav-heading {
    display: block;
    font-family: var(--ff-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.01em;
}

.mobile-nav-section {
    margin-top: 14px;
}

.mobile-nav-label {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}

.mobile-nav-link {
    display: block;
    padding: 10px 0;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.35;
}

.mobile-nav-link:hover {
    color: var(--gold);
}

.mobile-nav-cta {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
}

.member-cards {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 48px;
}

.member-card {
    display: grid;
    grid-template-columns: 36% 1fr;
    background: var(--navy);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid hsla(0, 0%, 100%, 0.08);
    position: relative;
    min-height: 420px;
}

.member-card:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            #fff 33%,
            #fff 66%,
            var(--green) 66%);
    z-index: 2;
}

.member-portrait {
    position: relative;
    min-height: 420px;
    background: linear-gradient(160deg,
            rgba(212, 166, 74, 0.18),
            rgba(11, 37, 69, 0.5));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    overflow: hidden;
}

.member-portrait .fd-portrait-image {
    object-fit: cover;
    object-position: center top;
}

.member-portrait-initials {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);
    font-family: var(--ff-display);
    font-size: 120px;
    font-weight: 500;
    font-style: italic;
    color: var(--gold-2);
    opacity: 0.2;
    line-height: 1;
    letter-spacing: -0.05em;
    pointer-events: none;
    z-index: 1;
}

.fd-portrait-name,
.fd-portrait-role {
    position: relative;
    z-index: 1;
}

.member-portrait:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background: linear-gradient(0deg, rgba(11, 37, 69, 0.92) 0, transparent);
    z-index: 1;
    pointer-events: none;
}

.member-body {
    padding: 52px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.member-body:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    background: radial-gradient(circle at 80% 20%,
            rgba(212, 166, 74, 0.1),
            transparent 60%);
    pointer-events: none;
}

.member-name {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(26px, 3.2vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin-top: 16px;
    margin-bottom: 20px;
}

.member-name .it {
    font-style: italic;
    color: var(--gold-2);
    font-weight: 400;
}

@media (max-width: 900px) {
    .member-card {
        grid-template-columns: 42% 1fr;
    }

    .member-card,
    .member-portrait {
        min-height: 360px;
    }

    .member-body {
        padding: 36px 32px;
    }
}

@media (max-width: 680px) {
    .member-card {
        grid-template-columns: 1fr;
        min-height: unset;
    }

    .member-portrait {
        min-height: 500px;
        aspect-ratio: unset;
    }

    .member-body {
        padding: 28px 24px;
    }

    .member-name {
        font-size: 26px;
    }
}

.process-grid {
    grid-template-columns: repeat(4, 1fr);
}

.proc-num {
    font-size: 54px;
}

.proc h4 {
    font-size: 21px;
}

.proc p {
    font-size: 13.5px;
}

.insights-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
}

@media (max-width: 1024px) {

    .founder,
    .hero-grid,
    .sec-head {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .insights-grid,
    .process-grid,
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .nav-menu {
        display: none;
    }

    .mobile-toggle {
        display: flex;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line-strong);
        border-radius: 3px;
        background: #fff;
    }
}

@media (max-width: 640px) {
    .wrap {
        padding: 0 20px;
    }

    .cta-section,
    .founder-section,
    .section {
        padding: 70px 0;
    }

    .hero {
        padding: 50px 0 70px;
    }

    .footer-top,
    .founder-creds,
    .hero-stats,
    .insights-grid,
    .process-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 38px;
    }

    .nav-logo img {
        height: 48px;
    }

    .nav-logo .brand-meta {
        display: none;
    }

    .cta-actions {
        flex-direction: column;
    }

    .nav-cta {
        display: none !important;
    }

    .cta-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .trust-badges {
        gap: 20px;
    }

    .trust-badge {
        font-size: 15px;
    }

    .logo-showcase-img {
        height: 130px !important;
    }
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(900px 500px at 90% -10%,
            rgba(184, 134, 44, 0.08),
            transparent 60%),
        radial-gradient(800px 450px at -10% 20%,
            rgba(11, 37, 69, 0.06),
            transparent 60%),
        radial-gradient(700px 400px at 50% 110%,
            rgba(10, 135, 84, 0.05),
            transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 1;
}

.eyebrow {
    font-size: 11px;
    letter-spacing: 0.22em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.eyebrow:before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--gold);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 2px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.04em;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: var(--ff-body);
}

.btn-primary {
    background: var(--navy);
    color: #fff;
}

.btn-primary:hover {
    background: var(--navy-2);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(11, 37, 69, 0.4);
}

.btn-gold {
    background: var(--gold);
    color: #fff;
}

.btn-gold:hover {
    background: var(--gold-2);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(184, 134, 44, 0.4);
}

.btn-ghost {
    border-color: var(--line-strong);
    color: var(--ink);
}

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

.arrow {
    width: 14px;
    height: 14px;
    display: inline-block;
    transition: transform 0.3s;
}

.btn:hover .arrow {
    transform: translate(3px, -3px);
}

.ribbon {
    background: var(--navy);
    color: #fff;
    font-family: var(--ff-mono);
    font-size: 11.5px;
    overflow: hidden;
    position: relative;
    z-index: 50;
}

.ribbon-track {
    display: flex;
    gap: 48px;
    padding: 10px 0;
    white-space: nowrap;
    animation: scroll 45s linear infinite;
    width: max-content;
}

.ribbon-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: hsla(0, 0%, 100%, 0.7);
}

.ribbon-item .tick {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-2);
}

.ribbon-item .up {
    color: #7be29a;
}

.ribbon-item .dn {
    color: #ff8b8b;
}

.ribbon-item strong {
    color: #fff;
    font-weight: 500;
}

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

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

.nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 40;
    background: hsla(48, 38%, 97%, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
}

.nav-inner {
    justify-content: space-between;
    padding: 14px 28px;
    max-width: var(--maxw);
    margin: 0 auto;
}

.nav-inner,
.nav-logo {
    display: flex;
    align-items: center;
}

.nav-logo {
    gap: 14px;
}

.nav-logo img {
    height: 58px;
    width: auto;
    display: block;
}

.nav-logo .brand-meta {
    display: flex;
    flex-direction: column;
    line-height: 1;
    padding-left: 14px;
    border-left: 1px solid var(--line);
}

.nav-logo .brand-name {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.01em;
    color: var(--navy);
}

.nav-logo .brand-tag {
    font-family: var(--ff-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--gold);
    text-transform: uppercase;
    margin-top: 5px;
    font-weight: 500;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-item {
    position: relative;
}

.nav-link {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    transition: color 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

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

.nav-link .chev {
    width: 10px;
    height: 10px;
    opacity: 0.6;
    transition: transform 0.3s;
}

.nav-item:hover .chev {
    transform: rotate(180deg);
}

.dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 14px;
    min-width: 270px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-lg);
}

.dropdown.wide {
    min-width: 330px;
}

.nav-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown a {
    display: block;
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--ink-2);
    border-radius: 2px;
    transition: all 0.2s;
}

.dropdown a:hover {
    color: var(--gold);
    background: var(--bg-soft);
    padding-left: 18px;
}

.dropdown .dd-label {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--ink-mute);
    text-transform: uppercase;
    padding: 8px 12px 6px;
    font-weight: 500;
}

.nav-cta {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mobile-toggle {
    display: none;
}

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

.hero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 200px;
    background: linear-gradient(180deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            #fff 33%,
            #fff 66%,
            var(--green) 66%,
            var(--green) 100%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    grid-gap: 60px;
    gap: 60px;
    align-items: center;
}

.hero-eyebrow {
    margin-bottom: 24px;
}

.hero h1 {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(40px, 5.5vw, 76px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin-bottom: 28px;
}

.hero h1 .it {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}

.hero h1 .un {
    display: inline-block;
    position: relative;
}

.hero h1 .un:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: linear-gradient(90deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            var(--ink) 33%,
            var(--ink) 66%,
            var(--green) 66%);
    opacity: 0.85;
}

.hero-sub {
    font-size: 18px;
    color: var(--ink-dim);
    line-height: 1.65;
    max-width: 540px;
    margin-bottom: 40px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 54px;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 32px;
    gap: 32px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
}

.hero-stat .num {
    font-family: var(--ff-display);
    font-size: 42px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1;
    letter-spacing: -0.02em;
}

.hero-stat .num .acc {
    color: var(--gold);
}

.hero-stat .lbl {
    font-size: 11.5px;
    color: var(--ink-mute);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 10px;
    font-weight: 500;
}

.hero-right {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.logo-showcase {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 40px 32px 32px;
    position: relative;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.logo-showcase:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            var(--gold) 33%,
            var(--gold) 66%,
            var(--green) 66%);
}

.logo-showcase:after {
    content: "";
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(184, 134, 44, 0.06),
            transparent 70%);
}

.logo-showcase-img {
    height: 170px !important;
    width: auto !important;
    margin: 0 auto;
    filter: drop-shadow(0 6px 16px rgba(11, 37, 69, 0.1));
    position: relative;
    z-index: 1;
    object-fit: contain;
}

.logo-tagline {
    text-align: center;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed var(--line-strong);
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.logo-tagline span {
    color: var(--gold);
}

.hero-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 28px;
    position: relative;
    box-shadow: var(--shadow-md);
}

.hc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.hc-label {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.hc-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(10, 135, 84, 0.5);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(10, 135, 84, 0.5);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(10, 135, 84, 0);
    }

    to {
        box-shadow: 0 0 0 0 rgba(10, 135, 84, 0);
    }
}

.hc-title {
    font-family: var(--ff-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.2;
}

.hc-source {
    font-family: var(--ff-mono);
    font-size: 10px;
    color: var(--ink-mute);
    letter-spacing: 0.1em;
    text-align: right;
}

.ipo-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 8px;
    gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
}

.ipo-row:last-child {
    border-bottom: none;
}

.ipo-co {
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
}

.ipo-meta {
    font-size: 11px;
    color: var(--ink-mute);
    margin-top: 3px;
}

.ipo-band,
.ipo-meta {
    font-family: var(--ff-mono);
}

.ipo-band {
    font-size: 13px;
    color: var(--navy);
    text-align: right;
    font-weight: 500;
}

.ipo-status {
    font-family: var(--ff-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    display: inline-block;
    margin-top: 5px;
    font-weight: 600;
}

.st-live {
    background: rgba(10, 135, 84, 0.1);
    color: var(--green);
    border: 1px solid rgba(10, 135, 84, 0.25);
}

.st-soon {
    background: rgba(184, 134, 44, 0.1);
    color: var(--gold);
    border: 1px solid rgba(184, 134, 44, 0.25);
}

.trust {
    padding: 36px 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.trust-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

.trust-label {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--ink-mute);
    text-transform: uppercase;
    font-weight: 500;
}

.trust-badges {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    align-items: center;
}

.trust-badge {
    font-family: var(--ff-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: 0.01em;
    font-style: italic;
    opacity: 0.75;
    transition: opacity 0.3s;
}

.trust-badge:hover {
    opacity: 1;
}

.section {
    padding: 110px 0;
    border-bottom: 1px solid var(--line);
    position: relative;
}

.section.alt {
    background: #fff;
}

.section.tight {
    padding: 80px 0;
}

.sec-head {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    grid-gap: 60px;
    gap: 60px;
    align-items: end;
    margin-bottom: 70px;
}

.sec-head h2 {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(34px, 4.5vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--navy);
}

.sec-head h2 .it {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}

.sec-head p {
    font-size: 17px;
    color: var(--ink-dim);
    max-width: 520px;
    line-height: 1.65;
}

.sec-head .eyebrow {
    margin-bottom: 20px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.svc {
    background: #fff;
    padding: 40px 32px;
    position: relative;
    transition: all 0.4s ease;
    cursor: pointer;
    overflow: hidden;
}

.svc:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0;
    background: var(--gold);
    transition: height 0.5s ease;
}

.svc:hover {
    background: var(--bg-soft);
}

.svc:hover:before {
    height: 100%;
}

.svc-num {
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.15em;
    margin-bottom: 24px;
    font-weight: 500;
}

.svc-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--gold);
    background: var(--bg-soft);
    transition: all 0.4s;
}

.svc:hover .svc-icon {
    border-color: var(--gold);
    background: #fff;
    transform: scale(1.08) rotate(-8deg);
}

.svc h3 {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 1.25;
    color: var(--navy);
}

.svc p {
    font-size: 14px;
    color: var(--ink-dim);
    line-height: 1.65;
    margin-bottom: 24px;
}

.svc-link {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.svc-link:after {
    content: "→";
    transition: transform 0.3s;
}

.svc:hover .svc-link:after {
    transform: translateX(4px);
}

.founder-section {
    background: var(--navy);
    color: #fff;
    padding: 120px 0;
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

.founder-section:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle at 80% 20%,
            rgba(212, 166, 74, 0.15),
            transparent 50%);
    pointer-events: none;
}

.founder-section:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            #fff 33%,
            #fff 66%,
            var(--green) 66%);
}

.founder {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    grid-gap: 80px;
    gap: 80px;
    align-items: center;
    z-index: 1;
}

.founder,
.founder-visual {
    position: relative;
}

.founder-portrait {
    aspect-ratio: 4/5;
    background: linear-gradient(160deg,
            rgba(212, 166, 74, 0.18),
            rgba(11, 37, 69, 0.4));
    border: 1px solid hsla(0, 0%, 100%, 0.12);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 36px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.founder-portrait:before {
    content: "AJ";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);
    font-family: var(--ff-display);
    font-size: 200px;
    font-weight: 500;
    font-style: italic;
    color: var(--gold-2);
    opacity: 0.2;
    letter-spacing: -0.05em;
    line-height: 1;
}

.fp-name {
    font-family: var(--ff-display);
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #fff;
    position: relative;
}

.fp-role {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-2);
    position: relative;
    font-weight: 500;
}

.founder-content .eyebrow {
    margin-bottom: 20px;
    color: var(--gold-2);
}

.founder-content .eyebrow:before {
    background: var(--gold-2);
}

.founder-content h2 {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    color: #fff;
}

.founder-content h2 .it {
    font-style: italic;
    color: var(--gold-2);
    font-weight: 400;
}

.founder-quote {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 21px;
    line-height: 1.55;
    color: #f0eee5;
    padding: 24px 0 24px 28px;
    border-left: 2px solid var(--gold-2);
    margin-bottom: 32px;
}

.founder-bio {
    font-size: 15px;
    color: hsla(0, 0%, 100%, 0.78);
    line-height: 1.7;
    margin-bottom: 32px;
}

.founder-creds {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 18px;
    gap: 18px;
    padding-top: 28px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
}

.cred {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cred-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-2);
    margin-top: 8px;
    flex-shrink: 0;
}

.cred-text {
    font-size: 13.5px;
    color: hsla(0, 0%, 100%, 0.7);
    line-height: 1.5;
}

.cred-text strong {
    color: #fff;
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.proc {
    background: #fff;
    padding: 40px 28px;
    position: relative;
    transition: background 0.3s;
}

.proc:hover {
    background: var(--bg-soft);
}

.proc-num {
    font-size: clamp(32px, 4vw, 54px);
    font-style: italic;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 18px;
    opacity: 0.9;
}

.proc h4,
.proc-num {
    font-family: var(--ff-display);
    font-weight: 600;
}

.proc h4 {
    font-size: clamp(14px, 1.6vw, 21px);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
    color: var(--navy);
}

.proc p {
    font-size: clamp(12px, 1vw, 13.5px);
    color: var(--ink-dim);
    line-height: 1.65;
}

.insights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 24px;
    gap: 24px;
}

.insight {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.4s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

.insight:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.insight-img {
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--navy), var(--navy-2));
}

.insight-img.alt-1 {
    background: linear-gradient(135deg, #b8862c, #8a6420);
}

.insight-img.alt-2 {
    background: linear-gradient(135deg, #0a8754, #075c3a);
}

.insight-img:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%,
            hsla(0, 0%, 100%, 0.18),
            transparent 60%);
}

.insight-img:after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 1px solid hsla(0, 0%, 100%, 0.15);
}

.insight-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 2px;
    font-weight: 600;
}

.insight-body {
    padding: 26px;
    flex: 1 1;
    display: flex;
    flex-direction: column;
}

.insight-meta {
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    font-weight: 500;
}

.insight h3 {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    color: var(--navy);
    flex: 1 1;
}

.insight.large h3 {
    font-size: 26px;
}

.insight p {
    font-size: 14px;
    color: var(--ink-dim);
    line-height: 1.6;
}

.insight-read {
    margin-top: 18px;
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

.cta-section {
    padding: 110px 0;
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    background: #fff;
}

.cta-section:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 350px at 85% 50%,
            rgba(184, 134, 44, 0.1),
            transparent 60%),
        radial-gradient(600px 300px at 15% 50%,
            rgba(11, 37, 69, 0.06),
            transparent 60%);
}

.cta-box {
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.cta-logo {
    height: 90px !important;
    width: auto !important;
    margin: 0 auto 30px;
    display: block;
    filter: drop-shadow(0 8px 20px rgba(11, 37, 69, 0.12));
    object-fit: contain;
}

.cta-box h2 {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    color: var(--navy);
}

.cta-box h2 .it {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}

.cta-box p {
    font-size: 18px;
    color: var(--ink-dim);
    margin-bottom: 36px;
    line-height: 1.6;
}

.cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.footer {
    padding: 90px 0 30px;
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.footer:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            #fff 33%,
            #fff 66%,
            var(--green) 66%);
}

.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    grid-gap: 60px;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-brand-img {
    height: 92px !important;
    width: auto !important;
    margin-bottom: 22px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    padding: 10px 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.footer-brand p {
    font-size: 13.5px;
    color: hsla(0, 0%, 100%, 0.7);
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 340px;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.fs-icon {
    width: 40px;
    height: 40px;
    border: 1px solid hsla(0, 0%, 100%, 0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    color: hsla(0, 0%, 100%, 0.7);
}

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

.footer-col h5 {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-2);
    margin-bottom: 20px;
    font-weight: 500;
}

.footer-col a {
    display: block;
    font-size: 14px;
    color: hsla(0, 0%, 100%, 0.7);
    padding: 6px 0;
    transition: color 0.2s;
}

.footer-col a:hover {
    color: #fff;
}

.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--ff-mono);
    font-size: 11px;
    color: hsla(0, 0%, 100%, 0.5);
    letter-spacing: 0.08em;
    flex-wrap: wrap;
    gap: 14px;
}

.footer-bottom a {
    color: hsla(0, 0%, 100%, 0.5);
    transition: color 0.2s;
}

.footer-bottom a:hover {
    color: var(--gold-2);
}

.wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.5);
    z-index: 30;
    transition: all 0.3s;
}

.wa-float:hover {
    transform: scale(1.1) rotate(-8deg);
}

.wa-float svg {
    width: 28px;
    height: 28px;
}

.page-hero {
    padding: 80px 0 70px;
}

.page-hero:after {
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
}

.breadcrumb {
    font-family: var(--ff-mono);
    font-size: 15px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 24px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 500;
}

.breadcrumb a {
    color: var(--ink-mute);
    transition: color 0.2s;
}

.breadcrumb a:hover {
    color: var(--gold);
}

.breadcrumb .sep {
    color: var(--line-strong);
}

.breadcrumb .current {
    color: var(--navy);
}

.page-hero h1 {
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.05;
    max-width: 900px;
}

.page-hero-sub {
    font-size: 18px;
    color: var(--ink-dim);
    max-width: 680px;
    line-height: 1.65;
}

.page-hero-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.page-hero-img {
    width: 480px;
    height: 300px;
}

@media (max-width: 992px) {
    .page-hero-img {
        width: 340px;
    }
}

@media (max-width: 768px) {
    .page-hero-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .page-hero-img {
        width: auto;
        height: auto;
        aspect-ratio: 850/517;
    }
}

@media (max-width: 480px) {
    .page-hero-img {
        width: 100%;
        height: auto;
    }
}

.subnav {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: -webkit-sticky;
    position: sticky;
    top: 87px;
    z-index: 30;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.subnav-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 28px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1 1;
}

.subnav-inner::-webkit-scrollbar {
    display: none;
}

.subnav-link {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink-mute);
    padding: 18px;
    position: relative;
    transition: color 0.25s;
    white-space: nowrap;
}

.subnav-link:hover {
    color: var(--ink);
}

.subnav-link.active {
    color: var(--navy);
}

.subnav-link.active:after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 2px;
    background: var(--gold);
}

.subnav-arrow {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow:
        0 1px 4px rgba(11, 37, 69, 0.1),
        0 1px 2px rgba(11, 37, 69, 0.06);
    font-size: 16px;
    line-height: 1;
    color: var(--ink-dim);
    cursor: pointer;
    z-index: 3;
    transform: translateY(-50%);
    transition:
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease,
        background-color 0.18s ease;
}

.subnav-arrow:hover {
    color: var(--navy);
    border-color: var(--gold-2);
    box-shadow:
        0 4px 10px rgba(11, 37, 69, 0.14),
        0 2px 4px rgba(11, 37, 69, 0.08);
    transform: translateY(-50%) scale(1.08);
}

.subnav-arrow:active {
    transform: translateY(-50%) scale(0.94);
    box-shadow: 0 1px 3px rgba(11, 37, 69, 0.1);
}

.subnav-arrow:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.subnav-arrow-left {
    left: 50px;
}

.subnav-arrow-right {
    right: 50px;
}

@media (max-width: 768px) {
    .subnav-arrow-left {
        left: 10px !important;
    }

    .subnav-arrow-right {
        right: 10px !important;
    }
}

.subnav-arrow,
.subnav-arrow span {
    padding-bottom: 1px;
}

.subnav-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    z-index: 1;
    pointer-events: none;
}

.subnav-fade-left {
    left: 0;
    background: linear-gradient(90deg,
            #fff 0,
            #fff 30%,
            hsla(0, 0%, 100%, 0.85) 55%,
            hsla(0, 0%, 100%, 0));
}

.subnav-fade-right {
    right: 0;
    background: linear-gradient(270deg,
            #fff 0,
            #fff 30%,
            hsla(0, 0%, 100%, 0.85) 55%,
            hsla(0, 0%, 100%, 0));
}

.prose {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--ink-2);
}

.prose p {
    margin-bottom: 22px;
}

.prose p.lead {
    font-size: 22px;
    font-style: italic;
    line-height: 1.55;
    margin-bottom: 32px;
}

.prose h2,
.prose p.lead {
    font-family: var(--ff-display);
    color: var(--navy);
}

.prose h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-top: 56px;
    margin-bottom: 22px;
    line-height: 1.15;
}

.prose h2 .it {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}

.prose h3 {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--navy);
    margin-top: 36px;
    margin-bottom: 14px;
}

.prose ul {
    margin-bottom: 22px;
    padding-left: 0;
    list-style: none;
}

.prose ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    color: var(--ink-2);
}

.prose ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 14px;
    height: 1px;
    background: var(--gold);
}

.prose strong {
    color: var(--navy);
    font-weight: 600;
}

.prose a {
    color: var(--gold);
    border-bottom: 1px solid;
}

.prose a:hover {
    color: var(--navy);
}

.content-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-gap: 70px;
    gap: 70px;
    align-items: start;
}

.sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 160px;
}

.sidebar-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 32px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.sidebar-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            var(--gold) 33%,
            var(--gold) 66%,
            var(--green) 66%);
}

.sidebar-card h4 {
    font-family: var(--ff-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
}

.sidebar-card p {
    font-size: 14px;
    color: var(--ink-dim);
    margin-bottom: 22px;
    line-height: 1.6;
}

.sidebar-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
    gap: 50px;
}

.sidebar-stat-row:last-child {
    border-bottom: none;
}

.sidebar-stat-label {
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sidebar-stat-value {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
}

.founder-detail-hero {
    background: var(--navy);
    color: #fff;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.founder-detail-hero:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle at 80% 20%,
            rgba(212, 166, 74, 0.18),
            transparent 50%);
    pointer-events: none;
}

.founder-detail-hero:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            #fff 33%,
            #fff 66%,
            var(--green) 66%);
}

.founder-detail-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    grid-gap: 70px;
    gap: 70px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.fd-portrait {
    aspect-ratio: 4/5;
    background: linear-gradient(160deg,
            rgba(212, 166, 74, 0.22),
            rgba(11, 37, 69, 0.5));
    border: 1px solid hsla(0, 0%, 100%, 0.14);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
}

.fd-portrait:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(11, 37, 69, 0.02) 35%,
            rgba(11, 37, 69, 0.88));
    z-index: 1;
}

.fd-portrait-image {
    object-fit: cover;
    object-position: center top;
}

.fd-portrait-name {
    font-family: var(--ff-display);
    font-size: 36px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
}

.fd-portrait-role {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-2);
    font-weight: 500;
    position: relative;
    z-index: 2;
}

.fd-eyebrow {
    color: var(--gold-2);
    margin-bottom: 24px;
}

.fd-eyebrow:before {
    background: var(--gold-2);
}

.fd-name {
    font-family: var(--ff-display);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}

.fd-name .it {
    font-style: italic;
    color: var(--gold-2);
    font-weight: 400;
}

.fd-sub {
    font-size: 18px;
    color: hsla(0, 0%, 100%, 0.78);
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 600px;
}

.fd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fd-tag {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-2);
    padding: 8px 14px;
    border: 1px solid rgba(212, 166, 74, 0.35);
    border-radius: 2px;
    font-weight: 500;
}

.firms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.firm-card {
    background: #fff;
    padding: 32px 22px;
    text-align: center;
    transition: background 0.3s;
}

.firm-card:hover {
    background: var(--bg-soft);
}

.firm-name {
    font-family: var(--ff-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    font-style: italic;
}

.firm-role {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 500;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
    gap: 30px;
}

.team-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.4s;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.team-card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.team-photo {
    aspect-ratio: 1/1;
    background: linear-gradient(160deg, var(--navy-2), var(--navy));
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-photo.var-1 {
    background: linear-gradient(160deg, #b8862c, #8a6420);
}

.team-photo.var-2 {
    background: linear-gradient(160deg, #0a8754, #075c3a);
}

.team-photo.var-3 {
    background: linear-gradient(160deg, #13315c, #0b2545);
}

.team-photo.var-4 {
    background: linear-gradient(160deg, #c46a30, #8a4920);
}

.team-photo.var-5 {
    background: linear-gradient(160deg, #5a4a8a, #382c5a);
}

.team-photo-real {
    min-height: 360px;
    background: var(--navy);
}

.team-photo-image {
    object-fit: cover;
    object-position: center top;
}

.team-photo-dummy {
    width: 68%;
    max-width: 190px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, 0.92);
    position: relative;
    transform: translateY(-18%);
    box-shadow: 0 18px 40px rgba(11, 37, 69, 0.14);
}

.team-photo-dummy:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -58%;
    width: 150%;
    aspect-ratio: 1.45/1;
    border-radius: 50% 50% 0 0;
    background: hsla(0, 0%, 100%, 0.92);
    transform: translateX(-50%);
}

.team-photo-initials {
    font-family: var(--ff-display);
    font-size: 96px;
    font-weight: 500;
    font-style: italic;
    color: hsla(0, 0%, 100%, 0.88);
    letter-spacing: -0.04em;
    line-height: 1;
}

.team-info {
    padding: 26px 24px;
    display: flex;
    flex: 1 1;
    flex-direction: column;
}

.team-name {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.team-role {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 14px;
}

.team-bio {
    font-size: 14px;
    color: var(--ink-dim);
    line-height: 1.65;
    margin-bottom: 18px;
}

.team-creds {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    color: var(--ink-mute);
    letter-spacing: 0.08em;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    margin-top: auto;
}

.team-founder-grid {
    grid-template-columns: 1fr;
}

.team-founder-card {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    align-items: stretch;
}

.team-founder-photo {
    aspect-ratio: auto;
    min-height: 360px;
}

.team-founder-info {
    padding: 40px 44px;
    justify-content: center;
}

.team-founder-name {
    font-size: clamp(26px, 3vw, 30px);
}

.team-founder-bio {
    margin-top: 20px;
    font-size: 15px;
}

.team-founder-action {
    margin-top: 24px;
}

.team-founder-link {
    font-size: 12px;
}

.numbers-banner {
    background: var(--navy);
    color: #fff;
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}

.numbers-banner:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%,
            rgba(212, 166, 74, 0.12),
            transparent 60%);
    pointer-events: none;
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1px;
    gap: 1px;
    background: hsla(0, 0%, 100%, 0.1);
    border: 1px solid hsla(0, 0%, 100%, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.num-cell {
    background: var(--navy);
    padding: 38px 28px;
    text-align: left;
}

.num-cell .v {
    font-family: var(--ff-display);
    font-size: 56px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}

.num-cell .v .acc {
    color: var(--gold-2);
}

.num-cell .l {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: hsla(0, 0%, 100%, 0.7);
    font-weight: 500;
}

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.sector-cell {
    background: #fff;
    padding: 32px 24px;
    transition: background 0.3s;
}

.sector-cell:hover {
    background: var(--bg-soft);
}

.sector-num {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--ink-mute);
    margin-bottom: 16px;
    font-weight: 500;
}

.sector-name {
    font-family: var(--ff-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
}

.sector-count {
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--gold);
    letter-spacing: 0.08em;
    font-weight: 500;
}

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
    gap: 30px;
}

.mv-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 50px 44px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
    box-shadow: var(--shadow-sm);
}

.mv-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.mv-card.dark {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.mv-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            var(--gold) 33%,
            var(--gold) 66%,
            var(--green) 66%);
}

.mv-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    margin-bottom: 28px;
}

.mv-card.dark .mv-icon {
    background: rgba(212, 166, 74, 0.12);
    border-color: rgba(212, 166, 74, 0.35);
    color: var(--gold-2);
}

.mv-label {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
    font-weight: 500;
}

.mv-card.dark .mv-label {
    color: var(--gold-2);
}

.mv-card h2 {
    font-family: var(--ff-display);
    font-size: 36px;
    font-weight: 500;
    color: var(--navy);
    margin-bottom: 20px;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.mv-card.dark h2 {
    color: #fff;
}

.mv-card h2 .it {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}

.mv-card.dark h2 .it {
    color: var(--gold-2);
}

.mv-card p {
    font-size: 16px;
    color: var(--ink-dim);
    line-height: 1.7;
}

.mv-card.dark p {
    color: hsla(0, 0%, 100%, 0.78);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.value-cell {
    background: #fff;
    padding: 40px 32px;
    transition: background 0.3s;
}

.value-cell:hover {
    background: var(--bg-soft);
}

.value-num {
    font-size: 42px;
    font-weight: 500;
    font-style: italic;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 20px;
    opacity: 0.9;
}

.value-num,
.value-title {
    font-family: var(--ff-display);
}

.value-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.value-desc {
    font-size: 14px;
    color: var(--ink-dim);
    line-height: 1.65;
}

.awards-list {
    display: grid;
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.award-row {
    background: #fff;
    padding: 32px 36px;
    display: grid;
    grid-template-columns: 100px 80px 1fr auto;
    grid-gap: 28px;
    gap: 28px;
    align-items: center;
    transition: background 0.3s;
}

.award-row:hover {
    background: var(--bg-soft);
}

.award-year {
    font-family: var(--ff-display);
    font-size: 28px;
    font-weight: 500;
    font-style: italic;
    color: var(--gold);
    letter-spacing: -0.01em;
}

.award-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
}

.award-text h4 {
    font-family: var(--ff-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.award-text p {
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: 0.08em;
    font-weight: 500;
}

.award-tag,
.award-text p {
    font-family: var(--ff-mono);
    text-transform: uppercase;
}

.award-tag {
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--gold);
    padding: 6px 12px;
    border: 1px solid rgba(184, 134, 44, 0.3);
    border-radius: 2px;
    font-weight: 600;
    background: rgba(184, 134, 44, 0.06);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
    gap: 30px;
}

.testimonial-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
    box-shadow: var(--shadow-sm);
}

.testimonial-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.testimonial-card.featured {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    grid-column: span 2;
}

.t-quote-mark {
    font-family: var(--ff-display);
    font-size: 80px;
    font-style: italic;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 12px;
    opacity: 0.6;
}

.testimonial-card.featured .t-quote-mark {
    color: var(--gold-2);
}

.t-quote {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-2);
    margin-bottom: 28px;
}

.testimonial-card.featured .t-quote {
    color: #f0eee5;
    font-size: 26px;
}

.t-author {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.testimonial-card.featured .t-author {
    border-top-color: hsla(0, 0%, 100%, 0.15);
}

.t-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--navy));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.testimonial-card.featured .t-avatar {
    background: linear-gradient(135deg, var(--gold-2), #fff);
    color: var(--navy);
}

.t-author-name {
    font-family: var(--ff-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 3px;
}

.testimonial-card.featured .t-author-name {
    color: #fff;
}

.t-author-role {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 500;
}

.testimonial-card.featured .t-author-role {
    color: var(--gold-2);
}

@media (max-width: 1024px) {

    .content-layout,
    .founder,
    .founder-detail-grid,
    .hero-grid,
    .mv-grid,
    .sec-head {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .firms-grid,
    .insights-grid,
    .numbers-grid,
    .process-grid,
    .sectors-grid,
    .services-grid,
    .team-grid,
    .testimonials-grid,
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .nav-menu {
        display: none;
    }

    .mobile-toggle {
        display: flex;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line-strong);
        border-radius: 3px;
        background: #fff;
    }

    .mobile-nav.open {
        display: block;
    }

    .sidebar {
        position: static;
    }

    .team-founder-card {
        grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1fr);
    }

    .team-founder-info {
        padding: 34px 36px;
    }

    .testimonial-card.featured {
        grid-column: span 2;
    }

    .award-row {
        grid-template-columns: 70px 50px 1fr;
        gap: 20px;
        padding: 24px;
    }

    .award-tag {
        grid-column: 1/-1;
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .wrap {
        margin-top: 20px;
        padding: 0 20px;
    }

    .cta-section,
    .founder-detail-hero,
    .founder-section,
    .numbers-banner,
    .page-hero,
    .section {
        padding: 60px 0;
    }

    .hero {
        padding: 50px 0 70px;
    }

    .firms-grid,
    .founder-creds,
    .hero-stats,
    .insights-grid,
    .numbers-grid,
    .process-grid,
    .sectors-grid,
    .services-grid,
    .team-grid,
    .testimonials-grid,
    .values-grid {
        grid-template-columns: 1fr !important;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 38px;
    }

    .page-hero h1 {
        font-size: 36px;
    }

    .nav-logo img {
        height: 48px;
    }

    .nav-logo .brand-meta {
        display: none;
    }

    .cta-actions {
        flex-direction: column;
    }

    .cta-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .trust-badges {
        gap: 20px;
    }

    .trust-badge {
        font-size: 15px;
    }

    .logo-showcase-img {
        height: 130px !important;
    }

    .mv-card {
        padding: 36px 28px;
    }

    .mv-card h2 {
        font-size: 28px;
    }

    .team-founder-card {
        grid-template-columns: 1fr;
    }

    .team-founder-photo {
        aspect-ratio: 4/3;
        min-height: 0;
    }

    .team-founder-info {
        padding: 26px 22px 28px;
    }

    .team-founder-name {
        font-size: 25px;
    }

    .team-founder-bio {
        margin-top: 14px;
        font-size: 14px;
    }

    .team-founder-action {
        margin-top: 20px;
    }

    .team-founder-link {
        width: 100%;
        justify-content: center;
    }

    .testimonial-card {
        padding: 32px 26px;
    }

    .testimonial-card.featured {
        grid-column: span 1;
    }

    .testimonial-card.featured .t-quote {
        font-size: 20px;
    }

    .subnav {
        top: 80px;
    }

    .subnav-link {
        padding: 14px;
        font-size: 10px;
    }
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: reveal 0.9s ease forwards;
}

.reveal.d1 {
    animation-delay: 0.1s;
}

.reveal.d2 {
    animation-delay: 0.2s;
}

.reveal.d3 {
    animation-delay: 0.35s;
}

.reveal.d4 {
    animation-delay: 0.5s;
}

.reveal.d5 {
    animation-delay: 0.65s;
}

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

.ic {
    width: 20px;
    height: 20px;
}

.ic,
.ic-lg {
    stroke: currentColor;
    stroke-width: 1.4;
    fill: none;
}

.ic-lg {
    width: 28px;
    height: 28px;
}

.svc-category {
    margin-bottom: 70px;
}

.svc-category:last-child {
    margin-bottom: 0;
}

.svc-cat-head {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 32px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.svc-cat-num {
    font-size: 22px;
    font-style: italic;
    font-weight: 500;
    color: var(--gold);
}

.svc-cat-num,
.svc-cat-title {
    font-family: var(--ff-display);
}

.svc-cat-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.01em;
}

.svc-cat-count {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-left: auto;
    font-weight: 500;
}

.svc-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.svc-card {
    background: #fff;
    padding: 36px 34px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.svc-card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0;
    background: var(--gold);
    transition: height 0.5s ease;
}

.svc-card:hover {
    background: var(--bg-soft);
}

.svc-card:hover:before {
    height: 100%;
}

.svc-card-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--gold);
    background: var(--bg-soft);
    transition: all 0.4s;
}

.svc-card:hover .svc-card-icon {
    border-color: var(--gold);
    background: #fff;
    transform: scale(1.08) rotate(-8deg);
}

.svc-card-body {
    flex: 1 1;
}

.svc-card-num {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.15em;
    color: var(--ink-mute);
    margin-bottom: 8px;
    font-weight: 500;
}

.svc-card h3 {
    font-family: var(--ff-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.25;
    margin-bottom: 10px;
}

.svc-card p {
    font-size: 14px;
    color: var(--ink-dim);
    line-height: 1.6;
    margin-bottom: 16px;
}

.svc-card-link {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.svc-card-link:after {
    content: "→";
    transition: transform 0.3s;
}

.svc-card:hover .svc-card-link:after {
    transform: translateX(4px);
}

.svc-detail-hero {
    position: relative;
    padding: 70px 0;
    background: linear-gradient(180deg, var(--bg-soft) 0, var(--bg) 100%);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.svc-detail-hero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 160px;
    background: linear-gradient(180deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            #fff 33%,
            #fff 66%,
            var(--green) 66%);
}

.svc-detail-hero:after {
    content: "";
    position: absolute;
    top: -40%;
    right: -8%;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(184, 134, 44, 0.08),
            transparent 70%);
    pointer-events: none;
}

.svc-detail-hero-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 50px;
    gap: 50px;
    align-items: center;
}

.svc-detail-hero h1 {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(34px, 4.6vw, 76px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin-bottom: 20px;
}

.svc-detail-hero h1 .it {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}

.svc-detail-icon {
    width: 120px;
    height: 120px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    background: #fff;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

.svc-detail-icon svg {
    width: 52px;
    height: 52px;
    stroke-width: 1.2;
}

.page-hero {
    position: relative;
    padding: 70px 0;
    background: linear-gradient(180deg, var(--bg-soft) 0, var(--bg) 100%);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.page-hero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 160px;
    background: linear-gradient(180deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            #fff 33%,
            #fff 66%,
            var(--green) 66%);
}

.page-hero:after {
    content: "";
    position: absolute;
    top: -40%;
    right: -8%;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(184, 134, 44, 0.08),
            transparent 70%);
    pointer-events: none;
}

.page-hero-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 50px;
    gap: 50px;
    align-items: center;
}

.page-hero h1 {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(34px, 4.6vw, 76px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin-bottom: 20px;
}

.page-hero h1 .it {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}

.page-hero-img {
    position: relative;
    flex-shrink: 0;
    width: 420px;
    max-width: 100%;
    aspect-ratio: 653/517;
    height: 280px;
    border-radius: 20px;
    overflow: hidden;
}

@media (max-width: 992px) {
    .page-hero-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .page-hero-img {
        width: 340px;
        height: 200px;
        margin-top: 30px;
    }
}

@media (max-width: 768px) {
    .page-hero-img {
        width: 100%;
    }

    .page-hero {
        padding: 50px 0;
    }
}

@media (max-width: 480px) {
    .page-hero-img {
        width: 100%;
        border-radius: 14px;
    }
}

.deliverables {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.deliverable {
    background: #fff;
    padding: 32px 30px;
    transition: background 0.3s;
}

.deliverable:hover {
    background: var(--bg-soft);
}

.deliverable-num {
    font-family: var(--ff-display);
    font-size: 32px;
    font-style: italic;
    font-weight: 500;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 16px;
    opacity: 0.9;
}

.deliverable h4 {
    font-family: var(--ff-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.deliverable p {
    font-size: 14px;
    color: var(--ink-dim);
    line-height: 1.6;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.related-card {
    background: #fff;
    padding: 30px 28px;
    transition: all 0.3s;
}

.related-card:hover {
    background: var(--bg-soft);
}

.related-card .rc-icon {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    margin-bottom: 18px;
    transition: all 0.3s;
}

.related-card:hover .rc-icon {
    border-color: var(--gold);
}

.related-card h4 {
    font-family: var(--ff-display);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.25;
}

.related-card a {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

.svc-steps {
    display: grid;
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.svc-step {
    background: #fff;
    padding: 32px 36px;
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-gap: 28px;
    gap: 28px;
    align-items: start;
    transition: background 0.3s;
}

.svc-step:hover {
    background: var(--bg-soft);
}

.svc-step-num {
    font-family: var(--ff-display);
    font-size: 40px;
    font-style: italic;
    font-weight: 500;
    color: var(--gold);
    line-height: 1;
    opacity: 0.9;
}

.svc-step-body h4 {
    font-family: var(--ff-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.svc-step-body p {
    font-size: 14.5px;
    color: var(--ink-dim);
    line-height: 1.65;
}

@media (max-width: 1024px) {

    .related-grid,
    .svc-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .related-grid {
        grid-template-columns: 1fr !important;
    }

    .deliverables,
    .related-grid,
    .svc-detail-hero-grid {
        grid-template-columns: 1fr;
    }

    .svc-detail-hero-grid {
        gap: 32px;
    }

    .svc-detail-icon {
        width: 90px;
        height: 90px;
    }

    .svc-detail-icon svg {
        width: 40px;
        height: 40px;
    }

    .svc-step {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 24px;
    }

    .svc-cat-head {
        flex-wrap: wrap;
        gap: 10px;
    }

    .svc-cat-count {
        margin-left: 0;
        width: 100%;
    }
}

.guide-hero {
    position: relative;
    padding: 90px 0 100px;
    background: linear-gradient(180deg, var(--bg-soft) 0, var(--bg) 100%);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.guide-hero:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 200px;
    background: linear-gradient(180deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            #fff 33%,
            #fff 66%,
            var(--green) 66%);
}

.guide-hero:after {
    content: "";
    position: absolute;
    top: -30%;
    right: -8%;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 134, 44, 0.1), transparent 70%);
    pointer-events: none;
}

.guide-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    grid-gap: 70px;
    gap: 70px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.guide-hero h1 {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin-bottom: 24px;
}

.guide-hero h1 .it {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}

.guide-hero-sub {
    font-size: 18px;
    color: var(--ink-dim);
    max-width: 560px;
    line-height: 1.65;
    margin-bottom: 36px;
}

.guide-hero-meta {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 36px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--line);
}

.guide-hero-meta-item .lbl {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 6px;
    font-weight: 500;
}

.guide-hero-meta-item .val {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.01em;
}

.guide-hero-meta-item .val .acc {
    color: var(--gold);
}

.guide-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.guide-cover {
    aspect-ratio: 3/4;
    background: linear-gradient(160deg, var(--navy), var(--navy-2));
    border-radius: 6px;
    padding: 44px 38px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow:
        0 40px 80px -20px rgba(11, 37, 69, 0.35),
        0 16px 32px -8px rgba(11, 37, 69, 0.2);
    transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
    transform-origin: center;
    transition: transform 0.5s ease;
}

.guide-cover:hover {
    transform: perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(-4px);
}

.guide-cover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            #fff 33%,
            #fff 66%,
            var(--green) 66%);
}

.guide-cover:after {
    content: "";
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(212, 166, 74, 0.18),
            transparent 70%);
}

.guide-cover-top {
    position: relative;
    z-index: 1;
}

.guide-cover-mono {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-2);
    font-weight: 500;
    text-align: center;
    margin-bottom: 34px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(212, 166, 74, 0.42);
    white-space: nowrap;
}

.guide-cover-title {
    font-family: var(--ff-display);
    font-size: 40px;
    font-weight: 500;
    color: #fff;
    line-height: 1.08;
    letter-spacing: 0;
    text-align: center;
}

.guide-cover-title .it {
    font-style: italic;
    color: var(--gold-2);
    font-weight: 400;
}

.guide-cover-author {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin: 22px 0 12px;
}

.guide-cover-author-img {
    width: 108px !important;
    height: 108px !important;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid rgba(212, 166, 74, 0.78);
    background: hsla(0, 0%, 100%, 0.95);
    padding: 8px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
}

.guide-cover-bottom {
    position: relative;
    z-index: 1;
}

.guide-cover-volume {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 16px;
    color: var(--gold-2);
    margin-bottom: 8px;
}

.guide-cover-brand {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.guide-cover-byline {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: hsla(0, 0%, 100%, 0.6);
    text-transform: uppercase;
}

.toc-list {
    display: grid;
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.toc-row {
    background: #fff;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 70px 1fr auto;
    grid-gap: 28px;
    gap: 28px;
    align-items: center;
    transition: background 0.3s;
}

.toc-row:hover {
    background: var(--bg-soft);
}

.toc-num {
    font-size: 32px;
    font-style: italic;
    font-weight: 500;
    color: var(--gold);
    line-height: 1;
    opacity: 0.9;
}

.toc-body h4,
.toc-num {
    font-family: var(--ff-display);
}

.toc-body h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.toc-body p {
    font-size: 14px;
    color: var(--ink-dim);
    line-height: 1.55;
}

.toc-meta {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    white-space: nowrap;
    font-weight: 500;
}

.dim-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    gap: 24px;
}

.dim-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 40px 36px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
    box-shadow: var(--shadow-sm);
}

.dim-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    border-color: var(--gold);
}

.dim-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gold);
}

.dim-num {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    margin-bottom: 18px;
    font-weight: 500;
}

.dim-icon {
    width: 56px;
    height: 56px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    margin-bottom: 22px;
    transition: all 0.4s;
}

.dim-card:hover .dim-icon {
    background: #fff;
    border-color: var(--gold);
}

.dim-card h3 {
    font-family: var(--ff-display);
    font-size: 26px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.dim-card>p {
    font-size: 14.5px;
    color: var(--ink-dim);
    line-height: 1.6;
    margin-bottom: 22px;
}

.dim-checks {
    list-style: none;
    margin: 0;
    border-top: 1px dashed var(--line-strong);
    padding: 18px 0 0;
}

.dim-checks li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.5;
}

.dim-checks li:before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(184, 134, 44, 0.12);
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scorecard {
    background: var(--navy);
    color: #fff;
    border-radius: 6px;
    padding: 50px 48px;
    position: relative;
    overflow: hidden;
}

.scorecard:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%,
            rgba(212, 166, 74, 0.15),
            transparent 60%);
    pointer-events: none;
}

.scorecard-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    grid-gap: 60px;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.scorecard h3 {
    font-family: var(--ff-display);
    font-size: 32px;
    font-weight: 500;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}

.scorecard h3 .it {
    font-style: italic;
    color: var(--gold-2);
    font-weight: 400;
}

.scorecard p {
    font-size: 15px;
    color: hsla(0, 0%, 100%, 0.75);
    line-height: 1.65;
    margin-bottom: 28px;
}

.scorecard-meter {
    background: hsla(0, 0%, 100%, 0.06);
    border: 1px solid hsla(0, 0%, 100%, 0.12);
    border-radius: 4px;
    padding: 28px 32px;
}

.scorecard-row {
    display: grid;
    grid-template-columns: 140px 1fr 50px;
    grid-gap: 18px;
    gap: 18px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0.08);
}

.scorecard-row:last-child {
    border-bottom: none;
}

.scorecard-row .lbl {
    font-family: var(--ff-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: hsla(0, 0%, 100%, 0.7);
    font-weight: 500;
}

.scorecard-bar {
    height: 6px;
    background: hsla(0, 0%, 100%, 0.1);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.scorecard-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--gold-2));
    border-radius: 3px;
}

.scorecard-row .v {
    font-family: var(--ff-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--gold-2);
    text-align: right;
}

.pitfalls-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.pitfall-cell {
    background: #fff;
    padding: 36px 30px;
    transition: background 0.3s;
}

.pitfall-cell:hover {
    background: var(--bg-soft);
}

.pitfall-num {
    font-family: var(--ff-display);
    font-size: 42px;
    font-style: italic;
    font-weight: 500;
    color: var(--saffron);
    line-height: 1;
    margin-bottom: 20px;
    opacity: 0.85;
}

.pitfall-cell h4 {
    font-family: var(--ff-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.pitfall-cell p {
    font-size: 14px;
    color: var(--ink-dim);
    line-height: 1.6;
}

.timeline-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.timeline-cell {
    background: #fff;
    padding: 36px 28px;
    position: relative;
    transition: background 0.3s;
}

.timeline-cell:hover {
    background: var(--bg-soft);
}

.timeline-window {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 16px;
}

.timeline-cell h4 {
    font-family: var(--ff-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.timeline-cell p {
    font-size: 13.5px;
    color: var(--ink-dim);
    line-height: 1.6;
}

.audience-list {
    display: grid;
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}

.audience-row {
    background: #fff;
    padding: 28px 36px;
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-gap: 24px;
    gap: 24px;
    align-items: center;
    transition: background 0.3s;
}

.audience-row:hover {
    background: var(--bg-soft);
}

.audience-marker {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background: rgba(184, 134, 44, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    flex-shrink: 0;
}

.audience-row p {
    font-size: 16px;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0;
}

.audience-row p strong {
    color: var(--navy);
    font-weight: 600;
}

.download-band {
    background: var(--navy);
    color: #fff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.download-band:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%,
            rgba(212, 166, 74, 0.15),
            transparent 60%),
        radial-gradient(circle at 80% 50%, rgba(232, 90, 26, 0.08), transparent 60%);
    pointer-events: none;
}

.download-band-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 50px;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.download-band h2 {
    font-family: var(--ff-display);
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 500;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.download-band h2 .it {
    font-style: italic;
    color: var(--gold-2);
    font-weight: 400;
}

.download-band p {
    font-size: 16px;
    color: hsla(0, 0%, 100%, 0.75);
    line-height: 1.6;
    max-width: 600px;
}

.download-band-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-on-dark {
    background: var(--gold);
    color: #fff;
    border: 1px solid var(--gold);
}

.btn-on-dark:hover {
    background: var(--gold-2);
    border-color: var(--gold-2);
    transform: translateY(-2px);
}

.btn-on-dark-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid hsla(0, 0%, 100%, 0.3);
}

.btn-on-dark-ghost:hover {
    border-color: #fff;
    background: hsla(0, 0%, 100%, 0.05);
}

@media (max-width: 1024px) {
    .guide-hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .guide-cover {
        max-width: 380px;
        margin: 0 auto;
    }

    .dim-grid,
    .scorecard-grid {
        grid-template-columns: 1fr;
    }

    .scorecard-grid {
        gap: 36px;
    }

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

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

    .download-band-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

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

    .toc-row {
        grid-template-columns: 50px 1fr;
        padding: 24px 20px;
        gap: 16px;
    }

    .toc-meta {
        grid-column: 1/-1;
        padding-left: 66px;
    }

    .guide-cover {
        padding: 32px 28px;
    }

    .guide-cover-mono {
        font-size: 8.5px;
        letter-spacing: 0.16em;
    }

    .guide-cover-title {
        font-size: 30px;
    }

    .guide-cover-author-img {
        width: 88px !important;
        height: 88px !important;
    }

    .scorecard {
        padding: 36px 28px;
    }

    .scorecard-row {
        grid-template-columns: 110px 1fr 40px;
        gap: 12px;
    }

    .audience-row {
        padding: 22px 24px;
        gap: 18px;
    }
}

.cl-toggle {
    display: inline-flex;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 4px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 28px;
}

.cl-toggle-btn {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 2px;
    color: var(--ink-mute);
    transition: all 0.25s;
    cursor: pointer;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cl-toggle-btn:hover {
    color: var(--ink);
}

.cl-toggle-btn.active {
    background: var(--navy);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(11, 37, 69, 0.3);
}

.cl-toggle-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
}

.cl-toggle-btn.active .cl-toggle-dot {
    opacity: 1;
}

.cl-applies {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 2px;
    border: 1px solid;
    white-space: nowrap;
}

.cl-applies.main {
    color: var(--navy);
    border-color: rgba(11, 37, 69, 0.25);
    background: rgba(11, 37, 69, 0.05);
}

.cl-applies.sme {
    color: var(--green);
    border-color: rgba(10, 135, 84, 0.3);
    background: rgba(10, 135, 84, 0.06);
}

.cl-applies.both {
    color: var(--gold);
    border-color: rgba(184, 134, 44, 0.3);
    background: rgba(184, 134, 44, 0.06);
}

.cl-compare {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.cl-compare-head {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    background: var(--navy);
    color: #fff;
    border-bottom: 1px solid var(--line);
}

.cl-compare-head>div {
    padding: 22px 26px;
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cl-compare-head>div+div {
    border-left: 1px solid hsla(0, 0%, 100%, 0.1);
}

.cl-compare-head .platform-label {
    font-family: var(--ff-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #fff;
}

.cl-compare-head .platform-sub {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--gold-2);
    font-weight: 500;
}

.cl-compare-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    border-bottom: 1px solid var(--line);
    transition: background 0.2s;
}

.cl-compare-row:last-child {
    border-bottom: none;
}

.cl-compare-row:hover {
    background: var(--bg-soft);
}

.cl-compare-row>div {
    padding: 22px 26px;
}

.cl-compare-row>div+div {
    border-left: 1px solid var(--line);
    font-family: var(--ff-mono);
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 500;
}

.cl-compare-row .row-label {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.01em;
}

.cl-compare-row .row-label small {
    display: block;
    font-family: var(--ff-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--ink-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 6px;
}

.cl-compare-row .v-strong {
    color: var(--navy);
    font-weight: 600;
}

.cl-compare-row .v-gold {
    color: var(--gold);
    font-weight: 600;
}

.cl-section {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s;
}

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

.cl-section-head {
    padding: 28px 36px;
    display: grid;
    grid-template-columns: 60px 1fr auto;
    grid-gap: 24px;
    gap: 24px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
}

.cl-section-num {
    font-family: var(--ff-display);
    font-size: 38px;
    font-style: italic;
    font-weight: 500;
    color: var(--gold);
    line-height: 1;
    opacity: 0.9;
}

.cl-section-head h3 {
    font-family: var(--ff-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.cl-section-head p {
    font-size: 13.5px;
    color: var(--ink-dim);
    line-height: 1.5;
    margin: 0;
}

.cl-items {
    padding: 8px 0;
}

.cl-item {
    padding: 18px 36px;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    grid-gap: 20px;
    gap: 20px;
    align-items: start;
    border-bottom: 1px dashed var(--line);
    transition: background 0.2s;
}

.cl-item:last-child {
    border-bottom: none;
}

.cl-item:hover {
    background: var(--bg-soft);
}

.cl-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(184, 134, 44, 0.1);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    flex-shrink: 0;
}

.cl-check svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
}

.cl-item-body {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
}

.cl-item-body strong {
    color: var(--navy);
    font-weight: 600;
}

.cl-item-body .ref {
    display: inline-block;
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
    font-weight: 500;
    margin-top: 6px;
}

.amend-callout {
    background: linear-gradient(135deg,
            rgba(232, 90, 26, 0.05),
            rgba(184, 134, 44, 0.08));
    border: 1px solid rgba(184, 134, 44, 0.25);
    border-left: 4px solid var(--saffron);
    border-radius: 4px;
    padding: 28px 32px;
    margin-bottom: 28px;
}

.amend-callout-label {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--saffron);
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.amend-callout h4 {
    font-family: var(--ff-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.amend-callout p {
    font-size: 14.5px;
    color: var(--ink-2);
    line-height: 1.6;
    margin: 0;
}

.cl-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 48px;
}

.cl-stat {
    background: #fff;
    padding: 28px 24px;
    text-align: left;
}

.cl-stat .v {
    font-family: var(--ff-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.cl-stat .v .acc {
    color: var(--gold);
}

.cl-stat .l {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 500;
}

.cl-disclaimer {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 24px 28px;
    margin-top: 40px;
}

.cl-disclaimer-label {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 600;
    margin-bottom: 10px;
}

.cl-disclaimer p {
    font-size: 13.5px;
    color: var(--ink-dim);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 1024px) {
    .cl-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .cl-compare-head,
    .cl-compare-row {
        grid-template-columns: 1fr;
    }

    .cl-compare-head>div+div,
    .cl-compare-row>div+div {
        border-left: none;
        border-top: 1px solid hsla(0, 0%, 100%, 0.1);
    }

    .cl-compare-row>div+div {
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 640px) {
    .cl-stats {
        grid-template-columns: 1fr;
    }

    .cl-section-head {
        grid-template-columns: 40px 1fr;
        padding: 22px 24px;
        gap: 16px;
    }

    .cl-section-head .cl-applies {
        grid-column: 1/-1;
    }

    .cl-item {
        padding: 16px 24px;
        grid-template-columns: 22px 1fr;
        gap: 14px;
    }

    .cl-toggle-btn {
        padding: 10px 14px;
        font-size: 10px;
        letter-spacing: 0.1em;
    }
}

@media print {

    .cta-section,
    .footer,
    .nav,
    .ribbon,
    .subnav,
    .wa-float {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .cl-toggle,
    body:before {
        display: none !important;
    }

    .page-hero,
    .section {
        padding: 20px 0 !important;
        border: none !important;
    }

    .cl-section {
        page-break-inside: avoid;
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .cl-section-head {
        background: #f5f5f5 !important;
    }

    .cl-compare-head {
        background: #0b2545 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .amend-callout {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

.faq-cats {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: -webkit-sticky;
    position: sticky;
    top: 87px;
    z-index: 30;
    box-shadow: var(--shadow-sm);
}

.faq-cats-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 18px 28px;
    overflow-x: auto;
    scrollbar-width: none;
}

.faq-cats-inner::-webkit-scrollbar {
    display: none;
}

.faq-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 2px;
    border: 1px solid var(--line);
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-2);
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s;
}

.faq-cat-pill:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.faq-cat-pill.active {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    box-shadow: 0 4px 12px -4px rgba(11, 37, 69, 0.3);
}

.faq-cat-count {
    display: inline-flex;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--bg-soft);
    color: var(--gold);
    font-family: var(--ff-mono);
    font-size: 10px;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.faq-cat-pill.active .faq-cat-count {
    background: hsla(0, 0%, 100%, 0.15);
    color: var(--gold-2);
}

.faq-cats {
    position: relative;
}

.faq-cat-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50px;
    cursor: pointer;
    color: var(--ink-2);
    font-size: 14px;
    transition: all 0.25s;
    box-shadow: var(--shadow-sm);
}

.faq-cat-arrow:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.faq-cat-arrow-left {
    left: 50px;
}

.faq-cat-arrow-right {
    right: 50px;
}

@media (max-width: 768px) {
    .faq-cat-arrow-left {
        left: 0 !important;
    }

    .faq-cat-arrow-right {
        right: 0 !important;
    }

    .faq-cats-inner {
        padding: 14px 40px !important;
    }

    .faq-cat-pill {
        padding: 8px 12px !important;
        font-size: 10px !important;
        gap: 6px !important;
    }

    .faq-cat-count {
        min-width: 18px !important;
        height: 16px !important;
        font-size: 9px !important;
    }

    .faq-search {
        margin: 0 auto 28px !important;
    }

    .faq-search-input {
        font-size: 14px !important;
        padding: 14px 18px 14px 48px !important;
    }
}

@media (max-width: 480px) {
    .faq-cats-inner {
        padding: 12px 36px !important;
    }

    .faq-cat-pill {
        padding: 7px 10px !important;
        font-size: 9px !important;
    }
}

.faq-search {
    position: relative;
    max-width: 580px;
    margin: 0 auto 48px;
}

.faq-search-input {
    width: 100%;
    padding: 18px 22px 18px 56px;
    font-family: var(--ff-body);
    font-size: 16px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s;
    outline: none;
}

.faq-search-input::placeholder {
    color: var(--ink-mute);
}

.faq-search-input:focus {
    border-color: var(--gold);
    box-shadow:
        0 0 0 3px rgba(184, 134, 44, 0.12),
        var(--shadow-sm);
}

.faq-search-icon {
    left: 20px;
    pointer-events: none;
}

.faq-search-clear,
.faq-search-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-mute);
}

.faq-search-clear {
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.faq-search-clear:hover {
    background: var(--line);
    color: var(--ink);
}

.faq-section {
    margin-bottom: 56px;
    scroll-margin-top: 180px;
}

.faq-section:last-child {
    margin-bottom: 0;
}

.faq-section-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.faq-section-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--bg-soft);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-section-text {
    flex: 1 1;
}

.faq-section-num {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 600;
    margin-bottom: 4px;
}

.faq-section-head h2 {
    font-family: var(--ff-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.faq-section-head h2 .it {
    font-style: italic;
    color: var(--gold);
    font-weight: 500;
}

.faq-list {
    display: grid;
    grid-gap: 0;
    gap: 0;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.faq-item {
    background: #fff;
    border-bottom: 1px solid var(--line);
    transition: background 0.25s;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item.open {
    background: var(--bg-soft);
}

.faq-q {
    width: 100%;
    padding: 24px 32px;
    display: grid;
    grid-template-columns: 1fr 32px;
    grid-gap: 24px;
    gap: 24px;
    align-items: center;
    cursor: pointer;
    text-align: left;
    background: none;
    border: none;
    font-family: var(--ff-body);
    transition: padding 0.25s;
}

.faq-q:hover {
    padding-left: 38px;
}

.faq-q-text {
    font-family: var(--ff-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.faq-item.open .faq-q-text {
    color: var(--gold);
}

.faq-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-2);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.faq-item.open .faq-toggle {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
    transform: rotate(180deg);
}

.faq-toggle svg {
    width: 14px;
    height: 14px;
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.4s ease,
        padding 0.4s ease;
    padding: 0 32px;
}

.faq-item.open .faq-a {
    max-height: 2000px;
    padding: 0 32px 28px;
}

.faq-a-inner {
    border-top: 1px dashed var(--line-strong);
    padding-top: 22px;
}

.faq-a-inner p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-2);
    margin-bottom: 14px;
}

.faq-a-inner p:last-child {
    margin-bottom: 0;
}

.faq-a-inner strong {
    color: var(--navy);
    font-weight: 600;
}

.faq-a-inner a {
    color: var(--gold);
    border-bottom: 1px solid;
}

.faq-a-inner a:hover {
    color: var(--navy);
}

.faq-a-inner ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 18px;
}

.faq-a-inner ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
}

.faq-a-inner ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 14px;
    height: 1px;
    background: var(--gold);
}

.faq-empty {
    padding: 80px 40px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
}

.faq-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--line-strong);
    color: var(--ink-mute);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.faq-empty h3 {
    font-family: var(--ff-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.faq-empty p {
    font-size: 15px;
    color: var(--ink-dim);
    margin-bottom: 24px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.faq-contact-card {
    background: linear-gradient(135deg,
            rgba(11, 37, 69, 0.03),
            rgba(184, 134, 44, 0.06));
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: 4px;
    padding: 32px 36px;
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 32px;
    gap: 32px;
    align-items: center;
}

.faq-contact-card .label {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 10px;
}

.faq-contact-card h4 {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.faq-contact-card p {
    font-size: 14.5px;
    color: var(--ink-dim);
    line-height: 1.55;
    margin: 0;
}

.contact-cred {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 32px;
    background: var(--surface, #f9f8f5);
    border: 1px solid var(--line);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.contact-cred:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--gold-2);
    opacity: 0;
    transition: opacity 0.2s;
}

.contact-cred:hover {
    border-color: var(--gold-2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.contact-cred:hover:before {
    opacity: 1;
}

.contact-cred-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(212, 166, 74, 0.12);
    border: 1px solid rgba(212, 166, 74, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: background 0.2s;
}

.contact-cred-dot:after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold-2);
}

.contact-cred:hover .contact-cred-dot {
    background: rgba(212, 166, 74, 0.22);
}

.contact-cred-text {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.65;
}

.contact-cred-text strong {
    display: block;
    color: var(--ink);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    font-family: var(--ff-display);
}

.contact-cred-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    gap: 20px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
    .contact-cred-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

@media (max-width: 768px) {
    .contact-cred {
        padding: 20px;
        gap: 16px;
    }

    .contact-cred-dot {
        width: 30px;
        height: 30px;
    }

    .contact-cred-dot:after {
        width: 7px;
        height: 7px;
    }

    .contact-cred-text {
        font-size: 13px;
    }

    .contact-cred-text strong {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .contact-cred {
        padding: 16px;
        gap: 12px;
    }

    .contact-cred-dot {
        width: 26px;
        height: 26px;
        margin-top: 0;
    }

    .contact-cred-dot:after {
        width: 6px;
        height: 6px;
    }

    .contact-cred-text {
        font-size: 12.5px;
        line-height: 1.6;
    }

    .contact-cred-text strong {
        font-size: 13.5px;
        margin-bottom: 4px;
    }
}

@media (max-width: 1024px) {
    .faq-cats {
        top: 70px;
    }
}

@media (max-width: 640px) {
    .faq-section-head {
        flex-wrap: wrap;
        gap: 12px;
    }

    .faq-section-head h2 {
        font-size: 24px;
    }

    .faq-q {
        padding: 20px 22px;
    }

    .faq-q:hover {
        padding-left: 26px;
    }

    .faq-q-text {
        font-size: 16px;
    }

    .faq-item.open .faq-a {
        padding: 0 22px 22px;
    }

    .faq-a {
        padding: 0 22px;
    }

    .faq-contact-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px;
    }

    .faq-search-input {
        padding: 16px 18px 16px 50px;
        font-size: 15px;
    }

    .faq-cats-inner {
        padding: 14px 20px;
    }

    .faq-cat-pill {
        padding: 8px 14px;
        font-size: 10px;
        letter-spacing: 0.1em;
    }
}

.gl-controls {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: -webkit-sticky;
    position: sticky;
    top: 87px;
    z-index: 30;
    box-shadow: var(--shadow-sm);
}

.gl-controls-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 20px 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 24px;
    gap: 24px;
    align-items: center;
}

.gl-search {
    position: relative;
    max-width: 520px;
}

.gl-search-input {
    width: 100%;
    padding: 12px 16px 12px 46px;
    font-family: var(--ff-body);
    font-size: 14px;
    color: var(--ink);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 4px;
    outline: none;
    transition: all 0.25s;
}

.gl-search-input::placeholder {
    color: var(--ink-mute);
}

.gl-search-input:focus {
    background: #fff;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184, 134, 44, 0.1);
}

.gl-search-icon {
    left: 16px;
    color: var(--ink-mute);
    pointer-events: none;
}

.gl-search-clear,
.gl-search-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.gl-search-clear {
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--line);
    color: var(--ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
}

.gl-search-clear:hover {
    background: var(--line-strong);
}

.gl-count {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 600;
    white-space: nowrap;
}

.gl-count strong {
    color: var(--gold);
    font-weight: 700;
}

.gl-alphabet {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
}

.gl-alphabet-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 16px 28px;
    gap: 4px;
    flex-wrap: wrap;
}

.gl-alphabet-inner,
.gl-letter {
    display: flex;
    justify-content: center;
}

.gl-letter {
    width: 34px;
    height: 34px;
    align-items: center;
    font-family: var(--ff-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.gl-letter:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-1px);
}

.gl-letter.has-terms {
    color: var(--navy);
    background: #fff;
}

.gl-letter.empty {
    background: transparent;
    cursor: not-allowed;
    opacity: 0.4;
}

.gl-letter.empty,
.gl-letter.empty:hover {
    color: var(--ink-mute);
    border-color: transparent;
}

.gl-letter.empty:hover {
    transform: none;
}

.gl-letter.active {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.gl-cats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
}

.gl-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 2px;
    border: 1px solid var(--line);
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-2);
    background: #fff;
    cursor: pointer;
    transition: all 0.25s;
}

.gl-cat-chip:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.gl-cat-chip.active {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}

.gl-cat-chip-count {
    display: inline-flex;
    min-width: 20px;
    height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    background: var(--bg-soft);
    color: var(--gold);
    font-size: 9.5px;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.gl-cat-chip.active .gl-cat-chip-count {
    background: hsla(0, 0%, 100%, 0.15);
    color: var(--gold-2);
}

.gl-letter-section {
    margin-bottom: 48px;
    scroll-margin-top: 220px;
}

.gl-letter-section:last-child {
    margin-bottom: 0;
}

.gl-letter-head {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--navy);
}

.gl-letter-mark {
    font-family: var(--ff-display);
    font-size: 64px;
    font-weight: 600;
    font-style: italic;
    color: var(--navy);
    line-height: 1;
    letter-spacing: -0.04em;
}

.gl-letter-meta {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 500;
    padding-bottom: 8px;
}

.gl-letter-meta strong {
    color: var(--gold);
    font-weight: 700;
}

.gl-terms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.gl-term {
    background: #fff;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background 0.25s;
    position: relative;
}

.gl-term:hover {
    background: var(--bg-soft);
}

.gl-term-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
}

.gl-term-title {
    font-family: var(--ff-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.gl-term-abbr {
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--gold);
}

.gl-term-abbr,
.gl-term-cat {
    font-family: var(--ff-mono);
    font-weight: 600;
    text-transform: uppercase;
}

.gl-term-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
}

.gl-term-cat:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

.gl-term-def {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-2);
}

.gl-term-def strong {
    color: var(--navy);
    font-weight: 600;
}

.gl-term-ref {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--ink-mute);
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    font-weight: 500;
}

.gl-highlight {
    background: rgba(212, 166, 74, 0.25);
    color: var(--navy);
    font-weight: 600;
    padding: 0 2px;
    border-radius: 2px;
}

.gl-empty {
    padding: 70px 40px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.gl-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--line-strong);
    color: var(--ink-mute);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.gl-empty h3 {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
}

.gl-empty p {
    font-size: 14.5px;
    color: var(--ink-dim);
    max-width: 380px;
    margin: 0 auto;
}

.gl-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 48px;
}

.gl-stat {
    background: #fff;
    padding: 24px 22px;
}

.gl-stat .v {
    font-family: var(--ff-display);
    font-size: 30px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.gl-stat .v .acc {
    color: var(--gold);
}

.gl-stat .l {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 500;
}

@media (max-width: 1024px) {
    .gl-terms {
        grid-template-columns: 1fr;
    }

    .gl-controls {
        top: 70px;
    }

    .gl-controls-inner {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .gl-count {
        text-align: center;
    }

    .gl-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .gl-letter-mark {
        font-size: 48px;
    }

    .gl-term {
        padding: 22px 24px;
    }

    .gl-term-title {
        font-size: 18px;
    }

    .gl-letter {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .gl-stats {
        grid-template-columns: 1fr;
    }

    .gl-alphabet-inner {
        padding: 12px 16px;
    }
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    gap: 20px;
}

.cf-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cf-label {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
}

.cf-input {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 12px 16px;
    font-family: var(--ff-body);
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
}

.cf-input:focus {
    border-color: var(--gold-2);
}

.cf-input::placeholder {
    color: var(--muted);
    opacity: 0.6;
}

.cf-select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

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

.cf-input-error,
.cf-input-error:focus {
    border-color: var(--red);
}

.cf-error {
    font-size: 12px;
    line-height: 1.4;
    color: var(--red);
}

.cf-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap;
}

.form-status-success,
.form-status-error {
    display: block;
}

.form-status-success {
    background: #ecfdf3;
    padding: 8px;
    border: 1px solid #abefc6;
    color: #027a48;
}

.form-status-error {
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
}

#submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .cf-row {
        grid-template-columns: 1fr;
    }
}

.toast-stack {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    flex-direction: column;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.toast,
.toast-stack {
    display: flex;
    gap: 12px;
}

.toast {
    pointer-events: auto;
    align-items: flex-start;
    padding: 14px 14px 14px 16px;
    border-radius: 6px;
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--gold-2);
    background: var(--bg-2);
    box-shadow: var(--shadow-lg);
    animation: toast-in 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.toast-success {
    border-left-color: var(--green);
}

.toast-error {
    border-left-color: var(--red);
}

.toast-info {
    border-left-color: var(--navy-2);
}

.toast-mark {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--ff-mono);
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.toast-success .toast-mark {
    background: var(--green);
}

.toast-error .toast-mark {
    background: var(--red);
}

.toast-info .toast-mark {
    background: var(--navy-2);
}

.toast-body {
    flex: 1 1;
    min-width: 0;
}

.toast-title {
    display: block;
    font-family: var(--ff-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.toast-message {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-dim);
}

.toast-close {
    flex: none;
    width: 22px;
    height: 22px;
    font-size: 18px;
    line-height: 1;
    color: var(--ink-mute);
    border-radius: 4px;
    transition:
        color 0.15s,
        background 0.15s;
}

.toast-close:hover {
    color: var(--ink);
    background: var(--bg-soft);
}

@keyframes toast-in {
    0% {
        opacity: 0;
        transform: translateX(16px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

@media (max-width: 640px) {
    .toast-stack {
        top: auto;
        bottom: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

.page {
    background: var(--bg);
    font-family: var(--ff-body);
    color: var(--ink);
}

.hero {
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    padding: 96px 24px 64px;
}

.heroInner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.eyebrow {
    font-family: var(--ff-mono);
    font-size: 17px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 16px;
}

.heroTitle {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.1;
    color: var(--navy);
    margin: 0 0 24px;
}

.heroDek {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-dim);
    margin: 0 auto;
    max-width: 560px;
}

.gridSection {
    max-width: 1280px;
    margin: 0 auto;
    padding: 64px 24px 96px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 32px;
    gap: 32px;
}

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

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

    .hero {
        padding: 64px 16px 48px;
    }
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition:
        box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.coverButton {
    position: relative;
    display: block;
    width: 100%;
    height: 220px;
    padding: 24px;
    overflow: hidden;
    cursor: pointer;
}

.coverRing {
    position: absolute;
    right: -40px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid hsla(0, 0%, 100%, 0.18);
    pointer-events: none;
}

.badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--ff-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 6px;
}

.cardBody {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1 1;
}

.meta {
    font-family: var(--ff-mono);
    font-size: 12px;
    color: var(--ink-mute);
    margin: 0 0 12px;
}

.cardTitle {
    margin: 0 0 12px;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.3;
    color: var(--navy);
}

.titleLink {
    color: inherit;
    text-decoration: none;
}

.titleLink:hover {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--gold-2);
    text-decoration-color: var(--gold-2);
}

.dek {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-dim);
    margin: 0 0 24px;
    flex: 1 1;
}

.readMore {
    text-decoration: none;
}

.readMore,
.readMoreDisabled {
    align-self: flex-start;
    margin-top: auto;
    font-family: var(--ff-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.readMoreDisabled {
    color: var(--ink-mute);
}

.readMore:focus-visible,
.titleLink:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--reveal-i, 0) * 90ms);
    will-change: opacity, transform;
}

.reveal-ready [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.nav {
    transition:
        box-shadow 0.35s ease,
        background-color 0.35s ease;
}

.scrolled .nav {
    background: hsla(48, 38%, 97%, 0.98);
    box-shadow: 0 10px 34px -18px rgba(11, 37, 69, 0.35);
}

.reveal-ready body:before {
    animation: bgDrift 26s ease-in-out infinite alternate;
}

@keyframes bgDrift {
    0% {
        transform: translateZ(0) scale(1);
    }

    to {
        transform: translate3d(-1.5%, 1.5%, 0) scale(1.05);
    }
}

.reveal-ready .logo-showcase {
    animation: floatCard 7s ease-in-out infinite;
}

@keyframes floatCard {

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

    50% {
        transform: translateY(-9px);
    }
}

.reveal-ready .logo-showcase:before {
    background-size: 200% 100%;
    animation: barSheen 6s linear infinite;
}

@keyframes barSheen {
    0% {
        background-position: 0 0;
    }

    to {
        background-position: 200% 0;
    }
}

.hero-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.55;
    will-change: transform;
}

.aurora-blob.b1 {
    width: 460px;
    height: 460px;
    top: -140px;
    left: -80px;
    background: radial-gradient(circle, rgba(184, 134, 44, 0.3), transparent 70%);
    animation: auroraA 18s ease-in-out infinite alternate;
}

.aurora-blob.b2 {
    width: 520px;
    height: 520px;
    top: -80px;
    right: -140px;
    background: radial-gradient(circle, rgba(232, 90, 26, 0.16), transparent 70%);
    animation: auroraB 23s ease-in-out infinite alternate;
}

.aurora-blob.b3 {
    width: 420px;
    height: 420px;
    bottom: -180px;
    left: 32%;
    background: radial-gradient(circle, rgba(10, 135, 84, 0.14), transparent 70%);
    animation: auroraC 20s ease-in-out infinite alternate;
}

@keyframes auroraA {
    to {
        transform: translate(60px, 44px) scale(1.15);
    }
}

@keyframes auroraB {
    to {
        transform: translate(-52px, 52px) scale(1.1);
    }
}

@keyframes auroraC {
    to {
        transform: translate(44px, -44px) scale(1.2);
    }
}

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

.hero:before {
    z-index: 1;
}

.grad-text {
    background: linear-gradient(100deg,
            var(--gold) 0,
            var(--saffron) 28%,
            var(--gold-2) 55%,
            var(--gold) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradText 6s linear infinite;
}

@keyframes gradText {
    to {
        background-position: 220%;
    }
}

.cap-strip {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
    padding: 20px 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    -webkit-mask: linear-gradient(90deg,
            transparent,
            #000 7%,
            #000 93%,
            transparent);
    mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.cap-track {
    display: flex;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    animation: capScroll 38s linear infinite;
}

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

.cap-item {
    display: inline-flex;
    align-items: center;
    font-family: var(--ff-display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--navy);
    padding: 0 26px;
}

.cap-item:after {
    content: "◆";
    margin-left: 52px;
    font-size: 8px;
    color: var(--gold);
    opacity: 0.7;
}

@keyframes capScroll {
    to {
        transform: translateX(-50%);
    }
}

.proc,
.svc {
    --mx: 50%;
    --my: 50%;
    isolation: isolate;
}

.proc:after,
.svc:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(300px circle at var(--mx) var(--my),
            rgba(184, 134, 44, 0.12),
            transparent 62%);
}

.proc:hover:after,
.svc:hover:after {
    opacity: 1;
}

.proc>*,
.svc>* {
    position: relative;
    z-index: 1;
}

.btn-shine {
    position: relative;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
}

.btn-shine:before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -100%;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            var(--gold-2) 55deg,
            var(--saffron) 92deg,
            transparent 150deg,
            transparent 1turn);
    animation: btnSpin 3.6s linear infinite;
}

.btn-shine:after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 2px;
    border-radius: inherit;
    background: var(--navy);
    transition: background 0.3s ease;
}

.btn-shine:hover:after {
    background: var(--navy-2);
}

@keyframes btnSpin {
    to {
        transform: rotate(1turn);
    }
}

.market-visual {
    position: relative;
    background: linear-gradient(180deg, #0b2545, #0f2d54);
    border: 1px solid hsla(0, 0%, 100%, 0.1);
    border-radius: 12px;
    padding: 22px 22px 20px;
    color: #fff;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.market-visual:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            var(--gold) 33%,
            var(--gold) 66%,
            var(--green) 66%);
    z-index: 2;
}

.market-visual:after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(212, 166, 74, 0.18),
            transparent 70%);
    pointer-events: none;
}

.mv-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.mv-head,
.mv-live {
    align-items: center;
}

.mv-live {
    display: inline-flex;
    gap: 9px;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--gold-2);
    font-weight: 500;
}

.mv-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2fbf7a;
    box-shadow: 0 0 0 0 rgba(47, 191, 122, 0.6);
    animation: pulse 2s infinite;
}

.mv-ex {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: hsla(0, 0%, 100%, 0.45);
}

.mv-quote {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.mv-name {
    font-family: var(--ff-display);
    font-size: 21px;
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
}

.mv-sub {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: hsla(0, 0%, 100%, 0.5);
    margin-top: 6px;
}

.mv-price {
    text-align: right;
    flex-shrink: 0;
}

.mv-value {
    font-family: var(--ff-display);
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.01em;
}

.mv-value .acc {
    color: var(--gold-2);
}

.mv-badge {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--ff-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #7be29a;
    background: rgba(10, 135, 84, 0.16);
    border: 1px solid rgba(47, 191, 122, 0.3);
    padding: 4px 9px;
    border-radius: 3px;
}

.mv-chart {
    position: relative;
    margin-top: 6px;
}

.mv-chart svg {
    display: block;
    width: 100%;
    height: 128px;
}

.mv-grid {
    stroke: hsla(0, 0%, 100%, 0.07);
    stroke-width: 1;
}

.mv-area {
    opacity: 0;
    animation: mvArea 1.2s ease 1.5s forwards;
}

.mv-line {
    fill: none;
    stroke: var(--gold-2);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 6px rgba(212, 166, 74, 0.4));
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: mvDraw 2s ease-out 0.4s forwards;
}

.mv-glow {
    fill: #fff;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    filter: drop-shadow(0 0 6px var(--gold-2));
    animation:
        mvGlowIn 0.4s ease 2.3s forwards,
        mvGlowPulse 2s ease-in-out 2.7s infinite;
}

@keyframes mvDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes mvArea {
    to {
        opacity: 1;
    }
}

@keyframes mvGlowIn {
    to {
        opacity: 1;
    }
}

@keyframes mvGlowPulse {

    0%,
    to {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }
}

.mv-candles {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    height: 76px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid hsla(0, 0%, 100%, 0.08);
}

.candle {
    position: relative;
    flex: 1 1;
    border-radius: 2px;
    transform: scaleY(0);
    transform-origin: bottom;
    animation: candleGrow 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(1.8s + var(--ci) * 0.07s);
}

.candle:before {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    bottom: -5px;
    width: 2px;
    transform: translateX(-50%);
    background: inherit;
    opacity: 0.55;
    border-radius: 2px;
}

.candle.up {
    background: linear-gradient(180deg, #43cf8a, #0a8754);
}

.candle.dn {
    background: linear-gradient(180deg, #ef9a9a, #c44545);
}

@keyframes candleGrow {
    to {
        transform: scaleY(1);
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    :after,
    :before {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }

    .reveal,
    .reveal-ready [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

@keyframes bipo-marquee {
    0% {
        transform: translateZ(0);
    }

    to {
        transform: translate3d(calc(-1 * var(--n) * (var(--card) + var(--gap))),
                0,
                0);
    }
}

@keyframes bipo-aurora-a {

    0%,
    to {
        transform: translate(0) scale(1);
    }

    50% {
        transform: translate(60px, -40px) scale(1.25);
    }
}

@keyframes bipo-aurora-b {

    0%,
    to {
        transform: translate(0) scale(1.1);
    }

    50% {
        transform: translate(-70px, 50px) scale(0.9);
    }
}

@keyframes bipo-spin {
    0% {
        transform: rotate(0);
    }

    to {
        transform: rotate(1turn);
    }
}

@keyframes bipo-spin-rev {
    0% {
        transform: rotate(0);
    }

    to {
        transform: rotate(-1turn);
    }
}

@keyframes bipo-float {

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

    50% {
        transform: translateY(-14px);
    }
}

@keyframes bipo-meteor {
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    to {
        transform: translateY(640px);
        opacity: 0;
    }
}

@keyframes bipo-pulse2 {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 166, 74, 0.5);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(212, 166, 74, 0);
    }

    to {
        box-shadow: 0 0 0 0 rgba(212, 166, 74, 0);
    }
}

.bipo-spot {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
            rgba(212, 166, 74, 0.14),
            transparent 62%);
}

.bipo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
}

.bipo-eyebrow:before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--gold);
}

.bipo-h2 {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: var(--text-h2);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--navy);
    margin: 0;
}

.bipo-h2 .it {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}

.bipo-sechead {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 18px;
    gap: 18px;
    justify-items: start;
    text-align: left;
    max-width: 860px;
    margin-bottom: 52px;
}

.bipo-sechead p {
    font-size: 17px;
    color: var(--ink-dim);
    line-height: 1.65;
    margin: 20px 0 0;
    max-width: 620px;
}

.bipo-progress-track {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    z-index: 95;
    pointer-events: none;
}

.bipo-progress {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,
            var(--saffron),
            var(--gold-2),
            var(--green));
}

.bipo-trace {
    position: fixed;
    top: 120px;
    bottom: 80px;
    left: 26px;
    width: 2px;
    z-index: 60;
    background: rgba(11, 20, 36, 0.08);
    pointer-events: none;
    border-radius: 2px;
}

.bipo-trace-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(180deg, var(--saffron), var(--gold));
    border-radius: 2px;
}

.bipo-trace-dot {
    position: absolute;
    top: 0;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 14px 3px rgba(184, 134, 44, 0.5);
}

@media (max-width: 1180px) {
    .bipo-trace {
        display: none;
    }
}

.bipo-cursor-on,
.bipo-cursor-on * {
    cursor: none !important;
}

.bipo-cursor-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
}

.bipo-cursor-dot,
.bipo-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.bipo-cursor-ring {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(184, 134, 44, 0.6);
    border-radius: 50%;
    transition:
        width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.28s,
        border-color 0.28s;
}

.bipo-tg [data-w] {
    display: inline-block;
}

.reveal-ready .bipo-tg [data-w] {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(16px);
    transition:
        opacity 0.6s ease,
        filter 0.6s ease,
        transform 0.6s ease;
}

.reveal-ready .bipo-tg.is-shown [data-w] {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

.bipo-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: 56px 0 90px;
    overflow: hidden;
    background: var(--bg);
}

.bipo-hero-tricolor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 5;
    opacity: 0.9;
    background: linear-gradient(90deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            #fff 33%,
            #fff 66%,
            var(--green) 66%);
}

.bipo-hero-grid-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(11, 20, 36, 0.05) 1px, transparent 0),
        linear-gradient(90deg, rgba(11, 20, 36, 0.05) 1px, transparent 0);
    background-size: 58px 58px;
    -webkit-mask: radial-gradient(circle at 42% 42%, #000, transparent 72%);
    mask: radial-gradient(circle at 42% 42%, #000, transparent 72%);
}

.bipo-hero-aurora {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.bipo-hero-aurora.a {
    top: -140px;
    left: 8%;
    width: 520px;
    height: 520px;
    filter: blur(70px);
    background: radial-gradient(circle,
            rgba(212, 166, 74, 0.22),
            transparent 62%);
    animation: bipo-aurora-a 16s ease-in-out infinite;
}

.bipo-hero-aurora.b {
    bottom: -160px;
    right: 6%;
    width: 560px;
    height: 560px;
    filter: blur(80px);
    background: radial-gradient(circle, rgba(19, 49, 92, 0.12), transparent 62%);
    animation: bipo-aurora-b 19s ease-in-out infinite;
}

.bipo-sparkles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.bipo-hero .wrap {
    position: relative;
    z-index: 4;
}

.bipo-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-gap: 56px;
    gap: 56px;
    align-items: center;
}

.bipo-hero h1 {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(42px, 5.4vw, 78px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 24px 0 0;
}

.bipo-hero h1 .it {
    font-style: italic;
    color: var(--gold);
    font-weight: 400;
}

.bipo-hero-sub {
    font-size: 19px;
    line-height: 1.62;
    color: var(--ink-dim);
    max-width: 520px;
    margin: 28px 0 0;
}

.bipo-hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 38px;
    flex-wrap: wrap;
}

.bipo-btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--gold-2), var(--gold));
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.03em;
    box-shadow: 0 12px 34px -8px rgba(184, 134, 44, 0.55);
    transition: all 0.3s;
}

.bipo-btn-gold:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 46px -8px rgba(184, 134, 44, 0.8);
}

.bipo-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    border-radius: 3px;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s;
}

.bipo-btn-ghost:hover {
    color: var(--ink);
    border-color: var(--gold);
    background: rgba(212, 166, 74, 0.08);
}

.bipo-hero-stats {
    display: flex;
    gap: 30px;
    margin-top: 52px;
    flex-wrap: wrap;
    align-items: center;
}

.bipo-hero-stat .num {
    font-family: var(--ff-display);
    font-size: 40px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
}

.bipo-hero-stat .num .acc,
.bipo-hero-stat .num .cur {
    color: var(--gold);
}

.bipo-hero-stat .num .unit {
    font-size: 22px;
    color: var(--gold);
}

.bipo-hero-stat .lbl {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-top: 8px;
}

.bipo-hero-div {
    width: 1px;
    height: 44px;
    background: var(--line-strong);
}

.bipo-scene {
    position: relative;
    height: 500px;
}

.bipo-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
}

.bipo-ring.r1 {
    width: 470px;
    height: 470px;
    margin: -235px 0 0 -235px;
    border: 1px solid rgba(11, 20, 36, 0.06);
    animation: bipo-spin 70s linear infinite;
}

.bipo-badge-float {
    position: absolute;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 16px 40px -20px rgba(11, 37, 69, 0.35);
}

.bipo-badge-float.live {
    top: 6%;
    right: 0;
    background: hsla(0, 0%, 100%, 0.9);
    border: 1px solid rgba(184, 134, 44, 0.3);
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: bipo-float 5s ease-in-out infinite;
}

.bipo-badge-float.live .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    animation: bipo-pulse2 2s infinite;
}

.bipo-badge-float.live .lbl {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--ink);
    font-weight: 600;
}

.bipo-badge-float.drhp {
    bottom: 2%;
    left: -3%;
    padding: 13px 17px;
    border: 1px solid rgba(184, 134, 44, 0.35);
    background: linear-gradient(160deg,
            rgba(212, 166, 74, 0.16),
            hsla(0, 0%, 100%, 0.95));
    animation: bipo-float 6.5s ease-in-out infinite;
}

.bipo-badge-float.drhp .k {
    font-family: var(--ff-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    color: var(--gold);
}

.bipo-badge-float.drhp .v {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 3px;
}

.bipo-journey,
.bipo-journey-svg-wrap {
    position: absolute;
    inset: 0;
}

.bipo-j {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.bipo-j-track {
    stroke: rgba(11, 20, 36, 0.1);
    stroke-width: 1.5;
    stroke-dasharray: 1 8;
}

.bipo-j-beam,
.bipo-j-track {
    fill: none;
    stroke-linecap: round;
}

.bipo-j-beam {
    stroke-width: 4;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    filter: drop-shadow(0 3px 14px rgba(184, 134, 44, 0.5));
}

.bipo-j-baseline {
    stroke: rgba(11, 20, 36, 0.14);
    stroke-width: 1;
}

.bipo-j-bar {
    fill: url(#jNavy);
}

.bipo-j-bars .gold .bipo-j-bar {
    fill: url(#jGold);
}

.bipo-j-bar-cap {
    fill: rgba(212, 166, 74, 0.85);
}

.bipo-j-bars .gold .bipo-j-bar-cap {
    fill: #f0d190;
}

.bipo-j-bars [data-bar] .bipo-j-bar,
.bipo-j-bars [data-bar] .bipo-j-bar-cap {
    transform-box: fill-box;
    transform-origin: bottom;
    transform: scaleY(0.02);
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.16, 0.9, 0.3, 1),
        opacity 0.28s ease;
}

.bipo-j-bars [data-bar] .bipo-j-bar-cap {
    transform-origin: center;
    transform: translateY(26px) scaleX(0.4);
}

.bipo-j-bars [data-bar].on .bipo-j-bar {
    transform: scaleY(1);
    opacity: 1;
}

.bipo-j-bars [data-bar].on .bipo-j-bar-cap {
    transform: none;
    opacity: 1;
    transition-delay: 0.11s;
}

.bipo-j-bcap {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    font-weight: 600;
    fill: var(--ink-mute);
    opacity: 0.35;
    transition:
        opacity 0.32s ease,
        fill 0.32s ease;
}

.bipo-j-bars [data-bar].on .bipo-j-bcap {
    opacity: 1;
    fill: var(--ink-2);
}

.bipo-j-bars [data-bar].gold.on .bipo-j-bcap {
    fill: var(--gold);
}

.bipo-j-dot {
    fill: var(--bg-2);
    stroke: rgba(11, 20, 36, 0.25);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    transition:
        fill 0.24s ease,
        stroke 0.24s ease,
        transform 0.24s cubic-bezier(0.2, 1.4, 0.4, 1);
}

[data-node].on .bipo-j-dot {
    fill: var(--gold-2);
    stroke: var(--gold);
    transform: scale(1.2);
}

.bipo-j-ping {
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.5;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

[data-node].on .bipo-j-ping {
    animation: bipo-j-ping 0.75s ease-out;
}

.bipo-j-head {
    fill: var(--gold-2);
    transform-box: fill-box;
    transform-origin: right center;
    transform: scale(0.15);
    opacity: 0;
    transition:
        transform 0.36s cubic-bezier(0.2, 1.6, 0.35, 1),
        opacity 0.2s ease;
    filter: drop-shadow(0 2px 10px rgba(184, 134, 44, 0.6));
}

.bipo-journey.is-listed .bipo-j-head {
    transform: none;
    opacity: 1;
}

.bipo-j-mote {
    fill: var(--gold-2);
    opacity: 0;
    animation: bipo-j-mote var(--dur, 6s) ease-in-out var(--d, 0s) infinite;
}

.bipo-j-ripple {
    fill: none;
    stroke: var(--gold-2);
    stroke-width: 1.5;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.bipo-journey.is-listed .bipo-j-ripple {
    animation: bipo-j-ripple 1.2s ease-out 0.05s;
}

.bipo-journey.is-listed .bipo-j-ripple.r2 {
    animation-delay: 0.34s;
}

.bipo-j-burst {
    fill: var(--gold);
    opacity: 0;
}

.bipo-journey.is-listed .bipo-j-burst {
    animation: bipo-j-burst 1s cubic-bezier(0.15, 0.75, 0.3, 1) var(--d, 0s) both;
}

.bipo-j-halo {
    opacity: 0;
    transition: opacity 0.55s ease;
}

.bipo-journey.is-listed .bipo-j-halo {
    opacity: 1;
}

.bipo-j-comet-core {
    fill: var(--gold-2);
    stroke: #fff;
    stroke-width: 1.5;
}

.bipo-j-comet-glow {
    fill: rgba(212, 166, 74, 0.55);
}

.bipo-j-comet {
    transition: opacity 0.22s ease;
}

.bipo-journey.is-listed .bipo-j-comet,
.bipo-journey.is-static .bipo-j-comet {
    opacity: 0;
}

.bipo-j {
    transition: opacity 0.4s ease;
}

.bipo-journey.is-resetting .bipo-j {
    opacity: 0.25;
}

.bipo-journey .bipo-badge-float.live {
    top: 3%;
    left: 0;
    right: auto;
}

.bipo-journey .bipo-badge-float.drhp {
    top: 15%;
    left: 0;
    bottom: auto;
}

.bipo-j-stage {
    min-width: 178px;
}

.bipo-j-stage .v {
    line-height: 1.1;
}

.bipo-j-stage.anim .k,
.bipo-j-stage.anim .v {
    animation: bipo-j-swap 0.3s ease both;
}

@keyframes bipo-j-ping {
    0% {
        opacity: 0.8;
        transform: scale(0.6);
    }

    to {
        opacity: 0;
        transform: scale(2.6);
    }
}

@keyframes bipo-j-mote {

    0%,
    to {
        opacity: 0;
        transform: translateY(10px);
    }

    35%,
    60% {
        opacity: 0.75;
    }

    to {
        transform: translateY(-26px);
    }
}

@keyframes bipo-j-ripple {
    0% {
        opacity: 0.7;
        transform: scale(0.5);
    }

    to {
        opacity: 0;
        transform: scale(2.4);
    }
}

@keyframes bipo-j-burst {
    0% {
        opacity: 0;
        transform: translate(0) scale(0.4);
    }

    18% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(1);
    }
}

@keyframes bipo-j-swap {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.bipo-scroll-cue {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 4;
}

.bipo-scroll-cue .t {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--ink-mute);
}

.bipo-scroll-cue .l {
    width: 1px;
    height: 32px;
    background: linear-gradient(var(--gold), transparent);
}

.bipo-services {
    padding: 100px 0;
    background: var(--bg);
}

.bipo-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    grid-gap: 16px;
    gap: 16px;
}

.bipo-cell {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg-card);
    padding: 16px;
    overflow: hidden;
    transform-style: preserve-3d;
    box-shadow: 0 8px 24px -20px rgba(11, 37, 69, 0.4);
    transition:
        border-color 0.4s,
        box-shadow 0.4s;
}

.bipo-cell:hover {
    border-color: rgba(184, 134, 44, 0.5);
    box-shadow: 0 16px 34px -20px rgba(11, 37, 69, 0.45);
}

.bipo-cell.big,
.bipo-cell.span2 {
    grid-column: span 2;
}

.bipo-cell.big {
    grid-row: span 2;
    padding: 34px;
    background: linear-gradient(160deg, rgba(19, 49, 92, 0.06), var(--bg-card));
}

.bipo-cell-in {
    position: relative;
    height: 100%;
}

.bipo-cell-num {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    color: var(--ink-mute);
    letter-spacing: 0.15em;
    margin-bottom: 4px;
}

.bipo-cell.big .bipo-cell-num {
    font-size: 11px;
    margin-bottom: 20px;
}

.bipo-cell h3 {
    font-family: var(--ff-display);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
    line-height: 1.2;
    color: var(--ink);
}

.bipo-cell.big h3 {
    font-size: 30px;
    margin-bottom: 14px;
    line-height: 1.15;
}

.bipo-cell p {
    font-size: 13px;
    color: var(--ink-dim);
    line-height: 1.55;
    margin: 0;
}

.bipo-cell.big p {
    font-size: 15px;
    line-height: 1.65;
    max-width: 340px;
}

.bipo-cell-cta {
    margin-top: 22px;
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

.bipo-cell.big img.ghost {
    position: absolute;
    right: -40px;
    bottom: -30px;
    width: 340px;
    opacity: 0.1;
    filter: saturate(0.7);
    pointer-events: none;
}

.bipo-process {
    padding: 100px 0;
}

.bipo-process-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.35fr;
    grid-gap: 70px;
    gap: 70px;
}

.bipo-proc-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    perspective: 1400px;
}

.bipo-rupee {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    transform-style: preserve-3d;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(320px, 42vw, 600px);
    line-height: 1;
    color: rgba(184, 134, 44, 0.14);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    text-shadow: 0 0 120px rgba(184, 134, 44, 0.18);
}

.bipo-proc-sticky> :not(.bipo-rupee):not(.bipo-rupee-3d) {
    position: relative;
    z-index: 2;
}

.bipo-rupee-3d {
    left: 4%;
    width: clamp(220px, 30vw, 430px);
    height: clamp(220px, 30vw, 430px);
    transform: translateY(-50%);
    z-index: 0;
    opacity: 0.95;
    filter: drop-shadow(0 24px 44px rgba(120, 84, 20, 0.2));
}

.bipo-proc-title {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(32px, 3.6vw, 50px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 20px 0 30px;
}

.bipo-proc-title .it {
    font-style: italic;
    font-weight: 400;
}

.bipo-steps-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bipo-step-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    transition: all 0.35s;
    opacity: 0.4;
}

.bipo-step-nav.active {
    opacity: 1;
}

.bipo-step-nav.done {
    opacity: 0.7;
}

.bipo-step-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--ink);
    flex-shrink: 0;
    transition: all 0.35s;
}

.bipo-step-nav.active .bipo-step-dot {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}

.bipo-step-nav .lbl {
    font-family: var(--ff-display);
    font-size: 18px;
    color: var(--ink);
}

.bipo-proc-dur {
    letter-spacing: 0.14em;
    margin-top: 28px;
}

.bipo-steps {
    gap: 32px;
    padding: 20vh 0;
}

.bipo-step-card,
.bipo-steps {
    display: flex;
    flex-direction: column;
}

.bipo-step-card {
    min-height: 56vh;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--bg-card);
    padding: 44px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 40px -28px rgba(11, 37, 69, 0.5);
}

.bipo-step-card.gold {
    border-color: rgba(184, 134, 44, 0.4);
    background: linear-gradient(160deg, rgba(212, 166, 74, 0.16), var(--bg-card));
    box-shadow: 0 14px 40px -28px rgba(184, 134, 44, 0.5);
}

.bipo-step-ghost {
    position: absolute;
    top: -40px;
    right: 20px;
    font-family: var(--ff-display);
    font-size: 220px;
    font-style: italic;
    font-weight: 600;
    color: rgba(11, 37, 69, 0.05);
    line-height: 1;
}

.bipo-step-card.gold .bipo-step-ghost {
    color: rgba(184, 134, 44, 0.12);
}

.bipo-step-in {
    position: relative;
}

.bipo-step-tag {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--gold);
}

.bipo-step-card h3 {
    font-family: var(--ff-display);
    font-size: 32px;
    font-weight: 600;
    color: var(--ink);
    margin: 14px 0;
}

.bipo-step-card p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-dim);
    max-width: 460px;
    margin: 0 0 24px;
}

.bipo-step-card.gold p,
.bipo-step-list {
    color: var(--ink-2);
}

.bipo-step-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 14px;
}

.bipo-step-list .ck {
    color: var(--gold);
}

.bipo-pipeline {
    padding: 100px 0;
    background: var(--bg);
    position: relative;
}

.bipo-pipe-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-gap: 16px;
    gap: 16px;
}

.bipo-pipe-list {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 10px 30px -24px rgba(11, 37, 69, 0.4);
}

.bipo-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.bipo-tab {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink-dim);
    transition: all 0.25s;
}

.bipo-tab.active {
    border-color: var(--gold);
    background: rgba(212, 166, 74, 0.14);
    color: var(--gold);
}

.bipo-pipe-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0 6px;
}

.bipo-pipe-live {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 9px;
}

.bipo-pipe-live .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    animation: bipo-pulse2 2s infinite;
    display: block;
}

.bipo-pipe-note {
    font-family: var(--ff-mono);
    font-size: 10px;
    color: var(--ink-mute);
}

.bipo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
    margin: 0 -14px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
    transition: all 0.25s;
}

.bipo-row.active {
    border-left-color: var(--gold);
    background: rgba(212, 166, 74, 0.08);
}

.bipo-row .co {
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}

.bipo-row .meta {
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--ink-dim);
    margin-top: 3px;
}

.bipo-badge {
    font-family: var(--ff-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    font-weight: 600;
}

.bipo-badge.live {
    background: rgba(10, 135, 84, 0.1);
    color: var(--green);
    border: 1px solid rgba(10, 135, 84, 0.25);
}

.bipo-badge.soon {
    background: rgba(184, 134, 44, 0.1);
    color: var(--gold);
    border: 1px solid rgba(184, 134, 44, 0.25);
}

.bipo-detail {
    background: linear-gradient(160deg, var(--navy-600), var(--navy-700));
    border: 1px solid rgba(184, 134, 44, 0.28);
    border-radius: 12px;
    padding: 34px;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    box-shadow: 0 20px 50px -28px rgba(11, 37, 69, 0.6);
}

.bipo-detail-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            var(--gold-2) 33%,
            var(--gold-2) 66%,
            var(--green) 66%);
}

.bipo-detail-in {
    position: relative;
}

.bipo-detail-k {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--gold-2);
}

.bipo-detail h3 {
    font-family: var(--ff-display);
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    margin: 14px 0 4px;
    letter-spacing: -0.01em;
}

.bipo-detail-sub {
    font-family: var(--ff-mono);
    font-size: 12px;
    color: hsla(0, 0%, 100%, 0.6);
    letter-spacing: 0.06em;
}

.bipo-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1px;
    gap: 1px;
    background: hsla(0, 0%, 100%, 0.12);
    border: 1px solid hsla(0, 0%, 100%, 0.12);
    margin-top: 26px;
    border-radius: 6px;
    overflow: hidden;
}

.bipo-detail-cell {
    background: var(--navy-700);
    padding: 17px 18px;
}

.bipo-detail-cell .k {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: hsla(0, 0%, 100%, 0.5);
}

.bipo-detail-cell .v {
    font-family: var(--ff-display);
    font-size: 23px;
    font-weight: 600;
    color: #fff;
    margin-top: 6px;
}

.bipo-detail-cell .v.gold {
    color: var(--gold-2);
}

.bipo-detail p.note {
    font-size: 14px;
    line-height: 1.65;
    color: hsla(0, 0%, 100%, 0.72);
    margin: 22px 0 0;
}

.bipo-voices {
    padding: 0 0 100px 0;
    background: linear-gradient(180deg, var(--bg), var(--bg-soft));
    position: relative;
    overflow: hidden;
}

.bipo-voices-head {
    max-width: var(--maxw);
    margin: 0 auto 54px;
    text-align: left;
    padding: 0 28px;
}

.bipo-voices-head .bipo-h2 {
    margin-top: 18px;
}

.bipo-vmarquee {
    --card: 400px;
    --gap: 22px;
    --n: 3;
    display: flex;
    gap: var(--gap);
    width: max-content;
    margin-bottom: 22px;
    animation: bipo-marquee 46s linear infinite;
    will-change: transform;
}

.bipo-vmarquee.rev {
    animation-duration: 52s;
    animation-direction: reverse;
}

.bipo-vmarquee:hover {
    animation-play-state: paused;
}

.bipo-vcard {
    width: var(--card);
    flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px -24px rgba(11, 37, 69, 0.4);
    transition: border-color 0.3s;
}

.bipo-vcard:hover {
    border-color: rgba(184, 134, 44, 0.5);
}

.bipo-vcard .mark {
    font-family: var(--ff-display);
    font-size: larger;
    font-style: italic;
    color: var(--gold);
    line-height: 1;
}

.bipo-vcard p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    margin: 6px 0 20px;
}

.bipo-vcard .who {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-dim);
}

.bipo-team {
    padding: 0 0 100px 0;
    background: var(--bg-soft);
}

.bipo-team-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-gap: 22px;
    gap: 22px;
    align-items: stretch;
}

.bipo-team-feature {
    position: relative;
    display: grid;
    grid-template-columns: 38% 1fr;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    min-height: 440px;
    background: var(--navy-700);
    transform-style: preserve-3d;
    box-shadow: 0 24px 60px -32px rgba(11, 37, 69, 0.6);
}

.bipo-team-feature .rail {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    z-index: 3;
    background: linear-gradient(180deg,
            var(--saffron) 0,
            var(--saffron) 33%,
            #fff 33%,
            #fff 66%,
            var(--green) 66%);
}

.bipo-team-photo {
    position: relative;
    min-height: 440px;
}

.bipo-team-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.bipo-team-photo .grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(7, 13, 24, 0.85), transparent 55%);
}

.bipo-team-info {
    padding: 40px 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.bipo-team-info .role {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-2);
    margin-bottom: 14px;
}

.bipo-team-info .name {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 16px;
}

.bipo-team-info .bio {
    font-size: 14.5px;
    color: hsla(0, 0%, 100%, 0.78);
    line-height: 1.65;
    margin: 0;
}

.bipo-team-info .cred {
    font-family: var(--ff-mono);
    font-size: 11px;
    color: hsla(0, 0%, 100%, 0.55);
    margin-top: 18px;
    letter-spacing: 0.05em;
}

.bipo-team-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.bipo-team-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    cursor: pointer;
    background: var(--bg-card);
    border-left: 3px solid transparent;
    transition: all 0.3s;
}

.bipo-team-item.active {
    background: rgba(212, 166, 74, 0.1);
    border-left-color: var(--gold);
}

.bipo-team-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    flex-shrink: 0;
    border: 1px solid rgba(184, 134, 44, 0.35);
}

.bipo-team-item .nm {
    font-family: var(--ff-display);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}

.bipo-team-item .rl {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-top: 4px;
}

.bipo-insights {
    padding: 0 0 100px;
    background: var(--bg-soft);
}

.bipo-ins-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    gap: 20px;
}

.bipo-article {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    box-shadow: 0 12px 34px -24px rgba(11, 37, 69, 0.45);
    transition:
        border-color 0.35s,
        box-shadow 0.35s;
}

.bipo-article:hover {
    border-color: rgba(184, 134, 44, 0.5);
    box-shadow: 0 20px 44px -24px rgba(11, 37, 69, 0.5);
}

.bipo-article-img {
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
}

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

.bipo-article-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(11, 20, 36, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 6px 11px;
    border-radius: 2px;
    font-weight: 600;
    z-index: 2;
}

.bipo-article-body {
    padding: 24px;
    flex: 1 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.bipo-article-meta {
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--ink-mute);
    margin-bottom: 12px;
}

.bipo-article h3 {
    font-family: var(--ff-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
    flex: 1 1;
}

.bipo-article-read {
    margin-top: 18px;
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

.bipo-cta {
    position: relative;
    padding: 80px 0 80px;
    background: var(--navy-700);
    overflow: hidden;
}

.bipo-lamp-glow {
    position: absolute;
    top: 0;
    left: max(0px, calc((100% - var(--maxw)) / 2));
    width: min(600px, 100%);
    height: 280px;
    background: radial-gradient(ellipse at top,
            rgba(212, 166, 74, 0.4),
            transparent 62%);
    filter: blur(50px);
    pointer-events: none;
}

.bipo-lamp-line {
    position: absolute;
    top: 0;
    left: max(28px, calc((100% - var(--maxw)) / 2 + 28px));
    width: min(340px, calc(100% - 56px));
    height: 3px;
    background: linear-gradient(90deg, var(--gold-2), transparent);
    box-shadow: 0 0 40px 6px rgba(212, 166, 74, 0.5);
}

.bipo-meteors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.bipo-cta .wrap {
    position: relative;
    z-index: 2;
}

.bipo-cta-box {
    max-width: 820px;
    margin: 0;
    text-align: left;
}

.bipo-cta-box .eb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-2);
    font-weight: 500;
}

.bipo-cta-box h2 {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(40px, 5.4vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 24px 0 0;
}

.bipo-cta-box h2 .it {
    font-style: italic;
    color: var(--gold-2);
    font-weight: 400;
}

.bipo-cta-box p {
    font-size: 19px;
    line-height: 1.6;
    color: hsla(0, 0%, 100%, 0.72);
    margin: 26px 0 0;
    max-width: 600px;
}

.bipo-cta-actions {
    display: flex;
    gap: 14px;
    justify-content: flex-start;
    margin-top: 40px;
    flex-wrap: wrap;
}

.bipo-cta-actions .bipo-btn-gold {
    color: #0b1424;
    box-shadow: 0 12px 44px -8px rgba(212, 166, 74, 0.6);
}

.bipo-cta-actions .bipo-btn-gold:hover {
    color: #0b1424;
    box-shadow: 0 18px 56px -8px rgba(212, 166, 74, 0.85);
}

.bipo-cta-actions .bipo-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 16px 30px;
    border-radius: 3px;
    border: 1px solid hsla(0, 0%, 100%, 0.24);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s;
}

.bipo-cta-actions .bipo-btn-outline:hover {
    color: #fff;
    border-color: var(--gold-2);
    background: rgba(212, 166, 74, 0.08);
}

@media (max-width: 1024px) {
    .bipo-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .bipo-scene {
        height: 380px;
        max-width: 560px;
    }

    .bipo-ring.r1 {
        display: none;
    }

    .bipo-bento {
        grid-template-columns: repeat(2, 1fr);
    }

    .bipo-cell.big {
        grid-column: span 2;
        grid-row: span 2;
    }

    .bipo-process-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bipo-proc-sticky {
        position: relative;
        height: auto;
        padding: 20px 0 10px;
    }

    .bipo-rupee,
    .bipo-rupee-3d {
        display: none;
    }

    .bipo-steps {
        padding: 10px 0;
    }

    .bipo-step-card {
        min-height: unset;
    }

    .bipo-pipe-grid,
    .bipo-team-grid {
        grid-template-columns: 1fr;
    }

    .bipo-ins-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .bipo-hero {
        min-height: unset;
        padding: 40px 0 60px;
    }

    .bipo-scene {
        height: 300px;
    }

    .bipo-badge-float.live {
        top: 0;
    }

    .bipo-badge-float.drhp {
        bottom: -4%;
        left: 0;
    }

    .bipo-hero-stats {
        gap: 20px;
    }

    .bipo-hero-div {
        display: none;
    }

    .bipo-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .bipo-cell,
    .bipo-cell.big,
    .bipo-cell.span2 {
        grid-column: auto;
        grid-row: auto;
        min-height: 170px;
    }

    .bipo-team-feature {
        grid-template-columns: 1fr;
    }

    .bipo-team-photo {
        min-height: 380px;
    }

    .bipo-ins-grid {
        grid-template-columns: 1fr;
    }

    .bipo-step-card {
        padding: 30px 24px;
    }

    .bipo-cta {
        padding: 100px 0 90px;
    }

    .bipo-voices-head {
        padding: 0 20px;
    }

    .bipo-vmarquee {
        --card: 300px;
        animation-duration: 35s;
    }

    .bipo-vmarquee.rev {
        animation-duration: 40s;
    }

    .bipo-lamp-line {
        left: 20px;
        width: calc(100% - 40px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-ready .bipo-tg [data-w] {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .bipo-progress-track,
    .bipo-trace {
        display: none;
    }

    .bipo-vmarquee {
        animation: none;
    }
}

@keyframes bipo-ring {
    0% {
        transform: scale(0.34);
        opacity: 0;
    }

    12% {
        opacity: 0.55;
    }

    to {
        transform: scale(1.18);
        opacity: 0;
    }
}

.bipo-process {
    position: relative;
    padding: 0;
    color: var(--ink);
    background: linear-gradient(180deg, var(--bg-soft), var(--bg));
    overflow: visible;
}

.bipo-proc-stage {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bipo-proc-glow {
    width: clamp(420px, 72vh, 860px);
    height: clamp(420px, 72vh, 860px);
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(212, 166, 74, 0.22),
            rgba(19, 49, 92, 0.06) 44%,
            transparent 68%);
    filter: blur(42px);
}

.bipo-proc-glow,
.bipo-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.bipo-pulse {
    width: clamp(360px, 60vh, 700px);
    height: clamp(360px, 60vh, 700px);
}

.bipo-pulse span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    border: 1px solid rgba(184, 134, 44, 0.35);
    animation: bipo-ring 5.6s ease-out infinite;
}

.bipo-pulse span:nth-child(2) {
    animation-delay: 1.4s;
    border-color: rgba(19, 49, 92, 0.28);
}

.bipo-pulse span:nth-child(3) {
    animation-delay: 2.8s;
}

.bipo-pulse span:nth-child(4) {
    animation-delay: 4.2s;
    border-color: rgba(19, 49, 92, 0.28);
}

.bipo-rupee-3d {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(260px, 46vh, 560px);
    height: clamp(260px, 46vh, 560px);
    z-index: 1;
    opacity: 1;
    pointer-events: none;
    filter: drop-shadow(0 24px 44px rgba(11, 37, 69, 0.18)) drop-shadow(0 0 30px rgba(212, 166, 74, 0.2));
}

.bipo-rupee-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.bipo-proc-heading {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}

.bipo-proc-heading-in {
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    text-align: left;
}

.bipo-eyebrow.light {
    color: var(--gold);
}

.bipo-eyebrow.light:before {
    background: var(--gold);
}

.bipo-proc-title {
    color: var(--navy);
    margin: 0;
}

.bipo-proc-dur,
.bipo-proc-title .it {
    color: var(--gold);
}

.bipo-proc-dur {
    margin: 6px 0 0;
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
}

.bipo-proc-cards {
    position: relative;
    z-index: 3;
    max-width: 1320px;
    margin: -100vh auto 0;
    padding: 0 34px;
}

.bipo-proc-slot {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.bipo-proc-card {
    position: relative;
    overflow: hidden;
    width: 60%;
    padding: 40px 36px;
    border-radius: 22px;
    color: var(--ink);
    background: hsla(0, 0%, 100%, 0.55);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
    backdrop-filter: blur(16px) saturate(1.25);
    border: 1px solid hsla(0, 0%, 100%, 0.85);
    box-shadow:
        0 30px 60px -30px rgba(11, 37, 69, 0.32),
        inset 0 1px 0 hsla(0, 0%, 100%, 0.9);
}

.bipo-proc-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.5), transparent);
    pointer-events: none;
}

.bipo-proc-card.gold {
    background: linear-gradient(160deg,
            rgba(212, 166, 74, 0.24),
            hsla(0, 0%, 100%, 0.6));
    border-color: rgba(184, 134, 44, 0.42);
}

.bipo-proc-card-index {
    position: absolute;
    top: 22px;
    right: 26px;
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    color: rgba(11, 37, 69, 0.1);
}

.bipo-proc-card-index span {
    font-size: 13px;
    font-style: normal;
    color: rgba(11, 37, 69, 0.3);
    margin-left: 4px;
}

.bipo-proc-card .bipo-step-tag {
    color: var(--gold);
    position: relative;
}

.bipo-proc-card h3 {
    font-family: var(--ff-display);
    font-size: 27px;
    font-weight: 600;
    color: var(--navy);
    margin: 14px 0;
    position: relative;
}

.bipo-proc-card p {
    font-size: 15px;
    line-height: 1.62;
    color: var(--ink-dim);
    margin: 0 0 22px;
    position: relative;
}

.bipo-proc-card .bipo-step-list {
    color: var(--ink-2);
    position: relative;
}

.bipo-proc-card .bipo-step-list .ck {
    color: var(--gold);
}

@media (max-width: 1024px) {
    .bipo-proc-stage {
        position: relative;
        height: auto;
        display: block;
        padding: 48px 0 8px;
    }

    .bipo-proc-glow,
    .bipo-pulse {
        display: none;
    }

    .bipo-proc-heading {
        position: static;
        transform: none;
    }

    .bipo-proc-heading-in {
        max-width: none;
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }

    .bipo-rupee-3d {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        display: block;
        width: min(74vw, 360px);
        height: min(74vw, 360px);
        margin: 6px auto 0;
    }

    .bipo-proc-cards {
        margin-top: 0;
        padding: 8px 20px 44px;
    }

    .bipo-proc-slot {
        min-height: unset;
        justify-content: center;
        padding: 12px 0;
    }

    .bipo-proc-card {
        width: 100%;
        max-width: 560px;
    }
}

@media (max-width: 560px) {
    .bipo-proc-stage {
        height: 48vh;
    }

    .bipo-proc-card {
        padding: 30px 24px;
    }

    .bipo-proc-card h3 {
        font-size: 23px;
    }
}

.deliverable,
.related-card,
.sidebar-card,
.svc-card,
.svc-step {
    position: relative;
    overflow: hidden;
}

.deliverable:after,
.related-card:after,
.sidebar-card:after,
.svc-card:after,
.svc-step:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%),
            rgba(184, 134, 44, 0.13),
            transparent 62%);
}

.deliverable:hover:after,
.related-card:focus-visible:after,
.related-card:hover:after,
.sidebar-card:hover:after,
.svc-card:focus-visible:after,
.svc-card:hover:after,
.svc-step:hover:after {
    opacity: 1;
}

.deliverable>*,
.related-card>*,
.sidebar-card>*,
.svc-card>*,
.svc-step>* {
    position: relative;
    z-index: 1;
}

.breadcrumb a:focus-visible,
.related-card:focus-visible,
.sidebar-card a:focus-visible,
.subnav-link:focus-visible,
.svc-card:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.svc-card {
    transition: background 0.4s ease;
}

.svc-card:focus-visible {
    background: var(--bg-soft);
}

.svc-card:focus-visible:before {
    height: 100%;
}

.svc-card h3,
.svc-card p {
    transition: color 0.35s ease;
}

.svc-card:focus-visible h3,
.svc-card:hover h3 {
    color: var(--gold-2);
}

.svc-card:hover p {
    color: var(--ink);
}

.svc-card-num {
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.35s ease;
}

.svc-card:hover .svc-card-num {
    transform: translateX(4px);
    color: var(--gold);
}

.svc-card-link {
    transition: letter-spacing 0.35s ease;
}

.svc-card:hover .svc-card-link {
    letter-spacing: 0.19em;
}

.deliverable:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 3px;
    height: 0;
    background: var(--gold);
    transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.deliverable:hover:before {
    height: 100%;
}

.deliverable-num {
    transform-origin: left center;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
}

.deliverable:hover .deliverable-num {
    transform: scale(1.14);
    opacity: 1;
}

.deliverable h4 {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.deliverable:hover h4 {
    transform: translateX(5px);
}

.svc-step:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 3px;
    height: 0;
    background: var(--gold);
    transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-step:hover:before {
    height: 100%;
}

.svc-step-num {
    transform-origin: left center;
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
}

.svc-step:hover .svc-step-num {
    transform: translateX(6px) scale(1.08);
    opacity: 1;
}

.svc-step-body h4 {
    transition: color 0.35s ease;
}

.svc-step:hover .svc-step-body h4 {
    color: var(--gold-2);
}

.related-card {
    display: block;
    transition: background 0.35s ease;
}

.related-card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 3px;
    height: 0;
    background: var(--gold);
    transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.related-card:focus-visible:before,
.related-card:hover:before {
    height: 100%;
}

.related-card h4 {
    color: var(--navy);
    transition: color 0.35s ease;
}

.related-card:hover h4 {
    color: var(--gold-2);
}

.related-card .rc-icon {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        background 0.35s ease;
}

.related-card:hover .rc-icon {
    transform: scale(1.08) rotate(-8deg);
    background: #fff;
}

.related-card .rc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

.related-card .rc-arrow {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.related-card:focus-visible .rc-arrow,
.related-card:hover .rc-arrow {
    transform: translateX(5px);
}

.svc-detail-icon {
    transition:
        border-color 0.45s ease,
        box-shadow 0.45s ease;
}

.svc-detail-icon:hover {
    border-color: var(--gold);
    box-shadow: 0 26px 60px -26px rgba(184, 134, 44, 0.6);
}

.svc-detail-icon svg {
    transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.svc-detail-icon:hover svg {
    transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.12);
}

.sidebar-card {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        border-color 0.35s ease;
}

.sidebar-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--line-strong);
}

.sidebar-stat-row {
    transition: padding-left 0.3s ease;
}

.sidebar-stat-row:hover {
    padding-left: 6px;
}

.sidebar-stat-value {
    transition: color 0.3s ease;
}

.sidebar-stat-row:hover .sidebar-stat-value {
    color: var(--gold-2);
}

.sidebar-logo {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-card:hover .sidebar-logo {
    transform: scale(1.06);
}

.page-hero-img {
    transition: box-shadow 0.5s ease;
    box-shadow: 0 18px 44px -26px rgba(11, 37, 69, 0.45);
}

.page-hero-img:hover {
    box-shadow: 0 34px 74px -30px rgba(11, 37, 69, 0.55);
}

.page-hero-img img {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.page-hero-img:hover img {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.06);
}

.page-hero-img:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(115deg,
            transparent 38%,
            hsla(0, 0%, 100%, 0.32) 50%,
            transparent 62%);
    background-size: 260% 100%;
    background-position: 100% 0;
    transition:
        opacity 0.3s ease,
        background-position 0.9s ease;
}

.page-hero-img:hover:after {
    opacity: 1;
    background-position: 0 0;
}

.subnav-link:before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 0;
    height: 2px;
    background: var(--gold);
    opacity: 0.6;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.subnav-link:hover:before {
    transform: scaleX(1);
}

.subnav-link.active:before {
    display: none;
}

.breadcrumb a {
    position: relative;
}

.breadcrumb a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.breadcrumb a:hover:after {
    transform: scaleX(1);
}

.btn-gold:not(.btn-shine),
.btn-primary:not(.btn-shine) {
    position: relative;
    overflow: hidden;
}

.btn-gold:not(.btn-shine):after,
.btn-primary:not(.btn-shine):after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(115deg,
            transparent 40%,
            hsla(0, 0%, 100%, 0.26) 50%,
            transparent 60%);
    background-size: 260% 100%;
    background-position: 130% 0;
    transition: background-position 0.75s ease;
}

.btn-gold:not(.btn-shine):hover:after,
.btn-primary:not(.btn-shine):hover:after {
    background-position: -30% 0;
}

.btn:active {
    transform: translateY(0) scale(0.985);
}

.svc-cat-head {
    transition: border-color 0.35s ease;
}

.svc-cat-head:hover {
    border-color: var(--line-strong);
}

.svc-cat-num {
    transition: color 0.35s ease;
}

.svc-cat-head:hover .svc-cat-num {
    color: var(--gold-2);
}

.cta-aurora,
.cta-mesh,
.cta-spot {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.cta-aurora {
    overflow: hidden;
}

.cta-blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(56px) saturate(1.45);
    opacity: 0.95;
    --t: 1;
    will-change: transform, opacity;
}

.cta-blob.b1 {
    width: 460px;
    height: 460px;
    top: -150px;
    left: -80px;
    background: radial-gradient(circle,
            rgba(255, 198, 84, 0.85) 0,
            rgba(212, 166, 74, 0.5) 38%,
            rgba(184, 134, 44, 0.16) 58%,
            transparent 74%);
}

.cta-blob.b2 {
    width: 540px;
    height: 540px;
    bottom: -190px;
    right: -110px;
    background: radial-gradient(circle,
            rgba(255, 138, 56, 0.6) 0,
            rgba(232, 90, 26, 0.34) 38%,
            rgba(232, 90, 26, 0.12) 58%,
            transparent 74%);
}

.cta-blob.b3 {
    width: 420px;
    height: 420px;
    bottom: -160px;
    left: 34%;
    background: radial-gradient(circle,
            rgba(38, 200, 130, 0.5) 0,
            rgba(10, 135, 84, 0.28) 38%,
            rgba(10, 135, 84, 0.1) 58%,
            transparent 74%);
}

.cta-blob {
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.cta-blob.b1 {
    animation-name: ctaBlobA;
    animation-duration: 16s;
}

.cta-blob.b2 {
    animation-name: ctaBlobB;
    animation-duration: 19s;
    animation-delay: -7s;
}

.cta-blob.b3 {
    animation-name: ctaBlobC;
    animation-duration: 22s;
    animation-delay: -13s;
}

@keyframes ctaBlobA {
    0% {
        transform: translateZ(0) scale(1);
        opacity: 0.8;
    }

    25% {
        transform: translate3d(calc(105px * var(--t)), calc(85px * var(--t)), 0) scale(1.26);
        opacity: 1;
    }

    50% {
        transform: translate3d(calc(45px * var(--t)), calc(190px * var(--t)), 0) scale(0.92);
        opacity: 0.72;
    }

    75% {
        transform: translate3d(calc(-45px * var(--t)), calc(95px * var(--t)), 0) scale(1.14);
        opacity: 0.95;
    }

    to {
        transform: translateZ(0) scale(1);
        opacity: 0.8;
    }
}

@keyframes ctaBlobB {
    0% {
        transform: translateZ(0) scale(1.04);
        opacity: 0.78;
    }

    25% {
        transform: translate3d(calc(-120px * var(--t)), calc(-80px * var(--t)), 0) scale(0.9);
        opacity: 1;
    }

    50% {
        transform: translate3d(calc(-55px * var(--t)), calc(-175px * var(--t)), 0) scale(1.24);
        opacity: 0.74;
    }

    75% {
        transform: translate3d(calc(45px * var(--t)), calc(-70px * var(--t)), 0) scale(1.08);
        opacity: 0.92;
    }

    to {
        transform: translateZ(0) scale(1.04);
        opacity: 0.78;
    }
}

@keyframes ctaBlobC {
    0% {
        transform: translateZ(0) scale(0.96);
        opacity: 0.7;
    }

    25% {
        transform: translate3d(calc(115px * var(--t)), calc(-60px * var(--t)), 0) scale(1.3);
        opacity: 0.95;
    }

    50% {
        transform: translate3d(calc(-20px * var(--t)), calc(-120px * var(--t)), 0) scale(1.02);
        opacity: 1;
    }

    75% {
        transform: translate3d(calc(-105px * var(--t)), calc(-45px * var(--t)), 0) scale(1.2);
        opacity: 0.82;
    }

    to {
        transform: translateZ(0) scale(0.96);
        opacity: 0.7;
    }
}

.cta-section:before {
    animation: ctaWash 24s ease-in-out infinite alternate;
}

@keyframes ctaWash {
    to {
        transform: translate3d(-2%, 1.5%, 0) scale(1.07);
    }
}

.cta-mesh {
    opacity: 0.55;
    background-image:
        linear-gradient(90deg, rgba(11, 37, 69, 0.055) 1px, transparent 0),
        linear-gradient(180deg, rgba(11, 37, 69, 0.055) 1px, transparent 0);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 50%,
            #000 25%,
            transparent 78%);
    mask-image: radial-gradient(ellipse 65% 60% at 50% 50%,
            #000 25%,
            transparent 78%);
    animation: ctaMesh 34s linear infinite;
}

@keyframes ctaMesh {
    to {
        background-position: 64px 64px;
    }
}

.cta-spot {
    opacity: 0;
    transition: opacity 0.45s ease;
    background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%),
            rgba(184, 134, 44, 0.16),
            transparent 65%);
}

.cta-section:hover .cta-spot {
    opacity: 1;
}

.cta-section:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.75;
    background: linear-gradient(90deg,
            var(--saffron),
            #fff,
            var(--green),
            var(--gold),
            var(--saffron));
    background-size: 300% 100%;
    animation: ctaLine 14s linear infinite;
}

@keyframes ctaLine {
    to {
        background-position: 300% 0;
    }
}

.cta-box h2 .it {
    background: linear-gradient(100deg,
            var(--gold) 0,
            var(--saffron) 30%,
            var(--gold-2) 55%,
            var(--gold) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: ctaShimmer 8s linear infinite;
}

@keyframes ctaShimmer {
    to {
        background-position: 220% 0;
    }
}

.cta-logo {
    transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
    will-change: transform;
}

.cta-logo:hover {
    filter: drop-shadow(0 14px 30px rgba(184, 134, 44, 0.34));
}

.cta-actions .btn {
    transform: translate(var(--mgx, 0), var(--mgy, 0));
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.cta-actions .btn:hover {
    transform: translate(var(--mgx, 0), calc(var(--mgy, 0px) - 2px));
}

.cta-actions .btn:active {
    transform: translate(var(--mgx, 0), var(--mgy, 0)) scale(0.985);
}

@media (max-width: 768px) {
    .cta-mesh {
        display: none;
    }

    .cta-aurora {
        opacity: 0.68;
    }

    .cta-blob {
        filter: blur(42px) saturate(1.45);
        --t: 0.45;
    }

    .cta-blob.b1 {
        width: 280px;
        height: 280px;
        top: -110px;
        left: -90px;
    }

    .cta-blob.b2 {
        width: 320px;
        height: 320px;
        bottom: -130px;
        right: -90px;
    }

    .cta-blob.b3 {
        display: none;
    }
}

@media (hover: none) {

    .cta-logo,
    .page-hero-img img,
    .svc-detail-icon svg {
        transform: none;
    }

    .cta-spot,
    .deliverable:after,
    .related-card:after,
    .sidebar-card:after,
    .svc-card:after,
    .svc-step:after {
        display: none;
    }
}

.page-hero-banner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 420px;
    padding: 88px 0;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.page-hero-banner:after {
    display: none;
}

.page-hero-banner:before {
    z-index: 2;
}

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

.page-hero-media img {
    object-position: center right;
}

.page-hero-media:after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            hsla(0, 0%, 100%, 0.95),
            hsla(0, 0%, 100%, 0.92) 46%,
            hsla(0, 0%, 100%, 0.6) 63%,
            hsla(0, 0%, 100%, 0.22) 84%,
            hsla(0, 0%, 100%, 0.12)),
        linear-gradient(180deg, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0) 45%);
}

.page-hero-banner .page-hero-flex {
    position: relative;
    z-index: 2;
    width: 100%;
}

.page-hero-banner .page-hero-copy {
    max-width: 620px;
}

.page-hero-banner .page-hero-sub {
    max-width: 560px;
}

@media (max-width: 992px) {
    .page-hero-banner {
        min-height: 360px;
        padding: 64px 0;
    }

    .page-hero-media img {
        object-position: center;
    }

    .page-hero-media:after {
        background: linear-gradient(180deg,
                hsla(0, 0%, 100%, 0.9),
                hsla(0, 0%, 100%, 0.82));
    }
}

@media (max-width: 768px) {
    .page-hero-banner {
        min-height: 300px;
        padding: 52px 0;
    }

    .page-hero-banner .page-hero-copy,
    .page-hero-banner .page-hero-sub {
        max-width: 100%;
    }
}

@media (hover: hover) {
    .page-hero-media img {
        transform: none;
    }
}

.legal-dates {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--ff-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.legal-dates-sep {
    color: var(--gold);
}

.legal-prose .legal-section {
    scroll-margin-top: 140px;
}

.legal-prose h2 {
    font-size: clamp(23px, 2.2vw, 30px);
    margin-top: 52px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.legal-prose .legal-section:first-child h2 {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legal-prose ul {
    margin-top: 4px;
}

.legal-prose li {
    margin-bottom: 14px;
}

.legal-footnote {
    margin-top: 56px;
    padding: 22px 24px;
    border-left: 3px solid var(--gold);
    background: var(--bg-soft);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ink-dim);
}

.legal-glance {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.legal-glance li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
}

.legal-glance li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 12px;
    height: 1px;
    background: var(--gold);
}

.legal-toc {
    margin-top: 24px;
}

.legal-toc ol {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    counter-reset: none;
}

.legal-toc li {
    margin-bottom: 2px;
}

.legal-toc a {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 7px 10px 7px 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--ink-dim);
    border-bottom: none;
    transition:
        color 0.25s,
        padding-left 0.25s;
}

.legal-toc a:hover {
    color: var(--navy);
    padding-left: 6px;
}

.legal-toc-num {
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--gold);
    flex: none;
}

.legal-related {
    margin-top: 24px;
}

.legal-related ul {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

.legal-related li {
    border-top: 1px solid var(--line);
}

.legal-related li:first-child {
    border-top: none;
}

.legal-related a {
    display: block;
    padding: 12px 0;
    font-size: 15px;
    color: var(--ink-2);
    transition:
        color 0.25s,
        padding-left 0.25s;
}

.legal-related a:hover {
    color: var(--gold);
    padding-left: 6px;
}

.legal-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 28px;
    gap: 28px;
}

.legal-index-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 36px 32px 30px;
    overflow: hidden;
    transition:
        transform 0.35s,
        box-shadow 0.35s,
        border-color 0.35s;
}

.legal-index-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s;
}

.legal-index-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow: 0 20px 40px -22px rgba(11, 37, 69, 0.35);
}

.legal-index-card:hover:before {
    transform: scaleX(1);
}

.legal-index-num {
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--gold);
    margin-bottom: 18px;
}

.legal-index-card h3 {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.25;
    margin-bottom: 12px;
}

.legal-index-card p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-dim);
    margin-bottom: 22px;
}

.legal-index-meta {
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--ink-mute);
    margin-top: auto;
    padding-bottom: 16px;
}

.legal-index-link,
.legal-index-meta {
    font-family: var(--ff-mono);
    text-transform: uppercase;
}

.legal-index-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    color: var(--navy);
}

.legal-index-card:hover .legal-index-link {
    color: var(--gold);
}

.legal-index-link .arrow {
    transition: transform 0.3s;
}

.legal-index-card:hover .legal-index-link .arrow {
    transform: translateX(4px);
}

@media (max-width: 992px) {

    .legal-related,
    .legal-toc {
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .legal-prose h2 {
        margin-top: 40px;
        padding-top: 24px;
    }

    .legal-index-card {
        padding: 30px 26px 26px;
    }
}