/*
Theme Name: Anjos Studio
Theme URI: https://anjos.studio
Author: Rafael Anjos
Description: Brutalist pop-art theme for Anjos.studio — websites and local SEO on subscription.
Version: 1.0
License: Proprietary
Text Domain: anjos-studio
*/
:root{
  --paper:#FFFDF4; --ink:#101010; --yellow:#FFD400; --brown:#7A4B22; --blue:#101010;
  --bd:3px solid var(--ink); --shadow:8px 8px 0 var(--ink); --shadow-sm:5px 5px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Share Tech Mono',monospace;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{background:var(--yellow)}
a{color:var(--ink)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--brown);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.eyebrow{display:inline-block;background:var(--ink);color:var(--paper);padding:4px 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
h1,h2,h3{line-height:1.05;text-transform:uppercase;font-weight:400}
h1{font-size:clamp(38px,7vw,84px);margin:18px 0 22px}
h2{font-size:clamp(28px,4.5vw,46px);margin-bottom:18px}
.misreg{text-shadow:3px 3px 0 var(--yellow),6px 6px 0 #DBD7C8}
.btn{display:inline-block;font-family:inherit;font-size:16px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;background:var(--yellow);color:var(--ink);border:var(--bd);padding:16px 26px;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn--blue{background:var(--blue);color:var(--paper)}
section{padding:84px 0;border-bottom:var(--bd)}
nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--bd)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:20px;text-decoration:none;letter-spacing:.02em}
.logo b{background:var(--yellow);padding:0 4px;font-weight:400}
.nav-links{display:flex;gap:22px;align-items:center;list-style:none}
.nav-links a{text-decoration:none;font-size:14px;text-transform:uppercase;letter-spacing:.08em}
.nav-links a:hover{background:var(--yellow)}
.nav-links a[aria-current="page"]{background:var(--ink);color:var(--paper);padding:2px 6px}
.nav-cta{border:var(--bd);background:var(--yellow);padding:8px 14px;box-shadow:3px 3px 0 var(--ink)}
.nav-cta:hover{background:var(--yellow)!important;transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.burger{display:none;background:none;border:var(--bd);padding:8px 12px;font-family:inherit;font-size:14px;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
@media(max-width:900px){
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--paper);border-bottom:var(--bd);flex-direction:column;gap:0;padding:0}
  .nav-links.open{display:flex}
  .nav-links li{width:100%;border-top:var(--bd)}
  .nav-links a{display:block;padding:16px 20px}
  .nav-links a[aria-current="page"]{padding:16px 20px}
  .nav-cta{box-shadow:none;border:none;background:var(--yellow)}
  .burger{display:block}
}
.hero{padding:90px 0 70px;border-bottom:var(--bd);position:relative;overflow:hidden}
.hero .sub{max-width:640px;font-size:18px;margin-bottom:34px}
.hero .sub b{background:var(--yellow);font-weight:400;padding:0 3px}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.hero-alt{font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.stamp{position:absolute;right:-10px;top:120px;transform:rotate(8deg);background:var(--yellow);color:#2445D8;border:var(--bd);box-shadow:var(--shadow-sm);padding:14px 18px;font-size:14px;text-transform:uppercase;letter-spacing:.1em}
@media(max-width:900px){.stamp{display:none}}
.ticker{border-bottom:var(--bd);background:var(--ink);color:var(--yellow);overflow:hidden;padding:12px 0;white-space:nowrap}
.ticker-track{display:inline-block;animation:tick 26s linear infinite;font-size:15px;letter-spacing:.12em;text-transform:uppercase}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}html{scroll-behavior:auto}}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.card{border:var(--bd);background:var(--paper);box-shadow:var(--shadow);padding:26px}
.card .tag{display:inline-block;background:var(--brown);color:var(--paper);padding:3px 9px;font-size:12px;letter-spacing:.12em;margin-bottom:14px;text-transform:uppercase}
.card h3{font-size:20px;margin-bottom:10px}
@media(max-width:820px){.cards{grid-template-columns:1fr}}
.model{background:var(--yellow)}
.model p{max-width:760px;font-size:19px}
.model p b{background:var(--ink);color:var(--yellow);font-weight:400;padding:0 4px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:38px}
.plan{border:var(--bd);box-shadow:var(--shadow);padding:30px;background:var(--paper);display:flex;flex-direction:column}
.plan--found{background:var(--ink);color:var(--paper)}
.plan--found a{color:var(--paper)}
.plan .name{font-size:24px;text-transform:uppercase}
.plan .promise{font-size:14px;margin:6px 0 18px;letter-spacing:.04em}
.plan--presence .promise{color:var(--brown)}
.plan--found .promise{color:var(--yellow)}
.price{font-size:clamp(38px,5vw,54px);line-height:1;margin-bottom:4px}
.price small{font-size:16px}
.plan ul{list-style:none;margin:20px 0 26px;flex:1}
.plan li{padding:9px 0;border-top:2px dashed currentColor;font-size:15px}
.plan li::before{content:"\25A0  ";color:var(--blue)}
.plan--found li::before{color:var(--yellow)}
.plans-note{margin-top:26px;font-size:15px;max-width:720px}
@media(max-width:820px){.plans{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.step{border:var(--bd);padding:24px;background:var(--paper);box-shadow:var(--shadow-sm)}
.step .num{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;background:var(--blue);color:var(--paper);border:var(--bd);font-size:20px;margin-bottom:14px}
.step h3{font-size:18px;margin-bottom:8px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.proof{background:var(--brown);color:var(--paper)}
.proof h2{color:var(--paper)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.stat{border:3px solid var(--paper);padding:24px;box-shadow:8px 8px 0 rgba(0,0,0,.35)}
.stat .big{font-size:clamp(26px,3.4vw,38px);line-height:1.1;color:var(--yellow)}
.stat p{font-size:14px;margin-top:10px}
@media(max-width:820px){.stats{grid-template-columns:1fr}}
.qa details{border:var(--bd);background:var(--paper);box-shadow:var(--shadow-sm);margin-top:18px}
.qa summary{cursor:pointer;padding:18px 22px;font-size:17px;text-transform:uppercase;letter-spacing:.02em;list-style:none;display:flex;justify-content:space-between;gap:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:22px}
.qa details[open] summary::after{content:"\2013"}
.qa details[open] summary{background:var(--yellow)}
.qa .a{padding:16px 22px 20px;border-top:var(--bd);font-size:15px}
.audit{background:var(--blue);color:var(--paper)}
.audit h2{color:var(--paper)}
.audit .lead{max-width:640px;margin-bottom:30px}
form{max-width:640px;display:grid;gap:18px}
label{font-size:13px;text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:6px}
input,textarea{width:100%;font-family:inherit;font-size:16px;padding:14px;border:var(--bd);background:var(--paper);color:var(--ink)}
.form-note{font-size:13px}
.form-note a{color:var(--yellow)}
footer{padding:40px 0;font-size:13px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px}
.svc{border:var(--bd);background:var(--paper);box-shadow:var(--shadow);padding:26px;display:flex;flex-direction:column}
.svc .svc-price{font-size:26px;margin:8px 0 14px;color:var(--blue)}
.svc p{flex:1;font-size:15px}
.svc a{margin-top:18px}
@media(max-width:820px){.svc-grid{grid-template-columns:1fr}}
.svc-detail{max-width:780px}
.svc-detail p{margin-bottom:16px}
.svc-detail ul{list-style:none;margin:0 0 24px}
.svc-detail li{padding:9px 0;border-top:2px dashed var(--ink);font-size:15px}
.svc-detail li::before{content:"\25A0  ";color:var(--blue)}
.pricebox{border:var(--bd);background:var(--yellow);box-shadow:var(--shadow);padding:26px;margin:28px 0;max-width:520px}
.pricebox .price{margin-bottom:8px}
.pricebox .small{font-size:13px}
.notefor{border:var(--bd);padding:20px;background:var(--paper);box-shadow:var(--shadow-sm);margin-top:26px;max-width:780px;font-size:15px}
/* blog */
.blog-cats{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 8px}
.blog-cats span{border:var(--bd);padding:6px 12px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;background:var(--paper);box-shadow:3px 3px 0 var(--ink)}
.posts{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.post{border:var(--bd);background:var(--paper);box-shadow:var(--shadow-sm);padding:24px;text-decoration:none;display:block}
.post:hover{background:var(--yellow)}
.post .pc{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--brown)}
.post h3{font-size:20px;margin:8px 0 10px}
.post p{font-size:14px}
.post .rm{display:inline-block;margin-top:14px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:var(--paper);padding:3px 8px}
@media(max-width:820px){.posts{grid-template-columns:1fr}}
.cta-strip{background:var(--yellow);text-align:left}
/* WP additions */
.single-post .svc-detail h1{font-size:clamp(30px,5vw,54px)}
.single-post .svc-detail p+p{margin-top:0}
.entry-content p{margin-bottom:16px}
.entry-content h2{margin-top:34px}
.entry-content ul,.entry-content ol{margin:0 0 20px 22px}
.entry-content a{background:var(--yellow)}
.postmeta{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--brown);margin-bottom:22px}
/* Work / portfolio */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:38px}
.case{border:var(--bd);background:var(--paper);box-shadow:var(--shadow);padding:26px;display:flex;flex-direction:column}
.case .sector{display:inline-block;align-self:flex-start;background:var(--brown);color:var(--paper);padding:3px 9px;font-size:12px;letter-spacing:.12em;margin-bottom:14px;text-transform:uppercase}
.case h3{font-size:22px;margin-bottom:12px}
.case .cs{font-size:15px;flex:1}
.case .cs b{background:var(--yellow);font-weight:400;padding:0 3px}
.case .visit{margin-top:18px;align-self:flex-start}
.case--wip{background:var(--yellow)}
.case--wip .sector{background:var(--ink)}
@media(max-width:820px){.work-grid{grid-template-columns:1fr}}

/* WPForms in the audit section */
.audit .wpforms-container{max-width:640px}
.audit .wpforms-field-label{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--paper)!important}
.audit .wpforms-form input[type=text],.audit .wpforms-form input[type=email],.audit .wpforms-form input[type=url],.audit .wpforms-form input[type=tel],.audit .wpforms-form textarea{width:100%;font-family:'Share Tech Mono',monospace;font-size:16px;padding:14px;border:3px solid var(--ink)!important;border-radius:0!important;background:var(--paper);color:var(--ink)}
.audit .wpforms-form button[type=submit]{font-family:'Share Tech Mono',monospace!important;font-size:16px;text-transform:uppercase;letter-spacing:.06em;background:var(--yellow)!important;color:var(--ink)!important;border:3px solid var(--ink)!important;border-radius:0!important;padding:16px 26px!important;box-shadow:5px 5px 0 var(--ink)}
.audit .wpforms-form button[type=submit]:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}

/* v2.3 semantic helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
h2.eyebrow{font-size:12px;line-height:1.5;display:inline-block;margin-bottom:0}
h3.name{font-size:24px;line-height:1.1}

/* v2.4 footer */
footer{padding:56px 0 32px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px;border-bottom:2px dashed var(--ink)}
.foot-brand p{margin-top:12px;max-width:280px}
.foot-col h2{font-size:12px;text-transform:uppercase;letter-spacing:.14em;background:var(--ink);color:var(--paper);display:inline-block;padding:4px 10px;margin-bottom:14px}
.foot-col ul{list-style:none}
.foot-col li{padding:5px 0}
.foot-col a{text-decoration:none}
.foot-col a:hover{background:var(--yellow)}
.foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:13px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* v2.7 — socials */
.socials{display:flex;gap:10px;margin-top:16px}
.soc{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border:var(--bd);background:var(--paper);text-decoration:none;font-size:14px;letter-spacing:.05em;box-shadow:4px 4px 0 var(--ink)}
.soc:hover{background:var(--yellow)}

/* v2.7 — animations (fully disabled for reduced-motion users) */
@media (prefers-reduced-motion: no-preference){
  /* scroll-reveal: choppy stamp-in */
  .anim .rv{opacity:0}
  .anim .rv.inview{animation:stampin .55s steps(3) var(--d,0s) both}
  .anim .rv.done{animation:none;opacity:1}
  @keyframes stampin{
    0%{opacity:0;transform:translate(-16px,22px) rotate(-1.5deg)}
    55%{opacity:1;transform:translate(4px,-4px) rotate(.8deg)}
    100%{opacity:1;transform:none}
  }
  /* headings: misprint settle — shadows slam around then lock into place */
  .anim h1.misreg.rv.inview,.anim h2.misreg.rv.inview{animation:misprint .8s steps(4) both}
  @keyframes misprint{
    0%{opacity:0;text-shadow:none;transform:translateX(-12px)}
    30%{opacity:1;text-shadow:-7px 5px 0 var(--yellow),9px -4px 0 #DBD7C8}
    60%{text-shadow:6px -5px 0 var(--yellow),-7px 6px 0 #DBD7C8}
    100%{opacity:1;text-shadow:3px 3px 0 var(--yellow),6px 6px 0 #DBD7C8;transform:none}
  }
  /* hero stamp: lazy wobble, forever */
  .stamp{animation:wobble 5s steps(2) infinite}
  @keyframes wobble{0%,100%{transform:rotate(8deg)}50%{transform:rotate(5deg) translateY(5px)}}
  /* cards: reverse-pop on hover — lifts INTO the shadow */
  .card,.case,.svc,.step,.post{transition:transform .12s steps(2),box-shadow .12s steps(2)}
  .card:hover,.case:hover,.svc:hover,.step:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--ink)}
  /* buttons: nervous jitter on hover, then the existing press physics */
  .btn:hover{animation:jitter .22s steps(2) 1}
  @keyframes jitter{50%{transform:translate(3px,1px) rotate(-.7deg)}}
  /* social tiles: twist-press */
  .soc{transition:transform .1s steps(2),box-shadow .1s steps(2),background .1s steps(2)}
  .soc:hover{transform:translate(2px,2px) rotate(-5deg);box-shadow:1px 1px 0 var(--ink)}
  /* eyebrow labels: type-on wipe when revealed with a heading */
  .anim .rv.inview .eyebrow, .anim h2.eyebrow.rv.inview{animation:wipe .4s steps(6) both}
  @keyframes wipe{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
  /* prices: one hard pulse when their box lands */
  .anim .pricebox.rv.inview .price,.anim .plan.rv.inview .price{animation:pulse .5s steps(2) .35s 1}
  @keyframes pulse{50%{transform:scale(1.06) rotate(-.5deg)}}
}