/* Generated by tools/build-site.mjs from styles/main.css, styles/grid-typography-system.css, styles/site-uniform.css, styles/site-chrome.css, styles/icons.css, without rules no page using it matches. Edit those files, not this one. */
/* ---- styles/main.css ---- */
/* ============================================
   SELNEXAHEALTH - MODERN DESIGN SYSTEM
   ============================================ */

/* CSS Variables - Design System */
:root {
    /* Primary Colors */
    --color-primary-dark: #0A2463;
    --color-primary-teal: #00B4D8;
    --color-primary-teal-text: #0e7490; /* same hue, dark enough for text on light backgrounds */
    --color-accent-electric: #90E0EF;
    
    /* Secondary Colors */
    --color-secondary-coral: #FF6B6B;
    --color-secondary-green: #06D6A0;
    --color-secondary-purple: #5F0F40;
    --color-warm-accent: #c99a3f;
    --color-cta-amber: #E8A020;
    --color-cta-amber-light: #F4C157;
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
    --surface-base: #f9f5ee;
    --surface-raised: #ffffff;
    --surface-overlay: rgba(255, 255, 255, 0.72);
    --surface-inset: #f0ebe1;
    --surface-dark: #08131a;
    
    /* Neutral Base */
    --color-neutral-charcoal: #2B2D42;
    --color-neutral-gray: #EDF2F4;
    --color-neutral-white: #FFFFFF;
    
    /* Typography */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
    
    /* Font Sizes */
    --fs-h1: clamp(2.5rem, 5vw, 4.5rem);
    --fs-h2: clamp(2rem, 4vw, 3rem);
    --fs-h3: clamp(1.5rem, 3vw, 2.25rem);
    --fs-h4: clamp(1.25rem, 2vw, 1.75rem);
    --fs-body: clamp(1rem, 1.5vw, 1.125rem);
    --fs-small: 0.875rem;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 40px rgba(0, 180, 216, 0.2);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);
    
    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    color: var(--color-neutral-charcoal);
    background-color: var(--surface-base);
    line-height: 1.68;
    font-weight: 400;
    overflow-x: hidden;
}

/* Accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 9999;
    font-size: 14px;
    border-radius: 0 0 4px 0;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* Focus visible for keyboard navigation */

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4 {
    font-family: var(--font-secondary);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--fs-h1);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

h2 {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h4 {
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

p {
    margin-bottom: var(--spacing-md);
    font-size: var(--fs-body);
}

a {
    color: var(--color-primary-teal-text);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-accent-electric);
}

/* ============================================
   LAYOUT
   ============================================ */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.section-header {
    text-align: center;
    margin-bottom: 72px;
}

.section-header h2 {
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.03em;
}

.section-header p {
    font-size: var(--fs-body);
    color: var(--color-neutral-charcoal);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.78;
}

/* ============================================
   NAVIGATION
   ============================================ */

/* Dropdown Menus */

/* Hamburger Menu */

/* Progress Bar */

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

.hero {
    position: relative;
    min-height: 88vh;
    padding: var(--spacing-3xl) var(--spacing-lg);
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.mesh-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 15% 18%, rgba(201, 154, 63, 0.22), transparent 35%),
                linear-gradient(135deg, #052849 0%, #0d4a62 52%, #081a2c 100%);
    opacity: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 700px;
    padding-right: clamp(0rem, 3vw, 2.75rem);
    animation: fadeInUp 1s ease-out;
}

.hero-title {
    font-size: clamp(40px, 5.8vw, 76px);
    font-weight: 900;
    color: var(--color-neutral-white);
    margin-bottom: var(--spacing-lg);
    line-height: 1.02;
    letter-spacing: -0.04em;
    max-width: 11ch;
}

.hero-subtitle {
    font-size: var(--fs-body);
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: var(--spacing-xl);
    line-height: 1.78;
    max-width: 56ch;
}

.hero-cta-group {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-primary);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary-teal), var(--color-accent-electric));
    color: var(--color-neutral-white);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: transparent;
    color: var(--color-primary-teal-text);
    border: 2px solid var(--color-primary-teal-text);
}

.btn-secondary:hover {
    background: var(--color-primary-teal);
    color: var(--color-neutral-white);
    transform: translateY(-2px);
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-primary-teal-text);
    padding: 0;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-link:hover {
    color: var(--color-accent-electric);
    transform: translateX(4px);
}

/* ============================================
   SECTIONS
   ============================================ */

section {
    padding: var(--spacing-3xl) var(--spacing-lg);
}

.mission-section {
    background: #f4f0e7;
}

.problems-section {
    background: var(--color-neutral-gray);
}

.problems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-3xl);
}

.problem-card {
    background: var(--color-neutral-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

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

.problem-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary-teal);
}

.problem-icon i {
    display: inline-block;
}

.problem-card h3 {
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm);
}

/* Bento Grid */

/* ============================================
   TIMELINE
   ============================================ */

.timeline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

/* ============================================
   FEATURES SECTION
   ============================================ */

.features-section {
    background: var(--color-neutral-gray);
}

/* ============================================
   QUICK METRICS
   ============================================ */

.quick-metrics {
    background: linear-gradient(135deg, #081a2c 0%, #0d4a62 100%);
    color: var(--color-neutral-white);
}

.quick-metrics .section-header h2,
.quick-metrics .section-header p {
    color: var(--color-neutral-white);
}

.quick-metrics .section-header p {
    color: rgba(255, 255, 255, 0.82);
}


/* Testimonials */

.rating {
    font-size: 1.25rem;
    color: #FFD700;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

.rating i {
    display: inline-block;
}

/* ============================================
   AFRICA SECTION
   ============================================ */

/* ============================================
   TECH SECTION
   ============================================ */

/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.cta-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.cta-gradient {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-teal));
}

.cta-content {
    position: relative;
    z-index: 10;
    color: var(--color-neutral-white);
}

.cta-content h2 {
    color: var(--color-neutral-white);
    margin-bottom: var(--spacing-md);
}

.cta-content p {
    color: var(--color-neutral-white);
    margin-bottom: var(--spacing-xl);
    font-size: var(--fs-body);
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

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

.footer {
    background: linear-gradient(180deg, #071019 0%, #050b12 100%);
    color: var(--color-neutral-white);
    padding: var(--spacing-3xl) var(--spacing-lg);
}

/* ============================================
   MODALS
   ============================================ */

.modal {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 500px;
    width: 90%;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal h2 {
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary-dark);
}

/* Forms */

.checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    cursor: pointer;
}

.checkbox input {
    width: auto;
    margin: 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Slide only: starting at opacity 0 kept hero text invisible at first paint (it delayed the largest contentful paint). */
@keyframes fadeInUp {
    from {
        transform: translateY(20px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

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

@media (min-width: 1280px) and (max-width: 1440px) {

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

@media (min-width: 1600px) {
    .container {
        max-width: 1360px;
    }

    .footer .container {
        max-width: 1520px;
    }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    .container {
        padding: 0 var(--spacing-md);
    }
    
    .hero {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-2xl) var(--spacing-lg);
    }
    
    .hero-content {
        max-width: 100%;
    }
    
    .hero-cta-group {
        justify-content: center;
    }
}

/* Mobile (320px - 767px) */
@media (max-width: 767px) {
    :root {
        --fs-h1: 2rem;
        --fs-h2: 1.5rem;
        --fs-h3: 1.25rem;
        --fs-body: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-2xl: 3rem;
        --spacing-3xl: 2rem;
    }
    
    .hero {
        min-height: 0;
        padding: var(--spacing-2xl) var(--spacing-lg);
    }

    .hero-title {
        font-size: 1.75rem;
        max-width: 14ch;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-cta-group {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }

    .hero-content {
        max-width: 100%;
        padding-right: 0;
        margin: 0 auto;
    }
    
    .problems-grid {
        grid-template-columns: 1fr;
    }
    
    .timeline {
        flex-direction: column;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .modal {
        width: 95%;
    }
}

@media (max-width: 1023px) {

    .hero-content {
        max-width: 100%;
        padding-right: 0;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {

    .hero-title {
        max-width: 13ch;
        margin-left: auto;
        margin-right: auto;
    }
}

    /* ============================================
   NEW PAGES STYLING
   ============================================ */

.blog-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
    background: var(--color-neutral-gray);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-2xl);
    margin-top: var(--spacing-2xl);
}

.blog-card {
    background: var(--color-neutral-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

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

.blog-excerpt {
    flex-grow: 1;
    margin-bottom: var(--spacing-lg);
    color: var(--color-neutral-charcoal);
}

/* ============================================
   TEAM SECTION STYLING
   ============================================ */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
    margin: var(--spacing-2xl) 0;
}

.team-card {
    padding: var(--spacing-xl);
    border-radius: var(--radius-md);
    background: var(--color-neutral-gray);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all var(--transition-base);
    text-align: center;
}

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

.team-card.placeholder {
    opacity: 0.7;
    background: linear-gradient(135deg, var(--color-neutral-gray) 0%, rgba(0, 180, 216, 0.05) 100%);
    border: 2px dashed rgba(0, 180, 216, 0.3);
}

.team-card h3 {
    font-size: var(--fs-h3);
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm);
}

.team-role {
    font-weight: 600;
    color: var(--color-primary-teal-text);
    margin-bottom: var(--spacing-md);
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.team-bio {
    color: var(--color-neutral-charcoal);
    line-height: 1.6;
    font-size: var(--fs-body);
    margin-bottom: var(--spacing-md);
}

.team-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(0, 180, 216, 0.1);
    color: var(--color-primary-teal-text);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    font-weight: 600;
    margin-top: var(--spacing-md);
}

/* ============================================
   V4 GLOBAL ENHANCEMENTS
   ============================================ */

/* Keep text readable on light surface sections even when dark theme is active */

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

.quick-metrics {
    padding: var(--spacing-2xl) var(--spacing-lg);
    background: linear-gradient(180deg, rgba(0, 180, 216, 0.08), rgba(144, 224, 239, 0.1));
}

.page-hero {
    position: relative;
    padding: 7.5rem var(--spacing-lg) 4rem;
    background: radial-gradient(circle at 15% 20%, rgba(0, 180, 216, 0.2), transparent 35%),
                radial-gradient(circle at 85% 15%, rgba(95, 15, 64, 0.15), transparent 30%),
                var(--color-neutral-gray);
}

.page-overline {
    color: var(--color-primary-teal-text);
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.page-title {
    font-size: clamp(2rem, 5vw, 3.8rem);
    margin: var(--spacing-sm) 0 var(--spacing-md);
}

.page-subtitle {
    max-width: 860px;
    margin-bottom: var(--spacing-lg);
}

.page-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.page-grid.projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-grid.projects-grid .page-card h3 {
    font-size: clamp(1.35rem, 1.8vw, 1.9rem);
    line-height: 1.08;
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (max-width: 767px) {
    .page-grid.projects-grid {
        grid-template-columns: 1fr;
    }
}

.page-card,
.resource-card,
.job-card,
.pricing-panel {
    background: #ffffff;
    border-radius: var(--radius-md);
    border: 1px solid rgba(10, 36, 99, 0.12);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
}

.page-card h3,
.resource-card h3,
.job-card h3,
.pricing-panel h3 {
    margin-bottom: var(--spacing-sm);
}

.job-card h3 {
    font-size: clamp(1.35rem, 2.1vw, 1.8rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    width: 100%;
    display: block;
}

.section-spacer {
    padding: var(--spacing-2xl) var(--spacing-lg);
}

.plan-table-wrap {
    overflow-x: auto;
    margin-top: var(--spacing-lg);
}

.plan-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
    background: #ffffff;
    color: #162a46;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.plan-table th,
.plan-table td {
    border: 1px solid rgba(10, 36, 99, 0.12);
    padding: 0.85rem;
    text-align: left;
    vertical-align: top;
}

.plan-table td {
    background: #ffffff;
    color: #162a46;
}

.plan-table td strong {
    color: #0a2463;
}

.plan-table th {
    background: rgba(0, 180, 216, 0.12);
    color: var(--color-primary-dark);
}

.tab-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.tab-links a {
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(10, 36, 99, 0.2);
    font-size: 0.92rem;
}

.tab-links a:hover {
    background: rgba(0, 180, 216, 0.12);
}

.blog-filter-card {
    margin-bottom: 1.5rem;
}

@keyframes searchPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 196, 66, 0.6); }
    100% { box-shadow: 0 0 0 14px rgba(255, 196, 66, 0); }
}

/* ---- styles/grid-typography-system.css ---- */
/* ============================================
   MODERN DESIGN ENHANCEMENTS - 2026 EDITION
   ============================================ */

/* Modern CSS Features & Performance */
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    color: var(--color-neutral-charcoal);
    background-color: #f9f5ee;
    line-height: 1.72;
    font-weight: 300;
    overflow-x: hidden;
}

/* ============================================
   MODERN COLOR SYSTEM - ENHANCED PALETTE 2026
   ============================================ */
:root {
    /* Enhanced color palette with modern gradients */
    --color-primary-teal: #00B4D8;           /* Bright cyan */
    --color-primary-teal-light: #48CAE4;     /* Light cyan */
    --color-primary-teal-dark: #0077B6;      /* Deep blue-cyan */
    --color-primary-dark: #0A2463;           /* Navy blue */
    --color-primary-dark-light: #1E3A8A;     /* Lighter navy */
    --color-accent-gold: #FFD700;            /* Gold accent */
    --color-accent-gold-light: #FFE55C;      /* Light gold */
    --color-neutral-white: #FFFFFF;          /* Pure white */
    --color-neutral-gray: #F8FAFC;           /* Very light gray */
    --color-neutral-charcoal: #334155;      /* Dark slate */
    --color-neutral-medium: #64748B;         /* Medium gray */
    --color-neutral-light: #E2E8F0;          /* Light gray */
    --color-success: #10B981;                /* Emerald green */
    --color-warning: #F59E0B;                /* Amber */
    --color-error: #EF4444;                  /* Red */
    --color-info: #3B82F6;                   /* Blue */
    --color-glass-bg: rgba(255, 255, 255, 0.85); /* Glassmorphism background */
    --color-glass-border: rgba(255, 255, 255, 0.2); /* Glassmorphism border */
    --color-gradient-primary: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%);
    --color-gradient-secondary: linear-gradient(135deg, #0A2463 0%, #1E3A8A 100%);
    --color-gradient-accent: linear-gradient(135deg, #FFD700 0%, #FFE55C 100%);
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
}

/* ============================================
   SPACING SCALE (8px base unit)
   ============================================ */
:root {
    --spacing-base-8: 0.5rem;     /* 8px */
    --spacing-base-16: 1rem;      /* 16px */
    --spacing-base-24: 1.5rem;    /* 24px */
    --spacing-base-32: 2rem;      /* 32px */
    --spacing-base-40: 2.5rem;    /* 40px */
    --spacing-base-48: 3rem;      /* 48px */
    --spacing-base-64: 4rem;      /* 64px */
    --spacing-base-80: 5rem;      /* 80px */
    --spacing-base-96: 6rem;      /* 96px */
    --spacing-base-120: 7.5rem;   /* 120px */
    
    /* Section spacing */
    --section-spacing-vertical: 7.5rem;    /* 120px between major sections */
    --section-spacing-horizontal: 2rem;  /* 32px internal padding */
    
    /* Grid configuration */
    --grid-columns: 12;
    --grid-gap: 1.5rem;  /* 24px gap between columns */
    --container-max: 1440px;
    --container-padding: 2rem; /* 32px on sides */
}

/* ============================================
   TYPOGRAPHIC SCALE - REFINED HIERARCHY
   ============================================ */

/* H1 - Main Headlines */
h1 {
    font-size: var(--fs-h1);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-base-24);
}

/* H2 - Section Titles */
h2 {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-base-32);
}

/* H3 - Subsection Titles / Card Headings */
h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-base-16);
}

/* H4 - Component Labels */
h4 {
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-base-12);
}

/* Body Text - Improved readability */
p, li, label {
    font-size: var(--fs-body);
    line-height: 1.72;
    letter-spacing: 0;
    font-weight: 300;
    color: inherit;
}

/* Paragraph spacing */
p + p {
    margin-top: var(--spacing-base-16);
}

/* Small text */
small, .small {
    font-size: var(--fs-small);
    line-height: 1.5;
}

/* ============================================
   12-COLUMN GRID SYSTEM
   ============================================ */

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

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

/* Grid column utilities */

/* ============================================
   SECTION LAYOUTS - CONSISTENT ALIGNMENT
   ============================================ */

section {
    padding: var(--section-spacing-vertical) var(--section-spacing-horizontal);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-base-96);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-header h2 {
    margin-bottom: var(--spacing-base-24);
}

.section-header p {
    font-size: 1.125rem;
    color: var(--color-neutral-charcoal);
    line-height: 1.78;
    max-width: 680px;
}

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS - MODERN 2026
   ============================================ */
/* Hidden only while JavaScript is running and motion is welcome; see the matching rule in site-uniform.css. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .animate-on-scroll.animate-in {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   MODERN LOADING STATES - SKELETON SCREENS
   ============================================ */

/* Loading animations */
@keyframes skeleton-loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes skeleton-shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Form animations */
@keyframes input-focus {
    0% {
        transform: translateY(0);
        box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.1);
    }
    50% {
        transform: translateY(-3px);
        box-shadow: 0 0 0 6px rgba(0, 180, 216, 0.15);
    }
    100% {
        transform: translateY(-2px);
        box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.1), 0 4px 12px rgba(0, 180, 216, 0.15);
    }
}

/* Gradient animations */
@keyframes gradient-shift {
    0% {
        transform: translateX(-10px) translateY(-10px) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translateX(10px) translateY(10px) scale(1.1);
        opacity: 1;
    }
}

/* Glassmorphism animations */
@keyframes glass-glow {
    0% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    }
    100% {
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }
}

.card {
    background: var(--color-glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--color-glass-border);
    border-radius: 16px;
    padding: var(--spacing-base-32);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transform: translateZ(0);
    will-change: transform, box-shadow, backdrop-filter;
}

.card:hover {
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    backdrop-filter: blur(25px) saturate(200%);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transform: translateY(-8px) scale(1.02) translateZ(0);
    border-color: rgba(255, 255, 255, 0.3);
    z-index: 2;
    animation: glass-glow 0.3s ease-out forwards;
}

/* Problem/feature card */
.problem-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base-16);
}

.problem-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
}

/* ============================================
   BUTTON & CTA STYLING - ENHANCED PROMINENCE
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-base-8);
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    min-height: 48px; /* Accessible touch target */
}

.btn-primary {
    background: var(--color-gradient-primary);
    color: var(--color-neutral-white);
    box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
    z-index: -1;
}

.btn-primary:hover {
    background: var(--color-gradient-primary);
    box-shadow: 0 8px 24px rgba(0, 180, 216, 0.4);
    transform: translateY(-3px) scale(1.02);
    animation: btn-pulse 0.6s ease-out;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-secondary {
    background: var(--color-gradient-secondary);
    color: var(--color-neutral-white);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-secondary:hover {
    background: var(--color-gradient-secondary);
    box-shadow: 0 6px 20px rgba(10, 36, 99, 0.3);
    transform: translateY(-2px) scale(1.01);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover::before {
    opacity: 1;
}

/* Button animations */
@keyframes btn-pulse {
    0% {
        box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3);
    }
    50% {
        box-shadow: 0 8px 24px rgba(0, 180, 216, 0.5), 0 0 0 4px rgba(0, 180, 216, 0.1);
    }
    100% {
        box-shadow: 0 8px 24px rgba(0, 180, 216, 0.4);
    }
}

/* ============================================
   HERO SECTION - IMPROVED HIERARCHY
   ============================================ */

.hero {
    position: relative;
    padding: var(--spacing-base-120) var(--section-spacing-horizontal) var(--spacing-base-80);
    background: linear-gradient(135deg, rgba(10, 36, 99, 0.02) 0%, rgba(0, 180, 216, 0.03) 100%);
    overflow: hidden;
}

.hero-overline {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-primary-teal);
    margin-bottom: var(--spacing-base-16);
    display: block;
}

.hero-title {
    margin-bottom: var(--spacing-base-32);
    max-width: 900px;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--color-neutral-charcoal);
    max-width: 700px;
    margin-bottom: var(--spacing-base-40);
}

.hero-cta-group {
    display: flex;
    gap: var(--spacing-base-16);
    margin-bottom: var(--spacing-base-80);
    flex-wrap: wrap;
}

/* ============================================
   ROI CALCULATOR - PROMINENT DESIGN
   ============================================ */

/* ============================================
   RESPONSIVE DESIGN - BREAKPOINTS
   ============================================ */

/* Tablet: 768px */
@media (max-width: 768px) {
    :root {
        --section-spacing-vertical: 4.5rem;    /* 72px */
        --container-padding: 1.5rem;        /* 24px */
        --grid-gap: 1rem;                   /* 16px */
    }
    
    h1 { margin-bottom: var(--spacing-base-16); }
    h2 { margin-bottom: var(--spacing-base-24); }
    
    .hero {
        padding: var(--spacing-base-64) var(--section-spacing-horizontal) var(--spacing-base-48);
    }
    
    .hero-cta-group {
        flex-direction: column;
    }
    
    .grid {
        gap: var(--grid-gap);
    }
    
    .card {
        padding: var(--spacing-base-24);
    }
}

/* Mobile: 375px - 599px */
@media (max-width: 599px) {
    :root {
        --section-spacing-vertical: 3.5rem;   /* 56px */
        --container-padding: 1rem;          /* 16px */
        --grid-gap: 0.75rem;                /* 12px */
    }
    
    section {
        padding: var(--section-spacing-vertical) var(--section-spacing-horizontal);
    }
    
    h1 {
        font-size: 1.75rem;
        margin-bottom: var(--spacing-base-16);
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-base-16);
    }
    
    h3 {
        font-size: 1.125rem;
    }
    
    p, li {
        font-size: 0.95rem;
        line-height: 1.7;
    }
    
    .hero {
        padding: var(--spacing-base-40) var(--section-spacing-horizontal) var(--spacing-base-24);
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: var(--spacing-base-24);
        line-height: 1.72;
        max-width: 34rem;
    }

    .hero-cta-group {
        flex-direction: column;
        gap: var(--spacing-base-12);
        margin-bottom: var(--spacing-base-32);
    }
    
    .btn {
        width: 100%;
        padding: 0.75rem 1.5rem;
        min-height: 44px;
    }
    
    .section-header {
        margin-bottom: var(--spacing-base-40);
    }
    
    .card {
        padding: var(--spacing-base-16);
    }
    
    .problem-card h3 {
        font-size: 1.125rem;
    }
    
    .grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ACCESSIBILITY - TEXT CONTRAST & FOCUS
   ============================================ */

/* Ensure minimum 4.5:1 contrast ratio */
.btn, a, button {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.btn:focus-visible, a:focus-visible, button:focus-visible {
    outline: 2px solid var(--color-primary-teal);
    outline-offset: 2px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.flex { display: flex; }

/* Print styles */
@media print {
    section { page-break-inside: avoid; }
    .btn { display: none; }
}

/* ---- styles/site-uniform.css ---- */
:root {
  --uniform-bg: #f9f5ee;
  --uniform-surface: #ffffff;
  --uniform-text: #1f2937;
  --uniform-muted: #4b5563;
  --uniform-primary: #004c4c;
  --uniform-accent: #e8a020;
  --uniform-border: rgba(15, 23, 42, 0.1);
  --uniform-shadow: 0 12px 30px rgba(2, 14, 30, 0.08);
  --color-brand-primary: #004c4c;
  --color-brand-secondary: #0e7490;
  --color-brand-accent: #e8a020;
  --color-success: #22c55e;
  --color-success-rgb: 34, 197, 94;
  --color-border: rgba(15, 23, 42, 0.1);
  --color-bg-secondary: #f4f0e7;
  --color-text-secondary: #4b5563;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --section-gap: clamp(4rem, 8vw, 7rem);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.75rem, 3vw, 2.25rem);
  --text-hero: clamp(2.2rem, 5vw, 3.4rem);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;
  --transition-spring: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-hover: 0 12px 32px rgba(0,0,0,0.12);
}
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--uniform-bg);
  color: var(--uniform-text);
}

img,
video {
  max-width: 100%;
  height: auto;
}

p,
li {
  color: var(--uniform-muted);
}

.container {
  width: min(1200px, 100% - 2rem);
  margin-inline: auto;
}

/* Works for both .navbar-container and .navbar.container templates */


.btn.btn-primary {
  background: var(--uniform-accent);
  border-color: var(--uniform-accent);
  color: #0a1414 !important;
}


.btn.btn-primary:hover {
  background: #cf8b18;
  border-color: #cf8b18;
}

/* Global card/surface consistency */
.card,
.resource-card,
.guide-card,
.webinar-card,
.page-card {
  background: var(--uniform-surface);
  border: 1px solid var(--uniform-border);
  box-shadow: var(--uniform-shadow);
  border-radius: 14px;
}

/* Footer consistency across .footer, .site-footer and plain footer tags */
footer,
.footer {
  background: #0a1414;
  color: rgba(255, 255, 255, 0.9);
}

/* Accessible "skip to content" link: visually hidden until keyboard focus */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

footer p,
footer li,
footer a,
.footer p,
.footer li,
.footer a {
  color: rgba(255, 255, 255, 0.84) !important;
}

footer a:hover,
.footer a:hover {
  color: #ffffff !important;
}

/* Keep article pages from drifting too narrow/wide in legacy templates */

.section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3d6c6a;
  padding: 4px 10px;
  border: 1px solid rgba(232, 160, 32, 0.35);
  border-radius: 6px;
  margin-bottom: 16px;
}


.development-alignment {
  background: #ffffff;
  border-block: 1px solid var(--uniform-border);
  color: #1f2937;
}


.development-alignment-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(1.25rem, 4vw, 2.75rem);
  align-items: center;
}


.development-alignment h2 {
  margin-bottom: 0.7rem;
  color: var(--color-brand-primary) !important;
}


.development-alignment p {
  max-width: 64ch;
  margin-bottom: 0;
  color: #4b5563 !important;
}

.sdg-marker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
}

.sdg-marker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  min-height: 126px;
  padding: 0.8rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #ffffff;
  overflow: visible;
}

.sdg-art {
  flex: 0 0 clamp(86px, 9vw, 112px);
  width: clamp(86px, 9vw, 112px);
  height: clamp(86px, 9vw, 112px);
  display: inline-flex;
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
}

.sdg-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.86);
  transform-origin: center;
}

.sdg-marker > span:not(.sdg-art) strong,
.sdg-chip > span:not(.sdg-art) strong {
  display: block;
  color: #0f172a !important;
  font-size: 0.88rem;
  line-height: 1.2;
}

.sdg-marker > span:not(.sdg-art),
.sdg-chip > span:not(.sdg-art),
.sdg-marker > span:not(.sdg-art) > span,
.sdg-chip > span:not(.sdg-art) > span {
  display: block;
  color: #4b5563 !important;
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}

.sdg-inline-set,
.sdg-mini-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.sdg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.page-card .sdg-chip,
.team-card .sdg-chip {
  background: rgba(249, 245, 238, 0.7);
  border-color: rgba(15, 23, 42, 0.07);
}

.sdg-chip .sdg-art {
  flex-basis: 46px;
  width: 46px;
  height: 46px;
  border-radius: 6px;
}

.development-alignment {
  padding: var(--section-gap) 0;
}

.development-alignment-list {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.25rem;
}

.development-alignment-list div {
  padding-left: 1rem;
  border-left: 3px solid rgba(232, 160, 32, 0.75);
}

.development-alignment-list strong {
  display: block;
  color: var(--color-brand-primary) !important;
  margin-bottom: 0.15rem;
}

.team-leadership-note {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  color: var(--color-brand-primary);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
}

.footer .sdg-inline-set {
  margin-top: 0.85rem;
}

.footer .sdg-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.footer .sdg-chip strong,
.footer .sdg-chip span {
  color: rgba(255, 255, 255, 0.9);
}

/* Scroll reveal. Sections start hidden only when JavaScript is running (js/site-core.js reveals them) and the
   visitor has not asked for reduced motion. Without JavaScript, or in browsers without the scripting media
   feature, everything is visible from the start. Never put these classes on content in the first screen. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }

  .animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .reveal.visible,
  .reveal.revealed,
  .reveal.animate-in,
  .animate-on-scroll.in-view,
  .animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-primary,
.btn-secondary {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
}

main section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

main :where(p, li) {
  line-height: 1.72;
}

main :where(.section-header p, .page-subtitle, .hero-subtitle, article p, .story-copy p) {
  max-width: 68ch;
}

.section-header p,
.hero-content p,
.cta-content p {
  margin-left: auto;
  margin-right: auto;
}

.hero-title,
.page-title,
.hero h1 {
  font-size: var(--text-hero);
}

.hero-content,
.hero-overline,
.hero-title {
  max-width: 100%;
}

.hero-overline,
.hero-title {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.btn,
.btn-primary,
.btn-secondary {
  border-radius: var(--radius-md);
}

.btn-primary,
.btn.btn-primary {
  background: var(--uniform-accent);
  border-color: var(--uniform-accent);
  color: #0a1414 !important;
}

.btn-secondary,
.btn.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--uniform-primary);
  color: var(--uniform-primary) !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
  background: var(--uniform-primary);
  color: #ffffff !important;
}

/* Hero entrance: a short slide only. The text is never transparent, so it paints (and counts as the
   largest contentful paint) straight away. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeUp {
    from { transform: translateY(14px); }
    to { transform: translateY(0); }
  }

  .hero-animate {
    animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .hero-animate:nth-child(1) { animation-delay: 0.05s; }
  .hero-animate:nth-child(2) { animation-delay: 0.15s; }
  .hero-animate:nth-child(3) { animation-delay: 0.25s; }
  .hero-animate:nth-child(4) { animation-delay: 0.38s; }
  .hero-animate:nth-child(5) { animation-delay: 0.5s; }
}


.mission-grid .mission-card:nth-child(1) { transition-delay: 0s; }


.mission-grid .mission-card:nth-child(2) { transition-delay: 0.08s; }


.mission-grid .mission-card:nth-child(3) { transition-delay: 0.16s; }

.card,
.page-card,
.mission-card,
.team-card,
.pricing-panel,
.job-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover,
.page-card:hover,
.mission-card:hover,
.team-card:hover,
.pricing-panel:hover,
.job-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-success-rgb), 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(var(--color-success-rgb), 0); }
}

/* Integration logos: a static row without JavaScript or with reduced motion; js/site-core.js turns it into a
   scrolling strip (with a pause button) by duplicating the list inside .strip-track. */

.strip-toggle {
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid rgba(0, 76, 76, 0.35);
  border-radius: 999px;
  background: #ffffff;
  color: #004c4c;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Legend Styling Updates */
/* Legend dots match the fills in /assets/africa-map.webp */

.email-capture {
  background: linear-gradient(135deg, #0a1414, #004c4c);
  color: #ffffff;
  padding: clamp(3rem, 7vw, 5rem) 1rem;
}

.capture-inner {
  width: min(820px, 100%);
  margin: 0 auto;
  text-align: center;
}

.capture-inner p {
  color: rgba(255,255,255,0.78);
  margin-left: auto;
  margin-right: auto;
}

.capture-form {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.4rem auto 0.65rem;
}

.capture-form input {
  min-width: min(320px, 100%);
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.1);
  color: #ffffff;
}

.capture-form input::placeholder {
  color: rgba(255,255,255,0.62);
}

.capture-form button {
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.15rem;
  min-height: 44px;
  background: var(--uniform-accent);
  color: #0a1414;
  font-weight: 700;
  cursor: pointer;
}

.capture-note {
  font-size: 0.82rem;
}

/* Sign-up forms use the shared form handler (data-sx-form="updates"); text stays light on the dark band. */
.email-capture h2 {
  color: #ffffff;
}

.capture-form {
  align-items: flex-end;
}

.capture-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}

.capture-field label {
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
}

.capture-form .sx-form__status {
  flex-basis: 100%;
  margin: 0;
  color: rgba(255,255,255,0.85);
}

.email-capture .sx-error,
.email-capture .sx-form__status.is-error {
  color: #fecdca;
}

.capture-note a {
  color: #ffffff;
  text-decoration: underline;
}

.team-section .team-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.8rem);
}

.team-section .team-card {
  text-align: left;
  padding: clamp(1.1rem, 2.5vw, 1.8rem);
}

@media (max-width: 1100px) {
  .team-section .team-grid {
    grid-template-columns: 1fr;
  }

  .team-section .team-card {
    text-align: center;
  }
}

.team-photo-wrap {
  width: clamp(156px, 17vw, 210px);
  height: clamp(156px, 17vw, 210px);
  margin: 0 auto 1.1rem;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(232,160,32,0.35);
  background: linear-gradient(140deg, rgba(0,76,76,0.2), rgba(14,116,144,0.08));
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.team-photo {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  object-fit: cover;
  border: 0;
  display: block;
  margin: 0;
  background: transparent;
  color: #ffffff;
  font-weight: 800;
  font-size: 1.35rem;
}

.team-photo {
  transform: scale(1.55);
  transform-origin: center 28%;
}

.team-photo-ring {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 1px solid rgba(232,160,32,0.6);
  pointer-events: none;
}

.founding-story {
  background: #ffffff;
}

.timeline-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(13, 148, 136, 0.08), transparent 48%),
    radial-gradient(circle at bottom right, rgba(232, 160, 32, 0.07), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
  padding-block: clamp(4rem, 6vw, 5.75rem);
}

.timeline-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0));
}

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

.timeline-section .section-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.timeline-section .section-header h2 {
  max-width: 15ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--uniform-primary);
}

.timeline-section .section-header p {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--uniform-muted);
}

.story-eyebrow {
  color: rgba(2, 29, 29, 0.7);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.founding-story .container,
.timeline-section .container {
  max-width: 1040px;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
  margin-top: 2.5rem;
  align-items: stretch;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 31px;
  left: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 76, 76, 0.12), rgba(232, 160, 32, 0.5) 50%, rgba(0, 76, 76, 0.12));
}

.timeline-item {
  flex: 1;
  min-height: 192px;
  padding: 2rem 1.1rem 1.35rem;
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfb 100%);
  border: 1px solid rgba(0, 76, 76, 0.1);
  border-radius: 18px;
  box-shadow: 0 14px 30px -22px rgba(15, 23, 42, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.timeline-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -20px rgba(15, 23, 42, 0.42);
}

.timeline-item::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, rgba(13, 148, 136, 0.9), rgba(232, 160, 32, 0.9));
  opacity: 0.9;
}

.timeline-item h3 {
  margin: 0 0 0.7rem;
  color: var(--uniform-primary);
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.timeline-item p {
  margin: 0;
  color: var(--uniform-muted);
  font-size: 0.97rem;
}

.timeline-dot {
  position: absolute;
  top: 24px;
  left: 1rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #0d9488 0%, #0f766e 100%);
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.25), 0 6px 12px -8px rgba(13, 148, 136, 0.8);
  z-index: 1;
}

.module-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.module-tab {
  border: 1px solid var(--uniform-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--uniform-primary);
  padding: 0.65rem 1rem;
  font-weight: 700;
  cursor: pointer;
}

.module-tab.active {
  background: var(--uniform-primary);
  color: #ffffff;
  border-color: var(--uniform-primary);
}

.module-content {
  display: none;
  animation: fadeUp 0.3s ease forwards;
}

.module-content.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.module-screenshot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--uniform-border);
  box-shadow: var(--uniform-shadow);
}

.module-bullets {
  list-style: disc;
  margin: 1rem 0 1rem 1.2rem;
}

.module-metric {
  margin: 1rem 0;
  display: inline-flex;
  border-left: 3px solid var(--uniform-accent);
  background: rgba(232,160,32,0.1);
  border-radius: 0 8px 8px 0;
  padding: 0.75rem 0.9rem;
  color: #7a5412;
  font-weight: 700;
}

.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: var(--radius-md);
  min-width: 640px;
  overflow: hidden;
  box-shadow: var(--uniform-shadow);
}

.comparison-table th,
.comparison-table td {
  border: 1px solid var(--uniform-border);
  padding: 0.9rem;
  text-align: left;
}

.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) {
  border-left: 3px solid var(--uniform-accent);
  border-right: 3px solid var(--uniform-accent);
  background: rgba(232,160,32,0.08);
}

.tech-spec {
  background: #ffffff;
  border: 1px solid var(--uniform-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--uniform-shadow);
}

.tech-spec summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--uniform-primary);
}

.spec-grid {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}

.spec-item {
  display: grid;
  grid-template-columns: minmax(160px, 0.5fr) 1fr;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 8px;
  background: rgba(0,76,76,0.05);
}

.spec-item span:first-child {
  font-weight: 800;
  color: var(--uniform-primary);
}

/* main.css gives .quick-metrics white text for a dark gradient, then later swaps in a light
   gradient. Keep the text dark so the section stays readable on every page. */
.quick-metrics .section-header h2 {
  color: #0f172a;
}

.quick-metrics .section-header p {
  color: #475569;
}

/*
 * Results convention:
 * - Measured results: stat cards, only once a pilot has reported.
 * - Engineering and design targets: rows in a .spec-table, each labelled with .spec-tag ("Target").
 * - Projections: charts or tables on the investor page only.
 */
.spec-table-wrap {
  overflow-x: auto;
}

.spec-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.6rem;
  margin-top: 0.5rem;
  font-size: 0.98rem;
}

.spec-table caption {
  text-align: left;
  font-weight: 800;
  color: var(--uniform-primary);
  padding-bottom: 0.25rem;
}

.spec-table th,
.spec-table td {
  background: rgba(0, 76, 76, 0.05);
  padding: 0.75rem 0.9rem;
  text-align: left;
  vertical-align: top;
  color: var(--uniform-text);
  line-height: 1.5;
}

.spec-table th {
  width: 34%;
  font-weight: 800;
  color: var(--uniform-primary);
  border-radius: 8px 0 0 8px;
}

.spec-table td:last-child {
  border-radius: 0 8px 8px 0;
}

.spec-tag {
  display: inline-block;
  margin: 0 0.5rem 0.2rem 0;
  padding: 0.05rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a4f00;
  vertical-align: 0.1em;
}

.spec-tag--status {
  color: var(--uniform-primary);
}

.spec-note {
  font-size: 0.9rem;
  color: var(--uniform-muted);
}

/* Ensure white-surface sections keep dark text when dark theme is active */

/* Extra strong overrides for specific elements that were still inheriting light colors */

@media (max-width: 900px) {
  
  .module-content.active {
    grid-template-columns: 1fr;
  }

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

  .timeline::before {
    top: 0;
    bottom: 0;
    left: 14px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(13, 148, 136, 0.35), rgba(232, 160, 32, 0.35));
  }

  .timeline-item {
    min-height: auto;
    padding-top: 1.5rem;
    padding-left: 2.1rem;
  }

  .timeline-dot {
    top: 1.45rem;
    left: 6px;
  }

  .timeline {
    display: grid;
    gap: 1rem;
  }

  .timeline::before {
    top: 0;
    bottom: 0;
    left: 6px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .timeline-item {
    padding-top: 0;
    padding-left: 2rem;
  }

  .timeline-dot {
    top: 0.4rem;
    left: 0;
  }
}

@media (max-width: 640px) {
  
  .capture-form {
    align-items: stretch;
  }

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

  .team-section .team-card {
    text-align: center;
  }

  .spec-item {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .hero,
  .page-hero {
    overflow: hidden;
  }

  .container,
  .hero-content,
  .section-header {
    max-width: 100%;
    min-width: 0;
  }

  .hero-title,
  .page-title,
  .hero h1,
  main h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 8.6vw, 2.55rem) !important;
    line-height: 1.05;
    letter-spacing: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }

  .hero-title span {
    display: inline;
  }

  .hero-subtitle,
  .page-subtitle,
  .hero-content p,
  main :where(.section-header p, article p, .story-copy p) {
    max-width: 100% !important;
    font-size: clamp(0.98rem, 3.8vw, 1.08rem);
    line-height: 1.55;
    overflow-wrap: break-word;
  }

  .btn,
  .btn-primary,
  .btn-secondary {
    max-width: 100%;
    white-space: normal;
  }
}

.video-tab-controls {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.video-tab-content.hidden {
  display: none;
}

.video-tab-controls .tab-btn {
  border: 1px solid rgba(15, 23, 42, 0.2);
  background: #fff;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.video-tab-controls .tab-btn.active {
  border-color: var(--uniform-accent);
  background: rgba(232, 160, 32, 0.12);
}

.video-tab-content video {
  width: 100%;
  max-width: 960px;
  border-radius: 12px;
  display: block;
}

/* Plain statements, not badges: none of these is a certification. */
.footer-compliance {
  margin-top: 0.85rem;
}

.footer-compliance p {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: inherit;
  opacity: 0.9;
}

@media (max-width: 768px) {

  
  .development-alignment-grid {
    grid-template-columns: 1fr;
  }

  .sdg-marker-grid {
    grid-template-columns: 1fr;
  }

  .sdg-marker {
    min-height: 0;
  }

  .sdg-art {
    flex-basis: 82px;
    width: 82px;
    height: 82px;
  }

  .sdg-chip .sdg-art {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 0.75rem;
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---------- Accessibility (Phase 4) ---------- */

/* Links inside running text are underlined, so they are not told apart by colour alone (WCAG 1.4.1). */
main :where(p, li, td) a:not([class*="btn"]) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Headings promoted for a correct outline keep the size they had before. */
.minor-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Tap targets: at least 44 x 44 px for controls and for links that stand on their own (links inside a
   sentence are exempt). */
.btn-link,
.standalone-link,
.resource-card a,
.team-badge a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

main select,
main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
main textarea,
.filter-btn,
.tab-btn,
.module-tab {
  min-height: 44px;
}

.search-btn {
  min-width: 44px;
  min-height: 44px;
}

main summary {
  padding-block: 0.7rem;
  cursor: pointer;
}

.skip-link {
  min-height: 44px;
  padding: 12px 16px;
}

/* FAQ: questions are headings, answers always shown. */
.faq-item {
  margin-bottom: 1.75rem;
}

.faq-question {
  margin: 0 0 0.4rem;
  color: #0a2463;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 700;
  line-height: 1.35;
}

/* Hero text contrast.
   Heroes built on main.css sit on a dark mesh gradient (.hero-background), but grid-typography-system.css
   colours their subtitle charcoal and the outline button dark teal, so both were close to invisible. The subtitle was also centred under a left-aligned heading.
   :where() keeps these at the specificity of the rules they replace, so home-page.css still styles the homepage hero. */
:where(.hero-background ~ .hero-content) .hero-overline {
  color: var(--color-primary-teal);
}

:where(.hero-background ~ .hero-content) .hero-subtitle,
:where(.hero-background ~ .hero-content) > p {
  color: rgba(255, 255, 255, 0.88);
}

.hero-background ~ .hero-content > p {
  margin-left: 0;
}

:where(.hero-background ~ .hero-content) .btn.btn-secondary {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Heroes built on home.css (the solutions pages) have a light background, but home.css colours their text white. */
.hero > .container p {
  color: var(--uniform-muted);
}

/* Service pages (services/*.html). Variants of the existing card and grid, not new components. */
.page-prose {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.page-prose > p + p {
  margin-top: var(--spacing-md);
}

/* Short label-and-line items, five across on a wide screen. */
.page-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--spacing-md);
}

.page-grid--compact .page-card h3 {
  margin-bottom: 0.5rem;
}

/* A card that is a statement, not a link: no hover lift. */
.page-card--plain,
.page-card--plain:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* An emphasised line under a list. Uses the brand accent as a rule, not an alert colour. */
.page-card--callout {
  border-left: 4px solid var(--uniform-accent);
  font-weight: 600;
  color: var(--uniform-text);
}

.page-grid + .page-card--callout {
  margin-top: var(--spacing-lg);
}

.page-hero .cta-buttons--start {
  justify-content: flex-start;
  align-items: center;
}

.page-sources {
  border-top: 1px solid var(--uniform-border);
  padding-top: var(--spacing-md);
}

main .page-sources li,
main .page-sources p {
  font-size: 0.875rem;
  color: var(--uniform-muted);
}

.page-sources ul {
  margin: var(--spacing-sm) 0;
  padding-left: 1.2rem;
}

.page-sources li + li {
  margin-top: 0.35rem;
}

/* ---- styles/site-chrome.css ---- */
/*
 * Shared site chrome: header, footer, demo modal and forms.
 * The markup lives in /includes and is stamped into every page by tools/build-site.mjs.
 * Class names start with "sx-" so the older page stylesheets (main.css, home.css, selnexa-main.css)
 * don't reach them; element+class selectors below win over their bare header/footer rules.
 */

/* Montserrat, self-hosted: variable weight 100-900, cut down from Google Fonts' Latin file (v31) to Basic Latin,
   Latin-1 and common punctuation, with kerning and ligatures (29 KB). Made with:
   pyftsubset montserrat-latin.woff2 --unicodes="U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+20AC,U+2122,U+2190-2193"
     --layout-features="kern,liga,calt,mark,mkmk" --flavor=woff2
   Licence: /assets/fonts/LICENSE-montserrat.txt */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-var.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2122, U+2191, U+2193;
}

:root {
  --sx-teal: #004c4c;
  --sx-teal-hover: #0e7490;
  --sx-amber: #e8a020;
  --sx-amber-hover: #f0b545;
  --sx-navy: #0a2463;
  --sx-ink: #1f2937;
  --sx-muted: #4b5563;
  --sx-dark: #0a1414;
  --sx-error: #b42318;
  --sx-success: #05603a;
  --sx-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.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;
}

/* ---------- Header ---------- */

header.sx-header {
  position: sticky;
  top: 0;
  left: auto;
  width: auto;
  z-index: 1000;
  margin: 0;
  padding: 0;
  background: rgba(249, 245, 238, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: none;
  font-family: var(--sx-font);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

header.sx-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 32px rgba(2, 14, 30, 0.08);
}

.sx-header__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0.6rem clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.sx-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  min-height: 44px;
  color: var(--sx-navy);
  text-decoration: none;
}

.sx-brand picture {
  display: flex;
  flex-shrink: 0;
}

.sx-brand__logo {
  display: block;
  width: auto;
  height: 50px;
}

.sx-brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sx-brand__name {
  color: var(--sx-navy);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1;
}

.sx-brand__tag {
  color: rgba(43, 45, 66, 0.75);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sx-nav {
  margin-left: auto;
}

.sx-menu {
  display: flex;
  align-items: center;
  gap: clamp(0.15rem, 0.8vw, 0.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-menu li {
  margin: 0;
}

.sx-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.6rem;
  color: var(--sx-teal);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sx-menu a:hover {
  color: var(--sx-teal-hover);
}

.sx-menu a:not(.sx-cta)::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sx-amber), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.sx-menu a:not(.sx-cta):hover::after,
.sx-menu a:not(.sx-cta):focus-visible::after,
.sx-menu a[aria-current="page"]:not(.sx-cta)::after {
  transform: scaleX(1);
}

.sx-menu a.sx-cta {
  margin-left: 0.35rem;
  padding: 0 1rem;
  border-radius: 10px;
  background: var(--sx-amber);
  color: var(--sx-dark);
  font-weight: 700;
}

.sx-menu a.sx-cta:hover {
  background: var(--sx-amber-hover);
  color: var(--sx-dark);
}

.sx-nav-toggle {
  display: none;
}

.sx-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #00b4d8, #90e0ef);
  pointer-events: none;
}

header.sx-header :focus-visible,
footer.sx-footer :focus-visible,
.sx-modal :focus-visible {
  outline: 3px solid var(--sx-amber);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .sx-header__inner {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .sx-nav {
    flex-basis: 100%;
    margin-left: 0;
  }

  /* Without JavaScript the links stay visible as a wrapped row. */
  .sx-menu {
    flex-wrap: wrap;
  }

  .sx-header[data-menu-ready] .sx-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    padding: 0 0.8rem;
    border: 1px solid rgba(0, 76, 76, 0.3);
    border-radius: 10px;
    background: transparent;
    color: var(--sx-teal);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
  }

  .sx-nav-toggle__bars,
  .sx-nav-toggle__bars::before,
  .sx-nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .sx-nav-toggle__bars {
    position: relative;
  }

  .sx-nav-toggle__bars::before,
  .sx-nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .sx-nav-toggle__bars::before {
    top: -6px;
  }

  .sx-nav-toggle__bars::after {
    top: 6px;
  }

  .sx-header.is-open .sx-nav-toggle__bars {
    background: transparent;
  }

  .sx-header.is-open .sx-nav-toggle__bars::before {
    transform: translateY(6px) rotate(45deg);
  }

  .sx-header.is-open .sx-nav-toggle__bars::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  .sx-header[data-menu-ready] .sx-nav {
    display: none;
  }

  .sx-header[data-menu-ready].is-open .sx-nav {
    display: block;
  }

  .sx-header[data-menu-ready] .sx-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem 0 0.9rem;
  }

  .sx-header[data-menu-ready] .sx-menu a {
    width: 100%;
    min-height: 48px;
    padding: 0 0.25rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  }

  .sx-header[data-menu-ready] .sx-menu a:not(.sx-cta)::after {
    display: none;
  }

  .sx-header[data-menu-ready] .sx-menu__cta {
    margin-top: 0.75rem;
  }

  .sx-header[data-menu-ready] .sx-menu a.sx-cta {
    justify-content: center;
    margin-left: 0;
    border-bottom: 0;
  }
}

@media (max-width: 420px) {
  .sx-brand__logo {
    height: 42px;
  }

  .sx-brand__name {
    font-size: 1rem;
  }

  .sx-brand__tag {
    font-size: 0.6rem;
  }
}

/* ---------- Footer ---------- */

footer.sx-footer {
  margin: 0;
  padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
  background: var(--sx-dark);
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--sx-font);
}

.sx-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.sx-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr));
  gap: 2rem;
}

.sx-footer__name {
  margin: 0 0 0.75rem;
  color: #ffffff !important;
  font-size: 1.35rem;
  font-weight: 800;
}

footer.sx-footer p {
  max-width: 36ch;
  margin: 0 0 0.75rem;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 0.92rem;
  line-height: 1.6;
}

.sx-footer__heading {
  margin: 0 0 0.6rem;
  color: var(--sx-amber);
  font-family: var(--sx-font);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

footer.sx-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer.sx-footer li {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
}

footer.sx-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.92rem;
  text-decoration: none;
}

footer.sx-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

footer.sx-footer .footer-compliance p {
  font-size: 0.8rem;
}

.sx-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sx-footer__bottom p {
  margin: 0;
}

@media (max-width: 1023px) {
  .sx-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sx-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  footer.sx-footer a {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .sx-footer__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ---------- Floating buttons and module finder (added by js/site-core.js) ---------- */

.sx-float {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(2, 14, 30, 0.28);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sx-float:hover {
  transform: translateY(-2px);
}

.sx-float:focus-visible {
  outline: 3px solid var(--sx-amber);
  outline-offset: 3px;
}

.sx-whatsapp {
  left: 1rem;
  background: #128c4b;
}

.sx-whatsapp img {
  display: block;
  width: 28px;
  height: 28px;
}

.sx-finder-toggle {
  right: 1rem;
  background: linear-gradient(135deg, var(--sx-teal), var(--sx-teal-hover));
}

.sx-finder {
  position: fixed;
  right: 1rem;
  bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  z-index: 901;
  width: min(360px, calc(100vw - 2rem));
  max-height: min(70vh, 460px);
  overflow: auto;
  padding: 1rem;
  border: 1px solid rgba(10, 36, 99, 0.18);
  border-radius: 16px;
  background: #ffffff;
  color: var(--sx-ink);
  box-shadow: 0 18px 44px rgba(2, 14, 30, 0.25);
  font-family: var(--sx-font);
}

.sx-finder[hidden] {
  display: none !important;
}

.sx-finder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sx-finder__head h2 {
  margin: 0;
  color: var(--sx-navy);
  font-size: 1.05rem;
}

.sx-finder__close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sx-ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.sx-finder__messages {
  max-height: 170px;
  overflow: auto;
  margin-bottom: 0.75rem;
  font-size: 0.92rem;
}

.sx-finder__messages p {
  margin: 0 0 0.5rem;
  color: var(--sx-ink);
}

.sx-finder__controls {
  display: grid;
  gap: 0.5rem;
}

.sx-finder__controls label {
  color: var(--sx-ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.sx-finder__controls select,
.sx-finder__suggest,
.sx-finder__demo {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  font: inherit;
  font-size: 0.95rem;
}

.sx-finder__controls select {
  padding: 0 0.6rem;
  border: 1px solid #8a94a6;
  background: #ffffff;
  color: var(--sx-ink);
}

.sx-finder__suggest {
  border: 0;
  background: var(--sx-teal);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

a.sx-finder__demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sx-amber);
  color: var(--sx-dark);
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 480px) {
  .sx-float {
    width: 48px;
    height: 48px;
  }

  .sx-finder {
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
}

@media print {
  .sx-float,
  .sx-finder {
    display: none !important;
  }
}

/* ---------- Demo modal ---------- */

dialog.sx-modal {
  width: min(680px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 16px;
  background: #ffffff;
  color: var(--sx-ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  font-family: var(--sx-font);
}

dialog.sx-modal::backdrop {
  background: rgba(10, 20, 20, 0.65);
}

.sx-modal__panel {
  position: relative;
  padding: clamp(1.25rem, 4vw, 2rem);
}

.sx-modal__panel h2 {
  margin: 0 2.5rem 0.4rem 0;
  color: var(--sx-navy);
  font-size: 1.5rem;
  line-height: 1.2;
}

.sx-modal__intro {
  margin: 0 0 1rem;
  color: var(--sx-muted);
}

.sx-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sx-ink);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.sx-modal__close:hover {
  background: rgba(15, 23, 42, 0.06);
}

/* ---------- Forms ---------- */

.sx-form {
  position: relative;
  font-family: var(--sx-font);
  text-align: left;
}

.sx-form__note {
  margin: 0 0 1rem;
  color: var(--sx-muted);
  font-size: 0.9rem;
}

.sx-form a,
.sx-modal a,
.sx-form-done a {
  color: var(--sx-teal);
  text-decoration: underline;
}

.sx-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.sx-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.sx-field--wide {
  grid-column: 1 / -1;
}

.sx-field label {
  color: var(--sx-ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.sx-field input,
.sx-field select,
.sx-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 1px solid #8a94a6;
  border-radius: 10px;
  background: #ffffff;
  color: var(--sx-ink);
  font: inherit;
  font-size: 1rem;
}

.sx-field textarea {
  resize: vertical;
}

.sx-field input:focus-visible,
.sx-field select:focus-visible,
.sx-field textarea:focus-visible {
  border-color: var(--sx-teal);
  outline: 3px solid rgba(232, 160, 32, 0.75);
  outline-offset: 1px;
}

.sx-field [aria-invalid="true"] {
  border-color: var(--sx-error);
}

.sx-error {
  margin: 0;
  color: var(--sx-error);
  font-size: 0.85rem;
}

.sx-req {
  color: var(--sx-error);
}

.sx-field--check {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.65rem;
  margin: 1rem 0;
}

.sx-field--check input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0.1rem 0 0;
  padding: 0;
}

.sx-field--check label {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 400;
}

.sx-field--check .sx-error {
  flex-basis: 100%;
  padding-left: calc(22px + 0.65rem);
}

.sx-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sx-form__submit {
  min-height: 48px;
}

.sx-form__status {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
}

.sx-form__status.is-error {
  color: var(--sx-error);
}

.sx-form__status.is-success {
  color: var(--sx-success);
}

.sx-form-done {
  padding: 1.25rem;
  border-radius: 12px;
  background: #ecfdf3;
  color: var(--sx-success);
}

.sx-form-done h3 {
  margin: 0 0 0.5rem;
  color: var(--sx-success);
  font-size: 1.15rem;
}

.sx-form-done p {
  margin: 0 0 0.5rem;
  color: var(--sx-ink);
}

@media (max-width: 600px) {
  .sx-form__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- styles/icons.css ---- */
/*
 * Icons: a subset of Font Awesome Free 6.4.0 by Fonticons, Inc. (https://fontawesome.com),
 * renamed as the SIL Open Font License 1.1 requires. Licence: /assets/fonts/LICENSE-icons.txt
 * Generated by tools/build-icons.py; do not edit by hand.
 */

@font-face {
  font-family: "SelNexa Icons";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/assets/fonts/icons-solid.woff2") format("woff2");
}

@font-face {
  font-family: "SelNexa Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/fonts/icons-regular.woff2") format("woff2");
}

@font-face {
  font-family: "SelNexa Brand Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/fonts/icons-brands.woff2") format("woff2");
}

 .fas, .far {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 .fas { font-family: "SelNexa Icons"; font-weight: 900; }
.far { font-family: "SelNexa Icons"; font-weight: 400; }
.fa-brain::before { content: "\f5dc"; }
.fa-bullseye::before { content: "\f140"; }
.fa-calendar-check::before { content: "\f274"; }
.fa-chart-pie::before { content: "\f200"; }
.fa-clipboard-list::before { content: "\f46d"; }
.fa-envelope::before { content: "\f0e0"; }
.fa-file-medical::before { content: "\f477"; }
.fa-globe-africa::before { content: "\f57c"; }
.fa-heart-pulse::before { content: "\f21e"; }
.fa-language::before { content: "\f1ab"; }
.fa-lightbulb::before { content: "\f0eb"; }
.fa-map-marker-alt::before { content: "\f3c5"; }
.fa-phone::before { content: "\f095"; }
.fa-question-circle::before { content: "\f059"; }
.fa-route::before { content: "\f4d7"; }
.fa-video::before { content: "\f03d"; }