/* =====================================================================
   Print Urgent Brandings - stylesheet
   Motion rules (for smooth 60 / 90 / 120 Hz):
   - only transform, opacity, translate, scale, rotate are animated
   - one easing curve family: --ease-out (smooth stop) and --spring (small overshoot)
   - everything is duration based, so it automatically follows the screen refresh rate
   ===================================================================== */
:root{--bg:#0C0C0F;--panel:#15161B;--panel2:#1D1F26;--ink:#F3F4F7;--muted:#A3A8B5;--line:#2A2C35;--c:#00A6E3;--m:#E5007D;--y:#FFD400;
--font:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
--ease-out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);--ease-in:cubic-bezier(.5,0,.75,0);
color-scheme:dark}
*{box-sizing:border-box;margin:0}
html{font-size:clamp(14px,12px + .25vw,18px);scroll-behavior:smooth;scroll-padding-top:5.5rem;background:var(--bg);-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
:focus-visible{outline:3px solid var(--y);outline-offset:3px}
.wrap{width:min(70rem,100% - 2.5rem);margin-inline:auto}
h1,h2,h3{line-height:1.08;letter-spacing:-.03em;font-weight:800;text-wrap:balance}
h3{line-height:1.25}
h2{font-size:clamp(1.45rem,2.6vw + .5rem,2.2rem)}
p{text-wrap:pretty}
.lede{color:var(--muted);max-width:60ch}
section{padding:clamp(2.6rem,5.5vw,4.5rem) 0}
main,section,footer{overflow-x:hidden;overflow-x:clip} /* slide-in animations must never create sideways scroll */
.white{background:var(--panel)}
.head{margin-bottom:2.2rem;display:grid;gap:.7rem}
.skip{position:absolute;left:1rem;top:.75rem;z-index:100;background:var(--y);color:#111;font-weight:700;padding:.6rem 1rem;border-radius:10px;text-decoration:none;translate:0 -200%;transition:translate .35s var(--ease-out)}
.skip:focus{translate:0 0}

/* ---------- page transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .25s var(--ease-in) both}
::view-transition-new(root){animation:vt-in .55s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translate3d(0,-10px,0)}}
@keyframes vt-in{from{opacity:0;transform:translate3d(0,18px,0)}}
header{view-transition-name:site-header}
::view-transition-group(site-header){animation-duration:.4s}
.vt-fallback body{animation:page-in .55s var(--ease-out) backwards}
.vt-fallback.leaving body{opacity:0;transition:opacity .22s ease-in}
@keyframes page-in{from{opacity:0}}

/* ---------- scroll progress ---------- */
.progress{position:fixed;left:0;top:0;width:100%;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--c),var(--m),var(--y));pointer-events:none;will-change:transform}
@supports (animation-timeline:scroll()){
  .progress{animation:prog linear both;animation-timeline:scroll(root)}
}
@keyframes prog{to{transform:scaleX(1)}}

/* ---------- header ---------- */
.spectrum{height:4px;background:linear-gradient(90deg,#00A6E3 0 14.28%,#2F6BFF 0 28.56%,#7A3CFF 0 42.84%,#E5007D 0 57.12%,#FF3B30 0 71.4%,#FF8A00 0 85.68%,#FFD400 0);transform-origin:0 50%;animation:draw 1.1s var(--ease-out) .1s backwards}
header{background:#0C0C0F;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;transition:transform .55s var(--ease-out);animation:hdr-in .8s var(--ease-out) backwards}
header.hide{transform:translate3d(0,-101%,0)}
header::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;background:linear-gradient(rgba(0,0,0,.38),transparent);opacity:0;transition:opacity .4s;pointer-events:none}
header.scrolled::after{opacity:1}
@keyframes hdr-in{from{transform:translate3d(0,-100%,0)}}
@keyframes draw{from{transform:scaleX(0)}}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;min-width:0;padding:.85rem 0;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;font-weight:800;font-size:clamp(.92rem,4.2vw,1.2rem);letter-spacing:-.03em;text-decoration:none}
.brand::before{content:"";width:1.45em;height:1.45em;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='38' cy='40' r='26' fill='%2300A6E3'/%3E%3Ccircle cx='62' cy='40' r='26' fill='%23E5007D' fill-opacity='.8'/%3E%3Ccircle cx='50' cy='62' r='26' fill='%23FFD400' fill-opacity='.8'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .8s var(--spring);animation:mark-in 1s var(--spring) .25s backwards}
@keyframes mark-in{from{scale:0;rotate:-120deg}}
nav{display:flex;gap:1.5rem;align-items:center}
nav a:not(.btn){position:relative;text-decoration:none;font-weight:600;font-size:.95rem;letter-spacing:.005em;color:#C7CBD6;padding:.2rem 0;transition:color .25s}
nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-.3rem;height:3px;border-radius:3px;background:var(--m);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
nav a:not(.btn)[aria-current]{color:var(--ink)}
nav a:not(.btn)[aria-current]::after{transform:scaleX(1)}
nav a:not(.btn)[aria-current]::after{animation:draw .7s var(--ease-out) .5s backwards}
.menu{display:none;position:relative;flex:none;width:46px;height:46px;border:1.5px solid #4A4D59;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;transition:border-color .25s,background-color .25s,transform .2s var(--ease-out)}
.menu span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:currentColor;transition:transform .5s var(--ease-out)}
.menu span:nth-child(1){top:17px}
.menu span:nth-child(2){top:27px}
.open .menu{border-color:var(--ink);background:var(--panel2)}
.open .menu span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.open .menu span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}
.menu:active{transform:scale(.92)}
@media (hover:hover){
  nav a:not(.btn):hover{color:var(--ink)}
  nav a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
  .brand:hover::before{transform:rotate(120deg) scale(1.12)}
  .menu:hover{border-color:var(--ink)}
}
@media (max-width:860px){
  .bar{flex-wrap:nowrap}
  nav{flex-wrap:wrap;gap:.4rem 1.2rem;width:100%}
  .js nav{position:absolute;left:0;right:0;top:100%;width:auto;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;padding:.4rem 1.25rem 1.3rem;background:var(--panel);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;pointer-events:none;translate:0 -12px;transition:opacity .3s var(--ease-out),translate .5s var(--ease-out),visibility 0s .5s}
  .js .open nav{opacity:1;visibility:visible;pointer-events:auto;translate:0 0;transition-delay:0s}
  .js .menu{display:block}
  .js .open nav a{animation:nav-in .55s var(--ease-out) calc(.06s + var(--i,0) * .05s) backwards}
  nav a:nth-child(1){--i:0}nav a:nth-child(2){--i:1}nav a:nth-child(3){--i:2}nav a:nth-child(4){--i:3}nav a:nth-child(5){--i:4}nav a:nth-child(6){--i:5}
  .js nav a:not(.btn){padding:.95rem .2rem;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .js nav a:not(.btn)::after{display:none}
  .js nav a:not(.btn)[aria-current]{color:var(--ink);box-shadow:inset 3px 0 0 var(--m);padding-left:.9rem}
  .js nav .btn{margin-top:1rem;padding:.9rem 1.5rem}
}
@keyframes nav-in{from{opacity:0;translate:-16px 0}to{opacity:1;translate:0 0}}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-block;text-align:center;font-size:.95rem;padding:.8rem 1.4rem;border-radius:10px;font:inherit;font-weight:600;text-decoration:none;border:1.5px solid var(--ink);cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,box-shadow .4s var(--ease-out),transform .4s var(--ease-out)}
.btn-main{background:var(--ink);color:var(--bg)}
.btn-line{background:transparent;color:var(--ink);border-color:#4A4D59}
.btn-sm{padding:.4rem 1rem;font-size:.85rem;white-space:nowrap}
.btn:active{transform:scale(.95);transition-duration:.12s}
.btn.ok{background:#25D366;border-color:#25D366;color:#05210f;animation:ok-pop .6s var(--spring)}
@keyframes ok-pop{from{scale:.94}}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.22;pointer-events:none;z-index:-1;scale:0;animation:ripple .75s var(--ease-out) forwards}
@keyframes ripple{to{scale:1;opacity:0}}
.hero .btn-main::before,.cta .btn-main::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,212,0,.6) 50%,transparent 62%);translate:-135% 0;animation:shine 5s ease-in-out 2.2s infinite}
@keyframes shine{0%,62%{translate:-135% 0}100%{translate:135% 0}}
@media (hover:hover){
  .btn:hover{transform:translateY(-3px)}
  .btn:active{transform:scale(.95)}
  .btn-main:hover{background:var(--y);border-color:var(--y);box-shadow:0 12px 28px -10px rgba(255,212,0,.6)}
  .btn-line:hover{border-color:var(--ink);background:var(--panel2);box-shadow:0 12px 28px -14px rgba(255,255,255,.35)}
}
.actions{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- ambient backgrounds (transform only) ---------- */
.hero,.pagehead,.cta{position:relative;overflow:hidden;overflow:clip;isolation:isolate}
.hero>.wrap,.pagehead>.wrap,.cta>.wrap{position:relative;z-index:1}
.hero::before,.hero::after,.pagehead::before,.cta::before{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;aspect-ratio:1;will-change:transform}
.hero::before{width:min(70vw,820px);right:-18%;top:-34%;background:radial-gradient(circle,rgba(229,0,125,.3),transparent 68%);animation:drift-a 16s ease-in-out infinite alternate}
.hero::after{width:min(62vw,720px);right:-14%;bottom:-46%;background:radial-gradient(circle,rgba(0,166,227,.28),transparent 68%);animation:drift-b 19s ease-in-out infinite alternate}
.pagehead::before{width:min(60vw,640px);right:-14%;top:-80%;background:radial-gradient(circle,rgba(0,166,227,.2),transparent 68%);animation:drift-a 15s ease-in-out infinite alternate}
.cta::before{width:min(60vw,640px);right:-12%;bottom:-100%;background:radial-gradient(circle,rgba(0,166,227,.2),transparent 68%);animation:drift-b 17s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate3d(-7%,10%,0) scale(1.14)}}
@keyframes drift-b{to{transform:translate3d(-10%,-9%,0) scale(1.1)}}
.off::before,.off::after,.off .cmy i,.off .btn-main::before{animation-play-state:paused}

/* ---------- hero ---------- */
.hero{padding:clamp(2.6rem,7vw,5.5rem) 0 clamp(2.2rem,5vw,3.8rem);background:radial-gradient(ellipse 40% 40% at 60% 100%,rgba(255,212,0,.12),transparent 70%)}
.eyebrow{color:var(--y);font-weight:600;font-size:.9rem;margin-bottom:1.2rem}
.eyebrow::before{content:"";display:inline-block;width:.55rem;height:.55rem;margin-right:.6rem;border-radius:50%;background:var(--y);vertical-align:.08em;animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{scale:1.5;opacity:.45}}
.hero h1{font-size:clamp(2rem,4.6vw + .6rem,4rem);max-width:15ch}
.w{display:inline-block;overflow:hidden;overflow:clip;vertical-align:bottom;padding-bottom:.16em;margin-bottom:-.16em}
.w>span{display:inline-block;animation:word-in 1.05s var(--ease-out) calc(.18s + var(--i) * .08s) backwards}
@keyframes word-in{from{translate:0 108%;opacity:0}}
.hero .eyebrow,.hero .lede,.hero .actions,.hero .stats>div,.pagehead .lede{animation:rise 1s var(--ease-out) var(--ld,0s) backwards}
.hero .eyebrow{--ld:.05s}
.hero .lede{--ld:.62s}
.hero .actions{--ld:.78s}
.pagehead .lede{--ld:.5s}
.hero .stats>div:nth-child(1){--ld:.95s}.hero .stats>div:nth-child(2){--ld:1.03s}.hero .stats>div:nth-child(3){--ld:1.11s}.hero .stats>div:nth-child(4){--ld:1.19s}
@keyframes rise{from{opacity:0;translate:0 26px}}
.hero .lede{margin:1.3rem 0 2rem;font-size:clamp(1rem,.5vw + .85rem,1.15rem)}
.stats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3.5rem;padding-top:1.8rem}
.stats::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%;animation:draw 1.4s var(--ease-out) .9s backwards}
.stats b{display:block;font-size:1.3rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats span{color:var(--muted);font-size:.9rem}
@media (max-width:700px){.stats{grid-template-columns:1fr 1fr}.stats b{font-size:1.1rem;white-space:nowrap}}
@media (max-width:520px){.hero .actions .btn,.cta .actions .btn{flex:1 1 100%}}

/* brand motif: the three print colours, drawn like the logo */
.cmy{position:absolute;z-index:0;right:max(1.5rem,5vw);top:50%;width:min(24vw,340px);aspect-ratio:1;margin-top:calc(min(24vw,340px) / -2);pointer-events:none}
.cmy i{position:absolute;display:block;width:62%;aspect-ratio:1;border-radius:50%;will-change:transform;animation:pop 1.1s var(--spring) var(--pd) backwards,float-c 9s ease-in-out calc(var(--pd) + 1.1s) infinite alternate}
.cmy .c{left:0;top:2%;background:var(--c);opacity:.86;--pd:.45s}
.cmy .m{right:0;top:2%;background:var(--m);opacity:.78;--pd:.6s;animation-name:pop,float-m}
.cmy .y{left:19%;bottom:0;background:var(--y);opacity:.78;--pd:.75s;animation-name:pop,float-y}
@keyframes pop{from{scale:0;opacity:0}}
@keyframes float-c{to{transform:translate3d(7%,9%,0)}}
@keyframes float-m{to{transform:translate3d(-9%,7%,0)}}
@keyframes float-y{to{transform:translate3d(3%,-10%,0)}}
@media (max-width:860px){.cmy{width:62vw;right:-16vw;top:12%;margin-top:0;opacity:.34}}
@supports (animation-timeline:scroll()){
  .cmy{animation:par-a linear both;animation-timeline:scroll(root);animation-range:0px 700px}
  .hero::before{animation:drift-a 16s ease-in-out infinite alternate,par-b linear both;animation-timeline:auto,scroll(root);animation-range:normal,0px 700px}
  .hero::after{animation:drift-b 19s ease-in-out infinite alternate,par-a linear both;animation-timeline:auto,scroll(root);animation-range:normal,0px 700px}
}
@keyframes par-a{to{translate:0 -70px}}
@keyframes par-b{to{translate:0 -40px}}

.pagehead{padding:clamp(3rem,7vw,5rem) 0 clamp(1.5rem,3vw,2.5rem)}
.pagehead h1{font-size:clamp(1.75rem,3.4vw + .6rem,3rem);margin-bottom:.9rem}
.pagehead .lede{font-size:clamp(.98rem,.4vw + .85rem,1.1rem)}

/* ---------- services list ---------- */
.services{list-style:none;padding:0;position:relative}
.services::before{content:"";display:block;height:2px;background:var(--ink);transform-origin:0 50%;transition:transform 1.2s var(--ease-out)}
.js .services:not(.in)::before{transform:scaleX(0)}
.services li{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(200px,1fr) 2fr auto;gap:.4rem 2rem;padding:1.2rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.two .services li{grid-template-columns:minmax(160px,.9fr) 1.6fr}
.services li>*{transition:translate .5s var(--ease-out)}
.services li::before{content:"";position:absolute;z-index:-1;inset:0 -1rem;border-radius:10px;background:linear-gradient(90deg,rgba(0,166,227,.12),transparent 80%);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-out)}
.services li::after{content:"";position:absolute;left:-1rem;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--c);transform:scaleY(0);transition:transform .5s var(--ease-out)}
.services li:nth-child(3n+2)::before{background:linear-gradient(90deg,rgba(229,0,125,.12),transparent 80%)}
.services li:nth-child(3n+2)::after{background:var(--m)}
.services li:nth-child(3n)::before{background:linear-gradient(90deg,rgba(255,212,0,.1),transparent 80%)}
.services li:nth-child(3n)::after{background:var(--y)}
.services h3{font-size:1.1rem;font-weight:600;letter-spacing:-.02em}
.services p{color:var(--muted)}
.services a{font-weight:600;white-space:nowrap;color:var(--y);text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:rgba(255,212,0,.35);transition:text-decoration-color .3s,translate .4s var(--ease-out)}
.services li:active::before{transform:scaleX(1)}
@media (hover:hover){
  .services li:hover::before,.services li:hover::after{transform:none}
  .services li:hover>h3,.services li:hover>p{translate:12px 0}
  .services li:hover>a{translate:-4px 0;text-decoration-color:var(--y)}
}
@media (max-width:700px){.services li,.two .services li{grid-template-columns:1fr}}

/* ---------- how we work ---------- */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-top:1rem;--k:var(--c);transition:transform .5s var(--ease-out)}
.steps li::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:2px;background:var(--k);transform-origin:0 50%;transition:transform 1s var(--ease-out) .15s}
.js .steps li:not(.in)::after{transform:scaleX(0)}
.steps li:nth-child(2){--k:var(--m)}
.steps li:nth-child(3){--k:var(--y)}
.steps li:nth-child(4){--k:var(--ink)}
.steps li::before{content:counter(s);font-weight:800;font-size:1.7rem;display:block;transition:color .3s,translate .5s var(--spring)}
.steps h3{font-size:1.05rem;margin:.2rem 0 .4rem}
.steps p,.cols3 p{color:var(--muted);font-size:.95rem}
@media (hover:hover){
  .steps li:hover{transform:translateY(-6px)}
  .steps li:hover::before{color:var(--k);translate:6px 0}
}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.cols3 h3{font-size:1.1rem;margin-bottom:.5rem;letter-spacing:-.02em}
.cols3>div{transition:transform .5s var(--ease-out),border-color .35s}
.cols3.ruled>div{border-top:2px solid var(--line);padding-top:1.1rem}
@media (hover:hover){
  .cols3>div:hover{transform:translateY(-5px)}
  .cols3.ruled>div:hover{border-color:var(--c)}
}
@media (max-width:760px){.cols3{grid-template-columns:1fr}}

.two{display:grid;grid-template-columns:1.3fr .7fr;gap:3rem;align-items:start}
.two>*{min-width:0}
.box{background:var(--panel2);padding:1.7rem;border-radius:14px;border:1px solid var(--line);transition:transform .5s var(--ease-out),border-color .35s,box-shadow .5s var(--ease-out)}
.box h3{font-size:1.05rem;margin-bottom:.6rem}
.box ul{padding-left:1.1rem;color:var(--muted)}
.box li{overflow-wrap:anywhere}
.box ul+h3{margin-top:1.3rem}
@media (hover:hover){.box:hover{transform:translateY(-5px);border-color:#4A4D59;box-shadow:0 22px 40px -24px rgba(0,0,0,.8),0 0 0 1px rgba(0,166,227,.18)}}
.prose p{max-width:62ch;margin-bottom:1rem;color:var(--muted)}
@media (max-width:820px){.two{grid-template-columns:1fr;gap:2rem}}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.tile{aspect-ratio:4/3;border-radius:12px;background:var(--panel2);display:grid;place-items:end start;padding:1rem;font-weight:600;overflow:hidden;position:relative;isolation:isolate;border:1px solid var(--line);transition:transform .6s var(--ease-out),border-color .35s,box-shadow .6s var(--ease-out)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.tile:nth-child(3n+1){background:linear-gradient(135deg,rgba(0,166,227,.35),var(--panel2))}
.tile:nth-child(3n+2){background:linear-gradient(135deg,rgba(229,0,125,.35),var(--panel2))}
.tile:nth-child(3n){background:linear-gradient(135deg,rgba(255,212,0,.28),var(--panel2))}
.tile::before{content:"";position:absolute;right:7%;top:9%;width:46%;aspect-ratio:1;pointer-events:none;opacity:.55;background:radial-gradient(circle at 35% 38%,rgba(0,166,227,.7) 0 27%,transparent 28%),radial-gradient(circle at 65% 38%,rgba(229,0,125,.6) 0 27%,transparent 28%),radial-gradient(circle at 50% 66%,rgba(255,212,0,.6) 0 27%,transparent 28%);transition:transform 1s var(--ease-out),opacity .5s}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);translate:-125% 0;transition:translate 1s var(--ease-out)}
.tile:active{transform:scale(.97)}
@media (hover:hover){
  .tile:hover{transform:translateY(-6px);border-color:#4A4D59;box-shadow:0 26px 40px -26px rgba(0,0,0,.9)}
  .tile:hover::before{transform:rotate(28deg) scale(1.18);opacity:.95}
  .tile:hover::after{translate:125% 0}
  .tile:hover img{transform:scale(1.07)}
}
@media (max-width:760px){.gallery{grid-template-columns:1fr 1fr}}

/* ---------- form + contact ---------- */
form{display:grid;gap:1rem}
label{display:grid;gap:.35rem;font-weight:600;font-size:.9rem;transition:color .25s}
label:focus-within{color:var(--y)}
input,textarea{font:inherit;font-size:max(16px,1rem);min-height:3rem;padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);color-scheme:dark;transition:border-color .25s,box-shadow .35s var(--ease-out),transform .35s var(--ease-out)}
input:focus,textarea:focus{outline:none;border-color:var(--y);box-shadow:0 0 0 4px rgba(255,212,0,.2);transform:translateY(-2px)}
input:user-invalid,textarea:user-invalid{border-color:#FF3B30}
.shake{animation:shake .45s var(--ease-out)}
@keyframes shake{20%{translate:-7px 0}40%{translate:6px 0}60%{translate:-4px 0}80%{translate:2px 0}}
dl{display:grid;gap:1.1rem}
dt{font-weight:600;color:var(--muted);font-size:.88rem}
dd{font-size:1rem;overflow-wrap:anywhere}
dd a{color:var(--y);text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:rgba(255,212,0,.35);transition:text-decoration-color .3s}
@media (hover:hover){dd a:hover{text-decoration-color:var(--y)}}

/* ---------- CTA + footer ---------- */
.cta{background:var(--panel);border-top:4px solid var(--m)}
.cta .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;justify-content:space-between}
.cta p{color:var(--muted);margin-top:.5rem}
footer{padding:3rem 0 1.5rem;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem;margin-bottom:2rem}
.fgrid h3{font-size:1rem;margin-bottom:.7rem}
.fgrid ul{list-style:none;padding:0;display:grid;gap:.4rem}
.fgrid a{display:inline-block;text-decoration:none;color:var(--muted);transition:color .25s,translate .4s var(--ease-out)}
.fgrid p,.fgrid li{color:var(--muted)}
.fgrid li{overflow-wrap:anywhere}
.copy{font-size:.85rem;color:var(--muted)}
@media (hover:hover){.fgrid a:hover{color:var(--ink);translate:5px 0;text-decoration:underline;text-decoration-color:var(--m);text-underline-offset:4px;text-decoration-thickness:2px}}
@media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}

/* ---------- tags ---------- */
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.tags li{border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;color:var(--muted);font-size:.88rem;background:var(--panel);cursor:default;transition:transform .45s var(--spring),border-color .3s,color .3s,background-color .3s}
.tags li:active{transform:scale(.93)}
@media (hover:hover){
  .tags li:hover{transform:translateY(-3px) scale(1.06);color:var(--ink);background:var(--panel2)}
  .tags li:nth-child(3n+1):hover{border-color:var(--c)}
  .tags li:nth-child(3n+2):hover{border-color:var(--m)}
  .tags li:nth-child(3n):hover{border-color:var(--y)}
}

/* ---------- section accent: the three print colours ---------- */
.head::before{content:"";width:56px;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--c) 0 33.34%,var(--m) 0 66.67%,var(--y) 0);transform-origin:0 50%;transition:transform 1s var(--ease-out) .25s}
.js .head:not(.in)::before{transform:scaleX(0)}

/* ---------- scroll reveals (hidden state only exists when JS is running) ---------- */
.js :is(.head,.services li,.steps li,.cols3>div,.box,.prose,.tile,.tags li,.bstat,.bcard,dl>div,form,.cta .wrap>div,.fgrid>div,.copy):not(.in){opacity:0}
.js .in:is(.head,.steps li,.cols3>div,.prose,form,.cta .wrap>div,.fgrid>div,.copy){animation:rv-up .85s var(--ease-out) var(--d,0s) backwards}
.js .in:is(.services li,dl>div){animation:rv-left .9s var(--ease-out) var(--d,0s) backwards}
.js .in:is(.box){animation:rv-right .95s var(--ease-out) var(--d,0s) backwards}
.js .in:is(.tile){animation:rv-zoom 1s var(--ease-out) var(--d,0s) backwards}
.js .in:is(.tags li){animation:rv-pop .7s var(--spring) var(--d,0s) backwards}
@keyframes rv-up{from{opacity:0;translate:0 26px}}
@keyframes rv-up-s{from{opacity:0;translate:0 20px}}
@keyframes rv-left{from{opacity:0;translate:-44px 0}}
@keyframes rv-right{from{opacity:0;translate:44px 0}}
@keyframes rv-zoom{from{opacity:0;scale:.9;translate:0 20px}}
@keyframes rv-pop{from{opacity:0;scale:.55}}

/* ---------- reduced motion: respect the device setting ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js :is(.head,.services li,.steps li,.cols3>div,.box,.prose,.tile,.tags li,.bstat,.bcard,dl>div,form,.cta .wrap>div,.fgrid>div,.copy){opacity:1}
}

/* ---------- SEO helpers ---------- */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.crumbs{margin-bottom:1rem;font-size:.85rem;color:var(--muted);animation:rise .9s var(--ease-out) backwards}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .5rem}
.crumbs li+li::before{content:"/";margin-right:.5rem;opacity:.5}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .25s}
.crumbs [aria-current]{color:var(--ink)}
@media (hover:hover){.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}}
/* search-engine crawlers and speed testers get the same content with no motion */
.bot *,.bot *::before,.bot *::after{animation:none!important;transition:none!important}

/* =====================================================================
   PHONE (<= 820px): its own layout, lighter animation, thumb-friendly
   ===================================================================== */
.dock{display:none}
@keyframes dock-in{from{translate:0 120%}}
@media (max-width:820px){
  html{scroll-padding-top:4.5rem}
  html.menu-open{overflow:hidden}
  body{padding-bottom:calc(5rem + env(safe-area-inset-bottom,0px))}
  body::after{content:"";position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out)}
  html.menu-open body::after{opacity:1;pointer-events:auto}
  header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(12,12,15,.98)}
  .bar{padding:.6rem 0}
  .wrap{width:min(70rem,100% - 2rem)}
  section{padding:2.4rem 0}
  .head{margin-bottom:1.4rem}
  h2{font-size:clamp(1.4rem,6vw,1.8rem)}

  /* quick-contact bar at the bottom, always under the thumb */
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:.6rem;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom,0px));background:rgba(12,12,15,.97);border-top:1px solid var(--line);animation:dock-in .7s var(--ease-out) 1s backwards;transition:translate .4s var(--ease-out)}
  .dock .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.55rem 1rem;font-size:.95rem}
  .dock .btn svg{width:1.15rem;height:1.15rem;flex:none}
  .dock .btn-wa{flex:1.4;background:#25D366;border-color:#25D366;color:#05210f}
  body:has(input:focus,textarea:focus) .dock{translate:0 130%}

  /* hero */
  .hero{padding:1.6rem 0 1.8rem}
  .hero h1{font-size:clamp(2rem,8.2vw,2.5rem);line-height:1.06}
  .hero .lede{font-size:1rem;margin:.9rem 0 1.3rem}
  .hero .actions{gap:.6rem}
  .stats{margin-top:1.6rem;padding-top:1.1rem;gap:1rem .8rem}
  .pagehead{padding:1.5rem 0 1.1rem}
  .pagehead h1{font-size:clamp(1.7rem,7.4vw,2.2rem)}
  .btn{min-height:3rem;display:inline-flex;align-items:center;justify-content:center}

  /* services become big tappable cards */
  .services{display:grid;gap:.7rem}
  .services::before{display:none}
  .services li{display:block;padding:1.05rem 1.1rem;background:var(--panel2);border:1px solid var(--line);border-radius:16px;transition:transform .3s var(--ease-out),border-color .3s}
  .services li::before,.services li::after{display:none}
  .services li:active{transform:scale(.985);border-color:#4A4D59}
  .services li>*{transition:none}
  .services h3{font-size:1.05rem}
  .services p{margin:.3rem 0 .8rem;font-size:.92rem}
  .services li>p:last-child{margin-bottom:0}
  .services a{display:inline-flex;align-items:center;min-height:2.4rem;padding:.3rem .95rem;border-radius:999px;background:rgba(255,212,0,.13);text-decoration:none;font-size:.88rem}
  .services a::after{content:"";position:absolute;inset:0;border-radius:16px}

  /* all product names: swipe sideways, 3 rows */
  .tags{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.5rem .45rem;margin-inline:0;padding:0;overflow:visible}
  .tags::-webkit-scrollbar{display:none}
  .tags li{white-space:nowrap;padding:.42rem .85rem;font-size:.86rem;line-height:1.25}
  .js .tags li:not(.in){opacity:1}
  .js .in:is(.tags li){animation:none}

  /* how we work: numbered cards */
  .steps{grid-template-columns:1fr;gap:.7rem}
  .steps li{display:grid;grid-template-columns:2.4rem 1fr;column-gap:.8rem;align-items:start;padding:1rem;background:var(--panel2);border:1px solid var(--line);border-radius:16px}
  .steps li::before{grid-row:1 / span 2;font-size:1.6rem;line-height:1.1}
  .steps li::after{left:0;right:auto;top:16%;bottom:16%;width:4px;height:auto;border-radius:0 3px 3px 0;transform-origin:50% 0}
  .js .steps li:not(.in)::after{transform:scaleY(0)}
  .steps h3{margin:0 0 .2rem}
  .cols3{gap:1.3rem}
  .gallery{gap:.6rem}
  .tile{padding:.8rem;font-size:.9rem}
  .box{padding:1.3rem}

  /* footer */
  footer{padding:2rem 0 1rem}
  .fgrid{grid-template-columns:1fr 1fr;gap:1.4rem 1rem;font-size:.92rem}
  .fgrid>div:first-child{grid-column:1 / -1}
  .fgrid>div:nth-child(3){grid-column:1 / -1;order:5}
  .fgrid a{padding:.78rem 0}
  .fgrid ul{gap:0}
  .fgrid li{display:block}
  .brand{padding:.55rem 0}
  .crumbs a,.crumbs [aria-current]{display:inline-block;padding:.7rem 0}
  dd a{display:inline-block;padding:.55rem 0}

  /* lighter, shorter animation on phones (smoother on every phone) */
  .js .in:is(.head,.steps li,.cols3>div,.prose,form,.cta .wrap>div,.fgrid>div,.copy,.services li,dl>div,.box,.tile,.bstat,.bcard){animation:rv-up-s .7s var(--ease-out) var(--d,0s) backwards}
  .hero::after,.pagehead::before,.cta::before{animation:none}
  .hero .btn-main::before,.cta .btn-main::before{animation:none;display:none}
  .w>span{animation-duration:.85s}
}
@media (max-width:520px){.fgrid>div:nth-child(2),.fgrid>div:nth-child(4){grid-column:auto}}

/* ---------- hero image (PC / tablet) ---------- */
.hero-pc{display:none}
@media (min-width:768px){
  .hero{padding:0;background:#fff}
  .hero::before,.hero::after,.hero .cmy{display:none}
  .hero-pc{display:block;position:relative;width:100%;aspect-ratio:1672/941;container-type:inline-size;overflow:hidden;color:#0b0b0b}
  .hero-pc .hp-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
  .hero-pc>*:not(.hp-bg){position:absolute;left:5.08%;margin:0}
  .hp-logo{left:4.6%!important;top:4.6%;width:32cqw;height:auto;mix-blend-mode:multiply}
  .hp-h{top:24.4%;font-weight:800;font-size:4.3cqw;line-height:1.02;letter-spacing:-.025em;white-space:nowrap}
  .hp-h b{color:#E5112B;font-weight:800}.hp-h .hl{display:block}
  .hp-h::after{content:"";display:block;width:12.2cqw;height:.28cqw;margin-top:1.1cqw;border-radius:4px;background:linear-gradient(90deg,#E5112B,rgba(229,17,43,.1))}
  .hp-p{top:52.2%;width:31cqw;font-size:max(12px,1.3cqw);line-height:1.38;color:#555}
  .hp-f{top:64%;display:flex;list-style:none;padding:0}
  .hp-f li{width:8.62cqw;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6cqw;font-weight:600;font-size:1cqw;line-height:1.2;color:#111;white-space:nowrap}
  .hp-f li+li{border-left:1px solid #e6e1e1}
  .hp-ic{width:4.8cqw;height:4.8cqw;border-radius:1.1cqw;background:#fdeaea;color:#E5112B;display:grid;place-items:center}
  .hp-ic svg{width:2.5cqw;height:2.5cqw}
  .hp-a{top:81.2%;display:flex;align-items:center;gap:2.2cqw}
  .hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:1cqw;min-width:15.7cqw;height:max(40px,3.7cqw);padding:0 2cqw;border-radius:999px;background:#E5112B;color:#fff;font-weight:700;font-size:max(13px,1.4cqw);text-decoration:none;box-shadow:0 .8cqw 1.6cqw -.6cqw rgba(229,17,43,.55);transition:transform .2s,box-shadow .2s}
  .hp-btn svg{width:1.5cqw;height:1.5cqw;min-width:14px}
  .hp-ghost{display:inline-flex;align-items:center;gap:.9cqw;color:#111;font-weight:700;font-size:max(12px,1.2cqw);text-decoration:none}
  .hp-play{width:max(28px,2.6cqw);height:max(28px,2.6cqw);border:.14cqw solid #111;border-radius:50%;display:grid;place-items:center}
  .hp-play svg{width:45%;height:45%}
  .hp-btn:hover{transform:translateY(-2px)}
  .hp-btn:focus-visible,.hp-ghost:focus-visible{outline:3px solid #111;outline-offset:3px}
  .hero>.wrap{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .hero>.wrap .actions,.hero>.wrap .stats{display:none}
}
@media (min-width:768px) and (max-width:999px){
  .hp-f{display:none}
  .hp-p{width:36cqw;top:52%}
  .hp-a{top:68%}
}

/* crisp header */
header,header *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
@media (min-width:861px){.bar{padding:0;min-height:68px}}

/* ---------- hero entrance animation (PC / tablet) ---------- */
@keyframes hp-bg{from{opacity:0;scale:1.07}to{opacity:1;scale:1}}
@keyframes hp-wipe{from{clip-path:inset(0 100% 0 0);opacity:0;translate:-1.2cqw 0}to{clip-path:inset(-8% -4% -8% -4%);opacity:1;translate:0 0}}
@keyframes hp-rise{from{opacity:0;translate:0 2.2cqw}to{opacity:1;translate:0 0}}
@keyframes hp-pop{from{opacity:0;scale:.6;rotate:-8deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes hp-line{from{scale:0 1}to{scale:1 1}}
@keyframes hp-shine{0%,60%{translate:-140% 0}100%{translate:140% 0}}
@media (min-width:768px){
  .hero-pc .hp-bg{animation:hp-bg 1.9s var(--ease-out) backwards;transform-origin:70% 40%}
  .hp-logo{animation:hp-rise 1s var(--ease-out) .25s backwards}
  .hp-h .hl{animation:hp-wipe 1.05s var(--ease-out) calc(.5s + var(--i) * .16s) backwards}
  .hp-h::after{transform-origin:0 50%;animation:hp-line 1s var(--ease-out) 1.15s backwards}
  .hp-p{animation:hp-rise 1s var(--ease-out) 1.1s backwards}
  .hp-f li{animation:hp-rise .9s var(--ease-out) calc(1.3s + var(--i) * .1s) backwards}
  .hp-f .hp-ic{animation:hp-pop .9s var(--spring) calc(1.35s + var(--i) * .1s) backwards;transition:transform .35s var(--spring),background-color .3s}
  .hp-a .hp-btn{animation:hp-rise .9s var(--ease-out) 1.75s backwards}
  .hp-a .hp-ghost{animation:hp-rise .9s var(--ease-out) 1.88s backwards}
  .hp-btn{position:relative;overflow:hidden;isolation:isolate}
  .hp-btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);translate:-140% 0;animation:hp-shine 5s ease-in-out 3s infinite}
  .hp-btn svg{transition:translate .35s var(--ease-out)}
  .hp-play{transition:background-color .3s,color .3s,scale .35s var(--spring)}
}
@media (min-width:768px) and (hover:hover){
  .hp-f li:hover .hp-ic{transform:translateY(-.4cqw) scale(1.06);background:#fbd9d9}
  .hp-btn:hover svg{translate:.4cqw 0}
  .hp-ghost:hover .hp-play{background:#111;color:#fff;scale:1.08}
}
@media (prefers-reduced-motion:reduce){.hp-btn::before{animation:none;display:none}}

/* logo in header */
.brand{background:#fff;border-radius:10px;padding:4px 10px}
.brand::before{display:none}
.brand img{display:block;height:50px;width:auto}
@media (max-width:820px){.brand{padding:3px 8px}.brand img{height:34px}}

/* our work photo gallery (masonry, keeps every photo uncropped) */
.gallery.photos{display:block;column-count:3;column-gap:1rem}
.gallery.photos .tile{display:block;aspect-ratio:auto;padding:0;margin:0 0 1rem;break-inside:avoid;background:var(--panel2)}
.gallery.photos .tile::before{display:none}
.gallery.photos .tile img{position:relative;display:block;width:100%;height:auto}
.gallery.photos figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:2.2rem .9rem .8rem;font-size:.9rem;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78));pointer-events:none}
@media (max-width:760px){.gallery.photos{column-count:2;column-gap:.6rem}.gallery.photos .tile{margin-bottom:.6rem}.gallery.photos figcaption{font-size:.78rem;padding:1.6rem .6rem .55rem}}

/* ---------- trusted by brands ---------- */
.trust .head{margin-bottom:1.8rem}
.bstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.6rem}
.bstat{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:1.3rem 1.2rem;text-align:center;transition:transform .5s var(--spring),border-color .3s}
.bstat b{display:block;font-size:clamp(1.7rem,3vw + .6rem,2.7rem);line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,var(--c),var(--m) 55%,var(--y));-webkit-background-clip:text;background-clip:text;color:transparent}
.bstat span{color:var(--muted);font-size:.92rem}
.bstat b span{font-size:inherit;color:inherit}
.brands{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.bcard{display:flex;align-items:center;justify-content:center;min-height:6.2rem;padding:1rem 1.1rem;background:#fff;border-radius:18px;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 30px -14px rgba(0,0,0,.7);transition:transform .5s var(--spring),box-shadow .4s}
.bcard img{height:var(--h,2.2rem);width:auto;max-width:100%;display:block}
.tm{margin-top:1rem;color:var(--muted);font-size:.78rem;text-align:center}
@media (hover:hover){.bcard:hover{transform:translateY(-5px) scale(1.04);box-shadow:0 18px 38px -14px rgba(0,166,227,.45)}.bstat:hover{transform:translateY(-4px);border-color:var(--m)}}
@media (max-width:900px){.brands{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.bstats{grid-template-columns:1fr;gap:.7rem}.bstat{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:.9rem 1.1rem}.bstat b{font-size:1.7rem}.brands{grid-template-columns:repeat(2,1fr);gap:.7rem}.bcard{min-height:5rem}.bcard:last-child{grid-column:1/-1}.bcard img{height:calc(var(--h,2.2rem) * .85)}}
@media (prefers-reduced-motion:reduce){.bcard,.bstat{transition:none}}