:root{
  --cream:#FFF8EE;
  --ink:#2E2440;
  --ink-soft:#5B5170;
  --amber:#F0913A;
  --amber-deep:#D9711E;
  --joy:#FFC93C;
  --line:rgba(46,36,64,0.12);
  --font-display:"Nunito", system-ui, sans-serif;
  --font-body:"Nunito", system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:500;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.01em;
  margin:0 0 0.4em;
  line-height:1.06;
}
p{margin:0 0 1em;}
a{color:inherit;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============ LOADER ============ */
.loader{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  background:var(--cream);
  transition:opacity .6s ease, visibility .6s ease;
}
.loader.is-done{opacity:0; visibility:hidden; pointer-events:none;}
.loader-mark{
  font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--ink);
}
.loader-track{
  width:200px; height:6px; border-radius:6px; background:rgba(46,36,64,0.1); overflow:hidden;
}
.loader-fill{
  height:100%; width:0%; background:linear-gradient(90deg, var(--amber), var(--joy));
  border-radius:6px; transition:width .15s ease;
}
.loader-text{
  font-size:0.85rem; color:var(--ink-soft); font-weight:600;
}

/* ============ CANVAS FILM ============ */
canvas#film{
  position:fixed; inset:0; width:100vw; height:100vh;
  display:block; z-index:0; background:#EDE3D1;
}

.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ SCROLL TRACK ============ */
.scroll-track{
  position:relative; z-index:2;
  height:700vh; /* scrub track length */
}

.overlay{
  position:fixed; inset:0; z-index:3;
  display:flex; align-items:center;
  pointer-events:none;
  opacity:0; visibility:hidden;
}
.overlay.is-visible{visibility:visible;}
.overlay-inner{
  max-width:640px;
  margin:0 6vw;
  padding:36px 40px;
  background:rgba(255,248,238,0.82);
  backdrop-filter:blur(6px);
  border-radius:22px;
  box-shadow:0 20px 60px rgba(46,36,64,0.14);
  transform:translateY(24px);
  transition:transform .5s ease;
}
.overlay.is-visible .overlay-inner{transform:translateY(0);}
.overlay-inner--right{margin-left:auto; margin-right:8vw;}

.eyebrow{
  display:inline-block;
  font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--amber-deep);
  margin-bottom:10px;
}
h1{font-size:clamp(2.1rem, 5vw, 3.6rem); color:var(--ink);}
h1 em{font-style:normal; color:var(--amber-deep);}
.overlay h2{font-size:clamp(1.5rem, 3.2vw, 2.3rem);}
.lede{font-size:1.05rem; color:var(--ink-soft); font-weight:600; line-height:1.5;}

.btn-venture, .btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:800; font-size:1rem;
  color:#fff; background:var(--amber);
  padding:14px 28px; border-radius:999px; border:none;
  cursor:pointer; pointer-events:auto;
  box-shadow:0 10px 24px rgba(217,113,30,0.35);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-decoration:none;
}
.btn-venture:hover, .btn-primary:hover{
  transform:translateY(-2px);
  background:var(--amber-deep);
  box-shadow:0 14px 30px rgba(217,113,30,0.4);
}

.overlay-inner--panel{
  max-width:560px;
  background:rgba(255,248,238,0.94);
}
.finale-cta{margin:18px 0 16px;}

.email-form{
  display:flex; gap:10px; pointer-events:auto; flex-wrap:wrap;
}
.email-form input{
  flex:1 1 220px;
  font-family:var(--font-body); font-size:0.95rem;
  padding:13px 16px; border-radius:999px;
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
}
.email-form input::placeholder{color:#9E93AC;}
.email-form input:focus{outline:2px solid var(--amber); outline-offset:2px;}
.email-form button{
  font-family:var(--font-display); font-weight:800; font-size:0.92rem;
  padding:13px 22px; border-radius:999px; border:2px solid var(--ink);
  background:transparent; color:var(--ink); cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.email-form button:hover{background:var(--ink); color:var(--cream);}

.site-foot{
  position:relative; z-index:2;
  background:var(--ink); color:rgba(255,248,238,0.72);
  font-size:0.82rem; line-height:1.6;
  padding:22px 6vw;
}
.site-foot strong{color:var(--cream);}

/* ============ REDUCED MOTION FALLBACK ============ */
.static-journey{position:relative; z-index:2;}
.static-beat{
  position:relative;
  min-height:90vh;
  display:flex; align-items:flex-end;
}
.static-beat img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.static-copy{
  position:relative; z-index:1; margin:0 auto 8vh; max-width:640px;
  padding:32px 36px; background:rgba(255,248,238,0.9); border-radius:20px;
  box-shadow:0 16px 40px rgba(46,36,64,0.16);
}
.static-beat--finale{min-height:100vh; align-items:center; justify-content:center;}

@media (max-width: 720px){
  .overlay-inner{margin:0 5vw; padding:26px 24px;}
  .overlay-inner--right{margin-right:5vw;}
  h1{font-size:2rem;}
  .overlay h2{font-size:1.4rem;}
}

body.rm-active canvas#film,
body.rm-active .loader{display:none;}
/* keep .scroll-track visible — the static fallback lives inside it; kill only the scrub overlays */
body.rm-active .scroll-track{height:auto !important;}
body.rm-active .overlay{display:none;}