/* Exterior Express — Austin
   Direction: the client's own brand system, taken from exteriorexpress.net.
   Bright teal chrome carrying dark ink, serif type throughout, and the gable/chevron
   section dividers that echo the roofline in their logo.

   Three things in that reference are deliberately NOT reproduced, and each has a reason
   recorded in CLAUDE.md rather than being a shortfall:
     - the photography  — licensed Getty/Durable stock (invariant 2). The hero is a CSS
                          composition; --hero-image is the one-line swap-in point.
     - the webfont      — one external subresource origin only (invariant 3), so the
                          serif is a system stack led by Georgia.
     - white-on-teal    — the reference puts white text on #58bdb4 (~2.1:1) and a white
                          footer link on grey (~2.5:1). Teal is a LIGHT surface here and
                          carries dark ink at 8.1:1.

   Body type runs deliberately large: a real slice of this audience is Sun City
   Georgetown, and small grey text loses them.

   REBRAND SURFACE (invariant 7): the three tokens marked REBRAND below, plus
   assets/mark.svg and assets/logo.svg. Never hard-code a colour anywhere else.
   Everything tinted off the brand is derived with color-mix() rather than pinned to a
   fourth hex, so the surface stays three tokens wide. */

:root {
  /* ---- REBRAND: change these three to reskin the whole site ---- */
  --brand:      #58bdb4;  /* REBRAND  teal chrome + CTA surface. Dark ink on it = 8.1:1 */
  --brand-ink:  #0b5b57;  /* REBRAND  links/icons on white — 7.9:1 (AAA)                */
  --accent:     #2fb3a8;  /* REBRAND  divider strokes. DECORATIVE ONLY, never body text */
  /* -------------------------------------------------------------- */

  /* Derived from the three above — not part of the rebrand surface. */
  --brand-soft: color-mix(in srgb, var(--brand) 55%, #ffffff);  /* on dark: 10.4:1 */
  --brand-deep: color-mix(in srgb, var(--brand) 55%, #06322f);

  --color-bg:      #ffffff;
  --color-surface: #f2f6f7;
  --color-tint:    #e9edf6;  /* the contact field in the reference */
  --color-band:    #9b9b9b;  /* the footer band. Dark ink on it = 6.6:1 */
  --color-text:    #10171c;  /* 17:1 on bg (AAA)  */
  --color-muted:   #55636c;  /* 6.1:1 on bg (AA+) */
  --color-border:  #d7e0e3;
  --color-field:   #dfe4ec;  /* filled form inputs, borderless like the reference */

  /* Fluid type — clamp everywhere, no px-only sizes */
  --step--1: clamp(0.94rem, 0.90rem + 0.20vw, 1.06rem);
  --step-0:  clamp(1.06rem, 1.00rem + 0.30vw, 1.22rem);
  --step-1:  clamp(1.28rem, 1.18rem + 0.50vw, 1.60rem);
  --step-2:  clamp(1.55rem, 1.36rem + 0.95vw, 2.15rem);
  --step-3:  clamp(1.90rem, 1.55rem + 1.75vw, 3.05rem);
  --step-4:  clamp(2.40rem, 1.70rem + 3.40vw, 4.60rem);

  /* Fluid spacing so vertical rhythm scales with the viewport */
  --space-xs: clamp(0.5rem,  0.45rem + 0.25vw, 0.7rem);
  --space-s:  clamp(0.8rem,  0.70rem + 0.40vw, 1.1rem);
  --space-m:  clamp(1.2rem,  1.05rem + 0.70vw, 1.8rem);
  --space-l:  clamp(1.8rem,  1.50rem + 1.40vw, 2.9rem);
  --space-xl: clamp(2.8rem,  2.20rem + 2.80vw, 5.2rem);
  --space-2xl:clamp(4.0rem,  3.00rem + 4.50vw, 7.5rem);

  /* The gable divider. --peak-h is the drop from the centre apex to the page edge. */
  --peak-h:    clamp(30px, 4.6vw, 78px);
  /* .brand__logo clamp + .header-inner padding. Feeds scroll-padding-top so the
     two cannot drift apart. */
  --header-h:  calc(clamp(38px, 4.2vw, 50px) + 1rem);
  --peak-line: 5px;

  --radius:       3px;   /* buttons — the reference's are near-square */
  --radius-field: 9px;
  --radius-lg:    14px;
  --shadow:    0 1px 2px rgba(16, 23, 28, .05), 0 8px 24px -12px rgba(16, 23, 28, .18);
  --measure:   68ch;

  /* Serif everywhere, as in the reference. Georgia leads because it ships on both
     Windows and macOS; ui-serif resolves to Times New Roman on Windows, which is worse. */
  --font: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
          "Times New Roman", serif;

  /* Declared here, not on .hero, so any panel can use it. Left undefined it is not
     "no image" — it is an invalid var() that kills the entire background-image list,
     gradients included. Pages override it per-panel with an inline custom property. */
  --hero-image: none;

  --motion-ok: 1;
}

/* Where color-mix() is unsupported (~4% of traffic: Chrome <111, Safari <16.2,
   Firefox <113) the custom property still PARSES — custom properties accept any
   token stream — so it wins the cascade and only fails later at computed-value
   time. `background` does not inherit, so it resolves to `unset` -> transparent
   while the sibling `color: #fff` survives: the CTA turns white-on-light and
   disappears in the contact panel and the footer. Neither a preceding
   declaration nor var()'s own fallback argument can rescue it — @supports is the
   only mechanism that does. These hexes are what the mixes above resolve to, so
   this is a fallback for the same colour, not a fourth brand token. */
@supports not (color: color-mix(in srgb, red, white)) {
  :root { --brand-soft: #a3dbd6; --brand-deep: #337e78; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Without this every in-page anchor and the skip link lands its target heading
     UNDERNEATH the sticky teal bar. scrollIntoView honours exactly
     scroll-padding-top / scroll-margin-top and nothing else. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* the divider overlaps are full-bleed */
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 var(--space-s); text-wrap: balance; }
h1 { font-size: var(--step-4); font-weight: 400; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 700; }
p  { margin: 0 0 var(--space-s); max-width: var(--measure); }
a  { color: var(--brand-ink); text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- skip link: clipped, never display:none ---------- */
.skip-link {
  position: absolute; left: var(--space-s); top: var(--space-s); z-index: 100;
  background: var(--brand); color: var(--color-text); padding: .7rem 1rem;
  border-radius: var(--radius); font-weight: 700; text-decoration: none;
  clip-path: inset(50%);
}
.skip-link:focus { clip-path: none; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.5rem, 74rem); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 48rem); }
.section { padding-block: var(--space-2xl); }
.section--alt { background: var(--color-surface); }
.section--center { text-align: center; }
.section--center p { margin-inline: auto; }
.section__lede { font-size: var(--step-1); color: var(--color-muted); margin-bottom: var(--space-l); }
.section__foot { margin-top: var(--space-l); color: var(--color-muted); font-size: var(--step--1); }

.eyebrow {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--brand-ink); margin: 0 0 var(--space-xs);
}

/* ---------- buttons: 44px+ touch targets via padding ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .85rem 1.5rem;
  border: 2px solid transparent; border-radius: var(--radius);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--brand { background: var(--brand); color: var(--color-text); }
.btn--brand:hover { background: var(--brand-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--brand-ink); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--brand); background: var(--color-surface); }
.btn--lg { font-size: var(--step-0); padding: 1.05rem 1.9rem; }
.btn--sm { padding: .55rem 1rem; min-height: 40px; font-size: var(--step--1); }

/* ---------- header: the solid teal bar ---------- */
#nav-sentinel { height: 1px; }
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--brand);
  transition: box-shadow .2s ease;
}
.site-header.nav--scrolled { box-shadow: 0 2px 14px rgba(16, 23, 28, .22); }
.header-inner { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m); padding-block: .5rem; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo { height: clamp(38px, 4.2vw, 50px); width: auto; }

.nav__list { display: flex; align-items: center; gap: var(--space-m); list-style: none; }
.nav__list a { color: var(--color-text); text-decoration: none; font-weight: 400; }
.nav__list a:hover { text-decoration: underline; }
.nav__call { font-weight: 700; white-space: nowrap; }

.nav-toggle { display: none; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .8rem;
  background: transparent; border: 1px solid rgba(16, 23, 28, .45); border-radius: var(--radius);
  font: inherit; font-weight: 700; color: var(--color-text); cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 20px; height: 2px; background: currentColor; content: ""; }
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after  { position: absolute; top: 6px; }

@media (max-width: 54rem) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--brand); box-shadow: 0 8px 20px rgba(16, 23, 28, .25); display: none;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-s) var(--space-m) var(--space-m); }
  .nav__list li { border-bottom: 1px solid rgba(16, 23, 28, .18); }
  .nav__list li:last-child { border: 0; }
  .nav__list a { display: block; padding: .9rem 0; }
}

/* ---------- hero ----------
   Full-bleed, centred, dark. The reference puts a photograph here; ours is composed in
   CSS so the page still renders from file:// with the network off (invariant 4) and
   ships no image we do not hold a licence for (invariant 2).

   To drop in real photography later, set --hero-image on .hero to a url() and nothing
   else needs to change — the wash and the type treatment already sit on top of it. */
.hero {
  --hero-image: url("../assets/EX-01-hero.webp");
  position: relative;
  display: grid; align-items: center;
  min-height: min(78vh, 700px);
  padding-block: var(--space-2xl);
  text-align: center;
  color: #fff;
  /* Layer order matters and the original was wrong: --hero-image was listed FIRST,
     which paints it on TOP of the wash, and the final gradient was opaque, which
     would have hidden the photo entirely. The photo is now the BOTTOM layer and
     the gradients above it are a translucent scrim, so white type keeps its
     contrast over any image and the composition still reads with no image at all
     (background-color carries it). */
  background-color: #16232a;
  background-image:
    radial-gradient(120% 95% at 78% 4%, rgba(120, 205, 208, .22), transparent 60%),
    linear-gradient(104deg, rgba(255, 255, 255, 0) 42%, rgba(214, 238, 240, .10) 55%, rgba(255, 255, 255, .03) 80%),
    linear-gradient(168deg, rgba(22, 40, 48, .84) 0%, rgba(16, 30, 38, .87) 48%, rgba(9, 18, 24, .90) 100%),
    var(--hero-image);
  background-size: cover;
  background-position: center;
}
.hero__copy { max-width: 46rem; margin-inline: auto; }
.hero .eyebrow { color: var(--brand-soft); }
.hero h1 { text-shadow: 0 2px 20px rgba(0, 0, 0, .45); }
.hero .lede {
  font-size: var(--step-1); color: rgba(255, 255, 255, .93);
  max-width: 40rem; margin-inline: auto;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s);
  justify-content: center; margin-block: var(--space-m) var(--space-s); }
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
/* --brand-ink on the hero base is 2.02:1, under the 3:1 WCAG 2.2 SC 1.4.11 floor
   for a focus indicator. On this one dark surface the ring goes white. */
.hero :focus-visible { outline-color: #fff; }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.hero__note { font-size: var(--step--1); color: rgba(255, 255, 255, .82); margin: 0; }

/* ---------- cards / grids ---------- */
.card-grid { display: grid; gap: var(--space-l); list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); text-align: left; }
.card { background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-l); box-shadow: var(--shadow); }
.section--alt .card { background: var(--color-bg); }
.card__icon { display: inline-grid; place-items: center; width: 52px; height: 52px;
  border-radius: 14px; background: var(--brand); color: var(--color-text);
  margin-bottom: var(--space-s); }
.card p { color: var(--color-muted); margin-bottom: 0; }

.steps { display: grid; gap: var(--space-l); list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); text-align: left; }
.step__n { display: inline-grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--brand); color: var(--color-text); font-weight: 700;
  font-size: var(--step-0); margin-bottom: var(--space-s); }
.step p { color: var(--color-muted); margin-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-s);
  list-style: none; justify-content: center; }
.chips li { background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 999px; padding: .5rem 1.05rem; font-weight: 700; font-size: var(--step--1); }

/* ---------- FAQ (native details, zero JS) ---------- */
.qa { border-bottom: 1px solid var(--color-border); text-align: left; }
.qa summary { cursor: pointer; list-style: none; padding: var(--space-m) 2.2rem var(--space-m) 0;
  font-size: var(--step-1); font-weight: 700; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: .3rem; top: 50%;
  translate: 0 -50%; font-size: 1.5em; font-weight: 400; color: var(--brand-ink); line-height: 1; }
.qa[open] summary::after { content: "\2212"; }
.qa p { color: var(--color-muted); padding-bottom: var(--space-m); margin: 0; }

/* ---------- closing CTA + form ---------- */
.cta { background: var(--color-tint); color: var(--color-text);
  padding-block: var(--space-2xl); text-align: center; }
.cta__lede { font-size: var(--step-1); color: var(--color-muted);
  max-width: 38rem; margin-inline: auto; }
.cta__actions { margin-block: var(--space-m) var(--space-l); }

.form { text-align: left; max-width: 40rem; margin-inline: auto; }
.form__grid { display: grid; gap: 0 var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.form__row { display: grid; gap: .4rem; margin-bottom: var(--space-m); align-content: start; }
.form__row--wide { grid-column: 1 / -1; }
.form label { font-weight: 400; font-size: var(--step--1); }
.form input, .form textarea {
  font: inherit; color: inherit; padding: .8rem .9rem; min-height: 48px;
  border: 1px solid transparent; border-radius: var(--radius-field);
  background: var(--color-field); width: 100%;
}
.form input:focus-visible, .form textarea:focus-visible { border-color: var(--brand-ink); }
.form textarea { resize: vertical; }
/* honeypot — off-screen, not display:none, so bots still fill it */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { text-align: center; }
.form__status { margin: var(--space-s) 0 0; font-weight: 700; min-height: 1.5em; text-align: center; }
.form__status[data-state="error"] { color: #8c2f21; }
.form__status[data-state="ok"] { color: var(--brand-ink); }

/* ---------- footer: the grey band, logo first ---------- */
.site-footer {
  background: var(--color-band); color: var(--color-text);
  padding-top: calc(var(--space-xl) + var(--peak-h));
  padding-bottom: var(--space-xl);
  text-align: center;
}
.footer-inner { display: grid; gap: var(--space-m); justify-items: center; }
.footer__logo { height: clamp(64px, 8vw, 96px); width: auto; }
.footer__nav ul { display: flex; flex-wrap: wrap; gap: var(--space-m);
  list-style: none; justify-content: center; }
.footer__cta { margin: 0; }
.site-footer a { color: var(--color-text); }
.footer__contact a { font-size: var(--step-1); font-weight: 700; text-decoration: none; }
.footer__contact a:hover { text-decoration: underline; }
.footer__areas, .footer__legal {
  color: rgba(16, 23, 28, .78); font-size: var(--step--1); margin: 0;
  max-width: var(--measure); margin-inline: auto;
}

/* ---------- page head: the service and hub pages ----------
   Deliberately the same dark panel as the hero rather than a pale band, so the gable
   below it has something to cut into. A white page head above a white section makes the
   divider invisible — see the note on .peak-top. */
.page-head {
  position: relative;
  padding-block: var(--space-2xl) calc(var(--space-2xl) + var(--peak-h));
  text-align: center;
  color: #fff;
  background-color: #16232a;
  background-image:
    radial-gradient(120% 95% at 78% 4%, rgba(120, 205, 208, .22), transparent 60%),
    linear-gradient(168deg, rgba(22, 40, 48, .86) 0%, rgba(9, 18, 24, .92) 100%),
    var(--hero-image);
  background-size: cover;
  background-position: center;
}
.page-head .eyebrow { color: var(--brand-soft); }
.page-head .eyebrow a { color: inherit; }
.page-head h1 { text-shadow: 0 2px 20px rgba(0, 0, 0, .45); }
.page-head .lede {
  font-size: var(--step-1); color: rgba(255, 255, 255, .93);
  max-width: 40rem; margin-inline: auto; text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--space-s);
  justify-content: center; margin-block: var(--space-m) 0; }
.page-head .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
.page-head .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.page-head :focus-visible { outline-color: #fff; }

/* ---------- long-form body copy ---------- */
.prose { margin-bottom: var(--space-xl); }
.prose h2 { margin-top: var(--space-l); }
.prose p { color: var(--color-muted); }
.prose > .qa p { padding-bottom: var(--space-m); }

.related { margin-top: var(--space-xl); padding-top: var(--space-l);
  border-top: 1px solid var(--color-border); }
.related ul { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m);
  list-style: none; }
.related a { font-weight: 700; }

/* Service list in the footer sits under the primary list, one row, smaller. */
.footer__nav--services ul { gap: var(--space-s) var(--space-m); }
.footer__nav--services a { font-size: var(--step--1); }

/* Hub cards carry a linked heading rather than an icon. */
.card h2, .card h3 { margin-bottom: var(--space-xs); }
.card h2 a, .card h3 a { text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { text-decoration: underline; }

/* ---------- the gable dividers ----------
   The reference's signature element: a wide upward peak between sections with a teal
   stroke along it, and an inverted valley above the footer. The section is clipped and
   pulled up by --peak-h so the clipped corners reveal the section BEHIND it rather than
   the page background — which is the whole effect. The stroke is a ::before/::after
   band clipped to the same line, so it sits inside the parent clip and needs no SVG.

   This block lives LAST on purpose. Its padding has to beat the padding-block shorthand
   on .section, .cta and .hero, and every one of those is a single class — same
   specificity, so source order is the only thing deciding it. Moved up, the peak
   silently loses its top padding and the apex eats the first heading. */

.peak-top {
  position: relative;
  /* Load-bearing. .section paints no background, so clipping it cut a transparent box:
     the corners revealed the page, the dark hero kept its flat horizontal bottom edge,
     and the "gable" was a bare 5px line. Painting the section is what turns the clip
     into a visible roofline. */
  background: var(--color-bg);
  clip-path: polygon(0 var(--peak-h), 50% 0, 100% var(--peak-h), 100% 100%, 0 100%);
  margin-top: calc(var(--peak-h) * -1);
  padding-top: calc(var(--space-2xl) + var(--peak-h));
  z-index: 1;
}
.peak-top::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--peak-h) + var(--peak-line));
  background: var(--accent); pointer-events: none;
  clip-path: polygon(
    0 var(--peak-h), 50% 0, 100% var(--peak-h),
    100% calc(var(--peak-h) + var(--peak-line)), 50% var(--peak-line),
    0 calc(var(--peak-h) + var(--peak-line)));
}

.valley-bottom {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--peak-h)), 50% 100%, 0 calc(100% - var(--peak-h)));
  margin-bottom: calc(var(--peak-h) * -1);
  padding-bottom: calc(var(--space-2xl) + var(--peak-h));
  z-index: 1;
}
.valley-bottom::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--peak-h) + var(--peak-line));
  background: var(--accent); pointer-events: none;
  clip-path: polygon(
    0 0, 50% var(--peak-h), 100% 0,
    100% var(--peak-line), 50% calc(var(--peak-h) + var(--peak-line)), 0 var(--peak-line));
}
/* A section carrying both needs ONE clip-path describing both edges. Two separate
   declarations do not compose — the later one wins outright and the peak disappears. */
.peak-top.valley-bottom {
  clip-path: polygon(
    0 var(--peak-h), 50% 0, 100% var(--peak-h),
    100% calc(100% - var(--peak-h)), 50% 100%, 0 calc(100% - var(--peak-h)));
}

/* ---------- motion: one gate, genuinely fail-safe visible ----------
   The `.js` scope is load-bearing, not decoration. This block previously hid
   [data-reveal] inside `prefers-reduced-motion: no-preference` — the DEFAULT
   state for most users — and relied on JS to add .is-visible. With JS blocked by
   an extension, a proxy, or one parse error, the six service cards and the three
   process steps rendered as blank space on a LIVE page. Confirmed in a
   JS-disabled browser, not reasoned about.
   `.js` is set by an inline script in <head>, so a no-JS browser never matches
   the hiding rule at all. Visibility no longer depends on a script running. */
[data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(1.5rem);
    transition: opacity .55s ease, transform .55s ease; }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
  .js [data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
  .js [data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
  .js [data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-ok: 0; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .nav, .form { display: none; }
  /* Printing before the reveal observer fires would otherwise drop nine blocks. */
  [data-reveal], .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* The gable clips would guillotine content across a page break. */
  .peak-top, .valley-bottom, .peak-top.valley-bottom {
    clip-path: none; margin-block: 0; padding-block: var(--space-l);
  }
  .peak-top::before, .valley-bottom::after { display: none; }
  .hero { min-height: 0; color: var(--color-text); background: none; }
  .hero h1, .hero .lede, .hero__note { text-shadow: none; color: var(--color-text); }
}