/* ============================================================
   Pumpworks — Diesel Service
   Palette + type sampled from the bench prototype (liquid-title)
   Built on logical properties throughout so the Arabic RTL
   build is a dir="rtl" flip, not a second stylesheet.
   ============================================================ */

:root{
  /* ---- colour ---- */
  --paper:        #F6F5F2;   /* warm near-white ground */
  --paper-deep:   #EFEDE8;   /* alternate band / gradient base */
  --panel:        #FBFAF8;   /* readout + plate faces */
  --ink:          #1A1512;   /* warm near-black */
  --steel:        #6B625B;   /* muted labels, mono captions — 5.47:1 on paper */
  --ghost:        #D7D2CD;   /* the "dry" title — unfilled fuel */
  --crimson:      #A50C28;   /* diesel red, the only accent */
  --crimson-lift: #C4102F;   /* button top stop, live indicator */
  --crimson-deep: #7E0A1F;   /* bottom of the liquid */
  --hair:         rgba(26,21,18,.12);
  --hair-soft:    rgba(26,21,18,.07);

  /* ---- type ---- */
  --f-display: 'Archivo Black', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-ui:      'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- metrics ---- */
  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  --head-h: 84px;
  --sec-pad: clamp(72px, 10vw, 140px);
}

/* Arabic build swaps the display + UI faces; mono figures stay latin */
html[lang="ar"]{
  --f-display: 'IBM Plex Sans Arabic', 'Archivo Black', sans-serif;
  --f-ui:      'IBM Plex Sans Arabic', 'Archivo', sans-serif;
  /* Arabic sets far narrower than the English lockup — scale the
     hero back up so it holds the same share of the measure */
  --rig-scale: 1.32;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,p,dl,dd,ol{ margin:0; }
ol{ padding:0; list-style:none; }
img,svg{ display:block; max-inline-size:100%; }
a{ color:inherit; }

::selection{ background:var(--crimson); color:#fff; }

:focus-visible{
  outline:2px solid var(--crimson);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; inset-block-start:-100px; inset-inline-start:12px;
  z-index:100; background:var(--ink); color:var(--paper);
  padding:10px 16px; border-radius:4px; text-decoration:none;
  font:500 14px/1 var(--f-ui);
}
.skip:focus{ inset-block-start:12px; }

/* ── shared bits ───────────────────────────────────────────── */

.tag{
  font-family:var(--f-mono);
  font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--steel);
}
.tag--onDark{ color:rgba(255,255,255,.78); }

.h2{
  font-family:var(--f-display);
  font-size:clamp(2rem, 4.4vw, 3.6rem);
  line-height:1.02;
  letter-spacing:-.022em;
  text-transform:uppercase;
  margin-block-start:18px;
  text-wrap:balance;
}

.lede{
  max-inline-size:62ch;
  margin-block-start:20px;
  color:var(--steel);
  font-size:clamp(16px, 1.5vw, 18px);
  text-wrap:pretty;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-mono);
  font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  padding:13px 22px; border-radius:4px; border:1px solid transparent;
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.btn--solid{
  background:linear-gradient(180deg, var(--crimson-lift), var(--crimson));
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 2px 10px rgba(165,12,40,.22);
}
.btn--solid:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 6px 18px rgba(165,12,40,.32); }
.btn--paper{ background:var(--paper); color:var(--ink); }
.btn--paper:hover{ transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.42); }
.btn--ghost:hover{ background:rgba(255,255,255,.1); }

/* ── masthead ──────────────────────────────────────────────── */

.masthead{
  position:sticky; inset-block-start:0; z-index:50;
  background:rgba(246,245,242,.86);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-block-end:1px solid transparent;
  transition:border-color .25s ease, background-color .25s ease;
}
.masthead.is-stuck{ border-block-end-color:var(--hair); }

.masthead__in{
  max-inline-size:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
  block-size:var(--head-h);
  display:flex; align-items:center; gap:24px;
}

.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; margin-inline-end:auto;
}
.brand__logo{ display:block; inline-size:clamp(170px, 20vw, 232px); height:auto; }

.nav{ display:flex; align-items:center; gap:30px; }
.nav__link{
  position:relative;
  font-family:var(--f-mono); font-size:11.5px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--steel); text-decoration:none;
  transition:color .2s ease;
}
.nav__link::after{
  content:""; position:absolute; inset-block-end:-6px;
  inset-inline-start:0; inline-size:0; block-size:1px;
  background:var(--crimson); transition:inline-size .25s ease;
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after{ inline-size:100%; }

.lang{
  background:none; border:0; cursor:pointer; padding:4px 2px;
  font-family:'IBM Plex Sans Arabic','Archivo',sans-serif;
  font-size:14px; color:var(--steel);
  transition:color .2s ease;
}
.lang:hover{ color:var(--crimson); }

.burger{
  display:none; order:3;
  inline-size:40px; block-size:40px; padding:11px 8px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.burger span{ display:block; block-size:1.5px; background:var(--ink); transition:transform .25s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-8px) rotate(-45deg); }

/* ── the bench (hero) ──────────────────────────────────────── */

.bench{
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper) 55%, var(--paper-deep) 100%);
  border-block-end:1px solid var(--hair);
}
.bench__in{
  max-inline-size:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
  padding-block:clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px);
  min-block-size:calc(100svh - var(--head-h));
  display:flex; flex-direction:column;
}

.bench__top{
  display:flex; align-items:baseline; justify-content:flex-end; gap:20px;
}

.status{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--steel); white-space:nowrap;
}
.status__dot{
  inline-size:8px; block-size:8px; border-radius:50%;
  background:var(--ghost);
  transition:background-color .3s ease, box-shadow .3s ease;
}
.status.is-live .status__dot{
  background:var(--crimson-lift);
  box-shadow:0 0 0 4px rgba(196,16,47,.16);
}
.status.is-locked .status__dot{
  background:var(--crimson);
  box-shadow:0 0 0 4px rgba(165,12,40,.2);
}

/* the signature: a title that fills with fuel */
.rig{
  flex:1 1 auto;
  display:flex; align-items:center;
  padding-block:clamp(24px, 4vw, 56px);
  font-family:var(--f-display);
  /* nowrap lockup: vw drives small screens, the cap keeps it inside
     the 1240px wrap on large ones. Both ends fit with ~4% margin. */
  font-size:calc(clamp(1.4rem, 8.8vw, 6.5rem) * var(--rig-scale, 1));
  line-height:.92;
  letter-spacing:-.03em;
  text-transform:uppercase;
  font-weight:400;              /* Archivo Black is a single weight */
}
.rig__stack{ position:relative; display:block; inline-size:100%; }
.rig__line{ display:block; white-space:nowrap; }
.rig b{ font-weight:inherit; }

.rig__ghost{ display:block; color:var(--ghost); }
.rig__fill{
  position:absolute;
  inset-block-start:0; inset-inline-start:0;
  inline-size:100%;
  display:block;
  background:linear-gradient(180deg, var(--crimson-lift) 0%, var(--crimson) 42%, var(--crimson-deep) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  clip-path:inset(100% 0 0 0);   /* empty; JS drives the surface */
  will-change:clip-path;
}

.caption{
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel);
  margin-block-end:clamp(20px, 3vw, 32px);
}
.caption__state{ color:var(--crimson); font-weight:500; }

.readouts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-block-end:14px;
}
.readout{
  background:var(--panel);
  border:1px solid var(--hair-soft);
  border-radius:6px;
  padding:12px 18px 14px;
}
.readout__label{
  display:block;
  font-family:var(--f-mono); font-size:9.5px; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--steel);
}
.readout__value{
  display:flex; align-items:baseline; gap:6px;
  font-family:var(--f-mono); font-size:clamp(20px, 2.2vw, 27px);
  font-weight:400; line-height:1.25;
  font-variant-numeric:tabular-nums;
  margin-block-start:2px;
}
.readout__unit{
  font-size:11px; font-style:normal; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel);
}
.readout__value--word{ font-size:clamp(16px, 1.6vw, 19px); letter-spacing:.04em; text-transform:uppercase; }

.prime{
  position:relative; overflow:hidden;
  inline-size:100%; block-size:60px;
  border:0; border-radius:5px; cursor:pointer;
  background:linear-gradient(180deg, var(--crimson-lift), var(--crimson-deep));
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 3px 16px rgba(165,12,40,.24);
  color:#fff;
  font-family:var(--f-mono); font-size:13px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  touch-action:none;             /* hold gesture, not a scroll */
  -webkit-user-select:none; user-select:none;
  transition:box-shadow .2s ease, transform .12s ease;
}
.prime:active{ transform:translateY(1px); }
.prime.is-priming{ box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 6px 26px rgba(165,12,40,.42); }
/* the bar heats up as it primes — no hard progress edge to fight the title */
.prime__track{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 70%);
  opacity:calc(var(--lvl, 0) * 0.9);
  pointer-events:none;
}
.prime__text{ position:relative; }

/* ── generic section shell ─────────────────────────────────── */

.section{ padding-block:var(--sec-pad); }
.section--alt{ background:var(--paper-deep); border-block:1px solid var(--hair); }
.section__in{
  max-inline-size:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.section__head{ margin-block-end:clamp(44px, 6vw, 72px); }

/* ── features: plates ─────────────────────────────────────── */

.plates{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
  border-radius:8px;
  overflow:hidden;
}
.plate{
  background:var(--paper);
  padding:clamp(26px, 3vw, 40px);
  display:flex; flex-direction:column;
  transition:background-color .3s ease;
}
.section--alt .plate{ background:var(--paper-deep); }
.plate:hover{ background:var(--panel); }
/* ── plate figures ─────────────────────────────────────────
   Each plate carries a schematic of its own subject, drawn
   like a workshop-manual figure. The drawing resolves when the
   plate reveals (not on hover) so touch users see it too.
   ───────────────────────────────────────────────────────── */
.plate__fig{
  margin:0 0 26px;
  inline-size:96px; block-size:96px;
  display:grid; place-items:center;
  border:1px solid var(--hair);
  border-radius:5px;
  background-color:var(--panel);
  background-image:
    linear-gradient(to right,  var(--hair-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair-soft) 1px, transparent 1px);
  background-size:12px 12px;
  transition:border-color .3s ease;
}
.plate:hover .plate__fig{ border-color:rgba(165,12,40,.35); }

.fig{ inline-size:72px; block-size:72px; overflow:visible; }
.fig line, .fig rect, .fig circle, .fig path{
  vector-effect:non-scaling-stroke;
}

/* shared drawing language: hairline ink, crimson for the live part */
.fig-face, .fig-target, .fig-base, .fig-axis{
  fill:none; stroke:var(--steel); stroke-width:1;
}
.fig-face{ opacity:.35; }
.fig-axis{ opacity:.3; stroke-dasharray:2 3; }
.fig-target{ stroke:var(--crimson); stroke-dasharray:3 3; opacity:.75; }
.fig-base{ opacity:.5; }

/* Resting pose = the resolved drawing. Motion is layered on top
   under no-preference only, so a reduced-motion visitor gets a
   correct static figure rather than a frozen mid-frame. */

/* 1 — pressure gauge */
.fig-ticks{
  fill:none; stroke:var(--steel); stroke-width:4; opacity:.45;
  stroke-dasharray:1.1 8.9;
  transform:rotate(-90deg); transform-origin:36px 36px;
}
.fig-needle{
  stroke:var(--crimson); stroke-width:2; stroke-linecap:round;
  transform:rotate(52deg); transform-origin:36px 36px;
}
.fig-hub{ fill:var(--crimson); }

/* 2 — delivery per element */
.fig-bars rect{
  fill:var(--crimson); opacity:.85;
  transform-box:fill-box; transform-origin:bottom center;
  transform:scaleY(1);
}

/* 3 — assembly */
.fig-parts rect{
  fill:none; stroke:var(--ink); stroke-width:1.25; opacity:.75;
  transform:translateY(0);
}
.fig-parts rect:first-child,
.fig-parts rect:last-child{ stroke:var(--crimson); }

/* 4 — nozzle and spray cone */
.fig-nozzle{ fill:none; stroke:var(--ink); stroke-width:1.25; opacity:.75; }
.fig-jets line{
  stroke:var(--crimson); stroke-width:1.25; stroke-linecap:round;
  opacity:.85;
  transform-box:fill-box; transform-origin:top center;
  transform:scaleY(1);
}

/* ── the figures run ───────────────────────────────────────
   Each loop is the plate's own cycle: a bench run, delivery
   settling onto target, an assembly, injection pulses. Held
   paused until the plate is on screen.
   ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){

  .fig-needle      { animation:pw-sweep    5.6s cubic-bezier(.4,0,.3,1) infinite; }
  .fig-bars rect   { animation:pw-balance  4.8s cubic-bezier(.35,0,.3,1) infinite; }
  .fig-parts rect  { animation:pw-assemble 5.2s cubic-bezier(.3,0,.3,1) infinite; }
  .fig-jets line   { animation:pw-spray    2.4s ease-out infinite; }

  /* stagger so each figure reads as a sequence, not a block */
  .fig-bars rect:nth-child(2){ animation-delay:.12s; }
  .fig-bars rect:nth-child(3){ animation-delay:.24s; }
  .fig-bars rect:nth-child(4){ animation-delay:.36s; }
  .fig-parts rect:nth-child(2){ animation-delay:.09s; }
  .fig-parts rect:nth-child(3){ animation-delay:.18s; }
  .fig-parts rect:nth-child(4){ animation-delay:.27s; }
  .fig-jets line{ animation-delay:calc(var(--i) * 55ms); }

  /* idle until the plate has revealed — nothing animates off screen.
     Gated on .js so the figures still run if scripting never loads. */
  .js .plate .fig *{ animation-play-state:paused; }
  .js .plate.is-in .fig *{ animation-play-state:running; }
}

/* needle sweeps up, hunts around the reading, falls back to zero */
@keyframes pw-sweep{
  0%,  4%  { transform:rotate(-125deg); }
  20%      { transform:rotate(56deg); }
  26%      { transform:rotate(42deg); }
  32%      { transform:rotate(52deg); }
  38%      { transform:rotate(46deg); }
  44%, 72% { transform:rotate(49deg); }
  88%,100% { transform:rotate(-125deg); }
}

/* elements drift off delivery, then get trimmed back onto target */
@keyframes pw-balance{
  0%       { transform:scaleY(var(--h)); }
  38%, 58% { transform:scaleY(1); }
  80%      { transform:scaleY(calc(var(--h) * .45 + .55)); }
  100%     { transform:scaleY(var(--h)); }
}

/* parts draw together, hold assembled, separate again */
@keyframes pw-assemble{
  0%       { transform:translateY(calc(var(--d) * 1px)); }
  32%, 62% { transform:translateY(0); }
  94%,100% { transform:translateY(calc(var(--d) * 1px)); }
}

/* injection pulse */
@keyframes pw-spray{
  0%       { opacity:.12; transform:scaleY(.28); }
  14%      { opacity:.9;  transform:scaleY(1); }
  68%      { opacity:.85; transform:scaleY(1); }
  90%,100% { opacity:.12; transform:scaleY(.28); }
}

.plate__tag{
  font-family:var(--f-mono); font-size:10px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--crimson);
}
.plate__title{
  font-family:var(--f-ui); font-weight:700;
  font-size:clamp(19px, 1.9vw, 23px);
  line-height:1.25; letter-spacing:-.012em;
  margin-block-start:16px;
}
.plate__copy{ color:var(--steel); margin-block-start:12px; font-size:16px; }
/* the figure it is rated to, set like a stamped mark on a test sheet */
.plate__stat{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-block-start:auto; padding-block-start:26px;
  font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel);
}
.plate__stat b{
  font-weight:500; font-size:12px; letter-spacing:.06em;
  color:var(--crimson);
  padding:5px 9px;
  border:1px solid rgba(165,12,40,.32);
  border-radius:3px;
  background:rgba(165,12,40,.05);
  white-space:nowrap;
}

/* ── process: an ordered line (the order is real) ──────────── */

.steps{
  --step-pad:clamp(22px, 2.6vw, 32px);
  border-block-start:1px solid var(--hair);
}
.step{
  position:relative;
  display:grid;
  /* the rail is absolutely placed, so it takes no column here */
  grid-template-columns:46px 1fr 190px;
  gap:clamp(12px, 2.4vw, 32px);
  align-items:start;
  padding-block:var(--step-pad);
  padding-inline-start:30px;
  border-block-end:1px solid var(--hair);
  transition:background-color .25s ease;
}
.step:hover{ background:rgba(255,255,255,.5); }

/* the rail: one continuous line through the shop, filling crimson
   stage by stage as you scroll — the priming idea, quietly reused.
   Positioned against the row box, not the content box, so the line
   runs unbroken through each row's padding. */
.step__mark{
  position:absolute;
  inset-block:0; inset-inline-start:7px;
  inline-size:1px;
  background:var(--hair);
}
.step__mark::before{                       /* the fill */
  content:""; position:absolute; inset:0;
  background:var(--crimson);
  transform:scaleY(0); transform-origin:top;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.step.is-in .step__mark::before{ transform:scaleY(1); }
.step__mark::after{                        /* the node */
  content:""; position:absolute;
  inset-block-start:calc(var(--step-pad) + 5px);
  inset-inline-start:50%;
  inline-size:11px; block-size:11px; margin-inline-start:-5.5px;
  border-radius:50%;
  border:1.5px solid var(--hair);
  background:var(--paper-deep);
  transition:border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
  transition-delay:.3s;
}
.step.is-in .step__mark::after{
  border-color:var(--crimson); background:var(--crimson);
  box-shadow:0 0 0 4px rgba(165,12,40,.13);
}

.step__num{
  font-family:var(--f-mono); font-size:13px; font-weight:700;
  letter-spacing:.08em; color:var(--crimson);
  padding-block-start:4px;
}
.step__title{
  font-family:var(--f-ui); font-weight:600;
  font-size:clamp(17px, 1.7vw, 20px); line-height:1.3;
}
.step__copy{ color:var(--steel); margin-block-start:7px; font-size:16px; }
/* what the stage hands you — one consistent axis, not mixed
   durations and outputs. Turnaround times live in Support. */
.step__gate{
  justify-self:end;
  font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); text-align:end;
  padding:6px 11px;
  border:1px solid var(--hair);
  border-radius:3px;
  background:var(--panel);
  white-space:nowrap;
  transition:border-color .25s ease, color .25s ease;
}
.step:hover .step__gate{ border-color:rgba(165,12,40,.3); color:var(--ink); }

/* ── specs: an instrument sheet ────────────────────────────── */

.specs{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(40px, 6vw, 88px);
}
.specs__hd{
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink);
  padding-block-end:14px;
  border-block-end:2px solid var(--ink);
}
.spec__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding-block:15px;
  border-block-end:1px solid var(--hair);
}
.spec__row dt{
  font-size:15px; color:var(--steel);
}
.spec__row dd{
  margin:0; text-align:end;
  font-family:var(--f-mono); font-size:14px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.spec__row dd i{
  font-style:normal; color:var(--steel);
  font-size:11px; letter-spacing:.08em; margin-inline-start:3px;
}

/* ── support: facts ───────────────────────────────────────── */

.facts{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(24px, 3vw, 44px);
}
.fact{ border-block-start:2px solid var(--ink); padding-block-start:18px; }
.fact__label{
  font-family:var(--f-mono); font-size:10px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--steel);
}
.fact__value{
  font-family:var(--f-display);
  font-size:clamp(30px, 3.6vw, 46px);
  line-height:1; letter-spacing:-.02em;
  margin-block-start:12px;
}
.fact__value i{
  display:block; font-style:normal;
  font-family:var(--f-mono); font-size:11px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel); margin-block-start:9px;
}
.fact__note{ color:var(--steel); font-size:15px; margin-block-start:14px; }

/* ── book: the one dark block ─────────────────────────────── */

.book{
  background:linear-gradient(165deg, var(--crimson-lift) 0%, var(--crimson) 45%, var(--crimson-deep) 100%);
  color:#fff;
  padding-block:clamp(76px, 9vw, 128px);
}
.book__in{
  max-inline-size:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
  text-align:center;
}
.book__title{
  font-family:var(--f-display);
  font-size:clamp(2.1rem, 5.4vw, 4.4rem);
  line-height:1; letter-spacing:-.028em; text-transform:uppercase;
  margin-block-start:20px;
  text-wrap:balance;
}
.book__copy{
  max-inline-size:52ch; margin-inline:auto; margin-block-start:22px;
  color:rgba(255,255,255,.84);
  text-wrap:pretty;
}
.book__actions{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin-block-start:38px;
}

/* ── footer ───────────────────────────────────────────────── */

.foot{ background:var(--ink); color:var(--paper); padding-block:clamp(56px, 7vw, 84px); }
.foot__in{
  max-inline-size:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:1fr 2fr; gap:clamp(32px, 5vw, 64px);
}
/* The lockup is dark-on-light, so the footer gives it a paper plate on the ink ground. */
.brand--foot{ margin-inline-end:0; background:var(--paper); border-radius:6px; padding:12px 16px; }
.brand--foot .brand__logo{ inline-size:clamp(170px, 20vw, 220px); }
.foot__note{ color:rgba(246,245,242,.55); font-size:15px; margin-block-start:22px; max-inline-size:28ch; }
.foot__meta{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 3vw, 36px); }
.foot__meta dt{
  font-family:var(--f-mono); font-size:10px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(246,245,242,.5); margin-block-end:12px;
}
.foot__meta dd{ margin:0; font-size:15px; line-height:1.7; color:rgba(246,245,242,.88); }
.foot__meta a{ text-decoration:none; border-block-end:1px solid rgba(246,245,242,.25); }
.foot__meta a:hover{ border-block-end-color:var(--crimson-lift); }
.foot__legal{
  grid-column:1 / -1;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,245,242,.4);
  padding-block-start:clamp(32px, 4vw, 52px);
  border-block-start:1px solid rgba(246,245,242,.14);
}

/* ── scroll reveal ────────────────────────────────────────── */

/* Hidden only when JS is present to bring it back — never blank otherwise. */
.js .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ── responsive ───────────────────────────────────────────── */

@media (max-width: 960px){
  .plates{ grid-template-columns:1fr; }
  .specs{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:repeat(2, 1fr); }
  .foot__in{ grid-template-columns:1fr; }
  .foot__meta{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 820px){
  :root{ --head-h:72px; }

  .burger{ display:flex; }
  .nav{
    position:fixed; inset-block-start:var(--head-h); inset-inline:0;
    background:var(--paper);
    border-block-end:1px solid var(--hair);
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px var(--gut) 24px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
  }
  .nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav__link{ padding-block:16px; border-block-end:1px solid var(--hair-soft); font-size:13px; }
  .nav__link::after{ display:none; }
  .lang{ text-align:start; padding-block:16px; border-block-end:1px solid var(--hair-soft); font-size:16px; }
  .btn--solid{ margin-block-start:18px; }

  /* let the hero be content-sized on phones instead of stretching to fill */
  .bench__in{ min-block-size:0; padding-block:clamp(32px, 9vw, 56px) 32px; }
  .rig{ flex:0 0 auto; padding-block:clamp(28px, 9vw, 48px); }

  .readouts{ grid-template-columns:1fr; }
  .readout{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-block:11px; }
  .readout__value{ margin-block-start:0; }

  .step{ grid-template-columns:34px 1fr; padding-inline-start:26px; }
  .step__gate{ grid-column:2; justify-self:start; text-align:start; margin-block-start:12px; }
}

@media (max-width: 520px){
  body{ font-size:16px; }
  .facts{ grid-template-columns:1fr; }
  /* spec values get their own line rather than fighting the label */
  .spec__row{ flex-direction:column; align-items:flex-start; gap:5px; }
  .spec__row dd{ text-align:start; white-space:normal; }
  .foot__meta{ grid-template-columns:1fr; }
  .book__actions .btn{ inline-size:100%; }
  .prime{ block-size:56px; font-size:12px; letter-spacing:.16em; }
}

/* ── reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .step__num::before{ block-size:22px; }
}