:root {
    --primary: #020617;
    --secondary: #3b82f6;
    --accent: #60a5fa;
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --text-main: #f8fafc;
    --text-dim: #94a3b8;
    --glow: 0 0 20px rgba(59, 130, 246, 0.3);
    --header-height: 90px;
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--primary);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Background Gradients */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(96, 165, 250, 0.05) 0%, transparent 50%);
    z-index: -1;
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Typography */
h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.gradient-text {
    background: linear-gradient(to right, #60a5fa, #3b82f6, #60a5fa);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 4s linear infinite;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.2));
}

@keyframes shine {
    to { background-position: 200% center; }
}

/* Header & Navbar */
.main-header {
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.main-header.scrolled {
    height: 72px;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: 40px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    color: var(--secondary);
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.03em;
}

.logo-text span {
    color: var(--secondary);
}

.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    position: relative;
    list-style: none;
}

.nav-links a:not(.btn) {
    color: var(--text-dim);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition);
}

.nav-links a:not(.btn):hover, 
.nav-links a:not(.btn).active {
    color: var(--text-main);
}

/* Dropdown */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    min-width: 240px;
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    list-style: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
    z-index: 1001;
}

/* v3's service labels are the buyer's question ("Should we employ them
   directly?") rather than a two-word product name, so the menu needs room to
   keep each one on a single line. Scoped to v3 — v1/v2 keep the 240px menu. */
.dropdown-menu.dropdown-wide {
    min-width: 330px;
}
.dropdown-menu.dropdown-wide a {
    white-space: nowrap;
}

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

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu li a {
    padding: 10px 20px;
    display: block;
    color: var(--text-dim) !important;
    font-size: 0.85rem !important;
}

.dropdown-menu li a:hover {
    background: var(--glass);
    color: var(--secondary) !important;
}

/* Spectral Data Lens */
.hero-data-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(59, 130, 246, 0.15) 0%, transparent 40%);
    clip-path: circle(120px at var(--mouse-x, 50%) var(--mouse-y, 50%));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero:hover .hero-data-layer {
    opacity: 1;
}

.data-tag {
    position: absolute;
    /* No backdrop-filter here. These badges animate (pulseGlow) and there
       are a dozen of them, so a live blur would have to be re-sampled and
       re-composited on every frame for each one. At this size the blur was
       indistinguishable from a slightly more opaque flat fill. */
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid var(--glass-border);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: pulseGlow 3s infinite;
    z-index: 10;
}

.tag-financial { border-color: rgba(16, 185, 129, 0.5); color: #10b981; } /* Emerald */
.tag-clinical { border-color: rgba(139, 92, 246, 0.5); color: #8b5cf6; } /* Violet */
.tag-operational { border-color: rgba(245, 158, 11, 0.5); color: #f59e0b; } /* Amber */
.tag-strategic { border-color: rgba(59, 130, 246, 0.5); color: #3b82f6; } /* Blue */

@keyframes pulseGlow {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: var(--header-height);
    position: relative;
}

.hero-content {
    max-width: 850px;
    position: relative;
    z-index: 2;
}

.tagline {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 24px;
    display: inline-block;
}

.hero h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    margin-bottom: 24px;
}

.hero p {
    font-size: 1.2rem;
    color: var(--text-dim);
    margin-bottom: 40px;
    max-width: 650px;
}

.hero-btns {
    display: flex;
    gap: 20px;
}

/* Grid System */
.grid {
    display: grid;
    gap: 30px;
}

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

/* Buttons */
.btn {
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 0.95rem;
}

.btn-primary {
    background: var(--secondary);
    color: white !important;
    border: none;
}

.btn-primary:hover {
    background: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

.btn-outline {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: var(--text-main) !important;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--secondary);
}

/* Cards */
.card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 20px;
    transition: var(--transition);
    height: 100%;
}

.card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--secondary);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

svg {
    width: 1em;
    height: 1em;
    stroke-width: 2px;
}

.card-icon {
    width: 48px;
    height: 48px;
    color: var(--secondary);
    margin-bottom: 24px;
    stroke-width: 1.5px;
}

/* Sections */
section {
    padding: 120px 0;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 60px;
    text-align: center;
}

/* Stats */
.stats-grid {
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    padding: 60px 40px;
    border-radius: 30px;
    margin-top: -80px;
    position: relative;
    z-index: 10;
}

.stat-item {
    transition: var(--transition);
    padding: 20px;
    border-radius: 20px;
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.02);
    transform: translateY(-5px);
}

.stat-item h3 {
    font-size: 2.5rem;
    margin-bottom: 8px;
    transition: var(--transition);
}

.stat-item:hover h3 {
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.5));
}

.stat-item p {
    color: var(--text-dim);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Footer */
.main-footer {
    background: linear-gradient(to bottom, transparent, rgba(2, 6, 23, 1));
    border-top: 1px solid var(--glass-border);
    padding: 100px 0 40px;
    margin-top: 100px;
}

.footer-col h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
    list-style: none;
}

.footer-links a {
    color: var(--text-dim);
    text-decoration: none;
    transition: var(--transition);
}

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

.social-links {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--text-dim);
}

.social-links a:hover {
    background: var(--secondary);
    color: white;
}

.footer-bottom {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-legal {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-legal li {
    list-style: none;
}

.footer-legal a {
    color: var(--text-dim) !important;
    font-size: 0.85rem;
    text-decoration: none;
    transition: var(--transition);
}

.footer-legal a:hover {
    color: var(--text-main) !important;
}

/* Scanner Laser Beam
   The beam used to be a 2px bar whose `top` was animated between 20% and 80%
   of the radar. `top` is a layout property, so every frame invalidated layout.
   Now the element is a full-height, non-painting carrier that is translated
   instead (compositor only), and the visible 2px line lives on ::before.
   translateY(%) resolves against the carrier's own height — which is the
   radar's height — so the travel is identical to the old percentages. */
.scanner-beam {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    animation: scanMove 4s ease-in-out infinite;
}

.scanner-beam::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--secondary), transparent);
    box-shadow: 0 0 15px var(--secondary);
}

@keyframes scanMove {
    0%, 100% { transform: translateY(20%); opacity: 0.2; }
    50% { transform: translateY(80%); opacity: 1; }
}

/* Coordinate Labels */
.radar-coord {
    position: absolute;
    font-family: monospace;
    font-size: 0.5rem;
    color: var(--secondary);
    opacity: 0;
    animation: coordFade 4s linear infinite;
}

@keyframes coordFade {
    0%, 15% { opacity: 0; }
    20%, 40% { opacity: 0.6; }
    50%, 100% { opacity: 0; }
}

/* Diagnostic Scan Terms */
.scan-term {
    position: absolute;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--secondary);
    text-transform: uppercase;
    opacity: 0.4;
}

/* Enhancing Radar Container */
.radar-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    margin: 0 auto;
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    overflow: hidden;
}

.radar-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    animation: pulseRadar 4s infinite;
}

.radar-circle:nth-child(1) { width: 100%; animation-delay: 0s; }
.radar-circle:nth-child(2) { width: 70%; animation-delay: 1s; }
.radar-circle:nth-child(3) { width: 40%; animation-delay: 2s; }

.radar-sweep {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(59, 130, 246, 0.2) 50%, transparent 100%);
    border-radius: 50%;
    animation: rotate 4s linear infinite;
    z-index: 1;
}

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

/* Data Blips on Radar */
.radar-blip {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--secondary);
    border-radius: 50%;
    filter: blur(1px);
    box-shadow: 0 0 10px var(--secondary);
    opacity: 0;
    animation: blipFade 4s linear infinite;
    z-index: 2;
}

@keyframes blipFade {
    0%, 10% { opacity: 0; transform: scale(0.5); }
    15% { opacity: 1; transform: scale(1.2); }
    30%, 100% { opacity: 0; transform: scale(1); }
}

.analyzing-text {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--secondary);
    margin-top: 10px;
    letter-spacing: 4px;
    animation: textFlicker 3s infinite;
}

@keyframes textFlicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.5; }
    94% { opacity: 1; }
    95% { opacity: 0.3; }
    96% { opacity: 1; }
}

@keyframes pulseRadar {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.05); border-color: var(--secondary); }
}

/* Shield of Fortitude Animation */
.shield-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px;
    height: 100%;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.6;
}

.shield-layer {
    position: absolute;
    border: 1px solid var(--glass-border);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: var(--transition);
}

.shield-layer:nth-child(1) {
    width: 350px;
    height: 400px;
    animation: rotateShield 30s linear infinite;
    opacity: 0.1;
}

.shield-layer:nth-child(2) {
    width: 250px;
    height: 290px;
    animation: rotateShield 20s linear infinite reverse;
    opacity: 0.2;
}

.shield-layer:nth-child(3) {
    width: 150px;
    height: 175px;
    animation: rotateShield 15s linear infinite;
    opacity: 0.3;
    border-color: var(--secondary);
    box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.2);
}

@keyframes rotateShield {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Security Shield Pulse */
.security-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
}

/* Holographic Floating UI Elements */
.holo-float {
    position: absolute;
    /* Same reasoning as .data-tag: this one drifts continuously (holoFloat),
       and a moving blur region is re-blurred every frame. */
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 5;
    pointer-events: none;
    animation: holoFloat 8s ease-in-out infinite;
}

.holo-bar-container {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 30px;
    margin-top: 10px;
}

.holo-bar {
    width: 6px;
    background: var(--secondary);
    border-radius: 2px;
    opacity: 0.6;
    animation: growBar 2s ease-in-out infinite alternate;
}

.holo-bar:nth-child(1) { height: 60%; animation-delay: 0.1s; }
.holo-bar:nth-child(2) { height: 90%; animation-delay: 0.3s; }
.holo-bar:nth-child(3) { height: 40%; animation-delay: 0.5s; }
.holo-bar:nth-child(4) { height: 75%; animation-delay: 0.2s; }

@keyframes holoFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(5px, -15px) rotate(1deg); }
    66% { transform: translate(-5px, -10px) rotate(-1deg); }
}

@keyframes growBar {
    from { transform: scaleY(0.4); opacity: 0.3; }
    to { transform: scaleY(1); opacity: 0.8; }
}

/* Solutions Card Enhancements */
.card-amber { --accent-glow: rgba(245, 158, 11, 0.2); --accent-border: #f59e0b; }
.card-emerald { --accent-glow: rgba(16, 185, 129, 0.2); --accent-border: #10b981; }
.card-violet { --accent-glow: rgba(139, 92, 246, 0.2); --accent-border: #8b5cf6; }
.card-blue { --accent-glow: rgba(59, 130, 246, 0.2); --accent-border: #3b82f6; }
.card-indigo { --accent-glow: rgba(99, 102, 241, 0.2); --accent-border: #6366f1; }
.card-cyan { --accent-glow: rgba(6, 182, 212, 0.2); --accent-border: #06b6d4; }

.solutions .grid {
    perspective: 1000px;
}

.solutions .card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    border: 1px solid var(--glass-border);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background 0.3s ease;
    overflow: hidden;
}

.solutions .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--accent-glow) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.solutions .card:hover::before {
    opacity: 1;
}

.solutions .card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--accent-border);
    background: var(--accent-glow);
}

.solution-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
    margin-bottom: 15px;
}

.solutions .card:hover .solution-tag {
    border-color: var(--accent-border);
    color: white;
}

.solutions .card .card-icon {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.solutions .card:hover .card-icon {
    transform: scale(1.1) rotate(-5deg);
    color: var(--accent-border);
    filter: drop-shadow(0 0 10px var(--accent-border));
}

.solutions .card h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
    transition: color 0.3s ease;
}

.solutions .card:hover h3 {
    color: white;
}

/* Refined Contact Portal */
.contact-portal .grid {
    align-items: stretch;
}

.contact-form input, 
.contact-form select, 
.contact-form textarea {
    /* Form controls do not inherit font-family. Left unset, each falls back to
       its own UA default — inputs and selects to Arial, textareas to monospace
       — so this form was being set in three typefaces at once, against labels
       in a fourth. The textarea was the obvious one: a monospace block of
       placeholder prose in the middle of a page set in Plex Sans. */
    font-family: inherit;
    width: 100%;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--glass-border) !important;
    padding: 16px !important;
    border-radius: 10px !important;
    color: white !important;
    font-size: 0.95rem !important;
    transition: var(--transition) !important;
}

.contact-form input:focus, 
.contact-form select:focus, 
.contact-form textarea:focus {
    border-color: var(--secondary) !important;
    background: rgba(59, 130, 246, 0.05) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
}

.diagnostic-card {
    /* Was a saturated blue gradient, which put the loudest thing on the page
       next to — and in the same colour as — the submit button. It is context,
       not the call to action, so it recedes: same panel treatment as the rest
       of the site, with blue kept for the accents only. */
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: none !important;
}
.diagnostic-card h3 { color: var(--text-main); }
.diagnostic-card p { color: var(--text-dim); opacity: 1; }
.diagnostic-card p strong { color: var(--text-main); font-weight: 600; }
.diagnostic-card [data-lucide="check"] { color: var(--secondary) !important; }
.diagnostic-card [data-lucide="shield-check"] { opacity: 0.05; }

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: var(--transition);
}

.contact-info-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--secondary);
    transform: translateX(5px);
}

/* Animations */
@keyframes fadeInUp {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-fade-up {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staged Hero Animations */
.hero-content > * {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-content .tagline { animation-delay: 0.1s; }
.hero-content h1 { animation-delay: 0.3s; }
.hero-content p { animation-delay: 0.5s; }
.hero-content .hero-btns { animation-delay: 0.7s; }

/* Mobile Toggle */
.mobile-menu-toggle {
    display: none;
}

@media (max-width: 992px) {
    .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
    
    .nav-links { 
        display: none; 
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(2, 6, 23, 0.95);
        backdrop-filter: blur(16px);
        flex-direction: column;
        padding: 20px;
        border-bottom: 1px solid var(--glass-border);
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .nav-links.active { display: flex; }
    .nav-links li { width: 100%; text-align: center; margin-bottom: 10px; }
    
    .dropdown-menu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(255,255,255,0.05);
        margin-top: 10px;
        width: 100%;
    }
    .dropdown:hover .dropdown-menu, .dropdown.active .dropdown-menu {
        display: block;
    }
    
    .mobile-menu-toggle { display: block; }
    .hero h1 { font-size: 2.5rem; }
    .container { padding: 0 24px; }
    .footer-bottom { flex-direction: column; gap: 20px; text-align: center; }
}

/* ------------------------------------------------------------------
   Mobile overflow fixes.

   Several pages set `display: flex` inline on cards that pair an image
   with copy. Inline styles win over the stylesheet, but `flex-wrap` is
   never set inline — so a plain rule is enough to let those cards stack
   on a phone. Padding IS set inline, hence the override on that one.

   Measured before: /team 442px, /services-2 403px and /resources 385px
   of horizontal scroll inside a 375px viewport.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .container { padding: 0 20px; }

    .team-member,
    .resources-grid .card { flex-wrap: wrap; }

    .resources-grid .card {
        padding: 26px !important;
        gap: 20px !important;
    }

    /* long headings shouldn't force the page wider than the screen */
    h1, h2, h3 { overflow-wrap: break-word; }
}

/* ==========================================================================
   Visual pass — typography, texture, and reveals that actually reveal.

   Three changes, in order of how much they do:

   1. Type. The site was entirely Inter. It now runs Archivo for display,
      IBM Plex Sans for copy and IBM Plex Mono for anything numeric — the
      same trio as the platform demo, so marketing and product read as one
      product rather than two vendors. Mono on figures is what makes a page
      look like it knows something.

   2. Texture. A hairline instrument grid under everything, at an alpha low
      enough that you feel it rather than see it.

   3. Motion. `.animate-fade-up` was a plain CSS animation firing on load,
      so every reveal below the fold played out while off-screen and was
      finished before anyone scrolled to it. It is now armed by the observer
      in main.js — and only when JS is present, so the no-JS path still
      shows the page.
   ========================================================================== */

:root {
    --font-display: 'Archivo', 'Helvetica Neue', sans-serif;
    --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --positive: #35d6a4;
}

body { font-family: var(--font-body); }

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    letter-spacing: -0.035em;
}
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }

/* Figures, labels and anything that reads as a readout */
.tagline,
.solution-tag,
.stat-number,
.stat-item p,
.holo-float h3,
.holo-float p {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum' 1;
}

/* The floating metric tag on each service — a readout, so it should look like
   one rather than like a heading that happens to contain a number. */
.holo-float h3 {
    font-weight: 600;
    letter-spacing: -0.04em;
}
.holo-float p {
    font-weight: 500;
    letter-spacing: 0.18em !important;
}

.tagline {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.22em;
}

.solution-tag {
    font-weight: 500;
    letter-spacing: 0.16em;
    font-size: 0.62rem;
}

.stat-number {
    font-weight: 600;
    letter-spacing: -0.05em;
}

/* The instrument grid. Sits under the existing radial washes rather than
   replacing them. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
    background-size: 68px 68px;
}

/* Reveals — armed only when JS is present (see the `js` class set in head) */
.js .animate-fade-up {
    opacity: 0;
    animation: none;
    transform: translateY(22px);
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .animate-fade-up.in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .animate-fade-up { opacity: 1; transform: none; transition: none; }
    .hero-content > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   Solution cards — icon and tag as overlays.

   The icon used to sit loose in the content column between the tag and the
   title, belonging to neither. It now straddles the image edge, which is
   where a card badge reads as deliberate rather than left over. The tag joins
   it on the image so the content column can start cleanly on the title.

   The description was clipped by `height: 60px; overflow: hidden`, which cuts
   through the middle of a line — line-clamp stops at a line boundary and
   ellipses instead.
   -------------------------------------------------------------------------- */
.sol-media {
    position: relative;
    line-height: 0;
}

.sol-media .solution-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    line-height: 1.7;
    color: #fff;
    background: rgba(6, 10, 18, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
}

.sol-icon {
    position: absolute;
    left: 28px;
    bottom: 0;
    transform: translateY(50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: var(--secondary);
    background: #0b111c;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
    transition: var(--transition);
}

.card:hover .sol-icon {
    transform: translateY(50%) scale(1.07);
    border-color: var(--secondary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 22px rgba(59, 130, 246, 0.35);
}

.sol-copy {
    color: var(--text-dim);
    margin-bottom: 25px;
    line-height: 1.55;
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.65em;   /* three lines, so buttons stay on one baseline */
}

/* --------------------------------------------------------------------------
   Team cards.

   Previously six of the eight people had a name and a job title and nothing
   else, which reads as a placeholder. Every card now carries a bio, so the
   layout has to hold a paragraph without the photos fighting it: photos sit
   above the copy in a left-aligned column rather than centred over it.
   -------------------------------------------------------------------------- */
.team-grid {
    /* the page header already gives 60px of air; the global 120px on top of
       that left the first card 180px adrift */
    padding-top: 24px;
}

.team-count {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 22px;
}

.team-heading {
    font-size: 2rem;
    margin-bottom: 34px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glass-border);
}

.team-member { text-align: left; }

.team-member h3 {
    font-size: 1.2rem;
    margin: 0 0 6px;
    line-height: 1.25;
}

.team-member .tm-role {
    font-family: var(--font-mono);
    color: var(--secondary);
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.team-member .tm-bio {
    font-size: 0.92rem;
    color: var(--text-dim);
    line-height: 1.68;
    margin: 0;
}

.tm-photo {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: var(--bg-light);
    margin-bottom: 20px;
    flex-shrink: 0;
}
.tm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-photo-sm { width: 92px; height: 92px; }
.tm-photo-md { width: 116px; height: 116px; }
.tm-photo-lg { width: 190px; height: 190px; border-radius: 20px; margin-bottom: 0; }

/* Managing Director sits above both grids as a single wide card */
.team-lead {
    display: flex;
    gap: 36px;
    align-items: flex-start;
    margin-bottom: 80px;
}
.team-lead h3 { font-size: 1.6rem; margin: 14px 0 10px; }
.team-lead .tm-bio { font-size: 0.98rem; max-width: 70ch; }

.tm-mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--transition);
}
.tm-mail:hover { color: var(--secondary); border-bottom-color: var(--secondary); }

@media (max-width: 768px) {
    .team-lead { flex-wrap: wrap; gap: 24px; }
    .tm-photo-lg { width: 140px; height: 140px; }
}

/* Link back to the full biography each card was condensed from. Cards in a
   grid stretch to the tallest sibling, so the link is pushed to the bottom —
   otherwise it floats mid-card wherever the bio happens to end. */
.team-member:not(.team-lead) {
    display: flex;
    flex-direction: column;
}
.team-member:not(.team-lead) .tm-bio-link {
    margin-top: auto;
    padding-top: 18px;
}

.tm-bio-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--secondary);
    text-decoration: none;
    align-self: flex-start;
    transition: var(--transition);
}
.tm-bio-link:hover { color: var(--accent); gap: 11px; }

.tm-actions {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 22px;
}
.tm-actions .tm-mail { margin-top: 0; }

/* ==========================================================================
   Services

   Listing: the alternating rows used `direction: rtl` on the container with
   `direction: ltr` patched back onto every child — flipping columns is a job
   for `order`, not for text direction. The deliverables list was locked to
   two columns inline, which held even at 117px wide; it now reflows. And the
   two-column split held down to 768px, leaving 363px columns at tablet width,
   so it now collapses at 1000px.

   Detail: both cards carried `grid-column: 1 / -1` inline alongside an @media
   block inside the style attribute. @media is not valid there, and the inline
   value beat the stylesheet rule meant to create the sidebar — so the 2/3 + 1/3
   sticky layout never rendered on any of the seven pages. Real classes now.
   ========================================================================== */

/* ── listing ───────────────────────────────────────────────────────────── */
.service-row {
    align-items: center;
    gap: 80px;
    scroll-margin-top: calc(var(--header-height) + 24px);
}
.service-row-flip .service-info { order: 2; }

/* The floating metric is absolutely positioned against this pane. It used to
   get `position: relative` from an inline style that also carried the rtl
   patch; removing that inline sent the metric to the top of the document. */
.service-visual { position: relative; }

.svc-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.svc-index {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--text-dim);
    border: 1px solid var(--glass-border);
    padding: 5px 10px;
    border-radius: 6px;
}
.svc-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--secondary);
    flex-shrink: 0;
    transition: var(--transition);
}
.service-row:hover .svc-icon {
    border-color: var(--secondary);
    box-shadow: 0 0 22px rgba(59, 130, 246, 0.25);
}

.svc-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 18px; }
.svc-lede { font-size: 1.1rem; color: var(--text-dim); margin-bottom: 32px; line-height: 1.7; }

.service-outcomes {
    background: rgba(255, 255, 255, 0.02);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
}
.service-outcomes h3 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--secondary);
    margin-bottom: 20px;
    font-weight: 500;
}
.svc-deliverables {
    list-style: none;
    padding: 0;
    display: grid;
    /* 170px keeps two columns alive in the ~400px content pane at 1100px,
       where 190px tipped it to a single 401px column for no reason */
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px 22px;
}
.svc-deliverables li {
    display: flex;
    gap: 11px;
    align-items: center;
    font-size: 0.93rem;
    color: var(--text-dim);
}
.svc-deliverables li i { color: var(--positive); flex-shrink: 0; }

.svc-cta {
    margin-top: 34px;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.svc-focus {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding-left: 22px;
    border-left: 1px solid var(--glass-border);
}
.holo-bars { display: flex; gap: 4px; align-items: flex-end; }
.holo-bars .holo-bar { width: 4px; background: var(--positive); border-radius: 1px; }

/* ── detail ────────────────────────────────────────────────────────────── */
.svc-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 40px;
}
.svc-main {
    padding: 50px;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 24px;
}
.svc-aside {
    padding: 40px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 24px;
    border: 1px solid var(--glass-border);
}
.svc-detail-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin: 0 auto 24px;
    max-width: 900px;
}

@media (min-width: 992px) {
    .svc-detail-grid { grid-template-columns: 2fr 1fr; }
    .svc-aside { position: sticky; top: calc(var(--header-height) + 30px); }
}

@media (max-width: 1000px) {
    /* 363px columns at tablet width were too tight for a 2.5rem heading
       sitting beside a two-up deliverables list */
    .service-row { grid-template-columns: 1fr; gap: 44px; }
    .service-row-flip .service-info { order: 0; }
    /* rows are full width here, so auto-fit would run to four columns */
    .svc-deliverables { grid-template-columns: repeat(2, 1fr); }
    /* 120px between stacked rows made the page ~12,000px tall */
    .services-blueprint .grid-1 { gap: 72px !important; }
}

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

@media (max-width: 768px) {
    /* the listing ran to 12,800px on a phone — 120px between every row */
    .services-blueprint .grid-1 { gap: 64px !important; }
    .service-row { gap: 32px; }
    .svc-main { padding: 30px 24px; }
    .svc-aside { padding: 28px 24px; }
    .service-outcomes { padding: 24px; }
    .svc-focus { padding-left: 0; border-left: none; }
}

/* --------------------------------------------------------------------------
   Impact cards.

   The metric panel and copy sat in an inline `1fr 2fr` grid that never
   collapsed — at 375px that left a 235px panel holding a 56px figure beside a
   243px column of body copy. It now stacks, and the figure scales.
   -------------------------------------------------------------------------- */
.impact-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    position: relative;
    align-items: stretch;
}

.impact-metric {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-right: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
}

.impact-figure {
    font-family: var(--font-mono);
    font-size: clamp(2.2rem, 5.5vw, 3.5rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    margin-bottom: 10px;
    line-height: 1;
}

.impact-figure-label {
    font-family: var(--font-mono);
    text-align: center;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.impact-body { padding: 40px; }

@media (max-width: 860px) {
    .impact-card { grid-template-columns: 1fr; gap: 0; }
    /* the divider has to follow the layout when the panel moves on top */
    .impact-metric {
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
        padding: 32px 24px;
    }
    .impact-body { padding: 28px 24px; }
}

/* Standing notice on the Impact page: the scenarios there are constructed,
   and a reader should not have to infer that from the copy. */
.impact-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 44px;
    padding: 18px 22px;
    border: 1px solid rgba(240, 168, 72, 0.32);
    border-left: 3px solid #f0a848;
    background: rgba(240, 168, 72, 0.06);
    border-radius: 12px;
    color: #f0a848;
}
.impact-notice p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.62;
    color: var(--text-dim);
}
.impact-notice strong { color: var(--text-main); }

/* --------------------------------------------------------------------------
   Process track (v3 Our Story). A path connecting the four stages — structure
   only, no plotted data. The line is drawn with stroke-dashoffset and released
   by the `.in` class the reveal observer already applies, so it uses the
   existing motion system rather than a second one. Nodes pop in behind it.
   -------------------------------------------------------------------------- */
.process-track { margin: 0 0 -12px; padding: 0 0 6px; }
.process-track svg { width: 100%; height: 40px; display: block; overflow: visible; }

.process-track .track-base {
    stroke: var(--glass-border, rgba(255,255,255,0.12));
    stroke-width: 2;
    stroke-linecap: round;
}
.process-track .track-line {
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 750;
    stroke-dashoffset: 750;
}
.process-track .track-node {
    fill: var(--bg, #020617);
    stroke: var(--secondary, #0ea5e9);
    stroke-width: 2;
    opacity: 0;
    transform: scale(0.4);
    transform-origin: center;
    transform-box: fill-box;
}

/* armed by the reveal observer */
.js .process-track.in .track-line {
    transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
    stroke-dashoffset: 0;
}
.js .process-track.in .track-node {
    transition: opacity 0.45s ease var(--d, 0s), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
    opacity: 1;
    transform: scale(1);
}

/* No JS: the observer never runs, so show the finished state rather than an
   empty strip. */
html:not(.js) .process-track .track-line { stroke-dashoffset: 0; }
html:not(.js) .process-track .track-node { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .process-track .track-line { transition: none !important; stroke-dashoffset: 0 !important; }
    .process-track .track-node { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* The track maps onto a 4-across row; below that the cards stack and a
   horizontal connector no longer describes anything. */
@media (max-width: 992px) { .process-track { display: none; } }

/* --------------------------------------------------------------------------
   Reduced motion.
   Everything listed here is ambience — a radar that sweeps, badges that
   breathe, a gradient that travels. None of it carries information, so when
   the OS asks for less movement it simply stops, in its resting state. The
   hero canvas is handled in animation.js, which draws one static frame
   instead of running the loop.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .gradient-text,
    .data-tag,
    .holo-float,
    .holo-bar,
    .scanner-beam,
    .radar-coord,
    .radar-circle,
    .radar-sweep,
    .radar-blip,
    .analyzing-text,
    .shield-layer,
    .security-halo {
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   Hero trace, subtle profile.
   The amplitude and the glow are handled in animation.js; this is the other
   half of the same idea. A photographic hero already has a foreground, so the
   trace is masked out under the copy column and left to run at the edges —
   texture in the periphery, nothing across the headline. The ellipse is
   off-centre because the copy is, and it is soft-edged so there is no visible
   boundary where the waveform stops.
   -------------------------------------------------------------------------- */
#hero-canvas[data-trace="subtle"] {
    -webkit-mask-image: radial-gradient(ellipse 52% 60% at 40% 50%,
        rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.5) 72%, #000 96%);
            mask-image: radial-gradient(ellipse 52% 60% at 40% 50%,
        rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.5) 72%, #000 96%);
}

/* --------------------------------------------------------------------------
   Grouped services dropdown (v3).
   A flat list of eight is a list you read; three named groups of two or three
   is a list you scan. The headings are labels, not links, so they are not in
   the tab order and do not look clickable.
   -------------------------------------------------------------------------- */
.dropdown-menu .dropdown-head {
    padding: 14px 18px 6px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    pointer-events: none;
}
.dropdown-menu .dropdown-head:first-child { padding-top: 6px; }

.dropdown-menu .dropdown-lead {
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 4px;
    padding-bottom: 4px;
}
.dropdown-menu .dropdown-lead > a { align-items: flex-start; }
.dropdown-menu .dropdown-note {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   Hero scope lines (v3).
   What the ten floating tags were trying to say, said in three readable rows.
   Quiet by design — this sits under the CTAs and is for the reader who has
   already decided to keep going.
   -------------------------------------------------------------------------- */
.hero-scope {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-width: 620px;
    font-size: 0.85rem;
    color: var(--text-dim);
}
.hero-scope-lede {
    margin: 0 0 4px;
    font-size: 0.9rem;
    color: var(--text-main);
    opacity: 0.85;
}
.hero-scope-head {
    display: inline-block;
    min-width: 92px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary);
}
@media (max-width: 600px) {
    .hero-scope { font-size: 0.8rem; }
    .hero-scope-head { display: block; min-width: 0; margin-bottom: 1px; }
}

/* --------------------------------------------------------------------------
   Service group headings (v3).
   The list went from a run of seven equal rows to three named groups with an
   entry point above them. These are the dividers that make that legible; they
   sit in the 120px gap between rows, so they need no margin of their own.
   -------------------------------------------------------------------------- */
.svc-group {
    max-width: 720px;
    /* The group labels are grid items in a 120px-gap column, so each one sat
       exactly halfway between the group above and the group it belongs to —
       reading as a divider rather than a heading. Pulled down onto its own
       group; the gap above it is untouched. */
    margin-bottom: -74px;
}
.svc-group-kicker {
    display: inline-block;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--secondary);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 14px;
    min-width: 180px;
}
.svc-group-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    margin: 0 0 12px;
}
.svc-group-blurb {
    margin: 0;
    color: var(--text-dim);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* An opaque headshot is cropped to a circle so it sits alongside the cut-out
   PNGs, which get their circle from their own transparency rather than from CSS. */
.tm-photo-crop img { border-radius: 50%; }

/* Service card with no photograph yet.
   Holds the same 200px the image would, so the tag and icon overlays still have
   something to sit against and nothing below it shifts. */
.svc-card-noimage {
    height: 200px;
    border-bottom: 1px solid var(--glass-border);
    background:
        radial-gradient(circle at 50% 45%, rgba(59, 130, 246, 0.14) 0%, transparent 62%),
        linear-gradient(160deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.9));
    display: flex;
    align-items: center;
    justify-content: center;
}
.svc-card-noimage i { font-size: 40px; color: var(--secondary); opacity: 0.5; }

/* Preview-mode marker.
   Deliberately plain and slightly out of key with the rest of the nav, so it
   reads as a state the site is in rather than as another link. */
.preview-flag {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 900;
    background: rgba(2, 6, 23, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border: 1px dashed rgba(245, 158, 11, 0.55);
    border-radius: 6px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f59e0b !important;
    white-space: nowrap;
}
.preview-flag span { font-size: 0.9rem; line-height: 1; opacity: 0.75; }
.preview-flag:hover { background: rgba(245, 158, 11, 0.1); }

/* --------------------------------------------------------------------------
   The paired claim cards under the mission statement.
   They carry the two halves of the same argument, so they are set as a pair:
   matched icon, a title box tall enough for the longer of the two to wrap
   without shortening the other card, and body copy that starts on the same
   line in both.
   -------------------------------------------------------------------------- */
.claim-card {
    padding: 26px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.claim-icon {
    width: 42px;
    height: 42px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(59, 130, 246, 0.09);
    border: 1px solid var(--glass-border);
    color: var(--secondary);
}
.claim-icon svg { width: 20px; height: 20px; }
.claim-card h4 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
    /* two lines' worth, so the shorter title does not pull its body copy up */
    min-height: 2.6em;
    display: flex;
    align-items: flex-end;
}
.claim-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-dim);
}
@media (max-width: 900px) {
    .claim-card h4 { min-height: 0; display: block; }
}

/* --------------------------------------------------------------------------
   Mobile (v3).
   Everything below is inside a max-width query, so the desktop layout is
   untouched. Three of these are corrections rather than adjustments — they
   were broken at phone width, not merely tight.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* The hero pair sat side by side in a 390px column, so each label broke
       across three lines and the two buttons ended up different heights, with
       the arrow stranded on a line of its own. Stacked and full width. */
    .hero-btns {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .hero-btns .btn {
        width: 100%;
        justify-content: center;
        white-space: nowrap;
    }

    /* The radar. Its floating panels are positioned in from the edges of a
       desktop column; in a phone-width one they hang off both sides, the
       labels are clipped mid-word, and the whole thing occupies about 450px
       to deliver nothing readable. It is decoration, so it goes — the mission
       copy beside it carries the section on its own. */
    .mission-visual { display: none; }

    /* Four stats stacked one per row ran to ~690px of mostly empty space.
       Two across reads as a block of figures rather than a list. */
    .stats-grid.grid-4 { grid-template-columns: 1fr 1fr; gap: 28px 16px; padding: 36px 20px; }
    .stats-grid .stat-item h3 { font-size: 2rem; }
    .stats-grid .stat-item p { font-size: 0.78rem; }

    /* Footer and menu links were 21px tall — half the 44px anyone designing
       for thumbs would use. The padding is negative-margined back out so the
       lists do not gain 20px of height per item. */
    .footer-links li { margin: 0 -10px; }
    .footer-links a {
        display: block;
        padding: 11px 10px;
    }
    .nav-links a:not(.btn) { padding-top: 10px; padding-bottom: 10px; }
    .footer-legal a { display: inline-block; padding: 11px 4px; }

    /* iOS Safari zooms the page in when a focused field's text is under 16px,
       and does not zoom back out afterwards. The inputs were at 15.2px, so
       every tap into the contact form threw the layout. 16px exactly — the
       threshold, not a size change anyone will notice. */
    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    input, select, textarea { font-size: 16px !important; }
}

/* Shown only on a phone. Default is hidden so desktop never sees these. */
.mobile-only { display: none; }

@media (max-width: 768px) {
    /* Trim the repeating grids. Each card in these runs to roughly a screen
       and a half on a phone, so six of them is a scroll nobody finishes —
       the homepage ran to about 14,000px. The full set is always one tap
       away: the services page for the solutions grid, and the existing "all
       insights" link for the articles. Desktop shows every card as before. */
    [data-mobile-max="2"] > :nth-child(n+3),
    [data-mobile-max="3"] > :nth-child(n+4) { display: none; }

    /* The services submenu. It is laid out for a desktop hover panel — a wide
       box, centred under its trigger, with labels set nowrap so they do not
       wrap mid-name. Inside the phone menu that box is wider than the screen
       and centring pushed half of it off the left edge. Here it is simply a
       block in the flow: full width, left aligned, labels allowed to wrap. */
    .dropdown-menu.dropdown-wide { min-width: 0; }
    .dropdown-menu.dropdown-wide a,
    .dropdown-menu li a { white-space: normal; }
    .dropdown-menu { text-align: left; border-radius: 10px; padding: 6px 0; }
    .dropdown-menu li { text-align: left; margin-bottom: 0; }
    .dropdown-menu li a { padding: 12px 16px; }
    .dropdown-menu .dropdown-head { padding: 14px 16px 4px; }
    .dropdown-menu .dropdown-lead > a { padding-bottom: 12px; }

    /* The trigger is a link on desktop; on a phone it opens the submenu
       instead of navigating. Sized as a tap target. */
    .dropdown > a { display: inline-block; padding: 10px 8px; }

    .mobile-only { display: block; }
    .mobile-more {
        width: 100%;
        justify-content: center;
        margin-top: 28px;
    }
}

/* The hero headline breaks in two: the question, then the answer.
   Left to wrap on its own, "should" ended up stranded at the end of the second
   line with "cost." alone underneath, which split the phrase that carries the
   whole proposition. Making the gradient span a block puts the break before
   it, so the coloured half always reads as one piece.
   v3's hero only — v1 and v2 use .gradient-text in their headlines too. */
.hero-title .gradient-text { display: block; }