/* Palette: Webflow's own deep teal and cyan, tightened into ONE dark family.
   The earlier version had three unrelated darks — a grey-navy for text, teal
   for panels and a royal navy for the footer — plus a warm cream ground against
   cool blues, which is what made it feel incoherent next to the original.
   Everything dark is now #003d4c; ground and surfaces share its hue. */
:root {
  --ink:            #0f2b33;   /* navy — body text, dark sections, footer   */
  --bg:             #f7fafb;   /* cream page — Webflow's own on-accent cream */
  --surface:        #ffffff;   /* the "white" surfaces: cards, inputs, tabs  */
  --bg-2:           #e3eef2;
  --bg-3:           #d9edf2;   /* palest cyan                               */

  --accent:         #003d4c;   /* deep teal — primary buttons, dark panels  */
  --accent-hover:   #01586d;
  --cyan:           #00e5ff;   /* bright accent, DARK BACKGROUNDS ONLY      */
  /* The logo's own deeper red (#c80000 sits right between its #be0000 and
     #e60000). Webflow's #f10d0d only reached 3.96:1 on this cream and read
     pink rather than punchy; this is 5.42:1. */
  --red:            #c80000;

  --muted:          #456069;   /* slate body text                           */
  --on-accent:      #f7fafb;   /* cream, not cold white, on dark panels     */
  --line:           #0f2b331f;
  --line-2:         #0f2b3333;

  --footer-bg:      #003d4c;
  --footer-line:    #1d5f70;
  --footer-text:    #cde5eb;
  --footer-link:    #b5dae3;
  --muted-inverse:  #cde5eb;

  --panel-dark:     #003d4c;

  --hero-card:      #00485af2;

  --font-head: "Archivo", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container: 1280px;
  --radius-btn:  .5rem;
  --radius-card: .75rem;
  --radius-lg:   1rem;
  --section-y:   6rem;
  --nav-h:       4.5rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

/* Archivo is a grotesque, not a serif: it needs more weight and tighter
   tracking than Georgia did, or headings read loose and flat. */
h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: 700; margin: 0 0 .35em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.21rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4vw, 2.37rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 800; }
h3 { font-size: clamp(1.35rem, 2.6vw, 1.78rem); line-height: 1.15; letter-spacing: -.015em; font-weight: 700; }
h4 { font-size: 1.33rem; line-height: 1.3; }
p  { margin: 0 0 .75em; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.section   { padding-block: var(--section-y); }
.section--tight { padding-block: 4rem; }
.section--grey  { background: var(--bg-2); }
.section--dark  { background: var(--panel-dark); color: var(--on-accent); }
.section--dark h2, .section--dark h3 { color: var(--on-accent); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .9rem; line-height: 1.3;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1rem;
}
.section--dark .eyebrow { color: var(--muted-inverse); }
.lead { font-size: 1.13rem; color: var(--muted); max-width: 46rem; }
.section--dark .lead { color: var(--muted-inverse); }
.rust { color: var(--red); }
.section--dark .rust { color: var(--cyan); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 500;
  padding: 1em 1.5em; border-radius: var(--radius-btn);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary   { background: var(--accent); color: var(--on-accent); }
.site-header .btn--primary { background: var(--cyan); color: var(--ink); font-weight: 600; }
.site-header .btn--primary:hover { background: #5cf0ff; }
.btn--primary:hover   { background: var(--accent-hover); }
.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn--secondary:hover { background: var(--bg-2); }
.btn--ghost     { background: #f8f3ec1f; color: var(--on-accent); border-color: #f8f3ec59; }
.btn--ghost:hover     { background: #ffffff33; border-color: #ffffff8c; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* On teal and navy panels the primary action becomes the bright cyan button and
   the secondary a translucent outline — the same inversion the Webflow original
   does with its .on-inverse variants. Without this the main CTA ends up dark
   teal on dark teal and the secondary button out-shouts it. */
.hero__card .btn--primary,
.cta-band .btn--primary,
.panel--dark .btn--primary,
.section--dark .btn--primary {
  background: var(--cyan); color: var(--ink); font-weight: 600;
}
.hero__card .btn--primary:hover,
.cta-band .btn--primary:hover,
.panel--dark .btn--primary:hover,
.section--dark .btn--primary:hover { background: #5cf0ff; }

.textlink {
  display: inline-block; margin-top: 1rem; color: var(--accent);
  font-weight: 500; text-decoration: none;
}
.textlink:hover { color: var(--ink); }
.section--dark .textlink:hover { color: var(--on-accent); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: #f8f3ecef; backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--nav-h);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand img { width: 44px; height: auto; }
.brand span { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; font-size: .95rem; color: var(--ink); opacity: .78; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a[aria-current="page"] { font-weight: 600; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-2);
  border-radius: var(--radius-btn); padding: .55rem .7rem; cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; }
/* The CTA is in the markup twice: once in the bar, once in the mobile
   drawer. Exactly one is ever shown. */
.nav-cta-drawer { display: none; }

@media (max-width: 960px) {
  .nav-toggle { display: block; order: 3; }
  .nav > .btn { display: none; }
  .nav-cta-drawer { display: block; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1.25rem;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: .85rem 0; border-bottom: 1px solid var(--line); opacity: 1; }
  .nav-links .btn { margin-top: 1rem; }
}

/* ---------- hero ----------
   The van's service list is lettered down the LEFT of the photo (about the
   left 36% of the frame). Everything here is arranged to keep that readable:
   the card sits on the right on wide screens and drops below the van on
   narrow ones, and the gradient darkens the side the card is on, not the
   side the lettering is on. */
.hero { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(270deg, #04222be6 0%, #04222bbf 34%, #04222b4d 62%, #04222b26 100%),
    linear-gradient(0deg,   #04222b59 0%, #04222b00 45%);
}
/* The van carries three things worth seeing: the service list (left ~36% of
   the frame), the Act Now Pros logo (~40-67%) and the phone number under it.
   The card is therefore sized to live in the right third only — past the logo,
   over the cab and hedge. 29vw is the widest it can be at 1500px without
   reaching back over the logo; 34rem stops it ballooning on a big monitor. */
.hero .container { max-width: none; padding-inline: 2rem; }
.hero__card {
  position: relative; width: min(34rem, 29vw); max-width: none;
  margin-block: 6rem; margin-left: auto;
  background: var(--hero-card); backdrop-filter: blur(14px);
  border: 1px solid #ffffff26; border-radius: var(--radius-lg);
  padding: 2.25rem; color: var(--on-accent);
}
.hero__card h1 { font-size: clamp(2rem, 2.5vw, 2.9rem); }
.hero__card h1 { color: var(--on-accent); }
.hero__card .eyebrow { color: #ffffffb3; }
.hero__card p { color: #ffffffdd; font-size: 1.06rem; margin-bottom: 0; }
.hero--page { min-height: 62vh; }

/* Below this the card can no longer sit beside the lettering without covering
   it, so it goes underneath and the crop lifts the van up the frame. */
@media (max-width: 1500px) {
  .hero { align-items: flex-end; min-height: 94vh; }
  .hero__bg img { object-position: 42% 76%; }
  .hero__bg::after {
    background: linear-gradient(0deg, #04222be6 0%, #04222bd9 30%, #04222b4d 62%, #04222b1a 100%);
  }
  .hero .container { padding-inline: 1.25rem; }
  .hero__card { width: auto; max-width: none; margin-left: 0; margin-block: 0 2.5rem; padding: 2rem; }
  .hero__card h1 { font-size: clamp(2.1rem, 4.6vw, 2.9rem); }
  .hero--page { min-height: 70vh; }
}

/* On a phone the card is full width, so nothing can sit beside it. The photo
   becomes its own band above the card, using the tight crop of the van's
   lettered side (assets/img/hero-van.webp) so the list is actually readable
   at this size rather than a thumbnail of the whole driveway. */
@media (max-width: 720px) {
  .hero { display: block; min-height: 0; background: var(--accent); }
  .hero .container { padding-inline: 0; }
  /* Match the band to the crop's own aspect ratio so the image is shown whole:
     a cover-crop here would shave the first letter off every line. */
  .hero__bg { position: relative; inset: auto; height: auto; aspect-ratio: 1092 / 803; }
  .hero__bg picture { display: block; height: 100%; }
  .hero__bg img { object-position: 50% 50%; }
  .hero__bg::after { background: linear-gradient(0deg, #04222b73 0%, #04222b00 55%); }
  .hero__card {
    max-width: none; margin: 0; padding: 2rem 1.25rem 2.5rem;
    /* Teal, matching the desktop hero card — this was the one place a phone
       still saw a near-black panel. */
    background: var(--accent); backdrop-filter: none;
    border: 0; border-radius: 0;
  }
}

/* ---------- generic grids ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.section-head { max-width: 52rem; margin-bottom: 3rem; }
.section-head--center { margin-inline: auto; text-align: center; }

/* ---------- cards ---------- */
.card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 2rem; height: 100%;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--line-2); transform: translateY(-2px); }
/* Service cards carry a photo of the actual job. Without it the pages were
   sixteen text-only cards in a row, with a 170-photo library sitting unused. */
.card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--media > :not(.card__media) { padding-inline: 1.75rem; }
.card--media > :first-child { padding-inline: 0; }
.card--media .card__num { margin-top: 1.5rem; }
.card--media > :last-child { padding-bottom: 1.75rem; }
.card__media {
  aspect-ratio: 16 / 10; background: var(--bg-3); overflow: hidden;
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s ease;
}
.card--media:hover .card__media img { transform: scale(1.04); }

.card__num {
  font-family: var(--font-body); font-size: .75rem; letter-spacing: .1em;
  color: var(--accent); font-weight: 600; display: block; margin-bottom: .9rem;
}
.card p { color: var(--muted); margin-bottom: 0; }
.card__note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.card__note strong { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.section--grey .card { background: var(--surface); }
.section--dark .card { background: #ffffff14; border-color: #ffffff2b; color: var(--on-accent); }
.section--dark .card p { color: var(--muted-inverse); }
.section--dark .card__note { border-top-color: #ffffff1f; }
.section--dark .card__note strong { color: var(--muted-inverse); }

/* ---------- capability tabs (home + about) ---------- */
.tabs__buttons { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2rem; }
.tabs__btn {
  font-family: var(--font-body); font-size: 1rem; cursor: pointer;
  padding: .85rem 1.4rem; border-radius: var(--radius-btn);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  transition: background-color .18s ease, color .18s ease;
}
.tabs__btn[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }
.tabs__media {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-2);
  aspect-ratio: 16 / 9;
}
.tabs__media img, .tabs__media video { width: 100%; height: 100%; object-fit: cover; }

/* The pump clip is a 360x640 portrait phone video. Forcing it into this 16:9
   box with object-fit: cover threw away 68% of the frame and upscaled what was
   left 3.1x — which is what made it look poor. Contained, it draws at roughly
   its native size: no crop, no upscale. A blurred still of the same frame fills
   the space either side so the panel still reads as a designed block. */
.tabs__media--video { position: relative; background: #0f1416; }
.tabs__media--video::before {
  content: ""; position: absolute; inset: 0;
  background: url("../video/backdrop.jpg") center / cover no-repeat;
  opacity: .5;
}
.tabs__media--video video {
  position: relative;
  object-fit: contain;
  /* Cap it at native height so it is never blown up, even in a tall panel. */
  max-height: 640px;
  margin-inline: auto;
}
.tabs__caption { text-align: center; margin-top: 1.25rem; }
.tabs__caption h3 { margin-bottom: .25rem; }

/* ---------- split panels ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.panel {
  border-radius: var(--radius-lg); padding: 2.75rem;
  background: var(--bg-2); border: 1px solid var(--line);
}
.panel--dark { background: var(--panel-dark); color: var(--on-accent); border-color: transparent; }
.panel--dark h2 { color: var(--on-accent); }
.panel--dark p  { color: var(--muted-inverse); }
.panel p { color: var(--muted); }

/* ---------- steps ---------- */
.step { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.step__num { font-size: .8rem; letter-spacing: .1em; color: var(--accent); font-weight: 600; }
.step h3 { margin: .5rem 0 .4rem; }
.step p { color: var(--muted); margin: 0; }
.section--dark .step { border-top-color: var(--cyan); }
.section--dark .step p { color: var(--muted-inverse); }

/* ---------- gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 1000px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.gallery-item {
  border: 0; padding: 0; margin: 0; background: var(--bg-2); cursor: zoom-in;
  border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 3 / 4;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1rem; }
@media (max-width: 1000px) { .gallery-strip { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px)  { .gallery-strip { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: #0b0b0be6; padding: 2rem;
  align-items: center; justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(92vw, 1000px); max-height: 86vh; width: auto; border-radius: var(--radius-card); }
.lightbox__close, .lightbox__nav {
  position: absolute; background: #f8f3ec1f; color: var(--on-accent); border: 1px solid #f8f3ec33;
  border-radius: var(--radius-btn); cursor: pointer; font-size: 1.4rem; line-height: 1;
  padding: .6rem .85rem;
}
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav--prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.25rem; top: 50%; transform: translateY(-50%); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; color: var(--ink);
  padding: 1.4rem 2.5rem 1.4rem 0; position: relative;
}
.faq__q::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 1.5rem; color: var(--accent);
}
.faq__q[aria-expanded="true"]::after { content: "–"; }
.faq__a { display: none; padding: 0 2.5rem 1.5rem 0; color: var(--muted); max-width: 52rem; }
.faq__a.is-open { display: block; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--panel-dark); color: var(--on-accent); border-radius: var(--radius-lg); padding: 3.5rem; text-align: center; }
.cta-band h2 { color: var(--on-accent); }
.cta-band p  { color: var(--muted-inverse); max-width: 44rem; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* ---------- form ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.1rem; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 500; letter-spacing: .02em; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-btn);
  padding: .8rem .9rem; width: 100%;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.form-note { font-size: .85rem; color: var(--muted); }
.form-status { display: none; border-radius: var(--radius-btn); padding: .9rem 1rem; margin-top: 1rem; font-size: .95rem; }
.form-status.is-ok   { display: block; background: #e7f2ea; border: 1px solid #bcd9c4; color: #1d4b2a; }
.form-status.is-err  { display: block; background: #fbeceb; border: 1px solid #e3bbb7; color: #7a2820; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding-left: 1.6rem; margin-bottom: .7rem; color: var(--muted); }
.checklist li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }

/* ---------- footer ----------
   Structured like the Webflow original: a centred brand block (large logo,
   tagline, one CTA) sitting above a slate rule, then three link columns, then
   a bottom bar. Navy ground with visible #334155 rules rather than the near
   -invisible white hairlines the first version used. */
.site-footer {
  background: var(--footer-bg);
  color: var(--on-accent);
  padding-block: 4rem 1.75rem;
}

.footer-intro {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1.25rem;
  border-bottom: 1px solid var(--footer-line);
  padding-bottom: 2rem;
}
.footer-mark { display: inline-block; text-decoration: none; }
.footer-mark img {
  width: 180px; max-width: 100%; height: auto;
  border-radius: 14px;
  object-fit: contain;
}
.footer-tagline {
  max-width: 650px; margin: 0;
  color: var(--on-accent); font-size: 1rem; line-height: 1.65;
}
.footer-cta {
  color: var(--cyan); text-decoration: none;
  font-weight: 600; font-size: 1.05rem; letter-spacing: .01em;
}
.footer-cta:hover { color: var(--on-accent); }

.footer-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem; padding-block: 2rem;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.25rem; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

.footer-label {
  color: var(--on-accent); text-transform: uppercase;
  letter-spacing: .15em; font-size: .72rem; font-weight: 700;
  margin: 0 0 17px;
}
.footer-col a {
  display: block; width: max-content; max-width: 100%;
  margin: 10px 0; color: var(--footer-link);
  text-decoration: none; font-size: .95rem;
}
.footer-col a:hover { color: var(--cyan); }
.footer-region { color: var(--footer-text); line-height: 1.65; margin: 0 0 .5rem; font-size: .95rem; }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--footer-line);
  padding-top: 25px;
  font-size: .84rem; color: var(--footer-text);
}

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .32s ease-out, transform .32s ease-out; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

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