/* ==========================================================================
   NDT Consultants Ltd — "The Level"
   --------------------------------------------------------------------------
   base.css owns the reset, the wrap, the section shell, the header/nav/mega
   mechanics, buttons, the footer skeleton, reveals, the preloader shell and
   the hero-headline contract.

   This file supplies: the palette and type, the drawn elevation, and the six
   sections below it. Everything is measured against a bone drawing sheet.
   ========================================================================== */

:root{
  /* ---------- the palette, straight from the brief ---------- */
  --amber:    #eea30a;
  --graphite: #3f444b;
  --ink:      #15181b;
  --paper:    #f5f3ee;
  --sky:      #79b8ff;

  /* ---------- surfaces, mixed from those ---------- */
  --ink-2:    #1b1f23;
  --ink-3:    #20252a;
  --amber-ink:#c98706;
  --surface-2:#eae6dc;

  /* ---------- text ---------- */
  --text:     #f5f3ee;
  --muted:    rgba(245,243,238,.60);
  --ink-text: #15181b;
  --ink-mute: #5b6169;

  /* ---------- base.css contract ---------- */
  --accent:     var(--amber);
  --accent-lit: #f0b23c;
  --accent-2:   var(--amber);
  --surface:    var(--paper);
  --line:       rgba(21,24,27,.14);
  --line-d:     rgba(21,24,27,.10);
  --line-dk:    rgba(245,243,238,.15);
  --floor:      rgba(21,24,27,.62);

  /* ---------- type ---------- */
  --font-display: "Eczar", Georgia, serif;
  --font-body:    "Lexend", system-ui, -apple-system, sans-serif;
  --font-mono:    "Lekton", ui-monospace, "SFMono-Regular", monospace;

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

html{ scroll-padding-top:86px; }
body{
  background:var(--paper);
  color:var(--ink-text);
  font-size:16px;
  font-weight:400;
  line-height:1.68;
}
::selection{ background:var(--amber); color:var(--ink); }
:focus-visible{ outline:2px solid var(--amber-ink); outline-offset:3px; }

.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:var(--paper);
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{ width:auto; height:auto; clip-path:none; }

/* paper grain over the sheet, barely there — kills the digital sterility */
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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

.link{
  text-decoration:underline;
  text-decoration-color:var(--amber);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.link:hover{ text-decoration-thickness:2px; }

/* the eyebrow used outside .sect__num */
.num{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-mute);
}
.num::before{ content:""; width:24px; height:1px; background:currentColor; opacity:.55; }
.num--amber{ color:var(--amber); }
.num--ink{ color:rgba(21,24,27,.6); }

.sect__num{ font-size:.62rem; letter-spacing:.24em; }
.sect__h2{ font-weight:600; letter-spacing:-.022em; line-height:1.08; }
.sect__lead{ max-width:40ch; }

/* ==========================================================================
   PRELOADER — the dimension line draws itself
   ========================================================================== */
.pre{ background:var(--paper); }
.pre__mark{ width:104px; }
.pre__mark svg{ display:block; width:100%; height:auto; }
.pre__v{
  stroke:var(--graphite); stroke-width:1.2;
  stroke-dasharray:112; stroke-dashoffset:112;
  animation:preDraw 1.15s var(--ease) forwards;
}
.pre__t{
  stroke:var(--amber); stroke-width:1.4;
  stroke-dasharray:40; stroke-dashoffset:40;
  animation:preDraw .45s var(--ease) forwards;
}
.pre__t:nth-child(2){ animation-delay:.18s; }
.pre__t:nth-child(3){ animation-delay:.42s; }
.pre__t:nth-child(4){ animation-delay:.66s; }
@keyframes preDraw{ to{ stroke-dashoffset:0; } }
.pre__meta{ color:var(--ink-mute); }
.pre__pct{ color:var(--amber-ink); }
.pre__bar{ background:rgba(21,24,27,.12); height:1px; }
.pre__bar i{ background:var(--amber); }

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */
.hdr{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.hdr__in{ min-height:74px; gap:1rem; }
.brand img{ width:172px; height:auto; mix-blend-mode:multiply; }

.nav__link{
  position:relative;
  font-size:.79rem; font-weight:400; letter-spacing:-.004em;
  padding:.44rem .52rem;
  color:var(--ink);
}
.nav__link:hover{ color:var(--ink); background:transparent; }
.nav__link:hover::after,
.nav__item.is-open > .nav__link::after{
  content:""; position:absolute; left:.52rem; right:.52rem; bottom:.24rem;
  height:1px; background:var(--amber);
}
.nav__item.is-open > .nav__link{ color:var(--ink); }
.nav__chev{ width:9px; height:5px; opacity:.5; }

.nav__util .nav__link{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.02em;
  color:var(--graphite);
}

.hdr__cta{
  flex-shrink:0; margin-left:.55rem;
  padding:.6rem .95rem;
  background:var(--ink); color:var(--paper);
  font-size:.74rem; font-weight:400; letter-spacing:.01em; white-space:nowrap;
  border-radius:var(--radius);
  transition:background .2s, color .2s, transform .2s var(--ease);
}
.hdr__cta:hover{ background:var(--amber); color:var(--ink); transform:translateY(-1px); }

/* mega panel — dark, on the bone header */
.mega{
  background:var(--ink);
  border-color:rgba(245,243,238,.14);
  border-radius:var(--radius);
}
.mega__h{ color:var(--amber); border-bottom-color:rgba(245,243,238,.16); }
.megap{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem; }
.megap__col--note{
  border-left:1px solid rgba(245,243,238,.14);
  padding-left:1.4rem;
}
.megap__n{
  display:inline-block; width:1.9em;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.05em;
  color:rgba(238,163,10,.75);
}
.megap__note{
  font-size:.8rem; line-height:1.62; color:rgba(245,243,238,.6);
  max-width:26ch;
}
.megap__all{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--amber);
}
.megap__all:hover{ color:var(--paper); }

.burger span{ background:var(--ink); }

/* the overlay's contact block belongs to the mobile overlay only */
@media (min-width:1024px){
  .nav__foot{ display:none; }
}

/* ==========================================================================
   01 — HERO: the elevation
   ========================================================================== */
.hero{
  background:var(--paper);
  color:var(--ink-text);
  padding-block:clamp(.9rem,2vw,1.6rem) clamp(2rem,4.4vw,3.4rem);
}

.sheet{
  position:relative;
  border:1px solid var(--line);
  min-height:clamp(500px, calc(100svh - 162px), 830px);
  background-image:
    linear-gradient(to right, rgba(21,24,27,.042) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,24,27,.042) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  background-position:-1px -1px;
}

.elev{
  --railw:clamp(28px,3.2vw,48px);
  display:grid;
  grid-template-columns:var(--railw) minmax(0,1fr);
  grid-template-rows:1fr auto 1fr;
  min-height:inherit;
}

/* ---------- the dimension line ---------- */
.rail{ grid-column:1; grid-row:1 / -1; position:relative; }
.rail__line{
  position:absolute; right:0; top:0; bottom:0; width:1px;
  background:rgba(21,24,27,.3);
}
.rail__line::before,
.rail__line::after{
  content:""; position:absolute; right:-6px; width:12px; height:1px;
  background:rgba(21,24,27,.4);
}
.rail__line::before{ top:0; }
.rail__line::after{ bottom:26px; }
.rail__yr{
  position:absolute; right:9px; bottom:6px;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.3em;
  color:var(--graphite); white-space:nowrap;
}

/* ---------- the three bands ---------- */
.band{
  position:relative;
  grid-column:2;
  padding:clamp(1rem,2vw,1.5rem) clamp(1rem,3vw,2.4rem);
  border-top:2px solid var(--floor);
  background-image:
    repeating-linear-gradient(45deg, var(--slab, rgba(21,24,27,.5)) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(45deg, var(--hatch, rgba(21,24,27,.12)) 0 1px, transparent 1px var(--hp, 7px));
  background-size:100% 9px, auto;
  background-repeat:no-repeat, repeat;
  background-position:0 0, 0 0;
}
/* the floor line runs back across the dimension line — that crossing is the tick */
.band::before{
  content:""; position:absolute; left:calc(-1 * var(--railw)); top:-2px;
  width:var(--railw); height:2px; background:var(--floor);
}

.band--3{
  grid-row:1;
  --hp:6px; --hatch:rgba(21,24,27,.09);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(.7rem,2vw,1.6rem);
}
.band--2{
  grid-row:2;
  --hp:18px; --hatch:rgba(21,24,27,.05);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-content:center;
  row-gap:clamp(1.1rem,2.6vw,2.1rem);
  padding-block:clamp(1.5rem,3.2vw,2.6rem) clamp(1.7rem,3.4vw,2.9rem);
}
.band--1{
  grid-row:3;
  --hp:9px; --hatch:rgba(21,24,27,.075);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(.7rem,2vw,1.6rem);
}

.band--2 .band__code{ grid-column:1; grid-row:1; }
.band--2 .gate{ grid-column:3; grid-row:1; justify-self:end; }
.band--2 .hero__copy{ grid-column:1 / -1; grid-row:2; }

.band__code{ display:flex; align-items:baseline; gap:.45rem; min-width:0; }
.band__lbl{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute);
}
.band__code b{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.15rem,2vw,1.75rem); line-height:1; letter-spacing:.02em;
}
.band__note{
  font-family:var(--font-mono); font-size:clamp(.55rem,.72vw,.64rem);
  letter-spacing:.08em; text-transform:uppercase; line-height:1.5;
  color:var(--ink-mute); min-width:0;
}

/* the exam gate — the only sky blue on the page */
.gate{ display:block; width:clamp(18px,2.1vw,25px); color:var(--sky); }
.band--2 .gate{ width:clamp(24px,2.9vw,34px); }
.gate svg{ display:block; width:100%; height:auto; }

/* ---------- the headline, inside level II ---------- */
.hero__copy{ grid-column:1 / -1; max-width:min(100%, 980px); }
.hero__kick{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-mute);
}
.hero__kick::before{ content:""; width:20px; height:1px; background:var(--amber); }

.hero__h1{
  margin-top:clamp(.7rem,1.5vw,1.1rem);
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--ink);
}
.hero__h1 .line{ padding-block:.11em; }

.hero__lead{
  margin-top:clamp(.9rem,1.8vw,1.3rem);
  max-width:52ch;
  font-size:clamp(.94rem,1.1vw,1.04rem);
  line-height:1.68;
  color:var(--ink-mute);
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:clamp(1.2rem,2.2vw,1.7rem); }
.hero__trust{
  display:flex; flex-wrap:wrap; gap:.5rem 1.3rem; margin-top:1.5rem;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute);
}
.hero__trust span{ display:inline-flex; align-items:center; gap:.5rem; }
.hero__trust span::before{
  content:""; width:4px; height:4px; background:var(--amber); border-radius:50%;
}

.hero .btn--solid{ border-radius:var(--radius); }
.hero .btn--ghost{
  border-color:rgba(21,24,27,.28); color:var(--ink); border-radius:var(--radius);
}
.hero .btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ==========================================================================
   02 — SINCE 1985
   ========================================================================== */
.since{
  background:var(--paper);
  color:var(--ink-text);
  border-top:1px solid var(--line);
  padding-top:clamp(3rem,6vw,5rem);
}
.since__top{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.8rem,4.5vw,4rem);
  align-items:start;
}
.since__big{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(4rem,13.5vw,10.5rem);
  line-height:.84; letter-spacing:-.045em;
  margin-top:.6rem;
  font-feature-settings:"tnum" 1;
}
.since__place{
  margin-top:1rem; font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);
}
.since__h{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.45rem,2.6vw,2.05rem); line-height:1.18; letter-spacing:-.02em;
  margin-bottom:1.1rem;
}
.since__body p{ color:var(--ink-mute); font-size:.95rem; max-width:58ch; }
.since__body p + p{ margin-top:.9rem; }

.since__low{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.8rem,4vw,3.4rem);
  margin-top:clamp(2.2rem,4.4vw,3.6rem);
  align-items:start;
}
.photo{ margin:0; min-width:0; }
.photo img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius);
  filter:saturate(.88) contrast(1.02);
}
.photo figcaption{
  margin-top:.7rem; font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.1em; color:var(--ink-mute); line-height:1.7;
}

.facts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--floor);
  align-content:start;
}
.fact{ padding:.8rem 1rem .8rem 0; border-bottom:1px solid var(--line); min-width:0; }
.fact:nth-child(odd){ padding-right:1.2rem; }
.fact__k{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute);
}
.fact__v{
  font-family:var(--font-display); font-weight:500; font-size:1rem;
  line-height:1.3; margin-top:.2rem; overflow-wrap:anywhere;
}
.badges{
  grid-column:1 / -1; display:flex; align-items:center; gap:1.6rem;
  padding:1.2rem 0 .3rem; border-bottom:1px solid var(--line);
}
.badges img{ width:auto; mix-blend-mode:multiply; }
.badges img:first-child{ height:46px; }
.badges img:last-child{ height:50px; }

/* ==========================================================================
   03 — THE FLOORS
   ========================================================================== */
.floors{ background:var(--ink); color:var(--text); }
.floors__list{ border-top:1px solid var(--line-dk); }
.floor{
  display:grid;
  grid-template-columns:clamp(88px,12vw,158px) minmax(0,1fr) clamp(148px,19vw,232px);
  gap:clamp(1rem,2.6vw,2.4rem);
  padding-block:clamp(1.5rem,3vw,2.5rem);
  border-bottom:1px solid var(--line-dk);
  min-width:0;
}
.floor__n{ display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.floor__n span{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.24em;
  color:var(--amber);
}
.floor__n b{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.85rem); line-height:1; letter-spacing:-.01em;
}
.floor__p{ color:rgba(245,243,238,.72); font-size:.93rem; max-width:56ch; min-width:0; }
.floor__list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 1.6rem; margin-top:1.1rem; min-width:0;
}
.floor__list li{ min-width:0; }
.floor__list a,
.floor__list span{
  display:block; padding:.34rem 0;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.02em;
  line-height:1.45; color:rgba(245,243,238,.55);
  border-bottom:1px solid rgba(245,243,238,.07);
  overflow-wrap:anywhere;
  transition:color .18s;
}
.floor__list a:hover{ color:var(--amber); }

.floor__out{
  display:flex; flex-direction:column; justify-content:space-between; gap:1.4rem;
  padding-left:clamp(.9rem,2vw,1.5rem);
  border-left:1px solid var(--line-dk);
  min-width:0;
}
.floor__k{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(245,243,238,.4);
}
.floor__v{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1rem,1.45vw,1.22rem); line-height:1.24;
  color:var(--paper); margin-top:.5rem;
}
.floor__hatch{
  display:block; height:26px;
  background-image:repeating-linear-gradient(45deg, rgba(238,163,10,.55) 0 1px, transparent 1px 6px);
  opacity:.6;
}

/* ==========================================================================
   04 — THE CERTIFICATION LADDER
   ========================================================================== */
.ladder{ background:var(--paper); color:var(--ink-text); }
.ladder .wrap{ --ladpad:clamp(22px,3.4vw,54px); }

.rungs{ position:relative; }
.rungs__rail{
  position:absolute; left:0; top:0; bottom:0; width:2px;
  pointer-events:none;
}
.rungs__line{
  position:absolute; left:0; top:0; bottom:0; width:1px;
  background:rgba(21,24,27,.2);
}
.rungs__fill{
  position:absolute; left:0; top:0; width:2px; height:100%;
  background:var(--amber);
  transform-origin:top center;
  transform:scaleY(1);
}
.rungs__list{ padding-left:var(--ladpad); }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rungs__fill{
      animation:ladFill linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 42%;
    }
    @keyframes ladFill{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
  }
}

.rung{
  position:relative;
  padding-block:clamp(1.3rem,2.8vw,2.1rem);
  border-top:1px solid var(--line);
}
.rung:first-of-type{ border-top:0; padding-top:0; }
.rung::before{
  content:""; position:absolute; left:calc(-1 * var(--ladpad));
  top:clamp(1.3rem,2.8vw,2.1rem); width:var(--ladpad); height:1px;
  background:rgba(21,24,27,.4);
}
.rung:first-of-type::before{ top:0; }
.rung::after{
  content:""; position:absolute; left:calc(-1 * var(--ladpad));
  top:calc(clamp(1.3rem,2.8vw,2.1rem) - 2.5px);
  width:5px; height:5px; background:var(--amber); border-radius:50%;
}
.rung:first-of-type::after{ top:-2.5px; }

.rung__head{ display:flex; align-items:center; gap:clamp(.8rem,1.8vw,1.3rem); min-width:0; }
.rung__lvl{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.5rem,2.8vw,2.25rem); line-height:.9;
  color:var(--amber-ink); min-width:1.5ch;
}
.rung__name{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.1rem,1.9vw,1.45rem); line-height:1.1;
  letter-spacing:-.01em; min-width:0;
}
.gate--sm{ margin-left:auto; width:18px; flex-shrink:0; }

.rung__p{ margin-top:.85rem; max-width:60ch; color:var(--ink-mute); font-size:.93rem; }
.rung__rows{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem 2rem; margin-top:1.05rem;
}
.rung__rows div{ min-width:0; }
.rung__rows dt{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:.2rem;
}
.rung__rows dd{
  margin:0; font-size:.9rem; line-height:1.55; font-weight:500;
  overflow-wrap:anywhere;
}
.rungs__note{
  margin-top:clamp(1.6rem,3vw,2.4rem);
  padding-left:var(--ladpad);
  max-width:78ch;
  font-family:var(--font-mono); font-size:.63rem; line-height:1.8;
  letter-spacing:.02em; color:var(--ink-mute);
}

/* ==========================================================================
   05 — SECTORS
   ========================================================================== */
.sectors{ background:var(--graphite); color:var(--text); }
.sectors__grid{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  border-top:1px solid rgba(245,243,238,.2);
}
.sectors__grid li{
  grid-column:span 3;
  display:flex; flex-direction:column; gap:.55rem;
  padding:clamp(.9rem,2vw,1.5rem) clamp(.7rem,1.4vw,1.1rem);
  border-bottom:1px solid rgba(245,243,238,.13);
  border-left:1px solid rgba(245,243,238,.13);
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1rem,1.5vw,1.35rem); line-height:1.15;
  min-width:0; overflow-wrap:anywhere;
}
.sectors__grid li:nth-child(n+5){ grid-column:span 4; }
.sectors__grid li:nth-child(1),
.sectors__grid li:nth-child(5){ border-left:0; }
.sector__n{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.2em;
  color:var(--amber);
}

/* ==========================================================================
   06 — WHY US, IN THEIR WORDS
   ========================================================================== */
.why{ background:var(--ink); color:var(--text); }
.why__grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.why__quote blockquote{ margin:1.3rem 0 0; }
.why__quote blockquote p{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.5rem,3.1vw,2.45rem); line-height:1.16; letter-spacing:-.02em;
}
.why__quote blockquote footer{ margin-top:1.1rem; }
.why__quote cite{
  font-style:normal; font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(245,243,238,.45);
}
.why__note{
  margin-top:1.7rem; max-width:48ch;
  font-size:.92rem; line-height:1.72; color:rgba(245,243,238,.62);
}
.why__note strong{ color:var(--amber); font-weight:500; }

.proof{ border-top:1px solid var(--line-dk); margin:0; }
.proof div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem;
  padding:.82rem 0; border-bottom:1px solid rgba(245,243,238,.11);
}
.proof dt{
  font-family:var(--font-mono); font-size:.54rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(245,243,238,.4); white-space:nowrap;
}
.proof dd{
  margin:0; text-align:right; font-size:.84rem; line-height:1.45;
  color:rgba(245,243,238,.86); max-width:27ch; overflow-wrap:anywhere;
}

/* ==========================================================================
   07 — CONTACT
   ========================================================================== */
.contact{ background:var(--amber); color:var(--ink); }
.contact :focus-visible{ outline-color:var(--ink); }
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(1.8rem,5vw,4rem); align-items:end;
}
.contact__h{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.3rem,6.4vw,5rem); line-height:.94; letter-spacing:-.035em;
  margin-top:1.1rem;
}
.contact__addr{ margin-top:1.5rem; font-size:.94rem; line-height:1.85; }
.contact__k{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(21,24,27,.6);
}
.contact__tel{
  display:block; margin-top:.5rem;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.45rem,3.6vw,2.6rem); line-height:1.1; letter-spacing:-.02em;
  padding-bottom:.14em;
  border-bottom:2px solid rgba(21,24,27,.32);
  transition:border-color .2s;
}
.contact__tel:hover{ border-color:var(--ink); }
.contact__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; margin-top:1.6rem; }
.btn--dark{ background:var(--ink); color:var(--paper); border-radius:var(--radius); }
.btn--dark:hover{ transform:translateY(-2px); filter:brightness(1.15); }
.contact__link{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:underline;
  text-underline-offset:4px; text-decoration-thickness:1px;
}

/* ==========================================================================
   08 — FOOTER
   ========================================================================== */
.foot{ border-top:0; background:var(--ink); }
.foot__logo{
  width:182px; height:auto; margin-bottom:1.5rem;
  /* the plate is a shadow, not padding — padding would distort the replaced element */
  background:var(--paper);
  box-shadow:0 0 0 10px var(--paper);
  border-radius:1px;
}
.foot__p{ max-width:34ch; font-size:.82rem; line-height:1.66; color:var(--muted); }
.foot__nav a{ overflow-wrap:anywhere; }
.foot__nav li{ font-size:.83rem; color:rgba(245,243,238,.6); }
.foot__soc{ display:flex; flex-wrap:wrap; gap:1.1rem; }
.foot__soc a{ transition:color .18s; }
.foot__soc a:hover{ color:var(--amber); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* the tight band between the desktop nav and the max width — keep it on one line */
@media (min-width:1024px) and (max-width:1199px){
  .brand img{ width:150px; }
  .nav__link{ font-size:.75rem; padding:.44rem .44rem; }
  .hdr__cta{ font-size:.7rem; padding:.55rem .8rem; margin-left:.3rem; }
}

@media (max-width:1179px){
  .nav__util{ display:none; }
}

@media (max-width:1023px){
  /* the mobile overlay is paper, not ink: the header is paper too */
  .nav{ background:var(--paper); color:var(--ink-text); }
  .nav__headlabel{ color:var(--ink-mute); }
  .nav__close{ border-color:var(--line); color:var(--ink); }
  .nav__item{ border-bottom-color:var(--line); }
  .nav__link{ color:var(--ink); }
  .nav__link:hover::after,
  .nav__item.is-open > .nav__link::after{ display:none; }
  .mega a{ color:rgba(21,24,27,.78); }
  .mega a:hover{ color:var(--ink); transform:none; }
  .mega__h{ color:var(--ink-mute); }
  .megap{ grid-template-columns:minmax(0,1fr); gap:.9rem; }
  .megap__col--note{
    border-left:0; padding-left:0;
    border-top:1px solid var(--line); padding-top:.9rem;
  }
  .megap__note{ color:var(--ink-mute); max-width:none; }
  .megap__all{ color:var(--ink); border-bottom:1px solid var(--amber); padding-bottom:.2rem; }
  .nav__foot{ color:var(--ink-mute); }
  .nav__foot a{ color:var(--ink); }
  .hdr__cta{ display:none; }

  .band__lbl{ display:none; }
  .band__note{ font-size:.55rem; letter-spacing:.06em; }
  .band--copy{ row-gap:.9rem; }

  .since__top{ grid-template-columns:minmax(0,1fr); align-items:start; gap:1.6rem; }
  .since__low{ grid-template-columns:minmax(0,1fr); }
  .why__grid{ grid-template-columns:minmax(0,1fr); }
  .contact__grid{ grid-template-columns:minmax(0,1fr); align-items:start; }
}

@media (max-width:860px){
  .floor{
    grid-template-columns:clamp(66px,16vw,120px) minmax(0,1fr);
    gap:1rem 1.2rem;
  }
  .floor__out{
    grid-column:2; border-left:0; padding-left:0;
    border-top:1px solid var(--line-dk); padding-top:.9rem;
    flex-direction:row; align-items:center; justify-content:space-between; gap:.9rem;
  }
  .floor__k{ white-space:nowrap; }
  .floor__v{ margin-top:0; flex:1 1 auto; }
  .floor__hatch{ width:56px; height:18px; flex-shrink:0; }

  .sectors__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sectors__grid li,
  .sectors__grid li:nth-child(n+5){ grid-column:span 1; }
  .sectors__grid li:nth-child(odd){ border-left:0; }

  .rung__rows{ grid-template-columns:minmax(0,1fr); gap:.7rem; }
}

@media (max-width:640px){
  body{ font-size:15.5px; }
  .brand img{ width:146px; }
  .hdr__in{ min-height:66px; }

  .sheet{ min-height:clamp(520px, calc(100svh - 130px), 660px); }
  .elev{ --railw:26px; }
  .band{ padding-inline:.9rem; }
  .band__code b{ font-size:1.05rem; }
  .band__note{ font-size:.52rem; letter-spacing:.04em; }
  .band--2 .gate{ width:26px; }
  .hero__trust{ gap:.4rem .9rem; font-size:.55rem; letter-spacing:.1em; }
  .hero__acts .btn{ padding:.78rem 1.1rem; font-size:.82rem; }

  .facts{ grid-template-columns:minmax(0,1fr); }
  .fact:nth-child(odd){ padding-right:0; }
  .badges{ gap:1.2rem; padding:1.3rem 0 .5rem; }
  .badges img:first-child{ height:50px; }
  .badges img:last-child{ height:54px; }

  .proof div{
    flex-direction:column; align-items:flex-start; gap:.28rem;
    padding:.9rem 0;
  }
  .proof dd{ text-align:left; max-width:none; }

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

  .contact__h{ font-size:clamp(2.4rem,12vw,3.4rem); }
  .contact__tel{ font-size:1.4rem; }

  .foot__logo{ width:158px; }
  .foot__bottom{ flex-direction:column; gap:.8rem; }
}

@media (max-width:430px){
  .band__note{ font-size:.5rem; }
  .band--2{ padding-block:1.3rem 1.5rem; }
  .hero__kick{ font-size:.55rem; letter-spacing:.16em; }
  .hero__acts{ flex-direction:column; align-items:stretch; }
  .hero__acts .btn{ justify-content:center; }
}