*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html.has-scroll-smooth { overflow: hidden; scroll-behavior: auto; }
body { font-family: var(--sans); background: var(--bg); color: var(--fg); transition: background 1.3s ease, color 1.3s ease; overflow-x: hidden; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--espresso); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-size: 13px; transition: top .2s; }
.skip:focus { top: 12px; }

.num { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 22px; color: var(--mut); }
h2.big { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 7.5vw, 110px); line-height: 1; }
h2.big em, .quote em, .hero h1 em { font-style: italic; color: var(--em); transition: color 1.3s ease; }

/* split text: words are masks, letters rise (gated: without JS everything stays visible) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em 0; margin-bottom: -.14em; }
.c { display: inline-block; }
html.motion-ready .c { transform: translateY(112%); transition: transform 1.15s var(--ease); transition-delay: calc(var(--i) * 26ms); }
html.motion-ready .in .c { transform: none; }

html.motion-ready .rv { opacity: 0; transform: translateY(36px); transition: opacity 1.2s ease, transform 1.3s var(--ease); }
html.motion-ready .rv.in { opacity: 1; transform: none; }

/* image reveal: scale(1.2) rotate(1.5deg) settling in 2s, as on the reference site */
.photo { position: relative; overflow: hidden; border-radius: 16px; }
.photo i, .reel i { position: absolute; inset: -3%; display: block; }
html.motion-ready .photo i, html.motion-ready .reel i { opacity: 0; transform: scale(1.2) rotate(1.5deg); transition: transform 2s ease, opacity .5s ease; }
html.motion-ready .photo.in i, html.motion-ready .reel.in i { opacity: 1; transform: none; }

.orb { position: absolute; border-radius: 50%; filter: blur(28px); z-index: -1; pointer-events: none; }
.orb.warm { background: radial-gradient(circle, rgba(204,185,142,.55), transparent 68%); }
.orb.deep { background: radial-gradient(circle, rgba(118,110,99,.42), transparent 68%); }
.orb.pale { background: radial-gradient(circle, rgba(241,216,189,.45), transparent 68%); }
.frame { position: absolute; z-index: 0; pointer-events: none; border-radius: 140px 140px 14px 14px; overflow: hidden; }
.frame i { position: absolute; inset: 0; display: block; }
.frame.ring { border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: none; }

nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; justify-content: space-between; align-items: center; padding: 22px 5vw; color: var(--fg); pointer-events: none;
  transition: color 1.3s ease, transform .55s var(--ease), background-color .5s ease, padding .4s ease, backdrop-filter .5s ease; }
/* once the page is scrolled the bar is solid and frosted, so text never shows through it */
nav.nav-solid { padding-block: 14px; pointer-events: auto; background-color: var(--bg); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 1px 0 rgba(128,118,104,.25); }
@supports (background: color-mix(in srgb, red 50%, transparent)) { nav.nav-solid { background-color: color-mix(in srgb, var(--bg) 88%, transparent); } }
nav.nav-hidden { transform: translateY(-110%); }
nav > * { pointer-events: auto; }
nav .logo { display: flex; align-items: center; gap: 12px; border: 0; padding: 0; font-family: var(--serif); font-size: 21px; letter-spacing: .04em; }
.logo-mark, .logo-lockup { display: inline-block; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.logo-mark { width: 36px; height: 35px; -webkit-mask-image: url(/assets/img/logo-mark.svg); mask-image: url(/assets/img/logo-mark.svg); }
.logo-lockup { width: min(260px, 62vw); aspect-ratio: 2814 / 2028; -webkit-mask-image: url(/assets/img/logo.svg); mask-image: url(/assets/img/logo.svg); }
nav a { color: var(--fg); text-decoration: none; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; border: 1px solid currentColor; padding: 10px 18px; border-radius: 999px; }
.count { position: fixed; left: 5vw; bottom: 22px; z-index: 50; color: var(--fg); transition: color 1.3s ease; font-size: 12px; letter-spacing: .2em; }
.dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; gap: 12px; color: var(--fg); transition: color 1.3s ease; }
.dots a { color: var(--fg); width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; transition: .4s; }
.dots a.on { background: currentColor; transform: scale(1.6); }

.btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 18px 30px; border-radius: 999px; background: var(--btn); color: var(--btnfg); transition: background 1.3s, color 1.3s, box-shadow .4s; will-change: transform; }
.btn.out { background: transparent; color: var(--fg); border: 1px solid currentColor; }
.btn:hover { box-shadow: 0 14px 34px rgba(0,0,0,.25); }
/* the primary action breathes a soft ring so the eye lands on it (no motion if the visitor asked for less) */
.btn.gold { position: relative; font-weight: 600; }
.btn.gold::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(204,185,142,.55); animation: ring 2.8s ease-out infinite; pointer-events: none; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(204,185,142,.55); } 70%, 100% { box-shadow: 0 0 0 18px rgba(204,185,142,0); } }
a:focus-visible, button:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }


@media (max-height: 800px) { .count { display: none; } }
@media (max-width: 760px), (max-height: 620px) { .dots, .count { display: none; } }
@media (max-width: 480px) { nav .logo { gap: 9px; font-size: 15px; letter-spacing: .02em; white-space: nowrap; } .logo-mark { width: 30px; height: 29px; } nav a:not(.logo) { padding: 8px 14px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }