:root {
  --space: #050608;
  --cream: #f3e8d8;
  --cream-80: rgba(243, 232, 216, .82);
  --cream-60: rgba(243, 232, 216, .62);
  --sage: #5e6d55;
  --sage-lt: #b4c4a2;
  --umber: #3d3a36;
  --wheat: #e9bd6c;
  --clay: #e08e66;
  --serif: "Caudex", Georgia, serif;
  --sans: "Jost Variable", "Jost", "Avenir Next", "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(20px, 4vw, 60px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--space); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; color: var(--cream); background: var(--space);
  font-family: var(--sans); font-weight: 350; font-size: 17px; line-height: 1.6;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.04; letter-spacing: -.01em; }
p { margin: 0; }
img { display: block; }
:focus-visible { outline: 2px solid var(--wheat); outline-offset: 3px; }
.nowrap { white-space: nowrap; }
.eyebrow { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--cream-80); margin-bottom: 14px; }

/* ---------- Intro ---------- */
.intro {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: var(--space); transition: opacity 1s var(--ease), visibility 0s 1s;
}
.intro.is-out { opacity: 0; visibility: hidden; }
.intro__mk { font-family: var(--serif); font-size: clamp(88px, 13vw, 168px); line-height: .9; display: flex; overflow: hidden; padding: 0 .04em .08em; }
.intro__mk span { display: inline-block; transform: translateY(105%); animation: rise 1s var(--ease) forwards; }
.intro__mk span + span { animation-delay: .09s; }
.intro__name { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--cream-60); opacity: 0; animation: fade .9s .45s var(--ease) forwards; }
.intro__lanes { display: flex; gap: 6px; width: clamp(180px, 20vw, 280px); height: 2px; margin-top: 6px; }
.intro__lanes i { flex: 1; transform: scaleX(0); transform-origin: left; animation: draw .8s var(--ease) forwards; }
.intro__lanes i:nth-child(1) { background: var(--wheat); animation-delay: .6s; }
.intro__lanes i:nth-child(2) { background: var(--clay); animation-delay: .75s; }
.intro__lanes i:nth-child(3) { background: var(--sage-lt); animation-delay: .9s; }
@keyframes rise { to { transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes draw { to { transform: scaleX(1); } }

/* ---------- Fixed layers ---------- */
#globe { position: fixed; inset: 0; width: 100vw; height: 100lvh; z-index: 0; display: block; }
.space-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 6, 8, .72), rgba(5, 6, 8, .2) 42%, transparent 60%);
}
.haze { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 55% 50%, #fbf6ee, #e9ddca 60%, #cbbfa9); }
.grain {
  position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }

.labels { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.lbl { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; opacity: 0; will-change: transform, opacity; font-size: 14px; white-space: nowrap; }
.lbl i { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; flex: none; }
.lbl i::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.lbl span { margin-top: -11px; color: var(--cream); text-shadow: 0 1px 10px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .8); }
.lbl--na { color: var(--wheat); } .lbl--sa { color: var(--clay); } .lbl--bs { color: var(--sage-lt); } .lbl--hub { color: var(--cream); }

/* ---------- Nav ---------- */
.nav { position: fixed; z-index: 50; top: 18px; left: var(--pad); right: var(--pad); display: flex; align-items: center; gap: 28px; }
.mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.mark__mk { font-family: var(--serif); font-size: 34px; line-height: 1; letter-spacing: -.02em; }
.mark__name { font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.15; color: var(--cream-80); padding-left: 12px; border-left: 1px solid rgba(243, 232, 216, .3); }
.nav__links { display: flex; gap: 26px; margin-left: auto; padding: 10px 22px; border-radius: 999px; background: rgba(20, 19, 17, .42); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(243, 232, 216, .12); }
.nav__links a { text-decoration: none; font-size: 15px; color: var(--cream-80); transition: color .25s var(--ease); }
.nav__links a:hover { color: var(--cream); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; font: 500 15px/1 var(--sans); text-decoration: none; border-radius: 999px; transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .25s; }
.btn--cream { background: var(--cream); color: var(--umber); }
.btn--sage { background: var(--sage); color: var(--cream); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(233, 189, 108, .6); }
.btn--lg { min-height: 58px; padding: 0 38px; font-size: 17px; }

.nav .mark, .nav .mark__name { transition: color .4s var(--ease), border-color .4s var(--ease); }
.nav.on-light .mark { color: var(--umber); }
.nav.on-light .mark__name { color: rgba(61, 58, 54, .8); border-color: rgba(61, 58, 54, .3); }
.nav.on-light .nav__links { background: rgba(61, 58, 54, .82); }
.nav.on-light .nav__cta { background: var(--umber); color: var(--cream); }

/* ---------- Scenes ---------- */
main { position: relative; z-index: 3; }
section { position: relative; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.hero { height: 210vh; }
.hero__copy { position: absolute; left: var(--pad); bottom: clamp(40px, 10vh, 110px); width: min(620px, calc(100% - 2 * var(--pad))); }
.hero__title { font-size: clamp(48px, 6.6vw, 104px); line-height: .98; letter-spacing: -.025em; margin-bottom: 26px; }
.hero__title .ln { display: block; overflow: hidden; padding-bottom: .07em; }
.hero__title .w { display: inline-block; }
.hero__title .ln + .ln .w { color: var(--wheat); }
.hero__lead { font-size: 19px; line-height: 1.55; color: var(--cream-80); max-width: 470px; margin-bottom: 26px; }
.scrollcue { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; text-decoration: none; color: var(--cream-80); min-height: 44px; }
.scrollcue svg { width: 36px; height: 36px; padding: 7px; border: 1px solid rgba(243, 232, 216, .32); border-radius: 50%; animation: bob 2.4s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

.lane { height: 330vh; }
.lane:nth-of-type(3) { height: 360vh; }
.lane__from { position: absolute; left: var(--pad); top: clamp(100px, 16vh, 160px); font-family: var(--serif); line-height: 1; opacity: 0; will-change: opacity, transform; }
.lane__from span { display: block; font-style: italic; font-size: 20px; color: var(--cream-80); margin-bottom: 10px; }
.lane__from em { display: block; font-style: normal; font-size: clamp(44px, 6.2vw, 96px); color: var(--c); text-shadow: 0 2px 30px rgba(0, 0, 0, .55); }
.card {
  position: absolute; left: var(--pad); bottom: var(--pad); width: min(480px, calc(100% - 2 * var(--pad)));
  padding: 28px 30px 30px; opacity: 0; will-change: opacity, transform;
  background: rgba(24, 22, 20, .5); border: 1px solid rgba(243, 232, 216, .12); border-left: 2px solid var(--c);
  backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); border-radius: 4px;
}
.card__kicker { font-family: var(--serif); font-style: italic; color: var(--c); font-size: 18px; margin-bottom: 8px; }
.card h2 { font-size: clamp(36px, 3.8vw, 54px); margin-bottom: 12px; }
.card p:last-child { font-size: 18px; line-height: 1.5; color: var(--cream-80); }

.hub { height: 260vh; }
.hub__copy { position: absolute; left: var(--pad); top: 50%; translate: 0 -50%; width: min(600px, calc(100% - 2 * var(--pad))); opacity: 0; will-change: opacity, transform; }
.hub__copy { text-shadow: 0 2px 22px rgba(10, 8, 6, .9), 0 0 3px rgba(10, 8, 6, .6); }
.hub__copy::before { content: ""; position: absolute; inset: -18% -30% -18% -40%; z-index: -1; background: radial-gradient(closest-side, rgba(10, 8, 6, .62), transparent); pointer-events: none; }
.hub__copy h2 { font-size: clamp(48px, 6.4vw, 100px); margin-bottom: 20px; }
.hub__lead { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; margin-bottom: 18px; }
.hub__body { color: var(--cream-80); font-size: 18px; max-width: 500px; }

/* ---------- Footage scenes ---------- */
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b0d0f; }
.grade { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 95% at 60% 45%, transparent 45%, rgba(20, 14, 8, .62) 100%),
    linear-gradient(90deg, rgba(14, 12, 10, .72), rgba(14, 12, 10, .1) 55%),
    linear-gradient(0deg, rgba(61, 58, 54, .25), rgba(233, 189, 108, .07));
}
.grade--deep { background:
    radial-gradient(120% 95% at 60% 45%, transparent 35%, rgba(20, 14, 8, .7) 100%),
    linear-gradient(90deg, rgba(14, 12, 10, .88) 10%, rgba(14, 12, 10, .55) 50%, rgba(14, 12, 10, .2) 75%),
    linear-gradient(0deg, rgba(61, 58, 54, .3), rgba(233, 189, 108, .08)); }

.sea { height: 420vh; z-index: 5; }
.sea .sticky { background: #0b0d0f; }
.sea__head, .prod { position: absolute; left: var(--pad); bottom: clamp(70px, 14vh, 140px); width: min(560px, calc(100% - 2 * var(--pad))); opacity: 0; will-change: opacity, transform; }
.sea__head h2 { font-size: clamp(56px, 7.4vw, 120px); margin-bottom: 14px; }
.sea__head p:last-child { color: var(--cream-80); font-size: 19px; max-width: 440px; }
.prod h3 { font-size: clamp(46px, 5.6vw, 88px); margin-bottom: 14px; color: var(--wheat); }
.prod p { font-size: 19px; line-height: 1.55; color: var(--cream-80); max-width: 480px; }
.sea__index { position: absolute; right: var(--pad); bottom: clamp(70px, 14vh, 140px); margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; text-align: right; font-family: var(--serif); font-style: italic; font-size: 17px; }
.sea__index li { color: var(--cream-60); transition: color .4s var(--ease), transform .4s var(--ease); }
.sea__index li::after { content: ""; display: inline-block; vertical-align: middle; width: 18px; height: 1px; margin-left: 12px; background: currentColor; transition: width .5s var(--ease); }
.sea__index li.is-on { color: var(--cream); }
.sea__index li.is-on::after { width: 46px; background: var(--wheat); }

.story { height: 240vh; z-index: 5; }
.story .sticky { background: #0b0d0f; }
.story__inner { position: absolute; left: var(--pad); top: 50%; translate: 0 -50%; width: min(740px, calc(100% - 2 * var(--pad))); }
.story__big { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 54px); line-height: 1.18; margin-bottom: 30px; }
.story__big .wd { opacity: .16; transition: opacity .35s linear; }
.story__big .wd.on { opacity: 1; }
.story__note { font-size: 18px; color: var(--cream-80); max-width: 540px; opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease); transform: translateY(16px); }
.story__note.on { opacity: 1; transform: none; }

/* ---------- Contact + footer ---------- */
.contact { z-index: 5; background: var(--cream); color: var(--umber); padding: clamp(90px, 16vh, 170px) var(--pad); }
.contact .eyebrow { color: var(--sage); }
.contact__inner { max-width: 1180px; margin: 0 auto; }
.contact h2 { font-size: clamp(40px, 5.6vw, 84px); max-width: 15ch; margin-bottom: 36px; }
.contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 40px; margin: clamp(56px, 9vh, 90px) 0 0; padding-top: 30px; border-top: 1px solid rgba(61, 58, 54, .2); }
.contact__grid dt { font-family: var(--serif); font-style: italic; color: var(--sage); margin-bottom: 6px; font-size: 17px; }
.contact__grid dd { margin: 0; font-size: 18px; line-height: 1.5; }
.contact__grid a { text-decoration: none; border-bottom: 1px solid rgba(61, 58, 54, .3); }
.contact .btn:hover { box-shadow: 0 14px 34px -12px rgba(94, 109, 85, .7); }

.footer { position: relative; z-index: 5; background: var(--umber); color: var(--cream); padding: 56px var(--pad) 28px; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 36px; border-bottom: 1px solid rgba(243, 232, 216, .14); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer__links a { text-decoration: none; color: var(--cream-80); min-height: 44px; display: inline-flex; align-items: center; }
.footer__links a:hover { color: var(--cream); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 30px; padding-top: 24px; font-size: 14px; color: var(--cream-60); }
.footer-credit { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-credit img { height: 27px; width: auto; }

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
  .nav { top: 12px; gap: 12px; }
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; min-height: 40px; padding: 0 18px; font-size: 14px; }
  .mark__mk { font-size: 28px; }
  .mark__name { font-size: 12px; }
  .space-veil { background: linear-gradient(0deg, rgba(5, 6, 8, .82), rgba(5, 6, 8, .1) 50%, rgba(5, 6, 8, .45)); }
  .hero__copy { bottom: 28px; }
  .hero__lead { font-size: 17px; }
  .lane__from { top: 86px; }
  .lane__from em { font-size: clamp(38px, 11vw, 56px); }
  .card { bottom: 20px; padding: 22px 22px 24px; }
  .card h2 { font-size: 34px; }
  .card p:last-child { font-size: 16.5px; }
  .hub__copy { top: auto; bottom: 26px; translate: none; }
  .hub__body { font-size: 16.5px; }
  .sea__head, .prod { bottom: 120px; }
  .prod p, .sea__head p:last-child { font-size: 17px; }
  .sea__index { left: var(--pad); right: auto; bottom: 34px; display: flex; gap: 18px; text-align: left; font-size: 15px; }
  .sea__index li::after { display: none; }
  .sea__index li.is-on { color: var(--wheat); }
  .grade, .grade--deep { background:
    radial-gradient(130% 90% at 50% 40%, transparent 35%, rgba(20, 14, 8, .6) 100%),
    linear-gradient(0deg, rgba(14, 12, 10, .88), rgba(14, 12, 10, .1) 60%); }
  .story__inner { top: auto; bottom: 30px; translate: none; }
  .grade--deep { background: linear-gradient(0deg, rgba(14, 12, 10, .94) 20%, rgba(14, 12, 10, .7) 62%, rgba(14, 12, 10, .2)); }
  #ship { object-position: 74% 50%; }
  .story__big { font-size: 27px; }
  .story__note { font-size: 16px; }
  .footer-bottom { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .grain, .scrollcue svg { animation: none; }
  .story__big .wd { opacity: 1; }
  .story__note { opacity: 1; transform: none; }
}