/* ==============================================================
   rror — styles.css
   ==============================================================
   Sections:
     01. Reset & base
     02. Design tokens
     03. Typography
     04. Layout primitives
     05. Sitewide overlays (cursor, scanlines, noise)
     06. Nav
     07. Corner meta
     08. Wordmark + hero 'e' scroll-reveal
     09. Hero + signal lab (interactive mini rig)
     10. Sections
     11. Services
     12. Work grid
     13. Bio
     14. Contact form
     15. Full console (contact page gamified rig)
     16. Footer
     17. Boot overlay
     18. Animations
     19. Responsive
   ============================================================== */


/* 01. Reset =================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    background:var(--bg);color:var(--fg);
    font-family:var(--font-mono);font-weight:400;font-size:14px;line-height:1.6;
    min-height:100vh;overflow-x:hidden;cursor:none;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:none}
input,textarea,select{font:inherit;color:inherit}
kbd{font-family:var(--font-mono);font-size:0.85em;padding:1px 6px;border:0.5px solid var(--border-hi);border-radius:3px;color:var(--fg);background:var(--bg-card)}
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* 02. Design tokens =========================================== */
:root{
    --bg:#0a0a0a;
    --bg-soft:#0f0f0f;
    --bg-card:#131313;
    --bg-hover:#1a1a1a;
    --fg:#f5f5f0;
    --fg-muted:#888;
    --fg-dim:#555;
    --fg-faint:#2a2a2a;
    --border:#1f1f1f;
    --border-hi:#333;
    --glitch-r:#ff2b2b;
    --glitch-c:#00e0ff;
    --font-display:"Unbounded",system-ui,sans-serif;
    --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
    --pad-x:clamp(20px,4vw,56px);
    --pad-y:clamp(40px,7vw,120px);
    --nav-h:64px;
}


/* 03. Typography ============================================== */
.display{font-family:var(--font-display);font-weight:800;letter-spacing:-0.03em;line-height:0.95}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg-dim);display:inline-block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-0.02em;line-height:1.05}
h1{font-size:clamp(48px,10vw,148px);font-weight:800;letter-spacing:-0.04em}
h2{font-size:clamp(32px,5vw,64px)}
h3{font-size:clamp(22px,2.8vw,32px)}
h4{font-size:clamp(16px,1.6vw,20px);font-weight:500}
p{font-size:14px;line-height:1.7;color:var(--fg);max-width:58ch}
p.lead{font-size:clamp(16px,1.4vw,20px);line-height:1.6;color:var(--fg);max-width:62ch}


/* 04. Layout =================================================== */
.main{position:relative;z-index:1}
.section{padding:var(--pad-y) var(--pad-x);position:relative}
.section--soft{background:var(--bg-soft)}
.section__head{margin-bottom:clamp(40px,5vw,72px);display:flex;flex-direction:column;gap:20px;max-width:840px}
.section__number{font-size:11px;color:var(--fg-dim);letter-spacing:0.25em;font-family:var(--font-mono)}


/* 05. Overlays ================================================ */
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:90;
    background:repeating-linear-gradient(0deg,rgba(255,255,255,0.02) 0px,rgba(255,255,255,0.02) 1px,transparent 1px,transparent 3px);
    mix-blend-mode:overlay}
.noise{position:fixed;inset:0;pointer-events:none;z-index:91;opacity:0.05;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation:noiseShift 0.4s steps(4) infinite}
@keyframes noiseShift{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-2%)}75%{transform:translate(-2%,1%)}100%{transform:translate(0,0)}}

.cursor{position:fixed;width:24px;height:24px;pointer-events:none;z-index:100;
    transform:translate(-50%,-50%);opacity:0;
    transition:opacity 0.3s,width 0.2s,height 0.2s;mix-blend-mode:difference}
.cursor.is-visible{opacity:1}
.cursor.is-hover{width:44px;height:44px}
.cursor__cx,.cursor__cy{position:absolute;background:#fff}
.cursor__cx{left:0;right:0;top:50%;height:1px;transform:translateY(-50%)}
.cursor__cy{top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%)}
@media(hover:none){.cursor{display:none}body,a,button{cursor:auto}}


/* 06. Nav ===================================================== */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 var(--pad-x);z-index:50;
    background:rgba(10,10,10,0.7);
    backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);
    border-bottom:0.5px solid var(--border)}
.nav__brand{display:inline-flex;align-items:center;height:100%}
.nav__links{display:flex;gap:28px;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg-muted)}
.nav__links a{transition:color 0.2s;position:relative}
.nav__links a:hover,.nav__links a.is-active{color:var(--fg)}
.nav__links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:1px;background:var(--fg)}
.nav__menu-toggle{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav__menu-toggle span{display:block;width:22px;height:1px;background:var(--fg);transition:transform 0.3s}
.nav__menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav__menu-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}


/* 07. Corner meta ============================================= */
.meta{position:fixed;font-size:10px;color:var(--fg-dim);letter-spacing:0.15em;line-height:1.5;z-index:30;font-family:var(--font-mono);pointer-events:none}
.meta--tl{top:calc(var(--nav-h) + 18px);left:var(--pad-x)}
.meta--tr{top:calc(var(--nav-h) + 18px);right:var(--pad-x);text-align:right}
.meta--bl{bottom:18px;left:var(--pad-x)}
.meta--br{bottom:18px;right:var(--pad-x);text-align:right}


/* 08. Wordmark + hero 'e' reveal ============================== */
.wordmark{display:inline-flex;align-items:baseline;
    font-family:var(--font-display);font-weight:800;letter-spacing:-0.05em;line-height:0.9;color:var(--fg)}
.wordmark--hero{font-size:clamp(90px,18vw,240px)}
.wordmark--small{font-size:18px}
.wordmark--footer{font-size:clamp(48px,8vw,96px)}

/* Hero 'e' — hidden at rest, glitches in on scroll */
.hero__e{
    display:inline-block;position:relative;line-height:0;
    width:0;overflow:hidden;  /* collapsed by default — takes no space */
    opacity:0;transform:translateX(-20px);
    transition:opacity 0.4s,transform 0.4s,width 0.4s;
    color:inherit;
}
.hero__e .broken-e-svg{width:0.78em;height:0.94em;display:inline-block;vertical-align:baseline}
.hero__rror{display:inline-block}

/* Reveal state — controlled by JS via --reveal var (0 to 1) */
.hero__e.is-revealing{
    width:0.76em;  /* expand to make room */
    opacity:var(--reveal,0);
    transform:translateX(calc((1 - var(--reveal,0)) * -12px));
    filter:blur(calc((1 - var(--reveal,0)) * 3px));
}
.hero__e.is-revealed{
    width:0.76em;opacity:1;transform:none;filter:none;
}

/* Broken-e SVG bands (used by the hero reveal) */
.broken-e-svg{display:inline-block;vertical-align:baseline;color:currentColor;transform:translateY(0.06em)}
.broken-e-bands text{transition:transform 0.25s cubic-bezier(0.2,0.8,0.2,1)}
.broken-e-b1{transform:translateX(3px)}
.broken-e-b2{transform:translateX(-2px)}
.broken-e-b3{transform:translateX(4px)}
.broken-e-b4{transform:translateX(-3px)}
.broken-e-b5{transform:translateX(2px)}

/* Active glitch flicker while revealing */
.hero__e.is-revealing .broken-e-svg{animation:eGlitch 0.3s steps(3) infinite}
@keyframes eGlitch{
    0%{filter:blur(1px);transform:translateY(0.06em) translateX(-2px)}
    33%{filter:blur(0.5px);transform:translateY(0.06em) translateX(3px) skewX(2deg)}
    66%{filter:none;transform:translateY(0.06em) translateX(-1px)}
    100%{filter:blur(0.8px);transform:translateY(0.06em) translateX(2px)}
}

/* Revealed state: subtle auto-flicker every ~8s */
.hero__e.is-revealed .broken-e-svg{animation:eFlickerSubtle 8s infinite}
@keyframes eFlickerSubtle{
    0%,96%,100%{filter:none}
    97%{filter:blur(0.5px)}
    98%{filter:none}
    99%{filter:blur(0.3px)}
}


/* 09. Hero + signal lab ======================================= */
.hero{
    min-height:100vh;
    padding:calc(var(--nav-h) + 80px) var(--pad-x) 160px;
    position:relative;display:flex;flex-direction:column;justify-content:center;
    text-align:center;overflow:hidden;
}
.hero__viz{position:absolute;inset:0;width:100%;height:100%;opacity:0.8;pointer-events:none;z-index:0}
.hero__content{position:relative;z-index:2}
.hero__wordmark{display:inline-flex;margin-bottom:32px;justify-content:center}
.hero__tagline{
    font-size:clamp(13px,1.2vw,15px);max-width:520px;margin:0 auto;
    color:var(--fg-muted);letter-spacing:0.02em;line-height:1.7;
}
.hero__tagline em{color:var(--fg);font-style:normal;font-weight:500}
.hero__cta{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;z-index:3}

/* Signal lab — bottom area of hero */
.signal-lab{
    position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:32px;z-index:3;
    display:flex;gap:clamp(16px,3vw,40px);align-items:flex-end;flex-wrap:wrap;
    pointer-events:auto;
}
.signal-lab__group{display:flex;flex-direction:column;gap:8px}
.signal-lab__label{font-size:10px;color:var(--fg-dim);letter-spacing:0.2em;text-transform:uppercase}
.signal-lab__keys{display:flex;gap:6px}
.signal-lab__hint{
    margin-left:auto;font-size:10px;color:var(--fg-dim);letter-spacing:0.05em;
    font-family:var(--font-mono);text-align:right;line-height:1.8;
}

/* Key button — keyboard-style mini button */
.key{
    display:inline-flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 10px;min-width:56px;
    border:0.5px solid var(--border-hi);background:var(--bg-card);
    font-family:var(--font-mono);transition:all 0.15s;
    position:relative;
}
.key span{font-size:13px;font-weight:500;color:var(--fg);letter-spacing:0.05em}
.key em{font-size:9px;color:var(--fg-dim);letter-spacing:0.15em;text-transform:uppercase;font-style:normal}
.key:hover{background:var(--bg-hover);border-color:var(--fg-muted)}
.key--active{background:var(--fg);border-color:var(--fg)}
.key--active span{color:var(--bg)}
.key--active em{color:var(--bg);opacity:0.6}
.key--flash{animation:keyFlash 0.3s ease-out}
@keyframes keyFlash{0%{background:var(--fg);border-color:var(--fg)}100%{background:var(--bg-card);border-color:var(--border-hi)}}

/* CTA to full console */
.hero__cta-full{
    position:absolute;right:var(--pad-x);top:50%;transform:translateY(-50%);z-index:3;
    display:flex;flex-direction:column;align-items:flex-end;gap:8px;
    font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--fg-muted);
    padding:18px 22px;border:0.5px solid var(--border);background:rgba(10,10,10,0.6);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    transition:all 0.3s;max-width:180px;text-align:right;
}
.hero__cta-full:hover{border-color:var(--fg);color:var(--fg)}
.hero__cta-arrow{font-size:18px;color:var(--fg)}

/* Primary button */
.btn{
    display:inline-flex;align-items:center;gap:10px;padding:13px 22px;
    border:0.5px solid var(--border-hi);background:transparent;color:var(--fg);
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;
    transition:all 0.2s;white-space:nowrap;
}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--ghost:hover{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn__dot{width:6px;height:6px;border-radius:50%;background:var(--fg-dim);transition:background 0.3s}
.btn.is-active .btn__dot{background:var(--fg);animation:pulse 1.2s ease-in-out infinite}
.btn:hover .btn__dot{background:var(--bg)}


/* 10. Sections ================================================ */
.intro__grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,5vw,80px);align-items:start}
.intro__label{font-size:11px;color:var(--fg-dim);letter-spacing:0.25em;text-transform:uppercase}
.intro__body p+p{margin-top:18px}

.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border)}
.process__step{padding:28px 24px;border-right:0.5px solid var(--border);
    display:flex;flex-direction:column;gap:16px;transition:background 0.2s}
.process__step:last-child{border-right:none}
.process__step:hover{background:var(--bg-card)}
.process__step-num{font-size:11px;color:var(--fg-dim);letter-spacing:0.25em}
.process__step-title{font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.2;letter-spacing:-0.01em}
.process__step-desc{font-size:12px;color:var(--fg-muted);line-height:1.6}


/* 11. Services ================================================ */
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:0.5px;
    background:var(--border);border:0.5px solid var(--border)}
.service{padding:32px 28px;background:var(--bg);transition:background 0.2s;
    display:flex;flex-direction:column;gap:14px;min-height:200px}
.service:hover{background:var(--bg-card)}
.service__num{font-size:11px;color:var(--fg-dim);letter-spacing:0.25em}
.service__title{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-0.015em;line-height:1.1}
.service__desc{font-size:13px;color:var(--fg-muted);line-height:1.7}

.service-detail{padding:40px 32px;border-top:0.5px solid var(--border)}
.service-detail:first-of-type{border-top:none}
.service-detail__head{display:grid;grid-template-columns:80px 1fr 2fr;gap:24px;align-items:baseline;margin-bottom:20px}
.service-detail__num{font-size:11px;color:var(--fg-dim);letter-spacing:0.25em}
.service-detail__title{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-0.02em;line-height:1.1}
.service-detail__lead{font-size:14px;color:var(--fg);line-height:1.6;max-width:54ch}
.service-detail__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.service-detail__list li{font-size:13px;color:var(--fg-muted);padding-left:20px;position:relative;line-height:1.6}
.service-detail__list li::before{content:"+";position:absolute;left:0;top:0;font-family:var(--font-mono);color:var(--fg-dim)}


/* 12. Work grid =============================================== */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.work-item{aspect-ratio:4/5;background:var(--bg-card);position:relative;overflow:hidden;
    display:flex;flex-direction:column;justify-content:flex-end;padding:24px;transition:background 0.3s}
.work-item:hover{background:var(--bg-hover)}
.work-item__placeholder{position:absolute;inset:0;
    background:linear-gradient(135deg,transparent 49.5%,var(--fg-faint) 50%,transparent 50.5%),linear-gradient(45deg,transparent 49.5%,var(--fg-faint) 50%,transparent 50.5%);
    background-size:24px 24px;opacity:0.5;transition:opacity 0.3s}
.work-item:hover .work-item__placeholder{opacity:0.3}
.work-item__meta{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px}
.work-item__tag{font-size:10px;color:var(--fg-dim);letter-spacing:0.2em;text-transform:uppercase}
.work-item__title{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-0.015em}
.work-item__year{font-size:11px;color:var(--fg-muted)}


/* 13. Bio ===================================================== */
.bio{padding:clamp(40px,5vw,72px) 0;border-top:0.5px solid var(--border);
    display:grid;grid-template-columns:200px 1fr 1fr;gap:clamp(24px,3vw,56px);align-items:start}
.bio:first-of-type{border-top:none}
.bio__name{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,40px);letter-spacing:-0.03em;line-height:1.05}
.bio__alias{font-size:11px;color:var(--fg-dim);letter-spacing:0.25em;text-transform:uppercase;margin-top:8px}
.bio__role{font-size:12px;color:var(--fg-muted);letter-spacing:0.1em;text-transform:uppercase}
.bio__text p+p{margin-top:16px}
.bio__role-list{font-size:12px;color:var(--fg-muted);margin-top:20px;line-height:1.8}
.bio__role-list span{display:inline-block;padding:3px 10px;border:0.5px solid var(--border);margin:0 4px 4px 0;letter-spacing:0.05em}


/* 14. Contact form ============================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(32px,6vw,100px)}
.contact-info dl{display:grid;grid-template-columns:1fr;gap:24px}
.contact-info dt{font-size:11px;color:var(--fg-dim);letter-spacing:0.25em;text-transform:uppercase;margin-bottom:6px}
.contact-info dd{font-size:14px;color:var(--fg)}
.contact-info dd a{border-bottom:0.5px solid var(--border-hi);transition:border-color 0.2s}
.contact-info dd a:hover{border-color:var(--fg)}

.form{display:flex;flex-direction:column;gap:20px}
.form__field{display:flex;flex-direction:column;gap:6px}
.form__label{font-size:11px;color:var(--fg-dim);letter-spacing:0.25em;text-transform:uppercase}
.form__input,.form__textarea{background:transparent;border:0;border-bottom:0.5px solid var(--border-hi);
    padding:10px 0;font-size:14px;color:var(--fg);font-family:var(--font-mono);transition:border-color 0.2s}
.form__input:focus,.form__textarea:focus{outline:none;border-color:var(--fg)}
.form__textarea{resize:vertical;min-height:120px}
.form__hp{position:absolute;left:-9999px}
.form__status{font-size:12px;padding:12px;border:0.5px solid var(--border);letter-spacing:0.05em}
.form__status--ok{border-color:var(--fg);color:var(--fg)}
.form__status--err{border-color:var(--glitch-r);color:var(--glitch-r)}


/* 15. Full console (contact page) ============================= */
.full-console{
    margin-top:clamp(40px,6vw,80px);
    border:0.5px solid var(--border);background:var(--bg-card);
    display:grid;grid-template-columns:1fr;
}
.full-console__head{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:20px 28px;border-bottom:0.5px solid var(--border);flex-wrap:wrap;gap:12px;
}
.full-console__title{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-0.015em}
.full-console__sub{font-size:10px;color:var(--fg-dim);letter-spacing:0.2em;text-transform:uppercase}

/* Visualizer area */
.full-console__viz-wrap{
    position:relative;background:var(--bg);border-bottom:0.5px solid var(--border);
    aspect-ratio:16/7;overflow:hidden;
}
.full-console__viz{position:absolute;inset:0;width:100%;height:100%}

/* Control strip */
.full-console__controls{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
}
.control-panel{padding:24px 28px}
.control-panel:first-child{border-right:0.5px solid var(--border)}
.control-panel__label{font-size:10px;color:var(--fg-dim);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:14px}
.control-panel__keys{display:flex;gap:8px;flex-wrap:wrap}

/* Channel faders */
.channels{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.channel-small{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 8px;border:0.5px solid var(--border)}
.channel-small__name{font-size:10px;color:var(--fg-muted);letter-spacing:0.15em;text-transform:uppercase}
.channel-small__key{font-size:9px;color:var(--fg-dim);letter-spacing:0.2em}
.channel-small__fader{
    appearance:none;-webkit-appearance:none;width:100%;height:4px;background:var(--border-hi);margin:4px 0;
}
.channel-small__fader::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:12px;background:var(--fg);border:0;cursor:none;border-radius:0}
.channel-small__fader::-moz-range-thumb{width:24px;height:12px;background:var(--fg);border:0;cursor:none;border-radius:0}
.channel-small__meter{width:100%;height:4px;background:var(--bg);border:0.5px solid var(--border);position:relative}
.channel-small__meter-fill{position:absolute;top:0;left:0;bottom:0;width:0%;background:var(--fg);transition:width 0.05s}

/* Parameter knobs (sliders presented as horizontal) */
.params{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.param{display:flex;flex-direction:column;gap:6px}
.param__label{font-size:10px;color:var(--fg-muted);letter-spacing:0.15em;text-transform:uppercase;display:flex;justify-content:space-between}
.param__label span{color:var(--fg);font-family:var(--font-mono)}
.param__slider{appearance:none;-webkit-appearance:none;width:100%;height:2px;background:var(--border-hi)}
.param__slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--fg);border:0;cursor:none;border-radius:50%}
.param__slider::-moz-range-thumb{width:14px;height:14px;background:var(--fg);border:0;cursor:none;border-radius:50%}

/* Instructions strip */
.full-console__footer{
    padding:18px 28px;border-top:0.5px solid var(--border);
    display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
    font-size:10px;color:var(--fg-muted);letter-spacing:0.1em;
}
.full-console__footer strong{color:var(--fg);font-weight:500}
.full-console__footer kbd{font-size:0.95em}


/* 16. Footer ================================================== */
.footer{padding:clamp(60px,6vw,100px) var(--pad-x) calc(var(--pad-x) + 40px);border-top:0.5px solid var(--border);position:relative;z-index:1}
.footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-bottom:60px}
.footer__col{display:flex;flex-direction:column;gap:10px}
.footer__col--wordmark{justify-content:flex-end;align-items:flex-end;overflow:hidden}
.footer__label{font-size:10px;color:var(--fg-dim);letter-spacing:0.25em;text-transform:uppercase;margin-bottom:6px}
.footer__link{font-size:13px;color:var(--fg);transition:color 0.2s}
.footer__link:hover{color:var(--fg-muted)}
.footer__meta{font-size:11px;color:var(--fg-muted);letter-spacing:0.05em}
.footer__base{display:flex;justify-content:space-between;font-size:10px;color:var(--fg-dim);letter-spacing:0.15em;padding-top:24px;border-top:0.5px solid var(--border);gap:20px;flex-wrap:wrap}


/* 17. Boot overlay ============================================ */
.boot{position:fixed;inset:0;z-index:200;background:var(--bg);
    display:flex;align-items:center;justify-content:center;padding:var(--pad-x);
    opacity:1;transition:opacity 0.5s ease}
.boot.is-done{opacity:0;pointer-events:none}
.boot__inner{font-family:var(--font-mono);font-size:13px;color:var(--fg);letter-spacing:0.08em;line-height:2.1;max-width:520px}
.boot__line{opacity:0;transform:translateY(4px);transition:opacity 0.2s,transform 0.2s}
.boot__line.is-in{opacity:1;transform:none}
.boot__prompt{color:var(--fg-dim);margin-right:6px}
.boot__ok{color:var(--fg-dim);margin-right:10px}
.boot__caret{display:inline-block;width:8px;height:15px;background:var(--fg);margin-left:4px;vertical-align:-3px;animation:blink 0.8s steps(1) infinite}
.boot__skip{margin-top:20px;font-size:10px;color:var(--fg-dim);letter-spacing:0.2em;opacity:0}
.boot__skip.is-in{opacity:1}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}


/* 18. Animations ============================================== */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.25}}
.reveal{opacity:0;transform:translateY(16px);transition:opacity 0.8s ease,transform 0.8s ease}
.reveal.is-in{opacity:1;transform:none}


/* 19. Responsive ============================================== */
@media(max-width:900px){
    :root{--nav-h:56px}
    .nav__links{position:fixed;top:var(--nav-h);left:0;right:0;flex-direction:column;gap:0;
        background:var(--bg);border-bottom:0.5px solid var(--border);transform:translateY(-120%);transition:transform 0.3s}
    .nav__links.is-open{transform:translateY(0)}
    .nav__links a{padding:18px var(--pad-x);border-bottom:0.5px solid var(--border);font-size:13px}
    .nav__links a.is-active::after{display:none}
    .nav__menu-toggle{display:flex}
    .meta--tl,.meta--tr{display:none}

    .signal-lab{gap:18px;bottom:20px}
    .signal-lab__hint{display:none}
    .hero__cta-full{position:static;transform:none;max-width:none;width:auto;margin:32px auto 0;display:inline-flex;flex-direction:row}
    .hero{padding-bottom:220px}

    .intro__grid{grid-template-columns:1fr;gap:24px}
    .process{grid-template-columns:repeat(2,1fr)}
    .process__step:nth-child(2){border-right:none}
    .process__step{border-bottom:0.5px solid var(--border)}
    .services{grid-template-columns:1fr}
    .service-detail__head{grid-template-columns:1fr;gap:8px}
    .service-detail__list{grid-template-columns:1fr}
    .work-grid{grid-template-columns:repeat(2,1fr)}
    .bio{grid-template-columns:1fr;gap:20px}
    .contact-grid{grid-template-columns:1fr;gap:40px}
    .full-console__controls{grid-template-columns:1fr}
    .control-panel:first-child{border-right:none;border-bottom:0.5px solid var(--border)}
    .channels{grid-template-columns:repeat(4,1fr);gap:6px}
    .footer__grid{grid-template-columns:repeat(2,1fr);gap:28px}
    .footer__base{flex-direction:column;gap:6px}
}
@media(max-width:500px){
    .work-grid{grid-template-columns:1fr}
    .footer__grid{grid-template-columns:1fr}
    h1{font-size:clamp(44px,16vw,110px)}
    .signal-lab__keys{gap:4px}
    .key{min-width:46px;padding:6px 6px}
    .key span{font-size:11px}
    .key em{font-size:8px}
    .params{grid-template-columns:1fr}
}

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


/* ==============================================================
   v3 additions & patches — do not reorder above
   ============================================================== */

/* --- Smooth scroll already set in html{} — ensure no abrupt jumps --- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}
/* Extra-soft momentum for anchor scrolls */
.smooth-anchor-pad { padding-top: calc(var(--nav-h) + 40px); margin-top: calc(-1 * var(--nav-h) - 40px); }


/* --- Hero 'e' done-state — stay invisible after first reveal ---- */
.hero__e.is-gone {
    opacity: 0;
    width: 0;
    transform: none;
    filter: none;
    transition: opacity 0.5s ease, width 0.5s ease;
}


/* --- Hero CTA sub-text ---------------------------------------- */
.hero__cta-full {
    text-align: right;
    line-height: 1.5;
}
.hero__cta-sub {
    display: block;
    font-size: 9px;
    color: var(--fg-dim);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 4px;
    font-weight: 400;
}
.hero__cta-full:hover .hero__cta-sub { color: var(--fg-muted); }


/* --- Hero hint text supports <br> + muted sub ----------------- */
.signal-lab__hint { line-height: 1.8; }


/* --- Key variants: techno, wild, mute -------------------------- */
.key--techno {
    border-color: var(--fg-muted);
}
.key--techno span { color: var(--fg); }

.key--techno.key--active {
    background: var(--fg);
    border-color: var(--fg);
}
.key--techno.key--active span { color: var(--bg); }

/* The "glitch surprise" key — subtly teased even when inactive */
.key--wild {
    position: relative;
}
.key--wild::before, .key--wild::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 0.5px solid;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.15s;
}
.key--wild::before { border-color: var(--glitch-r); transform: translate(-1px, 0); }
.key--wild::after  { border-color: var(--glitch-c); transform: translate(1px, 0); }
.key--wild:hover::before, .key--wild:hover::after,
.key--wild.key--active::before, .key--wild.key--active::after { opacity: 0.8; }
.key--wild em { color: var(--glitch-r) !important; }

/* Read-only mute key pill for the legend */
.key--mute {
    background: var(--bg);
    border-color: var(--border-hi);
    opacity: 0.7;
}

/* Master muted state — subtle visual dampening on body */
body.is-muted .hero__viz,
body.is-muted .full-console__viz {
    filter: brightness(0.7) contrast(1.1);
    transition: filter 0.3s;
}


/* --- Work grid with real images ------------------------------- */
.work-item--has-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Readability scrim so captions sit legibly over the photo */
    position: relative;
}
.work-item--has-img::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(
        to top,
        rgba(10, 10, 10, 0.95) 0%,
        rgba(10, 10, 10, 0.6) 45%,
        rgba(10, 10, 10, 0.2) 80%,
        rgba(10, 10, 10, 0.4) 100%
    );
    transition: opacity 0.3s;
    z-index: 1;
}
.work-item--has-img:hover::before { opacity: 0.7; }
.work-item--has-img .work-item__meta { z-index: 2; position: relative; }
/* Hide the <img> element that exists only for alt-text/SEO — background-image handles visual */
.work-item__img {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Slight zoom on hover for photo tiles */
.work-item--has-img {
    overflow: hidden;
    transition: transform 0.4s ease;
}
.work-item--has-img:hover {
    background-size: 110%;
    transition: background-size 0.8s ease;
}


/* --- Full console — techno row layout & extra keys ------------ */
.control-panel__keys { flex-wrap: wrap; }

/* Allow the 9-button pattern row to wrap nicely */
#consoleLab .control-panel__keys { gap: 6px; }

/* Console pro tip block */
.console-tip {
    margin-top: 20px;
    padding: 14px 16px;
    border: 0.5px dashed var(--border-hi);
    font-size: 11px;
    line-height: 1.7;
    color: var(--fg-muted);
    background: rgba(245, 245, 240, 0.02);
}
.console-tip strong {
    color: var(--fg);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 10px;
}
.console-tip kbd { margin: 0 2px; }


/* --- Make console viz fill available height better ------------ */
.full-console__viz-wrap {
    aspect-ratio: 16 / 6;
    min-height: 260px;
}


/* --- Small-screen fixes for new key rows ---------------------- */
@media (max-width: 700px) {
    #consoleLab .control-panel__keys {
        grid-template-columns: repeat(5, 1fr);
        display: grid;
        gap: 5px;
    }
    #consoleLab .control-panel__keys .key { min-width: 0; padding: 6px 4px; }
    .full-console__viz-wrap { aspect-ratio: 4 / 3; }
}


/* --- Audio toggle 'live' state --------------------------------- */
.btn.is-active {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
}
.btn.is-active:hover { background: var(--fg); color: var(--bg); }


/* --- Small refinement to mobile hero CTA stacking -------------- */
@media (max-width: 900px) {
    .hero__cta-full {
        margin-top: 28px;
        text-align: center;
        flex-direction: column !important;
    }
    .hero__cta-sub { display: block; margin-top: 4px; }
}


/* ==============================================================
   v3.1 — contact chips (copy-to-clipboard UI)
   ============================================================== */

.contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 0.5px solid var(--border-hi);
    background: var(--bg-card);
    font-family: var(--font-mono);
    position: relative;
    transition: border-color 0.2s;
}
.contact-chip:hover { border-color: var(--fg-muted); }

.contact-chip__action {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--fg);
    letter-spacing: 0.02em;
    text-decoration: none;
    border-bottom: 0 !important;   /* override contact-info dd a underline */
    transition: color 0.2s;
}
.contact-chip__action:hover { color: var(--fg); }

/* Divider */
.contact-chip__action::after {
    content: "";
    position: absolute;
    right: 52px;     /* aligns with copy button left edge */
    top: 20%;
    bottom: 20%;
    width: 0.5px;
    background: var(--border-hi);
}

.contact-chip__copy {
    padding: 10px 14px;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-muted);
    cursor: none;
    transition: color 0.2s, background 0.2s;
    min-width: 52px;
    text-align: center;
}
.contact-chip__copy:hover {
    color: var(--fg);
    background: rgba(245, 245, 240, 0.04);
}
.contact-chip__copy:active { transform: scale(0.96); }

/* Copied state */
.contact-chip.is-copied .contact-chip__copy {
    color: var(--bg);
    background: var(--fg);
}
.contact-chip.is-copied .contact-chip__copy-label::before {
    content: "✓ ";
    margin-right: 2px;
}

/* Subtle "copied!" toast above the chip */
.contact-chip::before {
    content: "copied to clipboard";
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 5px 10px;
    background: var(--fg);
    color: var(--bg);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.contact-chip.is-copied::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Remove the border-bottom from the chip's <a> that contact-info dd a normally adds */
.contact-info dd .contact-chip__action { border-bottom: none; }

/* Responsive — stack neatly on small screens */
@media (max-width: 500px) {
    .contact-chip { width: 100%; max-width: 340px; }
    .contact-chip__action { flex: 1; font-size: 13px; padding: 12px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .contact-chip__action::after { right: 48px; }
}


/* ==============================================================
   v4 additions
   ============================================================== */

/* Prominent CTA band under the hero — points to the full console */
.cta-band {
    padding: clamp(60px, 7vw, 110px) var(--pad-x);
    border-top: 0.5px solid var(--border);
    border-bottom: 0.5px solid var(--border);
    background: var(--bg-soft);
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    /* subtle grid/noise texture in the background for vibe */
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0 59px,
        rgba(245, 245, 240, 0.025) 59px 60px
    );
    pointer-events: none;
}
.cta-band__inner {
    position: relative;
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1.6fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
.cta-band__text { display: flex; flex-direction: column; gap: 18px; }
.cta-band__eyebrow {
    font-size: 11px; color: var(--fg-dim);
    letter-spacing: 0.25em; text-transform: uppercase;
}
.cta-band__title {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(32px, 4.5vw, 56px);
    letter-spacing: -0.025em; line-height: 1.05;
    color: var(--fg); max-width: 18ch;
}
.cta-band__sub {
    font-size: clamp(13px, 1.2vw, 15px); color: var(--fg-muted);
    line-height: 1.7; max-width: 48ch;
}
.cta-band__action {
    display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
.cta-band__btn {
    padding: 18px 32px !important;
    font-size: 12px !important;
}
.cta-band__hint {
    font-size: 11px; color: var(--fg-muted);
    letter-spacing: 0.05em; line-height: 2;
}
@media (max-width: 800px) {
    .cta-band__inner { grid-template-columns: 1fr; gap: 32px; }
    .cta-band__action { align-items: stretch; }
    .cta-band__btn { text-align: center; justify-content: center; }
}

/* Hero — remove old floating CTA card rule impact if still referenced */
.hero__cta-full { display: none !important; }

/* Flash key — slight pulse so users notice it exists */
.key[data-action="flash"] {
    animation: pulseBorder 3s ease-in-out infinite;
}
@keyframes pulseBorder {
    0%, 100% { border-color: var(--border-hi); }
    50%      { border-color: var(--fg-muted); }
}

/* When user clicks flash, the key flashes white briefly via key--flash already.
   Extra: little "zap" scale on click. */
.key[data-action="flash"]:active { transform: scale(0.95); }


/* ==============================================================
   v5 — clean hero + bulletproof visuals
   ============================================================== */

/* --- Hero: edge-to-edge viz, no border, soft vignette ---------- */
.hero {
    position: relative;
    overflow: hidden;
    /* Make sure the canvas extends behind everything */
}
.hero__viz {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    z-index: 0;
    pointer-events: none;
}
/* Vignette: radial gradient fades the edges + corners to background */
.hero__vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center,
            transparent 0%,
            transparent 35%,
            rgba(10, 10, 10, 0.5) 75%,
            rgba(10, 10, 10, 0.95) 100%),
        linear-gradient(to bottom,
            rgba(10, 10, 10, 0.85) 0%,
            rgba(10, 10, 10, 0) 18%,
            rgba(10, 10, 10, 0) 60%,
            rgba(10, 10, 10, 0.85) 95%,
            rgba(10, 10, 10, 1) 100%);
}
.hero__content { z-index: 2; }
.signal-lab { z-index: 3; }


/* --- Primary button (start/stop signal) ----------------------- */
.btn--primary {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
    padding: 16px 28px !important;
    font-size: 12px !important;
    font-weight: 500;
}
.btn--primary:hover {
    background: transparent;
    color: var(--fg);
    border-color: var(--fg);
}
.btn--primary .btn__dot { background: var(--bg); }
.btn--primary:hover .btn__dot { background: var(--fg); }
.btn--primary.is-active {
    background: transparent;
    color: var(--fg);
    border-color: var(--fg);
}
.btn--primary.is-active .btn__dot {
    background: var(--fg);
    animation: pulse 1.2s ease-in-out infinite;
}
.btn--primary.is-active:hover {
    background: var(--fg);
    color: var(--bg);
}


/* --- Signal lab — bottom-pinned, no border, soft glass --------- */
.signal-lab {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px var(--pad-x) 24px;
    background: linear-gradient(to top,
        rgba(10, 10, 10, 0.85) 0%,
        rgba(10, 10, 10, 0.6) 60%,
        rgba(10, 10, 10, 0) 100%);
    z-index: 3;
    pointer-events: auto;
}
.signal-lab__row {
    display: flex;
    gap: clamp(12px, 2.5vw, 28px);
    align-items: flex-end;
    flex-wrap: wrap;
}
.signal-lab__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.signal-lab__group--mute { margin-left: auto; }
.signal-lab__label {
    font-size: 9px;
    color: var(--fg-dim);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.signal-lab__keys { display: flex; gap: 5px; }
.signal-lab__hint {
    margin-top: 12px;
    font-size: 10px;
    color: var(--fg-dim);
    letter-spacing: 0.05em;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.signal-lab__hint a {
    color: var(--fg);
    border-bottom: 0.5px solid var(--border-hi);
    transition: border-color 0.2s;
}
.signal-lab__hint a:hover { border-color: var(--fg); }


/* --- Mute key (clickable, distinct visual) -------------------- */
.key--mute-action {
    border-color: var(--border-hi);
    background: rgba(255, 60, 60, 0.06);
    transition: all 0.2s;
}
.key--mute-action:hover {
    border-color: var(--glitch-r);
    background: rgba(255, 60, 60, 0.12);
}
.key--mute-action span { color: var(--glitch-r); }
.key--mute-action em { color: var(--fg-muted); }
.key--mute-action.key--active {
    background: var(--glitch-r);
    border-color: var(--glitch-r);
}
.key--mute-action.key--active span { color: var(--bg); }
.key--mute-action.key--active em { color: var(--bg); opacity: 0.6; }


/* --- Body state when engine is on (subtle glow on toggle) ------ */
body.engine-on .btn--primary .btn__dot {
    box-shadow: 0 0 8px var(--fg);
}


/* --- Nav home icon -------------------------------------------- */
.nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s;
}
.nav__brand:hover { opacity: 0.7; }
.nav__home-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border: 0.5px solid var(--border-hi);
    font-size: 11px;
    color: var(--fg-muted);
    transition: all 0.2s;
    line-height: 1;
}
.nav__brand:hover .nav__home-icon {
    border-color: var(--fg);
    color: var(--fg);
}


/* --- Console viz: edge-to-edge inside the panel + vignette ----- */
.full-console__viz-wrap {
    position: relative;
    overflow: hidden;
}
.full-console__viz {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}
.full-console__vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center,
            transparent 0%,
            transparent 50%,
            rgba(10, 10, 10, 0.6) 90%,
            rgba(10, 10, 10, 0.9) 100%);
}


/* --- Override prior conflicting rules ------------------------- */
.hero__cta-full { display: none !important; }


/* --- Hero responsive padding so lab doesn't crash content ----- */
.hero {
    padding-bottom: 220px;     /* room for the lab */
}
@media (max-width: 700px) {
    .hero { padding-bottom: 280px; }
    .signal-lab__row { gap: 14px; }
    .signal-lab__group--mute { margin-left: 0; width: 100%; }
    .signal-lab__hint { font-size: 9px; }
}
@media (max-width: 500px) {
    .signal-lab__keys .key { min-width: 42px; padding: 6px 4px; }
    .signal-lab__keys .key span { font-size: 11px; }
    .signal-lab__keys .key em { font-size: 8px; }
}