/* ==========================================================================
   Warner Surveys Utility Mapping — "The Sweep"
   --------------------------------------------------------------------------
   base.css owns reset, wrap, sections, header/nav/mega mechanics, buttons,
   forms, footer skeleton, reveals, preloader shell, hero headline contract
   and the responsive rules.

   This file supplies the palette, the plan, and the schedule grammar.
   Rule of the page: the four utility colours are the only strong colours.
   Colour means something, or it is not used.
   ========================================================================== */

:root{
  /* ---------- the plan ---------- */
  --ink:      #0d1117;
  --paper:    #f5f4ef;
  --grid:     #e2e4e0;
  --sheet:    #fbfaf6;   /* the drawing sheet, a shade above the page */

  /* ---------- the utility code ---------- */
  --elec:     #d4342c;
  --water:    #1f6fb2;
  --gas:      #e0a400;
  --comms:    #2f8f5b;

  /* ---------- surfaces mixed from those ---------- */
  --paper-2:  #ecebe2;
  --ink-2:    #12171e;
  --ink-3:    #171d25;
  --text:     #f2f1ec;
  --muted:    rgba(242,241,236,.58);
  --ink-text: var(--ink);
  --ink-mute: #5a6066;

  /* ---------- base.css contract ---------- */
  --accent:     var(--elec);
  --accent-lit: #e2554c;
  --accent-2:   var(--elec);
  --line:       rgba(242,241,236,.16);
  --line-d:     rgba(13,17,23,.15);
  --line-d2:    rgba(13,17,23,.075);
  --surface:    var(--paper);
  --surface-2:  var(--paper-2);

  /* ---------- type ---------- */
  --font-display: "Chakra Petch", "Arial Narrow", sans-serif;
  --font-body:    "Khula", system-ui, -apple-system, sans-serif;
  --font-mono:    "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap-max: 1280px;
  --pad:      clamp(1.15rem, 4vw, 2.8rem);
  --radius:   2px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

html{ scroll-padding-top:92px; }
body{
  background:var(--paper);
  color:var(--ink-text);
  font-size:17px;
  line-height:1.66;
  font-weight:400;
}
::selection{ background:var(--elec); color:var(--paper); }
:focus-visible{ outline:2px solid var(--elec); outline-offset:3px; }

/* paper grain, very light */
body::after{
  content:""; position:fixed; inset:0; z-index:880; pointer-events:none; opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

.mono{ font-family:var(--font-mono); letter-spacing:.07em; font-weight:400; }

.skip{
  position:absolute; left:.5rem; top:.5rem; z-index:10000;
  width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  padding:.75rem 1.1rem; background:var(--ink); color:var(--text);
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{ width:auto; height:auto; clip-path:none; }

/* ---------- section furniture ---------- */
.sect{ padding-block:clamp(3.6rem,7vw,6.2rem); }
.sect--ink{ background:var(--ink); color:var(--text); --line:rgba(242,241,236,.16); --line-d:rgba(242,241,236,.16); --line-d2:rgba(242,241,236,.08); }

.sect__num{
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--font-mono); font-size:.6rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:1.15rem;
}
.sect__num::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.6; flex-shrink:0; }
.sect--ink .sect__num{ color:rgba(242,241,236,.52); }

.sect__h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.75rem,4.1vw,3rem);
  line-height:1.04; letter-spacing:-.022em;
  text-wrap:balance; max-width:24ch;
}
.sect__lead{ font-size:.98rem; line-height:1.68; color:var(--ink-mute); max-width:46ch; }
.sect--ink .sect__lead{ color:rgba(242,241,236,.64); }

/* ==========================================================================
   PRELOADER — the sweep grid, never the client logo
   ========================================================================== */
.pre{ background:var(--paper); }
.pre__mark{ width:150px; }
.pre__mark svg{ width:150px; height:auto; display:block; }
.pre__grid path{ stroke:var(--grid); stroke-width:1.2; fill:none; }
.pre__band{ stroke:var(--elec); stroke-width:1.6; }
.pre__dots .d1{ fill:var(--elec); }
.pre__dots .d2{ fill:var(--water); }
.pre__dots .d3{ fill:var(--gas); }
.pre__dots .d4{ fill:var(--comms); }
.pre__meta{ color:var(--ink-mute); }
.pre__pct{ color:var(--elec); }
.pre__bar{ background:rgba(13,17,23,.14); height:2px; }
.pre__bar i{ background:var(--elec); }

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */
.hdr{
  background:var(--paper);
  border-bottom:1px solid var(--line-d);
  color:var(--ink);
}
@media (min-width:1024px){
  .hdr{ background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
.hdr__in{ min-height:74px; gap:1rem; }
.brand img{ width:176px; height:auto; }

.nav__list{ gap:0; }
.nav__link{
  font-family:var(--font-body); font-size:.82rem; font-weight:600;
  letter-spacing:0; padding:.52rem .55rem;
  color:var(--ink);
}
.nav__link:hover{ color:var(--elec); background:rgba(13,17,23,.04); }
.nav__item.is-open > .nav__link{ color:var(--elec); }

.nav__cta{ order:9; margin-left:.45rem; }
.nav__cta .nav__link{
  background:var(--ink); color:var(--paper);
  padding:.6rem 1rem; border-radius:2px; font-size:.79rem;
}
.nav__cta .nav__link:hover{ background:var(--elec); color:#fff; }
.nav__util{ opacity:.62; }

/* the burger sits on paper, so it cannot use base.css's light-on-dark defaults */
.burger{ border-color:var(--line-d); }
.burger span{ background:var(--ink); }

/* base.css only styles .nav__foot inside the mobile overlay — hide it on desktop */
@media (min-width:1024px){
  .nav__foot{ display:none; }
}

/* mega panel — the sheet pulls out of the drawing */
.mega{
  background:var(--sheet);
  border:1px solid var(--line-d);
  border-radius:2px;
  color:var(--ink);
  box-shadow:0 30px 60px -26px rgba(13,17,23,.45);
  padding:1.3rem;
}
.mega--sm{ width:min(340px, calc(100vw - 2rem)); }

/* the small About panel anchors to its trigger, not to the middle of the sheet */
.nav__item.has-mega.nav__item--local{ position:relative; }
.nav__item--local .mega{ left:0; transform:translate(0,8px); }
.nav__item--local.is-open > .mega,
.nav__item--local:focus-within > .mega{ transform:translate(0,0); }
.mega__cols{ gap:1.6rem; }
.mega__h{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute);
  border-bottom:1px solid var(--line-d); padding-bottom:.45rem; margin-bottom:.3rem;
}
.mega a{
  color:var(--ink); font-size:.82rem; line-height:1.3;
  display:flex; gap:.55rem; align-items:baseline;
  padding:.34rem 0;
}
.mega a:hover{ color:var(--elec); }
.mega__n{
  font-family:var(--font-mono); font-size:.58rem; color:var(--ink-mute);
  letter-spacing:.04em; flex-shrink:0;
}
.mega__note{
  font-size:.78rem; line-height:1.5; color:var(--ink-mute);
  margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--line-d);
}
.mega__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem;
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line-d);
}
.mega__foot p{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); }
.mega__all{
  font-size:.78rem; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--elec); padding-bottom:2px;
}
.mega__all:hover{ color:var(--elec); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{ border-radius:2px; font-weight:600; letter-spacing:.005em; }
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--elec); color:#fff; filter:none; }
.btn--ghost{ border:1px solid var(--line-d); color:inherit; }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }
.sect--ink .btn--solid{ background:var(--paper); color:var(--ink); }
.sect--ink .btn--solid:hover{ background:var(--elec); color:#fff; }
.sect--ink .btn--ghost{ border-color:rgba(242,241,236,.28); color:var(--text); }
.sect--ink .btn--ghost:hover{ border-color:var(--text); color:var(--text); }

.tlink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.86rem; font-weight:600;
  border-bottom:1px solid var(--line-d); padding-bottom:3px;
  transition:border-color .2s, color .2s;
}
.tlink:hover{ color:var(--elec); border-color:var(--elec); }

/* ==========================================================================
   HERO — the plan
   ========================================================================== */
.hero{
  background:var(--paper);
  color:var(--ink);
  padding-block:0 clamp(2.2rem,4vw,3.4rem);
}
.hero .wrap{ padding-top:clamp(.9rem,2vw,1.4rem); }

.hero__strip{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.35rem 1rem;
  padding-bottom:.75rem; border-bottom:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute);
}
.hero__strip .mono{ color:var(--ink); }

.hero__head{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.82fr);
  gap:clamp(1.2rem,3vw,2.8rem);
  align-items:end;
  padding-block:clamp(1.5rem,3.4vw,2.6rem) clamp(1.3rem,2.6vw,2rem);
}

.hero__h1{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.032em;
  line-height:.95;
  font-size:var(--h1-size, clamp(2rem, 5.4vw, 4.4rem));
}
@media (min-width:1024px){
  .hero__h1{ font-size:var(--h1-size, clamp(2.2rem, 5.2vw, 4.6rem)); }
}
/* nothing animates the headline, so the line clip can be opened — a clipped
   descender on "service," is not worth the contract's overflow:hidden */
.hero__h1 .line{ overflow:visible; padding-block:.03em; }

.hero__lead{
  font-size:1rem; line-height:1.66; color:var(--ink-mute);
  max-width:42ch;
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.3rem; }

.hero__facts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.9rem; margin-top:1.6rem; padding-top:1.1rem;
  border-top:1px solid var(--line-d);
}
.hero__facts b{
  display:block; font-family:var(--font-mono); font-size:.74rem;
  font-weight:500; letter-spacing:.04em; color:var(--ink);
}
.hero__facts span{
  display:block; font-size:.68rem; line-height:1.35;
  color:var(--ink-mute); margin-top:.2rem;
}

/* ---------- the sheet ---------- */
.plan{
  border:1px solid var(--line-d);
  background:var(--sheet);
}
.plan__bar{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.3rem 1rem;
  padding:.5rem .85rem; border-bottom:1px solid var(--line-d2);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-mute);
}
.plan__cap .mono{ color:var(--elec); }
.plan__sweepnote{ color:var(--ink-mute); }

.plan__stage{ position:relative; overflow:hidden; aspect-ratio:1200/560; background:var(--sheet); }
.plan__svg{ position:absolute; inset:0; display:block; width:100%; height:100%; }

.plan__sweep{
  position:absolute; top:0; bottom:0; left:0; width:100%;
  pointer-events:none; opacity:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(13,17,23,.045) 34%,
    rgba(13,17,23,.085) 48%,
    rgba(13,17,23,.045) 62%,
    transparent 100%);
}
.plan__sweep::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:2px;
  background:rgba(13,17,23,.30);
}

.plan__foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.7rem 1.6rem;
  padding:.6rem .85rem; border-top:1px solid var(--line-d2);
}
.plan__key{
  display:flex; flex-wrap:wrap; gap:.55rem 1.15rem;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink);
}
.plan__key li{ display:flex; align-items:center; gap:.45rem; }
.plan__key i{ display:block; width:17px; height:3px; }
.k-elec{ background:var(--elec); }
.k-water{ background:var(--water); }
.k-gas{ background:var(--gas); }
.k-comms{ background:var(--comms); }
.plan__note{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.04em;
  color:var(--ink-mute); max-width:46ch;
}

/* ---------- the drawing itself ---------- */
.pl-grid path{ stroke:var(--grid); stroke-width:1; fill:none; }
.pl-grid rect{ stroke:#d8dad4; stroke-width:1.4; fill:none; }
.pl-road{ fill:#efeee6; }
.pl-kerb{ stroke:#0d1117; stroke-width:1.5; opacity:.45; fill:none; }
.pl-centre{ stroke:#0d1117; stroke-width:1.5; opacity:.26; stroke-dasharray:24 16; fill:none; }
.pl-edge{ stroke:#0d1117; stroke-width:1.2; opacity:.32; fill:none; }
.pl-footway path{ stroke:#0d1117; stroke-width:1; opacity:.15; }
.pl-bld > rect:first-child{ fill:none; stroke:#0d1117; stroke-width:4; }
.pl-bld-in{ fill:none; stroke:#0d1117; stroke-width:1.2; opacity:.42; }
.pl-door{ fill:none; stroke:#0d1117; stroke-width:1; opacity:.35; }
.pl-sub rect{ stroke:#0d1117; stroke-width:1.8; }
.pl-t{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  fill:#5a6066; text-transform:uppercase;
}
.pl-north path{ stroke:#0d1117; stroke-width:1.2; fill:none; }
.pl-north .pl-north-h{ fill:#0d1117; stroke:none; }

/* utilities: a casing in the sheet colour, then the service line */
.pl-u{ transform-box:view-box; }
.pl-case{ fill:none; stroke:var(--sheet); stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
.pl-line{ fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.pl-u--elec .pl-line{ stroke:var(--elec); }
.pl-u--water .pl-line{ stroke:var(--water); }
.pl-u--gas .pl-line{ stroke:var(--gas); }
.pl-u--comms .pl-line{ stroke:var(--comms); }

.pl-badge{ stroke:none; }
.pl-u--elec .pl-badge{ fill:var(--elec); }
.pl-u--water .pl-badge{ fill:var(--water); }
.pl-u--gas .pl-badge{ fill:var(--gas); }
.pl-u--comms .pl-badge{ fill:var(--comms); }
.pl-badge-t{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.04em; fill:var(--sheet);
}
.pl-u--gas .pl-badge-t{ fill:#2a2205; }

.pl-tag rect{ fill:var(--sheet); stroke:#0d1117; stroke-opacity:.22; }
.pl-tag text{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.05em;
  fill:#575d63;
}
.pl-valve circle{ fill:var(--sheet); stroke:var(--water); stroke-width:2; }
.pl-valve path{ stroke:var(--water); stroke-width:1.4; fill:none; }

.pl-stop-halo{ fill:var(--sheet); }
.pl-stop path{ fill:var(--sheet); stroke:var(--elec); stroke-width:2.2; }
.pl-stop > circle:not(.pl-stop-halo){ fill:var(--elec); }
.pl-stop-t{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.13em;
  fill:var(--elec);
}
.pl-scale path{ stroke:#0d1117; stroke-width:1.2; opacity:.55; fill:none; }

@keyframes sweep{
  0%{ transform:translateX(-100%); opacity:0; }
  10%{ opacity:1; }
  88%{ opacity:1; }
  100%{ transform:translateX(100%); opacity:0; }
}
@keyframes utilIn{
  from{ opacity:0; transform:translateY(7px); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: no-preference){
  body.loaded .plan__sweep{ animation:sweep 2.4s cubic-bezier(.42,0,.22,1) .45s both; }
  body.loaded .pl-u{ animation:utilIn .85s var(--ease) both; }
  body.loaded .pl-u--comms{ animation-delay:.62s; }
  body.loaded .pl-u--water{ animation-delay:1.15s; }
  body.loaded .pl-u--gas{ animation-delay:1.5s; }
  body.loaded .pl-u--elec{ animation-delay:1.85s; }
}

/* ==========================================================================
   01 — BEFORE YOU DIG
   ========================================================================== */
.dig__head{ max-width:56ch; }
.dig__head .sect__h2{ max-width:23ch; }

.dig__body{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.8rem,4vw,3.6rem); align-items:start;
  margin-top:clamp(1.6rem,3vw,2.6rem);
}
.dig__lead{
  font-size:1rem; line-height:1.72; color:rgba(242,241,236,.74);
  max-width:48ch;
}
.dig__notes{ display:grid; gap:0; margin-top:1.8rem; }
.dig__notes li{
  display:grid; grid-template-columns:1.4rem minmax(0,1fr); gap:.9rem;
  padding:1rem 0; border-top:1px solid var(--line);
}
.dig__notes .dig__n{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--elec); padding-top:.28rem;
}
.dig__notes p{ font-size:.88rem; line-height:1.6; color:rgba(242,241,236,.66); }
.dig__notes b{ color:var(--text); font-weight:600; }

.dig__fig{ margin:0; }
.dig__fig img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(.96);
  border:1px solid var(--line);
  transition:filter .5s var(--ease);
}
.dig__fig figcaption{
  margin-top:.7rem; font-size:.72rem; line-height:1.5;
  color:rgba(242,241,236,.5); max-width:40ch;
}
.dig__fig figcaption .mono{ color:rgba(242,241,236,.8); }
@media (hover:hover) and (pointer:fine){
  .dig__fig:hover img{ filter:grayscale(0) contrast(1.02); }
}

/* ==========================================================================
   02 — SCHEDULE OF SERVICES
   ========================================================================== */
.sched{
  width:100%; border-collapse:collapse; table-layout:fixed;
  font-size:.9rem; margin-top:.4rem;
  border-top:1px solid var(--line-d);
}
.sched__cap{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
.sched thead th{
  font-family:var(--font-mono); font-size:.6rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
  text-align:left; padding:.55rem .8rem .55rem 0;
  border-bottom:1px solid var(--ink);
}
.sched tbody th, .sched tbody td{
  text-align:left; font-weight:400; vertical-align:top;
  padding:1.05rem .9rem 1.05rem 0;
  border-bottom:1px solid var(--line-d2);
}
.sched thead th:nth-child(1){ width:5%; }
.sched thead th:nth-child(2){ width:30%; }
.sched thead th:nth-child(3){ width:24%; }
.sched thead th:nth-child(4){ width:41%; }

.sched__n{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em;
  color:var(--ink-mute);
}
.sched tbody th a{
  font-family:var(--font-display); font-size:.98rem; font-weight:600;
  line-height:1.24; letter-spacing:-.008em; color:var(--ink);
  transition:color .18s;
}
.sched tbody th a:hover{ color:var(--elec); }
.sched tbody td:nth-child(3){
  font-family:var(--font-mono); font-size:.72rem; line-height:1.5;
  letter-spacing:.02em; color:var(--ink-mute);
}
.sched tbody td:nth-child(4){ font-size:.86rem; line-height:1.55; color:var(--ink-mute); padding-right:0; }
.sched tbody tr:hover th a{ color:var(--elec); }

/* ---------- what comes back ---------- */
.figs{
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,3rem);
  margin-top:clamp(2.4rem,4vw,3.6rem); padding-top:clamp(1.8rem,3vw,2.6rem);
  border-top:1px solid var(--line-d);
}
.figs__head .sect__num{ margin-bottom:.8rem; }
.figs__lead{ font-size:.88rem; line-height:1.6; color:var(--ink-mute); max-width:34ch; }
.figs__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:1.4rem; }
.fig{ margin:0; }
.fig img{
  width:100%; height:auto; border:1px solid var(--line-d);
  background:var(--sheet);
  filter:grayscale(.15) contrast(1.02);
}
.fig figcaption{ margin-top:.6rem; font-size:.74rem; line-height:1.5; color:var(--ink-mute); }
.fig__n{ color:var(--ink); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; }

/* ==========================================================================
   03 — PAS128 QUALITY LEVELS
   ========================================================================== */
.pas{ background:var(--paper-2); }
.pas__axis{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 1.2rem;
  padding-bottom:.6rem; margin-bottom:0;
  border-bottom:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute);
}
.pas__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-left:1px solid var(--line-d);
}
.pas__card{
  display:flex; flex-direction:column;
  padding:1.5rem 1.2rem 1.4rem;
  border-right:1px solid var(--line-d); border-bottom:1px solid var(--line-d);
}
.pas__top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; height:104px;
}
.pas__lvl{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.4rem,4.6vw,3.4rem); line-height:.82;
  letter-spacing:-.05em; color:var(--ink);
}
.pas__bar{
  display:block; width:10px; height:100%;
  background:rgba(13,17,23,.075); position:relative;
}
.pas__bar i{
  position:absolute; left:0; bottom:0; width:100%;
  height:var(--h,50%); background:var(--ink);
}
.pas__name{
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  line-height:1.2; letter-spacing:-.01em; margin-top:1.1rem;
}
.pas__p{
  font-size:.86rem; line-height:1.58; color:var(--ink-mute);
  margin-top:.65rem; flex:1;
}
.pas__tag{
  margin-top:1.1rem; padding-top:.7rem; border-top:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-mute);
}
.pas__cap{
  margin-top:1.2rem; font-size:.82rem; line-height:1.62;
  color:var(--ink-mute); max-width:76ch;
}
.pas__cap .mono{ color:var(--ink); font-size:.7rem; letter-spacing:.1em; }

.pas__more{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1.2rem,3vw,2.6rem); align-items:start;
  margin-top:clamp(1.8rem,3.4vw,2.8rem); padding-top:1.4rem;
  border-top:1px solid var(--line-d);
}
.pas__moreh{
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  letter-spacing:-.01em;
}
.pas__morep{ font-size:.82rem; line-height:1.55; color:var(--ink-mute); margin-top:.35rem; max-width:38ch; }
.pas__links{ display:grid; gap:.6rem; justify-items:start; }

/* ==========================================================================
   04 — CASE STUDIES
   ========================================================================== */
.case__grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:start;
}
.case__list{ width:100%; border-collapse:collapse; table-layout:fixed; }
.case__list tbody th, .case__list tbody td{
  border-top:1px solid var(--line-d2); padding:1.05rem .5rem 1.05rem 0;
  text-align:left; font-weight:400; vertical-align:middle;
}
.case__list tbody tr:last-child th, .case__list tbody tr:last-child td{ border-bottom:1px solid var(--line-d2); }
.case__n{
  width:3.4rem; font-family:var(--font-mono); font-size:.66rem;
  color:var(--ink-mute);
}
.case__list th a{
  font-family:var(--font-display); font-size:1.02rem; font-weight:600;
  letter-spacing:-.012em; color:var(--ink); transition:color .18s;
}
.case__go{
  width:2rem; text-align:right; color:var(--ink-mute);
  font-size:.9rem; transition:transform .22s var(--ease), color .18s;
}
.case__list tr:hover th a{ color:var(--elec); }
.case__list tr:hover .case__go{ color:var(--elec); transform:translateX(4px); }

.case__fig{ margin:0; }
.case__fig img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--line-d);
  filter:grayscale(1) contrast(1.05);
  transition:filter .5s var(--ease);
}
.case__fig figcaption{
  margin-top:.6rem; font-size:.72rem; line-height:1.5; color:var(--ink-mute);
}
.case__fig figcaption .mono{ color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .case__fig:hover img{ filter:grayscale(0); }
}
.case__foot{ margin-top:1.6rem; }

/* ==========================================================================
   05 — ACCESS
   ========================================================================== */
.acc__head{ max-width:58ch; }
.acc__head .sect__h2{ max-width:24ch; }
.acc__body{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(1.8rem,4vw,3.6rem); align-items:start;
  margin-top:clamp(1.6rem,3vw,2.6rem);
}
.acc__lead{
  font-size:1rem; line-height:1.72; color:rgba(242,241,236,.74);
  max-width:46ch;
}
.acc__list{ margin-top:1.6rem; display:grid; }
.acc__list div{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:.4rem 1.4rem; padding:.95rem 0; border-top:1px solid var(--line);
}
.acc__list dt{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(242,241,236,.85);
}
.acc__list dd{ font-size:.84rem; line-height:1.55; color:rgba(242,241,236,.6); }
.acc__fig{ margin:0; }
.acc__fig img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.92);
  border:1px solid var(--line);
  transition:filter .5s var(--ease);
}
.acc__fig figcaption{
  margin-top:.7rem; font-size:.72rem; line-height:1.5;
  color:rgba(242,241,236,.5);
}
.acc__fig figcaption .mono{ color:rgba(242,241,236,.8); }
@media (hover:hover) and (pointer:fine){
  .acc__fig:hover img{ filter:grayscale(0) contrast(1.02) brightness(1); }
}

/* ==========================================================================
   06 — OFFICES
   ========================================================================== */
.off__list{ border-top:1px solid var(--ink); }
.off__list li{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr) minmax(0,.8fr);
  gap:.5rem 2rem; align-items:baseline;
  padding:1.1rem 0; border-bottom:1px solid var(--line-d2);
}
.off__name{
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  letter-spacing:-.01em;
}
.off__name .mono{
  font-size:.58rem; letter-spacing:.16em; color:var(--ink-mute);
  margin-left:.5rem; text-transform:uppercase;
}
.off__addr{ font-size:.84rem; line-height:1.55; color:var(--ink-mute); }
.off__tel a{
  font-family:var(--font-mono); font-size:.82rem; letter-spacing:.02em;
  color:var(--ink); transition:color .18s;
}
.off__tel a:hover{ color:var(--elec); }

/* ==========================================================================
   07 — CONTACT
   ========================================================================== */
.con__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.8rem,4vw,4rem); align-items:start;
}
.con__h{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.7rem,3.8vw,2.9rem); line-height:1.05;
  letter-spacing:-.022em; text-wrap:balance; max-width:20ch;
}
.con__p{
  font-size:.95rem; line-height:1.7; color:rgba(242,241,236,.66);
  margin-top:1.1rem; max-width:44ch;
}
.con__acts{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.con__facts div{
  display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:1rem;
  padding:.95rem 0; border-top:1px solid var(--line);
}
.con__facts div:last-child{ border-bottom:1px solid var(--line); }
.con__facts dt{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(242,241,236,.48); padding-top:.3rem;
}
.con__facts dd{ font-size:.86rem; line-height:1.55; color:rgba(242,241,236,.84); }
.con__facts a{ border-bottom:1px solid rgba(242,241,236,.28); }
.con__facts a:hover{ color:var(--text); border-color:var(--elec); }

/* ==========================================================================
   FOOTER — the title block
   ========================================================================== */
.foot{
  background:var(--paper); color:var(--ink);
  border-top:1px solid var(--ink);
  padding-block:clamp(2.4rem,4.5vw,3.6rem) 1.5rem;
}
.foot__logo{ margin-bottom:1.1rem; width:190px; height:auto; }
.foot__blurb{ font-size:.82rem; line-height:1.6; color:var(--ink-mute); max-width:34ch; }
.foot__tel{ margin-top:.9rem; font-family:var(--font-mono); font-size:.95rem; }
.foot__tel a:hover{ color:var(--elec); }
.foot__top{ border-bottom:1px solid var(--line-d); }
.foot__h{ color:var(--ink-mute); }
.foot__nav a{ color:var(--ink); font-size:.81rem; }
.foot__nav a:hover{ color:var(--elec); }
.foot__bottom{
  border-top:1px solid var(--line-d2);
  color:var(--ink-mute); font-size:.62rem; letter-spacing:.07em;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .nav__util{ display:none; }
}
@media (max-width:1023px){
  .brand img{ width:150px; }
  .mega--wide, .mega--sm{ width:100%; }

  /* the overlay is paper, so every base.css light-on-dark default needs restating */
  .nav{ background:var(--paper); }
  .nav__head{ border-bottom:1px solid var(--line-d); }
  .nav__headlabel{ color:var(--ink-mute); }
  .nav__close{ border-color:var(--line-d); }
  .nav__item{ border-bottom:1px solid var(--line-d); }
  .nav__link{ color:var(--ink); }
  .nav__foot{ color:var(--ink-mute); }
  .mega a{ color:var(--ink); }
  .nav__item--local .mega{ transform:none; }

  .plan__stage{ aspect-ratio:4/3; }
  .dig__body, .acc__body, .con__grid{ grid-template-columns:minmax(0,1fr); }
  .dig__fig, .acc__fig{ order:-1; }
  .dig__fig img{ aspect-ratio:16/9; }
  .acc__fig img{ aspect-ratio:16/9; }
  .figs{ grid-template-columns:minmax(0,1fr); }
  .figs__lead{ max-width:52ch; }
  .pas__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .case__grid{ grid-template-columns:minmax(0,1fr); }
  .case__fig img{ aspect-ratio:16/9; }
  .pas__more{ grid-template-columns:minmax(0,1fr); }
  .foot__nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  .hero__head{ grid-template-columns:minmax(0,1fr); align-items:start; gap:1.1rem; }
  .hero__lead{ max-width:52ch; }
  .pl-tag{ display:none; }
  .pl-t{ font-size:14px; letter-spacing:.06em; }
  .pl-badge-t{ font-size:14px; }
  .off__list li{ grid-template-columns:minmax(0,1fr); gap:.2rem; }
  .off__tel{ margin-top:.4rem; }
}
@media (max-width:760px){
  .sched, .sched tbody, .sched tr, .sched tbody th, .sched tbody td{ display:block; width:auto; }
  .sched thead{ display:none; }
  .sched tbody tr{
    display:grid; grid-template-columns:2.4rem minmax(0,1fr);
    gap:.1rem .6rem; padding:1rem 0;
    border-bottom:1px solid var(--line-d2);
  }
  .sched tbody th, .sched tbody td{ border:0; padding:0; }
  .sched__n{ grid-column:1; grid-row:1; padding-top:.4rem; }
  .sched tbody th[scope="row"]{ grid-column:2; }
  .sched tbody td[data-label]{ grid-column:2; }
  .sched tbody th a{ font-size:1.02rem; }
  .sched tbody td:nth-child(3){ margin-top:.35rem; }
  .sched tbody td:nth-child(4){ margin-top:.3rem; }
  .sched tbody td[data-label]::before{
    content:attr(data-label); display:inline;
    font-family:var(--font-mono); font-size:.55rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ink-mute);
    margin-right:.45rem;
  }
  .sched tbody td.sched__n::before{ display:none; }
  .figs__grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:520px){
  .plan__stage{ aspect-ratio:5/6; }
}
@media (max-width:640px){
  .hero__facts{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hero__facts li:last-child{ display:none; }
  .plan__bar, .plan__foot{ padding-inline:.65rem; }
  .plan__key{ font-size:.6rem; gap:.45rem .9rem; }
  .plan__note{ display:none; }
  .pas__grid{ grid-template-columns:minmax(0,1fr); }
  .pas__top{ height:78px; }
  .pas__axis{ font-size:.56rem; letter-spacing:.12em; }
  .pas__axis p:last-child{ display:none; }
  .acc__list div{ grid-template-columns:minmax(0,1fr); gap:.15rem; }
  .con__facts div{ grid-template-columns:minmax(0,1fr); gap:.2rem; }
  .con__facts dt{ padding-top:0; }
  .foot__nav{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .plan__sweep{ display:none; }
  .pl-u{ opacity:1 !important; transform:none !important; }
  .dig__fig:hover img, .acc__fig:hover img, .case__fig:hover img{ filter:grayscale(1); }
}