/* ==========================================================================
   BLOODLINK — Shared Stylesheet
   Loaded on every page. Change a value here and it updates the whole site.
   ========================================================================== */

:root {
  --brand-primary: #A6322F;
  --brand-primary-dark: #7E2624;
  --brand-primary-light: #F6E4E3;
  --brand-sidebar: #1C1C1E;
  --brand-sidebar-hover: #2A2A2D;
  --bg-page: #FAF3F1;
  --bg-card: #FFFFFF;
  --text-primary: #211B1A;
  --text-secondary: #7A716F;
  --text-muted: #A79D9B;
  --border-color: #EEE1DF;

  --status-urgent-bg: #FBE1E0;
  --status-urgent-text: #A6322F;
  --status-high-bg: #FCEBDD;
  --status-high-text: #C06A2C;
  --status-medium-bg: #FCF3D9;
  --status-medium-text: #A98218;
  --status-low-bg: #E3EFFB;
  --status-low-text: #2C6BA6;
  --status-success-bg: #E4F3E7;
  --status-success-text: #2E7D42;
  --status-pending-bg: #FCF3D9;
  --status-pending-text: #A98218;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --sidebar-width: 240px;
}

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
}

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-primary-dark); }

/* ---------- Layout shell ---------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--brand-sidebar);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.5rem 1.5rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: #fff;
}

.sidebar-brand .brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-nav { flex: 1; }

.sidebar-nav .nav-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7A7678;
  padding: 1rem 0.75rem 0.35rem;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: #C9C5C4;
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
}

.sidebar-nav a:hover {
  background: var(--brand-sidebar-hover);
  color: #fff;
}

.sidebar-nav a.active {
  background: var(--brand-primary);
  color: #fff;
  font-weight: 500;
}

.sidebar-nav a.sub {
  padding-left: 2.4rem;
  font-size: 0.85rem;
}

.sidebar-footer {
  border-top: 1px solid #313133;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sidebar-footer .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3A3A3D;
  flex-shrink: 0;
}

.sidebar-footer .user-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
}

.sidebar-footer .user-role {
  font-size: 0.75rem;
  color: #8C8788;
}

/* ---------- Top header (per page) ---------- */

.page-header {
  background: var(--brand-primary);
  color: #fff;
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-header h1 {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0;
}

.page-header p {
  margin: 0.2rem 0 0;
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
}

.page-header .eyebrow {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  margin: 0;
}

.page-content {
  padding: 2rem;
  flex: 1;
}

/* ---------- Cards ---------- */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-align: center;
}

.stat-card .stat-number {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.stat-card .stat-label {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 0.4rem;
}

/* ---------- Buttons ---------- */

.btn-brand {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.btn-brand:hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  color: #fff;
}

.btn-outline-brand {
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
  background: transparent;
}

.btn-outline-brand:hover {
  background: var(--brand-primary-light);
  color: var(--brand-primary-dark);
}

/* ---------- Status badges ---------- */

.badge-status {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  display: inline-block;
}

.badge-urgent   { background: var(--status-urgent-bg);   color: var(--status-urgent-text); }
.badge-high     { background: var(--status-high-bg);     color: var(--status-high-text); }
.badge-medium   { background: var(--status-medium-bg);   color: var(--status-medium-text); }
.badge-low      { background: var(--status-low-bg);      color: var(--status-low-text); }
.badge-success  { background: var(--status-success-bg);  color: var(--status-success-text); }
.badge-pending  { background: var(--status-pending-bg);  color: var(--status-pending-text); }

/* ---------- Request / donor list item ---------- */

.list-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.9rem;
}

.list-item-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--status-urgent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  font-weight: 700;
  flex-shrink: 0;
}

/* ---------- Forms ---------- */

.form-label {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.form-control, .form-select {
  border-color: var(--border-color);
  border-radius: var(--radius-sm);
}

.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem var(--brand-primary-light);
}

/* ---------- Utility ---------- */

.text-brand { color: var(--brand-primary); }
.bg-page { background: var(--bg-page); }
.section-title { font-weight: 600; font-size: 1.05rem; margin-bottom: 1rem; }

@media (max-width: 767.98px) {
  .sidebar { display: none; }
}

/* ==========================================================================
   MARKETING SITE — landing page, login, signup
   Shares brand tokens above; adds the extra tokens/components these public
   pages need. Scoped with body.marketing / dedicated classes so nothing
   here affects the dashboard app pages.
   ========================================================================== */

:root {
  --brand-primary-900: #4b1a18;   /* darkest shade, used for gradients */
  --cream: #FDF1EC;
  --cream-soft: #FBE9E2;
  --shadow-sm: 0 6px 16px -8px rgba(166, 50, 47, .18);
  --shadow-md: 0 20px 36px -16px rgba(166, 50, 47, .28);
  --shadow-lg: 0 30px 60px -20px rgba(166, 50, 47, .4);
}

body.marketing {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background-color: var(--cream);
  color: var(--text-primary);
}

body.marketing h1,
body.marketing h2,
body.marketing h3 { letter-spacing: -0.015em; }

body.marketing a:focus-visible,
body.marketing button:focus-visible,
body.marketing input:focus-visible,
body.marketing select:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* solid brand-color background utility (bg-brand), pairs with the existing
   .btn-brand / .btn-outline-brand / .text-brand utilities above */
.bg-brand { background-color: var(--brand-primary) !important; }

body.marketing .btn { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
body.marketing .btn:hover { transform: translateY(-2px); }
body.marketing .btn-brand { box-shadow: var(--shadow-sm); }
body.marketing .btn-brand:hover { box-shadow: var(--shadow-md); }

.hero-section {
  min-height: calc(100vh - 72px); /* 72px is standard Bootstrap navbar height */
}

/* Fix vertical centering alignment for row margins */
.hero-section > .row {
  margin-top: 0;
  margin-bottom: 0;
}

/* sticky navbar that reacts to scroll (landing page) */
#mainNav { transition: box-shadow .25s ease, padding .25s ease; }
#mainNav.nav-scrolled { box-shadow: 0 8px 24px -10px rgba(0,0,0,.35); } /* shadow only: changing padding resized the bar and caused scroll jitter */

/* scroll-reveal animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* hero circular medallion illustration */
.medallion {
  width: 22rem; height: 22rem; max-width: 100%;
  box-shadow: 0 40px 80px -20px rgba(166,50,47,.55), 0 0 60px -10px rgba(166,50,47,.35);
}

/* hero stats strip — large white count-up numbers on a brand-colored band
   (kept separate from the dashboard's .stat-card .stat-number) */
.hero-stat-col { border-left: 1px solid rgba(255,255,255,.25); }
.hero-stat-col:first-child { border-left: none; }
@media (max-width: 767.98px) {
  .hero-stat-col { border-left: none; border-top: 1px solid rgba(255,255,255,.25); }
  .hero-stat-col:first-child { border-top: none; }
}

/* "Join the Movement" cards */
.movement-card {
  position: relative;
  height: 24rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.movement-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.movement-card svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.movement-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(122,35,29,0) 35%, rgba(93,25,20,.85) 78%, rgba(78,19,15,.95) 100%);
}
.movement-card .card-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; color: #fff; }
.movement-card .learn-link {
  color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.movement-card .learn-link svg.arrow { position: static; width: 14px; height: 14px; transition: transform .15s ease; }
.movement-card:hover .learn-link svg.arrow { transform: translateX(4px); }

/* dashed image placeholders used throughout the marketing pages */
.img-placeholder {
  background: repeating-linear-gradient(135deg, #efe6df, #efe6df 10px, #e9dcd2 10px, #e9dcd2 20px);
  border: 2px dashed rgba(122,35,29,.25);
  color: #a9968d;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.img-placeholder svg { opacity: .65; }
.img-placeholder .ph-label { font-size: .78rem; font-weight: 600; letter-spacing: .03em; margin-top: .5rem; }

/* Once a real photo is dropped into a placeholder box, add this modifier
   class to the same element. It clips the photo to the container's
   rounded corners and drops the dashed "empty" styling — the img itself
   just needs a src, no width/height attributes or inline styles required. */
.img-placeholder.has-photo {
  background: none;
  border: none;
  overflow: hidden;
  padding: 0;
}
.img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* generic content-card hover polish (supply-pulse card, testimonial cards, CTA banner) */
.content-card { box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; }
.content-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.process-icon { transition: transform .2s ease, box-shadow .2s ease; box-shadow: var(--shadow-sm); }
.process-icon:hover { transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow-md); }

/* testimonial fade slider */
.testimonial-slide { display: none; }
.testimonial-slide.active { display: flex; animation: marketingFadeIn .5s ease; }
@keyframes marketingFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.testi-dot {
  width: 8px; height: 8px; border: none; padding: 0; background: #e6c9c4; border-radius: 50%;
  transition: background .2s ease, transform .2s ease; cursor: pointer;
}
.testi-dot.active { background: var(--brand-primary); transform: scale(1.25); }

/* back-to-top button */
#backToTop {
  position: fixed; right: 24px; bottom: 24px; z-index: 1030;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-primary-dark); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
}
#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); }
#backToTop:hover { background: var(--brand-primary-900); }

/* ==========================================================================
   AUTH PAGES — shared by login.html and signup.html
   ========================================================================== */

.auth-shell { min-height: 100vh; display: flex; }

.auth-brand {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.08), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,.06), transparent 45%),
    linear-gradient(160deg, var(--brand-primary), var(--brand-primary-900));
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
}
.auth-brand .bg-shape { position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }

.quote-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  backdrop-filter: blur(4px);
}

.perk-row { display: flex; align-items: flex-start; gap: .75rem; }
.perk-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
}

.auth-form-panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.auth-card { width: 100%; max-width: 460px; }

body.marketing .auth-card .form-control,
body.marketing .auth-card .form-select { border-radius: 10px; padding: .7rem .9rem; }
body.marketing .auth-card .form-control:focus,
body.marketing .auth-card .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 .2rem var(--brand-primary-light);
}

.input-icon-group { position: relative; }
.input-icon-group input { padding-left: 2.6rem; }
.input-icon-group svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: #b09a90; }

.toggle-password {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #b09a90; padding: .2rem; display: flex;
}
.toggle-password:hover { color: var(--brand-primary); }

.divider { display: flex; align-items: center; gap: 1rem; color: #a9968d; font-size: .82rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #e9dcd2; }

.social-btn {
  border: 1px solid #e6d9d2; border-radius: 10px; background: #fff; padding: .6rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .88rem; color: var(--text-primary);
  transition: box-shadow .18s ease, transform .18s ease; width: 100%;
}
.social-btn:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }

body.marketing .form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); }

.strength-bar { height: 5px; border-radius: 3px; background: #e9dcd2; overflow: hidden; flex: 1; }
.strength-bar span { display: block; height: 100%; width: 0%; background: #d99a3a; transition: width .25s ease, background .25s ease; }

/* Portal switcher (donor/requester, organization, admin) on the login page */
.auth-tabs {
  display: flex;
  gap: .35rem;
  background: var(--cream-soft);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: .3rem;
  margin-bottom: 1.75rem;
}
.auth-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: .8rem;
  font-weight: 600;
  padding: .55rem .5rem;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.auth-tab:hover { color: var(--brand-primary-dark); }
.auth-tab.active { background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-sm); }
.auth-tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
@media (max-width: 380px) {
  .auth-tab span { display: none; }
  .auth-tab { padding: .6rem; }
}

.auth-note {
  background: var(--cream-soft);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: .85rem 1rem;
  font-size: .82rem;
  color: var(--text-secondary);
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}
.auth-note svg { color: var(--brand-primary); flex-shrink: 0; margin-top: .1rem; }

@media (max-width: 991.98px) {
  .auth-brand { display: none; }
}

/* ==========================================================================
   FAQ PAGE — accordion styling (brand-colored, reuses tokens above)
   ========================================================================== */

.faq-accordion .accordion-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  margin-bottom: .75rem;
}
.faq-accordion .accordion-button {
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-card);
  padding: 1.1rem 1.25rem;
}
.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--brand-primary-dark);
  background: var(--brand-primary-light);
  box-shadow: none;
}
.faq-accordion .accordion-button:focus {
  box-shadow: 0 0 0 .2rem var(--brand-primary-light);
  border-color: var(--brand-primary);
}
.faq-accordion .accordion-button::after {
  filter: sepia(60%) saturate(400%) hue-rotate(310deg) brightness(85%);
}
.faq-accordion .accordion-body {
  color: var(--text-secondary);
  padding: 0 1.25rem 1.1rem;
  font-size: .92rem;
  line-height: 1.6;
}

.faq-category-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--brand-primary);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* --- FAQ enhancements: search, category chips, empty state (FAQ page only) --- */

.faq-search { position: relative; max-width: 560px; }
.faq-search .form-control {
  padding: .85rem 2.75rem .85rem 2.75rem;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.faq-search .faq-search-icon {
  position: absolute; top: 50%; left: 1rem; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.faq-search .faq-search-clear {
  position: absolute; top: 50%; right: .6rem; transform: translateY(-50%);
  border: none; background: transparent; color: var(--text-muted);
  width: 32px; height: 32px; border-radius: 50%; line-height: 1;
}
.faq-search .faq-search-clear:hover { background: var(--brand-primary-light); color: var(--brand-primary-dark); }

.faq-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .9rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: .85rem; font-weight: 600;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.faq-chip:hover { background: var(--brand-primary-light); border-color: var(--brand-primary); color: var(--brand-primary-dark); }
.faq-chip .faq-chip-count { color: var(--text-muted); font-weight: 500; }

.faq-group { scroll-margin-top: 6rem; }
.faq-accordion .accordion-button.collapsed:hover { background: var(--bg-page); }
.faq-accordion .accordion-item { transition: border-color .18s ease, box-shadow .18s ease; }
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}

.faq-empty {
  text-align: center; padding: 2.5rem 1rem;
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: reduce) {
  .faq-chip, .faq-accordion .accordion-item { transition: none; }
}

/* ==========================================================================
   ABOUT PAGE
   Everything else on this page (hero eyebrow, mission layout, value icons,
   impact stats, CTA) reuses classes already defined above — img-placeholder,
   process-icon, content-card, hero-stat-col/number, faq-category-label, etc.
   The only genuinely new thing this page needs is a larger placeholder
   avatar size for the team grid.
   ========================================================================== */

.avatar-lg { width: 104px; height: 104px; }

/* ==========================================================================
   ROLE SELECTOR — donor / hospital / admin toggle on the login page
   ========================================================================== */

.role-switch {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.role-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: .82rem;
  font-weight: 600;
  padding: .45rem .85rem;
  border-radius: calc(var(--radius-md) - 4px);
  transition: background .18s ease, color .18s ease;
}
.role-btn:hover { color: var(--text-primary); }
.role-btn.active {
  background: var(--bg-card);
  color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   HERO v2 — photo background + gradient veil, overlapping content & stats
   Replaces the old .medallion hero and the separate stats band.
   ========================================================================== */

.hero-v2 {
  position: relative;
  isolation: isolate;                       /* keeps mix-blend-mode inside the hero */
  min-height: calc(100vh - 72px);           /* 72px = navbar height */
  min-height: calc(100svh - 72px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 82% 45%, rgba(166, 50, 47, .20) 0%, rgba(166, 50, 47, 0) 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(166, 50, 47, .10) 0%, rgba(166, 50, 47, 0) 70%),
    var(--cream);
}

/* --- photo layer ------------------------------------------------------- */
.hero-v2__media {
  position: absolute;
  top: 0; right: 0;
  bottom: 8.5rem;                            /* leave room so the stats panel overlaps the photo */
  width: 68%;
  z-index: -2;
}
.hero-v2__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  mix-blend-mode: multiply;                  /* photo's white backdrop melts into the cream page */
  /* feather every edge so the photo never shows a hard seam against the page */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 5%, #000 88%, transparent 100%),
    linear-gradient(90deg,  transparent 0%, #000 30%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 5%, #000 88%, transparent 100%),
    linear-gradient(90deg,  transparent 0%, #000 30%);
  mask-composite: intersect;
}

@media (min-width: 992px) {
  /* size the box to the photo's own aspect ratio so the feathered mask fades the
     photo itself (the tube dissolving into the page), never an empty box edge */
  .hero-v2__media { width: auto; max-width: 100%; aspect-ratio: 860 / 645; }
  .hero-v2__media img { object-fit: fill; }
}

/* --- gradient veil: fades photo out behind the text and into the page --- */
.hero-v2__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      var(--cream) 0%,
      rgba(253, 241, 236, .94) 30%,
      rgba(253, 241, 236, .55) 48%,
      rgba(253, 241, 236, 0) 70%),
    linear-gradient(0deg,
      var(--cream) 0%,
      rgba(253, 241, 236, 0) 22%),
    linear-gradient(180deg,
      rgba(253, 241, 236, .7) 0%,
      rgba(253, 241, 236, 0) 14%);
}

/* --- layout ------------------------------------------------------------- */
.hero-v2__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: clamp(2.5rem, 7vh, 5rem);
  padding-bottom: 2.25rem;
}
.hero-v2__content { max-width: 40rem; margin-block: auto; padding-block: 2rem 3rem; }

/* --- copy --------------------------------------------------------------- */
.hero-v2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .9rem .4rem .75rem;
  margin-bottom: 1.25rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--brand-primary-dark);
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}
.hero-v2__pulse {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brand-primary);
}
.hero-v2__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand-primary);
  animation: heroPulse 1.8s ease-out infinite;
}
@keyframes heroPulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(3.2); opacity: 0;  }
}

.hero-v2__title {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
  color: var(--text-primary);
}
.hero-v2__lead {
  max-width: 32rem;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
@media (min-width: 992px) { .hero-v2__lead { margin-left: 0; } }

.hero-v2__btn-ghost {
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-v2__trust li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-primary);
}
.hero-v2__trust svg { color: var(--brand-primary); flex-shrink: 0; }

/* --- sticky-note supply alert ------------------------------------------ */
.hero-v2__alert {
  position: absolute;
  z-index: 2;
  top: 10%;
  right: max(2rem, 0vw);   /* overlaps the bag's left edge */
  width: 11rem;
  padding: 1.6rem 1.1rem 1.25rem;
  text-align: center;
  font-family: "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  color: #4a3b12;
  /* paper: slightly darker sticky strip at the top, soft yellow fade below */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .07) 0, rgba(0, 0, 0, 0) 16%),
    linear-gradient(160deg, #fff59d 0%, #ffe873 100%);
  border-radius: 2px 2px 3px 22px / 2px 2px 3px 14px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .12),
    0 14px 22px -10px rgba(0, 0, 0, .45),
    -2px 6px 12px -6px rgba(0, 0, 0, .25);
  transform: rotate(-4deg);
  transform-origin: 50% 0;   /* sways from the pin */
  animation: stickySway 5s ease-in-out infinite;
}
.hero-v2__alert-pin {
  position: absolute;
  top: -9px; left: 50%;
  width: 18px; height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a94 0%, var(--brand-primary) 55%, var(--brand-primary-900) 100%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .4);
}
.hero-v2__alert > span:not(.hero-v2__alert-pin) { display: block; }
.hero-v2__alert-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.hero-v2__alert-type {
  display: grid !important;
  place-items: center;
  width: 2rem; height: 2rem;
  margin: .2rem auto .35rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-primary);
  border: 3px solid currentColor;
  border-radius: 52% 48% 50% 50% / 48% 52% 50% 50%;   /* hand-drawn circle */
  transform: rotate(-6deg);
}
.hero-v2__alert-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.05;
}
.hero-v2__alert-text {
  margin-top: .15rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.1;
  color: #6b5a22;
}
@keyframes stickySway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(-1.5deg) translateY(-3px); }
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* --- stats panel -------------------------------------------------------- */
.hero-v2__stats {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 60%, var(--brand-primary-900) 100%);
  box-shadow: var(--shadow-lg);
}
.hero-v2__stat {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.5rem 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, .16);
}
.hero-v2__stat:first-child { border-left: none; }
.hero-v2__stat-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .18);
}
.hero-v2__stat-number {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;        /* stops digits jittering during count-up */
}
.hero-v2__stat-label {
  margin: .2rem 0 0;
  font-size: .8rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, .72);
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* photo becomes a band at the top; the veil fades it into the copy that overlaps its lower half */
  .hero-v2__media { width: 100%; height: 21rem; bottom: auto; }
  .hero-v2__media img {
    object-fit: cover;
    object-position: 82% center;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .hero-v2__veil {
    background: linear-gradient(180deg,
      rgba(253, 241, 236, 0) 0,
      rgba(253, 241, 236, 0) 9rem,
      rgba(253, 241, 236, .88) 17rem,
      var(--cream) 21rem);
  }
  .hero-v2__inner { padding-top: 11rem; }
  .hero-v2__content { padding-block: 1rem 2rem; }
}
@media (max-width: 767.98px) {
  .hero-v2__stat {
    padding: 1.1rem 1rem;
    gap: .7rem;
    border-left: none;
  }
  .hero-v2__stat:nth-child(even)  { border-left: 1px solid rgba(255, 255, 255, .16); }
  .hero-v2__stat:nth-child(n+3)   { border-top: 1px solid rgba(255, 255, 255, .16); }
  .hero-v2__stat-icon { width: 38px; height: 38px; border-radius: 11px; }
  .hero-v2__stat-icon svg { width: 18px; height: 18px; }
}

/* --- entrance animation ------------------------------------------------- */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-v2__content > *,
.hero-v2__stats {
  opacity: 0;
  animation: heroRise .7s cubic-bezier(.2, .7, .2, 1) forwards;
}
.hero-v2__content > :nth-child(1) { animation-delay: .05s; }
.hero-v2__content > :nth-child(2) { animation-delay: .15s; }
.hero-v2__content > :nth-child(3) { animation-delay: .25s; }
.hero-v2__content > :nth-child(4) { animation-delay: .35s; }
.hero-v2__content > :nth-child(5) { animation-delay: .45s; }
.hero-v2__stats { animation-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
  .hero-v2__content > *, .hero-v2__stats { animation: none; opacity: 1; }
  .hero-v2__alert, .hero-v2__pulse::after { animation: none; }
}

/* ==========================================================================
   SECTIONS v2 — "Join the Movement", "Why Donate" and "Testimonials"
   Same recipe as HERO v2: cream page + brand glow, a photo that melts into the
   page (multiply blend + feathered mask), a veil so copy stays readable, the
   eyebrow pill, tight extra-bold titles and frosted-glass cards.
   ========================================================================== */

.sec-v2 {
  position: relative;
  isolation: isolate;                        /* keeps mix-blend-mode inside the section */
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 7rem);
  background: var(--cream);
}
.sec-v2__inner { position: relative; }

/* --- photo layer -------------------------------------------------------- */
.sec-v2__media {
  position: absolute; inset: 0; z-index: -2;
  mix-blend-mode: multiply;                  /* on the wrapper (it's its own stacking context), so the photo's white backdrop melts into the cream */
}
.sec-v2__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(1.16) contrast(1.05);   /* pushes the photo's slightly grey studio backdrop (and darker corners) to pure white, so multiply turns it into exactly the page's cream */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  mask-image:         linear-gradient(180deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
}

/* --- type --------------------------------------------------------------- */
.sec-v2__title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: balance;                        /* avoids one-word orphans on the second line */
}
.sec-v2__title--md { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.1; }
.sec-v2__lead {
  max-width: 32rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* --- frosted glass (same treatment as the hero's floating alert) -------- */
.glass-card {
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.glass-chip {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem .65rem .65rem;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: left;
  color: var(--text-primary);                /* it sits inside .img-placeholder, which would otherwise fade the text */
  animation: heroFloat 5s ease-in-out infinite;
}
.glass-chip svg { opacity: 1; }
.glass-chip__badge {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
}

/* ==========================================================================
   1) JOIN THE MOVEMENT
   ========================================================================== */
.sec-v2--movement .sec-v2__media img { object-position: 55% center; }
@media (min-width: 992px) {
  /* the string leaves this photo ~75% of the way down; slide the photo so that exit lands on the section's
     bottom edge and the string appears to carry on into the next section */
  .sec-v2--movement .sec-v2__media img {
    position: absolute; left: 0; bottom: 0;
    height: auto; object-fit: fill;
    transform: translateY(14.6%);
  }
}
.sec-v2 .movement-card {
  border-radius: 1.5rem;
  box-shadow: var(--shadow-md);
}
.sec-v2 .movement-card .overlay {
  background: linear-gradient(180deg,
    rgba(75, 26, 24, 0) 30%,
    rgba(75, 26, 24, .6) 62%,
    rgba(75, 26, 24, .95) 100%);
}
.movement-card__tag {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  padding: .3rem .7rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--brand-primary-dark);
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================================
   2) WHY DONATE BLOOD
   ========================================================================== */
.sec-v2--why .sec-v2__media img { object-position: 50% bottom; }
.supply-card__title {
  margin-bottom: 1rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.supply-card .progress { background: var(--brand-primary-light); border-radius: 999px; }
.supply-card .progress-bar { border-radius: 999px; }

.photo-frame {
  border-radius: 1.5rem;
  box-shadow: var(--shadow-lg);
  outline: 1px solid rgba(255, 255, 255, .9);
  outline-offset: -1px;
}

.help-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  color: var(--brand-primary-dark);
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ==========================================================================
   3) TESTIMONIALS — original layout (centered heading, two cards per slide),
   just with the string photo behind it. Cards / slider / dots use the original
   markup and the original styles further up the file.
   ========================================================================== */
/* .sec-v2--testimonials { padding-top: clamp(14rem, 23vw, 21rem); }   room above the heading for the heart and the string that dips beneath it */
.sec-v2--testimonials .sec-v2__media img {
  position: absolute; top: 0; left: 0;
  width: 100%; max-width: none; height: auto;
  object-fit: fill;
  transform: translateY(-33.5%);              /* lifts the heart above the heading; the string still runs left/right behind the cards */
}
@media (max-width: 767.98px) {
  .sec-v2--testimonials .sec-v2__media img { width: 260%; left: -72%; }   /* zoom in so the heart stays a readable size on phones */
}

@media (prefers-reduced-motion: reduce) {
  .glass-chip { animation: none; }
}

/* ==========================================================================
   ANNOUNCEMENT BAR — soft brand gradient, glass icon tile, white pill button
   ========================================================================== */
.announce-bar {
  position: relative;
  overflow: hidden;
  padding-block: 1.1rem;
  color: #fff;
  background: linear-gradient(115deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
}
/* faint light sheen in the top-right corner, echoing the hero glow */
.announce-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(45% 220% at 88% -20%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.announce-bar__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}
.announce-bar__lead { display: flex; align-items: center; gap: 1rem; }

.announce-bar__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.announce-bar__text { margin: 0; line-height: 1.3; }
.announce-bar__text strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;                        /* no one-word orphan line on phones */
}
.announce-bar__text span {
  display: block;
  margin-top: .1rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .82);
}

.announce-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.25rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--brand-primary-dark);
  background: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.announce-bar__btn .arrow { transition: transform .2s ease; }
.announce-bar__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .24); }
.announce-bar__btn:hover .arrow { transform: translateX(3px); }
.announce-bar__btn:focus-visible { outline: 3px solid rgba(255, 255, 255, .6); outline-offset: 3px; }

@media (max-width: 575.98px) {
  .announce-bar__inner { justify-content: center; text-align: center; }
  .announce-bar__lead { flex-direction: column; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .announce-bar__btn, .announce-bar__btn .arrow { transition: none; }
}

/* ==========================================================================
   HOW BLOOD DONATION WORKS — one brand-gradient panel, three steps
   ========================================================================== */
.how-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.75rem, 4vw, 3rem);
  color: #fff;
  border-radius: 2rem;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  box-shadow: var(--shadow-lg);
}
/* light sheen in the corner (same glow language as the hero and announcement bar) */
.how-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(50% 90% at 90% -10%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%);
}
.how-panel__mark {
  position: absolute;
  z-index: -1;
  right: -5rem; bottom: -6rem;
  width: 22rem; height: 22rem;
  color: rgba(255, 255, 255, .06);
}

.how-panel__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0; padding: 0;
  list-style: none;
}
.how-step {
  position: relative;
  padding: .5rem clamp(1rem, 2.5vw, 2.25rem);
  text-align: center;
}
/* thin divider between steps */
.how-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0; top: 8%; bottom: 8%;
  width: 1px;
  background: rgba(255, 255, 255, .2);
}
.how-step__label {
  display: inline-block;
  margin-bottom: 1.1rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.how-step__icon {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  margin: 0 auto 1.25rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .2s ease, background .2s ease;
}
.how-step:hover .how-step__icon { transform: translateY(-4px) scale(1.04); background: rgba(255, 255, 255, .22); }
.how-step__title { margin: 0 0 .5rem; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.how-step__text { max-width: 230px; margin: 0 auto; font-size: .92rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }

/* arrow chip sitting on each divider */
.how-step__arrow {
  position: absolute;
  z-index: 1;
  top: 50%; right: 0;
  transform: translate(50%, -50%);
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: var(--brand-primary-dark);
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

/* phones: steps stack, dividers turn horizontal, arrows point down */
@media (max-width: 767.98px) {
  .how-panel { border-radius: 1.5rem; }
  .how-panel__mark { right: -3rem; bottom: -3.5rem; width: 13rem; height: 13rem; }
  .how-panel__steps { grid-template-columns: 1fr; gap: 0; }
  .how-step { padding: 2rem 1rem; }
  .how-step:first-child { padding-top: .5rem; }
  .how-step:last-child { padding-bottom: .5rem; }
  .how-step:not(:last-child)::after { left: 8%; right: 8%; top: auto; bottom: 0; width: auto; height: 1px; }
  .how-step__arrow { top: auto; right: auto; left: 50%; bottom: 0; transform: translate(-50%, 50%) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .how-step__icon { transition: none; }
}

/* ==========================================================================
   NAVIGATION + FOOTER (navbar, hamburger sidebar, dropdowns, hover effects)
   ========================================================================== */
/* =====================================================================
   NAVIGATION — desktop bar + mobile off-canvas sidebar
   ===================================================================== */
:root {
  --nav-red:       var(--brand-primary, #A6322F);
  --nav-red-dark:  var(--brand-primary-dark, #7E2624);
  --nav-red-deep:  var(--brand-primary-900, #4b1a18);
  --nav-red-soft:  var(--brand-primary-light, #F6E4E3);
  --nav-sidebar-w: min(21rem, 86vw);
}

/* ---------- Brand ---------- */
#mainNav .navbar-brand { letter-spacing: .04em; transition: opacity .2s ease; }
#mainNav .navbar-brand:hover { color: #fff; opacity: .92; }
#mainNav .navbar-brand svg { transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
#mainNav .navbar-brand:hover svg { transform: scale(1.12) rotate(-6deg); }

/* ---------- Nav links (desktop): animated underline ---------- */
.nav-link-x {
  position: relative;
  display: block;
  padding: .5rem .15rem;
  font-weight: 600;
  font-size: .95rem;
  color: rgba(255,255,255,.78);
  transition: color .2s ease;
}
.nav-link-x::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: .1rem;
  height: 2px; border-radius: 2px; background: #fff;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s ease;
}
.nav-link-x:hover, .nav-link-x:focus-visible, .nav-link-x.active { color: #fff; }
.nav-link-x:hover::after, .nav-link-x:focus-visible::after, .nav-link-x.active::after { transform: scaleX(1); }

/* ---------- Auth buttons ---------- */
.auth-dd .dropdown-toggle { display: inline-flex; align-items: center; gap: .5rem; }
.auth-dd .dropdown-toggle::after { vertical-align: .1em; transition: transform .2s ease; }
.auth-dd .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.auth-dd .dropdown-toggle svg { transition: transform .2s ease, fill .2s ease; }

/* Log In: outline -> fills white with red text on hover */
.btn-login {
  color: #fff; background: transparent; border: 1.5px solid rgba(255,255,255,.75);
}
.btn-login:hover, .btn-login[aria-expanded="true"] {
  background: #fff; color: var(--nav-red); border-color: #fff;
}

/* Get Involved: white -> RED on hover (darker red + white ring so it stays visible on the red bar) */
.btn-cta {
  color: var(--nav-red); background: #fff; border: 1.5px solid #fff;
}
.btn-cta:hover, .btn-cta:focus-visible, .btn-cta[aria-expanded="true"] {
  background: var(--nav-red-dark); color: #fff; border-color: #fff;
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.45);
}
.btn-cta:hover svg, .btn-cta[aria-expanded="true"] svg { fill: #fff; transform: scale(1.15); }
.btn-cta:active, .btn-login:active { transform: translateY(0) scale(.98); }

/* ---------- Dropdown menus ---------- */
.auth-dd .dropdown-menu {
  border: 0; border-radius: .85rem; padding: .45rem; min-width: 16rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.12);
  margin-top: .6rem !important;
  top: 100%; left: auto; right: 0;
}
.auth-dd .dropdown-menu.show { animation: ddIn .18s ease; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.auth-dd .dropdown-menu .dd-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: #9a8f8d; padding: .5rem .75rem .3rem;
}
.auth-dd .dropdown-item {
  display: flex; align-items: center; gap: .7rem;
  border-radius: .55rem; padding: .55rem .75rem;
  font-size: .875rem; font-weight: 600; color: #3d3837;
  transition: background-color .18s ease, color .18s ease, padding-left .18s ease;
}
.auth-dd .dropdown-item .dd-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: var(--nav-red-soft); color: var(--nav-red);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.auth-dd .dropdown-item .dd-sub { font-size: .72rem; font-weight: 500; color: #9a8f8d; transition: color .18s ease; }
.auth-dd .dropdown-item:hover, .auth-dd .dropdown-item:focus, .auth-dd .dropdown-item:active {
  background: var(--nav-red-soft); color: var(--nav-red-dark); padding-left: 1rem;
}
.auth-dd .dropdown-item:hover .dd-icon, .auth-dd .dropdown-item:focus .dd-icon {
  background: var(--nav-red); color: #fff; transform: scale(1.06);
}
.auth-dd .dropdown-divider { margin: .35rem .5rem; opacity: .12; }

/* ---------- Hamburger button (mobile only) ---------- */
.nav-burger {
  display: none;
  width: 44px; height: 44px; padding: 0;
  border: 1.5px solid rgba(255,255,255,.55); border-radius: .7rem;
  background: transparent; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
  transition: background-color .2s ease, border-color .2s ease;
}
.nav-burger:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.nav-burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .28s ease, opacity .2s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Sidebar container ---------- */
.nav-sidebar { display: flex; align-items: center; margin-left: auto; }
.nav-sidebar-head, .nav-overlay { display: none; }
.nav-list { display: flex; align-items: center; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }

body.nav-locked { overflow: hidden; }
/* reserve the scrollbar's space so opening/closing the menu never shifts the page sideways */
html { scrollbar-gutter: stable; }

/* =================== MOBILE: off-canvas sidebar =================== */
@media (max-width: 991.98px) {
  .nav-burger { display: inline-flex; }

  .nav-overlay {
    display: block;
    position: fixed; inset: 0; z-index: 1;
    background: rgba(20,8,8,.55);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .nav-overlay.open { opacity: 1; visibility: visible; transition: opacity .3s ease; }

  .nav-sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 2;
    width: var(--nav-sidebar-w);
    margin: 0;
    flex-direction: column; align-items: stretch;
    background: linear-gradient(180deg, var(--nav-red) 0%, var(--nav-red-deep) 100%);
    box-shadow: -18px 0 40px rgba(0,0,0,.35);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s;
  }
  .nav-sidebar.open { transform: translateX(0); visibility: visible; transition: transform .32s cubic-bezier(.4,0,.2,1); }

  .nav-sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .nav-close {
    width: 40px; height: 40px; border-radius: .65rem; border: 0;
    background: rgba(255,255,255,.12); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .25s ease;
  }
  .nav-close:hover { background: #fff; color: var(--nav-red); transform: rotate(90deg); }

  .nav-list { flex-direction: column; align-items: stretch; gap: .35rem; padding: 1rem; }

  .nav-link-x {
    padding: .8rem 1rem; border-radius: .7rem; font-size: 1rem; color: rgba(255,255,255,.85);
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
  }
  .nav-link-x::after {
    left: 0; right: auto; top: 22%; bottom: 22%; width: 3px; height: auto;
    transform: scaleY(0); transform-origin: center;
  }
  .nav-link-x:hover, .nav-link-x.active { background: rgba(255,255,255,.12); padding-left: 1.3rem; }
  .nav-link-x:hover::after, .nav-link-x.active::after { transform: scaleY(1); }

  .nav-list .auth-dd { margin-top: .35rem; }
  .nav-list .auth-dd > .dropdown-toggle { width: 100%; justify-content: flex-start; padding: .7rem 1rem; }
  .nav-list .auth-dd > .dropdown-toggle::after { margin-left: auto; }

  /* dropdowns become inline accordions inside the sidebar */
  #navSidebar .auth-dd .dropdown-menu {
    position: static !important; transform: none !important; inset: auto !important;
    width: 100%; min-width: 0; margin-top: .5rem !important;
    background: rgba(255,255,255,.09); box-shadow: none; border-radius: .8rem;
  }
  #navSidebar .auth-dd .dropdown-menu .dd-label { color: rgba(255,255,255,.55); }
  #navSidebar .auth-dd .dropdown-item { color: #fff; }
  #navSidebar .auth-dd .dropdown-item .dd-icon { background: rgba(255,255,255,.16); color: #fff; }
  #navSidebar .auth-dd .dropdown-item .dd-sub { color: rgba(255,255,255,.6); }
  #navSidebar .auth-dd .dropdown-item:hover,
  #navSidebar .auth-dd .dropdown-item:focus { background: rgba(255,255,255,.16); color: #fff; }
  #navSidebar .auth-dd .dropdown-item:hover .dd-sub { color: rgba(255,255,255,.85); }
  #navSidebar .auth-dd .dropdown-item:hover .dd-icon,
  #navSidebar .auth-dd .dropdown-item:focus .dd-icon { background: #fff; color: var(--nav-red); }
}

/* =====================================================================
   FOOTER hover fixes
   (global `a:hover` turns links dark red — invisible on the red footer)
   ===================================================================== */
.footer-link { color: rgba(255,255,255,.7); display: inline-block; transition: color .2s ease, transform .2s ease; }
.footer-link:hover, .footer-link:focus-visible { color: #fff; transform: translateX(4px); }

.footer-social {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.75); background: rgba(255,255,255,.1);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.footer-social:hover { background: #fff; color: var(--nav-red); transform: translateY(-3px); }

.btn-subscribe { color: var(--nav-red); background: #fff; border: 1.5px solid #fff; }
.btn-subscribe:hover { background: var(--nav-red-dark); color: #fff; border-color: #fff; }

/* ==========================================================================
   FIND A DONATION DRIVE — map finder section
   Reuses existing pieces: .sec-v2, .glass-card, .photo-frame, .list-item,
   .list-item-icon, .input-icon-group, .badge-status, .faq-chip, .faq-empty,
   .faq-accordion, .help-icon and the heroPulse keyframes. Only what is
   genuinely new for the finder lives below.
   ========================================================================== */
.sec-v2--finder {
  background:
    radial-gradient(45% 40% at 90% 12%, rgba(166, 50, 47, .12) 0%, rgba(166, 50, 47, 0) 70%),
    radial-gradient(40% 35% at 5% 60%, rgba(166, 50, 47, .08) 0%, rgba(166, 50, 47, 0) 70%),
    var(--cream);
}

.finder-search .form-control,
.finder-search .form-select { border-radius: var(--radius-md); padding: .7rem .9rem; }
.finder-search .input-icon-group .form-control { padding-left: 2.6rem; }

.finder-map { height: 36rem; width: 100%; background: var(--cream-soft); font-family: inherit; }
@media (max-width: 991.98px) { .finder-map { height: 26rem; } }

/* results list */
.finder-list { max-height: 36rem; overflow-y: auto; padding: .25rem .35rem .25rem .1rem; scrollbar-width: thin; scrollbar-color: #e6c9c4 transparent; }
.finder-list .list-item { margin-bottom: .75rem; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease; }
.finder-list .list-item:hover,
.finder-list .list-item.is-active { border-color: var(--brand-primary); box-shadow: var(--shadow-sm); }
.finder-list .list-item:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.finder-day { text-align: center; font-size: 1.3rem; line-height: 1; }
.finder-day small { display: block; margin-top: .15rem; font-size: .65rem; font-weight: 700; }

/* map pins (teardrop) and the visitor's own position */
.drive-pin {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--brand-primary);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: var(--shadow-md);
  transition: transform .18s ease, background-color .18s ease;
}
.drive-pin::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.leaflet-marker-icon:hover .drive-pin { background: var(--brand-primary-dark); transform: rotate(-45deg) scale(1.15); }

.user-dot {
  position: relative;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--status-low-text);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
}
.user-dot::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: var(--status-low-text);
  animation: heroPulse 1.8s ease-out infinite;
}

/* popup restyled to the brand */
.finder-map .leaflet-popup-content-wrapper { padding: .2rem; border-radius: 1rem; box-shadow: var(--shadow-md); color: var(--text-primary); }
.finder-map .leaflet-popup-content { margin: .85rem 1rem; }
.finder-map .leaflet-popup-content p { margin-bottom: 0; }
.finder-map .leaflet-popup-close-button { color: var(--text-muted); }
.finder-map .leaflet-popup-close-button:hover { color: var(--brand-primary); }
.finder-map .leaflet-control-attribution { font-size: .65rem; }

/* login / sign-up prompt */
.finder-modal__head { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-900) 100%); }

@media (prefers-reduced-motion: reduce) {
  .user-dot::after, .drive-pin { animation: none; transition: none; }
}

/* ==========================================================================
   REDESIGN — testimonials + become-a-donor CTA
   ========================================================================== */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--brand-primary);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.section-kicker__dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 .35rem rgba(166,50,47,.12);
}
.testimonials-v3 .sec-v2__inner { z-index: 1; }
.testimonial-v3__slider { max-width: 73rem; margin-inline: auto; }
.testimonial-v3__card {
  display: grid;
  grid-template-columns: minmax(8.5rem, 36%) 1fr;
  min-height: 19rem;
  overflow: hidden;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 1.5rem;
  box-shadow: 0 20px 50px -30px rgba(75,26,24,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.testimonial-v3__photo { position: relative; min-height: 100%; border: 0; border-radius: 0; }
.testimonial-v3__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(75,26,24,0) 35%, rgba(75,26,24,.38) 100%);
  pointer-events: none;
}
.testimonial-v3__tag {
  position: absolute; left: .85rem; bottom: .85rem; z-index: 1;
  padding: .35rem .6rem; border-radius: 999px;
  color: #fff; background: rgba(75,26,24,.72);
  font-size: .63rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.testimonial-v3__body { position: relative; display: flex; flex-direction: column; padding: 1.45rem 1.5rem 1.25rem; }
.testimonial-v3__quote-mark { height: 2.2rem; color: var(--brand-primary); font-family: Georgia, serif; font-size: 4.2rem; line-height: .8; opacity: .72; }
.testimonial-v3__quote { margin: .5rem 0 1.3rem; color: var(--text-primary); font-size: .93rem; line-height: 1.65; }
.testimonial-v3__person { display: flex; align-items: center; gap: .65rem; margin-top: auto; }
.testimonial-v3__avatar {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex-shrink: 0;
  border-radius: 50%; color: #fff; background: var(--brand-primary); font-size: .85rem; font-weight: 800;
}
.testimonial-v3__person strong, .testimonial-v3__person small { display: block; }
.testimonial-v3__person strong { font-size: .78rem; }
.testimonial-v3__person small { margin-top: .15rem; color: var(--text-secondary); font-size: .7rem; }
.testimonial-v3__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 73rem; margin: .25rem auto 0; }
.testimonial-v3__controls .testi-dot { width: 2rem; height: .25rem; border-radius: 999px; background: #e4cbc7; }
.testimonial-v3__controls .testi-dot.active { background: var(--brand-primary); transform: none; }

.donor-cta {
  position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); color: #fff;
  border-radius: 2rem;
  background: linear-gradient(125deg, var(--brand-primary-900) 0%, var(--brand-primary) 58%, #b84640 100%);
  box-shadow: 0 24px 60px -26px rgba(126,38,36,.62);
}
.donor-cta::before, .donor-cta::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; pointer-events: none; }
.donor-cta::before { width: 27rem; height: 27rem; right: -8rem; top: -13rem; }
.donor-cta::after { width: 18rem; height: 18rem; right: 8rem; bottom: -13rem; }
.donor-cta__glow { position: absolute; inset: 0; background: radial-gradient(circle at 86% 36%, rgba(255,255,255,.19), transparent 28%); pointer-events: none; }
.donor-cta__eyebrow { color: rgba(255,255,255,.72); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.donor-cta__title { max-width: 34rem; margin: .7rem 0 .8rem; color: #fff; font-size: clamp(2rem, 4.4vw, 3.55rem); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; }
.donor-cta__title span { color: #ffd9c9; }
.donor-cta__copy { max-width: 34rem; margin-bottom: 1.5rem; color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.7; }
.donor-cta__note { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.72); font-size: .75rem; }
.donor-cta__proof { position: relative; display: flex; align-items: center; gap: 1rem; max-width: 22rem; margin-left: auto; padding: 1.15rem; border: 1px solid rgba(255,255,255,.2); border-radius: 1.25rem; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.donor-cta__proof-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; flex-shrink: 0; border-radius: 1rem; color: var(--brand-primary-dark); background: #ffe8dd; }
.donor-cta__proof strong, .donor-cta__proof span { display: block; }
.donor-cta__proof strong { font-size: .88rem; line-height: 1.35; }
.donor-cta__proof span { margin-top: .25rem; color: rgba(255,255,255,.66); font-size: .72rem; }
.donor-cta__mini-stats { display: flex; justify-content: space-between; max-width: 22rem; margin: 1.25rem 0 0 auto; color: rgba(255,255,255,.7); font-size: .7rem; }
.donor-cta__mini-stats strong { display: block; color: #fff; font-size: 1.05rem; }

@media (max-width: 767.98px) {
  .testimonial-v3__card { grid-template-columns: 6.8rem 1fr; min-height: 16.5rem; }
  .testimonial-v3__body { padding: 1.1rem; }
  .testimonial-v3__quote { font-size: .82rem; line-height: 1.55; }
  .testimonial-v3__controls { align-items: flex-start; flex-direction: column; }
  .donor-cta { border-radius: 1.5rem; }
  .donor-cta__proof, .donor-cta__mini-stats { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-v3__card, .donor-cta { transition: none; }
}


/* ==========================================================================
   REDESIGN — hero + impact statistics
   ========================================================================== */
.hero-v3 {
  min-height: clamp(43rem, 88vh, 54rem);
  background:
    radial-gradient(circle at 7% 16%, rgba(255,255,255,.92), transparent 28%),
    linear-gradient(135deg, #fdf1ec 0%, #fae9e2 54%, #f6ddd5 100%);
}
.hero-v3::before {
  content: "";
  position: absolute; inset: 1.5rem; z-index: -1;
  border: 1px solid rgba(166,50,47,.1); border-radius: 2rem;
  pointer-events: none;
}
.hero-v3 .hero-v2__media {
  right: -2%; bottom: 5rem; width: min(58vw, 54rem);
  opacity: .98; filter: saturate(.92);
}
.hero-v3 .hero-v2__media img { object-fit: cover; object-position: center; } /* cover = never stretch the photo */
.hero-v3 .hero-v2__veil {
  background:
    linear-gradient(90deg, var(--cream) 0%, rgba(253,241,236,.97) 28%, rgba(253,241,236,.66) 49%, rgba(253,241,236,0) 74%),
    linear-gradient(0deg, var(--cream) 0%, rgba(253,241,236,0) 24%),
    linear-gradient(180deg, rgba(253,241,236,.56) 0%, rgba(253,241,236,0) 22%);
}
.hero-v3 .hero-v2__inner { padding-top: clamp(4.5rem, 10vh, 7rem); padding-bottom: 1.6rem; }
.hero-v3 .hero-v2__content { max-width: 39rem; padding-block: 2rem 4rem; }
.hero-v3 .hero-v2__eyebrow {
  margin-bottom: 1.5rem; padding: .5rem .85rem .5rem .65rem;
  color: var(--brand-primary); background: rgba(255,255,255,.62); border-color: rgba(166,50,47,.15);
  box-shadow: 0 10px 24px -18px rgba(126,38,36,.48); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem;
}
.hero-v3 .hero-v2__title { max-width: 39rem; margin-bottom: 1.35rem; font-size: clamp(3.35rem, 7vw, 6.2rem); line-height: .95; letter-spacing: -.065em; }
.hero-v3 .hero-v2__title .text-brand { color: var(--brand-primary); }
.hero-v3 .hero-v2__lead { max-width: 30rem; margin-bottom: 2rem; font-size: .98rem; line-height: 1.75; }
.hero-v3 .btn-brand { padding-inline: 1.35rem !important; box-shadow: 0 14px 25px -15px rgba(126,38,36,.85); }
.hero-v3 .hero-v2__btn-ghost { border-color: rgba(166,50,47,.32); background: rgba(255,255,255,.38); }
.hero-v3 .hero-v2__trust { gap: .8rem 1.25rem !important; }
.hero-v3 .hero-v2__trust li { color: var(--text-secondary); font-size: .74rem; font-weight: 700; }
.hero-v3__proof { display: flex; align-items: center; gap: .7rem; margin-top: 1.5rem; }
.hero-v3__proof-avatars { display: flex; align-items: center; }
.hero-v3__proof-avatars span {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-left: -.35rem;
  border: 2px solid var(--cream); border-radius: 50%; color: #fff; background: var(--brand-primary); font-size: .52rem; font-weight: 800;
}
.hero-v3__proof-avatars span:first-child { margin-left: 0; background: #8f3b36; }
.hero-v3__proof-avatars span:nth-child(2) { background: #d26b57; }
.hero-v3__proof-avatars span:nth-child(3) { background: #b58a75; }
.hero-v3__proof-avatars span:last-child { color: var(--brand-primary-dark); background: #fff; }
.hero-v3__proof strong, .hero-v3__proof small { display: block; }
.hero-v3__proof strong { color: var(--text-primary); font-size: .74rem; }
.hero-v3__proof small { margin-top: .15rem; color: var(--text-secondary); font-size: .66rem; }
.hero-v3__stats {
  z-index: 3; margin-top: auto; padding: .55rem;
  background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.95); border-radius: 1.35rem;
  box-shadow: 0 22px 48px -28px rgba(75,26,24,.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.hero-v3__stats .row { color: var(--text-primary) !important; }
.hero-v3__stats .hero-v2__stat { position: relative; min-height: 6.3rem; padding: 1.1rem 1.2rem; border-left: 1px solid rgba(166,50,47,.13); }
.hero-v3__stats .hero-v2__stat:first-child { border-left: 0; }
.hero-v3__stats .hero-v2__stat-icon { width: 2.7rem; height: 2.7rem; border: 0; border-radius: .9rem; color: var(--brand-primary); background: var(--brand-primary-light); }
.hero-v3__stats .hero-v2__stat-number { color: var(--text-primary); font-size: clamp(1.45rem, 2.5vw, 2rem); }
.hero-v3__stats .hero-v2__stat-label { color: var(--text-secondary); font-size: .67rem; font-weight: 700; }
.hero-v3__stats .hero-v2__stat::after { content: ""; position: absolute; right: 1.2rem; top: 1.15rem; width: .35rem; height: .35rem; border-radius: 50%; background: #d9aaa1; }

@media (max-width: 991.98px) {
  .hero-v3 { min-height: auto; }
  .hero-v3::before { inset: .8rem; }
  .hero-v3 .hero-v2__media { right: 0; bottom: auto; top: 0; width: 100%; opacity: .9; }
  .hero-v3 .hero-v2__veil { background: linear-gradient(180deg, rgba(253,241,236,0) 0, rgba(253,241,236,.2) 7rem, rgba(253,241,236,.94) 19rem, var(--cream) 24rem); }
  .hero-v3 .hero-v2__inner { padding-top: 12rem; }
  .hero-v3 .hero-v2__content { max-width: 41rem; padding-bottom: 2.5rem; }
}
@media (max-width: 767.98px) {
  .hero-v3::before { display: none; }
  .hero-v3 .hero-v2__inner { padding-top: 10rem; }
  .hero-v3 .hero-v2__content { padding-block: 1rem 2.3rem; }
  .hero-v3 .hero-v2__title { font-size: clamp(3rem, 14vw, 4.2rem); }
  .hero-v3__proof { align-items: flex-start; }
  .hero-v3__stats { padding: .35rem; }
  .hero-v3__stats .hero-v2__stat { min-height: 5.6rem; padding: .85rem .65rem; gap: .55rem; }
  .hero-v3__stats .hero-v2__stat:nth-child(even) { border-left: 1px solid rgba(166,50,47,.13); }
  .hero-v3__stats .hero-v2__stat:nth-child(n+3) { border-top: 1px solid rgba(166,50,47,.13); }
  .hero-v3__stats .hero-v2__stat-icon { width: 2.15rem; height: 2.15rem; border-radius: .7rem; }
  .hero-v3__stats .hero-v2__stat-icon svg { width: 16px; height: 16px; }
  .hero-v3__stats .hero-v2__stat::after { right: .65rem; top: .8rem; }
}


/* ==========================================================================
   REDESIGN — supporting home sections + interaction layer
   ========================================================================== */
/* Movement: image-led cards with a tactile lift and directional reveal. */
.movement-v3 { background: linear-gradient(180deg, var(--cream) 0%, #f8e9e2 100%); }
.movement-v3 .sec-v2__media { opacity: .42; }
.movement-v3 .sec-v2__inner > .row:first-child { position: relative; }
.movement-v3 .sec-v2__inner > .row:first-child::after {
  content: ""; display: block; width: 4rem; height: .22rem; margin-top: 1.25rem; border-radius: 999px; background: var(--brand-primary);
}
.movement-v3 .movement-v3__card {
  height: 26rem; border: 1px solid rgba(255,255,255,.82); box-shadow: 0 18px 42px -24px rgba(75,26,24,.42);
}
.movement-v3 .movement-v3__card::after {
  content: ""; position: absolute; inset: .7rem; z-index: 1; border: 1px solid rgba(255,255,255,.26); border-radius: 1.05rem; opacity: 0; transform: scale(.96); transition: opacity .35s ease, transform .35s ease; pointer-events: none;
}
.movement-v3 .movement-v3__card img { transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.movement-v3 .movement-v3__card .overlay { transition: background .4s ease; }
.movement-v3 .movement-v3__card:hover { transform: translateY(-9px) rotate(-.35deg); box-shadow: 0 28px 58px -24px rgba(75,26,24,.58); }
.movement-v3 .movement-v3__card:hover img { transform: scale(1.08); filter: saturate(1.08); }
.movement-v3 .movement-v3__card:hover::after { opacity: 1; transform: scale(1); }
.movement-v3 .movement-v3__card:hover .overlay { background: linear-gradient(180deg, rgba(75,26,24,.02) 22%, rgba(75,26,24,.68) 62%, rgba(75,26,24,.98) 100%); }
.movement-v3 .movement-card__tag { transition: transform .3s ease, background .3s ease; }
.movement-v3 .movement-v3__card:hover .movement-card__tag { transform: translateY(-3px) rotate(3deg); background: #fff; }
.movement-v3 .movement-v3__card .card-copy { z-index: 2; }
.movement-v3 .movement-v3__card .card-copy h3 { transition: transform .3s ease; }
.movement-v3 .movement-v3__card:hover .card-copy h3 { transform: translateX(4px); }

/* Why donate: make the supply data and photo feel like an interactive dashboard. */
.why-v3 { background: linear-gradient(180deg, #f8e9e2 0%, var(--cream) 100%); }
.why-v3 .sec-v2__media { opacity: .3; }
.why-v3 .supply-card { position: relative; overflow: hidden; border-color: rgba(255,255,255,.96); }
.why-v3 .supply-card::before { content: "LIVE DATA"; position: absolute; top: 1.2rem; right: 1.2rem; padding: .28rem .5rem; border-radius: 999px; color: #2e7d42; background: #e4f3e7; font-size: .58rem; font-weight: 800; letter-spacing: .08em; }
.why-v3 .supply-card > .d-flex > div { padding: .3rem .45rem; margin-inline: -.45rem; border-radius: .6rem; transition: background .25s ease, transform .25s ease; }
.why-v3 .supply-card > .d-flex > div:hover { background: rgba(166,50,47,.06); transform: translateX(5px); }
.why-v3 .supply-card .progress { overflow: hidden; }
.why-v3 .supply-card .progress-bar { transform-origin: left center; animation: supplyPulse 1.2s ease both; transition: filter .25s ease, transform .25s ease; }
.why-v3 .supply-card > .d-flex > div:hover .progress-bar { filter: brightness(1.08); transform: scaleY(1.35); }
@keyframes supplyPulse { from { transform: scaleX(0); opacity: .35; } to { transform: scaleX(1); opacity: 1; } }
.why-v3 .photo-frame { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.why-v3 .photo-frame img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.why-v3 .photo-frame:hover { transform: translateY(-7px) rotate(.35deg); box-shadow: 0 30px 58px -28px rgba(75,26,24,.58); }
.why-v3 .photo-frame:hover img { transform: scale(1.045); }
.why-v3 .glass-chip { transition: transform .3s ease, box-shadow .3s ease; }
.why-v3 .photo-frame:hover .glass-chip { transform: translateY(-5px); box-shadow: 0 18px 34px -16px rgba(75,26,24,.42); }
.why-v3 .help-icon { cursor: default; transition: transform .3s ease, color .3s ease, background .3s ease, box-shadow .3s ease; }
.why-v3 .help-icon:hover { color: #fff; background: var(--brand-primary); transform: translateY(-6px) rotate(-3deg); box-shadow: 0 16px 28px -15px rgba(126,38,36,.7); }

/* Announcement: small motion cue that encourages discovery. */
.announce-v3 { box-shadow: 0 16px 30px -24px rgba(75,26,24,.7); }
.announce-v3 .announce-bar__icon { animation: announceFloat 3.5s ease-in-out infinite; }
@keyframes announceFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px) rotate(-3deg); } }

/* About: offset image and numbered feature rail. */
.about-v3 { position: relative; }
.about-v3::before { content: "ABOUT BLOODLINK"; position: absolute; top: 2rem; right: 1.5rem; color: rgba(166,50,47,.16); font-size: .63rem; font-weight: 800; letter-spacing: .17em; transform: rotate(90deg) translateX(100%); transform-origin: top right; }
.about-v3 .img-placeholder { position: relative; overflow: hidden; min-height: 27rem !important; border-radius: 1.5rem !important; box-shadow: 0 24px 48px -25px rgba(75,26,24,.46); transform: rotate(-1.2deg); transition: transform .45s ease, box-shadow .45s ease; }
.about-v3 .img-placeholder::after { content: "Together, we make care possible"; position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 1; padding: .55rem .75rem; border-radius: .7rem; color: #fff; background: rgba(75,26,24,.68); font-size: .68rem; font-weight: 700; backdrop-filter: blur(8px); }
.about-v3 .img-placeholder:hover { transform: rotate(0) translateY(-7px); box-shadow: 0 32px 60px -28px rgba(75,26,24,.58); }
.about-v3 .img-placeholder img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.about-v3 .img-placeholder:hover img { transform: scale(1.05); }
.about-v3__feature { display: grid; grid-template-columns: 2.2rem 1fr; gap: .75rem; padding: .85rem .75rem; border-left: 2px solid rgba(166,50,47,.2); transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.about-v3__feature:hover { border-color: var(--brand-primary); background: rgba(255,255,255,.54); transform: translateX(5px); }
.about-v3__feature-number { color: var(--brand-primary); font-size: .68rem; font-weight: 800; letter-spacing: .05em; }

/* How it works: introduce a moving progress line and focused step states. */
.how-v3 .hero-v2__eyebrow { box-shadow: none; }
.how-v3 .how-panel { background: linear-gradient(135deg, var(--brand-primary-900) 0%, var(--brand-primary-dark) 55%, var(--brand-primary) 100%); }
.how-v3 .how-panel::after { content: ""; position: absolute; left: 12%; right: 12%; top: 51%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform-origin: left; animation: lineShimmer 4s ease-in-out infinite; pointer-events: none; }
@keyframes lineShimmer { 0%,100% { opacity: .35; transform: scaleX(.75); } 50% { opacity: .8; transform: scaleX(1); } }
.how-v3 .how-step { z-index: 1; transition: transform .3s ease; }
.how-v3 .how-step:hover { transform: translateY(-6px); }
.how-v3 .how-step__icon { box-shadow: 0 12px 24px -15px rgba(0,0,0,.6); transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, box-shadow .3s ease; }
.how-v3 .how-step:hover .how-step__icon { transform: translateY(-7px) scale(1.08) rotate(-4deg); background: rgba(255,255,255,.28); box-shadow: 0 16px 28px -16px rgba(0,0,0,.65); }
.how-v3 .how-step__arrow { transition: transform .3s ease, background .3s ease; }
.how-v3 .how-step:hover .how-step__arrow { transform: translate(50%, -50%) scale(1.13); background: #ffe8dd; }

@media (max-width: 767.98px) {
  .about-v3::before { display: none; }
  .about-v3 .img-placeholder { min-height: 20rem !important; }
  .how-v3 .how-panel::after { left: 18%; right: 18%; top: 33%; height: 60%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.45), transparent); }
  .how-v3 .how-step:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .movement-v3 .movement-v3__card, .movement-v3 .movement-v3__card img, .why-v3 .photo-frame, .why-v3 .photo-frame img, .about-v3 .img-placeholder, .about-v3 .img-placeholder img, .how-v3 .how-step, .how-v3 .how-step__icon { transition: none; }
  .announce-v3 .announce-bar__icon, .how-v3 .how-panel::after, .why-v3 .supply-card .progress-bar { animation: none; }
}

/* ======================================================================
   FIND DRIVE — modern workspace redesign
   ====================================================================== */
.finder-v3{position:relative;overflow:hidden;background:radial-gradient(45% 32% at 92% 8%,rgba(166,50,47,.12),transparent 70%),radial-gradient(38% 30% at 4% 44%,rgba(214,107,87,.08),transparent 72%),linear-gradient(180deg,#fdf1ec 0%,#fae9e2 50%,var(--cream) 100%)}
.finder-v3::before{content:"FIND • GIVE • CONNECT";position:absolute;top:7rem;right:-3.2rem;color:rgba(166,50,47,.11);font-size:.62rem;font-weight:800;letter-spacing:.2em;transform:rotate(90deg)}
.finder-v3__intro{max-width:48rem!important}.finder-v3__intro .hero-v2__eyebrow{box-shadow:0 10px 25px -18px rgba(126,38,36,.6)}.finder-v3__intro .sec-v2__title{font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.055em}.finder-v3__intro .sec-v2__lead{max-width:39rem;font-size:.98rem}
.finder-v3__search{position:relative;z-index:2;padding:1.35rem!important;border:1px solid rgba(255,255,255,.95);border-radius:1.5rem;box-shadow:0 24px 52px -30px rgba(75,26,24,.4)}
.finder-v3__search::before{content:"START HERE";position:absolute;top:-.55rem;left:1.4rem;padding:.22rem .55rem;border-radius:999px;color:var(--brand-primary);background:#fff;font-size:.57rem;font-weight:800;letter-spacing:.1em;box-shadow:var(--shadow-sm)}
.finder-v3__search .form-label{margin-bottom:.45rem;color:var(--text-secondary);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.finder-v3__search .form-control,.finder-v3__search .form-select{min-height:3rem;border-color:rgba(166,50,47,.16);background:rgba(255,255,255,.78);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.finder-v3__search .form-control:hover,.finder-v3__search .form-select:hover{transform:translateY(-1px)}.finder-v3__search .form-control:focus,.finder-v3__search .form-select:focus{transform:translateY(-2px);box-shadow:0 0 0 .2rem rgba(166,50,47,.12),0 12px 24px -18px rgba(126,38,36,.65)}.finder-v3__search .btn{min-height:3rem;transition:transform .2s ease,box-shadow .2s ease}.finder-v3__search .btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px -14px rgba(126,38,36,.75)}.finder-v3__search .faq-chip{transition:transform .2s ease,background .2s ease,color .2s ease}.finder-v3__search .faq-chip:hover{transform:translateY(-2px);color:#fff;background:var(--brand-primary)}
.finder-v3__workspace{position:relative}.finder-v3__map-frame{position:relative;min-height:36rem;border:8px solid rgba(255,255,255,.68);border-radius:1.7rem;box-shadow:0 26px 55px -29px rgba(75,26,24,.52);transition:box-shadow .35s ease,transform .35s ease}.finder-v3__map-frame::before{content:"LIVE MAP";position:absolute;z-index:500;top:1rem;left:1rem;padding:.38rem .65rem;border-radius:999px;color:var(--brand-primary-dark);background:rgba(255,255,255,.9);font-size:.62rem;font-weight:800;letter-spacing:.08em;box-shadow:var(--shadow-sm);pointer-events:none}.finder-v3__map-frame:hover{transform:translateY(-4px);box-shadow:0 34px 66px -30px rgba(75,26,24,.58)}.finder-v3 .finder-map{height:35rem;filter:saturate(.72) sepia(.08);transition:filter .35s ease}.finder-v3__map-frame:hover .finder-map{filter:saturate(.94) sepia(0)}
.finder-v3__list-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:.7rem;padding:0 .25rem}.finder-v3__list-head span{color:var(--text-primary);font-size:1rem;font-weight:800;letter-spacing:-.02em}.finder-v3__list-head small{color:var(--text-secondary);font-size:.68rem}.finder-v3 .finder-list{max-height:35rem;padding:.1rem .25rem .3rem .1rem}.finder-v3 .finder-list .list-item{position:relative;overflow:hidden;min-height:5.3rem;margin-bottom:.7rem;border:1px solid rgba(255,255,255,.9);border-radius:1.1rem;background:rgba(255,255,255,.76);box-shadow:0 10px 22px -18px rgba(75,26,24,.45);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease}.finder-v3 .finder-list .list-item::after{content:"";position:absolute;left:0;top:0;bottom:0;width:.2rem;background:var(--brand-primary);transform:scaleY(0);transform-origin:center;transition:transform .25s ease}.finder-v3 .finder-list .list-item:hover,.finder-v3 .finder-list .list-item.is-active{transform:translateX(5px);border-color:rgba(166,50,47,.45);background:#fff;box-shadow:0 16px 28px -19px rgba(126,38,36,.6)}.finder-v3 .finder-list .list-item:hover::after,.finder-v3 .finder-list .list-item.is-active::after{transform:scaleY(1)}.finder-v3 .finder-list .list-item:focus-visible{outline:3px solid rgba(166,50,47,.3);outline-offset:3px}.finder-v3 .finder-day{width:3.1rem;padding:.7rem .35rem;border-radius:.85rem;color:var(--brand-primary);background:var(--brand-primary-light);font-size:1.25rem;font-weight:800;transition:transform .25s ease,background .25s ease}.finder-v3 .list-item:hover .finder-day{transform:rotate(-4deg) scale(1.06);background:#f4d5cf}.finder-v3 .finder-list h4{line-height:1.25}.finder-v3 .finder-list .badge-status{font-size:.62rem}
.finder-v3__section-heading{margin-top:1rem}.finder-v3__section-heading .sec-v2__title{font-size:clamp(1.8rem,3.4vw,2.7rem)}.finder-v3__step-card,.finder-v3__check-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.94);border-radius:1.35rem;box-shadow:0 18px 38px -25px rgba(75,26,24,.38);transition:transform .3s ease,box-shadow .3s ease,background .3s ease}.finder-v3__step-card::before{content:"";position:absolute;top:0;left:0;right:0;height:.2rem;background:linear-gradient(90deg,var(--brand-primary),#e69b87);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}.finder-v3__step-card:hover,.finder-v3__check-card:hover{transform:translateY(-6px);box-shadow:0 24px 45px -24px rgba(75,26,24,.55);background:rgba(255,255,255,.92)}.finder-v3__step-card:hover::before{transform:scaleX(1)}.finder-v3__step-card .help-icon{transition:transform .3s ease,background .3s ease,color .3s ease}.finder-v3__step-card:hover .help-icon{transform:translateY(-4px) rotate(-4deg);color:#fff;background:var(--brand-primary)}.finder-v3__step-card .faq-category-label{color:var(--brand-primary);font-size:.66rem;font-weight:800;letter-spacing:.1em}.finder-v3__check-card{background:rgba(255,255,255,.7)}.finder-v3__check-card h4{display:flex;align-items:center;gap:.6rem}.finder-v3__check-card h4::before{content:"✓";display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:.5rem;color:#fff;background:var(--brand-primary);font-size:.8rem}.finder-v3__check-card li{padding:.35rem 0;border-bottom:1px dashed rgba(166,50,47,.13);transition:transform .2s ease,color .2s ease}.finder-v3__check-card li:last-child{border-bottom:0}.finder-v3__check-card li:hover{color:var(--brand-primary-dark);transform:translateX(4px)}
.finder-v3__faq .accordion-item{overflow:hidden;margin-bottom:.6rem;border:1px solid rgba(255,255,255,.92);border-radius:1rem!important;background:rgba(255,255,255,.68);box-shadow:0 10px 24px -20px rgba(75,26,24,.42)}.finder-v3__faq .accordion-button{padding:1.1rem 1.2rem;background:transparent;font-size:.85rem;font-weight:700}.finder-v3__faq .accordion-button:not(.collapsed){color:var(--brand-primary-dark);background:rgba(246,228,227,.72);box-shadow:none}.finder-v3__faq .accordion-body{padding:0 1.2rem 1.2rem;color:var(--text-secondary);font-size:.82rem;line-height:1.7}.finder-v3__modal{box-shadow:0 28px 70px -30px rgba(43,19,18,.7)}.finder-v3__modal .finder-modal__head{padding-block:2rem!important;background:radial-gradient(circle at 85% 0%,rgba(255,255,255,.22),transparent 30%),linear-gradient(135deg,var(--brand-primary) 0%,var(--brand-primary-900) 100%)}.finder-v3__modal .btn{transition:transform .2s ease,box-shadow .2s ease}.finder-v3__modal .btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -14px rgba(126,38,36,.8)}.finder-v3 .finder-map .leaflet-control-zoom a{color:var(--brand-primary);border-color:rgba(166,50,47,.14)}.finder-v3 .finder-map .leaflet-popup-content-wrapper{border:1px solid rgba(166,50,47,.12)}
@media(max-width:991.98px){.finder-v3__map-frame{min-height:26rem}.finder-v3 .finder-map{height:25rem}.finder-v3::before{display:none}}@media(max-width:575.98px){.finder-v3__search{padding:1rem!important}.finder-v3__list-head{align-items:flex-start;flex-direction:column;gap:.2rem}.finder-v3 .finder-list{max-height:none}.finder-v3__map-frame{border-width:5px;border-radius:1.25rem}}@media(prefers-reduced-motion:reduce){.finder-v3__search .form-control,.finder-v3__search .form-select,.finder-v3__search .btn,.finder-v3__map-frame,.finder-v3 .finder-map,.finder-v3 .finder-list .list-item,.finder-v3 .finder-day,.finder-v3__step-card,.finder-v3__check-card,.finder-v3__step-card::before,.finder-v3__step-card .help-icon,.finder-v3__check-card li,.finder-v3__modal .btn{transition:none}}


/* Find Drive heading image placeholder */
.finder-v3__hero-heading{position:relative;isolation:isolate;max-width:56rem!important;min-height:22rem;display:grid;place-items:center;padding:3rem 1rem 2.5rem;overflow:hidden;border-radius:2rem;background:rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.58);box-shadow:0 24px 55px -34px rgba(75,26,24,.45)}
.finder-v3__hero-image{position:absolute;inset:0;z-index:-2;overflow:hidden;background:linear-gradient(135deg,#f4d9d1,#f9ebe5)}
.finder-v3__hero-image::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(253,241,236,.42),rgba(253,241,236,.82)),radial-gradient(circle at 50% 38%,rgba(255,255,255,.2),transparent 55%)}
.finder-v3__hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 35%;opacity:.6;mix-blend-mode:multiply;filter:saturate(.72) contrast(.94);transform:scale(1.04);transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .5s ease,opacity .5s ease}
.finder-v3__hero-heading:hover .finder-v3__hero-image img{transform:scale(1.09);filter:saturate(.92) contrast(1);opacity:.72}
.finder-v3__hero-heading::before,.finder-v3__hero-heading::after{content:"";position:absolute;z-index:-1;border:1px solid rgba(166,50,47,.2);border-radius:50%;pointer-events:none}
.finder-v3__hero-heading::before{width:20rem;height:20rem;right:-6rem;top:-8rem}.finder-v3__hero-heading::after{width:12rem;height:12rem;left:-4rem;bottom:-6rem}
.finder-v3__hero-content{position:relative;z-index:2;max-width:44rem;padding:1.5rem 2rem;border:1px solid rgba(255,255,255,.66);border-radius:1.5rem;background:rgba(255,255,255,.52);box-shadow:0 18px 38px -28px rgba(75,26,24,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.finder-v3__hero-content .hero-v2__eyebrow{margin-bottom:1rem}.finder-v3__hero-content .sec-v2__title{margin-bottom:.85rem;text-wrap:balance}.finder-v3__hero-content .sec-v2__lead{color:#5f5451}
@media(max-width:575.98px){.finder-v3__hero-heading{min-height:25rem;padding:2.5rem .75rem 2rem;border-radius:1.5rem}.finder-v3__hero-content{padding:1.25rem 1rem;border-radius:1.15rem}.finder-v3__hero-content .sec-v2__title{font-size:clamp(2.15rem,11vw,3rem)}.finder-v3__hero-image img{object-position:58% 35%}}
@media(prefers-reduced-motion:reduce){.finder-v3__hero-image img{transition:none}}


/* ======================================================================
   HOME-ONLY BLOOD BAG LOADER — fill, pulse, fade
   ====================================================================== */
.bloodbag-loader{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#fff9f6 0%,#fae9e3 56%,#f3d4ce 100%);opacity:1;visibility:visible;transition:opacity .65s ease,visibility .65s ease}.bloodbag-loader.is-done{opacity:0;visibility:hidden;pointer-events:none}.bloodbag-loader::before,.bloodbag-loader::after{content:"";position:absolute;border:1px solid rgba(166,50,47,.13);border-radius:50%;pointer-events:none}.bloodbag-loader::before{width:38rem;height:38rem;top:-19rem;right:-13rem}.bloodbag-loader::after{width:28rem;height:28rem;bottom:-14rem;left:-11rem}.bloodbag-loader__skeleton{position:absolute;inset:0;opacity:.62;filter:blur(.2px);animation:skeletonBreath 5.8s ease-in-out infinite}.skeleton-bar,.skeleton-card{position:absolute;display:block;border-radius:999px;background:linear-gradient(90deg,rgba(166,50,47,.06),rgba(255,255,255,.68),rgba(166,50,47,.06));background-size:220% 100%;animation:skeletonShimmer 3.8s ease-in-out infinite}.skeleton-bar--wide{top:16%;left:9%;width:26%;height:.7rem}.skeleton-bar--short{top:21%;left:9%;width:15%;height:.5rem;animation-delay:.25s}.skeleton-card{width:22vw;max-width:17rem;height:12rem;border:1px solid rgba(166,50,47,.08);border-radius:1.5rem}.skeleton-card--one{left:7%;bottom:16%;animation-delay:.45s}.skeleton-card--two{right:8%;top:27%;height:15rem;animation-delay:.8s}.skeleton-card--three{right:10%;bottom:11%;width:15vw;height:5rem;animation-delay:1.1s}.bloodbag-loader__scene{position:relative;z-index:2;width:min(28rem,86vw);padding:1.25rem;text-align:center}.bloodbag-loader__brand{margin-bottom:1.2rem;color:#7e2624;font-size:.72rem;font-weight:800;letter-spacing:.18em}.bloodbag-loader__brand-mark{display:inline-grid;place-items:center;width:1.35rem;height:1.35rem;margin-right:.35rem;border-radius:.45rem;color:#fff;background:#a6322f;font-size:1rem;line-height:1}.bloodbag-loader__bag-wrap{position:relative;width:10rem;height:14.3rem;margin:auto}.bloodbag-loader__bag{width:100%;height:100%;overflow:visible}.bloodbag-loader__tube,.bloodbag-loader__outline{stroke:#7e2624;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.bloodbag-loader__outline{fill:rgba(255,255,255,.62)}.bloodbag-loader__tube{stroke-width:4}.bloodbag-loader__liquid{fill:#a6322f;transform:translateY(130px);animation:bagFill 5.8s cubic-bezier(.55,.05,.35,1) forwards}.bloodbag-loader__wave{fill:#c05b53;transform-origin:center bottom;transform:translateY(130px);animation:bagWaveFill 5.8s cubic-bezier(.55,.05,.35,1) forwards}.bloodbag-loader__label-line{stroke:rgba(126,38,36,.35);stroke-width:2.5;stroke-linecap:round}.bloodbag-loader__pulse{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.65);stroke-width:2;transform-origin:center;animation:bagPulse 5.8s ease-in-out forwards}.bloodbag-loader__pulse-mark{stroke:rgba(255,255,255,.84);stroke-width:3;stroke-linecap:round;transform-origin:center;animation:bagMark 5.8s ease-in-out forwards}.bloodbag-loader__particle{position:absolute;width:.45rem;height:.45rem;border-radius:50%;background:#a6322f;box-shadow:0 0 0 .18rem rgba(166,50,47,.09);opacity:0;animation:bagParticle 3.8s ease-in-out infinite}.bloodbag-loader__particle--one{left:19%;top:35%;animation-delay:.4s}.bloodbag-loader__particle--two{right:15%;top:49%;animation-delay:1.15s}.bloodbag-loader__particle--three{left:28%;bottom:20%;animation-delay:1.9s}.bloodbag-loader__label{margin:1.1rem 0 .8rem;color:#7e2624;font-size:.72rem;font-weight:800;letter-spacing:.07em}.bloodbag-loader__dots{display:inline-block;width:1rem;text-align:left;animation:loaderDots 2.1s steps(4,end) infinite}.bloodbag-loader__progress{width:13rem;height:.3rem;margin:auto;overflow:hidden;border-radius:999px;background:rgba(166,50,47,.13)}.bloodbag-loader__progress span{display:block;width:0;height:100%;border-radius:inherit;background:#a6322f;animation:progressFill 5.8s cubic-bezier(.55,.05,.35,1) forwards}@keyframes bagFill{0%{transform:translateY(130px)}88%{transform:translateY(8px)}94%,100%{transform:translateY(0)}}@keyframes progressFill{0%{width:0}88%{width:88%}100%{width:100%}}@keyframes bagWaveFill{0%{transform:translateY(130px) scaleY(.9)}88%{transform:translateY(8px) scaleY(.9)}94%{transform:translateY(0) scaleY(1.08)}100%{transform:translateY(0) scaleY(.96)}}@keyframes bagPulse{0%,86%{transform:scale(1);stroke-width:2}91%{transform:scale(1.18);stroke-width:3.5}96%,100%{transform:scale(1);stroke-width:2}}@keyframes bagMark{0%,86%{transform:scale(1)}91%{transform:scale(1.14)}96%,100%{transform:scale(1)}}@keyframes bagParticle{0%,20%{opacity:0;transform:translateY(1rem) scale(.4)}42%{opacity:1}78%{opacity:.8;transform:translateY(-2.5rem) scale(1)}100%{opacity:0;transform:translateY(-4rem) scale(.2)}}@keyframes skeletonShimmer{0%{background-position:160% 0}55%,100%{background-position:-60% 0}}@keyframes skeletonBreath{0%,100%{opacity:.42}50%{opacity:.74}}@media(max-width:575.98px){.bloodbag-loader__scene{width:92vw}.skeleton-card{width:34vw;height:9rem}.skeleton-card--two{height:11rem}.skeleton-card--three{width:27vw}.bloodbag-loader__label{font-size:.64rem}}@media(prefers-reduced-motion:reduce){.bloodbag-loader__skeleton,.skeleton-bar,.skeleton-card,.bloodbag-loader__liquid,.bloodbag-loader__wave,.bloodbag-loader__pulse,.bloodbag-loader__pulse-mark,.bloodbag-loader__particle,.bloodbag-loader__progress span,.bloodbag-loader__dots{animation:none}.bloodbag-loader__liquid{height:130px;transform:translateY(0)}.bloodbag-loader__progress span{width:100%}.bloodbag-loader__pulse,.bloodbag-loader__pulse-mark{transform:scale(1)}.bloodbag-loader__particle{opacity:.35}}


/* The home loader is a deliberate one-shot sequence, not an infinite loop. */
.bloodbag-loader__skeleton,.bloodbag-loader__liquid,.bloodbag-loader__wave,.bloodbag-loader__pulse,.bloodbag-loader__pulse-mark,.bloodbag-loader__particle,.bloodbag-loader__progress span,.bloodbag-loader__dots{animation-iteration-count:1;animation-fill-mode:both}
.bloodbag-loader__wave{animation-duration:5.8s}.bloodbag-loader__particle{animation-duration:3.8s}

/* ==========================================================================
   FIXES — loader fallback, hero entrance gating, back-to-top over sidebar
   ========================================================================== */

/* Loader: CSS-only safety net so it can never block the site if JS fails */
.bloodbag-loader { animation: loaderAutoHide .65s ease 9s forwards; }
@keyframes loaderAutoHide { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Loader: the "…" animation referenced this keyframe but it did not exist */
@keyframes loaderDots { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0); } }

/* Hero entrance animations wait until the loader has lifted */
html.is-loading .hero-v2__content > *,
html.is-loading .hero-v2__stats { animation-play-state: paused; }

/* Hide back-to-top while the mobile sidebar is open (it was z-index 1030 > navbar 1020) */
body.nav-locked #backToTop { display: none; }

/* ==========================================================================
   RESPONSIVE FIXES — hamburger menu + tablet / small-phone layout
   ========================================================================== */

/* Menu: never animate while the window crosses the desktop/mobile breakpoint */
.nav-sidebar.no-anim, .nav-sidebar.no-anim * { transition: none !important; }

@media (max-width: 991.98px) {
  /* iOS/Safari: stop the page scrolling behind the open menu */
  html:has(body.nav-locked) { overflow: hidden; }
  .nav-overlay { touch-action: none; }
  .nav-sidebar { overscroll-behavior: contain; }

  /* 44px tap target for the close button */
  .nav-close { width: 44px; height: 44px; }

  /* divider between dropdown items was dark-on-dark (invisible) */
  #navSidebar .auth-dd .dropdown-divider { border-top-color: rgba(255,255,255,.35); opacity: 1; }
}

/* Tablets (768-991): the 4 stat columns were too narrow for "25,000+" and overlapped */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-v3__stats .hero-v2__stat { padding: 1rem .85rem; gap: .6rem; }
  .hero-v3__stats .hero-v2__stat-icon { width: 2.4rem; height: 2.4rem; }
  .hero-v3__stats .hero-v2__stat-number { font-size: 1.3rem; }
}
/* Very small phones (<=359px): the two-column stats were clipping the numbers */
@media (max-width: 359.98px) {
  .hero-v3__stats .hero-v2__stat-number { font-size: 1.15rem; }
}

/* Testimonial dots are 4px tall: enlarge the touch area without changing how they look */
.testimonial-v3__controls .testi-dot { position: relative; }
.testimonial-v3__controls .testi-dot::before { content: ""; position: absolute; inset: -14px -4px; }

/* ======================================================================
   LOGIN REDESIGN — mission-led BloodLink brand panel
   ====================================================================== */
.auth-brand--redesign{isolation:isolate;justify-content:space-between;min-height:100vh;padding:2.2rem clamp(2rem,4vw,4rem);background:radial-gradient(circle at 15% 18%,rgba(255,255,255,.16),transparent 28%),radial-gradient(circle at 90% 82%,rgba(255,184,169,.13),transparent 32%),linear-gradient(152deg,#a6322f 0%,#7e2624 52%,#4b1a18 100%)}.auth-brand--redesign::after{content:"";position:absolute;inset:auto -10% -18% 24%;height:48%;z-index:-1;border-radius:50% 50% 0 0;background:linear-gradient(145deg,rgba(255,255,255,.08),transparent 70%);transform:rotate(-8deg)}.auth-brand__grid{position:absolute;inset:0;z-index:-1;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.24) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(135deg,rgba(0,0,0,.9),transparent 70%)}.auth-brand__orb{position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%;pointer-events:none}.auth-brand__orb--top{width:24rem;height:24rem;top:-12rem;right:-10rem}.auth-brand__orb--bottom{width:18rem;height:18rem;bottom:-9rem;left:-8rem}.auth-brand__logo{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.65rem;width:max-content;font-size:.82rem;font-weight:800;letter-spacing:.16em}.auth-brand__logo-mark{display:grid;place-items:center;width:2.15rem;height:2.15rem;border:1px solid rgba(255,255,255,.35);border-radius:.72rem;color:#fff;background:rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(55,10,8,.18)}.auth-brand__content{position:relative;z-index:2;max-width:30rem;margin-block:2rem}.auth-brand__eyebrow{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.2rem;padding:.42rem .75rem;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:rgba(255,255,255,.82);font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;background:rgba(255,255,255,.09)}.auth-brand__live-dot{width:.42rem;height:.42rem;border-radius:50%;background:#ffc1b4;box-shadow:0 0 0 .28rem rgba(255,193,180,.16);animation:authLivePulse 2s ease-in-out infinite}.auth-brand--redesign h1{max-width:25rem;margin:0 0 1rem;color:#fff;font-size:clamp(2.35rem,3.5vw,3.65rem);line-height:1.03;letter-spacing:-.055em}.auth-brand--redesign #authBrandSubtext{max-width:26rem;margin:0;color:rgba(255,255,255,.73);font-size:.93rem;line-height:1.7}.auth-brand__quote{display:flex;align-items:flex-start;gap:.75rem;margin-top:1.35rem;color:rgba(255,255,255,.78)}.auth-brand__quote-mark{color:#ffc1b4;font-family:Georgia,serif;font-size:2.4rem;line-height:.8}.auth-brand__quote p{margin:0;font-size:.75rem;line-height:1.55}.auth-brand__quote-rule{width:2.2rem;height:1px;margin-top:.55rem;background:rgba(255,255,255,.35)}.auth-brand__footer{position:relative;z-index:2;display:flex;align-items:center;gap:.65rem;color:rgba(255,255,255,.48);font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.auth-brand__footer-line{width:2rem;height:1px;background:rgba(255,255,255,.3)}@keyframes authLivePulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.35);opacity:1}}@media(max-width:1199.98px) and (min-width:992px){.auth-brand--redesign{padding-inline:2rem}.auth-brand--redesign h1{font-size:2.6rem}}@media(prefers-reduced-motion:reduce){.auth-brand__live-dot{animation:none}}


/* Login left panel: existing hero image + BloodLink red fade. */
.auth-brand--redesign{background:#641d1b;isolation:isolate}
.auth-brand--redesign .auth-brand__media{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#641d1b}
.auth-brand--redesign .auth-brand__media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(77,20,18,.35) 0%,rgba(126,38,36,.68) 46%,rgba(55,12,11,.96) 100%),linear-gradient(90deg,rgba(103,25,23,.8) 0%,rgba(166,50,47,.28) 58%,rgba(67,15,14,.82) 100%)}
.auth-brand--redesign .auth-brand__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.82) contrast(1.04);transform:scale(1.035)}
.auth-brand--redesign .auth-brand__grid{opacity:.08;z-index:-1}
.auth-brand--redesign .auth-brand__orb{z-index:-1;border-color:rgba(255,255,255,.2)}
.auth-brand--redesign .auth-brand__logo{gap:.65rem}
.auth-brand--redesign .auth-brand__logo-mark{display:grid;place-items:center;width:2.15rem;height:2.15rem;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.auth-brand--redesign .auth-brand__logo-mark svg{display:block;width:32px;height:32px}
@media(prefers-reduced-motion:reduce){.auth-brand--redesign .auth-brand__media img{transform:none}}


/* ======================================================================
   AUTH PAGES — calm surface shared by login, sign-up and the donor card form.
   One short entrance and press feedback; no ambient motion, which drains
   cheap phones and pulls attention from the form.
   ====================================================================== */
:root {
  --auth-ease-out: cubic-bezier(.23, 1, .32, 1);
  --auth-ink: #2b2220;
  --auth-ink-2: #5f5553;       /* secondary text, 7:1 on white */
  --auth-line: #e4d7d1;
  --auth-line-strong: #cdb8b0;
  --auth-focus: rgba(166, 50, 47, .18);
  --auth-danger: #b42318;
}

.auth-brand__grid,
.auth-brand__orb { display: none; }
.auth-brand--redesign h1 { letter-spacing: -.03em; }
.auth-brand__media picture { display: contents; }
.auth-brand--redesign .auth-brand__content { transition: opacity 140ms ease, transform 140ms ease; }
.auth-brand--redesign .auth-brand__content.is-swapping { opacity: 0; transform: translateY(4px); }

.auth-form-panel { position: relative; isolation: isolate; overflow-x: clip; background: #f8f3f1; color: var(--auth-ink); }
.auth-form-panel ::selection { background: rgba(166, 50, 47, .2); color: inherit; }
.auth-form-panel input { caret-color: var(--brand-primary); }

/* The card is a plain white sheet: one soft shadow, no border, no blur */
.auth-form-panel .auth-card { position: relative; z-index: 1; animation: authCardEnter 280ms var(--auth-ease-out) both; }
/* The login card is as tall as its content (an older one-screen rule forces 660px) */
.auth-form-panel .auth-card.auth-login { min-height: 0 !important; }
.auth-form-panel .auth-card::before {
  content: ""; position: absolute; z-index: -1; inset: -1.75rem -2rem;
  border-radius: 16px; background: #fff; pointer-events: none;
  box-shadow: 0 1px 2px rgba(75, 26, 24, .06), 0 18px 44px -26px rgba(75, 26, 24, .28);
}
@keyframes authCardEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 576px) and (max-width: 991.98px) {
  .auth-form-panel { min-height: 100vh; padding: 3rem 2.5rem; }
}
@media (max-width: 575.98px) {
  .auth-form-panel { min-height: 100vh; padding: 1.5rem 1rem; align-items: flex-start; background: #fff; }
  .auth-form-panel .auth-card::before { display: none; }
}

/* ---------- Login card ---------- */
.auth-login h2 { font-size: 1.6rem; letter-spacing: -.025em; color: var(--auth-ink); }
.auth-login .auth-subtitle { min-height: 1.5em; font-size: .95rem; color: var(--auth-ink-2); }
.auth-login .form-label { margin-bottom: .4rem; font-size: .9375rem; font-weight: 600; color: var(--auth-ink); }

/* Portal switch: one pill slides under the chosen tab */
.auth-login .auth-tabs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-bottom: 1.75rem; padding: .3rem;
  background: #f3ebe8; border: 1px solid var(--auth-line); border-radius: 999px;
}
.auth-login .auth-tabs__pill {
  position: absolute; top: .3rem; bottom: .3rem; left: .3rem; width: calc(50% - .3rem);
  border-radius: 999px; background: var(--brand-primary);
  box-shadow: 0 4px 10px -6px rgba(126, 38, 36, .55);
  transition: transform 240ms var(--auth-ease-out);
}
.auth-login[data-portal="organization"] .auth-tabs__pill { transform: translateX(100%); }
.auth-login[data-portal="admin"] .auth-tabs { display: none; }
.auth-login .auth-tab {
  position: relative; z-index: 1; min-height: 2.75rem; padding: .5rem .75rem;
  font-size: .9rem; font-weight: 600; color: var(--auth-ink-2);
  background: transparent; border: 0; border-radius: 999px; box-shadow: none;
  transition: color 200ms ease;
}
.auth-login .auth-tab[aria-selected="true"] { color: #fff; }
.auth-login .auth-tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .auth-login .auth-tab[aria-selected="false"]:hover { color: var(--brand-primary-dark); }
}
/* Two tabs fit on any phone: keep the words, drop the icons */
@media (max-width: 380px) {
  .auth-login .auth-tab span { display: inline; }
  .auth-login .auth-tab svg { display: none; }
}

/* Fields: 48px tall, 16px text (no zoom-on-focus on iPhones) */
.auth-login .form-control {
  min-height: 3rem; padding: .75rem .9rem; font-size: 1rem; color: var(--auth-ink);
  background: #fff; border: 1px solid var(--auth-line); border-radius: 10px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.auth-login .input-icon-group .form-control { padding-left: 2.75rem; }
.auth-login .form-control::placeholder { color: #776d6a; }
.auth-login .form-control:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .22rem var(--auth-focus); outline: 0; }
/* Saved logins: keep the field white instead of the browser's blue */
.auth-login .form-control:-webkit-autofill { -webkit-text-fill-color: var(--auth-ink); box-shadow: 0 0 0 100px #fff inset; }
.auth-login .form-control:-webkit-autofill:focus { box-shadow: 0 0 0 100px #fff inset, 0 0 0 .22rem var(--auth-focus); }
.auth-login .input-icon-group > svg { color: #8f7d76; transition: color 150ms ease; }
.auth-login .input-icon-group:focus-within > svg { color: var(--brand-primary); }
@media (hover: hover) and (pointer: fine) {
  .auth-login .form-control:hover:not(:focus) { border-color: var(--auth-line-strong); }
}

/* Errors: red border, message under the field, one short shake */
.auth-login .form-control.is-invalid { border-color: var(--auth-danger); background-image: none; }
.auth-login .form-control.is-invalid:focus { box-shadow: 0 0 0 .22rem rgba(180, 35, 24, .16); }
.auth-login .text-danger { font-size: .875rem; color: var(--auth-danger) !important; }
.auth-login .auth-field.has-error .input-icon-group { animation: authShake 320ms var(--auth-ease-out); }
@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.auth-login .auth-caps { margin: .4rem 0 0; font-size: .875rem; font-weight: 600; color: #8a4b00; }
.auth-login .auth-caps:empty { display: none; }

.auth-login .form-check-input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; border-color: var(--auth-line-strong); }
.auth-login .form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.auth-login .form-check-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem var(--auth-focus); }
.auth-login .form-check-label { font-size: .9375rem; color: var(--auth-ink-2); }

/* Links: underlined so they read as links, with a 44px tap area */
.auth-login .auth-link {
  display: inline-block; padding: .6rem 0; margin: -.6rem 0;
  font-weight: 600; color: var(--brand-primary-dark);
  text-decoration: underline; text-decoration-color: rgba(126, 38, 36, .3); text-underline-offset: .2em;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
.auth-login .auth-link:hover { color: var(--brand-primary-900); text-decoration-color: currentColor; }
.auth-login .auth-link:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: 4px; }
.auth-login .auth-link--button { background: none; border: 0; font: inherit; font-weight: 600; }
.auth-login .auth-foot { margin: 0; text-align: center; font-size: .9375rem; color: var(--auth-ink-2); }
.auth-login .auth-note { font-size: .875rem; color: var(--auth-ink-2); }
.auth-login .auth-switch {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #efe5e1;
  text-align: center; font-size: .9rem; color: var(--auth-ink-2);
}

/* Submit: presses in, then shows progress until the next page loads */
.auth-login .auth-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; font-size: 1rem; font-weight: 700; border-radius: 10px;
  transition: transform 120ms var(--auth-ease-out), background-color 150ms ease, border-color 150ms ease;
}
.auth-login .auth-submit:active:not(:disabled) { transform: scale(.97); }
.auth-login .auth-submit:disabled { opacity: 1; cursor: progress; }
.auth-login .auth-submit:focus-visible { outline: 2px solid var(--brand-primary-900); outline-offset: 2px; }
.auth-submit__spinner {
  display: none; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  animation: authSpin 650ms linear infinite;
}
.auth-submit.is-loading .auth-submit__spinner { display: inline-block; }
@keyframes authSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .auth-form-panel .auth-card,
  .auth-login .auth-field.has-error .input-icon-group { animation: none; }
  .auth-login .auth-tabs__pill,
  .auth-brand--redesign .auth-brand__content { transition: none; }
  .auth-brand--redesign .auth-brand__content.is-swapping { transform: none; }
  .auth-login .auth-submit:active:not(:disabled) { transform: none; }
  .auth-submit__spinner { animation-duration: 1.4s; }
}

/* Password visibility icon fix: the generic field-icon rule must not position this SVG. */
.auth-form-panel .input-icon-group .toggle-password{right:.7rem;top:50%;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin:0;padding:.25rem;transform:translateY(-50%)}
.auth-form-panel .input-icon-group .toggle-password svg{position:static;left:auto;top:auto;width:18px;height:18px;transform:none;flex:0 0 auto}
.auth-form-panel .input-icon-group .toggle-password:hover{transform:translateY(-50%) scale(1.08)}
.auth-form-panel .input-icon-group input[type="password"],.auth-form-panel .input-icon-group input[type="text"]{padding-right:3rem!important}
@media(prefers-reduced-motion:reduce){.auth-form-panel .input-icon-group .toggle-password{transition:none}.auth-form-panel .input-icon-group .toggle-password:hover{transform:translateY(-50%)}}


/* Password toggle states: closed eye while hidden, open eye while visible. */
.auth-form-panel .toggle-password .eye-icon{position:static!important;display:block;transition:opacity .18s ease,transform .18s ease}
.auth-form-panel .toggle-password .eye-icon--open{display:none}
.auth-form-panel .toggle-password.is-visible .eye-icon--closed{display:none}
.auth-form-panel .toggle-password.is-visible .eye-icon--open{display:block}
.auth-form-panel .toggle-password.is-visible{color:var(--brand-primary)}
@media(prefers-reduced-motion:reduce){.auth-form-panel .toggle-password .eye-icon{transition:none}}


/* Donor registration refinements — same login system, tuned for a longer form. */
.auth-brand--register .auth-brand__content{margin-block:1.5rem}
.auth-brand--register h1{font-size:clamp(2.55rem,3.8vw,4rem)}
.auth-brand--register #registerBrandSubtext{max-width:27rem}
.auth-form-panel--register{align-items:flex-start;overflow-y:auto}
.auth-form-panel--register .auth-register-card{max-width:35rem;margin-block:auto;padding-block:1rem}
.auth-form-panel--register .auth-register-card h2{letter-spacing:-.04em}
.auth-form-panel--register .auth-register-card .form-control,.auth-form-panel--register .auth-register-card .form-select{min-height:2.75rem}
.auth-form-panel--register .auth-register-card .form-text{color:#9b847b}
.auth-form-panel--register .auth-register-card .alert{border:0;border-radius:1rem;box-shadow:0 10px 24px -18px rgba(126,38,36,.45);animation:authFormEnter .45s ease both}
.auth-form-panel--register .auth-register-card input[type="file"]{padding-block:.62rem}
.auth-form-panel--register .auth-register-card input[type="file"]::file-selector-button{border:0;border-radius:.55rem;color:#7e2624;background:#f9e3dc;font-weight:700;margin-right:.75rem;padding:.42rem .7rem;transition:background .2s ease,color .2s ease}
.auth-form-panel--register .auth-register-card input[type="file"]:hover::file-selector-button{color:#fff;background:var(--brand-primary)}
.auth-form-panel--register .auth-register-card .form-check-label a:hover{color:var(--brand-primary-900)!important}
@media(max-width:991.98px){.auth-form-panel--register{overflow:visible}.auth-form-panel--register .auth-register-card{margin-block:0}}


/* Multi-step registration panel refinements — aligned with the login treatment. */
.auth-brand--register .auth-brand__content--register{margin-block:1.25rem .6rem}
.auth-brand--register h1{font-size:clamp(2.35rem,3.4vw,3.5rem)}
.auth-brand--register #registerBrandSubtext{max-width:27rem}
.auth-brand--register .wz-stepper{display:flex;flex-direction:column;position:relative;z-index:2;width:min(100%,24rem)}
.auth-brand--register .wz-side-item{display:flex;gap:.9rem;align-items:flex-start;position:relative;opacity:.55;cursor:default;border-radius:.9rem;padding-inline:.65rem;transition:opacity .25s ease,background .25s ease,transform .25s ease}
.auth-brand--register .wz-side-item:hover{opacity:1;background:rgba(255,255,255,.1);transform:translateX(4px)}
.auth-brand--register .wz-side-item.is-active{opacity:1;background:rgba(255,255,255,.1);box-shadow:inset 3px 0 #fff}
.auth-brand--register .wz-side-item.is-active .wz-side-num{background:#fff;color:#7a231d;border-color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25);animation:registerStepPulse 2.6s ease-in-out infinite}
.auth-brand__register-quote{position:relative;z-index:2;display:flex;gap:.75rem;align-items:flex-start;margin-top:auto;padding:.9rem 1rem;border:1px solid rgba(255,255,255,.16);border-radius:1rem;color:rgba(255,255,255,.8);background:rgba(255,255,255,.08);transition:background .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease}
.auth-brand__register-quote:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);box-shadow:0 14px 28px rgba(42,8,7,.16);transform:translateY(-3px)}
.auth-brand__register-quote p{margin:0;font-size:.75rem;line-height:1.55}
.auth-form-panel--register{align-items:flex-start;overflow-y:auto}
.auth-form-panel--register .auth-register-card{max-width:40rem;margin-block:auto;padding-block:1rem}
.auth-form-panel--register .auth-register-card .wz-chip{transition:transform .22s ease,box-shadow .22s ease}
.auth-form-panel--register .auth-register-card .wz-chip:hover{transform:translateY(-2px);box-shadow:0 8px 16px -12px rgba(126,38,36,.55)}
.auth-form-panel--register .auth-register-card .wz-progress{box-shadow:inset 0 1px 2px rgba(126,38,36,.08)}
.auth-form-panel--register .auth-register-card .wz-progress>div{box-shadow:0 0 12px rgba(166,50,47,.35)}
.auth-form-panel--register .auth-register-card .wz-review-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.auth-form-panel--register .auth-register-card .wz-review-card:hover{transform:translateY(-2px);border-color:#d9b9b0;box-shadow:0 12px 24px -18px rgba(126,38,36,.45)}
.auth-form-panel--register .auth-register-card .wz-edit{transition:color .2s ease,transform .2s ease}
.auth-form-panel--register .auth-register-card .wz-edit:hover{color:var(--brand-primary-900);transform:translateX(2px)}
@keyframes registerStepPulse{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.25)}50%{box-shadow:0 0 0 .35rem rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.3)}}
@media(max-width:991.98px){.auth-form-panel--register{overflow:visible}.auth-form-panel--register .auth-register-card{margin-block:0}}
@media(prefers-reduced-motion:reduce){.auth-brand--register .wz-side-item.is-active .wz-side-num{animation:none}.auth-brand--register .wz-side-item:hover,.auth-brand__register-quote:hover,.auth-form-panel--register .auth-register-card .wz-review-card:hover{transform:none}}

/* Registration wizard: avoid a nested scrollbar; let the document flow naturally. */
.auth-form-panel--register{overflow:visible!important;overflow-y:visible!important}

/* Registration page viewport lock: no page or nested scrolling. */
html:has(.auth-brand--register),html:has(.auth-brand--register) body{height:100%;overflow:hidden}
.auth-shell:has(.auth-brand--register){height:100vh;min-height:0;overflow:hidden}
.auth-brand--register{height:100vh;min-height:0;padding-block:1.35rem}
.auth-brand--register .auth-brand__content--register{margin-block:.7rem .15rem}
.auth-brand--register .auth-brand__eyebrow{margin-bottom:.65rem;padding:.32rem .65rem;font-size:.6rem}
.auth-brand--register h1{margin-bottom:.65rem;font-size:clamp(2.1rem,3vw,3.15rem)}
.auth-brand--register #registerBrandSubtext{font-size:.78rem;line-height:1.45}
.auth-brand--register .wz-stepper{margin-top:.25rem!important}
.auth-brand--register .wz-side-item{padding:.42rem .55rem}
.auth-brand--register .wz-side-title{color:#fff;font-weight:600;margin:0;font-size:.82rem;line-height:30px}
.auth-brand--register .wz-side-sub{color:rgba(255,255,255,.6);margin:0;font-size:.68rem}
.auth-brand--register .wz-side-num{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.55);color:#fff;font-weight:700;font-size:.8rem;flex-shrink:0;background:transparent;position:relative;z-index:1;transition:all .25s}
.auth-brand--register .wz-side-item:not(:last-child)::before{content:"";position:absolute;left:14px;top:46px;bottom:-5px;width:2px;background:rgba(255,255,255,.25)}
.auth-brand--register .auth-brand__register-quote{margin-top:.35rem;padding:.65rem .8rem}
.auth-brand--register .auth-brand__register-quote p{font-size:.68rem;line-height:1.35}
.auth-brand--register .auth-brand__quote-mark{font-size:1.9rem}
.auth-brand--register .auth-brand__footer{font-size:.56rem}
.auth-form-panel--register{height:100vh;min-height:0;padding:1.25rem 1.5rem;overflow:visible!important;overflow-y:visible!important}
.auth-form-panel--register .auth-register-card{margin-block:auto;padding-block:.4rem}
.auth-form-panel--register .auth-register-card .wz-step{max-height:calc(100vh - 12rem);overflow:visible}
@media(max-width:1199.98px) and (min-width:992px){.auth-brand--register{padding-inline:1.45rem}.auth-brand--register .auth-brand__content--register{margin-block:.45rem 0}.auth-brand--register .wz-side-sub{font-size:.63rem}.auth-brand--register .auth-brand__register-quote{padding:.5rem .65rem}}
@media(max-width:991.98px){html:has(.auth-brand--register),html:has(.auth-brand--register) body{overflow:auto;height:auto}.auth-shell:has(.auth-brand--register){height:auto;min-height:100vh;overflow:visible}.auth-form-panel--register{height:auto;min-height:100vh;padding:1.5rem 1.25rem}}


/* Registration wizard controls: clickable steps and paired password-eye states. */
.auth-brand--register .wz-side-item{cursor:pointer}
.auth-brand--register .wz-side-item:focus-visible{outline:2px solid #fff;outline-offset:3px}
.auth-brand--register .wz-side-item.is-active:hover{transform:translateX(4px)}
.auth-form-panel--register .toggle-password .eye-icon{position:static!important;display:block}
.auth-form-panel--register .toggle-password .eye-icon--open{display:none}
.auth-form-panel--register .toggle-password.is-visible .eye-icon--closed{display:none}
.auth-form-panel--register .toggle-password.is-visible .eye-icon--open{display:block}
.auth-form-panel--register .toggle-password.is-visible{color:var(--brand-primary)}
@media(prefers-reduced-motion:reduce){.auth-brand--register .wz-side-item:hover,.auth-brand--register .wz-side-item.is-active:hover{transform:none}}


/* Form-controlled stepper: numbers remain visible; future steps stay locked. */
.auth-brand--register .wz-side-item.is-done .wz-side-num .num{display:inline!important}
.auth-brand--register .wz-side-item.is-done .wz-side-num .check{display:none!important}
.auth-brand--register .wz-side-item.is-locked{cursor:not-allowed;opacity:.42}
.auth-brand--register .wz-side-item.is-locked:hover{background:transparent;transform:none}
.auth-brand--register .wz-side-item.is-locked .wz-side-num{box-shadow:none}


/* ==========================================================================
   Registration wizard — styles the markup relied on but never defined
   (map picker, storage choice cards, soft panel, hints) + scroll fix
   ========================================================================== */

/* The register panel was locked to 100vh with overflow hidden everywhere,
   so tall steps (Location & Storage) were cut off and couldn't be scrolled. */
.auth-form-panel--register{overflow-x:hidden!important;overflow-y:auto!important}
@media(max-width:991.98px){.auth-form-panel--register{overflow:visible!important}}

/* Hints & validation text */
.wz-hint{margin:.45rem 0 0;font-size:.78rem;color:#8b7f7d}
.wz-hint.is-error{color:#dc3545;font-weight:600}

/* Map picker (preview) */
.wz-map{
  position:relative;height:220px;border:1.5px solid #eadbd4;border-radius:14px;overflow:hidden;cursor:crosshair;
  background:
    linear-gradient(rgba(166,58,46,.07) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(166,58,46,.07) 1px,transparent 1px) 0 0/32px 32px,
    radial-gradient(circle at 30% 35%,#f6e6e1 0,transparent 55%),
    radial-gradient(circle at 75% 70%,#efe3d6 0,transparent 50%),
    #fbf3ef;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.wz-map:hover{border-color:#d9b9b0}
.wz-map:focus-visible{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 .2rem rgba(166,50,47,.15)}
.wz-map-label{
  position:absolute;top:.6rem;left:.6rem;padding:.2rem .6rem;border-radius:99px;
  background:rgba(255,255,255,.88);color:#7a231d;font-size:.62rem;font-weight:800;letter-spacing:.08em;pointer-events:none;
}
.wz-map-pin{
  position:absolute;width:22px;height:22px;border-radius:50% 50% 50% 0;background:#a63a2e;
  transform:rotate(-45deg);box-shadow:0 6px 12px -3px rgba(126,38,36,.55);pointer-events:none;
}
.wz-map-pin[hidden]{display:none}
.wz-map-pin::after{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff}

/* Yes / No storage choice cards */
.wz-choice{
  display:flex;align-items:flex-start;gap:.65rem;height:100%;margin:0;padding:.8rem .9rem;cursor:pointer;
  border:1.5px solid #eadbd4;border-radius:12px;background:rgba(255,255,255,.78);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.wz-choice:hover{border-color:#d9b9b0;background:#fff}
.wz-choice input{margin-top:.25rem;flex-shrink:0;accent-color:var(--brand-primary)}
.wz-choice span{display:flex;flex-direction:column;gap:.1rem;font-size:.9rem;color:var(--text-primary)}
.wz-choice small{color:#8b7f7d;font-size:.76rem;line-height:1.35}
.wz-choice:has(input:checked){border-color:var(--brand-primary);background:#fdf1ef;box-shadow:0 0 0 .15rem rgba(166,50,47,.12)}
.wz-choice:has(input:focus-visible){outline:2px solid var(--brand-primary);outline-offset:2px}

/* Facility details panel */
.wz-soft-panel{padding:1rem;border:1px solid #f0e2df;border-radius:14px;background:#fdf7f6}
.wz-soft-panel.d-none{display:none!important}

/* Callout icon shouldn't shrink next to long text */
.wz-callout svg{flex-shrink:0;margin-top:.1rem}

/* Registration wizard styles consolidated from member and organization templates. */
/* The existing register-page rules below provide the left-panel sizing and interactions;
   these are the missing component foundations formerly embedded in each Blade view. */
.auth-brand--register .wz-side-item.is-done{opacity:.9}
.auth-brand--register .wz-side-num .check{display:none}
.auth-brand--register .wz-side-item.is-done .wz-side-num{background:rgba(255,255,255,.18);border-color:transparent}

.auth-form-panel--register .wz-chip{display:inline-flex;align-items:center;gap:.4rem;background:#fbeae8;color:#7a231d;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.3rem .8rem;border-radius:99px;margin-bottom:.9rem}
.auth-form-panel--register .wz-progress{height:6px;background:#f3e4e2;border-radius:99px;overflow:hidden;margin-bottom:1.6rem}
.auth-form-panel--register .wz-progress>div{height:100%;background:linear-gradient(90deg,#7a231d,#a63a2e);border-radius:99px;transition:width .4s ease}
.auth-form-panel--register .wz-progress #wzProgressBar{width:25%}
.auth-form-panel--register #strengthLabel{width:60px}
.auth-form-panel--register .rf-file svg{margin-bottom:.3rem}
.auth-form-panel--register .wz-step{animation:wzFade .35s ease}
@keyframes wzFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.auth-form-panel--register .wz-nav{display:flex;gap:.75rem;margin-top:1.6rem}
.auth-form-panel--register .wz-review-card{border:1px solid #eee0de;border-radius:16px;padding:1.2rem 1.3rem;margin-bottom:1.1rem;background:#fff}
.auth-form-panel--register .wz-review-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.auth-form-panel--register .wz-review-head h6{font-weight:700;margin:0;color:#3d2b29}
.auth-form-panel--register .wz-edit{border:0;background:none;color:#7a231d;font-size:.82rem;font-weight:700;text-decoration:underline;padding:0}
.auth-form-panel--register .wz-review-row{display:flex;justify-content:space-between;gap:1.2rem;padding:.45rem 0;border-bottom:1px dashed #f0e6e5;font-size:.9rem}
.auth-form-panel--register .wz-review-row:last-child{border-bottom:0}
.auth-form-panel--register .wz-review-row .k{color:#8b7f7d;min-width:45%}
.auth-form-panel--register .wz-review-row .v{font-weight:600;text-align:right;word-break:break-word}
.auth-form-panel--register .rf-file{position:relative;display:block;border:1.5px dashed #d9c6c3;border-radius:14px;background:#fdf7f6;padding:1.1rem 1rem;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
.auth-form-panel--register .rf-file:hover{border-color:#a63a2e;background:#fdf1ef}
.auth-form-panel--register .rf-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.auth-form-panel--register .rf-file:focus-within{outline:2px solid #a6322f;outline-offset:3px}
.auth-form-panel--register .rf-file.is-invalid{border-color:#dc3545;background:#fff5f5}
.auth-form-panel--register .rf-file-name{font-size:.88rem;font-weight:600;color:#7a231d}
.auth-form-panel--register .rf-file-hint{font-size:.76rem;color:#9b8f8d;margin-top:.15rem}
.auth-form-panel--register .wz-callout{display:flex;gap:.75rem;border-radius:12px;padding:.9rem 1rem;font-size:.88rem;line-height:1.45;margin-top:1.1rem}
.auth-form-panel--register .wz-callout-blue{background:#eef4ff;border:1px solid #c9dbfc;color:#1e4fd8}
@media(prefers-reduced-motion:reduce){.auth-form-panel--register .auth-register-card .wz-step{animation:none}}


/* Organization registration: fixed viewport and page-specific wizard layout. */
/* Keep the organization wizard fixed to the viewport, while using the same shared panel/card treatment as member registration. */
        html:has(.org-register-page),
        html:has(.org-register-page) body {
            width: 100%;
            height: 100dvh !important;
            overflow: hidden !important;
        }
        .org-register-page {
            width: 100%;
            height: 100vh !important;
            height: 100dvh !important;
            min-height: 0 !important;
            overflow: hidden !important;
        }
        .org-register-page .auth-form-panel--register {
            height: 100vh;
            height: 100dvh;
            min-height: 0;
            padding: .65rem clamp(.75rem, 1.8vw, 1.5rem);
            overflow: visible !important;
            align-items: flex-start;
        }
        .org-register-page .auth-register-card {
            width: 100%;
            max-height: 100%;
            margin-block: auto;
            padding-block: .4rem;
        }
        .org-register-page .auth-register-card h2 { font-size: 1.35rem; line-height: 1.15; }
        .org-register-page .wz-chip { margin-bottom: .35rem; }
        .org-register-page .wz-progress { margin-bottom: .65rem; }
        .org-register-page .auth-register-card .form-control,
        .org-register-page .auth-register-card .form-select {
            min-height: 2.2rem;
            padding-block: .4rem;
        }
        .org-register-page .form-label { margin-bottom: .2rem; }
        .org-register-page .wz-step[data-step="3"] .form-label { margin-bottom: .35rem; }
        .org-register-page .wz-step .row.mb-3 { margin-bottom: .45rem !important; }
        .org-register-page .wz-review-card { padding: .6rem .8rem; margin-bottom: 0; }
        .org-register-page .wz-review-head { margin-bottom: .25rem; }
        .org-register-page .wz-review-row { padding: .22rem 0; font-size: .78rem; }
        .org-register-page .wz-review-row .k { min-width: 38%; }
        .org-register-page .wz-review-card h6 { font-size: .88rem; }
        .org-register-page .form-check.mb-4 { margin-bottom: .25rem !important; }
        .org-register-page #orgForm + p { margin-top: .45rem !important; }
        .org-register-page .wz-map { z-index: 0; background: #f5f1ed; }
        .org-register-page .wz-map .leaflet-control-attribution { font-size: 9px; }
        .org-register-page .wz-map .leaflet-control-zoom a { color: #7a231d; }
        .org-register-page .wz-map .leaflet-marker-icon { cursor: grab; }
        .org-register-page .wz-map .leaflet-marker-icon:active { cursor: grabbing; }
        .org-register-page .wz-hint { margin-top: .25rem; }
        .org-register-page .wz-choice { padding: .48rem .6rem; }
        .org-register-page .wz-choice span { font-size: .82rem; }
        .org-register-page .wz-choice small { font-size: .7rem; }
        .org-register-page .wz-soft-panel { padding: .65rem; }
        .org-register-page .wz-callout { padding: .55rem .7rem; margin-top: .45rem; font-size: .8rem; }
        .org-register-page .wz-step[data-step="3"] .wz-callout { margin-top: .85rem; padding: .7rem .85rem; line-height: 1.45; }
        .org-register-page .rf-file { padding: .55rem .7rem; }
        .org-register-page .rf-file svg { width: 20px; height: 20px; margin-bottom: 0 !important; }
        .org-register-page .rf-file-name { font-size: .8rem; }
        .org-register-page .rf-file-hint { font-size: .7rem; }

        /* Explicit layouts prevent auto-placement from pushing fields into unintended columns. */
        .org-register-page .wz-location-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: .75rem;
            align-items: start;
        }
        .org-register-page .wz-location-map-panel,
        .org-register-page .wz-location-details,
        .org-register-page .wz-upload-section {
            min-width: 0;
            padding: .75rem;
            border: 1px solid #efe3df;
            border-radius: .9rem;
            background: #fff;
        }
        .org-register-page .wz-location-details { display: grid; gap: .65rem; align-content: start; }
        .org-register-page #storageDetails { margin: 0; }
        .org-register-page .wz-facility-fields { display: grid; gap: .55rem; }
        .org-register-page .wz-section-heading { margin: 0 0 .2rem; color: #3d2b29; font-size: .88rem; font-weight: 750; }
        .org-register-page .wz-section-subheading { margin: 0 0 .55rem; color: #847572; font-size: .72rem; line-height: 1.35; }

        .org-register-page .wz-upload-section { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: .75rem; align-items: center; margin-top: .65rem; }
        .org-register-page .wz-upload-section .wz-section-subheading { margin-bottom: 0; }
        .org-register-page .wz-upload-section .rf-file { margin: 0; }
        .org-register-page .wz-step[data-step="2"] > .wz-nav { margin-top: .65rem; }
        .org-register-page .wz-step[data-step="3"]:not(.d-none) { display: block !important; }
        .org-register-page .wz-account-grid,
        .org-register-page .wz-password-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
        .org-register-page .wz-account-grid > *,
        .org-register-page .wz-password-grid > * { min-width: 0; margin: 0; }
        .org-register-page .wz-password-grid .input-icon-group { min-width: 0; }
        .org-register-page .wz-step[data-step="3"] .wz-password-grid { margin-top: .9rem; }
        .org-register-page .wz-step[data-step="3"] .wz-nav { margin-top: .9rem; }
        .org-register-page .wz-step[data-step="4"]:not(.d-none) { display: block !important; }
        .org-register-page .wz-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; align-items: start; }
        .org-register-page .wz-review-grid > * { min-width: 0; }
        .org-register-page .wz-review-grid [aria-labelledby="reviewProfileHeading"] { order: 0; }
        .org-register-page .wz-review-grid [aria-labelledby="reviewAccountHeading"] { order: 1; }
        .org-register-page .wz-review-grid [aria-labelledby="reviewLocationHeading"] { grid-column: 1 / -1; order: 2; }
        .org-register-page .wz-step[data-step="4"] .form-check { margin-top: .55rem; }
        .org-register-page .wz-step[data-step="4"] > .wz-nav { margin-top: .1rem; }
        @media (min-width: 700px) {
            .org-register-page .wz-facility-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .5rem; }
            .org-register-page .wz-facility-fields > div:last-child { grid-column: 1 / -1; }
            .org-register-page .wz-facility-fields .form-label { margin-bottom: .1rem; font-size: .7rem; }
            .org-register-page .wz-facility-fields .form-control { min-height: 2rem; padding-inline: .45rem; font-size: .74rem; }
        }
        @media (max-width: 991.98px) {
            .org-register-page .auth-form-panel--register {
                padding: .5rem .85rem;
            }
            .org-register-page .auth-brand--register { display: none !important; }
        }
        @media (max-width: 575.98px) {
            .org-register-page .wz-location-details,
            .org-register-page .wz-upload-section { grid-template-columns: minmax(0, 1fr); }

            .org-register-page .wz-account-grid,
            .org-register-page .wz-password-grid,
            .org-register-page .wz-review-grid { grid-template-columns: minmax(0, 1fr); }
            .org-register-page .auth-register-card > a.d-lg-none { margin-bottom: .35rem !important; }
            .org-register-page .wz-side-sub { display: none; }
        }
        @media (max-width: 767.98px) and (max-height: 700px) {
            .org-register-page .wz-location-details { gap: .4rem; }
            .org-register-page .wz-facility-fields { gap: .35rem; }
            .org-register-page .wz-upload-section { gap: .45rem; }
        }
        @media (max-height: 700px) {
            .org-register-page .auth-form-panel--register { padding-block: .25rem; }
            .org-register-page .auth-register-card > a.d-lg-none { margin-bottom: .15rem !important; }

            .org-register-page .wz-location-map-panel .wz-section-subheading,
            .org-register-page #storageDetails .wz-section-subheading,
            .org-register-page .wz-upload-copy .wz-section-subheading { display: none; }
            .org-register-page .wz-location-map-panel,
            .org-register-page .wz-location-details,
            .org-register-page .wz-upload-section { padding: .5rem; }
            .org-register-page .wz-location-layout { gap: .45rem; }
            .org-register-page .wz-section-subheading { margin-bottom: .35rem; }
            .org-register-page .wz-progress { margin-bottom: .4rem; }
            .org-register-page .auth-register-card .form-control,
            .org-register-page .auth-register-card .form-select { min-height: 2rem; padding-block: .28rem; }
            .org-register-page .wz-review-card { padding: .42rem .6rem; }
        }
        .org-register-page .auth-register-card #wzStepTitle {
            font-size: clamp(1.25rem, 2vw, 1.55rem);
            letter-spacing: -.035em;
        }
        .org-register-page .auth-register-card #wzStepSub {
            margin-bottom: .55rem !important;
            font-size: .83rem;
            line-height: 1.35;
        }
        .org-register-page .auth-register-card .form-label {
            font-size: .76rem;
            font-weight: 700 !important;
        }
        .org-register-page .wz-storage-question { margin-bottom: .5rem !important; }
        .org-register-page .wz-storage-question legend { float: none; width: auto; }
        .org-register-page .wz-storage-question .wz-choice { min-height: 100%; padding: .4rem .5rem; }
        .org-register-page .wz-storage-question .wz-choice small { font-size: .68rem; }
        .org-register-page .wz-nav { align-items: center; margin-top: .55rem; }
        .org-register-page #orgForm + p a { text-decoration: underline; text-underline-offset: 2px; }
        .org-register-page .alert { padding: .5rem .75rem; margin-bottom: .5rem; font-size: .78rem; }
        .org-register-page .wz-coordinate-fallback {
            padding: .5rem .65rem;
            margin-top: .45rem;
            border: 1px solid #f0dfda;
            border-radius: .75rem;
            background: #fff9f7;
            color: #6d5a55;
        }
        .org-register-page .wz-coordinate-fallback.d-none { display: none !important; }
        .org-register-page .wz-map--unavailable {
            display: grid;
            place-items: center;
            color: #8b7f7d;
            background: #f8f1ed;
        }
        .org-register-page .wz-map--unavailable::after {
            content: "Interactive map unavailable";
            padding: .4rem .65rem;
            border: 1px solid #eadbd4;
            border-radius: 999px;
            background: rgba(255,255,255,.9);
            font-size: .75rem;
            font-weight: 600;
        }
        @media (max-width: 575.98px) {
            .org-register-page .auth-register-card #wzStepTitle { font-size: 1.15rem; }
            .org-register-page .auth-register-card #wzStepSub { font-size: .75rem; }
            .org-register-page .auth-register-card .wz-review-row { gap: .5rem; }
        }
        @media (max-height: 700px) {
            .org-register-page .auth-register-card > a.d-lg-none { margin-bottom: .1rem !important; }
            .org-register-page .auth-register-card #wzStepSub { margin-bottom: .3rem !important; }
            .org-register-page .auth-register-card .row.g-3 { --bs-gutter-y: .42rem; --bs-gutter-x: .65rem; }
            .org-register-page .wz-step[data-step="3"] .wz-password-grid { margin-top: .55rem; gap: .55rem; }
            .org-register-page .wz-step[data-step="3"] .form-label { margin-bottom: .2rem; }
            .org-register-page .wz-step[data-step="3"] .wz-callout { margin-top: .55rem; padding: .48rem .6rem; }
            .org-register-page .wz-step[data-step="3"] .wz-nav { margin-top: .45rem; }
        }
        /* Phone layout: use compact paired fields and a side-by-side map/details panel. */
        @media (max-width: 575.98px) {
            .org-register-page .wz-step[data-step="1"] > .row.g-3 {
                --bs-gutter-x: .55rem;
                --bs-gutter-y: .45rem;
            }
            .org-register-page .wz-step[data-step="1"] > .row.g-3 > .col-sm-6 {
                flex: 0 0 auto;
                width: 50%;
            }
            .org-register-page .wz-step[data-step="1"] > .row.g-3 .form-label { font-size: .68rem; line-height: 1.15; }
            .org-register-page .wz-step[data-step="1"] > .row.g-3 .form-control,
            .org-register-page .wz-step[data-step="1"] > .row.g-3 .form-select { font-size: .75rem; }
            .org-register-page .wz-location-layout { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
            .org-register-page .wz-location-map-panel,
            .org-register-page .wz-location-details,
            .org-register-page .wz-upload-section { padding: .45rem; }
            .org-register-page .wz-location-details { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
            .org-register-page .wz-location-map-panel .wz-section-subheading,
            .org-register-page #storageDetails .wz-section-subheading,
            .org-register-page .wz-upload-copy .wz-section-subheading { display: none; }

            .org-register-page #storageDetails { padding: .45rem; }
            .org-register-page .wz-facility-fields { gap: .28rem; }
            .org-register-page .wz-facility-fields .form-label { margin-bottom: .08rem; font-size: .68rem; }
            .org-register-page .wz-facility-fields .form-control { min-height: 1.9rem; font-size: .75rem; }
            .org-register-page .wz-upload-section { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: .4rem; }
            .org-register-page .wz-upload-section .rf-file { padding: .35rem .4rem; }
            .org-register-page .wz-upload-section .rf-file-name { font-size: .68rem; }
            .org-register-page .wz-upload-section .rf-file-hint { font-size: .62rem; }
        }
        @media (min-width: 340px) and (max-width: 575.98px) {
            .org-register-page .wz-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .org-register-page .wz-review-grid .wz-review-row { gap: .35rem; padding: .14rem 0; font-size: .69rem; }
            .org-register-page .wz-review-grid .wz-review-row .k { min-width: 34%; }
            .org-register-page .wz-review-grid .wz-review-card { padding: .45rem .55rem; }
            .org-register-page .wz-review-grid .wz-review-head h6 { font-size: .76rem; }
            .org-register-page .wz-facility-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .org-register-page .wz-facility-fields > div:last-child { grid-column: 1 / -1; }
        }
        @media (max-width: 575.98px) and (max-height: 700px) {

            .org-register-page .wz-location-map-panel,
            .org-register-page .wz-location-details,
            .org-register-page .wz-upload-section { padding: .35rem; }
            .org-register-page .wz-step[data-step="1"] > .row.g-3 { --bs-gutter-y: .3rem; }
            .org-register-page .wz-storage-question { margin-bottom: .25rem !important; }
            .org-register-page .wz-storage-question .wz-choice { padding: .3rem .35rem; }
        }
        @media (max-width: 575.98px) {
            .org-register-page .wz-step[data-step="3"] > .wz-nav > .btn {
                padding: .35rem .55rem !important;
                font-size: .78rem;
                line-height: 1.2;
                white-space: nowrap;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .org-register-page *, .org-register-page *::before, .org-register-page *::after {
                scroll-behavior: auto !important;
                transition-duration: .01ms !important;
                animation-duration: .01ms !important;
            }
        }


@keyframes wzLocationBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes wzLocationDialogIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Step 2 location picker: a compact copy-and-control row, matching the verification upload. */
.org-register-page .wz-location-map-panel{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:.55rem;align-items:center}
.org-register-page .wz-location-copy{min-width:0}
.org-register-page .wz-location-copy .wz-location-pin-label{margin:0;font-size:.76rem;line-height:1.2}
.org-register-page .wz-location-copy .wz-section-subheading{margin-bottom:0}
.org-register-page .wz-location-controls{display:grid;gap:.38rem;min-width:0}
.org-register-page .wz-location-selection{display:flex;align-items:center;gap:.48rem;min-width:0;padding:.48rem;border:1px solid #eadbd4;border-radius:.8rem;background:linear-gradient(135deg,#fff 0%,#fdf7f6 100%)}
.org-register-page .wz-location-selection__icon{display:grid;place-items:center;flex:0 0 2rem;width:2rem;height:2rem;border-radius:.65rem;background:#fbeae8;color:#8b2e26}
.org-register-page .wz-location-selection__copy{display:grid;gap:.14rem;min-width:0}
.org-register-page .wz-location-selection__copy strong{color:#3d2b29;font-size:.76rem}
.org-register-page .wz-location-selection__copy span{overflow:hidden;color:#847572;font-size:.66rem;text-overflow:ellipsis;white-space:nowrap}
.org-register-page .wz-location-open{display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;margin:0;padding:.44rem .6rem;font-size:.76rem}
.org-register-page .wz-location-map-panel > .wz-hint,
.org-register-page .wz-location-map-panel > .wz-coordinate-fallback{grid-column:1/-1}
.org-register-page .wz-location-map-panel > .wz-hint{margin:.1rem 0 0}
.wz-location-modal[hidden]{display:none!important}
.wz-location-modal{position:fixed;inset:0;z-index:2100;display:grid;place-items:center;padding:1rem;background:rgba(33,17,15,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:wzLocationBackdropIn .2s ease both}
.wz-location-modal__backdrop{position:absolute;inset:0}
.wz-location-modal__dialog{position:relative;z-index:1;display:flex;flex-direction:column;width:min(100%,68rem);max-height:calc(100dvh - 2rem);overflow:hidden;border:1px solid rgba(255,255,255,.72);border-radius:1.25rem;background:#fff;box-shadow:0 28px 90px rgba(29,12,10,.34);animation:wzLocationDialogIn .24s cubic-bezier(.2,.8,.2,1) both}
.wz-location-modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.25rem .85rem;border-bottom:1px solid #f0e6e3;background:linear-gradient(135deg,#fff 0%,#fff9f7 100%)}
.wz-location-modal__eyebrow{display:block;margin-bottom:.2rem;color:#9c5148;font-size:.62rem;font-weight:800;letter-spacing:.12em}
.wz-location-modal__header h2{margin:0;color:#3d2b29;font-size:1.2rem;font-weight:750;letter-spacing:-.02em}
.wz-location-modal__header p{margin:.25rem 0 0;color:#847572;font-size:.8rem}
.wz-location-modal__close{display:grid;place-items:center;flex:0 0 2.25rem;width:2.25rem;height:2.25rem;border:1px solid #eadbd4;border-radius:.7rem;background:#fff;color:#674b46;transition:background .2s ease,color .2s ease,transform .2s ease}
.wz-location-modal__close:hover{background:#fdf1ef;color:#7a231d;transform:rotate(4deg)}
.wz-location-modal__body{display:flex;flex:1 1 auto;flex-direction:column;gap:.55rem;min-height:0;padding:.8rem 1.1rem .65rem}
.wz-map-search-row{display:flex;flex:0 0 auto;gap:.6rem;align-items:center}
.wz-map-search-row .input-icon-group{min-width:0}
.wz-map-search-row .form-control{min-height:2.65rem;border-radius:.75rem}
.wz-map-search-row .btn{min-height:2.65rem;padding-inline:1.15rem}
.wz-location-modal .wz-map{flex:1 1 auto;width:100%;height:clamp(300px,58dvh,580px);min-height:260px;border:1px solid #e6d9d5;border-radius:.95rem;background:#f5f1ed;cursor:grab}
.wz-location-modal .wz-map:active{cursor:grabbing}
.wz-location-modal .wz-map--unavailable{display:grid;place-items:center;color:#8b7f7d;background:#f8f1ed}
.wz-location-modal .wz-map--unavailable::after{content:"Interactive map unavailable";padding:.4rem .65rem;border:1px solid #eadbd4;border-radius:.6rem;background:#fff;color:#735d57;font-size:.8rem}
.wz-map-selection-summary{flex:0 0 auto;overflow:hidden;margin:0;color:#604b46;font-size:.75rem;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.wz-location-modal .wz-hint{flex:0 0 auto;margin:0;font-size:.72rem;line-height:1.3}
.wz-location-modal__footer{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.75rem 1.1rem;border-top:1px solid #f0e6e3;background:#fff}
.wz-location-modal__footer > span{color:#8b7f7d;font-size:.67rem}
.wz-location-modal__footer > div{display:flex;gap:.55rem;align-items:center}
.wz-location-modal__footer .btn{min-height:2.45rem;padding-inline:1rem}
.wz-location-modal__footer #useLocation:disabled{cursor:not-allowed;opacity:.48}
.wz-location-modal .leaflet-control-attribution{font-size:9px}
.wz-location-modal .leaflet-control-zoom a{color:#7a231d}
.wz-location-modal .leaflet-marker-icon{cursor:grab}
.wz-location-modal .leaflet-marker-icon:active{cursor:grabbing}
@media(max-width:575.98px){
 .org-register-page .wz-location-map-panel{display:block}
 .org-register-page .wz-location-map-panel .wz-section-heading{font-size:.76rem}
 .org-register-page .wz-location-selection{gap:.42rem;align-items:center;padding:.42rem}
 .org-register-page .wz-location-selection__icon{flex-basis:2rem;width:2rem;height:2rem;border-radius:.62rem}
 .org-register-page .wz-location-selection__copy strong{font-size:.72rem}
 .org-register-page .wz-location-selection__copy span{overflow-wrap:anywhere;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.64rem}
 .org-register-page .wz-location-controls{gap:.35rem}
 .org-register-page .wz-location-open{gap:.3rem;margin-top:.42rem;padding:.42rem .5rem;font-size:.72rem}
 .org-register-page .wz-location-map-panel > .wz-hint{display:none}
 .wz-location-modal{padding:.35rem}
 .wz-location-modal__dialog{width:100%;max-height:calc(100dvh - .7rem);border-radius:.95rem}
 .wz-location-modal__header{padding:.75rem .8rem .65rem}
 .wz-location-modal__header h2{font-size:1.05rem}
 .wz-location-modal__header p{font-size:.72rem}
 .wz-location-modal__body{gap:.4rem;padding:.65rem .65rem .5rem}
 .wz-map-search-row{gap:.35rem}
 .wz-map-search-row .form-control{min-height:2.45rem;font-size:.82rem}
 .wz-map-search-row #placeSearch{min-width:0;padding-left:2.1rem}
 .wz-map-search-row .btn{min-height:2.45rem;padding-inline:.75rem}
 .wz-map-search-row #searchPlace{font-size:.76rem}
 .wz-location-modal .wz-map{height:clamp(285px,52dvh,440px);min-height:250px;border-radius:.75rem}
 .wz-map-selection-summary{font-size:.68rem}
 .wz-location-modal .wz-hint{font-size:.66rem;line-height:1.2}
 .wz-location-modal__footer{gap:.45rem;padding:.6rem .65rem}
 .wz-location-modal__footer > span{max-width:9rem;font-size:.6rem;line-height:1.25}
 .wz-location-modal__footer > div{gap:.35rem}
 .wz-location-modal__footer .btn{min-height:2.25rem;padding-inline:.65rem;font-size:.76rem}
}
@media(max-height:700px){
 .wz-location-modal__header{padding-block:.65rem}
 .wz-location-modal__body{gap:.4rem;padding-block:.55rem}
 .wz-location-modal .wz-map{height:clamp(250px,53dvh,420px);min-height:230px}
 .wz-location-modal__footer{padding-block:.5rem}
}
@media(prefers-reduced-motion:reduce){.wz-location-modal__close{transition:none}.wz-location-modal,.wz-location-modal__dialog{animation:none}}


/* Short-screen Step 2: preserve the vertical container order without clipping navigation. */
@media (max-height: 700px) {
    .org-register-page .wz-location-map-panel > .wz-hint { display: none; }
    .org-register-page .wz-location-map-panel { gap: .35rem; }
    .org-register-page .wz-location-controls { gap: .25rem; }
    .org-register-page .wz-location-selection { padding: .34rem; }
    .org-register-page .wz-location-open { padding: .34rem .5rem; }
    .org-register-page .wz-location-details { gap: .28rem; padding: .34rem; }
    .org-register-page #storageDetails { padding: .3rem; }
    .org-register-page .wz-location-field .form-control { min-height: 1.8rem; padding-block: .22rem; }
    .org-register-page .wz-facility-fields { gap: .18rem .32rem; }
    .org-register-page .wz-facility-fields .form-label { margin-bottom: .04rem; font-size: .64rem; }
    .org-register-page .wz-facility-fields .form-control { min-height: 1.75rem; padding-block: .2rem; font-size: .72rem; }
    .org-register-page .wz-upload-section { gap: .35rem; margin-top: .4rem; padding: .34rem; }
    .org-register-page .wz-step[data-step="2"] > .wz-nav { margin-top: .32rem; }
}
@media (max-width: 575.98px) {
    .org-register-page .wz-location-map-panel { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
    .org-register-page .wz-location-open { margin-top: 0; }
}


/* Compact Step 2 pin row: status plus action, with explanations reserved for the map dialog. */
.org-register-page .wz-location-copy .wz-section-subheading,
.org-register-page .wz-location-map-panel > .wz-hint { display: none; }
.org-register-page .wz-location-controls { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .45rem; min-width: 0; }
.org-register-page .wz-location-selection { gap: .4rem; padding: .34rem; }
.org-register-page .wz-location-selection__icon { flex-basis: 1.75rem; width: 1.75rem; height: 1.75rem; border-radius: .55rem; }
.org-register-page .wz-location-selection__copy strong { font-size: .72rem; }
.org-register-page .wz-location-selection__copy span { font-size: .62rem; }
.org-register-page .wz-location-open { width: auto; min-height: 2rem; margin: 0; padding: .38rem .5rem; white-space: nowrap; }
@media (max-width: 575.98px) {
    .org-register-page .wz-location-map-panel { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
    .org-register-page .wz-location-controls { gap: .25rem; }
    .org-register-page .wz-location-selection__icon { display: none; }
    .org-register-page .wz-location-selection__copy strong { font-size: .68rem; }
    .org-register-page .wz-location-selection__copy span { max-width: 7rem; font-size: .58rem; }
    .org-register-page .wz-location-open { padding: .35rem .42rem; font-size: .68rem; }
}

/* Keep the pin and City together; Storage facility remains a separate conditional card. */
.org-register-page .wz-location-combined { grid-template-columns: minmax(0, 1.2fr) minmax(12rem, .8fr); align-items: center; gap: .7rem; }
.org-register-page .wz-location-combined .wz-location-map-panel { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: .28rem; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.org-register-page .wz-location-combined .wz-location-field { min-width: 0; }
.org-register-page .wz-location-layout > #storageDetails { margin: 0; }
@media (max-width: 575.98px) {
    .org-register-page .wz-location-combined { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
}


/* ===== Auth pages (login + register): fixed one-screen, nothing scrolls ===== */
@media (min-width: 992px) {
  html:has(.auth-shell),
  html:has(.auth-shell) body {
    height: 100dvh;
    overflow: hidden !important;
  }
  .auth-shell:not(.org-register-page) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .auth-shell:not(.org-register-page) > .auth-brand,
  .auth-shell:not(.org-register-page) > .auth-form-panel {
    height: 100dvh;
    min-height: 0;
  }
  .auth-shell:not(.org-register-page) > .auth-form-panel,
  .auth-shell:not(.org-register-page) > .auth-form-panel.auth-form-panel--register {
    padding-block: .75rem;
    align-items: center;
    overflow: hidden !important;   /* no scrollbar on the right side */
  }
  /* login.blade.php has an inline min-height:660px that can exceed short screens */
  .auth-form-panel .auth-card {
    min-height: min(660px, calc(100dvh - 1.5rem)) !important;
  }
  .auth-form-panel--register .auth-register-card { min-height: 0 !important; }
  .auth-form-panel--register .auth-register-card .wz-step { max-height: none; overflow: visible; }
}

/* Squeeze spacing on shorter laptop screens so everything still fits */
@media (min-width: 992px) and (max-height: 780px) {
  .auth-form-panel .auth-card h2,
  .auth-form-panel--register .auth-register-card #wzStepTitle { font-size: 1.35rem; }
  .auth-form-panel .auth-tabs { margin-bottom: 1rem; }
  .auth-form-panel .mb-4 { margin-bottom: .75rem !important; }
  .auth-form-panel .mb-3 { margin-bottom: .6rem !important; }
  body.marketing .auth-card .form-control,
  body.marketing .auth-card .form-select { padding-block: .5rem; min-height: 2.4rem; }
  .auth-form-panel--register .wz-progress { margin-bottom: .9rem; }
  .auth-form-panel--register .wz-nav { margin-top: .9rem; }
  .auth-form-panel--register .wz-review-card { padding: .7rem .9rem; margin-bottom: .6rem; }
  .auth-form-panel--register .wz-review-row { padding: .25rem 0; font-size: .82rem; }
}

/* ======================================================================
   ABOUT PAGE — original layout, refined
   ====================================================================== */
.about-original{background:var(--cream);overflow:hidden}
.about-original__intro{position:relative;padding:clamp(4rem,8vw,6.5rem) 1rem clamp(3rem,6vw,5rem)}
.about-original__title{max-width:56rem;margin:0 auto .9rem;font-size:clamp(2.35rem,5vw,4.8rem);line-height:1;letter-spacing:-.06em}
.about-original__lead{max-width:39rem;line-height:1.75}
.about-original__anchor{display:inline-flex;gap:.45rem;align-items:center;margin-top:1.2rem;color:var(--brand-primary);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:gap .2s ease,color .2s ease}
.about-original__anchor:hover{gap:.8rem;color:var(--brand-primary-dark)}
.about-original__mission{padding-top:clamp(2rem,5vw,4.5rem);padding-bottom:clamp(3rem,6vw,5.5rem)}
.about-original__photo{position:relative;min-height:27rem!important;overflow:hidden;border:0!important;border-radius:1.5rem!important;box-shadow:0 24px 48px -25px rgba(75,26,24,.46);transform:rotate(-1deg);transition:transform .45s ease,box-shadow .45s ease}
.about-original__photo img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.about-original__photo:hover{transform:rotate(0) translateY(-7px);box-shadow:0 32px 60px -28px rgba(75,26,24,.58)}
.about-original__photo:hover img{transform:scale(1.05)}
.about-original__photo-label{position:absolute;left:1rem;bottom:1rem;z-index:1;padding:.55rem .75rem;border-radius:.7rem;color:#fff;background:rgba(75,26,24,.7);font-size:.68rem;font-weight:700;backdrop-filter:blur(8px)}
.about-original__section-number{margin-right:.25rem;color:var(--brand-primary);font-variant-numeric:tabular-nums}
.about-original__mission-title{max-width:34rem;font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.08;letter-spacing:-.05em}
.about-original__features{display:flex;flex-direction:column;gap:.35rem}
.about-original__values,.about-original__team{padding-top:clamp(3rem,6vw,5.5rem);padding-bottom:clamp(3rem,6vw,5.5rem)}
.about-original__section-head h2{font-size:clamp(2rem,3.7vw,3.2rem);letter-spacing:-.055em}
.about-original__value-card{height:100%;padding:1.25rem 1rem;border:1px solid rgba(255,255,255,.86);border-radius:1.2rem;background:rgba(255,255,255,.5);box-shadow:0 12px 28px -24px rgba(75,26,24,.45);transition:transform .3s ease,box-shadow .3s ease,background .3s ease}
.about-original__value-card:hover{transform:translateY(-7px);background:rgba(255,255,255,.9);box-shadow:0 22px 38px -25px rgba(75,26,24,.55)}
.about-original__value-icon{display:grid;place-items:center;width:4.5rem;height:4.5rem;margin:0 auto 1rem;border-radius:50%;color:var(--brand-primary);background:#eeb9b4}
.about-original__value-card:hover .about-original__value-icon{transform:translateY(-3px) rotate(-4deg)}
.about-original__impact{padding:clamp(3rem,6vw,5rem) 0;background:linear-gradient(135deg,var(--brand-primary-900),var(--brand-primary-dark) 55%,var(--brand-primary));position:relative;overflow:hidden}
.about-original__impact::after{content:"";position:absolute;right:-8rem;top:-13rem;width:30rem;height:30rem;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 2rem rgba(255,255,255,.03),0 0 0 5rem rgba(255,255,255,.02);pointer-events:none}
.about-original__impact .container{position:relative;z-index:1}.about-original__impact .hero-stat-col{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.about-original__impact .hero-stat-number{font-size:clamp(2rem,4vw,3.3rem);letter-spacing:-.06em}.about-original__team-card{height:100%;padding:1.5rem 1rem;border:1px solid rgba(255,255,255,.8);border-radius:1.2rem;background:rgba(255,255,255,.56);text-align:center}.about-original__avatar{border:0!important;background:linear-gradient(145deg,#f7d8d1,#eeb9b4);color:var(--brand-primary-dark);box-shadow:0 12px 20px -16px rgba(75,26,24,.6)}
.about-original__cta{padding-top:0}.about-original__cta .content-card{background:linear-gradient(125deg,var(--brand-primary-900),var(--brand-primary-dark) 55%,var(--brand-primary));box-shadow:0 28px 55px -30px rgba(75,26,24,.65)}.about-original__cta-icon{display:grid;place-items:center;width:3.5rem;height:3.5rem;flex:0 0 auto;border:1px solid rgba(255,255,255,.25);border-radius:1rem;color:#fff;background:rgba(255,255,255,.13);font-size:2rem;font-weight:300;line-height:1}
@media(max-width:767.98px){.about-original__intro{padding-top:3rem}.about-original__title{font-size:clamp(2.3rem,12vw,3.6rem)}.about-original__photo{min-height:20rem!important}.about-original__impact .hero-stat-col:nth-child(even){border-left:1px solid rgba(255,255,255,.25)}.about-original__impact .hero-stat-col:nth-child(n+4){border-top:1px solid rgba(255,255,255,.25)}.about-original__cta .content-card{align-items:flex-start!important;flex-direction:column}.about-original__cta .btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.about-original__anchor,.about-original__photo,.about-original__photo img,.about-original__value-card,.about-original__value-icon{transition:none}.about-original__photo:hover{transform:rotate(-1deg)}.about-original__photo:hover img{transform:none}.about-original__value-card:hover{transform:none}}

/* Our Story — spacious red container with subtle blood-inspired motion. */
.about-original__intro{position:relative;padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.about-original__story-card{position:relative;isolation:isolate;min-height:27rem;max-width:72rem;margin-inline:auto;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:clamp(3.5rem,7vw,6rem) clamp(2.25rem,12vw,12rem);border-radius:1.7rem;background:linear-gradient(135deg,#4b1a18 0%,#7e2624 44%,#a6322f 78%,#bd5144 100%);box-shadow:0 26px 55px -30px rgba(75,26,24,.65)}
.about-original__story-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 28%,rgba(255,193,180,.18),transparent 33%),linear-gradient(110deg,rgba(255,255,255,.05),transparent 38%,rgba(255,255,255,.05));pointer-events:none}
.about-original__story-card::after{content:"";position:absolute;inset:.9rem;border:1px solid rgba(255,255,255,.14);border-radius:1.15rem;pointer-events:none}
.about-original__story-content{position:relative;z-index:3;max-width:44rem;margin-inline:auto;color:#fff;text-align:center}
.about-original__story-content .faq-category-label{gap:.6rem;width:max-content;margin-inline:auto;padding:.38rem .72rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:rgba(255,255,255,.88);background:rgba(255,255,255,.1);box-shadow:0 10px 22px -18px rgba(33,8,7,.65);backdrop-filter:blur(8px);transition:transform .25s ease,background .25s ease}
.about-original__story-content .faq-category-label::before{content:"";width:.38rem;height:.38rem;border-radius:50%;background:#ffc1b4;box-shadow:0 0 0 .27rem rgba(255,193,180,.14);animation:aboutBloodPulse 2.2s ease-in-out infinite}
.about-original__story-content .faq-category-label:hover{transform:translateY(-2px);background:rgba(255,255,255,.17)}
.about-original__story-content .about-original__title{max-width:43rem;margin-inline:auto;color:#fff;font-size:clamp(2.25rem,4.7vw,4.45rem);line-height:1.02;text-shadow:0 8px 28px rgba(42,8,7,.22);text-wrap:balance}
.about-original__story-content .about-original__lead{max-width:35rem;color:rgba(255,255,255,.76);font-size:clamp(.86rem,1.4vw,.98rem);line-height:1.7;text-wrap:balance}
.about-original__story-content .about-original__anchor{color:#fff;border-bottom:1px solid rgba(255,255,255,.42);padding-bottom:.22rem}
.about-original__story-content .about-original__anchor:hover{color:#ffc1b4}
.about-original__story-orbit{position:absolute;border:1px solid rgba(255,255,255,.13);border-radius:50%;pointer-events:none}
.about-original__story-orbit--one{width:27rem;height:27rem;top:-15rem;right:-7rem;animation:aboutBloodOrbitOne 19s ease-in-out infinite alternate}
.about-original__story-orbit--two{width:19rem;height:19rem;bottom:-11rem;left:-6rem;border-color:rgba(255,193,180,.16);animation:aboutBloodOrbitTwo 14s ease-in-out infinite alternate}
.about-original__story-drop{position:absolute;z-index:1;width:.82rem;height:1.12rem;border-radius:65% 35% 60% 40%;background:linear-gradient(145deg,#ffc1b4,#d86b5a);box-shadow:0 8px 14px rgba(42,8,7,.2);transform:rotate(45deg);opacity:.6;animation:aboutBloodDrop 8s ease-in-out infinite}
.about-original__story-drop--one{top:18%;left:17%;animation-delay:-1.5s}.about-original__story-drop--two{right:17%;top:27%;width:.56rem;height:.78rem;animation-delay:-4.2s}.about-original__story-drop--three{bottom:17%;right:25%;width:.42rem;height:.6rem;animation-delay:-6s}
@keyframes aboutBloodPulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.35);opacity:1}}
@keyframes aboutBloodOrbitOne{0%{transform:translate3d(0,0,0) rotate(-8deg)}100%{transform:translate3d(-1rem,1.2rem,0) rotate(9deg)}}
@keyframes aboutBloodOrbitTwo{0%{transform:translate3d(0,0,0) rotate(6deg)}100%{transform:translate3d(1rem,-.8rem,0) rotate(-9deg)}}
@keyframes aboutBloodDrop{0%,100%{transform:translate3d(0,-.35rem,0) rotate(45deg);opacity:.22}45%{transform:translate3d(1rem,1.7rem,0) rotate(45deg);opacity:.7}70%{transform:translate3d(-.5rem,2.8rem,0) rotate(45deg);opacity:.1}}
@media(max-width:767.98px){.about-original__story-card{min-height:28rem;padding:3.25rem 1.25rem;border-radius:1.3rem}.about-original__story-card::after{inset:.65rem;border-radius:.95rem}.about-original__story-content .about-original__title{font-size:clamp(2rem,10vw,3.2rem)}.about-original__story-orbit--one{width:21rem;height:21rem;right:-11rem}.about-original__story-drop--one{left:8%}.about-original__story-drop--two{right:8%}}
@media(prefers-reduced-motion:reduce){.about-original__story-orbit,.about-original__story-drop,.about-original__story-content .faq-category-label::before{animation:none}.about-original__story-content .faq-category-label:hover{transform:none}}

/* About compact mode — lighter vertical rhythm and CTA-sized Our Story banner. */
.about-original__intro{padding-top:2.25rem;padding-bottom:2.25rem}
.about-original__story-card{min-height:0;max-width:72rem;padding:2.7rem clamp(2rem,7vw,7rem);border-radius:1.25rem}
.about-original__story-card::after{inset:.65rem;border-radius:.9rem}
.about-original__story-content{max-width:39rem}
.about-original__story-content .faq-category-label{margin-bottom:.8rem!important;padding:.3rem .62rem;font-size:.68rem}
.about-original__story-content .about-original__title{max-width:38rem;font-size:clamp(1.85rem,3.8vw,3.25rem);line-height:1.04;margin-bottom:.7rem}
.about-original__story-content .about-original__lead{max-width:32rem;font-size:.82rem;line-height:1.55;margin-bottom:.7rem!important}
.about-original__story-content .about-original__anchor{margin-top:.65rem;font-size:.64rem}
.about-original__story-orbit--one{width:22rem;height:22rem;top:-12rem;right:-6rem}.about-original__story-orbit--two{width:15rem;height:15rem;bottom:-9rem;left:-5rem}
.about-original__story-drop{transform:scale(.78) rotate(45deg)}
.about-original__mission{padding-top:2.5rem;padding-bottom:2.75rem}
.about-original__photo{min-height:21rem!important}
.about-original__mission-title{font-size:clamp(1.65rem,2.7vw,2.45rem)}
.about-original__values,.about-original__team{padding-top:2.75rem;padding-bottom:2.75rem}
.about-original__section-head h2{font-size:clamp(1.7rem,3vw,2.55rem)}
.about-original__value-card{padding:1rem .8rem}.about-original__value-icon{width:3.6rem;height:3.6rem;margin-bottom:.7rem}.about-original__value-icon svg{width:24px;height:24px}
.about-original__impact{padding:2.75rem 0}.about-original__impact .hero-stat-col{padding-top:1rem!important;padding-bottom:1rem!important}.about-original__impact .hero-stat-number{font-size:clamp(1.65rem,3.2vw,2.65rem)}
.about-original__team-card{padding:1.15rem .75rem}.about-original__avatar{width:5.25rem;height:5.25rem}.about-original__cta .content-card{padding:1.35rem!important}
@media(max-width:767.98px){.about-original__intro{padding-top:1.35rem;padding-bottom:1.35rem}.about-original__story-card{padding:2.35rem 1.1rem;border-radius:1.1rem}.about-original__story-content .about-original__title{font-size:clamp(1.7rem,8.5vw,2.55rem)}.about-original__story-content .about-original__lead{font-size:.78rem}.about-original__mission{padding-top:1.9rem;padding-bottom:2.1rem}.about-original__photo{min-height:17rem!important}.about-original__values,.about-original__team{padding-top:2.1rem;padding-bottom:2.1rem}.about-original__impact{padding:2rem 0}.about-original__cta .content-card{padding:1.15rem!important}}

/* Final Our Story refinement — shorter banner, wider content, plain text label. */
.about-original__intro{padding-top:1.5rem;padding-bottom:1.5rem}
.about-original__story-card{min-height:0;padding:1.8rem clamp(2rem,10vw,10rem);border-radius:1.1rem}
.about-original__story-content{max-width:52rem;width:100%}
.about-original__story-content .faq-category-label{display:block;width:auto;margin:0 auto .55rem!important;padding:0;border:0;background:transparent;box-shadow:none;color:#ffc1b4;font-size:.66rem;font-weight:800;letter-spacing:.24em;line-height:1.2;text-transform:uppercase;backdrop-filter:none;transition:none}
.about-original__story-content .faq-category-label::before,.about-original__story-content .faq-category-label::after{display:none;content:none;animation:none}
.about-original__story-content .faq-category-label:hover{transform:none;background:transparent;color:#ffc1b4}
.about-original__story-content .about-original__title{max-width:50rem;margin-bottom:.55rem;font-size:clamp(1.75rem,3.4vw,3rem);letter-spacing:-.045em}
.about-original__story-content .about-original__lead{max-width:45rem;margin-bottom:.5rem!important;font-size:.78rem;line-height:1.5}
.about-original__story-content .about-original__anchor{margin-top:.45rem;font-size:.61rem}
@media(max-width:767.98px){.about-original__intro{padding-top:1rem;padding-bottom:1rem}.about-original__story-card{padding:1.75rem 1.2rem;border-radius:1rem}.about-original__story-content .faq-category-label{font-size:.6rem;letter-spacing:.2em}.about-original__story-content .about-original__title{font-size:clamp(1.6rem,8vw,2.3rem)}.about-original__story-content .about-original__lead{font-size:.75rem}}

/* Shared About content inset — keeps every section aligned with Our Story. */
.about-original{--about-story-inset:clamp(2rem,10vw,10rem)}
.about-original__mission,.about-original__values,.about-original__team,.about-original__cta{padding-left:var(--about-story-inset);padding-right:var(--about-story-inset)}
.about-original__impact .container{padding-left:var(--about-story-inset);padding-right:var(--about-story-inset)}
@media(max-width:767.98px){.about-original{--about-story-inset:1.2rem}.about-original__mission,.about-original__values,.about-original__team,.about-original__cta,.about-original__impact .container{padding-left:var(--about-story-inset);padding-right:var(--about-story-inset)}}

/* ======================================================================
   FAQ PAGE — modern help center redesign
   ====================================================================== */
.faq-modern{min-height:100vh;overflow:hidden;background:linear-gradient(180deg,#fffaf7 0%,var(--cream) 52%,#fffaf7 100%)}
.faq-modern__hero{position:relative;padding:clamp(3.5rem,7vw,6.5rem) 0 clamp(2.75rem,5vw,4.5rem);background:radial-gradient(38% 80% at 94% 10%,rgba(214,107,87,.13),transparent 72%),linear-gradient(180deg,#fffaf7,var(--cream))}
.faq-modern__hero::after{content:"";position:absolute;left:-8rem;bottom:-14rem;width:30rem;height:30rem;border:1px solid rgba(166,50,47,.1);border-radius:50%;box-shadow:0 0 0 2rem rgba(166,50,47,.025),0 0 0 5rem rgba(166,50,47,.018);pointer-events:none}
.faq-modern__eyebrow{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;color:var(--brand-primary);font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.faq-modern__eyebrow-dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--brand-primary);box-shadow:0 0 0 .3rem rgba(166,50,47,.12)}
.faq-modern__title{max-width:43rem;margin-bottom:1rem;font-size:clamp(2.6rem,5.8vw,5.2rem);line-height:.98;letter-spacing:-.065em;color:var(--text-primary)}.faq-modern__lead{max-width:36rem;margin-bottom:1.75rem;color:var(--text-secondary);font-size:.98rem;line-height:1.75}.faq-modern__search{max-width:590px!important}.faq-modern__search .form-control{min-height:3.45rem;border:1px solid rgba(166,50,47,.16);background:rgba(255,255,255,.78);box-shadow:0 16px 30px -24px rgba(75,26,24,.55);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.faq-modern__search .form-control:hover,.faq-modern__search .form-control:focus{transform:translateY(-2px);border-color:var(--brand-primary);box-shadow:0 0 0 .2rem rgba(166,50,47,.1),0 20px 34px -24px rgba(75,26,24,.55)}.faq-modern__status{min-height:1.1rem;color:var(--brand-primary);font-weight:700}
.faq-modern__hero-card{position:relative;display:flex;min-height:22rem;overflow:hidden;align-items:center;justify-content:center;flex-direction:column;gap:.4rem;border-radius:1.8rem;color:#fff;background:linear-gradient(145deg,var(--brand-primary-900),var(--brand-primary-dark) 55%,var(--brand-primary));box-shadow:0 28px 58px -30px rgba(75,26,24,.65);transition:transform .4s ease,box-shadow .4s ease}.faq-modern__hero-card:hover{transform:translateY(-6px) rotate(.5deg);box-shadow:0 36px 68px -32px rgba(75,26,24,.72)}.faq-modern__hero-card strong{font-size:1.05rem}.faq-modern__hero-card>span:not(.faq-modern__drop){color:rgba(255,255,255,.62);font-size:.78rem}.faq-modern__hero-icon{display:grid;place-items:center;width:5rem;height:5rem;margin-bottom:.65rem;border:1px solid rgba(255,255,255,.28);border-radius:1.35rem;color:#ffc1b4;background:rgba(255,255,255,.1);box-shadow:0 16px 28px -20px rgba(0,0,0,.55)}.faq-modern__hero-orbit{position:absolute;width:25rem;height:25rem;top:-12rem;right:-7rem;border:1px solid rgba(255,255,255,.16);border-radius:50%;animation:faqOrbit 15s ease-in-out infinite alternate}.faq-modern__drop{position:absolute;width:.8rem;height:1.1rem;border-radius:65% 35% 60% 40%;background:linear-gradient(145deg,#ffc1b4,#d86b5a);transform:rotate(45deg);opacity:.65;animation:faqDrop 7s ease-in-out infinite}.faq-modern__drop--one{left:17%;bottom:22%;animation-delay:-2s}.faq-modern__drop--two{right:18%;top:24%;width:.55rem;height:.78rem;animation-delay:-4.5s}.faq-modern__hero-lines{display:flex;gap:.3rem;margin-top:1rem}.faq-modern__hero-lines i{display:block;width:2.1rem;height:.2rem;border-radius:99px;background:rgba(255,255,255,.28)}.faq-modern__hero-lines i:nth-child(2){width:3.4rem;background:#ffc1b4}
.faq-modern__workspace{padding-top:clamp(2rem,5vw,4.5rem);padding-bottom:clamp(3rem,6vw,5.5rem)}.faq-modern__sidebar-inner{position:sticky;top:6.5rem}.faq-modern__side-label{margin-bottom:.8rem;color:var(--brand-primary);font-size:.65rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.faq-modern__categories{display:flex;flex-direction:column;gap:.45rem}.faq-modern__category{display:flex;align-items:center;gap:.7rem;padding:.72rem;border:1px solid transparent;border-radius:.9rem;color:var(--text-primary);background:rgba(255,255,255,.35);transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease}.faq-modern__category:hover{transform:translateX(4px);border-color:rgba(166,50,47,.16);color:var(--brand-primary-dark);background:#fff;box-shadow:0 12px 24px -20px rgba(75,26,24,.6)}.faq-modern__category-icon{display:grid;place-items:center;width:2.15rem;height:2.15rem;flex:0 0 auto;border-radius:.7rem;color:var(--brand-primary);background:var(--brand-primary-light)}.faq-modern__category-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:.12rem}.faq-modern__category-copy strong{font-size:.75rem}.faq-modern__category-copy small{color:var(--text-muted);font-size:.62rem}.faq-modern__category-arrow{color:var(--text-muted);font-size:1rem;transition:transform .22s ease,color .22s ease}.faq-modern__category:hover .faq-modern__category-arrow{transform:translate(2px,-2px);color:var(--brand-primary)}.faq-modern__help-card{display:flex;flex-direction:column;gap:.3rem;margin-top:1.25rem;padding:1.1rem;border-radius:1rem;color:#fff;background:linear-gradient(145deg,var(--brand-primary-dark),var(--brand-primary));box-shadow:0 18px 32px -24px rgba(75,26,24,.7)}.faq-modern__help-kicker{color:rgba(255,255,255,.62);font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.faq-modern__help-card strong{font-size:.85rem}.faq-modern__help-card a{margin-top:.25rem;color:#ffc1b4;font-size:.7rem;font-weight:800}
.faq-modern__list-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.7rem}.faq-modern__list-title{margin:0;font-size:clamp(1.55rem,2.7vw,2.4rem);letter-spacing:-.045em}.faq-modern__count{padding:.4rem .65rem;border:1px solid rgba(166,50,47,.14);border-radius:999px;color:var(--brand-primary);background:rgba(255,255,255,.55);font-size:.65rem;font-weight:800;white-space:nowrap}.faq-modern__group{scroll-margin-top:6.5rem}.faq-modern__group-title{display:flex;align-items:center;gap:.65rem;margin-bottom:.7rem;color:var(--text-primary);font-size:.9rem;font-weight:850}.faq-modern__group-icon{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.65rem;color:var(--brand-primary);background:var(--brand-primary-light)}.faq-modern__group-rule{height:1px;flex:1;margin-left:.2rem;background:linear-gradient(90deg,rgba(166,50,47,.2),transparent)}.faq-modern__accordion .accordion-item{overflow:hidden;margin-bottom:.55rem;border:1px solid rgba(255,255,255,.92);border-radius:1rem!important;background:rgba(255,255,255,.66);box-shadow:0 11px 25px -22px rgba(75,26,24,.52);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.faq-modern__accordion .accordion-item:hover{transform:translateY(-2px);border-color:rgba(166,50,47,.18);box-shadow:0 18px 30px -22px rgba(75,26,24,.58)}.faq-modern__accordion .accordion-button{gap:.75rem;padding:1rem 1.15rem;color:var(--text-primary);background:transparent;font-size:.82rem;font-weight:750}.faq-modern__accordion .accordion-button:not(.collapsed){color:var(--brand-primary-dark);background:rgba(246,228,227,.68);box-shadow:none}.faq-modern__accordion .accordion-button:focus{box-shadow:0 0 0 .2rem rgba(166,50,47,.1)}.faq-modern__question-index{min-width:1.55rem;color:var(--brand-primary);font-size:.62rem;font-weight:900;letter-spacing:.04em}.faq-modern__accordion .accordion-body{padding:0 3rem 1.15rem 3.45rem;color:var(--text-secondary);font-size:.82rem;line-height:1.75}.faq-modern__empty{margin-top:1.5rem}.faq-modern__cta-wrap{padding-top:0}.faq-modern__cta{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:clamp(1.25rem,3vw,2rem);border-radius:1.35rem;background:linear-gradient(125deg,var(--brand-primary-900),var(--brand-primary-dark) 55%,var(--brand-primary));box-shadow:0 25px 50px -28px rgba(75,26,24,.68)}.faq-modern__cta-copy{display:flex;align-items:center;gap:.9rem}.faq-modern__cta-copy .faq-modern__side-label{margin-bottom:.25rem;color:rgba(255,255,255,.62)}.faq-modern__cta-icon{display:grid;place-items:center;width:3.2rem;height:3.2rem;flex:0 0 auto;border:1px solid rgba(255,255,255,.25);border-radius:1rem;color:#ffc1b4;background:rgba(255,255,255,.1)}
@keyframes faqOrbit{0%{transform:rotate(-7deg) translate(0,0)}100%{transform:rotate(8deg) translate(-1rem,1rem)}}@keyframes faqDrop{0%,100%{transform:translateY(-.25rem) rotate(45deg);opacity:.2}45%{transform:translate(1rem,1.8rem) rotate(45deg);opacity:.72}70%{transform:translate(-.4rem,2.8rem) rotate(45deg);opacity:.1}}
@media(max-width:991.98px){.faq-modern__sidebar-inner{position:static}.faq-modern__categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.faq-modern__help-card{display:none}}
@media(max-width:575.98px){.faq-modern__hero{padding-top:2.75rem}.faq-modern__title{font-size:clamp(2.45rem,13vw,3.5rem)}.faq-modern__lead{font-size:.88rem}.faq-modern__workspace{padding-top:2rem}.faq-modern__categories{grid-template-columns:1fr}.faq-modern__list-head{align-items:flex-start;flex-direction:column;gap:.5rem}.faq-modern__accordion .accordion-button{padding:.9rem .85rem;font-size:.78rem}.faq-modern__accordion .accordion-body{padding:0 1rem 1rem 2.4rem;font-size:.78rem}.faq-modern__cta{align-items:flex-start;flex-direction:column}.faq-modern__cta .btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.faq-modern__hero-card,.faq-modern__hero-orbit,.faq-modern__drop,.faq-modern__category,.faq-modern__category-arrow,.faq-modern__accordion .accordion-item{animation:none;transition:none}.faq-modern__hero-card:hover,.faq-modern__category:hover,.faq-modern__accordion .accordion-item:hover{transform:none}}

/* FAQ Browse Topics — reliable desktop sticky sidebar. */
.faq-modern{overflow:clip}
.faq-modern__sidebar{position:sticky;top:6.5rem;align-self:start}
.faq-modern__sidebar-inner{position:static}
@media(max-width:991.98px){.faq-modern__sidebar{position:static}.faq-modern__sidebar-inner{position:static}}

/* FAQ quick-answer visual — image placeholder with designed blood-donation overlays. */
.faq-modern__hero-photo{display:block;position:relative;min-height:22rem;overflow:hidden;background:#5a1d1a;isolation:isolate}
.faq-modern__hero-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.faq-modern__hero-photo-tint{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(75,26,24,.18),rgba(75,26,24,.88)),linear-gradient(135deg,rgba(126,38,36,.45),rgba(166,50,47,.18));mix-blend-mode:multiply}
.faq-modern__hero-photo::after{content:"";position:absolute;inset:1rem;z-index:2;border:1px solid rgba(255,255,255,.45);border-radius:1.1rem;box-shadow:inset 0 0 0 1rem rgba(255,255,255,.04);pointer-events:none}
.faq-modern__hero-photo:hover>img{transform:scale(1.06);filter:saturate(1.08)}
.faq-modern__hero-photo-copy{position:absolute;z-index:4;left:2rem;right:2rem;bottom:2rem;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;color:#fff;text-align:left}.faq-modern__hero-photo-copy strong{font-size:1.3rem}.faq-modern__hero-photo-copy>span:not(.faq-modern__hero-photo-kicker){color:rgba(255,255,255,.72);font-size:.78rem}.faq-modern__hero-photo-kicker{padding:.3rem .55rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#ffc1b4!important;background:rgba(75,26,24,.35);font-size:.58rem!important;font-weight:800;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(7px)}
.faq-modern__hero-frame{position:absolute;z-index:3;width:3.2rem;height:3.2rem;border-color:rgba(255,193,180,.7);border-style:solid;pointer-events:none}.faq-modern__hero-frame--one{top:2rem;left:2rem;border-width:1px 0 0 1px}.faq-modern__hero-frame--two{right:2rem;bottom:2rem;border-width:0 1px 1px 0}.faq-modern__hero-photo .faq-modern__hero-orbit{z-index:2;border-color:rgba(255,255,255,.2)}.faq-modern__hero-photo .faq-modern__drop{z-index:3}.faq-modern__hero-photo .faq-modern__hero-lines{margin-top:.7rem}
@media(max-width:575.98px){.faq-modern__hero-photo-copy{left:1.55rem;right:1.55rem;bottom:1.55rem}.faq-modern__hero-photo::after{inset:.7rem}.faq-modern__hero-frame--one{top:1.4rem;left:1.4rem}.faq-modern__hero-frame--two{right:1.4rem;bottom:1.4rem}}
@media(prefers-reduced-motion:reduce){.faq-modern__hero-photo>img{transition:none}.faq-modern__hero-photo:hover>img{transform:none}}

/* FAQ picture placeholder clarity refinement. */
.faq-modern__hero-photo>img{filter:brightness(1.08) contrast(1.02) saturate(.96)}
.faq-modern__hero-photo-tint{background:linear-gradient(180deg,rgba(75,26,24,.02) 20%,rgba(75,26,24,.36) 100%),linear-gradient(135deg,rgba(126,38,36,.08),rgba(166,50,47,.025));mix-blend-mode:normal}
.faq-modern__hero-photo:hover>img{filter:brightness(1.12) contrast(1.04) saturate(1.02)}
@media(prefers-reduced-motion:reduce){.faq-modern__hero-photo:hover>img{filter:brightness(1.08) contrast(1.02) saturate(.96)}}

/* Slightly larger FAQ picture placeholder. */
.faq-modern__hero-photo{min-height:25rem}
@media(max-width:575.98px){.faq-modern__hero-photo{min-height:22rem}}

/* Final FAQ picture balance — slightly darker and larger. */
.faq-modern__hero-photo{min-height:27rem}
.faq-modern__hero-photo-tint{background:linear-gradient(180deg,rgba(75,26,24,.05) 18%,rgba(75,26,24,.47) 100%),linear-gradient(135deg,rgba(126,38,36,.12),rgba(166,50,47,.04));mix-blend-mode:normal}
@media(max-width:575.98px){.faq-modern__hero-photo{min-height:23.5rem}}

/* FAQ hero headline — mirrors the home hero's Donate Blood / Save lives. treatment. */
.faq-modern__title--home{max-width:39rem;margin-bottom:1.35rem;font-size:clamp(3.35rem,7vw,6.2rem);font-weight:800;line-height:.95;letter-spacing:-.065em}
.faq-modern__title--home .text-brand{color:var(--brand-primary)}
@media(max-width:767.98px){.faq-modern__title--home{font-size:clamp(3rem,14vw,4.2rem)}}

/* FAQ headline sizing refinement. */
.faq-modern__title--home{font-size:clamp(2.45rem,5vw,4.35rem);line-height:1;letter-spacing:-.055em}
@media(max-width:767.98px){.faq-modern__title--home{font-size:clamp(2.25rem,10vw,3.25rem)}}

/* FAQ eyebrow positioning — intentional overline above the hero headline. */
.faq-modern__eyebrow{display:inline-block;margin:0 0 1.3rem .15rem;padding:0 0 .42rem;color:var(--brand-primary);border-bottom:2px solid rgba(166,50,47,.28);font-size:.66rem;font-weight:900;letter-spacing:.14em;line-height:1.2;text-align:left;text-transform:uppercase}
@media(max-width:575.98px){.faq-modern__eyebrow{margin-bottom:1rem}}

/* FAQ eyebrow alignment — slight right offset. */
.faq-modern__eyebrow{margin-left:.65rem}
@media(max-width:575.98px){.faq-modern__eyebrow{margin-left:.35rem}}


/* ======================================================================
   MOTION POLISH — shared by Home, About and FAQ
   Only transform/opacity are animated, so it stays smooth.
   ====================================================================== */
:root { --fd-ease: cubic-bezier(.22, 1, .36, 1); }
html { scroll-behavior: smooth; }

@keyframes fdRise   { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes fdTextIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fdGrow   { from { transform: scaleX(0); } to { transform: none; } }

/* Smoother scroll-reveal (replaces the plain fade): rise + stagger via --fd-delay */
.reveal.in-view { animation: fdRise .95s var(--fd-ease) var(--fd-delay, 0ms) backwards; }

/* Titles split into words (data-split) fade in one by one */
.fd-word { display: inline-block; }
.in-view .fd-word { animation: fdTextIn .85s var(--fd-ease) backwards; animation-delay: calc(.2s + var(--w, 0) * 65ms); }

/* Text inside cards settles in just after the card appears */
.reveal.in-view .about-original__value-card > *,
.reveal.in-view .about-original__team-card > *,
.reveal.in-view .about-v3__feature > *,
.reveal.in-view .movement-v3__card .card-copy > *,
.reveal.in-view .supply-card > *,
.donor-cta.in-view .col-lg-7 > *,
.donor-cta.in-view .donor-cta__proof > *,
.faq-modern__cta.in-view .faq-modern__cta-copy > * {
  animation: fdTextIn .8s var(--fd-ease) backwards;
  animation-delay: calc(var(--fd-delay, 0ms) + .25s + var(--k, 0) * 80ms);
}
.reveal.in-view :is(.about-original__value-card, .about-original__team-card, .about-v3__feature, .card-copy, .supply-card, .donor-cta__proof, .faq-modern__cta-copy) > :nth-child(2),
.donor-cta.in-view .col-lg-7 > :nth-child(2) { --k: 1; }
.reveal.in-view :is(.about-original__value-card, .about-original__team-card, .card-copy, .supply-card) > :nth-child(3),
.donor-cta.in-view .col-lg-7 > :nth-child(3) { --k: 2; }
.reveal.in-view :is(.about-original__value-card, .card-copy) > :nth-child(4),
.donor-cta.in-view .col-lg-7 > :nth-child(4) { --k: 3; }

/* Home: "How it works" steps arrive one after another */
.how-panel.in-view .how-step { animation: fdRise .9s var(--fd-ease) backwards; }
.how-panel.in-view .how-step:nth-child(1) { animation-delay: .15s; }
.how-panel.in-view .how-step:nth-child(2) { animation-delay: .30s; }
.how-panel.in-view .how-step:nth-child(3) { animation-delay: .45s; }

/* Home: supply bars fill up, testimonials slide in each time a slide shows */
.reveal.in-view .supply-card .progress-bar { transform-origin: left; animation: fdGrow 1.2s var(--fd-ease) .4s backwards; }
.testimonial-slide.active .testimonial-v3__card { animation: fdRise .8s var(--fd-ease) backwards; }
.testimonial-slide.active .col-lg-6:nth-child(2) .testimonial-v3__card { animation-delay: .12s; }

/* ---------- Hover effects ---------- */
/* Home */
.hero-v2__stat-icon { transition: transform .4s var(--fd-ease); }
.hero-v2__stat:hover .hero-v2__stat-icon { transform: translateY(-3px) scale(1.1) rotate(-4deg); }
.hero-v3__proof-avatars span { transition: transform .35s var(--fd-ease); }
.hero-v3__proof-avatars span:hover { transform: translateY(-4px) scale(1.08); }
.hero-v2__trust li { transition: transform .3s var(--fd-ease); }
.hero-v2__trust li:hover { transform: translateX(4px); }
.testimonial-v3__card { transition: transform .45s var(--fd-ease), box-shadow .45s var(--fd-ease); }
.testimonial-v3__card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(75,26,24,.5); }
.testimonial-v3__photo img { transition: transform .8s var(--fd-ease); }
.testimonial-v3__card:hover .testimonial-v3__photo img { transform: scale(1.06); }
.donor-cta, .donor-cta__proof { transition: transform .5s var(--fd-ease), box-shadow .5s var(--fd-ease); }
.donor-cta:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -30px rgba(75,26,24,.6); }
.donor-cta__proof:hover { transform: translateY(-3px); }

/* About */
.about-original__story-card { transition: transform .5s var(--fd-ease), box-shadow .5s var(--fd-ease); }
.about-original__story-card:hover { transform: translateY(-4px); box-shadow: 0 34px 60px -30px rgba(75,26,24,.72); }
.about-original__team-card { transition: transform .45s var(--fd-ease), box-shadow .45s var(--fd-ease); }
.about-original__team-card:hover { transform: translateY(-8px); box-shadow: 0 26px 48px -28px rgba(75,26,24,.5); }
.about-original__avatar { transition: transform .45s var(--fd-ease), background .3s ease, color .3s ease; }
.about-original__team-card:hover .about-original__avatar { transform: scale(1.08) rotate(-4deg); background: var(--brand-primary); color: #fff; }
.about-original__impact .hero-stat-number { transition: transform .4s var(--fd-ease); }
.about-original__impact .hero-stat-col:hover .hero-stat-number { transform: scale(1.08); }
.about-original__cta .content-card { transition: transform .5s var(--fd-ease), box-shadow .5s var(--fd-ease); }
.about-original__cta .content-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(75,26,24,.6); }

/* FAQ */
.faq-modern .faq-modern__search { transition: box-shadow .35s var(--fd-ease), transform .35s var(--fd-ease); }
.faq-modern .faq-modern__search:focus-within { transform: translateY(-2px); box-shadow: 0 22px 44px -26px rgba(75,26,24,.5), 0 0 0 3px rgba(166,50,47,.12); }
.faq-modern__help-card { transition: transform .4s var(--fd-ease), box-shadow .4s var(--fd-ease); }
.faq-modern__help-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(75,26,24,.55); }
.faq-modern__cta { transition: transform .5s var(--fd-ease), box-shadow .5s var(--fd-ease); }
.faq-modern__cta:hover { transform: translateY(-4px); box-shadow: 0 28px 52px -28px rgba(75,26,24,.6); }
.faq-modern__accordion .accordion-item { transition: box-shadow .3s ease, border-color .3s ease; }
.faq-modern__accordion .accordion-item:hover { box-shadow: 0 14px 26px -22px rgba(75,26,24,.5); border-color: rgba(166,50,47,.22); }
.faq-modern__item .accordion-button { transition: color .25s ease, background-color .25s ease, box-shadow .25s ease; }
.faq-modern__item .accordion-button:hover { color: var(--brand-primary-dark); }
.faq-modern__group-icon { transition: transform .4s var(--fd-ease); }
.faq-modern__group-title:hover .faq-modern__group-icon { transform: rotate(-8deg) scale(1.12); }
.faq-modern__item .accordion-collapse.show .accordion-body { animation: fdTextIn .55s var(--fd-ease) backwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal.in-view .about-original__value-card > *,
.reveal.in-view .about-original__team-card > *,
.reveal.in-view .about-v3__feature > *,
.reveal.in-view .movement-v3__card .card-copy > *,
.reveal.in-view .supply-card > *,
.donor-cta.in-view .col-lg-7 > *,
.donor-cta.in-view .donor-cta__proof > *,
.faq-modern__cta.in-view .faq-modern__cta-copy > *,
.reveal.in-view,
.in-view .fd-word,
.how-panel.in-view .how-step,
.reveal.in-view .supply-card .progress-bar,
.testimonial-slide.active .testimonial-v3__card,
.faq-modern__item .accordion-collapse.show .accordion-body { animation: none; }
}

/* ======================================================================
   SHARED PAGE MARGINS — Home, About and FAQ use the same side inset
   (same value the About page already uses for every section)
   ====================================================================== */
:root { --page-inset: clamp(2rem, 10vw, 10rem); }
.page-inset { padding-left: var(--page-inset); padding-right: var(--page-inset); }
@media (max-width: 767.98px) { :root { --page-inset: 1.2rem; } }


/* ======================================================================
   WHY DONATE + WHO YOU HELP — fills the empty space (home)
   Photos stretch to the full row height; "Who You Help" gets labeled cards.
   ====================================================================== */
.why-v3 .photo-frame { height: auto; }
.why-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.why-help__item {
  display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.05rem;
  border: 1px solid rgba(255,255,255,.95); border-radius: 1.1rem;
  background: rgba(255,255,255,.74); box-shadow: 0 14px 30px -24px rgba(75,26,24,.4);
  transition: transform .4s var(--fd-ease), box-shadow .4s var(--fd-ease);
}
.why-help__item:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(75,26,24,.5); }
.why-v3 .why-help__item .help-icon { flex: 0 0 auto; width: 2.8rem; height: 2.8rem; margin: 0; }
.why-help__title { margin: 0 0 .25rem; font-size: .95rem; font-weight: 800; letter-spacing: -.02em; }
.why-help__text { margin: 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.5; }
@media (max-width: 575.98px) { .why-help { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .why-help__item { transition: none; } }

/* How it works: a one-line summary under the heading (replaces the old pill label) */
.how-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 0; list-style: none; padding: 0; margin: .9rem 0 0; color: #5F5451; font-size: .95rem; }
.how-facts li { display: inline-flex; align-items: baseline; gap: .3rem; }
.how-facts li + li::before { content: "\00B7"; margin: 0 .75rem; color: var(--brand-primary); font-weight: 800; }
.how-facts strong { color: var(--brand-primary-dark); font-weight: 800; font-size: 1.05rem; }

/* No pulsing circles anywhere: the dots stay, nothing grows, fades or throbs around them. */
.hero-v2__pulse::after,
.user-dot::after { display: none; }
.auth-brand__live-dot,
.auth-brand--register .wz-side-item.is-active .wz-side-num,
.about-original__story-content .faq-category-label::before { animation: none !important; }

/* ======================================================================
   SIGN-UP PAGES (auth/register and auth/register-organization, .signup-page): scrolls normally and
   shares the login fields (.auth-login). The organization sign-up keeps
   its own one-screen layout until its turn.
   ====================================================================== */
html:has(.signup-page),
html:has(.signup-page) body { height: auto !important; overflow: visible !important; }
.auth-shell.signup-page { height: auto !important; min-height: 100dvh; overflow: visible !important; }
@media (min-width: 992px) {
  .signup-page > .auth-brand { position: sticky; top: 0; align-self: flex-start; height: 100dvh !important; }
  .signup-page > .auth-form-panel { height: auto !important; min-height: 100dvh; overflow: visible !important; align-items: flex-start !important; padding-block: 3rem !important; }
  .signup-page .auth-register-card { margin-block: 0 auto; }
}

/* Stepper: readable, still; no hover nudges */
.signup-page .wz-side-item:hover { transform: none; }
.signup-page .wz-side-title { font-size: .95rem; }
.signup-page .wz-side-sub { font-size: .8125rem; color: rgba(255, 255, 255, .72); }
.signup-page .wz-side-item.is-active .wz-side-num { box-shadow: none; }

.signup-page .reg-step-count { margin: 0 0 .35rem; font-size: .875rem; font-weight: 700; color: var(--brand-primary-dark); }
.signup-page #wzStepTitle:focus { outline: none; }
.signup-page .wz-progress { height: 6px; margin-bottom: 1.5rem; background: #f1e6e2; box-shadow: none; }
.signup-page .wz-progress > div { background: var(--brand-primary); box-shadow: none; transition: width 320ms var(--auth-ease-out); }
.signup-page .wz-step { animation: regStepIn 220ms var(--auth-ease-out) both; }
@keyframes regStepIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.signup-page .wz-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.75rem; }
.signup-page .wz-nav .auth-submit { width: auto; padding-inline: 1.4rem; }

.auth-login .auth-back {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 3rem; padding-inline: 1.1rem;
  font-weight: 700; color: var(--auth-ink-2); background: #fff; border: 1px solid var(--auth-line); border-radius: 10px;
  transition: transform 120ms var(--auth-ease-out), border-color 150ms ease, color 150ms ease;
}
.auth-login .auth-back:hover { border-color: var(--auth-line-strong); color: var(--auth-ink); }
.auth-login .auth-back:active { transform: scale(.97); }
.auth-login .auth-back:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.signup-page .reg-req { color: var(--auth-danger); }
.signup-page .reg-optional { font-weight: 500; color: var(--auth-ink-2); }
.signup-page .reg-hint { margin-top: .4rem; font-size: .875rem; color: var(--auth-ink-2); }
.signup-page .text-danger { font-size: .875rem; }
.signup-page .reg-alert { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: 1.25rem; padding: .75rem .9rem; font-size: .9rem; font-weight: 600; color: var(--auth-danger); background: #fdecea; border-radius: 10px; }
.signup-page .reg-alert .ph-fill, .signup-page .reg-alert .ph { font-size: 1.15rem; flex-shrink: 0; margin-top: .05rem; }
.signup-page .reg-alert--soft { color: #7a4a00; background: #fff4de; font-weight: 500; }
.signup-page .auth-note .ph { color: var(--brand-primary); font-size: 1.1rem; flex-shrink: 0; }

/* Document drop area */
.signup-page .reg-file { padding: 1.25rem 1rem; border-radius: 12px; transition: border-color 150ms ease, background-color 150ms ease; }
.signup-page .reg-file-icon { display: block; margin-bottom: .35rem; font-size: 1.6rem; color: var(--brand-primary); }
.signup-page .reg-file .rf-file-name { font-size: .95rem; }
.signup-page .reg-file .rf-file-hint { font-size: .8125rem; color: var(--auth-ink-2); }
.signup-page .reg-file.has-file { border-style: solid; border-color: #9ccaa8; background: #f2faf4; }
.signup-page .reg-file.has-file .reg-file-icon { color: #2f7a42; }
.signup-page .reg-file.has-file .reg-file-icon::before { content: "\e184"; }
.signup-page .reg-file.is-invalid { border-color: var(--auth-danger); background: #fff5f4; }
.signup-page .reg-remove { margin-top: .5rem; font-size: .875rem; }

/* Blood type: nine buttons instead of a dropdown */
.signup-page fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.signup-page legend.form-label { float: none; width: auto; margin-bottom: .5rem; font-size: .9375rem; }
.reg-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.reg-type { position: relative; margin: 0; }
.reg-type input { position: absolute; opacity: 0; pointer-events: none; }
.reg-type span {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  font-size: 1rem; font-weight: 700; color: var(--auth-ink); cursor: pointer;
  background: #fff; border: 1px solid var(--auth-line); border-radius: 10px;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms var(--auth-ease-out);
}
.reg-type--wide { grid-column: 1 / -1; }
.reg-type--wide span { font-weight: 600; font-size: .95rem; }
.reg-type input:checked + span { color: #fff; background: var(--brand-primary); border-color: var(--brand-primary); }
.reg-type input:focus-visible + span { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.reg-type span:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .reg-type input:not(:checked) + span:hover { border-color: var(--auth-line-strong); background: #fdf8f6; }
}
.reg-types.is-invalid .reg-type input:not(:checked) + span { border-color: var(--auth-danger); }

/* Password: three rules, one bar that fills as they are met */
.reg-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: .65rem; }
.reg-meter span { height: 6px; border-radius: 3px; background: #efe5e1; transition: background-color 200ms ease; }
.reg-meter[data-score="1"] span:nth-child(-n+1),
.reg-meter[data-score="2"] span:nth-child(-n+2) { background: #c98a2e; }
.reg-meter[data-score="3"] span { background: #2f7a42; }
.reg-rules { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .9rem; color: var(--auth-ink-2); }
.reg-rules li { display: flex; align-items: center; gap: .45rem; padding: .12rem 0; transition: color 150ms ease; }
.reg-rules i { font-size: 1.05rem; color: #a8998f; }
.reg-rules li.is-met { color: #1f6b35; }
.reg-rules li.is-met i { color: #2f7a42; animation: regTick 260ms var(--auth-ease-out); }
@keyframes regTick { from { opacity: .4; transform: scale(.6); } to { opacity: 1; transform: none; } }
.reg-match { min-height: 1.3em; margin: .45rem 0 0; font-size: .875rem; font-weight: 600; }
.reg-match.is-ok { color: #1f6b35; }
.reg-match.is-ok::before { content: "\e184"; margin-right: .3rem; font-family: "Phosphor-Fill"; vertical-align: -.125em; }
.reg-match.is-bad { color: #8a4b00; }

/* Review */
.signup-page .reg-review-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--auth-ink); }
.signup-page .wz-review-card:hover { transform: none; box-shadow: none; border-color: #eee0de; }
.signup-page .wz-review-row { font-size: .9375rem; }
.signup-page .wz-review-row .k { color: var(--auth-ink-2); }
.signup-page .wz-edit { font-size: .875rem; }
.signup-page .reg-skip { font-size: .9rem; }

@media (max-width: 575.98px) {
  .signup-page .wz-nav .auth-submit { flex: 1 1 100%; order: -1; }
  .signup-page .reg-skip { order: 1; width: 100%; text-align: center; margin-left: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .signup-page .wz-step, .reg-rules li.is-met i { animation: none; }
  .signup-page .wz-progress > div { transition: none; }
}

/* ---------- Organization sign-up (.org-signup), on top of .signup-page ---------- */
.signup-page .input-icon-group > .input-ph { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); font-size: 18px; color: #8f7d76; pointer-events: none; }
.signup-page .input-icon-group:focus-within > .input-ph { color: var(--brand-primary); }

/* Choice cards: organization type (icons) and "do you store blood" (text) */
.org-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.org-choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 575.98px) { .org-choices--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.org-choice { position: relative; margin: 0; }
.org-choice input { position: absolute; opacity: 0; pointer-events: none; }
.org-choice > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  height: 100%; min-height: 76px; padding: .7rem .6rem; text-align: center; cursor: pointer;
  background: #fff; border: 1px solid var(--auth-line); border-radius: 12px;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms var(--auth-ease-out);
}
.org-choice > span i { font-size: 1.5rem; color: var(--brand-primary); transition: color 150ms ease; }
.org-choice > span strong { font-size: .9375rem; font-weight: 700; color: var(--auth-ink); }
.org-choice--text > span { align-items: flex-start; justify-content: flex-start; text-align: left; min-height: 0; padding: .8rem .9rem; }
.org-choice--text > span small { font-size: .85rem; color: var(--auth-ink-2); line-height: 1.35; }
.org-choice input:checked + span { background: #fbeeec; border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.org-choice input:focus-visible + span { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.org-choice > span:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .org-choice input:not(:checked) + span:hover { border-color: var(--auth-line-strong); background: #fdf8f6; }
}
.org-choices.is-invalid .org-choice input:not(:checked) + span { border-color: var(--auth-danger); }

/* Step 2 sections: separated by a hairline, not boxed (no cards inside the card) */
.org-section { margin-bottom: 1.25rem; }
.org-section + .org-section,
.auth-field + .org-section { padding-top: 1.25rem; border-top: 1px solid #efe5e1; }
.org-section-title { margin: 0 0 .15rem; font-size: 1rem; font-weight: 700; color: var(--auth-ink); }

.org-pin { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem .85rem; padding: .75rem .85rem; background: #fff; border: 1px solid var(--auth-line); border-radius: 12px; transition: border-color 150ms ease, background-color 150ms ease; }
.org-pin-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; font-size: 1.3rem; color: var(--brand-primary); background: #fbeeec; }
.org-pin-copy { display: flex; flex-direction: column; flex: 1 1 12rem; min-width: 0; }
.org-pin-copy strong { font-size: .95rem; color: var(--auth-ink); }
.org-pin-copy span { font-size: .85rem; color: var(--auth-ink-2); overflow-wrap: anywhere; }
.org-pin.has-pin { border-color: #9ccaa8; background: #f2faf4; }
.org-pin.has-pin .org-pin-icon { color: #2f7a42; background: #dcefe1; }
.org-pin.is-invalid { border-color: var(--auth-danger); background: #fff5f4; }
.org-signup .wz-coordinate-fallback { margin-top: .6rem; }
.org-signup .wz-coordinate-fallback.d-none { display: none !important; }

/* Review */
.org-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.org-review > .wz-review-card { margin-bottom: 0; min-width: 0; }
.org-review-wide { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .org-review { grid-template-columns: minmax(0, 1fr); } }
.org-next { margin: 1.1rem 0 1rem; padding: .9rem 1rem; background: #f7f3f1; border-radius: 12px; }
.org-next .reg-review-title { display: flex; align-items: center; gap: .4rem; }
.org-next .reg-review-title i { color: var(--brand-primary); }
.org-next ol { margin: .45rem 0 0; padding-left: 1.2rem; font-size: .9rem; color: var(--auth-ink-2); }
.org-next li + li { margin-top: .2rem; }

/* Map pop-up: plain heading, readable sizes */
.wz-location-modal__header h2 { font-size: 1.25rem; }
.wz-location-modal__header p { font-size: .9rem; }
.wz-location-modal__close .ph { font-size: 1.2rem; }