/* =============================================================================
 * Golden Hive Gatherings — sitewide stylesheet.
 *
 * Single file. Tokens on :root only. BEM naming (.block, .block__element,
 * .block--modifier). No preprocessor, no Tailwind, no third-party CSS.
 *
 * Section order is the load-bearing convention — keep new rules in their
 * section so the file stays navigable.
 *
 * 1. Brand tokens (palette, semantic aliases, type, motion, spacing)
 * 2. @font-face (Sprint 1 item 2)
 * 3. Resets & base
 * 4. Layout primitives (.skip-link, .visually-hidden, page fade-in)
 * 5. Components
 *    - .header (Sprint 1 item 3)
 *    - .mobile-menu (Sprint 1 item 3)
 *    - .footer (Sprint 1 item 4)
 *    - .coming-soon (Sprint 1 item 5)
 *    - .booking (Sprint 1 item 6)
 *    - .hero (Sprint 1 item 8 — sample-page form; Sprint 2 — home)
 *    - .gallery-grid + .gallery-tile (Sprint 2)
 *    - .lightbox (Sprint 2)
 *    - .cta-button (Sprint 1 item 3)
 *    - .section-header (Sprint 2)
 *    - .palette-swatch + .sample-controls (Sprint 1 item 8)
 * 6. Reduced-motion overrides
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * 1. Brand tokens
 *
 * Palette tokens are locked by docs/references/GHG - Brand Guidelines.pdf.
 * Component CSS reads `var(--…)` only — never hard-codes a hex value.
 * Sprint 1 item 2 finalizes the semantic aliases and type tokens.
 * --------------------------------------------------------------------------- */
:root {
  /* Palette — locked, from Brand Guidelines. */
  --color-black:               #000000;
  --color-dark-grey:           #222222;
  --color-honey-cream:         #FBF4E4;
  --color-golden-honey:        #E0AD32;
  --color-dark-gray-olive:     #48493C;
  --color-gray-olive:          #6A6C31;
  --color-pastel-gray-orange:  #D2B993;

  /* Semantic aliases — component CSS reads these, not the raw palette names.
     #F6EDD8 is a deliberate slightly-deeper cream for alternating sections;
     it is NOT a Brand Guidelines color, only a derived tint used as a
     surface variation. All other aliases reference palette tokens. */
  --color-bg-body:            var(--color-honey-cream);
  --color-bg-section-alt:     #F6EDD8;
  --color-text-body:          var(--color-dark-gray-olive);
  --color-text-heading:       var(--color-dark-grey);
  --color-cta-bg:             var(--color-golden-honey);
  --color-cta-text:           var(--color-dark-grey);
  --color-link-inline:        var(--color-gray-olive);
  --color-link-inline-hover:  var(--color-dark-gray-olive);

  /* Type — self-hosted families plus weight scale. Stacks fall back to
     system-ui / serif / cursive so the page remains readable if a WOFF2
     fails to load. Usage rules live in the @font-face section comment. */
  --font-body:    "Montserrat", system-ui, -apple-system, sans-serif;
  --font-display: "Eyesome", "Montserrat", serif;
  --font-script:  "Beautifully Delicious Script", "Eyesome", cursive;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 150ms var(--ease-standard);
  --transition-medium: 200ms var(--ease-standard);
}

/* -----------------------------------------------------------------------------
 * 2. @font-face
 *
 * Three self-hosted families, served from /fonts/ (passthrough-copied from
 * src/fonts/). No remote @import; no third-party font CDN at runtime.
 *
 * Usage rules (PRD-locked, from docs/spec.md > Brand System > Typography
 * Tokens):
 *   - Montserrat (--font-body):    body, nav, UI labels, non-editorial headers.
 *   - Eyesome (--font-display):    editorial subheaders, section accents, the
 *                                  home hero headline, large display moments.
 *   - Beautifully Delicious Script (--font-script): signature / emotional
 *                                  accents only (e.g. the footer tagline,
 *                                  a single brand-signature word). Never
 *                                  body, never nav.
 *
 * font-display: swap on every face — the system-ui fallback paints first;
 * the WOFF2 swaps in when ready. Latin-only subsets keep file sizes small;
 * subset further at source if any single file exceeds ~50KB.
 * --------------------------------------------------------------------------- */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Eyesome";
  src: url("/fonts/eyesome.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Beautifully Delicious Script";
  src: url("/fonts/beautifully-delicious-script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
 * 3. Resets & base
 * --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background-color: var(--color-bg-body);
  color: var(--color-text-body);
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Base typography — body / nav / UI default to Montserrat; headings default
   to Montserrat too (editorial display moments opt into --font-display
   explicitly per component). Beautifully Delicious Script is never applied
   at the base level — only via component-scoped class. */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading);
  line-height: 1.2;
}

p {
  margin: 0 0 1em;
}

nav, button, input, select, textarea {
  font-family: var(--font-body);
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* -----------------------------------------------------------------------------
 * 4. Layout primitives
 * --------------------------------------------------------------------------- */

/* Page fade-in: html.is-loading is set by base.njk; site.js removes it on
   DOMContentLoaded, triggering the body opacity transition. Reduced-motion
   media query at section 6 neutralizes the fade entirely. */
html.is-loading body {
  opacity: 0;
}
body {
  opacity: 1;
  transition: opacity 320ms var(--ease-standard);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--color-dark-grey);
  color: var(--color-honey-cream);
  text-decoration: none;
  z-index: 1000;
}
.skip-link:focus {
  left: 0;
}

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

/* -----------------------------------------------------------------------------
 * 5. Components
 * --------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * .site-footer — Sprint 1 item 4.
 * Stacked, centered layout per docs/references/GHG - Brand Guidelines.pdf
 * (last page, light-mode mockup): logo → script tagline → social icon row
 * → copyright → "Designed by Virtual Corners" credit. Light-mode palette:
 * background honey-cream, tagline olive-green, socials + copyright dark
 * gray-olive, credit muted gray-olive.
 * --------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 3;
  background-color: var(--color-honey-cream);
  color: var(--color-text-body);
  border-top: 1px solid rgba(72, 73, 60, 0.12);
  /* No margin-top: the fixed hero on Home would show through any gap between
     <main>'s last section and the footer. Section padding supplies breathing
     room on every route. */
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 2.25rem clamp(1rem, 4vw, 2.5rem) 1.75rem;
}
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.site-footer__logo img {
  width: clamp(220px, 30vw, 380px);
  height: auto;
  /* The trimmed Horizontal Header #2 lockup has the wordmark on the left
     ~70% and the honeycomb hexagon cluster on the right ~30%. Centering the
     PNG as a unit makes the words read off-center to the left. Shift the
     image rightward so the wordmark optically centers — the hexagon
     intentionally sits slightly past center, per the user's direction. */
  transform: translateX(10%);
}
.site-footer__tagline {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.1;
  color: var(--color-gray-olive);
  white-space: nowrap;
}
.site-footer__socials {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Decorative horizontal lines flanking the social icon row — matches the
   social-row treatment on the brand-sheet footer mockup. Fixed-width hairlines
   so they read as framing rather than dominating. */
.site-footer__socials::before,
.site-footer__socials::after {
  content: "";
  display: inline-block;
  width: clamp(40px, 8vw, 80px);
  height: 1px;
  background-color: var(--color-dark-gray-olive);
  opacity: 0.4;
}
.site-footer__social {
  margin: 0;
  display: inline-flex;
  align-items: center;
}
/* Middle-dot separator between social items, matching the brand-sheet mockup.
   Using ::after on every item except the last keeps the HTML clean (no inline
   separator markup). */
.site-footer__social:not(:last-child)::after {
  content: "·";
  display: inline-block;
  margin-left: 0.75rem;
  color: var(--color-dark-gray-olive);
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0.5;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-dark-gray-olive);
  text-decoration: none;
  border-radius: 999px;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: var(--color-golden-honey);
  background-color: rgba(224, 173, 50, 0.10);
}
.site-footer__social a:focus-visible {
  outline: 2px solid var(--color-dark-grey);
  outline-offset: 2px;
}
.site-footer__social-icon {
  display: block;
}
.site-footer__copyright {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-dark-gray-olive);
}
.site-footer__credit {
  margin: 0.1rem 0 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--color-dark-grey);
}
.site-footer__credit a {
  color: var(--color-dark-grey);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: var(--weight-medium);
  transition: color var(--transition-fast);
}
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
  color: var(--color-golden-honey);
}

/* -----------------------------------------------------------------------------
 * .coming-soon — Sprint 1 item 5. Shared layout used by the four named
 * placeholder pages (about / services / testimonials / contact). Honey-cream
 * background (inherited from body), centered main logo, Eyesome editorial
 * headline keyed off {{ sectionName }}, Montserrat blurb, CTA pill.
 * --------------------------------------------------------------------------- */
.coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 3rem 1.25rem;
}
.coming-soon__inner {
  max-width: 36rem;
  text-align: center;
}
.coming-soon__logo {
  display: block;
  width: clamp(160px, 22vw, 240px);
  height: auto;
  margin: 0 auto 1.5rem;
}
.coming-soon__headline {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  color: var(--color-dark-grey);
}
.coming-soon__blurb {
  margin: 0 auto 2rem;
  max-width: 32rem;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--color-text-body);
}
.coming-soon__blurb p {
  margin: 0;
}
.coming-soon__blurb p + p {
  margin-top: 0.9em;
}
.coming-soon__cta {
  margin-top: 1rem;
}
.cta-button--coming-soon {
  font-size: 0.92rem;
  padding: 0.75em 1.5em;
}
/* -----------------------------------------------------------------------------
 * .booking — Sprint 1 item 6. The /booking/ in-site placeholder page that
 * every site CTA points to (in a new tab) until the real Calendly URL
 * replaces BOOKING_URL in src/_data/site.js.
 * --------------------------------------------------------------------------- */
.booking {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 3rem 1.25rem;
}
.booking__inner {
  max-width: 34rem;
  text-align: center;
}
.booking__icon {
  display: block;
  margin: 0 auto 1.5rem;
  color: var(--color-golden-honey);
}
.booking__headline {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  color: var(--color-dark-grey);
}
.booking__blurb {
  margin: 0 auto;
  max-width: 30rem;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--color-text-body);
}
.booking__email {
  color: var(--color-link-inline);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
.booking__email:hover,
.booking__email:focus-visible {
  color: var(--color-link-inline-hover);
}
/* -----------------------------------------------------------------------------
 * .hero — Sprint 1 item 8 (sample-page form). Sprint 2 reuses for Home.
 *
 * Full-viewport-height stage. Multiple <picture> backgrounds stack absolutely;
 * only the one carrying .hero__bg--active is visible. JS (initSampleControls)
 * swaps which one is active. The scrim is a separate fixed layer; its strength
 * is controlled by the .hero--scrim-* modifier on the parent <section>.
 * --------------------------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 64px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-honey-cream);
  isolation: isolate;
}
.hero__backgrounds {
  /* Sticky-parallax: pin the active photo to the viewport at all times.
     Subsequent sections (.palette, .site-footer) carry solid backgrounds at
     a higher z-index so they cover the photo as they scroll over it,
     producing the "photo stays still while content rises over it" effect. */
  position: fixed;
  inset: 0;
  z-index: 0;
}
.hero__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-medium);
}
.hero__bg--active {
  opacity: 1;
}
.hero__bg picture,
.hero__bg img,
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the image 50px above container center so the visible content
     shifts upward in the hero. Polish iteration: surface composition tweak
     for the chosen pick — the headline and subhead overlay sit higher on
     the photo subject as a result. */
  object-position: center calc(50% - 50px);
  display: block;
}
.hero__scrim {
  /* Fixed alongside the photo so the scrim doesn't slide off the photo
     mid-scroll. Subsequent sections cover both via z-index. */
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: var(--color-black);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-medium);
}
.hero--scrim-off    .hero__scrim { opacity: 0; }
.hero--scrim-light  .hero__scrim { opacity: 0.20; }
.hero--scrim-medium .hero__scrim { opacity: 0.40; }
.hero--scrim-strong .hero__scrim { opacity: 0.60; }

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 60rem;
  padding: 0 clamp(1rem, 5vw, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Hero card row — keeps the card and the sample-page opacity slider side by
   side. The cycler (color dots) sits below this row in .hero__content's
   column flow. Slider element is only rendered on /sample/; on the
   production Home hero only the card itself will exist. */
.hero__card-row {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* Hero text card — wraps the eyebrow + headline + subhead in a solid color
   tile so the words read cleanly off the photo. Color comes from the
   .hero__card--<token> modifier (sets --hero-card-bg). Opacity is applied
   ONLY to the background layer via a ::before overlay so the text stays
   fully readable even at low opacity. Polish iteration: cycled via the
   sample-page card swatch row and slider. */
.hero__card {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 2.75rem);
  border-radius: clamp(18px, 2.5vw, 28px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
.hero__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--hero-card-bg, transparent);
  opacity: var(--hero-card-opacity, 1);
  z-index: -1;
  pointer-events: none;
}
.hero__card--black              { --hero-card-bg: var(--color-black);              color: var(--color-honey-cream); }
.hero__card--dark-grey          { --hero-card-bg: var(--color-dark-grey);          color: var(--color-honey-cream); }
.hero__card--honey-cream        { --hero-card-bg: var(--color-honey-cream);        color: var(--color-dark-grey); }
.hero__card--golden-honey       { --hero-card-bg: var(--color-golden-honey);       color: var(--color-dark-grey); }
.hero__card--dark-gray-olive    { --hero-card-bg: var(--color-dark-gray-olive);    color: var(--color-honey-cream); }
.hero__card--gray-olive         { --hero-card-bg: var(--color-gray-olive);         color: var(--color-honey-cream); }
.hero__card--pastel-gray-orange { --hero-card-bg: var(--color-pastel-gray-orange); color: var(--color-dark-grey); }

/* Opacity slider (sample-page only). Vertical orientation so it tucks
   neatly to the right of the card without stealing horizontal width. */
.hero__opacity {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.4rem;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  color: var(--color-honey-cream);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero__opacity-label {
  font-weight: var(--weight-medium);
  opacity: 0.85;
}
.hero__opacity-slider {
  /* Native vertical range — works in Chromium/Edge via writing-mode and in
     Firefox via the legacy `orient` attr; both paths land on a vertical
     thumb-drag without a custom slider implementation. */
  writing-mode: vertical-lr;
  direction: rtl; /* 0 at bottom, 100 at top */
  appearance: slider-vertical;
  width: 18px;
  height: clamp(140px, 22vh, 220px);
  accent-color: var(--color-golden-honey);
  cursor: ns-resize;
}
.hero__opacity-readout {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semi);
}

.hero__eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
}
.hero__headline {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.1;
  color: inherit;
}
.hero__subhead {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.5;
  color: inherit;
}

/* -----------------------------------------------------------------------------
 * .sample-controls — Sprint 1 item 8 only. Sample-page scrim segmented control,
 * Save button, current-filename readout. The header chevrons live in the
 * sticky header partial (gated on page.url === "/sample/") and are styled
 * under .sample-header-chevron below.
 * --------------------------------------------------------------------------- */
.sample-controls__scrim {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: inline-flex;
  gap: 0;
  padding: 0.25rem;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.sample-controls__scrim-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-honey-cream);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4em 0.9em;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.sample-controls__scrim-btn:hover,
.sample-controls__scrim-btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.10);
}
.sample-controls__scrim-btn:focus-visible {
  outline: 2px solid var(--color-golden-honey);
  outline-offset: 2px;
}
.sample-controls__scrim-btn.is-active {
  background-color: var(--color-golden-honey);
  color: var(--color-dark-grey);
}
/* Card-color cycler — small horizontal row of brand-palette swatches that
   sits directly below the hero card (inside .hero__content's column flow).
   Click cycles the .hero__card--<token> modifier live; the persisted value
   rides along in the Save-this-pick POST. */
.sample-controls__card {
  display: inline-flex;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.sample-controls__card-btn {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.sample-controls__card-btn:hover,
.sample-controls__card-btn:focus-visible {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.sample-controls__card-btn:focus-visible {
  outline: 2px solid var(--color-golden-honey);
  outline-offset: 2px;
}
.sample-controls__card-btn.is-active {
  box-shadow: 0 0 0 2px var(--color-golden-honey), 0 0 0 3px rgba(0, 0, 0, 0.5);
}

.sample-controls__save {
  position: absolute;
  z-index: 3;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
}
.sample-controls__filename {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(0.5rem, 2vw, 1rem);
  transform: translateX(-50%);
  margin: 0;
  padding: 0.25em 0.75em;
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-honey-cream);
  white-space: nowrap;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------------------------------------------------------
 * .sample-header-chevron — sample-page-only left/right step controls in the
 * sticky header. Gated by `{% if page.url == "/sample/" %}` in
 * partials/header.njk so they never appear on production routes.
 * --------------------------------------------------------------------------- */
.sample-header-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(72, 73, 60, 0.25);
  border-radius: 999px;
  background-color: rgba(251, 244, 228, 0.85);
  color: var(--color-dark-gray-olive);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.sample-header-chevron:hover,
.sample-header-chevron:focus-visible {
  background-color: var(--color-golden-honey);
  color: var(--color-dark-grey);
}
.sample-header-chevron:focus-visible {
  outline: 2px solid var(--color-dark-grey);
  outline-offset: 2px;
}
.sample-header-chevron--prev {
  left: clamp(4rem, 10vw, 7rem);
}
.sample-header-chevron--next {
  /* Sit just left of the CTA's right-anchored position. */
  right: clamp(14rem, 22vw, 18rem);
}
@media (max-width: 767.98px) {
  /* On mobile, both chevrons cluster centrally above the hamburger row so
     they remain reachable without colliding with the hamburger or CTA. */
  .sample-header-chevron--prev { left: 4rem; }
  .sample-header-chevron--next { right: 4rem; }
}

/* -----------------------------------------------------------------------------
 * .palette — Sprint 1 item 8. Brand-palette showcase below the sample-page
 * hero. Tile per :root color token with hex + semantic name; doubles as the
 * visual confirmation that Sprint 1 item 2's token wiring is intact.
 * --------------------------------------------------------------------------- */
.palette {
  position: relative;
  z-index: 3;
  background-color: var(--color-bg-body);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem);
}
.palette__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.palette__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--color-text-heading);
}
.palette__intro {
  margin: 0 0 2rem;
  max-width: 48rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-body);
}
.palette__intro code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background-color: rgba(72, 73, 60, 0.08);
  padding: 0.05em 0.35em;
  border-radius: 3px;
}
.palette__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.palette__item {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-section-alt);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(72, 73, 60, 0.10);
}
.palette__swatch {
  height: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.5rem 0.75rem;
}
.palette__swatch .palette__hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-dark-grey);
}
.palette__swatch--dark .palette__hex {
  color: var(--color-honey-cream);
}
.palette__meta {
  padding: 0.7rem 0.85rem 0.9rem;
}
.palette__name {
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: 0.92rem;
  color: var(--color-text-heading);
  margin-bottom: 0.15rem;
}
.palette__token {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--color-text-body);
  opacity: 0.85;
}

/* -----------------------------------------------------------------------------
 * .gallery + .lightbox — Sprint 2 item 6.
 *
 * CSS-only masonry via column-count + break-inside: avoid. Column steps:
 *   <  480px → 1
 *   ≥  480px → 2
 *   ≥  768px → 3
 *   ≥ 1200px → 4
 * Gutter is var(--space-12) where defined; the file currently has no space
 * scale token, so we use a clamped rem value that matches the section padding
 * rhythm (~1rem). All other component CSS reads the existing tokens.
 *
 * Tile hover scale is gated by prefers-reduced-motion: no-preference so users
 * with reduced-motion preference don't see the scale transform. Lightbox open
 * / close transitions are handled the same way.
 * --------------------------------------------------------------------------- */
.gallery {
  /* Sits above the fixed hero background (none on this page, but the
     z-index: 3 keeps the section opaque if a future variant adds one). */
}
.gallery__grid {
  column-count: 1;
  column-gap: clamp(0.75rem, 1.5vw, 1rem);
}
@media (min-width: 480px) {
  .gallery__grid { column-count: 2; }
}
@media (min-width: 768px) {
  .gallery__grid { column-count: 3; }
}
@media (min-width: 1200px) {
  .gallery__grid { column-count: 4; }
}
.gallery__tile {
  break-inside: avoid;
  display: block;
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: zoom-in;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.gallery__tile:focus-visible {
  outline: 2px solid var(--color-golden-honey);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .gallery__tile:hover,
  .gallery__tile:focus-visible {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }
}
.gallery__tile img,
.gallery__tile picture,
.gallery__img {
  width: 100%;
  height: auto;
  display: block;
}
/* Lightbox-only fullsize <picture> blocks are emitted hidden — no longer used
   for live render after refactor to data-precomputed URLs, but the rule is
   defensive in case the markup pattern returns. */
.gallery__fullsize {
  display: none;
}

/* Lightbox overlay --------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 1;
  transition: opacity var(--transition-medium);
}
.lightbox[hidden] {
  display: none;
}
.lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 4rem);
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  appearance: none;
  border: none;
  background-color: rgba(0, 0, 0, 0.55);
  color: var(--color-honey-cream);
  font-family: var(--font-body);
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.lightbox__close:hover,
.lightbox__close:focus-visible,
.lightbox__prev:hover,
.lightbox__prev:focus-visible,
.lightbox__next:hover,
.lightbox__next:focus-visible {
  background-color: var(--color-golden-honey);
  color: var(--color-dark-grey);
}
.lightbox__close:focus-visible,
.lightbox__prev:focus-visible,
.lightbox__next:focus-visible {
  outline: 2px solid var(--color-honey-cream);
  outline-offset: 2px;
}
.lightbox__close {
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
}
.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 2rem;
  line-height: 1;
}
.lightbox__prev {
  left: clamp(0.75rem, 2vw, 1.5rem);
}
.lightbox__next {
  right: clamp(0.75rem, 2vw, 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .gallery__tile {
    transition: none;
  }
}


/* -----------------------------------------------------------------------------
 * .cta-button — shared "Book a free consultation" control.
 * Sprint 1 item 3. Used by the header (variant --header), the mobile menu
 * (--mobile), the coming-soon pages (Sprint 1 item 5), the booking placeholder
 * (Sprint 1 item 6), and Sprint 2's Home closing CTA. Reads {{ site.bookingUrl }}.
 * --------------------------------------------------------------------------- */
.cta-button {
  display: inline-block;
  padding: 0.7em 1.4em;
  border: none;
  border-radius: 999px;
  background-color: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}
.cta-button:hover,
.cta-button:focus-visible {
  background-color: var(--color-dark-gray-olive);
  color: var(--color-honey-cream);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.cta-button:focus-visible {
  outline: 2px solid var(--color-dark-grey);
  outline-offset: 2px;
}
.cta-button--header {
  /* Header CTA — slightly tighter at desktop so it sits cleanly in the row. */
  font-size: 0.82rem;
  padding: 0.6em 1.2em;
}
.cta-button--mobile {
  /* Mobile-menu CTA — full-width pill at the bottom of the overlay. */
  display: block;
  width: 100%;
  font-size: 1rem;
  padding: 0.85em 1.4em;
}

/* -----------------------------------------------------------------------------
 * .site-header — Sprint 1 item 3.
 * Sticky on scroll. Desktop layout: 3 nav links | logo | 3 nav links | CTA.
 * Mobile layout: hamburger | logo | CTA. Scroll-state modifier
 * (.site-header--scrolled) is added by site.js past a ~16px threshold.
 * --------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--color-honey-cream);
  /* Allow the circular logo to spill below the header bar. */
  overflow: visible;
  transition:
    background-color var(--transition-medium),
    box-shadow var(--transition-medium);
}
.site-header--scrolled {
  background-color: var(--color-honey-cream);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: 0.6rem clamp(1.5rem, 6vw, 3rem);
  max-width: 1440px;
  margin: 0 auto;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}
.site-header__logo-img {
  /* The horizontal header logo PNG (legacy) was trimmed of its transparent
     padding (1536x1024 → 941x168, aspect ~5.6:1) so width drives a
     proportionally short height. At 1440px viewport the logo renders ~173px
     wide / ~31px tall. */
  width: clamp(110px, 12vw, 180px);
  height: auto;
}

/* Polish iteration: circular MAIN LOGO variant.
   The link box stays in flex flow (so left + right nav clusters keep their
   centered separation) but contributes ZERO height — the inner <img> is
   absolutely positioned within it. Result: header bar height is link-driven,
   while the oversized disc floats over the bar and spills onto the page
   content below. The honey-cream background of both the header and the
   circle's interior blend seamlessly; visually the gold ring + honeycomb +
   "Golden Hive Gatherings" wordmark appear to float against the bar. */
.site-header__logo--circle {
  position: relative;
  flex: 0 0 auto;
  width: clamp(96px, 10vw, 140px);
  height: 0; /* Contribute no vertical inflation to the flex row. */
  align-self: center;
  z-index: 2;
}
.site-header__logo-img--circle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  /* Center on the bar's vertical midline, then bias downward so the disc
     spills below the bar rather than above it (above would clip on viewport). */
  transform: translateY(-20%);
}
.site-header__nav {
  flex: 0 0 auto;
}
/* CTA is removed from the flex flow so its width does NOT shift the centered
   nav cluster off-axis. Anchored absolutely to the right edge of the inner
   element (which is itself centered at max 1440px). */
.site-header__cta {
  position: absolute;
  right: clamp(1.5rem, 6vw, 3rem);
  top: 50%;
  transform: translateY(-50%);
}

/* .nav — shared list styling used inside both site-header nav groups. */
.nav {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__item {
  margin: 0;
}
.nav__link {
  display: inline-block;
  padding: 0.4rem 0.2rem;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav__link:hover,
.nav__link:focus-visible {
  color: var(--color-dark-gray-olive);
  border-bottom-color: var(--color-golden-honey);
}
.nav__link[aria-current="page"] {
  border-bottom-color: var(--color-golden-honey);
  color: var(--color-dark-gray-olive);
}

/* Mobile breakpoint for the header — hamburger appears, desktop nav hides.
   Hamburger is absolute-positioned on the left to mirror the CTA's absolute
   right position; the logo stays centered in flex flow regardless. */
@media (max-width: 767.98px) {
  .site-header__nav {
    display: none;
  }
  .site-header__logo {
    flex: 0 0 auto;
  }
  .site-header__logo-img {
    width: clamp(180px, 48vw, 240px);
    height: auto;
  }
  .hamburger {
    position: absolute;
    left: clamp(1rem, 4vw, 2rem);
    top: 50%;
    transform: translateY(-50%);
  }
  /* Header CTA hides at mobile — booking link lives inside the mobile menu
     overlay so we don't overlap the centered logo. */
  .site-header__cta {
    display: none;
  }
}
/* -----------------------------------------------------------------------------
 * .hamburger — three-bar mobile menu trigger. Sprint 1 item 3.
 * Hidden at ≥768px (rule below). Pure CSS; site.js wires open/close.
 *
 * NB: the `display: none` media query MUST follow this base rule. At equal
 * specificity, CSS source order wins — putting the media query above the
 * base block let the inline-flex declaration override the hide rule and
 * leaked the hamburger onto desktop.
 * --------------------------------------------------------------------------- */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex: 0 0 auto;
}
.hamburger__bar {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-text-heading);
  border-radius: 2px;
}
.hamburger:focus-visible {
  outline: 2px solid var(--color-dark-grey);
  outline-offset: 4px;
}
@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
 * .mobile-menu — full-screen overlay. Sprint 1 item 3.
 * The `hidden` attribute removes the element from layout while closed; site.js
 * removes the attribute on open and adds `.mobile-menu--open` after a frame so
 * the opacity transition can play. Reduced-motion skips the transition.
 * --------------------------------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding: 1rem clamp(1rem, 5vw, 2rem) 2rem;
  background-color: var(--color-honey-cream);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.mobile-menu[hidden] {
  display: none;
}
.mobile-menu--open {
  opacity: 1;
}
.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.mobile-menu__logo img {
  width: clamp(180px, 48vw, 240px);
  height: auto;
}
.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--color-text-heading);
  cursor: pointer;
}
.mobile-menu__close:focus-visible {
  outline: 2px solid var(--color-dark-grey);
  outline-offset: 2px;
}
.mobile-menu__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vw;
  height: auto;
  max-width: 480px;
  transform: translate(-50%, -50%);
  opacity: 0.10;
  /* Tint the watermark honey-gold. The PNG is already brand-colored; this
     filter pushes any near-black tones toward the gold-olive end while
     preserving transparency. */
  filter: sepia(1) saturate(2.5) hue-rotate(-10deg) brightness(1.05);
  pointer-events: none;
  z-index: 0;
}
.mobile-menu__nav {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
}
.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.mobile-menu__item {
  margin: 0;
}
.mobile-menu__link {
  display: inline-block;
  padding: 0.4rem 0.6rem;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: clamp(28px, 6vw, 40px);
  color: var(--color-text-heading);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.mobile-menu__link:hover,
.mobile-menu__link:focus-visible {
  color: var(--color-dark-gray-olive);
}
.mobile-menu__link[aria-current="page"] {
  color: var(--color-dark-gray-olive);
  border-bottom: 2px solid var(--color-golden-honey);
}
.mobile-menu__cta {
  position: relative;
  z-index: 1;
  padding-top: 1rem;
}

/* -----------------------------------------------------------------------------
 * 6. Reduced-motion overrides
 * --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.is-loading body,
  body {
    opacity: 1;
    transition: none;
  }

  /* Mobile menu — open instantly, no cross-fade. */
  .mobile-menu {
    transition: none;
  }
  .mobile-menu--open {
    opacity: 1;
  }

  /* Header — kill the background/shadow transition on scroll. */
  .site-header {
    transition: none;
  }

  /* Hero — kill bg cross-fade and scrim transition. State swaps remain. */
  .hero__bg,
  .hero__scrim {
    transition: none;
  }

  /* CTA + nav — kill hover/focus motion. Color shift stays for legibility. */
  .cta-button,
  .nav__link {
    transition: none;
  }
  .cta-button:hover,
  .cta-button:focus-visible {
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
 * Home page sections — Sprint 2 items 4 & 5.
 *
 * Shared .section primitives (.section, .section--alt, .section--body,
 * .section--cta) plus Home-specific blocks (.home__welcome, .home__approach,
 * .home__events, .home__testimonials, .home__cta).
 *
 * Sections sit ABOVE the fixed hero background (z-index 3) — the same
 * sticky-parallax pattern .palette uses on /sample/.
 * --------------------------------------------------------------------------- */
.section {
  position: relative;
  z-index: 3;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 2.5rem);
  background-color: var(--color-bg-body);
}
.section--alt {
  background-color: var(--color-bg-section-alt);
}
.section--body {
  background-color: var(--color-bg-body);
}
.section--cta {
  background-color: var(--color-golden-honey);
  /* Dark gray-olive text on golden-honey passes WCAG AA contrast (~4.8:1).
     Honey-cream on honey-gold was only ~1.9:1 and failed Lighthouse a11y. */
  color: var(--color-dark-gray-olive);
}
.section__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.section__eyebrow {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gray-olive);
}
.section__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.15;
  color: var(--color-text-heading);
}
.section__title--display {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
}
.section__body {
  max-width: 56ch;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.65;
  color: var(--color-text-body);
}
.section__body p {
  margin: 0 0 1.1em;
}
.section__body p:last-child {
  margin-bottom: 0;
}

/* Welcome ------------------------------------------------------------------- */
.home__welcome-inner {
  text-align: left;
}
.home__welcome-signature {
  margin-top: 1.5rem;
  font-family: var(--font-script);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--color-dark-gray-olive);
}

/* My Approach --------------------------------------------------------------- */
.home__approach-inner {
  position: relative;
  text-align: left;
}
.home__approach-inner::before {
  /* Subtle honeycomb-gold hex motif accent. Inline SVG-ish via a pseudo-element
     with a clip-path hexagon. Decorative — aria-hidden via lack of role. */
  content: "";
  position: absolute;
  top: -0.5rem;
  right: clamp(0.5rem, 3vw, 2rem);
  width: clamp(48px, 6vw, 72px);
  aspect-ratio: 1 / 1.155;
  background-color: var(--color-golden-honey);
  opacity: 0.35;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  pointer-events: none;
}

/* Event Types --------------------------------------------------------------- */
.home__events-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 600px) {
  .home__events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .home__events-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.home__event-card {
  background-color: var(--color-honey-cream);
  border: 1px solid rgba(72, 73, 60, 0.10);
  border-radius: 14px;
  padding: clamp(1.1rem, 2vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.home__event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.home__event-icon {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-golden-honey);
}
.home__event-name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: 1.02rem;
  color: var(--color-text-heading);
  line-height: 1.3;
}
.home__event-blurb {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-body);
}

/* Testimonials -------------------------------------------------------------- */
.home__testimonials-inner {
  text-align: center;
}
.home__testimonials-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: 2rem;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}
.home__testimonial {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem) 0;
  border-top: 1px solid rgba(72, 73, 60, 0.15);
}
.home__testimonial:first-child {
  border-top: none;
  padding-top: 0;
}
.home__testimonial-quote {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--color-text-heading);
}
.home__testimonial-quote p {
  margin: 0;
}
.home__testimonial-attribution {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gray-olive);
}

/* Closing CTA --------------------------------------------------------------- */
.home__cta-inner {
  text-align: center;
  max-width: 50rem;
}
.home__cta-headline {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.15;
  color: var(--color-dark-gray-olive);
}
.home__cta-lede {
  margin: 0 0 1.75rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.6;
  color: var(--color-dark-grey);
}
.cta-button--closing {
  font-size: 1rem;
  padding: 0.9em 1.8em;
  background-color: var(--color-dark-grey);
  color: var(--color-honey-cream);
}
.cta-button--closing:hover,
.cta-button--closing:focus-visible {
  background-color: var(--color-black);
  color: var(--color-honey-cream);
}