/* Sleek layer (2026-10-19). Loaded last on every page; it quiets the studio chrome and the home page only, so case
   studies keep their own type. Sentence case, Regular/Medium weights, display at most ~88px, the red used as one
   signal per screen, hairlines instead of frames and slabs, and generous section spacing. */
:root{--sleek-line:rgba(243,243,239,.15);--sleek-soft:#a6a6a6;--sleek-ink:#f3f3ef;--sleek-logo-h:32px;--sleek-section:clamp(120px,12vw,200px)}

/* Nav: a small mark and quiet links */
:root .site-header{height:auto;min-height:0;padding:clamp(20px,2vw,32px) var(--pad);align-items:center}
:root .site-header .logo{width:calc(var(--sleek-logo-h) * 980 / 440);min-width:0;height:auto;aspect-ratio:980/440}
:root .site-header .logo.logo-type{width:calc(var(--sleek-logo-h) * 856 / 308);aspect-ratio:856/308}
:root .site-header .logo.logo-type::before{display:none}
:root .site-header > .logo.logo-type > svg{opacity:1;visibility:visible}
:root .site-header > .logo.logo-type > svg > path{fill:currentColor}
:root .header-links{gap:clamp(18px,2vw,30px);font-size:15px;align-items:center}
:root .header-links a{padding:6px 0}
:root .site-header .icon-button{width:28px;height:32px}
:root .site-header .icon-button svg{width:19px;height:19px}

/* KURO system: one typeface (Inter) and five colours. Gray #E9DFDD, Silver #C7C8C5, Crimson #FF1627, Ebony #131210, Black.
   Every family name the site asks for resolves to Inter, so KURO surfaces read in one voice; client typefaces stay
   inside the work they belong to. */
@font-face{font-family:'Inter KK';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'GeneralSans';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'KK Mono';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:KuroServiceDisplay;src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
/* Exact-weight twins: older stylesheets declare these names at fixed weights, and an exact match beats a range */
@font-face{font-family:'General Sans';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'GeneralSans';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'GeneralSans';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'GeneralSans';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'GeneralSans';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'GeneralSans';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'KK Mono';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'KK Mono';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'KK Mono';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'KK Mono';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'KK Mono';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:KuroServiceDisplay;src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:KuroServiceDisplay;src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:KuroServiceDisplay;src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:KuroServiceDisplay;src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:KuroServiceDisplay;src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{--kk-yellow:#f6d23c;--kk-blue:#1f4fff;--kk-graphite:#2c2b29;--kk-gray:#e9dfdd;--kk-silver:#c7c8c5;--kk-crimson:#ff1627;--kk-ebony:#131210;--kk-black:#000;
  --vermilion:var(--kk-crimson);--brown:var(--kk-ebony);--red:var(--kk-crimson);--orange:var(--kk-crimson);
  --site-paper:var(--kk-ebony);--paper:var(--kk-ebony);--site-ink:var(--kk-gray);--site-muted:var(--kk-silver);--site-line:rgba(233,223,221,.12);
  --sleek-ink:var(--kk-gray);--sleek-soft:var(--kk-silver);--sleek-line:rgba(233,223,221,.12)}
html,body{background-color:var(--kk-ebony);color:var(--kk-gray);font-family:'Inter KK','General Sans',system-ui,sans-serif}

/* Home poster: one vermilion field, brown type, a lot of open space. Small text blocks at the top, a black-and-white
   window onto the work, and the two words anchored to the bottom edge. */
:root .home .site-header{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-bottom:0;background:var(--kk-gray);color:var(--kk-ebony)}
:root .home .site-header>.logo{grid-column:1/span 3;grid-row:1;align-self:center;color:var(--kk-crimson)}
:root .home .site-header>.header-links{grid-column:5/-1;grid-row:1;justify-self:end;align-self:center}
:root .home .site-header .header-links a,:root .home .site-header .icon-button{color:var(--kk-ebony)}
:root .home .site-header .header-links a::after{background:var(--brown)}
:root .home .hero-form.kh3{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:var(--gap);min-height:max(600px,calc(100svh - clamp(20px,2vw,32px) - 34px));margin:0;padding:clamp(40px,5vw,72px) 0 clamp(16px,1.8vw,28px);color:var(--brown);font:500 12px/1.4 'General Sans',sans-serif;text-transform:uppercase;letter-spacing:.02em}
:root .home .hero-form.kh3::before,:root .home .hero-form.kh3::after{display:none}
:root .home .kh3-top,:root .home .kh3-mid{grid-column:1/-1;display:grid;grid-template-columns:subgrid}
:root .home .kh3-labels{grid-column:1/span 3;display:grid;gap:2px;margin:0}
:root .home .kh3-lede{grid-column:4/span 6;max-width:66ch;margin:0}
:root .home .kh3-mid{align-self:center;align-items:start;margin:clamp(32px,4vw,64px) 0}
:root .home .kh3-photo{grid-column:1/span 3;display:block;aspect-ratio:4/5;overflow:hidden;clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}
:root .home .kh3-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:grayscale(1) contrast(1.06);transition:filter .4s ease}
:root .home .kh3-photo:hover img,:root .home .kh3-photo:focus-visible img{filter:none}
:root .home .kh3-list{grid-column:4/span 5;list-style:none;margin:0;padding:0;display:grid;gap:2px}
:root .home .kh3-list a{display:grid;grid-template-columns:4em 1fr;color:inherit;text-decoration:none}
:root .home .kh3-list a:hover,:root .home .kh3-list a:focus-visible{text-decoration:underline;text-underline-offset:3px}
:root .home .hero-form.kh3 .kh3-title{grid-column:1/-1;grid-row:3;align-self:end;display:flex;justify-content:space-between;max-width:none;margin:0;font:700 clamp(56px,10.2vw,220px)/.9 'Inter KK',sans-serif;text-transform:none;letter-spacing:-.06em;color:var(--kk-crimson)}
:root .home .hero-form.kh3 .kh3-title>span{translate:none;display:block;margin:0;padding:0;overflow:visible;clip-path:none}

/* Project index: one project large in a framed centre, the rest small and softened above and below.
   Everything is drawn from --a (the active position) and --i (each item's place); the script only sets --a. */
:root .home .pi{position:relative;height:calc(100svh + (var(--n) - 1) * 34svh);margin-top:0}
:root .home .pi-stage{position:sticky;top:0;height:100svh;overflow:hidden;--bw:min(34vw,540px);--bh:calc(var(--bw) * .75);--sw:68px;--sh:51px;--g:14px}
:root .home .pi-strip{list-style:none;margin:0;padding:0}
:root .home .pi-item{--d:calc(var(--i) - var(--a));--ad:max(var(--d), calc(var(--d) * -1));--s:max(0, calc(1 - var(--ad)));--sgn:clamp(-1, calc(var(--d) * 1000), 1);position:absolute;left:50%;top:50%;width:calc(var(--sw) + (var(--bw) - var(--sw)) * var(--s));aspect-ratio:4/3;transform:translate(-50%,-50%) translateY(calc(var(--sgn) * (min(var(--ad), 1) * (var(--bh) / 2 + var(--g) + var(--sh) / 2) + max(calc(var(--ad) - 1), 0) * (var(--sh) + var(--g)))));filter:blur(calc((1 - var(--s)) * 3px)) saturate(calc(.35 + var(--s) * .65));opacity:clamp(0, calc(1.6 - var(--ad) * .22), 1)}
:root .home .pi-item a,:root .home .pi-item img{display:block;width:100%;height:100%;object-fit:cover}
:root .home .pi-frame{position:absolute;left:50%;top:50%;width:calc(var(--bw) + 28px);height:calc(var(--bh) + 28px);transform:translate(-50%,-50%);pointer-events:none}
:root .home .pi-frame i{position:absolute;width:14px;height:14px;border:0 solid var(--vermilion)}
:root .home .pi-frame i:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px}
:root .home .pi-frame i:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0}
:root .home .pi-frame i:nth-child(3){left:0;bottom:0;border-width:0 0 1.5px 1.5px}
:root .home .pi-frame i:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0}
:root .home .pi-meta{position:absolute;top:50%;transform:translateY(-50%);margin:0;display:grid;gap:6px;max-width:26ch;font:500 12px/1.4 'General Sans',sans-serif;text-transform:uppercase;letter-spacing:.02em}
:root .home .pi-left{right:calc(50% + var(--bw) / 2 + 40px);text-align:right}
:root .home .pi-right{left:calc(50% + var(--bw) / 2 + 40px)}
:root .home .pi-count,:root .home .pi-sector{color:var(--sleek-soft);font-variant-numeric:tabular-nums}
:root .home .pi-meta b{font-weight:500;color:var(--sleek-ink)}

/* Statement scene as a film title card: crisp small lines, the name large and out of focus in vermilion, a faint
   grain, and the companies the team designed for before the studio set as credits */
:root .home .kk-film{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;margin:0 calc(var(--pad) * -1);padding:0 var(--pad);display:grid;place-content:center;justify-items:center;text-align:center;color:var(--vermilion);font:600 12px/1.5 'General Sans',sans-serif;text-transform:uppercase;letter-spacing:.06em}
:root .home .kk-film::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.06;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root .home .kk-film p,:root .home .kk-film h2{margin:0}
:root .home .kk-film .kk-film-top{margin-bottom:clamp(28px,3.4vw,52px)}
:root .home .kk-film-title{font:700 clamp(60px,11.5vw,200px)/.86 'General Sans',sans-serif;letter-spacing:-.045em;text-transform:uppercase;filter:blur(clamp(3px,.42vw,7px));color:var(--vermilion)}
:root .home .kk-film .kk-film-sub{margin-top:.5em;font:700 clamp(18px,2.6vw,44px)/1 'General Sans',sans-serif;letter-spacing:-.015em;filter:blur(clamp(1.5px,.18vw,3px))}
:root .home .kk-film .kk-film-credits{margin-top:clamp(56px,7vw,120px);max-width:min(84ch,92vw);display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;font-size:12px;letter-spacing:.05em}
:root .home .kk-film .kk-film-credits{display:grid;justify-items:center;gap:22px}
:root .home .kk-film .kk-film-credits p{color:var(--sleek-soft)}
:root .home .kk-film-logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(22px,3vw,48px) clamp(28px,3.6vw,56px);max-width:min(1100px,92vw)}
:root .home .kk-film-logos img{display:block;height:clamp(22px,2vw,30px);width:auto;opacity:.85;filter:brightness(0) invert(.92)}
:root .home .kk-film-credits span{width:100%;color:var(--sleek-soft);margin-bottom:6px}
:root .home .kk-film-credits b{font-weight:600;color:var(--sleek-ink)}
:root .home .kk-film-credits i{font-style:normal}

/* What we do, as a mosaic: flat colour and black-and-white image tiles that touch, bold tight capitals, no ruled rows */
:root .home .svm{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(clamp(260px,29vw,440px),auto));margin:var(--sleek-section) calc(var(--pad) * -1) 0}
:root .home .svm-intro{grid-column:1/span 4;grid-row:1/span 2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2vw,32px);background:var(--kk-gray);color:var(--kk-ebony)}
:root .home .svm-label{margin:0;font:600 12px/1.4 'General Sans',sans-serif;text-transform:uppercase;letter-spacing:.06em}
:root .home .svm-intro h2{margin:0;font:700 clamp(32px,3.6vw,58px)/.92 'General Sans',sans-serif;letter-spacing:-.04em;text-transform:uppercase}
:root .home .svm-intro h2+p{margin:18px 0 0;max-width:36ch;font-size:14px;line-height:1.5;color:#4a4540}
:root .home .svm-tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2vw,32px);text-decoration:none}
:root .home .svm-tile:nth-of-type(1){grid-column:5/span 4;grid-row:1/span 2}
:root .home .svm-tile:nth-of-type(2){grid-column:9/span 4;grid-row:1}
:root .home .svm-tile:nth-of-type(3){grid-column:9/span 2;grid-row:2}
:root .home .svm-tile:nth-of-type(4){grid-column:11/span 2;grid-row:2}
:root .home .svm-tile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter .45s ease}
:root .home .svm-image::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,8,7,.8),rgba(10,8,7,.08) 60%)}
:root .home .svm-tile:hover img,:root .home .svm-tile:focus-visible img{filter:none}
:root .home .svm-tile:nth-of-type(3) img{object-position:88% 12%}
:root .site-footer .footer-bottom{border-top:0}
:root .home .svm-image{color:var(--kk-gray)}
:root .home .svm-vermilion{background:var(--vermilion);color:var(--brown)}
:root .home .svm-brown{background:var(--kk-silver);color:var(--kk-ebony)}
:root .home .svm-n{position:absolute;top:clamp(20px,2vw,32px);left:clamp(20px,2vw,32px);font:600 12px/1 'General Sans',sans-serif;letter-spacing:.06em}
:root .home .svm-tile .brand-arrow{position:absolute;top:clamp(18px,1.9vw,30px);right:clamp(18px,1.9vw,30px);width:18px;height:18px;color:currentColor}
:root .home .svm-tile h3{margin:0;font:700 clamp(24px,2.7vw,46px)/.92 'General Sans',sans-serif;letter-spacing:-.035em;text-transform:uppercase}
:root .home .svm-tile p{margin:12px 0 0;max-width:34ch;font-size:13px;line-height:1.45}

/* Grey over black: the closing invitation as a graphite card on the ebony ground, a crimson bar along its foot, and two
   KURO characters built from the logo's grammar (right angles, one 45 degree cut, circles) leaning in from the right */
:root .site-footer .footer-invitation .kk-card{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);min-height:clamp(420px,36vw,600px);padding:clamp(32px,3.4vw,56px) clamp(28px,3vw,48px) 0;background:var(--kk-graphite);box-shadow:inset 0 -8px 0 var(--kk-crimson)}
:root .site-footer .footer-invitation .kk-card-copy{grid-column:1/span 7;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2vw,28px);padding-bottom:clamp(40px,4vw,64px);position:relative;z-index:1}
:root .site-footer .footer-invitation .kk-card-copy>.eyebrow{font-size:13px;color:var(--kk-silver)}
:root .site-footer .footer-invitation .kk-card .footer-cta{display:inline-flex;align-items:flex-start;gap:.12em;margin:auto 0 0;font-size:clamp(56px,7.4vw,128px);font-weight:600;line-height:.92;letter-spacing:-.055em;color:var(--kk-gray)}
:root .site-footer .footer-invitation .kk-card .footer-cta>.brand-arrow{display:block;width:.32em;height:.32em;margin-top:.08em;color:var(--kk-crimson)}
:root .site-footer .footer-invitation .kk-card .footer-cta:hover{color:var(--kk-crimson)}
:root .site-footer .footer-invitation .kk-mail{font-size:clamp(17px,1.4vw,22px);font-weight:500;letter-spacing:-.01em;color:var(--kk-silver);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
:root .site-footer .footer-invitation .kk-mail:hover{color:var(--kk-gray)}
:root .kk-chars{grid-column:8/-1;align-self:end;justify-self:end;width:100%;max-width:520px;height:auto;margin-bottom:8px;fill:var(--kk-crimson)}
:root .kk-chars .kk-slit{fill:var(--kk-graphite)}
:root .kk-chars .kk-eyes circle{fill:var(--kk-gray);transition:transform .35s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:no-preference){
  :root .kk-chars .kk-eyes{transform-box:fill-box;transform-origin:center;animation:kk-look 7s steps(1) infinite}
}
@keyframes kk-look{0%,92%{transform:none}94%,96%{transform:scaleY(.1)}}
@media (max-width:700px){:root .site-footer .footer-invitation .kk-card{grid-template-columns:1fr;min-height:0}:root .site-footer .footer-invitation .kk-card-copy{grid-column:1;padding-bottom:28px}:root .kk-chars{grid-column:1;max-width:300px;justify-self:end}}

/* Display headings that used the condensed face now set in bold, tight Inter */
:root .svc-deck .svc-poster h1,:root .svc-deck .svc-feature h3,:root .svc-deck .svc-engagement h2,:root .svc-deck .svc-deck-close h2,:root .wx .wx-headline,:root .wx .wx-row>a{font-weight:700;letter-spacing:-.055em}
:root .wx .wx-headline{font-size:clamp(56px,8.4vw,160px)}
@media (max-width:700px){:root .wx .wx-headline{font-size:clamp(40px,13.4vw,96px)}}
:root .site-footer .footer-invitation .kk-card .footer-cta{display:inline-flex;align-self:flex-start;justify-content:flex-start;gap:.25em}

@media (max-width:1100px){
  :root .home .svm{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(280px,auto)}
  :root .home .svm-intro{grid-column:1/-1;grid-row:auto;min-height:300px}
  :root .home .svm-tile:nth-of-type(1),:root .home .svm-tile:nth-of-type(2){grid-column:1/-1;grid-row:auto;min-height:340px}
  :root .home .svm-tile:nth-of-type(3){grid-column:1;grid-row:auto}
  :root .home .svm-tile:nth-of-type(4){grid-column:2;grid-row:auto}
  :root .home .svm-tile h3{font-size:clamp(22px,4.4vw,40px)}
}

/* Labels: sentence case, one size */
:root .home .eyebrow,:root .site-footer .eyebrow{font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--sleek-soft)}

/* End of the work list: a hairline and a plain link */
:root .feed-end{margin-top:clamp(64px,7vw,112px)}
:root .all-work-link{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;padding-top:18px}
:root .feed-end .all-work-link{border-top:0}
:root .home-scroll-work-end.home-scroll-active .all-work-link::before{display:none}
:root .all-work-link .brand-arrow,:root .svc-home .brand-arrow{color:var(--sleek-soft)}

/* Clients, now after the work */
:root .home .client-band{margin-top:var(--sleek-section)}
:root .client-band h2>span{font-size:13px;letter-spacing:0;text-transform:none;color:var(--sleek-soft)}
:root .client-band .client-pause{font-size:13px}

/* What we do */
:root .svc-home{margin-top:var(--sleek-section);border-top:1px solid var(--sleek-line)}
:root .svc-home h2{font-size:clamp(36px,3.6vw,56px)}
:root .svc-home .svc-number{color:var(--sleek-soft)}

/* Closing invitation: one quiet line under a hairline, on every page */
:root .site-footer{padding-top:var(--sleek-section)}
:root .site-footer .footer-invitation{padding:0;margin:0 0 clamp(72px,8vw,128px);border-top:0}
:root .site-footer .footer-invitation::before,:root .site-footer .footer-invitation::after{display:none}
:root .site-footer .footer-invitation>.eyebrow{max-width:none;color:var(--sleek-soft)}
:root .site-footer .footer-invitation .footer-cta{display:inline-flex;align-items:center;gap:.3em;margin-top:14px;font-size:clamp(36px,3.9vw,56px);font-weight:400;letter-spacing:-.035em;line-height:1.1;color:var(--sleek-ink)}
:root .site-footer .footer-invitation .footer-cta>.brand-arrow{display:block;width:.42em;height:.42em;color:currentColor}
:root .site-footer .footer-invitation .footer-cta:hover{color:var(--red)}
:root .home-outro-mark{display:none}
:root .site-footer .footer-wordmark{width:calc(var(--sleek-logo-h) * 980 / 440);height:auto}

/* Cards: the red cue shows on hover only; on touch screens the card itself is the link */
@media (hover:none){:root .project-cue{display:none}}

@media (max-width:600px){
  :root{--sleek-logo-h:28px}
  :root .site-header{padding-top:18px}
  :root .header-links{gap:14px}
  :root .home .site-header>.logo{grid-column:1/span 4}
  :root .home .site-header>.header-links{grid-column:5/-1}
  :root .home .hero-form.kh3{grid-template-columns:repeat(4,minmax(0,1fr));min-height:max(560px,calc(100svh - 52px));padding-top:32px;font-size:11.5px}
  :root .home .kh3-labels{grid-column:1/-1}
  :root .home .kh3-lede{grid-column:1/-1;margin-top:16px}
  :root .home .kh3-photo{grid-column:1/span 2}
  :root .home .kh3-list{grid-column:3/-1}
  :root .home .hero-form.kh3 .kh3-title{flex-direction:column;gap:.02em;font-size:19vw}
  :root .home .hero-form.kh3 .kh3-title>span:last-child{align-self:flex-end}
  :root .home .pi{height:calc(100svh + (var(--n) - 1) * 30svh)}
  :root .home .svm{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(240px,auto)}
  :root .home .svm-intro{grid-column:1/-1;grid-row:auto;min-height:280px}
  :root .home .svm-tile:nth-of-type(1),:root .home .svm-tile:nth-of-type(2){grid-column:1/-1;grid-row:auto;min-height:300px}
  :root .home .svm-tile:nth-of-type(3){grid-column:1;grid-row:auto}
  :root .home .svm-tile:nth-of-type(4){grid-column:2;grid-row:auto}
  :root .home .svm-tile h3{font-size:clamp(22px,6.4vw,30px)}
  :root .home .pi-stage{--bw:76vw;--sw:52px;--sh:39px;--g:12px}
  :root .home .pi-meta{top:auto;bottom:28px;transform:none;max-width:calc(50% - 44px)}
  :root .home .pi-left{right:auto;left:0;text-align:left}
  :root .home .pi-right{left:auto;right:0;text-align:right}
  :root .site-footer .footer-invitation .footer-cta{font-size:clamp(34px,9.6vw,44px)}
}

/* ---------- Work: a typographic grid ---------- */
:root .wg{padding:0 var(--pad) var(--sleek-section)}
:root .wg-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;padding:clamp(48px,6vw,96px) 0 clamp(28px,3vw,44px)}
:root .wg-micro{grid-column:1/span 3;align-self:start;margin:0;font:600 12px/1.5 'Inter KK',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--kk-silver)}
:root .wg-title{grid-column:1/span 8;grid-row:2;margin:clamp(24px,3vw,48px) 0 0;font:700 clamp(96px,19vw,330px)/.78 'Inter KK',sans-serif;letter-spacing:-.07em;color:var(--kk-gray)}
:root .wg-title sup{font-size:.16em;letter-spacing:-.02em;vertical-align:top;margin-left:.12em;position:relative;top:.35em;color:var(--kk-crimson)}
:root .wg-filters{grid-column:9/-1;grid-row:2;list-style:none;margin:0;padding:0;display:grid;gap:4px;justify-items:end}
:root .wg-filters button{background:none;border:0;padding:0;cursor:pointer;font:600 clamp(20px,1.9vw,30px)/1.1 'Inter KK',sans-serif;letter-spacing:-.035em;color:#5a5754;transition:color .2s}
:root .wg-filters button sup{font-size:.42em;margin-left:.2em;letter-spacing:0;vertical-align:top;position:relative;top:.25em}
:root .wg-filters button:hover,:root .wg-filters button[aria-pressed="true"]{color:var(--kk-gray)}
:root .wg-filters button[aria-pressed="true"] sup{color:var(--kk-crimson)}
:root .wg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;gap:8px}
:root .wg-tile{grid-column:span 4;aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--kk-graphite)}
:root .wg-tile.w8{grid-column:span 8}:root .wg-tile.w7{grid-column:span 7}:root .wg-tile.w5{grid-column:span 5}
:root .wg-tile.tall{aspect-ratio:auto;min-height:clamp(340px,40vw,640px)}
:root .wg-tile.w4.tall{grid-row:span 1}
:root .wg-tile a{position:absolute;inset:0;display:block;color:var(--kk-gray);text-decoration:none}
:root .wg-tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:scale(1.001);transition:filter .5s ease,transform .8s cubic-bezier(.22,1,.36,1)}
:root .wg-graphic{background:var(--wg-ground)}
:root .wg-graphic img{object-fit:contain;padding:8% 6% 22%}
:root .wg-tile a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.72),rgba(10,9,8,0) 45%);pointer-events:none}
:root .wg-meta{position:absolute;left:clamp(16px,1.6vw,24px);right:clamp(16px,1.6vw,24px);bottom:clamp(18px,1.8vw,28px);z-index:1;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline}
:root .wg-n{font:600 12px/1 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .wg-meta b{font:700 clamp(22px,2.1vw,34px)/1 'Inter KK',sans-serif;letter-spacing:-.04em}
:root .wg-sector{grid-column:2;margin-top:6px;font:500 12px/1.3 'Inter KK',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--kk-silver)}
:root .wg-bar{position:absolute;left:0;bottom:0;height:6px;width:100%;background:var(--kk-crimson);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1);z-index:2}
:root .wg-tile a:hover img,:root .wg-tile a:focus-visible img{filter:none;transform:scale(1.035)}
:root .wg-tile a:hover .wg-bar,:root .wg-tile a:focus-visible .wg-bar{transform:scaleX(1)}
:root .wg-note{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2vw,32px);background:var(--kk-graphite);box-shadow:inset 0 -6px 0 var(--kk-crimson)}
:root .wg-note-big{margin:0;font:700 clamp(32px,3.6vw,60px)/.95 'Inter KK',sans-serif;letter-spacing:-.05em;color:var(--kk-crimson)}
:root .wg-note-small{margin:0;font:600 12px/1.5 'Inter KK',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--kk-silver)}
@media (max-width:900px){
  :root .wg-micro{grid-column:1/-1}
  :root .wg-title{grid-column:1/-1}
  :root .wg-filters{grid-column:1/-1;grid-row:3;justify-items:start;grid-auto-flow:column;grid-auto-columns:max-content;gap:6px 20px;overflow-x:auto;margin-top:24px}
  :root .wg-filters button{font-size:18px}
  :root .wg-grid{grid-template-columns:1fr 1fr}
  :root .wg-tile,:root .wg-tile.w4,:root .wg-tile.w5{grid-column:span 1}
  :root .wg-tile.w8,:root .wg-tile.w7{grid-column:1/-1}
  :root .wg-tile.tall{min-height:320px}
}
@media (max-width:560px){:root .wg-grid{grid-template-columns:1fr}:root .wg-tile{grid-column:1/-1!important;min-height:0;aspect-ratio:4/3}:root .wg-title{font-size:30vw}}

/* ---------- Studio ---------- */
:root .st{padding:0 0 var(--sleek-section)}
:root .st-micro{margin:0;font:600 12px/1.5 'Inter KK',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--kk-silver)}
:root .st-hero{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - 92px)}
:root .st-hero-left{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,36px);padding:clamp(36px,4vw,64px) var(--pad);background:var(--kk-gray);color:var(--kk-ebony)}
:root .st-hero-left .st-micro{color:#6a6360}
:root .st-hero h1{margin:auto 0 0;font:700 clamp(52px,6.6vw,118px)/.9 'Inter KK',sans-serif;letter-spacing:-.06em}
:root .st-desc{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);font:400 15px/1.55 'Inter KK',sans-serif;color:#3d3835}
:root .st-desc p{margin:0}
:root .st-desc a,:root .st-facts a{color:inherit;text-decoration:underline;text-underline-offset:3px}
:root .st-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin:0}
:root .st-facts dt{font:600 12px/1.4 'Inter KK',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#6a6360}
:root .st-facts dd{margin:4px 0 0;font:500 15px/1.4 'Inter KK',sans-serif}
:root .st-hero-right{background:var(--kk-crimson);display:flex;align-items:flex-end;justify-content:center;padding:0 clamp(24px,4vw,64px);overflow:hidden}
:root .st-hero-right .st-chars{position:static;width:100%;max-width:620px;height:auto;margin:0;fill:var(--kk-ebony)}
:root .st-hero-right .st-chars .kk-slit{fill:var(--kk-crimson)}
:root .st-block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(32px,4vw,56px);padding:var(--sleek-section) var(--pad) 0}
:root .st-block-head{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
:root .st-block-head .st-micro{grid-column:1/span 3;align-self:start}
:root .st-block-head h2{grid-column:4/-1;margin:0;font:700 clamp(44px,5.6vw,96px)/.9 'Inter KK',sans-serif;letter-spacing:-.06em;color:var(--kk-gray)}
:root .st-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
:root .st-card{display:flex;flex-direction:column;gap:14px;min-height:clamp(320px,26vw,420px);padding:clamp(22px,2vw,32px);background:var(--kk-graphite);box-shadow:inset 0 -6px 0 var(--kk-crimson)}
:root .st-card .st-n{font:600 13px/1 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .st-card h3{margin:auto 0 0;font:700 clamp(24px,2.2vw,34px)/1 'Inter KK',sans-serif;letter-spacing:-.04em}
:root .st-card h3 a{color:var(--kk-gray);text-decoration:none}
:root .st-card h3 a:hover{color:var(--kk-crimson)}
:root .st-card p{margin:0;font:400 15px/1.5 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .st-card .service-proof{font-size:13px;color:#8d8a86}
:root .st-card .service-proof a{color:var(--kk-gray)}
:root .st-principles{grid-column:4/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4vw,64px) var(--gap)}
:root .st-principles .st-n{display:block;margin-bottom:14px;font:600 13px/1 'Inter KK',sans-serif;color:var(--kk-crimson)}
:root .st-principles h3{margin:0 0 10px;font:700 clamp(24px,2.4vw,38px)/1.02 'Inter KK',sans-serif;letter-spacing:-.04em;color:var(--kk-gray)}
:root .st-principles p,:root .st-stages p{margin:0;max-width:44ch;font:400 15px/1.55 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .st-stages{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
:root .st-big{display:block;font:700 clamp(96px,13vw,220px)/.8 'Inter KK',sans-serif;letter-spacing:-.07em;color:#2c2b29}
:root .st-stages li:nth-child(1) .st-big{color:var(--kk-crimson)}
:root .st-stages h3{margin:20px 0 10px;font:700 clamp(22px,2vw,30px)/1 'Inter KK',sans-serif;letter-spacing:-.04em;color:var(--kk-gray)}
:root .st-exp-body{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:48px}
:root .st-logos{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
@media (max-width:1100px){:root .st-logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
:root .st-logos li{display:grid;place-items:center;aspect-ratio:3/2;background:var(--kk-graphite)}
:root .st-logos img{height:clamp(22px,2vw,30px);width:auto;max-width:70%;object-fit:contain;filter:brightness(0) invert(.9)}
:root .st-exp-copy{grid-column:4/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
:root .st-exp-copy p{margin:0;font:400 15px/1.55 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .st-exp-copy a{color:var(--kk-gray)}
@media (max-width:1100px){:root .st-cards{grid-template-columns:1fr 1fr}:root .st-principles{grid-column:1/-1}:root .st-exp-copy{grid-column:1/-1}}
@media (max-width:760px){
  :root .st-hero{grid-template-columns:1fr;min-height:0}
  :root .st-hero-left{min-height:70svh}
  :root .st-hero-right{min-height:340px;padding-top:40px}
  :root .st-desc,:root .st-facts{grid-template-columns:1fr}
  :root .st-block-head .st-micro,:root .st-block-head h2{grid-column:1/-1}
  :root .st-block-head h2{margin-top:14px}
  :root .st-cards,:root .st-principles,:root .st-stages,:root .st-exp-copy{grid-template-columns:1fr}
}

/* Footer, minimal: logo, the four services and back to top on one line; one quiet legal line beneath */
:root .site-footer .kk-foot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:clamp(24px,4vw,64px);row-gap:28px;padding-bottom:clamp(24px,2.4vw,36px)}
:root .site-footer .kk-foot .footer-wordmark{display:block;width:96px;height:auto}
:root .kk-foot-svc{display:flex;flex-wrap:wrap;gap:8px clamp(18px,2.4vw,36px);font:500 15px/1.3 'Inter KK',sans-serif}
:root .kk-foot-svc a{color:var(--kk-silver);text-decoration:none}
:root .kk-foot-svc a:hover{color:var(--kk-gray)}
:root .site-footer .kk-foot .progress-top{font:500 13px/1 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .kk-foot-legal{grid-column:1/-1;margin:0;font:400 12px/1.4 'Inter KK',sans-serif;color:#7d7974}
:root .kk-foot-legal a{color:inherit}
@media (max-width:700px){:root .site-footer .kk-foot{grid-template-columns:1fr auto}:root .kk-foot-svc{grid-column:1/-1;grid-row:2}}

/* What we do, calmer: four equal graphite tiles beside the intro, sentence case, no photos, crimson only on hover */
:root .home .svm{grid-template-rows:repeat(2,minmax(clamp(220px,20vw,300px),auto));gap:8px;margin-left:0;margin-right:0}
:root .home .svm-intro{grid-column:1/span 4;grid-row:1/span 2}
:root .home .svm-tile:nth-of-type(1){grid-column:5/span 4;grid-row:1}
:root .home .svm-tile:nth-of-type(2){grid-column:9/span 4;grid-row:1}
:root .home .svm-tile:nth-of-type(3){grid-column:5/span 4;grid-row:2}
:root .home .svm-tile:nth-of-type(4){grid-column:9/span 4;grid-row:2}
:root .home .svm-plain{background:var(--kk-graphite);color:var(--kk-gray);box-shadow:inset 0 0 0 var(--kk-crimson);transition:box-shadow .35s cubic-bezier(.22,1,.36,1)}
:root .home .svm-plain:hover,:root .home .svm-plain:focus-visible{box-shadow:inset 0 -6px 0 var(--kk-crimson)}
:root .home .svm-tile h3{font:600 clamp(24px,2.2vw,34px)/1.05 'Inter KK',sans-serif;letter-spacing:-.035em;text-transform:none}
:root .home .svm-tile p{color:var(--kk-silver);font-size:14px}
:root .home .svm-n{color:var(--kk-silver)}
:root .home .svm-tile .brand-arrow{color:var(--kk-silver)}
:root .home .svm-intro h2{text-transform:none;font-weight:700;letter-spacing:-.05em;font-size:clamp(36px,3.8vw,60px)}
@media (max-width:1100px){:root .home .svm-tile:nth-of-type(n){grid-column:auto;grid-row:auto}:root .home .svm-intro{grid-column:1/-1;grid-row:auto}}

/* Quirky asides: a small grey note tucked beside a line, tilted a touch, lowercase */
.kk-aside{display:inline-block;margin-left:.6em;font:500 clamp(12px,.32em,22px)/1.2 'Inter KK',sans-serif;font-style:normal;letter-spacing:0;text-transform:none;color:var(--kk-silver);transform:rotate(-4deg) translateY(-.4em);white-space:nowrap;vertical-align:top}
:root .home .hero-form.kh3 .kh3-title>span:last-child{position:relative}
:root .home .hero-form.kh3 .kh3-title .kk-aside{word-spacing:normal;letter-spacing:0;line-height:1;position:absolute;right:0;bottom:100%;margin:0 0 .15em;font-size:clamp(13px,1.2vw,19px);color:#6b2a20;transform:rotate(-4deg)}
:root .home .svm-intro h2 .kk-aside{display:block;margin:10px 0 0;font-size:15px;color:#6a6360;transform:rotate(-2deg)}
:root .home .kk-film .kk-film-aside{margin-top:10px}
:root .home .kk-film .kk-film-aside .kk-aside{color:var(--kk-silver);font-size:14px}
:root .wg-note-big .kk-aside{display:block;margin:12px 0 0;font-size:14px}
:root .site-footer .footer-invitation .kk-card-copy>.eyebrow .kk-aside{font-size:12px;margin-left:.4em}

/* The sticker: a crimson disc with the KURO face in the middle and the studio line running round the rim, slowly
   turning, with one corner peeled up. It sits on the corner of the cover photo and follows the cursor with its eyes. */
:root .home .kh3-mid{position:relative}
:root .home .kh3-photo,:root .home .kh3-list{grid-row:1}
:root .home .kk-sticker{grid-column:3;grid-row:1;justify-self:end;align-self:start;width:clamp(120px,11vw,180px);margin:-70px -26px 0 0;position:relative;z-index:3;transform:rotate(-8deg);filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}
:root .home .kk-sticker svg{display:block;width:100%;height:auto;overflow:visible}
:root .home .kk-st-disc{fill:var(--kk-crimson)}
:root .home .kk-st-ring text{font:700 13.5px/1 'Inter KK',sans-serif;letter-spacing:.06em;text-transform:uppercase;fill:var(--kk-ebony)}
:root .home .kk-st-head{fill:var(--kk-ebony)}
:root .home .kk-sticker .kk-eyes circle{fill:var(--kk-gray);transition:transform .35s cubic-bezier(.22,1,.36,1)}
:root .home .kk-st-peel{fill:#ff6a74}
@media (prefers-reduced-motion:no-preference){:root .home .kk-st-ring{transform-origin:100px 100px;animation:kk-spin 24s linear infinite}}
@keyframes kk-spin{to{transform:rotate(360deg)}}
@media (max-width:600px){:root .home .kk-sticker{grid-column:2;width:84px;margin:-44px -14px 0 0}:root .home .hero-form.kh3 .kh3-title .kk-aside{position:static;display:block;align-self:flex-end;margin:.3em 0 0;font-size:13px}}

/* Asides in a handwritten face: the only place a second typeface appears, like a note scribbled on the layout */
@font-face{font-family:'KK Hand';src:url('/assets/kuro/Caveat.woff2') format('woff2');font-weight:400 700;font-display:swap}
.kk-aside,:root .home .hero-form.kh3 .kh3-title .kk-aside{font-family:'KK Hand',cursive;font-weight:600;letter-spacing:0;word-spacing:normal}
:root .home .hero-form.kh3 .kh3-title .kk-aside{font-size:clamp(20px,1.9vw,30px)}
:root .home .svm-intro h2 .kk-aside{font-size:22px}
:root .home .kk-film .kk-film-aside .kk-aside{font-size:21px}
:root .wg-note-big .kk-aside{font-size:21px}
:root .site-footer .footer-invitation .kk-card-copy>.eyebrow .kk-aside{font-size:18px}
@media (max-width:600px){:root .home .hero-form.kh3 .kh3-title .kk-aside{font-size:19px}}

/* Studio: the companies before the studio as a pyramid of white tiles on crimson, giant words running across them */
:root .st-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:root .st-wall{grid-column:1/-1;position:relative;background:var(--kk-crimson);padding:clamp(40px,5vw,80px) clamp(16px,2vw,32px) clamp(16px,2vw,32px);overflow:hidden;margin:0 calc(var(--pad) * -1)}
:root .st-wall-word{position:absolute;z-index:2;margin:0;font:800 clamp(64px,10vw,180px)/.8 'Inter KK',sans-serif;letter-spacing:-.07em;color:var(--kk-ebony);pointer-events:none;white-space:nowrap}
:root .st-wall-a{left:clamp(16px,2vw,32px);top:clamp(24px,3vw,48px)}
:root .st-wall-b{right:clamp(16px,2vw,32px);top:36%}
:root .st-wall-note{position:relative;z-index:2;max-width:26ch;margin:clamp(110px,12vw,210px) 0 0;font:700 12px/1.4 'Inter KK',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--kk-ebony)}
:root .st-pyramid{list-style:none;margin:clamp(-120px,-8vw,-40px) auto 0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;max-width:min(860px,64vw);position:relative;z-index:1}
:root .st-pyramid li{grid-column:span 2;aspect-ratio:1;background:#fff;border-radius:clamp(12px,1.4vw,22px);display:grid;place-items:center}
:root .st-pyramid li:nth-child(1){grid-column:4/span 2}
:root .st-pyramid li:nth-child(2){grid-column:6/span 2;grid-row:1}
:root .st-pyramid li:nth-child(3){grid-column:3/span 2}
:root .st-pyramid li:nth-child(4){grid-column:5/span 2}
:root .st-pyramid li:nth-child(5){grid-column:7/span 2}
:root .st-pyramid li:nth-child(6){grid-column:1/span 2}
:root .st-pyramid li:nth-child(7){grid-column:3/span 2}
:root .st-pyramid li:nth-child(8){grid-column:5/span 2}
:root .st-pyramid li:nth-child(9){grid-column:7/span 2}
:root .st-tile-logo{width:62%;height:30%;background:var(--kk-crimson);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
:root .st-exp .st-exp-body{margin-top:clamp(40px,5vw,72px)}
@media (max-width:760px){:root .st-pyramid{grid-template-columns:repeat(3,1fr);margin-top:24px}:root .st-pyramid li:nth-child(n){grid-column:auto;grid-row:auto}:root .st-wall-word{font-size:16vw}:root .st-wall-b{top:auto;bottom:auto;right:16px;top:calc(16vw + 40px)}:root .st-wall-note{margin-top:calc(32vw + 40px)}}

/* Footer lockup: mark, name and year, the KURO face, and a run of studio phrases, all in crimson */
:root .site-footer .kk-lock{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;column-gap:clamp(20px,2.4vw,40px);row-gap:16px;margin:0 0 clamp(48px,5vw,80px);color:var(--kk-crimson)}
:root .kk-lock-mark{display:block;width:clamp(120px,12vw,200px);color:var(--kk-crimson)}
:root .kk-lock-mark svg{display:block;width:100%;height:auto}
:root .kk-lock-name{margin:0;font:700 clamp(26px,2.8vw,48px)/1 'Inter KK',sans-serif;letter-spacing:-.045em}
:root .kk-lock-name span{display:inline-block;margin:0 .5em}
:root .site-footer .kk-lock .kk-lock-face{grid-column:4;width:clamp(64px,6vw,100px);height:auto;fill:var(--kk-crimson);margin:0;max-width:none}
:root .site-footer .kk-lock .kk-lock-face .kk-eyes circle{fill:var(--kk-ebony)}
:root .kk-lock-row{grid-column:1/-1;margin:0;display:flex;flex-wrap:wrap;gap:8px clamp(14px,2vw,32px);font:700 clamp(13px,1.1vw,17px)/1.2 'Inter KK',sans-serif;text-transform:uppercase;letter-spacing:.02em}
:root .kk-lock-row i{font-style:normal}
:root .site-footer .kk-foot .footer-wordmark{display:none}
:root .site-footer .kk-foot{grid-template-columns:1fr auto}
@media (max-width:700px){:root .site-footer .kk-lock{grid-template-columns:1fr auto}:root .kk-lock-name{grid-column:1/-1;grid-row:2}:root .site-footer .kk-lock .kk-lock-face{grid-column:2;grid-row:1}}

/* Home cover v4: one composition in one screen. A quiet line on top, then brands. / websites. at full scale with the
   KURO cast standing on the first line, the sticker slapped on them, and the scribbled aside beside websites. */
:root .home .hero-form.kh4{grid-template-rows:auto 1fr;min-height:calc(100svh - 92px);padding-bottom:clamp(14px,1.4vw,24px)}
:root .home .hero-form.kh4 .kh3-top{align-items:start}
:root .home .hero-form.kh4 .kh3-labels{font:600 13px/1.4 'Inter KK',sans-serif;text-transform:none;letter-spacing:-.005em}
:root .home .hero-form.kh4 .kh3-lede{grid-column:6/span 6;font:500 clamp(16px,1.25vw,20px)/1.4 'Inter KK',sans-serif;text-transform:none;letter-spacing:-.01em;max-width:46ch}
:root .home .hero-form.kh4 .kh3-title{grid-row:2;flex-direction:column;justify-content:flex-end;align-self:end;font-size:clamp(72px,14.6vw,300px);line-height:.84}
:root .home .hero-form.kh4 .kh3-title>span{display:flex}
:root .home .hero-form.kh4 .kh4-l1{align-items:flex-end;gap:.08em}
:root .home .hero-form.kh4 .kh3-title>span:last-child{align-self:flex-start}
:root .home .kh4-cast{position:relative;flex:1;display:flex;justify-content:flex-end;align-items:flex-end;margin-bottom:-.02em}
:root .home .kh4-chars{height:.9em;width:auto;fill:var(--kk-ebony);margin:0;position:static}
:root .home .kh4-chars .kk-slit{fill:var(--kk-gray)}
:root .home .kh4-chars .kk-eyes circle{fill:var(--kk-gray)}
:root .home .kh4-cast .kk-sticker{position:absolute;right:calc(.9em * 360 / 252 * .62);bottom:.32em;width:.62em;margin:0;transform:rotate(-12deg);grid-column:auto;grid-row:auto}
:root .home .hero-form.kh4 .kh3-title .kk-aside{right:auto;left:100%;bottom:62%;margin-left:.2em;white-space:nowrap}
@media (max-width:760px){
  :root .home .hero-form.kh4 .kh3-lede{grid-column:1/-1;margin-top:14px}
  :root .home .hero-form.kh4 .kh3-title{font-size:21vw}
  :root .home .hero-form.kh4 .kh4-l1{flex-direction:column;align-items:flex-start}
  :root .home .kh4-cast{order:-1;align-self:flex-end;margin-bottom:.1em}
  :root .home .kh4-chars{height:.78em}
  :root .home .hero-form.kh4 .kh3-title .kk-aside{position:static;margin:.25em 0 0}
}

/* Cute pass on the KURO cast: rounded small ears, big low eyes with pupils (the pupils follow the cursor), a highlight
   in each eye, a tiny w mouth and blush. */
:root .kk-chars .kk-whites circle{fill:var(--kk-gray)}
:root .kk-chars .kk-eyes circle{fill:var(--kk-ebony)!important}
:root .kk-chars .kk-shine circle{fill:#fff}
:root .kk-chars .kk-mouth{fill:none;stroke:var(--kk-ebony);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
:root .kk-chars .kk-blush ellipse{fill:#ff8a93;opacity:.75}
:root .st-hero-right .st-chars .kk-eyes circle,:root .kh4-chars .kk-eyes circle{fill:var(--kk-ebony)!important}
:root .st-hero-right .st-chars .kk-mouth,:root .kh4-chars .kk-mouth{stroke:var(--kk-gray)}
:root .st-hero-right .st-chars .kk-blush ellipse,:root .kh4-chars .kk-blush ellipse{fill:var(--kk-crimson);opacity:.9}

/* Hero v4: a window in the top right that keeps changing through the work, with the sticker slapped on its corner */
:root .home .hero-form.kh4 .kh3-lede{grid-column:4/span 4}
:root .home .kh4-reel{grid-column:9/-1;grid-row:1/span 2;position:relative;display:block;aspect-ratio:4/3;background:var(--kk-ebony)}
:root .home .kh4-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:grayscale(1) contrast(1.05)}
:root .home .kh4-reel img.is-on{opacity:1}
:root .home .kh4-reel:hover img.is-on{filter:none}
:root .home .kh4-reel .kk-sticker{position:absolute;left:-14%;bottom:-16%;width:clamp(96px,8.6vw,150px);margin:0;transform:rotate(-12deg);grid-column:auto;grid-row:auto}
@media (max-width:760px){
  :root .home .hero-form.kh4 .kh3-lede{grid-column:1/-1}
  :root .home .kh4-reel{grid-column:1/-1;grid-row:auto;margin-top:18px;aspect-ratio:16/10}
  :root .home .kh4-reel .kk-sticker{left:auto;right:-6px;bottom:-24px;width:84px}
  :root .home .hero-form.kh4 .kh3-title .kk-aside{display:none}
}

/* What we do as one sentence: the services are the links; a floating collage follows the cursor over each one */
:root .home .feed-end{display:none}
:root .home .sx{position:relative;margin:var(--sleek-section) 0 0}
:root .home .sx-label{margin:0 0 clamp(18px,2vw,28px);font:600 13px/1.4 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .home .sx-sentence{margin:0;max-width:16em;font:700 clamp(44px,6.4vw,112px)/.98 'Inter KK',sans-serif;letter-spacing:-.055em;color:#5d5955}
:root .home .sx-link{color:var(--kk-gray);text-decoration:none;white-space:nowrap;transition:color .2s}
:root .home .sx-link sup{font-size:.18em;letter-spacing:0;vertical-align:top;position:relative;top:.6em;margin-left:.15em;color:var(--kk-crimson)}
:root .home .sx-link:hover,:root .home .sx-link:focus-visible{color:var(--kk-crimson)}
:root .home .sx-float{position:fixed;left:0;top:0;width:clamp(180px,16vw,260px);aspect-ratio:1;object-fit:cover;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(-4deg);transition:opacity .2s,transform .3s cubic-bezier(.22,1,.36,1);z-index:20}
:root .home .sx-float.is-on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}
@media (hover:none){:root .home .sx-float{display:none}}

/* One character only: the KURO block face (the plate with one 45 degree cut and two eyes). */
:root .kk-face{fill:var(--kk-crimson)}
:root .kk-face .kk-eyes circle{fill:var(--kk-ebony)!important}
:root .site-footer .footer-invitation .kk-card .kk-face{max-width:300px;margin-bottom:8px}
:root .st-hero-right .st-chars.kk-face{max-width:min(440px,70%);margin-bottom:0;fill:var(--kk-ebony)}
:root .st-hero-right .st-chars.kk-face .kk-eyes circle{fill:var(--kk-gray)!important}
:root .home .kh4-chars.kk-face{height:.78em;fill:var(--kk-crimson)}
:root .home .kh4-chars.kk-face .kk-eyes circle{fill:var(--kk-ebony)!important}
:root .home .kk-sticker .kk-eyes circle{fill:var(--kk-gray)!important}
@media (max-width:700px){:root .home .sx-link{white-space:normal}}

/* Images stay in full colour everywhere; hover only lifts the scale */
:root .wg-tile img,:root .home .kh4-reel img,:root .home .kh3-photo img{filter:none!important}

/* ---------- Services page ---------- */
:root .sp{padding:0 var(--pad)}
:root .sp-micro{margin:0;font:600 13px/1.4 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .sp-hero{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);min-height:calc(100svh - 92px);padding:clamp(24px,3vw,48px) 0 clamp(24px,3vw,40px);overflow:hidden}
:root .sp-hero .sp-micro{grid-column:1/-1}
:root .sp-hero h1{grid-column:1/-1;grid-row:2;align-self:end;position:relative;z-index:1;margin:0;font:800 clamp(96px,15.5vw,300px)/.8 'Inter KK',sans-serif;letter-spacing:-.075em;color:var(--kk-crimson)}
:root .sp-hero-art{grid-column:7/-1;grid-row:1/span 3;margin:0;align-self:center;justify-self:end;width:min(46vw,720px)}
:root .sp-hero-art .sp-art{width:100%;height:auto;display:block}
:root .sp-hero-foot{grid-column:1/span 5;grid-row:3;display:grid;gap:18px;margin-top:clamp(20px,2.4vw,36px);position:relative;z-index:1}
:root .sp-hero-foot p{margin:0;font:500 clamp(16px,1.3vw,20px)/1.4 'Inter KK',sans-serif;color:var(--kk-gray)}
:root .sp-btn{justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:14px 20px;background:var(--kk-crimson);color:var(--kk-ebony);font:700 15px/1 'Inter KK',sans-serif;text-decoration:none}
:root .sp-btn .brand-arrow{width:14px;height:14px}
:root .sp-block{padding-top:var(--sleek-section)}
:root .sp-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:18px;margin-bottom:clamp(28px,3vw,48px);align-items:end}
:root .sp-head .sp-micro{grid-column:1/-1}
:root .sp-head h2{grid-column:1/span 7;margin:0;font:800 clamp(44px,6vw,104px)/.9 'Inter KK',sans-serif;letter-spacing:-.06em;color:var(--kk-gray)}
:root .sp-head p:not(.sp-micro){grid-column:9/-1;margin:0;font:400 15px/1.55 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .sp-head-row .sp-more{grid-column:9/-1;justify-self:end;color:var(--kk-gray);font:600 16px/1 'Inter KK',sans-serif;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
:root .sp-head-row .sp-more .brand-arrow{width:14px;height:14px;color:var(--kk-crimson)}
:root .sp-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
:root .sp-offer{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:clamp(320px,30vw,500px);padding:clamp(22px,2.2vw,36px);background:var(--kk-graphite);color:var(--kk-gray)}
:root .sp-offer .sp-art{position:absolute;right:-6%;top:-6%;width:62%;height:auto;transition:transform .6s cubic-bezier(.22,1,.36,1)}
:root .sp-offer:hover .sp-art{transform:rotate(-4deg) scale(1.05)}
:root .sp-a{grid-column:span 7;background:var(--kk-crimson);color:var(--kk-ebony)}
:root .sp-b{grid-column:span 5;background:var(--kk-gray);color:var(--kk-ebony)}
:root .sp-c,:root .sp-d,:root .sp-e{grid-column:span 4;min-height:clamp(300px,26vw,420px)}
:root .sp-c .sp-art,:root .sp-d .sp-art,:root .sp-e .sp-art{width:58%}
:root .sp-n{position:absolute;left:clamp(22px,2.2vw,36px);top:clamp(20px,2vw,32px);font:700 13px/1 'Inter KK',sans-serif}
:root .sp-offer h3{position:relative;margin:0;max-width:12em;font:800 clamp(30px,3.2vw,54px)/.92 'Inter KK',sans-serif;letter-spacing:-.055em}
:root .sp-offer p{position:relative;margin:0;max-width:40ch;font:400 15px/1.5 'Inter KK',sans-serif;opacity:.82}
:root .sp-links{position:relative;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px}
:root .sp-links a{color:inherit;font:700 15px/1.2 'Inter KK',sans-serif;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;display:inline-flex;gap:6px;align-items:center}
:root .sp-links .brand-arrow{width:12px;height:12px}
:root .sp-listen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
:root .sp-listen-art{grid-column:1/span 5;margin:0;background:var(--kk-crimson);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
:root .sp-listen-art .sp-art{width:86%;height:auto;mix-blend-mode:multiply}
:root .sp-listen-copy{grid-column:7/-1;display:grid;gap:20px}
:root .sp-listen-copy h2{margin:0;font:800 clamp(40px,4.8vw,84px)/.92 'Inter KK',sans-serif;letter-spacing:-.06em;color:var(--kk-gray)}
:root .sp-listen-copy>p{margin:0;font:400 15px/1.55 'Inter KK',sans-serif;color:var(--kk-silver);max-width:52ch}
:root .sp-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:22px}
:root .sp-steps li{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:baseline}
:root .sp-steps span{grid-row:span 2;font:800 clamp(48px,5vw,84px)/.8 'Inter KK',sans-serif;letter-spacing:-.06em;color:var(--kk-crimson)}
:root .sp-steps b{font:700 clamp(20px,1.8vw,28px)/1.1 'Inter KK',sans-serif;letter-spacing:-.03em;color:var(--kk-gray)}
:root .sp-steps em{font-style:normal;font:400 15px/1.5 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .sp-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
:root .sp-case{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;color:var(--kk-gray);text-decoration:none;background:var(--kk-graphite)}
:root .sp-case img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
:root .sp-case::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.75),rgba(10,9,8,0) 50%)}
:root .sp-case-meta{position:absolute;left:20px;right:20px;bottom:22px;z-index:1;display:grid;gap:6px}
:root .sp-case-meta b{font:700 clamp(24px,2.2vw,34px)/1 'Inter KK',sans-serif;letter-spacing:-.04em}
:root .sp-case-meta span{font:400 14px/1.4 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .sp-case:hover img{transform:scale(1.04)}
:root .sp-case:hover .wg-bar{transform:scaleX(1)}
:root .sp-sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-bottom:var(--sleek-section)}
:root .sp-sizes article{display:flex;flex-direction:column;gap:12px;min-height:clamp(280px,24vw,380px);padding:clamp(22px,2.2vw,36px);background:var(--kk-graphite);box-shadow:inset 0 -6px 0 var(--kk-crimson)}
:root .sp-size{font:800 clamp(80px,9vw,160px)/.8 'Inter KK',sans-serif;letter-spacing:-.07em;color:var(--kk-crimson)}
:root .sp-sizes h3{margin:auto 0 0;font:700 clamp(26px,2.4vw,38px)/1 'Inter KK',sans-serif;letter-spacing:-.04em;color:var(--kk-gray)}
:root .sp-sizes p{margin:0;font:400 15px/1.5 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .sp-hero .kk-aside{color:var(--kk-silver)}
@media (max-width:900px){
  :root .sp-hero{min-height:0;row-gap:16px}
  :root .sp-hero-art{grid-column:1/-1;grid-row:2;width:100%;justify-self:center}
  :root .sp-hero h1{grid-row:3;font-size:26vw}
  :root .sp-hero-foot{grid-column:1/-1;grid-row:4}
  :root .sp-head h2,:root .sp-head p:not(.sp-micro),:root .sp-head-row .sp-more{grid-column:1/-1;justify-self:start}
  :root .sp-a,:root .sp-b{grid-column:1/-1}
  :root .sp-c,:root .sp-d,:root .sp-e{grid-column:1/-1}
  :root .sp-listen-art,:root .sp-listen-copy{grid-column:1/-1}
  :root .sp-listen-copy{margin-top:28px}
  :root .sp-cases,:root .sp-sizes{grid-template-columns:1fr}
}

:root .site-footer .footer-invitation .kk-card .kk-face{margin-bottom:8px;align-self:end}
:root .site-footer .kk-lock{grid-template-columns:auto auto 1fr}

:root .sp-hero .sp-micro{grid-row:1}
:root .sp-offer{justify-content:flex-start}
:root .sp-offer .sp-art{position:relative;right:auto;top:auto;align-self:flex-end;width:auto;height:clamp(140px,13vw,220px);max-width:60%;object-fit:contain;margin:-8px -8px auto 0}
:root .sp-a .sp-art{height:clamp(170px,16vw,260px)}
:root .sp-c .sp-art,:root .sp-d .sp-art,:root .sp-e .sp-art{width:auto}
:root .sp-case.is-graphic{background:#0152e9}
:root .sp-case.is-graphic img{object-fit:contain;padding:10% 8% 30%}

/* Premium graphite: the footer card gets a soft top-left light, fine grain and a hairline edge instead of a flat fill */
:root .site-footer .footer-invitation .kk-card{background:radial-gradient(120% 140% at 0% 0%,#3a3835 0%,#2a2927 45%,#1d1c1a 100%);box-shadow:inset 0 0 0 1px rgba(233,223,221,.08),inset 0 -8px 0 var(--kk-crimson)}
:root .site-footer .footer-invitation .kk-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root .site-footer .footer-invitation .kk-card>*{position:relative}

/* Graphic covers on the Work grid: their own colour (Aven) or a soft blurred bed of the image itself (Deodar), never grey */
:root .wg-graphic{background:var(--wg-ground)}
:root .wg-graphic a::before{content:"";position:absolute;inset:-10%;background:var(--wg-img) center/cover;filter:blur(28px) saturate(1.1);opacity:.9}
:root .wg-graphic[style*="0152e9"] a::before{display:none}
:root .wg-graphic img{position:relative;object-fit:contain;padding:6% 4% 20%}
:root .wg-graphic a::after{background:linear-gradient(to top,rgba(10,9,8,.45),rgba(10,9,8,0) 30%)}

/* Illustrations sit on a light paper panel, like a poster on the wall */
:root .kk-illus{display:block;width:100%;height:auto}
:root .kk-illus-panel{margin:0;background:var(--kk-gray);padding:clamp(18px,2vw,32px);aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden}
:root .st-principles-wrap{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
:root .st-principles-wrap .kk-illus-panel{grid-column:1/span 3;align-self:start;position:sticky;top:110px}
:root .st-principles-wrap .st-principles{grid-column:4/-1}
@media (max-width:1000px){:root .st-principles-wrap .kk-illus-panel{grid-column:1/-1;position:static;max-width:360px;margin-bottom:32px}:root .st-principles-wrap .st-principles{grid-column:1/-1}}

/* Illustration cards */
:root .kk-card-illus{margin:0}
:root .kk-card-illus svg{display:block;width:100%;height:auto}
:root .st-principles-wrap .kk-card-illus{grid-column:1/span 3;align-self:start;position:sticky;top:110px}
:root .contact-side{display:grid;gap:clamp(28px,3vw,48px);align-content:start}
:root .contact-side .kk-card-illus{max-width:380px;transform:rotate(-2deg)}
:root .empty-state .kk-card-illus{max-width:340px;margin:clamp(24px,3vw,48px) 0 32px;transform:rotate(2deg)}
@media (max-width:1000px){:root .st-principles-wrap .kk-card-illus{grid-column:1/-1;position:static;max-width:340px;margin-bottom:32px}}

:root .empty-state{padding:clamp(32px,4vw,64px) var(--pad) var(--sleek-section)}
:root .empty-state h1{margin:0 0 8px;font:700 clamp(28px,2.6vw,40px)/1 "Inter KK",sans-serif;letter-spacing:-.04em}

/* Light 1, Studio stages: a hanging lamp over the lit stage; its cone lights that numeral, the others wait in the dark */
:root .st-stage-wrap{grid-column:1/-1;position:relative;padding-top:clamp(150px,13vw,210px);--lamp-x:80px}
:root .st-lamp{position:absolute;top:0;left:var(--lamp-x);width:clamp(90px,8vw,130px);transform:translateX(-50%);transition:left .7s cubic-bezier(.22,1,.36,1);pointer-events:none;z-index:1}
:root .st-cord{position:absolute;left:50%;bottom:100%;width:1px;height:200px;background:#3a3835}
:root .st-lamp svg{display:block;width:100%;height:auto;position:relative;z-index:2}
:root .st-cone{position:absolute;left:50%;top:92%;width:340%;height:clamp(260px,24vw,380px);transform:translateX(-50%);background:linear-gradient(to bottom,rgba(255,250,244,.55),rgba(255,250,244,.12) 55%,rgba(255,250,244,0));clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);filter:blur(10px);mix-blend-mode:screen}
:root .st-stages .st-big{color:#1e1d1b!important;transition:color .5s}
:root .st-stages li.is-lit .st-big{color:transparent!important;background:linear-gradient(to bottom,#fffaf4 0%,#c9c2bb 70%,#6a6560 100%);-webkit-background-clip:text;background-clip:text}
:root .st-stages li h3,:root .st-stages li p{transition:opacity .5s}
:root .st-stages li:not(.is-lit) h3,:root .st-stages li:not(.is-lit) p{opacity:.45}
@media (hover:none){:root .st-stages li h3,:root .st-stages li p{opacity:1!important}}


/* Light 3, footer card: a faint crimson glow behind the face */
:root .site-footer .footer-invitation .kk-card::after{content:"";position:absolute;right:4%;bottom:-20%;width:46%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(255,22,39,.28),rgba(255,22,39,0));pointer-events:none;z-index:0}

/* Studio, decluttered: one paragraph in the hero, wider air between sections */
:root .st-desc{grid-template-columns:1fr;max-width:46ch;font-size:16px}
:root .st .st-block{padding-top:clamp(140px,14vw,240px)}
:root .st-principles{row-gap:clamp(48px,5vw,80px)}
:root .st-exp{padding-bottom:0}

:root .site-footer .footer-invitation .kk-card::after{display:none}

/* Minimal expressive type: headlines large and light (Regular), sub-heads Medium; no heavy weights anywhere */
:root .kh3-title,:root .sx-sentence,:root .wg-title,:root .sp-hero h1,:root .sp-head h2,:root .sp-listen-copy h2,:root .st-hero h1,:root .st-block-head h2,:root .st-wall-word,:root .st-big,:root .sp-size,:root .sp-steps span,:root .footer-cta,:root .kk-lock-name,:root .svm-intro h2,:root .kk-film-title,:root .wg-note-big,:root .wx .wx-headline{font-weight:400!important;letter-spacing:-.045em!important}
:root .home .hero-form.kh4 .kh3-title,:root .sp-hero h1,:root .wg-title{letter-spacing:-.055em!important}
:root .sp-offer h3,:root .st-principles h3,:root .st-stages h3,:root .sp-sizes h3,:root .sp-case-meta b,:root .wg-meta b,:root .sp-steps b,:root .svm-tile h3,:root .st-card h3,:root .kk-film-sub,:root .sp-btn,:root .sp-links a,:root .kh3-labels,:root .kk-lock-row,:root .wg-filters button,:root .sx-label{font-weight:500!important}
:root .sp-offer h3,:root .st-principles h3,:root .sp-case-meta b,:root .wg-meta b{letter-spacing:-.03em!important}

/* Studio rules: four tiles, a crimson glyph each, light type */
:root .st-rules{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
:root .st-rules li{position:relative;display:flex;flex-direction:column;gap:12px;min-height:clamp(380px,32vw,500px);padding:clamp(22px,2.2vw,36px);background:#1c1b19;transition:background .4s}
:root .st-rules li:hover{background:#242320}
:root .st-glyph{width:clamp(64px,6vw,96px);height:auto;fill:var(--kk-crimson);margin-bottom:auto;transition:transform .6s cubic-bezier(.22,1,.36,1)}
:root .st-rules li:hover .st-glyph{transform:rotate(-6deg) scale(1.06)}
:root .st-rules .st-n{position:absolute;top:clamp(22px,2.2vw,36px);right:clamp(22px,2.2vw,36px);font:500 13px/1 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .st-rules h3{margin:0;font:400 clamp(26px,2.2vw,36px)/1.05 'Inter KK',sans-serif;letter-spacing:-.035em;color:var(--kk-gray)}
:root .st-rules p{margin:0;font:400 15px/1.55 'Inter KK',sans-serif;color:var(--kk-silver)}
@media (max-width:1000px){:root .st-rules{grid-template-columns:1fr 1fr}}
@media (max-width:600px){:root .st-rules{grid-template-columns:1fr}:root .st-rules li{min-height:300px}}

/* Footer, one band: no box. Big light invitation, the face standing on a full-width crimson line, one quiet row below. */
:root .site-footer{padding-top:var(--sleek-section)}
:root .site-footer .footer-invitation{margin:0 0 clamp(28px,3vw,44px)}
:root .site-footer .footer-invitation .kk-card{background:none!important;box-shadow:none!important;padding:0;min-height:0;border-bottom:6px solid var(--kk-crimson);align-items:end}
:root .site-footer .footer-invitation .kk-card::before,:root .site-footer .footer-invitation .kk-card::after{display:none}
:root .site-footer .footer-invitation .kk-card-copy{padding-bottom:clamp(36px,4vw,64px)}
:root .site-footer .footer-invitation .kk-card .footer-cta{font-size:clamp(64px,10vw,180px)!important;line-height:.9;font-weight:400!important;letter-spacing:-.06em!important}
:root .site-footer .footer-invitation .kk-card .kk-mail{display:none}
:root .site-footer .footer-invitation .kk-card .kk-face{margin:0!important;max-width:clamp(160px,18vw,280px)}
:root .site-footer .kk-foot{grid-template-columns:auto 1fr auto auto;column-gap:clamp(20px,3vw,48px)}
:root .site-footer .kk-foot .footer-wordmark{display:block;width:72px}
:root .site-footer .kk-foot .footer-wordmark svg{width:100%;height:auto}
:root .kk-foot-mail{font:500 15px/1.3 'Inter KK',sans-serif;color:var(--kk-gray);text-decoration:none}
:root .kk-foot-mail:hover{color:var(--kk-crimson)}
@media (max-width:700px){:root .site-footer .kk-foot{grid-template-columns:1fr auto}:root .kk-foot-mail{grid-column:1/-1;grid-row:3}}

/* Line breaks: balanced headings, pretty paragraphs, short CTAs never split */
:root h1,:root h2,:root h3,:root .sx-sentence,:root .kh3-lede{text-wrap:balance}
:root p{text-wrap:pretty}
:root .site-footer .footer-invitation .kk-card .footer-cta{white-space:nowrap;font-size:clamp(48px,8.4vw,150px)!important}
@media (max-width:600px){:root .site-footer .footer-invitation .kk-card .footer-cta{white-space:normal}}

:root .kk-line{display:block;text-wrap:balance}
:root .avx-obj-poster h3{max-width:10ch}
@media (max-width:1100px){:root .st-rules h3{font-size:clamp(22px,2.4vw,30px)}}

/* Services, section by section */
/* 1. hero: the collage overlaps the headline; copy and button sit bottom right */
:root .sp-hero-art{grid-column:5/-1;grid-row:1/span 3;width:min(52vw,820px);margin-right:-2vw;z-index:0}
:root .sp-hero h1{z-index:2;mix-blend-mode:normal}
:root .sp-hero-foot{grid-column:9/-1;grid-row:3;align-self:end;justify-self:end;text-align:left}
/* 2. what we make: the heading is the first tile; 4/8, 6/6, 6/6 rhythm */
:root .sp-bento{gap:8px}
:root .sp-intro{grid-column:span 4;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(4px,.6vw,10px) clamp(8px,1vw,16px) clamp(8px,1vw,16px) 0}
:root .sp-intro h2{margin:0;font:400 clamp(40px,4.6vw,80px)/.95 'Inter KK',sans-serif;letter-spacing:-.05em;color:var(--kk-gray)}
:root .sp-intro p:not(.sp-micro){margin:0;max-width:40ch;font:400 15px/1.55 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .sp-a{grid-column:span 8}
:root .sp-b,:root .sp-c,:root .sp-d,:root .sp-e{grid-column:span 6;min-height:clamp(320px,28vw,460px)}
:root .sp-offer h3{font-weight:400!important}
/* 3. listening: light panel so the collage reads; steps as a clean row */
:root .sp-listen-art{background:var(--kk-gray)}
:root .sp-listen-art .sp-art{mix-blend-mode:normal;width:80%}
:root .sp-steps{grid-template-columns:repeat(3,minmax(0,1fr));display:grid;gap:var(--gap);margin-top:28px}
:root .sp-steps li{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid rgba(233,223,221,.14)}
:root .sp-steps span{font-size:clamp(40px,3.6vw,60px)!important;line-height:.9}
:root .sp-steps b{font-size:clamp(18px,1.5vw,22px)}
/* 4. work: header on one line; 5. sizes: header left, text under */
:root .sp-head-row{grid-template-columns:1fr auto}
:root .sp-head-row h2{grid-column:1}
:root .sp-head-row .sp-more{grid-column:2;grid-row:2}
@media (max-width:900px){
  :root .sp-hero-art{grid-column:1/-1;width:100%;margin:0}
  :root .sp-hero-foot{grid-column:1/-1;justify-self:start}
  :root .sp-intro,:root .sp-a,:root .sp-b,:root .sp-c,:root .sp-d,:root .sp-e{grid-column:1/-1}
  :root .sp-steps{grid-template-columns:1fr}
}

:root .sp-hero-foot{grid-column:1/span 5;justify-self:start}
:root .sp-listen-art .sp-art{mix-blend-mode:multiply}

@media (max-width:900px){:root .sp-hero{grid-template-rows:auto auto auto auto}:root .sp-hero .sp-micro{grid-row:1}:root .sp-hero-art{grid-row:2;grid-column:1/-1;width:100%;margin:0}:root .sp-hero h1{grid-row:3;grid-column:1/-1}:root .sp-hero-foot{grid-row:4;grid-column:1/-1}}

/* Geometric illustrations */
:root .kk-geo{display:block;width:100%;height:auto}
:root .kk-geo *{transform-box:fill-box;transform-origin:center}
:root .sp-offer .kk-geo{position:relative;align-self:flex-end;width:clamp(160px,15vw,240px);margin:-4px -4px auto 0}
:root .sp-a .kk-geo{width:clamp(200px,20vw,320px)}
:root .sp-hero-art .kk-geo{width:100%;max-width:640px;margin-left:auto}
:root .sp-listen-art{background:none;aspect-ratio:auto}
:root .sp-listen-art .kk-geo{width:100%}
@media (prefers-reduced-motion:no-preference){
  :root .geo-spin{animation:geo-spin 6s cubic-bezier(.7,0,.3,1) infinite;transform-origin:center top}
  :root .geo-bob{animation:geo-bob 3.2s ease-in-out infinite alternate}
  :root .geo-grow{animation:geo-grow 3s cubic-bezier(.7,0,.3,1) infinite alternate;transform-origin:left center}
  :root .geo-cursor{animation:geo-cursor 4s cubic-bezier(.7,0,.3,1) infinite}
  :root .geo-pulse{animation:geo-pulse 1.6s ease-in-out infinite alternate}
  :root .geo-b{animation:geo-bounce 1.2s cubic-bezier(.5,0,.5,1) infinite alternate}
  :root .geo-b2{animation-delay:.2s}:root .geo-b3{animation-delay:.4s}
  :root .geo-bar{animation:geo-bar 2.4s cubic-bezier(.7,0,.3,1) infinite alternate;transform-origin:center bottom}
  :root .geo-bar2{animation-delay:.3s}:root .geo-bar3{animation-delay:.6s}
  :root .geo-wave{animation:geo-fade 1.4s ease-in-out infinite}:root .geo-wave2{animation-delay:.35s}
  :root .geo-beat{animation:geo-beat 1.4s ease-in-out infinite}
  :root .geo-dot{animation:geo-dot 1.2s ease-in-out infinite}:root .geo-d2{animation-delay:.2s}:root .geo-d3{animation-delay:.4s}
  :root .geo-ring{animation:geo-fade 1.8s ease-in-out infinite}:root .geo-r2{animation-delay:.3s}:root .geo-r3{animation-delay:.6s}
  :root .geo-pass{animation:geo-pass 7s cubic-bezier(.7,0,.3,1) infinite}
}
@keyframes geo-spin{0%,30%{transform:rotate(0)}50%,80%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes geo-bob{to{transform:translateY(-6px)}}
@keyframes geo-grow{from{transform:scaleX(.35)}to{transform:scaleX(1)}}
@keyframes geo-cursor{0%,15%{transform:translate(0,0)}45%,60%{transform:translate(-14px,-10px)}90%,100%{transform:translate(0,0)}}
@keyframes geo-pulse{to{transform:scale(.86)}}
@keyframes geo-bounce{to{transform:translateY(-20px)}}
@keyframes geo-bar{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@keyframes geo-fade{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes geo-beat{0%,100%{transform:scale(1)}20%{transform:scale(1.14)}40%{transform:scale(1)}}
@keyframes geo-dot{0%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
@keyframes geo-pass{0%,10%{transform:translate(-50px,-50px)}35%,45%{transform:translate(50px,-50px)}70%,80%{transform:translate(50px,50px)}100%{transform:translate(-50px,-50px)}}

/* Glyphs */
:root .kk-glyph{display:block;width:100%;height:auto;fill:var(--kk-crimson)}
:root .kk-ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;max-width:600px;margin-left:auto}
:root .kk-gcell{aspect-ratio:1;background:#1d1c1a;padding:14%;display:grid;place-items:center}
:root .kk-gcell.is-paper{background:var(--kk-gray)}
:root .kk-gcell.is-paper .kk-glyph{fill:var(--kk-ebony)}
:root .sp-hero-art{align-self:center}
:root .st-glyph{fill:var(--kk-crimson)}
:root .kk-gband{overflow:hidden;margin:var(--sleek-section) calc(var(--pad) * -1) 0;padding:28px 0;border-block:1px solid rgba(233,223,221,.08)}
:root .kk-gband-track{display:flex;gap:clamp(28px,3vw,48px);width:max-content}
:root .kk-gband .kk-glyph{width:clamp(48px,4.4vw,72px);flex:none}
:root .kk-gband .kk-glyph:nth-child(3n){fill:var(--kk-gray)}
@media (prefers-reduced-motion:no-preference){
  :root .kk-gcell .kk-glyph{animation:kk-turn 10.8s cubic-bezier(.7,0,.3,1) infinite;animation-delay:calc(var(--i) * 1.2s)}
  :root .kk-gband-track{animation:kk-band 60s linear infinite}
  :root .st-rules li:hover .st-glyph{transform:rotate(90deg)}
}
@keyframes kk-turn{0%,8%{transform:rotate(0)}12%,100%{transform:rotate(90deg)}}
@keyframes kk-band{to{transform:translateX(-50%)}}

:root .st-rules .kk-glyph.st-glyph{width:clamp(64px,6vw,96px);transition:transform .6s cubic-bezier(.22,1,.36,1)}

/* Supporting colours: yellow and blue live in the illustration and glyph layer; crimson stays the lead */
:root .kk-gcell:nth-child(3){background:var(--kk-yellow)}:root .kk-gcell:nth-child(3) .kk-glyph{fill:var(--kk-ebony)}
:root .kk-gcell:nth-child(7){background:var(--kk-blue)}:root .kk-gcell:nth-child(7) .kk-glyph{fill:var(--kk-gray)}
:root .kk-gband .kk-glyph:nth-child(4n+2){fill:var(--kk-yellow)}
:root .kk-gband .kk-glyph:nth-child(5n){fill:var(--kk-blue)}
:root .st-rules li:nth-child(2) .st-glyph{fill:var(--kk-yellow)}
:root .st-rules li:nth-child(3) .st-glyph{fill:var(--kk-blue)}
:root .sp-b{background:var(--kk-blue);color:var(--kk-gray)}
:root .sp-d{background:var(--kk-yellow);color:var(--kk-ebony)}
:root .sp-d p,:root .sp-b p{opacity:.9}
:root .wg-note{background:var(--kk-yellow)!important;box-shadow:none!important}
:root .wg-note-big{color:var(--kk-ebony)!important}
:root .wg-note-big .kk-aside,:root .wg-note-small{color:#3a330f!important}

/* Proof: why this section exists. A plain statement, the companies as a clean grid, then where that experience goes now */
:root .home .kk-proof{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(36px,4vw,64px);padding:var(--sleek-section) 0 0}
:root .home .kk-proof-head{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
:root .home .kk-proof-micro{grid-column:1/span 3;margin:0;font:500 13px/1.4 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .home .kk-proof-head h2{grid-column:4/-1;margin:0;font:400 clamp(40px,5vw,88px)/.95 'Inter KK',sans-serif;letter-spacing:-.05em;color:var(--kk-gray)}
:root .home .kk-proof-logos{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
:root .home .kk-proof-logos li{aspect-ratio:1;display:grid;place-items:center;background:#1c1b19;transition:background .35s}
:root .home .kk-proof-logos li:hover{background:var(--kk-gray)}
:root .home .kk-proof-logos img{height:auto;width:62%;max-height:34%;object-fit:contain;filter:brightness(0) invert(.88);transition:filter .35s}
:root .home .kk-proof-logos li:hover img{filter:none}
:root .home .kk-proof-now{grid-column:4/-1;display:grid;gap:16px}
:root .home .kk-proof-now .kk-proof-micro{grid-column:auto}
:root .home .kk-proof-sectors{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
:root .home .kk-proof-sectors li{padding:10px 16px;border-radius:999px;background:#1c1b19;font:500 clamp(15px,1.2vw,18px)/1 'Inter KK',sans-serif;color:var(--kk-gray)}
:root .home .kk-proof-sectors li:nth-child(3n+1){background:var(--kk-crimson);color:var(--kk-ebony)}
:root .home .kk-proof-sectors li:nth-child(3n+2){background:var(--kk-yellow);color:var(--kk-ebony)}
:root .home .kk-proof-sectors li:nth-child(3n){background:var(--kk-blue);color:var(--kk-gray)}
@media (max-width:900px){:root .home .kk-proof-micro,:root .home .kk-proof-head h2,:root .home .kk-proof-now{grid-column:1/-1}:root .home .kk-proof-head h2{margin-top:14px}:root .home .kk-proof-logos{grid-template-columns:repeat(3,minmax(0,1fr))}}

:root .sp-hero{overflow:visible}
:root .sp-hero-art{width:auto;max-width:560px;margin:0;justify-self:end}
:root .sp-hero-art .kk-ggrid{width:min(40vw,560px)}
@media (max-width:900px){:root .sp-hero-art .kk-ggrid{width:100%}}

:root .home .sx-float{width:clamp(240px,20vw,340px);aspect-ratio:2/1}
:root .home .sx-float>div[hidden]{display:none}

/* Services hero: one crimson mark seen through fluted glass. Thirteen strips each show the same field shifted by a
   different amount, so the dot multiplies across the page: one idea, every expression. The field drifts slowly. */
:root .sp-rf{display:block;min-height:0;padding:0;overflow:visible}
:root .sp-rf-stage{position:relative;height:calc(100svh - 92px - 120px);min-height:460px;margin:0 calc(var(--pad) * -1);background:var(--kk-gray);overflow:hidden;display:grid;place-items:center}
:root .sp-rf-strips{position:absolute;inset:0;display:grid;grid-template-columns:repeat(13,1fr)}
:root .sp-rf-strips i{position:relative;overflow:hidden;display:block}
:root .sp-rf-strips b{position:absolute;top:0;bottom:0;width:calc(100% * 13);left:calc(var(--i) * -100% + var(--d) * 1.6vw);
  background:
    radial-gradient(circle at 50% 50%, var(--kk-crimson) 0 calc(min(26vw,34svh)), transparent calc(min(26vw,34svh) + 1px)),
    radial-gradient(circle at 50% calc(50% - min(58vw,76svh)), var(--kk-crimson) 0 calc(min(26vw,34svh)), transparent calc(min(26vw,34svh) + 1px)),
    radial-gradient(circle at 50% calc(50% + min(58vw,76svh)), var(--kk-crimson) 0 calc(min(26vw,34svh)), transparent calc(min(26vw,34svh) + 1px));}
:root .sp-rf-strips i:nth-child(7) b{filter:blur(6px)}
:root .sp-rf-strips i:nth-child(6) b,:root .sp-rf-strips i:nth-child(8) b{filter:blur(2px)}
:root .sp-rf-stage h1{position:relative;z-index:1;margin:0;font:400 clamp(28px,3vw,48px)/1 'Inter KK',sans-serif!important;letter-spacing:-.02em!important;color:var(--kk-gray);text-transform:none;mix-blend-mode:normal;text-align:center}
:root .sp-rf-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;padding:28px 0 0}
:root .sp-rf-foot .sp-micro{grid-column:1/span 3;align-self:start}
:root .sp-rf-foot .sp-hero-foot{grid-column:5/-1;grid-row:auto;margin:0;display:flex;align-items:center;justify-content:space-between;gap:24px}
:root .sp-rf-foot .sp-hero-foot p{max-width:40ch}
@media (prefers-reduced-motion:no-preference){:root .sp-rf-strips b{animation:sp-drift 9s ease-in-out infinite alternate}}
@keyframes sp-drift{from{transform:translateX(calc(var(--d) * -1.2vw))}to{transform:translateX(calc(var(--d) * 1.2vw))}}
@media (max-width:900px){:root .sp-rf-stage{height:62svh}:root .sp-rf-foot .sp-micro,:root .sp-rf-foot .sp-hero-foot{grid-column:1/-1}:root .sp-rf-foot .sp-hero-foot{flex-direction:column;align-items:flex-start;margin-top:16px}}

:root .sp-rf-strips b{--r:min(13vw,19svh);--gap:calc(var(--r) * 2.18);left:calc(var(--i) * -100% + var(--d) * 4.2vw);
  background:
    radial-gradient(circle at 50% 50%, var(--kk-crimson) 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at 50% calc(50% - var(--gap)), var(--kk-crimson) 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at 50% calc(50% + var(--gap)), var(--kk-crimson) 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at calc(50% - var(--gap)) 50%, var(--kk-crimson) 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at calc(50% + var(--gap)) 50%, var(--kk-crimson) 0 var(--r), transparent calc(var(--r) + 1px))}
:root .sp-rf-strips i:nth-child(odd) b{top:calc(var(--d) * .6svh)}
:root .sp-rf-stage h1{color:var(--kk-ebony)!important;z-index:3;font-size:clamp(22px,2.2vw,36px)!important;font-weight:500!important;letter-spacing:.02em!important;text-transform:uppercase}
@keyframes sp-drift{from{transform:translateX(calc(var(--d) * -1.8vw))}to{transform:translateX(calc(var(--d) * 1.8vw))}}

:root .sp-rf-stage h1{grid-row:1!important;grid-column:1!important;align-self:center!important;justify-self:center;margin:0!important;padding:10px 18px;background:var(--kk-gray);box-shadow:0 0 8px 0 var(--kk-gray),0 0 32px 8px rgba(233,223,221,.8),0 0 128px 32px rgba(233,223,221,.55)}
/* Natural glow (blur 8 / 32 / 128, like light, not a halo): tiles lift with a soft white glow on hover */
:root .wg-tile,:root .sp-offer,:root .st-rules li,:root .sp-case,:root .kk-proof-logos li{transition:box-shadow .6s ease,background .35s}
:root .wg-tile:hover,:root .sp-offer:hover,:root .st-rules li:hover,:root .sp-case:hover,:root .kk-proof-logos li:hover{position:relative;z-index:2;box-shadow:0 0 8px rgba(255,250,244,.10),0 0 32px 8px rgba(255,250,244,.08),0 0 128px 32px rgba(255,250,244,.07)}

/* Services hero, final form: the reference composition. One column of three crimson circles behind fluted glass;
   strips narrow toward the edges and sample the centre column with magnification, the centre strip is soft-focus,
   and the title refracts with the circles. On load the strips slide in from scattered and settle (1.6s). */
:root .sp-rf-stage{--H:max(460px,calc(100svh - 212px));height:var(--H)}
:root .sp-rf-strips{display:grid}
:root .sp-rf-s{position:relative;overflow:hidden;display:block}
:root .sp-rf-s b{position:absolute;top:0;bottom:0;left:var(--l)!important;width:calc(100% / var(--w))!important;filter:none!important;
  --r:calc(var(--H) * .2);--p:calc(var(--H) * .46);
  background:
    radial-gradient(circle at 50% 50%, var(--kk-crimson) 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at 50% calc(50% - var(--p)), var(--kk-crimson) 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at 50% calc(50% + var(--p)), var(--kk-crimson) 0 var(--r), transparent calc(var(--r) + 1px))!important;
  display:grid;place-items:center;animation:none}
:root .sp-rf-s b span{font:500 clamp(13px,1.15vw,18px)/1 'Inter KK',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap}
:root .sp-rf-s.sp-rf-blur b{filter:blur(7px)!important}
:root .sp-rf-s.sp-rf-blur b span{filter:none}
:root .sp-rf-strips i:nth-child(odd) b{top:0!important}
:root .sp-rf-title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0!important;box-shadow:none!important}
@media (prefers-reduced-motion:no-preference){
  :root .sp-rf-s b{animation:sp-settle 1.6s cubic-bezier(.16,1,.3,1) both!important}
}
@keyframes sp-settle{from{transform:translateX(calc(var(--m) * 140vw))}to{transform:none}}

:root .sp-rf-s b{--r:min(calc(var(--H) * .2),20vw);--p:calc(var(--r) * 2.3)}
:root .sp-rf-s.sp-rf-blur b{filter:none!important;background:none!important}
:root .sp-rf-s.sp-rf-blur b::before{content:"";position:absolute;inset:0;filter:blur(8px);
  background:
    radial-gradient(circle at 50% 50%, var(--kk-crimson) 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at 50% calc(50% - var(--p)), var(--kk-crimson) 0 var(--r), transparent calc(var(--r) + 1px)),
    radial-gradient(circle at 50% calc(50% + var(--p)), var(--kk-crimson) 0 var(--r), transparent calc(var(--r) + 1px))}
:root .sp-rf-s b span{position:relative}
@media (max-width:700px){:root .sp-rf-s b span{font-size:10px;letter-spacing:.04em}}

@media (max-width:700px){:root .sp-rf-s:not(.sp-rf-blur) b span{visibility:hidden}:root .sp-rf-s.sp-rf-blur{overflow:visible;z-index:2}:root .sp-rf-s.sp-rf-blur b span{font-size:12px}}
/* Hero keeps moving: the strips sweep through the reference form and out the other side, back and forth, pausing
   briefly on the exact form each pass. */
@media (prefers-reduced-motion:no-preference){
  :root .sp-rf-s b{animation:sp-sweep 3.2s cubic-bezier(.65,0,.35,1) infinite alternate both!important}
}
@keyframes sp-sweep{0%{transform:translateX(calc(var(--m) * 70vw))}42%,58%{transform:none}100%{transform:translateX(calc(var(--m) * -70vw))}}




/* Home hero in the Services language: the words "brands. websites." set huge in crimson on the gray field, seen
   through the same fluted glass (thirteen strips, narrower to the edges, soft centre), sweeping through the
   readable form and out again, nonstop. Labels and lede sit below on the dark band, like Services. */
:root .home .site-header,:root .home .site-header.kh-on{background:var(--kk-ebony)!important}
:root .home .site-header .header-links a,:root .home .site-header .icon-button{color:var(--kk-gray)!important}
:root .home .site-header>.logo{color:var(--kk-crimson)!important}
:root .home .hero-form.kh3{display:flex!important;flex-direction:column;min-height:0!important;padding:0!important;color:var(--kk-gray)!important}
:root .home .hero-form.kh3 .kh3-title{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:root .home .kh4-reel{display:none}
:root .home .kh-rf{order:-1;position:relative;height:max(460px,calc(100svh - 92px - 150px));margin:0 calc(var(--pad) * -1);background:var(--kk-gray);overflow:hidden}
:root .home .kh-rf-strips{position:absolute;inset:0;display:grid}
:root .home .kh-rf-s{position:relative;overflow:hidden;display:block}
:root .home .kh-rf-s b{position:absolute;top:0;bottom:0;left:var(--l);width:calc(100% / var(--w));display:flex;flex-direction:column;justify-content:center;align-items:center;font:400 clamp(80px,15vw,280px)/.86 'Inter KK',sans-serif;letter-spacing:-.06em;color:var(--kk-crimson);white-space:nowrap}
:root .home .kh-rf-s.kh-rf-blur b{filter:blur(6px)}
:root .home .kh3-top{padding:24px 0 clamp(24px,3vw,40px)}
:root .home .kh3-labels,:root .home .kh3-lede{color:var(--kk-gray)!important}
@media (prefers-reduced-motion:no-preference){:root .home .kh-rf-s b{animation:kh-sweep 3.2s cubic-bezier(.65,0,.35,1) infinite alternate both}}
@keyframes kh-sweep{0%{transform:translateX(calc(var(--m) * 70vw))}42%,58%{transform:none}100%{transform:translateX(calc(var(--m) * -70vw))}}
@media (max-width:760px){:root .home .kh-rf{height:60svh}:root .home .kh-rf-s b{font-size:22vw}}

:root .home .kh-rf{margin-top:clamp(20px,2vw,32px)}
:root .home .kh-rf-s b{text-transform:none!important;font-size:clamp(72px,12.5vw,240px)!important;letter-spacing:-.065em}
@keyframes kh-sweep{0%{transform:translateX(calc(var(--m) * 90vw))}40%,60%{transform:none}100%{transform:translateX(calc(var(--m) * -90vw))}}

/* ---------- KURO Flute system (see kk-flute.js for the dials) ---------- */
:root .kf{position:relative;display:grid;overflow:hidden;width:100%;height:100%}
:root .kf>i{position:relative;overflow:hidden;display:block;min-width:0;min-height:0}
:root .kf>i>b{position:absolute;display:grid;place-items:center;font-weight:inherit;white-space:nowrap}
:root .kf[data-axis="x"]>i>b{top:0;bottom:0;left:var(--l);width:calc(100% / var(--w))}
:root .kf[data-axis="y"]>i>b{left:0;right:0;top:var(--l);height:calc(100% / var(--w))}
:root .kf>i.kf-soft>b{filter:blur(6px)}
:root .kf-host{position:relative;display:inline-block;line-height:inherit}
:root .kf-host>.kf{position:absolute;inset:0;overflow:visible}
:root .kf-host>.kf>i{overflow:hidden}
:root .kf-sizer{color:transparent}
:root .kf[data-motion="step"]>i>b{transform:translateX(calc((var(--j) - (var(--n) - 1) / 2) * var(--amp,3.5%)))}
@media (prefers-reduced-motion:no-preference){
  :root .kf[data-motion="sweep"][data-axis="x"]>i>b{animation:kf-sweep-x 3.2s cubic-bezier(.65,0,.35,1) infinite alternate both}
  :root .kf[data-motion="drift"]>i>b{animation:kf-slip 3.6s ease-in-out calc(var(--j) * -.3s) infinite alternate}
  :root .kf[data-motion="pulse"]>i>b{animation:kf-bob 2.8s ease-in-out calc(var(--j) * -.22s) infinite alternate}
  :root a:hover .kf[data-motion="slip"]>i>b,:root a:focus-visible .kf[data-motion="slip"]>i>b{animation:kf-slip 1.4s ease-in-out calc(var(--j) * -.12s) infinite alternate;--amp:5%}
  :root a:hover .kf[data-motion="drift"]>i>b{animation:none;transform:none}
}
@keyframes kf-sweep-x{0%{transform:translateX(calc(var(--m) * 90vw))}40%,60%{transform:none}100%{transform:translateX(calc(var(--m) * -90vw))}}
@keyframes kf-slip{from{transform:translateX(calc(var(--s) * var(--amp,2.5%)))}to{transform:translateX(calc(var(--s) * var(--amp,2.5%) * -1))}}
@keyframes kf-bob{from{transform:none}to{transform:translateY(var(--amp,4%))}}

/* No soft-focus centre strip anywhere */
:root .kf>i.kf-soft>b,:root .sp-rf-s.sp-rf-blur b,:root .sp-rf-s.sp-rf-blur b::before,:root .home .kh-rf-s.kh-rf-blur b{filter:none!important}

/* ---------- Home: the 45 second studio film replaces the glass words ---------- */
:root .home .kh-rf{display:none}
:root .home .kh-film{order:-1;position:relative;margin:clamp(16px,1.6vw,28px) calc(var(--pad) * -1) 0;height:min(56.25vw,calc(100svh - 92px - 28px));min-height:200px;background:var(--kk-ebony);cursor:pointer}
:root .home .kh-film-v{display:block;width:100%;height:100%;object-fit:contain;background:var(--kk-ebony)}
:root .home .kh-film-toggle{position:absolute;left:50%;bottom:clamp(14px,2.4vw,40px);transform:translateX(-50%);padding:9px 16px 10px;border:0;border-radius:999px;background:rgba(19,18,16,.78);color:var(--kk-gray);font:500 13px/1 'Inter KK',sans-serif;letter-spacing:-.005em;cursor:pointer;opacity:0;transition:opacity .25s}
:root .home .kh-film:hover .kh-film-toggle,:root .home .kh-film-toggle:focus-visible,:root .home .kh-film.is-paused .kh-film-toggle{opacity:1}
:root .home .kh-film-toggle:focus-visible{outline:2px solid var(--kk-crimson);outline-offset:3px}
@media (hover:none){:root .home .kh-film-toggle{opacity:1;left:auto;right:12px;bottom:10px;transform:none;padding:7px 12px 8px;font-size:12px}}
/* Phones and portrait tablets: the 4:5 cut of the film (home-journey.js picks it with the same query) */
@media (max-width:899px) and (orientation:portrait){:root .home .kh-film{height:min(125vw,calc(100svh - 92px - 28px))}}
@media (max-width:899px) and (orientation:portrait) and (hover:none){:root .home .kh-film-toggle{left:50%;right:auto;transform:translateX(-50%)}} /* clear of the film's own timecode, bottom right */

/* ---------- Studio: the KURO seal builds with the three stages ---------- */
:root .st-block-head:has(.st-seal) h2{grid-column:4/11}
:root .st-block-head .st-seal{grid-column:11/-1;grid-row:1;justify-self:end;align-self:end;width:clamp(84px,9vw,150px);height:auto;fill:var(--kk-gray)}
@media (max-width:760px){:root .st-block-head:has(.st-seal) h2{grid-column:1/-1}:root .st-block-head .st-seal{grid-column:1/-1;grid-row:auto;justify-self:start;width:88px;margin-top:20px}}

/* ---------- The film's geometry, one idea per place (repeat round) ---------- */
@keyframes kk-quarter{0%,15%{transform:rotate(0)}25%,40%{transform:rotate(90deg)}50%,65%{transform:rotate(180deg)}75%,90%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
@keyframes kk-idea{0%,55%,100%{transform:scale(1)}75%{transform:scale(1.32)}}
@keyframes kk-copy{0%{transform:scale(0)}10%,78%{transform:scale(1)}90%,100%{transform:scale(0)}}
@keyframes kk-flip{0%,40%{transform:scaleX(1)}50%,90%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
/* Home glyph band: every glyph turns a quarter and holds, in a wave along the drifting band, like the film's ticker */
/* Studio non-negotiables: the same four moves as the film's promise cards */
:root .st-rules .st-repeat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12%;width:clamp(64px,6vw,96px)}
:root .st-rules .st-repeat .kk-glyph{display:block;width:100%;height:auto;fill:var(--kk-crimson)}
@media (prefers-reduced-motion:no-preference){
  :root .kk-gband .kk-glyph{animation:kk-quarter 6s cubic-bezier(.65,0,.35,1) infinite}
  :root .kk-gband .kk-glyph:nth-child(4n+2){animation-delay:-1.5s}
  :root .kk-gband .kk-glyph:nth-child(4n+3){animation-delay:-3s}
  :root .kk-gband .kk-glyph:nth-child(4n){animation-delay:-4.5s}
  :root .st-rules li:nth-child(1) .st-glyph circle{transform-box:fill-box;transform-origin:center;animation:kk-idea 3.2s cubic-bezier(.65,0,.35,1) infinite}
  :root .st-rules .st-repeat .kk-glyph{animation:kk-copy 4.8s cubic-bezier(.22,1,.36,1) infinite both;animation-delay:calc(var(--d) * .11s)}
  :root .st-rules li:nth-child(3) .st-glyph{animation:kk-quarter 6s cubic-bezier(.65,0,.35,1) infinite}
  :root .st-rules li:nth-child(4) .st-glyph{animation:kk-flip 4s cubic-bezier(.65,0,.35,1) infinite}
}
/* Services sizes: the seal grows with the engagement. S the idea, M the idea and its language, L the whole system */
:root .sp-sizes article{position:relative}
:root .sp-sizes .sp-seal{position:absolute;top:clamp(22px,2.2vw,36px);right:clamp(22px,2.2vw,36px);width:clamp(56px,5.4vw,92px);height:auto;fill:var(--kk-gray)}
/* Contact: the seal builds as the brief is written (name, email, message), and turns once it is sent */
:root .ct-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:26px}
:root .ct-head .form-heading{margin:0!important}
:root .ct-seal{flex:none;width:clamp(52px,4.6vw,76px);height:auto;fill:var(--kk-gray)}
/* 404: lens band. Lens-shaped slats onto the work, breathing in a wave; the image changes slat by slat */
@property --kk-lh{syntax:'<percentage>';inherits:false;initial-value:38%}
:root .kk-lens{display:block;container-type:inline-size;margin:clamp(48px,6vw,96px) calc(var(--pad) * -1) 0}
:root .kk-lens-band{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));height:36cqw}
:root .kk-lens-band>i{position:relative;display:block;--c:calc((var(--i) + .5) * 100cqw / var(--n));clip-path:ellipse(40% calc(var(--kk-lh) * var(--env)) at 50% 50%)}
:root .kk-lens-band b{position:absolute;inset:0;background-size:100cqw auto;background-repeat:no-repeat;background-position:calc(50cqw / var(--n) - 50cqw - (var(--c) - 50cqw) * var(--k)) 50%;opacity:0}
:root .kk-lens-band b:first-child{opacity:1}
@media (prefers-reduced-motion:no-preference){
  :root .kk-lens-band>i{animation:kk-lens-h 3.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.24s)}
  :root .kk-lens-band b,:root .kk-lens-band b:first-child{animation:kk-lens-img 11s linear infinite;animation-delay:calc(var(--j) * 2.2s - 11s + var(--i) * .035s)}
}
@keyframes kk-lens-h{from{--kk-lh:14%}to{--kk-lh:50%}}
@keyframes kk-lens-img{0%,19%{opacity:1}20%,100%{opacity:0}}

/* ---------- Film scenes: one colour field each, lots of room, the film's micro labels in the corners ---------- */
:root .kk-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:root .kk-scene{position:relative;margin:clamp(120px,12vw,220px) calc(var(--pad) * -1) 0;padding:clamp(120px,12vw,220px) var(--pad) clamp(96px,10vw,180px)}
:root .kk-scene-hud{position:absolute;left:var(--pad);right:var(--pad);top:clamp(24px,2.4vw,40px);display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin:0;font:500 13px/1.4 'Inter KK',sans-serif;letter-spacing:-.005em}
:root .kk-scene-hud .kk-aside{margin:0;font:500 clamp(17px,1.4vw,22px)/1 'KK Hand',cursive;color:inherit;transform:rotate(-4deg)}

/* Home, the before era: paper field, logos given room, sectors as outline chips */
:root .kk-era{background:var(--kk-gray);color:var(--kk-ebony)}
:root .kk-era .kk-scene-hud{color:#6a6360}
:root .kk-era h2{margin:0;max-width:13em;font:400 clamp(36px,4.8vw,84px)/1 'Inter KK',sans-serif!important;letter-spacing:-.05em!important;color:var(--kk-ebony)}
:root .kk-era-logos{list-style:none;margin:clamp(88px,9vw,168px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(56px,6vw,112px);align-items:center}
:root .kk-era-logos li{display:flex;align-items:center;min-height:52px}
:root .kk-era-logos img{display:block;width:auto;max-width:100%;height:calc(clamp(26px,2.4vw,40px) * var(--o,1));filter:brightness(0);opacity:.86;transition:filter .3s,opacity .3s}
:root .kk-era-logos img[src*="deloitte"]{--o:.82}:root .kk-era-logos img[src*="sanofi"]{--o:.86}:root .kk-era-logos img[src*="accenture"]{--o:.92}
:root .kk-era-logos img[src*="zs."]{--o:1.45}:root .kk-era-logos img[src*="lilly"]{--o:1.35}:root .kk-era-logos img[src*="takeda"]{--o:1.15}:root .kk-era-logos img[src*="pfizer"]{--o:1.25}:root .kk-era-logos img[src*="google"]{--o:1.05}
:root .kk-era-logos li:hover img{filter:none;opacity:1}
:root .kk-era-now{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(96px,10vw,180px)}
:root .kk-era-now p{margin:0;font:500 13px/1.4 'Inter KK',sans-serif;color:#6a6360}
:root .kk-era-sectors{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
:root .kk-era-sectors li{padding:9px 18px 10px;border:1.5px solid currentColor;border-radius:999px;font:500 clamp(14px,1.1vw,17px)/1 'Inter KK',sans-serif;letter-spacing:-.01em}
@media (max-width:700px){:root .kk-era-logos{grid-template-columns:repeat(2,minmax(0,1fr))}:root .kk-era-logos img{height:calc(20px * var(--o,1))}}

/* Home, what we do: blue field. "we do" stays, the service changes through the glass strips, four doors, the glyph ticker */
:root .home .sx{display:none}
:root .kk-do{background:var(--kk-blue);color:var(--kk-gray);overflow:hidden;padding-bottom:0}
:root .kk-do .kk-scene-hud{color:var(--kk-gray)}
:root .kk-do-line{margin:0;display:flex;flex-direction:column;align-items:flex-start;font:400 clamp(40px,6.2vw,112px)/1 'Inter KK',sans-serif;letter-spacing:-.05em}
:root .kk-do-we{color:var(--kk-ebony)}
:root .kk-do-word{display:inline-grid;line-height:1.18;color:var(--kk-gray)}
:root .kk-do-word>*{grid-area:1/1}
:root .kk-do-size{visibility:hidden;white-space:nowrap}
:root .kk-cyc{display:block;width:100%;height:100%}
:root .kk-cyc .kf>i>b{justify-items:start}
:root .kk-do-doors{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(64px,7vw,128px)}
:root .kk-do-doors a{display:inline-flex;align-items:baseline;gap:.7em;padding:12px 22px 13px;border:1.5px solid var(--kk-gray);border-radius:999px;color:var(--kk-gray);text-decoration:none;font:500 clamp(15px,1.25vw,19px)/1 'Inter KK',sans-serif;letter-spacing:-.01em;transition:background .25s,color .25s}
:root .kk-do-doors a span{font-size:.72em;color:var(--kk-yellow);transition:color .25s}
:root .kk-do-doors a:hover,:root .kk-do-doors a:focus-visible{background:var(--kk-gray);color:var(--kk-blue)}
:root .kk-do-doors a:hover span,:root .kk-do-doors a:focus-visible span{color:var(--kk-blue)}
:root .kk-do-tick{margin:clamp(96px,10vw,180px) calc(var(--pad) * -1) 0;padding:0 0 clamp(36px,4vw,64px);overflow:hidden}
:root .kk-do-tick>div{display:flex;gap:clamp(28px,3vw,48px);width:max-content}
:root .kk-do-tick svg{display:block;flex:none;width:clamp(44px,4vw,68px);height:auto;fill:var(--kk-gray)}
:root .kk-do-tick svg.is-y{fill:var(--kk-yellow)}
@media (max-width:700px){:root .kk-do-line{font-size:clamp(28px,7.4vw,48px)}}
@media (prefers-reduced-motion:no-preference){
  :root .kk-cyc .kf>i>b{animation:kk-swap 10s infinite both;animation-delay:calc(var(--k) * 2.5s - 10s + var(--j) * .018s)}
  :root .kk-do-tick>div{animation:kk-band 60s linear infinite}
  :root .kk-do-tick svg{animation:kk-quarter 6s cubic-bezier(.65,0,.35,1) infinite}
  :root .kk-do-tick svg:nth-child(4n+2){animation-delay:-1.5s}
  :root .kk-do-tick svg:nth-child(4n+3){animation-delay:-3s}
  :root .kk-do-tick svg:nth-child(4n){animation-delay:-4.5s}
}
@media (prefers-reduced-motion:reduce){:root .kk-cyc:not([style*="--k:0"]){display:none}}
@keyframes kk-swap{
  0%{transform:translateX(calc((var(--m) + .5) * 60vw + 70vw));animation-timing-function:cubic-bezier(.16,1,.3,1)}
  8%,21%{transform:none;animation-timing-function:cubic-bezier(.7,0,.84,0)}
  25%,100%{transform:translateY(calc(var(--s) * 120%))}
}

/* Footer: the film's end card. Big crimson line, the email, the seal breathing; the letters slice on hover */
:root .site-footer .footer-invitation{margin:0 0 clamp(28px,3vw,44px)}
:root .site-footer .footer-invitation .kk-end{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gap);align-items:end;padding:clamp(96px,11vw,200px) 0 clamp(56px,6vw,104px)}
:root .kk-end .kk-scene-hud{left:0;right:0;top:0;color:var(--kk-silver)}
:root .kk-end-cta{grid-column:1;justify-self:start;color:var(--kk-crimson);text-decoration:none;font:400 clamp(60px,10vw,184px)/1.1 'Inter KK',sans-serif!important;letter-spacing:-.06em!important;white-space:nowrap}
:root .kk-end-line{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin:clamp(18px,2vw,32px) 0 0}
:root .kk-end-mail{font:400 clamp(20px,2vw,32px)/1.2 'Inter KK',sans-serif;letter-spacing:-.025em;color:var(--kk-gray);text-decoration:none;border-bottom:1px solid rgba(233,223,221,.35)}
:root .kk-end-mail:hover,:root .kk-end-mail:focus-visible{border-bottom-color:var(--kk-gray)}
:root .kk-end-note{font:500 clamp(22px,2vw,34px)/1 'KK Hand',cursive;font-style:normal;color:var(--kk-yellow);transform:rotate(-4deg)}
:root .kk-end-seal{grid-column:2;grid-row:1/span 2;align-self:end;width:clamp(110px,14vw,250px);height:auto;fill:var(--kk-gray)}
@media (max-width:700px){:root .site-footer .footer-invitation .kk-end{grid-template-columns:1fr}:root .kk-end-seal{grid-column:1;grid-row:auto;width:104px;margin-top:48px}:root .kk-end-cta{white-space:normal;font-size:15.5vw!important}}
@media (prefers-reduced-motion:no-preference){:root .kk-end-cta:hover .kf>i>b,:root .kk-end-cta:focus-visible .kf>i>b{animation:kk-doop .9s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--j) * .018s)}}
@keyframes kk-doop{0%{transform:none}35%{transform:translateY(calc(var(--s) * 22%))}70%{transform:translateY(calc(var(--s) * -6%))}100%{transform:none}}

/* Studio hero: the seal behind tapered glass. It slices like the film's letters and turns in 45 degree steps */
:root .st-hero-right{position:relative;display:block!important;padding:0!important;overflow:hidden}
:root .st-hero-right .st-glass{position:absolute;inset:0}
:root .st-glass .kk-seal-glass{width:min(72%,62svh);height:auto;fill:var(--kk-ebony)}
:root .st-glass-key{position:absolute;left:clamp(20px,2.4vw,40px);right:clamp(20px,2.4vw,40px);bottom:clamp(18px,2vw,32px);z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;margin:0;font:500 13px/1.4 'Inter KK',sans-serif;color:var(--kk-ebony)}
@media (max-width:760px){:root .st-hero-right{min-height:min(112vw,540px)!important}}
@media (prefers-reduced-motion:no-preference){
  :root .st-glass>i>b{animation:st-slice 7s cubic-bezier(.65,0,.35,1) infinite;animation-delay:calc(var(--j) * .03s)}
  :root .st-glass .kk-seal-glass{animation:st-turn 7s cubic-bezier(.65,0,.35,1) infinite}
}
@keyframes st-slice{0%,38%{transform:none}45%{transform:translateY(calc(var(--s) * var(--a)))}53%,88%{transform:none}95%{transform:translateY(calc(var(--s) * var(--a) * -1))}100%{transform:none}}
@keyframes st-turn{0%,40%{transform:rotate(0)}52%,90%{transform:rotate(45deg)}100%{transform:rotate(90deg)}}

/* the glass strips are <i> elements: never let them slant the type */
:root .kf>i{font-style:normal}

/* ---------- Home scroll film: scroll is the playhead (kk-scrollfilm.js sets --p, --e, --x) ---------- */
:root .home .kh-track,:root .home .kh-stage{position:relative}
:root .home .kh-rows{display:none}
:root .kh-lede-stage{display:contents}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  /* 1. the film starts full screen, then shrinks into a cut-corner window while two rows of words run behind it */
  :root .home .kh-track{height:270svh;margin:0 calc(var(--pad) * -1);--k:clamp(0,var(--p,0) * 2.3,1);--ks:calc(var(--k) * var(--k) * (3 - 2 * var(--k)))}
  :root .home .kh-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--kk-ebony)}
  :root .home .kh-track .kh-film{position:absolute;left:50%;top:50%;width:100vw;height:56.25vw;min-height:0;margin:0;z-index:2;transform:translate(-50%,-50%) scale(calc(var(--s0,1) + (.5 - var(--s0,1)) * var(--ks)));clip-path:polygon(calc(var(--ks) * 7vw) 0,100% 0,100% calc(100% - var(--ks) * 7vw),calc(100% - var(--ks) * 7vw) 100%,0 100%,0 calc(var(--ks) * 7vw))}
  :root .home .kh-track .kh-film-v{object-fit:contain}
  :root .home .kh-rows{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
  :root .home .kh-row{position:absolute;left:0;margin:0;white-space:nowrap;text-transform:none!important;font:400 clamp(96px,13.5vw,260px)/.9 'Inter KK',sans-serif;letter-spacing:-.055em;opacity:var(--ks);will-change:transform}
  :root .home .kh-row-a{top:13%;color:var(--kk-gray);transform:translateX(calc(-8vw - var(--p,0) * 80vw))}
  :root .home .kh-row-b{bottom:13%;color:var(--kk-crimson);transform:translateX(calc(-150vw + var(--p,0) * 80vw))}
  /* 2. the statement: each word lights as the playhead reaches it */
  :root .home .kh-lede-track{display:block!important;height:230svh;padding:0!important}
  :root .home .kh-lede-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,2.4vw,40px)}
  :root .home .kh-lede-track .kh3-lede{grid-column:auto!important;max-width:19ch!important;margin:0;font:400 clamp(44px,5.4vw,104px)/1.02 'Inter KK',sans-serif!important;letter-spacing:-.045em!important;color:var(--kk-gray)}
  :root .home .kh-w{opacity:calc(.13 + .87 * clamp(0,(var(--p,1) * 1.3 - .08) * var(--n,1) - var(--i,0),1))}
}

/* 3. glass-line reveals: strips slide into place as a block arrives (falls back to finished) */
:root .sf-doop .kf-host{display:block;width:max-content;max-width:100%}
@media (prefers-reduced-motion:no-preference){
  :root [data-sf] .sf-doop .kf>i>b,:root [data-sf].sf-doop .kf>i>b,:root [data-sf] .kf-host .kf>i>b{--q:clamp(0,var(--e,1) * 1.7 - .3,1);transform:translateY(calc(var(--s) * (1 - var(--q)) * (1 - var(--q)) * (105% + mod(var(--j) * 7, 5) * 24%)))}
  :root [data-sf] .kk-era-logos li,:root [data-sf] .kk-era-now,:root [data-sf] .kk-do-doors a,:root [data-sf] .kk-end-line,:root [data-sf] .kk-scene-hud{--q:clamp(0,var(--e,1) * 1.9 - .55 - var(--i,0) * .06,1);opacity:var(--q);transform:translateY(calc((1 - var(--q)) * 44px))}
  :root [data-sf] .kk-do-line{--q:clamp(0,var(--e,1) * 1.8 - .35,1);opacity:var(--q);transform:translateY(calc((1 - var(--q)) * 64px))}
}

/* ---------- Services: five film scenes, one colour field each, one moving figure that says the service ---------- */
:root .sv-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin:0 0 clamp(56px,6vw,104px)}
:root .sv-intro .sp-micro{grid-column:1/-1;margin:0 0 clamp(18px,2vw,28px)}
:root .sv-intro h2{grid-column:1/span 6;margin:0;font:400 clamp(32px,3.6vw,64px)/1 'Inter KK',sans-serif;letter-spacing:-.045em;color:var(--kk-gray)}
:root .sv-intro p:not(.sp-micro){grid-column:8/-1;margin:0;max-width:44ch;font:400 16px/1.6 'Inter KK',sans-serif;color:var(--kk-silver)}
:root .sv{display:grid;gap:10px}
:root .sv-scene{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;min-height:clamp(420px,40vw,660px);padding:clamp(40px,5vw,96px) clamp(28px,4.4vw,80px)}
:root .sv-copy{grid-column:1/span 5;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.4vw,22px)}
:root .sv-fig{grid-column:7/-1;grid-row:1;display:grid;place-items:center;min-height:clamp(240px,26vw,460px)}
:root .sv-scene:nth-child(even) .sv-copy{grid-column:8/-1}
:root .sv-scene:nth-child(even) .sv-fig{grid-column:1/span 6}
:root .sv-n{font:500 13px/1 'Inter KK',sans-serif;letter-spacing:0;opacity:.75}
:root .sv-scene h3{margin:0;max-width:11em;font:400 clamp(30px,3.2vw,56px)/1 'Inter KK',sans-serif!important;letter-spacing:-.045em!important}
:root .sv-scene p{margin:0;max-width:38ch;font:400 clamp(15px,1.1vw,17px)/1.55 'Inter KK',sans-serif;opacity:.86}
:root .sv-doors{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(6px,1vw,14px)}
:root .sv-doors a{padding:10px 18px 11px;border:1.5px solid currentColor;border-radius:999px;color:inherit;text-decoration:none;font:500 14px/1 'Inter KK',sans-serif;letter-spacing:-.005em;transition:background .25s,color .25s}
:root .sv-a{background:var(--kk-crimson);color:var(--kk-ebony)}
:root .sv-b{background:var(--kk-blue);color:var(--kk-gray)}
:root .sv-c{background:#1c1b19;color:var(--kk-gray)}
:root .sv-d{background:var(--kk-yellow);color:var(--kk-ebony)}
:root .sv-e{background:var(--kk-gray);color:var(--kk-ebony)}
:root .sv-a .sv-doors a:hover,:root .sv-d .sv-doors a:hover,:root .sv-e .sv-doors a:hover{background:var(--kk-ebony);color:var(--kk-gray);border-color:var(--kk-ebony)}
:root .sv-b .sv-doors a:hover,:root .sv-c .sv-doors a:hover{background:var(--kk-gray);color:var(--kk-ebony);border-color:var(--kk-gray)}
/* 01 the mark builds: idea, language, rings (kk-seal data-cycle) */
:root .sv-seal{width:min(78%,360px);height:auto;fill:var(--kk-ebony)}
/* 02 a site frame draws itself, then its blocks assemble */
:root .sv-build{width:min(92%,520px);height:auto;overflow:visible}
:root .sv-frame{fill:none;stroke:var(--kk-gray);stroke-width:4;stroke-dasharray:1;stroke-dashoffset:0}
:root .sv-dot{fill:var(--kk-gray)}
:root .sv-blk{transform-box:fill-box;transform-origin:left center}
:root .svb-g{fill:var(--kk-gray)}:root .svb-y{fill:var(--kk-yellow)}:root .svb-c{fill:var(--kk-crimson)}:root .svb-e{fill:var(--kk-ebony)}
/* 03 the work through lens slats */
:root .sv-fig .kk-lens{width:100%;margin:0}
:root .sv-fig .kk-lens-band{height:62cqw}
/* 04 pages deal off the stack */
:root .sv-deck{position:relative;width:min(80%,440px);aspect-ratio:16/10}
:root .sv-deck i{position:absolute;inset:0;background:var(--kk-ebony);clip-path:polygon(9% 0,100% 0,100% 100%,0 100%,0 14.4%)}
:root .sv-deck b{position:absolute;left:12%;top:16%;width:38%;height:7%;background:var(--kk-gray)}
:root .sv-deck u{position:absolute;right:10%;top:16%;width:16%;aspect-ratio:1;border-radius:50%;background:var(--kk-crimson)}
:root .sv-deck s{position:absolute;left:12%;right:30%;bottom:16%;height:22%;background:repeating-linear-gradient(to bottom,var(--kk-silver) 0 14%,transparent 14% 38%);opacity:.6}
:root .sv-deck i:nth-child(1){transform:translate(28px,-28px) scale(.92);background:#3a3835}
:root .sv-deck i:nth-child(2){transform:translate(14px,-14px) scale(.96);background:#262523}
/* 05 one mark, every format */
:root .sv-formats{display:flex;align-items:flex-end;justify-content:center;flex-wrap:nowrap;gap:clamp(10px,1.2vw,18px);width:100%}
:root .sv-formats i{display:grid;place-items:center;flex:none;aspect-ratio:var(--r);height:clamp(54px,5.6vw,104px);background:var(--kk-ebony)}
:root .sv-formats i:nth-child(2){height:clamp(96px,10vw,186px)}
:root .sv-formats i:nth-child(3){height:clamp(44px,4.6vw,86px)}
:root .sv-formats i:nth-child(4){background:var(--kk-crimson)}
:root .sv-formats .kk-glyph{width:clamp(20px,2.2vw,40px);height:auto;fill:var(--kk-crimson)}
:root .sv-formats i:nth-child(4) .kk-glyph{fill:var(--kk-ebony)}
@media (prefers-reduced-motion:no-preference){
  :root .sv-frame{animation:sv-draw 6s cubic-bezier(.65,0,.35,1) infinite}
  :root .sv-blk,:root .sv-dot{animation:sv-blk 6s cubic-bezier(.22,1,.36,1) infinite;animation-delay:calc(var(--d) * .14s)}
  :root .sv-deck i{animation:sv-deal 6s cubic-bezier(.65,0,.35,1) infinite;animation-delay:calc(var(--d) * -2s)}
  :root .sv-formats i{animation:kk-copy 5.2s cubic-bezier(.22,1,.36,1) infinite both;animation-delay:calc(var(--d) * .16s)}
}
@keyframes sv-draw{0%{stroke-dashoffset:1}18%,82%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
@keyframes sv-blk{0%,16%{transform:scale(0)}28%,80%{transform:scale(1)}92%,100%{transform:scale(0)}}
@keyframes sv-deal{0%{transform:translate(28px,-28px) scale(.92);background:#3a3835;opacity:1;z-index:1}30%{transform:translate(14px,-14px) scale(.96);background:#262523;z-index:2}60%,78%{transform:none;background:var(--kk-ebony);opacity:1;z-index:3}92%{transform:translate(-46%,12%) rotate(-12deg);opacity:0;z-index:3}93%{transform:translate(28px,-28px) scale(.92);background:#3a3835;opacity:0;z-index:1}100%{transform:translate(28px,-28px) scale(.92);background:#3a3835;opacity:1;z-index:1}}
@media (max-width:900px){
  :root .sv-intro h2,:root .sv-intro p:not(.sp-micro){grid-column:1/-1}
  :root .sv-intro p:not(.sp-micro){margin-top:20px}
  :root .sv-scene{min-height:0;row-gap:clamp(36px,8vw,56px)}
  :root .sv-copy,:root .sv-scene:nth-child(even) .sv-copy{grid-column:1/-1;grid-row:1}
  :root .sv-fig,:root .sv-scene:nth-child(even) .sv-fig{grid-column:1/-1;grid-row:2;min-height:220px}
}

/* ---------- Calmer type, more white space (sitewide) ----------
   Studio pages get explicit smaller sizes. Project stories and service pages scale every narrative headline by the
   same factor, so each keeps its own hierarchy; poster typography that is the artwork keeps its size. */
:root .home .kh-lede-track .kh3-lede{font-size:clamp(34px,3.8vw,64px)!important}
:root .home .kh-row{font-size:clamp(72px,10vw,190px)}
:root .kk-era h2{font-size:clamp(28px,3.2vw,54px)!important}
:root .kk-do-line{font-size:clamp(30px,4vw,68px)}
:root .kk-end-cta{font-size:clamp(44px,6vw,100px)!important}
:root .st-hero h1{font-size:clamp(40px,4.6vw,78px)!important}
:root .st-block-head h2{font-size:clamp(30px,3.4vw,58px)!important}
:root .st-big{font-size:clamp(72px,8vw,136px)!important}
:root .sp-listen-copy h2,:root .sp-head h2{font-size:clamp(30px,3.4vw,58px)!important}
:root .sp-size{font-size:clamp(56px,5.6vw,96px)!important}
:root .contact-page h1{font-size:clamp(52px,6.4vw,108px)!important}
:root main.svc-page :is(h1,h2){zoom:.72}
:root body.themed-project main :is(h1,h2):not(.pkin-word){zoom:.72}
:root body.themed-project main h3{zoom:.8}
:root body.themed-project main :is(.pr-route-poster,.pa-billboard-copy,.pr-reaction-copy) h3{zoom:1}
:root body.themed-project main :is(.sc-next a,.avx-next b,.elx-editorial-note p){zoom:.72}
@media (max-width:700px){:root body.themed-project main :is(h1,h2):not(.pkin-word),:root main.svc-page :is(h1,h2){zoom:.86}}
/* glass lines settle well before a block reaches the top of the screen */
@media (prefers-reduced-motion:no-preference){
  :root [data-sf] .sf-doop .kf>i>b,:root [data-sf].sf-doop .kf>i>b,:root [data-sf] .kf-host .kf>i>b{--q:clamp(0,var(--e,1) * 2.3 - .35,1)}
}