/* Summit Electric — "Scoped quote, done to code."
   Structure advantage: the hero is a 3-step quote scoper (job → house → panel) that tells the
   homeowner whether the job needs a permit and what the visit looks like, then pre-fills the
   request form. Electrical is bought as a project; the site helps scope it before the call.
   Dark, warm charcoal + amber. Space Grotesk display, Inter body. Hairline grid, small-caps labels. */

.cs-body[data-trade="electrical"] {
  --cs-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cs-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --cs-brand: #f2b01e;
  --cs-brand-dark: #c98a00;
  --cs-brand-soft: rgba(242, 176, 30, 0.14);
  --cs-brand-ink: #1a1a1a;
  --cs-accent-2: #e2603f; /* urgent */
  --cs-r: 8px;
  --cs-r-lg: 14px;
  --cs-r-btn: 8px;
}
.cs-body[data-trade="electrical"][data-scheme="dark"] {
  --cs-bg: #14161a;
  --cs-bg-2: #191b20;
  --cs-surface: #1d2026;
  --cs-surface-2: #24272e;
  --cs-ink: #f1eee8;
  --cs-ink-2: #c6c2ba;
  --cs-muted: #948f87;
  --cs-line: rgba(241, 238, 232, 0.10);
  --cs-line-strong: rgba(241, 238, 232, 0.24);
}
.cs-body[data-trade="electrical"][data-scheme="light"] {
  --cs-bg: #f6f4ef;
  --cs-bg-2: #edeae3;
  --cs-surface: #ffffff;
  --cs-surface-2: #f1efe9;
  --cs-brand-dark: #9a6900;
}

/* base.css `.cs-body a { color: inherit }` (0,1,1) outranks `.cs-btn--primary` / `.cs-link` (0,1,0),
   so <a> buttons would inherit page ink on an amber button. Re-assert the token-driven colors. */
.cs-body[data-trade="electrical"] a.cs-btn--primary { color: var(--cs-brand-ink); }
.cs-body[data-trade="electrical"] a.cs-btn--soft { color: var(--cs-brand-dark); }
.cs-body[data-trade="electrical"] a.cs-btn--soft:hover { color: var(--cs-brand-ink); }
.cs-body[data-trade="electrical"] a.cs-link { color: var(--cs-brand-dark); }
.cs-body[data-trade="electrical"][data-scheme="dark"] a.cs-link { color: var(--cs-brand); }

/* Chat embed hardcodes white-on-brand; amber needs dark text. Follows --cs-brand-ink so the
   Looks bridge (which resets brand-ink to white) still reads correctly. */
.cs-body[data-trade="electrical"] .cs-chat-fab,
.cs-body[data-trade="electrical"] .cs-chat-head,
.cs-body[data-trade="electrical"] .cs-chat-close,
.cs-body[data-trade="electrical"] .cs-bubble--user,
.cs-body[data-trade="electrical"] .cs-chat-input button { color: var(--cs-brand-ink); }
.cs-body[data-trade="electrical"] .cs-chat-fab { box-shadow: var(--cs-shadow-lg); }

.cs-body[data-trade="electrical"] .cs-h1 { font-weight: 700; letter-spacing: -0.03em; }
.cs-body[data-trade="electrical"] .cs-h2 { font-weight: 600; letter-spacing: -0.02em; }

/* Seven nav items + phone: keep everything on one line at desktop widths */
.cs-body[data-trade="electrical"] .cs-nav { gap: 18px; font-size: 14px; }
.cs-body[data-trade="electrical"] .cs-nav a, .cs-body[data-trade="electrical"] .cs-topbar-phone, .cs-body[data-trade="electrical"] .cs-logo { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1100px) { .cs-body[data-trade="electrical"] .cs-topbar-phone span { display: none; } }

/* Small-caps schematic labels */
.se-label { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-muted); }

/* ---------- Hero: copy left, scoper right ---------- */
.se-hero { padding: clamp(36px, 5vw, 76px) 0 clamp(40px, 5vw, 72px); position: relative; overflow: hidden; }
.se-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--cs-line) 1px, transparent 1px), linear-gradient(90deg, var(--cs-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 80% at 65% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 80% at 65% 40%, #000 30%, transparent 100%);
}
.se-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr); gap: clamp(28px, 4vw, 56px); align-items: center; position: relative; }
.se-hero .cs-h1 { max-width: 13ch; margin: 0 0 18px; }
.se-hero .cs-h1 em { font-style: normal; color: var(--cs-brand); display: block; }
.se-hero .cs-lead { margin-bottom: 26px; }
.se-hero .cs-trust { margin-top: 22px; }

/* Scoper */
.se-scoper { background: var(--cs-surface); border: 1px solid var(--cs-line-strong); border-radius: var(--cs-r-lg); box-shadow: var(--cs-shadow-lg); overflow: hidden; }
.se-scoper-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--cs-line); background: var(--cs-surface-2); }
.se-scoper-head strong { font-family: var(--cs-font-display); font-size: 15px; letter-spacing: -0.01em; }
.se-step { padding: 14px 18px 4px; display: grid; gap: 8px; }
.se-step + .se-step { border-top: 1px solid var(--cs-line); }
.se-step-label { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; color: var(--cs-ink-2); flex-wrap: wrap; }
.se-num { font-family: var(--cs-font-display); font-size: 12px; font-weight: 600; color: var(--cs-brand); letter-spacing: 0.04em; }
.se-hint { font-weight: 400; color: var(--cs-muted); font-size: 12.5px; }
.se-opts { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; }
.se-opt { font: inherit; font-size: 13.5px; font-weight: 500; padding: 8px 12px; border-radius: var(--cs-r-btn); border: 1px solid var(--cs-line-strong); background: transparent; color: var(--cs-ink); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; line-height: 1.1; }
.se-opt:hover { border-color: var(--cs-ink); }
.se-opt[aria-pressed="true"] { background: var(--cs-brand); border-color: var(--cs-brand); color: var(--cs-brand-ink); font-weight: 600; }
.se-summary { margin: 4px 18px 0; padding: 12px 14px; border-radius: var(--cs-r); background: var(--cs-brand-soft); border-left: 3px solid var(--cs-brand); display: grid; gap: 4px; }
.se-summary .se-label { color: var(--cs-brand-dark); }
.cs-body[data-scheme="dark"] .se-summary .se-label { color: var(--cs-brand); }
.se-summary-line { font-size: 14px; font-weight: 600; line-height: 1.45; }
.se-summary-note { font-size: 13px; color: var(--cs-ink-2); line-height: 1.5; }
.se-scoper-foot { padding: 14px 18px 18px; display: grid; gap: 10px; }
.se-scoper-foot .cs-small { color: var(--cs-muted); }

/* ---------- Safety strip ---------- */
.se-sign-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--cs-line); border: 1px solid var(--cs-line); border-radius: var(--cs-r-lg); overflow: hidden; }
.se-sign { background: var(--cs-surface); padding: clamp(18px, 2.2vw, 26px); display: grid; gap: 10px; align-content: start; position: relative; }
.se-sign h3 { font-size: 1.05rem; }
.se-sign p { color: var(--cs-ink-2); font-size: 0.925rem; }
.se-urgency { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; margin-top: 4px; color: var(--cs-ink-2); }
.se-urgency::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--cs-muted); flex: none; }
.se-sign[data-urgency="now"] .se-urgency { color: var(--cs-ink); }
.se-sign[data-urgency="now"] .se-urgency::before { background: var(--cs-accent-2); }
.se-sign[data-urgency="soon"] .se-urgency::before { background: var(--cs-brand); }
.se-sign[data-urgency="plan"] .se-urgency { color: var(--cs-muted); }

/* ---------- Services matrix ---------- */
.se-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.se-svc { background: var(--cs-surface); border: 1px solid var(--cs-line); border-radius: var(--cs-r-lg); padding: clamp(20px, 2.4vw, 26px); display: grid; gap: 10px; align-content: start; }
.se-svc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.se-svc h3 { font-size: 1.1rem; }
.se-svc .cs-pill { flex: none; font-size: 11.5px; padding: 4px 9px; }
.se-svc p { color: var(--cs-ink-2); font-size: 0.925rem; }

/* ---------- Permits ---------- */
.se-permits { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.se-permit-list { margin: 28px 0 0; display: grid; gap: 0; border-top: 1px solid var(--cs-line); }
.se-permit-list > div { padding: 18px 0; border-bottom: 1px solid var(--cs-line); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; }
.se-permit-list dt { font-family: var(--cs-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.se-permit-list dd { margin: 0; color: var(--cs-ink-2); font-size: 0.95rem; }
.se-panel-media { aspect-ratio: 5 / 6; position: sticky; top: 90px; }
.se-sch-box { fill: var(--cs-surface); stroke: var(--cs-line-strong); stroke-width: 1.2; }
.se-sch-main { fill: var(--cs-ink); }
.se-sch-brk rect { fill: var(--cs-surface-2); stroke: var(--cs-line-strong); stroke-width: 1; }
.se-sch-brk rect.se-sch-hi { fill: var(--cs-brand); stroke: var(--cs-brand); }
.se-sch-brk rect.se-sch-spare { fill: transparent; stroke-dasharray: 3 3; }
.se-sch-bus { fill: none; stroke: var(--cs-ink-2); stroke-width: 1.5; stroke-linecap: round; }
.se-sch-t { font-family: var(--cs-font); font-size: 10.5px; font-weight: 500; fill: var(--cs-ink-2); }
.se-sch-t--main { fill: var(--cs-bg); font-weight: 700; letter-spacing: 0.04em; font-family: var(--cs-font-display); }
.se-sch-t--hi { fill: var(--cs-ink); font-weight: 600; }
.se-sch-t--cap { fill: var(--cs-muted); font-size: 10px; }

/* ---------- EV + generator spotlight ---------- */
.se-spot { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--cs-line); border-radius: var(--cs-r-lg); overflow: hidden; background: var(--cs-surface); }
.se-spot-panel { padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; align-content: start; }
.se-spot-panel + .se-spot-panel { border-left: 1px solid var(--cs-line); }
.se-spot-panel h3 { font-size: 1.35rem; letter-spacing: -0.02em; }
.se-checks { list-style: none; display: grid; gap: 10px; font-size: 0.95rem; color: var(--cs-ink-2); }
.se-checks li { display: flex; gap: 10px; align-items: flex-start; }
.se-checks svg { width: 16px; height: 16px; color: var(--cs-brand); flex: none; margin-top: 3px; stroke-width: 2; }
.se-checks strong { color: var(--cs-ink); }
.se-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.se-compare > div { padding: 14px; border-radius: var(--cs-r); background: var(--cs-surface-2); border: 1px solid var(--cs-line); display: grid; gap: 6px; align-content: start; }
.se-compare strong { font-family: var(--cs-font-display); font-size: 1rem; }
.se-compare p { font-size: 0.9rem; color: var(--cs-ink-2); }
.se-spot-note { font-size: 0.9rem; color: var(--cs-ink-2); padding: 12px 14px; border-radius: var(--cs-r); background: var(--cs-brand-soft); border-left: 3px solid var(--cs-brand); }
.se-spot-note strong { color: var(--cs-ink); }

/* ---------- Process: six steps, three across ---------- */
.se-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 28px; }

/* ---------- Area ---------- */
.se-area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.se-map { aspect-ratio: 13 / 11; }
.se-map-river { fill: none; stroke: var(--cs-ink-2); stroke-opacity: 0.35; stroke-width: 3; stroke-linecap: round; }
.se-map-road { fill: none; stroke: var(--cs-ink); stroke-opacity: 0.16; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.se-map-road--thin { stroke-width: 3; }
.se-map-rd { font-family: var(--cs-font); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--cs-muted); }
.se-map-zone { fill: var(--cs-brand-soft); stroke: var(--cs-brand); stroke-width: 1; stroke-dasharray: 5 4; }
.se-map-hub { fill: var(--cs-brand); }
.se-map-hub-ring { fill: none; stroke: var(--cs-brand); stroke-width: 1; opacity: 0.6; }
.se-map-dot { fill: var(--cs-ink); }
.se-map-town { font-family: var(--cs-font); font-size: 11.5px; font-weight: 600; fill: var(--cs-ink-2); }
.se-map-town--hub { fill: var(--cs-ink); font-size: 13px; font-family: var(--cs-font-display); }
.se-towns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---------- Request ---------- */
.se-request { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.se-request .cs-card { box-shadow: var(--cs-shadow); }
.se-request-side { display: grid; gap: 18px; position: sticky; top: 90px; }
.se-request-side .cs-h2 { margin-bottom: 6px; }
.se-request-side .cs-link { white-space: nowrap; }
.se-request-side ol { list-style: none; display: grid; gap: 10px; color: var(--cs-ink-2); font-size: 0.95rem; counter-reset: r; }
.se-request-side ol li { display: flex; gap: 12px; counter-increment: r; }
.se-request-side ol li::before { content: counter(r); width: 22px; height: 22px; border-radius: 6px; background: var(--cs-brand); color: var(--cs-brand-ink); font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; font-family: var(--cs-font-display); }
.se-prefill { font-size: 13px; padding: 10px 12px; border-radius: var(--cs-r); background: var(--cs-brand-soft); border-left: 3px solid var(--cs-brand); color: var(--cs-ink-2); }
.se-prefill span { font-weight: 600; color: var(--cs-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .se-hero-grid { grid-template-columns: 1fr; }
  .se-hero .cs-h1 { max-width: 18ch; }
  .se-permits, .se-area, .se-request { grid-template-columns: 1fr; }
  .se-panel-media, .se-request-side { position: static; }
  .se-panel-media { max-width: 420px; }
  .se-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .se-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .se-sign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .se-spot { grid-template-columns: 1fr; }
  .se-spot-panel + .se-spot-panel { border-left: 0; border-top: 1px solid var(--cs-line); }
  .se-permit-list > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 560px) {
  .se-sign-grid, .se-matrix, .se-steps, .se-compare { grid-template-columns: 1fr; }
  .se-opt { font-size: 13px; padding: 8px 10px; }
  .se-scoper-head { flex-wrap: wrap; }
}