/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-bark);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; color: var(--color-emerald-900); line-height: 1.15; }
p { margin: 0; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-3xl); position: relative; overflow: clip; }
.section--cream { background: var(--color-cream); }
.section--dark { background: var(--color-emerald-900); color: var(--color-text-on-dark); }
.section--dark h2, .section--dark h3 { color: var(--color-text-on-dark); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brass-dark);
  display: inline-block;
  margin-bottom: var(--space-xs);
}
.section--dark .eyebrow { color: var(--color-brass-light); }

.section-head { max-width: 640px; margin-bottom: var(--space-xl); }
.section-head--center { margin-inline: auto; text-align: center; }

/* Wavy accent underline – used under key words instead of a straight rule */
.underline-accent { position: relative; white-space: nowrap; }
.underline-accent svg { position: absolute; left: 0; bottom: -0.12em; width: 100%; height: 0.3em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.9em 1.6em;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--color-emerald-700); color: var(--color-ivory); }
.btn--primary:hover { background: var(--color-emerald-600); }
.btn--outline { background: transparent; color: var(--color-emerald-900); border-color: var(--color-emerald-900); }
.btn--outline:hover { background: var(--color-emerald-900); color: var(--color-ivory); }
.section--dark .btn--outline { color: var(--color-text-on-dark); border-color: var(--color-border-on-dark); }
.section--dark .btn--outline:hover { background: var(--color-text-on-dark); color: var(--color-emerald-900); }
.btn--brass { background: var(--color-brass); color: var(--color-emerald-900); }
.btn--brass:hover { background: var(--color-brass-light); }

/* ---------- Botanical texture (very low-opacity, reused across pages) ---------- */
.texture-grove {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-repeat: repeat;
  background-size: 220px 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%2312352A' stroke-width='1.4'%3E%3Cpath d='M20 200 C20 140 40 120 30 60'/%3E%3Cpath d='M30 90 C50 85 55 70 50 55'/%3E%3Cpath d='M30 130 C10 125 5 110 10 95'/%3E%3Cpath d='M170 210 C170 150 190 130 180 70'/%3E%3Cpath d='M180 100 C200 95 205 80 200 65'/%3E%3Cpath d='M180 140 C160 135 155 120 160 105'/%3E%3C/g%3E%3C/svg%3E");
}
.section--dark .texture-grove { opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23F1EAD8' stroke-width='1.4'%3E%3Cpath d='M20 200 C20 140 40 120 30 60'/%3E%3Cpath d='M30 90 C50 85 55 70 50 55'/%3E%3Cpath d='M30 130 C10 125 5 110 10 95'/%3E%3Cpath d='M170 210 C170 150 190 130 180 70'/%3E%3Cpath d='M180 100 C200 95 205 80 200 65'/%3E%3Cpath d='M180 140 C160 135 155 120 160 105'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Organic section divider ---------- */
.divider { display: block; width: 100%; height: 64px; margin-top: -1px; }

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--color-emerald-900);
  color: var(--color-ivory); padding: 12px 20px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

@media (max-width: 720px) {
  .section { padding-block: var(--space-2xl); }
}

/* ---------- Scroll reveal (driven by main.js) ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="stagger"] > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-reveal="stagger"].is-visible > * { opacity: 1; transform: none; }
[data-reveal="stagger"].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal="stagger"].is-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-reveal="stagger"].is-visible > *:nth-child(3) { transition-delay: 0.19s; }
[data-reveal="stagger"].is-visible > *:nth-child(4) { transition-delay: 0.26s; }
[data-reveal="stagger"].is-visible > *:nth-child(5) { transition-delay: 0.33s; }

/* ---------- Decorative blobs (scattered across sections for visual life) ---------- */
.deco-blob { position: absolute; border-radius: var(--radius-organic); z-index: 0; pointer-events: none; }
.deco-blob--sm { width: 220px; height: 220px; }
.deco-blob--md { width: 360px; height: 360px; }
.deco-blob--lg { width: 560px; height: 560px; }
.deco-blob--emerald { background: var(--color-emerald-100); opacity: 0.7; }
.deco-blob--brass { background: var(--color-brass-light); opacity: 0.22; }
.deco-blob--outline { background: none; border: 1.5px solid var(--color-brass); opacity: 0.35; }
@media (max-width: 720px) { .deco-blob--lg { width: 340px; height: 340px; } .deco-blob--md { width: 240px; height: 240px; } }