/* ============================================================================
   Kaufman Rossin × EVI Industries — EVI-01 "Machine Plate" theme.

   WHY THIS AND NOT KR'S PALETTE
   The first pass wore Kaufman Rossin's corporate blue and green. It was
   competent and it had no point of view, because it borrowed a brand instead
   of building a world. RealReal works because it commits to Swiss editorial —
   the client's own language. Atlantis works because it commits to a luminous
   deep-ocean world. Neither is a recolour.

   EVI's own website could not be borrowed the way RealReal's could: it is
   deep navy, a geometric sans and five grey icons. Faithfully echoing it would
   land back on bland. So this theme is drawn from EVI's MATERIAL world instead
   — commercial and industrial laundry. Tunnel washers, stainless drums,
   boilers, steam, sealed concrete, and thirty acquired family businesses across
   nineteen states, each keeping its own name.

   THE LANGUAGE
   • Ground        graphite and steel, the colour of machine bodies.
   • Structure     EVI's own deep navy, kept so the theme stays theirs.
   • Surface       warm "enamel" off-white for reading.
   • Accent        safety amber, used the way it is used on real equipment —
                   sparingly, only on the thing that matters. Replaces KR green.
   • Motif         THE SPEC PLATE. Every industrial machine carries a riveted
                   data plate: model, capacity, rating. It is the perfect motif
                   for a document whose entire job is to present figures. Section
                   heads, option cards and the fork readout are all plates, with
                   corner rivets drawn in CSS.
   • Type          Barlow Condensed for display (the register of stencilled
                   equipment labelling), Barlow for reading, IBM Plex Mono for
                   every figure. Width and weight carry the contrast — no
                   novelty faces. Professional and legible at ten feet on a TV.
   • Rules         2px on major boundaries, 1px inside. Heavier than hairlines:
                   this is fabricated, not filigree.

   The argument the design serves: an industrial operator being priced like a
   financial institution. Visual effort concentrates in the two places that
   carry it — the threshold scale in §03 and the fork in §04.
============================================================================ */

:root {
  /* Machine bodies */
  --graphite: #171b1f;
  --graphite-2: #1f262c;
  --steel: #2c353d;
  --steel-2: #3d4952;
  --steel-3: #55636d;

  /* EVI's deep navy — their brand colour, kept as the structural blue */
  --navy: #12283f;
  --navy-lift: #1d4266;

  /* Enamel — the reading surface */
  --enamel: #f6f4f0;
  --enamel-2: #ebe7e0;
  --enamel-3: #dbd5ca;

  /* Safety amber — the single accent */
  --amber: #e8a326;
  --amber-deep: #8f5e05;   /* ~5.0:1 on --enamel; #a86f06 measured 3.87:1 and failed AA */
  --amber-glow: rgba(232, 163, 38, .18);

  /* Ink */
  --ink: #14181c;
  --ink-2: #48525b;
  --ink-3: #6f7982;
  --on-dark: #eceae5;
  --on-dark-2: rgba(236, 234, 229, .68);
  --on-dark-3: rgba(236, 234, 229, .40);

  /* Structure */
  --rule: rgba(20, 24, 28, .16);
  --rule-2: rgba(20, 24, 28, .34);
  --rule-hard: #14181c;
  --rule-dark: rgba(236, 234, 229, .16);
  --rule-dark-2: rgba(236, 234, 229, .30);

  --danger: #a8452f;

  /* Corner-rivet colour for the spec-plate motif (see THE SPEC PLATE). */
  --rivet: rgba(85, 99, 109, .55);

  /* Type */
  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* Rhythm */
  --gut: clamp(20px, 5vw, 60px);
  --wide: 1240px;
  --measure: 68ch;

  --fast: 130ms;
  --base: 280ms;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--enamel);
}

#doc[aria-hidden="true"] { display: none; }

/* Figures are always mono and tabular, so a number never reflows as the fork
   changes it and columns line up down the page. */
.num, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gut); }
.measure { max-width: var(--measure); }

a { color: var(--navy-lift); text-decoration: none; border-bottom: 1px solid rgba(29, 66, 102, .4); }
a:hover { border-bottom-color: var(--navy-lift); }
strong { font-weight: 600; }
::selection { background: var(--amber); color: var(--graphite); }

:focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 3px; }

/* Brushed-steel wash for dark surfaces. Very low contrast on purpose: it should
   read as a material, not a pattern. */
.brushed {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 42%);
}

/* ============================================================================
   THE SPEC PLATE — the motif. A bordered field with four corner rivets.
============================================================================ */

/* Four corner rivets, drawn as radial gradients inset from the panel edge. No
   markup knows about them: the rule is attached directly to the panels that
   should read as plates, so the motif is a property of the design system rather
   than something an author has to remember to add.

   `inset` positions the gradient box 7px inside the border, which is where a
   rivet actually sits on a real data plate. */
.scale-card,
.curve-card,
.opt,
.facts,
.thin { position: relative; }

.scale-card::after,
.curve-card::after,
.opt::after,
.facts::after {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  background:
    radial-gradient(circle 2.5px at 0 0,       var(--rivet) 97%, transparent 100%),
    radial-gradient(circle 2.5px at 100% 0,    var(--rivet) 97%, transparent 100%),
    radial-gradient(circle 2.5px at 0 100%,    var(--rivet) 97%, transparent 100%),
    radial-gradient(circle 2.5px at 100% 100%, var(--rivet) 97%, transparent 100%);
  background-repeat: no-repeat;
}


/* ============================================================================
   Masthead
============================================================================ */

.masthead {
  background: var(--graphite);
  color: var(--on-dark);
  padding: 18px 0;
  border-bottom: 2px solid var(--amber);
}
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }

/* Co-brand lockup, KR first: KAUFMAN ROSSIN × EVI INDUSTRIES. No bar, no
   Risk Advisory sub-line. The amber times is the only accent. */
.lockup { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.lockup .krname,
.lockup .co {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  letter-spacing: .11em; text-transform: uppercase; line-height: 1;
  color: var(--on-dark);
}
.lockup .x {
  font-family: var(--body); font-weight: 300; font-size: 19px; line-height: 1;
  color: var(--amber); transform: translateY(-1px);
}
.mast-meta {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.85;
  color: var(--on-dark-2); text-align: right; letter-spacing: .02em;
}
.mast-meta b { color: var(--on-dark); font-weight: 500; }

/* ============================================================================
   Section rail
============================================================================ */

#sectionNav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 244, 240, .95);
  backdrop-filter: saturate(150%) blur(9px);
  border-bottom: 2px solid var(--rule-hard);
}
.nav-inner {
  max-width: var(--wide); margin: 0 auto; padding: 0 var(--gut);
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }
.nav-inner a {
  flex: none; border: 0; border-bottom: 3px solid transparent;
  padding: 13px 15px 10px; color: var(--ink-3);
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  transition: color var(--fast) ease, border-color var(--fast) ease;
}
.nav-inner a .n { font-family: var(--mono); font-weight: 400; font-size: 10px; opacity: .6; margin-right: 8px; }
.nav-inner a:hover { color: var(--ink); }
.nav-inner a.on { color: var(--ink); border-bottom-color: var(--amber); }

/* ============================================================================
   Hero — full-bleed plant interior, directional scrim, rating strip.
   The photograph is the single biggest lift from flat to atmospheric. Layered
   as backgrounds so that if the image is missing the gradient still paints and
   the hero simply reads as dark steel rather than breaking.
============================================================================ */

.hero {
  position: relative;
  background-color: var(--graphite);
  background-image:
    linear-gradient(96deg, rgba(15,18,21,.95) 0%, rgba(15,18,21,.90) 30%, rgba(15,18,21,.72) 56%, rgba(15,18,21,.34) 82%, rgba(15,18,21,.20) 100%),
    linear-gradient(0deg, rgba(15,18,21,.94) 0%, rgba(15,18,21,.12) 48%),
    url('img/hero-plant.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, 62% center;
  background-repeat: no-repeat;
  color: var(--on-dark);
  border-bottom: 2px solid var(--amber);
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 2; padding-top: clamp(54px, 10vw, 118px); padding-bottom: 0; }

.hero .eyebrow { color: var(--amber); }

.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.5rem, 1rem + 6.4vw, 5.6rem);
  line-height: .94; letter-spacing: -.01em; text-transform: uppercase;
  margin: 18px 0 0; max-width: 26ch; text-wrap: balance;
}
.hero h1 em {
  font-style: normal; color: var(--amber);
  /* A hairline under the phrase that carries the whole argument. */
  box-shadow: inset 0 -3px 0 var(--amber-deep);
}
.hero .lede {
  font-weight: 300; font-size: clamp(16.5px, 1.9vw, 21px); line-height: 1.55;
  color: var(--on-dark-2); max-width: 60ch; margin-top: 24px;
}

/* Rating strip — a machine's capacity plate, run full width at the hero foot. */
.hero-meta {
  display: flex; flex-wrap: wrap; margin: clamp(34px, 6vw, 62px) 0 0;
  border-top: 2px solid var(--amber);
  background: rgba(10, 13, 15, .62);
  backdrop-filter: blur(3px);
}
.hero-meta div {
  flex: 1 1 168px; padding: 17px 22px; border-right: 1px solid var(--rule-dark);
}
.hero-meta div:last-child { border-right: 0; }
.hero-meta dt {
  font-family: var(--display); font-weight: 600; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3);
}
.hero-meta dd {
  font-family: var(--mono); font-weight: 500; font-size: 14.5px; color: var(--on-dark);
  margin-top: 8px; font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--amber-deep);
}


/* ============================================================================
   Full-bleed band. A breathing moment between the disproportion argument and
   the fork, carrying one line. The drum detail earns its place because the
   single amber indicator lamp in it is the design thesis in a photograph: an
   industrial machine, and one lit thing that matters.
============================================================================ */

.band {
  position: relative;
  min-height: clamp(300px, 42vw, 480px);
  display: flex; align-items: flex-end;
  background-color: var(--graphite);
  background-image:
    linear-gradient(90deg, rgba(12,15,18,.90) 0%, rgba(12,15,18,.62) 45%, rgba(12,15,18,.30) 100%),
    url('img/detail-drum.jpg');
  background-size: cover, cover;
  background-position: center, 58% center;
  background-repeat: no-repeat;
  border-top: 2px solid var(--amber);
  overflow: hidden;
}
.band .wrap { width: 100%; padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(40px, 6vw, 76px); }
.band .eyebrow { color: var(--amber); }
.band p {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, .9rem + 2.4vw, 2.9rem); line-height: 1.06;
  text-transform: uppercase; letter-spacing: -.004em;
  color: var(--on-dark); max-width: 30ch; margin-top: 16px; text-wrap: balance;
}
.band p em { font-style: normal; color: var(--amber); }
.band .src { font-family: var(--mono); font-size: 11.5px; color: var(--on-dark-3); margin-top: 20px; }

/* ============================================================================
   Sections
============================================================================ */

section.sec { padding: clamp(54px, 8vw, 100px) 0; border-top: 1px solid var(--rule); }
section.sec:first-of-type { border-top: 0; }
section.sec.tint { background: var(--enamel-2); }

/* Section head as a spec plate: the number sits in a stamped box. */
.sec-head { margin-bottom: clamp(28px, 4vw, 44px); }
.sec-num {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  color: var(--ink); background: var(--enamel-3);
  border: 2px solid var(--rule-hard); padding: 4px 11px 3px;
  letter-spacing: .06em; margin-bottom: 18px;
}
.sec-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.85rem, 1rem + 3.4vw, 3.4rem); line-height: 1.02;
  letter-spacing: -.005em; text-transform: uppercase; color: var(--ink);
  max-width: 30ch; text-wrap: balance;
}
.sec-lede {
  font-weight: 300; font-size: clamp(17px, 1.7vw, 20.5px); line-height: 1.55;
  color: var(--ink-2); max-width: 64ch; margin-top: 18px;
}

.body-copy > * + * { margin-top: 18px; }
.body-copy p { max-width: var(--measure); }
.body-copy ul { max-width: var(--measure); }

/* Pull quote — a stencil bar, not a decorative flourish. */
.pull {
  font-family: var(--body); font-weight: 500;
  font-size: clamp(1.15rem, .95rem + .9vw, 1.55rem); line-height: 1.38;
  letter-spacing: -.005em;
  color: var(--ink); max-width: 46ch;
  padding: 6px 0 6px 24px; border-left: 5px solid var(--amber); margin: 36px 0;
}
/* The opening clause of a pull quote, set in the display face, so the eye still
   gets a hard entry point without the whole sentence shouting. */
.pull .q {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; color: var(--ink);
}

/* ============================================================================
   Fact strip — rating plates
============================================================================ */

.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 0; margin-top: 36px; border: 2px solid var(--rule-hard); background: #fff;
}
section.tint .facts { background: var(--enamel); }
.fact { padding: 20px 22px 22px; border-right: 1px solid var(--rule); }
.fact:last-child { border-right: 0; }
.fact .v {
  font-family: var(--mono); font-weight: 500; font-size: clamp(21px, 2.4vw, 30px);
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.fact .k {
  font-family: var(--display); font-weight: 600; font-size: 11.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 10px;
}
.fact .note { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; max-width: 30ch; line-height: 1.45; }
.fact.hi { background: var(--amber-glow); }
.fact.hi .v { color: var(--amber-deep); }

/* ============================================================================
   §03 — threshold scale and capacity bars. Real design effort lands here.
============================================================================ */

.scale-card { padding: clamp(24px, 3.6vw, 40px); margin-top: 36px; border: 2px solid var(--rule-hard); background: #fff; }
section.tint .scale-card { background: var(--enamel); }
.scale-card h3 {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.scale-card .cap { font-size: 14.5px; color: var(--ink-2); margin-top: 9px; max-width: 62ch; line-height: 1.5; }

.scale { margin: 40px 0 8px; position: relative; }
.scale-track { position: relative; height: 10px; background: var(--enamel-3); border: 1px solid var(--rule-2); }
.scale-fill {
  position: absolute; inset: 1px auto 1px 1px; width: 0;
  background: repeating-linear-gradient(135deg, var(--amber) 0 6px, var(--amber-deep) 6px 12px);
  transition: width var(--base) ease;
}
.scale-mark { position: absolute; top: 0; transform: translateX(-50%); }
.scale-mark .tick { width: 2px; height: 18px; background: var(--rule-2); margin: 0 auto; }
.scale-mark .lab {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  white-space: nowrap; margin-top: 8px; text-align: center; line-height: 1.5;
}
.scale-mark .lab b { display: block; color: var(--ink-2); font-weight: 500; font-size: 12px; }
.scale-mark.now .tick { height: 30px; width: 4px; background: var(--amber-deep); }
.scale-mark.now .lab, .scale-mark.now .lab b { color: var(--ink); }
.scale-mark.prop .tick { background: var(--navy); height: 24px; width: 3px; }
.scale-mark.prop .lab b { color: var(--navy); }

.scale-legend {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 74px;
  padding-top: 20px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-2);
}
.scale-legend span { display: flex; align-items: center; gap: 10px; }
.scale-legend i { width: 12px; height: 12px; flex: none; border: 1px solid var(--rule-2); }
.scale-legend i.g { background: var(--amber); border-color: var(--amber-deep); }
.scale-legend i.b { background: var(--navy); }
.scale-legend i.n { background: var(--enamel-3); }

/* Capacity bars — revenue against float, read like a machine load gauge. */
.vs { display: grid; gap: 14px; margin-top: 32px; }
.vs-row { display: grid; grid-template-columns: minmax(104px, 136px) 1fr; gap: 18px; align-items: center; }
.vs-row .lb {
  font-family: var(--display); font-weight: 600; font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.vs-bar { position: relative; height: 36px; background: var(--enamel-3); border: 2px solid var(--rule-hard); }
.vs-bar > i { position: absolute; inset: 0 auto 0 0; display: block; }
.vs-bar.rev > i { background: var(--steel); }
.vs-bar.flt > i { background: repeating-linear-gradient(135deg, var(--amber) 0 7px, var(--amber-deep) 7px 14px); }
.vs-bar .val {
  position: absolute; top: 50%; transform: translateY(-50%); left: 13px;
  font-family: var(--mono); font-size: 14px; font-weight: 500; color: #fff;
  font-variant-numeric: tabular-nums;
}
.vs-bar.flt .val { color: var(--graphite); }

/* ============================================================================
   §04 — the fork. Machine-room dark, with a gauge cluster readout.
============================================================================ */

.fork {
  background-color: var(--graphite);
  background-image:
    linear-gradient(180deg, rgba(18,40,63,.55), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.013) 0 2px, transparent 2px 5px);
  color: var(--on-dark);
  padding: clamp(54px, 8vw, 100px) 0;
  border-top: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber);
}
.fork .sec-num { color: var(--on-dark); background: rgba(255,255,255,.06); border-color: var(--rule-dark-2); }
.fork .sec-title { color: var(--on-dark); }
.fork .sec-lede { color: var(--on-dark-2); }
.fork .eyebrow { color: var(--amber); }

/* Selector switches. Reads like a three-position machine selector: the live
   position is lit amber and physically raised. */
.switch {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
  gap: 0; margin-top: 10px; border: 2px solid var(--rule-dark-2);
}
.switch button {
  appearance: none; background: rgba(255,255,255,.03); border: 0;
  border-right: 1px solid var(--rule-dark); border-top: 4px solid transparent;
  cursor: pointer; text-align: left; padding: 22px 24px; color: var(--on-dark-2);
  font-family: inherit; font-size: 15.5px; line-height: 1.45;
  transition: background var(--fast) ease, color var(--fast) ease;
}
.switch button:last-child { border-right: 0; }
.switch button:hover { background: rgba(255,255,255,.07); color: var(--on-dark); }
.switch button .sw-k {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: 10px;
}
.switch button .sw-t {
  display: block; font-family: var(--display); font-weight: 700; font-size: 21px;
  line-height: 1.08; text-transform: uppercase; letter-spacing: .01em;
  color: var(--on-dark); margin-bottom: 8px;
}
.switch button .sw-d { display: block; font-size: 14px; color: var(--on-dark-3); line-height: 1.45; }
.switch button[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(232,163,38,.16), rgba(255,255,255,.03) 60%);
  border-top-color: var(--amber); color: var(--on-dark);
}
.switch button[aria-pressed="true"] .sw-k { color: var(--amber); }
.switch button[aria-pressed="true"] .sw-d { color: var(--on-dark-2); }

/* Gauge cluster. Four dials in one housing. */
.readout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
  gap: 0; border: 2px solid var(--rule-dark-2); border-top: 0;
  background: rgba(0,0,0,.28);
}
.ro { padding: 22px 24px; border-right: 1px solid var(--rule-dark); }
.ro:last-child { border-right: 0; }
.ro dt {
  font-family: var(--display); font-weight: 600; font-size: 11.5px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--on-dark-3);
}
.ro dd {
  font-family: var(--mono); font-weight: 500; font-size: clamp(16px, 1.9vw, 21px);
  color: var(--on-dark); margin-top: 12px; line-height: 1.16;
  font-variant-numeric: tabular-nums;
}
.ro dd small {
  display: block; font-family: var(--body); font-size: 13px; font-weight: 400;
  color: var(--on-dark-3); margin-top: 9px; letter-spacing: 0; line-height: 1.45;
}
/* The one dial that matters is lit. */
.ro.key { background: rgba(232,163,38,.10); box-shadow: inset 0 3px 0 var(--amber); }
.ro.key dd { color: var(--amber); }

.fork-note {
  margin-top: 28px; font-size: 14.5px; color: var(--on-dark-3); line-height: 1.55;
  max-width: 76ch; padding-left: 18px; border-left: 2px solid var(--rule-dark-2);
}

/* ============================================================================
   §05 — options as spec plates
============================================================================ */

.opts { display: grid; gap: 20px; margin-top: 36px; }
.opt {
  border: 2px solid var(--rule-hard); background: #fff;
  padding: clamp(22px, 3vw, 32px);
  display: grid; grid-template-columns: 1fr minmax(216px, 280px); gap: clamp(22px, 3vw, 40px);
  transition: box-shadow var(--fast) ease, transform var(--fast) ease;
}
section.tint .opt { background: var(--enamel); }
.opt:hover { box-shadow: 6px 6px 0 var(--steel); transform: translate(-1px, -1px); }
/* The rivets pick up the accent too, so a selected plate reads as one
   deliberate object rather than a card with a coloured shadow. */
.opt.chosen { box-shadow: 6px 6px 0 var(--amber-deep); background: #fff; --rivet: var(--amber-deep); }

.opt-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.opt-tag b {
  font-weight: 500; color: var(--on-dark); background: var(--graphite);
  padding: 4px 9px 3px; letter-spacing: .06em; font-size: 12px;
}
.opt.chosen .opt-tag b { background: var(--amber-deep); }
.opt h3 {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem);
  line-height: 1.1; text-transform: uppercase; letter-spacing: -.002em;
  color: var(--ink); margin: 14px 0 0; max-width: 32ch;
}
.opt .what { font-size: 15.5px; color: var(--ink-2); margin-top: 13px; max-width: 58ch; line-height: 1.55; }
.opt .pc { display: grid; gap: 9px; margin-top: 20px; }
.opt .pc div { font-size: 14.5px; display: grid; grid-template-columns: 62px 1fr; gap: 13px; align-items: start; }
.opt .pc dt {
  font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; padding-top: 3px;
}
.opt .pc .p dt { color: var(--amber-deep); }
.opt .pc .c dt { color: var(--danger); }
.opt .pc dd { color: var(--ink-2); line-height: 1.5; }

.opt-side { border-left: 2px solid var(--rule); padding-left: clamp(20px, 2.6vw, 30px); }
.opt-fee .k, .burden .k, .spark .k {
  font-family: var(--display); font-weight: 600; font-size: 11.5px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3);
}
.opt-fee .v {
  font-family: var(--mono); font-weight: 500; font-size: clamp(19px, 2.2vw, 26px);
  color: var(--ink); margin-top: 10px; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.opt-fee .v.tbc { font-size: 15px; color: var(--ink-3); font-family: var(--body); font-style: italic; }
.opt-fee .yr { font-size: 13px; color: var(--ink-3); margin-top: 8px; }

.draft-chip {
  display: inline-block; font-family: var(--display); font-weight: 700; font-size: 10px;
  letter-spacing: .13em; text-transform: uppercase;
  background: var(--amber); color: var(--graphite); padding: 2px 7px; margin-left: 9px; vertical-align: 3px;
}

/* Load gauge — five segments, filled like a machine's load indicator. */
.burden { margin-top: 24px; }
.burden-meter { display: flex; gap: 3px; margin-top: 10px; }
.burden-meter i { height: 12px; flex: 1; background: var(--enamel-3); border: 1px solid var(--rule-2); }
.burden-meter i.on { background: var(--steel); border-color: var(--graphite); }
.burden .lv { font-size: 13px; color: var(--ink-2); margin-top: 9px; line-height: 1.45; }

.spark { margin-top: 22px; }
.spark svg { display: block; width: 100%; height: auto; overflow: visible; }
.spark .k { margin-bottom: 10px; }

.pick {
  appearance: none; width: 100%; margin-top: 24px; cursor: pointer;
  background: transparent; border: 2px solid var(--rule-hard); color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .13em; text-transform: uppercase; padding: 13px 16px;
  transition: background var(--fast) ease, color var(--fast) ease;
}
.pick:hover { background: var(--graphite); color: var(--on-dark); border-color: var(--graphite); }
.opt.chosen .pick { background: var(--amber); border-color: var(--amber-deep); color: var(--graphite); }

.curve-card { border: 2px solid var(--rule-hard); background: #fff; padding: clamp(22px, 3vw, 36px); margin-top: 28px; }
section.tint .curve-card { background: var(--enamel); }
.curve-card h3 {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.curve-card .cap { font-size: 14.5px; color: var(--ink-2); margin-top: 9px; max-width: 64ch; line-height: 1.5; }
.curve-wrap { margin-top: 28px; }
.curve-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.curve-empty {
  font-size: 15px; color: var(--ink-3); margin-top: 26px; padding: 26px;
  border: 2px dashed var(--rule-2); text-align: center; font-style: italic;
}

/* ============================================================================
   Provisional marker. Says only "Draft": this stylesheet is served to clients,
   so the badge text must be safe to render in front of one. Any explanation of
   what needs confirming belongs in the operator body.
============================================================================ */

.prov::after {
  content: "Draft";
  display: inline-block; font-family: var(--display); font-weight: 700; font-size: 10px;
  letter-spacing: .13em; text-transform: uppercase;
  background: var(--amber); color: var(--graphite);
  padding: 2px 8px; margin-left: 11px; vertical-align: 3px; white-space: nowrap;
}
.thin { border: 2px dashed var(--rule-2); background: var(--amber-glow); padding: clamp(20px, 2.8vw, 28px); margin-top: 28px; }
.thin h3 {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--amber-deep);
}
.thin p, .thin li { font-size: 15px; color: var(--ink-2); }
.thin p { margin-top: 11px; max-width: 68ch; }
.thin ul { margin: 13px 0 0 21px; }
.thin li { margin-top: 7px; }

/* ============================================================================
   Closing + footer
============================================================================ */

.closing {
  background-color: var(--navy);
  background-image: linear-gradient(180deg, rgba(0,0,0,.30), transparent 60%);
  color: var(--on-dark);
  padding: clamp(54px, 8vw, 100px) 0;
  border-top: 2px solid var(--amber);
}
.closing .eyebrow { color: var(--amber); }
.closing h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 1rem + 4vw, 3.8rem);
  line-height: 1; text-transform: uppercase; letter-spacing: -.005em;
  margin: 18px 0 0; max-width: 26ch;
}
.closing p { color: var(--on-dark-2); font-weight: 300; font-size: clamp(16.5px, 1.7vw, 19.5px); max-width: 62ch; margin-top: 22px; }
.closing .chosen-line {
  font-family: var(--mono); font-size: 14px; color: var(--amber);
  margin-top: 30px; padding: 17px 19px; border: 2px solid rgba(232,163,38,.4); background: rgba(0,0,0,.28);
}
.cta {
  appearance: none; margin-top: 30px; cursor: pointer;
  background: var(--amber); border: 2px solid var(--amber); color: var(--graphite);
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: .13em; text-transform: uppercase; padding: 17px 34px;
  transition: filter var(--fast) ease;
}
.cta:hover { filter: brightness(1.09); }
.cta:disabled { background: transparent; color: var(--on-dark-3); border-color: var(--rule-dark-2); cursor: not-allowed; }

.foot { background: var(--graphite); border-top: 1px solid var(--rule-dark); padding: 26px 0 42px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: baseline; }
.foot p { font-size: 13px; color: var(--on-dark-3); }
.foot .tag {
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3);
}

/* ============================================================================
   Presenter bar + operator layer
============================================================================ */

#presenterBar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--navy); color: #fff; border-top: 3px solid var(--amber);
  box-shadow: 0 -6px 26px rgba(0,0,0,.3);
}
#presenterBar.live { background: #7c2d1c; border-top-color: var(--amber); }
.pb-inner {
  max-width: var(--wide); margin: 0 auto; padding: 10px var(--gut);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.pb-state {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
}
.pb-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
#presenterBar button {
  appearance: none; cursor: pointer; background: #fff; color: var(--navy);
  border: 2px solid #fff; font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: .11em; text-transform: uppercase; padding: 7px 14px;
}
#presenterBar button.pb-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
#presenterBar button:hover { filter: brightness(.93); }
.pb-hint { font-family: var(--mono); font-size: 10.5px; opacity: .72; }
body.has-pb { padding-bottom: 64px; }

#operatorRoot {
  border-top: 4px solid var(--amber); background: #14110b; color: #f0e9d8;
  padding: clamp(42px, 6vw, 78px) 0;
}
#operatorRoot .wrap > .eyebrow { color: var(--amber); }
#operatorRoot h2 {
  font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 1rem + 2.6vw, 2.6rem);
  text-transform: uppercase; letter-spacing: -.004em; margin: 14px 0 0; color: #fff;
}
#operatorRoot > .wrap > p { color: rgba(240,233,216,.68); max-width: 68ch; margin-top: 15px; }
.op-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(304px, 1fr)); gap: 18px; margin-top: 36px; }
.op-card { border: 2px solid rgba(240,233,216,.2); background: #1d1810; padding: 22px 24px; }
.op-card h3 {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--amber);
}
.op-card p, .op-card li { font-size: 15px; color: rgba(240,233,216,.84); line-height: 1.55; }
.op-card p { margin-top: 12px; }
.op-card ul { margin: 13px 0 0 20px; }
.op-card li { margin-top: 9px; }
.op-card .q { color: #fff; font-weight: 500; }
.op-card.danger { border-color: #b8452f; background: #241109; }
.op-card.danger h3 { color: #ff9d80; }
.op-run { display: grid; gap: 2px; margin-top: 28px; }
.op-run-row {
  display: grid; grid-template-columns: minmax(92px, 112px) 1fr; gap: 20px;
  background: #1d1810; border: 1px solid rgba(240,233,216,.16); padding: 16px 21px;
}
.op-run-row .t { font-family: var(--mono); font-size: 13px; color: var(--amber); }
.op-run-row h4 { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.op-run-row p { font-size: 14.5px; color: rgba(240,233,216,.8); margin-top: 8px; line-height: 1.55; }

/* ============================================================================
   Responsive
============================================================================ */

@media (max-width: 900px) {
  .opt { grid-template-columns: 1fr; }
  .opt-side { border-left: 0; border-top: 2px solid var(--rule); padding-left: 0; padding-top: 24px; }
  .op-run-row { grid-template-columns: 1fr; gap: 7px; }
  .hero-meta div { border-right: 0; border-bottom: 1px solid var(--rule-dark); flex-basis: 100%; }
  .mast-meta { text-align: left; }
  .fact { border-right: 0; border-bottom: 1px solid var(--rule); }
  .ro { border-right: 0; border-bottom: 1px solid var(--rule-dark); }
  .switch button { border-right: 0; border-bottom: 1px solid var(--rule-dark); }
}

@media (max-width: 580px) {
  .vs-row { grid-template-columns: 1fr; gap: 8px; }
  .scale-legend { margin-top: 82px; }
  body { font-size: 16.5px; }
}

/* Shown on a conference-room TV as well as read on a laptop. Nudge up on very
   wide viewports so ten-foot legibility holds. */
@media (min-width: 1560px) {
  body { font-size: 18.5px; }
}

@media print {
  #presenterBar, #sectionNav, .pick, .cta { display: none !important; }
  .hero, .fork, .closing, .foot, #operatorRoot { background: #fff !important; color: #000 !important; background-image: none !important; }
  section.sec { break-inside: avoid; }
}