/*
 * TechAPTO site styles (P1-2). Components from docs/design.md §6, mobile
 * first, breakpoints 768 / 1024 / 1280. Every colour, size and duration
 * comes from tokens.css. Markup for each component is shown in the dev
 * styleguide (php tools/styleguide.php), which P1-5 templates follow.
 *
 * Sections:  1 Base  2 Layout  3 Type  4 Header  5 Buttons and links
 *            6 Hero, ticker, proof  7 Cards  8 Lists  9 Bands and CTA
 *            10 Forms  11 Footer  12 Pages  13 Motion  14 Utilities
 */

/* =====================================================================
   1 Base
   ===================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-chip);
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* =====================================================================
   2 Layout
   ===================================================================== */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
/* Two plain sections in a row share one gap; after the dark band the gap returns */
.section--flush-top { padding-top: 0; }
.band + .section--flush-top { padding-top: var(--section-y); }

/* Section head: eyebrow left (4 cols), heading right (8 cols) from 1024px */
.section-head {
  display: grid;
  gap: var(--s-3) var(--grid-gap);
  margin-bottom: var(--s-7);
}
@media (min-width: 1024px) {
  .section-head { grid-template-columns: 4fr 8fr; align-items: baseline; }
  /* A heading on its own sits in the heading column; an eyebrow on its own stays left */
  .section-head > :only-child:not(.eyebrow) { grid-column: 2; }
}

.grid { display: grid; gap: var(--grid-gap); }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.stack > * + * { margin-top: var(--s-4); }
.stack--lg > * + * { margin-top: var(--s-6); }

/* =====================================================================
   3 Type
   ===================================================================== */

.display, .h2, .h3, .figure {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  font-weight: var(--w-serif-light);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  max-width: var(--measure-head);
}
.display--home { max-width: var(--measure-head-home); }

.h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-serif-light);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-h2);
  max-width: var(--measure-head);
}

.h3 {
  font-size: var(--t-h3);
  font-weight: var(--w-serif);
  line-height: var(--lh-h3);
  letter-spacing: var(--track-h3);
}

.figure {
  font-size: var(--t-figure);
  font-weight: var(--w-serif-light);
  line-height: var(--lh-figure);
  letter-spacing: var(--track-display);
}

.lede {
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  color: var(--ink-2);
  max-width: var(--measure);
}

.small { font-size: var(--t-small); line-height: var(--lh-small); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  line-height: var(--lh-small);
}

.prose { max-width: var(--measure); color: var(--ink-2); }
.prose > * + * { margin-top: var(--s-4); }
.prose strong { color: var(--ink); font-weight: var(--w-semibold); }
.prose ul:not([class]) { padding-left: 1.2em; }
.prose li + li { margin-top: var(--s-2); }

/* =====================================================================
   4 Header
   ===================================================================== */

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-2);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--ink);
  color: var(--ground);
  border-radius: var(--r-button);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--ground); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
}

.site-header__brand { color: var(--ink); text-decoration: none; display: inline-flex; padding-block: var(--s-2); }
.site-header__brand:hover { color: var(--ink); }

.wordmark__svg { height: var(--wordmark-h, 22px); width: auto; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: var(--s-5); }
.nav__link {
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  text-decoration: none;
  padding-block: var(--s-2);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--accent); }
.nav__link[aria-current="page"] { text-decoration: underline; }

.site-header__actions { display: flex; align-items: center; gap: var(--s-4); }

/* Small screens: a <details> menu, so it works with JavaScript off */
.menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding-inline: var(--s-4);
  border: var(--border);
  border-radius: var(--r-button);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: fixed;
  inset: var(--header-h) 0 0;
  background: var(--ground);
  padding: var(--s-6) var(--gutter);
  overflow-y: auto;
  border-top: var(--border);
}
.menu__list > li { border-bottom: var(--border); }
.menu__link {
  display: block;
  padding-block: var(--s-4);
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  text-decoration: none;
}

@media (min-width: 1024px) {
  .nav { display: block; }
  .menu { display: none; }
}

/* =====================================================================
   5 Buttons and links
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--control-h);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4);
  border: 1px solid var(--ink);
  border-radius: var(--r-button);
  background: var(--ink);
  color: var(--ground);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  line-height: 1.2;
  text-decoration: none;
}
.btn:hover { color: var(--ground); }

.btn__chip {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--chip-size);
  height: var(--chip-size);
  border-radius: var(--r-chip);
  background: var(--accent);
  color: var(--accent-ink);
}
.btn__chip svg { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__chip svg { transform: translateX(2px); }

/* A button without a chip pads evenly */
.btn:not(:has(.btn__chip)) { padding-inline: var(--s-5); }

.btn--secondary { background: transparent; color: var(--ink); }
.btn--secondary:hover { color: var(--accent); border-color: var(--accent); }

.band .btn, .site-footer .btn { background: var(--band-ink); border-color: var(--band-ink); color: var(--band); }
.site-footer .btn:hover { color: var(--band); text-decoration: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: var(--w-medium);
  text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover::after { transform: translateX(2px); }

/* =====================================================================
   6 Hero, ticker, proof strip
   ===================================================================== */

.hero {
  position: relative;
  padding-top: clamp(48px, 9vw, 120px);
  padding-bottom: var(--s-7);
  overflow: hidden;
}
/* Faint vertical grid lines: the only background motif (design.md §5) */
.hero__lines {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.hero__lines > span { border-left: var(--border); position: relative; overflow: hidden; }
.hero__lines > span:last-child { border-right: var(--border); }

/* Moving grid (D-021): cobalt signals travel down the grid lines. Runs only
   when reveal.js adds html.motion-on (never with JS off or reduced motion). */
.motion-on .hero__lines > span::before {
  content: "";
  position: absolute;
  left: -1px;
  top: calc(-1 * var(--signal-len));
  width: 1px;
  height: var(--signal-len);
  background: var(--accent);
  animation: signal var(--signal-loop) linear infinite;
}
.motion-on .hero__lines > span:nth-child(2)::before { animation-delay: -4.2s; }
.motion-on .hero__lines > span:nth-child(3)::before { animation-delay: -1.4s; }
.motion-on .hero__lines > span:nth-child(4)::before { animation-delay: -5.6s; }
.motion-on .hero__lines > span:nth-child(5)::before { animation-delay: -2.8s; }
.motion-on .hero__lines > span:nth-child(6)::before { animation-delay: -0.7s; }
@keyframes signal { to { top: 100%; } }

/* Hero video (D-024): black-and-white video behind the headline. The
   poster always shows; reveal.js fades the video in. */
.hero--media { padding-top: 0; }
.hero__stage {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: clamp(480px, 78vh, 760px);
  background: var(--band);
  color: var(--band-ink);
}
.hero__media, .hero__stage::after { position: absolute; inset: 0; }
.hero__stage::after { content: ""; background: var(--scrim); }
.hero__poster, .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.hero__video { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out); }
.hero__video.is-playing { opacity: 1; }
.hero__stage .hero__body { z-index: 1; padding-block: var(--s-9) var(--s-8); }
.hero__stage .lede { color: var(--band-ink); }
.hero__stage .btn { background: var(--band-ink); border-color: var(--band-ink); color: var(--band); }
.hero__stage .btn:hover { color: var(--band); }
.hero__body { position: relative; }
.hero__body > * + * { margin-top: var(--s-5); }
.hero__body .btn { margin-top: var(--s-6); }

.ticker {
  position: relative;
  overflow: hidden;
  border-block: var(--border);
  padding-block: var(--s-3);
  margin-top: var(--s-7);
}
/* Static by default: one set of names. With motion on, the second set
   joins and the track scrolls (QA F4). */
.ticker__track {
  display: flex;
  width: max-content;
  gap: var(--s-6);
  padding-inline: var(--gutter);
}
.ticker__group { display: flex; gap: var(--s-6); }
.ticker__group + .ticker__group { display: none; }
.motion-on .ticker__track { padding-inline: 0; animation: ticker var(--ticker-loop) linear infinite; }
.motion-on .ticker__group + .ticker__group { display: flex; }

/* Pause control for all looping motion (WCAG 2.2.2); shown by reveal.js */
/* Pause control for all looping motion (WCAG 2.2.2; D-025): a small round
   icon button, shown by reveal.js only when motion is on. */
.motion-toggle {
  display: inline-grid;
  place-items: center;
  width: var(--chip-size);
  height: var(--chip-size);
  margin-top: var(--s-3);
  padding: 0;
  border: var(--border);
  border-radius: 50%;
  background: var(--ground);
  color: var(--ink-2);
}
.motion-toggle:hover { color: var(--ink); border-color: var(--ink); }
.motion-toggle:focus-visible { border-radius: 50%; }
.motion-toggle[hidden] { display: none; } /* QA N1: the display rule above must not beat [hidden] */
.motion-toggle::before { content: ""; width: 6px; height: 10px; border-inline: 2px solid currentColor; }
.motion-toggle[aria-pressed="true"]::before { width: 0; height: 0; border-inline: 0; border-left: 9px solid currentColor; border-block: 5px solid transparent; margin-left: 3px; }
.hero__stage .motion-toggle {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: var(--s-5);
  margin: 0;
  background: var(--scrim);
  border: var(--border-band);
  color: var(--band-ink);
}
.hero__stage .motion-toggle:hover { border-color: var(--band-ink); color: var(--band-ink); }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.ticker__item { white-space: nowrap; }
.ticker__item + .ticker__item::before { content: "·"; margin-right: var(--s-6); color: var(--line); }
@keyframes ticker { to { transform: translateX(-50%); } }

.proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}
@media (min-width: 1024px) { .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.proof__tile {
  background: var(--surface);
  border-radius: var(--r-tile);
  padding: var(--s-5) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* =====================================================================
   7 Cards
   ===================================================================== */

.cards {
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-card);
  padding: var(--s-6);
  min-width: 0;
}
.card--flagship { grid-column: 1 / -1; padding: clamp(24px, 4vw, 48px); }
.card--flagship .h3 { font-size: var(--t-h2); font-weight: var(--w-serif-light); line-height: var(--lh-h2); }
.card__sub { font-family: var(--font-mono); font-size: var(--t-small); color: var(--muted); }
.card__body { color: var(--ink-2); max-width: var(--measure); }
.card__foot { margin-top: auto; padding-top: var(--s-3); }

/* Whole-card link: the title link stretches over the card */
.card__link { text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:has(.card__link):hover { border-color: var(--ink); }
.card:has(.card__link:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.card__link:focus-visible { outline: none; }

/* Project card (on the band or on the page) */
.project-card__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-tile);
  overflow: hidden;
  background: var(--line);
}
.project-card__media img { width: 100%; height: 100%; object-fit: cover; }
.band .card { background: var(--band-surface); color: var(--band-ink); }
.band .project-card__media { background: var(--band-line); }
.band .card__body { color: var(--band-muted); }
.band .card:has(.card__link):hover { border-color: var(--band-ink); }
.band .card__link:hover { color: var(--band-ink); }

/* Status badge: the label carries the meaning; the dot only echoes it */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  padding: var(--s-1) var(--s-3);
  border: var(--border);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
}
.badge--live::before { background: var(--accent); border-color: var(--accent); }
.badge--dev::before { border-color: var(--accent); }
.band .badge { border: var(--border-band); color: var(--band-ink); }
.band .badge::before { border-color: var(--band-muted); }
.band .badge--live::before { background: var(--accent); border-color: var(--accent); }
.band .badge--dev::before { border-color: var(--accent); }

/* Numbered steps */
.steps { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.step {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.step__text { color: var(--ink-2); }

/* =====================================================================
   8 Lists
   ===================================================================== */

/* Ruled list: track record, recognition, enterprise record */
.ruled { border-bottom: var(--border); }
.ruled > li {
  border-top: var(--border);
  padding-block: var(--s-4);
  display: grid;
  gap: var(--s-1) var(--grid-gap);
}
@media (min-width: 768px) {
  .ruled--meta > li { grid-template-columns: 8rem 1fr; }
}
.ruled__meta { font-family: var(--font-mono); font-size: var(--t-small); color: var(--muted); }
.ruled__lead { font-family: var(--font-serif); font-size: var(--t-h3); line-height: var(--lh-h3); }
.band .ruled, .band .ruled > li { border-color: var(--band-line); }

.sub-list { margin-top: var(--s-7); }
.sub-list__label { margin-bottom: var(--s-4); }

/* Bulleted list in body copy */
.bullets { max-width: var(--measure); }
.bullets > li { position: relative; padding-left: var(--s-5); color: var(--ink-2); }
.bullets > li + li { margin-top: var(--s-3); }
.bullets > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--ink);
}

/* Definition list: company details */
.details { display: grid; gap: var(--s-3) var(--grid-gap); }
@media (min-width: 768px) { .details { grid-template-columns: 14rem 1fr; } }
.details dt { color: var(--muted); font-size: var(--t-small); }

/* =====================================================================
   9 Bands and CTA
   ===================================================================== */

.band {
  background: var(--band);
  color: var(--band-ink);
}
.band .eyebrow { color: var(--band-muted); }
.band a:hover { color: var(--band-ink); }

.cta {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: clamp(32px, 6vw, 80px);
  display: grid;
  gap: var(--s-5);
  justify-items: start;
}
.cta__body { color: var(--ink-2); max-width: var(--measure); }

/* Reveal text: words fill from --reveal to --ink (JS adds .is-dim, P1-5) */
.reveal-text {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  font-weight: var(--w-serif-light);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-h2);
  max-width: 28ch;
}
.reveal-text .is-dim { color: var(--reveal); transition: color var(--dur-reveal) var(--ease-out); }

/* =====================================================================
   10 Forms
   ===================================================================== */

.form { display: grid; gap: var(--s-5); max-width: 40rem; }
.field { display: grid; gap: var(--s-2); }
.field__label { font-weight: var(--w-medium); font-size: var(--t-small); }
.field__hint { color: var(--muted); font-size: var(--t-small); }
.field__input {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--r-button);
}
textarea.field__input { min-height: 10rem; resize: vertical; }
.field__input:focus-visible { outline: var(--focus-ring); outline-offset: 0; border-color: var(--accent); }
.field__input[aria-invalid="true"] { border-color: var(--ink); }
.field__error { font-size: var(--t-small); color: var(--ink); }
.field__error::before { content: "⚠ "; }
.field__error:empty { display: none; }

.check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-small); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }

.form__status {
  border-radius: var(--r-tile);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
}
.form__status:empty { padding: 0; } /* stays in the DOM so screen readers announce changes */
.honeypot { display: none; }
.form-success { max-width: 40rem; }
.form-success > * + * { margin-top: var(--s-4); }
.form-success:focus { outline: none; }
.h-captcha { min-height: 78px; }

/* =====================================================================
   11 Footer (D-022): call to action, link columns, full-width wordmark
   ===================================================================== */

.site-footer {
  background: var(--band);
  color: var(--band-ink);
  padding-block: var(--section-y) var(--s-5);
  overflow: hidden;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--band-ink); text-decoration: underline; }

.site-footer__cta {
  display: grid;
  gap: var(--s-5);
  justify-items: start;
  padding-bottom: var(--s-8);
  border-bottom: var(--border-band);
}
@media (min-width: 1024px) {
  .site-footer__cta { grid-template-columns: 8fr 4fr; align-items: end; }
  .site-footer__cta .btn { justify-self: end; }
}
.site-footer__cta .h2 { max-width: 18ch; }

.site-footer__cols {
  display: grid;
  gap: var(--s-7) var(--grid-gap);
  padding-block: var(--s-7);
}
@media (min-width: 1024px) { .site-footer__cols { grid-template-columns: 4fr 8fr; } }
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--grid-gap);
}
@media (min-width: 768px) { .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer__label { margin-bottom: var(--s-4); color: var(--band-muted); } /* QA N2: 7.85:1 on the band */
.site-footer__list { list-style: none; padding: 0; margin: 0; }
.site-footer__list > li + li { margin-top: var(--s-2); }
.site-footer__list a { color: var(--band-ink); font-size: var(--t-small); }

/* Brand column: header-size wordmark and the mission line (D-026) */
.site-footer__brand { display: inline-flex; color: var(--band-ink); }
.site-footer__brand:hover { color: var(--band-ink); }
.site-footer__tagline { margin-top: var(--s-4); max-width: 34ch; color: var(--band-muted); font-size: var(--t-small); }

/* Analytics opt-out (D-030): a quiet text button in the bottom line */
.site-footer__optout {
  padding: 0;
  border: 0;
  background: none;
  color: var(--band-muted);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.site-footer__optout:hover { color: var(--band-ink); }

.site-footer__legal {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: var(--border-band);
  color: var(--band-muted);
  font-size: var(--t-small);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
}

/* =====================================================================
   12 Pages
   ===================================================================== */

.page-header { padding-top: clamp(48px, 8vw, 104px); padding-bottom: var(--s-7); }
.page-header > * + * { margin-top: var(--s-5); }

/* Services page: one section per service, flagship first and largest */
.service { border-top: var(--border); padding-block: var(--s-7); display: grid; gap: var(--s-4) var(--grid-gap); }
@media (min-width: 1024px) { .service { grid-template-columns: 5fr 7fr; } }
.service__text > * + * { margin-top: var(--s-4); }
.service--flagship { background: var(--surface); border: 0; border-radius: var(--r-card); padding: clamp(24px, 5vw, 64px); }
.service--flagship .h3 { font-size: var(--t-h2); font-weight: var(--w-serif-light); line-height: var(--lh-h2); }

/* Case study */
.case-head { padding-top: clamp(48px, 8vw, 104px); padding-bottom: var(--s-7); display: grid; gap: var(--s-5); justify-items: start; }
.case-section { border-top: var(--border); padding-block: var(--s-7); display: grid; gap: var(--s-4) var(--grid-gap); }
@media (min-width: 1024px) { .case-section { grid-template-columns: 4fr 8fr; } }
.case-next { border-top: var(--border); padding-block: var(--s-7); }

/* Message pages (404, thanks) */
.message { padding-block: clamp(64px, 14vw, 160px); display: grid; gap: var(--s-5); justify-items: start; }

/* =====================================================================
   13 Motion (design.md §8). reveal.js marks only blocks that start below
   the fold as .is-pending, so nothing on screen at load is ever hidden,
   and with JS off or reduced motion everything is visible and still.
   ===================================================================== */

[data-reveal] {
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
[data-reveal].is-pending { opacity: 0; transform: translateY(var(--rise)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  [data-reveal].is-pending { opacity: 1; transform: none; }
  .reveal-text .is-dim { color: inherit; }
}

/* =====================================================================
   14 Utilities
   ===================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.muted { color: var(--muted); }
.mt-0 { margin-top: 0 !important; }