:root {
  --paper: #f7f4ec;
  --paper2: #e9edf2;
  --ink: #07111f;
  --soft: #52606f;
  --clay: #ff5b35;
  --glow: #df6b2f;
  --pine: #1457ff;
  --rule: rgba(7, 17, 31, .18);
  --signal: #3b82ff;
}

body { background: var(--paper); }
.grain { opacity: .025; mix-blend-mode: multiply; }
.progress { height: 4px; background: linear-gradient(90deg, var(--signal), var(--glow)); }
.boot { background: var(--ink); }
.boot-mark i, .nav-mid i, .pointer-hint i { color: var(--glow); background: var(--glow); }
.boot-line::after { background: linear-gradient(90deg, var(--signal), var(--glow)); }

.nav {
  height: 78px;
  padding-inline: 4vw;
  color: white;
  background: rgba(7, 17, 31, .72);
  border-color: rgba(255,255,255,.14);
  mix-blend-mode: normal;
  backdrop-filter: blur(16px) saturate(140%);
}
.logo { font-family: var(--serif); font-size: 18px; letter-spacing: -.02em; }
.logo b { color: var(--glow); }
.nav-cta { background: var(--glow); border-color: var(--glow); color: var(--ink); font-weight: 700; }

.hero { background: var(--ink); min-height: 760px; }
.hero::before {
  content: "LOCAL / SIGNAL / 33.7490° N";
  position: absolute;
  z-index: 2;
  right: 4vw;
  top: 96px;
  color: rgba(255,255,255,.42);
  font: 10px/1.4 var(--mono);
  letter-spacing: .14em;
}
.hero-shade {
  background:
    radial-gradient(circle at 72% 44%, rgba(20,87,255,.2), transparent 30%),
    linear-gradient(90deg, rgba(7,17,31,.97), rgba(7,17,31,.66) 52%, rgba(7,17,31,.08) 84%),
    linear-gradient(0deg, rgba(7,17,31,.75), transparent 42%);
}
.hero-copy { left: 4.5vw; top: 17vh; max-width: 1180px; }
body:not(.archive) .hero-copy { left: 50%; top: 16vh; width: min(1240px, 92vw); max-width: none; transform: translateX(-50%); text-align: center; }
body:not(.archive) .hero-copy h1 { max-width: none; margin: 5vh auto 0; font-size: clamp(52px, 6.8vw, 108px); line-height: .94; white-space: nowrap; }
body:not(.archive) .hero-sub { margin: 4vh auto 0; max-width: 760px; }
body:not(.archive) .hero-actions { margin: 28px auto 0; justify-content: center; }
.eyebrow b { color: var(--glow); }
h1, body.archive h1 { max-width: 11ch; color: #fff; font-size: clamp(56px, 7.2vw, 116px); line-height: .9; }
h1 em { color: var(--glow); text-shadow: 0 0 38px rgba(223,107,47,.18); }
.hero-sub { color: #c4cfdb; margin-left: 42%; max-width: 540px; }
.hero-sub strong { color: white; }
.hero-actions { margin-left: 42%; }
.btn { border-radius: 999px; box-shadow: none; }
.btn:hover { box-shadow: 0 0 0 5px rgba(223,107,47,.18), 0 14px 30px rgba(7,17,31,.16); }
.btn-clay { background: var(--glow); border-color: var(--glow); color: var(--ink); }
.text-link { border: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
.field-note { border: 1px solid rgba(255,255,255,.18); padding: 16px; border-radius: 18px; background: rgba(7,17,31,.58); backdrop-filter: blur(12px); }
/* The business-type Signal Lab now owns these controls. Keep the hero clean and collision-free. */
body:not(.archive) .field-note { display:none; }
.mode { border-color: rgba(255,255,255,.14); border-radius: 10px; }
.mode:hover, .mode.active { background: rgba(223,107,47,.13); }
.mode.active b, .mode.active i { color: var(--glow); }
.hero-stats div { border-color: rgba(255,255,255,.25); }
.hero-stats span { color: #91a0af; }
.hero-stats b { color: white; font-weight: 600; }

.ticker { background: var(--glow); color: var(--ink); border: 0; }
.ticker span { font-weight: 700; }
.ticker b { color: var(--signal); }

.signal-lab { display:grid; grid-template-columns:.82fr 1.18fr; gap:7vw; padding:120px 4.8vw; background:var(--paper); align-items:center; }
.signal-lab-copy { max-width:560px; }
.signal-kicker { color:var(--signal); font:700 11px/1.4 var(--mono); letter-spacing:.1em; }
.signal-lab h2 { margin:24px 0; font:700 clamp(48px,5.7vw,88px)/.94 var(--serif); letter-spacing:-.04em; }
.signal-lab h2 em { color:var(--signal); font-style:normal; }
.signal-lab-copy>p { color:var(--soft); font-size:19px; line-height:1.65; max-width:48ch; }
.business-picker { display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; }
.business-choice { min-height:46px; padding:11px 16px; border:1px solid var(--rule); border-radius:999px; background:white; cursor:pointer; font:700 12px/1.2 var(--sans); transition:.25s var(--ease); }
.business-choice:hover { transform:translateY(-2px); border-color:var(--signal); }
.business-choice.active { color:white; background:var(--ink); border-color:var(--ink); box-shadow:inset 0 -3px 0 var(--glow); }
.signal-console { min-height:650px; padding:24px; border-radius:30px; position:relative; overflow:hidden; color:white; background:var(--ink); box-shadow:22px 24px 0 var(--glow); isolation:isolate; }
.signal-console::before { content:""; position:absolute; inset:0; z-index:-2; opacity:.55; background-image:linear-gradient(rgba(115,163,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(115,163,255,.11) 1px,transparent 1px); background-size:48px 48px; }
.signal-console::after { content:""; position:absolute; z-index:-1; width:420px; height:420px; border-radius:50%; right:-170px; top:-170px; background:radial-gradient(circle,rgba(59,130,255,.38),transparent 68%); }
.console-top { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:18px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.16); font:700 10px/1.3 var(--mono); letter-spacing:.1em; }
.console-top b { color:var(--glow); }
.console-top i { color:var(--ink); background:var(--glow); border-radius:999px; padding:6px 8px; font-style:normal; }
.console-orbit { height:190px; position:relative; margin:28px 0 12px; }
.console-orbit::before,.console-orbit::after,.console-orbit span { content:""; position:absolute; left:50%; top:50%; border:1px solid rgba(115,163,255,.28); border-radius:50%; transform:translate(-50%,-50%); }
.console-orbit::before { width:320px; height:140px; }
.console-orbit::after { width:220px; height:92px; transform:translate(-50%,-50%) rotate(32deg); }
.console-orbit span:nth-child(1) { width:130px; height:130px; border-color:rgba(223,107,47,.5); }
.console-orbit span:nth-child(2) { width:9px; height:9px; left:28%; top:44%; background:white; box-shadow:0 0 18px white; }
.console-orbit span:nth-child(3) { width:12px; height:12px; left:72%; top:58%; background:var(--glow); border-color:var(--glow); box-shadow:0 0 24px var(--glow); }
.console-orbit b { position:absolute; left:50%; top:50%; width:28px; height:28px; border-radius:50%; transform:translate(-50%,-50%); background:var(--signal); box-shadow:0 0 0 10px rgba(59,130,255,.15),0 0 42px var(--signal); }
.console-copy small { color:#8dadff; font:700 10px/1.4 var(--mono); letter-spacing:.1em; }
.console-copy h3 { max-width:16ch; margin:10px 0; font:700 clamp(30px,3.2vw,48px)/1.04 var(--serif); letter-spacing:-.03em; }
.console-copy p { color:#b9c6d4; max-width:58ch; line-height:1.55; }
.signal-metrics { margin-top:28px; border-top:1px solid rgba(255,255,255,.16); }
.signal-metric { display:grid; grid-template-columns:130px 1fr 32px; gap:16px; align-items:center; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.12); font:700 10px/1.2 var(--mono); letter-spacing:.07em; }
.signal-metric>div { height:5px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.12); }
.signal-metric i { display:block; width:var(--level); height:100%; background:linear-gradient(90deg,var(--signal),var(--glow)); transition:width .7s var(--ease); }
.signal-metric>b { color:var(--glow); text-align:right; }
.signal-plays { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-top:22px; font:700 10px/1.3 var(--mono); letter-spacing:.07em; }
.signal-plays>span { color:#8293a6; }
.signal-plays>div { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.signal-plays b { padding:8px 10px; border:1px solid rgba(255,255,255,.18); border-radius:999px; color:white; font-weight:500; }

.section { padding-block: 130px; }
.section-head { border-color: var(--rule); }
.section-head > span, .service-no, .coach-copy > span { color: var(--signal); font-weight: 700; }
.section-head h2 em, .coach-copy h2 em, .app-copy h2 em { color: var(--signal); }
.service-deck { gap: 14px; border: 0; }
.service, .service + .service {
  min-height: 440px;
  padding: 25px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: rgba(255,255,255,.64);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.service:hover { transform: translateY(-9px); border-color: var(--signal); box-shadow: 0 22px 55px rgba(7,17,31,.12); }
.service::after { background: radial-gradient(circle, var(--glow), transparent 65%); }
.service h3 { margin-top: 72px; }
.service-price { color: var(--signal); }

.section.dark { background: var(--ink); }
.sticky-copy h2 em { color: var(--glow); }
.proof { border-color: rgba(255,255,255,.18); border-radius: 12px; }
.proof:hover { background: rgba(59,130,255,.13); padding-inline: 18px; }
.proof span { color: var(--glow); }

.receipt { border-radius: 24px; box-shadow: 18px 20px 0 var(--signal); overflow: hidden; }
.receipt::before { display: none; }
.receipt-top b { color: var(--signal); }
.price-row span { color: var(--signal); }

.guide { background: var(--signal); }
.guide-rings { border-color: rgba(223,107,47,.55); }
.guide-rings::before, .guide-rings::after { border-color: rgba(223,107,47,.7); }
.guide-rings::after { background: var(--glow); box-shadow: 0 0 100px rgba(223,107,47,.5); }
.guide-label { color: white; }
.guide-copy > span, .guide-copy h2 em { color: var(--glow); }
.guide-copy p { color: #e5edff; }

.coach-portrait { border-radius: 28px; background: var(--ink); border: 0; box-shadow: 18px 18px 0 var(--glow); }
.coach-portrait::before { color: var(--glow); border-color: var(--glow); }
.coach-portrait::after { background: var(--signal); color: white; }
.finale { background: var(--glow); color: var(--ink); }
.finale::before { border-color: rgba(7,17,31,.25); }
.finale h2 em { color: var(--signal); }
.btn-light { background: var(--ink); color: white; border-color: var(--ink); }
.footer { background: var(--ink); }
.footer i { color: var(--glow); }

body.archive .hero-shade {
  background:
    radial-gradient(circle at 75% 45%, rgba(255,91,53,.15), transparent 27%),
    linear-gradient(90deg, rgba(7,17,31,.97), rgba(7,17,31,.65) 53%, rgba(7,17,31,.12) 85%);
}
body.archive h1 em { color: #73a3ff; }
.filters { gap: 12px; }
.filter { border-radius: 999px; border-color: var(--rule); background: white; }
.filter.active, .filter:hover { background: var(--ink); border-color: var(--ink); }
.project { border: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 35px rgba(7,17,31,.1); }
.project-media::after { content: "OPEN SIGNAL"; background: rgba(20,87,255,.86); }
.project-meta { background: white; }
.photo { border-radius: 20px; }
.photo span { border-radius: 999px; }
.soundboard { border-radius: 22px; overflow: hidden; border-color: rgba(255,255,255,.14); }
.wave { background: repeating-linear-gradient(90deg,var(--glow) 0 2px,transparent 2px 7px); }
.app-screen { border-radius: 22px; box-shadow: 16px 16px 0 var(--signal); }

@media (max-width: 900px) {
  .hero-copy { left: 6vw; top: 14vh; }
  body:not(.archive) .hero-copy { left: 50%; top: 14vh; transform: translateX(-50%); }
  body:not(.archive) .hero-copy h1 { font-size: clamp(46px, 7.8vw, 70px); }
  .hero-sub, body.archive .hero-sub, .hero-actions { margin-left: 0; }
  body:not(.archive) .hero-sub, body:not(.archive) .hero-actions { margin-left: auto; margin-right: auto; }
  .field-note { bottom: 4vh; left: auto; right: 4vw; width: 320px; display: block; }
  .service-deck { gap: 12px; }
  .signal-lab { grid-template-columns:1fr; gap:55px; padding:95px 6vw; }
  .signal-lab-copy { max-width:720px; }
  .signal-console { min-height:620px; }
}

@media (max-width: 620px) {
  .nav { height: 68px; }
  .hero { min-height: 820px; }
  .hero::before { display: none; }
  .hero-copy, body.archive .hero-copy { top: 11vh; }
  body:not(.archive) .hero-copy { left: 50%; top: 10vh; width: 92vw; }
  body:not(.archive) .hero-copy h1 { font-size: clamp(27px, 7.5vw, 34px); line-height: 1.05; letter-spacing: -.045em; white-space: nowrap; }
  .hero-sub { margin-top: 3vh; }
  body:not(.archive) .field-note { display: none; }
  body:not(.archive) .hero-stats { left: 5vw; right: 5vw; bottom: 3vh; justify-content: center; }
  .service, .service + .service { min-height: 300px; padding: 22px; }
  .receipt { box-shadow: 9px 10px 0 var(--signal); }
  .coach-portrait { box-shadow: 10px 10px 0 var(--glow); }
  .signal-lab { padding:75px 5vw; }
  .signal-lab h2 { font-size:clamp(42px,12vw,58px); }
  .signal-console { min-height:660px; padding:20px; border-radius:22px; box-shadow:10px 11px 0 var(--glow); }
  .console-top { grid-template-columns:1fr auto; }
  .console-top i { display:none; }
  .console-orbit { height:150px; }
  .console-orbit::before { width:250px; height:110px; }
  .signal-metric { grid-template-columns:100px 1fr 28px; gap:10px; }
  .signal-plays { display:block; }
  .signal-plays>div { justify-content:flex-start; margin-top:12px; }
}