/* Integrated Electrical Contractors
   One stylesheet. See DESIGN.md for the rules this file implements.
   Square corners everywhere. Shadows are hard offsets only. See DESIGN.md section 2. */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  --ink:      #231f20;
  --ink-2:    #000000;
  --orange:   #f15a29;
  --paper:    #f4f1ec;
  --paper-2:  #e9e4dc;
  --rule:     rgba(35, 31, 32, 0.22);
  --rule-ink: rgba(244, 241, 236, 0.28);
  --text:     #231f20;
  --text-2:   #4a4547;
  --text-on-ink:   #f4f1ec;
  --text-2-on-ink: #cfc9c1;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --page: 1280px;
  --t: 120ms;
  --topbar-h: 36px;
}

/* ------------------------------------------------------------- 2. Baseline */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  font-stretch: 100%;
  font-variation-settings: "wdth" 100, "wght" 400;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

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

img {
  height: auto;
}

/* The hidden attribute wins over any layout rule below. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  font-stretch: 88%;
  font-variation-settings: "wdth" 88, "wght" 600;
  text-decoration: none;
}

.skip:focus {
  left: var(--gutter);
  top: 8px;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------- 3. Type */

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink-2);
}

.display {
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  font-weight: 800;
  font-stretch: 112%;
  font-variation-settings: "wdth" 112, "wght" 800;
  line-height: 0.95;
  letter-spacing: -0.015em;
}

h1.page-title,
h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 750;
  font-stretch: 108%;
  font-variation-settings: "wdth" 108, "wght" 750;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.35rem;
  font-weight: 650;
  font-stretch: 104%;
  font-variation-settings: "wdth" 104, "wght" 650;
  line-height: 1.2;
  letter-spacing: 0;
}

p {
  margin: 0 0 1.1em;
  max-width: 62ch;
}

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

.small {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.label {
  font-size: 0.875rem;
  font-weight: 600;
  font-stretch: 88%;
  font-variation-settings: "wdth" 88, "wght" 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-variation-settings: normal;
  font-stretch: normal;
}

.lede {
  font-size: 1.125rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------- 4. Layout */

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

/* Sheet frame: hairline border down both sides of the body content. */
.sheet {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

@media (min-width: 1100px) {
  .sheet {
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
  }
}

.band {
  width: 100%;
}

.band-ink {
  background: var(--ink);
  color: var(--text-on-ink);
}

.band-ink h1,
.band-ink h2,
.band-ink h3 {
  color: var(--text-on-ink);
}

.band-paper2 {
  background: var(--paper-2);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(22px, 3.2vw, 48px);
  align-items: start;
}

.c4 { grid-column: span 4; }
.c5 { grid-column: span 5; }
.c7 { grid-column: span 7; }
.c8 { grid-column: span 8; }

@media (max-width: 820px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .c4, .c5, .c7, .c8 {
    grid-column: 1 / -1;
  }
}

/* Section divider: full width hairline with the three bar mark on the left end. */
.rule {
  position: relative;
  border-top: 1px solid var(--rule);
  height: 0;
}

.rule .bars-wrap {
  position: absolute;
  left: 0;
  top: -11px;
  display: block;
  line-height: 0;
  background: var(--paper);
  padding-right: 12px;
}

.band-paper2 .rule .bars-wrap {
  background: var(--paper-2);
}

.band-ink .rule {
  border-top-color: var(--rule-ink);
}

.band-ink .rule .bars-wrap {
  background: var(--ink);
}

/* -------------------------------------------------------------- 5. Buttons */

.btn {
  display: inline-block;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  font-stretch: 88%;
  font-variation-settings: "wdth" 88, "wght" 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-decoration: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t) ease-out, color var(--t) ease-out,
    border-color var(--t) ease-out;
}

.btn-primary {
  background: var(--orange);
  color: var(--ink);
  border-color: var(--ink);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--ink);
  color: var(--text-on-ink);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--ink);
  color: var(--text-on-ink);
}

.band-ink .btn-secondary {
  border-color: var(--paper);
  color: var(--text-on-ink);
}

.band-ink .btn-secondary:hover,
.band-ink .btn-secondary:focus-visible {
  background: var(--paper);
  color: var(--ink);
}

.band-ink .btn-primary {
  border-color: var(--orange);
}

.band-ink .btn-primary:hover,
.band-ink .btn-primary:focus-visible {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* Text link with the hover underline. */
.tlink {
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  font-weight: 600;
  font-stretch: 88%;
  font-variation-settings: "wdth" 88, "wght" 600;
  font-size: 0.9375rem;
  transition: text-decoration-color var(--t) ease-out;
}

.tlink:hover,
.tlink:focus-visible {
  text-decoration-color: var(--ink);
}

/* --------------------------------------------------------------- 6. Header */

/* Utility line above the header: credentials, area, email. */
.topbar {
  background: var(--ink);
  color: var(--text-2-on-ink);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.topbar-inner {
  max-width: var(--page);
  margin: 0 auto;
  height: var(--topbar-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 8px 28px;
}

.topbar-phone {
  flex: none;
  margin-left: auto;
  color: var(--text-on-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rule-ink);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t) ease-out;
}

.topbar-phone .mono {
  font-size: 0.875rem;
  font-weight: 500;
}

.topbar-phone:hover,
.topbar-phone:focus-visible {
  text-decoration-color: var(--orange);
}

/* Phones and tablets: the call line stays pinned above the header. */
@media (max-width: 1040px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 51;
  }

  .topbar + .hdr {
    top: var(--topbar-h);
  }
}

@media (max-width: 520px) {
  :root {
    --topbar-h: 44px;
  }

  .topbar-inner > span {
    display: none;
  }

  .topbar-phone {
    margin: 0 auto;
    padding: 12px 0;
    font-size: 0.9375rem;
  }

  .topbar-phone .mono {
    font-size: 1rem;
  }
}

.btn-sm {
  padding: 10px 16px;
  font-size: 0.875rem;
}

.hdr-cta {
  flex: none;
  margin-left: 8px;
}

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.hdr-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: var(--gutter);
  height: 72px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.hdr-logo {
  display: block;
  line-height: 0;
  flex: none;
}

.nav {
  margin-left: auto;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 6px 0;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 550;
  font-stretch: 96%;
  font-variation-settings: "wdth" 96, "wght" 550;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: text-decoration-color var(--t) ease-out;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.nav-link:hover {
  text-decoration-color: var(--ink);
}

.nav-link[aria-current="page"],
.nav-link.is-current {
  text-decoration-color: var(--orange);
}

/* Chevron drawn with borders, not an icon font. */
.chev {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t) ease-out;
}

.nav-trigger[aria-expanded="true"] .chev {
  transform: translateY(1px) rotate(-135deg);
}

.menu-btn {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color var(--t) ease-out;
}

.menu-btn:hover {
  text-decoration-color: var(--ink);
}

/* Services dropdown, set like a panel schedule. */
.dropdown {
  position: absolute;
  top: 100%;
  left: -16px;
  margin-top: 12px;
  width: 360px;
  background: var(--paper);
  border: 1px solid var(--ink);
  z-index: 60;
}

/* Bridge across the gap between trigger and panel, so the pointer never
   leaves the wrapper on its way down. Transparent, no hit-testing gap. */
.dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

.ps-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 13px 16px;
  text-decoration: none;
  color: var(--text);
  border-top: 1px solid var(--rule);
  transition: background-color var(--t) ease-out;
}

.ps-row:first-child {
  border-top: 0;
}

.ps-row:hover,
.ps-row:focus-visible {
  background: var(--paper-2);
}

.ps-desc {
  color: var(--text-2);
}

@media (max-width: 1040px) {
  .menu-btn {
    display: inline-block;
    margin-left: auto;
  }

  .nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    margin: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }

  .nav.is-open {
    display: block;
  }

  .nav-list {
    display: block;
    padding: 6px var(--gutter) 18px;
  }

  .nav-list > li {
    border-top: 1px solid var(--rule);
  }

  .nav-list > li:first-child {
    border-top: 0;
  }

  .nav-link {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 15px 0;
  }

  .dropdown {
    position: static;
    width: auto;
    margin-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: none;
    margin-bottom: 8px;
  }

  .dropdown::before {
    content: none;
  }
}

/* ----------------------------------------------------------------- 7. Hero */

.hero {
  padding-block: clamp(48px, 7vw, 96px) clamp(52px, 8vw, 104px);
}

/* Photo behind an ink band. The scrim is a flat-to-lighter ink wash so the
   headline side always reads; it is a legibility layer, not decoration. */
.has-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.band-photo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 8%;
  filter: brightness(1.08);
}

/* Desktop: the photo runs a little wider than the band, anchored left, so
   the lit fixture lands to the right of the headline instead of under it. */
@media (min-width: 1041px) {
  .band-photo img {
    width: 118%;
    object-position: 0% 8%;
  }
}

.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(35, 31, 32, 0.86) 0%, rgba(35, 31, 32, 0.76) 46%, rgba(35, 31, 32, 0.3) 62%, rgba(35, 31, 32, 0.12) 100%);
}

/* A soft dark shadow (not a glow) keeps the headline crisp where the
   scrim thins out over bright parts of the photo. */
.has-photo .c7 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.has-photo .c7 > p {
  color: var(--text-on-ink);
}

/* Up to small laptops the text runs wide over the photo, so the scrim is
   flat. 0.70 keeps white text above 5.3:1 even over the lit fixture. */
@media (max-width: 1040px) {
  .has-photo::before {
    background: rgba(35, 31, 32, 0.7);
  }
}

.hero p {
  color: var(--text-2-on-ink);
  margin-top: 26px;
  max-width: 52ch;
}

.hero .display {
  max-width: 16ch;
  font-size: clamp(2.1rem, 4.8vw, 4.3rem);
}

/* Short keyword list under the hero line: plain words split by hairlines.
   Pulled left by one separator and clipped, so no line starts with a rule. */
.keywords {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  margin: 24px 0 0 -15px;
  padding: 0;
  max-width: 35rem;
  clip-path: inset(0 0 0 15px);
}

.keywords li {
  padding: 0 14px;
  border-left: 1px solid var(--rule-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  font-stretch: 88%;
  font-variation-settings: "wdth" 88, "wght" 600;
  line-height: 1.3;
  color: var(--text-on-ink);
}

.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

@media (max-width: 420px) {
  .field-pair {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------- 8. Home sections */

.s-takeon {
  padding-block: clamp(44px, 5.5vw, 76px) clamp(40px, 5vw, 68px);
}

.s-takeon h2 {
  margin-bottom: 26px;
}

.jobrow {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(22px, 3.2vw, 48px);
  padding: 24px 12px 24px 0;
  border-top: 1px solid var(--rule);
  transition: background-color var(--t) ease-out;
}

.jobrow:last-of-type {
  border-bottom: 1px solid var(--rule);
}

.jobrow:hover {
  background: var(--paper-2);
}

.jobrow > h3 {
  grid-column: span 4;
}

.jobrow > div {
  grid-column: span 8;
}

.jobrow p {
  margin-bottom: 14px;
}

@media (max-width: 820px) {
  .jobrow {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .jobrow > h3,
  .jobrow > div {
    grid-column: 1 / -1;
  }
}

/* Quote bar directly under the hero: title on the left, one row of
   fields on the right. Stacks on small screens. */
.quickbar {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding-block: 28px 24px;
}

.quickbar-inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 18px clamp(22px, 3.2vw, 48px);
  align-items: start;
}

.quickbar-head {
  padding-top: 22px;
}

.quickbar-head h2 {
  font-size: 1.5rem;
}

.quickbar-head p {
  margin-top: 6px;
  color: var(--text-2);
}

/* Two thin rows: name, phone, job; then notes with the send button. */
.quickbar-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 14px;
  align-items: end;
}

.quickbar-form .field {
  margin-bottom: 0;
}

.quickbar-form .field input,
.quickbar-form .field select,
.quickbar-form .field textarea {
  height: 46px;
  padding: 11px 12px;
}

.quickbar-form .field-notes {
  grid-column: 1 / 3;
}

.quickbar-form .field-notes textarea {
  min-height: 46px;
  padding-block: 10px;
  resize: vertical;
  line-height: 1.4;
}

.quickbar-form .field-notes textarea::placeholder {
  color: var(--text-2);
  opacity: 0.75;
}

.quickbar-form .btn {
  height: 46px;
  padding-block: 0;
}

.quickbar-form .form-error,
.quickbar-form .form-privacy {
  grid-column: 1 / -1;
}

.quickbar-form .form-error {
  margin: 0;
}

.quickbar-form .form-privacy {
  margin-top: -4px;
}

.quickbar .confirm {
  grid-column: 2;
}

@media (max-width: 1040px) {
  .quickbar-inner {
    grid-template-columns: 1fr;
  }

  .quickbar-head {
    padding-top: 0;
  }

  .quickbar .confirm {
    grid-column: 1;
  }
}

@media (max-width: 640px) {
  .quickbar-form {
    grid-template-columns: 1fr;
  }

  .quickbar-form .field-notes {
    grid-column: auto;
  }

  .quickbar-form .field-notes textarea {
    height: auto;
    min-height: 84px;
  }

  .quickbar-form .btn {
    width: 100%;
  }
}

/* Service rows with a photo on the right. */
.jobrow--photo {
  align-items: center;
  padding-block: 20px;
}

.jobrow--photo > h3 {
  grid-column: span 3;
}

.jobrow--photo > div {
  grid-column: span 5;
}

.jobrow-photo {
  grid-column: span 4;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--ink);
}

.jobrow-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 820px) {
  .jobrow--photo > h3,
  .jobrow--photo > div,
  .jobrow-photo {
    grid-column: 1 / -1;
  }

  .jobrow-photo {
    order: -1;
  }
}

/* Questions and answers: a ruled two-column schedule, all answers visible. */
.s-faq {
  padding-block: clamp(52px, 6.5vw, 88px) clamp(48px, 6vw, 80px);
}

.s-faq--page {
  padding-top: 0;
}

.qa-list {
  margin: 0;
  border-bottom: 1px solid var(--rule);
}

.qa {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px clamp(22px, 3.2vw, 48px);
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}

.qa dt {
  grid-column: span 5;
  font-weight: 650;
  font-stretch: 100%;
  font-variation-settings: "wdth" 100, "wght" 650;
  color: var(--ink-2);
}

.qa dd {
  grid-column: span 7;
  margin: 0;
  max-width: 58ch;
  color: var(--text-2);
}

@media (max-width: 820px) {
  .qa dt,
  .qa dd {
    grid-column: 1 / -1;
  }
}

/* Town list: one line of names split by light slashes. */
.s-towns {
  padding-block: clamp(44px, 5.5vw, 72px) clamp(52px, 6.5vw, 84px);
}

.towns {
  margin: 18px 0 22px;
  max-width: none;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 600;
  font-stretch: 96%;
  font-variation-settings: "wdth" 96, "wght" 600;
  line-height: 1.6;
  color: var(--ink-2);
}

.towns span {
  margin: 0 0.2em;
  color: var(--orange);
  font-weight: 400;
}

/* --------------------------------------------------------- 9. Contact strip */

.strip {
  padding-block: clamp(40px, 5vw, 64px);
}

.strip .grid {
  align-items: center;
}

.strip h2 {
  max-width: 20ch;
}

.strip p {
  margin: 16px 0 0;
}

.strip .btn-row {
  margin-top: 0;
  justify-content: flex-start;
}

@media (min-width: 821px) {
  .strip .btn-row {
    justify-content: flex-end;
  }
}

/* ------------------------------------------------------- 10. Service pages */

.intro {
  padding-block: clamp(44px, 6vw, 80px) clamp(44px, 6vw, 76px);
}

.intro .grid {
  align-items: center;
}

/* Service page photo: framed like a detail on the sheet, a hairline
   outline set off from the image. */
.intro-photo {
  margin: 12px 12px 12px 0;
  aspect-ratio: 4 / 3;
  outline: 1px solid var(--rule-ink);
  outline-offset: 10px;
}

.intro-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Subject sits left of centre in the About photo. */
.intro-photo--left img {
  object-position: 40% 50%;
}

@media (max-width: 820px) {
  .intro-photo {
    margin-top: 16px;
  }
}

.intro h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  font-weight: 800;
  font-stretch: 112%;
  font-variation-settings: "wdth" 112, "wght" 800;
  line-height: 0.95;
  letter-spacing: -0.015em;
}

.intro p {
  margin-top: 22px;
  color: var(--text-2-on-ink);
  max-width: 56ch;
}

.s-typical {
  padding-block: clamp(46px, 5.8vw, 78px) clamp(42px, 5.2vw, 70px);
}

.s-typical h2 {
  margin-bottom: 28px;
}

.deflist {
  margin: 0;
}

@media (min-width: 821px) {
  .deflist {
    column-count: 2;
    column-gap: clamp(32px, 4vw, 64px);
    column-rule: 1px solid var(--rule);
  }
}

.deflist > div {
  break-inside: avoid;
  padding-bottom: 24px;
}

.deflist dt {
  margin-bottom: 7px;
}

.dterm {
  font-size: 1.35rem;
  font-weight: 650;
  font-stretch: 104%;
  font-variation-settings: "wdth" 104, "wght" 650;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink-2);
}

.deflist dd {
  margin: 0;
  color: var(--text-2);
  max-width: 44ch;
}

.s-goodtoknow {
  padding-block: clamp(40px, 5vw, 66px) clamp(46px, 5.6vw, 76px);
}

.s-goodtoknow h2 {
  margin-bottom: 20px;
}

.s-goodtoknow .grid {
  align-items: start;
}

/* -------------------------------------------------------- 11. Contact page */

.s-contact-head {
  padding-block: clamp(44px, 5.5vw, 76px) clamp(28px, 3.4vw, 44px);
}

.s-contact-head p {
  margin-top: 20px;
}

.s-contact-body {
  padding-block: clamp(32px, 3.8vw, 48px) clamp(52px, 6.5vw, 88px);
}

.details {
  background: var(--ink);
  color: var(--text-on-ink);
  padding: clamp(26px, 3vw, 38px);
}

.details dl {
  margin: 0;
}

.details dt {
  color: var(--text-2-on-ink);
  margin-bottom: 5px;
}

.details dd {
  margin: 0 0 22px;
  color: var(--text-on-ink);
  overflow-wrap: anywhere;
}

.details dd:last-child {
  margin-bottom: 0;
}

.details a {
  color: var(--text-on-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t) ease-out;
}

.details a:hover,
.details a:focus-visible {
  text-decoration-color: var(--paper);
}

.details :focus-visible {
  outline-color: var(--orange);
}

/* ---------------------------------------------------------------- 12. Form */

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  margin-bottom: 7px;
}

.req {
  color: var(--text-2);
  font-weight: 400;
  font-stretch: 100%;
  font-variation-settings: "wdth" 100, "wght" 400;
}

.field input,
.field textarea,
.field select {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: outline-color var(--t) ease-out;
}

.field textarea {
  min-height: 132px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 2px solid var(--orange);
  outline-offset: 0;
}

.select-wrap {
  position: relative;
  display: block;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
}

.select-wrap::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  pointer-events: none;
}

.form-note {
  margin-top: 26px;
}

/* Honeypot field: off screen for people, still filled in by bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  border: 1px solid var(--ink);
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--paper-2);
  color: var(--text);
}

.form-error a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--orange);
}

.confirm {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--ink);
  padding: 20px;
  background: var(--paper-2);
}

.confirm[hidden] {
  display: none;
}

/* A breaker drawn in CSS. It rests in the ON position; the motion layer
   below flips it up from OFF when the confirmation appears. */
.breaker {
  position: relative;
  flex: none;
  width: 22px;
  height: 36px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}

.breaker-handle {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  height: 13px;
  background: var(--orange);
  border: 1px solid var(--ink);
}

.form-privacy {
  margin: 12px 0 0;
  color: var(--text-2);
}

.form-privacy a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 3px;
}

/* Quote form at the foot of each service page. */
.svc-quote {
  padding-block: clamp(44px, 5.5vw, 76px);
  border-top: 1px solid var(--rule);
}

.svc-quote h2 {
  margin-bottom: 16px;
}

.svc-quote .c5 p {
  color: var(--text-2);
}

.svc-quote .btn-primary {
  margin-top: 6px;
}

/* --------------------------------------------------------- 13. Title block */

.titleblock {
  background: var(--ink);
  color: var(--text-on-ink);
  padding-block: clamp(30px, 4vw, 48px) clamp(24px, 3vw, 34px);
}

.tb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule-ink);
}

.tb-cell {
  padding: 16px 18px;
  border-right: 1px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule-ink);
}

.tb-cell:nth-child(3n) {
  border-right: 0;
}

.tb-cell:nth-child(n + 4) {
  border-bottom: 0;
}

.tb-cap {
  display: block;
  font-size: 12px;
  font-weight: 600;
  font-stretch: 88%;
  font-variation-settings: "wdth" 88, "wght" 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--text-2-on-ink);
  margin-bottom: 10px;
}

.tb-val {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-on-ink);
  font-variation-settings: normal;
  font-stretch: normal;
}

.tb-val + .tb-val {
  color: var(--text-2-on-ink);
}

.tb-val a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--rule-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t) ease-out;
}

.tb-val a:hover,
.tb-val a:focus-visible {
  text-decoration-color: var(--orange);
}

.tb-company {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tb-company svg {
  flex: none;
}

.tb-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 16px;
  color: var(--text-2-on-ink);
}

.tb-foot a {
  color: var(--text-2-on-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--rule-ink);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t) ease-out, color var(--t) ease-out;
}

.tb-foot a:hover,
.tb-foot a:focus-visible {
  color: var(--text-on-ink);
  text-decoration-color: var(--orange);
}

@media (max-width: 820px) {
  .tb-grid {
    grid-template-columns: 1fr;
  }

  .tb-cell {
    border-right: 0;
    border-bottom: 1px solid var(--rule-ink);
  }

  .tb-cell:last-child {
    border-bottom: 0;
  }

  .tb-cell:nth-child(n + 4) {
    border-bottom: 1px solid var(--rule-ink);
  }
}

/* ------------------------------------------------- 14. Service area page */

.s-area-head {
  padding-block: clamp(44px, 5.5vw, 76px) clamp(28px, 3.4vw, 44px);
}

.s-area-head p {
  margin-top: 20px;
}

.s-map {
  padding-block: 0 clamp(44px, 5.5vw, 72px);
}

.map {
  height: 520px;
  background: var(--paper-2);
  border: 1px solid var(--ink);
}

/* Shown when JavaScript is off or the county outlines fail to load. */
.map-fallback {
  height: 100%;
  overflow: auto;
  padding: clamp(20px, 3vw, 32px);
}

.map-fallback p {
  color: var(--text-2);
}


.s-cities {
  padding-block: clamp(44px, 5.5vw, 72px) clamp(48px, 6vw, 80px);
}

.s-cities h2 {
  margin-bottom: 24px;
}

.city-list {
  list-style: none;
  margin: 0;
  padding: 0;
  column-width: 12rem;
  column-gap: clamp(24px, 3.2vw, 48px);
  column-rule: 1px solid var(--rule);
}

.city-list li {
  break-inside: avoid;
  padding: 7px 0;
}

@media (max-width: 820px) {
  .map {
    height: 360px;
  }
}

/* Leaflet overrides. Leaflet's own stylesheet is external and exempt from the
   house rules, so everything it sets that breaks them is undone here:
   square corners on every control, and no blue anywhere. */
.leaflet-container {
  background: var(--paper-2);
  font-family: var(--sans);
  font-size: 0.9375rem;
}

/* Tiles sit back into the palette instead of fighting it. */
.leaflet-tile-pane {
  filter: grayscale(1) contrast(0.9) brightness(1.05);
}

.leaflet-bar,
.leaflet-bar a,
.leaflet-control,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border-radius: 0;
}

.leaflet-bar a,
.leaflet-bar a:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.leaflet-bar a:hover {
  background: var(--paper-2);
}

.leaflet-container a {
  color: var(--ink);
}

.leaflet-control-attribution {
  background: rgba(244, 241, 236, 0.88);
  color: var(--text-2);
  font-size: 11px;
}

.leaflet-control-attribution a {
  color: var(--text-2);
}

/* Leaflet injects a small blue and red flag glyph beside its own name. The
   attribution text itself is untouched; only the glyph goes. See DESIGN.md 2. */
.leaflet-attribution-flag {
  display: none !important;
}

.leaflet-container :focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- 15. Preferences */

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

/* ------------------------------------------------------------ 16. Motion
   Three moments, each tied to electricity. Nothing fades in on scroll and
   nothing is hidden while it waits to animate.
   1. Power on: the hero starts pitch black; the photo and everything on
      it show only in four short blips, like a light that won't catch,
      then it comes on and holds. 3s total;
      no one-second window holds more than three flashes (WCAG 2.3.1).
   2. Signal: a small electric arc with a spark at its head runs along
      each divider as it passes through the viewport, crackling between
      three shapes as it travels (scroll-linked; the divider stays plain
      where unsupported).
   3. Breaker: the confirmation's breaker flips from OFF to ON. */
@media (prefers-reduced-motion: no-preference) {
  .has-photo .band-photo img {
    animation: power-on 3s linear 0.2s both;
  }

  /* Same clock as the photo: everything in the hero shows only on a blip. */
  .has-photo .wrap {
    animation: hero-text 3s linear 0.2s both;
  }

  .confirm .breaker-handle {
    animation: breaker-on 420ms cubic-bezier(0.3, 1.6, 0.5, 1) 250ms both;
  }

  @supports (animation-timeline: view()) {
    .rule {
      --wave-w: 220px;
      --arc-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24' viewBox='0 0 160 24'%3E%3Cg fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpolyline points='0,12 6,13.0 13,12.4 17,12.9 21,11.6 25,13.4 30,10.2 37,11.6 42,10.0 49,9.5 53,14.7 57,12.5 64,8.7 69,8.4 74,10.2 79,12.4 85,12.6 90,7.8 95,10.6 99,12.8 104,12.0 111,15.8 118,13.3 125,9.8 130,16.8 135,4.8 141,12.5 147,16.4 152,12' stroke='%23f15a29' stroke-opacity='.22' stroke-width='5'/%3E%3Cpolyline points='0,12 6,13.0 13,12.4 17,12.9 21,11.6 25,13.4 30,10.2 37,11.6 42,10.0 49,9.5 53,14.7 57,12.5 64,8.7 69,8.4 74,10.2 79,12.4 85,12.6 90,7.8 95,10.6 99,12.8 104,12.0 111,15.8 118,13.3 125,9.8 130,16.8 135,4.8 141,12.5 147,16.4 152,12' stroke='%23f15a29' stroke-width='2'/%3E%3Cpolyline points='0,12 6,13.0 13,12.4 17,12.9 21,11.6 25,13.4 30,10.2 37,11.6 42,10.0 49,9.5 53,14.7 57,12.5 64,8.7 69,8.4 74,10.2 79,12.4 85,12.6 90,7.8 95,10.6 99,12.8 104,12.0 111,15.8 118,13.3 125,9.8 130,16.8 135,4.8 141,12.5 147,16.4 152,12' stroke='%23fff7ee' stroke-width='.8'/%3E%3C/g%3E%3Ccircle cx='152' cy='12' r='4.5' fill='%23f15a29' fill-opacity='.25'/%3E%3Ccircle cx='152' cy='12' r='2.4' fill='%23fff7ee' stroke='%23f15a29' stroke-width='1.2'/%3E%3C/svg%3E");
      --arc-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24' viewBox='0 0 160 24'%3E%3Cg fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpolyline points='0,12 6,12.9 10,10.8 16,11.8 22,10.8 27,11.2 31,10.9 38,13.8 42,9.9 49,11.6 56,11.1 60,10.0 64,12.7 69,13.0 75,12.6 81,16.4 87,13.6 93,12.8 100,8.1 107,13.2 114,14.5 119,7.3 124,12.5 129,13.3 133,5.2 137,13.2 143,17.9 149,4.4 152,12' stroke='%23f15a29' stroke-opacity='.22' stroke-width='5'/%3E%3Cpolyline points='0,12 6,12.9 10,10.8 16,11.8 22,10.8 27,11.2 31,10.9 38,13.8 42,9.9 49,11.6 56,11.1 60,10.0 64,12.7 69,13.0 75,12.6 81,16.4 87,13.6 93,12.8 100,8.1 107,13.2 114,14.5 119,7.3 124,12.5 129,13.3 133,5.2 137,13.2 143,17.9 149,4.4 152,12' stroke='%23f15a29' stroke-width='2'/%3E%3Cpolyline points='0,12 6,12.9 10,10.8 16,11.8 22,10.8 27,11.2 31,10.9 38,13.8 42,9.9 49,11.6 56,11.1 60,10.0 64,12.7 69,13.0 75,12.6 81,16.4 87,13.6 93,12.8 100,8.1 107,13.2 114,14.5 119,7.3 124,12.5 129,13.3 133,5.2 137,13.2 143,17.9 149,4.4 152,12' stroke='%23fff7ee' stroke-width='.8'/%3E%3C/g%3E%3Ccircle cx='152' cy='12' r='4.5' fill='%23f15a29' fill-opacity='.25'/%3E%3Ccircle cx='152' cy='12' r='2.4' fill='%23fff7ee' stroke='%23f15a29' stroke-width='1.2'/%3E%3C/svg%3E");
      --arc-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24' viewBox='0 0 160 24'%3E%3Cg fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpolyline points='0,12 7,11.6 12,13.0 19,12.2 25,12.2 32,13.4 36,13.2 40,11.7 45,14.6 51,10.0 55,9.6 59,11.5 65,14.6 70,8.5 76,14.0 81,12.5 85,8.2 90,14.0 95,6.9 101,8.7 105,13.4 110,11.1 114,9.2 119,6.2 123,10.6 130,17.9 135,3.8 140,4.4 147,10.6 152,12' stroke='%23f15a29' stroke-opacity='.22' stroke-width='5'/%3E%3Cpolyline points='0,12 7,11.6 12,13.0 19,12.2 25,12.2 32,13.4 36,13.2 40,11.7 45,14.6 51,10.0 55,9.6 59,11.5 65,14.6 70,8.5 76,14.0 81,12.5 85,8.2 90,14.0 95,6.9 101,8.7 105,13.4 110,11.1 114,9.2 119,6.2 123,10.6 130,17.9 135,3.8 140,4.4 147,10.6 152,12' stroke='%23f15a29' stroke-width='2'/%3E%3Cpolyline points='0,12 7,11.6 12,13.0 19,12.2 25,12.2 32,13.4 36,13.2 40,11.7 45,14.6 51,10.0 55,9.6 59,11.5 65,14.6 70,8.5 76,14.0 81,12.5 85,8.2 90,14.0 95,6.9 101,8.7 105,13.4 110,11.1 114,9.2 119,6.2 123,10.6 130,17.9 135,3.8 140,4.4 147,10.6 152,12' stroke='%23fff7ee' stroke-width='.8'/%3E%3C/g%3E%3Ccircle cx='152' cy='12' r='4.5' fill='%23f15a29' fill-opacity='.25'/%3E%3Ccircle cx='152' cy='12' r='2.4' fill='%23fff7ee' stroke='%23f15a29' stroke-width='1.2'/%3E%3C/svg%3E");
    }

    /* An arc riding the wire: a jagged orange stroke with a white-hot
       core and a spark at its head, thin trail behind. The box travels
       along the divider while the arc swaps between three shapes, so it
       crackles as it moves. Paper fill hides the hairline under it. */
    .rule::after {
      content: "";
      position: absolute;
      top: -16px;
      left: 30px;
      width: var(--wave-w);
      height: 32px;
      background: var(--paper) var(--arc-a) center / 100% 100% no-repeat;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
      mask-image: linear-gradient(90deg, transparent, #000 45%);
      animation: current linear both, arc linear both;
      animation-timeline: view(), view();
      animation-range: entry 60% exit 40%;
    }

    .band-paper2 .rule::after {
      background-color: var(--paper-2);
    }

    @media (max-width: 820px) {
      .rule {
        --wave-w: 132px;
      }
    }
  }
}

@keyframes power-on {
  0%      { filter: brightness(0); }
  16.7%   { filter: brightness(0); }
  16.8%   { filter: brightness(1.08); }
  19.3%   { filter: brightness(1.08); }
  19.4%   { filter: brightness(0); }
  31.7%   { filter: brightness(0); }
  31.8%   { filter: brightness(1.08); }
  34%     { filter: brightness(1.08); }
  34.1%   { filter: brightness(0); }
  50%     { filter: brightness(0); }
  50.1%   { filter: brightness(1.08); }
  56%     { filter: brightness(1.08); }
  56.1%   { filter: brightness(0); }
  70%     { filter: brightness(0); }
  70.1%   { filter: brightness(1.08); }
  72%     { filter: brightness(1.08); }
  72.1%   { filter: brightness(0); }
  83.3%   { filter: brightness(0); }
  83.4%   { filter: brightness(1.08); }
  100%    { filter: brightness(1.08); }
}

@keyframes hero-text {
  0%      { opacity: 0; }
  16.7%   { opacity: 0; }
  16.8%   { opacity: 1; }
  19.3%   { opacity: 1; }
  19.4%   { opacity: 0; }
  31.7%   { opacity: 0; }
  31.8%   { opacity: 1; }
  34%     { opacity: 1; }
  34.1%   { opacity: 0; }
  50%     { opacity: 0; }
  50.1%   { opacity: 1; }
  56%     { opacity: 1; }
  56.1%   { opacity: 0; }
  70%     { opacity: 0; }
  70.1%   { opacity: 1; }
  72%     { opacity: 1; }
  72.1%   { opacity: 0; }
  83.3%   { opacity: 0; }
  83.4%   { opacity: 1; }
  100%    { opacity: 1; }
}

@keyframes current {
  0%   { left: 30px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: calc(100% - var(--wave-w)); opacity: 0; }
}

@keyframes arc {
  0% { background-image: var(--arc-a); }
  3.33% { background-image: var(--arc-b); }
  6.67% { background-image: var(--arc-c); }
  10% { background-image: var(--arc-a); }
  13.33% { background-image: var(--arc-b); }
  16.67% { background-image: var(--arc-c); }
  20% { background-image: var(--arc-a); }
  23.33% { background-image: var(--arc-b); }
  26.67% { background-image: var(--arc-c); }
  30% { background-image: var(--arc-a); }
  33.33% { background-image: var(--arc-b); }
  36.67% { background-image: var(--arc-c); }
  40% { background-image: var(--arc-a); }
  43.33% { background-image: var(--arc-b); }
  46.67% { background-image: var(--arc-c); }
  50% { background-image: var(--arc-a); }
  53.33% { background-image: var(--arc-b); }
  56.67% { background-image: var(--arc-c); }
  60% { background-image: var(--arc-a); }
  63.33% { background-image: var(--arc-b); }
  66.67% { background-image: var(--arc-c); }
  70% { background-image: var(--arc-a); }
  73.33% { background-image: var(--arc-b); }
  76.67% { background-image: var(--arc-c); }
  80% { background-image: var(--arc-a); }
  83.33% { background-image: var(--arc-b); }
  86.67% { background-image: var(--arc-c); }
  90% { background-image: var(--arc-a); }
  93.33% { background-image: var(--arc-b); }
  96.67% { background-image: var(--arc-c); }
  100% { background-image: var(--arc-a); }
}

@keyframes breaker-on {
  0%   { top: 18px; background: var(--paper-2); }
  60%  { background: var(--paper-2); }
  100% { top: 3px; background: var(--orange); }
}