@font-face{font-family:orchorde;font-weight:400;font-display:swap;src:url(/assets/fonts/orchorde.woff) format('woff')}
:root{--bg:#121212;--chrome:#0c0c0c;--fg:#fff;--muted:#d9d9d9;--link:#00b2ff;--accent:#e09900;--card:#1c1c1c}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:500 12px/1.7 "Open Sans",Helvetica,Arial,Lucida,sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6{margin:0;padding:0 0 10px;font-weight:500;line-height:1;color:var(--fg)}
h1{font-size:40px;line-height:1}h2{font-size:26px}h3{font-size:22px}h4{font-size:18px}h5{font-size:16px;line-height:1}h6{font-size:14px}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0 0 23px 1em;line-height:26px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{background:var(--chrome);height:97px;position:relative;z-index:20}
.top nav{height:100%}
.menu{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:28px;height:100%}
.menu>li{position:relative}
.menu>li>a{display:block;padding:31px 0;font-size:14px;font-weight:700;line-height:14px;color:#fff;margin:10px 0}
.menu>li>a:hover{text-decoration:none;opacity:.8}
.sub{list-style:none;margin:0;padding:20px 0 5px;position:absolute;top:75px;left:50%;transform:translateX(-50%);width:464px;max-width:92vw;background:#fff;border-radius:20px;box-shadow:1px 2px 44px rgba(84,81,179,.36);visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
.sub::before{content:"";position:absolute;left:50%;top:-20px;margin-left:-20px;border:20px solid transparent;border-top:0;border-bottom:20px solid #fff}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{visibility:visible;opacity:1}
.sub li{padding:0 30px 15px}
.sub a{display:block;color:#333}
.sub a:hover{text-decoration:none}
.sub a:hover strong{color:var(--link)}
.sub strong{display:block;font-size:16px;font-weight:600;line-height:1.3;color:#222}
.sub span{display:block;font-size:12px;line-height:1.5;color:#555}
.burger{display:none}

/* sections / rows / columns (Divi proportions: 1080px row, 5.5% gutters) */
.sec{padding-top:var(--spt,54px);padding-bottom:var(--spb,54px)}   /* Divi: 54px; per-section values captured from the original */
.sec.main{background:var(--bg)}
.row{width:80%;max-width:1080px;margin:0 auto;padding-top:var(--rpt,27px);padding-bottom:var(--rpb,27px);display:flex;flex-wrap:wrap;align-items:flex-start}
.col{margin-right:5.5%;min-width:0}
.col:last-child{margin-right:0}
.w1{width:100%;margin-right:0}.w12{width:47.25%}.w13{width:29.6667%}.w23{width:64.8333%}.w14{width:20.875%}.w34{width:73.625%}.w15{width:15.6%}.w25{width:36.7%}.w35{width:57.8%}
.txt,.img,.video,.blurb,.accordion,.gallery,.portfolio,.btnwrap{margin-bottom:30px}
.col>*:last-child{margin-bottom:0}
.txt,.blurb-body,.acc-body{overflow-wrap:anywhere}
pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;margin:0 0 1em;font-size:11px}
.txt table{border-collapse:collapse;max-width:100%}
.txt td,.txt th{vertical-align:top}
.txt img{height:auto}
.txt .project-links a{color:var(--link)}
.txt iframe,.embed iframe{max-width:100%;border:0}
.embed{margin-bottom:30px}.embed iframe{display:block;width:100%}
.prose h2{padding-top:1em}

/* home hero */
.sec.main{position:relative}

/* media */
.img{margin-top:0}
.img img{display:block;margin:0 auto;border-radius:10px;box-shadow:0 2px 18px rgba(0,0,0,.3)}
.video{position:relative;aspect-ratio:16/9;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.btn{display:inline-block;padding:6px 20px;border:2px solid #fff;border-radius:3px;font-size:20px;font-weight:500;line-height:1.7;color:#fff}
.btn:hover{background:rgba(255,255,255,.2);text-decoration:none}
.btnwrap{text-align:center}
.blurb.bordered{background:var(--chrome);border-radius:10px;padding:50px 20px;box-shadow:0 2px 18px rgba(0,0,0,.3)}
.blurb h4{padding-bottom:10px}
.accordion .acc{border:1px solid #fff;margin-bottom:20px}
.acc summary{cursor:pointer;padding:20px;font-size:16px;font-weight:500;line-height:16px;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"⊕";float:right;font-weight:400}
.acc[open] summary::after{content:"⊖"}
.acc-body{padding:0 20px 20px}
.docnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 24px}

/* carousel (home): the original Slick carousel. 850px centred slide (480px phones), neighbours scaled/blurred/half-transparent on desktop only,
   images at 70% brightness until hovered, 10px corners + soft shadow, 12px dots. */
.carousel{position:relative}
.gap{height:0;margin-bottom:30px}
.col>.gap:last-child,.col>.carousel:last-child{margin-bottom:30px}   /* the original keeps the module's 30px under the carousel (beats .col>*:last-child) */
.car-list{overflow:hidden;padding:10px 0;opacity:0;transition:opacity .25s ease-in-out;touch-action:pan-y}
.carousel.ready .car-list{opacity:1}
.car-track{position:relative;display:flex;align-items:center;list-style:none;margin:0;padding:0;width:max-content;transition:transform .5s ease;will-change:transform}
.car-track.snap,.car-track.snap .car-slide{transition:none}
.car-slide{flex:0 0 auto;width:850px;margin:10px;filter:opacity(.5) blur(1px);transform:scale(.9);transition:filter .5s ease-in-out,transform .5s ease-in-out;backface-visibility:hidden}
.car-slide.on{filter:opacity(1) blur(0);transform:none}
.car-slide a{display:block;line-height:0;padding-bottom:7px}   /* the original's slide box is 7px taller than the image (inline-block gap) */
.car-wrap{display:inline-block;max-width:100%;border-radius:10px;box-shadow:0 2px 18px rgba(0,0,0,.3);overflow:hidden;filter:brightness(.7);transition:filter .3s}
.car-wrap:hover{filter:brightness(1)}
.car-wrap img{display:block;width:850px;height:auto;max-width:none}
.car-dots{display:flex;justify-content:center;height:0;margin:0;padding:0}
.car-dots button{width:12px;height:12px;margin:0 5px;padding:0;border:0;border-radius:40px;background:#aaa;cursor:pointer;transition:background-color .3s ease}
.car-dots button.on{background:#00b2ff}
@media (max-width:980px){.car-slide,.car-slide.on{filter:none;transform:none}}
@media (max-width:767px){.car-slide{width:480px}.car-slide a{padding-bottom:6px}.car-wrap img{width:480px}}
@media (prefers-reduced-motion:reduce){.car-track,.car-slide{transition:none!important}}
/* gallery */
.gallery{list-style:none;margin:0 0 30px;padding:0;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory}
.gallery li{flex:0 0 100%;scroll-snap-align:start}
.gallery img{display:block;width:100%}
/* portfolio */
.filters{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px}
.filters button{background:none;border:0;padding:0;color:var(--muted);font:inherit;font-weight:600;cursor:pointer}
.filters button.on,.filters button:hover{color:var(--link)}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:30px 20px}
.grid li[hidden]{display:none}
.grid h2{font-size:18px;padding:10px 0 0}
.grid h2 a{color:#fff}
.grid img{display:block;width:100%}

.hover-bg{position:absolute;width:100%;max-width:850px;height:400px;background-size:150% auto;background-position:center;opacity:0;transition:opacity .3s;z-index:0;pointer-events:none;border-radius:10px;box-shadow:0 2px 18px rgba(0,0,0,.3);-webkit-mask-image:linear-gradient(transparent 0,#000 15%,#000 85%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 15%,#000 85%,transparent 100%)}
.sec.main .row{position:relative;z-index:1}

/* cookie consent (bottom right, like the original Complianz banner) */
.ck{position:fixed;right:16px;bottom:16px;z-index:9000;width:min(400px,calc(100vw - 32px));box-sizing:border-box;padding:18px 18px 12px;background:#232323;color:#fff;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.55);font:500 12px/1.6 "Open Sans",Helvetica,Arial,sans-serif}
.ck h2{margin:0 0 8px;padding:0;font-size:14px;font-weight:600;text-align:center}
.ck p{margin:0 0 12px}
.ck-pref{margin:0 0 12px}
.ck-pref label{display:block;margin:0 0 8px}
.ck-pref label input{margin-right:6px;vertical-align:-2px}
.ck-b{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
.ck button{font:inherit;font-weight:600;padding:10px 6px;border:0;border-radius:6px;background:#fff;color:#232323;cursor:pointer}
.ck button:hover{filter:brightness(.92)}
.ck button.ck-acc{background:#00b2ff;color:#fff}
.ck-pref .ck-acc{width:100%}
.ck-l{text-align:center;margin:0!important;font-size:11px}
.ck-l a{color:#00b2ff;text-decoration:underline;margin:0 6px}
.linkbtn{background:none;border:0;padding:0;margin:0 0 0 6px;font:inherit;color:var(--link);cursor:pointer}
.linkbtn:hover{text-decoration:underline}
@media (max-width:480px){.ck{right:12px;bottom:12px;width:calc(100vw - 24px)}.ck-b{grid-template-columns:1fr}}

/* lightbox (Magnific-style: dark 80% overlay, big image, caption bottom-left, thin close, arrows) */
dialog.lbx{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(11,11,11,.8);color:#fff;overflow:hidden}
dialog.lbx[open]{display:flex;align-items:center;justify-content:center}
dialog.lbx::backdrop{background:transparent}
.lbx figure{position:relative;margin:0;max-width:calc(100vw - 16px)}
.lbx img{display:block;max-width:calc(100vw - 16px);max-height:calc(100vh - 80px);width:auto;height:auto;margin:0 auto}
.lbx figcaption{position:absolute;left:0;top:100%;padding-top:6px;font:13px/18px Arial,Helvetica,sans-serif;color:#f3f3f3;text-align:left;white-space:nowrap}
.lbx button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;opacity:.65;padding:0;font-family:Arial,Helvetica,sans-serif}
.lbx button:hover{opacity:1}
.lbx-x{top:0;right:0;width:44px;height:44px;font-size:42px;font-weight:100;line-height:44px}
.lbx-p,.lbx-n{top:50%;width:70px;height:110px;margin-top:-55px;font-size:70px;font-weight:100;line-height:100px}
.lbx-p{left:0}.lbx-n{right:0}
.lbx.single .lbx-p,.lbx.single .lbx-n{display:none}

/* footer (Divi modules: 54px section + 27px row padding; text modules 37/35/20/35px) */
.foot{background:var(--chrome);padding:81px 0;text-align:center}
.foot-in{width:90%;max-width:1080px;margin:0 auto}
.portrait{display:block;margin:0 auto 30px;width:75px;height:75px;border-radius:10px}
.foot p{margin:0;padding:0 0 15px;line-height:20.4px}
.foot .social{height:37px;padding:0}
.foot .mail{padding:0;height:20px}
.social a{display:inline-block;margin:0 5px;font-size:14px}
.social svg{width:14px;height:14px;fill:currentColor;vertical-align:-.125em}
.foot a+a{margin-left:6px}

@media (max-width:980px){
  .sec{padding-top:var(--stpt,var(--spt,54px));padding-bottom:var(--stpb,var(--spb,54px))}
  .row{padding-top:var(--rtpt,var(--rpt,27px));padding-bottom:var(--rtpb,var(--rpb,27px))}
  .col,.w12,.w13,.w23,.w14,.w34,.w15,.w25,.w35{width:100%;margin-right:0}
  .col+.col{margin-top:30px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .top{height:55px}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:4px;position:absolute;left:calc(10% + 6px);top:11px;width:32px;height:32px;background:none;border:0;padding:0 6px;cursor:pointer}
  .burger span{display:block;width:20px;height:2px;margin:0;background:var(--link)}
  .top nav{height:auto;width:100%}
  .menu{display:none;position:absolute;top:55px;left:0;right:0;background:var(--chrome);flex-direction:column;gap:0;height:auto;padding:10px 5% 20px}
  .top.open .menu{display:flex}
  .menu>li>a{margin:0;padding:12px 0}
  .sub{position:static;transform:none;width:auto;max-width:none;visibility:visible;opacity:1;background:transparent;box-shadow:none;border-radius:0;padding:0;display:none}
  .sub::before{display:none}
  .has-sub.reveal>.sub{display:block}
  .sub a{color:#ddd}.sub strong{color:#fff;font-size:14px}.sub span{color:#aaa}
  .sub li{padding:0 0 12px 12px}
}
@media (max-width:767px){
  .sec{padding-top:var(--smpt,var(--stpt,var(--spt,54px)));padding-bottom:var(--smpb,var(--stpb,var(--spb,54px)))}
  .row{padding-top:var(--rmpt,var(--rtpt,var(--rpt,27px)));padding-bottom:var(--rmpb,var(--rtpb,var(--rpb,27px)))}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* light pages (blog post, legal) and project nav */
#underworld h1,#underworld h2,#underworld h3,#underworld h4,#underworld h5,#underworld .acc summary{font-family:orchorde,"Open Sans",sans-serif}
#underworld h1{font-size:30px}
.light{background:#fff;color:#121212}
.light a{color:var(--link)}
.light h1,.light h2,.light h3,.light h4{color:#121212}
.container{width:80%;max-width:1080px;margin:0 auto;padding-top:58px}
.entry-title{font-size:30px;line-height:1.2;padding-bottom:10px}
.post-meta{font-size:14px;margin:0;padding-bottom:15px}
.post .container{padding-bottom:30px}
.post-end{height:58px}
.legal .container{padding-bottom:30px}
.legal h2{font-size:22px;padding:.8em 0 10px}
.legal h3{font-size:18px;padding:.6em 0 10px}
.legal h4,.legal h5{font-size:14px;padding:0 0 6px}
.legal .cmplz-service-header{display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(239,239,239,.5);padding:5px 10px;margin:0 0 6px;cursor:pointer;font-size:14px}
.legal .cmplz-service-header>div{display:flex;width:100%;justify-content:space-between;align-items:center}
.legal .cmplz-service-header h3{font-size:14px;padding:0;margin:0}
.legal .cmplz-service-header p{margin:0 30px 0 0}
.legal .cookies-per-purpose{display:grid;grid-template-columns:auto 1fr;gap:2px 20px;padding:10px}
.legal .cookies-per-purpose .purpose{grid-column:1/-1}
.legal details>div{padding:0 10px}
.nav-single{display:flex;justify-content:space-between;padding:10px 0 12px;font-size:12px}
.nav-single a{color:var(--link);font-weight:400}
.nav-single .next{margin-left:auto}

/* colours + alignment the original set per module (captured by conv/modstyle.js) */
.client,.txt a.client{color:#2ef27c}               /* client / commissioner names on the home page */
.TBC{color:#ff9900}                                 /* "TBC" dates on the home page */
.blurb.c,.txt.c{text-align:center}                  /* centred card / text modules */
.txt.c.hl :is(h1,h2,h3,h4,h5,h6){text-align:left}   /* ...whose headings the original kept left-aligned */
.blurb h4.hot{color:#ff9900}                        /* "commonly asked" interview questions */
.txt.fit iframe{width:100%;height:auto}             /* embeds in text modules fill the column (original: fitvids); ratio comes from the inline aspect-ratio */
.txt[style*="--hfs"]>:is(h1,h2,h3,h4,h5,h6):first-child{font-size:var(--hfs)}   /* per-module heading size from the original */