*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--color-cream); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
.icon { width: 1.25em; height: 1.25em; flex: none; stroke-width: 1.75; }
a { color: var(--color-forest); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-forest-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; box-shadow: 0 0 0 3px var(--color-forest); border-radius: 2px; }
/* Dark surfaces keep the gold ring alone, which already contrasts with forest. */
.site-footer :focus-visible, .cta-band :focus-visible { box-shadow: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; color: var(--color-forest); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.5em; font-variation-settings: "opsz" 96; }
h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); }
p, ul, ol { margin: 0 0 1em; }
.display { font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.02em; }
.eyebrow { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-4); }

.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); }
.page-hero + .section-prose, .page-hero + .section-media-split { padding-top: 0; }
/* Text straight under the title sits closer to it, and a one-paragraph intro also sits closer to what follows. */
.page-hero:has(+ .section-prose) { padding-bottom: var(--space-6); }
.page-hero + .section-prose:has(> .container > .prose > p:only-child) { padding-bottom: clamp(48px, 6vw, 80px); }
.page-hero + .section-prose:has(> .container > .prose > p:only-child) + .section { padding-top: clamp(48px, 6vw, 80px); }

/* Section background rhythm. Each section marks its own flat background with
   `data-bg`. Two adjacent sections sharing one collapse into a single run so
   the doubled padding where they meet doesn't read as an oversized gap. Most
   components hold their padding on the outer `.section`, but statement and
   highlight hold it on an inner wrapper instead, so that's collapsed too. */
:is([data-bg="cream"] + [data-bg="cream"], [data-bg="sand"] + [data-bg="sand"], [data-bg="forest"] + [data-bg="forest"], [data-bg="forest-deep"] + [data-bg="forest-deep"]) {
  padding-top: 0;
}
:is([data-bg="cream"] + [data-bg="cream"], [data-bg="sand"] + [data-bg="sand"], [data-bg="forest"] + [data-bg="forest"], [data-bg="forest-deep"] + [data-bg="forest-deep"]) > .statement-inner,
:is([data-bg="cream"] + [data-bg="cream"], [data-bg="sand"] + [data-bg="sand"], [data-bg="forest"] + [data-bg="forest"], [data-bg="forest-deep"] + [data-bg="forest-deep"]) > .highlight-inner {
  padding-top: 0;
}
.prose { max-width: var(--prose-max); }
.prose h2 { margin-top: 1.6em; font-size: var(--step-3); }
.prose h3 { margin-top: 1.4em; font-size: var(--step-2); }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--color-gold-deep); }

/* Text that only assistive technology reads, such as the new-tab warning on an
   external link, where an icon alone would leave the warning unspoken. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; white-space: nowrap; border: 0; clip-path: inset(50%);
}

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--color-forest); color: var(--color-on-dark); padding: 12px 18px; border-radius: var(--radius-sm); }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* Buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.btn {
  --btn-bg: var(--color-gold); --btn-fg: var(--color-ink);
  position: relative; display: inline-flex; align-items: center; gap: 0.6em; overflow: hidden;
  padding: 0.95em 1.6em; border-radius: 999px; border: 1.5px solid var(--btn-bg);
  background: var(--btn-bg); color: var(--btn-fg); font-family: var(--font-body); font-weight: 700; font-size: var(--step--1);
  letter-spacing: 0.02em; text-decoration: none; line-height: 1; cursor: pointer;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.btn::after { content: "→" / ""; display: inline-block; transition: transform 0.35s var(--ease-out); }
.btn:hover { --btn-bg: var(--color-gold-deep); color: var(--btn-fg); text-decoration: none; }
.btn:hover::after { transform: translateX(4px); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--color-forest); border-color: var(--color-forest); }
.btn-ghost:hover { --btn-bg: var(--color-forest); --btn-fg: var(--color-on-dark); }
.btn-sm { padding: 0.75em 1.25em; }
.btn-sm::after { content: none; }
.header-actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.header-contact, .header-donate { flex: none; white-space: nowrap; justify-content: center; }
.btn.is-disabled, .btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; cursor: default; }

/* Pattern band */
.pattern-band { position: relative; height: var(--band-h); overflow: hidden; }
.pattern-band::before {
  content: ""; position: absolute; inset: 0 calc(var(--band-h) * -4) 0 0;
  background: url("../img/pattern-band.svg") repeat-x 0 0 / auto 100%;
  animation: band-drift 6s linear infinite;
}
.pattern-band-lg { --band-h: 16px; }
.site-header > .pattern-band { --band-h: 8px; }
@keyframes band-drift { to { transform: translateX(calc(var(--band-h) * -2)); } }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 247, 239, 0.92); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); transition: box-shadow 0.3s var(--ease-out); }
.header-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--header-h); transition: min-height 0.3s var(--ease-out); }
.site-header.is-condensed .header-inner { min-height: 64px; }
.wordmark { display: inline-flex; align-items: center; flex: none; line-height: 0; text-decoration: none; }
.wordmark:hover { text-decoration: none; }
.wordmark img { display: block; width: auto; height: 56px; transition: height 0.3s var(--ease-out); }
/* `.wordmark-logo-light` alone (one class) is less specific than `.wordmark img`
   above (one class plus a type selector) and would lose to it no matter the
   source order, leaving the light logo visible everywhere. The `img` here
   matches that specificity so this default actually hides it. */
.wordmark img.wordmark-logo-light { display: none; }
/* Sized by width, with an auto height, rather than a fixed height, so the
   global `img { max-width: 100% }` rule can clamp it proportionally instead
   of squashing it once the footer narrows past 320px. 305px below 1280px
   keeps the same visual size as the 88px it renders at in that range. */
.wordmark-footer img { width: 381px; height: auto; }
/* The condensed bar is only 64px tall; a 56px logo would leave 4px above and
   below it, so it steps down to the same 44px it already uses under 1280px.
   Scoped to `.site-header`, so it never touches the footer's own logo. */
.site-header.is-condensed .wordmark img { height: 44px; }

@media (min-width: 1280px) {
  /* Shrinking the logo from 56px to 44px tall in the condensed bar also
     narrows it, from 194px to 152px, and `.header-inner` uses a
     space-between `justify-content`, so that narrower wordmark let the nav
     slide left with it. Reserving the logo's full width keeps the nav still
     while the logo keeps shrinking in height. Scoped to this breakpoint
     because the primary nav is hidden below it, so there's nothing for a
     narrower wordmark to move. */
  .site-header .wordmark { min-width: 194px; }
}

.nav-list { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-item.has-dropdown { display: flex; align-items: center; }
.nav-group-link { padding-right: 4px; }
/* The chevron belongs to its label, so it sits tight against it and never draws its own underline. */
.nav-item.has-dropdown .nav-toggle { padding-left: 0; padding-right: 8px; margin-left: -2px; background-image: none; }
.nav-item.has-dropdown .nav-toggle:hover, .nav-item.has-dropdown .nav-toggle.is-current { background-size: 0 2px; }
.nav-link, .nav-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; background: none;
  font: 500 0.95rem/1 var(--font-body); color: var(--color-ink); text-decoration: none; cursor: pointer; border-radius: var(--radius-sm);
  background-image: linear-gradient(var(--color-gold), var(--color-gold)); background-size: 0 2px; background-repeat: no-repeat; background-position: 12px calc(100% - 4px);
  transition: background-size 0.35s var(--ease-out), color 0.2s;
  white-space: nowrap;
}
.nav-link:hover, .nav-toggle:hover, .nav-link[aria-current="page"], .nav-toggle.is-current { background-size: calc(100% - 24px) 2px; color: var(--color-forest); text-decoration: none; }
.chev { width: 10px; transition: transform 0.3s var(--ease-out); }
.nav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px; list-style: none; margin: 0; padding: 10px; display: grid; gap: 4px;
  background: var(--color-cream); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
}
.nav-item.has-dropdown:hover .dropdown, .nav-toggle[aria-expanded="true"] + .dropdown { opacity: 1; visibility: visible; transform: none; }
/* Invisible bridge across the gap so hover survives the move from toggle to menu. */
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.dropdown a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--color-ink); text-decoration: none; font-size: 0.95rem; line-height: 1.3; transition: background-color 0.2s, padding-left 0.3s var(--ease-out); }
.dropdown a:hover, .dropdown a[aria-current="page"] { background: var(--color-sand); padding-left: 18px; color: var(--color-forest); }

.menu-toggle { display: none; align-items: center; gap: 10px; border: 1.5px solid var(--color-forest); background: none; border-radius: 999px; padding: 10px 16px; font: 700 0.85rem/1 var(--font-body); color: var(--color-forest); cursor: pointer; transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); }
.menu-toggle-bars { width: 18px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; transition: transform 0.3s; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { transform: scaleY(0.2); }

.mobile-menu { position: fixed; inset: 0; top: calc(var(--header-h) + var(--band-h)); z-index: 45; background: var(--color-forest); overflow-y: auto; padding: var(--space-6) var(--gutter) var(--space-9); }
.mobile-list { list-style: none; margin: 0; padding: 0; }
.mobile-list > li { border-bottom: 1px solid rgba(251, 247, 239, 0.18); }
.mobile-link, .mobile-group-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 18px 0; border: 0; background: none; font: 500 var(--step-1)/1.2 var(--font-heading); color: var(--color-on-dark); text-decoration: none; cursor: pointer; text-align: left; }
.mobile-group-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mobile-sublist { list-style: none; margin: 0 0 16px; padding: 0 0 0 12px; }
.mobile-sublist a { display: block; padding: 10px 0; color: var(--color-on-dark-muted); text-decoration: none; }
.mobile-sublist a[aria-current="page"], .mobile-link[aria-current="page"] { color: var(--color-gold); font-weight: 700; }
.mobile-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }
/* The open menu is a dark surface, so its ghost button and focus rings switch to the light treatment. */
.mobile-actions .btn-ghost { --btn-fg: var(--color-on-dark); border-color: var(--color-on-dark); }
.mobile-actions .btn-ghost:hover { --btn-bg: var(--color-on-dark); --btn-fg: var(--color-forest); }
.mobile-menu :focus-visible { box-shadow: none; }
.mobile-legal { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--step--1); line-height: 1.5; color: var(--color-on-dark-muted); }
.mobile-legal p { margin: 0; }
.mobile-legal a { color: var(--color-on-dark-muted); }
.mobile-legal a:hover { color: var(--color-gold); }

@media (max-width: 1279px) {
  /* Below the desktop breakpoint the header is just the wordmark and the menu button. */
  .primary-nav { display: none; }
  .header-actions { display: none; }
  .wordmark img { height: 44px; }
  /* `.wordmark img` above also matches this image, since the footer link
     carries both the `wordmark` and `wordmark-footer` classes, and its
     44px would otherwise win here too (same specificity, later in source,
     with no height of its own to lose to it). Repeating an auto height
     keeps this logo sized by width the way the unconditional rule above
     sets it up. */
  .wordmark-footer img { width: 305px; height: auto; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .header-inner { min-height: 72px; gap: var(--space-4); }
  :root { --header-h: 72px; }
}
html.menu-open, html.menu-open body { overflow: hidden; }
/* The bar with the wordmark and Close button stays cream while the open menu below is green. */
html.menu-open.nav-overlay .template-home .site-header,
html.menu-open.nav-overlay .template-home .site-header.is-condensed {
  background: rgba(251, 247, 239, 0.98); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html.menu-open.nav-overlay .template-home .site-header .menu-toggle { color: var(--color-forest); border-color: var(--color-forest); }

/* Overlay navbar, home only, JS-driven (html.nav-overlay is added by nav.js) */
html.nav-overlay .template-home .site-header {
  position: fixed; inset: 0 0 auto 0;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
html.nav-overlay .template-home .site-header > .pattern-band { display: none; }
/* Over the home hero photo the header is transparent, so it shows the light logo. */
html.nav-overlay .template-home .site-header .wordmark-logo-dark { display: none; }
html.nav-overlay .template-home .site-header .wordmark-logo-light { display: block; }
html.nav-overlay .template-home .site-header .nav-link,
html.nav-overlay .template-home .site-header .nav-toggle,
html.nav-overlay .template-home .site-header .menu-toggle {
  color: var(--color-on-dark);
}
html.nav-overlay .template-home .site-header .menu-toggle { border-color: var(--color-on-dark); }
/* The ghost Contact button has no fill of its own, so it needs the same on-dark
   treatment as the plain nav links and menu toggle to read over a photo. */
html.nav-overlay .template-home .site-header .header-contact { --btn-fg: var(--color-on-dark); border-color: var(--color-on-dark); }
/* The forest focus companion ring reads poorly over a photo, so the transparent header keeps the gold outline alone. */
html.nav-overlay .template-home .site-header:not(.is-condensed) :focus-visible { box-shadow: none; }
/* The dropdown panel is still a cream surface even while the header is transparent, so its ring stays. */
html.nav-overlay .template-home .site-header:not(.is-condensed) .dropdown :focus-visible { box-shadow: 0 0 0 3px var(--color-forest); }

html.nav-overlay .template-home .site-header.is-condensed {
  background: rgba(251, 247, 239, 0.92);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
}
html.nav-overlay .template-home .site-header.is-condensed > .pattern-band { display: block; }
/* Condensed on scroll, or with the phone menu open, the bar is cream again. */
html.nav-overlay .template-home .site-header.is-condensed .wordmark-logo-dark,
html.menu-open.nav-overlay .template-home .site-header .wordmark-logo-dark { display: block; }
html.nav-overlay .template-home .site-header.is-condensed .wordmark-logo-light,
html.menu-open.nav-overlay .template-home .site-header .wordmark-logo-light { display: none; }
html.nav-overlay .template-home .site-header.is-condensed .nav-link,
html.nav-overlay .template-home .site-header.is-condensed .nav-toggle { color: var(--color-ink); }
html.nav-overlay .template-home .site-header.is-condensed .menu-toggle { color: var(--color-forest); border-color: var(--color-forest); }
html.nav-overlay .template-home .site-header.is-condensed .header-contact { --btn-fg: var(--color-forest); border-color: var(--color-forest); }

/* Footer */
.site-footer { background: var(--color-forest); color: var(--color-on-dark); margin-top: 0; }
.site-footer a { color: var(--color-on-dark); }
.site-footer a:hover { color: var(--color-gold); }
.footer-grid { display: grid; gap: var(--space-8); padding-block: var(--space-9) var(--space-8); }
.footer-top { display: grid; gap: var(--space-8) var(--space-7); grid-template-columns: 1fr; }
.footer-tagline { font-family: var(--font-heading); font-size: var(--step-1); color: var(--color-on-dark); margin: var(--space-5) 0 var(--space-4); }
.footer-contact { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-contact li { display: flex; align-items: center; gap: var(--space-3); color: var(--color-on-dark-muted); }
.footer-contact .icon { color: var(--color-gold); }
.footer-heading { font-weight: 700; font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-4); }
.footer-nav { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer-nav ul { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: 8px; font-size: var(--step--1); line-height: 1.4; }
.footer-nav a { text-decoration: none; }
.footer-bottom-row { display: grid; gap: var(--space-7); grid-template-columns: 1fr; align-items: start; }
/* Each acknowledgement takes a full-width row of its own, the two grouped inside a
   dotted box, and the Baldwin quote takes a full-width row beneath them. The
   full-width shape was chosen after the measure of all three options was reported,
   and the order was chosen after seeing the grouped box rendered.
   Measured in Chrome at a real viewport, not in an iframe, counting the characters
   in each rendered line box rather than dividing a paragraph by its line count,
   which undercounts because the last line is partial. The acknowledgement measure
   runs about 50 characters a line at 390px, 99 at 768px, 132 at 1024px and 161 from
   1280px up, where the container stops growing at 1152px. The long measure is the
   accepted cost of the full-width row, so capping it or pairing the two
   acknowledgements needs a new decision rather than a tidy-up. The gap here is one
   step tighter than the row gap, so the two acknowledgements group together inside
   their box and the quote reads as its own thing beneath them. Note the measure
   above is now taken inside the box padding, so it is a little shorter than the
   figures quoted. */
/* A dotted rule groups the two acknowledgements and separates them from the quote
   above, which read as one undifferentiated block once the quote took its own row.
   The border colour is the muted on-dark text colour at low alpha, so it reads as a
   quiet rule rather than a card edge competing with the gold headings. */
.footer-acknowledgements { display: grid; gap: var(--space-6); grid-template-columns: 1fr; border: 1px dotted rgba(201, 211, 203, 0.55); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); }
.footer-land p:not(.footer-heading) { color: var(--color-on-dark-muted); font-size: var(--step--1); }
/* The quote is centred and inset from both edges so it does not run the full
   container width like the acknowledgements above it, which keeps it reading as a
   pull quote rather than another block of body copy. The icon and the caption
   centre with it. */
.footer-quote { margin: 0; text-align: center; padding-inline: clamp(16px, 6vw, 96px); }
.footer-quote .icon { width: 44px; height: 44px; color: var(--color-gold); margin: 0 auto var(--space-4); display: block; }
.footer-quote blockquote { margin: 0; font-family: var(--font-heading); font-size: var(--step-2); line-height: 1.25; }
.footer-quote figcaption { margin-top: var(--space-2); color: var(--color-gold); font-weight: 700; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid rgba(251, 247, 239, 0.15); font-size: var(--step--1); color: var(--color-on-dark-muted); }
.footer-bottom p { margin: 0; }
.footer-credit { display: flex; align-items: center; gap: var(--space-2); }
.footer-credit-link { display: inline-flex; align-items: center; opacity: 1; transition: opacity 0.2s; }
.footer-credit-link:hover { opacity: 0.7; }
.footer-credit-link img { display: block; }
@media (min-width: 900px) {
  .footer-top { grid-template-columns: 1fr 2fr; }
}

@media (forced-colors: active) {
  /* Forced-colours modes (e.g. Windows high contrast) replace the header's
     translucent cream and the footer's forest green with system colours,
     which can leave the header's dark-green letters unreadable against a
     forced-black background and the footer's white letters unreadable
     against a forced-white one. A `forced-color-adjust` of `none` opts each
     wordmark out of that override, so it keeps a real backplate of its own
     that its own logo is drawn to read against, whatever the system colours
     are elsewhere on the page. The header always shows the dark logo here,
     since the light logo exists only for the transparent home hero, and
     forced colours gives that hero no transparency to sit on. */
  .site-header .wordmark {
    forced-color-adjust: none;
    background: var(--color-cream);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
  }
  .site-header .wordmark img.wordmark-logo-dark { display: block !important; }
  .site-header .wordmark img.wordmark-logo-light { display: none !important; }
  .wordmark-footer {
    forced-color-adjust: none;
    background: var(--color-forest);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
  }
}

/* Page fade transition */
.page-fade { position: fixed; inset: 0; z-index: 100; background: var(--color-cream); pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease-out); }
html.is-entering .page-fade, html.is-leaving .page-fade { opacity: 1; }

/* Motion initial states (only while motion JS is active) */
.js-motion:not(.reduced-motion) .reveal-up, .js-motion:not(.reduced-motion) .reveal-stagger > * { opacity: 0; transform: translateY(24px); }
.js-motion.reduced-motion .reveal-up, .js-motion.reduced-motion .reveal-stagger > * { opacity: 0; }
.js-motion .reveal-lines { visibility: hidden; }
.js-motion:not(.reduced-motion) .clip-reveal { clip-path: inset(0 0 100% 0); }
.js-motion:not(.reduced-motion) .hero-settle { transform: scale(1.08); }

@media print {
  .reveal-up, .reveal-stagger > *, .reveal-lines, .reveal-lines *, .clip-reveal, .clip-reveal img, .hero-settle, .parallax {
    opacity: 1 !important; transform: none !important; visibility: visible !important; clip-path: none !important;
  }
  .page-fade, .pattern-band, .menu-toggle, .mobile-menu { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pattern-band::before { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}