@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-tight-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-tight-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/inter-tight-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2')}

:root{
  --bk:#141518; --bk2:#1B1D21; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --paper:#E8E8E6; --ink:#141518; --grey:#3A3D44; --mut:#8A8F99;
  --cyan:#00C3E7; --navy:#051D43;
  --h:'Inter Tight',system-ui,sans-serif; --m:'JetBrains Mono',ui-monospace,monospace;
  --gut:clamp(16px,2.2vw,34px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bk);color:#fff;font-family:var(--h);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.mono{font-family:var(--m);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.H{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.9}

/* page grid lines */
.gridlines{position:fixed;inset:0;pointer-events:none;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);padding:0 var(--gut)}
.gridlines i{border-left:1px solid var(--line)}
.gridlines i:last-child{border-right:1px solid var(--line)}
.sec{position:relative;padding:0 var(--gut);z-index:2}
.cols{display:grid;grid-template-columns:repeat(4,1fr)}
.rule{position:relative;height:1px;background:var(--line);margin:0 calc(var(--gut)*-1)}
.rule:before,.rule:after{content:"+";position:absolute;top:-9px;font:300 16px/1 var(--m);color:#777}
.rule:before{left:calc(var(--gut) - 5px)}.rule:after{right:calc(var(--gut) - 5px)}
.lbl{display:flex;align-items:center;gap:8px;color:var(--mut)}
.lbl:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.lbl b{color:#fff;font-weight:700}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gut);mix-blend-mode:difference}
.top img{height:26px;width:auto}
.top .menu{color:#fff}
.top .rt{display:flex;align-items:center;gap:14px;color:#fff}
.top .rt span{text-align:right;line-height:1.4;font-size:10px}
.plus{width:46px;height:46px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font:300 26px/1 var(--h);transition:transform .4s}
.plus:hover{transform:rotate(90deg)}
.drawer{position:fixed;inset:0;z-index:60;background:var(--bk);display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut);transform:translateY(-100%);transition:transform .7s cubic-bezier(.7,0,.2,1)}
.drawer.open{transform:none}
.drawer a{display:block;font:800 clamp(44px,8vw,120px)/.95 var(--h);text-transform:uppercase;letter-spacing:-.05em;color:#555;transition:color .3s}
.drawer a:hover{color:#fff}
.drawer .x{position:absolute;top:22px;right:var(--gut)}
.drawer .mono{margin-top:40px;color:var(--mut)}

/* HERO */
.hero{background:var(--paper);color:var(--ink);min-height:100vh;position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);padding:0 var(--gut);overflow:hidden}
.hero .art{grid-column:1/3;grid-row:1;position:relative;margin-left:calc(var(--gut)*-1);min-height:100vh;background:#0B0C0F;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero .copy{grid-column:1/5;grid-row:1;position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:28px}
.hero .meta{position:absolute;top:18vh;left:50%;display:flex;gap:12px;align-items:center;color:#333}
.hero .meta .chips{display:flex}
.hero .meta .chips i{width:26px;height:26px;border-radius:50%;border:2px solid var(--paper);margin-left:-8px;background:var(--navy);display:grid;place-items:center;font:700 10px var(--m);color:var(--cyan);font-style:normal}
.hero .meta .chips i:first-child{margin-left:0}
.hero h1{font-size:clamp(64px,13.4vw,232px);white-space:nowrap}
.hero h1 .mask>span{background:linear-gradient(90deg,#fff 0 50%,var(--ink) 50% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .dot{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--cyan);vertical-align:.02em;margin-left:.04em;mix-blend-mode:normal}
.hero h2{font-size:clamp(30px,4vw,68px);margin-left:50%;margin-top:.15em}
.hero p.sub{margin:28px 0 0 50%;max-width:420px;font:500 17px/1.45 var(--h);color:#555}
.hero p.sub b{color:var(--ink);font-weight:600}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-top:42px}
.pillbtn{display:flex;align-items:center;justify-content:center;height:58px;border-radius:999px;font:700 13px var(--h);text-transform:uppercase;letter-spacing:.02em;transition:transform .3s,background .3s,color .3s}
.pillbtn:hover{transform:translateY(-2px)}
.pb-dark{background:var(--ink);color:#fff}
.pb-dark:hover{background:var(--navy)}
.pb-light{background:#fff;color:var(--ink)}
.pb-cyan{background:var(--cyan);color:var(--navy)}
.works{display:flex;gap:30px;margin:26px 0 0 50%;color:#555;flex-wrap:wrap}

/* WHO */
.who{padding-top:22vh;padding-bottom:18vh}
.who .cols{align-items:start}
.vcard{grid-column:1/2;margin-top:0;border-top:1px solid var(--line);position:relative}
.vcard .hd{display:flex;justify-content:space-between;padding:22px 12px 0;color:var(--mut)}
.vcard .hd b{color:#fff}
.vcard h4{font:800 17px/1.05 var(--h);text-transform:uppercase;letter-spacing:-.02em;padding:22px 12px}
.feed{margin:0 8px;border-radius:10px;background:#0E0F12;border:1px solid var(--line);padding:14px;height:250px;overflow:hidden;position:relative;font:400 11px/1.6 var(--m);color:#8a8f99}
.feed:after{content:"";position:absolute;inset:auto 0 0;height:60px;background:linear-gradient(transparent,#0E0F12)}
.feed div{display:flex;gap:10px;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.06);animation:feedin .5s ease}
.feed em{font-style:normal;color:var(--cyan)}
.feed span:first-child{color:#555;flex:none}
@keyframes feedin{from{opacity:0;transform:translateY(-8px)}}
.vcard .cap{padding:30px 12px;text-align:right;color:var(--mut);line-height:1.6}
.vcard .cap b{color:#fff;font-weight:500}
.who .big{grid-column:3/5}
.reveal-words{font-size:clamp(34px,4.3vw,72px);margin-top:26px}
.reveal-words span{color:#3a3c41;transition:color .25s}
.reveal-words span.lit{color:#fff}
.sign{display:flex;align-items:center;gap:14px;margin-top:60px}
.sign .av{width:44px;height:44px;border-radius:50%;background:var(--navy);display:grid;place-items:center}
.sign .av img{width:30px}
.sign .mono{line-height:1.5}
.sign .mono span{color:var(--mut)}
.intro2{grid-column:3/5;margin-top:16vh;font:600 18px/1.45 var(--h);max-width:560px}
.intro2 span{color:var(--mut)}
.intro2 .pillbtn{margin-top:60px}

/* SERVICES */
.svh{padding:10vh 0 12vh}
.svh h2{font-size:clamp(36px,4.4vw,70px);margin-top:26px;max-width:9.5em}
.svh h2 span{color:#6b6e75}
.srow{display:grid;grid-template-columns:repeat(4,1fr);padding:30px 0 40px}
.srow .n{font:500 clamp(28px,3vw,44px) var(--h);color:#3a3c41;padding-left:0}
.srow h3{font:800 clamp(18px,1.6vw,24px)/1 var(--h);text-transform:uppercase;letter-spacing:-.02em}
.srow .vis{border-radius:12px;overflow:hidden;aspect-ratio:16/10.5;border:4px solid #23252a;position:relative;background:#0b0c10;margin-right:var(--gut)}
.srow .txt{padding-left:var(--gut);display:flex;flex-direction:column;justify-content:space-between;color:#9aa0aa;font:400 12px/1.65 var(--m);text-transform:uppercase}
.srow .tags{display:flex;gap:16px;flex-wrap:wrap;color:#d6d8dc}
.vis svg{position:absolute;inset:0;width:100%;height:100%}

/* AREAS */
.areas{padding-top:16vh;padding-bottom:14vh}
.areas h2{font-size:clamp(44px,7vw,120px);margin-top:26px}
.areas h2 span{color:#3a3c41}
.tabs{display:flex;gap:0;margin-top:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:auto}
.tab{flex:1;min-width:140px;padding:22px 12px;background:none;border:0;border-right:1px solid var(--line);color:var(--mut);font:500 12px var(--m);text-transform:uppercase;cursor:pointer;text-align:left;transition:.3s}
.tab:last-child{border-right:0}
.tab.active{background:#fff;color:#000}
.tab:hover:not(.active){color:#fff}
.panel{display:none;grid-template-columns:repeat(4,1fr)}
.panel.active{display:grid;animation:fade .5s}
@keyframes fade{from{opacity:0}}
.job{padding:34px var(--gut) 40px 12px;border-right:1px solid var(--line);min-height:240px;display:flex;flex-direction:column;justify-content:space-between}
.job:last-child{border-right:0}
.job .mono{color:var(--cyan)}
.job h4{font:800 22px/1 var(--h);text-transform:uppercase;letter-spacing:-.02em;margin:40px 0 12px}
.job p{color:#9aa0aa;font-size:15px;line-height:1.5}

/* PROCESS */
.proc{padding-top:14vh;padding-bottom:14vh}
.proc .head{display:grid;grid-template-columns:repeat(4,1fr);align-items:end}
.proc h2{grid-column:1/3;font-size:clamp(40px,5.6vw,96px);margin-top:26px}
.proc .head p{grid-column:3/5;color:var(--mut);font:400 12px/1.7 var(--m);text-transform:uppercase;max-width:440px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:80px}
.st{padding:0 var(--gut) 0 12px;position:relative}
.st .k{font:800 clamp(80px,9vw,150px)/.8 var(--h);letter-spacing:-.06em;color:#26282d;transition:color .6s}
.st.in .k{color:#fff}
.st .bar{height:2px;background:var(--line);margin:30px 0 26px;position:relative;overflow:hidden}
.st .bar i{position:absolute;inset:0;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.st.in .bar i{transform:none}
.st h4{font:800 22px/1 var(--h);text-transform:uppercase;letter-spacing:-.02em}
.st p{color:#9aa0aa;font-size:15px;line-height:1.5;margin-top:12px}
.st .mono{color:var(--mut);margin-bottom:22px;display:block}

/* WHY / CALC */
.why{padding-top:14vh;padding-bottom:14vh}
.why .cols{gap:0}
.why h2{grid-column:1/3;font-size:clamp(40px,5vw,84px);margin-top:26px}
.why h2 span{color:#3a3c41}
.metrics{grid-column:1/3;margin-top:80px;padding-right:var(--gut)}
.metric{display:flex;justify-content:space-between;align-items:flex-end;padding:22px 0;border-bottom:1px solid var(--line)}
.metric h4{font:800 22px var(--h);text-transform:uppercase;letter-spacing:-.02em}
.metric p{color:#9aa0aa;font-size:14px;margin-top:6px;max-width:34ch}
.metric .mono{color:var(--cyan)}
.calc{grid-column:3/5;background:#fff;color:var(--ink);border-radius:14px;padding:clamp(24px,3vw,44px);align-self:start;position:sticky;top:110px;margin-top:26px}
.calc .mono{color:#777}
.calc h3{font:800 clamp(28px,3vw,44px)/.95 var(--h);text-transform:uppercase;letter-spacing:-.04em;margin:18px 0 30px}
.f{margin-bottom:22px}
.f label{display:flex;justify-content:space-between;font:500 12px var(--m);text-transform:uppercase;color:#444}
.f output{color:#000;font-weight:700}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:#d5d5d5;margin-top:16px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--ink);border:4px solid var(--cyan);cursor:pointer}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:4px solid var(--cyan);cursor:pointer}
.out{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ddd;margin-top:30px}
.out div{padding:22px 0 0}
.out div+div{border-left:1px solid #ddd;padding-left:20px}
.out b{display:block;font:800 clamp(36px,4vw,60px)/.9 var(--h);letter-spacing:-.05em}
.out span{font:400 11px var(--m);text-transform:uppercase;color:#777;display:block;margin-top:10px}
.calc small{display:block;margin-top:24px;font:400 11px/1.5 var(--m);color:#888;text-transform:uppercase}

/* PACKAGES */
.pk{padding-top:14vh;padding-bottom:14vh}
.pk h2{font-size:clamp(44px,7vw,120px);margin-top:26px}
.pk h2 span{color:#3a3c41}
.pkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);margin-top:70px}
.card{border:1px solid var(--line2);border-radius:14px;padding:30px;display:flex;flex-direction:column;min-height:540px;background:rgba(20,21,24,.6);backdrop-filter:blur(2px)}
.card.feat{background:#fff;color:var(--ink);border-color:#fff}
.card .mono{color:var(--mut)}
.card.feat .mono{color:#666}
.card h3{font:800 44px/.9 var(--h);text-transform:uppercase;letter-spacing:-.05em;margin:26px 0 14px}
.card .for{color:#9aa0aa;font-size:15px;line-height:1.5}
.card.feat .for{color:#555}
.card .price{font:800 26px var(--h);text-transform:uppercase;letter-spacing:-.03em;margin:30px 0 4px}
.card ul{list-style:none;margin:26px 0 34px;flex:1;border-top:1px solid var(--line)}
.card.feat ul{border-color:#ddd}
.card li{padding:13px 0;border-bottom:1px solid var(--line);font:400 12px var(--m);text-transform:uppercase;display:flex;gap:10px}
.card.feat li{border-color:#ddd}
.card li:before{content:"+";color:var(--cyan);font-weight:700}
.card .pillbtn{height:52px}

/* FAQ */
.faq{padding-top:14vh;padding-bottom:14vh}
.faq .cols{align-items:start}
.faq h2{grid-column:1/3;font-size:clamp(44px,6vw,104px);margin-top:26px}
.faq .list{grid-column:3/5;margin-top:26px;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;background:none;border:0;color:#fff;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font:700 20px/1.2 var(--h);text-align:left;cursor:pointer;letter-spacing:-.01em}
.qa button i{font:300 26px/1 var(--m);font-style:normal;transition:transform .35s;color:var(--mut)}
.qa.open button i{transform:rotate(45deg);color:var(--cyan)}
.qa .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s}
.qa.open .a{grid-template-rows:1fr}
.qa .a>div{overflow:hidden}
.qa p{color:#9aa0aa;font-size:16px;line-height:1.6;padding:0 40px 26px 0}

/* CONTACT */
.contact{padding-top:14vh;padding-bottom:10vh}
.contact h2{font-size:clamp(70px,15vw,260px);line-height:.82;margin-top:26px}
.contact h2 span{color:#3a3c41}
.contact .cols{margin-top:80px;align-items:start}
.cinfo{grid-column:1/3;padding-right:var(--gut)}
.cinfo a,.cinfo div.r{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);gap:20px}
.cinfo .mono{color:var(--mut)}
.cinfo strong{font:800 clamp(20px,2.2vw,32px) var(--h);letter-spacing:-.03em;text-transform:uppercase;transition:color .3s}
.cinfo a:hover strong{color:var(--cyan)}
.cinfo p{color:#9aa0aa;font-size:15px;line-height:1.6;margin-top:30px;max-width:46ch}
form{grid-column:3/5;display:grid;gap:14px}
.fld{display:grid;gap:8px}
.fld label{font:400 11px var(--m);text-transform:uppercase;color:var(--mut)}
.fld input,.fld select,.fld textarea{background:transparent;border:0;border-bottom:1px solid var(--line2);padding:12px 0;color:#fff;font:600 18px var(--h);outline:none;border-radius:0;transition:border-color .3s}
.fld select option{color:#000}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--cyan)}
.fld textarea{min-height:90px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
form .pillbtn{border:0;cursor:pointer;margin-top:16px;width:100%}
.fmsg{display:none;font:400 12px/1.6 var(--m);text-transform:uppercase;color:var(--cyan)}
.fmsg.show{display:block}

footer{position:relative;z-index:2;padding:0 var(--gut) 24px}
footer .cols{padding:40px 0;color:var(--mut)}
footer .cols a:hover{color:#fff}
footer .cols div{display:grid;gap:8px;align-content:start}
.giant{font:900 clamp(120px,31vw,560px)/.76 var(--h);letter-spacing:-.075em;text-transform:lowercase;text-align:center;color:#fff;margin-top:20px;white-space:nowrap}
.giant span{color:var(--cyan)}
footer .bot{display:flex;justify-content:space-between;color:#55585f;margin-top:24px;flex-wrap:wrap;gap:10px}

/* generic reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.mask{overflow:hidden;display:block}
.mask>span{display:block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.in .mask>span,.mask.in>span{transform:none}

@media (max-width:900px){
  .gridlines{grid-template-columns:repeat(2,1fr)}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero .art{grid-column:1;min-height:56vh;margin-right:calc(var(--gut)*-1)}
  .hero .copy{grid-column:1;grid-row:2;padding-top:30px}
  .hero h1{font-size:17vw;white-space:normal}.hero h1 .mask>span{background:none;color:var(--ink)}
  .hero h2,.hero p.sub,.works{margin-left:0}
  .hero .meta{display:none}
  .btns{grid-template-columns:1fr}
  .top .rt span{display:none}
  .who .big,.intro2,.vcard{grid-column:1/5}
  .vcard{order:3;margin-top:60px}
  .srow{grid-template-columns:1fr 1fr;row-gap:22px}
  .srow .vis{grid-column:1/3;margin-right:0}
  .srow .txt{grid-column:1/3;padding-left:0;gap:20px}
  .panel.active{grid-template-columns:1fr 1fr}
  .job:nth-child(2){border-right:0}
  .steps{grid-template-columns:1fr 1fr;row-gap:60px}
  .proc h2,.proc .head p,.why h2,.metrics,.calc,.faq h2,.faq .list,.cinfo,form{grid-column:1/5}
  .calc{position:relative;top:0;margin-top:50px}
  .metrics{padding-right:0}
  .pkgrid{grid-template-columns:1fr}
  .card{min-height:0}
  form{margin-top:60px}
}
@media (max-width:560px){
  .panel.active,.steps,.two{grid-template-columns:1fr}
  .job{border-right:0;border-bottom:1px solid var(--line);min-height:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.rv{opacity:1;transform:none}.mask>span{transform:none}}

/* WordPress extras */
.admin-bar .top{top:32px}
.hp{position:absolute!important;left:-9999px!important}
.legal{max-width:760px;margin:0 auto;padding:22vh var(--gut) 14vh;position:relative;z-index:2}
.legal h1{font:800 clamp(44px,7vw,96px)/.9 var(--h);text-transform:uppercase;letter-spacing:-.045em;margin:26px 0 50px}
.legal .content{color:#c9ccd2;font-size:17px;line-height:1.7}
.legal .content h2,.legal .content h3{color:#fff;margin:2em 0 .6em;font-weight:800;letter-spacing:-.02em}
.legal .content p,.legal .content ul,.legal .content ol{margin-bottom:1.1em}
.legal .content ul,.legal .content ol{padding-left:1.3em}
.legal .content a{color:var(--cyan);text-decoration:underline}


/* Legal pages: full-width ON AI editorial layout */
body.page-id-13 .legal,
body.page-id-16 .legal{max-width:none;margin:0;padding:0;width:100%;position:relative;z-index:2}
body.page-id-13 .legal>h1,
body.page-id-16 .legal>h1{display:none}
body.page-id-13 .legal>.content,
body.page-id-16 .legal>.content{max-width:none;width:100%;color:#111;font-size:initial;line-height:normal}
body.page-id-13 .legal .content h2,
body.page-id-13 .legal .content h3,
body.page-id-16 .legal .content h2,
body.page-id-16 .legal .content h3{color:#111}
body.page-id-13 .legal .content a,
body.page-id-16 .legal .content a{color:#315d17}
body.page-id-13 .onai-legal,
body.page-id-16 .onai-legal{width:100%;max-width:none;margin:0}