/* Fuse Web Design, 2026. Black ground, the logo's bolt yellow, violet used sparingly. */
:root{--bg:#000;--bg2:#0b0b0d;--card:#121215;--card2:#1a1a1f;--line:rgba(255,255,255,.1);--ink:#f9fafb;--muted:#a3a3ad;
--yellow:#fbbe07;--yellow-hi:#ffd34d;--on-yellow:#14110a;--violet:#8b5cf6;--violet-hi:#a78bfa;--violet-band:#5b34c9;
--bolt:linear-gradient(90deg,#f4d101,#ffb30b);--grad:linear-gradient(90deg,#fbbe07 0%,#fbbe07 25%,#a78bfa 100%);
--head-h:76px;--r-img:12px;--r-card:24px;
--display:"Poppins","Helvetica Neue",Arial,sans-serif;--body:"Poppins","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;color-scheme:dark}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);font-size:17px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--yellow)}a:hover{color:var(--yellow-hi)}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-weight:800;font-size:clamp(34px,3.7vw,54px);line-height:1.08;letter-spacing:-.02em}
h2{font-weight:700;font-size:clamp(28px,4vw,52px);line-height:1.08;letter-spacing:-.015em}
h3{font-weight:600;font-size:22px;line-height:1.25}
p{margin:0}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.wrap{max-width:1240px;margin:0 auto;padding-inline:24px}
.section{padding-block:clamp(64px,8vw,120px);position:relative}
.alt{background:var(--bg2)}
.muted{color:var(--muted)}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:34em}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--yellow)}
.eyebrow::before{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--yellow),var(--violet));flex:none}
.section-head{display:flex;flex-direction:column;gap:18px;max-width:46em;margin-bottom:clamp(32px,5vw,60px)}
.head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(32px,5vw,60px)}
.head-row .section-head{margin-bottom:0}
.link-arrow{font-weight:600;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.link-arrow::after{content:"\2192";transition:transform .25s;color:var(--violet-hi)}
.link-arrow:hover::after{transform:translateX(5px)}
.bolt-ico{display:inline-block;height:.85em;width:auto;vertical-align:-.08em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;text-decoration:none;padding:16px 28px;border-radius:999px;border:1.5px solid transparent;font-family:inherit;font-size:16px;cursor:pointer;line-height:1.2;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-accent{background:var(--yellow);color:var(--on-yellow)}.btn-accent:hover{color:var(--on-yellow);box-shadow:0 8px 24px rgba(251,190,7,.25)}
.btn-ghost{border-color:var(--violet);color:var(--ink)}.btn-ghost:hover{background:var(--violet-band);border-color:var(--violet-band);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}

/* header */
.site-head{position:sticky;top:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.site-head.scrolled{background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--line)}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px;min-height:75px;padding-block:12px;position:relative}
.logo img{height:40px;width:auto}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 30px;font-weight:500;font-size:15px}
.nav a{color:var(--ink);text-decoration:none;opacity:.85}
.nav a:not(.btn){padding-block:9px}
.nav a:hover{opacity:1;color:var(--yellow)}
.nav a.btn{opacity:1;color:var(--on-yellow);padding:11px 20px;font-size:15px}
.nav-toggle{display:none;min-height:44px;background:none;border:1.5px solid rgba(255,255,255,.3);color:var(--ink);border-radius:999px;padding:9px 18px;font:inherit;font-weight:600;font-size:14px;cursor:pointer}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 24px 20px;font-size:17px;background:#000;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a:not(.btn){padding-block:11px;align-self:stretch}
  .nav a.btn{margin-top:10px}
}

/* hero with the wall of real projects */
.hero{position:relative;overflow:hidden;margin-top:calc(-1*var(--head-h));padding-top:var(--head-h)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 55% at 8% 70%,rgba(91,52,201,.30),transparent 70%),radial-gradient(45% 50% at 80% 50%,rgba(251,190,7,.07),transparent 70%);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;min-height:min(760px,calc(100vh - var(--head-h)))}
.hero-copy{display:flex;flex-direction:column;gap:24px;padding-block:48px}
.proof{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:6px;font-size:13.5px;color:var(--muted)}
.proof span{white-space:nowrap}
.proof b{color:var(--ink);font-weight:600}
.proof span:nth-child(2) b{color:var(--violet-hi)}
.proof span:nth-child(3) b{color:var(--yellow)}
.proof .stars,.review .stars,.rating .stars,.stars{color:var(--yellow);letter-spacing:1px;font-size:12px}
.wall{position:relative;height:min(760px,calc(100vh - var(--head-h)));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;transform:rotate(-7deg) scale(1.18);transform-origin:left center;margin-right:calc(-1 * max(0px,(100vw - 1240px)/2));-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.wall-col{display:flex;flex-direction:column;gap:16px;animation:wall 150s linear infinite}
.wall-col:nth-child(2){animation-duration:190s;animation-direction:reverse}
.wall-col:nth-child(3){animation-duration:170s}
.wall-col img{width:100%;height:auto;border-radius:var(--r-img);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.6)}
@keyframes wall{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media (max-width:900px){
  .hero-in{grid-template-columns:minmax(0,1fr);min-height:0}
  .wall{height:340px;transform:rotate(-5deg) scale(1.12);transform-origin:center;margin-right:0;margin-bottom:-20px}
  .wall-col{animation-duration:200s}
  .hero-copy{padding-block:40px 24px}
}
@media (max-width:480px){.hero-copy{gap:20px;padding-block:24px}.btn-row .btn{flex:1 1 auto}}
.page-hero::before{background:none}
.page-hero .hero-in{grid-template-columns:minmax(0,1fr);min-height:0}
.page-hero .hero-copy{max-width:52em;padding-block:72px 56px}
.page-hero h1{font-size:clamp(32px,4.4vw,58px)}
.page-hero + .section:not(.alt){padding-top:clamp(40px,5vw,72px)}

/* reel: one line of projects sliding under inner-page heroes */
.reel{overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.reel-track{display:flex;gap:18px;width:max-content;animation:reel 70s linear infinite}
.reel-track img{width:300px;height:210px;object-fit:cover;object-position:top;border-radius:var(--r-img);border:1px solid var(--line)}
@keyframes reel{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* one compact line: the problems we fix */
.fixes-band{padding-block:clamp(22px,3vw,36px)}
.fixline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;font-size:14px}
.fixline b{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-right:6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.fixline span{padding:8px 16px;border-radius:999px;background:var(--card);color:var(--ink);white-space:nowrap}
@media (max-width:760px){.fixline{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-block:4px}.fixline::-webkit-scrollbar{display:none}.fixline b{flex:none}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.stats div{background:var(--bg);padding:32px 28px;display:flex;flex-direction:column;gap:6px}
.stats b{font-family:var(--display);font-weight:700;font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:-.02em}
.stats span{color:var(--muted);font-size:15px}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stats div{padding:24px 20px}}

/* what we do: big cards that stack as you scroll, one per brand color */
.stack{display:flex;flex-direction:column;padding-bottom:14vh}
.stack-card{position:sticky;top:calc(var(--head-h) + 16px + var(--i,0) * 22px);margin-bottom:36px;background-image:linear-gradient(140deg,#1b1546 0%,transparent 60%);border-radius:36px;padding:clamp(28px,5vw,68px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,72px);align-items:center;min-height:clamp(480px,calc(100vh - var(--head-h) - 170px),760px);background:var(--card);box-shadow:0 -20px 60px rgba(0,0,0,.55);transform-origin:center top;will-change:transform}
.stack-card:last-child{margin-bottom:0}
.stack-card>div:first-child{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.stack-card .num{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.1em;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.1)}
.stack-card h3{font-size:clamp(28px,3.6vw,50px);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.stack-card p{font-size:clamp(17px,1.4vw,19px);max-width:28em;color:var(--muted)}
.stack-card .art{display:grid;place-items:center}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span,.chip{font-size:13px;border-radius:999px;padding:6px 13px;background:rgba(255,255,255,.1);color:inherit}
.stack-card.v{background:var(--violet-band);background-image:none;color:#fff}
.stack-card.v p{color:rgba(255,255,255,.88)}
.stack-card.v .link-arrow{color:#fff}
.stack-card.y{background:var(--yellow);background-image:none;color:var(--on-yellow)}
.stack-card.y p{color:rgba(20,17,10,.78)}
.stack-card.y .num,.stack-card.y .tags span{background:rgba(20,17,10,.1)}
.stack-card.y .link-arrow{color:var(--on-yellow)}
@media (max-width:900px),(max-height:620px),(prefers-reduced-motion:reduce){.stack{padding-bottom:0;gap:24px}.stack-card{position:static;margin-bottom:0;grid-template-columns:minmax(0,1fr);min-height:0;border-radius:28px;box-shadow:none;transform:none!important;filter:none!important}}
/* small product-style drawings inside the cards */
.ui{width:min(100%,500px);border-radius:22px;background:#0b0b0d;color:var(--ink);box-shadow:0 30px 70px rgba(0,0,0,.45);overflow:hidden}
.ui-top{display:flex;align-items:center;gap:6px;padding:14px 16px}
.ui-top i{width:9px;height:9px;border-radius:50%;background:#2a2a2e}
.ui-top em{margin-left:10px;flex:1;height:22px;border-radius:999px;background:#17171b}
.ui-body{padding:6px 18px 20px;display:flex;flex-direction:column;gap:12px}
.ui-hero{border-radius:16px;padding:22px;background:linear-gradient(135deg,#1c1c22,#101013);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ui-hero strong{font-family:var(--display);font-size:20px;line-height:1.15;font-weight:700}
.ui-hero small{color:var(--muted);font-size:12px}
.ui-btn{background:var(--yellow);color:var(--on-yellow);font-weight:600;font-size:12px;border-radius:999px;padding:8px 14px}
.ui-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ui-trio div{border-radius:14px;background:#15151a;padding:14px 12px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:8px}
.ui-trio div::before{content:"";height:38px;border-radius:10px;background:linear-gradient(135deg,rgba(251,190,7,.35),rgba(139,92,246,.35))}
.ui-phone{width:230px;border-radius:34px;background:#0b0b0d;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 70px rgba(0,0,0,.45);color:var(--ink)}
.ui-phone .shot-ph{height:120px;border-radius:18px;background:linear-gradient(135deg,rgba(251,190,7,.4),rgba(139,92,246,.45))}
.ui-phone strong{font-family:var(--display);font-size:16px;line-height:1.2}
.ui-phone .ui-btn{text-align:center;padding:11px}
.fixwrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.fixlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fixlist li{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.28);border-radius:999px;padding:10px 16px 10px 10px;font-size:14px;font-weight:500}
.fixlist li::before{content:"\2713";width:24px;height:24px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.ui-list{padding:6px 10px 14px;display:flex;flex-direction:column;gap:6px}
.ui-list div{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#15151a;font-size:14px}
.ui-list div::before{content:"\2713";width:26px;height:26px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.ui-list div span{margin-left:auto;color:var(--muted);font-size:12px}
.ui-cap{padding:16px 18px 6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* service rows (inner pages) */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:16px 40px;align-items:center;padding:34px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .3s,padding .3s}
.row h3{font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.01em;transition:color .3s}
.row p{color:var(--muted)}
.row .tags{margin-top:12px}
.row .go{width:54px;height:54px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:22px;transition:background .3s,color .3s,transform .3s,border-color .3s}
a.row:hover{background:rgba(139,92,246,.08);padding-inline:24px;color:inherit}
a.row:hover h3{color:var(--yellow)}
a.row:hover .go{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow);transform:rotate(-45deg)}
.row.plain{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:820px){.row,.row.plain{grid-template-columns:minmax(0,1fr)}.row .go{display:none}}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
@media (min-width:1000px){.grid:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:640px) and (max-width:930px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid>:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:931px) and (max-width:1233px){.grid:has(> :nth-child(8):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{border:0;border-radius:var(--r-card);padding:32px;display:flex;flex-direction:column;gap:12px;background:var(--card);transition:transform .3s,border-color .3s}
a.card:hover{transform:translateY(-6px);background:linear-gradient(160deg,#1d1640,var(--card2))}
.card p{color:var(--muted)}
.card .more{margin-top:auto}
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 36px}
.checks li{padding:16px 0 16px 34px;position:relative;border-bottom:1px solid var(--line)}
.checks li::before{content:"";position:absolute;left:4px;top:1.25em;width:11px;height:20px;background:var(--bolt);-webkit-mask:url(/images/site/bolt-mask.png) center/contain no-repeat;mask:url(/images/site/bolt-mask.png) center/contain no-repeat}

/* process: three large numbered tiles */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.step{border-radius:var(--r-card);background:var(--card);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:12px;min-height:300px;position:relative;overflow:hidden}
.step .n{font-family:var(--display);font-weight:800;font-size:clamp(72px,9vw,128px);line-height:.85;letter-spacing:-.04em;background:var(--bolt);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:auto;padding-bottom:28px}
.step p{color:var(--muted)}
.step .flag{position:absolute;top:24px;right:24px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--yellow);color:var(--on-yellow)}
.step:nth-child(2){background:var(--card2)}
.step:nth-child(2) .n{background:var(--grad);-webkit-background-clip:text;background-clip:text}
.step:nth-child(3){background:var(--violet-band);color:#fff}
.step:nth-child(3) p{color:rgba(255,255,255,.88)}
.step:nth-child(3) .n{background:none;color:#fff;-webkit-text-fill-color:#fff}
@media (max-width:860px){.steps3{grid-template-columns:minmax(0,1fr)}.step{min-height:0}.step .n{padding-bottom:12px}}

/* work: browser frames that scroll the full page on hover */
.work{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:26px}
@media (min-width:680px) and (max-width:999px){.work{grid-template-columns:repeat(2,minmax(0,1fr))}.work>:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 13px);justify-self:center}}
.shot{--view-h:420px;display:flex;flex-direction:column;border-radius:var(--r-card);overflow:hidden;border:0;background:var(--card);text-decoration:none;color:inherit;transition:transform .35s,border-color .35s,box-shadow .35s}
a.shot:hover{transform:translateY(-8px);border-color:rgba(251,190,7,.55);box-shadow:0 30px 70px rgba(0,0,0,.6);color:inherit}
.shot .chrome{display:flex;gap:6px;padding:13px 16px;background:var(--card)}
.shot .chrome i{width:9px;height:9px;border-radius:50%;background:#2a2a2e}
.shot .view{height:var(--view-h);overflow:hidden;position:relative;background:var(--card)}
.shot .view img{width:100%;transition:transform 7s cubic-bezier(.3,0,.3,1)}
.shot.tall:hover .view img,.shot.tall:focus-visible .view img{transform:translateY(calc(-100% + var(--view-h)));will-change:transform}
.shot .view.sq img{height:100%;object-fit:cover;object-position:top;transition:transform .8s}
.shot:hover .view.sq img{transform:scale(1.05)}
.shot .meta{padding:18px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.shot .meta b{font-family:var(--display);font-weight:600;font-size:18px}
.shot .meta span{color:var(--muted);font-size:14px}
@media (max-width:600px){.shot{--view-h:300px}}
.hint{font-size:14px;color:var(--muted)}
@media (hover:none){.hint{display:none}}

/* redesign cases: the new site large, the old one as a small inset */
.case-tabs{display:flex;flex-wrap:wrap;gap:8px}
.case-tabs button{all:unset;cursor:pointer;padding:10px 18px;border-radius:999px;font-weight:500;font-size:15px;color:var(--ink);background:var(--card2)}
.case-tabs button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.case-tabs button[aria-pressed="true"]{color:#fff;background:var(--violet-band)}
.case{border-radius:36px;background:linear-gradient(140deg,#17123a 0%,var(--card) 55%);padding:clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.case-copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.case-copy h3{font-size:clamp(26px,3vw,40px);font-weight:700;letter-spacing:-.015em;line-height:1.08}
.case-copy .kind{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--violet-hi)}
.case-copy ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.case-copy li{display:flex;gap:12px;color:var(--muted)}
.case-copy li::before{content:"\2713";width:24px;height:24px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none;margin-top:2px}
.case-art{position:relative;padding:0 0 clamp(20px,4vw,48px) clamp(28px,6vw,90px)}
.case-new{border-radius:20px;overflow:hidden;background:#0b0b0d;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.case-new .ui-top{padding:12px 16px}
.case-new .view{height:min(520px,58vh);overflow:hidden}
.case-new .view img{width:100%;transition:transform 9s cubic-bezier(.3,0,.3,1)}
.case-new:hover .view img{transform:translateY(calc(-100% + min(520px,58vh)))}
.case-old{position:absolute;left:0;bottom:0;width:min(38%,240px);margin:0;border-radius:16px;overflow:hidden;background:#0b0b0d;box-shadow:0 24px 60px rgba(0,0,0,.7);transform:rotate(-4deg)}
.case-old img{width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:top;filter:saturate(.6)}
.case-old figcaption,.case-new .lab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.case-old figcaption{padding:9px 12px;color:var(--muted)}
.case-new .lab{margin-left:auto;padding:5px 11px;border-radius:999px;background:var(--yellow);color:var(--on-yellow)}
@media (max-width:860px){.case{grid-template-columns:minmax(0,1fr);border-radius:28px}.case-new .view{height:340px}.case-new:hover .view img{transform:translateY(calc(-100% + 340px))}}
@media (prefers-reduced-motion:reduce){.case-new .view img{transition:none}.case-new:hover .view img{transform:none}}

/* testimonials: words first, no thumbnails */
.reviews{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px}
.review{margin:0;border:0;border-radius:var(--r-card);padding:clamp(24px,3vw,40px);background:var(--card);display:flex;flex-direction:column;gap:20px;position:relative}
.review::before{content:"\201C";font-family:Georgia,serif;font-size:84px;line-height:.6;color:var(--yellow);height:34px}
.review blockquote{margin:0;font-size:17px;line-height:1.6}
.review figcaption{margin-top:auto;display:flex;align-items:center;gap:14px;padding-top:6px}
.review .av{width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:grid;place-items:center;font-weight:700;font-size:16px;flex:none}
.review figcaption b{display:block;font-weight:600}
.review figcaption span{color:var(--muted);font-size:14px}
.review figcaption .stars{margin-left:auto;font-size:14px;letter-spacing:2px;color:var(--yellow)}
.review.big{grid-row:span 2;justify-content:center}
.review.big blockquote{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.1vw,28px);line-height:1.4}
.review.wide{grid-column:1/-1}
.reviews-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(32px,5vw,60px)}
.rating{display:flex;align-items:center;gap:14px}
.rating b{font-family:var(--display);font-weight:700;font-size:44px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rating span{font-size:14px;color:var(--muted)}
.rating .stars{font-size:16px;display:block;color:var(--yellow)}
@media (max-width:860px){.reviews{grid-template-columns:minmax(0,1fr)}.review.big{grid-row:auto}}
.logos{border-block:1px solid var(--line);padding-block:40px}
.logos img{width:100%;max-width:980px;margin-inline:auto;filter:grayscale(1) invert(1) contrast(1.25);mix-blend-mode:screen;opacity:.85}

/* agencies band: the one violet block, with the bolt cropped off its edge */
.band{position:relative;border-radius:var(--r-card);padding:clamp(36px,6vw,72px);background:var(--violet-band);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;overflow:hidden}
.band::after{content:"";position:absolute;right:6%;top:-18%;height:150%;aspect-ratio:204/360;background:rgba(0,0,0,.18);-webkit-mask:url(/images/site/bolt-mask.png) center/contain no-repeat;mask:url(/images/site/bolt-mask.png) center/contain no-repeat;pointer-events:none}
.band>div{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.band h2{color:#fff}
.band p{color:#fff;opacity:.9;max-width:38em}
.band .btn{position:relative;z-index:1}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,80px)}
.contact>div{display:flex;flex-direction:column;gap:20px}
.contact form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border:0;border-radius:var(--r-card);padding:clamp(22px,3vw,36px);background:var(--card)}
.contact label{display:flex;flex-direction:column;gap:8px;font-weight:500;font-size:14px;color:var(--muted)}
.contact label.full,.contact form .btn{grid-column:1/-1}
.contact input,.contact textarea,.contact select{padding:15px 16px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r-img);font:inherit;font-size:16px;width:100%;background:var(--bg2);color:var(--ink)}
.contact input:focus,.contact textarea:focus,.contact select:focus{border-color:var(--yellow);outline:none;box-shadow:0 0 0 3px rgba(251,190,7,.35)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-lines{display:flex;flex-direction:column;gap:6px;font-size:18px}
.contact-lines a{text-decoration:none;font-weight:600;font-size:clamp(24px,3vw,34px)}
.contact-lines .addr{color:var(--muted);font-size:15px}
@media (max-width:860px){.contact{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.contact form{grid-template-columns:minmax(0,1fr)}}

/* prose */
.prose{max-width:40em;display:flex;flex-direction:column;gap:14px;color:var(--muted)}
.prose h3{margin-top:22px;color:var(--ink)}

/* footer */
.site-foot{border-top:1px solid var(--line);font-size:15px;color:var(--muted);background:var(--bg2)}
.foot-cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;padding-block:64px 40px}
@media (max-width:960px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot-cols{grid-template-columns:minmax(0,1fr)}}
.foot-cols b{display:block;color:var(--ink);margin-bottom:12px;font-weight:600}
.foot-cols a{display:block;padding:4px 0;text-decoration:none;color:var(--muted)}
.foot-cols a:hover{color:var(--yellow)}
.foot-cols img{height:38px;width:auto;margin-bottom:14px}
.foot-base{border-top:1px solid var(--line);padding-block:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:14px}
@media (pointer:coarse){.foot-cols a{padding:9px 0}.link-arrow{min-height:44px}.contact-lines a{padding-block:4px}}

/* reveal on scroll, used on headings and the work grid only */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .5s ease-out,transform .5s ease-out}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wall-col,.reel-track,.names-track{animation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .btn:hover,a.card:hover,a.shot:hover{transform:none}
  .shot .view img{transition:none}
  .shot.tall:hover .view img,.shot.tall:focus-visible .view img,.shot:hover .view.sq img{transform:none}
  a.row,.row .go,.link-arrow::after{transition:none}
}
@media (min-width:1600px){.wrap{max-width:1320px}.wall{margin-right:calc(-1 * max(0px,(100vw - 1320px)/2))}}

/* reviews in both brand colors */
.review.big{background:var(--violet-band);color:#fff}
.review.big::before{color:#fff;opacity:.9}
.review.big figcaption div span{color:rgba(255,255,255,.8)}
.review.big figcaption .stars{color:var(--yellow)}
.review.big .av{background:#fff;color:var(--violet-band)}
.review:nth-child(3)::before{color:var(--violet-hi)}
.review:nth-child(3) .av{background:var(--violet);color:#fff}
.review.wide{background:linear-gradient(90deg,var(--card),#1b1540)}
.contact-lines a{color:var(--ink)}
.contact-lines a:hover{color:var(--yellow)}
.contact form{background:linear-gradient(160deg,#17123a,var(--card) 60%)}
.checks li:nth-child(even)::before{background:var(--violet-hi)}
.foot-cols b{color:var(--violet-hi)}
.shot .meta span{color:var(--violet-hi)}
a.shot:hover{box-shadow:0 30px 70px rgba(91,52,201,.35)}
.row .go{border-color:var(--violet)}

/* the last thing on the page: a giant "Let's talk" that drops from above like a heavy
   object, squashes on impact and kicks up dust. It resets when you scroll away. */
.mega{position:relative;display:block;text-decoration:none;text-align:center;font-family:var(--display);font-weight:800;font-size:clamp(64px,18.6vw,360px);line-height:1;letter-spacing:-.045em;white-space:nowrap;padding-top:.12em;margin-bottom:-.03em}
.mega .w{position:relative;z-index:1;display:inline-block;padding:0 .08em;background:linear-gradient(100deg,#fbbe07 5%,#ffb30b 30%,#8b5cf6 70%,#a78bfa 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;transform-origin:50% 100%;will-change:transform}
.mega:hover .w{filter:brightness(1.12)}
.mega .dust{position:absolute;left:0;bottom:0;width:100%;height:190%;pointer-events:none;z-index:0}
.js .mega .w{transform:translateY(-190%);opacity:0}
.js .mega.drop .w{opacity:1;animation:megadrop .95s both}
@keyframes megadrop{
  0%{transform:translateY(-190%) rotate(-2.5deg);animation-timing-function:cubic-bezier(.6,0,1,.5)}
  42%{transform:translateY(0) scale(1.045,.9) rotate(0);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  58%{transform:translateY(-5%) scale(.985,1.03);animation-timing-function:cubic-bezier(.5,0,.9,.5)}
  72%{transform:translateY(0) scale(1.015,.975);animation-timing-function:ease-out}
  86%{transform:translateY(-1.2%) scale(1,1)}
  100%{transform:none}
}
.site-foot.shake .foot-cols,.site-foot.shake .foot-base{animation:footshake .45s cubic-bezier(.3,.7,.3,1)}
@keyframes footshake{0%{transform:translateY(0)}18%{transform:translateY(9px)}40%{transform:translateY(-5px)}62%{transform:translateY(3px)}82%{transform:translateY(-1px)}100%{transform:none}}
.site-foot{border-top:0;overflow:clip}
@media (prefers-reduced-motion:reduce){.js .mega .w{transform:none;opacity:1;animation:none}.mega .dust{display:none}}

/* case study: one client told in three pinned scenes, before, after and results */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.cs-head{padding-top:clamp(64px,8vw,120px)}
.cs{position:relative;height:330vh}
.cs-stage{position:sticky;top:var(--head-h);height:calc(100vh - var(--head-h));display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,36px);overflow:hidden}
.cs-stage>.wrap{width:100%}
.cs-steps{display:flex;justify-content:center;gap:8px}
.cs-steps i{font-style:normal;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:9px 18px;border-radius:999px;background:var(--card);color:var(--muted);transition:background .4s,color .4s}
.cs-steps i.on{background:var(--yellow);color:var(--on-yellow)}
.cs-steps i.on:nth-child(2){background:linear-gradient(90deg,var(--yellow),var(--violet-hi))}
.cs-steps i.on:nth-child(3){background:var(--violet-band);color:#fff}
.cs-body{position:relative;height:min(62vh,560px)}
.cs .scene{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,7vw,110px);align-items:center;justify-content:center;max-width:1000px;margin-inline:auto;opacity:0;transform:scale(.96);transition:opacity .6s cubic-bezier(.39,.58,.57,1),transform .6s cubic-bezier(.39,.58,.57,1);pointer-events:none}
.cs .scene.on{opacity:1;transform:none;pointer-events:auto}
.cs-copy{display:flex;flex-direction:column;gap:16px}
.cs-copy .kind{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--violet-hi)}
.cs-copy h3{font-size:clamp(34px,4.4vw,64px);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.cs-copy h3 em{font-style:normal;color:var(--violet-hi)}
.cs-copy p{color:var(--muted);font-size:clamp(17px,1.4vw,19px);max-width:24em}
.cs-shot{position:relative;width:min(400px,34vw);border-radius:16px}
.cs-shot .in{position:relative;border-radius:16px;overflow:hidden;background:#17171b;display:flex;flex-direction:column;height:min(56vh,500px)}
.cs-shot .ui-top{flex:none;padding:11px 14px;background:#17171b}
.cs-shot .ui-top em{background:#24242a}
.cs-shot .pg{flex:1;min-height:0;overflow:hidden;background:#fff}
.cs-shot .tag{position:absolute;left:14px;bottom:14px;z-index:2;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.78);color:#fff}
.cs-shot.new .tag{background:var(--yellow);color:var(--on-yellow)}
.cs-shot img{width:100%;display:block}
.cs-shot.old .in{box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08)}
.cs-shot.old img{height:100%;object-fit:cover;object-position:top}
.cs-shot.new::before{content:"";position:absolute;inset:-3px;border-radius:19px;background:conic-gradient(from var(--ang),#fbbe07,#8b5cf6,#a78bfa,#ffb30b,#fbbe07);animation:spin 5s linear infinite;z-index:0}
.cs-shot.new::after{content:"";position:absolute;inset:-18px;border-radius:30px;background:conic-gradient(from var(--ang),#fbbe07,#8b5cf6,#a78bfa,#ffb30b,#fbbe07);filter:blur(34px);opacity:.5;animation:spin 5s linear infinite;z-index:-1}
.cs-shot.new .in{z-index:1}
@keyframes spin{to{--ang:360deg}}
.cs .scene.on .cs-shot.new img{animation:pan 26s ease-in-out 1.2s infinite alternate}
@keyframes pan{from{transform:translateY(0)}to{transform:translateY(calc(-100% + min(56vh,500px) - 40px))}}
.cs .scene.res{grid-template-columns:minmax(0,1fr);max-width:1100px;text-align:left}
.cs-res{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,56px);align-items:center}
.cs-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cs-stat{border-radius:24px;background:var(--card);padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:8px}
.cs-stat b{font-family:var(--display);font-weight:800;font-size:clamp(44px,5.4vw,80px);line-height:1;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.cs-stat strong{font-weight:600;font-size:18px}
.cs-stat span{color:var(--muted);font-size:15px}
.cs-stat:nth-child(2){background:var(--violet-band);color:#fff}
.cs-stat:nth-child(2) b{background:none;color:#fff;-webkit-text-fill-color:#fff}
.cs-stat:nth-child(2) span{color:rgba(255,255,255,.85)}
/* without pinning: phones, short screens, reduced motion */
@media (max-width:900px),(max-height:620px),(prefers-reduced-motion:reduce){
  .cs{height:auto}
  .cs-stage{position:static;height:auto;display:block;padding-block:28px clamp(64px,8vw,120px)}
  .cs-steps{display:none}
  .cs-body{height:auto;display:flex;flex-direction:column;gap:48px}
  .cs .scene{position:static;opacity:1;transform:none;pointer-events:auto;grid-template-columns:minmax(0,1fr);gap:22px}
  .cs-shot{width:min(100%,400px);margin-inline:auto}
  .cs-shot .in{height:420px}
  .cs-shot.new img,.cs .scene.on .cs-shot.new img{animation:none}
  .cs-res{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){.cs-stats{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.cs-shot.new::before,.cs-shot.new::after{animation:none}}

.cs-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.cs-points{grid-template-columns:minmax(0,1fr)}}
.cs-point{border-radius:20px;background:var(--card);padding:22px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cs-point:nth-child(2){background:var(--violet-band);color:#fff}
.cs-point:nth-child(2) span{color:rgba(255,255,255,.86)}
.cs-point:nth-child(2)::before{background:#fff!important;color:var(--violet-band)!important}
.cs-point:nth-child(3)::before{background:var(--violet);color:#fff}
.cs-point::before{content:"\2713";width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:grid;place-items:center;font-weight:700;flex:none}
.cs-point:nth-child(2)::before{background:var(--violet);color:#fff}
.cs-point strong{display:block;font-weight:600;font-size:18px;margin-bottom:2px}
.cs-point span{color:var(--muted);font-size:15px}
.cs-quote{margin:0;border-radius:24px;background:var(--violet-band);color:#fff;padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:14px}
.cs-quote blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.5vw,21px);line-height:1.4}
.cs-quote figcaption{font-size:14px;opacity:.85}

.contact select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--yellow) 50%),linear-gradient(135deg,var(--yellow) 50%,transparent 50%);background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.contact .fine{grid-column:1/-1;font-size:13px;color:var(--muted);margin-top:-4px}
/* a slim band for the softer offer: a free look at an existing site */
.review-band{border-radius:var(--r-card);background:var(--card);background-image:linear-gradient(120deg,#1b1546,transparent 60%);padding:clamp(26px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.review-band>div{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:10px}
.review-band h2{font-size:clamp(24px,2.8vw,36px)}
.review-band p{color:var(--muted);max-width:36em}

/* LeadPro form embeds */
.lp-wrap{min-width:0;width:100%}
.lp-wrap>div{width:100%}

/* inner pages */
/* hero with a visual on the right */
.hero2 .hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:0;gap:clamp(32px,5vw,80px);padding-block:clamp(40px,6vw,84px)}
.hero2 .hero-copy{padding-block:0;max-width:none}
.hero2 h1{font-size:clamp(32px,4.2vw,56px)}
.hero2 .visual{display:grid;place-items:center;min-width:0}
.hero-center .hero-in{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:clamp(48px,7vw,96px) clamp(24px,4vw,48px);text-align:center}
.hero-center .hero-copy{align-items:center;padding-block:0;max-width:52em;margin-inline:auto}
.hero-center .lead{margin-inline:auto}
@media (max-width:900px){.hero2 .hero-in{grid-template-columns:minmax(0,1fr)}}
/* two real sites, one in front of the other */
.pair{position:relative;width:min(100%,560px);aspect-ratio:10/8.4}
.pair figure{position:absolute;margin:0;border-radius:16px;overflow:hidden;background:#17171b;box-shadow:0 30px 80px rgba(0,0,0,.65)}
.pair figure .ui-top{padding:9px 12px;background:#17171b}
.pair figure .ui-top em{background:#24242a;height:16px}
.pair figure img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top;display:block}
.pair .back{left:0;top:0;width:76%;transform:rotate(-3deg);opacity:.92}
.pair .front{right:0;bottom:0;width:70%}
.pair .front::before{content:"";position:absolute;inset:0;border-radius:16px;padding:2px;background:linear-gradient(135deg,var(--yellow),var(--violet));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}
/* stat tiles */
.stat-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(100%,520px)}
.stat-tile{border-radius:24px;padding:clamp(20px,2.6vw,32px);background:var(--card);display:flex;flex-direction:column;gap:6px;min-height:150px;justify-content:flex-end}
.stat-tile b{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:-.03em}
.stat-tile span{font-size:14px;color:var(--muted)}
.stat-tile:nth-child(1){background:var(--yellow);color:var(--on-yellow)}
.stat-tile:nth-child(1) span{color:rgba(20,17,10,.75)}
.stat-tile:nth-child(4){background:var(--violet-band);color:#fff}
.stat-tile:nth-child(4) span{color:rgba(255,255,255,.85)}
.stat-tile:nth-child(2) b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* three brand-color tiles */
.tiles3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tile{border-radius:28px;padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:12px;min-height:260px;background:var(--card);background-image:linear-gradient(150deg,#1b1546,transparent 65%)}
.tile .ix{align-self:flex-start;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.1);margin-bottom:auto}
.tile h3{font-size:clamp(22px,2.2vw,28px);margin-top:18px}
.tile p{color:var(--muted)}
.tile.v{background:var(--violet-band);background-image:none;color:#fff}.tile.v p{color:rgba(255,255,255,.88)}
.tile.y{background:var(--yellow);background-image:none;color:var(--on-yellow)}.tile.y p{color:rgba(20,17,10,.78)}.tile.y .ix{background:rgba(20,17,10,.1)}
.tiles3.six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.tiles3,.tiles3.six{grid-template-columns:minmax(0,1fr)}.tile{min-height:0}}
/* scope panel: text and button on one side, the checklist on the other */
.cover{border-radius:36px;background:var(--card);background-image:linear-gradient(140deg,#17123a,transparent 55%);padding:clamp(26px,4.5vw,60px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.cover>div:first-child{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.cover h2{font-size:clamp(26px,3vw,40px)}
.cover p{color:var(--muted)}
.cover .checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.cover .checks li{border-bottom-color:rgba(255,255,255,.08)}
@media (max-width:900px){.cover{grid-template-columns:minmax(0,1fr);border-radius:28px}.cover .checks{grid-template-columns:minmax(0,1fr)}}
/* service link tiles */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.svc{position:relative;border-radius:24px;background:var(--card);padding:26px 24px 70px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:transform .3s,background .3s}
.svc h3{font-size:20px}
.svc p{color:var(--muted);font-size:15px}
.svc .go{position:absolute;left:24px;bottom:22px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--ink);transition:background .3s,color .3s,transform .3s}
.svc:hover{transform:translateY(-6px);background:linear-gradient(160deg,#1d1640,var(--card2));color:inherit}
.svc:hover .go{background:var(--yellow);color:var(--on-yellow);transform:rotate(-45deg)}
.svc:nth-child(4n+2):hover .go{background:var(--violet);color:#fff}
@media (max-width:1100px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svc-grid{grid-template-columns:minmax(0,1fr)}}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{padding:11px 20px;border-radius:999px;background:var(--card);font-weight:500;font-size:15px}
.chips span:nth-child(5n+2){background:var(--yellow);color:var(--on-yellow)}
.chips span:nth-child(5n+4){background:var(--violet-band);color:#fff}
/* work filters */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:clamp(28px,4vw,48px)}
.filters button{all:unset;cursor:pointer;padding:10px 18px;border-radius:999px;background:var(--card);font-weight:500;font-size:15px;color:var(--ink);transition:background .25s,color .25s}
.filters button:hover{background:var(--card2)}
.filters button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.filters button[aria-pressed="true"]{background:var(--yellow);color:var(--on-yellow)}
.work .shot[hidden]{display:none!important}
/* contact info tiles */
.info-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.info{border-radius:24px;background:var(--card);padding:26px 24px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;min-height:150px;transition:transform .3s,background .3s}
a.info:hover{transform:translateY(-5px);background:var(--card2);color:inherit}
.info small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--violet-hi);margin-bottom:auto}
.info b{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.5vw,21px);line-height:1.25;overflow-wrap:anywhere}
.info span{color:var(--muted);font-size:14px}
.info b.sm{font-size:clamp(13px,1.15vw,16px);overflow-wrap:normal;white-space:nowrap}
.info:first-child{background:var(--yellow);color:var(--on-yellow)}.info:first-child small{color:var(--on-yellow)}.info:first-child span{color:rgba(20,17,10,.75)}
@media (max-width:1000px){.info-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.info-tiles{grid-template-columns:minmax(0,1fr)}}
/* legal text in a panel */
.doc{border-radius:32px;background:var(--card);padding:clamp(26px,5vw,64px);max-width:860px;margin-inline:auto}
.doc .prose{max-width:none}
/* small drawn mocks for service heroes */
.mk{width:min(100%,500px);border-radius:22px;background:#0b0b0d;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);overflow:hidden;color:var(--ink)}
.mk-search{padding:20px;display:flex;flex-direction:column;gap:14px}
.mk-search .q{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;background:#17171b;font-size:14px;color:var(--muted)}
.mk-search .q::before{content:"";width:12px;height:12px;border:2px solid var(--muted);border-radius:50%}
.mk-search .r{border-radius:16px;padding:16px;background:#15151a;display:flex;flex-direction:column;gap:6px}
.mk-search .r small{font-size:12px;color:var(--muted)}
.mk-search .r strong{font-size:16px;color:var(--violet-hi)}
.mk-search .r p{font-size:13px;color:var(--muted)}
.mk-search .r.top{background:linear-gradient(135deg,rgba(251,190,7,.16),rgba(139,92,246,.16));box-shadow:0 0 0 1.5px var(--yellow) inset}
.mk-search .r.top strong{color:var(--yellow)}
.mk-search .r.dim{opacity:.45}
.mk-brand{padding:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mk-brand .logo{grid-column:1/-1;border-radius:16px;background:#15151a;padding:26px;display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:800;font-size:26px}
.mk-brand .logo i{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--yellow),var(--violet))}
.mk-brand .sw{aspect-ratio:1;border-radius:14px}
.mk-brand .type{grid-column:1/-1;border-radius:16px;background:#15151a;padding:18px;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display)}
.mk-brand .type b{font-size:34px;font-weight:800}
.mk-brand .type span{color:var(--muted);font-size:13px}
.mk-photos{padding:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mk-photos div{aspect-ratio:1;border-radius:14px;background:linear-gradient(135deg,#24242a,#15151a);position:relative;overflow:hidden}
.mk-photos div::after{content:"";position:absolute;left:28%;right:28%;top:22%;bottom:22%;border-radius:12px;background:linear-gradient(160deg,var(--yellow),#ffb30b)}
.mk-photos div:nth-child(3n+2)::after{background:linear-gradient(160deg,var(--violet-hi),var(--violet-band));border-radius:50%}
.mk-photos div:nth-child(4n)::after{left:18%;right:18%;top:36%;bottom:26%}
.mk-photos .big{grid-column:span 2;grid-row:span 2}

/* colour rules: yellow is the one text accent, violet is for surfaces, and the
   yellow-to-violet blend is kept for long words and wide shapes only */
.hl-s{color:var(--yellow)}
.eyebrow::before{background:var(--yellow)}
.link-arrow::after{color:inherit}
.shot .meta span{color:var(--yellow)}
.foot-cols b{color:var(--yellow)}
.rating b{background:none;color:var(--yellow);-webkit-text-fill-color:var(--yellow)}
.proof span:nth-child(2) b,.proof span:nth-child(3) b{color:var(--ink)}
.cs-copy .kind,.case-copy .kind,.ba2-text .kind,.info small{color:var(--yellow)}
.info:first-child small{color:var(--on-yellow)}
.cs-copy h3 em{color:var(--yellow)}
.checks li:nth-child(even)::before{background:var(--bolt)}
.review:nth-child(3)::before{color:var(--yellow)}
.review:nth-child(3) .av{background:var(--yellow);color:var(--on-yellow)}
.cs-point:nth-child(3)::before{background:var(--yellow);color:var(--on-yellow)}
.stat-tile:nth-child(2) b{background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.step:nth-child(2) .n{background:var(--bolt);-webkit-background-clip:text;background-clip:text}
.cs-steps i.on,.cs-steps i.on:nth-child(2),.cs-steps i.on:nth-child(3){background:var(--yellow);color:var(--on-yellow)}
.fixline b{background:none;color:var(--yellow);-webkit-text-fill-color:var(--yellow)}
.row .go{border-color:rgba(255,255,255,.3)}
.svc:nth-child(4n+2):hover .go{background:var(--yellow);color:var(--on-yellow)}
.btn-ghost{border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{background:#fff;border-color:#fff;color:#000}
a.shot:hover{box-shadow:0 30px 70px rgba(0,0,0,.65)}
.pair .front::before{background:var(--yellow)}
.contact form{background:var(--card)}
/* frames: one treatment everywhere a site capture is shown */
.shot,.pair figure,.cs-shot .in,.wall-col img{box-shadow:0 0 0 1px rgba(255,255,255,.07),0 24px 60px rgba(0,0,0,.55)}
.wall-col img{border:0}
.shot .chrome,.pair figure .ui-top,.cs-shot .ui-top{background:#17171b}
.shot .chrome i,.ui-top i{background:#34343b}
.shot .view{background:#17171b}
/* the footer phrase when it has already played today */
.js .mega.still .w{transform:none;opacity:1;animation:none}

/* landing pages */
.lite .bar{justify-content:space-between}
.lite .nav{display:flex!important;position:static;flex-direction:row;padding:0;background:none;border:0;gap:10px 22px}
@media (max-width:600px){.lite .nav a:not(.btn){display:none}}
.lph .hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;gap:clamp(28px,5vw,72px);padding-block:clamp(32px,5vw,72px);min-height:0}
.lph .hero-copy{padding-block:clamp(0px,3vw,36px) 0}
.lph h1{font-size:clamp(32px,4.2vw,56px)}
.lph .form-card{border-radius:24px;background:var(--card);box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 80px rgba(0,0,0,.6);padding:6px;scroll-margin-top:calc(var(--head-h) + 16px)}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)}
.ticks li::before{content:"\2713";width:24px;height:24px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none;margin-top:2px}
@media (max-width:900px){.lph .hero-in{grid-template-columns:minmax(0,1fr)}}
/* price plans */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.plan{border-radius:28px;background:var(--card);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px}
.plan h3{font-size:20px}
.plan .price{font-family:var(--display);font-weight:800;font-size:clamp(40px,4.6vw,60px);line-height:1;letter-spacing:-.03em}
.plan .price small{font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted);margin-left:6px}
.plan ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15px;color:var(--muted)}
.plan li{display:flex;gap:10px}
.plan li::before{content:"\2713";color:var(--yellow);font-weight:700}
.plan .btn{margin-top:auto}
.plan .time{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--yellow)}
.plan.pop{background:var(--violet-band);color:#fff}
.plan.pop ul{color:rgba(255,255,255,.9)}
.plan.pop .price small{color:rgba(255,255,255,.8)}
.plan.pop li::before,.plan.pop .time{color:#fff}
@media (max-width:900px){.plans{grid-template-columns:minmax(0,1fr)}}
/* questions */
.faq{display:flex;flex-direction:column;gap:12px;max-width:860px}
.faq details{border-radius:20px;background:var(--card);padding:0 24px}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-family:var(--display);font-weight:600;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-weight:500;transition:transform .25s,background .25s}
.faq details[open] summary::after{content:"\2212";background:var(--yellow);color:var(--on-yellow)}
.faq details p{color:var(--muted);padding:0 0 22px;max-width:44em}
/* case study pages */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px);align-items:start}
.duo figure{margin:0;display:flex;flex-direction:column;gap:12px}
.duo figcaption{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.duo .now figcaption{color:var(--yellow)}
.duo .in{border-radius:18px;overflow:hidden;background:#17171b;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 24px 60px rgba(0,0,0,.55)}
.duo .in img{width:100%;display:block}
.duo .now .in{box-shadow:0 0 0 2px var(--yellow),0 24px 60px rgba(0,0,0,.55)}
@media (max-width:760px){.duo{grid-template-columns:minmax(0,1fr)}}
.cs-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cs-link{border-radius:28px;overflow:hidden;background:var(--card);text-decoration:none;color:inherit;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);transition:transform .3s,background .3s}
.cs-link:hover{transform:translateY(-6px);background:var(--card2);color:inherit}
.cs-link img{width:100%;height:100%;min-height:220px;object-fit:cover;object-position:top}
.cs-link div{padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:10px;justify-content:center}
.cs-link small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--yellow)}
.cs-link p{color:var(--muted);font-size:15px}
@media (max-width:900px){.cs-links{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.cs-link{grid-template-columns:minmax(0,1fr)}.cs-link img{min-height:0;aspect-ratio:16/10}}
.site-foot.mini .foot-base{border-top:0;padding-block:36px 8px}

/* sticky FAQ */
.faq2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-side h2{margin:0 0 14px}
.faq-side .lead{margin:0;max-width:26em}
.faq-help{margin-top:clamp(22px,2.6vw,32px);border-radius:24px;background:var(--card);padding:clamp(20px,2vw,26px);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:center;justify-items:start}
.faq-help>p,.faq-help>.tel,.faq-help>.btn{grid-column:1/-1}
.section.alt .faq-help{background:var(--card2)}
.faq-help .bolt{width:20px;height:28px;background:linear-gradient(180deg,#f4d101,#ffb30b);-webkit-mask:url(/images/site/bolt-mask.png) center/contain no-repeat;mask:url(/images/site/bolt-mask.png) center/contain no-repeat}
.faq-help strong{font-family:var(--display);font-size:18px;font-weight:600;line-height:1.25}
.faq-help p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.faq-help .tel{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink);text-decoration:none;margin-top:2px}
.faq-help .tel:hover{color:var(--yellow)}
.faq-help .btn{margin-top:8px;padding:11px 18px;font-size:14.5px}
.faq-list{display:flex;flex-direction:column;gap:12px}
.qa{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,1.8vw,22px);align-items:start;border-radius:24px;background:var(--card);padding:clamp(22px,2.4vw,32px);transition:background .4s}
.section.alt .qa{background:var(--card2)}
.qa .n{display:grid;place-items:center;min-width:38px;height:26px;padding:0 8px;margin-top:2px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted);font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.06em;transition:background .4s,color .4s}
.qa h3{margin:0 0 8px;font-size:clamp(18px,1.5vw,21px);line-height:1.3}
.qa p{margin:0;color:var(--muted);font-size:16px;transition:color .4s}
.qa p a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.qa.on,.section.alt .qa.on{background:var(--violet-band)}
.qa.on .n{background:var(--yellow);color:var(--on-yellow)}
.qa.on p{color:rgba(255,255,255,.88)}
@media (min-width:900px) and (min-height:620px){.faq-side{position:sticky;top:calc(var(--head-h) + 32px)}}
@media (max-width:899px){.faq2{grid-template-columns:1fr}@media (prefers-reduced-motion:reduce){.qa,.qa .n,.qa p{transition:none}}

.em{color:inherit;text-decoration:none}.em:hover{color:var(--yellow)}