/* Amber's Love - mockup-fidelity refinement
   Live content is intentionally preserved. This layer overrides the initial CSS. */

:root {
  --al-green: #3f730a;
  --al-green-dark: #2f5f08;
  --al-lime: #bad94b;
  --al-lime-soft: #e9f3b9;
  --al-red: #f44a3e;
  --al-red-dark: #d9362c;
  --al-gold: #f6d83c;
  --al-ink: #292719;
  --al-muted: #5a584d;
  --al-paper: #fffdf7;
  --al-cream: #fff8e8;
  --al-line: #eee6d0;
  --al-radius: 24px;
  --al-shadow: 0 18px 42px rgba(82, 74, 35, .10);
  --font-display: 'Lora', Georgia, serif;
  --font-body: 'Nunito Sans', Arial, sans-serif;
  --max-width: 1420px;
  --nav-height: 92px;
}

html { background: var(--al-paper); }
body { background: var(--al-paper); color: var(--al-ink); font-size: 16px; }
h1, h2, h3, h4 { color: var(--al-green-dark); }
h2 { letter-spacing: -.04em; }
.container { max-width: var(--max-width); padding-inline: clamp(1.1rem, 4vw, 3.4rem); }
.section-padding { padding-block: clamp(4.25rem, 7vw, 7.5rem); }

.btn {
  min-height: 48px;
  padding: .85rem 1.55rem;
  border-width: 1.5px;
  box-shadow: none;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(55, 91, 13, .18); }
.btn-primary { background: linear-gradient(135deg, #4d860d, var(--al-green-dark)); border-color: var(--al-green-dark); }
.btn-secondary { background: linear-gradient(135deg, #fa594c, var(--al-red)); border-color: var(--al-red); }
.btn-ghost { background: #fffefa; color: var(--al-green-dark); border-color: var(--al-green); }
.btn-lg { min-height: 60px; min-width: 178px; font-size: 1.05rem; padding-inline: 2rem; }

/* Shared chrome */
.top-banner { padding: .46rem 0; background: linear-gradient(90deg, #417809, #2f5e08 55%, #3f730a); font-size: .78rem; }
.top-banner .container { max-width: 980px; }
.top-banner-btn { background: #fffef9; color: var(--al-green-dark); padding: .36rem .85rem; border: 0; font-size: .76rem; }
.site-header { position: relative; background: rgba(255, 254, 249, .97); border-bottom: 0; }
.site-header .container { height: var(--nav-height); gap: clamp(.7rem, 2vw, 2rem); }
.logo img { width: clamp(145px, 16vw, 235px); height: auto; max-height: 78px; object-fit: contain; }
.main-nav ul { gap: clamp(.85rem, 1.65vw, 1.75rem); }
.main-nav a { position: relative; color: var(--al-ink); font-size: .88rem; font-weight: 600; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { color: var(--al-green-dark); }
.main-nav a.active::after { content: ''; position: absolute; width: 26px; height: 2px; border-radius: 99px; left: 50%; bottom: -13px; transform: translateX(-50%); background: var(--al-green); }
.nav-actions { gap: .75rem; }
.nav-actions .btn { min-height: 44px; padding: .7rem 1.15rem; font-size: .88rem; }

/* Homepage hero, with organic photo framing and hand-drawn color language */
.hero { isolation: isolate; overflow: hidden; position: relative; min-height: 660px; padding: clamp(2rem, 4vw, 4.8rem) 0 clamp(3rem, 5vw, 5.5rem); background: radial-gradient(circle at 17% 70%, rgba(252, 232, 147, .24), transparent 20%), linear-gradient(116deg, #fffefa 0%, #fffdf7 61%, #f9f7ea 100%); }
.hero::before { content: ''; position: absolute; z-index: -2; width: 55vw; height: 55vw; border: 1px solid rgba(186, 217, 75, .23); border-radius: 50%; right: -23vw; top: 3rem; }
.hero::after { content: ''; position: absolute; z-index: -2; width: 42vw; height: 23vw; border-radius: 50%; background: radial-gradient(ellipse, rgba(246, 216, 60, .17), transparent 68%); left: -18vw; bottom: 0; }
.hero .container { position: relative; display: grid; align-items: center; grid-template-columns: minmax(340px, .88fr) minmax(520px, 1.12fr); gap: clamp(1rem, 4vw, 4.5rem); }
.hero-content { max-width: 575px; padding-block: 1.25rem; z-index: 3; }
.hero-ornament { color: #86a62b; margin-bottom: .9rem; transform: scale(1.05); transform-origin: left center; }
.hero h1 { max-width: 570px; font-size: clamp(3.15rem, 5.25vw, 5.65rem); line-height: .99; letter-spacing: -.055em; font-weight: 500; }
.hero h1 .line { display: block; color: var(--al-green-dark); }
.hero h1 .accent { color: var(--al-red); }
.hero .yellow-heart { color: var(--al-gold); width: .42em; vertical-align: .18em; }
.hero-subcopy { max-width: 520px; margin: 1.75rem 0 1.8rem; color: #323123; font-size: clamp(1rem, 1.3vw, 1.16rem); line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-trust { margin-top: 2rem; color: var(--al-ink); font-size: .96rem; font-weight: 500; }
.hero-trust svg { color: var(--al-green); }
.hero-visual { min-height: 520px; align-self: stretch; position: relative; z-index: 2; }
.hero-image-wrapper { position: absolute; inset: 1.1rem -7vw 0 -1.5rem; overflow: hidden; border-radius: 47% 0 0 43% / 30% 0 0 40%; border: 11px solid rgba(255, 253, 247, .98); box-shadow: inset 0 0 0 3px rgba(186, 217, 75, .46), var(--al-shadow); background: #e8e4d5; }
.hero-image-wrapper::before { content: ''; z-index: 1; pointer-events: none; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(49, 91, 9, .13), transparent 38%), linear-gradient(0deg, rgba(29, 57, 9, .12), transparent 30%); }
.hero-image-wrapper img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
.hero-logo-badge { position: absolute; z-index: 7; width: clamp(125px, 14vw, 205px); left: 20%; bottom: 1rem; padding: .2rem; filter: drop-shadow(0 12px 12px rgba(67, 85, 12, .15)); }
.hero-logo-badge img { width: 100%; }
/* The hearts deliberately live beside the organic photo frame, not inside it. */
.hero-floating-heart { z-index: 6; opacity: 1; filter: drop-shadow(0 4px 7px rgba(120, 94, 10, .22)); will-change: transform; }
.heart-1 { width: 31px; color: var(--al-gold); left: -2.5%; top: 16%; }
.heart-2 { width: 23px; color: var(--al-red); left: -4%; top: 48%; }
.heart-3 { width: 29px; color: var(--al-gold); right: 1%; top: 8%; }
.heart-4 { width: 21px; color: var(--al-red); right: -3%; top: 48%; }
.heart-5 { width: 26px; color: var(--al-gold); right: 5%; bottom: 8%; }
.hero-ambient { color: var(--al-lime); opacity: .9; }
.hero-ribbon.ribbon-1 { left: 43%; bottom: 10%; transform: rotate(-25deg); }
.hero-ribbon.ribbon-2 { left: 48%; bottom: 3%; transform: rotate(12deg); }
.hero-wave { height: 75px; bottom: -1px; }

/* Refined home sequence */
.welcome { position: relative; background: #fff; overflow: hidden; }
.welcome::before { content: ''; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(246, 216, 60, .28), rgba(246, 216, 60, 0) 70%); left: 7%; top: 16%; }
.welcome .container { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(2rem, 7vw, 8rem); }
.welcome-text { max-width: 490px; }
.welcome h2 { font-size: clamp(2.35rem, 3.3vw, 3.5rem); }
.welcome h2::after { content: '♡'; display: block; color: var(--al-gold); font-family: var(--font-body); font-size: 1.65rem; font-weight: 400; line-height: 1; margin: 1rem 0; }
.welcome p { font-size: .98rem; line-height: 1.75; }
.welcome .btn { margin-top: .75rem; }
.welcome-image { position: relative; min-height: 350px; overflow: hidden; border-radius: 31% 22% 24% 19% / 24% 22% 29% 24%; box-shadow: var(--al-shadow); }
.welcome-image::after { content: ''; position: absolute; inset: 0; border: 5px solid rgba(255, 253, 247, .85); border-radius: inherit; pointer-events: none; }
.welcome-image img { width: 100%; height: 100%; min-height: 350px; object-fit: cover; }

.how-we-help { background: linear-gradient(180deg, #fffdf8 0%, #fff9e8 100%); position: relative; text-align: center; }
.how-we-help h2 { display: inline-flex; align-items: center; gap: .5rem; font-size: clamp(2.3rem, 3.6vw, 3.6rem); }
.how-we-help h2::after { content: '♥'; font-family: var(--font-body); color: var(--al-gold); font-size: .42em; }
.section-intro { color: var(--al-muted); margin: .5rem auto 2.5rem; max-width: 580px; }
.help-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.help-card { min-height: 290px; display: flex; flex-direction: column; align-items: center; padding: 1.6rem 1.25rem 1.35rem; border-radius: 22px; border: 1px solid #efe4ca; background: rgba(255, 255, 255, .8); box-shadow: 0 10px 26px rgba(109, 88, 30, .05); }
.help-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(80, 76, 28, .11); }
.help-icon { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; color: var(--al-green); background: radial-gradient(circle at 40% 32%, #fffcec, #edf4c4); border: 1px solid #e3eac0; }
.help-icon svg { width: 34px; height: 34px; }
.help-card h3 { font-size: 1.22rem; margin: 1rem 0 .55rem; }
.help-card p { font-size: .88rem; line-height: 1.62; margin-bottom: .9rem; }
.help-card a { margin-top: auto; color: var(--al-green-dark); font-weight: 700; font-size: .86rem; }

.understanding-cp { padding-block: clamp(3rem, 5vw, 5.25rem); background: linear-gradient(102deg, #527b15 0%, #edf1ca 44%, #fff7dd 100%); }
.understanding-cp .container { display: grid; grid-template-columns: .88fr 1.4fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.cp-image { overflow: hidden; min-height: 370px; border-radius: 42% 20% 26% 22% / 31% 24% 28% 25%; border: 7px solid rgba(251, 252, 222, .75); }
.cp-image img { width: 100%; height: 100%; min-height: 370px; object-fit: cover; }
.cp-content { padding: .25rem 0; }
.cp-content h2 { color: var(--al-green-dark); font-size: clamp(2rem, 3vw, 3.2rem); }
.cp-content .lead { color: #353a22; font-size: 1rem; }
.cp-content > p:not(.lead) { max-width: 680px; font-size: .92rem; }
.cp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1.5rem 0; }
.cp-pillar { padding: .3rem 1rem .3rem 0; border-right: 1px solid rgba(74, 103, 26, .22); }
.cp-pillar + .cp-pillar { padding-left: 1rem; }
.cp-pillar:last-child { border-right: 0; }
.cp-pillar-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; color: var(--al-green); background: #f9f9de; }
.cp-pillar h4 { margin: .5rem 0 .18rem; color: #354b14; font-family: var(--font-display); }
.cp-pillar p { margin: 0; font-size: .78rem; line-height: 1.48; }

.resources-strip { position: relative; z-index: 1; margin: -1.6rem clamp(.5rem, 3vw, 2.5rem) 0; padding: 1.5rem 0; border: 1px solid #efe4c5; border-radius: 22px; background: #fffefa; box-shadow: 0 8px 24px rgba(88, 73, 23, .08); }
.resources-strip .section-header { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1.15rem; }
.resources-strip h2 { font-size: clamp(1.7rem, 2.3vw, 2.25rem); }
.section-subtitle { margin: 0; font-size: .87rem; color: var(--al-muted); }
.resource-items { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--al-line); padding-top: 1rem; }
.resource-item { display: grid; grid-template-columns: 34px 1fr; gap: .3rem .7rem; padding: .15rem 1rem; border-right: 1px solid var(--al-line); text-align: left; }
.resource-item:last-child { border-right: 0; }
.resource-icon { grid-row: span 2; width: 33px; height: 33px; display: grid; place-items: center; color: var(--al-green); }
.resource-icon svg { width: 29px; height: 29px; }
.resource-item h4 { color: var(--al-ink); font-size: .75rem; line-height: 1.25; }
.resource-item p { margin: 0; color: var(--al-muted); font-size: .7rem; line-height: 1.3; }
.resources-cta { margin-top: 1rem; text-align: right; }
.focus-summary-strip {
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(circle at 51% 46%, rgba(244, 219, 102, .22), transparent 25%),
    linear-gradient(105deg, #fffef8 0%, #f8f7e9 54%, #eef5d4 100%);
}

.focus-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(10rem, .72fr) minmax(13rem, .78fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  min-height: 208px;
  padding: clamp(1.5rem, 3vw, 2.35rem) clamp(1.1rem, 3vw, 2.8rem);
}

.focus-summary-copy { max-width: 39rem; }
.focus-summary-kicker {
  margin: 0 0 .55rem;
  color: var(--al-green);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.focus-summary h2 {
  margin: 0;
  color: var(--al-green-dark);
  font-size: clamp(1.55rem, 2.2vw, 2.25rem);
  line-height: 1.06;
}
.focus-summary-copy > p:last-child {
  margin: .85rem 0 0;
  color: var(--al-muted);
  font-size: .93rem;
  line-height: 1.63;
}

.focus-summary-orbit {
  position: relative;
  width: clamp(8.5rem, 12vw, 10.25rem);
  aspect-ratio: 1;
  justify-self: center;
  border: 1px dashed rgba(112, 143, 42, .48);
  border-radius: 50%;
  background: radial-gradient(circle, #fffef8 0 30%, #eff6d5 31% 53%, rgba(226, 239, 180, .34) 54% 100%);
  box-shadow: inset 0 0 0 7px rgba(255, 255, 255, .44), 0 10px 22px rgba(71, 93, 23, .09);
}
.orbit-icon {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3.45rem;
  height: 3.45rem;
  padding: .27rem;
  border: 1px solid rgba(110, 141, 39, .2);
  border-radius: 50%;
  background: #fffef8;
  box-shadow: 0 6px 13px rgba(73, 91, 25, .12);
}
.orbit-icon img { width: 100%; height: 100%; object-fit: contain; }
.orbit-icon-resources { top: -.7rem; left: 50%; transform: translateX(-50%); }
.orbit-icon-learning { right: -.7rem; top: 50%; transform: translateY(-50%); }
.orbit-icon-giving { bottom: -.7rem; left: 50%; transform: translateX(-50%); }
.orbit-icon-community { left: -.7rem; top: 50%; transform: translateY(-50%); }
.orbit-heart {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: #fff;
  background: var(--al-coral);
  box-shadow: 0 7px 15px rgba(223, 85, 72, .27);
  font-size: 1.25rem;
}

.focus-summary-cta {
  padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
  border-left: 1px solid rgba(183, 178, 124, .45);
}
.focus-summary-cta p {
  margin: 0 0 .9rem;
  color: var(--al-muted);
  font-size: .83rem;
  line-height: 1.5;
}
.focus-summary-cta .btn { min-height: 44px; font-size: .82rem; white-space: nowrap; }

@media (max-width: 900px) {
  .focus-summary { grid-template-columns: 1.35fr .72fr; }
  .focus-summary-cta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0 0; border-top: 1px solid rgba(183, 178, 124, .45); border-left: 0; }
  .focus-summary-cta p { margin: 0; max-width: 28rem; }
}

@media (max-width: 640px) {
  .focus-summary { grid-template-columns: 1fr; padding: 1.6rem 1.2rem; text-align: center; }
  .focus-summary-orbit { order: 2; }
  .focus-summary-cta { order: 3; display: grid; justify-items: center; }
  .focus-summary-cta .btn { width: 100%; max-width: 19rem; }
}

.stories { background: #fffdf7; }
.stories .container { display: grid; grid-template-columns: .76fr 2.24fr; align-items: start; gap: 2rem; }
.stories h2 { font-size: clamp(2rem, 3vw, 2.9rem); }
.stories .section-intro { margin: .6rem 0; }
.stories-grid { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.story-card { position: relative; min-height: 195px; padding: 1.55rem 1.25rem; border: 1px solid #f0e5c9; border-radius: 19px; background: #fffefa; box-shadow: 0 8px 22px rgba(83, 74, 35, .045); }
.story-card::before { content: '“'; position: absolute; top: .55rem; right: 1rem; color: #f1e7ba; font-family: Georgia, serif; font-size: 4.8rem; line-height: 1; }
.stars { position: relative; z-index: 1; color: var(--al-gold); font-size: .76rem; letter-spacing: 1px; }
.story-card blockquote { position: relative; z-index: 1; margin: .7rem 0; font-size: .83rem; line-height: 1.55; }
.story-card cite { color: var(--al-ink); font-size: .78rem; font-style: normal; font-weight: 700; }

/* Closing invitation: a compact, high-contrast band rather than an oversized empty panel. */
.final-cta {
  overflow: hidden;
  position: relative;
  padding-block: clamp(3.25rem, 5vw, 5.25rem);
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 255, 255, .76), transparent 19%),
    radial-gradient(circle at 67% 48%, rgba(246, 216, 60, .24), transparent 24%),
    linear-gradient(103deg, #f5d75e 0%, #fff1b8 40%, #fffdf6 77%);
}
.final-cta::before { content: ''; position: absolute; width: 44%; height: 135%; top: -18%; left: -8%; border: 2px solid rgba(255, 255, 255, .52); border-radius: 48% 60% 42% 50%; transform: rotate(-12deg); }
.final-cta::after { content: '♥  ♥'; position: absolute; color: rgba(246, 216, 60, .64); letter-spacing: 1.5rem; font-size: clamp(3rem, 7vw, 7rem); right: 5%; bottom: -1.5rem; transform: rotate(-12deg); }
.final-cta .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, .84fr) minmax(380px, 1.05fr) minmax(185px, .48fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4.5rem);
}
.final-cta-image { grid-column: 1; grid-row: 1; height: clamp(245px, 23vw, 330px); min-height: 0; overflow: hidden; border-radius: 44% 24% 35% 21% / 40% 24% 38% 25%; border: 7px solid rgba(255, 254, 246, .94); box-shadow: 0 22px 42px rgba(89, 65, 9, .18); }
.final-cta-image img { height: 100%; width: 100%; object-fit: cover; }
.final-cta-content { grid-column: 2 / 4; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(180px, 220px); align-items: center; column-gap: clamp(1.4rem, 3vw, 3rem); max-width: none; }
.final-cta h2 { grid-column: 1; margin: 0; color: #304813; font-size: clamp(2.25rem, 3.5vw, 4.05rem); line-height: 1.02; }
.final-cta p { grid-column: 1; margin: 1rem 0 0; max-width: 460px; color: #3f421e; font-size: 1rem; line-height: 1.6; }
.final-cta-actions { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: .8rem; align-self: center; max-width: none; }
.final-cta-actions .btn { min-width: 0; min-height: 56px; width: 100%; font-size: 1rem; }
.final-cta-actions .btn-primary { background: linear-gradient(135deg, #4b850c, #2f6208); border-color: #2f6208; color: #fff; }
.final-cta-actions .btn-secondary { background: linear-gradient(135deg, #fa5c4e, #e64034); border-color: #e64034; color: #fff; }
.final-cta-actions a.btn:hover,
.final-cta-actions a.btn:focus-visible { color: #fff; }


/* Interior pages inherit the same warm illustrated system */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(4.5rem, 8vw, 7.5rem); background: radial-gradient(circle at 82% 30%, rgba(186, 217, 75, .27), transparent 18%), radial-gradient(circle at 74% 70%, rgba(246, 216, 60, .22), transparent 28%), #fffaf0; }
.page-hero::before, .page-hero::after { content: '♥'; position: absolute; color: rgba(246, 216, 60, .58); font-size: clamp(3rem, 7vw, 7rem); }
.page-hero::before { right: 15%; top: 9%; transform: rotate(-19deg); }
.page-hero::after { right: 6%; bottom: 3%; color: rgba(186, 217, 75, .38); font-size: clamp(5rem, 11vw, 10rem); }
.page-hero-content { max-width: 760px; position: relative; z-index: 1; }
.eyebrow { color: var(--al-green); font-size: .74rem; letter-spacing: .12em; font-weight: 800; }
.page-hero h1 { font-size: clamp(3rem, 5vw, 5.25rem); color: var(--al-green-dark); }
.page-hero p:last-child { max-width: 670px; color: var(--al-muted); font-size: 1.08rem; }
.two-column { gap: clamp(2rem, 6vw, 6.5rem); }
.two-column img, .help-image img, .story-image img { border-radius: 31% 18% 27% 19% / 28% 21% 29% 22%; box-shadow: var(--al-shadow); }
.values-section, .resources-workshops, .help-detail.alt { background: #fff9e9; }
.value-card, .resource-card, .workshop-card, .info-card, .donate-impact, .support-form-wrapper, .donate-form-wrapper { border-color: #eee2c5; border-radius: 20px; box-shadow: 0 10px 26px rgba(81, 72, 32, .07); }
.resources-grid { grid-template-columns: repeat(3, 1fr); }
.resource-card { background: #fffefa; }
.resource-card .resource-icon { background: #eff5cb; border-radius: 50%; font-size: 1.6rem; }
.support-form, .donate-form { background: #fffefa; border: 1px solid #eee2c5; border-radius: 20px; padding: clamp(1.25rem, 3vw, 2rem); }
.support-form input, .support-form select, .support-form textarea, .donate-form input[type='text'], .donate-form input[type='email'], .donate-form input[type='number'] { border-color: #d8d6b8; background: #fff; }
.support-form input:focus, .support-form select:focus, .support-form textarea:focus, .donate-form input:focus { outline-color: var(--al-green); border-color: var(--al-green); }

/* Get Support: a composed contact panel that keeps each route clear and reassuring. */
.support-info { gap: 1rem; }
.support-info-heading { padding: .35rem .2rem .55rem; }
.support-info-kicker,
.contact-channel-label {
  margin: 0;
  color: var(--al-green);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.support-info-heading h2 {
  margin: .42rem 0 .48rem;
  color: var(--al-green-dark);
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 1.04;
}
.support-info-heading > p:last-child { margin: 0; color: var(--al-muted); font-size: .94rem; }

.contact-direct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.contact-channel {
  position: relative;
  min-height: 184px;
  padding: 1.25rem;
  overflow: hidden;
  border: 1px solid #e7e3cb;
  border-radius: 20px;
  background: linear-gradient(145deg, #fffefa 0%, #f6f8e7 100%);
  box-shadow: 0 10px 25px rgba(78, 89, 30, .07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.contact-channel::after {
  content: '';
  position: absolute;
  width: 6.5rem;
  height: 6.5rem;
  right: -3.2rem;
  bottom: -3.4rem;
  border: 1px solid rgba(124, 154, 39, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 13px rgba(235, 243, 195, .45), 0 0 0 26px rgba(235, 243, 195, .2);
}
.contact-channel:hover { transform: translateY(-4px); border-color: #cbd69c; box-shadow: 0 16px 30px rgba(78, 89, 30, .13); }
.contact-channel-icon,
.contact-hours-icon,
.crisis-support-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  margin-bottom: 1rem;
  border-radius: 50%;
}
.contact-channel-icon { color: var(--al-green); background: #ebf3c7; box-shadow: inset 0 0 0 1px rgba(110, 141, 39, .14); }
.contact-channel-icon svg { width: 1.25rem; height: 1.25rem; }
.contact-channel h3,
.contact-hours h3,
.crisis-support-card h3 { margin: .25rem 0 .4rem; color: var(--al-green-dark); font-size: 1.38rem; }
.contact-channel a { position: relative; z-index: 1; display: inline-block; color: #456517; font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
.contact-channel a:hover { color: var(--al-coral); }

.contact-hours {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid #e7e3cb;
  border-radius: 18px;
  background: #fffefa;
  box-shadow: 0 8px 20px rgba(78, 89, 30, .05);
}
.contact-hours-icon { width: 3.1rem; height: 3.1rem; margin: 0; color: #a56e15; background: #fff3bd; }
.contact-hours-icon svg { width: 1.45rem; height: 1.45rem; }
.contact-hours h3 { font-size: 1.18rem; }
.contact-hours > div:last-child > p:last-child { margin: 0; color: var(--al-muted); font-size: .88rem; }

.crisis-support-card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(239, 135, 120, .34);
  border-radius: 20px;
  background: linear-gradient(135deg, #fff9f4 0%, #fff0e8 100%);
}
.crisis-support-icon { width: 2.85rem; height: 2.85rem; margin: .1rem 0 0; color: #b94a3e; background: #ffe0d5; }
.crisis-support-icon svg { width: 1.38rem; height: 1.38rem; }
.crisis-support-card .contact-channel-label { color: #a94b3b; }
.crisis-support-card h3 { color: #8e3c32; }
.crisis-support-card p:last-child { margin: 0; color: #6b514a; font-size: .88rem; line-height: 1.58; }

@media (max-width: 640px) {
  .support-info-heading { padding-inline: 0; text-align: center; }
  .contact-direct-grid { grid-template-columns: 1fr; }
  .contact-channel { min-height: 150px; }
  .contact-channel-icon { margin-bottom: .7rem; }
}

.site-footer { padding-top: clamp(3rem, 5vw, 5rem); background: linear-gradient(105deg, #fffdf7 0%, #f7f4df 100%); color: var(--al-ink); border-top: 1px solid #ece3bf; }
.footer-brand img { width: 185px; height: auto; filter: none; }
.site-footer h4 { color: var(--al-green-dark); }
.site-footer a, .footer-bottom a { color: #4b5f1d; }
.footer-brand p, .footer-col li, .footer-contact, .footer-bottom { color: #5c5d4a; }
.footer-social { display: flex; align-items: center; gap: .6rem; margin-top: 1.4rem; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; color: #fff; background: var(--al-green); border-radius: 50%; transition: transform .2s ease, background .2s ease; }
.footer-social a:hover { color: #fff; background: var(--al-coral); transform: translateY(-2px); }
.newsletter-form input { color: var(--al-ink); border-color: #cbd1a3; background: #fffefa; }
.newsletter-form input::placeholder { color: #6c6b5e; }
.newsletter-form button { background: var(--al-green); color: #fff; }
.footer-bottom { border-top-color: #dfdabd; }

@media (max-width: 1100px) {
  :root { --nav-height: 82px; }
  .main-nav ul { gap: .72rem; }
  .main-nav a { font-size: .8rem; }
  .nav-actions .btn-ghost { display: none; }
  .hero .container { grid-template-columns: minmax(300px, .9fr) minmax(430px, 1.1fr); }
  .hero-image-wrapper { right: -10vw; }
  .help-grid { grid-template-columns: repeat(2, 1fr); }
  .help-card { min-height: 240px; }
  .resource-items { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .resource-item:nth-child(3) { border-right: 0; }
  .resource-item:nth-child(n+4) { border-top: 1px solid var(--al-line); padding-top: 1rem; }
  .stories .container { grid-template-columns: 1fr; }
  .stories-grid { max-width: 970px; }
}

@media (max-width: 840px) {
  .site-header .container { height: 76px; }
  .mobile-menu-toggle { color: var(--al-green-dark); }
  .main-nav ul { background: #fffefa; border: 1px solid #ece2c7; box-shadow: var(--al-shadow); }
  .main-nav a.active::after { display: none; }
  .hero { min-height: 0; padding-top: 1.5rem; }
  .hero .container, .welcome .container, .understanding-cp .container, .final-cta .container { grid-template-columns: 1fr; }
  .hero-content { max-width: 680px; }
  .hero-visual { min-height: min(74vw, 530px); width: min(100%, 690px); margin: .25rem auto 3rem; }
  .hero-image-wrapper { inset: 1rem -6vw 0 0; border-radius: 38% 9% 10% 38% / 27% 10% 12% 30%; }
  .hero-logo-badge { left: 15%; }
  .welcome .container { gap: 2.5rem; }
  .welcome-text { max-width: 650px; }
  .welcome-image { order: -1; }
  .understanding-cp { background: linear-gradient(150deg, #597e18, #dfeab4 42%, #fff8e4); }
  .cp-content { padding-top: 1rem; }
  .final-cta .container { grid-template-columns: .8fr 1fr; }
  .final-cta-image { grid-row: span 2; height: 100%; min-height: 260px; }
  .final-cta-actions { grid-column: 2; }
  .resources-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .top-banner { font-size: .72rem; }
  .top-banner .container { gap: .35rem; }
  .top-banner-btn { width: auto; }
  .logo img { width: 154px; max-height: 60px; }
  .nav-actions .btn { display: none; }
  .hero { padding: 1rem 0 3.7rem; }
  .hero .container { padding-inline: 1.2rem; }
  .hero-ornament { margin-bottom: .45rem; transform: scale(.86); }
  .hero h1 { font-size: clamp(2.75rem, 13vw, 4.2rem); letter-spacing: -.06em; }
  .hero-subcopy { margin: 1.25rem 0 1.4rem; font-size: .96rem; line-height: 1.62; }
  .hero-actions { gap: .65rem; }
  .btn-lg { min-width: 0; flex: 1 1 145px; min-height: 54px; padding-inline: 1rem; font-size: .96rem; }
  .hero-trust { margin-top: 1.3rem; font-size: .83rem; }
  .hero-visual { min-height: 320px; margin-bottom: 2.3rem; }
  .hero-image-wrapper { inset: .7rem -11vw 0 0; border-width: 6px; }
  .hero-logo-badge { width: 112px; bottom: -2.7rem; }
  .heart-1 { left: 1%; top: 45%; }
  .heart-2 { left: 8%; top: 67%; }
  .heart-3 { right: 3%; top: 12%; }
  .heart-4, .heart-5 { display: none; }
  .section-padding { padding-block: 3.75rem; }
  .welcome-image, .welcome-image img { min-height: 265px; }
  .welcome h2 { font-size: 2.25rem; }
  .help-grid, .stories-grid, .resources-grid { grid-template-columns: 1fr; }
  .help-card { min-height: 0; padding: 1.4rem; }
  .understanding-cp .container { padding-inline: 1.2rem; }
  .cp-image, .cp-image img { min-height: 265px; }
  .cp-pillars { grid-template-columns: 1fr; gap: .8rem; }
  .cp-pillar, .cp-pillar + .cp-pillar { padding: .2rem 0 .8rem; border-right: 0; border-bottom: 1px solid rgba(74, 103, 26, .2); }
  .cp-pillar:last-child { border-bottom: 0; }
  .resources-strip { margin: -1rem .7rem 0; border-radius: 17px; padding: 1.25rem 0; }
  .resources-strip .section-header { display: block; }
  .resources-strip h2 { margin-bottom: .25rem; }
  .resource-items { grid-template-columns: 1fr; gap: 0; }
  .resource-item, .resource-item:nth-child(3) { border-right: 0; border-bottom: 1px solid var(--al-line); padding: .8rem 0; }
  .resource-item:nth-child(n+4) { border-top: 0; }
  .resource-item:last-child { border-bottom: 0; }
  .resources-cta { text-align: left; }
  .stories .container { gap: .75rem; }
  .story-card { min-height: 0; }
  .final-cta .container { grid-template-columns: 1fr; }
  .final-cta-image { grid-row: auto; height: 230px; min-height: 0; }
  .final-cta-content { max-width: none; }
  .final-cta-actions { grid-column: auto; max-width: none; display: flex; }
  .final-cta-actions .btn { min-width: 0; flex: 1; }
  .page-hero { padding-block: 4.25rem; }
  .page-hero h1 { font-size: clamp(2.65rem, 12vw, 4rem); }
  .page-hero p:last-child { font-size: .98rem; }
  .two-column { gap: 2rem; }
  .resources-grid { gap: 1rem; }
  .newsletter-form { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Floating heart accents around every photographic moment. */
@keyframes al-photo-heart-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
  50% { transform: translate3d(0, -13px, 0) rotate(6deg) scale(1.08); }
}

.welcome-image,
.cp-image,
.final-cta-image,
.story-image,
.help-image {
  isolation: isolate;
  overflow: hidden;
}

.welcome-image::before,
.cp-image::before,
.final-cta-image::before,
.story-image::before,
.help-image::before {
  content: '♥';
  position: absolute;
  z-index: 3;
  top: 13px;
  left: 14px;
  color: var(--al-gold);
  font-family: Arial, sans-serif;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(104, 76, 12, .18));
  animation: al-photo-heart-float 4.6s ease-in-out infinite;
}

.cp-image::after,
.final-cta-image::after,
.story-image::after,
.help-image::after {
  content: '♥';
  position: absolute;
  z-index: 3;
  right: 13px;
  bottom: 12px;
  color: var(--al-red);
  font-family: Arial, sans-serif;
  font-size: clamp(1.35rem, 2.5vw, 2.05rem);
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(120, 59, 27, .18));
  animation: al-photo-heart-float 5.3s ease-in-out .7s infinite reverse;
}

.welcome-image::before { color: var(--al-gold); }
.cp-image::before { color: #fff9dd; }
.final-cta-image::before { color: var(--al-red); }
.story-image::before { color: var(--al-gold); }
.help-image::before { color: var(--al-lime); }

@media (max-width: 640px) {
  .hero-logo-badge { bottom: 0; left: 17%; }
  .welcome-image::before,
  .cp-image::before,
  .final-cta-image::before,
  .story-image::before,
  .help-image::before { top: 9px; left: 10px; }
  .cp-image::after,
  .final-cta-image::after,
  .story-image::after,
  .help-image::after { right: 10px; bottom: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-image::before,
  .cp-image::before,
  .final-cta-image::before,
  .story-image::before,
  .help-image::before,
  .cp-image::after,
  .final-cta-image::after,
  .story-image::after,
  .help-image::after { animation: none; }
}


/* Premium homepage art-direction layer: reusable, code-built backgrounds and
   restrained botanical/heart accents. No raster page backgrounds are used. */
:root {
  --color-primary: #3f730a; --color-primary-dark: #2f5e08; --color-leaf: #a7cb36;
  --color-heart: #f34b3f; --color-coral: #f45c4b; --color-yellow: #f5dc3b;
  --color-cream: #fff9ee; --color-ivory: #fffdf8; --color-sage: #eef5dd;
  --color-blush: #fff0ea; --color-charcoal: #282828;
  --glow-yellow: rgba(247, 221, 62, .22); --glow-green: rgba(167, 203, 54, .18);
  --glow-coral: rgba(244, 92, 75, .12); --radius-card: 24px; --radius-pill: 999px;
  --shadow-soft: 0 18px 50px rgba(65, 93, 18, .08); --shadow-hover: 0 24px 60px rgba(65, 93, 18, .13);
  --content-max: 1400px;
}
body { font-family: var(--font-body); overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--font-display); }
body.menu-open { overflow: hidden; }
:focus-visible { outline: 3px solid #f45c4b; outline-offset: 4px; }
.site-header { position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 rgba(63, 115, 10, .1); }
.top-banner { position: relative; z-index: 31; }
.hero { min-height: clamp(670px, 49vw, 785px); }
.hero::before { width: 64vw; height: 64vw; border-color: rgba(167, 203, 54, .26); }
.hero-content::before { content: ''; position: absolute; width: 250px; height: 150px; border: 1px solid rgba(167, 203, 54, .32); border-left: 0; border-bottom: 0; border-radius: 0 100% 0 0; top: 5%; left: -14%; pointer-events: none; }
.hero-image-wrapper { border-radius: 48% 6% 8% 42% / 34% 6% 8% 38%; box-shadow: inset 0 0 0 3px rgba(167, 203, 54, .55), 0 26px 55px rgba(65, 93, 18, .12); }
.hero-image-wrapper::after { content: ''; position: absolute; inset: 17px; border: 1px solid rgba(255,255,255,.48); border-radius: inherit; pointer-events: none; }
.hero-logo-badge { display: none; }
.welcome { background: radial-gradient(circle at 10% 26%, var(--glow-yellow), transparent 13%), linear-gradient(115deg, var(--color-ivory), #fff 62%, #fff9f4); }
.welcome::after { content: ''; position: absolute; width: 170px; height: 80px; right: 8%; bottom: 14%; border-top: 1px solid rgba(63,115,10,.23); border-radius: 50%; transform: rotate(-14deg); pointer-events: none; }
.welcome-image { border-radius: 42% 18% 33% 20% / 31% 20% 36% 24%; }
.how-we-help::before { content: ''; position: absolute; left: 50%; top: 70px; width: min(25vw, 330px); height: 55px; transform: translateX(-50%); border-top: 1px solid rgba(63,115,10,.25); border-radius: 50%; pointer-events: none; }
.help-card { border-radius: var(--radius-card); box-shadow: var(--shadow-soft); transition: transform .22s ease, box-shadow .22s ease; }
.help-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.understanding-cp { position: relative; overflow: hidden; background: linear-gradient(110deg, #547e17 0%, #e9f1c7 47%, #fff8e4 100%); }
.understanding-cp::before { content: ''; position: absolute; width: 52vw; height: 52vw; border-radius: 50%; right: -30vw; top: -25vw; border: 1px solid rgba(255,255,255,.33); pointer-events: none; }
.cp-image { box-shadow: 0 22px 50px rgba(46,79,13,.2); }
.resources-strip, .story-card { box-shadow: var(--shadow-soft); }
.stories { background: radial-gradient(circle at 73% 35%, var(--glow-coral), transparent 17%), var(--color-ivory); }
.final-cta { isolation: isolate; }
.final-cta::before, .final-cta::after { pointer-events: none; z-index: -1; }
.site-footer { position: relative; }
.site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 7px; background: linear-gradient(90deg, var(--color-leaf), #edf6c8, var(--color-leaf)); }
.footer-contact-note { max-width: 260px; line-height: 1.6; }
.footer-newsletter-heading { margin-top: 1.5rem; }
.newsletter-form { display: grid; grid-template-columns: 1fr auto; gap: .65rem; }
.newsletter-form label { grid-column: 1 / -1; font-size: .84rem; font-weight: 700; color: var(--al-green-dark); }
.newsletter-status { grid-column: 1 / -1; min-height: 1.25em; margin: 0; font-size: .8rem; line-height: 1.35; }
@media (max-width: 840px) { .hero { min-height: 0; } .hero-content::before { display: none; } .welcome-image { order: 2; } }
@media (max-width: 640px) { .top-banner p { max-width: 64%; line-height: 1.25; } .top-banner-btn { white-space: nowrap; } .hero { padding-bottom: 3.5rem; } .hero::before, .welcome::after, .how-we-help::before, .understanding-cp::before { display: none; } .hero-image-wrapper { border-radius: 38% 10% 12% 34% / 26% 8% 12% 32%; } .final-cta-actions { flex-direction: column; } .newsletter-form { grid-template-columns: 1fr; } .newsletter-form button { min-height: 48px; } }


@media (max-width: 1350px) and (min-width: 841px) {
  .nav-actions .btn-ghost { display: none; }
  .site-header .container { gap: clamp(.45rem, 1.2vw, 1rem); }
  .main-nav ul { gap: clamp(.55rem, 1vw, 1rem); }
}
.story-placeholder-mark { color: var(--al-gold); font-size: 1.1rem; line-height: 1; }

/* A closed-by-default, focus-managed mobile navigation; JS adds .open explicitly. */
@media (max-width: 840px) {
  .main-nav ul { display: none !important; }
  .main-nav ul.open {
    display: flex !important; flex-direction: column; align-items: flex-start; gap: 1.15rem;
    position: fixed; z-index: 40; top: calc(var(--nav-height) + 1px); right: 0; bottom: 0;
    width: min(82vw, 360px); padding: 2rem; overflow-y: auto;
  }
}
@media (max-width: 640px) {
  .final-cta .container { display: flex; flex-direction: column; align-items: stretch; gap: 1.3rem; }
  .final-cta-content { display: contents; }
  .final-cta h2 { order: 1; font-size: 2.35rem; text-align: center; }
  .final-cta p { order: 1; text-align: center; margin: -.7rem 0 0; }
  .final-cta-image { order: 2; width: 100%; height: 220px; min-height: 220px; }
  .final-cta-actions { order: 3; width: 100%; display: grid; grid-template-columns: 1fr; gap: .7rem; }
}

/* Tablet CTA is intentionally linear rather than squeezing action buttons out of frame. */
@media (min-width: 641px) and (max-width: 840px) {
  .final-cta .container { display: flex; flex-direction: column; align-items: stretch; gap: 1.4rem; }
  .final-cta-content { display: contents; }
  .final-cta h2 { order: 1; text-align: center; }
  .final-cta p { order: 1; text-align: center; margin: -.8rem auto 0; }
  .final-cta-image { order: 2; width: min(100%, 620px); height: 280px; min-height: 280px; margin-inline: auto; }
  .final-cta-actions { order: 3; width: min(100%, 420px); margin-inline: auto; grid-template-columns: repeat(2, 1fr); }
}

/* Cerebral Palsy section: warm, restrained heart accents placed in unused background space. */
.understanding-cp .container { position: relative; z-index: 1; }
.understanding-cp .container::after {
  content: '♥  ♡  ♥';
  position: absolute;
  right: 2%;
  bottom: -1.1rem;
  color: var(--al-gold);
  font-family: Arial, sans-serif;
  font-size: clamp(1.45rem, 2.4vw, 2.55rem);
  letter-spacing: .6rem;
  opacity: .92;
  pointer-events: none;
  text-shadow: 0 4px 10px rgba(91, 108, 16, .14);
}
.cp-content::after {
  content: '♥';
  position: absolute;
  top: 2.1rem;
  right: 4%;
  color: var(--al-red);
  font-family: Arial, sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.45rem);
  opacity: .88;
  pointer-events: none;
}
.cp-content { position: relative; }
@media (max-width: 840px) {
  .understanding-cp .container::after { right: 5%; bottom: -.7rem; }
  .cp-content::after { top: .5rem; right: 2%; }
}
@media (max-width: 640px) {
  .understanding-cp .container::after { font-size: 1.2rem; letter-spacing: .35rem; bottom: -.35rem; }
  .cp-content::after { display: none; }
}

/* Welcome story: two slow, gently drifting hearts stay in the open space around Amber's photo. */
.welcome .container { position: relative; }
.welcome .container::before,
.welcome .container::after {
  position: absolute;
  z-index: 3;
  font-family: Arial, sans-serif;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(103, 82, 11, .16));
  animation: al-photo-heart-float 5.8s ease-in-out infinite;
}
.welcome .container::before {
  content: '♥';
  color: var(--al-red);
  font-size: clamp(1.45rem, 2.2vw, 2.3rem);
  right: 43%;
  top: 19%;
}
.welcome .container::after {
  content: '♡';
  color: var(--al-gold);
  font-size: clamp(1.65rem, 2.5vw, 2.7rem);
  right: 4%;
  bottom: 12%;
  animation-delay: -2.1s;
}
@media (max-width: 840px) {
  .welcome .container::before { right: 8%; top: 44%; }
  .welcome .container::after { right: 5%; bottom: 2%; }
}
@media (max-width: 640px) {
  .welcome .container::before { right: 11%; top: 48%; font-size: 1.35rem; }
  .welcome .container::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome .container::before,
  .welcome .container::after { animation: none; }
}


/* Interior pages — shared Amber's Love editorial treatment. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 13% 35%, rgba(246, 205, 69, .24), transparent 20rem),
    radial-gradient(circle at 88% 14%, rgba(237, 92, 76, .12), transparent 19rem),
    linear-gradient(118deg, #fffdf7 0%, #f5f8e9 55%, #fff8ee 100%);
  border-bottom: 1px solid rgba(68, 113, 28, .12);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero-content { max-width: 48rem; }
#story-heading, #resources-hero-heading, #support-heading, #help-heading, #involved-heading { font-size: 52px; line-height: 1.12; }
.photo-page-hero .container { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .92fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.photo-page-hero .page-hero-content { max-width: 42rem; }
.page-hero-photo {
  position: relative;
  justify-self: center;
  width: min(100%, 25rem);
  padding: .42rem;
  border: 5px solid rgba(255, 255, 250, .76);
  background: rgba(255, 255, 250, .42);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .84), 0 0 0 7px rgba(221, 238, 186, .4), 0 1.25rem 2.6rem rgba(57, 86, 26, .16);
}
.page-hero-photo::after { content: '♥'; position: absolute; z-index: 2; right: -.85rem; bottom: -.95rem; color: var(--al-coral); font: 2rem/1 Arial, sans-serif; filter: drop-shadow(0 4px 6px rgba(104, 76, 12, .16)); pointer-events: none; }
.page-hero-photo img { display: block; width: 100%; aspect-ratio: 1.28 / 1; object-fit: cover; border-radius: inherit; }
.photo-shape-story { border-radius: 50%; }
.photo-shape-story img { object-position: center; }
.photo-shape-resources { border-radius: 42% 42% 20% 20% / 30% 30% 18% 18%; }
.photo-shape-resources img { object-position: center; }
.photo-shape-help { border-radius: 24% 46% 22% 42% / 42% 22% 45% 24%; }
.photo-shape-help img { object-position: center; }
.photo-shape-involved { border-radius: 50% 28% 48% 24% / 30% 50% 26% 48%; }
.photo-shape-involved img { object-position: center; }
.support-page-hero .container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.support-page-hero .page-hero-content { max-width: 42rem; }
.support-page-hero-image {
  position: relative;
  justify-self: center;
  width: min(100%, 27rem);
  padding: .45rem;
  border: 6px solid rgba(255, 255, 250, .72);
  border-radius: 42% 18% 38% 20% / 28% 24% 36% 26%;
  background: rgba(255, 255, 250, .42);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .84),
    0 0 0 7px rgba(221, 238, 186, .42),
    0 0 0 10px rgba(255, 247, 215, .36),
    0 1.4rem 2.8rem rgba(57, 86, 26, .17);
}
.support-page-hero-image::before {
  content: '♥';
  position: absolute;
  z-index: 2;
  top: -1rem;
  left: -1.05rem;
  color: var(--al-gold);
  font: clamp(1.8rem, 3vw, 2.6rem)/1 Arial, sans-serif;
  filter: drop-shadow(0 4px 6px rgba(104, 76, 12, .16));
  pointer-events: none;
}
.support-page-hero-image img { display: block; width: 100%; aspect-ratio: 1.35 / 1; object-fit: cover; object-position: 52% center; border-radius: inherit; }
.page-hero .eyebrow { color: var(--al-green); font-weight: 800; letter-spacing: .12em; }
.page-hero h1 { color: var(--al-green-dark); text-wrap: balance; }
.page-hero::before,
.page-hero::after {
  position: absolute;
  z-index: 1;
  font-family: Arial, sans-serif;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 7px 10px rgba(97, 76, 10, .13));
  animation: al-photo-heart-float 6.2s ease-in-out infinite;
}
.page-hero::before {
  content: '♥';
  color: rgba(236, 88, 72, .72);
  font-size: clamp(2.4rem, 5vw, 5rem);
  right: 12%; top: 20%;
}
.page-hero::after {
  content: '♡';
  color: rgba(241, 194, 47, .92);
  font-size: clamp(2.2rem, 4vw, 4.3rem);
  right: 25%; bottom: 13%;
  animation-delay: -2.7s;
}
.story-section, .help-detail, .resources-page, .resources-workshops,
.support-page, .involvement-options, .donate-page { position: relative; }
.story-section::before, .resources-page::before, .involvement-options::before {
  content: ''; position: absolute; width: 13rem; height: 13rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(205, 224, 158, .33), rgba(205, 224, 158, 0) 68%);
  top: 2rem; left: -5rem; pointer-events: none;
}
.story-image, .help-image { overflow: visible; }
.story-image img, .help-image img { border-radius: 40% 18% 38% 18% / 22% 36% 24% 37%; box-shadow: 0 1.5rem 3.5rem rgba(40, 72, 24, .18); }
.story-image--logo { display: grid; place-items: center; }
.story-image--logo img { width: min(100%, 28rem); aspect-ratio: 1; object-fit: contain; padding: clamp(1rem, 4vw, 2.25rem); background: #fffef9; }
.values-grid .value-card { position: relative; isolation: isolate; padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.15rem); border: 2px solid transparent; background: linear-gradient(#fffefa, #fffefa) padding-box, linear-gradient(110deg, #536247, #aeb79f, #e7c6bb, #d4a18f, #536247) border-box; background-size: 100% 100%, 260% 100%; box-shadow: 0 1rem 2.5rem rgba(81, 72, 32, .10), inset 0 1px 0 rgba(255, 255, 255, .9); }
.value-icon { width: clamp(7.5rem, 10vw, 9.75rem); aspect-ratio: 1; display: grid; place-items: center; margin: 0 auto 1rem; overflow: hidden; border-radius: 50%; background: radial-gradient(circle, #fff5b8 0%, #f8e2a1 62%, #e9c77e 100%); box-shadow: 0 1rem 2.2rem rgba(140, 102, 32, .25), inset 0 0 0 .4rem rgba(255, 255, 255, .72); }
.value-icon img { width: 100%; max-width: none; height: 100%; object-fit: contain; mix-blend-mode: normal; transform: none; }
.value-icon--community img { width: 100%; height: 100%; }
.value-icon--dignity img { width: 100%; height: 100%; }
.value-card h3 { font-size: clamp(1.55rem, 2.4vw, 2rem); }
@keyframes values-border-drift { to { background-position: 0 0, 260% 0; } }
@media (prefers-reduced-motion: no-preference) { .values-grid .value-card { animation: values-border-drift 9s linear infinite; } }
.values-grid .value-card:hover { animation-play-state: paused; border-color: #536247; transform: translateY(-.4rem); box-shadow: 0 1.35rem 2.8rem rgba(45, 74, 31, .16), inset 0 1px 0 rgba(255, 255, 255, .9); }
.values-donate-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; max-width: 52rem; margin: clamp(2rem, 5vw, 3.5rem) auto 0; padding: 1rem 1.35rem 1rem 1.6rem; border-radius: 1.15rem; background: linear-gradient(105deg, rgba(255,255,255,.82), rgba(239,245,203,.82)); border: 1px solid #e5d6a8; box-shadow: 0 .75rem 2rem rgba(81, 72, 32, .09); text-align: center; }
.values-donate-cta p { margin: 0; color: var(--al-green-dark); font-weight: 600; }
.values-donate-cta .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) { .value-icon { width: 8rem; } .values-donate-cta { padding: 1.35rem 1rem; } }
.help-detail.alt { background: linear-gradient(105deg, rgba(244, 240, 230, .78), rgba(238, 247, 228, .62)); }
.help-text h2, .support-page h2, .donate-page h2, .resources-page h2, .resources-workshops h2, .involvement-options h2, .values-section h2 { color: var(--al-green-dark); }
.help-text li::marker { color: var(--al-coral); }
.resource-card, .involvement-card, .value-card, .info-card, .workshop-card, .donate-impact, .support-form-wrapper, .donate-form-wrapper {
  border: 1px solid rgba(68, 113, 28, .12);
  box-shadow: 0 .9rem 2.2rem rgba(45, 74, 31, .08);
}
.resource-card, .involvement-card, .value-card { transition: transform .25s ease, box-shadow .25s ease; }
.resource-card:hover, .involvement-card:hover, .value-card:hover { transform: translateY(-.35rem); box-shadow: 0 1.25rem 2.7rem rgba(45, 74, 31, .14); }
.partner-cta { position: relative; overflow: hidden; background: linear-gradient(112deg, #3d7018, #6b9726); }
.partner-cta::after { content: '♥'; position: absolute; right: 9%; bottom: -2.5rem; font: 9rem/1 Arial, sans-serif; color: rgba(255,255,255,.12); pointer-events: none; animation: al-photo-heart-float 7s ease-in-out infinite; }
.support-form input, .support-form select, .support-form textarea, .donate-form input { border-color: rgba(68, 113, 28, .25); }
@media (max-width: 640px) {
  .page-hero::before { right: 7%; top: 12%; font-size: 2.2rem; }
  .page-hero::after { display: none; }
  #story-heading, #resources-hero-heading, #support-heading, #help-heading, #involved-heading { font-size: clamp(2.65rem, 12vw, 3.25rem); }
  .photo-page-hero .container { grid-template-columns: 1fr; gap: 2rem; }
  .page-hero-photo { width: min(100%, 22rem); border-width: 4px; }
  .page-hero-photo::after { right: -.55rem; bottom: -.7rem; font-size: 1.65rem; }
  .support-page-hero .container { grid-template-columns: 1fr; gap: 2rem; }
  .support-page-hero-image { justify-self: stretch; width: min(100%, 32rem); margin-inline: auto; border-width: 4px; }
  .support-page-hero-image::before { top: -.8rem; left: -.6rem; font-size: 1.75rem; }
  .story-image img, .help-image img { border-radius: 2rem 1rem 2rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero::before, .page-hero::after, .partner-cta::after { animation: none; }
  .resource-card, .involvement-card, .value-card { transition: none; }
}


/* Supplied hero photography and official mark: a low-left signature that protects the subjects' faces. */
.hero-image-wrapper { border-radius: 42% 10% 12% 39% / 28% 11% 12% 34%; }
.hero-image-wrapper img { object-position: center; transition: transform .8s cubic-bezier(.16, 1, .3, 1), filter .8s ease; }
.hero-image-wrapper:hover img { transform: scale(1.035); filter: saturate(1.035) contrast(1.02); }
.hero-logo-badge {
  display: block;
  height: auto;
  left: clamp(.75rem, 2.2vw, 2rem);
  bottom: clamp(2.3rem, 4.4vw, 3.5rem);
  z-index: 8;
  width: clamp(142px, 13.5vw, 205px);
  padding: clamp(.35rem, .7vw, .65rem);
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 250, .94), rgba(255, 251, 230, .78));
  box-shadow: 0 .8rem 1.8rem rgba(22, 38, 11, .28), inset 0 1px 0 rgba(255, 255, 255, .9);
  transform-origin: left bottom;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
  animation: hero-logo-breathe 5.5s ease-in-out infinite;
}
.hero-logo-badge img { display: block; width: 100%; height: auto; }
.hero-image-wrapper:hover .hero-logo-badge { transform: translateY(-.45rem) scale(1.045) rotate(-1deg); box-shadow: 0 1.25rem 2.25rem rgba(22, 38, 11, .32), inset 0 1px 0 rgba(255, 255, 255, .9); }
.hero-floating-heart { position: absolute; animation: hero-heart-drift 5.6s ease-in-out infinite; }
.heart-2 { animation-delay: -1.25s; }
.heart-3 { animation-delay: -2.5s; }
.heart-4 { animation-delay: -3.7s; }
.heart-5 { animation-delay: -4.5s; }
@keyframes hero-heart-drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
  50% { transform: translate3d(0, -13px, 0) rotate(7deg) scale(1.11); }
}
@keyframes hero-logo-breathe {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}
@media (max-width: 840px) {
  .hero-logo-badge { width: clamp(132px, 28vw, 190px); left: 1rem; bottom: 1rem; }
}
@media (max-width: 640px) {
  .hero-logo-badge { width: clamp(118px, 34vw, 152px); padding: .28rem; border-radius: 50%; }
  .hero-image-wrapper:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-image-wrapper img, .hero-logo-badge { transition: none; animation: none; }
  .hero-image-wrapper:hover .hero-logo-badge { transform: none; }
  .hero-floating-heart { animation: none; }
}

/* Non-hero photography gets its own soft, bubble-like frame. The hero keeps its
   existing signature treatment unchanged. Hearts above these images stay intact. */
.welcome-image,
.cp-image,
.final-cta-image,
.story-image,
.help-image {
  overflow: visible;
  border: 6px solid rgba(255, 255, 250, .72);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .82),
    0 0 0 7px rgba(221, 238, 186, .38),
    0 0 0 10px rgba(255, 247, 215, .42),
    0 1.35rem 2.7rem rgba(57, 86, 26, .16);
}
.welcome-image::after,
.cp-image::after,
.final-cta-image::after,
.story-image::after,
.help-image::after {
  border-radius: inherit;
}
.welcome-image img,
.cp-image img,
.final-cta-image img,
.story-image img,
.help-image img {
  display: block;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

/* Calm heart accents also give the text-led sections a small piece of the same warmth. */
.values-section,
.resources-workshops,
.involvement-options { isolation: isolate; }
.values-section::after,
.resources-workshops::after,
.involvement-options::after {
  content: '♥';
  position: absolute;
  z-index: -1;
  right: clamp(1rem, 6vw, 5rem);
  bottom: clamp(1rem, 4vw, 3.5rem);
  color: rgba(244, 92, 75, .16);
  font: clamp(4rem, 9vw, 8rem)/1 Arial, sans-serif;
  pointer-events: none;
}
@media (max-width: 640px) {
  .welcome-image,
  .cp-image,
  .final-cta-image,
  .story-image,
  .help-image {
    border-width: 4px;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, .82),
      0 0 0 5px rgba(221, 238, 186, .34),
      0 0 0 7px rgba(255, 247, 215, .38),
      0 .9rem 1.9rem rgba(57, 86, 26, .14);
  }
}

/* Illustrated category icons: supplied artwork replaces generic glyphs. */
.help-icon.art-icon,
.resource-card .resource-icon.art-icon {
  position: relative;
  isolation: isolate;
  width: clamp(5.65rem, 7vw, 6.35rem);
  height: clamp(5.65rem, 7vw, 6.35rem);
  margin: .15rem auto .85rem;
  padding: .46rem;
  overflow: visible;
  border: 1px solid rgba(96, 126, 34, .22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .98) 0 11%, transparent 12%),
    radial-gradient(circle at 50% 48%, #fffef7 0 49%, #edf5c9 72%, #dceba7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 0 0 5px rgba(255, 255, 255, .48),
    0 10px 20px rgba(74, 100, 22, .12),
    0 0 0 7px rgba(232, 243, 188, .4);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}

.help-icon.art-icon::before,
.resource-card .resource-icon.art-icon::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10px;
  border: 1px dashed rgba(134, 166, 51, .5);
  border-radius: 50%;
  opacity: .78;
}

.help-icon.art-icon::after,
.resource-card .resource-icon.art-icon::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -7px;
  right: 7px;
  width: .68rem;
  height: .68rem;
  border: 2px solid #fffef7;
  border-radius: 50%;
  background: #ffce58;
  box-shadow: 0 2px 7px rgba(173, 113, 9, .22);
}

.art-icon img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 3px rgba(42, 78, 13, .12));
}

.help-card:hover .art-icon,
.resource-card:hover .art-icon {
  transform: translateY(-5px) scale(1.055);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 0 0 5px rgba(255, 255, 255, .62),
    0 16px 26px rgba(74, 100, 22, .18),
    0 0 0 8px rgba(244, 218, 125, .32);
}

@media (prefers-reduced-motion: no-preference) {
  .help-card .art-icon,
  .resource-card .art-icon {
    animation: icon-stage-float 5.5s ease-in-out infinite;
  }

  .help-card:nth-child(2) .art-icon,
  .resource-card:nth-child(2) .art-icon { animation-delay: -.9s; }
  .help-card:nth-child(3) .art-icon,
  .resource-card:nth-child(3) .art-icon { animation-delay: -1.8s; }
  .help-card:nth-child(4) .art-icon,
  .resource-card:nth-child(4) .art-icon { animation-delay: -2.7s; }

  .help-card .art-icon::before,
  .resource-card .art-icon::before {
    animation: icon-orbit 16s linear infinite;
  }
}

@keyframes icon-stage-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes icon-orbit {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .help-card .art-icon,
  .resource-card .art-icon,
  .help-card .art-icon::before,
  .resource-card .art-icon::before {
    animation: none;
  }
}


@media (max-width: 640px) {
  .help-icon.art-icon,
  .resource-card .resource-icon.art-icon {
    width: 5.35rem;
    height: 5.35rem;
  }
}

/* Global desktop navigation: room for the primary mark without crowding links. */
@media (min-width: 841px) {
  :root { --nav-height: 112px; }
  .site-header .container { min-height: var(--nav-height); }
  .logo { padding-block: .42rem; }
  .logo img {
    width: clamp(175px, 18vw, 280px);
    max-height: 96px;
  }
  .main-nav a { font-size: .94rem; }
  .main-nav a.active::after { bottom: -18px; }
  .nav-actions .btn { min-height: 48px; padding-inline: 1.35rem; }
}

@media (min-width: 841px) and (max-width: 1100px) {
  .logo img { width: 178px; max-height: 88px; }
  .main-nav ul { gap: .45rem; }
  .main-nav a { padding-inline: .62rem; font-size: .8rem; }
}

.resource-item .resource-icon.art-icon {
  width: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

@media (max-width: 640px) {
  .resource-item .resource-icon.art-icon {
    width: 2.7rem;
    height: 2.7rem;
  }
}

/* Deep links should reveal the contact form below the fixed header. */
#contact-form { scroll-margin-top: calc(var(--nav-height) + 1.25rem); }

/* Give the homepage hero artwork more of the open right-hand canvas while preserving its existing composition. */
@media (min-width: 1101px) {
  .hero-image-wrapper {
    inset: .45rem auto auto -1.5rem;
    width: calc(100% + clamp(4.5rem, 8vw, 8.5rem));
    max-width: none;
    aspect-ratio: 4 / 3.2;
  }
}

/* Preserve the intentional three-line hero headline at wide layouts. */
#hero-headline .line { white-space: nowrap; }

/* Mobile-fit safeguards: keep chrome, headings, and calls to action inside the viewport. */
.top-banner .container > a:not(.top-banner-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .36rem .85rem;
  border: 0;
  border-radius: var(--radius-full);
  background: #fffef9;
  color: var(--al-green-dark);
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .top-banner .container {
    max-width: 100%;
    padding-inline: 1rem;
  }

  .top-banner p {
    min-width: 0;
    max-width: 100%;
    justify-content: center;
    line-height: 1.35;
    white-space: normal;
  }

  .top-banner .container > a,
  .top-banner .container > a:not(.top-banner-btn) {
    width: auto;
    max-width: 100%;
  }

  .hero .container,
  .photo-page-hero .container {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    width: 100%;
  }

  .hero-content,
  .page-hero-content,
  .hero-visual {
    min-width: 0;
    width: 100%;
  }

  .hero h1 {
    font-size: clamp(2.25rem, 10vw, 2.75rem);
  }

  #hero-headline .line {
    white-space: normal;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .hero-actions .btn-lg {
    width: 100%;
  }

  .page-hero h1,
  #involved-heading {
    overflow-wrap: anywhere;
  }
}

/* Global footer: centered, balanced, and touch-friendly on phones. */
@media (max-width: 640px) {
  .site-footer {
    text-align: center;
  }

  .footer-grid {
    justify-items: center;
  }

  .footer-brand,
  .footer-grid > div {
    width: 100%;
  }

  .footer-brand img,
  .footer-brand p,
  .footer-contact-note {
    margin-inline: auto;
  }

  .social-links {
    justify-content: center;
  }

  .newsletter-form {
    width: min(100%, 360px);
    margin-inline: auto;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .footer-bottom > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1rem;
  }

  .site-footer a:hover {
    padding-left: 0;
  }
}

/* Legal pages: readable, calm long-form content that belongs to the Amber's Love experience. */
.legal-hero {
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  background: radial-gradient(circle at 82% 20%, rgba(247, 221, 62, .34), transparent 20rem), linear-gradient(135deg, #f8f7e8 0%, #fffdf7 58%, #eef4d3 100%);
  text-align: center;
}

.legal-hero .eyebrow {
  color: var(--deep-green);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  margin-bottom: 1rem;
}

.legal-hero h1 { color: var(--forest-green); margin-bottom: 1rem; }
.legal-hero .lead { max-width: 680px; margin: 0 auto 1rem; }
.legal-date { color: var(--body-muted); font-size: .94rem; margin: 0; }
.legal-content { background: var(--warm-cream); }
.legal-layout { display: grid; grid-template-columns: minmax(200px, .55fr) minmax(0, 2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.legal-aside { position: sticky; top: calc(var(--nav-height) + 1.5rem); padding: 1.5rem; border-radius: var(--radius-lg); background: #edf4d8; box-shadow: var(--shadow-sm); }
.legal-aside p { color: var(--forest-green); font-weight: 700; line-height: 1.35; margin-bottom: 1rem; }
.legal-aside .btn { width: 100%; font-size: .92rem; padding-inline: 1rem; }
.legal-copy { max-width: 850px; }
.legal-copy > p:first-child { font-size: 1.14rem; line-height: 1.7; }
.legal-copy h2 { color: var(--forest-green); font-size: clamp(1.45rem, 2.5vw, 2rem); margin: 2.5rem 0 .75rem; }
.legal-copy p, .legal-copy li { color: var(--body-text); }
.legal-copy ul { padding-left: 1.3rem; margin: 0 0 1rem; }
.legal-copy li + li { margin-top: .5rem; }

@media (max-width: 840px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-aside { position: static; text-align: center; }
  .legal-aside .btn { width: auto; }
}

@media (max-width: 640px) {
  .legal-hero { text-align: left; }
  .legal-hero .lead { margin-left: 0; }
  .legal-content { padding-top: 3.5rem; }
  .legal-copy h2 { margin-top: 2.1rem; }
}