/* ==========================================================================
   Access to Opportunity Corporation — getato.org
   Design system: "Warm Human"  ·  2026 rebuild
   Author: built for LaTara Abdullah
   --------------------------------------------------------------------------
   Principles baked into this file:
   · Light, warm ground. Never dark-by-default (low-literacy + crisis audience).
   · 18px minimum body text. 48px minimum tap targets.
   · Motion is opt-in: gated behind @supports AND prefers-reduced-motion.
     The un-animated state is always the FINAL state, never opacity:0.
   · Only transform/opacity/filter/clip-path are animated (compositor tier).
   · Three colour-coded pathways: HELP (clay) · REFER (green) · GIVE (gold)
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Ground + ink — warm, high contrast, light */
  --ground:        #faf7f2;
  --ground-2:      #f3ede3;
  --ground-3:      #ece3d5;
  --surface:       #ffffff;
  --ink:           #1c1815;
  --ink-2:         #4a4139;
  --ink-3:         #6f635a;
  --rule:          #e3d9c9;
  --rule-strong:   #cdbfab;

  /* Brand — deep forest green */
  --brand:         #14503f;
  --brand-600:     #0f4033;
  --brand-400:     #2c7a63;
  --brand-100:     #dcece6;
  --brand-tint:    #f0f7f4;

  /* HELP pathway — warm clay. Reserved. Never used for donation. */
  --help:          #b8461f;
  --help-600:      #983715;
  --help-dark:     #93381a;
  --help-100:      #fbe6dc;
  --help-tint:     #fdf3ee;

  /* GIVE pathway — gold */
  --give:          #8a6410;
  --give-400:      #c99a2e;
  --give-100:      #f8eeda;
  --give-tint:     #fdf8ee;

  /* Signal */
  --ok:            #1f6b45;
  --ok-100:        #dcf0e5;
  --warn:          #8a5a00;
  --err:           #a32218;
  --err-100:       #fbe3e1;

  --focus:         #1f6bd8;

  /* Type */
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Fluid scale. Base is 18px mobile / 20px desktop — deliberately large. */
  --step--2: clamp(0.83rem, 0.81rem + 0.09vw, 0.89rem);
  --step--1: clamp(0.95rem, 0.92rem + 0.16vw, 1.06rem);
  --step-0:  clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --step-1:  clamp(1.32rem, 1.24rem + 0.42vw, 1.60rem);
  --step-2:  clamp(1.58rem, 1.43rem + 0.75vw, 2.05rem);
  --step-3:  clamp(1.89rem, 1.64rem + 1.24vw, 2.62rem);
  --step-4:  clamp(2.27rem, 1.87rem + 1.99vw, 3.36rem);
  --step-5:  clamp(2.72rem, 2.11rem + 3.06vw, 4.30rem);
  --step-6:  clamp(3.05rem, 2.10rem + 4.75vw, 5.60rem);

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);

  /* Shape */
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* Elevation — warm-tinted, low, never floaty */
  --shadow-1: 0 1px 2px rgba(38, 28, 18, .05), 0 2px 6px rgba(38, 28, 18, .04);
  --shadow-2: 0 2px 4px rgba(38, 28, 18, .06), 0 8px 22px rgba(38, 28, 18, .07);
  --shadow-3: 0 4px 8px rgba(38, 28, 18, .07), 0 18px 46px rgba(38, 28, 18, .10);

  --wrap: 1240px;
  --wrap-narrow: 780px;
  --header-h: 76px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Wide-gamut refinement where supported. sRGB values above remain the fallback. */
@supports (color: oklch(50% 0.1 200)) {
  :root {
    --ground:    oklch(97.5% 0.008 82);
    --ground-2:  oklch(94.5% 0.014 80);
    --ground-3:  oklch(91%   0.022 79);
    --ink:       oklch(22%   0.012 60);
    --ink-2:     oklch(39%   0.016 62);
    --ink-3:     oklch(52%   0.017 63);
    --rule:      oklch(88%   0.018 80);
    --brand:     oklch(38%   0.075 165);
    --brand-400: oklch(52%   0.083 165);
    --help:      oklch(48%   0.145 40);
    --give:      oklch(48%   0.095 82);
  }
}

@media (min-width: 900px) { :root { --header-h: 84px; } }

/* ---------- 2. Reset ----------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* WCAG 2.4.11 — a focused element must never hide under the sticky header */
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-4); max-width: 66ch; text-wrap: pretty; }

a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { color: var(--brand-600); }

ul, ol { margin: 0 0 var(--sp-5); padding-left: 1.35em; }
li { margin-bottom: var(--sp-2); max-width: 62ch; }
li::marker { color: var(--brand-400); }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-7) 0; }

strong, b { font-weight: 650; }

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

::selection { background: var(--brand-100); color: var(--brand-600); }

/* ---------- 3. Layout helpers ------------------------------------------- */

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 700px) { .wrap { width: min(100% - 4rem, var(--wrap)); } }

.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
@media (min-width: 700px) { .wrap-narrow { width: min(100% - 4rem, var(--wrap-narrow)); } }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--ground2 { background: var(--ground-2); }
.section--brand { background: var(--brand); color: #f4faf7; }
.section--brand h2, .section--brand h3 { color: #ffffff; }
.section--brand a { color: #cfe9df; }

/* Deferred rendering for heavy below-fold blocks (INP + style-recalc win). */
.defer { content-visibility: auto; contain-intrinsic-size: auto 720px; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: var(--sp-6); }
}

.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.center p { margin-inline: auto; }

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

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 999;
  transform: translateY(-200%);
  background: var(--ink); color: #fff; padding: .85rem 1.25rem;
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* ---------- 4. Eyebrow / label / rule ----------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--sp-3);
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: ""; width: 1.6rem; height: 2px; background: var(--brand-400);
  flex: none; border-radius: 2px;
}
.eyebrow--plain::before { display: none; }
.center .eyebrow { justify-content: center; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}

.fine { font-size: var(--step--1); color: var(--ink-3); }

/* ---------- 5. Buttons --------------------------------------------------- */

.btn {
  --btn-bg: var(--brand);
  --btn-fg: #ffffff;
  --btn-bd: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px;           /* > WCAG 2.5.8 floor of 24px, sized for older phones */
  padding: .85rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bd); border-radius: var(--r-pill);
  font: inherit; font-size: var(--step--1); font-weight: 620; letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
  will-change: transform;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

.btn--help  { --btn-bg: var(--help);  --btn-bd: var(--help); }
.btn--give  { --btn-bg: var(--give);  --btn-bd: var(--give); }
.btn--ink   { --btn-bg: var(--ink);   --btn-bd: var(--ink); }
.btn--ghost { --btn-bg: transparent;  --btn-fg: var(--ink); --btn-bd: var(--rule-strong); }
.btn--ghost:hover { --btn-bg: var(--surface); }
.btn--onbrand { --btn-bg: #ffffff; --btn-fg: var(--brand-600); --btn-bd: #ffffff; }
.btn--onbrand-ghost { --btn-bg: transparent; --btn-fg: #ffffff; --btn-bd: rgba(255,255,255,.5); }
.btn--lg { min-height: 60px; padding: 1.05rem 2rem; font-size: var(--step-0); }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.center .btn-row { justify-content: center; }

/* ---------- 6. Header ---------------------------------------------------- */

.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.header[data-stuck="true"] { border-bottom-color: var(--rule); background: color-mix(in srgb, var(--ground) 96%, transparent); }
@supports not (backdrop-filter: blur(1px)) { .header { background: var(--ground); } }

/* Utility strip — the "Consistent Help" bar (WCAG 3.2.6).
   Identical position on every page. Carries the tap-to-call number. */
.utility {
  background: var(--brand-600); color: #dcece6;
  font-size: var(--step--2);
}
.utility .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 40px; flex-wrap: wrap;
}
.utility a { color: #ffffff; text-decoration: none; font-weight: 600; }
.utility a:hover { text-decoration: underline; }
.utility-links { display: flex; gap: var(--sp-5); align-items: center; }
.utility-call {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .1rem;
}
.utility-note { color: #a9cdc0; }
@media (max-width: 700px) {
  .utility-note { display: none; }
  .utility .wrap { justify-content: center; gap: var(--sp-4); }
}

.nav {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand-lockup {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--ink); margin-right: auto;
  padding: .25rem 0;
}
.brand-mark { flex: none; width: 42px; height: 42px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display); font-weight: 650;
  font-size: 1.22rem; letter-spacing: -.02em; color: var(--brand);
}
.brand-sub {
  font-family: var(--font-mono); font-size: .61rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 2px;
}

.nav-links { display: none; }
@media (min-width: 1000px) {
  .nav-links { display: flex; align-items: center; gap: var(--sp-2); }
}
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 .85rem; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none;
  font-size: var(--step--1); font-weight: 560;
}
.nav-link:hover { color: var(--ink); background: var(--ground-2); }
.nav-link[aria-current="page"] { color: var(--brand); font-weight: 650; }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 8px;
  height: 2px; background: var(--brand); border-radius: 2px;
}

.nav-cta { display: flex; align-items: center; gap: var(--sp-2); }
/* On mobile the HELP button is never inside the hamburger. */
.nav-cta .btn { min-height: 46px; padding: .6rem 1.1rem; font-size: var(--step--1); }
@media (max-width: 620px) { .nav-cta .btn--give { display: none; } }

.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; flex: none;
  background: transparent; border: 1.5px solid var(--rule-strong);
  border-radius: var(--r-sm); cursor: pointer; color: var(--ink);
}
@media (min-width: 1000px) { .hamburger { display: none; } }
.hamburger span {
  position: relative; display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .25s var(--ease), opacity .18s linear;
}
.hamburger span::before, .hamburger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .25s var(--ease);
}
.hamburger span::before { top: -6px; }
.hamburger span::after  { top: 6px; }
.hamburger[aria-expanded="true"] span { background: transparent; }
.hamburger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--rule); background: var(--ground);
  padding-block: var(--sp-4) var(--sp-6);
  max-height: calc(100dvh - var(--header-h) - 40px); overflow-y: auto;
}
.mobile-menu[data-open="true"] { display: block; }
@media (min-width: 1000px) { .mobile-menu { display: none !important; } }
.mobile-menu a {
  display: flex; align-items: center; min-height: 54px;
  padding: .5rem 0; border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none; font-weight: 560; font-size: var(--step-0);
}
.mobile-menu a[aria-current="page"] { color: var(--brand); font-weight: 680; }
.mobile-menu .btn { margin-top: var(--sp-5); }

/* ---------- 7. Hero ------------------------------------------------------ */

.hero {
  position: relative;
  padding-block: clamp(3rem, 1.5rem + 7vw, 6.5rem) clamp(3rem, 2rem + 5vw, 5.5rem);
  overflow: clip;
  isolation: isolate;
}
.hero::before {
  /* Warm radial wash + film grain, entirely in CSS (zero image payload) */
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 130%;
  z-index: -2;
  background:
    radial-gradient(58% 62% at 12% 8%,  rgba(44,122,99,.16), transparent 62%),
    radial-gradient(52% 55% at 92% 22%, rgba(201,154,46,.20), transparent 60%),
    radial-gradient(48% 48% at 70% 96%, rgba(184,70,31,.11), transparent 66%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.hero-grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-8); }
}

.hero h1 {
  font-size: var(--step-6);
  letter-spacing: -.032em;
  max-width: 15ch;
  margin-bottom: var(--sp-5);
}
.hero h1 em {
  font-style: normal;
  color: var(--brand);
  position: relative;
  white-space: nowrap;
}
.hero h1 em::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; bottom: .04em;
  height: .22em; z-index: -1; border-radius: .1em;
  background: linear-gradient(90deg, rgba(201,154,46,.42), rgba(201,154,46,.16));
}
.hero .lede { font-size: var(--step-1); max-width: 46ch; margin-bottom: var(--sp-6); }

/* The three doors */
.doors { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .doors { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .doors { grid-template-columns: 1fr; gap: var(--sp-4); } }

.door {
  --door-accent: var(--brand);
  position: relative; display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--door-accent);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-5);
  text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  min-height: 100%;
}
.door:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); color: var(--ink); }
.door--help  { --door-accent: var(--help); }
.door--refer { --door-accent: var(--brand); }
.door--give  { --door-accent: var(--give); }

.door-kicker {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--door-accent); margin-bottom: var(--sp-2);
}
.door-title {
  font-family: var(--font-display); font-size: var(--step-2);
  font-weight: 620; line-height: 1.1; margin-bottom: var(--sp-2);
  letter-spacing: -.02em;
}
.door-body { font-size: var(--step--1); color: var(--ink-2); margin: 0; }
.door-go {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--sp-4);
  font-size: var(--step--1); font-weight: 650; color: var(--door-accent);
}
.door-go svg { transition: transform .22s var(--ease); }
.door:hover .door-go svg { transform: translateX(5px); }

/* Hero side panel — the live capacity card */
.capacity-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: var(--sp-6);
  position: relative; overflow: hidden;
}
.capacity-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--give-400), var(--help));
}
.capacity-status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ok); background: var(--ok-100);
  padding: .35rem .7rem; border-radius: var(--r-pill); margin-bottom: var(--sp-4);
}
.pulse {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none;
  position: relative;
}
@media (prefers-reduced-motion: no-preference) {
  .pulse::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: currentColor; animation: pulse 2.4s var(--ease) infinite;
  }
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

.capacity-number {
  font-family: var(--font-display);
  font-size: var(--step-6); line-height: .9; font-weight: 620;
  letter-spacing: -.04em; color: var(--brand);
  margin-bottom: var(--sp-2);
}
.capacity-label { font-size: var(--step-0); font-weight: 620; margin-bottom: var(--sp-1); }
.capacity-meta {
  font-family: var(--font-mono); font-size: var(--step--2);
  color: var(--ink-3); letter-spacing: .04em;
  padding-top: var(--sp-4); margin-top: var(--sp-4); border-top: 1px solid var(--rule);
}
.capacity-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.capacity-list li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: var(--step--1); color: var(--ink-2); margin-bottom: var(--sp-2);
}
.capacity-list svg { flex: none; margin-top: .28em; color: var(--brand-400); }

/* ---------- 8. Trust strip ---------------------------------------------- */

.trust-strip {
  border-block: 1px solid var(--rule);
  background: var(--ground-2);
  padding-block: var(--sp-5);
}
.trust-items {
  display: grid; gap: var(--sp-4) var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: center;
}
.trust-item {
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: var(--step--1); color: var(--ink-2); line-height: 1.4;
}
.trust-item svg { flex: none; color: var(--brand-400); margin-top: .1em; }
.trust-item b { display: block; color: var(--ink); font-weight: 640; }

/* ---------- 9. Cards ----------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
a.card { text-decoration: none; color: var(--ink); }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); color: var(--ink); }
.card h3 { margin-bottom: var(--sp-3); font-size: var(--step-1); }
.card p:last-child { margin-bottom: 0; }
.card--flat { box-shadow: none; }
.card--tint { background: var(--brand-tint); border-color: var(--brand-100); }

.card-icon {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--brand-100); color: var(--brand);
  margin-bottom: var(--sp-4);
}
.card-icon--help { background: var(--help-100); color: var(--help-dark); }
.card-icon--give { background: var(--give-100); color: var(--give); }

.card-link {
  margin-top: auto; padding-top: var(--sp-4);
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--step--1); font-weight: 650; color: var(--brand);
}
.card-link svg { transition: transform .22s var(--ease); }
a.card:hover .card-link svg { transform: translateX(5px); }

/* Numbered step cards */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } .steps--3 { grid-template-columns: repeat(3, 1fr); } }
.step {
  counter-increment: step;
  position: relative;
  padding-top: var(--sp-6);
  border-top: 2px solid var(--rule-strong);
}
.step::before {
  content: counter(step);
  position: absolute; top: calc(-1 * var(--sp-5)); left: 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 700;
  box-shadow: 0 0 0 6px var(--ground);
}
.section--ground2 .step::before { box-shadow: 0 0 0 6px var(--ground-2); }
.step h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.step p { font-size: var(--step--1); color: var(--ink-2); margin-bottom: 0; }
.step-time {
  display: inline-block; margin-top: var(--sp-3);
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-100);
  padding: .25rem .6rem; border-radius: var(--r-sm);
}

/* ---------- 10. Stats ---------------------------------------------------- */

.stats { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat { border-top: 3px solid var(--brand-400); padding-top: var(--sp-4); }
.stat-num {
  font-family: var(--font-display); font-size: var(--step-4);
  font-weight: 620; line-height: 1; letter-spacing: -.035em; color: var(--brand);
  margin-bottom: var(--sp-2);
}
.section--brand .stat { border-top-color: rgba(255,255,255,.45); }
.section--brand .stat-num { color: #ffffff; }
.stat-label { font-size: var(--step--1); color: var(--ink-2); line-height: 1.35; }
.section--brand .stat-label { color: rgba(255,255,255,.85); }

/* ---------- 11. Locations ------------------------------------------------ */

.loc {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-1);
}
.loc-head {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3);
}
.loc-head h3 { margin: 0 0 .2rem; font-size: var(--step-1); }
.loc-region { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.loc-body { padding: var(--sp-5); flex: 1; }
.loc-body dl { margin: 0; display: grid; gap: var(--sp-3); }
.loc-body dt {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px;
}
.loc-body dd { margin: 0; font-size: var(--step--1); color: var(--ink-2); }
.loc-foot { padding: 0 var(--sp-5) var(--sp-5); }

.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  padding: .3rem .65rem; border-radius: var(--r-pill);
  background: var(--ground-3); color: var(--ink-2); white-space: nowrap;
}
.badge--open { background: var(--ok-100); color: var(--ok); }
.badge--full { background: var(--ground-3); color: var(--ink-3); }
.badge--help { background: var(--help-100); color: var(--help-dark); }

/* ---------- 12. Callout / quote ------------------------------------------ */

.callout {
  border-left: 4px solid var(--give-400);
  background: var(--give-tint);
  padding: var(--sp-5) var(--sp-6);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.callout--help { border-left-color: var(--help); background: var(--help-tint); }
.callout--brand { border-left-color: var(--brand-400); background: var(--brand-tint); }
.callout p:last-child { margin-bottom: 0; }
.callout h3 { font-size: var(--step-1); }

.pull {
  font-family: var(--font-display);
  font-size: var(--step-3); line-height: 1.22; letter-spacing: -.022em;
  color: var(--ink); max-width: 22ch; text-wrap: balance;
}

/* ---------- 13. Accordion (FAQ) ------------------------------------------ */

.faq { border-top: 1px solid var(--rule); }
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--sp-5) 3rem var(--sp-5) 0;
  position: relative;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600;
  line-height: 1.25; letter-spacing: -.015em;
  min-height: 52px; display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%; width: 16px; height: 16px;
  margin-top: -8px;
  background:
    linear-gradient(var(--brand), var(--brand)) center/16px 2px no-repeat,
    linear-gradient(var(--brand), var(--brand)) center/2px 16px no-repeat;
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--brand); }
.faq .faq-body { padding: 0 0 var(--sp-5); }
.faq .faq-body > :last-child { margin-bottom: 0; }

/* ---------- 14. Forms ---------------------------------------------------- */

.form-shell {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
}

.progress {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6);
  list-style: none; padding: 0;
}
.progress li {
  flex: 1; margin: 0; font-size: var(--step--2); font-family: var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  padding-top: .7rem; border-top: 4px solid var(--rule);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.progress li[data-state="active"] { color: var(--brand); border-top-color: var(--brand); font-weight: 700; }
.progress li[data-state="done"] { color: var(--ok); border-top-color: var(--ok); }

.fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-6); }
.fieldset legend {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 620;
  letter-spacing: -.02em; padding: 0; margin-bottom: var(--sp-2);
}
.fieldset .fine { margin-bottom: var(--sp-5); }

.field { margin-bottom: var(--sp-5); }
.field > label, .field-label {
  display: block; font-weight: 620; font-size: var(--step--1);
  margin-bottom: .4rem; color: var(--ink);
}
.field-hint { display: block; font-size: var(--step--2); color: var(--ink-3); margin-bottom: .5rem; font-weight: 400; }
.req { color: var(--help); font-weight: 700; }

.input, .select, .textarea {
  width: 100%; min-height: 54px;
  padding: .8rem 1rem;
  font: inherit; font-size: var(--step--1);
  color: var(--ink); background: var(--ground);
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; background: var(--surface);
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236f635a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.75rem;
}
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea { border-color: var(--err); background: var(--err-100); }
.field-error {
  display: none; margin-top: .45rem; font-size: var(--step--2);
  color: var(--err); font-weight: 600;
}
.field[data-invalid="true"] .field-error { display: flex; gap: .4rem; align-items: center; }

.field-row { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

.choices { display: grid; gap: var(--sp-2); }
@media (min-width: 640px) { .choices--2 { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex; align-items: flex-start; gap: .75rem;
  min-height: 52px; padding: .85rem 1rem;
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-sm);
  background: var(--ground); cursor: pointer;
  font-size: var(--step--1); line-height: 1.4;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.choice:hover { border-color: var(--ink-3); }
.choice input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--brand); }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.form-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  padding-top: var(--sp-5); border-top: 1px solid var(--rule);
  align-items: center;
}
.form-actions .spacer { margin-left: auto; }

.form-note {
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  background: var(--brand-tint); border-radius: var(--r-md);
  font-size: var(--step--2); color: var(--ink-2);
}
.form-note p { margin-bottom: 0; max-width: none; }

.form-status { margin-bottom: var(--sp-5); }
.alert {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md);
  font-size: var(--step--1); border: 1px solid transparent;
}
.alert svg { flex: none; margin-top: .15em; }
.alert p { margin: 0; }
.alert--ok  { background: var(--ok-100);  color: var(--ok);  border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.alert--err { background: var(--err-100); color: var(--err); border-color: color-mix(in srgb, var(--err) 25%, transparent); }
.alert--info{ background: var(--brand-tint); color: var(--brand-600); border-color: var(--brand-100); }

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.step-panel[hidden] { display: none !important; }

/* ---------- 15. Amounts (donate) ----------------------------------------- */

.amounts { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.amount {
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-md);
  background: var(--surface); padding: var(--sp-4); cursor: pointer;
  text-align: left; font: inherit; color: var(--ink);
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  min-height: 96px;
}
.amount:hover { border-color: var(--give-400); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.amount[aria-pressed="true"] { border-color: var(--give); background: var(--give-tint); box-shadow: var(--shadow-2); }
.amount-value {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 640;
  letter-spacing: -.03em; color: var(--give); display: block; line-height: 1.05;
}
.amount-desc { font-size: var(--step--2); color: var(--ink-2); display: block; margin-top: .35rem; line-height: 1.35; }

/* ---------- 16. Timeline ------------------------------------------------- */

.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(var(--brand-400), var(--rule)); border-radius: 2px;
}
.timeline li { position: relative; padding-left: 2.4rem; margin-bottom: var(--sp-6); max-width: 62ch; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand);
}
.timeline-year {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); font-weight: 700; display: block; margin-bottom: .2rem;
}
.timeline h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.timeline p { font-size: var(--step--1); color: var(--ink-2); margin-bottom: 0; }

/* ---------- 17. Big CTA band --------------------------------------------- */

.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--brand); color: #f2faf6;
  border-radius: var(--r-xl);
  padding: clamp(2.25rem, 1.5rem + 4vw, 4.5rem);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 90% at 88% 12%, rgba(201,154,46,.34), transparent 62%),
    radial-gradient(50% 80% at 8% 96%, rgba(184,70,31,.28), transparent 60%);
}
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 52ch; }
.cta-band .btn-row { margin-top: var(--sp-6); }

/* ---------- 18. Footer --------------------------------------------------- */

.footer {
  background: var(--ink); color: #cfc6bc;
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--step--1);
}
.footer a { color: #efe8e0; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer h2, .footer h3 { color: #fff; }
.footer-top { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: #948a80; }
.footer-brand p { color: #b3a99f; font-size: var(--step--1); margin-top: var(--sp-4); max-width: 34ch; }
.footer h3 {
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #948a80; margin-bottom: var(--sp-4);
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0; }
.footer li a { display: block; min-height: 44px; display: flex; align-items: center; }
.footer-bottom {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.13);
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6);
  justify-content: space-between; align-items: center;
  font-size: var(--step--2); color: #948a80;
}
.footer-bottom a { color: #b3a99f; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

.footer-call {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 620;
  color: #fff !important; text-decoration: none !important; letter-spacing: -.02em;
  margin-top: var(--sp-2);
}

/* ---------- 19. Mobile sticky action bar --------------------------------- */

.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--rule);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -6px 22px rgba(38,28,18,.10);
}
@media (min-width: 1000px) { .action-bar { display: none; } }
body:has(.action-bar) { padding-bottom: 68px; }
.action-bar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 64px; background: var(--surface); color: var(--ink);
  text-decoration: none; font-weight: 650; font-size: var(--step--1);
}
.action-bar a.is-call { background: var(--help); color: #fff; }
.action-bar a.is-primary { background: var(--brand); color: #fff; }

/* ---------- 20. Breadcrumb ----------------------------------------------- */

.crumbs {
  padding-block: var(--sp-4);
  font-size: var(--step--2); color: var(--ink-3);
  font-family: var(--font-mono); letter-spacing: .04em;
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs li { margin: 0; display: flex; gap: .4rem; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--rule-strong); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- 21. Page header (interior) ----------------------------------- */

.page-head {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(2.5rem, 1.5rem + 4vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 120% at 88% -10%, rgba(44,122,99,.14), transparent 60%),
    radial-gradient(60% 110% at 4% 110%, rgba(201,154,46,.15), transparent 62%);
}
.page-head h1 { max-width: 18ch; margin-bottom: var(--sp-4); font-size: var(--step-5); }
.page-head .lede { max-width: 58ch; margin-bottom: 0; }
.page-head--help::before {
  background: radial-gradient(70% 120% at 88% -10%, rgba(184,70,31,.16), transparent 60%),
              radial-gradient(60% 110% at 4% 110%, rgba(201,154,46,.14), transparent 62%);
}

/* ---------- 22. Prose (long-form pages) ---------------------------------- */

.prose h2 { margin-top: var(--sp-8); font-size: var(--step-3); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-6); font-size: var(--step-1); }
.prose > p, .prose > ul, .prose > ol { max-width: 66ch; }

.table-wrap { overflow-x: auto; margin-bottom: var(--sp-5); -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); min-width: 480px; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
tbody tr:hover { background: var(--ground-2); }

/* ---------- 23. Tag list ------------------------------------------------- */

.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.tags li { margin: 0; }
.tag {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .4rem .9rem; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--rule);
  font-size: var(--step--2); color: var(--ink-2); text-decoration: none;
}
a.tag:hover { border-color: var(--brand-400); color: var(--brand); }

/* ---------- 24. Motion layer --------------------------------------------- */
/* The base state below is the FINAL state. Browsers without scroll-driven
   animation support (Firefox, iOS < 26) simply see finished content.        */

.reveal { opacity: 1; transform: none; }
.reveal-child > * { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    .reveal-child > * {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 24%;
    }
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-drift {
      animation: hero-drift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
  }
}
@keyframes hero-drift {
  to { transform: translateY(4%) scale(1.03); opacity: .78; }
}

/* One-shot entrance for above-the-fold content (no scroll timeline needed) */
@media (prefers-reduced-motion: no-preference) {
  .enter { animation: enter-up .8s var(--ease-out) both; }
  .enter-1 { animation-delay: .04s; }
  .enter-2 { animation-delay: .12s; }
  .enter-3 { animation-delay: .20s; }
  .enter-4 { animation-delay: .28s; }
  .enter-5 { animation-delay: .36s; }
}
@keyframes enter-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Line-mask headline reveal — clip-path is compositor-tier */
@media (prefers-reduced-motion: no-preference) {
  .line-reveal > span {
    display: block;
    animation: line-up .9s var(--ease-out) both;
    clip-path: inset(0 0 0 0);
  }
  .line-reveal > span:nth-child(2) { animation-delay: .09s; }
  .line-reveal > span:nth-child(3) { animation-delay: .18s; }
}
@keyframes line-up {
  from { opacity: 0; transform: translateY(.5em); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none;             clip-path: inset(0 0 -10% 0); }
}

/* Global reduced-motion kill switch */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* Cross-document view transitions — pure enhancement */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root), ::view-transition-new(root) { object-fit: cover; }

/* ---------- 25. Print ---------------------------------------------------- */

@media print {
  .header, .footer, .action-bar, .cta-band, .btn, .hamburger, .mobile-menu { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .card, .form-shell, .loc { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .page-head::before, .hero::before, .hero::after { display: none; }
}