/* ============================================================
   SUKHMANI BAINS . Direction B "The Statement"
   Self-hosted fonts, no trackers, WCAG AA, reduced-motion safe
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{
  font-family:'Archivo Var';
  src:url('/assets/fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Plex Mono';
  src:url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Plex Mono';
  src:url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --bg:#FAFAF6;
  --ink:#0B0B09;
  --grey:#575750;        /* AA on --bg for normal text */
  --grey-strong:#3F3F39;
  --acid:#D8F34C;
  --cobalt:#2430E8;
  --line:#0B0B09;
  --line-soft:#0b0b0922;
  --sans:'Archivo Var',Archivo,system-ui,-apple-system,sans-serif;
  --mono:'Plex Mono','JetBrains Mono',ui-monospace,monospace;
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--acid)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.skip{position:absolute;left:-9999px;top:0;background:var(--acid);color:var(--ink);padding:10px 16px;font-family:var(--mono);z-index:99}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;background:var(--bg);border-bottom:2px solid var(--line);z-index:20}
.nav-in{display:flex;justify-content:space-between;align-items:center;padding:14px clamp(18px,4vw,44px);max-width:1240px;margin:0 auto;gap:12px}
.wordmark{font-weight:900;font-stretch:125%;font-size:17px;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;gap:2px;flex-wrap:wrap}
.nav-links a{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;padding:8px 13px;border:2px solid transparent}
.nav-links a:hover{border-color:var(--line);background:var(--acid)}
.nav-links a[aria-current="page"]{border-color:var(--line)}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.06em;padding:15px 25px;border:2px solid var(--line);background:var(--bg);color:var(--ink);transition:transform .15s ease,box-shadow .15s ease;cursor:pointer}
.btn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--line)}
.btn-solid{background:var(--ink);color:var(--bg)}
.btn-acid{background:var(--acid)}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,9vh,110px) 0 0;border-bottom:2px solid var(--line)}
.h-display{font-weight:900;font-stretch:120%;text-transform:uppercase;letter-spacing:-.022em;line-height:.92;font-size:clamp(48px,9vw,140px)}
.h-display .hollow{color:transparent;-webkit-text-stroke:2.5px var(--ink)}
.h-display .hl{background:var(--acid);padding:0 .08em}
.hero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end;padding:34px 0 56px}
.hero-grid p{font-size:clamp(17px,1.6vw,20px);color:var(--grey);max-width:44ch}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- page headers (subpages) ---------- */
.page-head{padding:clamp(44px,8vh,88px) 0 40px;border-bottom:2px solid var(--line)}
.page-head h1{font-weight:900;font-stretch:120%;text-transform:uppercase;letter-spacing:-.02em;line-height:.95;font-size:clamp(36px,6.4vw,88px)}
.page-head h1 .hl{background:var(--acid);padding:0 .08em}
.page-head .lede{margin-top:22px;color:var(--grey);max-width:58ch;font-size:clamp(16px,1.5vw,19px)}

/* ---------- stats with sparklines ---------- */
.stats{border-bottom:2px solid var(--line)}
.stat-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:clamp(14px,3vw,28px);padding:20px clamp(18px,4vw,44px);border-bottom:1px solid var(--line-soft);max-width:1240px;margin:0 auto}
.stat-row:last-child{border-bottom:0}
.stat-row b{font-weight:900;font-stretch:118%;font-size:clamp(38px,5.6vw,80px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat-row b em{font-style:normal;color:var(--cobalt)}
.stat-row .spark{justify-self:end}
.stat-row .spark polyline{stroke-dasharray:130;stroke-dashoffset:0}
.stat-row span{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);text-align:right;max-width:22ch}

/* ---------- sections ---------- */
.section{padding:clamp(60px,9vh,104px) 0 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:26px;gap:16px;flex-wrap:wrap}
.h-sec{font-weight:900;font-stretch:120%;text-transform:uppercase;font-size:clamp(28px,4.2vw,52px);letter-spacing:-.015em}
.sec-head a{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em;border-bottom:2px solid var(--acid)}
.sec-head a:hover{background:var(--acid)}

/* ---------- case index rows ---------- */
.case{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,40px);align-items:center;border:2px solid var(--line);margin-bottom:-2px;padding:clamp(20px,3vw,32px) clamp(18px,3vw,30px);background:var(--bg);transition:background .15s}
.case:hover{background:var(--acid)}
.case .no{font-family:var(--mono);font-size:13px}
.case h3{font-weight:900;font-stretch:115%;text-transform:uppercase;font-size:clamp(20px,2.9vw,32px);letter-spacing:-.012em}
.case p{color:var(--grey);font-size:15px;max-width:60ch;margin-top:8px}
.case:hover p{color:var(--ink)}
.case .out{text-align:right}
.case .out b{display:block;font-weight:900;font-stretch:118%;font-size:clamp(24px,3.2vw,38px);line-height:1;font-variant-numeric:tabular-nums}
.case .out span{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--grey)}
.case:hover .out span{color:var(--ink)}
.case .tags{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.case:hover .tags{color:var(--ink)}

/* ---------- marquee ---------- */
.marquee{border-top:2px solid var(--line);border-bottom:2px solid var(--line);overflow:hidden;background:var(--ink);color:var(--bg);margin-top:clamp(60px,9vh,104px)}
.marquee-in{display:flex;white-space:nowrap;animation:mq 28s linear infinite;padding:13px 0;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.marquee-in span{padding:0 26px}
.marquee-in span::after{content:"\2731";color:var(--acid);margin-left:52px}
.marquee:hover .marquee-in{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{border:2px solid var(--line);padding:26px 24px 32px;background:var(--bg);transition:transform .15s,box-shadow .15s}
.svc:hover{transform:translate(-4px,-4px);box-shadow:7px 7px 0 var(--line)}
.svc .no{font-family:var(--mono);font-size:12px;background:var(--acid);display:inline-block;padding:3px 8px;border:1.5px solid var(--line)}
.svc h3{font-weight:900;font-stretch:115%;text-transform:uppercase;font-size:20px;margin:16px 0 10px;letter-spacing:-.01em}
.svc p{font-size:14.5px;color:var(--grey)}

/* ---------- post rows ---------- */
.post{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:22px 4px;border-bottom:2px solid var(--line)}
.post:first-of-type{border-top:2px solid var(--line)}
.post h3{font-weight:800;font-stretch:112%;font-size:clamp(19px,2.3vw,27px);letter-spacing:-.01em}
.post:hover h3{background:var(--acid)}
.post .meta{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--grey);white-space:nowrap}

/* ---------- prose (essays + case studies) ---------- */
.prose{max-width:72ch;margin:0 auto;padding:clamp(40px,7vh,72px) 0 20px}
.prose p{margin:0 0 1.35em;color:var(--grey-strong);font-size:clamp(16.5px,1.35vw,18.5px);line-height:1.75}
.prose p.lead{font-size:clamp(18px,1.6vw,21px);color:var(--ink);font-weight:500}
.prose h2{font-weight:900;font-stretch:116%;text-transform:uppercase;letter-spacing:-.012em;font-size:clamp(22px,2.6vw,30px);margin:1.9em 0 .7em}
.prose h3{font-weight:800;font-stretch:112%;font-size:clamp(18px,2vw,22px);margin:1.6em 0 .6em}
.prose ul,.prose ol{margin:0 0 1.35em 1.2em;color:var(--grey-strong)}
.prose li{margin-bottom:.55em;line-height:1.7}
.prose strong{color:var(--ink)}
.prose blockquote{border-left:6px solid var(--acid);padding:.4em 0 .4em 1.1em;margin:0 0 1.35em;font-weight:600;color:var(--ink)}
.prose code{font-family:var(--mono);font-size:.86em;background:#0b0b0910;padding:.15em .4em}
.prose pre{background:var(--ink);color:var(--bg);padding:18px 20px;overflow-x:auto;margin:0 0 1.5em;border:2px solid var(--line)}
.prose pre code{background:none;color:inherit;padding:0;font-size:13.5px;line-height:1.6}
.prose hr{border:0;border-top:2px solid var(--line);margin:2.2em 0}

/* article header */
.art-head{padding:clamp(44px,8vh,80px) 0 0}
.art-head .kicker a{border-bottom:2px solid var(--acid)}
.art-head h1{font-weight:900;font-stretch:118%;text-transform:uppercase;letter-spacing:-.018em;line-height:.96;font-size:clamp(32px,5.6vw,72px);margin-top:18px;max-width:22ch}
.art-head .byline{margin-top:20px;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--grey);display:flex;gap:22px;flex-wrap:wrap;padding-bottom:34px;border-bottom:2px solid var(--line)}

/* case study fact box */
.factbox{border:2px solid var(--line);margin:2em 0;display:grid;grid-template-columns:repeat(3,1fr)}
.factbox>div{padding:18px 18px 16px;border-right:1px solid var(--line-soft)}
.factbox>div:last-child{border-right:0}
.factbox b{display:block;font-weight:900;font-stretch:118%;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.factbox b i{font-style:normal;color:var(--cobalt)}
.factbox span{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);display:block;margin-top:6px}

/* ---------- tables (career, schema) ---------- */
.tbl{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px}
.tbl th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;text-align:left;border-bottom:2px solid var(--line);padding:10px 12px 8px}
.tbl td{border-bottom:1px solid var(--line-soft);padding:12px;vertical-align:top;color:var(--grey-strong)}
.tbl td:first-child{color:var(--ink);font-weight:600}

/* ---------- contact block ---------- */
.contact-blk{background:var(--ink);color:var(--bg);margin-top:clamp(60px,9vh,104px);padding:clamp(60px,10vh,110px) 0 52px}
.contact-blk .h-sec,.contact-blk h2{font-size:clamp(38px,7vw,96px);line-height:.95;font-weight:900;font-stretch:120%;text-transform:uppercase;letter-spacing:-.02em}
.contact-blk h2 em,.contact-blk .h-sec em{font-style:normal;color:var(--acid)}
.contact-blk .email{display:inline-block;margin-top:32px;font-family:var(--mono);font-size:clamp(15px,2vw,22px);border:2px solid var(--bg);padding:14px 22px;color:var(--bg);transition:background .15s,color .15s,border-color .15s}
.contact-blk .email:hover{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:60px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#FAFAF699}
.foot a:hover{color:var(--acid)}
.foot .cols{display:flex;gap:22px;flex-wrap:wrap}

/* ---------- demo UI ---------- */
.demo-panel{border:2px solid var(--line);padding:24px;margin-top:30px;background:var(--bg)}
.demo-panel label{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:10px}
.demo-panel textarea,.demo-panel input[type=text]{width:100%;border:2px solid var(--line);background:var(--bg);font-family:var(--sans);font-size:16px;padding:14px;resize:vertical;min-height:52px}
.demo-panel textarea{min-height:130px}
.demo-panel textarea:focus,.demo-panel input:focus{outline:3px solid var(--cobalt);outline-offset:1px}
.demo-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.chip{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;border:2px solid var(--line);background:var(--bg);padding:7px 12px;cursor:pointer;transition:background .15s}
.chip:hover{background:var(--acid)}
.result-box{border:2px solid var(--line);margin-top:22px;padding:22px}
.result-box .status{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--grey)}
.meter{height:26px;border:2px solid var(--line);margin-top:14px;position:relative;overflow:hidden}
.meter>i{position:absolute;inset:0;width:0%;background:var(--acid);transition:width .5s ease}
.meter.neg>i{background:#F2A19B}
.schema{font-family:var(--mono);font-size:13px;border:2px solid var(--line);padding:18px 20px;margin-top:24px;overflow-x:auto}
.schema b{color:var(--cobalt);font-weight:500}
.schema .pk{background:var(--acid);padding:0 4px}

/* ---------- reveal animation ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
  .reveal.in{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .cta-row{justify-content:flex-start}
  .svc-grid{grid-template-columns:1fr}
  .case{grid-template-columns:1fr;gap:10px}
  .case .out{text-align:left}
  .stat-row{grid-template-columns:1fr auto}
  .stat-row .spark{display:none}
  .stat-row span{text-align:right}
  .factbox{grid-template-columns:1fr}
  .factbox>div{border-right:0;border-bottom:1px solid var(--line-soft)}
  .factbox>div:last-child{border-bottom:0}
  .nav-links{gap:0}
  .nav-links a{padding:8px 9px;font-size:11.5px}
}
@media (max-width:560px){
  .nav-in{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}
@media print{
  .nav,.contact-blk,.marquee{display:none}
}