/* Sugar Plum v10, motion landing. Design base: 1920 x 1080 frames. */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../fonts/cinzel-8vIJ7ww63mVu7gt79mT7.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(../fonts/cinzel-8vIJ7ww63mVu7gt7-GT7LEc.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url(../fonts/raleway-1Ptug8zYS_SKggPNyC0ITw.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url(../fonts/raleway-1Ptug8zYS_SKggPNyCMIT5lu.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/pinyonscript-6xKpdSJbL9-e9LuoeQiDRQR8WOXaOg.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/pinyonscript-6xKpdSJbL9-e9LuoeQiDRQR8WOvaOrbh.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Animatable light radius for the services hover */
@property --r { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Tokens ---------- */
:root {
  --ivory: #F6F4F0;
  --ink: #1C1C1C;
  --blush: #F4DCE0;
  --blush-2: #EFCFD5;
  --stone: #5E5E5E;
  --mist: #8C8C8C;
  --mist-ink: #6E6E6E; /* mist tuned to 4.6:1 on ivory */
  --ash: #4A4A4A;
  --white: #FFFFFF;

  --cz: "Cinzel", "Times New Roman", serif;
  --rw: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --sc: "Pinyon Script", "Snell Roundhand", cursive;

  /* 1 design pixel. Width-led, capped by height so pinned stages always fit. */
  --u: min(calc(100vw / 1920), calc(100svh / 1080));
  --gut: calc(var(--u) * 60);
  --body: max(15px, calc(var(--u) * 20));
  --small: max(12px, calc(var(--u) * 17));
  --btn-h: max(44px, calc(var(--u) * 56));

  --e-lux: cubic-bezier(.16, 1, .3, 1);
  --e-soft: cubic-bezier(.65, 0, .35, 1);
}
@media (max-width: 900px) {
  :root { --u: calc(100vw / 900); --gut: 22px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font-family: var(--rw); font-weight: 400; font-size: var(--body); line-height: 1.35;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-loading { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 400; }
::selection { background: var(--blush); color: var(--ink); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 999px; }
.card:focus-visible, .svc__item a:focus-visible { border-radius: 0; outline-offset: -6px; }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 300; padding: 12px 18px; background: var(--ink); color: var(--white); border-radius: 999px; transition: top .3s; }
.skip-link:focus { top: 16px; }

.cz { font-family: var(--cz); font-weight: 400; }
.sc, .script { font-family: var(--sc); font-weight: 400; text-transform: none; letter-spacing: 0; }
.row { display: block; white-space: nowrap; }

.logo { display: block; aspect-ratio: 2600 / 875; background: currentColor;
  -webkit-mask: url(../svg/logo.svg) center / contain no-repeat; mask: url(../svg/logo.svg) center / contain no-repeat; }
.ornament { display: block; width: calc(var(--u) * 80); min-width: 54px; aspect-ratio: 688 / 288; margin: 0 auto; background: currentColor;
  -webkit-mask: url(../svg/ornament.svg) center / contain no-repeat; mask: url(../svg/ornament.svg) center / contain no-repeat; }
.ornament--blush { color: var(--blush-2); }

.eyebrow { font-size: var(--small); text-transform: uppercase; letter-spacing: .02em; margin-top: calc(var(--u) * 10); }
.eyebrow-track, .track { font-size: var(--small); text-transform: uppercase; letter-spacing: .24em; font-weight: 500; }
.smallcaps { font-family: var(--cz); font-size: max(13px, calc(var(--u) * 19)); letter-spacing: .06em; color: var(--mist-ink); }
.lead { font-size: var(--body); font-weight: 300; color: var(--stone); line-height: 1.07; }

/* ---------- Buttons ---------- */
.btns { display: flex; align-items: center; gap: calc(var(--u) * 18); flex-wrap: wrap; }
.btns--center { justify-content: center; }
.pill, .cta__label { display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); padding: 0 calc(var(--u) * 30);
  border-radius: 999px; font-size: max(14px, calc(var(--u) * 17)); white-space: nowrap; transition: background-color .5s var(--e-lux), color .5s var(--e-lux), border-color .5s var(--e-lux); }
.pill--ghost { border: 1px solid color-mix(in srgb, currentColor 22%, transparent); gap: 12px; padding: 0 calc(var(--u) * 24); }
.pill--smoke { background: rgba(28, 28, 28, .55); color: var(--white); padding: 0 calc(var(--u) * 30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pill--ink { background: var(--ink); color: var(--white); }
.pill--line { border: 1px solid rgba(255,255,255,.28); color: var(--white); }
.pill--white { background: var(--white); color: var(--ink); }
.pill:hover { border-color: currentColor; }
.pill--ink:hover { background: #3a3a3a; }
.pill--smoke:hover { background: rgba(28,28,28,.8); }
.pill--white:hover { background: var(--blush); }

.cta { display: inline-flex; align-items: center; color: var(--ink); }
.cta__label { background: var(--blush); padding: 0 calc(var(--u) * 30); }
.cta__arrow { width: var(--btn-h); height: var(--btn-h); border-radius: 50%; background: var(--blush); display: grid; place-items: center; margin-left: -2px; overflow: hidden;
  transition: transform .6s var(--e-lux), background-color .5s; }
.cta__arrow svg, .icon-btn svg { width: max(16px, calc(var(--u) * 22)); height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cta:hover .cta__arrow { transform: translateX(6px) rotate(-45deg); background: var(--blush-2); }
.cta:hover .cta__label { background: var(--blush-2); }
.cta--line .cta__label, .cta--line .cta__arrow { background: transparent; border: 1px solid rgba(28,28,28,.2); }
.cta--line:hover .cta__label, .cta--line:hover .cta__arrow { background: var(--ink); color: var(--white); border-color: var(--ink); }

.icon-btn { width: var(--btn-h); height: var(--btn-h); border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); transition: border-color .5s, background-color .5s; }
.icon-btn:hover { border-color: currentColor; }
.icon-btn--sm { width: max(40px, calc(var(--u) * 48)); height: max(40px, calc(var(--u) * 48)); border-color: rgba(28,28,28,.2); }

/* ---------- Scroll cue ---------- */
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 14); font-size: var(--small); letter-spacing: .3em; text-transform: uppercase; font-weight: 500; }
.scroll-cue i { position: relative; width: 1px; height: calc(var(--u) * 100); background: color-mix(in srgb, currentColor 30%, transparent); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: currentColor; animation: cue 2.4s var(--e-soft) infinite; }
@keyframes cue { to { top: 100%; } }
.scroll-cue--dark { color: var(--ink); }

/* ---------- 1. Preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 200; background: var(--ivory); color: var(--ink); overflow: hidden; }
.preloader__mono { position: absolute; left: 50%; top: 68%; transform: translate(-36%, -50%); font-family: var(--sc); font-size: calc(var(--u) * 980); line-height: 1; color: #EFEBE5; pointer-events: none; user-select: none; }
.preloader__logo { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 500); min-width: 240px; translate: -50% -50%; opacity: .06; }
.preloader__foot { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--u) * 52); }
.preloader__row { display: flex; justify-content: space-between; align-items: flex-end; }
.preloader__row--meta { margin-top: calc(var(--u) * 16); }
.preloader__count { font-family: var(--sc); font-size: calc(var(--u) * 98); line-height: .8; padding-right: calc(var(--u) * 20); font-variant-numeric: tabular-nums; }
.preloader__line { position: relative; height: 1px; margin-top: calc(var(--u) * 26); background: rgba(28,28,28,.14); }
.preloader__bar { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--ink); border-radius: 2px; }
.star { position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; translate: 0 -50%; background: var(--ink);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* ---------- Nav ---------- */
.nav { position: fixed; z-index: 100; left: 0; right: 0; top: 0; height: calc(var(--u) * 156); min-height: 92px; padding: 0 var(--gut);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--white); pointer-events: none; transition: color .6s var(--e-soft); }
.nav > * { pointer-events: auto; }
body[data-nav="dark"] .nav { color: var(--ink); }
.nav__left { display: flex; align-items: center; gap: calc(var(--u) * 40); }
.nav__links { display: flex; gap: calc(var(--u) * 38); }
.nav__links a { position: relative; font-size: max(13px, calc(var(--u) * 17)); letter-spacing: .24em; text-transform: uppercase; padding: 8px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: .24em; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .7s var(--e-lux); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__logo { width: calc(var(--u) * 300); min-width: 150px; display: block; }
.nav__right { display: flex; justify-content: flex-end; align-items: center; gap: calc(var(--u) * 14); }
.nav .cta__label { padding: 0 calc(var(--u) * 30); }
.burger { display: grid; gap: 5px; }
.burger i { display: block; width: 16px; height: 1.4px; background: currentColor; border-radius: 2px; transition: transform .6s var(--e-lux), width .6s var(--e-lux); }
.burger i:last-child { width: 10px; }
.nav__menu:hover .burger i:last-child { width: 16px; }
.nav__menu[aria-expanded="true"] .burger i:first-child { transform: translateY(3.2px) rotate(45deg); }
.nav__menu[aria-expanded="true"] .burger i:last-child { width: 16px; transform: translateY(-3.2px) rotate(-45deg); }

.wave { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.wave i { width: 1.5px; height: 100%; background: currentColor; border-radius: 2px; transform-origin: center; animation: wave 1.2s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: -.2s; } .wave i:nth-child(3) { animation-delay: -.5s; } .wave i:nth-child(4) { animation-delay: -.8s; } .wave i:nth-child(5) { animation-delay: -.35s; }
@keyframes wave { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.sound[aria-pressed="false"] .wave i { animation-play-state: paused; transform: scaleY(.2); }

/* Menu overlay */
.menu { position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--ivory); display: grid; place-items: center; clip-path: circle(0% at calc(var(--gut) + 28px) 78px); }
.menu[hidden] { display: none; }
.menu__inner { display: grid; gap: calc(var(--u) * 10); text-align: center; }
.menu__inner a { font-family: var(--cz); font-size: max(34px, calc(var(--u) * 84)); line-height: 1.15; transition: color .5s; color: var(--ash); }
.menu__inner a span { font-family: var(--rw); font-size: var(--small); letter-spacing: .2em; vertical-align: middle; margin-right: 16px; }
.menu__inner a:hover, .menu__inner a:focus-visible { color: var(--white); }
.menu__quote { position: absolute; bottom: calc(var(--u) * 60); font-size: max(26px, calc(var(--u) * 44)); color: var(--blush-2); }
body.menu-open .nav { color: var(--white); }

/* ---------- 2. Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; color: var(--white); overflow: hidden; background: #111; }
.hero__media { position: absolute; inset: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: grayscale(1) contrast(1.02); }
.hero__shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 22%),
  linear-gradient(0deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 46%),
  radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%); }
.hero__title { position: absolute; left: var(--gut); bottom: calc(var(--u) * 50); line-height: .82; }
.hero__title .cz { font-size: calc(var(--u) * 88); letter-spacing: .01em; }
.hero__title .sc--every { font-size: calc(var(--u) * 138); margin-right: calc(var(--u) * 16); }
.hero__title .sc--love { font-size: calc(var(--u) * 132); margin-left: calc(var(--u) * 14); }
.hero__title .row + .row { margin-top: calc(var(--u) * 6); }
.hero__cue { position: absolute; left: 50%; bottom: 0; translate: -50% 0; }
.hero__aside { position: absolute; right: var(--gut); bottom: calc(var(--u) * 60); width: calc(var(--u) * 451); min-width: 300px; }
.hero__aside .rule { display: block; width: calc(var(--u) * 40); height: 1px; background: rgba(255,255,255,.75); margin-bottom: calc(var(--u) * 26); }
.hero__aside p { font-weight: 300; line-height: 1.15; margin-bottom: calc(var(--u) * 30); }

/* ---------- 3 + 4. Story (quote, circle, about) ---------- */
.story { position: relative; background: var(--ink); }
.story__stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: var(--white); }
.quote { position: absolute; inset: 0; text-align: center; padding-top: calc(var(--u) * 186); }
.quote .eyebrow { font-size: var(--small); margin-top: calc(var(--u) * 8); }
.quote__title { margin-top: calc(var(--u) * 14); line-height: .9; white-space: nowrap; }
.quote__title .cz { font-size: calc(var(--u) * 152); letter-spacing: .04em; }
.quote__title .sc { font-size: calc(var(--u) * 150); margin: 0 calc(var(--u) * 4); }
.quote__sub { margin-top: calc(var(--u) * 10); font-weight: 300; font-size: max(14px, calc(var(--u) * 19)); color: rgba(255,255,255,.62); }
.verse { text-align: left; }
.verse blockquote { font-size: max(22px, calc(var(--u) * 40)); line-height: 1.1; }
.verse figcaption { margin-top: calc(var(--u) * 14); font-size: var(--small); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.verse--left { position: absolute; left: var(--gut); bottom: calc(var(--u) * 46); }
.quote__note { position: absolute; right: var(--gut); bottom: calc(var(--u) * 50); text-align: right; font-weight: 300; line-height: 1.07; font-size: max(14px, calc(var(--u) * 19)); }

.circle { position: absolute; left: 50%; bottom: calc(var(--u) * -585); width: calc(var(--u) * 1170); aspect-ratio: 1; translate: -50% 0; color: var(--ink); pointer-events: none; }
.circle__disc { position: absolute; inset: 0; border-radius: 50%; background: var(--ivory); will-change: transform; }
.circle__copy { position: absolute; left: 0; right: 0; top: calc(var(--u) * 144); text-align: center; }
.circle .track { font-size: max(13px, calc(var(--u) * 18)); letter-spacing: .26em; }
.circle .track--soft { margin-top: calc(var(--u) * 8); color: var(--stone); font-weight: 400; }
.circle .track--num { margin-top: calc(var(--u) * 52); color: var(--stone); font-weight: 400; }
.circle__line { margin-top: calc(var(--u) * 30); white-space: nowrap; }
.circle__line .cz { font-size: calc(var(--u) * 50); letter-spacing: .03em; }
.circle__line .sc { font-size: calc(var(--u) * 66); margin: 0 calc(var(--u) * 4); }
.circle__line .br { font-family: var(--rw); font-weight: 300; font-size: calc(var(--u) * 50); color: var(--mist); }
.circle .scroll-cue { margin-top: calc(var(--u) * 80); }

.about { position: absolute; inset: 0; color: var(--ink); visibility: hidden; }
.about__damask { position: absolute; left: 50%; top: 52%; width: calc(var(--u) * 1300); translate: -50% -50%; color: #EEE6E1; margin: 0; }
.about__photos { position: absolute; inset: 0; }
.ph { position: absolute; top: 0; width: calc(var(--u) * 220); min-width: 110px; aspect-ratio: 220 / 300; overflow: hidden; will-change: transform, opacity; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.about__copy { position: absolute; left: 50%; top: calc(var(--u) * 307); translate: -50% 0; text-align: center; width: max-content; max-width: 92vw; }
.about__copy .eyebrow { margin-top: calc(var(--u) * 12); font-size: var(--small); }
.about__title { margin-top: calc(var(--u) * 4); line-height: .8; }
.about__title .cz { font-size: calc(var(--u) * 138); letter-spacing: .02em; }
.about__title .sc { font-size: calc(var(--u) * 154); margin-left: calc(var(--u) * 10); }
.about__title .row:first-child { padding-left: calc(var(--u) * 80); }
.about__copy .lead { margin: calc(var(--u) * 30) auto 0; max-width: calc(var(--u) * 600); min-width: 300px; }
.about__copy .btns { margin-top: calc(var(--u) * 40); }
.about__cue { position: absolute; left: 50%; bottom: 0; translate: -50% 0; }

/* ---------- 5. Invitations ---------- */
.invites { position: relative; min-height: 100svh; background: var(--ivory); padding-top: calc(var(--u) * 174); display: flex; flex-direction: column; }
.sec-head { text-align: center; }
.invites__title { margin-top: calc(var(--u) * 20); line-height: 1; white-space: nowrap; }
.invites__title .cz { font-size: calc(var(--u) * 64); letter-spacing: .015em; }
.invites__title .sc { font-size: calc(var(--u) * 74); margin: 0 calc(var(--u) * 8); }
.invites .lead { margin-top: calc(var(--u) * 8); }
.cards { position: relative; margin-top: auto; padding-top: calc(var(--u) * 66); display: grid; grid-template-columns: repeat(4, 1fr); cursor: none; }
.card { position: relative; display: block; aspect-ratio: 480 / 640; overflow: hidden; color: var(--ink); isolation: isolate; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); transform: scale(1.04); }
.card.is-ready img { transition: transform 1.4s var(--e-lux), filter 1s var(--e-lux); }
.card__wash { position: absolute; inset: 0; background: rgba(248, 246, 243, .58); transition: opacity 1s var(--e-lux); }
.card__top { position: absolute; left: calc(var(--u) * 30); top: calc(var(--u) * 36); display: flex; gap: calc(var(--u) * 10); align-items: center; z-index: 2; }
.heart { width: max(34px, calc(var(--u) * 40)); height: max(34px, calc(var(--u) * 40)); border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; }
.heart svg, .slide__act svg { width: 46%; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.badge { height: max(30px, calc(var(--u) * 40)); padding: 0 calc(var(--u) * 20); border-radius: 999px; background: var(--blush); display: inline-flex; align-items: center; font-family: var(--cz); font-size: max(13px, calc(var(--u) * 20)); letter-spacing: .08em; text-transform: uppercase; }
.card__name { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -40%; text-align: center; z-index: 2; }
.card.is-ready .card__name { transition: opacity .8s var(--e-lux), transform 1s var(--e-lux), letter-spacing 1s var(--e-lux); }
.card__name .cz { display: block; font-size: calc(var(--u) * 52); letter-spacing: .03em; line-height: 1; }
.card__name .cz .sc { font-size: calc(var(--u) * 64); display: inline-block; translate: 0 -.04em; }
.card__sub { display: block; margin-top: calc(var(--u) * 18); font-size: var(--small); letter-spacing: .2em; text-transform: uppercase; }
.card__preview { position: absolute; left: calc(var(--u) * 30); bottom: calc(var(--u) * 36); z-index: 2; height: max(34px, calc(var(--u) * 40)); padding: 0 calc(var(--u) * 18); border-radius: 999px; background: rgba(255,255,255,.88); display: inline-flex; align-items: center; gap: 10px; font-size: max(13px, calc(var(--u) * 16)); }
.card__preview svg { width: 9px; fill: var(--ink); }
.card__preview em { font-style: normal; color: var(--stone); margin-left: 8px; }
.card:hover img, .card:focus-visible img { transform: scale(1.0); filter: saturate(1); }
.card:hover .card__wash, .card:focus-visible .card__wash { opacity: 0; }
.card:hover .card__name, .card:focus-visible .card__name { opacity: 0; transform: translateY(-14px); letter-spacing: .06em; }
.view-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: calc(var(--u) * 84); height: calc(var(--u) * 84); min-width: 64px; min-height: 64px; margin: calc(var(--u) * -42) 0 0 calc(var(--u) * -42);
  border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; font-size: max(12px, calc(var(--u) * 17)); letter-spacing: .22em; text-transform: uppercase; pointer-events: none; scale: 0; }
@media (hover: none) { .cards { cursor: auto; } .view-cursor { display: none; } }

/* ---------- 6. Services ---------- */
.services { position: relative; min-height: 100svh; background: var(--ink); color: var(--white); padding: calc(var(--u) * 300) var(--gut) calc(var(--u) * 90); overflow: hidden; }
.svc { position: relative; z-index: 1; }
.svc__item a { display: inline-flex; align-items: baseline; padding-left: calc(var(--in) * var(--u) * 120); }
.svc__n { font-size: var(--small); letter-spacing: .12em; width: calc(var(--u) * 70); min-width: 38px; color: var(--mist); transition: color .8s var(--e-lux); }
.svc__w { position: relative; display: inline-block; font-family: var(--cz); font-size: calc(var(--u) * 122); line-height: 1.12; letter-spacing: .01em; color: #686868; --mx: 50%; --my: 50%; transition: color 1.2s var(--e-lux); }
.svc__w::after { content: attr(data-text); position: absolute; inset: 0; color: var(--white); text-shadow: 0 0 calc(var(--u) * 40) rgba(255, 235, 238, .35);
  -webkit-mask: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 45%, transparent 100%); mask: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 45%, transparent 100%);
  transition: --r 1.3s var(--e-lux); pointer-events: none; }
.svc__x { margin-left: calc(var(--u) * 26); font-size: var(--small); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.svc__item.is-lit .svc__w::after { --r: calc(var(--u) * 1800); }
.svc__item.is-lit .svc__n { color: var(--white); }
.svc__item.is-hot .svc__w::after { transition-duration: 1.6s; }
.svc-film { position: absolute; right: var(--gut); top: calc(var(--u) * 186); width: calc(var(--u) * 380); min-width: 220px; }
.svc-film__frame { aspect-ratio: 1; overflow: hidden; background: #111; }
.svc-film video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.svc-film figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-top: calc(var(--u) * 20); font-size: var(--small); letter-spacing: .1em; text-transform: uppercase; }
.svc-film__t { letter-spacing: .04em; color: var(--mist); font-variant-numeric: tabular-nums; }
.svc-foot { position: absolute; right: var(--gut); bottom: calc(var(--u) * 113); width: calc(var(--u) * 441); min-width: 300px; }
.svc-foot .btns { margin-top: calc(var(--u) * 38); }

/* ---------- 7. Process ---------- */
.process { position: relative; background: var(--ivory); }
.process__stage { position: relative; height: 100svh; min-height: 560px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.process__left { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: calc(var(--u) * 80); }
.process__title { line-height: .82; margin-top: calc(var(--u) * 10); }
.process__title .sc { font-size: calc(var(--u) * 82); }
.process__title .cz { font-size: calc(var(--u) * 76); letter-spacing: .02em; }
.process__left .lead { margin-top: calc(var(--u) * 26); }
.process__left .btns { margin-top: calc(var(--u) * 40); }
.process__dots { display: flex; gap: 8px; margin-top: calc(var(--u) * 56); }
.process__dots li { width: 6px; height: 6px; border-radius: 6px; background: rgba(28,28,28,.2); transition: width .8s var(--e-lux), background-color .8s; }
.process__dots li.is-on { width: 28px; background: var(--ink); }
.process__cue { position: absolute; left: 50%; bottom: 0; translate: -50% 0; }
.process__mono { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; font-family: var(--sc); font-size: calc(var(--u) * 330); line-height: 1; color: rgba(214, 186, 150, .16); pointer-events: none; user-select: none; }
.process__right { position: relative; overflow: hidden; }
.steps-media, .step-img { position: absolute; inset: 0; }
.steps-media { z-index: 0; isolation: isolate; }
.step-img { clip-path: inset(100% 0 0 0); }
.step-img.is-on { clip-path: inset(0 0 0 0); }
.step-img img { width: 100%; height: 100%; object-fit: cover; }
.steps-media__haze { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(246,244,240,.5), rgba(246,244,240,.34) 50%, rgba(246,244,240,.22)); }
.steps { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; translate: 0 -46%; height: calc(var(--u) * 340); min-height: 250px; }
.step { position: absolute; inset: 0; text-align: center; opacity: 0; visibility: hidden; }
.step.is-on { opacity: 1; visibility: visible; }
.step__n { display: block; font-size: calc(var(--u) * 120); line-height: .9; }
.step h3 { font-family: var(--cz); font-size: calc(var(--u) * 74); line-height: .9; margin-top: calc(var(--u) * 16); }
.step p { margin: calc(var(--u) * 34) auto 0; max-width: calc(var(--u) * 400); min-width: 260px; line-height: 1.07; font-size: var(--body); }
.process__skip { position: absolute; right: var(--gut); bottom: calc(var(--u) * 40); z-index: 3; }

/* ---------- 8. Featured ---------- */
.featured { position: relative; height: 100svh; min-height: 620px; background: var(--ivory); display: grid; grid-template-columns: calc(var(--u) * 968) 1fr; overflow: hidden; }
.featured__copy { position: relative; padding: calc(var(--u) * 395) 0 0 calc(var(--u) * 67); }
.featured__title { line-height: .8; }
.featured__title .sc { font-size: calc(var(--u) * 98); }
.featured__title .cz { font-size: calc(var(--u) * 77); letter-spacing: .01em; }
.featured__copy .lead { margin-top: calc(var(--u) * 22); max-width: calc(var(--u) * 510); min-width: 300px; }
.featured__copy .btns { margin-top: calc(var(--u) * 30); }
.featured .verse { position: absolute; left: calc(var(--u) * 67); bottom: calc(var(--u) * 72); }
.featured .verse figcaption { color: var(--stone); }
.reel { position: relative; overflow: hidden; }
.slide { position: absolute; left: 0; right: 0; top: 0; will-change: transform, opacity; }
.slide__img { height: calc(var(--u) * 540); overflow: hidden; }
.slide__img img { width: 100%; height: 100%; object-fit: cover; will-change: filter, transform; }
.slide footer { display: flex; justify-content: space-between; align-items: center; height: calc(var(--u) * 106); min-height: 64px; padding-right: var(--gut); }
.slide h3 { font-size: max(28px, calc(var(--u) * 62)); line-height: 1; }
.slide__act { display: flex; align-items: center; gap: 10px; }
.slide__act .cta__label { padding: 0 calc(var(--u) * 24); height: max(40px, calc(var(--u) * 48)); }
.slide__act .cta__arrow { width: max(40px, calc(var(--u) * 48)); height: max(40px, calc(var(--u) * 48)); }
.reel__pause { position: absolute; right: var(--gut); bottom: calc(var(--u) * 24); height: 36px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 0 16px; background: rgba(246,244,240,.85); z-index: 3; }

.foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: calc(var(--u) * 50) var(--gut); background: var(--ivory); border-top: 1px solid rgba(28,28,28,.08); }
.foot__logo { width: max(130px, calc(var(--u) * 200)); color: var(--ink); }

/* ---------- Pre-animation states (JS adds .js) ---------- */
.js [data-split] { visibility: hidden; }
.js .r-in, .js .q-in { opacity: 0; }

/* Step dots are buttons */
.process__dots li { position: relative; cursor: pointer; }
.process__dot { position: absolute; inset: -10px -4px; border-radius: 8px; }

/* ---------- Reduced motion layout: no pinned stages ---------- */
.rm .story__stage { height: auto; overflow: visible; }
.rm .quote { position: relative; height: 100svh; min-height: 560px; }
.rm .circle { display: none; }
.rm .about { position: relative; inset: auto; height: 100svh; min-height: 640px; visibility: visible; background: var(--ivory); overflow: hidden; }
.rm .ph:nth-child(1) { left: var(--gut); top: calc(var(--u) * 225); }
.rm .ph:nth-child(2) { right: var(--gut); top: calc(var(--u) * 720); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav__links { display: none; }
  .sound .sound__label { display: none; }
  .nav .cta__label { display: none; }
  .nav .cta__arrow { margin-left: 0; }
}
@media (max-width: 900px) {
  .nav { height: 92px; }
  .nav__logo { min-width: 140px; }
  #soundBtn { display: none; }
  .hero__title { bottom: auto; top: 46%; }
  .hero__title .cz { font-size: 10vw; }
  .hero__title .sc--every { font-size: 16.5vw; }
  .hero__title .sc--love { font-size: 15vw; }
  .hero__aside { left: var(--gut); right: var(--gut); width: auto; min-width: 0; bottom: 120px; }
  .hero__aside .rule { display: none; }
  .hero__cue { display: none; }
  .quote { padding-top: 120px; }
  .quote__title .cz, .quote__title .sc { font-size: 15vw; }
  .verse--left { bottom: auto; top: 44%; }
  .quote__note { display: none; }
  .circle { width: 150vw; bottom: -75vw; }
  .circle__copy { top: 14vw; }
  .circle__line .cz, .circle__line .br { font-size: 5vw; } .circle__line .sc { font-size: 7vw; }
  .about__copy { top: 25%; }
  .about__title .cz { font-size: 11.6vw; } .about__title .sc { font-size: 13vw; }
  .about__title .row:first-child { padding-left: 0; }
  .about__copy .lead { min-width: 0; max-width: 86vw; }
  .ph { width: 26vw; min-width: 0; }

  .invites { padding-top: 130px; }
  .invites__title { white-space: normal; padding: 0 var(--gut); }
  .invites__title .cz { font-size: 10vw; } .invites__title .sc { font-size: 11vw; }
  .invites .lead br { display: none; }
  .invites .lead { padding: 0 var(--gut); }
  .cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding: 40px var(--gut) 40px; cursor: auto; }
  .card { flex: 0 0 76vw; scroll-snap-align: center; }
  .card__name .cz { font-size: 10vw; } .card__name .cz .sc { font-size: 12vw; }
  .view-cursor { display: none; }

  .services { padding: 130px var(--gut) 60px; display: flex; flex-direction: column; gap: 48px; }
  .svc__item a { padding-left: calc(var(--in) * 18px); }
  .svc__w { font-size: 11vw; }
  .svc__x { display: none; }
  .svc-film, .svc-foot { position: relative; right: auto; top: auto; bottom: auto; width: 100%; min-width: 0; }
  .svc-film { width: 70%; }

  .process__stage { grid-template-columns: 1fr; grid-template-rows: 46% 54%; }
  .process__left { padding: 90px var(--gut) 10px; }
  .process__title .sc { font-size: 13vw; } .process__title .cz { font-size: 11vw; }
  .process__left .lead { margin-top: 12px; } .process__left .btns { margin-top: 16px; }
  .process__dots { margin-top: 18px; }
  .process__cue, .process__mono { display: none; }
  .step__n { font-size: 15vw; } .step h3 { font-size: 9vw; }
  .steps { height: 260px; }

  .featured { height: auto; display: block; padding-bottom: 20px; }
  .featured__copy { padding: 130px var(--gut) 40px; }
  .featured__title .sc { font-size: 13vw; } .featured__title .cz { font-size: 11vw; }
  .featured .verse { position: relative; left: auto; bottom: auto; margin-top: 36px; }
  .reel { height: 128vw; }
  .slide__img { height: 62vw; }
  .slide footer { padding: 0 var(--gut); }
  .foot { flex-direction: column; text-align: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
  .scroll-cue i::after { display: none; }
}