/* 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-alt);overflow-x:hidden;overflow-x:clip}
.dk *{box-sizing:border-box}
.wrap{max-width:1280px;margin:0 auto;padding-inline:max(20px,4vw)}
.eyebrow{font:500 13px/16px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:12px;font:600 16px/20px var(--sans);text-decoration:none;border:2px solid transparent;cursor:pointer;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);outline-offset:3px}
.btn--hot{background:var(--tangerine);color:var(--ink)}
.btn--hot:hover{box-shadow:0 10px 0 -2px var(--sunflower)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{box-shadow:0 10px 0 -2px var(--berry)}

.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 a[aria-current]{color:var(--sunflower-n)}

.head{position:relative;overflow:hidden;background:var(--night);color:var(--snow);padding-block:64px 160px}
.head h1{position:relative;z-index:2;margin:18px 0 0;font:800 clamp(52px,8vw,120px)/.95 var(--display);letter-spacing:-.04em;max-width:12ch}
.head h1 em{font-style:normal;color:var(--tangerine-n);display:inline-block;animation:wiggle 3s ease-in-out infinite;transform-origin:50% 80%}
@keyframes wiggle{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-6deg)}84%{transform:rotate(5deg)}92%{transform:rotate(-2deg)}}
.head p{position:relative;z-index:2;margin:24px 0 0;max-width:40ch;font:500 20px/30px var(--sans);color:var(--snow-muted)}
.toy{position:absolute;z-index:1}
.toy--d{right:12%;top:56px;width:150px;height:150px;border-radius:0 75px 75px 0;background:var(--lagoon-n);animation:bob 5s ease-in-out infinite}
.toy--s{right:calc(12% + 168px);top:96px;width:44px;height:110px;background:var(--sunflower-n);animation:bob 4s ease-in-out .5s infinite}
.toy--k{right:4%;top:230px;width:100px;height:140px;background:var(--tangerine-n);clip-path:polygon(30% 0,72% 0,40% 50%,72% 100%,30% 100%,0 50%);animation:bob 6s ease-in-out 1s infinite}
.toy--c{right:22%;top:250px;width:120px;height:120px;border-radius:50%;border:30px solid var(--berry-n);border-right-color:transparent;animation:spin 9s linear infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes spin{to{transform:rotate(360deg)}}

.body{position:relative;z-index:3;margin-top:-104px;padding-bottom:112px}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px;align-items:start}
.side{display:flex;flex-direction:column;gap:16px}
.info{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:28px}
.info h2{margin:0 0 18px;font:800 26px/1.1 var(--display);letter-spacing:-.015em}
.row{display:flex;gap:14px;align-items:flex-start;padding-block:12px;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0;padding-top:0}
.row svg{flex:none;margin-top:2px}
.row b{display:block;font:600 13px/18px var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.row span{font:500 17px/26px var(--sans)}
.steps{background:var(--lagoon);color:#fff;border-radius:20px;padding:28px}
.steps h2{margin:0 0 18px;font:800 26px/1.1 var(--display);letter-spacing:-.015em}
.steps ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.steps li{display:flex;gap:14px;font:500 16px/24px var(--sans)}
.steps li i{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--lagoon-ink);display:grid;place-items:center;font:600 13px/1 var(--mono);font-style:normal}

.card{background:var(--paper);border-radius:24px;padding:40px;box-shadow:0 30px 60px -30px rgba(17,22,30,.35);position:relative;overflow:hidden}
.card h2{margin:0;font:800 34px/1.05 var(--display);letter-spacing:-.02em}
#form-wrap > p{margin:10px 0 28px;color:var(--muted);font:400 16px/26px var(--sans)}
form{display:flex;flex-direction:column;gap:22px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.legend{font:600 14px/20px var(--sans);color:var(--ink)}
.field input,.field textarea,.field select{font:400 16px/24px var(--sans);color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:12px;padding:12px 14px;min-height:50px;transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--lagoon);box-shadow:0 0 0 4px var(--lagoon-soft)}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{min-height:44px;padding:10px 16px;border-radius:999px;border:2px solid var(--line);background:var(--paper);color:var(--ink);font:600 14px/20px var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .2s,background .2s,border-color .2s}
.pill:hover{transform:translateY(-2px);border-color:var(--ink)}
.pill i{width:10px;height:10px;border-radius:50%;display:inline-block}
.pill--video i{background:var(--lagoon)}.pill--learning i{background:var(--tangerine)}.pill--animation i{background:var(--berry)}.pill--reach i{background:var(--sunflower)}
.pill--on{background:var(--ink);border-color:var(--ink);color:#fff}
.pill--video.pill--on{background:var(--lagoon);border-color:var(--lagoon)}
.pill--learning.pill--on{background:var(--tangerine);border-color:var(--tangerine);color:var(--ink)}
.pill--animation.pill--on{background:var(--berry);border-color:var(--berry)}
.pill--reach.pill--on{background:var(--sunflower);border-color:var(--sunflower);color:var(--ink)}
.pill--on i{background:currentColor}
.form-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.form-foot small{color:var(--muted);font:400 14px/20px var(--sans);max-width:36ch}

.done{text-align:center;padding:40px 8px 24px;display:flex;flex-direction:column;align-items:center;gap:16px}
.done__pcs{display:flex;align-items:flex-end;gap:10px;height:120px}
.done__pcs span{display:block}
.p1{width:28px;height:84px;background:var(--sunflower);animation:in1 .7s cubic-bezier(.2,.8,.2,1) both}
.p2{width:60px;height:110px;border-radius:0 60px 60px 0;background:var(--lagoon);animation:in2 .7s cubic-bezier(.2,.8,.2,1) .12s both}
.p3{width:64px;height:110px;background:var(--tangerine);clip-path:polygon(30% 0,72% 0,40% 50%,72% 100%,30% 100%,0 50%);animation:in3 .7s cubic-bezier(.2,.8,.2,1) .24s both}
.p4{width:110px;height:110px;border-radius:50%;border:26px solid var(--berry);border-right-color:transparent;animation:in4 .9s cubic-bezier(.2,.8,.2,1) .36s both}
@keyframes in1{from{transform:translateY(140px)}}@keyframes in2{from{transform:translateX(-160px) rotate(-30deg)}}@keyframes in3{from{transform:translateY(-160px)}}@keyframes in4{from{transform:translateX(160px) rotate(240deg)}}
.done h2{font-size:44px}
.done p{margin:0;max-width:40ch;color:var(--muted);font:400 17px/28px var(--sans)}

@media (prefers-reduced-motion:reduce){.dk *,.dk *::before,.dk *::after{animation:none!important;transition:none!important}}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr)}.side{order:2}.toy{opacity:.35}.card{padding:28px 22px}}
@media (max-width:560px){.two{grid-template-columns:minmax(0,1fr)}}
.dk [hidden]{display:none!important}
.form-error{margin:0;color:#b42318;font:600 15px/22px var(--sans)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

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}
}