/* =============================================================================
 * 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 {
  /* v2 footer-logo.png is a self-contained, centered lockup (honeycomb cluster
     + name + baked-in tagline), so no optical-centering shift is needed. */
  width: clamp(240px, 34vw, 420px);
  height: auto;
}
.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;
}
/* -----------------------------------------------------------------------------
 * .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). */
}
/* Two labeled groups (v2): own photos, then Partnership Photos. */
.gallery__section + .gallery__section {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.gallery__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-text-heading);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}
.gallery__section-note {
  margin: -0.5rem 0 clamp(1rem, 2vw, 1.5rem);
  color: var(--color-text-body);
  font-size: 0.95rem;
}
/* Partner tile wrapper — keeps the image and its always-on credit together as
   one un-splittable masonry unit. */
.gallery__figure {
  break-inside: avoid;
  margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
}
.gallery__figure .gallery__tile {
  margin-bottom: 0;
}
.gallery__credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  padding: 0.5rem 0.25rem 0;
  font-size: 0.85rem;
  color: var(--color-dark-gray-olive);
}
.gallery__credit-name {
  font-weight: var(--weight-semi);
}
.gallery__credit-links {
  display: inline-flex;
  gap: 0.2rem;
  /* Pull the padded links back so the row keeps its visual position. */
  margin: -0.25rem 0;
}
.gallery__credit-link {
  display: inline-flex;
  /* Padding enlarges the 18px icon to a comfortable touch target on mobile. */
  padding: 0.25rem;
  color: var(--color-gray-olive);
  transition: color var(--transition-fast);
}
.gallery__credit-link:hover,
.gallery__credit-link:focus-visible {
  color: var(--color-golden-honey);
}
.gallery__credit-link:focus-visible {
  outline: 2px solid var(--color-golden-honey);
  outline-offset: 2px;
  border-radius: 4px;
}
.gallery__credit-icon {
  display: block;
}
.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;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 6rem);
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
/* Partner credit mirrored into the lightbox (own photos leave it [hidden]). */
.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.9rem;
  color: var(--color-honey-cream);
  font-size: 0.9rem;
  text-align: center;
}
.lightbox__caption[hidden] {
  display: none;
}
.lightbox__caption-name {
  font-weight: var(--weight-semi);
}
.lightbox__caption-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--color-golden-honey);
  text-decoration: underline;
}
.lightbox__caption-icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}
.lightbox__caption-sep {
  color: var(--color-honey-cream);
  opacity: 0.55;
}
.lightbox__caption-link:hover,
.lightbox__caption-link:focus-visible {
  color: var(--color-honey-cream);
}
.lightbox__caption-link:focus-visible {
  outline: 2px solid var(--color-honey-cream);
  outline-offset: 2px;
  border-radius: 4px;
}
.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) {
  /* Bar ~14px taller on mobile so the hamburger touch target has vertical
     breathing room. Logo is absolutely positioned on the bar's vertical
     midline — shifts down 7px alongside the bar center. */
  .site-header__inner {
    padding-top: calc(0.6rem + 7px);
    padding-bottom: calc(0.6rem + 7px);
  }
  .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;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
/* Desktop: shared About image on the left, text on the right. Mobile keeps the
   single-column stack (image first), so the image sits above the text. */
@media (min-width: 768px) {
  .home__welcome-inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}
.home__welcome-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 2vw, 18px);
}
.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;
}
/* The two matching section openers reuse the single-hex accent below, so they
   need position: relative to anchor the pseudo-element to the content column
   (same as .home__approach-inner). */
.about__approach-inner,
.services__categories-inner {
  position: relative;
}
/* 4-cell honeycomb accent (honeycomb.njk) — a 1-2-1 diamond replacing the old
   single ::before hex, shared by the Home "My Approach", About "How I Work",
   and Services "Event Planning Services" openers. Four distinct brand tokens at
   0.35 opacity, 2px gap, no border. Cells are pointy-top hexagons on the same
   clip-path as page-header__hex; positioned absolutely within the *-inner
   (which stays position: relative). Decorative — aria-hidden, no pointer events.
   The dark-gray-olive 4th cell is a build-time visual tune. */
.honeycomb {
  position: absolute;
  top: -0.5rem;
  right: clamp(0.5rem, 3vw, 2rem);
  --hc-cell: clamp(48px, 6vw, 72px);
  --hc-h: calc(var(--hc-cell) * 1.155);
  width: calc(var(--hc-cell) * 2 + 2px);
  height: calc(var(--hc-h) * 2.5);
  pointer-events: none;
}
.honeycomb__cell {
  position: absolute;
  width: var(--hc-cell);
  aspect-ratio: 1 / 1.155;
  opacity: 0.35;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* Top cell — keeps golden-honey (matches the old single-hex instance). */
.honeycomb__cell--1 {
  left: calc(var(--hc-cell) / 2 + 1px);
  top: 0;
  background-color: var(--color-golden-honey);
}
/* Middle-left cell. */
.honeycomb__cell--2 {
  left: 0;
  top: calc(var(--hc-h) * 0.75 + 2px);
  background-color: var(--color-gray-olive);
}
/* Middle-right cell. */
.honeycomb__cell--3 {
  left: calc(var(--hc-cell) + 2px);
  top: calc(var(--hc-h) * 0.75 + 2px);
  background-color: var(--color-pastel-gray-orange);
}
/* Bottom cell. */
.honeycomb__cell--4 {
  left: calc(var(--hc-cell) / 2 + 1px);
  top: calc(var(--hc-h) * 1.5 + 4px);
  background-color: var(--color-dark-gray-olive);
}

/* Event Cards (event-cards.njk) -------------------------------------------- */
/* Shared "What I Do" grid for Home + Contact. Each card is a whole-card deep
   link into the matching Services row. Migrated from the former .home__event-*
   styling. */
.event-cards {
  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) {
  .event-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .event-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.event-cards__card {
  height: 100%;
  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;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.event-cards__card:hover,
.event-cards__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .event-cards__card {
    transition: none;
  }
  .event-cards__card:hover,
  .event-cards__card:focus-visible {
    transform: none;
  }
}
.event-cards__icon {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  fill: var(--color-golden-honey);
}
.event-cards__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;
}
.event-cards__blurb {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-body);
}
/* Title-only variant (Contact): name/header alone, no blurb. Center the
   icon + name so the shorter card doesn't read top-heavy. */
.event-cards--title-only .event-cards__card {
  justify-content: center;
}

/* (v2: the Home Testimonials section was removed — testimonials live only at
   /testimonials/. The former .home__testimonials* blocks were deleted here.) */

/* 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);
}

/* -----------------------------------------------------------------------------
 * .page-header (Sprint 4 item 2)
 *
 * Shared editorial banner topping About / Services / Testimonials. Full-
 * viewport-height band: a 2/3-width image pinned to one side, the remaining
 * third is the honey-cream body surface that holds a text card. The card
 * straddles the image's inner edge, overlapping it by O (--page-header-overlap).
 *
 * Geometry: flexbox. image-left = row (media first), image-right = row-reverse
 * (media last) — the modifier flips ONLY the side. The card is pulled toward
 * the image by a negative margin equal to O so its background bleeds O onto the
 * photo while the text still begins at the image boundary; the card's uniform
 * padding (= O) keeps the text off the bleed. `overflow: hidden` on the section
 * contains the bleed so the negative margin never causes horizontal scroll.
 *
 * Card color/opacity reuse the shared .hero__card--<token> palette modifiers
 * (set on the element in the njk) plus the --hero-card-bg / --hero-card-opacity
 * custom props. The ::before fill below mirrors .hero__card::before because that
 * rule is scoped to .hero__card only — this is the only thing re-stated, not
 * the 7-token palette table.
 * --------------------------------------------------------------------------- */
.page-header {
  /* O — the single rhythm unit: the card's internal padding, the gap above /
     below / outside the card, AND the distance the card bleeds onto the image.
     This is the DESKTOP value (2x); the mobile media query below restores the
     original smaller rhythm so phones are unchanged. */
  --page-header-overlap: clamp(3rem, 8vw, 6.5rem);

  position: relative;
  /* Sticky-parallax: isolate so the fixed photo (desktop, below) is confined to
     this stacking context. Later .section blocks (z-index 3, solid bg) then
     scroll up and cover the pinned photo — the same mechanism as the home hero. */
  isolation: isolate;
  display: flex;
  align-items: stretch;
  /* Match the home hero's height exactly: full viewport minus the 64px sticky
     header (see .hero `min-height: calc(100vh - 64px)`). */
  min-height: calc(100vh - 64px);
  overflow: hidden;
  background-color: var(--color-bg-body);
}
.page-header--image-left  { flex-direction: row; }
.page-header--image-right { flex-direction: row-reverse; }

/* Image — 2/3 of the band width, pinned to one side, fully covered. */
.page-header__media {
  flex: 0 0 66.6667%;
  position: relative;
  overflow: hidden;
}
/* The <picture> is absolutely positioned to FILL the media box, so the image
   never dictates the banner's height. (A portrait source would otherwise size
   by its own aspect ratio — width 2/3vw ÷ 0.68 ≈ 1.5×100vh — and blow the band
   far past full height.) The flex row's min-height:100vh + align-items:stretch
   give the media its height; the image just covers it. */
.page-header__media picture {
  position: absolute;
  inset: 0;
  display: block;
}
.page-header__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Top-anchor the cover crop (default is center). Used where the subject sits
   high in a tall portrait source — keeps the head in frame (Testimonials). */
.page-header--img-top .page-header__img {
  object-position: top;
}

/* Sticky-parallax (desktop ≥768px): pin the photo to the viewport so the card
   and the sections below scroll up over it — mirrors the home hero
   (.hero__backgrounds `position: fixed`). The 2/3-width media column still
   reserves its space in the flex row; the <picture> leaves flow and pins to the
   same on-screen region (below the 64px sticky header, full height, 2/3 wide).
   Later .section blocks (z-index 3, solid bg) cover it as they rise. Mobile
   keeps the photo in normal flow (base rule: absolute, inset:0) inside the
   stacked 60vh media box — see the mobile block. */
@media (min-width: 768px) {
  .page-header__media picture {
    position: fixed;
    inset: 64px auto 0 auto;   /* top below the 64px sticky header → viewport bottom */
    width: 66.6667vw;          /* matches the 2/3 media column */
    height: auto;
    z-index: 0;
  }
  .page-header--image-left  .page-header__media picture { left: 0; }
  .page-header--image-right .page-header__media picture { right: 0; }
}

/* Panel — the remaining third. A flex container so the single card fills it. */
.page-header__panel {
  flex: 1 1 33.3333%;
  display: flex;
  min-width: 0;
  /* Above the pinned photo so the card paints over it (mirrors .hero__content
     z-index: 2). The card also scrolls up and away while the photo stays put. */
  position: relative;
  z-index: 2;
}

/* Card — the contrast treatment. Fills the panel (minus the O rhythm) with
   SQUARE corners. Internal padding = O. The margins set the rhythm: O above /
   below / on the outer side, and -O on the image side so the card bleeds O onto
   the photo (the overlap). Content begins at the image boundary (card edge is
   -O onto the image; the +O padding lands the text back at the boundary). */
.page-header__card {
  flex: 1;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--page-header-overlap);
  text-align: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
.page-header--image-left .page-header__card {
  margin: var(--page-header-overlap) var(--page-header-overlap) var(--page-header-overlap) calc(-1 * var(--page-header-overlap));
}
.page-header--image-right .page-header__card {
  margin: var(--page-header-overlap) calc(-1 * var(--page-header-overlap)) var(--page-header-overlap) var(--page-header-overlap);
}

/* Background fill layer — identical pattern to .hero__card::before, re-stated
   because that rule is scoped to .hero__card. Color + opacity come from the
   shared --hero-card-bg / --hero-card-opacity custom props. */
.page-header__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;
}

/* Honeycomb accent — three palette-colored hexagons above the title (same hex
   shape as the Home "My Approach" motif). Identical on all three page-headers via
   the shared component; decorative (aria-hidden). */
.page-header__hexes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 1rem;
}
.page-header__hex {
  width: clamp(20px, 2.4vw, 30px);
  aspect-ratio: 1 / 1.155;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.page-header__hex--1 { background-color: var(--color-golden-honey); }
.page-header__hex--2 { background-color: var(--color-gray-olive); }
.page-header__hex--3 { background-color: var(--color-pastel-gray-orange); }

.page-header__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.08;
}
.page-header__tagline {
  margin: 0.85rem 0 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.page-header__intro {
  margin: 1rem 0 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.65;
}

/* Mobile collapse — full-width image at reduced height; the card drops to
   overlap the image's bottom edge. Both modifiers collapse to the same stacked
   layout. Padding rhythm + contrast preserved; side gutters kept. */
@media (max-width: 767.98px) {
  .page-header,
  .page-header--image-left,
  .page-header--image-right {
    flex-direction: column;
    min-height: 0;
    /* Restore the original (pre-double) rhythm on mobile — phones unchanged. */
    --page-header-overlap: clamp(1.5rem, 4vw, 3.25rem);
  }
  .page-header__media {
    flex: 0 0 auto;
    width: 100%;
    height: 60vh;
  }
  .page-header__panel {
    flex: 1 1 auto;
  }
  .page-header__card,
  .page-header--image-left  .page-header__card,
  .page-header--image-right .page-header__card {
    /* Drop up over the image's bottom edge; O gap on the sides and bottom. */
    margin: calc(-1 * var(--page-header-overlap)) var(--page-header-overlap) var(--page-header-overlap);
  }
}

/* -----------------------------------------------------------------------------
 * About page (Sprint 4 item 4)
 *
 * Five named sections after the page-header banner, then the shared closing
 * CTA (reuses .home__cta-* + .cta-button--closing). New blocks below cover the
 * page-specific layout: the Story headshot two-column, the "Why GHG" name
 * cards, and the Experience / Philosophy visual lists (projects, skills,
 * principles, what-sets-me-apart). Tokens only; clamp() spacing idiom.
 * --------------------------------------------------------------------------- */

/* Story — headshot beside the narrative; stacks on mobile. */
.about__story-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 768px) {
  .about__story-inner {
    grid-template-columns: 40% 1fr;
  }
}
.about__story-media {
  margin: 0;
}
.about__headshot-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(14px, 2vw, 22px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  object-fit: cover;
}
.about__story-text .section__title {
  margin-bottom: 1rem;
}

/* Why GHG — the two name-meaning blocks as cards. */
.about__why-lede {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: var(--color-text-body);
}
.about__why-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (min-width: 700px) {
  .about__why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.about__why-card {
  background-color: var(--color-honey-cream);
  border: 1px solid rgba(72, 73, 60, 0.12);
  border-left: 4px solid var(--color-golden-honey);
  border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 1.85rem);
}
.about__why-card-title {
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.2;
  color: var(--color-text-heading);
}
/* Bee sits inline before the title text (contrast with the Home What-I-Do
   cards, where the bee is stacked above the heading). Sized in em so it tracks
   the title; golden-honey fill matches the event-cards icon. */
.about__why-card-icon {
  width: 1.3em;
  height: 1.3em;
  flex: none;
  fill: var(--color-golden-honey);
}
.about__why-card-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.6;
  color: var(--color-text-body);
}
.about__why-close {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 60ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.5;
  color: var(--color-dark-gray-olive);
}

/* Experience + Philosophy shared subheading. */
.about__subheading {
  margin: clamp(2rem, 4vw, 2.75rem) 0 clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gray-olive);
}
.about__experience-intro {
  max-width: 60ch;
}

/* Recent Projects — small card grid. */
.services__projects {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 600px) {
  .services__projects {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .services__projects {
    grid-template-columns: repeat(3, 1fr);
  }
}
.services__project {
  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.4rem;
}
.services__project-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--color-text-heading);
}
.services__project-place {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* gray-olive (5.04:1 on honey-cream) — golden-honey here reads at only
     1.87:1 at this size, below the WCAG AA 4.5:1 body-text floor. */
  color: var(--color-gray-olive);
}
.services__project-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-body);
}

/* Skills & Strengths — chip row. */
.about__skills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.5vw, 0.9rem);
}
.about__skill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55em 1em;
  background-color: var(--color-bg-body);
  border: 1px solid rgba(106, 108, 49, 0.30);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--color-dark-gray-olive);
}
.about__skill-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: var(--color-golden-honey);
}

/* Philosophy — the three "Every…" principles. */
.about__principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (min-width: 900px) {
  .about__principles {
    grid-template-columns: repeat(3, 1fr);
  }
}
.about__principle {
  position: relative;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  background-color: var(--color-honey-cream);
  border-top: 4px solid var(--color-golden-honey);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.about__principle-title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.2;
  color: var(--color-text-heading);
}
.about__principle-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.3vw, 1.02rem);
  line-height: 1.6;
  color: var(--color-text-body);
}

/* (v2: "What Sets Me Apart" removed from About; its .about__apart* blocks
   were deleted here — the content is covered by My Philosophy above.) */

/* -----------------------------------------------------------------------------
 * Testimonials page (Sprint 4 item 4)
 *
 * One section looping all 7 entries through the testimonial-card component in a
 * responsive grid (NO carousel), then the shared closing CTA. New blocks: the
 * grid container (.testimonials__grid) and the card itself (.testimonial-card +
 * elements). Tokens only; clamp() spacing idiom; rgba() shadows mirror
 * .hero__card.
 * --------------------------------------------------------------------------- */
.testimonials__inner {
  text-align: left;
}
.testimonials__grid {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 768px) {
  /* Six-track base so rows can carry different column ratios. Even pairs take
     3+3 (1:1); the top row takes 4+2 (2:1); the featured card spans all six.
     grid-column is set only inside this query, so mobile stays single-column. */
  .testimonials__grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .testimonials__grid .testimonial-card {
    grid-column: span 3;
  }
  /* Top row is 2:1 — first card 4 tracks, second card 2. */
  .testimonials__grid .testimonial-card:nth-child(1) {
    grid-column: span 4;
  }
  .testimonials__grid .testimonial-card:nth-child(2) {
    grid-column: span 2;
  }
  /* Featured card spans the full width. */
  .testimonials__grid .testimonial-card--wide {
    grid-column: 1 / -1;
  }
}

.testimonial-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background-color: var(--color-honey-cream);
  border: 1px solid rgba(72, 73, 60, 0.12);
  border-radius: clamp(14px, 2vw, 20px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.testimonial-card__headline {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  color: var(--color-text-heading);
}
.testimonial-card__quote {
  margin: 0 0 1.25rem;
  padding: 0;
  border-left: 3px solid var(--color-golden-honey);
  padding-left: clamp(0.85rem, 1.6vw, 1.1rem);
}
.testimonial-card__quote p {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.02rem);
  line-height: 1.65;
  color: var(--color-text-body);
}
.testimonial-card__attribution {
  margin-top: auto;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray-olive);
}

/* -----------------------------------------------------------------------------
 * Contact page (v2 build-out)
 *
 * The intro (eyebrow + title + Baileigh's supplied paragraph) uses the shared
 * section primitives and the 4-cell honeycomb accent — same treatment as Home
 * "My Approach", About "How I Work", and Services "Event Planning Services".
 * position: relative anchors the absolutely-positioned honeycomb. Tokens only.
 * --------------------------------------------------------------------------- */
.contact__intro-inner {
  position: relative;
}

/* Path split section — image left / content right. Grid values mirror
   .home__welcome-inner and the chips mirror .about__skill, duplicated under
   contact-scoped classes rather than reused cross-page (chips here are links,
   About's are plain <li>s). Tokens only. */
.contact__path-inner {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
/* Desktop: image on the left, path list on the right; the event-type chips row
   spans both columns beneath. Mobile keeps the single-column stack (image
   first), so the image sits above the content. */
@media (min-width: 768px) {
  .contact__path-inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
  .contact__path-types {
    grid-column: 1 / -1;
  }
}
.contact__path-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: clamp(14px, 2vw, 18px);
}
/* Numbered path — semantic <ol>; the visible 1–5 comes from the list markers. */
.contact__path-steps {
  margin: 1.25rem 0 0;
  padding: 0 0 0 1.5em;
}
.contact__path-step {
  margin-bottom: 0.6em;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--color-dark-gray-olive);
}
.contact__path-step:last-child {
  margin-bottom: 0;
}
/* Subheading — same treatment as .about__subheading. Top spacing comes from
   the grid gap now that the types row is its own grid child. */
.contact__path-subheading {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gray-olive);
}
/* Event-type chips — .about__skill values, rendered as deep links. */
.contact__path-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.5vw, 0.9rem);
}
.contact__path-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55em 1em;
  background-color: var(--color-bg-body);
  border: 1px solid rgba(106, 108, 49, 0.30);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--color-dark-gray-olive);
  text-decoration: none;
}
.contact__path-chip:focus-visible {
  outline: 2px solid var(--color-golden-honey);
  outline-offset: 2px;
}
.contact__path-chip-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: var(--color-golden-honey);
}

/* -----------------------------------------------------------------------------
 * Services page (Sprint 4 item 5)
 *
 * (v2) Named sections after the page-header banner, then the shared closing CTA
 * (reuses .home__cta-* + .cta-button--closing). Blocks below:
 *   .services__lede / .services__investment-body — the intro + Investment narrative.
 *   .services__project*            — Recent Projects card grid (relocated from About).
 *   .event-types / .event-type__*  — the 9-up image grid component.
 *   .process / .process__*         — the numbered "What To Expect" 5-step sequence.
 * Tokens only (palette + aliases); clamp() spacing idiom. Grids use auto-fit /
 * fixed-count + gap so there is no horizontal scroll at 375px or 1440px.
 * --------------------------------------------------------------------------- */

/* How I Can Help lede ------------------------------------------------------- */
.services__lede {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 68ch;
}
/* (v2: the 4 service-category boxes were removed — .services__category* and
   .services__capabilit* blocks deleted. The narrative intro is the lede only.) */

/* Investment narrative ------------------------------------------------------ */
.services__investment-body {
  max-width: 68ch;
}

/* Event types grid (component) ---------------------------------------------- */
.event-types {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (min-width: 600px) {
  .event-types {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .event-types {
    grid-template-columns: repeat(3, 1fr);
  }
}
.event-type {
  /* Deep-link target: rest fully visible below the 64px sticky header when a
     "What I Do" card jumps to /services/#<anchor>. */
  scroll-margin-top: calc(64px + 1rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-honey-cream);
  border: 1px solid rgba(72, 73, 60, 0.10);
  border-radius: clamp(14px, 2vw, 18px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.event-type:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
.event-type__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.event-type__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-type__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1rem, 2vw, 1.35rem);
}
.event-type__name {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--color-text-heading);
}
.event-type__blurb {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-body);
}

/* What to Expect — numbered process ----------------------------------------- */
.process {
  list-style: none;
  counter-reset: process;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (min-width: 768px) {
  .process {
    grid-template-columns: repeat(2, 1fr);
  }
}
.process__step {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.85rem, 1.8vw, 1.25rem);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  background-color: var(--color-honey-cream);
  border: 1px solid rgba(72, 73, 60, 0.12);
  border-radius: clamp(14px, 2vw, 20px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.process__number {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.4rem, 5vw, 3rem);
  height: clamp(2.4rem, 5vw, 3rem);
  border-radius: 50%;
  background-color: var(--color-golden-honey);
  color: var(--color-dark-grey);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1;
}
.process__content {
  min-width: 0;
}
.process__step-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.25;
  color: var(--color-text-heading);
}
.process__step-blurb {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.3vw, 1.02rem);
  line-height: 1.6;
  color: var(--color-text-body);
}

/* (v2: pricing-packages.njk retired — no price is published. The former
   .pricing-package* blocks were deleted; the Investment section renders the
   narrative .services__investment-body only.) */