:root {
  --orange: #ff8a00;
  --orange-deep: #ff6a00;
  --yellow: #ffd84a;
  --ink: #0d0d0d;
  --paper: #f3eee5;
  --paper-2: #fffaf2;
  --line: rgba(13,13,13,.18);
  --muted: #746f67;
  --white: #fff;
  --max: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
img { max-width: 100%; display:block; }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.section-pad { padding: 92px max(24px, calc((100vw - var(--max))/2)); }
.section-label {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 40px;
  opacity: .72;
}
.section-label.light, .eyebrow.light { color: rgba(255,255,255,.7); }
.eyebrow {
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 24px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px max(24px, calc((100vw - var(--max))/2));
  background: rgba(243,238,229,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display:flex; gap:11px; align-items:center; }
.brand-mark { color:var(--orange); font-size: 29px; line-height:1; }
.brand-wordmark {
  font-family:"Archivo Black", sans-serif;
  font-size: 15px;
  line-height:.88;
  letter-spacing:-.06em;
}
.site-nav { display:flex; align-items:center; gap:30px; font-size:14px; font-weight:600; }
.site-nav a { position:relative; }
.site-nav a:not(.nav-cta)::after {
  content:"";
  position:absolute;
  left:0; right:100%; bottom:-5px;
  height:2px; background:var(--orange);
  transition:.25s ease;
}
.site-nav a:hover::after { right:0; }
.nav-cta { background:var(--ink); color:white; padding:12px 18px; }
.menu-toggle { display:none; background:none; border:0; padding:8px; }
.menu-toggle span { display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; }

.hero {
  min-height: calc(100vh - 72px);
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(40px,6vw,90px);
  align-items:center;
  padding-top:70px;
  padding-bottom:80px;
}
.hero h1 {
  margin:0;
  font-family:"Archivo Black", sans-serif;
  font-size:clamp(60px,8vw,136px);
  line-height:.83;
  letter-spacing:-.075em;
  text-transform:uppercase;
}
.hero h1 em {
  font-family:"Libre Caslon Display", serif;
  font-weight:400;
  text-transform:none;
  letter-spacing:-.04em;
  color:var(--orange-deep);
}
.scribble-wrap { position:relative; display:inline-block; }
.scribble-wrap::after {
  content:"";
  position:absolute;
  left:1%; right:-2%; bottom:-3%; height:14%;
  background:var(--yellow);
  transform:rotate(-1.2deg);
  z-index:-1;
}
.hero-lede { max-width:680px; font-size:clamp(19px,2vw,28px); line-height:1.35; margin:32px 0 0; }
.hero-actions { display:flex; align-items:center; gap:26px; margin-top:36px; flex-wrap:wrap; }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  min-height:52px;
  padding:0 20px;
  border:1px solid currentColor;
  font-weight:700;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn-dark { background:var(--ink); color:white; border-color:var(--ink); }
.btn-dark:hover { background:var(--orange); color:var(--ink); border-color:var(--orange); }
.btn-light { background:white; color:var(--ink); border-color:white; }
.btn-light:hover { background:var(--yellow); border-color:var(--yellow); }
.btn-full { width:100%; }
.text-link { font-weight:700; border-bottom:2px solid var(--ink); padding-bottom:3px; }

.hero-art { position:relative; min-height:620px; }
.poster { position:absolute; border:2px solid var(--ink); box-shadow:12px 12px 0 var(--ink); }
.poster-main {
  width:min(500px, 82%);
  right:5%; top:3%;
  background:var(--orange);
  padding:28px;
  transform:rotate(2deg);
}
.poster-kicker, .poster-foot { font-family:"DM Mono", monospace; font-size:12px; letter-spacing:.12em; }
.poster-big {
  font-family:"Archivo Black", sans-serif;
  font-size:clamp(48px,5vw,82px);
  line-height:.84;
  letter-spacing:-.06em;
  margin:40px 0 80px;
}
.sticker { position:absolute; border:2px solid var(--ink); padding:18px; font-family:"Archivo Black", sans-serif; line-height:.93; }
.sticker-a { left:0; top:46%; background:var(--paper-2); transform:rotate(-7deg); font-size:26px; }
.sticker-b { right:0; bottom:2%; background:var(--yellow); transform:rotate(5deg); font-size:20px; }
.banana-dot { position:absolute; width:110px; height:110px; border-radius:50%; background:var(--ink); right:34%; bottom:4%; }
.banana-dot::after { content:""; position:absolute; width:44px; height:84px; border:11px solid var(--orange); border-left-color:transparent; border-top-color:transparent; border-radius:50%; transform:rotate(35deg); left:30px; top:7px; }

.ticker { overflow:hidden; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); background:var(--yellow); }
.ticker-track { width:max-content; display:flex; align-items:center; gap:28px; padding:14px 0; animation:ticker 24s linear infinite; font-family:"Archivo Black", sans-serif; font-size:18px; }
.ticker-track i { font-style:normal; color:var(--orange-deep); }
@keyframes ticker { to { transform:translateX(-50%); } }

.problem-grid { display:grid; grid-template-columns: 1fr 1fr; gap:80px; }
.problem h2, .work h2, .process h2, .start h2, .sprint h2 {
  font-family:"Archivo Black", sans-serif;
  font-size:clamp(46px,6vw,90px);
  line-height:.92;
  letter-spacing:-.06em;
  text-transform:uppercase;
  margin:0;
}
.problem h2 span { color:var(--orange); }
.problem-copy { font-size:clamp(19px,2vw,26px); line-height:1.45; max-width:680px; }
.problem-copy p { margin:0 0 24px; }
.marker-line { background:linear-gradient(transparent 55%, var(--yellow) 55%); display:inline; }

.offer { background:var(--ink); color:white; }
.offer-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:42px; }
.offer h2 { font-family:"Archivo Black", sans-serif; font-size:clamp(54px,7vw,112px); line-height:.86; letter-spacing:-.07em; text-transform:uppercase; margin:0; }
.price-stamp { width:180px; height:180px; flex:0 0 180px; border-radius:50%; background:var(--orange); color:var(--ink); display:grid; place-items:center; align-content:center; font-family:"Archivo Black"; font-size:74px; line-height:.8; transform:rotate(6deg); }
.price-stamp span { font-family:"DM Sans"; font-size:26px; align-self:start; margin-right:75px; margin-bottom:-18px; }
.price-stamp small { font-family:"DM Mono"; font-size:10px; text-transform:uppercase; letter-spacing:.12em; margin-top:10px; }
.offer-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; padding-top:60px; }
.big-copy { font-family:"Libre Caslon Display", serif; font-size:clamp(28px,3.2vw,52px); line-height:1.05; margin:0 0 38px; }
.deliverables article { display:grid; grid-template-columns:52px 1fr; gap:22px; padding:22px 0; border-top:1px solid rgba(255,255,255,.2); }
.deliverables article:last-child { border-bottom:1px solid rgba(255,255,255,.2); }
.deliverables article > span { font-family:"DM Mono"; color:var(--orange); }
.deliverables h3 { margin:0 0 7px; font-size:22px; }
.deliverables p { margin:0; color:rgba(255,255,255,.7); max-width:620px; }

.work-head { display:flex; justify-content:space-between; align-items:flex-end; gap:60px; margin-bottom:50px; }
.work-head p { max-width:480px; font-size:20px; line-height:1.4; }
.work-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:2px solid var(--ink); border-left:2px solid var(--ink); }
.work-card { min-height:320px; padding:28px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); display:flex; flex-direction:column; }
.work-card h3 { margin:45px 0 12px; font-family:"Archivo Black"; font-size:clamp(34px,4vw,62px); line-height:.95; letter-spacing:-.05em; text-transform:uppercase; }
.work-card p { max-width:520px; font-size:18px; line-height:1.45; }
.card-no, .card-tag { font-family:"DM Mono"; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.card-tag { margin-top:auto; }
.work-card-orange { background:var(--orange); }
.work-card-cream { background:var(--paper-2); }
.work-card-dark { background:var(--ink); color:white; }

.sprint { background:var(--yellow); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.sprint-inner { display:grid; grid-template-columns:1fr auto auto; gap:42px; align-items:end; }
.sprint-copy { max-width:700px; font-size:20px; line-height:1.45; }
.sprint-price { font-family:"Archivo Black"; font-size:clamp(70px,9vw,150px); line-height:.7; letter-spacing:-.08em; }

.process-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; }
.process-intro { position:sticky; top:120px; align-self:start; }
.process-intro p { font-size:20px; line-height:1.5; max-width:520px; }
.steps { list-style:none; margin:0; padding:0; }
.steps li { display:grid; grid-template-columns:64px 1fr; gap:24px; padding:28px 0; border-top:2px solid var(--ink); }
.steps li:last-child { border-bottom:2px solid var(--ink); }
.steps > li > span { font-family:"DM Mono"; color:var(--orange-deep); }
.steps h3 { font-size:28px; margin:0 0 8px; }
.steps p { margin:0; font-size:18px; line-height:1.45; color:#393631; }

.manifesto { background:var(--ink); color:white; display:grid; grid-template-columns:1fr .35fr; gap:60px; align-items:end; }
.manifesto-copy p { font-family:"Libre Caslon Display"; font-size:clamp(28px,4vw,56px); margin:0; }
.manifesto-copy h2 { font-family:"Archivo Black"; font-size:clamp(84px,14vw,220px); line-height:.72; letter-spacing:-.08em; margin:26px 0 36px; }
.manifesto-copy h2.orange { color:var(--orange); }
.manifesto-note { font-size:20px; line-height:1.45; color:rgba(255,255,255,.7); }

.start { display:grid; grid-template-columns:1fr .75fr; gap:90px; align-items:start; }
.start-left > p:last-child { font-size:20px; line-height:1.5; max-width:650px; }
.contact-card { background:var(--paper-2); border:2px solid var(--ink); padding:28px; box-shadow:12px 12px 0 var(--orange); }
.contact-card label { display:block; margin-bottom:22px; }
.contact-card label span { display:block; font-family:"DM Mono"; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px; }
.contact-card input, .contact-card textarea { width:100%; background:transparent; border:0; border-bottom:2px solid var(--ink); padding:12px 0; outline:none; resize:vertical; }
.contact-card input:focus, .contact-card textarea:focus { border-color:var(--orange-deep); }
.form-note { font-size:11px; color:var(--muted); margin:12px 0 0; line-height:1.4; }

.site-footer { background:var(--orange); padding-top:70px; padding-bottom:30px; }
.footer-top { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
.footer-brand { font-family:"Archivo Black"; font-size:clamp(64px,11vw,170px); line-height:.76; letter-spacing:-.08em; }
.footer-brand span { color:var(--paper-2); }
.footer-copy { max-width:330px; font-size:17px; }
.footer-copy a { font-weight:700; border-bottom:2px solid var(--ink); }
.footer-bottom { margin-top:60px; padding-top:18px; border-top:1px solid rgba(13,13,13,.4); display:flex; justify-content:space-between; gap:20px; font-family:"DM Mono"; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 980px) {
  .site-nav { position:fixed; inset:72px 0 auto 0; background:var(--paper); padding:28px; flex-direction:column; align-items:flex-start; border-bottom:2px solid var(--ink); transform:translateY(-140%); transition:.25s ease; }
  .site-nav.open { transform:none; }
  .menu-toggle { display:block; }
  .hero, .problem-grid, .offer-grid, .process-grid, .start { grid-template-columns:1fr; }
  .hero-art { min-height:560px; margin-top:20px; }
  .work-head, .offer-head { align-items:flex-start; flex-direction:column; }
  .sprint-inner { grid-template-columns:1fr; align-items:start; }
  .process-intro { position:static; }
  .manifesto { grid-template-columns:1fr; }
  .work-grid { grid-template-columns:1fr; }
  .start { gap:50px; }
}

@media (max-width: 640px) {
  .section-pad { padding:68px 20px; }
  .site-header { padding:15px 20px; }
  .hero { min-height:auto; padding-top:50px; }
  .hero h1 { font-size:clamp(50px,17vw,82px); }
  .hero-lede { font-size:19px; }
  .hero-art { min-height:470px; }
  .poster-main { width:85%; right:3%; }
  .poster-big { font-size:52px; margin:30px 0 60px; }
  .sticker-a { font-size:21px; top:49%; }
  .sticker-b { font-size:16px; right:2%; }
  .banana-dot { width:80px; height:80px; right:30%; }
  .banana-dot::after { width:34px; height:60px; border-width:8px; left:22px; top:6px; }
  .price-stamp { width:130px; height:130px; flex-basis:130px; font-size:54px; }
  .price-stamp span { margin-right:55px; font-size:20px; }
  .footer-top, .footer-bottom { flex-direction:column; align-items:flex-start; }
  .work-card { min-height:270px; }
  .manifesto-copy h2 { margin:18px 0 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}