*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:#08080c}::selection{background:#2b5cff;color:#fff}@keyframes kmg-marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes kmg-marquee-rev{0%{transform:translate(-50%)}to{transform:translate(0)}}@keyframes kmg-glow{0%,to{opacity:.55}50%{opacity:1}}@keyframes kmg-float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes kmg-spin{to{transform:rotate(360deg)}}@keyframes kmg-scroll-up{0%{transform:translateY(0)}to{transform:translateY(-50%)}}@keyframes kmg-scroll-down{0%{transform:translateY(-50%)}to{transform:translateY(0)}}.kmg-shot-up{animation:kmg-scroll-up 34s linear infinite;will-change:transform}.kmg-shot-down{animation:kmg-scroll-down 34s linear infinite;will-change:transform}.kmg-hero-bleedrow{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:stretch}.kmg-hero-bleedtext{flex:0 1 auto;min-width:0;display:flex;align-items:center;box-sizing:border-box;padding:72px 32px 56px max(48px,calc((100% - 1240px)/2 + 48px))}.kmg-hero-bleedvis{position:relative;flex:1 1 0;min-width:0;overflow:hidden}.kmg-carousel{position:absolute;top:0;right:0;bottom:0;left:0;overflow:visible}.kmg-carousel-rot{position:absolute;top:-12%;bottom:-12%;left:184px;width:max-content;display:flex;gap:26px;align-items:flex-start;transform:rotate(-15deg) scale(1.08);transform-origin:center center}@media (prefers-reduced-motion: reduce){.kmg-shot-up,.kmg-shot-down{animation:none}}[data-fill]{transform:translate(-101%) skew(-14deg);transition:transform .5s cubic-bezier(.45,.05,.3,1);will-change:transform}button:hover [data-fill],.kmg-btn:hover [data-fill]{transform:translate(0) skew(-14deg)}@keyframes kmg-titleWipe{0%{background-position:0% 0}28%{background-position:0% 0}50%{background-position:-66% 0}78%{background-position:-66% 0}to{background-position:-133.33% 0}}@keyframes kmg-twinkle{0%,to{opacity:.35}50%{opacity:.95}}@keyframes kmg-drift{0%{background-position:0 0,0 0,0 0}to{background-position:600px 300px,-500px 400px,300px -200px}}@keyframes kmg-shoot{0%{transform:translate(0) rotate(20deg);opacity:0}8%{opacity:1}22%{opacity:0}to{transform:translate(520px,190px) rotate(20deg);opacity:0}}.kmg-card{--accent: #2b5cff}.kmg-card:hover{--accent: #ffd24a}.kmg-hoverable{transition:transform .25s,border-color .25s,box-shadow .25s}.kmg-hoverable:hover{transform:translateY(-5px);border-color:#ffd24a8c!important}.kmg-work-card{transition:transform .3s,border-color .3s,box-shadow .3s;cursor:pointer}.kmg-work-card:hover{transform:translateY(-6px);border-color:#2b5cff8c!important;box-shadow:0 24px 60px #2b5cff38!important}.kmg-work-card .kmg-shot{overflow:hidden;line-height:0}.kmg-work-card .kmg-shot img,.kmg-work-card .kmg-shot video{transition:transform .5s cubic-bezier(.2,.8,.2,1);display:block;width:100%}.kmg-work-card:hover .kmg-shot img,.kmg-work-card:hover .kmg-shot video{transform:scale(1.05)}.kmg-form-err{color:#ff8a80;font-size:12.5px;line-height:1.4;margin:-2px 0 0}@keyframes kmg-page-enter{0%{opacity:0}to{opacity:1}}.kmg-page-enter{animation:kmg-page-enter .32s cubic-bezier(.22,.61,.36,1) both}@media (prefers-reduced-motion: reduce){.kmg-page-enter{animation:none}}img{max-width:100%}html{-webkit-text-size-adjust:100%}@media (max-width: 960px){.kmg-section,.kmg-section-inner,.kmg-header{padding-left:28px!important;padding-right:28px!important}.kmg-hero{padding-left:28px!important;padding-right:28px!important;padding-top:56px!important}.kmg-hero-overlay{display:block!important}.kmg-hero-grid{grid-template-columns:1fr!important;gap:40px!important}.kmg-hero-bleedrow{position:relative!important;display:block!important}.kmg-hero-bleedvis{display:none!important}.kmg-hero-bleedtext{display:block!important;padding:0 0 44px!important}.kmg-hero{min-height:0!important}.kmg-grid-4,.kmg-grid-3{grid-template-columns:repeat(2,1fr)!important}.kmg-deepdive,.kmg-deepdive-panel{grid-template-columns:1fr!important}.kmg-cta{grid-template-columns:1fr!important;padding:40px!important}.kmg-why-card{padding:38px!important}.kmg-footer-grid{grid-template-columns:repeat(2,1fr)!important}.kmg-h1{font-size:56px!important}.kmg-h2{font-size:38px!important}}@media (max-width: 860px){.kmg-nav,.kmg-nav-cta{display:none!important}.kmg-burger{display:flex!important}}@media (max-width: 640px){.kmg-nav{display:none!important}.kmg-section,.kmg-section-inner,.kmg-header{padding-left:18px!important;padding-right:18px!important}.kmg-hero{padding-left:18px!important;padding-right:18px!important;padding-top:40px!important}.kmg-grid-3,.kmg-grid-2{grid-template-columns:1fr!important}.kmg-stats{grid-template-columns:repeat(2,1fr)!important;padding:34px 24px!important;gap:24px!important}.kmg-footer{padding:36px 18px!important}.kmg-footer-grid{grid-template-columns:1fr!important;gap:28px!important}.kmg-hero-cta{flex-direction:column!important;align-items:stretch!important}.kmg-hero-cta button,.kmg-hero-cta a{width:100%!important}.kmg-h1{font-size:40px!important}.kmg-h2{font-size:30px!important}.kmg-stat-num{font-size:42px!important}.kmg-why-card{padding:26px!important}.kmg-cta{padding:28px!important}.kmg-badge-a{left:8px!important;top:-14px!important}.kmg-badge-b{right:8px!important;bottom:-14px!important}}@media (max-width: 460px){.kmg-grid-4,.kmg-form-row{grid-template-columns:1fr!important}.kmg-h1{font-size:34px!important}}

/* ---------------------------------------------------------------------------------
   Added 2026-09-12 when the site became a plain multi-page site (it was a React app).
   The React version applied these hover/active styles from JavaScript; here they are CSS.
   A primary button is the one with the yellow swipe span ([data-fill]) inside it. */
.kmg-btn:hover{transform:translateY(-3px)}
.kmg-btn:active{transform:translateY(-1px) scale(.97)}
.kmg-btn:has([data-fill]){color:#fff!important}
.kmg-btn:has([data-fill]):hover{color:#08080c!important;box-shadow:0 14px 40px rgba(255,210,74,.45)}
.kmg-btn:not(:has([data-fill])):hover{border-color:rgba(43,92,255,.6);background:rgba(43,92,255,.10)}
.kmg-btn:disabled{opacity:.7;cursor:default}
/* FAQ accordion: the answer is in the page (search engines can read every one); the
   button only shows and hides it. */
.kw-faq-a[hidden]{display:none}
[data-faq-toggle] .kw-faq-plus{transition:transform .2s}
[data-faq-toggle][aria-expanded="true"] .kw-faq-plus{transform:rotate(45deg)}
/* Portfolio cards are clickable (the lightbox in js/main.js). */
.kmg-work-card{cursor:pointer}
/* The scrollbar matches the theme — house rule for every site this agency ships. */
html{scrollbar-color:#2b5cff #0b0b12;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0b12}
::-webkit-scrollbar-thumb{background:#2b5cff;border-radius:6px;border:2px solid #0b0b12}
::-webkit-scrollbar-thumb:hover{background:#ffd24a}
/* Overview site tours: static storyboard panels, not clickable cards. */
.kw-tour-rows{counter-reset:tour-row}
.kw-tour-row{counter-increment:tour-row;counter-reset:tour-step;border:1px solid rgba(255,255,255,0.08);border-radius:20px;background:linear-gradient(165deg,#101019,#0a0a10);padding:26px}
.kw-tour-head>div:first-child::before{content:"0" counter(tour-row);font-family:Archivo,sans-serif;font-weight:900;font-size:15px;letter-spacing:0.06em;color:#2b5cff;border:1px solid rgba(43,92,255,0.35);background:rgba(43,92,255,0.10);border-radius:100px;padding:4px 10px;margin-right:12px;vertical-align:2px}
.kw-tour-head>div:last-child{border:1px solid rgba(43,92,255,0.30);background:rgba(43,92,255,0.12);border-radius:100px;padding:5px 12px}
.kw-tour-frame{counter-increment:tour-step;border:1px solid rgba(255,255,255,0.08);border-radius:14px;overflow:hidden;background:#0c0c14;cursor:default}
.kw-tour-frame>div:first-child{display:none!important}
.kw-tour-frame .kmg-shot{line-height:0;border-bottom:1px solid rgba(255,255,255,0.06)}
.kw-tour-frame .kmg-shot img{display:block;width:100%;height:auto}
.kw-tour-frame .kmg-shot>span{display:none!important}
.kw-tour-frame>div:last-child{padding:12px 14px!important}
.kw-tour-frame .kw-work-name{display:none!important}
.kw-tour-frame .kw-work-meta{font-family:"Space Grotesk",sans-serif!important;font-size:12px!important;letter-spacing:0.10em!important;text-transform:uppercase;color:#8a8c9e!important;margin-top:0!important}
.kw-tour-frame .kw-work-meta::before{content:"0" counter(tour-step) " / ";color:#8fa9ff;font-weight:700}
.kw-tour-frame:hover{transform:none;border-color:rgba(255,255,255,0.14)}
/* Storyboard panels sit level with each other (no step-down on the middle panel). */
@media (max-width:640px){.kw-tour-row{padding:18px}}
/* Home page section bands. Every named block below the hero runs the full width of the
   page on its own surface, so the change of topic is obvious while scrolling, and each
   one gets a different texture: blueprint grid, dot matrix, dark stage, ruled lines. Content stays in the same 1240px column as the rest of the page, using
   the padding formula the hero already uses, so nothing is boxed in and nothing can
   push the page wider. */
.kmg-band-grid{background-color:#08080e;border-top:1px solid rgba(143,169,255,0.14);background-image:radial-gradient(85% 340px at 14% 0,rgba(43,92,255,0.22),rgba(43,92,255,0) 72%),linear-gradient(180deg,rgba(8,8,14,0) 55%,rgba(8,8,14,0.9)),linear-gradient(rgba(143,169,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(143,169,255,0.05) 1px,transparent 1px);background-size:100% 100%,100% 100%,64px 64px,64px 64px}
.kmg-band-dots{background-color:#0f0f19;border-top:1px solid rgba(255,255,255,0.07)}
.kmg-band-stage{background-color:#060609;border-top:1px solid rgba(255,255,255,0.07);background-image:radial-gradient(95% 430px at 50% 0,rgba(43,92,255,0.13),rgba(43,92,255,0) 72%),repeating-linear-gradient(115deg,rgba(255,255,255,0.022) 0 1px,transparent 1px 24px)}
.kmg-band-plain{background-color:#08080c}
.kmg-band-rules{background-color:#0b0b13;border-top:1px solid rgba(255,255,255,0.06);background-image:linear-gradient(180deg,#0b0b13 0%,rgba(11,11,19,0) 16%),radial-gradient(60% 240px at 50% 100%,rgba(43,92,255,0.13),rgba(43,92,255,0) 72%),repeating-linear-gradient(180deg,rgba(255,255,255,0.028) 0 1px,transparent 1px 64px)}
/* Body copy is Hanken Grotesk everywhere. Some blocks were falling back to the
   browser's default serif (Times New Roman) instead of the site font, so the family
   is named on the text elements themselves. Headings, eyebrow labels and button text
   are not touched: they set their own font, inline, and that always wins. */
.kmg-page-enter :where(p,li,label,blockquote,figcaption,td,th,div,strong,em,small,b,i,u),
.kmg-footer :where(p,li,a,span,div,small){font-family:"Hanken Grotesk",sans-serif}
/* Contact form: project type options with custom radio buttons. The chosen one picks up the blue accent. */
.kmg-form-opt{display:flex;align-items:center;gap:11px;background:#0b0b12;border:1px solid rgba(255,255,255,0.12);border-radius:11px;padding:13px 15px;color:#f2f3f7;font-size:15px;line-height:1.4;cursor:pointer;transition:border-color .2s,background .2s}
.kmg-form-opt:hover{border-color:rgba(43,92,255,0.5)}
.kmg-form-opt:has(input:checked){border-color:rgba(43,92,255,0.65);background:rgba(43,92,255,0.10)}
.kmg-form-opt input[type="radio"]{-webkit-appearance:none;appearance:none;width:20px;height:20px;flex:none;margin:0;border-radius:50%;border:1.5px solid rgba(255,255,255,0.22);background-color:rgba(255,255,255,0.03);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s}
.kmg-form-opt:hover input[type="radio"]{border-color:rgba(43,92,255,0.6)}
.kmg-form-opt input[type="radio"]:checked{border-color:#2b5cff;background-color:#2b5cff;background-image:radial-gradient(circle,#fff 3.5px,transparent 4px);box-shadow:0 0 0 3px rgba(43,92,255,0.18),0 0 14px rgba(43,92,255,0.55)}
.kmg-form-opt input[type="radio"]:focus-visible{outline:2px solid rgba(143,169,255,0.8);outline-offset:2px}

/* /start (the brief after checkout): checkboxes in the same style as the radio options, a
   themed file picker, and the two confirmation rows aligned to the top of their text. */
.kmg-form-opt.kw-ack{align-items:flex-start}
.kmg-form-opt input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:20px;height:20px;flex:none;margin:2px 0 0;border-radius:6px;border:1.5px solid rgba(255,255,255,0.22);background-color:rgba(255,255,255,0.03);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s}
.kmg-form-opt:hover input[type="checkbox"]{border-color:rgba(43,92,255,0.6)}
.kmg-form-opt input[type="checkbox"]:checked{border-color:#2b5cff;background-color:#2b5cff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");background-size:14px;background-position:center;background-repeat:no-repeat;box-shadow:0 0 0 3px rgba(43,92,255,0.18),0 0 14px rgba(43,92,255,0.55)}
.kmg-form-opt input[type="checkbox"]:focus-visible{outline:2px solid rgba(143,169,255,0.8);outline-offset:2px}
.kw-file::file-selector-button{font-family:"Space Grotesk",sans-serif;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#f2f3f7;background:rgba(43,92,255,0.18);border:1px solid rgba(43,92,255,0.5);border-radius:100px;padding:8px 14px;margin-right:12px;cursor:pointer}
.kw-file::file-selector-button:hover{background:rgba(43,92,255,0.32)}

/* Pricing, three plans (2026-09-27, owner). Side by side from 1081px wide, one column below
   that. On a wide screen each card's rows (label, name, price, text, list, examples, button)
   line up with the other cards', so the long third name can take two lines and the prices,
   lists and buttons still sit level. A browser without subgrid shows the cards the way they
   were before, buttons at the bottom. The example-site links are the small blue pills. */
.kw-plan-ex a:hover{background:rgba(43,92,255,0.22)!important;border-color:rgba(43,92,255,0.6)!important;color:#f2f3f7!important}

.kw-plan-ex a:focus-visible{outline:2px solid rgba(143,169,255,0.8);outline-offset:2px}

@media (max-width:1080px){.kw-plans{grid-template-columns:minmax(0,1fr)!important;max-width:560px!important}
}

@supports (grid-template-rows:subgrid){@media (min-width:1081px){.kw-plans{row-gap:0!important}
.kw-plan{display:grid!important;grid-template-rows:subgrid;grid-row:span 7}
.kw-plan-name{align-self:end}
.kw-plan>.kmg-btn{grid-row:-2/-1}
}
}

/* The Premium Website + Local SEO card stands out (owner, 2026-09-27: "a pretty animation for it
   since it's supposed to stand out"): a light travels slowly around its border with a soft glow
   that follows it and breathes. The light is a conic gradient masked down to a 2px ring on an empty
   decorative span (.kw-plan-glow) inside the card; the glow is a drop-shadow on that span, so it
   hugs the moving light and fades naturally. It takes the card's --accent, so it turns gold with the
   border on hover. The span is absolutely positioned, so it stays out of the cards' shared row grid
   and covers no text. Visitors who ask for reduced motion get a still card. */
@property --kw-ring{syntax:"<angle>";inherits:false;initial-value:0deg}
.kw-plan-featured{position:relative}
.kw-plan-glow{position:absolute;inset:-1px;border-radius:20px;pointer-events:none;filter:drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 14px rgba(43,92,255,.6));animation:kw-breathe 3s ease-in-out infinite alternate}
.kw-plan-glow::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;background:conic-gradient(from var(--kw-ring),transparent 0deg 170deg,rgba(143,169,255,.22) 230deg,var(--accent) 305deg,#fff 340deg,var(--accent) 352deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:kw-ring 6s linear infinite}
@keyframes kw-ring{to{--kw-ring:360deg}}
@keyframes kw-breathe{from{opacity:.7}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.kw-plan-glow,.kw-plan-glow::before{animation:none}}