/* ==========================================================================
   National Audiometry Services — "The Threshold"
   --------------------------------------------------------------------------
   The audiogram is the page's grammar: a ruled field, mono axes, and two data
   colours that are only ever used for the right ear (red) and left ear (blue).
   base.css owns the shell; this file owns the tokens, the chart and the cases.
   ========================================================================== */

:root{
  /* ---------- the chart ---------- */
  --bone:      #f5f3ee;   /* page */
  --bone-2:    #ece7dd;   /* tinted section */
  --ink:       #14171c;   /* type / grid / dark sections */
  --ink-2:     #191d23;
  --ink-3:     #20252c;
  --right:     #c0392b;   /* right ear — clinical convention */
  --left:      #1f5fbf;   /* left ear — clinical convention */
  --grey:      #8b9096;   /* rules, secondary */

  /* ---------- derived ---------- */
  --ink-soft:  #3e444a;   /* body copy on bone */
  --ink-mute:  #5f666d;
  --text:      #f2f0ea;
  --muted:     #9aa0a6;

  /* ---------- base.css contract ---------- */
  --surface:    var(--bone);
  --surface-2:  var(--bone-2);
  --ink-text:   var(--ink);
  --accent:     var(--ink);
  --accent-lit: var(--bone);
  --accent-2:   var(--ink);
  --line:       rgba(245, 243, 238, .16);
  --line-d:     rgba(20, 23, 28, .16);

  /* ---------- type ---------- */
  --font-display: "DM Serif Display", "Iowan Old Style", Georgia, serif;
  --font-body:    "Assistant", system-ui, -apple-system, sans-serif;
  --font-mono:    "Syne Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap-max: 1280px;
  --radius:   0px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

html{ scroll-padding-top:104px; }
body{
  background:var(--bone);
  color:var(--ink);
  font-size:17px;
  font-weight:300;
}
::selection{ background:var(--ink); color:var(--bone); }
:focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-radius:0; }

/* the chart lettering never gets synthesised bold */
.hero__h1,.case__h2,.rung__n,.quote,.contact__tel,.facts b{ font-weight:400; }

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

/* faint print grain — keeps the bone from reading as flat screen white */
body::after{
  content:""; position:fixed; inset:0; z-index:890; pointer-events:none;
  opacity:.026;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ==========================================================================
   HEADER — bone, hairline, ink CTA
   ========================================================================== */
.hdr{
  background:var(--bone);
  border-bottom:1px solid var(--line-d);
  color:var(--ink);
}
@media (min-width:1024px){
  .hdr{
    background:color-mix(in srgb, var(--bone) 90%, transparent);
    backdrop-filter:blur(12px) saturate(1.05);
    -webkit-backdrop-filter:blur(12px) saturate(1.05);
  }
}
.hdr__in{ min-height:86px; gap:1.6rem; }
.brand img{ width:204px; height:auto; filter:brightness(0) saturate(0); opacity:.9; }

.nav__list{ gap:.1rem; }
.nav__link{
  position:relative;
  color:var(--ink); opacity:.74;
  font-size:.845rem; font-weight:500; letter-spacing:.005em;
  padding:.55rem .6rem;
  border-radius:0;
}
.nav__link:hover,
.nav__item.is-open > .nav__link{ color:var(--ink); opacity:1; background:none; }
.nav__link::after{
  content:""; position:absolute; left:.6rem; right:.6rem; bottom:.24rem; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1); }

.nav__tel{
  font-family:var(--font-mono); font-size:.69rem; letter-spacing:.05em;
  opacity:.62;
}
.nav__tel::after{ display:none; }

.nav__cta{
  background:var(--ink); color:var(--bone) !important;
  padding:.64rem 1.05rem; margin-left:.5rem;
  font-weight:500; opacity:1;
  transition:background .2s;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:#000; color:var(--bone); }
.nav__foot{ display:none; }

/* ==========================================================================
   HERO — the chart
   ========================================================================== */
.hero{
  position:relative;
  background:var(--bone);
  border-bottom:1px solid var(--line-d);
  padding-block:clamp(2.4rem,4.6vw,4.2rem) clamp(2.8rem,5.4vw,4.8rem);
  overflow:hidden;
}
.hero__in{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,4.6vw,4.8rem);
  align-items:center;
}
.hero__copy{ min-width:0; }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:.55rem 0;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:clamp(1.2rem,2.4vw,2rem);
}
.hero__meta span{ padding:0 .85rem; border-left:1px solid var(--line-d); }
.hero__meta span:first-child{ padding-left:0; border-left:0; }

.hero__h1{ color:var(--ink); letter-spacing:-.022em; line-height:.96; }
.hero__lead{
  margin-top:clamp(1.2rem,2.2vw,1.8rem);
  max-width:44ch;
  font-size:1.03rem; line-height:1.7;
  color:var(--ink-soft);
}
.hero__acts{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1.2rem 1.6rem;
  margin-top:clamp(1.6rem,3vw,2.3rem);
}
.hero__note{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-mute);
}

.btn--ink{
  background:var(--ink); color:var(--bone);
  border-radius:0;
  padding:.95rem 1.35rem;
  font-size:.82rem; font-weight:500; letter-spacing:.02em;
}
.btn--ink svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.btn--ink:hover{ background:#000; color:var(--bone); transform:translateY(-2px); }
.btn--ink:hover svg{ transform:translateX(4px); }

.link-u{
  display:inline-block;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.02em;
  padding-bottom:.28rem;
  border-bottom:1px solid var(--line-d);
  transition:border-color .2s, opacity .2s;
}
.link-u:hover{ border-color:var(--ink); }

/* ---------- the chart frame ---------- */
.chart{
  min-width:0;
  border:1px solid var(--line-d);
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 42%);
}
.chart__top{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.62rem .9rem;
  border-bottom:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-mute);
}
.chart__top span:nth-child(2){ color:var(--ink-mute); }
.chart__live{ display:inline-flex; align-items:center; gap:.4rem; color:var(--ink-mute); }
.chart__live i{ width:6px; height:6px; border:1px solid currentColor; }

.chart__plot{ padding:.55rem .8rem 0; }
.ag{ display:block; width:100%; height:auto; overflow:visible; }

.ag-grid line{ stroke:var(--grey); stroke-width:1; stroke-opacity:.34; vector-effect:non-scaling-stroke; }
.ag-grid .ag-v{ stroke-opacity:.2; }
.ag-grid .ag-zero{ stroke:var(--ink); stroke-opacity:.42; stroke-width:1.2; }

.ag-axis text{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
  fill:#6f757c;
}
.ag-axis .ag-axis-h{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; fill:var(--ink-mute);
}

.ag-series--r .ag-curve{ stroke:var(--right); }
.ag-series--l .ag-curve{ stroke:var(--left); }
.ag-curve{
  fill:none; stroke-width:2.1; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:agDraw 1.35s cubic-bezier(.55,.06,.25,1) forwards;
  animation-delay:.92s;
}
.ag-o{
  fill:var(--bone); stroke:var(--right); stroke-width:2.1;
  opacity:0; transform:scale(.35);
  transform-box:fill-box; transform-origin:center;
  animation:agPop .46s var(--ease) forwards;
  animation-delay:calc(1.12s + var(--j, 0) * 70ms);
}
.ag-x{
  fill:none; stroke:var(--left); stroke-width:2.1; stroke-linecap:round;
  opacity:0; transform:scale(.35);
  transform-box:fill-box; transform-origin:center;
  animation:agPop .46s var(--ease) forwards;
  animation-delay:calc(1.18s + var(--j, 0) * 70ms);
}

/* the grid draws first, rule by rule */
.ag-l,.ag-v{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:agDraw .8s cubic-bezier(.6,.05,.2,1) forwards;
  animation-delay:calc(var(--i) * 32ms);
}
.ag-zero{ animation:fadeIn .5s ease forwards; animation-delay:.9s; opacity:0; }

@keyframes agDraw{ to{ stroke-dashoffset:0; } }
@keyframes agPop{ to{ opacity:1; transform:none; } }
@keyframes fadeIn{ to{ opacity:1; } }

.chart__cap{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.55rem 1.3rem;
  padding:.7rem .9rem .8rem;
  border-top:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.03em;
  color:var(--ink-mute);
}
.key{ display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; }
.key i{ position:relative; display:inline-block; width:10px; height:10px; flex:0 0 auto; }
.key--r i{ border:2px solid var(--right); border-radius:50%; }
.key--l i::before,.key--l i::after{
  content:""; position:absolute; left:-1px; top:4px; width:12px; height:2px;
  background:var(--left);
}
.key--l i::before{ transform:rotate(45deg); }
.key--l i::after{ transform:rotate(-45deg); }
.chart__disc{
  flex-basis:100%;
  font-style:italic; letter-spacing:0;
  color:var(--ink-mute);
}

/* ==========================================================================
   CASE-NOTE SECTIONS
   ========================================================================== */
.case{ background:var(--bone); }
.case--tint{ background:var(--bone-2); }
.noise{ background:var(--ink); color:var(--text); }
.why{ background:var(--ink-2); color:var(--text); }

.case__head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:.4rem 2rem;
  border-top:1px solid var(--ink);
  padding-top:.72rem;
  margin-bottom:clamp(1.8rem,3.4vw,2.8rem);
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase;
}
.case__num{ color:var(--ink); }
.case__ref{ color:var(--ink-mute); letter-spacing:.1em; text-transform:none; }
.case__head--dark{ border-top-color:rgba(245,243,238,.5); }
.case__head--dark .case__num{ color:var(--bone); }
.case__head--dark .case__ref{ color:var(--muted); }

.case__h2{
  font-family:var(--font-display);
  font-size:clamp(2.05rem,4.4vw,3.55rem);
  line-height:1.02; letter-spacing:-.02em;
  max-width:20ch;
}
.case__body{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,4.6rem);
  align-items:start;
}
.case__main{ min-width:0; }
.case__aside{
  min-width:0;
  border-left:1px solid var(--line-d);
  padding-left:clamp(1.4rem,3vw,2.6rem);
}
.noise .case__aside,.why .case__aside{ border-left-color:var(--line); }

.prose{ margin-top:clamp(1.2rem,2.4vw,1.8rem); }
.prose p{
  max-width:52ch;
  font-size:1rem; line-height:1.72;
  color:var(--ink-soft);
}
.prose p + p{ margin-top:1rem; }
.noise .prose p,.why .prose p{ color:rgba(242,240,234,.76); }

.who{
  display:grid;
  grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);
  gap:1rem 1.4rem;
  margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--ink);
  padding-top:1rem;
}
.who__h{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
}
.who p:last-child{ font-size:.93rem; line-height:1.65; color:var(--ink-soft); max-width:46ch; }

.shot{ margin:0; }
.shot img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  filter:saturate(.72) contrast(1.02);
}
.shot--dark img{ filter:saturate(.7) contrast(1.04) brightness(.94); }
.shot figcaption{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:.6rem; padding-top:.55rem;
  border-top:1px solid var(--line-d);
  font-family:var(--font-mono); font-size:.57rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute);
}
.noise .shot figcaption{ border-top-color:var(--line); color:var(--muted); }

/* the record — definition rows, no cards */
.record{
  margin-top:1.6rem;
  border-top:1px solid var(--line-d);
}
.record div{
  display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:1rem;
  padding:.68rem 0;
  border-bottom:1px solid var(--line-d);
}
.record dt{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-mute);
}
.record dd{ font-size:.86rem; line-height:1.5; color:var(--ink); }

/* ==========================================================================
   THE EXPOSURE LADDER
   ========================================================================== */
.ladder{
  margin-top:clamp(2rem,4vw,2.8rem);
  border-top:1px solid rgba(245,243,238,.4);
}
.rung{
  display:grid;
  grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);
  gap:clamp(1rem,3vw,2.2rem);
  padding:1.4rem 0 1.6rem;
  border-bottom:1px solid var(--line);
}
.rung--limit{
  background:rgba(245,243,238,.045);
  padding-inline:clamp(.8rem,2vw,1.2rem);
  margin-inline:calc(clamp(.8rem,2vw,1.2rem) * -1);
}
.rung__k{
  font-family:var(--font-mono); font-size:.59rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.rung__v{ display:flex; align-items:baseline; gap:.45rem; margin-top:.4rem; }
.rung__n{
  font-family:var(--font-display);
  font-size:clamp(2.7rem,5.2vw,4rem);
  line-height:.86; letter-spacing:-.03em; color:var(--bone);
}
.rung__u{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; color:var(--muted); }
.rung__x{ margin-top:.5rem; font-size:.76rem; line-height:1.4; color:var(--muted); max-width:20ch; }
.rung--limit .rung__x{ color:rgba(245,243,238,.62); }

.rung__d li{
  position:relative;
  padding:.6rem 0 .6rem 1.15rem;
  border-top:1px solid var(--line);
  font-size:.92rem; line-height:1.5;
  color:rgba(242,240,234,.86);
}
.rung__d li:first-child{ border-top:0; padding-top:0; }
.rung__d li::before{
  content:""; position:absolute; left:0; top:1rem;
  width:1px; height:11px; background:rgba(245,243,238,.55);
}
.rung__d li:first-child::before{ top:.35rem; }

.ladder__foot{
  margin-top:1rem;
  font-family:var(--font-mono); font-size:.63rem; line-height:1.7;
  letter-spacing:.02em; color:var(--muted);
  max-width:58ch;
}

/* ---------- mini chart ---------- */
.mini{ margin:1.8rem 0 0; border:1px solid var(--line); }
.mini svg{ display:block; width:100%; height:auto; padding:.7rem .7rem 0; }
.mini-grid path{
  fill:none; stroke:rgba(245,243,238,.22); stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.mini-band{
  fill:rgba(245,243,238,.09);
  stroke:rgba(245,243,238,.34); stroke-width:1; stroke-dasharray:3 4;
  vector-effect:non-scaling-stroke;
}
.mini-axis text{
  font-family:var(--font-mono); font-size:12px; fill:var(--muted); letter-spacing:.03em;
}
.mini-note text{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; fill:rgba(245,243,238,.72);
}
.mini figcaption{
  display:grid; gap:.35rem;
  padding:.7rem .8rem .85rem;
  border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.59rem; line-height:1.65;
  color:var(--muted);
}
.mini__h{ color:var(--bone); letter-spacing:.1em; text-transform:uppercase; }

/* ==========================================================================
   03 · COMPLIANCE — the index
   ========================================================================== */
.case__aside--quote{ padding-top:.2rem; }
.quote{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,2.1vw,1.5rem);
  line-height:1.38; letter-spacing:-.01em;
  color:var(--ink);
  border-top:1px solid var(--ink);
  padding-top:1rem;
}
.index{
  margin-top:clamp(2.4rem,4.6vw,3.6rem);
  border-top:1px solid var(--ink);
}
.index__row{
  display:grid;
  grid-template-columns:clamp(2.4rem,4vw,4rem) minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.4rem);
  align-items:start;
  padding:1.6rem 0 1.8rem;
  border-bottom:1px solid var(--line-d);
}
.index__n{ font-family:var(--font-mono); font-size:.63rem; letter-spacing:.1em; color:var(--ink-mute); padding-top:.35rem; }
.index__c h3{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.75rem); line-height:1.15; letter-spacing:-.01em;
}
.index__c p{ margin-top:.5rem; max-width:54ch; font-size:.93rem; line-height:1.66; color:var(--ink-soft); }
.index__a{
  display:inline-flex; align-items:center; gap:.5rem;
  align-self:center;
  font-family:var(--font-mono); font-size:.61rem; letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:.28rem; border-bottom:1px solid var(--line-d);
  transition:border-color .2s;
}
.index__a svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.index__a:hover{ border-color:var(--ink); }
.index__a:hover svg{ transform:translateX(4px); }

.strip{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.4rem;
  margin-top:clamp(2rem,4vw,2.8rem);
  border-top:1px solid var(--ink);
  padding-top:1.1rem;
}
.strip b{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:1.12rem; letter-spacing:-.01em;
}
.strip span{
  display:block; margin-top:.2rem;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* ==========================================================================
   04 · VISIT — the sequence
   ========================================================================== */
.steps{
  margin-top:clamp(1.8rem,3.4vw,2.6rem);
  border-top:1px solid var(--line-d);
}
.steps li{
  display:grid; grid-template-columns:2.6rem minmax(0,1fr);
  gap:1rem;
  padding:1.2rem 0 1.25rem;
  border-bottom:1px solid var(--line-d);
}
.steps__n{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; color:var(--ink-mute); padding-top:.3rem; }
.steps h3{
  font-family:var(--font-display); font-weight:400;
  font-size:1.24rem; line-height:1.2;
}
.steps p{ margin-top:.3rem; max-width:50ch; font-size:.92rem; line-height:1.65; color:var(--ink-soft); }

.brief{ margin-top:1.8rem; border-top:1px solid var(--ink); padding-top:.9rem; }
.brief__h{
  font-family:var(--font-mono); font-size:.59rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute);
}
.brief ul{ margin-top:.6rem; }
.brief li{
  padding:.45rem 0;
  border-bottom:1px solid var(--line-d);
  font-size:.88rem; line-height:1.5; color:var(--ink-soft);
}

/* ==========================================================================
   05 · WHY
   ========================================================================== */
.why__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.6rem);
  align-items:start;
}
.why__main{ min-width:0; }
.why__main p{
  margin-top:1.2rem; max-width:52ch;
  font-size:1rem; line-height:1.72; color:rgba(242,240,234,.76);
}
.why .link-u{ color:var(--bone); border-bottom-color:rgba(245,243,238,.32); }
.why .link-u:hover{ border-color:var(--bone); }

.facts{ border-top:1px solid rgba(245,243,238,.4); }
.facts li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem;
  padding:.95rem 0;
  border-bottom:1px solid var(--line);
}
.facts b{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.35rem,2.4vw,1.65rem); line-height:1; letter-spacing:-.015em;
  color:var(--bone);
}
.facts span{
  max-width:17ch; text-align:right;
  font-family:var(--font-mono); font-size:.57rem; line-height:1.5;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ background:var(--bone); border-top:1px solid var(--line-d); }
.contact .case__h2{ font-size:clamp(1.9rem,4vw,3.15rem); max-width:24ch; }
.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(2.2rem,5vw,4.6rem);
  align-items:start;
}
.contact__tel{
  display:inline-block;
  margin-top:clamp(1.4rem,3vw,2.2rem);
  font-family:var(--font-display);
  font-size:clamp(2.3rem,5.4vw,4.1rem);
  line-height:.95; letter-spacing:-.025em;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.contact__tel:hover{ border-color:var(--ink); }
.contact__mail{
  margin-top:.8rem;
  font-size:1rem;
  word-break:break-word;
}
.contact__mail a{ border-bottom:1px solid var(--line-d); padding-bottom:.15rem; }
.contact__mail a:hover{ border-color:var(--ink); }
.contact .btn{ margin-top:clamp(1.6rem,3vw,2.2rem); }

.contact__side{
  border-left:1px solid var(--line-d);
  padding-left:clamp(1.4rem,3vw,2.4rem);
}
.side__h{
  font-family:var(--font-mono); font-size:.59rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute);
}
.side__list{ margin-top:.7rem; border-top:1px solid var(--line-d); }
.side__list li{
  padding:.6rem 0;
  border-bottom:1px solid var(--line-d);
  font-size:.9rem; line-height:1.5; color:var(--ink-soft);
}
.side__map{
  display:inline-block; margin-top:1.4rem;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase;
  border-bottom:1px solid var(--line-d); padding-bottom:.3rem;
}
.side__map:hover{ border-color:var(--ink); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--ink); color:rgba(242,240,234,.78); }
.foot__logo{ width:236px; height:auto; opacity:.92; }
.foot__blurb{
  margin-top:1.2rem; max-width:34ch;
  font-size:.84rem; line-height:1.7; color:var(--muted);
}
.foot__h{ color:rgba(245,243,238,.44); }
.foot__nav a{ color:rgba(245,243,238,.78); }
.foot__nav a:hover{ color:var(--bone); }
.foot__nav li{ font-size:.83rem; color:rgba(245,243,238,.58); }
.foot__bottom{ color:rgba(245,243,238,.42); }

/* ==========================================================================
   PRELOADER — the motif, drawn
   ========================================================================== */
.pre{ background:var(--ink); }
.pre__mark svg{ width:clamp(150px,22vw,210px); height:auto; display:block; }
.pre__grid path{
  fill:none; stroke:rgba(245,243,238,.3); stroke-width:1;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:agDraw .9s var(--ease) forwards;
}
.pre__zero{
  fill:none; stroke:rgba(245,243,238,.8); stroke-width:1.2;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:agDraw .9s var(--ease) .4s forwards;
}
.pre__o{ fill:none; stroke:var(--right); stroke-width:2; opacity:0; animation:fadeIn .5s ease .8s forwards; }
.pre__x{ fill:none; stroke:var(--left); stroke-width:2; stroke-linecap:round; opacity:0; animation:fadeIn .5s ease 1s forwards; }
.pre__o,.pre__x{ transform-box:fill-box; transform-origin:center; }
.pre__pct{ color:var(--bone); }
.pre__bar i{ background:var(--bone); }
.pre__meta{ color:var(--muted); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .hero__in{ gap:2.4rem; }
  .brand img{ width:186px; }
  .nav__link{ font-size:.8rem; padding-inline:.45rem; }
}

@media (max-width:960px){
  .hero__in{ grid-template-columns:minmax(0,1fr); }
  .hero__copy{ max-width:38rem; }
  .chart{ margin-top:.6rem; }
  .case__body{ grid-template-columns:minmax(0,1fr); }
  .case__aside{
    border-left:0; border-top:1px solid var(--line-d);
    padding-left:0; padding-top:clamp(1.6rem,3vw,2.2rem);
    margin-top:.4rem;
  }
  .noise .case__aside,.why .case__aside{ border-top-color:var(--line); }
  .why__grid,.contact__grid{ grid-template-columns:minmax(0,1fr); }
  .contact__side{ border-left:0; border-top:1px solid var(--line-d); padding-left:0; padding-top:1.6rem; }
  .facts b{ font-size:1.45rem; }
}

@media (max-width:1023px){
  .hdr__in{ min-height:72px; }
  .brand img{ width:172px; }

  /* the mobile overlay is bone here, not ink */
  .nav{ background:var(--bone); color:var(--ink); }
  .nav__head{ border-bottom-color:var(--line-d); }
  .nav__headlabel{ color:var(--ink-mute); }
  .nav__close{ border-color:var(--line-d); }
  .nav__close svg{ color:var(--ink); }
  .nav__item{ border-bottom-color:var(--line-d); }
  .nav__link{ color:var(--ink); opacity:.85; }
  .nav__link::after{ display:none; }
  .nav__tel{ font-family:var(--font-mono); font-size:.82rem; }
  .nav__cta{ color:var(--bone) !important; margin-left:0; }
  .nav__foot{ display:grid; }
  .nav__foot{ color:var(--ink-mute); }
  .nav__foot a{ color:var(--ink-mute); }
  .burger{ border-color:var(--line-d); }
  .burger span{ background:var(--ink); }
}

@media (max-width:760px){
  body{ font-size:16px; }
  .chart__top span:nth-child(2){ display:none; }
  .chart__cap{ font-size:.57rem; }
  .who{ grid-template-columns:minmax(0,1fr); gap:.5rem; }
  .rung{ grid-template-columns:minmax(0,1fr); gap:.9rem; padding:1.25rem 0 1.4rem; }
  .rung__x{ max-width:none; }
  .rung__d li:first-child::before{ top:.3rem; }
  .index__row{ grid-template-columns:2rem minmax(0,1fr); }
  .index__a{ grid-column:2; justify-self:start; margin-top:.6rem; }
  .strip{ grid-template-columns:minmax(0,1fr); gap:.9rem; }
  .strip li{ display:flex; align-items:baseline; gap:.8rem; border-bottom:1px solid var(--line-d); padding-bottom:.75rem; }
  .strip b{ font-size:1.02rem; }
  .strip span{ margin-top:0; }
  .facts li{ align-items:flex-start; }
  .facts span{ max-width:22ch; }
  .contact__mail{ font-size:.9rem; }
}

@media (max-width:520px){
  .hero__meta span{ border-left:0; padding:0 .9rem 0 0; font-size:.56rem; }
  .hero__acts{ gap:1rem; }
  .ag-axis text{ font-size:20px; }
  .ag-axis .ag-axis-h{ font-size:13px; letter-spacing:.12em; }
  .chart__plot{ padding:.35rem .35rem 0; }
  .chart__cap{ padding:.6rem .7rem .7rem; }
  .record div{ grid-template-columns:minmax(0,1fr); gap:.2rem; }
  .steps li{ grid-template-columns:2rem minmax(0,1fr); gap:.7rem; }
  .foot__nav{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

/* ==========================================================================
   REDUCED MOTION — the finished chart, no animation
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .ag-l,.ag-v,.ag-curve,.pre__grid path,.pre__zero{
    animation:none !important;
    stroke-dasharray:none !important;
    stroke-dashoffset:0 !important;
  }
  .ag-o,.ag-x,.pre__o,.pre__x,.ag-zero{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}