.kd-hero,.kd-story{--kd-gutter:clamp(18px,5vw,74px);color:var(--ink)}
.kd-hero{width:100%;max-width:1540px;margin-inline:auto;padding:clamp(37px,6vh,70px) clamp(8px,1.4vw,22px) clamp(40px,6.5vh,72px);text-align:center;display:grid;justify-items:center;grid-template-columns:minmax(0,1fr);overflow-x:clip}
.kd-hero-intro,.kd-hero-actions{position:relative;z-index:2}
.kd-hero-kicker{font-size:clamp(.88rem,1.35vw,1.08rem);font-weight:670;letter-spacing:-.015em;color:var(--muted);margin:0 0 10px}
.kd-hero h1,.kd-story h2{margin:0;font-size:clamp(3rem,6.05vw,5.7rem);font-weight:790;letter-spacing:-.055em;line-height:1.005;text-wrap:balance}
.kd-hero h1 br{display:none}
.kd-hero-gallery{position:relative;isolation:isolate;width:100%;height:clamp(302px,30vw,438px);margin:5px 0 clamp(28px,3vw,46px)}
.kd-hero-tile{position:absolute;left:var(--x);top:var(--y);width:var(--w);aspect-ratio:1;transform:translate(-50%,-50%);z-index:var(--layer,1)}
.kd-hero-tile:nth-child(1){--x:9%;--y:37%;--w:11%;--rx:13deg;--ry:-16deg;--rz:-15deg;--crop:78%}
.kd-hero-tile:nth-child(2){--x:23%;--y:63%;--w:14%;--rx:-7deg;--ry:15deg;--rz:10deg;--layer:3;--depth:1.18}
.kd-hero-tile:nth-child(3){--x:34.7%;--y:26%;--w:8.4%;--rx:14deg;--ry:17deg;--rz:-11deg;--crop:35%;--depth:.78}
.kd-hero-tile:nth-child(4){--x:47.2%;--y:60%;--w:18%;--rx:10deg;--ry:-13deg;--rz:-9deg;--layer:5;--depth:1.35}
.kd-hero-tile:nth-child(5){--x:59.6%;--y:24%;--w:9.6%;--rx:-12deg;--ry:-19deg;--rz:10deg;--depth:.78}
.kd-hero-tile:nth-child(6){--x:71%;--y:54%;--w:14.7%;--rx:12deg;--ry:-9deg;--rz:11deg;--layer:4;--depth:1.22}
.kd-hero-tile:nth-child(7){--x:83.6%;--y:27%;--w:9%;--rx:11deg;--ry:18deg;--rz:-13deg;--crop:63%;--depth:.78}
.kd-hero-tile:nth-child(8){--x:92%;--y:64%;--w:11.3%;--rx:-13deg;--ry:-12deg;--rz:12deg;--layer:3}
.kd-hero-tile:nth-child(9){--x:34.9%;--y:83%;--w:8.1%;--rx:12deg;--ry:-20deg;--rz:-14deg;--crop:3%;--crop-scale:1.48;--crop-origin:25% 12%}
.kd-hero-tile:nth-child(10){--x:60.7%;--y:84%;--w:8%;--rx:15deg;--ry:13deg;--rz:13deg;--crop:100%;--crop-scale:1.44;--crop-origin:76% 80%}
.kd-hero-magnet{--magnet-depth:clamp(1.5px,calc(.29vw * var(--depth,1)),5px);display:block;width:100%;height:100%;padding:0;border:0;appearance:none;overflow:hidden;box-shadow:0 var(--magnet-depth) 1px #303035cb;filter:url(#magnet-shadow-studio);transform:translateY(var(--lift,0px)) perspective(730px) rotateX(var(--live-rx,var(--rx))) rotateY(var(--live-ry,var(--ry))) rotateZ(var(--live-rz,var(--rz))) scale(var(--scale,1));transition:transform .33s cubic-bezier(.2,.75,.23,1);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.kd-hero-magnet img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--crop,50%) 50%;border-radius:inherit;transform:scale(var(--crop-scale,1));transform-origin:var(--crop-origin,50% 50%);pointer-events:none}
.kd-hero-tile:is(.is-inspected,:has(.kd-hero-magnet:focus-visible)){--live-rx:0deg;--live-ry:0deg;--live-rz:0deg;--scale:1.24;--lift:-7px;z-index:12}
@media(hover:hover) and (pointer:fine){
  .kd-hero-tile:hover{--live-rx:0deg;--live-ry:0deg;--live-rz:0deg;--scale:1.24;--lift:-7px;z-index:13}
}
.kd-hero-tile.has-magnet-3d .kd-hero-magnet{position:relative;background:transparent;box-shadow:none;overflow:visible;filter:none;transform:translateY(calc(-7px * var(--kd-pose,0))) scale(calc(1 + .24 * var(--kd-pose,0)));transition:none}
.kd-hero-tile.has-magnet-3d .kd-hero-magnet::after{content:none}
.kd-hero-tile.has-magnet-3d .kd-hero-magnet img{visibility:hidden}
.kd-hero-canvas{display:none;position:absolute;left:50%;top:50%;width:146%;height:146%;transform:translate(-50%,-50%);pointer-events:none;filter:url(#magnet-shadow-studio)}
.kd-hero-tile.has-magnet-3d .kd-hero-canvas{display:block}
.kd-hero-actions{display:grid;justify-items:center}
.kd-hero-cta{white-space:nowrap}
.kd-story-face img,.kd-story-mini img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none}

.kd-story{width:min(100% - var(--kd-gutter) * 2, 1340px);margin:0 auto clamp(40px,8vw,106px)}
.kd-story.kd-scroll-active{min-height:calc(var(--kd-sticky-height,630px) + clamp(650px,124svh,1180px))}
.kd-story-sticky{padding:clamp(28px,5vh,57px) 0 18px;display:grid;justify-items:center;grid-template-columns:minmax(0,1fr);text-align:center}
.kd-story.kd-scroll-active .kd-story-sticky{position:sticky;top:var(--kd-top,74px)}
.kd-story h2{font-size:clamp(2rem,4.2vw,4.45rem)}
.kd-story-mobile-break{display:none}
.kd-story-visual{width:100%;height:clamp(340px,65svh,550px);position:relative;isolation:isolate;container-type:size;overflow:clip;--camera:1;--kd-world-width:88%;--kd-world-max:530px;--kd-world-margin:48px;--tile-x:79.2%;--tile-y:80.25%;--tile-width:12.8%;--tile-ratio:1;--tile-spin:-2deg;--tile-turn:0deg;--tile-edge:1;--tile-shadow:1;--tile-lift:0;--tile-radius:4.2%;--guide-alpha:0;--guide-size:100%;--door-alpha:1;--companions:1;--companions-scale:1}
/* Fit the projected door to both edges of the stage, with space for its shadow. */
.kd-story-visual{overflow-clip-margin:12px}
.kd-story-world{width:min(var(--kd-world-width),var(--kd-world-max),calc((100% - 30px) / var(--camera)),calc((100cqh - var(--kd-world-margin)) * 1.26 / var(--camera)));aspect-ratio:1.26;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(var(--camera));transform-origin:50% 50%}
.kd-story-door{position:absolute;inset:0;border-radius:8% 8% 7% 7% / 10% 10% 8% 8%;border:1px solid var(--line);background:#ececee;box-shadow:inset 0 1px #fff,5px 6px 0 #d7d7db,12px 20px 30px -17px #0003;opacity:var(--door-alpha)}
.kd-story-door::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 1px 1px 3px #fff, inset -1px -1px 3px #0002}
.kd-story-handle{position:absolute;top:21%;right:5.8%;width:2.6%;height:30%;border-radius:999px;background:#bdbdc2;box-shadow:inset 1px 0 2px #fff9,3px 3px 4px #0002}
/* The last cell is reserved for the moving magnet; these insets define its final center. */
.kd-story-grid{position:absolute;inset:12% 13% 10% 9%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));place-items:center;opacity:var(--companions)}
.kd-story-mini{width:82%;aspect-ratio:1;--magnet-depth:clamp(.65px,.18vw,1.15px);transform:rotate(var(--r,1deg)) scale(var(--companions-scale))}
.kd-story-mini:nth-child(3n+1){--r:-2.5deg}
.kd-story-mini:nth-child(4n+2){--r:2deg}
.kd-story-mini:nth-child(5n+2) img{object-position:39% 50%}
.kd-story-mini:nth-child(5n+4) img{object-position:61% 50%}
.kd-story-mini:not([data-kd-render="mesh"]){box-shadow:none;filter:url(#magnet-shadow-door)}
.kd-story-morph{position:absolute;width:var(--tile-width);aspect-ratio:var(--tile-ratio);left:var(--tile-x);top:var(--tile-y);--magnet-shape-radius:var(--tile-radius);--magnet-finish:var(--tile-edge);--magnet-depth:var(--edge-y,1px);box-shadow:0 var(--magnet-depth) calc(var(--magnet-depth) * .4) #28282ab9,calc(1.5px * var(--tile-shadow)) calc(2px * var(--tile-shadow) + 9px * var(--tile-lift)) calc(3px + 12px * var(--tile-lift)) #0003;transform:translate(-50%,-50%) perspective(630px) rotateY(var(--tile-turn)) rotateZ(var(--tile-spin));z-index:1}
.kd-story-face{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.kd-story-mesh{display:none;position:absolute;left:50%;top:50%;width:125%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;max-width:none}
.kd-story-mini[data-kd-render="mesh"]{transform:scale(var(--companions-scale));box-shadow:none}
.kd-story-mini[data-kd-render="mesh"] img{opacity:0}
.kd-story-mini[data-kd-render="mesh"] .kd-story-mesh{display:block;filter:url(#magnet-shadow-door)}
.kd-story-morph[data-kd-render="mesh"]{transform:translate(-50%,-50%);box-shadow:none}
.kd-story-morph[data-kd-render="mesh"] .kd-story-face{
  opacity:calc(1 - var(--mesh-alpha));transform:perspective(630px) rotateY(var(--tile-turn)) rotateZ(var(--tile-spin));
  box-shadow:1px 2px 4px #1d1d1f27
}
.kd-story-morph[data-kd-render="mesh"] .kd-story-mesh{
  display:block;width:150%;opacity:var(--mesh-alpha);
  filter:drop-shadow(1px calc(2px + 9px * var(--tile-lift)) calc(2px + 6px * var(--tile-lift)) #1d1d1f44)
}
.kd-story-visual[data-kd-mounted] .kd-story-morph:not([data-kd-render="mesh"]){box-shadow:none;filter:url(#magnet-shadow-door)}
.kd-story-visual[data-kd-mounted] .kd-story-morph[data-kd-render="mesh"] .kd-story-mesh{filter:url(#magnet-shadow-door)}
.kd-story-visual [data-kd-render="mesh"]::after{display:none}
.kd-story-guide{position:absolute;left:50%;top:50%;width:var(--guide-size);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #fff;box-shadow:0 0 0 500px #0006;opacity:var(--guide-alpha)}
.kd-story-stage{display:grid;place-items:center;margin:0;color:var(--muted);font-size:.79rem;font-weight:680}
.kd-story-stage span{grid-area:1/1;visibility:hidden;padding:4px 0}
.kd-story-stage .is-current{visibility:visible}
.kd-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media(max-width:760px){
  .kd-hero h1 br{display:initial}.kd-hero h1{font-size:clamp(2.68rem,9.4vw,4.45rem);line-height:1.005}.kd-hero{padding-top:32px;padding-bottom:41px}
  .kd-hero-kicker{margin-bottom:11px}
  .kd-hero-gallery{height:clamp(256px,74vw,535px);margin:8px 0 clamp(24px,6vw,42px)}
  .kd-hero-tile:nth-child(1){--x:13%;--y:22%;--w:19.5%}
  .kd-hero-tile:nth-child(2){--x:37.5%;--y:28%;--w:24%}
  .kd-hero-tile:nth-child(3){--x:63.5%;--y:18.5%;--w:18%}
  .kd-hero-tile:nth-child(4){--x:61.5%;--y:51%;--w:34%}
  .kd-hero-tile:nth-child(5){--x:87%;--y:25%;--w:18.5%}
  .kd-hero-tile:nth-child(6){--x:20%;--y:56%;--w:26%}
  .kd-hero-tile:nth-child(7){--x:87%;--y:59%;--w:18%}
  .kd-hero-tile:nth-child(8){--x:14%;--y:84%;--w:18.5%}
  .kd-hero-tile:nth-child(9){--x:40%;--y:82%;--w:20%}
  .kd-hero-tile:nth-child(10){--x:73%;--y:83%;--w:21%}
  .kd-story{--kd-top:60px}.kd-story.kd-scroll-active{min-height:calc(var(--kd-sticky-height,430px) + clamp(580px,109svh,950px))}
  .kd-story h2{font-size:clamp(2.02rem,7.3vw,3.65rem)}.kd-story-sticky{padding-top:30px}.kd-story-visual{height:clamp(262px,79vw,405px);--kd-world-width:89%;--kd-world-max:430px;--kd-world-margin:40px}
}
@media(max-width:430px){.kd-story-mobile-break{display:initial}}
@media(max-width:360px){.kd-hero h1{font-size:2.47rem}}
@media(max-height:690px) and (min-width:761px){.kd-story-visual{height:clamp(245px,63svh,430px)}.kd-story-sticky{padding-top:24px}}
@media(prefers-reduced-motion:reduce){.kd-hero-magnet{transition:none}}