/* ============================================================
   Cool Koala Creative: shared stylesheet
   Loaded on every page as /styles.css
   ============================================================ */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/bricolage-600.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/bricolage-700.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/bricolage-800.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/hanken-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/hanken-500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/hanken-600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/hanken-700.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/hanken-800.woff2') format('woff2')}
@font-face{font-family:'CKH Fallback';font-weight:100 500;src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Roboto'),local('Liberation Sans');size-adjust:100.9%;ascent-override:99.1%;descent-override:30%;line-gap-override:0%}@font-face{font-family:'CKH Fallback';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Roboto Bold'),local('Roboto-Bold'),local('Liberation Sans Bold');size-adjust:95.3%;ascent-override:104.9%;descent-override:31.8%;line-gap-override:0%}@font-face{font-family:'CKB Fallback';font-weight:100 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Roboto Bold'),local('Roboto-Bold'),local('Liberation Sans Bold');size-adjust:103.8%;ascent-override:89.6%;descent-override:26%;line-gap-override:0%}
*{box-sizing:border-box}
body{margin:0;background:#101014;font-family:'Hanken Grotesk','CKH Fallback',sans-serif;color:#f7f7f4;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html{overflow-x:hidden}
summary::-webkit-details-marker{display:none}
img{display:block;max-width:100%}
a{color:#c8ff2e}

@keyframes ckscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes driftUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-1064px,0)}}
@keyframes driftDown{from{transform:translate3d(0,-1064px,0)}to{transform:translate3d(0,0,0)}}
.reel:hover .reeltrack{animation-play-state:paused}

.herocollage{position:absolute;right:-40px;top:-150px;width:54%;height:calc(100% + 340px);transform:rotate(-5deg);display:flex;gap:16px;z-index:0}
.herocol{flex:1;overflow:hidden}
.herocol-inner{display:flex;flex-direction:column;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.herotile{height:250px;overflow:hidden;flex:0 0 auto;background:#141418;box-shadow:0 14px 30px rgba(0,0,0,.4);margin-bottom:16px}
.reel-mobile{display:none}
@media(max-width:1100px){.herocollage{width:62%}}
@media(max-width:900px){.herocollage{display:none}.reel-mobile{display:block}}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,28px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.4vw,30px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(26px,3vw,44px);align-items:center;justify-items:center;min-height:42px}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,64px);align-items:center}
.navlinks{display:flex;gap:32px}
.menu-btn{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #2a2a2e;background:transparent;color:#f7f7f4;font-size:18px;cursor:pointer}
@media(max-width:900px){.g3{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.navlinks{display:none}.menu-btn{display:flex}}
@media(max-width:600px){.g2{grid-template-columns:1fr}.g4{grid-template-columns:1fr}}

/* footer: global responsive grid (replaces per-page footer grids) */
.footgrid{display:grid;grid-template-columns:minmax(220px,320px) repeat(3,auto);justify-content:space-between;column-gap:clamp(24px,3.4vw,56px);row-gap:34px;margin-bottom:40px}
@media(max-width:980px){.footgrid{grid-template-columns:1fr 1fr 1fr;justify-content:start;gap:34px 24px}.footgrid>:first-child{grid-column:1/-1}}
.fsoc{display:flex;gap:16px;margin-top:20px}
.fsoc a{color:#8a8a84;display:inline-flex;transition:color .2s ease,transform .2s ease}
.fsoc a:hover{color:#f7f7f4;transform:translateY(-2px)}
@media(max-width:620px){.footgrid{grid-template-columns:1fr 1fr}.footgrid>:first-child{grid-column:1/-1}}

/* logo wall: 5x5 desktop, 4-up tablet, 3-up mobile (drop the flagged logo below desktop to avoid an orphan) */
@media(max-width:900px){.logos{grid-template-columns:repeat(4,1fr)}.logo-hide-mobile{display:none}}
@media(max-width:600px){.logos{grid-template-columns:repeat(3,1fr);gap:32px 22px}.logos>div{width:100% !important;height:34px;transform:none !important}}

/* mobile nav: full-screen overlay */
.menu-btn{transition:transform .2s ease}
#mobileMenu{display:none}
@media(max-width:900px){
  #mobileMenu{position:fixed;inset:0;z-index:60;background:#101014;display:flex;flex-direction:column;padding:20px clamp(28px,7vw,52px) clamp(32px,6vw,48px);transform:translateY(-6%);opacity:0;pointer-events:none;transition:opacity .26s ease,transform .3s ease}
  body.menu-open{overflow:hidden}
  body.menu-open #mobileMenu{transform:none;opacity:1;pointer-events:auto}
  .mm-top{display:flex;align-items:center;justify-content:space-between;height:44px;flex:0 0 auto}
  .mm-logo img{height:34px;width:auto;display:block}
  .mm-close{width:46px;height:46px;border:1px solid #2a2a2e;background:transparent;color:#f7f7f4;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .mm-links{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1.4vw,12px)}
  .mm-links a{font-family:'Bricolage Grotesque','CKB Fallback'!important;font-size:clamp(34px,9.5vw,54px)!important;font-weight:700!important;letter-spacing:-.035em!important;line-height:1.18!important;color:#f7f7f4!important;text-decoration:none!important;padding:0!important}
  .mm-foot{flex:0 0 auto;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
  .mm-cta{font-size:17px!important;font-weight:700!important;color:#101014!important;background:#c8ff2e;padding:16px 32px;text-decoration:none!important;}
  .mm-contact{font-size:14px;color:#8a8a84}
  .mm-contact a{color:#8a8a84!important;text-decoration:none!important}
}

/* mobile safety net: stray inline multi-column grids collapse instead of squishing */
@media(max-width:900px){[style*="grid-template-columns:repeat(4"],[style*="grid-template-columns:repeat(5"]{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:600px){[style*="grid-template-columns"]:not(.logos):not(.footgrid):not([style*="grid-template-columns:auto"]){grid-template-columns:1fr !important}}
.srow{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(24px,4vw,64px);align-items:start;padding:clamp(24px,3vw,38px) 0}
@media(max-width:760px){.srow{grid-template-columns:1fr;gap:14px}}

/* work filter buttons */
.wf-btn{font-family:inherit;cursor:pointer;font-size:14px;font-weight:600;padding:10px 18px;white-space:nowrap;transition:all .15s;border:1px solid #2a2a2e;background:transparent;color:#cfcfc9}
.wf-btn.active{border-color:#c8ff2e;background:#c8ff2e;color:#101014}

/* === CK interactions === */
.navlinks a{position:relative;transition:color .2s}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;background:#c8ff2e;transition:width .28s ease}
.navlinks a:hover::after{width:100%}
a[style*="background:#c8ff2e"],a[style*="background: #c8ff2e"],a[style*="background:#f7f7f4"],a[style*="background: #f7f7f4"]{white-space:nowrap;transition:filter .22s ease}
a[style*="background:#c8ff2e"]:hover,a[style*="background: #c8ff2e"]:hover,a[style*="background:#f7f7f4"]:hover,a[style*="background: #f7f7f4"]:hover{filter:brightness(1.06)}
.logos>div{transition:opacity .35s ease}
.logos>div:hover{opacity:1 !important}
.g3 > a, .g3 > div{transition:transform .25s ease}
.g3 > a:hover, .g3 > div:hover{transform:translateY(-3px)}
.zoom{transition:transform .6s ease}
.g3 > a:hover .zoom{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){a:hover,.g3 > a:hover,.g3 > div:hover{transform:none !important;box-shadow:none !important}}

/* homepage 'What we do' pillar grid */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px)}
.pillar{background:rgba(255,255,255,.55);border:1px solid #d3d5d0;padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column}
.pillar-ic{width:46px;height:46px;background:#c8ff2e;color:#101014;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.pillar-desc{margin:0 0 20px;font-size:15px;line-height:1.55;color:#55555a}
.pillar-links{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.pillar-links a{font-size:15px;font-weight:600;color:#4a4a50;text-decoration:none;transition:color .18s ease,transform .18s ease}
.pillar-links a:hover{transform:translateX(4px)}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}

.mk{background:#c8ff2e;color:#101014;display:inline-block;line-height:.86;padding:.1em .13em .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* nav: logo left, links centred in the page, CTA right */
div[style*="position:sticky"]>.wrap{display:grid !important;grid-template-columns:1fr auto 1fr;align-items:center}
div[style*="position:sticky"]>.wrap>.navlinks{justify-content:center}
div[style*="position:sticky"]>.wrap>*:last-child{justify-self:end}
@media(max-width:900px){div[style*="position:sticky"]>.wrap{display:flex !important;justify-content:space-between}}

/* mobile footer: no lone column, finger-sized links */
@media(max-width:620px){.footgrid>:last-child{grid-column:1/-1}.footgrid>:last-child>div:last-child{flex-direction:row !important;flex-wrap:wrap;column-gap:24px !important;row-gap:0 !important}.footgrid a{padding:9px 0}.footgrid div[style*="flex-direction:column"]{gap:0 !important}.fsoc{gap:20px}.fsoc a{padding:10px;margin:-10px}}
/* big display quotes and lead lines: never strand a word */
p[style*="Bricolage"]{text-wrap:balance}
/* 4/5-up inline grids fold to 2-up on tablet and phone: an odd last item spans the row instead of sitting alone */
@media(max-width:900px){[style*="grid-template-columns:repeat(4"]>:last-child:nth-child(odd),[style*="grid-template-columns:repeat(5"]>:last-child:nth-child(odd){grid-column:1/-1}}
/* Tablets & phones: every text + image pair stacks the same way, text first, image second */
@media(max-width:900px){:is(.split,.dirsplit,.storysplit,.hero2,.fullscale,.pairrow):not(.pcard > *):has(> :nth-child(2):last-child) > :not(:has(h1,h2,h3,h4,h5,p,blockquote,ul,ol,form,details,dl)){order:2 !important}}
@media(max-width:980px){:is(.k6hero,.k6me):has(> :nth-child(2):last-child) > :not(:has(h1,h2,h3,h4,h5,p,blockquote,ul,ol,form,details,dl)){order:2 !important}}
/* larger tap areas without changing layout */
details > summary{position:relative}
details > summary::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
button[aria-label="Show testimonial"]{position:relative}
button[aria-label="Show testimonial"]::before{content:"";position:absolute;left:-8px;right:-8px;top:-8px;bottom:-8px}
/* visible keyboard focus on light and dark backgrounds */
:focus-visible{outline:2px solid #101014;outline-offset:2px;box-shadow:0 0 0 4px #c8ff2e}
.skip-link{position:absolute;left:12px;top:-80px;z-index:1000;background:#c8ff2e;color:#101014;padding:10px 16px;font-weight:700;font-size:15px;text-decoration:none}
.skip-link:focus{top:12px}

/* button hovers: one treatment sitewide (lime/light brighten, dark lifts, outline fills) */
.logos>div{transition:opacity .35s ease}
button[style*="background:#c8ff2e"]{transition:filter .22s ease}
button[style*="background:#c8ff2e"]:hover{filter:brightness(1.06)}
a[style*="display:inline-block"][style*="background:#14171c"],a[style*="display:inline-block"][style*="background:#101014"]{transition:filter .22s ease}
a[style*="display:inline-block"][style*="background:#14171c"]:hover,a[style*="display:inline-block"][style*="background:#101014"]:hover{filter:brightness(1.6)}
a[style*="background:transparent"][style*="border:1px solid"]{transition:background-color .22s ease,border-color .22s ease}
a[style*="background:transparent"][style*="border:1px solid"]:hover{background-color:rgba(247,247,244,.07)!important;border-color:#55555c!important}
/* phones: footer links get a comfortable tap height */
@media (max-width:700px){footer a{display:inline-block;padding:5px 0}}
a[href^="tel:"]{white-space:nowrap}
/* photos that sit under their copy on phones (desktop keeps the original spot) */
.mb-fig{display:none}@media(max-width:900px){.dk-fig{display:none!important}.mb-fig{display:block}}
/* phones: case study end buttons go full width so labels never break */
@media(max-width:600px){.cs-ctas>a{flex:1 1 100%;text-align:center;box-sizing:border-box}}
/* phones: six-logo strips become an even 3 x 2 grid */
@media(max-width:600px){.logos[style*="grid-template-columns:repeat(6"]{grid-template-columns:repeat(3,1fr)!important;row-gap:24px!important}}