/**
 * LAYOUT — containers, section bands, header/nav, status row, footer,
 * hard grid, diagonal seams. Structural rules only; visual components
 * (buttons, cards, tables) live in components.css.
 */

/* ---- Container ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--wide { max-width: 92rem; }
.container--narrow { max-width: 46rem; }

main { display: block; }
main:focus { outline: none; }

/* ---- Section bands ------------------------------------------------------
   Dark-dominant page: --void is the default ground. --band-light punches
   a deliberate full-bleed concrete section into the rhythm; --band-volt
   is used sparingly for a hard yellow beat (never body text on it). */
.band {
  position: relative;
  padding-block: var(--sp-9);
}
.band--void { background: var(--bg); color: var(--text-on-dark); }
.band--raised { background: var(--bg-raised); color: var(--text-on-dark); }
.band--light { background: var(--concrete); color: var(--text-on-light); }
.band--light-2 { background: var(--concrete-2); color: var(--text-on-light); }
.band--volt { background: var(--volt); color: var(--void); }
.band--alert { background: var(--alert); color: var(--void); }
.band--tight { padding-block: var(--sp-7); }
.band--flush { padding-block: 0; }

/* Diagonal machine-cut seam between two stacked bands. Purely decorative
   (aria-hidden), sits between two <section class="band">, 2-4° angle via
   a short element + clip-path so real content is never clipped. */
.seam {
  height: clamp(22px, 3.2vw, 56px);
  width: 100%;
}
.seam--rise-to-light { background: var(--concrete); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.seam--rise-to-void  { background: var(--bg);       clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.seam--fall-to-light { background: var(--concrete); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.seam--fall-to-void  { background: var(--bg);       clip-path: polygon(0 0, 100% 100%, 0 100%); }
.seam--rise-to-volt  { background: var(--volt);     clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.seam--fall-to-void-from-volt { background: var(--bg); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.seam ~ .band, .band + .seam { margin-block: 0; }

/* ---- Hazard stripe rule -------------------------------------------------
   Thin 45° repeating bar used as a section rule. Sparing: a divider, not
   a fill behind text. */
.hazard-rule {
  height: 10px;
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--volt) 0 14px,
    var(--void) 14px 28px
  );
}
.hazard-rule--thin { height: 6px; }
.hazard-rule--excavation {
  background: repeating-linear-gradient(
    45deg,
    var(--division-accent) 0 14px,
    var(--void) 14px 28px
  );
}

/* ---- Skip-to-content + status row + header ------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}

.status-row {
  background: var(--void-2);
  border-bottom: var(--border-w) solid var(--border-dark);
  font-family: var(--font-mono);
  font-size: var(--size-small);
}
.status-row__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  flex-wrap: wrap;
}
.status-row__now {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--steel);
  flex: none;
}
.status-dot[data-open="true"] { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 25%, transparent); }
.status-dot[data-open="false"] { background: var(--steel); }
@media (prefers-reduced-motion: no-preference) {
  .status-dot[data-open="true"] { animation: pulse-dot 2.2s ease-in-out infinite; }
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 45%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--live) 0%, transparent); }
}
.status-row__links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.status-row a { text-decoration: none; }
.status-row a:hover, .status-row a:focus-visible { text-decoration: underline; }

/* On a phone the full status row wrapped to four lines — 169px of chrome
   before the logo, pushing the hero CTA below the fold. Collapse it to a
   single line. Nothing is lost: the Services number sits in the masthead
   directly below, the Excavation number and the emergency line both appear
   in the footer on every page (and on the emergency band + excavation pages). */
@media (max-width: 47.9375em) {
  .status-row__inner {
    flex-wrap: nowrap;
    gap: var(--sp-2);
    padding-block: var(--sp-1);
  }
  .status-row__now { min-width: 0; }
  .status-row__now > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .status-row__now [data-status-sub] { display: none; }
  .status-row__links { display: none; }
}

.masthead {
  background: var(--void);
  border-bottom: var(--border-w) solid var(--border-dark);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-3);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  flex: none;
}
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__word {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -.01em;
  line-height: 1;
}
.brand__word span { color: var(--volt); }

.primary-nav { flex: 1; }
.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  list-style: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.primary-nav__list > li { position: relative; }
.primary-nav a.nav-link {
  text-decoration: none;
  padding-block: var(--sp-2);
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.primary-nav a.nav-link:hover { color: var(--volt); }
.primary-nav a.nav-link[aria-current="page"] {
  color: var(--volt);
  border-bottom-color: var(--volt);
}

.nav-drop { position: relative; }
.nav-drop > summary.nav-link {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .35em;
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
}
.nav-drop[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
/* Progressive enhancement: if a dropdown contains the current page, tint
   its summary like a normal active nav-link. Unsupported browsers just
   skip this rule — the current page is still marked inside the panel. */
.nav-drop:has(a[aria-current="page"]) > summary.nav-link { color: var(--volt); }
.nav-drop__panel {
  position: absolute;
  top: calc(100% + var(--sp-3));
  left: 50%;
  transform: translateX(-50%);
  min-width: 15rem;
  background: var(--void-2);
  border: var(--border-w) solid var(--border-dark);
  box-shadow: var(--shadow-slab);
  padding: var(--sp-2) 0;
  z-index: var(--z-overlay);
}
.nav-drop__panel a {
  display: block;
  padding: var(--sp-2) var(--sp-4);
  text-decoration: none;
  white-space: nowrap;
}
.nav-drop__panel a:hover, .nav-drop__panel a:focus-visible { background: var(--void-3); color: var(--volt); }
.nav-drop__panel .nav-drop__all {
  border-top: var(--border-w) solid var(--border-dark);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  color: var(--volt);
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
}
.masthead__phone {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}
.masthead__phone:hover { color: var(--volt); }

.nav-toggle {
  display: none;
  background: transparent;
  border: var(--border-w) solid var(--border-dark);
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  flex: none;
}
.nav-toggle__bars {
  position: relative;
  width: 20px; height: 14px;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--concrete);
  transition: transform var(--dur-snap) linear, opacity var(--dur-snap) linear;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav: default = normal flow (works with JS off). Enhanced JS
   collapses it behind the toggle; see nav.js + scripts/nav.js comments. */
@media (max-width: 63.9375rem) {
  .nav-toggle { display: inline-flex; }
  .primary-nav { flex-basis: 100%; order: 3; }
  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 0.85rem;
    border-top: var(--border-w) solid var(--border-dark);
  }
  .primary-nav__list > li { border-bottom: var(--border-w) solid var(--border-dark); }
  .primary-nav a.nav-link, .nav-drop > summary.nav-link { padding: var(--sp-4) var(--sp-1); width: 100%; }
  .nav-drop__panel {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-top: var(--border-w) dashed var(--border-dark);
    background: var(--void);
  }
  .masthead__inner { flex-wrap: wrap; }
  .masthead__phone-label { display: none; }
  .js .primary-nav { display: none; }
  .js .primary-nav.is-open { display: block; }
}
@media (min-width: 64rem) {
  .nav-drop__panel:not(:hover):not(:focus-within) { display: none; }
  .nav-drop[open] .nav-drop__panel { display: block; }
}

/* ---- Emergency strip (persistent-feeling, appears in status row context) --- */
.emergency-strip {
  background: var(--alert);
  color: var(--void);
  border-top: 4px solid var(--void);
}
.emergency-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 0.8rem;
  text-align: center;
  flex-wrap: wrap;
}
.emergency-strip a { color: var(--void); text-decoration: underline; text-underline-offset: .2em; }

/* ---- Hero -------------------------------------------------------------- */
.hero {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
  padding-block: var(--sp-9);
}
@media (min-width: 60rem) {
  .hero { grid-template-columns: 1.15fr 1fr; padding-block: var(--sp-10); }
}
.hero__art { position: relative; }
.hero__art svg { width: 100%; height: auto; }

/* ---- Hard grid ----------------------------------------------------------
   Cards butt directly against each other: no gap, gridlines drawn via
   shared borders instead of `gap`, so it reads like a parts catalog. */
.hard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  border-top: var(--border-w) solid var(--grid-line);
  border-left: var(--border-w) solid var(--grid-line);
}
.hard-grid > * {
  border-right: var(--border-w) solid var(--grid-line);
  border-bottom: var(--border-w) solid var(--grid-line);
}
.hard-grid--2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.hard-grid--3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.hard-grid--4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* generic responsive grid WITH gaps, for layouts that aren't the catalog grid */
.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid--sidebar { grid-template-columns: 1fr; }
@media (min-width: 60rem) {
  .grid--sidebar { grid-template-columns: 2fr 1fr; align-items: start; }
}

.stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.stack--tight { gap: var(--sp-3); }
.stack--loose { gap: var(--sp-7); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }

/* ---- Footer -------------------------------------------------------------- */
.site-foot { background: var(--void); border-top: var(--border-w) solid var(--border-dark); }
.site-foot__top {
  display: grid;
  gap: var(--sp-8);
  padding-block: var(--sp-9);
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .site-foot__top { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
.site-foot__brand { display: flex; flex-direction: column; gap: var(--sp-4); }
.site-foot h2, .site-foot h3 { font-size: 1rem; }
.site-foot__bottom {
  border-top: var(--border-w) solid var(--border-dark);
  padding-block: var(--sp-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--steel);
}
.site-foot__bottom a { color: var(--steel); }
.site-foot__bottom a:hover { color: var(--volt); }
.foot-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.foot-list a { text-decoration: none; color: var(--text-on-dark); }
.foot-list a:hover { color: var(--volt); }

/* ---- Marquee / ticker ------------------------------------------------------ */
.marquee {
  background: var(--volt);
  color: var(--void);
  overflow: hidden;
  border-block: 4px solid var(--void);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}
.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}
.marquee__item {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 0.9rem;
  padding-block: var(--sp-3);
  padding-inline: var(--sp-5);
  white-space: nowrap;
}
.marquee__sep { opacity: .5; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow: visible; }
  .marquee__track {
    animation: none;
    width: 100%;
  }
  .marquee__group {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .marquee__group:nth-child(2) { display: none; }
  .marquee__item { white-space: normal; }
}

/* ---- Breadcrumbs ------------------------------------------------------------ */
.breadcrumbs {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-block: var(--sp-4);
  color: var(--steel);
}
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; }
.breadcrumbs a { color: var(--steel); text-decoration: none; }
.breadcrumbs a:hover { color: var(--volt); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: var(--sp-2); opacity: .5; }
.breadcrumbs [aria-current="page"] { color: var(--text-on-dark); }

@media (min-width: 40rem) {
  .site-head :is(.masthead__phone-label) { display: inline; }
}

/* ---- content-visibility for long lists ---------------------------------- */
.long-list { content-visibility: auto; contain-intrinsic-size: 800px; }