/* Impact System Marketing — site stylesheet
   Consumes the semantic names in tokens.css. No hard-coded hex below except
   where a value is a one-off drawn in the design and has no token
   (the 0.07-opacity hatch, the #e4e2e1 logo placeholder).
   Radius is 0 everywhere. Surfaces are defined by fill + rule, never shadow. */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ism-bg);
  color: var(--ism-text);
  font: 400 1rem/1.6 var(--ism-font-body);
  -webkit-font-smoothing: antialiased;
  /* Short pages still put the footer on the bottom edge. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- layout primitives ---------- */
.wrap { max-width: var(--ism-container); margin-inline: auto; }

.section { padding: var(--ism-space-18) var(--ism-space-14); }
.section--tight { padding: 64px var(--ism-space-14); }
.section--rule { border-bottom: var(--ism-rule) solid var(--ism-text); }
.section--surface { background: var(--ism-surface); }
.section--ink { background: var(--ism-text); color: #fff; }
.section--crimson { background: var(--ism-action); color: #fff; }

/* The red bar motif opens a section. 6x72, never full width. */
.redbar { width: 72px; height: 6px; background: var(--ism-action); flex: none; }

.eyebrow {
  font: 500 0.75rem/1.2 var(--ism-font-body);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ism-text-muted);
}
.eyebrow--onink { color: var(--ism-crimson-300); }

.mono {
  font: 400 0.75rem/1.4 var(--ism-font-mono);
  color: var(--ism-text-muted);
  letter-spacing: 0.02em;
}

/* ---------- display type ----------
   clamp() between the drawn desktop size and ~60% of it. */
.h1 {
  font: italic 900 clamp(38px, 6vw, 74px)/0.88 var(--ism-font-display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.h1--sm { font-size: clamp(36px, 5vw, 62px); line-height: 0.9; }
.h2 {
  font: italic 800 clamp(30px, 3.8vw, 46px)/0.95 var(--ism-font-display);
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.h2--sm { font-size: clamp(26px, 3vw, 38px); line-height: 1; letter-spacing: -0.02em; }
.h3 { font: 800 1.4375rem/1.15 var(--ism-font-display); letter-spacing: -0.015em; }
.lede { font: 400 1.1875rem/1.55 var(--ism-font-body); color: var(--ism-charcoal-700); }
.body { font: 400 1.0625rem/1.6 var(--ism-font-body); color: var(--ism-charcoal-700); }
.small { font: 400 0.875rem/1.55 var(--ism-font-body); color: var(--ism-text-muted); }
.onink .lede, .onink .body { color: var(--ism-border); }

/* ---------- buttons & links ----------
   Labels are flush left, never centred. */
.btn {
  display: inline-block;
  background: var(--ism-action);
  color: #fff;
  border: 0;
  border-radius: var(--ism-radius);
  padding: 17px 20px;
  font: 600 0.8125rem/1 var(--ism-font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms;
  min-height: 44px;
}
.btn:hover { background: var(--ism-action-hover); color: #fff; text-decoration: none; }
.btn:active { background: var(--ism-action-pressed); }

.btn--onred { background: #fff; color: var(--ism-action); font-weight: 700; padding: 19px 24px; font-size: 0.875rem; }
.btn--onred:hover { background: var(--ism-crimson-100); color: var(--ism-action-hover); }

.btn--outline { background: transparent; color: var(--ism-text); border: var(--ism-rule) solid var(--ism-text); padding: 13px 16px; font-size: 0.75rem; }
.btn--outline:hover { background: var(--ism-text); color: #fff; }

.btn--lg { padding: 19px 24px; font-size: 0.875rem; font-weight: 700; }
.btn--block { display: block; width: 100%; }

/* Underlined text CTA — a rule under the label, not a box. */
.tcta {
  display: inline-block;
  border-bottom: var(--ism-rule) solid var(--ism-action);
  color: var(--ism-action);
  padding: 12px 0;
  font: 600 0.8125rem/1 var(--ism-font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 120ms, border-color 120ms;
}
.tcta:hover { color: var(--ism-action-hover); border-color: var(--ism-action-hover); text-decoration: none; }
.tcta--ink { color: var(--ism-text); border-color: var(--ism-text); }
.tcta--ink:hover { color: var(--ism-action); border-color: var(--ism-action); }

a { color: var(--ism-action); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--ism-action); outline-offset: 2px; }
.section--ink :focus-visible,
.section--crimson :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }
::selection { background: var(--ism-crimson-100); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ism-action); color: #fff; padding: 12px 16px; z-index: 10;
  font: 600 0.8125rem/1 var(--ism-font-body); letter-spacing: 0.1em; text-transform: uppercase;
}
.skip-link:focus { left: 0; top: 0; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--ism-bg);
  border-bottom: var(--ism-rule) solid var(--ism-text);
}
.site-header__inner {
  max-width: var(--ism-container); margin-inline: auto;
  padding: 20px var(--ism-space-14);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.site-header__logo { width: 206px; height: auto; }
.nav { display: flex; gap: 30px; align-items: center; }
.nav a {
  font: 600 0.75rem/1 var(--ism-font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ism-charcoal-700);
  text-decoration: none;
  padding: 15px 0;
}
.nav a:hover { color: var(--ism-action); text-decoration: none; }
/* `.nav a` (0,1,1) outranks `.btn` (0,1,0), so the button label inherits
   charcoal unless it is restated here — and crimson-on-crimson on hover. */
.nav a.btn, .nav a.btn:hover { color: #fff; }
/* Current-page marker is crimson text — but not on the crimson button,
   where it would render the label invisible. */
.nav a[aria-current="page"]:not(.btn) { color: var(--ism-action); }
.nav .btn[aria-current="page"] { background: var(--ism-action-hover); }
.nav .btn { padding: 14px 17px; font-size: 0.75rem; }

.nav-toggle { display: none; }

/* ---------- footer ---------- */
.site-footer { background: var(--ism-text); color: var(--ism-text-muted); }
.site-footer__inner {
  max-width: var(--ism-container); margin-inline: auto;
  padding: 40px var(--ism-space-14);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.site-footer img { width: 180px; height: auto; }
.site-footer__domain {
  font: 400 0.6875rem/1 var(--ism-font-mono);
  letter-spacing: 0.1em;
  color: var(--ism-text-muted);
}

/* ---------- hero (home 1a) ---------- */
.hero { display: flex; align-items: stretch; border-bottom: var(--ism-rule) solid var(--ism-text); }
.hero__copy {
  flex: 1 1 0;
  padding: var(--ism-space-18) var(--ism-space-14);
  display: flex; flex-direction: column; gap: 28px; justify-content: center;
}
.hero__copy p { max-width: 520px; }
.hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero__figure {
  flex: 0 0 470px;
  background: var(--ism-surface);
  border-left: var(--ism-rule) solid var(--ism-text);
  position: relative;
  overflow: hidden;
}

/* Two image treatments, applied to whichever hero holds which photo.
   --cutout: transparent PNG standing on the hatched field, bottom aligned.
   --portrait: rectangular photo cropped to fill the panel. */
.figure-cutout { display: flex; align-items: flex-end; justify-content: center; }
.figure-cutout img { position: relative; height: 520px; width: auto; max-width: none; }
.figure-portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
}

/* Italic hatch field. Opacity is drawn, not tokenised. */
.hatch::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, var(--ism-text) 0 3px, transparent 3px 13px);
  opacity: 0.07;
}

/* ---------- stat row ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: var(--ism-rule) solid var(--ism-text); }
.stat { padding: 30px 32px; border-right: var(--ism-rule-light) solid var(--ism-border); display: flex; flex-direction: column; gap: 8px; }
.stat:last-child { border-right: 0; }
.stat__figure {
  font: italic 900 2.375rem/1 var(--ism-font-display);
  letter-spacing: -0.03em;
}
.stat__figure--crimson { color: var(--ism-action); }
.stat__note { font: 400 0.8125rem/1.45 var(--ism-font-body); color: var(--ism-text-muted); }

/* ---------- generic heads ---------- */
.sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.sechead__copy { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }

/* ---------- leak columns ---------- */
.leaks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.leak { border-top: var(--ism-rule) solid var(--ism-text); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.leak__icon { width: 30px; height: 30px; color: var(--ism-charcoal-700); }
.leak__icon--crimson { color: var(--ism-action); }
.leak__icon svg { width: 100%; height: 100%; display: block; }
.leak__title { font: 700 1.0625rem/1.3 var(--ism-font-body); color: var(--ism-text); }
.leak__body { font: 400 0.875rem/1.55 var(--ism-font-body); color: var(--ism-text-muted); }

/* ---------- numbered stage table ---------- */
.stages { display: flex; flex-direction: column; }
.stage {
  display: grid; grid-template-columns: 80px 1fr 1.3fr; gap: 32px;
  padding: 26px 0;
  border-top: var(--ism-rule-light) solid var(--ism-border);
  align-items: baseline;
}
.stage:first-child { border-top: var(--ism-rule) solid var(--ism-text); }
.stage:last-child { border-bottom: var(--ism-rule) solid var(--ism-text); }
.stage__num { font: 400 0.8125rem/1 var(--ism-font-mono); color: var(--ism-action); }
.stage__title { font: 800 1.375rem/1.15 var(--ism-font-display); letter-spacing: -0.01em; }
.stage__body { font: 400 0.9375rem/1.6 var(--ism-font-body); color: var(--ism-charcoal-700); }

/* ---------- bio band ---------- */
.bio { display: flex; gap: 56px; align-items: center; }
.bio__portrait {
  flex: 0 0 300px; height: 300px;
  background: var(--ism-surface);
  border: var(--ism-rule-light) solid var(--ism-border);
  position: relative; overflow: hidden;
}
.bio__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.bio__copy { flex: 1; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.bio__name { font: italic 800 clamp(26px, 3vw, 34px)/1.05 var(--ism-font-display); letter-spacing: -0.02em; text-transform: uppercase; }
.bio__copy p { max-width: 640px; }

/* ---------- testimonials ----------
   Placeholder copy is deliberate — real quotes required before launch. */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ism-rule); background: var(--ism-border); }
.quote {
  background: var(--ism-bg); padding: 32px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 180px; justify-content: space-between;
}
.quote__text { font: italic 400 1.1875rem/1.5 var(--ism-font-body); color: var(--ism-border); }
.quote__who { display: flex; flex-direction: column; gap: 4px; }
.quote__name { font: 700 0.875rem/1.2 var(--ism-font-body); color: var(--ism-text); }
.quote__meta { font: 400 0.6875rem/1.2 var(--ism-font-mono); color: var(--ism-text-muted); letter-spacing: 0.04em; }

/* ---------- poster CTA ---------- */
.poster { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
.poster__copy { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.poster__head { font: italic 900 clamp(34px, 4.4vw, 56px)/0.9 var(--ism-font-display); letter-spacing: -0.03em; text-transform: uppercase; }
.poster p { color: var(--ism-crimson-100); font-size: 1.0625rem; line-height: 1.55; }

/* ---------- programme columns (What we do) ---------- */
.progs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--ism-rule);
  background: var(--ism-border);
  border-bottom: var(--ism-rule) solid var(--ism-text);
}
.prog { background: var(--ism-bg); padding: 44px 36px; display: flex; flex-direction: column; gap: 20px; }
.prog__bar { width: 56px; height: 6px; background: var(--ism-action); flex: none; }
.prog__bar--ink { background: var(--ism-charcoal-700); }
.prog__title { font: 800 1.625rem/1.1 var(--ism-font-display); letter-spacing: -0.015em; }
.prog__body { font: 400 0.9375rem/1.6 var(--ism-font-body); color: var(--ism-charcoal-700); }
.dashlist { display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.dashlist li { display: flex; gap: 10px; font-size: 0.875rem; color: var(--ism-charcoal-700); line-height: 1.5; }
.dashlist li::before { content: "—"; color: var(--ism-action); flex: none; }
.prog .btn, .prog .btn--outline { margin-top: auto; align-self: flex-start; }

/* ---------- comparison table ---------- */
.cmp { display: flex; flex-direction: column; }
.cmp__row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px;
  padding: 16px 0;
  border-bottom: var(--ism-rule-light) solid var(--ism-border);
  align-items: center;
}
.cmp__row--head { border-bottom: var(--ism-rule) solid var(--ism-text); }
.cmp__row:last-child { border-bottom: var(--ism-rule) solid var(--ism-text); }
.cmp__th { font: 600 0.6875rem/1.2 var(--ism-font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ism-text-muted); }
.cmp__cell { font-size: 0.9375rem; color: var(--ism-text); }
.cmp__cell--none { color: var(--ism-text-muted); }
.cmp__cell--fit { font-weight: 700; color: var(--ism-action); }
.cmp__label { display: none; }

/* ---------- spec strip ---------- */
.specs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: var(--ism-rule) solid var(--ism-text); }
.spec { padding: 28px 32px; border-right: var(--ism-rule-light) solid var(--ism-border); display: flex; flex-direction: column; gap: 7px; }
.spec:last-child { border-right: 0; }
.spec__key { font: 400 0.6875rem/1.2 var(--ism-font-mono); color: var(--ism-text-muted); letter-spacing: 0.04em; }
.spec__val { font: 700 1.0625rem/1.3 var(--ism-font-body); color: var(--ism-text); }
.spec__val--crimson { color: var(--ism-action); }

/* ---------- 2x2 build cards ---------- */
.builds { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ism-rule); background: var(--ism-border); }
.build { background: var(--ism-bg); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.build__key { font: 400 0.75rem/1.2 var(--ism-font-mono); color: var(--ism-action); letter-spacing: 0.04em; }
.build__title { font: 800 1.3125rem/1.2 var(--ism-font-display); }
.build__body { font: 400 0.9375rem/1.6 var(--ism-font-body); color: var(--ism-charcoal-700); }

/* ---------- two-column prose band ---------- */
.duo { display: flex; gap: 56px; align-items: flex-start; }
.duo > div { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.duo__body { font: 400 1.0625rem/1.6 var(--ism-font-body); color: var(--ism-charcoal-700); }

/* ---------- about ---------- */
.about-hero { display: flex; align-items: stretch; border-bottom: var(--ism-rule) solid var(--ism-text); }
.about-hero__copy { flex: 1; padding: var(--ism-space-18) var(--ism-space-14); display: flex; flex-direction: column; gap: 24px; justify-content: center; }
.about-hero__copy p { max-width: 560px; }
.about-hero__role { font: 600 1.25rem/1.5 var(--ism-font-body); color: var(--ism-action); }
.about-hero__figure { flex: 0 0 480px; position: relative; overflow: hidden; background: var(--ism-surface); }

.method { display: flex; gap: 56px; }
.method__label { flex: 0 0 300px; display: flex; flex-direction: column; gap: 14px; }
.method__prose { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.method__prose p { font: 400 1.0625rem/1.65 var(--ism-font-body); color: var(--ism-charcoal-700); }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 8px; }
.principle { border-top: var(--ism-rule) solid var(--ism-text); padding-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.principle__title { font: 700 1rem/1.3 var(--ism-font-body); color: var(--ism-text); }
.principle__body { font: 400 0.875rem/1.5 var(--ism-font-body); color: var(--ism-text-muted); }

.closer { display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap; padding: var(--ism-space-14); }
.closer__head { font: italic 800 clamp(26px, 3vw, 34px)/1 var(--ism-font-display); letter-spacing: -0.02em; text-transform: uppercase; }

/* ---------- book a call ---------- */
.book { display: flex; align-items: stretch; }
.book__pitch { flex: 1; padding: var(--ism-space-18) var(--ism-space-14); display: flex; flex-direction: column; gap: 28px; }
.book__pitch p { max-width: 520px; }
.steps { display: flex; flex-direction: column; gap: 14px; border-top: var(--ism-rule) solid var(--ism-text); padding-top: 24px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.steps__num { font: 400 0.75rem/1 var(--ism-font-mono); color: var(--ism-action); padding-top: 5px; flex: none; }
.steps__body { font: 400 1rem/1.55 var(--ism-font-body); color: var(--ism-charcoal-700); }

.book__panel {
  flex: 0 0 520px;
  background: var(--ism-surface);
  border-left: var(--ism-rule) solid var(--ism-text);
  padding: 56px 48px;
}
.book__panel h2 { font: 800 1.375rem/1.2 var(--ism-font-display); letter-spacing: -0.01em; }

/* ---------- booking panel ----------
   Holds the HighLevel booking iframe. min-height stops the panel collapsing
   to the iframe's 150px default before form_embed.js reports the real height;
   the script overwrites height inline once the widget measures itself. */
.booking { display: flex; flex-direction: column; gap: 22px; }
.booking__embed { background: var(--ism-bg); border: var(--ism-rule-light) solid var(--ism-border); }
.booking__embed iframe {
  display: block;
  width: 100%;
  min-height: 640px;
  border: 0;
  overflow: hidden;
}
.form__note { font: 400 0.78125rem/1.55 var(--ism-font-body); color: var(--ism-text-muted); }

/* ---------- motion ----------
   500ms rise-and-fade on section enter. No parallax, no counters. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 500ms cubic-bezier(.2,.7,.3,1), transform 500ms cubic-bezier(.2,.7,.3,1);
}
/* No JS: never leave content hidden. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- responsive ----------
   Drawn at 1280 only; everything below is per the handoff rules. */
@media (max-width: 1100px) {
  .nav { gap: 20px; }
  .nav a { letter-spacing: 0.12em; }
}

/* Nav collapses to a disclosure before it can crowd the logo. */
@media (max-width: 940px) {
  .site-header__inner { flex-wrap: wrap; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    background: none; border: var(--ism-rule) solid var(--ism-text);
    padding: 11px 14px; cursor: pointer;
    font: 600 0.75rem/1 var(--ism-font-body);
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ism-text);
    min-height: 44px;
  }
  .nav {
    display: none; width: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    border-top: var(--ism-rule) solid var(--ism-text);
    margin-top: 16px;
  }
  .nav.is-open { display: flex; }
  .nav a { width: 100%; padding: 16px 0; border-bottom: var(--ism-rule-light) solid var(--ism-border); }
  .nav .btn { margin-top: 16px; }
  .nav .btn:hover { color: #fff; }
}

@media (max-width: 900px) {
  /* Two-column splits stack: copy first, image second, cutout capped. */
  .hero, .about-hero, .book { flex-direction: column; }
  .hero__figure, .about-hero__figure { flex: none; border-left: 0; border-top: var(--ism-rule) solid var(--ism-text); }
  /* Cutout drops to a 420px cap; the cropped portrait gets a fixed band. */
  .figure-cutout { min-height: 420px; }
  .figure-cutout img { height: 420px; max-height: 420px; }
  .figure-portrait { height: 460px; }
  .book__panel { flex: none; border-left: 0; border-top: var(--ism-rule) solid var(--ism-text); }

  /* 4-up grids become 2-up. */
  .stats, .specs, .leaks { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2), .spec:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2), .spec:nth-child(-n+2) { border-bottom: var(--ism-rule-light) solid var(--ism-border); }

  .bio { flex-direction: column; align-items: flex-start; gap: 32px; }
  .bio__portrait { flex: none; width: 100%; max-width: 360px; }
  .method { flex-direction: column; gap: 28px; }
  .method__label { flex: none; }
  .duo { flex-direction: column; gap: 32px; }
  .stage { grid-template-columns: 60px 1fr; gap: 8px 20px; }
  .stage__body { grid-column: 2; }
}

@media (max-width: 860px) {
  .progs { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
}

/* Comparison table becomes stacked cards — never a horizontal scroller. */
@media (max-width: 720px) {
  .cmp__row--head { display: none; }
  .cmp__row {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 20px 0;
    border-bottom: var(--ism-rule-light) solid var(--ism-border);
  }
  .cmp__row > .cmp__cell:first-child {
    font-weight: 700; font-size: 1.0625rem; margin-bottom: 10px;
  }
  .cmp__cell { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
  .cmp__label {
    display: inline; font: 600 0.6875rem/1.6 var(--ism-font-body);
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--ism-text-muted);
  }
  .quotes { grid-template-columns: 1fr; }
  .builds { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Side padding drops to 24px. */
  .section, .section--tight { padding-left: var(--ism-space-6); padding-right: var(--ism-space-6); }
  .section { padding-top: 48px; padding-bottom: 48px; }
  .site-header__inner, .site-footer__inner,
  .hero__copy, .about-hero__copy, .book__pitch { padding-left: var(--ism-space-6); padding-right: var(--ism-space-6); }
  .hero__copy, .about-hero__copy, .book__pitch { padding-top: 48px; padding-bottom: 48px; }
  .book__panel { padding: 40px var(--ism-space-6); }
  .closer { padding: 40px var(--ism-space-6); }
  .prog { padding: 32px 24px; }
  .site-header__logo { width: 170px; }
}

@media (max-width: 560px) {
  .stats, .specs, .leaks { grid-template-columns: 1fr; }
  .stat, .spec { border-right: 0; border-bottom: var(--ism-rule-light) solid var(--ism-border); }
  .stat:last-child, .spec:last-child { border-bottom: 0; }
  .poster, .sechead, .closer { flex-direction: column; align-items: flex-start; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn, .hero__actions .tcta { text-align: left; }
}

/* Hand-broken display lines are a desktop composition; let them reflow small. */
@media (max-width: 560px) {
  .br-desk { display: none; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .nav-toggle, .book__panel { display: none; }
  body { color: #000; }
}