/* Remjet — coming soon page. Splash animation, then the landing page.
   Colours are the site's "Darkroom" scheme; the yellow is the brand accent. */
:root{
  --paper:#120b0b; --grey:#231515; --ink:#f8efe9; --sub:#a8928b; --body2:#e7d9d2;
  --lime:#ffd200; --on-accent:#121110;
  --font-body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-head:"Outfit",var(--font-body);
}
*{margin:0; padding:0; box-sizing:border-box}
html,body{height:100%}
body{background:var(--paper); color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow:hidden}

/* ---------- screens ---------- */
.screen{position:fixed; inset:0; display:none; flex-direction:column; overflow:hidden; background:
  radial-gradient(90% 45% at 50% -8%, rgba(237,40,36,.14) 0%, rgba(237,40,36,0) 70%), var(--paper)}
.screen.active{display:flex}
#landing{background:
  radial-gradient(95% 60% at 50% -10%, rgba(237,40,36,.34) 0%, rgba(237,40,36,.08) 45%, rgba(237,40,36,0) 72%),
  radial-gradient(110% 50% at 50% 120%, rgba(255,150,40,.12) 0%, rgba(255,150,40,0) 70%),
  var(--paper)}
/* film-grain texture over the lit area */
.screen::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.4' intercept='-0.55'/%3E%3CfeFuncG type='linear' slope='2.4' intercept='-0.55'/%3E%3CfeFuncB type='linear' slope='2.4' intercept='-0.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:220px 220px; opacity:.1; mix-blend-mode:overlay;
  -webkit-mask-image:radial-gradient(130% 64% at 50% 116%, #000 0%, rgba(0,0,0,.8) 38%, rgba(0,0,0,.28) 62%, transparent 82%);
  mask-image:radial-gradient(130% 64% at 50% 116%, #000 0%, rgba(0,0,0,.8) 38%, rgba(0,0,0,.28) 62%, transparent 82%)}
#landing::before{opacity:.45}
.screen > *{position:relative; z-index:1}

/* ---------- logo: the mark beside the wordmark ---------- */
.logo{display:inline-flex; align-items:center; gap:.3em; font-size:25px; line-height:1; color:var(--ink); white-space:nowrap}
.logo::before{content:""; flex:none; width:.903em; height:1.12em; background-color:var(--lime); transform:rotate(16deg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080.62000274658203%20100%22%3E%3Cpath%20d%3D%22M80.12%200.66L79.68%200.57L79.16%200.86L77.14%203.16L63.13%2017.45L62.51%2018.27L61.79%2018.71L61.23%2018.52L59.90%2016.59L59.07%2014.54L58.38%2013.61L57.65%2012.12L54.77%208.42L51.80%205.62L49.58%204.06L46.78%202.52L44.55%201.80L43.06%201.09L41.94%200.82L36.44%200.09L33.46%200.00L29.64%200.21L24.14%201.04L22.09%201.89L20.04%202.49L16.96%204.05L14.73%205.52L11.10%208.61L9.39%2010.44L6.36%2014.54L4.92%2017.24L4.11%2019.38L3.33%2020.78L1.73%2026.10L0.37%2034.30L0.09%2039.79L0.00%2097.95L0.20%2098.88L0.49%2099.29L1.12%2099.26L2.33%2098.23L9.37%2090.78L16.12%2083.97L18.19%2081.56L18.73%2081.23L19.38%2081.36L20.14%2082.11L21.37%2084.90L22.68%2087.14L24.30%2089.46L25.75%2091.22L28.89%2094.28L33.36%2097.13L35.32%2097.80L36.72%2098.53L43.71%2099.94L49.39%20100.00L50.79%2099.84L57.13%2098.68L61.32%2097.07L64.03%2095.67L66.45%2094.07L69.69%2091.21L72.47%2088.07L74.14%2085.65L75.56%2083.13L76.23%2081.36L77.20%2079.50L77.79%2077.35L78.55%2075.58L80.15%2067.19L80.52%2060.30L80.62%201.96L80.49%201.21ZM60.19%2022.49L60.38%2023.67L60.39%2051.91L60.11%2057.50L59.77%2060.48L58.52%2064.77L56.91%2067.74L55.42%2069.49L53.77%2070.85L50.70%2072.29L49.39%2072.62L46.13%2072.88L42.31%2072.69L40.17%2072.26L37.37%2070.97L35.54%2069.47L34.01%2067.75L33.14%2066.08L32.62%2065.47L31.50%2064.89L30.20%2064.86L29.24%2065.52L28.55%2066.73L24.78%2071.67L20.95%2077.07L20.42%2077.42L20.41%2043.99L20.83%2040.07L22.00%2035.60L23.58%2032.43L25.35%2030.38L27.40%2028.76L31.69%2027.16L34.48%2026.93L38.30%2027.12L39.61%2027.37L43.06%2028.78L44.98%2030.24L46.29%2031.61L47.44%2033.46L48.74%2034.93L49.49%2035.27L50.33%2035.23L50.89%2034.93L59.09%2023.58L59.86%2022.65Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080.62000274658203%20100%22%3E%3Cpath%20d%3D%22M80.12%200.66L79.68%200.57L79.16%200.86L77.14%203.16L63.13%2017.45L62.51%2018.27L61.79%2018.71L61.23%2018.52L59.90%2016.59L59.07%2014.54L58.38%2013.61L57.65%2012.12L54.77%208.42L51.80%205.62L49.58%204.06L46.78%202.52L44.55%201.80L43.06%201.09L41.94%200.82L36.44%200.09L33.46%200.00L29.64%200.21L24.14%201.04L22.09%201.89L20.04%202.49L16.96%204.05L14.73%205.52L11.10%208.61L9.39%2010.44L6.36%2014.54L4.92%2017.24L4.11%2019.38L3.33%2020.78L1.73%2026.10L0.37%2034.30L0.09%2039.79L0.00%2097.95L0.20%2098.88L0.49%2099.29L1.12%2099.26L2.33%2098.23L9.37%2090.78L16.12%2083.97L18.19%2081.56L18.73%2081.23L19.38%2081.36L20.14%2082.11L21.37%2084.90L22.68%2087.14L24.30%2089.46L25.75%2091.22L28.89%2094.28L33.36%2097.13L35.32%2097.80L36.72%2098.53L43.71%2099.94L49.39%20100.00L50.79%2099.84L57.13%2098.68L61.32%2097.07L64.03%2095.67L66.45%2094.07L69.69%2091.21L72.47%2088.07L74.14%2085.65L75.56%2083.13L76.23%2081.36L77.20%2079.50L77.79%2077.35L78.55%2075.58L80.15%2067.19L80.52%2060.30L80.62%201.96L80.49%201.21ZM60.19%2022.49L60.38%2023.67L60.39%2051.91L60.11%2057.50L59.77%2060.48L58.52%2064.77L56.91%2067.74L55.42%2069.49L53.77%2070.85L50.70%2072.29L49.39%2072.62L46.13%2072.88L42.31%2072.69L40.17%2072.26L37.37%2070.97L35.54%2069.47L34.01%2067.75L33.14%2066.08L32.62%2065.47L31.50%2064.89L30.20%2064.86L29.24%2065.52L28.55%2066.73L24.78%2071.67L20.95%2077.07L20.42%2077.42L20.41%2043.99L20.83%2040.07L22.00%2035.60L23.58%2032.43L25.35%2030.38L27.40%2028.76L31.69%2027.16L34.48%2026.93L38.30%2027.12L39.61%2027.37L43.06%2028.78L44.98%2030.24L46.29%2031.61L47.44%2033.46L48.74%2034.93L49.49%2035.27L50.33%2035.23L50.89%2034.93L59.09%2023.58L59.86%2022.65Z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain}
/* the name in Montserrat ExtraBold Italic, leaned a touch further; --tw is its measured width
   (the splash animation reveals the name up to it) */
.lg-t{display:inline-block; overflow-x:clip; overflow-y:visible; font-family:"Montserrat",var(--font-head);
  font-weight:800; font-style:italic; letter-spacing:-.05em; line-height:1; --tw:3.36em; width:var(--tw)}
.lg-t i{display:block; white-space:nowrap; font-style:inherit; transform:skewX(-3deg); transform-origin:0 100%}
/* the top of the j's stem is sliced on a rising diagonal, like the mark's cut ends */
.lj{position:relative; display:inline-block; -webkit-text-fill-color:transparent}
.lj::before{content:attr(data-c); position:absolute; left:0; top:0; -webkit-text-fill-color:currentColor; clip-path:polygon(-0.300em 1.500em, -0.300em 0.480em, 0.305em 0.336em, 0.305em 0.285em, 0.120em 0.285em, 0.120em -0.400em, 1.000em -0.400em, 1.000em 1.500em)}

/* ---------- splash ---------- */
.splash-wrap{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; text-align:center}
.splash-wrap .logo{font-size:38px; gap:0; animation:markIn .55s cubic-bezier(.34,1.56,.64,1) both}
.splash-wrap .lg-t{width:0; animation:nameReveal .6s cubic-bezier(.22,1,.36,1) .8s both}
.splash-wrap p{font-size:15px; color:var(--sub); margin-top:10px; line-height:1.5; animation:tagFade .55s ease-out 1.5s both}
@keyframes markIn{from{opacity:0; transform:scale(.78)}to{opacity:1; transform:none}}
@keyframes nameReveal{from{width:0; margin-left:0}to{width:var(--tw); margin-left:.3em}}
@keyframes tagFade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@keyframes splashOut{from{opacity:1; transform:scale(1)}to{opacity:0; transform:scale(1.08)}}
@keyframes splashIn{from{opacity:0; transform:scale(.96) translateY(10px)}to{opacity:1; transform:none}}
.screen.splash-out{animation:splashOut .9s cubic-bezier(.65,0,.35,1) both; z-index:2}
.screen.splash-in{animation:splashIn .9s cubic-bezier(.16,1,.3,1) both; z-index:3}

/* ---------- landing ---------- */
.scroll{flex:1; overflow-y:auto; display:flex; flex-direction:column}
.scroll::-webkit-scrollbar{display:none}
.lp-top{display:flex; align-items:center; padding:22px clamp(20px,5vw,48px); flex:none}
.lp-top .logo{font-size:22px}
.hero{margin-top:auto; padding:24px 24px 0; text-align:center; display:flex; flex-direction:column; align-items:center}
.lp-eyebrow{display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 12px; border-radius:99px;
  font-size:12.5px; font-weight:500; color:var(--body2); letter-spacing:.01em;
  background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); margin-bottom:26px}
.lp-dot{width:7px; height:7px; border-radius:50%; background:var(--lime); position:relative}
.lp-dot::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--lime); animation:lpPulse 2.2s ease-out infinite}
@keyframes lpPulse{from{transform:scale(1); opacity:.7}to{transform:scale(3.2); opacity:0}}
h1{font-family:var(--font-head); font-size:clamp(38px,10.5vw,76px); font-weight:700; letter-spacing:-.045em;
  line-height:1; margin:0 0 20px; text-wrap:balance}
h1 em{font-style:normal; color:var(--lime)}
.sub{font-size:clamp(15px,1.6vw,17.5px); color:var(--sub); line-height:1.55; max-width:36ch; margin:0 auto 32px}
/* not a button: a status badge in the brand yellow */
.soon{display:inline-flex; align-items:center; gap:10px; padding:16px 28px; border-radius:99px;
  background:var(--lime); color:var(--on-accent); font-family:var(--font-body); font-size:15.5px; font-weight:700;
  box-shadow:0 10px 34px -8px rgba(255,210,0,.45); cursor:default; user-select:none}
.reel{margin-top:clamp(44px,7vh,72px); overflow:hidden; flex:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.track{display:flex; gap:14px; width:max-content; animation:lpScroll 60s linear infinite}
/* the track holds the photos twice, so sliding it by half loops seamlessly */
@keyframes lpScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
.tile{width:clamp(108px,15vw,150px); aspect-ratio:1; border-radius:18px; overflow:hidden; flex:none; background:var(--grey); opacity:.92}
.tile img{width:100%; height:100%; object-fit:cover; display:block}
.steps{list-style:none; display:flex; justify-content:center; gap:clamp(20px,5vw,44px);
  margin-top:auto; padding:40px 24px 30px; font-size:13px; font-weight:500; color:var(--sub)}
.steps li{display:flex; align-items:baseline; gap:7px}
.steps span{font-size:11px; font-weight:600; color:var(--lime); font-variant-numeric:tabular-nums; letter-spacing:.04em}

/* entrance: each part rises in turn once the landing page is showing */
@keyframes lpRise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
#landing.active .lp-top,#landing.active .lp-eyebrow,#landing.active h1,#landing.active .sub,
#landing.active .soon,#landing.active .reel,#landing.active .steps{animation:lpRise .8s cubic-bezier(.16,1,.3,1) both}
#landing.active .lp-eyebrow{animation-delay:.15s}
#landing.active h1{animation-delay:.25s}
#landing.active .sub{animation-delay:.35s}
#landing.active .soon{animation-delay:.45s}
#landing.active .reel{animation-delay:.6s}
#landing.active .steps{animation-delay:.75s}

@media (prefers-reduced-motion:reduce){
  .screen.splash-out,.screen.splash-in,.splash-wrap .logo,.splash-wrap .lg-t,.splash-wrap p{animation-duration:.01s; animation-delay:0s}
  .track,.lp-dot::after{animation:none}
  #landing.active .lp-top,#landing.active .lp-eyebrow,#landing.active h1,#landing.active .sub,
  #landing.active .soon,#landing.active .reel,#landing.active .steps{animation:none}
}