/* ==========================================================================
   OPTION 1 - GREEN + WARM CREAM
   Site wide.

   Loaded after each page's own <style>, so it overrides without a single
   existing rule being edited. Delete the <link> from a page and that page
   returns to the original dark design untouched.

   Shapes: straight section edges, rounded cards, pill buttons.
   ========================================================================== */

:root {
  --forest:        #08291B;
  --forest-deep:   #062116;
  --cream-bg:      #F5F0E5;
  --sage:          #DCE5D5;
  --gold-fill:     #CCA957;
  --text-on-light: #08291B;
  --text-on-dark:  #F5F0E5;

  /* Ink for the light surfaces. The brief's gold is 1.97:1 on cream, which is
     unreadable, so gold stays a fill colour there and small text uses a
     deepened version of the same hue at 6.3:1. */
  --ink:       #08291B;
  --ink-soft:  #3E5245;
  --ink-mute:  #4A5C50;
  --gold-ink:  #6B551F;

  --r-card:  28px;
  --r-media: 24px;
  --r-pill:  100px;

  /* the original dark tokens, retuned to the new greens */
  --bg:        #08291B;
  --bg-2:      #0C3524;
  --bg-3:      #11402C;
  --gold:      #CCA957;
  --gold-soft: #BE9A4C;
  --gold-pale: #E2C683;
  --cream:     #F5F0E5;
  --cream-2:   #E2DCCD;
  --muted:     #9DAAA1;
  --line:      rgba(204,169,87,0.26);
  --line-soft: rgba(204,169,87,0.13);
}

body { background: var(--forest); }

/* ----------------------------------------------------------------- bands -- */
.band { position: relative; width: 100%; }

/*
  Inside a cream band the tokens are redefined rather than every rule being
  rewritten. Text, borders and card fills that referenced --cream, --muted or
  --bg-2 then flip to their light equivalents on their own, which is what makes
  one stylesheet cover fourteen pages that share no section classes.

  The background below is a literal, not var(--cream-bg), because --cream is
  redefined on this very element and a variable background would resolve to the
  new dark value.
*/
.band-cream {
  background: #F5F0E5;
  color: #08291B;
  padding-bottom: 88px;

  --cream:     #08291B;
  --cream-2:   #3E5245;
  --muted:     #4A5C50;
  --gold:      #6B551F;
  --gold-soft: #6B551F;
  --gold-pale: #6B551F;
  --line:      rgba(8,41,27,0.16);
  --line-soft: rgba(8,41,27,0.08);
  --bg:        #F5F0E5;
  --bg-2:      #DCE5D5;
  --bg-3:      #D2DECA;
}

.band-forest {
  background: var(--forest);
  color: var(--text-on-dark);
  padding-bottom: 0;
}

/* Straight edges. No negative margins, nothing overlapping, nothing to
   intercept a click. */
.band-curve { border-radius: 0; margin-top: 0; padding-top: 0; }

.hero, .page-hero { z-index: 1; }

/* -------------------------------------------------- gold stays a fill ----- */
/*
  --gold is ink inside a cream band so gold *text* is readable. These are the
  places where gold is a background rather than a letterform, so the fill is
  put back and the text on it is forest.
*/
.band-cream .btn-gold,
.band-cream .btn-donate-pill,
.band-cream .btn-village,
.band-cream .btn-join:hover,
.band-cream .btn-join-pill:hover,
.band-cream .btn-outline:hover,
.band-cream .events-view-all:hover,
.band-cream .events-arrow:hover,
.band-cream .event-card:hover .event-cta,
.band-cream .filter-btn.active,
.band-cream .bk-modal-btn {
  background: var(--gold-fill);
  color: var(--forest);
  border-color: var(--gold-fill);
}
.band-cream .btn-gold:hover,
.band-cream .btn-donate-pill:hover { background: #D8B96F; border-color: #D8B96F; }

/* ------------------------------------------------------------- buttons --- */
.btn, .btn-gold, .btn-outline, .btn-join, .btn-join-pill, .btn-our-story,
.btn-donate-pill, .btn-village, .btn-full, .btn-sm, .bk-modal-btn,
.events-view-all, .event-cta, .filter-btn {
  border-radius: var(--r-pill) !important;
}
.btn-gold { box-shadow: 0 4px 16px rgba(8,41,27,0.18); }

.band-cream .btn-outline,
.band-cream .btn-our-story,
.band-cream .btn-join {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid rgba(8,41,27,0.35);
  backdrop-filter: none;
}
.band-cream .btn-our-story:hover,
.band-cream .btn-join:hover { background: var(--forest); color: var(--cream-bg); border-color: var(--forest); }

/* ---------------------------------------------------- cards and media ----- */
.band-cream [class$="-card"],
.band-cream [class*="-card "],
.band-cream .exp-item,
.band-cream .jbc-panel,
.band-cream .events-empty {
  border-radius: var(--r-card);
}
.event-img, .event-card, .about-image, .about-video,
.page-hero-img, .gallery-img, .day-grid figure, .founder-card {
  border-radius: var(--r-media);
}
.event-card { overflow: hidden; }

/* ------------------------------------------- homepage specific polish ----- */
/* The five experiences sit in a dark slab in the original. The cards carry the
   colour now, so the slab steps out of the way; left in, it put the gold
   eyebrow on a dark panel at about 1.5:1. */
.band-cream .experiences { background: transparent; border: 0; box-shadow: none; padding: 0; }
.band-cream .exp-grid { gap: 20px; }
.band-cream .exp-item {
  background: var(--sage);
  padding: 34px 22px 30px;
  border: 1px solid rgba(8,41,27,0.07);
}
.band-cream .exp-item:not(:last-child)::after { display: none; }
.band-cream .exp-item:hover { transform: translateY(-4px); }
.band-cream .exp-icon::before { background: radial-gradient(circle, rgba(107,85,31,0.16) 0%, transparent 65%); }

.band-cream .event-date-chip { background: var(--forest); }
.band-cream .event-month, .band-cream .event-day { color: var(--cream-bg); }
.band-cream .event-badge {
  color: var(--gold-ink); background: rgba(107,85,31,0.10); border: 1px solid rgba(107,85,31,0.3);
}

.band-cream .jbc-panel { border-left: 3px solid var(--gold-fill); }
.band-cream .jbc-panel .btn-gold {
  background: var(--forest); color: var(--cream-bg);
  border: 1.5px solid var(--forest); box-shadow: none;
}
.band-cream .jbc-panel .btn-gold:hover { background: var(--forest-deep); border-color: var(--forest-deep); }

/* rounded accordion rows rather than hairlines */
.band-cream .hfaq-list, .band-cream .faq-list {
  border-top: 0; display: flex; flex-direction: column; gap: 10px;
}
.band-cream .hfaq-item, .band-cream .faq-item {
  background: var(--sage);
  border: 1px solid rgba(8,41,27,0.09);
  border-radius: 18px;
  padding: 0 22px;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.band-cream .hfaq-item:hover, .band-cream .faq-item:hover { border-color: rgba(8,41,27,0.24); }
.band-cream .hfaq-item[open], .band-cream .faq-item[open] {
  background: #E7EEE1; border-color: rgba(8,41,27,0.18);
}
.band-cream .hfaq-item summary:hover, .band-cream .faq-item summary:hover { color: var(--gold-ink); }

/* ----------------------------------------------------------- focus ring --- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold-fill);
  outline-offset: 3px;
  border-radius: 6px;
}
.band-cream a:focus-visible, .band-cream button:focus-visible,
.band-cream summary:focus-visible { outline-color: var(--forest); }

/* ------------------------------------------ quieter botanical layer ------- */
.leaf, .leaves, [class*="leaf-"] { opacity: 0.25 !important; }

/* ------------------------------------------------------ responsiveness ---- */
html, body { overflow-x: hidden; }

@media (max-width: 1024px) { .band-cream .exp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) {
  :root { --r-card: 24px; }
  .band-cream { padding-bottom: 64px; }
  .band-cream .exp-item { padding: 28px 18px 26px; }
}
@media (max-width: 560px) { .band-cream .exp-grid { grid-template-columns: 1fr; } }

/* Comfortable touch targets. Keyed on width as well as pointer type: pointer
   detection is unreliable on hybrid devices and in emulation, and the cost of
   being wrong is a 44px tap target on a phone. */
@media (pointer: coarse), (max-width: 820px) {
  .btn, .btn-gold, .btn-outline, .btn-join, .btn-our-story, .btn-donate-pill,
  .events-view-all, .event-cta, .hfaq-item summary, .faq-item summary { min-height: 48px; }
  .hfaq-item summary, .faq-item summary { display: flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .band-cream .exp-item, .band-cream .exp-item:hover,
  .event-card, .event-card:hover { transition: none !important; transform: none !important; }
}

/* ==========================================================================
   Panels that carry a hard coded dark green background.

   These pages predate the design tokens in places, so a panel is written as
   rgba(14,40,24,.55) rather than var(--bg-2). Redefining the tokens cannot
   reach them, which left dark text sitting on a dark panel. Each one is
   lifted to sage here. Generated by a script and verified afterwards by a
   contrast sweep over every page, not by eye.

   Deliberately excluded: photo scrims, ::before/::after decoration and
   anything in the header, all of which still sit on dark and must stay.
   ========================================================================== */
.band-cream .about { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .addon { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .addon-wide { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .amenity { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .animal-chip { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .animals-wrap { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .bk-cta { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .bk-item { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .bk-item-feature { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .bk-modal-note { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .bk-note { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .bk-xlink-inner { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .bring { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .bring:hover { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .btn-outline { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .community-box { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .confirm-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .contact-form-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .cta { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .disclose { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .dream-ours { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .dream-ours-list span { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .eco-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .econ-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .element-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .event-tier { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .events-arrow { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .events-empty { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .exp-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .exp-cta { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .experiences { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .facil { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .faq-item { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .faq-item:hover { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .fee-callout { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .fee-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .fee-line { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .filter-btn { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .final-cta { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .founder-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .fourway-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .funds-box { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .funds-goal { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .happen-col { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .headset-rates { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .hero-bg { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .how-pillar { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .how-steward-col { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .htier { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .htier.featured { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .info-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .infographic { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .jbc-panel { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .journey-step { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .know { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .learn-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .legal-body { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .legal-callout { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .legal-disclaimer { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .legal-note { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .legal-toc { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .location-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .location-map { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .mission-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .notes-panel { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .overview-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .phase-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .phase-card.active-phase { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .philosophy { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .pkg { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .pkg.featured { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .plan-month { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .principle { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .process { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .rdf { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .rdf-callout { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .receive-box { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .receive-words span { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .rent-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .rent-card:hover { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .rent-thumb { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .rentals-xlink { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .rise { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .road-phase { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .rooted { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .stat-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .status-panel { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .support-box { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .support-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .support-card:hover { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .svc-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .svc-card-feature { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .tcard { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .tcard:hover { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .tempty { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .tier { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .tier.featured { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .transparency-note { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .usecase { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .usecase:hover { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .vack { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .value-chip { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .vchip label { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .vform { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .village-box { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .vision-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .way-card { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .way-card:hover { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .why { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .why-badge { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .zone { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }
.band-cream .zones-caveat { background: var(--sage) !important; border-color: rgba(8,41,27,0.12) !important; }

.band-cream .bk-field input { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }
.band-cream .bk-field select { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }
.band-cream .bk-field textarea { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }
.band-cream .field input { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }
.band-cream .field input:focus { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }
.band-cream .field select { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }
.band-cream .field select:focus { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }
.band-cream .field textarea { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }
.band-cream .field textarea:focus { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }
.band-cream .vfield input[type=email] { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }
.band-cream .vfield input[type=tel] { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }
.band-cream .vfield input[type=text] { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }
.band-cream .vfield select { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }
.band-cream .vfield textarea { background: #FFFDF7 !important; border-color: rgba(8,41,27,0.22) !important; color: var(--ink) !important; }

/* ==========================================================================
   Text written as a literal pale colour rather than var(--cream).

   Same problem as the panels above, in reverse: redefining the tokens cannot
   reach a rule that says color: rgba(245,237,207,.5). On cream these came out
   at about 1:1. Found by sweeping every page for contrast, not by eye.
   ========================================================================== */
.band-cream .bk-disclaimer { color: var(--ink-soft) !important; }
/* The badge keeps its own dark ground (index.html, 1.4.3), so dark ink here
   made it unreadable. Cream on that ground is the pairing it was measured at. */
.band-cream .event-badge { color: #F2E8CF !important; }
.band-cream .info-text a:hover { color: var(--ink-soft) !important; }
.band-cream .legal-disclaimer { color: var(--ink-soft) !important; }
.band-cream .legal-disclaimer strong { color: var(--ink-soft) !important; }
.band-cream .legal-section a:hover { color: var(--ink-soft) !important; }

/* An inline style attribute beats a stylesheet unless the rule is !important.
   There is exactly one on the site: the wellness disclaimer on Experiences,
   written as a literal rgba(245,237,207,.5). On cream it read at 1.03:1. */
.band-cream [style*="245,237,207"] { color: var(--ink-soft) !important; }

/* Caption boxes that sit on top of a photograph keep their dark scrim, which
   the panel sweep above deliberately leaves alone. Their text has to stay
   light to match, or the token remap puts forest ink on a dark scrim. */
.band-cream [class*="overlay"],
.band-cream [class*="overlay"] * { color: var(--cream-bg) !important; }
.band-cream [class*="overlay"] [class*="eyebrow"],
.band-cream [class*="overlay"] [class*="label"] { color: var(--gold-fill) !important; }

/* Placeholder text inside the cream bands. The pages set placeholders as a
   pale cream for their old dark inputs; on the new near-white inputs that read
   at 1.15:1, so "Jane" and "your@email.com" were effectively invisible. The
   contrast sweep that checked every page missed it because it looks at text,
   not at ::placeholder. Lighter than typed text, so a filled field and an
   empty one still look different. Firefox dims placeholders by default, hence
   the opacity. */
.band-cream input::placeholder,
.band-cream textarea::placeholder { color: #5C6F61; opacity: 1; }

/* --------------------------------------------------- booking window ------ */
/*
  The booking window sits outside the cream band (it is a sibling of the band
  so it can cover the whole page), so the band's colour swap never reached it
  and it kept the original dark look. The same swap is applied to the box
  itself, then the few literal dark colours in book-online.html are replaced.
*/
.bk-modal-overlay { background: rgba(6,33,22,0.55); }
.bk-modal-box {
  --cream:     #08291B;
  --cream-2:   #3E5245;
  --muted:     #4A5C50;
  --gold:      #6B551F;
  --gold-soft: #6B551F;
  --gold-pale: #6B551F;
  --line:      rgba(8,41,27,0.16);
  --line-soft: rgba(8,41,27,0.08);
  --bg:        #F5F0E5;
  --bg-2:      #F5F0E5;
  --bg-3:      #DCE5D5;
  background: #F5F0E5;
  color: #08291B;
  border: 1px solid rgba(8,41,27,0.12);
  box-shadow: 0 30px 80px rgba(6,33,22,0.35);
  color-scheme: light;
  scrollbar-width: thin;
  scrollbar-color: rgba(8,41,27,0.28) transparent;
}
.bk-modal-box .bk-modal-close { color: #08291B; border-color: rgba(8,41,27,0.22); }
.bk-modal-box .bk-modal-close:hover { background: var(--sage); color: #08291B; border-color: rgba(8,41,27,0.35); }

.bk-modal-box .bk-field input,
.bk-modal-box .bk-field select,
.bk-modal-box .bk-field textarea {
  background: #FFFDF7;
  border-color: rgba(8,41,27,0.22);
  color: #08291B;
}
.bk-modal-box .bk-field input:focus,
.bk-modal-box .bk-field select:focus,
.bk-modal-box .bk-field textarea:focus { border-color: #6B551F; }
.bk-modal-box .bk-field input::placeholder,
.bk-modal-box .bk-field textarea::placeholder { color: #5C6F61; opacity: 1; }
.bk-modal-box .bk-field input:disabled,
.bk-modal-box .bk-field select:disabled,
.bk-modal-box .bk-field textarea:disabled { opacity: 0.6; }

/* gold stays a fill: the button keeps its gold, with forest text on it */
.bk-modal-box .bk-modal-btn { background: var(--gold-fill); color: var(--forest); }
.bk-modal-box .bk-modal-btn:hover { background: #D8B96F; box-shadow: 0 8px 22px rgba(8,41,27,0.18); }

.bk-modal-box .bk-modal-note { background: var(--sage); border-color: rgba(8,41,27,0.12); }
.bk-modal-box .bk-modal-err { color: #A3322A; }
.bk-modal-box .bk-modal-back-link:hover { color: #08291B; }
.bk-modal-box .bk-confirm-icon { background: var(--sage); border-color: var(--gold-fill); }
.bk-modal-box .bk-confirm-icon svg { stroke: #6B551F; }

/* -------------------------------------------- panels on a dark photo ----- */
/*
  The rentals quote panel has a dark photo behind it but sits inside the cream
  band, so its heading and text took the band's dark ink and disappeared into
  the photo. The light text colours are put back on that panel only; the photo
  and its darkening overlay are left exactly as they are.
*/
.band-cream .cta-on-photo {
  --cream:     #F5F0E5;
  --cream-2:   #E2DCCD;
  --muted:     #C9D1C7;
  --gold:      #CCA957;
  --gold-soft: #CCA957;
  --gold-pale: #E2C683;
}
.band-cream .cta-on-photo h2,
.band-cream .cta-on-photo p,
.band-cream .cta-on-photo .cta-label { text-shadow: 0 2px 14px rgba(0,0,0,0.45); }