/* palm-terracotta — tropical modern theme */
:root {
  --palm: #183a2c;
  --palm-deep: #10281e;
  --palm-mid: #2c5a44;
  --frond: #6f9a78;
  --sand: #faf6ef;
  --shell: #f2eadc;
  --clay: #f5ddcc;
  --terracotta: #b4512c;
  --terracotta-ink: #9a4122;
  --ink: #23302a;
  --ink-soft: #4d5a53;
  --on-palm: #f3efe4;
  --on-palm-soft: #c9d6cb;
  --sans: "Avenir Next", Avenir, "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --display: "Gill Sans", "Gill Sans MT", "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  --r-soft: 22px;
  --r-leaf: 140px 18px 140px 18px;
  --measure: 66ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--terracotta-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--palm-mid); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 4px; }

/* ---------- leaf ornament ---------- */
.leaf-trio { display: inline-flex; align-items: flex-end; gap: 4px; height: 26px; }
.leaf-trio i {
  display: block; width: 12px; height: 22px;
  background: var(--terracotta);
  border-radius: 0 100% 0 100%;
}
.leaf-trio i:nth-child(1) { transform: rotate(-38deg); background: var(--frond); height: 18px; }
.leaf-trio i:nth-child(3) { transform: rotate(38deg) scaleX(-1); background: var(--frond); height: 18px; }

/* ---------- header ---------- */
.canopy {
  background: var(--palm);
  color: var(--on-palm);
  position: relative;
  padding-bottom: 10px;
}
.canopy::after {
  /* scalloped frond edge */
  content: "";
  position: absolute; left: 0; right: 0; bottom: -11px; height: 12px;
  background: radial-gradient(circle at 12px 0, var(--palm) 11px, transparent 12px) 0 0 / 24px 12px repeat-x;
}
.canopy-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 18px 20px 8px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.brand { display: inline-block; flex-shrink: 0; border-radius: 6px; }
.brand img { height: 34px; width: auto; }
.fronds { width: 100%; overflow-x: auto; scrollbar-width: none; }
.fronds::-webkit-scrollbar { display: none; }
.fronds ul {
  list-style: none; margin: 0; padding: 0 0 4px;
  display: flex; flex-wrap: wrap; gap: 4px 20px;
}
.fronds a {
  color: var(--on-palm);
  text-decoration: none;
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: border-color .2s, color .2s;
}
.fronds a:hover, .fronds a:focus-visible, .fronds a[aria-current] {
  color: #fff; border-bottom-color: var(--terracotta);
}

/* ---------- hero: centred stack ---------- */
.hero {
  max-width: 1240px; margin: 0 auto;
  padding: 56px 20px 24px;
  text-align: center;
}
.hero-head { max-width: 860px; margin: 0 auto; }
.hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--palm);
  margin: 14px 0 34px;
  text-wrap: balance;
}
.hero-frame {
  position: relative;
  max-width: 1160px; margin: 0 auto;
}
.hero-frame::before {
  /* terracotta sun-block offset behind the image */
  content: "";
  position: absolute; z-index: 0;
  right: -10px; bottom: -10px; width: 46%; height: 70%;
  background: var(--clay);
  border-radius: var(--r-soft);
}
.hero-img {
  position: relative; z-index: 1;
  width: 100%; height: clamp(230px, 52vw, 600px);
  object-fit: cover;
  border-radius: 28px 28px 28px 120px;
  box-shadow: 0 24px 50px -30px rgba(16, 40, 30, .55);
}
.hero-intro {
  max-width: 640px; margin: 44px auto 0;
  font-size: 1.15rem; line-height: 1.75; color: var(--ink-soft);
}
.hero-intro p { margin: 0 0 1em; }
.hero-intro p:first-child::first-line { color: var(--ink); }

/* ---------- body sections ---------- */
.grove { max-width: 1240px; margin: 0 auto; padding: 24px 20px 72px; }
.sec { max-width: 760px; margin: 0 auto; padding: 56px 0; position: relative; }
.sec + .sec { border-top: 1px solid rgba(24, 58, 44, .14); }
.sec + .sec::before {
  /* leaf node on the divider */
  content: "";
  position: absolute; top: -8px; left: 50%;
  width: 14px; height: 14px; margin-left: -7px;
  background: var(--terracotta);
  border-radius: 0 100% 0 100%;
  transform: rotate(-45deg);
  box-shadow: 0 0 0 6px var(--sand);
}
.sec-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.45rem, 3.2vw, 2.05rem);
  line-height: 1.22;
  color: var(--palm);
  margin: 0 0 22px;
  text-align: center;
  text-wrap: balance;
}
.sec-body { max-width: var(--measure); margin: 0 auto; }
.sec-body p { margin: 0 0 1.15em; }
.sec-body strong { color: var(--palm); font-weight: 600; }
.sec-body em { color: var(--terracotta-ink); }
.sec-body ul { list-style: none; padding: 0; margin: 0 0 1.3em; }
.sec-body li { position: relative; padding-left: 28px; margin-bottom: .55em; }
.sec-body li::before {
  content: "";
  position: absolute; left: 4px; top: .55em;
  width: 11px; height: 11px;
  background: var(--frond);
  border-radius: 0 100% 0 100%;
}

/* inline-top: title, then image, then prose */
.sec--top .sec-media {
  max-width: 640px; margin: 0 auto 32px;
  padding: 10px;
  background: var(--shell);
  border-radius: 150px 26px 150px 26px;
}
.sec--top .sec-img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-leaf);
}
.sec--top:nth-of-type(even) .sec-media,
.sec--top:nth-of-type(even) .sec-img { border-radius: 26px 150px 26px 150px; }
.sec--top:nth-of-type(even) .sec-img { border-radius: 18px 140px 18px 140px; }

/* plain sections: soft shell panel */
.sec--plain .sec-body { font-size: 1.0625rem; }
.page-index .sec--plain {
  max-width: 900px;
  background: var(--shell);
  border-radius: 34px;
  padding: 56px 24px;
  margin-top: 40px;
  border-top: 0;
}
.page-index .sec--plain::before { display: none; }
.page-support .grove { padding-top: 8px; }

/* ---------- footer ---------- */
.understory {
  background: var(--palm-deep);
  color: var(--on-palm-soft);
  position: relative;
  margin-top: 24px;
}
.understory::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -11px; height: 12px;
  background: radial-gradient(circle at 12px 12px, var(--palm-deep) 11px, transparent 12px) 0 0 / 24px 12px repeat-x;
}
.understory-inner {
  max-width: 1160px; margin: 0 auto;
  padding: 64px 20px 36px;
  display: grid; gap: 36px;
}
.f-name {
  font-family: var(--display);
  font-size: 1.45rem; font-weight: 600;
  color: var(--on-palm);
  margin: 10px 0 14px;
}
.understory address {
  font-style: normal; margin: 0 0 20px; line-height: 1.6;
  display: flex; flex-direction: column;
}
.f-line { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.f-label {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--frond); min-width: 56px;
}
.understory a { color: #f0b796; overflow-wrap: anywhere; }
.understory a:hover { color: #fff; }
.map {
  border-radius: 26px 26px 26px 90px;
  overflow: hidden;
  border: 6px solid var(--palm-mid);
  line-height: 0;
}
.map iframe { display: block; }
.copy {
  margin: 0; padding: 20px;
  text-align: center;
  font-size: .82rem; letter-spacing: .06em;
  color: var(--on-palm-soft);
  border-top: 1px solid rgba(201, 214, 203, .15);
}

/* ---------- breakpoints ---------- */
@media (min-width: 768px) {
  .canopy-inner { flex-direction: row; align-items: center; justify-content: space-between; padding: 22px 32px 12px; }
  .brand img { height: 40px; }
  .fronds { width: auto; }
  .fronds ul { gap: 30px; }
  .hero { padding: 76px 32px 32px; }
  .hero-frame::before { right: -22px; bottom: -22px; }
  .grove { padding: 32px 32px 96px; }
  .sec { padding: 72px 0; }
  .page-index .sec--plain { padding: 64px 56px; }
  .understory-inner { grid-template-columns: 1fr 1.4fr; align-items: center; gap: 56px; padding: 80px 32px 48px; }
}
@media (min-width: 1280px) {
  .hero-img { height: 600px; }
  .hero-intro { font-size: 1.2rem; }
}
@media (min-width: 1600px) {
  body { font-size: 1.125rem; }
  .hero-frame { max-width: 1200px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}