/* ==========================================================================
   styles.css — Page-level sections and one-off layouts
   Load this last. Depends on variables.css and components.css.
   ========================================================================== */


/* ==========================================================================
   1. HERO (home page)
   ========================================================================== */

/* Hero — an ink band carrying the stamp frame. Flat color, no gradients,
   no texture: the double keyline and the seated EST. 1994 do the talking. */
.hero {
  position: relative;
  background-color: var(--color-ink);
  color: var(--text-on-dark);
  overflow: hidden;
}

/* Optional photo layer. Renders darkened so the frame and headline hold.
   The stamp frame never sits directly on photography — the seated label's
   solid ink plate and the darkening keep it on a solid ground. */
.hero__media {
  position: absolute;
  inset: 0;
  background-color: var(--color-ink);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}

.hero__inner {
  position: relative;
  z-index: var(--z-raised);
  padding-block: clamp(3rem, 2.25rem + 5vw, 5.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- The stamp frame: heavy outer keyline, hairline inner ------------- */
/* Fluid: the frame tracks the viewport (via its container) instead of
   stopping at a fixed width, so it holds the same presence on a phone,
   a laptop and a big external monitor. */
.hero__stamp {
  position: relative;
  width: 100%;
  padding: clamp(2rem, 1.25rem + 4vw, 4.5rem) clamp(1.25rem, 0.75rem + 4vw, 5rem);
  padding-bottom: clamp(2.5rem, 1.75rem + 4vw, 5rem);
  border: var(--keyline-heavy) solid var(--color-paper);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__stamp::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: var(--keyline-hair) solid var(--color-paper);
  pointer-events: none;
}

/* --- The seated label: the year sits into the frame's base ------------ */
.hero__seat {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  padding: 2px var(--space-sm);
  background-color: var(--color-ink);   /* masks both keylines, like a hallmark */
  color: var(--color-brass);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-year);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Eyebrow with the single pair of brass diamonds ------------------- */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brass);
}

.hero__eyebrow::before,
.hero__eyebrow::after {
  content: "";
  width: 7px;
  height: 7px;
  background-color: var(--color-brass);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.hero__eyebrow svg { display: none; }

.hero__title {
  margin-bottom: var(--space-md);
  color: var(--color-paper);
  /* Scales harder than the default h1 so the type grows with the frame */
  font-size: clamp(2.125rem, 1.2rem + 4.2vw, 4.5rem);
}

.hero__title em {
  font-style: normal;
  color: var(--color-brass);
  display: block;            /* the slogan gets its own line */
}

.hero__lead {
  margin-bottom: var(--space-lg);
  margin-inline: auto;
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  line-height: var(--lh-normal);
  color: var(--text-on-dark-muted);
  max-width: 52ch;
}

/* Stacked buttons on phones stay a sensible width instead of full-bleed */
.hero .btn-group {
  margin-bottom: 0;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 420px;
}

@media (min-width: 480px) {
  .hero .btn-group { width: auto; max-width: none; }
}

.hero__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  margin: var(--space-lg) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}

.hero__note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-brass); }

/* Compact page hero for interior pages */
.page-hero {
  background-color: var(--color-ink);
  color: var(--text-on-dark);
  padding-block: clamp(2rem, 1.5rem + 3.5vw, 3.75rem);
  border-bottom: var(--keyline-hair) solid var(--color-brass);
}

/* Centred to match the home page hero, which is also centred. text-align on
   the container is not enough on its own: the base <p> rule caps paragraphs
   at 68ch and .page-hero__lead at 62ch, so without margin-inline:auto the
   lead centres inside its own cap rather than inside the section. */
.page-hero .container { text-align: center; }

.page-hero h1 { margin-bottom: var(--space-sm); color: var(--color-paper); }

.page-hero__lead {
  margin-bottom: 0;
  margin-inline: auto;
  max-width: 62ch;
  font-size: var(--fs-lg);
  color: var(--text-on-dark-muted);
}

.page-hero__actions {
  margin-top: var(--space-lg);
  justify-content: center;
}


/* ==========================================================================
   2. INTRO / ABOUT SUMMARY
   ========================================================================== */

.intro__meta {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
}

@media (min-width: 600px) { .intro__meta { grid-template-columns: repeat(3, 1fr); } }

.intro__meta dt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.intro__meta dd { margin: 0; font-size: var(--fs-base); color: var(--text-primary); }


/* ==========================================================================
   3. MEDIA FRAME (photo placeholders)
   ========================================================================== */

.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background-color: var(--color-fog);
  box-shadow: var(--shadow-md);
}

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

.media-frame--4x3  { aspect-ratio: 4 / 3; }
.media-frame--3x2  { aspect-ratio: 3 / 2; }
.media-frame--1x1  { aspect-ratio: 1 / 1; }
.media-frame--16x9 { aspect-ratio: 16 / 9; }

/* --- About page photo stack ----------------------------------------------
   Three frames beside the text. Left at their natural aspect ratios the
   column ran far taller than the prose it was meant to sit next to, so each
   frame is capped. The cap overrides aspect-ratio and the image is already
   object-fit:cover, so the frames crop rather than distort. */
.about-media {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

@media (min-width: 900px) {
  .about-media .media-frame { max-height: 210px; }
}

.media-frame__caption {
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background-color: var(--color-white);
  border-top: 1px solid var(--border-subtle);
}


/* ==========================================================================
   4. "WHAT TO DO AFTER AN ACCIDENT" — checklist
   ========================================================================== */

.checklist {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: check;
}

@media (min-width: 768px) { .checklist { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } }

.checklist__item {
  display: flex;
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

.section--muted .checklist__item { background-color: var(--color-white); }

.checklist__num {
  counter-increment: check;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: var(--keyline-hair) solid var(--color-ink);
  background-color: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.checklist__num::before { content: counter(check); }

.checklist__body h3 { margin-bottom: 2px; font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.checklist__body p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); max-width: none; }

.callout {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  margin-top: var(--space-lg);
  border-left: 4px solid var(--color-oxide);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent-soft);
}

.callout svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--color-accent-dark); }
.callout p { margin: 0; color: #5E2A1C; }
.callout strong { display: block; margin-bottom: 2px; }

.section--dark .callout {
  background-color: rgba(242, 237, 227, 0.07);
  border-left-color: var(--color-brass);
}

.section--dark .callout p { color: var(--text-on-dark); }
.section--dark .callout svg { color: var(--color-brass); }

/* Centered variant.
   The left bar is dropped rather than kept: a rule down one edge points the
   eye to a left margin that centered text does not have, so the two read as
   contradicting each other. Oxide keylines top and bottom carry the same
   urgency symmetrically. The measure is capped so the line does not stretch
   the full width of the wide container it sits in. */
.callout--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
  padding: var(--space-lg) var(--space-md);
  border-left: 0;
  border-top: 2px solid var(--color-oxide);
  border-bottom: 2px solid var(--color-oxide);
  border-radius: 0;
}

.callout--center p { max-width: none; }
.callout--center strong { margin-bottom: var(--space-2xs); }

/* The number gets its own line, at display size, so it is the thing you see
   when you are standing at the roadside and not reading carefully. nowrap
   because a phone number broken across two lines cannot be read back. */
.callout__phone {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--color-accent-dark);
  text-decoration: none;
}

.callout__phone:hover,
.callout__phone:focus-visible { text-decoration: underline; }

.section--dark .callout__phone { color: var(--color-brass); }

.section--dark .callout--center {
  border-left: 0;
  border-top-color: var(--color-brass);
  border-bottom-color: var(--color-brass);
}


/* ==========================================================================
   5. INSURANCE SECTION
   ========================================================================== */

.rights-list {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rights-list li {
  display: flex;
  gap: var(--space-sm);
  margin: 0;
}

.rights-list svg {
  width: 24px; height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-ink);
}

.section--dark .rights-list svg { color: var(--color-brass); }

.rights-list strong { display: block; margin-bottom: 2px; }
.rights-list p { margin: 0; color: var(--text-secondary); font-size: var(--fs-base); max-width: none; }
.section--dark .rights-list p { color: var(--text-on-dark-muted); }


/* ==========================================================================
   6. REVIEWS
   ========================================================================== */

.review-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

@media (min-width: 768px) { .review-card { padding: var(--space-lg); } }

.review-card__badge {
  align-self: flex-start;
  margin-bottom: var(--space-sm);
}

.review-card__quote {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  font-style: italic;
}

.review-card__meta {
  margin-top: auto;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.review-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
}


/* ==========================================================================
   7. LOCATION / MAP
   ========================================================================== */

.location-grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 900px) { .location-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-2xl); align-items: start; } }

/* A <dl> whose rows are wrapped in <div> — the only grouping HTML5 allows
   inside a description list. The icon lives in the <dt> alongside its label. */
.location-facts { margin: 0; }

.location-facts > div {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}

.location-facts > div:first-child { padding-top: 0; }
.location-facts > div:last-child { border-bottom: 0; }

.location-facts dt {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-3xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.location-facts dt svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-ink);
}

.location-facts dd {
  margin: 0;
  padding-left: calc(22px + var(--space-2xs));
}

.location-facts address { font-style: normal; }

.hours-table { font-size: var(--fs-base); }
.hours-table tr:not(:last-child) td { border-bottom: 1px solid var(--border-subtle); }
.hours-table td { padding: var(--space-2xs) 0; }
.hours-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hours-table tr.is-closed td { color: var(--text-muted); }

.map-embed {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background-color: var(--color-mist);
}

@media (min-width: 900px) { .map-embed { aspect-ratio: 1 / 1; } }

.map-embed iframe { width: 100%; height: 100%; }

/* Map placeholder shown until the owner pastes an embed URL */
.map-embed__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  height: 100%;
  padding: var(--space-lg);
  text-align: center;
  background-color: var(--color-fog);
  color: var(--text-muted);
}

.map-embed__fallback svg { width: 40px; height: 40px; color: var(--color-silver); }


/* ==========================================================================
   8. FINAL CTA BAND
   ========================================================================== */

.cta-band {
  position: relative;
  background-color: var(--color-ink);
  color: var(--text-on-dark);
  border-top: var(--keyline-hair) solid var(--color-brass);
  overflow: hidden;
}

.cta-band__inner {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--section-y);
  align-items: center;
}

@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1.4fr 1fr; gap: var(--space-2xl); }
}

.cta-band h2 { color: var(--color-paper); margin-bottom: var(--space-sm); }
.cta-band p { color: var(--text-on-dark-muted); margin-bottom: 0; }

.cta-band__actions { display: grid; gap: var(--space-2xs); }

@media (min-width: 480px) and (max-width: 899.98px) {
  .cta-band__actions { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   9. SERVICES PAGE
   ========================================================================== */

.service-toc {
  padding: var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--color-fog);
  margin-bottom: var(--space-xl);
}

.service-toc h2 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.service-toc ul {
  display: grid;
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px)  { .service-toc ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .service-toc ul { grid-template-columns: repeat(3, 1fr); } }

.service-toc a { font-size: var(--fs-base); font-weight: var(--fw-medium); text-decoration: none; }
.service-toc a:hover { text-decoration: underline; }

.service-block {
  padding-block: var(--space-xl);
  border-top: 1px solid var(--border-subtle);
  scroll-margin-top: calc(var(--header-height-lg) + var(--space-md));
}

.service-block:first-of-type { border-top: 0; padding-top: 0; }

.service-block__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.service-block__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
  background-color: var(--color-paper-soft);
  color: var(--color-ink);
}

.service-block__icon svg { width: 26px; height: 26px; }

.service-block__title { margin-bottom: 4px; }

.service-block__body { max-width: 68ch; }

.service-block__list { display: grid; gap: var(--space-2xs); padding-left: 0; list-style: none; }

.service-block__list li { display: flex; gap: var(--space-2xs); margin: 0; }

.service-block__list svg {
  width: 20px; height: 20px;
  flex-shrink: 0; margin-top: 3px;
  color: var(--color-ink);
}


/* ==========================================================================
   10. LONG-FORM PROSE (insurance, privacy, about)
   ========================================================================== */

.prose { max-width: 72ch; }

.prose h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  font-size: var(--fs-2xl);
  scroll-margin-top: calc(var(--header-height-lg) + var(--space-md));
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-xl);
}

.prose p, .prose li { color: var(--text-secondary); }
.prose li { margin-bottom: var(--space-2xs); }
.prose strong { color: var(--text-primary); }

.prose hr {
  height: 1px;
  border: 0;
  background-color: var(--border-subtle);
  margin-block: var(--space-xl);
}

/* A quiet aside. width:fit-content is the point: as a block it stretched the
   full container and the tint ran on for hundreds of empty pixels past the
   end of the sentence. Shrunk to its text and centred, it reads as a footnote
   rather than a banner. The left bar goes for the same reason it went on the
   centred callout -- a rule down one edge and centred text contradict. */
.prose__note {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: var(--space-2xs) var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: var(--color-fog);
  font-size: var(--fs-xs);
  text-align: center;
}

/* The base <p> rule caps paragraphs at 68ch, which would force this to wrap
   before it ran out of room. Lifting the cap lets it hold one line on desktop
   and wrap naturally on a phone, which is where it should wrap. */
.prose__note p { max-width: none; }
.prose__note p:last-child { margin-bottom: 0; }

/* Sticky in-page contents on wide screens */
.doc-layout { display: grid; gap: var(--space-xl); }

@media (min-width: 1024px) {
  .doc-layout { grid-template-columns: 240px 1fr; gap: var(--space-2xl); align-items: start; }
  .doc-toc { position: sticky; top: calc(var(--header-height-lg) + var(--space-md)); }
}

.doc-toc h2 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2xs);
}

.doc-toc ul { margin: 0; padding: 0; list-style: none; }
.doc-toc li { margin-bottom: 0; }

.doc-toc a {
  display: block;
  padding: var(--space-3xs) 0 var(--space-3xs) var(--space-2xs);
  border-left: 2px solid var(--border-subtle);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-decoration: none;
}

.doc-toc a:hover { border-left-color: var(--color-accent); color: var(--text-accent); }


/* ==========================================================================
   11. CONTACT PAGE
   ========================================================================== */

.contact-layout { display: grid; gap: var(--space-xl); }

@media (min-width: 1000px) {
  .contact-layout { grid-template-columns: 1.35fr 0.65fr; gap: var(--space-2xl); align-items: start; }
}

.contact-aside {
  padding: var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--color-fog);
}

@media (min-width: 768px) { .contact-aside { padding: var(--space-lg); } }

.contact-aside + .contact-aside { margin-top: var(--space-md); }

.contact-aside h2 { font-size: var(--fs-xl); margin-bottom: var(--space-sm); }
.contact-aside p { font-size: var(--fs-base); color: var(--text-secondary); }
.contact-aside > :last-child { margin-bottom: 0; }

.contact-method {
  display: flex;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--border-subtle);
}

.contact-method:last-of-type { border-bottom: 0; padding-bottom: 0; }
.contact-method svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 3px; color: var(--color-ink); }
.contact-method__label { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 2px; }
.contact-method__value { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.contact-method__value a { text-decoration: none; }
.contact-method__value a:hover { text-decoration: underline; }


/* ==========================================================================
   12. THANK YOU + 404
   ========================================================================== */

.status-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(3rem, 2rem + 8vw, 6rem);
  max-width: 640px;
  margin-inline: auto;
}

.status-page__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-pill);
}

.status-page__icon--success { background-color: var(--color-success-soft); color: var(--color-success); }
.status-page__icon--neutral { background-color: var(--color-fog); color: var(--text-muted); }
.status-page__icon svg { width: 36px; height: 36px; }

.status-page p { color: var(--text-secondary); }

.status-page .btn-group { justify-content: center; margin-top: var(--space-lg); }

.next-steps {
  width: 100%;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  text-align: left;
}

.next-steps h2 { font-size: var(--fs-xl); margin-bottom: var(--space-sm); }


/* ==========================================================================
   13. HELPERS
   ========================================================================== */

.text-center { text-align: center; }
.text-muted  { color: var(--text-muted); }
.text-lead   { font-size: var(--fs-lg); color: var(--text-secondary); }

.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.stack > * + * { margin-top: var(--space-sm); }

.nowrap { white-space: nowrap; }

/* Entrance animation, opt-in via data attribute, disabled for reduced motion
   and never applied before the script runs (so content is visible without JS). */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}