/* ==========================================================================
   HOLIDAY LIGHTING CO. — "NOCTURNE"
   Art direction: the city after dark is the stage; light is the only actor.
   ========================================================================== */

:root {
  /* Palette — "Prairie Midnight" */
  --ink:        #06070B;   /* the night itself */
  --ink-2:      #0C0E15;   /* shadowed brick */
  --ink-3:      #141824;   /* lifted surface */
  --line:       rgba(233, 238, 245, 0.10);
  --line-2:     rgba(233, 238, 245, 0.22);
  --frost:      #E9EEF5;   /* primary type — cold winter air */
  --frost-dim:  rgba(233, 238, 245, 0.62);
  --frost-mute: rgba(233, 238, 245, 0.38);
  --sodium:     #FFB547;   /* warm-white filament, 2700K */
  --ember:      #FF6A2B;   /* incandescent core */
  --cyan:       #3FF2FF;   /* brand neon (logo) */
  --magenta:    #FF2E9A;   /* brand neon (logo) */
  --pine:       #2BD98A;   /* holiday green, used sparingly */

  /* Type */
  --f-display: "Instrument Serif", "Times New Roman", serif;
  --f-sans:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Motion — "filament" curves: slow warm-up, decisive hold */
  --e-filament: cubic-bezier(.19, 1, .22, 1);
  --e-switch:   cubic-bezier(.7, 0, .2, 1);

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--frost);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--sodium); color: var(--ink); }

/* Film grain + vignette: atmosphere layered over everything */
body::before {
  content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .07; mix-blend-mode: overlay;
  animation: grain 1.2s steps(6) infinite;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 99; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}
@keyframes grain {
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}
}

/* Review watermark (set in assets/js/main.js → LU_CONFIG) */
.watermark { position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .08; background-repeat: repeat; background-position: center; transition: opacity 2s ease; }
.watermark.off { opacity: 0; transition: none; }

/* The lamp — cursor light that reveals the page */
.lamp {
  position: fixed; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px;
  border-radius: 50%; pointer-events: none; z-index: 2;
  background: radial-gradient(circle, rgba(255,181,71,.10) 0%, rgba(255,181,71,.04) 30%, transparent 62%);
  mix-blend-mode: screen; transition: opacity .6s;
}
@media (hover: none) { .lamp { display: none; } }

/* ---------- Type system ---------- */
.eyebrow {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--frost-mute); display: inline-flex; align-items: center; gap: .8em;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sodium);
  box-shadow: 0 0 10px var(--sodium), 0 0 22px var(--ember);
}
.eyebrow.cyan::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan), 0 0 22px var(--cyan); }
.eyebrow.mag::before  { background: var(--magenta); box-shadow: 0 0 10px var(--magenta), 0 0 22px var(--magenta); }

.display {
  font-family: var(--f-display); font-weight: 400; letter-spacing: -.02em; line-height: .9;
  font-size: clamp(56px, 11vw, 196px); margin: 0;
}
.display em, .h2 em, .h3 em { font-style: italic; color: var(--sodium); text-shadow: 0 0 40px rgba(255,181,71,.45); }
.h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 6.4vw, 104px); line-height: .95; letter-spacing: -.02em; margin: 0; }
.h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.02; margin: 0; }
.wide { font-family: var(--f-sans); font-variation-settings: "wdth" 125; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--frost-dim); max-width: 34em; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--frost-mute); }
.kelvin { font-family: var(--f-mono); font-size: 11px; color: var(--sodium); letter-spacing: .14em; }

/* ---------- Chrome: header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter); mix-blend-mode: normal;
  transition: background .5s, backdrop-filter .5s, padding .5s var(--e-filament);
}
.hdr.scrolled { background: rgba(6,7,11,.72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px); padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; }
.brand-name { font-family: var(--f-mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; line-height: 1.3; }
.brand-name span { display: block; color: var(--frost-mute); }
.nav { display: flex; gap: clamp(18px, 2.6vw, 40px); align-items: center; }
.nav a {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--frost-dim);
  position: relative; padding: 6px 0; transition: color .3s;
}
.nav a::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--sodium); transform: translateX(-50%) scale(0); box-shadow: 0 0 8px var(--sodium);
  transition: transform .4s var(--e-filament);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--frost); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: translateX(-50%) scale(1); }
.nav .cta { color: var(--ink); background: var(--frost); padding: 10px 16px; border-radius: 100px; letter-spacing: .16em; }
.nav .cta::after { display: none; }
.nav .cta:hover { background: var(--sodium); color: var(--ink); box-shadow: 0 0 30px rgba(255,181,71,.5); }
.burger { display: none; background: none; border: 0; color: var(--frost); width: 44px; height: 44px; cursor: pointer; padding: 0; }
.burger span { display: block; width: 22px; height: 1px; background: currentColor; margin: 6px auto; transition: transform .4s var(--e-switch); }

@media (max-width: 860px) {
  .burger { display: block; position: relative; z-index: 60; }
  .nav {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 28px; background: var(--ink);
    clip-path: circle(0 at calc(100% - 40px) 40px); transition: clip-path .8s var(--e-switch); z-index: 55;
  }
  .nav a { font-family: var(--f-display); font-size: 44px; letter-spacing: 0; text-transform: none; }
  .nav .cta { font-family: var(--f-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
  body.menu-open .nav { clip-path: circle(150% at calc(100% - 40px) 40px); }
  body.menu-open .burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
  body.menu-open .burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
}

/* ---------- Layout primitives ---------- */
main { position: relative; z-index: 3; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; }
.pad { padding: clamp(96px, 14vw, 200px) 0; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Hero ---------- */
.hero { min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero canvas.scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, var(--ink) 4%, rgba(6,7,11,.6) 30%, transparent 60%),
    linear-gradient(100deg, rgba(6,7,11,.82) 0%, rgba(6,7,11,.45) 38%, transparent 62%);
}
.hero-inner { padding-bottom: clamp(40px, 7vw, 96px); padding-top: 140px; width: 100%; }
.hero .display { max-width: 11ch; }
.hero-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin-top: clamp(32px, 5vw, 72px);
  padding-top: 24px; border-top: 1px solid var(--line);
}
.hero-meta div { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--frost-mute); }
@media (max-width: 600px) {
  .hero-meta { grid-template-columns: 1fr 1fr; gap: 18px; }
  /* Phone: the city sits in the top of the screen, the headline on clean ink below it */
  .hero canvas.scene { height: 60%; bottom: auto; }
  .hero::after { background: linear-gradient(to top, var(--ink) 42%, rgba(6,7,11,.7) 52%, transparent 66%); }
  .hero-inner { padding-top: 58vh; }
}
.hero-meta b { display: block; color: var(--frost); font-weight: 400; margin-top: 6px; font-size: 13px; }

/* Split-line reveal for display type */
.split .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.split .ln > span { display: inline-block; transform: translateY(105%); }
/* A keyframe animation, not a transition, so the rise plays even when "on" is set at first paint */
.split.on .ln > span { transform: none; animation: rise 1.4s var(--e-filament) both; }
.split .ln:nth-child(2) > span { animation-delay: .09s; }
.split .ln:nth-child(3) > span { animation-delay: .18s; }
.split .ln:nth-child(4) > span { animation-delay: .27s; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }

/* Power-on reveal: things flicker into existence like a filament striking */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.on { animation: strike 1.3s var(--e-filament) forwards; }
@keyframes strike {
  0% { opacity: 0; transform: translateY(24px); }
  8% { opacity: .6; } 12% { opacity: .1; } 18% { opacity: .8; } 22% { opacity: .3; }
  100% { opacity: 1; transform: none; }
}

/* ---------- Page-head (interior pages) ---------- */
.pagehead { padding: clamp(160px, 22vw, 280px) 0 clamp(64px, 8vw, 120px); position: relative; overflow: hidden; }
.pagehead canvas.strand { position: absolute; left: 0; right: 0; top: 96px; width: 100%; height: 160px; }
.pagehead .display { font-size: clamp(56px, 10vw, 168px); }
/* Phone: shallower light strand with more room beneath it, so bulbs never sit on the heading */
@media (max-width: 600px) {
  .pagehead { padding-top: 200px; }
  .pagehead canvas.strand { top: 78px; height: 96px; }
}
.crumb { display: flex; gap: 14px; align-items: center; margin-bottom: 28px; }
.crumb .mono { color: var(--sodium); }

/* ---------- Manifesto (home) ---------- */
.manifesto p.big {
  font-family: var(--f-display); font-size: clamp(32px, 4.6vw, 72px); line-height: 1.08; letter-spacing: -.015em; margin: 0; max-width: 18ch;
}
.manifesto .word { color: var(--frost-mute); transition: color .6s, text-shadow .6s; }
.manifesto .word.lit { color: var(--frost); }
.manifesto .word.glow.lit { color: var(--sodium); text-shadow: 0 0 34px rgba(255,181,71,.55); font-style: italic; }
.manifesto-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gutter); align-items: start; }
@media (max-width: 860px) { .manifesto-grid { grid-template-columns: 1fr; } }

/* ---------- Two Acts (services teaser) ---------- */
.acts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.act {
  position: relative; min-height: 78vh; padding: clamp(32px, 4vw, 64px); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid var(--line); isolation: isolate;
}
.act:last-child { border-right: 0; }
.act canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .55; transition: opacity 1s var(--e-filament); }
.act:hover canvas { opacity: 1; }
.act .num { font-family: var(--f-display); font-style: italic; font-size: clamp(80px, 12vw, 200px); line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--line-2); }
.act .h2 { font-size: clamp(40px, 5vw, 80px); }
.act p { color: var(--frost-dim); max-width: 26em; }
.act .go { display: inline-flex; align-items: center; gap: 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.act .go i { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-style: normal; transition: all .5s var(--e-filament); }
.act:hover .go i { background: var(--sodium); color: var(--ink); border-color: var(--sodium); box-shadow: 0 0 30px rgba(255,181,71,.6); transform: rotate(-45deg); }
.act.cool:hover .go i { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 30px rgba(63,242,255,.6); }
@media (max-width: 860px) { .acts { grid-template-columns: 1fr; } .act { min-height: 70vh; border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------- Marquee (municipal scale statement) ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 28px 0; white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 48px; animation: marq 40s linear infinite; }
.marquee span { font-family: var(--f-display); font-size: clamp(40px, 6vw, 96px); line-height: 1; }
.marquee span.o { font-style: italic; color: transparent; -webkit-text-stroke: 1px var(--frost-mute); }
.marquee .dot { width: 14px; height: 14px; border-radius: 50%; align-self: center; background: var(--sodium); box-shadow: 0 0 18px var(--sodium); }
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- Feature: Riverbend (home) ---------- */
.feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--gutter); align-items: center; }
.frame {
  position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 2px; background: var(--ink-2);
  box-shadow: 0 60px 120px -40px rgba(255,106,43,.25);
}
.frame canvas { width: 100%; height: 100%; }
.frame .tag { position: absolute; left: 0; bottom: 0; right: 0; padding: 32px 16px 14px; background: linear-gradient(to top, rgba(6,7,11,.92), rgba(6,7,11,.6) 55%, transparent); display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; line-height: 1.5; font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--frost-dim); }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; } }
/* Home page acts: one per row, wide landscape frame, sides alternate */
.feature.act-row .frame { aspect-ratio: 4/3; display: block; transition: box-shadow .8s var(--e-filament); }
.feature.act-row .frame:hover { box-shadow: 0 60px 140px -30px rgba(255,106,43,.4); }
.feature.act-row.flip { grid-template-columns: 1fr 1.3fr; }
.feature.act-row.flip .frame:hover { box-shadow: 0 60px 140px -30px rgba(63,242,255,.35); }
@media (max-width: 860px) { .feature.act-row.flip { grid-template-columns: 1fr; } }

/* ---------- Numbers ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stat { padding: 40px 24px 40px 0; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { font-family: var(--f-display); font-weight: 400; font-size: clamp(48px, 6vw, 96px); line-height: 1; display: block; }
.stat b sup { font-size: .35em; color: var(--sodium); vertical-align: top; margin-left: 4px; }
.stat span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--frost-mute); }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-right: 0; } .stat { padding-left: 0; border-bottom: 1px solid var(--line); } }

/* ---------- CTA band ---------- */
.switch-cta { text-align: center; position: relative; overflow: hidden; }
.switch-cta .h2 { max-width: 14ch; margin: 0 auto; }
.btn {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 40px; padding: 18px 28px; border-radius: 100px;
  border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  transition: all .5s var(--e-filament); background: transparent; color: var(--frost); cursor: pointer;
}
.btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--frost-mute); transition: all .4s; }
.btn:hover { border-color: var(--sodium); box-shadow: 0 0 0 6px rgba(255,181,71,.08), 0 0 50px rgba(255,181,71,.25); }
.btn:hover::before { background: var(--sodium); box-shadow: 0 0 12px var(--sodium), 0 0 24px var(--ember); }
.btn.solid { background: var(--frost); color: var(--ink); border-color: var(--frost); }
.btn.solid:hover { background: var(--sodium); border-color: var(--sodium); }
.btn.solid::before { background: var(--ink); }

/* Toggle switch artifact */
.toggle {
  width: 84px; height: 140px; margin: 0 auto 48px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--ink-2);
  position: relative; cursor: pointer; box-shadow: inset 0 2px 12px rgba(0,0,0,.6);
}
.toggle::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 12px; height: 56px; border-radius: 8px; background: linear-gradient(#2a2f3c, #171a23);
  box-shadow: 0 6px 14px rgba(0,0,0,.6); transition: transform .35s var(--e-switch), background .3s;
}
.toggle.on::after { transform: translateY(58px); background: linear-gradient(#fff3dd, #ffcf86); box-shadow: 0 0 40px rgba(255,181,71,.7); }
.switch-cta.powered { background: radial-gradient(60% 70% at 50% 40%, rgba(255,181,71,.12), transparent 70%); }

/* ---------- Footer ---------- */
.ftr { border-top: 1px solid var(--line); padding: 72px 0 32px; position: relative; z-index: 3; }
.ftr-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.ftr h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--frost-mute); font-weight: 400; margin: 0 0 18px; }
.ftr a, .ftr p { display: block; color: var(--frost-dim); margin: 0 0 8px; font-size: 15px; transition: color .3s; }
.ftr a:hover { color: var(--sodium); }
.ftr .sign { font-family: var(--f-display); font-size: clamp(56px, 13vw, 220px); line-height: .85; letter-spacing: -.03em; margin-top: 72px; color: transparent; -webkit-text-stroke: 1px var(--line-2); user-select: none; white-space: nowrap; }
.ftr .sign em { color: var(--sodium); -webkit-text-stroke: 0; text-shadow: 0 0 60px rgba(255,181,71,.5); }
.ftr-base a { display: inline; margin: 0; font-size: inherit; color: var(--frost-dim); text-decoration: underline; text-underline-offset: 3px; }
.ftr-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .ftr-grid { grid-template-columns: 1fr 1fr; } .ftr-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- Services page ---------- */
.chapter { display: grid; grid-template-columns: 220px 1fr; gap: var(--gutter); padding: clamp(72px, 10vw, 140px) 0; border-top: 1px solid var(--line); }
.chapter aside { position: sticky; top: 110px; align-self: start; }
.chapter aside .num { font-family: var(--f-display); font-style: italic; font-size: 120px; line-height: .8; color: var(--sodium); text-shadow: 0 0 40px rgba(255,181,71,.4); }
.chapter.cool aside .num { color: var(--cyan); text-shadow: 0 0 40px rgba(63,242,255,.4); }
.chapter .h2 { max-width: 14ch; margin-bottom: 32px; }
.offer { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); margin-top: 56px; border: 1px solid var(--line); }
.offer div { background: var(--ink); padding: 32px 28px; transition: background .5s; }
.offer div:hover { background: var(--ink-2); }
.offer h3 { font-family: var(--f-display); font-weight: 400; font-size: 30px; margin: 14px 0 10px; }
.offer p { color: var(--frost-dim); margin: 0; font-size: 15px; }
.spec { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.spec span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line-2); color: var(--frost-dim); }
@media (max-width: 860px) { .chapter { grid-template-columns: 1fr; } .chapter aside { position: static; } .offer { grid-template-columns: 1fr; } }

/* Kelvin slider (interactive spec) */
.kelvin-lab { margin-top: 56px; border: 1px solid var(--line); padding: 28px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: center; }
.kelvin-lab .swatch { aspect-ratio: 16/10; border-radius: 2px; position: relative; overflow: hidden; background: #000; }
.kelvin-lab canvas { width: 100%; height: 100%; }
.kelvin-lab input[type=range] { width: 100%; accent-color: var(--sodium); margin: 18px 0 8px; }
.kelvin-lab .readout { font-family: var(--f-display); font-size: 64px; line-height: 1; }
.kelvin-lab .modes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.kelvin-lab .modes button { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: transparent; color: var(--frost-dim); border: 1px solid var(--line-2); padding: 8px 12px; border-radius: 100px; cursor: pointer; transition: all .3s; }
.kelvin-lab .modes button.active, .kelvin-lab .modes button:hover { color: var(--ink); background: var(--frost); border-color: var(--frost); }
@media (max-width: 860px) { .kelvin-lab { grid-template-columns: 1fr; } }

/* ---------- Residential ---------- */
.house-stage { position: relative; }
.house-stage .frame { aspect-ratio: 16/9; box-shadow: 0 60px 140px -50px rgba(255,106,43,.3); }
.house-stage .controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 18px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 100px; padding: 4px; }
.seg button { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; background: transparent; color: var(--frost-dim); border: 0; padding: 10px 18px; border-radius: 100px; cursor: pointer; transition: all .4s var(--e-filament); }
.seg button.active { background: var(--sodium); color: var(--ink); box-shadow: 0 0 24px rgba(255,181,71,.45); }
.seg button.active[data-mode="permanent"] { background: var(--cyan); box-shadow: 0 0 24px rgba(63,242,255,.45); }
.home-band { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--gutter); align-items: center; }
@media (max-width: 860px) { .home-band { grid-template-columns: 1fr; } .house-stage .frame { aspect-ratio: 4/3; } }
/* Phone: keep the house caption to the one line that changes with the toggle */
@media (max-width: 600px) { .house-stage .tag span:first-child { display: none; } }

/* ---------- Work page ---------- */
.reel { display: grid; gap: clamp(80px, 12vw, 180px); }
.case { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; }
.case .frame { grid-column: 1 / span 8; aspect-ratio: 16/10; }
.case .meta { grid-column: 9 / span 4; }
.case:nth-child(even) .frame { grid-column: 5 / span 8; order: 2; }
.case:nth-child(even) .meta { grid-column: 1 / span 4; order: 1; }
.case .h3 { margin: 16px 0 14px; }
.case p { color: var(--frost-dim); }
.case dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 24px 0 0; font-family: var(--f-mono); font-size: 12px; }
.case dt { color: var(--frost-mute); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; padding-top: 2px; }
.case dd { margin: 0; color: var(--frost); }
.case .frame { transform: translateY(var(--py, 0)); }
@media (max-width: 860px) { .case .frame, .case .meta, .case:nth-child(even) .frame, .case:nth-child(even) .meta { grid-column: 1 / -1; order: initial; } }
.note { font-family: var(--f-mono); font-size: 11px; color: var(--frost-mute); letter-spacing: .06em; border-left: 2px solid var(--sodium); padding-left: 12px; margin-top: 40px; }

/* ---------- Studio page ---------- */
.process { counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: 120px 1fr 1.2fr; gap: var(--gutter); padding: 44px 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: background .5s; position: relative; }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--f-mono); font-size: 12px; color: var(--sodium); letter-spacing: .2em; }
.step h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(32px, 3.6vw, 56px); margin: 0; line-height: 1; }
.step p { color: var(--frost-dim); margin: 0; }
.step::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: linear-gradient(90deg, var(--sodium), var(--ember)); box-shadow: 0 0 12px var(--sodium); transition: width 1.2s var(--e-filament); }
.step:hover::after { width: 100%; }
@media (max-width: 860px) { .step { grid-template-columns: 1fr; gap: 12px; } }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.values div { border-top: 1px solid var(--line-2); padding-top: 24px; }
.values h3 { font-family: var(--f-display); font-weight: 400; font-size: 34px; margin: 0 0 10px; }
.values p { color: var(--frost-dim); margin: 0; }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; } }

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 6vw, 120px); }
.contact-card { border: 1px solid var(--line); padding: 32px; }
.contact-card a.big { font-family: var(--f-display); font-size: clamp(36px, 4vw, 60px); line-height: 1; display: block; margin: 12px 0 28px; transition: color .3s, text-shadow .3s; }
.contact-card a.big:hover { color: var(--sodium); text-shadow: 0 0 30px rgba(255,181,71,.5); }
form.brief { display: grid; gap: 28px; }
.field { display: grid; gap: 10px; }
.field label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--frost-mute); }
.field input, .field textarea, .field select {
  background: transparent; border: 0; border-bottom: 1px solid var(--line-2); color: var(--frost); font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 34px); padding: 6px 0 12px; outline: none; border-radius: 0; transition: border-color .4s; width: 100%;
}
.field select { font-size: 24px; appearance: none; cursor: pointer; }
.field select option { background: var(--ink-2); font-family: var(--f-sans); font-size: 16px; }
.field textarea { resize: vertical; min-height: 120px; font-size: 24px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--sodium); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; border-radius: 100px; border: 1px solid var(--line-2); cursor: pointer; color: var(--frost-dim); transition: all .3s; }
.chips input:checked + label { color: var(--ink); background: var(--sodium); border-color: var(--sodium); box-shadow: 0 0 22px rgba(255,181,71,.45); }
.chips input:focus-visible + label { outline: 2px solid var(--cyan); outline-offset: 2px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 860px) { .contact-grid, .two { grid-template-columns: 1fr; } }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: -8px 0 0; font-size: 11px; }
.form-note a { color: var(--frost-dim); text-decoration: underline; text-underline-offset: 3px; }
.form-error { margin: 0; padding: 14px 16px; border: 1px solid var(--magenta); color: var(--frost); font-size: 12px; line-height: 1.6; }
.sent { display: none; border: 1px solid var(--sodium); padding: 32px; box-shadow: 0 0 60px rgba(255,181,71,.15); }
.sent.show { display: block; animation: strike 1.2s var(--e-filament) forwards; }

/* ---------- Direction (concept) page ---------- */
.dir-grid { display: grid; grid-template-columns: 260px 1fr; gap: var(--gutter); padding: 72px 0; border-top: 1px solid var(--line); }
.dir-grid h2 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--sodium); font-weight: 400; margin: 8px 0 0; position: sticky; top: 110px; }
.dir-grid .body p { color: var(--frost-dim); max-width: 44em; }
.dir-grid .body p strong { color: var(--frost); font-weight: 500; }
.dir-grid .body .h3 { margin-bottom: 20px; }
.palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 28px; }
.chip { border: 1px solid var(--line); }
.chip i { display: block; aspect-ratio: 1; }
.chip div { padding: 12px; font-family: var(--f-mono); font-size: 11px; line-height: 1.6; color: var(--frost-dim); }
.chip div b { color: var(--frost); font-weight: 500; display: block; }
.type-spec { display: grid; gap: 20px; margin-top: 28px; }
.type-spec div { border-top: 1px solid var(--line); padding-top: 16px; display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: baseline; }
@media (max-width: 860px) { .dir-grid, .type-spec div { grid-template-columns: 1fr; } .dir-grid h2 { position: static; } }

/* ---------- Accessibility ---------- */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--frost); color: var(--ink); padding: 10px 14px; }
.skip:focus { left: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal { opacity: 1; transform: none; }
  .split .ln > span { transform: none; }
}