/* ==========================================================================
   Kolpolok theme – page sections. Loaded after main.css.
   Deliberately plain: real images, clear type, no decorative effects.
   ========================================================================== */

/* Type ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.03em; }
.kp-display { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 700; }
.kp-h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -.035em; font-weight: 600; }
.kp-h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); letter-spacing: -.035em; font-weight: 600; }
.kp-display em, .kp-h1 em, .kp-h2 em { font-style: normal; font-weight: inherit; }
.kp-kicker { margin: 0 0 18px; font-size: .95rem; font-weight: 500; color: var(--kp-accent); }
.kp-section--light .kp-kicker { color: var(--kp-accent-deep); }
.kp-heading { max-width: 680px; margin-bottom: clamp(36px, 5vw, 56px); }
.kp-heading .kp-h2 { margin-bottom: 14px; }
.kp-link { color: var(--kp-accent); font-weight: 500; }
.kp-section--light .kp-link { color: var(--kp-accent-deep); }

/* Quiet defaults: no glows, no grid backgrounds */
.kp-btn--accent, .kp-btn--accent:hover { box-shadow: none; }
.kp-btn:hover { transform: none; }
.kp-btn--accent:hover { filter: brightness(1.06); }
.kp-btn { border-radius: 10px; }
.kp-grid-bg, .kp-page-hero::after { display: none; }
.kp-reveal-ready [data-reveal] { transform: translateY(12px); transition-duration: .6s; transition-delay: 0s; }

/* Hero ------------------------------------------------------------------- */
.kp-hero { position: relative; overflow: hidden; }
.kp-hero__text { color: var(--kp-muted); font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 54ch; margin: 0 0 32px; }
.kp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kp-hero .kp-pill { display: inline-flex; margin-bottom: 26px; }
.kp-hero__points { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--kp-muted); font-size: .92rem; }
.kp-hero__points li { display: inline-flex; align-items: center; gap: 8px; }
.kp-hero__points .kp-icon { color: var(--kp-accent); }

/* Console (centred) */
.kp-hero--console { padding: clamp(136px, 14vw, 172px) 0 0; }
.kp-hero--console::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(transparent, var(--kp-bg)); pointer-events: none; z-index: 2; }
.kp-hero__copy--center { text-align: center; max-width: 920px; }
.kp-hero__copy--center .kp-display { max-width: 16ch; margin-inline: auto; }
.kp-hero__copy--center .kp-hero__text { margin-inline: auto; }
.kp-hero__copy--center .kp-hero__actions, .kp-hero__copy--center .kp-hero__points { justify-content: center; }
.kp-hero__showcase { position: relative; margin-top: clamp(48px, 6vw, 72px); max-width: 1180px; }
.kp-hero__showcase::before { content: ""; position: absolute; left: 10%; right: 10%; top: 12%; height: 60%; background: radial-gradient(ellipse at center, rgb(var(--kp-accent-rgb) / .22), transparent 70%); filter: blur(30px); pointer-events: none; }

/* Split layouts (map, cluster, terminal) */
.kp-hero__split { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; padding-top: clamp(120px, 11vw, 148px); padding-bottom: clamp(56px, 7vw, 88px); }
.kp-hero__split .kp-display { font-size: clamp(2.4rem, 4.2vw, 3.6rem); }
.kp-hero__split .kp-hero__text { font-size: 1.08rem; }
.kp-hero .kp-pill { margin-bottom: 20px; }
.kp-hero__visual { position: relative; display: block; min-height: 0; place-items: normal; }

/* Map background */
.kp-hero--map { border-bottom: 1px solid var(--kp-line); }
.kp-hero__bg { position: absolute; inset: 0; z-index: 0; }
.kp-hero__bg::after { content: ""; position: absolute; inset: 0; background:
	linear-gradient(90deg, var(--kp-bg) 0%, rgb(var(--kp-ink-rgb) / .92) 34%, rgb(var(--kp-ink-rgb) / .35) 62%, rgb(var(--kp-ink-rgb) / .2) 100%),
	linear-gradient(180deg, rgb(var(--kp-ink-rgb) / .7) 0%, transparent 22%, transparent 80%, var(--kp-bg) 100%); }
.kph-map { position: absolute; inset: 0; width: 100%; height: 100%; --m-bg: var(--kp-bg); --m-text: var(--kp-text); --m-accent: var(--kp-accent); --m-accent-rgb: var(--kp-accent-rgb); }
.kph-map .m-land { fill: color-mix(in srgb, var(--kp-text) 4%, var(--kp-bg)); }
.kph-map .m-water { fill: rgb(var(--kp-accent-rgb) / .1); }
.kph-map .m-park { fill: rgb(var(--kp-accent-rgb) / .06); }
.kph-map .m-road { fill: none; stroke: color-mix(in srgb, var(--kp-text) 9%, transparent); stroke-width: 14; stroke-linecap: round; }
.kph-map .m-road--minor { stroke-width: 4; stroke: color-mix(in srgb, var(--kp-text) 6%, transparent); }
.kph-map .m-route { fill: none; stroke: var(--kp-accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 12; opacity: .8; animation: kpm-dash 1.4s linear infinite; }
.kph-map .m-route--alt { stroke: var(--kp-accent-2); opacity: .6; }
.kph-map .m-car { fill: var(--kp-accent); }
.kph-map .m-car--alt { fill: var(--kp-accent-2); }
.kph-map .m-car__halo { opacity: .22; }
.kph-map .m-pin { fill: var(--kp-accent-2); }
.kph-map .m-pin__halo { opacity: .25; transform-box: fill-box; transform-origin: center; animation: kpm-ping 2.4s ease-out infinite; }

/* Floating fleet cards */
.kph-cards { position: relative; height: 440px; font-size: 13.5px; }
.kph-card { position: absolute; padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--kp-bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--kp-line-2); box-shadow: 0 30px 60px -28px rgb(0 0 0 / .7); color: var(--kp-text); }
.kph-card b { font-weight: 600; }
.kph-card small { display: block; color: var(--kp-muted); font-size: .82em; margin-top: 2px; }
.kph-card__row { display: flex; align-items: center; gap: 10px; }
.kph-card__row > div { flex: 1; min-width: 0; }
.kph-card .kpm-ava, .kph-card .kpm-status, .kph-card .kpm-toast__icon { --m-accent: var(--kp-accent); --m-accent-rgb: var(--kp-accent-rgb); --m-on-accent: var(--kp-accent-ink); --m-muted: var(--kp-muted); --m-line: var(--kp-line-2); }
.kph-card .kpm-ava { width: 36px; height: 36px; border-radius: 10px; font-size: .8em; }
.kph-card .kpm-status { font-size: .78em; padding: 4px 9px; }
.kph-card--vehicle { right: 0; top: 30%; width: 330px; animation: kpm-float 8s ease-in-out infinite; }
.kph-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 0; }
.kph-stats div { padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--kp-text) 6%, transparent); }
.kph-stats dt { font-size: .76em; color: var(--kp-muted); }
.kph-stats dd { margin: 2px 0 0; font-weight: 600; font-size: 1.05em; }
.kph-card--kpi { left: 2%; top: 4%; width: 220px; animation: kpm-float 9s ease-in-out infinite; animation-delay: -3s; }
.kph-card--kpi b { display: block; font-size: 2em; letter-spacing: -.02em; margin-top: 2px; }
.kph-card--kpi .kpm-spark { position: absolute; right: 14px; bottom: 16px; width: 80px; height: 24px; }
.kph-card--kpi .kpm-spark path { fill: none; stroke: var(--kp-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kph-card--alert { left: 10%; bottom: 2%; white-space: nowrap; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; animation: kpm-float 7s ease-in-out infinite; animation-delay: -1.5s; }
.kph-card--alert .kpm-toast__icon { color: var(--kp-accent-ink); background: var(--kp-accent-2); }
.kph-card--map { left: 0; top: 40px; width: 100%; padding: 10px; }
.kph-card__map { position: relative; height: 270px; border-radius: 12px; overflow: hidden; margin-bottom: 10px; --m-bg: var(--kp-bg); --m-text: var(--kp-text); --m-accent: var(--kp-accent); --m-accent-rgb: var(--kp-accent-rgb); }
.kph-card--map .kph-card__row { padding: 4px 6px 2px; }
.kp-hero--cluster .kph-cards { height: 470px; }
.kp-hero--cluster .kph-card--kpi { right: -12px; left: auto; top: 0; }
.kp-hero--cluster .kph-card--alert { left: -24px; right: auto; bottom: 18px; }

/* Terminal */
.kp-hero--terminal .kp-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.kp-hero--terminal .kp-aurora i { position: absolute; border-radius: 50%; filter: blur(80px); }
.kp-hero--terminal .kp-aurora i:nth-child(1) { width: 640px; height: 640px; right: -160px; top: -200px; background: radial-gradient(circle, rgb(var(--kp-accent-rgb) / .35), transparent 65%); }
.kp-hero--terminal .kp-aurora i:nth-child(2) { width: 460px; height: 460px; left: -180px; bottom: -120px; background: radial-gradient(circle, rgb(var(--kp-accent-2-rgb) / .18), transparent 65%); }
.kph-terminal-wrap { position: relative; padding: 50px 30px; }
.kph-terminal { border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--kp-text) 5%, var(--kp-bg)); border: 1px solid var(--kp-line-2); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8), 0 0 80px -30px rgb(var(--kp-accent-rgb) / .5); --m-line: var(--kp-line-2); --m-panel: color-mix(in srgb, var(--kp-text) 7%, var(--kp-bg)); --m-muted: var(--kp-muted); }
.kph-terminal pre { margin: 0; padding: 24px 24px 28px; font: .92rem/1.95 var(--kp-mono); color: var(--kp-muted); white-space: pre-wrap; }
.kph-terminal pre b { color: var(--kp-text); font-weight: 500; }
.kph-terminal .t-c { color: var(--kp-accent-2); }
.kph-terminal .t-ok { color: var(--kp-accent); }
.kph-terminal .t-caret { display: inline-block; width: 8px; height: 1.1em; vertical-align: -3px; margin-left: 4px; background: var(--kp-accent); animation: kpm-blink 1s steps(1) infinite; }
.kph-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; font-size: .88rem; font-weight: 500; color: var(--kp-text); background: color-mix(in srgb, var(--kp-bg) 85%, transparent); border: 1px solid var(--kp-line-2); backdrop-filter: blur(8px); box-shadow: 0 20px 40px -20px rgb(0 0 0 / .7); animation: kpm-float 7s ease-in-out infinite; }
.kph-chip .kp-icon { color: var(--kp-accent); }
.kph-chip--1 { top: 0; left: 0; }
.kph-chip--2 { top: 22%; right: -10px; animation-delay: -2s; }
.kph-chip--3 { bottom: 6%; left: 8%; animation-delay: -4s; }
.kph-chip--4 { bottom: 0; right: 12%; animation-delay: -5.5s; }
.kp-hero--terminal .kp-marquee { position: relative; z-index: 2; margin-top: 0; }

@media (max-width: 960px) {
	.kp-hero__split { grid-template-columns: 1fr; min-height: 0; }
	.kp-hero__bg::after { background: linear-gradient(180deg, rgb(var(--kp-ink-rgb) / .8), rgb(var(--kp-ink-rgb) / .9) 60%, var(--kp-bg)); }
	.kph-cards { height: 380px; max-width: 520px; }
	.kph-card--kpi { left: 0; right: auto; }
}
@media (max-width: 640px) {
	.kph-cards { height: 340px; font-size: 12px; }
	.kph-card--vehicle { right: 0; width: 280px; top: 26%; }
	.kph-card--alert { right: auto; left: 0; }
	.kp-hero--cluster .kph-card--alert { left: 0; }
	.kp-hero--cluster .kph-card--kpi { right: 0; width: 180px; }
	.kp-hero--cluster .kph-card__map { height: 220px; }
	.kp-hero--cluster .kph-cards { height: 420px; }
	.kph-chip--2, .kph-chip--4 { display: none; }
	.kph-terminal pre { font-size: .76rem; padding: 18px; }
}

/* Selected work ---------------------------------------------------------- */
.kp-case { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--kp-line); }
.kp-case--flip .kp-case__media { order: 2; }
.kp-case__media { margin: 0; }
.kp-case__media img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--kp-line); }
.kp-case__type { margin: 0 0 12px; font-size: .9rem; color: var(--kp-accent); font-weight: 500; }
.kp-section--light .kp-case__type, .kp-section--light .kp-case__points li::before { color: var(--kp-accent-deep); }
.kp-case h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; margin-bottom: 16px; }
.kp-case__body > p { color: var(--kp-muted); }
.kp-case__points { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 10px; }
.kp-case__points li { position: relative; padding-left: 22px; color: var(--kp-text); }
.kp-case__points li::before { content: "—"; position: absolute; left: 0; color: var(--kp-accent); }
.kp-case__stack { margin: 0; font-size: .85rem; color: var(--kp-dim); }

.kp-more-work { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--kp-line); }
.kp-more-work__item { padding: 32px 28px 8px 0; }
.kp-more-work__item + .kp-more-work__item { padding-left: 28px; border-left: 1px solid var(--kp-line); }
.kp-more-work__item h3 { font-size: 1.2rem; line-height: 1.3; margin-bottom: 10px; }
.kp-more-work__item p:last-child { color: var(--kp-muted); font-size: .95rem; }

/* Services list (light) -------------------------------------------------- */
.kp-section--light {
	--kp-bg: #FFFFFF;
	--kp-text: var(--kp-ink);
	--kp-muted: var(--kp-light-muted);
	--kp-dim: var(--kp-light-dim);
	--kp-line: rgb(var(--kp-ink-rgb) / .08);
	--kp-line-2: rgb(var(--kp-ink-rgb) / .14);
	background: var(--kp-light);
	color: var(--kp-text);
	color-scheme: light;
}
.kp-section--light .kp-h2 em { color: var(--kp-accent-deep); }
.kp-services__grid { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.kp-services__head { position: sticky; top: 110px; }
.kp-service-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.kp-service-list li { border-top: 1px solid var(--kp-line-2); }
.kp-service-list a { display: block; padding: 22px 0 18px; color: inherit; }
.kp-service-list h3 { font-size: 1.2rem; margin-bottom: 6px; transition: color .2s; }
.kp-service-list p { margin: 0; font-size: .95rem; color: var(--kp-muted); }
.kp-service-list a:hover h3 { color: var(--kp-accent); }
.kp-services .kp-link { color: var(--kp-accent); }

/* Group ------------------------------------------------------------------ */
.kp-group__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.kp-group__grid > div > p:not(.kp-lead) { color: var(--kp-muted); }
.kp-group .kp-lead { margin-bottom: 18px; }
.kp-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--kp-line); }
.kp-facts div { padding: 26px 0; border-bottom: 1px solid var(--kp-line); }
.kp-facts div:nth-child(odd) { padding-right: 20px; }
.kp-facts div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--kp-line); }
.kp-facts dt { font: 500 2.6rem/1 var(--kp-display); color: var(--kp-accent); margin-bottom: 10px; }
.kp-facts dd { margin: 0; color: var(--kp-muted); font-size: .95rem; }

/* Commitments ------------------------------------------------------------ */
.kp-commitments { border-top: 1px solid var(--kp-line); }
.kp-commit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; }
.kp-commit-list li { padding-top: 20px; border-top: 2px solid var(--kp-accent); }
.kp-commit-list h3 { font-size: 1.2rem; margin-bottom: 8px; }
.kp-commit-list p { margin: 0; color: var(--kp-muted); font-size: .95rem; }

/* FAQ (light) ------------------------------------------------------------ */
.kp-faq__item { border-bottom: 1px solid var(--kp-line-2); }
.kp-faq__item summary { font-family: var(--kp-font); font-weight: 500; font-size: 1.08rem; }
.kp-faq__item summary span { border: 0; width: auto; height: auto; font-size: 1.4rem; font-weight: 300; color: var(--kp-accent-deep); transition: transform .2s; }
.kp-faq__item[open] summary span { background: none; transform: rotate(45deg); color: var(--kp-accent-deep); }
.kp-faq__item p { color: var(--kp-muted); padding-right: 40px; }

/* CTA -------------------------------------------------------------------- */
.kp-cta { background: var(--kp-accent); color: var(--kp-accent-ink); border-radius: 18px; text-align: left; padding: clamp(36px, 6vw, 64px); display: grid; grid-template-columns: 1fr auto; gap: 16px 40px; align-items: center; }
.kp-cta .kp-h2 { max-width: none; margin: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.kp-cta p { margin: 0; opacity: .8; grid-column: 1; }
.kp-cta .kp-hero__actions { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
.kp-cta .kp-btn--dark { background: var(--kp-ink); color: var(--kp-light); }
.kp-cta .kp-btn--dark:hover { color: var(--kp-light); }
.kp-cta .kp-btn--outline-dark { border-color: rgb(var(--kp-ink-rgb) / .35); color: var(--kp-accent-ink); }
.kp-cta .kp-btn--outline-dark:hover { background: rgb(var(--kp-ink-rgb) / .06); color: var(--kp-accent-ink); }

/* Contact ---------------------------------------------------------------- */
.kp-contact__form { background: var(--kp-surface); border-color: var(--kp-line); }
.kp-contact__list .kp-value__icon { background: none; border: 1px solid var(--kp-line-2); color: var(--kp-accent); }
.kpc-form .kpc-submit { border-radius: 10px; }
.kpc-form .kpc-submit:hover { transform: none; box-shadow: none; filter: brightness(1.06); }

/* Inner pages ------------------------------------------------------------ */
.kp-page-hero { padding: clamp(140px, 15vw, 180px) 0 clamp(48px, 6vw, 72px); }
.kp-page-hero .kp-h1 { max-width: 22ch; }
.kp-story { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); }
.kp-service__icon, .kp-service-row .kp-service__icon { background: none; border: 1px solid var(--kp-line-2); color: var(--kp-accent); box-shadow: none; }
.kp-service-row .kp-ticks .kp-icon, .kp-service-row .kp-link { color: var(--kp-accent); }
.kp-chips a:hover { border-color: var(--kp-accent); color: var(--kp-accent); }
.kp-product { padding-top: 0; overflow: hidden; }
.kp-product:hover { transform: none; }
.kp-product::after { display: none; }
.kp-product__media { margin: 0 calc(-1 * clamp(22px, 3vw, 32px)) 24px; }
.kp-product__media img { width: 100%; height: 190px; object-fit: cover; }
.kp-product:not(:has(.kp-product__media)) { padding-top: clamp(22px, 3vw, 32px); }
.kp-product .kp-tag { align-self: flex-start; color: var(--kp-accent); background: rgb(var(--kp-accent-rgb) / .12); }
.kp-product .kp-link { color: var(--kp-accent); }

/* No numbering, plain tags */
.kp-meta { font: .88rem var(--kp-font); color: var(--kp-dim); }
.post-navigation span { font-family: var(--kp-font); text-transform: none; letter-spacing: 0; }
.kp-post-card__placeholder { font-family: var(--kp-display); background: rgb(var(--kp-accent-rgb) / .08); }
.kp-service-row .kp-service__num { display: none; }
.kp-service-row { grid-template-columns: 1fr 1.3fr; }
.kp-tag { font: 500 .8rem/1 var(--kp-font); text-transform: none; letter-spacing: 0; }

/* Footer ----------------------------------------------------------------- */
.kp-footer h3 { font: 500 .9rem/1.2 var(--kp-font); text-transform: none; letter-spacing: 0; color: var(--kp-text); }
.kp-footer { padding-bottom: 0; }
.kp-footer__bottom { margin-top: 56px; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
	.kp-more-work { grid-template-columns: 1fr 1fr; }
	.kp-more-work__item:nth-child(3) { padding-left: 0; border-left: 0; }
	.kp-more-work__item:nth-child(n+3) { border-top: 1px solid var(--kp-line); }
}
@media (max-width: 960px) {
	.kp-hero__inner, .kp-case, .kp-services__grid, .kp-group__grid, .kp-story { grid-template-columns: 1fr; }
	.kp-case--flip .kp-case__media { order: 0; }
	.kp-service-row { grid-template-columns: 1fr; }
	.kp-services__head { position: static; }
	.kp-commit-list { grid-template-columns: 1fr 1fr; }
	.kp-cta { grid-template-columns: 1fr; }
	.kp-cta .kp-hero__actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}
@media (max-width: 640px) {
	.kp-service-list, .kp-commit-list, .kp-more-work { grid-template-columns: 1fr; }
	.kp-more-work__item, .kp-more-work__item + .kp-more-work__item { padding-left: 0; border-left: 0; }
	.kp-more-work__item + .kp-more-work__item { border-top: 1px solid var(--kp-line); }
	.kp-facts dt { font-size: 2.1rem; }
}

/* ==========================================================================
   Visual sections: icon cards, steps, why, tech, page-header art
   ========================================================================== */

/* Headings */
.kp-heading--split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; max-width: none; }
.kp-heading--split .kp-lead { margin: 0; }
.kp-heading--center { text-align: center; margin-inline: auto; }
.kp-heading--center .kp-lead { margin-inline: auto; }

/* Icon cards */
.kp-cards { display: grid; gap: 18px; }
.kp-cards--1 { grid-template-columns: 1fr; }
.kp-cards--2 { grid-template-columns: repeat(2, 1fr); }
.kp-cards--3 { grid-template-columns: repeat(3, 1fr); }
.kp-cards--4 { grid-template-columns: repeat(4, 1fr); }
.kp-icard {
	position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 16px;
	background: color-mix(in srgb, var(--kp-text) 3%, var(--kp-bg)); border: 1px solid var(--kp-line); color: inherit;
	transition: border-color .25s, transform .25s var(--kp-ease), box-shadow .25s;
}
a.kp-icard:hover { color: inherit; border-color: rgb(var(--kp-accent-rgb) / .55); transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgb(var(--kp-accent-rgb) / .6); }
.kp-icard__icon { width: 48px; height: 48px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--kp-accent); background: rgb(var(--kp-accent-rgb) / .13); border: 1px solid rgb(var(--kp-accent-rgb) / .25); }
.kp-section--light .kp-icard__icon { color: var(--kp-accent-deep); background: rgb(var(--kp-accent-deep-rgb) / .1); border-color: rgb(var(--kp-accent-deep-rgb) / .2); }
.kp-icard h3 { margin: 8px 0 0; font-size: 1.22rem; line-height: 1.25; }
.kp-icard p { margin: 0; color: var(--kp-muted); font-size: .95rem; }
.kp-icard__more { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: .92rem; color: var(--kp-accent); }
.kp-icard__more .kp-icon { transition: transform .25s var(--kp-ease); }
a.kp-icard:hover .kp-icard__more .kp-icon { transform: translateX(4px); }
.kp-section--light .kp-icard { background: #FFFFFF; box-shadow: 0 18px 36px -30px rgb(var(--kp-ink-rgb) / .35); }
.kp-icard--row { flex-direction: row; align-items: flex-start; gap: 16px; }
.kp-icard--row h3 { margin: 2px 0 6px; font-size: 1.1rem; }

/* Steps with connecting line */
.kp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; position: relative; counter-reset: none; }
.kp-steps--3 { grid-template-columns: repeat(3, 1fr); }
.kp-steps--4 { grid-template-columns: repeat(4, 1fr); }
.kp-steps::before { content: ""; position: absolute; top: 32px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, rgb(var(--kp-accent-rgb) / .5) 0 8px, transparent 8px 16px); }
.kp-section--light .kp-steps::before { background: repeating-linear-gradient(90deg, rgb(var(--kp-accent-deep-rgb) / .4) 0 8px, transparent 8px 16px); }
.kp-step { position: relative; text-align: center; padding: 0 8px; background: none; border: 0; box-shadow: none; }
.kp-step:hover { transform: none; box-shadow: none; }
.kp-step__icon { position: relative; z-index: 1; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 20px; display: grid; place-items: center; color: var(--kp-accent-ink); background: var(--kp-accent); box-shadow: 0 0 0 8px var(--kp-bg), 0 16px 30px -12px rgb(var(--kp-accent-rgb) / .7); }
.kp-section--light .kp-step__icon { background: var(--kp-accent-deep); color: #FFFFFF; box-shadow: 0 0 0 8px var(--kp-light), 0 16px 30px -12px rgb(var(--kp-accent-deep-rgb) / .6); }
.kp-step__icon em { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 .75rem var(--kp-font); font-style: normal; color: var(--kp-text); background: var(--kp-bg); border: 1px solid var(--kp-line-2); }
.kp-section--light .kp-step__icon em { background: #FFFFFF; }
.kp-step h3 { font-size: 1.2rem; margin-bottom: 8px; }
.kp-step p { color: var(--kp-muted); font-size: .95rem; max-width: 30ch; margin: 0 auto; }

/* Why */
.kp-why__top { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; margin-bottom: 48px; }
.kp-why .kp-facts dt { color: var(--kp-accent-deep); }
.kp-why .kp-facts { border-color: var(--kp-line-2); }

/* Tech */
.kp-tags-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kp-tags-list li { padding: 5px 10px; border-radius: 999px; font-size: .82rem; color: var(--kp-text); background: color-mix(in srgb, var(--kp-text) 7%, transparent); }

/* More work cards with icons */
.kp-more-work { gap: 18px; border-top: 0; }
.kp-more-work__item, .kp-more-work__item + .kp-more-work__item { padding: 24px; border: 1px solid var(--kp-line); border-radius: 16px; background: #FFFFFF; box-shadow: 0 18px 36px -30px rgb(var(--kp-ink-rgb) / .35); }
.kp-more-work__item .kp-icard__icon { margin-bottom: 16px; }
.kp-more-work__item .kp-case__type { margin-bottom: 6px; }

/* Services section header on dark */
.kp-services .kp-icard__icon { color: var(--kp-accent); }

/* Page header with art */
.kp-page-hero--art .kp-page-hero__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.kp-page-hero__art { display: flex; justify-content: center; }
.kpa { position: relative; width: 100%; max-width: 460px; font-family: var(--kp-font); font-size: 13px; color: var(--kp-text); }
.kpa b { font-weight: 600; }
.kpa small { display: block; color: var(--kp-muted); font-size: .85em; margin-top: 2px; }
.kpa-card { position: relative; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--kp-text) 4%, var(--kp-bg)); border: 1px solid var(--kp-line-2); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
.kpa-card__map { position: relative; height: 190px; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.kpa-card__map .kpm-map__svg { --m-bg: var(--kp-bg); --m-text: var(--kp-text); --m-accent: var(--kp-accent); --m-accent-rgb: var(--kp-accent-rgb); }
.kpa-card__row { display: flex; align-items: center; gap: 12px; }
.kpa-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--kp-accent); background: rgb(var(--kp-accent-rgb) / .14); }
.kpa-icon--lg { width: 64px; height: 64px; border-radius: 18px; }
.kpa-chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.kpa-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--kp-line-2); background: color-mix(in srgb, var(--kp-text) 3%, var(--kp-bg)); font-weight: 500; }
.kpa-chips li .kp-icon { color: var(--kp-accent); }
.kpa-chips--inline { justify-content: flex-start; margin: 0 0 4px; }
.kpa-chips--inline li { padding: 4px 10px; font-size: .9em; }
.kpa--about .kpa-chips { position: absolute; left: -24px; right: -24px; bottom: -22px; }
.kpa--about { padding-bottom: 24px; }

.kpa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpa-tile { aspect-ratio: 1; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--kp-accent); background: color-mix(in srgb, var(--kp-text) 4%, var(--kp-bg)); border: 1px solid var(--kp-line); animation: kpa-glow 6s ease-in-out infinite; animation-delay: calc(var(--i) * .6s); }
.kpa-tile em { font-style: normal; font-size: .82em; color: var(--kp-muted); padding: 0 6px; }
.kpa-tile.is-active { color: var(--kp-accent-ink); background: var(--kp-accent); border-color: var(--kp-accent); }
.kpa-tile.is-active em { color: var(--kp-accent-ink); }
@keyframes kpa-glow { 0%, 80%, 100% { border-color: var(--kp-line); } 90% { border-color: rgb(var(--kp-accent-rgb) / .7); } }

.kpa-stack { position: relative; height: 380px; }
.kpa-stack__item { position: absolute; width: 72%; border-radius: 16px; overflow: hidden; border: 1px solid var(--kp-line-2); box-shadow: 0 30px 50px -24px rgb(0 0 0 / .7); left: calc(var(--i) * 14%); top: calc(var(--i) * 92px); }
.kpa-stack__item .kpm-mini { height: 170px; }

.kpa-profile { padding: 20px; }
.kpa-avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--kp-accent-ink); background: var(--kp-accent); }
.kpa-avatar--sm { width: 34px; height: 34px; }
.kpa-avatar--brand { background: var(--kp-bg); border: 1px solid var(--kp-line-2); }
.kpa-label { margin: 18px 0 8px; font-size: .8em; color: var(--kp-muted); text-transform: uppercase; letter-spacing: .06em; }
.kpa-btn { display: block; margin-top: 18px; padding: 11px; border-radius: 10px; text-align: center; font-weight: 600; color: var(--kp-accent-ink); background: var(--kp-accent); }
.kpa-profile .kpm-progress { --m-line: var(--kp-line-2); --m-accent: var(--kp-accent); }

.kpa-chat { display: grid; gap: 14px; }
.kpa-msg { display: flex; align-items: flex-end; gap: 10px; }
.kpa-msg p { margin: 0; padding: 14px 16px; border-radius: 16px; max-width: 80%; line-height: 1.45; font-size: 1.05em; }
.kpa-msg--in p { background: color-mix(in srgb, var(--kp-text) 7%, var(--kp-bg)); border: 1px solid var(--kp-line); border-bottom-left-radius: 4px; }
.kpa-msg--out { justify-content: flex-end; }
.kpa-msg--out p { color: var(--kp-accent-ink); background: var(--kp-accent); border-bottom-right-radius: 4px; }
.kpa-msg--in .kpa-avatar { background: color-mix(in srgb, var(--kp-text) 10%, var(--kp-bg)); color: var(--kp-text); }
.kpa-typing { display: inline-flex; gap: 5px; padding: 12px 16px; margin-left: 44px; border-radius: 16px; width: max-content; background: color-mix(in srgb, var(--kp-text) 7%, var(--kp-bg)); }
.kpa-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--kp-muted); animation: kpa-typing 1.2s infinite; }
.kpa-typing i:nth-child(2) { animation-delay: .2s; }
.kpa-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes kpa-typing { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.kpa-msg, .kpa-typing { animation: kpa-in .6s var(--kp-ease) both; }
.kpa-msg--out { animation-delay: .5s; }
.kpa-typing { animation: kpa-in .6s 1s var(--kp-ease) both; }
@keyframes kpa-in { from { opacity: 0; transform: translateY(10px); } }

.kpa-docs { display: grid; gap: 12px; }
.kpa-doc { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 6px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--kp-text) 4%, var(--kp-bg)); border: 1px solid var(--kp-line); margin-left: calc(var(--i) * 24px); }
.kpa-doc__thumb { grid-row: 1 / span 3; border-radius: 10px; display: grid; place-items: center; color: var(--kp-accent); background: rgb(var(--kp-accent-rgb) / .14); }
.kpa-doc i { display: block; height: 6px; border-radius: 4px; background: var(--kp-line-2); }
.kpa-doc i:last-child { width: 60%; }

.kpa-legal { display: grid; gap: 10px; padding: 28px; max-width: 320px; margin: 0 auto; }
.kpa-legal i { display: block; height: 8px; border-radius: 4px; background: var(--kp-line-2); }
.kpa-legal i:nth-child(3) { width: 85%; }
.kpa-legal i:nth-child(5) { width: 70%; }
.kpa-legal i:last-child { width: 50%; }
.kpa-legal .kpa-icon { margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
	.kpa *, .kpa { animation: none !important; }
}

/* Responsive */
@media (max-width: 1100px) {
	.kp-cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
	.kp-heading--split, .kp-why__top, .kp-page-hero--art .kp-page-hero__inner { grid-template-columns: 1fr; }
	.kp-cards--3 { grid-template-columns: repeat(2, 1fr); }
	.kp-steps--4 { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
	.kp-steps::before { display: none; }
	.kp-page-hero__art { justify-content: flex-start; }
}
@media (max-width: 640px) {
	.kp-cards--2, .kp-cards--3, .kp-cards--4, .kp-steps--3, .kp-steps--4 { grid-template-columns: 1fr; }
	.kp-page-hero__art { display: none; }
	.kp-icard { padding: 22px; }
}

/* ==========================================================================
   Card variety
   ========================================================================== */

/* Bento services */
.kp-bento2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kp-bcard { position: relative; display: flex; border-radius: 20px; overflow: hidden; color: inherit; background: color-mix(in srgb, var(--kp-text) 3%, var(--kp-bg)); border: 1px solid var(--kp-line); transition: border-color .25s, transform .25s var(--kp-ease), box-shadow .25s; }
.kp-bcard:hover { color: inherit; border-color: rgb(var(--kp-accent-rgb) / .55); transform: translateY(-3px); box-shadow: 0 28px 50px -34px rgb(var(--kp-accent-rgb) / .7); }
.kp-bcard__body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 26px; }
.kp-bcard__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--kp-accent); border: 1px solid rgb(var(--kp-accent-rgb) / .4); }
.kp-bcard h3 { margin: 8px 0 0; font-size: 1.2rem; line-height: 1.25; padding-right: 30px; }
.kp-bcard p { margin: 0; color: var(--kp-muted); font-size: .94rem; }
.kp-bcard__go { position: absolute; top: 22px; right: 22px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--kp-muted); border: 1px solid var(--kp-line-2); transition: .25s var(--kp-ease); }
.kp-bcard:hover .kp-bcard__go { color: var(--kp-accent-ink); background: var(--kp-accent); border-color: var(--kp-accent); transform: rotate(45deg); }
.kp-bcard__points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.kp-bcard__points li { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.kp-bcard__points .kp-icon { color: var(--kp-accent); }
.kp-bcard--wide { grid-column: span 2; }
.kp-bcard--wide .kp-bcard__body { flex: 1 1 50%; padding: 30px; }
.kp-bcard--wide h3 { font-size: 1.55rem; }
.kp-bcard--wide .kp-bcard__icon { width: 52px; height: 52px; color: var(--kp-accent-ink); background: var(--kp-accent); border: 0; }
.kp-bcard__visual { position: relative; flex: 1 1 46%; min-height: 280px; border-left: 1px solid var(--kp-line); }
.kp-bcard__visual--map { --m-bg: var(--kp-bg); --m-text: var(--kp-text); --m-accent: var(--kp-accent); --m-accent-rgb: var(--kp-accent-rgb); --m-line: var(--kp-line-2); --m-muted: var(--kp-muted); }
.kp-bcard__visual--map .kpm-map__svg { position: absolute; inset: 0; }
.kp-bcard__visual--map .kpm-map__tag { font-size: 12px; }
.kp-bcard__visual--chat { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px; background: radial-gradient(circle at 70% 30%, rgb(var(--kp-accent-rgb) / .12), transparent 60%); }
.kp-bubble { margin: 0; padding: 12px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.45; max-width: 88%; }
.kp-bubble--in { align-self: flex-end; background: color-mix(in srgb, var(--kp-text) 8%, var(--kp-bg)); border-bottom-right-radius: 4px; }
.kp-bubble--out { align-self: flex-start; color: var(--kp-accent-ink); background: var(--kp-accent); border-bottom-left-radius: 4px; }
.kp-bubble--typing { display: inline-flex; gap: 5px; width: max-content; padding: 12px 14px; background: color-mix(in srgb, var(--kp-text) 8%, var(--kp-bg)); }
.kp-bubble--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--kp-muted); animation: kpa-typing 1.2s infinite; }
.kp-bubble--typing i:nth-child(2) { animation-delay: .2s; }
.kp-bubble--typing i:nth-child(3) { animation-delay: .4s; }
.kp-bcard--cta { background: var(--kp-accent); border-color: var(--kp-accent); color: var(--kp-accent-ink); }
.kp-bcard--cta:hover { color: var(--kp-accent-ink); }
.kp-bcard--cta p { color: var(--kp-accent-ink); opacity: .8; }
.kp-bcard--cta .kp-bcard__icon { color: var(--kp-accent-ink); border-color: rgb(var(--kp-ink-rgb) / .3); }
.kp-bcard__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }

/* Solutions: header-band cards */
.kp-more-work { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.kp-scard { border-radius: 18px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--kp-line); box-shadow: 0 18px 36px -30px rgb(var(--kp-ink-rgb) / .35); transition: transform .25s var(--kp-ease), box-shadow .25s; }
.kp-scard:hover { transform: translateY(-3px); box-shadow: 0 26px 44px -30px rgb(var(--kp-ink-rgb) / .45); }
.kp-scard__band { height: 112px; display: grid; place-items: center; background-color: rgb(var(--kp-accent-deep-rgb) / .08); background-image: radial-gradient(rgb(var(--kp-accent-deep-rgb) / .22) 1.2px, transparent 1.2px); background-size: 14px 14px; border-bottom: 1px solid var(--kp-line); }
.kp-scard:nth-child(even) .kp-scard__band { background-color: rgb(var(--kp-accent-2-rgb) / .14); background-image: radial-gradient(rgb(var(--kp-accent-2-rgb) / .45) 1.2px, transparent 1.2px); }
.kp-scard__icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: var(--kp-accent-deep); box-shadow: 0 0 0 6px #FFFFFF; }
.kp-scard:nth-child(even) .kp-scard__icon { color: var(--kp-ink); background: var(--kp-accent-2); }
.kp-scard__body { padding: 22px; }
.kp-scard h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 8px; }
.kp-scard__body > p:last-child { margin: 0; color: var(--kp-muted); font-size: .94rem; }

/* Why: checklist */
.kp-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.kp-checklist li { display: flex; gap: 18px; padding: 22px 0 22px 20px; border-top: 1px solid var(--kp-line-2); position: relative; }
.kp-checklist li::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: var(--kp-accent-deep); }
.kp-checklist__icon { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--kp-accent-deep); background: rgb(var(--kp-accent-deep-rgb) / .1); }
.kp-checklist h3 { font-size: 1.1rem; margin: 2px 0 6px; }
.kp-checklist p { margin: 0; color: var(--kp-muted); font-size: .95rem; }

/* Careers: profile cards */
.kp-pcard { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 24px; border-radius: 20px; text-align: left; background: linear-gradient(180deg, rgb(var(--kp-accent-rgb) / .08), transparent 45%), color-mix(in srgb, var(--kp-text) 3%, var(--kp-bg)); border: 1px solid var(--kp-line); }
.kp-pcard__avatar { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; color: var(--kp-accent-ink); background: var(--kp-accent); box-shadow: 0 0 0 6px rgb(var(--kp-accent-rgb) / .15); margin-bottom: 8px; }
.kp-pcard h3 { font-size: 1.2rem; margin: 0; }
.kp-pcard p { margin: 0; color: var(--kp-muted); font-size: .94rem; }
.kp-pcard .kp-tags-list { margin: 6px 0 4px; }
.kp-pcard__apply { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--kp-accent); }

/* About: timeline */
.kp-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.kp-timeline::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(var(--kp-accent), rgb(var(--kp-accent-rgb) / .1)); }
.kp-timeline li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 34px; }
.kp-timeline li:last-child { padding-bottom: 0; }
.kp-timeline__node { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--kp-accent-ink); background: var(--kp-accent); box-shadow: 0 0 0 6px var(--kp-bg); }
.kp-timeline__body { padding: 18px 22px; border-radius: 16px; background: color-mix(in srgb, var(--kp-text) 3%, var(--kp-bg)); border: 1px solid var(--kp-line); }
.kp-timeline h3 { font-size: 1.15rem; margin: 0 0 6px; }
.kp-timeline p { margin: 0; color: var(--kp-muted); font-size: .95rem; }

@media (max-width: 1100px) {
	.kp-more-work { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
	.kp-bento2 { grid-template-columns: repeat(2, 1fr); }
	.kp-bcard--wide { grid-column: span 2; }
	.kp-checklist { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.kp-bento2, .kp-more-work { grid-template-columns: 1fr; }
	.kp-bcard--wide { grid-column: auto; flex-direction: column; }
	.kp-bcard__visual { min-height: 200px; border-left: 0; border-top: 1px solid var(--kp-line); }
}
.kp-bcard .kp-bubble--out { color: var(--kp-accent-ink); }
.kp-bcard .kp-bubble--in { color: var(--kp-text); }