/* =================================================================
   Josh De Vera — Shopify VA & Consultant
   Homepage stylesheet. Brutalist system, promoted from Design Lab
   study 03-brutalist-type.

   The blog still runs on the previous emerald system in
   style-emerald.css — don't delete it.
   ================================================================= */

:root{
  --paper:      #F2F0EB;
  --paper-2:    #E8E5DE;
  --ink:        #0A0A0A;
  --ink-60:     #55534E;
  --ink-40:     #86837C;
  --acid:       #E6FF2E;
  --hot:        #FF4D2E;
  --blue:       #2E4BFF;
  --green:      #1F9D55;

  --sans: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;

  --maxw: 1300px;
  --bd: 3px;
  --ease: cubic-bezier(.2,.8,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit }
img{ max-width:100%; display:block }
h1,h2,h3{ font-weight:900; letter-spacing:-.045em; line-height:.92; text-transform:uppercase }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(14px,3vw,26px) }
.mono{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase }

/* skip link — the nav is sticky, keyboard users need a way past it */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 18px;
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em;
}
.skip:focus{ left:0 }

/* =================================================================
   TICKER
   ================================================================= */
.ticker{
  background:var(--ink); color:var(--acid);
  border-bottom:var(--bd) solid var(--ink);
  overflow:hidden; white-space:nowrap; padding:9px 0;
}
.ticker__track{
  display:inline-block;
  animation:roll 30s linear infinite;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.ticker__track span{ padding:0 22px }
@keyframes roll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none } }

/* =================================================================
   NAV
   ================================================================= */
.nav{ position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:var(--bd) solid var(--ink) }
.nav__inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(14px,3vw,26px);
  display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:64px; position:relative }
.brand{ font-weight:900; font-size:16px; letter-spacing:-.04em; text-transform:uppercase; text-decoration:none; line-height:1 }
.brand small{ display:block; font-family:var(--mono); font-size:9.5px; font-weight:400;
  letter-spacing:.12em; color:var(--ink-60); margin-top:3px }
.nav__links{ display:flex; gap:0 }
.nav__links a{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none; padding:8px 13px; border:2px solid transparent; transition:.15s;
}
.nav__links a:hover,
.nav__links a:focus-visible{ background:var(--acid); border-color:var(--ink); outline:none }
.nav__links a.is-lab{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.nav__links a.is-lab:hover{ background:var(--hot); color:#fff }

/* mobile menu — five links needs one, the old site had none */
.nav__toggle{
  display:none; background:var(--paper); border:var(--bd) solid var(--ink);
  width:44px; height:40px; cursor:pointer; padding:0; position:relative;
}
.nav__toggle span{ position:absolute; left:9px; right:9px; height:3px; background:var(--ink); transition:.25s var(--ease) }
.nav__toggle span:nth-child(1){ top:11px }
.nav__toggle span:nth-child(2){ top:18px }
.nav__toggle span:nth-child(3){ top:25px }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* =================================================================
   BUTTONS
   ================================================================= */
.btn{
  display:inline-block; padding:13px 24px; background:var(--ink); color:var(--paper);
  text-decoration:none; font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:700; border:var(--bd) solid var(--ink);
  box-shadow:5px 5px 0 var(--acid); transition:.15s; cursor:pointer;
}
.btn:hover,.btn:focus-visible{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--acid); outline:none }
.btn--acid{ background:var(--acid); color:var(--ink); box-shadow:5px 5px 0 var(--ink) }
.btn--acid:hover{ box-shadow:2px 2px 0 var(--ink) }
.btn--hot{ background:var(--hot); color:#fff; box-shadow:5px 5px 0 var(--ink) }
.btn--hot:hover{ box-shadow:2px 2px 0 var(--ink) }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:5px 5px 0 var(--ink) }
.btn--ghost:hover{ box-shadow:2px 2px 0 var(--ink) }
.btn--block{ display:block; width:100%; text-align:center }

/* =================================================================
   HERO
   ================================================================= */
.hero{ border-bottom:var(--bd) solid var(--ink); padding:clamp(28px,5vw,60px) 0 0 }
.hero__tags{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:24px }
.hero__tags span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  border:2px solid var(--ink); padding:5px 11px; background:#fff;
}
.hero__tags span.is-live{ background:var(--acid) }
.hero h1{ font-size:clamp(42px,11.5vw,158px); letter-spacing:-.055em }
.hero h1 .box{ background:var(--ink); color:var(--acid); padding:0 .08em; display:inline-block }
.hero h1 .out{ -webkit-text-stroke:2px var(--ink); color:transparent }
.hero__grid{ display:grid; grid-template-columns:1fr; margin-top:clamp(28px,4vw,44px); border-top:var(--bd) solid var(--ink) }
.hero__lead{ padding:28px 0 }
.hero__lead p{ font-size:clamp(16px,1.9vw,20px); max-width:54ch; line-height:1.5 }
.hero__lead p b{ font-weight:700 }
.hero__actions{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap }
.hero__note{ margin-top:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--ink-60) }
.hero__facts{ padding:28px 0 }
.factrow{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:2px solid var(--ink) }
.factrow:last-child{ border-bottom:0 }
.factrow b{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:400; color:var(--ink-60) }
.factrow span{ font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:-.02em }
@media(min-width:900px){
  .hero__grid{ grid-template-columns:1.4fr 1fr }
  .hero__lead{ padding-right:34px; border-right:var(--bd) solid var(--ink) }
  .hero__facts{ padding-left:34px }
}

/* =================================================================
   SECTIONS
   ================================================================= */
.section{ border-bottom:var(--bd) solid var(--ink); padding:clamp(44px,7vw,80px) 0 }
.section-head{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:38px }
.section-num{ font-family:var(--mono); font-size:12px; background:var(--ink); color:var(--acid); padding:4px 9px }
.section-title{ font-size:clamp(30px,6.4vw,72px) }
.section-lead{ width:100%; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-60); max-width:52ch }

/* =================================================================
   WORK — case studies lead the page
   ================================================================= */
.case{
  border:var(--bd) solid var(--ink); background:#fff; margin-bottom:22px;
  display:grid; grid-template-columns:1fr;
}
.case__media{ min-height:250px; border-bottom:var(--bd) solid var(--ink); position:relative; overflow:hidden; display:grid; place-items:center }
.case--taste .case__media{ background:var(--hot) }
.case--adahlia .case__media{ background:var(--blue) }
.case__media .stripes{ position:absolute; inset:0;
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.09) 0 12px,transparent 12px 24px); pointer-events:none }
.case__mark{ font-size:clamp(46px,8vw,110px); font-weight:900; color:var(--paper);
  letter-spacing:-.07em; line-height:.82; text-align:center; text-transform:uppercase; padding:0 18px }
.case__body{ padding:clamp(22px,3vw,32px) }
.case__kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--acid); border:2px solid var(--ink); padding:4px 9px; display:inline-block;
}
.case__body h3{ font-size:clamp(26px,3.6vw,42px); margin:16px 0 6px }
.case__role{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-60); margin-bottom:20px }
@media(min-width:880px){
  .case{ grid-template-columns:.85fr 1.15fr }
  .case__media{ border-bottom:0; border-right:var(--bd) solid var(--ink) }
}

/* problem / approach / outcome */
.paq{ display:flex; flex-direction:column; gap:18px }
.paq__blk{ border-left:4px solid var(--ink); padding-left:15px }
.paq__blk--p{ border-left-color:var(--hot) }
.paq__blk--a{ border-left-color:var(--blue) }
.paq__blk--o{ border-left-color:var(--green) }
.paq__k{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px; font-weight:700 }
.paq__blk--p .paq__k{ color:var(--hot) }
.paq__blk--a .paq__k{ color:var(--blue) }
.paq__blk--o .paq__k{ color:var(--green) }
.paq p{ font-size:15px; max-width:52ch; line-height:1.55 }
.paq__list{ list-style:none; margin-top:9px }
.paq__list li{ position:relative; padding:4px 0 4px 18px; font-size:14.5px; max-width:52ch; line-height:1.5 }
.paq__list li::before{ content:'▪'; position:absolute; left:0; color:var(--blue); font-size:11px; top:6px }
.case__tags{ margin-top:22px; display:flex; flex-wrap:wrap; gap:8px }
.case__tags span{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; border:2px solid var(--ink); padding:4px 9px }
.case__cta{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.ulink{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border-bottom:2px solid var(--ink); padding-bottom:2px }
.ulink:hover{ color:var(--hot); border-color:var(--hot) }

/* client quote, styled ahead of a real one existing */
.case__quote{ margin-top:22px; border:var(--bd) solid var(--ink); background:var(--acid); padding:18px 20px }
.case__quote p{ font-size:16px; font-weight:600; max-width:48ch; line-height:1.4 }
.case__quote cite{ display:block; margin-top:10px; font-style:normal; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase }

/* =================================================================
   SERVICES
   ================================================================= */
.svc-grid{ display:grid; grid-template-columns:1fr; border:var(--bd) solid var(--ink); background:#fff }
.svc{ padding:26px; border-bottom:var(--bd) solid var(--ink); transition:background .18s }
.svc:hover{ background:var(--acid) }
.svc__num{ font-family:var(--mono); font-size:11px; display:block; margin-bottom:16px }
.svc h3{ font-size:22px; margin-bottom:11px; line-height:1 }
.svc p{ font-size:14.5px; line-height:1.5 }
.svc ul{ margin-top:14px; list-style:none; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em }
.svc ul li{ padding:4px 0; border-top:1px solid rgba(10,10,10,.18) }
.svc .ulink{ margin-top:14px; display:inline-block }
@media(min-width:760px){
  .svc-grid{ grid-template-columns:1fr 1fr }
  .svc{ border-right:var(--bd) solid var(--ink) }
  .svc:nth-child(2n){ border-right:0 }
}
@media(min-width:1080px){
  .svc-grid{ grid-template-columns:repeat(3,1fr) }
  .svc:nth-child(2n){ border-right:var(--bd) solid var(--ink) }
  .svc:nth-child(3n){ border-right:0 }
}

/* =================================================================
   WRITING
   ================================================================= */
.posts{ border-top:var(--bd) solid var(--ink) }
.post{
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center;
  padding:24px 6px; border-bottom:var(--bd) solid var(--ink); text-decoration:none;
  transition:padding-left .3s var(--ease), background .3s var(--ease);
}
.post:hover{ padding-left:18px; background:var(--acid) }
.post__date{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-60); white-space:nowrap }
.post__title{ font-weight:700; font-size:clamp(16px,2.1vw,21px); letter-spacing:-.02em; text-transform:uppercase }
.post__arrow{ font-size:18px }

/* =================================================================
   ABOUT
   ================================================================= */
.about__grid{ display:grid; grid-template-columns:1fr; border:var(--bd) solid var(--ink); background:#fff }
.about__side{ background:var(--ink); color:var(--paper); padding:32px; display:flex; flex-direction:column; justify-content:space-between; gap:28px }
.about__mark{ font-size:clamp(70px,11vw,130px); font-weight:900; letter-spacing:-.08em; line-height:.78; color:var(--acid) }
.about__side .mono{ opacity:.66 }
.about__meta{ border-top:2px solid rgba(242,240,235,.28); padding-top:9px; margin-top:9px }
.about__body{ padding:32px }
.about__body h2{ font-size:clamp(26px,4vw,42px); margin-bottom:20px }
.about__body p{ font-size:15.5px; margin-bottom:15px; max-width:58ch; line-height:1.55 }
.about__body p strong{ font-weight:700 }
.stack{ margin-top:24px; display:flex; flex-wrap:wrap; gap:7px }
.stack span{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  border:2px solid var(--ink); padding:5px 9px; background:var(--paper) }
@media(min-width:900px){ .about__grid{ grid-template-columns:1fr 1.25fr } }

/* =================================================================
   FAQ — native details/summary, mirrors the FAQPage JSON-LD
   ================================================================= */
.faq__list{ border-top:var(--bd) solid var(--ink) }
.faq__item{ border-bottom:var(--bd) solid var(--ink); background:#fff }
.faq__item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:20px;
  padding:22px 18px; transition:background .2s var(--ease), padding-left .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary:hover{ background:var(--acid); padding-left:26px }
.faq__item summary:focus-visible{ outline:3px solid var(--blue); outline-offset:-3px }
.faq__q{ flex:1; font-weight:800; font-size:clamp(15px,2vw,20px); text-transform:uppercase; letter-spacing:-.02em; line-height:1.2 }
.faq__mark{ position:relative; flex:0 0 auto; width:18px; height:18px }
.faq__mark::before,.faq__mark::after{ content:''; position:absolute; background:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease) }
.faq__mark::before{ left:0; top:8px; width:18px; height:3px }
.faq__mark::after{ top:0; left:7.5px; width:3px; height:18px }
.faq__item[open] .faq__mark::after{ transform:scaleY(0); opacity:0 }
.faq__a{ padding:0 18px 24px; max-width:70ch }
.faq__a p{ font-size:15px; line-height:1.6 }
@media (prefers-reduced-motion: reduce){
  .faq__item summary,.faq__mark::before,.faq__mark::after{ transition:none }
}

/* =================================================================
   CONTACT
   ================================================================= */
.contact{ background:var(--ink); color:var(--paper); border-bottom:var(--bd) solid var(--ink) }
.contact .section-num{ background:var(--acid); color:var(--ink) }
.contact .section-title{ color:var(--acid) }
.contact .section-lead{ color:rgba(242,240,235,.6) }
.contact__grid{ display:grid; grid-template-columns:1fr; gap:26px }
@media(min-width:900px){ .contact__grid{ grid-template-columns:1fr 1fr; gap:34px } }
.callcard{ border:var(--bd) solid var(--acid); background:rgba(230,255,46,.07); padding:26px }
.callcard__tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--acid) }
.callcard h3{ font-size:clamp(22px,3vw,30px); margin:14px 0 10px }
.callcard p{ font-size:14.5px; color:rgba(242,240,235,.72); margin-bottom:20px; line-height:1.5 }
.contact__links{ margin-top:22px; display:flex; flex-direction:column; gap:0; border-top:2px solid rgba(242,240,235,.24) }
.clink{
  display:flex; justify-content:space-between; gap:14px; padding:14px 0;
  border-bottom:2px solid rgba(242,240,235,.24); text-decoration:none;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; transition:padding-left .3s var(--ease);
}
.clink:hover{ padding-left:10px; color:var(--acid) }
.clink span:first-child{ text-transform:uppercase; color:rgba(242,240,235,.55) }

/* form */
.form{ border:var(--bd) solid var(--paper); background:rgba(242,240,235,.05); padding:26px }
.field{ margin-bottom:16px }
.field label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:7px; color:rgba(242,240,235,.72) }
.field input,.field textarea{
  width:100%; background:var(--paper); color:var(--ink); border:var(--bd) solid var(--paper);
  padding:12px 14px; font-family:var(--sans); font-size:15px;
}
.field textarea{ min-height:130px; resize:vertical }
.field input:focus,.field textarea:focus{ outline:3px solid var(--acid); outline-offset:2px }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0 }
.form-status{ margin-top:14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; min-height:1.2em }
.form-status.is-ok{ color:var(--acid) }
.form-status.is-err{ color:#FF8A72 }

/* =================================================================
   FOOTER
   ================================================================= */
.footer{ padding:30px 0 }
.footer__top{ display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; align-items:flex-end; padding-bottom:22px; border-bottom:var(--bd) solid var(--ink) }
.footer__big{ font-size:clamp(20px,3.4vw,36px); font-weight:900; text-transform:uppercase; letter-spacing:-.04em; max-width:22ch; line-height:.98 }
.footer__links{ display:flex; gap:0; flex-wrap:wrap }
.footer__links a{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  text-decoration:none; padding:7px 12px; border:2px solid var(--ink); margin:0 -2px -2px 0; transition:.15s;
}
.footer__links a:hover{ background:var(--acid) }
.footer__bottom{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:18px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-60) }

/* =================================================================
   REVEAL — progressive enhancement.
   Default state is VISIBLE. The inline script in <head> adds .js to
   <html>, which is the only thing that hides these; that same script
   removes .js again if script.js never runs. So a JS failure of any
   kind leaves the page fully readable rather than blank.
   ================================================================= */
.reveal{ opacity:1; transform:none }
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease) }
.js .reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none }
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media(max-width:860px){
  .nav__toggle{ display:block }
  .nav__links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:var(--bd) solid var(--ink);
    max-height:0; overflow:hidden; transition:max-height .3s var(--ease);
  }
  .nav__links.is-open{ max-height:420px }
  .nav__links a{ border:0; border-top:2px solid var(--ink); padding:14px 18px; font-size:12px }
  .nav__cta .btn{ display:none }
}
@media(max-width:520px){
  .btn{ padding:12px 18px; font-size:10.5px; box-shadow:4px 4px 0 var(--acid) }
  .btn--acid,.btn--hot,.btn--ghost{ box-shadow:4px 4px 0 var(--ink) }
  .post{ grid-template-columns:1fr auto; gap:12px }
  .post__date{ grid-column:1 / -1 }
}