/* ============================================================
   San Diego Specialty Lighting — "Blue Hour" design system
   Palette reads as light, not as color blocks.
   ============================================================ */

:root{
  --ink:      #0A1420;
  --ink-2:    #0F1E2C;
  --ink-3:    #17293A;
  --paper:    #F3F5F4;
  --steel:    #8195A6;
  --steel-dk: #56697A;

  --amber:    #FCB426;
  --cyan:     #54DCEA;
  --magenta:  #C874DE;

  /* live channel — driven by the hero channel strip */
  --beam-a: var(--amber);
  --beam-b: var(--cyan);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(17px,1.05vw,19px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

a{ color:inherit; }

::selection{ background:var(--amber); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- type ---------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-0.028em;
  line-height:1.02;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(2.5rem,5.4vw,4.35rem); font-weight:800; }
h2{ font-size:clamp(2rem,3.9vw,3.2rem); }
h3{ font-size:clamp(1.22rem,1.75vw,1.5rem); letter-spacing:-0.018em; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:clamp(1.14rem,1.65vw,1.38rem);
  line-height:1.55;
  color:#DDE4EA;
  max-width:60ch;
}

/* mono callout labels — these read like fixture-schedule callouts */
.tag{
  font-family:var(--mono);
  font-size:.685rem;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--steel);
  display:flex;
  align-items:center;
  gap:.7em;
  margin:0 0 1.5rem;
}
.tag::before{
  content:"";
  width:26px; height:1px; flex:none;
  background:linear-gradient(90deg,var(--beam-a),transparent);
}
.tag.center{ justify-content:center; }

.mono{ font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; }

/* ---------- layout ---------- */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

section{ position:relative; }
section[id]{ scroll-margin-top:96px; }

.band{ padding-block:clamp(64px,9vw,124px); }
.band--tight{ padding-block:clamp(48px,6vw,80px); }

.band--paper{
  background:var(--paper);
  color:#132030;
}
.band--paper .lede{ color:#3C4C5C; }
.band--paper .tag{ color:var(--steel-dk); }
.band--paper .rule{ background:linear-gradient(90deg,#C9D2D8,transparent); }

.rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,var(--beam-a),var(--beam-b) 32%,transparent 78%);
  opacity:.5;
}

.grid{ display:grid; gap:clamp(28px,4vw,56px); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.split{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; }

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

/* ---------- nav ---------- */

.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(10,20,32,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(129,149,166,.16);
}
.topbar__in{
  display:flex; align-items:center; gap:clamp(18px,3vw,40px);
  min-height:74px;
}
.brand{ display:flex; align-items:center; flex:none; text-decoration:none; }
.brand img{ height:34px; width:auto; }
.brand__name{
  margin-left:14px;
  font-family:var(--display);
  font-weight:600;
  font-size:.63rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.55;
  color:var(--paper);
}
@media (max-width:1199px){ .brand__name{ display:none } }

.nav{
  margin-left:auto;
  display:flex; align-items:center; gap:clamp(12px,1.8vw,24px);
  flex-wrap:wrap;
}
.nav a{
  font-family:var(--mono);
  font-size:.735rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--steel);
  padding-block:6px;
  border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.nav a:hover{ color:var(--paper); border-bottom-color:var(--beam-a); }
body[data-active="home"]     .nav a[data-page="home"],
body[data-active="services"] .nav a[data-page="services"],
body[data-active="dynamic"]  .nav a[data-page="dynamic"],
body[data-active="controls"] .nav a[data-page="controls"],
body[data-active="projects"] .nav a[data-page="projects"],
body[data-active="about"]    .nav a[data-page="about"],
body[data-active="contact"]  .nav a[data-page="contact"]{
  color:var(--paper);
  border-bottom-color:var(--beam-a);
}
.nav .call{
  color:var(--paper);
  border:1px solid rgba(129,149,166,.4);
  border-radius:999px;
  padding:8px 15px;
}
.nav .call:hover{ border-color:var(--paper); background:rgba(255,255,255,.06); }

@media (max-width:720px){
  .topbar__in{ flex-wrap:wrap; padding-block:12px; min-height:0; }
  .nav{ width:100%; margin-left:0; gap:14px 18px; }
  .nav a{ font-size:.68rem; }
}

/* ---------- buttons ---------- */

.btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.2rem; }

.btn{
  font-family:var(--mono);
  font-size:.775rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none;
  padding:15px 26px;
  border-radius:2px;
  border:1px solid rgba(243,245,244,.34);
  color:var(--paper);
  display:inline-flex; align-items:center; gap:.65em;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{ background:rgba(243,245,244,.09); border-color:var(--paper); }
.btn--solid{ background:var(--paper); color:var(--ink); border-color:var(--paper); font-weight:500; }
.btn--solid:hover{ background:#fff; color:var(--ink); }
.band--paper .btn{ border-color:rgba(19,32,48,.3); color:#132030; }
.band--paper .btn:hover{ background:rgba(19,32,48,.07); border-color:#132030; }
.band--paper .btn--solid{ background:#132030; color:var(--paper); border-color:#132030; }

/* ============================================================
   SIGNATURE — the hero wash + channel strip
   ============================================================ */

.hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(72px,11vw,148px) 0;
  isolation:isolate;
}
.hero__wash{
  position:absolute; inset:-30% -10% auto -10%;
  height:150%;
  z-index:-1;
  background:
    radial-gradient(52% 46% at 16% 24%, color-mix(in srgb, var(--beam-a) 58%, transparent), transparent 70%),
    radial-gradient(46% 42% at 82% 12%, color-mix(in srgb, var(--beam-b) 52%, transparent), transparent 68%),
    radial-gradient(70% 50% at 50% 96%, rgba(10,20,32,.9), transparent 70%);
  filter:blur(30px);
  opacity:.85;
  transition:background 1.1s ease;
}
.hero__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:repeating-linear-gradient(90deg, rgba(243,245,244,.055) 0 1px, transparent 1px 78px);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.7), transparent 72%);
}

.hero h1 .glow{
  background:linear-gradient(96deg, var(--beam-a), var(--beam-b));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  transition:background .9s ease;
}

.hero__body{ max-width:min(1000px,100%); position:relative; }
.hero__body .lede{ margin-top:1.6rem; }

/* the channel strip */
.strip{
  margin-top:clamp(48px,7vw,86px);
  border-top:1px solid rgba(129,149,166,.22);
  padding-top:18px;
  padding-bottom:clamp(30px,4vw,48px);
}
.strip__hd{
  font-family:var(--mono);
  font-size:.63rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--steel-dk);
  margin-bottom:14px;
}
.strip__row{
  display:flex; gap:8px; flex-wrap:wrap;
}
.chan{
  appearance:none; cursor:pointer;
  background:transparent;
  border:1px solid rgba(129,149,166,.26);
  border-radius:2px;
  padding:11px 16px 12px;
  color:var(--steel);
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  display:flex; align-items:center; gap:.65em;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.chan .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--c1);
  box-shadow:0 0 0 0 transparent;
  transition:box-shadow .3s ease;
  flex:none;
}
.chan:hover{ color:var(--paper); border-color:rgba(129,149,166,.55); }
.chan[aria-pressed="true"]{
  color:var(--paper);
  border-color:rgba(243,245,244,.5);
  background:rgba(243,245,244,.05);
}
.chan[aria-pressed="true"] .dot{ box-shadow:0 0 12px 2px var(--c1); }

@media (max-width:600px){
  .strip__row{ gap:6px; }
  .chan{ padding:9px 12px; font-size:.63rem; }
}

/* ---------- capability cards ---------- */

.card{
  border-top:1px solid rgba(129,149,166,.26);
  padding-top:22px;
}
.card h3{ margin-bottom:.7rem; }
.card p{ color:#C3CEd8; font-size:.98rem; }
.band--paper .card{ border-top-color:#CBD4DA; }
.band--paper .card p{ color:#4A5A6A; }
.card__no{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  color:var(--beam-a); display:block; margin-bottom:1rem;
}
.band--paper .card__no{ color:#B0741F; }

/* ---------- credentials band ---------- */

.creds{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;
  background:rgba(129,149,166,.22);
  border:1px solid rgba(129,149,166,.22);
}
.cred{
  background:var(--ink);
  padding:26px 22px;
}
@media (max-width:1000px){ .creds{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:620px){ .creds{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cred dt{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel-dk); margin-bottom:.65rem;
}
.cred dd{
  margin:0;
  font-family:var(--display); font-weight:600; font-size:1.02rem;
  letter-spacing:-.01em; line-height:1.3;
}

/* ---------- project cards ---------- */

.proj{ text-decoration:none; display:block; }
.proj__img{
  aspect-ratio:4/3; overflow:hidden; background:var(--ink-3);
  border:1px solid rgba(129,149,166,.2);
}
.proj__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.proj:hover .proj__img img{ transform:scale(1.045); }
.proj__meta{
  font-family:var(--mono); font-size:.65rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--steel-dk);
  margin:18px 0 .5rem;
}
.proj h3{ font-size:1.22rem; }
.proj p{ color:#B9C5CF; font-size:.95rem; margin-top:.55rem; }
.band--paper .proj p{ color:#4A5A6A; }
.band--paper .proj__img{ border-color:#CBD4DA; }

/* ---------- process list ---------- */

.step{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:clamp(14px,3vw,36px);
  padding-block:26px;
  border-top:1px solid rgba(129,149,166,.2);
  align-items:start;
}
.band--paper .step{ border-top-color:#CBD4DA; }
.step__no{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  color:var(--beam-a); padding-top:.32em;
}
.band--paper .step__no{ color:#B0741F; }
.step h3{ margin-bottom:.45rem; }
.step p{ font-size:.97rem; color:#BCC8D2; max-width:62ch; }
.band--paper .step p{ color:#4A5A6A; }
@media (max-width:620px){ .step{ grid-template-columns:1fr; gap:8px; } }

/* ---------- spec list (used on service pages) ---------- */

.specs{ list-style:none; margin:1.4rem 0 0; padding:0; }
.specs li{
  padding:13px 0 13px 26px;
  border-bottom:1px solid rgba(129,149,166,.18);
  position:relative;
  font-size:.98rem;
}
.specs li::before{
  content:""; position:absolute; left:0; top:1.34em;
  width:11px; height:1px; background:var(--beam-a);
}
.band--paper .specs li{ border-bottom-color:#CBD4DA; }

/* ---------- CTA ---------- */

.cta{
  position:relative; overflow:hidden;
  border-top:1px solid rgba(129,149,166,.2);
}
.cta__wash{
  position:absolute; inset:auto -10% -60% -10%; height:140%; z-index:0;
  background:radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--beam-a) 30%, transparent), transparent 70%);
  filter:blur(50px); opacity:.5; pointer-events:none;
}
.cta .wrap{ position:relative; z-index:1; }

/* ---------- contact form ---------- */

.form{ display:grid; gap:16px; margin-top:2rem; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:620px){ .form .row{ grid-template-columns:1fr; } }
.field label{
  display:block;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--steel);
  margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;
  background:rgba(243,245,244,.05);
  border:1px solid rgba(129,149,166,.32);
  border-radius:2px;
  color:var(--paper);
  font-family:var(--body); font-size:1rem;
  padding:13px 14px;
}
.field textarea{ min-height:132px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--beam-b); }
.field select option{ background:var(--ink-2); }

/* ---------- footer ---------- */

.foot{
  background:#071019;
  border-top:1px solid rgba(129,149,166,.18);
  padding-block:clamp(48px,6vw,76px) 30px;
  font-size:.94rem;
}
.foot__grid{
  display:grid; gap:36px;
  grid-template-columns:1.3fr 1fr 1fr 1.1fr;
}
@media (max-width:860px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot__grid{ grid-template-columns:1fr; } }
.foot h4{
  font-family:var(--mono); font-weight:500; font-size:.63rem;
  letter-spacing:.19em; text-transform:uppercase; color:var(--steel-dk);
  margin-bottom:1.1rem;
}
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ margin-bottom:.55rem; }
.foot a{ text-decoration:none; color:#C3CED8; }
.foot a:hover{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.foot__brand img{ height:60px; margin-bottom:1.2rem; }
.foot__brand p{ color:#93A4B3; font-size:.92rem; max-width:34ch; }
.foot__base{
  margin-top:44px; padding-top:22px;
  border-top:1px solid rgba(129,149,166,.16);
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel-dk);
}
.areas{ color:#7C8E9D; font-size:.86rem; line-height:1.7; }

/* ---------- misc ---------- */

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--paper); color:var(--ink);
  padding:12px 18px; z-index:200;
  font-family:var(--mono); font-size:.75rem;
}
.skip:focus{ left:12px; top:12px; }

.figure figcaption{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel-dk); margin-top:12px;
}

.note{
  font-family:var(--mono); font-size:.72rem; line-height:1.7;
  color:var(--steel-dk); letter-spacing:.02em;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- project spec panel ---------- */

.panel{
  background:var(--ink-2);
  color:var(--paper);
  padding:clamp(24px,3vw,34px);
  border:1px solid rgba(129,149,166,.28);
  position:relative;
}
.panel::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,var(--beam-a),var(--beam-b) 55%,transparent);
}
.band--paper .panel{ background:var(--ink); }
.panel__eyebrow{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel-dk); margin:0 0 .8rem;
}
.panel h3{ font-size:1.5rem; margin-bottom:1.2rem; }
.panel__rows{ margin:0; }
.panel__rows > div{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:18px;
  padding:12px 0;
  border-top:1px solid rgba(129,149,166,.18);
}
.panel__rows dt{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--steel-dk); padding-top:.25em;
}
.panel__rows dd{ margin:0; font-size:.95rem; line-height:1.5; color:#D2DBE2; }
@media (max-width:560px){
  .panel__rows > div{ grid-template-columns:1fr; gap:4px; }
}