/* =============================================================
   MORCANO — dark-first editorial visual system
   Near-black charcoal base, cool pale inversions for rhythm, one
   cool silver/platinum accent. No warm tones anywhere.
   Display: Bodoni Moda (heavier cut). Body: Inter. Breakpoint 768.
   ============================================================= */

/* ---------- cool-neutral ramp ----------
   One hue family end to end (blue channel >= red at every step, so
   nothing reads warm). The light end carries the accent on dark
   sections; the dark end carries it on inverted sections. */
:root {
  --silver-100: #E8E9EB;  /* brightest — filled buttons on dark      */
  --silver-300: #C7C9CE;  /* the accent — labels, hairlines, hovers  */
  --silver-500: #9BA0A8;  /* body grey on dark — 7.35:1 on base      */
  --silver-700: #5A5E66;  /* accent on light sections — 5.75:1       */
  --silver-750: #50545C;  /* body grey on light — 6.5:1              */

  --charcoal:   #0D0E10;  /* the base                                */
  --charcoal-raised: #14161A;
  --charcoal-deep:   #08090B;
  --near-white: #F2F3F5;
  --pale:       #F1F1EF;  /* the inverted base — cool, no warm tint  */

  /* ---------- semantic layer ----------
     Components read only these. A section flips its whole subtree by
     redeclaring them; nothing needs a per-component override. */
  --surface:      var(--charcoal);
  --ink:          var(--near-white);
  --ink-soft:     var(--silver-500);
  --accent:       var(--silver-300);
  --rule:         rgba(199, 201, 206, 0.16);
  --rule-strong:  rgba(199, 201, 206, 0.34);
  --ph-fill:      #16181C;
  --btn-fill:     var(--silver-100);
  --btn-fill-ink: var(--charcoal);

  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 34rem;
  --section-y: clamp(5rem, 12vw, 9.5rem);
  --header-h: 4.5rem;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, figure, figcaption, dl, dd, ul, ol, li, details, summary { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg { display: block; max-width: 100%; }

body {
  background: var(--charcoal);
  color: var(--near-white);
  font-family: var(--font-body);
  /* 400 not 300: light-on-dark text blooms optically, and a 300 weight
     goes spindly against near-black. */
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

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

/* ---------- utilities ---------- */
.container {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 52rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--gutter); top: 0;
  transform: translateY(-150%);
  z-index: 200;
  background: var(--silver-100); color: var(--charcoal);
  padding: 0.75rem 1.25rem;
  font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- glass ----------
   Restrained, monochrome, and only ever used on something that sits
   over imagery: the fixed nav, and (when real photos land) a card on
   top of a photo. The fill alone clears AA without the blur, so the
   blur is pure finish — browsers without backdrop-filter lose nothing
   but the softness. */
.glass {
  background: rgba(13, 14, 16, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(199, 201, 206, 0.14);
}

/* ---------- type ---------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}

.h-display {
  font-family: var(--font-display);
  /* 600, not 400: a Didone's hairlines thin out badly in light-on-dark,
     and the optical-size axis makes it worse as the type grows —
     pinning opsz keeps the thin strokes from disappearing at display
     sizes. */
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(2.5rem, 1.55rem + 4.3vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ink);
}
.h-display--sm { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); }

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}

/* ---------- buttons ----------
   Token-driven, so the same markup inverts correctly on a light
   section with no modifier class. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 1rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.btn {
  display: inline-block;
  padding: 1rem 2.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  transition: background-color 0.35s ease, color 0.35s ease,
              border-color 0.35s ease;
}
.btn--primary {
  background: var(--btn-fill);
  color: var(--btn-fill-ink);
  border-color: var(--btn-fill);
}
.btn--primary:hover { background: #FFFFFF; border-color: #FFFFFF; }
.section--light .btn--primary:hover { background: #000000; border-color: #000000; }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--outline:hover { border-color: var(--ink); background: var(--ink); color: var(--surface); }

/* =============================================================
   HEADER — fixed, glass, floating over the hero image
   ============================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid rgba(199, 201, 206, 0.10);
  background: rgba(13, 14, 16, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
/* settles once you leave the hero — the same glass, just denser */
.site-header.is-scrolled {
  background: rgba(13, 14, 16, 0.88);
  border-bottom-color: rgba(199, 201, 206, 0.16);
}

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

.site-header__mark { font-size: 0.9375rem; letter-spacing: 0.3em; color: var(--near-white); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-nav a {
  text-decoration: none;
  padding-block: 0.5rem;
  color: var(--silver-500);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.site-nav a:hover { color: var(--near-white); }
.site-nav__cta { color: var(--near-white); border-bottom: 1px solid var(--silver-300); }

.site-nav a:not(.site-nav__cta) { display: none; }
@media (min-width: 768px) {
  .site-nav a:not(.site-nav__cta) { display: inline-block; }
}

/* =============================================================
   HERO — full viewport, swappable background image
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;   /* mobile: copy sits at the bottom */
  isolation: isolate;
  overflow: hidden;
  background: var(--charcoal-deep);
}
.hero__media { position: absolute; inset: 0; z-index: -1; }

/* Labelled placeholder sits behind the photo, so the hero still reads as
   finished if the image is absent (the img hides itself on error).
   Scoped through .hero__media so it outranks the generic `.ph` rule
   further down the sheet, which would otherwise win on source order and
   collapse this to its content height. */
.hero__media .ph {
  position: absolute;
  inset: 0;
  border: 0;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the frame is composed with the subject right of centre, leaving the
     left clear for the text column */
  object-position: 68% 50%;
}

/* Scrim: behind the TEXT COLUMN only. It falls to fully transparent
   well before the right of the frame, so the photograph itself is
   never washed — and it is a soft ramp, not a flat block. */
.hero__scrim {
  position: absolute;
  inset: 0;
  /* Portrait: the copy sits at the bottom edge, and the cover-crop puts
     the brightest part of the subject directly behind the headline — so
     this ramp carries more weight than the landscape one, while still
     clearing the top third of the frame entirely. */
  background: linear-gradient(
    to top,
    rgba(13,14,16,0.97) 0%,
    rgba(13,14,16,0.94) 30%,
    rgba(13,14,16,0.80) 50%,
    rgba(13,14,16,0.38) 70%,
    rgba(13,14,16,0.00) 88%
  );
}
.hero__inner {
  width: 100%;
  padding-block: calc(var(--header-h) + 2rem) clamp(3rem, 8vh, 5.5rem);
}
.hero__copy { max-width: 34rem; }

/* The side-by-side treatment — copy left, subject right, scrim only
   behind the text — needs a LANDSCAPE frame. On a portrait viewport the
   cover-crop zooms in until the empty left of the photograph is gone,
   and a left-hand scrim then has nothing to sit on: text lands on the
   hand itself and drops below AA. Portrait keeps the bottom-anchored
   treatment above, where the scrim rises from the edge instead. */
@media (min-width: 768px) and (min-aspect-ratio: 1 / 1) {
  .hero { align-items: center; }
  .hero__copy { max-width: min(46%, 38rem); }
  .hero__scrim {
    background: linear-gradient(
      to right,
      rgba(13,14,16,0.95) 0%,
      rgba(13,14,16,0.90) 24%,
      rgba(13,14,16,0.62) 42%,
      rgba(13,14,16,0.20) 56%,
      rgba(13,14,16,0.00) 68%
    );
  }
}

.hero__h {
  font-size: clamp(2.75rem, 1.7rem + 4.9vw, 5.5rem);
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}
.hero__sub {
  color: var(--silver-500);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  max-width: 30rem;
}

/* =============================================================
   MEDIA PLACEHOLDERS
   ============================================================= */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  background: var(--ph-fill);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  overflow: hidden;
}
.ph--4x5  { aspect-ratio: 4 / 5; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--1x1  { aspect-ratio: 1 / 1; }

.ph__label {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.7;
  padding-inline: 1.25rem;
}
.ph__icon { width: 2.25rem; height: 2.25rem; opacity: 0.7; }

.media { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================
   SECTIONS — the deliberate dark / light sequence
   D D L D D D L D D L D
   ============================================================= */
.section {
  padding-block: var(--section-y);
  background: var(--surface);
  color: var(--ink);
}
.section--raised { --surface: var(--charcoal-raised); --ph-fill: #1B1E23; }
.section--deep   { --surface: var(--charcoal-deep);   --ph-fill: #101215; }

/* The inversion. Redeclaring the semantic tokens retints the whole
   subtree — headings, labels, rules, placeholders and buttons — with
   no per-component overrides. */
.section--light {
  --surface: var(--pale);
  --ink: var(--charcoal);
  --ink-soft: var(--silver-750);
  --accent: var(--silver-700);
  --rule: rgba(13, 14, 16, 0.16);
  --rule-strong: rgba(13, 14, 16, 0.38);
  --ph-fill: #E6E6E4;   /* same cast as --pale, one step down */
  --btn-fill: var(--charcoal);
  --btn-fill-ink: var(--pale);
}

[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

.section__head { margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.section__lede {
  max-width: var(--measure);
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--ink-soft);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}
.section__foot { margin-top: clamp(2.5rem, 6vw, 4rem); display: flex; justify-content: center; }

/* =============================================================
   2 — HOW IT WORKS
   ============================================================= */
.flow {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  text-align: center;
}
@media (min-width: 768px) {
  .flow { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 1.25rem; }
}
.flow__step {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.flow__arrow { color: var(--accent); font-size: 1.125rem; }

/* =============================================================
   3 — THE EDITOR  (light)
   Reads as a tool: numbered parameters, then the guarantee.
   ============================================================= */
.decisions { display: grid; gap: clamp(2.5rem, 6vw, 3rem); }
@media (min-width: 768px) {
  .decisions { grid-template-columns: repeat(3, 1fr); gap: clamp(2.5rem, 5vw, 3.5rem); }
}
.decision { border-top: 1px solid var(--rule-strong); padding-top: 1.5rem; }
.decision__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.decision__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  margin-top: 0.5rem;
}
.decision__text { margin-top: 0.75rem; color: var(--ink-soft); max-width: 26rem; }

.editor-caption {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 1.75rem;
  align-items: start;
}
.editor-caption p { max-width: var(--measure); color: var(--ink-soft); }
@media (min-width: 768px) {
  .editor-caption { grid-template-columns: 1fr auto; }
}

/* =============================================================
   4 — PRINT IT LOCALLY
   ============================================================= */
.print-grid { display: grid; gap: clamp(2.5rem, 6vw, 3rem); }
@media (min-width: 768px) {
  .print-grid { grid-template-columns: 1.1fr 0.9fr; gap: clamp(3rem, 6vw, 5rem); align-items: start; }
}
.facts { border-top: 1px solid var(--rule); }
.facts__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
.facts__row dt { color: var(--ink-soft); }
.facts__row dd { color: var(--ink); }

/* =============================================================
   5 — MODELS  (deepest black — the ring showcase)
   Large slots, wide gutters, minimal chrome so the white pieces
   carry the section.
   ============================================================= */
.models-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (min-width: 1280px) {
  .models-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================
   6 — WHAT'S INCLUDED
   ============================================================= */
.specs { border-top: 1px solid var(--rule); }
.spec { padding-block: clamp(1.5rem, 3vw, 2rem); border-bottom: 1px solid var(--rule); }
.spec__term {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: 1.1875rem;
}
.spec__desc { margin-top: 0.5rem; color: var(--ink-soft); max-width: var(--measure); }
@media (min-width: 768px) {
  .spec { display: grid; grid-template-columns: 14rem 1fr; gap: 2rem; align-items: baseline; }
  .spec__desc { margin-top: 0; }
}

/* =============================================================
   7 — LICENCES  (light)
   ============================================================= */
.tiers { display: grid; gap: clamp(2.5rem, 6vw, 3rem); }
@media (min-width: 768px) {
  .tiers { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
}
.tier { border-top: 1px solid var(--rule-strong); padding-top: clamp(1.25rem, 3vw, 1.75rem); }
.tier__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}
.tier__line { margin-top: 0.75rem; color: var(--ink-soft); max-width: 24rem; }
.tier__list { margin-top: 1.5rem; display: grid; gap: 0.75rem; font-size: 0.9375rem; }
.tier__list li { padding-left: 1.25rem; position: relative; }
.tier__list li::before {
  content: ""; position: absolute; left: 0; top: 0.75em;
  width: 0.5rem; height: 1px; background: var(--accent);
}
.access__note {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}

/* =============================================================
   8 — WHO'S BEHIND THIS
   ============================================================= */
.founder { display: grid; gap: clamp(2.25rem, 6vw, 4rem); }
@media (min-width: 768px) {
  .founder { grid-template-columns: 5fr 7fr; align-items: center; gap: clamp(2.5rem, 6vw, 5.5rem); }
}
.founder__body { max-width: 38rem; }
.founder__body p + p { margin-top: 1.125rem; }
.founder__body .h-display--sm { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.founder__body p { color: var(--ink-soft); }
.founder__sign {
  margin-top: 1.75rem !important;
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent) !important;
}

/* =============================================================
   9 — ROADMAP
   ============================================================= */
.roadmap { display: grid; gap: clamp(2.5rem, 6vw, 2.5rem); }
@media (min-width: 768px) {
  .roadmap { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); }
}
.roadmap__label {
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.625rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--rule);
  margin-bottom: 1.25rem;
  color: var(--ink);
}
.roadmap__label::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  border: 1px solid var(--accent); flex: none;
}
.roadmap__col--done .roadmap__label::before { background: var(--accent); }
.roadmap__col--progress .roadmap__label::before {
  background: linear-gradient(90deg, var(--accent) 50%, transparent 50%);
}
.roadmap__list { display: grid; gap: 0.875rem; color: var(--ink-soft); font-size: 0.9375rem; }

/* =============================================================
   10 — FAQ  (light)
   ============================================================= */
.faq { display: grid; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item:first-child { border-top: 1px solid var(--rule); }

.faq__q {
  cursor: pointer;
  list-style: none;
  padding-block: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: none;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex: none;
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.3s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }

.faq__a { color: var(--ink-soft); max-width: var(--measure); padding-bottom: 1.5rem; }
.js .faq__a { animation: faqIn 0.35s ease; }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* =============================================================
   11 — FINAL CALL
   ============================================================= */
.final__inner { text-align: center; }
.final .section__lede { margin-inline: auto; }
.final .actions { justify-content: center; }
.final__contacts {
  margin-top: clamp(3rem, 6vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  flex-wrap: wrap;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.final__contacts a {
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 0.25rem;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.final__contacts a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
  background: var(--charcoal-deep);
  border-top: 1px solid rgba(199, 201, 206, 0.12);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
@media (min-width: 768px) {
  .site-footer__inner { flex-direction: row; justify-content: space-between; }
}
.site-footer__mark { font-size: 1rem; letter-spacing: 0.3em; color: var(--near-white); }
.site-footer__legal {
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--silver-500);
}

/* =============================================================
   GUIDE — placeholder page chrome only
   ============================================================= */
.guide-placeholder {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--section-y);
  padding-top: calc(var(--header-h) + var(--section-y));
}
.guide-placeholder p {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver-500);
}

/* =============================================================
   SCROLL REVEAL — fades only, and only when JS is on
   ============================================================= */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

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

@media print {
  .site-header { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}