/* ==========================================================================
   MATtest Limited — "The Sieve"
   --------------------------------------------------------------------------
   base.css owns the reset, wrap, header/nav/mega mechanics, buttons, footer
   skeleton, reveals, preloader shell and the hero headline contract.
   This file supplies the palette, the white ground, the sieve drawing,
   the grading curve and the six numbered report sections.
   ========================================================================== */

:root{
  /* ---------- palette, straight from the brief ---------- */
  --ink:      #131619;
  --steel:    #6f777d;
  --lab:      #1f5f8b;
  --sand:     #c9a227;
  --white:    #ffffff;
  --tint:     #f5f6f7;   /* table headers and ID blocks only */

  /* ---------- base.css contract ---------- */
  --ink-2:    #1b1f23;
  --ink-3:    #23282d;
  --text:     #131619;
  --muted:    #6f777d;
  --ink-text: #131619;
  --ink-mute: #6f777d;
  --surface:  #ffffff;
  --surface-2:#ffffff;
  --accent:     var(--lab);
  --accent-lit: #3a7ba8;
  --accent-2:   var(--lab);
  --line:     rgba(19,22,25,.13);
  --line-d:   rgba(19,22,25,.13);

  /* ---------- type ---------- */
  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body:    "Anek Latin", system-ui, -apple-system, sans-serif;
  --font-mono:    "Fira Code", ui-monospace, "SFMono-Regular", monospace;

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

html{ scroll-padding-top:92px; }
body{
  background:var(--white);
  color:var(--ink);
  font-size:17px;
  line-height:1.62;
}
::selection{ background:var(--lab); color:#fff; }
:focus-visible{ outline:2px solid var(--lab); outline-offset:3px; border-radius:0; }

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

/* ==========================================================================
   PRELOADER — the sieve motif on white
   ========================================================================== */
.pre{ background:var(--white); color:var(--ink); }
.pre__mark{ width:130px; }
.pre__mark svg{ width:130px; height:auto; display:block; overflow:hidden; }
.pre__mesh path{ stroke:var(--ink); stroke-width:1.2; opacity:.22; }
.pre__grain{
  fill:var(--sand);
  transform-box:fill-box; transform-origin:50% 0;
  animation:preDrop 1.6s var(--ease) infinite;
}
.pre__dot{ fill:var(--sand); }
.pre__meta{ color:var(--steel); }
.pre__pct{ color:var(--lab); }
.pre__bar{ background:rgba(19,22,25,.13); height:1px; }
.pre__bar i{ background:var(--ink); }
@keyframes preDrop{
  0%  { transform:translateY(-74px); opacity:0; }
  22% { opacity:1; }
  78% { opacity:1; }
  100%{ transform:translateY(0); opacity:0; }
}

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */
.hdr{
  background:var(--white);
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
@media (min-width:1024px){
  .hdr{
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px) saturate(1.15);
    -webkit-backdrop-filter:blur(10px) saturate(1.15);
  }
}
.hdr__in{ min-height:74px; gap:1rem; }
.brand img{ height:40px; width:auto; }
@media (min-width:1024px){ .nav__foot{ display:none; } }

.nav__link{
  font-size:.815rem; font-weight:500; letter-spacing:-.002em;
  padding:.55rem .6rem; color:var(--ink);
}
.nav__link:hover{ color:var(--lab); background:rgba(19,22,25,.045); }
.nav__item.is-open > .nav__link{ color:var(--lab); }

.hdr__tel{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:-.01em;
  color:var(--ink); margin-left:.35rem; white-space:nowrap;
  transition:color .2s;
}
.hdr__tel:hover{ color:var(--lab); }
.hdr__cta{ padding:.64rem 1.05rem; font-size:.79rem; white-space:nowrap; }

/* ---------- mega panel ---------- */
.mega{
  width:min(640px, calc(100vw - 2rem));
  padding:1.5rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:0;
  box-shadow:0 34px 64px -30px rgba(19,22,25,.30);
}
.mega__h{ color:var(--steel); border-bottom:1px solid var(--line); }
.mega a{ color:var(--ink); }
.mega a:hover{ color:var(--lab); }
.mega__n{ font-family:var(--font-mono); font-size:.6rem; color:var(--steel); margin-right:.6rem; }
.megap{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:1.8rem; }
.megap__col--note{ border-left:1px solid var(--line); padding-left:1.5rem; }
.megap__note{ font-size:.82rem; line-height:1.58; color:var(--ink-mute); }
.megap__all{
  margin-top:.9rem; font-family:var(--font-mono); font-size:.7rem;
  color:var(--lab) !important; letter-spacing:.01em;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{ border-radius:0; letter-spacing:-.005em; }
.btn--solid{ background:var(--ink); color:#fff; }
.btn--solid:hover{ background:#000; transform:translateY(-2px); }
.btn--line{ border:1px solid var(--line); color:var(--ink); }
.btn--line:hover{ border-color:var(--ink); transform:translateY(-2px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding-top:clamp(2rem,4.2vw,3.4rem); padding-bottom:clamp(2.6rem,4.5vw,3.8rem); }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:.55rem 1.8rem;
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel);
  padding-bottom:1.1rem; border-bottom:1px solid var(--line);
}
.hero__h1{
  margin-top:clamp(1.5rem,3vw,2.5rem);
  font-weight:400; letter-spacing:-.026em; line-height:1.06;
}
.hero__h1 .line{ padding-block:.1em; }
.hero__intro{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:1.6rem 2.4rem; align-items:end;
  margin-top:clamp(1.3rem,2.6vw,2rem);
}
.hero__lead{
  font-size:clamp(.98rem,1.35vw,1.08rem); line-height:1.6;
  max-width:54ch; color:var(--ink);
}
.hero__act{ display:flex; gap:.65rem; flex-wrap:wrap; justify-content:flex-end; }

.hero__draw{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,4vw,3.2rem);
  margin-top:clamp(1.8rem,3.6vw,2.8rem);
  align-items:start;
}
.fig{ margin:0; }
.fig--stack{ max-width:492px; }
.fig--curve{ max-width:540px; width:100%; justify-self:end; }
.fig svg{ display:block; width:100%; height:auto; }
.fig__cap{
  display:flex; gap:.7rem; margin-top:.9rem; padding-top:.7rem;
  border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.65rem; line-height:1.55;
  color:var(--steel);
}
.fig__id{ color:var(--ink); white-space:nowrap; letter-spacing:.05em; }

/* ---------- the sieve stack, in section ---------- */
.stack .st-frame{ fill:none; stroke:var(--ink); stroke-width:1.15; stroke-linecap:square; }
.stack .st-mesh{ stroke:var(--ink); stroke-width:.95; opacity:.55; }
.stack .st-mesh2{ stroke:var(--ink); stroke-width:.55; opacity:.28; stroke-dasharray:1.6 2.6; }
.stack .st-sand{ fill:var(--sand); opacity:.94; }
.stack .st-sand--mound{ opacity:.82; }
.stack .st-lead{ stroke:var(--ink); stroke-width:.6; opacity:.26; }
.stack .st-label{
  font-family:var(--font-mono); font-size:11px; fill:var(--ink); letter-spacing:.02em;
}
.stack .st-tag{
  font-family:var(--font-mono); font-size:8.5px; fill:var(--steel); letter-spacing:.18em;
}

/* the falling sample — one thin sand line, six segments, staggered 90ms */
.fall{
  fill:var(--sand);
  transform-box:fill-box; transform-origin:50% 0;
}
body.loaded .fall{
  animation:fallIn .42s var(--ease) forwards;
  animation-delay:calc(var(--i) * 90ms);
}
@keyframes fallIn{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

/* ---------- the grading curve ---------- */
.curve .cv-grid path{ stroke:var(--ink); stroke-width:.5; opacity:.12; }
.curve .cv-box{ fill:none; stroke:var(--ink); stroke-width:.9; opacity:.42; }
.curve .cv-tick text{ font-family:var(--font-mono); font-size:9px; fill:var(--steel); }
.curve .cv-tick--y text{ text-anchor:end; }
.curve .cv-tick--x text{ text-anchor:middle; }
.curve .cv-axis{
  font-family:var(--font-mono); font-size:8px; fill:var(--steel);
  letter-spacing:.18em; text-anchor:middle;
}
.curve .cv-line{
  fill:none; stroke:var(--lab); stroke-width:1.9;
  stroke-linejoin:round; stroke-linecap:round;
}
.curve .cv-pt circle{ fill:#fff; stroke:var(--lab); stroke-width:1.6; }
body.loaded .curve .cv-line{ animation:fadeIn .85s var(--ease) .45s; }
body.loaded .curve .cv-pt{ animation:fadeIn .6s var(--ease) 1.05s; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.curve .cv-callout{
  fill:none; stroke:var(--ink); stroke-width:.7;
  stroke-dasharray:2 2.6; opacity:.55;
}
.curve .cv-note text{ font-family:var(--font-mono); font-size:10.5px; fill:var(--ink); }
.curve .cv-note .cv-note-2{ font-size:9px; fill:var(--steel); }

/* ---------- fact strip ---------- */
.strip{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(2.2rem,4vw,3.2rem);
  border-top:1px solid var(--ink);
}
.strip > div{ padding:1.1rem 1.2rem 0 0; border-right:1px solid var(--line); min-width:0; }
.strip > div:last-child{ border-right:0; padding-right:0; }
.strip dt{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel); margin-bottom:.45rem;
}
.strip dd{ margin:0; font-size:.9rem; overflow-wrap:anywhere; }
.strip dd a:hover{ color:var(--lab); }

/* ==========================================================================
   THE REPORT SECTIONS
   ========================================================================== */
.rep{
  --rule:var(--line);
  --strong:var(--ink);
  border-top:1px solid var(--rule);
  padding-top:clamp(2.8rem,5.2vw,4.6rem);
  padding-bottom:clamp(3rem,5.6vw,5rem);
}
.rep__num{
  display:flex; align-items:center; gap:clamp(.9rem,2vw,1.5rem);
  margin-bottom:clamp(1.2rem,2.2vw,1.8rem);
}
.rep__num span{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  color:var(--ink); white-space:nowrap;
}
.rep__num i{
  width:clamp(30px,4vw,54px); height:1px; background:var(--strong); opacity:.35;
}
.rep__h{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.75rem,4vw,2.95rem);
  line-height:1.09; letter-spacing:-.024em;
}
.rep__body{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,268px);
  gap:clamp(1.8rem,5vw,4.2rem);
  margin-top:clamp(1.8rem,3.4vw,2.8rem);
  align-items:start;
}
.rep__body--wide{ grid-template-columns:minmax(0,1fr); }
.rep__main{ min-width:0; }

.rep__refs{ min-width:0; padding-top:.55rem; border-top:1px solid var(--strong); }
.rep__refs-h{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel); margin-bottom:.95rem;
}
.rep__refs-h--mt{ margin-top:1.9rem; padding-top:1.1rem; border-top:1px solid var(--rule); }
.rep__refs-n{
  margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--rule);
  font-size:.78rem; line-height:1.55; color:var(--ink-mute);
}
.rep__refs-n a{ color:var(--lab); overflow-wrap:anywhere; }

.reflist li{
  padding-block:.8rem; border-bottom:1px solid var(--rule);
  font-size:.8rem; line-height:1.5;
}
.reflist li:first-child{ padding-top:0; }
.reflist code{
  display:block; font-family:var(--font-mono); font-size:.72rem;
  color:var(--ink); margin-bottom:.25rem; overflow-wrap:anywhere;
}
.reflist span{ display:block; color:var(--ink-mute); }
.reflist--plain li{ font-size:.86rem; color:var(--ink); }
.reflist--rule li{ display:flex; align-items:baseline; gap:.7rem; }
.reflist--rule li::before{
  content:""; width:5px; height:5px; background:var(--sand);
  flex-shrink:0; transform:translateY(-1px);
}

.lede{
  font-size:clamp(1rem,1.35vw,1.09rem); line-height:1.66;
  max-width:62ch; color:var(--ink);
}
.lede strong{ font-weight:600; }

/* ---------- the scope notice (pale grey is allowed here) ---------- */
.notice{
  margin-top:2rem; padding:clamp(1.3rem,2.6vw,1.9rem);
  background:var(--tint); border-left:2px solid var(--ink);
}
.notice__k{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel); margin-bottom:.85rem;
}
.notice__q{
  font-family:var(--font-display); font-size:clamp(1.02rem,1.85vw,1.3rem);
  line-height:1.45; letter-spacing:-.012em;
}
.notice__n{
  margin-top:.95rem; font-size:.845rem; line-height:1.6;
  color:var(--ink-mute); max-width:60ch;
}
.notice__n a{ color:var(--lab); border-bottom:1px solid rgba(31,95,139,.35); }
.notice__n a:hover{ border-bottom-color:var(--lab); }

/* ---------- the ID block ---------- */
.idblock{ margin-top:2rem; border-top:1px solid var(--rule); }
.idblock > div{
  display:grid; grid-template-columns:minmax(0,158px) minmax(0,1fr);
  gap:.4rem 1.2rem; padding-block:.75rem; border-bottom:1px solid var(--rule);
}
.idblock dt{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); padding-top:.2rem;
}
.idblock dd{ margin:0; font-size:.9rem; line-height:1.55; overflow-wrap:anywhere; }
.idblock dd a:hover{ color:var(--lab); }
.idblock--lg{
  margin-top:0; padding:clamp(1.3rem,2.6vw,1.9rem);
  background:var(--tint); border-top:1px solid var(--ink);
}
.idblock--lg > div{ grid-template-columns:minmax(0,112px) minmax(0,1fr); }
.idblock--lg > div:last-child{ border-bottom:0; }

/* ==========================================================================
   2.0 — THE MATERIAL TABLE
   ========================================================================== */
.tablewrap{ margin-top:clamp(1.8rem,3vw,2.4rem); }
.mtable{ width:100%; border-collapse:collapse; text-align:left; table-layout:fixed; }
.mtable thead th{
  background:var(--tint);
  font-family:var(--font-mono); font-size:.62rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
  padding:.85rem 1.15rem;
  border-bottom:1px solid var(--rule);
}
.mtable thead th:first-child{ padding-left:0; }
.mtable thead th:last-child{ padding-right:0; }
.mtable col:nth-child(1){ width:20%; }
.mtable col:nth-child(2){ width:52%; }
.mtable col:nth-child(3){ width:28%; }
.mtable tbody th, .mtable tbody td{
  padding:1.15rem 1.15rem; vertical-align:top;
  border-bottom:1px solid var(--rule);
}
.mtable tbody th:first-child, .mtable tbody td:first-child{ padding-left:0; }
.mtable tbody th:last-child, .mtable tbody td:last-child{ padding-right:0; }
.mtable tbody th{
  font-family:var(--font-display); font-weight:400;
  font-size:1.05rem; letter-spacing:-.012em; line-height:1.3;
}
.mtable tbody th a::before{
  content:""; display:inline-block; width:5px; height:5px;
  background:var(--sand); margin-right:.62rem; vertical-align:.08em;
}
.mtable tbody th a{ transition:color .18s; }
.mtable tbody tr:hover th a{ color:var(--lab); }
.mtable tbody td{ font-size:.885rem; line-height:1.55; color:var(--ink-mute); }
.mtable tbody td code{
  display:block; font-family:var(--font-mono); font-size:.71rem;
  line-height:1.75; color:var(--ink); overflow-wrap:anywhere;
  transition:color .18s;
}
.mtable tbody tr:hover td code{ color:var(--lab); }
.tnote{
  margin-top:1.1rem; font-size:.775rem; line-height:1.55;
  color:var(--steel); max-width:72ch;
}

/* ==========================================================================
   3.0 — THE SAMPLE'S JOURNEY
   ========================================================================== */
.journey{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  margin-top:clamp(2rem,3.6vw,2.8rem);
  border-top:1px solid var(--strong);
}
.journey__step{
  position:relative; min-width:0;
  padding:1.5rem 1.1rem 0 0;
  border-right:1px solid var(--rule);
}
.journey__step:last-child{ border-right:0; padding-right:0; }
.journey__step::before{
  content:""; position:absolute; top:-3px; left:0;
  width:5px; height:5px; background:var(--strong);
}
.journey__step:last-child::before{
  width:7px; height:7px; top:-4px; background:var(--sand);
}
.journey__n{
  display:block; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.18em; color:var(--steel); margin-bottom:1.5rem;
}
.journey__h{
  font-family:var(--font-display); font-weight:400;
  font-size:1.02rem; letter-spacing:-.012em; margin-bottom:.5rem;
}
.journey__step p{ font-size:.83rem; line-height:1.55; color:var(--ink-mute); }

/* ==========================================================================
   5.0 — DOWNLOADS + PORTAL
   ========================================================================== */
.links{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--rule);
  border:1px solid var(--rule);
  margin-top:clamp(1.8rem,3vw,2.4rem);
}
.link{
  display:flex; flex-direction:column; gap:.55rem;
  min-width:0; min-height:236px;
  padding:clamp(1.4rem,2.6vw,2rem);
  background:var(--white);
  transition:background .22s var(--ease);
}
.link:hover{ background:#fbfbfb; }
.link__k{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel);
}
.link__h{
  font-family:var(--font-display); font-weight:400;
  font-size:1.28rem; letter-spacing:-.016em; line-height:1.2;
}
.link__n{ font-size:.85rem; line-height:1.55; color:var(--ink-mute); max-width:38ch; }
.link__a{
  margin-top:auto; padding-top:1.2rem;
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:.7rem; color:var(--lab);
  overflow-wrap:anywhere;
}
.link__a span{ transition:transform .22s var(--ease); }
.link:hover .link__a span{ transform:translateX(4px); }

/* ==========================================================================
   PLATES
   ========================================================================== */
.plate{ margin:0; }
.plate img{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border:1px solid var(--rule);
  filter:grayscale(1) contrast(1.05);
}
.plate figcaption{
  margin-top:.65rem; font-family:var(--font-mono);
  font-size:.61rem; line-height:1.55; color:var(--steel);
}
.plate--wide{ margin-top:clamp(1.6rem,3vw,2.2rem); }
.plate--wide img{
  aspect-ratio:16/9; object-position:center 62%;
  filter:grayscale(1) contrast(1.04) brightness(1.08);
}
.plate--wide + .btn{ margin-top:1.5rem; }

/* ==========================================================================
   6.0 — CONTACT
   ========================================================================== */
.contact{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.8rem,5vw,4.2rem);
  margin-top:clamp(1.8rem,3.4vw,2.8rem);
  align-items:start;
}
.contact__act{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  margin-top:1.9rem;
}
.contact__tel{
  font-family:var(--font-display); font-size:1.45rem;
  letter-spacing:-.014em; transition:color .2s;
}
.contact__tel:hover{ color:var(--lab); }
.contact__note{
  margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--line);
  font-size:.83rem; line-height:1.6; color:var(--ink-mute); max-width:46ch;
}

/* ==========================================================================
   FOOTER — white, ruled like the last page of a report
   ========================================================================== */
.foot{
  background:var(--white);
  border-top:2px solid var(--ink);
  color:var(--ink);
  padding-block:clamp(2.4rem,4.5vw,3.6rem) 1.8rem;
}
.foot__top{ border-bottom:1px solid var(--line); padding-bottom:2.4rem; }
.foot__brand img{ height:38px; width:auto; margin-bottom:1.2rem; }
.foot__blurb{
  font-size:.83rem; line-height:1.62; color:var(--ink-mute); max-width:36ch;
}
.foot__tel{ margin-top:1.1rem; font-family:var(--font-mono); font-size:.78rem; }
.foot__tel a:hover{ color:var(--lab); }
.foot__h{ color:var(--steel); }
@media (min-width:1024px){
  .foot__nav{ grid-template-columns:repeat(3,minmax(0,.8fr)) minmax(0,1.35fr); }
}
.foot__nav a{ color:var(--ink); }
.foot__nav a:hover{ color:var(--lab); }
.foot__nav span{ font-size:.83rem; line-height:1.55; color:var(--ink-mute); }
.foot__bottom{ color:var(--steel); }
.foot__bottom p{ max-width:62ch; }
.foot__bottom p:last-child{
  font-family:var(--font-body); font-size:.78rem; letter-spacing:0;
  line-height:1.5; color:var(--steel); max-width:56ch;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:1024px) and (max-width:1140px){
  .nav__link{ font-size:.775rem; padding:.5rem .48rem; }
  .hdr__tel{ display:none; }
}

@media (max-width:1023px){
  .hdr{ transform:none !important; }
  .brand img{ height:32px; width:auto; }
  .hdr__tel, .hdr__cta{ display:none; }

  .nav{ background:var(--white); color:var(--ink); }
  .nav__headlabel{ color:var(--steel); }
  .nav__close{ border-color:var(--line); color:var(--ink); }
  .nav__item{ border-bottom:1px solid var(--line); }
  .nav__link{
    color:var(--ink); font-size:1.02rem; font-weight:600;
    width:100%; justify-content:space-between; padding:1rem .1rem; border-radius:0;
  }
  .nav__item.is-open > .nav__link{ color:var(--lab); background:none; }
  .nav__foot{ color:var(--steel); }
  .nav__foot a{ color:var(--ink); }
  .mega{
    position:static; transform:none; width:100%;
    padding:0; margin:0;
    background:none; border:0; box-shadow:none;
  }
  .megap{ grid-template-columns:minmax(0,1fr); gap:.8rem; }
  .megap__col--note{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:.8rem; }
  .mega a{ color:var(--ink); }

  .hero__intro{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .hero__act{ justify-content:flex-start; }
  .hero__draw{ grid-template-columns:minmax(0,1fr); gap:2.4rem; }
  .fig--stack, .fig--curve{ max-width:100%; justify-self:stretch; }

  .rep__body{ grid-template-columns:minmax(0,1fr); gap:2.4rem; }
  .contact{ grid-template-columns:minmax(0,1fr); gap:2rem; }

  .journey{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .journey__step{ padding:1.3rem 1.1rem 1.4rem 0; border-bottom:1px solid var(--rule); }
  .journey__step:nth-child(3n){ border-right:0; padding-right:0; }
  .journey__step:nth-last-child(-n+3){ border-bottom:0; }
  .journey__step:nth-child(4)::before,
  .journey__step:nth-child(5)::before,
  .journey__step:nth-child(6)::before{ top:-3px; }
}

@media (max-width:860px){
  .strip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .strip > div{ padding-bottom:1.1rem; border-bottom:1px solid var(--line); }
  .strip > div:nth-child(2n){ border-right:0; padding-right:0; }
  .strip > div:nth-last-child(-n+2){ border-bottom:0; }

  .links{ grid-template-columns:minmax(0,1fr); }
  .link{ min-height:0; }

  .mtable, .mtable tbody, .mtable tr, .mtable th, .mtable td{ display:block; width:auto; }
  .mtable thead{ display:none; }
  .mtable tbody tr{
    border-bottom:1px solid var(--line);
    padding-block:1.25rem;
  }
  .mtable tbody th, .mtable tbody td{ padding:0; border-bottom:0; }
  .mtable tbody th{ margin-bottom:.55rem; }
  .mtable tbody td{ margin-bottom:.6rem; }
  .mtable tbody td code{ display:inline-block; margin-right:1rem; }
}

@media (max-width:640px){
  .rep__h{ max-width:22ch; }
  .journey{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .journey__step:nth-child(3n){ border-right:1px solid var(--rule); padding-right:1.1rem; }
  .journey__step:nth-child(2n){ border-right:0; padding-right:0; }
  .journey__step:nth-last-child(-n+3){ border-bottom:1px solid var(--rule); }
  .journey__step:nth-last-child(-n+2){ border-bottom:0; }
  .idblock > div{ grid-template-columns:minmax(0,1fr); gap:.15rem; }
  .contact__act{ gap:1.1rem; }
  .contact__tel{ font-size:1.28rem; }
  .foot__nav{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

@media (max-width:400px){
  .journey{ grid-template-columns:minmax(0,1fr); }
  .journey__step{ border-right:0 !important; padding-right:0; border-bottom:1px solid var(--rule) !important; }
  .journey__step:last-child{ border-bottom:0 !important; }
  .strip{ grid-template-columns:minmax(0,1fr); }
  .strip > div{ border-right:0; padding-right:0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .fall{ transform:none; animation:none !important; }
  .curve .cv-line, .curve .cv-pt{ opacity:1; animation:none !important; }
  .pre__grain{ animation:none !important; }
}

/* ==========================================================================
   SECTION GROUNDS — the report rhythm
   hero · white │ 1.0 ink │ 2.0 white │ 3.0 lab blue │ 4.0 white │
   5.0 ink │ 6.0 white │ footer white
   The ground changes at the section edge; hairlines invert through --rule
   and --strong, so no rule needs restating inside these blocks.
   ========================================================================== */
.rep--dark{
  background:var(--ink);
  color:rgba(255,255,255,.84);
  border-top:0;
  --rule:rgba(255,255,255,.16);
  --strong:#ffffff;
}
.rep--lab{
  background:var(--lab);
  color:rgba(255,255,255,.88);
  border-top:0;
  --rule:rgba(255,255,255,.28);
  --strong:#ffffff;
}

.rep--dark .rep__num span,
.rep--lab .rep__num span,
.rep--dark .rep__h,
.rep--lab .rep__h{ color:#fff; }

.rep--dark .lede,
.rep--lab .lede{ color:rgba(255,255,255,.80); }
.rep--dark .lede strong,
.rep--lab .lede strong{ color:#fff; }

.rep--dark :focus-visible{ outline-color:#a9d3ec; }
.rep--lab :focus-visible{ outline-color:#ffffff; }

/* ---------- 1.0 · ink · accreditation ---------- */
.rep--dark .rep__refs-h{ color:rgba(255,255,255,.55); }
.rep--dark .reflist code{ color:#fff; }
.rep--dark .reflist span{ color:rgba(255,255,255,.62); }
.rep--dark .reflist--plain li{ color:#fff; }

.rep--dark .notice{
  background:rgba(255,255,255,.055);
  border-left-color:var(--sand);
}
.rep--dark .notice__k{ color:rgba(255,255,255,.55); }
.rep--dark .notice__q{ color:#fff; }
.rep--dark .notice__n{ color:rgba(255,255,255,.64); }
.rep--dark .notice__n a{
  color:#a9d3ec;
  border-bottom-color:rgba(169,211,236,.42);
}
.rep--dark .notice__n a:hover{ border-bottom-color:#a9d3ec; }

.rep--dark .idblock dt{ color:rgba(255,255,255,.5); }
.rep--dark .idblock dd{ color:#fff; }
.rep--dark .idblock dd a:hover{ color:var(--sand); }

.rep--dark .tnote{ color:rgba(255,255,255,.5); }
.rep--dark .plate figcaption{ color:rgba(255,255,255,.55); }

/* ---------- 5.0 · ink · records ---------- */
/* opaque, or the .links hairline ground shows through the panels */
.rep--dark .link{ background:var(--ink); }
.rep--dark .link:hover{ background:#1c2024; }
.rep--dark .link__k{ color: rgba(255,255,255,.5); }
.rep--dark .link__h{ color: #fff; }
.rep--dark .link__n{ color: rgba(255,255,255,.62); }
.rep--dark .link__a{ color:#a9d3ec; }

/* ---------- 3.0 · lab blue · the sample's journey ---------- */
.rep--lab .journey__n{ color:rgba(255,255,255,.62); }
.rep--lab .journey__h{ color:#fff; }
.rep--lab .journey__step p{ color:rgba(255,255,255,.84); }
.rep--lab .tnote{ color:rgba(255,255,255,.66); }