/* ============================================================
   Maison Forme — D3 Editorial master v2
   Implements DESIGN-SYSTEM.md as a contract. No deviations.
   ============================================================ */

/* ---------- §1 Fonts (self-hosted woff2, no CDN) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-full-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- §5 Color tokens (exactly 5) + §3 spacing scale ---------- */
:root {
  --paper:   #F2EFE8;
  --ink:     #17150F;
  --ink-2:   #6B6558;
  --accent:  #B4402A;
  --paper-2: #E8E3D7;

  --s1: .25rem; --s2: .5rem; --s3: 1rem; --s4: 1.5rem;
  --s5: 2.5rem; --s6: 4rem;  --s7: 6.5rem; --s8: 10.5rem; --s9: 17rem;

  --gutter: 1.5rem;
  --margin: 2.5rem;
  --maxw: 90rem;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;    /* body token */
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--paper); }

/* ---------- Accessibility: skip link + focus-visible (round-4) ---------- */
/* skip-to-content: visually hidden until keyboard-focused, then a mounted
   terracotta chip top-left. Matches the print-chrome vocabulary, not a
   default blue browser box. */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  transform: translateY(-120%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: .6875rem;
  letter-spacing: .16em;
  font-weight: 550;
  text-transform: uppercase;
  padding: var(--s3) var(--s4);
  text-decoration: none;
  transition: transform 160ms ease-out;
}
.skip-link:focus { transform: translateY(0); }

/* One deliberate, elegant focus ring on EVERY interactive element — 2px ink,
   offset. Keyboard-only (:focus-visible) so mouse clicks stay clean. The
   underline-draw / row-background hovers remain as extra affordance. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* on the dark footer the ink ring would vanish — use paper there */
.site-footer :focus-visible,
.mobile-menu :focus-visible {
  outline-color: var(--paper);
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ---------- §2 Type scale — the gap is the design ---------- */
.display-1 {
  font-family: var(--serif);
  font-size: clamp(4.25rem, 11vw, 10.5rem);
  line-height: .94;
  letter-spacing: -.02em;
  font-weight: 420;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
}
.display-2 {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  font-weight: 420;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
}
.title {
  font-family: var(--serif);
  /* round-2: raised from 2.25rem — 36px sat in the middle band the refs kill;
     48px desktop restores the XXL/XXS gap */
  font-size: clamp(2.375rem, 3.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  font-weight: 420;
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 0;
}
.lede {
  font-family: var(--sans);
  /* round-3: stepped down 1.375→1.25rem + line-height 1.45→1.55 to widen the
     display:deck contrast toward the refs' ratio (Instrument Sans stays plumbing) */
  font-size: 1.25rem;
  line-height: 1.55;
  letter-spacing: 0;
  font-weight: 400;
  max-width: 30em;
}
.small {
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: .01em;
}
.mono-meta {
  font-family: var(--mono);
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: .05em;
  font-weight: 400;
}
.label-caps {
  font-family: var(--sans);
  font-size: .6875rem;
  line-height: 1.1;
  letter-spacing: .16em;
  font-weight: 550;
  text-transform: uppercase;
}
/* mono eyebrow (Cryox lesson): mono face at label-caps scale */
.eyebrow {
  font-family: var(--mono);
  font-size: .6875rem;
  line-height: 1.1;
  letter-spacing: .16em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* narrow phones: relax tracking so eyebrows keep one line (no ragged 2-line caps) */
@media (max-width: 30rem) {
  .eyebrow { letter-spacing: .08em; }
}
p { max-width: 34em; } /* body measure cap */

/* keyword underline — 2px accent (one per page) */
.kw {
  font-style: inherit;
  border-bottom: 2px solid var(--accent);
}
/* at display line-height 1.02 the 2px rule hits the next line's ascenders on
   small screens — thin to 1px below 48rem (system amendment, round 1) */
@media (max-width: 47.9375rem) {
  .display-1 .kw, .display-2 .kw { border-bottom-width: 1px; }
}

/* ---------- §4 Grid ---------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}
/* canonical splits: 7/5, 8/4, 5/7 — plus row-internal placements */
.c1-5  { grid-column: 1 / 6; }
.c1-7  { grid-column: 1 / 8; }
.c1-8  { grid-column: 1 / 9; }
.c1-9  { grid-column: 1 / 10; }
.c1-12 { grid-column: 1 / 13; }
.c6-12 { grid-column: 6 / 13; }
.c6-11 { grid-column: 6 / 12; }
.c6-9  { grid-column: 6 / 10; }
.c8-12 { grid-column: 8 / 13; }
.c9-12 { grid-column: 9 / 13; }
.c10-12 { grid-column: 10 / 13; }

@media (max-width: 47.9375rem) {
  .wrap { padding-inline: 1rem; }
  .grid > * { grid-column: 1 / 13; }
}

/* one-side bleed to the viewport edge (never both sides except Home hero) */
.bleed-right { margin-right: calc(50% - 50vw); }
.bleed-left  { margin-left:  calc(50% - 50vw); }
.bleed-both  { margin-inline: calc(50% - 50vw); } /* Home hero only */

/* ---------- §3 Section rhythm + print vocabulary ---------- */
.section { padding-block: var(--s6); }
@media (min-width: 48rem) { .section { padding-block: var(--s7); } }
@media (min-width: 80rem) { .section { padding-block: var(--s8); } }

/* 1px rule + mono section number above every section */
.section-rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--ink);
  padding-top: var(--s2);
  margin-bottom: var(--s6);
}
.section-rule .num { color: var(--ink-2); }

.band { background: var(--paper-2); } /* alternate section band */

/* round-3: a section that closes on a mono footnote row doesn't need the full
   deep-breath below — halve its bottom padding so the next rule follows closer */
.section-tight-btm { padding-bottom: var(--s6); }
@media (min-width: 80rem) { .section-tight-btm { padding-bottom: var(--s7); } }

/* ---------- §5 Photo treatment: warm desaturation + grain ---------- */
.media {
  position: relative;
  overflow: hidden;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.63) sepia(.08) contrast(1.02);
}
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: .035;
  pointer-events: none;
}

/* framed image — 14px paper margin, "mounted print" */
.frame {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 14px;
}
.frame figcaption,
.caption {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s2);
  color: var(--ink-2);
}
.frame figcaption { padding-top: calc(var(--s2) + 2px); }
.ratio-43 .media { aspect-ratio: 4 / 3; }

/* ---------- §6 Nav: corners-only chrome ---------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid var(--ink);
}
.site-nav.scrolled { background: var(--paper); }
.site-nav .nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 4rem;
}
.wordmark {
  font-family: var(--serif);
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  text-decoration: none;
}
.nav-links {
  display: flex;
  gap: var(--s5);
  align-items: baseline;
}
.nav-links a {
  font-family: var(--sans);
  font-size: .6875rem;
  letter-spacing: .16em;
  font-weight: 550;
  text-transform: uppercase;
  text-decoration: none;
}
.nav-book { white-space: nowrap; }
.menu-btn { display: none; }

/* underline draws left→right on hover (motion moment 3) */
.u-draw {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: left calc(100% - -0.05em);
  transition: background-size 280ms ease-out;
  padding-bottom: .15em;
}
.u-draw:hover, .u-draw:focus-visible { background-size: 100% 1px; }

/* mobile: burger → full-screen ink overlay, display-2 links */
@media (max-width: 47.9375rem) {
  .nav-links { display: none; }
  .menu-btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: .6875rem;
    letter-spacing: .16em;
    font-weight: 550;
    text-transform: uppercase;
  }
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--ink);
    color: var(--paper);
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: var(--s6) 1rem;
    gap: var(--s4);
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu a {
    font-family: var(--serif);
    font-size: clamp(2.75rem, 10vw, 5.5rem);
    line-height: 1.02;
    letter-spacing: -.015em;
    font-weight: 420;
    font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
    text-decoration: none;
  }
  .mobile-menu .close-btn {
    position: absolute;
    top: var(--s4);
    right: 1rem;
    font-family: var(--sans);
    font-size: .6875rem;
    letter-spacing: .16em;
    font-weight: 550;
    text-transform: uppercase;
    color: var(--paper);
  }
}
@media (min-width: 48rem) { .mobile-menu { display: none !important; } }

/* ---------- §6 Hero (Home) ---------- */
.hero-type {
  /* dead paper zone above display-1: ≥ s8 (nav band + s8) */
  padding-top: calc(4rem + var(--s8));
}
.hero-type .eyebrow { display: block; margin-bottom: var(--s4); }
.hero-type .lede { margin-top: var(--s5); }
.hero-cta-row { margin-top: var(--s4); }
/* interior fold CTA: sits under the page-head lede, generous top gap so the
   button reads as the fold's conversion action (round-4) */
.fold-cta-row { margin-top: var(--s5); }
/* baseline-kiss: type block sits with 0px gap on the hero image top edge */
.hero-kiss { padding-bottom: 0; }
.hero-kiss .hero-cta-row { margin-bottom: 0; }
.hero-figure { margin-top: 0; }
.hero-figure .media { aspect-ratio: 16 / 8.5; }
@media (max-width: 47.9375rem) {
  .hero-figure .media { aspect-ratio: 4 / 5; }
}

/* interior page headers (display-2, left-set, never centered) */
.page-head { padding-top: calc(4rem + var(--s8)); padding-bottom: var(--s6); }
.page-head .eyebrow { display: block; margin-bottom: var(--s4); }
.page-head .lede { margin-top: var(--s5); }
/* interior rhythm: the deep breath belongs to the fold above — the first
   section after a page-head sits closer (s6 top, not s8) */
.page-head + .section { padding-top: var(--s6); }
/* contact opens on the form: the form sits in the fold beside the heading.
   the head's own bottom padding carries the rhythm — the following band starts
   right after, no repeated hero skeleton, no dead gap (round-3). */
.contact-head .contact-form { align-self: start; }
@media (max-width: 47.9375rem) {
  .contact-head .contact-form { margin-top: var(--s5); }
  /* atelier band: sub-blocks stack full-width on mobile — give them air */
  .atelier-col { margin-top: var(--s5); }
}
/* fold figure: framed image in the page-head right rail (services/contact) —
   bottom-aligned to the type block, hidden on mobile */
.page-head .fold-figure { align-self: end; }
@media (max-width: 47.9375rem) { .page-head .fold-figure { display: none; } }

/* hero display lines rise + fade on load (motion moment 1)
   round-2: base state is SOLID; the hidden start lives only inside the
   keyframe (fill-mode: backwards). If animations don't run — print,
   screenshot tools, old engines — the headline renders solid, never blank. */
.rise .hl {
  display: block;
  animation: rise 360ms ease-out backwards;
}
.rise .hl:nth-child(1) { animation-delay: 0ms; }
.rise .hl:nth-child(2) { animation-delay: 80ms; }
.rise .hl:nth-child(3) { animation-delay: 160ms; }
.rise .hl:nth-child(4) { animation-delay: 240ms; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
/* mobile: hand-set line breaks are desktop-only — heading wraps naturally,
   whole block rises once (kills 390px orphans: "with a" / "room," / "Rousse") */
@media (max-width: 47.9375rem) {
  .rise { animation: rise 360ms ease-out backwards; }
  .rise .hl { display: inline; animation: none; }
}
@media print {
  .rise, .rise .hl { animation: none; }
}

/* images settle scale(1.04)→1 on first scroll-in (motion moment 2) */
.settle img { transform: scale(1.04); transition: transform 400ms ease-out; }
.settle.in img { transform: scale(1); }

/* ---------- §6 Service row (NOT a card) ---------- */
.service-rows { border-bottom: 1px solid var(--ink); }
.service-row {
  border-top: 1px solid var(--ink);
  padding-block: var(--s5);
  text-decoration: none;
  align-items: baseline;
  position: relative;
  transition: background-color 240ms ease-out;
}
.service-row .num { grid-column: 1 / 2; color: var(--ink-2); }
.service-row .sr-title { grid-column: 2 / 8; }
.service-row .sr-body { grid-column: 8 / 12; color: var(--ink-2); max-width: none; }
.service-row .sr-arrow {
  grid-column: 12 / 13;
  justify-self: end;
  font-family: var(--mono);
  opacity: 0;
  transition: opacity 240ms ease-out;
}
.service-row:hover, .service-row:focus-visible { background: var(--paper-2); }
.service-row:hover .sr-arrow, .service-row:focus-visible .sr-arrow { opacity: 1; }
@media (max-width: 47.9375rem) {
  .service-row .num,
  .service-row .sr-title,
  .service-row .sr-body,
  .service-row .sr-arrow { grid-column: 1 / 13; }
  .service-row .sr-title { margin-top: var(--s2); }
  .service-row .sr-body { margin-top: var(--s2); }
  .service-row .sr-arrow { display: none; }
}

/* round-3: the prices intro column is shorter than the 5-row table beside it —
   push a mono note to the column's baseline so the void below the intro is
   anchored (print vocabulary, not empty paper). Kicks in only where the column
   has room to stretch (desktop grid). */
@media (min-width: 48rem) {
  .price-intro { display: flex; flex-direction: column; height: 100%; }
  .price-intro .price-note { margin-top: auto; padding-top: var(--s6); border-top: 1px solid var(--ink); }
}
.price-intro .price-note { display: block; }
@media (max-width: 47.9375rem) {
  .price-intro .price-note { margin-top: var(--s4); }
}

/* ---------- §6 Price row: table-as-typography ---------- */
.price-table { border-bottom: 1px solid var(--ink); }
.price-row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  border-top: 1px solid var(--ink);
  padding-block: var(--s4);
}
.price-row .p-name { flex: 0 1 auto; min-width: 0; } /* round-2: may wrap, never overflows */
.price-row .p-leader {
  flex: 1;
  border-bottom: 1px dotted var(--ink-2);
  transform: translateY(-.35em);
  min-width: var(--s5);
}
.price-row .p-price { flex: none; }
/* round-2: at 390px one-line leader rows pushed scrollWidth to 504px —
   below 48rem the name takes its own line, leader + price sit beneath */
@media (max-width: 47.9375rem) {
  .price-row { flex-wrap: wrap; row-gap: var(--s2); }
  .price-row .p-name { flex: 1 1 100%; }
}

/* ---------- §6 Blog card ---------- */
.post-card { align-items: start; row-gap: var(--s4); }
.post-card + .post-card { margin-top: var(--s7); }
.post-card .pc-meta { display: block; margin-bottom: var(--s3); color: var(--ink-2); }
.post-card .pc-title { text-decoration: none; display: inline; }
.post-card .pc-excerpt { margin-top: var(--s3); color: var(--ink-2); }
.post-card .pc-more { display: inline-block; margin-top: var(--s4); }

/* ---------- §6 Pull-quote (the one allowed centered block) ---------- */
.pull-quote {
  text-align: center;
  max-width: 16em;
  margin-inline: auto;
  position: relative;
  font-style: italic;
}
.pull-quote .q-mark {
  color: var(--accent);
  position: absolute;
  left: -.45em;
  top: -.02em;
  font-style: normal;
}
/* pages already at the 3-accent cap (a prominent CTA takes an accent slot) drop
   the decorative quote-mark to ink so the terracotta budget holds — round-4 */
.pull-quote .q-mark.q-mark-ink { color: var(--ink); }
.pull-quote-wrap { padding-inline: var(--s5); }
.pull-quote-attr {
  text-align: center;
  margin-top: var(--s4);
  color: var(--ink-2);
}

/* ---------- §6 Forms ---------- */
.field { margin-bottom: var(--s4); }
.field label { display: block; margin-bottom: var(--s2); }
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--paper-2);
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: var(--s3);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink);
  appearance: none;
}
.field ::placeholder {
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .05em;
  color: var(--ink-2);
  opacity: 1;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom: 1px solid var(--ink);
  box-shadow: 0 1px 0 0 var(--ink); /* border thickens to 2px ink, not accent */
}
/* keyboard focus: add the deliberate ring back on top of the thickened border
   (mouse focus keeps the clean box-shadow only) — declared after :focus so it wins */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.field textarea { min-height: 8rem; resize: vertical; }
.form-note { margin-top: var(--s3); color: var(--ink-2); }

/* ---------- §6 Buttons: exactly two kinds ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 44px; /* WCAG 2.5.5 target size */
  background: var(--accent);
  color: var(--paper);
  font-family: var(--sans);
  font-size: .6875rem;
  line-height: 1.1;
  letter-spacing: .16em;
  font-weight: 550;
  text-transform: uppercase;
  padding: var(--s3) var(--s4);
  border-radius: 0;
  border: 0;
  text-decoration: none;
}
.btn-primary:hover { background: var(--ink); }
/* hero/fold primary CTA: same treatment, sized generously so it reads as the
   conversion action, not an editorial aside (round-4 CTA-prominence rule) */
.btn-primary.btn-lg {
  font-size: .8125rem;
  letter-spacing: .14em;
  padding: var(--s4) var(--s5);
  min-height: 52px;
}
.btn-primary .btn-arr { font-family: var(--mono); font-weight: 400; }
.link-arrow { white-space: nowrap; }
.link-arrow .arr { font-family: var(--mono); }

/* ---------- §6 Footer: the one dark zone ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s7) var(--s5);
  margin-top: var(--s7);
}
.site-footer .signoff { max-width: 12em; }
.footer-cols {
  margin-top: var(--s7);
  row-gap: var(--s5);
}
.footer-cols .fc { grid-column: span 3; }
@media (max-width: 47.9375rem) {
  .footer-cols .fc { grid-column: span 6; }
}
.footer-cols .fc-head { display: block; margin-bottom: var(--s3); color: var(--paper); opacity: .55; }
.footer-cols a { display: block; text-decoration: none; margin-bottom: var(--s2); }
.footer-cols p { margin-bottom: var(--s2); }
.footer-legal {
  margin-top: var(--s6);
  border-top: 1px solid var(--paper);
  padding-top: var(--s3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3);
  opacity: .7;
}
.footer-legal a { text-decoration: underline; }

/* ---------- Article (blog post) ---------- */
.article-body > * + * { margin-top: var(--s4); }
.article-body h2 { margin-top: var(--s6); }
.article-figure { margin-block: var(--s6); }

/* about: display type overlaps the image by 2 columns (one use, this page) */
.overlap-up { margin-top: calc(-1 * var(--s6)); position: relative; }
.overlap-title { position: relative; z-index: 2; }
@media (max-width: 47.9375rem) { .overlap-up { margin-top: 0; } }

/* utility spacing (scale values only) */
.mt-s3 { margin-top: var(--s3); }
.mt-s4 { margin-top: var(--s4); }
.mt-s5 { margin-top: var(--s5); }
.mt-s6 { margin-top: var(--s6); }
.mb-s4 { margin-bottom: var(--s4); }
.mb-s5 { margin-bottom: var(--s5); }
.mb-s6 { margin-bottom: var(--s6); }
.muted { color: var(--ink-2); }
.plain-list { list-style: none; }
.block-label { display: block; margin-bottom: var(--s3); }

/* ---------- §7 reduced motion: all three moments off ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; }
  .rise .hl { animation: none; }
  .settle img { transform: none; transition: none; }
  .u-draw { transition: none; }
  .service-row, .service-row .sr-arrow { transition: none; }
}