/* =========================================================================
   Gobind Yoga — global stylesheet
   One-page site. Design tokens live in :root. The palette is meant to be
   used boldly — deep plum, burgundy, and terracotta carry real visual
   weight throughout; ivory/apricot are the selective light moments, not
   the default.
   ========================================================================= */

:root {
  /* Brand palette — exact values, do not adjust */
  --color-plum: #33152b;
  --color-burgundy: #63151c;
  --color-gold: #ca934b;
  --color-terracotta: #dfa37e;
  --color-apricot: #f3d2bc;
  --color-ivory: #f7f1ed;

  --font-heading: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  --max-width: 1280px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 5.5rem;

  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-soft: 0 14px 34px rgba(51, 21, 43, 0.22);
  --shadow-deep: 0 20px 48px rgba(51, 21, 43, 0.34);

  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-plum);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

a {
  color: inherit;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--color-burgundy);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
}

h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

h3 {
  font-size: 1.35rem;
  font-weight: 600;
}

p {
  margin: 0 0 var(--space-2);
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  background: var(--color-plum);
  color: var(--color-ivory);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  z-index: 1000;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--space-2);
}

:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

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

section {
  padding: var(--space-6) 0;
  position: relative;
  overflow: hidden;
}

.section-tight {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

/* ---- Section color bands ------------------------------------------------
   Every section declares one of these explicitly. Ivory is intentionally
   absent from this list — it is used only for small selective moments
   (labels, cards, inputs), never as a full section backdrop. */
.band-terracotta {
  background: var(--color-terracotta);
  color: var(--color-plum);
}

.band-plum {
  background: var(--color-plum);
  color: var(--color-apricot);
}

.band-burgundy {
  background: var(--color-burgundy);
  color: var(--color-apricot);
}

.band-apricot {
  background: var(--color-apricot);
  color: var(--color-plum);
}

.band-plum h1, .band-plum h2, .band-plum h3,
.band-burgundy h1, .band-burgundy h2, .band-burgundy h3 {
  color: var(--color-ivory);
}

.band-plum .eyebrow, .band-burgundy .eyebrow {
  color: var(--color-gold);
}

.band-plum .text-link, .band-burgundy .text-link {
  color: var(--color-gold);
}
.band-plum .text-link:hover, .band-burgundy .text-link:hover {
  color: var(--color-ivory);
}

.band-plum .btn-primary, .band-burgundy .btn-primary {
  background: var(--color-ivory);
  color: var(--color-plum);
  border-color: var(--color-ivory);
}
.band-plum .btn-primary:hover, .band-burgundy .btn-primary:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
}
.band-plum .btn-secondary, .band-burgundy .btn-secondary {
  background: transparent;
  color: var(--color-ivory);
  border-color: var(--color-ivory);
}
.band-plum .btn-secondary:hover, .band-burgundy .btn-secondary:hover {
  background: var(--color-ivory);
  color: var(--color-plum);
}

/* Faint tone-on-tone texture — a subtle woven/plaster grain, not a busy
   pattern. Applied as a full-bleed overlay behind section content. */
.texture-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.band-terracotta .texture-dots {
  background-image: radial-gradient(circle, rgba(99, 21, 28, 0.14) 1px, transparent 1.6px);
  background-size: 24px 24px;
  opacity: 0.5;
}
.band-plum .texture-dots {
  background-image: radial-gradient(circle, rgba(202, 147, 75, 0.16) 1px, transparent 1.6px);
  background-size: 26px 26px;
  opacity: 0.6;
}
.band-burgundy .texture-dots {
  background-image: radial-gradient(circle, rgba(247, 241, 237, 0.12) 1px, transparent 1.6px);
  background-size: 26px 26px;
  opacity: 0.5;
}
.band-apricot .texture-dots {
  background-image: radial-gradient(circle, rgba(99, 21, 28, 0.08) 1px, transparent 1.6px);
  background-size: 24px 24px;
  opacity: 0.6;
}

section > .container {
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-burgundy);
  margin-bottom: var(--space-2);
}

.section-intro {
  max-width: 62ch;
}

.section-intro-center {
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.center {
  text-align: center;
}

/* ---- Ornamental dividers -------------------------------------------------- */
.ornament-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 15rem;
  margin: 0 0 var(--space-3);
}

.ornament-rule.center {
  margin-left: auto;
  margin-right: auto;
}

.ornament-rule .line {
  flex: 1;
  height: 2px;
  background: var(--color-gold);
}

.ornament-rule .diamond {
  width: 8px;
  height: 8px;
  background: var(--color-gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.band-plum .ornament-rule .line, .band-plum .ornament-rule .diamond,
.band-burgundy .ornament-rule .line, .band-burgundy .ornament-rule .diamond {
  background: var(--color-gold);
}

/* ---- Buttons & links ---------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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

.btn-primary {
  background: var(--color-plum);
  color: var(--color-ivory);
  border-color: var(--color-plum);
}

.btn-primary:hover {
  background: var(--color-burgundy);
  border-color: var(--color-burgundy);
  color: var(--color-ivory);
}

.btn-secondary {
  background: transparent;
  color: var(--color-plum);
  border-color: var(--color-plum);
}

.btn-secondary:hover {
  background: var(--color-plum);
  color: var(--color-ivory);
}

.btn-gold {
  background: var(--color-burgundy);
  color: var(--color-ivory);
  border-color: var(--color-gold);
}

.btn-gold:hover {
  background: var(--color-gold);
  color: var(--color-plum);
  border-color: var(--color-gold);
}

.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn:hover[aria-disabled="true"] {
  transform: none;
}

.text-link {
  color: var(--color-burgundy);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}

.text-link:hover {
  color: var(--color-plum);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* ---- Header -------------------------------------------------------------- */
.site-header {
  background: var(--color-apricot);
  border-bottom: 3px solid var(--color-gold);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo {
  height: 68px;
  width: auto;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 2px solid var(--color-plum);
  border-radius: var(--radius-md);
  width: 46px;
  height: 46px;
  padding: 0;
  cursor: pointer;
  position: relative;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--color-plum);
}

.nav-toggle-icon {
  top: 22px;
}

.nav-toggle-icon::before {
  top: -7px;
}

.nav-toggle-icon::after {
  top: 7px;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.nav-link {
  text-decoration: none;
  color: var(--color-plum);
  font-weight: 600;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
}

.nav-link:hover {
  border-bottom-color: var(--color-gold);
}

.nav-link.is-active {
  border-bottom-color: var(--color-burgundy);
  font-weight: 700;
}

.nav-link--cta {
  background: var(--color-plum);
  color: var(--color-ivory) !important;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  border-bottom: none !important;
}

.nav-link--cta:hover {
  background: var(--color-burgundy);
}

.nav-link--cta.is-active {
  background: var(--color-burgundy);
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-block;
  }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-apricot);
    border-bottom: 3px solid var(--color-gold);
    display: none;
    box-shadow: var(--shadow-soft);
  }

  .primary-nav.is-open {
    display: block;
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
  }

  .primary-nav li {
    border-bottom: 1px solid rgba(51, 21, 43, 0.15);
  }

  .primary-nav li:last-child {
    border-bottom: none;
  }

  .nav-link {
    display: block;
    padding: 0.85rem 0.2rem;
  }

  .nav-link--cta {
    text-align: center;
    margin-top: var(--space-1);
  }
}

/* ---- Hero: full-bleed integrated photographic composition ------------------
   The photograph is atmospheric background — a glimpse of a busy, active
   Mysore room, not a portrait to preserve at all costs. It's fine for the
   color wash to cover faces and poses freely; the Gobind Yoga logo is the
   star of this composition, centered and enlarged, with the photo simply
   setting the mood behind it. */
.hero-fullbleed {
  padding: 0;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* A fuller, warm wash — the photo reads as backdrop atmosphere rather than
   a sharp discrete image, with a stronger glow concentrated behind the logo
   for maximum contrast. Terracotta-forward throughout so it stays warm
   rather than gray or muddy; burgundy/plum only deepen the outer edges. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(223, 163, 126, 0.92) 0%, rgba(223, 163, 126, 0.75) 45%, rgba(223, 163, 126, 0.5) 70%, rgba(223, 163, 126, 0.32) 100%),
    linear-gradient(165deg, rgba(99, 21, 28, 0.18) 0%, rgba(51, 21, 43, 0.22) 100%);
}

.hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--space-4) 0;
}

.hero-overlay .container {
  max-width: 1820px;
  margin: 0 auto;
  text-align: center;
}

/* Enlarged 2-3x over its prior hero size and centered — the logo now carries
   all the visual weight a headline would. The heading text itself lives in
   a visually-hidden <h1> in the markup so the title is still communicated
   in code, not only through the image. */
.hero-logo-mark {
  display: block;
  width: clamp(760px, 88vw, 1760px);
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--space-3);
  filter: drop-shadow(0 4px 16px rgba(51, 21, 43, 0.4));
}

.hero-eyebrow {
  color: var(--color-burgundy);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: var(--space-3);
}

.hero-fullbleed .button-row {
  justify-content: center;
}

.hero-fullbleed .btn {
  padding: 0.6rem 1.3rem;
  font-size: 0.88rem;
}

/* Portrait phones and tablets crop the wide photo down to a narrow slice.
   Swaran's head sits at ~74% across the photo, so the default centered
   crop cuts it off. Shift the crop toward her, and move the logo and
   buttons (with their glow) to the lower part of the banner so her face
   isn't hidden behind them. */
@media (max-width: 900px) and (orientation: portrait) {
  .hero-fullbleed {
    align-items: flex-end;
  }

  .hero-bg {
    object-position: 85% 55%;
  }

  .hero-scrim {
    background:
      radial-gradient(75% 45% at 50% 74%, rgba(223, 163, 126, 0.92) 0%, rgba(223, 163, 126, 0.75) 45%, rgba(223, 163, 126, 0.42) 75%, rgba(223, 163, 126, 0.18) 100%),
      linear-gradient(165deg, rgba(99, 21, 28, 0.18) 0%, rgba(51, 21, 43, 0.22) 100%);
  }
}

@media (max-width: 560px) {
  .hero-fullbleed {
    min-height: 82vh;
  }

  .hero-logo-mark {
    width: clamp(280px, 88vw, 460px);
  }
}

/* ---- Ornamental photo frame ----------------------------------------------
   Two treatments: full (hero — plum outer frame, gold inner border, arched
   top) and simple (About/Training/Ashtanga — a single gold border, no arch). */
.photo-frame {
  position: relative;
}

.photo-frame__inner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

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

/* ---- Two-column content layouts -------------------------------------------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

/* ---- Credentials timeline -------------------------------------------------- */
.credential-timeline {
  max-width: 62ch;
}

.credential-timeline-item {
  position: relative;
  padding-left: 2.25rem;
  padding-bottom: var(--space-4);
}

.credential-timeline-item::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 26px;
  bottom: -8px;
  width: 2px;
  background: rgba(202, 147, 75, 0.55);
}

.credential-timeline-item:last-child {
  padding-bottom: 0;
}

.credential-timeline-item:last-child::before {
  display: none;
}

.credential-timeline-item::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-burgundy);
  border: 2px solid var(--color-gold);
}

.credential-title {
  color: var(--color-ivory);
  margin-bottom: 0.2rem;
}

.credential-teacher {
  color: var(--color-terracotta);
  font-weight: 600;
  margin: 0;
}

/* ---- Ashtanga section ornament ---------------------------------------------- */
.definition-block {
  background: var(--color-burgundy);
  color: var(--color-ivory);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-gold);
}

.definition-block p {
  margin: 0;
  font-size: 1.1rem;
  font-family: var(--font-heading);
  font-style: italic;
}

.accent-underline {
  display: inline-block;
  padding-bottom: 0.3rem;
  border-bottom: 3px solid var(--color-terracotta);
}

/* ---- Practice panels -------------------------------------------------------- */
.practice-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}

@media (max-width: 940px) {
  .practice-panels {
    grid-template-columns: 1fr;
  }
}

.practice-panel {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
}

.practice-panel-label {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: var(--space-2);
  width: fit-content;
}

.practice-panel--terracotta {
  background: var(--color-terracotta);
  color: var(--color-plum);
}
.practice-panel--terracotta h3 { color: var(--color-plum); }
.practice-panel--terracotta .practice-panel-label {
  background: var(--color-plum);
  color: var(--color-terracotta);
}

.practice-panel--apricot {
  background: var(--color-apricot);
  color: var(--color-plum);
  border: 2px solid var(--color-plum);
}
.practice-panel--apricot h3 { color: var(--color-plum); }
.practice-panel--apricot .practice-panel-label {
  background: var(--color-plum);
  color: var(--color-apricot);
}

.practice-panel--burgundy {
  background: var(--color-burgundy);
  color: var(--color-apricot);
}
.practice-panel--burgundy h3 { color: var(--color-ivory); }
.practice-panel--burgundy .practice-panel-label {
  background: var(--color-gold);
  color: var(--color-plum);
}

.practice-panel-schedule {
  display: grid;
  gap: 0.5rem;
  margin: var(--space-2) 0;
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(51, 21, 43, 0.2);
  border-bottom: 1px solid rgba(51, 21, 43, 0.2);
}

.practice-panel--burgundy .practice-panel-schedule {
  border-color: rgba(247, 241, 237, 0.25);
}

.schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.schedule-row .marker-day {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.schedule-row .marker-day::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--color-gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.practice-panel-note {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-bottom: var(--space-2);
}

.practice-panel-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.practice-panel .btn-primary {
  background: var(--color-plum);
  color: var(--color-ivory);
  border-color: var(--color-plum);
}
.practice-panel--burgundy .btn-primary {
  background: var(--color-ivory);
  color: var(--color-plum);
  border-color: var(--color-ivory);
}
.practice-panel--burgundy .btn-primary:hover {
  background: var(--color-gold);
}
.practice-panel .text-link {
  color: var(--color-plum);
}
.practice-panel--burgundy .text-link {
  color: var(--color-gold);
}
.practice-panel--burgundy .text-link:hover {
  color: var(--color-ivory);
}

/* ---- Gallery ----------------------------------------------------------------
   Justified rows: each tile's flex-grow and flex-basis are proportional to its
   photo's aspect ratio (--ratio, set inline), so every tile in a row ends up
   the same height and each photo is shown whole rather than cover-cropped. */
.gallery-grid {
  --row-height: 300px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.gallery-item {
  flex: var(--ratio) 1 calc(var(--ratio) * var(--row-height));
  aspect-ratio: var(--ratio);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

@media (max-width: 700px) {
  .gallery-grid {
    --row-height: 200px;
    gap: var(--space-2);
  }
}

.gallery-trigger {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.gallery-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.gallery-trigger:hover img {
  transform: scale(1.04);
}

/* ---- Lightbox ---------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(51, 21, 43, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  z-index: 1000;
}

.lightbox.is-open {
  display: flex;
}

.lightbox-figure {
  max-width: min(92vw, 900px);
  max-height: 88vh;
  margin: 0;
  text-align: center;
}

.lightbox-figure img {
  max-height: 74vh;
  width: auto;
  margin: 0 auto;
  border-radius: var(--radius-md);
}

.lightbox-figcaption {
  color: var(--color-ivory);
  margin-top: var(--space-2);
  font-size: 0.95rem;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: rgba(247, 241, 237, 0.14);
  color: var(--color-ivory);
  border: 1px solid rgba(202, 147, 75, 0.6);
  border-radius: 999px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
}

.lightbox-close {
  top: var(--space-3);
  right: var(--space-3);
}

.lightbox-prev {
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: var(--color-gold);
  color: var(--color-plum);
}

/* ---- Contact ------------------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

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

.contact-reasons {
  display: grid;
  gap: var(--space-2);
}

.contact-reason {
  border-left: 3px solid var(--color-gold);
  padding: 0.2rem 0 0.2rem var(--space-2);
}

.contact-reason h3 {
  color: var(--color-plum);
  margin-bottom: 0.15rem;
  font-size: 1.1rem;
}

.contact-card {
  background: var(--color-apricot);
  border: 3px solid var(--color-plum);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-soft);
}

.form-field {
  margin-bottom: var(--space-3);
}

.form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--color-plum);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--color-plum);
  border-radius: var(--radius-md);
  background: var(--color-apricot);
  color: var(--color-plum);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-gold);
  outline: 3px solid var(--color-gold);
  outline-offset: 1px;
}

.form-note {
  background: var(--color-plum);
  color: var(--color-apricot);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: 0.95rem;
  border-left: 4px solid var(--color-gold);
}

.form-status {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-plum);
  color: var(--color-apricot);
  display: none;
}

.form-status.is-visible {
  display: block;
}

/* ---- Footer --------------------------------------------------------------- */
/* Same idea as the hero: a soft warm gradient (not a hard-edged rectangle)
   localized behind the logo so its burgundy wordmark stays legible, while
   the footer stays deep plum everywhere else. The glow lives on
   .footer-brand (not .site-footer) so it stays centered on the logo
   regardless of viewport width, since that block hugs the logo's own size
   rather than spanning the full page. */
.site-footer {
  background: var(--color-plum);
  color: var(--color-apricot);
  border-top: 4px solid var(--color-gold);
  padding: var(--space-5) 0 var(--space-3);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
}

.footer-brand {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-2);
  margin: calc(var(--space-3) * -1) 0 calc(var(--space-3) * -1) calc(var(--space-2) * -1);
}

.footer-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 28% 38%, rgba(223, 163, 126, 0.7) 0%, rgba(223, 163, 126, 0.28) 50%, rgba(223, 163, 126, 0) 78%);
  z-index: 0;
  pointer-events: none;
}

.footer-brand > * {
  position: relative;
  z-index: 1;
}

.footer-logo {
  height: 60px;
  width: auto;
  margin-bottom: var(--space-2);
}

.footer-tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-ivory);
  margin-bottom: 0.15rem;
}

.footer-serving {
  margin-bottom: 0;
  font-weight: 500;
}

.footer-nav ul {
  display: grid;
  gap: 0.5rem;
}

.footer-nav a {
  text-decoration: none;
  font-weight: 600;
  color: var(--color-apricot);
}

.footer-nav a:hover {
  text-decoration: underline;
  color: var(--color-gold);
}

.footer-social {
  display: flex;
  gap: var(--space-2);
}

.footer-social a {
  text-decoration: underline;
}

.footer-copyright {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(247, 241, 237, 0.2);
  font-size: 0.88rem;
  color: var(--color-apricot);
}

/* ---- Misc ------------------------------------------------------------------- */
.stack-lg > * + * {
  margin-top: var(--space-4);
}

.notice-banner {
  background: var(--color-plum);
  color: var(--color-apricot);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 500;
  border-left: 4px solid var(--color-gold);
}

/* Not currently rendered on the page (no approved testimonials yet — see
   CONTENT_NEEDED.md) but kept ready: js/components.js#renderTestimonialCard
   targets these classes. */
.testimonial-card {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-apricot);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-lg);
  color: var(--color-plum);
}

.testimonial-quote {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-style: italic;
}

.testimonial-attribution {
  font-weight: 700;
  font-style: normal;
}