/* Brand: dualstateelectric.online — dual-bus / lockout-tag skin */
:root {
  --maxw: 1120px;
  --dua-rail: 3px;
  --dua-tag-w: 420px;
  --dua-eye: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--dna-ink, #e6edf6);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 47px,
      color-mix(in srgb, var(--dna-line) 35%, transparent) 47px 48px
    ),
    radial-gradient(880px 420px at 0% -8%, color-mix(in srgb, var(--dna-accent) 22%, transparent), transparent 62%),
    radial-gradient(640px 360px at 100% 0%, color-mix(in srgb, var(--dna-accent-2) 16%, transparent), transparent 58%),
    var(--dna-bg, #101828);
  line-height: 1.55;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--dna-accent, #7aa2d6); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 .4em;
  text-transform: uppercase;
}
p { margin: 0 0 1em; color: var(--dna-ink-soft, #b7c4d4); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.eyebrow, .kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dna-accent, #7aa2d6);
  margin-bottom: 10px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; gap: 8px;
  padding: 12px 18px; border: 0; cursor: pointer;
  font-family: inherit; text-decoration: none;
  border-radius: var(--btn-radius, 4px);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.btn:hover { text-decoration: none; }
.btn-solid {
  background: var(--dna-accent, #7aa2d6);
  color: var(--dna-accent-ink, #0b1220);
}
.btn-solid:hover { filter: brightness(1.08); }
.btn-ghost {
  background: transparent;
  color: var(--dna-ink, #e6edf6);
  border: 1.5px solid var(--dna-line, #2a3a52);
}

[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
[data-reveal].in { opacity: 1; transform: none; }

/* ===== topbar: dual bus ===== */
.dua72-bus {
  background: color-mix(in srgb, var(--dna-surface-2) 88%, #000);
  border-bottom: var(--dua-rail) solid var(--dna-accent, #7aa2d6);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
.dua72-bus .wrap {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap;
  align-items: center;
}
.dua72-bus a { color: inherit; }
.dua72-phases { display: flex; gap: 10px; align-items: center; }
.dua72-phases b {
  display: inline-flex; width: 22px; height: 22px;
  align-items: center; justify-content: center;
  border: 1.5px solid var(--dna-accent, #7aa2d6);
  color: var(--dna-accent, #7aa2d6);
  font-size: 10px;
}

/* ===== mast ===== */
.dua72-mast {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--dna-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dna-line, #2a3a52);
}
.dua72-mast-row {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 28px;
  display: flex; align-items: center; gap: 22px;
}
.dua72-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.dua72-brand:hover { text-decoration: none; }
.dua72-brand b { display: block; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.dua72-brand small { display: block; font-size: 11px; letter-spacing: .12em; color: var(--dna-ink-soft); text-transform: uppercase; }
.dua72-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 2px solid var(--dna-accent, #7aa2d6);
  color: var(--dna-accent, #7aa2d6);
  background: var(--dna-surface, #162033);
}
.dua72-mark svg { width: 22px; height: 22px; }
.dua72-nav { display: flex; gap: 18px; margin-left: auto; }
.dua72-nav a {
  color: var(--dna-ink-soft); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.dua72-nav a.active, .dua72-nav a:hover { color: var(--dna-ink); text-decoration: none; }
.dua72-mast-cta { margin-left: 8px; }
.dua72-burger {
  display: none; margin-left: auto; width: 42px; height: 42px;
  background: transparent; border: 1px solid var(--dna-line); cursor: pointer; padding: 10px;
}
.dua72-burger span { display: block; height: 2px; background: var(--dna-ink); margin: 5px 0; }
.dua72-sheet {
  display: none; flex-direction: column; gap: 4px; padding: 8px 28px 18px;
  border-top: 1px solid var(--dna-line);
}
.dua72-sheet a {
  padding: 10px 0; color: var(--dna-ink); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.dua72-sheet.open { display: flex; }

/* ===== overlay hero (stamped overlay) ===== */
.dua72-hero-overlay {
  position: relative; min-height: 520px; display: flex; align-items: flex-end;
  overflow: hidden;
  border-bottom: var(--dua-rail) solid var(--dna-accent, #7aa2d6);
}
.dua72-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.dua72-hero-overlay::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--dna-bg) 82%, transparent) 0%, transparent 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 28px);
}
.dua72-hero-overlay .wrap { position: relative; z-index: 2; padding: 56px 28px; width: 100%; }
.dua72-hero-overlay .card {
  background: var(--dna-surface, #162033);
  border: 1px solid var(--dna-line, #2a3a52);
  border-left: 6px solid var(--dna-accent, #7aa2d6);
  padding: 28px 30px; max-width: 520px;
  box-shadow: 0 28px 60px -28px rgba(0,0,0,.65);
}
.dua72-hero-overlay h1 { font-size: 36px; margin: 10px 0 12px; max-width: 14ch; }
.dua72-hero-overlay .sub { font-size: 16px; max-width: 42ch; }
.dua72-hero-overlay .cta { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* ===== quote-led about ===== */
.dua72-about-quoteled { padding: var(--section-pad, 88px) 0; }
.dua72-about-quoteled .grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center;
}
.dua72-about-quoteled blockquote {
  font-size: 28px; line-height: 1.22; margin: 0;
  text-transform: uppercase; letter-spacing: -.015em;
}
.dua72-about-quoteled blockquote span { color: var(--dna-accent, #7aa2d6); }
.dua72-who { display: flex; gap: 14px; align-items: center; margin-top: 24px; }
.dua72-av {
  width: 52px; height: 52px; border-radius: 0;
  background: linear-gradient(150deg, var(--dna-accent), var(--dna-accent-2));
  border: 2px solid var(--dna-line);
}
.dua72-who b { display: block; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.dua72-who small { color: var(--dna-ink-soft); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.dua72-about-quoteled .body p { font-size: 15.5px; }

/* ===== gallery ===== */
.dua72-gallery { padding: var(--section-pad, 88px) 0; background: var(--dna-surface, #162033); }
.dua72-gallery .head { max-width: 640px; margin-bottom: 32px; }
.dua72-ggrid {
  display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 12px;
}
.dua72-ggrid figure {
  margin: 0; border: 1px solid var(--dna-line);
  overflow: hidden; background: var(--dna-surface-2);
}
.dua72-ggrid img { width: 100%; height: 100%; object-fit: cover; min-height: 180px; }
.dua72-ggrid figure:first-child { grid-row: span 2; }
.dua72-ggrid figcaption {
  padding: 10px 12px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dna-ink-soft);
}

/* ===== faq ===== */
.dua72-faq { padding: var(--section-pad, 88px) 0; }
.dua72-faq .head { margin-bottom: 28px; }
.dua72-q {
  border-top: 1px solid var(--dna-line); padding: 18px 0;
  display: grid; grid-template-columns: 72px 1fr; gap: 18px;
}
.dua72-q:last-child { border-bottom: 1px solid var(--dna-line); }
.dua72-q b { color: var(--dna-accent); letter-spacing: .14em; font-size: 12px; }
.dua72-q h3 { font-size: 18px; margin-bottom: 6px; text-transform: none; letter-spacing: -.01em; }
.dua72-q p { margin: 0; font-size: 15px; }

/* ===== comparison ===== */
.dua72-cmp { padding: var(--section-pad, 88px) 0; background: var(--dna-surface, #162033); }
.dua72-cmp .cols {
  display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 16px; margin-top: 28px;
}
.dua72-col {
  border: 1px solid var(--dna-line); padding: 22px 20px;
  background: var(--dna-bg);
}
.dua72-col.is-us { border-color: var(--dna-accent); border-width: 2px; }
.dua72-col h3 { font-size: 16px; }
.dua72-col ul { margin: 0; padding-left: 18px; color: var(--dna-ink-soft); font-size: 14.5px; }
.dua72-col li { margin: 8px 0; }

/* ===== services iconrows ===== */
.dua72-svc-iconrows { padding: var(--section-pad, 88px) 0; }
.dua72-svc-iconrows .head { margin-bottom: 28px; max-width: 640px; }
.dua72-svc-iconrows .rows {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 36px;
}
.dua72-svc-iconrows .r {
  display: grid; grid-template-columns: 48px 1fr; gap: 16px;
  align-items: start; padding: 18px 0;
  border-bottom: 1px solid var(--dna-line);
}
.dua72-svc-iconrows .ic {
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: var(--dna-surface-2); color: var(--dna-accent);
  border: 1px solid var(--dna-line);
}
.dua72-svc-iconrows .ic svg { width: 22px; height: 22px; }
.dua72-svc-iconrows h3 { font-size: 16px; margin-bottom: 4px; }
.dua72-svc-iconrows p { font-size: 14.5px; margin: 0; }

/* ===== testimonials ===== */
.dua72-quotes { padding: var(--section-pad, 88px) 0; }
.dua72-quotes .rail {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px;
}
.dua72-quote {
  border: 1px solid var(--dna-line); padding: 22px;
  background: var(--dna-surface);
  border-top: 4px solid var(--dna-accent);
}
.dua72-quote p { font-size: 15px; }
.dua72-quote cite {
  display: block; font-style: normal; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dna-ink-soft);
}

.dua72-jobs { padding: var(--section-pad, 88px) 0; background: var(--dna-surface, #162033); }
.dua72-jobs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.dua72-jobs-grid article {
  border: 1px solid var(--dna-line); padding: 22px;
  border-top: 4px solid var(--dna-accent); background: var(--dna-bg);
}
.dua72-jobs-grid b { display: block; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; margin-bottom: 10px; }

.dua72-lanes { padding: 0 0 var(--section-pad, 88px); }
.dua72-lanes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.dua72-lanes-grid article {
  border: 1px solid var(--dna-line); padding: 22px;
  background: var(--dna-surface);
}
.dua72-lanes-grid .dna-ic { display: inline-flex; color: var(--dna-accent); margin-bottom: 10px; }
.dua72-lanes-grid .dna-ic svg { width: 22px; height: 22px; }
.dua72-lanes-grid h3 { font-size: 16px; }

/* ===== cta boxed ===== */
.dua72-cta-boxed { padding: 0 0 var(--section-pad, 88px); }
.dua72-cta-boxed .box {
  background: var(--dna-surface-2);
  border: 1px solid var(--dna-line);
  border-left: 8px solid var(--dna-accent);
  padding: 40px 36px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start;
}
.dua72-cta-boxed h2 { font-size: 30px; max-width: 16ch; }
.dua72-cta-boxed p { max-width: 46ch; }

/* ===== trust metricbar ===== */
.dua72-trust-metricbar { padding: 0 0 var(--section-pad, 88px); }
.dua72-trust-metricbar .bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(120deg, var(--dna-ink), var(--dna-accent));
  color: #fff; overflow: hidden;
}
.dua72-trust-metricbar .m { padding: 32px 20px; border-right: 1px solid rgba(255,255,255,.16); }
.dua72-trust-metricbar .m:last-child { border-right: 0; }
.dua72-trust-metricbar .m b { display: block; font-size: 34px; letter-spacing: -.02em; }
.dua72-trust-metricbar .m span { font-size: 13px; opacity: .85; display: block; margin-top: 8px; }

/* ===== process timeline ===== */
.dua72-proc-timeline { padding: var(--section-pad, 88px) 0; }
.dua72-proc-timeline .head { margin-bottom: 36px; }
.dua72-proc-timeline .line {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative;
}
.dua72-proc-timeline .line::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 18px;
  height: 2px; background: var(--dna-line);
}
.dua72-proc-timeline .node { text-align: center; padding: 0 12px; position: relative; }
.dua72-proc-timeline .dot {
  width: 38px; height: 38px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dna-bg); border: 2px solid var(--dna-accent);
  color: var(--dna-accent); font-weight: 800; position: relative; z-index: 2;
}
.dua72-proc-timeline h3 { font-size: 15px; }
.dua72-proc-timeline p { font-size: 13.5px; }

/* ===== page head / contact / privacy ===== */
.dua72-pagehead { padding: 56px 0 28px; border-bottom: var(--dua-rail) solid var(--dna-accent); }
.dua72-pagehead h1 { font-size: 34px; max-width: 18ch; }
.section { padding: 48px 0 var(--section-pad, 88px); }
.dua72-prose { max-width: 720px; }
.dua72-prose h2 { font-size: 18px; margin-top: 28px; }

.contact-page { display: grid; gap: 28px; }
.contact-info {
  border: 1px solid var(--dna-line); padding: 24px;
  background: var(--dna-surface);
}
.contact-info dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dna-ink-soft); margin-top: 14px; }
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { margin: 4px 0 0; font-weight: 700; }

.dua72-svcpage .detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px;
}
.dua72-svcpage .service-detail {
  border: 1px solid var(--dna-line); padding: 22px;
  background: var(--dna-surface);
}
.dua72-about-photo { margin-top: 32px; border: 1px solid var(--dna-line); }
.dua72-about-photo img { width: 100%; max-height: 420px; object-fit: cover; }

/* ===== lockout-tag booking (compact) ===== */
.dua72-tag {
  position: relative;
  max-width: var(--dua-tag-w);
  margin: 0 auto;
  background: var(--dna-surface);
  border: 2px solid var(--dna-line);
  padding: 28px 22px 22px;
  box-shadow: 8px 12px 0 color-mix(in srgb, var(--dna-accent) 28%, transparent);
}
.dua72-tag-eye {
  width: var(--dua-eye); height: var(--dua-eye);
  border: 3px solid var(--dna-accent);
  border-radius: 50%;
  margin: -8px auto 12px;
  background: var(--dna-bg);
  box-shadow: inset 0 0 0 4px var(--dna-surface);
}
.dua72-tag-stripe {
  background: repeating-linear-gradient(
    -45deg,
    var(--dna-accent) 0 10px,
    color-mix(in srgb, var(--dna-ink) 80%, #000) 10px 20px
  );
  color: var(--dna-accent-ink, #fff);
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; text-align: center;
  padding: 8px 10px; margin: 0 -22px 18px;
}
.dua72-tag h2 { font-size: 22px; text-transform: uppercase; }
.dua72-tag form { display: grid; gap: 8px; }
.dua72-tag label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.dua72-tag input[type="tel"] {
  width: 100%; padding: 12px 12px;
  background: var(--dna-bg); color: var(--dna-ink);
  border: 1.5px solid var(--dna-line); font: inherit; font-size: 16px;
}
.dua72-tag input:focus { outline: 2px solid var(--dna-accent); border-color: var(--dna-accent); }
.dua72-jobs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.dua72-jobs button {
  background: transparent; color: var(--dna-ink-soft);
  border: 1px solid var(--dna-line); padding: 7px 10px;
  font: inherit; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer;
}
.dua72-jobs button.is-on {
  background: var(--dna-accent); color: var(--dna-accent-ink);
  border-color: var(--dna-accent);
}
.dua72-tag-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.dua72-err { display: none; color: #e8a0a0; font-size: 13px; margin: 0; }
.dua72-err.is-on { display: block; }
.dua72-thanks { text-align: center; padding: 12px 4px 8px; }
.dua72-thanks span {
  display: inline-block; letter-spacing: .16em; text-transform: uppercase;
  font-size: 11px; color: var(--dna-accent); font-weight: 800; margin-bottom: 10px;
}
.dua72-thanks b { display: block; font-size: 22px; text-transform: uppercase; margin-bottom: 10px; }

/* ===== footer stacked ===== */
.dua72-stack {
  border-top: var(--dua-rail) solid var(--dna-accent);
  background: var(--dna-surface);
  padding: 36px 0 28px;
}
.dua72-stack-inner { display: grid; gap: 18px; }
.dua72-stack nav { display: flex; flex-wrap: wrap; gap: 16px; }
.dua72-stack nav a { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.dua72-copy { font-size: 12px; color: var(--dna-ink-soft); margin: 0; }

@media (max-width: 860px) {
  .dua72-nav, .dua72-mast-cta { display: none; }
  .dua72-burger { display: block; }
  .dua72-hero-overlay h1 { font-size: 28px; }
  .dua72-about-quoteled .grid,
  .dua72-ggrid,
  .dua72-cmp .cols,
  .dua72-svc-iconrows .rows,
  .dua72-quotes .rail,
  .dua72-cta-boxed .box,
  .dua72-trust-metricbar .bar,
  .dua72-proc-timeline .line,
  .dua72-jobs-grid,
  .dua72-lanes-grid,
  .dua72-svcpage .detail,
  .dua72-crew-card { grid-template-columns: 1fr; }
  .dua72-ggrid figure:first-child { grid-row: auto; }
  .dua72-trust-metricbar .m { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .dua72-proc-timeline .line::before { display: none; }
  .dua72-q { grid-template-columns: 1fr; gap: 6px; }
  h1, h2, h3, h4 { text-transform: none; }
}