/* ============================================================
   STORY PAGE — single wedding-story template (.st-*).
   One repeatable structure shared by every wedding story so the
   admin only swaps cover, couple, meta, prose, and gallery images.
   Sections: hero · intro · alternating prose+gallery chapters ·
   full-bleed image · film · closing.
   ============================================================ */
.st-hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: flex-end;
  color: var(--c-on-dark); overflow: hidden; isolation: isolate;
}
.st-hero__media { position: absolute !important; inset: 0; z-index: -2; }
.st-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

@media (max-width: 760px) {
  img[style*="--studio-mobile-position"] {
    object-position: var(--studio-mobile-position) !important;
  }
}
.st-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,12,0.4) 0%, rgba(20,16,12,0.05) 32%, rgba(20,16,12,0.05) 58%, rgba(20,16,12,0.72) 100%);
}
.st-hero__inner { width: 100%; padding-block: clamp(140px, 20vh, 200px) clamp(56px, 9vh, 96px); text-align: center; }
.st-hero__eyebrow {
  color: rgba(255,255,255,0.8); letter-spacing: 0.4em; margin-bottom: clamp(28px, 4vh, 44px); display: inline-block;
}
.st-hero__couple {
  font-family: var(--f-display); font-size: clamp(3rem, 7vw + 0.5rem, 8rem);
  line-height: 0.92; letter-spacing: -0.04em; color: #fff; font-weight: 400;
}
.st-hero__couple em { font-style: italic; }
.st-hero__meta {
  margin-top: var(--s-5); font-family: var(--f-sans); font-size: var(--fs-overline);
  letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,0.85); font-weight: 500;
  display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap;
}
.st-hero__meta span + span::before { content: "·"; margin-right: var(--s-4); margin-left: -2px; opacity: 0.6; }
.st-hero__scroll {
  position: absolute; left: 50%; bottom: var(--s-6); transform: translateX(-50%); z-index: 2;
  font-family: var(--f-sans); font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.7);
}

/* INTRO — venue lede, centered */
.st-intro { max-width: 760px; margin-inline: auto; text-align: center; }
.st-intro__label {
  font-family: var(--f-display); font-style: italic; color: var(--c-accent);
  font-size: clamp(1.3rem, 1.6vw + 0.4rem, 1.9rem); margin-bottom: var(--s-4); display: block;
}
.st-intro__lede {
  font-family: var(--f-display); font-size: clamp(1.6rem, 2.4vw + 0.4rem, 2.8rem);
  line-height: 1.2; letter-spacing: -0.025em; color: var(--c-ink); font-weight: 400;
}
.st-intro__lede em { font-style: italic; color: var(--c-accent); }
.st-intro__body {
  margin-top: var(--s-6); font-family: var(--f-serif); font-style: italic;
  font-size: var(--fs-lede); line-height: 1.6; color: var(--c-ink-soft);
}
.st-intro__facts {
  margin-top: var(--s-7); display: flex; justify-content: center; gap: clamp(28px, 4vw, 64px);
  flex-wrap: wrap; border-top: 1px solid var(--c-line); padding-top: var(--s-6);
}
.st-intro__fact { display: grid; gap: var(--s-1); }
.st-intro__fact dt {
  font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--c-muted); font-weight: 500;
}
.st-intro__fact dd { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: 1.4rem; color: var(--c-ink); }

/* CHAPTER — prose block + its own image cluster. Repeatable. */
.st-chapter { display: grid; gap: clamp(36px, 5vw, 72px); }
.st-chapter__head { max-width: 720px; }
.st-chapter__num {
  font-family: var(--f-display); font-style: italic; color: var(--c-accent);
  font-size: 1.05rem; letter-spacing: 0.04em; margin-bottom: var(--s-3); display: block;
}
.st-chapter__title {
  font-family: var(--f-display); font-size: clamp(1.9rem, 3vw + 0.4rem, 3.2rem);
  line-height: 1.04; letter-spacing: -0.03em; font-weight: 400; margin-bottom: var(--s-5);
}
.st-chapter__title em { font-style: italic; color: var(--c-accent); }
.st-chapter__body { display: grid; gap: var(--s-4); max-width: 64ch; }
.st-chapter__body p { font-size: var(--fs-body); line-height: 1.75; color: var(--c-ink-soft); font-weight: 300; margin: 0; }
.st-chapter__body p:first-child { font-family: var(--f-serif); font-style: italic; font-size: var(--fs-lede); color: var(--c-ink); }

/* IMAGE CLUSTERS — three repeatable layouts, all editorial */
/* duo: two side by side, second dropped */
.st-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); align-items: start; }
.st-duo figure:nth-child(2) { margin-top: clamp(40px, 6vw, 88px); }
.st-duo figure { margin: 0; overflow: hidden; background: var(--c-bg-soft); aspect-ratio: 4 / 5; }
.st-duo--landscape figure { aspect-ratio: 3 / 2; }
.st-duo img, .st-trio img, .st-duo-slider img, .st-solo img, .st-strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.st-duo figure:hover img, .st-trio figure:hover img, .st-duo-slider figure:hover img, .st-solo:hover img { transform: scale(1.03); }
@media (max-width: 640px) { .st-duo { grid-template-columns: 1fr; } .st-duo figure:nth-child(2) { margin-top: 0; } }

/* trio: broken 3-up */
.st-trio { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 32px); align-items: start; }
.st-trio figure { margin: 0; overflow: hidden; background: var(--c-bg-soft); }
.st-trio figure:nth-child(1) { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.st-trio figure:nth-child(2) { grid-column: 6 / span 7; aspect-ratio: 3 / 2; }
.st-trio figure:nth-child(3) { grid-column: 3 / span 7; aspect-ratio: 3 / 2; margin-top: clamp(8px, 1vw, 16px); }
@media (max-width: 760px) { .st-trio figure:nth-child(n) { grid-column: 1 / -1; aspect-ratio: 4 / 5; margin-top: 0; } }

.st-trio-slider {
  position: relative;
  overflow: hidden;
  --gallery-edge-bg: var(--section-bg, var(--c-bg));
}
.st-trio-slider::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(12vw, 120px);
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gallery-edge-bg) 0%, transparent), var(--gallery-edge-bg) 88%);
}
.st-trio-slider__track {
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.st-trio-slider__track::-webkit-scrollbar { display: none; }
.st-trio-slider__panel {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.st-trio-slider__panel.st-trio {
  max-width: min(100%, 960px);
  margin-inline: auto;
}
.st-trio-flow {
  overflow: visible;
}
.st-trio-flow::after {
  display: none;
}
.st-trio-flow .st-trio-slider__track {
  display: grid;
  overflow: hidden;
  gap: 0;
  scroll-snap-type: none;
}
.st-trio-flow .st-trio-slider__panel {
  grid-area: 1 / 1;
  max-width: min(100%, 960px);
  width: 100%;
  margin-inline: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px);
  transition: opacity .34s var(--ease-out), transform .48s var(--ease-out);
}
.st-trio-flow .st-trio-slider__panel.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.st-trio-flow.is-flow-next .st-trio-slider__panel.is-active figure:nth-child(1) {
  animation: trioFlowFromCenter .54s var(--ease-out) both;
}
.st-trio-flow.is-flow-next .st-trio-slider__panel.is-active figure:nth-child(2) {
  animation: trioFlowFromLow .54s var(--ease-out) both;
}
.st-trio-flow.is-flow-next .st-trio-slider__panel.is-active figure:nth-child(3) {
  animation: trioFlowFromRight .54s var(--ease-out) both;
}
.st-trio-flow.is-flow-prev .st-trio-slider__panel.is-active figure:nth-child(1) {
  animation: trioFlowFromLeft .54s var(--ease-out) both;
}
.st-trio-flow.is-flow-prev .st-trio-slider__panel.is-active figure:nth-child(2) {
  animation: trioFlowFromLeftTall .54s var(--ease-out) both;
}
.st-trio-flow.is-flow-prev .st-trio-slider__panel.is-active figure:nth-child(3) {
  animation: trioFlowFromCenter .54s var(--ease-out) both;
}
@keyframes trioFlowFromCenter {
  from { opacity: .78; transform: translate(30%, -8%) scale(.98); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes trioFlowFromLow {
  from { opacity: .78; transform: translate(-18%, 24%) scale(.96); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes trioFlowFromRight {
  from { opacity: 0; transform: translateX(34%) scale(.95); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes trioFlowFromLeft {
  from { opacity: 0; transform: translateX(-34%) scale(.95); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes trioFlowFromLeftTall {
  from { opacity: .78; transform: translate(-28%, 8%) scale(.96); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}
.st-duo-slider__panel {
  display: grid;
  flex: 0 0 100%;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(18px, 3vw, 48px);
  align-items: start;
  scroll-snap-align: start;
}
.st-duo-slider__panel:nth-child(even) {
  column-gap: clamp(28px, 4.5vw, 72px);
}
.st-duo-slider__panel figure {
  margin: 0;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.st-duo-slider__panel figure:nth-child(1) {
  grid-column: 2 / span 7;
  aspect-ratio: 3 / 2;
}
.st-duo-slider__panel figure:nth-child(2) {
  grid-column: 9 / span 3;
  aspect-ratio: 4 / 5;
  margin-top: clamp(34px, 5vw, 82px);
}
.st-duo-slider__panel:nth-child(even) figure:nth-child(1) {
  grid-column: 2 / span 4;
  aspect-ratio: 4 / 5;
  margin-top: clamp(26px, 4vw, 68px);
}
.st-duo-slider__panel:nth-child(even) figure:nth-child(2) {
  grid-column: 6 / span 6;
  aspect-ratio: 16 / 10;
  margin-top: 0;
}
.st-duo-slider__panel figure:only-child {
  grid-column: 4 / span 6;
  aspect-ratio: 4 / 5;
  margin-top: 0;
}
.st-trio-slider__controls {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  margin: 0;
  pointer-events: none;
}
.st-trio-slider:not(.st-trio-flow) .st-trio-slider__controls {
  left: 50%;
  right: auto;
  width: min(88vw, 1160px);
  max-width: calc(100% - 48px);
  transform: translateX(-50%);
  padding-inline: 0;
}
.st-trio-slider:not(.st-trio-flow).gallery-nav--rail .st-trio-slider__controls,
.st-trio-slider:not(.st-trio-flow).gallery-nav--rail_line .st-trio-slider__controls {
  width: min(96vw, 1260px);
  max-width: calc(100% - 16px);
}
.st-trio-slider__controls .st-strip__progress {
  position: absolute;
  right: clamp(18px, 3vw, 42px);
  bottom: clamp(18px, 3vw, 36px);
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--gallery-edge-bg);
  background: color-mix(in srgb, var(--gallery-edge-bg) 86%, transparent);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.st-trio-slider__controls .gallery__btn {
  position: absolute;
  top: auto;
  bottom: clamp(18px, 3vw, 36px);
  z-index: 6;
  background: var(--gallery-edge-bg);
  background: color-mix(in srgb, var(--gallery-edge-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  opacity: var(--gallery-nav-opacity, .88);
  pointer-events: auto;
  transform: none;
  transform-origin: center;
  transition:
    opacity .2s ease,
    transform .2s cubic-bezier(.2, .8, .2, 1),
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}
.st-trio-slider__controls .gallery__btn:disabled {
  opacity: .3;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.st-trio-slider__controls .gallery__btn:not(:disabled):hover {
  opacity: min(1, calc(var(--gallery-nav-opacity, .88) + .08));
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--c-ink) 12%, transparent);
}
.st-trio-slider__controls .gallery__btn:not(:disabled):active {
  transform: translateY(1px) scale(.96);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c-ink) 10%, transparent);
  transition-duration: .08s;
}
.st-trio-slider__controls .gallery__btn:disabled:hover {
  opacity: .3;
  transform: none;
  box-shadow: none;
}
.st-trio-slider__controls .gallery__btn[data-gallery-prev] {
  left: clamp(12px, 2vw, 28px);
}
.st-trio-slider__controls .gallery__btn[data-gallery-next] {
  right: clamp(12px, 2vw, 28px);
}
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn,
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn {
  top: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  width: clamp(44px, 5vw, 76px);
  height: auto;
  border-radius: 0;
  border-color: transparent;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gallery-edge-bg) 88%, transparent), color-mix(in srgb, var(--gallery-edge-bg) 18%, transparent));
  transform-origin: center;
}
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn,
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn,
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn:not(:disabled):hover,
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn:not(:disabled):hover,
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn:not(:disabled):active,
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn:not(:disabled):active {
  transform: none;
}
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn,
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gallery-edge-bg) 88%, transparent), color-mix(in srgb, var(--gallery-edge-bg) 18%, transparent));
}
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn[data-gallery-next],
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn[data-gallery-next] {
  background: linear-gradient(270deg, color-mix(in srgb, var(--gallery-edge-bg) 88%, transparent), color-mix(in srgb, var(--gallery-edge-bg) 18%, transparent));
}
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn::after {
  content: "";
  position: absolute;
  top: 16%;
  bottom: 16%;
  width: 1px;
  background: color-mix(in srgb, var(--c-ink) 22%, transparent);
}
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn[data-gallery-prev]::after {
  right: 11px;
}
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn[data-gallery-next]::after {
  left: 11px;
}
.st-trio-slider.gallery-nav--circle .st-trio-slider__controls .gallery__btn,
.st-trio-slider.gallery-nav--ghost .st-trio-slider__controls .gallery__btn,
.st-trio-slider.gallery-nav--dark_circle .st-trio-slider__controls .gallery__btn {
  top: auto;
  bottom: clamp(18px, 3vw, 36px);
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.st-trio-slider.gallery-nav--ghost .st-trio-slider__controls .gallery__btn {
  background: color-mix(in srgb, var(--gallery-edge-bg) 26%, transparent);
  border-color: color-mix(in srgb, var(--c-ink) 12%, transparent);
}
.st-trio-slider.gallery-nav--dark_circle .st-trio-slider__controls .gallery__btn {
  background: transparent;
  border-color: color-mix(in srgb, var(--c-ink) 72%, transparent);
}
.st-trio-slider:not(.st-trio-flow).gallery-nav--rail .st-trio-slider__controls .gallery__btn[data-gallery-prev],
.st-trio-slider:not(.st-trio-flow).gallery-nav--rail_line .st-trio-slider__controls .gallery__btn[data-gallery-prev] {
  left: 0;
}
.st-trio-slider:not(.st-trio-flow).gallery-nav--rail .st-trio-slider__controls .gallery__btn[data-gallery-next],
.st-trio-slider:not(.st-trio-flow).gallery-nav--rail_line .st-trio-slider__controls .gallery__btn[data-gallery-next] {
  right: 0;
}
.st-trio-flow.gallery-nav--rail .st-trio-slider__controls .gallery__btn[data-gallery-prev],
.st-trio-flow.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn[data-gallery-prev] {
  left: clamp(-92px, -6vw, -56px);
}
.st-trio-flow.gallery-nav--rail .st-trio-slider__controls .gallery__btn[data-gallery-next],
.st-trio-flow.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn[data-gallery-next] {
  right: clamp(-92px, -6vw, -56px);
}
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn[data-gallery-next],
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn[data-gallery-next] {
  background: linear-gradient(270deg, color-mix(in srgb, var(--gallery-edge-bg) 88%, transparent), color-mix(in srgb, var(--gallery-edge-bg) 18%, transparent));
}
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn:hover,
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn:hover {
  color: var(--c-ink);
  border-color: transparent;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gallery-edge-bg) 96%, transparent), color-mix(in srgb, var(--gallery-edge-bg) 32%, transparent));
}
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn[data-gallery-next]:hover,
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn[data-gallery-next]:hover {
  background: linear-gradient(270deg, color-mix(in srgb, var(--gallery-edge-bg) 96%, transparent), color-mix(in srgb, var(--gallery-edge-bg) 32%, transparent));
}
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn[data-gallery-prev]:not(:disabled):hover,
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn[data-gallery-prev]:not(:disabled):hover {
  transform: translateX(-5px);
  box-shadow: -12px 0 34px color-mix(in srgb, var(--c-ink) 10%, transparent);
}
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn[data-gallery-next]:not(:disabled):hover,
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn[data-gallery-next]:not(:disabled):hover {
  transform: translateX(5px);
  box-shadow: 12px 0 34px color-mix(in srgb, var(--c-ink) 10%, transparent);
}
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn[data-gallery-prev]:not(:disabled):active,
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn[data-gallery-prev]:not(:disabled):active {
  transform: translateX(-1px) scaleX(.96);
}
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn[data-gallery-next]:not(:disabled):active,
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn[data-gallery-next]:not(:disabled):active {
  transform: translateX(1px) scaleX(.96);
}
.st-trio-slider.gallery-nav--rail .st-trio-slider__controls .gallery__btn:disabled:hover,
.st-trio-slider.gallery-nav--rail_line .st-trio-slider__controls .gallery__btn:disabled:hover {
  transform: none;
  box-shadow: none;
}
.st-trio-slider:not(.gallery-nav--rail):not(.gallery-nav--rail_line).gallery-nav-pos--middle .st-trio-slider__controls .gallery__btn,
.st-trio-slider:not(.gallery-nav--rail):not(.gallery-nav--rail_line):not(.gallery-nav-pos--bottom) .st-trio-slider__controls .gallery__btn {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
.st-trio-slider:not(.gallery-nav--rail):not(.gallery-nav--rail_line).gallery-nav-pos--middle .st-trio-slider__controls .gallery__btn:not(:disabled):hover,
.st-trio-slider:not(.gallery-nav--rail):not(.gallery-nav--rail_line):not(.gallery-nav-pos--bottom) .st-trio-slider__controls .gallery__btn:not(:disabled):hover {
  transform: translateY(-50%) scale(1.04);
}
.st-trio-slider:not(.gallery-nav--rail):not(.gallery-nav--rail_line).gallery-nav-pos--middle .st-trio-slider__controls .gallery__btn:not(:disabled):active,
.st-trio-slider:not(.gallery-nav--rail):not(.gallery-nav--rail_line):not(.gallery-nav-pos--bottom) .st-trio-slider__controls .gallery__btn:not(:disabled):active {
  transform: translateY(-50%) scale(.96);
}
.st-trio-slider:not(.gallery-nav--rail):not(.gallery-nav--rail_line).gallery-nav-pos--middle .st-trio-slider__controls .gallery__btn:disabled:hover,
.st-trio-slider:not(.gallery-nav--rail):not(.gallery-nav--rail_line):not(.gallery-nav-pos--bottom) .st-trio-slider__controls .gallery__btn:disabled:hover {
  transform: translateY(-50%);
}
.st-trio-slider:not(.gallery-nav--rail):not(.gallery-nav--rail_line).gallery-nav-pos--bottom .st-trio-slider__controls .gallery__btn {
  top: auto;
  bottom: clamp(18px, 3vw, 36px);
  transform: none;
}
.st-trio-slider:not(.gallery-nav--rail):not(.gallery-nav--rail_line).gallery-nav-pos--bottom .st-trio-slider__controls .gallery__btn:not(:disabled):hover {
  transform: translateY(-2px) scale(1.04);
}
.st-trio-slider:not(.gallery-nav--rail):not(.gallery-nav--rail_line).gallery-nav-pos--bottom .st-trio-slider__controls .gallery__btn:not(:disabled):active {
  transform: translateY(1px) scale(.96);
}
@media (max-width: 760px) {
  .st-trio-slider:not(.st-trio-flow) .st-trio-slider__controls {
    width: 100%;
    max-width: calc(100% - 24px);
  }
  .st-trio-slider__panel.st-trio {
    max-width: 100%;
  }
  .st-duo-slider__panel,
  .st-duo-slider__panel:nth-child(even) {
    grid-template-columns: 1fr;
    gap: var(--gallery-gap, clamp(16px, 2vw, 32px));
  }
  .st-duo-slider__panel figure:nth-child(n),
  .st-duo-slider__panel:nth-child(even) figure:nth-child(n),
  .st-duo-slider__panel figure:only-child {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 5;
    margin-top: 0;
  }
  .st-trio-slider__controls .gallery__btn {
    top: auto;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    transform: none;
  }
  .st-trio-flow .st-trio-slider__controls .gallery__btn,
  .st-trio-flow .st-trio-slider__controls .gallery__btn[data-gallery-next] {
    top: auto;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gallery-edge-bg) 88%, transparent);
  }
  .st-trio-flow .st-trio-slider__controls .gallery__btn[data-gallery-prev] {
    left: clamp(12px, 2vw, 28px);
  }
  .st-trio-flow .st-trio-slider__controls .gallery__btn[data-gallery-next] {
    right: clamp(12px, 2vw, 28px);
  }
}

.st-duo figure.gallery-frame--portrait,
.st-trio figure.gallery-frame--portrait,
.st-duo-slider figure.gallery-frame--portrait,
.st-solo.gallery-frame--portrait,
.gallery-set figure.gallery-frame--portrait { aspect-ratio: 4 / 5 !important; }
.st-duo figure.gallery-frame--landscape,
.st-trio figure.gallery-frame--landscape,
.st-duo-slider figure.gallery-frame--landscape,
.st-solo.gallery-frame--landscape,
.gallery-set figure.gallery-frame--landscape { aspect-ratio: 3 / 2 !important; }
.st-duo figure.gallery-frame--square,
.st-trio figure.gallery-frame--square,
.st-duo-slider figure.gallery-frame--square,
.st-solo.gallery-frame--square,
.gallery-set figure.gallery-frame--square { aspect-ratio: 1 / 1 !important; }
.st-duo figure.gallery-frame--auto,
.st-trio figure.gallery-frame--auto,
.st-duo-slider figure.gallery-frame--auto,
.st-solo.gallery-frame--auto,
.gallery-set figure.gallery-frame--auto { aspect-ratio: auto !important; }
.gallery-frame--auto img { height: auto !important; }

/* solo: single statement image */
.st-solo { margin: 0; overflow: hidden; background: var(--c-bg-soft); aspect-ratio: 3 / 2; }
.st-solo--portrait { aspect-ratio: 4 / 5; max-width: 720px; margin-inline: auto; }

/* full-bleed break image */
.st-bleed { width: 100%; height: clamp(60vh, 70vw, 90vh); overflow: hidden; background: var(--c-bg-soft); }
.st-bleed img { width: 100%; height: 100%; object-fit: cover; }

/* swipe gallery (reuses gallery.js via data-component="gallery") */
.st-strip { position: relative; min-width: 0; }
.st-strip__track {
  display: flex; gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding-block: var(--s-4); padding-inline: var(--container-pad); scrollbar-width: none; cursor: grab;
}
.st-strip__track::-webkit-scrollbar { display: none; }
.st-strip__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.st-strip__item {
  flex: 0 0 auto; scroll-snap-align: start; overflow: hidden; background: var(--c-bg-soft); margin: 0;
}
.st-strip__item--p { width: clamp(240px, 26vw, 360px); height: clamp(340px, 36vw, 500px); }
.st-strip__item--l { width: clamp(360px, 40vw, 540px); height: clamp(280px, 28vw, 380px); }
.st-strip__controls {
  display: flex; gap: var(--s-4); margin-top: var(--s-6); padding-inline: var(--container-pad); align-items: center;
}
.st-strip__progress { margin-left: auto; font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; }

.gallery-set {
  --gallery-gap: clamp(16px, 2vw, 32px);
  --gallery-size: clamp(220px, 28vw, 380px);
}
.gallery-set--gap-tight { --gallery-gap: clamp(6px, 1vw, 14px); }
.gallery-set--gap-normal { --gallery-gap: clamp(16px, 2vw, 32px); }
.gallery-set--gap-loose { --gallery-gap: clamp(28px, 4vw, 64px); }
.gallery-set--density-compact { --gallery-size: clamp(180px, 22vw, 300px); }
.gallery-set--density-balanced { --gallery-size: clamp(220px, 28vw, 380px); }
.gallery-set--density-large { --gallery-size: clamp(280px, 36vw, 520px); }
.gallery-set figure,
.gallery-set .st-strip__item {
  border-radius: var(--gallery-radius, 0);
}
.gallery-set--fit-contain img {
  object-fit: contain !important;
  background: var(--c-bg-soft);
}
.st-duo.gallery-set,
.st-trio.gallery-set,
.st-duo-slider.gallery-set .st-duo-slider__panel,
.st-strip.gallery-set .st-strip__track {
  gap: var(--gallery-gap);
}
.st-strip.gallery-set--density-compact .st-strip__item--p { width: clamp(190px, 21vw, 300px); height: clamp(280px, 30vw, 420px); }
.st-strip.gallery-set--density-compact .st-strip__item--l { width: clamp(280px, 32vw, 440px); height: clamp(220px, 24vw, 320px); }
.st-strip.gallery-set--density-large .st-strip__item--p { width: clamp(300px, 34vw, 460px); height: clamp(420px, 46vw, 640px); }
.st-strip.gallery-set--density-large .st-strip__item--l { width: clamp(440px, 52vw, 700px); height: clamp(340px, 38vw, 520px); }
.gallery-set--grid,
.gallery-set--mosaic,
.gallery-set--editorial {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gallery-gap);
  align-items: start;
}
.gallery-set--grid figure {
  grid-column: span 4;
  aspect-ratio: 4 / 5;
  margin: 0;
}
.gallery-set--mosaic figure {
  grid-column: span 4;
  aspect-ratio: 4 / 5;
  margin: 0;
}
.gallery-set--mosaic figure:nth-child(6n+1) { grid-column: span 6; aspect-ratio: 5 / 4; }
.gallery-set--mosaic figure:nth-child(6n+4) { grid-column: span 5; aspect-ratio: 1 / 1; }
.gallery-set--editorial figure {
  grid-column: span 5;
  aspect-ratio: 4 / 5;
  margin: 0;
}
.gallery-set--editorial figure:nth-child(3n+2) {
  grid-column: 7 / span 6;
  aspect-ratio: 5 / 4;
  margin-top: clamp(34px, 5vw, 84px);
}
.gallery-set--editorial figure:nth-child(3n+3) {
  grid-column: 2 / span 5;
  aspect-ratio: 3 / 4;
}
.gallery-set--density-compact.gallery-set--grid figure { grid-column: span 3; }
.gallery-set--density-large.gallery-set--grid figure { grid-column: span 6; }
@media (max-width: 760px) {
  .gallery-set--grid,
  .gallery-set--mosaic,
  .gallery-set--editorial { grid-template-columns: 1fr 1fr; }
  .gallery-set--grid figure,
  .gallery-set--mosaic figure,
  .gallery-set--editorial figure,
  .gallery-set--mosaic figure:nth-child(n),
  .gallery-set--editorial figure:nth-child(n) {
    grid-column: span 1;
    margin-top: 0;
    aspect-ratio: 4 / 5;
  }
}

/* PULL QUOTE inside a story */
.st-quote {
  text-align: center; max-width: 900px; margin-inline: auto;
  font-family: var(--f-display); font-style: italic; font-size: clamp(1.8rem, 3vw + 0.5rem, 3rem);
  line-height: 1.25; letter-spacing: -0.02em; color: var(--c-ink);
}
.st-quote::before { content: "\201C"; display: block; font-size: 3.5em; line-height: 0.5; color: var(--c-accent); margin-bottom: 0.1em; }

/* FILM block inside a story (reuses .film component) */
.st-film__head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px, 5vw, 72px); }

/* prev/next story nav + closing */
.st-closing { text-align: center; }
.st-closing__display {
  font-family: var(--f-display); font-size: clamp(2.4rem, 4.5vw + 0.5rem, 5rem);
  line-height: 1; letter-spacing: -0.04em; margin-bottom: var(--s-5); font-weight: 400;
}
.st-closing__display em { font-style: italic; color: var(--c-accent); }
.st-closing__sub {
  font-family: var(--f-serif); font-style: italic; font-size: var(--fs-lede);
  color: var(--c-ink-soft); max-width: 46ch; margin: 0 auto var(--s-7); line-height: 1.5;
}
.st-morestories { margin-top: clamp(60px, 8vw, 110px); border-top: 1px solid var(--c-line); padding-top: clamp(40px, 5vw, 72px); }
.st-morestories__label {
  text-align: center; font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--c-muted); font-weight: 500; margin-bottom: clamp(28px, 3vw, 44px);
}
.st-morestories__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 36px); }
.st-morecard { text-decoration: none; color: inherit; display: block; }
.st-morecard__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-bg-soft); margin-bottom: var(--s-3); }
.st-morecard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.st-morecard:hover .st-morecard__media img { transform: scale(1.04); }
.st-morecard__couple { font-family: var(--f-display); font-size: clamp(1.3rem, 1.6vw + 0.3rem, 1.9rem); font-style: italic; letter-spacing: -0.02em; margin-bottom: var(--s-1); }
.st-morecard__where { font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; }
@media (max-width: 640px) { .st-morestories__grid { grid-template-columns: 1fr; } }

/* ============================================================
   SERVICE PAGE — shared selling-page system (.sv-*).
   Used by Wedding Photography, Films, and Photo+Video pages.
   ============================================================ */
.sv-hero {
  position: relative; min-height: 96vh; display: flex; align-items: flex-end;
  color: var(--c-on-dark); overflow: hidden; isolation: isolate;
}
.sv-hero__media { position: absolute; inset: 0; z-index: -2; }
.sv-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.sv-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,12,0.46) 0%, rgba(20,16,12,0.06) 30%, rgba(20,16,12,0.08) 55%, rgba(20,16,12,0.72) 100%);
}
.sv-hero__inner { width: 100%; padding-block: clamp(140px, 22vh, 220px) clamp(56px, 9vh, 96px); }
.sv-hero__eyebrow { color: rgba(255,255,255,0.8); letter-spacing: 0.4em; margin-bottom: clamp(36px, 6vh, 64px); }
.sv-hero__title {
  font-family: var(--f-display); font-size: clamp(2.6rem, 5.4vw + 0.5rem, 6.5rem);
  line-height: 0.96; letter-spacing: -0.04em; color: #fff; font-weight: 400; max-width: 16ch;
}
.sv-hero__title em { font-style: italic; }
.sv-hero__sub {
  margin-top: var(--s-6); font-family: var(--f-serif); font-style: italic;
  font-size: clamp(1.15rem, 1.4vw + 0.5rem, 1.5rem); color: rgba(255,255,255,0.92); max-width: 46ch; line-height: 1.55;
}
.sv-hero__cta { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.sv-hero__trust {
  margin-top: var(--s-5); font-family: var(--f-sans); font-size: 0.78rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(255,255,255,0.82); font-weight: 500;
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.sv-hero__trust .stars { color: oklch(0.85 0.14 80); letter-spacing: 0.12em; }
.sv-hero__trust .sep { opacity: 0.4; }

/* Quick-scan strip (reused shape from sb-scan) */
.sv-scan { background: var(--c-bg-soft); padding-block: clamp(28px, 3vw, 44px); border-bottom: 1px solid var(--c-line); }
.sv-scan__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 56px); text-align: center; }
.sv-scan__item { display: grid; gap: var(--s-1); }
.sv-scan__item strong { font-family: var(--f-display); font-style: italic; font-size: clamp(1.4rem,1.4vw + 0.5rem,1.85rem); color: var(--c-ink); letter-spacing: -0.01em; font-weight: 400; }
.sv-scan__item span { font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; }
@media (max-width: 720px) { .sv-scan__row { grid-template-columns: 1fr 1fr; gap: 20px; } }

/* Intro / philosophy two-column */
.sv-intro { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(40px,6vw,100px); align-items: start; }
.sv-intro__eyebrow { font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem,1.6vw + 0.5rem,1.9rem); color: var(--c-accent); line-height: 1.2; max-width: 24ch; }
.sv-intro__display { font-family: var(--f-display); font-size: clamp(2.25rem,4vw + 0.5rem,4.5rem); line-height: 0.98; letter-spacing: -0.035em; font-weight: 400; margin-bottom: var(--s-5); }
.sv-intro__display em { font-style: italic; color: var(--c-accent); }
.sv-intro__body { display: grid; gap: var(--s-4); }
.sv-intro__body p { font-size: var(--fs-lede); line-height: 1.65; color: var(--c-ink-soft); font-weight: 300; margin: 0; max-width: 54ch; }
.sv-intro__body p:first-child { font-family: var(--f-serif); font-style: italic; color: var(--c-ink); }
@media (max-width: 880px) { .sv-intro { grid-template-columns: 1fr; } }

/* Pillars row (style attributes / what's included) */
.sv-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px,3vw,56px); }
.sv-pillar { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.sv-pillar__num { font-family: var(--f-display); font-style: italic; font-size: 1.3rem; color: var(--c-accent); line-height: 1; }
.sv-pillar__title { font-family: var(--f-display); font-size: clamp(1.4rem,1.4vw + 0.4rem,1.85rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; }
.sv-pillar__title em { font-style: italic; color: var(--c-accent); }
.sv-pillar__body { font-family: var(--f-sans); font-size: 0.96rem; line-height: 1.65; color: var(--c-ink-soft); font-weight: 300; }
@media (max-width: 880px) { .sv-pillars { grid-template-columns: 1fr; } }

/* Timeline — how the day unfolds */
.sv-timeline { display: grid; gap: 0; }
.sv-step {
  display: grid; grid-template-columns: 200px 1fr; gap: clamp(24px,4vw,72px);
  padding-block: clamp(28px,3vw,44px); border-top: 1px solid var(--c-line); align-items: baseline;
}
.sv-step:last-child { border-bottom: 1px solid var(--c-line); }
.sv-step__time { font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; }
.sv-step__title { font-family: var(--f-display); font-size: clamp(1.5rem,1.8vw + 0.4rem,2.2rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 400; margin-bottom: var(--s-3); }
.sv-step__title em { font-style: italic; color: var(--c-accent); }
.sv-step__body { font-size: var(--fs-body); line-height: 1.7; color: var(--c-ink-soft); font-weight: 300; max-width: 60ch; }
@media (max-width: 720px) { .sv-step { grid-template-columns: 1fr; gap: var(--s-3); } }

/* Included checklist */
.sv-included { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4) clamp(40px,5vw,80px); }
.sv-included li {
  list-style: none; position: relative; padding-left: 28px; font-family: var(--f-sans);
  font-size: var(--fs-body); line-height: 1.55; color: var(--c-ink-soft); font-weight: 300;
  padding-block: var(--s-3); border-bottom: 1px solid var(--c-line);
}
.sv-included li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 14px; height: 1px; background: var(--c-accent); }
.sv-included li strong { font-family: var(--f-display); font-style: italic; font-weight: 400; color: var(--c-ink); font-size: 1.08em; }
@media (max-width: 640px) { .sv-included { grid-template-columns: 1fr; } }

/* Process steps (inquiry → delivery) */
.sv-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(18px,2vw,32px); }
.sv-proc { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.sv-proc__num { font-family: var(--f-display); font-style: italic; color: var(--c-accent); font-size: 1.2rem; }
.sv-proc__title { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: -0.01em; font-weight: 400; line-height: 1.1; }
.sv-proc__body { font-family: var(--f-sans); font-size: 0.85rem; line-height: 1.55; color: var(--c-ink-soft); font-weight: 300; }
@media (max-width: 880px) { .sv-process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .sv-process { grid-template-columns: 1fr; } }

/* Related links (stories / venues) card row */
.sv-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2vw,32px); }
.sv-relcard { text-decoration: none; color: inherit; display: block; }
.sv-relcard__media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-bg-soft); margin-bottom: var(--s-3); }
.sv-relcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.sv-relcard:hover .sv-relcard__media img { transform: scale(1.04); }
.sv-relcard__couple { font-family: var(--f-display); font-size: clamp(1.3rem,1.5vw + 0.3rem,1.7rem); font-style: italic; letter-spacing: -0.02em; margin-bottom: var(--s-1); }
.sv-relcard__where { font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; }
@media (max-width: 880px) { .sv-related { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .sv-related { grid-template-columns: 1fr; } }

/* Big closing CTA band */
.sv-cta { text-align: center; }
.section--dark.sv-cta {
  background: linear-gradient(180deg, #171410 0%, #211b16 100%);
  border-bottom: 1px solid rgba(243,238,229,0.16);
  box-shadow: inset 0 -1px 0 rgba(243,238,229,0.06);
}
.section--dark.sv-cta + .site-footer {
  padding-top: clamp(72px, 10vw, 132px);
}
.sv-cta__display { font-family: var(--f-display); font-size: clamp(2.6rem,5vw + 0.5rem,6rem); line-height: 0.98; letter-spacing: -0.04em; margin-bottom: var(--s-5); font-weight: 400; }
.sv-cta__display em { font-style: italic; color: var(--c-accent); }
.sv-cta__sub { font-family: var(--f-serif); font-style: italic; font-size: var(--fs-lede); color: var(--c-ink-soft); max-width: 48ch; margin: 0 auto var(--s-7); line-height: 1.5; }
.sv-cta__row { display: inline-flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }
.section--dark .sv-cta__display { color: var(--c-on-dark); }
.section--dark .sv-cta__sub { color: rgba(239,233,221,0.8); }

/* Film formats list (videography page) */
.sv-formats { display: grid; gap: 0; }
.sv-format {
  display: grid; grid-template-columns: 220px 1fr auto; gap: clamp(20px,3vw,56px);
  padding-block: clamp(24px,3vw,40px); border-top: 1px solid var(--c-line); align-items: baseline;
}
.sv-format:last-child { border-bottom: 1px solid var(--c-line); }
.sv-format__name { font-family: var(--f-display); font-size: clamp(1.5rem,1.8vw + 0.4rem,2.2rem); line-height: 1.05; letter-spacing: -0.025em; font-weight: 400; }
.sv-format__name em { font-style: italic; color: var(--c-accent); }
.sv-format__body { font-size: var(--fs-body); line-height: 1.65; color: var(--c-ink-soft); font-weight: 300; max-width: 56ch; }
.sv-format__len { font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; white-space: nowrap; }
@media (max-width: 820px) { .sv-format { grid-template-columns: 1fr; gap: var(--s-2); } .sv-format__len { order: -1; } }

/* ============================================================
   LEGAL / LONG-FORM PAGE (.lg-*) — Privacy, Terms.
   Quiet, readable, editorial.
   ============================================================ */
.lg-hero {
  padding-block: clamp(160px, 22vh, 230px) clamp(48px, 7vw, 90px);
  background: var(--c-bg); border-bottom: 1px solid var(--c-line); text-align: center;
}
.lg-hero__overline { color: var(--c-muted); letter-spacing: 0.4em; margin-bottom: clamp(24px, 3vh, 40px); display: inline-block; }
.lg-hero__title { font-family: var(--f-display); font-size: clamp(2.5rem, 5vw + 0.5rem, 5rem); line-height: 0.98; letter-spacing: -0.04em; font-weight: 400; margin: 0 auto; }
.lg-hero__title em { font-style: italic; color: var(--c-accent); }
.lg-hero__date { margin-top: var(--s-5); font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; }
.lg-body { max-width: 760px; margin-inline: auto; }
.lg-intro { font-family: var(--f-serif); font-style: italic; font-size: var(--fs-lede); line-height: 1.6; color: var(--c-ink); margin-bottom: clamp(40px, 5vw, 64px); }
.lg-section { margin-bottom: clamp(36px, 4vw, 56px); }
.lg-section__h { font-family: var(--f-display); font-size: clamp(1.4rem, 1.8vw + 0.3rem, 2rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 400; margin-bottom: var(--s-4); }
.lg-section__h .n { font-style: italic; color: var(--c-accent); margin-right: var(--s-3); }
.lg-section p { font-size: var(--fs-body); line-height: 1.75; color: var(--c-ink-soft); font-weight: 300; margin: 0 0 var(--s-4); }
.lg-section p:last-child { margin-bottom: 0; }
.lg-section a { color: var(--c-accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.lg-list { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); }
.lg-list li { position: relative; padding-left: 26px; font-size: var(--fs-body); line-height: 1.7; color: var(--c-ink-soft); font-weight: 300; }
.lg-list li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 14px; height: 1px; background: var(--c-accent); }
.lg-contact { margin-top: clamp(40px, 5vw, 64px); padding-top: var(--s-6); border-top: 1px solid var(--c-line); font-family: var(--f-serif); font-style: italic; font-size: 1.15rem; line-height: 1.7; color: var(--c-ink); }
.lg-contact a { color: var(--c-accent); text-decoration: none; border-bottom: 1px solid currentColor; font-style: normal; }

/* ============================================================
   TESTIMONIALS / REVIEWS (.rv-*) — shared across reviews page,
   homepage band, and engagements page.
   ============================================================ */
.rv-hero {
  padding-block: clamp(170px, 23vh, 240px) clamp(48px, 7vw, 90px);
  background: var(--c-bg); border-bottom: 1px solid var(--c-line); text-align: center;
}
.rv-hero__overline { color: var(--c-muted); letter-spacing: 0.4em; margin-bottom: clamp(24px,3vh,42px); display: inline-block; }
.rv-hero__title { font-family: var(--f-display); font-size: clamp(2.75rem,5.4vw + 0.5rem,6.25rem); line-height: 0.96; letter-spacing: -0.04em; font-weight: 400; margin: 0 auto; max-width: 16ch; }
.rv-hero__title em { font-style: italic; color: var(--c-accent); }
.rv-hero__sub { margin: var(--s-5) auto 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(1.15rem,1.2vw + 0.5rem,1.45rem); color: var(--c-ink-soft); max-width: 50ch; line-height: 1.55; }
.rv-hero__rating { margin-top: clamp(28px,4vh,44px); display: inline-flex; flex-direction: column; gap: var(--s-2); align-items: center; }
.rv-hero__stars { color: oklch(0.78 0.14 75); font-size: 1.3rem; letter-spacing: 0.14em; }
.rv-hero__rating span { font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; }

/* Masonry grid of review cards */
.rv-grid { columns: 3; column-gap: clamp(18px,2vw,28px); }
@media (max-width: 980px) { .rv-grid { columns: 2; } }
@media (max-width: 620px) { .rv-grid { columns: 1; } }
.rv-card {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: clamp(18px,2vw,28px);
  background: var(--c-paper); border-top: 1px solid var(--c-line);
  display: flex; flex-direction: column; overflow: hidden;
}
.rv-card__media { overflow: hidden; background: var(--c-bg-soft); }
.rv-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease-out); }
.rv-card:hover .rv-card__media img { transform: scale(1.04); }
.rv-card__body { padding: clamp(24px,2.4vw,36px); display: grid; gap: var(--s-3); }
.rv-card__stars { color: oklch(0.78 0.14 75); font-size: 0.9rem; letter-spacing: 0.16em; }
.rv-card__quote { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.05rem,0.6vw + 0.9rem,1.2rem); line-height: 1.55; color: var(--c-ink); }
.rv-card__quote::before { content: "\201C"; color: var(--c-accent); font-family: var(--f-display); font-size: 1.4em; line-height: 0; vertical-align: -0.35em; margin-right: 0.04em; }
.rv-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); border-top: 1px solid var(--c-line); padding-top: var(--s-3); margin-top: var(--s-1); flex-wrap: wrap; }
.rv-card__name { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--c-ink); }
.rv-card__tag { font-family: var(--f-sans); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; }
/* Text-only card (no photo) gets a quiet monogram */
.rv-card--text .rv-card__body { gap: var(--s-4); padding-block: clamp(32px,3vw,48px); }
.rv-card__mono { font-family: var(--f-script); color: var(--c-accent); font-size: clamp(2.6rem,3vw + 0.5rem,3.6rem); line-height: 0.8; }

/* Homepage / engagements testimonials band */
.rv-band__head { display: grid; gap: var(--s-4); margin-bottom: clamp(48px,6vw,80px); max-width: 720px; }
.rv-band__head--center { margin-inline: auto; text-align: center; }
.rv-band__head--center .eyebrow-rule { justify-content: center; }
.rv-band__head--center .eyebrow-rule::before { display: none; }
.rv-band__head--center .section-head__lede { margin-inline: auto; max-width: 48ch; text-align: center; }

.hero,
.st-hero,
.section {
  position: relative;
}

[data-studio-canvas-root] {
  position: relative;
}

.studio-canvas {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.studio-canvas__item {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: min(var(--w, 32rem), calc(100% - 32px));
  min-height: var(--h, auto);
  max-width: calc(100% - 32px);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.studio-canvas__item--text {
  color: inherit;
}

.studio-canvas__item--text[data-text-style="hero"],
.studio-canvas__item--text[data-text-style="display"] {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 7vw, 6.4rem);
  line-height: .94;
}

.studio-canvas__item--text[data-text-style="heading"] {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 3.8rem);
  line-height: 1;
}

.studio-canvas__item--text[data-text-style="overline"] {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.45;
  text-transform: uppercase;
}

.studio-canvas__item--text[data-text-style="quote"],
.studio-canvas__item--text[data-text-style="body"] {
  font-size: clamp(1rem, 1.3vw, 1.35rem);
  line-height: 1.65;
}

[data-color="ink"] {
  color: var(--c-ink, #1d1b18);
}
[data-color="muted"] {
  color: var(--c-muted, #8f8679);
}
[data-color="accent"] {
  color: var(--c-accent, #b06a60);
}
[data-color="white"] {
  color: #fff;
}
[data-color="soft_white"],
[data-color="on_dark"] {
  color: var(--c-on-dark, #f6efe5);
}

.studio-canvas__item--image {
  display: block;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius, 0);
  opacity: var(--opacity, 1);
  box-shadow: 0 calc(22px * var(--shadow, 0)) calc(54px * var(--shadow, 0)) rgba(36, 28, 22, calc(.28 * var(--shadow, 0)));
  isolation: isolate;
}

.studio-canvas__item--image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: var(--h, 8rem);
  object-fit: var(--fit, cover);
  object-position: var(--crop-x, 50%) var(--crop-y, 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--crop-x, 50%) var(--crop-y, 50%);
}

.studio-canvas__item--image::before,
.studio-canvas__item--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.studio-canvas__item--image::before {
  background: rgba(0, 0, 0, var(--darken, 0));
}

.studio-canvas__item--image::after {
  background: linear-gradient(to var(--gradient-direction, bottom), rgba(0, 0, 0, var(--gradient, 0)), rgba(0, 0, 0, 0));
}

.studio-canvas__item--shape {
  display: block;
  min-height: var(--h, 4rem);
  background: var(--fill, #fff);
  border-radius: var(--radius, 0);
  opacity: var(--opacity, .7);
}

.studio-canvas__item--button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid currentColor;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

@media (max-width: 640px) {
  .studio-canvas__item {
    left: var(--mx, var(--x, 50%));
    top: var(--my, var(--y, 50%));
    width: min(var(--mw, var(--w, 24rem)), calc(100% - 28px));
    min-height: var(--mh, var(--h, auto));
  }
}

.rv-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2vw,32px); align-items: start; }
@media (max-width: 880px) { .rv-trio { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.rv-quote-card {
  background: var(--c-paper); border-top: 1px solid var(--c-line);
  padding: clamp(28px,2.6vw,44px); display: grid; gap: var(--s-4); align-content: start; height: 100%;
}
.section--dark .rv-quote-card { background: rgba(239,233,221,0.05); border-top-color: rgba(239,233,221,0.2); }
.rv-quote-card__stars { color: oklch(0.8 0.14 75); font-size: 0.9rem; letter-spacing: 0.16em; }
.rv-quote-card__quote { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.05rem,0.6vw + 0.9rem,1.22rem); line-height: 1.55; color: var(--c-ink); flex: 1; }
.section--dark .rv-quote-card__quote { color: var(--c-on-dark); }
.rv-quote-card__person { display: flex; align-items: center; gap: var(--s-3); border-top: 1px solid var(--c-line); padding-top: var(--s-4); margin-top: auto; }
.section--dark .rv-quote-card__person { border-top-color: rgba(239,233,221,0.2); }
.rv-quote-card__avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--c-bg-soft); flex-shrink: 0; }
.rv-quote-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.rv-quote-card__avatar--mono { display: flex; align-items: center; justify-content: center; font-family: var(--f-script); color: var(--c-accent); font-size: 1.6rem; line-height: 1; }
.rv-quote-card__meta { display: grid; gap: 1px; }
.rv-quote-card__name { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--c-ink); }
.section--dark .rv-quote-card__name { color: var(--c-on-dark); }
.rv-quote-card__tag { font-family: var(--f-sans); font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; }
.rv-band__foot { display: flex; align-items: center; justify-content: center; gap: var(--s-5); margin-top: clamp(40px,5vw,64px); flex-wrap: wrap; }
.rv-band__google { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; }
.rv-band__google .stars { color: oklch(0.78 0.14 75); letter-spacing: 0.14em; font-size: 0.95rem; }
.section--dark .rv-band__google { color: rgba(239,233,221,0.7); }

/* Homepage reviews: compact 6-tile proof block. Full-length reviews live on reviews.html. */
#reviews .rv-band__head { margin-bottom: clamp(34px, 4.5vw, 56px); }
#reviews .rv-trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
#reviews .rv-quote-card {
  min-height: clamp(230px, 21vw, 285px);
  padding: clamp(20px, 2vw, 28px);
  gap: var(--s-3);
}
#reviews .rv-quote-card__quote {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(0.98rem, 0.35vw + 0.9rem, 1.08rem);
  line-height: 1.48;
}
#reviews .rv-quote-card__person { padding-top: var(--s-3); }
#reviews .rv-quote-card__avatar { width: 38px; height: 38px; }
#reviews .rv-quote-card__name { font-size: 1.02rem; }
#reviews .rv-quote-card__tag { font-size: 0.58rem; letter-spacing: 0.2em; }
#reviews .rv-band__foot { margin-top: clamp(30px, 4vw, 48px); }
@media (max-width: 980px) {
  #reviews .rv-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }
}
@media (max-width: 640px) {
  #reviews .rv-trio { grid-template-columns: 1fr; max-width: 420px; }
  #reviews .rv-quote-card { min-height: auto; }
}

/* ============================================================
   HONEYBOOK EMBED (.hb-embed) — constrains the placement widget
   to a clean centered column so the long form never looks lopsided.
   ============================================================ */
.hb-embed { width: 100%; max-width: 640px; margin-inline: auto; }
.hb-embed--narrow { max-width: 600px; }
.hb-embed iframe { width: 100% !important; border: 0 !important; display: block; }
.hb-frame { width: 100%; max-width: 640px; margin-inline: auto; }
.hb-frame iframe {
  width: 100%;
  min-height: 920px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-paper);
  display: block;
}
@media (max-width: 600px) { .hb-frame iframe { min-height: 1040px; } }
.hb-p-67d0e1cd06b2db0007fffc84-1 {
  border: 1px solid var(--c-line);
  padding: clamp(16px, 2vw, 28px);
  background-color: var(--c-paper);
  border-radius: var(--radius-lg);
  width: 100%;
  box-sizing: border-box;
}
.section--dark .hb-p-67d0e1cd06b2db0007fffc84-1 { background-color: #fbfaf7; border-color: rgba(239,233,221,0.25); }
.hb-embed__note { margin-top: var(--s-4); font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; text-align: center; }
.section--dark .hb-embed__note { color: rgba(239,233,221,0.55); }

/* ============================================================
   HONEYBOOK EMBED (.hb-embed) — wraps the HoneyBook inquiry
   placement so it sits centered, full-width, never cramped.
   The placement div itself is styled inline per HoneyBook's
   snippet; this just constrains and centers it.
   ============================================================ */
.hb-embed { max-width: 820px; margin-inline: auto; width: 100%; }
.hb-embed--narrow { max-width: 680px; }
.hb-embed [class^="hb-p-"] {
  border: 1px solid var(--c-line) !important;
  background: #fff !important;
  border-radius: var(--radius-lg) !important;
  padding: clamp(16px, 2.4vw, 32px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 360px;
}
/* On dark CTA sections, give the white form a soft frame so it reads as intentional */
.section--dark .hb-embed [class^="hb-p-"] { box-shadow: 0 30px 80px -40px rgba(0,0,0,0.5); }
.hb-embed__fallback {
  display: block; text-align: center; padding: var(--s-6) 0 0;
  font-family: var(--f-serif); font-style: italic; color: var(--c-muted); font-size: 0.95rem;
}
.hb-embed__fallback a { color: var(--c-accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.hb-embed + .sv-cta__row,
.hb-embed + .hero__cta,
.hb-embed + .pkg-close__cta,
.hb-embed + .ab-close__cta,
.hb-embed + .fl-bridge__cta,
.hb-embed + .super8__cta {
  margin-top: clamp(36px, 5vw, 72px);
}
/* Contact page: stack the inquiry embed full-width, details in a row below */
.ct-main--stack { grid-template-columns: 1fr !important; gap: clamp(40px,5vw,72px); }
.ct-main--stack .ct-side { display: grid; grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.15fr) minmax(190px, 0.95fr) minmax(190px, 0.95fr); gap: clamp(24px,3vw,48px); align-items: start; }
@media (max-width: 1080px) {
  .ct-main--stack .ct-side { grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr); }
}
@media (max-width: 640px) {
  .ct-main--stack .ct-side { grid-template-columns: 1fr; }
}

/* Stacked homepage contact section */
.contact--stack { display: block; }
.contact--stack .contact__intro { margin-bottom: clamp(36px, 5vw, 64px); }
.home-inquiry__lede {
  width: min(100%, 40rem);
  max-width: 40rem;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: var(--s-6);
  text-align: center;
  text-wrap: balance;
}
.contact__list--row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-5) clamp(28px, 4vw, 56px);
  margin-top: var(--s-6);
}
.contact__list--row > div { text-align: center; }

/* Santa Barbara inquiry: center the intro above the long HoneyBook embed. */
.sb-inquiry { grid-template-columns: 1fr !important; gap: clamp(36px, 5vw, 64px); }
.sb-inquiry__intro { text-align: center; max-width: 640px; margin-inline: auto; }
.sb-inquiry__lede { margin-inline: auto; text-align: center; }
.sb-inquiry__intro > div { justify-items: center; }
.sb-inquiry__form { width: 100%; }


/* ============================================================
   Zatonsky Moments — main stylesheet
   Components are organised top-to-bottom in DOM order:
   reset → utilities → nav → hero → about → gallery →
   services → reviews → film → featured stories → contact → footer
   ============================================================ */

/* -------- reset / base ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--c-ink);
  line-height: 1.1;
}
h3, h4 { font-family: var(--f-serif); letter-spacing: 0; }
p { margin: 0; }

/* -------- utilities --------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}
.container-wide {
  max-width: 1760px;
  margin: 0 auto;
  padding-inline: var(--container-pad);
}
.overline {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.eyebrow-rule {
  display: flex; align-items: center; gap: var(--s-4);
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.eyebrow-rule::before {
  content: ""; display: block; width: 36px; height: 1px; background: currentColor;
}
em { font-style: italic; }
.italic { font-style: italic; }

/* -------- buttons ----------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-3);
  padding: 14px 30px;
  font-family: var(--f-sans);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-ink);
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
  cursor: pointer;
}
.btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-paper);
}
.btn--primary:hover { background: var(--c-accent-deep); border-color: var(--c-accent-deep); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.btn--on-dark { color: var(--c-on-dark); border-color: var(--c-on-dark); }
.btn--on-dark:hover { background: var(--c-on-dark); color: var(--c-ink); }
.btn--link {
  border: none;
  padding: 0;
  letter-spacing: 0.24em;
  background: transparent;
  position: relative;
  padding-bottom: 6px;
}
.btn--link::after {
  content: ""; position: absolute; left: 0; right: 30%; bottom: 0;
  height: 1px; background: currentColor; transition: right var(--t-med) var(--ease);
}
.btn--link:hover::after { right: 0; }

/* -------- nav --------------------------------------------- */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: var(--s-5) 0;
  transition: background var(--t-med) var(--ease), padding var(--t-med) var(--ease), color var(--t-med) var(--ease);
  color: var(--c-on-dark);
}
.site-nav__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.site-nav__brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.site-nav__logo {
  display: block;
  width: clamp(120px, 12vw, 190px);
  aspect-ratio: 1.75 / 1;
  height: auto;
  background-color: var(--c-logo-on-dark);
  -webkit-mask-image: url("../img/logo-cropped.png");
          mask-image: url("../img/logo-cropped.png");
  -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
  -webkit-mask-position: left center;      mask-position: left center;
  -webkit-mask-size: contain;              mask-size: contain;
  transition: background-color var(--t-med) var(--ease);
}
/* When scrolled, brand tints to soft ink — warm, never harsh black. */
.site-nav.is-scrolled .site-nav__logo { background-color: var(--c-logo, var(--c-ink)); }
.site-nav__brand-text { /* fallback if mask not supported */
  font-family: var(--f-display);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .site-nav__brand-text { position: absolute; left: -9999px; }
}
.site-nav__menu {
  display: flex; gap: clamp(20px, 2.4vw, 48px);
  list-style: none; margin: 0; padding: 0;
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 400;
  flex-wrap: nowrap;
}
.site-nav__menu a {
  text-decoration: none; color: inherit;
  padding: var(--s-2) 0;
  position: relative;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.site-nav__menu a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0;
  height: 1px; background: currentColor;
  transition: left var(--t-med) var(--ease), right var(--t-med) var(--ease);
}
.site-nav__menu a:hover::after { left: 0; right: 0; }
.site-nav__menu a[aria-current="page"] {
  color: var(--c-accent);
  font-weight: 600;
}
.site-nav__menu a[aria-current="page"]::after {
  left: 0;
  right: 0;
}
.site-nav__cta { font-size: 0.78rem; padding: 10px 22px; }

.site-nav.is-scrolled {
  background: rgba(247, 243, 235, 0.94);
  color: var(--c-ink);
  padding-block: var(--s-3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
/* Light-hero pages need dark navigation immediately; otherwise the menu
   disappears over cream/white first sections before scroll starts. */
body[data-nav-theme="light"] .site-nav:not(.is-scrolled) { color: var(--c-ink); }
body[data-nav-theme="light"] .site-nav:not(.is-scrolled) .site-nav__logo { background-color: var(--c-logo, var(--c-ink)); }
.site-nav__burger {
  display: none;
  width: 32px; height: 32px;
  background: transparent; border: none; padding: 0;
  position: relative;
  color: currentColor;
  cursor: pointer;
  z-index: 1002;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.site-nav__burger:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
.site-nav__burger span {
  position: absolute; left: 6px; right: 6px; height: 1px; background: currentColor;
  transition: transform var(--t-fast) var(--ease), top var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.site-nav__burger span:nth-child(1) { top: 11px; }
.site-nav__burger span:nth-child(2) { top: 20px; }

@media (max-width: 880px) {
  .site-nav__menu, .site-nav__cta { display: none; }
  .site-nav__burger {
    display: block;
    color: var(--c-on-dark);
  }
  body[data-nav-theme="light"] .site-nav:not(.is-scrolled) .site-nav__burger,
  .site-nav.is-scrolled .site-nav__burger,
  body.is-menu-open .site-nav__burger {
    color: var(--c-ink);
  }
  body.is-menu-open { overflow: hidden; }
  body.is-menu-open .site-nav {
    color: var(--c-ink);
    background: rgba(247, 243, 235, 0.98);
    border-bottom: 1px solid var(--c-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  body.is-menu-open .site-nav__logo { background-color: var(--c-logo, var(--c-ink)); }
  body.is-menu-open .site-nav__menu {
    display: grid;
    position: fixed;
    inset: 69px 0 auto 0;
    z-index: 1001;
    gap: 0;
    padding: 18px var(--container-pad) 28px;
    background: rgba(247, 243, 235, 0.98);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 24px 50px rgba(55, 43, 32, 0.16);
  }
  body.is-menu-open .site-nav__menu li { border-top: 1px solid rgba(42, 33, 27, 0.1); }
  body.is-menu-open .site-nav__menu li:first-child { border-top: 0; }
  body.is-menu-open .site-nav__menu a {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 14px 0;
    color: var(--c-ink);
    font-size: 0.82rem;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  body.is-menu-open .site-nav__menu a::after {
    content: "→";
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    opacity: 0.42;
  }
  body.is-menu-open .site-nav__burger span:nth-child(1) {
    top: 14px;
    transform: rotate(45deg);
  }
  body.is-menu-open .site-nav__burger span:nth-child(2) {
    top: 14px;
    transform: rotate(-45deg);
  }
}

/* -------- hero -------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: flex-end;
  color: var(--c-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,12,0.35) 0%, rgba(20,16,12,0.0) 30%, rgba(20,16,12,0.0) 60%, rgba(20,16,12,0.6) 100%);
}
.hero__inner {
  width: 100%;
  padding-block: clamp(140px, 18vh, 200px) clamp(80px, 12vh, 120px);
}
.hero__overline {
  color: rgba(255,255,255,0.75);
  margin-bottom: clamp(40px, 7vh, 80px);
  letter-spacing: 0.4em;
}
.hero__title {
  font-family: var(--f-display);
  font-size: var(--fs-h1);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: #fff;
  max-width: 14ch;
  font-weight: 400;
}
.hero__title em { font-style: italic; font-weight: 400; }
.hero__title b { font-weight: 600; font-style: normal; }
.hero__sub {
  margin-top: var(--s-6);
  font-family: var(--f-serif);
  font-size: clamp(1.15rem, 1.4vw + 0.5rem, 1.5rem);
  font-style: italic;
  color: rgba(255,255,255,0.9);
  max-width: 36ch;
  line-height: 1.5;
  font-weight: 300;
}
.hero__cta {
  margin-top: var(--s-7);
  display: flex; gap: var(--s-4); flex-wrap: wrap;
}
.hero__meta {
  position: absolute; bottom: var(--s-6);
  left: var(--container-pad); right: var(--container-pad);
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
.hero__meta .scroll-cue {
  display: flex; align-items: center; gap: var(--s-3);
}
.hero__meta .scroll-cue::after {
  content: ""; width: 1px; height: 38px; background: rgba(255,255,255,0.5);
  animation: cue 2.4s var(--ease-out) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  40%  { transform: scaleY(1); transform-origin: top; }
  60%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Hero variant: split layout */
body[data-hero-layout="split"] .hero {
  min-height: 88vh;
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  color: var(--c-ink);
  background: var(--c-bg-soft);
}
body[data-hero-layout="split"] .hero::after { display: none; }
body[data-hero-layout="split"] .hero__media {
  position: relative; inset: auto; order: 2;
  height: 88vh;
}
body[data-hero-layout="split"] .hero__inner {
  order: 1;
  padding-inline: var(--container-pad);
}
body[data-hero-layout="split"] .hero__title { color: var(--c-ink); }
body[data-hero-layout="split"] .hero__sub  { color: var(--c-ink-soft); }
body[data-hero-layout="split"] .hero__overline { color: var(--c-muted); }
body[data-hero-layout="split"] .hero__meta { display: none; }
@media (max-width: 860px) {
  body[data-hero-layout="split"] .hero { grid-template-columns: 1fr; }
}

/* Hero variant: slideshow */
body[data-hero-layout="slideshow"] .hero__media img { opacity: 0; transition: opacity 1.4s var(--ease); }
body[data-hero-layout="slideshow"] .hero__media img.is-active { opacity: 1; }

/* -------- section base ------------------------------------ */
.section {
  padding-block: clamp(80px, 12vw, 160px);
  position: relative;
}
.section--cream    { --section-bg: var(--c-bg); background: var(--c-bg); }
.section--bone     { --section-bg: var(--c-bg-soft); background: var(--c-bg-soft); }
.section--paper    { --section-bg: var(--c-paper); background: var(--c-paper); }
.section--dark     { --section-bg: var(--c-bg-dark); background: var(--c-bg-dark); color: var(--c-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-on-dark); }
.section--dark .overline, .section--dark .eyebrow-rule  { color: rgba(243,238,229,0.6); }

.section-head {
  display: grid;
  gap: var(--s-5);
  margin-bottom: clamp(48px, 7vw, 88px);
  max-width: 720px;
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow-rule { justify-content: center; }
.section-head--center .eyebrow-rule::before { display: none; }
.section-head__title {
  font-size: var(--fs-h2);
  font-family: var(--f-display);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.section-head__title em { font-style: italic; }
.section-head__lede {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  max-width: 52ch;
  line-height: 1.5;
}

/* -------- about (editorial, layered, asymmetric) ----------- */
.about {
  position: relative;
  display: grid;
  /* image gets ~5/12 of width; text takes the right ~7/12 but the
     headline reaches back leftward into the image via negative margin. */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
/* tall portrait that bleeds slightly above the section top edge */
.about__media {
  position: relative;
  align-self: start;
  margin-top: clamp(-80px, -8vw, -120px);
  z-index: 1;
}
.about__media .figure {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.about__media .figure img {
  width: 100%; height: 100%; object-fit: cover;
}
/* feather the right edge of the image so the overlapping headline
   reads cleanly as it crosses from photo into cream background */
.about__media .figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 45%,
    rgba(239, 233, 221, 0.35) 70%,
    rgba(239, 233, 221, 0.85) 92%,
    var(--c-bg) 100%);
  pointer-events: none;
}
/* Secondary smaller figure now juts BOTTOM-LEFT so it doesn't
   compete with the headline that intrudes from the right side. */
.about__media .figure--secondary {
  position: absolute;
  left: -8%; bottom: -14%;
  width: 48%;
  aspect-ratio: 4 / 5;
  border: 10px solid var(--c-bg);
  z-index: 2;
}
.about__media .figure--secondary::after { display: none; }

/* Founder caption — anchored directly to the portrait as its image caption.
   Sits below the main figure, left-aligned. */
.about__caption {
  position: relative;
  z-index: 4;
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  text-align: left;
}
.about__caption-name {
  font-family: var(--f-script);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2rem, 2.6vw + 0.5rem, 3rem);
  line-height: 1;
  color: var(--c-accent);
  letter-spacing: 0;
}
.about__caption-meta {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}

.about__text {
  position: relative;
  z-index: 3;
  padding-top: clamp(40px, 8vw, 120px);
}
.about__eyebrow {
  margin-bottom: clamp(40px, 6vh, 64px);
  display: block;
}
/* ---------------------------------------------------------------
   Headline: visually intrudes leftward into the image area.
   On wide screens negative margin-left pulls it back over the photo;
   the gradient on the figure feathers the photo into cream for legibility.
   --------------------------------------------------------------- */
.about__display {
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 5.4vw + 0.5rem, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: var(--s-7);
  font-weight: 400;
  margin-left: clamp(-22vw, -18vw, -14vw);
  /* multiply blend keeps dark ink legible over photo highlights */
  mix-blend-mode: multiply;
  color: var(--c-ink);
  position: relative;
  z-index: 4;
}
.about__display em { font-style: italic; color: var(--c-accent); }
.about__display .accent { font-style: italic; }

.about__body p {
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--c-ink-soft);
  margin-bottom: var(--s-4);
  font-weight: 300;
  max-width: 52ch;
}
.about__facts {
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-5);
}
.about__facts dt {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--s-2);
  font-weight: 500;
}
.about__facts dd {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}
.about__signature {
  display: block;
  margin-top: var(--s-7);
  font-family: var(--f-script);
  font-size: clamp(2.2rem, 3vw + 0.5rem, 3.4rem);
  color: var(--c-accent);
  line-height: 1;
  letter-spacing: 0;
}
.about__signature-meta {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}

@media (max-width: 880px) {
  .about { grid-template-columns: 1fr; }
  .about__media { margin-top: 0; }
  .about__media .figure::after { display: none; }
  .about__text { padding-top: var(--s-7); }
  .about__display { margin-left: 0; mix-blend-mode: normal; }
}

/* -------- gallery (swipeable strip) ----------------------- */
.gallery {
  position: relative;
}
.gallery__track {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--s-4);
  padding-inline: var(--container-pad);
  scrollbar-width: none;
  cursor: grab;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.gallery__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  position: relative;
  width: clamp(240px, 28vw, 380px);
  height: clamp(360px, 42vw, 580px);
  overflow: hidden;
  background: var(--c-bg-soft);
  border-radius: var(--radius);
}
.gallery__item--portrait { width: clamp(240px, 26vw, 360px); }
.gallery__item--landscape { width: clamp(360px, 42vw, 580px); height: clamp(280px, 32vw, 420px); }
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
  pointer-events: none;
}
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item figcaption {
  position: absolute; left: var(--s-5); bottom: var(--s-5);
  font-family: var(--f-serif); font-style: italic;
  font-size: 0.95rem;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.gallery__item:hover figcaption { opacity: 1; transform: translateY(0); }

.gallery__controls {
  display: flex; gap: var(--s-4);
  margin-top: var(--s-6);
  padding-inline: var(--container-pad);
  align-items: center;
}
.gallery__btn {
  width: 56px; height: 56px;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-ink);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.gallery__btn:hover { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.gallery__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.gallery__btn svg { width: 18px; height: 18px; }
.gallery__progress {
  margin-left: auto;
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.gallery__progress-bar {
  display: inline-block;
  width: 120px;
  height: 1px;
  margin-left: var(--s-4);
  background: var(--c-line);
  position: relative;
  vertical-align: middle;
}
.gallery__progress-bar::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: var(--progress, 0%); height: 100%;
  background: var(--c-accent);
  transition: width var(--t-med) var(--ease);
}

/* gallery variants */
body[data-gallery-layout="mosaic"] .gallery--variantable .gallery__track {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  grid-auto-rows: 120px;
  gap: clamp(8px, 1vw, 16px);
  overflow: visible;
  scroll-snap-type: none;
  cursor: default;
}
body[data-gallery-layout="mosaic"] .gallery--variantable .gallery__item {
  width: auto; height: auto;
  grid-column: span 4;
  grid-row: span 3;
}
body[data-gallery-layout="mosaic"] .gallery--variantable .gallery__item:nth-child(7n+1) { grid-column: span 6; grid-row: span 4; }
body[data-gallery-layout="mosaic"] .gallery--variantable .gallery__item:nth-child(7n+3) { grid-column: span 3; grid-row: span 2; }
body[data-gallery-layout="mosaic"] .gallery--variantable .gallery__item:nth-child(7n+5) { grid-column: span 5; grid-row: span 3; }
body[data-gallery-layout="mosaic"] .gallery--variantable .gallery__controls { display: none; }

body[data-gallery-layout="editorial"] .gallery--variantable .gallery__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 36px);
  overflow: visible;
  scroll-snap-type: none;
  cursor: default;
}
body[data-gallery-layout="editorial"] .gallery--variantable .gallery__item {
  width: auto; height: auto;
  aspect-ratio: 2 / 3;
}
body[data-gallery-layout="editorial"] .gallery--variantable .gallery__item:nth-child(3n+2) {
  aspect-ratio: 3 / 4;
  margin-top: var(--s-9);
}
body[data-gallery-layout="editorial"] .gallery--variantable .gallery__controls { display: none; }
@media (max-width: 860px) {
  body[data-gallery-layout="editorial"] .gallery--variantable .gallery__track,
  body[data-gallery-layout="mosaic"] .gallery--variantable .gallery__track {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -------- services ---------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-5);
}
.service {
  position: relative;
  background: var(--c-paper);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  overflow: hidden;
  border-radius: var(--radius);
  transition: transform var(--t-med) var(--ease);
}
.service:hover { transform: translateY(-6px); }
.service__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.service__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.service:hover .service__media img { transform: scale(1.06); }
.service__body {
  padding: var(--s-6);
  display: grid; gap: var(--s-3);
}
.service__num {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  color: var(--c-muted);
  font-weight: 500;
}
.service__title {
  font-family: var(--f-display);
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.service__title em { font-style: italic; color: var(--c-accent); }
.service__desc {
  color: var(--c-ink-soft);
  font-size: 0.95rem;
  line-height: 1.65;
}
.service__more {
  margin-top: var(--s-3);
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 500;
}
/* layout: editorial mixed grid — two large + four standard */
.service:nth-child(1) { grid-column: span 7; }
.service:nth-child(1) .service__media { aspect-ratio: 6 / 5; }
.service:nth-child(1) .service__title { font-size: clamp(2rem, 2.5vw + 0.5rem, 3rem); }
.service:nth-child(2) { grid-column: span 5; margin-top: clamp(40px, 6vw, 80px); }
.service:nth-child(2) .service__media { aspect-ratio: 4 / 5; }
.service:nth-child(2) .service__title { font-size: clamp(2rem, 2.5vw + 0.5rem, 3rem); }
.service:nth-child(3),
.service:nth-child(4),
.service:nth-child(5),
.service:nth-child(6) { grid-column: span 3; }
.service:nth-child(3) .service__media,
.service:nth-child(4) .service__media,
.service:nth-child(5) .service__media,
.service:nth-child(6) .service__media { aspect-ratio: 3 / 4; }
@media (max-width: 880px) {
  .services { grid-template-columns: 1fr 1fr; }
  .service:nth-child(n) { grid-column: span 1; margin-top: 0; }
  .service:nth-child(n) .service__title { font-size: 1.6rem; }
}
@media (max-width: 540px) {
  .services { grid-template-columns: 1fr; }
}

/* -------- why-us / numbered reviews ----------------------- */
.why {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.why__intro { grid-column: span 4; position: sticky; top: 120px; }
.why__list  { grid-column: span 8; display: grid; gap: var(--s-5); }
.why-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--s-6);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--c-line);
}
.why-item:last-child { border-bottom: 1px solid var(--c-line); }
.why-item__num {
  font-family: var(--f-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--c-accent);
  letter-spacing: -0.04em;
  font-style: italic;
}
.why-item__title {
  font-family: var(--f-display);
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}
.why-item__title em { font-style: italic; color: var(--c-accent); }
.why-item__body {
  color: var(--c-ink-soft);
  font-size: var(--fs-body);
  line-height: 1.7;
  max-width: 56ch;
}
.why-item__attrib {
  margin-top: var(--s-3);
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
@media (max-width: 880px) {
  .why__intro, .why__list { grid-column: 1 / -1; }
  .why__intro { position: static; margin-bottom: var(--s-6); }
  .why-item { grid-template-columns: 60px 1fr; gap: var(--s-4); }
  .why-item__num { font-size: 2.5rem; }
}

/* -------- film section ------------------------------------ */
.film {
  position: relative;
}
.film__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: #000;
  isolation: isolate;
}
.film__frame img, .film__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
}
.film__frame::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.55) 100%);
  z-index: 2;
  pointer-events: none;
}
.film__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: clamp(80px, 9vw, 124px);
  height: clamp(80px, 9vw, 124px);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.film__play:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(255,255,255,0.18); }
.film__play svg { width: 28px; height: 28px; margin-left: 4px; }
.film__meta {
  position: absolute; left: var(--s-7); bottom: var(--s-7); right: var(--s-7);
  z-index: 3;
  color: #fff;
  display: flex; justify-content: space-between; align-items: flex-end;
  pointer-events: none;
  font-family: var(--f-display);
}
.film__couple {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-style: italic; line-height: 1.1;
}
.film__where {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.film.is-playing .film__play,
.film.is-playing .film__meta,
.film.is-playing .film__frame::before { display: none; }

/* -------- featured stories grid --------------------------- */
.stories {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 56px) clamp(16px, 2vw, 36px);
}
.story {
  position: relative;
  text-decoration: none; color: inherit;
  display: block;
}
.story__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-bg-soft);
  margin-bottom: var(--s-4);
}
.story__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.story:hover .story__media img { transform: scale(1.05); }
.story__couple {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-style: italic;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-1);
}
.story__where {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.story:nth-child(1) { grid-column: span 7; }
.story:nth-child(1) .story__media { aspect-ratio: 4 / 5; }
.story:nth-child(2) { grid-column: 9 / span 4; margin-top: var(--s-10); }
.story:nth-child(3) { grid-column: 2 / span 4; }
.story:nth-child(4) { grid-column: 7 / span 6; margin-top: -10vh; }
.story:nth-child(4) .story__media { aspect-ratio: 4 / 5; }
@media (max-width: 880px) {
  .stories { grid-template-columns: 1fr 1fr; }
  .story:nth-child(n) { grid-column: span 1; margin-top: 0; }
}

/* -------- selected stories (editorial broken-grid) -------- */
.selected {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(28px, 3.5vw, 64px) clamp(20px, 2.4vw, 44px);
  align-items: start;
}
.selected__story { position: relative; text-decoration: none; color: inherit; display: block; }
.selected__story .media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
  margin-bottom: var(--s-4);
}
.selected__story .media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.selected__story:hover .media img { transform: scale(1.04); }
.selected__story .num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-accent);
  letter-spacing: 0.08em;
  margin-bottom: var(--s-2);
  display: block;
}
.selected__story .couple {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.8vw + 0.5rem, 2.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: var(--s-1) 0 var(--s-2);
  font-weight: 400;
}
.selected__story .couple em { font-style: italic; color: var(--c-accent); }
.selected__story .meta {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}

/* broken-grid arrangement (use nth-of-type — label is a <span> sibling) */
.selected__story:nth-of-type(1) { grid-column: 1 / span 7; }
.selected__story:nth-of-type(1) .media { aspect-ratio: 5 / 6; }
.selected__story:nth-of-type(2) { grid-column: 9 / span 4; margin-top: clamp(60px, 9vw, 140px); }
.selected__story:nth-of-type(3) { grid-column: 2 / span 4; margin-top: clamp(-30px, -3vw, -10px); }
.selected__story:nth-of-type(4) { grid-column: 7 / span 6; margin-top: clamp(-100px, -10vw, -40px); }
.selected__story:nth-of-type(4) .media { aspect-ratio: 4 / 5; }
.selected__story:nth-of-type(5) { grid-column: 1 / span 5; margin-top: clamp(40px, 6vw, 80px); }
.selected__story:nth-of-type(6) { grid-column: 7 / span 5; margin-top: clamp(60px, 8vw, 120px); }

/* oversized editorial label that overlaps the grid */
.selected__label {
  position: absolute;
  top: clamp(-118px, -11vw, -148px);
  left: 0; right: 0;
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(5rem, 12vw + 1rem, 12rem);
  font-style: italic;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--c-ink);
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
  mix-blend-mode: multiply;
}
.selected__label em { font-style: italic; color: var(--c-accent); }

@media (max-width: 880px) {
  .selected { grid-template-columns: 1fr 1fr; gap: 24px; }
  .selected__story:nth-of-type(n) { grid-column: span 1; margin-top: 0; }
  .selected__label { font-size: clamp(3rem, 12vw, 5rem); top: -80px; }
}

/* -------- section-crossing image moment ------------------- */
.image-cross {
  position: relative;
  margin-block: clamp(-90px, -8vw, -60px) 0;
  z-index: 2;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 36px);
}
.image-cross__primary {
  grid-column: 2 / span 5;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.image-cross__primary img { width: 100%; height: 100%; object-fit: cover; }
.image-cross__caption {
  grid-column: 8 / span 4;
  align-self: end;
  padding-bottom: var(--s-5);
}
.image-cross__caption p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.4vw + 0.5rem, 1.7rem);
  line-height: 1.4;
  color: var(--c-ink);
  margin-bottom: var(--s-4);
}
.image-cross__caption span {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
@media (max-width: 880px) {
  .image-cross { grid-template-columns: 1fr; }
  .image-cross__primary { grid-column: 1; }
  .image-cross__caption { grid-column: 1; padding-bottom: 0; padding-top: var(--s-4); }
}
.pullquote {
  text-align: center;
  max-width: 920px;
  margin-inline: auto;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2rem, 3vw + 1rem, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.section--dark .pullquote { color: var(--c-on-dark); }
.pullquote__mark {
  font-family: var(--f-display);
  font-size: 5em; line-height: 0.6;
  color: var(--c-accent);
  display: block;
  margin-bottom: -0.3em;
}
.pullquote__cite {
  display: block;
  margin-top: var(--s-6);
  font-family: var(--f-sans);
  font-style: normal;
  font-size: var(--fs-overline);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}

/* -------- editorial display row --------------------------- */
.bigtype {
  font-family: var(--f-display);
  font-size: var(--fs-display);
  line-height: 0.85;
  letter-spacing: -0.06em;
  margin: 0;
  text-align: center;
}
.bigtype em { font-style: italic; color: var(--c-accent); }
.bigtype-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  position: relative;
}
.bigtype-row__photo {
  position: relative;
  width: clamp(180px, 22vw, 300px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin-inline: auto;
  margin-block: calc(var(--fs-display) * -0.5) calc(var(--fs-display) * -0.3);
  z-index: 2;
}
.bigtype-row__photo img { width: 100%; height: 100%; object-fit: cover; }

/* -------- contact / form ---------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.contact__intro h2 {
  font-size: clamp(2.5rem, 4vw + 0.5rem, 4.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: var(--s-5);
}
.contact__intro h2 em { font-style: italic; color: var(--c-accent); }
.contact__intro p {
  font-family: var(--f-serif); font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  max-width: 36ch;
  margin-bottom: var(--s-6);
  line-height: 1.5;
}
.contact--stack .contact__intro .home-inquiry__lede {
  width: min(100%, 40rem);
  max-width: 40rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  text-wrap: balance;
}
.contact__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-4);
  font-size: 0.95rem;
}
.contact__list dt {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  margin-bottom: 2px;
}
.contact__list dd { margin: 0; font-family: var(--f-serif); font-size: 1.25rem; }
.contact__list a { text-decoration: none; }
.contact__list a:hover { color: var(--c-accent); }

.contact__form {
  background: var(--c-paper);
  padding: clamp(28px, 4vw, 56px);
  display: grid; gap: var(--s-5);
  border-radius: var(--radius);
}
.contact__form-grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr 1fr;
}
.field {
  display: grid; gap: var(--s-2);
}
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.field input, .field select, .field textarea {
  border: none;
  border-bottom: 1px solid var(--c-line);
  background: transparent;
  padding: 10px 0;
  font-family: var(--f-serif);
  font-size: 1.15rem;
  color: var(--c-ink);
  border-radius: 0;
  -webkit-appearance: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--c-accent);
}
.field textarea { resize: vertical; min-height: 80px; }
.contact__form .btn--primary { justify-self: start; }
@media (max-width: 880px) {
  .contact { grid-template-columns: 1fr; }
  .contact__form-grid { grid-template-columns: 1fr; }
}

/* -------- instagram strip --------------------------------- */
.iglead {
  text-align: center;
  display: grid; gap: var(--s-5);
  margin-bottom: var(--s-7);
}
.iglead__handle {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
  font-style: italic;
  color: var(--c-accent);
}
.igstrip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-3);
}
.igstrip a {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--c-bg-soft);
}
.igstrip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.igstrip a:hover img { transform: scale(1.08); }
@media (max-width: 880px) { .igstrip { grid-template-columns: repeat(3, 1fr); } }

/* -------- footer ------------------------------------------ */
.site-footer {
  background: var(--c-bg-dark);
  color: var(--c-on-dark);
  padding-block: clamp(60px, 9vw, 120px) var(--s-6);
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(0, max-content);
  column-gap: clamp(70px, 11vw, 168px);
  justify-content: space-between;
  align-items: start;
  padding-bottom: var(--s-8);
  border-bottom: 1px solid rgba(243,238,229,0.12);
}
.site-footer__top > :first-child {
  justify-self: start;
}
.site-footer__navcols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, max-content);
  gap: clamp(34px, 5vw, 78px);
  justify-self: end;
  justify-content: end;
}
.site-footer__col {
  min-width: 132px;
}
.site-footer__brand {
  display: none;
  width: clamp(190px, 19vw, 280px);
  aspect-ratio: 1.75 / 1;
  height: auto;
  background-color: var(--c-logo-on-dark);
  -webkit-mask-image: url("../img/logo-cropped.png");
          mask-image: url("../img/logo-cropped.png");
  -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
  -webkit-mask-position: left center;      mask-position: left center;
  -webkit-mask-size: contain;              mask-size: contain;
}
.site-footer__brand-text {
  font-family: var(--f-display);
  display: block;
  font-size: clamp(1.58rem, 2.05vw, 2rem);
  line-height: 0.95;
  letter-spacing: 0;
  font-weight: 300;
  color: rgba(243,238,229,0.9);
  white-space: nowrap;
}
.site-footer__tag {
  margin-top: var(--s-4);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.08rem;
  font-weight: 300;
  color: rgba(243,238,229,0.66);
  max-width: 31ch;
  line-height: 1.62;
}
.site-footer__tag + .site-footer__tag {
  margin-top: var(--s-4);
  font-family: var(--f-sans);
  font-style: normal;
  font-size: 13.25px;
  line-height: 1.6;
  color: rgba(243,238,229,0.68);
}
.site-footer__tag a {
  color: inherit;
  text-decoration: none;
}
.site-footer__tag a:hover {
  color: var(--c-accent);
}
.site-footer__col h4 {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(243,238,229,0.55);
  margin-bottom: var(--s-4);
  font-weight: 500;
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.78rem; }
.site-footer__col a {
  text-decoration: none;
  font-family: var(--f-serif);
  font-size: 1.08rem;
  line-height: 1.35;
  color: var(--c-on-dark);
}
.site-footer__col a:hover { color: var(--c-accent); }
.site-footer__venues {
  display: flex;
  gap: 12px 26px;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid rgba(243,238,229,0.14);
}
.site-footer__venues span {
  font-family: var(--f-sans);
  font-size: 11.75px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243,238,229,0.42);
  font-weight: 600;
}
.site-footer__venues a {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 16.5px;
  color: rgba(243,238,229,0.76);
  text-decoration: none;
}
.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-4); flex-wrap: wrap;
  padding-top: var(--s-6);
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(243,238,229,0.58);
}
.site-footer__bottom a,
.site-footer__legal a,
.site-footer__social a {
  color: inherit;
  text-decoration: none;
}
.site-footer__bottom a:hover,
.site-footer__legal a:hover {
  color: var(--c-accent);
}
.site-footer__bottom-left {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}
.site-footer__legal {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.site-footer__social {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-overline);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(243,238,229,0.68);
}
.site-footer__social a {
  color: rgba(243,238,229,0.68);
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.site-footer__social a:hover {
  color: var(--c-accent);
}
.site-footer__social--icons {
  gap: 12px;
  letter-spacing: 0;
}
.site-footer__social-icon {
  width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
}
.site-footer__social-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}
.site-footer__social--color-icons .site-footer__social-icon--instagram { color: #e4405f; }
.site-footer__social--color-icons .site-footer__social-icon--tiktok { color: #f3eee5; }
.site-footer__social--color-icons .site-footer__social-icon--youtube { color: #ff0033; }
.site-footer__signature {
  margin-top: 26px;
  text-align: center;
  font-family: "Italianno", cursive;
  font-style: normal;
  font-size: 25px;
  font-weight: 400;
  color: rgba(243,238,229,0.46);
}
.site-footer__contact { display: inline-flex; align-items: center; gap: var(--s-3); }
.site-footer__contact a { color: rgba(243,238,229,0.72); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.site-footer__contact a:hover { color: var(--c-accent); }
.site-footer__dot { opacity: 0.4; }
@media (max-width: 1040px) {
  .site-footer__top {
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, max-content);
    column-gap: clamp(44px, 7vw, 86px);
  }
  .site-footer__navcols {
    gap: clamp(22px, 3.5vw, 42px);
  }
}
@media (max-width: 820px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    row-gap: clamp(34px, 7vw, 56px);
  }
  .site-footer__navcols {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    justify-self: stretch;
    justify-content: stretch;
  }
}
@media (max-width: 720px) {
  .site-footer__contact { order: 3; width: 100%; justify-content: flex-start; }
}
@media (max-width: 720px) {
  .site-footer__bottom { flex-direction: column; gap: var(--s-3); }
}
@media (max-width: 560px) {
  .site-footer__navcols {
    grid-template-columns: 1fr;
  }
  .site-footer__social {
    margin-left: 0;
  }
}

/* -------- reveal-on-scroll animation ---------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------- lightbox ---------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20,16,12,0.92);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--s-6);
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 92vw; max-height: 88vh;
  object-fit: contain;
}
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(243,238,229,0.4);
  color: var(--c-on-dark);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__close { top: var(--s-5); right: var(--s-5); }
.lightbox__prev  { left: var(--s-5); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--s-5); top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover {
  background: var(--c-accent); border-color: var(--c-accent);
}
.lightbox__counter {
  position: absolute; bottom: var(--s-5); left: 50%; transform: translateX(-50%);
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(243,238,229,0.7);
}

/* -------- responsive section padding tweaks --------------- */
@media (max-width: 540px) {
  .section { padding-block: 72px; }
}

/* ============================================================
   PACKAGES PAGE — editorial collections / investment layout.
   Lives under .pkg-* classes so it can't collide with anything else.
   ============================================================ */

/* Page hero — quieter than the homepage hero, single image */
.pkg-hero {
  position: relative;
  min-height: 72vh;
  display: flex; align-items: flex-end;
  color: var(--c-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.pkg-hero__media {
  position: absolute; inset: 0; z-index: -2;
}
.pkg-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 35%;
}
.pkg-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,12,0.5) 0%, rgba(20,16,12,0.1) 35%, rgba(20,16,12,0.0) 60%, rgba(20,16,12,0.6) 100%);
}
.pkg-hero__inner {
  width: 100%;
  padding-block: clamp(140px, 22vh, 220px) clamp(60px, 10vh, 100px);
}
.pkg-hero__overline {
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.4em;
  margin-bottom: clamp(40px, 6vh, 70px);
}
.pkg-hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5.5vw + 0.5rem, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #fff;
  font-weight: 400;
  max-width: 16ch;
}
.pkg-hero__title em { font-style: italic; }
.pkg-hero__sub {
  margin-top: var(--s-6);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.4vw + 0.5rem, 1.5rem);
  color: rgba(255,255,255,0.92);
  max-width: 44ch;
  line-height: 1.5;
}

/* Anchor jump-nav — quiet pill row that sits under the hero */
.pkg-jump {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.pkg-jump__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 56px);
  padding-block: var(--s-4);
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-muted);
  flex-wrap: wrap;
}
.pkg-jump__row a {
  text-decoration: none;
  color: inherit;
  padding: 6px 0;
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
.pkg-jump__row a:hover,
.pkg-jump__row a.is-active { color: var(--c-ink); }
.pkg-jump__row a:hover::after,
.pkg-jump__row a.is-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--c-accent);
}
.pkg-jump__sep { opacity: 0.4; }

/* Collection — section header for each pricing group */
.pkg-collection {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
  margin-bottom: clamp(60px, 8vw, 100px);
}
.pkg-collection__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
  margin-top: clamp(-60px, -6vw, -100px);
}
.pkg-collection__media img { width: 100%; height: 100%; object-fit: cover; }
.pkg-collection__head { padding-bottom: var(--s-4); }
.pkg-collection__roman {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  color: var(--c-accent);
  font-size: clamp(1.4rem, 1.6vw + 0.5rem, 2rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-3);
}
.pkg-collection__title {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 4.5vw + 0.5rem, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin-bottom: var(--s-5);
}
.pkg-collection__title em { font-style: italic; color: var(--c-accent); }
.pkg-collection__intro {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  line-height: 1.5;
  max-width: 48ch;
  margin-bottom: var(--s-5);
}
.pkg-collection__meta {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
@media (max-width: 880px) {
  .pkg-collection { grid-template-columns: 1fr; gap: var(--s-6); }
  .pkg-collection__media { margin-top: 0; aspect-ratio: 3 / 2; }
}

/* Tier grid — 4 cards per collection */
.pkg-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
@media (max-width: 1100px) {
  .pkg-tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pkg-tiers { grid-template-columns: 1fr; }
}

/* Tier card */
.pkg-tier {
  position: relative;
  background: var(--c-paper);
  padding: clamp(28px, 2.4vw, 40px) clamp(24px, 2vw, 36px) clamp(28px, 2.4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  border-top: 1px solid var(--c-line);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.pkg-tier:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -32px rgba(20,16,12,0.18); }
.pkg-tier__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--c-accent);
  letter-spacing: 0.04em;
  margin-bottom: -var(--s-2);
}
.pkg-tier__name {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.8vw + 0.5rem, 2.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.pkg-tier__name em { font-style: italic; color: var(--c-accent); }
.pkg-tier__crew {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding-block: var(--s-3);
  margin-block: var(--s-1) var(--s-2);
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  flex-wrap: wrap;
}
.pkg-tier__crew strong {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4em;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.pkg-tier__crew .dot { opacity: 0.5; }

/* Deliverable list */
.pkg-tier__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  flex: 1;
}
.pkg-tier__list li {
  position: relative;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  padding-left: 22px;
  font-weight: 300;
}
.pkg-tier__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 12px; height: 1px;
  background: var(--c-accent);
}
.pkg-tier__list li strong {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  font-size: 1.05em;
}
.pkg-tier__list li.is-bonus::before {
  background: var(--c-accent);
  width: 12px; height: 12px; border-radius: 50%;
  top: 0.4em; left: 1px;
  opacity: 0.18;
}
.pkg-tier__list li.is-bonus::after {
  content: "+";
  position: absolute; left: 2px; top: -0.05em;
  font-family: var(--f-display);
  color: var(--c-accent);
  font-size: 1.05em;
  line-height: 1.6;
}

/* Price block */
.pkg-tier__price {
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-4);
  margin-top: var(--s-3);
  display: grid;
  gap: var(--s-1);
}
.pkg-tier__price-main {
  font-family: var(--f-display);
  font-size: clamp(2rem, 2.4vw + 0.5rem, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--c-ink);
}
.pkg-tier__price-extra {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.pkg-tier__cta {
  margin-top: var(--s-3);
  align-self: flex-start;
}

/* Premium tier — visually distinct without being loud */
.pkg-tier--premium {
  background: var(--c-bg-dark);
  color: var(--c-on-dark);
  border-top: 1px solid var(--c-accent);
}
.pkg-tier--premium .pkg-tier__name,
.pkg-tier--premium .pkg-tier__crew strong,
.pkg-tier--premium .pkg-tier__price-main,
.pkg-tier--premium .pkg-tier__list li strong { color: var(--c-on-dark); }
.pkg-tier--premium .pkg-tier__num { color: oklch(0.75 0.08 30); }
.pkg-tier--premium .pkg-tier__name em { color: oklch(0.75 0.08 30); }
.pkg-tier--premium .pkg-tier__crew,
.pkg-tier--premium .pkg-tier__price {
  border-color: rgba(239,233,221,0.18);
  color: rgba(239,233,221,0.6);
}
.pkg-tier--premium .pkg-tier__list li { color: rgba(239,233,221,0.82); }
.pkg-tier--premium .pkg-tier__list li::before { background: oklch(0.75 0.08 30); }
.pkg-tier--premium .pkg-tier__price-extra { color: rgba(239,233,221,0.55); }
.pkg-tier--premium .btn { color: var(--c-on-dark); border-color: var(--c-on-dark); }
.pkg-tier--premium .btn:hover { background: var(--c-on-dark); color: var(--c-bg-dark); }

/* Badges */
.pkg-badge {
  position: absolute;
  top: -11px; right: clamp(14px, 1.6vw, 22px);
  background: var(--c-accent);
  color: var(--c-paper);
  font-family: var(--f-sans);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;
  padding: 6px 11px;
  white-space: nowrap;
  border-radius: 2px;
  z-index: 3;
}
.pkg-badge--save {
  background: color-mix(in oklab, var(--c-paper) 94%, white 6%);
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--c-paper) 94%, white 6%), 0 10px 22px rgba(55, 43, 32, .08);
}
.pkg-tier__num { padding-right: 92px; }

/* Editorial divider — used between collections */
.pkg-divider {
  text-align: center;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.2rem, 1.4vw + 0.5rem, 1.6rem);
  color: var(--c-muted);
  padding-block: clamp(60px, 8vw, 100px) clamp(60px, 8vw, 100px);
  position: relative;
}
.pkg-divider::before,
.pkg-divider::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: clamp(60px, 8vw, 120px);
  height: 1px;
  background: var(--c-line);
  margin: 0 var(--s-4);
}

/* ============================================================
   ADDITIONAL — curated extension of the offers
   ============================================================ */
.pkg-additional {
  background: var(--c-bg-soft);
}
.pkg-additional__head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 100px);
  margin-bottom: clamp(60px, 8vw, 100px);
  align-items: end;
}
.pkg-additional__head h2 {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 4.5vw + 0.5rem, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
}
.pkg-additional__head h2 em { font-style: italic; color: var(--c-accent); }
.pkg-additional__head p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  line-height: 1.5;
  max-width: 48ch;
}
@media (max-width: 880px) {
  .pkg-additional__head { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* Add-on grouping — sub-header that introduces 1+ add-on cards */
.pkg-group {
  margin-bottom: clamp(56px, 7vw, 96px);
}
.pkg-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  margin-bottom: clamp(28px, 3vw, 44px);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.pkg-group__roman {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--c-accent);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.pkg-group__title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2vw + 0.5rem, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.pkg-group__title em { font-style: italic; color: var(--c-accent); }
.pkg-group__lede {
  flex: 1;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
  margin-left: auto;
  max-width: 48ch;
  text-align: right;
}
@media (max-width: 720px) {
  .pkg-group__head { flex-direction: column; gap: var(--s-2); align-items: flex-start; }
  .pkg-group__lede { text-align: left; margin-left: 0; }
}

.pkg-group__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2vw, 36px);
}
.pkg-group__cards--two { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* ------------------------------------------------------------------
   Collapsible variant — same .pkg-group skin, native <details>/<summary>
   wiring, smooth height animation driven by a small JS shim.
   Multi-open: each item is its own <details>, no shared state.
   ------------------------------------------------------------------ */
details.pkg-group--collapsible {
  margin-bottom: clamp(20px, 2.2vw, 32px);
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid transparent;
  transition: border-bottom-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
details.pkg-group--collapsible[open] {
  border-bottom-color: var(--c-line);
}
details.pkg-group--collapsible summary.pkg-group__head {
  /* override default <summary> styling */
  list-style: none;
  cursor: pointer;
  user-select: none;
  /* keep the original head flex layout */
  margin-bottom: 0;
  padding: clamp(20px, 2vw, 32px) clamp(20px, 2vw, 36px);
  border-bottom: none;
  position: relative;
  align-items: center;
  gap: var(--s-5);
  transition: background var(--t-fast) var(--ease);
}
details.pkg-group--collapsible summary.pkg-group__head::-webkit-details-marker { display: none; }
details.pkg-group--collapsible summary.pkg-group__head:hover {
  background: color-mix(in oklch, var(--c-paper), var(--c-accent) 4%);
}
details.pkg-group--collapsible summary.pkg-group__head:focus-visible {
  outline: 2px solid var(--c-accent); outline-offset: -4px;
}
/* Roman numeral & title share original treatment — only sizes nudged */
details.pkg-group--collapsible .pkg-group__title {
  font-size: clamp(1.4rem, 1.6vw + 0.4rem, 2rem);
  line-height: 1.05;
}
/* tiny price hint, only visible when collapsed */
.pkg-group__price-hint {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1rem, 1vw + 0.3rem, 1.25rem);
  color: var(--c-accent);
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin-left: auto;
  padding-right: clamp(40px, 4vw, 60px); /* leave room for the +/- glyph */
  flex-shrink: 0;
}
details.pkg-group--collapsible[open] .pkg-group__price-hint {
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
/* lede shows always but the order changes when open */
details.pkg-group--collapsible .pkg-group__lede {
  font-size: 0.98rem;
  text-align: left;
  max-width: 56ch;
  margin-left: 0;
}
/* plus/minus toggle glyph */
.pkg-group__toggle {
  position: absolute;
  right: clamp(20px, 2vw, 36px);
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
  background: transparent;
}
.pkg-group__toggle::before,
.pkg-group__toggle::after {
  content: "";
  position: absolute;
  background: var(--c-ink);
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
.pkg-group__toggle::before { width: 12px; height: 1px; } /* horizontal */
.pkg-group__toggle::after  { width: 1px; height: 12px; } /* vertical → becomes minus */
details.pkg-group--collapsible[open] .pkg-group__toggle {
  border-color: var(--c-accent);
  background: color-mix(in oklch, var(--c-accent), transparent 88%);
}
details.pkg-group--collapsible[open] .pkg-group__toggle::after {
  transform: scaleY(0);
}
details.pkg-group--collapsible summary.pkg-group__head:hover .pkg-group__toggle {
  border-color: var(--c-accent);
}

/* Animated content well — height is driven by JS (the shim sets an
   inline height during transition, then clears it). */
details.pkg-group--collapsible .pkg-group__content {
  overflow: hidden;
  transition: height var(--t-med) var(--ease);
}
details.pkg-group--collapsible .pkg-group__content-inner {
  padding: 0 clamp(20px, 2vw, 36px) clamp(28px, 3vw, 44px);
}
/* When closed, completely hide content from accessibility tree */
details.pkg-group--collapsible:not([open]) .pkg-group__content {
  height: 0;
}

/* On small screens, the head wraps; toggle stays anchored at top-right */
@media (max-width: 720px) {
  details.pkg-group--collapsible summary.pkg-group__head {
    padding-right: clamp(56px, 14vw, 80px);
  }
  .pkg-group__toggle { top: clamp(18px, 4vw, 28px); transform: none; }
  .pkg-group__price-hint { padding-right: 0; margin-left: 0; }
}

/* ============================================================
   ENGAGEMENT PAGE — premium ad-landing for Pasadena City Hall
   sessions. Namespaced under .eng-* so it can never collide.
   ============================================================ */

/* Hero — full-bleed Pasadena City Hall image */
.eng-hero {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: flex-end;
  color: var(--c-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.eng-hero__media { position: absolute; inset: 0; z-index: -2; }
.eng-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
}
.eng-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,12,0.45) 0%, rgba(20,16,12,0.08) 30%, rgba(20,16,12,0.05) 60%, rgba(20,16,12,0.65) 100%);
}
.eng-hero__inner {
  width: 100%;
  padding-block: clamp(140px, 22vh, 220px) clamp(60px, 10vh, 100px);
}
.eng-hero__overline {
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.4em;
  margin-bottom: clamp(40px, 6vh, 70px);
}
.eng-hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 5.4vw + 0.5rem, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #fff;
  font-weight: 400;
  max-width: 14ch;
}
.eng-hero__title em { font-style: italic; }
.eng-hero__sub {
  margin-top: var(--s-6);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.4vw + 0.5rem, 1.5rem);
  color: rgba(255,255,255,0.92);
  max-width: 44ch;
  line-height: 1.5;
}
.eng-hero__strip {
  position: absolute; bottom: var(--s-6);
  left: var(--container-pad); right: var(--container-pad);
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

/* Emotional intro — editorial 2-column */
.eng-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.eng-intro__eyebrow {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.4rem, 1.6vw + 0.5rem, 1.9rem);
  color: var(--c-accent);
  line-height: 1.2;
}
.eng-intro__display {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 4.4vw + 0.5rem, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin-bottom: var(--s-6);
}
.eng-intro__display em { font-style: italic; color: var(--c-accent); }
.eng-intro__body p {
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--c-ink-soft);
  margin-bottom: var(--s-4);
  font-weight: 300;
  max-width: 52ch;
}
.eng-intro__body p:first-of-type {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-ink);
}
@media (max-width: 880px) { .eng-intro { grid-template-columns: 1fr; } }

/* Session cards — premium chapter treatment, NOT discount cards */
.eng-sessions__head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(60px, 8vw, 100px);
  max-width: 800px;
}
.eng-sessions__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 32px);
  align-items: stretch;
}
.eng-session {
  position: relative;
  background: var(--c-paper);
  padding: clamp(36px, 3vw, 52px) clamp(28px, 2.4vw, 40px);
  display: flex; flex-direction: column;
  gap: var(--s-4);
  border-top: 1px solid var(--c-line);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.eng-session:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px -36px rgba(20,16,12,0.22);
}
.eng-session__roman {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--c-accent);
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.eng-session__title {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 2vw + 0.5rem, 2.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.eng-session__title em { font-style: italic; color: var(--c-accent); font-weight: 400; }
.eng-session__where {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding-block: var(--s-3);
  margin-block: var(--s-2);
}
.eng-session__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-3);
  flex: 1;
}
.eng-session__list li {
  position: relative;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  padding-left: 22px;
  font-weight: 300;
}
.eng-session__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 12px; height: 1px;
  background: var(--c-accent);
}
.eng-session__list li strong {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  font-size: 1.05em;
}
.eng-session__deposit {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--c-muted);
  border-top: 1px dashed var(--c-line);
  padding-top: var(--s-3);
  line-height: 1.5;
}
.eng-session__deposit strong { color: var(--c-ink); font-style: normal; font-weight: 500; }
.eng-session__price {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-4);
  margin-top: var(--s-2);
}
.eng-session__price-label {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.eng-session__price-value {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 2.4vw + 0.5rem, 3.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.eng-session__cta {
  margin-top: var(--s-3);
  align-self: stretch;
  text-align: center;
  width: 100%;
}

/* Most-popular middle card */
.eng-session--featured {
  background: var(--c-bg-dark);
  color: var(--c-on-dark);
  border-top: 1px solid var(--c-accent);
  transform: translateY(-12px);
}
.eng-session--featured:hover { transform: translateY(-18px); }
.eng-session--featured .eng-session__title,
.eng-session--featured .eng-session__price-value { color: var(--c-on-dark); }
.eng-session--featured .eng-session__title em,
.eng-session--featured .eng-session__roman { color: oklch(0.78 0.08 30); }
.eng-session--featured .eng-session__list li { color: rgba(239,233,221,0.82); }
.eng-session--featured .eng-session__list li::before { background: oklch(0.78 0.08 30); }
.eng-session--featured .eng-session__list li strong { color: var(--c-on-dark); }
.eng-session--featured .eng-session__where,
.eng-session--featured .eng-session__price,
.eng-session--featured .eng-session__deposit {
  border-color: rgba(239,233,221,0.18); color: rgba(239,233,221,0.65);
}
.eng-session--featured .eng-session__deposit strong { color: var(--c-on-dark); }
.eng-session--featured .eng-session__price-label { color: rgba(239,233,221,0.55); }
.eng-session--featured .btn { color: var(--c-on-dark); border-color: var(--c-on-dark); }
.eng-session--featured .btn:hover { background: var(--c-on-dark); color: var(--c-bg-dark); }

/* The quiet "most popular" badge */
.eng-session__badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--c-accent);
  color: var(--c-paper);
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 6px 14px;
}

@media (max-width: 1050px) {
  .eng-sessions__cards { grid-template-columns: 1fr; }
  .eng-session--featured { transform: none; }
  .eng-session--featured:hover { transform: translateY(-6px); }
}

@media (max-width: 640px) {
  .eng-hero,
  .eng-intro,
  .eng-sessions,
  .eng-gallery,
  .eng-why,
  .eng-beyond,
  .eng-reviews {
    max-width: 100%;
    overflow-x: clip;
  }

  .eng-session {
    width: 100%;
    max-width: 100%;
    padding: 32px clamp(22px, 6vw, 30px);
  }

  .eng-session__where,
  .eng-session__price-label,
  .eng-session__badge,
  .eng-hero__strip,
  .eng-sessions__head .overline,
  .eng-intro__eyebrow {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .eng-session__where,
  .eng-session__price {
    min-width: 0;
  }

  .eng-session__price {
    gap: var(--s-3);
  }

  .eng-session__cta,
  .eng-session__cta .btn {
    max-width: 100%;
  }

  .eng-session__badge {
    max-width: calc(100% - 44px);
    text-align: center;
    white-space: normal;
  }
}

/* Editorial gallery moment — broken-grid 4 images, asymmetric */
.eng-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.4vw, 44px);
  align-items: start;
}
.eng-gallery figure {
  margin: 0;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.eng-gallery img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.eng-gallery figure:hover img { transform: scale(1.04); }
.eng-gallery figure:nth-child(1) { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.eng-gallery figure:nth-child(2) { grid-column: 7 / span 6; aspect-ratio: 5 / 4; margin-top: clamp(40px, 6vw, 80px); }
.eng-gallery figure:nth-child(3) { grid-column: 2 / span 4; aspect-ratio: 3 / 4; margin-top: clamp(-40px, -3vw, -10px); }
.eng-gallery figure:nth-child(4) { grid-column: 7 / span 5; aspect-ratio: 4 / 5; }
@media (max-width: 880px) {
  .eng-gallery { grid-template-columns: 1fr 1fr; }
  .eng-gallery figure:nth-child(n) { grid-column: span 1; margin-top: 0; aspect-ratio: 4 / 5; }
}

/* "Why couples start with engagement" reassurance row */
.eng-why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 60px);
}
.eng-why__item {
  display: grid; gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.eng-why__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--c-accent);
  line-height: 1;
}
.eng-why__title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1.4vw + 0.4rem, 1.8rem);
  letter-spacing: -0.02em;
  font-weight: 400;
  line-height: 1.1;
}
.eng-why__title em { font-style: italic; color: var(--c-accent); }
.eng-why__body {
  font-family: var(--f-sans);
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--c-ink-soft);
  font-weight: 300;
}
@media (max-width: 880px) { .eng-why { grid-template-columns: 1fr; } }

/* Beyond Pasadena — custom location section */
.eng-beyond {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.eng-beyond__media {
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.eng-beyond__media img { width: 100%; height: 100%; object-fit: cover; }
.eng-beyond__display {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 3.6vw + 0.5rem, 4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin-bottom: var(--s-5);
}
.eng-beyond__display em { font-style: italic; color: var(--c-accent); }
.eng-beyond__lede {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  line-height: 1.5;
  max-width: 44ch;
  margin-bottom: var(--s-5);
}
.eng-beyond__card {
  background: var(--c-paper);
  padding: clamp(28px, 2.6vw, 40px);
  border-top: 1px solid var(--c-line);
  display: grid; gap: var(--s-4);
}
.eng-beyond__card .price {
  font-family: var(--f-display);
  font-size: clamp(2rem, 2vw + 0.5rem, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
}
.eng-beyond__card .where {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.eng-beyond__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.eng-beyond__card li {
  position: relative;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  padding-left: 22px;
  line-height: 1.5;
}
.eng-beyond__card li::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: 12px; height: 1px; background: var(--c-accent);
}
@media (max-width: 880px) { .eng-beyond { grid-template-columns: 1fr; } }

/* Reviews / social proof block */
.eng-reviews {
  background: var(--c-bg-dark);
  color: var(--c-on-dark);
  padding-block: clamp(80px, 12vw, 160px);
  position: relative;
  isolation: isolate;
  text-align: center;
}
.eng-reviews .container { display: grid; gap: var(--s-6); justify-items: center; }
.eng-reviews__rating {
  font-family: var(--f-display);
  font-size: clamp(4rem, 8vw + 0.5rem, 8rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--c-on-dark);
}
.eng-reviews__rating .stars {
  display: flex; gap: 4px; justify-content: center;
  font-size: 1.4rem;
  color: oklch(0.85 0.14 80);
  letter-spacing: 0.08em;
  margin-bottom: var(--s-3);
}
.eng-reviews__sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.4vw + 0.5rem, 1.5rem);
  color: rgba(239,233,221,0.8);
  max-width: 44ch;
  line-height: 1.5;
}
.eng-reviews__quote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2.2rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 36ch;
  color: var(--c-on-dark);
  border-top: 1px solid rgba(239,233,221,0.18);
  border-bottom: 1px solid rgba(239,233,221,0.18);
  padding-block: var(--s-6);
  margin-block: var(--s-5);
}
.eng-reviews__quote::before {
  content: "“";
  display: block;
  font-size: 3em; line-height: 0.5;
  color: oklch(0.78 0.08 30);
  margin-bottom: 0.1em;
}
.eng-reviews__cite {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(239,233,221,0.55);
  font-weight: 500;
  margin-top: -var(--s-3);
}
.eng-reviews .btn.btn--on-dark:hover { background: var(--c-on-dark); color: var(--c-bg-dark); }

/* FAQ — reuses .pkg-group--collapsible. Just a small override so the
   numbering doesn't read as a Roman chapter (use 01-15 format). */
.eng-faq__list .pkg-group__roman {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--c-accent);
}

/* Closing CTA */
.eng-close { text-align: center; }
.eng-close__display {
  font-family: var(--f-display);
  font-size: clamp(3rem, 7vw + 0.5rem, 8rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin-bottom: var(--s-5);
}
.eng-close__display em { font-style: italic; color: var(--c-accent); }
.eng-close__sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  max-width: 48ch;
  margin: 0 auto var(--s-7);
  line-height: 1.5;
}
.eng-close__cta {
  display: inline-flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center;
}
.eng-close__note {
  display: block;
  margin-top: var(--s-6);
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}

/* ============================================================
   CONTACT PAGE — calm, editorial "begin here" layout.
   Namespaced under .ct-* so it can't collide.
   ============================================================ */

/* Hero — same shape as engagements hero but quieter, less ceremonial */
.ct-hero {
  position: relative;
  min-height: 78vh;
  display: flex; align-items: flex-end;
  color: var(--c-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.ct-hero__media { position: absolute; inset: 0; z-index: -2; }
.ct-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
}
.ct-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,12,0.42) 0%, rgba(20,16,12,0.05) 35%, rgba(20,16,12,0.05) 55%, rgba(20,16,12,0.6) 100%);
}
.ct-hero__inner {
  width: 100%;
  padding-block: clamp(140px, 22vh, 220px) clamp(60px, 10vh, 100px);
}
.ct-hero__script {
  display: block;
  font-family: var(--f-script);
  font-style: normal;
  font-weight: 400;
  color: oklch(0.88 0.04 50);
  font-size: clamp(2.5rem, 4vw + 0.5rem, 4.5rem);
  line-height: 1;
  margin-bottom: var(--s-3);
  letter-spacing: 0;
}
.ct-hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 5.4vw + 0.5rem, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #fff;
  font-weight: 400;
  max-width: 16ch;
}
.ct-hero__title em { font-style: italic; }
.ct-hero__sub {
  margin-top: var(--s-6);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.4vw + 0.5rem, 1.5rem);
  color: rgba(255,255,255,0.92);
  max-width: 46ch;
  line-height: 1.5;
}

/* Emotional intro under hero */
.ct-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.ct-intro__eyebrow {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.3rem, 1.6vw + 0.5rem, 1.9rem);
  color: var(--c-accent);
  line-height: 1.2;
  max-width: 22ch;
}
.ct-intro__display {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 4vw + 0.5rem, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin-bottom: var(--s-5);
}
.ct-intro__display em { font-style: italic; color: var(--c-accent); }
.ct-intro__body p {
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--c-ink-soft);
  margin-bottom: var(--s-4);
  font-weight: 300;
  max-width: 52ch;
}
.ct-intro__body p:first-of-type {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-ink);
}
@media (max-width: 880px) { .ct-intro { grid-template-columns: 1fr; } }

/* Main contact body — asymmetric form-left / details-right */
.ct-main {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.ct-form {
  background: var(--c-paper);
  padding: clamp(36px, 4vw, 64px);
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: var(--s-6);
}
.ct-form__header h2 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 2.6vw + 0.5rem, 3.2rem);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin-bottom: var(--s-3);
}
.ct-form__header h2 em { font-style: italic; color: var(--c-accent); }
.ct-form__header p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
  max-width: 44ch;
}
.ct-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
}
.ct-form__grid .field--full { grid-column: 1 / -1; }
.ct-form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-5);
}
.ct-form__small {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--c-muted);
  max-width: 40ch;
}
.ct-form__status {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-accent);
  min-height: 1.5em;
}
@media (max-width: 880px) {
  .ct-main { grid-template-columns: 1fr; }
  .ct-form__grid { grid-template-columns: 1fr; }
}

/* Side panel: contact details + book a call */
.ct-side {
  display: grid;
  gap: var(--s-6);
}
.ct-side__block {
  display: grid;
  gap: var(--s-4);
}
.ct-side__block h3 {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.ct-side__primary {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.6rem, 1.8vw + 0.5rem, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.ct-side__primary a { text-decoration: none; color: inherit; }
.ct-side__primary a:hover { color: var(--c-accent); }
.ct-side__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-3);
}
.ct-side__list a {
  font-family: var(--f-serif);
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--c-ink);
  display: inline-flex; align-items: center; gap: var(--s-3);
  transition: color var(--t-fast) var(--ease);
}
.ct-side__list a:hover { color: var(--c-accent); }
.ct-side__list a::before {
  content: ""; display: inline-block;
  width: 18px; height: 1px;
  background: var(--c-line);
  transition: width var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.ct-side__list a:hover::before {
  width: 32px; background: var(--c-accent);
}
.ct-side__socials {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
}
.ct-side__socials a {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  color: var(--c-ink-soft);
  padding: 8px 16px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ct-side__socials a:hover { color: var(--c-accent); border-color: var(--c-accent); }

.ct-side__call {
  background: var(--c-bg-dark);
  color: var(--c-on-dark);
  padding: clamp(28px, 2.6vw, 40px);
  display: grid; gap: var(--s-3);
  min-width: 0;
}
.ct-side__call .label {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(239,233,221,0.55);
  font-weight: 500;
}
.ct-side__call h4 {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.4rem, 1.6vw + 0.5rem, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--c-on-dark);
}
.ct-side__call h4 em { font-style: italic; color: oklch(0.78 0.08 30); }
.ct-side__call p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1rem;
  color: rgba(239,233,221,0.78);
  line-height: 1.5;
}
.ct-side__call .btn {
  justify-self: stretch;
  min-height: 54px;
  padding-inline: 20px;
  white-space: nowrap;
  text-align: center;
}
.ct-side__call .btn--on-dark:hover { background: var(--c-on-dark); color: var(--c-bg-dark); }

/* "What happens next" expectations row */
.ct-expect {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3vw, 56px);
}
.ct-expect__step {
  display: grid; gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.ct-expect__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--c-accent);
  line-height: 1;
}
.ct-expect__title {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 1.4vw + 0.4rem, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.ct-expect__title em { font-style: italic; color: var(--c-accent); }
.ct-expect__body {
  font-family: var(--f-sans);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
  font-weight: 300;
}
@media (max-width: 880px) { .ct-expect { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ct-expect { grid-template-columns: 1fr; } }

/* Layered image moment that crosses sections */
.ct-image-moment {
  position: relative;
  margin-block: clamp(-60px, -6vw, -40px) 0;
  z-index: 2;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 36px);
  pointer-events: none;
}
.ct-image-moment figure {
  grid-column: 7 / span 5;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  pointer-events: auto;
}
.ct-image-moment img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) { .ct-image-moment { display: none; } }

/* Closing — quiet warm sign-off */
.ct-close { text-align: center; }
.ct-close__script {
  display: block;
  font-family: var(--f-script);
  color: var(--c-accent);
  font-size: clamp(3rem, 5vw + 0.5rem, 5.5rem);
  line-height: 1;
  margin-bottom: var(--s-4);
}
.ct-close__display {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw + 0.5rem, 5.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--s-5);
  font-weight: 400;
}
.ct-close__display em { font-style: italic; color: var(--c-accent); }
.ct-close__sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  max-width: 48ch;
  margin: 0 auto;
  line-height: 1.5;
}
.ct-close__signature {
  display: block;
  margin-top: var(--s-6);
  font-family: var(--f-script);
  font-size: clamp(1.8rem, 2.2vw + 0.5rem, 2.6rem);
  color: var(--c-accent);
  line-height: 1;
}
.ct-close__signature-meta {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}

/* ============================================================
   SANTA BARBARA ELOPEMENT — landing page.
   Goal: convert. Premium brand fidelity, but inquiry CTA must
   always be a few seconds away. Namespaced under .sb-*.
   ============================================================ */

/* Hero — full-bleed, single image, strong title + dual-CTA */
.sb-hero {
  position: relative;
  min-height: 96vh;
  display: flex; align-items: flex-end;
  color: var(--c-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.sb-hero__media { position: absolute; inset: 0; z-index: -2; }
.sb-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
}
.sb-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,12,0.42) 0%, rgba(20,16,12,0.08) 30%, rgba(20,16,12,0.10) 55%, rgba(20,16,12,0.7) 100%);
}
.sb-hero__inner {
  width: 100%;
  padding-block: clamp(140px, 22vh, 220px) clamp(60px, 10vh, 100px);
}
.sb-hero__overline {
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.4em;
  margin-bottom: clamp(30px, 5vh, 50px);
}
.sb-hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5.2vw + 0.5rem, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #fff;
  font-weight: 400;
  max-width: 16ch;
}
.sb-hero__title em { font-style: italic; }
.sb-hero__sub {
  margin-top: var(--s-5);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.4vw + 0.5rem, 1.55rem);
  color: rgba(255,255,255,0.92);
  max-width: 42ch;
  line-height: 1.5;
}
.sb-hero__cta {
  margin-top: var(--s-6);
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  align-items: center;
}
.sb-hero__trust {
  margin-top: var(--s-5);
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.sb-hero__trust .stars {
  color: oklch(0.85 0.14 80);
  letter-spacing: 0.12em;
}
.sb-hero__trust .sep { opacity: 0.4; }

/* Quick-scan value strip — sits right under hero, no scroll past it */
.sb-scan {
  background: var(--c-bg-soft);
  padding-block: clamp(28px, 3vw, 44px);
  border-bottom: 1px solid var(--c-line);
}
.sb-scan__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 56px);
  text-align: center;
}
.sb-scan__item {
  display: grid; gap: var(--s-1);
}
.sb-scan__item strong {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.4rem, 1.4vw + 0.5rem, 1.85rem);
  color: var(--c-ink);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.sb-scan__item span {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
@media (max-width: 720px) {
  .sb-scan__row { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* Why Santa Barbara — emotional positioning, two columns */
.sb-positioning {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.sb-positioning__eyebrow {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.3rem, 1.6vw + 0.5rem, 1.9rem);
  color: var(--c-accent);
  line-height: 1.2;
  max-width: 22ch;
}
.sb-positioning__display {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 4vw + 0.5rem, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin-bottom: var(--s-5);
}
.sb-positioning__display em { font-style: italic; color: var(--c-accent); }
.sb-positioning__body p {
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--c-ink-soft);
  margin-bottom: var(--s-4);
  font-weight: 300;
  max-width: 52ch;
}
.sb-positioning__body p:first-of-type {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-ink);
}
@media (max-width: 880px) { .sb-positioning { grid-template-columns: 1fr; } }

/* Editorial gallery moment — broken grid, 6 images */
.sb-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.sb-gallery figure {
  margin: 0;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.sb-gallery img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.sb-gallery figure:hover img { transform: scale(1.04); }
.sb-gallery figure:nth-child(1) { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.sb-gallery figure:nth-child(2) { grid-column: 7 / span 6; aspect-ratio: 5 / 4; margin-top: clamp(40px, 6vw, 80px); }
.sb-gallery figure:nth-child(3) { grid-column: 2 / span 4; aspect-ratio: 3 / 4; }
.sb-gallery figure:nth-child(4) { grid-column: 7 / span 5; aspect-ratio: 4 / 5; margin-top: clamp(-60px, -5vw, -30px); }
.sb-gallery figure:nth-child(5) { grid-column: 1 / span 5; aspect-ratio: 5 / 4; }
.sb-gallery figure:nth-child(6) { grid-column: 7 / span 6; aspect-ratio: 4 / 5; margin-top: clamp(40px, 6vw, 80px); }
@media (max-width: 880px) {
  .sb-gallery { grid-template-columns: 1fr 1fr; }
  .sb-gallery figure:nth-child(n) { grid-column: span 1; margin-top: 0; aspect-ratio: 4 / 5; }
}

/* OFFER CARDS — Photography $900 / Photo+Video $1,600 */
.sb-offers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}
.sb-offer {
  position: relative;
  background: var(--c-paper);
  padding: clamp(32px, 3vw, 52px);
  border-top: 1px solid var(--c-line);
  display: flex; flex-direction: column;
  gap: var(--s-4);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.sb-offer:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px -36px rgba(20,16,12,0.22);
}
.sb-offer__roman {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--c-accent);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.sb-offer__name {
  font-family: var(--f-display);
  font-size: clamp(1.85rem, 2.2vw + 0.5rem, 2.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.sb-offer__name em { font-style: italic; color: var(--c-accent); }
.sb-offer__meta {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding-block: var(--s-3);
  margin-block: var(--s-2);
  display: flex; gap: var(--s-3);
  align-items: baseline; flex-wrap: wrap;
}
.sb-offer__meta strong {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: 1.5em; color: var(--c-ink); letter-spacing: -0.01em;
}
.sb-offer__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-3);
  flex: 1;
}
.sb-offer__list li {
  position: relative;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  padding-left: 22px;
  font-weight: 300;
}
.sb-offer__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.7em;
  width: 12px; height: 1px;
  background: var(--c-accent);
}
.sb-offer__list li strong {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  font-size: 1.05em;
}
.sb-offer__note {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-muted);
  line-height: 1.55;
  border-top: 1px dashed var(--c-line);
  padding-top: var(--s-3);
}
.sb-offer__price {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-4);
  margin-top: var(--s-2);
}
.sb-offer__price-label {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.sb-offer__price-value {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 2.4vw + 0.5rem, 3.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.sb-offer__cta { margin-top: var(--s-3); align-self: stretch; text-align: center; }

/* Make the second card visually warmer (photo+video) */
.sb-offer--combined {
  background: var(--c-bg-dark);
  color: var(--c-on-dark);
  border-top: 1px solid var(--c-accent);
}
.sb-offer--combined .sb-offer__name,
.sb-offer--combined .sb-offer__meta strong,
.sb-offer--combined .sb-offer__price-value,
.sb-offer--combined .sb-offer__list li strong { color: var(--c-on-dark); }
.sb-offer--combined .sb-offer__roman { color: oklch(0.78 0.08 30); }
.sb-offer--combined .sb-offer__name em { color: oklch(0.78 0.08 30); }
.sb-offer--combined .sb-offer__list li { color: rgba(239,233,221,0.85); }
.sb-offer--combined .sb-offer__list li::before { background: oklch(0.78 0.08 30); }
.sb-offer--combined .sb-offer__meta,
.sb-offer--combined .sb-offer__price {
  border-color: rgba(239,233,221,0.18); color: rgba(239,233,221,0.6);
}
.sb-offer--combined .sb-offer__note {
  border-top-color: rgba(239,233,221,0.2);
  color: rgba(239,233,221,0.72);
}
.sb-offer--combined .sb-offer__price-label { color: rgba(239,233,221,0.55); }
.sb-offer--combined .btn { color: var(--c-on-dark); border-color: var(--c-on-dark); }
.sb-offer--combined .btn.btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-paper); }
.sb-offer--combined .btn.btn--primary:hover { background: var(--c-accent-deep); border-color: var(--c-accent-deep); }

@media (max-width: 880px) {
  .sb-offers { grid-template-columns: 1fr; }
}

/* "Hi, we are Kate & Mikhail" — small trust block */
.sb-team {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.sb-team__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.sb-team__media img { width: 100%; height: 100%; object-fit: cover; }
.sb-team__greeting {
  font-family: var(--f-script);
  color: var(--c-accent);
  font-size: clamp(2rem, 2.6vw + 0.5rem, 3rem);
  line-height: 1;
  margin-bottom: var(--s-3);
}
.sb-team__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3vw + 0.5rem, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-5);
}
.sb-team__title em { font-style: italic; color: var(--c-accent); }
.sb-team__body p {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--c-ink-soft);
  margin-bottom: var(--s-4);
  max-width: 52ch;
}
@media (max-width: 880px) { .sb-team { grid-template-columns: 1fr; } }

/* "Why couples choose this experience" — quick reassurance row */
.sb-why {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3vw, 56px);
}
.sb-why__item {
  display: grid; gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.sb-why__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--c-accent);
  line-height: 1;
}
.sb-why__title {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 1.4vw + 0.4rem, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.sb-why__title em { font-style: italic; color: var(--c-accent); }
.sb-why__body {
  font-family: var(--f-sans);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
  font-weight: 300;
}
@media (max-width: 880px) { .sb-why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .sb-why { grid-template-columns: 1fr; } }

/* Featured testimonial — big pull quote, the Bernadette & Daniel one */
.sb-featured-quote {
  text-align: center;
  max-width: 920px;
  margin-inline: auto;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.7rem, 2vw + 0.5rem, 2.6rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.sb-featured-quote::before {
  content: "“";
  display: block;
  font-size: 4em; line-height: 0.5;
  color: var(--c-accent);
  margin-bottom: 0.1em;
}
.sb-featured-quote em { font-style: italic; color: var(--c-accent); font-weight: 400; }
.sb-featured-quote__cite {
  display: block;
  margin-top: var(--s-6);
  font-family: var(--f-sans);
  font-style: normal;
  font-size: var(--fs-overline);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}

/* Reviews grid + Google rating */
.sb-reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}
.sb-review {
  background: var(--c-paper);
  padding: clamp(28px, 2.6vw, 40px);
  border-top: 1px solid var(--c-line);
  display: grid; gap: var(--s-3);
}
.sb-review__stars {
  color: oklch(0.78 0.14 75);
  letter-spacing: 0.16em;
  font-size: 0.95rem;
}
.sb-review__quote {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--c-ink);
}
.sb-review__name {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-3);
  margin-top: var(--s-3);
}
@media (max-width: 880px) { .sb-reviews { grid-template-columns: 1fr; } }

.sb-google {
  margin-top: clamp(40px, 5vw, 64px);
  text-align: center;
  display: grid; gap: var(--s-3);
  justify-items: center;
}
.sb-google__rating {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(2.4rem, 3vw + 0.5rem, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.sb-google__sub {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}

/* Inquiry form — premium, conversion-focused */
.sb-inquiry {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.sb-inquiry__intro h2 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 3.5vw + 0.5rem, 4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: var(--s-5);
  font-weight: 400;
}
.sb-inquiry__intro h2 em { font-style: italic; color: var(--c-accent); }
.sb-inquiry__intro p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  line-height: 1.5;
  max-width: 40ch;
  margin-bottom: var(--s-5);
}
.sb-inquiry__intro .ct-side__list {
  /* reuse contact-page list styling for the inline contact tray */
}
.sb-inquiry__form {
  background: var(--c-paper);
  padding: clamp(28px, 4vw, 56px);
  display: grid; gap: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.sb-inquiry__form .field input,
.sb-inquiry__form .field select,
.sb-inquiry__form .field textarea {
  /* inherit .field from existing system */
}
@media (max-width: 880px) { .sb-inquiry { grid-template-columns: 1fr; } }

/* Closing — warm sign-off, mirrors contact-page tone */
.sb-close { text-align: center; }
.sb-close__display {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw + 0.5rem, 5.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--s-5);
  font-weight: 400;
}
.sb-close__display em { font-style: italic; color: var(--c-accent); }
.sb-close__sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  max-width: 48ch;
  margin: 0 auto var(--s-7);
  line-height: 1.5;
}

/* ---- Santa Barbara editorial swipe gallery -----------------
   A premium horizontal scroll-snap strip used as a visual-proof
   moment lower on the page. Reuses the existing .gallery JS
   shim (data-component="gallery") for drag/arrows/progress,
   but with its own .sb-strip skin so it doesn't inherit the
   homepage's hover/border/caption defaults.
   ----------------------------------------------------------- */
.sb-strip { position: relative; }
.sb-strip__track {
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--s-4);
  padding-inline: var(--container-pad);
  scrollbar-width: none;
  cursor: grab;
}
.sb-strip__track::-webkit-scrollbar { display: none; }
.sb-strip__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }

.sb-strip__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  background: var(--c-bg-soft);
  margin: 0;
}
.sb-strip__item--portrait  { width: clamp(260px, 28vw, 380px); height: clamp(360px, 38vw, 540px); }
.sb-strip__item--landscape { width: clamp(380px, 42vw, 560px); height: clamp(280px, 30vw, 400px); }
.sb-strip__item--square    { width: clamp(280px, 32vw, 440px); height: clamp(280px, 32vw, 440px); }
.sb-strip__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
  pointer-events: none;
}
.sb-strip__item:hover img { transform: scale(1.04); }

.sb-strip__item figcaption {
  position: absolute; left: var(--s-5); bottom: var(--s-5);
  font-family: var(--f-serif); font-style: italic;
  font-size: 0.95rem;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.sb-strip__item:hover figcaption { opacity: 1; transform: translateY(0); }

/* Controls row — reuses .gallery__btn / .gallery__progress styles but with
   our own padding context so it feels native to the section. */
.sb-strip__controls {
  display: flex; gap: var(--s-4);
  margin-top: var(--s-6);
  padding-inline: var(--container-pad);
  align-items: center;
}
.sb-strip__progress {
  margin-left: auto;
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.sb-strip__progress-bar {
  display: inline-block;
  width: clamp(80px, 12vw, 160px);
  height: 1px;
  margin-left: var(--s-3);
  background: var(--c-line);
  position: relative;
  vertical-align: middle;
}
.sb-strip__progress-bar::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: var(--progress, 0%); height: 100%;
  background: var(--c-accent);
  transition: width var(--t-med) var(--ease);
}

/* ---- Layered triptych — a second editorial visual proof moment.
   Three photos at varied sizes, asymmetric, sitting on a quiet
   warm-cream band. Not a slider, not a standard grid — composed.
   --------------------------------------------------------------- */
.sb-triptych {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: end;
}
.sb-triptych figure {
  margin: 0; overflow: hidden;
  background: var(--c-bg-soft);
  position: relative;
}
.sb-triptych img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.sb-triptych figure:hover img { transform: scale(1.03); }
.sb-triptych figure:nth-child(1) { grid-column: 1 / span 4; aspect-ratio: 3 / 4; margin-bottom: clamp(40px, 6vw, 80px); }
.sb-triptych figure:nth-child(2) { grid-column: 5 / span 5; aspect-ratio: 4 / 5; margin-top: clamp(-60px, -5vw, -30px); }
.sb-triptych figure:nth-child(3) { grid-column: 10 / span 3; aspect-ratio: 3 / 4; margin-bottom: clamp(80px, 10vw, 120px); }
.sb-triptych__caption {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: var(--s-5);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1rem, 1vw + 0.4rem, 1.25rem);
  color: var(--c-muted);
  letter-spacing: 0.04em;
}
@media (max-width: 880px) {
  .sb-triptych { grid-template-columns: 1fr 1fr; gap: 16px; }
  .sb-triptych figure:nth-child(n) { grid-column: span 1; margin: 0; aspect-ratio: 4 / 5; }
  .sb-triptych figure:nth-child(2) { grid-column: 1 / -1; aspect-ratio: 5 / 4; }
}

/* ---- Dark reviews block (Santa Barbara) — same impact treatment
   as the Engagements page, scoped under .sb-reviews-dark so it
   doesn't override the original .sb-reviews helpers above. ----- */
.sb-reviews-dark {
  background: var(--c-bg-dark);
  color: var(--c-on-dark);
  padding-block: clamp(80px, 12vw, 160px);
  position: relative;
  isolation: isolate;
  text-align: center;
}
.sb-reviews-dark .container { display: grid; gap: var(--s-6); justify-items: center; }
.sb-reviews-dark__rating {
  font-family: var(--f-display);
  font-size: clamp(4rem, 8vw + 0.5rem, 8rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--c-on-dark);
}
.sb-reviews-dark__rating .stars {
  display: flex; gap: 4px; justify-content: center;
  font-size: 1.4rem;
  color: oklch(0.85 0.14 80);
  letter-spacing: 0.08em;
  margin-bottom: var(--s-3);
}
.sb-reviews-dark__sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.4vw + 0.5rem, 1.5rem);
  color: rgba(239,233,221,0.8);
  max-width: 44ch;
  line-height: 1.5;
}
.sb-reviews-dark__quote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2.2rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 36ch;
  color: var(--c-on-dark);
  border-top: 1px solid rgba(239,233,221,0.18);
  border-bottom: 1px solid rgba(239,233,221,0.18);
  padding-block: var(--s-6);
  margin-block: var(--s-5);
}
.sb-reviews-dark__quote::before {
  content: "\201C";
  display: block;
  font-size: 3em; line-height: 0.5;
  color: oklch(0.78 0.08 30);
  margin-bottom: 0.1em;
}
.sb-reviews-dark__cite {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(239,233,221,0.55);
  font-weight: 500;
}
.sb-reviews-dark__cta {
  margin-top: clamp(28px, 4vw, 56px);
}

/* ============================================================
   ABOUT PAGE — studio portrait, editorial, scalable.
   Namespaced .ab-* so it doesn't collide with the homepage's
   inline .about block.
   ============================================================ */

/* Hero — quieter than ad heroes; one strong image, restrained */
.ab-hero {
  position: relative;
  min-height: 82vh;
  display: flex; align-items: flex-end;
  color: var(--c-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.ab-hero__media { position: absolute; inset: 0; z-index: -2; }
.ab-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
}
.ab-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,12,0.42) 0%, rgba(20,16,12,0.05) 35%, rgba(20,16,12,0.05) 55%, rgba(20,16,12,0.65) 100%);
}
.ab-hero__inner {
  width: 100%;
  padding-block: clamp(140px, 22vh, 220px) clamp(60px, 10vh, 100px);
}
.ab-hero__overline {
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.4em;
  margin-bottom: clamp(40px, 6vh, 70px);
}
.ab-hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw + 0.5rem, 6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: #fff;
  font-weight: 400;
  max-width: 18ch;
}
.ab-hero__title em { font-style: italic; }
.ab-hero__sub {
  margin-top: var(--s-6);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.4vw + 0.5rem, 1.5rem);
  color: rgba(255,255,255,0.92);
  max-width: 46ch;
  line-height: 1.5;
}

/* MAIN INTRO — long-form studio narrative.
   Asymmetric: a tall portrait left, generous editorial prose right.
   The headline pulls leftward into the image area, same Showit
   move as the homepage About. */
.ab-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  position: relative;
}
.ab-intro__media {
  position: relative;
  align-self: start;
  margin-top: clamp(-60px, -6vw, -100px);
  z-index: 1;
}
.ab-intro__media .figure {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.ab-intro__media .figure img {
  width: 100%; height: 100%; object-fit: cover;
}
.ab-intro__media .figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, transparent 45%,
    rgba(239, 233, 221, 0.30) 70%,
    rgba(239, 233, 221, 0.80) 92%,
    var(--c-bg) 100%);
  pointer-events: none;
}
.ab-intro__text {
  position: relative;
  z-index: 3;
  padding-top: clamp(40px, 8vw, 120px);
}
.ab-intro__eyebrow {
  display: block;
  margin-bottom: clamp(36px, 5vh, 56px);
}
.ab-intro__display {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw + 0.5rem, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: var(--s-7);
  font-weight: 400;
  margin-left: clamp(-22vw, -16vw, -12vw);
  mix-blend-mode: multiply;
  color: var(--c-ink);
}
.ab-intro__display em { font-style: italic; color: var(--c-accent); }
.ab-intro__body {
  display: grid; gap: var(--s-5);
  max-width: 56ch;
}
.ab-intro__body p {
  font-size: var(--fs-lede);
  line-height: 1.7;
  color: var(--c-ink-soft);
  font-weight: 300;
  margin: 0;
}
.ab-intro__body p:first-of-type {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-ink);
  font-size: clamp(1.2rem, 1.4vw + 0.4rem, 1.55rem);
}
.ab-intro__triad {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.ab-intro__triad span {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.2vw + 0.4rem, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.ab-intro__triad span em { font-style: normal; color: var(--c-accent); font-weight: 400; }
.ab-intro__facts {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-5);
}
.ab-intro__facts dt {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--s-2);
  font-weight: 500;
}
.ab-intro__facts dd {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}
@media (max-width: 880px) {
  .ab-intro { grid-template-columns: 1fr; }
  .ab-intro__media { margin-top: 0; }
  .ab-intro__media .figure::after { display: none; }
  .ab-intro__text { padding-top: var(--s-6); }
  .ab-intro__display { margin-left: 0; mix-blend-mode: normal; }
  .ab-intro__triad, .ab-intro__facts { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* FOUNDERS — short, anchored to a single portrait + caption */
.ab-founders {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.ab-founders__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.ab-founders__media img { width: 100%; height: 100%; object-fit: cover; }
.ab-founders__greeting {
  font-family: var(--f-script);
  color: var(--c-accent);
  font-size: clamp(2.4rem, 3vw + 0.5rem, 3.6rem);
  line-height: 1;
  margin-bottom: var(--s-3);
}
.ab-founders__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3vw + 0.5rem, 3.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin-bottom: var(--s-5);
}
.ab-founders__title em { font-style: italic; color: var(--c-accent); }
.ab-founders__body p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 48ch;
}
.ab-founders__role {
  margin-top: var(--s-5);
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
@media (max-width: 880px) { .ab-founders { grid-template-columns: 1fr; } }

/* STUDIO STANDARD STATEMENT — big pull-quote moment, cream */
.ab-statement {
  text-align: center;
  max-width: 980px;
  margin-inline: auto;
}
.ab-statement__overline {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  margin-bottom: var(--s-5);
}
.ab-statement__quote {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw + 0.5rem, 5.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--c-ink);
}
.ab-statement__quote em { font-style: italic; color: var(--c-accent); }
.ab-statement__sub {
  margin-top: var(--s-6);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1vw + 0.5rem, 1.4rem);
  color: var(--c-muted);
  max-width: 44ch;
  margin-inline: auto;
  line-height: 1.5;
}

/* TEAM — compact, scalable grid (auto-fit) of small monogram cards.
   Designed for 12, 30, 60 people — no rewrites required.
   Default: just monogram + name + role tag. Note appears on hover/focus. */
.ab-team__head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: 760px;
}
.ab-team__intro {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  line-height: 1.55;
  max-width: 56ch;
}

/* Group labels — "Founders", "Photography & Film", "Post-production" — so
   that a large team still reads as a few legible groups, not a wall. */
.ab-team__group + .ab-team__group { margin-top: clamp(40px, 5vw, 64px); }
.ab-team__group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.ab-team__group-title {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.2vw + 0.4rem, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  font-weight: 400;
}
.ab-team__group-meta {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}

.ab-team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 150px));
  justify-content: start;
  gap: clamp(10px, 1vw, 16px);
}

/* Compact photo card — portrait image, name + role below, note on hover. */
.ab-member {
  position: relative;
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  display: grid;
  grid-template-rows: auto auto;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease);
}
.ab-member:hover { transform: translateY(-4px); }
.ab-member__photo {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.ab-member__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  transition: transform 1.2s var(--ease-out), filter var(--t-med) var(--ease);
}
.ab-member:hover .ab-member__photo img { transform: scale(1.05); }
.ab-member__initials { display: none; }
.ab-member__cap {
  padding: clamp(10px, 0.9vw, 14px) clamp(10px, 0.9vw, 14px) clamp(12px, 1vw, 16px);
  display: grid; gap: 3px;
}
.ab-member__name {
  font-family: var(--f-display);
  font-size: clamp(0.95rem, 0.5vw + 0.55rem, 1.15rem);
  line-height: 1; letter-spacing: -0.015em; font-weight: 400; margin: 0;
}
.ab-member__role {
  font-family: var(--f-sans); font-size: 0.56rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--c-muted); font-weight: 500;
  border: none; padding: 0; margin: 0; line-height: 1.4;
}
/* Note slides up over the photo on hover/focus */
.ab-member__note {
  position: absolute; inset: 0;
  padding: clamp(16px, 1.5vw, 24px);
  background: linear-gradient(180deg, rgba(26,24,20,0) 0%, rgba(26,24,20,0.55) 45%, rgba(26,24,20,0.92) 100%);
  color: var(--c-on-dark);
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(0.9rem, 0.5vw + 0.75rem, 1.02rem); line-height: 1.5;
  display: flex; align-items: flex-end;
  opacity: 0; transition: opacity var(--t-med) var(--ease);
  margin: 0; pointer-events: none;
}
.ab-member:hover .ab-member__note,
.ab-member:focus-within .ab-member__note { opacity: 1; }

/* Founder cards — accent ring on the photo + dark caption */
.ab-member--founder { background: var(--c-bg-dark); border-top-color: var(--c-accent); }
.ab-member--founder .ab-member__name { color: var(--c-on-dark); }
.ab-member--founder .ab-member__role { color: oklch(0.78 0.08 30); }

@media (max-width: 540px) {
  .ab-team__grid { grid-template-columns: repeat(3, 1fr); }
}.ab-team__summary {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.ab-team__summary em {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--c-ink);
}

@media (max-width: 540px) {
  .ab-team__grid { grid-template-columns: repeat(2, 1fr); }
  .ab-member__note { font-size: 0.85rem; }
}

/* Closing CTA */
.ab-close { text-align: center; }
.ab-close__display {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw + 0.5rem, 5.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--s-5);
  font-weight: 400;
}
.ab-close__display em { font-style: italic; color: var(--c-accent); }
.ab-close__sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  max-width: 48ch;
  margin: 0 auto var(--s-7);
  line-height: 1.5;
}
.ab-close__cta {
  display: inline-flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center;
}

/* ============================================================
   FAQ PAGE — calm, minimal editorial.
   Grouped accordions reusing the existing .pkg-group--collapsible
   system; namespaced wrappers under .fq-* for spacing only.
   ============================================================ */
.fq-hero {
  position: relative;
  padding-block: clamp(180px, 26vh, 260px) clamp(60px, 9vw, 110px);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  text-align: center;
}
.fq-hero__overline {
  color: var(--c-muted);
  letter-spacing: 0.4em;
  margin-bottom: clamp(28px, 4vh, 48px);
  display: inline-block;
}
.fq-hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 5.4vw + 0.5rem, 6.25rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 400;
  margin: 0 auto;
  max-width: 16ch;
}
.fq-hero__title em { font-style: italic; color: var(--c-accent); }
.fq-hero__sub {
  margin: var(--s-5) auto 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.2vw + 0.5rem, 1.45rem);
  color: var(--c-ink-soft);
  max-width: 48ch;
  line-height: 1.55;
}

/* Anchor jump-nav — section index */
.fq-jump {
  position: sticky; top: 0; z-index: 30;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
.fq-jump__row {
  display: flex; justify-content: center;
  gap: clamp(16px, 2.4vw, 40px);
  padding-block: var(--s-4);
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-muted);
  flex-wrap: wrap;
}
.fq-jump__row a { text-decoration: none; color: inherit; padding: 6px 0; transition: color var(--t-fast) var(--ease); }
.fq-jump__row a:hover { color: var(--c-ink); }
.fq-jump__sep { opacity: 0.4; }

/* FAQ section bodies — quiet group headers, then collapsible rows */
.fq-section { padding-block: clamp(60px, 8vw, 110px); }
.fq-section__head {
  display: grid; gap: var(--s-3);
  margin-bottom: clamp(36px, 5vw, 64px);
  max-width: 760px;
}
.fq-section__roman {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--c-accent);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.fq-section__title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2vw + 0.4rem, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.fq-section__title em { font-style: italic; color: var(--c-accent); }
.fq-section__lede {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--c-ink-soft);
  line-height: 1.5;
  max-width: 56ch;
}

/* Override the inherited .pkg-group--collapsible default spacing so
   FAQ rows feel tighter and more uniform. */
.fq-list details.pkg-group--collapsible { margin-bottom: clamp(10px, 1vw, 14px); }
.fq-list details.pkg-group--collapsible summary.pkg-group__head { padding-block: clamp(18px, 2vw, 26px); }
.fq-list .pkg-group__title { font-size: clamp(1.15rem, 1.2vw + 0.3rem, 1.4rem); }

/* Closing CTA strip */
.fq-close { text-align: center; }
.fq-close__display {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 4vw + 0.5rem, 4.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: var(--s-5);
  font-weight: 400;
}
.fq-close__display em { font-style: italic; color: var(--c-accent); }
.fq-close__sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  max-width: 48ch;
  margin: 0 auto var(--s-6);
  line-height: 1.55;
}

/* ============================================================
   ARCHIVE / STORIES PAGE — scalable wedding-story collection.
   Built around a single repeatable .arc-card unit so the page
   can grow over time without redesign. Namespaced .arc-*.
   ============================================================ */
.arc-hero {
  position: relative;
  padding-block: clamp(180px, 24vh, 240px) clamp(60px, 8vw, 100px);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  text-align: center;
}
.arc-hero__overline {
  color: var(--c-muted);
  letter-spacing: 0.4em;
  margin-bottom: clamp(28px, 4vh, 48px);
  display: inline-block;
}
.arc-hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.75rem, 5.4vw + 0.5rem, 6.25rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 400;
  margin: 0 auto;
  max-width: 16ch;
}
.arc-hero__title em { font-style: italic; color: var(--c-accent); }
.arc-hero__sub {
  margin: var(--s-5) auto 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.2vw + 0.5rem, 1.45rem);
  color: var(--c-ink-soft);
  max-width: 52ch;
  line-height: 1.55;
}

/* Quiet meta row — counts the archive */
.arc-meta {
  display: flex; justify-content: center; gap: clamp(20px, 3vw, 56px);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
  flex-wrap: wrap;
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.arc-meta strong {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  text-transform: none;
  margin-right: 6px;
  font-weight: 400;
}

/* FEATURED — the most recent story, oversized */
.arc-featured {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
.arc-featured__media {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.arc-featured__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.arc-featured:hover .arc-featured__media img { transform: scale(1.03); }
.arc-featured__text { padding-bottom: var(--s-5); }
.arc-featured__tag {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 500;
  margin-bottom: var(--s-4);
  display: block;
}
.arc-featured__couple {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 3.4vw + 0.5rem, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin-bottom: var(--s-4);
}
.arc-featured__couple em { font-style: italic; color: var(--c-accent); }
.arc-featured__meta {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  margin-bottom: var(--s-4);
}
.arc-featured__lede {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin-bottom: var(--s-5);
  max-width: 38ch;
}
.arc-featured__cta {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 4px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.arc-featured__cta:hover { color: var(--c-accent); }
.arc-featured__link { text-decoration: none; color: inherit; display: contents; }
@media (max-width: 880px) { .arc-featured { grid-template-columns: 1fr; gap: var(--s-5); } }

/* YEAR GROUPS — quiet section labels so the archive scans
   even with many stories. */
.arc-year {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-5);
  margin-bottom: clamp(28px, 3vw, 48px);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.arc-year__label {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.4rem, 1.6vw + 0.4rem, 2.1rem);
  color: var(--c-ink);
  letter-spacing: -0.01em;
  font-weight: 400;
}
.arc-year__meta {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}

/* GRID — single repeatable card unit, auto-fit, scales to any count */
.arc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.4vw, 44px) clamp(18px, 2vw, 32px);
  margin-bottom: clamp(60px, 7vw, 100px);
}

/* The card — couple + location + date + cover */
.arc-card {
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: var(--s-3);
}
.arc-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
  margin-bottom: var(--s-3);
}
.arc-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.5s var(--ease-out);
}
.arc-card:hover .arc-card__media img { transform: scale(1.04); }
/* Top-left "No." overlay for quiet editorial numbering */
.arc-card__num {
  position: absolute; top: var(--s-4); left: var(--s-4);
  z-index: 2;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--c-on-dark);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.arc-card__couple {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1.4vw + 0.4rem, 1.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0;
}
.arc-card__couple em { font-style: italic; color: var(--c-accent); font-weight: 400; }
.arc-card__meta {
  display: flex; gap: var(--s-3);
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  flex-wrap: wrap;
}
.arc-card__meta span + span::before {
  content: "·"; margin-right: var(--s-3); margin-left: -2px;
}
.arc-card__sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--c-ink-soft);
  max-width: 38ch;
}

/* STUDIO NOTE — a quiet inset between year groups */
.arc-note {
  background: var(--c-paper);
  padding: clamp(40px, 5vw, 80px) clamp(28px, 4vw, 64px);
  margin-block: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
  border-top: 1px solid var(--c-line);
}
.arc-note__label {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.arc-note__text {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.3vw + 0.4rem, 1.55rem);
  line-height: 1.5;
  color: var(--c-ink);
}
.arc-note__text em { font-style: italic; color: var(--c-accent); }
.arc-note__text + .arc-note__text { margin-top: var(--s-4); }
@media (max-width: 720px) { .arc-note { grid-template-columns: 1fr; gap: var(--s-3); } }

/* "By location" little tag row */
.arc-locations {
  margin-top: clamp(60px, 7vw, 100px);
  text-align: center;
}
.arc-locations h3 {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.4rem, 1.6vw + 0.4rem, 2rem);
  font-weight: 400;
  margin-bottom: var(--s-5);
}
.arc-locations h3 em { font-style: italic; color: var(--c-accent); }
.arc-locations__row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-2) var(--s-3);
}
.arc-locations__row a {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  color: var(--c-ink-soft);
  padding: 8px 16px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.arc-locations__row a:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* ============================================================
   FILMS PAGE — premium wedding-films collection.
   Namespaced .fl-* so it never collides. Reuses .btn / overlines.
   ============================================================ */

/* HERO — cinematic single-image with a quiet "play reel" cue */
.fl-hero {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: flex-end;
  color: var(--c-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.fl-hero__media { position: absolute; inset: 0; z-index: -2; }
.fl-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 38%;
}
.fl-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,16,12,0.5) 0%, rgba(20,16,12,0.08) 30%, rgba(20,16,12,0.08) 55%, rgba(20,16,12,0.7) 100%);
}
.fl-hero__inner {
  width: 100%;
  padding-block: clamp(140px, 22vh, 220px) clamp(60px, 10vh, 100px);
}
.fl-hero__overline {
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.4em;
  margin-bottom: clamp(40px, 6vh, 70px);
}
.fl-hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5.4vw + 0.5rem, 6.5rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: #fff;
  font-weight: 400;
  max-width: 16ch;
}
.fl-hero__title em { font-style: italic; }
.fl-hero__sub {
  margin-top: var(--s-6);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.4vw + 0.5rem, 1.5rem);
  color: rgba(255,255,255,0.92);
  max-width: 46ch;
  line-height: 1.55;
}

/* FEATURED FILM — the No.1 piece, large 16:9 + meta + reel button.
   Reuses the existing .film component pattern (click play → swap to iframe).
   Padding-block bumped so it visually reads as the page's centerpiece. */
.fl-featured {
  display: grid; gap: clamp(36px, 5vw, 80px);
}
.fl-featured__intro {
  display: grid; gap: var(--s-4);
  max-width: 760px;
}
.fl-featured__intro-tag {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--c-accent);
  font-size: clamp(1.1rem, 1.2vw + 0.4rem, 1.4rem);
  letter-spacing: -0.01em;
}
.fl-featured__intro-title {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 4vw + 0.5rem, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
}
.fl-featured__intro-title em { font-style: italic; color: var(--c-accent); }
.fl-featured__intro-lede {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  line-height: 1.55;
  max-width: 48ch;
}

/* Reuse the homepage .film component, but add a few film-page tweaks */
.film--fl-featured .film__frame { border-radius: 0; }
.film--fl-featured .film__couple { font-size: clamp(1.7rem, 2.6vw + 0.4rem, 2.75rem); }
.film--fl-featured .film__where { font-size: 0.78rem; }

/* SECONDARY FEATURES — two side-by-side strong films (positions 2 & 3) */
.fl-strong {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 56px) clamp(20px, 2.4vw, 40px);
}
.fl-strong .fl-card { width: 100%; }
@media (max-width: 880px) { .fl-strong { grid-template-columns: 1fr; } }

/* APPROACH — a calm editorial inset between film tiers */
.fl-approach {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.fl-approach__eyebrow {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.3rem, 1.6vw + 0.5rem, 1.9rem);
  color: var(--c-accent);
  line-height: 1.2;
  max-width: 24ch;
}
.fl-approach__display {
  font-family: var(--f-display);
  font-size: clamp(2.25rem, 4vw + 0.5rem, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin-bottom: var(--s-5);
}
.fl-approach__display em { font-style: italic; color: var(--c-accent); }
.fl-approach__body {
  display: grid; gap: var(--s-4);
  max-width: 56ch;
}
.fl-approach__body p {
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--c-ink-soft);
  font-weight: 300;
  margin: 0;
}
.fl-approach__body p:first-child {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-ink);
}
@media (max-width: 880px) { .fl-approach { grid-template-columns: 1fr; } }

/* SELECTED FILMS — 3-per-row grid for the next tier */
.fl-selected {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px) clamp(20px, 2.4vw, 36px);
}
@media (max-width: 880px) { .fl-selected { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .fl-selected { grid-template-columns: 1fr; } }

/* FILM CARD — the repeatable unit. Click-to-load iframe (via JS shim). */
.fl-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}
.fl-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d0a07;
  isolation: isolate;
}
.fl-card__frame img,
.fl-card__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; border: 0;
}
.fl-card__frame::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
}
.fl-card__play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: clamp(56px, 6vw, 84px);
  height: clamp(56px, 6vw, 84px);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-med) var(--ease), background var(--t-med) var(--ease);
  cursor: pointer;
}
.fl-card:hover .fl-card__play { transform: translate(-50%, -50%) scale(1.06); background: rgba(255,255,255,0.18); }
.fl-card__play svg { width: clamp(18px, 1.6vw, 24px); height: auto; margin-left: 3px; }
.fl-card__meta {
  position: absolute; left: clamp(16px, 2vw, 28px); right: clamp(16px, 2vw, 28px);
  bottom: clamp(14px, 1.4vw, 22px);
  z-index: 3;
  color: #fff;
  display: flex; justify-content: space-between; align-items: end;
  pointer-events: none;
  font-family: var(--f-display);
  gap: var(--s-3);
}
.fl-card__couple {
  font-size: clamp(1.1rem, 1.4vw + 0.3rem, 1.65rem);
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 400;
}
.fl-card__where {
  font-family: var(--f-sans);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
}
/* Caption row beneath the frame */
.fl-card__caption {
  padding-top: var(--s-3);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3);
}
.fl-card__caption-num {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--c-accent);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}
.fl-card__caption-len {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}

/* When the iframe loads (JS swaps in), kill the gradient + cue */
.fl-card.is-playing .fl-card__play,
.fl-card.is-playing .fl-card__meta { display: none !important; }
.fl-card.is-playing .fl-card__frame::before { opacity: 0; }

/* LIBRARY — tighter 4-column grid for the long tail */
.fl-library {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
}
.fl-library .fl-card__couple { font-size: clamp(0.95rem, 1vw + 0.2rem, 1.2rem); }
.fl-library .fl-card__where { display: none; }
.fl-library .fl-card__play { width: clamp(44px, 4vw, 62px); height: clamp(44px, 4vw, 62px); }
@media (max-width: 1000px) { .fl-library { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .fl-library { grid-template-columns: repeat(2, 1fr); } }

/* PHOTO + FILM BRIDGE — quiet reminder card */
.fl-bridge {
  background: var(--c-paper);
  padding: clamp(40px, 5vw, 80px) clamp(28px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: center;
  border-top: 1px solid var(--c-line);
}
.fl-bridge__title {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 2.4vw + 0.4rem, 2.8rem);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.fl-bridge__title em { font-style: italic; color: var(--c-accent); }
.fl-bridge__body p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 48ch;
  margin-bottom: var(--s-5);
}
.fl-bridge__cta {
  display: inline-flex; gap: var(--s-3); flex-wrap: wrap;
}
@media (max-width: 720px) { .fl-bridge { grid-template-columns: 1fr; } }

.pkg-addon {
  background: var(--c-paper);
  padding: clamp(24px, 2.2vw, 36px);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border-top: 1px solid var(--c-line);
}
.pkg-addon__title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1.4vw + 0.5rem, 1.8rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 400;
}
.pkg-addon__title em { font-style: italic; color: var(--c-accent); }
.pkg-addon__body {
  font-family: var(--f-sans);
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  line-height: 1.6;
  font-weight: 300;
}
.pkg-addon__body p + p { margin-top: var(--s-3); }
.pkg-addon__body ul {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.pkg-addon__body li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
}
.pkg-addon__body li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--c-accent);
  font-weight: 500;
}
.pkg-addon__rates {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: var(--s-2);
}
.pkg-addon__rates li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--f-sans);
  font-size: 0.92rem;
  gap: var(--s-3);
}
.pkg-addon__rates li span:first-child {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--c-muted);
  font-weight: 500;
}
.pkg-addon__rates li span:last-child {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.pkg-addon__price {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-3);
  margin-top: auto;
}
.pkg-addon__price-label {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.pkg-addon__price-value {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.6vw + 0.5rem, 2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.pkg-addon__price-value em { font-style: italic; color: var(--c-accent); font-size: 0.7em; }
.pkg-addon__note {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--c-muted);
  line-height: 1.55;
  border-top: 1px dashed var(--c-line);
  padding-top: var(--s-3);
  margin-top: var(--s-2);
}

/* Closing CTA */
.pkg-close {
  text-align: center;
}
.pkg-close__display {
  font-family: var(--f-display);
  font-size: clamp(3rem, 7vw + 0.5rem, 8rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin-bottom: var(--s-5);
}
.pkg-close__display em { font-style: italic; color: var(--c-accent); }
.pkg-close__sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  max-width: 44ch;
  margin: 0 auto var(--s-7);
  line-height: 1.5;
}
.pkg-close__cta {
  display: inline-flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center;
}

/* -------- story-cards strip (Recent Stories) -------------- */
.story-strip {
  position: relative;
}
.story-strip__track {
  display: flex;
  gap: clamp(20px, 2.4vw, 44px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--s-4);
  padding-inline: var(--container-pad);
  scrollbar-width: none;
  cursor: grab;
}
.story-strip__track::-webkit-scrollbar { display: none; }
.story-strip__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }

.story-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(280px, 30vw, 420px);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.story-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
  margin-bottom: var(--s-4);
}
.story-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
  pointer-events: none;
}
.story-card:hover .story-card__media img { transform: scale(1.05); }
.story-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,16,12,0) 60%, rgba(20,16,12,0.45) 100%);
  pointer-events: none;
}
.story-card__num {
  position: absolute; top: var(--s-4); left: var(--s-4);
  z-index: 2;
  font-family: var(--f-display);
  font-size: 0.95rem;
  color: var(--c-on-dark);
  letter-spacing: 0.16em;
  font-style: italic;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.story-card__couple {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.6vw + 0.6rem, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
}
.story-card__couple em { font-style: italic; color: var(--c-accent); font-weight: 400; }
.story-card__meta {
  display: flex; gap: var(--s-3);
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
}
.story-card__meta span + span::before {
  content: "·"; margin-right: var(--s-3); margin-left: -2px;
}

/* alternate vertical alignment for visual rhythm */
.story-card:nth-child(even) { padding-top: clamp(20px, 4vw, 60px); }

@media (max-width: 540px) {
  .story-card { width: 78vw; }
  .story-card:nth-child(even) { padding-top: 0; }
}

/* Story-strip variants driven by the galleryLayout tweak */
body[data-gallery-layout="mosaic"] .story-strip__track {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 180px;
  gap: clamp(12px, 1.5vw, 28px);
  overflow: visible;
  scroll-snap-type: none;
  cursor: default;
  padding-inline: var(--container-pad);
}
body[data-gallery-layout="mosaic"] .story-card { width: auto; padding-top: 0 !important; grid-column: span 4; grid-row: span 2; }
body[data-gallery-layout="mosaic"] .story-card:nth-child(7n+1) { grid-column: span 6; grid-row: span 3; }
body[data-gallery-layout="mosaic"] .story-card:nth-child(7n+4) { grid-column: span 6; grid-row: span 2; }
body[data-gallery-layout="mosaic"] .story-card .story-card__media { aspect-ratio: auto; height: 100%; }
body[data-gallery-layout="mosaic"] .story-strip .gallery__controls,
body[data-gallery-layout="mosaic"] .story-strip .gallery__progress { display: none; }

body[data-gallery-layout="editorial"] .story-strip__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 56px);
  overflow: visible;
  scroll-snap-type: none;
  cursor: default;
  padding-inline: var(--container-pad);
}
body[data-gallery-layout="editorial"] .story-card { width: auto; padding-top: 0 !important; }
body[data-gallery-layout="editorial"] .story-card:nth-child(3n+2) { margin-top: clamp(40px, 7vw, 96px); }
body[data-gallery-layout="editorial"] .story-strip .gallery__controls { display: none; }
@media (max-width: 880px) {
  body[data-gallery-layout="mosaic"] .story-strip__track,
  body[data-gallery-layout="editorial"] .story-strip__track {
    grid-template-columns: repeat(2, 1fr);
  }
  body[data-gallery-layout="editorial"] .story-card:nth-child(3n+2) { margin-top: 0; }
}

/* -------- investment teaser ------------------------------- */
.invest {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.invest__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.invest__media img { width: 100%; height: 100%; object-fit: cover; }
.invest__display {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 4vw + 0.5rem, 4.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: var(--s-5);
}
.invest__display em { font-style: italic; color: var(--c-accent); }
.invest__lede {
  font-family: var(--f-serif); font-style: italic;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  max-width: 44ch;
  line-height: 1.5;
  margin-bottom: var(--s-6);
}
.invest__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-7);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-6);
}
.invest__tier h4 {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  margin-bottom: var(--s-3);
}
.invest__tier .price {
  font-family: var(--f-display);
  font-size: 1.8rem;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: var(--s-2);
}
.invest__tier .price em { font-style: italic; color: var(--c-accent); font-size: 0.9em; }
.invest__tier p {
  font-size: 0.92rem;
  color: var(--c-ink-soft);
  line-height: 1.6;
}
.invest__line {
  display: block;
}
.invest__foot {
  font-family: var(--f-sans);
  font-size: var(--fs-overline);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 500;
  margin-top: var(--s-5);
  display: block;
}

@media (max-width: 880px) {
  .invest { grid-template-columns: 1fr; }
  .invest__tiers { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* -------- layered image crossing section boundary --------- */
.crosser {
  position: relative;
  margin-block: clamp(-80px, -8vw, -60px);
  z-index: 2;
  pointer-events: none;
}
.crosser__inner {
  width: clamp(220px, 28vw, 420px);
  aspect-ratio: 3 / 4;
  margin-left: auto;
  margin-right: 8vw;
  overflow: hidden;
  pointer-events: auto;
}
.crosser__inner img { width: 100%; height: 100%; object-fit: cover; }
.crosser--left .crosser__inner { margin-left: 8vw; margin-right: auto; }
@media (max-width: 720px) {
  .crosser { display: none; }
}

/* -------- Film & Super 8 section (Vimeo background) ------- */
.super8 {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: center;
  color: var(--c-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.super8__bg {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
  background: #0d0a07;
}
.super8__bg iframe,
.super8__bg video {
  position: absolute;
  top: 50%; left: 50%;
  /* maintain 16:9 cover regardless of viewport ratio */
  width: max(100vw, calc(100vh * 16 / 9));
  height: max(100vh, calc(100vw * 9 / 16));
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.super8__bg::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,10,7,0.55) 0%, rgba(13,10,7,0.25) 35%, rgba(13,10,7,0.55) 100%);
  pointer-events: none;
}
.super8__bg::before {
  /* subtle film grain over the video */
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background-image:
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  mix-blend-mode: overlay;
  opacity: 0.6;
  pointer-events: none;
}
.super8__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
  margin: 0 auto;
  padding-block: clamp(80px, 12vw, 140px);
}
.super8__overline {
  color: rgba(239,233,221,0.85);
  margin-bottom: var(--s-5);
}
.super8__title {
  font-family: var(--f-display);
  font-size: clamp(2.5rem, 5vw + 0.5rem, 5.5rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: var(--s-6);
}
.super8__title em {
  font-style: italic;
  color: var(--c-accent);
  font-weight: 400;
}
.super8__body {
  font-family: var(--f-serif);
  font-size: clamp(1.1rem, 1.1vw + 0.6rem, 1.4rem);
  line-height: 1.6;
  color: rgba(239,233,221,0.92);
  margin-bottom: var(--s-7);
}
.super8__body p { margin-bottom: var(--s-3); }
.super8__cta {
  display: inline-flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center;
}

/* Mobile pricing hardening.
   Real mobile browsers are less forgiving when a pricing card contains long
   crew labels or editorial badges, so these blocks must never create a wider
   layout than the viewport. */
@media (max-width: 720px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .pkg-tiers,
  .pkg-group__cards,
  .pkg-group__cards--two,
  .sb-offers,
  .eng-sessions,
  .invest__tiers {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .pkg-tier,
  .pkg-addon,
  .pkg-group,
  .pkg-group--collapsible,
  .sb-offer,
  .eng-session,
  .invest__tier {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-inline: 0;
    transform: none !important;
  }

  .pkg-tier:hover {
    transform: none;
  }

  .pkg-badge,
  .pkg-badge--save {
    position: static;
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    margin: 0 0 var(--s-2) auto;
    transform: none;
    white-space: normal;
  }

  .pkg-tier__num {
    padding-right: 0;
  }

  .pkg-tier__crew,
  .pkg-tier__price-extra,
  .pkg-addon__price-label,
  .pkg-addon__rates li span:first-child,
  .sb-offer__meta,
  .eng-session__meta,
  .invest__foot {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .pkg-tier__price,
  .pkg-addon__price,
  .sb-offer__price,
  .eng-session__price {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--s-2);
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .pkg-tier__price-main,
  .pkg-addon__price-value,
  .pkg-group__price-hint,
  .sb-offer__price-value,
  .eng-session__price-value,
  .invest__tier .price {
    display: inline-block;
    max-width: 100%;
    margin-left: 0 !important;
    transform: none !important;
    text-indent: 0 !important;
    white-space: normal;
    overflow: visible;
  }

  .pkg-addon__rates li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 6px;
  }

  .pkg-tier__cta,
  .sb-offer__cta,
  .eng-session__cta {
    align-self: flex-start;
    max-width: 100%;
  }

  .pkg-tier .btn,
  .pkg-addon .btn,
  .sb-offer .btn,
  .eng-session .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* ============================================================
   GUIDE PAGES — client education. Reuses .fq-hero / .section /
   .pkg-group--collapsible. Adds .gd-* helpers for prose, callouts,
   "good to know" blocks, comparison tables, step lists.
   ============================================================ */
.gd-prose { max-width: 720px; margin-inline: auto; }
.gd-prose > * + * { margin-top: var(--s-5); }
.gd-prose p {
  font-size: var(--fs-lede); line-height: 1.7; color: var(--c-ink-soft); font-weight: 300;
}
.gd-prose p.gd-lead {
  font-family: var(--f-serif); font-style: italic;
  font-size: clamp(1.3rem, 1.6vw + 0.5rem, 1.75rem);
  line-height: 1.5; color: var(--c-ink);
}
.gd-prose h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.8rem, 2.4vw + 0.5rem, 2.8rem);
  line-height: 1.05; letter-spacing: 0;
  margin-top: clamp(48px, 6vw, 80px);
}
.gd-prose h2 em { font-style: italic; color: var(--c-accent); }
.gd-prose h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.3rem, 1.4vw + 0.4rem, 1.6rem);
  letter-spacing: 0; margin-top: var(--s-6);
}
.gd-prose strong { color: var(--c-ink); font-weight: 500; }
.gd-prose a { color: var(--c-accent); text-decoration: none; border-bottom: 1px solid currentColor; }

/* Section eyebrow inside prose */
.gd-eyebrow {
  font-family: var(--f-sans); font-size: var(--fs-overline);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--c-accent); font-weight: 500; display: block;
}

/* Numbered step list (process pages) */
.gd-steps { max-width: 760px; margin-inline: auto; list-style: none; padding: 0; display: grid; gap: clamp(16px, 2vw, 26px); counter-reset: gd; }
.gd-step {
  display: grid; grid-template-columns: 64px 1fr; gap: clamp(16px, 2vw, 32px);
  padding: clamp(20px, 2.2vw, 32px) 0;
  border-top: 1px solid var(--c-line);
  align-items: start;
}
.gd-step::before {
  counter-increment: gd; content: counter(gd, decimal-leading-zero);
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.8rem, 2vw + 0.5rem, 2.6rem);
  color: var(--c-accent); line-height: 0.9; letter-spacing: 0;
}
.gd-step h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.3rem, 1.4vw + 0.4rem, 1.7rem); letter-spacing: 0; margin: 0 0 var(--s-2); }
.gd-step h3 em { font-style: italic; color: var(--c-accent); }
.gd-step p { font-size: 1rem; line-height: 1.65; color: var(--c-ink-soft); font-weight: 300; margin: 0; }

/* Callout / quote */
.gd-callout {
  max-width: 760px; margin: clamp(40px, 5vw, 72px) auto;
  padding: clamp(28px, 3.5vw, 52px);
  background: var(--c-bg-dark); color: var(--c-on-dark);
  border-radius: var(--radius-lg); text-align: center;
}
.gd-callout p {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2.2rem);
  line-height: 1.3; letter-spacing: 0; color: var(--c-on-dark); margin: 0;
}
.gd-callout p em { color: oklch(0.82 0.09 50); font-style: italic; }
.gd-callout::before {
  content: "\201C"; display: block; font-family: var(--f-display);
  font-size: 3.5rem; line-height: 0.4; color: oklch(0.78 0.08 40);
  margin-bottom: var(--s-3);
}

/* "Good to know" inset */
.gd-note {
  max-width: 720px; margin: clamp(32px, 4vw, 56px) auto;
  background: var(--c-paper); border-top: 2px solid var(--c-accent);
  padding: clamp(24px, 2.6vw, 40px);
  display: grid; gap: var(--s-3);
}
.gd-note__label {
  font-family: var(--f-sans); font-size: var(--fs-overline);
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-accent); font-weight: 600;
}
.gd-note p { font-size: 1rem; line-height: 1.65; color: var(--c-ink-soft); margin: 0; font-weight: 300; }
.gd-note p + p { margin-top: var(--s-2); }

/* Comparison table */
.gd-table-wrap { max-width: 820px; margin: clamp(36px, 4.5vw, 64px) auto; overflow-x: auto; }
.gd-table { width: 100%; border-collapse: collapse; font-family: var(--f-sans); }
.gd-table th, .gd-table td {
  text-align: left; padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 22px);
  border-bottom: 1px solid var(--c-line); vertical-align: top;
}
.gd-table thead th {
  font-size: var(--fs-overline); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-muted); font-weight: 600; border-bottom: 1px solid var(--c-ink);
}
.gd-table tbody th {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-size: 1.1rem; color: var(--c-ink); width: 34%;
}
.gd-table tbody td { font-size: 0.95rem; line-height: 1.55; color: var(--c-ink-soft); font-weight: 300; }
.gd-table tbody tr:last-child th, .gd-table tbody tr:last-child td { border-bottom: none; }
.gd-table .is-pro { color: var(--c-ink); }

/* Key/value spec row list */
.gd-kv { max-width: 720px; margin-inline: auto; list-style: none; padding: 0; display: grid; gap: 0; }
.gd-kv li {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: clamp(14px, 1.6vw, 20px) 0; border-bottom: 1px solid var(--c-line);
}
.gd-kv li strong { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.2rem; color: var(--c-ink); }
.gd-kv li span { font-size: 0.98rem; line-height: 1.6; color: var(--c-ink-soft); font-weight: 300; }

/* Guides hub cards */
.gd-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(18px, 2vw, 32px); }
.gd-card {
  text-decoration: none; color: inherit; background: var(--c-paper);
  border-top: 1px solid var(--c-line); padding: clamp(28px, 2.6vw, 44px);
  display: grid; gap: var(--s-3); align-content: start;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.gd-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -36px rgba(20,16,12,0.2); }
.gd-card__num { font-family: var(--f-display); font-style: italic; color: var(--c-accent); font-size: 1rem; }
.gd-card__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.4rem, 1.4vw + 0.4rem, 1.85rem); line-height: 1.05; letter-spacing: 0; }
.gd-card__title em { font-style: italic; color: var(--c-accent); }
.gd-card__desc { font-size: 0.96rem; line-height: 1.6; color: var(--c-ink-soft); font-weight: 300; }
.gd-card__more { font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-accent); font-weight: 500; }

/* Guides — editorial hub additions */
.gd-lede { max-width: 42ch; }
.gd-lede p { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.05rem,1vw+0.6rem,1.35rem); line-height: 1.5; color: var(--c-ink-soft); }

/* Featured guide — split image + text */
.gd-feature {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px,4vw,64px); align-items: stretch;
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 4px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: box-shadow var(--t-med) var(--ease);
}
.gd-feature:hover { box-shadow: 0 30px 70px -40px rgba(20,16,12,0.3); }
.gd-feature:hover .gd-feature__img img { transform: scale(1.04); }
.gd-feature__img { overflow: hidden; background: var(--c-bg-soft); min-height: 340px; }
.gd-feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.gd-feature__body { padding: clamp(28px,3.5vw,64px); display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); }
.gd-feature__cat { font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.34em; text-transform: uppercase; color: var(--c-accent); font-weight: 500; }
.gd-feature__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem,2.4vw+1rem,3.2rem); line-height: 1.02; letter-spacing: 0; }
.gd-feature__title em { font-style: italic; color: var(--c-accent); }
.gd-feature__desc { font-size: 1.02rem; line-height: 1.65; color: var(--c-ink-soft); font-weight: 300; max-width: 46ch; }
.gd-feature__more { font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-accent); font-weight: 500; margin-top: var(--s-2); }
@media (max-width: 820px){ .gd-feature { grid-template-columns: 1fr; } .gd-feature__img { min-height: 240px; } }

.ty-hero { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--c-on-dark); overflow: hidden; isolation: isolate; }
.ty-hero__media { position: absolute; inset: 0; z-index: -2; }
.ty-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.ty-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(26,20,14,0.55), rgba(26,20,14,0.35) 45%, rgba(26,20,14,0.6)); }
.ty-hero__inner { padding: clamp(120px,18vh,200px) var(--container-pad) clamp(60px,10vh,110px); max-width: 760px; }
.ty-hero__check { width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); display: grid; place-items: center; margin: 0 auto clamp(24px,4vh,40px); color: #fff; }
.ty-hero__eyebrow { color: rgba(255,255,255,0.8); letter-spacing: 0.4em; margin-bottom: var(--s-5); }
.ty-hero__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.6rem,6vw+0.5rem,5.5rem); line-height: 0.98; letter-spacing: 0; color: #fff; }
.ty-hero__title em { font-style: italic; }
.ty-hero__sub { margin: var(--s-5) auto 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(1.15rem,1.4vw+0.5rem,1.5rem); line-height: 1.5; color: rgba(255,255,255,0.92); max-width: 42ch; }
.ty-hero__note { margin-top: var(--s-5); display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.28); border-radius: 40px; padding: 9px 18px; }
.ty-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,4vw,64px); }
.ty-step { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.ty-step__n { font-family: var(--f-display); font-style: italic; font-size: 1.4rem; color: var(--c-accent); }
.ty-step__t { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.3rem,1.4vw+0.5rem,1.7rem); letter-spacing: 0; }
.ty-step__d { font-size: 0.98rem; line-height: 1.6; color: var(--c-ink-soft); font-weight: 300; }
@media (max-width:760px){ .ty-steps { grid-template-columns: 1fr; } }
.ty-explore { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,26px); }
.ty-tile { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; border-radius: 4px; background: var(--c-bg-soft); text-decoration: none; color: var(--c-on-dark); }
.ty-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.ty-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,20,14,0) 40%, rgba(26,20,14,0.72)); }
.ty-tile:hover img { transform: scale(1.05); }
.ty-tile__c { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(16px,2vw,24px); }
.ty-tile__k { font-family: var(--f-sans); font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.82); font-weight: 600; }
.ty-tile__t { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.3rem,1.4vw+0.5rem,1.85rem); line-height: 1.05; color: #fff; margin-top: 5px; }
.ty-tile__t em { font-style: italic; }
.ty-tile--wide { grid-column: span 3; aspect-ratio: 21/9; }
@media (max-width:760px){ .ty-explore { grid-template-columns: 1fr 1fr; } .ty-tile--wide { grid-column: span 2; aspect-ratio: 16/9; } }
@media (max-width:460px){ .ty-explore { grid-template-columns: 1fr; } .ty-tile--wide { grid-column: span 1; } }
.pb-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,26px); }
@media (max-width:820px){ .pb-grid { grid-template-columns: 1fr; } }
.pb-pay { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 4px; padding: clamp(22px,2.4vw,32px); display: grid; gap: var(--s-3); align-content: start; }
.pb-pay--hl { background: var(--c-ink); color: var(--c-on-dark); border-color: var(--c-ink); }
.pb-pay__k { font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; }
.pb-pay--hl .pb-pay__k { color: rgba(255,255,255,0.7); }
.pb-pay__total { font-family: var(--f-display); font-size: clamp(2rem,2.4vw+0.8rem,2.8rem); line-height: 1; letter-spacing: 0; }
.pb-pay__row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: 0.95rem; padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
.pb-pay--hl .pb-pay__row { border-color: rgba(255,255,255,0.2); }
.pb-pay__row span:first-child { color: var(--c-muted); }
.pb-pay--hl .pb-pay__row span:first-child { color: rgba(255,255,255,0.65); }
.pb-pay__row b { font-weight: 600; }
.pb-pay__paid { color: var(--c-accent); }
.pb-info { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 4px; padding: clamp(24px,3vw,40px); display: grid; gap: var(--s-4); }
.pb-info__label { font-family: var(--f-sans); font-size: var(--fs-overline); letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.pb-info__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem,1.8vw+0.6rem,2.1rem); letter-spacing: 0; line-height: 1.1; }
.pb-info__title em { font-style: italic; }
.pb-info p { font-size: 1rem; line-height: 1.6; color: var(--c-ink-soft); font-weight: 300; margin: 0; }
.pb-pay__methods { display:flex; flex-wrap:wrap; gap: var(--s-2); }
.pb-chip { font-family: var(--f-sans); font-size: 0.8rem; letter-spacing:0.02em; padding: 6px 12px; border-radius: 40px; border: 1px solid var(--c-line); color: var(--c-ink-soft); background: var(--c-paper); }
.pb-chip b { color: var(--c-ink); font-weight:600; }

/* Section header for grouped guides */
.gd-sechead { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: clamp(24px,3vw,40px); padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line); }
.gd-sechead__k { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--c-accent); flex-shrink: 0; }
.gd-sechead__t { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.5rem,1.6vw+0.6rem,2.1rem); letter-spacing: 0; }
.gd-sechead__note { margin-left: auto; font-family: var(--f-serif); font-style: italic; font-size: 1rem; color: var(--c-muted); text-align: right; max-width: 34ch; }
@media (max-width: 640px){ .gd-sechead { flex-wrap: wrap; } .gd-sechead__note { margin-left: 0; text-align: left; flex-basis: 100%; } }

/* Card category eyebrow + reading cue */
.gd-card { display: flex; flex-direction: column; gap: var(--s-3); }
.gd-card__cat { font-family: var(--f-sans); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; }
.gd-card__cue { margin-top: auto; padding-top: var(--s-3); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); border-top: 1px solid var(--c-line-2, var(--c-line)); }
.gd-card__read { font-family: var(--f-sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; }

/* In-page guide nav (prev/related) */
.gd-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(14px, 1.6vw, 24px); max-width: 900px; margin-inline: auto; }
.gd-related a {
  text-decoration: none; color: inherit; border: 1px solid var(--c-line);
  padding: clamp(18px, 2vw, 28px); display: grid; gap: 6px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-med) var(--ease);
}
.gd-related a:hover { border-color: var(--c-accent); background: var(--c-paper); }
.gd-related span { font-family: var(--f-sans); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; }
.gd-related strong { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.2rem; color: var(--c-ink); letter-spacing: 0; }
@media (max-width: 540px) { .gd-step { grid-template-columns: 1fr; gap: var(--s-2); } }

/* 35mm film photography page - restored from original design export */
body:has(.cover[data-screen-label="01 Cover"]) {
  --paper: #ece3d1;
  --paper-2: #e6dcc8;
  --ink: #1f1a13;
  --ink-soft: #3a3225;
  --ink-mute: #6b5d49;
  --ink-faint: #9a8d76;
  --sepia: #8a6a44;
  --dark: #16110b;
  --dark-ink: #d8cdb6;
  --rule: rgba(34,28,20,.18);
  --rule-dark: rgba(216,205,182,.22);
  --serif: var(--f-serif);
  --sans: var(--f-sans);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  overflow-x: hidden;
}
body:has(.cover[data-screen-label="01 Cover"])::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.07  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body:has(.cover[data-screen-label="01 Cover"])::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  background: radial-gradient(120% 80% at 50% 30%, transparent 55%, rgba(28,20,10,.12) 100%);
}
/* ------- LAYOUT WRAPPERS ------- */
  body:has(.cover[data-screen-label="01 Cover"]) .stage{
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 56px;
    position: relative;
  }

  /* Editorial labels & details */
  body:has(.cover[data-screen-label="01 Cover"]) .eyebrow{
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-weight: 400;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .index{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--sepia);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .rule{ height:1px; background: var(--rule); border:0; }

  body:has(.cover[data-screen-label="01 Cover"]) .topstrip{
    border-bottom: 1px solid var(--rule);
    background: #fdfbf6;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .topstrip-inner{
    max-width: 1480px;
    margin: 0 auto;
    padding: 16px 56px 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.26em;
    color: var(--ink-mute);
    text-transform: uppercase;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .sprockets{
    display: flex;
    gap: 9px;
    align-items: center;
    overflow: hidden;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .sprockets > i{
    flex: 0 0 auto;
    width: 16px;
    height: 9px;
    background: var(--ink);
    opacity: .55;
    border-radius: 1.5px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .sprockets.dark > i{
    background: var(--dark-ink);
    opacity: .55;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .sprockets.row{
    width: 100%;
  }

  /* Image wrappers — film-print feel */
  body:has(.cover[data-screen-label="01 Cover"]) .frame{
    position: relative;
    overflow: hidden;
    background: #1a140d;
    box-shadow: 0 30px 60px -28px rgba(28,20,10,.45), 0 4px 14px -6px rgba(28,20,10,.25);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .frame img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(.96) saturate(.94);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .frame.reel::before{
    content:"";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
      repeating-linear-gradient(to bottom, rgba(20,14,7,0) 0 3px, rgba(20,14,7,.05) 3px 4px),
      radial-gradient(140% 80% at 50% 50%, transparent 50%, rgba(20,14,7,.22) 100%);
    mix-blend-mode: multiply;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .frame.reel img{
    filter: contrast(.94) saturate(.9) brightness(1.02);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .camera-photo-wrap{
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #1a140d;
    border: 1px solid var(--rule);
    box-shadow: 0 30px 60px -28px rgba(28,20,10,.35), 0 4px 14px -6px rgba(28,20,10,.15);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .camera-photo-wrap img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    filter: contrast(.96) saturate(.92) brightness(1.03);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .camera-photo-wrap::after{
    content:"";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(28,20,10,.2) 100%),
      linear-gradient(180deg, rgba(255,248,232,.1), rgba(28,20,10,.12));
    mix-blend-mode: multiply;
  }
  /* Soft film-grain on each image */
  body:has(.cover[data-screen-label="01 Cover"]) .frame::after{
    content:"";
    position: absolute; inset:0;
    pointer-events:none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.32  0 0 0 0 0.2  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
    opacity: .55;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .caption{
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--ink-mute);
    text-transform: uppercase;
  }

  /* ============================================================
     SECTION 01  —  PROLOGUE / COVER
  ============================================================ */
  body:has(.cover[data-screen-label="01 Cover"]) .cover{
    padding: 80px 0 120px;
    position: relative;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-grid{
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 60px;
    align-items: end;
    min-height: 78vh;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-left{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-bottom: 18px;
    position: relative;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-meta{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-title{
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(64px, 9.4vw, 156px);
    line-height: .92;
    letter-spacing: -0.025em;
    margin: 38px 0 0;
    color: var(--ink);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-title em{
    font-style: italic;
    font-weight: 300;
    color: var(--ink-soft);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-title .strike{
    display:inline-block;
    transform: translateY(.04em);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-sub{
    margin-top: 38px;
    max-width: 460px;
    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-tag{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-tag .dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--sepia);
  }

  body:has(.cover[data-screen-label="01 Cover"]) .cover-right{
    position: relative;
    align-self: stretch;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-image{
    height: 78vh;
    min-height: 600px;
    max-height: 880px;
    width: 100%;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-image .frame{ height:100%; }

  body:has(.cover[data-screen-label="01 Cover"]) .cover-strip{
    position: absolute;
    right: -22px;
    top: -18px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.34em;
    color: var(--ink-mute);
    text-transform: uppercase;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-bottom{
    margin-top: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 60px;
    padding-top: 32px;
    border-top: 1px solid var(--rule);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-bottom > div{
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .cover-bottom strong{
    display:block;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 10.5px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 10px;
  }

  /* ============================================================
     SECTION 02  —  EDITORIAL PULL QUOTE / LAB NOTE
  ============================================================ */
  body:has(.cover[data-screen-label="01 Cover"]) .lab{
    padding: 140px 0 120px;
    position: relative;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .lab-grid{
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    gap: 60px;
    align-items: start;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .lab-side{
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: var(--ink-mute);
    text-transform: uppercase;
    line-height: 1.7;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .lab-side.right{ text-align: right; }
  body:has(.cover[data-screen-label="01 Cover"]) .lab-body{
    text-align: center;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .lab-quote{
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.28;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin: 0 auto;
    max-width: 920px;
    text-wrap: pretty;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .lab-quote em{ font-style: italic; color: var(--ink-soft); }
  body:has(.cover[data-screen-label="01 Cover"]) .lab-mark{
    margin-bottom: 30px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 26px;
    color: var(--sepia);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .lab-footer{
    margin-top: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    color: var(--ink-mute);
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .lab-footer .hair{ width: 60px; height:1px; background: var(--ink-mute); opacity:.5; }

  /* ============================================================
     SECTION 03  —  DIPTYCH (intimate)
  ============================================================ */
  body:has(.cover[data-screen-label="01 Cover"]) .diptych{
    padding: 60px 0 140px;
    position: relative;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .diptych-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: end;
    position: relative;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .diptych .frame.tall{ aspect-ratio: 3/4.4; }
  body:has(.cover[data-screen-label="01 Cover"]) .diptych .frame.tall2{ aspect-ratio: 3/4.4; transform: translateY(-90px); }
  body:has(.cover[data-screen-label="01 Cover"]) .diptych-text{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 26px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .diptych-headline{
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(34px, 4vw, 64px);
    line-height: 1.06;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
    text-wrap: balance;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .diptych-headline em{ font-style: italic; color: var(--sepia); }
  body:has(.cover[data-screen-label="01 Cover"]) .diptych-body{
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 460px;
    align-self: end;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .floating-tag{
    position: absolute;
    z-index: 3;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: var(--ink-mute);
    text-transform: uppercase;
    background: rgba(236,227,209,.85);
    padding: 8px 14px;
    border: 1px solid var(--rule);
    backdrop-filter: blur(2px);
  }

  /* ============================================================
     SECTION 04  —  DARK CHAPTER (vows)
  ============================================================ */
  body:has(.cover[data-screen-label="01 Cover"]) .dark-chapter{
    background: var(--dark);
    color: var(--dark-ink);
    padding: 140px 0 160px;
    position: relative;
    margin-top: 40px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .dark-chapter .stage{ position: relative; }
  body:has(.cover[data-screen-label="01 Cover"]) .dark-grid{
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 80px;
    align-items: center;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .dark-image{
    aspect-ratio: 3/4.3;
    max-height: 86vh;
    margin: 0 auto;
    width: 100%;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .dark-image .frame{ height:100%; }
  body:has(.cover[data-screen-label="01 Cover"]) .dark-side{
    color: var(--dark-ink);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .dark-side .eyebrow{ color: rgba(216,205,182,.6); }
  body:has(.cover[data-screen-label="01 Cover"]) .dark-side .index{ color: #c89a64; }
  body:has(.cover[data-screen-label="01 Cover"]) .dark-title{
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(40px, 4.4vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.015em;
    margin: 22px 0 26px;
    color: var(--dark-ink);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .dark-title em{ font-style: italic; color: #c89a64; }
  body:has(.cover[data-screen-label="01 Cover"]) .dark-body{
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.7;
    color: rgba(216,205,182,.78);
    max-width: 420px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .dark-meta{
    margin-top: 50px;
    padding-top: 22px;
    border-top: 1px solid var(--rule-dark);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: rgba(216,205,182,.55);
    text-transform: uppercase;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .dark-meta strong{ display:block; color: var(--dark-ink); font-weight: 400; margin-bottom: 6px; font-family: var(--sans); }

  /* ============================================================
     SECTION 05  —  FLATLAY + VEIL OVERLAP
  ============================================================ */
  body:has(.cover[data-screen-label="01 Cover"]) .overlap{
    padding: 160px 0 120px;
    position: relative;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .overlap-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: relative;
    align-items: start;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .overlap .flatlay{
    grid-column: 1 / span 1;
    aspect-ratio: 3/2;
    width: 110%;
    margin-top: 110px;
    z-index: 1;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .overlap .veil{
    grid-column: 2 / span 1;
    aspect-ratio: 3/4.4;
    width: 78%;
    justify-self: end;
    margin-right: 4%;
    z-index: 2;
    position: relative;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .overlap-text{
    position: absolute;
    left: 8%;
    top: -12px;
    max-width: 320px;
    z-index: 3;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .overlap-text h3{
    font-family: var(--serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.18;
    margin: 16px 0 0;
    color: var(--ink);
  }

  /* ============================================================
     SECTION 06  —  INFORMATION / WHAT'S ON THE FILM
  ============================================================ */
  body:has(.cover[data-screen-label="01 Cover"]) .info{
    padding: 140px 0 140px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .info-head{
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 80px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .info-head h2{
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(40px, 4.6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 16px 0 0;
    color: var(--ink);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .info-head em{ font-style: italic; color: var(--sepia); }
  body:has(.cover[data-screen-label="01 Cover"]) .info-head p{
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-soft);
    max-width: 460px;
    margin: 0;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .info-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 60px;
    row-gap: 56px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .info-item{
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: start;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .info-item .num{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--sepia);
    padding-top: 4px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .info-item h4{
    font-family: var(--serif);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 10px;
    color: var(--ink);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .info-item p{
    font-family: var(--serif);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .info-foot{
    margin-top: 70px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 15.5px;
    color: var(--ink-mute);
    text-align: center;
  }

  /* ============================================================
     SECTION 07  —  DESERT CHAPTER (cinematic anchor)
  ============================================================ */
  body:has(.cover[data-screen-label="01 Cover"]) .desert{
    padding: 160px 0 120px;
    position: relative;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .desert-head{
    text-align: center;
    margin-bottom: 80px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .desert-head h2{
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(48px, 6vw, 108px);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 12px 0 0;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .desert-head em{ font-style: italic; }
  body:has(.cover[data-screen-label="01 Cover"]) .desert-head .index{ display: inline-block; margin-bottom: 8px; }
  body:has(.cover[data-screen-label="01 Cover"]) .desert-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: relative;
    align-items: start;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .desert-left{
    aspect-ratio: 3/4.4;
    width: 90%;
    z-index: 1;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .desert-right{
    aspect-ratio: 3/4.4;
    width: 86%;
    justify-self: end;
    margin-top: 180px;
    margin-left: -12%;
    z-index: 2;
    position: relative;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .desert-poem{
    position: absolute;
    right: 4%;
    top: 60px;
    max-width: 280px;
    text-align: right;
    z-index: 3;
    font-family: var(--serif);
    font-style: italic;
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .desert-caption{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }

  /* ============================================================
     SECTION 08  —  EDITORIAL FRAGMENTS GRID
  ============================================================ */
  body:has(.cover[data-screen-label="01 Cover"]) .fragments{
    padding: 80px 0 140px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .fragments-grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px 28px;
    position: relative;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .frag{ position: relative; margin: 0; }
  body:has(.cover[data-screen-label="01 Cover"]) .frag .frame{ width: 100%; height: 100%; }

  body:has(.cover[data-screen-label="01 Cover"]) .frag-1{ grid-column: 1 / span 5; margin-top: 60px; }
  body:has(.cover[data-screen-label="01 Cover"]) .frag-1 .frame{ aspect-ratio: 3/4.3; }
  body:has(.cover[data-screen-label="01 Cover"]) .frag-2{ grid-column: 7 / span 6; }
  body:has(.cover[data-screen-label="01 Cover"]) .frag-2 .frame{ aspect-ratio: 4/3; }
  body:has(.cover[data-screen-label="01 Cover"]) .frag-3{ grid-column: 2 / span 4; }
  body:has(.cover[data-screen-label="01 Cover"]) .frag-3 .frame{ aspect-ratio: 3/4.3; }
  body:has(.cover[data-screen-label="01 Cover"]) .frag-4{ grid-column: 7 / span 5; margin-top: -40px; }
  body:has(.cover[data-screen-label="01 Cover"]) .frag-4 .frame{ aspect-ratio: 3/4.3; }

  /* Chapter VI header */
  body:has(.cover[data-screen-label="01 Cover"]) .fragments-header{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 90px;
    text-align: left;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .fragments-header h2{
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(48px, 6vw, 108px);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 14px 0 0;
    color: var(--ink);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .fragments-header em{ font-style: italic; color: var(--sepia); }
  body:has(.cover[data-screen-label="01 Cover"]) .fragments-header p{
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 380px;
    margin: 0 0 6px;
  }

  /* Per-frame captions in the editorial grid */
  body:has(.cover[data-screen-label="01 Cover"]) .frag-cap{
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    color: var(--ink-mute);
    text-transform: uppercase;
  }

  /* Feature frame with overlaid pull quote (magazine spread) */
  body:has(.cover[data-screen-label="01 Cover"]) .frag-feature{ position: relative; }
  body:has(.cover[data-screen-label="01 Cover"]) .frag-feature .frame{ position: relative; }
  /* Soft dark gradient on the image so the overlay reads cleanly */
  body:has(.cover[data-screen-label="01 Cover"]) .frag-feature .frame::before{
    content:"";
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(160deg, rgba(8,5,2,.62) 0%, rgba(8,5,2,.30) 38%, rgba(8,5,2,0) 62%),
      linear-gradient(0deg, rgba(8,5,2,.35), rgba(8,5,2,0) 40%);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .frag-overlay{
    position: absolute;
    z-index: 6;
    top: 7%;
    left: 7%;
    right: 12%;
    color: #f4ead4;
    text-shadow: 0 2px 22px rgba(0,0,0,.55), 0 0 36px rgba(0,0,0,.4);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .frag-overlay-label{
    display: inline-block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.32em;
    color: rgba(244,234,212,.88);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(244,234,212,.55);
    margin-bottom: 22px;
    text-transform: uppercase;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .frag-overlay h3{
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(24px, 2.6vw, 40px);
    line-height: 1.18;
    letter-spacing: -0.005em;
    margin: 0;
    color: #f4ead4;
    text-wrap: pretty;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .frag-overlay h3 em{ font-style: italic; color: #e8c89a; }
  body:has(.cover[data-screen-label="01 Cover"]) .frag-overlay h3 .sm{
    display: block;
    margin-top: 18px;
    font-style: italic;
    font-size: 0.6em;
    color: rgba(244,234,212,.82);
    line-height: 1.5;
  }

  /* ============================================================
     SECTION 09  —  PRICING (a la carte menu)
  ============================================================ */
  body:has(.cover[data-screen-label="01 Cover"]) .pricing{
    padding: 140px 0 120px;
    background: var(--paper-2);
    border-top: 1px solid var(--rule);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .pricing-head{
    text-align: center;
    margin-bottom: 90px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .pricing-head h2{
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(44px, 5vw, 86px);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 14px 0 18px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .pricing-head em{ font-style: italic; }
  body:has(.cover[data-screen-label="01 Cover"]) .pricing-head p{
    max-width: 560px;
    margin: 0 auto;
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .menu{
    max-width: 940px;
    margin: 0 auto;
    border-top: 1px solid var(--rule);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .menu-row{
    display: grid;
    grid-template-columns: 60px 1fr auto 130px;
    gap: 30px;
    align-items: baseline;
    padding: 30px 0 28px;
    border-bottom: 1px solid var(--rule);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .menu-row .num{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--sepia);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .menu-row .name{
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(22px, 2.2vw, 30px);
    color: var(--ink);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .menu-row .name em{ font-style: italic; color: var(--ink-soft); }
  body:has(.cover[data-screen-label="01 Cover"]) .menu-row .desc{
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: var(--ink-mute);
    max-width: 340px;
    text-align: right;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .menu-row .price{
    font-family: var(--serif);
    font-size: clamp(22px, 2.2vw, 30px);
    text-align: right;
    color: var(--ink);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .menu-foot{
    max-width: 940px;
    margin: 26px auto 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14.5px;
    color: var(--ink-mute);
    text-align: center;
  }

  /* ============================================================
     SECTION 10  —  STANDALONE COLLECTION
  ============================================================ */
  body:has(.cover[data-screen-label="01 Cover"]) .collection{
    padding: 120px 0 140px;
    background: var(--paper-2);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-card{
    max-width: 1180px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 0;
    position: relative;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-card .frame{
    height: 100%;
    min-height: 540px;
    aspect-ratio: auto;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-body{
    padding: 64px 60px 60px;
    position: relative;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-stamp{
    position: absolute;
    top: 24px;
    right: 28px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.28em;
    color: var(--sepia);
    text-transform: uppercase;
    border: 1px solid var(--sepia);
    padding: 6px 10px;
    transform: rotate(-2deg);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-body h3{
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(36px, 3.6vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.015em;
    margin: 18px 0 8px;
    color: var(--ink);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-body h3 em{ font-style: italic; }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-price{
    font-family: var(--serif);
    font-size: 32px;
    color: var(--sepia);
    margin: 0 0 22px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-lede{
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 30px;
    max-width: 460px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-list{
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    border-top: 1px solid var(--rule);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-list li{
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-list li .ix{
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--sepia);
    padding-top: 4px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-addl{
    font-family: var(--serif);
    font-style: italic;
    font-size: 14.5px;
    color: var(--ink-mute);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-cta{
    margin-top: 36px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 26px 16px 22px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    transition: background .3s, color .3s;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-cta:hover{ background: transparent; color: var(--ink); }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-cta .arr{
    width: 22px; height: 1px; background: currentColor; position: relative;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .collection-cta .arr::after{
    content:""; position:absolute; right:0; top:-3px; width:7px; height:7px;
    border-top:1px solid currentColor; border-right:1px solid currentColor; transform: rotate(45deg);
  }

  /* ============================================================
     SECTION 11  —  CLOSING / BEACH FRAME
  ============================================================ */
  body:has(.cover[data-screen-label="01 Cover"]) .closing{
    background: #0e0a06;
    color: var(--dark-ink);
    padding: 140px 0 120px;
    position: relative;
    overflow: hidden;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .closing-head{
    text-align: center;
    margin-bottom: 70px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .closing-head .index{ color: #c89a64; }
  body:has(.cover[data-screen-label="01 Cover"]) .closing-head h2{
    font-family: var(--serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(48px, 6.4vw, 120px);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 18px 0 0;
    color: var(--dark-ink);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .closing-frame{
    max-width: min(760px, 82vw);
    margin: 0 auto;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .closing-frame .frame{
    aspect-ratio: auto;
    overflow: visible;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .closing-frame img{
    display: block;
    width: 100%;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    filter: contrast(.95) saturate(.9);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .closing-caption{
    margin: 28px auto 0;
    max-width: 980px;
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    color: rgba(216,205,182,.6);
    text-transform: uppercase;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .closing-quote{
    max-width: 760px;
    margin: 90px auto 0;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.45;
    color: rgba(216,205,182,.85);
  }
  body:has(.cover[data-screen-label="01 Cover"]) .closing-sig{
    margin-top: 50px;
    text-align: center;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(216,205,182,.5);
  }

  /* ============================================================
     FOOTER  —  matches Zatonsky Moments (black, four columns)
  ============================================================ */
  body:has(.cover[data-screen-label="01 Cover"]) .foot{
    background: #000;
    color: #fff;
    padding: 110px 0 40px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .foot-inner{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 56px;
    align-items: start;
    padding: 0 24px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .foot h5{
    margin: 0 0 44px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 24px;
    letter-spacing: 0.02em;
    color: #fff;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .foot h5.brand{
    text-align: right;
    letter-spacing: 0.12em;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 26px;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .foot a,
body:has(.cover[data-screen-label="01 Cover"]) .foot .line{
    color: #fff;
    text-decoration: none;
    display:block;
    padding: 6px 0;
    font-family: var(--sans);
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.16em;
  }
  body:has(.cover[data-screen-label="01 Cover"]) .foot a:hover{ color: rgba(255,255,255,.55); }
  body:has(.cover[data-screen-label="01 Cover"]) .foot .col-right{ text-align: right; }
  body:has(.cover[data-screen-label="01 Cover"]) .foot-bottom{
    margin-top: 120px;
    display: flex;
    justify-content: center;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #fff;
  }

  /* ============================================================
     RESPONSIVE
  ============================================================ */

  /* ------- Tablet (≤ 980px) ------- */
  @media (max-width: 980px){

    body:has(.cover[data-screen-label="01 Cover"]) .stage{ padding: 0 32px; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-grid,
body:has(.cover[data-screen-label="01 Cover"]) .diptych-grid,
body:has(.cover[data-screen-label="01 Cover"]) .dark-grid,
body:has(.cover[data-screen-label="01 Cover"]) .overlap-grid,
body:has(.cover[data-screen-label="01 Cover"]) .info-head,
body:has(.cover[data-screen-label="01 Cover"]) .desert-grid,
body:has(.cover[data-screen-label="01 Cover"]) .collection-card,
body:has(.cover[data-screen-label="01 Cover"]) .lab-grid,
body:has(.cover[data-screen-label="01 Cover"]) .fragments-header{
      grid-template-columns: 1fr;
      gap: 40px;
    }
    body:has(.cover[data-screen-label="01 Cover"]) .info-grid{ grid-template-columns: 1fr 1fr; row-gap: 36px; column-gap: 40px; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-bottom{ grid-template-columns: 1fr 1fr; gap: 28px; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-image{ height: auto; min-height: 0; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-image .frame{ aspect-ratio: 3/4; height: auto; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-strip{ display: none; }
    body:has(.cover[data-screen-label="01 Cover"]) .lab-side{ display: none; }
    body:has(.cover[data-screen-label="01 Cover"]) .diptych-text{ grid-template-columns: 1fr; gap: 24px; }
    body:has(.cover[data-screen-label="01 Cover"]) .diptych .frame.tall2{ transform: none; }
    body:has(.cover[data-screen-label="01 Cover"]) .overlap .flatlay{ width: 100%; margin-top: 0; grid-column: 1; }
    body:has(.cover[data-screen-label="01 Cover"]) .overlap .veil{ width: 100%; margin: 30px 0 0; grid-column: 1; justify-self: start; }
    body:has(.cover[data-screen-label="01 Cover"]) .overlap-grid{ grid-template-columns: 1fr; }
    body:has(.cover[data-screen-label="01 Cover"]) .overlap-text{ position: static; max-width: none; margin-bottom: 24px; }
    body:has(.cover[data-screen-label="01 Cover"]) .desert-right{ margin-top: 30px; margin-left: 0; width: 100%; }
    body:has(.cover[data-screen-label="01 Cover"]) .desert-left{ width: 100%; }
    body:has(.cover[data-screen-label="01 Cover"]) .desert-poem{ position: static; text-align: left; margin: 0 0 30px; max-width: none; }
    body:has(.cover[data-screen-label="01 Cover"]) .menu-row{ grid-template-columns: 36px 1fr auto; gap: 18px; }
    body:has(.cover[data-screen-label="01 Cover"]) .menu-row .desc{ grid-column: 2 / span 1; text-align: left; margin-top: 6px; font-size: 14px; }
    body:has(.cover[data-screen-label="01 Cover"]) .menu-row .price{ grid-column: 3; }
    body:has(.cover[data-screen-label="01 Cover"]) .fragments-grid > *{ grid-column: 1 / -1 !important; margin-top: 0 !important; }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-body{ padding: 48px 36px 48px; }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-card .frame{ min-height: 380px; }
  
}

  /* ------- Phone (≤ 640px) ------- */
  @media (max-width: 640px){

    body:has(.cover[data-screen-label="01 Cover"]) .stage{ padding: 0 22px; }
    body:has(.cover[data-screen-label="01 Cover"]) body::before{ opacity: .34; }      /* lighter grain on small screens */
    body:has(.cover[data-screen-label="01 Cover"]) body::after{ opacity: .55; }

    /* 01 — Cover */
    body:has(.cover[data-screen-label="01 Cover"]) .cover{ padding: 38px 0 64px; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-grid{ gap: 32px; min-height: 0; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-meta{ flex-direction: column; align-items: flex-start; gap: 8px; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-title{ font-size: 56px; line-height: .96; margin-top: 26px; letter-spacing: -0.02em; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-sub{ font-size: 16.5px; margin-top: 24px; line-height: 1.55; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-tag{ margin-top: 22px; font-size: 10px; letter-spacing: 0.26em; gap: 10px; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-image .frame{ aspect-ratio: 3/4; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-bottom{ grid-template-columns: 1fr; gap: 22px; margin-top: 50px; padding-top: 26px; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-bottom > div{ font-size: 15px; line-height: 1.55; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-bottom strong{ font-size: 10px; letter-spacing: 0.28em; margin-bottom: 8px; }

    /* 02 — Lab quote */
    body:has(.cover[data-screen-label="01 Cover"]) .lab{ padding: 70px 0 64px; }
    body:has(.cover[data-screen-label="01 Cover"]) .lab-mark{ font-size: 22px; margin-bottom: 22px; }
    body:has(.cover[data-screen-label="01 Cover"]) .lab-quote{ font-size: 22px; line-height: 1.34; }
    body:has(.cover[data-screen-label="01 Cover"]) .lab-footer{ flex-direction: column; gap: 10px; margin-top: 32px; font-size: 9.5px; letter-spacing: 0.26em; }
    body:has(.cover[data-screen-label="01 Cover"]) .lab-footer .hair{ display: none; }

    /* 03 — Diptych */
    body:has(.cover[data-screen-label="01 Cover"]) .diptych{ padding: 30px 0 70px; }
    body:has(.cover[data-screen-label="01 Cover"]) .diptych-grid{ gap: 22px; }
    body:has(.cover[data-screen-label="01 Cover"]) .diptych-headline{ font-size: 34px; line-height: 1.08; }
    body:has(.cover[data-screen-label="01 Cover"]) .diptych-body{ font-size: 15.5px; max-width: none; line-height: 1.6; }
    body:has(.cover[data-screen-label="01 Cover"]) .floating-tag{
      position: static !important;
      display: inline-block;
      margin-bottom: 14px;
      font-size: 9.5px;
      letter-spacing: 0.2em;
    }

    /* 04 — Dark chapter */
    body:has(.cover[data-screen-label="01 Cover"]) .dark-chapter{ padding: 70px 0 80px; margin-top: 0; }
    body:has(.cover[data-screen-label="01 Cover"]) .dark-grid{ gap: 36px; }
    body:has(.cover[data-screen-label="01 Cover"]) .dark-image{ aspect-ratio: 3/4.2; max-height: none; }
    body:has(.cover[data-screen-label="01 Cover"]) .dark-title{ font-size: 36px; line-height: 1.05; }
    body:has(.cover[data-screen-label="01 Cover"]) .dark-body{ font-size: 15.5px; line-height: 1.65; max-width: none; }
    body:has(.cover[data-screen-label="01 Cover"]) .dark-meta{ grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; padding-top: 18px; }

    /* 05 — Overlap (flatlay + veil) */
    body:has(.cover[data-screen-label="01 Cover"]) .overlap{ padding: 70px 0 50px; }
    body:has(.cover[data-screen-label="01 Cover"]) .overlap-text h3{ font-size: 24px; line-height: 1.22; }
    body:has(.cover[data-screen-label="01 Cover"]) .overlap .flatlay .frame{ aspect-ratio: 3/2; }
    body:has(.cover[data-screen-label="01 Cover"]) .overlap .veil .frame{ aspect-ratio: 3/4.3; }
    body:has(.cover[data-screen-label="01 Cover"]) .caption{ font-size: 9.5px; letter-spacing: 0.16em; }

    /* 06 — Information */
    body:has(.cover[data-screen-label="01 Cover"]) .info{ padding: 70px 0 70px; }
    body:has(.cover[data-screen-label="01 Cover"]) .info-head{ margin-bottom: 44px; gap: 22px; }
    body:has(.cover[data-screen-label="01 Cover"]) .info-head h2{ font-size: 44px; line-height: 1.02; }
    body:has(.cover[data-screen-label="01 Cover"]) .info-head p{ font-size: 15.5px; max-width: none; line-height: 1.6; }
    body:has(.cover[data-screen-label="01 Cover"]) .info-grid{ grid-template-columns: 1fr; row-gap: 26px; column-gap: 0; }
    body:has(.cover[data-screen-label="01 Cover"]) .info-item{ grid-template-columns: 40px 1fr; gap: 12px; padding-top: 18px; }
    body:has(.cover[data-screen-label="01 Cover"]) .info-item h4{ font-size: 19px; margin-bottom: 6px; }
    body:has(.cover[data-screen-label="01 Cover"]) .info-item p{ font-size: 14.5px; line-height: 1.55; }
    body:has(.cover[data-screen-label="01 Cover"]) .info-item .num{ font-size: 10px; }
    body:has(.cover[data-screen-label="01 Cover"]) .info-foot{ font-size: 13.5px; margin-top: 44px; }

    /* 07 — Quiet Frames */
    body:has(.cover[data-screen-label="01 Cover"]) .desert{ padding: 70px 0 60px; }
    body:has(.cover[data-screen-label="01 Cover"]) .desert-head{ margin-bottom: 44px; }
    body:has(.cover[data-screen-label="01 Cover"]) .desert-head h2{ font-size: 54px; }
    body:has(.cover[data-screen-label="01 Cover"]) .desert-poem{ font-size: 17px; line-height: 1.55; margin-bottom: 24px; }
    body:has(.cover[data-screen-label="01 Cover"]) .desert-caption{
      flex-direction: column;
      gap: 6px;
      font-size: 9.5px;
      letter-spacing: 0.18em;
      margin-top: 22px;
    }

    /* 08 — Between Moments */
    body:has(.cover[data-screen-label="01 Cover"]) .fragments{ padding: 40px 0 70px; }
    body:has(.cover[data-screen-label="01 Cover"]) .fragments-grid{ gap: 26px 0; }
    body:has(.cover[data-screen-label="01 Cover"]) .fragments-header{ margin-bottom: 44px; gap: 18px; }
    body:has(.cover[data-screen-label="01 Cover"]) .fragments-header h2{ font-size: 54px; line-height: 1; margin-top: 10px; }
    body:has(.cover[data-screen-label="01 Cover"]) .fragments-header p{ font-size: 15.5px; max-width: none; line-height: 1.6; }
    body:has(.cover[data-screen-label="01 Cover"]) .frag-1,
body:has(.cover[data-screen-label="01 Cover"]) .frag-4{ margin-top: 0 !important; }
    body:has(.cover[data-screen-label="01 Cover"]) .frag-overlay{ top: 6%; left: 7%; right: 8%; }
    body:has(.cover[data-screen-label="01 Cover"]) .frag-overlay-label{
      font-size: 9px;
      letter-spacing: 0.26em;
      margin-bottom: 14px;
      padding-bottom: 10px;
    }
    body:has(.cover[data-screen-label="01 Cover"]) .frag-overlay h3{ font-size: 19px; line-height: 1.24; }
    body:has(.cover[data-screen-label="01 Cover"]) .frag-overlay h3 .sm{ font-size: 0.72em; margin-top: 12px; line-height: 1.5; }
    body:has(.cover[data-screen-label="01 Cover"]) .frag-cap{ font-size: 9.5px; letter-spacing: 0.16em; margin-top: 10px; }

    /* 09 — Pricing */
    body:has(.cover[data-screen-label="01 Cover"]) .pricing{ padding: 70px 0 56px; }
    body:has(.cover[data-screen-label="01 Cover"]) .pricing-head{ margin-bottom: 44px; }
    body:has(.cover[data-screen-label="01 Cover"]) .pricing-head h2{ font-size: 48px; }
    body:has(.cover[data-screen-label="01 Cover"]) .pricing-head p{ font-size: 15.5px; }
    body:has(.cover[data-screen-label="01 Cover"]) .menu-row{
      grid-template-columns: 28px 1fr auto;
      gap: 12px;
      padding: 22px 0 18px;
    }
    body:has(.cover[data-screen-label="01 Cover"]) .menu-row .num{ font-size: 10px; }
    body:has(.cover[data-screen-label="01 Cover"]) .menu-row .name{ font-size: 21px; }
    body:has(.cover[data-screen-label="01 Cover"]) .menu-row .price{ font-size: 21px; }
    body:has(.cover[data-screen-label="01 Cover"]) .menu-row .desc{ font-size: 13.5px; margin-top: 4px; }
    body:has(.cover[data-screen-label="01 Cover"]) .menu-foot{ font-size: 13.5px; margin-top: 22px; padding: 0 8px; }

    /* 10 — Collection */
    body:has(.cover[data-screen-label="01 Cover"]) .collection{ padding: 50px 0 70px; }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-card{ display: block; }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-card .frame{ min-height: 0; aspect-ratio: 3/3.4; }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-body{ padding: 36px 26px 42px; }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-stamp{
      top: 14px; right: 14px;
      font-size: 8.5px;
      letter-spacing: 0.22em;
      padding: 5px 8px;
    }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-body h3{ font-size: 34px; line-height: 1.05; }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-price{ font-size: 26px; margin-bottom: 18px; }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-lede{ font-size: 15px; max-width: none; line-height: 1.6; }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-list li{ font-size: 15px; grid-template-columns: 22px 1fr; gap: 12px; padding: 12px 0; }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-list li .ix{ font-size: 9.5px; }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-addl{ font-size: 13.5px; }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-cta{
      width: 100%;
      justify-content: center;
      margin-top: 28px;
      font-size: 10.5px;
      letter-spacing: 0.26em;
      padding: 15px 22px;
    }

    /* 11 — Closing */
    body:has(.cover[data-screen-label="01 Cover"]) .closing{ padding: 70px 0 64px; }
    body:has(.cover[data-screen-label="01 Cover"]) .closing-head{ margin-bottom: 36px; }
    body:has(.cover[data-screen-label="01 Cover"]) .closing-head h2{ font-size: 46px; line-height: 1.02; }
    body:has(.cover[data-screen-label="01 Cover"]) .closing-caption{
      flex-direction: column;
      gap: 6px;
      font-size: 9.5px;
      letter-spacing: 0.18em;
      margin-top: 22px;
    }
    body:has(.cover[data-screen-label="01 Cover"]) .closing-quote{ font-size: 18.5px; line-height: 1.5; margin-top: 56px; padding: 0 6px; }
    body:has(.cover[data-screen-label="01 Cover"]) .closing-sig{ margin-top: 36px; font-size: 9.5px; letter-spacing: 0.28em; }
  
}

  /* ------- Very small (≤ 380px) ------- */
  @media (max-width: 380px){

    body:has(.cover[data-screen-label="01 Cover"]) .stage{ padding: 0 18px; }
    body:has(.cover[data-screen-label="01 Cover"]) .cover-title{ font-size: 48px; }
    body:has(.cover[data-screen-label="01 Cover"]) .lab-quote{ font-size: 20px; }
    body:has(.cover[data-screen-label="01 Cover"]) .diptych-headline{ font-size: 30px; }
    body:has(.cover[data-screen-label="01 Cover"]) .dark-title{ font-size: 32px; }
    body:has(.cover[data-screen-label="01 Cover"]) .info-head h2{ font-size: 38px; }
    body:has(.cover[data-screen-label="01 Cover"]) .desert-head h2{ font-size: 46px; }
    body:has(.cover[data-screen-label="01 Cover"]) .fragments-header h2{ font-size: 46px; }
    body:has(.cover[data-screen-label="01 Cover"]) .pricing-head h2{ font-size: 42px; }
    body:has(.cover[data-screen-label="01 Cover"]) .collection-body h3{ font-size: 30px; }
    body:has(.cover[data-screen-label="01 Cover"]) .closing-head h2{ font-size: 40px; }
    body:has(.cover[data-screen-label="01 Cover"]) .menu-row .name,
body:has(.cover[data-screen-label="01 Cover"]) .menu-row .price{ font-size: 19px; }
  
}

body:has(.cover[data-screen-label="01 Cover"]) .site-nav:not(.is-scrolled) {
  background: rgba(253, 251, 246, 0.94);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body:has(.cover[data-screen-label="01 Cover"]) .cover {
  padding-top: clamp(136px, 12vw, 172px);
}

@media (max-width: 760px) {
  body:has(.cover[data-screen-label="01 Cover"]) .cover {
    padding-top: 118px;
  }
}