/*
  DaD Digital — site styles. Plain CSS, no build step.

  Design system
  =============
  Signature: the capsule. The logo is two D's set back to back, so the enclosing
  shape is a rounded capsule — it returns as the hero ring, button radius, tags,
  chips and the record-list nodes. Nothing else in the design is round.

  Palette (named)
  - void        near-black base canvas
  - slate       charcoal from the logo lockup — raised surfaces
  - slate-lift  a step lighter again — cards
  - cyan        the brand cyan, straight off the mark. Accent only, never large
  - snow        primary text on dark
  - mist/haze   secondary and tertiary text

  Type
  - Source Serif 4  display: h1, h2, h3, brand, numerals
  - IBM Plex Sans   body + UI
  - IBM Plex Mono   eyebrows, stack lines, dates, facts

  The three are the same families the proposal PDF is set in, so the site and
  the document sent alongside it read as one identity.

  The whole page is dark. There is no light theme — the brand lockup is drawn
  for a dark ground and the mark's left-hand D is white, so it disappears on a
  light one.
*/

:root {
  --void: #101214;
  --void-deep: #0b0c0e;
  --slate: #16191c;
  --slate-lift: #1c2023;
  --slate-line: #272c30;
  --slate-line-soft: #21262a;

  --cyan: #4fc5d6;
  --cyan-bright: #6fd8e6;
  --cyan-dim: rgba(79, 197, 214, 0.14);
  --cyan-glow: rgba(79, 197, 214, 0.28);

  --snow: #f2f5f6;
  --mist: #a8b3b8;
  --haze: #737f85;

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1160px;
  --pad: 28px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sticky header is 68px; keep anchored headings clear of it. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--mist);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--snow);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  font-weight: 600;
  font-optical-sizing: auto;
  /* Several headings were breaking with one orphaned word on the last line. */
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); max-width: 27ch; }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }

h1 em {
  font-style: normal;
  color: var(--cyan);
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-bright); }

strong, b { color: var(--snow); font-weight: 600; }

::selection { background: var(--cyan); color: var(--void-deep); }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--cyan);
  color: var(--void-deep);
  padding: 10px 18px;
  z-index: 100;
  font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

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

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 1.1em;
  display: flex;
  align-items: baseline;
  gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 20px;
  height: 8px;
  border-radius: 999px;
  background: var(--cyan);
  flex: none;
  /* Baseline alignment would hang the capsule below the text's baseline. */
  transform: translateY(-0.2em);
}

.lead {
  font-size: 1.12rem;
  color: var(--snow);
  line-height: 1.6;
}

.section-lead {
  max-width: 62ch;
  margin-top: -0.4em;
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.btn-primary {
  background: var(--cyan);
  color: #0c1214;
}
.btn-primary:hover {
  background: var(--cyan-bright);
  color: #0c1214;
  transform: translateY(-2px);
}

.btn-quiet {
  border-color: var(--slate-line);
  color: var(--snow);
  background: transparent;
}
.btn-quiet:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-2px);
}

.link-out {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--cyan-dim);
  padding-bottom: 2px;
}
.link-out:hover { border-bottom-color: var(--cyan); }

/* ───────────────────────────── header ────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(16, 18, 20, 0.82);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--slate-line-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--snow);
}
.brand-mark { width: 38px; height: auto; }
.brand-words { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  color: var(--haze);
  letter-spacing: 0.05em;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.site-header nav a {
  font-size: 0.92rem;
  color: var(--mist);
  font-weight: 500;
}
.site-header nav a:hover { color: var(--snow); }
.site-header nav .nav-cta {
  position: relative;
  border: 1px solid var(--slate-line);
  border-radius: 999px;
  padding: 8px 18px;
  color: var(--cyan);
}
.site-header nav .nav-cta:hover {
  border-color: var(--cyan);
  background: var(--cyan-dim);
}

/* Same idea as the hero capsule: one lit segment making a lap of the outline.
   A rotating conic gradient masked down to the 1px border does it here, since
   the pill's width depends on the label rather than on a fixed viewBox. */
@property --cta-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.site-header nav .nav-cta::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  padding: 1px;
  background: conic-gradient(from var(--cta-angle),
    rgba(79, 197, 214, 0) 0deg,
    rgba(79, 197, 214, 0) 292deg,
    rgba(79, 197, 214, 0.85) 338deg,
    rgba(79, 197, 214, 0) 352deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: cta-orbit 9s linear infinite;
  pointer-events: none;
}
@keyframes cta-orbit { to { --cta-angle: 360deg; } }

/* ────────────────────────────── hero ─────────────────────────────── */

.hero {
  position: relative;
  padding: clamp(56px, 9vw, 108px) 0 clamp(36px, 4vw, 52px);
  overflow: hidden;
}

/* A single soft cyan bloom behind the hero art, nothing more. */
.hero::before {
  content: "";
  position: absolute;
  top: -12%;
  right: -6%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, var(--cyan-glow) 0%, transparent 62%);
  opacity: 0.5;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero-text .lead { margin-top: 1.2em; }
.hero-text > p:not(.eyebrow):not(.hero-actions) { max-width: 56ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2em;
}

.hero-art { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.capsule {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.capsule-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.capsule-ring rect { fill: none; stroke-width: 1.5; }
.ring-track { stroke: var(--slate-line); }
.ring-dash {
  stroke: var(--cyan);
  stroke-linecap: round;
  /* One short lit segment travelling a 1280-unit perimeter: a health check
     making its lap. dashoffset animates so the segment moves, not the shape. */
  stroke-dasharray: 60 1220;
  animation: orbit 9s linear infinite;
}
@keyframes orbit { to { stroke-dashoffset: -1280; } }

.capsule-mark {
  position: relative;
  width: 62%;
  filter: drop-shadow(0 0 34px rgba(79, 197, 214, 0.24));
}

.hero-strip {
  list-style: none;
  margin: clamp(40px, 6vw, 68px) 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--slate-line-soft);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.hero-strip li {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--haze);
  line-height: 1.5;
}
.hero-strip b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--snow);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}

/* ──────────────────────────── sections ───────────────────────────── */

.section { padding: clamp(64px, 8vw, 110px) 0; }
.section-alt {
  background: var(--slate);
  border-top: 1px solid var(--slate-line-soft);
  border-bottom: 1px solid var(--slate-line-soft);
}

/* ──────────────────────────── services ───────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.card {
  background: var(--slate-lift);
  border: 1px solid var(--slate-line);
  border-radius: 18px;
  padding: 30px 28px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: #34464b; transform: translateY(-3px); }
.card h3 { color: var(--snow); }
.card p { font-size: 0.97rem; }

/* Five cards over three columns with the lead spanning two fills exactly: one
   row of lead + cloud, one row of three. Six cards stranded the last one on a
   row of its own, and giving the lead a 2x2 block instead just moved the empty
   space inside the card. */
.card-lead {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(150deg, rgba(79, 197, 214, 0.09), transparent 55%),
    var(--slate-lift);
  border-color: rgba(79, 197, 214, 0.32);
}
.card-lead h3 { font-size: 1.42rem; }
.card-lead p { font-size: 1.03rem; max-width: 58ch; }

.ticks {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 26px;
}
.ticks li {
  position: relative;
  padding-left: 24px;
  font-size: 0.93rem;
  line-height: 1.5;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 13px;
  height: 5px;
  border-radius: 999px;
  background: var(--cyan);
}

.stack {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--haze);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--slate-line-soft);
}

/* Bottom-pinned closing note on the lead card — it is what keeps the taller
   2x2 cell from ending in dead space. */
.card-note {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--slate-line-soft);
  font-size: 0.93rem;
  color: var(--mist);
  max-width: 62ch;
}

/* ─────────────────────────── the thesis ──────────────────────────── */

/* Editorial rather than banded: hairline rules and a narrow measure set this
   apart from the sections either side without another background colour. */
.statement {
  padding: clamp(56px, 7vw, 92px) 0;
}
.statement-inner {
  max-width: 860px;
}
.statement-inner > .eyebrow,
.statement h2 {
  padding-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--slate-line);
}
.statement h2 {
  padding-top: 0;
  border-top: 0;
  max-width: 18ch;
  margin-bottom: 1.1em;
}
.statement-body {
  columns: 2;
  column-gap: 48px;
}
.statement-body p {
  font-size: 0.99rem;
  margin: 0 0 1.15em;
  break-inside: avoid;
}
.statement-close {
  margin-top: clamp(28px, 3vw, 40px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--slate-line);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--snow);
}

/* ──────────────────────────── approach ───────────────────────────── */

.tenets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 56px;
  margin-top: 46px;
}
.tenet { position: relative; padding-top: 26px; border-top: 1px solid var(--slate-line); }
.tenet-num {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--cyan);
  letter-spacing: 0.14em;
  display: block;
  margin-bottom: 12px;
}
.tenet h3 { font-size: 1.22rem; max-width: 34ch; }
.tenet p { font-size: 0.97rem; max-width: 54ch; }

/* ───────────────────────────── record ────────────────────────────── */

.record {
  list-style: none;
  counter-reset: none;
  margin: 46px 0 0;
  padding: 0 0 0 30px;
  border-left: 1px solid var(--slate-line);
}
.record li {
  position: relative;
  padding: 0 0 40px;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  column-gap: 34px;
}
.record li:last-child { padding-bottom: 0; }
/* Capsule node straddling the rail. */
.record li::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 10px;
  width: 13px;
  height: 6px;
  border-radius: 999px;
  background: var(--cyan);
}
.record-when {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--haze);
  margin: 0;
  padding-top: 0.35em;
  line-height: 1.65;
}
.record h3 {
  grid-column: 2;
  font-size: 1.28rem;
  margin-bottom: 0.45em;
}
.record li > p:not(.record-when) {
  grid-column: 2;
  max-width: 78ch;
  font-size: 0.99rem;
}

/* ───────────────────────────── about ─────────────────────────────── */

.about-inner {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.about-portrait img {
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--slate-line);
  filter: saturate(0.92);
}
.about-portrait .caption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--haze);
  letter-spacing: 0.05em;
  margin-top: 12px;
}

.about-text > p:not(.eyebrow) { max-width: 62ch; }

.facts {
  list-style: none;
  margin: 30px 0;
  padding: 0;
  border-top: 1px solid var(--slate-line);
}
.facts li {
  border-bottom: 1px solid var(--slate-line);
  padding: 13px 0;
  font-size: 0.93rem;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px;
}
.facts b {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 500;
  padding-top: 4px;
}

/* ─────────────────────────── engagement ──────────────────────────── */

.modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.mode {
  border: 1px solid var(--slate-line);
  border-radius: 18px;
  padding: 28px 26px;
  background: var(--slate);
}
.mode h3 { font-size: 1.15rem; }
.mode p { font-size: 0.95rem; margin: 0; }

.modes-note {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--haze);
  line-height: 1.7;
}

/* ──────────────────────────── contact ────────────────────────────── */

.section-contact {
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(79, 197, 214, 0.09), transparent 70%),
    var(--slate);
  border-top: 1px solid var(--slate-line-soft);
}

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.contact-text > p:not(.eyebrow) { max-width: 46ch; }
.contact-fine {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--haze);
  line-height: 1.7;
  margin-top: 26px;
}

.contact-form-wrap {
  background: var(--slate-lift);
  border: 1px solid var(--slate-line);
  border-radius: 20px;
  padding: 32px 30px;
}

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mist);
  margin-bottom: 8px;
}
.field input,
.field textarea {
  width: 100%;
  background: var(--void);
  border: 1px solid var(--slate-line);
  border-radius: 12px;
  color: var(--snow);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: var(--void-deep);
}
.field input.invalid,
.field textarea.invalid { border-color: #d4726a; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-errors {
  border: 1px solid rgba(212, 114, 106, 0.5);
  background: rgba(212, 114, 106, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 0.9rem;
  color: #edb9b3;
}
.form-errors ul { margin: 0; padding-left: 18px; }

#submit-btn[disabled] { opacity: 0.55; cursor: progress; transform: none; }

.form-status {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--haze);
  margin: 14px 0 0;
  min-height: 1.2em;
}

.form-done { text-align: center; padding: 26px 8px; }
.form-done-tick {
  font-size: 2rem;
  color: var(--cyan);
  margin: 0 0 10px;
  line-height: 1;
}
.form-done p:last-child { color: var(--haze); font-size: 0.94rem; }

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

.site-footer {
  background: var(--void-deep);
  border-top: 1px solid var(--slate-line-soft);
  padding: 42px 0 36px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 40px;
}
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand .brand-mark { width: 34px; }
.footer-name {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--snow);
  margin: 0;
  line-height: 1.3;
}
.footer-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--haze);
  margin: 0;
  letter-spacing: 0.03em;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-nav a { font-size: 0.87rem; color: var(--mist); }
.footer-nav a:hover { color: var(--cyan); }
.copyright {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--haze);
  margin: 0;
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid var(--slate-line-soft);
  letter-spacing: 0.03em;
}

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

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease var(--d, 0ms), transform 0.6s ease var(--d, 0ms);
}
.reveal.shown { opacity: 1; transform: none; }
/* If JS never runs, nothing should stay invisible. */
.no-js .reveal { opacity: 1; transform: none; }

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

@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .capsule { width: min(100%, 320px); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card-lead { grid-column: span 2; }
  .hero-strip { grid-template-columns: repeat(3, 1fr); gap: 22px 20px; }
  .contact-inner { grid-template-columns: 1fr; }
  .modes { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .statement-body { columns: 1; }
  .site-header nav { gap: 16px; }
  .site-header nav a:not(.nav-cta) { display: none; }
  .about-inner { grid-template-columns: 1fr; }
  .about-portrait { max-width: 280px; }
  .tenets { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 680px) {
  :root { --pad: 20px; }

  /* The header already carries the mark; repeating it at hero size just pushes
     the actual message below the fold. */
  .hero-art { display: none; }
  .hero { padding-top: 40px; }

  /* Two lines of strapline plus a wrapping CTA made a three-line header. */
  .brand-sub { display: none; }
  .site-header nav .nav-cta { white-space: nowrap; padding: 7px 15px; font-size: 0.85rem; }
  .header-inner { gap: 12px; }
  .record li { grid-template-columns: 1fr; }
  .record-when { grid-row: auto; margin-bottom: 8px; padding-top: 0; }
  .record h3, .record li > p:not(.record-when) { grid-column: 1; }
  body { font-size: 16px; }
  .cards { grid-template-columns: 1fr; }
  .card-lead { grid-column: span 1; }
  .ticks { grid-template-columns: 1fr; }
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
  .facts li { grid-template-columns: 1fr; gap: 4px; }
  .contact-form-wrap { padding: 26px 20px; }
  h2 { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .hero-art, .contact-form-wrap, .skip { display: none; }
  body { background: #fff; color: #222; }
  h1, h2, h3, strong, b { color: #000; }
  .section, .hero { padding: 18px 0; }
  .reveal { opacity: 1; transform: none; }
}