/* Meridian Electric — BLACKOUT art direction.
   One committed dark world: "the lights-on company." An electrician's work is
   making light happen in the dark — the site lives there. Single-theme by design. */

/* ── token override: the dark world ── */
:root{
  --ground:#101319;        /* page: near-black, blue-cast */
  --surface:#1A2029;       /* raised: boards, cards, inputs */
  --surface-2:#212B38;     /* alt bands — LIFTED off black for tonal relief */
  --ink:#F2F4F8;           /* type: near-white */
  --ink-soft:#B9C2CE;      /* body */
  --muted:#8A93A1;         /* captions (AA on ground) */
  --line:#262E3A;
  --accent:#6D8AFF;        /* cobalt, lifted for dark */
  --accent-deep:#3D5BF0;
  --accent-soft:#22304F;   /* tinted fills on dark */
  --highlight:#FF7A2F;     /* emergency only */
  --plate:#0B0E13;         /* darkest: contrast blocks (board head, quote, footer) */
  --shadow:0 24px 60px -24px rgba(0,0,0,.8);
}

/* ground texture: blueprint grid + grain both live on dark */
body::after{opacity:.06;background-image:
  linear-gradient(rgba(109,138,255,.55) 1px, transparent 1px),
  linear-gradient(90deg, rgba(109,138,255,.55) 1px, transparent 1px);
  background-size:28px 28px}

/* dark-context fixes for components that used ink-as-background */
.plate{background:transparent;color:var(--ink-soft)}
.plate::before{display:none}                    /* body grid covers it */
.board-head{background:var(--plate);color:var(--ink-soft)}
.quote-d{background:var(--plate);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nameplate{background:var(--plate)}
.footer{background:var(--plate);color:var(--muted)}
.footer a{color:var(--muted)} .footer a:hover{color:var(--ink)}
.btn--inverse{background:var(--ink);color:#0B0E13}
.btn--inverse:hover{background:#fff;color:#0B0E13}
.cta-band{background:var(--accent-deep)}
.card{box-shadow:none}
.media,.frame{background:var(--surface-2)}

/* every section physically connects: shared hairline spine */
main .section{border-top:1px solid var(--line)}

/* ── logo lockup: mark + stacked wordmark ── */
.logo-lk{display:inline-flex;gap:11px;align-items:center;text-decoration:none}
.logo-lk .mk{width:34px;height:34px;flex:none}
.logo-lk .wd{display:flex;flex-direction:column;line-height:1.05}
.logo-lk .wd b{font-family:var(--display);font-variation-settings:"wdth" 116;
  font-weight:800;font-size:16px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.logo-lk .wd i{font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.42em;text-transform:uppercase;color:var(--accent)}
main a.logo-lk,.footer a.logo-lk{background-image:none}

/* panel-tag: labels clipped onto the section spine */
.panel-tag{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink);
  border:1px solid var(--line);border-radius:3px;background:var(--surface);
  padding:6px 12px}
.panel-tag::before{content:attr(data-circuit);color:var(--accent);font-weight:700}

/* keyline frame (kept for future imagery) */
.keyline-frame{position:relative}
.keyline-frame::after{content:"";position:absolute;inset:0;
  transform:translate(14px,14px);border:2px solid var(--accent);
  border-radius:var(--radius-img);z-index:-1}

/* the single orange moment: live status */
.badge-247{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:13px;font-weight:500;color:var(--highlight);
  border:1px solid color-mix(in srgb,var(--highlight) 45%,transparent);
  border-radius:999px;padding:6px 14px;background:color-mix(in srgb,var(--highlight) 10%,transparent)}
.badge-247 .dot{width:7px;height:7px;border-radius:50%;background:var(--highlight)}
@media (prefers-reduced-motion:no-preference){
  .badge-247 .dot{animation:pulse 2.4s ease-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
}

/* display voice: signage */
h1,h2{font-variation-settings:"wdth" 116;text-transform:uppercase;letter-spacing:.005em}
h1{font-weight:800}
p{text-wrap:pretty}

/* power-on: the headline is the light turning on */
@media (prefers-reduced-motion:no-preference){
  .plate-hero h1{animation:power-on .85s steps(1,end) .1s both}
  @keyframes power-on{0%{opacity:0}16%{opacity:1}26%{opacity:.2}36%{opacity:1}44%{opacity:.45}52%{opacity:1}100%{opacity:1}}
}

/* mechanical reveals: quicker than Alder's */
[data-io]{transform:translateY(12px);transition-duration:.42s,.42s}

.circuit .c-pulse{opacity:0}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}

/* ── crew band: cinematic photo band (both men visible), LIGHT film, headline over ── */
.crew-band{position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:clamp(360px,40vw,560px);            /* ~wide ratio → minimal crop, both faces stay */
  background:#0B0E13 url("crew.jpg") center 32% / cover no-repeat}
/* film: light up top (photo shows), darker at bottom-left so the headline reads */
.crew-band::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg, rgba(9,12,17,.82) 0%, rgba(9,12,17,.40) 38%, rgba(9,12,17,.06) 70%, rgba(9,12,17,.22) 100%),
  linear-gradient(180deg, rgba(9,12,17,0) 0%, rgba(9,12,17,.05) 45%, rgba(9,12,17,.66) 100%)}
.crew-band .container{padding-top:var(--s5);padding-bottom:var(--s5)}
.crew-band .panel-tag{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);
  color:#fff;backdrop-filter:blur(4px)}
.crew-band h2{color:#fff;max-width:15ch;margin-top:var(--s2);text-shadow:0 2px 28px rgba(0,0,0,.7)}

/* detail strip below the photo: copy + stats on solid lifted slate */
.crew-detail{background:var(--surface-2)}
.crew-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s5);align-items:start}
.crew-stats{border-top:2px solid var(--accent);padding-top:var(--s3)}
.crew-stats .big{font-family:var(--display);font-variation-settings:"wdth" 116;
  text-transform:uppercase;font-weight:800;color:#fff;font-size:clamp(44px,5.5vw,64px);
  line-height:1;font-variant-numeric:tabular-nums}
.crew-stats .cap{color:var(--muted);font-size:var(--fs-small);margin:6px 0 var(--s3)}
.crew-stats .r{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.crew-stats .r b{color:#fff;font-weight:500}
@media (max-width:800px){.crew-grid{grid-template-columns:1fr;gap:var(--s4)}
  .crew-band{background-position:center 28%}}

/* craft: links + buttons */
main a:not(.btn){background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;
  transition:background-size .22s cubic-bezier(.3,.8,.3,1)}
main a:not(.btn):hover{background-size:100% 1.5px}
.btn--primary{background:var(--accent-deep)}
.btn--primary:hover{background:var(--accent)}
.btn--primary::after{content:"→";display:inline-block;transition:transform .22s cubic-bezier(.3,.8,.3,1)}
.btn--primary:hover::after{transform:translateX(4px)}
.btn--ghost{border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}