/* Hallmark · shape: private proposal, measured evidence first · genre: editorial · theme: custom · job: book · idea: "your own numbers, a homepage sketched for you, and the price in plain sight" · vibe: "calm, exact, cream-and-burgundy studio letter"
 * paper: #FFF6ED · accent: #661124 · display: Fraunces · body: Inter Tight · hero: outcome headline beside the lead's concept homepage in desktop and phone frames · nav: logo and one booking action · footer: three plain lines · imagery: the lead's own screenshots and the concept built from their record · signature: four large measured values, each labelled as our lab test
 * axes: cream/serif/burgundy · posture: split · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the brief fixes eleven sections, so each one is kept to a single composition */
/* waive 63: the meta strings joined by a middle dot are fixed copy from the client brief (decision 7) */
/* waive 47a: device frames drawn in CSS are required by the client brief; kept to a plain bezel */
/* waive 58, 77: section count and copy length are set by the client brief */

/* ---------- tokens ---------- */
:root {
  --paper: #FFF6ED;
  --paper-deep: #F7EADC;
  --screen: #FFFFFF;
  --ink: #1B1416;
  --grey: #6B5D57;
  --rule: #E3D5C8;
  --accent: #661124;
  --accent-deep: #4D0C1B;
  --shade: rgb(27 20 22 / 0.28);

  /* concept homepage colours; lead.css overrides them when the lead has a brand colour */
  --c-accent: var(--accent);
  --c-on-accent: var(--paper);
  --c-accent-ink: var(--accent);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 32px);
  --measure: 62ch;
  --radius: 6px;
  --bar-h: 60px;
}

/* ---------- fonts ---------- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/fraunces-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/fraunces-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/inter-tight-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/inter-tight-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/inter-tight-latin-700-normal.woff2") format("woff2"); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: calc(var(--bar-h) + 20px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { font-family: var(--font-display); font-weight: 600; color: var(--ink); overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { font-size: clamp(2.125rem, 1.3rem + 3.3vw, 3.5rem); line-height: 1.06; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem); line-height: 1.12; letter-spacing: -0.01em; }
h3 { font-size: 1.0625rem; line-height: 1.35; font-weight: 500; }
p, li { text-wrap: pretty; }
a { color: inherit; }
[hidden] { display: none !important; }

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

.wrap { width: min(100% - 2 * var(--gutter), 1120px); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 30; padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: var(--radius); }
.skip:focus { top: 12px; }

.textlink { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.textlink:hover { text-decoration-thickness: 2px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  background: var(--accent); color: var(--paper);
  font-weight: 500; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; text-align: center;
  border-radius: var(--radius);
  transition: background-color 160ms ease, transform 160ms ease;
}
.btn:hover { background: var(--accent-deep); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-color: var(--ink); }
.btn--small { min-height: 40px; padding: 0 14px; font-size: 0.9375rem; white-space: nowrap; }
.btn--invert { background: var(--paper); color: var(--accent); }
.btn--invert:hover { background: var(--screen); }
.btn--invert:focus-visible { outline-color: var(--paper); }

/* ---------- top notice + header bar ---------- */
.notice__example { padding: 9px var(--gutter); background: var(--ink); color: var(--paper); font-size: 0.875rem; font-weight: 700; line-height: 1.4; text-align: center; }
.notice__for { padding-block: 9px; color: var(--grey); font-size: 0.875rem; line-height: 1.4; }

.bar { position: sticky; top: 0; z-index: 20; background: var(--paper); border-block: 1px solid var(--rule); }
.bar__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--bar-h); }
.bar__logo { width: auto; height: 30px; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(36px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.hero__sub { margin-top: 20px; max-width: 34em; font-size: 1.1875rem; line-height: 1.5; }
.hero .legal { margin-top: 14px; max-width: 40em; }
.hero__next { margin-top: 24px; font-weight: 500; }
.hero__visual { position: relative; padding-bottom: 9%; padding-right: 4%; }
.hero__visual .device--phone { position: absolute; right: 0; bottom: 0; width: 25%; }
.hero__visual .device--desktop figcaption { max-width: 68%; }

/* ---------- device frames (plain bezels drawn in CSS) ---------- */
.device__screen { position: relative; overflow: hidden; background: var(--screen); container-type: inline-size; }
.device--desktop .device__screen { aspect-ratio: 1440 / 900; border: 1px solid var(--ink); border-top-width: 12px; border-radius: 8px; box-shadow: 0 28px 48px -30px var(--shade); }
.device--phone .device__screen { aspect-ratio: 390 / 844; border: 5px solid var(--ink); border-radius: 22px; box-shadow: 0 24px 40px -24px var(--shade); }
figcaption { margin-top: 12px; color: var(--grey); font-size: 0.875rem; line-height: 1.45; }

/* ---------- sections ---------- */
.section { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--rule); }
.lede { margin-top: 16px; max-width: var(--measure); overflow-wrap: anywhere; }
.legal { margin-top: 12px; color: var(--grey); font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; }
.legal a { color: var(--accent); text-underline-offset: 0.18em; }
.terms { margin-top: 16px; max-width: var(--measure); font-weight: 500; }

/* ---------- measured: tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; margin-top: 40px; }
.tile { padding-top: 14px; border-top: 2px solid var(--accent); }
.tile__value { margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: clamp(3.25rem, 2rem + 5.2vw, 5rem); line-height: 1; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: lining-nums; }
.tile__mean { margin-top: 10px; font-size: 0.9375rem; line-height: 1.45; }
.tile__meta { margin-top: 10px; color: var(--grey); font-size: 0.8125rem; line-height: 1.4; }

/* ---------- measured: annotated screenshot ---------- */
.shot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 64px; }
.shot__device { width: min(100%, 260px); margin-inline: auto; }
.shot__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.callout {
  position: absolute; display: grid; place-items: center;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  background: var(--accent); color: var(--paper);
  border: 2px solid var(--paper); border-radius: 50%;
  font-size: 0.875rem; font-weight: 700; line-height: 1;
}
.shot__notes h3 { font-weight: 700; }
.shot__notes h3 + * { margin-top: 14px; }
.shot__notes h3:not(:first-child) { margin-top: 32px; }
.callout-list { counter-reset: callout; display: grid; gap: 12px; max-width: var(--measure); }
.callout-list li { counter-increment: callout; position: relative; padding-left: 42px; min-height: 30px; }
.callout-list li::before {
  content: counter(callout); position: absolute; left: 0; top: -1px;
  display: grid; place-items: center; width: 30px; height: 30px;
  background: var(--accent); color: var(--paper); border-radius: 50%;
  font-size: 0.875rem; font-weight: 700; line-height: 1;
}
.plain-list { display: grid; gap: 8px; max-width: var(--measure); }
.plain-list li { padding-left: 18px; position: relative; }
.plain-list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: var(--ink); }
.footnote { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); max-width: var(--measure); color: var(--grey); font-size: 0.875rem; line-height: 1.5; }

/* ---------- before / after ---------- */
.concept-note { margin-top: 12px; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.1875rem; color: var(--accent); }
.ba { margin-top: 36px; }
.ba__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.ba__pane { width: min(100%, 280px); margin-inline: auto; }
.ba__pane picture, .ba__concept { display: block; overflow: hidden; background: var(--screen); border: 5px solid var(--ink); border-radius: 22px; }
.ba__pane img { width: 100%; }
.ba__concept { aspect-ratio: 390 / 844; container-type: inline-size; }
.ba__concept--desktop { display: none; }
.ba__control { display: none; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 40px; }
.card { padding-top: 20px; border-top: 1px solid var(--ink); }
.card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.2; }
.card h3 + p { margin-top: 12px; }

/* ---------- recent work ---------- */
.work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.facts { display: grid; gap: 0; margin-top: 28px; }
.facts li { padding-block: 14px; border-top: 1px solid var(--rule); }
.work__note { padding-block: 14px; border-block: 1px solid var(--rule); }
.work__anon { margin-top: 14px; color: var(--grey); font-size: 0.875rem; }
.work__shots { display: grid; gap: 24px; align-content: start; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pair img { width: 100%; border: 1px solid var(--rule); border-radius: var(--radius); }
.pair figcaption { margin-top: 8px; }
.pair--phone { width: min(100%, 420px); }

/* ---------- how it works ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; }
.steps li { counter-increment: step; padding-top: 16px; border-top: 1px solid var(--ink); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-display); font-weight: 600; font-size: 2rem; line-height: 1; color: var(--accent); }
.steps h3 { margin-top: 14px; font-weight: 700; font-size: 1.125rem; }
.steps p { margin-top: 6px; }
.steps + .terms { margin-top: 36px; }
.motion { width: 100%; margin-top: 40px; border-radius: var(--radius); }
.video { margin-top: 32px; }
.video video { width: 100%; background: var(--ink); border-radius: var(--radius); }

/* ---------- price ---------- */
.price, .faq, .who { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.price__lead { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 1.2rem + 3.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--accent); text-wrap: balance; }
.price__more { margin-top: 28px; }
.price__more li { padding-block: 14px; border-top: 1px solid var(--rule); font-size: 1.125rem; }
.price__more li:last-child { border-bottom: 1px solid var(--rule); }
.price__more + .terms { margin-top: 24px; }
.price .terms + .terms { margin-top: 6px; font-weight: 400; }

/* ---------- FAQ ---------- */
.faq__list { border-top: 1px solid var(--ink); }
details { border-bottom: 1px solid var(--rule); }
summary { position: relative; display: block; padding: 18px 44px 18px 0; font-weight: 500; font-size: 1.125rem; line-height: 1.35; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before, summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 2px; margin-top: -1px; background: var(--accent); transition: transform 200ms ease; }
summary::after { transform: rotate(90deg); }
details[open] summary::after { transform: rotate(0deg); }
summary:hover { color: var(--accent); }
details p { padding: 0 44px 20px 0; max-width: var(--measure); }

/* ---------- who ---------- */
.who__card { display: flex; align-items: center; gap: 20px; }
.who__photo { flex: none; width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--rule); border-radius: 50%; }
.who__line { max-width: 28em; font-size: 1.1875rem; line-height: 1.45; }

/* ---------- final call to action ---------- */
.cta { padding-block: clamp(64px, 9vw, 112px); background: var(--accent); color: var(--paper); }
.cta h2 { color: var(--paper); font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem); }
.cta__text { margin-block: 20px 32px; max-width: 36em; font-size: 1.1875rem; line-height: 1.5; }
.cta__alt { margin-top: 20px; }
.cta__alt + .cta__alt { margin-top: 6px; }
.cta__alt a { text-underline-offset: 0.18em; }
.cta a:not(.btn):focus-visible { outline-color: var(--paper); }

/* ---------- footer ---------- */
.foot { padding-block: 32px 40px; color: var(--grey); font-size: 0.875rem; line-height: 1.5; }
.foot p + p { margin-top: 4px; }
.foot__name { color: var(--ink); font-weight: 700; }

/* ---------- concept homepage (their future site), drawn to scale inside a frame.
   --u is one design pixel: the frame width divided by 1440 (desktop) or 390 (phone). ---------- */
.concept {
  --u: calc(100cqw / 1440);
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--screen); color: var(--ink);
  font-family: var(--font-body); font-size: calc(16 * var(--u)); line-height: 1.45; text-align: left;
}
.concept p { margin: 0; text-wrap: wrap; }
.c-nav { flex: none; display: flex; align-items: center; gap: calc(36 * var(--u)); min-height: calc(92 * var(--u)); padding: calc(12 * var(--u)) calc(64 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--rule); }
.c-wordmark { margin-right: auto; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: calc(26 * var(--u)); line-height: 1.15; color: var(--c-accent-ink); }
.c-logo { width: auto; height: calc(52 * var(--u)); margin-right: auto; }
.c-links { display: flex; gap: calc(30 * var(--u)); font-weight: 500; white-space: nowrap; }
.c-pill { flex: none; padding: calc(13 * var(--u)) calc(24 * var(--u)); background: var(--c-accent); color: var(--c-on-accent); border-radius: calc(6 * var(--u)); font-weight: 500; white-space: nowrap; }
.c-hero { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; gap: calc(56 * var(--u)); padding: calc(40 * var(--u)) calc(64 * var(--u)); overflow: hidden; }
.c-hero__text { flex: 1 1 0; min-width: 0; }
.c-kicker { font-weight: 500; font-size: calc(19 * var(--u)); color: var(--c-accent-ink); }
.c-kicker + .c-headline { margin-top: calc(18 * var(--u)); }
.c-headline { max-width: calc(1040 * var(--u)); font-family: var(--font-display); font-weight: 600; font-size: calc(58 * var(--u)); line-height: 1.08; letter-spacing: -0.015em; }
.c-hero--photo .c-headline { font-size: calc(46 * var(--u)); }
.c-sub { margin-top: calc(20 * var(--u)); max-width: calc(760 * var(--u)); font-size: calc(22 * var(--u)); color: var(--grey); }
.concept .c-sub { margin-top: calc(20 * var(--u)); }
.c-photo { position: relative; flex: 0 0 38%; }
.c-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(10 * var(--u)); }
.c-sample { position: absolute; left: calc(12 * var(--u)); bottom: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); background: var(--screen); color: var(--ink); font-size: calc(13 * var(--u)); }
.c-bands { flex: none; display: flex; gap: calc(24 * var(--u)); padding: 0 calc(64 * var(--u)) calc(40 * var(--u)); }
.c-bands:empty { display: none; }
.c-band { flex: 1 1 0; min-width: 0; padding: calc(28 * var(--u)) calc(32 * var(--u)); background: var(--paper-deep); border-radius: calc(10 * var(--u)); }
.c-band--accent { background: var(--c-accent); color: var(--c-on-accent); }
.c-band__title { font-weight: 500; font-size: calc(16 * var(--u)); }
.c-band__big { font-family: var(--font-display); font-weight: 600; font-size: calc(34 * var(--u)); line-height: 1.15; }
.concept .c-band__big { margin-block: calc(8 * var(--u)); }
.c-band__note { font-size: calc(15 * var(--u)); }
.c-lock { margin-left: calc(8 * var(--u)); padding: calc(2 * var(--u)) calc(9 * var(--u)); border: calc(1 * var(--u)) solid currentColor; border-radius: calc(4 * var(--u)); font-size: calc(13 * var(--u)); white-space: nowrap; }
.c-records { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 calc(20 * var(--u)); margin-top: calc(10 * var(--u)); }
.c-records span { padding-block: calc(7 * var(--u)); border-bottom: calc(1 * var(--u)) solid var(--rule); }
.c-foot { flex: none; display: flex; justify-content: space-between; gap: calc(24 * var(--u)); padding: calc(18 * var(--u)) calc(64 * var(--u)); background: var(--ink); color: var(--paper); font-size: calc(14 * var(--u)); }

.concept--phone { --u: calc(100cqw / 390); font-size: calc(15 * var(--u)); }
.concept--phone .c-nav { gap: calc(12 * var(--u)); min-height: calc(64 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)); }
.concept--phone .c-wordmark { font-size: calc(16 * var(--u)); }
.concept--phone .c-logo { height: calc(36 * var(--u)); }
.concept--phone .c-links { display: none; }
.concept--phone .c-pill { padding: calc(9 * var(--u)) calc(12 * var(--u)); font-size: calc(13 * var(--u)); }
.concept--phone .c-hero { display: block; padding: calc(28 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); }
.concept--phone .c-kicker { font-size: calc(14 * var(--u)); }
.concept--phone .c-kicker + .c-headline { margin-top: calc(10 * var(--u)); }
.concept--phone .c-headline, .concept--phone .c-hero--photo .c-headline { font-size: calc(29 * var(--u)); line-height: 1.12; }
.concept--phone .c-sub { margin-top: calc(12 * var(--u)); font-size: calc(16 * var(--u)); }
.concept--phone .c-photo { margin-top: calc(18 * var(--u)); }
.concept--phone .c-bands { flex-direction: column; gap: calc(12 * var(--u)); padding: 0 calc(20 * var(--u)) calc(20 * var(--u)); }
.concept--phone .c-band { flex: none; padding: calc(16 * var(--u)) calc(18 * var(--u)); }
.concept--phone .c-band__title { font-size: calc(13 * var(--u)); }
.concept--phone .c-band__big { font-size: calc(23 * var(--u)); margin-block: calc(4 * var(--u)); }
.concept--phone .c-band__note { font-size: calc(13 * var(--u)); }
.concept--phone .c-records { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: calc(13 * var(--u)); }
.concept--phone .c-records span { padding-block: calc(4 * var(--u)); }
.concept--phone .c-foot { flex-direction: column; gap: calc(2 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); font-size: calc(12 * var(--u)); }

/* ---------- reveal on scroll (app.js adds .reveal-wait only to blocks below the first screen) ---------- */
.reveal-wait { opacity: 0; transform: translateY(12px); }
.reveal-in { opacity: 1; transform: none; transition: opacity 240ms ease, transform 240ms ease; }

/* ---------- small phones ---------- */
@media (max-width: 359px) {
  .bar__logo { height: 26px; }
  .btn--small { padding: 0 11px; font-size: 0.875rem; }
  .tiles { gap: 28px 14px; }
}

/* ---------- wide screens ---------- */
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .shot { grid-template-columns: 260px minmax(0, 1fr); gap: 72px; align-items: start; }
  .shot__device { margin-inline: 0; }

  /* without JavaScript: the two homepages sit side by side */
  .ba__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .ba__pane { width: auto; margin: 0; }
  .ba__pane picture, .ba__concept { border-width: 1px; border-top-width: 12px; border-radius: 8px; }
  .ba__pane picture { aspect-ratio: 1440 / 900; }
  .ba__pane img { height: 100%; object-fit: cover; object-position: top; }
  .ba__concept--phone { display: none; }
  .ba__concept--desktop { display: block; aspect-ratio: 1440 / 900; }

  /* with JavaScript: one frame with a draggable divider and a range control */
  .ba.is-slider .ba__stage { position: relative; display: block; aspect-ratio: 1440 / 900; overflow: hidden; border: 1px solid var(--ink); border-top-width: 12px; border-radius: 8px; background: var(--screen); touch-action: pan-y; cursor: ew-resize; box-shadow: 0 28px 48px -30px var(--shade); }
  .ba.is-slider .ba__pane { position: absolute; inset: 0; }
  .ba.is-slider .ba__pane picture, .ba.is-slider .ba__concept { width: 100%; height: 100%; border: 0; border-radius: 0; aspect-ratio: auto; }
  .ba.is-slider .ba__pane--after { clip-path: inset(0 0 0 var(--pos, 50%)); }
  .ba.is-slider .ba__stage::after { content: ""; position: absolute; inset-block: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px; background: var(--accent); pointer-events: none; }
  .ba.is-slider figcaption { position: absolute; bottom: 16px; margin: 0; padding: 6px 12px; background: var(--ink); color: var(--paper); border-radius: var(--radius); pointer-events: none; }
  .ba.is-slider .ba__pane--before figcaption { left: 16px; }
  .ba.is-slider .ba__pane--after figcaption { right: 16px; }
  .ba.is-slider .ba__control { display: block; margin-top: 20px; }
  .ba__control label { display: block; color: var(--grey); font-size: 0.875rem; }
  .ba__control input { display: block; width: 100%; height: 32px; margin: 6px 0 0; accent-color: var(--accent); cursor: ew-resize; }

  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .work { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .price, .faq, .who { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
}

/* ---------- reduced motion: everything still ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, summary::before, summary::after, .reveal-in { transition: none; }
  .btn:active { transform: none; }
  .reveal-wait { opacity: 1; transform: none; }
}

@media print {
  .bar { position: static; }
  .reveal-wait { opacity: 1; transform: none; }
}