@font-face{font-family:"Bricolage";src:url(/fonts/BricolageGrotesque.woff2) format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Manrope";src:url(/fonts/Manrope.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--red:#ff3550;--orange:#ff8a1f;--yellow:#ffc812;--cyan:#12c3f2;--purple:#b552ff;--pink:#ff4fcf;--bg:#fbfdfe;--card:#fff;--ink:#0b1a2b;--mut:#4a5d6e;--sea:#16698c;--deep:#14305a;--gold:#f9c440;--line:#d9e6ea;--tint:#e7f2f4;--r:14px;--sh:0 12px 30px -14px rgba(0,0,0,.24)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 Manrope,system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--sea);text-underline-offset:3px}a:hover{color:var(--deep)}
h1,h2,h3,.h3{font-family:Bricolage,Manrope,sans-serif;line-height:1.1;letter-spacing:-.02em;text-wrap:balance;margin:0 0 .5em;color:var(--ink)}
h1{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:800}h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:750}h3,.h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em}.lead{font-size:1.15rem;color:var(--mut);max-width:58ch}
.wrap{max-width:1200px;margin:0 auto;padding-inline:20px}.narrow{max-width:780px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sea);margin-bottom:.8em}
/* header */
.hd{position:sticky;top:0;z-index:40;background:rgba(244,249,250,.92);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s}
.hd.scrolled{box-shadow:0 6px 24px -16px rgba(20,48,90,.35);border-color:var(--line)}
.hd-in{display:flex;align-items:center;gap:20px;min-height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 1.15rem/1 Bricolage,sans-serif;letter-spacing:-.01em}
.brand small{display:block;font:700 .72rem/1.4 Manrope,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--sea)}
.nav{display:flex;gap:4px;margin-left:auto}.nav a{padding:10px 11px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:hover,.nav a[aria-current]{background:var(--tint)}
.menu{display:none;margin-left:auto;width:46px;height:46px;border:0;background:var(--tint);border-radius:12px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.menu span{width:20px;height:2px;background:var(--ink);transition:transform .25s}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;background:var(--deep);color:#fff;font-weight:700;text-decoration:none;border:2px solid var(--deep);cursor:pointer;font:inherit;font-weight:700;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s;white-space:nowrap}
.btn:hover{color:#fff;background:var(--sea);border-color:var(--sea);transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:transparent;color:var(--deep)}.btn-ghost:hover{background:var(--deep)}
.btn-wa{background:#177a47;border-color:#177a47}.btn-wa:hover{background:#18754a;border-color:#18754a}
.btn-line{background:#fff;color:var(--deep);border-color:#fff}.btn-sm{min-height:44px;padding:8px 16px;font-size:.92rem}
.link{font-weight:700}.link::after{content:" →"}
/* hero */

.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.trust{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.92rem;color:var(--mut);font-weight:600}
.trust li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:middle}



@keyframes settle{from{transform:scale(1.06)}to{transform:none}}
.strip{border-block:1px solid var(--line);background:#fff}.strip-in{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:center;padding-block:18px;font-size:.95rem}
.strip span{color:var(--mut);font-weight:600}.strip b{font-family:Bricolage,sans-serif;font-weight:700}
/* sections */
.sec{padding:72px 0}.sec-tint{background:var(--tint)}.sec-vis{background:linear-gradient(180deg,#fff,var(--tint))}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}.sec-head p{color:var(--mut);margin:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.split-top{align-items:start}
.split img{border-radius:var(--r);box-shadow:var(--sh)}
.ticks{list-style:none;padding:0;margin:0 0 1.4em}.ticks li{padding:8px 0 8px 30px;position:relative;border-bottom:1px solid var(--line)}
.ticks li::before{content:"";position:absolute;left:4px;top:17px;width:12px;height:7px;border:solid var(--sea);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg)}
.svcs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.svcs3{grid-template-columns:repeat(3,1fr)}
.svc{background:var(--card);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);border:1px solid var(--line);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.svc:hover{transform:translateY(-3px);box-shadow:var(--sh);color:var(--ink)}.svc img{aspect-ratio:4/3;object-fit:cover;width:100%}
.svc h2,.svc h3{margin:16px 18px 6px}.svc p{margin:0 18px 18px;color:var(--mut);font-size:.95rem}
.wks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wk{position:relative;border-radius:var(--r);overflow:hidden;color:#fff;text-decoration:none}.wk img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform .6s}
.wk:hover img{transform:scale(1.03)}.wk span{position:absolute;inset:auto 0 0;padding:40px 18px 16px;background:linear-gradient(transparent,rgba(11,26,43,.85));font-size:.9rem}
.wk b{display:block;font:700 1.2rem/1.2 Bricolage,sans-serif}
.cons{display:grid;grid-template-columns:1fr 1fr;gap:16px}.con{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;text-decoration:none;color:var(--ink)}
.con b{display:block;font:700 1.2rem Bricolage,sans-serif}.con span{color:var(--mut)}
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.rev{margin:0;background:#fff;border-radius:var(--r);padding:26px;border:1px solid var(--line)}.rev blockquote{margin:0 0 14px}
.rev figcaption{font-weight:700}.rev figcaption span{display:block;font-weight:500;font-size:.85rem;color:var(--mut)}
.towns{display:flex;flex-wrap:wrap;gap:10px}.towns a{padding:10px 18px;min-height:44px;border-radius:999px;background:#fff;border:1px solid var(--line);text-decoration:none;font-weight:600;color:var(--ink)}
.towns a:hover{border-color:var(--sea);color:var(--sea)}
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.area{position:relative;border-radius:var(--r);overflow:hidden;text-decoration:none}
.area img{aspect-ratio:1;object-fit:cover;width:100%}.area span{position:absolute;inset:auto 10px 10px;background:#fff;color:var(--ink);border-radius:10px;padding:8px 12px;font-weight:700}
/* page head */
.ph{padding:40px 0 56px;background:linear-gradient(180deg,#fff,var(--bg))}.ph-has .ph-in{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.ph-img img{border-radius:20px;aspect-ratio:4/3;object-fit:cover;width:100%;box-shadow:var(--sh)}
.bc{font-size:.88rem;color:var(--mut);margin-bottom:18px}.bc a{color:var(--mut)}
.prose-grid{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
.prose{max-width:70ch}.prose h2{margin-top:1.4em}.prose li{margin-bottom:.4em}
.side{display:grid;gap:16px;position:sticky;top:96px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.card .btn{width:100%;margin-top:8px}.card ul{padding-left:18px;margin:0}.role{color:var(--sea);font-weight:700}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.gal3{grid-template-columns:repeat(3,1fr);margin:24px 0}
.gal figure{margin:0}.gal img{aspect-ratio:1;object-fit:cover;width:100%;border-radius:10px}.gal figcaption{font-size:.82rem;color:var(--mut);margin-top:6px}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.mt{margin-top:40px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}.faq summary{cursor:pointer;font-weight:700;padding:14px 0;min-height:44px;list-style:none;position:relative;padding-right:30px}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:1.4rem;color:var(--sea)}.faq details[open] summary::after{content:"–"}
.cta{background:var(--deep);color:#fff;padding:56px 0}.cta h2{color:#fff}.cta p{color:#c9dbe6;margin:0}
.cta-in{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
/* form */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:16px}
.row{display:grid;gap:6px}.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{font-weight:700;font-size:.92rem}
input,select,textarea{font:inherit;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fbfdfd;min-height:48px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--sea);outline:none;box-shadow:0 0 0 3px rgba(22,105,140,.15)}
.hp{position:absolute;left:-9999px}.form-msg{margin:0;font-weight:600}.big{font:800 1.6rem Bricolage,sans-serif;text-decoration:none}
/* footer */
.ft{background:#0b1a2b;color:#b9c8d4;padding:56px 0 100px;font-size:.95rem}.ft a{color:#e6eef3}.ft h2{color:#fff;font-size:1.05rem}
.ft-grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr .9fr;gap:36px}.ft ul{list-style:none;padding:0;margin:0}.ft li{margin-bottom:6px}
.ft .cols{columns:2}.ft img{background:#fff;border-radius:12px;padding:6px;margin-bottom:14px}.fb{font-weight:700}
.ft-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid #213549;margin-top:36px;padding-top:20px;font-size:.85rem}
.dock{display:none}
.wa-float{position:fixed;right:20px;bottom:20px;z-index:45;width:58px;height:58px;border-radius:50%;background:#177a47;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.4);transition:transform .2s}
.wa-float:hover{color:#fff;transform:translateY(-2px)}.wa-float svg{width:30px;height:30px}
/* reveal */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}.js .rv.in{opacity:1;transform:none}
/* visualiser */
.vz-scenes{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.vz-scenes button,.vz-regions button,.vz-fams button{font:inherit;font-weight:600;min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;color:var(--ink)}
.vz-scenes button[aria-selected=true],.vz-regions button[aria-pressed=true],.vz-fams button[aria-pressed=true]{background:var(--deep);border-color:var(--deep);color:#fff}
.vz-main{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
.vz-stage{position:relative;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}.vz-stage canvas{width:100%;height:auto;display:block}
.vz-compare{position:absolute;right:12px;bottom:12px;font:inherit;font-weight:700;font-size:.85rem;padding:10px 14px;min-height:44px;border-radius:999px;border:0;background:rgba(255,255,255,.92);cursor:pointer}
.vz-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.vz-regions,.vz-fams{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.vz-regions i{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:8px;vertical-align:-2px;border:1px solid rgba(0,0,0,.15)}
.vz-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-bottom:14px}
.vz-swatches button{border:2px solid transparent;border-radius:10px;padding:0;cursor:pointer;background:none;text-align:left;font:inherit}
.vz-swatches button[aria-pressed=true]{border-color:var(--deep)}.vz-swatches span{display:block;aspect-ratio:1;border-radius:8px;border:1px solid rgba(0,0,0,.1)}
.vz-swatches small{display:block;font-size:.7rem;line-height:1.2;padding:4px 2px;color:var(--mut)}
.vz-custom{display:flex;align-items:center;gap:10px;margin-bottom:16px}.vz-custom input{width:56px;padding:2px;min-height:44px}
.vz-actions{display:flex;gap:10px;flex-wrap:wrap}.vz-note{font-size:.82rem;color:var(--mut);margin:14px 0 0}
/* responsive */
@media (max-width:1080px){.nav{display:none;position:absolute;left:0;right:0;top:72px;flex-direction:column;background:#fff;padding:12px 20px 20px;border-bottom:1px solid var(--line)}
.nav.open{display:flex}.nav a{padding:14px}.menu{display:flex}.hd-call{margin-left:auto}.hd-call+.menu{margin-left:0}
.svcs,.areas,.gal{grid-template-columns:repeat(2,1fr)}.ft-grid{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.hero-in,.split,.ph-has .ph-in,.prose-grid,.vz-main{grid-template-columns:1fr}.hero{padding-top:24px}.hero-img img{aspect-ratio:4/3}
.wks,.team,.cons,.svcs3,.gal3{grid-template-columns:1fr}.side{position:static}.sec{padding:52px 0}.hd-call span{display:none}
.dock{display:grid;grid-template-columns:1fr 1fr 1.2fr;position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));gap:8px}
.dock a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:12px;font-weight:700;text-decoration:none;background:var(--tint);color:var(--deep)}
.dock a:last-child{background:var(--deep);color:#fff}.wa-float{display:none}.row2{grid-template-columns:1fr}}
@media (max-width:520px){.svcs,.areas,.gal{grid-template-columns:1fr 1fr;gap:10px}.ft-grid{grid-template-columns:1fr}.brand span{font-size:1rem}.svc p{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}
.vz-main>*,.hero-in>*,.split>*,.prose-grid>*{min-width:0}

/* ===== paint-splash world ===== */
::selection{background:var(--yellow);color:var(--ink)}
html{scrollbar-color:var(--sea) var(--tint)}
.hero{position:relative;overflow:hidden;padding:clamp(40px,7vw,96px) 0 clamp(56px,8vw,110px);background:radial-gradient(120% 90% at 78% 40%,#fff 35%,var(--bg) 70%)}
.hero-art{position:absolute;top:50%;right:-3vw;width:min(54vw,800px);transform:translateY(-50%);pointer-events:none}
.hero-logo{width:100%;height:auto;overflow:visible}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,640px);min-height:min(68vh,640px);align-content:center}
.hero h1{font-size:clamp(2.6rem,6vw,5.2rem);letter-spacing:-.035em;line-height:1.02}
.hero .lead{font-size:1.2rem;color:var(--ink);max-width:46ch}
.hero-copy{background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,0));padding:12px 0}
.brush{position:relative;white-space:nowrap;z-index:0}
.brush::after{content:"";position:absolute;z-index:-1;left:-.12em;right:-.12em;bottom:.02em;height:.42em;background:var(--yellow);
 border-radius:40% 60% 55% 45%/60% 40% 60% 40%;transform:rotate(-1.5deg);clip-path:inset(0 0 0 0)}
.badge{transform-box:fill-box;transform-origin:50% 50%}
.sp{transform-box:fill-box;transform-origin:50% 50%;scale:1.9}
.js .hero .badge{animation:badgeIn .9s cubic-bezier(.16,1,.3,1) both}
.js .hero .sp{animation:fling .95s cubic-bezier(.16,1,.3,1) var(--t) both}
.js .hero .brush::after{animation:paint .7s cubic-bezier(.7,0,.2,1) 1.25s both}
.js .hero h1,.js .hero .lead,.js .hero .hero-btns,.js .hero .trust{animation:rise .8s cubic-bezier(.16,1,.3,1) both}
.js .hero .lead{animation-delay:.12s}.js .hero .hero-btns{animation-delay:.22s}.js .hero .trust{animation-delay:.32s}
@keyframes badgeIn{from{opacity:0;transform:scale(.82) rotate(-4deg)}}
@keyframes fling{0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.1)}35%{opacity:1}}
@keyframes paint{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
/* splats as brand texture elsewhere */
.ph,.cta{position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;right:-120px;top:-90px;width:520px;height:590px;background:url(/splats.svg) center/contain no-repeat;opacity:.9;pointer-events:none}
.ph-in,.cta-in{position:relative}
.cta::before{content:"";position:absolute;left:-160px;bottom:-220px;width:620px;height:700px;background:url(/splats.svg) center/contain no-repeat;opacity:.55;transform:rotate(160deg);pointer-events:none}
.cta{background:var(--ink)}
/* fun card accents: each card owns a splat colour */
.svc,.wk,.rev,.area{--c:var(--cyan)}
:is(.svcs,.wks,.revs,.areas,.team)>:nth-child(6n+1){--c:var(--cyan)}:is(.svcs,.wks,.revs,.areas,.team)>:nth-child(6n+2){--c:var(--pink)}
:is(.svcs,.wks,.revs,.areas,.team)>:nth-child(6n+3){--c:var(--yellow)}:is(.svcs,.wks,.revs,.areas,.team)>:nth-child(6n+4){--c:var(--purple)}
:is(.svcs,.wks,.revs,.areas,.team)>:nth-child(6n+5){--c:var(--orange)}:is(.svcs,.wks,.revs,.areas,.team)>:nth-child(6n+6){--c:var(--red)}
.svc{position:relative}
.svc::after{content:"";position:absolute;top:-14px;right:-12px;width:54px;height:48px;background:var(--c);border-radius:58% 42% 63% 37%/45% 55% 45% 55%;
 transform:scale(.0) rotate(-20deg);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.svc:hover::after,.svc:focus-visible::after{transform:scale(1) rotate(0)}
.svc{overflow:visible}.svc img{border-radius:var(--r) var(--r) 0 0}
.rev figcaption::before{content:"";display:inline-block;width:18px;height:16px;margin-right:10px;vertical-align:-2px;background:var(--c);border-radius:58% 42% 63% 37%/45% 55% 45% 55%}
.wk span{background:linear-gradient(transparent,rgba(11,26,43,.88))}.wk b::after{content:"";display:block;width:36px;height:5px;border-radius:9px;background:var(--c);margin-top:6px}
.area span::before{content:"";display:inline-block;width:14px;height:12px;margin-right:8px;background:var(--c);border-radius:58% 42% 63% 37%/45% 55% 45% 55%}
.towns a:nth-child(6n+1):hover{background:var(--cyan)}.towns a:nth-child(6n+2):hover{background:var(--pink)}.towns a:nth-child(6n+3):hover{background:var(--yellow)}
.towns a:nth-child(6n+4):hover{background:var(--purple)}.towns a:nth-child(6n+5):hover{background:var(--orange)}.towns a:nth-child(6n+6):hover{background:var(--red)}
.towns a:hover{border-color:transparent;color:var(--ink)}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sea);clip-path:circle(0 at 50% 120%);transition:clip-path .45s cubic-bezier(.16,1,.3,1)}
.btn:hover::before{clip-path:circle(150% at 50% 120%)}.btn:hover{background:var(--deep)}.btn-ghost:hover{background:transparent}.btn-ghost:hover::before{background:var(--deep)}.btn-ghost:hover{color:#fff}
.btn-wa:hover{background:#177a47}.btn-wa::before{background:#16733f}.btn-line::before{background:var(--yellow)}.btn-line:hover{color:var(--ink);background:#fff}
@media (max-width:820px){.hero-art{position:relative;top:auto;right:auto;transform:none;width:min(92vw,520px);margin:-10px auto -30px}
 .hero{padding-top:8px}.hero-in{min-height:0}.hero-copy{background:none}.ph::before{width:300px;height:340px;right:-110px;top:-60px;opacity:.6}}
@media (prefers-reduced-motion:reduce){.js .hero *{animation:none!important}}
/* painted underline on section headings, colour rotates by section */
.sec h2:not(.h3){position:relative;display:inline-block;z-index:0}
.sec h2:not(.h3)::after{content:"";position:absolute;z-index:-1;left:-.08em;bottom:-.2em;width:min(3.4em,100%);height:.24em;background:var(--hc,var(--yellow));
 border-radius:40% 60% 55% 45%/60% 40% 60% 40%;transform:rotate(-1.5deg);transform-origin:left}
main>.sec:nth-of-type(6n+1){--hc:var(--cyan)}main>.sec:nth-of-type(6n+2){--hc:var(--pink)}main>.sec:nth-of-type(6n+3){--hc:var(--yellow)}
main>.sec:nth-of-type(6n+4){--hc:var(--orange)}main>.sec:nth-of-type(6n+5){--hc:var(--purple)}main>.sec:nth-of-type(6n+6){--hc:var(--red)}
.js .sec h2.rv-h::after{transform:rotate(-1.5deg) scaleX(0);transition:transform .7s cubic-bezier(.7,0,.2,1) .15s}
.js .sec h2.rv-h.in::after{transform:rotate(-1.5deg) scaleX(1)}
.prose h2{display:block!important}.prose h2::after{display:none}
/* splats burst from behind page-head photos */
.ph-has::before{display:none}.ph-img{position:relative}
.ph-img::before{content:"";position:absolute;inset:-34% -30%;background:url(/splats.svg) center/contain no-repeat;z-index:-1;pointer-events:none}
.ph-has .ph-in>div:last-child{isolation:isolate}
.js .ph-img::before{animation:burst .9s cubic-bezier(.16,1,.3,1) .1s both}
@keyframes burst{from{opacity:0;transform:scale(.55) rotate(-8deg)}}
.split img{aspect-ratio:4/3;object-fit:cover;width:100%}
@media (prefers-reduced-motion:reduce){.js .sec h2.rv-h::after{transform:rotate(-1.5deg)}.js .ph-img::before{animation:none}}
/* ===== v3 "paint shop poster" (Superdesign / Grok direction) ===== */
@font-face{font-family:"Bebas";src:url(/fonts/BebasNeue.woff2) format("woff2");font-display:swap}
h1,h2,.h1{font-family:Bebas,Impact,sans-serif;font-weight:400;letter-spacing:.01em;line-height:.92;text-transform:uppercase}
h1{font-size:clamp(3rem,7vw,5.6rem)}h2{font-size:clamp(2.4rem,4.6vw,4rem)}
.hero h1{font-size:clamp(4rem,10.5vw,9.6rem);line-height:.86;letter-spacing:.005em;display:flex;flex-direction:column}
.hero h1 .out{color:transparent;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill}
.hero .brush::after{height:.18em;bottom:.04em}
.hero-in{grid-template-columns:minmax(0,760px)}
.hero-art{right:-12vw;width:min(66vw,1000px);transform:translateY(-50%) rotate(-6deg)}
.hero-copy{background:none}
.facts{background:var(--ink);color:#fff}.facts-in{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-block:34px}
.facts b{display:block;font:400 clamp(3rem,6vw,5rem)/.9 Bebas,sans-serif;color:var(--yellow)}.facts div:nth-child(2) b{color:var(--cyan)}.facts div:nth-child(3) b{color:var(--pink)}
.facts span{color:#c9d6e0;font-weight:600}
.marquee{overflow:hidden;border-bottom:2px solid var(--ink);background:#fff;padding:16px 0}
.mq{display:flex;gap:48px;width:max-content;animation:mq 40s linear infinite}
.mq span{font:400 1.7rem/1 Bebas,sans-serif;letter-spacing:.03em;white-space:nowrap}.mq span::after{content:"";display:inline-block;width:.5em;height:.42em;margin-left:48px;background:var(--orange);border-radius:58% 42% 63% 37%/45% 55% 45% 55%}
.mq span:nth-child(3n+2)::after{background:var(--cyan)}.mq span:nth-child(3n)::after{background:var(--pink)}
@keyframes mq{to{transform:translateX(-50%)}}
.work-grid{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start}.work-intro{position:sticky;top:110px}
.index{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.index li{border-bottom:2px solid var(--ink)}
.index a{display:grid;grid-template-columns:1fr minmax(0,300px);gap:6px 24px;align-items:center;padding:20px 4px;text-decoration:none;color:var(--ink);position:relative}
.ix-name{font:400 clamp(2rem,3.8vw,3.3rem)/1 Bebas,sans-serif;letter-spacing:.01em;transition:color .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.ix-short{color:var(--mut);font-size:.92rem;text-align:right}
.ix-pic{position:absolute;right:30%;top:50%;width:200px;transform:translateY(-50%) rotate(4deg) scale(.6);opacity:0;pointer-events:none;transition:opacity .25s,transform .4s cubic-bezier(.16,1,.3,1);z-index:2}
.ix-pic img{border:6px solid #fff;box-shadow:0 18px 40px -16px rgba(0,0,0,.45);aspect-ratio:4/3;object-fit:cover}
.index li:nth-child(6n+1){--c:var(--cyan)}.index li:nth-child(6n+2){--c:var(--pink)}.index li:nth-child(6n+3){--c:var(--orange)}.index li:nth-child(6n+4){--c:var(--purple)}.index li:nth-child(6n+5){--c:var(--red)}.index li:nth-child(6n+6){--c:#d9a400}
.index a:hover .ix-name,.index a:focus-visible .ix-name{color:var(--c);transform:translateX(10px)}
.index a:hover .ix-pic{opacity:1;transform:translateY(-50%) rotate(4deg) scale(1)}
.sec-ink{background:var(--ink);color:#fff}.sec-ink h2{color:#fff}.sec-ink .link{color:var(--yellow)}
.pols{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 40px;padding:20px 10px}
.pol{background:#fff;padding:12px 12px 18px;transform:rotate(var(--r));box-shadow:0 22px 40px -18px rgba(0,0,0,.6);text-decoration:none;color:var(--ink);position:relative;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.pol::before{content:"";position:absolute;top:-14px;left:50%;width:110px;height:28px;transform:translateX(-50%) rotate(-4deg);background:rgba(249,196,64,.78);}
.pol img{aspect-ratio:4/3.4;object-fit:cover;width:100%}.pol b{display:block;font:400 1.5rem/1 Bebas,sans-serif;margin-top:12px;color:var(--ink)}
.pol:hover{transform:rotate(0) translateY(-6px) scale(1.02);color:var(--ink)}
.tins{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tin{text-decoration:none;color:var(--ink);text-align:center;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.tin i{display:block;aspect-ratio:1;border-radius:50%;background:var(--t);border:3px solid var(--ink);box-shadow:inset 0 -10px 0 rgba(0,0,0,.12);margin-bottom:10px;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.tin:hover i{transform:translateY(-6px) rotate(-8deg)}
.sec h2:not(.h3)::after{height:.16em;bottom:-.05em}
@media (max-width:820px){.hero-art{transform:rotate(-6deg);width:min(100vw,560px);margin:-20px -8vw -40px auto}
 .hero h1{font-size:clamp(3.6rem,17vw,5.6rem)}.facts-in{grid-template-columns:1fr;gap:14px}.facts-in div{display:flex;align-items:baseline;gap:14px}
 .work-grid{grid-template-columns:1fr;gap:20px}.work-intro{position:static}.index a{grid-template-columns:1fr}.ix-short{text-align:left}.ix-pic{display:none}
 .pols{grid-template-columns:1fr 1fr;gap:28px 16px}.tins{grid-template-columns:repeat(3,1fr);gap:12px}}
@media (max-width:520px){.pols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mq{animation:none}}
.mq{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:10px 40px;padding-inline:20px}.mq span::after{margin-left:40px}.mq span:last-child::after{display:none}
.hero-art.is-3d{aspect-ratio:1/1;transform:translateY(-50%)}.hero-art.is-3d .hero-logo{display:none}
.hero-3d{display:block;width:100%;height:100%;animation:rise .6s ease both}
@media (max-width:820px){.hero-art.is-3d{transform:none;width:min(100vw,560px);margin:-20px auto -30px}}
@media (min-width:821px){.hero-art.is-3d{width:min(56vw,860px);right:-5vw}}
.hero-art:not(.is-3d) .hero-3d{position:absolute;inset:0;opacity:0}
@media (max-width:820px){.hero-art.is-3d{width:100%;max-width:560px;margin:-10px auto -20px;left:auto;right:auto}}
@media (max-width:820px){.hero-art,.hero-art.is-3d{width:min(78vw,340px);margin:-6px auto -18px;aspect-ratio:1/1}
 .hero-art .hero-logo{transform:none}.js .hero .sp,.js .hero .badge{animation:none}.hero{padding-bottom:40px}}
/* phones: 3D canvas overhangs the badge box so paint drops aren't clipped; flat logo only if 3D never arrives */
@media (max-width:820px){.hero-art{position:relative}.hero-art,.hero-art.is-3d{width:calc(100% + 40px);max-width:none;margin:-10px -20px -30px;aspect-ratio:1/0.92}
 .js .hero-art:not(.is-3d) .hero-logo{animation:svgShow .4s 2.5s both}}
@keyframes svgShow{from{opacity:0}}
/* phones: pre-rendered 3D loop (reliable everywhere); desktop: live WebGL */
.hero-vid{display:none}
@media (max-width:820px){.hero{background:#fff}.hero-art{aspect-ratio:720/662}.hero-art .hero-logo{display:none}
 .hero-vid{display:block;width:100%;height:100%;object-fit:cover;background:#fff url(/hero-m.webp) center/cover}}
/* centred hero: badge in the middle, paint drops stream the full width, headline centred below */
@media (min-width:821px){
 .hero{padding-top:12px}
 .hero-art,.hero-art.is-3d{position:relative;top:auto;right:auto;left:auto;transform:none;width:100%;max-width:none;aspect-ratio:auto;height:min(58vh,560px);margin:0}
 .hero-art .hero-logo{width:auto;height:100%;margin:0 auto;display:block}
 .hero-in{grid-template-columns:1fr;justify-items:center;text-align:center;min-height:0}
 .hero h1{align-items:center;font-size:clamp(4rem,8.5vw,8rem)}.hero h1>span{display:block}
 .hero .lead{margin-inline:auto}.hero-btns{justify-content:center}}
@media (max-width:820px){.hero-art{position:relative}.hero-vid{position:absolute;inset:0;background:#fff}.hero-intro{z-index:2;background:#fff url(/hero-intro.webp) center/cover}.hero-intro.done{visibility:hidden}.hero-loop{z-index:1}}
/* flat paint splats: fling out of the badge on open and stay on the background */
.hero-splats{position:absolute;inset:-6% -2%;width:104%;height:112%;overflow:visible;pointer-events:none;z-index:0}
.hero-3d{position:relative;z-index:1}
.hero-art.is-3d .hero-splats{display:block}
.js .hero .hero-splats .sp{animation:fling 1.1s cubic-bezier(.16,1,.3,1) calc(var(--t) + 250ms) both}
@media (max-width:820px){.hero-splats{inset:-4%;width:108%;height:108%;z-index:3;mix-blend-mode:multiply}
 .js .hero .hero-splats .sp{animation:fling 1.1s cubic-bezier(.16,1,.3,1) calc(var(--t) + 250ms) both}}
@media (prefers-reduced-motion:reduce){.js .hero .hero-splats .sp{animation:fling 1.1s cubic-bezier(.16,1,.3,1) calc(var(--t) + 250ms) both}}
.hero-art{overflow:hidden}.hero-splats{inset:0;width:100%;height:100%}
@media (max-width:820px){.hero-splats{inset:0;width:100%;height:100%}}
.prose h2{font-size:clamp(1.9rem,3vw,2.5rem);margin-top:1.3em}
@media (max-width:820px){.ph::before{display:none}}
@media (max-width:820px){.hero-poster{z-index:0;object-fit:cover}}
/* Hero v4: his own work instead of the animated badge */
.hero-work{background:var(--bg);text-align:left}
.hero-work .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:center;min-height:0}
.hero-work .hero-copy{background:none}
.hero-work h1{font-size:clamp(3.4rem,7.4vw,7.2rem)}
.hero-pics{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:12px;aspect-ratio:1/1}
.hw{position:relative;overflow:hidden;border-radius:var(--r);box-shadow:var(--sh)}
.hw img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.hw:hover img{transform:scale(1.04)}
.hw-a{grid-row:1/3}
@media (max-width:820px){.hero-work .hero-in{grid-template-columns:1fr}
 .hero-pics{aspect-ratio:4/3;grid-template-columns:1fr;grid-template-rows:1fr;order:-1}.hw-b,.hw-c{display:none}}
@media (prefers-reduced-motion:reduce){.hw img{transition:none}}
.brand img{height:80px;width:auto}
.hero-work .hero-copy{text-align:left}.hero-work h1{align-items:flex-start}.hero-work .hero-btns{justify-content:flex-start}.hero-work .lead{margin-inline:0}
.brand img{height:68px;width:auto;margin-block:6px}
/* Hero v5: Flapjackery shop front as a full background */
.hero-bg{position:relative;isolation:isolate;min-height:min(88vh,760px);display:flex;align-items:center;padding:clamp(48px,7vw,96px) 0;background:var(--ink)}
.hero-bg .hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;z-index:-2}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,26,43,.9) 0%,rgba(11,26,43,.72) 32%,rgba(11,26,43,.12) 55%,rgba(11,26,43,0) 100%)}
.hero-bg .hero-in{grid-template-columns:minmax(0,640px);width:100%}
.hero-bg h1,.hero-bg .lead{color:#fff}
.hero-bg h1 .out{-webkit-text-stroke-color:#fff}
.hero-bg .btn-ghost{color:#fff;border-color:#fff}.hero-bg .btn-ghost:hover{background:#fff;color:var(--ink)}
@media (max-width:820px){.hero-bg{min-height:0;padding:56px 0 48px}
 .hero-bg::before{background:linear-gradient(180deg,rgba(11,26,43,.55) 0%,rgba(11,26,43,.82) 55%,rgba(11,26,43,.95) 100%)}
 .hero-bg .hero-bg-img{object-position:50% 70%}}
.hero-bg .btn:not(.btn-ghost){background:var(--yellow);color:var(--ink);border-color:var(--yellow)}.hero-bg .btn:not(.btn-ghost):hover{background:#fff;border-color:#fff}
@media (max-width:820px){.hero-bg{padding-top:min(62vw,300px)}
 .hero-bg .hero-bg-img{height:min(78vw,380px);bottom:auto;object-position:50% 60%}
 .hero-bg::before{background:linear-gradient(180deg,rgba(11,26,43,0) 0,rgba(11,26,43,.15) min(40vw,190px),var(--ink) min(78vw,380px))}}
@media (min-width:821px){.hero-bg .hero-bg-img{object-position:65% 12%}}
@media (min-width:821px){
 .hero-bg{min-height:min(74vh,640px);padding:clamp(40px,5vw,72px) 0}
 .hero-bg .hero-bg-img{left:auto;right:0;width:60%;object-position:50% 30%}
 .hero-bg::before{background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 40%,rgba(11,26,43,.55) 52%,rgba(11,26,43,.1) 70%,rgba(11,26,43,0) 100%)}
 .hero-bg h1{font-size:clamp(3.4rem,5.6vw,6rem)}
 .hero-bg .hero-in{grid-template-columns:minmax(0,560px)}
}
/* impeccable fixes 18 Oct */
.faq p{max-width:38em}
.sec-ink .pol,.sec-ink .pol img{box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}
/* Our work: job collage + photo viewer */
.gtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.gtile{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:var(--ink);aspect-ratio:4/5;color:#fff;text-decoration:none}
.gtile img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s}
.gtile span{position:absolute;inset:auto 0 0 0;padding:40px 14px 12px;background:linear-gradient(transparent,rgba(11,26,43,.88));font-size:.88rem;line-height:1.35}
.gtile b{display:block;font-family:Bricolage,Manrope,sans-serif;font-size:1.05rem}
.gtile:hover img,.gtile:focus-visible img{transform:scale(1.04)}
.gtile:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.lb{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:#060e18;color:#fff}
.lb::backdrop{background:rgba(6,14,24,.7)}
.lb[open]{display:flex;flex-direction:column}
.lb-top{display:flex;align-items:center;gap:14px;padding:12px 16px}
.lb-title{margin:0;flex:1;font-family:Bricolage,Manrope,sans-serif;font-weight:700}
.lb-count{opacity:.75;font-variant-numeric:tabular-nums}
.lb-x,.lb-nav{min-width:48px;min-height:48px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.24)}
.lb-x:focus-visible,.lb-nav:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 10px 16px}
.lb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
@media (max-width:620px){.gtiles{grid-template-columns:repeat(2,1fr);gap:10px}.lb-nav{position:absolute;bottom:18px}.lb-prev{left:16px}.lb-next{right:16px}.lb-stage{padding-bottom:84px}}
@media (prefers-reduced-motion:reduce){.gtile img{transition:none}}
/* Home: notable contracts strip, each a link with a pop-up preview */
.mq .mq-i{position:relative;color:var(--ink);text-decoration:none}
.mq .mq-t{font:400 1.7rem/1 Bebas,sans-serif;letter-spacing:.03em;white-space:nowrap;border-bottom:2px solid transparent;transition:border-color .2s}
.mq .mq-i:hover .mq-t,.mq .mq-i:focus-visible .mq-t{border-color:var(--orange)}
.mq .mq-i:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:4px}
.mq .mq-i::after{content:"";display:inline-block;width:.5em;height:.42em;margin-left:40px;background:var(--orange);border-radius:58% 42% 63% 37%/45% 55% 45% 55%;font-size:1.7rem}
.mq .mq-i:nth-child(3n+2)::after{background:var(--cyan)}.mq .mq-i:nth-child(3n)::after{background:var(--pink)}.mq .mq-i:last-child::after{display:none}
.mq-pop{position:absolute;left:50%;bottom:calc(100% + 12px);z-index:20;width:240px;padding:10px;background:#fff;border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);
 opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .18s,transform .18s,visibility .18s;pointer-events:none;text-align:left}
.mq-pop img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:8px}
.mq-pop b{display:block;font-family:Bricolage,Manrope,sans-serif;font-size:1rem}
.mq-pop small{display:block;font-size:.85rem;line-height:1.4;color:var(--mut)}
@media (hover:hover){.mq-i:hover .mq-pop,.mq-i:focus-visible .mq-pop{opacity:1;visibility:visible;transform:translate(-50%,0)}}
.marquee{position:relative;overflow:visible}
@media (prefers-reduced-motion:reduce){.mq-pop{transition:none}}
/* Our work: notable contract cards with a photo */
.con-pic img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin-bottom:10px}
.con:target{outline:3px solid var(--orange);outline-offset:4px}
.cons{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.mq .mq-t::after,.mq .mq-pop::after{display:none}
.mq .mq-pop{font:400 .9rem/1.4 Manrope,system-ui,sans-serif;letter-spacing:0;white-space:normal}
.mq{gap:10px 28px}.mq .mq-i::after{margin-left:28px}
.con{scroll-margin-top:110px}
/* brand tins (18 Oct): 8 brands, names wrap, not links */
.tins{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 16px}
.tin{min-width:0;overflow-wrap:break-word;hyphens:auto;letter-spacing:.03em;font-size:.78rem;line-height:1.3}
.tin:hover i{transform:none}
@media (max-width:820px){.tins{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px}.tin{font-size:.68rem}}
@media (hover:none),(max-width:820px){.mq-pop{display:none}}
/* impeccable 18 Oct: hover fill only exists on hover (no hidden low-contrast layer); readable measure in prose */
.btn::before{background:transparent}.btn:hover::before,.btn:focus-visible::before{background:var(--sea)}
.prose p,.prose li{max-width:68ch}
.prose p,.prose li,.ph .lead,.card p{max-width:37em}
/* Meet the team */
.team-pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;align-items:start}
.tm{padding:0;overflow:hidden}.tm-body{padding:20px}
.tm-pic{width:100%;aspect-ratio:4/5;object-fit:cover}
.area small{display:block;font-weight:400;font-size:.8rem;color:var(--muted,#55606b);margin-top:2px;line-height:1.3}

.crew{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.crew img{width:100%;height:auto;aspect-ratio:3/3.4;object-fit:cover;border-radius:var(--r,10px)}
@media (max-width:700px){.crew{grid-template-columns:1fr 1fr}.crew img:first-child{grid-column:1/-1;aspect-ratio:4/3}}