/* ==========================================================================
   NDS Electrical & Security — "The Ways"
   --------------------------------------------------------------------------
   base.css owns reset, wrap, sections, header/nav/mega mechanics, buttons,
   forms, footer skeleton, reveals, preloader shell and the hero contract.
   This file supplies the palette, the board and the seven sections.
   ========================================================================== */

:root{
  /* ---------- palette, from the brief ---------- */
  --black:  #0b0b0c;
  --yellow: #fdd517;
  --paper:  #f5f3ee;
  --navy:   #192730;
  --grey:   #6a6a6a;
  --white:  #ffffff;

  /* ---------- base.css contract ---------- */
  --ink:        var(--black);
  --ink-2:      #111214;
  --ink-3:      #17191b;
  --surface:    var(--paper);
  --surface-2:  #eae6dd;
  --text:       var(--white);
  --muted:      rgba(255,255,255,.58);
  --ink-text:   var(--black);
  --ink-mute:   var(--grey);
  --accent:     var(--yellow);
  --accent-lit: var(--yellow);
  --accent-2:   var(--yellow);
  --line:       rgba(255,255,255,.14);
  --line-d:     rgba(11,11,12,.15);

  /* ---------- type ---------- */
  --font-display: "Darker Grotesque", "Arial Narrow", sans-serif;
  --font-body:    "Hind", 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.75rem);
  --radius:   2px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

html{ scroll-padding-top:96px; }
body{
  background:var(--black);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16.5px;
  font-weight:400;
  line-height:1.64;
}
::selection{ background:var(--black); color:var(--yellow); }

/* a very light press grain, over everything */
body::after{
  content:""; position:fixed; inset:0; z-index:880; pointer-events:none; opacity:.022;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
.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(--black); color:var(--yellow);
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{ width:auto; height:auto; clip-path:none; }
:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }
.ways :focus-visible,.who :focus-visible,.team :focus-visible,.contact :focus-visible{ outline-color:var(--black); }

.sect__num{
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--font-mono); font-size:.62rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:1.1rem;
}
.sect__num::before{ content:""; width:20px; height:2px; background:var(--yellow); flex:none; }
.sect__h2{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 5.2vw, 4.5rem);
  font-weight:700; line-height:.86; letter-spacing:-.02em;
}
.sect__lead{ font-size:.98rem; line-height:1.66; color:var(--ink-mute); max-width:44ch; }
.ways .sect__num,.who .sect__num,.team .sect__num{ color:#7d786e; }
.work .sect__lead{ color:rgba(255,255,255,.58); }
.why .sect__lead{ color:rgba(255,255,255,.62); }

/* ==========================================================================
   PRELOADER — a rail of ways switching on
   ========================================================================== */
.pre{ background:var(--black); }
.pre__mark{ width:172px; }
.pre__mark svg{ width:172px; height:auto; display:block; }
.pre__tg{
  transform:translateY(-7px);
  animation:preFlip 1.1s var(--ease) infinite alternate;
  animation-delay:calc(var(--n) * 80ms);
}
@keyframes preFlip{ to{ transform:translateY(0); } }
.pre__meta{ color:rgba(255,255,255,.5); font-size:.58rem; letter-spacing:.16em; }
.pre__pct{ color:var(--yellow); }
.pre__bar{ background:rgba(255,255,255,.14); }
.pre__bar i{ background:var(--yellow); }

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */
.hdr{ background:var(--black); border-bottom:1px solid rgba(255,255,255,.12); }
.hdr__in{ min-height:78px; gap:1.3rem; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; }
.brand__mark{ display:block; width:23px; flex:none; }
.brand__mark svg{ display:block; width:23px; height:auto; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__txt strong{
  font-family:var(--font-display); font-size:1.72rem; font-weight:800;
  letter-spacing:.015em; line-height:.8; color:var(--white);
}
.brand__txt em{
  font-family:var(--font-mono); font-style:normal; font-size:.42rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-top:.26rem; white-space:nowrap;
}
.nav__link{
  font-family:var(--font-body); font-size:.845rem; font-weight:500;
  color:rgba(255,255,255,.86); padding:.58rem .66rem; letter-spacing:.005em;
}
.nav__link:hover{ color:var(--yellow); background:rgba(255,255,255,.05); }
.nav__item.is-open > .nav__link{ color:var(--yellow); }
.nav__tel .nav__link{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:-.01em;
  color:rgba(255,255,255,.66);
}
.nav__cta{ margin-left:.35rem; }
.nav__cta .nav__link{
  background:var(--yellow); color:var(--black);
  font-weight:600; letter-spacing:.005em;
  padding:.62rem 1rem; border-radius:2px;
}
.nav__cta .nav__link:hover{ background:#ffe14f; color:var(--black); }

/* mega */
.mega{
  width:min(640px,calc(100vw - 2rem));
  background:#101113;
  border:1px solid rgba(255,255,255,.14);
  border-top:2px solid var(--yellow);
  border-radius:2px;
  padding:1.8rem;
}
.mega--wide{ width:min(880px,calc(100vw - 2rem)); }
/* the shared JS closes the panel but leaves focus on the trigger, which would
   re-open it through base.css's :focus-within fallback. `is-esc` is set by the
   page script while the trigger still holds focus. */
@media (min-width:1024px){
  .nav__item.is-esc:focus-within > .mega{
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translate(-50%,8px);
  }
}
.megap{ display:grid; grid-template-columns:1.4fr .85fr; gap:2rem; }
.mega__h{
  color:var(--yellow); border-bottom:1px solid rgba(255,255,255,.14);
  font-size:.58rem; letter-spacing:.18em; padding-bottom:.55rem; margin-bottom:.45rem;
}
.megap__col > .mega__list{
  display:grid; grid-template-rows:repeat(3,auto); grid-auto-flow:column;
  column-gap:1.4rem;
}
.mega a{ padding:.4rem 0; font-size:.82rem; color:rgba(255,255,255,.86); }
.mega a:hover{ color:var(--yellow); }
.megap .mega__list a{ display:flex; gap:.55rem; align-items:baseline; }
.megap__n{ font-family:var(--font-mono); font-size:.58rem; color:var(--yellow); flex:none; }
.megap__col--note{ border-left:1px solid rgba(255,255,255,.14); padding-left:1.8rem; }
.megap__note{ font-size:.82rem; line-height:1.62; color:rgba(255,255,255,.6); margin-bottom:1.1rem; }
.megap .megap__tel{
  display:block; font-family:var(--font-mono); font-size:1.25rem; font-weight:500;
  letter-spacing:-.02em; color:var(--white); line-height:1.2; margin-bottom:1rem;
}
.megap .megap__tel:hover{ color:var(--yellow); }
.megap .megap__all{
  display:inline-flex; gap:.4rem; align-items:center;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--yellow) !important;
  border-bottom:1px solid rgba(253,213,23,.45); padding-bottom:.2rem;
}
.megap .megap__all:hover{ color:var(--white) !important; border-color:var(--white); transform:none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:var(--black);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:0;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 48% at 16% 22%, rgba(253,213,23,.07), transparent 62%);
}
.hero__in{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.9fr);
  gap:clamp(2.2rem,4.2vw,4.4rem); align-items:center;
  min-height:calc(100svh - 78px);
  padding-block:clamp(2.6rem,6vh,4.6rem) clamp(2.4rem,5vh,4rem);
}
.hero__copy{ max-width:640px; }
.eyebrow{
  display:flex; align-items:flex-start; gap:.55rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.58); margin-bottom:1.5rem;
}
.eyebrow__dot{
  width:6px; height:6px; border-radius:50%; background:var(--yellow); flex:none;
  margin-top:.42em;
  box-shadow:0 0 0 3px rgba(253,213,23,.14);
}
.hero__h1{
  font-size:var(--h1-size, clamp(2.9rem, 7.4vw, 5rem));
  line-height:.92; letter-spacing:-.022em; font-weight:700;
  color:var(--white); margin-bottom:1.4rem;
}
.hero__h1 .line{ overflow:visible; padding-block:.07em; }
.hero__h1 .line > span{ animation:heroLine .95s var(--ease) both; }
.hero__h1 .line:nth-child(2) > span{ animation-delay:.1s; }
@keyframes heroLine{ from{ opacity:0; transform:translateY(.28em); } }
.hero__lead{
  font-size:clamp(.98rem,1.35vw,1.07rem); line-height:1.66;
  color:rgba(255,255,255,.68); max-width:46ch; margin-bottom:2rem;
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-bottom:1.9rem; }
.hero__call{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.01em;
  border-color:rgba(255,255,255,.22);
}
.hero__call:hover{ border-color:var(--yellow); color:var(--yellow); }
.hero__marks{ display:flex; flex-wrap:wrap; gap:.35rem 0; }
.hero__marks li{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(255,255,255,.46);
}
.hero__marks li + li::before{ content:"/"; margin:0 .55rem; color:rgba(255,255,255,.22); }

.hero__board{
  position:relative; margin:0; width:100%; max-width:600px; justify-self:end;
}
.hero__shot{
  position:relative; overflow:hidden;
  aspect-ratio:1/1;
  border:1px solid rgba(255,255,255,.16); background:#141414;
}
.hero__shot img{
  position:absolute; left:38%; top:47%;
  width:126%; max-width:none; height:auto;
  transform:translate(-50%,-50%);
  filter:saturate(.9) contrast(1.03);
}
.hero__shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 55px rgba(0,0,0,.42);
}
.hero__slug{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--yellow);
  background:rgba(11,11,12,.82); border:1px solid rgba(253,213,23,.35);
  padding:.4rem .5rem;
}
.hero__cap{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.42);
  margin-top:.7rem; text-align:right;
}
.hero__cap::before{ content:"— "; color:var(--yellow); }

/* the schedule sticker */
.hero__sticker{
  position:absolute; z-index:3; left:clamp(12px,2vw,24px); bottom:clamp(12px,2vw,24px);
  width:min(342px,68%);
  background:var(--paper); color:var(--black); font-family:var(--font-mono);
  border-top:3px solid var(--yellow);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.28);
  transform:rotate(-.7deg);
  padding-bottom:.5rem;
}
.sticker__top{
  display:flex; justify-content:space-between; gap:.6rem;
  background:var(--black); color:var(--yellow);
  font-size:.52rem; letter-spacing:.13em; text-transform:uppercase;
  padding:.42rem .6rem;
}
.sticker__meta{
  display:flex; justify-content:space-between; gap:.6rem;
  font-size:.46rem; letter-spacing:.08em; text-transform:uppercase;
  color:#6a655c; padding:.36rem .6rem;
  border-bottom:1px solid rgba(11,11,12,.18);
}
.sticker__rows li{
  display:grid; grid-template-columns:16px minmax(0,1fr) 26px 15px;
  align-items:center; gap:.38rem;
  padding:.32rem .6rem;
  border-bottom:1px solid rgba(11,11,12,.12);
  font-size:.6rem; letter-spacing:.06em; text-transform:uppercase;
}
.sticker__n{ font-size:.5rem; color:#8b857a; }
.sticker__l{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--black); }
.sticker__r{ font-size:.5rem; color:#6a655c; text-align:right; }
.sticker__foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.2rem .5rem;
  font-size:.4rem; letter-spacing:.08em; text-transform:uppercase;
  color:#6a655c; padding:.42rem .6rem 0;
}

/* the breaker switch */
.sw{
  position:relative; display:block; width:16px; height:21px; flex:none;
  background:#1c1c1c; border-radius:1px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
}
.sw::after{
  content:""; position:absolute; left:2px; right:2px; top:2px; height:8px;
  background:var(--yellow); border-radius:1px;
  transform:translateY(7px);
  transition:transform .42s var(--ease);
}
.sw.is-on::after{ transform:translateY(0); }
.sw--sm{ width:14px; height:19px; }
.sw--sm::after{ left:2px; right:2px; height:7px; }

/* the leader from sticker to board */
.hero__leader{
  position:absolute; left:32px; bottom:calc(100% + 2px);
  width:1px; height:52px; background:var(--yellow);
}
.hero__leader::before{
  content:""; position:absolute; left:-3px; top:-3px;
  width:7px; height:7px; border-radius:50%; background:var(--yellow);
}
.hero__leader b{
  position:absolute; left:10px; top:0; white-space:nowrap;
  font-family:var(--font-mono); font-weight:500; font-size:.47rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--yellow);
  background:rgba(11,11,12,.88); border:1px solid rgba(253,213,23,.3);
  padding:.3rem .4rem;
}

/* ==========================================================================
   THE WAYS — the distribution board
   ========================================================================== */
.ways{ background:var(--paper); color:var(--ink-text); border-top:1px solid rgba(0,0,0,.2); }
.ways .sect__h2{ color:var(--black); }
.ways .sect__lead{ color:#5c5a55; max-width:42ch; }
.ways__board{
  display:grid;
  grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);
  grid-template-rows:auto 1fr;
  column-gap:clamp(2rem,4vw,3.6rem);
}
.ways__legend{
  grid-column:1; grid-row:1;
  display:grid; grid-template-columns:48px minmax(0,1fr) 84px 58px;
  gap:.8rem; align-items:end;
  font-family:var(--font-mono); font-size:.48rem; letter-spacing:.16em;
  text-transform:uppercase; color:#918b80;
  padding:0 .85rem .55rem; border-bottom:1px solid rgba(11,11,12,.4);
}
.ways__rail{ grid-column:1; grid-row:2; border-bottom:1px solid rgba(11,11,12,.2); }
.way{ border-top:1px solid rgba(11,11,12,.16); }
.way:first-child{ border-top:0; }
.way__a{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 84px 34px 22px;
  gap:.8rem; align-items:center;
  padding:.92rem .85rem;
  color:var(--ink-text);
  transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s;
}
.way__a:hover,.way.is-active .way__a{
  background:var(--black); color:var(--white);
  box-shadow:inset 3px 0 0 var(--yellow);
}
.way__n{ font-family:var(--font-mono); font-size:.62rem; color:#918b80; letter-spacing:.02em; }
.way__a:hover .way__n,.way.is-active .way__n{ color:var(--yellow); }
.way__t{
  font-family:var(--font-display); font-size:clamp(1.3rem,2.1vw,1.72rem);
  font-weight:600; line-height:1.06; letter-spacing:-.008em;
  min-width:0; overflow-wrap:anywhere;
}
.way__tag{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.1em;
  text-transform:uppercase; text-align:center; color:#777268;
  border:1px solid rgba(11,11,12,.22); padding:.24rem .2rem;
  white-space:nowrap;
}
.way__a:hover .way__tag,.way.is-active .way__tag{
  color:rgba(253,213,23,.85); border-color:rgba(253,213,23,.4);
}
.way__x{ font-family:var(--font-mono); font-size:.8rem; color:#918b80; transition:transform .2s var(--ease); }
.way__a:hover .way__x,.way.is-active .way__x{ color:var(--yellow); transform:translateX(3px); }

.ways__stage{
  grid-column:2; grid-row:2;
  position:sticky; top:96px; align-self:start;
  display:grid;
}
.wp{
  grid-area:1/1;
  background:var(--black); color:var(--white);
  align-self:start;
  opacity:0; visibility:hidden;
  transition:opacity .26s var(--ease), visibility .26s;
}
.wp.is-active{ opacity:1; visibility:visible; }
.wp__media{
  position:relative; aspect-ratio:16/10; max-height:320px; overflow:hidden;
  background:#141516; border-bottom:1px solid rgba(255,255,255,.14);
}
.wp__media img{
  position:absolute; left:50%; top:50%; width:100%; height:auto;
  transform:translate(-50%,-50%);
}
.wp__media--type{
  background-image:repeating-linear-gradient(90deg, transparent 0 21px, rgba(255,255,255,.055) 21px 22px);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.wp__media--type::before{
  content:""; position:absolute; inset:20px; border:1px solid rgba(255,255,255,.13);
}
.wp__media--type::after{
  content:attr(data-n);
  position:absolute; right:18px; bottom:-8px;
  font-family:var(--font-display); font-size:clamp(6rem,9vw,9rem);
  font-weight:800; line-height:.76; letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1px rgba(253,213,23,.55);
}
.wp__stamp{
  position:absolute; left:30px; top:28px;
  font-family:var(--font-mono); font-size:.48rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.44);
}
.wp__body{
  display:flex; flex-direction:column; align-items:flex-start; gap:.65rem;
  padding:clamp(1.25rem,2.2vw,1.8rem);
}
.wp__k{ font-family:var(--font-mono); font-size:.54rem; letter-spacing:.17em; text-transform:uppercase; color:var(--yellow); }
.wp__t{
  font-family:var(--font-display); font-size:clamp(1.7rem,2.7vw,2.3rem);
  font-weight:700; line-height:.94; letter-spacing:-.015em; margin-top:-.15rem;
}
.wp__d{ font-size:.9rem; line-height:1.62; color:rgba(255,255,255,.64); max-width:42ch; }
.wp__l{
  margin-top:.35rem; font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--yellow);
  border-bottom:1px solid rgba(253,213,23,.45); padding-bottom:.25rem;
}
.wp__l:hover{ color:var(--white); border-color:var(--white); }

/* ==========================================================================
   WHY US — the test sheet
   ========================================================================== */
.why{ background:var(--navy); color:var(--white); position:relative; overflow:hidden; }
.why::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 60% at 90% 0%, rgba(253,213,23,.09), transparent 65%);
}
.why__in{
  position:relative;
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,4.5vw,4rem); align-items:start;
}
.why .sect__h2{ color:var(--white); }
.why__lead{ margin:1.2rem 0 1.5rem; font-size:.97rem; line-height:1.68; color:rgba(255,255,255,.66); max-width:38ch; }
.why__note{
  font-size:.84rem; line-height:1.7; color:rgba(255,255,255,.48);
  border-left:1px solid rgba(253,213,23,.55); padding-left:1rem; max-width:40ch;
}
.sheet{
  position:relative;
  background:var(--paper); color:var(--black);
  padding:clamp(1.1rem,2.3vw,1.8rem);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.75);
  transform:rotate(-.35deg);
}
.sheet::before{ content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--yellow); }
.sheet__head{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.13em;
  text-transform:uppercase; padding-bottom:.7rem;
  border-bottom:1px solid rgba(11,11,12,.35);
}
.sheet__cols{
  display:grid; grid-template-columns:24px minmax(0,1.05fr) minmax(0,1.3fr) 86px;
  gap:.8rem; padding:.6rem 0;
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.15em;
  text-transform:uppercase; color:#918b80;
  border-bottom:1px solid rgba(11,11,12,.14);
}
.sheet__rows li{
  display:grid; grid-template-columns:24px minmax(0,1.05fr) minmax(0,1.3fr) 86px;
  gap:.8rem; align-items:center; padding:.82rem 0;
  border-bottom:1px solid rgba(11,11,12,.14);
}
.tick{ width:17px; height:17px; fill:none; stroke:var(--black); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.sheet__name{ font-family:var(--font-display); font-size:1.06rem; font-weight:600; line-height:1.12; letter-spacing:-.005em; }
.sheet__detail{ font-size:.76rem; line-height:1.5; color:#5c5a55; }
.sheet__val{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.09em;
  text-transform:uppercase; text-align:right; white-space:nowrap;
  border:1px solid rgba(11,11,12,.24); padding:.24rem .34rem;
}
.sheet__foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 1rem;
  font-family:var(--font-mono); font-size:.48rem; letter-spacing:.08em;
  text-transform:uppercase; color:#777268; padding-top:.7rem;
}
.sheet__foot span:last-child{ color:var(--black); }

/* ==========================================================================
   WHO WE WORK WITH
   ========================================================================== */
.who{ background:var(--paper); color:var(--ink-text); border-top:1px solid rgba(11,11,12,.16); }
.who .sect__h2{ color:var(--black); }
.who .sect__lead{ color:#5c5a55; }
.who__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(11,11,12,.4);
}
.who__col{ position:relative; padding:1.7rem 1.6rem 2rem 0; border-right:1px solid rgba(11,11,12,.16); }
.who__col + .who__col{ padding-left:1.6rem; }
.who__col:last-child{ border-right:0; padding-right:0; }
.who__col::before{ content:""; position:absolute; top:-1px; left:0; width:38px; height:3px; background:var(--yellow); }
.who__n{ font-family:var(--font-mono); font-size:.56rem; letter-spacing:.14em; color:#918b80; margin-bottom:1.6rem; }
.who__col h3{
  font-family:var(--font-display); font-size:clamp(2rem,3.2vw,2.7rem);
  font-weight:700; line-height:.88; letter-spacing:-.015em; margin-bottom:1rem;
}
.who__col p{ font-size:.93rem; line-height:1.68; color:#4e4c47; max-width:34ch; }
.who__tag{
  display:inline-block; margin-top:1.5rem; padding-top:.55rem;
  border-top:1px solid rgba(11,11,12,.22);
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.16em;
  text-transform:uppercase; color:#777268;
}

/* ==========================================================================
   RECENT WORK
   ========================================================================== */
.work{ background:var(--black); color:var(--white); border-top:1px solid rgba(255,255,255,.1); }
.work .sect__h2{ color:var(--white); }
.work .sect__num{ color:rgba(255,255,255,.5); }
.work__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:rgba(255,255,255,.16);
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.work__card{
  display:flex; flex-direction:column; align-items:flex-start;
  background:var(--black); color:var(--white);
  padding:clamp(1.6rem,3vw,2.6rem);
  min-height:330px;
  transition:background .24s var(--ease);
}
.work__card:hover{ background:#111214; }
.work__meta{
  display:flex; flex-wrap:wrap; gap:.4rem 1.1rem;
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(255,255,255,.42); margin-bottom:2rem;
}
.work__meta span:first-child{ color:var(--yellow); }
.work__card h3{
  font-family:var(--font-display); font-size:clamp(1.9rem,3.1vw,2.7rem);
  font-weight:700; line-height:.92; letter-spacing:-.015em;
  margin-bottom:1rem; max-width:17ch;
}
.work__p{ font-size:.9rem; line-height:1.66; color:rgba(255,255,255,.58); max-width:40ch; margin-bottom:2rem; }
.work__more{
  margin-top:auto; font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--yellow);
  border-bottom:1px solid rgba(253,213,23,.45); padding-bottom:.3rem;
}
.work__card:hover .work__more{ color:var(--white); border-color:var(--white); }

/* ==========================================================================
   TEAM
   ========================================================================== */
.team{ background:var(--paper); color:var(--ink-text); border-top:1px solid rgba(11,11,12,.16); }
.team__in{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.team__fig{ margin:0; min-width:0; }
.team__fig img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  filter:saturate(.88) contrast(1.03);
}
.team__fig figcaption{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:.7rem; padding-top:.6rem; border-top:1px solid rgba(11,11,12,.22);
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.12em;
  text-transform:uppercase; color:#777268;
}
.team__fig figcaption span:last-child{ color:var(--black); }
.team .sect__h2{ color:var(--black); }
.team__lead{ margin:1.3rem 0 2rem; font-size:.98rem; line-height:1.7; color:#5c5a55; max-width:42ch; }
.team__stats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 1.6rem; border-top:1px solid rgba(11,11,12,.3);
}
.team__stats div{ padding:.8rem 0; border-bottom:1px solid rgba(11,11,12,.16); }
.team__stats dt{
  font-family:var(--font-mono); font-size:.48rem; letter-spacing:.14em;
  text-transform:uppercase; color:#918b80; margin-bottom:.15rem;
}
.team__stats dd{
  font-family:var(--font-display); font-size:1.32rem; font-weight:600;
  line-height:1.1; letter-spacing:-.005em;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{
  background:var(--yellow); color:var(--black);
  border-top:1px solid rgba(11,11,12,.4);
  position:relative; overflow:hidden;
}
.contact::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(90deg, rgba(11,11,12,.055) 0 1px, transparent 1px 28px);
}
.contact__in{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem); align-items:end;
}
.contact .sect__num{ color:rgba(11,11,12,.6); }
.contact .sect__num::before{ background:var(--black); }
.contact__h2{
  font-family:var(--font-display); font-size:clamp(2.9rem,6.8vw,5.6rem);
  font-weight:800; line-height:.82; letter-spacing:-.025em; margin-bottom:1.4rem;
}
.contact__lead{ max-width:42ch; font-size:1rem; line-height:1.64; color:rgba(11,11,12,.72); margin-bottom:2rem; }
.contact__tel{
  display:inline-block; font-family:var(--font-mono); font-weight:500;
  font-size:clamp(1.55rem,3.4vw,2.5rem); letter-spacing:-.02em;
  border-bottom:2px solid rgba(11,11,12,.85); line-height:1.2;
}
.contact__tel:hover{ background:var(--black); color:var(--yellow); border-color:var(--black); }
.contact__right{ display:flex; flex-direction:column; gap:2rem; padding-bottom:.4rem; }
.contact__right address p{ font-size:.95rem; line-height:1.55; }
.contact__k{
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(11,11,12,.55); margin-bottom:.6rem;
}
.contact__area{
  margin-top:.8rem; font-family:var(--font-mono); font-size:.56rem;
  letter-spacing:.11em; text-transform:uppercase; color:rgba(11,11,12,.6);
}
.contact__links{ display:flex; flex-direction:column; align-items:flex-start; gap:.95rem; min-width:0; }
.contact__links a{
  font-size:.9rem; overflow-wrap:anywhere;
  border-bottom:1px solid rgba(11,11,12,.35); padding-bottom:.12rem;
}
.contact__links a:hover{ border-color:var(--black); }
.contact__cta{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--black); color:var(--yellow) !important;
  padding:.95rem 1.35rem; border:0 !important;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.08em;
  text-transform:uppercase; transition:transform .2s var(--ease);
}
.contact__cta:hover{ transform:translateY(-2px); }
.contact__careers{ font-family:var(--font-mono); font-size:.56rem; letter-spacing:.06em; color:rgba(11,11,12,.65); border-bottom:0 !important; }
.contact__careers:hover{ color:var(--black); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--black); border-top:1px solid rgba(255,255,255,.12); }
.brand--foot .brand__txt strong{ font-size:2rem; }
.brand--foot .brand__mark{ width:26px; }
.brand--foot .brand__mark svg{ width:26px; }
.foot__blurb{ font-size:.83rem; line-height:1.66; color:rgba(255,255,255,.52); max-width:34ch; margin-top:1.2rem; }
.foot__nav{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.foot__h{ color:rgba(255,255,255,.42); }
.foot__nav a,.foot__nav span{ font-size:.78rem; line-height:1.5; color:rgba(255,255,255,.74); overflow-wrap:anywhere; }
.foot__nav a:hover{ color:var(--yellow); }
.foot__nav li span{ color:rgba(255,255,255,.45); }
.foot__bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:2.2rem;
  padding-top:1.3rem; color:rgba(255,255,255,.52); font-size:.54rem;
}
.foot__bottom p:last-child{ color:rgba(255,255,255,.38); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:1024px){
  .nav__foot{ display:none; }
}
@media (min-width:1024px) and (max-width:1240px){
  .nav__link{ font-size:.78rem; padding:.5rem .46rem; }
  .nav__cta .nav__link{ padding:.55rem .8rem; font-size:.76rem; }
  .nav__tel .nav__link{ font-size:.66rem; }
}
@media (max-width:1180px){
  .nav__tel{ display:none; }
}

@media (max-width:1023px){
  .hdr__in{ min-height:68px; }
  .brand__mark,.brand__mark svg{ width:21px; }
  .brand__txt strong{ font-size:1.55rem; }
  .brand__txt em{ font-size:.39rem; }

  .nav{ background:var(--black); }
  .nav__link{ font-size:1.02rem; font-weight:600; padding:1rem .1rem; }
  .nav__link:hover{ color:var(--yellow); background:none; }
  .nav__cta .nav__link{ background:var(--yellow); color:var(--black); justify-content:center; border-radius:0; padding:1rem .1rem; }
  .nav__cta{ margin:0; }
  .nav__tel{ display:block; }
  .nav__tel .nav__link{ font-family:var(--font-mono); font-size:.86rem; color:var(--yellow); }
  .mega,.mega--wide{
    position:static; transform:none; width:100%; padding:0; margin:0;
    background:none; border:0; border-radius:0; box-shadow:none;
  }
  .nav__item.is-open > .mega{ padding:0 0 1.1rem; }
  .megap{ grid-template-columns:minmax(0,1fr); gap:1.2rem; }
  .megap__col > .mega__list{ display:block; }
  .megap__col--note{ border-left:0; padding-left:0; border-top:1px solid rgba(255,255,255,.14); padding-top:1rem; }
  .megap__tel{ font-size:1.7rem; }

  .hero__in{
    grid-template-columns:minmax(0,1fr); min-height:0;
    gap:2.6rem; padding-block:2.6rem 3.4rem;
  }
  .hero__copy{ max-width:none; }
  .hero__board{ justify-self:stretch; max-width:none; }
  .hero__sticker{ position:relative; left:auto; bottom:auto; width:calc(100% - 1.6rem); margin:-3rem auto 0; }
  .hero__leader{ left:26px; height:40px; }
  .hero__cap{ text-align:left; }

  .ways__board{ display:flex; flex-direction:column; }
  .ways__legend{ display:none; }
  .ways__rail,.ways__stage{ display:contents; }
  .way{ order:calc(var(--i) * 2 - 1); }
  .way__a{ grid-template-columns:38px minmax(0,1fr) auto 30px; gap:.7rem; padding:1.05rem .75rem; }
  .way__x{ display:none; }
  .way__a:hover{ background:none; color:var(--ink-text); box-shadow:none; }
  .way__a:hover .way__n{ color:#918b80; }
  .way__a:hover .way__tag{ color:#777268; border-color:rgba(11,11,12,.22); }
  .wp{ order:calc(var(--i) * 2); display:none; align-self:stretch; width:100%; }
  .wp.is-active{ display:block; }
  .wp{ margin-bottom:1rem; }
  .wp__media{ aspect-ratio:16/9; }

  .why__in{ grid-template-columns:minmax(0,1fr); gap:2.2rem; }
  .sheet{ transform:none; }
  .team__in{ grid-template-columns:minmax(0,1fr); gap:2.2rem; }
  .team__fig{ max-width:560px; }
  .contact__in{ grid-template-columns:minmax(0,1fr); gap:2.4rem; align-items:start; }
  .contact__right{ gap:1.6rem; }
}

@media (max-width:760px){
  .sect__h2{ font-size:clamp(2.4rem,8.5vw,3.6rem); }
  .who__grid{ grid-template-columns:minmax(0,1fr); border-top:1px solid rgba(11,11,12,.4); }
  .who__col{ padding:1.6rem 0; border-right:0; border-bottom:1px solid rgba(11,11,12,.16); }
  .who__col + .who__col{ padding-left:0; }
  .who__col:last-child{ border-bottom:0; }
  .who__col p{ max-width:46ch; }
  .work__grid{ grid-template-columns:minmax(0,1fr); }
  .work__card{ min-height:0; }
  .team__stats{ gap:0 1.2rem; }
}

@media (max-width:640px){
  .sheet__cols{ display:none; }
  .sheet__rows li{
    grid-template-columns:22px minmax(0,1fr) auto;
    grid-template-areas:"t n v" "t d d";
    row-gap:.35rem; align-items:start;
  }
  .tick{ grid-area:t; margin-top:.18rem; }
  .sheet__name{ grid-area:n; }
  .sheet__detail{ grid-area:d; }
  .sheet__val{ grid-area:v; align-self:start; }
  .hero__marks{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem 1rem; }
  .hero__marks li{ font-size:.52rem; }
  .hero__marks li + li::before{ content:none; }
  .contact__h2{ font-size:clamp(2.7rem,10vw,4rem); }
}

@media (max-width:460px){
  .way__tag{ display:none; }
  .way__a{ grid-template-columns:32px minmax(0,1fr) 30px; gap:.6rem; }
  .way__t{ font-size:1.34rem; }
  .sticker__rows li{ grid-template-columns:14px minmax(0,1fr) 22px 14px; gap:.3rem; padding:.3rem .45rem; font-size:.56rem; }
  .sticker__meta,.sticker__top{ font-size:.44rem; padding-inline:.45rem; }
  .sticker__foot{ font-size:.36rem; padding-inline:.45rem; }
  .hero__sticker{ width:calc(100% - .8rem); }
  .hero__leader b{ font-size:.42rem; letter-spacing:.1em; }
  .foot__nav{ grid-template-columns:minmax(0,1fr); gap:1.6rem; }
}

@media (max-width:360px){
  .brand__txt em{ display:none; }
  .hero__sticker{ transform:none; }
  .hero__leader b{ white-space:normal; max-width:120px; }
  .way__t{ font-size:1.22rem; }
}

@media (prefers-reduced-motion: reduce){
  .sw::after{ transform:none !important; }
  .hero__h1 .line > span{ animation:none; }
  .pre__tg{ animation:none; transform:none; }
}