:root {
  /* Warm, muted natural palette — pulled from the photos (sandy arena dirt,
     leather/saddle browns, soft sage greens, overcast barn light) rather than
     stark white/black/bold-brown. */
  --color-bg: #f4efe3;
  --color-bg-alt: #e8ded0;
  --color-bg-card: #fbf8f2;
  --color-text: #3a352c;
  --color-text-muted: #736a5b;
  --color-accent: #8a6f4e;
  --color-accent-dark: #6b563b;
  --color-accent-green: #5f6a52;
  --color-border: #ddd0b8;
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --max-width: 1000px;
  --header-h: 0px; /* header is currently hidden; restore to e.g. 72px if header comes back */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Header */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  padding: 0 1.25rem;
}

.logo {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-accent-dark);
  text-decoration: none;
}

.site-header nav a {
  margin-left: 1.25rem;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.95rem;
}

.site-header nav a:hover {
  color: var(--color-accent);
}

/* Scroll-stacked panels: each panel sticks in place while the next one
   slides up and covers it, creating a "reveal" effect as you scroll. */
.scroll-stack {
  position: relative;
}

.panel {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  /* dvh accounts for mobile browsers showing/hiding their address bar as you
     scroll, so the sticky panels don't jump around on phones. Browsers that
     don't support dvh simply ignore this line and keep the vh value above. */
  height: calc(100dvh - var(--header-h));
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-panel {
  z-index: 1;
  justify-content: center;
  text-align: center;
  color: #fff;
}

/* Hero text: lives in normal document flow (not sticky), so it scrolls away
   like ordinary content while the hero image (sticky, behind it) stays put.
   The negative margin pulls the hero-panel image up underneath it so both
   occupy the same space on initial load. */
.hero-text-overlay {
  position: relative;
  z-index: 2;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  margin-bottom: calc(-1 * (100vh - var(--header-h)));
  margin-bottom: calc(-1 * (100dvh - var(--header-h)));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  pointer-events: none;
}

.hero-text-overlay .container {
  pointer-events: auto;
}

.panel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero-specific: show the photo fully uncropped (contain) so nothing important
   is ever cut off, with a blurred/darkened cover version behind it filling
   any letterbox space. */
.panel-bg-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(35px) brightness(0.6) saturate(110%);
  transform: scale(1.15);
}

.panel-bg-contain {
  object-fit: contain;
}

.panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 22, 15, 0.35), rgba(30, 22, 15, 0.65));
}

.panel-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Small, low-opacity attribution for the hero photo — sits in the corner
   so it doesn't compete with the hero heading/CTA. */
.photo-credit {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.hero-content h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 3.25rem;
  letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
}

.hero-content p {
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto 1.75rem;
}

.split-panel {
  position: relative;
  z-index: 3;
  height: auto;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  overflow: visible;
  /* Override .panel's row-direction flex (used for centering hero/contact) —
     About now stacks its two children (text+image row, then the cards row)
     vertically instead of placing them side by side. */
  flex-direction: column;
  align-items: stretch;
  /* The panel's own background fades from fully transparent at the very top
     edge to fully opaque over ~260px. Since the Hero image stays pinned in
     place underneath while this panel slides up over it, that transparent
     edge always reveals whatever is directly behind it — so the seam
     genuinely blends into the image instead of showing a hard-edged box. */
  background: linear-gradient(
    180deg,
    rgba(244, 239, 227, 0) 0px,
    var(--color-bg) 260px
  );
}

/* Contact panel: full-bleed photo, blending in only at the top (as if the
   About panel above scrolls down into it) — plain see-through form on top.
   Unlike Hero/About, this panel is NOT sticky — it flows normally after
   About in a continuous scroll, rather than sliding over it. */
.contact-panel {
  position: relative;
  top: auto;
  height: auto;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  z-index: 3;
  justify-content: center;
}

.panel-fade {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}

/* Contact readability: a mild overall darkening wash across the whole photo,
   plus a soft dark "spotlight" centered where the form sits — boosts text
   contrast without hiding the photo like a solid overlay would. */
.contact-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(20, 16, 12, 0.32);
}

.contact-spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 55% at 50% 55%,
    rgba(10, 8, 6, 0.55) 0%,
    rgba(10, 8, 6, 0.25) 55%,
    rgba(10, 8, 6, 0) 80%
  );
}

.panel-fade-top {
  top: 0;
  height: 30%;
  background: linear-gradient(180deg, var(--color-bg) 0%, rgba(244, 239, 227, 0) 100%);
}

.contact-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

.contact-content h2 {
  font-family: var(--font-heading);
}

.contact-content h2,
.contact-content p {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.split-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
  /* Keep the heading/content below the ~260px fade zone so text never sits
     on top of the still-fading (partially see-through) part of the panel —
     it should only appear once the background is fully solid. */
  padding-top: 320px;
  padding-bottom: 3rem;
}

.split-panel-reverse .split-inner {
  grid-template-columns: 0.9fr 1.1fr;
}

.split-text {
  padding-right: 0.5rem;
}

.split-text h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.9rem;
  margin-bottom: 1.1rem;
}

.split-image {
  height: 480px;
  max-height: 60vh;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.btn {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn:hover {
  background: var(--color-accent-dark);
}

.muted {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
  padding-bottom: 7rem;
}

.card {
  background: var(--color-bg-card);
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(58, 53, 44, 0.08);
}

.card h3 {
  margin-top: 0;
  font-size: 1.05rem;
  color: var(--color-accent-green);
}

.card p {
  font-size: 0.95rem;
}

/* Below ~tablet, the sticky "slide over" stack effect is kept, but a few
   layout pieces (side-by-side columns, hero heading size) are adjusted for
   narrow screens. */
@media (max-width: 768px) {
  /* Smaller hero heading so the photo behind it stays visible instead of
     being almost entirely covered by oversized text. */
  .hero-content h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .split-inner {
    grid-template-columns: 1fr;
    height: auto;
    padding-top: 2rem;
  }

  .split-panel-reverse .split-inner {
    grid-template-columns: 1fr;
  }

  .split-panel-reverse .split-image {
    order: -1;
  }

  .split-text {
    max-height: none;
    overflow-y: visible;
  }

  .split-image {
    max-height: 320px;
  }

  /* Services / Location / Volunteer Work cards: stack in one column instead
     of staying side-by-side, which is what was forcing horizontal scrolling
     on phones. */
  .cards {
    grid-template-columns: 1fr;
    padding-bottom: 3rem;
  }
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin-top: 1.5rem;
  gap: 0.4rem;
}

.contact-form label {
  font-weight: 600;
  margin-top: 0.6rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
}

.contact-form .btn {
  margin-top: 1.25rem;
  align-self: flex-start;
}

/* Transparent variant used over the Contact panel's background photo:
   labels are light with a shadow for legibility, inputs are see-through
   (no blur) with a light border so they still read clearly on the photo. */
.contact-form-transparent label {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.contact-form-transparent input,
.contact-form-transparent textarea {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #fff;
}

.contact-form-transparent input::placeholder,
.contact-form-transparent textarea::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.hidden-field {
  display: none;
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 2rem 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}