/* ============================================================
   NABA — Not Another Bloody Agency
   Design system: hi-vis poster / anti-agency brutalism
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root{
  --ink:#161512;
  --ink-soft:#3a3833;
  --paper:#F4F0E4;
  --paper-2:#FBF8EE;
  --yellow:#FFE500;
  --yellow-deep:#E9C200;
  --red:#E5392B;
  --white:#FFFFFF;
  --line:3px solid var(--ink);
  --shadow:8px 8px 0 var(--ink);
  --shadow-sm:5px 5px 0 var(--ink);
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Hanken Grotesk',-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- TYPE ---------- */
.display{
  font-family:'Anton',sans-serif;
  font-weight:400;
  line-height:0.92;
  letter-spacing:0.01em;
  text-transform:uppercase;
}
h1.display{font-size:clamp(3.2rem,9vw,7.5rem);}
h2.display{font-size:clamp(2.4rem,5.5vw,4.6rem);}
h3.display{font-size:clamp(1.6rem,3vw,2.4rem);}
.eyebrow{
  font-weight:800;text-transform:uppercase;letter-spacing:0.14em;
  font-size:0.82rem;
}
p{margin-bottom:1rem;}
.lead{font-size:1.2rem;font-weight:500;}
.strike{text-decoration:line-through;text-decoration-color:var(--red);
  text-decoration-thickness:4px;opacity:0.65;}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
section{padding:84px 0;}
.tight{padding:56px 0;}
.center{text-align:center;}
.bg-ink{background:var(--ink);color:var(--paper);}
.bg-yellow{background:var(--yellow);}
.bg-paper2{background:var(--paper-2);}
.bg-ink .eyebrow{color:var(--yellow);}

/* ---------- NAV ---------- */
header.nav{
  position:sticky;top:0;z-index:50;
  background:var(--yellow);
  border-bottom:var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;
  height:74px;
}
.logo{
  font-family:'Anton',sans-serif;font-size:1.7rem;
  text-transform:uppercase;letter-spacing:0.02em;
  text-decoration:none;display:flex;align-items:center;gap:9px;
}
.logo .dot{
  background:var(--ink);color:var(--yellow);
  padding:2px 10px;display:inline-block;
}
.navlinks{display:flex;align-items:center;gap:5px;list-style:none;}
.navlinks a{
  text-decoration:none;font-weight:700;font-size:0.95rem;
  padding:9px 13px;display:block;
}
.navlinks a:hover{background:var(--ink);color:var(--yellow);}
.navlinks a.active{text-decoration:underline;text-decoration-thickness:3px;}
.dropdown{position:relative;}
.dropdown-menu{
  display:none;position:absolute;top:100%;left:0;
  background:var(--paper-2);border:var(--line);
  min-width:210px;box-shadow:var(--shadow-sm);
}
.dropdown:hover .dropdown-menu{display:block;}
.dropdown-menu a{padding:11px 16px;border-bottom:2px solid var(--ink);}
.dropdown-menu a:last-child{border-bottom:none;}
.nav-cta{
  background:var(--ink)!important;color:var(--yellow)!important;
  border:var(--line);font-weight:800!important;
}
.nav-cta:hover{background:var(--paper-2)!important;color:var(--ink)!important;}
.burger{display:none;background:var(--ink);color:var(--yellow);
  border:none;font-family:'Anton',sans-serif;font-size:1rem;
  padding:9px 15px;cursor:pointer;text-transform:uppercase;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;font-weight:800;text-decoration:none;
  font-size:1rem;padding:16px 30px;border:var(--line);
  text-transform:uppercase;letter-spacing:0.04em;
  box-shadow:var(--shadow-sm);transition:transform .08s,box-shadow .08s;
  cursor:pointer;
}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink);}
.btn-yellow{background:var(--yellow);color:var(--ink);}
.btn-ink{background:var(--ink);color:var(--yellow);}
.btn-white{background:var(--white);color:var(--ink);}
.btn:hover{transform:translate(-2px,-2px);box-shadow:11px 11px 0 var(--ink);}

/* ---------- MARQUEE ---------- */
.marquee{
  background:var(--ink);color:var(--yellow);
  border-top:var(--line);border-bottom:var(--line);
  overflow:hidden;padding:14px 0;white-space:nowrap;
}
.marquee-track{
  display:inline-block;animation:scroll 84s linear infinite;
  font-family:'Anton',sans-serif;font-size:1.35rem;
  text-transform:uppercase;letter-spacing:0.03em;
}
.marquee-track span{margin:0 26px;}
.marquee-track .star{color:var(--red);}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- HERO ---------- */
.hero{padding:90px 0 70px;position:relative;}
.hero .tag{
  display:inline-block;background:var(--ink);color:var(--yellow);
  font-weight:800;padding:7px 16px;text-transform:uppercase;
  letter-spacing:0.06em;font-size:0.85rem;margin-bottom:26px;
}
.hero h1{margin-bottom:24px;}
.hero h1 .hl{background:var(--yellow);padding:0 8px;}
.hero-sub{max-width:620px;font-size:1.3rem;font-weight:500;margin-bottom:32px;}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- CARDS / GRID ---------- */
.grid{display:grid;gap:24px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.card{
  background:var(--paper-2);border:var(--line);
  box-shadow:var(--shadow-sm);padding:30px;
}
.card.dark{background:var(--ink);color:var(--paper);}
.card.yellow{background:var(--yellow);}
.card .num{
  font-family:'Anton',sans-serif;font-size:2.2rem;
  display:block;line-height:1;margin-bottom:8px;
}
.card h3{font-size:1.35rem;margin-bottom:10px;font-weight:800;}
.card p{font-size:0.98rem;margin-bottom:0;}
.card .pin{
  display:inline-block;background:var(--ink);color:var(--yellow);
  font-weight:800;font-size:0.78rem;padding:4px 10px;
  text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px;
}
.card.dark .pin{background:var(--yellow);color:var(--ink);}

/* ---------- SECTION HEADINGS ---------- */
.sec-head{margin-bottom:48px;max-width:760px;}
.sec-head.center{margin-left:auto;margin-right:auto;}
.sec-head h2{margin:14px 0;}
.sec-head p{font-size:1.15rem;font-weight:500;margin-bottom:0;}

/* ---------- THE ENEMY LIST ---------- */
.enemy{list-style:none;display:grid;gap:14px;}
.enemy li{
  font-family:'Anton',sans-serif;font-size:clamp(1.4rem,3.3vw,2.4rem);
  text-transform:uppercase;
}
.enemy li::before{content:"✕ ";color:var(--red);}

/* ---------- PRICE TABLE ---------- */
.ptable{
  width:100%;border-collapse:separate;border-spacing:0;
  border:var(--line);box-shadow:var(--shadow-sm);background:var(--paper-2);
}
.ptable th,.ptable td{
  padding:16px 18px;text-align:left;border-bottom:2px solid var(--ink);
  font-size:0.98rem;
}
.ptable thead th{
  background:var(--ink);color:var(--yellow);
  font-family:'Anton',sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:0.03em;font-size:1.05rem;
}
.ptable tbody tr:last-child td{border-bottom:none;}
.ptable .name{font-weight:800;}
.ptable .price{
  font-family:'Anton',sans-serif;font-size:1.4rem;white-space:nowrap;
}
.ptable tbody tr:hover{background:var(--yellow);}

/* ---------- PRICE CARD ---------- */
.pricecard{
  border:var(--line);box-shadow:var(--shadow);background:var(--paper-2);
  padding:34px;display:flex;flex-direction:column;
}
.pricecard.feature{background:var(--yellow);}
.pricecard .ptag{
  font-family:'Anton',sans-serif;font-size:1.3rem;text-transform:uppercase;
}
.pricecard .big{
  font-family:'Anton',sans-serif;font-size:3.4rem;line-height:1;
  margin:10px 0 4px;
}
.pricecard .per{font-weight:700;font-size:0.95rem;margin-bottom:18px;}
.pricecard ul{list-style:none;margin-bottom:24px;display:grid;gap:9px;}
.pricecard ul li{padding-left:26px;position:relative;font-size:0.98rem;}
.pricecard ul li::before{
  content:"✓";position:absolute;left:0;font-weight:800;color:var(--ink);
}
.pricecard .btn{margin-top:auto;}

/* ---------- BANNER STRIP ---------- */
.strip{
  border:var(--line);box-shadow:var(--shadow);
  padding:46px;background:var(--yellow);
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
}
.strip h2{margin:0;flex:1;min-width:280px;}

/* ---------- TRUST ROW ---------- */
.trust{display:grid;gap:0;border:var(--line);box-shadow:var(--shadow-sm);}
.trust-item{
  padding:26px 30px;border-bottom:2px solid var(--ink);
  display:flex;gap:22px;align-items:flex-start;background:var(--paper-2);
}
.trust-item:last-child{border-bottom:none;}
.trust-item .tnum{
  font-family:'Anton',sans-serif;font-size:2rem;color:var(--red);
  line-height:1;flex-shrink:0;width:56px;
}
.trust-item h3{font-size:1.25rem;font-weight:800;margin-bottom:5px;}
.trust-item p{margin:0;font-size:1rem;}

/* ---------- FOUNDER ---------- */
.founder{
  border:var(--line);box-shadow:var(--shadow);background:var(--ink);
  color:var(--paper);padding:48px;
}
.founder .quote{
  font-family:'Anton',sans-serif;font-size:clamp(1.5rem,3vw,2.3rem);
  text-transform:uppercase;line-height:1.08;margin-bottom:20px;
}
.founder .sig{color:var(--yellow);font-weight:800;}

/* ---------- FAQ ---------- */
.faq-item{
  border:var(--line);background:var(--paper-2);margin-bottom:14px;
  box-shadow:var(--shadow-sm);
}
.faq-item summary{
  padding:20px 24px;font-weight:800;font-size:1.1rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-family:'Anton',sans-serif;
  font-size:1.6rem;line-height:1;}
.faq-item[open] summary::after{content:"–";}
.faq-item[open] summary{background:var(--yellow);}
.faq-item .faq-body{padding:4px 24px 22px;}
.faq-item .faq-body p{margin-bottom:0;}

/* ---------- FORM ---------- */
.formbox{
  border:var(--line);box-shadow:var(--shadow);background:var(--paper-2);
  padding:40px;
}
.field{margin-bottom:20px;}
.field label{display:block;font-weight:800;margin-bottom:7px;font-size:0.95rem;}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:var(--line);
  font-family:inherit;font-size:1rem;background:var(--white);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:3px solid var(--yellow-deep);
}
.field textarea{resize:vertical;min-height:120px;}

/* ---------- STEPS ---------- */
.steps{counter-reset:step;display:grid;gap:20px;}
.step{
  display:flex;gap:24px;align-items:flex-start;
  border:var(--line);background:var(--paper-2);padding:26px 30px;
  box-shadow:var(--shadow-sm);
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:'Anton',sans-serif;font-size:2.6rem;color:var(--yellow-deep);
  line-height:0.9;flex-shrink:0;
}
.step h3{font-size:1.2rem;font-weight:800;margin-bottom:5px;}
.step p{margin:0;font-size:1rem;}

/* ---------- FOOTER ---------- */
footer{
  background:var(--ink);color:var(--paper);
  border-top:var(--line);padding:64px 0 30px;
}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;
  margin-bottom:48px;}
footer .logo{color:var(--paper);margin-bottom:16px;}
footer .logo .dot{background:var(--yellow);color:var(--ink);}
.foot-col h4{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  color:var(--yellow);font-size:1.1rem;margin-bottom:14px;font-weight:400;
}
.foot-col a{display:block;text-decoration:none;color:var(--paper);
  padding:5px 0;font-weight:600;opacity:0.85;}
.foot-col a:hover{opacity:1;color:var(--yellow);}
.foot-bottom{
  border-top:2px solid var(--ink-soft);padding-top:24px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:0.88rem;opacity:0.7;
}

/* ---------- UTILITY ---------- */
.mt0{margin-top:0;}
.mb8{margin-bottom:8px;}
.mb24{margin-bottom:24px;}
.mb40{margin-bottom:40px;}
.note{font-size:0.9rem;opacity:0.75;font-weight:500;}
.hl-ink{background:var(--ink);color:var(--yellow);padding:0 7px;}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .g4{grid-template-columns:repeat(2,1fr);}
  .g3{grid-template-columns:1fr;}
  .split,.foot-grid{grid-template-columns:1fr;gap:32px;}
  .navlinks{
    display:none;position:absolute;top:74px;left:0;right:0;
    flex-direction:column;background:var(--yellow);
    border-bottom:var(--line);padding:10px 20px 18px;align-items:stretch;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:12px 8px;font-size:1.05rem;}
  .dropdown-menu{position:static;display:block;box-shadow:none;
    border:2px solid var(--ink);margin:4px 0;}
  .burger{display:block;}
}
@media(max-width:620px){
  section{padding:60px 0;}
  .g2,.g4{grid-template-columns:1fr;}
  .card,.pricecard,.formbox,.founder{padding:26px;}
  .ptable{display:block;overflow-x:auto;white-space:nowrap;}
  .strip{padding:30px;}
}

/* ============================================================
   BLOG — article pages + index
   ============================================================ */
.article-hero{
  background:var(--yellow);border-bottom:var(--line);
  padding:60px 0 52px;
}
.article-hero .eyebrow{margin-bottom:14px;display:block;}
.article-hero h1{
  font-family:'Anton',sans-serif;font-weight:400;
  text-transform:uppercase;line-height:1.0;
  font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:880px;
}
.article-hero .article-meta{margin-top:18px;font-weight:700;font-size:0.95rem;}
.backlink{display:inline-block;margin-bottom:18px;font-weight:800;
  text-transform:uppercase;font-size:0.82rem;letter-spacing:0.06em;
  text-decoration:none;}
.backlink:hover{text-decoration:underline;text-decoration-thickness:3px;}

.prose{max-width:720px;margin:0 auto;padding:60px 28px 20px;}
.prose p{font-size:1.13rem;line-height:1.7;margin-bottom:1.3rem;}
.prose h2{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:1.7rem;line-height:1.12;margin:2.5rem 0 1rem;
}
.prose h3{font-size:1.18rem;font-weight:800;margin:1.9rem 0 .7rem;}
.prose ul,.prose ol{margin:0 0 1.3rem 0;padding-left:0;list-style:none;}
.prose ul li,.prose ol li{
  font-size:1.13rem;line-height:1.62;margin-bottom:.75rem;
  padding-left:30px;position:relative;
}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:12px;height:12px;background:var(--yellow);
  border:2px solid var(--ink);
}
.prose ol{counter-reset:li;}
.prose ol li{counter-increment:li;}
.prose ol li::before{
  content:counter(li);position:absolute;left:0;top:.05em;
  font-family:'Anton',sans-serif;color:var(--ink);
  background:var(--yellow);border:2px solid var(--ink);
  width:24px;height:24px;display:flex;align-items:center;
  justify-content:center;font-size:.82rem;line-height:1;
}
.prose strong{font-weight:800;}
.prose em{font-style:italic;}
.prose a{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;}
.prose hr{border:none;border-top:3px solid var(--ink);margin:2.5rem 0;}

.article-wrap{max-width:720px;margin:0 auto;padding:0 28px 80px;}
.article-cta{
  border:var(--line);box-shadow:var(--shadow);background:var(--ink);
  color:var(--paper);padding:40px;text-align:center;
}
.article-cta h3{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:1.7rem;margin-bottom:10px;line-height:1.1;
}
.article-cta p{margin-bottom:22px;opacity:0.9;}

.blog-list{display:grid;gap:22px;max-width:840px;margin:0 auto;}
.blog-card{
  border:var(--line);box-shadow:var(--shadow-sm);background:var(--paper-2);
  padding:32px;text-decoration:none;display:block;
  transition:transform .08s,box-shadow .08s;
}
.blog-card:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 var(--ink);}
.blog-card .co{
  font-weight:800;font-size:0.76rem;text-transform:uppercase;
  letter-spacing:0.1em;
}
.blog-card h2{
  font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:1.55rem;line-height:1.08;margin:9px 0 11px;
}
.blog-card p{margin-bottom:13px;font-size:1.02rem;}
.blog-card .read{font-weight:800;text-transform:uppercase;font-size:0.88rem;
  letter-spacing:0.05em;}
.blog-card .read::after{content:" \2192";}