/* DKC website styles, converted from the Cowork design canvas 'DKC Website' (14 Oct 2026). */
body{margin:0}
.dk{--paper:#ffffff;--paper-alt:#f4f5f8;--line:#dfe2e8;--ink:#1b2433;--muted:#5a6475;--night:#11161e;--night-2:#18202b;--night-line:#2c3644;--snow:#eef1f5;--snow-muted:#a3adbb;
--lagoon:#0e7c7b;--lagoon-ink:#0a5f5e;--lagoon-soft:#dff2f1;--lagoon-n:#3cc4c0;
--tangerine:#f2672e;--tangerine-ink:#b2410f;--tangerine-soft:#fde9df;--tangerine-n:#ff8a57;
--sunflower:#f7b928;--sunflower-ink:#7a5300;--sunflower-soft:#fdf1d0;--sunflower-n:#ffc94d;
--berry:#c2316a;--berry-ink:#9a2554;--berry-soft:#fbe4ed;--berry-n:#ff6f9f;
--display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;--sans:Figtree,"Segoe UI",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
font-family:var(--sans);color:var(--ink);background:var(--paper);overflow-x:hidden;overflow-x:clip}
.dk *{box-sizing:border-box}
.dk a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding-inline:max(20px,4vw)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:12px;font:600 16px/20px var(--sans);text-decoration:none;border:2px solid transparent;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.btn:hover{transform:translateY(-3px)}
.btn:focus-visible{outline:2px solid var(--lagoon-n);outline-offset:3px}
.dk .btn--hot{background:var(--tangerine);color:var(--ink)}
.btn--hot:hover{box-shadow:0 10px 0 -2px var(--sunflower)}
.dk .btn--ghost{border-color:var(--snow);color:var(--snow)}
.dk .btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{box-shadow:0 10px 0 -2px var(--berry)}
.eyebrow{font:500 13px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--night);box-shadow:0 1px 0 var(--night-line)}
.nav__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.nav__links{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.nav__links a{color:var(--snow);text-decoration:none;font:600 15px/20px var(--sans);padding:12px 14px;border-radius:999px;transition:background .2s,color .2s}
.nav__links a:hover{background:var(--night-2);color:var(--sunflower-n)}
.nav__links .btn{margin-left:8px;padding:12px 18px;border-radius:12px}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--night);color:var(--snow);padding-block:56px 96px}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.hero h1{margin:20px 0 0;font:800 clamp(48px,6.6vw,96px)/.98 var(--display);letter-spacing:-.035em;text-wrap:balance}
.rot{display:inline-block;height:1.02em;overflow:hidden;vertical-align:bottom}
.rot__in{display:flex;flex-direction:column;animation:rot 10s cubic-bezier(.7,0,.2,1) infinite}
.rot__in span{display:block;height:1.02em;line-height:1.02em}
@keyframes rot{0%,18%{transform:translateY(0)}25%,43%{transform:translateY(-1.02em)}50%,68%{transform:translateY(-2.04em)}75%,93%{transform:translateY(-3.06em)}100%{transform:translateY(-4.08em)}}
.hero__lede{margin:28px 0 0;max-width:34ch;font:500 21px/32px var(--sans);color:var(--snow-muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero__art{position:relative}
.hero__logo{display:block;width:100%;max-width:600px;height:auto;overflow:visible}
.pc{transform-box:fill-box;transform-origin:center}
.pc-stem{fill:var(--sunflower-n);animation:stemIn .9s cubic-bezier(.2,.8,.2,1) .15s both,bob 5s ease-in-out 1.6s infinite}
.pc-d{fill:var(--lagoon-n);animation:dIn .9s cubic-bezier(.2,.8,.2,1) .3s both,bob 6s ease-in-out 2s infinite}
.pc-k{fill:var(--tangerine-n);animation:kIn .9s cubic-bezier(.2,.8,.2,1) .45s both,bob 5.5s ease-in-out 1.8s infinite}
.pc-c{fill:var(--berry-n);animation:cIn 1.1s cubic-bezier(.2,.8,.2,1) .6s both,bob 6.5s ease-in-out 2.2s infinite}
@keyframes stemIn{from{transform:translateY(160%)}}
@keyframes dIn{from{transform:translateX(-140%) rotate(-25deg)}}
@keyframes kIn{from{transform:translateY(-160%) rotate(12deg)}}
@keyframes cIn{from{transform:translateX(160%) rotate(220deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.rec{position:absolute;left:0;bottom:-44px;display:flex;align-items:center;gap:10px;font:500 13px/16px var(--mono);color:var(--snow-muted);letter-spacing:.06em}
.rec__dot{width:10px;height:10px;border-radius:50%;background:var(--berry-n);animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.drift{position:absolute;z-index:1;pointer-events:none}
.drift--ring{width:420px;height:420px;border-radius:50%;border:56px solid rgba(255,111,159,.10);right:-140px;top:-160px;animation:spin 40s linear infinite}
.drift--half{width:300px;height:150px;border-radius:0 0 150px 150px;background:rgba(60,196,192,.09);left:-80px;bottom:-40px;animation:sway 12s ease-in-out infinite}
.drift--stem{width:44px;height:220px;background:rgba(255,201,77,.12);left:46%;top:-60px;animation:fall 9s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sway{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(60px) rotate(8deg)}}
@keyframes fall{0%,100%{transform:translateY(0)}50%{transform:translateY(40px)}}

/* marquee */
.marq{overflow:hidden;background:var(--tangerine);color:var(--ink);transform:rotate(-1.5deg);margin:-22px -20px 0;position:relative;z-index:4;border-block:3px solid var(--ink)}
.marq__track{display:flex;width:max-content;animation:slide 32s linear infinite}
.marq__track span{display:inline-flex;align-items:center;gap:22px;padding:18px 22px 18px 0;font:800 28px/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.marq__track i{display:inline-block;width:14px;height:14px;background:var(--ink);border-radius:50%}
.marq__track i.sq{border-radius:3px;transform:rotate(45deg)}
@keyframes slide{to{transform:translateX(-50%)}}
.marq--rev .marq__track{animation-direction:reverse;animation-duration:40s}

/* about */
.about{padding-block:128px 112px}
.about__top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:64px;align-items:end}
.about h2{margin:16px 0 0;font:800 clamp(34px,4.2vw,58px)/1.04 var(--display);letter-spacing:-.025em;text-wrap:balance}
.hl{position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;left:-4px;right:-4px;bottom:.06em;height:.32em;z-index:-1;border-radius:4px;animation:swipe 1.2s cubic-bezier(.2,.8,.2,1) .4s both}
.hl--t::after{background:var(--tangerine-soft)}.hl--l::after{background:var(--lagoon-soft)}.hl--b::after{background:var(--berry-soft)}
@keyframes swipe{from{transform:scaleX(0);transform-origin:left}}
.about__copy{font:400 18px/30px var(--sans);color:var(--muted);margin:0}
.crafts{margin-top:72px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.craft{position:relative;padding:28px 24px 24px;border-radius:20px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.craft:hover{transform:translateY(-8px) rotate(-1deg)}
.craft h3{margin:0;font:800 30px/1 var(--display);letter-spacing:-.02em}
.craft p{margin:0;font:500 15px/22px var(--sans)}
.craft__shape{position:absolute;top:22px;right:22px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.craft:hover .craft__shape{transform:rotate(-20deg) scale(1.15)}
.craft--v{background:var(--lagoon);color:#fff}.craft--l{background:var(--tangerine);color:var(--ink)}.craft--a{background:var(--berry);color:#fff}.craft--r{background:var(--sunflower);color:var(--ink)}
.shape-d{width:64px;height:64px;border-radius:0 32px 32px 0;background:rgba(255,255,255,.9)}
.shape-k{width:46px;height:64px;background:var(--ink);clip-path:polygon(30% 0,72% 0,40% 50%,72% 100%,30% 100%,0 50%)}
.shape-c{width:64px;height:64px;border-radius:50%;border:16px solid rgba(255,255,255,.9);border-right-color:transparent}
.shape-s{width:20px;height:64px;background:var(--ink)}

.how{margin-top:96px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:2px solid var(--ink);padding-top:32px}
.how__n{font:500 13px/16px var(--mono);color:var(--muted)}
.how h3{margin:10px 0 8px;font:700 26px/1.1 var(--display);letter-spacing:-.01em}
.how p{margin:0;font:400 16px/26px var(--sans);color:var(--muted)}

.langs{margin-top:88px;background:var(--paper-alt);border-radius:24px;padding:36px 0 28px;overflow:hidden}
.langs__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-inline:36px;margin-bottom:22px;align-items:baseline}
.langs__head p{margin:0;font:600 18px/26px var(--sans)}
.langs .marq__track span{font:800 44px/1 var(--display);padding:6px 28px 6px 0;color:var(--ink)}
.langs .marq__track span:nth-child(4n+1){color:var(--lagoon)}.langs .marq__track span:nth-child(4n+2){color:var(--tangerine-ink)}.langs .marq__track span:nth-child(4n+3){color:var(--berry)}

/* services */
.svc-sec{background:var(--paper-alt);padding-block:112px;position:relative;overflow:hidden}
.svc-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:28px}
.svc-head h2{margin:14px 0 0;font:800 clamp(40px,5vw,72px)/1 var(--display);letter-spacing:-.03em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:10px 18px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);font:600 15px/20px var(--sans);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.chip:hover{transform:translateY(-2px)}
.chip--on{background:var(--ink);color:#fff}
.svc-grid{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.svc{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:30px 28px 28px;display:flex;flex-direction:column;gap:14px;overflow:hidden;animation:pop .5s cubic-bezier(.2,.8,.2,1) both;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.svc:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(27,36,51,.35)}
@keyframes pop{from{transform:translateY(24px) scale(.97)}}
.svc:nth-child(2){animation-delay:.07s}.svc:nth-child(3){animation-delay:.14s}.svc:nth-child(4){animation-delay:.21s}.svc:nth-child(5){animation-delay:.28s}.svc:nth-child(6){animation-delay:.35s}.svc:nth-child(7){animation-delay:.42s}
.svc__tag{align-self:flex-start;font:700 12px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:6px}
.svc h3{margin:6px 0 0;padding-right:56px;font:800 28px/1.05 var(--display);letter-spacing:-.02em}
.svc p{margin:0;font:400 16px/26px var(--sans);color:var(--muted)}
.svc__list{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.svc__list span{font:600 13px/18px var(--sans);padding:6px 10px;border-radius:999px;background:var(--paper-alt);color:var(--ink)}
.svc__corner{position:absolute;top:0;right:0;width:64px;height:64px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.svc:hover .svc__corner{transform:rotate(90deg)}
.svc--video .svc__tag{background:var(--lagoon-soft);color:var(--lagoon-ink)}.svc--video .svc__corner{background:var(--lagoon);border-radius:0 0 0 64px}
.svc--learning .svc__tag{background:var(--tangerine-soft);color:var(--tangerine-ink)}.svc--learning .svc__corner{background:var(--tangerine);clip-path:polygon(40% 10%,78% 10%,52% 50%,78% 90%,40% 90%,14% 50%)}
.svc--animation .svc__tag{background:var(--berry-soft);color:var(--berry-ink)}.svc--animation .svc__corner{border:16px solid var(--berry);border-radius:50%;width:88px;height:88px;top:-28px;right:-28px}
.svc--reach .svc__tag{background:var(--sunflower-soft);color:var(--sunflower-ink)}.svc--reach .svc__corner{background:var(--sunflower);width:18px;height:72px;right:28px}

/* clients */
.clients{background:var(--night);color:var(--snow);padding-block:112px 0;overflow:hidden}
.clients h2{margin:14px 0 0;font:800 clamp(36px,4.4vw,60px)/1.04 var(--display);letter-spacing:-.025em;max-width:16ch;text-wrap:balance}
.clients__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px}
.clients__row p{margin:0;max-width:38ch;font:400 18px/28px var(--sans);color:var(--snow-muted)}
.logos{margin-top:64px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--night-line)}
.logo-cell{position:relative;min-height:180px;display:flex;align-items:center;justify-content:center;padding:24px;border-right:1px solid var(--night-line);text-align:center;font:800 30px/1.05 var(--display);letter-spacing:-.02em;color:var(--snow);overflow:hidden;transition:color .3s}
.logo-cell:last-child{border-right:0}
.logo-cell small{display:block;font:600 14px/18px var(--sans);letter-spacing:0;color:var(--snow-muted);margin-top:6px}
.logo-cell::before{content:"";position:absolute;inset:auto 0 0 0;height:0;transition:height .45s cubic-bezier(.2,.8,.2,1);z-index:-1}
.logo-cell{z-index:0}
.logo-cell:hover{color:var(--night)}
.logo-cell:hover small{color:var(--night)}
.client-logo{transition:filter .3s}
.logo-cell:hover .client-logo{filter:brightness(0)}
.logos .logo-cell--colour::before{background:#ffffff}
.logo-cell:hover::before{height:100%}
.logo-cell:nth-child(1)::before{background:var(--lagoon-n)}.logo-cell:nth-child(2)::before{background:var(--tangerine-n)}.logo-cell:nth-child(3)::before{background:var(--berry-n)}.logo-cell:nth-child(4)::before{background:var(--sunflower-n)}.logo-cell:nth-child(5)::before{background:var(--lagoon-n)}
.clients .marq{transform:none;margin:0;background:transparent;border-block:1px solid var(--night-line)}
.clients .marq__track span{color:var(--night-line);font-size:120px;padding-block:20px;-webkit-text-stroke:0}
.clients .marq__track span b{color:var(--snow);font-weight:800;opacity:.14}

/* cta */
.cta{position:relative;overflow:hidden;background:var(--sunflower);color:var(--ink);padding-block:112px}
.cta h2{position:relative;z-index:2;margin:0;font:800 clamp(44px,6vw,92px)/.98 var(--display);letter-spacing:-.035em;max-width:13ch}
.cta p{position:relative;z-index:2;margin:24px 0 36px;max-width:40ch;font:500 20px/30px var(--sans)}
.cta__ring{position:absolute;right:-60px;top:50%;width:440px;height:440px;margin-top:-220px;border-radius:50%;border:90px solid var(--berry);border-right-color:transparent;animation:spin 14s linear infinite}
.cta__k{position:absolute;right:300px;bottom:-30px;width:120px;height:170px;background:var(--tangerine);clip-path:polygon(30% 0,72% 0,40% 50%,72% 100%,30% 100%,0 50%);animation:fall 5s ease-in-out infinite}

/* footer */
.foot{background:var(--night);color:var(--snow-muted);padding-block:64px 40px}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.foot h4{margin:0 0 14px;font:500 12px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--snow)}
.foot p,.foot a{font:400 15px/26px var(--sans);color:var(--snow-muted);text-decoration:none;margin:0;display:block}
.foot a:hover{color:var(--sunflower-n)}
.foot__social{display:inline-flex;gap:16px;align-items:center}.foot__social a{display:inline-flex;color:inherit;opacity:.8;transition:opacity .15s,color .15s}.foot__social a:hover{opacity:1;color:#fff}.foot__social svg{width:20px;height:20px;display:block}
.foot__base{margin-top:56px;padding-top:24px;border-top:1px solid var(--night-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font:500 13px/18px var(--mono)}

.still .rot__in,.still .pc,.still .drift,.still .marq__track,.still .rec__dot,.still .cta__ring,.still .cta__k,.still .svc,.still .hl::after{animation:none!important}
@media (prefers-reduced-motion:reduce){.dk *,.dk *::before,.dk *::after{animation:none!important;transition:none!important}}
@media (max-width:900px){
.hero__grid,.about__top{grid-template-columns:minmax(0,1fr)}
.hero__art{order:-1;max-width:420px}
.crafts{grid-template-columns:repeat(2,minmax(0,1fr))}
.how{grid-template-columns:minmax(0,1fr);gap:28px}
.logos{grid-template-columns:repeat(2,minmax(0,1fr))}
.logo-cell{border-bottom:1px solid var(--night-line);min-height:130px;font-size:24px}
.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cta__ring{width:260px;height:260px;margin-top:-130px;border-width:52px;right:-120px}
.cta__k{display:none}
}
@media (max-width:560px){
.crafts{grid-template-columns:minmax(0,1fr)}
.svc-grid{grid-template-columns:minmax(0,1fr)}
.nav__links a:not(.btn){padding:10px 8px;font-size:14px}
}
.dk [hidden]{display:none!important}

html{scroll-padding-top:96px;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Navigation: logo, three links, one "Start a project" button. On phones the links drop to their own row under the logo and button. */
.nav__in{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding-block:16px}
.nav__logo{display:flex;align-items:center;min-height:44px;margin-right:auto}
.nav__logo img{height:34px;width:auto;display:block}
.nav__links{display:flex;flex-wrap:nowrap;align-items:center;gap:4px}
.nav .nav__cta{margin-left:12px;min-height:46px;padding:11px 18px;border-radius:12px;font-size:15px;white-space:nowrap}
@media (max-width:720px){
  .nav__in{flex-wrap:wrap;row-gap:6px;padding-block:12px 6px}
  .nav__logo img{height:28px}
  .nav .nav__cta{order:2;margin-left:0;min-height:42px;padding:9px 14px;font-size:14px}
  .nav__links{order:3;width:100%;justify-content:space-between;gap:0;border-top:1px solid var(--night-line);padding-top:4px}
  .nav__links a{flex:1;text-align:center;padding:10px 6px;font-size:14px}
  html{scroll-padding-top:120px}
}
@media (max-width:900px){.rec{position:static;margin-top:14px}.hero__grid{gap:28px}}

/* SEO: the rotating words are drawn from data-w so the real heading reads 'We make content people watch.' */
.rot__in span[data-w]::before{content:attr(data-w)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}