/* ==========================================================================
   Lume House — editorial scaffold (sage + cream)
   ========================================================================== */

:root {
  /* ─────────────────────────────────────────────────────────────────────
     PALETTE — Gallery white + charcoal anchors (re-pal'd Nov 2026)
     The studio's portrait work uses bold solid-color backdrops (reds,
     blues, etc.), so the page itself recedes to near-white and the
     yellow logo gets dark "anchor" surfaces (nav, footer, splash) where
     it pops. Variable names retain their original spelling so the rest
     of the CSS doesn't need to change — they're now repurposed:
       --sage / --sage-light  →  off-white page bgs (no longer green)
       --olive / --olive-dark →  gold accent + deeper hover (no longer green)
       --cream / --cream-soft →  warm light surface (text-on-dark, paper)
       --ink                  →  true charcoal (cleaner than old warm olive-ink)
     ───────────────────────────────────────────────────────────────────── */
  --cream: #F4F2EC;        /* warm light surface — used as text on dark anchors */
  --cream-soft: #FAF8F3;   /* lightest tint */
  --sage-light: #FFFFFF;   /* pure white (was c5d89d) */
  --sage: #F6F5F2;         /* page bg — clean off-white (was 9cab84) */
  --olive: #C9A961;        /* gold accent (was 89986d) */
  --olive-dark: #A88A3F;   /* gold deep, hover/pressed (was 68744f) */

  --ink: #1A1A1A;          /* charcoal anchor (was 1f2517 warm olive-ink) */
  --ink-soft: #3a3a3a;     /* secondary text on light (was 4a5440) */
  --ink-faint: #7a7a7a;    /* muted text (was 7a836e) */

  --rule: #DAD8D2;         /* neutral hairline (was warm gold-tan cfc198) */
  --rule-soft: #E8E6E0;

  --gold: #C9A961;         /* logo color — accent */

  /* Roles — page bg is now near-white so portrait photos pop without color
     bias. Anchors (header, footer, splash) get explicit dark bgs further
     down the file so the yellow logo gets contrast where it lives. */
  --bg: var(--sage);
  --bg-paper: var(--cream);
  --bg-deep: var(--ink);
  --on-bg: var(--ink);
  --on-bg-muted: var(--ink-soft);
  --accent: var(--olive);
  --accent-strong: var(--olive-dark);

  /* Type */
  --ff-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Layout */
  --max-w: 1280px;
  --max-w-prose: 720px;
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);

  /* Type scale */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.5rem, 2.5vw, 2rem);
  --fs-3xl: clamp(2rem, 4vw, 3rem);
  --fs-4xl: clamp(2.75rem, 7vw, 5.5rem);
  --fs-5xl: clamp(3.5rem, 10vw, 8.5rem);
  --fs-6xl: clamp(4.5rem, 13vw, 11rem);
  /* Editorial section padding — generous breathing room between ideas */
  --section-y-xl: clamp(6rem, 12vw, 11rem);

  /* Motion */
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Kill any horizontal scroll caused by full-bleed elements (carousel,
     bleed-band) miscalculating against the viewport scrollbar. Mobile-critical. */
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--on-bg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Long words (e.g. "photographers" in big italic) wrap instead of overflowing.
     overflow-x lives on <html> only — duplicating it here breaks scroll on
     some browsers (notably iOS Safari momentum scroll). */
  overflow-wrap: break-word;
}
img, picture, video { max-width: 100%; height: auto; display: block; }

/* Portrait focal-point defaults — Lume's portraits have heads near the TOP
   of the natural frame (head-to-toe or chest-up shots). Anchoring to top
   keeps faces in view regardless of container aspect ratio. */
.zblock__media img,
.mosaic__item img,
.carousel__slide img,
.gallery-grid__item img,
.gallery-index__media img,
.hero__media img {
  object-position: center top;
}
.bleed-band__bg img {
  object-position: center 25%;
}

/* Hero image rendered in editorial black-and-white per brand direction —
   gives the splash + wedding/corporate covers a more luxe magazine feel
   without us needing a separately processed B&W source file. */
.hero__media img {
  filter: grayscale(1) contrast(1.05);
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0 0 var(--space-sm); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--paper { background: var(--bg-paper); }
.section--deep { background: var(--bg-deep); }

.eyebrow {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* Full ink — olive-dark still reads muted on sage page bg. */
  color: var(--ink);
  font-weight: 600;
}

.lede {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1.5;
  color: var(--ink);
  max-width: var(--max-w-prose);
}

/* ==========================================================================
   Header / nav
   ========================================================================== */

/* Header: always solid charcoal so the yellow logo gets dark contrast on
   every page (re-pal'd from transparent/sage-morph). */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding-block: var(--space-sm);
  background: rgba(26, 26, 26, 0.94);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: padding var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled { padding-block: 0.5rem; }

.site-header__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}

.site-logo { justify-self: start; display: flex; align-items: center; }
.site-logo img { height: 60px; width: auto; }
@media (min-width: 768px) { .site-logo img { height: 78px; } }
.site-header.is-scrolled .site-logo img { height: 52px; }
@media (min-width: 768px) { .site-header.is-scrolled .site-logo img { height: 64px; } }

.site-nav { justify-self: center; }
.site-nav__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: clamp(1rem, 2.4vw, 2rem);
}
.site-nav__link {
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  /* Header is always charcoal in the new palette, so nav text needs to
     be light. Cream reads cleanly against the dark anchor. */
  color: var(--cream);
  position: relative;
  padding-block: 0.25rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover { color: var(--gold); }
.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  /* Header is charcoal — give the CTA a gold fill so it pops as the
     primary action against both nav and logo. */
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.nav-cta:hover {
  background: var(--olive-dark);
  border-color: var(--olive-dark);
  color: var(--cream);
}

/* Mobile nav */
.nav-toggle { display: none; }
.mobile-drawer { display: none; }
@media (max-width: 879px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-nav, .nav-cta { display: none; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink);
    justify-self: end;
    background: rgba(255,255,255,0.4);
  }
  .nav-toggle svg { width: 18px; height: 18px; }
  .mobile-drawer {
    position: fixed;
    inset: 0;
    background: var(--cream);
    z-index: 60;
    padding: clamp(1.25rem, 4vh, 2.25rem) var(--gutter) clamp(1.5rem, 4vh, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 1.2vh, 0.875rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform var(--dur-med) var(--ease-out);
  }
  .mobile-drawer.is-open { transform: translateX(0); }
  .mobile-drawer__close {
    align-self: flex-end;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .mobile-drawer a {
    font-family: var(--ff-display);
    font-size: clamp(1.5rem, 5.5vw, 2.25rem);
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    padding-block: clamp(0.55rem, 1.4vh, 0.95rem);
    flex-shrink: 0;
  }
}

/* Footer social icons */
.site-footer__social {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.875rem !important;
  margin-top: var(--space-md);
  list-style: none;
  padding: 0;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(246,240,215,0.3);
  border-radius: 999px;
  color: var(--cream);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.site-footer__social a:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.site-footer__social svg { width: 16px; height: 16px; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid currentColor;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn--primary {
  background: var(--olive);
  color: var(--cream);
  border-color: var(--olive);
}
.btn--primary:hover { background: var(--olive-dark); border-color: var(--olive-dark); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--cream); }

.btn--on-dark {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.btn--on-dark:hover { background: var(--cream); color: var(--ink); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--olive-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.text-link:hover { color: var(--ink); }

/* ==========================================================================
   Hero (lifestyle full-bleed)
   ========================================================================== */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(4rem, 10vw, 8rem);
  padding-top: 8rem;
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Charcoal gradient fallback shown only briefly before the hero image
     loads (or if it fails). Was olive-green in the old palette. */
  background:
    linear-gradient(135deg, #2a2a2a 0%, var(--ink) 60%, #0a0a0a 100%);
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26,26,26,0.05) 0%, rgba(26,26,26,0.55) 100%);
}
.hero__content { max-width: var(--max-w-prose); }
.hero__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(246,240,215,0.85);
  margin-bottom: var(--space-md);
}
.hero__heading {
  font-family: var(--ff-display);
  font-size: var(--fs-6xl);
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-lg);
  font-style: italic;
  /* Constrain width so the browser breaks the line naturally at the right
     spot — no need for hardcoded <br> tags. Balance picks aesthetic breaks. */
  max-width: 14ch;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hero__heading em { font-style: normal; }
.hero__sub {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1.5;
  color: rgba(246,240,215,0.85);
  max-width: 520px;
  margin-bottom: var(--space-lg);
}

/* ==========================================================================
   Z-pattern alternating blocks
   ========================================================================== */

.zblock {
  display: grid;
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .zblock { grid-template-columns: 1fr 1fr; }
  .zblock--reverse .zblock__media { order: 2; }
}
.zblock + .zblock { margin-top: var(--section-y-xl); }

.zblock__media {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--sage-light), var(--olive));
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 60vh, 720px);
}
.zblock__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.zblock__media[data-placeholder]::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: rgba(246,240,215,0.7);
  letter-spacing: 0.05em;
}

.zblock__heading {
  /* Sized to fit a ~50% grid column without overflowing.
     Use --fs-5xl ONLY on full-width / centered headings (page H1s), not z-blocks. */
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-lg);
  font-style: italic;
  overflow-wrap: break-word;
  text-wrap: balance;
  max-width: 100%;
}
.zblock__heading em { font-style: normal; }
/* Ensure the text content always paints above the media — kills the
   paint-order flicker when fade-up transforms drop on is-visible. */
.zblock > *:not(.zblock__media) {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.zblock__media { position: relative; z-index: 0; }

/* ==========================================================================
   Differentiator grid (4 cards)
   ========================================================================== */

.diff-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .diff-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .diff-grid { grid-template-columns: repeat(4, 1fr); } }

.diff-card {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-md);
}
.diff-card__num {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--olive);
  font-size: var(--fs-lg);
  margin-bottom: var(--space-xs);
}
.diff-card__title {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-xs);
}
.diff-card__body {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   Carousel (CSS scroll-snap, no JS dependency)
   ========================================================================== */

.carousel {
  position: relative;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  padding-inline: var(--gutter);
}
.carousel__track {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
  flex: 0 0 auto;
  width: clamp(220px, 28vw, 360px);
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  background: linear-gradient(135deg, var(--sage), var(--olive-dark));
  position: relative;
  overflow: hidden;
}
.carousel__slide--landscape { aspect-ratio: 4 / 3; width: clamp(320px, 42vw, 540px); }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel__slide[data-placeholder]::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(246,240,215,0.7);
  font-family: var(--ff-display);
  font-style: italic;
}

/* ==========================================================================
   Testimonial card row
   ========================================================================== */

.testimonial-row {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .testimonial-row { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
  padding: var(--space-md);
  border: 1px solid var(--rule);
  background: var(--cream-soft);
}
.testimonial__quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--space-md);
}
.testimonial__name {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 600;
}

/* ==========================================================================
   Service grid (numbered, like POW corporate page)
   ========================================================================== */

.service-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .service-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  padding: var(--space-lg);
  background: var(--cream-soft);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.service-card__num {
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--olive);
  font-size: var(--fs-2xl);
}
.service-card__title { font-size: var(--fs-2xl); margin-bottom: var(--space-2xs); }
.service-card__body { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.65; }
.service-card__cta { margin-top: auto; }

/* ==========================================================================
   Mosaic gallery (asymmetric)
   ========================================================================== */

.mosaic {
  display: grid;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .mosaic { grid-template-columns: repeat(4, 1fr); } }

.mosaic__item {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--sage), var(--olive));
  overflow: hidden;
  cursor: zoom-in;
  min-height: clamp(220px, 32vh, 380px);
}
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.mosaic__item:hover img { transform: scale(1.04); }
.mosaic__item--tall { aspect-ratio: 4 / 6; }
.mosaic__item--wide { aspect-ratio: 4 / 3; grid-column: span 2; }
.mosaic__item[data-placeholder]::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(246,240,215,0.7);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-md);
}

/* ==========================================================================
   Bleed quote band
   ========================================================================== */

.bleed-band {
  position: relative;
  padding-block: clamp(5rem, 12vw, 9rem);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.bleed-band__bg {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(135deg, #2a2a2a, var(--ink) 60%, #0a0a0a 100%);
}
.bleed-band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.bleed-band__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26,26,26,0.35), rgba(26,26,26,0.7));
}
.bleed-band__quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-3xl);
  line-height: 1.3;
  max-width: var(--max-w-prose);
  margin: 0 auto var(--space-md);
}
.bleed-band__cite {
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-style: normal;
  color: rgba(246,240,215,0.85);
}

/* ==========================================================================
   Brand marquee — infinite-scroll logo strip (corporate "trusted by")
   CSS-only: track holds two identical sets of logos, animation translates
   the track from 0 to -50% so the duplicate set seamlessly takes over.
   Logos are desaturated + dimmed at rest, full color on hover.
   ========================================================================== */

.brand-marquee {
  --marquee-speed: 38s;        /* lower = faster */
  --marquee-gap: clamp(2rem, 5vw, 4rem);
  --logo-height: clamp(38px, 5vw, 60px);

  position: relative;
  overflow: hidden;
  width: 100%;
  /* Soft fade in/out at the edges so logos don't pop in/out abruptly */
  -webkit-mask-image: linear-gradient(90deg,
                       transparent 0,
                       #000 8%,
                       #000 92%,
                       transparent 100%);
          mask-image: linear-gradient(90deg,
                       transparent 0,
                       #000 8%,
                       #000 92%,
                       transparent 100%);
}
.brand-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--marquee-gap);
  padding-block: clamp(1rem, 2vw, 1.5rem);
  animation: brand-marquee-slide var(--marquee-speed) linear infinite;
}
.brand-marquee:hover .brand-marquee__track,
.brand-marquee:focus-within .brand-marquee__track { animation-play-state: paused; }

.brand-marquee__logo {
  flex: 0 0 auto;
  height: var(--logo-height);
  width: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(0.4) contrast(1.1);
  opacity: 0.55;
  transition: filter var(--dur-med) var(--ease-out),
              opacity var(--dur-med) var(--ease-out);
}
.brand-marquee__logo:hover {
  filter: grayscale(0) brightness(1) contrast(1);
  opacity: 1;
}

@keyframes brand-marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  position: relative;
  padding-block: clamp(5rem, 11vw, 9rem);
  text-align: center;
  background: var(--bg-paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cta-band__heading {
  font-size: var(--fs-4xl);
  margin-bottom: var(--space-md);
  font-style: italic;
}
.cta-band__heading em { font-style: normal; }
.cta-band__sub {
  color: var(--ink-soft);
  font-size: var(--fs-lg);
  max-width: 540px;
  margin: 0 auto var(--space-lg);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.site-footer__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer__brand p {
  color: rgba(246,240,215,0.92);
  margin-top: var(--space-sm);
  max-width: 320px;
  font-size: var(--fs-sm);
  line-height: 1.65;
}
.site-footer__heading {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sage-light);
  margin-bottom: var(--space-md);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.site-footer a {
  color: rgba(246,240,215,0.95);
  font-size: var(--fs-md);
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer a:hover { color: var(--cream); }
.site-footer__bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(246,240,215,0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: rgba(246,240,215,0.85);
}
.site-footer__bottom a { color: var(--sage-light); font-weight: 600; }

/* ==========================================================================
   Splash (entry page)
   ========================================================================== */

.splash {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-xl) var(--gutter);
  /* Charcoal anchor with subtle gold vignette so the yellow logo has
     max hue + luminance contrast. (Was sage in the old palette.) */
  background:
    radial-gradient(circle at 50% 35%, rgba(201, 169, 97, 0.10) 0%, transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(0, 0, 0, 0.3) 0%, transparent 65%),
    var(--ink);
  color: var(--cream);
}
.splash__inner { max-width: 720px; }
.splash__logo img { height: clamp(160px, 22vw, 260px); width: auto; margin-inline: auto; display: block; }
.splash__tagline {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fs-xl);
  color: var(--cream);
  margin: var(--space-lg) 0 var(--space-2xl);
}
.splash__funnels {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .splash__funnels { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } }
.funnel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem);
  background: var(--cream-soft);
  /* Splash is now charcoal — reset text color to ink so the card content
     reads on the light card bg (otherwise inherits splash's cream text). */
  color: var(--ink);
  border: 1px solid var(--rule);
  text-align: center;
  overflow: hidden;
  height: 100%;
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.funnel-card:hover {
  transform: translateY(-4px);
  border-color: var(--olive);
  box-shadow: 0 18px 40px -24px rgba(31,37,23,0.35);
}
.funnel-card__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.funnel-card__title {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-xs);
  font-style: italic;
}
.funnel-card__title em { font-style: normal; }
.funnel-card__body {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
.funnel-card__cta {
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  /* Push CTA to the bottom of the card so Enter links align across cards
     regardless of card body length */
  margin-top: auto;
}

.splash__foot {
  margin-top: var(--space-2xl);
  font-size: var(--fs-xs);
  /* Splash is now charcoal — use cream-soft so this small line reads. */
  color: rgba(244, 242, 236, 0.75);
  letter-spacing: 0.12em;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form { display: flex; flex-direction: column; gap: var(--space-md); }
.form__row { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 700px) { .form__row { grid-template-columns: 1fr 1fr; } }
/* min-width: 0 lets grid tracks shrink below the intrinsic min-content width
   of <input type="date"> / <input type="time">, which otherwise force the
   row wider than the viewport on narrow mobile and trigger horizontal scroll. */
.form__field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.form__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}
.form__input, .form__textarea, .form__select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--rule);
  background: var(--cream-soft);
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out);
  /* Strip native appearance so date/time/select inputs render with the same
     box model as text inputs — otherwise iOS Safari sizes them to their
     intrinsic picker UI and they end up visually narrower than their grid
     track. Caret icons restored below for select / date / time. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}
.form__input:focus, .form__textarea:focus, .form__select:focus {
  outline: none;
  border-color: var(--olive);
}
.form__textarea { min-height: 160px; resize: vertical; }

/* Match the height of text inputs exactly so a date/time field never appears
   shorter than its neighbour in a 2-column row. */
.form__input[type="date"],
.form__input[type="time"],
.form__input[type="number"],
.form__input[type="tel"],
.form__input[type="email"],
.form__input[type="text"],
.form__select {
  height: calc(0.875rem * 2 + 1.4em + 2px); /* py + line-height + border */
  display: block;
}

/* Restore a caret on the right edge of the select since appearance:none stripped
   the native one. Inline SVG chevron in --ink. */
.form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%231f2517' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 2.5rem;
}

/* iOS Safari aligns date/time text to the top by default — keep them centred
   so the visible text sits in the same vertical position as text inputs. */
.form__input[type="date"],
.form__input[type="time"] {
  text-align: left;
  -webkit-text-fill-color: var(--ink);
}
.form__input[type="date"]::-webkit-date-and-time-value,
.form__input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.4em;
}

/* ==========================================================================
   Gallery page — masonry grid + section nav chips
   ========================================================================== */

.gallery-chips {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}
.gallery-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--cream-soft);
  border: 1px solid var(--rule);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.gallery-chip:hover {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--cream);
}

.gallery-section-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Uniform-tile gallery — CSS Grid with explicit aspect-ratio. Each tile is
   identical 4:5 portrait, rows always align. Replaces the earlier CSS
   columns approach where varying image heights produced visually uneven
   "rows" that looked broken. */
.gallery-grid {
  display: grid;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .gallery-grid { grid-template-columns: 1fr; } }

.gallery-grid__item {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg-paper);
  position: relative;
}
.gallery-grid__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
}
.gallery-grid__item:hover img {
  transform: scale(1.04);
  filter: brightness(0.95);
}

/* Gallery index — two large preview cards linking to the two collection pages */
.gallery-index {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .gallery-index { grid-template-columns: 1fr 1fr; } }

.gallery-index__card {
  display: flex;
  flex-direction: column;
  background: var(--cream-soft);
  border: 1px solid var(--rule);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.gallery-index__card:hover {
  transform: translateY(-4px);
  border-color: var(--olive);
  box-shadow: 0 18px 40px -24px rgba(31, 37, 23, 0.35);
}
.gallery-index__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-paper);
}
.gallery-index__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery-index__card:hover .gallery-index__media img { transform: scale(1.04); }
.gallery-index__body {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.gallery-index__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 600;
  margin: 0 0 var(--space-sm);
}
.gallery-index__title {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-style: italic;
  line-height: 1.1;
  margin: 0 0 var(--space-sm);
  color: var(--ink);
}
.gallery-index__title em { font-style: normal; }
.gallery-index__sub {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0 0 var(--space-md);
}
.gallery-index__cta {
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  /* Push the View Gallery CTA to the bottom of the card so both cards'
     buttons align on the same row regardless of body-copy length. */
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   Lightbox (gallery)
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 19, 11, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-md);
}
.lightbox[hidden] { display: none; }
.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: 100%;
  max-height: 100%;
}
.lightbox__img {
  max-width: min(95vw, 1400px);
  max-height: 82vh;
  object-fit: contain;
  background: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lightbox__caption {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(246, 240, 215, 0.72);
  font-weight: 500;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(246, 240, 215, 0.25);
  border-radius: 999px;
  color: var(--cream);
  background: rgba(31, 37, 23, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(31, 37, 23, 0.85);
  border-color: rgba(246, 240, 215, 0.5);
}
.lightbox__close { top: var(--space-md); right: var(--space-md); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: var(--space-md); }
.lightbox__nav--next { right: var(--space-md); }
.lightbox__close svg,
.lightbox__nav svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .lightbox__close,
  .lightbox__nav { width: 42px; height: 42px; }
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
}

/* ==========================================================================
   Utility
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--ink);
  color: var(--cream);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

.fade-in, .fade-up {
  opacity: 0;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.fade-up { transform: translateY(20px); }
.fade-in.is-visible, .fade-up.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Push content below the fixed header on inner pages (not splash). Values
   track the actual nav height: logo (60px / 78px) + padding-block on
   .site-header (var(--space-sm) = 1rem each side = 32px total). */
.has-fixed-header { padding-top: 92px; }
@media (min-width: 768px) { .has-fixed-header { padding-top: 110px; } }

/* ==========================================================================
   Mobile responsiveness overrides — kill aggressive desktop mins on small screens
   ========================================================================== */

@media (max-width: 720px) {
  /* Hero — large viewports get fs-6xl, mobile drops to a sane mobile size */
  .hero {
    min-height: 80vh;
    padding-top: 7rem;
    padding-bottom: clamp(2.5rem, 8vw, 4rem);
  }
  .hero__heading {
    font-size: clamp(2.5rem, 11vw, 4rem);
  }
  .hero__sub { font-size: var(--fs-md); }

  /* Z-block media — let aspect-ratio control height, drop the desktop floor */
  .zblock__media { min-height: 0; }
  .zblock__media[style*="aspect-ratio: 1 / 1"] { aspect-ratio: 1 / 1; }

  /* Z-block heading */
  .zblock__heading { font-size: clamp(1.875rem, 8vw, 2.5rem); }
  .zblock + .zblock { margin-top: clamp(3rem, 10vw, 5rem); }

  /* Mosaic — let aspect-ratio rule, no height floor that breaks small tiles */
  .mosaic__item { min-height: 0; }

  /* Sections — softer padding on mobile */
  .section { padding-block: clamp(3rem, 9vw, 5rem); }
  /* Inline overrides on pages set padding-block to var(--section-y-xl). Cap it on mobile. */
  .section[style*="--section-y-xl"],
  section[style*="--section-y-xl"] {
    padding-block: clamp(3rem, 9vw, 5rem) !important;
  }

  /* Page-header H1s on inner pages were inline-styled to fs-5xl — too big mobile */
  h1[style*="--fs-5xl"] {
    font-size: clamp(2.25rem, 9vw, 3rem) !important;
  }

  /* Splash — bring funnel cards in tighter */
  .splash { padding: var(--space-lg) var(--gutter); }
  .splash__tagline { font-size: var(--fs-md); margin: var(--space-lg) 0 var(--space-xl); }
  .splash__logo img { height: clamp(110px, 30vw, 160px); }

  /* CTA band */
  .cta-band__heading { font-size: clamp(2rem, 9vw, 3rem); }

  /* Bleed quote */
  .bleed-band__quote { font-size: clamp(1.5rem, 6vw, 2rem); }

  /* Carousel slides — smaller on mobile */
  .carousel__slide {
    width: clamp(180px, 60vw, 260px);
  }
  .carousel__slide--landscape {
    width: clamp(260px, 80vw, 360px);
  }

  /* Service cards — single column padding tight */
  .service-card { padding: var(--space-md); }

  /* Container gutter — already clamps but ensure it's not too tight */
  .container { padding-inline: clamp(1rem, 4vw, 1.5rem); }
}