/* ==========================================================================
   Sound Reduction Systems — "The Layer"
   --------------------------------------------------------------------------
   base.css owns the reset, shell, header/nav mechanics, buttons, footer
   skeleton, reveals and the hero contract. This file adds the palette,
   the section drawing, the build-up, the plates and the catalogue index.
   No @import. Every colour and font comes from :root.
   ========================================================================== */

:root{
  /* ---------- the section ---------- */
  --slate:      #1b2026;
  --slate-2:    #222831;
  --slate-3:    #282f38;
  --chalk:      #f4f2ec;
  --chalk-2:    #eae6da;
  --accent:     #b8452f;
  --accent-lit: #d4644a;
  --steel:      #8b949c;
  --foam:       #c9b79a;
  --rule:       #dcd8cd;

  /* ---------- base.css contract ---------- */
  --ink:        var(--slate);
  --ink-2:      #20262e;
  --ink-3:      #252c35;
  --surface:    var(--chalk);
  --surface-2:  var(--chalk-2);
  --text:       #f1efe7;
  --muted:      #9aa3ab;
  --ink-text:   #1b2026;
  --ink-mute:   #5c646b;
  --accent-2:   var(--accent-lit);
  --line:       rgba(244,242,236,.13);
  --line-d:     rgba(27,32,38,.16);

  /* ---------- type ---------- */
  --font-display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-body:    "Open Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "B612 Mono", 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{ font-size:16.5px; font-weight:400; }

::selection{ background:var(--accent); color:var(--chalk); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.sect--dark-2 :focus-visible,
.build :focus-visible,
.docs :focus-visible{ outline-color:var(--accent-lit); }

/* Archivo Black ships one weight — never let the browser fake a bold */
.hero__h1,
.sect__h2,
.plate__name,
.rrow__t,
.app__t,
.cas__t,
.advice__tel,
.brand__word,
.foot__brand b{ font-weight:400; }

.sect__h2{
  font-size:clamp(1.85rem, 4.4vw, 3.35rem);
  line-height:.97;
  letter-spacing:-.025em;
}

.sect__num{
  display:flex; align-items:center; gap:.7rem;
  font-size:.62rem; letter-spacing:.24em;
  color:var(--accent);
  margin-bottom:1.15rem;
}
.sect__num::before{
  content:""; width:26px; height:1px;
  background:currentColor; opacity:.6; flex:none;
}
.sect--dark-2 .sect__num,
.build .sect__num,
.docs .sect__num{ color:var(--accent-lit); }

.sect__lead{ font-size:.94rem; line-height:1.75; }
.sect--light .sect__lead,
.sect--light-2 .sect__lead{ color:var(--ink-mute); }
.sect--dark-2 .sect__lead,
.build .sect__lead,
.docs .sect__lead{ color:rgba(241,239,231,.66); }

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

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

/* ==========================================================================
   PRELOADER — four layers dropping in
   ========================================================================== */
.pre__mark{ width:120px; margin-bottom:1.6rem; }
.pre__mark svg{ width:100%; height:auto; display:block; }
.pre__l{
  fill:var(--accent);
  transform-origin:center;
  animation:preDrop 1.5s var(--ease) infinite;
}
.pre__l:nth-child(2){ animation-delay:.1s; }
.pre__l:nth-child(3){ animation-delay:.2s; }
.pre__l:nth-child(4){ animation-delay:.3s; }
@keyframes preDrop{
  0%{ transform:translateY(-10px); opacity:.15; }
  35%{ transform:translateY(0); opacity:1; }
  100%{ transform:translateY(6px); opacity:.2; }
}
.pre__meta{ letter-spacing:.18em; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{ background:var(--slate); }
.hdr__in{ min-height:82px; }
.brand img{ width:172px; height:auto; }
.nav__list{ gap:0; }
.nav__link{
  font-size:.845rem; font-weight:400;
  letter-spacing:.005em;
  padding:.55rem .62rem;
  color:rgba(241,239,231,.86);
}
.nav__link:hover{ background:rgba(244,242,236,.055); color:var(--chalk); }

.hdr__cta{
  margin-left:.7rem;
  padding-left:1.15rem;
  border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:.1rem;
  line-height:1.3;
}
.hdr__cta-l{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel);
}
.hdr__cta-n{ font-size:.83rem; font-weight:600; color:var(--chalk); transition:color .2s; }
.hdr__cta:hover .hdr__cta-n{ color:var(--accent-lit); }
@media (max-width:1180px){ .hdr__cta{ display:none; } }

/* ---------- mega: the product register ---------- */
.mega--reg{
  width:min(1080px, calc(100vw - 2rem));
  padding:0;
  background:var(--ink-3);
  border:1px solid var(--line);
}
.reg{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  padding:1.45rem 1.3rem 1.1rem;
}
.reg__col{ padding:0 1.15rem; border-left:1px solid rgba(244,242,236,.08); min-width:0; }
.reg__col:first-child{ border-left:0; padding-left:0; }
.reg__col:last-child{ padding-right:0; }

.mega__h{
  display:flex; align-items:baseline; gap:.55rem;
  font-size:.55rem; letter-spacing:.17em;
  color:var(--steel);
  padding-bottom:.45rem; margin-bottom:.5rem;
  border-bottom:1px solid rgba(244,242,236,.1);
}
.mega__h span{ color:var(--accent-lit); }
.mega__h--gap{ margin-top:1.15rem; }
.mega a{
  font-size:.795rem; line-height:1.32; padding:.24rem 0;
  color:rgba(241,239,231,.82);
}
.mega a:hover{ color:var(--accent-lit); }
.reg__all{
  display:inline-block; margin-top:.65rem;
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent-lit);
  border-bottom:1px solid rgba(212,100,74,.4); padding-bottom:.12rem;
}
.reg__all:hover{ color:var(--chalk); border-color:var(--chalk); }

.reg__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 1.45rem;
  border-top:1px solid rgba(244,242,236,.09);
  background:rgba(0,0,0,.22);
  font-family:var(--font-mono); font-size:.53rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--steel);
}
.reg__foot-a{ color:var(--accent-lit); }
.reg__foot-a:hover{ color:var(--chalk); }

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

/* ==========================================================================
   HERO — a section through a floor, running off both edges
   ========================================================================== */
.hero{
  padding:0;
  background:var(--chalk);
  color:var(--ink-text);
  border-bottom:1px solid var(--rule);
  position:relative;
}
.hero__grid{
  display:grid;
  grid-template-columns:clamp(210px, 30vw, 430px) minmax(0,1fr);
  min-height:calc(100svh - 82px);
}
.hero__draw{
  position:relative;
  background:#e9e5d8;
  border-right:1px solid var(--rule);
  overflow:hidden;
}
.hero__svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.hero__ann text{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.13em;
  fill:#1b2026;
}
.hero__layers > rect{
  stroke:#1b2026; stroke-width:.7;
  stroke-opacity:.55;
}
.hero__ann-sub{
  font-size:9px !important;
  letter-spacing:.1em !important;
  fill:var(--accent) !important;
  text-transform:uppercase;
}
.hero__ann-tiny{
  font-size:8.5px !important;
  letter-spacing:.14em !important;
  fill:#6d757c !important;
}
.hero__drawcap{
  position:absolute; left:1rem; bottom:.9rem;
  display:inline-flex; gap:.4rem;
  padding:.38rem .55rem;
  background:#e9e5d8;
  border:1px solid rgba(27,32,38,.28);
  font-family:var(--font-mono); font-size:.53rem; letter-spacing:.13em;
  text-transform:uppercase; color:#4b535a;
}
.hero__drawcap span{ color:var(--accent); }

.hero__copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.6rem,6vw,5.5rem) clamp(1.15rem,4.6vw,4.4rem);
}
.hero__inner{ width:100%; max-width:720px; }
.hero__eyebrow{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .85rem;
  font-family:var(--font-mono); font-size:.56rem;
  letter-spacing:.2em; text-transform:uppercase; color:#6d757c;
  margin-bottom:1.6rem;
}
.hero__dot{
  width:6px; height:6px; background:var(--accent); flex:none;
}
.hero__h1{
  font-size:clamp(2.5rem, 5.6vw, 5rem);
  line-height:.9;
  letter-spacing:-.03em;
  margin-bottom:1.5rem;
}
.hero__h1 em{
  font-style:normal;
  color:var(--accent);
}
.hero__h1 .line{ padding-block:.03em; }
.hero__lead{
  font-size:1rem; line-height:1.72; font-weight:300;
  color:#475057; max-width:48ch;
  margin-bottom:2rem;
}
.hero__acts{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin-bottom:clamp(2rem,4vw,2.8rem);
}
.hero__facts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1rem 1.4rem;
  border-top:1px solid var(--rule);
  padding-top:1.15rem;
  max-width:620px;
}
.hero__facts li{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.hero__facts b{
  font-family:var(--font-display); font-weight:400;
  font-size:1rem; letter-spacing:-.015em; line-height:1.15;
}
.hero__facts span{
  font-family:var(--font-mono); font-size:.52rem; line-height:1.5;
  letter-spacing:.11em; text-transform:uppercase; color:#6d757c;
}

/* hero entrance, only once the preloader releases */
body.loaded .hero__eyebrow,
body.loaded .hero__h1,
body.loaded .hero__lead,
body.loaded .hero__acts,
body.loaded .hero__facts{ animation:rise .8s var(--ease) both; }
body.loaded .hero__h1{ animation-delay:.06s; }
body.loaded .hero__lead{ animation-delay:.14s; }
body.loaded .hero__acts{ animation-delay:.2s; }
body.loaded .hero__facts{ animation-delay:.28s; }
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ==========================================================================
   BUTTONS — red on chalk, no neon
   ========================================================================== */
.btn{
  border-radius:var(--radius);
  font-size:.83rem; font-weight:600;
  letter-spacing:.005em;
  padding:.82rem 1.25rem;
}
.btn svg{ width:14px; height:14px; }
.btn--solid{ background:var(--accent); color:var(--chalk); }
.btn--solid:hover{ background:#a33c28; transform:translateY(-2px); }
.btn--ghost,
.btn--outline{
  border:1px solid rgba(27,32,38,.28); color:var(--ink-text);
}
.btn--ghost:hover{ border-color:var(--ink-text); background:rgba(27,32,38,.05); }
.btn--outline{ border-color:rgba(27,32,38,.28); }
.btn--outline:hover{ background:var(--ink-text); color:var(--chalk); border-color:var(--ink-text); }

/* ==========================================================================
   01 — BUILD-UP
   ========================================================================== */
.build{
  background:var(--slate);
  background-image:repeating-linear-gradient(180deg, rgba(244,242,236,.032) 0 1px, transparent 1px 48px);
  color:var(--text);
  position:relative;
}
.build__head{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.82fr);
  gap:clamp(1.4rem,4vw,3.4rem);
  align-items:end;
  margin-bottom:clamp(2rem,4vw,3.2rem);
}
.build__grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.2vw,3rem);
  align-items:start;
}

.bp{
  background:var(--ink-2);
  border:1px solid rgba(244,242,236,.1);
  padding:clamp(.9rem,1.8vw,1.5rem);
  margin:0;
}
.bp__svg{ width:100%; height:auto; display:block; }
.bp__axis line{ stroke:rgba(244,242,236,.22); stroke-width:1; stroke-dasharray:2 4; }
.bp__axis text{
  font-family:var(--font-mono); font-size:8px; letter-spacing:.14em;
  fill:#7f888f;
}
.bp__slot{
  fill:none;
  stroke:rgba(244,242,236,.2);
  stroke-width:1;
  stroke-dasharray:4 4;
}
.bp__name{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.02em;
  fill:#f2efe6;
}
.bp__role{
  font-family:var(--font-mono); font-size:8px; letter-spacing:.15em;
  text-transform:uppercase;
  fill:var(--accent-lit);
  transform:translate(-48px, 13px);
}
.bp__cap{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem;
  margin-top:1rem; padding-top:.8rem;
  border-top:1px solid rgba(244,242,236,.09);
  font-family:var(--font-mono); font-size:.54rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel);
}
.bp__cap span:last-child{ color:rgba(241,239,231,.5); }

/* the drop — finished state is the default, animation is additive */
.bp__svg.is-building .bp__layer{
  animation:drop .95s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:var(--d, 0s);
}
@keyframes drop{
  0%{ transform:translateY(-130px); opacity:0; }
  55%{ opacity:1; }
  82%{ transform:translateY(3px); }
  100%{ transform:translateY(0); opacity:1; }
}

/* ---------- mechanisms ---------- */
.mech{ padding-top:.2rem; }
.mech__title{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel);
  padding-bottom:.8rem; border-bottom:1px solid rgba(244,242,236,.13);
  margin-bottom:.2rem;
}
.mech__row{
  display:grid;
  grid-template-columns:7.4rem minmax(0,1fr);
  gap:.4rem 1.2rem;
  padding-block:1.05rem;
  border-bottom:1px solid rgba(244,242,236,.1);
}
.mech__l{ display:flex; align-items:baseline; gap:.5rem; }
.mech__n{
  font-family:var(--font-mono); font-size:.54rem; color:var(--accent-lit);
}
.mech__h{
  font-family:var(--font-display); font-weight:400;
  font-size:1.02rem; letter-spacing:-.02em; line-height:1.1;
}
.mech__p{
  font-size:.865rem; line-height:1.66;
  color:rgba(241,239,231,.72);
  grid-column:2;
}
.mech__ticks{
  grid-column:2;
  display:grid; grid-template-columns:repeat(6, 1fr); gap:3px;
  margin-top:.8rem;
  height:9px;
}
.mech__ticks i{
  background:rgba(244,242,236,.1);
  border-top:1px solid rgba(244,242,236,.16);
}
.mech__ticks i.on{
  background:var(--accent);
  border-top-color:var(--accent-lit);
}
.mech__where{
  grid-column:2;
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--steel);
  margin-top:.45rem;
}
.mech__note{
  margin-top:1.2rem;
  font-family:var(--font-mono); font-size:.58rem; line-height:1.75;
  letter-spacing:.04em;
  color:var(--steel);
  max-width:52ch;
}
.mech__note em{ color:var(--accent-lit); font-style:normal; }

/* ==========================================================================
   02 — PRODUCT PLATES
   ========================================================================== */
.prods{ background:var(--chalk); }
.plate{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr) 320px;
  grid-template-areas:"meta stack photo";
  gap:clamp(1.3rem,3vw,2.8rem);
  align-items:center;
  padding-block:clamp(1.9rem,3.6vw,3rem);
  border-top:1px solid var(--rule);
}
.plate:last-of-type{ border-bottom:1px solid var(--rule); }
.plate--flip{
  grid-template-columns:320px minmax(0,1fr) minmax(0,.92fr);
  grid-template-areas:"photo stack meta";
}
.plate__meta{ grid-area:meta; min-width:0; }
.plate--flip .plate__meta{ text-align:right; }
.plate--flip .plate__meta .plate__code{ justify-content:flex-end; }
.plate--flip .plate__copy{ margin-left:auto; }
.plate--flip .plate__stack{ order:0; }

.plate__code{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:.55rem;
}
.plate__name{
  font-size:clamp(1.45rem, 2.5vw, 2.1rem);
  line-height:1;
  letter-spacing:-.03em;
  margin-bottom:.45rem;
}
.plate__kind{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.13em;
  text-transform:uppercase; color:#6d757c;
  margin-bottom:.8rem;
}
.plate__copy{
  font-size:.875rem; line-height:1.68; color:var(--ink-mute);
  max-width:38ch;
  margin-bottom:.9rem;
}
.plate__link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.57rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid rgba(184,69,47,.45);
  padding-bottom:.16rem;
}
.plate__link span{ transition:transform .25s var(--ease); display:inline-block; }
.plate__link:hover span{ transform:translateX(4px); }

/* exploded stack: bars with a mono register */
.plate__stack{
  grid-area:stack;
  display:flex; flex-direction:column; gap:11px;
  justify-content:center;
  padding-block:.4rem;
}
.stk{ display:flex; }
.stk:nth-child(2){ margin-left:11px; }
.stk:nth-child(3){ margin-left:22px; }
.stk:nth-child(4){ margin-left:33px; }
.stk__l{
  width:var(--w, 80%);
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.42rem .6rem;
  border:1px solid rgba(27,32,38,.32);
  background:repeating-linear-gradient(45deg, rgba(27,32,38,.055) 0 1px, transparent 1px 5px), var(--chalk-2);
  font-family:var(--font-mono); font-size:.55rem;
  letter-spacing:.09em; text-transform:uppercase; color:#3b4249;
  transition:transform .3s var(--ease), background .3s, border-color .3s;
  min-width:0;
}
.stk__l b{ font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stk__l i{ font-style:normal; color:#828a91; font-size:.5rem; white-space:nowrap; }
.stk__l--key{
  border-color:var(--accent);
  background:repeating-linear-gradient(45deg, rgba(184,69,47,.14) 0 1px, transparent 1px 5px), rgba(184,69,47,.08);
  color:#7e2e1c;
}
.stk__l--key i{ color:var(--accent); }
.plate:hover .stk__l--key{ transform:translateX(6px); background:rgba(184,69,47,.16); }

.plate__fig{ grid-area:photo; margin:0; min-width:0; }
.plate__fig img{
  width:100%; max-width:320px;
  height:auto; aspect-ratio:358 / 202;
  object-fit:cover;
  border:1px solid var(--rule);
  background:var(--chalk-2);
  filter:saturate(.94);
}
.plate--flip .plate__fig img{ margin-left:auto; }
.plate__fig figcaption{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.09em;
  text-transform:uppercase; color:#828a91;
  margin-top:.5rem;
}
.plate--flip .plate__fig figcaption{ text-align:right; }

.prods__foot{
  margin-top:1.6rem;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.06em;
  color:#6d757c;
}
.prods__foot a{ color:var(--accent); border-bottom:1px solid rgba(184,69,47,.4); }
.prods__foot a:hover{ color:var(--ink-text); border-color:var(--ink-text); }

/* ==========================================================================
   03 — CATALOGUE INDEX
   ========================================================================== */
.ranges{ background:var(--ink-2); }
.rrow__a{
  display:grid;
  grid-template-columns:2.4rem minmax(0,15.5rem) minmax(0,1fr) 1.3rem;
  gap:.4rem 1.5rem;
  align-items:baseline;
  padding:1.15rem .5rem;
  border-top:1px solid rgba(244,242,236,.1);
  transition:background .22s, padding-left .22s var(--ease);
}
.ranges__list li:last-child .rrow__a{ border-bottom:1px solid rgba(244,242,236,.1); }
.rrow__a:hover{ background:rgba(244,242,236,.035); padding-left:1rem; }
.rrow__n{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.12em;
  color:var(--steel);
}
.rrow__t{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1rem,1.55vw,1.22rem);
  letter-spacing:-.02em; line-height:1.15;
  transition:color .2s;
}
.rrow__a:hover .rrow__t{ color:var(--accent-lit); }
.rrow__d{
  font-size:.82rem; line-height:1.62;
  color:rgba(241,239,231,.6);
}
.rrow__go{
  justify-self:end;
  color:var(--steel);
  transition:transform .25s var(--ease), color .2s;
}
.rrow__a:hover .rrow__go{ transform:translateX(5px); color:var(--accent-lit); }
.ranges__note{
  margin-top:1.8rem;
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--steel);
}

/* ==========================================================================
   04 — APPLICATIONS
   ========================================================================== */
.apps{ background:var(--chalk-2); }
.apps__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.6rem,3.4vw,3rem);
}
.app{ border-top:1px solid var(--line-d); padding-top:1rem; min-width:0; }
.app__n{
  font-family:var(--font-mono); font-size:.53rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:1.1rem;
}
.app__d{
  width:100%; height:auto; display:block;
  margin-bottom:.5rem;
}
.app__d rect,
.app__d line,
.app__d circle,
.app__d path{
  fill:none; stroke:#2e363d; stroke-width:1.05;
  vector-effect:non-scaling-stroke;
}
.app__d rect{ fill:rgba(27,32,38,.055); }
.app__d line{ opacity:.85; }
.app__d path{ stroke:var(--accent); stroke-width:1.25; }
.app__sec{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.12em;
  text-transform:uppercase; color:#828a91;
  margin-bottom:1.15rem;
}
.app__t{
  font-size:clamp(1.2rem,1.8vw,1.42rem);
  line-height:1.05; letter-spacing:-.025em;
  margin-bottom:.6rem;
}
.app__p{
  font-size:.85rem; line-height:1.68; color:var(--ink-mute);
  margin-bottom:.95rem;
}
.app__link{
  display:inline-block;
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-text);
  border-bottom:1px solid rgba(27,32,38,.28);
  padding-bottom:.18rem;
  transition:color .2s, border-color .2s;
}
.app__link:hover{ color:var(--accent); border-color:var(--accent); }

/* ==========================================================================
   05 — CASE STUDIES
   ========================================================================== */
.cases{ background:var(--chalk); }
.cas{
  display:grid;
  grid-template-columns:2.4rem minmax(0,1fr) 7.6rem 1.3rem;
  gap:1rem;
  align-items:center;
  padding:1.3rem .4rem;
  border-top:1px solid var(--rule);
  transition:background .22s, padding-left .22s var(--ease);
}
.cases__list li:last-child .cas{ border-bottom:1px solid var(--rule); }
.cas:hover{ background:rgba(27,32,38,.032); padding-left:.9rem; }
.cas__n{
  font-family:var(--font-mono); font-size:.55rem; color:#828a91;
}
.cas__t{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1rem,1.85vw,1.42rem);
  line-height:1.18; letter-spacing:-.022em;
  transition:color .2s;
}
.cas:hover .cas__t{ color:var(--accent); }
.cas__tag{
  justify-self:start;
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(184,69,47,.32);
  padding:.22rem .42rem;
  white-space:nowrap;
}
.cas__go{
  justify-self:end; color:#828a91;
  transition:transform .25s var(--ease), color .2s;
}
.cas:hover .cas__go{ transform:translateX(5px); color:var(--accent); }
.cases__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; margin-top:2rem;
}
.cases__foot p{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; color:#6d757c;
}

/* ==========================================================================
   06 — DOCUMENTS
   ========================================================================== */
.docs{ background:var(--slate); }
.docs__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.8rem);
}
.doc{
  border-top:1px solid rgba(244,242,236,.14);
  padding-top:1.1rem;
  min-width:0;
}
.doc__h{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--accent-lit);
  margin-bottom:.9rem;
}
.doc__list{ margin-bottom:.85rem; }
.doc__list a{
  display:block;
  padding:.46rem 0;
  border-bottom:1px solid rgba(244,242,236,.07);
  font-size:.85rem; line-height:1.45;
  color:rgba(241,239,231,.84);
  transition:color .18s, padding-left .22s var(--ease);
}
.doc__list a:hover{ color:var(--accent-lit); padding-left:.4rem; }
.doc__note{
  font-size:.76rem; line-height:1.65;
  color:rgba(241,239,231,.5);
  margin-bottom:.9rem;
  max-width:46ch;
}
.doc__all{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-lit);
  border-bottom:1px solid rgba(212,100,74,.35);
  padding-bottom:.14rem;
}
.doc__all:hover{ color:var(--chalk); border-color:var(--chalk); }

/* ==========================================================================
   07 — ADVICE / CONTACT
   ========================================================================== */
.advice{ background:var(--chalk); }
.advice__grid{
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:clamp(2rem,4.6vw,4.2rem);
  align-items:start;
}
.advice__lead{
  font-size:.96rem; line-height:1.74; font-weight:300;
  color:#475057; max-width:48ch;
  margin:1.1rem 0 1.6rem;
}
.advice__steps{ margin-bottom:1.9rem; }
.advice__steps li{
  display:grid; grid-template-columns:2.2rem minmax(0,1fr);
  gap:1rem;
  padding-block:.85rem;
  border-top:1px solid var(--rule);
}
.advice__steps li:last-child{ border-bottom:1px solid var(--rule); }
.advice__steps span{
  font-family:var(--font-mono); font-size:.55rem; color:var(--accent);
  padding-top:.2rem;
}
.advice__steps p{ font-size:.87rem; line-height:1.66; color:var(--ink-mute); }
.advice__steps b{ color:var(--ink-text); font-weight:600; }

.advice__acts{ display:flex; flex-wrap:wrap; gap:.7rem; }

.advice__card{
  background:var(--slate);
  color:var(--text);
  padding:clamp(1.5rem,3vw,2.2rem);
  border-top:2px solid var(--accent);
  position:relative;
}
.advice__card-h{
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--steel);
  margin-bottom:1.1rem;
}
.advice__tel{
  display:block;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.55rem,2.7vw,2.1rem);
  line-height:1; letter-spacing:-.03em;
  color:var(--chalk);
  transition:color .2s;
}
.advice__tel:hover{ color:var(--accent-lit); }
.advice__sub{
  font-family:var(--font-mono); font-size:.52rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--steel);
  margin:.55rem 0 1.4rem;
}
.advice__dl{ display:grid; gap:.85rem; }
.advice__dl > div{ display:grid; grid-template-columns:3.4rem minmax(0,1fr); gap:.8rem; }
.advice__dl dt{
  font-family:var(--font-mono); font-size:.5rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--steel);
  padding-top:.22rem;
}
.advice__dl dd{ font-size:.86rem; line-height:1.5; color:rgba(241,239,231,.88); }
.advice__dl a{ border-bottom:1px solid rgba(244,242,236,.2); }
.advice__dl a:hover{ color:var(--accent-lit); border-color:var(--accent-lit); }
.advice__dl address{ font-size:.86rem; line-height:1.55; }
.advice__fine{
  margin-top:1.4rem; padding-top:.9rem;
  border-top:1px solid rgba(244,242,236,.12);
  font-family:var(--font-mono); font-size:.54rem; line-height:1.7;
  letter-spacing:.03em; color:var(--steel);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--slate); }
.foot__brand img{ width:190px; height:auto; margin-bottom:1.1rem; }
.foot__brand p{
  font-size:.82rem; line-height:1.65;
  color:rgba(241,239,231,.55);
  max-width:36ch;
}
.foot__reg{
  margin-top:.8rem;
  font-family:var(--font-mono); font-size:.52rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:#6d757c !important;
}
.foot__h{ color:var(--steel); }
.foot__nav a{ color:rgba(241,239,231,.7); }
.foot__nav a:hover{ color:var(--accent-lit); }
.foot__nav a,
.nav__foot a,
.advice__dl a{ overflow-wrap:anywhere; }
@media (max-width:1180px){
  .foot__nav{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.6rem 1.4rem; }
}
.foot__bottom{ color:#6d757c; }
.foot__bottom a:hover{ color:var(--accent-lit); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .plate{ grid-template-columns:minmax(0,.95fr) minmax(0,1fr) 290px; }
  .plate--flip{ grid-template-columns:290px minmax(0,1fr) minmax(0,.95fr); }
  .plate__fig img{ max-width:290px; }
}

@media (max-width:1023px){
  .hero__grid{
    grid-template-columns:minmax(0,1fr);
    min-height:0;
  }
  .hero__draw{
    order:2;
    height:min(52vh, 420px);
    border-right:0; border-top:1px solid var(--rule);
  }
  .hero__copy{ order:1; max-width:none; padding-block:clamp(2.4rem,7vw,3.4rem); }
  .hero__h1{ font-size:var(--h1-size, clamp(2.2rem,7.4vw,3.6rem)); }
  .hero__drawcap{ display:none; }

  .build__head{ grid-template-columns:minmax(0,1fr); align-items:start; gap:1.1rem; }
  .build__grid{ grid-template-columns:minmax(0,1fr); }
  .mech{ margin-top:.4rem; }

  .plate,
  .plate--flip{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    grid-template-areas:"meta meta" "stack photo";
    gap:1.4rem 1.8rem;
  }
  .plate--flip .plate__meta{ text-align:left; }
  .plate--flip .plate__meta .plate__code{ justify-content:flex-start; }
  .plate--flip .plate__copy{ margin-left:0; }
  .plate--flip .plate__fig img{ margin-left:0; }
  .plate--flip .plate__fig figcaption{ text-align:left; }
  .plate__copy{ max-width:52ch; }

  .rrow__a{
    grid-template-columns:2rem minmax(0,1fr) 1.2rem;
    grid-template-areas:"n t go" "n d go";
    gap:.2rem 1rem;
    padding:1rem .3rem;
  }
  .rrow__n{ grid-area:n; }
  .rrow__t{ grid-area:t; }
  .rrow__d{ grid-area:d; }
  .rrow__go{ grid-area:go; align-self:center; }
  .rrow__a:hover{ padding-left:.6rem; }

  .apps__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .apps__grid > .app:last-child{ grid-column:1 / -1; max-width:560px; }

  .advice__grid{ grid-template-columns:minmax(0,1fr); }
  .docs__grid{ grid-template-columns:minmax(0,1fr); }

  .cas{
    grid-template-columns:2rem minmax(0,1fr) 1.2rem;
    grid-template-areas:"n t go" "n tag go";
    gap:.3rem 1rem;
    align-items:center;
  }
  .cas__n{ grid-area:n; }
  .cas__t{ grid-area:t; }
  .cas__tag{ grid-area:tag; }
  .cas__go{ grid-area:go; }
}

@media (max-width:760px){
  .hero__facts{ grid-template-columns:minmax(0,1fr); gap:.85rem; }
  .hero__facts li{ flex-direction:row; align-items:baseline; gap:.7rem; }
  .hero__facts b{ min-width:8.5rem; }

  .plate,
  .plate--flip{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"meta" "stack" "photo";
  }
  .plate__fig img{ max-width:358px; }
  .stk__l{ font-size:.52rem; }

  .apps__grid{ grid-template-columns:minmax(0,1fr); }
  .apps__grid > .app:last-child{ max-width:none; }

  .mech__row{ grid-template-columns:minmax(0,1fr); }
  .mech__p, .mech__ticks, .mech__where{ grid-column:1; }
  .mech__l{ gap:.6rem; }

  .bp__name{ font-size:10px; }
  .bp__role{ font-size:7px; }

  .cases__foot{ flex-direction:column; align-items:flex-start; }
  .cas__tag{ margin-top:.15rem; }

  .foot__nav a{ font-size:.8rem; }
}

@media (max-width:520px){
  .bp__cap span:last-child{ display:none; }
  .plate__fig img{ max-width:100%; }
  .hero__acts .btn{ flex:1 1 auto; justify-content:center; }
}

/* ==========================================================================
   REDUCED MOTION — the finished state, never a half-built stack
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .bp__svg .bp__layer{ animation:none !important; transform:none !important; opacity:1 !important; }
  .pre__l{ animation:none; opacity:1; }
  body.loaded .hero__eyebrow,
  body.loaded .hero__h1,
  body.loaded .hero__lead,
  body.loaded .hero__acts,
  body.loaded .hero__facts{ animation:none; }
}