:root{
  --bg:#0A0A0A;
  --fg:#F2F0EB;
  --accent:#D7FF3D;
  --muted:#6B6B66;
  --border:#2A2A26;
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
}

body{
  font-family:'Archivo',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--accent);color:var(--bg);}

a{color:inherit;text-decoration:none;}

/* ---------- global chrome ---------- */

.progress-bar{
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  background:var(--border);
  z-index:100;
}
.progress-bar span{
  display:block;
  height:100%;
  width:100%;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
}

.nav-wordmark{
  position:fixed;
  top:1.25rem;left:1.5rem;
  z-index:100;
  font-family:'Anton',sans-serif;
  font-size:1.1rem;
  letter-spacing:0.05em;
  opacity:0;
  pointer-events:none;
}
.nav-wordmark.visible{pointer-events:auto;}

/* ---------- smooth scroll shell ---------- */

#smooth-wrapper{
  position:fixed;
  inset:0;
  overflow:hidden;
}
#smooth-content{
  overflow:visible;
  width:100%;
}

/* ---------- section base ---------- */

.beat{
  position:relative;
  width:100%;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6vh 6vw;
  overflow:hidden;
}

.beat-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:64rem;
  text-align:center;
}

.line{
  font-family:'Anton',sans-serif;
  font-size:clamp(1.75rem,6vw,4.5rem);
  line-height:1.05;
  text-transform:uppercase;
  margin:0.3em 0;
}

/* ---------- Beat 1: Title ---------- */

.beat-1 .wordmark{
  font-family:'Anton',sans-serif;
  font-size:clamp(3.5rem,16vw,13rem);
  line-height:0.9;
  letter-spacing:0.01em;
}

.beat-1 .wordmark .char{
  display:inline-block;
  will-change:transform;
}

.beat-1 .tagline{
  margin-top:1.5em;
  font-family:'Archivo',sans-serif;
  font-weight:600;
  font-size:clamp(0.9rem,1.8vw,1.25rem);
  line-height:1.5;
  color:var(--muted);
}

.scroll-cue{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  font-size:0.75rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--muted);
  z-index:2;
}

/* ---------- Beat 2: The Hook ---------- */

.beat2-inner .line{opacity:0;}

.counter{
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.counter-unit{
  font-size:0.5em;
  margin-left:0.15em;
  color:var(--accent);
}

/* ---------- Beat 3: The Wrong Spend ---------- */

.marquee-wrap{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  z-index:1;
  overflow:hidden;
}
.marquee-track{
  display:inline-block;
  white-space:nowrap;
  font-family:'Anton',sans-serif;
  font-size:clamp(2rem,8vw,6rem);
  color:var(--border);
  letter-spacing:0.02em;
  will-change:transform;
}

.beat3-inner .line{opacity:0;}
.beat3-inner .final-line{color:var(--accent);}

/* ---------- Beat 4: What We Actually Do ---------- */

.beat4-inner .line{
  font-size:clamp(1.25rem,4.5vw,3rem);
  text-align:left;
  opacity:0;
}
.beat4-inner{max-width:56rem;text-align:left;}

.word-die{color:var(--accent);display:inline-block;}

.stamp-line{position:relative;}
.stamp-fill{
  display:block;
  -webkit-clip-path:inset(0 100% 0 0);
  clip-path:inset(0 100% 0 0);
}

.payoff-line{margin-top:0.6em;}
.always-on{
  color:var(--accent);
  display:inline-block;
}
.struck-wrap{
  position:relative;
  display:inline-block;
}
.strike-svg{
  position:absolute;
  left:-2%;
  top:0;
  width:104%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.strike-svg line{
  stroke:var(--accent);
  stroke-width:3;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:100;
  stroke-dashoffset:100;
}

/* ---------- Beat 5: Proof ---------- */

.beat-5{padding:0;}

.logo-track-wrap{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  overflow:hidden;
  z-index:1;
}
.logo-track{
  display:flex;
  align-items:center;
  gap:6vw;
  padding-left:100vw;
  will-change:transform;
}
.brand-name{
  font-family:'Anton',sans-serif;
  font-size:clamp(2.5rem,9vw,7rem);
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0.15;
  color:var(--fg);
}

.tagline-final{
  position:relative;
  z-index:2;
  font-family:'Anton',sans-serif;
  font-size:clamp(1.5rem,5vw,3.5rem);
  text-transform:uppercase;
  text-align:center;
  line-height:1.15;
  opacity:0;
  background:var(--bg);
  padding:0.3em 0.6em;
}

/* ---------- Work showcase ---------- */

.work-section{
  position:relative;
  padding:12vh 6vw;
}

.work-inner{
  max-width:90rem;
  margin:0 auto;
}

.work-heading{
  font-family:'Anton',sans-serif;
  font-size:clamp(2.5rem,8vw,6rem);
  text-transform:uppercase;
  line-height:0.95;
}

.work-sub{
  margin-top:0.6em;
  margin-bottom:2.5em;
  max-width:36rem;
  color:var(--muted);
  font-family:'Archivo',sans-serif;
  font-size:clamp(0.9rem,1.8vw,1.25rem);
  line-height:1.5;
}

.work-group{margin-bottom:3rem;}
.work-group:last-child{margin-bottom:0;}

.work-brand{
  font-family:'Archivo',sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-size:clamp(0.9rem,1.6vw,1.1rem);
  color:var(--accent);
  margin-bottom:0.9rem;
}

.work-row-wrap{
  position:relative;
}

.work-row-wrap::before,
.work-row-wrap::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:3rem;
  z-index:2;
  pointer-events:none;
}
.work-row-wrap::before{left:0;background:linear-gradient(to right, var(--bg), transparent);}
.work-row-wrap::after{right:0;background:linear-gradient(to left, var(--bg), transparent);}

.work-row{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.work-row::-webkit-scrollbar{display:none;}

.work-nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:2.75rem;
  height:2.75rem;
  border:1px solid var(--accent);
  background:var(--bg);
  color:var(--accent);
  font-family:'Archivo',sans-serif;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.work-nav-btn:hover{background:var(--accent);color:var(--bg);}
.work-nav-btn.is-disabled{opacity:0.2;pointer-events:none;}
.work-nav-prev{left:-0.25rem;}
.work-nav-next{right:-0.25rem;}

@media (max-width:640px){
  .work-nav-btn{width:2.1rem;height:2.1rem;font-size:0.95rem;}
  .work-row-wrap::before,
  .work-row-wrap::after{width:1.75rem;}
}

.work-card{
  flex:0 0 auto;
  width:min(42vw,200px);
  aspect-ratio:9/16;
  position:relative;
  overflow:hidden;
  scroll-snap-align:start;
  background:var(--border);
  opacity:0;
}

.work-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.4s ease;
}

.work-card:hover img{transform:scale(1.05);}

/* ---------- Beat 6: Trust Layer ---------- */

.beat-6{
  background-image:
    repeating-linear-gradient(0deg, var(--border) 0px, var(--border) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, var(--border) 0px, var(--border) 1px, transparent 1px, transparent 48px);
  background-position:center;
}

.beat6-inner{max-width:44rem;text-align:left;}

.ledger-intro{
  font-family:'Archivo',sans-serif;
  font-weight:400;
  font-size:clamp(1.1rem,3vw,1.6rem);
  line-height:1.4;
  margin-bottom:2.5rem;
}
.ledger-intro span{
  display:block;
  font-weight:800;
  color:var(--fg);
}

.ledger-item{
  margin-bottom:1.6rem;
}
.ledger-item p{
  font-family:'Archivo',sans-serif;
  font-weight:600;
  font-size:clamp(0.95rem,2.4vw,1.35rem);
  line-height:1.4;
}
.ledger-item hr{
  border:none;
  border-top:1px solid var(--fg);
  margin-top:0.7rem;
  transform:scaleX(0);
  transform-origin:left;
}

.tracker-box{
  display:inline-block;
  margin-top:0.8rem;
  padding:0.5rem 1rem;
  border:1px solid var(--accent);
  font-family:'Anton',sans-serif;
  font-size:clamp(1.5rem,4vw,2.25rem);
  color:var(--accent);
  opacity:0;
}

/* ---------- Beat 7: Close ---------- */

.beat7-inner .positioning-repeat{
  font-family:'Anton',sans-serif;
  font-size:clamp(1.75rem,6vw,3.75rem);
  text-transform:uppercase;
  line-height:1.15;
}

.beat7-inner .close-line{
  margin-top:1.5em;
  font-family:'Archivo',sans-serif;
  font-weight:500;
  font-size:clamp(0.95rem,2vw,1.35rem);
  color:var(--muted);
  opacity:0;
}

.cta{
  display:inline-block;
  margin-top:1.2em;
  font-family:'Anton',sans-serif;
  font-size:clamp(3rem,10vw,8rem);
  text-transform:uppercase;
  color:var(--accent);
  line-height:0.95;
  will-change:transform;
}

/* ---------- responsive tweaks ---------- */

@media (max-width:768px){
  .beat{padding:5vh 6vw;}
  .beat4-inner{max-width:100%;}
  .beat6-inner{max-width:100%;}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce){
  .beat{min-height:auto;padding:12vh 6vw;}
  #smooth-wrapper{position:static;overflow:visible;}
  #smooth-content{overflow:visible;}
  .progress-bar{display:none;}
  .nav-wordmark{opacity:1 !important;pointer-events:auto !important;}

  .beat2-inner .line,
  .beat3-inner .line,
  .beat4-inner .line,
  .tagline-final,
  .beat7-inner .close-line{
    opacity:1 !important;
  }
  .stamp-fill{clip-path:inset(0 0% 0 0) !important;}
  .strike-svg line{stroke-dashoffset:0 !important;}
  .tracker-box{opacity:1 !important;}
  .work-card{opacity:1 !important;}
  .ledger-item hr{transform:scaleX(1) !important;}
  .brand-name{opacity:1 !important;}
  .marquee-track{transform:none !important;}
  .logo-track-wrap{position:static !important;padding:4vh 0;}
  .logo-track{position:static !important;transform:none !important;flex-wrap:wrap;justify-content:center;padding-left:0;}
  .beat-5{padding:6vh 6vw !important;}
}