@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ============================================================
   DESIGN TOKENS — Retro Black / Off-White / Orange / Grey
   ============================================================ */
:root {
    --black:      #0c0c0c;
    --black-2:    #141414;
    --black-3:    #1c1c1c;
    --grey-4:     #444;
    --grey-6:     #666;
    --grey-9:     #999;
    --off-white:  #f0ede6;
    --white:      #faf7f0;
    --orange:     #e05c1a;
    --orange-mid: rgba(224,92,26,0.26);
    --orange-low: rgba(224,92,26,0.10);
    --border:     rgba(240,237,230,0.13);
    --border-hi:  rgba(240,237,230,0.24);
    --text-media-heading: rgba(250,247,240,0.97);
    --text-media-body: rgba(240,237,230,0.9);
    --text-media-muted: rgba(240,237,230,0.8);
    --ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

.accent-orange { color: var(--orange); }
.field-label { color: var(--orange); font-weight: 600; }

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
html, body { scroll-snap-type: y proximity; min-height: 100%; }
body {
    font-family: 'Space Grotesk', sans-serif;
    line-height: 1.7;
    color: var(--off-white);
    background-color: var(--black);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    text-wrap: balance;
}

p, li {
    text-wrap: pretty;
}

:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

/* ============================================================
   OVERLAYS
   ============================================================ */
.scan-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 9000;
    background-image: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(240,237,230,0.022) 2px, rgba(240,237,230,0.022) 3px
    );
    mix-blend-mode: overlay;
}
.noise-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 8999; opacity: 0.055;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.container { width: min(1260px, calc(100% - 64px)); margin: 0 auto; }
.snap-panel {
    min-height: 100vh;
    min-height: 100svh;
    min-height: calc(var(--vh, 1vh) * 100);
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}
.snap-section {
    border-top: 1px solid var(--border);
    position: relative;
}
.snap-section::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(240,237,230,0.1), rgba(224,92,26,0.42) 48%, rgba(240,237,230,0.1));
    opacity: 0.9;
    z-index: 3;
}
.snap-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 48px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.2), transparent 72%);
    z-index: 1;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1400;
    height: 54px; padding: 0 28px;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(12,12,12,0.88);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-nav.scrolled { background: rgba(12,12,12,0.96); border-color: var(--border-hi); }
.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    background: rgba(12,12,12,0.88);
    color: var(--off-white);
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-direction: column;
    cursor: pointer;
}
.nav-toggle span {
    width: 16px;
    height: 1px;
    background: currentColor;
    transition: transform 0.24s var(--ease), opacity 0.24s var(--ease);
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.logo {
    color: var(--white); text-decoration: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
    padding: 6px 10px; border: 1px solid var(--border);
    transition: border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.logo:hover { border-color: var(--orange); color: var(--orange); }
.nav-links { list-style: none; display: flex; align-items: center; gap: 1px; }
.nav-links a {
    color: var(--grey-9); text-decoration: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 7px 12px; border: 1px solid transparent;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-links a:hover { color: var(--orange); border-color: rgba(224,92,26,0.36); }
.nav-links a.is-active { color: var(--black); background: var(--orange); border-color: var(--orange); }
.nav-links a::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--orange), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.24s var(--ease);
    opacity: 0.85;
}
.nav-links a:hover::after,
.nav-links a.is-active::after {
    transform: scaleX(1);
}
.nav-cta {
    text-decoration: none; font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--black); background: var(--off-white);
    border: 1px solid var(--off-white); padding: 7px 16px;
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-cta:hover { background: var(--orange); border-color: var(--orange); }
.mobile-nav-panel {
    position: fixed;
    inset: 54px 0 0;
    z-index: 1390;
    background: rgba(5, 5, 5, 0.78);
    backdrop-filter: blur(12px);
}
.mobile-nav-shell {
    width: min(100%, 520px);
    margin-left: auto;
    padding: 20px 18px 24px;
    border-left: 1px solid rgba(240,237,230,0.12);
    border-bottom: 1px solid rgba(240,237,230,0.12);
    background: linear-gradient(180deg, rgba(12,12,12,0.96), rgba(8,8,8,0.98));
    box-shadow: -24px 24px 48px rgba(0,0,0,0.35);
}
.mobile-nav-links {
    list-style: none;
    display: grid;
    gap: 8px;
}
.mobile-nav-links a,
.mobile-nav-cta {
    display: block;
    text-decoration: none;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.mobile-nav-links a {
    padding: 14px 16px;
    border: 1px solid rgba(240,237,230,0.12);
    background: rgba(240,237,230,0.03);
    color: var(--off-white);
    font-size: 0.76rem;
}
.mobile-nav-links a.is-active {
    color: var(--black);
    background: var(--orange);
    border-color: var(--orange);
}
.mobile-nav-cta {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--orange);
    background: var(--orange);
    color: var(--black);
    font-size: 0.76rem;
}
body.nav-open {
    overflow: hidden;
}

body.mobile-note-open {
    overflow: hidden;
}

.mobile-device-note {
    position: fixed;
    inset: 0;
    z-index: 1700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.mobile-device-note.is-visible {
    display: flex;
}

.mobile-device-note-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
}

.mobile-device-note-dialog {
    position: relative;
    width: min(100%, 480px);
    border: 1px solid rgba(240, 237, 230, 0.2);
    background: linear-gradient(180deg, rgba(12,12,12,0.97), rgba(8,8,8,0.98));
    box-shadow: 0 30px 70px rgba(0,0,0,0.54);
    padding: 18px 16px 16px;
    display: grid;
    gap: 12px;
}

.mobile-device-note-kicker {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange);
}

.mobile-device-note-dialog h2 {
    font-size: clamp(1.14rem, 5.4vw, 1.46rem);
    line-height: 1.24;
}

.mobile-device-note-dialog p {
    font-size: 0.9rem;
    line-height: 1.56;
    color: var(--grey-9);
}

.mobile-device-note-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.mobile-device-note-actions .btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 781px) {
    .mobile-device-note {
        display: none !important;
    }
}

/* ============================================================
   HERO
   ============================================================ */
.hero-panel {
    position: relative; display: flex;
    align-items: center; justify-content: center;
    padding-top: 54px; overflow: hidden;
}
.hero-video-stack, .hero-video, .hero-video-overlay { position: absolute; inset: 0; }
.hero-video {
    width: 100%; height: 100%; object-fit: cover; transform: scale(1.04);
    filter: saturate(0.65) contrast(1.12) brightness(0.82); will-change: transform;
}
.hero-video.is-fallback,
.section-bg-video.is-fallback,
.cap-media-video.is-fallback {
    opacity: 0;
}
.hero-video-overlay {
    background: linear-gradient(180deg, rgba(12,12,12,0.54) 0%, rgba(12,12,12,0.86) 100%);
}
.hero-grid-overlay {
    position: absolute; inset: 0; z-index: 1; opacity: 0.38;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 72px 72px;
}
.hero-inner {
    position: relative; z-index: 2;
    width: min(1080px, calc(100% - 48px)); text-align: center;
}
.hero-headline {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(2.2rem, 6.4vw, 5.8rem);
    font-weight: 700; line-height: 0.97;
    letter-spacing: 0.02em; text-transform: uppercase;
    color: var(--white); margin-bottom: 38px;
}
.hero-headline span { color: var(--orange); display: block; }
.hero-copy-sequence { display: grid; gap: 10px; max-width: 780px; margin: 0 auto; }
.hero-copy-block {
    opacity: 0; transform: translateY(18px);
    font-size: clamp(0.93rem, 1.3vw, 1.1rem);
    color: var(--grey-9); border: 1px solid var(--border);
    border-left: 2px solid var(--orange);
    padding: 13px 16px; text-align: left; background: rgba(12,12,12,0.52);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.hero-copy-block.is-visible { opacity: 1; transform: translateY(0); }
.hero-actions { margin-top: 30px; display: flex; justify-content: center; gap: 12px; }
.btn {
    text-decoration: none; font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; border: 1px solid transparent;
    transition: background 0.22s var(--ease), color 0.22s var(--ease),
                border-color 0.22s var(--ease), transform 0.22s var(--ease),
                box-shadow 0.22s var(--ease);
}
.btn-primary { background: var(--orange); color: var(--black); border-color: var(--orange); }
.btn-primary:hover {
    background: var(--off-white); border-color: var(--off-white);
    box-shadow: 0 0 28px rgba(224,92,26,0.45); transform: translateY(-2px);
}
.btn-secondary { background: transparent; color: var(--off-white); border-color: var(--border-hi); }
.btn-secondary:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.caret { font-family: 'IBM Plex Mono', monospace; }
.scroll-hint {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    color: var(--grey-6); text-decoration: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
    z-index: 4; border-bottom: 1px solid var(--grey-6); padding-bottom: 2px;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.scroll-hint:hover { color: var(--orange); border-color: var(--orange); }
.scroll-hint::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(224,92,26,0.9), transparent);
    transform: scaleX(0);
    transition: transform 0.26s var(--ease);
}
.scroll-hint:hover::after { transform: scaleX(1); }

@supports not (backdrop-filter: blur(10px)) {
    .site-nav,
    .mobile-nav-panel,
    .section-header.has-bg-video .container,
    #overview .how-text,
    #capabilities .feature-card,
    #capabilities .cap-hud,
    #projects .project-left,
    #projects .dropdown,
    #why-kokki .why-panel .container,
    #why-kokki .why-explain,
    #founder .founder-block {
        backdrop-filter: none;
        background: rgba(12,12,12,0.94);
    }
}

/* ============================================================
   SECTION BASE
   ============================================================ */
.section-header { display: grid; align-items: center; padding-top: 96px; padding-bottom: 28px; }
.section-header .container { display: grid; gap: 14px; max-width: min(980px, 100%); }
h2 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(2.2rem, 4.6vw, 4.8rem);
    font-weight: 700; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--white);
}
h3 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(1.35rem, 2.3vw, 2.4rem);
    font-weight: 600; line-height: 1.12; letter-spacing: 0.03em; text-transform: uppercase;
    color: var(--white);
}
.section-header p { color: var(--grey-9); font-size: clamp(1rem,1.4vw,1.18rem); max-width: 74ch; line-height: 1.68; }
.section-header .container {
    position: relative;
    padding-bottom: 18px;
}
.section-header .container::after {
    content: '';
    width: min(220px, 36vw);
    height: 1px;
    background: linear-gradient(90deg, var(--orange), rgba(240,237,230,0.2));
}

/* ============================================================
   SECTION HEADER VIDEO BACKGROUNDS
   ============================================================ */
.section-header.has-bg-video {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.section-header-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.section-header-video-tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(8,8,8,0.56) 0%, rgba(8,8,8,0.78) 100%),
        radial-gradient(900px 340px at 10% 12%, rgba(224,92,26,0.16), transparent 62%);
}
.section-header.has-bg-video::before {
    content: '';
    position: absolute;
    right: 8%;
    top: 17%;
    width: min(22vw, 260px);
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(240,237,230,0.2);
    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
    z-index: 2;
    opacity: 0.55;
    pointer-events: none;
}
.section-header.has-bg-video::after {
    content: '';
    position: absolute;
    left: 7%;
    bottom: 24%;
    width: min(20vw, 200px);
    height: 1px;
    background: linear-gradient(90deg, rgba(224,92,26,0.9), rgba(240,237,230,0.12));
    z-index: 2;
    opacity: 0.8;
    pointer-events: none;
}
.section-header.has-bg-video .container {
    position: relative;
    z-index: 3;
    padding: 26px 28px 24px;
    background: linear-gradient(130deg, rgba(12,12,12,0.58), rgba(12,12,12,0.38));
    border: 1px solid rgba(240,237,230,0.22);
    box-shadow: 0 22px 64px rgba(0,0,0,0.34);
    backdrop-filter: blur(2px);
}
.section-header.has-bg-video h2,
.section-header.has-bg-video p {
    color: var(--off-white);
    text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

/* ============================================================
   FULL-SECTION VIDEO BACKGROUNDS
   ============================================================ */
.section-with-bg-video {
    position: relative;
    isolation: isolate;
    overflow: clip;
}
.section-bg-video-wrap {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    margin-bottom: -100vh;
    margin-bottom: -100svh;
    z-index: 0;
    pointer-events: none;
}
.section-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
    filter: saturate(0.54) contrast(1.04) brightness(0.44) hue-rotate(-2deg);
}
#overview .section-bg-video {
    filter: saturate(0.6) contrast(1.05) brightness(0.56) hue-rotate(-2deg);
}
.section-bg-video-tint {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.5) 48%, rgba(0,0,0,0.64) 100%),
        radial-gradient(900px 380px at 14% 12%, rgba(224,92,26,0.11), transparent 66%);
}
.section-bg-video-wrap.video-fallback-active,
.cap-media.video-fallback-active,
.hero-video-stack.video-fallback-active {
    background: radial-gradient(900px 520px at 18% 10%, rgba(224,92,26,0.08), transparent 62%), #0e0e0e;
}
    #overview .section-bg-video-tint {
        background:
        linear-gradient(180deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.4) 48%, rgba(0,0,0,0.56) 100%),
        radial-gradient(900px 380px at 14% 12%, rgba(224,92,26,0.1), transparent 66%);
    }
.section-after-header-shade {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100svh - 120px);
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.28) 26%, rgba(0,0,0,0.64) 100%);
}
.section-with-bg-video > *:not(.section-bg-video-wrap):not(.section-after-header-shade) {
    position: relative;
    z-index: 2;
}

/* Readability calibration for media-backed sections */
#overview h2,
#capabilities h2,
#why-kokki h2,
#projects h2,
#overview h3,
#capabilities h3,
#why-kokki h3,
#projects h3 {
    color: var(--text-media-heading);
    text-shadow: 0 1px 2px rgba(0,0,0,0.52), 0 10px 30px rgba(0,0,0,0.42);
}

#overview p,
#capabilities p,
#why-kokki p,
#projects p,
#overview li,
#capabilities li,
#why-kokki li,
#projects li,
#overview th,
#capabilities th,
#why-kokki th,
#projects th,
#overview td,
#capabilities td,
#why-kokki td,
#projects td,
#overview summary,
#capabilities summary,
#why-kokki summary,
#projects summary {
    color: var(--text-media-body);
    text-shadow: 0 1px 2px rgba(0,0,0,0.38);
}

#overview .project-subtitle,
#capabilities .project-subtitle,
#why-kokki .project-subtitle,
#projects .project-subtitle,
#overview .timeline-highlight,
#capabilities .timeline-highlight,
#why-kokki .timeline-highlight,
#projects .timeline-highlight,
#overview .spec-row > div,
#capabilities .spec-row > div,
#why-kokki .spec-row > div,
#projects .spec-row > div {
    color: var(--text-media-muted);
}

#overview .how-text,
#capabilities .feature-card,
#capabilities .cap-hud,
#projects .project-left,
#projects .dropdown,
#why-kokki .why-panel .container,
#why-kokki .why-explain,
#why-kokki .line-stack p,
#founder .founder-block {
    background: linear-gradient(145deg, rgba(14,14,14,0.86), rgba(14,14,14,0.78));
    border-color: rgba(240,237,230,0.18);
    backdrop-filter: blur(2px);
}

#overview,
#capabilities,
#why-kokki {
    position: relative;
}

#overview::before,
#capabilities::before,
#why-kokki::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

#overview::before {
    inset: 120px auto auto 5%;
    width: min(26vw, 300px);
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(240,237,230,0.08);
    clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
    opacity: 0.5;
}

#capabilities::before {
    right: 4%;
    top: 140px;
    width: min(28vw, 340px);
    height: min(36vw, 420px);
    background:
        linear-gradient(180deg, rgba(224,92,26,0.12), transparent 65%),
        repeating-linear-gradient(135deg, rgba(240,237,230,0.035) 0 1px, transparent 1px 16px);
    clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%);
    opacity: 0.32;
}

#why-kokki::after {
    left: 6%;
    bottom: 120px;
    width: min(24vw, 240px);
    height: 1px;
    background: linear-gradient(90deg, rgba(224,92,26,0.8), rgba(240,237,230,0.12));
    opacity: 0.7;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-panel { display: grid; align-items: center; }
.how-layout { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 24px; align-items: center; }
.how-layout.reverse { direction: rtl; }
.how-layout.reverse > * { direction: ltr; }
.how-text {
    display: grid;
    gap: 16px;
    position: relative;
    padding: 24px 26px 24px 28px;
    background: linear-gradient(145deg, rgba(240,237,230,0.03), rgba(240,237,230,0.015));
    border: 1px solid var(--border);
    box-shadow: 0 24px 54px rgba(0,0,0,0.34);
}
.how-text p { color: var(--grey-9); font-size: clamp(0.98rem, 1.1vw, 1.04rem); line-height: 1.72; }
.how-text.right { text-align: right; }
.how-text::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 22px;
    height: 22px;
    border-top: 2px solid var(--orange);
    border-left: 2px solid var(--orange);
}
.confidential-line {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.56rem; font-weight: 600; letter-spacing: 0.045em;
    color: var(--white); border: 1px solid rgba(240,237,230,0.18);
    border-left: 2px solid rgba(240,237,230,0.42); background: rgba(255,255,255,0.03); padding: 7px 9px;
}
.how-connector {
    position: relative;
    width: 34px;
    height: var(--how-axis-height);
    justify-self: center;
    align-self: center;
    --charge: 0;
    --charge-alpha: 0;
}
.how-connector span { display: none; }
.how-connector::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(240,237,230,0.08), rgba(224,92,26,0.55), rgba(240,237,230,0.08));
}
.how-connector::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, calc(var(--charge, 0) * (100% - 18px)));
    top: 0;
    rotate: 45deg;
    background: var(--black);
    border: 1px solid var(--orange);
    box-shadow: 0 0 0 8px rgba(224,92,26,0.12), 0 0 24px rgba(224,92,26,0.5), 0 0 42px rgba(240,237,230,0.14);
    opacity: var(--charge-alpha, 0);
    transition: opacity 0.18s linear;
}
.how-visual {
    position: relative;
    overflow: hidden;
    background: transparent;
    border: 1px solid var(--border);
    padding: 0;
    transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}
.how-visual:hover { transform: translateY(-4px); }
.how-visual img {
    width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: none;
    clip-path: none;
    box-shadow: none;
    transition: filter 0.4s var(--ease), transform 0.5s var(--ease), box-shadow 0.4s var(--ease);
    position: relative;
    z-index: 0;
}
.how-visual img[src*="Criticality&process mapping.jpeg"] { object-position: 50% 48%; }
.how-visual img[src*="Build your supply chainnn.png"] { object-position: 50% 52%; }
.how-visual img[src*="Monitor and Control.jpeg"] { object-position: 50% 50%; }
.how-visual img[src*="Receivee and Verify.png"] { object-position: 50% 50%; }
.how-visual:hover img { filter: none; transform: scale(1); box-shadow: none; }
.shape-circle { width: min(500px,100%); aspect-ratio: 1/1; clip-path: none; }
.shape-rect { width: min(560px,100%); aspect-ratio: 16/10; }
.shape-wide { width: min(620px,100%); aspect-ratio: 16/9; }

/* ============================================================
   HOW IT WORKS — SCROLL DRUM
   ============================================================ */
.how-wheel-track {
    position: relative;
    height: calc(3.45 * 100svh);
}
.how-wheel-sticky {
    position: sticky;
    top: 54px;
    height: calc(100svh - 54px);
    --how-axis-height: clamp(320px, 62vh, 520px);
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Fade top/bottom edges to reveal blur-peek effect smoothly */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.how-wheel-sticky::before,
.how-wheel-sticky::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.how-wheel-sticky::before {
    left: 4%;
    top: 14%;
    width: min(22vw, 240px);
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(240,237,230,0.08);
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    opacity: 0.45;
}
.how-wheel-sticky::after {
    right: 5%;
    bottom: 15%;
    width: min(20vw, 220px);
    height: min(20vw, 220px);
    background:
        linear-gradient(180deg, rgba(224,92,26,0.08), transparent 72%),
        repeating-linear-gradient(135deg, rgba(240,237,230,0.03) 0 1px, transparent 1px 14px);
    clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
    opacity: 0.34;
}

/* Vertical stage pipeline — left sidebar */
.how-pipeline {
    position: absolute;
    left: clamp(10px, calc((100vw - 1260px) / 2 - 58px), 64px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: var(--how-axis-height);
    --pn: 26px;
}
.how-pipeline-track {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--pn) / 2);
    bottom: calc(var(--pn) / 2);
    width: 2px;
    background: rgba(240,237,230,0.12);
    z-index: 0;
}
.how-pipeline-fill {
    position: absolute; top: 0; left: 0; width: 100%; height: 0;
    background: var(--orange);
    transition: height 0.42s var(--ease);
    z-index: 0;
}
.how-pipe-node {
    flex-shrink: 0;
    position: relative; z-index: 2;
    width: var(--pn); height: var(--pn);
    background: var(--black-2);
    border: 1.5px solid rgba(240,237,230,0.2);
    rotate: 45deg;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: border-color 0.32s var(--ease), background 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.how-pipe-node:not(:last-child) { margin-bottom: 0; }
.how-pipe-node span {
    rotate: -45deg;
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.06em;
    color: var(--grey-9); line-height: 1;
    transition: color 0.32s var(--ease);
}
.how-pipe-node.is-active {
    border-color: var(--orange); background: var(--orange);
    box-shadow: 0 0 0 5px rgba(224,92,26,0.18), 0 0 18px rgba(224,92,26,0.48);
}
.how-pipe-node.is-active span { color: var(--black); font-weight: 700; }
.how-pipe-node.is-done {
    border-color: rgba(224,92,26,0.58);
    background: #1a1410;
    box-shadow: inset 0 0 0 1px rgba(224,92,26,0.18);
}

/* Drum container + slides */
.how-drum {
    position: relative;
    width: 100%; height: 100%;
    padding-left: clamp(72px, 7vw, 104px);
}
.how-drum-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    will-change: transform, opacity;
    transition: transform 0.46s var(--ease), opacity 0.36s var(--ease);
    pointer-events: none;
}
.how-drum-slide.is-active {
    transform: translateY(0) scale(1); opacity: 1;
    z-index: 3; pointer-events: auto;
}
.how-drum-slide.is-prev {
    transform: translateY(-48%) scale(0.982); opacity: 0.34;
    z-index: 2;
}
.how-drum-slide.is-next {
    transform: translateY(48%) scale(0.982); opacity: 0.34;
    z-index: 2;
}
.how-drum-slide:not(.is-active):not(.is-prev):not(.is-next) {
    transform: translateY(96%); opacity: 0; z-index: 1;
}
/* Show connector only on active slide */
.how-drum-slide .how-connector { --charge-alpha: 0; --charge: 0; }
.how-drum-slide.is-active .how-connector { --charge: 0.5; --charge-alpha: 1; }
.how-drum-slide .container { position: relative; z-index: 1; }
.how-drum-slide .container::before {
    content: '';
    position: absolute;
    inset: 10% 6% auto auto;
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, rgba(224,92,26,0.7), rgba(240,237,230,0.06));
    opacity: 0.5;
    pointer-events: none;
}


/* ============================================================
   CAPABILITIES
   ============================================================ */
.cap-panel {
    display: grid;
    align-items: center;
    position: relative;
    padding-top: 14px;
}
.cap-panel::before {
    content: '';
    position: absolute;
    left: 4%;
    right: 4%;
    top: 20px;
    height: 1px;
    background: linear-gradient(90deg, rgba(224,92,26,0.42), transparent);
    opacity: 0.6;
}
.cap-panel::after {
    content: '';
    position: absolute;
    right: 3%;
    top: 18%;
    width: min(16vw, 180px);
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(240,237,230,0.07);
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    rotate: 16deg;
    opacity: 0.4;
    pointer-events: none;
}
.cap-layout {
    display: grid;
    grid-template-columns: minmax(320px,0.86fr) minmax(0,1.14fr);
    grid-template-areas:
        'title title'
        'copy hud';
    gap: 34px;
    align-items: start;
    padding: 42px 0 30px;
}
#cap-die-casting .cap-layout { padding-top: 46px; }
.cap-title {
    grid-area: title;
    font-size: clamp(1.65rem, 3vw, 2.8rem);
    margin: 0;
}
#cap-die-casting .cap-title { margin-top: 0; }
.cap-title::before {
    display: block;
    margin-bottom: 12px;
    color: var(--orange);
    font-size: 0.68rem;
    letter-spacing: 0.22em;
}
#cap-die-casting .cap-title::before { content: 'PROCESS / 01'; }
#cap-machining .cap-title::before { content: 'PROCESS / 02'; }
#cap-compression .cap-title::before { content: 'PROCESS / 03'; }
#cap-injection .cap-title::before { content: 'PROCESS / 04'; }
.cap-copy { grid-area: copy; display: grid; gap: 18px; position: sticky; top: 102px; }
.cap-copy p { color: var(--grey-9); font-size: clamp(0.96rem, 1.05vw, 1.02rem); line-height: 1.7; }
.cap-media {
    border: 1px solid var(--border);
    background: #000;
    overflow: hidden;
    position: relative;
    min-height: clamp(220px, 28vw, 320px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 24px 56px rgba(0,0,0,0.34);
}
.cap-media-placeholder,
.cap-media img,
.cap-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    background: #000;
}
.cap-media-placeholder {
    opacity: 1;
    transition: opacity 0.42s var(--ease);
    z-index: 1;
}
.cap-media-video {
    filter: saturate(0.78) contrast(1.06) brightness(0.86);
    opacity: 0;
    transition: opacity 0.42s var(--ease), filter 0.32s var(--ease);
    z-index: 2;
}
.cap-media.is-video-ready .cap-media-video {
    opacity: 1;
}
.cap-media.is-video-ready .cap-media-placeholder {
    opacity: 0;
}
.cap-copy .feature-card {
    min-height: 110px;
    display: grid;
    align-content: center;
}
.feature-card {
    border: 1px solid var(--border); padding: 18px 18px 18px 20px; background: linear-gradient(145deg, rgba(240,237,230,0.03), rgba(240,237,230,0.015));
    transition: border-color 0.26s var(--ease), transform 0.26s var(--ease), box-shadow 0.26s var(--ease);
}
.feature-card:hover { border-color: rgba(224,92,26,0.5); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,0.5); }
.cap-hud {
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(240,237,230,0.03), transparent 18%), rgba(20,20,20,0.92);
    padding: 20px;
    display: grid;
    gap: 18px;
    box-shadow: 0 32px 72px rgba(0,0,0,0.38);
    position: relative;
    overflow: hidden;
}
.cap-hud::after {
    content: '';
    position: absolute;
    right: -8%;
    bottom: -14%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at center, rgba(224,92,26,0.12), transparent 70%);
    pointer-events: none;
}
.cap-hud { grid-area: hud; margin-top: 0; align-self: start; }
.metric-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.metric-pill {
    border: 1px solid var(--border); padding: 14px 12px; background: linear-gradient(145deg, rgba(240,237,230,0.04), rgba(240,237,230,0.015));
    display: grid; gap: 4px;
    transition: border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.metric-pill:hover { border-color: var(--orange); transform: translateY(-2px); }
.metric-pill strong { font-family: 'IBM Plex Mono',monospace; color: var(--orange); font-size: 1.12rem; font-weight: 700; line-height: 1; }
.metric-pill span { font-family: 'IBM Plex Mono',monospace; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--grey-6); }
.spec-grid { display: grid; gap: 4px; }
.spec-row {
    border: 1px solid var(--border); padding: 8px 10px;
    display: grid; grid-template-columns: minmax(115px,155px) 1fr;
    gap: 10px; align-items: start; background: rgba(240,237,230,0.02);
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.spec-row:hover { background: var(--black-3); border-color: rgba(224,92,26,0.32); }
.spec-row > span { font-family: 'IBM Plex Mono',monospace; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange); }
.spec-row > div { color: var(--off-white); font-size: 0.87rem; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    border: 1px solid var(--border); padding: 3px 8px;
    font-size: 0.7rem; font-family: 'IBM Plex Mono',monospace;
    background: var(--black-3); letter-spacing: 0.04em;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chip:hover { border-color: var(--orange); color: var(--orange); }

/* Low-cost, premium feel interactions */
.logo,
.nav-cta,
.mobile-nav-links a,
.mobile-nav-cta,
.feature-card,
.metric-pill,
.spec-row,
.project-nav-btn,
.project-mode-btn,
.all-filter-btn,
.project-media,
.how-visual,
.why-visual,
.site-footer-link {
    transition:
        transform 0.22s var(--ease),
        border-color 0.22s var(--ease),
        background-color 0.22s var(--ease),
        color 0.22s var(--ease),
        box-shadow 0.22s var(--ease);
}

/* ============================================================
   PROJECTS
   ============================================================ */
.projects-landing-page {
    display: grid;
    align-items: center;
}
.projects-landing-copy {
    display: grid;
    gap: 12px;
    padding-top: clamp(80px, 10vh, 126px);
    padding-bottom: clamp(28px, 5vh, 56px);
}
.projects-landing-copy p {
    max-width: 70ch;
    color: var(--grey-9);
    line-height: 1.72;
}
.projects-stage-page {
    display: grid;
    align-content: start;
}
.projects-stage-top {
    padding-top: 84px;
    padding-bottom: 14px;
}
.projects-controls-stack {
    width: max-content;
    max-width: 100%;
    display: grid;
    gap: 10px;
}
.projects-content-stack {
    display: grid;
    align-content: start;
}
.projects-intro { display: grid; gap: 18px; }
.projects-intro p { max-width: 940px; font-size: 1.06rem; color: var(--grey-9); line-height: 1.7; }
.project-mode-toggle { display: inline-flex; gap: 0; border: 1px solid var(--border-hi); }
.project-mode-btn {
    border: none; border-right: 1px solid var(--border); background: transparent;
    color: var(--grey-9); font-family: 'IBM Plex Mono',monospace;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 9px 18px; cursor: pointer;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.project-mode-btn:last-child { border-right: none; }
.project-mode-btn:hover { color: var(--orange); background: var(--orange-low); }
.project-mode-btn.is-active { background: var(--orange); color: var(--black); }
.project-case-nav { display: flex; gap: 4px; margin-top: 8px; }
.project-nav-btn {
    width: 44px; height: 34px; border: 1px solid var(--border); background: transparent;
    color: var(--grey-9); font-family: 'IBM Plex Mono',monospace; font-size: 12px; cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.project-nav-btn:hover { border-color: var(--orange); color: var(--orange); }
.project-nav-btn.is-active { background: var(--orange); color: var(--black); border-color: var(--orange); }
.project-mode-toggle {
    width: max-content;
    align-self: start;
    padding: 3px;
    background: rgba(240,237,230,0.03);
    box-shadow: 0 18px 44px rgba(0,0,0,0.24);
}
.project-mode-btn {
    padding: 8px 14px;
    font-size: 10px;
    letter-spacing: 0.1em;
}
/* ──── PROJECTS: unified single-page layout ──── */
#projects {
    scroll-margin-top: 54px;
}
.section-header.projects-header {
    padding-bottom: 0;
    min-height: auto;
}
.projects-header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px 52px;
    align-items: end;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.projects-header-inner::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: min(220px, 36vw);
    height: 1px;
    background: linear-gradient(90deg, var(--orange), rgba(240,237,230,0.2));
}
.projects-title-col { max-width: 720px; }
.projects-title-col p {
    margin-bottom: 8px;
    max-width: 66ch;
    line-height: 1.68;
    color: var(--grey-9);
    text-wrap: pretty;
}
.projects-controls-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    padding-bottom: 4px;
    flex-shrink: 0;
}
.project-case-nav {
    display: flex;
    gap: 4px;
    width: max-content;
    padding: 4px;
    background: rgba(12,12,12,0.78);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
.project-panel { display: none; }
.project-panel.is-visible { display: block; }
.project-case { display: none; padding: 22px 0 52px; }
.project-case.is-active { display: block; }
.project-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.9fr); gap: 28px; align-items: start; }
.project-left {
    display: grid;
    gap: 16px;
    padding: 22px;
    background: linear-gradient(145deg, rgba(240,237,230,0.03), rgba(240,237,230,0.01));
    border: 1px solid var(--border);
    box-shadow: 0 26px 64px rgba(0,0,0,0.28);
}
.project-left h3 { font-size: clamp(1.15rem,2vw,1.85rem); }
.project-subtitle { color: var(--grey-9); font-size: 1rem; }
.project-right { position: sticky; top: 92px; }
.dropdown {
    border: 1px solid var(--border); background: rgba(20,20,20,0.9);
    overflow: clip; transition: border-color 0.22s var(--ease);
}
.dropdown:hover { border-color: rgba(224,92,26,0.36); }
summary {
    list-style: none; cursor: pointer; padding: 11px 14px;
    font-family: 'IBM Plex Mono',monospace;
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border);
    background: rgba(240,237,230,0.04);
    user-select: none; color: var(--off-white);
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
summary::-webkit-details-marker { display: none; }
.dropdown[open] > summary { color: var(--orange); background: rgba(224,92,26,0.07); border-bottom-color: rgba(224,92,26,0.28); }
.dropdown ul, .timeline-group { padding: 14px; }
.dropdown[open] ul, .dropdown[open] .timeline-group { animation: fadeDown 0.22s var(--ease); }
@keyframes fadeDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.dropdown li { color: var(--off-white); font-size: 0.89rem; margin-left: 14px; margin-bottom: 7px; line-height: 1.55; }
.timeline-group h4 { font-family: 'IBM Plex Mono',monospace; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-9); margin-bottom: 10px; margin-top: 14px; }
.timeline-group h4:first-child { margin-top: 0; }
.timeline-group table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.timeline-group th, .timeline-group td { border-bottom: 1px solid var(--border); text-align: left; padding: 6px 0; font-size: 0.79rem; }
.timeline-group td { text-align: right; font-family: 'IBM Plex Mono',monospace; color: var(--off-white); }
.timeline-group th { color: var(--grey-9); }
.timeline-highlight { font-size: 0.82rem; color: var(--grey-9); margin-top: 6px; }
.timeline-highlight.lead { color: var(--orange); font-family: 'IBM Plex Mono',monospace; font-weight: 600; }

/* PROJECT MEDIA CAROUSEL */
.project-media {
    position: relative; height: 560px;
    border: 1px solid var(--border); background: #000; overflow: hidden;
    transition: border-color 0.3s var(--ease);
}
.project-media:hover { border-color: rgba(224,92,26,0.44); }
.media-main, .media-cloud {
    position: absolute; background-size: contain;
    background-repeat: no-repeat; background-position: center;
    transition: opacity 0.44s var(--ease), transform 0.55s var(--ease);
}
.media-main { inset: 5% 5% 13% 5%; z-index: 4; }
.media-cloud { opacity: 0.18; filter: blur(5px); }
.media-cloud-1 { inset: 2% 24% 56% 24%; z-index: 2; }
.media-cloud-2 { inset: 53% 26% 4% 26%; z-index: 1; }
.project-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 20%), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 58%);
    z-index: 0;
    pointer-events: none;
}
.media-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 7;
    width: 34px; height: 34px; border: 1px solid var(--border); color: var(--off-white);
    background: rgba(12,12,12,0.82); cursor: pointer;
    display: grid; place-items: center;
    font-family: 'IBM Plex Mono',monospace; font-size: 14px;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
                background 0.2s var(--ease), transform 0.2s var(--ease);
}
.media-arrow:hover { border-color: var(--orange); color: var(--orange); background: rgba(12,12,12,0.96); transform: translateY(-50%) scale(1.08); }
.media-arrow.prev { left: 12px; }
.media-arrow.next { right: 12px; }
.media-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 8; }
.media-dot {
    width: 7px; height: 7px; rotate: 45deg;
    background: transparent; border: 1px solid rgba(240,237,230,0.32);
    cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.media-dot.is-active { background: var(--orange); border-color: var(--orange); }

/* ============================================================
   ALL PROJECTS MOSAIC
   ============================================================ */
.all-projects-shell { display: grid; gap: 18px; align-content: start; padding-top: 18px; padding-bottom: 40px; }
.all-projects-filter {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    position: sticky;
    top: 82px;
    z-index: 6;
    width: max-content;
    max-width: 100%;
    padding: 6px;
    background: rgba(12,12,12,0.86);
    border: 1px solid var(--border);
    box-shadow: 0 18px 44px rgba(0,0,0,0.24);
}
.all-filter-btn {
    border: 1px solid var(--border); background: transparent; color: var(--grey-9);
    font-family: 'IBM Plex Mono',monospace; font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; padding: 7px 14px; cursor: pointer; transition: all 0.2s var(--ease);
}
.all-filter-btn:hover { border-color: var(--orange); color: var(--orange); }
.all-filter-btn.is-active { background: var(--orange); color: var(--black); border-color: var(--orange); }

.all-projects-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    grid-auto-rows: minmax(170px, 20vw);
    gap: 7px;
    grid-auto-flow: dense;
}

/* Variable tile — --cols / --rows set per card inline */
.all-project-card {
    grid-column: span var(--cols, 1);
    grid-row: span var(--rows, 1);
    position: relative; overflow: hidden;
    border: 1px solid var(--border);
    background: #000;
    cursor: pointer; isolation: isolate;
    transition: border-color 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.all-project-card::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(224,92,26,0.3), transparent 55%);
    opacity: 0; transition: opacity 0.26s var(--ease);
}
.all-project-card:hover { border-color: rgba(224,92,26,0.62); box-shadow: 0 14px 44px rgba(0,0,0,0.65), 0 0 0 1px rgba(224,92,26,0.22); }
.all-project-card:hover::after { opacity: 1; }
.all-project-visual {
    width: 100%; height: 100%; display: block; overflow: hidden;
    background: #000;
}
.all-project-card img {
    width: 100%; height: 100%; object-fit: contain; object-position: center;
    display: block; padding: clamp(5px,0.9vw,10px);
    filter: grayscale(0.12) contrast(1.04);
    transform: scale(1);
    transition: filter 0.4s var(--ease), transform 0.5s var(--ease);
    will-change: transform, filter;
}
.all-project-card:hover img { filter: grayscale(0) contrast(1.08); transform: scale(1); }
.all-project-card img[src*="media/images/"] { object-fit: contain; filter: brightness(1.02) saturate(0.95) contrast(1.06); padding: clamp(5px,0.9vw,10px); background: #000; }
.all-project-card:hover img[src*="media/images/"] { filter: brightness(1.08) saturate(1.04) contrast(1.12); transform: scale(1); }
.all-project-card.is-hidden { display: none; }

/* ============================================================
   WHY KOKKI — SECTION VIDEO BACKGROUND
   ============================================================ */
#why-kokki {
    position: relative;
    isolation: isolate;
    overflow: clip;
}
.why-bg-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.why-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.58) contrast(1.04) brightness(0.34);
    transform: scale(1.04);
}
.why-bg-video-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.86) 42%, rgba(0,0,0,0.92) 100%);
}
#why-kokki > *:not(.why-bg-video-wrap):not(.section-bg-video-wrap):not(.section-after-header-shade) {
    position: relative;
    z-index: 2;
}

/* ============================================================
   WHY KOKKI
   ============================================================ */
.why-panel { display: grid; align-items: center; }
.why-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(290px,0.72fr); gap: 34px; align-items: center; }
.why-panel .container {
    padding: 30px;
    border: 1px solid var(--border);
    background: linear-gradient(145deg, rgba(240,237,230,0.03), rgba(240,237,230,0.01));
    box-shadow: 0 28px 72px rgba(0,0,0,0.28);
    position: relative;
    overflow: hidden;
}
.why-panel-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.why-panel-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.62) contrast(1.06) brightness(0.44);
    transform: scale(1.03);
}
.why-panel-video-tint {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.72) 100%),
        radial-gradient(700px 240px at 18% 18%, rgba(224,92,26,0.14), transparent 62%);
}
.why-panel-top .container {
    background: linear-gradient(145deg, rgba(12,12,12,0.2), rgba(12,12,12,0.12));
    backdrop-filter: blur(1.5px);
}
.why-panel-top .why-layout {
    position: relative;
    z-index: 1;
}
.why-panel-top .why-content,
.why-panel-top .why-visual {
    position: relative;
    z-index: 2;
}
.why-panel .container::before {
    content: '';
    position: absolute;
    left: -40px;
    top: -40px;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(240,237,230,0.08);
    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
    opacity: 0.45;
    pointer-events: none;
}
.why-panel .container::after {
    content: '';
    position: absolute;
    right: 22px;
    top: 22px;
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, rgba(224,92,26,0.78), rgba(240,237,230,0.05));
    opacity: 0.6;
    pointer-events: none;
}
.why-panel:nth-of-type(even) .why-content { order: 2; }
.why-panel:nth-of-type(even) .why-visual { order: 1; }
.why-content { display: grid; gap: 14px; }
.why-header { font-size: 1.06rem; color: var(--off-white); margin: 0; }
.why-subheader { font-family: 'IBM Plex Mono',monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange); }
.line-stack { display: grid; gap: 5px; }
.line-stack p {
    border: 1px solid var(--border); border-left: 2px solid var(--orange);
    padding: 9px 13px; font-size: 0.93rem; color: var(--grey-9);
    margin: 0; background: var(--black-2);
    transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.line-stack p:hover { background: var(--black-3); border-color: rgba(224,92,26,0.38); }
.why-explain { border: 1px solid var(--border); padding: 14px; background: var(--black-2); display: grid; gap: 9px; }
.why-explain p { font-size: 0.9rem; color: var(--grey-9); margin: 0; line-height: 1.65; }
.why-visual {
    border: 1px solid var(--border); overflow: hidden; min-height: 360px;
    background: transparent;
    position: relative;
    height: clamp(340px, 30vw, 420px);
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.why-visual:hover { border-color: rgba(224,92,26,0.44); box-shadow: 0 18px 50px rgba(0,0,0,0.55); }
.why-visual img, .why-visual video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: none; transition: filter 0.4s var(--ease), transform 0.5s var(--ease); background: transparent; position: relative; z-index: 0; }
.why-visual img[src*="Modular Agility.png"] { object-position: 50% 50%; }
.why-visual img[src*="Radical Transparency.png"] { object-position: 50% 50%; }
.why-visual img[src*="Controll & Supportt.png"] { object-position: 50% 48%; }
.why-visual img[src*="Aggrigated infrastructure.png"] { object-position: 50% 50%; }
.why-visual:hover img, .why-visual:hover video { filter: none; transform: scale(1); }
.fleet-rows { display: grid; gap: 6px; }
.fleet-row {
    border: 1px solid var(--border); padding: 10px 13px; background: var(--black-2);
    display: grid; gap: 3px;
    transition: border-color 0.22s var(--ease), background 0.22s var(--ease), transform 0.22s var(--ease);
}
.fleet-row:hover { border-color: rgba(224,92,26,0.42); background: var(--black-3); transform: translateX(4px); }
.fleet-row strong { font-family: 'IBM Plex Mono',monospace; color: var(--orange); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; }
.fleet-row span { font-size: 0.87rem; color: var(--grey-9); }
.why-highlight { display: grid; align-items: center; }
.why-highlight .container {
    border: 1px solid var(--border-hi); border-left: 3px solid var(--orange);
    padding: 44px 38px;
    background: linear-gradient(138deg, rgba(240,237,230,0.055), transparent 58%);
    box-shadow: 0 30px 72px rgba(0,0,0,0.28);
}
.why-highlight p { color: var(--white); font-size: clamp(1.06rem,1.7vw,1.44rem); line-height: 1.85; margin: 0; }
.why-optimize-lead {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--orange);
    font-weight: 700;
}

/* Background image styling for why-highlight */
.why-highlight[style*="background-image"] {
    position: relative; min-height: 320px;
    display: flex; align-items: center; justify-content: center;
}
.why-highlight[style*="background-image"]::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(12,12,12,0.78) 0%, rgba(12,12,12,0.68) 50%, rgba(12,12,12,0.72) 100%);
    z-index: 1;
}
.why-highlight[style*="background-image"] .container {
    position: relative; z-index: 2;
    background: transparent; border-color: rgba(240,237,230,0.18);
    box-shadow: none;
}
/* ============================================================
   FOUNDER
   ============================================================ */
.founder-layout {
    display: grid;
    align-items: center;
    padding-top: clamp(74px, 9vh, 118px);
    padding-bottom: clamp(36px, 5vh, 64px);
}
.founder-grid {
    display: grid;
    grid-template-columns: minmax(300px,0.78fr) minmax(0,1.22fr);
    gap: 38px;
    align-items: start;
}
.founder-photo {
    border: 1px solid var(--border); padding: 7px;
    background: #000; min-height: 530px; overflow: hidden;
    transition: border-color 0.3s var(--ease);
    position: sticky;
    top: 92px;
    box-shadow: 0 28px 72px rgba(0,0,0,0.34);
}
.founder-photo:hover { border-color: rgba(224,92,26,0.5); }
.founder-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; filter: grayscale(0.08); transition: filter 0.4s var(--ease), transform 0.5s var(--ease); background: #000; }
.founder-photo:hover img { filter: grayscale(0); transform: scale(1); }
.founder-content { display: grid; gap: 18px; }
.founder-content h2 {
    margin: 0 0 8px;
}
.founder-block {
    border: 1px solid var(--border); padding: 18px; background: linear-gradient(145deg, rgba(240,237,230,0.03), rgba(240,237,230,0.01));
    display: grid; gap: 10px;
    transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.founder-block:hover { border-color: rgba(224,92,26,0.36); background: var(--black-3); }
.founder-block h3 { font-size: 0.9rem; letter-spacing: 0.04em; color: var(--orange); }
.founder-block p { color: var(--grey-9); font-size: 0.95rem; line-height: 1.68; }
.founder-mail { color: var(--orange); font-family: 'IBM Plex Mono',monospace; text-decoration: none; font-size: 0.86rem; border-bottom: 1px dashed rgba(224,92,26,0.42); transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.founder-mail:hover { color: var(--off-white); border-color: var(--off-white); }

/* Sharp panel geometry */
.how-text,
.feature-card,
.cap-hud,
.project-left,
.dropdown,
.project-media,
.all-project-card,
.why-panel .container,
.why-visual,
.founder-photo,
.founder-block,
.contact-container,
.section-header.has-bg-video .container {
    border-radius: 0;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-page { min-height: 100vh; }
.contact-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 86px 20px 40px;
    background: radial-gradient(860px 480px at 78% 8%, rgba(224,92,26,0.08), transparent 58%), linear-gradient(180deg, #0f0f0f 0%, #090909 100%);
}
.contact-container {
    width: min(980px,100%);
    border: 1px solid var(--border);
    padding: 34px;
    background: linear-gradient(145deg, rgba(240,237,230,0.035), rgba(240,237,230,0.012));
    box-shadow: 0 34px 84px rgba(0,0,0,0.36);
}
.contact-container h1 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
    text-transform: uppercase;
    margin: 18px 0 14px;
    color: var(--white);
}
.back-home { color: var(--orange); text-decoration: none; font-family: 'IBM Plex Mono',monospace; font-size: 0.8rem; letter-spacing: 0.06em; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease); }
.back-home:hover { border-color: var(--orange); }
.contact-form { margin-top: 26px; display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.contact-form label { display: grid; gap: 7px; font-family: 'IBM Plex Mono',monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-9); }
.contact-form input, .contact-form select, .contact-form textarea { font-family: 'Space Grotesk',sans-serif; font-size: 0.96rem; color: var(--off-white); background: rgba(12,12,12,0.86); border: 1px solid var(--border); padding: 11px 12px; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 2px rgba(224,92,26,0.16); }
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover { background: rgba(20,20,20,0.96); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-left.is-visible  { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(26px);  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.17s; }
.reveal-delay-3 { transition-delay: 0.26s; }
.reveal-delay-4 { transition-delay: 0.35s; }
.reveal-delay-5 { transition-delay: 0.44s; }
.reveal-delay-6 { transition-delay: 0.53s; }

/* ============================================================
   SECTION NUMBER COUNTER (auto via CSS)
   ============================================================ */
main { counter-reset: section-num; }
.snap-section .section-header h2::before {
    counter-increment: section-num;
    content: counter(section-num, decimal-leading-zero) ' ——';
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.26em;
    color: var(--orange);
    font-weight: 600;
    margin-bottom: 10px;
    opacity: 0.84;
}

/* ============================================================
   HERO GLITCH + BOTTOM ACCENT
   ============================================================ */
@keyframes glitchFlicker {
    0%, 91%, 100% { text-shadow: none; }
    92%  { text-shadow: 2px 0 0 rgba(224,92,26,0.7), -2px 0 0 rgba(240,237,230,0.3); }
    93%  { text-shadow: none; }
    94%  { text-shadow: -2px 1px 0 rgba(224,92,26,0.55); }
    95%  { text-shadow: none; }
}
.hero-headline { animation: glitchFlicker 11s ease-in-out 3s infinite; }

.hero-panel::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 6%, var(--orange) 28%, rgba(240,237,230,0.55) 50%, var(--orange) 72%, transparent 94%);
    z-index: 5; opacity: 0.6;
}

/* Clip-path reveal for hero copy blocks */
.hero-copy-block {
    clip-path: inset(0 100% 0 0);
    transition: opacity 0.52s var(--ease), transform 0.52s var(--ease), clip-path 0.52s var(--ease);
}
.hero-copy-block.is-visible { clip-path: inset(0 0% 0 0); }

/* ============================================================
   BUTTON SWEEP ON HOVER
   ============================================================ */
.btn { position: relative; overflow: hidden; }
.btn::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.11);
    transform: translateX(-110%) skewX(-18deg);
    transition: transform 0.44s var(--ease);
    pointer-events: none;
}
.btn:hover::before { transform: translateX(110%) skewX(-18deg); }

.nav-cta { position: relative; overflow: hidden; }
.nav-cta::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.1);
    transform: translateX(-110%) skewX(-18deg);
    transition: transform 0.44s var(--ease);
    pointer-events: none;
}
.nav-cta:hover::before { transform: translateX(110%) skewX(-18deg); }

/* ============================================================
   ORANGE CORNER BRACKETS (interactive panels)
   ============================================================ */
.feature-card, .cap-hud, .why-explain, .contact-container, .founder-block { position: relative; }
.feature-card::before, .cap-hud::before, .why-explain::before, .contact-container::before, .founder-block::before {
    content: '';
    position: absolute; top: -1px; left: -1px;
    width: 12px; height: 12px;
    border-top: 2px solid var(--orange);
    border-left: 2px solid var(--orange);
    pointer-events: none; z-index: 1;
    transition: width 0.3s var(--ease), height 0.3s var(--ease);
}
.feature-card:hover::before, .cap-hud:hover::before, .why-explain:hover::before,
.contact-container:hover::before, .founder-block:hover::before { width: 22px; height: 22px; }

/* ============================================================
   METRIC PILL BOTTOM ACCENT + TABULAR NUMS
   ============================================================ */
.metric-pill { position: relative; overflow: hidden; }
.metric-pill strong { font-variant-numeric: tabular-nums; }
.metric-pill::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--orange), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.58s var(--ease);
}
.metric-pill.is-visible::after { transform: scaleX(1); }

/* ============================================================
   FILTER BUTTON INNER SWEEP
   ============================================================ */
.all-filter-btn { position: relative; overflow: hidden; }
.all-filter-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(224,92,26,0.14);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
}
.all-filter-btn:hover::before { transform: scaleX(1); }

#overview {
    background:
        radial-gradient(900px 520px at 12% 0%, rgba(224,92,26,0.08), transparent 62%),
        linear-gradient(180deg, rgba(20,20,20,0.96), rgba(12,12,12,0.98));
}

#capabilities {
    background:
        linear-gradient(180deg, rgba(240,237,230,0.02), transparent 18%),
        linear-gradient(180deg, #121212 0%, #0f0f0f 100%);
}

#projects {
    background:
        radial-gradient(860px 420px at 88% 8%, rgba(224,92,26,0.08), transparent 58%),
        linear-gradient(180deg, #101010 0%, #0c0c0c 100%);
}

#why-kokki {
    background:
        radial-gradient(760px 440px at 14% 8%, rgba(240,237,230,0.045), transparent 60%),
        linear-gradient(180deg, #111111 0%, #0d0d0d 100%);
}

#founder {
    background:
        radial-gradient(900px 520px at 82% 12%, rgba(224,92,26,0.07), transparent 62%),
        linear-gradient(180deg, #0f0f0f 0%, #090909 100%);
}

/* ============================================================
   FOUNDER — BACKGROUND IMAGE
   ============================================================ */
.founder-has-bg {
    position: relative;
    isolation: isolate;
    background: transparent;
}
#founder.founder-has-bg {
    background: transparent;
}
.founder-bg-image-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.founder-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: saturate(0.68) contrast(1.08) brightness(0.34);
}
.founder-bg-image-tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10,10,10,0.76) 0%,
        rgba(10,10,10,0.68) 45%,
        rgba(10,10,10,0.78) 100%
    );
}
.founder-has-bg > *:not(.founder-bg-image-wrap) {
    position: relative;
    z-index: 2;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: max(180px, 34vh);
    border-top: 1px solid rgba(240, 237, 230, 0.16);
    background: transparent;
    padding: 24px 0 30px;
}

.site-footer-inner {
    display: grid;
    gap: 12px;
}

.site-footer-title {
    margin: 0;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--orange);
}

.site-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.site-footer-link {
    display: block;
    padding: 12px 14px;
    border: 1px solid rgba(240, 237, 230, 0.18);
    background: rgba(7, 7, 7, 0.72);
    color: var(--off-white);
    text-decoration: none;
    font-size: 0.93rem;
    line-height: 1.45;
    transition: border-color .24s ease, color .24s ease, transform .24s ease, background .24s ease;
}

.site-footer-link:hover,
.site-footer-link:focus-visible {
    border-color: rgba(224,92,26,0.74);
    color: var(--off-white);
    background: rgba(10, 10, 10, 0.92);
    transform: translateY(-2px);
}

/* ============================================================
   PERFORMANCE HINTS
   ============================================================ */
.all-project-card, .feature-card, .why-visual, .founder-photo, .project-media { will-change: transform; }

/* ============================================================
   NAV LINK POSITION (needed for ::after dot)
   ============================================================ */
.nav-links a { position: relative; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1140px) {
    .nav-links,
    .nav-cta { display: none; }
    .nav-toggle { display: inline-flex; }
    .how-layout, .cap-layout, .project-layout, .why-layout, .founder-grid { grid-template-columns: 1fr; }
    .how-text.right { text-align: left; }
    .how-connector { display: none; }
    .cap-copy, .project-right, .founder-photo, .all-projects-filter { position: static; top: auto; }
    .projects-header-inner { grid-template-columns: 1fr; gap: 20px; }
    .projects-controls-col { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .projects-stage-top {
        padding-top: 74px;
    }
    .projects-controls-stack {
        width: 100%;
    }
    .projects-controls-stack .project-case-nav {
        justify-content: space-between;
        width: 100%;
    }
    .why-panel:nth-of-type(even) .why-content, .why-panel:nth-of-type(even) .why-visual { order: initial; }
    .project-media { height: 420px; }
    .all-projects-grid { grid-template-columns: repeat(3,1fr); grid-auto-rows: minmax(150px,26vw); gap: 6px; }
    .metric-strip { grid-template-columns: repeat(2,1fr); }
    .cap-media { min-height: clamp(220px, 44vw, 340px); }
    .founder-photo {
        min-height: clamp(280px, 46vw, 440px);
        max-height: 540px;
    }
    .cap-layout {
        grid-template-areas:
            'title'
            'copy'
            'hud';
    }
    .section-header.has-bg-video::before,
    .section-header.has-bg-video::after { display: none; }
    .section-header.has-bg-video .container { padding: 20px; }
    .why-visual { height: auto; }
}

/* Projects section image background (topic lighter -> deeper content darker) */
#projects.section-with-bg-image {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: transparent;
}
.projects-bg-image-wrap {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    margin-bottom: -100vh;
    z-index: 0;
    pointer-events: none;
}
.projects-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.59) contrast(1.03) brightness(0.56) hue-rotate(-2deg);
}
.projects-bg-image-tint {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.4) 48%, rgba(0,0,0,0.58) 100%),
        radial-gradient(900px 380px at 16% 10%, rgba(224,92,26,0.08), transparent 66%);
}
#projects.section-with-bg-image > *:not(.projects-bg-image-wrap):not(.section-after-header-shade) {
    position: relative;
    z-index: 2;
}

@media (max-width: 780px) {
    .scan-overlay,
    .noise-overlay { display: none; }

    h2 { font-size: clamp(1.72rem, 8.2vw, 2.38rem); }
    h3 { font-size: clamp(1.16rem, 5.1vw, 1.62rem); }

    .site-nav { padding: 0 16px; }
    .container { width: min(1260px, calc(100% - 28px)); }
    .section-header { padding-top: 80px; padding-bottom: 22px; }
    .section-header p { font-size: 0.93rem; line-height: 1.58; }
    .section-header .container { gap: 10px; padding-bottom: 14px; }

    .snap-section::after { height: 32px; }
    .mobile-nav-shell {
        width: 100%;
        margin-left: 0;
        border-left: none;
    }
    .hero-panel {
        padding-bottom: 88px;
    }
    .hero-headline { font-size: clamp(1.62rem, 8.6vw, 2.44rem); }
    .hero-copy-sequence { gap: 8px; }
    .hero-copy-block { font-size: 0.86rem; line-height: 1.55; padding: 10px 11px; }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-grid-overlay { opacity: 0.26; background-size: 56px 56px; }
    .scroll-hint { bottom: 16px; }
    .how-text, .project-left, .why-panel .container, .contact-container { padding: 16px; }
    .founder-layout {
        padding-top: 86px;
        padding-bottom: 26px;
    }
    .project-case-nav, .all-projects-filter, .project-mode-toggle { width: 100%; }
    .project-case-nav { justify-content: space-between; }
    .projects-header-inner { grid-template-columns: 1fr; }
    .projects-controls-col { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
    .all-projects-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: minmax(128px,34vw); gap: 6px; }
    .all-project-card { grid-column: span 1 !important; grid-row: span 1 !important; }
    .metric-strip { grid-template-columns: 1fr; }
    .spec-row { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .project-media { height: clamp(180px, 54vw, 260px); }
    .why-visual { min-height: 240px; height: clamp(240px, 56vw, 300px); }
    .founder-photo {
        min-height: clamp(240px, 62vw, 360px);
        max-height: none;
    }
    .founder-photo img {
        object-fit: cover;
    }

    .shape-circle,
    .shape-rect,
    .shape-wide {
        width: 100%;
    }

    .cap-media {
        min-height: clamp(180px, 52vw, 250px);
        box-shadow: 0 14px 34px rgba(0,0,0,0.26);
    }

    .section-bg-video,
    #overview .section-bg-video {
        filter: saturate(0.5) contrast(1.02) brightness(0.52);
    }

    #overview .how-text,
    #capabilities .feature-card,
    #capabilities .cap-hud,
    #projects .project-left,
    #projects .dropdown,
    #why-kokki .why-panel .container,
    #why-kokki .why-explain,
    #founder .founder-block {
        backdrop-filter: none;
        box-shadow: 0 10px 24px rgba(0,0,0,0.24);
    }

    .how-visual img[src*="Criticality&process mapping.jpeg"] { object-position: 50% 46%; }
    .how-visual img[src*="Build your supply chainnn.png"] { object-position: 50% 54%; }
    .how-visual img[src*="Monitor and Control.jpeg"] { object-position: 52% 50%; }
    .how-visual img[src*="Receivee and Verify.png"] { object-position: 50% 52%; }

    .why-visual img[src*="Modular Agility.png"] { object-position: 50% 50%; }
    .why-visual img[src*="Radical Transparency.png"] { object-position: 50% 50%; }
    .why-visual img[src*="Controll & Supportt.png"] { object-position: 50% 46%; }
    .why-visual img[src*="Aggrigated infrastructure.png"] { object-position: 50% 50%; }

    .site-footer {
        padding: 22px 0 28px;
    }
    .site-footer-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 520px) {
    .site-nav { height: 52px; }
    .hero-panel { padding-top: 52px; }
    .container { width: min(1260px, calc(100% - 22px)); }
    .section-header { padding-top: 74px; padding-bottom: 18px; }
    .hero-actions .btn {
        padding: 10px 14px;
        font-size: 10px;
    }
    .project-mode-btn { padding: 7px 10px; font-size: 9px; }
    .project-nav-btn { width: 36px; height: 30px; font-size: 10px; }
    .how-drum { padding-left: 0; }
    .cap-title { font-size: clamp(1.32rem, 7vw, 1.8rem); }
    .cap-layout { gap: 20px; }
    .feature-card { padding: 14px 14px 14px 15px; }
    .metric-pill { padding: 11px 10px; }
    .project-left { padding: 14px; }
    .dropdown ul, .timeline-group { padding: 11px; }
}

@media (max-width: 390px) {
    html, body {
        overflow-x: hidden;
    }

    .container { width: calc(100% - 18px); }

    .section-header {
        padding-top: 68px;
        padding-bottom: 16px;
    }

    .section-header p,
    .hero-copy-block,
    .project-left p,
    .line-stack p,
    .why-explain p,
    .feature-card p,
    .dropdown li,
    .timeline-group li {
        font-size: 0.84rem;
        line-height: 1.5;
    }

    h2 { font-size: clamp(1.5rem, 7.7vw, 1.95rem); }
    h3 { font-size: clamp(1.02rem, 5.4vw, 1.3rem); }
    .hero-headline { font-size: clamp(1.42rem, 7.9vw, 1.98rem); }

    .hero-panel { padding-bottom: 74px; }
    .hero-actions { gap: 8px; }
    .hero-actions .btn {
        min-height: 42px;
        font-size: 10px;
        letter-spacing: 0.14em;
    }

    .project-mode-toggle,
    .project-case-nav,
    .all-projects-filter {
        gap: 5px;
    }

    .project-mode-btn {
        padding: 6px 8px;
        font-size: 8px;
        letter-spacing: 0.14em;
    }

    .project-nav-btn {
        width: 32px;
        height: 28px;
        font-size: 9px;
    }

    .all-projects-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: minmax(106px, 43vw);
        gap: 5px;
    }

    .cap-layout,
    .project-layout,
    .why-layout,
    .founder-grid,
    .founder-layout {
        gap: 16px;
    }

    .cap-media { min-height: clamp(160px, 49vw, 210px); }
    .project-media { height: clamp(164px, 52vw, 220px); }
    .why-visual { min-height: 190px; height: clamp(190px, 53vw, 250px); }
    .founder-photo { min-height: clamp(180px, 50vw, 240px); }

    .feature-card,
    .project-left,
    .how-text,
    .why-panel .container,
    .founder-block,
    .dropdown ul,
    .timeline-group {
        padding: 10px;
    }

    .metric-pill {
        padding: 9px 8px;
    }

    .metric-pill strong {
        font-size: 1.05rem;
    }

    .spec-row,
    .spec-row > div,
    .project-left table,
    .project-left tbody,
    .project-left tr,
    .project-left th,
    .project-left td {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .project-left table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .site-footer {
        padding: 18px 0 22px;
    }

    .site-footer-link {
        padding: 10px 11px;
        font-size: 0.86rem;
    }
}

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

@media (hover: none), (pointer: coarse) {
    .feature-card:hover,
    .metric-pill:hover,
    .project-media:hover,
    .how-visual:hover,
    .site-footer-link:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .nav-links a:hover {
        transform: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    html, body { scroll-snap-type: none; }
}

/* Drum responsive overrides */
@media (max-width: 1140px) {
    .how-pipeline { --pn: 22px; --pg: 40px; left: 12px; }
    .how-drum { padding-left: 64px; }
}
@media (max-width: 780px) {
    .how-pipeline { display: none; }
    .how-wheel-track { height: auto; }
    .how-wheel-sticky {
        position: relative;
        top: auto;
        height: auto;
        overflow: visible;
        display: block;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .how-wheel-sticky::before,
    .how-wheel-sticky::after { display: none; }
    .how-drum {
        height: auto;
        padding-left: 0;
        display: grid;
        gap: 14px;
    }
    .how-drum-slide {
        position: relative;
        inset: auto;
        transform: none !important;
        opacity: 1 !important;
        z-index: 1;
        pointer-events: auto;
        transition: none;
    }
    .how-drum-slide .container::before { display: none; }
}

@supports not (height: 100svh) {
    .section-bg-video-wrap {
        height: 100vh;
        margin-bottom: -100vh;
    }
    .section-after-header-shade { top: calc(100vh - 120px); }
    .how-wheel-track { height: calc(3.45 * 100vh); }
    .how-wheel-sticky { height: calc(100vh - 54px); }
}