/* ==========================================================================
   Tumwater Drilling & Pump — site styles
   Design plan: design-plan.md
   Red means act. Blue means water. Nothing else is colored.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Palette — 6 tokens, per design-plan.md */
  --ground-950: #0e2036;
  --basalt-700: #2c3a45;
  --granite-400: #8a9099;
  --aquifer-500: #1c39ec;
  --rig-600: #b42318;
  --silt-50: #eef0f0;

  /* Derived — strata bands and interaction states only.
     Bands step progressively darker so the section reads as depth. */
  --topsoil: #27455f;
  --clay: #1a3048;
  --bedrock: #0b1a2c;
  --aquifer-deep: #142ab0;
  --rig-700: #8f1c13;
  --aquifer-600: #162eb8;
  --rule: #d4d8d9;
  --rule-dark: #2a3f57;
  --white: #ffffff;

  /* Spacing — one scale, used everywhere */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;
  --s10: 8rem;

  /* Type scale */
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.1875rem;
  --t-xl: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  --t-2xl: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  --t-3xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  --t-4xl: clamp(2.5rem, 1.55rem + 4.1vw, 4.75rem);

  --measure: 68ch;
  --shell: 78rem;

  /* Layered, color-tinted shadows — never a flat grey */
  --lift-1: 0 1px 2px rgba(14, 32, 54, 0.06), 0 2px 8px rgba(14, 32, 54, 0.05);
  --lift-2: 0 2px 4px rgba(14, 32, 54, 0.07), 0 8px 24px rgba(14, 32, 54, 0.08);
  --lift-3: 0 4px 8px rgba(14, 32, 54, 0.09), 0 18px 48px rgba(14, 32, 54, 0.12);

  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- Reset ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--silt-50);
  color: var(--basalt-700);
  font-family: 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4 {
  font-family: 'Archivo', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  color: var(--ground-950);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  max-width: var(--measure);
}

a {
  color: var(--aquifer-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--aquifer-600);
}

:focus-visible {
  outline: 3px solid var(--aquifer-500);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Tabular figures everywhere numbers carry meaning */
.num,
.depth-scale,
.tel {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- Layout --------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s5);
}

.section {
  padding-block: var(--s9);
  border-top: 1px solid var(--rule);
}

.section--flush {
  border-top: 0;
}

.section--dark {
  background: var(--ground-950);
  color: #c6cfd8;
  border-top: 0;
}

.section--dark h2,
.section--dark h3 {
  color: var(--white);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--ground-950);
  padding: var(--s3) var(--s5);
  z-index: 100;
  font-weight: 600;
}

.skip:focus {
  left: var(--s4);
  top: var(--s4);
}

/* --- Header --------------------------------------------------------------- */

.utility {
  background: var(--ground-950);
  color: #9fb0c2;
  font-size: var(--t-xs);
}

.utility__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s2);
}

.utility a {
  color: #c6d4e2;
  text-decoration: none;
}

.utility a:hover {
  color: var(--white);
  text-decoration: underline;
}

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

.masthead__row {
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding-block: var(--s3);
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.brand img {
  width: 172px;
  height: auto;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.nav__list {
  display: flex;
  gap: var(--s5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: -0.01em;
  color: var(--ground-950);
  text-decoration: none;
  padding-block: var(--s2);
  border-bottom: 2px solid transparent;
  transition: border-color 160ms var(--ease-spring), color 160ms var(--ease-spring);
}

.nav__link:hover {
  color: var(--aquifer-500);
  border-bottom-color: var(--aquifer-500);
}

.nav__link[aria-current='page'] {
  border-bottom-color: var(--ground-950);
}

.nav__toggle {
  display: none;
  margin-left: auto;
  background: var(--white);
  border: 1px solid var(--rule);
  color: var(--ground-950);
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--t-sm);
  padding: var(--s2) var(--s3);
  cursor: pointer;
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--t-base);
  letter-spacing: -0.01em;
  padding: var(--s3) var(--s5);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-spring), background-color 160ms var(--ease-spring),
    border-color 160ms var(--ease-spring), color 160ms var(--ease-spring);
}

/* Red is reserved for action. */
.btn--call {
  background: var(--rig-600);
  color: var(--white);
  box-shadow: var(--lift-2);
}

.btn--call:hover {
  background: var(--rig-700);
  color: var(--white);
  transform: translateY(-1px);
}

.btn--call:active {
  transform: translateY(0);
}

.btn--ghost {
  border-color: currentColor;
  color: var(--ground-950);
  background: transparent;
}

.btn--ghost:hover {
  background: var(--ground-950);
  color: var(--white);
  transform: translateY(-1px);
}

.btn--ghost:active {
  transform: translateY(0);
}

.btn--on-dark {
  color: var(--white);
}

.btn--on-dark:hover {
  background: var(--white);
  color: var(--ground-950);
}

.btn--sm {
  font-size: var(--t-sm);
  padding: var(--s2) var(--s4);
}

/* --- Hero: the well-log cross-section ------------------------------------- */

.hero {
  position: relative;
  background: var(--ground-950);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  --aquifer-h: clamp(96px, 13vh, 150px);
}

.hero__bg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 0;
}

.hero__band {
  position: relative;
  flex: var(--band-grow, 1);
}

.hero__band::after {
  /* Strata boundaries read as deposition lines, not borders */
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}

.hero__band--topsoil {
  background: linear-gradient(180deg, #2e4e6b 0%, var(--topsoil) 100%);
  --band-grow: 34;
}

.hero__band--clay {
  background: var(--clay);
  --band-grow: 20;
}

/* Fractured basalt: fine horizontal striation, the way it logs */
.hero__band--basalt {
  background: var(--bedrock);
  --band-grow: 26;
}

.hero__band--basalt::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image: repeating-linear-gradient(
      177deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 13px
    ),
    repeating-linear-gradient(183deg, rgba(0, 0, 0, 0.3) 0 2px, transparent 2px 21px);
}

/* Water-bearing sand: speckle, and the water it holds.
   Fixed height, so hero content can reliably clear it at any viewport. */
.hero__band--aquifer {
  background: linear-gradient(180deg, var(--aquifer-deep) 0%, var(--aquifer-500) 100%);
  flex: 0 0 var(--aquifer-h);
}

.hero__band--aquifer::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image: radial-gradient(rgba(255, 255, 255, 0.5) 0.7px, transparent 0.8px),
    radial-gradient(rgba(0, 0, 0, 0.35) 0.7px, transparent 0.8px);
  background-size: 13px 13px, 19px 19px;
  background-position: 0 0, 7px 9px;
}

/* Grain: geology, not texture for its own sake. Hero ground only. */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.38;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Depth scale — the left rail */
.depth-scale {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
}

/* The depth axis, tying the marks into one column like a real log */
.depth-scale::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 50%;
  /* Tracks the shell edge, and the viewport edge once it is narrower */
  margin-left: max(
    calc(var(--shell) / -2 + var(--s5) + 4.5rem),
    calc(-50vw + var(--s5) + 4.5rem)
  );
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0,
    rgba(255, 255, 255, 0.16) 12%,
    rgba(255, 255, 255, 0.16) 88%,
    transparent 100%
  );
}

/* Depth marks sit in a left gutter; the log runs to their right */
.depth-mark {
  position: absolute;
  top: var(--at);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--shell);
  padding-left: var(--s5);
  padding-right: 7rem; /* clears the drill pipe */
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.depth-mark__label {
  flex: 0 0 auto;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--t-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.01em;
  min-width: 4.5rem;
}

.depth-mark__rule {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.depth-mark__rock {
  flex: 0 0 auto;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.58);
  font-style: italic;
}

/* Drill pipe */
.hero__pipe {
  position: absolute;
  top: 0;
  bottom: 16%;
  right: 13%;
  width: 16px;
  z-index: 2;
  /* Steel round-stock shading, plus the joints between pipe sections */
  background-image: repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.42) 0 3px,
      transparent 3px 82px
    ),
    linear-gradient(90deg, #35455a 0%, #7f92a6 34%, #b6c5d2 46%, #728496 62%, #2b394b 100%);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.hero__bit {
  position: absolute;
  bottom: -26px;
  left: 50%;
  width: 38px;
  height: 30px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #4d5f73 0%, #b6c5d2 48%, #56687c 100%);
  clip-path: polygon(0 0, 100% 0, 100% 34%, 74% 74%, 50% 100%, 26% 74%, 0 34%);
}

.hero__content {
  position: relative;
  z-index: 3;
  /* Bottom padding clears the water band so CTAs never sit on it */
  padding-block: var(--s10) calc(var(--aquifer-h) + var(--s8));
  /* Clear the depth gutter so labels never collide with the headline */
  padding-left: calc(var(--s5) + 6.5rem);
}

.hero h1 {
  color: var(--white);
  font-size: var(--t-4xl);
  font-stretch: 112%;
  max-width: 15ch;
  margin-bottom: var(--s5);
}

.hero__sub {
  font-size: var(--t-lg);
  color: #b9c7d6;
  max-width: 46ch;
  margin-bottom: var(--s7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

/* One orchestrated moment: the water finds its level. */
@media (prefers-reduced-motion: no-preference) {
  .hero__band--aquifer {
    transform-origin: bottom;
    animation: rise 1100ms var(--ease-spring) 180ms both;
  }
}

@keyframes rise {
  from {
    transform: scaleY(0.2);
    opacity: 0.4;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* --- Facts bar ------------------------------------------------------------ */

.facts {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.facts__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  list-style: none;
  margin: 0;
  padding: var(--s5) 0;
  font-size: var(--t-xs);
  color: var(--basalt-700);
}

.facts__list strong {
  font-family: 'Archivo', system-ui, sans-serif;
  color: var(--ground-950);
  font-weight: 700;
}

/* --- Section headings ----------------------------------------------------- */

.section__head {
  margin-bottom: var(--s7);
}

.section__head h2 {
  font-size: var(--t-2xl);
  margin-bottom: var(--s3);
}

.section__head p {
  font-size: var(--t-lg);
  color: var(--basalt-700);
}

.lede {
  font-size: var(--t-lg);
}

/* --- Service rows (not cards) --------------------------------------------- */

.services {
  border-top: 1px solid var(--rule);
}

.service-row {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) auto;
  gap: var(--s5) var(--s7);
  align-items: baseline;
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background-color 160ms var(--ease-spring);
}

.service-row:hover {
  background: var(--white);
  color: inherit;
}

.service-row:hover .service-row__title {
  color: var(--aquifer-500);
}

.service-row__title {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ground-950);
  line-height: 1.15;
  transition: color 160ms var(--ease-spring);
}

.service-row__desc {
  color: var(--basalt-700);
  margin: 0;
}

.service-row__go {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--aquifer-500);
  white-space: nowrap;
}

/* --- Rig / feature split -------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--s8);
  align-items: start;
}

.rig-list {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s5);
}

.rig-list li {
  padding-left: var(--s5);
  border-left: 3px solid var(--aquifer-500);
}

.rig-list strong {
  display: block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--t-lg);
  color: var(--ground-950);
  letter-spacing: -0.02em;
}

.section--dark .rig-list strong {
  color: var(--white);
}

/* Photos: gradient overlay + color treatment layer */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--ground-950);
}

.photo img {
  width: 100%;
  display: block;
}

/* Weighted to the bottom, where the caption sits — the image stays readable */
.photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.16) 42%,
    rgba(0, 0, 0, 0) 72%
  );
  pointer-events: none;
}

.photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--aquifer-500);
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.photo__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--s5);
  color: var(--white);
  font-size: var(--t-sm);
}

/* --- Process: genuinely a sequence, so it is numbered --------------------- */

.process {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
  gap: var(--s5);
}

.process li {
  counter-increment: step;
  padding-top: var(--s4);
  border-top: 2px solid var(--ground-950);
}

.process li::before {
  content: counter(step);
  display: block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--aquifer-500);
  line-height: 1;
  margin-bottom: var(--s2);
}

.process strong {
  display: block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--t-lg);
  color: var(--ground-950);
  letter-spacing: -0.02em;
  margin-bottom: var(--s1);
}

.process p {
  font-size: var(--t-sm);
  margin: 0;
}

/* --- Counties ------------------------------------------------------------- */

.counties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--s6);
}

.county {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-top: var(--s4);
  border-top: 2px solid var(--ground-950);
  transition: border-color 160ms var(--ease-spring);
}

.county:hover {
  color: inherit;
  border-top-color: var(--aquifer-500);
}

.county h3 {
  font-size: var(--t-lg);
  margin-bottom: var(--s2);
}

.county:hover h3 {
  color: var(--aquifer-500);
}

.county p {
  font-size: var(--t-sm);
  color: var(--basalt-700);
  margin: 0;
}

.town-list {
  columns: 3 14rem;
  column-gap: var(--s7);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-sm);
}

.town-list li {
  padding-block: 2px;
  break-inside: avoid;
}

/* --- Testimonials --------------------------------------------------------- */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--s8);
}

.quote blockquote {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.32;
  color: var(--ground-950);
}

.section--dark .quote blockquote {
  color: var(--white);
}

.quote figcaption {
  margin-top: var(--s4);
  font-size: var(--t-sm);
  color: var(--granite-400);
}

/* --- CTA band ------------------------------------------------------------- */

.cta-band {
  background: var(--rig-600);
  color: var(--white);
}

.cta-band__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s8);
}

.cta-band h2 {
  color: var(--white);
  font-size: var(--t-2xl);
  max-width: 34ch;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.88);
  margin-top: var(--s3);
}

.btn--on-red {
  background: var(--white);
  color: var(--rig-600);
}

.btn--on-red:hover {
  background: var(--ground-950);
  color: var(--white);
  transform: translateY(-1px);
}

.btn--on-red:active {
  transform: translateY(0);
}

/* --- Page header (interior pages) ----------------------------------------- */

.page-head {
  background: var(--ground-950);
  color: #b9c7d6;
  position: relative;
  overflow: hidden;
}

.page-head::before {
  /* A single depth rule carries the metaphor without performing it */
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 100%;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0 1px,
    transparent 1px 64px
  );
  pointer-events: none;
}

.page-head__inner {
  position: relative;
  padding-block: var(--s9) var(--s8);
}

.page-head h1 {
  color: var(--white);
  font-size: var(--t-3xl);
  max-width: 20ch;
  margin-bottom: var(--s4);
}

.page-head p {
  font-size: var(--t-lg);
  color: #b9c7d6;
}

.crumbs {
  font-size: var(--t-sm);
  margin-bottom: var(--s5);
  color: #8fa3b8;
}

.crumbs a {
  color: #b9c7d6;
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--white);
  text-decoration: underline;
}

.crumbs span {
  padding-inline: var(--s2);
  color: #5d7188;
}

/* --- Prose ---------------------------------------------------------------- */

.prose > * + * {
  margin-top: var(--s5);
}

.prose h2 {
  font-size: var(--t-2xl);
  margin-top: var(--s8);
}

.prose h3 {
  font-size: var(--t-xl);
  margin-top: var(--s7);
}

.prose ul {
  margin: 0;
  padding-left: var(--s5);
  max-width: var(--measure);
}

.prose li {
  padding-block: var(--s1);
}

.prose li::marker {
  color: var(--aquifer-500);
}

/* --- Timeline ------------------------------------------------------------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--rule);
}

.timeline li {
  position: relative;
  padding: 0 0 var(--s7) var(--s6);
}

.timeline li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 10px;
  width: 12px;
  height: 12px;
  background: var(--aquifer-500);
  border-radius: 50%;
}

.timeline .year {
  display: block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--ground-950);
  letter-spacing: -0.02em;
}

/* --- Link list (resources) ------------------------------------------------ */

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.link-list li {
  border-bottom: 1px solid var(--rule);
}

.link-list a {
  display: block;
  padding-block: var(--s5);
  text-decoration: none;
  color: inherit;
  transition: background-color 160ms var(--ease-spring);
}

.link-list a:hover {
  background: var(--white);
  color: inherit;
}

.link-list strong {
  display: block;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--t-lg);
  color: var(--aquifer-500);
  letter-spacing: -0.02em;
}

.link-list p {
  margin: var(--s1) 0 0;
  font-size: var(--t-sm);
}

/* --- Form ----------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--s5);
  max-width: 34rem;
}

.field {
  display: grid;
  gap: var(--s2);
}

.field label {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ground-950);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--t-base);
  color: var(--basalt-700);
  background: var(--white);
  border: 1px solid var(--granite-400);
  padding: var(--s3) var(--s4);
  width: 100%;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--aquifer-500);
}

.field .hint {
  font-size: var(--t-xs);
  color: var(--granite-400);
}

/* --- Contact details ------------------------------------------------------ */

.detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s5);
}

.detail-list dt,
.detail-list .k {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--ground-950);
}

.detail-list .v {
  font-size: var(--t-base);
}

.note {
  border-left: 3px solid var(--rig-600);
  padding-left: var(--s4);
  font-size: var(--t-sm);
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  background: var(--ground-950);
  color: #9fb0c2;
  font-size: var(--t-sm);
}

.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--s7);
  padding-block: var(--s8);
}

.footer h3 {
  font-size: var(--t-sm);
  color: var(--white);
  margin-bottom: var(--s4);
  letter-spacing: 0;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.footer a {
  color: #c6d4e2;
  text-decoration: none;
}

.footer a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer__areas {
  border-top: 1px solid var(--rule-dark);
  padding-block: var(--s6);
}

.footer__areas h3 {
  margin-bottom: var(--s3);
}

.footer__areas p {
  max-width: none;
  color: #8fa3b8;
  font-size: var(--t-xs);
  line-height: 1.8;
}

.footer__areas strong {
  color: #c6d4e2;
}

.footer__bottom {
  border-top: 1px solid var(--rule-dark);
  padding-block: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4) var(--s6);
  justify-content: space-between;
  font-size: var(--t-xs);
  color: #7f93a8;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 62rem) {
  .service-row {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }

  .service-row__go {
    margin-top: var(--s2);
  }

  .hero__pipe {
    right: 9%;
  }
}

@media (max-width: 52rem) {
  :root {
    --s9: 4rem;
    --s10: 5rem;
  }

  .nav {
    display: none;
  }

  .nav--open {
    display: flex;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--lift-3);
    padding: var(--s4) var(--s5) var(--s5);
  }

  .nav--open .nav__list {
    flex-direction: column;
    gap: 0;
  }

  .nav--open .nav__link {
    display: block;
    padding-block: var(--s3);
    border-bottom: 1px solid var(--rule);
  }

  .nav--open .btn {
    margin-top: var(--s4);
  }

  .nav__toggle {
    display: block;
  }

  .masthead__row {
    position: relative;
  }

  .brand img {
    width: 140px;
  }

  .depth-mark__rock {
    display: none;
  }

  .depth-mark {
    padding-right: var(--s5);
  }

  .hero__content {
    padding-block: var(--s9) calc(var(--aquifer-h) + var(--s7));
    padding-left: calc(var(--s5) + 4.5rem);
  }

  .town-list {
    columns: 2 10rem;
  }

  /* Two lines of utility copy is too much chrome on a phone */
  .utility__row > span:first-child {
    display: none;
  }

  .utility__row {
    justify-content: center;
  }
}

@media (max-width: 34rem) {
  .hero__pipe {
    display: none;
  }

  /* Too narrow for a depth gutter — drop the rail, keep the strata */
  .depth-scale {
    display: none;
  }

  .hero__content {
    padding-left: var(--s5);
  }

  .hero__actions .btn {
    width: 100%;
  }

  .town-list {
    columns: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}