/* Kommodoor site layer — layout on top of kommodoor.css (the kit, synced by scripts/sync-brand.sh).
   Rule: every colour, size and curve comes from a --kd-* token. Layout values that are not tokens
   (grid ratios, min-heights) follow brand/kit/reference/website. Mobile below 720px, like the kit. */

:root {
  --gutter: var(--kd-space-gutter-desktop);
  --section: var(--kd-space-section-desktop);
  --maxw: 1440px;
  --line: var(--kd-border-screen) solid var(--kd-color-line);
}
@media (max-width: 1100px) { :root { --gutter: var(--kd-space-48); } }
@media (max-width: 720px)  { :root { --gutter: var(--kd-space-gutter-mobile); --section: var(--kd-space-section-mobile); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
.kd a { text-decoration: none; }
.kd :focus-visible { outline: 2px solid var(--kd-color-pop); outline-offset: 3px; border-radius: 2px; }
.kd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kd-skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--kd-color-ink); color: #fff !important; padding: 10px 16px; border-radius: var(--kd-radius-base); }
.kd-skip:focus { left: 12px; }

.kd-wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.kd-section { padding-block: var(--section); }
.kd-rule { border-top: var(--line); }
.kd-balance { text-wrap: balance; }
.kd-pretty { text-wrap: pretty; }
.kd-muted { color: var(--kd-color-text-faint); }
.kd-ink-bg { background: var(--kd-color-ink); color: var(--kd-color-white); }
.kd-ink-bg .kd-label { color: var(--kd-color-text-on-ink); }
.kd-ink-bg a { color: var(--kd-color-white); }
.kd-ink-bg a:hover { color: var(--kd-color-white); }

/* eyebrow with the half-disc */
.kd-eyebrow { display: flex; align-items: center; gap: var(--kd-space-12); }
.kd-eyebrow--pop { color: var(--kd-color-pop); }
.kd-eyebrow svg { display: block; }

/* ---------- Header ---------- */
.kd-header { position: relative; }
.kd-header__in { display: flex; align-items: center; justify-content: space-between; padding-block: 28px; }
.kd-logo { display: flex; align-items: center; gap: var(--kd-space-12); color: var(--kd-color-ink) !important; }
.kd-top { position: relative; overflow: hidden; }
.kd-header .kd-logo__word { position: relative; z-index: 2; }
.kd-logo__mark { position: relative; display: block; width: 34px; height: 34px; flex-shrink: 0; }
.kd-logo__mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kd-logo__word { font-family: var(--kd-font-family-display); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.kd-nav { display: flex; align-items: center; gap: var(--kd-space-40); position: relative; z-index: 2; }
.kd-nav__link { font-size: 16px; font-weight: 500; }
.kd-nav__link--cta { font-weight: 600; }
.kd-burger { display: none; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; padding: 10px; cursor: pointer; color: var(--kd-color-ink); position: relative; z-index: 2; }
.kd-burger span { display: block; height: 2.5px; border-radius: 2px; background: currentColor; }
.kd-burger span + span { margin-top: 5px; }
.kd-btn--ruben .kd-avatar { --s: var(--kd-avatar-size-nav); }
.kd-btn--ruben.kd-btn--big .kd-avatar { --s: var(--kd-avatar-size-button); }

@media (max-width: 720px) {
  .kd-header__in { padding-block: 20px; }
  .kd-logo__mark { width: 24px; height: 24px; }
  .kd-logo__word { font-size: 18px; }
  .kd-nav { display: none; }
  .kd-burger { display: block; }
}

/* Nav island: floats in once the page header has scrolled away */
.kd-island { position: fixed; z-index: 50; top: 16px; left: 0; right: 0; pointer-events: none;
  transform: translateY(calc(-100% - 64px)); transition: transform var(--kd-motion-duration-base) var(--kd-motion-ease-out); }
.kd-island.is-on { transform: none; }
.kd-island__bar { pointer-events: auto; max-width: calc(var(--maxw) - 2 * var(--kd-space-96)); margin: 0 var(--gutter); height: 72px;
  padding: 0 10px 0 24px; display: flex; align-items: center; justify-content: space-between;
  background: var(--kd-color-white); border: var(--line); border-radius: var(--kd-radius-base); box-shadow: var(--kd-shadow-nav); }
@media (min-width: 1440px) { .kd-island__bar { margin: 0 auto; } }
.kd-island .kd-logo__mark { width: 28px; height: 28px; }
.kd-island .kd-logo__word { font-size: 19px; }
.kd-island .kd-nav { gap: 36px; }
.kd-island__mobile { display: none; align-items: center; gap: 14px; }
.kd-btn--bel { padding: 3px 14px 3px 3px; gap: 8px; font-size: 14px; }
.kd-btn--bel .kd-avatar { --s: var(--kd-avatar-size-mobile-nav); }
@media (max-width: 720px) {
  .kd-island { top: 12px; }
  .kd-island__bar { margin: 0 12px; height: 60px; padding: 0 4px 0 14px; }
  .kd-island .kd-nav { display: none; }
  .kd-island__mobile { display: flex; }
}

/* Mobile menu */
.kd-menu { position: fixed; inset: 0; z-index: 60; background: var(--kd-color-white); display: flex; flex-direction: column;
  padding: 20px var(--gutter) 40px; opacity: 0; visibility: hidden; transition: opacity var(--kd-motion-duration-fast) var(--kd-motion-ease-out), visibility 0s linear var(--kd-motion-duration-fast); }
.kd-menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.kd-menu__top { display: flex; align-items: center; justify-content: space-between; }
.kd-menu__close { width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; position: relative; color: var(--kd-color-ink); }
.kd-menu__close::before, .kd-menu__close::after { content: ''; position: absolute; left: 11px; right: 11px; top: 21px; height: 2.5px; border-radius: 2px; background: currentColor; }
.kd-menu__close::before { transform: rotate(45deg); }
.kd-menu__close::after { transform: rotate(-45deg); }
.kd-menu__links { display: flex; flex-direction: column; gap: var(--kd-space-8); margin-top: var(--kd-space-56); }
.kd-menu__links a { font-family: var(--kd-font-family-display); font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.15; }
.kd-menu__cta { margin-top: auto; }

/* ---------- Home: hero ---------- */
.kd-hero-wrap { position: relative; overflow: hidden; }
.kd-hero-sec { position: relative; z-index: 1; padding: 120px 0 136px; }
.kd-hero-sec__in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 36px; max-width: 1248px; margin: 0 auto; }
.kd-hero-sec h1 .kd-line { display: inline-block; white-space: nowrap; }
.kd-hero-sec .kd-lead { max-width: 760px; text-wrap: balance; }
.kd-hero-sec__cta { display: flex; align-items: center; justify-content: center; gap: var(--kd-space-24); flex-wrap: wrap; }
.kd-textlink { font-size: 16px; font-weight: 600; }
@media (max-width: 720px) {
  .kd-hero-sec { padding: 72px 0 48px; }
  .kd-hero-sec__in { gap: var(--kd-space-24); }
  .kd-hero-sec h1 .kd-line { white-space: normal; }
  .kd-hero-sec__cta { flex-direction: column; gap: 18px; }
  .kd-hero-sec__cta .kd-btn--big { font-size: 16px; padding: 4px 20px 4px 4px; }
  .kd-hero-sec__cta .kd-btn--big .kd-avatar { --s: var(--kd-avatar-size-nav); }
}

/* ---------- Grids and cards ---------- */
.kd-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kd-space-20); }
.kd-grid-75 { display: grid; grid-template-columns: 7fr 5fr; gap: var(--kd-space-20); }
.kd-grid-57 { display: grid; grid-template-columns: 5fr 7fr; gap: var(--kd-space-20); }
.kd-cell { display: flex; flex-direction: column; }
.kd-cell > * { flex-grow: 1; }
@media (max-width: 1023px) {
  .kd-grid3, .kd-grid-75, .kd-grid-57 { grid-template-columns: 1fr; gap: var(--kd-space-12); }
}

.kd-sechead { margin-bottom: var(--kd-space-48); }
.kd-h2--sm { font-size: 48px; }
@media (max-width: 720px) { .kd-h2--sm { font-size: 32px; } .kd-sechead { margin-bottom: var(--kd-space-28); } }

/* pain cards (the three moments) */
.kd-pain { display: flex; flex-direction: column; gap: 36px; min-height: 400px; }
.kd-pain__q { font-family: var(--kd-font-family-display); font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.03em; text-wrap: pretty; }
.kd-pain__want { margin-top: auto; min-height: 92px; padding-top: 18px; border-top: var(--kd-border-screen) solid color-mix(in srgb, currentColor 20%, transparent); display: flex; flex-direction: column; gap: 6px; }
.kd-pain__want .kd-label { font-size: 13px; opacity: .8; }
.kd-pain__want span:last-child { font-size: 18px; line-height: 1.45; }
@media (max-width: 1023px) { .kd-pain { min-height: 0; } .kd-pain__want { min-height: 0; } }
@media (max-width: 720px) { .kd-pain { padding: 28px; gap: 28px; } .kd-pain__q { font-size: 26px; } }

/* statement */
.kd-story { padding-block: 140px; view-timeline-name: --kd-statement; }
.kd-story .kd-statement { max-width: 1180px; text-wrap: pretty; }
.kd-story .kd-eyebrow { margin-bottom: var(--kd-space-48); }
@media (max-width: 720px) { .kd-story { padding-block: var(--kd-space-56); } .kd-story .kd-eyebrow { margin-bottom: var(--kd-space-28); } }
@supports (animation-timeline: view()) {
  .kd-sdot { display: inline-block; animation: kd-sdot linear both; animation-timeline: --kd-statement; }
  @keyframes kd-sdot { from { opacity: 0; transform: translateY(-.6em); } to { opacity: 1; transform: none; } }
}

/* services (on ink) */
.kd-services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--kd-space-64); margin-bottom: var(--kd-space-72); }
.kd-services__head > div { display: flex; flex-direction: column; gap: var(--kd-space-24); max-width: 820px; }
.kd-services__mark { width: 140px; height: 140px; flex-shrink: 0; }
.kd-svc { background: var(--kd-color-white); color: var(--kd-color-ink) !important; border-radius: var(--kd-radius-base); padding: 36px; display: flex; flex-direction: column; gap: 28px; min-height: 340px; }
.kd-svc:hover { color: var(--kd-color-ink) !important; }
.kd-svc__top { display: flex; align-items: center; justify-content: space-between; }
.kd-tag { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--kd-radius-base); background: var(--kd-color-mist); }
.kd-svc p { margin-top: auto; min-height: 52px; font-size: 18px; line-height: 1.45; color: var(--kd-color-text-body); text-wrap: pretty; }
.kd-svc .kd-arrow { font-size: 20px; }
.kd-services__more { margin-top: var(--kd-space-48); }
@media (max-width: 1023px) { .kd-svc { min-height: 0; } .kd-svc p { min-height: 0; } }
@media (max-width: 720px) {
  .kd-services__head { margin-bottom: var(--kd-space-40); }
  .kd-services__mark { width: 72px; height: 72px; }
  .kd-svc { padding: 28px; gap: 20px; }
  .kd-svc .kd-h3 { font-size: 28px; }
}

/* quotes */
.kd-quotes__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--kd-space-20); max-width: 980px; margin: 0 auto var(--kd-space-64); }
.kd-qcard { display: flex; flex-direction: column; gap: 28px; }
.kd-qcard--tall { min-height: 360px; }
.kd-qcard .kd-quote--sm { font-size: 24px; }
.kd-qcard figcaption { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.kd-qcard__face { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--kd-radius-avatar); background: color-mix(in srgb, var(--kd-color-ink) 10%, transparent); }
img.kd-qcard__face { display: block; height: 44px; object-fit: cover; }
.kd-qcard__face--shape { display: flex; align-items: center; justify-content: center; background: none; color: var(--kd-color-moment-apart-deep); }
.kd-qcard__name { font-size: 16px; font-weight: 600; }
.kd-qcard__role { font-size: 14px; color: var(--kd-color-text-muted); }
.kd-grid-75 + .kd-grid-57 { margin-top: var(--kd-space-20); }
@media (max-width: 1023px) { .kd-qcard--tall { min-height: 0; } .kd-grid-75 + .kd-grid-57 { margin-top: var(--kd-space-12); } }
@media (max-width: 720px) { .kd-quotes__head { margin-bottom: var(--kd-space-40); } .kd-qcard { padding: 28px; } .kd-qcard .kd-quote--sm { font-size: 20px; } }

/* seen & heard */
.kd-seen__head { display: flex; flex-direction: column; gap: var(--kd-space-20); margin-bottom: var(--kd-space-56); }
.kd-seen__grid { display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--kd-space-20); }
.kd-media { border-radius: var(--kd-radius-base); padding: 32px; display: flex; flex-direction: column; gap: var(--kd-space-20); background: var(--kd-color-mist); color: var(--kd-color-ink) !important; }
.kd-media:hover { color: var(--kd-color-ink) !important; }
.kd-media--big { grid-row: span 3; background: var(--kd-color-ink); color: var(--kd-color-white) !important; }
.kd-media--big:hover { color: var(--kd-color-white) !important; }
.kd-media__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kd-media__top .kd-label { font-size: 13px; color: var(--kd-color-text-muted); }
.kd-media--big .kd-media__top .kd-label { color: var(--kd-color-text-on-ink); }
.kd-pill { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: var(--kd-radius-base); background: var(--kd-color-white); color: var(--kd-color-ink); }
.kd-pill--pop { background: var(--kd-color-pop); color: var(--kd-color-white); }
.kd-media__photo { position: relative; flex-grow: 1; min-height: 300px; border-radius: var(--kd-radius-base); border-top-right-radius: 160px; overflow: hidden; background: var(--kd-color-mist); }
.kd-media__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 47% 38%; }
.kd-media__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.kd-media__foot > div { display: flex; flex-direction: column; gap: 6px; }
.kd-media__foot h3 { font-family: var(--kd-font-family-display); font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.kd-media--big .kd-media__foot h3 { font-size: 28px; }
.kd-media__foot span { font-size: 15px; color: var(--kd-color-text-muted); }
.kd-media--big .kd-media__foot span { color: var(--kd-color-text-on-ink); }
.kd-logos { margin-top: var(--kd-space-56); padding-top: var(--kd-space-24); border-top: var(--line); display: flex; align-items: center; gap: var(--kd-space-40); }
.kd-logos .kd-label { font-size: 13px; color: var(--kd-color-text-muted); flex-shrink: 0; }
.kd-logos__row { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; }
.kd-logos__row span { font-family: var(--kd-font-family-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--kd-color-text-faint); }
@media (max-width: 1023px) {
  .kd-seen__grid { grid-template-columns: 1fr; grid-template-rows: none; gap: var(--kd-space-12); }
  .kd-media--big { grid-row: auto; }
  .kd-logos { flex-direction: column; align-items: flex-start; gap: var(--kd-space-16); }
}
@media (max-width: 720px) {
  .kd-seen__head { margin-bottom: var(--kd-space-28); }
  .kd-media { padding: 24px; }
  .kd-media__photo { min-height: 220px; border-top-right-radius: 110px; }
  .kd-logos__row { gap: 10px 24px; }
  .kd-logos__row span { font-size: 18px; }
}

/* FAQ */
.kd-faqsec__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--kd-space-96); }
.kd-faqsec__grid > div:first-child { display: flex; flex-direction: column; gap: var(--kd-space-20); }
.kd-faqlist { border-bottom: var(--line); }
.kd-faq { border-top: var(--line); padding: 20px 0; }
.kd-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--kd-space-24); }
.kd-faq summary > span:first-child { font-family: var(--kd-font-family-display); font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.kd-faq__a p { margin-top: 14px; max-width: 660px; font-size: 18px; line-height: 1.55; color: var(--kd-color-text-body); text-wrap: pretty; }
@media (max-width: 1023px) { .kd-faqsec__grid { grid-template-columns: 1fr; gap: var(--kd-space-28); } }
@media (max-width: 720px) { .kd-faq summary > span:first-child { font-size: 20px; } .kd-faq__a p { font-size: 16px; } }

/* closing block */
.kd-closing { padding: 0 var(--kd-space-40) var(--kd-space-40); max-width: calc(var(--maxw) + 2 * var(--kd-space-40)); margin: 0 auto; }
.kd-closing__card { position: relative; overflow: hidden; background: var(--kd-color-ink); color: var(--kd-color-white); border-radius: var(--kd-radius-base); border-top-right-radius: var(--kd-radius-quarter-xl); padding: 112px 96px; }
.kd-closing__drift { position: absolute; right: 150px; bottom: 90px; opacity: .1; pointer-events: none; width: 220px; height: 220px; }
.kd-closing__in { position: relative; display: flex; flex-direction: column; gap: 32px; }
.kd-closing h2 { font-family: var(--kd-font-family-display); font-size: 68px; line-height: 1.02; font-weight: 700; letter-spacing: -0.045em; max-width: 1000px; text-wrap: balance; }
.kd-closing p { font-size: 20px; line-height: 1.55; color: var(--kd-color-text-on-ink); max-width: 680px; text-wrap: pretty; }
.kd-closing__cta { display: flex; align-items: center; gap: var(--kd-space-24); flex-wrap: wrap; }
@media (max-width: 1023px) { .kd-closing__card { padding: 80px 48px; } .kd-closing h2 { font-size: 52px; } }
@media (max-width: 720px) {
  .kd-closing { padding: 0 12px 12px; }
  .kd-closing__card { padding: 56px 24px; border-top-right-radius: var(--kd-radius-quarter-md); }
  .kd-closing__drift { right: -30px; bottom: 30px; width: 160px; height: 160px; }
  .kd-closing__in { gap: 24px; }
  .kd-closing h2 { font-size: 36px; }
  .kd-closing p { font-size: 17px; }
}

/* newsletter */
.kd-news { padding: 0 var(--kd-space-40) var(--kd-space-96); max-width: calc(var(--maxw) + 2 * var(--kd-space-40)); margin: 0 auto; }
.kd-news__card { position: relative; overflow: hidden; background: var(--kd-color-pink); border-radius: var(--kd-radius-base); padding: 80px 96px; }
.kd-news__shape { position: absolute; right: 64px; bottom: 0; width: 560px; height: 280px; }
.kd-news__in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; max-width: 720px; }
.kd-news h2 { font-family: var(--kd-font-family-display); font-size: 56px; line-height: 1.02; font-weight: 700; letter-spacing: -0.04em; text-wrap: balance; }
.kd-news p { font-size: 20px; line-height: 1.55; color: var(--kd-color-text-body); max-width: 560px; text-wrap: pretty; }
.kd-news form { display: flex; gap: 10px; width: 100%; max-width: 560px; }
.kd-news input[type=email] { flex-grow: 1; min-height: 52px; background: var(--kd-color-white); border: 0; border-radius: var(--kd-radius-base); padding: 0 18px; font: inherit; font-size: 16px; color: var(--kd-color-ink); }
.kd-news button { min-height: 52px; }
.kd-news__note { font-size: 14px; color: var(--kd-color-text-muted); }
.kd-news__msg { font-size: 16px; font-weight: 600; }
@media (max-width: 1023px) { .kd-news__card { padding: 64px 48px; } .kd-news__shape { width: 360px; height: 180px; right: 24px; } }
@media (max-width: 720px) {
  .kd-news { padding: 0 12px var(--kd-space-56); }
  .kd-news__card { padding: 48px 24px 140px; }
  .kd-news__shape { width: 240px; height: 120px; right: 16px; }
  .kd-news h2 { font-size: 32px; }
  .kd-news p { font-size: 17px; }
  .kd-news form { flex-direction: column; }
}

/* footer */
.kd-foot { border-top: var(--line); padding: 80px 0 48px; }
.kd-foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--kd-space-48); }
.kd-foot__grid > div { display: flex; flex-direction: column; gap: 12px; }
.kd-foot__grid > div:first-child { gap: 20px; }
.kd-foot__grid .kd-label { font-size: 13px; color: var(--kd-color-text-faint); }
.kd-foot__grid a, .kd-foot__grid span { font-size: 16px; }
.kd-foot__tag { font-size: 16px; font-weight: 600; }
.kd-foot__bar { margin-top: var(--kd-space-72); padding-top: var(--kd-space-24); border-top: var(--line); display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--kd-color-text-faint); }
.kd-foot__bar a { color: var(--kd-color-text-faint); }
.kd-foot__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.kd-foot__legal a, .kd-foot__legal button { color: var(--kd-color-text-faint); text-decoration: none; }
.kd-foot__legal button { font: inherit; padding: 0; border: 0; background: none; cursor: pointer; }
.kd-foot__legal a:hover, .kd-foot__legal button:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .kd-foot { padding: 48px 0 32px; }
  .kd-foot__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .kd-foot__grid > div:first-child { grid-column: 1 / -1; }
  .kd-foot__bar { flex-direction: column; margin-top: var(--kd-space-40); }
}

/* ---------- Hero intro: plays once, first visit to the home page ----------
   The four pieces of the mark start large, pale and scattered around the headline, drift apart,
   then fly into the logo spot and turn Ink. Choreography: brand/kit/reference/hero-intro-*.html.
   Start offsets are in reference pixels (1440 / 390 wide) and scaled by --k (set in the head script). */
.kdi-piece { position: absolute; inset: 0; }
.kdi-rot { width: 100%; height: 100%; }
.kdi-piece svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kd-intro .kdi-piece { animation: kdi-move var(--kdi-dur) linear both; transform-origin: 0 0; }
.kd-intro .kdi-rot { animation: kdi-rot var(--kdi-dur) linear both; }
.kd-intro .kdi-piece path { animation: kdi-fill var(--kdi-dur) linear both; }
.kd-intro .kdi-word { animation: kdi-fade .5s ease-out both; animation-delay: var(--kdi-word); }
.kd-intro .kdi-up { animation: kdi-up .8s var(--kd-motion-ease-out) both; }
.kd-intro .kdi-dot { display: inline-block; animation: kdi-dot .55s var(--kd-motion-ease-out) both; }
.kd-intro .kd-hero-sec .kd-dot { display: inline-block; }
@keyframes kdi-move {
  0%  { opacity: 0; transform: translate(calc(var(--x0) * var(--k) * 1px), calc(var(--y0) * 1px)) scale(var(--s0)); }
  12% { opacity: 1; transform: translate(calc(var(--x0) * var(--k) * 1px), calc(var(--y0) * 1px)) scale(var(--s1)); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  42% { opacity: 1; transform: translate(calc(var(--x1) * var(--k) * 1px), calc(var(--y1) * 1px)) scale(var(--s1)); animation-timing-function: cubic-bezier(.6,0,.2,1); }
  90%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes kdi-rot {
  0%, 12% { transform: rotate(var(--r0)); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  42% { transform: rotate(var(--r1)); animation-timing-function: cubic-bezier(.6,0,.2,1); }
  86%, 100% { transform: rotate(0deg); }
}
@keyframes kdi-fill { 0%, 70% { fill: var(--tint); stroke: var(--tint); } 86%, 100% { fill: var(--kd-color-ink); stroke: var(--kd-color-ink); } }
@keyframes kdi-up { 0% { opacity: 0; transform: translateY(22px); } 100% { opacity: 1; transform: none; } }
@keyframes kdi-dot { 0% { opacity: 0; transform: translateY(-60px) scale(.4); } 70% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 1; transform: none; } }
@keyframes kdi-fade { 0% { opacity: 0; transform: translateX(-6px); } 100% { opacity: 1; transform: none; } }

.kdi-p0 { --x0: -18; --y0: 251; --x1: -48; --y1: 221; --r0: -16deg; --r1: -22.4deg; --tint: var(--kd-color-moment-apart-tint); }
.kdi-p1 { --x0: 208; --y0: 545; --x1: 178; --y1: 585; --r0: 12deg; --r1: 16.8deg; --tint: var(--kd-color-moment-together-tint); }
.kdi-p2 { --x0: 1036; --y0: 245; --x1: 1076; --y1: 215; --r0: -10deg; --r1: -14deg; --tint: var(--kd-color-moment-together-tint); }
.kdi-p3 { --x0: 952; --y0: 588; --x1: 987; --y1: 618; --r0: 14deg; --r1: 19.6deg; --tint: var(--kd-color-moment-sheet-tint); }
.kdi-p0 .kdi-rot { transform-origin: 50% 28%; } .kdi-p1 .kdi-rot { transform-origin: 14% 80%; }
.kdi-p2 .kdi-rot { transform-origin: 86% 80%; } .kdi-p3 .kdi-rot { transform-origin: 50% 84%; }
:root { --kdi-dur: 3s; --kdi-word: 2.7s; --s0: 4.59; --s1: 5.4; }
@media (max-width: 720px) {
  :root { --kdi-dur: 2.6s; --kdi-word: 2.35s; --s0: 3.06; --s1: 3.6; }
  .kdi-p0 { --x0: 7; --y0: 106; --x1: -5; --y1: 92; }
  .kdi-p1 { --x0: 42; --y0: 431; --x1: 28; --y1: 451; }
  .kdi-p2 { --x0: 236; --y0: 211; --x1: 250; --y1: 197; }
  .kdi-p3 { --x0: 247; --y0: 467; --x1: 263; --y1: 485; }
}
.kd-intro .kdi-up { animation-delay: var(--dd, 0s); }
.kd-intro .kdi-dot { animation-delay: var(--dd, 0s); }
@media (max-width: 720px) { .kd-intro .kdi-up, .kd-intro .kdi-dot { animation-delay: var(--dm, var(--dd, 0s)); } }
@media (prefers-reduced-motion: reduce) { .kd-island { transition: none; } }

/* mobile refinements after comparing with reference/website/02-home-mobiel */
@media (max-width: 720px) {
  .kd-header .kd-burger { margin-block: -10px; }
  .kd-services__mark { display: none; }
  .kd-closing__drift { right: -48px; bottom: 16px; width: 150px; height: 150px; }
  .kd-foot__grid > div:first-child { flex-direction: row; align-items: center; gap: 14px; }
  .kd-foot__grid > div:first-child svg { width: 32px; height: 32px; }
  .kd-news__card { padding-bottom: 120px; }
}
.kd-header .kd-logo__mark { z-index: 0; }

/* Motion timing (25 Sep 2026, Ruben: "de animaties lijken achter"). The kit lets .kd-rise finish at
   entry 70% + 12% per card, so tall cards are still fading while you read them. Same movement,
   finished earlier. Kit copy (kommodoor.css) is left untouched; this override wins. */
@supports (animation-timeline: view()) {
  .kd-rise { animation-range: entry calc(var(--d, 0) * 5%) entry calc(30% + var(--d, 0) * 5%); }
  .kd-dot--drop { animation-range: entry 40% cover 25%; }
  .kd-line-in { animation-range: entry 30% cover 30%; }
}