/* Electrician Philly — tokens. Values decided in DIRECTION.md. No hex outside this file. */

@font-face {
  font-family: "Closeout";
  src: url("fonts/TAYCloseoutRegular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Closeout";
  src: url("fonts/TAYCloseoutSlanted.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/libre-franklin-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --ground:        #0E1116;
  --ground-raised: #171B22;
  --zinc:          #E4E5E1;
  --zinc-raised:   #F0F1EE;
  --ink:           #0E1116;
  --ink-quiet:     #8A9099;
  --ink-quiet-lt:  #5C6169;
  --edge:          #2A303A;
  --edge-lt:       #C4C7C0;
  --volt:          #FFD400;
  --volt-deep:     #E0B400;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --r-tap: 6px;

  --display: "Closeout", "Impact", sans-serif;
  --body: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.2,.7,.3,1);
  --enter: 180ms;
  --exit: 120ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
}

/* ---- the wordmark ----
   PHILLY is 6 characters, ELECTRICIANS is 12. Sizing them off one clamp either
   clips the long word or wastes the short one, so each word gets its own ramp,
   tuned so both flush to the same measure. That flush stack is the sign layout. */

.mark { margin: 0 0 var(--s6); }
.mark .w {
  display: block;
  font-family: var(--display);
  line-height: .84;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.mark .w1 { font-size: clamp(56px, 15.6vw, 176px); }
.mark .w2 { font-size: clamp(29px, 8.1vw, 91px); }

/* The bolt is the divider: a solid rule broken by a real lightning glyph. */
.mark .rule {
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s2) 0;
}
.mark .rule i { flex: 1; height: 7px; background: currentColor; }
.mark .rule svg { flex: none; height: 34px; width: auto; display: block; }
@media (min-width: 900px) {
  .mark .rule i { height: 11px; }
  .mark .rule svg { height: 54px; }
}

/* ---- shared hero furniture ---- */

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s5);
}
.eyebrow svg { flex: none; }

.deck {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 500;
  max-width: 26ch;
  margin: 0 0 var(--s5);
}
@media (min-width: 900px) { .deck { font-size: 24px; max-width: 34ch; } }

.actions { display: flex; flex-direction: column; gap: var(--s3); }
@media (min-width: 900px) { .actions { flex-direction: row; align-items: stretch; } }

.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--body);
  font-size: 20px; font-weight: 700; letter-spacing: -0.01em;
  padding: var(--s4) var(--s5);
  border-radius: var(--r-tap);
  border: 2px solid transparent;
  text-decoration: none;
  min-height: 60px;
  transition: background-color var(--exit) var(--ease), border-color var(--exit) var(--ease);
}
.btn-call { background: var(--volt); color: var(--ink); }
.btn-call:hover { background: var(--volt-deep); }
.btn-form { background: transparent; }

.legal {
  font-size: 13px;
  line-height: 1.45;
  margin: var(--s5) 0 0;
  max-width: 44ch;
}

/* one entrance: the bolt strikes once */
@keyframes strike {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.bolt-strike { animation: strike 420ms var(--ease) 120ms both; }
@media (prefers-reduced-motion: reduce) {
  .bolt-strike { animation: none; }
}