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

        html {
        scroll-behavior: smooth;
        font-size: 16px;
        }

        :root {
        --ink: rgb(0, 38, 72);
        --ink-80: rgba(0, 38, 72, 0.80);
        --ink-55: rgba(0, 38, 72, 0.55);
        --ink-10: rgba(0, 38, 72, 0.10);
        --ink-06: rgba(0, 38, 72, 0.06);
        --gold: #C9A84C;
        --gold-light: #E2C97E;
        --gold-pale: #F7F0DC;
        --gold-glow: rgba(201,168,76,0.14);
        --white: #FFFFFF;
        --cream: #F5F3EE;
        --border: rgba(0, 38, 72, 0.09);
        --border-gold: rgba(201,168,76,0.28);
        --ff-display: 'Cormorant Garamond', Georgia, serif;
        --ff-body: 'DM Sans', system-ui, sans-serif;
        --radius: 6px;
        --radius-lg: 14px;
        --shadow: 0 2px 12px rgba(0,38,72,0.10);
        --shadow-lg: 0 16px 48px rgba(0,38,72,0.16);
        }

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

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

        a {
        color: inherit;
        }

    
        .container {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 1.5rem;
        }

        @media (min-width: 640px) {
        .container {
        padding: 0 2rem;
        }
        }

        @media (min-width: 1024px) {
        .container {
        padding: 0 2.5rem;
        }
        }

        .section {
        padding: 5rem 0;
        }

        .section--lg {
        padding: 6.5rem 0;
        }

        .section--dark {
        background: var(--ink);
        }

        .section--white {
        background: var(--white);
        border-top: 1px solid var(--border);
        }

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

        .section--gold {
        background: var(--gold-pale);
        border-top: 1px solid var(--border-gold);
        border-bottom: 1px solid var(--border-gold);
        }

        /* Section header */
        .section-header {
        margin-bottom: 3rem;
        }

        .section-header--center {
        text-align: center;
        }

        .section-header--center .section-lead {
        max-width: 580px;
        margin: 0 auto;
        }

        /* Eyebrow */
        .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--gold);
        margin-bottom: 0.875rem;
        }

        .eyebrow--center {
        justify-content: center;
        }

        .eyebrow-line {
        width: 22px;
        height: 1.5px;
        background: var(--gold);
        flex-shrink: 0;
        }

        /* Display title */
        .display-title {
        font-family: var(--ff-display);
        font-size: clamp(1.875rem, 3.5vw, 2.875rem);
        font-weight: 700;
        line-height: 1.18;
        color: var(--ink);
        letter-spacing: -0.01em;
        }

        .display-title--white {
        color: var(--white);
        }

        .display-title--gold {
        color: var(--gold);
        }

        /* Section lead */
        .section-lead {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.8;
        color: var(--ink-55);
        margin-top: 0.75rem;
        }

        .section-lead--white {
        color: rgba(255,255,255,0.5);
        }

        /* Gold ornament divider */
        .ornament {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        margin-top: 1rem;
        }

        .ornament-line {
        width: 44px;
        height: 1px;
        background: var(--gold);
        opacity: 0.4;
        }

        .ornament-diamond {
        width: 5px;
        height: 5px;
        background: var(--gold);
        transform: rotate(45deg);
        opacity: 0.6;
        }

        /* =============================================================
        BUTTONS
        ============================================================= */
        .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        font-family: var(--ff-body);
        font-weight: 600;
        border: none;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.22s;
        white-space: nowrap;
        flex-shrink: 0;
        letter-spacing: 0.01em;
        line-height: 1;
        }

        .btn svg {
        flex-shrink: 0;
        }

        .btn--sm {
        padding: 0.55rem 1.1rem;
        font-size: 0.82rem;
        border-radius: var(--radius);
        }

        .btn--md {
        padding: 0.72rem 1.5rem;
        font-size: 0.875rem;
        border-radius: var(--radius);
        }

        .btn--lg {
        padding: 0.9rem 2rem;
        font-size: 0.95rem;
        border-radius: var(--radius-lg);
        }

        .btn--xl {
        padding: 1rem 2.25rem;
        font-size: 1rem;
        border-radius: var(--radius-lg);
        }

        .btn--ink {
        background: var(--ink);
        color: var(--white);
        box-shadow: var(--shadow);
        }

        .btn--ink:hover {
        background: rgba(0,38,72,0.84);
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
        }

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

        .btn--gold:hover {
        background: var(--gold-light);
        transform: translateY(-1px);
        }

        .btn--outline-ink {
        background: transparent;
        border: 1.5px solid var(--ink);
        color: var(--ink);
        }

        .btn--outline-ink:hover {
        background: var(--ink);
        color: var(--white);
        }

        .btn--outline-white {
        background: transparent;
        border: 1.5px solid rgba(255,255,255,0.30);
        color: var(--white);
        }

        .btn--outline-white:hover {
        border-color: rgba(255,255,255,0.65);
        background: rgba(255,255,255,0.07);
        }

        .btn--outline-gold {
        background: transparent;
        border: 1.5px solid rgba(201,168,76,0.45);
        color: var(--gold-light);
        }

        .btn--outline-gold:hover {
        border-color: var(--gold);
        background: rgba(201,168,76,0.07);
        }

        .btn--pill {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--ink-55);
        border-radius: 100px;
        }

        .btn--pill:hover {
        border-color: var(--gold);
        color: var(--ink);
        }

        .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.875rem;
        align-items: center;
        }

        /* =============================================================
        GOVERNMENT RIBBON
        ============================================================= */
        .gov-ribbon {
        background: var(--ink);
        border-bottom: 1px solid rgba(201,168,76,0.18);
        }

        .gov-ribbon-inner {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        min-height: 38px;
        font-size: 0.71rem;
        letter-spacing: 0.07em;
        font-weight: 500;
        }

        .gov-left, .gov-right {
        display: flex;
        align-items: center;
        }

        .gov-seal {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        color: var(--gold);
        font-size: 0.67rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        border-right: 1px solid rgba(255,255,255,0.06);
        flex-shrink: 0;
        }

        .gov-seal-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--gold);
        animation: dot-pulse 3s ease infinite;
        flex-shrink: 0;
        }

        @ keyframes dot-pulse {
        0%, 100% {
        opacity: 1
        }

        50% {
        opacity: 0.25
        }
        }

        .gov-link {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.5rem 1rem;
        color: rgba(255,255,255,0.45);
        border-right: 1px solid rgba(255,255,255,0.06);
        text-decoration: none;
        transition: color 0.18s, background 0.18s;
        font-size: 0.71rem;
        white-space: nowrap;
        }

        .gov-link:hover {
        color: var(--gold-light);
        background: rgba(255,255,255,0.03);
        }

        .gov-link svg {
        width: 12px;
        height: 12px;
        stroke: var(--gold);
        flex-shrink: 0;
        fill: none;
        }

        .gov-right .gov-link {
        border-right: none;
        border-left: 1px solid rgba(255,255,255,0.06);
        }

        /* Language switcher in the ribbon. The container keeps .gov-link's
        spacing and divider; the three codes inside are the real links, so
        only they light up on hover and the current one is marked instead of
        linking to itself. */
        .gov-link--lang {
        gap: 0.35rem;
        cursor: default;
        }

        .gov-link--lang:hover {
        background: none;
        }

        .gov-lang {
        color: rgba(255,255,255,0.45);
        text-decoration: none;
        font-weight: 600;
        letter-spacing: 0.04em;
        padding: 0 0.1rem;
        transition: color 0.18s;
        }

        .gov-lang:hover {
        color: var(--gold-light);
        }

        .gov-lang.is-active {
        color: var(--gold);
        }

        .gov-lang:focus-visible {
        outline: 1px solid var(--gold);
        outline-offset: 2px;
        }

        .gov-lang-sep {
        color: rgba(255,255,255,0.2);
        }

        /* Drawer copy, since the ribbon switcher is hidden on small screens */
        .mobile-nav-lang {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        padding: 0.875rem 0 0.25rem;
        }

        .mobile-nav-lang__item {
        display: inline-flex;
        align-items: center;
        height: 32px;
        padding: 0 0.85rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--white);
        color: var(--ink-80);
        font-size: 0.75rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s;
        }

        .mobile-nav-lang__item:hover {
        border-color: var(--border-gold);
        color: var(--ink);
        }

        .mobile-nav-lang__item.is-active {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--white);
        }
        /* Hide ministry text on small screens */
        @media (max-width: 600px) {
        .gov-link--ministry {
        display: none;
        }

        .gov-link--lang {
        display: none;
        }
        }

        /* =============================================================
        HEADER / NAVBAR
        ============================================================= */
        .header {
        position: sticky;
        top: 0;
        z-index: 200;
        background: rgba(255,255,255,0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        }

        .header-inner {
        display: flex;
        align-items: center;
        height: 68px;
        gap: 1.5rem;
        }

        /* Logo */
        .logo {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-decoration: none;
        flex-shrink: 0;
        }

        .logo-crest {
        width: 44px;
        height: 44px;
        background: var(--ink);
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
        }

        .logo-crest::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(201,168,76,0.22) 0%, transparent 55%);
        }

        .logo-crest-letter {
        font-family: var(--ff-display);
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--gold);
        position: relative;
        line-height: 1;
        }

        .logo-text {
        display: flex;
        flex-direction: column;
        }

        .logo-name {
        font-family: var(--ff-display);
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.15;
        }

        .logo-sub {
        font-size: 0.62rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.11em;
        color: var(--ink-55);
        }

        /* Divider between logo and nav */
        .header-divider {
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--border), transparent);
        }

        /* Desktop nav */
        .nav {
        display: none;
        align-items: center;
        }

        @media (min-width: 900px) {
        .nav {
        display: flex;
        }
        }

        .nav-link {
        position: relative;
        padding: 0.45rem 0.875rem;
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--ink-55);
        text-decoration: none;
        transition: color 0.18s;
        white-space: nowrap;
        }

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

        .nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0.875rem;
        right: 0.875rem;
        height: 1.5px;
        background: var(--gold);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s;
        }

        .nav-link:hover::after {
        transform: scaleX(1);
        }

        /* Header actions */
        .header-actions {
        display: none;
        align-items: center;
        gap: 0.625rem;
        }

        @media (min-width: 900px) {
        .header-actions {
        display: flex;
        }
        }

        /* Mobile menu button */
        .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--ink);
        margin-left: auto;
        flex-shrink: 0;
        }

        @media (min-width: 900px) {
        .mobile-menu-btn {
        display: none;
        }
        }

        /* Mobile drawer */
        .mobile-nav {
        display: none;
        flex-direction: column;
        background: var(--white);
        border-top: 1px solid var(--border);
        padding: 1.25rem 1.5rem 1.75rem;
        gap: 0.25rem;
        }

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

        .mobile-nav-link {
        display: block;
        padding: 0.75rem 0;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--ink-55);
        text-decoration: none;
        border-bottom: 1px solid var(--border);
        transition: color 0.18s;
        }

        .mobile-nav-link:last-of-type {
        border-bottom: none;
        }

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

        .mobile-nav-actions {
        display: flex;
        gap: 0.75rem;
        padding-top: 1rem;
        }

        /* =============================================================
        HERO SECTION
        ============================================================= */
        .hero {
        position: relative;
        background: var(--ink);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        }

        /* Background layers */
        .hero-video-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.13;
        }

        .hero-gradient {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 90% 70% at 65% 40%, rgba(201,168,76,0.05) 0%, transparent 55%), linear-gradient(160deg, rgb(0,38,72) 0%, rgba(0,25,48,0.95) 100%);
        }

        .hero-grid-pattern {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);
        background-size: 72px 72px;
        mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0.5) 75%, transparent 100%);
        }

        .hero-left-stripe {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(to bottom, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
        opacity: 0.55;
        }

        .hero-orb {
        position: absolute;
        right: -140px;
        top: -140px;
        width: 780px;
        height: 780px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(201,168,76,0.045) 0%, transparent 60%);
        border: 1px solid rgba(201,168,76,0.05);
        animation: orb-float 22s ease-in-out infinite;
        pointer-events: none;
        }

        .hero-orb-sm {
        position: absolute;
        right: 80px;
        top: 80px;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        border: 1px solid rgba(201,168,76,0.04);
        animation: orb-float 16s ease-in-out infinite reverse;
        pointer-events: none;
        }

        @keyframes orb-float {
        0%, 100% {
        transform: translate(0, 0) scale(1);
        }

        40% {
        transform: translate(-18px, 18px) scale(1.02);
        }

        70% {
        transform: translate(10px, -12px) scale(0.98);
        }
        }

        .hero-body {
        position: relative;
        z-index: 10;
        padding: 2.5rem 0 4.5rem;
        }

        /* Hero grid: left content + right stats panel */
        .hero-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        align-items: center;
        }

        @media (min-width: 960px) {
        .hero-layout {
        grid-template-columns: 1fr 380px;
        gap: 4.5rem;
        }
        }

        /* Status chip */
        .hero-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.38rem 0.9rem 0.38rem 0.45rem;
        background: rgba(201,168,76,0.10);
        border: 1px solid rgba(201,168,76,0.22);
        border-radius: 100px;
        margin-bottom: 1.75rem;
        }

        .hero-chip-dot {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--gold);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        }

        .hero-chip-dot svg {
        width: 11px;
        height: 11px;
        stroke: var(--ink);
        stroke-width: 2.5;
        fill: none;
        }

        .hero-chip-text {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.13em;
        color: var(--gold-light);
        }

        /* Hero heading — NO italic */
        .hero-title {
        font-family: var(--ff-display);
        font-size: clamp(2.5rem, 5.5vw, 4.75rem);
        font-weight: 700;
        color: var(--white);
        line-height: 1.08;
        margin-bottom: 1.375rem;
        letter-spacing: -0.01em;
        }

        .hero-title-accent {
        color: var(--gold);
        display: block;
        }

        .hero-lead {
        font-size: 1.025rem;
        font-weight: 300;
        line-height: 1.8;
        color: rgba(255,255,255,0.52);
        max-width: 480px;
        margin-bottom: 2.25rem;
        }

        .hero-note {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: 1.375rem;
        font-size: 0.73rem;
        color: rgba(255,255,255,0.27);
        }

        .hero-note svg {
        width: 13px;
        height: 13px;
        stroke: var(--gold);
        opacity: 0.65;
        fill: none;
        flex-shrink: 0;
        }

        /* Stats panel (right side of hero) */
        .hero-panel {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: var(--radius-lg);
        overflow: hidden;
        backdrop-filter: blur(10px);
        }

        .hero-panel-head {
        padding: 1rem 1.375rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        }

        .hero-panel-icon {
        width: 30px;
        height: 30px;
        background: var(--gold-glow);
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        }

        .hero-panel-icon svg {
        width: 14px;
        height: 14px;
        stroke: var(--gold);
        fill: none;
        }

        .hero-panel-label {
        font-size: 0.71rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.11em;
        color: rgba(255,255,255,0.42);
        }

        .hero-stat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.95rem 1.375rem;
        border-bottom: 1px solid rgba(255,255,255,0.035);
        transition: background 0.18s;
        }

        .hero-stat:last-of-type {
        border-bottom: none;
        }

        .hero-stat:hover {
        background: rgba(255,255,255,0.025);
        }

        .hero-stat-name {
        font-size: 0.78rem;
        color: rgba(255,255,255,0.38);
        font-weight: 400;
        }

        .hero-stat-value {
        font-family: var(--ff-display);
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--white);
        line-height: 1;
        }

        .hero-stat-delta {
        font-size: 0.67rem;
        color: #5BCD8A;
        font-weight: 600;
        margin-top: 0.1rem;
        text-align: right;
        }

        .hero-panel-footer {
        padding: 1.1rem 1.375rem;
        border-top: 1px solid rgba(255,255,255,0.06);
        }

        /* Scroll cue */
        .scroll-cue {
        position: absolute;
        bottom: 2.25rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.7rem;
        color: rgba(255,255,255,0.22);
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-weight: 500;
        text-decoration: none;
        }

        .scroll-cue-bar {
        width: 1px;
        height: 46px;
        background: linear-gradient(to bottom, var(--gold), transparent);
        animation: scroll-bar 2.3s ease infinite;
        }

        @keyframes scroll-bar {
        0% {
        transform: scaleY(0);
        transform-origin: top;
        }

        48% {
        transform: scaleY(1);
        transform-origin: top;
        }

        52% {
        transform: scaleY(1);
        transform-origin: bottom;
        }

        100% {
        transform: scaleY(0);
        transform-origin: bottom;
        }
        }

        /* =============================================================
        TRUST BAR
        ============================================================= */
        .trust-bar {
        background: var(--white);
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        scrollbar-width: none;
        }

        .trust-bar::-webkit-scrollbar {
        display: none;
        }

        .trust-bar-inner {
        display: flex;
        align-items: stretch;
        min-width: max-content;
        }

        .trust-item {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.9rem 1.5rem;
        font-size: 0.77rem;
        font-weight: 500;
        color: var(--ink-55);
        border-right: 1px solid var(--border);
        white-space: nowrap;
        transition: color 0.18s;
        }

        .trust-item:last-child {
        border-right: none;
        }

        .trust-item:hover {
        color: var(--ink);
        }

        .trust-item svg {
        width: 14px;
        height: 14px;
        stroke: var(--gold);
        fill: none;
        flex-shrink: 0;
        }

        /* =============================================================
        ABOUT SECTION
        ============================================================= */
        .about-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3.5rem;
        align-items: center;
        }

        @media (min-width: 900px) {
        .about-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5.5rem;
        }
        }

        /* Image block */
        .about-image-block {
        position: relative;
        display: none;
        }

        @media (min-width: 900px) {
        .about-image-block {
        display: block;
        }
        }

        .about-image-frame {
        border-radius: var(--radius-lg);
        overflow: hidden;
        aspect-ratio: 5 / 4;
        background: var(--ink);
        box-shadow: var(--shadow-lg);
        position: relative;
        }

        .about-image-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.62;
        filter: grayscale(15%);
        }

        .about-image-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(0,38,72,0.38) 0%, transparent 55%);
        }

        /* Floating stat badges */
        .float-badge {
        position: absolute;
        bottom: -1.25rem;
        right: -1.25rem;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 0.9rem 1.25rem;
        box-shadow: var(--shadow-lg);
        display: flex;
        align-items: center;
        gap: 0.875rem;
        min-width: 185px;
        }

        .float-badge-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--radius);
        background: var(--ink);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        }

        .float-badge-icon svg {
        width: 19px;
        height: 19px;
        stroke: var(--gold);
        fill: none;
        }

        .float-badge-label {
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ink-55);
        }

        .float-badge-value {
        font-family: var(--ff-display);
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.1;
        }

        .float-badge-alt {
        position: absolute;
        top: -1.1rem;
        left: -1.1rem;
        background: var(--ink);
        border: 1px solid rgba(201,168,76,0.22);
        border-radius: var(--radius-lg);
        padding: 0.85rem 1.1rem;
        box-shadow: 0 8px 32px rgba(0,38,72,0.28);
        display: flex;
        align-items: center;
        gap: 0.65rem;
        }

        .float-badge-alt-icon {
        width: 34px;
        height: 34px;
        border-radius: var(--radius);
        background: var(--gold-glow);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        }

        .float-badge-alt-icon svg {
        width: 16px;
        height: 16px;
        stroke: var(--gold);
        fill: none;
        }

        .float-badge-alt-value {
        font-family: var(--ff-display);
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--white);
        }

        .float-badge-alt-label {
        font-size: 0.63rem;
        color: rgba(255,255,255,0.4);
        font-weight: 300;
        }

        /* Pillar list */
        .pillar-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: 1.875rem;
        }

        .pillar {
        display: flex;
        gap: 0.875rem;
        align-items: flex-start;
        padding: 0.875rem 1.1rem;
        background: var(--white);
        border: 1px solid var(--border);
        border-left: 3px solid transparent;
        border-radius: var(--radius);
        transition: border-color 0.2s, box-shadow 0.2s;
        }

        .pillar:hover {
        border-left-color: var(--gold);
        box-shadow: var(--shadow);
        }

        .pillar-icon {
        width: 32px;
        height: 32px;
        border-radius: var(--radius);
        background: var(--gold-pale);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        }

        .pillar-icon svg {
        width: 15px;
        height: 15px;
        stroke: var(--gold);
        fill: none;
        }

        .pillar-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 0.2rem;
        }

        .pillar-desc {
        font-size: 0.78rem;
        color: var(--ink-55);
        line-height: 1.6;
        font-weight: 300;
        }

        /* =============================================================
        AUDIENCE / FOR WHO SECTION
        ============================================================= */
        .audience-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.75rem;
        max-width: 900px;
        margin: 0 auto;
        }

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

        .audience-card {
        border-radius: var(--radius-lg);
        overflow: hidden;
        border: 1px solid var(--border);
        transition: transform 0.25s, box-shadow 0.25s;
        }

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

        .audience-card-head {
        padding: 2rem 1.875rem 1.625rem;
        position: relative;
        overflow: hidden;
        }

        .audience-card-head--dark {
        background: var(--ink);
        }

        .audience-card-head--pale {
        background: var(--gold-pale);
        }

        .audience-card-geo {
        position: absolute;
        right: -28px;
        bottom: -28px;
        width: 110px;
        height: 110px;
        border: 1px solid rgba(201,168,76,0.12);
        border-radius: 50%;
        transition: transform 0.4s;
        pointer-events: none;
        }

        .audience-card:hover .audience-card-geo {
        transform: scale(1.45);
        }

        .audience-card-icon {
        width: 50px;
        height: 50px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.875rem;
        }

        .audience-card-icon--light {
        background: rgba(255,255,255,0.10);
        }

        .audience-card-icon--dark {
        background: rgba(0,38,72,0.10);
        }

        .audience-card-icon svg {
        width: 23px;
        height: 23px;
        fill: none;
        }

        .audience-card-icon--light svg {
        stroke: var(--gold-light);
        }

        .audience-card-icon--dark svg {
        stroke: var(--ink);
        }

        .audience-card-title {
        font-family: var(--ff-display);
        font-size: 1.5rem;
        font-weight: 700;
        }

        .audience-card-title--white {
        color: var(--white);
        }

        .audience-card-title--dark {
        color: var(--ink);
        }

        .audience-card-body {
        padding: 1.625rem 1.875rem 1.875rem;
        background: var(--cream);
        }

        .feature-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        margin-bottom: 1.5rem;
        }

        .feature-list li {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 0.86rem;
        color: var(--ink-55);
        font-weight: 400;
        }

        .check-mark {
        width: 17px;
        height: 17px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        }

        .check-mark--ink {
        background: rgba(0,38,72,0.08);
        }

        .check-mark--gold {
        background: rgba(201,168,76,0.15);
        }

        .check-mark svg {
        width: 9px;
        height: 9px;
        stroke-width: 3;
        fill: none;
        }

        .check-mark--ink svg {
        stroke: var(--ink);
        }

        .check-mark--gold svg {
        stroke: var(--gold);
        }

        /* =============================================================
        VIDEO TUTORIAL SECTION
        ============================================================= */
        .video-section {
        background: var(--ink);
        position: relative;
        overflow: hidden;
        padding: 6.5rem 0;
        }

        .video-section-grid {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(201,168,76,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(201,168,76,0.025) 1px, transparent 1px);
        background-size: 60px 60px;
        pointer-events: none;
        }

        .video-section-glow {
        position: absolute;
        left: -180px;
        top: 50%;
        transform: translateY(-50%);
        width: 580px;
        height: 580px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(201,168,76,0.065) 0%, transparent 65%);
        pointer-events: none;
        }

        .video-layout {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr;
        gap: 3.5rem;
        align-items: start;
        }

        @media (min-width: 900px) {
        .video-layout {
        grid-template-columns: 1fr 1fr;
        gap: 5.5rem;
        align-items: center;
        }
        }

        /* Left panel: info + chapters */
        .video-info {
        order: 2;
        }

        @media (min-width: 900px) {
        .video-info {
        order: 1;
        }
        }

        .video-player-col {
        order: 1;
        }

        @media (min-width: 900px) {
        .video-player-col {
        order: 2;
        }
        }

        /* Chapter list */
        .chapter-list {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 2rem;
        }

        .chapter-item {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        padding: 0.75rem 0.95rem;
        border: 1px solid rgba(255,255,255,0.055);
        border-radius: var(--radius);
        cursor: pointer;
        transition: background 0.18s, border-color 0.18s;
        background: transparent;
        text-align: left;
        width: 100%;
        font-family: var(--ff-body);
        }

        .chapter-item:hover {
        background: rgba(255,255,255,0.045);
        border-color: rgba(201,168,76,0.28);
        }

        .chapter-item.active {
        background: rgba(255,255,255,0.045);
        border-color: var(--gold);
        border-left-width: 3px;
        padding-left: calc(0.95rem - 2px);
        }

        .chapter-num {
        font-family: var(--ff-display);
        font-size: 1rem;
        font-weight: 700;
        color: rgba(255,255,255,0.18);
        width: 26px;
        flex-shrink: 0;
        line-height: 1;
        }

        .chapter-item.active .chapter-num {
        color: var(--gold);
        }

        .chapter-text {
        flex: 1;
        min-width: 0;
        }

        .chapter-title {
        font-size: 0.82rem;
        font-weight: 500;
        color: rgba(255,255,255,0.48);
        }

        .chapter-item.active .chapter-title {
        color: var(--white);
        }

        .chapter-dur {
        font-size: 0.7rem;
        color: rgba(255,255,255,0.28);
        margin-top: 0.1rem;
        }

        .chapter-arrow {
        width: 18px;
        height: 18px;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        opacity: 0;
        transition: opacity 0.18s;
        }

        .chapter-item:hover .chapter-arrow, .chapter-item.active .chapter-arrow {
        opacity: 1;
        border-color: var(--gold);
        }

        .chapter-arrow svg {
        width: 8px;
        height: 8px;
        stroke: var(--gold);
        fill: none;
        }

        /* Source controls */
        .source-controls {
        margin-top: 1.75rem;
        }

        .source-label {
        font-size: 0.67rem;
        text-transform: uppercase;
        letter-spacing: 0.13em;
        font-weight: 600;
        color: rgba(255,255,255,0.28);
        margin-bottom: 0.7rem;
        display: block;
        }

        .source-toggle {
        display: flex;
        background: rgba(0,0,0,0.35);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 100px;
        overflow: hidden;
        width: fit-content;
        }

        .source-btn {
        padding: 0.42rem 1.1rem;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.32);
        background: transparent;
        border: none;
        cursor: pointer;
        transition: all 0.18s;
        font-family: var(--ff-body);
        }

        .source-btn.active {
        background: var(--gold);
        color: var(--ink);
        border-radius: 100px;
        }

        .source-btn:hover:not(.active) {
        color: rgba(255,255,255,0.65);
        }

        /* YouTube input */
        .youtube-input-row {
        display: none;
        margin-top: 1rem;
        gap: 0.5rem;
        align-items: center;
        }

        .youtube-input-row.visible {
        display: flex;
        }

        .youtube-url-input {
        flex: 1;
        min-width: 0;
        background: rgba(255,255,255,0.055);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: var(--radius);
        padding: 0.6rem 1rem;
        font-size: 0.82rem;
        color: var(--white);
        font-family: var(--ff-body);
        transition: border-color 0.18s;
        }

        .youtube-url-input::placeholder {
        color: rgba(255,255,255,0.22);
        }

        .youtube-url-input:focus {
        outline: none;
        border-color: rgba(201,168,76,0.45);
        }

        /* Upload zone */
        .upload-zone {
        display: none;
        border: 2px dashed rgba(201,168,76,0.28);
        border-radius: var(--radius-lg);
        padding: 2.25rem 1.5rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        background: rgba(255,255,255,0.018);
        margin-top: 1rem;
        }

        .upload-zone.visible {
        display: block;
        }

        .upload-zone:hover, .upload-zone.dragover {
        border-color: var(--gold);
        background: rgba(201,168,76,0.05);
        }

        .upload-zone-icon {
        width: 44px;
        height: 44px;
        background: var(--gold-glow);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 0.875rem;
        }

        .upload-zone-icon svg {
        width: 20px;
        height: 20px;
        stroke: var(--gold);
        fill: none;
        }

        .upload-zone-text {
        font-size: 0.82rem;
        color: rgba(255,255,255,0.42);
        font-weight: 300;
        line-height: 1.65;
        }

        .upload-zone-text strong {
        color: var(--gold-light);
        font-weight: 600;
        }

        #local-file-input {
        display: none;
        }

        /* Video player */
        .video-player-wrap {
        position: relative;
        }

        .video-player {
        position: relative;
        background: #000;
        border-radius: var(--radius-lg);
        overflow: hidden;
        aspect-ratio: 16 / 9;
        box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.055);
        }

        .video-player iframe,
        .video-player video {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
        }

        .video-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,38,72,0.65) 0%, transparent 50%);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: opacity 0.25s;
        }

        .video-overlay.hidden {
        opacity: 0;
        pointer-events: none;
        }

        .play-button-big {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: rgba(255,255,255,0.10);
        border: 2px solid rgba(255,255,255,0.28);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.22s;
        backdrop-filter: blur(8px);
        }

        .play-button-big:hover {
        background: var(--gold);
        border-color: var(--gold);
        transform: scale(1.08);
        }

        .play-button-big:hover svg {
        stroke: var(--ink);
        }

        .play-button-big svg {
        width: 25px;
        height: 25px;
        stroke: var(--white);
        margin-left: 4px;
        fill: none;
        }

        .video-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1.1rem 1.375rem 1.375rem;
        pointer-events: none;
        }

        .video-caption-title {
        font-size: 0.87rem;
        font-weight: 500;
        color: rgba(255,255,255,0.78);
        }

        .video-caption-dur {
        font-size: 0.71rem;
        color: rgba(255,255,255,0.4);
        margin-top: 0.1rem;
        }

        .video-player-glow-border {
        position: absolute;
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border: 1px solid rgba(201,168,76,0.10);
        border-radius: calc(var(--radius-lg) + 4px);
        pointer-events: none;
        z-index: -1;
        }

        /* =============================================================
        FEATURES SECTION
        ============================================================= */
        .features-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1px;
        background: rgba(255,255,255,0.05);
        border-radius: var(--radius-lg);
        overflow: hidden;
        }

        @media (min-width: 560px) {
        .features-grid {
        grid-template-columns: 1fr 1fr;
        }
        }

        @media (min-width: 900px) {
        .features-grid {
        grid-template-columns: repeat(3, 1fr);
        }
        }

        .feature-tile {
        background: var(--ink);
        padding: 2.25rem 1.875rem 2rem;
        position: relative;
        overflow: hidden;
        transition: background 0.22s;
        }

        .feature-tile:hover {
        background: rgba(255,255,255,0.03);
        }

        .feature-tile::after {
        content: '';
        position: absolute;
        top: 0;
        left: 1.875rem;
        right: 1.875rem;
        height: 2px;
        background: var(--gold);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
        }

        .feature-tile:hover::after {
        transform: scaleX(1);
        }

        .feature-number {
        font-family: var(--ff-display);
        font-size: 3rem;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 1.1rem;
        color: white;
        }

        .feature-icon {
        width: 42px;
        height: 42px;
        background: rgba(201,168,76,0.09);
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        }

        .feature-icon svg {
        width: 20px;
        height: 20px;
        stroke: var(--gold);
        fill: none;
        }

        .feature-name {
        font-size: 0.97rem;
        font-weight: 600;
        color: var(--white);
        margin-bottom: 0.5rem;
        }

        .feature-desc {
        font-size: 0.8rem;
        color: rgba(255,255,255,0.38);
        line-height: 1.75;
        font-weight: 300;
        }

        /* =============================================================
        INSTITUTIONAL QUOTE
        ============================================================= */
        .quote-block {
        display: flex;
        align-items: flex-start;
        gap: 2rem;
        max-width: 960px;
        margin: 0 auto;
        }

        .quote-mark {
        font-family: var(--ff-display);
        font-size: 6rem;
        line-height: 0.7;
        color: var(--gold);
        opacity: 0.28;
        flex-shrink: 0;
        margin-top: 1.5rem;
        display: none;
        }

        @media (min-width: 600px) {
        .quote-mark {
        display: block;
        }
        }

        .quote-text {
        font-family: var(--ff-display);
        font-size: clamp(1.2rem, 2vw, 1.55rem);
        color: var(--ink);
        line-height: 1.58;
        flex: 1;
        }

        .quote-attribution {
        font-family: var(--ff-body);
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--ink-55);
        margin-top: 1.1rem;
        display: flex;
        align-items: center;
        gap: 0.7rem;
        }

        .quote-attribution::before {
        content: '';
        display: block;
        width: 24px;
        height: 1.5px;
        background: var(--gold);
        }

        .quote-logos {
        display: none;
        flex-direction: column;
        gap: 0.875rem;
        flex-shrink: 0;
        padding-top: 0.5rem;
        }

        @media (min-width: 768px) {
        .quote-logos {
        display: flex;
        }
        }

        .quote-logo-item {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--ink);
        opacity: 0.48;
        white-space: nowrap;
        }

        .quote-logo-item svg {
        width: 14px;
        height: 14px;
        stroke: var(--ink);
        fill: none;
        opacity: 0.65;
        }

        /* =============================================================
        PROCESS STEPS
        ============================================================= */
        .process-steps {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.25rem;
        max-width: 960px;
        margin: 0 auto;
        position: relative;
        }

        @media (min-width: 700px) {
        .process-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        }
        }

        .process-connector {
        display: none;
        position: absolute;
        top: 41px;
        left: 12.5%;
        right: 12.5%;
        height: 1px;
        background: repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 5px, transparent 5px, transparent 13px);
        opacity: 0.3;
        }

        @media (min-width: 700px) {
        .process-connector {
        display: block;
        }
        }

        .process-step {
        text-align: center;
        padding: 0 0.875rem;
        }

        .process-bubble {
        width: 68px;
        height: 68px;
        margin: 0 auto 1.375rem;
        border-radius: 50%;
        background: var(--white);
        border: 1.5px solid var(--border);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.08rem;
        box-shadow: var(--shadow);
        position: relative;
        z-index: 2;
        transition: border-color 0.22s, box-shadow 0.22s;
        }

        .process-step:hover .process-bubble {
        border-color: var(--gold);
        box-shadow: 0 0 0 6px var(--gold-glow);
        }

        .process-step-num {
        font-family: var(--ff-display);
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--ink);
        line-height: 1;
        }

        .process-step-icon {
        width: 16px;
        height: 16px;
        stroke: var(--gold);
        stroke-width: 2;
        fill: none;
        }

        .process-step-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 0.4rem;
        }

        .process-step-desc {
        font-size: 0.77rem;
        color: var(--ink-55);
        line-height: 1.65;
        font-weight: 300;
        }

        /* =============================================================
        CTA BANNER
        ============================================================= */
        .cta-banner {
        background: var(--ink);
        position: relative;
        overflow: hidden;
        padding: 6.5rem 0;
        }

        .cta-banner-glow {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 65% 80% at 75% 50%, rgba(201,168,76,0.065) 0%, transparent 60%);
        pointer-events: none;
        }

        .cta-banner-inner {
        position: relative;
        z-index: 2;
        max-width: 660px;
        margin: 0 auto;
        text-align: center;
        }

        .cta-seal {
        width: 72px;
        height: 72px;
        margin: 0 auto 2.25rem;
        border-radius: 50%;
        background: rgba(201,168,76,0.08);
        border: 1.5px solid rgba(201,168,76,0.22);
        display: flex;
        align-items: center;
        justify-content: center;
        }

        .cta-seal svg {
        width: 28px;
        height: 28px;
        stroke: var(--gold);
        fill: none;
        }

        .cta-title {
        font-family: var(--ff-display);
        font-size: clamp(1.875rem, 3.5vw, 2.875rem);
        font-weight: 700;
        color: var(--white);
        line-height: 1.2;
        margin-bottom: 1rem;
        }

        .cta-lead {
        font-size: 0.975rem;
        font-weight: 300;
        color: rgba(255,255,255,0.42);
        margin-bottom: 2.25rem;
        line-height: 1.8;
        }

        .cta-btn-group {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
        }

        /* =============================================================
                        FOOTER
                        ============================================================= */
        .footer {
            background: #040D1A;
            color: rgba(255,255,255,0.4);
        }

        .footer-main {
            padding: 4.5rem 0 3.5rem;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2.5rem;
        }

        @media (min-width: 600px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 2.5rem;
            }
        }

        @media (min-width: 900px) {
            .footer-grid {
                grid-template-columns: 2fr 1fr 1fr 1fr;
                gap: 3.5rem;
            }
        }

        .footer-brand-logo {
            display: flex;
            align-items: center;
            gap: 0.875rem;
            margin-bottom: 1.2rem;
            text-decoration: none;
        }

        .footer-crest {
            width: 40px;
            height: 40px;
            background: rgba(0,38,72,0.7);
            border: 1px solid rgba(201,168,76,0.18);
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .footer-crest-letter {
            font-family: var(--ff-display);
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--gold);
        }

        .footer-brand-name {
            font-family: var(--ff-display);
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--white);
        }

        .footer-brand-desc {
            font-size: 0.8rem;
            line-height: 1.75;
            color: rgba(255,255,255,0.32);
            margin-bottom: 1.5rem;
            font-weight: 300;
            max-width: 275px;
        }

        .footer-contact-link, .footer-contact-text {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            font-size: 0.78rem;
            margin-bottom: 0.55rem;
            color: rgba(255,255,255,0.32);
            text-decoration: none;
            transition: color 0.18s;
        }

            .footer-contact-link:hover {
                color: var(--gold-light);
            }

            .footer-contact-link svg, .footer-contact-text svg {
                width: 12px;
                height: 12px;
                stroke: var(--gold);
                opacity: 0.55;
                flex-shrink: 0;
                fill: none;
            }

        .footer-col-heading {
            font-size: 0.63rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.16em;
            color: var(--gold);
            margin-bottom: 1.2rem;
        }

        .footer-links {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
        }

            .footer-links a {
                font-size: 0.8rem;
                color: rgba(255,255,255,0.32);
                text-decoration: none;
                transition: color 0.18s;
            }

                .footer-links a:hover {
                    color: var(--white);
                }

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.05);
            padding: 1.375rem 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.875rem;
            font-size: 0.74rem;
            text-align: center;
        }

        @media (min-width: 640px) {
            .footer-bottom {
                flex-direction: row;
                justify-content: center;
                text-align: center;
            }
        }

        .footer-bottom-links {
            display: flex;
            gap: 1.5rem;
        }

        .footer-bottom a {
            color: rgba(255,255,255,0.28);
            text-decoration: none;
            transition: color 0.18s;
        }

            .footer-bottom a:hover {
                color: var(--gold-light);
            }
        /* Footer bottom strip */
        .site-footer__bottom {
            border-top: 1px solid #334155;
        }

        .site-footer__giz {
            max-width: 1200px;
            margin: 0 auto;
            padding: 24px;
            display: flex;
            align-items: flex-start;
            gap: 20px;
        }

            .site-footer__giz img {
                height: 40px;
                flex-shrink: 0;
                /*                 filter: brightness(0) invert(.8);
                         */
            }

            .site-footer__giz p {
                font-size: 11px;
                color: #64748b;
                line-height: 1.6;
                margin: 0;
            }

        .site-footer__copy {
            border-top: 1px solid #334155;
        }

        .site-footer__copy-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #64748b;
        }

        .site-footer__copy-logo {
            display: flex;
            align-items: center;
            gap: 8px;
        }

            .site-footer__copy-logo img {
                height: 24px;
                /* filter: brightness(0) invert(.7); */
            }

        /* ── Responsive ── */
        @media (max-width: 1024px) {
            .site-footer__top {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            .site-nav {
                display: none;
            }

            .hamburger {
                display: block;
            }

            .site-main {
                padding: 0 16px;
            }

            .site-footer__top {
                grid-template-columns: 1fr 1fr;
                gap: 24px;
                padding: 32px 16px 24px;
            }

            .footer-brand {
                grid-column: 1 / -1;
            }

            .site-footer__giz {
                flex-direction: column;
            }

            .site-footer__copy-inner {
                flex-direction: column;
                gap: 8px;
                text-align: center;
            }
            /* Hide lang/user dropdowns from header on mobile — they live in the mobile nav */
            .lang-dropdown,
            .user-dropdown,
            .globe-btn,
            .signin-btn {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .site-header__inner {
                padding: 0 16px;
            }

            .site-footer__top {
                grid-template-columns: 1fr;
            }
        }
        /* =============================================================
        SCROLL REVEAL ANIMATIONS
        ============================================================= */
        .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
        }

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

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

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

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

        .reveal-delay-4 {
        transition-delay: 0.32s;
        }

        /* =============================================================
        RESPONSIVE HELPERS
        ============================================================= */
        @media (max-width: 639px) {
        .section {
        padding: 4rem 0;
        }

        .section--lg {
        padding: 5rem 0;
        }

        .hero-body {
        padding: 2.5rem 0 4rem;
        }

        .video-section {
        padding: 5rem 0;
        }

        .cta-banner {
        padding: 5rem 0;
        }
        }

        /* =============================================================
        JOBS SECTION (public teaser + full list)
        Uses the page tokens only (--ink / --gold / --border / --radius)
        so it reads as part of the same design, not a bolted-on widget.
        ============================================================= */

        /* Toolbar. On a phone it is one search row plus a pair of buttons —
        location and job type fold into #jobsAdvanced behind the "Filtrat"
        trigger, because five stacked fields ate most of a small screen
        before the first job card. From 780px everything sits on one line:
        the panel becomes display:contents so its two fields join the
        toolbar's own grid, and the trigger disappears. */
        .jobs-toolbar {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-bottom: 1.25rem;
        padding: 0.875rem;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: 0 2px 10px rgba(0,38,72,0.05);
        }

        .jobs-toolbar__advanced {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.6rem;
        }

        .jobs-toolbar__advanced[hidden] {
        display: none;
        }

        /* Buttons carry display:inline-flex, which outranks the browser's
        [hidden] rule, so the trigger needs this to stay out of sight until
        the script reveals it. */
        .jobs-toolbar .btn[hidden] {
        display: none;
        }

        .jobs-field {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        min-width: 0;
        }

        .jobs-field label {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--ink-55);
        }

        /* Search field — icon inside the input, no visible label, so the row
        costs 40px instead of 62px. */
        .jobs-search {
        position: relative;
        display: block;
        }

        .jobs-search svg {
        position: absolute;
        top: 50%;
        left: 0.75rem;
        width: 16px;
        height: 16px;
        margin-top: -8px;
        color: var(--ink-55);
        pointer-events: none;
        }

        .jobs-search .jobs-input {
        padding-left: 2.25rem;
        }

        .jobs-input,
        .jobs-select {
        width: 100%;
        height: 40px;
        padding: 0 0.75rem;
        font-family: var(--ff-body);
        font-size: 0.875rem;
        color: var(--ink);
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        transition: border-color 0.2s, box-shadow 0.2s;
        }

        .jobs-select {
        padding-right: 2.25rem;
        cursor: pointer;
        }

        .jobs-input::placeholder {
        color: var(--ink-55);
        }

        .jobs-input:focus,
        .jobs-select:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px var(--gold-glow);
        }

        .jobs-toolbar-actions {
        display: flex;
        gap: 0.5rem;
        }

        .jobs-toolbar-actions .btn {
        height: 40px;
        flex: 1;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
        font-size: 0.82rem;
        }

        .jobs-toggle-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--ink);
        color: var(--white);
        font-size: 0.68rem;
        font-weight: 700;
        }

        @media (min-width: 780px) {
        .jobs-toolbar {
        display: grid;
        grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;
        align-items: end;
        gap: 0.75rem;
        }

        /* The panel stops being a box of its own and hands its two fields
        straight to the grid above — open or closed, since the trigger it
        belongs to is gone at this width. */
        .jobs-toolbar__advanced,
        .jobs-toolbar__advanced[hidden] {
        display: contents;
        }

        .jobs-toolbar .jobs-toggle {
        display: none;
        }

        .jobs-toolbar-actions .btn {
        flex: 0 0 auto;
        }
        }

        /* Accessible-name-only label, for the fields where a visible caption
        would cost a row without telling the visitor anything the
        placeholder doesn't. Same utility Home/Index uses. */
        .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;
        }

        /* Active-measure chips — the quick filter the signed-in jobs list
        carries, wearing the public palette. Each chip is a link, so the
        whole pill is the target and no script is involved.

        They wrap at every width rather than scrolling sideways: a scroller
        hides the measures a visitor never thinks to swipe for, and these are
        the filters most worth noticing. Small type and tight rows keep the
        full set cheap even on a phone. */
        .measure-chips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem;
        margin: 0 0 1.5rem;
        }

        @media (min-width: 780px) {
        .measure-chips {
        gap: 0.45rem;
        }
        }

        .measure-chip {
        display: inline-block;
        max-width: 100%;
        height: 30px;
        padding: 0 0.75rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--white);
        color: var(--ink-80);
        font-size: 0.72rem;
        font-weight: 600;
        /* Centres the label without flexbox, so the ellipsis guard below
        works on the pill itself when a measure name is longer than the
        row it lands on. */
        line-height: 28px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
        box-shadow: 0 1px 2px rgba(0,38,72,0.05);
        transition: all 0.22s;
        }

        @media (min-width: 780px) {
        .measure-chip {
        height: 32px;
        padding: 0 0.85rem;
        font-size: 0.75rem;
        line-height: 30px;
        }
        }

        .measure-chip:hover {
        border-color: var(--border-gold);
        color: var(--ink);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px -4px rgba(0,38,72,0.2);
        }

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

        .measure-chip.is-active {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--white);
        box-shadow: 0 6px 16px -6px rgba(0,38,72,0.55);
        }

        /* The chips and the note about the selected one move together, so the
        1.5rem that used to sit under the chip row now sits under the pair —
        otherwise the note would land a full row away from the chip it
        explains. */
        .measure-filter-block {
        margin: 0 0 1.5rem;
        }

        .measure-filter-block .measure-chips {
        margin-bottom: 0;
        }

        /* Description of the measure currently filtering the list. Chips only
        have room for the name, and the names alone don't say who a measure is
        for, so the text is spelled out once under the row instead of hidden in
        a tooltip no touch device can open. */
        .measure-note {
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        margin-top: 0.7rem;
        padding: 0.75rem 0.9rem;
        border: 1px solid var(--border-gold);
        border-radius: var(--radius);
        background: var(--gold-pale);
        color: var(--ink-80);
        }

        .measure-note svg {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        margin-top: 0.1rem;
        color: var(--gold);
        }

        .measure-note__title {
        margin: 0;
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--ink);
        }

        .measure-note__text {
        margin: 0.2rem 0 0;
        font-size: 0.8rem;
        line-height: 1.55;
        }

        /* TomSelect skin for the filter toolbar. The library's own stylesheet
        gives the mechanics; these rules make its control look like the
        .jobs-input next to it, the same way components.css dresses the
        TomSelect on the signed-in jobs list. */
        /* TomSelect copies the original select's class list onto the wrapper
        it builds, so .jobs-select ends up painting a second box around the
        real control. Strip it back to a bare positioning box and let
        .ts-control below be the only field the visitor sees. */
        .jobs-toolbar .ts-wrapper {
        display: block;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        cursor: default;
        }

        .jobs-toolbar .ts-control {
        min-height: 40px;
        padding: 0 0.75rem;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.25rem;
        font-family: var(--ff-body);
        font-size: 0.875rem;
        color: var(--ink);
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: none;
        transition: border-color 0.2s, box-shadow 0.2s;
        }

        .jobs-toolbar .ts-wrapper.single .ts-control {
        /* --ts-pr-min feeds the library's !important padding-right. */
        --ts-pr-min: 2.25rem;
        overflow: hidden;
        }

        .jobs-toolbar .ts-wrapper.single .ts-control > .item {
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        }

        /* This build of tom-select.css draws no caret of its own, so the
        control would read as a text box. Draw one, and reserve room for it
        through --ts-pr-min: the library sets padding-right with !important
        from that variable, so it can't be overridden directly. */
        .jobs-toolbar .ts-wrapper.single .ts-control::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 1rem;
        width: 7px;
        height: 7px;
        margin-top: -5px;
        border-right: 2px solid var(--ink-55);
        border-bottom: 2px solid var(--ink-55);
        transform: rotate(45deg);
        pointer-events: none;
        transition: transform 0.2s, margin-top 0.2s;
        }

        .jobs-toolbar .ts-wrapper.single.dropdown-active .ts-control::after {
        margin-top: -1px;
        transform: rotate(-135deg);
        }

        .jobs-toolbar .ts-wrapper.focus .ts-control {
        border-color: var(--gold);
        box-shadow: 0 0 0 3px var(--gold-glow);
        }

        .jobs-toolbar .ts-control input {
        font-family: var(--ff-body);
        font-size: 0.9rem;
        color: var(--ink);
        }

        .jobs-toolbar .ts-control input::placeholder {
        color: var(--ink-55);
        }

        .jobs-toolbar .ts-dropdown {
        margin-top: 0.35rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--white);
        box-shadow: var(--shadow-lg);
        font-family: var(--ff-body);
        font-size: 0.88rem;
        color: var(--ink);
        overflow: hidden;
        z-index: 30;
        }

        .jobs-toolbar .ts-dropdown .dropdown-input-wrap {
        padding: 0.5rem;
        border-bottom: 1px solid var(--border);
        }

        .jobs-toolbar .ts-dropdown .dropdown-input {
        width: 100%;
        height: 36px;
        padding: 0 0.7rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--white);
        font-family: var(--ff-body);
        font-size: 0.85rem;
        color: var(--ink);
        }

        .jobs-toolbar .ts-dropdown .dropdown-input:focus {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px var(--gold-glow);
        }

        .jobs-toolbar .ts-dropdown .option {
        padding: 0.5rem 0.75rem;
        }

        .jobs-toolbar .ts-dropdown .active {
        background: var(--gold-pale);
        color: var(--ink);
        }

        .jobs-toolbar .ts-dropdown .selected {
        font-weight: 600;
        }

        .jobs-toolbar .ts-dropdown .no-results {
        padding: 0.6rem 0.75rem;
        color: var(--ink-55);
        }
        /* Grid of cards */
        .jobs-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.125rem;
        }

        @media (min-width: 640px) {
        .jobs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        }

        @media (min-width: 1024px) {
        .jobs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        }

        /* Card — same anatomy as the cards on Home/Index: header strip with
        the employer and a days-remaining pill, body of labelled meta rows,
        footer with a single full-width action. Colours come from the page
        that hosts it — the structural rules live here, the palette comes
        from the .jobs-list-page skin below, which both public job lists
        (the landing teaser and Home/PublicJobs) wear. */
        .job-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
        }

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

        .job-card-head {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        border-bottom: 1px solid var(--border);
        }

        .job-card-logo {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        border-radius: 0.5rem;
        object-fit: cover;
        border: 1px solid var(--border);
        background: var(--cream);
        }

        .job-card-headings {
        min-width: 0;
        flex: 1;
        }

        .job-card-company {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--ink);
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        }

        .job-card-company:hover {
        text-decoration: underline;
        }

        .job-card-posted {
        display: block;
        margin-top: 0.125rem;
        font-size: 0.75rem;
        color: var(--ink-55);
        }

        /* Days-remaining pill — the urgency ladder from the signed-in list */
        .job-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        flex-shrink: 0;
        padding: 0.25rem 0.75rem;
        border: 1px solid transparent;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.25;
        white-space: nowrap;
        }

        .job-pill--neutral {
        background: rgba(0, 38, 72, 0.06);
        border-color: rgba(0, 38, 72, 0.12);
        color: var(--ink-80);
        }

        .job-pill--info {
        background: rgba(37, 99, 235, 0.1);
        border-color: rgba(37, 99, 235, 0.28);
        color: #1D4ED8;
        }

        .job-pill--pending {
        background: rgba(201, 168, 76, 0.18);
        border-color: rgba(201, 168, 76, 0.4);
        color: #7A6420;
        }

        .job-pill--error {
        background: rgba(154, 44, 44, 0.1);
        border-color: rgba(154, 44, 44, 0.28);
        color: #9A2C2C;
        }

        .job-card-body {
        padding: 1rem;
        }

        .job-card-meta {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        list-style: none;
        }

        .job-card-meta li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        color: var(--ink-80);
        }

        .job-card-meta svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        color: var(--gold);
        }

        .job-card-meta span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        }

        .job-card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.75rem;
        }

        .job-tag {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        background: var(--gold-pale);
        color: #7A6420;
        border: 1px solid var(--border-gold);
        }

        .job-tag--muted {
        background: rgba(0, 38, 72, 0.06);
        border-color: transparent;
        color: var(--ink-55);
        }

        /* Job title sits under the meta, behind a hairline — same placement
        the signed-in card uses. */
        .job-card-title {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border);
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.45;
        color: var(--ink);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        }

        .job-card-foot {
        display: flex;
        margin-top: auto;
        padding: 0.75rem;
        border-top: 1px solid var(--border);
        }

        .job-card-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        flex: 1;
        height: 36px;
        border-radius: var(--radius);
        font-family: var(--ff-body);
        font-size: 0.82rem;
        font-weight: 600;
        text-decoration: none;
        background: var(--ink);
        color: var(--white);
        transition: background 0.22s, color 0.22s;
        }

        .job-card-cta:hover {
        background: #001B34;
        color: var(--white);
        }

        /* Empty state + footer actions */
        .jobs-empty {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        padding: 3.5rem 1rem;
        text-align: center;
        color: var(--ink-55);
        background: var(--white);
        border: 1px dashed var(--border);
        border-radius: var(--radius-lg);
        }

        .jobs-empty svg {
        width: 34px;
        height: 34px;
        color: var(--gold);
        }

        .jobs-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
        margin-top: 2.5rem;
        }

        .jobs-count {
        font-size: 0.82rem;
        color: var(--ink-55);
        }

        /* Pager for Home/PublicJobs. Plain links, one per page, so the list
        pages without any script. */
        .jobs-pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        margin-top: 2.5rem;
        }

        .jobs-page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 0.7rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--white);
        color: var(--ink-80);
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.22s;
        }

        .jobs-page-link:hover {
        border-color: var(--border-gold);
        color: var(--ink);
        box-shadow: 0 4px 12px -4px rgba(0,38,72,0.18);
        }

        .jobs-page-link.is-active {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--white);
        }

        /* =============================================================
        PUBLIC JOB LISTS (the Home/Landing teaser + Home/PublicJobs)

        Same reasoning as the details page: these are the signed-out twin of
        Home/Index, so they wear that page's colours — the daisyUI "kosovo"
        tokens plus the slate greys its Tailwind markup uses — rather than
        the gold/ink of the marketing pages around them. The structure above
        stays; only the palette is re-pointed, through the variables below.
        ============================================================= */
        .jobs-list-page {
        --jd-primary: oklch(36% 0.14 258);
        --jd-primary-content: oklch(99% 0.004 95);
        --jd-surface: oklch(99% 0.004 95);
        --jd-line: oklch(91% 0.008 95);
        --jd-content: oklch(22% 0.025 250);
        --jd-page: #f1f5f9;
        --jd-heading: #1e293b;
        --jd-body: #475569;
        --jd-muted: #64748b;
        --jd-box-line: #e2e8f0;

        background: var(--jd-page);
        color: var(--jd-content);
        }

        /* Section header */
        .jobs-list-page .eyebrow {
        color: var(--jd-primary);
        }

        .jobs-list-page .eyebrow-line {
        background: var(--jd-primary);
        }

        .jobs-list-page .display-title {
        font-family: var(--ff-body);
        font-size: clamp(1.5rem, 3vw, 2rem);
        color: var(--jd-heading);
        }

        .jobs-list-page .section-lead {
        color: var(--jd-muted);
        }

        .jobs-list-page .ornament-line,
        .jobs-list-page .ornament-diamond {
        background: var(--jd-primary);
        }

        /* Toolbar */
        .jobs-list-page .jobs-toolbar {
        background: #fff;
        border-color: var(--jd-box-line);
        border-radius: 0.6rem;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.043);
        }

        .jobs-list-page .jobs-field label {
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--jd-body);
        }

        .jobs-list-page .jobs-search svg,
        .jobs-list-page .jobs-toggle-count {
        color: var(--jd-muted);
        }

        .jobs-list-page .jobs-toggle-count {
        background: var(--jd-primary);
        color: var(--jd-primary-content);
        }

        .jobs-list-page .jobs-input,
        .jobs-list-page .jobs-select,
        .jobs-list-page .ts-control,
        .jobs-list-page .ts-dropdown .dropdown-input {
        color: var(--jd-content);
        border-color: var(--jd-box-line);
        border-radius: 0.375rem;
        }

        .jobs-list-page .jobs-input:focus,
        .jobs-list-page .jobs-select:focus,
        .jobs-list-page .ts-wrapper.focus .ts-control,
        .jobs-list-page .ts-dropdown .dropdown-input:focus {
        border-color: color-mix(in oklab, var(--jd-primary) 40%, transparent);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--jd-primary) 20%, transparent);
        }

        .jobs-list-page .ts-wrapper.single .ts-control::after {
        border-right-color: var(--jd-muted);
        border-bottom-color: var(--jd-muted);
        }

        .jobs-list-page .ts-dropdown {
        border-color: var(--jd-box-line);
        border-radius: 0.375rem;
        }

        .jobs-list-page .ts-dropdown .active {
        background: color-mix(in oklab, var(--jd-primary) 10%, transparent);
        color: var(--jd-primary);
        }

        .jobs-list-page .jobs-toolbar .btn--ink {
        background: var(--jd-primary);
        color: var(--jd-primary-content);
        border-radius: 0.375rem;
        }

        .jobs-list-page .jobs-toolbar .btn--ink:hover {
        background: color-mix(in oklab, var(--jd-primary) 88%, black);
        }

        .jobs-list-page .jobs-toolbar .btn--outline-ink {
        color: var(--jd-primary);
        border-color: color-mix(in oklab, var(--jd-primary) 35%, transparent);
        border-radius: 0.375rem;
        }

        .jobs-list-page .jobs-toolbar .btn--outline-ink:hover {
        background: color-mix(in oklab, var(--jd-primary) 8%, transparent);
        color: var(--jd-primary);
        }

        /* Measure chips */
        .jobs-list-page .measure-chip {
        border-color: var(--jd-box-line);
        color: var(--jd-body);
        border-radius: 0.5rem;
        }

        .jobs-list-page .measure-chip:hover {
        border-color: color-mix(in oklab, var(--jd-primary) 35%, transparent);
        color: var(--jd-primary);
        }

        .jobs-list-page .measure-chip.is-active {
        background: var(--jd-primary);
        border-color: var(--jd-primary);
        color: var(--jd-primary-content);
        box-shadow: none;
        }

        /* Cards — .simp-card surface, primary-tinted tags, primary CTA */
        .jobs-list-page .job-card {
        background: var(--jd-surface);
        border-color: var(--jd-line);
        border-radius: 1rem;
        box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 4px 12px -8px rgba(15, 23, 42, 0.08);
        }

        .jobs-list-page .job-card:hover {
        border-color: var(--jd-line);
        box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 10px 24px -12px rgba(15, 23, 42, 0.15);
        }

        .jobs-list-page .job-card-head,
        .jobs-list-page .job-card-title,
        .jobs-list-page .job-card-foot {
        border-color: var(--jd-line);
        }

        .jobs-list-page .job-card-logo {
        border-color: var(--jd-line);
        background: oklch(96.5% 0.006 95);
        }

        .jobs-list-page .job-card-company,
        .jobs-list-page .job-card-title {
        color: var(--jd-content);
        }

        .jobs-list-page .job-card-posted {
        color: var(--jd-muted);
        }

        .jobs-list-page .job-card-meta li {
        color: var(--jd-body);
        }

        .jobs-list-page .job-card-meta svg {
        color: var(--jd-muted);
        }

        .jobs-list-page .job-tag {
        background: color-mix(in oklab, var(--jd-primary) 10%, transparent);
        border-color: transparent;
        color: var(--jd-primary);
        font-weight: 500;
        }

        .jobs-list-page .job-tag--muted {
        background: #f1f5f9;
        color: var(--jd-muted);
        }

        .jobs-list-page .job-card-cta {
        background: var(--jd-primary);
        color: var(--jd-primary-content);
        border-radius: 0.5rem;
        }

        .jobs-list-page .job-card-cta:hover {
        background: color-mix(in oklab, var(--jd-primary) 88%, black);
        }

        /* Empty state, pager, counter */
        .jobs-list-page .jobs-empty {
        background: var(--jd-surface);
        border-color: var(--jd-box-line);
        color: var(--jd-muted);
        border-radius: 1rem;
        }

        .jobs-list-page .jobs-empty svg {
        color: var(--jd-muted);
        }

        .jobs-list-page .jobs-page-link {
        border-color: var(--jd-box-line);
        color: var(--jd-body);
        border-radius: 0.375rem;
        }

        .jobs-list-page .jobs-page-link:hover {
        border-color: color-mix(in oklab, var(--jd-primary) 35%, transparent);
        color: var(--jd-primary);
        box-shadow: none;
        }

        .jobs-list-page .jobs-page-link.is-active {
        background: var(--jd-primary);
        border-color: var(--jd-primary);
        color: var(--jd-primary-content);
        }

        .jobs-list-page .jobs-count {
        color: var(--jd-muted);
        }

        /* The landing teaser wears this skin too, so its "view all" button —
        the one gold call to action inside the section — follows the palette
        rather than staying the marketing gold. */
        .jobs-list-page .jobs-footer .btn--gold {
        background: var(--jd-primary);
        color: var(--jd-primary-content);
        }

        .jobs-list-page .jobs-footer .btn--gold:hover {
        background: color-mix(in oklab, var(--jd-primary) 88%, black);
        color: var(--jd-primary-content);
        }

        /* =============================================================
        JOB DETAILS PAGE (Home/PublicJobDetails)

        Deliberately NOT in the public gold/ink palette: this page is the
        signed-out twin of Jobs/JobDetails, so it borrows that page's
        colours verbatim — the daisyUI "kosovo" tokens from
        SIMPPortal/Styles/input.css plus the slate greys the Tailwind
        markup uses — and reproduces its .box / .simp-card / .simp-tabs /
        .simp-dl surfaces. A visitor should not see the posting change
        colour when they sign in. Keep the values below in sync with
        input.css if the theme is ever retuned.
        ============================================================= */
        .job-detail-page {
        /* kosovo theme tokens */
        --jd-primary: oklch(36% 0.14 258);
        --jd-primary-content: oklch(99% 0.004 95);
        --jd-warning: oklch(81% 0.14 92);
        --jd-surface: oklch(99% 0.004 95);
        --jd-line: oklch(91% 0.008 95);
        --jd-content: oklch(22% 0.025 250);
        /* slate greys used by the markup there */
        --jd-page: #f1f5f9;
        --jd-panel: #f8fafc;
        --jd-heading: #1e293b;
        --jd-body: #334155;
        --jd-muted: #64748b;
        --jd-faint: #94a3b8;
        --jd-box-line: #e2e8f0;

        background: var(--jd-page);
        color: var(--jd-content);
        font-family: var(--ff-body);
        }

        .job-detail-topbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.5rem;
        }

        .job-detail-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1rem;
        font-weight: 500;
        color: var(--jd-content);
        }

        .job-detail-eyebrow svg {
        width: 16px;
        height: 16px;
        color: var(--jd-primary);
        }

        /* Buttons — btn-primary / btn-ghost from the signed-in page */
        .job-detail-page .btn--jd-primary {
        background: var(--jd-primary);
        color: var(--jd-primary-content);
        border-radius: 0.5rem;
        }

        .job-detail-page .btn--jd-primary:hover {
        background: color-mix(in oklab, var(--jd-primary) 88%, black);
        color: var(--jd-primary-content);
        }

        .job-detail-page .btn--jd-ghost {
        background: transparent;
        color: var(--jd-content);
        border-radius: 0.5rem;
        }

        .job-detail-page .btn--jd-ghost:hover {
        background: rgba(15, 23, 42, 0.06);
        }

        .job-detail-page .btn--jd-outline {
        background: transparent;
        color: var(--jd-primary);
        border: 1px solid color-mix(in oklab, var(--jd-primary) 35%, transparent);
        border-radius: 0.5rem;
        }

        .job-detail-page .btn--jd-outline:hover {
        background: color-mix(in oklab, var(--jd-primary) 8%, transparent);
        color: var(--jd-primary);
        }

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

        .job-cta-secondary {
        display: flex;
        margin-top: 0.6rem;
        }

        /* Layout — lg:flex-[2] / lg:flex-[1] with the sticky rail */
        .job-detail-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        align-items: start;
        }

        @media (min-width: 1024px) {
        .job-detail-layout {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        }

        .job-detail-rail {
        position: sticky;
        top: 1.5rem;
        }
        }

        .job-detail-main {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        min-width: 0;
        }

        .job-detail-rail {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        min-width: 0;
        }

        /* .simp-card — the surface most of this page's cards use */
        .job-detail-card {
        background: var(--jd-surface);
        border: 1px solid var(--jd-line);
        border-radius: 1rem;
        box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 4px 12px -8px rgba(15, 23, 42, 0.08);
        }

        /* .box — the header card and the apply card use this one */
        .job-detail-card--box {
        background: #fff;
        border: 1px solid var(--jd-box-line);
        border-radius: 0.6rem;
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.043);
        }

        .job-detail-card--pad {
        padding: 1.5rem;
        }

        .job-detail-card--pad-sm {
        padding: 1.25rem;
        }

        /* Header card */
        .job-detail-head {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        }

        @media (min-width: 640px) {
        .job-detail-head {
        flex-direction: row;
        align-items: flex-start;
        }
        }

        .job-detail-logo {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        border-radius: 1rem;
        object-fit: cover;
        border: 1px solid var(--jd-box-line);
        background: #fff;
        }

        @media (min-width: 640px) {
        .job-detail-logo {
        width: 96px;
        height: 96px;
        }
        }

        .job-detail-title {
        font-family: var(--ff-body);
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.25;
        color: var(--jd-heading);
        }

        @media (min-width: 768px) {
        .job-detail-title {
        font-size: 1.875rem;
        }
        }

        .job-detail-company {
        margin-top: 0.25rem;
        font-size: 1rem;
        font-weight: 500;
        color: #475569;
        }

        .job-detail-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        margin-top: 0.75rem;
        }

        .job-detail-chips span {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.875rem;
        color: var(--jd-muted);
        }

        .job-detail-chips svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        }

        .job-detail-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 1rem;
        }

        /* Pills — bg-primary/10 text-primary, as the fields and skills
        render on the signed-in page. */
        .job-detail-page .job-tag {
        padding: 0.25rem 0.75rem;
        border: 0;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0;
        background: color-mix(in oklab, var(--jd-primary) 10%, transparent);
        color: var(--jd-primary);
        }

        .job-detail-heading {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-family: var(--ff-body);
        font-size: 1rem;
        font-weight: 600;
        color: var(--jd-content);
        margin-bottom: 0.75rem;
        }

        .job-detail-heading svg {
        width: 16px;
        height: 16px;
        color: var(--jd-primary);
        }

        /* Active measure — label + tinted panel, same as there */
        .job-measure-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--jd-body);
        margin-bottom: 0.5rem;
        }

        .job-measure-panel {
        padding: 1rem;
        background: var(--jd-panel);
        border-radius: 0.5rem;
        font-size: 0.875rem;
        line-height: 1.65;
        color: var(--jd-body);
        white-space: pre-line;
        overflow-wrap: break-word;
        }

        .job-measure-panel + .job-measure-label {
        margin-top: 1rem;
        }

        /* .simp-tabs */
        .job-tabs {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        border-bottom: 1px solid var(--jd-line);
        scrollbar-width: thin;
        }

        .job-tabs__tab {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.75rem 1.25rem;
        font-family: var(--ff-body);
        font-size: 0.875rem;
        font-weight: 600;
        color: color-mix(in oklab, var(--jd-content) 70%, transparent);
        background: none;
        border: 0;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        transition: color 140ms ease, border-color 140ms ease;
        }

        .job-tabs__tab svg {
        width: 16px;
        height: 16px;
        }

        .job-tabs__tab:hover {
        color: var(--jd-content);
        }

        .job-tabs__tab[aria-selected="true"] {
        color: var(--jd-primary);
        border-bottom-color: var(--jd-primary);
        }

        .job-tabs__panels {
        padding: 1.5rem;
        }

        .job-tabs__panel[hidden] {
        display: none;
        }

        .job-detail-rich {
        font-size: 0.9375rem;
        line-height: 1.7;
        color: var(--jd-body);
        overflow-wrap: break-word;
        }

        .job-detail-rich ul,
        .job-detail-rich ol {
        padding-left: 1.25rem;
        }

        .job-detail-rich p + p {
        margin-top: 0.6rem;
        }

        /* Company description / requirements / accountability are plain text
        with line breaks, the way Jobs/JobDetails renders them. */
        .job-detail-rich--plain {
        white-space: pre-line;
        }

        .job-detail-empty {
        font-size: 0.9375rem;
        font-style: italic;
        color: var(--jd-faint);
        }

        /* Apply card's login notice — bg-warning/10, border-warning/20 */
        .job-login-note {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
        margin-bottom: 0.75rem;
        background: color-mix(in oklab, var(--jd-warning) 10%, transparent);
        border: 1px solid color-mix(in oklab, var(--jd-warning) 20%, transparent);
        border-radius: 0.5rem;
        }

        .job-login-note svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--jd-warning);
        }

        .job-login-note strong {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--jd-warning);
        }

        .job-login-note p {
        margin-top: 0.25rem;
        font-size: 0.75rem;
        line-height: 1.5;
        color: var(--jd-muted);
        }

        /* .simp-dl — icon square, label above value, hairline between rows */
        .job-facts {
        display: flex;
        flex-direction: column;
        }

        .job-facts__row {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 1.25rem;
        border-top: 1px solid var(--jd-line);
        }

        .job-facts__row:first-child {
        border-top: 0;
        }

        .job-facts__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        flex-shrink: 0;
        border-radius: 0.5rem;
        background: color-mix(in oklab, var(--jd-primary) 12%, transparent);
        color: var(--jd-primary);
        }

        .job-facts__icon svg {
        width: 16px;
        height: 16px;
        }

        .job-facts__body {
        min-width: 0;
        flex: 1;
        }

        .job-facts__label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        color: color-mix(in oklab, var(--jd-content) 60%, transparent);
        }

        .job-facts__value {
        margin-top: 0.125rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--jd-content);
        overflow-wrap: break-word;
        }

        .job-facts__value.is-warning {
        color: oklch(65% 0.16 60);
        }

        .job-facts__value.is-expired {
        color: oklch(54% 0.20 25);
        }