/* Digital v3. Existing Case Study 2.0 styles are reused for the hero only. */
.kd-digital { --kdd-top: var(--kd-header-h, 76px); --kdd-room: calc(100svh - var(--kdd-top)); --kdd-section-gap: clamp(56px, 6vw, 96px); color: var(--kd-ink, #111); }
.kd-digital *, .kd-digital *::before, .kd-digital *::after { box-sizing: border-box; }
.kd-digital img { display: block; width: 100%; height: auto; max-width: 100%; }
.kd-digital figure { margin: 0; }
.kd-digital h1, .kd-digital h2 { margin: 0; font-weight: 400; }
.kd-digital p { margin: 0 0 1em; }
.kd-digital p:last-child { margin-bottom: 0; }
/* Hero uses kd-cs2-intro and its original responsive typography and padding. */
.kd-digital__lead { max-width: 680px; margin-top: 32px; font-size: 16px; line-height: 1.55; }
.kd-digital__visuals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.kd-digital__visual { width: 100%; aspect-ratio: 1; overflow: hidden; }
.kd-digital .kd-digital__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kd-digital__visuals--single { grid-template-columns: minmax(0, 1fr); }
.kd-digital__scroll-hint { display: none; }
/* Prevent browser scroll anchoring from following images inside moving viewports. */
.kd-digital__motion { overflow-anchor: none; }
.kd-digital__story, .kd-digital__device-section, .kd-digital__pages { margin-block: clamp(64px, 7vw, 112px); }
.kd-digital__motion { position: relative; }
.kd-digital__pin { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 24px; }
/* Headings sit before the pinned region, leaving the full viewport for devices. */
.kd-digital .kd-digital__section-title { padding-inline: var(--container-pad, 40px); width: 100%; margin: 0 0 var(--kdd-section-gap); text-align: center; font-size: clamp(24px, 3vw, 42px); line-height: 1.1; }
.kd-digital__viewport { width: 100%; min-width: 0; overflow-x: auto; flex-shrink: 0; }
.kd-digital__track { width: 100%; }
.kd-digital__panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(32px, 5vw, 80px); padding: clamp(32px, 4vw, 64px) max(var(--container-pad, 40px), calc((100vw - var(--container-width, 1600px)) / 2 + var(--container-pad, 40px))); border-block-start: 1px solid var(--kd-line, #ddd); }
.kd-digital__number { display: block; margin-bottom: 24px; font-size: 14px; line-height: 1.2; color: var(--kd-muted, #6e6e6e); }
.kd-digital .kd-digital__panel-label { font-size: clamp(44px, 5.3vw, 88px); line-height: .98; letter-spacing: -.04em; overflow-wrap: anywhere; }
.kd-digital .kd-digital__panel-title { margin: 0 0 24px; overflow-wrap: anywhere; }
.kd-digital__story-copy { max-width: 720px; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.kd-digital__pages .kd-digital__track { display: flex; gap: clamp(20px, 2vw, 32px); padding: 0 var(--container-pad, 40px); align-items: flex-start; }
.kd-digital__page { flex: 0 0 23%; min-width: 200px; }
.kd-digital__page a { display: block; height: clamp(420px, 82svh, 960px); overflow: hidden; background: #f2f2f2; border: 1px solid var(--kd-line, #ddd); }
.kd-digital__page img { width: 100%; height: auto; }
.kd-digital__device { flex-shrink: 0; padding: 10px; background: #161616; border: 1px solid #444; box-shadow: 0 18px 45px #0002; }
.kd-digital__device--desktop { width: min(1280px, 88vw); border-radius: 16px 16px 8px 8px; position: relative; margin-bottom: 12px; }
.kd-digital__device--desktop::after { content: ''; position: absolute; height: 10px; bottom: -10px; left: -4%; right: -4%; background: #b6b6b6; border-radius: 0 0 50% 50%; }
.kd-digital__screen { overflow: auto; background: #fff; border-radius: 5px; }
.kd-digital__device--desktop .kd-digital__screen { aspect-ratio: 16 / 10; }
.kd-digital__device--mobile { width: min(400px, 78vw); border-radius: 36px; }
.kd-digital__device--mobile .kd-digital__screen { aspect-ratio: 9 / 19.5; border-radius: 26px; }
.kd-digital__details { padding-block: clamp(48px, 6vw, 100px); }
.kd-digital__details h2 { font-size: clamp(32px, 4vw, 64px); }
.kd-digital__details figure { margin-top: 40px; }
.kd-digital__credits { padding-block: clamp(64px, 7vw, 112px); }
.kd-digital__credits-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px 56px; max-width: 1280px; margin: 0 auto; text-align: center; }
.kd-digital__credit { flex: 0 1 250px; min-width: 0; }
.kd-digital__credit dt { margin: 0 0 14px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--kd-muted, #6e6e6e); }
.kd-digital__credit dd { margin: 0; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.kd-digital__other { position: relative; margin-top: clamp(40px, 5vw, 80px); padding-block: clamp(40px, 5vw, 80px); }
.kd-digital__other::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--kd-black, #111); }
.kd-digital__other-strips { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 48px); }
.kd-digital__other .kd-strip { width: 100%; height: clamp(320px, 34vw, 620px); min-height: 0; overflow: hidden; }
.kd-digital__other .kd-strip > img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.kd-digital__other > h2 { margin: 0 0 clamp(24px, 3vw, 40px); text-align: center; font-size: clamp(32px, 4vw, 64px); line-height: 1; letter-spacing: -.04em; }
.kd-digital__other .kd-cs-card__title { color: var(--kd-ink, #111); font-size: clamp(18px, 1.4vw, 24px); line-height: 1.2; }
.kd-digital :focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
    .kd-digital__motion.is-enhanced .kd-digital__pin { position: sticky; top: var(--kdd-top); height: var(--kdd-room); }
    .kd-digital__motion.is-enhanced .kd-digital__viewport,
    .kd-digital__motion.is-enhanced .kd-digital__screen { overflow: hidden; scroll-behavior: auto; }
    .kd-digital__story.is-enhanced .kd-digital__track { display: flex; }
    .kd-digital__story.is-enhanced .kd-digital__panel { flex: 0 0 100%; min-width: 0; border-block: 1px solid var(--kd-line, #ddd); }
    .kd-digital__motion.is-enhanced .kd-digital__device--desktop { width: min(1280px, 88vw, calc((var(--kdd-room) - 72px) * 1.6)); }
    .kd-digital__motion.is-enhanced .kd-digital__device--mobile { width: min(400px, 78vw, calc((var(--kdd-room) - 64px) * .4615)); }
    .kd-digital__pages .is-enhanced .kd-digital__page a { height: calc(var(--kdd-room) - 56px); }
}
@media (min-width: 701px) and (max-width: 1024px) {
    .kd-digital__panel { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); padding-inline: 32px; gap: 28px; }
    .kd-digital .kd-digital__panel-label { font-size: clamp(40px, 5.3vw, 56px); }
    .kd-digital__page { flex-basis: 30%; min-width: 180px; }
}
@media (max-width: 700px) {
    .kd-digital__visuals { grid-template-columns: minmax(0, 1fr); }
    .kd-digital .kd-digital__scroll-hint { display: block; margin: 20px 24px 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--kd-muted, #6e6e6e); }
    .kd-digital { --kdd-section-gap: 40px; }
    .kd-digital__panel { grid-template-columns: 1fr; padding-inline: 24px; }
    .kd-digital__number { margin-bottom: 16px; }
    .kd-digital__page { flex-basis: 62%; min-width: 0; }
    .kd-digital__pages .kd-digital__track { padding-inline: 20px; }
    .kd-digital__credit { flex-basis: 100%; }
}