/* ==========================================================================
   Livingston Building Services — "The Run"
   --------------------------------------------------------------------------
   base.css owns the reset, wrap, sections, header/nav/mega mechanics, buttons,
   forms, footer skeleton, reveals, preloader shell and the hero contract.
   This file supplies the palette, the section drawing and the six sections.

   Ground rule (batch 9): white instead of off-white. Sections still alternate —
   white → ink → brand blue → white. Pale grey only inside small functional
   blocks (the check table header), never as a section ground.
   ========================================================================== */

:root{
  /* ---------- palette ---------- */
  --ink:        #11161a;
  --ink-2:      #161c21;
  --ink-3:      #1c2329;
  --white:      #ffffff;
  --steel:      #77808a;
  --blue:       #1f5f8f;
  --blue-d:     #17496d;
  --blue-lit:   #7fb6d9;
  --red:        #c2452d;

  /* ---------- base.css contract ---------- */
  --surface:    #ffffff;
  --surface-2:  #f5f6f7;
  --text:       #f2f5f7;
  --muted:      rgba(242,245,247,.55);
  --ink-text:   #11161a;
  --ink-mute:   #5c6670;
  --accent:     var(--blue);
  --accent-lit: var(--blue-lit);
  --accent-2:   var(--red);

  /* --line is the hairline for INK surfaces (base.css uses it on the header,
     the footer and the mega panel); --line-d is its white-surface twin. */
  --line:       rgba(255,255,255,.13);
  --line-d:     rgba(17,22,26,.13);

  /* ---------- type ---------- */
  --font-display: "Smooch Sans", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Rethink Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "Lekton", ui-monospace, "SFMono-Regular", Menlo, monospace;

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

html{ scroll-padding-top:92px; }
body{ background:var(--ink); color:var(--text); font-size:16.5px; }
::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:0; }

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

/* ---------- shared section furniture ---------- */
.band--ink{ background:var(--ink); color:var(--text); }
.band--white{ background:var(--white); color:var(--ink-text); }
.band--blue{ background:var(--blue); color:var(--white); }

.sect__h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2rem, 5.6vw, 4.4rem);
  line-height:.9;
  letter-spacing:-.012em;
}
.sect__lead{ font-size:.99rem; line-height:1.68; max-width:46ch; }
.sect__lead--on-dark{ color:rgba(242,245,247,.66); }
.band--blue .sect__lead{ color:rgba(255,255,255,.86); }
.band--white .sect__lead{ color:var(--ink-mute); }

/* section tag — 01 | PLANT ————————— WHAT WE DO */
.tag{
  display:flex; align-items:center; gap:.85rem;
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  padding-bottom:1rem; margin-bottom:clamp(1.8rem,3.4vw,2.8rem);
  border-bottom:1px solid var(--line-d);
}
.band--ink .tag{ border-bottom-color:var(--line); }
.band--blue .tag{ border-bottom-color:rgba(255,255,255,.3); }
.tag__n{ color:var(--blue); font-weight:700; }
.band--ink .tag__n{ color:var(--blue-lit); }
.band--blue .tag__n{ color:#fff; }
.tag__l{ color:inherit; font-weight:700; letter-spacing:.24em; }
.tag__r{ flex:1 1 auto; height:1px; background:currentColor; opacity:.22; min-width:1.5rem; }
.tag__x{ color:var(--steel); }
.band--blue .tag__x{ color:rgba(255,255,255,.66); }

/* ==========================================================================
   PRELOADER — the run draws itself
   ========================================================================== */
.pre{ background:var(--ink); }
.pre__mark svg{ width:200px; height:auto; display:block; }
.pre__slab{ stroke:rgba(255,255,255,.16); stroke-width:1.4; }
.pre__run{
  stroke:var(--blue-lit); stroke-width:2.4; stroke-linejoin:miter;
  stroke-dasharray:320; stroke-dashoffset:320;
  animation:predraw 1.5s var(--ease) forwards;
}
.pre__dot{ fill:var(--red); }
.pre__meta{ color:rgba(242,245,247,.5); }
.pre__pct{ color:var(--blue-lit); }
.pre__bar{ background:rgba(255,255,255,.14); height:1px; }
.pre__bar i{ background:var(--blue-lit); }
@keyframes predraw{ to{ stroke-dashoffset:0; } }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{ border-bottom:1px solid var(--line); }
.hdr__in{ min-height:74px; gap:.8rem; }
.brand img{ width:196px; height:auto; }
.nav__link{
  font-family:var(--font-body);
  font-size:.775rem; font-weight:500; letter-spacing:.005em;
  padding:.52rem .58rem;
  color:rgba(242,245,247,.82);
}
.nav__link:hover{ color:#fff; background:rgba(255,255,255,.06); }
.nav__item.is-open > .nav__link{ color:var(--blue-lit); }
.nav__chev{ opacity:.5; }
.hdr__cta{
  margin-left:.7rem; flex-shrink:0;
  display:inline-flex; align-items:center;
  padding:.58rem 1.05rem;
  background:#ffffff; color:var(--ink);
  font-size:.775rem; font-weight:600;
  border-radius:var(--radius);
  transition:background .2s var(--ease), color .2s, transform .2s var(--ease);
}
.hdr__cta:hover{ background:var(--blue); color:#fff; transform:translateY(-1px); }
@media (max-width:1279px){ .hdr__cta{ display:none; } }

/* mega panel */
.megap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:1.6rem; }
.megap__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.05rem 1.4rem; }
.megap__n{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.1em;
  color:var(--blue-lit); margin-right:.55rem; opacity:.8;
}
.megap__side{ border-left:1px solid var(--line); padding-left:1.6rem; }
.megap__note{ font-size:.8rem; line-height:1.6; color:rgba(242,245,247,.6); margin-bottom:.9rem; }
.megap__all{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-lit); border-bottom:1px solid rgba(127,182,217,.4); padding-bottom:.2rem;
}
.megap__all:hover{ color:#fff; border-bottom-color:#fff; }
.mega a{ font-size:.8rem; }

/* ==========================================================================
   HERO — a ceiling void in section
   ========================================================================== */
.hero{
  background:var(--white); color:var(--ink-text);
  padding-top:clamp(1rem,2vw,1.6rem);
  padding-bottom:0;
}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--steel);
  padding-bottom:.85rem; border-bottom:1px solid var(--line-d);
}
.hero__meta-r{ margin-left:auto; }
.hero__top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.36fr);
  gap:clamp(1.6rem,4vw,3.4rem);
  align-items:end;
  padding-block:clamp(1.5rem,3.4vw,2.6rem) clamp(1.4rem,2.6vw,2.1rem);
}
.hero__h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.9rem, 8.4vw, 5.5rem);
  line-height:.9;
  letter-spacing:.002em;
  text-transform:uppercase;
}
.hero__h1 .line{ padding-block:.12em; }
.hero__lead{ margin-top:1.1rem; font-size:.99rem; line-height:1.66; color:var(--ink-mute); max-width:54ch; }
.hero__acts{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }

.btn{ border-radius:var(--radius); padding:.82rem 1.3rem; font-size:.83rem; font-weight:500; }
.btn--solid{ background:var(--blue); color:#fff; }
.btn--solid:hover{ background:var(--blue-d); transform:translateY(-2px); filter:none; }
.btn--line{ border:1px solid rgba(17,22,26,.26); color:var(--ink-text); }
.btn--line:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.hero__facts{ display:grid; gap:.85rem; }
.hero__facts div{ border-top:1px solid var(--line-d); padding-top:.45rem; }
.hero__facts dt{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel); margin-bottom:.2rem;
}
.hero__facts dd{
  font-family:var(--font-display); font-size:1.15rem; font-weight:500;
  line-height:1.15; letter-spacing:.005em;
}

/* the drawing */
.hero__sheet{ border-top:1px solid var(--line-d); }
.void{ display:block; width:100%; height:auto; }
.void__halo{ stroke:rgba(31,95,143,.13); stroke-width:15; stroke-linejoin:miter; }
.void__run{
  stroke:var(--blue); stroke-width:5; stroke-linejoin:miter; stroke-linecap:square;
  stroke-dasharray:2400; stroke-dashoffset:2400;
  animation:drawrun 1.8s var(--ease) 1.1s forwards;
}
.void__node{ fill:var(--blue); }
.void__labels text{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  fill:#5c6670;
}
.void__labels .void__t-red{ fill:var(--red); }
.void__labels .void__t-mid{ fill:#98a2ab; }
@keyframes drawrun{ to{ stroke-dashoffset:0; } }

.legend{
  display:flex; flex-wrap:wrap; gap:.65rem 1.5rem;
  padding:1.05rem 0 1.6rem;
  border-top:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel);
}
.legend li{ display:flex; align-items:center; }
.lg{ display:inline-block; width:22px; height:10px; margin-right:.55rem; flex-shrink:0; }
.lg--run{ height:3px; background:var(--blue); }
.lg--duct{ border:1.4px solid var(--ink-text); background:#fff; }
.lg--pipe{ height:8px; border:1.4px solid var(--ink-text); border-radius:5px; background:#fff; }
.lg--tray{ height:9px; border-top:1.4px solid var(--ink-text); border-bottom:1.4px solid var(--ink-text); }
.lg--hv{
  height:7px; border:1.4px solid var(--red);
  background:repeating-linear-gradient(45deg, var(--red) 0 1.5px, transparent 1.5px 4px);
}
.lg--spk{
  height:6px; border-top:1.6px solid var(--ink-text);
  background:radial-gradient(circle at 50% 100%, var(--ink-text) 1.6px, transparent 2px);
}

/* ==========================================================================
   01 — PLANT · take-off rows
   ========================================================================== */
.takeoff{ border-top:1px solid var(--line); }
.takeoff__row{
  display:grid;
  grid-template-columns:4.2rem minmax(0,1.05fr) minmax(0,1fr) 1.4rem;
  gap:clamp(.6rem,1.6vw,1.6rem);
  align-items:baseline;
  padding:1.05rem .5rem 1.05rem 0;
  border-bottom:1px solid var(--line);
  transition:background .2s var(--ease), padding-left .2s var(--ease),
             opacity .7s var(--ease), transform .7s var(--ease);
}
.takeoff__row:hover{ background:rgba(255,255,255,.045); padding-left:.5rem; }
.takeoff__ref{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  color:var(--blue-lit); opacity:.85;
}
.takeoff__name{
  font-family:var(--font-display); font-size:clamp(1.15rem,1.9vw,1.55rem);
  font-weight:500; line-height:1.06; letter-spacing:.002em;
  color:var(--text);
  transition:color .2s;
  overflow-wrap:anywhere;
}
.takeoff__row:hover .takeoff__name{ color:var(--blue-lit); }
.takeoff__scope{ font-size:.855rem; line-height:1.55; color:rgba(242,245,247,.56); }
.takeoff__go{ color:var(--steel); transition:transform .2s var(--ease), color .2s; }
.takeoff__row:hover .takeoff__go{ transform:translateX(4px); color:var(--blue-lit); }

/* ==========================================================================
   02 — VOID · the coordination check
   ========================================================================== */
.coord{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);
  gap:clamp(2rem,4.2vw,3.8rem);
  align-items:start;
}
.coord__intro .sect__lead{ margin-top:1.1rem; }

.checks{ border:1px solid var(--line-d); }
.checks__head{
  display:grid; grid-template-columns:3.4rem minmax(0,.8fr) minmax(0,1.5fr);
  gap:.9rem; align-items:center;
  padding:.55rem .95rem;
  background:var(--surface-2);
  border-bottom:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel);
}
.check{
  display:grid; grid-template-columns:3.4rem minmax(0,.8fr) minmax(0,1.5fr);
  gap:.9rem;
  padding:1.1rem .95rem;
  border-bottom:1px solid var(--line-d);
  transition:background .2s, opacity .7s var(--ease), transform .7s var(--ease);
}
.check--last{ border-bottom:0; }
.check:hover{ background:#fafbfc; }
.check__ref{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; color:var(--blue);
  padding-top:.28rem;
}
.check--last .check__ref{ color:var(--red); }
.check__h{
  font-family:var(--font-display); font-size:1.2rem; font-weight:500;
  line-height:1.1; letter-spacing:.005em;
}
.check__h i{ font-style:normal; color:var(--blue); opacity:.55; padding-inline:.15rem; }
.check--last .check__h i{ color:var(--red); opacity:.7; }
.check__p{ font-size:.82rem; line-height:1.62; color:var(--ink-mute); }
.check__p b{ color:var(--ink-text); font-weight:600; }

.fig{ margin:0; }
.fig img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:var(--surface-2); }
.fig figcaption{
  margin-top:.7rem;
  font-family:var(--font-mono); font-size:.58rem; line-height:1.55; letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel);
}
.fig--coord{ margin-top:clamp(1.8rem,3.4vw,2.6rem); }

/* ==========================================================================
   03 — TERMINAL · sectors
   ========================================================================== */
.sectors{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,4.4vw,4.4rem);
  border-top:1px solid rgba(255,255,255,.3);
}
.sectors li{
  display:grid; grid-template-columns:2.2rem minmax(0,1fr);
  column-gap:.4rem; row-gap:.1rem;
  padding:1.05rem 0;
  border-bottom:1px solid rgba(255,255,255,.24);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.sectors__n{
  grid-row:1 / span 2;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em;
  color:rgba(255,255,255,.72); padding-top:.3rem;
}
.sectors a{
  font-family:var(--font-display); font-size:clamp(1.15rem,1.9vw,1.5rem);
  font-weight:500; line-height:1.1; color:#fff;
}
.sectors li:hover a{ color:#d7ecf8; }
.sectors p{ font-size:.82rem; line-height:1.5; color:rgba(255,255,255,.8); }

/* ==========================================================================
   04 — AS-BUILT · our work
   ========================================================================== */
.feature{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.65fr);
  gap:clamp(2rem,4.4vw,3.8rem);
  padding-top:clamp(1.4rem,2.6vw,2rem);
  border-top:1px solid var(--line-d);
}
.feature__kicker{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue); margin-bottom:.8rem;
}
.feature__h{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.45rem,2.8vw,2.15rem); line-height:1.06; letter-spacing:.002em;
  margin-bottom:1rem;
}
.feature__p{ font-size:.9rem; line-height:1.68; color:var(--ink-mute); max-width:58ch; }
.feature__p + .feature__p{ margin-top:.8rem; }
.feature__data{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem 1.2rem; align-content:start; }
.feature__data div{ border-top:1px solid var(--line-d); padding-top:.5rem; }
.feature__data dt{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--steel); margin-bottom:.25rem;
}
.feature__data dd{
  font-family:var(--font-display); font-size:1.1rem; font-weight:500; line-height:1.14;
}

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.3rem;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); border-bottom:1px solid rgba(31,95,143,.35); padding-bottom:.25rem;
  transition:color .2s, border-color .2s, gap .2s var(--ease);
}
.link-arrow:hover{ color:var(--ink-text); border-bottom-color:var(--ink-text); gap:.85rem; }

.worklist{ margin-top:clamp(2.4rem,5vw,3.8rem); padding-top:1.4rem; border-top:1px solid var(--line-d); }
.worklist__h{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--steel); margin-bottom:.7rem;
}
.worklist ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2rem,4.4vw,4rem); }
.worklist li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem;
  padding:.6rem 0; border-bottom:1px solid var(--line-d);
  font-size:.865rem;
}
.worklist li a{ color:var(--ink-text); transition:color .18s; }
.worklist li a:hover{ color:var(--blue); }
.worklist li span{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--steel); text-align:right; flex-shrink:0; max-width:46%;
}

.figs{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2.4vw,1.8rem);
  margin-top:clamp(2.2rem,4.4vw,3.2rem);
}

/* ==========================================================================
   05 — TITLE BLOCK · who we are
   ========================================================================== */
.about{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,4.4rem);
  align-items:start;
}
.about__copy .sect__lead{ margin-top:1.1rem; }
.about__copy em{ font-style:normal; color:#fff; }
.about__links{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:2rem; margin-top:1.8rem; border-top:1px solid var(--line);
}
.about__links li{ border-bottom:1px solid var(--line); }
.about__links a{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.72rem 0;
  font-size:.85rem; color:rgba(242,245,247,.86);
  transition:color .18s, padding-left .18s var(--ease);
}
.about__links a:hover{ color:var(--blue-lit); padding-left:.35rem; }

.titleblock{ border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.02); }
.titleblock__hd{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.55rem .9rem;
  background:rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.2);
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(242,245,247,.66);
}
.titleblock dl > div{
  display:grid; grid-template-columns:6.6rem minmax(0,1fr);
  gap:.9rem;
  padding:.66rem .9rem;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.titleblock dl > div:last-child{ border-bottom:0; }
.titleblock dt{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); padding-top:.15rem;
}
.titleblock dd{ font-size:.82rem; line-height:1.55; color:rgba(242,245,247,.88); }
.titleblock dd a{ color:var(--blue-lit); border-bottom:1px solid rgba(127,182,217,.35); }
.titleblock dd a:hover{ color:#fff; border-bottom-color:#fff; }

/* ==========================================================================
   06 — ISSUE · contact
   ========================================================================== */
.mail{
  display:flex; align-items:baseline; gap:clamp(.7rem,2vw,1.4rem);
  padding:1.35rem 0;
  border-top:1px solid var(--ink-text); border-bottom:1px solid var(--ink-text);
  transition:background .2s, opacity .7s var(--ease), transform .7s var(--ease);
}
.mail:hover{ background:#fafbfc; }
.mail__k{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel); flex-shrink:0;
}
.mail__v{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.3rem,5.4vw,3rem); line-height:1; letter-spacing:.002em;
  color:var(--ink-text);
  min-width:0; overflow-wrap:anywhere;
  transition:color .2s;
}
.mail:hover .mail__v{ color:var(--blue); }
.mail__go{ margin-left:auto; font-size:1.3rem; color:var(--steel); transition:transform .2s var(--ease); }
.mail:hover .mail__go{ transform:translateX(5px); color:var(--blue); }

.offices{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,2.6rem);
  margin-top:clamp(2.2rem,4.6vw,3.4rem);
}
.office{ border-top:1px solid var(--line-d); padding-top:.9rem; }
.office__k{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel); margin-bottom:.7rem;
}
.office address{ font-size:.865rem; line-height:1.7; color:var(--ink-mute); margin-bottom:.55rem; }
.office a{ font-size:.865rem; color:var(--blue); border-bottom:1px solid rgba(31,95,143,.28); }
.office a:hover{ color:var(--ink-text); border-bottom-color:var(--ink-text); }
.office__p{ font-size:.865rem; line-height:1.65; color:var(--ink-mute); margin-bottom:.9rem; }
.office--note .btn{ margin-top:.1rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ padding-block:clamp(2.6rem,5vw,3.8rem) 1.6rem; }
.foot__logo{ width:172px; height:auto; margin-bottom:1.3rem; }
.foot__blurb{ font-size:.83rem; line-height:1.65; color:rgba(242,245,247,.5); max-width:36ch; }
.foot__nav a{ font-size:.82rem; }
.foot__nav a:hover{ color:var(--blue-lit); }
.foot__bottom{ border-top:1px solid var(--line); margin-top:0; }
.foot__legal{ display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; }
.foot__legal a{ transition:color .18s; }
.foot__legal a:hover{ color:var(--blue-lit); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1023px){
  .brand img{ width:158px; }
  .hero__top{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .hero__facts{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
  .coord{ grid-template-columns:minmax(0,1fr); }
  .coord__intro{ display:grid; grid-template-columns:minmax(0,1fr); }
  .about{ grid-template-columns:minmax(0,1fr); }
  .feature{ grid-template-columns:minmax(0,1fr); }
  .feature__data{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .megap{ grid-template-columns:minmax(0,1fr); }
  .megap__side{ border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:1rem; }
  .megap__grid{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:820px){
  .sectors{ grid-template-columns:minmax(0,1fr); }
  .worklist ul{ grid-template-columns:minmax(0,1fr); }
  .offices{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .figs{ grid-template-columns:minmax(0,1fr); }
  .takeoff__row{
    grid-template-columns:3.6rem minmax(0,1fr) 1.2rem;
    row-gap:.3rem;
    padding-block:.95rem;
  }
  .takeoff__ref{ grid-row:1; }
  .takeoff__name{ grid-column:2 / span 1; }
  .takeoff__scope{ grid-column:2 / span 2; }
  .takeoff__go{ grid-row:1; }
  .checks__head{ display:none; }
  .check{ grid-template-columns:3.1rem minmax(0,1fr); row-gap:.35rem; }
  .check__p{ grid-column:2; }
}

@media (max-width:640px){
  .hero__meta{ font-size:.55rem; letter-spacing:.14em; gap:.3rem .9rem; }
  .hero__meta-r{ margin-left:0; }
  .hero__facts{ grid-template-columns:minmax(0,1fr); gap:.6rem; }
  .feature__data{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .about__links{ grid-template-columns:minmax(0,1fr); }
  .offices{ grid-template-columns:minmax(0,1fr); }
  .tag__x{ display:none; }
  .titleblock dl > div{ grid-template-columns:minmax(0,1fr); gap:.2rem; }
  .mail{ flex-wrap:wrap; }
  .mail__go{ display:none; }
}

@media (max-width:1199px){
  /* below this the drawing scales past the point where 10px annotation is
     legible — the legend below carries the information instead */
  .void__labels{ display:none; }
}

/* ==========================================================================
   GRAIN — removes the digital flatness on both grounds
   ========================================================================== */
body::after{
  content:""; position:fixed; inset:0; z-index:880; pointer-events:none; opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ==========================================================================
   REDUCED MOTION — the run is simply drawn
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .pre__run{ animation:none; stroke-dashoffset:0; }
  .void__run{ animation:none; stroke-dashoffset:0; }
  .takeoff__row:hover{ padding-left:0; }
}