/* ===============================================
   ASLAN ADVISORS - DESIGN SYSTEM
   Matrix Theme: Dark with Green Accents
   Typography: JetBrains Mono, monospace
   =============================================== */

/* -----------------------------------------------
   CSS VARIABLES
   ----------------------------------------------- */
:root {
    /* Matrix Colors */
    --primary-blue: #00FF41;
    --primary-blue-dark: #00CC33;
    --primary-blue-light: #33FF66;
    --accent-green: #00FF41;
    --accent-green-dark: #00CC33;
    --accent-green-light: #66FF88;

    /* Dark Theme Colors */
    --text-dark: #E0E0E0;
    --text-secondary: #B0B0B0;
    --text-muted: #808080;
    --text-light: #606060;
    --white: #FFFFFF;
    --background-light: #0D0D0D;
    --background-subtle: #1A1A1A;
    --border-light: #2A2A2A;
    --border-medium: #3A3A3A;

    /* True black backgrounds */
    --bg-darkest: #000000;
    --bg-dark: #0A0A0A;
    --bg-card: #111111;

    /* Shadows - green glow effect */
    --shadow-sm: 0 1px 2px rgba(0, 255, 65, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 255, 65, 0.15);
    --shadow-lg: 0 10px 25px rgba(0, 255, 65, 0.2);
    --shadow-xl: 0 20px 40px rgba(0, 255, 65, 0.25);
    --glow: 0 0 20px rgba(0, 255, 65, 0.3);

    /* Typography - Coder style */
    --font-heading: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;
    --font-body: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Container */
    --container-max: 1200px;
    --container-narrow: 800px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}

/* -----------------------------------------------
   FONT FACES
   ----------------------------------------------- */
@font-face {
    font-family: 'MaxPro';
    src: url('assets/fonts/MaxPro-Regular.woff2') format('woff2'),
         url('assets/fonts/MaxPro-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MaxPro';
    src: url('assets/fonts/MaxOT-SemiBold.woff2') format('woff2'),
         url('assets/fonts/MaxOT-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* -----------------------------------------------
   RESET & BASE STYLES
   ----------------------------------------------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-darkest);
}

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

a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-blue-dark);
}

/* -----------------------------------------------
   TYPOGRAPHY
   ----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: var(--space-md);
}

h1 {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
}

h4 {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

p {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
}

.lead {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

.small {
    font-size: 0.875rem;
}

.text-muted {
    color: var(--text-muted);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* -----------------------------------------------
   LAYOUT
   ----------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container-narrow {
    max-width: var(--container-narrow);
}

.section {
    padding: var(--space-4xl) 0;
}

.section-sm {
    padding: var(--space-2xl) 0;
}

.section-alt {
    background-color: var(--background-light);
}

.section-dark {
    background-color: var(--text-dark);
    color: var(--white);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: var(--white);
}

.section-dark p {
    color: rgba(255, 255, 255, 0.85);
}

.section-blue {
    background: linear-gradient(135deg, #001a00 0%, #003300 50%, #001a00 100%);
    border-top: 1px solid var(--accent-green);
    border-bottom: 1px solid var(--accent-green);
    color: var(--white);
}

.section-blue h1,
.section-blue h2,
.section-blue h3,
.section-blue h4 {
    color: var(--accent-green);
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}

.section-blue p {
    color: rgba(255, 255, 255, 0.9);
}

/* -----------------------------------------------
   GRID SYSTEM
   ----------------------------------------------- */
.grid {
    display: grid;
    gap: var(--space-xl);
}

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

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

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

.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

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

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

/* Flexbox utilities */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-col {
    flex-direction: column;
}

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* -----------------------------------------------
   HEADER & NAVIGATION
   ----------------------------------------------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.95);
    border-bottom: 1px solid var(--accent-green);
    backdrop-filter: blur(10px);
    transition: box-shadow var(--transition-base);
}

.header.scrolled {
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.2);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent-green);
    text-decoration: none;
}

.logo:hover {
    color: var(--accent-green);
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}

.logo-icon {
    width: 50px;
    height: 50px;
    background-image: url('assets/images/800x800 Lion.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 8px rgba(0, 255, 65, 0.4));
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: var(--space-lg);
}

.nav-links a {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: var(--space-sm) 0;
    position: relative;
    transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-blue);
    transition: width var(--transition-base);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--accent-green);
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--accent-green);
    cursor: pointer;
    padding: var(--space-sm);
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-darkest);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
}

.mobile-menu.active {
    display: flex;
}

.mobile-menu a {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--accent-green);
}

.mobile-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--accent-green);
    cursor: pointer;
}

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

    .mobile-menu-btn {
        display: block;
    }
}

/* -----------------------------------------------
   BUTTONS
   ----------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-primary {
    background-color: transparent;
    color: var(--accent-green);
    border-color: var(--accent-green);
}

.btn-primary:hover {
    background-color: var(--accent-green);
    border-color: var(--accent-green);
    color: var(--bg-darkest);
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-muted);
    border-color: var(--border-medium);
}

.btn-secondary:hover {
    background-color: transparent;
    color: var(--accent-green);
    border-color: var(--accent-green);
}

.btn-outline {
    background-color: transparent;
    color: var(--text-muted);
    border-color: var(--border-medium);
}

.btn-outline:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.btn-white {
    background-color: var(--accent-green);
    color: var(--bg-darkest);
    border-color: var(--accent-green);
}

.btn-white:hover {
    background-color: transparent;
    color: var(--accent-green);
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-block {
    width: 100%;
}

/* -----------------------------------------------
   CARDS
   ----------------------------------------------- */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    padding: var(--space-xl);
    transition: all var(--transition-base);
}

.card:hover {
    border-color: var(--accent-green);
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.15);
    transform: translateY(-4px);
}

.card-flat {
    box-shadow: none;
}

.card-flat:hover {
    transform: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.1);
}

.card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 255, 65, 0.1);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    font-size: 1.5rem;
}

.card-icon.blue {
    background-color: rgba(0, 255, 65, 0.1);
    color: var(--accent-green);
}

.card-icon.green {
    background-color: rgba(0, 255, 65, 0.15);
    color: var(--accent-green);
}

.card h3 {
    margin-bottom: var(--space-sm);
}

.card p {
    margin-bottom: 0;
    color: var(--text-muted);
}

/* Featured Card */
.card-featured {
    border: 2px solid var(--primary-blue);
    position: relative;
}

.card-featured::before {
    content: 'Featured';
    position: absolute;
    top: -12px;
    left: var(--space-lg);
    background: var(--primary-blue);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* -----------------------------------------------
   HERO SECTION
   ----------------------------------------------- */
.hero {
    padding: calc(72px + var(--space-4xl)) 0 var(--space-4xl);
    background-color: var(--bg-darkest);
    position: relative;
    overflow: hidden;
}

/* Matrix rain effect background */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(180deg, transparent 0%, var(--bg-darkest) 100%),
        repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0, 255, 65, 0.03) 2px, rgba(0, 255, 65, 0.03) 4px);
    pointer-events: none;
}

.hero-content {
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-block;
    background-color: transparent;
    color: var(--accent-green);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--accent-green);
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero h1 {
    margin-bottom: var(--space-lg);
}

.hero .lead {
    margin-bottom: var(--space-xl);
}

.hero-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Hero with Lion */
.hero-with-lion .hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.hero-with-lion .hero-content {
    text-align: left;
    margin: 0;
}

.hero-with-lion .hero-buttons {
    justify-content: flex-start;
}

.hero-lion {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-lion img {
    max-width: 400px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 40px rgba(0, 255, 65, 0.3));
    animation: lion-glow 3s ease-in-out infinite alternate;
}

@keyframes lion-glow {
    0% {
        filter: drop-shadow(0 0 30px rgba(0, 255, 65, 0.2));
    }
    100% {
        filter: drop-shadow(0 0 50px rgba(0, 255, 65, 0.5));
    }
}

/* Hero with background */
.hero-dark {
    background-color: var(--text-dark);
    color: var(--white);
}

.hero-dark h1 {
    color: var(--white);
}

.hero-dark .lead {
    color: rgba(255, 255, 255, 0.85);
}

.hero-blue {
    background-color: var(--primary-blue);
    color: var(--white);
}

.hero-blue h1 {
    color: var(--white);
}

.hero-blue .lead {
    color: rgba(255, 255, 255, 0.9);
}

/* -----------------------------------------------
   TRUSTED BY / CLIENT LOGOS
   ----------------------------------------------- */
.trusted-by {
    padding: var(--space-2xl) 0;
    background-color: var(--bg-dark);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.trusted-label {
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xl);
}

.client-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3xl);
    flex-wrap: wrap;
}

.client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    transition: color var(--transition-base), text-shadow var(--transition-base);
}

.client-logo:hover .client-name {
    color: var(--accent-green);
    text-shadow: 0 0 20px rgba(0, 255, 65, 0.4);
}

/* If using actual logo images */
.client-logo img {
    max-height: 40px;
    width: auto;
    filter: grayscale(100%) brightness(0.6);
    opacity: 0.7;
    transition: filter var(--transition-base), opacity var(--transition-base);
}

.client-logo:hover img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

/* -----------------------------------------------
   SECTION HEADERS
   ----------------------------------------------- */
.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-3xl);
}

.section-tag {
    display: inline-block;
    color: var(--accent-green);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.section-header h2 {
    margin-bottom: var(--space-md);
}

.section-header p {
    color: var(--text-muted);
    margin-bottom: 0;
}

/* -----------------------------------------------
   PROCESS / STEPS
   ----------------------------------------------- */
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

.process-step {
    text-align: center;
    position: relative;
}

.process-step::after {
    content: '';
    position: absolute;
    top: 28px;
    right: -50%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-blue), var(--border-light));
}

.process-step:last-child::after {
    display: none;
}

.step-number {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-blue);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    border-radius: 50%;
    margin: 0 auto var(--space-lg);
    position: relative;
    z-index: 1;
}

.process-step h4 {
    margin-bottom: var(--space-sm);
}

.process-step p {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-step::after {
        display: none;
    }
}

@media (max-width: 640px) {
    .process-steps {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------------
   STATS / METRICS
   ----------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    text-align: center;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 600;
    color: var(--primary-blue);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.stat-label {
    font-size: 0.9375rem;
    color: var(--text-muted);
}

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

/* -----------------------------------------------
   CASE STUDIES / PORTFOLIO
   ----------------------------------------------- */
.case-study-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    overflow: hidden;
    transition: all var(--transition-base);
}

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

.case-study-image {
    height: 200px;
    background-color: var(--background-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.case-study-content {
    padding: var(--space-xl);
}

.case-study-tag {
    display: inline-block;
    background-color: rgba(0, 96, 191, 0.1);
    color: var(--primary-blue);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.case-study-title {
    margin-bottom: var(--space-sm);
}

.case-study-description {
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
}

.case-study-metrics {
    display: flex;
    gap: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
}

.metric {
    text-align: center;
}

.metric-value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent-green-dark);
}

.metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* -----------------------------------------------
   INDUSTRIES
   ----------------------------------------------- */
.industry-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    padding: var(--space-xl);
    text-align: center;
    transition: all var(--transition-base);
}

.industry-card:hover {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-md);
}

.industry-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-light);
    border-radius: var(--radius-lg);
    margin: 0 auto var(--space-lg);
    font-size: 2rem;
}

.industry-card h4 {
    margin-bottom: var(--space-sm);
}

.industry-card p {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin-bottom: 0;
}

/* -----------------------------------------------
   TESTIMONIALS
   ----------------------------------------------- */
.testimonial {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-md);
}

.testimonial-quote {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    position: relative;
}

.testimonial-quote::before {
    content: '"';
    font-family: var(--font-heading);
    font-size: 4rem;
    color: var(--primary-blue);
    opacity: 0.2;
    position: absolute;
    top: -1rem;
    left: -0.5rem;
    line-height: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--background-subtle);
}

.testimonial-name {
    font-weight: 600;
    color: var(--text-dark);
}

.testimonial-role {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* -----------------------------------------------
   FORMS
   ----------------------------------------------- */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--space-sm);
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    /* NOT var(--text-dark) — despite the name, that token is #E0E0E0, the
       LIGHT value for dark backgrounds. On this white input it rendered
       near-white on white, so anything typed by hand was invisible.
       Autofilled fields looked fine only because Chrome overrides both
       colours, which is what hid the bug. */
    color: #1a1a1a;
    background-color: var(--white);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 96, 191, 0.1);
}

.form-control::placeholder {
    color: var(--text-light);
}

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* -----------------------------------------------
   FOOTER
   ----------------------------------------------- */
.footer {
    background-color: var(--bg-darkest);
    color: var(--white);
    padding: var(--space-3xl) 0 var(--space-xl);
    border-top: 1px solid var(--accent-green);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.footer-brand {
    max-width: 280px;
}

.footer-brand .logo {
    color: var(--accent-green);
    margin-bottom: var(--space-md);
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
}

.footer-heading {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-lg);
    color: var(--white);
}

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

.footer-links li {
    margin-bottom: var(--space-sm);
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    transition: color var(--transition-fast);
}

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

.footer-contact p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    margin-bottom: var(--space-sm);
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.7);
}

.footer-contact a:hover {
    color: var(--accent-green);
}

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

.footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: var(--space-lg);
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

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

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }
}

/* -----------------------------------------------
   CTA SECTIONS
   ----------------------------------------------- */
.cta-section {
    padding: var(--space-3xl) 0;
    text-align: center;
}

.cta-section h2 {
    margin-bottom: var(--space-md);
}

.cta-section p {
    max-width: 600px;
    margin: 0 auto var(--space-xl);
}

/* -----------------------------------------------
   UTILITIES
   ----------------------------------------------- */
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

.hidden { display: none; }
.block { display: block; }

/* Accent highlight */
.accent {
    color: var(--accent-green);
}

.highlight {
    color: var(--accent-green);
    text-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
}

.rotating-text {
    display: inline-block;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* -----------------------------------------------
   ANIMATIONS
   ----------------------------------------------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* -----------------------------------------------
   RESPONSIVE ADJUSTMENTS
   ----------------------------------------------- */
@media (max-width: 768px) {
    .section {
        padding: var(--space-2xl) 0;
    }

    .hero {
        padding: calc(72px + var(--space-2xl)) 0 var(--space-2xl);
    }

    .hero-with-lion .hero-split {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-with-lion .hero-content {
        text-align: center;
        order: 2;
    }

    .hero-with-lion .hero-buttons {
        justify-content: center;
    }

    .hero-lion {
        order: 1;
        margin-bottom: var(--space-xl);
    }

    .hero-lion img {
        max-width: 250px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
    }

    .client-logos {
        gap: var(--space-xl);
    }

    .client-name {
        font-size: 1.125rem;
    }

    .container {
        padding: 0 var(--space-md);
    }
}

/* ===============================================
   /work — "What We're Building Now"
   ===============================================
   A manifest, not a brochure. Twenty-plus live projects have to read as one
   dense, scannable board, so every rule here keeps element positions FIXED
   across tiles: same glyph box, same headline slot, same meta line, same
   height. Uniform rows are what let the eye run down a column instead of
   wandering around it.

   The composition runs left to right on purpose. A tile is a horizontal strip
   (glyph, then text, then the affordance) rather than a stacked card, which is
   what lets three fit across and twenty-three fit on a screen and a half. The
   filter rail and the group rules span the full width for the same reason: the
   page should feel wide and short, not narrow and long.

   Green is rationed. Bright #00FF41 halates on near-black at body sizes, so it
   is only ever a hairline, a status dot, a counter, or a hover reward. Every
   piece of standing text is gray.
   ----------------------------------------------- */

/* --- Hero ---------------------------------------------------------------
   The old hero burned a full viewport before the first project. This one ends
   early on purpose: the second row of the board should be clipped by the fold,
   because content peeking under it is what tells a visitor to scroll. A hero
   that resolves cleanly reads as the whole page. */
/* Headline, one line of context, then the work. Nothing else earns a place
   above the board: the hero's job here is to say what the list is, not to be a
   destination. Every value below is chosen so the first row of tiles clears
   the fold on a laptop and the second row peeks under it. */
.hero-work { padding: calc(72px + var(--space-lg)) 0 var(--space-sm); }
/* The hero already ends in air; stacking a full section pad on top of it is
   what opened the dead half-viewport this page used to have. */
.section-work { padding-top: var(--space-md); }
.hero-work .hero-content { max-width: 54rem; margin: 0; text-align: left; }
.hero-work h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); margin-bottom: 0.55rem; }
.hero-work .lead { font-size: 1rem; line-height: 1.55; margin-bottom: 0; max-width: 54rem; }

/* The counter row. Under NDA there is no client logo to trade on, so volume,
   breadth and recency are the credibility instead. */
/* --- Rail ---------------------------------------------------------------
   What you can filter by, and what there is of it, on one line. These were two
   stacked bands and neither earned its own. The tallies are gone now, so this
   is the filter strip alone - kept as its own element for the rule it draws
   between the headline and the work. */
.work-rail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem var(--space-lg);
             padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-light); }
.work-rail .work-filters { flex: 1 1 100%; }

/* --- Filter rail --------------------------------------------------------
   Fifteen raw industries is past the point where a facet list helps, so
   work_sector() buckets them to seven. Hidden until the script removes the
   attribute: a chip that cannot filter is worse than no chip. */
.work-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.work-filters[hidden] { display: none; }
.work-chip { font: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
             text-transform: uppercase; color: var(--text-muted); background: transparent;
             border: 1px solid var(--border-light); border-radius: var(--radius-full);
             padding: 0.4rem 0.72rem; cursor: pointer; white-space: nowrap;
             transition: color var(--transition-fast), border-color var(--transition-fast),
                         background-color var(--transition-fast); }
.work-chip:hover { color: var(--text-dark); border-color: var(--border-medium); }
.work-chip:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }
.work-chip[aria-pressed="true"] { color: var(--accent-green); border-color: rgba(0, 255, 65, 0.45);
                                  background: rgba(0, 255, 65, 0.06); }

/* --- The board ----------------------------------------------------------
   Three across, which is the ceiling before a homogeneous grid stops being
   scannable and starts being noise. */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
             gap: 0.75rem; align-items: start; margin: 0; }
.work-group:first-of-type .work-grid { margin-top: var(--space-md); }
.work-group-label { display: flex; align-items: center; gap: var(--space-md);
                    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em;
                    text-transform: uppercase; color: var(--text-light);
                    margin: var(--space-xl) 0 var(--space-md); }
.work-group-label::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }

.work-tile { position: relative; container-type: inline-size;
             background: var(--bg-card); border: 1px solid var(--border-light);
             border-radius: var(--radius-lg);
             transition: border-color var(--transition-base), transform var(--transition-base); }

/* Depth is a pre-painted layer whose opacity cross-fades, so hover never
   repaints a shadow across twenty-three elements. */
.work-tile::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
                    pointer-events: none; z-index: -1; opacity: 0;
                    box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.95);
                    transition: opacity var(--transition-base); }

/* --- The tile -----------------------------------------------------------
   Glyph, then the two lines of text, then the affordance. The glyph and the
   chevron each span both rows so the text column is the only thing that ever
   changes height. */
.work-tile-btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
                 grid-template-rows: auto auto; align-items: center; align-content: center;
                 gap: 0.3rem 0.85rem; width: 100%; min-height: 5.5rem;
                 padding: 0.85rem 0.95rem; font: inherit; color: inherit;
                 text-align: left; background: none; border: 0; cursor: pointer;
                 text-decoration: none; }
.work-tile-btn:focus-visible { outline: 2px solid var(--accent-green); outline-offset: -3px;
                               border-radius: var(--radius-lg); }

.work-glyph-frame { grid-row: span 2; width: 46px; height: 46px; display: grid; place-items: center;
                    border: 1px solid var(--border-light); border-radius: 10px;
                    background: var(--bg-darkest); color: #6e6e6e;
                    transition: color var(--transition-base), border-color var(--transition-base),
                                background-color var(--transition-base); }
.work-glyph { display: block; transition: transform var(--transition-base) cubic-bezier(0.22, 1, 0.36, 1); }

.work-tile-btn:hover h3 { color: var(--white); }
/* Uniform tile height without dead space inside the tile.
   The obvious version of this reserves two lines on the h3 itself, which does
   equalise the tiles but leaves a one-line headline floating above a gap where
   its second line would have been — the rhythm between headline and industry
   then differs from tile to tile, which is worse than the problem it solved.
   Forcing a wrap is not the fix either: it depends on the copy staying exactly
   as long as it is today.
   So the height is reserved on the CONTAINER and the two rows are centred as a
   group. A one-line headline and a two-line headline produce the same tile,
   with the same gap under the headline, and neither knows about the other.
   The clamp stays as an overflow guard, not as the spacing mechanism. */
.work-tile h3 { grid-column: 2; font-size: 0.875rem; font-weight: 600; line-height: 1.35;
                letter-spacing: -0.01em; color: var(--text-dark); margin: 0;
                display: -webkit-box; -webkit-line-clamp: 2;
                -webkit-box-orient: vertical; overflow: hidden;
                transition: color var(--transition-fast); }
/* The industry line was #606060 on #111, which is 3.0:1 — under the 4.5:1
   floor for text this size, and it read as a smudge under the headline rather
   than as the label it is. --text-muted clears AA at 4.8:1, and a little more
   size and weight does the rest. */
.work-meta { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.5rem;
             font-size: 0.75rem; font-weight: 600; letter-spacing: 0.07em;
             text-transform: uppercase; color: var(--text-muted); margin: 0; }
.work-meta .work-when { color: var(--text-light); }
.work-meta .work-when::before { content: '/'; margin-right: 0.5rem; color: var(--border-medium); }

.work-chevron { grid-row: span 2; display: grid; place-items: center; color: var(--border-medium);
                transition: transform var(--transition-base), color var(--transition-base); }

/* Live status. The one piece of ambient motion on the page, and it is earned:
   it marks the difference between a system in active development and one
   already delivered, which is the page's whole premise. The dot stays solid;
   only the ring breathes, and the stagger keeps twenty-three of them from
   blinking in unison. */
.work-live { position: relative; width: 6px; height: 6px; border-radius: 50%;
             background: var(--accent-green); flex: none; }
.work-live::after { content: ''; position: absolute; inset: -3px; border-radius: 50%;
                    border: 1px solid var(--accent-green); opacity: 0.4; }
@media (prefers-reduced-motion: no-preference) {
    .work-live::after { animation: work-ping 2.8s cubic-bezier(0.2, 0.7, 0.4, 1) infinite;
                        animation-delay: calc(var(--i, 0) * 170ms); }
}
@keyframes work-ping {
    0%        { transform: scale(0.85); opacity: 0.55; }
    70%, 100% { transform: scale(2.1);  opacity: 0; }
}

/* --- Pointer feedback ---------------------------------------------------
   Gated on a real pointer: on touch, :hover sticks after a tap and every tile
   the visitor has ever pressed stays lit. The spotlight rides a mask so it
   paints a border, not a wash, and only the tile under the cursor carries it. */
@media (hover: hover) and (pointer: fine) {
    .work-tile:hover, .work-tile:focus-within { border-color: rgba(0, 255, 65, 0.34);
                                                transform: translateY(-2px); }
    .work-tile:hover::after, .work-tile:focus-within::after { opacity: 1; }
    .work-tile:hover .work-glyph-frame, .work-tile:focus-within .work-glyph-frame {
        color: var(--accent-green); border-color: rgba(0, 255, 65, 0.3);
        background: rgba(0, 255, 65, 0.05);
    }
    .work-tile:hover .work-glyph { transform: scale(1.08); }
    .work-tile:hover .work-chevron { color: var(--text-muted); }

    .work-tile::before {
        content: ''; position: absolute; inset: -1px; border-radius: inherit;
        padding: 1px; pointer-events: none; opacity: 0;
        background: radial-gradient(180px circle at var(--px, 50%) var(--py, 50%),
                    rgba(0, 255, 65, 0.55), rgba(0, 255, 65, 0.07) 45%, transparent 70%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        transition: opacity 160ms linear;
    }
    .work-tile[data-hot]::before { opacity: 1; }

    /* The glyph is complete at rest and redraws itself under the cursor.
       pathLength="1" on every shape is what lets one rule do that for any
       icon without measuring it, and it only ever runs on one tile. */
    .work-glyph > * { stroke-dasharray: 1; stroke-dashoffset: 0; }
    .work-tile:hover .work-glyph > * { animation: work-trace 460ms cubic-bezier(0.22, 1, 0.36, 1); }
}
@keyframes work-trace { from { stroke-dashoffset: 1; } }

/* Below about 400px of tile, the longest published headlines need a third
   line. Buy the room back from the glyph and the type instead of truncating:
   the headline is the content on this page, and a clipped one is a broken
   tile. Keyed to the tile, not the viewport, because two columns at 760px are
   tighter than one column at 390px. */
@container (max-width: 400px) {
    .work-tile-btn { padding: 0.8rem 0.85rem; gap: 0.28rem 0.7rem; min-height: 5.25rem; }
    .work-glyph-frame { width: 40px; height: 40px; }
    .work-tile h3 { font-size: 0.8125rem; }
}

/* --- The stories -------------------------------------------------------
   A deck, laid out the way Instagram lays one out on the web: the card you
   are reading held portrait in the middle of a dimmed screen, its neighbours
   scaled back either side so the sequence is visible rather than implied,
   round arrows in the gaps, and the close in the corner of the SCREEN rather
   than of the card.

   The mechanics underneath are still a native <dialog> and a scroll-snap
   track, which is what buys the top layer, focus containment, Escape and real
   momentum swipe on a phone for almost no code. What is borrowed here is the
   staging, not the behaviour: no timer, no tap zones, no avatar, no reply bar.
   ----------------------------------------------------------------------- */
html:has(.work-story[open]) { overflow: hidden; }
html { scrollbar-gutter: stable; }

.work-story {
    /* The dialog is the whole screen; the card is drawn inside it. */
    --ph: min(86dvh, 44rem);
    --pw: min(92vw, calc(var(--ph) * 0.62));

    margin: 0; inset: 0; padding: 0;
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    border: 0; border-radius: 0; background: transparent; color: var(--text-dark);
    overflow: visible;
}
.work-story::backdrop { background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(6px); }

@media (prefers-reduced-motion: no-preference) {
    .work-story { opacity: 0;
        transition: opacity 200ms ease, display 200ms allow-discrete, overlay 200ms allow-discrete; }
    .work-story[open] { opacity: 1; }
    @starting-style { .work-story[open] { opacity: 0; } }
    .work-story::backdrop { opacity: 0;
        transition: opacity 200ms ease, display 200ms allow-discrete, overlay 200ms allow-discrete; }
    .work-story[open]::backdrop { opacity: 1; }
    @starting-style { .work-story[open]::backdrop { opacity: 0; } }
}

/* --- Screen chrome ------------------------------------------------------ */
.work-story-bar { position: absolute; z-index: 4; top: 0; left: 0; right: 0;
                  display: flex; align-items: center; justify-content: space-between;
                  padding: 1.1rem 1.35rem; pointer-events: none; }
.work-story-bar > * { pointer-events: auto; }
.work-story-count { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
                    color: var(--text-muted); font-variant-numeric: tabular-nums; }
.work-story-close {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-muted);
    background: none; border: 1px solid var(--border-light); border-radius: var(--radius-full);
    padding: 0.4rem 0.8rem; cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.work-story-close:hover { color: var(--accent-green); border-color: rgba(0, 255, 65, 0.4); }
.work-story-close:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }

/* --- Position bar ------------------------------------------------------
   Sits across the top of the centre card. Both it and the card are placed
   from the same two custom properties, so they cannot drift apart. */
.work-story-pips { position: absolute; z-index: 4;
                   top: calc(50% - var(--ph) / 2 + 0.7rem);
                   left: 50%; translate: -50% 0;
                   width: calc(var(--pw) - 1.6rem);
                   display: flex; gap: 3px; pointer-events: none; }
.work-story-pips > i { flex: 1 1 0; height: 2px; border-radius: 1px;
                       background: rgba(255, 255, 255, 0.22); position: relative; }
.work-story-pips > i::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
                              background: var(--white);
                              /* 1 at or behind the current index, 0 ahead of it.
                                 One write repaints all 23. */
                              opacity: clamp(0, calc(var(--i) - var(--n) + 1), 1);
                              transition: opacity 150ms linear; }
@media (prefers-reduced-motion: reduce) { .work-story-pips > i::after { transition: none; } }

/* --- The deck ----------------------------------------------------------- */
.work-story-track {
    display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem);
    width: 100%; height: 100%;
    /* Half a screen of padding either end so the first and last cards can
       still reach the middle. */
    padding-inline: calc(50vw - var(--pw) / 2);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.work-story-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .work-story-track { scroll-behavior: auto; } }

.work-panel {
    flex: 0 0 var(--pw); height: var(--ph);
    scroll-snap-align: center; scroll-snap-stop: always;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg-card); border: 1px solid var(--border-light);
    border-radius: 16px;
    /* The neighbours are legible enough to read as more work and quiet enough
       not to compete with the one being read. */
    transform: scale(0.86); opacity: 0.32;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
}
.work-panel:not([inert]) { transform: none; opacity: 1;
                           box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9); }
@media (prefers-reduced-motion: reduce) { .work-panel { transition: none; } }

/* The card scrolls its own text; the deck scrolls sideways. min-height:0 is
   what lets a flex child actually shrink instead of pushing past its parent. */
.work-panel-inner { flex: 1 1 auto; min-height: 0; overflow-y: auto;
                    padding: 2.6rem clamp(1.25rem, 3vw, 1.9rem) 1.9rem;
                    scrollbar-width: thin; scrollbar-color: var(--border-medium) transparent;
                    overscroll-behavior: contain; }
.work-panel-inner::-webkit-scrollbar { width: 8px; }
.work-panel-inner::-webkit-scrollbar-track { background: transparent; }
.work-panel-inner::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 99px;
                                             border: 2px solid transparent; background-clip: content-box; }

.work-panel-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.55rem;
                     font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.11em;
                     text-transform: uppercase; color: var(--text-muted); margin: 0 0 1rem; }
.work-panel-status { color: var(--text-light); }
.work-panel-status::before { content: '/'; margin-right: 0.55rem; color: var(--border-medium); }

.work-panel-head { display: grid; grid-template-columns: auto minmax(0, 1fr);
                   align-items: center; gap: 0.9rem; margin-bottom: 0.6rem; }
.work-glyph-lg { width: 48px; height: 48px; border-radius: 11px; color: var(--accent-green);
                 border-color: rgba(0, 255, 65, 0.25); background: rgba(0, 255, 65, 0.05); }
.work-glyph-lg svg { width: 26px; height: 26px; }
.work-panel h2 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.25;
                 letter-spacing: -0.02em; margin: 0; }
.work-panel-for { font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 1.5rem; }

.work-beat { margin-bottom: 1.35rem; }
.work-beat h3 { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em;
                text-transform: uppercase; color: var(--accent-green); margin: 0 0 0.45rem; }
.work-beat p { font-size: 0.8125rem; line-height: 1.7; color: var(--text-secondary);
               margin: 0 0 0.7rem; }
.work-beat p:last-child { margin-bottom: 0; }
.work-beat + .work-beat-points { padding-top: 1.1rem; border-top: 1px solid var(--border-light); }

.work-panel-nda { font-size: 0.6875rem; line-height: 1.5; color: var(--text-light);
                  margin: 1.6rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--border-light); }

/* --- Arrows ------------------------------------------------------------
   In the gaps beside the card, placed off the same variables. */
.work-story-nav-wrap { display: contents; }
.work-story-nav-label { display: none; }
.work-story-nav {
    position: absolute; z-index: 4; top: 50%; translate: 0 -50%;
    display: grid; place-items: center; width: 44px; height: 44px;
    color: var(--text-dark); background: rgba(20, 20, 20, 0.9);
    border: 1px solid var(--border-light); border-radius: 50%; cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast),
                background-color var(--transition-fast), opacity var(--transition-fast);
}
.work-story-nav:hover { color: var(--accent-green); border-color: rgba(0, 255, 65, 0.45); }
.work-story-nav:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }
.work-story-nav:disabled { opacity: 0.25; cursor: default; }
.work-story-prev { left: calc(50% - var(--pw) / 2 - 60px); }
.work-story-next { right: calc(50% - var(--pw) / 2 - 60px); }

.work-vh { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip-path: inset(50%); white-space: nowrap; }

/* --- Phones ------------------------------------------------------------
   Full bleed, no deck, and the arrows become a real labelled bar at the
   bottom: a swipe with nothing on screen to suggest it is a secret, not an
   affordance. Swipe keeps working for anyone who already guessed. */
@media (max-width: 780px) {
    .work-story { --pw: 100vw; --ph: 100dvh; }
    .work-story-track { padding-inline: 0; gap: 0; }
    .work-panel { border: 0; border-radius: 0; transform: none; opacity: 1; }
    .work-panel-inner { padding: 3.1rem 1.15rem 1.4rem; }

    .work-story-nav-wrap {
        position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
        display: flex; gap: 0.5rem;
        padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border-light); background: var(--bg-card);
    }
    .work-story-nav {
        position: static; translate: none; flex: 1 1 0;
        display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
        width: auto; height: 46px; border-radius: var(--radius-md);
        background: var(--bg-darkest);
    }
    .work-story-nav-label { display: inline; font: inherit; font-size: 0.75rem;
                            font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
    /* Room for that bar, so the last line of a story is never under it. */
    .work-panel-inner { padding-bottom: 5.5rem; }
    .work-story-pips { top: 0.7rem; width: calc(100vw - 1.6rem); }
}

/* Filtered-out tiles leave the flow entirely so the grid re-packs. */
.work-tile[hidden], .work-group[hidden] { display: none; }
.work-empty { color: var(--text-muted); font-size: 0.9375rem; padding: var(--space-xl) 0; margin: 0; }

/* --- Entrance -----------------------------------------------------------
   One time, on load, capped so the last tile never waits longer than the
   ninth. Deliberately NOT a scroll-triggered stagger: gating twenty-three rows
   behind scroll position makes a buyer wait for content they already asked to
   see, and re-runs every time a tile re-enters the viewport. */
@media (prefers-reduced-motion: no-preference) {
    .work-tile { animation: work-in 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
                 animation-delay: min(calc(var(--i, 0) * 28ms), 250ms); }
    .work-filters { animation: work-in 380ms cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes work-in { from { opacity: 0; transform: translateY(10px); } }

/* --- Filtering ----------------------------------------------------------
   The browser does the FLIP bookkeeping: it snapshots the grid before and
   after the filter runs and interpolates the re-pack, so removing fifteen of
   twenty-three tiles reads as the board rearranging rather than as a hard cut.
   Unsupported browsers get the cut, which is exactly today's behaviour. */
::view-transition-group(*) { animation-duration: 220ms;
                             animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(*) { animation: work-vt-out 130ms ease-in both; }
::view-transition-new(*) { animation: work-vt-in 200ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes work-vt-out { to   { opacity: 0; transform: scale(0.97); } }
@keyframes work-vt-in  { from { opacity: 0; transform: scale(0.97); } }

/* Reduced motion means fewer and gentler, not none: the disclosure still needs
   to acknowledge the click, so it keeps a short fade and loses only travel. */
@media (prefers-reduced-motion: reduce) {
    .work-tile:hover { transform: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
        animation: none !important;
    }
}

@media (max-width: 1100px) {
    .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .work-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .hero-work { padding: calc(72px + var(--space-lg)) 0 var(--space-md); }
    .hero-work .lead { font-size: 1rem; }
    .work-group-label { margin-top: var(--space-xl); }
    .work-rail { gap: var(--space-sm); }
    .work-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%;
                    margin: 0 calc(-1 * var(--space-md)); padding: 0 var(--space-md) 0.25rem; }
    .work-filters::-webkit-scrollbar { display: none; }

}