/* Ruizz Photography homepage concept. Tokens from ../BRAND.md; motion values from ../MOTION.md. */
:root {
  --canvas: #FDFCFA; --cream: #F9ECDF; --sand: #F3E7DC; --tan: #E1C9B3; --brown: #8A6953;
  --grey: #5F5C5C; --ink: #1D1D1D; --white: #fff;
  --sage: #8DA291; --peach: #F3CCBB;
  --f-display: "Playfair Display SC", "Playfair Display", Georgia, serif;
  --f-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  --f-script: "Great Vibes", cursive;
  --r: 20px; --gut: 8px; --topbar: 40px;
  --e-sig: cubic-bezier(.4, 0, .2, 1); --e-emph: cubic-bezier(.05, .7, .1, 1); --e-accel: cubic-bezier(.3, 0, 1, 1);
  --t-quick: 350ms; --t-std: 500ms; --t-slow: 800ms;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
/* until a photo arrives, a blurred copy of it (24px LQIP inlined by build.py) fills its box: never a flat block */
img[style*="--lq"] { background-image: var(--lq); background-size: cover; background-repeat: no-repeat; background-position: var(--pd, 50% 50%); }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font: 600 14px var(--f-ui); text-decoration: none; }
.skip:focus { top: 12px; }

/* lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- shared controls */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px;
  border-radius: 999px; font: 600 14px/1 var(--f-ui); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-quick) var(--e-sig), color var(--t-quick) var(--e-sig), transform 150ms var(--e-sig);
}
.pill:active { transform: scale(.97); }
.pill-brown { background: var(--brown); color: #fff; }
.pill-brown:hover { background: #7a5c48; }
.pill-cream { background: var(--canvas); color: var(--ink); }
.pill-cream:hover { background: #fff; }
.ic-arrow { width: 18px; height: 18px; flex: none; }
.eyebrow { display: inline-block; font: 600 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--brown); background: var(--sand); padding: 9px 14px; border-radius: 999px; }

/* ---------- 0. intro */
.intro { display: none; }
.intro-on .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: var(--canvas); cursor: pointer;
}
.intro-mark { width: 148px; height: 148px; position: relative; z-index: 1; }
.intro-ap { width: 100%; height: 100%; overflow: visible; }
.ap-ring { font: 600 7.4px var(--f-ui); letter-spacing: 3.2px; fill: #6d6a69; }
.intro-flash {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #fff 36%, rgba(255, 255, 255, 0) 72%);
}
.intro-skip {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; background: none; border: 0;
  font: 500 12px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); padding: 14px 18px; cursor: pointer;
}
.intro.is-fading { opacity: 0; transition: opacity 300ms linear; }

/* ---------- 1. top bar + header */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar); z-index: 81; background: var(--brown); color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0 12px;
  transition: transform var(--t-quick) var(--e-sig);
}
.topbar p { display: flex; align-items: center; gap: 14px; font: 500 13px/1 var(--f-ui); letter-spacing: .02em; white-space: nowrap; }
.topbar-chip {
  background: var(--canvas); color: var(--brown); text-decoration: none; border-radius: 999px; padding: 7px 13px; font-weight: 600; font-size: 12px;
  position: relative;
}
.topbar-chip::after { content: ""; position: absolute; inset: -8px -4px; }
.is-scrolled .topbar { transform: translateY(-100%); }

.hdr { position: fixed; left: 0; right: 0; top: var(--topbar); z-index: 80; padding: 0 var(--gut); transition: top var(--t-quick) var(--e-sig), transform var(--t-quick) var(--e-emph); }
.hdr-in {
  margin: 0 auto; max-width: 100%; height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 22px; border-radius: 18px; color: #fff; background: rgba(253, 252, 250, 0); border: 1px solid rgba(29, 29, 29, 0);
  transition: max-width var(--t-quick) var(--e-sig), height var(--t-quick) var(--e-sig), background-color var(--t-quick) var(--e-sig),
    color var(--t-quick) var(--e-sig), box-shadow var(--t-quick) var(--e-sig), border-color var(--t-quick) var(--e-sig);
}
.is-scrolled .hdr { top: 8px; }
.is-scrolled .hdr-in {
  max-width: 1180px; height: 62px; color: var(--ink); background: rgba(253, 252, 250, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-color: rgba(29, 29, 29, .07); box-shadow: 0 10px 30px -12px rgba(60, 40, 25, .22);
}
.hdr.is-hidden { transform: translateY(calc(-100% - 60px)); transition: top var(--t-quick) var(--e-sig), transform 245ms var(--e-accel); }
.hdr-nav ul { display: flex; gap: 2px; }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none;
  font: 500 14px/1 var(--f-ui); letter-spacing: .01em; transition: background-color var(--t-quick) var(--e-sig);
}
.chip:hover { background: rgba(255, 255, 255, .16); }
.chip.is-on { background: rgba(255, 255, 255, .18); }
.is-scrolled .chip:hover { background: rgba(29, 29, 29, .05); }
.is-scrolled .chip.is-on { background: var(--sand); }
.hdr-logo { position: relative; display: block; width: 196px; height: 47px; transition: width var(--t-quick) var(--e-sig), height var(--t-quick) var(--e-sig); }
.hdr-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity var(--t-quick) var(--e-sig); }
.hdr-logo .lg-d { opacity: 0; }
.is-scrolled .hdr-logo { width: 160px; height: 38px; }
.is-scrolled .hdr-logo .lg-d { opacity: 1; }
.is-scrolled .hdr-logo .lg-w { opacity: 0; }
.hdr-right { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.hdr-link { font: 500 14px/1 var(--f-ui); text-decoration: none; padding: 13px 14px; border-radius: 999px; }
.hdr-link:hover { background: rgba(255, 255, 255, .16); }
.is-scrolled .hdr-link:hover { background: rgba(29, 29, 29, .05); }
.hdr-book { min-height: 44px; }
.hdr-book .short { display: none; }
.hdr-menu { display: none; }

.mmenu { position: fixed; inset: 0; z-index: 79; background: var(--canvas); padding: 112px 28px 40px; display: flex; flex-direction: column; justify-content: space-between; }
.mmenu[hidden] { display: none; }
.mmenu ul { display: grid; gap: 4px; }
.mmenu li a { display: block; font: 400 44px/1.15 var(--f-display); letter-spacing: -.02em; text-decoration: none; padding: 6px 0; }
.mmenu-foot { display: grid; gap: 16px; justify-items: start; font: 500 14px var(--f-ui); color: var(--grey); }
.mmenu-foot p a { text-decoration: none; }
.mmenu li, .mmenu-foot { opacity: 0; transform: translateY(20px); transition: opacity 400ms var(--e-sig), transform 400ms var(--e-sig); transition-delay: calc(var(--i) * 56ms); }
.mmenu.is-open li, .mmenu.is-open .mmenu-foot { opacity: 1; transform: none; }
.menu-open .hdr-in { color: var(--ink); }
.menu-open .hdr-logo .lg-d { opacity: 1; }
.menu-open .hdr-logo .lg-w { opacity: 0; }

/* ---------- 2. hero */
.hero { padding: var(--topbar) var(--gut) 0; }
.hero-frame {
  position: relative; height: calc(calc(var(--vh, 1vh) * 100) - var(--topbar) - var(--gut)); min-height: 560px; border-radius: var(--r);
  overflow: hidden; background: var(--sand); isolation: isolate;
}
.hero-photo { position: absolute; inset: -12% 0 0; }
.hero-kb { position: absolute; inset: 0; }
.hero-img, .hero-photo picture { width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: var(--pd, 50% 50%); }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(24, 16, 10, .42) 0%, rgba(24, 16, 10, 0) 24%),
    radial-gradient(120% 34% at 50% 54%, rgba(24, 16, 10, .30) 0%, rgba(24, 16, 10, 0) 70%),
    linear-gradient(0deg, rgba(24, 16, 10, .46) 0%, rgba(24, 16, 10, 0) 30%);
}
.hero-title {
  position: absolute; left: 30px; right: 30px; top: 54%; transform: translateY(-50%);
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; color: #fff;
  font: 400 clamp(40px, 4.5vw, 78px)/1 var(--f-display); letter-spacing: -.02em; text-shadow: 0 2px 28px rgba(20, 12, 6, .28);
}
.ht { display: block; white-space: nowrap; will-change: transform; }
.hero-foot {
  position: absolute; left: 30px; right: 30px; bottom: 84px; display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .45); color: #fff;
}
.hero-cap { font: 500 12px/1.4 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.hero-cue { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--f-ui); text-decoration: none; padding: 12px 0 12px 12px; }
.ic-down { width: 18px; height: 18px; animation: cue 3s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }

/* before app.js takes over, keep the animated hero pieces still and hidden only when the intro will play */
.js.intro-on:not(.ready) .ht { opacity: 0; }

/* ---------- 3. collage */
.collage { position: relative; background: var(--canvas); }
.collage-stage { position: relative; height: calc(var(--vh, 1vh) * 100); min-height: 640px; overflow: hidden; }
.motion .collage { height: calc(var(--vh, 1vh) * 260); }
.motion .collage-stage { position: sticky; top: 0; }
.print {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); padding: clamp(5px, .5vw, 9px) clamp(5px, .5vw, 9px) clamp(12px, 1.3vw, 22px);
  background: #fff; border-radius: 5px; transform: rotate(var(--rot));
  box-shadow: 0 22px 44px -22px rgba(60, 40, 25, .40), 0 2px 6px rgba(60, 40, 25, .08); will-change: transform;
}
.print img { width: 100%; aspect-ratio: var(--ar); object-fit: cover; object-position: var(--pd, 50% 50%); border-radius: 2px; }
.collage-text {
  position: absolute; inset: 0; margin: auto; height: fit-content; width: min(560px, 40vw); text-align: center;
  font: 400 clamp(19px, 1.55vw, 24px)/1.55 var(--f-body); color: var(--grey);
}

/* ---------- 4. stack */
.stack { position: relative; padding: calc(var(--vh, 1vh) * 14) 0 calc(var(--vh, 1vh) * 18); background: var(--canvas); }
.stack-title {
  position: sticky; top: 92px; z-index: 0; text-align: center; white-space: nowrap;
  font: 400 clamp(56px, 8.6vw, 156px)/.95 var(--f-display); letter-spacing: -.035em; color: var(--ink); padding: 0 2vw;
}
.stack-list { position: relative; z-index: 1; margin-top: calc(var(--vh, 1vh) * 3); }
.scard {
  position: sticky; top: calc(196px + var(--i) * 14px); height: min(640px, calc(calc(var(--vh, 1vh) * 100) - 236px)); min-height: 440px;
  pointer-events: none;
}
.scard-gap { height: calc(var(--vh, 1vh) * 30); }
.scard-gap:first-child { height: 0; }
.scard-body { height: 100%; display: grid; grid-template-columns: 1fr min(560px, 40vw) 1fr; column-gap: 56px; }
.scard-photo {
  grid-column: 2; grid-row: 1; position: relative; overflow: hidden; border-radius: var(--r); pointer-events: auto;
  transform-origin: 50% 0; background: var(--sand); box-shadow: 0 30px 60px -40px rgba(60, 40, 25, .45);
}
.scard-photo img { position: absolute; left: 0; top: -4%; width: 100%; height: 108%; object-fit: cover; object-position: var(--pd, 50% 50%); }
.scard-dim { position: absolute; inset: 0; background: #1D1D1D; opacity: 0; pointer-events: none; }
.scard-cap { grid-row: 1; pointer-events: auto; max-width: 300px; }
.scard[data-side="left"] .scard-cap { grid-column: 1; justify-self: end; align-self: center; text-align: right; }
.scard[data-side="right"] .scard-cap { grid-column: 3; justify-self: start; align-self: end; padding-bottom: 6%; }
.scard-cap h3 { font: 400 34px/1.05 var(--f-display); letter-spacing: -.015em; }
.scard-line { margin-top: 12px; font: 400 19px/1.45 var(--f-body); color: var(--grey); }
.scard-price { margin-top: 14px; font: 600 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--brown); }
.scard-link {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 14px/1 var(--f-ui);
  text-decoration: none; border-bottom: 1px solid rgba(29, 29, 29, .25);
}
.scard-link:hover { border-color: var(--ink); }
.scard-last .scard-photo { grid-column: 2; }
.scard-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24, 16, 10, .62) 0%, rgba(24, 16, 10, .12) 52%, rgba(24, 16, 10, 0) 70%); }
.scard-over { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; color: #fff; padding: 0 28px; display: grid; justify-items: center; gap: 14px; }
.scard-over h3 { font: 400 clamp(32px, 2.8vw, 44px)/1.05 var(--f-display); letter-spacing: -.02em; }
.scard-over p { font: 400 18px/1.45 var(--f-body); max-width: 340px; }
.boudoir { max-width: 640px; margin: 0 auto; padding: calc(var(--vh, 1vh) * 4) 24px calc(var(--vh, 1vh) * 16); text-align: center; font: 400 16px/1.65 var(--f-body); color: var(--grey); }
.boudoir a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

/* ---------- 5. arc */
.arc { position: relative; background: #1b1714; color: #fff; }
.arc-stage { position: relative; height: calc(var(--vh, 1vh) * 100); min-height: 560px; overflow: hidden; }
.motion .arc { height: calc((var(--n) + 1) * calc(var(--vh, 1vh) * 45) + calc(var(--vh, 1vh) * 100)); }
.motion .arc-stage { position: sticky; top: 0; }
.arc-slide { position: absolute; inset: 0; overflow: hidden; z-index: calc(var(--k) + 1); }
.arc-slide picture, .arc-slide img { width: 100%; height: 100%; }
.arc-slide img { object-fit: cover; object-position: var(--pd, 50% 50%); }
.arc-slide.is-off { visibility: hidden; } /* covered or not yet reached: not painted (app.js keeps 3 live) */
.arc-dim { position: absolute; inset: 0; background: #0d0907; opacity: 0; }
.arc-slide figcaption { display: none; }
.arc-shade {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: radial-gradient(70% 46% at 50% 50%, rgba(18, 12, 8, .46) 0%, rgba(18, 12, 8, 0) 72%),
    linear-gradient(0deg, rgba(18, 12, 8, .55) 0%, rgba(18, 12, 8, 0) 28%), linear-gradient(180deg, rgba(18, 12, 8, .28) 0%, rgba(18, 12, 8, 0) 22%);
}
.arc-line {
  position: absolute; inset: 0; z-index: 31; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 8vw; font: 400 clamp(44px, 6.4vw, 112px)/1.02 var(--f-display); letter-spacing: -.025em;
  text-shadow: 0 2px 30px rgba(10, 6, 4, .35);
}
.arc-line > span { max-width: 13.5em; }
.lw { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }
.arc-labels { position: absolute; z-index: 32; left: 30px; bottom: 96px; height: 20px; width: 60vw; overflow: hidden; }
.arc-label { position: absolute; left: 0; top: 0; font: 600 12px/20px var(--f-ui); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.arc-label + .arc-label { opacity: 0; }
.arc-more {
  position: absolute; z-index: 32; right: 30px; bottom: 84px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 600 13px/1 var(--f-ui); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4);
}

/* ---------- 6. closer look */
.closer { position: relative; background: var(--canvas); }
.closer-stage { position: relative; height: calc(var(--vh, 1vh) * 100); min-height: 560px; overflow: hidden; }
.motion .closer { height: calc(var(--vh, 1vh) * 220); }
.motion .closer-stage { position: sticky; top: 0; }
.closer-frame { position: absolute; inset: var(--gut); border-radius: var(--r); overflow: hidden; background: var(--sand); }
.motion .closer-frame { inset: 0; border-radius: 0; }
.closer-frame picture, .closer-img { width: 100%; height: 100%; }
.closer-img { object-fit: cover; object-position: var(--pd, 50% 50%); }
.closer-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24, 16, 10, .55) 0%, rgba(24, 16, 10, .08) 46%, rgba(24, 16, 10, 0) 60%), linear-gradient(90deg, rgba(24, 16, 10, .35) 0%, rgba(24, 16, 10, 0) 45%); }
.closer-text {
  position: absolute; left: 7vw; bottom: calc(var(--vh, 1vh) * 15); display: grid; justify-items: start; text-align: left; color: #fff;
  text-shadow: 0 2px 30px rgba(10, 6, 4, .35); font-weight: 400;
}
.cl-meet { font: 400 clamp(44px, 4.6vw, 76px)/.9 var(--f-script); margin: 0 0 -.12em .12em; }
.cl-name { font: 400 clamp(64px, 8vw, 140px)/.95 var(--f-display); letter-spacing: -.03em; }
.cl-sub { margin-top: 18px; font: 500 12px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; }
@media (min-width: 701px) {
  .closer-text { color: var(--ink); text-shadow: none; top: 0; bottom: 0; align-content: center; }
  .closer-text .cl-sub { color: var(--brown); }
  .closer-shade { background: linear-gradient(90deg, rgba(253, 252, 250, .55) 0%, rgba(253, 252, 250, 0) 42%); }
}

/* ---------- 7. words */
.words { max-width: 1240px; margin: 0 auto; padding: calc(var(--vh, 1vh) * 18) 48px calc(var(--vh, 1vh) * 12); }
.words-big { font: 400 clamp(28px, 3.1vw, 48px)/1.24 var(--f-body); letter-spacing: -.018em; color: var(--ink); }
.words-2 { margin-top: .9em; }
.motion .wd { opacity: .18; }
.words-row { margin-top: calc(var(--vh, 1vh) * 12); display: grid; grid-template-columns: 1fr 420px; gap: 8vw; align-items: end; }
.words-side { max-width: 360px; display: grid; gap: 26px; justify-items: start; }
.words-side p { font: 400 18px/1.6 var(--f-body); color: var(--grey); }
.ap-mini { width: 22px; height: 22px; margin-right: -6px; }
.words-portrait { border-radius: var(--r); overflow: hidden; aspect-ratio: 4/5; background: var(--sand); }
.words-portrait img { width: 100%; height: 116%; object-fit: cover; object-position: var(--pd, 50% 30%); margin-top: -8%; }

/* ---------- 8. how it works */
.how { padding: calc(var(--vh, 1vh) * 12) 0 calc(var(--vh, 1vh) * 10); text-align: center; }
.how-title { margin-top: 26px; font: 400 clamp(38px, 4.4vw, 72px)/1.04 var(--f-display); letter-spacing: -.025em; }
.how-title span { display: block; }
.how-cards { margin: calc(var(--vh, 1vh) * 9) auto 0; max-width: 1360px; padding: 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
.hcard figure { position: relative; aspect-ratio: 4/5; border-radius: var(--r); overflow: hidden; background: var(--sand); }
.hcard img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pd, 50% 50%); transition: transform var(--t-slow) var(--e-sig); }
.hcard:hover img { transform: scale(1.03); }
.hcard-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(24, 16, 10, .62) 0%, rgba(24, 16, 10, 0) 45%); }
.hcard figcaption { position: absolute; left: 24px; right: 24px; bottom: 22px; color: #fff; display: grid; gap: 8px; }
.hcard-num { font: 600 12px/1 var(--f-ui); letter-spacing: .18em; }
.hcard-title { font: 400 clamp(26px, 2.2vw, 34px)/1.05 var(--f-display); letter-spacing: -.015em; }
.hcard p { margin-top: 16px; padding: 0 4px; font: 400 17px/1.55 var(--f-body); color: var(--grey); max-width: 380px; }

/* ---------- 9. rating */
.rating { padding: calc(var(--vh, 1vh) * 6) 24px calc(var(--vh, 1vh) * 14); text-align: center; display: grid; justify-items: center; gap: 14px; }
.rating-row { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; padding: 6px 4px; }
.rating-num { font: 400 72px/1 var(--f-display); letter-spacing: -.02em; }
.rating-stars { display: inline-flex; gap: 3px; color: var(--brown); }
.rating-stars svg { width: 22px; height: 22px; }
.rating-on { font: 500 16px/1 var(--f-ui); border-bottom: 1px solid rgba(29, 29, 29, .25); padding-bottom: 4px; }
.rating-tags { font: 600 12px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--brown); }

/* ---------- 9b. lately on Instagram (snapshot; live feed on the real site) */
.ig { max-width: 1360px; margin: 0 auto; padding: calc(var(--vh, 1vh) * 4) 24px calc(var(--vh, 1vh) * 14); }
.ig-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.ig-handle { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--brown); }
.ig-handle .ig-glyph { width: 16px; height: 16px; }
.ig-title { margin-top: 14px; font: 400 clamp(36px, 3.6vw, 60px)/1.02 var(--f-display); letter-spacing: -.025em; }
.ig-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.ig-tiktok { display: inline-flex; align-items: center; min-height: 44px; font: 500 14px/1 var(--f-ui); color: var(--grey); text-decoration: none; border-bottom: 1px solid rgba(29, 29, 29, .2); }
.ig-tiktok:hover { color: var(--ink); border-color: var(--ink); }
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ig-tile a { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--sand); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--e-sig); }
.ig-reel { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45)); }
.ig-hover { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(29, 29, 29, .28); opacity: 0; transition: opacity var(--t-quick) var(--e-sig); }
.ig-hover .ig-glyph { width: 30px; height: 30px; }
.ig-tile a:hover img, .ig-tile a:focus-visible img { transform: scale(1.04); }
.ig-tile a:hover .ig-hover, .ig-tile a:focus-visible .ig-hover { opacity: 1; }
.ig-tile a:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }
@media (max-width: 1100px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 10. footer */
.ftr { background: var(--canvas); border-top: 1px solid rgba(29, 29, 29, .08); }
.ftr-main { max-width: 1360px; margin: 0 auto; padding: calc(var(--vh, 1vh) * 11) 48px calc(var(--vh, 1vh) * 9); display: grid; grid-template-columns: 1fr 1.25fr; gap: 6vw; }
.ftr-brand { display: grid; gap: 28px; justify-items: start; align-content: start; }
.ftr-line { font: 400 clamp(40px, 4.2vw, 66px)/1.02 var(--f-display); letter-spacing: -.025em; max-width: 9.5em; }
.ftr-contact { font: 500 14px/1.6 var(--f-ui); color: var(--grey); }
.ftr-contact a { text-decoration: none; white-space: nowrap; }
.ftr-contact a:hover { color: var(--ink); text-decoration: underline; }
.ftr-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; align-content: start; padding-top: 10px; }
.ftr-col h3 { font: 600 13px/1 var(--f-ui); letter-spacing: .02em; margin-bottom: 14px; }
.ftr-col ul { display: grid; gap: 2px; }
.ftr-col a, .ftr-hours { display: inline-block; font: 400 15px/1.4 var(--f-body); color: var(--grey); text-decoration: none; padding: 5px 0; }
.ftr-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ftr-hours { color: #7c7877; font-size: 14px; }
/* the band keeps the photo's own 3:2 shape (capped at one screen) and shows it from the sky down, so her head
   always sits about 30% down with headroom; the cream fades in over the sky only (top 22%), never over her */
.ftr-band { position: relative; height: min(calc(var(--vh, 1vh) * 100), 66.667vw); min-height: 420px; overflow: hidden; background: var(--canvas); }
.ftr-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pd, 50% 20%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .4) 9%, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .4) 9%, #000 22%);
}
.ftr-band::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(0deg, rgba(24, 16, 10, .45), rgba(24, 16, 10, 0)); pointer-events: none; }
.ftr-legal { position: absolute; z-index: 1; left: 0; right: 0; bottom: 20px; text-align: center; color: #fff; font: 500 12px/1.5 var(--f-ui); letter-spacing: .04em; padding: 0 24px; }

/* desktop (2026-10-19 review): one compact footer instead of text + a full-screen photo band. Her high-res
   blue-gown photo (4276, 5450 px) sits bottom-right in its own 3:2 shape, so nothing is cropped; its left side and
   its sky fade into the cream, so the text on the left only ever sits on cream or on the faded sky, never on water. */
.ftr-photo, .ftr-legal-d { display: none; }
@media (min-width: 901px) {
  .ftr { position: relative; overflow: hidden; min-height: min(calc(var(--vh, calc(var(--vh, 1vh) * 1)) * 92), 46vw, 860px); display: flex; flex-direction: column; }
  .ftr-main { position: relative; z-index: 1; width: 100%; grid-template-columns: 1fr; gap: 52px; padding: clamp(64px, 7vw, 104px) 48px 40px; }
  .ftr-brand, .ftr-cols { max-width: min(660px, 47vw); }
  .ftr-cols { grid-template-columns: repeat(4, max-content); gap: 22px clamp(28px, 3vw, 48px); }
  .ftr-photo { display: block; position: absolute; right: 0; bottom: 0; width: min(68vw, 1300px); aspect-ratio: 3 / 2; pointer-events: none; }
  .ftr-pimg {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 16%, rgba(0, 0, 0, .7) 34%, #000 48%), linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 12%, #000 26%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 16%, rgba(0, 0, 0, .7) 34%, #000 48%), linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 12%, #000 26%);
    mask-composite: intersect;
  }
  /* a soft cream wash behind the text column keeps every word on a calm background */
  .ftr::before { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: min(62vw, 980px); pointer-events: none;
    background: linear-gradient(90deg, rgba(253, 252, 250, .92) 0%, rgba(253, 252, 250, .78) 55%, rgba(253, 252, 250, 0) 100%); }
  .ftr-legal-d { display: block; position: relative; z-index: 1; margin-top: auto; padding: 0 48px 28px; max-width: 1360px; width: 100%; margin-left: auto; margin-right: auto; text-align: left; color: var(--grey); font: 500 12px/1.5 var(--f-ui); letter-spacing: .04em; }
  .ftr-band { display: none; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .ftr-cols { grid-template-columns: repeat(2, max-content); }
  .ftr-photo { width: 74vw; }
}

/* footer credit links to ADM; a quiet underline so it reads as a link without competing with her footer */
.ftr-credit { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; }
.ftr-credit:hover { text-decoration-thickness: 2px; }
.ftr-legal-d .ftr-credit:hover { color: var(--ink); }

/* ---------- 11-12. fixed: badge + chat */
.badge {
  position: fixed; left: 14px; bottom: 14px; z-index: 69; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: rgba(253, 252, 250, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(29, 29, 29, .08); box-shadow: 0 10px 28px -14px rgba(60, 40, 25, .35);
  font: 500 12px/1 var(--f-ui); letter-spacing: .02em; color: var(--ink); text-decoration: none;
}
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brown); }
.badge .short { display: none; }

.chat { position: fixed; right: 14px; bottom: 14px; z-index: 70; }
.chat-launch {
  display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 7px 20px 7px 7px; border-radius: 999px; cursor: pointer;
  background: var(--canvas); border: 1px solid rgba(29, 29, 29, .08); box-shadow: 0 16px 36px -16px rgba(60, 40, 25, .45);
  transition: transform var(--t-quick) var(--e-sig), opacity var(--t-quick) var(--e-sig);
}
.chat-launch:hover { transform: translateY(-2px); }
.chat-launch-text { font: 600 13px/1.25 var(--f-ui); text-align: left; }
.chat-av { position: relative; width: 44px; height: 44px; flex: none; }
.chat-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.chat-av.sm { width: 38px; height: 38px; }
.chat-on { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--sage); border: 2px solid var(--canvas); animation: online 2s ease-in-out infinite; }
@keyframes online { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.js:not(.ready) .chat-launch { opacity: 0; }
.no-js .chat, .no-js .intro { display: none; }

/* ---------- 13. follow camera (desktop, fine pointer; enabled by app.js) */
.fcam { position: fixed; left: 0; top: 0; z-index: 66; width: 60px; height: 46px; pointer-events: none; will-change: transform; }
.fcam[hidden], .fcam-flash[hidden] { display: none; }
.fcam-vis { position: relative; width: 100%; height: 100%; opacity: 0; transform: scale(.8); }
.fcam-act { position: relative; z-index: 1; width: 100%; height: 100%; }
.fcam-svg { display: block; width: 60px; height: 46px; overflow: visible; filter: drop-shadow(0 6px 10px rgba(60, 40, 25, .28)); }
.fcam-print {
  position: absolute; z-index: 0; left: 13px; top: 24px; width: 34px; height: 40px; padding: 3px 3px 7px; background: #fff;
  border-radius: 2px; box-shadow: 0 6px 12px -4px rgba(60, 40, 25, .38); opacity: 0;
}
.fcam-print img { width: 100%; height: 100%; object-fit: cover; background: var(--sand); opacity: 0; }
.fcam-flash {
  position: fixed; inset: 0; z-index: 64; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), #fff 0%, rgba(255, 255, 255, .78) 15%, rgba(255, 255, 255, 0) 60%);
}

.chat-panel {
  position: absolute; right: 0; bottom: 72px; width: 384px; height: min(600px, calc(calc(var(--vh, 1vh) * 100) - 120px)); display: flex; flex-direction: column;
  background: var(--canvas); border-radius: var(--r); border: 1px solid rgba(29, 29, 29, .08); overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(40, 26, 16, .45), 0 4px 14px rgba(40, 26, 16, .08); transform-origin: 100% 100%;
}
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; border-bottom: 1px solid rgba(29, 29, 29, .07); background: #fff; }
.chat-who { display: grid; line-height: 1.2; flex: 1; }
.chat-who strong { font: 600 14px var(--f-ui); }
.chat-who span { font: 400 13px var(--f-body); color: var(--grey); }
.chat-tag { font: 600 10px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; background: var(--sand); color: var(--brown); padding: 6px 9px; border-radius: 999px; }
.chat-close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.chat-close svg { width: 20px; height: 20px; }
.chat-close:hover { background: rgba(29, 29, 29, .05); }
.chat-log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; font: 400 15px/1.5 var(--f-body); }
.msg-bot { align-self: flex-start; background: var(--sand); border-bottom-left-radius: 6px; }
.msg-me { align-self: flex-end; background: var(--brown); color: #fff; border-bottom-right-radius: 6px; }
.msg .pill { margin-top: 10px; min-height: 40px; font-size: 13px; padding: 0 16px; }
.msg-link { display: inline-block; margin-top: 6px; font: 600 13px var(--f-ui); color: var(--brown); }
.msg.is-in { animation: msg-in 350ms var(--e-sig) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.typing { display: inline-flex; gap: 5px; padding: 15px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #9c8b7f; animation: dot 1.2s var(--e-sig) infinite; }
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 10px; }
.chat.is-talking .chat-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.chat.is-talking .chat-chips::-webkit-scrollbar { display: none; }
.chat.is-talking .cchip { flex: none; }
.cchip {
  border: 1px solid var(--tan); background: #fff; border-radius: 999px; padding: 0 14px; min-height: 44px; cursor: pointer;
  font: 500 13px/1 var(--f-ui); transition: background-color 150ms var(--e-sig), border-color 150ms var(--e-sig);
}
.cchip:hover { background: var(--cream); border-color: var(--brown); }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid rgba(29, 29, 29, .07); background: #fff; }
.chat-input { flex: 1; min-width: 0; height: 46px; border-radius: 999px; border: 1px solid rgba(29, 29, 29, .14); padding: 0 16px; font: 400 16px var(--f-body); background: var(--canvas); color: var(--ink); }
.chat-input:focus { outline: none; border-color: var(--brown); }
.chat-send { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--brown); color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat[data-open="true"] .chat-launch-text { display: none; }
.chat-peek {
  position: absolute; right: 0; bottom: 70px; width: min(300px, calc(100vw - 24px)); display: flex; align-items: flex-start; gap: 4px;
  background: var(--canvas); border: 1px solid rgba(29, 29, 29, .08); border-radius: 16px 16px 6px 16px; padding: 4px 4px 4px 0;
  box-shadow: 0 18px 40px -18px rgba(60, 40, 25, .45); animation: msg-in 350ms var(--e-sig) both;
}
.chat-peek[hidden] { display: none; }
.chat-peek-open { flex: 1; text-align: left; border: 0; background: none; padding: 12px 6px 12px 16px; font: 400 14px/1.45 var(--f-body); cursor: pointer; }
.chat-peek-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.chat-peek-x svg { width: 18px; height: 18px; }
.chat[data-open="true"] .chat-launch { padding-right: 7px; }

/* ---------- reveals (set by app.js; visible without it) */
.motion [data-reveal] { will-change: transform, opacity; }

/* ---------- tablet */
@media (max-width: 1100px) {
  .hdr-nav .chip { padding: 0 10px; }
  .hdr-link { display: none; }
  .scard-body { grid-template-columns: 1fr min(480px, 46vw) 1fr; column-gap: 28px; }
  .scard-cap h3 { font-size: 28px; }
  .scard-line { font-size: 17px; }
  .ftr-main { grid-template-columns: 1fr; }
}
@media (max-width: 900px) and (min-width: 701px) {
  .hdr-nav { display: none; }
  .hdr-in { grid-template-columns: auto 1fr; }
  .hdr-logo { order: -1; }
  .hdr-menu { display: inline-grid; }
}

/* ---------- phones */
@media (max-width: 700px) {
  :root { --topbar: 38px; --gut: 6px; --r: 18px; }
  body { font-size: 16px; }
  .topbar p { gap: 10px; font-size: 12px; }
  .topbar-chip { padding: 6px 11px; }
  .hdr-in { height: 64px; padding: 0 6px 0 14px; grid-template-columns: auto 1fr; }
  .hdr-nav { display: none; }
  .hdr-logo { width: 150px; height: 36px; }
  .is-scrolled .hdr-logo { width: 132px; height: 32px; }
  .is-scrolled .hdr-in { height: 58px; }
  .hdr-book { min-height: 44px; padding: 0 16px; }
  .hdr-book .long { display: none; }
  .hdr-book .short { display: inline; }
  .hdr-menu {
    display: inline-grid; place-content: center; gap: 6px; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0;
  }
  .hdr-menu span { display: block; width: 22px; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform var(--t-quick) var(--e-sig); }
  .menu-open .hdr-menu span:first-child { transform: translateY(3.8px) rotate(45deg); }
  .menu-open .hdr-menu span:last-child { transform: translateY(-3.8px) rotate(-45deg); }

  .hero-frame { height: calc(calc(var(--svh, 1svh) * 100) - var(--topbar) - var(--gut)); min-height: 520px; }
  .hero-photo { inset: 0; }
  .hero-title { top: auto; bottom: 150px; transform: none; flex-direction: column; align-items: stretch; gap: 2px; left: 18px; right: 18px; font-size: clamp(26px, 8.1vw, 40px); line-height: 1.06; }
  .ht-l { align-self: flex-start; }
  .ht-r { align-self: flex-end; }
  .hero-foot { left: 18px; right: 18px; bottom: 74px; padding-top: 12px; }
  .hero-cap { font-size: 10.5px; letter-spacing: .12em; max-width: 230px; }
  .hero-img { object-position: var(--pm, var(--pd, 50% 50%)); }
  .hero-shade {
    background: linear-gradient(180deg, rgba(24, 16, 10, .40) 0%, rgba(24, 16, 10, 0) 22%),
      linear-gradient(0deg, rgba(24, 16, 10, .66) 0%, rgba(24, 16, 10, .30) 30%, rgba(24, 16, 10, 0) 48%);
  }

  .collage-stage { min-height: 600px; }
  .motion .collage { height: calc(var(--vh, 1vh) * 220); }
  .print { left: var(--mx); top: var(--my); width: var(--mw); padding: 4px 4px 11px; }
  .print-mhide { display: none; }
  .collage-text { width: 84vw; font-size: 18px; line-height: 1.55; }

  .stack { padding: calc(var(--vh, 1vh) * 10) 0 calc(var(--vh, 1vh) * 12); }
  .stack-title { position: relative; top: auto; white-space: normal; font-size: 15vw; line-height: .98; padding: 0 16px; margin-bottom: calc(var(--vh, 1vh) * 6); }
  .scard { top: calc(70px + var(--i) * 10px); height: auto; min-height: 0; margin: 0 14px; }
  .scard-gap { height: calc(var(--vh, 1vh) * 14); }
  .scard-body { display: block; height: auto; background: var(--cream); border-radius: var(--r); overflow: hidden; transform-origin: 50% 0; box-shadow: 0 24px 50px -30px rgba(60, 40, 25, .5); pointer-events: auto; }
  .scard-photo { height: min(calc(var(--vh, 1vh) * 52), 460px); border-radius: 0; box-shadow: none; }
  .scard-cap, .scard[data-side] .scard-cap { max-width: none; text-align: left; padding: 18px 20px 14px; justify-self: auto; align-self: auto; }
  .scard-cap h3 { font-size: 28px; }
  .scard-line { margin-top: 6px; font-size: 16px; }
  .scard-price { margin-top: 10px; }
  .scard-link { margin-top: 4px; }
  .scard-last .scard-photo { height: min(calc(var(--vh, 1vh) * 64), 560px); }
  .scard-over { bottom: 7%; }
  .boudoir { padding: calc(var(--vh, 1vh) * 6) 22px calc(var(--vh, 1vh) * 12); font-size: 15px; }

  .motion .arc { height: calc((var(--n) + 1) * calc(var(--vh, 1vh) * 38) + calc(var(--vh, 1vh) * 100)); }
  img[style*="--lqm"] { background-image: var(--lqm); background-position: var(--pm, var(--pd, 50% 50%)); }
  .arc-slide img { object-position: var(--pm, var(--pd, 50% 50%)); background-image: var(--lqm, var(--lq)); background-position: 50% 50%; background-color: var(--cm, #3a302a); }
  .arc-line { font-size: clamp(38px, 11.4vw, 54px); padding: 0 22px; }
  .arc-labels { left: 18px; bottom: 132px; width: 80vw; }
  .arc-more { left: 18px; right: auto; bottom: 76px; }

  .closer-text { left: 0; right: 0; bottom: calc(var(--vh, 1vh) * 13); justify-items: center; text-align: center; }
  .cl-meet { margin-left: 0; }
  .closer-shade { background: linear-gradient(0deg, rgba(24, 16, 10, .62) 0%, rgba(24, 16, 10, .1) 48%, rgba(24, 16, 10, 0) 62%); }
  .closer-img { object-position: var(--pm, var(--pd, 50% 50%)); }

  .words { padding: calc(var(--vh, 1vh) * 12) 22px calc(var(--vh, 1vh) * 8); }
  .words-big { font-size: clamp(25px, 7vw, 30px); line-height: 1.28; }
  .words-row { grid-template-columns: 1fr; gap: 40px; margin-top: calc(var(--vh, 1vh) * 8); }
  .words-portrait { max-width: 420px; }

  .how { padding: calc(var(--vh, 1vh) * 8) 0 calc(var(--vh, 1vh) * 6); }
  .how-cards { grid-template-columns: 1fr; gap: 34px; margin-top: calc(var(--vh, 1vh) * 6); padding: 0 14px; }
  .hcard figure { aspect-ratio: 5/4; }

  .rating { padding: calc(var(--vh, 1vh) * 4) 20px calc(var(--vh, 1vh) * 10); }
  .rating-row { flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
  .rating-num { font-size: 58px; }

  .ig { padding: calc(var(--vh, 1vh) * 2) 14px calc(var(--vh, 1vh) * 10); }
  .ig-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 22px; padding: 0 6px; }
  .ig-actions { justify-content: flex-start; gap: 6px 16px; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ig-tile a { border-radius: 14px; }
  .ftr-main { padding: calc(var(--vh, 1vh) * 9) 22px calc(var(--vh, 1vh) * 7); gap: 48px; }
  .ftr-cols { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .ftr-band { height: calc(var(--vh, 1vh) * 78); min-height: 520px; }
  .ftr-img { object-position: var(--pm, 62% 0%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .4) 7%, #000 16%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .4) 7%, #000 16%); }
  .ftr-legal { bottom: 84px; font-size: 11px; }

  .badge { left: 10px; bottom: 12px; padding: 0 13px; }
  .badge .long { display: none; }
  .badge .short { display: inline; }
  .chat { right: 10px; bottom: 10px; }
  .chat-launch { min-height: 54px; padding: 6px 14px 6px 6px; gap: 10px; }
  .chat-launch-text { font-size: 12px; }
  .chat-launch-text span { display: block; }
  .chat-av { width: 40px; height: 40px; }
  .chat-panel { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; height: min(calc(var(--vh, 1vh) * 80), 640px); }
  .chat[data-open="true"] .chat-launch { opacity: 0; pointer-events: none; }
}

/* ---------- reduced motion: opacity only, no stages */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .hdr, .hdr-in, .topbar, .hdr-logo, .hdr-logo img { transition-property: opacity, background-color, color, border-color, box-shadow !important; transition-duration: 250ms !important; }
  .hdr.is-hidden { transform: none; }
  .is-scrolled .topbar { transform: none; opacity: 0; pointer-events: none; }
  .mmenu li, .mmenu-foot { transform: none; transition: opacity 250ms linear; }
  .hcard:hover img { transform: none; }
  .ig-tile a:hover img, .ig-tile a:focus-visible img { transform: none; }
}
/* static mode (reduced motion or no GSAP): sections lay out as plain content */
.static .scard { position: relative; top: auto; }
.static .scard-gap { height: calc(var(--vh, 1vh) * 8); }
.static .scard-gap:first-child { height: 0; }
.static .stack-title { position: relative; top: auto; margin-bottom: calc(var(--vh, 1vh) * 4); }
.static .arc-stage { height: auto; min-height: 0; padding: calc(var(--vh, 1vh) * 14) 8px 8px; display: flex; flex-direction: column; }
.static .arc-line { order: -1; }
.static .arc-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: calc(var(--vh, 1vh) * 8); }
.static .arc-slide { position: relative; inset: auto; aspect-ratio: 4/5; border-radius: 14px; }
.static .arc-slide figcaption { display: block; position: absolute; left: 14px; bottom: 12px; font: 600 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.static .arc-shade, .static .arc-labels, .static .arc-dim { display: none; }
.static .arc-line { position: relative; inset: auto; padding: 0 6vw; }
.static .arc-more { position: relative; right: auto; bottom: auto; margin: calc(var(--vh, 1vh) * 4) auto calc(var(--vh, 1vh) * 6); display: flex; width: max-content; }
.static .closer-frame { inset: var(--gut); border-radius: var(--r); }
.static .collage-stage { height: auto; min-height: 0; padding: calc(var(--vh, 1vh) * 12) 4vw; text-align: center; }
.static .print { position: relative; left: auto; top: auto; display: inline-block; margin: 0 1.2vw 2vw; width: clamp(140px, 15vw, 220px); vertical-align: top; }
.static .collage-text { position: relative; inset: auto; width: min(560px, 86vw); margin: calc(var(--vh, 1vh) * 4) auto 0; }