/*
Theme Name: Dekada Digital
Theme URI: https://dekadadigital.com
Author: Dekada Digital
Description: Official Dekada Digital WordPress theme.
Version: 3.0.0
License: Private
Text Domain: dekada-digital
*/

:root{--a:#abbc3b;--ad:rgba(171,188,59,.12);--ag:rgba(171,188,59,.35);--bg:#111;--s:#1c1c1c;--s2:#252525;--b:rgba(255,255,255,.07);--t:#e8e8e8;--m:rgba(232,232,232,.5);--f:rgba(232,232,232,.22);--nh:66px;--mono:'Space Mono',monospace;--sans:'DM Sans',sans-serif;--display:'Space Grotesk',sans-serif;--ease:cubic-bezier(.16,1,.3,1);}
[data-theme="light"]{--bg:#f4f4ee;--s:#fff;--s2:#ebebeb;--b:rgba(0,0,0,.08);--t:#1c1c1c;--m:rgba(28,28,28,.5);--f:rgba(28,28,28,.22);}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:var(--sans);background:var(--bg);color:var(--t);line-height:1.6;overflow-x:hidden;transition:background .4s,color .4s;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{border:none;background:none;cursor:pointer;font-family:inherit;}
::selection{background:var(--a);color:#000;}
::-webkit-scrollbar{width:3px;}::-webkit-scrollbar-track{background:var(--bg);}::-webkit-scrollbar-thumb{background:var(--a);}

/* LOGO SVG theming */
#logo-digital { fill: var(--t); transition: fill .4s; }
.logo-dmark   { fill: var(--t); transition: fill .4s; }
.nav-logo-svg { cursor: pointer; display:block; }

/* PROGRESS */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--a);z-index:9999;transition:width .1s;}

/* NAV — constrained to max-width:1200px like .hg */
nav{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nh);
  background:var(--bg);border-bottom:1px solid var(--b);backdrop-filter:blur(16px);
  transition:background .4s,border-color .4s;}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 40px;height:100%;
  display:flex;align-items:center;justify-content:space-between;}
.nav-r{display:flex;align-items:center;gap:18px;}

/* theme toggle — bigger */
.thm{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--m);cursor:pointer;user-select:none;transition:color .2s;}
.thm:hover{color:var(--t);}
.ttr{width:43px;height:22px;border-radius:11px;background:var(--s2);border:1px solid var(--b);position:relative;transition:background .3s,border-color .3s;flex-shrink:0;}
[data-theme="dark"] .ttr{background:rgba(171,188,59,.08);border-color:var(--ag);}
[data-theme="light"] .ttr{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.15);}
[data-theme="light"] .tth{transform:translateX(21px);background:#1c1c1c;}
.tth{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--m);transition:transform .3s,background .3s;transform:translateX(21px);}
[data-theme="dark"] .tth{transform:translateX(0);background:var(--a);}

/* CTA — bigger */
.btn-cta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;font-weight:700;text-transform:uppercase;padding:11px 20px;background:var(--a);color:#000;transition:opacity .2s,transform .2s;cursor:pointer;display:inline-block;}
.btn-cta:hover{opacity:.84;transform:translateY(-1px);}

/* HAMBURGER — bigger */
#ham{display:flex;flex-direction:row;align-items:center;gap:10px;padding:6px 4px;background:none;border:none;cursor:pointer;outline:none;position:relative;z-index:1100;-webkit-appearance:none;appearance:none;}
.ham-lbl{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--t);line-height:1;pointer-events:none;transition:color .2s;}
.ham-ico{display:flex;flex-direction:column;gap:6px;pointer-events:none;}
.ham-ico span{display:block;height:2px;background:var(--t);transform-origin:center;transition:transform .4s var(--ease),opacity .3s,width .3s var(--ease),background .3s;}
.ham-ico span:nth-child(1){width:27px;}
.ham-ico span:nth-child(2){width:18px;}
.ham-ico span:nth-child(3){width:27px;}
.mopen .ham-ico span:nth-child(1){width:27px;transform:translateY(7px) rotate(45deg);}
.mopen .ham-ico span:nth-child(2){opacity:0;}
.mopen .ham-ico span:nth-child(3){width:27px;transform:translateY(-7px) rotate(-45deg);}

/* BACKDROP */
#bd{position:fixed;inset:0;z-index:950;background:rgba(0,0,0,.52);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .5s;}
#bd.open{opacity:1;pointer-events:auto;}

/* MENU PANEL */
#mp{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);z-index:960;background:var(--s);border-left:3px solid var(--a);display:flex;flex-direction:column;overflow:hidden;overflow-y:auto;transform:translateX(100%);transition:transform .65s var(--ease),background .4s;}
#mp.open{transform:translateX(0);}
.mpc{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:26px 36px;border-bottom:1px solid var(--b);cursor:pointer;flex-shrink:0;}
.mpc-l{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--m);transition:color .2s;}
.mpc:hover .mpc-l{color:var(--a);}
.mpc-x{width:26px;height:26px;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mpc-x::before,.mpc-x::after{content:'';position:absolute;width:16px;height:2px;background:var(--t);transition:background .2s;}
.mpc-x::before{transform:rotate(45deg);}
.mpc-x::after{transform:rotate(-45deg);}
.mpc:hover .mpc-x::before,.mpc:hover .mpc-x::after{background:var(--a);}
.mp-items{flex:1;padding:28px 36px;display:flex;flex-direction:column;}
.mpi{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid var(--b);cursor:pointer;position:relative;overflow:hidden;opacity:0;transform:translateX(28px);transition:opacity .45s var(--ease),transform .45s var(--ease);}
#mp.open .mpi{opacity:1;transform:translateX(0);}
#mp.open .mpi:nth-child(1){transition-delay:.06s;}#mp.open .mpi:nth-child(2){transition-delay:.11s;}#mp.open .mpi:nth-child(3){transition-delay:.16s;}#mp.open .mpi:nth-child(4){transition-delay:.21s;}#mp.open .mpi:nth-child(5){transition-delay:.26s;}#mp.open .mpi:nth-child(6){transition-delay:.31s;}#mp.open .mpi:nth-child(7){transition-delay:.36s;}#mp.open .mpi:nth-child(8){transition-delay:.41s;}
.mpi::before{content:'';position:absolute;left:-40px;top:0;bottom:0;width:3px;background:var(--a);transition:left .3s var(--ease);}
.mpi:hover::before{left:-22px;}
.mpn{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--a);min-width:26px;flex-shrink:0;line-height:1;margin-top:3px;}
.mpl{font-family:var(--mono);font-size:clamp(20px,3.5vw,28px);font-weight:700;letter-spacing:-1px;color:var(--t);line-height:1.1;transition:color .2s,letter-spacing .3s;}
.mpi:hover .mpl{color:var(--a);letter-spacing:-.5px;}
.mpf{padding:26px 36px;border-top:1px solid var(--b);flex-shrink:0;opacity:0;transform:translateY(14px);transition:opacity .5s .48s,transform .5s .48s;}
#mp.open .mpf{opacity:1;transform:none;}
.mpf-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--a);margin-bottom:10px;}
.mpf-c{font-family:var(--mono);font-size:13px;color:var(--m);line-height:1.9;margin-bottom:18px;}
.mpf-c a{color:var(--m);transition:color .2s;}.mpf-c a:hover{color:var(--a);}
.mpf-s{display:flex;gap:8px;margin-bottom:18px;}
.mpfs{width:36px;height:36px;border:1px solid var(--b);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;color:var(--m);cursor:pointer;transition:border-color .2s,color .2s;}
.mpfs:hover{border-color:var(--a);color:var(--a);}
.mpf-st{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--f);display:flex;flex-direction:column;gap:3px;}
.mpf-st b{color:var(--a);font-weight:400;}

/* PAGES */
.page{display:none;}.page.active{display:block;}

/* HERO */
.hero{min-height:100vh;padding-top:var(--nh);display:flex;flex-direction:column;position:relative;overflow:hidden;}
.ticker{background:var(--s);border-bottom:1px solid var(--b);padding:10px 0;overflow:hidden;white-space:nowrap;}
.ticker-i{display:inline-flex;gap:60px;animation:tick 22s linear infinite;}
.ticker-i span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--m);}
.ticker-i span em{color:var(--a);font-style:normal;margin-right:8px;}
@keyframes tick{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.hg{flex:1;display:grid;grid-template-columns:1fr 1fr;max-width:1600px;width:80%;margin:0 auto;padding:80px 0;align-items:center;gap:60px;box-sizing:border-box;}
.hey{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--a);margin-bottom:22px;opacity:0;animation:fu .8s .2s forwards;}
.hh1{font-family:var(--mono);font-size:clamp(34px,5vw,68px);font-weight:700;line-height:1.05;letter-spacing:-2px;margin-bottom:22px;opacity:0;animation:fu .8s .4s forwards;}
.hh1 em{color:var(--a);font-style:normal;}
.hs{font-size:16px;color:var(--m);max-width:480px;line-height:1.75;margin-bottom:36px;opacity:0;animation:fu .8s .6s forwards;}
.hb{display:flex;gap:14px;align-items:center;opacity:0;animation:fu .8s .75s forwards;}
.btn-g{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:11px 20px;border:1px solid var(--b);color:var(--m);cursor:pointer;transition:border-color .3s,color .3s;background:none;}
.btn-g:hover{border-color:var(--a);color:var(--a);}
.hst{display:flex;gap:40px;margin-top:56px;opacity:0;animation:fu .8s .9s forwards;flex-wrap:wrap;}
.hsn{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--a);}
.hsl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--m);text-transform:uppercase;margin-top:3px;}
.hterm{width:100%;max-width:500px;background:var(--s);border:1px solid var(--b);border-top:2px solid var(--a);opacity:0;animation:fi 1s .5s forwards;}
.tb{background:var(--s2);padding:10px 16px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--b);}
.td{width:10px;height:10px;border-radius:50%;}
.td1{background:#ff5f56;}.td2{background:var(--a);}.td3{background:#27c93f;}
.tt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--m);margin-left:auto;}
.tbd{padding:18px;min-height:280px;overflow:hidden;}
.tl{display:flex;gap:9px;margin-bottom:7px;font-family:var(--mono);font-size:12px;}
.tp{color:var(--a);}.tc{color:var(--t);}.to{color:var(--m);margin-left:18px;}
@keyframes fu{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
@keyframes fi{from{opacity:0;}to{opacity:1;}}

/* SECTIONS */
.sec{padding:100px 0;max-width:1600px;width:80%;margin:0 auto;box-sizing:border-box;}
.sdiv{border:none;border-top:1px solid var(--b);margin:0 40px;}
.slbl{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--a);margin-bottom:14px;}
.sh2{font-family:var(--display);font-size:clamp(26px,4vw,50px);font-weight:700;line-height:1.1;letter-spacing:-1.5px;margin-bottom:18px;}
.ssub{font-size:16px;color:var(--m);max-width:520px;line-height:1.7;}

/* SERVICES — 2 column grid */
.sg{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--b);border:1px solid var(--b);margin-top:56px;}
.sc{background:var(--bg);padding:38px;cursor:pointer;position:relative;overflow:hidden;transition:background .4s;}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--a);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);}
.sc:hover{background:var(--s);}.sc:hover::before{transform:scaleX(1);}
.sn{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--f);margin-bottom:16px;}
/* Line icon box */
.si{width:46px;height:46px;border:1px solid var(--b);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:border-color .3s;}
.si svg{width:22px;height:22px;stroke:var(--m);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s;}
.sc:hover .si{border-color:var(--a);background:var(--a);}.sc:hover .si svg{stroke:#1c1c1c;}
.stg{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--a);margin-bottom:10px;}
.snm{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:-.5px;margin-bottom:10px;}
.spl{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px;}
.pl{font-family:var(--mono);font-size:10px;padding:3px 8px;border:1px solid var(--b);color:var(--m);transition:border-color .3s;}
.sc:hover .pl{border-color:rgba(171,188,59,.3);}
.sd{font-size:14px;color:var(--m);line-height:1.6;margin-bottom:20px;}
.slk{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--a);display:flex;align-items:center;gap:7px;transition:gap .2s;}
.sc:hover .slk{gap:13px;}

/* COMPARISON */
.cw{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--b);border:1px solid var(--b);margin-top:56px;}
.cc{background:var(--bg);padding:38px;}.cc.alt{background:var(--s);}
.ch{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:28px;padding-bottom:14px;border-bottom:1px solid var(--b);color:var(--m);}
.ch b{color:var(--a);}
.cr{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--b);font-size:14px;}
.cl{color:var(--m);font-size:13px;}.cv{font-family:var(--mono);font-weight:700;font-size:13px;}
.bad{color:#ff5f56;}.good{color:var(--a);}

/* WORKS — homepage featured (Atomic large-card style) */
.pw-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--b);margin-top:56px;}
.pw-card{position:relative;overflow:hidden;cursor:pointer;background:var(--s2);}
.pw-img{width:100%;aspect-ratio:16/10;overflow:hidden;display:block;position:relative;}
.pw-img-inner{width:100%;height:100%;object-fit:cover;display:flex;align-items:center;justify-content:center;transition:transform .6s ease;}
.pw-card:hover .pw-img-inner{transform:scale(1.04);}
.pw-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .4s;}
.pw-card:hover .pw-overlay{background:rgba(0,0,0,.15);}
.pw-bottom{padding:22px 24px 24px;background:var(--s);border-top:1px solid var(--b);}
.pw-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.pw-tags{display:flex;gap:6px;align-items:center;}
.pw-tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--a);}
.pw-tag-sep{font-family:var(--mono);font-size:10px;color:var(--f);}
.pw-cs{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t);border:1px solid var(--b);padding:6px 14px;transition:border-color .2s,color .2s;white-space:nowrap;display:flex;align-items:center;gap:6px;}
.pw-card:hover .pw-cs{border-color:var(--a);color:var(--a);}
.pw-title{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:-.3px;margin-bottom:8px;line-height:1.3;text-transform:uppercase;}
.pw-desc{font-size:13px;color:var(--m);line-height:1.65;}
/* Works page grid (unchanged) */
.wg{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px;margin-top:56px;}
.wc{background:var(--s);border:1px solid var(--b);cursor:pointer;position:relative;overflow:hidden;transition:border-color .3s,transform .3s;}
.wc:hover{border-color:var(--a);transform:translateY(-3px);}
.wth{aspect-ratio:16/10;background:var(--s2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.wtl{font-family:var(--mono);font-size:11px;color:var(--f);text-transform:uppercase;letter-spacing:.1em;}
.wo{position:absolute;inset:0;background:rgba(171,188,59,.07);opacity:0;transition:opacity .3s;}
.wc:hover .wo{opacity:1;}
.wa{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:16px;color:var(--a);opacity:0;transform:translateX(-8px);transition:all .3s;}
.wc:hover .wa{opacity:1;transform:translateX(0);}
.wb{padding:22px;}
.wtgs{display:flex;gap:7px;margin-bottom:10px;}
.wtg{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--a);}
.wt{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:-.3px;margin-bottom:7px;}
.wd{font-size:13px;color:var(--m);line-height:1.6;}
.ftabs{display:flex;gap:2px;flex-wrap:wrap;margin-top:36px;}
.ftab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 15px;border:1px solid var(--b);cursor:pointer;background:none;color:var(--m);transition:all .2s;}
.ftab:hover,.ftab.active{background:var(--a);color:#000;border-color:var(--a);}

/* ============================================
   BRANDS WE'VE EMPOWERED — 5-logo fade slider
   ============================================ */
.brands-sec{padding:80px 40px;border-top:1px solid var(--b);border-bottom:1px solid var(--b);background:var(--bg);}
.brands-head{max-width:1200px;margin:0 auto;margin-bottom:52px;text-align:center;}
.brands-sub{font-size:15px;color:var(--m);max-width:480px;line-height:1.7;margin:10px auto 0;}

/* Slider container — not full width */



to{opacity:1;transform:translateY(0)}}

/* 180×180 logo tile */


.brand-box svg{width:100%;height:80px;display:block;opacity:.35;transition:opacity .3s;}
.brand-box:hover svg{opacity:.7;}


/* Nav dots */




/* ============================================
   CLIENT LOGS — Atomic single-card slider style
   ============================================ */
.cl-slider-outer{margin-top:40px;}
/* prev/next row */
.cl-nav-row{display:flex;justify-content:center;align-items:center;gap:14px;margin-bottom:36px;}
.cl-nav-btn{width:56px;height:56px;border-radius:50%;border:1px solid var(--b);background:none;color:var(--t);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:30px;transition:border-color .2s,color .2s;}
.cl-nav-btn:hover{border-color:var(--a);color:var(--a);}
/* slide container */
.cl-slide-wrap{position:relative;min-height:380px;display:flex;justify-content:center;}
.cl-slide{width:100%;display:none;opacity:0;pointer-events:none;transition:opacity .5s ease;justify-content:center;}
.cl-slide.active{display:flex;opacity:1;pointer-events:auto;}
/* the card itself */
.cl-card{width:880px;max-width:100%;margin:0 auto;border:1px solid var(--b);background:transparent;padding:52px 60px;position:relative;box-sizing:border-box;}
/* LOG badge — accent pill top-left */
.cl-badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--a);color:#000;padding:5px 12px;margin-bottom:28px;font-weight:700;}
/* stars */
.cl-stars{display:flex;gap:4px;margin-bottom:28px;}
.cl-star{width:16px;height:16px;fill:var(--a);}
/* quotation mark — top right */
.cl-qmark{position:absolute;top:40px;right:48px;opacity:.1;}
.cl-qmark svg{width:52px;height:52px;fill:var(--t);}
/* quote text — monospace large */
.cl-quote{font-family:var(--mono);font-size:15px;line-height:1.85;color:var(--m);margin-bottom:40px;max-width:820px;}
/* divider */
.cl-div{width:100%;height:1px;background:var(--b);margin-bottom:28px;}
/* author row */
.cl-auth{display:flex;align-items:center;gap:16px;}
.cl-av{width:52px;height:52px;border-radius:50%;flex-shrink:0;background:var(--ad);border:1px solid var(--ag);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:15px;color:var(--a);}
.cl-co-logo{width:52px;height:52px;flex-shrink:0;background:var(--s2);border:1px solid var(--b);display:flex;align-items:center;justify-content:center;margin-left:auto;}
.cl-co-logo svg{width:28px;height:28px;opacity:.3;}
.cl-auth-info{}
.cl-name{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.2;}
.cl-role{font-family:var(--display);font-size:12px;color:var(--a);margin-top:3px;}
/* progress dots */
.cl-dots{display:flex;justify-content:center;gap:6px;margin-top:24px;}
.cl-dot{width:36px;height:3px;background:var(--b);cursor:pointer;transition:background .3s;}
.cl-dot.active{background:var(--a);}

/* CTA */
.ctas{background:var(--s);border-top:1px solid var(--b);border-bottom:1px solid var(--b);padding:100px 40px;text-align:center;position:relative;overflow:hidden;}
.ctas::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,var(--ad) 0%,transparent 70%);pointer-events:none;}
.ctah{font-family:var(--mono);font-size:clamp(28px,5vw,58px);font-weight:700;line-height:1.05;letter-spacing:-2px;margin-bottom:20px;}
.ctah em{color:var(--a);font-style:normal;}
.ctasb{font-size:16px;color:var(--m);max-width:460px;margin:0 auto 36px;line-height:1.7;}

/* MARQUEE */
.mq{overflow:hidden;padding:36px 0;border-top:1px solid var(--b);border-bottom:1px solid var(--b);background:var(--s);}
.mqi{display:flex;gap:56px;animation:mrun 28s linear infinite;white-space:nowrap;}
.mqit{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--f);text-transform:uppercase;flex-shrink:0;transition:color .2s;}
.mqit:hover{color:var(--a);}
@keyframes mrun{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* PAGE HEADER */
.ph{padding-top:var(--nh);background:var(--s);border-bottom:1px solid var(--b);position:relative;overflow:hidden;}
.ph::after{content:'';position:absolute;bottom:-1px;left:40px;width:70px;height:2px;background:var(--a);pointer-events:none;}
.phi{max-width:1200px;margin:0 auto;padding:76px 40px 56px;}
.bc{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--f);margin-bottom:18px;text-transform:uppercase;display:flex;align-items:center;flex-wrap:wrap;gap:4px;position:relative;z-index:2;}
.bc em{color:var(--f);font-style:normal;margin:0 2px;}
.bc-link{color:var(--m);cursor:pointer;transition:color .2s;text-decoration:none;pointer-events:auto;position:relative;z-index:2;}
.bc-link:hover{color:var(--a);}
.bc-cur{color:var(--t);}

/* BLOG */
.bg2{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;}
.bcard{background:var(--s);border:1px solid var(--b);overflow:hidden;cursor:pointer;transition:border-color .3s,transform .3s;}
.bcard:hover{border-color:var(--a);transform:translateY(-4px);}
.bimg{aspect-ratio:16/9;background:linear-gradient(135deg,var(--s2),var(--ad));display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--f);text-transform:uppercase;letter-spacing:.1em;position:relative;}
.bcat{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--a);color:#000;padding:4px 9px;}
.bbd{padding:22px;}
.bdt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--f);margin-bottom:9px;text-transform:uppercase;}
.btt{font-family:var(--mono);font-size:15px;font-weight:700;line-height:1.3;letter-spacing:-.3px;margin-bottom:10px;}
.bex{font-size:13px;color:var(--m);line-height:1.6;margin-bottom:14px;}
.brd{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--a);display:flex;align-items:center;gap:6px;}

/* CONTACT */
.cg{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;margin-top:56px;}
.cd{margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--b);}
.cd:last-child{border-bottom:none;}
.cdl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--a);margin-bottom:7px;}
.cdv{font-size:15px;font-weight:500;}
.fg{margin-bottom:18px;}
.fl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--m);display:block;margin-bottom:7px;}
.fi,.fta,.fse{width:100%;padding:13px 15px;background:var(--s);border:1px solid var(--b);color:var(--t);font-family:var(--sans);font-size:14px;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none;}
.fi:focus,.fta:focus,.fse:focus{border-color:var(--a);}
.fta{min-height:130px;resize:vertical;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fsub{width:100%;padding:15px;background:var(--a);color:#000;border:none;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.15em;font-weight:700;text-transform:uppercase;transition:opacity .2s,transform .2s;}
.fsub:hover{opacity:.84;transform:translateY(-1px);}
.fok{display:none;margin-top:18px;padding:18px;border:1px solid var(--a);background:var(--ad);}
.fokt{font-family:var(--mono);font-size:12px;color:var(--a);letter-spacing:.1em;}

/* SERVICE HERO */
.sh{min-height:50vh;padding-top:var(--nh);display:flex;align-items:flex-end;background:var(--s);border-bottom:1px solid var(--b);position:relative;overflow:hidden;}
.sh::before{content:'';position:absolute;top:0;right:0;width:600px;height:100%;background:radial-gradient(circle at right,var(--ad) 0%,transparent 70%);}
.shi{padding:56px 40px;max-width:1200px;margin:0 auto;width:100%;}
.ps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--b);border:1px solid var(--b);margin-top:56px;}
.psi{background:var(--bg);padding:30px;}
.psn{font-family:var(--mono);font-size:38px;font-weight:700;color:var(--ad);margin-bottom:14px;line-height:1;}
.pst{font-family:var(--mono);font-size:14px;font-weight:700;margin-bottom:9px;}
.psd{font-size:13px;color:var(--m);line-height:1.6;}
.fg2{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin-top:56px;}
.fi2{padding:22px;border:1px solid var(--b);background:var(--s);transition:border-color .3s;}
.fi2:hover{border-color:var(--a);}
.fic{font-size:22px;margin-bottom:13px;}
.fit{font-family:var(--mono);font-size:14px;font-weight:700;margin-bottom:7px;}
.fid{font-size:13px;color:var(--m);line-height:1.6;}

/* old footer CSS removed */

/* REVEAL */


.d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.3s;}

/* STATUS DOT */
.dot{display:inline-block;width:8px;height:8px;background:var(--a);border-radius:50%;animation:pl 2s infinite;margin-right:7px;}
@keyframes pl{0%,100%{box-shadow:0 0 0 0 var(--ag);}50%{box-shadow:0 0 0 5px transparent;}}

/* RESPONSIVE */
@media(max-width:1100px){}
@media(max-width:900px){
  .hg{grid-template-columns:1fr!important;width:92%!important;padding:48px 0!important;}
  .bg2{grid-template-columns:1fr;}
  .cg{grid-template-columns:1fr;}
  .fg3{grid-template-columns:1fr 1fr;}
  .cw{grid-template-columns:1fr;}
  .sec{width:92%!important;padding:64px 4%!important;}
  nav{padding:0;}
  .nav-inner{padding:0 22px;}
  .nav-r .btn-cta{display:none;}
  .wg{grid-template-columns:1fr;}
  .hst{gap:22px;}
  .sg{grid-template-columns:1fr;}
  .brands-head{padding:0 22px;}
}
@media(max-width:600px){.fg3{grid-template-columns:1fr;}.frow{grid-template-columns:1fr;}.hh1{font-size:30px;}.sh2{font-size:24px;}}

/* ============================================
   PROJECT ARCHIVES — 2/3 active + 1/3 peek slider
   ============================================ */
.pa-outer{position:relative;overflow:hidden;}
.pa-track{display:flex;gap:24px;transition:transform .65s cubic-bezier(.16,1,.3,1);will-change:transform;}
.pa-slide{flex-shrink:0;cursor:pointer;transition:opacity .4s;background:var(--s);border:1px solid var(--b);overflow:hidden;}
.pa-slide:not(.pa-active){opacity:.5;}
.pa-slide:not(.pa-active):hover{opacity:.72;}
.pa-slide.pa-active{border-color:var(--b);}
.pa-img{width:100%;overflow:hidden;background:var(--s2);line-height:0;}
.pa-img svg{width:100%;height:auto;display:block;max-height:380px;}
.pa-bottom{padding:22px 16px 28px;}
.pa-meta-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.pa-tags{display:flex;align-items:center;gap:8px;}
.pa-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--a);}
.pa-sep{font-family:var(--mono);font-size:10px;color:var(--f);}
.pa-cs-btn{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t);border:1px solid var(--b);background:none;padding:7px 16px;cursor:pointer;transition:border-color .2s,color .2s;white-space:nowrap;}
.pa-cs-btn:hover{border-color:var(--a);color:var(--a);}
.pa-title{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.3px;margin-bottom:9px;line-height:1.3;text-transform:uppercase;color:var(--t);}
.pa-desc{font-size:13px;color:var(--m);line-height:1.65;}
.pa-nav{display:flex;justify-content:flex-end;gap:8px;margin-top:24px;}
.pa-nav-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--b);background:none;color:var(--t);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .3s,color .3s;}
.pa-nav-btn:hover{border-color:var(--a);color:var(--a);}
@media(max-width:768px){.pa-track{gap:14px;}.pa-title{font-size:13px;}.pa-desc{display:none;}}


/* ============================================
   WORKS PAGE — Atomic Digital Labs style
   ============================================ */

/* Hero heading — very large like Atomic */
.wk-h1 {
  font-family: var(--display);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -3px;
  margin-bottom: 20px;
  color: var(--t);
}
.wk-hero-sub {
  font-size: 16px;
  color: var(--m);
  max-width: 640px;
  line-height: 1.75;
  margin-top: 14px;
}

/* Filter tabs row */
.wk-tabs-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  border-bottom: 1px solid var(--b);
}
.wk-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.wk-tabs::-webkit-scrollbar { display: none; }
.wk-tab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 18px 22px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--f);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
  margin-bottom: -1px;
}
.wk-tab:hover { color: var(--t); }
.wk-tab.active { color: var(--a); border-bottom-color: var(--a); }

/* Grid — 2 columns */
.wk-grid-sec {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 40px 80px;
}
.wk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  background: transparent;
}

/* Each card */
.wk-card {
  background: var(--s);
  border: 1px solid var(--b);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .3s, border-color .3s, transform .3s;
  display: flex;
  flex-direction: column;
}
.wk-card:hover { background: var(--s2); border-color: var(--ag); transform: translateY(-3px); }

/* Image area — 16:10 ratio */
.wk-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
  position: relative;
}
.wk-img svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .6s ease;
}
.wk-card:hover .wk-img svg { transform: scale(1.03); }

/* Overlay on hover */
.wk-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(171,188,59, .04);
  opacity: 0;
  transition: opacity .3s;
}
.wk-card:hover .wk-img::after { opacity: 1; }

/* Info area */
.wk-info {
  padding: 24px 28px 32px;
  flex: 1;
}

/* Tags — small monospace colored, Atomic style */
.wk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.wk-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--a);
  font-weight: 400;
}
.wk-tag + .wk-tag::before {
  content: '/';
  margin-right: 10px;
  color: var(--f);
}

/* Project name — bold, large */
.wk-name {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.2;
  margin-bottom: 10px;
  color: var(--t);
  transition: color .2s;
}
.wk-card:hover .wk-name { color: var(--a); }

/* Description */
.wk-desc {
  font-size: 14px;
  color: var(--m);
  line-height: 1.7;
}

/* Responsive */
@media(max-width:900px) {
  .wk-grid { grid-template-columns: 1fr; }
  .wk-tabs-wrap { padding: 0 22px; }
  .wk-grid-sec { padding: 36px 22px 60px; }
  .wk-h1 { font-size: 48px; letter-spacing: -2px; }
}


/* ============================================
   ATOMIC CONTACT PAGE
   ============================================ */
.ct-section { padding-top: 72px; padding-bottom: 0; }
.ct-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start; }
.ct-info-h { font-family: var(--mono); font-size: 14px; letter-spacing: .15em; text-transform: uppercase; color: var(--a); margin-bottom: 22px; }
.ct-email-link { display: block; font-family: var(--mono); font-size: clamp(16px, 2vw, 22px); color: var(--t); margin-bottom: 10px; transition: color .2s; }
.ct-email-link:hover { color: var(--a); }
.ct-phone-link { display: block; font-family: var(--mono); font-size: clamp(14px, 1.5vw, 18px); color: var(--m); transition: color .2s; }
.ct-phone-link:hover { color: var(--a); }
.ct-divider { width: 100%; height: 1px; background: var(--b); margin: 36px 0; }
.ct-join-h { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; color: var(--t); }
.ct-join-sub { font-size: 14px; color: var(--m); line-height: 1.7; margin-bottom: 18px; }
.ct-join-btn { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: none; border: 1px solid var(--b); color: var(--m); padding: 10px 18px; cursor: pointer; transition: border-color .2s, color .2s; }
.ct-join-btn:hover { border-color: var(--a); color: var(--a); }

/* stepped form */
.ct-step { margin-bottom: 40px; }
.ct-step-num { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t); margin-bottom: 16px; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chip { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 16px; border: 1px solid var(--b); color: var(--m); cursor: pointer; transition: all .2s; user-select: none; }
.ct-chip:hover { border-color: var(--a); color: var(--a); }
.ct-chip.active { background: var(--a); color: #000; border-color: var(--a); }
.ct-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ct-fg { display: flex; flex-direction: column; }
.ct-fi { width: 100%; padding: 14px 16px; background: transparent; border: none; border-bottom: 1px solid var(--b); color: var(--t); font-family: var(--mono); font-size: 13px; outline: none; transition: border-color .2s; }
.ct-fi::placeholder { color: var(--f); }
.ct-fi:focus { border-bottom-color: var(--a); }
.ct-ta { width: 100%; min-height: 160px; padding: 16px; background: var(--s); border: 1px solid var(--b); color: var(--t); font-family: var(--mono); font-size: 13px; line-height: 1.7; outline: none; resize: vertical; transition: border-color .2s; }
.ct-ta::placeholder { color: var(--f); }
.ct-ta:focus { border-color: var(--a); }
.ct-submit { width: 100%; padding: 18px; background: var(--a); color: #000; border: none; cursor: pointer; font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; transition: opacity .2s, transform .2s; margin-top: 8px; }
.ct-submit:hover { opacity: .85; transform: translateY(-1px); }
.ct-ok { display: none; margin-top: 18px; padding: 18px; border: 1px solid var(--a); background: var(--ad); font-family: var(--mono); font-size: 12px; color: var(--a); letter-spacing: .1em; }

/* ============================================
   UNIFIED FOOTER — Atomic style
   ============================================ */
.pre-footer { background: var(--s); border-top: 1px solid var(--b); padding: 100px 40px; position: relative; overflow: hidden; }
.pre-footer::before { content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; background: radial-gradient(circle, var(--ad) 0%, transparent 65%); pointer-events: none; }
.pre-footer-inner { max-width: 760px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.pf-dot-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a); animation: pl 2s infinite; }
.pf-system { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--a); }
.pf-h2 { font-family: var(--mono); font-size: clamp(36px, 5vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -2px; margin-bottom: 18px; }
.pf-h2 em { color: var(--a); font-style: normal; }
.pf-sub { font-size: 16px; color: var(--m); line-height: 1.7; max-width: 520px; margin: 0 auto 36px; }

.site-footer { background: var(--bg); border-top: 1px solid var(--b); padding: 0 0 0; }
.sf-inner { max-width: 1200px; margin: 0 auto; padding: 72px 40px 36px; }
.sf-top { border-bottom: 1px solid var(--b); padding-bottom: 36px; margin-bottom: 28px; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.sf-logo { font-family: var(--mono); font-size: 20px; font-weight: 700; letter-spacing: -.5px; cursor: pointer; }
.sf-logo em { color: var(--a); font-style: normal; }
.sf-email { font-family: var(--mono); font-size: clamp(18px, 2.5vw, 28px); font-weight: 700; color: var(--t); letter-spacing: -.5px; transition: color .2s; }
.sf-email:hover { color: var(--a); }
.sf-tagline { font-family: var(--mono); font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.sf-tag-sub { font-size: 14px; color: var(--m); max-width: 420px; line-height: 1.7; margin-bottom: 48px; }
.sf-mid { display: grid; grid-template-columns: 140px 200px 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--b); }
.sf-col-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--a); margin-bottom: 8px; }
.sf-col-val { font-family: var(--mono); font-size: 13px; color: var(--m); line-height: 1.8; }
.sf-col-val a { color: var(--m); transition: color .2s; }
.sf-col-val a:hover { color: var(--a); }
.sf-off-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--a); margin-bottom: 18px; }
.sf-off-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sf-off-city { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--t); margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
.sf-hq { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; background: var(--a); color: #000; padding: 2px 6px; }
.sf-off-addr { font-size: 12px; color: var(--f); line-height: 1.65; }
.sf-bot { display: flex; align-items: center; justify-content: space-between; padding: 28px 0 18px; flex-wrap: wrap; gap: 14px; }
.sf-nav-links { display: flex; gap: 24px; flex-wrap: wrap; }
.sf-nav-links a { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--f); cursor: pointer; transition: color .2s; }
.sf-nav-links a:hover { color: var(--m); }
.sf-engine { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 12px 24px; background: var(--a); color: #000; border: none; cursor: pointer; font-weight: 700; transition: opacity .2s; }
.sf-engine:hover { opacity: .84; }
.sf-copy { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: #abbc3b; padding-top: 14px; border-top: 1px solid var(--b); }

/* responsive footer */
@media(max-width:900px) {
  .sf-mid { grid-template-columns: 1fr 1fr; }
  .sf-off-grid { grid-template-columns: 1fr 1fr; }
  .ct-grid { grid-template-columns: 1fr; }
  .ct-row2 { grid-template-columns: 1fr; }
  .pre-footer { padding: 72px 22px; }
  .sf-inner { padding: 52px 22px 28px; }
}
@media(max-width:600px) {
  .sf-mid { grid-template-columns: 1fr; }
  .sf-off-grid { grid-template-columns: 1fr; }
  .sf-top { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   SERVICE PAGE — capabilities matrix & execution architecture
   ============================================================ */
.svc-status-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:24px;}
.svc-status-dot{width:8px;height:8px;border-radius:50%;background:var(--a);animation:pl 2s infinite;flex-shrink:0;}
.svc-status-txt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--a);}
.svc-stars{font-family:var(--mono);font-size:12px;color:var(--a);letter-spacing:.05em;}
.svc-context-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:28px;}
.svc-context-body{font-size:15px;color:var(--m);line-height:1.8;}

/* Capabilities grid — 4 col desktop, 2 tablet, 1 mobile */
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--b);border:1px solid var(--b);margin-top:52px;}
.cap-card{background:var(--s);border:1px solid var(--b);padding:32px 28px;cursor:pointer;position:relative;overflow:hidden;transition:background .3s,border-color .3s;display:flex;flex-direction:column;gap:12px;}
.cap-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--a);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1);}
.cap-card:hover{background:var(--s2);border-color:var(--ag);}.cap-card:hover::before{transform:scaleX(1);}
.cap-num{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--f);}
.cap-icon-wrap{width:44px;height:44px;border:1px solid var(--b);display:flex;align-items:center;justify-content:center;transition:border-color .3s;flex-shrink:0;}
.cap-icon-wrap svg{width:22px;height:22px;stroke:var(--m);transition:stroke .3s;}
.cap-card:hover .cap-icon-wrap{border-color:var(--a);background:var(--a);}.cap-card:hover .cap-icon-wrap svg{stroke:#1c1c1c;}
.cap-title{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:-.2px;color:var(--t);}
.cap-desc{font-size:13px;color:var(--m);line-height:1.6;flex:1;}
.cap-explore{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--a);margin-top:auto;transition:letter-spacing .2s;}
.cap-card:hover .cap-explore{letter-spacing:.18em;}

/* Execution Architecture — Atomic screenshot layout
   Circle icon centred above card, horizontal connector line at icon midpoint */
.phases-wrap{position:relative;margin-top:52px;}
/* horizontal connector line at icon level */
.phases-connector{position:absolute;top:60px;left:12.5%;right:12.5%;height:1px;background:var(--b);z-index:0;}
.phases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:1;}
.phase-item{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;}
/* circular icon above card */
.phase-icon{width:80px;height:80px;border-radius:50%;border:1px solid var(--b);background:var(--bg);display:flex;align-items:center;justify-content:center;margin-bottom:0;flex-shrink:0;transition:border-color .3s,background .3s;position:relative;z-index:2;}
.phase-icon svg{width:28px;height:28px;stroke:var(--a);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s;}
.phase-item:hover .phase-icon{border-color:var(--a);background:var(--ad);}
/* card below icon — they connect via a short vertical line */
.phase-card{background:var(--s);border:1px solid var(--b);padding:28px 24px 30px;width:100%;transition:border-color .3s;margin-top:24px;position:relative;}
.phase-card::before{content:'';position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:1px;height:24px;background:var(--b);}
.phase-item:hover .phase-card{border-color:var(--ag);}
.phase-id{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--a);text-transform:uppercase;margin-bottom:12px;}
.phase-title{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.3px;text-transform:uppercase;color:var(--t);margin-bottom:10px;}
.phase-desc{font-size:14px;color:var(--m);line-height:1.65;}
/* Responsive */
@media(max-width:900px){.phases-grid{grid-template-columns:1fr 1fr;}.phases-connector{display:none;}}
@media(max-width:600px){.phases-grid{grid-template-columns:1fr;}}

/* Service page project cards */
.svc-proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.svc-proj{cursor:pointer;overflow:hidden;border:1px solid var(--b);transition:border-color .3s,transform .3s;}
.svc-proj:hover{border-color:var(--a);transform:translateY(-3px);}
.svc-proj-img{height:220px;position:relative;display:flex;align-items:flex-end;padding:20px;}
.svc-proj-cat{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--a);}
.svc-proj-body{padding:20px 24px 24px;background:var(--s);}
.svc-proj-name{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:-.3px;margin-bottom:8px;color:var(--t);}
.svc-proj-link{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--a);}

/* Responsive */
@media(max-width:1100px){.cap-grid{grid-template-columns:repeat(2,1fr);}.phases-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:900px){.cap-grid{grid-template-columns:1fr 1fr;}.phases-grid{grid-template-columns:1fr 1fr;}.svc-proj-grid{grid-template-columns:1fr;}.svc-context-grid{grid-template-columns:1fr;}}
@media(max-width:600px){.cap-grid{grid-template-columns:1fr;}.phases-grid{grid-template-columns:1fr;}}


/* Design page — cap grid always 4 cols */
.cap-grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.cap-grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:500px){.cap-grid-4{grid-template-columns:1fr;}}


/* === FOOTER v2 === */
.pre-footer{background:var(--s);border-top:1px solid var(--b);padding:100px 40px;position:relative;overflow:hidden;}
.pre-footer::before{content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,var(--ad) 0%,transparent 65%);pointer-events:none;}
.pre-footer-inner{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:1;}
.pf-dot-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:20px;}
.pf-dot{width:8px;height:8px;border-radius:50%;background:var(--a);animation:pl 2s infinite;flex-shrink:0;}
.pf-system{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--a);}
.pf-h2{font-family:var(--display);font-size:clamp(36px,5vw,64px);font-weight:700;line-height:1.05;letter-spacing:-2px;margin-bottom:18px;}
.pf-h2 em{color:var(--a);font-style:normal;}
.pf-sub{font-size:16px;color:var(--m);line-height:1.7;max-width:520px;margin:0 auto 36px;}
.site-footer{background:var(--bg);border-top:1px solid var(--b);}
.sf-inner{max-width:1200px;margin:0 auto;padding:72px 40px 36px;}
.sf-top{border-bottom:1px solid var(--b);padding-bottom:36px;margin-bottom:28px;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.sf-logo{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-.5px;cursor:pointer;}
.sf-logo em{color:var(--a);font-style:normal;}
.sf-email{font-family:var(--mono);font-size:3.75rem;font-weight:700;color:var(--t);letter-spacing:-.5px;transition:color .2s;line-height:1.1;word-break:break-all;}
.sf-email:hover{color:var(--a);}
.sf-tagline{font-family:var(--mono);font-size:18px;font-weight:700;margin-bottom:8px;}
.sf-tag-sub{font-size:14px;color:var(--m);max-width:420px;line-height:1.7;margin-bottom:48px;}
.sf-mid{display:grid;grid-template-columns:160px 200px 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--b);}
.sf-col-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--a);margin-bottom:8px;}
.sf-col-val{font-family:var(--mono);font-size:13px;color:var(--m);line-height:1.8;}
.sf-col-val a{color:var(--m);transition:color .2s;}.sf-col-val a:hover{color:var(--a);}
.sf-off-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--a);margin-bottom:18px;}
.sf-off-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.sf-off-city{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--t);margin-bottom:5px;display:flex;align-items:center;gap:8px;}
.sf-hq{font-family:var(--mono);font-size:9px;letter-spacing:.1em;background:var(--a);color:#000;padding:2px 6px;}
.sf-off-addr{font-size:12px;color:var(--f);line-height:1.65;}
.sf-bot{display:flex;align-items:center;justify-content:space-between;padding:28px 0 18px;flex-wrap:wrap;gap:14px;}
.sf-social{display:flex;gap:10px;align-items:center;}
.sf-soc-icon{width:36px;height:36px;border:1px solid var(--b);display:flex;align-items:center;justify-content:center;color:var(--m);transition:border-color .2s,color .2s;}
.sf-soc-icon:hover{border-color:var(--a);color:var(--a);}
.sf-soc-icon svg{width:16px;height:16px;}
.sf-nav-links{display:flex;gap:24px;flex-wrap:wrap;}
.sf-nav-links a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--f);cursor:pointer;transition:color .2s;}
.sf-nav-links a:hover{color:var(--m);}
.sf-engine{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:12px 24px;background:var(--a);color:#000;border:none;cursor:pointer;font-weight:700;transition:opacity .2s;}
.sf-engine:hover{opacity:.84;}
.sf-copy{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#abbc3b;padding-top:14px;border-top:1px solid var(--b);}

/* === BLOG PAGE === */
.bl-tabs-wrap{max-width:1200px;margin:0 auto;padding:0 40px;border-bottom:1px solid var(--b);}
.bl-tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.bl-card{background:var(--s);border:1px solid var(--b);overflow:hidden;cursor:pointer;transition:border-color .3s,transform .3s;display:flex;flex-direction:column;}
.bl-card:hover{border-color:var(--a);transform:translateY(-3px);}
.bl-img{width:100%;overflow:hidden;line-height:0;aspect-ratio:16/9;}
.bl-img svg{width:100%;height:100%;display:block;transition:transform .5s ease;}
.bl-card:hover .bl-img svg{transform:scale(1.03);}
.bl-body{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column;}
.bl-meta{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.bl-cat{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;background:var(--a);color:#000;padding:3px 9px;font-weight:700;}
.bl-sep{color:var(--f);font-size:11px;}
.bl-date,.bl-time{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--f);text-transform:uppercase;}
.bl-title{font-family:var(--display);font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-.3px;margin-bottom:12px;color:var(--t);}
.bl-excerpt{font-size:13px;color:var(--m);line-height:1.7;margin-bottom:20px;flex:1;}
.bl-read{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--a);margin-top:auto;}

/* === SERVICE PAGES === */
.svc-status-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:24px;}
.svc-status-dot{width:8px;height:8px;border-radius:50%;background:var(--a);animation:pl 2s infinite;flex-shrink:0;}
.svc-status-txt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--a);}
.svc-stars{font-family:var(--mono);font-size:12px;color:var(--a);}
.svc-context-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:28px;}
.svc-context-body{font-size:15px;color:var(--m);line-height:1.8;}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;background:transparent;border:none;margin-top:52px;}
.cap-card{background:var(--s);border:1px solid var(--b);padding:32px 28px;cursor:pointer;position:relative;overflow:hidden;transition:background .3s,border-color .3s;display:flex;flex-direction:column;gap:12px;}
.cap-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--a);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1);}
.cap-card:hover{background:var(--s2);border-color:var(--ag);}.cap-card:hover::before{transform:scaleX(1);}
.cap-num{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--f);}
.cap-icon-wrap{width:44px;height:44px;border:1px solid var(--b);display:flex;align-items:center;justify-content:center;transition:border-color .3s,background .3s;flex-shrink:0;}
.cap-icon-wrap svg{width:22px;height:22px;stroke:var(--m);transition:stroke .3s;}
.cap-card:hover .cap-icon-wrap{border-color:var(--a);background:var(--a);}
.cap-card:hover .cap-icon-wrap svg{stroke:#1c1c1c;}
.cap-title{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:-.2px;color:var(--t);}
.cap-desc{font-size:13px;color:var(--m);line-height:1.6;flex:1;}
.cap-explore{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--a);margin-top:auto;transition:letter-spacing .2s;}
.cap-card:hover .cap-explore{letter-spacing:.18em;}
.phases-wrap{position:relative;margin-top:52px;}
.phases-connector{position:absolute;top:60px;left:12.5%;right:12.5%;height:1px;background:var(--b);z-index:0;}
.phases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:1;}
.phase-item{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;}
.phase-icon{width:80px;height:80px;border-radius:50%;border:1px solid var(--b);background:var(--bg);display:flex;align-items:center;justify-content:center;margin-bottom:0;flex-shrink:0;transition:border-color .3s,background .3s;position:relative;z-index:2;}
.phase-icon svg{width:28px;height:28px;stroke:var(--a);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s;}
.phase-item:hover .phase-icon{border-color:var(--a);background:var(--ad);}
.phase-card{background:var(--s);border:1px solid var(--b);padding:28px 24px 30px;width:100%;transition:border-color .3s;margin-top:24px;position:relative;}
.phase-card::before{content:'';position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:1px;height:24px;background:var(--b);}
.phase-item:hover .phase-card{border-color:var(--ag);}
.phase-id{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--a);text-transform:uppercase;margin-bottom:12px;}
.phase-title{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.3px;text-transform:uppercase;color:var(--t);margin-bottom:10px;}
.phase-desc{font-size:14px;color:var(--m);line-height:1.65;}
.svc-proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.svc-proj{cursor:pointer;overflow:hidden;border:1px solid var(--b);transition:border-color .3s,transform .3s;}
.svc-proj:hover{border-color:var(--a);transform:translateY(-3px);}
.svc-proj-img{height:200px;position:relative;display:flex;align-items:flex-end;padding:20px;}
.svc-proj-cat{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--a);}
.svc-proj-body{padding:20px 24px 24px;background:var(--s);}
.svc-proj-name{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:-.3px;margin-bottom:8px;color:var(--t);}
.svc-proj-link{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--a);}

/* === TEAM PAGE === */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:36px;}
.about-body{font-size:15px;color:var(--m);line-height:1.8;}
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--b);border:1px solid var(--b);margin-top:52px;}
.val-card{background:var(--bg);padding:36px 30px;transition:background .3s;}
.val-card:hover{background:var(--s);}
.val-icon{width:48px;height:48px;border:1px solid var(--b);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:border-color .3s,background .3s;}
.val-icon svg{width:22px;height:22px;stroke:var(--a);transition:stroke .3s;}
.val-card:hover .val-icon{border-color:var(--a);background:var(--a);}
.val-card:hover .val-icon svg{stroke:#1c1c1c;}
.val-title{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:-.2px;margin-bottom:10px;color:var(--t);}
.val-desc{font-size:13px;color:var(--m);line-height:1.65;}
.tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;}
.tm-card{background:var(--s);border:1px solid var(--b);padding:32px;transition:border-color .3s,transform .3s;}
.tm-card:hover{border-color:var(--a);transform:translateY(-3px);}
.tm-avatar{width:64px;height:64px;border-radius:50%;background:var(--ad);border:2px solid var(--a);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:18px;color:var(--a);margin-bottom:18px;}
.tm-dept{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--a);margin-bottom:6px;}
.tm-role{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:-.3px;margin-bottom:12px;color:var(--t);}
.tm-bio{font-size:13px;color:var(--m);line-height:1.7;}
.about-promise{border:1px solid var(--b);background:var(--s);padding:60px;text-align:center;position:relative;overflow:hidden;}
.about-promise::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--a);}
.promise-label{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--a);margin-bottom:22px;}
.promise-quote{font-family:var(--mono);font-size:15px;line-height:1.8;color:var(--t);font-style:italic;max-width:760px;margin:0 auto;}

/* === RESPONSIVE ADDITIONS === */
@media(max-width:900px){
  .sf-mid{grid-template-columns:1fr 1fr;}
  .sf-off-grid{grid-template-columns:1fr 1fr;}
  .bl-grid{grid-template-columns:1fr 1fr;}
  .bl-tabs-wrap{padding:0 22px;}
  .cap-grid{grid-template-columns:1fr 1fr;}
  .phases-grid{grid-template-columns:1fr 1fr;}
  .phases-connector{display:none;}
  .svc-proj-grid{grid-template-columns:1fr;}
  .svc-context-grid{grid-template-columns:1fr;}
  .about-split{grid-template-columns:1fr;}
  .val-grid{grid-template-columns:1fr 1fr;}
  .tm-grid{grid-template-columns:1fr 1fr;}
  .about-promise{padding:36px 24px;}
}
@media(max-width:600px){
  .sf-mid{grid-template-columns:1fr;}
  .sf-off-grid{grid-template-columns:1fr;}
  .sf-top{flex-direction:column;align-items:flex-start;}
  .bl-grid{grid-template-columns:1fr;}
  .cap-grid{grid-template-columns:1fr;}
  .phases-grid{grid-template-columns:1fr;}
  .val-grid{grid-template-columns:1fr;}
  .tm-grid{grid-template-columns:1fr;}
}


/* === INDIVIDUAL BLOG POST PAGE === */
.bp-hero{background:var(--s);border-bottom:1px solid var(--b);padding-top:var(--nh);}
.bp-hero-inner{max-width:800px;margin:0 auto;padding:72px 40px 56px;}
.bp-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.bp-title{font-family:var(--display);font-size:clamp(28px,4.5vw,52px);font-weight:700;line-height:1.1;letter-spacing:-1.5px;margin-bottom:20px;color:var(--t);}
.bp-lede{font-size:17px;color:var(--m);line-height:1.75;max-width:680px;}
.bp-img-wrap{max-width:1000px;margin:0 auto;padding:0 40px;}
.bp-img-wrap svg{width:100%;height:auto;display:block;border-radius:4px;}
.bp-body{padding:72px 40px 40px;}
.bp-content{max-width:800px;margin:0 auto;}
.bp-sec-h{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.5px;margin-bottom:16px;margin-top:52px;color:var(--t);}
.bp-sec-h:first-child{margin-top:0;}
.bp-sec-body{font-size:16px;color:var(--m);line-height:1.85;}
.bp-cta-inline{margin-top:64px;border-top:2px solid var(--a);padding-top:40px;text-align:center;}
.bp-cta-label{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--a);margin-bottom:14px;}
.bp-cta-text{font-size:15px;color:var(--m);line-height:1.7;margin-bottom:26px;max-width:500px;margin-left:auto;margin-right:auto;}
.bl-card{cursor:pointer;}
@media(max-width:900px){.bp-hero-inner{padding:52px 22px 40px;}.bp-img-wrap{padding:0 22px;}.bp-body{padding:48px 22px;}}


/* ===== FOOTER — 4-column redesign ===== */
.site-footer{background:var(--bg);border-top:1px solid var(--b);}
.sf-inner{max-width:1200px;margin:0 auto;padding:72px 40px 36px;}
.sf-top{border-bottom:1px solid var(--b);padding-bottom:36px;margin-bottom:48px;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.sf-logo{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-.5px;cursor:pointer;}
.sf-logo em{color:var(--a);font-style:normal;}
.sf-email{font-family:var(--mono);font-size:3.75rem;font-weight:700;color:var(--t);letter-spacing:-.5px;transition:color .2s;line-height:1.1;word-break:break-all;}
.sf-email:hover{color:var(--a);}
.sf-mid{display:grid;grid-template-columns:2fr 1fr 1fr 1.6fr;gap:48px;padding-bottom:48px;border-bottom:1px solid var(--b);}
.sf-col-brand .sf-tagline{font-family:var(--mono);font-size:17px;font-weight:700;margin-bottom:10px;color:var(--t);}
.sf-col-brand .sf-tag-sub{font-size:14px;color:var(--m);line-height:1.75;margin-bottom:22px;}
.sf-col-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--a);margin-bottom:16px;}
.sf-col-val{font-family:var(--mono);font-size:12px;color:var(--m);line-height:1.9;}
.sf-col-val a{color:var(--m);transition:color .2s;}.sf-col-val a:hover{color:var(--a);}
.sf-links{list-style:none;display:flex;flex-direction:column;gap:10px;}
.sf-links a{font-size:14px;color:var(--m);cursor:pointer;transition:color .2s;}
.sf-links a:hover{color:var(--t);}
.sf-social{display:flex;gap:10px;align-items:center;}
.sf-soc-icon{width:36px;height:36px;border:1px solid var(--b);display:flex;align-items:center;justify-content:center;color:var(--m);transition:border-color .2s,color .2s;}
.sf-soc-icon:hover{border-color:var(--a);color:var(--a);}
.sf-soc-icon svg{width:16px;height:16px;}
.sf-bot{display:flex;align-items:center;justify-content:space-between;padding:28px 0 18px;flex-wrap:wrap;gap:14px;}
.sf-nav-links{display:flex;gap:24px;flex-wrap:wrap;}
.sf-nav-links a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--f);cursor:pointer;transition:color .2s;}
.sf-nav-links a:hover{color:var(--m);}
.sf-engine{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:12px 24px;background:var(--a);color:#000;border:none;cursor:pointer;font-weight:700;transition:opacity .2s;}
.sf-engine:hover{opacity:.84;}
.sf-copy{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:#abbc3b;padding-top:14px;border-top:1px solid var(--b);}
@media(max-width:1100px){.sf-mid{grid-template-columns:1fr 1fr;gap:36px;}}
@media(max-width:600px){.sf-mid{grid-template-columns:1fr;}.sf-top{flex-direction:column;align-items:flex-start;}}


/* ===== EMAIL COPY INTERACTION ===== */
.sf-email-wrap{position:relative;display:inline-block;cursor:pointer;}
.sf-email{font-family:var(--mono);font-size:3.75rem;font-weight:700;color:var(--t);letter-spacing:-.5px;line-height:1.1;cursor:pointer;transition:color .2s;word-break:break-all;display:block;}
.sf-email:hover,.sf-email:focus{color:var(--a);outline:none;}
.sf-email-copy-hint{position:absolute;bottom:-42px;right:0;background:#ffffff;color:#111111;font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:7px 16px;border-radius:20px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s;display:flex;align-items:center;gap:6px;box-shadow:0 4px 20px rgba(0,0,0,.5);}
.sf-email-wrap:hover .sf-email-copy-hint,.sf-email-wrap:focus-within .sf-email-copy-hint{opacity:1;}
[data-theme="light"] .sf-email-copy-hint{background:#1c1c1c;color:#ffffff;box-shadow:0 4px 20px rgba(0,0,0,.2);}
.sf-email-copied .sf-email-copy-hint{background:var(--a);color:#000;font-weight:700;}
[data-theme="light"] .sf-email-copy-hint{background:#1c1c1c;}


/* === SPACE GROTESK — display headings === */
.wk-h1,.sh2,.pf-h2,.bp-title,.hero-h,.promise-quote,
.cap-title,.phase-title,.bl-title,.about-split h2,
.sf-tagline,.svc-stars,
.pa-title,.ct-info-h{
  font-family:var(--display);
}
/* Keep monospace for labels, nav, CTA, code-style elements */
/* (already set inline on those elements) */



/* ── FEATURE UPDATES ── */
/* Section titles uppercase */
.sh2,.wk-h1,.pf-h2,.bp-title,.ctah{text-transform:uppercase!important;}
/* Body text 1.125em */
.ctasb,.pf-sub,.ssub,.about-body,.bp-sec-body,.svc-context-body,.val-desc,.bl-excerpt,.phase-desc,.cap-body{font-size:1.125em!important;line-height:1.75!important;}
/* PA-CL gap reduction */
.pa-outer{margin-bottom:0!important;}



/* ══ WP RESET ══ */
*,*::before,*::after{box-sizing:border-box;}
#wpadminbar{display:none!important;}html{margin-top:0!important;}
body{margin:0!important;padding:0!important;font-size:17px!important;}
h1,h2,h3,h4,h5,h6{margin:0!important;padding:0!important;font-weight:700;}
p{margin:0!important;}ul,ol{list-style:none!important;margin:0!important;padding:0!important;}
a{text-decoration:none!important;color:inherit;}
button{font-family:inherit;}input,textarea,select{font-family:inherit;}

/* Logo toggle */
.logo-dmark{fill:#abbc3b!important;transition:fill .4s;}
#logo-dmark-fill,#logo-digital{fill:var(--t)!important;transition:fill .4s!important;}
html[data-theme="dark"] #logo-dmark-fill,html[data-theme="dark"] #logo-digital{fill:#e8e8e8!important;}
html[data-theme="light"] #logo-dmark-fill,html[data-theme="light"] #logo-digital{fill:#1c1c1c!important;}

/* Nav fixed */
nav{position:fixed!important;top:0!important;left:0!important;right:0!important;height:var(--nh)!important;z-index:900!important;}

/* Z-index hierarchy */
#mp{position:fixed!important;top:0!important;right:0!important;bottom:0!important;width:min(460px,100vw)!important;z-index:962!important;background:var(--s)!important;border-left:3px solid var(--a)!important;display:flex!important;flex-direction:column!important;overflow-y:auto!important;transform:translateX(100%)!important;transition:transform .65s cubic-bezier(.16,1,.3,1)!important;}
#mp.open{transform:translateX(0)!important;}
#ham{position:relative;z-index:963!important;}
#bd{position:fixed!important;inset:0!important;z-index:950!important;background:rgba(0,0,0,.7)!important;opacity:0!important;pointer-events:none!important;transition:opacity .4s!important;}
#bd.open{opacity:1!important;pointer-events:all!important;}

/* Burger menu panel links */
#mp a.mpi{display:flex!important;align-items:baseline!important;gap:16px!important;padding:16px 0!important;border-bottom:1px solid var(--b)!important;color:var(--t)!important;text-decoration:none!important;opacity:1!important;transform:none!important;}
#mp a.mpi:hover{color:var(--a)!important;}
#mp a.mpi:hover .mpl{color:var(--a)!important;letter-spacing:-.5px!important;}
.mpl{font-family:var(--mono)!important;font-size:clamp(16px,2.5vw,26px)!important;font-weight:700!important;letter-spacing:-1px!important;transition:color .2s,letter-spacing .3s!important;}
.mp-nav{padding:calc(var(--nh) + 40px) 40px 40px!important;display:flex!important;flex-direction:column!important;}
.mpn{font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.1em!important;color:var(--f)!important;flex-shrink:0!important;}
.mp-close{position:absolute!important;top:22px!important;right:28px!important;background:none!important;border:none!important;color:var(--m)!important;font-size:20px!important;cursor:pointer!important;z-index:10!important;padding:8px!important;line-height:1!important;}
.mp-close:hover,.mp-close:hover{color:var(--a)!important;}
.mp-foot{padding:28px 40px!important;border-top:1px solid var(--b)!important;margin-top:auto!important;}
.mpc{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:26px 36px;border-bottom:1px solid var(--b);cursor:pointer;flex-shrink:0;}

/* Ham X animation */
nav.mopen .ham-ico span:nth-child(1){transform:translateY(8px) rotate(45deg);}
nav.mopen .ham-ico span:nth-child(2){opacity:0;transform:scaleX(0);}
nav.mopen .ham-ico span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* 1. LIGHT BG: #f4f4ee → #f2f2f2 */
[data-theme="light"]{--bg:#f2f2f2!important;}

/* 2. PRE-FOOTER center aligned */
.pre-footer-inner{text-align:center!important;}
.pf-sub{text-align:center!important;margin:24px auto 36px!important;max-width:560px!important;}
.pre-footer-inner .btn-cta{margin:0 auto 16px!important;display:inline-block!important;}
.pre-footer-inner .pf-h2{text-align:center!important;}

/* 3. Social icons — hide LinkedIn */
.sf-soc-icon[aria-label="LinkedIn"]{display:none!important;}
a.sf-soc-icon[aria-label="LinkedIn"]{display:none!important;}

/* 4. Cookie modal — 900px */



/* 5. SERVICE CARD REDESIGN (.sc → Atomic style) */
.sc{background:var(--s)!important;padding:36px 32px!important;cursor:pointer!important;position:relative!important;overflow:hidden!important;border:1px solid var(--b)!important;border-left:3px solid transparent!important;transition:background .35s,border-left-color .35s,box-shadow .35s!important;display:flex!important;flex-direction:column!important;gap:0!important;}
.sc:hover{background:var(--s2)!important;border-left-color:var(--a)!important;box-shadow:0 8px 32px rgba(171,188,59,.08)!important;}
.sc::before{display:none!important;}
.sn{position:absolute!important;top:20px!important;right:24px!important;font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.12em!important;color:var(--f)!important;}

.stg{font-family:var(--mono)!important;font-size:10px!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:var(--a)!important;margin-bottom:8px!important;}
.snm{font-family:var(--display)!important;font-size:clamp(20px,2.2vw,28px)!important;font-weight:700!important;letter-spacing:-1px!important;color:var(--t)!important;margin-bottom:12px!important;text-transform:uppercase!important;}
.sd{font-size:15px!important;color:var(--m)!important;line-height:1.7!important;margin-bottom:18px!important;flex:1!important;}
.spl{display:flex!important;flex-wrap:wrap!important;gap:7px!important;margin-bottom:24px!important;}
.pl{font-family:var(--mono)!important;font-size:10px!important;letter-spacing:.06em!important;padding:4px 11px!important;border:1px solid var(--b)!important;border-radius:20px!important;color:var(--m)!important;}
.sc:hover .pl{border-color:rgba(171,188,59,.3)!important;}
.slk{display:flex!important;align-items:center!important;gap:8px!important;font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--a)!important;margin-top:auto!important;transition:gap .25s!important;}
.sc:hover .slk{gap:13px!important;}

/* 6. CAP-CARD atomic style + border radius */
.cap-card{border-left:3px solid transparent!important;border-radius:0!important;transition:background .3s,border-left-color .3s,box-shadow .3s!important;}
.cap-card::before{display:none!important;}
.cap-card:hover{border-left-color:var(--a)!important;box-shadow:0 6px 24px rgba(171,188,59,.08)!important;border-color:var(--b)!important;}
.cap-num{position:absolute!important;top:16px!important;right:20px!important;font-size:10px!important;}
.cap-icon-wrap{background:var(--a)!important;border:none!important;border-radius:6px!important;}
.cap-icon-wrap svg{stroke:#111!important;}
.cap-card:hover .cap-icon-wrap{transform:scale(1.05)!important;background:var(--a)!important;}
.cap-card:hover .cap-icon-wrap svg{stroke:#111!important;}

/* 7. Cap-desc / sd same size */
.cap-desc,.sd,.svc-context-body{font-size:15px!important;line-height:1.75!important;color:var(--m)!important;}

/* 8. Bigger fonts */
body.dd-body{font-size:17px!important;}
.hh1{font-size:clamp(44px,6.5vw,88px)!important;letter-spacing:-3px!important;line-height:1.0!important;}
.sh2{font-size:clamp(28px,3.8vw,52px)!important;}
.ssub{font-size:clamp(16px,1.4vw,20px)!important;line-height:1.75!important;}
.snm{font-size:clamp(22px,2.5vw,30px)!important;}

/* Mobile fonts */
@media(max-width:768px){
  body.dd-body{font-size:16px!important;}
  .hh1{font-size:clamp(38px,10vw,62px)!important;letter-spacing:-2px!important;}
  .sh2{font-size:clamp(24px,6.5vw,36px)!important;}
  .ssub{font-size:clamp(15px,3.5vw,18px)!important;}
  .sg{grid-template-columns:1fr!important;}
  .sec{padding:72px 22px!important;}
}
@media(max-width:480px){
  .hh1{font-size:clamp(34px,11vw,52px)!important;letter-spacing:-1.5px!important;}
  .sh2{font-size:clamp(22px,7.5vw,32px)!important;}
}

/* 9. FW SECTION */
.fw-sec{overflow:visible!important;}
.fw-wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:center;}
.fw-right{display:flex;justify-content:flex-end;align-items:center;}
.fw-stack{position:relative;width:720px;height:520px;flex-shrink:0;}
.fw-card{position:absolute;inset:0;border-radius:10px;overflow:hidden;border:1px solid var(--b);box-shadow:0 24px 80px rgba(0,0,0,.6);transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .7s,box-shadow .4s;cursor:pointer;}
.fw-card[data-p="0"]{transform:translate(0,0) skew(0deg,4deg);opacity:1;z-index:4;}
.fw-card[data-p="1"]{transform:translate(36px,-28px) skew(0deg,4deg);opacity:.72;z-index:3;}
.fw-card[data-p="2"]{transform:translate(72px,-56px) skew(0deg,4deg);opacity:.42;z-index:2;}
.fw-card[data-p="3"]{transform:translate(108px,-84px) skew(0deg,4deg);opacity:.18;z-index:1;}
.fw-card[data-p="0"]:hover{box-shadow:0 32px 100px rgba(171,188,59,.2),0 0 0 1px var(--ag);}
.fw-img-wrap{width:100%;height:100%;position:relative;}
.fw-img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.fw-fallback{width:100%;height:100%;display:none;flex-direction:column;}
.fw-fallback .fw-site{width:100%;height:100%;display:flex;flex-direction:column;}
.fw-site-bar{display:flex;align-items:center;gap:6px;padding:9px 14px;background:rgba(0,0,0,.5);border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.fw-site-bar span{width:8px;height:8px;border-radius:50%;}
.fw-site-bar span:nth-child(1){background:#ff5f56;}
.fw-site-bar span:nth-child(2){background:#ffbd2e;}
.fw-site-bar span:nth-child(3){background:#27c93f;}
.fw-url{flex:1;background:rgba(255,255,255,.08);border-radius:4px;height:18px;margin:0 8px;display:flex;align-items:center;padding:0 8px;font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.4);letter-spacing:.05em;}
.fw-fallback .fw-hero{flex:1;display:flex;align-items:center;padding:24px 28px;}
.fw-hero-tag{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px;}
.fw-hero-h{font-family:var(--display);font-weight:900;line-height:.95;margin-bottom:14px;}
.fw-stats{display:flex;gap:20px;padding:14px 20px;border-top:1px solid rgba(255,255,255,.07);flex-shrink:0;}
.fw-stat-n{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--a);}
.fw-stat-l{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:rgba(255,255,255,.4);text-transform:uppercase;}
.fw-lbl{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.88);backdrop-filter:blur(8px);padding:12px 20px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--a);transform:translateY(100%);transition:transform .3s cubic-bezier(.16,1,.3,1);}
.fw-card:hover .fw-lbl{transform:translateY(0);}
@media(max-width:1100px){.fw-wrap{grid-template-columns:1fr;gap:32px;}.fw-right{justify-content:center;}.fw-stack{width:100%;max-width:100%;height:320px;}}
@media(max-width:600px){.fw-stack{height:240px;}}

/* 10. BRAND BOX — white SVG, green on hover + glow + zoom */


.brand-box svg{width:80px!important;height:40px!important;color:rgba(255,255,255,.75)!important;fill:rgba(255,255,255,.75)!important;stroke:rgba(255,255,255,.75)!important;transition:filter .3s,color .3s!important;}
.brand-box:hover svg{filter:drop-shadow(0 0 8px rgba(171,188,59,.6))!important;color:var(--a)!important;fill:var(--a)!important;stroke:var(--a)!important;}

.brand-box:hover 

/* 11. WHY CHOOSE — progress bar style */
.cw{display:block!important;background:transparent!important;border:none!important;margin-top:48px!important;}
.cc{background:transparent!important;border:none!important;padding:0!important;margin-bottom:0!important;}
.cc.alt .ch{color:var(--a)!important;}
.ch{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--m);margin-bottom:24px;padding-bottom:0;border-bottom:none;}
.cr{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid var(--b);gap:16px;}
.cl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--m);min-width:160px;flex-shrink:0;}
.cv{display:flex;align-items:center;gap:10px;flex:1;}
.cv-bar-wrap{flex:1;height:6px;background:var(--s2);border-radius:3px;overflow:hidden;}
.cv-bar{height:100%;border-radius:3px;transition:width 1s cubic-bezier(.16,1,.3,1);}
.cv-val{font-family:var(--mono);font-weight:700;font-size:12px;white-space:nowrap;min-width:60px;text-align:right;}
.good .cv-bar{background:var(--a);}
.bad .cv-bar{background:rgba(255,95,86,.5);}
.good .cv-val{color:var(--a);}
.bad .cv-val{color:rgba(255,95,86,.8);}
.cw-legend{display:flex;gap:24px;margin-bottom:32px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;}
.cw-legend-item{display:flex;align-items:center;gap:8px;color:var(--m);}
.cw-legend-dot{width:10px;height:10px;border-radius:50%;}

/* CC cookie */






































@media(max-width:680px){}

/* ── FEATURED WORK — image file bg, 720×520 ─────────────────────── */
.fw-sec { overflow:visible!important; }
.fw-wrap { display:grid; grid-template-columns:1fr 1.4fr; gap:60px; align-items:center; }
.fw-left .ssub { margin-top:14px; }
.fw-right { display:flex; justify-content:flex-end; align-items:center; }
.fw-stack { position:relative; width:720px; height:520px; flex-shrink:0; }
.fw-card {
  position:absolute; inset:0;
  border-radius:10px; overflow:hidden;
  border:1px solid var(--b);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  transition:transform .85s cubic-bezier(.16,1,.3,1), opacity .7s, box-shadow .4s;
  cursor:pointer;
}
.fw-card[data-p="0"]{ transform:translate(0,0) skew(0deg,4deg); opacity:1; z-index:4; }
.fw-card[data-p="1"]{ transform:translate(32px,-32px) skew(0deg,4deg); opacity:.72; z-index:3; }
.fw-card[data-p="2"]{ transform:translate(64px,-64px) skew(0deg,4deg); opacity:.42; z-index:2; }
.fw-card[data-p="3"]{ transform:translate(96px,-96px) skew(0deg,4deg); opacity:.18; z-index:1; }
.fw-card[data-p="0"]:hover{
  box-shadow:0 28px 90px rgba(171,188,59,.18), 0 0 0 1px var(--ag)!important;
}
/* Image fills the entire card */
.fw-img {
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  display:block;
}
/* Fallback gradient shown if no image */
.fw-fallback {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
}
.fw-fallback-url { font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--a); }
.fw-fallback-h {
  font-family:var(--display); font-size:clamp(22px,3vw,36px);
  font-weight:700; color:#fff; letter-spacing:-1px;
  text-align:center; line-height:1.15;
}
.fw-fallback-tag { font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--m); }
/* Hover label */
.fw-lbl {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(0,0,0,.88); backdrop-filter:blur(8px);
  padding:13px 20px;
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; color:var(--a);
  transform:translateY(100%); transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.fw-card:hover .fw-lbl { transform:translateY(0); }
@media(max-width:1100px){
  .fw-wrap{ grid-template-columns:1fr; gap:40px; }
  .fw-right{ justify-content:center; }
  .fw-stack{ width:100%; max-width:520px; height:360px; }
  .fw-card[data-p="1"]{ transform:translate(22px,-22px) skew(0deg,4deg); }
  .fw-card[data-p="2"]{ transform:translate(44px,-44px) skew(0deg,4deg); }
  .fw-card[data-p="3"]{ transform:translate(66px,-66px) skew(0deg,4deg); }
}
@media(max-width:600px){
  .fw-stack{ height:260px; }
  .fw-card[data-p="1"]{ transform:translate(16px,-16px) skew(0deg,3deg); }
  .fw-card[data-p="2"]{ transform:translate(32px,-32px) skew(0deg,3deg); }
  .fw-card[data-p="3"]{ transform:translate(48px,-48px) skew(0deg,3deg); }
}

/* ── Pre-footer — center align, margins ──────────────────────── */
.pre-footer-inner { text-align:center!important; }
.pf-sub {
  text-align:center!important;
  margin:24px auto 36px!important;
  max-width:520px!important;
  font-size:1.125em!important;
}
.pre-footer-inner .btn-cta {
  margin:0 auto 0!important;
  display:inline-block!important;
}

/* ── Light mode bg fix ──────────────────────────────────────── */
[data-theme="light"] { --bg:#f2f2f2!important; }

/* ── Hide LinkedIn sitewide ────────────────────────────────── */
.sf-soc-icon[aria-label="LinkedIn"],
a[aria-label="LinkedIn"] { display:none!important; }

/* ── Cookie modal 900px ─────────────────────────────────────── */













/* ── Brand boxes — image logos, white→green on hover ─────────── */
.brand-box {
  display:flex!important; flex-direction:column!important;
  align-items:center!important; justify-content:center!important;
  padding:18px 24px!important; border:1px solid var(--b)!important;
  border-radius:6px!important; cursor:pointer!important;
  transition:border-color .3s, box-shadow .3s, transform .3s!important;
  min-width:130px!important; min-height:80px!important;
}
.brand-box:hover {
  border-color:var(--a)!important;
  box-shadow:0 0 20px rgba(171,188,59,.22), 0 0 40px rgba(171,188,59,.08)!important;
  
}
.brand-box img {
  width:90px!important; height:44px!important;
  object-fit:contain!important;
  filter:brightness(0) invert(1)!important; /* white by default */
  transition:filter .3s!important;
}
.brand-box:hover img {
  filter:brightness(0) saturate(100%) invert(67%) sepia(50%) saturate(400%) hue-rotate(40deg) brightness(95%) contrast(100%)!important; /* #abbc3b */
}
.brand-box svg {
  width:80px!important; height:40px!important;
  color:rgba(255,255,255,.8)!important;
  fill:rgba(255,255,255,.8)!important;
  stroke:rgba(255,255,255,.8)!important;
  transition:filter .3s, color .3s!important;
}
.brand-box:hover svg {
  filter:drop-shadow(0 0 8px rgba(171,188,59,.6))!important;
  color:var(--a)!important; fill:var(--a)!important; stroke:var(--a)!important;
}
.brand-box-name {
  font-family:var(--mono)!important; font-size:9px!important;
  letter-spacing:.15em!important; text-transform:uppercase!important;
  color:var(--f)!important; margin-top:8px!important; transition:color .3s!important;
}
.brand-box:hover .brand-box-name { color:var(--a)!important; }


/* ══════════════════════════════════════════════════════════════
   MEGA UPDATE — all fixes applied cleanly
   ══════════════════════════════════════════════════════════════ */

/* ── 1. FEATURED WORK — browser chrome + 720x520 ─────────────── */
.fw-sec { overflow:visible!important; }
.fw-wrap { display:grid; grid-template-columns:1fr 1.35fr; gap:60px; align-items:center; }
.fw-left .ssub { margin-top:14px; }
.fw-right { display:flex; justify-content:flex-end; align-items:center; }
.fw-stack { position:relative; width:720px; height:520px; flex-shrink:0; }
.fw-card {
  position:absolute; inset:0;
  border-radius:10px; overflow:hidden;
  border:1px solid var(--b);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  transition:transform .85s cubic-bezier(.16,1,.3,1), opacity .7s, box-shadow .4s;
  cursor:pointer; display:flex; flex-direction:column;
}
.fw-card[data-p="0"]{ transform:translate(0,0) skew(0deg,3.5deg); opacity:1; z-index:4; }
.fw-card[data-p="1"]{ transform:translate(30px,-30px) skew(0deg,3.5deg); opacity:.72; z-index:3; }
.fw-card[data-p="2"]{ transform:translate(60px,-60px) skew(0deg,3.5deg); opacity:.42; z-index:2; }
.fw-card[data-p="3"]{ transform:translate(90px,-90px) skew(0deg,3.5deg); opacity:.18; z-index:1; }
.fw-card[data-p="0"]:hover { box-shadow:0 28px 90px rgba(171,188,59,.18),0 0 0 1px var(--ag)!important; }

/* Browser chrome */
.fw-browser { width:100%; height:100%; display:flex; flex-direction:column; background:#1a1a1a; }
.fw-browser-bar {
  display:flex; align-items:center; gap:8px;
  padding:9px 14px; background:#222; border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.fw-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.fw-dot-r { background:#ff5f56; }
.fw-dot-y { background:#ffbd2e; }
.fw-dot-g { background:#27c93f; }
.fw-addr-bar {
  flex:1; background:rgba(255,255,255,.08); border-radius:5px;
  height:22px; display:flex; align-items:center; gap:6px;
  padding:0 10px; font-family:var(--mono); font-size:10px;
  color:rgba(255,255,255,.45); letter-spacing:.02em; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; margin:0 6px;
}
.fw-addr-bar svg { opacity:.5; flex-shrink:0; }
.fw-browser-actions { display:flex; gap:5px; }
.fw-bact { width:18px; height:14px; background:rgba(255,255,255,.07); border-radius:2px; }
.fw-browser-body { flex:1; position:relative; overflow:hidden; }
.fw-img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.fw-fallback {
  width:100%; height:100%; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
.fw-fallback-url { font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--a); }
.fw-fallback-h {
  font-family:var(--display); font-size:clamp(22px,3vw,36px);
  font-weight:700; color:#fff; letter-spacing:-1px; text-align:center; line-height:1.15;
}
.fw-fallback-tag { font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--m); }
.fw-lbl {
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(0,0,0,.9); backdrop-filter:blur(8px);
  padding:12px 18px; font-family:var(--mono); font-size:10px;
  letter-spacing:.15em; color:var(--a);
  transform:translateY(100%); transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.fw-card:hover .fw-lbl { transform:translateY(0); }
@media(max-width:1100px){
  .fw-wrap{ grid-template-columns:1fr; gap:40px; }
  .fw-right{ justify-content:center; }
  .fw-stack{ width:100%; max-width:560px; height:390px; }
  .fw-card[data-p="1"]{ transform:translate(22px,-22px) skew(0deg,3.5deg); }
  .fw-card[data-p="2"]{ transform:translate(44px,-44px) skew(0deg,3.5deg); }
  .fw-card[data-p="3"]{ transform:translate(66px,-66px) skew(0deg,3.5deg); }
}
@media(max-width:600px){
  .fw-stack{ height:260px; max-width:100%; }
  .fw-card[data-p="1"]{ transform:translate(16px,-16px) skew(0deg,2.5deg); }
  .fw-card[data-p="2"]{ transform:translate(32px,-32px) skew(0deg,2.5deg); }
  .fw-card[data-p="3"]{ transform:translate(48px,-48px) skew(0deg,2.5deg); }
}

/* ── 2. BRAND BOX — dark on light, white on dark ──────────────── */
.brand-box svg, .brand-box img {
  color:rgba(255,255,255,.75)!important;
  fill:rgba(255,255,255,.75)!important;
  stroke:rgba(255,255,255,.75)!important;
  filter:none!important;
  transition:filter .3s, color .3s!important;
}
[data-theme="light"] .brand-box svg,
[data-theme="light"] .brand-box img {
  color:rgba(15,15,15,.65)!important;
  fill:rgba(15,15,15,.65)!important;
  stroke:rgba(15,15,15,.65)!important;
  filter:brightness(0) opacity(.65)!important;
}
.brand-box:hover svg, .brand-box:hover img {
  filter:drop-shadow(0 0 8px rgba(171,188,59,.6))!important;
  color:var(--a)!important; fill:var(--a)!important; stroke:var(--a)!important;
}
[data-theme="light"] .brand-box:hover svg,
[data-theme="light"] .brand-box:hover img {
  filter:drop-shadow(0 0 8px rgba(171,188,59,.5)) brightness(0) saturate(100%) invert(67%) sepia(60%) saturate(400%) hue-rotate(38deg) brightness(95%)!important;
}

/* ── 3. BRANDS — mobile responsive, 4-5 per row ───────────────── */

@media(max-width:600px){
  
  .brand-box { min-width:calc(20% - 10px)!important; padding:12px 10px!important; }
}

/* ── 4. PA SLIDE — zoom + glow on hover ───────────────────────── */
.pa-slide { transition:border-color .3s,transform .3s,box-shadow .3s,opacity .4s!important; }
.pa-slide.pa-active:hover {
  border-color:var(--ag)!important;
  transform:translateY(-5px)!important;
  box-shadow:0 12px 48px rgba(171,188,59,.16), 0 0 0 1px var(--ag)!important;
}
.pa-slide.pa-active:hover .pa-title { color:var(--a)!important; }
.pa-img { overflow:hidden; }
.pa-img svg, .pa-img img { transition:transform .5s cubic-bezier(.16,1,.3,1)!important; }
.pa-slide.pa-active:hover .pa-img svg,
.pa-slide.pa-active:hover .pa-img img { transform:scale(1.04)!important; }

/* ── 5. WHY CHOOSE — Atomic Labs style progress bars ──────────── */



.why-metric-row {}










@media(max-width:800px){
  
}

/* ── 6. BLACK → #050505 ─────────────────────────────────────────── */
:root { --bg:#050505!important; }
body.dd-body { background:#050505!important; }
.sc.rv { background:#050505!important; }
[data-theme="dark"] .sc { background:#050505!important; }
[data-theme="light"] .sc { background:#f2f2f2!important; }
[data-theme="light"] { --bg:#f2f2f2!important; }

/* ── 7. MODAL 900px ──────────────────────────────────────────────── */










/* ── Pre-footer center ───────────────────────────────────────────── */
.pre-footer-inner { text-align:center!important; }
.pf-sub { text-align:center!important; margin:24px auto 36px!important; max-width:520px!important; }
.pre-footer-inner .btn-cta { margin:0 auto!important; display:inline-block!important; }

/* ── Social icons — LinkedIn hidden ─────────────────────────────── */
.sf-soc-icon[aria-label="LinkedIn"],
a[aria-label="LinkedIn"] { display:none!important; }

/* ── bg #f4f4ee → #f2f2f2 ───────────────────────────────────────── */
[data-theme="light"] { --bg:#f2f2f2!important; }

/* ══════════════════════════════════════════════════════════════
   SINGLE BLOG POST — single.php styles
   ══════════════════════════════════════════════════════════════ */
.bp-wrap { padding-top:var(--nh); }
.bp-hero { padding:60px 0 40px; }
.bp-meta-top { display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.bp-back {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--m);
  transition:color .2s;
}
.bp-back:hover { color:var(--a)!important; }
.bp-cat-badge {
  font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--a);
  padding:4px 10px; border:1px solid var(--ag); border-radius:20px;
}
.bp-title {
  font-family:var(--display)!important;
  font-size:clamp(32px,5.5vw,68px)!important;
  font-weight:700!important; letter-spacing:-2px!important;
  line-height:1.08!important; color:var(--t)!important;
  margin-bottom:28px!important; text-transform:uppercase!important;
}
.bp-byline { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.bp-author { display:flex; align-items:center; gap:12px; }
.bp-author-avatar img { width:40px; height:40px; border-radius:50%; border:2px solid var(--a); }
.bp-author-name { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--t); letter-spacing:.05em; }
.bp-author-role { font-family:var(--mono); font-size:10px; color:var(--m); letter-spacing:.1em; margin-top:2px; }
.bp-post-meta { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--m); letter-spacing:.08em; }
.bp-sep { color:var(--f); }

.bp-img-wrap { border-radius:8px; overflow:hidden; max-height:500px; }
.bp-feat-img { width:100%; height:100%; object-fit:cover; display:block; }

/* Layout */
.bp-layout { display:grid; grid-template-columns:1fr 300px; gap:60px; align-items:start; }
.bp-sidebar { position:sticky; top:calc(var(--nh) + 24px); }

/* Prose */
.bp-prose { font-size:17px!important; line-height:1.85!important; color:var(--m)!important; }
.bp-prose h2 {
  font-family:var(--display)!important; font-size:clamp(22px,2.5vw,30px)!important;
  font-weight:700!important; letter-spacing:-1px!important; color:var(--t)!important;
  margin:48px 0 16px!important; text-transform:uppercase!important;
}
.bp-prose h3 {
  font-family:var(--mono)!important; font-size:14px!important; font-weight:700!important;
  letter-spacing:.1em!important; text-transform:uppercase!important;
  color:var(--t)!important; margin:32px 0 12px!important;
}
.bp-prose p { margin:0 0 20px!important; }
.bp-prose a { color:var(--a)!important; text-decoration:underline!important; }
.bp-prose strong { color:var(--t)!important; font-weight:700!important; }
.bp-prose ul,
.bp-prose ol { list-style:disc!important; padding-left:24px!important; margin:0 0 20px!important; }
.bp-prose li { margin-bottom:8px!important; color:var(--m)!important; }
.bp-prose blockquote {
  border-left:3px solid var(--a)!important; padding:16px 24px!important;
  margin:32px 0!important; background:var(--s)!important;
  font-style:italic!important; color:var(--t)!important;
}
.bp-prose pre,
.bp-prose code {
  font-family:var(--mono)!important; font-size:13px!important;
  background:var(--s2)!important; border:1px solid var(--b)!important;
  padding:3px 8px!important; border-radius:4px!important; color:var(--a)!important;
}
.bp-prose pre { padding:20px 24px!important; overflow-x:auto!important; margin:24px 0!important; }
.bp-prose img { max-width:100%; border-radius:6px; margin:24px 0; }

/* Tags */
.bp-tags { display:flex; flex-wrap:wrap; gap:8px; margin:40px 0 32px; }
/* Share */
.bp-share { display:flex; align-items:center; gap:14px; padding:24px 0; border-top:1px solid var(--b); }
.bp-share-lbl { font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--m); }
.sf-soc-icon { color:var(--m)!important; transition:color .2s!important; }
.sf-soc-icon svg { width:18px; height:18px; }
.sf-soc-icon:hover { color:var(--a)!important; }

/* Sidebar TOC */
.bp-toc-box {
  background:var(--s); border:1px solid var(--b); border-left:3px solid var(--a);
  padding:22px 20px; border-radius:0;
}
.bp-toc-title { font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--a); margin-bottom:16px; }
.bp-toc-item {
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.04em;
  color:var(--m)!important; padding:6px 0; border-bottom:1px solid var(--b);
  transition:color .2s!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bp-toc-item:last-child { border-bottom:none; }
.bp-toc-d1 { padding-left:12px; opacity:.75; }
.bp-toc-item.active { color:var(--a)!important; }
.bp-toc-item:hover { color:var(--t)!important; }

/* Sidebar CTA */
.bp-cta-box { background:var(--s); border:1px solid var(--b); padding:24px; }
.bp-cta-lbl { font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--a); margin-bottom:10px; }
.bp-cta-h { font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-1px; color:var(--t); margin-bottom:10px; }
.bp-cta-sub { font-size:13px; color:var(--m); line-height:1.65; }

/* Related posts */
.bp-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.bp-related { border-top:1px solid var(--b); padding-top:72px; }

@media(max-width:900px){
  .bp-layout { grid-template-columns:1fr; }
  .bp-sidebar { position:static; }
  .bp-related-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
  .bp-title { letter-spacing:-1.5px!important; }
  .bp-related-grid { grid-template-columns:1fr; }
  .bp-byline { flex-direction:column; align-items:flex-start; }
}


/* ══════════════════════════════════════════════════════════════════
   CLEAN UPDATE — all latest fixes
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Base black #050505 ─────────────────────────────────────── */
:root { --bg:#050505!important; }
body.dd-body,
html[data-theme="dark"] body { background:#050505!important; }
html[data-theme="light"] { --bg:#f2f2f2!important; }
html[data-theme="light"] body { background:#f2f2f2!important; }

/* ── 2. .sc card BG ────────────────────────────────────────────── */
html[data-theme="dark"]  .sc,
.sc.rv { background:#050505!important; }
html[data-theme="light"] .sc { background:#f2f2f2!important; }

/* ── 3. .ssub and .pf-sub — light weight, correct colors ──────── */
.ssub,
.pf-sub {
  font-weight: 300 !important;
}
/* Dark mode */
html[data-theme="dark"] .ssub,
html[data-theme="dark"] .pf-sub { color: #e0e0e0 !important; }
/* Light mode */
html[data-theme="light"] .ssub,
html[data-theme="light"] .pf-sub { color: rgba(28,28,28,.65) !important; }

/* ── 4. Scroll reveal — smooth per-section fade ────────────────── */



/* ── 5. WHY CHOOSE — Atomic Labs 2-col inline 50/50 ───────────── */



.why-metric-row {}










@media(max-width:800px){
  
}

/* ── 6. .si icon — NO border-radius, green border, no default BG ─ */
.si {
  width: 52px !important;
  height: 52px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 1.5px solid var(--a) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
  transition: background .25s, border-color .25s !important;
}
/* Dark mode: green border */
/* Light mode: black border */
/* SVG icon: green in both modes */
.si svg {
  stroke: var(--a) !important;
  fill: none !important;
  width: 22px !important; height: 22px !important;
  transition: stroke .25s !important;
}
/* Hover: green BG, white icon */
.sc:hover .si {
  background: var(--a) !important;
  border-color: var(--a) !important;
}
.sc:hover .si svg { stroke: #111 !important; }

/* ── 7. Brands — 5 per row, 1 line, no wrap ───────────────────── */


.brand-box {
  flex: 1 !important;
  min-width: 0 !important;
  max-width: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 12px !important;
  border: 1px solid var(--b) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: border-color .3s, box-shadow .3s, transform .3s !important;
}
.brand-box:hover {
  border-color: var(--a) !important;
  box-shadow: 0 0 20px rgba(171,188,59,.2) !important;
  
}
/* Brand SVG/img — dark mode: white; light mode: dark */
html[data-theme="dark"]  .brand-box svg,
html[data-theme="dark"]  .brand-box img {
  color: rgba(255,255,255,.7) !important;
  fill: rgba(255,255,255,.7) !important;
  stroke: rgba(255,255,255,.7) !important;
  filter: none !important;
}
html[data-theme="light"] .brand-box svg,
html[data-theme="light"] .brand-box img {
  color: rgba(15,15,15,.6) !important;
  fill: rgba(15,15,15,.6) !important;
  stroke: rgba(15,15,15,.6) !important;
  filter: brightness(0) opacity(.6) !important;
}
.brand-box:hover svg,
.brand-box:hover img {
  filter: drop-shadow(0 0 8px rgba(171,188,59,.55)) !important;
  color: var(--a) !important;
  fill: var(--a) !important;
  stroke: var(--a) !important;
}
.brand-box svg { width:80px!important; height:40px!important; transition:filter .3s,color .3s!important; }
.brand-box-name { font-family:var(--mono)!important; font-size:9px!important; letter-spacing:.12em!important; text-transform:uppercase!important; color:var(--f)!important; margin-top:8px!important; transition:color .3s!important; }
.brand-box:hover .brand-box-name { color:var(--a)!important; }
@media(max-width:600px){
  .brand-box { padding:10px 6px!important; max-width:calc(20% - 8px)!important; }
  .brand-box svg { width:52px!important; height:28px!important; }
  .brand-box-name { font-size:8px!important; }
}

/* ── 8. PA slide — glow + zoom hover ──────────────────────────── */
.pa-slide { transition:border-color .3s,transform .3s,box-shadow .3s,opacity .4s!important; }
.pa-slide.pa-active:hover {
  border-color: var(--ag) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 48px rgba(171,188,59,.16), 0 0 0 1px var(--ag) !important;
}
.pa-slide.pa-active:hover .pa-title { color:var(--a)!important; }
.pa-img { overflow:hidden!important; }
.pa-img svg, .pa-img img { transition:transform .5s cubic-bezier(.16,1,.3,1)!important; }
.pa-slide.pa-active:hover .pa-img svg,
.pa-slide.pa-active:hover .pa-img img { transform:scale(1.04)!important; }

/* ── Light mode: ssub/pf-sub not black ──────────────────────────── */
html[data-theme="light"] .pf-h2,
html[data-theme="light"] h1, html[data-theme="light"] h2,
html[data-theme="light"] h3 { color:#1c1c1c!important; }

/* .sc hover — radial-gradient bottom-left glow */
.sc { position: relative; overflow: hidden; }
.sc::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--ad) 0%, transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s;
}
.sc:hover::after { opacity: 1; }


/* ══════════════════════════════════════════════════════════════
   TARGETED FIXES
   ══════════════════════════════════════════════════════════════ */

/* 

/* .why-bars-col — better fonts, spacing, padding */













/* 





/* .sc radial-gradient FIX — keep inside bounds, use z-index trick */
/* Remove overflow:hidden override so ::after shows */
.sc {
  overflow: visible !important;
}
/* Guard inner content above gradient */
.sc > * { position: relative; z-index: 1; }
/* Gradient via ::after — positioned within bounds */
.sc::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 280px !important;
  height: 280px !important;
  background: radial-gradient(circle at bottom left, var(--ad) 0%, transparent 70%) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .5s !important;
  z-index: 0 !important;
  border-radius: inherit !important;
}
.sc:hover::after { opacity: 1 !important; }

/* Clip the section container instead so cards don't bleed */
.sg { overflow: hidden; }

/* .si — uniform border color, no radius */
.si {
  width: 52px !important;
  height: 52px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
  transition: background .25s, border-color .25s !important;
}
.si svg {
  stroke: var(--a) !important;
  fill: none !important;
  width: 22px !important;
  height: 22px !important;
  transition: stroke .25s !important;
}
.sc:hover .si {
  background: var(--a) !important;
  border-color: var(--a) !important;
}
.sc:hover .si svg { stroke: #111 !important; }

/* .brand-box — square on all screen sizes */
.brand-box {
  flex: 1 !important;
  min-width: 0 !important;
  max-width: 200px !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
  border: 1px solid var(--b) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: border-color .3s, box-shadow .3s !important;
  transform: none !important;
}
.brand-box:hover {
  border-color: var(--a) !important;
  box-shadow: 0 0 20px rgba(171,188,59,.2) !important;
  transform: none !important;
}
.brand-box svg {
  width: 60% !important;
  height: auto !important;
  max-height: 44px !important;
  transition: filter .3s, color .3s !important;
}
@media (max-width: 600px) {
  .brand-box { max-width: calc(20% - 10px) !important; padding: 8px 6px !important; }
  .brand-box svg { max-height: 28px !important; }
  .brand-box-name { font-size: 7px !important; letter-spacing: .06em !important; }
}



/* ── WHY bar track colors ────────────────────────────────────── */
/* Traditional row track = dark grey */

/* Dekada row track = green tint */


/* Fallback if no class — override the generic track */


/* ── .si border = #272727 on all modes ───────────────────────── */

/* ── Grid bg — full width, 20px squares ─────────────────────── */


.grid-bg > * { position: relative; z-index: 1; }

/* ── .si in POWERED BY EXPERTISE (.sc context) ──────────────── */

/* ── WHY bars — proportional track width ────────────────────── */

/* Track width is set inline by JS to the percentage value */
/* Fill animates 0→100% of that track */

/* Override: animate track width via JS */




/* ── Contact page: full border on input fields ───────────────── */
.ct-fi {
  background: var(--s) !important;
  border: 1px solid var(--b) !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  transition: border-color .2s !important;
}
.ct-fi:focus {
  border-color: var(--a) !important;
  outline: none !important;
}
.ct-ta {
  border: 1px solid var(--b) !important;
  border-radius: 0 !important;
  font-size: 14px !important;
}
.ct-ta:focus { border-color: var(--a) !important; }

/* ct-step-num — bigger, more prominent */
.ct-step-num {
  font-size: 16px !important;
  letter-spacing: .08em !important;
  color: var(--t) !important;
  margin-bottom: 18px !important;
}

/* ── Burger menu (.mpi) — remove border-bottom, bigger font ─── */
.mpi {
  border-bottom: none !important;
  padding: 10px 0 !important;
}
#mp a.mpi {
  border-bottom: none !important;
  padding: 10px 0 !important;
}
.mpl {
  font-size: clamp(22px, 3.5vw, 34px) !important;
  letter-spacing: -1px !important;
}

/* ── .si border — definitive, highest priority ─────────────── */
html body .sc .si,
html[data-theme="dark"]  .sc .si,
html[data-theme="light"] .sc .si {
  border: 1px solid #00000014 !important;
}

/* ══════════════════════════════════════════════════════════════
   WHY CHOOSE — Atomic Labs style, definitive clean rules
   ══════════════════════════════════════════════════════════════ */

/* Layout: 50/50 columns */
.cw-outer {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important;
  align-items: start !important;
  margin-top: 48px !important;
}
.why-copy {
  display: flex !important;
  flex-direction: column !important;
}
.why-copy .slbl  { margin-bottom: 14px !important; }
.why-copy .sh2   { margin-bottom: 24px !important; margin-top: 0 !important; }
.why-copy .ssub  { margin-bottom: 36px !important; line-height: 1.8 !important; }

/* Right column: bars */
.why-bars-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  padding: 4px 0 !important;
}

/* Each metric pair */
.why-metric-row {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Label row: name left, value right */
.why-metric-labels {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 8px !important;
}
.why-metric-name {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--m) !important;
  font-weight: 400 !important;
}
.why-metric-name.bold {
  color: var(--t) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}
.why-metric-val {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
}
.why-metric-val.bad  { color: rgba(160,160,160,.8) !important; }
.why-metric-val.good { color: var(--a) !important; }

/* Outer container — full width reference for proportional bars */
.why-bar-outer {
  width: 100% !important;
  margin-bottom: 4px !important;
}

/* Track = the bar itself — width set proportionally by JS via style="width:N%" */
/* Animates from width:0 to its target width (set inline by JS) */
.why-bar-track {
  height: 10px !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transition: width 1.4s cubic-bezier(.16,1,.3,1) !important;
}
/* Traditional: dark grey solid — no opacity */
.why-bar-track.bad-track  {
  background: #2a2a2a !important;
  opacity: 1 !important;
}
/* Dekada: green solid — no opacity */
.why-bar-track.good-track {
  background: var(--a) !important;
  opacity: 1 !important;
}

/* Inner fill — hidden (track itself IS the bar) */
.why-bar-fill { display: none !important; }

@media (max-width: 800px) {
  .cw-outer { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* ── brand-box square on mobile ─────────────────────────────── */
@media (max-width: 600px) {
  .brand-box {
    aspect-ratio: 1 / 1 !important;
    width: calc(20% - 8px) !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px !important;
    flex: 0 0 calc(20% - 8px) !important;
  }
  .brand-box svg { width: 55% !important; height: auto !important; max-height: 28px !important; }
  .brand-box-name { font-size: 7px !important; }
}

/* ── .cl-qmark — remove opacity ─────────────────────────────── */
.cl-qmark { opacity: 1 !important; }

/* ── #mp wider ───────────────────────────────────────────────── */
/* Handled in header.php inline style */

/* ── 



/* ── 

/* DENY — outlined, visible as button */



/* MORE INFORMATION — looks like a text button, not just underline */



@media (max-width: 680px) {
  
  
}


  a, button { cursor: pointer !important; }
  #cur-ring, #cur-dot { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   BURGER MENU — opacity, hover skew animation
   ══════════════════════════════════════════════════════════════ */
#mp { opacity: 0 !important; transition: transform .65s var(--ease), opacity .45s !important; }
#mp.open { opacity: 0.97 !important; }
#bd.open { opacity: 0.6 !important; }

/* .mpl hover — Atomic Labs skew effect */
.mpl {
  transition: color .25s, letter-spacing .3s,
              transform .25s var(--ease), text-shadow .25s !important;
  display: inline-block !important;
}
#mp a.mpi:hover .mpl {
  color: var(--a) !important;
  text-shadow: 4px 4px rgba(171,188,59,.12) !important;
  transform: translate(10px) skew(-5deg) !important;
  letter-spacing: -.5px !important;
}

/* ══════════════════════════════════════════════════════════════
   SINGLE WORK CASE STUDY — aligned to theme design system
   ══════════════════════════════════════════════════════════════ */
.wk-cs-page { padding-top: var(--nh); }

/* Hero */
.wk-cs-hero { position: relative; overflow: hidden; }
.wk-cs-hero .sec { padding-top: 60px !important; padding-bottom: 52px !important; }

.wk-cs-bc {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-bottom: 28px;
}
.wk-cs-bc-link { color: rgba(255,255,255,.4) !important; transition: color .2s; }
.wk-cs-bc-link:hover { color: rgba(255,255,255,.85) !important; }
.wk-cs-bc-sep { color: rgba(255,255,255,.15); }

.wk-cs-h1 {
  font-family: var(--display) !important;
  font-size: clamp(40px, 8vw, 96px) !important;
  font-weight: 700 !important;
  letter-spacing: -3px !important;
  line-height: .92 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  margin: 0 0 28px !important;
}
.wk-cs-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-cs-tags .pl {
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.05) !important;
  font-size: 11px !important; padding: 5px 12px !important;
}

/* Hero full-width image */
.wk-cs-img-band { position: relative; width: 100%; aspect-ratio: 21/9; overflow: hidden; }
.wk-cs-img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.wk-cs-fallback {
  display: none; width: 100%; height: 100%;
  min-height: 300px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 60px 40px;
}
.wk-cs-fb-name {
  font-family: var(--display); font-size: clamp(28px,5vw,60px);
  font-weight: 700; color: #fff; letter-spacing: -2px;
  text-align: center; line-height: 1.1;
}
.wk-cs-badge {
  position: absolute; bottom: 28px; right: 28px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,.72); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.1); padding: 16px 20px;
}
.wk-cs-badge-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; animation: pl 2s infinite; flex-shrink: 0;
}
.wk-cs-badge-lbl {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: 4px;
}
.wk-cs-badge-val {
  font-family: var(--display); font-size: 20px;
  font-weight: 700; letter-spacing: -1px; color: #fff;
}

/* Body grid — main + sidebar */
.wk-cs-body { padding-top: 80px !important; padding-bottom: 80px !important; }
.wk-cs-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 72px; align-items: start;
}
.wk-cs-main .slbl { margin-bottom: 10px; }
.wk-cs-main .sh2  { margin-top: 10px !important; margin-bottom: 20px !important; }
.wk-cs-main .ssub {
  text-align: left !important; max-width: 100% !important;
  font-weight: 300 !important; color: var(--m) !important;
}

/* Stats */
.wk-cs-stats {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 1px; background: var(--b);
  border: 1px solid var(--b); margin-top: 48px;
}
.wk-stat-box {
  background: var(--bg); padding: 24px 20px;
  text-align: center; transition: background .3s;
}
.wk-stat-box:hover { background: var(--s); }
.wk-stat-num {
  font-family: var(--display); font-size: clamp(28px,3.5vw,42px);
  font-weight: 700; letter-spacing: -1.5px;
  line-height: 1.1; margin-bottom: 6px;
}
.wk-stat-lbl {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: .16em; color: var(--m);
  text-transform: uppercase;
}

/* Sidebar */
.wk-cs-sidebar { position: sticky; top: calc(var(--nh) + 24px); }
.wk-cs-sb-box {
  background: var(--s); border: 1px solid var(--b);
  padding: 22px; margin-bottom: 10px;
}
.wk-cs-sb-box .slbl { margin-bottom: 18px; }
.wk-cs-stack { display: flex; flex-direction: column; gap: 6px; }
.wk-stack-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--b);
  background: var(--s2); font-family: var(--mono);
  font-size: 12px; color: var(--t); letter-spacing: .04em;
  transition: border-color .2s;
}
.wk-stack-item svg { flex-shrink: 0; }
.wk-stack-item:hover { border-color: var(--a); }

.wk-cs-sb-meta { background: var(--s); border: 1px solid var(--b); }
.wk-cs-meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 18px; border-bottom: 1px solid var(--b);
  font-family: var(--mono); font-size: 11px;
}
.wk-cs-meta-row:last-child { border-bottom: none; }
.wk-cs-mk { color: var(--m); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.wk-cs-mv { font-weight: 700; color: var(--t); letter-spacing: .03em; }

/* Execution */
.wk-cs-exec { padding-top: 80px !important; padding-bottom: 80px !important; }
.wk-cs-exec .slbl { margin-bottom: 10px; }
.wk-cs-exec .sh2  { margin-top: 10px !important; }
.wk-cs-hl-grid {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 14px; margin-top: 40px;
}
.wk-hl {
  display: flex; gap: 14px; padding: 20px;
  border: 1px solid var(--b); background: var(--bg);
  transition: border-color .3s, transform .3s;
}
.wk-hl:hover { border-color: var(--a); transform: translateY(-3px); }
.wk-hl-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border: 1px solid var(--b);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.wk-hl:hover .wk-hl-icon { background: var(--a); border-color: var(--a); }
.wk-hl:hover .wk-hl-icon svg { stroke: #111 !important; }
.wk-hl-title {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--t); margin-bottom: 6px;
}
.wk-hl-desc { font-size: 13px; color: var(--m); line-height: 1.65; }
.wk-cs-exec .ssub {
  text-align: left !important; max-width: 100% !important;
  font-weight: 300 !important; margin-top: 40px !important;
}

/* Testimonial */
.wk-cs-quote { max-width: 720px; margin: 0 auto; text-align: center; }
.wk-cs-qt {
  font-family: var(--mono); font-size: 15px;
  line-height: 1.9; color: var(--t);
  font-style: italic; margin-bottom: 32px !important;
}
.wk-cs-qt-by { display: flex; align-items: center; justify-content: center; gap: 14px; }
.wk-cs-qt-av {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.wk-cs-qt-name { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--t); letter-spacing: .05em; }
.wk-cs-qt-role { font-family: var(--mono); font-size: 10px; color: var(--m); letter-spacing: .1em; margin-top: 3px; }

/* Next project */
.wk-cs-next { border: 1px solid var(--b); transition: transform .3s, box-shadow .3s; }
.wk-cs-next:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(171,188,59,.1); }
.wk-cs-next-inner { padding: 48px 52px; }
.wk-cs-next-inner .sh2 { color: #fff !important; margin-bottom: 8px !important; }

/* Light mode overrides for case study page */
[data-theme="light"] .wk-cs-main .ssub { color: rgba(28,28,28,.65) !important; }
[data-theme="light"] .wk-hl { background: #fff !important; }
[data-theme="light"] .wk-stat-box { background: #f2f2f2 !important; }
[data-theme="light"] .wk-stat-box:hover { background: #e8e8e8 !important; }

/* Responsive */
@media (max-width: 960px) {
  .wk-cs-grid { grid-template-columns: 1fr; gap: 40px; }
  .wk-cs-sidebar { position: static; }
  .wk-cs-img-band { aspect-ratio: 16/9; }
  .wk-cs-hl-grid { grid-template-columns: 1fr; }
  .wk-cs-next-inner { padding: 32px 28px; }
}
@media (max-width: 600px) {
  .wk-cs-h1 { letter-spacing: -2px !important; font-size: clamp(36px,10vw,64px) !important; }
  .wk-cs-stats { grid-template-columns: 1fr; }
  .wk-cs-badge { display: none; }
  .wk-cs-hero .sec { padding-top: 40px !important; padding-bottom: 36px !important; }
}

/* ══════════════════════════════════════════════════════════════
   BRANDS TICKER — infinite scroll, grayscale→color on hover
   matching the reference slider HTML
   ══════════════════════════════════════════════════════════════ */
.brands-sec { overflow: hidden; }
.brands-head { text-align: center; margin-bottom: 48px; }
.brands-sub {
  font-size: 15px; color: var(--m); max-width: 520px;
  margin: 14px auto 0; line-height: 1.7; font-weight: 300;
}

/* Ticker wrapper — full width, overflow hidden */
.bts-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Edge fade masks */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* Track — flex row, doubled content for seamless loop */
.bts-track {
  display: flex;
  width: max-content;
  animation: btsSlide 55s linear infinite;
  gap: 0;
}
.bts-track:hover { animation-play-state: paused; }

@keyframes btsSlide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Individual logo box */
.bts-box {
  width: clamp(120px, 15vw, 200px);
  height: clamp(80px, 10vw, 130px);
  background: var(--s);
  border: 1px solid var(--b);
  flex-shrink: 0;
  margin: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .5s ease, box-shadow .5s ease;
  opacity: 0;
  animation: btsBoxFade 2.8s cubic-bezier(.4,0,.2,1) forwards;
}
/* Stagger the fade-in on first load */
.bts-box:nth-child(1)  { animation-delay: 0s; }
.bts-box:nth-child(2)  { animation-delay: .15s; }
.bts-box:nth-child(3)  { animation-delay: .3s; }
.bts-box:nth-child(4)  { animation-delay: .45s; }
.bts-box:nth-child(5)  { animation-delay: .6s; }
.bts-box:nth-child(6)  { animation-delay: .75s; }
.bts-box:nth-child(7)  { animation-delay: .9s; }
.bts-box:nth-child(8)  { animation-delay: 1.05s; }
.bts-box:nth-child(9)  { animation-delay: 1.2s; }
.bts-box:nth-child(10) { animation-delay: 1.35s; }
/* Second half — instant (seamless clone) */
.bts-box:nth-child(n+11) { animation: none; opacity: 1; }

@keyframes btsBoxFade {
  0%   { opacity: 0; }
  30%  { opacity: .15; }
  70%  { opacity: .7; }
  100% { opacity: 1; }
}

.bts-box:hover {
  border-color: var(--a) !important;
  box-shadow: 0 0 0 1px var(--a), 0 0 20px rgba(171,188,59,.15) !important;
}

/* Logo image — grayscale default, color on hover */
.bts-img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  display: block;
  /* Dark mode: grayscale, slightly dim */
  filter: grayscale(100%) brightness(0.7);
  transition: filter .6s ease, transform .9s cubic-bezier(.34,1.1,.64,1);
  will-change: filter, transform;
}
/* Light mode: grayscale, darkened */
html[data-theme="light"] .bts-img {
  filter: grayscale(100%) brightness(0.4) !important;
}
/* Hover: full color, scale up */
.bts-box:hover .bts-img {
  filter: grayscale(0%) brightness(1) !important;
  transform: scale(1.12);
}

@media (max-width: 600px) {
  .bts-box {
    width: clamp(90px, 28vw, 130px);
    height: clamp(56px, 18vw, 90px);
    margin: 0 5px;
  }
  .bts-img { width: 70%; height: 70%; }
}


/* ══════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE SYSTEM
   Mobile-first scaling aligned to Atomic Digital Labs reference
   Breakpoints: 480 | 768 | 1024 | 1280
   ══════════════════════════════════════════════════════════════ */

/* ── Global base ───────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
img  { max-width: 100%; height: auto; }

/* .sec container — responsive padding & max-width */
.sec {
  padding: 72px 24px !important;
  max-width: 1600px !important;
  width: 80% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Core typography scale */
.sh2 {
  font-size: clamp(24px, 4.5vw, 50px) !important;
  letter-spacing: clamp(-1px, -0.04em, -2px) !important;
  line-height: 1.1 !important;
}
.slbl { font-size: 10px !important; letter-spacing: .16em !important; }
.ssub { font-size: clamp(14px, 1.8vw, 17px) !important; line-height: 1.75 !important; }
.pl   { font-size: 10px !important; padding: 4px 10px !important; }

/* ── NAV ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #nav { padding: 0 20px !important; }
  .logo { height: 32px !important; }
  #ham  { padding: 10px !important; }
}

/* ── HERO (.hg) ────────────────────────────────────────────── */
.hg {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
}
.hh1 {
  font-size: clamp(38px, 6vw, 80px) !important;
  letter-spacing: clamp(-2px, -0.04em, -4px) !important;
  line-height: .95 !important;
}
@media (max-width: 960px) {
  .hg {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 56px 24px !important;
    text-align: center !important;
  }
  .hh1 { font-size: clamp(36px, 9vw, 60px) !important; }
  .hg .btn-group { justify-content: center !important; }
  .hero-stats { justify-content: center !important; }
  .term-box   { max-width: 100% !important; }
}
@media (max-width: 480px) {
  .hg { padding: 40px 20px !important; }
  .hh1 { font-size: clamp(32px, 10vw, 48px) !important; letter-spacing: -2px !important; }
  .hey { font-size: 9px !important; letter-spacing: .12em !important; }
  .hb  { font-size: clamp(14px, 4vw, 17px) !important; }
  .btn-cta { font-size: 10px !important; padding: 13px 20px !important; }
}

/* ── SERVICE CARDS (.sg grid) ──────────────────────────────── */
.sg { grid-template-columns: repeat(2,1fr) !important; }
@media (max-width: 768px) {
  .sg { grid-template-columns: 1fr !important; background: none !important; border: none !important; gap: 1px !important; }
  .sc { padding: 28px 22px !important; }
  .snm { font-size: 16px !important; }
  .sp  { font-size: 13px !important; }
  .si  { width: 44px !important; height: 44px !important; }
}

/* ── TICKER ─────────────────────────────────────────────────── */
.ticker { overflow: hidden !important; }
.ticker-i span { font-size: 9px !important; letter-spacing: .1em !important; gap: 24px !important; }
@media (max-width: 480px) {
  .ticker-i { gap: 20px !important; }
}

/* ── FEATURED WORK (.fw-sec) ────────────────────────────────── */
.fw-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1.35fr !important;
  gap: 60px !important;
  align-items: center !important;
}
@media (max-width: 1024px) {
  .fw-wrap { grid-template-columns: 1fr !important; gap: 40px !important; }
  .fw-right { justify-content: center !important; }
  .fw-stack { max-width: 520px !important; width: 100% !important; height: 360px !important; margin: 0 auto !important; }
}
@media (max-width: 600px) {
  .fw-stack { height: 240px !important; }
  .fw-card[data-p="1"] { transform: translate(14px,-14px) skew(0deg,2deg) !important; }
  .fw-card[data-p="2"] { transform: translate(28px,-28px) skew(0deg,2deg) !important; }
  .fw-card[data-p="3"] { transform: translate(42px,-42px) skew(0deg,2deg) !important; }
  .fw-browser-bar { padding: 6px 10px !important; }
  .fw-dot { width: 7px !important; height: 7px !important; }
  .fw-addr-bar { font-size: 9px !important; }
}

/* ── BRANDS TICKER (.bts) ───────────────────────────────────── */
@media (max-width: 600px) {
  .bts-box { width: clamp(85px,26vw,120px) !important; height: clamp(52px,16vw,80px) !important; margin: 0 4px !important; }
  .bts-img { width: 68% !important; }
}

/* ── WHY CHOOSE (.cw-outer) ─────────────────────────────────── */
.cw-outer { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 60px !important; }
@media (max-width: 900px) {
  .cw-outer { grid-template-columns: 1fr !important; gap: 36px !important; }
  .why-bars-col { padding-top: 0 !important; }
}

/* ── PROJECT ARCHIVES (.pa) ─────────────────────────────────── */
@media (max-width: 768px) {
  .pa-track  { gap: 14px !important; padding: 0 20px !important; }
  .pa-slide  { width: min(80vw,320px) !important; }
  .pa-img    { height: 180px !important; }
  .pa-title  { font-size: 13px !important; }
  .pa-meta   { font-size: 9px !important; }
  .pa-nav    { gap: 10px !important; }
  .pa-nav button { padding: 8px 14px !important; font-size: 9px !important; }
}

/* ── CLIENT LOGS (.cl) ──────────────────────────────────────── */
.cl-card { padding: 36px 28px !important; }
@media (max-width: 768px) {
  .cl-card   { padding: 28px 20px !important; }
  .cl-quote  { font-size: 13px !important; line-height: 1.75 !important; }
  .cl-author { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .cl-nav    { gap: 10px !important; }
  .cl-nav button { padding: 8px 14px !important; }
  .cl-qmark  { width: 36px !important; height: 36px !important; }
}

/* ── PRE-FOOTER / FOOTER (.sf) ──────────────────────────────── */
@media (max-width: 900px) {
  .sf-mid  { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}
@media (max-width: 600px) {
  .sf-mid  { grid-template-columns: 1fr !important; gap: 20px !important; }
  .sf-off-grid { grid-template-columns: 1fr 1fr !important; }
  .sf-copy { font-size: 10px !important; flex-direction: column !important; gap: 10px !important; text-align: center !important; }
  .sf-logo .hh1 { display:none; }
  .pf-h2   { font-size: clamp(28px, 8vw, 48px) !important; letter-spacing: -1.5px !important; }
  .pf-sub  { font-size: 14px !important; }
}

/* ── CONTACT PAGE ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .ct-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 600px) {
  .ct-row2 { grid-template-columns: 1fr !important; gap: 10px !important; }
  .ct-step { margin-bottom: 28px !important; }
  .ct-step-num { font-size: 14px !important; }
  .ct-chips { gap: 6px !important; }
  .ct-chip  { font-size: 10px !important; padding: 7px 12px !important; }
  .ct-fi    { font-size: 13px !important; padding: 12px 14px !important; }
  .ct-ta    { font-size: 13px !important; min-height: 130px !important; }
  .ct-submit { font-size: 11px !important; padding: 15px 24px !important; width: 100% !important; }
  .ct-info  { padding: 28px 20px !important; }
}

/* ── WORKS PAGE (.wg) ───────────────────────────────────────── */
.wg { grid-template-columns: repeat(auto-fill,minmax(300px,1fr)) !important; }
@media (max-width: 768px) {
  .wg      { grid-template-columns: 1fr !important; gap: 16px !important; }
  .wk-card { min-height: auto !important; }
  .wk-img  { height: 200px !important; }
  .wk-info { padding: 16px !important; }
  .wk-name { font-size: 16px !important; }
  .wk-desc { font-size: 12px !important; }
  .wk-tab-wrap { gap: 6px !important; }
  .wk-tab  { font-size: 9px !important; padding: 6px 10px !important; }
}

/* ── SINGLE WORK CASE STUDY ─────────────────────────────────── */
@media (max-width: 900px) {
  .wk-cs-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .wk-cs-sidebar { position: static !important; }
  .wk-cs-hl-grid { grid-template-columns: 1fr !important; }
  .wk-cs-img-band { aspect-ratio: 16/9 !important; }
}
@media (max-width: 600px) {
  .wk-cs-h1  { font-size: clamp(32px,10vw,56px) !important; letter-spacing: -1.5px !important; }
  .wk-cs-hero .sec { padding-top: 36px !important; padding-bottom: 32px !important; }
  .wk-cs-stats { grid-template-columns: 1fr 1fr !important; }
  .wk-cs-badge { bottom: 10px !important; right: 10px !important; padding: 10px 12px !important; }
  .wk-cs-badge-val { font-size: 15px !important; }
  .wk-cs-next-inner { padding: 28px 20px !important; }
  .wk-cs-qt { font-size: 14px !important; }
}

/* ── SERVICE PAGES (.svc) ───────────────────────────────────── */
@media (max-width: 768px) {
  .cap-grid-2   { grid-template-columns: 1fr !important; }
  .fg2-2col     { grid-template-columns: 1fr !important; }
  .svc-hero-h   { font-size: clamp(32px,9vw,60px) !important; letter-spacing: -1.5px !important; }
  .svc-context-body { font-size: 14px !important; }
  .ps { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .ps { grid-template-columns: 1fr !important; }
  .svc-hero-h { font-size: clamp(28px,10vw,44px) !important; }
}

/* ── BLOG SINGLE (single.php) ───────────────────────────────── */
@media (max-width: 900px) {
  .bp-layout   { grid-template-columns: 1fr !important; }
  .bp-sidebar  { position: static !important; }
  .bp-related-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .bp-title    { font-size: clamp(26px,8vw,40px) !important; letter-spacing: -1px !important; }
  .bp-byline   { flex-direction: column !important; align-items: flex-start !important; }
  .bp-related-grid { grid-template-columns: 1fr !important; }
  .bp-prose    { font-size: 15px !important; }
}

/* ── TEAM PAGE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .team-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr !important; }
}

/* ── BURGER MENU PANEL ──────────────────────────────────────── */
@media (max-width: 480px) {
  #mp { width: 100vw !important; }
  .mp-inner { padding: 80px 24px 40px !important; }
  .mpl { font-size: clamp(22px,7vw,30px) !important; }
  .mp-contact { flex-direction: column !important; gap: 10px !important; }
}

/* ── .btn-cta responsive ────────────────────────────────────── */
.btn-cta {
  font-size: clamp(10px, 1.2vw, 12px) !important;
  padding: clamp(12px, 1.5vw, 16px) clamp(20px, 2.5vw, 28px) !important;
  letter-spacing: .1em !important;
}

/* ── COOKIE BANNER ──────────────────────────────────────────── */
@media (max-width: 768px) {
  
  
  
}

/* ── GLOBAL SECTION PADDING SCALE ──────────────────────────── */
@media (max-width: 1024px) {
  .sec { width: 90% !important; padding: 80px 0 !important; }
}
@media (max-width: 768px) {
  .sec { width: 92% !important; padding: 64px 0 !important; }
  .sh2 { font-size: clamp(22px, 5.5vw, 36px) !important; }
  .ssub{ font-size: clamp(14px, 3.5vw, 16px) !important; }
}
@media (max-width: 480px) {
  .sec { width: 95% !important; padding: 52px 0 !important; }
  .sh2 { font-size: clamp(20px, 7vw, 30px) !important; letter-spacing: -1px !important; }
  .slbl{ letter-spacing: .12em !important; }
}

/* ── GRID BG on mobile — hide to avoid rendering glitch ─────── */
@media (max-width: 480px) {
  
}

/* ── Prevent horizontal scroll ──────────────────────────────── */
body, html { overflow-x: hidden !important; }
.sec, section, .hero, .pre-footer, footer { max-width: 100vw !important; overflow-x: hidden !important; }

/* ── WHY CHOOSE bars ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .why-metric-name  { font-size: 9px !important; }
  .why-metric-val   { font-size: 10px !important; }
  .why-bar-track    { height: 8px !important; }
}

/* ── PA tabs / filter ───────────────────────────────────────── */
@media (max-width: 600px) {
  .pa-tabs-wrap { overflow-x: auto !important; padding-bottom: 8px !important; -webkit-overflow-scrolling: touch !important; }
  .pa-tabs { min-width: max-content !important; }
}

/* ── Footer grid ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sf-mid { grid-template-columns: 1fr !important; }
  .sf-off-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── Hero terminal box ───────────────────────────────────────── */
@media (max-width: 600px) {
  .term-box { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   TARGETED FIXES BATCH
   ══════════════════════════════════════════════════════════════ */

/* 1. .phi and .shi — same width as .hg / .sec */
.phi {
  max-width: 1600px !important;
  width: 80% !important;
  margin: 0 auto !important;
  padding: 76px 0 56px !important;
  box-sizing: border-box !important;
}
.shi {
  max-width: 1600px !important;
  width: 80% !important;
  margin: 0 auto !important;
  padding: 56px 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 1024px) {
  .phi { width: 90% !important; padding: 60px 0 44px !important; }
  .shi { width: 90% !important; padding: 44px 0 !important; }
}
@media (max-width: 768px) {
  .phi { width: 92% !important; padding: 48px 0 36px !important; }
  .shi { width: 92% !important; padding: 36px 0 !important; }
}
@media (max-width: 480px) {
  .phi { width: 95% !important; }
  .shi { width: 95% !important; }
}

/* 2. .slbl — inline bolt/line icon before text */
.slbl{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--a);margin-bottom:14px;}


/* 3. .why-metric-labels — font +15% */
.why-metric-name {
  font-size: 12.65px !important;  /* 11px × 1.15 */
  letter-spacing: .1em !important;
}
.why-metric-name.bold {
  font-size: 13.8px !important;  /* 12px × 1.15 */
}
.why-metric-val {
  font-size: 13.8px !important;  /* 12px × 1.15 */
}

/* 4. .sc::after — wider gradient, ~90% coverage */
.sc::after {
  width: 100% !important;
  height: 100% !important;
  bottom: 0 !important;
  left: 0 !important;
  background: radial-gradient(
    ellipse 90% 90% at 0% 100%,
    var(--ad) 0%,
    rgba(171,188,59,.06) 45%,
    transparent 70%
  ) !important;
  opacity: 0 !important;
  transition: opacity .5s !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.sc:hover::after { opacity: 1 !important; }

/* 5. .sc content — bigger fonts, extra breathing room */
.sc {
  padding: 40px 36px !important;
}
.sn {
  font-size: 11px !important;
  letter-spacing: .12em !important;
  margin-bottom: 20px !important;
}
.stg {
  font-size: 10px !important;
  letter-spacing: .2em !important;
  margin-bottom: 12px !important;
}
.snm {
  font-size: clamp(20px, 2.2vw, 28px) !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  margin-bottom: 14px !important;
  line-height: 1.15 !important;
}
.sc .sp, .sc p {
  font-size: clamp(13px, 1.2vw, 15px) !important;
  line-height: 1.75 !important;
  color: var(--m) !important;
  margin-bottom: 20px !important;
}
.sc .stags {
  margin-top: 18px !important;
  gap: 6px !important;
}
.sc .slk {
  margin-top: 24px !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

/* Single work — light mode readability */
html[data-theme="light"] .wk-cs-main .sh2 { color: #1c1c1c !important; }
html[data-theme="light"] .wk-cs-main .ssub { color: rgba(28,28,28,.7) !important; }
html[data-theme="light"] .wk-cs-body    { background: #f2f2f2 !important; }
html[data-theme="light"] .wk-cs-exec    { background: #e8e8e8 !important; border-color: rgba(0,0,0,.1) !important; }
html[data-theme="light"] .wk-stat-box   { background: #fff !important; }
html[data-theme="light"] .wk-stat-lbl   { color: rgba(28,28,28,.55) !important; }
html[data-theme="light"] .wk-stack-item { background: #fff !important; border-color: rgba(0,0,0,.1) !important; color: #1c1c1c !important; }
html[data-theme="light"] .wk-cs-sb-box  { background: #fff !important; border-color: rgba(0,0,0,.08) !important; }
html[data-theme="light"] .wk-cs-sb-meta { background: #fff !important; border-color: rgba(0,0,0,.08) !important; }
html[data-theme="light"] .wk-cs-mk      { color: rgba(28,28,28,.45) !important; }
html[data-theme="light"] .wk-cs-mv      { color: #1c1c1c !important; }
html[data-theme="light"] .wk-hl         { background: #fff !important; border-color: rgba(0,0,0,.1) !important; }
html[data-theme="light"] .wk-hl-title   { color: #1c1c1c !important; }
html[data-theme="light"] .wk-hl-desc    { color: rgba(28,28,28,.65) !important; }
html[data-theme="light"] .wk-cs-quote   .wk-cs-qt { color: #1c1c1c !important; }
html[data-theme="light"] .wk-cs-qt-name { color: #1c1c1c !important; }
html[data-theme="light"] .wk-cs-qt-role { color: rgba(28,28,28,.55) !important; }

/* ══ SLBL — contextual SVG icon injected via PHP — no ::before needed ══ */
.slbl {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--a) !important;
  margin-bottom: 14px !important;
}
.slbl svg {
  width: 12px !important; height: 12px !important;
  stroke: var(--a) !important; fill: none !important;
  flex-shrink: 0 !important; stroke-width: 2 !important;
}

/* ══ .sc cards — definitive font & spacing ══ */
/* Scoped to .sc to beat all previous rules */
.sc { padding: 40px 36px !important; }

.sc .sn  {
  font-family: var(--mono) !important; font-size: 11px !important;
  letter-spacing: .14em !important; color: var(--f) !important;
  margin-bottom: 22px !important; font-weight: 400 !important;
}
.sc .stg {
  font-family: var(--mono) !important; font-size: 10px !important;
  letter-spacing: .2em !important; color: var(--a) !important;
  text-transform: uppercase !important; margin-bottom: 10px !important;
}
.sc .snm {
  font-family: var(--display) !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 700 !important; letter-spacing: -1px !important;
  line-height: 1.1 !important; color: var(--t) !important;
  margin-bottom: 16px !important; text-transform: uppercase !important;
}
.sc .spl {
  display: flex !important; flex-wrap: wrap !important;
  gap: 6px !important; margin-bottom: 20px !important;
}
.sc .spl .pl {
  font-size: 10px !important; padding: 4px 10px !important;
  letter-spacing: .08em !important;
}
.sc .sd {
  font-family: var(--sans) !important;
  font-size: clamp(14px, 1.3vw, 16px) !important;
  line-height: 1.8 !important; color: var(--m) !important;
  margin-bottom: 24px !important; flex: 1 !important;
}
.sc .slk {
  font-family: var(--mono) !important; font-size: 11px !important;
  letter-spacing: .12em !important; color: var(--a) !important;
  margin-top: 0 !important; display: block !important;
}

/* ══ .bts-box — square, thin border on hover ══ */
.bts-box {
  aspect-ratio: 1 / 1 !important;
  width: clamp(100px, 14vw, 180px) !important;
  height: auto !important;
  border: 1px solid var(--b) !important;
}
.bts-box:hover {
  border: 1px solid var(--a) !important;
  box-shadow: 0 0 16px rgba(171,188,59,.15) !important;
}
@media (max-width: 600px) {
  .bts-box { width: clamp(76px, 24vw, 110px) !important; }
}

/* ══════════════════════════════════════════════════════════════
   TARGETED FIXES — nav width, cl-nav, sc fonts, zoom-safe layout
   ══════════════════════════════════════════════════════════════ */

/* 1. .nav-inner — same 80% width as .sec and .hg */
.nav-inner {
  max-width: 1600px !important;
  width: 80% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}
@media (max-width: 1024px) { .nav-inner { width: 90% !important; } }
@media (max-width: 768px)  { .nav-inner { width: 92% !important; } }
@media (max-width: 480px)  { .nav-inner { width: 95% !important; } }

/* 2. .cl-nav-row — pa-nav style but centered */
.cl-nav-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 32px !important;
  margin-bottom: 0 !important;
}
.cl-nav-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 1px solid var(--b) !important;
  background: none !important;
  color: var(--t) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 18px !important;
  transition: border-color .25s, color .25s, background .25s !important;
}
.cl-nav-btn:hover {
  border-color: var(--a) !important;
  color: var(--a) !important;
}

/* 3. POWERED BY EXPERTISE — sc cards: bigger, more impact */
/* Increase snm even more — this is the title like "Website Design" */
.sc .snm {
  font-family: var(--display) !important;
  font-size: clamp(24px, 2.8vw, 36px) !important;
  font-weight: 700 !important;
  letter-spacing: -1.5px !important;
  line-height: 1.05 !important;
  color: var(--t) !important;
  margin-bottom: 16px !important;
  text-transform: uppercase !important;
}
.sc .sn {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  color: var(--f) !important;
  margin-bottom: 24px !important;
}
.sc .stg {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: .2em !important;
  color: var(--a) !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}
.sc .spl {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-bottom: 22px !important;
}
.sc .spl .pl {
  font-size: 11px !important;
  padding: 5px 11px !important;
  letter-spacing: .06em !important;
}
.sc .sd {
  font-family: var(--sans) !important;
  font-size: clamp(14px, 1.4vw, 16px) !important;
  line-height: 1.85 !important;
  color: var(--m) !important;
  margin-bottom: 28px !important;
  flex: 1 !important;
}
.sc .slk {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  color: var(--a) !important;
}
.sc {
  padding: 44px 40px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 4. Zoom-safe layout — use min() so it never stretches on zoom-in */
body.dd-body {
  min-width: 320px !important;
}
.sec, .hg, .nav-inner, .phi, .shi {
  /* Use min(80%, 1600px) — works correctly at any zoom level */
  width: min(80%, 1600px) !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 1024px) {
  .sec, .hg, .nav-inner, .phi, .shi { width: min(90%, 1600px) !important; }
}
@media (max-width: 768px) {
  .sec, .hg, .nav-inner, .phi, .shi { width: min(93%, 1600px) !important; }
}
@media (max-width: 480px) {
  .sec, .hg, .nav-inner, .phi, .shi { width: min(96%, 1600px) !important; }
}

/* ══════════════════════════════════════════════════════════════
   TOGGLE, NAV BTN, HTERM, GRID BG FIXES
   ══════════════════════════════════════════════════════════════ */

/* 1. Dark/Light toggle — DARK left, LIGHT right */
.thm {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  user-select: none !important;
}
.thm-lbl {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  transition: color .3s !important;
}
/* DARK label — active when dark mode */
html[data-theme="dark"]  .thm-dark  { color: var(--t) !important; opacity: 1 !important; }
html[data-theme="dark"]  .thm-light { color: var(--m) !important; opacity: .45 !important; }
/* LIGHT label — active when light mode */
html[data-theme="light"] .thm-light { color: var(--t) !important; opacity: 1 !important; }
html[data-theme="light"] .thm-dark  { color: var(--m) !important; opacity: .45 !important; }
/* Hide old single label */
#thlbl { display: none !important; }

/* 2. Nav .btn-cta — transparent default, green on hover/active */
nav .btn-cta,
#nav .btn-cta {
  background: transparent !important;
  border: 1px solid var(--ag) !important;
  color: var(--t) !important;
  /* Reduce vertical padding by 15% */
  padding-top: calc(var(--btn-pt, 13.6px) * 0.85) !important;
  padding-bottom: calc(var(--btn-pb, 13.6px) * 0.85) !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  transition: background .25s, color .25s, border-color .25s !important;
}
nav .btn-cta:hover,
nav .btn-cta:active,
#nav .btn-cta:hover,
#nav .btn-cta:active {
  background: var(--a) !important;
  border-color: var(--a) !important;
  color: #111 !important;
}

/* 3. .hterm — 15% larger */
.hterm {
  transform: scale(1.15) !important;
  transform-origin: bottom right !important;
}
@media (max-width: 960px) {
  .hterm { transform: scale(1.05) !important; }
}
@media (max-width: 600px) {
  .hterm { transform: none !important; }
}

/* 4. .grid-bg::before — always 100vw, full viewport width */


.grid-bg > * { position: relative !important; z-index: 1 !important; }

/* ══════════════════════════════════════════════════════════════
   BATCH FIXES
   ══════════════════════════════════════════════════════════════ */

/* 1. Toggle — ensure DARK left, LIGHT right, correct active colors */
.thm {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  cursor: pointer !important;
  user-select: none !important;
}
.thm-dark  { order: 1 !important; }
.ttr       { order: 2 !important; }
.thm-light { order: 3 !important; }

.thm-lbl {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  transition: color .3s, opacity .3s !important;
}
html[data-theme="dark"]  .thm-dark  { color: var(--t) !important; }
html[data-theme="dark"]  .thm-light { color: var(--m) !important; opacity: .4 !important; }
html[data-theme="light"] .thm-light { color: var(--t) !important; }
html[data-theme="light"] .thm-dark  { color: var(--m) !important; opacity: .4 !important; }

/* 2. Nav .btn-cta — green text default, black text + green bg on hover */
nav .btn-cta,
#nav .btn-cta {
  background: transparent !important;
  border: 1px solid var(--ag) !important;
  color: var(--a) !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  transition: background .25s, color .25s, border-color .25s !important;
}
nav .btn-cta:hover,
nav .btn-cta:active,
#nav .btn-cta:hover,
#nav .btn-cta:active {
  background: var(--a) !important;
  border-color: var(--a) !important;
  color: #111 !important;
}

/* 3. Grid bg — 100vw breaking out of container padding */


.grid-bg > * { position: relative; z-index: 1; }

/* 4. 
@media (max-width: 768px)  {  }

/* 5. .sf-inner — same width as .sec / .hg */
.sf-inner {
  max-width: 1600px !important;
  width: min(80%, 1600px) !important;
  margin: 0 auto !important;
  padding: 72px 0 36px !important;
  box-sizing: border-box !important;
}
@media (max-width: 1024px) { .sf-inner { width: min(90%, 1600px) !important; padding: 60px 0 28px !important; } }
@media (max-width: 768px)  { .sf-inner { width: min(93%, 1600px) !important; padding: 48px 0 22px !important; } }
@media (max-width: 480px)  { .sf-inner { width: min(96%, 1600px) !important; } }


/* ── Grid BG — full viewport width, no clipping ─────────────── */


/* ── .bts-box — transparent, no border ──────────────────────── */
.bts-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.bts-box:hover {
  border: none !important;
  box-shadow: none !important;
}

/* ── Full-width grid background (applied to full-width section wrapper) ── */
.full-grid-bg {
  position: relative;
  width: 100% !important;
  background-image:
    linear-gradient(90deg, #80808012 1px, transparent 1px),
    linear-gradient(#80808012 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}
/* Keep old .grid-bg for any other use */
.grid-bg { position: relative; }
.grid-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(-50vw + 50%);
  width: 100vw;
  height: 100%;
  background-image:
    linear-gradient(90deg, #80808012 1px, transparent 1px),
    linear-gradient(#80808012 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}
.grid-bg > * { position: relative; z-index: 1; }



/* ══ CLIENT LOGS — diamond thin lines matching grid style ══ */

/* ══ Toggle switch — revert border-radius ══ */
.ttr { border-radius: 11px !important; }  /* pill track */
.tth { border-radius: 50% !important; }   /* circular thumb */

/* ══ Cookie banner buttons — definitive override at end of file ══ */
/* These must come AFTER all other rules to win the cascade */









/* ══════════════════════════════════════════════════════════════
   SECTION SPACING — generous vertical rhythm between sections
   Desktop: 140px | Tablet: 100px | Mobile: 72px | Small: 52px
   ══════════════════════════════════════════════════════════════ */

/* Base: all .sec get extra vertical padding */
.sec {
  padding-top:    140px !important;
  padding-bottom: 140px !important;
  padding-left:   0 !important;
  padding-right:  0 !important;
}

/* Full-width section wrappers (.full-grid-bg etc) have no extra padding */
.full-grid-bg, .diamond-bg {
  padding: 0 !important;
}

/* Section dividers — extra top margin on each section */
section + section { margin-top: 0 !important; }

/* Specific sections that need tighter spacing */
.brands-sec .sec { padding-top: 80px !important; padding-bottom: 80px !important; }
.fw-sec .sec     { padding-top: 100px !important; padding-bottom: 100px !important; }
.ticker          { padding: 0 !important; }

/* Tablet */
@media (max-width: 1024px) {
  .sec            { padding-top: 100px !important; padding-bottom: 100px !important; }
  .brands-sec .sec { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* Mobile */
@media (max-width: 768px) {
  .sec            { padding-top: 72px !important; padding-bottom: 72px !important; }
  .brands-sec .sec { padding-top: 48px !important; padding-bottom: 48px !important; }
  .fw-sec .sec    { padding-top: 72px !important; padding-bottom: 72px !important; }
}

/* Small mobile */
@media (max-width: 480px) {
  .sec            { padding-top: 52px !important; padding-bottom: 52px !important; }
  .brands-sec .sec { padding-top: 36px !important; padding-bottom: 36px !important; }
}

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL — Creative fade variants
   Each .rv element gets a data-rv attribute assigned by JS
   to pick its animation type.
   ══════════════════════════════════════════════════════════════ */

/* Base hidden state */
.rv {
  opacity: 0;
  will-change: transform, opacity;
}

/* ── Animation types — set via data-rv attribute ── */

/* 1. Fade up (default) */
.rv[data-rv="up"]    { transform: translateY(40px); }
.rv[data-rv="up"].vis { transform: translateY(0); opacity: 1; transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }

/* 2. Fade down */
.rv[data-rv="down"]    { transform: translateY(-32px); }
.rv[data-rv="down"].vis { transform: translateY(0); opacity: 1; transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }

/* 3. Fade left (slide from right) */
.rv[data-rv="left"]    { transform: translateX(48px); }
.rv[data-rv="left"].vis { transform: translateX(0); opacity: 1; transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }

/* 4. Fade right (slide from left) */
.rv[data-rv="right"]    { transform: translateX(-48px); }
.rv[data-rv="right"].vis { transform: translateX(0); opacity: 1; transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }

/* 5. Scale up — cards, boxes */
.rv[data-rv="scale"]    { transform: scale(0.92) translateY(24px); }
.rv[data-rv="scale"].vis { transform: scale(1) translateY(0); opacity: 1; transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.34,1.12,.64,1); }

/* 6. Flip-up — headings */
.rv[data-rv="flip"]    { transform: translateY(56px) rotateX(8deg); transform-origin: bottom center; }
.rv[data-rv="flip"].vis { transform: translateY(0) rotateX(0deg); opacity: 1; transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }

/* 7. Blur in — images, feature sections */
.rv[data-rv="blur"]    { transform: translateY(24px); filter: blur(8px); }
.rv[data-rv="blur"].vis { transform: translateY(0); filter: blur(0); opacity: 1; transition: opacity .95s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.16,1,.3,1), filter .95s ease; }

/* 8. Clip reveal — stat numbers */
.rv[data-rv="clip"]    { transform: translateY(32px) scaleY(0.85); transform-origin: top; }
.rv[data-rv="clip"].vis { transform: translateY(0) scaleY(1); opacity: 1; transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.34,1.2,.64,1); }

/* Stagger delays for sibling elements */
.rv[data-rv-delay="1"] { transition-delay: .1s !important; }
.rv[data-rv-delay="2"] { transition-delay: .2s !important; }
.rv[data-rv-delay="3"] { transition-delay: .3s !important; }
.rv[data-rv-delay="4"] { transition-delay: .45s !important; }
.rv[data-rv-delay="5"] { transition-delay: .6s !important; }

/* Fallback for .rv without data-rv */
.rv:not([data-rv]) {
  transform: translateY(36px);
}
.rv:not([data-rv]).vis {
  transform: translateY(0);
  opacity: 1;
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}

/* Perspective for flip effect */
section, .sec { perspective: 1200px; }

/* ══ Custom cursor ═══════════════════════════════════════════ */
* { cursor: none !important; }
a, button, [onclick], label, input, textarea, select,
.ct-chip, .brand-box, .pa-slide, .sc, .wk-card, .bts-box,
.mpi, .wk-cs-next, .wk-hl { cursor: pointer !important; }

#cur-ring {
  position: fixed; pointer-events: none; z-index: 99999;
  top: 0; left: 0;
  width: 22px; height: 22px;
  border: 1.5px solid var(--a); border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;  /* hidden until first mousemove */
  transition: width .25s, height .25s, border-color .25s, background .25s;
  will-change: left, top;
  backface-visibility: hidden;
}
#cur-dot {
  position: fixed; pointer-events: none; z-index: 99999;
  top: 0; left: 0;
  width: 5px; height: 5px;
  background: var(--a); border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;  /* hidden until first mousemove */
  will-change: left, top;
  backface-visibility: hidden;
}
body.cur-hover #cur-ring {
  width: 38px; height: 38px;
  border-color: rgba(171,188,59,.45);
  background: rgba(171,188,59,.06);
}
body.cur-hover #cur-dot { width: 4px; height: 4px; }
body.cur-click #cur-ring { width: 16px; height: 16px; opacity: .6; }

@media (max-width: 768px) {
  * { cursor: auto !important; }
  a, button { cursor: pointer !important; }
  #cur-ring, #cur-dot { display: none !important; }
}