/* ================================================================
   EBEN MINISTRIES — REUSABLE CSS DESIGN SYSTEM
   ================================================================

   PURPOSE
   -------
   This first portion of the stylesheet contains reusable building
   blocks. New pages should be assembled from these classes before
   creating page-specific CSS.

   A typical section can be built like this:

   <section class="section section--cream">
       <div class="wrap">
           <div class="grid grid--2">
               <article class="panel">...</article>
               <article class="panel">...</article>
           </div>
       </div>
   </section>

   CLASS GROUPS
   ------------
   01. Design tokens       Shared colors, spacing and measurements
   02. Reset/base          Browser defaults and basic HTML elements
   03. Layout              Widths, sections, grids, flex and stacks
   04. Surfaces            Panels, cards, callouts and media frames
   05. Typography          Reusable heading and text treatments
   06. Buttons             One button base with visual modifiers
   07. Forms               Labels, fields, rows and field groups
   08. Media/embeds        Images, video and iframe containers
   09. Utilities           Small single-purpose helper classes
   10. Responsive rules     Shared breakpoint behavior

   NAMING PATTERN
   --------------
   .component              Base reusable component
   .component__part        A part inside the component
   .component--variation   A visual or layout variation

   ================================================================ */

/* ================================================================
   01. DESIGN TOKENS
   Change these values to update the entire website consistently.
   ================================================================ */

:root {
    /* =========================================================
       EBEN MINISTRIES OFFICIAL BRAND PALETTE
       ========================================================= */
    --eben-cream: #fff6e5;
    --eben-charcoal: #545454;
    --eben-blue: #cde9eb;
    --eben-brown: #433822;
    --eben-gray-white: #f1f0ec;
    --eben-green: #a4b792;
    --eben-periwinkle: #c2cde2;
    --eben-pink: #ebcfcd;
    --eben-mauve: #b79292;

    /* Semantic website colors */
    --color-green: var(--eben-green);
    --color-green-dark: var(--eben-brown);
    --color-red: var(--eben-mauve);
    --color-red-dark: #967676;
    --color-red-bright: var(--eben-pink);
    --color-gold: var(--eben-cream);

    --color-cream: var(--eben-gray-white);
    --color-cream-soft: var(--eben-cream);
    --color-white: #ffffff;
    --color-text: var(--eben-charcoal);
    --color-muted: #6b6b6b;
    --color-border: #ddd9d0;
    --color-black: var(--eben-brown);

    /* Font families */
    --font-heading: "Playfair Display", Georgia, serif;
    --font-body: Inter, Arial, sans-serif;

    /* Page widths */
    --width-content: 1200px;
    --width-reading: 760px;
    --page-gutter: 4%;

    /* Consistent spacing scale */
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;
    --space-8: 6rem;

    /* Corners */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 14px 35px rgba(0, 0, 0, 0.12);

    /* Motion */
    --transition-fast: 160ms ease;
    --transition-normal: 280ms ease;

    /* Existing names retained so current page-specific CSS still works. */
    --green: var(--color-green);
    --green-dark: var(--color-green-dark);
    --red: var(--color-red);
    --red-bright: var(--color-red-bright);
    --cream: var(--color-cream);
    --text: var(--color-text);
    --muted: var(--color-muted);
    --white: var(--color-white);
    --border: var(--color-border);
    --shadow: var(--shadow-md);
    --shadow-hover: var(--shadow-lg);
    --wide: var(--width-content);
    --wrap: 1180px;

    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-3);
    --space-lg: var(--space-4);
    --space-xl: var(--space-5);
    --space-2xl: var(--space-6);
    --space-3xl: var(--space-7);
    --space-4xl: var(--space-8);

    /* Legacy Eben aliases */
    --eben-red: var(--eben-mauve);
    --eben-red-dark: #967676;
    --eben-green-dark: var(--eben-brown);
    --eben-soft: var(--eben-gray-white);
    --eben-gold: var(--eben-cream);
    --eben-text: var(--eben-charcoal);
    --eben-muted: #6b6b6b;
    --eben-line: #ddd9d0;
}

/* ================================================================
   02. RESET AND BASE ELEMENTS
   These rules establish predictable browser behavior.
   ================================================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--color-cream);
    color: var(--color-text);
    line-height: 1.6;
}

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

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
blockquote {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--eben-brown);
}

h1,
h2 {
    font-family: var(--font-heading);
    line-height: 1.1;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid rgba(183, 146, 146, 0.45);
    outline-offset: 3px;
}

/* ================================================================
   03. LAYOUT CLASSES
   Layout classes control position and spacing, not appearance.
   ================================================================ */

/* Centers page content and prevents it from becoming too wide. */
.wrap,
.container {
    width: min(var(--width-content), calc(100% - (var(--page-gutter) * 2)));
    margin-inline: auto;
}

/* A narrower container for long text, policies and story content. */
.container--narrow,
.reading-width {
    width: min(var(--width-reading), calc(100% - (var(--page-gutter) * 2)));
    margin-inline: auto;
}

/* Standard vertical page section. Use padding rather than margins so
   a section background fills the entire colored band. */
.section {
    padding-block: var(--space-7);
}

.section--sm {
    padding-block: var(--space-5);
}

.section--lg {
    padding-block: var(--space-8);
}

/* Reusable section backgrounds. */
.section--white { background: var(--color-white); }
.section--cream { background: var(--color-cream); }
.section--soft { background: var(--color-cream-soft); }
.section--green { background: var(--color-green); color: var(--color-white); }
.section--red { background: var(--color-red); color: var(--color-white); }
.section--dark { background: var(--color-black); color: var(--color-white); }
.section--blue { background: var(--eben-blue); color: var(--eben-brown); }
.section--periwinkle { background: var(--eben-periwinkle); color: var(--eben-brown); }
.section--pink { background: var(--eben-pink); color: var(--eben-brown); }
.section--mauve { background: var(--eben-mauve); color: var(--color-white); }
.section--brown { background: var(--eben-brown); color: var(--eben-cream); }

/* Vertical stack. Every direct child after the first gets equal spacing. */
.stack {
    display: flex;
    flex-direction: column;
}

.stack > * {
    margin-block: 0;
}

.stack > * + * {
    margin-top: var(--stack-gap, var(--space-4));
}

.stack--sm { --stack-gap: var(--space-2); }
.stack--lg { --stack-gap: var(--space-6); }

/* Horizontal group that wraps when space runs out. Useful for buttons,
   logos, filters and small groups of related items. */
.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-3));
}

.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }

/* Base grid. Add a column modifier such as grid--2 or grid--3. */
.grid {
    display: grid;
    gap: var(--grid-gap, var(--space-5));
    align-items: stretch;
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Automatically creates as many columns as fit. Good for cards. */
.grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

/* Two-column layout with a wider main content area. */
.grid--sidebar {
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
}

/* Two equal columns. Retained as a simple readable alias. */
.split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: stretch;
}

/* Controls alignment of children without creating new page classes. */
.items-start { align-items: start; }
.items-center { align-items: center; }
.items-end { align-items: end; }
.items-stretch { align-items: stretch; }

/* ================================================================
   04. SURFACE CLASSES
   Surfaces control the visual box around content, not its location.
   ================================================================ */

/* General white content panel. Use for forms, side-by-side information,
   calculator areas and ordinary content blocks. */
.panel {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.panel--flat {
    box-shadow: none;
}

.panel--soft {
    background: var(--color-cream-soft);
}

.panel--green {
    background: var(--color-green);
    border-color: transparent;
    color: var(--color-white);
}

.panel--red {
    background: var(--color-red);
    border-color: transparent;
    color: var(--color-white);
}

/* A card is similar to a panel but is intended as a repeatable item in
   a grid, such as a story, service, statistic or volunteer option. */
.card {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.card__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-4);
}

.card__footer {
    margin-top: auto;
    padding-top: var(--space-4);
}

.card--horizontal {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
}

.card--horizontal .card__media {
    height: 100%;
    aspect-ratio: auto;
}

/* Highlighted information box. */
.callout {
    padding: var(--space-4);
    border-left: 6px solid var(--color-red);
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.callout--green { border-left-color: var(--color-green); }
.callout--gold { border-left-color: var(--color-gold); }

/* ================================================================
   05. TYPOGRAPHY CLASSES
   Use these to create consistent text hierarchy on every page.
   ================================================================ */

.eyebrow {
    display: inline-block;
    margin-bottom: var(--space-2);
    color: var(--color-red);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.display-title {
    max-width: 18ch;
    margin-bottom: var(--space-4);
    font-size: clamp(2.75rem, 6vw, 5rem);
}

.section-title {
    margin-bottom: var(--space-3);
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.subtitle,
.lead {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.5;
}

.text-muted { color: var(--color-muted); }
.text-red { color: var(--color-red); }
.text-green { color: var(--color-green); }
.text-white { color: var(--color-white); }

.section-heading {
    max-width: 800px;
    margin: 0 auto var(--space-5);
    text-align: center;
}

.section-heading h2 {
    font-size: clamp(2rem, 4vw, 3rem);
}

/* ================================================================
   06. BUTTON SYSTEM
   Every button begins with .btn. Add one visual modifier.
   ================================================================ */

.btn {
    display: inline-flex;
    min-height: 48px;
    min-width: 180px;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    padding: 12px 24px;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

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

.btn--primary {
    background: var(--eben-green);
    border-color: var(--eben-green);
    color: var(--eben-brown);
}

.btn--primary:hover {
    background: var(--eben-brown);
    border-color: var(--eben-brown);
    color: var(--eben-cream);
}

.btn--outline {
    background: var(--color-white);
    border-color: var(--color-red);
    color: var(--color-red);
}

.btn--outline:hover {
    background: var(--color-red);
    color: var(--color-white);
}

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

.btn--white:hover {
    background: transparent;
    color: var(--color-white);
}

.btn--green {
    background: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-white);
}

.btn--small {
    min-height: 40px;
    min-width: 0;
    padding: 9px 18px;
    font-size: 0.9rem;
}

.btn--large {
    min-height: 56px;
    padding: 16px 30px;
    font-size: 1.08rem;
}

.btn--block {
    width: 100%;
}


.center-button {
    margin-top: var(--space-4);
    text-align: center;
}

/* ================================================================
   07. FORM SYSTEM
   Use .form-group for one label and one field. Use .form-row to place
   two groups side by side on larger screens.
   ================================================================ */

.form {
    display: grid;
    gap: var(--space-4);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.form-group {
    display: grid;
    gap: var(--space-1);
}

.form-label,
.form-group > label {
    font-weight: 700;
}

.form-control,
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-text);
}

.form-group textarea,
textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-red);
    outline: 3px solid rgba(183, 146, 146, 0.22);
}

.form-help {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.form-check input {
    width: auto;
    min-height: 0;
    margin-top: 0.35em;
}

.required-mark {
    color: var(--color-red);
}

/* ================================================================
   08. MEDIA AND EMBEDS
   Reusable containers prevent images and embeds from overflowing.
   ================================================================ */

.media-frame {
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
}

.media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.embed {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
}

.embed--video {
    aspect-ratio: 16 / 9;
}

.embed iframe,
.embed video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.embed--form {
    min-height: 750px;
}

.embed--form iframe {
    min-height: 750px;
}

/* ================================================================
   09. UTILITY CLASSES
   Utilities make one small change and can be combined with components.
   ================================================================ */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.p-0 { padding: 0; }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

.rounded { border-radius: var(--radius-xl); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-none { box-shadow: none; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.h-full { height: 100%; }

.hidden,
[hidden] {
    display: none !important;
}


/* ================================================================
   10. RESPONSIVE DESIGN-SYSTEM RULES
   Reusable layouts collapse automatically on smaller screens.
   ================================================================ */

@media (max-width: 1000px) {
    .grid--4,
    .grid--5,
    .grid--6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid--sidebar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .section {
        padding-block: var(--space-6);
    }

    .grid--2,
    .grid--3,
    .grid--4,
    .grid--5,
    .grid--6,
    .split,
    .form-row,
    .card--horizontal {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 560px) {
    :root {
        --page-gutter: 5%;
    }

    .panel,
    .card__body {
        padding: var(--space-4);
    }
}


/* Hides text visually while keeping it available to screen readers. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ================================================================
   SITE-SPECIFIC COMPONENTS
   The rules below support unique Eben components that cannot be
   represented by generic layout or surface classes alone.
   ================================================================ */
/* =========================================================
   SHARED SITE COMPONENTS
   These classes style HTML fragments loaded from the includes folder.
   Layout utilities such as .wrap, .stack and .cluster are combined with
   these component classes rather than repeating layout rules on each page.
   ========================================================= */
/* =========================================================
   03. HEADER AND NAVIGATION
   ========================================================= */
.site-header {
    position: relative;
    z-index: 99;
    background: var(--eben-green);
    border-bottom: 1px solid rgba(67, 56, 34, 0.16);
    transform: translate3d(0, 0, 0);
    transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.site-header.is-fixed {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
}

.site-header.is-positioning {
    transition: none;
}

.site-header.is-scroll-hidden {
    transform: translate3d(0, -100%, 0);
}

.site-header-spacer {
    height: 0;
}

@media (prefers-reduced-motion: reduce) {
    .site-header {
        transition: none;
    }
}

.site-header__inner {
    display: flex;
    align-items: center;         /* Centers items vertically */
    justify-content: space-between; /* Pushes logo to left, nav/button to right */
    padding: 1rem;               /* Adjust spacing as needed */
}


.site-brand img {
    width: 350px;
}

.main-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-lg);
}

.main-nav a {
    font-weight: 600;
}

.site-nav__donate {
    color: var(--eben-brown);
}

.site-nav {
    display: flex;
    align-items: center; /* Centers all links and the button vertically */
    gap: 1.5rem;         /* Adds uniform spacing between your links */
}

/* Optional styling to make the button look like a button */
.impact-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
}
/* =========================================================
   05. SHARED HERO SYSTEM
   All hero layout, typography, images and page heights are
   controlled in this one section.
   ========================================================= */

/* ---------------------------------------------------------
   HERO BASE LAYOUT
   Do not place page-specific image names or heights here.
   --------------------------------------------------------- */
.hero {
    --hero-height: 420px;
    --hero-height-mobile: 340px;
    --hero-image: none;
    --hero-position: center;
    /* Horizontal space between hero text and browser edges. */
    --hero-side-space: clamp(1.5rem, 4vw, 4rem);

    --hero-overlay: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(255, 255, 255, 0.75) 35%,
        rgba(255, 255, 255, 0.15) 72%,
        rgba(255, 255, 255, 0) 100%
    );

    position: relative;
    isolation: isolate;
    min-height: var(--hero-height);
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--color-cream-soft);
    background-image: var(--hero-image);
    background-position: var(--hero-position);
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--color-text);
}

/* Places a readable wash between the image and the text. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hero-overlay);
}

/* Every page uses the same left edge and vertical alignment.
   This container is self-contained; it does not depend on .wrap.
   Change --hero-side-space below to move all hero text farther
   from or closer to the browser edges. */
.hero__inner {
    width: min(
        var(--width-content),
        calc(100% - (var(--hero-side-space, clamp(1.5rem, 4vw, 4rem)) * 2))
    );
    margin-inline: auto;
    padding-block: clamp(3rem, 7vw, 6rem);
}

.hero__content {
    width: min(720px, 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.hero__eyebrow {
    display: inline-block;
    margin: 0 0 0.8rem;
    color: var(--color-red);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
}

.hero__title {
    max-width: 18ch;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: clamp(2.65rem, 5.5vw, 5.25rem);
    line-height: 0.98;
}

.hero__accent {
    color: var(--color-red);
}

.hero__subtitle {
    max-width: 40ch;
    margin: 1rem 0 0;
    color: var(--color-green-dark);
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    font-style: italic;
    font-weight: 700;
    line-height: 1.3;
}

.hero__text {
    max-width: 62ch;
    margin: 1rem 0 0;
    color: var(--color-text);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 600;
    line-height: 1.65;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* ---------------------------------------------------------
   PAGE-BY-PAGE HERO IMAGES
   Change only the file name or image position in this section.
   Paths begin in the css folder, so ../images/ points to images.
   --------------------------------------------------------- */
.hero--home     { --hero-image: url("../images/index_hero.webp");       --hero-position: center; }
.hero--about     { --hero-image: url("../images/about_hero.jpg");       --hero-position: center; }
.hero--help      { --hero-image: url("../images/help_hero.webp");        --hero-position: center; }
.hero--shop      { --hero-image: url("../images/shop_hero.webp");        --hero-position: center; }
.hero--faq       { --hero-image: url("../images/faq_hero.webp");         --hero-position: center; }
.hero--donate    { --hero-image: url("../images/donate_hero.webp");      --hero-position: center; }
.hero--events    { --hero-image: url("../images/events_hero.webp");      --hero-position: center; }
.hero--volunteer { --hero-image: url("../images/volunteer_hero.webp");   --hero-position: center; }
.hero--thank-you { --hero-image: url("../images/thank_you_hero.png");   --hero-position: center; }
.hero--story-1   { --hero-image: url("../images/story1_hero.webp");      --hero-position: center; }
.hero--story-2   { --hero-image: url("../images/story2_hero.png");      --hero-position: center; }
.hero--story-3   { --hero-image: url("../images/story3_hero.png");      --hero-position: center; }
.hero--story-4   { --hero-image: url("../images/story4_hero.jpg");      --hero-position: center; }

/* ---------------------------------------------------------
   PAGE-BY-PAGE HERO HEIGHTS
   Change these values to adjust one page without affecting others.
   The first value is desktop/tablet; the second is mobile.
   --------------------------------------------------------- */
.hero--home      { --hero-height: 800px; --hero-height-mobile: 650px; }
.hero--about     { --hero-height: 480px; --hero-height-mobile: 420px; }
.hero--help      { --hero-height: 560px; --hero-height-mobile: 340px; }
.hero--faq       { --hero-height: 360px; --hero-height-mobile: 340px; }
.hero--donate    { --hero-height: 420px; --hero-height-mobile: 360px; }
.hero--events    { --hero-height: 360px; --hero-height-mobile: 340px; }
.hero--volunteer { --hero-height: 360px; --hero-height-mobile: 340px; }
.hero--thank-you { --hero-height: 340px; --hero-height-mobile: 320px; }
.hero--shop { --hero-height: 340px; --hero-height-mobile: 320px; }
.hero--story-1,
.hero--story-2,
.hero--story-3,
.hero--story-4   { --hero-height: 520px; --hero-height-mobile: 420px; }

@media (max-width: 700px) {
    .hero {
        min-height: var(--hero-height-mobile);
        /* The filtered image is moved to its own layer so hero text stays crisp. */
        background-image: none;
    }

    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background-color: var(--color-cream-soft);
        background-image: var(--hero-image);
        background-position: right center;
        background-repeat: no-repeat;
        background-size: cover;
        filter: saturate(38%) brightness(1.12) contrast(0.82);
        transform: scale(1.01);
    }

    .hero::before {
        background: linear-gradient(
            90deg,
            rgba(255, 252, 246, 0.92) 0%,
            rgba(255, 252, 246, 0.76) 58%,
            rgba(255, 252, 246, 0.48) 100%
        );
    }

    .hero__inner {
        --hero-side-space: 1.25rem;
        padding-block: 3.5rem;
    }

    .hero__title {
        font-size: clamp(2.35rem, 12vw, 3.75rem);
    }

    .hero__actions {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Statistics section: <section class="stats-section">. */
.section-image-heading {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-xl);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-lg);
}

.stat-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: var(--space-lg);
    text-align: center;
}

.stat-card img {
    margin: 0 auto var(--space-sm);
}

.stat-card b {
    display: block;
    color: var(--green);
    font-size: 2rem;
}


.story-card,
.impact-card {
    background: var(--white);
    box-shadow: var(--shadow);
}


.panel h2 {
    text-transform: uppercase;
}

.story-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-lg);
    align-items: start;
}

.story-grid img {
    border-radius: var(--radius-lg);
}

.checklist {
    margin: var(--space-sm) 0 0;
    padding: 0;
    list-style: none;
}

.checklist li {
    position: relative;
    margin-bottom: var(--space-xs);
    padding-left: 1.5em;
}

.checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--red);
    font-weight: 700;
}

.story-button {
    margin-top: var(--space-lg);
}

.what-intro {
    max-width: 540px;
    margin-inline: auto;
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.service{
    min-height:100px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:1px;
}

.service:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.service img{
    width:140px;
    height:140px;
    object-fit:contain;
    border-radius:14px;
}

/* Stories section: <section class="stories-section">. */
.stories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    text-align: center;
}

.story-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    padding: var(--space-lg);
}

.story-card img {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

.story-card h3 {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.5rem;
    margin: var(--space-lg) 0 var(--space-xs);
}

.story-card a {
    margin-top: auto;
    color: var(--red);
    font-size: 1.5rem;
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    text-transform: uppercase;
}

.video-card {
    justify-content: center;
    background: var(--eben-green);
    color: var(--green-dark);
}

.video-card img {
    width: 80px;
    margin-inline: auto;
    object-fit: contain;
}

/* Impact section: <section class="impact-section">. */
.impact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:20px;
    align-items:stretch;
}

.impact-card {
    display: flex;
    align-items: stretch;
    gap: var(--space-lg);
    height: 100%;
    padding: var(--space-lg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.impact-card:hover,
.impact-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(183, 146, 146, .55);
    box-shadow: var(--shadow-hover);
}

.impact-card img {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    object-fit: contain;
    margin-top: var(--space-xs);
}

.impact-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.impact-card h3 {
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
}

.impact-card p {
    margin-bottom: var(--space-lg);
}

.impact-btn{
    margin-top:auto;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:130px;      /* Same width for every button */
    height:46px;

    padding:0 20px;

    border:2px solid rgba(67, 56, 34, .36);
    border-radius:6px;

    color: #433822;
    background:#fff6e5;

    text-decoration:none;
    text-transform:uppercase;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.5px;

    white-space:nowrap;   /* Prevent wrapping */

    transition:.25s;
}

.impact-btn:hover {
    background: var(--eben-mauve);
    color: var(--eben-cream);
}

.impact-card:hover .impact-btn,
.impact-card:focus-visible .impact-btn {
    background: var(--red);
    color: var(--eben-brown);
}

/* Calculator section: <section class="calculator-section">. */
.calculator-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.calculator {
    padding: var(--space-xl) var(--space-2xl);
    background: var(--red);
    color: var(--white);
}

.calc-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.calc-header h2 {
    font-size: 2rem;
    text-transform: uppercase;
}

.calc-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.calc-circle {
    width: 170px;
    height: 170px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--white);
    border-radius: 50%;
}

.calc-circle span {
    color: var(--red-bright);
    font-size: 3rem;
    font-weight: 700;
}

.calc-details {
    flex: 1;
    min-width: 300px;
}

.calc-input label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 700;
}

.calc-input input {
    width: 180px;
    padding: var(--space-xs) var(--space-sm);
    border: 0;
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    font-weight: 700;
}

.calc-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-lg);
    margin: var(--space-sm) 0;
    font-size: 1.2rem;
}

.calc-row.total {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(255,255,255,.4);
    font-size: 1.35rem;
    font-weight: 700;
}

.calc-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: var(--space-xl);
    padding: var(--space-md) var(--space-xl);
    background: var(--white);
    color: var(--red-bright);
    border-radius: var(--radius-md);
    font-weight: 700;
    text-transform: uppercase;
    transition: background .25s ease, transform .25s ease;
}

.calc-button:hover {
    background: #f3f3f3;
    transform: translateY(-2px);
}

.testimonial {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-2xl);
    background: var(--white);
}

.quote-icon {
    color: var(--red);
    font-size: 64px;
    line-height: 1;
    margin-bottom: var(--space-lg);
}

.testimonial-text {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: var(--space-xl);
}

.testimonial-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
}

.testimonial-footer img {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    object-fit: cover;
}

/* =========================================================
   NEWSLETTER SECTION
   ========================================================= */

.newsletter__inner {
    display: grid;
    grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.5fr);
    align-items: start;
    gap: var(--space-5);
    padding: var(--space-4);
    background: var(--color-green-dark);
    color: var(--color-white);
    border-radius: var(--radius-md);
}

.newsletter__message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.newsletter__icon {
    width: 70px;
    flex: 0 0 auto;
}

.newsletter__message h2 {
    margin: 0;
    font-size: 28px;
    text-transform: uppercase;
}

.newsletter__message p {
    margin: 0;
}

/* =========================================================
   04. FOOTER
   ========================================================= */
.site-footer {
    margin-top: 0;
    background: var(--white);
    font-size: 15px;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr 1.2fr;
    gap: var(--space-2xl);
    align-items: start;
    padding: var(--space-3xl) 0 var(--space-xl);
}

.site-footer__brand img {
    width: 250px;
    margin-bottom: var(--space-lg);
}

.site-footer__brand p {
    color: var(--muted);
    font-weight: 700;
}

.site-footer h4 {
    margin-bottom: var(--space-md);
    color: #000;
    font-size: 15px;
    text-transform: uppercase;
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.site-footer__links a,
.site-footer__contact p {
    color: var(--text);
}

.site-footer__links a:hover {
    color: var(--red);
}

.site-footer__social {
    display: flex;
    gap: var(--space-sm);
}

.site-footer__social img {
    width: 34px;
    height: 34px;
}

.site-footer__quote img {
    width: 620px;
}

.site-footer__bottom {
    background: var(--eben-periwinkle);
    color: var(--eben-brown);
    border-top: 1px solid rgba(67, 56, 34, 0.14);
    padding: var(--space-md) 0;
}

.site-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
    font-size: 18px;
}

/* Responsive layout adjustments. */
@media (max-width: 1000px) {
    .stats-grid,
    .stories-grid,
    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .calculator-wrapper {
        grid-template-columns: 1fr;
    }

    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .site-header__inner,
    .main-nav,
    .hero__actions,
    .newsletter__message,
    .site-footer__bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    .site-brand img {
        width: 280px;
    }

    .stats-grid,
    .stories-grid,
    .impact-grid,
    .services-grid,
    .story-grid,
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .calc-input input {
        width: 100%;
    }

    .calculator,
    .testimonial,
    .panel {
        padding: var(--space-xl) var(--space-lg);
    }

    /* Story 1 hero readability on phones */
    .hero--story-1 {
        --hero-overlay: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.94) 48%,
            rgba(255, 255, 255, 0.72) 68%,
            rgba(255, 255, 255, 0.20) 88%,
            rgba(255, 255, 255, 0) 100%
        );
        background-position: 58% center;
    }

    .hero--story-1 .hero__content {
        width: 78%;
    }

    .hero--story-1 .hero__text {
        font-size: 1.05rem;
        line-height: 1.55;
    }
}


.calc-button span{
    flex:1;
    line-height:1.3;
}

.calc-button img{
    width:40px;      /* Adjust as needed */
    height:40px;
    flex-shrink:0;
}


.footer-certifications{
    display:flex;
    align-items:center;
    gap:18px;
}

.ein-number{
    font-weight:600;
    white-space:nowrap;
}

.candid-logo{
    height:89px;      /* Reduce from the current size */
    width:auto;
    opacity:.95;
}


/* =========================================================
   06. SHARED INTERIOR-PAGE COMPONENTS
   ========================================================= */
.videos-main{
    padding:34px 0 0;
    background:#fff;
}

.videos-layout{
    display:grid;
    grid-template-columns:minmax(0, 1.25fr) minmax(60px, .95fr);
    gap:42px;
    align-items:start;
}

.eyebrow-heading{
    font-family:"Playfair Display", serif;
    color:var(--eben-red);
    font-size:1.25rem;
    letter-spacing:.02em;
    text-transform:uppercase;
    margin:0 0 14px;
}





.featured-video-copy h2{
    margin:14px 0 6px;
    font-size:1.25rem;
}

.featured-video-copy p{
    margin:0;
    color:var(--eben-muted);
    line-height:1.55;
}

.video-list{
    display:flex;
    flex-direction:column;
    background:#fff;
}

.video-link{
    display:grid;
    grid-template-columns:58px 1fr 20px;
    gap:18px;
    align-items:center;
    padding:12px 4px 12px 0;
    border-bottom:1px solid var(--eben-line);
    color:var(--eben-text);
    text-decoration:none;
    transition:background .18s ease, transform .18s ease;
}

.video-link:hover{
    background:var(--eben-soft);
    transform:translateX(3px);
}

.question-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: var(--eben-cream);
    display: grid;
    place-items: center;
    color: var(--eben-red);
}

.question-icon--plain {
    background: transparent;
}
.question-icon svg{
    width:32px;
    height:32px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.video-link span{
    font-size:1rem;
    line-height:1.4;
    font-weight:500;
}

.arrow{
    color:var(--eben-red);
    font-size:1.5rem;
}

.help-strip{
    margin-top:16px;
    background:linear-gradient(90deg, var(--eben-green), var(--eben-cream));
    border-radius:8px;
    padding:16px 16px;
    display:grid;
    grid-template-columns:58px 1fr auto;
    gap:18px;
    align-items:center;
}

.help-strip .help-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--eben-green);
}

.help-strip svg{
    width:44px;
    height:44px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.7;
}

.help-strip strong{
    display:block;
    font-size:1.05rem;
}

.help-strip span{
    color:var(--eben-muted);
}


.question-cta{
    margin-top:10px;
    background:var(--eben-periwinkle);
    color:var(--eben-brown);
}

.question-cta-inner{
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}

.question-cta-message{
    display:flex;
    background:var(--eben-periwinkle);
    color:var(--eben-brown);
    align-items:center;
    gap:22px;
    flex:1;
    min-width:0;
}

.question-cta-message h2,
.question-cta-message p{
    white-space:nowrap;
}

.question-cta svg{
    width:42px;
    height:42px;
    stroke:var(--eben-brown);
    fill:none;
    stroke-width:1.8;
}

.question-cta h2{
    margin:0;
    font-family:"Playfair Display", serif;
    font-size:1.6rem;
    color:var(--eben-brown);
}

.question-cta p{
    margin:0;
    color:var(--eben-charcoal);
    line-height:1.5;
}


/* Stack the question CTA before the message and button become crowded. */
@media (max-width:1200px){
    .question-cta-inner,
    .question-cta-message{
        flex-direction:column;
        text-align:center;
        justify-content:center;
    }

    .question-cta-inner{
        padding-top:16px;
        padding-bottom:16px;
    }

    .question-cta-message h2,
    .question-cta-message p{
        white-space:normal;
    }
}

@media (max-width:950px){
    .videos-layout{
        grid-template-columns:1fr;
        display:grid;
    }

    .breadcrumb{
        display:none;
    }

    .videos-layout{
        gap:32px;
    }

    .help-strip{
        grid-template-columns:1fr;
        text-align:center;
        justify-items:center;
    }

    .question-cta-inner,
    .question-cta-message{
        flex-direction:column;
        text-align:center;
        justify-content:center;
    }
.question-cta {
    padding-bottom: 2.5rem;
}
    .question-cta-message h2,
    .question-cta-message p{
        white-space:normal;
    }
}

@media (max-width:680px){
.video-link{
        grid-template-columns:48px 1fr 16px;
        gap:12px;
    }

    .question-icon{
        width:46px;
        height:46px;
    }

}



/* =========================================================
   07. ABOUT PAGE
   ========================================================= */
.about-intro-grid,
        .name-grid,
        .serve-grid,
.stewardship-grid {
    align-items: stretch;
}

.stewardship-grid > .content-card {
    height: 100%;
}

.stewardship-grid > .content-card .btn {
    margin-top: auto;
}
        .content-card {
            background: #fff;
            border-radius: 22px;
            padding: 34px;
            box-shadow: 0 15px 45px rgba(0,0,0,.08);
        }

        .content-card h2,
        .section-heading h2 {
            font-family: "Playfair Display", serif;
        }

        .content-card h2 {
            color: var(--eben-mauve);
            font-size: clamp(2rem, 4vw, 3.2rem);
            line-height: 1;
            margin-top: 0;
        }

        .content-card p {
            color: var(--eben-charcoal);
            line-height: 1.75;
        }

        .image-card {
            overflow: hidden;
            border-radius: 22px;
            min-height: 360px;
            background: var(--eben-pink);
            box-shadow: 0 15px 45px rgba(0,0,0,.08);
        }

        .image-card img {
            width: 100%;
            height: 100%;
            min-height: 360px;
            object-fit: cover;
            display: block;
        }

        .value-grid,
        .difference-grid,
        .program-grid,
        .leadership-grid,
        .partner-grid {
            display: grid;
            gap: 22px;
        }

        .value-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .difference-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .program-grid {
            grid-template-columns: repeat(7, 1fr);
        }

        .leadership-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .about-card,
        .difference-card,
        .program-step,
        .leader-card,
        .partner-card {
            background: #fff;
            border-radius: 18px;
            padding: 26px;
            box-shadow: 0 12px 34px rgba(0,0,0,.07);
        }

        .about-card img,
        .difference-card img {
            width: 64px;
            height: 64px;
            object-fit: contain;
            margin-bottom: 16px;
        }

        .about-card h3,
        .difference-card h3,
        .program-step h3,
        .leader-card h3,
        .partner-card h3 {
            color: var(--eben-mauve);
            margin: 0 0 10px;
        }

        .about-card p,
        .difference-card p,
        .program-step p,
        .leader-card p,
        .partner-card p {
            color: var(--eben-charcoal);
            line-height: 1.65;
            margin: 0;
        }

        .difference-card--wide {
            padding: 32px;
        }

        .feature-icon-pair {
            display: flex;
            gap: 12px;
            margin-bottom: 18px;
        }

        .difference-card .feature-icon-pair img {
            margin-bottom: 0;
        }

        .help-feature-grid {
            align-items: stretch;
        }

        .help-feature {
            padding: 32px;
        }

        .help-feature__icons {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .help-feature__icons img {
            width: 58px;
            height: 58px;
            object-fit: contain;
        }

        .help-feature h3 {
            color: var(--eben-mauve);
            font-size: 1.35rem;
            margin: 0 0 12px;
        }

        .help-feature p {
            color: var(--eben-charcoal);
            line-height: 1.7;
            margin: 0;
        }

        .name-section {
            background: var(--eben-gray-white);
        }

    .stone-mark {
    min-height: 350px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--eben-pink);
    box-shadow: inset 0 0 0 1px rgba(183, 146, 146, .18);
}

 .stone-mark img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    object-fit: cover;
    display: block;
}

        .serve-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            padding: 0;
            margin: 24px 0 0;
            list-style: none;
        }

        .serve-list li {
            background: var(--eben-gray-white);
            border-radius: 999px;
            padding: 12px 16px;
            color: var(--eben-charcoal);
            font-weight: 700;
        }

        .program-step {
            position: relative;
            text-align: center;
            padding: 20px 16px 24px;
            align-items: center;
        }

        .journey-step-icon {
            width: 100%;
            max-width: 150px;
            aspect-ratio: 1 / 1;
            object-fit: contain;
            margin: 0 auto 14px;
        }

        .program-step p {
            margin-top: 0;
        }

        .leadership-section,
        .partner-section {
            background: var(--eben-gray-white);
        }

        .leader-card img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 14px;
            background: var(--eben-pink);
            margin-bottom: 18px;
        }

        .partner-grid {
            grid-template-columns: repeat(5, 1fr);
        }

        .partner-card {
            min-height: 120px;
            display: grid;
            place-items: center;
            text-align: center;
            font-weight: 700;
        }

        .cta-band {
            background: linear-gradient(135deg, var(--eben-mauve), #967676);
            color: #fff;
            border-radius: 26px;
            padding: 54px;
            text-align: center;
        }

        .cta-band h2 {
            font-family: "Playfair Display", serif;
            font-size: clamp(2rem, 4vw, 3.5rem);
            margin: 0 0 14px;
        }

        .cta-band p {
            max-width: 720px;
            margin: 0 auto 28px;
            line-height: 1.7;
        }

        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        @media (max-width: 1000px) {
            .about-intro-grid,
            .name-grid,
            .serve-grid,
            .stewardship-grid {
                grid-template-columns: 1fr;
            }

            .value-grid,
            .difference-grid,
            .help-feature-grid,
            .program-grid,
            .leadership-grid,
            .partner-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .value-grid,
            .difference-grid,
            .help-feature-grid,
            .program-grid,
            .leadership-grid,
            .partner-grid,
            .serve-list {
                grid-template-columns: 1fr;
            }
.cta-band {
                padding: 34px 22px;
            }
        }


/* =========================================================
   08. STORY PAGES
   ========================================================= */
/* Page-specific styles for Sarah's Story. Add these to style.css when finalized. */
.story-page-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 340px;
            gap: 34px;
            align-items: start;
        }

        .story-article,
        .story-sidebar-card,
        .pull-quote,
        .story-cta-box {
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 18px 45px rgba(36, 28, 26, .08);
        }

        .story-article {
            padding: clamp(30px, 5vw, 58px);
        }

        .story-article .lead {
            color: var(--eben-charcoal);
            font-size: 1.25rem;
            line-height: 1.75;
        }

        .story-article h2 {
            margin: 42px 0 12px;
            color: var(--eben-mauve);
            font-family: "Playfair Display", serif;
            font-size: 2.2rem;
        }

        .story-article p {
            color: var(--eben-charcoal);
            font-size: 1.04rem;
            line-height: 1.85;
        }

        .story-photo-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            margin: 36px 0;
        }

.story-photo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 12px 0;
}

.wide-story-photo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    object-fit: initial;
    margin: 32px 0 8px;
}

        .wide-story-photo {
            height: 340px;
            margin: 32px 0 8px;
        }

        .pull-quote {
            margin: 38px 0;
            padding: 34px;
            border-left: 8px solid var(--eben-mauve);
            color: var(--eben-mauve);
            font-family: "Playfair Display", serif;
            font-size: clamp(1.8rem, 4vw, 2.8rem);
            line-height: 1.2;
        }

        .story-sidebar {
            position: sticky;
            top: 110px;
            display: grid;
            gap: 20px;
        }

        .story-sidebar-card {
            padding: 26px;
        }

        .story-sidebar-card h3 {
            margin: 0 0 16px;
            color: var(--eben-mauve);
            font-size: 1.35rem;
        }

        .story-sidebar-card ul {
            margin: 0;
            padding-left: 0;
            list-style: none;
        }

        .story-sidebar-card li {
            margin: 10px 0;
            padding-left: 28px;
            position: relative;
            color: var(--eben-charcoal);
            line-height: 1.5;
        }

        .story-sidebar-card li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--eben-green);
            font-weight: 700;
        }

        .verse-card {
            background: var(--eben-gray-white);
            border: 1px solid rgba(183, 146, 146, .28);
        }

        .verse-card p {
            margin: 0;
            color: var(--eben-charcoal);
            font-style: italic;
            line-height: 1.7;
        }

        .verse-card span {
            display: block;
            margin-top: 12px;
            color: var(--eben-mauve);
            font-weight: 700;
        }

        .helped-icons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .helped-icons div {
            background: #f7f7f5;
            border-radius: 12px;
            padding: 14px 10px;
            text-align: center;
            font-size: .9rem;
            font-weight: 700;
        }

        .helped-icons img {
            display: block;
            width: 54px;
            height: 54px;
            object-fit: contain;
            margin: 0 auto 8px;
        }

        .story-timeline {
            margin: 34px 0;
            border-left: 4px solid var(--eben-mauve);
            padding-left: 24px;
        }

        .timeline-item {
            margin-bottom: 22px;
            position: relative;
        }

        .timeline-item::before {
            content: "";
            position: absolute;
            left: -35px;
            top: 6px;
            width: 16px;
            height: 16px;
            background: var(--eben-mauve);
            border: 4px solid var(--eben-gray-white);
            border-radius: 50%;
        }

        .timeline-item strong {
            display: block;
            color: var(--eben-mauve);
            font-size: 1.1rem;
        }

        .story-cta-box {
            padding: 44px;
            text-align: center;
            background: linear-gradient(135deg, var(--eben-mauve), #967676);
            color: #fff;
        }

        .story-cta-box h2 {
            margin: 0 0 14px;
            font-family: "Playfair Display", serif;
            font-size: clamp(2rem, 4vw, 3.3rem);
        }

        .story-cta-box p {
            max-width: 700px;
            margin: 0 auto 28px;
            font-size: 1.1rem;
            line-height: 1.7;
        }

        .more-stories-section {
            background: var(--eben-gray-white);
        }

        @media (max-width: 980px) {
            .story-page-grid {
                grid-template-columns: 1fr;
            }

            .story-sidebar {
                position: static;
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 720px) {
.story-photo-row,
            .story-sidebar {
                grid-template-columns: 1fr;
            }
}


/* ===== Accessible responsive navigation shared by all pages ===== */

.nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    margin: 5px 0;
    border-radius: 3px;
    background: var(--red);
    transition: transform .25s ease, opacity .25s ease;
}

@media (max-width: 900px) {
    .site-header__inner {
        flex-direction: row;
        text-align: left;
        min-height: 70px;
    }

    .site-brand img {
        width: min(220px, 68vw);
    }

    .nav-toggle {
        display: block;
        flex-shrink: 0;
    }

    .main-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-sm) 0 var(--space-lg);
        background: var(--eben-green);
        border-top: 1px solid rgba(67, 56, 34, 0.16);
        border-bottom: 1px solid rgba(67, 56, 34, 0.16);
        box-shadow: 0 12px 20px rgba(0,0,0,.10);
    }

    .main-nav.is-open {
        display: flex;
    }

    .main-nav a {
        width: 100%;
        padding: 13px var(--space-lg);
    }

    .main-nav a:hover,
    .main-nav a:focus-visible {
        background: var(--cream);
        color: var(--red);
    }

    .site-nav__donate {
        width: auto;
        margin: var(--space-xs) var(--space-lg) 0;
        padding: 11px var(--space-lg);
        border: 2px solid var(--eben-brown);
        border-radius: var(--radius-sm);
        color: var(--eben-brown);
        text-align: center;
    }

    .nav-toggle.is-open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.is-open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}
/* ==========================================================
   COMING SOON PAGE
   ========================================================== */

.coming-soon-section{
    padding:70px 0;
}

.coming-soon-card{
    max-width:1100px;
    margin:0 auto;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:
        0 18px 45px rgba(0,0,0,.10),
        0 4px 12px rgba(0,0,0,.06);
}

.coming-soon-image{
    display:block;
    width:100%;
    height:auto;
}
/* =========================================================
   PROSPECTIVE MOTHER CONTACT FORM
   ========================================================= */

/* Main page section */

.contact-section {
    padding: clamp(50px, 7vw, 90px) 0;
    background: var(--eben-gray-white);
}


/* Main white form container */

.contact-card {
    width: min(100%, 940px);
    margin-inline: auto;
    padding: clamp(28px, 5vw, 58px);
    background: #ffffff;
    border: 1px solid rgba(48, 41, 37, 0.08);
    border-radius: 20px;
    box-shadow: 0 16px 45px rgba(48, 41, 37, 0.1);
}


/* Introduction */

.contact-intro {
    max-width: 760px;
    margin-bottom: 38px;
}

.contact-intro .eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--eben-mauve);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contact-intro h1 {
    margin: 0 0 15px;
    color: var(--eben-brown);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.08;
}

.contact-intro p {
    max-width: 720px;
    margin: 0;
    color: var(--eben-charcoal);
    font-size: 1.05rem;
    line-height: 1.75;
}


/* Entire form */

.contact-form {
    display: grid;
    gap: 30px;
}


/* Individual numbered form sections */

.form-section {
    min-width: 0;
    margin: 0;
    padding: clamp(22px, 4vw, 36px);
    border: 1px solid #ddd5d0;
    border-radius: 16px;
    background: #ffffff;
}

.form-section legend {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 20px);
    padding: 0 10px;
    color: var(--eben-brown);
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 800;
    line-height: 1.25;
}

.section-number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--eben-mauve);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 800;
}

.section-description {
    max-width: 720px;
    margin: 4px 0 26px;
    color: #6a605b;
    font-size: 0.98rem;
    line-height: 1.65;
}


/* Two-column rows */

.contact-form .form-row {
    display: grid;
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}


/* Individual form field */

.contact-form .form-group {
    display: grid;
    min-width: 0;
    gap: 8px;
    margin-bottom: 20px;
}

.contact-form .form-row .form-group {
    margin-bottom: 0;
}

.contact-form .form-group label {
    color: var(--eben-brown);
    font-size: 0.96rem;
    font-weight: 750;
    line-height: 1.4;
}

.contact-form .required-mark {
    color: var(--eben-mauve);
    font-weight: 800;
}


/* Text fields, email, telephone, select and textarea */

.contact-form .form-group input,
.contact-form .form-group select,
.contact-form .form-group textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1px solid #cfc6c0;
    border-radius: 9px;
    background-color: #ffffff;
    color: var(--eben-brown);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder {
    color: #8a817c;
    opacity: 1;
}

.contact-form .form-group select {
    padding-right: 44px;
    cursor: pointer;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--eben-charcoal) 50%),
        linear-gradient(135deg, var(--eben-charcoal) 50%, transparent 50%);
    background-position:
        calc(100% - 19px) 50%,
        calc(100% - 13px) 50%;
    background-size:
        6px 6px,
        6px 6px;
    background-repeat: no-repeat;
}

.contact-form .form-group textarea {
    min-height: 175px;
    resize: vertical;
}

.contact-form .form-group input:hover,
.contact-form .form-group select:hover,
.contact-form .form-group textarea:hover {
    border-color: #a99f99;
}

.contact-form .form-group input:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus {
    border-color: var(--eben-mauve);
    outline: none;
    box-shadow: 0 0 0 4px rgba(183, 146, 146, 0.22);
}

.contact-form .form-group input:invalid:not(:placeholder-shown),
.contact-form .form-group textarea:invalid:not(:placeholder-shown) {
    border-color: #a53b47;
}


/* Privacy notice */

.privacy-box {
    margin: 6px 0 24px;
    padding: 20px 22px;
    border-left: 5px solid var(--eben-mauve);
    border-radius: 10px;
    background: #f8f3f4;
}

.privacy-box h3 {
    margin: 0 0 8px;
    color: var(--eben-mauve);
    font-size: 1.08rem;
    line-height: 1.3;
}

.privacy-box p {
    margin: 0;
    color: var(--eben-charcoal);
    font-size: 0.94rem;
    line-height: 1.65;
}

.privacy-box p + p {
    margin-top: 10px;
}


/* Permission checkbox */

.contact-form .form-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    margin: 24px 0 12px;
}

.contact-form .form-check input[type="checkbox"] {
    width: 19px;
    height: 19px;
    margin: 3px 0 0;
    accent-color: var(--eben-mauve);
    cursor: pointer;
}

.contact-form .form-check label {
    color: var(--eben-charcoal);
    font-size: 0.96rem;
    line-height: 1.6;
    cursor: pointer;
}


/* Required-field note */

.required-note {
    margin: 0 0 20px;
    color: #716762;
    font-size: 0.86rem;
}


/* Submit button */

.form-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 13px 25px;
    border: 2px solid var(--eben-mauve);
    border-radius: 8px;
    background: var(--eben-mauve);
    color: #ffffff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.form-submit-button:hover {
    border-color: #967676;
    background: #967676;
    box-shadow: 0 7px 18px rgba(116, 42, 52, 0.2);
    transform: translateY(-1px);
}

.form-submit-button:focus-visible {
    outline: 3px solid rgba(183, 146, 146, 0.4);
    outline-offset: 3px;
}

.form-submit-button:active {
    transform: translateY(0);
}


/* Text beneath submit button */

.form-response-note {
    max-width: 670px;
    margin: 16px 0 0;
    color: #716762;
    font-size: 0.9rem;
    line-height: 1.6;
}


/* Netlify spam-protection field */

.hidden-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}


/* Tablet and mobile layout */

@media (max-width: 760px) {

    .contact-section {
        padding: 38px 0;
    }

    .contact-section .wrap {
        width: min(94%, 1180px);
    }

    .contact-card {
        padding: 26px 18px;
        border-radius: 15px;
    }

    .contact-intro {
        margin-bottom: 30px;
    }

    .contact-form {
        gap: 24px;
    }

    .form-section {
        padding: 22px 17px;
        border-radius: 13px;
    }

    .form-section legend {
        align-items: flex-start;
        gap: 9px;
        padding: 0 5px;
    }

    .section-number {
        width: 31px;
        height: 31px;
        font-size: 0.9rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }

    .form-submit-button {
        width: 100%;
    }

}


/* Very small mobile screens */

@media (max-width: 420px) {

    .contact-card {
        padding: 22px 13px;
    }

    .form-section {
        padding: 20px 13px;
    }

    .contact-intro h1 {
        font-size: 1.85rem;
    }

    .form-section legend {
        font-size: 1.17rem;
    }

}


/* Reduced-motion accessibility */

@media (prefers-reduced-motion: reduce) {

    .form-group input,
    .form-group select,
    .form-group textarea,
    .form-submit-button {
        transition: none;
    }

    .form-submit-button:hover {
        transform: none;
    }

}

/* Help page uses the shared hero system above. */
/* Responsive embedded video */




/* =========================================================
   11. VIRTUAL STONE WALL
   ========================================================= */
/* =========================================================
   CAIRN-SHAPED VIRTUAL STONE WALL
   ========================================================= */

/* =========================================================
   CAIRN STONE WALL
   Creates centered rows that become narrower toward the top.
   ========================================================= */

.stone-wall {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;

    padding: 0.75rem 0.25rem 0.25rem;
    overflow: hidden;
}

/*
 * Each row is centered inside the panel.
 * Grid columns automatically share the available row width.
 */
.stone-wall-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    justify-content: center;
    gap: 0.3rem;

    width: 100%;
    max-width: 100%;
}

/*
 * Set progressively narrower widths as the cairn rises.
 * Row 1 is the top because the JavaScript reverses the rows.
 */
.stone-wall-row:nth-child(1) {
    width: 15%;
}

.stone-wall-row:nth-child(2) {
    width: 29%;
}

.stone-wall-row:nth-child(3) {
    width: 43%;
}

.stone-wall-row:nth-child(4) {
    width: 57%;
}

.stone-wall-row:nth-child(5) {
    width: 71%;
}

.stone-wall-row:nth-child(6) {
    width: 79%;
}

.stone-wall-row:nth-child(7) {
    width: 86%;
}

.stone-wall-row:nth-child(8) {
    width: 93%;
}

.stone-wall-row:nth-child(9) {
    width: 100%;
}

/*
 * Stones fill their grid cells rather than using a fixed width.
 * This keeps the cairn inside the panel at all screen sizes.
 */
.stone {
    display: block;

    width: 100%;
    min-width: 0;
    aspect-ratio: 1.35 / 1;

    padding: 0;
    border: 1px solid rgba(96, 79, 62, 0.45);
    border-radius: 44% 52% 40% 48%;

    background:
        linear-gradient(
            145deg,
            #dad3c7,
            #aaa191
        );

    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.55),
        inset 0 -2px 3px rgba(55, 45, 35, 0.18),
        0 2px 3px rgba(36, 28, 22, 0.18);

    transform: rotate(-1deg);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

/*
 * Slight variations keep the cairn from looking like
 * a perfectly uniform brick wall.
 */
.stone--shape-1 {
    border-radius: 50% 42% 48% 38%;
    transform: rotate(-2deg);
}

.stone--shape-2 {
    border-radius: 38% 54% 40% 52%;
    transform: rotate(1.5deg);
}

.stone--shape-3 {
    border-radius: 48% 38% 54% 42%;
    transform: rotate(-0.5deg);
}

.stone--shape-4 {
    border-radius: 42% 48% 36% 55%;
    transform: rotate(2deg);
}

/*
 * Inactive stones remain visible as stone outlines,
 * but they cannot be selected.
 */
.stone:disabled {
    cursor: default;
    opacity: 0.48;
}

/*
 * Activated stones appear illuminated.
 */
.stone--active {
    cursor: pointer;
    opacity: 1;

    background:
        radial-gradient(
            circle at 35% 25%,
            #fff7c7 0%,
            #e5c76f 38%,
            #a97831 100%
        );

    border-color: #9b6b2c;

    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.75),
        0 0 8px rgba(225, 184, 75, 0.7),
        0 3px 4px rgba(45, 34, 22, 0.25);
}

.stone--active:hover,
.stone--active:focus-visible {
    transform: translateY(-2px) scale(1.06);
    z-index: 2;
}

.stone--selected {
    outline: 3px solid var(--eben-mauve);
    outline-offset: 2px;
}

/*
 * Allows the panel and grid column to shrink without
 * being widened by the stones.
 */
.panel,
.grid--2 > * {
    min-width: 0;
}

/*
 * Reduce spacing slightly on narrow screens.
 */
@media (max-width: 600px) {
    .stone-wall {
        gap: 0.2rem;
        padding-inline: 0;
    }

    .stone-wall-row {
        gap: 0.2rem;
    }
}


/* ==========================================
   CLICKABLE IMAGE CARDS
   ========================================== */

.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.card-link .media-frame {
    cursor: pointer;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.card-link:hover .media-frame,
.card-link:focus .media-frame {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

/* ==========================================
   AMAZON WISH LIST CARD
   ========================================== */

.amazon-card {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}

.amazon-card img {
    display: block;
    width: 100%;
    transition: transform .35s ease;
}

/* Overlay */

.amazon-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 2rem;

    background: rgba(0,0,0,.72);

    color: #fff;

    opacity: 0;
    transition: opacity .3s ease;
}

.amazon-overlay-content {
    text-align: center;
    max-width: 90%;
}

.amazon-overlay h3 {
    margin-bottom: .75rem;
    color: #fff;
    font-size: 1.8rem;
}

.amazon-overlay p {
    margin-bottom: 1rem;
    color: rgba(255,255,255,.9);
    line-height: 1.5;
}

.amazon-link {
    display: inline-block;

    padding: .65rem 1.1rem;

    background: var(--eben-mauve);      /* Eben red */

    border-radius: 999px;

    font-weight: 600;
    color: #fff;
}

/* Hover effects */

.card-link:hover .amazon-overlay,
.card-link:focus .amazon-overlay {
    opacity: 1;
}

.card-link:hover .amazon-card img,
.card-link:focus .amazon-card img {
    transform: scale(1.05);
}

@media (hover: none) {

    .amazon-overlay {
        opacity: 1;
        background: rgba(0,0,0,.45);
    }

    .amazon-card img {
        transform: none;
    }
}
/* ==========================================
   NEWSLETTER FORM
   ========================================== */

.newsletter-form {
    width: 100%;
    min-width: 0;
}

.newsletter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    width: 100%;
}

.newsletter-grid .full-width {
    grid-column: 1 / -1;
}

.newsletter-form .form-group {
    display: grid;
    min-width: 0;
    gap: var(--space-1);
}

.newsletter-form label {
    font-weight: 700;
}

.newsletter-form label span {
    font-size: 0.85rem;
    font-weight: 400;
}

.newsletter-form input,
.newsletter-form textarea,
.newsletter-form select {
    width: 100%;
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-white);
    color: var(--color-text);
    font: inherit;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.newsletter-form input:focus,
.newsletter-form textarea:focus,
.newsletter-form select:focus {
    border-color: var(--color-red);
    outline: none;
    box-shadow: 0 0 0 4px rgba(183, 146, 146, 0.22);
}

.newsletter-form textarea {
    min-height: 110px;
    resize: vertical;
}

.newsletter-form .btn--primary {
    width: 100%;
}

.newsletter-consent,
.newsletter-message {
    margin: 0;
}

.newsletter-consent {
    font-size: 0.88rem;
    line-height: 1.5;
}

.newsletter-message:empty {
    display: none;
}

@media (max-width: 800px) {
    .newsletter__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .newsletter__message {
        flex-direction: row;
        text-align: left;
    }

    .newsletter__icon {
        width: 55px;
    }

    .newsletter-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-grid .full-width {
        grid-column: auto;
    }
}
/* Newsletter Success Message */
.newsletter-success {
    text-align: center;
    padding: 2rem 1.5rem;
    background: #f7f7f5;
    border: 2px solid var(--eben-mauve);
    border-radius: 12px;
    animation: fadeIn 0.3s ease;
}

.newsletter-success h3 {
    color: var(--eben-mauve);
    margin-bottom: 0.75rem;
}

.newsletter-success p {
    margin: 0;
    color: #444;
    line-height: 1.6;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.volunteer-cabinet-group {
  display: grid;
  gap: 1rem;

  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 1rem;
  padding: 1.5rem;
}

.volunteer-cabinet-group-heading {
  padding: 0;
}
.volunteer-cabinet-group[data-opportunity-group="encouragement"] {
  border-color: rgba(143, 53, 64, 0.35);
}

.volunteer-cabinet-group[data-opportunity-group="practical"] {
  border-color: rgba(114, 128, 107, 0.45);
}

.volunteer-cabinet-group[data-opportunity-group="events-admin"] {
  border-color: rgba(116, 116, 154, 0.4);
}
.event-graphics-grid {
    display: grid;
    gap: 2rem;
}

.event-graphics-grid .media-frame {
    overflow: hidden;
}


/* Videos page: written question answers until the additional videos are ready */
.video-qa {
    display: grid;
    grid-template-columns: minmax(290px, .9fr) minmax(320px, 1.1fr);
    gap: 24px;
    align-items: stretch;
}

.video-qa .video-list {
    min-width: 0;
}

.video-qa .video-link {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--eben-line);
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.video-qa .video-link:hover,
.video-qa .video-link:focus-visible,
.video-qa .video-link.is-active {
    background: var(--eben-soft);
    transform: translateX(3px);
}

.video-qa .video-link:focus-visible {
    outline: 2px solid var(--eben-red);
    outline-offset: 2px;
}

.video-answer-panel {
    min-height: 100%;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid var(--eben-line);
    border-radius: 12px;
    background: var(--eben-cream);
}

.video-answer[hidden] {
    display: none;
}

.video-answer h3 {
    margin: 0 0 .85rem;
    font-family: "Playfair Display", serif;
    color: var(--eben-brown);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.video-answer p {
    margin: 0;
    line-height: 1.65;
}

.video-answer__future {
    margin-top: 1rem !important;
    padding-top: 1rem;
    border-top: 1px solid var(--eben-line);
    color: var(--eben-muted);
    font-size: .9rem;
}

.video-sidebar .help-strip {
    margin-top: 28px;
}

@media (max-width: 1150px) {
    .video-qa {
        grid-template-columns: 1fr;
    }

    .video-answer-panel {
        min-height: 0;
    }
}

@media (max-width: 680px) {
    .video-answer-panel {
        display: none;
    }

    .video-qa {
        display: block;
    }

    .video-qa .video-link {
        margin: 0;
    }

    .video-qa .video-link + .video-answer {
        display: none;
    }

    .video-sidebar .help-strip {
        margin-top: 32px;
    }
}

@media (max-width: 680px) {
    .video-answer--mobile {
        display: block;
        margin: 0 0 12px;
        padding: 16px;
        border: 1px solid var(--eben-line);
        border-top: 0;
        border-radius: 0 0 10px 10px;
        background: var(--eben-cream);
    }
}


/* Keep the desktop Q&A area stable as answers change */
@media (min-width: 681px) {
    .video-answer-panel {
        height: 485px;
        overflow-y: auto;
    }
}

/* Give the help callout breathing room above and below */
.video-sidebar .help-strip {
    margin-top: 28px;
    margin-bottom: 32px;
}