/* =====================================================================
   Nordische Vermögensverwaltung — Design System
   Palette: Orange (lead) + Dark Navy + White
   Type (hybrid): Cormorant Garamond (display) · Syne (headings) · Public Sans (UI)
   ===================================================================== */

:root {
    /* Orange — primary accent */
    --orange: #F26A1B;
    --orange-dark: #C9520E;
    --orange-light: #FF8A47;
    --orange-soft: #FFF2E8;

    /* Navy — dark blue */
    --navy: #141C3A;
    --navy-700: #1E2D5E;
    --navy-900: #0B1226;

    /* Neutrals */
    --white: #FFFFFF;
    --paper: #FAFAFA;
    --mist: #ECF0F3;
    --line: #E2E6EC;
    --line-strong: #D2D8E2;
    --ink: #141C3A;
    --body: #5A6275;
    --muted: #8A93A6;

    /* Type */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-head: 'Syne', 'Public Sans', sans-serif;
    --font-body: 'Public Sans', 'Segoe UI', system-ui, sans-serif;

    /* Layout */
    --sidebar-w: 268px;
    --maxw: 1180px;
    --radius: 22px;
    --radius-sm: 14px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-sm: 0 8px 24px -16px rgba(20, 28, 58, .30);
    --shadow: 0 26px 60px -34px rgba(20, 28, 58, .45);
}

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

* {
    margin: 0;
}

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

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--body);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color .25s var(--ease);
}

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

ul {
    list-style: none;
    padding: 0;
}

::selection {
    background: var(--orange);
    color: #fff;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-head);
    color: var(--ink);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* ---------- Layout shell ---------- */
.site-main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
}

.section {
    padding: 110px 0;
    position: relative;
}

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

.section--paper {
    background: var(--paper);
}

.section--navy {
    background: var(--navy);
    color: #cfd5e6;
}

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

.container--wide {
    max-width: 1320px;
}

/* ---------- Eyebrow ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 14px;
    border-radius: 999px;
    background: var(--mist);
    color: var(--navy);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
}

.section--navy .eyebrow {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* ---------- Section header block ---------- */
.section-head {
    max-width: 720px;
}

.section-head.center {
    margin: 0 auto;
    text-align: center;
}

.section-head h2 {
    margin-top: 18px;
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
    color: var(--ink);
}

.section-head.center h2 {
    margin-left: auto;
    margin-right: auto;
}

.section-head p {
    margin-top: 16px;
    font-size: 1.05rem;
    color: var(--body);
}

.section--navy .section-head h2 {
    color: #fff;
}

.section--navy .section-head p {
    color: #aab2c9;
}

.split-head {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: end;
}

.split-head .lead p {
    margin-top: 18px;
}

.accent {
    color: var(--orange);
}

.serif {
    font-family: var(--font-display);
    font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 7px 7px 7px 26px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: all .3s var(--ease);
}

.btn .ico {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: transform .35s var(--ease);
}

.btn .ico svg {
    width: 18px;
    height: 18px;
}

.btn:hover .ico {
    transform: rotate(45deg);
}

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

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

.btn-primary:hover {
    background: var(--navy-700);
    box-shadow: var(--shadow-sm);
}

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

.btn-accent .ico {
    background: #fff;
    color: var(--orange);
}

.btn-accent:hover {
    background: var(--orange-dark);
    box-shadow: 0 16px 34px -18px rgba(242, 106, 27, .7);
}

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--line-strong);
    color: var(--navy);
    padding: 13px 26px;
}

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

.btn-ghost {
    padding-left: 4px;
    color: var(--navy);
    font-weight: 600;
}

.btn-ghost .ico {
    background: var(--orange-soft);
    color: var(--orange);
}

.btn-ghost:hover {
    color: var(--orange);
}

.btn-ghost:hover .ico {
    transform: none;
    background: var(--orange);
    color: #fff;
}

.section--navy .btn-outline {
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}

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

/* ============================ SIDEBAR ============================ */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: #fff;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 30px 26px;
    z-index: 200;
    transition: transform .4s var(--ease);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* full horizontal lockup (mark + wordmark) */
.brand-logo {
    width: auto;
    display: block;
}

.brand-logo--dark {
    display: none;
}

/* compact mark — only shown in the collapsed desktop rail */
.brand-icon {
    height: 40px;
    width: auto;
    display: none;
}

/* swap to the white-text lockup on dark surfaces */
:root[data-theme="dark"] .brand-logo--light {
    display: none;
}

:root[data-theme="dark"] .brand-logo--dark {
    display: block;
}

.side-nav {
    margin-top: 44px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.side-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 500;
    font-size: .96rem;
    color: var(--navy);
}

.side-nav a .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-strong);
    transition: all .25s var(--ease);
}

.side-nav a:hover {
    background: var(--paper);
    color: var(--orange);
}

.side-nav a:hover .dot {
    background: var(--orange);
}

.side-nav a.active {
    background: var(--orange-soft);
    color: var(--orange-dark);
    font-weight: 600;
}

.side-nav a.active .dot {
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(242, 106, 27, .15);
}

.side-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lang-switch,
.theme-switch {
    display: flex;
    width: 100%;
    gap: 3px;
    padding: 3px;
    background: var(--mist);
    border-radius: 12px;
    font-size: .76rem;
    font-weight: 600;
}

.lang-switch a,
.theme-switch button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 6px;
    border-radius: 9px;
    color: var(--muted);
    line-height: 1.2;
    cursor: pointer;
    transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}

.lang-switch a.active,
.theme-switch button.active {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 1px 3px rgba(20, 28, 58, .14);
}

.lang-switch a:not(.active):hover,
.theme-switch button:not(.active):hover {
    color: var(--ink);
}

.theme-switch button .material-symbols-outlined {
    font-size: 18px;
}

.flag {
    width: 20px;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
    flex: none;
    display: block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

.lang-sep {
    display: none;
}

/* --- Language dropdown (sidebar footer, opens upward) --- */
.lang-dropdown {
    position: relative;
    width: 100%;
}

.lang-current {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 11px;
    background: var(--mist);
    color: var(--ink);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .2s var(--ease);
}

.lang-current:hover {
    background: var(--line);
}

.lang-current .lang-name {
    flex: 1;
    text-align: start;
}

.lang-current .caret {
    font-size: 18px;
    transition: transform .25s var(--ease);
}

.lang-dropdown.open .lang-current .caret {
    transform: rotate(180deg);
}

.lang-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(11, 18, 38, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    z-index: 250;
    max-height: 320px;
    overflow-y: auto;
}

:root[data-theme="dark"] .lang-menu {
    background: #16213F;
}

.lang-dropdown.open .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-menu li {
    margin: 0;
}

.lang-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border-radius: 8px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background .18s var(--ease), color .18s var(--ease);
}

.lang-menu a:hover,
.lang-menu a.active {
    background: var(--mist);
    color: var(--ink);
}

.side-foot .theme-mini {
    display: none;
}

.side-cta {
    display: flex;
    justify-content: center;
}

.side-legal {
    display: flex;
    gap: 14px;
    font-size: .72rem;
    color: var(--muted);
}

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

/* Mobile topbar (hidden on desktop) */
.topbar {
    display: none;
}

.scrim {
    position: fixed;
    inset: 0;
    background: rgba(11, 18, 38, .5);
    opacity: 0;
    visibility: hidden;
    transition: .35s var(--ease);
    z-index: 150;
    backdrop-filter: blur(2px);
}

.scrim.show {
    opacity: 1;
    visibility: visible;
}

/* ============================ HERO ============================ */
.hero {
    position: relative;
    overflow: hidden;
    min-height: 88vh;
    display: flex;
    align-items: center;
    padding: 150px 0 110px;
    background: #0B1226;
}

/* Full-bleed looping background video */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Brand wash (navy → orange) + fine diagonal line pattern over the video */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(118deg, rgba(11, 18, 38, .9) 0%, rgba(20, 28, 58, .74) 44%, rgba(201, 82, 14, .58) 100%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0, rgba(255, 255, 255, .06) 1px, transparent 1px, transparent 11px);
}

.hero .container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}

.hero-eyebrow {
    margin-bottom: 26px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.hero h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(3rem, 1.8rem + 4.4vw, 5.4rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: #fff;
}

.hero h1 .l2 {
    color: var(--orange-light);
    font-style: italic;
}

.hero-sub {
    margin: 28px 0 36px;
    font-size: 1.12rem;
    max-width: 33em;
    color: rgba(255, 255, 255, .84);
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.hero-trust {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--muted);
    font-size: .82rem;
}

.hero-trust .stars {
    color: var(--orange);
    letter-spacing: 2px;
}

.hero-visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    min-height: 340px;
}

.hero-badge {
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 18px;
    padding: 18px 22px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 14px;
}

.hero-badge .n {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--navy);
    line-height: 1;
}

.hero-badge .t {
    font-size: .76rem;
    color: var(--muted);
    max-width: 11ch;
}

.hero-badge .pill {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--orange-soft);
    color: var(--orange);
    display: grid;
    place-items: center;
}

/* Secondary CTA reads white over the video */
.hero .btn-ghost {
    color: #fff;
}

/* Respect reduced-motion: drop the video, keep the navy + brand overlay */
@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }
}

/* ============================ FEATURES ============================ */
.features {
    margin-top: -56px;
    position: relative;
    z-index: 3;
}

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

.feature {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 30px;
    transition: all .35s var(--ease);
}

.feature:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow);
}

.icon-box {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--orange-soft);
    color: var(--orange);
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    transition: all .35s var(--ease);
}

.icon-box svg {
    width: 28px;
    height: 28px;
}

.feature:hover .icon-box {
    background: var(--orange);
    color: #fff;
}

.feature h3 {
    font-size: 1.22rem;
    margin-bottom: 10px;
}

.feature p {
    font-size: .96rem;
}

/* ============================ ABOUT ============================ */
.about-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 64px;
    align-items: center;
}

.about-visual {
    position: relative;
}

.about-visual img {
    border-radius: var(--radius);
    width: 100%;
    aspect-ratio: 5/5.4;
    object-fit: cover;
}

.about-card {
    position: absolute;
    right: -24px;
    bottom: -24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px 24px;
    box-shadow: var(--shadow);
    width: 260px;
}

.about-card h4 {
    font-size: 1rem;
    margin-bottom: 16px;
}

.bar {
    margin-bottom: 13px;
}

.bar:last-child {
    margin-bottom: 0;
}

.bar-top {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
}

.bar-track {
    height: 6px;
    border-radius: 99px;
    background: var(--mist);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--orange-light), var(--orange));
    width: 0;
    transition: width 1.2s var(--ease);
}

.check-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
    margin: 30px 0 34px;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 500;
    color: var(--navy);
    font-size: .95rem;
}

.check-list .ck {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--orange-soft);
    color: var(--orange);
    display: grid;
    place-items: center;
    flex: none;
}

.check-list .ck svg {
    width: 13px;
    height: 13px;
}

.about-stats {
    display: flex;
    gap: 40px;
}

.about-stats .num {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--navy);
    line-height: 1;
}

/* "Mrd" (German abbreviation for billion) — kept smaller than the figure so it
   reads as a unit, not part of the number. Applies wherever Mrd is output. */
.unit-mrd {
    font-size: 35px;
    line-height: 1;
}

.about-stats .lbl {
    font-size: .86rem;
    color: var(--muted);
    margin-top: 6px;
}

/* ============================ PARTNERS ============================ */
.partners {
    padding: 64px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.partners-label {
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 34px;
}

.partners-track-wrap {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.partners-track {
    display: flex;
    align-items: center;
    gap: 72px;
    width: max-content;
    will-change: transform;
}

.partners-track img {
    height: 30px;
    width: auto;
    opacity: .55;
    filter: grayscale(1);
    transition: .3s var(--ease);
}

.partners-track img:hover {
    opacity: 1;
    filter: none;
}

/* ============================ SERVICES ============================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 56px;
}

.svc {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px 30px 30px;
    overflow: hidden;
    transition: all .35s var(--ease);
}



.svc:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: transparent;
}

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

.svc h3 {
    font-size: 1.28rem;
    margin: 22px 0 12px;
}

.svc p {
    font-size: .96rem;
}

.svc .svc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--navy);
}

.svc:hover .svc-link {
    color: var(--orange);
}

.svc .svc-link svg {
    width: 16px;
    height: 16px;
    transition: transform .3s var(--ease);
}

.svc:hover .svc-link svg {
    transform: translate(3px, -3px);
}

/* ============================ EXPERTISE / COUNTERS ============================ */
.expertise-statement {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.7rem, 1rem + 2.4vw, 2.8rem);
    line-height: 1.28;
    color: var(--ink);
    max-width: 22ch;
}

.counters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 64px;
}

.counter .num {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(2.4rem, 1.4rem + 2vw, 3.2rem);
    color: var(--navy);
    line-height: 1;
    display: flex;
    align-items: baseline;
}

.counter .num .suf {
    color: var(--orange);
    margin-left: 2px;
}

.counter .lbl {
    margin-top: 14px;
    font-size: .92rem;
    color: var(--body);
    max-width: 22ch;
}

.counter {
    padding-left: 24px;
    border-left: 2px solid var(--line);
}

/* ============================ CTA banner ============================ */
.cta-band {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    background: var(--orange);
    color: #fff;
    padding: 64px 60px;
}

.cta-band::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

.cta-band::before {
    content: "";
    position: absolute;
    left: -40px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.cta-band .inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.cta-band h2 {
    color: #fff;
    font-size: clamp(1.8rem, 1.1rem + 2vw, 2.6rem);
    max-width: 16ch;
}

.cta-band p {
    color: rgba(255, 255, 255, .9);
    margin-top: 12px;
    max-width: 40ch;
}

.cta-band .btn-accent {
    background: #fff;
    color: var(--orange-dark);
}

.cta-band .btn-accent .ico {
    background: var(--orange);
    color: #fff;
}

.cta-band .btn-accent:hover {
    background: var(--navy);
    color: #fff;
}

/* ============================ PROCESS / HOW IT WORKS ============================ */
.process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.steps {
    border-top: 1px solid var(--line);
}

.step {
    display: flex;
    gap: 22px;
    padding: 26px 8px;
    border-bottom: 1px solid var(--line);
    transition: .3s var(--ease);
}

.step:hover {
    padding-left: 18px;
}

.step .no {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--orange);
    flex: none;
    width: 38px;
}

.step h3 {
    font-size: 1.18rem;
    margin-bottom: 6px;
}

.step p {
    font-size: .95rem;
}

.process-figure img {
    border-radius: var(--radius);
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* ============================ VIDEO ============================ */
.video-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.video-frame {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--shadow);
    aspect-ratio: 16/7.4;
}

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

.video-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 28, 58, .15), rgba(20, 28, 58, .5));
}

.play-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    display: grid;
    place-items: center;
    z-index: 2;
    transition: transform .3s var(--ease);
    box-shadow: 0 20px 50px -16px rgba(242, 106, 27, .8);
}

.play-btn svg {
    width: 30px;
    height: 30px;
    margin-left: 4px;
}

.play-btn::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
    animation: ripple 2.4s infinite;
}

.play-btn:hover {
    transform: scale(1.08);
}

@keyframes ripple {
    0% {
        transform: scale(.9);
        opacity: .8;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* Video lightbox */
.vmodal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(11, 18, 38, .82);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: .35s var(--ease);
}

.vmodal.show {
    opacity: 1;
    visibility: visible;
}

.vmodal-inner {
    width: min(960px, 100%);
    aspect-ratio: 16/9;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow);
    transform: scale(.96);
    transition: transform .35s var(--ease);
}

.vmodal.show .vmodal-inner {
    transform: scale(1);
}

.vmodal-inner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vmodal-close {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: grid;
    place-items: center;
}

.vmodal-close:hover {
    background: var(--orange);
}

/* ============================ DISCIPLINES ============================ */
.disc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 52px;
}

.disc {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 3/3.6;
}

.disc img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

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

.disc::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(11, 18, 38, .85));
}

.disc-body {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    padding: 28px;
    color: #fff;
}

.disc-body .k {
    display: inline-block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--orange-light);
    margin-bottom: 8px;
    font-weight: 700;
}

.disc-body h3 {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 6px;
}

.disc-body p {
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
    opacity: 0;
    max-height: 0;
    transition: .4s var(--ease);
}

.disc:hover .disc-body p {
    opacity: 1;
    max-height: 100px;
}

/* ============================ TEAM ============================ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 56px;
}

.member {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: .35s var(--ease);
}

.member:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: transparent;
}

.member-photo {
    position: relative;
    aspect-ratio: 4/4.4;
    overflow: hidden;
    background: var(--navy);
}

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

.member-photo .role-tag {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    color: var(--orange-dark);
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 6px 11px;
    border-radius: 99px;
}

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

.member-body h3 {
    font-size: 1.16rem;
}

.member-body .pos {
    color: var(--orange);
    font-weight: 600;
    font-size: .9rem;
    margin-top: 4px;
}

.member-body .loc {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: .82rem;
    margin-top: 12px;
}

.member-body .loc svg {
    width: 14px;
    height: 14px;
}

/* Team page — detailed cards laid out horizontally (photo beside bio) */
.team-grid.team-grid--detailed {
    grid-template-columns: repeat(2, 1fr);
}

.team-grid--detailed .member {
    display: grid;
    grid-template-columns: 220px 1fr;
}

.team-grid--detailed .member-photo {
    aspect-ratio: auto;
    min-height: 248px;
}

.team-grid--detailed .member-photo img {
    object-position: center 22%;
}

.team-grid--detailed .member-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ============================ TESTIMONIAL ============================ */
.quote-wrap {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.quote-mark {
    font-family: var(--font-display);
    font-size: 5rem;
    line-height: .6;
    color: var(--orange);
}

.quote-text {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(1.5rem, 1rem + 1.8vw, 2.2rem);
    line-height: 1.4;
    color: #fff;
    margin: 10px 0 34px;
}

.quote-by {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.quote-by .av {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--navy-700);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-family: var(--font-head);
}

.quote-by .who {
    text-align: left;
}

.quote-by .who b {
    color: #fff;
    font-family: var(--font-head);
}

.quote-by .who span {
    display: block;
    color: var(--muted);
    font-size: .85rem;
}

/* ============================ FAQ ============================ */
.faq-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 64px;
    align-items: start;
}

.faq-list {
    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
    padding: 24px 4px;
}

.faq-q .qn {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--orange);
    font-size: .95rem;
    flex: none;
}

.faq-q .qt {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--navy);
    flex: 1;
}

.faq-q .qx {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--mist);
    color: var(--navy);
    display: grid;
    place-items: center;
    transition: .3s var(--ease);
}

.faq-q .qx svg {
    width: 18px;
    height: 18px;
    transition: transform .3s var(--ease);
}

.faq-item.open .qx {
    background: var(--orange);
    color: #fff;
}

.faq-item.open .qx svg {
    transform: rotate(45deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s var(--ease);
}

.faq-a p {
    padding: 0 4px 26px 56px;
    color: var(--body);
}

/* ============================ CONTACT ============================ */
.contact-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 56px;
}

.contact-info .ci-item {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.contact-info .ci-item:first-child {
    padding-top: 0;
}

.contact-info .ci-ico {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    flex: none;
    background: var(--orange-soft);
    color: var(--orange);
    display: grid;
    place-items: center;
}

.contact-info .ci-ico svg {
    width: 20px;
    height: 20px;
}

.contact-info h4 {
    font-size: 1rem;
    margin-bottom: 3px;
}

.contact-info p,
.contact-info a {
    color: var(--body);
    font-size: .95rem;
}

.contact-info a:hover {
    color: var(--orange);
}

.contact-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 38px;
    box-shadow: var(--shadow-sm);
}

.field {
    margin-bottom: 20px;
}

.field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
}

.field input,
.field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--navy);
    background: var(--paper);
    transition: .25s var(--ease);
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--orange);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(242, 106, 27, .12);
}

.field input.err_input,
.field textarea.err_input {
    border-color: #e0413f;
    background: #fff5f5;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.hp {
    position: absolute;
    left: -9999px;
}

/* ============================ FOOTER ============================ */
.footer {
    background: var(--navy-900);
    color: #97a0b8;
    padding: 60px 0 28px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.footer .brand-logo {
    height: 65px;
}

.footer-about {
    margin-top: 20px;
    font-size: .92rem;
    max-width: 30ch;
    color: #8089a0;
}

.footer-col h5 {
    color: #fff;
    font-family: var(--font-head);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 18px;
}

.footer-col address {
    font-style: normal;
    font-size: .92rem;
    line-height: 1.85;
}

.footer-hours {
    margin-top: 16px;
    font-size: .8rem;
    line-height: 1.5;
    color: #8089a0;
}

.footer-hours .fh-label {
    display: block;
    color: #fff;
    font-family: var(--font-head);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 5px;
}

.footer-col a:hover {
    color: var(--orange-light);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 26px;
    font-size: .85rem;
    flex-wrap: wrap;
}

.footer-bottom .fb-links {
    display: flex;
    gap: 22px;
}

/* ============================ Reveal animation ============================ */
.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.active {
    opacity: 1;
    transform: none;
}

.reveal.d1 {
    transition-delay: .1s;
}

.reveal.d2 {
    transition-delay: .2s;
}

.reveal.d3 {
    transition-delay: .3s;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ---------- Anchor scroll offset ---------- */
.hero,
.section,
[id="contact"] {
    scroll-margin-top: 28px;
}

@media (max-width: 992px) {

    .hero,
    .section,
    [id] {
        scroll-margin-top: 80px;
    }
}

/* ---------- Toasts ---------- */
.nvv-toasts {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 600;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: min(380px, calc(100vw - 44px));
}

.nvv-toast {
    transform: translateY(14px);
    opacity: 0;
    transition: all .35s var(--ease);
    padding: 15px 20px;
    border-radius: 14px;
    color: #fff;
    font-weight: 500;
    font-size: .92rem;
    box-shadow: var(--shadow);
}

.nvv-toast.show {
    transform: none;
    opacity: 1;
}

.nvv-toast.success {
    background: var(--navy);
}

.nvv-toast.error {
    background: #c0392b;
}

/* ---------- Visually-hidden ---------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Component tweaks ---------- */
.js-play,
.video-frame {
    cursor: pointer;
}

.hero-badge .hb-meta {
    display: flex;
    flex-direction: column;
}

.split-head .lead h2 {
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
    margin-top: 16px;
    color: var(--ink);
}

.split-head .trail p {
    font-size: 1.05rem;
    color: var(--body);
}

.section--navy .split-head .lead h2 {
    color: #fff;
}

.counter .num .pre {
    color: var(--orange);
    margin-right: 1px;
}

/* ============================ THEME TOGGLE ============================ */
.side-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--ink);
    background: var(--mist);
    transition: all .25s var(--ease);
}

.theme-toggle:hover {
    background: var(--orange-soft);
    color: var(--orange);
}

.theme-toggle svg {
    width: 19px;
    height: 19px;
}

.theme-toggle .ic-sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .ic-sun {
    display: block;
}

:root[data-theme="dark"] .theme-toggle .ic-moon {
    display: none;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.topbar .theme-toggle {
    background: transparent;
}

/* ============================ DARK THEME ============================ */
:root[data-theme="dark"] {
    /* Backgrounds use the same navy/blue family as the rest of the brand */
    --white: #0B1226;
    /* page background (navy-900) */
    --paper: #111B38;
    /* alternating section bands */
    --mist: #1C2748;
    /* insets / pills / tracks */
    --line: rgba(255, 255, 255, .10);
    --line-strong: rgba(255, 255, 255, .20);
    --ink: #ECEFF8;
    /* headings / strong text */
    --body: #A7B0C8;
    /* body text */
    --muted: #7C859E;
    --orange-soft: rgba(242, 106, 27, .15);
    color-scheme: dark;
}

/* Elevated surfaces (cards / chrome that were hard-coded white) */
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .feature,
:root[data-theme="dark"] .svc,
:root[data-theme="dark"] .member,
:root[data-theme="dark"] .contact-card,
:root[data-theme="dark"] .about-card,
:root[data-theme="dark"] .hero-badge {
    background: #16213F;
}

/* Text that was hard-coded to navy → use adaptive ink */
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .side-nav a,
:root[data-theme="dark"] .side-legal a:hover,
:root[data-theme="dark"] .lang-switch a:not(.active):hover,
:root[data-theme="dark"] .bar-top,
:root[data-theme="dark"] .check-list li,
:root[data-theme="dark"] .about-stats .num,
:root[data-theme="dark"] .counter .num,
:root[data-theme="dark"] .faq-q .qt,
:root[data-theme="dark"] .faq-q .qx,
:root[data-theme="dark"] .field label,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .hero-badge .n,
:root[data-theme="dark"] .svc .svc-link,
:root[data-theme="dark"] .btn-outline,
:root[data-theme="dark"] .btn-ghost {
    color: var(--ink);
}

/* Accent / polish for dark */
:root[data-theme="dark"] .btn-primary {
    background: #243056;
}

:root[data-theme="dark"] .btn-primary:hover {
    background: #2C3A66;
}

:root[data-theme="dark"] .side-nav a:hover {
    background: rgba(255, 255, 255, .05);
}

:root[data-theme="dark"] .side-nav a.active {
    color: var(--orange-light);
}

:root[data-theme="dark"] .lang-switch a.active,
:root[data-theme="dark"] .theme-switch button.active {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    box-shadow: none;
}

:root[data-theme="dark"] .field input:focus,
:root[data-theme="dark"] .field textarea:focus {
    background: #16213F;
}

:root[data-theme="dark"] .footer {
    background: #070C1A;
}

/* Partner logos are dark vector art — invert to read on the dark canvas */
:root[data-theme="dark"] .partners-track img {
    filter: brightness(0) invert(1);
    opacity: .5;
}

:root[data-theme="dark"] .partners-track img:hover {
    opacity: .9;
}

/* ============================ FLOWING PATTERN ============================ */
.wave-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    color: #fff;
}

/* ============================ VALUE PANEL (Disciplines) ============================ */
.value-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1C2B58 0%, #131D3D 52%, #0C142C 100%);
    color: #fff;
}

.value-section>.container {
    position: relative;
    z-index: 1;
}

.value-section .wave-lines {
    opacity: .5;
    -webkit-mask-image: linear-gradient(108deg, #000 2%, rgba(0, 0, 0, .3) 42%, transparent 78%);
    mask-image: linear-gradient(108deg, #000 2%, rgba(0, 0, 0, .3) 42%, transparent 78%);
}

.value-section::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -120px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(242, 106, 27, .22), transparent 65%);
    pointer-events: none;
}

.value-head {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 640px;
    margin: 0 auto 50px;
}

.value-head .eyebrow {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.value-head h2 {
    color: #fff;
    margin-top: 18px;
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
}

.value-head p {
    color: rgba(255, 255, 255, .72);
    margin-top: 14px;
    font-size: 1.05rem;
}

.value-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.value-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 34px 30px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
    display: flex;
    flex-direction: column;
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

.value-card.featured {
    /* Highlighted, but kept level with the other cards (no vertical offset). */
    box-shadow: var(--shadow);
    border-color: transparent;
    outline: 2px solid var(--orange);
    outline-offset: -2px;
}

.vc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.vc-ico {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    flex: none;
    background: var(--orange-soft);
    color: var(--orange);
    display: grid;
    place-items: center;
}

.vc-ico svg {
    width: 26px;
    height: 26px;
}

.vc-kicker {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--orange);
    margin-bottom: 3px;
}

.value-card h3 {
    font-size: 1.3rem;
    color: var(--ink);
}

.vc-desc {
    color: var(--body);
    font-size: .95rem;
    margin: 0 0 22px;
}

.vc-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-bottom: 28px;
}

.vc-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: .92rem;
    color: var(--ink);
}

.vc-list .ck {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: var(--orange-soft);
    color: var(--orange);
    display: grid;
    place-items: center;
}

.vc-list .ck svg {
    width: 13px;
    height: 13px;
}

.vc-btn {
    /* Pin the button to the bottom so it aligns across equal-height cards. */
    margin-top: auto;
}

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

:root[data-theme="dark"] .value-card {
    background: #16213F;
}

/* Testimonial dark block keeps the same flowing pattern */
.section--navy {
    overflow: hidden;
}

.section--navy .wave-lines {
    opacity: .4;
    -webkit-mask-image: radial-gradient(125% 100% at 12% 0%, #000, transparent 70%);
    mask-image: radial-gradient(125% 100% at 12% 0%, #000, transparent 70%);
}

.section--navy .container {
    position: relative;
    z-index: 1;
}

/* =====================================================================
   INNER PAGES — component kit
   ===================================================================== */

/* ---------- Page hero / banner ---------- */
.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 64px 0 70px;
}

.page-hero .wave-lines {
    color: var(--navy);
    opacity: .05;
    -webkit-mask-image: linear-gradient(110deg, #000 0%, transparent 70%);
    mask-image: linear-gradient(110deg, #000 0%, transparent 70%);
}

.page-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(242, 106, 27, .12), transparent 65%);
    pointer-events: none;
}

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

.crumbs {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: 26px;
}

.crumbs a:hover {
    color: var(--orange);
}

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

.crumb-current {
    color: var(--navy);
    font-weight: 600;
}

.page-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 48px;
    align-items: end;
}

.page-hero-main h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.2rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.page-hero-sub {
    margin-top: 18px;
    font-size: 1.1rem;
    max-width: 40ch;
    color: var(--body);
}

.page-hero-side {
    padding-bottom: 8px;
}

.page-hero-side p {
    margin-top: 16px;
    font-size: .96rem;
    color: var(--body);
}

/* ---------- Feature row (icon columns) ---------- */
.feature-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.feature-row.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.feature-row.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.feature-min .icon-box {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    margin-bottom: 18px;
}

.feature-min .icon-box svg {
    width: 24px;
    height: 24px;
}

.feature-min h3 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.feature-min p {
    font-size: .95rem;
    color: var(--body);
}

/* ---------- Media row (image + content) ---------- */
.media-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.media-row+.media-row {
    margin-top: 90px;
}

.media-row--rev .media-figure {
    order: 2;
}

.media-figure {
    position: relative;
}

.media-figure img {
    width: 100%;
    border-radius: var(--radius);
    aspect-ratio: 4/4;
    object-fit: cover;
}

.media-figure .badge-float {
    position: absolute;
    right: -22px;
    bottom: -22px;
    background: var(--orange);
    color: #fff;
    border-radius: 16px;
    padding: 18px 22px;
    box-shadow: var(--shadow);
    font-family: var(--font-head);
    font-weight: 700;
}

.media-body .eyebrow {
    margin-bottom: 18px;
}

.media-body h2 {
    font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.5rem);
    margin-bottom: 16px;
}

.media-body p {
    color: var(--body);
    margin-bottom: 14px;
}

.media-body .check-list {
    margin: 22px 0 28px;
}

/* ---------- Timeline ---------- */
.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.tl-item:last-child {
    border-bottom: 0;
}

.tl-year {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--orange);
}

.tl-body h3 {
    font-size: 1.15rem;
    margin-bottom: 6px;
}

.tl-body p {
    color: var(--body);
    font-size: .95rem;
}

/* ---------- Prose (legal / article) ---------- */
.prose {
    max-width: 760px;
    color: var(--body);
}

.prose h2 {
    font-size: 1.6rem;
    color: var(--ink);
    margin: 38px 0 14px;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose h3 {
    font-size: 1.2rem;
    color: var(--ink);
    margin: 26px 0 10px;
}

.prose p {
    margin-bottom: 16px;
    line-height: 1.8;
}

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

.prose li {
    margin-bottom: 8px;
}

.prose a {
    color: var(--orange);
    text-decoration: underline;
}

.prose strong {
    color: var(--ink);
}

/* ---------- Meta bar ---------- */
.meta-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 26px 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
}

.mi-label {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    margin-bottom: 6px;
}

.mi-value {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
}

/* ---------- Detail grid (article + sticky aside) ---------- */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 56px;
    align-items: start;
}

.detail-aside {
    position: sticky;
    top: 28px;
}

.aside-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
}

.aside-card h3 {
    font-size: 1.2rem;
    margin-bottom: 18px;
}

/* ---------- FAQ page (categorised) ---------- */
.faq-cats {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.faq-cat-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
    margin-bottom: 6px;
}

.faq-cat-label .ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--orange-soft);
    color: var(--orange);
}

.faq-cat-label .ic svg {
    width: 18px;
    height: 18px;
}

.faq-side-cta {
    margin-top: 28px;
}

/* ---------- Pricing tiers ---------- */
.tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.tier {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px 32px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.tier:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

.tier--featured {
    border-color: transparent;
    outline: 2px solid var(--orange);
    outline-offset: -2px;
    transform: translateY(-12px);
}

.tier-name {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ink);
}

.tier-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 14px 0 4px;
}

.tier-price .amt {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 2.6rem;
    color: var(--ink);
}

.tier-price .cur {
    color: var(--orange);
    font-weight: 700;
    font-size: 1.4rem;
}

.tier-per {
    color: var(--muted);
    font-size: .9rem;
    margin-bottom: 24px;
}

.tier-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.tier-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: .93rem;
    color: var(--ink);
}

.tier-list .ck {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    background: var(--orange-soft);
    color: var(--orange);
    display: grid;
    place-items: center;
}

.tier-list .ck svg {
    width: 12px;
    height: 12px;
}

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

:root[data-theme="dark"] .tier {
    background: #16213F;
}

/* ---------- Comparison table ---------- */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.compare-table th,
.compare-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    font-size: .92rem;
}

.compare-table thead th {
    background: var(--paper);
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.compare-table tbody tr:last-child td {
    border-bottom: 0;
}

.compare-table tbody tr:hover {
    background: var(--paper);
}

.compare-table .pos {
    color: #1a8a4b;
    font-weight: 600;
}

.compare-table .neg {
    color: #c0392b;
    font-weight: 600;
}

/* ---------- Insights / posts ---------- */
.posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.post-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.post-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

.post-media {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--mist);
}

.post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.post-card:hover .post-media img {
    transform: scale(1.05);
}

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

.post-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: 12px;
}

.post-cat {
    color: var(--orange);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .68rem;
}

.post-body h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.post-excerpt {
    color: var(--body);
    font-size: .93rem;
    margin-bottom: 18px;
}

.post-body .svc-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--navy);
}

.post-card:hover .svc-link {
    color: var(--orange);
}

.post-body .svc-link svg {
    width: 16px;
    height: 16px;
}

:root[data-theme="dark"] .post-card,
:root[data-theme="dark"] .meta-bar,
:root[data-theme="dark"] .aside-card {
    background: #16213F;
}

/* ---------- Auth ---------- */
.auth-wrap {
    min-height: calc(100vh - 0px);
    display: grid;
    place-items: center;
    padding: 80px 24px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 40px 38px;
    box-shadow: var(--shadow-sm);
}

.auth-head {
    text-align: center;
    margin-bottom: 28px;
}

.auth-head h1 {
    font-size: 1.7rem;
    margin-bottom: 8px;
}

.auth-head p {
    color: var(--body);
    font-size: .95rem;
}

.auth-card .btn {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

.auth-alt {
    text-align: center;
    margin-top: 22px;
    font-size: .9rem;
    color: var(--muted);
}

.auth-alt a {
    color: var(--orange);
    font-weight: 600;
}

.auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .85rem;
    margin-bottom: 18px;
}

.auth-row a {
    color: var(--orange);
}

:root[data-theme="dark"] .auth-card {
    background: #16213F;
}

/* ---------- Error / 404 ---------- */
.error-page {
    text-align: center;
    padding: 120px 24px;
    max-width: 560px;
    margin: 0 auto;
}

.error-code {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(6rem, 4rem + 10vw, 11rem);
    line-height: .9;
    color: var(--orange);
}

.error-page h1 {
    font-size: 1.8rem;
    margin: 10px 0 14px;
}

.error-page p {
    color: var(--body);
    margin-bottom: 30px;
}

/* ---------- Stat row on dark band ---------- */
.stat-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 44px;
}

.stat-row .stat-num {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(2.2rem, 1.4rem + 1.8vw, 3rem);
    color: #fff;
    line-height: 1;
}

.stat-row .stat-num .suf {
    color: var(--orange-light);
}

.stat-row .stat-label {
    margin-top: 10px;
    color: rgba(255, 255, 255, .7);
    font-size: .9rem;
}

/* ---------- CTA band (dark variant) ---------- */
.cta-band--dark {
    background: linear-gradient(135deg, #1C2B58 0%, #131D3D 55%, #0C142C 100%);
}

.cta-band--dark::after {
    background: rgba(242, 106, 27, .22);
}

.cta-band--dark .btn-accent {
    background: var(--orange);
    color: #fff;
}

.cta-band--dark .btn-accent .ico {
    background: #fff;
    color: var(--orange);
}

.cta-band--dark .btn-accent:hover {
    background: var(--orange-dark);
}

/* ---------- Footer columns ---------- */
.footer-top {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: .92rem;
}

/* ---------- Page intro + generic grids / cards ---------- */
.page-intro {
    max-width: 720px;
    margin-bottom: 14px;
    color: var(--body);
    font-size: 1.05rem;
}

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

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

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

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 30px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

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

.card h3 {
    font-size: 1.2rem;
    margin: 18px 0 10px;
}

.card p {
    color: var(--body);
    font-size: .95rem;
}

:root[data-theme="dark"] .card,
:root[data-theme="dark"] .tier-list li,
:root[data-theme="dark"] .vc-list li {
    color: var(--ink);
}

:root[data-theme="dark"] .card {
    background: #16213F;
}

.field select {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--navy);
    background: var(--paper);
}

.field--full {
    grid-column: 1 / -1;
}

.form-note {
    font-size: .82rem;
    color: var(--muted);
    margin-top: 6px;
}

:root[data-theme="dark"] .field select {
    color: var(--ink);
}

/* ---------- Sidebar nav dropdown (Tools) ---------- */
.side-group {
    display: flex;
    flex-direction: column;
}

.side-group-toggle {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    text-align: left;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: .96rem;
    color: var(--ink);
    cursor: pointer;
    transition: all .25s var(--ease);
}

.side-group-toggle:hover {
    background: var(--paper);
    color: var(--orange);
}

.side-group-toggle .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-strong);
    transition: all .25s var(--ease);
}

.side-group-toggle .caret {
    margin-left: auto;
    display: grid;
    place-items: center;
    transition: transform .3s var(--ease);
}

.side-group-toggle .caret svg {
    width: 16px;
    height: 16px;
}

.side-group.open .side-group-toggle {
    color: var(--orange);
}

.side-group.open .side-group-toggle .dot {
    background: var(--orange);
}

.side-group.open .side-group-toggle .caret {
    transform: rotate(180deg);
}

.side-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s var(--ease);
}

.side-group.open .side-sub {
    grid-template-rows: 1fr;
}

.side-sub-inner {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 9px;
    padding-left: 14px;
    border-left: 1px solid var(--line);
}

.side-group.open .side-sub-inner {
    margin-top: 2px;
}

.side-sub-inner a {
    position: relative;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: .89rem;
    color: var(--body);
}

.side-sub-inner a:hover {
    color: var(--orange);
    background: var(--paper);
}

.side-sub-inner a.active {
    color: var(--orange-dark);
    background: var(--orange-soft);
    font-weight: 600;
}

:root[data-theme="dark"] .side-sub-inner a.active {
    color: var(--orange-light);
}

/* ---------- Live market ticker ---------- */
.live-ticker {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 34px;
    z-index: 300;
    background: var(--navy-900);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.live-ticker .ticker-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.live-ticker .ticker-content {
    display: flex;
    align-items: center;
    height: 100%;
    white-space: nowrap;
    width: max-content;
    will-change: transform;
}

.live-ticker .ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    font-size: .72rem;
    flex-shrink: 0;
}

.live-ticker .ticker-item+.ticker-item {
    border-left: 1px solid rgba(255, 255, 255, .07);
}

.live-ticker .t-sym {
    font-weight: 700;
    color: #fff;
    letter-spacing: .03em;
}

.live-ticker .t-prc {
    color: #9aa3bd;
}

.live-ticker .t-chg {
    font-weight: 600;
}

.live-ticker .t-chg.t-up {
    color: #2fbf85;
}

.live-ticker .t-chg.t-dn {
    color: #ff7a7a;
}

/* layout offset while the ticker is present (JS removes .has-ticker if empty) */
.has-ticker .sidebar {
    top: 34px;
    height: calc(100vh - 34px);
}

.has-ticker .site-main {
    padding-top: 34px;
}

.has-ticker .topbar {
    top: 34px;
}

@media (max-width: 992px) {
    .has-ticker .site-main {
        padding-top: 98px;
    }
}

/* ---------- Dark feature bands: force readable light text ---------- */
/* The band is dark navy in BOTH themes, so its OWN heading/eyebrow/lead must be
   light regardless of theme (the base h* colour is var(--ink) = navy in light).
   Scoped to the section head / split head so it never affects the white cards. */
.value-section .section-head h2,
.value-section .split-head .lead h2,
.value-section .value-head h2 {
    color: #fff;
}

.value-section .section-head p,
.value-section .split-head .trail p,
.value-section .value-head p {
    color: rgba(255, 255, 255, .72);
}

.value-section .section-head .eyebrow,
.value-section .split-head .eyebrow,
.value-section .value-head .eyebrow {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* ---------- Dark-mode contrast fixes ---------- */
/* breadcrumb current page sits on the dark page-hero in dark mode */
:root[data-theme="dark"] .crumb-current {
    color: var(--ink);
}

/* post "read more" link sits on a dark card in dark mode */
:root[data-theme="dark"] .post-body .svc-link {
    color: var(--ink);
}

/* validation-error inputs were light pink (invisible light text) in dark mode */
:root[data-theme="dark"] .field input.err_input,
:root[data-theme="dark"] .field textarea.err_input {
    background: #2a1620;
    border-color: #e0413f;
    color: var(--ink);
}

/* let the page-hero line pattern read on the dark canvas */
:root[data-theme="dark"] .page-hero .wave-lines {
    color: #fff;
    opacity: .05;
}

/* ---------- Consistent gap between a section heading and the block below it ---------- */
/* Many content blocks (.tiers, .posts, .feature-row, .table-wrap, .steps, .timeline,
   grids…) had no top margin, so they nearly touched the heading's last line. */
.section-head+*,
.split-head+* {
    margin-top: 48px;
}

/* ============================ SIDEBAR — sections · material icons · collapse ============================ */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 22px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    flex: none;
}

.sidebar {
    transition: transform .4s var(--ease), width .3s var(--ease);
}

.site-main {
    transition: margin-left .3s var(--ease);
}

/* nav item / group icons */
.side-nav a .material-symbols-outlined,
.side-group-toggle .material-symbols-outlined:first-child {
    font-size: 22px;
    color: var(--muted);
    transition: color .2s var(--ease);
}

.side-nav a:hover .material-symbols-outlined,
.side-group-toggle:hover .material-symbols-outlined:first-child {
    color: var(--orange);
}

.side-nav a.active .material-symbols-outlined,
.side-group.open .side-group-toggle .material-symbols-outlined:first-child {
    color: var(--orange);
}

.side-group-toggle .caret {
    margin-left: auto;
    font-size: 20px;
    color: var(--muted);
    transition: transform .3s var(--ease);
}

.side-group.open .side-group-toggle .caret {
    transform: rotate(180deg);
}

/* section labels */
.side-section-label {
    padding: 16px 14px 7px;
    font-family: var(--font-body);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.side-nav>.side-section-label:first-child {
    padding-top: 2px;
}

/* sub-item icons */
.side-sub-inner a {
    gap: 11px;
}

.side-sub-inner a .material-symbols-outlined {
    font-size: 19px;
    color: var(--muted);
    transition: color .2s var(--ease);
}

.side-sub-inner a:hover .material-symbols-outlined,
.side-sub-inner a.active .material-symbols-outlined {
    color: var(--orange);
}

/* collapse toggle (desktop only) */
.side-collapse {
    position: absolute;
    top: 26px;
    right: -13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy);
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-sm);
    z-index: 210;
    transition: color .2s var(--ease), border-color .2s var(--ease);
}

.side-collapse:hover {
    color: var(--orange);
    border-color: var(--orange);
}

.side-collapse .material-symbols-outlined {
    font-size: 18px;
    position: absolute;
    transition: transform .3s var(--ease);
}

:root.nav-collapsed .side-collapse .material-symbols-outlined {
    transform: rotate(180deg);
}

:root[data-theme="dark"] .side-collapse {
    background: #16213F;
    color: var(--ink);
}

/* ---- collapsed rail (desktop) ---- */
@media (min-width: 993px) {
    :root.nav-collapsed {
        --sidebar-w: 78px;
    }

    /* Narrow the rail padding so a 46px control fills the content box exactly
       (78 - 2*16 = 46) — no overflow, so the footer pills sit on the same
       centre axis as the nav icons. */
    :root.nav-collapsed .sidebar {
        padding-left: 16px;
        padding-right: 16px;
    }

    :root.nav-collapsed .sidebar .brand {
        justify-content: center;
    }

    :root.nav-collapsed .sidebar .brand-logo {
        display: none;
    }

    :root.nav-collapsed .sidebar .brand-icon {
        display: block;
    }

    :root.nav-collapsed .nav-label {
        display: none;
    }

    :root.nav-collapsed .side-nav a,
    :root.nav-collapsed .side-group-toggle {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    :root.nav-collapsed .side-group-toggle .caret {
        display: none;
    }

    :root.nav-collapsed .side-sub {
        display: none;
    }

    :root.nav-collapsed .side-section-label {
        padding: 0;
        margin: 10px;
        height: 0;
        font-size: 0;
        letter-spacing: 0;
        overflow: hidden;
        border-top: 1px solid var(--line);
    }

    :root.nav-collapsed .lang-switch,
    :root.nav-collapsed .theme-switch {
        display: none;
    }

    /* Centre every footer control on the rail's axis. align-items handles the
       centring so we don't rely on auto margins (which don't centre the
       inline-flex .lang-current). */
    :root.nav-collapsed .side-foot {
        align-items: center;
    }

    /* Collapsed rail: language switcher becomes a compact, centred flag-only
       button. The dropdown menu still opens at a readable width, spilling over
       the page content (the sidebar doesn't clip it). */
    :root.nav-collapsed .lang-dropdown {
        width: 46px;
    }

    :root.nav-collapsed .lang-current {
        width: 46px;
        height: 46px;
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    :root.nav-collapsed .lang-current .lang-name,
    :root.nav-collapsed .lang-current .caret {
        display: none;
    }

    :root.nav-collapsed .lang-menu {
        right: auto;
        left: 0;
        min-width: 196px;
    }

    :root.nav-collapsed .theme-mini {
        display: grid;
        width: 46px;
        height: 46px;
        margin: 0 auto;
    }

    :root.nav-collapsed .side-cta .btn {
        width: 46px;
        height: 46px;
        padding: 0;
        justify-content: center;
    }

    :root.nav-collapsed .side-cta .btn .nav-label {
        display: none;
    }

    :root.nav-collapsed .side-cta .btn .ico {
        width: auto;
        height: auto;
        background: transparent;
        color: #fff;
    }

    :root.nav-collapsed .side-cta .btn:hover .ico {
        transform: none;
    }
}

@media (max-width: 992px) {
    .side-collapse {
        display: none;
    }
}

/* ============================ TEAM — leadership in depth ============================ */
.leader-profiles {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.leader-profile {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 44px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 38px 42px;
    transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}

.leader-profile:hover {
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.leader-monogram {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1C2B58 0%, #0C142C 100%);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: .04em;
}

.leader-profile-aside h3 {
    font-size: 1.2rem;
    margin: 18px 0 2px;
}

.leader-profile-aside .pos {
    color: var(--orange);
    font-weight: 600;
    font-size: .9rem;
}

.leader-profile-aside .loc {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: .82rem;
    margin-top: 12px;
}

.leader-profile-aside .loc svg {
    width: 14px;
    height: 14px;
}

.leader-profile-bio p {
    color: var(--body);
    font-size: .98rem;
    line-height: 1.75;
}

.leader-profile-bio p+p {
    margin-top: 16px;
}

:root[data-theme="dark"] .leader-profile {
    background: #16213F;
}

@media (max-width: 860px) {
    .leader-profile {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 30px 26px;
    }
}

/* ============================ BOND COMPARISON — filters + sortable table ============================ */
.bond-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.bond-chip {
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.bond-chip:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.bond-chip.is-active {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

.bond-table th[data-sort] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color .2s var(--ease);
}

.bond-table th[data-sort]:hover,
.bond-table th.sort-active {
    color: var(--orange);
}

.bond-table th .sort-arrow {
    display: inline-block;
    width: 1em;
    margin-left: 4px;
    font-size: .7em;
    color: var(--orange);
}

.bond-table .bond-yield {
    font-weight: 700;
    color: var(--ink);
}

.bond-type-badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    background: var(--orange-soft);
    color: var(--orange-dark);
    white-space: nowrap;
}

.bond-hidden {
    display: none;
}

.bond-empty {
    margin-top: 18px;
    color: var(--muted);
    font-size: .92rem;
}

:root[data-theme="dark"] .bond-chip {
    background: #16213F;
}

/* ============================ ANLAGEKOMPASS — risk slider ============================ */
.risk-slider {
    margin-top: 8px;
}

.risk-scale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.risk-end {
    flex: 1;
    font-size: .82rem;
    color: var(--muted);
}

.risk-end--right {
    text-align: right;
}

.risk-value {
    flex: none;
    min-width: 2.2ch;
    text-align: center;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--orange);
}

.risk-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--line);
    cursor: pointer;
    touch-action: none;
}

.risk-track:focus {
    outline: none;
}

.risk-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--orange-light), var(--orange));
    pointer-events: none;
}

.risk-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--orange);
    box-shadow: var(--shadow-sm);
    transform: translate(-50%, -50%);
    cursor: grab;
    transition: transform .12s var(--ease), box-shadow .15s var(--ease);
}

.risk-track.dragging .risk-thumb,
.risk-track:focus .risk-thumb {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 0 6px var(--orange-soft);
}

.risk-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: .75rem;
    color: var(--muted);
}