/* ================================================================
   Self-hosted fonts and all design tokens now live in tokens.css,
   which loads before this file on every page. Edit them there.
   See /css/tokens.css
================================================================ */

/* ================================================================
   Bliss Events | styles.css
   Hero + Intro sections. Mobile-first.

   Architecture follows bn-foundation.md:
   - Design tokens in /css/tokens.css (loaded before this file)
   - Modern CSS reset
   - Typography utilities
   - Accessibility utilities
   - Section-specific styles
   - Responsive breakpoints (768, 1024, 1440)
   - Reduced motion
   - Print

   Bliss-specific brand tokens override bn-foundation generic
   defaults. All spacing uses the --space-* scale (4px base).
   All colors use oklch or the Bliss hex constants, all defined
   in /css/tokens.css. No hardcoded magic values in component rules.
================================================================ */


/* ────────────────────────────────────────────────────────────
   Design tokens (brand palette, type scale, spacing, radius, etc.)
   now live in /css/tokens.css, loaded before this file.
──────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────
   Modern CSS Reset: bn-foundation standard
──────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Light-only site: keep all native UI (date-picker calendar, select menus,
     scrollbars) rendering light even in a dark-mode browser or OS, so native
     controls match the brand palette instead of inverting to dark. */
  color-scheme: light;
}

body {
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--bliss-cream);
  color: var(--bliss-charcoal);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: var(--text-base);
}

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

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

p, li {
  text-wrap: pretty;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0;
}


/* ────────────────────────────────────────────────────────────
   Typography Utilities
──────────────────────────────────────────────────────────── */

/* Hero display: Poppins Thin. Static over photography. */
.hero-display {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
  color: var(--hero-text);
  /* Soft shadow: holds glyph edges over busy or light photo areas as a safety
     net beyond the scrim. Subtle, not a hard drop shadow. */
  text-shadow: 0 1px 12px oklch(0.20 0.03 155 / 0.45);
}

/* Hero supporting line: Poppins Regular, smaller, slightly reduced opacity */
.hero-subline {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--hero-text);
  opacity: 0.82;
  text-shadow: 0 1px 10px oklch(0.20 0.03 155 / 0.45);
}


/* ────────────────────────────────────────────────────────────
   Accessibility Utilities: bn-foundation standard
──────────────────────────────────────────────────────────── */

/* Skip nav: visually hidden until focused */
.skip-nav {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-nav:focus-visible {
  position: fixed;
  left: var(--space-4);
  top: var(--space-4);
  width: auto;
  height: auto;
  z-index: var(--z-debug);
  padding: var(--space-3) var(--space-6);
  background: var(--bliss-cream);
  color: var(--bliss-charcoal);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--bn-radius-md);
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.16);
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
}

/* Global focus: none by default, visible on keyboard only */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
}

/* Screen reader utility */
.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;
}


/* ────────────────────────────────────────────────────────────
   Navigation
   Transparent over hero (default), Blush on scroll (.is-scrolled).
   Desktop: logo left, links right, hamburger hidden.
   Mobile: logo left, hamburger right, links hidden.
──────────────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 280ms ease, border-color 280ms ease;
}

/* Soft top-down scrim behind the transparent nav/logo so they stay legible
   over light hero photography. Fades out before mid-header. Removed once the
   header gains its solid blush background on scroll. */
.site-header:not(.is-scrolled)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 160%;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    oklch(0.20 0.03 155 / 0.60) 0%,
    oklch(0.20 0.03 155 / 0.32) 50%,
    oklch(0.20 0.03 155 / 0)   100%
  );
}

.site-header.is-scrolled {
  background-color: var(--bliss-blush);
  border-bottom-color: oklch(0.68 0.05 30 / 0.3);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
  height: 96px;  /* Fixed height (was 72px; +24px = 12px more above and below the logo). Does not change on scroll. */
  position: relative;  /* Anchor for absolutely-positioned stacked logo */
}


/* ─── Logo ─────────────────────────────────────────────── */

/* Logo link: color drives the SVG fill via currentColor */
/* ─── Stacked logo (all viewports) ──────────────────────── */

/* Centered in the 96px header bar on all viewports.
   Desktop transparent state: anchored from top and taller (see @768 below).
   Desktop scrolled state: returns to centered, smaller.
   Color: Cream over hero, Evergreen on Blush scrolled bar. */
.nav__logo-stacked {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--hero-text);
  transition: color 200ms ease;
}

.site-header.is-scrolled .nav__logo-stacked {
  color: var(--bliss-evergreen);
}

/* Mobile: 50.6px (44px +15%) fits cleanly within the 96px header bar */
.nav__logo-stacked-svg {
  height: 50.6px;
  width: auto;
  display: block;
  overflow: visible;
}

.site-header:not(.is-scrolled) .nav__logo-stacked:focus-visible {
  outline-color: var(--hero-text);
}

@media (min-width: 768px) {

  /* Desktop transparent state: larger, anchored 39px from top (27px +12px above) */
  .site-header:not(.is-scrolled) .nav__logo-stacked {
    top: 39px;
    transform: translateX(-50%);
  }

  /* Desktop scrolled: vertically centered */
  .site-header.is-scrolled .nav__logo-stacked {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Desktop transparent: 98.9px (86px +15%) */
  .nav__logo-stacked-svg {
    height: 98.9px;
  }

  /* Desktop scrolled: 67.85px (59px +15%) */
  .site-header.is-scrolled .nav__logo-stacked-svg {
    height: 67.85px;
  }

}


/* ─── Desktop nav links ────────────────────────────────── */

/* Hidden on mobile by default; shown at 768px */
.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-8);
}

.nav__links a {
  display: inline-block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0;
  /* 44px touch target via line-height */
  min-height: 44px;
  line-height: 44px;
  position: relative;
  /* Cream in transparent state */
  color: var(--hero-text);
  transition: color 150ms ease;
}

/* Transparent state: 21% larger than sticky */
.site-header:not(.is-scrolled) .nav__links a {
  font-size: calc(var(--text-base) * 1.21);
}

/* Hover: Blush in transparent state (acknowledges interaction, distinct from Cream) */
.nav__links a:hover {
  color: var(--bliss-blush);
}

/* Scrolled state: Evergreen links on Blush background */
.site-header.is-scrolled .nav__links a {
  color: var(--bliss-evergreen);
}

.site-header.is-scrolled .nav__links a:hover {
  color: var(--bliss-header-hover);
}

/* Active page indicator: 2px line below the link text */
.nav__links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
}

/* Transparent state: Blush indicator (visible against dark photography) */
.site-header:not(.is-scrolled) .nav__links a[aria-current="page"]::after {
  background: var(--bliss-blush);
}

/* Scrolled state: Evergreen indicator on Cream background */
.site-header.is-scrolled .nav__links a[aria-current="page"] {
  color: var(--bliss-evergreen);
}

.site-header.is-scrolled .nav__links a[aria-current="page"]::after {
  background: var(--bliss-evergreen);
}

/* Cream focus ring in transparent state */
.site-header:not(.is-scrolled) .nav__links a:focus-visible {
  outline-color: var(--hero-text);
}


/* ─── Hamburger button ─────────────────────────────────── */

/* Shown on mobile; hidden at 768px */
.nav__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin-left: auto;  /* Pushes to right edge regardless of other flex children */
  /* Inherits Cream (transparent state) or Charcoal (scrolled) via color cascade */
  color: var(--hero-text);
  transition: color 200ms ease;
}

.site-header.is-scrolled .nav__hamburger {
  color: var(--bliss-evergreen);
}

/* Cream focus ring in transparent state */
.site-header:not(.is-scrolled) .nav__hamburger:focus-visible {
  outline-color: var(--hero-text);
}


/* ────────────────────────────────────────────────────────────
   Mobile Navigation Overlay
   Fullscreen Cream background. Appears via .is-open class.
   Typography: Playfair Display Regular at large scale.
   Focus trap is managed by JavaScript.
──────────────────────────────────────────────────────────── */

/* Body scroll lock when overlay is open */
body.nav-open {
  overflow: hidden;
}

.nav__overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) + 1);   /* Sits above the header (z-nav: 100) */
  background-color: var(--bliss-cream);

  /* Fade-in/out via opacity. pointer-events: none prevents interaction when hidden. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

/* JS adds .is-open when hamburger is activated */
.nav__overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Close button: top-right, matching hamburger position.
   z-index: 1 ensures it renders above .nav__overlay-nav (position:absolute,
   inset:0) which otherwise intercepts pointer events in the close button zone. */
.nav__close {
  position: absolute;
  top: 0;
  right: var(--space-8);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 96px;  /* Matches header height for consistent close button position */
  color: var(--bliss-charcoal);
  transition: color 150ms ease;
}

.nav__close:hover {
  color: var(--bliss-evergreen);
}

/* The close button is a tall 44x96 hit area, so the global focus-visible ring
   wraps it as an elongated vertical box around the X (and iOS can show this on
   open). Suppress the ring on the button and put a compact, keyboard-only ring
   on the icon instead, so the box is gone but focus stays visible for keyboard. */
.nav__close:focus-visible {
  outline: none;
}

.nav__close:focus-visible svg {
  outline: var(--bn-focus-ring);
  outline-offset: 6px;
  border-radius: var(--bn-radius-sm);
}

/* Nav links: centered vertically and horizontally in the overlay */
.nav__overlay-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav__overlay-nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
}

/* Playfair Display at large scale. Quietly editorial. */
.nav__overlay-nav a {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.4rem + 1.75vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--bliss-charcoal);
  transition: color 150ms ease;
}

.nav__overlay-nav a:hover {
  color: var(--bliss-evergreen);
}

.nav__overlay-nav a[aria-current="page"] {
  color: var(--bliss-evergreen);
}

/* Stacked logo: anchors the top-center of the overlay */
/* ────────────────────────────────────────────────────────────
   Hero Section
──────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100dvh;   /* dvh: accounts for mobile browser chrome */
  overflow: hidden;
  background-color: var(--hero-placeholder-1);  /* Fallback until images load */
}


/* ─── Hero Images ──────────────────────────────────────── */

.hero__images {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

.hero__picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* No background on the picture containers. A solid container background here
     sits ON TOP of the image stack during a crossfade (the outgoing picture is
     z-index 2) and bleeds through as the outgoing image fades, hiding the
     incoming image beneath it. The single .hero background below is the only
     pre-load fallback needed. */
  background-color: transparent;
}

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--img-focal-x, 50%) var(--img-focal-y, 50%);

  /* GPU compositing layer. Cost paid once at load, not at transition onset */
  will-change: opacity;

  /* Opacity transition: the crossfade.
     Timing is controlled by JavaScript (requestAnimationFrame + setTimeout).
     CSS provides the easing curve. */
  transition: opacity var(--hero-fade);

  /* Suppress broken-image alt text rendering (images carry accessible alt text
     but the visual broken-image state is handled by the container background) */
  color: transparent;
}

/* Image 1 is visible by default (no JS required).
   Images 2 and 3 are hidden; JavaScript manages the sequence.
   This ensures Image 1 is always visible even without JS. */
.hero__img--1 { opacity: 1; }
.hero__img--2 { opacity: 0; }
.hero__img--3 { opacity: 0; }


/* ─── Hero Overlay ─────────────────────────────────────── */

/* Cream gradient rising from the bottom quarter.
   Protects text legibility without altering the photograph above.
   Tier 2 overlay as specified in the motion strategy document. */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-card);
  pointer-events: none;
  /* Soft dark scrim rising from the bottom. Gives the cream copy a darker bed
     so it stays legible over light photography, while the upper two-thirds of
     the image stay clean and bright. */
  background: linear-gradient(
    to top,
    oklch(0.20 0.03 155 / 0.55) 0%,   /* Deep evergreen-tinted dark at bottom */
    oklch(0.20 0.03 155 / 0.30) 25%,
    oklch(0.20 0.03 155 / 0)   55%    /* Fully transparent above the copy */
  );
}


/* ─── Hero Content ─────────────────────────────────────── */

/* Copy block: lower portion of hero on mobile, lower-left on desktop.
   Typography is fully static. No animation, no entrance effects. */
.hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-card) + 10);

  /* Mobile: generous padding, content sits in lower 35-40% of viewport */
  padding: var(--space-8) var(--space-8) var(--space-12);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}


/* ─── Hero CTA Button ──────────────────────────────────── */

.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;        /* Full width on mobile. Touch target requirement */
  min-height: 56px;   /* 56px minimum on mobile */
  padding-inline: var(--space-8);

  background-color: var(--hero-btn-bg);
  color: var(--hero-btn-text);

  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--bn-transition), color var(--bn-transition);
}

.btn-hero:hover {
  background-color: var(--bliss-blush);
  color: var(--bliss-evergreen);
}

.btn-hero:focus-visible {
  outline: 2px solid var(--hero-text);
  outline-offset: 3px;
}


/* ─── Hero Pause Control ───────────────────────────────── */

.hero__pause {
  position: absolute;
  /* Mobile/tablet: sit clear ABOVE the full-width CTA button (which spans the
     bottom of the hero). Desktop alignment level with the CTA is set in the
     >=1024px breakpoint, where the CTA becomes auto-width on the left. */
  bottom: calc(var(--space-24) + var(--space-12));
  right: var(--space-8);
  z-index: calc(var(--z-card) + 10);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;

  /* Cream chip + evergreen icon, mirroring the brand CTA buttons.
     The solid disc guarantees consistent contrast over bright or dark
     hero photography, where a flat icon of any single color gets lost. */
  color: var(--bliss-evergreen);
  background-color: var(--bliss-cream);
  opacity: 0.75;
  border-radius: var(--bn-radius-full);
  transition: opacity var(--bn-transition);
  cursor: pointer;
}

.hero__pause:hover {
  opacity: 1;
}

/* Evergreen outline for focus against the cream chip */
.hero__pause:focus-visible {
  opacity: 1;
  outline-color: var(--bliss-evergreen);
}

/* Show pause icon when playing (aria-pressed="false") */
.hero__pause-icon--pause { display: block; }
.hero__pause-icon--play  { display: none;  }

/* Show play icon when paused (aria-pressed="true") */
.hero__pause[aria-pressed="true"] .hero__pause-icon--pause { display: none;  }
.hero__pause[aria-pressed="true"] .hero__pause-icon--play  { display: block; }


/* ────────────────────────────────────────────────────────────
   Intro Section
──────────────────────────────────────────────────────────── */

.intro {
  background-color: var(--bliss-cream);
  padding-block: var(--section-pad);
}

/* Content container: max-width with centered margins */
.intro__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);

  /* Mobile: block flow: image first in DOM order, then heading, then copy */
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}


/* ─── Intro Image ─────────────────────────────────────── */

.intro__media {
  /* On mobile: appears first (DOM order is image then copy).
     On desktop: CSS grid repositions it to the right column. */
  flex-shrink: 0;
}

.intro__image-wrap {
  aspect-ratio: 4/5;   /* Near-portrait crop on mobile */
  overflow: hidden;
  /* Subtle rounded corners matching the Portfolio image frames. */
  border-radius: var(--bn-radius-sm);
  /* Cream loading frame so the reserved box matches the page (not a
     pale square) before the photo paints; image fades in via .js-reveal. */
  background-color: var(--bliss-cream);
}

.intro__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;  /* Adjust per actual image focal point */
  color: transparent;  /* Suppress broken-image alt text rendering */
}


/* ─── Intro Copy ─────────────────────────────────────── */

.intro__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* H1: Poppins Thin, Evergreen. Sits inside the copy column. */
.intro__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
  color: var(--bliss-evergreen);
}

/* Body paragraphs */
.intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.intro__body p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--bliss-charcoal);
  max-width: 68ch;  /* Readable line length */
}

/* Inline link within the Intro copy */
.intro__link {
  color: var(--bliss-evergreen);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--bn-transition);
}

.intro__link:hover {
  text-decoration-thickness: 2px;
}

.intro__link:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
  text-decoration: none;
}


/* ────────────────────────────────────────────────────────────
   Trust Strip
──────────────────────────────────────────────────────────── */

.trust-strip {
  background-color: var(--bliss-cream);
  padding-block: var(--space-8);
}

/* Small editorial label above the recognition logos. Kept restrained and
   secondary to the marks: eyebrow scale, muted, centered. */
.trust-strip__heading {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bliss-evergreen);
  text-align: center;
  padding-inline: var(--space-8);
  margin-bottom: var(--space-6);
  opacity: 0.75;
}

.trust-strip__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* Wider column-gap so the two captions get clear air between them on
     desktop; tighter row-gap keeps them close when they stack on mobile. */
  gap: var(--space-6) var(--space-12);
}

.trust-strip__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--bliss-evergreen);
  text-decoration: none;
  transition: opacity 150ms ease;
}

.trust-strip__mark:is(a):hover {
  opacity: 0.7;
}

.trust-strip__label {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bliss-evergreen);
}

.trust-strip__sublabel {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--bliss-charcoal);
  opacity: 0.65;
}

/* Award/review logo wordmark. Sized by a uniform height so the two
   logos balance regardless of their individual aspect ratios; width
   scales automatically. Same treatment on mobile and desktop. */
.trust-strip__badge {
  display: block;
  width: auto;
  height: 2.25rem; /* 36px */
}


/* ────────────────────────────────────────────────────────────
   Services Overview
──────────────────────────────────────────────────────────── */

.services {
  background-color: var(--bliss-cream);
  padding-block: var(--section-pad);
}

/* Homepage only: a fixed 75px total gap between the intro section (which ends
   with the photo + credit) and the "Three Ways to Work Together" services
   section. The two facing paddings are zeroed so the 75px margin is the WHOLE
   gap, exact at every breakpoint (independent of the responsive --section-pad).
   Scoped via .intro + .services, a pairing that only occurs on the home page;
   both sections and the body are cream, so the gap is seamless. */
.intro {
  padding-bottom: 0;
}
.intro + .services {
  margin-top: 75px;
  padding-top: 0;
}

.services__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.services__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
  color: var(--bliss-evergreen);
  margin-bottom: var(--space-12);
}

.services__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.services__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-10);
  border-bottom: 1px solid oklch(0.68 0.03 80 / 0.2);
}

.services__card:first-child {
  padding-top: 0;
}

.services__card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.services__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--bliss-evergreen);
}

.services__body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--bliss-charcoal);
  max-width: 60ch;
}

.services__link {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--bliss-evergreen);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 150ms ease;
  align-self: flex-start;
}

.services__link:hover {
  text-decoration-thickness: 2px;
}

.services__link:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
  text-decoration: none;
}

/* Mobile: give the primary service CTAs a >=44px touch target.
   inline-flex keeps the link sized to its text (underline unchanged);
   min-height + centered alignment grows the tappable area only. */
@media (max-width: 767px) {
  .services__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* ────────────────────────────────────────────────────────────
   Why Bliss Events
──────────────────────────────────────────────────────────── */

.why-bliss {
  background-color: var(--bliss-why-bliss-bg);
  padding-block: var(--section-pad);
}

.why-bliss__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

/* Intro block: eyebrow, editorial statement heading, and a lead line.
   Left-aligned and width-limited to match the rest of the homepage. */
.why-bliss__intro {
  max-width: 56ch;
  margin-bottom: var(--space-16);
}

.why-bliss__eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bliss-mint);
  margin-bottom: var(--space-4);
}

.why-bliss__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
  color: var(--bliss-why-bliss-text);
}

.why-bliss__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--bliss-why-bliss-text);
  opacity: 0.88;
  margin-top: var(--space-5);
}

.why-bliss__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* Each point opens with a fine cream hairline and a mint index number,
   giving the grid an intentional editorial rhythm rather than a feature grid. */
.why-bliss__theme {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid oklch(0.96 0.04 78 / 0.18);
}

.why-bliss__num {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--bliss-mint);
  margin-bottom: var(--space-1);
}

.why-bliss__label {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--bliss-why-bliss-text);
}

.why-bliss__body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--bliss-why-bliss-text);
  opacity: 0.82;
  max-width: 52ch;
}


/* ────────────────────────────────────────────────────────────
   Team / Human Moment
──────────────────────────────────────────────────────────── */

.team {
  background-color: var(--bliss-garnet);
  padding-block: var(--section-pad);
}

.team__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.team__image-wrap {
  aspect-ratio: 5/4;
  overflow: hidden;
  /* Subtle rounded corners matching the Portfolio image frames. */
  border-radius: var(--bn-radius-sm);
  /* Cream loading frame (matches the page); image fades in via .js-reveal. */
  background-color: var(--bliss-cream);
}

.team__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.team__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
  color: var(--bliss-cream);
}

.team__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.team__body p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--bliss-cream);
}

.team__link {
  color: var(--bliss-cream);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 150ms ease;
}

.team__link:hover {
  text-decoration-thickness: 2px;
}

.team__link:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
  text-decoration: none;
}


/* ────────────────────────────────────────────────────────────
   Editorial Image Pause
──────────────────────────────────────────────────────────── */

.editorial-pause {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background-color: var(--intro-placeholder);  /* fallback while images load */
}

/* The image stack. Its aspect-ratio defines the section height; the three
   pictures are absolutely stacked inside it for the crossfade. */
.editorial-pause__images {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;   /* mobile crop */
}

.editorial-pause__picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.editorial-pause__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  will-change: opacity;
  transition: opacity var(--hero-fade);   /* shared crossfade curve */
  color: transparent;                     /* suppress broken-image alt flash */
}

/* Slide 1 visible by default (no JS required); 2 and 3 hidden. */
.editorial-pause__img--1 { opacity: 1; }
.editorial-pause__img--2 { opacity: 0; }
.editorial-pause__img--3 { opacity: 0; }

/* Pause/play control. Cream chip + Evergreen icon, mirroring the hero. */
.editorial-pause__pause {
  position: absolute;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: calc(var(--z-card) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--bliss-evergreen);
  background-color: var(--bliss-cream);
  opacity: 0.75;
  border: none;
  border-radius: var(--bn-radius-full);
  transition: opacity var(--bn-transition);
  cursor: pointer;
  line-height: 0;
}

.editorial-pause__pause:hover { opacity: 1; }

.editorial-pause__pause:focus-visible {
  opacity: 1;
  outline-color: var(--bliss-evergreen);
}

.editorial-pause__pause-icon--pause { display: block; }
.editorial-pause__pause-icon--play  { display: none;  }

.editorial-pause__pause[aria-pressed="true"] .editorial-pause__pause-icon--pause { display: none;  }
.editorial-pause__pause[aria-pressed="true"] .editorial-pause__pause-icon--play  { display: block; }


/* ────────────────────────────────────────────────────────────
   Testimonials
──────────────────────────────────────────────────────────── */

.testimonials {
  background-color: var(--bliss-cream);
  padding-block: var(--section-pad);
}

.testimonials__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.testimonials__pull {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--bliss-garnet);
  text-align: center;
  max-width: 58ch;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

/* Garnet opening mark, a single color note on an otherwise Evergreen type moment */
.testimonials__pull-mark {
  color: var(--bliss-garnet);
}

.testimonials__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.testimonials__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid oklch(0.68 0.03 80 / 0.2);
}

.testimonials__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.testimonials__quote {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--bliss-charcoal);
}

/* Open mark on the first paragraph, close on the last, so multi-paragraph
   verbatim quotes (e.g. the Cheers page) read as one quotation, not several. */
.testimonials__quote p:first-of-type::before {
  content: '\201C';
}

.testimonials__quote p:last-of-type::after {
  content: '\201D';
}

.testimonials__attribution {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--bliss-charcoal);
  opacity: 0.6;
  letter-spacing: 0.04em;
}

/* Spacing between paragraphs of a single multi-paragraph quote */
.testimonials__quote p + p {
  margin-top: var(--space-4);
}

/* Full-testimonial flow (Cheers): long verbatim quotes read best in one
   centered, readable column rather than the 3-up grid used for pull quotes.
   Centered on the page so it shares the intro/sign-off/CTA spine; the quote
   text itself stays left-aligned for long-form readability. */
.testimonials__grid--single {
  max-width: 72ch;
  margin-inline: auto;
}

/* Cheers attribution as a two-line hierarchy: the couple (or vendor) name
   leads in Evergreen at full strength, the venue/role sits beneath as a
   quiet uppercase eyebrow. Scoped to the single-column flow, so the 3-up
   pull quotes elsewhere keep their existing one-line treatment. */
.testimonials__grid--single .testimonials__attribution {
  opacity: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  letter-spacing: normal;
}

.testimonials__grid--single .testimonials__name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--bliss-evergreen);
  letter-spacing: 0.01em;
}

.testimonials__grid--single .testimonials__detail {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--bliss-charcoal);
  opacity: 0.72;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* A little more air between paragraphs of the long multi-paragraph quotes
   (e.g. Julie & Lawrence), scoped to the Cheers single-column flow. */
.testimonials__grid--single .testimonials__quote p + p {
  margin-top: var(--space-6);
}

/* ── Cheers full-testimonial cards ──────────────────────────────────
   Every verbatim quote (couples + vendors) sits in a slim Garnet-anchored
   card with a small Blush opening quote and a clear name/venue, separated
   by space rather than rules. Scoped to the single-column flow (Cheers);
   the .testimonials prefix keeps these ahead of the responsive divider
   rules regardless of source order. */
.testimonials .testimonials__grid--single {
  gap: var(--space-16);
}

.testimonials .testimonials__grid--single .testimonials__item {
  position: relative;
  border-left: 2px solid var(--bliss-garnet);
  border-bottom: none;
  padding: var(--space-5) 0 0 var(--space-8);
}

.testimonials .testimonials__grid--single .testimonials__quote {
  position: relative;
  z-index: 1;
}

/* Blush opening quote replaces the inline opening mark; the closing mark stays */
.testimonials .testimonials__grid--single .testimonials__quote p:first-of-type::before {
  content: none;
}

.testimonials .testimonials__grid--single .testimonials__item::before {
  content: '\201C';
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 2.9rem;
  line-height: 1;
  color: var(--bliss-blush);
  position: absolute;
  top: -0.05em;
  left: var(--space-4);
  z-index: 0;
  pointer-events: none;
}

/* Review-platform logos as compact trust chips */
.testimonials__reviews .testimonials__review-link {
  padding: var(--space-3) var(--space-6);
  border: 1px solid oklch(0.30 0.09 155 / 0.18);
  border-radius: var(--bn-radius-full);
  background: var(--bliss-cream);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.testimonials__reviews .testimonials__review-link:hover {
  border-color: var(--bliss-evergreen);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px oklch(0.30 0.09 155 / 0.10);
  opacity: 1;
}

/* Centered section heading, ties the testimonial sections to the page's
   centered intro, sign-off, and CTA. */
.page-section__heading--center {
  text-align: center;
}

/* Brand heart as a section eyebrow. Carries its own blush + evergreen,
   the page's controlled note of color. Decorative, hidden from a11y tree. */
.testimonials__mark {
  display: block;
  width: 84px;
  height: auto;
  margin: 0 auto var(--space-5);
}

/* Faint evergreen dividers between testimonials (Cheers single-column flow) */
.testimonials__grid--single .testimonials__item {
  border-bottom-color: oklch(0.30 0.09 155 / 0.15);
}

/* Brand sign-off, the page's closing note in the team's own words */
.testimonials__pull--signoff {
  margin-top: var(--space-16);
  margin-bottom: 0;
}

/* The page's single sanctioned full-bleed moment: the brand sign-off on a
   Garnet band with Cream text, mirroring the Love page's Cabernet feature
   band. One controlled break in the cream canvas, right before the CTA. */
.signoff-band {
  background-color: var(--bliss-garnet);
  padding-block: var(--section-pad);
  padding-inline: var(--space-8);
}

.signoff-band__text {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--bliss-cream);
  text-align: center;
  max-width: 58ch;
  margin-inline: auto;
}

/* "Read more reviews on" platform links closing the couples reviews.
   Logos stay full-color; the row centers and wraps if space is tight. */
.testimonials__reviews {
  /* Match the intro -> reviews gap (one --section-pad) so the spacing above the
     heart eyebrow equals the margin above the reviews block. Cheers-only. */
  margin-bottom: var(--section-pad);
  text-align: center;
}

.testimonials__reviews-label {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bliss-evergreen);
  margin-bottom: var(--space-5);
}

.testimonials__reviews-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.testimonials__review-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-1);
  transition: opacity 150ms ease;
}

.testimonials__review-link:hover {
  opacity: 0.7;
}

.testimonials__review-link:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
}

.testimonials__review-logo {
  display: block;
  width: auto;
  height: 1.75rem; /* 28px */
}

/* Mobile: shrink the logos and tighten the gap so all three review
   platforms stay on a single centered row instead of orphaning one. */
@media (max-width: 767px) {
  .testimonials__reviews-list {
    gap: var(--space-4) var(--space-5);
  }

  .testimonials__review-logo {
    height: 1.5rem; /* 24px */
  }
}


/* ────────────────────────────────────────────────────────────
   FAQ Accordion
──────────────────────────────────────────────────────────── */

.faq {
  background-color: var(--bliss-cream);
  padding-block: var(--section-pad);
}

.faq__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.faq__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
  color: var(--bliss-evergreen);
  margin-bottom: var(--space-10);
}

.faq__list {
  border-top: 1px solid oklch(0.68 0.03 80 / 0.2);
}

.faq__item {
  border-bottom: 1px solid oklch(0.68 0.03 80 / 0.2);
}

.faq__question {
  margin: 0;
}

.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding-block: var(--space-4);
  padding-inline: 0;
  gap: var(--space-6);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--bliss-charcoal);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 150ms ease;
}

.faq__btn:hover {
  color: var(--bliss-evergreen);
}

.faq__btn:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
}

.faq__btn[aria-expanded="true"] {
  color: var(--bliss-evergreen);
}

.faq__chevron {
  flex-shrink: 0;
  color: var(--bliss-evergreen);
  transition: transform 250ms ease;
}

.faq__btn[aria-expanded="true"] .faq__chevron {
  transform: rotate(180deg);
}

.faq__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms ease;
}

.faq__item.is-open .faq__panel {
  max-height: 1000px;
}

.faq__answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-2) var(--space-6);
}

.faq__answer p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--bliss-charcoal);
}

.faq__link {
  color: var(--bliss-evergreen);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 150ms ease;
}

.faq__link:hover {
  text-decoration-thickness: 2px;
}

.faq__link:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
  text-decoration: none;
}


/* ────────────────────────────────────────────────────────────
   Final CTA
──────────────────────────────────────────────────────────── */

.final-cta {
  background-color: var(--bliss-cta-bg);
  padding-block-start: var(--section-pad);
  padding-block-end: calc(var(--section-pad) + var(--space-8));
}

.final-cta__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}

.final-cta__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
  color: var(--bliss-cta-heading);
}

.final-cta__body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--bliss-cta-body);
  opacity: 0.85;
  max-width: 50ch;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-10);
  min-height: 52px;
  background-color: var(--bliss-cta-btn-bg);
  color: var(--bliss-cta-btn-text);
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: var(--bn-radius-full);
  border: 2px solid var(--bliss-cta-btn-border);
  transition: background-color 200ms ease, color 200ms ease;
}

.btn-primary:hover {
  background-color: var(--bliss-blush);
  color: var(--bliss-evergreen);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--bliss-cta-focus);
  outline-offset: 3px;
  border-radius: var(--bn-radius-full);
}

.final-cta__secondary {
  font-size: var(--text-sm);
  color: var(--bliss-cta-body);
  opacity: 0.72;
}

.final-cta__link {
  color: var(--bliss-cta-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.final-cta__link:hover {
  color: var(--bliss-cta-link-hover);
  opacity: 1;
}

.final-cta__link:focus-visible {
  outline: 2px solid var(--bliss-cta-focus);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
  text-decoration: none;
}

/* Mobile: match the >=44px touch target used for the service CTAs. */
@media (max-width: 767px) {
  .final-cta__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* ────────────────────────────────────────────────────────────
   Responsive: 768px, tablet and up
──────────────────────────────────────────────────────────── */

@media (min-width: 768px) {

  /* Desktop nav: show links, hide hamburger */
  .nav__links    { display: flex; }
  .nav__hamburger { display: none; }

  /* Anchor each link group absolutely from the logo center.
     50% = logo center (logo uses left: 50% in nav__inner).
     80px = logo half-width (48px) + 32px gap.
     This gives equal gaps on both sides regardless of group widths. */
  .nav__links--left {
    position: absolute;
    right: calc(50% + 80px);
  }
  .nav__links--right {
    position: absolute;
    left: calc(50% + 80px);
  }

  /* Transparent state: grow nav to contain the 98.9px logo (39px top + 98.9px + 39px bottom = 176.9px).
     Links sit at top: 66.45px so their vertical center (66.45 + 22 = 88.45px) matches logo center (39 + 49.45 = 88.45px). */
  .site-header:not(.is-scrolled) .nav__inner {
    height: auto;
    min-height: 176.9px;
  }
  .site-header:not(.is-scrolled) .nav__links--left,
  .site-header:not(.is-scrolled) .nav__links--right {
    top: 66.45px;
  }

  /* Sticky state: vertically center the links in the 96px bar */
  .site-header.is-scrolled .nav__links--left,
  .site-header.is-scrolled .nav__links--right {
    top: 50%;
    transform: translateY(-50%);
  }

  /* Hero: copy block shifts to lower-left with left-edge padding */
  .hero__content {
    right: auto;          /* Releases the right constraint */
    max-width: 52%;       /* Copy stays in the left portion of the frame */
    padding: 0 0 var(--space-16) var(--space-16);
    gap: var(--space-6);
  }

  /* CTA button: auto width on desktop (not full-width) */
  .btn-hero {
    width: auto;
    min-width: 260px;
    min-height: 52px;
  }

  /* Pause chip: lift its center level with the CTA button. The hero__content
     sits at padding-bottom --space-20, and the 52px button bottom aligns there;
     this 44px chip needs +4px so the two centers are parallel. */
  .hero__pause {
    bottom: calc(var(--space-20) + 4px);
  }

  /* Intro: two-column grid.
     Image is first in DOM but CSS grid places copy on the left.
     align-items: start so image top aligns with the H1 top. */
  .intro__inner {
    display: grid;
    grid-template-columns: 58fr 42fr;
    grid-template-areas: "copy media";
    align-items: start;
    gap: var(--space-16);
  }

  .intro__copy  { grid-area: copy;  }
  .intro__media { grid-area: media; }

  /* Portrait ratio on desktop for the editorial image */
  .intro__image-wrap {
    aspect-ratio: 3/4;
  }

  /* Remove max-width constraint inside the column (the column width controls it) */
  .intro__body p {
    max-width: none;
  }

  /* Services: 3-column grid */
  .services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--space-12);
  }

  .services__card {
    padding-block: 0;
    border-bottom: none;
    border-right: 1px solid oklch(0.68 0.03 80 / 0.2);
    padding-right: var(--space-10);
  }

  .services__card:last-child {
    border-right: none;
    padding-right: 0;
  }

  .services__card:first-child {
    padding-top: 0;
  }

  .services__body {
    max-width: none;
  }

  /* Why Bliss: 2-column editorial grid, generous row gap for deliberate pacing */
  .why-bliss__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12) var(--space-16);
  }

  .why-bliss__body {
    max-width: none;
  }

  /* Team: 2-column split, image left, copy centered against the square image */
  .team__inner {
    display: grid;
    grid-template-columns: 42fr 58fr;
    align-items: center;
    gap: var(--space-16);
  }

  /* Editorial pause: widescreen crop on desktop */
  .editorial-pause__images {
    aspect-ratio: 16/7;
  }

  /* Testimonials: 3-column */
  .testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  .testimonials__item {
    padding-bottom: 0;
    border-bottom: none;
  }

  /* Cheers full-testimonial flow stays one column and keeps its dividers */
  .testimonials__grid--single {
    grid-template-columns: 1fr;
  }

  .testimonials__grid--single .testimonials__item {
    padding-bottom: var(--space-12);
    border-bottom: 1px solid oklch(0.30 0.09 155 / 0.15);
  }

  .testimonials__grid--single .testimonials__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

}


/* ────────────────────────────────────────────────────────────
   Responsive: 1024px, desktop
──────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {

  /* Hero: copy block pushed further into the lower-left */
  .hero__content {
    max-width: 46%;
    padding: 0 0 var(--space-20) clamp(var(--space-16), 5vw, var(--space-24));
    gap: var(--space-6);
  }

}


/* ────────────────────────────────────────────────────────────
   Responsive: 1440px, large desktop
──────────────────────────────────────────────────────────── */

@media (min-width: 1440px) {

  /* On very large viewports, the content-max container constrains the intro.
     The hero remains full-bleed (no max-width on the section). */

  .hero__content {
    max-width: 42%;
  }

}


/* ────────────────────────────────────────────────────────────
   Reduced Motion
   The hero crossfade is the only persistent animation on the page.
   prefers-reduced-motion disables the sequence entirely (WCAG 2.1 requirement).
   JavaScript also checks this preference on init and disables itself.
──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Hero images: show Image 1 only, no transition */
  .hero__img {
    transition: none !important;
  }

  /* Pause button is irrelevant when crossfade is disabled */
  .hero__pause {
    display: none !important;
  }

  /* Overlay: skip the fade, appear/disappear instantly */
  .nav__overlay {
    transition: none !important;
  }

  /* FAQ: disable the height transition; panels open/close instantly */
  .faq__panel,
  .faq__chevron {
    transition: none !important;
  }

}


/* ================================================================
   Site Footer
   Evergreen background. Cream typography hierarchy.
   Two rows: nav / legal links + copyright.
   Focus ring overridden to Cream on Evergreen background.
================================================================ */

.site-footer {
  background-color: var(--bliss-evergreen);
  border-top: 1px solid oklch(0.96 0.04 78 / 0.12);
  padding-block: var(--space-16) var(--space-12);
}

.site-footer__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
  text-align: center;
}

/* ── Row 1: Main navigation ─────────────────────────────── */

.site-footer__nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-8);
}

.site-footer__nav-links a {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 400;
  color: oklch(0.96 0.04 78 / 0.82);
  text-decoration: none;
  letter-spacing: 0;
  transition: color 150ms ease;
  display: inline-block;
  padding-block: var(--space-3);
  min-height: 44px;
  line-height: 1.8;
}

.site-footer__nav-links a:hover {
  color: var(--bliss-blush);
}

.site-footer__nav-links a[aria-current="page"] {
  color: var(--bliss-blush);
}

/* ── Divider ──────────────────────────────────────────────── */

.site-footer__divider {
  border: none;
  border-top: 1px solid oklch(0.96 0.04 78 / 0.2);
  margin-block: var(--space-8);
}

/* ── Row 2: Legal links + copyright ─────────────────────── */

.site-footer__legal-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}

.site-footer__legal-links a {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 400;
  color: oklch(0.96 0.04 78 / 0.60);
  text-decoration: none;
  transition: color 150ms ease;
  display: inline-block;
  padding-block: var(--space-3);
  min-height: 44px;
  line-height: 1.8;
}

.site-footer__legal-links a:hover {
  color: var(--bliss-cream);
}

.site-footer__legal-links a[aria-current="page"] {
  color: var(--bliss-cream);
}

.site-footer__copyright {
  margin-top: var(--space-6);
}

.site-footer__copyright small {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  color: oklch(0.96 0.04 78 / 0.5);
  font-style: normal;
}

/* Designer/developer signature. Mirrors the copyright treatment: same font,
   same muted Cream, centered. Link hovers to Blush like the footer nav. */
.site-footer__credit {
  margin-top: var(--space-2);
  text-align: center;
}

.site-footer__credit small {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  color: oklch(0.96 0.04 78 / 0.5);
  font-style: normal;
}

.site-footer__credit a {
  color: oklch(0.96 0.04 78 / 0.5);
  text-decoration: none;
  transition: color 150ms ease;
}

.site-footer__credit a:hover {
  color: var(--bliss-blush);
}

/* ── Focus: Cream ring on Evergreen background ───────────── */

.site-footer a:focus-visible {
  outline: 2px solid var(--bliss-cream);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
}

/* ── Mobile: tighten gaps ─────────────────────────────────── */

@media (max-width: 767px) {
  .site-footer {
    padding-block: var(--space-12) var(--space-10);
  }

  .site-footer__nav-links {
    gap: var(--space-2) var(--space-6);
  }

  .site-footer__legal-links {
    gap: var(--space-2) var(--space-5);
  }
}


/* ================================================================
   Legal Pages
   68ch max reading column. Calm operational presentation.
   No separate CSS file. All styles here use existing tokens.
================================================================ */

.legal-page {
  background-color: var(--bliss-cream);
  padding-block: var(--space-16) var(--space-20);
  /* Push content below the fixed header */
  padding-top: calc(var(--space-16) + 96px);
}

.legal-page__inner {
  max-width: 68ch;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ── Breadcrumb ───────────────────────────────────────────── */

.legal-page__breadcrumb {
  margin-bottom: var(--space-8);
}

.legal-page__breadcrumb a {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--bliss-evergreen);
  text-decoration: none;
  transition: color 150ms ease;
}

.legal-page__breadcrumb a:hover {
  color: var(--bliss-garnet);
}

/* ── Page title ───────────────────────────────────────────── */

.legal-page__title {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-3xl);
  font-weight: 100;
  color: var(--bliss-evergreen);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

/* ── Last Updated ────────────────────────────────────────── */

.legal-page__updated {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 400;
  color: oklch(0.24 0.01 60 / 0.6);
  margin-bottom: 0;
}

/* ── Top divider ──────────────────────────────────────────── */

.legal-divider {
  border: none;
  border-top: 1px solid var(--bliss-evergreen);
  opacity: 0.2;
  margin-block: var(--space-8);
}

/* ── Prose content ────────────────────────────────────────── */

.legal-content h2 {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xl);
  font-weight: 100;
  color: var(--bliss-evergreen);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
}

/* First h2 in the content: no top margin (divider handles separation) */
.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--bliss-evergreen);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}

.legal-content p {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--bliss-charcoal);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-5);
}

.legal-content p:last-child {
  margin-bottom: 0;
}

.legal-content ul,
.legal-content ol {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--bliss-charcoal);
  line-height: var(--leading-loose);
  padding-left: var(--space-6);
  margin-block: var(--space-5);
}

.legal-content li {
  margin-bottom: var(--space-2);
}

.legal-content li:last-child {
  margin-bottom: 0;
}

/* Inline links: underlined, Evergreen. Hover to Garnet. */
.legal-content a {
  color: var(--bliss-evergreen);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.legal-content a:hover {
  color: var(--bliss-garnet);
}

.legal-content strong {
  font-weight: 500;
  color: var(--bliss-charcoal);
}

.legal-content em {
  font-style: italic;
  color: oklch(0.24 0.01 60 / 0.8);
}

/* Action-required callout (DMCA page) */
.legal-content blockquote {
  border-left: 3px solid var(--bliss-evergreen);
  padding-block: var(--space-4);
  padding-left: var(--space-6);
  margin-block: var(--space-8);
  margin-inline: 0;
  background-color: oklch(0.30 0.09 155 / 0.05);
  border-radius: 0 var(--bn-radius-sm) var(--bn-radius-sm) 0;
}

.legal-content blockquote p {
  color: var(--bliss-charcoal);
  font-style: normal;
  margin-bottom: 0;
}

/* ── Focus states ─────────────────────────────────────────── */

.legal-page a:focus-visible,
.legal-content a:focus-visible {
  outline: 2px solid var(--bliss-evergreen);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
}


/* ================================================================
   Cookie Notice Banner
   Fixed to bottom of viewport. Bliss White bg, Garnet top accent, soft lift.
   First-visit only, dismissed state stored in localStorage.
   z-index var(--z-banner): above page content, below nav overlay.
================================================================ */

.cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-banner);
  background-color: var(--bliss-cookie-bg);
  border-top: 2px solid var(--bliss-cookie-accent);   /* Warm Garnet accent */
  /* Soft evergreen-tinted lift, separating the bar from the page content above. */
  box-shadow: 0 -2px 20px oklch(0.30 0.09 155 / 0.12);
  padding: var(--space-5) var(--space-6);
  opacity: 0;
  transition: opacity 400ms ease;
}

/* [hidden] keeps the element out of the accessibility tree until JS reveals it */
.cookie-notice[hidden] {
  display: none;
}

.cookie-notice.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-notice {
    transition: none;
  }
}

.cookie-notice__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
}

.cookie-notice__text {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-cookie-text);
  opacity: 0.88;
  flex: 1;
  min-width: 20ch;
  line-height: var(--leading-normal);
  margin: 0;
}

.cookie-notice__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-shrink: 0;
}

/* ── Accept button ───────────────────────────────────────── */

.cookie-notice__accept {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
  background-color: var(--bliss-cookie-btn-bg);
  color: var(--bliss-cookie-btn-text);
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  border: none;
  border-radius: var(--bn-radius-full);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
  min-height: 44px;
}

.cookie-notice__accept:hover {
  background-color: var(--bliss-cookie-btn-hover);
  color: var(--bliss-evergreen);
}

.cookie-notice__accept:focus-visible {
  outline: 2px solid var(--bliss-cookie-focus);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-full);
}

/* ── Learn More link ─────────────────────────────────────── */

.cookie-notice__link {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-cookie-link);
  opacity: 0.85;   /* lifts the link to >=4.5:1 (AA) on the lighter bar */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease, opacity 150ms ease;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.cookie-notice__link:hover {
  color: var(--bliss-cookie-link-hover);
  opacity: 1;
}

.cookie-notice__link:focus-visible {
  outline: 2px solid var(--bliss-cookie-focus);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
  text-decoration: none;
}

/* ── Mobile: stack text above actions ───────────────────── */

@media (max-width: 480px) {
  .cookie-notice__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .cookie-notice__actions {
    width: 100%;
    justify-content: space-between;
  }
}


/* ────────────────────────────────────────────────────────────
   Print
   bn-foundation standard. Navigation and interactive elements hidden.
──────────────────────────────────────────────────────────── */

@media print {

  .site-header,
  .nav__overlay,
  .hero__pause,
  .btn-hero,
  .skip-nav,
  .cookie-notice,
  .site-footer {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
  }

  .hero {
    min-height: auto;
    page-break-inside: avoid;
  }

  .hero__images,
  .hero__overlay {
    display: none;
  }

  .hero__content {
    position: static;
    color: #000;
    padding: 1rem 0;
  }

  .hero-display,
  .hero-subline {
    color: #000;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 10pt;
    color: #666;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  .intro__image-wrap {
    page-break-inside: avoid;
  }

  /* FAQ: all panels visible in print regardless of accordion state */
  .faq__panel {
    max-height: none !important;
    overflow: visible !important;
  }

  .faq__btn,
  .faq__chevron,
  .hero__pause,
  .final-cta {
    display: none !important;
  }

  .why-bliss {
    background: #fff;
    color: #000;
  }

  .why-bliss__heading,
  .why-bliss__label,
  .why-bliss__eyebrow,
  .why-bliss__num {
    color: #000;
  }

  .why-bliss__body,
  .why-bliss__lead {
    color: #333;
    opacity: 1;
  }

  .why-bliss__theme {
    border-top-color: #ccc;
  }

  .team {
    background: #fff;
    color: #000;
  }

  .team__heading {
    color: #000;
  }

  .team__body p {
    color: #333;
  }

  .team__link {
    color: #000;
  }

}


/* ================================================================
   Interior Pages
   About, Packages, Portfolio, Cheers, Love, Connect.
   No separate CSS file. Every rule below uses existing design
   tokens only, no new colors, no new animations, no new systems.
   Header is pre-scrolled on these pages (body[data-interior]).
================================================================ */

/* ── Page intro band ──────────────────────────────────────────
   Sits directly below the fixed 96px header. Mirrors the legal
   page top spacing. Cream background, editorial composition. */

.page-intro {
  background-color: var(--bliss-cream);
  /* Push content below the fixed header, then breathing room */
  padding-top: calc(var(--space-16) + 96px);
  padding-bottom: var(--section-pad);
}

.page-intro__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 72ch;
}

.page-intro__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
  color: var(--bliss-evergreen);
}

/* Packages overview intro is now a lone H1 (the lead line was removed),
   so center the title. Scoped to packages only; other page intros keep
   their left-aligned title + lead/body. */
.page-intro[aria-labelledby="packages-title"] .page-intro__title {
  text-align: center;
}

/* The lone centered H1 leaves the gap above the paragraph reading one full
   --section-pad, while the gap below it (paragraph to the "love is love" mark)
   is --section-pad minus the 24px the brand mark pulls up. Trim the Packages
   intro's padding-bottom by that same --space-6 so the space above the
   paragraph matches the space below it. Scoped to Packages only. */
.page-intro[aria-labelledby="packages-title"] {
  padding-bottom: calc(var(--section-pad) - var(--space-6));
}

.page-intro__lead {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-snug);
  color: var(--bliss-charcoal);
}

/* Approved supporting subtitle beneath an original package title.
   Used on package detail-page intros and the Packages overview cards
   for clarity and SEO. Secondary to the title, never a replacement. */
.page-intro__subtitle,
.services__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bliss-evergreen);
}

.page-intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.page-intro__body p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--bliss-charcoal);
}

/* Connect wordmark: a quiet evergreen divider between the intro and the form.
   Decorative brand flourish (aria-hidden) echoing the page's thin display type.
   Sits in the cream gap between the two sections, framed by their padding. */
.connect-wordmark {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: 0.04em;
  color: var(--bliss-evergreen);
  text-align: center;
}


/* ── Generic interior section ─────────────────────────────────
   Reuses the homepage section rhythm and container width. */

.page-section {
  background-color: var(--bliss-cream);
  padding-block: var(--section-pad);
}

.page-section--tint {
  /* Cream is the only page canvas in the brand system. Sections are
     separated by the existing warm hairline rule (the same divider used
     in Services, Testimonials, and FAQ) plus the section spacing. No
     second background color is introduced. */
  border-top: 1px solid oklch(0.68 0.03 80 / 0.2);
}

/* About: the "The team" section follows a
   full-bleed photo and its credit bar, where the --tint divider hairline reads
   as an unwanted grey line under the photo credit. Suppress the divider there.
   The galleries' --tint "team behind the day" section (vendors-heading) keeps it. */
.page-section--tint[aria-labelledby="team-heading"] {
  border-top: 0;
}

/* ── Tighter first-to-second section gap: match the Connect rhythm ──
   On Connect the gap between the intro and the "Connect" wordmark is one
   --section-pad (the intro's own padding-bottom). About, Packages, Portfolio,
   the Portfolio Archive, and Cheers double-counted that gap, stacking the intro's
   padding-bottom AND the second section's padding-top (~2x --section-pad). Dropping
   the second section's top padding on THESE five pages only — scoped via each intro's
   unique aria-labelledby so Love (love-title), Connect, and every other page
   are untouched — leaves a single --section-pad gap that matches Connect.
   Bottom padding and the responsive clamp are unchanged. */
.page-intro[aria-labelledby="about-title"] + .page-section,
.page-intro[aria-labelledby="packages-title"] + .page-section,
.page-intro[aria-labelledby="portfolio-title"] + .page-section,
.page-intro[aria-labelledby="archive-title"] + .page-section,
.page-intro[aria-labelledby="cheers-title"] + .testimonials {
  padding-top: 0;
}

/* ── Packages brand mark ──────────────────────────────────────
   A centered, decorative "love is love" mark sitting between the
   "About Our Packages" and "Compare the packages" sections on the
   Packages page only. The flanking sections each contribute one
   --section-pad; the mark then pulls 24px (--space-6) closer to each
   side, keeping equal breathing room above and below. Decorative
   (aria-hidden). */
.packages-brand-mark {
  display: flex;
  justify-content: center;
  margin-block: calc(-1 * var(--space-6));   /* tighten the gap above + below by 24px each */
}

.packages-brand-mark__img {
  display: block;
  width: clamp(140px, 18vw, 220px);
  max-width: 100%;
  height: auto;   /* preserve the SVG's aspect ratio */
}

/* Feature band: a single full-bleed Evergreen moment per page (Cream text),
   the same pairing used in the site footer. Reserved for one focal section,
   e.g. Investment. On-palette: Evergreen + Cream only. */
.page-section--feature {
  background-color: var(--bliss-evergreen);
}

.page-section--feature .page-section__heading,
.page-section--feature .investment__amount {
  color: var(--bliss-cream);
}

.page-section--feature .investment__note {
  color: var(--bliss-cream);
  opacity: 0.82;
}

/* Cabernet feature band (Love): a single full-bleed Garnet moment with Cream
   text, echoing the home Why Bliss band and tying to the page's Cabernet
   heart. Reserved for one focal section (Love for us). On-palette: Garnet +
   Cream only. The section's heart switches to the blush-circle variant so it
   stays legible against the Cabernet ground. */
.page-section--cabernet {
  background-color: var(--bliss-garnet);
}

.page-section--cabernet .page-section__heading,
.page-section--cabernet .page-section__intro,
.page-section--cabernet .recognition-list__title,
.page-section--cabernet .recognition-list__detail {
  color: var(--bliss-cream);
}

.page-section--cabernet .recognition-list__detail {
  opacity: 0.82;
}

.page-section--cabernet .recognition-list li {
  border-bottom-color: oklch(0.95 0.02 70 / 0.28);
}

/* Full-bleed photograph band (Love): a warm visual break between the two
   halves of the page. Shows the brand's warm placeholder tone with a faint
   heart watermark until a real wedding image is dropped in. */
.photo-band {
  background-color: var(--bliss-cream);
}

.photo-band__media {
  position: relative;
  aspect-ratio: 4 / 5;   /* mobile crop, matches the home editorial pause */
  background-color: var(--intro-placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* When a real photo is present (e.g. the Love page), the loading frame is
   cream so it reads as part of the page while the photo paints, not a warm
   square; the image fades in via .js-reveal. The watermark-only "photograph
   to come" placeholders on other pages keep --intro-placeholder. Mirrors
   the .placeholder-card__media--photo pattern. */
.photo-band__media--photo {
  background-color: var(--bliss-cream);
}

.photo-band__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.photo-band__watermark {
  width: 72px;
  height: auto;
  opacity: 0.5;
}

@media (min-width: 768px) {
  .photo-band__media {
    aspect-ratio: 16 / 7;   /* widescreen crop on desktop, matches the home editorial pause */
  }
}

/* Cheers photo band: the toast image is wide and short, so its mobile crop is
   5:4 (1200x960) rather than the default 4:5 portrait. Scoped to a modifier so
   the Love band keeps its 4:5 mobile; desktop stays 16:7 for both (above). */
@media (max-width: 767px) {
  .photo-band__media--mobile-5-4 {
    aspect-ratio: 5 / 4;
  }
}

/* ── About team video ─────────────────────────────────────────
   Replaces the former editorial team band above "The team". Lives in the
   standard content column (.page-section__inner) with a section heading and a
   short description, then a responsive 16:9 player using native controls. The
   section carries no vertical padding of its own: the company section above and
   the team section below each contribute one --section-pad, so the block keeps
   the page's single-gap section rhythm. */
.about-video-section {
  background-color: var(--bliss-cream);
}

.about-video-copy {
  margin-bottom: var(--space-8);   /* description → video breathing room */
}

/* Responsive 16:9 frame. aspect-ratio fixes the height from the width, so the
   player scales cleanly and never overflows the viewport or triggers horizontal
   scroll; the media fills it. The warm frame tone shows behind the poster while
   it loads, matching the retired photo band. Capped at 960px and centred on
   wide screens (~20% under the full 1256px content column) for a contained,
   editorial read; tablet and mobile are padding-limited below the cap, so they
   keep the full available width. */
.about-video-wrap {
  position: relative;
  max-width: 960px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background-color: var(--intro-placeholder);
  border-radius: var(--bn-radius-sm);
  overflow: hidden;
}

.about-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* fill the 16:9 frame like the former editorial image */
  background-color: #000;   /* neutral ground behind the video itself */
  border: 0;
}

/* Credit rides the player, not the column: match the 960px cap so the
   right-aligned toggle sits under the player's right edge (same move as
   the team-member cards' 360px credit cap). */
.about-video-section .photo-credit {
  max-width: 960px;
  margin-inline: auto;
}

/* Branded pre-play state: a Cream circle with an Evergreen glyph, centred
   over the poster. initAboutVideo strips the native controls attribute and
   adds .js-about-video, so before JS runs the button stays hidden and the
   browser's own controls carry playback (no dead overlay without JS).
   While .is-playing the overlay yields to the native controls; it returns
   on pause/end. */
.about-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: var(--bliss-cream);
  border: 0;
  border-radius: var(--bn-radius-full);
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.22);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.js-about-video .about-video-play {
  display: flex;
}

.js-about-video.is-playing .about-video-play {
  display: none;
}

.about-video-play__icon {
  width: 31px;
  height: 31px;
  margin-left: 4px;   /* optical centring: nudge the triangle off true centre */
  fill: var(--bliss-evergreen);
  stroke: var(--bliss-evergreen);   /* the glyph's rounded corners come from a
                                       same-colour stroke (see the SVG markup),
                                       so fill and stroke always move together */
  transition: fill 160ms ease, stroke 160ms ease;
}

.about-video-play:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 20px oklch(0% 0 0 / 0.26);
}

.about-video-play:hover .about-video-play__icon,
.about-video-play:focus-visible .about-video-play__icon {
  fill: var(--bliss-garnet);
  stroke: var(--bliss-garnet);
}

.about-video-play:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
}

/* Once JS owns the pre-play state the whole poster is clickable, too. */
.js-about-video:not(.is-playing) .about-video {
  cursor: pointer;
}

@media (max-width: 767px) {
  .about-video-play {
    width: 60px;
    height: 60px;
  }

  .about-video-play__icon {
    width: 26px;
    height: 26px;
    margin-left: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-video-play,
  .about-video-play__icon {
    transition: none;
  }
}

.page-section__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.page-section__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
  color: var(--bliss-evergreen);
  margin-bottom: var(--space-6);
}

.page-section__intro {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--bliss-charcoal);
  max-width: 68ch;
  margin-bottom: var(--space-12);
}

/* Brand heart as a section eyebrow, centered above the heading. Mirrors the
   Cheers testimonial mark; each page carries its own controlled color note
   (Love uses the Cabernet + blush heart). Decorative, hidden from a11y tree. */
.page-section__mark {
  display: block;
  width: 84px;
  height: auto;
  margin: 0 auto var(--space-5);
}

/* Centered-spine modifiers: pair with --center headings to share the page's
   centered intro / CTA spine. Column text stays left-aligned for readability;
   only the column itself is centered on the page. */
.page-section__intro--center {
  text-align: center;
  margin-inline: auto;
}


/* ── Status note ──────────────────────────────────────────────
   The "currently being refined / curated" message. Restrained,
   editorial, clearly a forward-looking note. Mint rule echoes the
   Why Bliss accent treatment. */

.status-note {
  max-width: 60ch;
  margin-block: var(--space-8);
  padding-left: var(--space-6);
  border-left: 3px solid var(--bliss-evergreen);
}

.status-note__rule {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--bliss-evergreen);
  margin-bottom: var(--space-4);
}

.status-note p {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--bliss-charcoal);
}

.status-note p + p {
  margin-top: var(--space-4);
}


/* ── Editorial / placeholder gallery grid ─────────────────────
   Used for Portfolio galleries, Cheers testimonial cards, Love
   articles. Borrows the venues card aesthetic (existing pattern). */

.placeholder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

.placeholder-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.placeholder-card__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: var(--intro-placeholder);
  border-radius: var(--bn-radius-sm);
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
}

.placeholder-card__media--portrait {
  aspect-ratio: 3/4;
}

.placeholder-card__tag {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bliss-evergreen);
  background-color: var(--bliss-cream);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--bn-radius-full);
}

.placeholder-card__label {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--bliss-evergreen);
}

.placeholder-card__meta {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-charcoal);
  opacity: 0.7;
}

/* Venue line sits below the card link so it can carry its own outbound link
   to the venue site (anchors can't nest inside the card's gallery link). */
.placeholder-card__meta--venue {
  margin-top: var(--space-3);
}

.placeholder-card__meta--venue a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.placeholder-card__meta--venue a:hover,
.placeholder-card__meta--venue a:focus-visible {
  color: var(--bliss-evergreen);
}


/* ── Team grid (About) ────────────────────────────────────────
   Portrait placeholder + name + role + bio. */

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

.team-member {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.team-member__media {
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--intro-placeholder);
  border-radius: var(--bn-radius-sm);
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  max-width: 360px;
}

/* When a real portrait is present, the frame is cream and the photo fills the
   3:4 box edge to edge (drops the placeholder padding/flex used by the "Portrait
   to come" tag). Mirrors .placeholder-card__media--photo. */
.team-member__media--photo {
  padding: 0;
  display: block;
  background-color: var(--bliss-cream);
}

.team-member__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.team-member__name {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-xl);
  letter-spacing: 0.02em;
  color: var(--bliss-evergreen);
}

.team-member__role {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bliss-charcoal);
  opacity: 0.7;
  margin-top: var(--space-1);
}

.team-member__bio {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--bliss-charcoal);
  max-width: 64ch;
}

.team-member__bio p + p {
  margin-top: var(--space-4);
}


/* ── Price note (Packages) ────────────────────────────────────
   A restrained pricing line under each service overview. */

.price-note {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--bliss-evergreen);
}

.price-note span {
  font-weight: 400;
  opacity: 0.7;
}


/* ── Recognition list (Love) ──────────────────────────────────
   Award / recognition rows. */

.recognition-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 64ch;
  margin-inline: auto;
}

.recognition-list li {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid oklch(0.68 0.03 80 / 0.2);
}

.recognition-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.recognition-list__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--bliss-evergreen);
  line-height: var(--leading-snug);
}

.recognition-list__detail {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-charcoal);
  opacity: 0.75;
  margin-top: var(--space-1);
}


/* ── Causes (Love for others) ─────────────────────────────────
   Two link-rich blocks that replace the old logo wall: a
   chronological "one cause each year" honor roll, and a flowing
   list of other supported organizations. Text links only, no
   logos. On-palette: Evergreen links, Garnet hover. */

.causes__subheading {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bliss-evergreen);
  text-align: center;
  margin-top: var(--space-16);
  margin-bottom: var(--space-8);
}

/* Chronological honor roll: year column + linked organization. */
.causes-list {
  display: flex;
  flex-direction: column;
  max-width: 64ch;
  margin-inline: auto;
}

.causes-list__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-5);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid oklch(0.68 0.03 80 / 0.2);
}

.causes-list__item:last-child {
  border-bottom: none;
}

.causes-list__year {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--bliss-evergreen);
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

.causes-list__org {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--bliss-evergreen);
  text-decoration: none;
  transition: color 150ms ease;
}

a.causes-list__org {
  text-decoration: underline;
  text-decoration-color: oklch(0.30 0.09 155 / 0.25);
  text-underline-offset: 4px;
}

a.causes-list__org:hover {
  color: var(--bliss-garnet);
  text-decoration-color: currentColor;
}

a.causes-list__org:focus-visible {
  outline: 2px solid var(--bliss-evergreen);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
}

/* Flowing list of other supported organizations. */
.support-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-10);
  max-width: 64ch;
  margin-inline: auto;
}

.support-list a {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--bliss-evergreen);
  text-decoration: underline;
  text-decoration-color: oklch(0.30 0.09 155 / 0.25);
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.support-list a:hover {
  color: var(--bliss-garnet);
  text-decoration-color: currentColor;
}

.support-list a:focus-visible {
  outline: 2px solid var(--bliss-evergreen);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
}

@media (min-width: 768px) {
  .support-list {
    grid-template-columns: 1fr 1fr;
  }
}


/* ================================================================
   Connect Page (production)
   Inquiry form, contact details, expectation-setting steps.
================================================================ */

/* ── Connect layout: form + aside on desktop ─────────────────── */

.connect {
  background-color: var(--bliss-cream);
  /* Top padding trimmed by a third to tighten the gap below the Connect
     wordmark; bottom padding (above the footer) left unchanged. */
  padding-top: calc(var(--section-pad) * 0.67);
  padding-bottom: var(--section-pad);
}

.connect__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}


/* ── Inquiry form ─────────────────────────────────────────────── */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.contact-form__note {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-charcoal);
  opacity: 0.75;
}

.contact-form__note a {
  color: var(--bliss-evergreen);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.contact-form__note a:hover {
  color: var(--bliss-garnet);
}

.contact-form__note a:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
}

/* reCAPTCHA v3 disclosure: a smaller, quieter line tucked under the privacy
   note. The negative top margin counteracts the form's flex gap so the two read
   as a footnote pair rather than separate blocks. */
.contact-form__recaptcha {
  margin-top: calc(var(--space-8) * -1 + var(--space-3));
  font-size: var(--text-xs);
  opacity: 0.6;
}

/* reCAPTCHA v3: hide ONLY the floating badge. Google permits this as long as the
   branding stays visible in the user flow, which the disclosure above provides.
   visibility:hidden keeps the widget functional and the script running. */
.grecaptcha-badge {
  visibility: hidden;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-label {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--bliss-charcoal);
}

.form-required {
  color: var(--bliss-garnet);
  margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  color: var(--bliss-charcoal);
  /* Paper surface derived from Cream, a lighter neutral, not a new hue */
  background-color: var(--bliss-paper);
  border: 1px solid oklch(0.30 0.09 155 / 0.25);
  border-radius: var(--bn-radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  width: 100%;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--leading-normal);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--bliss-charcoal);
  opacity: 0.45;
}

.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-color: var(--bliss-evergreen);
}

/* ── Date field with branded calendar trigger (Connect) ──────────────
   Free-text input + a calendar icon that opens the Bliss Flatpickr. The
   hidden source input (opacity 0, non-interactive) anchors the calendar
   under the icon. Mirrors the Quiz's date field, in the site's tokens. */
.form-date-wrap { position: relative; }
.form-input--date { padding-right: 3rem; }
.form-date-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  background: none;
  border: none;
  border-radius: var(--bn-radius-sm);
  color: var(--bliss-evergreen);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 150ms ease, background-color 150ms ease;
}
.form-date-btn:hover { opacity: 1; background-color: oklch(0.30 0.09 155 / 0.08); }
.form-date-btn:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  opacity: 1;
}
.form-date-btn svg { display: block; }
/* Enlarge the touch target to 42x42 for thumbs WITHOUT changing the icon's
   visual size or position. The pseudo-element is part of the button, so taps on
   it register as button clicks; it is absolutely positioned (out of the flex
   flow) and stays within the field's reserved right padding (3rem = 48px), so it
   never overlaps typed text. */
.form-date-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
}
.form-date-hidden {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
  margin: 0;
}

/* Estimated number of guests: hide the browser's default number spinner arrows
   for a cleaner, editorial field. inputmode="numeric" keeps the mobile numeric
   keypad intact; field sizing, spacing, and styling are otherwise untouched. */
.contact-form input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.contact-form input[type="number"]::-webkit-outer-spin-button,
.contact-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Radio / fieldset groups ─────────────────────────────────── */

.form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-legend {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--bliss-charcoal);
  padding: 0;
  margin-bottom: var(--space-1);
}

.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.form-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  color: var(--bliss-charcoal);
  cursor: pointer;
}

/* Custom radio: var(--bliss-paper) circle to match the form fields and the
   date-picker panel, with an evergreen ring + evergreen checked dot. Native
   radios cannot have a custom interior color, so appearance is removed and the
   control is drawn here. Border is kept dark enough to stay perceivable
   (WCAG 1.4.11) since the paper fill is nearly the same as the page. */
.form-radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--bliss-paper);
  border: 1.5px solid color-mix(in srgb, var(--bliss-evergreen) 70%, var(--bliss-cream));
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 150ms ease;
}

.form-radio input:checked {
  border-color: var(--bliss-evergreen);
  /* evergreen dot centered on the paper fill */
  background-image: radial-gradient(circle, var(--bliss-evergreen) 0 4px, transparent 5px);
}

.form-radio input:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
}

.form-hint {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  color: var(--bliss-charcoal);
  opacity: 0.65;
}

.contact-form__submit {
  align-self: flex-start;
}


/* ── Connect aside: contact info + expectations ──────────────── */

.connect__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.contact-info__heading,
.expectations__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
  color: var(--bliss-evergreen);
  margin-bottom: var(--space-6);
}

.contact-info__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-info__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-info__label {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bliss-charcoal);
  opacity: 0.6;
}

.contact-info__value a,
.contact-info__value {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  color: var(--bliss-evergreen);
  text-decoration: none;
}

.contact-info__value a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.contact-info__value a:hover {
  color: var(--bliss-garnet);
}

.contact-info__value a:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
}


/* ── Connect brand mark ──────────────────────────────────────── */
/* The full-color stacked logo closing the contact column.
   Decorative only: a brand mark, not a call to action.
   Sized down on mobile; bumped up at the 768px breakpoint below. */

.connect__signature {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}


/* ================================================================
   Interior Pages: Responsive
================================================================ */

@media (min-width: 768px) {

  .placeholder-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10) var(--space-8);
  }

  .placeholder-grid--three {
    grid-template-columns: repeat(3, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16) var(--space-12);
  }

  /* Connect: form left, aside right */
  .connect__inner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: var(--space-16);
    align-items: start;
  }

  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (min-width: 1024px) {

  .placeholder-grid--three {
    grid-template-columns: repeat(3, 1fr);
  }

}


/* ================================================================
   Branded preview gate (TEMPORARY, client preview only)
   A full-screen Cream gate built by js/script.js. NOT server-level
   security: the page source is still reachable. Intentionally
   allowed during staging review and the post-DNS inspection window;
   the gate JS MUST be removed before the public launch (Friday,
   July 24, 11:00 a.m. PT). These rules are inert without the gate
   JS and may stay or go at removal time. Existing tokens only.
================================================================ */

body.bliss-gate-open {
  overflow: hidden;
}

.bliss-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;   /* Above nav overlay (101) and cookie notice (50) */
  background-color: var(--bliss-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: var(--space-8) var(--space-5);
}

.bliss-gate__card {
  width: 100%;
  max-width: 520px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}

.bliss-gate__logo {
  width: 200px;
  height: auto;
  display: block;
}

.bliss-gate__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
  color: var(--bliss-evergreen);
}

.bliss-gate__text {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--bliss-charcoal);
  max-width: 40ch;
}

.bliss-gate__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  align-items: stretch;
}

.bliss-gate__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
}

.bliss-gate__label {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--bliss-charcoal);
}

.bliss-gate__input {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  color: var(--bliss-charcoal);
  background-color: var(--bliss-paper);
  border: 1px solid oklch(0.30 0.09 155 / 0.25);
  border-radius: var(--bn-radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  width: 100%;
  transition: border-color 150ms ease;
}

.bliss-gate__input:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-color: var(--bliss-evergreen);
}

.bliss-gate__error {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-garnet);
  min-height: 1.2em;
  margin: 0;
}

/* ── Countdown ──────────────────────────────────────────────── */

.bliss-gate__countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.bliss-gate__countdown-label {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bliss-charcoal);
  opacity: 0.65;
}

.bliss-gate__countdown-units {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: nowrap;
}

.bliss-gate__countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 3.5rem;
}

.bliss-gate__countdown-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  line-height: 1;
  color: var(--bliss-evergreen);
  letter-spacing: -0.01em;
  tab-size: 2;
  font-variant-numeric: tabular-nums;
}

.bliss-gate__countdown-unit-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bliss-charcoal);
  opacity: 0.55;
}

.bliss-gate__launching-soon {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);
  font-style: italic;
  color: var(--bliss-evergreen);
  margin: 0;
}

/* ── Contact block ──────────────────────────────────────────── */

.bliss-gate__contact {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: center;
}

.bliss-gate__contact-question {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-charcoal);
  margin: 0;
}

.bliss-gate__contact-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem;
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
}

.bliss-gate__contact-link {
  color: var(--bliss-evergreen);
  text-decoration: none;
  border-bottom: 1px solid oklch(0.30 0.09 155 / 0.3);
  transition: color 150ms ease, border-color 150ms ease;
}

.bliss-gate__contact-link:hover {
  color: var(--bliss-garnet);
  border-color: var(--bliss-garnet);
}

.bliss-gate__contact-sep {
  color: var(--bliss-charcoal);
  opacity: 0.4;
  padding: 0 0.25rem;
}

/* ── Divider above preview form ─────────────────────────────── */

.bliss-gate__divider {
  border: none;
  border-top: 1px solid oklch(0.30 0.09 155 / 0.12);
  width: 100%;
  margin: 0;
}


/* ================================================================
   Package Pages
   Dedicated package detail pages + Packages overview cards.
   Existing tokens only. No new colors, animations, or systems.
================================================================ */

/* ── Secondary (outline) button ─────────────────────────────── */

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-8);
  min-height: 48px;
  background-color: transparent;
  color: var(--bliss-evergreen);
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 2px solid var(--bliss-evergreen);
  border-radius: var(--bn-radius-full);
  transition: background-color 200ms ease, color 200ms ease;
}

.btn-outline:hover {
  background-color: var(--bliss-blush);
  color: var(--bliss-evergreen);
}

.btn-outline:focus-visible {
  outline: 2px solid var(--bliss-evergreen);
  outline-offset: 3px;
  border-radius: var(--bn-radius-full);
}


/* ── Investment block ───────────────────────────────────────── */

.investment__amount {
  font-family: 'Poppins', sans-serif;
  font-weight: 100;
  font-size: var(--text-2xl);
  letter-spacing: 0.02em;
  line-height: var(--leading-tight);
  color: var(--bliss-evergreen);
}

.investment__note {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-charcoal);
  opacity: 0.75;
  margin-top: var(--space-3);
  max-width: 52ch;
}


/* ── Inclusion groups (grouped service lists) ───────────────── */

.inclusion-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.inclusion-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.inclusion-group__label {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--bliss-evergreen);
}

.inclusion-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.inclusion-list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--bliss-charcoal);
  max-width: 64ch;
}

.inclusion-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--bliss-evergreen);
}


/* ── Packages overview card extras ──────────────────────────── */

.pkg-highlights {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pkg-highlights li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--bliss-charcoal);
}

.pkg-highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--bliss-evergreen);
}

/* Push the card button to the bottom so buttons align across cards */
.services__card .btn-outline {
  margin-top: var(--space-2);
  align-self: flex-start;
}


@media (min-width: 768px) {

  .inclusion-grid--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12) var(--space-16);
    align-items: start;
  }

  /* On the Packages overview, give cards a consistent vertical rhythm
     and bottom-align the View Full Package buttons */
  .services__card {
    display: flex;
    flex-direction: column;
  }

  .services__card .btn-outline {
    margin-top: auto;
  }

}


/* ================================================================
   Connect: form grouping + layout refinements
   Existing tokens only.
================================================================ */

/* Group the long inquiry form into labeled sections */
.form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-section + .form-section {
  padding-top: var(--space-8);
  border-top: 1px solid oklch(0.68 0.03 80 / 0.2);
}

.form-section__title {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bliss-evergreen);
}

.form-section__hint {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-charcoal);
  opacity: 0.7;
  margin-top: calc(var(--space-2) * -1);
}

/* Short direct-contact note in the sidebar */
.contact-info__intro {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--bliss-charcoal);
  opacity: 0.78;
  margin-top: calc(var(--space-4) * -1);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  /* Pin the short contact sidebar alongside the form. The 96px clears the
     fixed header; the extra 30px leaves a little breathing room between the
     header and "Reach us directly" once the aside sticks. */
  .connect__aside {
    position: sticky;
    top: calc(96px + 30px);
  }

  /* Brand mark sits a touch larger in the wider desktop column */
  .connect__signature {
    width: 220px;
  }
}

/* Radio group laid out as a fixed grid (used for planning level).
   One column on mobile, two columns from 768px so options pair cleanly. */
.form-radio-group--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3) var(--space-6);
}

@media (min-width: 768px) {
  .form-radio-group--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ================================================================
   Quiz prompt link
   A small, consistent "take the quiz" prompt used across pages.
   Simple text link, existing tokens only.
================================================================ */

.quiz-prompt {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--bliss-charcoal);
  text-align: center;
  margin-top: var(--space-10);
}

.quiz-prompt a,
.form-hint a {
  color: var(--bliss-evergreen);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.quiz-prompt a:hover,
.form-hint a:hover {
  color: var(--bliss-garnet);
}

.quiz-prompt a:focus-visible,
.form-hint a:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
}


/* ── Team member motto + Sweet Somethings (About) ─────────────
   Personal mottos and the legacy "Sweet Somethings" list, restored
   from the original bios. Playfair italic gives them an aside voice
   distinct from the Poppins bio body. */

.team-member__motto {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--bliss-evergreen);
  margin-top: var(--space-1);
}

.team-member__sweet {
  margin-top: var(--space-5);
  max-width: 64ch;
}

.team-member__sweet-label {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bliss-charcoal);
  opacity: 0.7;
  margin-bottom: var(--space-3);
}

.team-member__sweet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.team-member__sweet-list li {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--bliss-charcoal);
}


/* ── Manifesto (About) ────────────────────────────────────────
   The brand philosophy, restored from the legacy About page. Stays
   on the Cream canvas in editorial Playfair italic; the page's one
   Evergreen colour moment is the Final CTA. The two "Your wedding
   day" lines anchor the block in Evergreen. */

.manifesto__inner {
  text-align: center;
}

.manifesto__lines {
  max-width: 60ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.manifesto__line {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--bliss-charcoal);
}

/* On the Garnet band the lines read in Cream; the two bookend "Your wedding
   day" lines lift in Blush. Green is reserved for the CTA button. */
.page-section--cabernet .manifesto__line {
  color: var(--bliss-cream);
}

.manifesto__line--anchor,
.page-section--cabernet .manifesto__line--anchor {
  color: var(--bliss-blush);
}


/* ================================================================
   Portfolio system
   - Live gallery card (extends the .placeholder-card grid pattern)
   - Individual gallery page: breadcrumb, intro meta, image grid
   - Reusable accessible lightbox (warm scrim, stationary controls)
   Uses existing tokens only. Light-only. Reduced-motion safe.
================================================================ */

/* ── Live gallery card ────────────────────────────────────────
   A real, linked card that lives in the same .placeholder-grid as
   the "coming soon" cards. Reuses the placeholder-card rhythm so
   the grid stays uniform; swaps the colored placeholder box for a
   real photographic thumbnail. */

.placeholder-card--live {
  /* The card body is a single link; reset its spacing to match the
     flex-column gap used by sibling placeholder cards. */
  gap: 0;
}

.placeholder-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.placeholder-card__media--photo {
  /* Photo fills the 4/3 media box edge to edge (no tag padding). */
  padding: 0;
  display: block;
  /* Cream loading frame (overrides the neutral placeholder box) so the
     reserved 4:3 area matches the page before the thumbnail paints. */
  background-color: var(--bliss-cream);
}

.placeholder-card__img {
  width: 100%;
  height: 100%;
  /* Give the image a definite 4:3 shape from its width so object-fit: cover
     fills the card frame and center-crops (mirrors .gallery-figure__img). A
     percentage height alone does not resolve against an aspect-ratio parent. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--img-focal-x, 50%) var(--img-focal-y, 50%);
  transition: transform var(--bn-transition);
}

.placeholder-card__link:hover .placeholder-card__img {
  transform: scale(1.03);
}

.placeholder-card__link:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
}

/* Quiet uppercase descriptor above the venue line (e.g. "Delicate & Lush"). */
.placeholder-card__meta--subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bliss-evergreen);
  opacity: 1;
}

.placeholder-card__desc {
  margin-top: var(--space-1);
}


/* ── Subtle archive link (lower Portfolio / Archive pages) ────── */

.portfolio-archive-link {
  margin-top: var(--space-12);
  text-align: center;
}

.portfolio-archive-link p {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-charcoal);
  opacity: 0.75;
}

.portfolio-archive-link a {
  color: var(--bliss-evergreen);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.portfolio-archive-link a:hover {
  color: var(--bliss-garnet);
}


/* ── Breadcrumb (individual gallery pages) ────────────────────── */

.breadcrumb {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
  /* Clears the 96px fixed header on interior pages. */
  padding-top: calc(var(--space-12) + 96px);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-charcoal);
}

.breadcrumb__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb__sep {
  color: var(--bliss-charcoal);
  opacity: 0.4;
}

.breadcrumb a {
  color: var(--bliss-evergreen);
  text-decoration: none;
  transition: color 150ms ease;
}

.breadcrumb a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb [aria-current="page"] {
  opacity: 0.7;
}

/* When a breadcrumb leads the page, the intro no longer needs to clear
   the fixed header itself. */
.page-intro--gallery {
  padding-top: var(--space-8);
  /* Tighten the gap down to the gallery so the page reaches the images
     sooner, most noticeably on desktop. The base .page-intro uses
     --section-pad (up to 6rem) for its bottom padding; this trims it.
     Scoped to gallery intros only. */
  padding-bottom: clamp(2.5rem, 4vw, 3.75rem);
}

/* Match the reduced intro bottom-padding with an equal reduction on the
   following gallery section's top padding, so the rhythm stays balanced and
   the "A look at the day" heading rises closer to the intro. The gallery grid
   section now follows the gallery intro directly (the gallery-to-gallery pager
   was moved down to sit after the team credits), so this reduced top-padding
   hangs off the intro. .page-intro--gallery only ever exists on a gallery
   page, so the combinator still matches only there. */
.page-intro--gallery + .page-section {
  padding-top: clamp(2.5rem, 4vw, 3.75rem);
}


/* ── Gallery intro meta + photographer credit ─────────────────── */

.gallery-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-charcoal);
}

.gallery-meta__venue {
  font-weight: 500;
  color: var(--bliss-evergreen);
}

.gallery-meta__sep {
  opacity: 0.4;
}

.gallery-credit {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-charcoal);
  opacity: 0.8;
}

.gallery-credit a {
  color: var(--bliss-evergreen);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.gallery-credit a:hover {
  color: var(--bliss-garnet);
}


/* ── Gallery-to-gallery pager (below the team credits, before the final CTA) ──
   Subtle editorial navigation for moving BETWEEN portfolio galleries. It sits
   low on the page, after "The team behind the day" and before the final CTA,
   so it can never read as controls for the image grid higher up. Deliberately
   NOT image/lightbox navigation: it is labelled "Explore more galleries" and
   uses worded links with minimal inline direction arrows (← Previous /
   Next →), distinct from the bold in-gallery lightbox controls. Quiet hairline
   band, existing tokens only. */
.gallery-pager {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-6) var(--space-8);
  border-block: 1px solid var(--bliss-hairline);
  text-align: center;
}

.gallery-pager__label {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-base);   /* a step above the links so it reads as the heading */
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bliss-evergreen);
  margin-bottom: var(--space-4);
}

.gallery-pager__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;   /* mobile: clean vertical stack, comfortable to tap */
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.gallery-pager__link {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-evergreen);
  text-decoration: none;
  padding-block: var(--space-2);   /* comfortable tap height, esp. when stacked on mobile */
  border-bottom: 1px solid transparent;   /* underline grows on hover, not a button */
  transition: color 150ms ease, border-color 150ms ease;
}

.gallery-pager__link:hover {
  color: var(--bliss-garnet);
  border-bottom-color: currentColor;
}

.gallery-pager__link:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
  border-radius: var(--bn-radius-sm);
}

/* Minimal inline direction arrows: a subtle left arrow before "Previous
   gallery" and a subtle right arrow after "Next gallery". Decorative only —
   the visible link text remains the accessible name — and rendered at regular
   weight so they read as quiet editorial cues, never the bold lightbox image
   controls. They inherit the link colour, so they shift evergreen → garnet on
   hover together with the text and underline. */
.gallery-pager__item--prev .gallery-pager__link::before {
  content: "\2190";   /* ← */
  margin-right: 0.4em;
  font-weight: 400;
}

.gallery-pager__item--next .gallery-pager__link::after {
  content: "\2192";   /* → */
  margin-left: 0.4em;
  font-weight: 400;
}

/* All three pager links share the same link styling (evergreen + garnet hover).
   The middle "All portfolio galleries" is a link too, so it must not look muted. */

@media (min-width: 768px) {
  /* Desktop: a 3-column row. The middle "All portfolio galleries" sits in an
     auto column flanked by two equal 1fr columns, so it is truly centred in the
     band (aligned with the label above), while Previous sits left and Next sits
     right, hinting direction without arrows. */
  .gallery-pager__links {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: var(--space-4) var(--space-6);
  }
  .gallery-pager__item--prev { justify-self: start; }
  .gallery-pager__item--next { justify-self: end; }
}

/* Quiet helper line under "A look at the day", clarifying image interaction. */
.gallery-grid__hint {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  color: var(--bliss-charcoal);
  opacity: 0.75;
  margin-top: calc(-1 * var(--space-3));
  margin-bottom: var(--space-6);
}


/* ── Photo Credit ─────────────────────────────────────────────
   Discreet, optional per-image attribution. A small paper pill
   ("Photo credit") beneath an image toggles a flat paper card with
   the photographer name + link. Mirrors three existing patterns so
   it reads as native: the FAQ disclosure (aria-expanded + .is-open,
   CSS-owned reveal), the trust-chip pill (paper surface + faint
   Evergreen hairline), and the .gallery-credit link convention
   (Evergreen -> Garnet, 1px underline at 3px). Flat by design: the
   system uses borders, not elevation.

   This establishes the reusable component only. No per-image data is
   wired yet; markup is added per section after approval.

   STATIC single image — photographer (and website if provided), NO
   image description:

   <div class="photo-credit" data-photo-credit>
     <button class="photo-credit__toggle" type="button"
             aria-expanded="false" aria-controls="ID">
       <svg class="photo-credit__icon" aria-hidden="true">…</svg>
       <span>Photo credit</span>
       <svg class="photo-credit__chevron" aria-hidden="true">…</svg>
     </button>
     <div class="photo-credit__panel" id="ID" role="group" aria-label="Photo credit">
       <div class="photo-credit__inner">
         <div class="photo-credit__card">
           <dl class="photo-credit__dl">
             <div class="photo-credit__row">
               <dt class="photo-credit__term">Photography</dt>
               <dd class="photo-credit__val">NAME</dd>
             </div>
             <div class="photo-credit__row">
               <dt class="photo-credit__term">Website</dt>
               <dd class="photo-credit__val">
                 <a href="URL" target="_blank" rel="noopener noreferrer">domain</a>
               </dd>
             </div>
           </dl>
         </div>
       </div>
     </div>
   </div>

   SLIDER — one .photo-credit__group per image inside the card. Slider
   images MAY carry a short description in the group label (the static
   variant never does). Renders as "PHOTO 1: Couple in vintage car":

   <div class="photo-credit__card">
     <div class="photo-credit__group">
       <p class="photo-credit__group-label">Photo 1<span class="photo-credit__group-desc">Couple in vintage car</span></p>
       <dl class="photo-credit__dl">
         <div class="photo-credit__row">
           <dt class="photo-credit__term">Photography</dt>
           <dd class="photo-credit__val">Sara France</dd>
         </div>
       </dl>
     </div>
     <!-- Photo 2, Photo 3 … (Website row optional, as above) -->
   </div>

   Placement is always OUTSIDE the image, in normal flow (the photography
   is never covered):
   - Static / framed images: put .photo-credit immediately AFTER the image,
     inside the image's container, so it sits directly beneath the frame.
   - Full-bleed / full-height sections (hero, moving-image band): wrap the
     .photo-credit in .photo-credit-bar placed IMMEDIATELY AFTER the section,
     so the button aligns with the page content container, beneath the visual.
   The panel always opens beneath the button in flow; no overlay. */

.photo-credit {
  margin-top: 9px;     /* consistent 9px gap below the image (block-flow contexts) */
  text-align: right;   /* credit button sits at the right edge, under the image */
  line-height: 0;      /* collapse the inline strut so the toggle sits exactly 9px
                          below the image (no extra leading above it). The card
                          restores a normal line-height for its own text below. */
}

/* About team-member cards: the portrait (.team-member__media) is capped at
   max-width 360px and left-aligned in the flex column, so it is narrower
   than the card. Match that width here so the right-aligned button (and the
   panel) align to the portrait's right edge rather than the wider card. */
.team-member .photo-credit {
  max-width: 360px;
  /* .team-member is a flex column (gap: var(--space-4)); offset that gap so the
     image -> credit spacing nets the same 9px as the block-flow contexts. */
  margin-top: calc(9px - var(--space-4));
}

/* Toggle: a quiet, sub-CTA credit label, sized down to an editorial
   footnote and aligned right under the image.
   Colour: per Rachel's "white/cream" direction the button should recede
   into the Cream page. A literal Cream/White text+icon would be invisible
   on the Cream fill (≈1:1 contrast), so the border IS Cream (a clean,
   borderless pill — removes the old Evergreen outline) and the label/icon
   are muted TOWARD Cream as far as readability allows via color-mix (kept
   ≥ WCAG AA on Cream). Hover deepens to Charcoal (neutral, no Evergreen).
   The fill stays Cream; the panel below stays Paper. A 44px tap target is
   preserved via the ::before overlay — not by inflating the visible box. */
.photo-credit__toggle {
  position: relative;             /* anchors the 44px hit-area overlay */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-family: 'Poppins', sans-serif;
  font-size: calc(var(--text-xs) - 2px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--bliss-charcoal) 70%, var(--bliss-cream));
  background-color: var(--bliss-cream);
  border: none;
  border-radius: var(--bn-radius-full);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

/* Keep a comfortable 44px touch/click target (WCAG 2.5.5) without
   enlarging the visible pill: an invisible overlay, centred on the
   pill and spanning its full width, extends the hit area vertically.
   The focus outline still hugs the painted pill, so focus visibility
   is unchanged. */
.photo-credit__toggle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

.photo-credit__toggle:hover,
.photo-credit__toggle[aria-expanded="true"] {
  color: var(--bliss-charcoal);     /* deepen to Charcoal on hover/open (neutral, no Evergreen) */
}

.photo-credit__toggle:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
}

.photo-credit__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  /* No extra opacity: the muting now comes from the toggle colour, so the
     icon keeps the same readable tone as the label (≥3:1 on Cream). */
}

.photo-credit__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.photo-credit__toggle[aria-expanded="true"] .photo-credit__chevron {
  transform: rotate(180deg);
}

/* Panel: grid-rows reveal, so any content height (long slider lists,
   wrapped names/URLs) animates open without a fixed max-height that
   could clip. Improves on the FAQ's max-height for variable content. */
.photo-credit__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: var(--space-2);
  transition: grid-template-rows 220ms ease, opacity 180ms ease;
}

.photo-credit.is-open .photo-credit__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.photo-credit__inner {
  min-height: 0;
  overflow: hidden;
}

/* Card: flat paper surface, 4px radius like every panel/frame. */
.photo-credit__card {
  max-width: 30rem;
  margin-left: auto;   /* right-align the card to match the right-aligned button */
  padding: var(--space-4) var(--space-5);
  background-color: var(--bliss-paper);
  border: 1px solid var(--bliss-hairline);
  border-radius: var(--bn-radius-sm);
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);   /* restore normal line-height (parent is 0) */
  color: var(--bliss-charcoal);
  text-align: left;    /* keep the credit content left-aligned within the card */
}

.photo-credit__dl {
  margin: 0;
}

.photo-credit__row + .photo-credit__row {
  margin-top: var(--space-3);
}

.photo-credit__term {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bliss-charcoal);
  opacity: 0.6;
  margin-bottom: 2px;
}

.photo-credit__val {
  margin: 0;
  overflow-wrap: anywhere;
}

.photo-credit__val a {
  color: var(--bliss-evergreen);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.photo-credit__val a:hover {
  color: var(--bliss-garnet);
}

.photo-credit__val a:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
}

/* Slider variant: numbered photo groups, divided by the faintest
   Evergreen hairline (matching the system's quiet dividers). */
.photo-credit__group + .photo-credit__group {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid oklch(0.30 0.09 155 / 0.12);
}

.photo-credit__group-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bliss-evergreen);
  margin-bottom: var(--space-2);
}

/* Slider-only image description, appended inline after "Photo N" inside
   the group label, e.g. "PHOTO 1: Couple in vintage car". STATIC single
   images never use this — they show photographer (and website) only.
   Resets to a calm sentence-case caption so the number stays the label
   and the description reads as a quiet editorial note. */
.photo-credit__group-desc {
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--bliss-charcoal);
}

.photo-credit__group-desc::before {
  content: ": ";
  opacity: 0.55;
}

/* Outside-image placement for full-bleed / full-height sections (hero,
   moving-image band) where the credit cannot sit inside the visual. Drop
   this content-aligned bar IMMEDIATELY AFTER the section; the button then
   lines up with the page's section content (same max-width + side padding
   as every __inner) and the photography stays completely untouched. The
   panel opens beneath the button in normal flow, pushing later content
   down — no overlay, no absolute positioning, no conflict with in-image
   controls (e.g. the hero pause button). */
.photo-credit-bar {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
  /* 9px gap below the full-bleed image (matches the in-flow contexts); tight
     bottom so it stays a footnote, not a section. */
  padding-block: 9px var(--space-2);
}

.photo-credit-bar .photo-credit {
  margin-top: 0;   /* the bar owns the vertical rhythm here */
}

/* Progressive enhancement: the collapse + toggle exist only when JS
   runs (initPhotoCredit adds .js-photo-credit to <html>). Without JS,
   the credit shows as static text and no dead toggle appears. */
:root:not(.js-photo-credit) .photo-credit__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

:root:not(.js-photo-credit) .photo-credit__toggle {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .photo-credit__panel,
  .photo-credit__chevron {
    transition: none;
  }
}


/* ── Gallery image grid ───────────────────────────────────────
   Uniform 3:2 thumbnails (object-fit cover). Each item is a link
   to the full image, progressively enhanced into the lightbox. */

.gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* If the final image lands alone in the last row of the 3-column grid
     (image count is 1 mod 3, e.g. the current 10), drop it into the centre
     column so the row reads as finished rather than orphaned at the left.
     DOM order is untouched, so the lightbox sequence is unchanged. */
  .gallery-grid__item:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}

.gallery-grid__item {
  margin: 0;
}

.gallery-figure {
  display: block;
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--bn-radius-sm);
  /* Cream loading frame so the reserved image box matches the page
     (not a white/neutral square) before the photo paints. */
  background-color: var(--bliss-cream);
  /* Standard pointer, not a magnifier. The "open larger" affordance is
     the soft scrim + label below, plus the focus ring. */
  cursor: pointer;
}

.gallery-figure__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: var(--img-focal-x, 50%) var(--img-focal-y, 50%);
  transition: transform var(--bn-transition);
}

/* Open-in-lightbox affordance — replaces the old cursor: zoom-in magnifier.
   A soft warm scrim rises from the base of the thumbnail with a small
   "View larger" label, on hover AND keyboard focus. Kept quiet and
   secondary: warm-white label on a low scrim, no icon, no button. The label
   is a pseudo-element with empty alt text ("View larger" / "") so it shows
   but is never announced by screen readers (each image already has
   descriptive alt text, and the grid carries a visible hint above it). */

.gallery-figure::before,
.gallery-figure::after {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bn-transition), transform var(--bn-transition);
}

/* Soft scrim anchored to the base, same warm-dark hue as the lightbox scrim,
   so warm-white text stays legible over both light and dark photos. */
.gallery-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Peaks dark enough at the base that the warm-white label clears WCAG AA
     (>=4.5:1) even over a bright photo bottom, then fades to clear by ~60%. */
  background: linear-gradient(
    to top,
    oklch(0.22 0.03 55 / 0.8) 0%,
    oklch(0.22 0.03 55 / 0) 60%
  );
}

.gallery-figure::after {
  /* Plain declaration first so the label still shows on browsers without the
     content alt-text grammar (Safari < 17.4, Firefox < 133 / ESR 128); the
     second line adds the empty accessible name where it is supported, so the
     label is never announced by screen readers on current browsers. */
  content: "View larger";
  content: "View larger" / "";
  position: absolute;
  z-index: 2;
  left: var(--space-3);
  bottom: var(--space-3);
  color: var(--bliss-cream);
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px oklch(0.22 0.03 55 / 0.85), 0 0 3px oklch(0.22 0.03 55 / 0.7);
  transform: translateY(4px);
}

/* Keyboard focus reveals the same cue (not hover-only), alongside the ring. */
.gallery-figure:focus-visible::before,
.gallery-figure:focus-visible::after {
  opacity: 1;
}
.gallery-figure:focus-visible::after {
  transform: translateY(0);
}
.gallery-figure:focus-visible .gallery-figure__img {
  transform: scale(1.03);
}

/* Hover reveal, limited to hover-capable pointers so a touch tap never
   leaves the cue stuck on. */
@media (hover: hover) {
  .gallery-figure:hover::before,
  .gallery-figure:hover::after {
    opacity: 1;
  }
  .gallery-figure:hover::after {
    transform: translateY(0);
  }
  .gallery-figure:hover .gallery-figure__img {
    transform: scale(1.03);
  }
}

.gallery-figure:focus-visible {
  outline: var(--bn-focus-ring);
  outline-offset: var(--bn-focus-offset);
}

/* Reduced motion: keep the fade and the label, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .gallery-figure::after {
    transform: none;
  }
  .gallery-figure:hover .gallery-figure__img,
  .gallery-figure:focus-visible .gallery-figure__img {
    transform: none;
  }
}


/* ── Soft image reveal ────────────────────────────────────────────
   Shared cream-frame + fade-in for content photos that load over a
   cream frame: Portfolio cards, gallery thumbnails, the homepage intro
   and team photos, and a present Photo Band photo (Love). When JS is
   active it sets .js-reveal on <html> and adds .is-loaded to each image
   once it has loaded/decoded (see initImageReveal in script.js): the
   image starts hidden and fades in, replacing the abrupt top-to-bottom
   paint of a progressive JPEG with one soft fade. Without JS the images
   are always visible. width/height + aspect-ratio keep the box reserved,
   so the fade never shifts layout. The hero crossfade and editorial-
   pause slideshow run their own decode/fade and are NOT included here.
   Reduced motion handled below. */
.js-reveal .placeholder-card__img,
.js-reveal .gallery-figure__img,
.js-reveal .intro__image,
.js-reveal .team__image,
.js-reveal .team-member__img,
.js-reveal .photo-band__photo {
  opacity: 0;
  /* Soft fade for the photo; the transform term keeps the Portfolio
     hover-scale transition intact (a no-op for the other images). */
  transition: opacity 400ms ease, transform var(--bn-transition);
}

.js-reveal .placeholder-card__img.is-loaded,
.js-reveal .gallery-figure__img.is-loaded,
.js-reveal .intro__image.is-loaded,
.js-reveal .team__image.is-loaded,
.js-reveal .team-member__img.is-loaded,
.js-reveal .photo-band__photo.is-loaded {
  opacity: 1;
}


/* ── Vendor credits (individual gallery pages) ────────────────── */

/* The team-behind-the-day credits are supporting detail, not a feature
   block: the heading drops below the full section-heading size, and the
   list runs tighter and up to three columns, so the section reads as a
   quiet footnote to the gallery rather than a headline moment. */
#vendors-heading {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}

.vendor-credits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.vendor-credits__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.vendor-credits__role {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Garnet accent: the small category labels carry the single warm note in
     this section. The section heading stays Evergreen and the vendor names
     stay Charcoal, so Garnet reads as an accent rather than the section color.
     Uses the brand token (no hardcoded hex); ~7.6:1 on Cream (passes AA/AAA). */
  color: var(--bliss-garnet);
}

.vendor-credits__name {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  color: var(--bliss-charcoal);
}

.vendor-credits__name a {
  color: var(--bliss-charcoal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}

.vendor-credits__name a:hover {
  color: var(--bliss-garnet);
}

@media (min-width: 768px) {
  .vendor-credits {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-8);
  }
}

/* Three columns once there is room, so the list stays short. Held to
   >=1024px so the longer vendor names are not cramped at tablet widths. */
@media (min-width: 1024px) {
  .vendor-credits {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ── Reusable lightbox ────────────────────────────────────────
   Warm translucent scrim with backdrop blur. A column layout: the
   image sits in a protected stage that always clears the controls,
   above an in-flow control band (gallery title + counter + prev/next),
   so nothing overlaps the image. No photographer credit is shown in
   the viewer (it is stripped in initLightbox). The close button stays
   fixed to the top-right corner. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) + 2);   /* Above the mobile nav overlay */
  display: flex;
  flex-direction: column;   /* Image stage stacked ABOVE the control bar, never overlapping. */
  /* Warm dark scrim, not harsh black. */
  background-color: oklch(0.22 0.03 55 / 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  /* Closed state: invisible and non-interactive, but kept in the DOM so the
     open fade runs (mirrors .nav__overlay). JS also toggles [inert] to keep
     the controls out of the tab order while closed. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Full-screen click-to-close layer behind the image and controls. */
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  cursor: zoom-out;
}

.lightbox__stage {
  position: relative;
  z-index: 1;
  /* Protected image area: takes all height above the control bar and may
     shrink (min-height:0) so the image never spills into the bar or controls. */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Top padding clears the fixed close button (48px + its 16px offset, plus an
     8px margin); bottom padding separates the image from the control bar; side
     padding keeps gutters off the screen edge. */
  padding: calc(var(--space-16) + var(--space-2)) var(--space-6) var(--space-4);
  /* Pointer events pass through the empty stage to the backdrop,
     but the figure itself stays interactive (and does not close). */
  pointer-events: none;
}

.lightbox__figure {
  /* Unwrapped (display:contents) so the image sizes directly against the
     definite-height stage flex. This keeps the image's element box equal to the
     displayed image (no letterbox), which is what lets the rounded corners hug
     the photo and avoids any backing showing on tall/short viewports.
     pointer-events stays auto and is inherited by the image, so clicking the
     photo still does not close the viewer. */
  display: contents;
  pointer-events: auto;
}

.lightbox__picture {
  /* Unwrapped too, so the <img> is a direct flex child of the stage. */
  display: contents;
}

.lightbox__img {
  display: block;
  /* The stage flex (definite height, centered) bounds the image, so max-width/
     max-height:100% resolve and the element box equals the image: no letterbox,
     no dark bands, and the corner radius hugs the photo on every viewport. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--bn-radius-sm);
}

.lightbox__caption {
  max-width: 60ch;
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--bliss-cream);
  text-align: center;
  opacity: 0.9;
}

/* Control band: gallery title, counter, and the prev/next arrows. Sits in
   normal flow BELOW the image stage (no longer fixed over the image), so no
   text or button overlaps the photo. */
.lightbox__bar {
  position: static;
  z-index: 2;
  flex: 0 0 auto;
  width: 100%;
  /* Centered row: prev arrow, info panel, next arrow grouped together (not at the screen edges). */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-6);
  /* Faint hairline reads as a clean separation between the image and controls. */
  border-top: 1px solid oklch(0.92 0.02 80 / 0.14);
  color: var(--bliss-cream);
  pointer-events: none;   /* Empty bar area passes clicks to the backdrop; arrows + info re-enable below */
}

.lightbox__bar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  /* Absorb clicks on the title/counter so they do not fall through to
     the backdrop and close the viewer. */
  pointer-events: auto;
}

.lightbox__gallery-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

/* .lightbox__credit (photographer line) is intentionally removed: the static
   element is stripped in initLightbox and no longer rendered in the viewer. */

.lightbox__counter {
  font-family: 'Poppins', sans-serif;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  opacity: 0.72;
}

/* Controls: fixed to the viewport so they never shift between images. */
.lightbox__btn {
  position: fixed;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--bliss-cream);
  background-color: oklch(0.22 0.03 55 / 0.55);
  border-radius: var(--bn-radius-full);
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.lightbox__btn:hover {
  background-color: var(--bliss-evergreen);
}

.lightbox__btn:focus-visible {
  /* Cream ring reads against the dark scrim. */
  outline: 2px solid var(--bliss-cream);
  outline-offset: 2px;
}

.lightbox__close {
  top: var(--space-4);
  right: var(--space-4);
}

/* Prev/next live inside the bottom bar, flanking the info panel (in-flow flex items). */
.lightbox__nav {
  position: static;
  flex-shrink: 0;
  pointer-events: auto;
}

.lightbox__nav:hover {
  transform: scale(1.06);
}

/* Body scroll lock while the lightbox is open (mirrors body.nav-open). */
body.lightbox-open {
  overflow: hidden;
}

@media (min-width: 768px) {
  .lightbox__close { top: var(--space-6); right: var(--space-6); }
  /* Close sits lower on desktop; give the stage matching top clearance. */
  .lightbox__stage { padding-top: var(--space-20); }
  .lightbox__bar { gap: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox {
    transition: none !important;
  }
  .placeholder-card__link:hover .placeholder-card__img,
  .gallery-figure:hover .gallery-figure__img {
    transform: none !important;
  }
  .lightbox__nav:hover {
    transform: none !important;
  }
  /* Image reveal: skip the fade and the hidden start state. Images
     appear immediately over the cream frame (still no white flash). */
  .js-reveal .placeholder-card__img,
  .js-reveal .gallery-figure__img,
  .js-reveal .intro__image,
  .js-reveal .team__image,
  .js-reveal .team-member__img,
  .js-reveal .photo-band__photo {
    opacity: 1 !important;
    transition: none !important;
  }
}