:root{
  --bg:#0b0a09;
  --bg-alt:#121110;
  --ink:#f3ede2;
  --ink-dim:#a89e8f;
  --ink-dimmer:#6b6459;
  --brass:#c99a4b;
  --brass-soft:rgba(201,154,75,0.35);
  --line:rgba(243,237,226,0.09);
  --serif:'Fraunces',serif;
  --sans:'Inter',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--brass); color:#0b0a09;}
a{color:inherit;}
.wrap{max-width:1100px; margin:0 auto; padding:0 32px;}

.eyebrow{
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--brass); display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--brass);}
.eyebrow.center{justify-content:center;}

.reveal{opacity:0; transform:translateY(28px); transition:opacity 1s cubic-bezier(.16,.8,.3,1), transform 1s cubic-bezier(.16,.8,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}

/* NAV */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 32px; font-family:var(--mono); font-size:13px;
  mix-blend-mode:difference;
}
nav .logo{text-decoration:none;}
nav .nav-right{display:flex; align-items:center; gap:22px;}
nav .navlink{text-decoration:none; color:var(--ink-dim); transition:color .25s ease;}
nav .navlink:hover{color:var(--ink);}
nav .cta{
  text-decoration:none; border:1px solid rgba(243,237,226,0.3);
  padding:9px 18px; border-radius:99px; transition:background .3s ease;
}
nav .cta:hover{background:rgba(243,237,226,0.1);}

/* BUTTONS */
.btn{
  font-family:var(--mono); font-size:13.5px; padding:15px 28px; border-radius:99px;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.btn-primary{background:var(--brass); color:#181206; font-weight:500;}
.btn-primary:hover{transform:translateY(-2px); background:#dcae5e;}
.btn-secondary{border:1px solid rgba(243,237,226,0.22); color:var(--ink);}
.btn-secondary:hover{border-color:rgba(243,237,226,0.45); transform:translateY(-2px);}

/* HERO (page 1) */
.hero{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:140px 32px 100px; position:relative;}
.hero-flow{position:absolute; inset:0; z-index:0; opacity:0.5; pointer-events:none;}
.hero-inner{max-width:980px; margin:0 auto; position:relative; z-index:2;}
h1.hero-headline{
  font-family:var(--serif); font-weight:400; font-size:clamp(40px,6.4vw,84px);
  line-height:1.05; letter-spacing:-0.015em; max-width:16ch;
}
h1.hero-headline em{font-style:italic; color:var(--brass);}
.hero-sub{font-size:clamp(16px,1.6vw,19px); color:var(--ink-dim); max-width:46ch; line-height:1.6; margin:28px 0 44px;}
.cta-row{display:flex; gap:16px; flex-wrap:wrap;}

/* STATEMENT sections */
.statement{min-height:60vh; display:flex; align-items:center; padding:100px 32px;}
.statement-inner{max-width:880px; margin:0 auto;}
.statement h2{font-family:var(--serif); font-weight:400; font-size:clamp(28px,4.2vw,52px); line-height:1.18; letter-spacing:-0.01em;}
.statement h2 .dim{color:var(--ink-dimmer);}
.statement p.support{font-size:16px; color:var(--ink-dim); max-width:50ch; margin-top:24px; line-height:1.65;}

/* FRAMEWORK (compact) */
.framework{padding:100px 32px; border-top:1px solid var(--line);}
.fw-head{max-width:640px; margin-bottom:60px;}
.fw-head h2{font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.6vw,42px); line-height:1.15;}
.fw-row{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; max-width:1000px; margin:0 auto;}
.fw-item{border-left:1px solid var(--line); padding-left:22px;}
.fw-item .num{font-family:var(--mono); font-size:12px; color:var(--brass); margin-bottom:14px; display:block;}
.fw-item h3{font-family:var(--serif); font-weight:500; font-size:22px; margin-bottom:10px;}
.fw-item p{color:var(--ink-dim); font-size:14.5px; line-height:1.6;}

/* PROOF strip */
.proof-strip{padding:80px 32px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.proof-strip-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; max-width:1000px; margin:0 auto; text-align:center;}
.proof-strip-num{font-family:var(--mono); font-weight:500; font-size:clamp(28px,3.6vw,40px); color:var(--brass);}
.proof-strip-cap{font-size:13px; color:var(--ink-dim); margin-top:8px;}

/* CTA */
.cta-section{padding:160px 32px; text-align:center; position:relative; overflow:hidden;}
.cta-glow{position:absolute; inset:-10%; z-index:0; background:radial-gradient(ellipse 60% 50% at 50% 40%, rgba(201,154,75,0.14), transparent 70%);}
.cta-inner{position:relative; z-index:2; max-width:720px; margin:0 auto;}
.cta-section h2{font-family:var(--serif); font-weight:400; font-size:clamp(32px,5vw,58px); line-height:1.1; margin-bottom:22px;}
.cta-section p{color:var(--ink-dim); font-size:16px; margin-bottom:40px;}
.cta-buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* FOOTER */
footer{
  border-top:1px solid var(--line); padding:44px 32px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  font-family:var(--mono); font-size:12.5px; color:var(--ink-dimmer);
}
footer a{text-decoration:none; color:var(--ink-dim); transition:color .25s ease;}
footer a:hover{color:var(--brass);}
footer .foot-links{display:flex; gap:22px;}

/* TESTIMONIALS */
.testimonials{padding:100px 32px; border-top:1px solid var(--line);}
.testimonials .eyebrow{justify-content:center;}
.testimonials h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.6vw,42px); line-height:1.2;
  text-align:center; margin-bottom:60px;
}
.testimonial-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:30px; max-width:960px; margin:0 auto;}
.testimonial-card{border:1px solid var(--line); border-radius:14px; padding:36px; background:var(--bg-alt);}
.testimonial-card .quote{font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.55; color:var(--ink); margin-bottom:22px;}
.testimonial-name{font-family:var(--mono); font-size:12.5px; color:var(--ink-dimmer); letter-spacing:0.03em;}

/* ============ WORK BELTS ============ */
.work-header{padding:160px 32px 80px;}
.work-header-inner{max-width:780px; margin:0 auto;}
.work-header h1{font-family:var(--serif); font-weight:400; font-size:clamp(34px,5.4vw,64px); line-height:1.1;}
.work-header p{color:var(--ink-dim); font-size:16px; max-width:52ch; margin-top:22px; line-height:1.6;}

/* Reels belt */
.belt-section{padding:60px 0;}
.belt-label{padding:0 32px; max-width:1100px; margin:0 auto 30px;}
.belt-label .eyebrow{margin-bottom:8px;}
.belt-label p{color:var(--ink-dimmer); font-size:13.5px;}

.marquee{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marquee-track{display:flex; gap:20px; width:max-content; animation:scrollLeft 42s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes scrollLeft{from{transform:translateX(0);} to{transform:translateX(-50%);}}

.reel-card{
  position:relative; width:230px; aspect-ratio:9/16; border-radius:14px; overflow:hidden;
  background:linear-gradient(155deg,#1c1712,#0e0c0a); border:1px solid var(--line); flex:0 0 auto;
}
.reel-card video{width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0;}
.reel-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
}
.reel-play svg{width:44px; height:44px; opacity:0.85;}
.reel-caption{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  font-family:var(--mono); font-size:11px; color:var(--ink); line-height:1.4;
  text-shadow:0 2px 8px rgba(0,0,0,0.8);
}
.reel-hint{
  position:absolute; top:10px; right:10px; z-index:2;
  font-family:var(--mono); font-size:9px; color:var(--ink-dimmer);
  background:rgba(0,0,0,0.5); padding:3px 7px; border-radius:99px; letter-spacing:0.03em;
}

/* Brand belt */
.brand-track{display:flex; gap:0; width:max-content; animation:scrollLeft 30s linear infinite;}
.marquee.brands:hover .brand-track{animation-play-state:paused;}
.brand-item{
  flex:0 0 auto; padding:0 60px; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:26px; font-weight:400; color:var(--ink-dim);
  white-space:nowrap; border-right:1px solid var(--line);
}
.brand-item em{font-style:italic; color:var(--brass);}

@media (max-width:820px){
  .fw-row, .proof-strip-grid, .testimonial-grid{grid-template-columns:1fr; gap:30px;}
  footer{flex-direction:column; text-align:center;}
  .reel-card{width:170px;}
  .brand-item{padding:0 34px; font-size:20px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
  .reveal{opacity:1; transform:none;}
  .marquee-track, .brand-track{animation:none !important;}
}