/* Transitions Acres — prototype design system
   STRICT 4-color brand palette (per Alisha):
   - #F7EEE7  cream         (page background)
   - #C6AFBD  soft plum     (tints, badges, hover states)
   - #9E7793  plum          (logo, accents, eyebrows, secondary buttons)
   - #513E34  warm brown    (type, headings, body, primary buttons, dark sections)
   Plus white. No teal, gold, green, or caramel.
   Type: Cormorant Garamond (headings) + Noto Sans (body) + Syncopate (nav) + Lato (buttons).
   Plain CSS, mobile-first. */

:root {
  /* ---- BRAND PALETTE — exactly four colors + white (per spec) ---- */
  --cream:     #F7EEE7;   /* page background */
  --plum-soft: #C6AFBD;   /* soft tints, hover states, badges */
  --plum:      #9E7793;   /* logo / accents / eyebrows / secondary buttons */
  --brown:     #513E34;   /* type, headings, body, primary buttons, dark sections */

  /* ---- Necessary functional derivatives (minimal) ---- */
  --paper:     #FFFCF6;   /* card surface — a touch warmer than white */
  --brown-dk:  #3A2C24;   /* hover state for primary brown */
  --plum-dk:   #82607A;   /* hover state for plum */
  --muted:     #76675C;   /* faded brown for secondary text */
  --line:      #D9CCBE;   /* warm border line */

  /* ---- Legacy aliases so I don't have to touch every rule ---- */
  --teal:      var(--brown);
  --teal-2:    var(--plum);
  --teal-dk:   var(--brown-dk);
  --espresso:  var(--brown);
  --clay:      var(--plum);
  --clay-dk:   var(--plum-dk);
  --green:     var(--plum);
  --gold:      var(--plum);
  --ink:       var(--brown);
  --pine:      var(--brown);
  --forest:    var(--brown);
  --sage:      var(--plum-soft);
  --aqua:      var(--plum-soft);

  --maxw: 1180px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 6px 22px rgba(81, 62, 52, 0.08);
  --shadow-lg: 0 20px 48px rgba(81, 62, 52, 0.16);

  --font: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --flair: "Rye", "Cormorant Garamond", Georgia, serif;
  --nav: "Syncopate", "Noto Sans", sans-serif;
  --btn: "Lato", "Noto Sans", sans-serif;

  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --step-0: clamp(1.04rem, 1.0rem + 0.2vw, 1.14rem);
  --step-1: clamp(1.3rem, 1.16rem + 0.6vw, 1.7rem);
  --step-2: clamp(1.9rem, 1.5rem + 1.6vw, 2.9rem);
  --step-3: clamp(2.4rem, 1.85rem + 2.4vw, 3.9rem);
  --step-4: clamp(3rem, 2.1rem + 4vw, 5.4rem);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--head); line-height: 1.04; font-weight: 600;
  letter-spacing: 0; color: var(--teal);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
.eyebrow {
  font-family: var(--font); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: var(--step--1); color: var(--clay);
}
.flair { font-family: var(--flair); font-weight: 400; letter-spacing: .01em; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.container--narrow { max-width: 820px; }
.section { padding-block: clamp(46px, 8vw, 96px); }
.section--tint { background: var(--paper); }
.section--sage { background: var(--plum-soft); }
.lead { font-size: var(--step-1); color: var(--muted); line-height: 1.5; }
.center { text-align: center; }
.measure { max-width: 64ch; margin-inline: auto; }

/* Buttons — Lato, espresso (matches the original site) */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--btn); font-weight: 700; letter-spacing: 0.01em;
  font-size: 1rem; line-height: 1;
  padding: 15px 28px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  text-decoration: none; text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--espresso); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: #3A2C24; color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }
.btn--dark { background: var(--teal); color: #fff; }
.btn--dark:hover { background: var(--teal-dk); color: #fff; }
.btn--outline { background: transparent; color: var(--espresso); border-color: var(--espresso); }
.btn--outline:hover { background: var(--espresso); color: #fff; }
.btn--light { background: var(--cream); color: var(--espresso); box-shadow: var(--shadow); }
.btn--light:hover { background: #fff; color: var(--espresso); }
.btn--sm { padding: 11px 18px; font-size: .92rem; }
.btn--block { width: 100%; justify-content: center; }
/* On dark backgrounds, the solid espresso primary needs to invert to read */
.hero .btn--primary, .cta-band .btn--primary { background: var(--cream); color: var(--espresso); }
.hero .btn--primary:hover, .cta-band .btn--primary:hover { background: #fff; color: var(--espresso); }
.footer .btn--outline { color: var(--cream); border-color: rgba(247,238,231,.5); }
.footer .btn--outline:hover { background: var(--cream); color: var(--espresso); }

/* ---------- Header / Nav ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 238, 231, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--teal); }
.brand:hover { text-decoration: none; }
.brand img { height: 58px; width: auto; }
.brand .name { font-family: var(--head); font-weight: 600; font-size: 1.34rem; line-height: 1; }
.nav-links { display: none; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .btn { display: none; }
.nav-toggle { color: var(--teal); background: none; border: 0; padding: 8px; cursor: pointer; }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 72px 0 0 0; z-index: 49;
  background: var(--espresso); padding: 22px 22px 40px; overflow-y: auto;
  transform: translateX(100%); transition: transform .25s ease;
}
.drawer.open { transform: translateX(0); }
.drawer a {
  color: #F7EEE7; font-family: var(--nav); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: .98rem; display: block; padding: 15px 0; border-bottom: 1px solid rgba(240,231,227,.13);
}
.drawer a:hover { color: var(--clay); text-decoration: none; }
.drawer a[aria-current="page"] { color: var(--clay); }
.drawer .drawer-cta { margin-top: 22px; background: var(--cream); color: var(--espresso); border: 0; font-size: 1rem; }
.drawer .drawer-cta:hover { background: #fff; color: var(--espresso); }
.drawer .drawer-phone { font-family: var(--font); font-size: 1.05rem; font-weight: 700; color: var(--plum-soft); border: 0; margin-top: 6px; }

@media (min-width: 980px) {
  .nav-links { display: flex; align-items: center; gap: 26px; }
  .nav-links a { font-family: var(--nav); text-transform: uppercase; letter-spacing: .04em; color: var(--espresso); font-weight: 700; font-size: .76rem; }
  .nav-links a:hover { color: var(--clay); text-decoration: none; }
  .nav-links a[aria-current="page"] { color: var(--clay); }
  .nav-toggle { display: none; }
  .nav-actions .btn { display: inline-flex; }
  .drawer { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff;
  background:
    linear-gradient(100deg, rgba(58,45,46,.90) 0%, rgba(0,76,76,.62) 52%, rgba(0,76,76,.30) 100%),
    var(--hero-img, url("../img/home-hero.jpg")) center 38% / cover no-repeat;
}
.hero-inner { position: relative; padding-block: clamp(64px, 12vw, 140px); max-width: 740px; }
.hero h1 { color: #fff; }
.hero p { margin-top: 18px; font-size: var(--step-1); color: #F7EEE7; line-height: 1.5; }
.hero .eyebrow { color: var(--cream); text-shadow: 0 2px 18px rgba(40, 30, 24, .9), 0 0 6px rgba(40, 30, 24, .85), 0 1px 2px rgba(40, 30, 24, .95); }
.hero-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-meta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--plum-soft); font-weight: 700; font-size: .95rem; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }

/* Home hero — photo-forward & bottom-anchored to match the original site.
   Lets the candid herd photo shine, with a soft bottom scrim for legibility. */
.hero--home {
  display: flex; align-items: flex-end;
  min-height: clamp(540px, 88vh, 780px);
  background:
    linear-gradient(to bottom, rgba(40,30,24,.40) 0%, rgba(40,30,24,.12) 18%, rgba(40,30,24,0) 35%),
    linear-gradient(to top, rgba(81,62,52,.80) 0%, rgba(81,62,52,.46) 26%, rgba(81,62,52,.08) 56%, rgba(81,62,52,0) 100%),
    linear-gradient(96deg, rgba(81,62,52,.46) 0%, rgba(81,62,52,.10) 42%, rgba(81,62,52,0) 70%),
    var(--hero-img, url("../img/home-hero.jpg")) center 52% / cover no-repeat;
}
.hero--home .hero-inner { padding-block: clamp(30px, 6vw, 70px); }
.hero--home h1 { text-shadow: 0 2px 22px rgba(58,44,36,.55); }
.hero--home p { color: #FFFCF6; text-shadow: 0 1px 14px rgba(58,44,36,.6); }
.hero--home .hero-cta { margin-top: 26px; }
@media (max-width: 600px) {
  /* Top text, bottom CTAs, photo subjects breathe in the middle. */
  .hero--home {
    align-items: stretch;
    min-height: 80vh;
    background:
      linear-gradient(to bottom, rgba(81,62,52,.70) 0%, rgba(81,62,52,.30) 22%, rgba(81,62,52,0) 46%),
      linear-gradient(to top,    rgba(81,62,52,.70) 0%, rgba(81,62,52,.26) 22%, rgba(81,62,52,0) 46%),
      var(--hero-img, url("../img/home-hero.jpg")) 50% 50% / cover no-repeat;
  }
  .hero--home .hero-inner { display: flex; flex-direction: column; width: 100%; padding-block: 22px 26px; max-width: none; }
  .hero--home h1 { font-size: clamp(2.1rem, 8vw, 2.7rem); }
  .hero--home p { font-size: 1rem; margin-top: 12px; }
  .hero--home .hero-cta { margin-top: auto; padding-top: 24px; }
  .hero--home .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Grids ---------- */
.grid { display: grid; gap: 22px; }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Feature cards ---------- */
.feature { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.feature .ic { width: 50px; height: 50px; border-radius: 14px; background: var(--plum-soft); color: var(--plum); display: grid; place-items: center; margin-bottom: 16px; }
.feature h3 { font-size: 1.5rem; }
.feature p { color: var(--muted); margin-top: 8px; font-size: .98rem; }

/* ---------- Section head ---------- */
.section-head { max-width: 62ch; margin-bottom: 38px; }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin-top: 8px; }
.section-head p { color: var(--muted); margin-top: 14px; }

/* ---------- Cards (programs / events / shop) ---------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .14s ease, box-shadow .14s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card .thumb { aspect-ratio: 16/11; background: var(--plum-soft) center/cover no-repeat; position: relative; }
.card .badge { position: absolute; top: 13px; left: 13px; z-index: 1; background: var(--clay); color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .02em; padding: 6px 13px; border-radius: 999px; }
.card .body { padding: 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card h3 { font-size: 1.55rem; }
.card p { color: var(--muted); font-size: .96rem; }
.card .price { font-family: var(--head); font-weight: 600; color: var(--teal); font-size: 1.15rem; }
.card .meta { margin-top: auto; padding-top: 12px; font-weight: 700; font-size: .88rem; color: var(--clay); display: flex; flex-wrap: wrap; gap: 8px 16px; }
.card a.stretch::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.card--link:hover { text-decoration: none; }

/* ---------- Split / CTA ---------- */
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 1fr; } .split--rev > :first-child { order: 2; } }
.media { aspect-ratio: 4/3; border-radius: var(--radius); background: var(--plum-soft) center/cover no-repeat; box-shadow: var(--shadow-lg); }
.media--art { background-color: var(--paper); background-size: 70% auto; }
.poster { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.poster img { display: block; width: 100%; height: auto; transition: transform .25s ease; }
.poster:hover img { transform: scale(1.02); }
.cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--espresso), var(--teal)); color: #fff; border-radius: var(--radius); padding: clamp(34px, 6vw, 66px); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #F7EEE7; margin-top: 12px; }
.cta-band .hero-cta { justify-content: center; }

/* ---------- Quote / testimonials ---------- */
.quote { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.quote .stars { color: var(--gold); letter-spacing: 2px; font-size: 1rem; }
.quote p { color: var(--ink); font-style: italic; font-size: 1.05rem; }
.quote .who { font-weight: 700; color: var(--teal); font-style: normal; font-size: .92rem; margin-top: auto; }
.quote .who span { display: block; color: var(--muted); font-weight: 400; }

/* ---------- Badges / credentials strip ---------- */
.creds { display: flex; flex-wrap: wrap; gap: 26px 40px; align-items: center; justify-content: center; }
.creds img { height: 76px; width: auto; opacity: .9; }

/* ---------- Footer ---------- */
.footer { background: var(--espresso); color: #c4b6b2; padding-block: 56px 28px; }
.footer a { color: #c4b6b2; }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }
.footer h4 { color: #fff; font-family: var(--head); font-size: 1.35rem; font-weight: 600; margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.footer .brand { margin-bottom: 14px; }
.footer .brand img { height: 78px; }
.footer .socials { display: flex; gap: 14px; margin-top: 16px; }
.footer .socials a { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(196,182,178,.28); border-radius: 50%; }
.footer .socials a:hover { background: var(--clay); border-color: var(--clay); color: #fff; }
.footer .fine { margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(196,182,178,.18); font-size: .85rem; color: #9a8c88; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 8px; z-index: 100; }

/* ---------- Page hero (shorter inner pages) ---------- */
.hero--page .hero-inner { padding-block: clamp(46px, 8vw, 88px); max-width: 800px; }
.crumbs { font-weight: 700; font-size: .85rem; color: var(--plum-soft); }
.crumbs a { color: var(--plum-soft); } .crumbs a:hover { color: #fff; }
.crumbs span { color: var(--gold); }

/* ---------- Prose (long content pages) ---------- */
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-size: var(--step-2); margin-top: 1.4em; }
.prose h3 { font-size: 1.6rem; margin-top: 1.2em; color: var(--clay); }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: .45em; }
.prose ul li::marker { color: var(--clay); }
.prose strong { color: var(--teal); }
.prose .price-note { font-family: var(--head); font-weight: 600; color: var(--teal); font-size: 1.25rem; }

/* ---------- Program block (alternating content rows) ---------- */
.pblock { display: grid; gap: 26px; align-items: center; padding-block: clamp(30px,5vw,52px); border-bottom: 1px solid var(--line); }
.pblock:last-child { border-bottom: 0; }
@media (min-width: 880px) { .pblock { grid-template-columns: 1fr 1fr; gap: 44px; } .pblock--rev .pblock-media { order: 2; } }
.pblock-media { aspect-ratio: 4/3; border-radius: var(--radius); background: var(--plum-soft) center/cover no-repeat; box-shadow: var(--shadow); }
.pblock h3 { font-size: var(--step-2); }
.pblock .tag { font-family: var(--font); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--clay); }
.pblock .price-note { font-family: var(--head); font-weight: 600; color: var(--teal); font-size: 1.3rem; margin-top: 6px; }
.pblock p { color: var(--muted); margin-top: 10px; }
.pblock .btn { margin-top: 18px; }

/* ---------- Sidebar facts (booking aside) ---------- */
.layout { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .layout { grid-template-columns: 1fr 330px; align-items: start; } }
.aside { position: sticky; top: 90px; display: grid; gap: 18px; }
.facts { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.facts h3 { font-size: 1.5rem; margin-bottom: 14px; }
.facts dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; margin: 0; }
.facts dt { font-weight: 700; font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.facts dd { margin: 0; font-weight: 600; color: var(--ink); }
.facts .btn { width: 100%; justify-content: center; margin-top: 18px; }

/* ---------- FAQ / accordion ---------- */
.faq { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { font-family: var(--head); font-size: 1.35rem; font-weight: 600; color: var(--teal); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--clay); font-size: 1.5rem; line-height: 1; }
.faq[open] summary::after { content: "\2013"; }
.faq p { color: var(--ink); margin-top: 10px; }

/* ---------- Pill nav ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { font-weight: 700; font-size: .92rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 9px 17px; color: var(--teal); }
.pill:hover { border-color: var(--clay); color: var(--clay); text-decoration: none; }

/* ---------- Bio cards (team / herd) ---------- */
.bio { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.bio .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-family: var(--head); font-size: 1.6rem; font-weight: 600; margin-bottom: 14px; }
.bio h3 { font-size: 1.45rem; }
.bio .role { font-weight: 700; color: var(--clay); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin: 2px 0 10px; }
.bio p { color: var(--muted); font-size: .95rem; }
.herd-card .avatar { background: var(--plum); }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery img { border-radius: var(--radius-sm); aspect-ratio: 1; object-fit: cover; width: 100%; box-shadow: var(--shadow); }

/* ---------- Embeds (Square / Spotify) ---------- */
.embed-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.embed-card--booking { min-height: 360px; padding: 28px 22px; text-align: center; }
.embed-card--booking iframe { width: 100% !important; border: 0 !important; display: block; margin: 0 auto; }
/* Mobile: Square's pages stack taller, so we extend the iframe so content
   shows without the dreaded double-scroll. Empty space below is fine. */
.embed-iframe--classes { min-height: 1100px; }
.embed-iframe--store   { min-height: 1300px; }
@media (max-width: 768px) {
  .embed-iframe--classes { min-height: 2100px; }
  .embed-iframe--store   { min-height: 2600px; }
}
/* Smooth scroll offset so #book / #book-class / #store land below the sticky header */
section[id="book"], section[id="book-class"], section[id="store"] { scroll-margin-top: 80px; }
.embed-frame { width: 100%; border: 0; border-radius: var(--radius-sm); display: block; }
.podcast-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .podcast-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Info banner ---------- */
.note { background: var(--plum-soft); border-radius: var(--radius); padding: 18px 22px; color: var(--espresso); font-weight: 600; }
.note strong { color: var(--teal); }