/* Kingdom shared components. Replaces the previous scattered preview, work and comparison rules. */
.kf-site .kf-work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.kf-site .kf-project{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--kk-line);border-radius:8px;background:var(--kk-card);color:var(--kk-ink);box-shadow:none;transition:border-color .2s,transform .2s}
.kf-site .kf-project:hover{border-color:var(--kk-muted);transform:translateY(-3px)}
.kf-site .kf-project[hidden]{display:none}
.kf-site .kf-project-screen{height:300px;overflow:hidden;background:var(--kk-soft);border-bottom:1px solid var(--kk-line)}
.kf-site .kf-project-screen img{display:block;width:100%;height:auto;max-width:none;transition:transform 4s ease-in-out;filter:none}
.kf-site .kf-project:hover .kf-project-screen img,.kf-site .kf-project:focus-visible .kf-project-screen img{transform:translateY(var(--kf-pan,0px))}
.kf-site .kf-project-screen.kk-work-preview img{transform:none;animation:none}
.kf-site .kf-project-body{display:flex;flex-direction:column;flex:1;padding:26px}
.kf-site .kf-project-body .kf-label{font-size:10px!important;letter-spacing:.08em;margin:0 0 12px!important}
.kf-site .kf-project h3{display:flex;align-items:start;justify-content:space-between;gap:15px;font-size:25px;line-height:1.15;letter-spacing:-.025em;margin:0;color:var(--kk-ink)}
.kf-site .kf-project h3 b{font-size:20px;color:var(--kf-red);font-weight:400;flex-shrink:0}
.kf-site .kf-project p{color:var(--kk-muted);font-size:13px;line-height:1.7;margin:12px 0 22px}
.kf-site .kf-project small{display:block;margin-top:auto;padding-top:17px;border-top:1px solid var(--kk-line);color:var(--kk-muted);font-size:11px;line-height:1.7}
/* £100 is a restrained choice card, with complete foreground/background pairs in either theme. */
.kf-site .kk-reference-preview{padding-block:64px;background:var(--kk-soft);color:var(--kk-ink);border-radius:0;box-shadow:none;margin-top:0}
.kf-site .kk-reference-preview .kf-wrap:before{display:none}
.kk-preview-inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:80px;align-items:center}
.kf-site .kk-reference-preview h2{font-size:clamp(32px,3.7vw,48px);line-height:1.08;letter-spacing:-.035em;margin:0 0 22px;color:var(--kk-ink)}
.kk-reference-preview h2 span{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;color:var(--kk-ink)}
.kf-site .kk-preview-inner>div>p:not(.kf-label){font-size:15px;line-height:1.8;max-width:580px;margin:0;color:var(--kk-muted)}
.kf-site .kk-preview-inner .kk-preview-inspiration{margin-top:20px;padding:0;background:none;border:0;font-size:13px}
.kk-preview-steps{list-style:none;counter-reset:preview;padding:0;margin:28px 0 0;display:grid;gap:18px}
.kk-preview-steps li{counter-increment:preview;position:relative;padding-left:35px}
.kk-preview-steps li:before{content:counter(preview);position:absolute;top:0;left:0;width:23px;height:23px;display:grid;place-items:center;border:1px solid var(--kk-line);border-radius:50%;font-size:10px;font-weight:700;color:var(--kk-ink)}
.kk-preview-steps strong{display:block;font-size:13px;line-height:1.5;color:var(--kk-ink)}
.kk-preview-steps span{display:block;margin-top:5px;color:var(--kk-muted);font-size:12px;line-height:1.7}
.kf-site .kk-preview-choice{padding:30px;border:1px solid var(--kk-line);border-top:3px solid var(--kk-ink);border-radius:6px;background:var(--kk-card);color:var(--kk-ink);box-shadow:none;text-align:left;width:100%;max-width:470px}
.kf-site .kk-preview-choice .kf-label{color:var(--kf-red)}
.kf-site .kk-preview-choice .kk-preview-price{display:block;margin:22px 0 12px;color:var(--kk-ink)}
.kf-site .kk-preview-price strong{font:600 46px/1 Outfit,sans-serif;letter-spacing:-.04em;color:var(--kk-ink)}
.kf-site .kk-preview-choice .kk-preview-credit{font-size:14px;line-height:1.7;color:var(--kk-muted);margin:0 0 26px}
.kf-site .kk-preview-choice .kk-preview-link{display:flex;justify-content:space-between;align-items:center;gap:15px;width:100%;padding:15px 17px;border-radius:4px;background:var(--kk-ink);color:var(--kk-bg);font-size:13px;font-weight:700;border:1px solid var(--kk-ink)}
.kf-site .kk-preview-choice .kk-preview-link:hover{background:var(--kf-red);color:#fff;border-color:var(--kf-red)}
.kf-site .kk-preview-choice>small{display:block;margin-top:16px;font-size:11px;line-height:1.8;color:var(--kk-muted)}
.kf-site .kk-preview-choice .kk-preview-package{display:inline-block;margin-top:20px;padding-bottom:4px;font-size:12px;color:var(--kk-ink);border-bottom:1px solid var(--kk-line)}
/* Stationary, full-width source images. Only the reveal divider moves. */
.kf-site .kk-comparison{width:100%;min-width:0;padding:20px;background:#181818;color:#fff;border:1px solid #ffffff24;border-radius:8px;overflow:hidden;box-shadow:none;filter:none;backdrop-filter:none}
.kk-compare-project{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:18px;font-size:11px}
.kk-compare-project>span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#f05b66;font-weight:700}
.kk-compare-project strong{font-size:11px;color:#fff}
.kf-site .kk-comparison .kf-browser-bar{background:#eee;color:#555;padding:12px 14px;border:0;border-radius:5px 5px 0 0;font-size:10px}
.kk-browser-dots{display:flex;align-items:center;gap:4px}.kk-browser-dots i{width:5px;height:5px;border-radius:50%;background:#aaa}
.kf-site .kk-comparison .kk-compare-viewport{position:relative;height:360px;overflow:hidden;isolation:isolate;background:#fff;border-radius:0 0 5px 5px}
.kk-compare-layer{position:absolute;inset:0;overflow:hidden;background:#fff}
.kk-compare-before{clip-path:inset(0 calc(100% - var(--kk-split)) 0 0);z-index:1}
.kf-site .kk-compare-layer img{display:block;position:static;width:100%;height:auto;max-width:none;max-height:none;object-fit:initial;object-position:top;transform:none!important;animation:none!important;filter:none!important;will-change:auto}
.kk-compare-label{position:absolute;top:12px;z-index:3;font-size:9px;font-weight:700;letter-spacing:.05em;background:#111;color:#fff;padding:6px 8px;border-radius:3px;pointer-events:none}
.kk-compare-label-before{left:12px}.kk-compare-label-after{right:12px;background:var(--kf-red)}
.kk-compare-divider{position:absolute;inset-block:0;left:var(--kk-split);width:2px;background:#fff;z-index:3;pointer-events:none;box-shadow:0 0 6px #0006}
.kk-compare-divider>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:42px;border:2px solid #fff;border-radius:50%;background:var(--kf-red);color:#fff}
.kk-compare-divider svg{width:28px;height:21px}
.kf-site input.kk-compare-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.kk-compare-viewport:focus-within{outline:3px solid var(--kf-red);outline-offset:-3px}
.kk-compare-controls{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 0;color:#d2d2d2}
.kf-site .kk-compare-controls p{font-size:10px;line-height:1.6;margin:0;color:#d2d2d2}
.kk-compare-pause{font:600 10px/1.5 Manrope,sans-serif;background:transparent;color:#fff;border:1px solid #ffffff45;border-radius:4px;padding:8px 10px;min-height:34px;cursor:pointer;white-space:nowrap}
.kk-compare-pause[hidden]{display:none}
.kk-compare-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #ffffff25;border-radius:4px;overflow:hidden}
.kk-compare-facts>div{padding:16px 8px;text-align:center}.kk-compare-facts>div+div{border-left:1px solid #ffffff25}
.kk-compare-facts strong{display:block;color:#fff;font:600 18px/1.2 Outfit,sans-serif}.kk-compare-facts span{display:block;margin-top:7px;font-size:10px;line-height:1.6;color:#c2c2c2}
.kf-site .kk-comparison .kf-scan-footer{padding:17px 0 0;background:transparent;gap:12px;font-size:10px;color:#c2c2c2}.kf-site .kk-comparison .kf-scan-footer>span{color:#c2c2c2}
.kk-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.kk-preview-inner{grid-template-columns:1fr;gap:32px}.kf-site .kf-work-grid{grid-template-columns:1fr;gap:22px}.kf-site .kf-project-screen{height:280px}.kf-site .kf-project-body{padding:23px}.kf-site .kk-reference-preview{padding-block:44px}.kf-site .kk-preview-choice{max-width:none;padding:25px}.kf-site .kk-comparison{padding:14px}.kf-site .kk-comparison .kk-compare-viewport{height:235px}.kk-compare-project strong{font-size:10px}.kk-compare-facts strong{font-size:16px}.kk-compare-facts span{font-size:9px}.kk-compare-controls{gap:8px}.kk-compare-controls p{max-width:160px}}
@media(prefers-reduced-motion:reduce){.kf-site .kf-project,.kf-site .kf-project-screen img{transition:none}.kf-site .kf-project:hover,.kf-site .kf-project:hover .kf-project-screen img,.kf-site .kf-project:focus-visible .kf-project-screen img{transform:none}}

/* Shared work/article filters. One definition for home and inner pages. */
.kf-site .kc-filterbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.kf-site .kc-filterbar button{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:auto;min-height:44px;padding:11px 17px;border:1px solid var(--kk-line);border-radius:6px;background:var(--kk-card);color:var(--kk-ink);font:600 12px/1.5 Manrope,sans-serif;white-space:nowrap;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.kf-site .kc-filterbar button:hover{border-color:var(--kk-ink);background:var(--kk-soft)}
.kf-site .kc-filterbar button[aria-pressed=true]{background:var(--kk-ink);color:var(--kk-bg);border-color:var(--kk-ink)}
.kf-site .kc-filterbar button:focus-visible{outline:2px solid var(--kf-red);outline-offset:3px}
.kf-site .kc-filterbar>span{margin-left:auto;font-size:12px;color:var(--kk-muted)}
/* Bespoke Kingdom icons. Inline SVG, no raster scaling or emoji substitution. */
.kf-site .kk-icon-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;margin:0 0 22px;border:1px solid var(--kk-line);border-radius:7px;background:var(--kk-soft);color:var(--kk-ink)}
.kf-site .kk-ui-icon{display:block;width:24px;height:24px;overflow:visible;color:inherit}
.kf-site .kk-icon-accent{fill:var(--kf-red)}
@media(max-width:640px){.kf-site .kc-filterbar{gap:8px;margin-bottom:24px}.kf-site .kc-filterbar button{padding:11px 13px}.kf-site .kc-filterbar>span{width:100%;margin:4px 0 0}}
/* Homepage work showcase: nine tiles, compact images and sector labels. */
.kf-site .kk-work-showcase .kf-work-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.kf-site .kk-work-showcase .kf-project-screen{position:relative;height:210px}.kf-site .kk-work-showcase .kf-project-body{padding:22px}.kf-site .kk-work-showcase .kf-project h3{font-size:23px}.kf-site .kk-work-showcase .kf-project p{font-size:12px;margin:10px 0 18px}.kf-site .kk-work-showcase .kc-filterbar button{border-radius:999px}.kk-project-sector{position:absolute;top:12px;left:12px;z-index:1;background:#111;color:#fff;padding:7px 11px;font:700 9px/1.3 Manrope,sans-serif;letter-spacing:.05em;text-transform:uppercase;border-radius:999px}.kf-site .kk-work-showcase .kk-next-screen{display:flex;align-items:center;justify-content:center;padding:22px;background:var(--kk-soft)}.kk-next-screen>div{width:100%}.kk-next-screen .kk-icon-badge{float:right;margin:0 0 12px 14px}.kk-next-screen strong{display:block;font:600 32px/1.1 Outfit,sans-serif;letter-spacing:-.035em;color:var(--kk-ink)}.kk-next-screen strong em{font:400 italic 37px/1.1 InstrumentSerif,Georgia,serif;color:var(--kk-ink)}.kk-next-screen>div>span:last-child{display:block;font-size:10px;color:var(--kk-muted);margin-top:16px}
@media(max-width:1000px){.kf-site .kk-work-showcase .kf-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.kf-site .kk-work-showcase .kf-work-grid{grid-template-columns:1fr;gap:20px}.kf-site .kk-work-showcase .kf-project-screen{height:210px}}