/* ==========================================================================
   BLACK & WHITE PORTRAIT CO. — main.css
   --------------------------------------------------------------------------
   Typography & palette pulled from the live brand:
     serif   — Libre Baskerville (headlines, editorial emphasis)
     sans    — Montserrat (labels, nav, body)
     gold    — #9B8845 (brand accent from live site theme)
   Structure:
     1. Tokens & base          5. Hero & intro
     2. Utilities              6. Sections (statement / process / why / faq / cta)
     3. Media & placeholders   7. Footer
     4. Nav & menu             8. Reveal system, cursor, reduced motion
   ========================================================================== */

/* ============ 1. TOKENS & BASE ============ */
:root {
  /* palette — disciplined: black, gallery white, brand gold only */
  --black: #0A0A0A;
  --black-soft: #141412;
  --white: #F7F5F1;
  --white-warm: #FAF9F6;
  --gold: #9B8845;          /* brand gold from bwportraitco.com */
  --gold-light: #B5A25E;    /* lifted tint for dark grounds */
  --ink-muted: #66625A;     /* body text on light */
  --bone-muted: #A9A499;    /* body text on dark */
  --hairline-dark: rgba(10, 10, 10, 0.16);
  --hairline-light: rgba(247, 245, 241, 0.16);

  /* type */
  --serif: "Libre Baskerville", "Iowan Old Style", Georgia, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(2.5rem, 6.4vw, 5.9rem);
  --fs-h2: clamp(2rem, 4.6vw, 4rem);
  --fs-h3: clamp(1.45rem, 2.6vw, 2.35rem);
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-label: 0.7rem;
  --track-label: 0.32em;

  /* motion — slow, confident */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 800ms;
  --dur-fast: 450ms;

  /* layout */
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --section-pad: clamp(5.5rem, 12vh, 10rem);
  --nav-h: 5.25rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

section[id] { scroll-margin-top: calc(var(--nav-h) - 1rem); }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
}
h1 em, h2 em, h3 em { font-style: italic; }

p { margin: 0; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
button { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: var(--black); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ============ 2. UTILITIES ============ */
.container {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 56rem; }

.label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* thin gold hairline that draws itself in (scaleX 0 → 1 via reveal system) */
.rule {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--gold);
  transform-origin: left center;
}
.rule--center { transform-origin: center; width: min(9rem, 40%); margin-inline: auto; }

.section-head {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-bottom: clamp(3rem, 7vh, 5.5rem);
}
.section-head__label { color: var(--gold); white-space: nowrap; }
.section-head .rule { flex: 1; }

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

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 200;
  background: var(--black);
  color: var(--white);
  padding: 0.75em 1.25em;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  transform: translateY(-300%);
  transition: transform 0.3s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* buttons — tracked caps, slow border/fill transitions */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1.25em 2.6em 1.15em;
  border: 1px solid currentColor;
  transition:
    background-color 0.55s var(--ease-out),
    color 0.55s var(--ease-out),
    border-color 0.55s var(--ease-out);
}
.btn--gold {
  color: var(--gold-light);
  border-color: var(--gold);
}
.btn--gold:hover { background: var(--gold); color: var(--black); }
.btn--outline { border-color: currentColor; }
.btn--outline:hover { color: var(--gold-light); border-color: var(--gold); }
/* on light grounds */
[data-theme="light"] .btn--gold,
.on-light .btn--gold { color: var(--gold); }
[data-theme="light"] .btn--gold:hover,
.on-light .btn--gold:hover { color: var(--white); background: var(--gold); }

/* ============ 3. MEDIA & PLACEHOLDERS ============ */
.media {
  position: relative;
  overflow: hidden;
  background: #161614;
}
.media__inner {
  position: absolute;
  inset: 0;
}
/* parallax layers get vertical headroom so the shift never shows edges */
.media__inner[data-parallax] { inset: -8% 0; }
.media__img,
.media__inner .media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* labeled placeholder (until real photography is dropped into js/images.js) */
.media .ph__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 2.1;
  color: rgba(247, 245, 241, 0.4);
}
.media:not(.has-image)::after {
  /* fine inner frame so empty slots still look considered */
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(247, 245, 241, 0.12);
  pointer-events: none;
}
.media.has-image .ph__label { display: none; }

/* subtle luxury zoom on hover where media is interactive-adjacent */
.media .media__img { transition: transform 1.2s var(--ease-out); }
.why-panel:hover .media__img,
.process-step__media:hover .media__img { transform: scale(1.03); }

/* ============ 4. NAV & MENU ============ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  color: var(--white);
  background: transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  height: var(--nav-h);
  padding-inline: var(--gutter);
}
/* solidified states, cross-faded via transition above */
.nav--solid.nav--on-light {
  background: rgba(247, 245, 241, 0.88);
  color: var(--black);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.08);
}
.nav--solid.nav--on-dark {
  background: rgba(10, 10, 10, 0.82);
  color: var(--white);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(247, 245, 241, 0.08);
}

.nav__brand {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.nav__logo {
  display: block;
  height: 2.1rem;
  width: auto;
}
.nav__logo--dark { display: none; }
/* swap lockups when the nav solidifies over a light section */
.nav--solid.nav--on-light .nav__logo--light { display: none; }
.nav--solid.nav--on-light .nav__logo--dark { display: block; }
.footer__logo {
  display: block;
  height: 2.4rem;
  width: auto;
  align-self: flex-start; /* footer__brand is a column flexbox; prevent stretch from distorting the logo */
}

.nav__links { display: flex; gap: 2.25rem; }
.nav__link {
  position: relative;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding-block: 0.4em;
}
/* underline draws in from the left, exits to the right */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-out);
}
.nav__link:hover::after,
.nav__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.nav__cta { flex-shrink: 0; }

.nav__burger {
  display: none;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: -0.5rem;
}
.nav__burger-line {
  position: absolute;
  left: 0.45rem; right: 0.45rem;
  height: 1px;
  background: currentColor;
  transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out);
}
.nav__burger-line:nth-child(1) { top: calc(50% - 4px); }
.nav__burger-line:nth-child(2) { top: calc(50% + 4px); }
html.menu-open .nav__burger-line:nth-child(1) { top: 50%; transform: rotate(45deg); }
html.menu-open .nav__burger-line:nth-child(2) { top: 50%; transform: rotate(-45deg); }

/* full-screen mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s var(--ease-out), visibility 0s linear 0.55s;
}
html.menu-open .menu {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.menu__links { display: flex; flex-direction: column; gap: 0.5rem; }
.menu__link {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 8vw, 3rem);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
html.menu-open .menu__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.15s + var(--i) * 70ms);
}
.menu__link--accent { color: var(--gold-light); font-style: italic; }
.menu__foot { position: absolute; bottom: var(--gutter); color: var(--bone-muted); }
html.menu-open body { overflow: hidden; }

/* ============ 5. INTRO & HERO ============ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  display: none;
}
html.js .intro { display: block; }
.intro__panel {
  position: absolute;
  inset: 0;
  background: var(--black);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.15s var(--ease-inout);
}
html.intro-play .intro__panel { clip-path: inset(0 0 100% 0); }
html.intro-done .intro, html.intro-skip .intro { display: none; }

/* elements orchestrated by the intro (hidden until html.intro-go) */
html.js [data-intro] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
html.js .hero__title .line {
  display: block;
  opacity: 1;
  transform: translateY(115%);
  transition: transform 1.05s var(--ease-out);
}
html.js.intro-go [data-intro] { opacity: 1; transform: none; }
html.js.intro-go .hero__title .line { transform: none; }
html:not(.js) [data-intro] { opacity: 1; }
/* failsafe: once the sequence is over, pin the final state so throttled
   tabs / stalled transitions can never leave content invisible */
html.intro-done [data-intro],
html.intro-done .hero__title .line {
  opacity: 1;
  transform: none;
  transition: none;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  background: var(--black);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  background: #101010;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0) 60%),
    linear-gradient(to top, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.25) 45%, rgba(10,10,10,0.35) 100%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(4.5rem, 12vh, 8rem);
}
.hero__eyebrow { color: var(--gold-light); margin-bottom: 2rem; }
.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.04;
  letter-spacing: -0.01em;
  max-width: 12em;
}
.line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__sub {
  max-width: 34em;
  margin-top: 2.25rem;
  color: rgba(247, 245, 241, 0.82);
  font-size: 0.95rem;
  line-height: 2;
}
.hero__cta { margin-top: 2.75rem; }

.hero__scroll-cue {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: clamp(4.5rem, 12vh, 8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.hero__scroll-line {
  width: 1px;
  height: 4.5rem;
  background: linear-gradient(to bottom, transparent, var(--gold-light));
  animation: scroll-cue 2.6s var(--ease-inout) infinite;
  transform-origin: top center;
}
@keyframes scroll-cue {
  0% { transform: scaleY(0); transform-origin: top center; }
  55% { transform: scaleY(1); transform-origin: top center; }
  56% { transform-origin: bottom center; }
  100% { transform: scaleY(0); transform-origin: bottom center; }
}
.hero__scroll-text {
  writing-mode: vertical-rl;
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--bone-muted);
}

/* ============ 6a. STATEMENT ============ */
.statement {
  background: var(--white);
  padding-block: var(--section-pad);
}
.statement__title {
  font-size: var(--fs-h2);
  max-width: 14em;
}
.statement__title span { display: block; }
.statement__title em { color: var(--gold); }
.statement__body {
  max-width: 42em;
  margin-top: 2.5rem;
  color: var(--ink-muted);
  line-height: 2.05;
}

/* ============ 6b. PROCESS (pinned on desktop) ============ */
.process {
  background: var(--white-warm);
  position: relative;
}
.process__pin { padding-block: var(--section-pad); }
.process__frame { position: relative; }

.process__progress {
  display: none;
  position: relative;
  flex: 0 0 9rem;
  height: 1px;
  background: var(--hairline-dark);
}
.process__progress-fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}

.process-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
}
.process-step + .process-step { margin-top: clamp(5rem, 12vh, 9rem); }

.process-step__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 5.5vw, 5rem);
  font-style: italic;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  margin-bottom: 1.75rem;
}
.process-step__title { font-size: var(--fs-h3); margin-bottom: 1.5rem; }
.process-step__body {
  color: var(--ink-muted);
  max-width: 30em;
  line-height: 2.05;
}
.process-step__body + .process-step__body { margin-top: 0.9rem; }
.process-step__media { aspect-ratio: 4 / 5; max-height: 72vh; }

/* step counter + "keep scrolling" cue — pinned mode only */
.process__count {
  display: none;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.process__cue {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  opacity: 1;
  transition: opacity 0.6s var(--ease-out);
}
.process__cue.is-done { opacity: 0; }
.process__cue-line {
  width: 1px;
  height: 2.6rem;
  background: linear-gradient(to bottom, transparent, var(--gold));
  animation: scroll-cue 2.6s var(--ease-inout) infinite;
  transform-origin: top center;
}
.process__cue-text {
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* — pinned mode (added by JS on capable viewports) — */
.process.is-pinned { height: 340vh; }
.process.is-pinned .process__pin {
  /* pinning itself is driven by GSAP ScrollTrigger */
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: 0;
}
.process.is-pinned .process__frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: calc(var(--nav-h) + 1.5rem);
  padding-bottom: 3rem;
}
.process.is-pinned .section-head { margin-bottom: 2.5rem; }
.process.is-pinned .process__progress { display: block; }
.process.is-pinned .process__count { display: block; }
.process.is-pinned .process__cue { display: flex; }
/* horizontal ride: the three steps sit on a track that scrubs
   sideways, 1:1 with scroll — motion is continuous (never feels
   stuck), the next step always peeks in from the right edge, and
   a fast flick still travels *through* step 02 instead of past it */
.process.is-pinned .process__steps {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: stretch;
  width: 100%;
  will-change: transform;
}
.process.is-pinned .process-step {
  margin: 0;
  min-height: 0;
  opacity: 0.3;
  transition: opacity 0.5s var(--ease-out);
}
.process.is-pinned .process-step.is-active { opacity: 1; }
.process.is-pinned .process-step__media {
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  align-self: stretch;
  min-height: 0;
}
/* the step number becomes a landmark, not a footnote */
.process.is-pinned .process-step__num {
  font-size: clamp(4.5rem, 8vw, 7.5rem);
  margin-bottom: 1.75rem;
}

/* ============ 6c. WHY CHOOSE US ============ */
.why {
  background: var(--black);
  color: var(--white);
  padding-block: var(--section-pad);
}
.why .section-head .rule { background: var(--gold); opacity: 0.85; }

.why-panel {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
.why-panel + .why-panel { margin-top: clamp(6rem, 16vh, 11rem); }
.why-panel--flip .why-panel__media { order: 2; }
.why-panel--flip .why-panel__text { order: 1; }

.why-panel__media { aspect-ratio: 4 / 5; background: #131311; }
.why-panel__num {
  display: block;
  color: var(--gold-light);
  font-size: 0.85rem;
  letter-spacing: 0.5em;
  margin-bottom: 1.5rem;
}
.why-panel__title {
  font-size: var(--fs-h3);
  line-height: 1.3;
  max-width: 13em;
  margin-bottom: 1.75rem;
}
.why-panel__body {
  color: var(--bone-muted);
  max-width: 30em;
  line-height: 2.05;
}

/* ============ 6d. FAQ ============ */
.faq {
  background: var(--white);
  padding-block: var(--section-pad);
}
.faq__title {
  font-size: var(--fs-h2);
  margin-bottom: 3rem;
}
.faq__title em { color: var(--gold); }

.faq__tabs {
  display: flex;
  gap: 2.5rem;
  border-bottom: 1px solid var(--hairline-dark);
  margin-bottom: 1rem;
}
.faq__tab {
  position: relative;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0.9em 0.1em;
  transition: color 0.4s var(--ease-out);
}
.faq__tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-out);
}
.faq__tab.is-active { color: var(--black); }
.faq__tab.is-active::after,
.faq__tab:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.faq__panel.is-switching { opacity: 0; transform: translateY(8px); }
.faq__panel {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.faq-item { border-bottom: 1px solid var(--hairline-dark); }
.faq-item__h { margin: 0; font-size: inherit; }
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  padding: 1.6rem 0.25rem;
  transition: color 0.4s var(--ease-out);
}
.faq-item__q:hover { color: var(--gold); }
.faq-item__icon {
  position: relative;
  flex: 0 0 0.85rem;
  height: 0.85rem;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transition: transform 0.5s var(--ease-out);
}
.faq-item__icon::after { transform: rotate(90deg); }
.faq-item__q[aria-expanded="true"] .faq-item__icon::after { transform: rotate(0deg); }
.faq-item__q[aria-expanded="true"] .faq-item__icon::before { transform: rotate(180deg); }

.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease-inout);
}
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a-inner { overflow: hidden; }
.faq-item__a-inner p {
  color: var(--ink-muted);
  line-height: 2;
  padding: 0 0.25rem 1.9rem;
  max-width: 44em;
}

/* ============ 6e. CTA BAND ============ */
.cta-band {
  position: relative;
  background: var(--black);
  color: var(--white);
  min-height: 72vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-align: center;
  padding-block: var(--section-pad);
}
.cta-band__media { position: absolute; inset: 0; opacity: 0.4; }
/* keep the slot label clear of the band's headline while unpopulated */
.cta-band .ph__label { align-items: flex-start; padding-top: 2.5rem; }
.cta-band__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.88) 100%);
}
.cta-band__content { position: relative; z-index: 2; }
.cta-band .rule--center { margin-bottom: 3rem; }
.cta-band__title {
  font-size: var(--fs-h2);
}
.cta-band__title em { color: var(--gold-light); }
.cta-band__sub {
  color: var(--bone-muted);
  margin: 1.75rem auto 3rem;
  max-width: 34em;
}

/* ============ 6f. SUBPAGE HEADERS ============ */
.page-head {
  background: var(--black);
  color: var(--white);
  padding: calc(var(--nav-h) + clamp(4rem, 10vh, 7rem)) 0 clamp(4rem, 9vh, 6.5rem);
}
.page-head--compact { padding-bottom: clamp(3rem, 6vh, 4.5rem); }
.page-head__eyebrow { color: var(--gold-light); margin-bottom: 1.75rem; }
.page-head__title {
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.page-head__title em { color: var(--gold-light); }
.page-head__sub {
  max-width: 38em;
  margin-top: 2rem;
  color: var(--bone-muted);
  font-size: 0.95rem;
  line-height: 2;
}

/* ============ 6g. PROPOSAL PAGE ============ */
.proposal {
  background: var(--white);
  padding-block: var(--section-pad);
}
.proposal__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.proposal__aside .section-head { margin-bottom: 2.75rem; }

.next-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.next-step {
  padding-block: 1.9rem;
  border-top: 1px solid var(--hairline-dark);
}
.next-step:last-child { border-bottom: 1px solid var(--hairline-dark); }
.next-step__num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.next-step__title {
  font-size: 1.15rem;
  margin-bottom: 0.65rem;
}
.next-step__body {
  color: var(--ink-muted);
  font-size: 0.85rem;
  line-height: 1.95;
  max-width: 26em;
}

/* ---- inline text links ----------------------------------------
   The global default is `a { color: inherit; text-decoration: none }`,
   which is correct for nav items, cards, and buttons — but it leaves a
   link buried in a paragraph completely invisible. Any context that
   holds running prose is listed here and gets a real affordance.

   Extends the convention already set by `.prose a` on /privacy: gold
   text plus a hairline underline. The underline is deliberately quieter
   than the text (45% of currentColor) so it reads as typography rather
   than a default browser link, and it comes to full strength on hover.
   Underline rather than colour alone — colour by itself is not a
   sufficient signal, and fails for colour-blind readers. */
.statement__body a,
.process-step__body a,
.faq-item__a-inner a,
.jobs-list__note a,
.jobs-block__text p a,
.next-step__body a,
.quote blockquote a,
.spread__cap a,
.why-panel__body a,
.link {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--gold); /* fallback for no color-mix */
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color 0.35s var(--ease-out), text-decoration-color 0.35s var(--ease-out);
}
.statement__body a:hover,
.process-step__body a:hover,
.faq-item__a-inner a:hover,
.jobs-list__note a:hover,
.jobs-block__text p a:hover,
.next-step__body a:hover,
.quote blockquote a:hover,
.spread__cap a:hover,
.why-panel__body a:hover,
.link:hover {
  color: var(--black);
  text-decoration-color: currentColor;
}

/* Gold is too dark to read on the near-black sections — lift it. */
[data-theme="dark"] .statement__body a,
[data-theme="dark"] .jobs-list__note a,
[data-theme="dark"] .next-step__body a,
[data-theme="dark"] .cta-band__sub a,
[data-theme="dark"] .why-panel__body a,
.cta-band__sub a { color: var(--gold-light); }
[data-theme="dark"] .statement__body a:hover,
[data-theme="dark"] .jobs-list__note a:hover,
[data-theme="dark"] .next-step__body a:hover,
[data-theme="dark"] .cta-band__sub a:hover,
[data-theme="dark"] .why-panel__body a:hover,
.cta-band__sub a:hover { color: var(--white); }

/* Links that leave the site announce themselves. */
.statement__body a[target="_blank"]::after,
.process-step__body a[target="_blank"]::after,
.faq-item__a-inner a[target="_blank"]::after,
.jobs-list__note a[target="_blank"]::after,
.jobs-block__text p a[target="_blank"]::after {
  content: "\2197"; /* ↗ */
  display: inline-block;
  margin-left: 0.28em;
  font-size: 0.82em;
  text-decoration: none;
  vertical-align: baseline;
}

/* ---- guestbook spreads ---------------------------------------
   Deliberately capped in size. These pages carry guests' handwritten
   messages, and at this scale the handwriting reads as texture rather
   than legible text — which is the point. Do not ship larger source
   files here without a signed release. */
.spreads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
}
.spread {
  margin: 0;
  background: var(--bone, #F7F5F1);
  box-shadow: 0 18px 45px -28px rgba(0, 0, 0, 0.55);
}
.spread img {
  display: block;
  width: 100%;
  height: auto;
}
.spread__cap {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.spreads--hero { grid-template-columns: 1fr; max-width: 46rem; margin-inline: auto; }

/* ---- click-to-load video facade -------------------------------
   The real TikTok embed pulls in ~1MB of third-party JavaScript.
   This shows a still and only loads the iframe once the visitor asks,
   which keeps the page-weight work from being undone. */
.embed {
  position: relative;
  max-width: 22rem;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  background: var(--black, #0A0A0A);
  overflow: hidden;
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  place-content: center;
  gap: 0.9rem;
  border: 1px solid var(--hairline-light);
  background: var(--black, #0A0A0A);
  color: var(--white, #F7F5F1);
  cursor: pointer;
  text-align: center;
  padding: 2rem;
}
.embed__btn:hover .embed__play { transform: scale(1.08); border-color: var(--gold-light); }
.embed__play {
  justify-self: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-content: center;
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.embed__play::after {
  content: "";
  border-style: solid;
  border-width: 0.42rem 0 0.42rem 0.7rem;
  border-color: transparent transparent transparent var(--gold);
  margin-left: 0.18rem;
}
.embed__label {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-muted);
  line-height: 2;
}

/* ---- pull quotes (testimonials) ------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
}
.quote { margin: 0; }
.quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink);
}
.quote figcaption {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 720px) {
  .spreads { grid-template-columns: 1fr; }
}

/* form — quiet, hairline fields, generous rhythm */
.form__row { margin-bottom: 2.4rem; }
.form__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
}
.form__label {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.8rem;
}
.form__label span { color: var(--gold); }
.form__input {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.28);
  border-radius: 0;
  padding: 0.55em 0.1em 0.8em;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--black);
  transition: border-color 0.45s var(--ease-out);
  appearance: none;
  -webkit-appearance: none;
}
.form__input::placeholder { color: rgba(10, 10, 10, 0.32); font-style: italic; }
.form__input:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.form__input:focus-visible { outline: none; }
.form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%239B8845' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2em center;
  padding-right: 1.6em;
}
.form__textarea { resize: vertical; min-height: 5.5em; line-height: 1.8; }
.form__actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}
.form__note {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-style: italic;
  font-family: var(--serif);
}

.form-success { max-width: 34em; padding-block: 2rem; }
.form-success:focus { outline: none; }
.form-success .rule { width: 5.5rem; margin-bottom: 2.25rem; }
.form-success__title { font-size: var(--fs-h3); margin-bottom: 1.25rem; }
.form-success__body { color: var(--ink-muted); line-height: 2.05; }

/* proposal — Dubsado form embed */
.proposal-embed__frame {
  display: block;
  width: 100%;
  border: 0;
}

/* ============ 6h. JOBS PAGE ============ */
.jobs {
  background: var(--white);
  padding-block: var(--section-pad);
}
.jobs-block {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 8fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
  margin-bottom: clamp(5rem, 12vh, 8.5rem);
}
.jobs-block__title {
  font-size: var(--fs-h3);
  line-height: 1.35;
  max-width: 15em;
  margin-bottom: 1.75rem;
}
.jobs-block__title em { color: var(--gold); }
.jobs-block__text p {
  color: var(--ink-muted);
  line-height: 2.05;
  max-width: 36em;
}
.jobs-block__text p + p { margin-top: 1.4rem; }
.jobs-block__media { aspect-ratio: 4 / 5; max-height: 34rem; }

.jobs-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-top: 3.25rem;
  margin-top: 3.25rem;
  border-top: 1px solid var(--hairline-dark);
}
.jobs-columns:first-of-type { margin-top: 0; }
.jobs-list__title {
  font-size: 1.3rem;
  margin-bottom: 1.75rem;
}
.jobs-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.jobs-list__items li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.75rem;
  color: var(--ink-muted);
  line-height: 1.9;
  font-size: 0.92rem;
}
.jobs-list__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: 0.85rem;
  height: 1px;
  background: var(--gold);
}
.jobs-list__note {
  color: var(--ink-muted);
  line-height: 2.05;
  max-width: 30em;
}

/* ============ 6i. PROSE (privacy etc.) ============ */
.prose-section {
  background: var(--white);
  padding-block: var(--section-pad);
}
.prose h2 {
  font-size: 1.35rem;
  margin: 3rem 0 1.1rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li {
  color: var(--ink-muted);
  line-height: 2.05;
}
.prose ul { padding-left: 1.2rem; margin: 1rem 0; }
.prose li + li { margin-top: 0.5rem; }
/* Same treatment as the inline links above — see the block near
   ".link" — so prose on /privacy matches the rest of the site. */
.prose a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--gold);
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color 0.35s var(--ease-out), text-decoration-color 0.35s var(--ease-out);
}
.prose a:hover { color: var(--black); text-decoration-color: currentColor; }
.prose strong { color: var(--black); font-weight: 500; }

/* ============ 7. FOOTER ============ */
.footer {
  background: var(--black);
  color: var(--white);
  border-top: 1px solid var(--hairline-light);
  padding-block: clamp(3.5rem, 8vh, 5.5rem) 2.5rem;
  font-size: 0.78rem;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem 2rem;
}
.footer__brand { display: flex; flex-direction: column; line-height: 1.2; }
.footer__nav, .footer__social {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
}
.footer__link {
  position: relative;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--bone-muted);
  transition: color 0.4s var(--ease-out);
}
.footer__link:hover { color: var(--gold-light); }
/* Visible NAP — must stay character-for-character identical to the
   LocalBusiness JSON-LD and the Google Business Profile. Deliberately
   not uppercased/letterspaced like .footer__link: an address is read,
   not scanned, and search engines match it against the listing. */
.footer__nap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 2rem;
  font-style: normal;
  font-size: 0.64rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  /* Deliberately quiet. A street address and phone are a local-business
     signal, and this brand should not read as one. The SEO weight lives in
     the LocalBusiness JSON-LD and the Google Business Profile, not in how
     loud this block is on screen, so it can recede to fine print without
     costing anything. Keep the text itself identical to the schema. */
  color: var(--bone-muted);
  color: color-mix(in srgb, var(--bone-muted) 68%, transparent);
}
.footer__nap-link {
  color: inherit;
  transition: color 0.4s var(--ease-out);
}
.footer__nap-link:hover { color: var(--gold-light); }
.footer__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--hairline-light);
  margin-top: 1.5rem;
  padding-top: 2rem;
  color: var(--bone-muted);
  letter-spacing: 0.1em;
  font-size: 0.66rem;
  text-transform: uppercase;
}

/* ============ 8. REVEAL SYSTEM ============ */
html.js [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    clip-path 1.1s var(--ease-inout);
  will-change: opacity, transform;
}
html.js [data-reveal="up"] { transform: translateY(22px); }
html.js [data-reveal="line"] { opacity: 1; transform: scaleX(0); transition-duration: 1.2s; }
html.js [data-reveal="mask"] {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
}
html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* ============ CUSTOM CURSOR (desktop, fine pointers only) ============ */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
html.has-cursor .cursor { opacity: 1; }
.cursor__dot {
  position: fixed;
  top: -2px; left: -2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-light);
  transition: opacity 0.3s ease;
}
.cursor__ring {
  position: fixed;
  top: -18px; left: -18px;
  width: 36px; height: 36px;
}
.cursor__ring-circle {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(155, 136, 69, 0.75);
  transition:
    transform 0.5s var(--ease-out),
    background-color 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out);
}
html.cursor-hover .cursor__ring-circle {
  transform: scale(1.7);
  background: rgba(155, 136, 69, 0.08);
}
/* over photography: the ring blooms wide and glassy */
html.cursor-media .cursor__ring-circle {
  transform: scale(2.6);
  border-color: rgba(247, 245, 241, 0.5);
  background: rgba(10, 10, 10, 0.12);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
html.cursor-media .cursor__dot { opacity: 0; }
/* context label ("Scroll", etc.) centred in the ring */
.cursor__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
html.cursor-label .cursor__label { opacity: 1; transform: none; }
html.cursor-label .cursor__ring-circle {
  transform: scale(2.6);
  background: rgba(10, 10, 10, 0.35);
  border-color: rgba(181, 162, 94, 0.9);
}
html.cursor-label .cursor__dot { opacity: 0; }
html.has-cursor,
html.has-cursor a,
html.has-cursor button,
html.has-cursor label {
  cursor: none;
}
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select {
  cursor: auto;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 64rem) {
  .process-step { grid-template-columns: 1fr; gap: 2.5rem; }
  .process-step__media { max-width: 30rem; }
  .why-panel { grid-template-columns: 1fr; gap: 2.75rem; }
  .why-panel--flip .why-panel__media { order: 0; }
  .why-panel--flip .why-panel__text { order: 0; }
  .why-panel__media { max-width: 34rem; }
}

@media (max-width: 64rem) {
  .proposal__grid { grid-template-columns: 1fr; gap: 4rem; }
  .jobs-block { grid-template-columns: 1fr; }
  .jobs-block__media { max-width: 28rem; }
}

@media (max-width: 48rem) {
  :root { --nav-h: 4.5rem; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .hero__scroll-cue { display: none; }
  /* narrow slice of the wide hero: the text stack fills a phone hero, so
     crop to keep both subjects in frame rather than favoring one edge */
  .hero__media .media__img { object-position: 55% 50% !important; }
  .hero__scrim {
    background:
      linear-gradient(to top, rgba(8,8,8,0.95) 0%, rgba(8,8,8,0.6) 40%, rgba(8,8,8,0.4) 65%, rgba(8,8,8,0.45) 100%),
      linear-gradient(to bottom, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0) 30%);
  }
  .hero__title,
  .hero__sub,
  .hero__eyebrow { text-shadow: 0 2px 16px rgba(0,0,0,0.55); }
  .footer__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .section-head { gap: 1.1rem; }
  .form__row--split { grid-template-columns: 1fr; gap: 0; }
  .form__row--split .form__field + .form__field { margin-top: 2.4rem; }
  .jobs-columns { grid-template-columns: 1fr; gap: 2.75rem; }
}

/* ============ 9. LUXURY LAYER — grain, video, sound, gallery ============ */

/* — film grain wash over the whole composition — */
.grain {
  position: fixed;
  inset: -8%;
  z-index: 90;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  opacity: 0.045;
  mix-blend-mode: overlay;
}

/* — ambient video layers (injected by JS over the still) — */
.media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}
.media.has-video .media__video { opacity: 1; }

/* — WebGL atmosphere mounts (hero + CTA) — */
.hero__atmosphere,
.cta-band__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__atmosphere canvas,
.cta-band__atmosphere canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* — SplitText masked headline lines — */
.split-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.split-line { display: block; will-change: transform; }

/* — magnetic elements — */
[data-magnetic] { will-change: transform; }

/* — button sheen: a slow gold light pass on hover — */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -30%;
  width: 40%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(181, 162, 94, 0.22) 50%,
    transparent 100%
  );
  transform: translateX(-160%) skewX(-18deg);
  transition: transform 0.9s var(--ease-inout);
  pointer-events: none;
}
.btn:hover::before { transform: translateX(420%) skewX(-18deg); }

/* — editorial hover frame on the why panels — */
.why-panel__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid rgba(181, 162, 94, 0);
  transition: inset 0.7s var(--ease-out), border-color 0.7s var(--ease-out);
  pointer-events: none;
}
.why-panel:hover .why-panel__media::before {
  inset: -14px;
  border-color: rgba(181, 162, 94, 0.45);
}

/* ============ 10. THE PORTFOLIO — horizontal gallery strip ============ */
.gallery {
  position: relative;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}
.gallery__pin {
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav-h) + 1.25rem);
  padding-bottom: 2.25rem;
}
.gallery--pinned .gallery__pin {
  height: 100vh;
  height: 100svh;
}
.gallery__head {
  width: 100%;
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}
.gallery__counter {
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gallery__lede {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.9rem);
  line-height: 1.25;
  max-width: 22em;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
.gallery__lede em { color: var(--gold-light); }

.gallery__viewport {
  flex: 1;
  min-height: 0;
  width: 100%;
}
.gallery__track {
  display: flex;
  align-items: center;
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  height: 100%;
  padding-inline: var(--gutter);
  width: max-content;
  will-change: transform;
}
.gallery__item {
  position: relative;
  flex: 0 0 auto;
  height: 72%;
  aspect-ratio: 3 / 4;
  overflow: visible;
  background: none;
}
.gallery__item--tall { height: 86%; }
.gallery__item--low  { height: 58%; }
.gallery__item--wide { height: 54%; aspect-ratio: 3 / 2; }
.gallery__item .media__inner {
  overflow: hidden;
  background: #161614;
}
.gallery__item .media__img {
  transition: transform 1.2s var(--ease-out), filter 1.2s var(--ease-out);
}
.gallery__item:hover .media__img { transform: scale(1.045); }
.gallery__caption {
  position: absolute;
  left: 0;
  bottom: -2.1rem;
  font-size: 0.56rem;
  color: var(--bone-muted);
  letter-spacing: 0.3em;
  white-space: nowrap;
  opacity: 0.85;
}
.gallery__endcap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2.25rem;
  width: clamp(20rem, 34vw, 30rem);
  padding-inline: 1.5rem;
}
.gallery__endcap .rule--center { width: 5.5rem; }
.gallery__endcap-line {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.35;
}
.gallery__endcap-line em { color: var(--gold-light); }
/* Secondary to the gold button above it: the proposal is the ask, the
   gallery is the browse. Tracked caps to match the button's register
   without competing with it. Carries the ↗ because it leaves the site
   (galleries.bwportraitco.com is a separate host). */
.gallery__endcap-alt {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-muted);
  margin-top: -0.8rem;
  transition: color 0.4s var(--ease-out);
}
.gallery__endcap-alt::after {
  content: "\2197";
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.9em;
}
.gallery__endcap-alt:hover { color: var(--gold-light); }
.gallery__progress {
  position: relative;
  height: 1px;
  margin: clamp(2rem, 4.5vh, 3rem) var(--gutter) 0;
  background: var(--hairline-light);
}
.gallery__progress-fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}

/* — swipe fallback (touch / small / reduced-motion) — */
.gallery--swipe .gallery__pin { height: auto; }
.gallery--swipe .gallery__viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery--swipe .gallery__viewport::-webkit-scrollbar { display: none; }
.gallery--swipe .gallery__track {
  height: auto;
  align-items: center;
  padding-block: 1rem 3.25rem;
}
.gallery--swipe .gallery__item {
  height: auto;
  width: min(72vw, 20rem);
  scroll-snap-align: center;
}
.gallery--swipe .gallery__item--tall { width: min(78vw, 22rem); }
.gallery--swipe .gallery__item--low  { width: min(64vw, 17rem); }
.gallery--swipe .gallery__item--wide { width: min(82vw, 24rem); }
.gallery--swipe .gallery__endcap {
  width: min(80vw, 24rem);
  scroll-snap-align: center;
  padding-block: 2rem;
}
.gallery--swipe .gallery__progress { display: none; }

/* ============ FLAT / QA MODE (?flat) ============ */
html.flat [data-reveal],
html.flat [data-intro],
html.flat .split-line,
html.flat .hero__title .line,
html.flat .intro__panel,
html.flat .media__img {
  transition: none !important;
  animation: none !important;
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal],
  html.js [data-reveal="up"],
  html.js [data-reveal="mask"],
  html.js [data-reveal="line"] {
    transform: none;
    clip-path: none;
    transition: opacity 0.4s ease;
  }
  html.js [data-reveal="mask"] .media__inner { transform: none; transition: none; }
  html.js [data-intro] { transform: none; transition: opacity 0.4s ease; }
  html.js .hero__title .line { transform: none; opacity: 0; transition: opacity 0.4s ease; }
  html.js.intro-go .hero__title .line { opacity: 1; }
  html.js .hero__media { transform: none; transition: none; }
  .intro__panel { transition: opacity 0.5s ease; }
  html.intro-play .intro__panel { clip-path: none; opacity: 0; }
  .hero__scroll-line { animation: none; }
  .media .media__img { transition: none; }
  .why-panel:hover .media__img,
  .process-step__media:hover .media__img { transform: none; }
  .gallery__item:hover .media__img { transform: none; }
  .btn::before { display: none; }
  .why-panel__media::before { transition: none; }
  .media__video { display: none; }
  .split-line { will-change: auto; }
  .process__cue-line { animation: none; }
}