/* ==========================================================================
   The Boring Guy — wireframe stylesheet
   System: the page is a ground cross-section.
   Surface (kerb concrete) -> turf line -> topsoil -> Melbourne clay -> bluestone.
   Spacing unit is 8px. Content grid is 8 columns, read as 1 : 3 : 4.
   ========================================================================== */

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

:root {
  /* strata */
  --concrete:      #E8E9E4;
  --concrete-mid:  #DBDDD5;
  --concrete-hi:   #F2F3EF;
  --turf:          #7FBE22;
  --topsoil:       #3B2B22;
  --topsoil-mid:   #4C382C;
  --clay:          #D6A23C;
  --clay-mid:      #C28F2E;
  --bluestone:     #2F3A43;
  --bluestone-mid: #3E4B56;
  --paint:         #FF5A1F;
  --paint-deep:    #DC431A;

  /* per-band ink, redefined by .band--* below */
  --ink:      #2E2018;
  --ink-soft: #6B5749;
  --rule:     rgba(59, 43, 34, .20);
  --field:    #FCFCFA;

  /* spacing */
  --u: 8px;
  --gap: calc(var(--u) * 4);

  /* type scale, ratio 1.333 */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.125rem;
  --t-md:   1.5rem;
  --t-lg:   2rem;
  --t-xl:   2.625rem;
  --t-2xl:  3.5rem;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--concrete);
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }

a { color: inherit; }

p a, .prose a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
p a:hover, .prose a:hover { color: var(--paint); }

:focus-visible {
  outline: 3px solid var(--paint);
  outline-offset: 3px;
}

::selection { background: var(--turf); color: var(--topsoil); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 80;
  padding: 12px 20px;
  background: var(--paint);
  color: #231710;
  font-weight: 700;
}
.skip:focus { left: 8px; }

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

/* --------------------------------------------------------------------------
   3. Type roles
   Width is the expressive axis: expanded reads horizontal (a bore),
   condensed reads vertical (depth).
   -------------------------------------------------------------------------- */

.display {
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.display--hero {
  font-size: clamp(2.75rem, 7vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  max-width: 14ch;
}

.display--section {
  font-size: clamp(2rem, 4vw, var(--t-2xl));
  max-width: 18ch;
}

.display--sub {
  font-size: clamp(1.375rem, 2.4vw, var(--t-lg));
  line-height: 1.05;
}

.spec {
  font-stretch: 62%;
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0.035em;
  line-height: 1.3;
}

.spec--num {
  font-variant-numeric: tabular-nums;
}

.lede {
  font-size: clamp(1.1875rem, 1.7vw, var(--t-md));
  line-height: 1.42;
  max-width: 34ch;
}

.prose {
  max-width: 62ch;
  line-height: 1.58;
}
.prose + .prose { margin-top: calc(var(--u) * 2); }

.soft { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

.cols {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--gap);
  align-items: start;
}
.cols__text { grid-column: 1 / 4; }
.cols__vis  { grid-column: 5 / -1; }
.cols__wide { grid-column: 1 / -1; }
.cols__half { grid-column: span 4; }

.band {
  position: relative;
  padding-block: clamp(72px, 8.5vw, 128px);
}

.band--surface  { background: var(--concrete); }

.band--topsoil {
  background: var(--topsoil);
  --ink: #EFE9E3;
  --ink-soft: #B7A395;
  --rule: rgba(239, 233, 227, .22);
  color: var(--ink);
}

.band--clay {
  background: var(--clay);
  --ink: #2E2018;
  --ink-soft: #4A3613;
  --rule: rgba(46, 32, 24, .30);
  color: var(--ink);
}

.band--bluestone {
  background: var(--bluestone);
  --ink: #DEE4E8;
  --ink-soft: #9DACB7;
  --rule: rgba(222, 228, 232, .20);
  color: var(--ink);
}

.stack > * + * { margin-top: calc(var(--u) * 3); }
.stack-lg > * + * { margin-top: calc(var(--u) * 6); }

.head-block { margin-bottom: calc(var(--u) * 7); max-width: 46ch; }
.head-block .lede { margin-top: calc(var(--u) * 2); max-width: 48ch; }

/* the surface: soil bulging up over the band above it */
.edge {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% - 1px); /* 1px overlap hides the seam */
  height: clamp(22px, 2.8vw, 40px);
  pointer-events: none;
}
.edge svg { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   6. Header, nav, footer
   -------------------------------------------------------------------------- */

.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 3);
  padding-block: calc(var(--u) * 3);
  background: var(--concrete);
}

.brand {
  display: block;
  text-decoration: none;
  color: var(--topsoil);
  margin-right: auto;
}
.brand__name {
  display: block;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.3125rem;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand__bore { display: block; width: 100%; height: auto; margin-top: 4px; }

.site-nav {
  display: flex;
  gap: calc(var(--u) * 3);
  font-size: 1rem;
  font-weight: 600;
}
.site-nav a {
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--paint); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--topsoil); }

.head-cta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
}

.tel {
  font-stretch: 62%;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
}
.tel:hover { color: var(--paint); }

.foot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.foot-h {
  font-stretch: 62%;
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.05em;
  margin-bottom: calc(var(--u) * 2);
  color: var(--ink-soft);
}
.foot-grid li + li { margin-top: 6px; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { color: var(--paint); }

.foot-note {
  margin-top: calc(var(--u) * 8);
  padding-top: calc(var(--u) * 3);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2) calc(var(--u) * 5);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   7. Buttons and pills
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border: 2px solid transparent;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--paint {
  background: var(--paint);
  color: #241610;
}
.btn--paint:hover { background: var(--paint-deep); color: #FFF6F2; }
.btn--paint:focus-visible { outline-color: var(--topsoil); }

.btn--ghost {
  border-color: currentColor;
  color: inherit;
  background: transparent;
}
.btn--ghost:hover { background: var(--paint); border-color: var(--paint); color: #241610; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 2);
  align-items: center;
}

/* --------------------------------------------------------------------------
   8. Borehole log — services as a geotech log, not a card deck
   -------------------------------------------------------------------------- */

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

.log__row {
  display: grid;
  grid-template-columns: 7rem 1fr 1.35fr 9rem;
  gap: var(--gap);
  padding-block: calc(var(--u) * 3.5);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.log__depth {
  font-stretch: 62%;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--paint);
}
.band--clay .log__depth { color: #7A2E0A; }

.log__name {
  font-stretch: 112%;
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.log__note { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.5; }
.log__spec {
  font-stretch: 62%;
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0.035em;
  color: var(--ink-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   9. Steps — used only where the content really is a sequence
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  border-top: 2px solid var(--ink);
  padding-top: calc(var(--u) * 2);
}
.steps li::before {
  content: counter(step);
  display: block;
  font-stretch: 62%;
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: calc(var(--u) * 1.5);
}
.steps h3 {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.15;
  margin-bottom: 6px;
}
.steps p { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   10. Photo placeholders
   -------------------------------------------------------------------------- */

.shot {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--u) * 2);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  background-image:
    repeating-linear-gradient(
      128deg,
      var(--rule) 0 1px,
      transparent 1px 11px
    );
  overflow: hidden;
}
.shot--wide { aspect-ratio: 16 / 9; }
.shot--tall { aspect-ratio: 3 / 4; }
.shot__cap {
  font-stretch: 62%;
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: var(--ink-soft);
  background: var(--concrete);
  padding: 6px 10px;
  max-width: 30ch;
}
.band--topsoil .shot__cap   { background: var(--topsoil); }
.band--clay .shot__cap      { background: var(--clay); }
.band--bluestone .shot__cap { background: var(--bluestone); }

.shot-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

/* --------------------------------------------------------------------------
   11. Areas (compass groups) and map
   -------------------------------------------------------------------------- */

.areas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap);
}
.areas__group { border-top: 1px solid var(--rule); padding-top: calc(var(--u) * 2); }
.areas__dir {
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  margin-bottom: calc(var(--u) * 1.5);
}
.areas li { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }

.map { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   12. Quote (testimonial) placeholder
   -------------------------------------------------------------------------- */

.testimonial {
  border-left: 3px solid var(--paint);
  padding-left: calc(var(--u) * 3);
  max-width: 40ch;
}
.testimonial p {
  font-stretch: 112%;
  font-weight: 500;
  font-size: var(--t-md);
  line-height: 1.28;
}
.testimonial footer {
  margin-top: calc(var(--u) * 2);
  font-stretch: 62%;
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--u) * 3) var(--gap);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }

.field > label,
.fieldset > legend {
  font-stretch: 62%;
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
}
.field__hint { font-size: var(--t-sm); color: var(--ink-soft); }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 1.0625rem;
  padding: 13px 14px;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 0;
  width: 100%;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #9A8D82; }

.fieldset { border: 0; padding: 0; margin: 0; grid-column: 1 / -1; }
.fieldset > legend { padding: 0; margin-bottom: calc(var(--u) * 1.5); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: block;
  padding: 11px 16px;
  border: 1px solid var(--ink);
  font-size: 1rem;
  font-weight: 600;
  background: transparent;
  cursor: pointer;
}
.chip input:checked + span { background: var(--paint); border-color: var(--paint); color: #241610; }
.chip input:focus-visible + span { outline: 3px solid var(--paint); outline-offset: 3px; }

.next-steps {
  border: 1px solid var(--rule);
  padding: calc(var(--u) * 4);
  background: var(--concrete-hi);
}
.next-steps h2 {
  font-stretch: 112%;
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.1;
  margin-bottom: calc(var(--u) * 3);
}
.next-steps ol { counter-reset: ns; }
.next-steps li {
  counter-increment: ns;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: calc(var(--u) * 1.5);
  padding-block: calc(var(--u) * 1.5);
  border-top: 1px solid var(--rule);
  font-size: 1.0625rem;
  line-height: 1.45;
}
.next-steps li::before {
  content: counter(ns);
  font-stretch: 62%;
  font-weight: 700;
  color: var(--paint);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   14. Machines / kit list
   -------------------------------------------------------------------------- */

.kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.kit__item { border-top: 2px solid var(--rule); padding-top: calc(var(--u) * 2); }
.kit__name {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.15;
  margin-bottom: 4px;
}
.kit__note { color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }

/* facts list, used on about + location */
.facts { border-top: 1px solid var(--rule); }
.facts div {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--gap);
  padding-block: calc(var(--u) * 2);
  border-bottom: 1px solid var(--rule);
}
.facts dt {
  font-stretch: 62%;
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.facts dd { margin: 0; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   16. Mobile call bar
   -------------------------------------------------------------------------- */

.callbar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  background: var(--bluestone);
  border-top: 2px solid var(--paint);
}
.callbar a {
  padding: 16px 8px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: #DEE4E8;
}
.callbar a + a { background: var(--paint); color: #241610; }

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1060px) {
  .log__row { grid-template-columns: 6.5rem 1fr 8rem; }
  .log__note { grid-column: 2 / -1; margin-top: 8px; }
  .areas { grid-template-columns: repeat(3, 1fr); row-gap: calc(var(--u) * 4); }
  .kit, .shot-row { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: calc(var(--u) * 5); }
}

@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; }
  .cols__text, .cols__vis, .cols__half, .cols__wide { grid-column: 1 / -1; }
  .display--hero { max-width: 16ch; }
  .lede { max-width: 46ch; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); row-gap: calc(var(--u) * 5); }
}

@media (max-width: 760px) {
  :root { --gap: 24px; }

  body { padding-bottom: 62px; }
  .callbar { display: grid; grid-template-columns: 1fr 1fr; }

  .site-head { gap: var(--u) calc(var(--u) * 2); padding-block: calc(var(--u) * 2.5); }
  .site-nav { order: 3; width: 100%; gap: calc(var(--u) * 2.5); font-size: .9375rem; flex-wrap: wrap; }
  .head-cta .btn { display: none; }

  .log__row { grid-template-columns: 1fr; gap: 6px; padding-block: calc(var(--u) * 3); }
  .log__spec { text-align: left; }
  .log__note { margin-top: 2px; }

  .areas, .kit, .shot-row { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; row-gap: calc(var(--u) * 4); }
  .form-grid { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
  .next-steps { padding: calc(var(--u) * 3); }
  .head-block { margin-bottom: calc(var(--u) * 5); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .callbar { display: none; }
}

/* ==========================================================================
   18. Page pieces: extra strata, hero drawing, map, page heads, forms
   (kept after the base system; carries its own breakpoints)
   ========================================================================== */

.band--subsoil {
  background: var(--topsoil-mid);
  --ink: #EFE9E3;
  --ink-soft: #C0AE9F;
  --rule: rgba(239, 233, 227, .22);
  color: var(--ink);
}
.band--bedrock {
  background: #252E36;
  --ink: #DEE4E8;
  --ink-soft: #97A6B1;
  --rule: rgba(222, 228, 232, .18);
  color: var(--ink);
}
.band--flush-top { padding-top: clamp(24px, 3vw, 48px); }

.band--subsoil .shot__cap { background: var(--topsoil-mid); }
.band--bedrock .shot__cap { background: #252E36; }

/* paint reads a touch light on the dark strata to hold contrast */
.band--topsoil .log__depth,
.band--subsoil .log__depth,
.band--bluestone .log__depth { color: #FF7A45; }

/* map */
.map-bay  { fill: rgba(0, 0, 0, .22); stroke: var(--ink-soft); stroke-width: 1.5; }
.map-ring {
  fill: rgba(255, 90, 31, .07);
  stroke: var(--paint);
  stroke-width: 3;
  stroke-dasharray: 11 8;
  stroke-linecap: round;
}
.map-x    { fill: none; stroke: var(--paint); stroke-width: 4; stroke-linecap: round; }
.map-ink  { fill: var(--ink); }
.map-label {
  font-stretch: 62%;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.03em;
  fill: var(--ink);
}
.map-label--soft { fill: var(--ink-soft); }
.map-dir {
  font-stretch: 125%;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  fill: var(--ink);
}

/* inner page heads */
.page-head {
  background: var(--concrete);
  padding-block: clamp(32px, 5vw, 72px) clamp(80px, 9vw, 136px);
}
.display--page {
  font-size: clamp(2.5rem, 5.6vw, 5rem);
  max-width: 15ch;
}
.page-head .lede { margin-top: clamp(20px, 2.5vw, 32px); max-width: 40ch; }

.facts--tight div { grid-template-columns: 7.5rem 1fr; }

/* services page entries */
.entry + .entry {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--rule);
}
.entry .log__depth { display: block; margin-bottom: calc(var(--u) * 1.5); }
.entry .display--sub { margin-bottom: calc(var(--u) * 2); }
.entry .facts { margin-top: calc(var(--u) * 3); }

.dont li {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--gap);
  padding-block: calc(var(--u) * 2.5);
  border-top: 1px solid var(--rule);
}
.dont strong { font-stretch: 112%; font-weight: 700; font-size: 1.1875rem; line-height: 1.25; }
.dont span { color: var(--ink-soft); }

/* about page principles, not a sequence so no numbers */
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.principles li { border-top: 2px solid var(--ink); padding-top: calc(var(--u) * 2.5); }
.principles h3 { margin-bottom: calc(var(--u) * 1.5); }
.principles p { color: var(--ink-soft); font-size: 1.0625rem; }

/* quote form */
.cols__form  { grid-column: 1 / 6; }
.cols__aside { grid-column: 6 / -1; position: sticky; top: 24px; }

.spot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  border: 1px dashed var(--ink-soft);
  background-image: repeating-linear-gradient(128deg, var(--rule) 0 1px, transparent 1px 11px);
}
.spot svg { width: 64px; height: 64px; }
.spot .shot__cap { position: absolute; left: 12px; bottom: 12px; }

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 2) calc(var(--u) * 3);
  padding-top: calc(var(--u) * 2);
}
.form-done {
  grid-column: 1 / -1;
  padding: 14px 18px;
  border-left: 4px solid var(--turf);
  background: rgba(127, 190, 34, .22);
  font-weight: 600;
}

@media (max-width: 1060px) {
  .principles { grid-template-columns: 1fr; row-gap: calc(var(--u) * 4); }
  .principles li { max-width: 60ch; }
}

@media (max-width: 860px) {
  .cols__form, .cols__aside { grid-column: 1 / -1; position: static; }
  .dont li { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 760px) {
  .spot { aspect-ratio: 4 / 3; }
  .display--hero { font-size: 2.375rem; font-stretch: 118%; max-width: none; }
  .log__note { grid-column: auto; }
}

@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; row-gap: calc(var(--u) * 4); }
}

@media (max-width: 760px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   19. The dig: an isometric block of ground that opens as you scroll,
       buried finds in every stratum, and dot points.
   ========================================================================== */

:root { --head: 92px; }

.dig { background: var(--concrete); }
.dig__stage { padding-block: clamp(8px, 2vw, 24px) clamp(48px, 5vw, 72px); }
.dig__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--gap);
  align-items: center;
}
.dig__text { grid-column: 1 / 5; }
.dig .display--hero { font-size: clamp(2.75rem, 4.8vw, 4.75rem); max-width: 12ch; }
.dig__text .lede { margin-top: clamp(20px, 2.4vw, 32px); max-width: 30ch; }
.dig__text .btn-row { margin-top: clamp(24px, 3vw, 40px); }
.dig__vis { grid-column: 5 / -1; }
.dig__vis svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100svh - var(--head) - 170px);
  min-height: 260px;
  overflow: visible;
}
.dig__cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 3.5vw, 44px);
  font-stretch: 62%;
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-decoration: none;
}
.dig__cue:hover { color: var(--paint); }
.dig__cue svg { width: 12px; height: 18px; }

/* isometric faces, lit from the top left */
.iso-face { stroke: rgba(24, 14, 8, .28); stroke-width: 1; stroke-linejoin: round; }
.l-blue.f-top { fill: #4B5864; }  .l-blue.f-left { fill: #3A4550; }  .l-blue.f-right { fill: #2C353E; }
.l-clay.f-top { fill: #E6B658; }  .l-clay.f-left { fill: #D6A23C; }  .l-clay.f-right { fill: #B98A2E; }
.l-soil.f-top { fill: #5B4435; }  .l-soil.f-left { fill: #4A362A; }  .l-soil.f-right { fill: #3A2A20; }
.l-turf.f-top { fill: #8CC63A; }  .l-turf.f-left { fill: #6FA324; }  .l-turf.f-right { fill: #5A881B; }
.l-slab.f-top { fill: #D8D9D3; }  .l-slab.f-left { fill: #C2C4BC; }  .l-slab.f-right { fill: #ACAEA6; }
.l-house.f-left { fill: #F1F0EA; } .l-house.f-right { fill: #D6D5CD; }
.l-roof { fill: #4B5058; }         .l-roof.f-back { fill: #3C4047; }
.l-shed.f-left { fill: #CFC8B6; }  .l-shed.f-right { fill: #B5AE9C; }
.l-shedroof.f-top { fill: #9AA09A; } .l-shedroof.f-left { fill: #858B85; } .l-shedroof.f-right { fill: #737972; }
.iso-win  { fill: #8FAAB9; stroke: #3B2B22; stroke-width: 1; }
.iso-door { fill: #6B4F3A; stroke: #3B2B22; stroke-width: 1; }
.iso-door--shed { fill: #BDB6A4; }
.iso-joint { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1.5; }
.iso-slabjoint { stroke: #A9AAA3; stroke-width: 1.2; }
.iso-speck { fill: rgba(255, 255, 255, .10); }
.iso-stone { fill: rgba(40, 24, 10, .22); }
.iso-tuft { fill: none; stroke: #5E901C; stroke-width: 1.4; stroke-linecap: round; }
.iso-pit-top { fill: #1C140F; }
.iso-pit-front { fill: #261B14; }
.iso-spoil { fill: #5B4435; }
.iso-spoil-top { fill: #6E5443; }
.iso-trunk { stroke: #5A4334; stroke-width: 5; stroke-linecap: round; }
.iso-canopy-a { fill: #5E8C2A; }
.iso-canopy-b { fill: #79AA38; }
.iso-conduit { fill: none; stroke: var(--paint); stroke-width: 5; stroke-linecap: round; }
.iso-drill { fill: var(--paint); stroke: #7A2A0C; stroke-width: 1; transform: translate(var(--bx), var(--by)); }
.iso-pulse { fill: #FFF1E8; opacity: 0; }
.iso-svc { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.svc-power { stroke: #FF5A1F; }
.svc-water { stroke: #4A90D9; }
.svc-gas   { stroke: #F4C542; }
.svc-nbn   { stroke: #F4F4F0; }

/* the split: each layer lifts or drops, and the yard turns see-through */
.iso-g { transform: translateY(calc(var(--p, 0) * var(--lift, 0) * 1px)); }
.iso-g--surface { opacity: calc(1 - var(--p, 0) * .72); }

/* the one load sequence: ground settles, buildings pop up, the bore goes through */
@media (prefers-reduced-motion: no-preference) {
  .iso .drop { animation: iso-drop .75s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(var(--i) * 150ms); }
  .iso .pop {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: iso-pop .55s cubic-bezier(.3, 1.5, .5, 1) both;
    animation-delay: calc(800ms + var(--i) * 110ms);
  }
  .iso .iso-conduit {
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    animation: iso-bore 1.7s cubic-bezier(.45, .05, .35, 1) 1.5s forwards;
  }
  .iso .iso-drill { animation: iso-drill 1.7s cubic-bezier(.45, .05, .35, 1) 1.5s both; }
  .iso .iso-pulse { animation: iso-pulse 2.6s linear infinite; animation-delay: calc(3.4s + var(--i) * .85s); }
  .iso .sway {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: iso-sway 6s ease-in-out infinite alternate;
  }
  .dig__cue svg { animation: cue 1.6s ease-in-out infinite; }
  .worm { animation: crawl 60s linear infinite; }
}
@keyframes iso-drop  { from { transform: translateY(-80px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes iso-pop   { from { transform: scale(.15); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes iso-bore  { to { stroke-dashoffset: 0; } }
@keyframes iso-drill { from { transform: translate(var(--ax), var(--ay)); } to { transform: translate(var(--bx), var(--by)); } }
@keyframes iso-pulse {
  0%   { transform: translate(var(--ax), var(--ay)); opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { transform: translate(var(--bx), var(--by)); opacity: 0; }
}
@keyframes iso-sway { from { transform: rotate(-1.4deg); } to { transform: rotate(1.4deg); } }
@keyframes cue { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
@keyframes crawl {
  0%   { transform: translateX(0); opacity: 0; }
  4%, 90% { opacity: 1; }
  100% { transform: translateX(min(55vw, 640px)); opacity: 0; }
}

/* buried finds, drifting at their own depth behind the content */
.finds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.band > .wrap { position: relative; z-index: 1; }
.find { position: absolute; display: block; will-change: transform; }
.find svg { display: block; width: 100%; height: auto; overflow: visible; }
.find--fill svg * { fill: currentColor; }
.find--line svg * { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.band--topsoil .finds,
.band--subsoil .finds   { color: rgba(239, 233, 227, .08); }
.band--clay .finds      { color: rgba(46, 32, 24, .13); }
.band--bluestone .finds,
.band--bedrock .finds   { color: rgba(222, 228, 232, .08); }
.worm { position: absolute; left: 6%; bottom: 9%; width: 60px; height: auto; }
.worm path { fill: none; stroke: #B97A6A; stroke-width: 5.5; stroke-linecap: round; }

/* plain dot points, each a dab of marking paint */
.dots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--u) * 3) var(--gap);
  max-width: 980px;
}
.dots li {
  position: relative;
  padding-left: 36px;
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  line-height: 1.3;
}
.dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--paint) 0 42%, rgba(255, 90, 31, .45) 58%, rgba(255, 90, 31, 0) 72%);
}

@media (max-width: 860px) {
  .dig__grid { grid-template-columns: 1fr; }
  .dig__text, .dig__vis { grid-column: 1 / -1; }
  .dig__vis { max-width: 540px; }
}
@media (max-width: 760px) {
  .dig .display--hero { font-size: 2.375rem; max-width: none; }
  .dots { grid-template-columns: 1fr; }
}