/* ============================================================================
   HUMAN CONCERN INTERNATIONAL — SHARED DESIGN SYSTEM
   Adsorse Technologies · August 2026

   Everything used by more than one page: tokens, base, type, buttons, fields,
   the sticky donate bar, header, dropdowns, mobile drawer, surface bands,
   icon motion, footer, reveals and the shared responsive rules.

   Load order on every page:
       <link rel="stylesheet" href="shared.css">
       <link rel="stylesheet" href="styles.css">     <- homepage only
       <link rel="stylesheet" href="campaign.css">   <- campaign pages only

   Page-specific files must not redefine tokens. Change them here once.
   ========================================================================= */


/* ---------------------------------------------------------------- TOKENS  */
:root {
  /* Brand — unchanged from the live site */
  --red: #E32226;
  --red-dark: #B71C1F;
  --red-tint: #FCEBEB;

  /* New surfaces */
  --maroon: #4A0E10;
  --maroon-2: #3A0A0C;
  --sand: #FAF7F4;
  --white: #FFFFFF;

  /* Ink — warmer than the current pure black */
  --ink: #151312;
  --ink-2: #4A423E;
  --ink-3: #7A6E68;
  --line: #EAE0D9;
  --line-2: #D8C9C1;

  /* On dark */
  --on-dark: #FFFFFF;
  --on-dark-2: #E8D2CF;
  --on-dark-3: #C79E99;
  --accent-dark: #FF9E96;

  /* Type. Elementor: load Inter (400/600/700) + a serif for the accent role.
     Stacks below are graceful fallbacks so the prototype needs no webfonts. */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  /* Scale */
  --shell: 1240px;
  --hci-gap: clamp(1rem, 2.4vw, 1.75rem);
  --pad-s: clamp(56px, 7vw, 104px);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Wide, low-opacity, multi-stop. A single tight shadow reads as a hard
     edge on hover — these stay soft as the card lifts. */
  --sh-1: 0 1px 2px rgba(74, 14, 16, .035), 0 3px 10px rgba(74, 14, 16, .035);
  --sh-2: 0 2px 6px rgba(74, 14, 16, .035), 0 10px 24px rgba(74, 14, 16, .05), 0 22px 48px rgba(74, 14, 16, .045);
  --sh-3: 0 2px 8px rgba(74, 14, 16, .04), 0 14px 32px rgba(74, 14, 16, .06), 0 32px 72px rgba(74, 14, 16, .075);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --bar-h: 60px;
}

/* ------------------------------------------------------------------ BASE  */
*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px
}

body {
  margin: 0;
  padding-bottom: var(--bar-h);
  /* clears the fixed bottom donate bar */
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden makes body a scroll container on the Y axis
     too (browsers compute an unset overflow-y as auto once overflow-x is
     set), which breaks position:sticky on the header — clip prevents the
     same horizontal overflow without creating that scroll container. */
  overflow-x: clip;
}

img,
svg {
  max-width: 100%
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none
}

p {
  margin: 0 0 1em
}

p:last-child {
  margin-bottom: 0
}

a {
  color: inherit
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer
}

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

.band--maroon :focus-visible,
.hero :focus-visible,
.donatebar :focus-visible,
.header :focus-visible,
.footer :focus-visible {
  outline-color: #FFB3AD
}

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

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 999;
  background: var(--red);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .9rem;
  transition: top .18s var(--ease);
}

.skip:focus {
  top: 12px
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 32px)
}

/* --------------------------------------------------------------- TYPE     */
/* Red text on light grounds uses --red-dark, not --red.
   #E32226 on white is 4.0:1 and fails WCAG AA at these sizes — the exact
   failure flagged on the live site. #B71C1F is 6.2:1 and still reads as
   the brand red. Solid red fills (buttons, tags) keep #E32226. */
.eyebrow {
  margin: 0 0 .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-dark);
}

.eyebrow--onDark {
  color: var(--accent-dark)
}

.h2 {
  margin: 0 0 .5rem;
  font-size: clamp(1.7rem, 3.5vw, 2.65rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: 700;
  text-wrap: balance;
}

/* The single accent role: one word per heading, never two. */
.h2 em,
.hero__h em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--red);
}

.h2--onDark {
  color: var(--on-dark)
}

.h2--onDark em {
  color: var(--accent-dark)
}

.h3 {
  margin: 0 0 .35rem;
  font-size: 1.12rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.012em
}

.h3--onDark {
  color: var(--on-dark)
}

.lead {
  font-size: 1.06rem;
  color: var(--ink-2);
  max-width: 56ch
}

.band--maroon .lead,
.autoajr-band .lead {
  color: var(--on-dark-2)
}

/* --------------------------------------------------------------- BUTTONS  */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: .94rem;
  line-height: 1;
  padding: 14px 26px;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease),
    transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.btn:hover {
  transform: translateY(-2px)
}

.btn:active {
  transform: translateY(0)
}

.btn:disabled,
.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn__ico {
  width: 1em;
  height: 1em;
  flex: none
}

.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 2px 10px rgba(227, 34, 38, .28)
}

.btn--primary:hover {
  background: var(--red-dark);
  box-shadow: 0 8px 22px rgba(227, 34, 38, .34)
}

.btn--ghost {
  background: transparent;
  color: var(--red);
  border-color: var(--red)
}

.btn--ghost:hover {
  background: var(--red);
  color: #fff
}

.btn--onDark {
  background: #fff;
  color: var(--maroon)
}

.btn--onDark:hover {
  background: var(--on-dark-2)
}

.btn--sm {
  padding: 10px 20px;
  font-size: .86rem
}

.btn--lg {
  padding: 16px 32px;
  font-size: 1rem
}

.link {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--red-dark);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
}

.link--onDark {
  color: var(--accent-dark)
}

.link svg {
  width: 14px;
  height: 14px;
  transition: transform .22s var(--ease)
}

.link:hover svg {
  transform: translateX(4px)
}

.link--lg {
  font-size: 1rem
}

.rnd {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  color: var(--maroon);
  display: grid;
  place-items: center;
  background: #fff;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

.rnd svg {
  width: 16px;
  height: 16px
}

.rnd .flip {
  transform: scaleX(-1)
}

.rnd:hover {
  border-color: var(--red);
  color: var(--red)
}

.rnd:disabled {
  opacity: .35;
  cursor: not-allowed
}

.rnd:disabled:hover {
  border-color: var(--line-2);
  color: var(--maroon)
}

.tag {
  display: inline-block;
  align-self: flex-start;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--red-tint);
  color: var(--red-dark);
}

.tag--urgent {
  background: var(--red);
  color: #fff
}

.tag--muted {
  background: var(--line);
  color: var(--ink-3)
}

.tag--success {
  background: #E7F3E9;
  color: #1F7A34
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-2);
  background: #fff;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}

.chip:hover {
  border-color: var(--red);
  background: var(--red);
  color: #fff
}

.chip--wide {
  width: 100%
}

/* --------------------------------------------------------------- FIELDS   */
.field {
  font: inherit;
  font-size: .88rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  padding: 10px 12px;
}

.field::placeholder {
  color: rgba(255, 255, 255, .55)
}

.field--select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: calc(100% - 12px) 50%;
  background-size: 10px 6px;
  background-repeat: no-repeat;
}

.field--select::-ms-expand {
  display: none;
}

.field--select option {
  color: var(--ink);
  background: #fff
}

.field--amount {
  width: auto;
  min-width: 118px;
  padding-left: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums
}

input.field--amount::-webkit-outer-spin-button,
input.field--amount::-webkit-inner-spin-button {
  appearance: none;
  margin: 0
}

input.field--amount {
  appearance: textfield
}

.segmented {
  display: flex;
  background: rgba(255, 255, 255, .12);
  border-radius: var(--r-pill);
  padding: 3px;
  flex: none
}

.segmented__btn {
  padding: 7px 15px;
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-weight: 600;
  color: var(--on-dark-2);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

.segmented__btn.is-on {
  background: #fff;
  color: var(--maroon)
}

/* Light-ground variant — the sticky bar's segmented toggle is styled for
   the dark donate bar (translucent white on maroon); this re-themes it
   dark-on-light for use on white/sand grounds (donation form tabs,
   homepage campaign-category tabs), reused wherever a two-or-more-way
   pill toggle needs to sit outside the donate bar. */
.segmented--light {
  background: var(--sand);
  border: 1px solid var(--line);
}

.segmented--light .segmented__btn {
  color: var(--ink-2)
}

.segmented--light .segmented__btn.is-on {
  background: #fff;
  color: var(--maroon);
  box-shadow: var(--sh-1)
}

.amount {
  position: relative;
  display: flex;
  align-items: center
}

.amount__sym {
  position: absolute;
  left: 12px;
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  pointer-events: none
}

/* ==========================================================================
   S0 · STICKY DONATE BAR
   ========================================================================= */
/* Pinned to the bottom edge — within thumb reach on mobile, and it leaves
   the top of the page to the header alone. */
.donatebar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  background: var(--maroon);
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 -2px 10px rgba(20, 5, 6, .16), 0 -14px 40px rgba(20, 5, 6, .14);
  padding-bottom: env(safe-area-inset-bottom);
}

.donatebar__ico {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 3px;
  opacity: .75
}

/* Height comes from content only. Never size this from --bar-h: JS writes
   the measured height into that variable, so reading it back here creates a
   resize feedback loop that grows the bar on every observer tick. */
.donatebar__in {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 10px clamp(18px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.donatebar__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex: none
}

.donatebar__name {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  max-width: 9.5em;
  line-height: 1.15;
}

/* Real HCI lockup (logo.svg), 5071.72 × 1410.99 → aspect 3.594.
   The wordmark is white, so it only works on the dark bar / header / footer —
   which is where all three instances sit.
   NOTE FOR BUILD: the logo file's red is #FC0D0D; the site's CSS red is
   #E32226. Left as authored here. Worth reconciling with the brand owner. */
.hcilogo {
  display: block;
  flex: none;
  aspect-ratio: 3.594;
  width: auto
}

.hcilogo--sm {
  height: 24px
}

.hcilogo--md {
  height: 34px
}

.hcilogo--lg {
  height: 44px
}

.donatebar__form {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-inline: auto
}

.donatebar__label {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  flex: none
}

.donatebar__trust {
  margin: 0;
  flex: none;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--on-dark-3);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: color .18s var(--ease);
}

.donatebar__trust:hover,
.donatebar__trust:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================================================
   NEWSLETTER POPUP — net-new, site-wide chrome. Small, boxed, bottom-right,
   offset above the sticky donate bar via the already-measured --bar-h so
   the two never collide at any breakpoint.
   ========================================================================= */
.popup {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: calc(var(--bar-h, 60px) + 16px);
  z-index: 150;
  max-width: 340px;
  width: calc(100vw - 32px);
}

.popup[hidden] {
  display: none
}

/* Cookie-consent banner sits on the opposite side from the newsletter
   popup so the two never stack on top of each other. */
.popup--left {
  right: auto;
  left: clamp(16px, 3vw, 28px);
}

.popup__actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.popup__card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: clamp(18px, 3vw, 24px);
  opacity: 0;
  transform: translateY(16px) scale(.96);
}

.popup.is-on .popup__card {
  animation: popupIn .5s var(--ease) forwards;
}

@keyframes popupIn {
  to {
    opacity: 1;
    transform: none
  }
}

.popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ink-3);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

.popup__close:hover {
  background: var(--sand);
  color: var(--ink)
}

.popup__close svg {
  width: 15px;
  height: 15px
}

.popup__eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red-dark);
  margin: 0 0 6px
}

.popup__h {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 6px;
  padding-right: 22px
}

.popup__sub {
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0 0 14px
}

.popup__form {
  display: flex;
  gap: 8px
}

.popup__msg,
.capture__msg {
  font-size: .8rem;
  font-weight: 600;
  margin: 10px 0 0;
}

.popup__msg.is-success {
  color: #1F7A34;
}

.popup__msg.is-error {
  color: var(--red, #E32226);
}

/* .capture sits on a dark maroon band — the light popup colors above read poorly there. */
.capture__msg.is-success {
  color: #8FE0A8;
}

.capture__msg.is-error {
  color: #FFB3B3;
}

.popup__form .field {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--ink)
}

.popup__form .field::placeholder {
  color: var(--ink-3)
}

.popup__form .field:focus-visible {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-tint)
}

@media (prefers-reduced-motion: reduce) {
  .popup.is-on .popup__card {
    animation: none;
    opacity: 1;
    transform: none
  }
}

@media (max-width: 640px) {
  .popup {
    left: 12px;
    right: 12px;
    bottom: calc(var(--bar-h, 60px) + 12px);
    max-width: none;
    width: auto
  }

  .popup__card {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -8px 28px rgba(20, 5, 6, .18)
  }

  .popup.is-on .popup__card {
    transform: translateY(24px)
  }
}

/* ==========================================================================
   HEADER — unchanged visual language: dark pill, centred logo
   ========================================================================= */
.header {
  /* fixed, not sticky: sticky sticks only within the height of its own
     parent, and Elementor's Theme Builder wraps this in a Container that's
     exactly as tall as the header itself — so a sticky header would scroll
     out of view almost immediately. Fixed positions against the viewport
     instead, which is what actually keeps it floating in place, and lets
     the hero sit flush underneath it with no reserved gap (by design —
     the header is a floating pill over full-bleed content, not a
     solid bar that pushes content down). */
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 90;
  padding: 14px clamp(18px, 4vw, 32px);
}

.header__bar {
  max-width: var(--shell);
  margin-inline: auto;
  background: #111;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px 10px 10px;
  box-shadow: var(--sh-2);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1
}

.header__nav--right {
  justify-content: flex-end
}

.navlink {
  padding: 8px 11px;
  border-radius: var(--r-pill);
  font-size: .83rem;
  font-weight: 600;
  color: #EDE8E6;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}

.navlink:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff
}

.navpill {
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: .83rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.navpill:hover {
  background: var(--red-dark)
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none
}

.header__wordmark {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
  color: #fff;
}

.header__wordmark b {
  font-weight: 800
}

.header__mobile {
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: auto
}

.burger {
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  gap: 5px
}

.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease)
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

/* ---------------------------------------------------- HEADER DROPDOWNS  */
.hasmenu {
  position: relative
}

.navlink--menu {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  font-family: inherit
}

.caret {
  width: 12px;
  height: 12px;
  transition: transform .2s var(--ease)
}

.navlink--menu[aria-expanded="true"] {
  background: rgba(255, 255, 255, .12);
  color: #fff
}

.navlink--menu[aria-expanded="true"] .caret {
  transform: rotate(180deg)
}

.menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 20;
  min-width: 230px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* closed state: transform + visibility, so nothing flickers on load */
  transform: translateY(-6px);
  visibility: hidden;
  opacity: 0;
  transition: transform .2s var(--ease), opacity .18s var(--ease), visibility .18s;
}

.hasmenu--right .menu {
  left: auto;
  right: 0
}

.menu--wide {
  min-width: 320px
}

.navlink--menu[aria-expanded="true"]+.menu {
  transform: none;
  visibility: visible;
  opacity: 1
}

.menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

.menu a:hover {
  background: var(--red-tint);
  color: var(--red-dark)
}

.menu--wide a {
  padding: 10px 12px
}

.menu--wide b {
  display: block;
  font-size: .88rem;
  font-weight: 700
}

.menu--wide span {
  display: block;
  font-size: .76rem;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 2px
}

.menu--wide a:hover span {
  color: var(--red-dark)
}

/* little bridge so the pointer can cross the gap without closing the menu */
.menu::before {
  content: "";
  position: absolute;
  inset: -16px 0 100% 0;
  pointer-events: none
}

/* nested dropdowns (.menu .hasmenu > .menu) flyout to the side instead of
   stacking below, since the parent .menu is itself already a dropdown */
.menu .hasmenu {
  position: relative
}

.menu .hasmenu > .navlink--menu {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 5px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink);
  background: none;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

.menu .hasmenu > .navlink--menu:hover,
.menu .hasmenu > .navlink--menu[aria-expanded="true"] {
  background: var(--red-tint);
  color: var(--red-dark)
}

.menu .hasmenu > .navlink--menu .caret {
  transform: rotate(-90deg)
}

.menu .hasmenu > .navlink--menu[aria-expanded="true"] .caret {
  transform: rotate(-270deg)
}

.menu .hasmenu > .menu {
  top: -8px;
  left: 100%;
  margin-left: 6px
}

/* bridge for the nested flyout runs sideways, not below */
.menu .hasmenu > .menu::before {
  inset: 0 0 0 -16px
}

/* ------------------------------------------------------- MOBILE DRAWER  */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 200
}

.drawer[hidden] {
  display: none
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 6, 7, .6);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .28s var(--ease);
}

.drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(400px, 88vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 20px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  box-shadow: -12px 0 40px rgba(20, 6, 7, .28);
}

.drawer.is-open .drawer__scrim {
  opacity: 1
}

.drawer.is-open .drawer__panel {
  transform: none
}

/* Dark strip so the lockup's white wordmark works as authored — never
   invert the logo to fit a light panel. */
.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -18px -20px 0;
  padding: 16px 20px;
  background: #111;
}

.drawer__close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
}

.drawer__close svg {
  width: 18px;
  height: 18px
}

.drawer__close:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff
}

.drawer__cta {
  width: 100%
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.drawer__pill {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--red-tint);
  color: var(--red-dark);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
}

.drawer__link {
  display: block;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  color: var(--ink);
}

.drawer__link:hover {
  background: var(--sand)
}

.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: .95rem;
  text-align: left;
  color: var(--ink);
}

.acc__btn:hover {
  background: var(--sand)
}

.acc__btn .caret {
  width: 14px;
  height: 14px;
  flex: none
}

.acc__btn[aria-expanded="true"] {
  color: var(--red-dark)
}

.acc__btn[aria-expanded="true"] .caret {
  transform: rotate(180deg)
}

/* Single grid child (.acc__inner) — with several children the extra implicit
   rows are auto-sized and 0fr never collapses anything. */
.acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s var(--ease);
}

.acc__btn[aria-expanded="true"]+.acc__body {
  grid-template-rows: 1fr
}

.acc__inner {
  overflow: hidden;
  min-height: 0
}

.acc__body a {
  display: block;
  padding: 9px 14px 9px 26px;
  font-size: .87rem;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 2px solid var(--line);
  margin-left: 14px;
}

.acc__body a:hover {
  color: var(--red-dark);
  border-left-color: var(--red)
}

.drawer__foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .78rem;
  color: var(--ink-3);
}

.drawer__foot a {
  color: var(--red-dark);
  font-weight: 700;
  text-decoration: none
}

/* ==========================================================================
   BANDS — the surface rhythm. No two neighbours share a ground.
   ========================================================================= */
.band {
  position: relative
}

.band--sand {
  background: var(--sand)
}

.band--maroon {
  background: var(--maroon);
  color: var(--on-dark-2)
}

.section {
  padding-block: var(--pad-s)
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

.section__note {
  margin: 0;
  font-size: .88rem;
  color: var(--ink-3)
}

.grid {
  display: grid;
  gap: var(--hci-gap)
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

/* --------------------------------------------------- ANIMATED LINE ICONS  */
/* stroke-dasharray / stroke-dashoffset inherit into <use> shadow content,
   so one rule on the host animates every stroke inside the symbol. */
.icon {
  stroke-dasharray: 240;
  stroke-dashoffset: 0
}

.qcard:hover .icon,
.qcard:focus-visible .icon,
.pcard:hover .icon,
.pcard:focus-within .icon,
.step:hover .icon,
.autoajr__cards li:hover .icon {
  animation: draw 1.6s cubic-bezier(.33, .9, .28, 1) both
}

@keyframes draw {
  from {
    stroke-dashoffset: 240
  }

  to {
    stroke-dashoffset: 0
  }
}

/* ==========================================================================
   FOOTER — unchanged structure; `.is-new` marks prototype additions
   ========================================================================= */
.footer {
  background: #111;
  color: #BDB3AF;
  /* padding intentionally not set here — HCI_Widget_Footer's own Advanced >
     Spacing controls (see HCI_Spacing_Controls trait) are the single source
     of truth for this, defaulting to what used to be hardcoded here
     (76px/0/34px/0) so nothing visually changes until an admin tweaks it. */
  font-size: .88rem
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 2.2fr;
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.footer__brand .logomark {
  margin-bottom: 18px
}

.footer__addr {
  line-height: 1.75
}

.footer__addr a {
  color: #EDE8E6;
  text-decoration: none
}

.footer__addr a:hover {
  text-decoration: underline
}

.footer__cra {
  font-size: .78rem;
  color: #8C817D;
  margin-top: 16px
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px
}

.footer__cols h3 {
  margin: 0 0 12px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 700;
}

.footer__cols a {
  display: block;
  padding: 5px 0;
  color: #BDB3AF;
  text-decoration: none;
  font-size: .86rem;
  transition: color .18s var(--ease);
}

.footer__cols a:hover {
  color: #fff
}

.is-new {
  position: relative
}

.is-new::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  margin-left: 7px;
  vertical-align: middle;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 24px;
  font-size: .8rem;
  color: #8C817D;
}

.footer__bottom p {
  margin: 0
}

.footer__utils {
  display: flex;
  align-items: center;
  gap: 22px
}

.footer__utils a {
  color: #EDE8E6;
  text-decoration: none
}

.footer__legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem
}

.footer__legend i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  display: block
}

/* ==========================================================================
   REVEALS
   Transform only — never opacity. Content is always painted, so a section
   can never read as an empty gap mid-scroll. This is the fix for the dead
   whitespace on the live site.
   ========================================================================= */
[data-reveal]>* {
  transform: translateY(14px);
  transition: transform .42s var(--ease)
}

[data-reveal].is-in>* {
  transform: none
}


/* ==========================================================================
   RESPONSIVE — shared chrome only. Page files carry their own breakpoints.
   ========================================================================= */
@media (max-width:960px) {
  :root {
    --bar-h: 56px
  }

  .header__nav {
    display: none
  }

  .header__mobile {
    display: flex
  }

  .header__bar {
    padding: 8px 10px
  }

  .header__logo {
    margin-right: auto
  }

  .donatebar__trust {
    display: none
  }

  .donatebar__form {
    margin-inline: 0 auto
  }

  .segmented {
    display: none
  }

  /* frequency moves into the form on mobile */
  .field--select {
    max-width: 150px
  }
}

@media (max-width:640px) {
  body {
    font-size: 16px
  }

  /* The bar must stay ONE row — if it wraps, the sticky header below it
     overlaps. JS also measures the real height into --bar-h as a backstop. */
  .donatebar__in {
    gap: 8px;
    flex-wrap: nowrap
  }

  .donatebar__form {
    gap: 7px;
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    margin: 0
  }

  .field--select {
    flex: 1;
    min-width: 0;
    max-width: none;
    padding: 9px 26px 9px 10px;
    font-size: .82rem
  }

  .field--amount {
    width: auto;
    min-width: 84px;
    padding-left: 19px;
    font-size: .82rem
  }

  .amount__sym {
    left: 9px;
    font-size: .82rem
  }

  .donatebar__form .btn {
    padding: 9px 14px;
    font-size: .8rem
  }

  .donatebar__form .btn__ico {
    display: none
  }

  .section__head {
    flex-direction: column;
    align-items: flex-start
  }
}

@media (max-width:1080px) {
  .footer__top {
    grid-template-columns: 1fr
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  [data-reveal]>* {
    transform: none
  }
}

/* Print — the team will PDF this for review */
@media print {

  .donatebar,
  .header {
    position: static
  }

  .band,
  .section {
    break-inside: avoid
  }
}