/* ==========================================================================
   NMS Engineering Service — "The Load Path"
   base.css owns: reset, wrap, sections, header/nav/mega mechanics, buttons,
   forms, footer skeleton, reveals, preloader shell, hero headline contract.
   This file: tokens, the drawing, and the page's own sections.
   ========================================================================== */

:root{
  /* --- palette: drafting paper, one structural blue, one load-arrow rust --- */
  --ink:        #14181d;
  --ink-2:      #1a2027;
  --ink-3:      #212a33;
  --paper:      #f4f2ec;
  --paper-2:    #ece8de;
  --rule:       #d9d6cd;
  --blue:       #2b5f8f;
  --rust:       #b4522d;
  --rust-lit:   #d97445;
  --green:      #3f6b4a;

  /* base.css expects these names */
  --surface:    #f4f2ec;
  --surface-2:  #ece8de;
  --text:       #f4f2ec;
  --muted:      #9aa0a8;
  --ink-text:   #14181d;
  --ink-mute:   #5c646d;
  --accent:     #2b5f8f;
  --accent-lit: #6d9dcb;
  --accent-2:   #b4522d;
  --line:       rgba(20,24,29,.16);
  --line-inv:   rgba(244,242,236,.16);
  --line-d:     rgba(20,24,29,.09);
  --grid:       rgba(20,24,29,.055);

  /* --- type --- */
  --font-display: "Rokkitt", Georgia, serif;
  --font-body:    "Cambay", "Segoe UI", sans-serif;
  --font-mono:    "Fira Code", ui-monospace, Menlo, monospace;

  --wrap-max: 1240px;
  --radius:   2px;
  --pad:      clamp(1.15rem, 4vw, 2.6rem);
}

body{
  background:var(--paper);
  color:var(--ink);
  font-size:16.5px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:10000;
  padding:.75rem 1rem; background:var(--ink); color:var(--paper);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em;
}
.skip:focus{ left:.6rem; top:.6rem; }

::selection{ background:var(--rust); color:var(--paper); }

/* ==========================================================================
   PRELOADER — paper ground, the load path drawn in
   ========================================================================== */
.pre{ background:var(--paper); }
.pre__mark{ width:min(220px,54vw); margin-bottom:2.4rem; }
.pre__mark svg{ width:100%; height:auto; display:block; }
.pre__roof,.pre__wall,.pre__floor{ fill:none; stroke:var(--ink); stroke-width:1.5; opacity:.55; }
.pre__floor{ opacity:.28; }
.pre__arrow{
  fill:none; stroke:var(--rust); stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:110; stroke-dashoffset:110;
  animation:preDraw 1.15s cubic-bezier(.4,0,.2,1) .15s forwards;
}
.pre__head{ fill:var(--rust); opacity:0; animation:preHead .3s ease 1.05s forwards; }
.pre__meta{ color:var(--ink-mute); }
.pre__pct{ color:var(--rust); }
.pre__bar{ background:var(--rule); }
.pre__bar i{ background:var(--rust); }
@keyframes preDraw{ to{ stroke-dashoffset:0; } }
@keyframes preHead{ to{ opacity:1; } }

/* ==========================================================================
   HEADER / NAV — paper, hairline, one rust button
   ========================================================================== */
.hdr{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
@media (min-width:1024px){
  .hdr{
    background:color-mix(in srgb, var(--paper) 91%, transparent);
    backdrop-filter:blur(14px) saturate(1.05);
    -webkit-backdrop-filter:blur(14px) saturate(1.05);
  }
}
.hdr__in{ min-height:74px; }

.brand{ display:flex; align-items:center; gap:.62rem; color:var(--ink); }
.brand__mark{ width:30px; height:30px; flex:0 0 auto; color:var(--ink); }
.brand__txt{ display:block; line-height:1; }
.brand__txt b{
  display:block; font-family:var(--font-display);
  font-size:1.45rem; font-weight:700; letter-spacing:-.01em; line-height:.86;
}
.brand__txt i{
  display:block; font-style:normal; font-family:var(--font-mono);
  font-size:.48rem; letter-spacing:.23em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:.4rem;
}

.nav__link{ font-family:var(--font-body); font-size:.89rem; border-radius:2px; }
.nav__link:hover{ color:var(--rust); background:rgba(20,24,29,.055); }
.nav__item.is-open > .nav__link{ color:var(--rust); }
.nav__item.nav__cta > .nav__link{
  background:var(--rust); color:#fdfbf7; padding:.6rem 1rem;
  font-weight:700; letter-spacing:.01em;
}
.nav__item.nav__cta > .nav__link:hover{ background:#9c4526; color:#fdfbf7; }
.nav__item.nav__util > .nav__link{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em; }

/* mega panel: a dark sheet dropped out of the header */
.mega{
  background:var(--ink-2);
  border:1px solid rgba(244,242,236,.14);
  border-radius:2px;
  box-shadow:0 34px 70px -22px rgba(20,24,29,.55);
}
.megap{ display:grid; grid-template-columns:1fr 1fr .92fr; gap:1.7rem; }
.mega__h{ color:var(--rust-lit); border-bottom-color:rgba(244,242,236,.14); }
.mega__list{ gap:0; }
.megap__n{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.08em;
  color:rgba(244,242,236,.4); margin-right:.6rem;
}
.mega__list--plain li > span{
  display:block; padding:.34rem 0; font-size:.845rem; line-height:1.35;
  color:rgba(244,242,236,.6); overflow-wrap:anywhere;
}
.megap__note{ font-size:.8rem; line-height:1.62; color:rgba(244,242,236,.62); margin-bottom:.9rem; }
.mega a.megap__all{
  display:inline-block; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--rust-lit);
  border-bottom:1px solid currentColor; padding-bottom:.24rem;
}
.mega a.megap__all:hover{ color:#e07a4f; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{ border-radius:2px; font-weight:700; letter-spacing:.01em; }
.btn--solid{ background:var(--rust); color:#fdfbf7; }
.btn--ghost{ border:1px solid rgba(20,24,29,.28); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--paper); }

/* ==========================================================================
   HERO — the drawing
   ========================================================================== */
.hero{
  position:relative;
  padding-top:clamp(2.6rem,5.5vw,4.6rem);
  padding-bottom:0;
  border-bottom:1px solid var(--rule);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:32px 32px;
  background-position:center top;
  overflow:hidden;
}
.hero__in{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,4vw,3rem);
  align-items:start;
}
.hero__copy{ padding-top:clamp(.3rem,2vw,1.6rem); }
.hero__kicker{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-mono); font-size:.6rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--rust);
  margin-bottom:1.5rem;
}
.hero__kicker::before{
  content:""; width:28px; height:1px; background:currentColor; flex:0 0 auto;
}
.hero__h1{
  font-weight:600; line-height:.94; letter-spacing:-.014em;
  margin-bottom:1.5rem;
}
.hero__lead{
  font-size:1rem; line-height:1.72; color:var(--ink-mute);
  max-width:47ch; margin-bottom:1.9rem;
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.6rem; }

.hero__draw{ margin:0; max-width:590px; }
.hero__draw .dwg{ width:100%; height:auto; display:block; }
.hero__cap{
  font-family:var(--font-mono); font-size:.6rem; line-height:1.7;
  letter-spacing:.03em; color:var(--ink-mute);
  margin-top:.9rem; padding-top:.7rem; border-top:1px solid var(--rule);
  max-width:52ch;
}

/* --- drawing linework --- */
.dwg text{
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.12em; fill:var(--ink);
}
.dwg__lab text{ font-size:11.5px; font-weight:500; }
.dwg__title text{ font-size:9px; fill:var(--ink-mute); letter-spacing:.15em; }
.dwg__note text{ font-size:10.5px; font-weight:500; fill:var(--rust); }
.dwg .lpwrap{ stroke:var(--rust); stroke-width:2.6; fill:none; stroke-linecap:round; }
.dwg .lpwrap--lintel{ stroke-width:2.05; }
.dwg .lp__h{ fill:var(--rust); stroke:none; }
.lp__s{ stroke-dasharray:1; stroke-dashoffset:0; }

.hero__draw.is-run .lp__s{
  animation:lpDraw .5s cubic-bezier(.4,0,.2,1) both;
  animation-delay:calc(var(--i) * 80ms + 280ms);
}
.hero__draw.is-run .lp__h{
  animation:lpHead .3s ease both;
  animation-delay:calc(var(--i) * 80ms + 760ms);
}
@keyframes lpDraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes lpHead{ from{ opacity:0; } to{ opacity:1; } }

/* --- the drawing key --- */
.key{
  margin-top:clamp(2rem,4.5vw,3.2rem);
  padding-top:1.1rem;
  border-top:1px solid var(--rule);
  max-width:400px;
}
.key__h{
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:.85rem;
}
.key ul{ display:grid; gap:.62rem; }
.key li{ display:grid; grid-template-columns:38px minmax(0,1fr); gap:.8rem; align-items:start; }
.key__sw{ display:block; height:10px; margin-top:.22rem; }
.key__sw svg{ display:block; width:34px; height:10px; }
.key__sw--cut{
  width:22px; height:12px; border:1px solid rgba(20,24,29,.6);
  background-image:repeating-linear-gradient(-45deg, rgba(20,24,29,.65) 0 1px, transparent 1px 4px);
}
.key__sw--far{ width:30px; height:12px; border-bottom:1px solid var(--blue); }
.key__t{
  display:block; font-size:.79rem; line-height:1.35; color:var(--ink);
  font-weight:700; letter-spacing:.01em;
}
.key__t em{
  display:block; font-style:normal; font-weight:400;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.02em;
  color:var(--ink-mute); margin-top:.18rem;
}

/* --- drawing title block --- */
.tblock{
  margin-top:clamp(2.2rem,4vw,3.4rem);
  border-top:1px solid var(--ink);
  background:var(--paper);
}
.tblock__in{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
}
.tblock__in > div{
  padding:.8rem 1rem .9rem;
  border-left:1px solid var(--rule);
}
.tblock__in > div:first-child{ border-left:0; padding-left:0; }
.tblock__in span{
  display:block; font-family:var(--font-mono); font-size:.5rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:.32rem;
}
.tblock__in b{
  display:block; font-family:var(--font-mono); font-size:.67rem; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
}

/* ==========================================================================
   PROOF STRIP
   ========================================================================== */
.proof{ background:var(--paper-2); border-bottom:1px solid var(--rule); }
.proof__in{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.proof__in > div{ padding:1.1rem 1.1rem 1.15rem; border-left:1px solid var(--rule); }
.proof__in > div:first-child{ border-left:0; padding-left:0; }
.proof__in b{
  display:block; font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:.28rem;
}
.proof__in span{ display:block; font-size:.73rem; line-height:1.5; color:var(--ink-mute); }

/* ==========================================================================
   SECTION HEAD — number in the margin, note on the right
   ========================================================================== */
.shead{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.6rem);
  align-items:start;
  padding-top:1.05rem;
  border-top:1px solid rgba(20,24,29,.9);
  margin-bottom:clamp(2.4rem,4.4vw,3.6rem);
}
.shead__n{
  font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; color:var(--rust); padding-top:.18rem;
}
.shead__h{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,2.85rem); font-weight:600;
  line-height:1.02; letter-spacing:-.022em; margin-bottom:.95rem; max-width:24ch;
}
.shead__lead{ font-size:.96rem; line-height:1.72; color:var(--ink-mute); max-width:60ch; }
.shead__note{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute); white-space:nowrap;
  padding-top:.26rem;
}
.shead--onink{ border-top-color:rgba(244,242,236,.45); }
.shead--onink .shead__h{ color:var(--paper); }
.shead--onink .shead__lead{ color:rgba(244,242,236,.62); }
.shead--onink .shead__note{ color:rgba(244,242,236,.58); }

/* ==========================================================================
   01 — SPECIFICATION LIST
   ========================================================================== */
.spec{ border-top:1px solid var(--rule); }
.spec__row{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) 42px;
  gap:clamp(.8rem,2.4vw,2rem);
  align-items:start;
  padding:1.4rem .6rem 1.45rem 0;
  border-bottom:1px solid var(--rule);
  transition:background .22s var(--ease);
}
.spec__row:hover{ background:rgba(20,24,29,.028); }
.spec__ref{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em;
  color:var(--ink-mute); padding-top:.4rem;
}
.spec__t{
  font-family:var(--font-display); font-size:clamp(1.18rem,2vw,1.52rem);
  font-weight:500; line-height:1.16; letter-spacing:-.008em; margin-bottom:.45rem;
}
.spec__d{ font-size:.9rem; line-height:1.66; color:var(--ink-mute); max-width:58ch; }
.spec__go{
  justify-self:end; align-self:start;
  font-family:var(--font-mono); font-size:1.05rem; line-height:1;
  color:var(--rust); opacity:.5; padding-top:.3rem;
  transition:transform .22s var(--ease), opacity .22s;
}
.spec__row:hover .spec__go{ transform:translateX(4px); opacity:1; }
.spec__go--off{ visibility:hidden; }
.spec__row--plain:hover .spec__go{ transform:none; opacity:.35; }
.spec__foot{
  margin-top:1.7rem; font-family:var(--font-mono); font-size:.62rem;
  line-height:1.9; letter-spacing:.03em; color:var(--ink-mute); max-width:78ch;
}
.spec__foot span{ color:rgba(20,24,29,.4); }

/* ==========================================================================
   02 — THE DRAWING REGISTER
   ========================================================================== */
.sect--paper2{ background:var(--paper-2); color:var(--ink); }
.reg__grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,.78fr);
  gap:clamp(1.6rem,3.5vw,3.2rem);
  align-items:start;
}
.reg__t{ width:100%; border-collapse:collapse; }
.reg__t caption{
  text-align:left; font-family:var(--font-mono); font-size:.55rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
  padding-bottom:.75rem;
}
.reg__t th[scope="col"]{
  font-family:var(--font-mono); font-size:.53rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
  text-align:left; padding:.6rem; border-bottom:1px solid var(--ink);
}
.reg__t tr > *:first-child{ padding-left:0; }
.reg__t tbody th{
  font-family:var(--font-mono); font-size:.6rem; font-weight:500;
  letter-spacing:.06em; color:var(--rust);
  text-align:left; vertical-align:top; white-space:nowrap;
  padding:1rem .6rem 1rem 0; border-bottom:1px solid var(--rule);
}
.reg__t td{
  padding:1rem .6rem; vertical-align:top; border-bottom:1px solid var(--rule);
}
.reg__t td b{
  display:block; font-size:.91rem; font-weight:700; line-height:1.3;
  color:var(--ink); margin-bottom:.22rem;
}
.reg__t td span{ display:block; font-size:.76rem; line-height:1.52; color:var(--ink-mute); }
.reg__t td:nth-child(3),
.reg__t td:nth-child(4){
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.03em;
  color:var(--ink-mute); white-space:nowrap;
}
.reg__t tbody tr:hover > *{ background:rgba(20,24,29,.032); }
.reg__cap{
  margin-top:1rem; font-family:var(--font-mono); font-size:.58rem;
  line-height:1.8; letter-spacing:.02em; color:var(--ink-mute); max-width:56ch;
}
.reg__sheet{
  margin:0; background:var(--paper);
  border:1px solid var(--rule);
  padding:.62rem;
}
.reg__sheetimg{ background:var(--ink-2); overflow:hidden; }
.reg__sheet img{ display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; }
.reg__sheet figcaption{
  font-family:var(--font-mono); font-size:.58rem; line-height:1.75;
  letter-spacing:.02em; color:var(--ink-mute); padding-top:.8rem;
}
.reg__tag{
  display:block; font-size:.52rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rust); margin-bottom:.3rem;
}

/* ==========================================================================
   03 — THE WORK
   ========================================================================== */
.work__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.6rem,4vw,3.4rem);
  align-items:start;
}
.work__plate{ margin:0; }
.work__plate img{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border:1px solid var(--rule); background:var(--paper-2);
}
.work__plate figcaption{
  margin-top:.85rem; font-family:var(--font-mono); font-size:.58rem;
  line-height:1.8; letter-spacing:.02em; color:var(--ink-mute);
}
.work__plate figcaption span{
  font-size:.52rem; letter-spacing:.2em; text-transform:uppercase; color:var(--rust);
}
.work__h{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute);
  padding-bottom:.85rem; border-bottom:1px solid var(--ink);
}
.work__ul{ columns:2; column-gap:clamp(1rem,2.6vw,2.2rem); }
.work__ul li{
  break-inside:avoid;
  padding:.56rem 0; border-bottom:1px solid var(--rule);
  font-size:.86rem; line-height:1.38;
}
.work__a{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:1.5rem;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rust);
  border-bottom:1px solid currentColor; padding-bottom:.24rem;
}
.work__a:hover{ color:#9c4526; }

/* ==========================================================================
   04 — THE GROUP
   ========================================================================== */
.grp{ background:var(--ink); color:var(--text); position:relative; overflow:hidden;
  padding-block:clamp(3rem,5.4vw,5rem); }
.grp::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(244,242,236,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,242,236,.045) 1px, transparent 1px);
  background-size:34px 34px;
}
.grp .wrap{ position:relative; }
.grp__fig{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; }
.grp__fig img{
  width:min(250px,56vw); height:auto;
  background:#fff; padding:.7rem;
  border:1px solid rgba(244,242,236,.16);
}
.grp__fig figcaption{
  font-family:var(--font-mono); font-size:.58rem; line-height:1.75;
  letter-spacing:.04em; color:rgba(244,242,236,.5); max-width:30ch;
}

/* ==========================================================================
   05 — CONTACT
   ========================================================================== */
.con__grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.8rem,4vw,3.6rem);
  align-items:start;
}
.con__acts{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-start; }
.con__note{
  flex-basis:100%; margin-top:.55rem;
  font-family:var(--font-mono); font-size:.58rem; line-height:1.8;
  letter-spacing:.02em; color:var(--ink-mute);
}
.con__facts{ display:grid; border-top:1px solid var(--ink); }
.con__facts > div{
  display:grid; grid-template-columns:82px minmax(0,1fr); gap:1rem;
  padding:.88rem 0; border-bottom:1px solid var(--rule);
}
.con__facts dt{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute); padding-top:.24rem;
}
.con__facts dd{ font-size:.93rem; line-height:1.5; min-width:0; overflow-wrap:anywhere; }
.con__facts a{ border-bottom:1px solid rgba(20,24,29,.28); }
.con__facts a:hover{ border-color:var(--rust); color:var(--rust); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ color:var(--text); }
.foot__top{ grid-template-columns:minmax(0,.86fr) minmax(0,1.6fr); }
.foot__nav{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.brand--foot{ color:var(--paper); }
.brand--foot .brand__txt i{ color:rgba(244,242,236,.5); }
.foot__blurb{
  margin-top:1.25rem; font-size:.84rem; line-height:1.7;
  color:rgba(244,242,236,.62); max-width:40ch;
}
.foot__tel{
  margin-top:1.15rem; font-family:var(--font-mono);
  font-size:.95rem; letter-spacing:.02em;
}
.foot__tel a{ border-bottom:1px solid rgba(244,242,236,.34); padding-bottom:.14rem; }
.foot__tel a:hover{ color:var(--rust); border-color:var(--rust); }
.foot__nav li span{ font-size:.83rem; color:rgba(244,242,236,.52); }
.foot__nav a,.foot__nav li span,.con__facts dd{ overflow-wrap:anywhere; }
.foot__bottom{ border-top:0; }
.foot__fine{
  margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid rgba(244,242,236,.12);
  font-size:.67rem; line-height:1.8; color:rgba(244,242,236,.5); max-width:94ch;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:1024px){
  .hero__in{ grid-template-columns:minmax(0,1.01fr) minmax(0,.99fr); gap:clamp(2rem,4vw,3.4rem); }
  .hero__draw{
    border-left:1px solid var(--rule);
    padding-left:clamp(1.2rem,3vw,2.6rem);
    margin-left:0;
  }
  .hero__draw .dwg{ width:auto; height:min(72vh,760px); max-width:100%; }
}

@media (min-width:1024px){
  .nav__foot{ display:none; }
}

@media (max-width:1023px){
  .nav{ background:var(--paper); }
  .nav__link{ color:var(--ink); }
  .nav__head{ border-bottom-color:var(--rule); }
  .nav__headlabel{ color:var(--ink-mute); }
  .nav__close{ border-color:var(--rule); color:var(--ink); }
  .nav__item{ border-bottom-color:var(--rule); }
  .nav__foot{ color:var(--ink-mute); }
  .burger{ border-color:rgba(20,24,29,.24); }
  .burger span{ background:var(--ink); }
  .nav__item.nav__cta{ border-bottom:0; margin-top:1rem; }
  .nav__item.nav__cta > .nav__link{ justify-content:center; padding:.9rem 1rem; }
  .mega__h{ border-bottom:0; }
}

@media (max-width:900px){
  .reg__grid{ grid-template-columns:minmax(0,1fr); }
  .reg__sheet{ max-width:460px; }
  .work__grid{ grid-template-columns:minmax(0,1fr); gap:2rem; }
  .work__plate{ max-width:520px; }
  .con__grid{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:860px){
  .shead{ grid-template-columns:auto minmax(0,1fr); column-gap:1rem; row-gap:.55rem; }
  .shead__n{ grid-column:1; grid-row:1; }
  .shead__note{ grid-column:2; grid-row:1; justify-self:end; padding-top:.14rem; }
  .shead__main{ grid-column:1 / -1; grid-row:2; }
  .shead__h{ max-width:30ch; }
}

@media (max-width:760px){
  .reg__t thead{ display:none; }
  .reg__t,.reg__t tbody,.reg__t tr,.reg__t th,.reg__t td{ display:block; }
  .reg__t tr{ padding:1rem 0; border-bottom:1px solid var(--rule); }
  .reg__t tr:hover > *{ background:none; }
  .reg__t tbody th{ padding:0 0 .32rem; border-bottom:0; }
  .reg__t td{ padding:0; border-bottom:0; }
  .reg__t td:nth-child(3),
  .reg__t td:nth-child(4){
    display:inline-block; margin-top:.5rem; margin-right:1.1rem; white-space:normal;
  }
  .reg__t td:nth-child(3)::before,
  .reg__t td:nth-child(4)::before{
    content:attr(data-l) " · "; color:rgba(20,24,29,.4);
    text-transform:uppercase; letter-spacing:.14em; font-size:.54rem;
  }
  .proof__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .proof__in > div{ padding:1rem 1rem 1.05rem; }
  .proof__in > div:nth-child(odd){ border-left:0; padding-left:0; }
  .proof__in > div:nth-child(n+3){ border-top:1px solid var(--rule); }
  .tblock__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tblock__in > div{ padding:.7rem .9rem .8rem; }
  .tblock__in > div:nth-child(odd){ border-left:0; padding-left:0; }
  .tblock__in > div:nth-child(n+3){ border-top:1px solid var(--rule); }
}

@media (max-width:620px){
  .spec__row{ grid-template-columns:44px minmax(0,1fr) 24px; gap:.75rem; padding-right:.2rem; }
  .spec__go{ font-size:.95rem; }
  .hero__kicker{ font-size:.54rem; letter-spacing:.16em; }
  .work__ul{ columns:1; }
}

@media (max-width:420px){
  .proof__in{ grid-template-columns:minmax(0,1fr); }
  .proof__in > div{ border-left:0; padding-left:0; }
  .proof__in > div + div{ border-top:1px solid var(--rule); }
  .tblock__in{ grid-template-columns:minmax(0,1fr); }
  .tblock__in > div{ border-left:0; padding-left:0; }
  .tblock__in > div + div{ border-top:1px solid var(--rule); }
  .con__facts > div{ grid-template-columns:68px minmax(0,1fr); }
}

/* ==========================================================================
   REDUCED MOTION — the drawing is simply drawn
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .lp__s{ animation:none !important; stroke-dasharray:none; stroke-dashoffset:0; }
  .lp__h{ animation:none !important; opacity:1; }
  .pre__arrow{ animation:none !important; stroke-dashoffset:0; }
  .pre__head{ animation:none !important; opacity:1; }
}