/* ============================================================
   Nutriceptics Poland — Direction B: "Elevation Index"
   The data-forward, instrument-like treatment. Builds on
   foundations.css tokens and main.css shared chrome.
   ============================================================ */

.heroB { background: var(--bg); padding: clamp(28px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); }
.plate {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background:
    linear-gradient(var(--line-faint) 1px, transparent 1px) 0 0 / 100% 64px,
    var(--bg);
  overflow: hidden;
}
/* crop-mark corners */
.plate::before, .plate::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border-color: var(--fg-3);
}
.plate::before { top: 10px; left: 10px; border-left: 1.5px solid var(--fg-3); border-top: 1.5px solid var(--fg-3); }
.plate::after  { top: 10px; right: 10px; border-right: 1.5px solid var(--fg-3); border-top: 1.5px solid var(--fg-3); }

.plate__meta {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px clamp(22px, 4vw, 40px) 0;
  font: 500 var(--fs-eyebrow)/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
}
.plate__meta .l { color: var(--red); display: inline-flex; gap: 10px; align-items: center; }
.plate__meta .r { color: var(--fg-3); }
.plate__meta .tick { width: 20px; height: 1.5px; background: currentColor; }

.plate__body { padding: clamp(30px, 5vw, 54px) clamp(22px, 4vw, 40px) 0; }
.heroB h1 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(2.4rem, 5.6vw, 4.7rem);
  line-height: 1.03; letter-spacing: var(--tracking-display);
  color: var(--ink); margin: 0; max-width: 17ch; text-wrap: balance;
}
.heroB h1 em { font-style: normal; color: var(--red); }
.heroB__sub { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 34px 0 6px; }
.heroB__contact {
  font: 600 15px/1 var(--font-sans); color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  border-bottom: 1.5px solid var(--red); padding-bottom: 2px;
}
.heroB__contact .arrow { color: var(--red); transition: transform var(--dur) var(--ease); }
.heroB__contact:hover .arrow { transform: translateX(4px); }
.heroB__readout { font: 400 var(--fs-caption)/1.5 var(--font-mono); color: var(--fg-3); letter-spacing: .04em; }
.heroB__readout b { color: var(--ink); font-weight: 500; }

/* elevation chart */
.chart { position: relative; margin-top: clamp(26px, 4vw, 40px); height: clamp(150px, 22vw, 230px); }
.chart__axis {
  position: absolute; left: clamp(22px,4vw,40px); right: clamp(22px,4vw,40px); bottom: 0;
  display: flex; justify-content: space-between;
  border-top: 1px solid var(--line-strong);
  padding-top: 8px;
}
.chart__axis span { font: 400 11px/1 var(--font-mono); letter-spacing: .12em; color: var(--fg-3); }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__scan { stroke: var(--red); stroke-width: 1.2; opacity: 0; }

/* what we do — instrument register */
.whatB { border-top: 1px solid var(--line); }
.whatB__grid { display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.whatB__rail { font: 400 var(--fs-caption)/1.7 var(--font-mono); color: var(--fg-3); letter-spacing: .04em; }
.whatB__rail .num { color: var(--red); }
.whatB__lead { font: 400 clamp(1.5rem, 3vw, 2.3rem)/1.32 var(--font-sans); letter-spacing: -.01em; color: var(--ink); margin: 0; max-width: 20ch; text-wrap: balance; }
.whatB__body { font: 400 var(--fs-body-lg)/var(--lh-body) var(--font-sans); color: var(--fg-2); max-width: 40ch; margin: 22px 0 0; text-wrap: pretty; }
@media (max-width: 820px){ .whatB__grid { grid-template-columns: 1fr; gap: 18px; } }

.pillarsB__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font: 500 var(--fs-eyebrow)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 30px;
}
.pillarsB__head .red { color: var(--red); }

@media (max-width: 720px){
  .plate__meta .r { display: none; }
  .heroB h1 { max-width: 100%; }
}

/* ---- contour fields (mid/lower section motion) ---- */
body { overflow-x: clip; }
.cfield--right {
  top: -14%; right: -14%; width: min(60vw, 640px); height: 128%; opacity: .72;
  -webkit-mask-image: radial-gradient(120% 86% at 80% 46%, #000 46%, transparent 84%);
          mask-image: radial-gradient(120% 86% at 80% 46%, #000 46%, transparent 84%);
}
.cfield--left {
  top: -22%; left: -16%; width: min(54vw, 600px); height: 132%; opacity: .6;
  -webkit-mask-image: radial-gradient(110% 86% at 16% 52%, #000 44%, transparent 82%);
          mask-image: radial-gradient(110% 86% at 16% 52%, #000 44%, transparent 82%);
}
.cfield--center {
  top: -55%; left: 50%; transform: translateX(-50%); width: min(118vw, 1180px); height: 210%; opacity: .5;
  -webkit-mask-image: radial-gradient(64% 60% at 50% 50%, #000 38%, transparent 80%);
          mask-image: radial-gradient(64% 60% at 50% 50%, #000 38%, transparent 80%);
}
@media (max-width: 760px){
  .cfield--desk { display: none; }
  .cfield--right { right: -38%; width: 150vw; opacity: .5; }
  .cfield--center { width: 178vw; opacity: .42; }
}

/* ---- footer red accent (scoped) ---- */
.footer__topo--red { filter: none; opacity: .2; height: 82%; }
.footer__contact a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* ============================================================
   ACCESSIBILITY — WCAG 2.2 AA contrast (1.4.3)
   Brand red #C51426 measures ~6.0:1 on white and passes AA at
   every size, so it is left exactly as designed. Only muted
   NEUTRAL text that conveys information is darkened to clear
   4.5:1 (small) / 3:1 (large). Purely decorative aria-hidden
   readouts (coordinates, chart axis, "Three / three", the
   teaser readout, arrows) are intentionally left faint — they
   are exempt from 1.4.3 and define the instrument aesthetic.
   ============================================================ */
:root { --fg-3-aa: #6E737B; }   /* ~4.7:1 on white (was #868B93 ≈ 3.4:1) */

/* meaningful small mono labels on white */
.heroB__sub .heroB__readout,           /* "Privately held · founded 2021 · …" */
.pillarsB__head,                       /* "§ 02   Principles" */
.pillar__num,                          /* 01 / 02 / 03 */
.teaser__label { color: var(--fg-3-aa); }   /* "§ 03 — The portfolio" */

/* keep the decorative aria-hidden bits faint as designed */
.pillarsB__head [aria-hidden="true"] { color: var(--fg-3); }   /* "Three / three" */

/* faint teaser display text → use --fg-3 (#868B93 ≈ 3.43:1, large text ≥ 3:1) */
.teaser__head { color: var(--fg-3); }

/* footer text on ink (#15171A) — lift alpha to clear AA */
.legal__k { color: rgba(255,255,255,.62); }      /* labels: was .38 ≈ 3.6:1 */
.footer__base span { color: rgba(255,255,255,.6); } /* © line + tagline: was .4 ≈ 3.8:1 */