:root{
  --bg:#FFFFFF; --ink:#0A0A0A; --soft:#F4F4F2; --soft-2:#EBEBE7; --line:#E2E2DD; --muted:#65655F;
  --black:#0A0A0A; --white:#FFFFFF; --on-black-muted:#A5A5A0;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6}
a{color:inherit}
img,svg,canvas{max-width:100%}
h1,h2,h3{font-family:var(--display); line-height:1.05; margin:0; text-wrap:balance}
h2{font-size:clamp(32px,4.6vw,56px); font-weight:800; letter-spacing:-.03em}
h3{font-size:18px; font-weight:700; letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:1240px; margin:0 auto; padding-inline:20px}
section{padding-block:96px}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.lead{color:var(--muted); font-size:18px; max-width:62ch}
.sec-head{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:40px}
.sec-head > div{display:grid; gap:14px}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px}
[hidden]{display:none!important}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:600 15px var(--body); padding:14px 24px; border-radius:999px; border:0; cursor:pointer; text-decoration:none; transition:transform .2s var(--ease), background .2s, color .2s, box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-dark{background:var(--black); color:var(--white)}
.btn-light{background:var(--white); color:var(--black)}
.btn-line{background:transparent; color:currentColor; box-shadow:inset 0 0 0 1.5px currentColor}
.btn-fiverr{background:#1DBF73; color:#04220F}
.btn-upwork{background:#14A800; color:#fff}

/* NAV */
header.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:68px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font:800 21px var(--display); letter-spacing:-.02em; cursor:pointer}
.brand small{font:400 11px var(--mono); letter-spacing:.12em; color:var(--muted)}
.nav ul{display:flex; gap:4px; list-style:none; margin:0; padding:0}
.nav ul a{display:block; padding:8px 12px; border-radius:999px; text-decoration:none; font-size:15px; color:var(--muted); transition:background .2s,color .2s}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--ink); background:var(--soft)}
.menu-btn{display:none; background:none; border:1.5px solid var(--line); border-radius:10px; width:42px; height:42px; font-size:18px; cursor:pointer}
@media (max-width:1020px){
  .nav ul{position:absolute; top:68px; left:0; right:0; flex-direction:column; background:var(--white); border-bottom:1px solid var(--line); padding:10px 16px 16px; display:none}
  .nav ul.open{display:flex}
  .menu-btn{display:block}
  .nav .btn-dark{display:none}
}

/* BANNER */
.banner{position:relative; background:var(--black); color:var(--white); padding-block:0; overflow:hidden; min-height:clamp(520px,78vh,720px); display:grid}
.banner canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.banner .wrap{position:relative; z-index:2; display:grid; align-items:center; width:100%}
@media (min-width:701px){.banner .wrap{padding-inline:84px}}
.slides{display:grid; padding-block:90px 110px}
.slide{grid-area:1/1; display:grid; gap:22px; align-content:center; max-width:720px; opacity:0; transform:translateX(-40px); transition:opacity .8s var(--ease), transform .8s var(--ease); pointer-events:none; text-shadow:0 2px 24px rgba(0,0,0,.45)}
.slide.on{opacity:1; transform:none; pointer-events:auto}
.slide .eyebrow{color:rgba(255,255,255,.85); display:flex; align-items:center; gap:10px}
.slide .eyebrow i{display:inline-block; width:28px; height:2px; background:var(--white)}
.slide .sh{font-size:clamp(42px,6.4vw,88px); font-weight:800; letter-spacing:-.04em}
.slide p{color:rgba(255,255,255,.88); font-size:19px; max-width:50ch}
.slide .ctas{display:flex; gap:12px; flex-wrap:wrap; text-shadow:none}
.slide .btn-line{background:rgba(0,0,0,.25); backdrop-filter:blur(4px)}
.arrow{position:absolute; top:50%; z-index:3; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:0; background:rgba(0,0,0,.45); color:#fff; font-size:24px; cursor:pointer; backdrop-filter:blur(6px); transition:background .2s, transform .2s}
.arrow:hover{background:#fff; color:#000; transform:translateY(-50%) scale(1.08)}
.arrow.prev{left:14px}.arrow.next{right:14px}
.dots{position:absolute; left:0; right:0; bottom:28px; z-index:3; display:flex; gap:10px; justify-content:center}
.dots button{width:46px; height:4px; border-radius:4px; border:0; background:rgba(255,255,255,.35); cursor:pointer; padding:0; position:relative; overflow:hidden}
.dots button i{position:absolute; inset:0; width:0; background:var(--white)}
.dots button.on i{animation:fillbar 6s linear forwards}
@keyframes fillbar{to{width:100%}}
.flagname{position:absolute; right:24px; bottom:24px; z-index:3; font:600 12px var(--mono); letter-spacing:.16em; color:rgba(255,255,255,.8)}
@media (max-width:700px){.arrow{display:none}.slides{padding-block:64px 90px}.flagname{display:none}}

/* CATEGORIES */
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.cat{position:relative; border-radius:24px; overflow:hidden; background:var(--soft); cursor:pointer; display:flex; flex-direction:column; transition:transform .45s var(--ease), box-shadow .45s var(--ease); border:1px solid var(--line); text-align:left; font:inherit; color:inherit; padding:0}
.cat .art{aspect-ratio:1; overflow:hidden; display:grid; place-items:center; position:relative}
.cat .art > *{width:100%; height:100%; transition:transform .6s var(--ease); display:block}
.cat:hover,.cat:focus-visible{transform:scale(1.045); box-shadow:0 26px 50px rgba(0,0,0,.16); z-index:2}
.cat:hover .art > *,.cat:focus-visible .art > *{transform:scale(1.12)}
.cat .body{padding:20px 22px 22px; display:grid; gap:6px; background:var(--white); border-top:1px solid var(--line)}
.cat .num{font:600 12px var(--mono); color:var(--muted); letter-spacing:.12em}
.cat h3{font-size:24px}
.cat .go{display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--muted)}
.cat .go b{width:36px; height:36px; border-radius:50%; background:var(--black); color:var(--white); display:grid; place-items:center; transition:transform .35s var(--ease)}
.cat:hover .go b{transform:rotate(-45deg)}
@media (max-width:1000px){.cats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cats{grid-template-columns:1fr}}

/* ITEM GRID */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.item{background:var(--white); border:1px solid var(--line); border-radius:18px; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease); position:relative; text-align:left}
.item .art{aspect-ratio:1; overflow:hidden; position:relative; background:var(--soft)}
.item .art > canvas,.item .art > svg{width:100%; height:100%; display:block; transition:transform .55s var(--ease)}
.item:hover,.item:focus-visible{transform:scale(1.04); box-shadow:0 22px 44px rgba(0,0,0,.14); z-index:2}
.item:hover .art > canvas,.item:hover .art > svg,.item:focus-visible .art > canvas,.item:focus-visible .art > svg{transform:scale(1.13)}
.item .kind{position:absolute; top:12px; left:12px; font:600 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; padding:5px 9px; border-radius:6px; background:var(--black); color:var(--white); z-index:1}
.item .zoom{position:absolute; right:12px; bottom:12px; width:38px; height:38px; border-radius:50%; background:var(--white); display:grid; place-items:center; opacity:0; transform:scale(.6); transition:.3s var(--ease); z-index:1; box-shadow:0 4px 14px rgba(0,0,0,.18)}
.item:hover .zoom{opacity:1; transform:none}
.item .meta{padding:14px 16px 16px; display:grid; gap:4px}
.item .spec{font:12px var(--mono); color:var(--muted); font-variant-numeric:tabular-nums}
.item.pop{animation:pop .35s var(--ease)}
@keyframes pop{40%{transform:scale(.95)}100%{transform:scale(1.04)}}
.ripple{position:absolute; border-radius:50%; background:rgba(255,255,255,.7); transform:scale(0); animation:ripple .6s ease-out forwards; pointer-events:none; z-index:3; mix-blend-mode:difference}
@keyframes ripple{to{transform:scale(4); opacity:0}}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,1fr); gap:12px}.item .meta{padding:12px}}
@media (max-width:380px){.grid{grid-template-columns:1fr}}

/* CATEGORY PAGE */
.cat-hero{background:var(--black); color:var(--white); padding-block:72px 64px; overflow:hidden; position:relative; min-height:540px; display:grid; align-items:center}
.cat-hero .thread{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.cat-hero .wrap{display:grid; gap:18px; position:relative; z-index:2; width:100%}
.cat-hero .back{justify-self:start; background:none; border:1px solid rgba(255,255,255,.3); color:var(--white); border-radius:999px; padding:8px 16px; font:500 14px var(--body); cursor:pointer; transition:.2s}
.cat-hero .back:hover{background:var(--white); color:var(--black)}
.cat-hero h1{font-size:clamp(46px,7.6vw,104px); font-weight:800; letter-spacing:-.045em; max-width:11ch}
.cat-hero h1 .w{display:inline-block; white-space:nowrap; margin-right:.22em}
.cat-hero h1 .ch{display:inline-block; animation:rise .9s var(--ease) both; animation-delay:calc(var(--i) * 38ms + 150ms)}
@keyframes rise{from{opacity:0; transform:translateY(70%) rotate(10deg)}}
.cat-hero p{color:var(--on-black-muted); font-size:18px; max-width:52ch}
.cat-hero .count{font:600 13px var(--mono); letter-spacing:.14em; color:var(--on-black-muted)}
.cat-hero .fade{animation:fadeUp .8s var(--ease) both}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)}}
.floaters{position:absolute; inset:0; z-index:1; pointer-events:none}
.floater{position:absolute; right:var(--r); top:var(--t); width:var(--s); aspect-ratio:1; pointer-events:auto; cursor:pointer; animation:popIn .8s cubic-bezier(.2,1.4,.4,1) both; animation-delay:var(--d)}
.floater .in{width:100%; height:100%; border-radius:20px; overflow:hidden; border:4px solid #fff; box-shadow:0 24px 50px rgba(0,0,0,.55); transform:rotate(var(--rot)); animation:bob var(--dur) ease-in-out infinite alternate; animation-delay:var(--d); transition:transform .4s var(--ease)}
.floater .in > *{width:100%; height:100%; display:block}
.floater:hover .in{transform:rotate(0deg) scale(1.15); animation-play-state:paused}
.floater:hover{z-index:3}
@keyframes popIn{from{opacity:0; transform:scale(.3) translateY(40px)}}
@keyframes bob{from{translate:0 -10px; rotate:-2deg}to{translate:0 12px; rotate:2deg}}
@media (max-width:900px){.floaters{display:none}.cat-hero h1{max-width:none}}
.cat-tabs{display:flex; gap:8px; flex-wrap:wrap}
.cat-tabs button{background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:8px 16px; font:500 14px var(--body); cursor:pointer}
.cat-tabs button[aria-pressed="true"]{background:var(--white); color:var(--black)}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.chips button{background:var(--white); border:1.5px solid var(--line); border-radius:999px; padding:8px 15px; font:500 14px var(--body); cursor:pointer; color:var(--ink); transition:.2s}
.chips button:hover{border-color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--black); color:var(--white); border-color:var(--black)}
.chips button small{font-family:var(--mono); opacity:.6; margin-left:6px}
.type-help{background:var(--soft); border-radius:14px; padding:14px 18px; margin-bottom:24px; color:var(--muted); display:flex; gap:12px; align-items:baseline}
.type-help b{color:var(--ink)}
.view{animation:viewIn .55s var(--ease)}
@keyframes viewIn{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}

/* COMPARE */
.vs{display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center}
.compare{position:relative; aspect-ratio:1; width:100%; max-width:540px; border-radius:24px; overflow:hidden; background:var(--soft); justify-self:center; border:1px solid var(--line)}
.compare svg,.compare canvas{position:absolute; inset:0; width:100%; height:100%}
.compare canvas{image-rendering:pixelated}
.compare .bar{position:absolute; top:0; bottom:0; width:3px; background:var(--black); transform:translateX(-50%); pointer-events:none}
.compare .bar::after{content:"⇆"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:var(--black); color:var(--white); display:grid; place-items:center; font-size:20px}
.compare input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0}
.tag{position:absolute; bottom:14px; font:600 11px var(--mono); letter-spacing:.1em; padding:6px 10px; border-radius:6px; background:var(--black); color:var(--white); pointer-events:none}
.tag.l{left:14px}.tag.r{right:14px; background:var(--white); color:var(--black)}
.checks{display:grid; gap:12px; margin-top:26px}
.checks p{display:flex; gap:12px; color:var(--muted)}
.checks b{color:var(--ink)}
@media (max-width:900px){.vs{grid-template-columns:1fr}}

/* PROCESS */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
.step{border-top:2px solid var(--ink); padding-top:18px; display:grid; gap:8px; align-content:start}
.step .n{font:600 13px var(--mono); color:var(--muted)}
.step p{color:var(--muted); font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr; row-gap:30px}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* FORMATS */
.formats{display:flex; flex-wrap:wrap; gap:10px}
.fmt{font:600 14px var(--mono); padding:10px 14px; border-radius:10px; border:1.5px solid var(--line); background:var(--white)}
.fmt small{display:block; font-weight:400; font-size:10px; color:var(--muted)}
.fmt.v{background:var(--black); color:var(--white); border-color:var(--black)}
.fmt.v small{color:var(--on-black-muted)}

/* PRICING */
.price-wrap{display:grid; grid-template-columns:1.25fr 1fr; gap:24px}
.ptable{border:1.5px solid var(--ink); border-radius:20px; overflow:hidden}
.prow{display:grid; grid-template-columns:1fr auto; gap:16px; padding:18px 22px; border-bottom:1px solid var(--line); align-items:center; transition:background .2s}
.prow:hover{background:var(--soft)}
.prow:last-child{border-bottom:0}
.prow span{color:var(--muted); font-size:14px; display:block}
.prow b{font:600 22px var(--mono); white-space:nowrap}
.prow b small{font-size:12px; color:var(--muted); font-weight:400}
.est{background:var(--black); color:var(--white); border-radius:20px; padding:28px; display:grid; gap:16px; align-content:start}
.est h3{font-size:24px}
.est label{font-size:13px; font-weight:600; display:grid; gap:6px; color:var(--on-black-muted)}
.est .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.est input,.est select{font:500 16px var(--body); padding:11px 12px; border-radius:10px; border:1px solid #333; background:#161616; color:var(--white); width:100%}
.est .out{background:var(--white); color:var(--black); border-radius:14px; padding:16px 18px; display:grid; grid-template-columns:1fr 1fr; gap:10px; font-family:var(--mono)}
.est .out b{display:block; font-size:26px; font-variant-numeric:tabular-nums}
.est .out span{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.est .note{font-size:12px; color:var(--on-black-muted)}
@media (max-width:900px){.price-wrap{grid-template-columns:1fr}}

/* CONTACT */
.contact-sec{background:var(--black); color:var(--white)}
.contact{display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center}
.contact .lead{color:var(--on-black-muted)}
.contact .ctas{display:grid; gap:12px}
.contact .btn{padding:18px 24px; font-size:16px; justify-content:space-between}
.mail{display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; font:14px var(--mono); border:1px solid #333; padding:10px 10px 10px 16px; border-radius:14px}
.mail button{background:var(--white); color:var(--black); border:0; border-radius:999px; padding:8px 14px; font:600 13px var(--body); cursor:pointer}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
/* QUOTE FORM */
.contact.has-quote{align-items:start}
.quote{display:grid; gap:14px; margin-top:8px; background:#111; border:1px solid #262626; border-radius:20px; padding:24px}
.quote label{font-size:13px; font-weight:600; display:grid; gap:6px; color:var(--on-black-muted)}
.quote label small{font-weight:400}
.quote .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.quote input,.quote select,.quote textarea{font:500 16px var(--body); padding:11px 12px; border-radius:10px; border:1px solid #333; background:#161616; color:var(--white); width:100%; min-width:0}
.quote textarea{resize:vertical}
.quote input[type=file]{padding:9px 10px; font-size:14px}
.quote input::file-selector-button{font:600 13px var(--body); border:0; border-radius:999px; padding:7px 12px; margin-right:10px; background:var(--white); color:var(--black); cursor:pointer}
.quote input:focus,.quote select:focus,.quote textarea:focus{outline:2px solid var(--white); outline-offset:1px; border-color:transparent}
.quote .btn{justify-content:space-between}
.quote .note{font-size:12px; color:var(--on-black-muted); margin:0}
.contact.has-quote .ctas{position:sticky; top:110px}
.ctas .or{font:600 12px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--on-black-muted)}
@media (max-width:860px){.contact.has-quote .ctas{position:static}}
@media (max-width:520px){.quote{padding:18px}.quote .row{grid-template-columns:1fr}}

footer{background:var(--black); color:var(--on-black-muted); border-top:1px solid #222; padding-block:28px; font-size:14px}
footer .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* LIGHTBOX */
.lb{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(8,8,8,.82); backdrop-filter:blur(8px); animation:fade .3s ease}
@keyframes fade{from{opacity:0}}
.lb-panel{background:var(--white); border-radius:26px; width:min(1040px,100%); max-height:calc(100% - 20px); overflow:auto; display:grid; grid-template-columns:1.1fr 1fr; animation:lbIn .6s cubic-bezier(.2,1.35,.4,1)}
@keyframes lbIn{from{opacity:0; transform:scale(.55) rotate(-5deg)}to{opacity:1; transform:none}}
.lb-art{background:var(--soft); aspect-ratio:1; position:relative; overflow:hidden}
.lb-art > canvas,.lb-art > svg{width:100%; height:100%; display:block}
.lb-art .live{position:absolute; top:14px; left:14px; font:600 11px var(--mono); letter-spacing:.12em; background:var(--black); color:var(--white); padding:6px 10px; border-radius:99px; display:flex; gap:8px; align-items:center}
.lb-art .live i{width:8px; height:8px; border-radius:50%; background:#FF4D4D; animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.lb-art .ctr{position:absolute; bottom:14px; left:14px; right:14px; display:flex; justify-content:space-between; font:600 12px var(--mono); background:rgba(255,255,255,.92); padding:8px 12px; border-radius:10px; font-variant-numeric:tabular-nums}
.lb-info{padding:34px; display:grid; gap:16px; align-content:start}
.lb-info h2{font-size:clamp(28px,3.4vw,40px)}
.lb-info .pill{justify-self:start; font:600 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; background:var(--black); color:var(--white); padding:6px 10px; border-radius:6px}
.lb-info .help{color:var(--muted)}
.lb-info .spec{font:13px var(--mono); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:12px}
.lb-info .acts{display:grid; gap:10px}
.lb-top{display:flex; justify-content:space-between; align-items:center}
.lb-nav{display:flex; gap:8px}
.lb-nav button,.lb-close{width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line); background:var(--white); cursor:pointer; font-size:18px; transition:.2s}
.lb-nav button:hover,.lb-close:hover{background:var(--black); color:var(--white); border-color:var(--black)}
@media (max-width:800px){.lb-panel{grid-template-columns:1fr}.lb-info{padding:22px}}

/* ABOUT */
.ab-hero{background:var(--black); color:var(--white); padding-block:84px 96px; overflow:hidden; position:relative}
.ab-hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center; position:relative; z-index:1}
.ab-hero .thread-bg{position:absolute; inset:0; opacity:.5; pointer-events:none}
.ab-hero h1{font-size:clamp(44px,6.4vw,88px); font-weight:800; letter-spacing:-.045em}
.ab-hero h1 span{color:#F2B134}
.ab-hero .lead{color:#CFCFCA; font-size:19px}
.ab-hero .fade{animation:fadeUp .8s var(--ease) both}
.ab-role{display:flex; gap:8px; flex-wrap:wrap}
.ab-role span{font:600 12px var(--mono); letter-spacing:.12em; text-transform:uppercase; border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:7px 13px; color:rgba(255,255,255,.88)}
.ab-ctas{display:flex; gap:12px; flex-wrap:wrap}
.ab-photo{position:relative; justify-self:center; width:min(430px,100%); animation:popIn .9s cubic-bezier(.2,1.3,.4,1) both .2s}
.ab-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:28px; display:block; box-shadow:0 30px 70px rgba(0,0,0,.55)}
.ab-photo::before{content:""; position:absolute; inset:-14px; border:2px dashed rgba(255,255,255,.3); border-radius:38px; pointer-events:none}
.ab-badge{position:absolute; left:-26px; bottom:36px; background:var(--white); color:var(--black); border-radius:16px; padding:12px 16px; display:flex; gap:10px; align-items:center; font:600 14px var(--body); box-shadow:0 14px 34px rgba(0,0,0,.35)}
.ab-badge i{width:10px; height:10px; border-radius:50%; background:#1DBF73; box-shadow:0 0 0 4px rgba(29,191,115,.22); animation:blink 1.6s infinite}
.ab-chip{position:absolute; right:-20px; top:30px; background:#F2B134; color:#0A0A0A; border-radius:14px; padding:10px 14px; font:700 12px var(--mono); letter-spacing:.1em; transform:rotate(4deg); box-shadow:0 12px 28px rgba(0,0,0,.3)}
.ab-stats{display:grid; grid-template-columns:repeat(4,1fr); border:1.5px solid var(--ink); border-radius:22px; overflow:hidden; background:var(--white)}
.ab-stats > div{padding:26px 24px; border-right:1px solid var(--line); display:grid; gap:4px}
.ab-stats > div:last-child{border-right:0}
.ab-stats b{font:800 clamp(30px,3.4vw,44px)/1 var(--display); letter-spacing:-.03em}
.ab-stats span{color:var(--muted); font-size:14px}
.ab-story{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.ab-story figure{margin:0; position:relative}
.ab-story img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:24px; display:block}
.ab-story figcaption{position:absolute; left:16px; bottom:16px; font:600 11px var(--mono); letter-spacing:.12em; background:var(--black); color:var(--white); padding:7px 11px; border-radius:8px}
.ab-txt{display:grid; gap:18px}
.ab-txt p{color:var(--muted); font-size:17px}
.ab-txt p b{color:var(--ink)}
.ab-inc{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.ab-inc span{font:600 13px var(--mono); padding:8px 12px; border-radius:10px; background:var(--soft)}
.ab-skills{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.ab-card{border:1px solid var(--line); border-radius:24px; padding:30px; display:grid; gap:20px; align-content:start; background:var(--white)}
.ab-card.dark{background:var(--black); color:var(--white); border-color:var(--black)}
.ab-card h3{font-size:26px}
.ab-card .eyebrow{color:inherit; opacity:.6}
.ab-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px}
.ab-list li{display:flex; gap:10px; font-size:15px; line-height:1.4}
.ab-list li::before{content:""; flex:none; width:14px; height:2px; margin-top:10px; background:currentColor; opacity:.45}
.ab-tools{display:flex; flex-wrap:wrap; gap:10px}
.ab-tools span{font:600 15px var(--body); padding:12px 16px; border:1.5px solid var(--line); border-radius:14px; background:var(--white); transition:border-color .2s, transform .2s}
.ab-tools span:hover{border-color:var(--ink); transform:translateY(-2px)}
.ab-tools span small{display:block; font:400 11px var(--mono); letter-spacing:.06em; color:var(--muted)}
.ab-promise{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:center}
.ab-promise img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:24px; display:block}
.ab-pl{display:grid; margin-top:28px}
.ab-pl > div{display:grid; grid-template-columns:56px 1fr; gap:12px; padding:20px 0; border-top:2px solid var(--ink)}
.ab-pl .n{font:600 13px var(--mono); color:var(--muted); padding-top:3px}
.ab-pl p{color:var(--muted); margin-top:6px}
.ab-facts{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.ab-facts span{font-size:14px; padding:9px 14px; border-radius:999px; background:var(--soft)}
.ab-facts b{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-right:6px}
@media (max-width:900px){
  .ab-hero .wrap,.ab-story,.ab-skills,.ab-promise{grid-template-columns:1fr; gap:40px}
  .ab-photo{width:min(360px,86%)}
  .ab-stats{grid-template-columns:1fr 1fr}
  .ab-stats > div:nth-child(2){border-right:0}
  .ab-stats > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .ab-promise img{max-width:420px}
}
@media (max-width:520px){.ab-list{grid-template-columns:1fr}.ab-badge{left:-8px}.ab-chip{right:-8px}}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important} html{scroll-behavior:auto}}

/* SEO / service pages */
h1.h2like{font-size:clamp(32px,4.6vw,56px); font-weight:800; letter-spacing:-.03em}
.slide .sh{font-family:var(--display); line-height:1.05; margin:0}
.seo{border-top:1px solid var(--line)}
.seo-grid{display:grid; grid-template-columns:1.5fr .9fr; gap:56px; align-items:start}
.seo-main{display:grid; gap:34px}
.seo-main h2{font-size:clamp(28px,3.6vw,44px)}
.seo-main h3{font-size:22px; margin-bottom:12px}
.seo-main p{color:var(--muted); font-size:17px}
.seo-main p b{color:var(--ink)}
.seo-main .ab-list li{color:var(--ink)}
.facts{position:sticky; top:92px; background:var(--black); color:var(--white); border-radius:24px; padding:28px; display:grid; gap:14px}
.facts h3{font-size:22px}
.facts dl{margin:0; display:grid; gap:0}
.facts dl div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid #2a2a2a; font-size:15px}
.facts dt{color:var(--on-black-muted)}
.facts dd{margin:0; font-weight:600; text-align:right}
.facts .btn{width:100%}
.faq{display:grid; gap:10px; margin-top:6px}
.faq details{border:1.5px solid var(--line); border-radius:16px; padding:16px 20px; background:var(--white)}
.faq details[open]{border-color:var(--ink)}
.faq summary{cursor:pointer; font:700 18px var(--display); letter-spacing:-.01em; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:400 24px var(--body); line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px}
.related{display:flex; flex-wrap:wrap; gap:10px}
.related a{text-decoration:none; font-weight:600; padding:12px 18px; border-radius:999px; border:1.5px solid var(--ink); transition:.2s}
.related a:hover{background:var(--ink); color:var(--white)}
.foot-links{display:flex; flex-wrap:wrap; gap:6px 18px}
.foot-links a{text-decoration:none; color:var(--on-black-muted)}
.foot-links a:hover{color:var(--white)}
@media (max-width:900px){.seo-grid{grid-template-columns:1fr; gap:36px}.facts{position:static}}
/* list items with inline bold text */
.ab-list li{display:block; position:relative; padding-left:24px}
.ab-list li::before{position:absolute; left:0; top:10px; margin:0}
/* ARTICLE */
.article section{padding:0}
.art-hero{background:var(--black); color:var(--white); padding-block:72px 64px}
.art-hero .wrap{max-width:860px; display:grid; gap:18px}
.art-hero h1{font-size:clamp(36px,5.4vw,64px); font-weight:800; letter-spacing:-.04em}
.art-hero .lead{color:#CFCFCA; font-size:19px}
.art-meta{display:flex; gap:10px; flex-wrap:wrap; font:600 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--on-black-muted)}
.art-meta span+span::before{content:"·"; margin-right:10px}
.article{max-width:860px; margin:0 auto; padding:56px 20px 24px; display:grid; gap:40px}
.article h2{font-size:clamp(26px,3.2vw,36px)}
.article p{color:#3d3d39; font-size:18px; line-height:1.7; margin-top:12px}
.article p b{color:var(--ink)}
.quick{background:#FFF6E0; border-left:5px solid #F2B134; border-radius:14px; padding:20px 22px; font-size:18px; line-height:1.7}
.fmt-table{width:100%; border-collapse:separate; border-spacing:0; border:1.5px solid var(--ink); border-radius:18px; overflow:hidden; font-size:15px}
.fmt-table th{background:var(--black); color:var(--white); text-align:left; font:600 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:12px 14px}
.fmt-table td{padding:14px; border-top:1px solid var(--line); vertical-align:top}
.fmt-table tr:nth-child(even) td{background:var(--soft)}
.fmt-table td:first-child{font:700 17px var(--mono); white-space:nowrap}
.fmt-table .tag2{display:inline-block; font:600 11px var(--mono); padding:4px 8px; border-radius:6px; background:var(--soft-2); white-space:nowrap}
.fmt-table .tag2.m{background:#F2B134}
.art-cta{background:var(--black); color:var(--white); border-radius:24px; padding:32px; display:grid; gap:14px}
.art-cta p{color:#CFCFCA; margin:0}
.art-cta .row{display:flex; gap:12px; flex-wrap:wrap}
@media (max-width:640px){.fmt-table thead{display:none}.fmt-table,.fmt-table tbody,.fmt-table tr,.fmt-table td{display:block;width:100%}.fmt-table tr{border-top:1px solid var(--line);padding:6px 0}.fmt-table td{border:0;padding:6px 14px}.fmt-table tr:nth-child(even) td{background:none}}

/* Concept mockups (AI-generated garment previews, always labelled) */
.mock-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.mock{margin:0; position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:var(--soft)}
.mock img{width:100%; height:auto; aspect-ratio:1408/768; object-fit:cover; display:block}
.mock .mock-tag{position:absolute; left:12px; top:12px; font:600 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; background:var(--ink); color:#fff; padding:6px 9px; border-radius:7px}
.mock figcaption{padding:12px 14px; font-size:14px; color:var(--muted)}
.mock figcaption b{color:var(--ink); font-weight:600}
.mock-note{margin-top:18px; font-size:14px; color:var(--muted); max-width:80ch}
@media (max-width:900px){.mock-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.mock-grid{grid-template-columns:1fr}}

/* format finder (embroidery-file-formats) */
.fmt-finder{min-width:0; margin-top:18px; background:var(--soft); border:1.5px solid var(--ink); border-radius:18px; padding:20px 22px; display:grid; gap:10px}
.fmt-finder label{font:600 12px var(--mono); letter-spacing:.1em; text-transform:uppercase}
.fmt-finder select{width:100%; min-width:0; font:600 17px var(--body); padding:12px 14px; border:1.5px solid var(--ink); border-radius:12px; background:var(--white); color:var(--ink); max-width:100%}
.fmt-finder .fmt-out{margin:0; font-size:18px}
.fmt-finder .fmt-out b{background:#F2B134; padding:2px 8px; border-radius:6px; font-family:var(--mono)}

/* new-client offer (2026-10-19) */
.offer-bar{display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 20px; background:#F2B730; color:#0A0A0A; font-size:14.5px; text-decoration:none; text-align:center; line-height:1.4}
.offer-bar span{font:600 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; background:#0A0A0A; color:#F2B730; padding:6px 12px; border-radius:999px; white-space:nowrap}
.offer-bar:hover span{background:#fff; color:#0A0A0A}
.offer-card{display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; padding:22px 24px; margin-bottom:24px; border-radius:20px; background:#F2B730; color:#0A0A0A}
.offer-card h3{font-size:22px}
.offer-card p{font-size:15px; margin-top:6px; max-width:60ch}
.offer-card .btn{white-space:nowrap}
@media (max-width:700px){.offer-card{grid-template-columns:1fr}.offer-bar{font-size:13.5px; padding:9px 16px}}
.fmt-table.plain td:first-child{font:inherit; white-space:normal}
.offer-bar em{font-style:normal}

@media (max-width:640px){.fmt-table td[data-l]::before{content:attr(data-l);display:block;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#6b6b6b);margin-bottom:2px}}

/* offer moved from the top bar to the footer (2026-11-03) */
.foot-offer{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding-bottom:16px; border-bottom:1px solid #222; color:#fff; text-decoration:none; font-size:15px; line-height:1.45}
.foot-offer em{font-style:normal}
.foot-offer b{color:#F2B730}
.foot-offer span{font:600 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#F2B730; border:1px solid #F2B730; padding:5px 11px; border-radius:999px; white-space:nowrap}
.foot-offer:hover span{background:#F2B730; color:#0A0A0A}