@tailwind base;
@tailwind components;
@tailwind utilities;

/* JSS Scientific Solutions — Official Logo Theme Tokens */
:root {
    --bg-sterile-surface: #FFFFFF;
    --bg-lab-slate: #F8FAFC;
    --bg-lab-subtle: #F1F5F9;
    --bg-card-glass: rgba(255, 255, 255, 0.96);
    --bg-card-glass-hover: rgba(255, 255, 255, 0.99);
    
    /* Authentic JSS Brand Palette Extracted from New Logo */
    --logo-navy-primary: #192A56;   /* JSS Monogram Navy */
    --logo-navy-deep: #142244;      /* Deep Foundation Navy */
    --logo-navy-dark: #0D162C;      /* Header / Footer Navy */
    --logo-red-accent: #D91A2A;     /* J-Stem Crimson Red Accent */
    --logo-red-bright: #E82436;     /* Vibrant Ruby Red */
    --logo-green-eco: #1F8A4C;      /* Sacred Kalpavriksha Foliage Green */
    --logo-green-deep: #166E3C;     /* Forest Emerald Green */
    
    --text-graphite: #0F172A;
    --text-slate: #334155;
    --text-muted: #64748B;
    
    --border-clinical: #E2E8F0;
    --border-brand: rgba(25, 42, 86, 0.25);
    --border-accent: rgba(217, 26, 42, 0.35);
    --border-glass: rgba(226, 232, 240, 0.85);
}

/* Base Body Surface - Unified Typography Across Whole Site */
body, h1, h2, h3, h4, h5, h6, .font-heading, button, input, select, textarea, p, span, a, td, th, li, label, strong, b, em {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Explicitly preserve Font Awesome icon font families */
i.fas, i.far, i.fab, i.fa, .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    letter-spacing: -0.025em;
}

/* Brand Name Typography in Navbar & Footer */
.brand-nav-title {
    font-weight: 900 !important;
    letter-spacing: -0.025em;
}
.brand-footer-title {
    font-weight: 900 !important;
    letter-spacing: -0.025em;
}
.brand-footer-entity {
    font-weight: 800 !important;
    letter-spacing: 0.025em;
}

/* Continuous Running Ribbon Styles */
@keyframes continuousMarquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}
.running-ribbon-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}
.running-ribbon-track {
    display: flex !important;
    width: max-content !important;
    animation: continuousMarquee 38s linear infinite !important;
    will-change: transform;
}
.running-ribbon-track:hover {
    animation-play-state: paused !important;
}

/* Precision Technical Accents */
.tech-tag {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    background: #FFFFFF;
    color: #1E293B;
}

.hairline-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    box-shadow: 0 4px 20px -4px rgba(25, 42, 86, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.hairline-card:hover {
    border-color: rgba(25, 42, 86, 0.25);
    box-shadow: 0 12px 28px -12px rgba(25, 42, 86, 0.14), 0 2px 8px -2px rgba(25, 42, 86, 0.05);
    transform: translateY(-2px);
}

/* ──── Executive Tactile Card Architecture ──── */
.tactile-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 1.25rem;
    box-shadow: 0 4px 20px -4px rgba(25, 42, 86, 0.07), 0 2px 6px -1px rgba(25, 42, 86, 0.03);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

/* Flat navy hairline. Crimson is reserved for primary actions, so it is
   deliberately absent here — a gradient on every card makes the accent
   colour read as wallpaper rather than as a signal. */
.tactile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #192A56;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.tactile-card:hover {
    transform: translateY(-2px);
    border-color: rgba(25, 42, 86, 0.28);
    box-shadow: 0 12px 28px -12px rgba(25, 42, 86, 0.16), 0 2px 8px -2px rgba(25, 42, 86, 0.06);
}

.tactile-card:hover::before {
    opacity: 1;
}

/* ──── Icon Box Containers ────
   Colour carries meaning, not decoration:
     brand   → structure / default
     eco     → verified & compliant status only
     accent  → primary action only
   The purple / cyan / amber variants are kept as class names so existing
   markup and scripts stay untouched, but they now resolve to the navy and
   slate treatments. Nothing in the HTML needs to change. */
.icon-box-brand {
    background: #EFF2FA;
    color: #192A56;
    border: 1px solid rgba(25, 42, 86, 0.16);
    box-shadow: none;
}

.icon-box-emerald {
    background: #F0FDF4;
    color: #166E3C;
    border: 1px solid rgba(31, 138, 76, 0.20);
    box-shadow: none;
}

.icon-box-accent {
    background: #FEF2F2;
    color: #D91A2A;
    border: 1px solid rgba(217, 26, 42, 0.18);
    box-shadow: none;
}

.icon-box-purple,
.icon-box-cyan,
.icon-box-amber {
    background: #F1F5F9;
    color: #334155;
    border: 1px solid #E2E8F0;
    box-shadow: none;
}

/* ──── Clean Executive Section Backgrounds & Patterns ──── */

/* Main content area */
main#main-content {
    background: transparent;
}

/* Clean Modern Section Backgrounds (Geometric Patterns Removed) */
.bg-pattern-dots,
.bg-pattern-grid,
.bg-pattern-lab-grid,
.bg-pattern-stripes,
.bg-pattern-hex {
    background-image: none !important;
}

/* Ambient Soft Lighting Glow */
.bg-mesh-glow {
    background-image: radial-gradient(at 0% 0%, rgba(25, 42, 86, 0.04) 0px, transparent 50%),
                      radial-gradient(at 100% 100%, rgba(217, 26, 42, 0.03) 0px, transparent 50%),
                      radial-gradient(at 50% 50%, rgba(31, 138, 76, 0.02) 0px, transparent 60%);
}

/* ──── High-Impact Executive Hero Banner (Balanced Atmospheric Lab Backdrop) ──── */
.executive-hero-dark {
    background: linear-gradient(90deg, rgba(11, 18, 32, 0.90) 0%, rgba(15, 23, 42, 0.84) 52%, rgba(20, 34, 68, 0.70) 100%),
                url('../images/biopharma-research-lab.jpg') center/cover no-repeat;
    position: relative;
    overflow: hidden;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.executive-hero-dark h1,
.executive-hero-dark h2 {
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    -webkit-font-smoothing: antialiased;
}

.executive-hero-dark p {
    color: #F1F5F9;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    -webkit-font-smoothing: antialiased;
}

.executive-hero-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.25) 0%, transparent 40%, rgba(15, 23, 42, 0.45) 100%);
    pointer-events: none;
}

.executive-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #F8FAFC;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}

.executive-stat-pill {
    background: rgba(15, 23, 42, 0.70);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.25s ease;
}

.executive-stat-pill:hover {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
}

/* ──── Clean Executive Glass Navigation ──── */
.glass-nav {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 4px 20px -5px rgba(25, 42, 86, 0.08);
}

.glass-nav-scrolled {
    background: rgba(255, 255, 255, 0.99) !important;
    box-shadow: 0 10px 30px -5px rgba(25, 42, 86, 0.14) !important;
    border-bottom-color: rgba(25, 42, 86, 0.18) !important;
}

/* ──── Clinical Glassmorphic Cards ──── */
.glass-card {
    background: var(--bg-card-glass);
    border: 1px solid var(--border-glass);
    box-shadow: 0 4px 20px -5px rgba(25, 42, 86, 0.06);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
    transform: translateY(-2px);
    background: var(--bg-card-glass-hover);
    border-color: var(--border-brand);
    box-shadow: 0 12px 28px -12px rgba(25, 42, 86, 0.14);
}

/* ──── Bento Stats Grid ──── */
.bento-stat-card-dark {
    background: linear-gradient(160deg, #142244 0%, #192A56 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border-radius: 1.25rem;
    padding: 1.75rem;
    box-shadow: 0 10px 25px -5px rgba(13, 22, 44, 0.45);
    transition: all 0.3s ease;
}

.bento-stat-card-dark:hover {
    box-shadow: 0 14px 30px -12px rgba(13, 22, 44, 0.5);
    transform: translateY(-2px);
}

/* ──── JSS Logo Palette Buttons ──── */
.glow-btn-brand {
    background: #192A56;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.glow-btn-brand:hover {
    background: #142244;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.glow-btn-accent {
    background: #D91A2A;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.glow-btn-accent:hover {
    background: #B91321;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* ──── High Precision Gradient Text ──── */
.text-gradient-brand {
    background: linear-gradient(135deg, #0D162C 0%, #192A56 50%, #29437A 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-accent {
    background: linear-gradient(135deg, #D91A2A 0%, #E82436 50%, #B91321 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-jss {
    background: linear-gradient(90deg, #D91A2A 0%, #192A56 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ──── Clean Scrollbar ──── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
    border: 1px solid rgba(25, 42, 86, 0.15);
}
::-webkit-scrollbar-thumb:hover {
    background: #192A56;
}

/* ──── Scroll Reveal Animations ──── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* ──── Page Preloader ──── */
#preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #F8FAFC;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

.loader-ring {
    width: 55px;
    height: 55px;
    border: 3px solid rgba(25, 42, 86, 0.15);
    border-radius: 50%;
    border-top-color: #192A56;
    border-right-color: #D91A2A;
    border-bottom-color: #1F8A4C;
    animation: spin 0.8s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ──── Infinite Marquee Animation for Brands ──── */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 35s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* ──── Navigation Links ──── */
.nav-link-dark {
    position: relative;
    padding-bottom: 4px;
    font-weight: 600;
    color: #1E293B;
}
.nav-link-dark::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #192A56;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
.nav-link-dark:hover::after,
.nav-link-dark.active::after {
    width: 80%;
}

/* ──── Light Chatbot Float Widget ──── */
#chat-window {
    box-shadow: 0 25px 60px -15px rgba(25, 42, 86, 0.25);
    border: 1px solid rgba(25, 42, 86, 0.25);
}

.chat-bubble-user {
    background: linear-gradient(135deg, #192A56 0%, #253D7A 100%);
    color: #ffffff;
}

.chat-bubble-ai {
    background: #F8FAFC;
    color: #1E293B;
    border: 1px solid #E2E8F0;
}

.chat-pill {
    background: rgba(25, 42, 86, 0.08);
    border: 1px solid rgba(25, 42, 86, 0.20);
    color: #192A56;
    transition: all 0.2s ease;
}

.chat-pill:hover {
    background: #192A56;
    color: #ffffff;
    border-color: #192A56;
    transform: translateY(-1px);
}

/* Responsive Overrides */
@media (max-width: 640px) {
    .glass-card {
        padding: 1.25rem !important;
    }
    #chat-window {
        width: calc(100vw - 1.5rem) !important;
        right: 0.75rem !important;
        bottom: 5.5rem !important;
        max-height: 80vh !important;
    }
}

/* ──── 3D Holographic Brand Sphere (Pure Frameless Architecture) ──── */
/* overflow is clipped so the outermost brand pills cannot drift out of the
   column and land on the hero headline and paragraph. The sphere keeps all
   of its drag and hover behaviour — only its bleed is contained. */
#brand-sphere-container {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: grab;
    mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 96%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 60%, transparent 96%);
}

#brand-sphere-container.is-interacting {
    cursor: grabbing;
}

/* Background Canvas Layer */
.sphere-canvas-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Sphere DOM Label Container */
.brand-sphere-dom {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* Brand Sphere Floating Badges — Glassmorphic Pill Redesign */
.brand-sphere-pill {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    font-family: 'Outfit', 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* 0.45rem keeps every pill at or above the 24px minimum touch target.
       They are absolutely positioned on the sphere, so nothing reflows. */
    padding: 0.45rem 0.75rem 0.45rem 0.6rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(203, 213, 225, 0.90);
    box-shadow:
        0 2px 8px -2px rgba(33, 51, 89, 0.08),
        0 0 0 0.5px rgba(255, 255, 255, 0.8) inset;
    cursor: pointer;
    will-change: transform, opacity;
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease;
}

.brand-sphere-pill .pill-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    flex-shrink: 0;
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.10);
    animation: dotPulse 3s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

.brand-sphere-pill .pill-title {
    font-weight: 700;
    color: var(--logo-navy-primary);
    letter-spacing: -0.01em;
    line-height: 1;
    transition: color 0.15s ease;
}

/* ── Front Depth Tier: Crisp & Bold ── */
.brand-sphere-pill.is-hero-front {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(25, 42, 86, 0.30);
    box-shadow:
        0 8px 24px -4px rgba(33, 51, 89, 0.16),
        0 0 0 0.5px rgba(255, 255, 255, 0.95) inset;
}

.brand-sphere-pill.is-hero-front .pill-title {
    font-weight: 800;
}

/* ── Mid Depth Tier ── */
.brand-sphere-pill.is-hero-mid {
    background: rgba(255, 255, 255, 0.80);
    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 3px 12px -3px rgba(33, 51, 89, 0.08);
}

.brand-sphere-pill.is-hero-mid .pill-title {
    font-weight: 600;
}

/* ── Back Depth Tier: Translucent & Compact to Expose Constellation Lines ── */
.brand-sphere-pill.is-hero-back {
    opacity: 0.30;
    /* Horizontal padding stays tight so the back tier reads as recessed;
       vertical padding matches the base so these still clear the 24px
       minimum target as the sphere rotates them forward. */
    padding: 0.45rem 0.5rem 0.45rem 0.45rem;
    background: rgba(255, 255, 255, 0.60);
    border-color: rgba(226, 232, 240, 0.60);
}

.brand-sphere-pill.is-hero-back .pill-title {
    font-size: 0.88em;
    font-weight: 500;
}

/* ── Interactive Hover State ── */
.brand-sphere-pill.is-hovered,
.brand-sphere-pill:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: var(--brand-theme, var(--logo-red-accent)) !important;
    box-shadow:
        0 12px 32px -4px rgba(33, 51, 89, 0.22),
        0 0 0 2px rgba(var(--brand-theme-rgb, 220, 38, 38), 0.15),
        0 0 24px rgba(220, 38, 38, 0.12) !important;
    filter: none !important;
}

.brand-sphere-pill.is-hovered .pill-title,
.brand-sphere-pill:hover .pill-title {
    color: var(--brand-theme, var(--logo-red-accent)) !important;
    font-weight: 800 !important;
}

/* ──── Modal Dialog & Overlay Animations ──── */
#brand-modal, #product-modal {
    animation: modalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#brand-modal .glass-card, #product-modal .glass-card {
    animation: modalScaleIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: center center;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Custom Sleek Scrollbar for Modals */
#brand-modal .glass-card::-webkit-scrollbar,
#product-modal .glass-card::-webkit-scrollbar {
    width: 6px;
}

#brand-modal .glass-card::-webkit-scrollbar-track,
#product-modal .glass-card::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 9999px;
}

#brand-modal .glass-card::-webkit-scrollbar-thumb,
#product-modal .glass-card::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 9999px;
}

#brand-modal .glass-card::-webkit-scrollbar-thumb:hover,
#product-modal .glass-card::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* ──── Innovative Interactive Brand & Product Catalog Styling ──── */
.brand-card-premium {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 1.25rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.brand-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: var(--brand-accent, #213359);
    opacity: 0.85;
    transition: height 0.3s ease, opacity 0.3s ease;
}

.brand-card-premium:hover {
    transform: translateY(-4px);
    border-color: rgba(33, 51, 89, 0.35);
    box-shadow: 0 20px 35px -10px rgba(33, 51, 89, 0.12), 0 0 1px rgba(33, 51, 89, 0.2);
}

.brand-card-premium:hover::before {
    height: 5px;
    opacity: 1;
}

/* Interactive Model Configuration Chips */
.model-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.model-chip:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #0F172A;
    transform: translateY(-1px);
}

.model-chip.is-selected {
    background: #F0FDF4;
    border-color: #10B981;
    color: #065F46;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.model-chip.is-selected::after {
    content: '✓';
    font-size: 0.65rem;
    font-weight: 800;
    color: #059669;
}

/* Spotlight Brand Carousel / Showcase Card */
.spotlight-brand-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid #E2E8F0;
    border-radius: 1.5rem;
    transition: all 0.35s ease;
}

.spotlight-brand-card:hover {
    border-color: #213359;
    box-shadow: 0 20px 40px -15px rgba(33, 51, 89, 0.15);
}

/* ──── Institutional Client Cards ──── */
.client-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 1.25rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

.client-card:hover {
    transform: translateY(-4px);
    border-color: rgba(33, 51, 89, 0.3);
    box-shadow: 0 16px 32px -8px rgba(33, 51, 89, 0.10), 0 2px 6px rgba(33, 51, 89, 0.04);
}

.client-card .client-logo-wrapper {
    background: #FFFFFF;
    border-radius: 0.75rem;
    height: 5.5rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    transition: transform 0.3s ease;
}

.client-card:hover .client-logo-wrapper img {
    transform: scale(1.06);
}

.client-card .client-logo-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* ──── Running Ribbon (Continuous Infinite Marquee with Hover Pause) ──── */
@keyframes continuous-marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.running-ribbon-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.running-ribbon-track {
    display: flex !important;
    width: max-content !important;
    animation: continuous-marquee 38s linear infinite !important;
    will-change: transform;
}

.running-ribbon-track:hover {
    animation-play-state: paused !important;
}

/* ──── Asymmetric Aesthetic Flow & Rich Color Canvas Utilities ──── */
.asym-aura-navy {
    background: radial-gradient(circle at 20% 20%, rgba(25, 42, 86, 0.45) 0%, rgba(13, 22, 44, 0.95) 70%, #080E1E 100%);
}
.asym-aura-emerald {
    background: radial-gradient(circle at 80% 20%, rgba(5, 150, 105, 0.35) 0%, rgba(6, 78, 59, 0.95) 70%, #03231B 100%);
}
.asym-aura-slate {
    background: radial-gradient(circle at 10% 90%, rgba(241, 245, 249, 0.9) 0%, #FFFFFF 60%, rgba(238, 242, 255, 0.5) 100%);
}
.asym-aura-obsidian {
    background: radial-gradient(circle at 75% 30%, rgba(14, 165, 233, 0.2) 0%, rgba(15, 23, 42, 0.95) 60%, #0A0F1D 100%);
}
/* Currently unreferenced by any page or script. Kept so existing markup or
   CMS content cannot break, but retuned into the navy family so reusing one
   cannot reintroduce an off-palette colour. */
.asym-aura-purple {
    background: radial-gradient(circle at 30% 20%, rgba(46, 73, 132, 0.35) 0%, rgba(20, 34, 68, 0.94) 70%, #0D162C 100%);
}
.asym-aura-amber {
    background: radial-gradient(circle at 70% 30%, rgba(46, 73, 132, 0.35) 0%, rgba(20, 34, 68, 0.94) 70%, #0D162C 100%);
}
.glass-panel-dark {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.glass-panel-dark:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}

/* ──── Dropdown Navigation: Hover Bridge & Smooth Persistence ──── */
.dropdown-menu {
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease !important;
}

/* Invisible hover bridge spanning above the dropdown to bridge the gap from the trigger link */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 18px;
    background: transparent;
    pointer-events: auto;
}

/* Ensure dropdown stays open when hovering either the group or the dropdown itself */
.group:hover > .dropdown-menu,
.dropdown-menu:hover {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* ──── About Us Persistent Sticky Sub-Navigation ──── */
html, body {
    overflow-x: clip;
}

#about-sticky-subnav {
    position: sticky;
    top: 64px;
    z-index: 38;
    transition: top 0.15s ease-out, box-shadow 0.2s ease;
}

@media (min-width: 1024px) {
    #about-sticky-subnav {
        top: 114px;
    }
}

.subnav-pill {
    white-space: nowrap;
    cursor: pointer;
}




/* ──── Active Navigation State ────
   The header is a shared partial (partials/header.html), so the active link
   cannot be marked in the markup per page. Each page sets data-page on <body>
   and the matching [data-nav] link is highlighted here instead. This also
   fixes an inconsistency in the previous per-page markup, where "Home" was
   styled active on every page. */
body[data-page="home"]     a[data-nav="home"],
body[data-page="about"]    a[data-nav="about"],
body[data-page="brands"]   a[data-nav="brands"],
body[data-page="products"] a[data-nav="products"],
body[data-page="clients"]  a[data-nav="clients"],
body[data-page="contact"]  a[data-nav="contact"]:not(.inline-flex),
body[data-page="events"]   a[data-nav="events"],
body[data-page="careers"]  a[data-nav="careers"],
body[data-page="gem"]      a[data-nav="gem"]:not(.inline-flex) {
    color: #192A56;
    font-weight: 700;
}

/* Underline only the primary desktop nav row, not dropdown entries or the
   call-to-action buttons, which carry their own treatment. */
nav > a[data-nav],
nav > div > a[data-nav] {
    padding-bottom: 2px;
}
body[data-page="home"]     nav > a[data-nav="home"],
body[data-page="about"]    nav > div > a[data-nav="about"],
body[data-page="brands"]   nav > a[data-nav="brands"],
body[data-page="products"] nav > a[data-nav="products"],
body[data-page="clients"]  nav > a[data-nav="clients"],
body[data-page="contact"]  nav > a[data-nav="contact"] {
    border-bottom: 2px solid #192A56;
}

/* ═══════════════════════════════════════════════════════════════════════
   CATALOGUE INDEX — brands.html directory and brand.html detail
   ═══════════════════════════════════════════════════════════════════════

   The directory used to be a uniform six-column grid of bordered logo tiles:
   29 identical boxes that told a procurement officer nothing beyond the fact
   that a relationship exists.

   This replaces the boxes with the idiom instrument manufacturers actually
   use for their own catalogues — product photography sitting directly on
   white, no frame, no card, separated by whitespace and hairline rules only.
   Chrome competes with the product; here the product is the interface.

   Two consequences drive everything below:
     · brand logos are set large and unboxed, so a buyer recognises the
       manufacturer before reading anything;
     · product images are given real size rather than thumbnail size, because
       what a buyer is verifying is "do they actually stock this hardware".

   Colour follows the palette lockdown in tailwind.config.js: navy is
   structure, crimson is action, green is verified status. The four discipline
   hues appear only as hairline rules and eyebrow text — they encode taxonomy,
   they never fill a surface.

   Catalogue numbers are set in IBM Plex Mono. Part numbers are the vernacular
   of an OEM catalogue and are always tabular in print; this keeps ULT-2.5,
   MDF-86V588 and RAM-F-1000 aligned and scannable.
   ═══════════════════════════════════════════════════════════════════════ */

.cat-no {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-feature-settings: 'tnum' 1;
    letter-spacing: 0.01em;
}

/* ──── Discipline section header ──── */

.discipline-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--discipline, #192A56);
}

.discipline-head__title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #0F172A;
}

.discipline-head__eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #475569;
}

.discipline-head__count {
    margin-left: auto;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 500;
    color: #64748B;
    white-space: nowrap;
}

/* ──── Ledger row: no card, no border, no shadow ──── */

.ledger-row {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 1rem;
    border-bottom: 1px solid #E8EDF3;
    text-decoration: none;
    transition: background-color .18s ease;
}

.ledger-row:hover,
.ledger-row:focus-visible {
    background-color: #FFFFFF;
    outline: none;
}

.ledger-row:focus-visible {
    box-shadow: inset 3px 0 0 0 var(--discipline, #192A56);
}

.ledger-row:hover { box-shadow: inset 3px 0 0 0 var(--discipline, #192A56); }

/* Large, unboxed manufacturer mark. */
.ledger-logo {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.ledger-logo img {
    max-height: 84px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    filter: saturate(0.96);
    transition: transform .25s ease;
}

.ledger-row:hover .ledger-logo img { transform: scale(1.03); }

.ledger-logo__fallback {
    font-weight: 800;
    font-size: 1.15rem;
    color: #192A56;
    line-height: 1.15;
}

.ledger-name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0F172A;
    line-height: 1.15;
}

.ledger-row:hover .ledger-name { color: #192A56; }

.ledger-desc {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #64748B;
    margin-top: 0.35rem;
    max-width: 46ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ledger-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.7rem;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.71rem;
    font-weight: 500;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.ledger-meta__models { color: #334155; font-weight: 600; }
.ledger-meta__sep { color: #CBD5E1; }

/* ──── Evidence strip: real hardware, at real size, on white ──── */

.filmstrip {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    flex-shrink: 0;
}

.filmstrip-cell {
    width: 124px;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filmstrip-cell img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
}

.ledger-row:hover .filmstrip-cell img { transform: scale(1.07); }

.filmstrip-more {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 0.4rem;
    border-left: 1px solid #E8EDF3;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.1;
}

.filmstrip-more span {
    font-size: 0.63rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #64748B;
    margin-top: 0.15rem;
}

/* Frames drop away as the row narrows rather than shrinking to thumbnails. */
@media (max-width: 1439px) { .filmstrip-cell:nth-child(n+5) { display: none; } }
@media (max-width: 1279px) { .filmstrip-cell:nth-child(n+4) { display: none; } }
@media (max-width: 1023px) { .filmstrip-cell:nth-child(n+3) { display: none; } }

@media (max-width: 900px) {
    .ledger-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.1rem;
        padding: 1.5rem 0.5rem;
    }
    .ledger-logo { height: 62px; }
    .ledger-logo img { max-height: 56px; }
    .filmstrip { gap: 1rem; justify-content: space-between; }
    .filmstrip-cell { flex: 1 1 0; width: auto; height: 96px; }
    .filmstrip-cell:nth-child(n+3) { display: flex; }
    .filmstrip-cell:nth-child(n+5) { display: none; }
    .ledger-name { font-size: 1.2rem; }
}

/* ──── Brand detail: category rail ──── */

.cat-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    border-bottom: 1px solid #E8EDF3;
    padding-bottom: 0.9rem;
}

.cat-chip {
    background: none;
    border: none;
    padding: 0.25rem 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    border-bottom: 2px solid transparent;
    transition: color .16s ease, border-color .16s ease;
}

.cat-chip:hover { color: #192A56; }

.cat-chip[aria-pressed="true"] {
    color: #0F172A;
    font-weight: 800;
    border-bottom-color: #192A56;
}

.cat-chip__n {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.71rem;
    font-weight: 500;
    color: #64748B;
}

/* ──── Brand detail: model tile, unboxed ──── */

.model-card {
    display: flex;
    flex-direction: column;
    background: none;
    border: none;
    border-radius: 0;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid #E8EDF3;
}

/* Photography is the point: give it the whole width and real height. */
.model-card__frame {
    position: relative;
    aspect-ratio: 5 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    margin-bottom: 1.1rem;
    /* The frame is a flex item of .model-card, so min-height resolves to its
       content-based minimum — the photo's own height — which silently wins
       over aspect-ratio. A portrait product shot then stretched the frame to
       ~660px and the whole row with it. Pinning it to 0 lets the ratio hold. */
    min-height: 0;
    overflow: hidden;
}

.model-card__frame img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
}

.model-card:hover .model-card__frame img { transform: scale(1.05); }

.model-card__cat {
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748B;
}

.model-card__body { display: flex; flex-direction: column; flex: 1; }

.model-card__series {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #334155;
    margin-bottom: 0.3rem;
}

.model-card__name {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -0.012em;
    color: #0F172A;
}

.model-card__desc {
    font-size: 0.82rem;
    line-height: 1.55;
    color: #64748B;
    margin-top: 0.45rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The two specifications that decide a purchase stay visible. The previous
   design hid every specification behind a toggle. */
.spec-lead {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.spec-line {
    display: flex;
    gap: 0.5rem;
    font-size: 0.76rem;
    line-height: 1.5;
    color: #475569;
}

.spec-line::before {
    content: '';
    flex-shrink: 0;
    width: 3px;
    height: 3px;
    margin-top: 0.5rem;
    border-radius: 50%;
    background: var(--discipline, #94A3B8);
}

.spec-line span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.spec-toggle {
    margin-top: 0.6rem;
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color .15s ease;
}

.spec-toggle:hover { color: #192A56; }
.spec-toggle i { font-size: 0.58rem; transition: transform .2s ease; }
.spec-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

/* A class-level display value outranks the user-agent [hidden] rule, so the
   collapsed panels and the category rail need this to actually stay hidden. */
.spec-rest[hidden],
.cat-rail[hidden] { display: none; }

.spec-rest {
    margin-top: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-left: 0.1rem;
}

.model-card__cta {
    margin-top: 1.1rem;
    padding-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #D91A2A;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .16s ease;
}

.model-card__cta:hover { border-bottom-color: #D91A2A; }
.model-card__cta i { font-size: 0.62rem; transition: transform .18s ease; }
.model-card:hover .model-card__cta i { transform: translateX(3px); }

/* Featured partners on brands.html reuse the tile, minus the bottom rule. */
#featured-partners .model-card { border-bottom: none; padding-bottom: 0; }

/* ──── Reduced motion ──── */
@media (prefers-reduced-motion: reduce) {
    .ledger-row,
    .ledger-logo img,
    .filmstrip-cell img,
    .model-card__frame img,
    .model-card__cta i { transition: none !important; }
    .ledger-row:hover .ledger-logo img,
    .ledger-row:hover .filmstrip-cell img,
    .model-card:hover .model-card__frame img { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FLAT SURFACES — site-wide removal of card chrome
   ═══════════════════════════════════════════════════════════════════════

   The site was built from ~1,300 instances of one card signature: rounded
   corners + a slate hairline + a drop shadow + a white fill, sitting on a
   near-white page. Every region therefore read as a grid of boxes.

   Rewriting those class attributes across eight pages and six JS renderers
   would be slow and easy to get wrong, so the frame is removed here instead.
   This file loads after tailwind-compiled.css, so equal-specificity class
   selectors win on source order; the :is()/:not() chains raise specificity
   above Tailwind's single-class utilities where that is not enough.

   Kept deliberately:
     · buttons and call-to-action links — they need a hit affordance
     · inputs, selects and textareas — a field must show its own bounds
     · header, nav, dropdowns, modals, floating actions (all outside <main>)
     · anything opted out with .keep-frame

   Reverting the whole change means deleting this block.
   ═══════════════════════════════════════════════════════════════════════ */

/* A "surface" is a content container. Anchors count — many cards are links —
   except those carrying a solid action fill, which are buttons in all but
   name and must keep their shape. */

/* ──── Drop shadows ──── */
main :is(div, article, section, li, dl, dd, figure, aside, a):not(.keep-frame):not([class*="bg-brand-"]):not([class*="bg-accent-"]):not([class*="bg-eco-"]):not([class*="bg-emerald-"]):not([class*="bg-red-"]):is(
    .shadow-2xs, .shadow-xs, .shadow-sm, .shadow, .shadow-md, .shadow-lg,
    .shadow-xl, .shadow-2xl, .shadow-inner,
    .shadow-clinical, .shadow-tactile, .shadow-tactile-hover,
    .shadow-glass, .shadow-glass-lg,
    .shadow-glow-brand, .shadow-glow-accent, .shadow-glow-eco, .shadow-glow-cyan
) {
    box-shadow: none;
}

/* Hover shadows too, or the box reappears on pointer-over. */
main :is(div, article, section, li, figure, a):not(.keep-frame):not([class*="bg-brand-"]):not([class*="bg-accent-"]):not([class*="bg-eco-"]):not([class*="bg-emerald-"]):is(
    .hover\:shadow-md, .hover\:shadow-lg, .hover\:shadow-xl, .hover\:shadow-2xl
):hover {
    box-shadow: none;
}

/* ──── Corner radius ──── */
main :is(div, article, section, li, dl, dd, figure, aside, a):not(.keep-frame):not([class*="bg-brand-"]):not([class*="bg-accent-"]):not([class*="bg-eco-"]):not([class*="bg-emerald-"]):not([class*="bg-red-"]):is(
    .rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl
) {
    border-radius: 0;
}

/* ──── Enclosing borders ────
   Only the all-sides `border`. Directional rules (border-t / -b / -l / -r)
   are structure, not enclosure, and are left in place. */
main :is(div, article, section, li, dl, dd, figure, aside, a):not(.keep-frame):not([class*="bg-brand-"]):not([class*="bg-accent-"]):not([class*="bg-eco-"]):not([class*="bg-emerald-"]):not([class*="bg-red-"]).border {
    border-width: 0;
}

main :is(div, article, section, li, figure, a):not(.keep-frame):is(
    .hover\:border-brand-600, .hover\:border-brand-500, .hover\:border-brand-700,
    .hover\:border-slate-300, .hover\:border-slate-400
):hover {
    border-color: transparent;
}

/* ──── Card fills ────
   A white panel on the #F8FAFC ground still reads as a box once its border
   is gone, so the fill goes too — but only where the element was built as a
   card (a fill plus a radius), never on a plain section background. */
/* Anchors are excluded here: a white-filled link on a dark panel is a button
   in all but name, and stripping its fill left navy text on navy. */
main :is(div, article, section, li, figure):not(.keep-frame):is(
    .bg-white, .bg-sterile,
    .bg-slate-50, .bg-slate-50\/50, .bg-slate-50\/70, .bg-slate-50\/80, .bg-slate-50\/90,
    .bg-lab-50, .bg-brand-50\/30, .bg-slate-100
):is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) {
    background-color: transparent;
}

/* ──── Shared card components ──── */
.tactile-card,
.hairline-card {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.tactile-card::before,
.hairline-card::before { display: none !important; }

.tactile-card:hover,
.hairline-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ──── Lift and scale ────
   A card that rises on hover is still behaving like a card. */
main :is(div, article, section, li, figure, a):not(.keep-frame):is(
    .hover\:-translate-y-1, .hover\:-translate-y-2, .hover\:-translate-y-0\.5
):hover {
    transform: none;
}

/* ──── Hero statistics ────
   The glass pill was the last card shape left on the dark heroes. Stats now
   sit directly on the hero with a hairline between them. Inline chips keep a
   light backing so they stay legible over the photograph. */
.executive-stat-pill:not(.inline-flex) {
    background: none;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0.25rem 0 0.25rem 1.15rem;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.executive-stat-pill:not(.inline-flex):first-child {
    padding-left: 0;
    border-left: none;
}

.executive-stat-pill:not(.inline-flex):hover {
    background: none;
    border-color: rgba(255, 255, 255, 0.18);
    transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   PALETTE AND SHAPE DISCIPLINE
   ═══════════════════════════════════════════════════════════════════════

   tailwind.config.js states the rule the site is meant to follow:

       navy    → structure, headings, icons
       crimson → primary action only
       green   → verified / compliant status only
       slate   → everything else

   The markup did not follow it. Team cards, credential tags and icon tiles
   were tinted amber, sky, blue and plum in rotation — 72 places where the hue
   changes for variety and encodes nothing. Alongside that sat blurred colour
   blobs, tinted gradient card washes, chunky coloured outlines and 96 pill
   radii.

   This layer restores the documented rule without editing those 72 class
   attributes. Colour that carries meaning is untouched:
     · the four discipline accents on the brand pages (set inline, per brand)
     · emerald / eco — verified and compliant status
     · accent / red — actions
     · navy — structure

   Replacements are shade-aware: light steps (300/400) sit on the dark heroes
   and dark steps (700–900) on light tints, so each maps to a neutral of
   comparable lightness instead of one value that would invert the contrast.

   Reverting means deleting this block.
   ═══════════════════════════════════════════════════════════════════════ */

/* ──── Light steps — used on dark grounds ──── */
main [class*="text-amber-3"]:not(.tech-tag), main [class*="text-amber-4"]:not(.tech-tag),
main [class*="text-sky-3"]:not(.tech-tag), main [class*="text-sky-4"]:not(.tech-tag),
main [class*="text-blue-3"]:not(.tech-tag), main [class*="text-blue-4"]:not(.tech-tag),
main [class*="text-purple-3"]:not(.tech-tag), main [class*="text-purple-4"]:not(.tech-tag),
main [class*="text-cyan-3"]:not(.tech-tag), main [class*="text-cyan-4"]:not(.tech-tag),
main [class*="text-rose-3"]:not(.tech-tag), main [class*="text-rose-4"]:not(.tech-tag),
main [class*="text-indigo-3"]:not(.tech-tag), main [class*="text-indigo-4"]:not(.tech-tag),
main [class*="text-amber-1"]:not(.tech-tag), main [class*="text-amber-2"]:not(.tech-tag),
main [class*="text-sky-1"]:not(.tech-tag), main [class*="text-sky-2"]:not(.tech-tag),
main [class*="text-blue-1"]:not(.tech-tag), main [class*="text-blue-2"]:not(.tech-tag),
main [class*="text-purple-1"]:not(.tech-tag), main [class*="text-purple-2"]:not(.tech-tag),
main [class*="text-cyan-2"]:not(.tech-tag), main [class*="text-rose-2"]:not(.tech-tag), main [class*="text-indigo-2"]:not(.tech-tag) {
    color: #CBD5E1;
}

/* ──── Mid steps ──── */
main [class*="text-amber-5"]:not(.tech-tag), main [class*="text-amber-6"]:not(.tech-tag),
main [class*="text-sky-5"]:not(.tech-tag), main [class*="text-sky-6"]:not(.tech-tag),
main [class*="text-blue-5"]:not(.tech-tag), main [class*="text-blue-6"]:not(.tech-tag),
main [class*="text-purple-5"]:not(.tech-tag), main [class*="text-purple-6"]:not(.tech-tag),
main [class*="text-cyan-5"]:not(.tech-tag), main [class*="text-cyan-6"]:not(.tech-tag),
main [class*="text-rose-5"]:not(.tech-tag), main [class*="text-rose-6"]:not(.tech-tag),
main [class*="text-indigo-5"]:not(.tech-tag), main [class*="text-indigo-6"]:not(.tech-tag) {
    color: #192A56;
}

/* ──── Dark steps — label text on light tints ──── */
main [class*="text-amber-7"]:not(.tech-tag), main [class*="text-amber-8"]:not(.tech-tag), main [class*="text-amber-9"]:not(.tech-tag),
main [class*="text-sky-7"]:not(.tech-tag), main [class*="text-sky-8"]:not(.tech-tag), main [class*="text-sky-9"]:not(.tech-tag),
main [class*="text-blue-7"]:not(.tech-tag), main [class*="text-blue-8"]:not(.tech-tag), main [class*="text-blue-9"]:not(.tech-tag),
main [class*="text-purple-7"]:not(.tech-tag), main [class*="text-purple-8"]:not(.tech-tag), main [class*="text-purple-9"]:not(.tech-tag),
main [class*="text-cyan-7"]:not(.tech-tag), main [class*="text-cyan-8"]:not(.tech-tag),
main [class*="text-rose-7"]:not(.tech-tag), main [class*="text-rose-8"]:not(.tech-tag),
main [class*="text-indigo-7"]:not(.tech-tag), main [class*="text-indigo-8"]:not(.tech-tag) {
    color: #334155;
}

/* ──── Tinted fills ──── */
main :not(button):not(a):not(input):not(select):not(textarea)[class*="bg-amber-"],
main :not(button):not(a):not(input):not(select):not(textarea)[class*="bg-sky-"],
main :not(button):not(a):not(input):not(select):not(textarea)[class*="bg-blue-"],
main :not(button):not(a):not(input):not(select):not(textarea)[class*="bg-purple-"],
main :not(button):not(a):not(input):not(select):not(textarea)[class*="bg-cyan-"],
main :not(button):not(a):not(input):not(select):not(textarea)[class*="bg-rose-"],
main :not(button):not(a):not(input):not(select):not(textarea)[class*="bg-indigo-"] {
    background-color: #F1F5F9;
}

/* Translucent tints sit on the dark heroes; a light grey would blot them out. */
main [class*="bg-amber-"][class*="/1"], main [class*="bg-amber-"][class*="/2"], main [class*="bg-amber-"][class*="/3"],
main [class*="bg-sky-"][class*="/1"], main [class*="bg-sky-"][class*="/2"], main [class*="bg-sky-"][class*="/3"],
main [class*="bg-blue-"][class*="/1"], main [class*="bg-blue-"][class*="/2"], main [class*="bg-blue-"][class*="/3"],
main [class*="bg-purple-"][class*="/1"], main [class*="bg-purple-"][class*="/2"], main [class*="bg-purple-"][class*="/3"],
main [class*="bg-cyan-"][class*="/2"], main [class*="bg-rose-"][class*="/2"], main [class*="bg-indigo-"][class*="/2"] {
    background-color: rgba(255, 255, 255, 0.10);
}

/* ──── Tinted outlines ──── */
main [class*="border-amber-"], main [class*="border-sky-"], main [class*="border-blue-"],
main [class*="border-purple-"], main [class*="border-cyan-"], main [class*="border-rose-"],
main [class*="border-indigo-"] {
    border-color: #E2E8F0;
}

main [class*="border-amber-"][class*="/"], main [class*="border-sky-"][class*="/"],
main [class*="border-blue-"][class*="/"], main [class*="border-purple-"][class*="/"],
main [class*="border-cyan-"][class*="/"], main [class*="border-indigo-"][class*="/"] {
    border-color: rgba(255, 255, 255, 0.18);
}

/* ──── Blurred colour blobs ────
   Absolutely-positioned tinted circles blurred to a haze behind content.
   They carry no information. */
main [class*="blur-3xl"][class*="rounded-full"][class*="absolute"],
main [class*="blur-2xl"][class*="rounded-full"][class*="absolute"] {
    display: none;
}

/* ──── Tinted gradient card washes ────
   `from-white via-sky-50/40 to-white` and similar read as a sheen rather than
   a surface. Flattened so the section ground shows through. */
/* Only the light washes — from-white via-<hue>-50/40 to-white. Dark panels
   built from a gradient (from-[#16264C] and similar) keep theirs: stripping
   those left white text on a white ground. */
main :is(div, article, section, li, figure):not(.keep-frame)[class*="bg-gradient-to-br"][class*="from-white"] {
    background-image: none;
}

/* Chunky coloured card outlines. */
main :is(div, article, section, li, figure):not(.keep-frame)[class*="border-2"] {
    border-width: 0;
}

/* ──── Pill radii ────
   Text pills are squared to match the flat surfaces. Fixed-size elements —
   status dots, avatars, icon buttons — stay circular, hence the w-* skips. */
main :is(span, a, div, p, li).rounded-full:not([class*="w-1"]):not([class*="w-2"]):not([class*="w-3"]):not([class*="w-4"]):not([class*="w-5"]):not([class*="w-6"]):not([class*="w-7"]):not([class*="w-8"]):not([class*="w-9"]):not(.keep-frame) {
    border-radius: 2px;
}

.executive-hero-badge { border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   SECTION BACKDROPS

   The earlier backdrop pattern put a photograph at opacity-10 beneath a
   96% scrim: the image contributed under 1.5% — invisible as a picture,
   but enough to mottle 10px text. These replace that with the opposite
   trade: the photograph reads at the section's top and bottom edges and
   fades to a near-solid ground through the middle, where the copy sits.

   The scrim is a vertical three-stop gradient rather than a flat wash, so
   the image is legible as an image at the seams between sections and never
   competes with a line of text.

   Body copy on these sections is dark on light (#0F172A / #334155 on
   #F8FAFC), which is forgiving of a faint texture; the earlier "foggy"
   complaint traced to 10px slate-400 text, fixed separately. Contrast is
   verified against the lightest and darkest points of each image.
   ═══════════════════════════════════════════════════════════════════════ */

.section-backdrop {
    position: relative;
    isolation: isolate;          /* so ::before paints above the section fill */
}

.section-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(180deg,
            rgba(248, 250, 252, 0.70) 0%,
            rgba(248, 250, 252, 0.90) 12%,
            rgba(248, 250, 252, 0.92) 88%,
            rgba(248, 250, 252, 0.72) 100%),
        var(--sb-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Pulls the photograph toward the page's neutral so it reads as ground
       rather than as a competing colour. */
    filter: saturate(0.55);
}

/* Dark sections invert the scrim: the photograph carries more of the
   surface because white text on a dark ground has contrast to spare. */
.section-backdrop.is-dark::before {
    background-image:
        linear-gradient(180deg,
            rgba(15, 23, 42, 0.78) 0%,
            rgba(15, 23, 42, 0.90) 30%,
            rgba(15, 23, 42, 0.92) 70%,
            rgba(15, 23, 42, 0.80) 100%),
        var(--sb-image);
    filter: saturate(0.7);
}

/* On narrow screens the copy fills the section top to bottom, so there is
   no seam for the image to occupy — flatten it rather than tint the text. */
@media (max-width: 767px) {
    .section-backdrop::before {
        background-image: linear-gradient(180deg,
            rgba(248, 250, 252, 0.955) 0%, rgba(248, 250, 252, 0.985) 100%),
            var(--sb-image);
    }
    .section-backdrop.is-dark::before {
        background-image: linear-gradient(180deg,
            rgba(15, 23, 42, 0.90) 0%, rgba(15, 23, 42, 0.94) 100%),
            var(--sb-image);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .section-backdrop::before { background-attachment: scroll; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SEARCH SUGGESTIONS

   Dropdown for the shared type-ahead in assets/js/search-suggest.js. Lives
   outside <main> semantics but is rendered inside the field wrapper, so the
   site-wide flat-surface layer does not apply — this needs its own frame to
   read as a layer above the page.
   ═══════════════════════════════════════════════════════════════════════ */

.search-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 340px;
    overflow-y: auto;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.22);
}

.search-suggest[hidden] { display: none; }

.search-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    cursor: pointer;
    border-radius: 4px;
    color: #0F172A;
    font-size: 13.5px;
    line-height: 1.35;
}

/* Pointer and keyboard share one active state, so the highlighted row is the
   row Enter will choose. */
.search-suggest-item.is-active,
.search-suggest-item:hover {
    background: #F1F5F9;
}

.search-suggest-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #475569;
}

.search-suggest-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-suggest-meta {
    flex-shrink: 0;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748B;
}

@media (max-width: 640px) {
    .search-suggest { max-height: 260px; }
    .search-suggest-meta { display: none; }
}


/* ── Small text over a section backdrop ────────────────────────────────
   A photographic ground, even at 96% scrim, costs a little contrast. At
   11–12px that is the difference between slate-500 passing and failing:
   measured 4.17:1 for slate-500 and 2.24:1 for slate-400 against the
   darkest point of the About backdrops.

   Lifting both to slate-600 inside a .section-backdrop clears 4.5:1 there
   and is a negligible change on the white cards within the same section. */
.section-backdrop .text-slate-400,
.section-backdrop .text-slate-500 {
    color: #475569;
}

/* ═══════════════════════════════════════════════════════════════════════
   SITEMAP INDEX

   A page whose whole job is to be scanned, so it is set as a ledger: mono
   labels, hairline rules, and columns that break on the reader's width.
   Nothing here is a card — the flat-surfaces layer below would strip the
   chrome anyway, and an index reads better without it.
   ═══════════════════════════════════════════════════════════════════════ */
.index-eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #64748B;
    margin-bottom: 0.5rem;
}

.index-heading {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0F172A;
    line-height: 1.2;
}

.index-note,
.index-desc {
    font-size: 0.82rem;
    line-height: 1.6;
    color: #64748B;
}

.index-note {
    margin-top: 0.6rem;
    max-width: 58ch;
}

.index-desc {
    margin-top: 0.35rem;
}

/* The label above each column of links. */
.index-group {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #192A56;
    padding-bottom: 0.5rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid #E2E8F0;
}

.index-group__n {
    font-weight: 500;
    color: #94A3B8;
    margin-left: 0.4rem;
    letter-spacing: 0;
}

.index-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.index-list li {
    position: relative;
    padding-left: 0.95rem;
    /* The rhythm is carried by the link's own padding below, which is what
       makes each row a large enough touch target on a phone. */
    margin-bottom: 0.1rem;
    font-size: 0.86rem;
    line-height: 1.45;
    /* Keeps a wrapped entry from splitting across two columns. */
    break-inside: avoid;
}

.index-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 4px;
    height: 4px;
    background: #CBD5E1;
}

/* This page is nothing but links, so every one of them is sized to be
   tapped: inline-block plus vertical padding clears the 24px minimum
   without opening the list up on desktop. */
.index-list a {
    display: inline-block;
    padding: 4px 0;
    color: #334155;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .14s ease, border-color .14s ease;
}

.index-list a:hover,
.index-list a:focus-visible {
    color: #192A56;
    border-bottom-color: #B8C7E7;
}

.index-list .index-list__n {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    color: #94A3B8;
    margin-left: 0.35rem;
}

/* Long single lists flow into columns rather than a rigid grid, so the
   break points follow the reader's viewport instead of a fixed count. */
.index-list--cols {
    columns: 1;
    column-gap: 2.5rem;
}

@media (min-width: 640px) {
    .index-list--cols { columns: 2; }
}

@media (min-width: 1024px) {
    .index-list--cols { columns: 3; }
}

.index-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.55rem;
    /* A discrete action, so it is sized to be tapped like the list links. */
    padding: 5px 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #D91A2A;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .16s ease;
}

.index-link:hover { border-bottom-color: #D91A2A; }
.index-link i { font-size: 0.6rem; transition: transform .18s ease; }
.index-link:hover i { transform: translateX(3px); }

/* Hero counts. */
.index-stat__n {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    line-height: 1;
}

.index-stat__label {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.63rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94A3B8;
    margin-top: 0.4rem;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .index-link i { transition: none; }
    .index-link:hover i { transform: none; }
}