body[data-page="branding"] { --ground: #dcd8d1; --print: #f7f4ee; }


.bk-hero { position: relative; z-index: 2; isolation: isolate; overflow: clip; min-height: 100svh; display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2vw; align-items: center;
  padding: clamp(118px, 15svh, 150px) var(--m) clamp(60px, 9svh, 100px); background: var(--ground); color: var(--ink); }
.bk-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: var(--grain); mix-blend-mode: multiply; }
.bk-copy { position: relative; z-index: 3; }
.bk-hero h1 { max-width: 9.5ch; margin: 0; font: 400 clamp(48px, 6.6vw, 112px)/.95 var(--display); letter-spacing: -.012em; }
.bk-hero .lead { max-width: 27em; color: #2b2925; }
.bk-hero .acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 4svh, 40px); }
.bk-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: clamp(26px, 4svh, 40px) 0 0; padding: 0; list-style: none; font-size: 14px; color: #4a4740; }
.bk-facts li { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); min-width: 9em; }
.bk-facts b { font-weight: 500; color: var(--ink); font-size: 15px; }

.bk-stage { position: relative; margin: 0; min-height: min(68svh, 640px); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; perspective: 1200px; }
.bk-build { position: relative; z-index: 2; width: 100%; aspect-ratio: 1744 / 720; margin: 15% 0 13%; }
.bk-grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.bk-grid .g-l path { stroke: rgba(17, 17, 17, .34); stroke-width: 2.6; }
.bk-grid .g-c > * { stroke: var(--blue); stroke-width: 2.4; opacity: .55; }
.bk-grid .g-d path { stroke: var(--stop); stroke-width: 5; }
.bk-grid .g-d .dim { transform-box: fill-box; transform-origin: 0 50%; }
.bk-grid .g-t text { fill: #4a4740; font: 500 30px var(--body); letter-spacing: .06em; }
.bk-grid [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--heavy); transition-delay: calc(var(--i, 0) * 70ms); }
.bk-grid .g-d, .bk-grid .g-t { opacity: 0; transition: opacity .8s ease 1.6s; }
.bk-hero.go .bk-grid [pathLength] { stroke-dashoffset: 0; }
.bk-hero.go .bk-grid .g-d, .bk-hero.go .bk-grid .g-t { opacity: 1; }
.bk-grid .g-d .dim { transform: scaleX(.02); transition: transform 1.6s var(--heavy) 2.1s; }
.bk-hero.go .bk-grid .g-d .dim { transform: none; }
.bk-mark { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: var(--blue); clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--heavy) 1.1s; }
.bk-mark svg { display: block; height: 100%; width: var(--mw, 85%); }
.bk-hero.go .bk-mark { clip-path: inset(-10% -10% -10% -10%); }
.bk-stage figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


.fl { position: absolute; z-index: 3; display: block; height: auto; border: 7px solid var(--print); border-radius: 5px; background: var(--print);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 22px 44px -18px rgba(30, 24, 12, .5), 0 4px 10px -4px rgba(30, 24, 12, .25);
  opacity: 0; scale: .55; rotate: var(--rot); transition: opacity .7s ease, scale 1.1s var(--pop), box-shadow .5s;
  transition-delay: calc(var(--i, 0) * 110ms + 300ms); will-change: translate, transform; }
.bk-hero.go .fl { opacity: 1; scale: 1; }
.fl.f1 { --rot: -7deg; width: clamp(110px, 10.5vw, 168px); left: -3%; top: 0; }
.fl.f2 { --rot: 4deg; width: clamp(150px, 15vw, 236px); right: -1%; top: 2%; }
.fl.f3 { --rot: 9deg; width: clamp(80px, 7.4vw, 118px); left: 47%; top: 3%; }
.fl.f4 { --rot: -5deg; width: clamp(96px, 9.4vw, 150px); right: 0; bottom: -4%; }
.fl.f5 { --rot: 6deg; width: clamp(120px, 11.6vw, 186px); left: 38%; bottom: -2%; }
.fl.f6 { --rot: -3deg; width: clamp(120px, 12vw, 192px); left: 2%; bottom: 0; }


.bk-kit { position: relative; z-index: 2; isolation: isolate; color: var(--bone);
  background: radial-gradient(70% 60% at 85% 0%, rgba(255, 255, 255, .14), transparent 70%), linear-gradient(180deg, #2331e0, var(--blue) 50%, var(--deep)); }
.bk-kit::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .28; background-image: var(--grain); }
.kit-stick { padding: clamp(90px, 12vh, 140px) 0 clamp(70px, 10vh, 120px); }
.kit-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4vw; align-items: end; padding: 0 var(--m); max-width: calc(var(--wide) + 2 * var(--m)); margin: 0 auto; }
.kit-head h2 { margin: 0; font: 400 clamp(34px, 4.2vw, 68px)/1 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.kit-head p { margin: 0; font-size: 17px; line-height: 1.55; opacity: .86; max-width: 32em; }
.kit-view { margin-top: clamp(40px, 7vh, 80px); }
.kit-track { list-style: none; margin: 0; padding: 0 var(--m); display: grid; gap: clamp(70px, 10vh, 120px); max-width: calc(var(--wide) + 2 * var(--m)); margin-inline: auto; }
.ch { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 70px); align-items: center; }
.ch-n { display: inline-flex; align-items: center; gap: 10px; font: 400 15px/1 var(--display); letter-spacing: .08em; }
.ch-n::after { content: ""; width: 12px; height: 9px; border-radius: 2px; background: var(--stop); }
.ch h3 { margin: 14px 0 18px; font: 400 clamp(36px, 3.8vw, 60px)/1 var(--display); letter-spacing: -.01em; }
.ch-txt p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; opacity: .88; max-width: 30em; }
.ch-vis { position: relative; perspective: 1400px; }
.ch .ph { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.kit-rail { display: none; }


.mark-vis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.mark-vis .tile { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; }
.mark-vis .tile small { position: absolute; left: 16px; bottom: 12px; font-size: 13px; letter-spacing: .04em; opacity: .7; }
.mark-vis .t-bone { background: var(--bone); color: var(--blue); }
.mark-vis .t-ink { background: var(--ink); color: var(--bone); }
.mark-vis .tile span { position: absolute; inset: 16% 12% 22%; } .mark-vis .t-ink span { inset: 18% 30% 24%; }
.mark-vis .tile svg { display: block; width: 100%; height: 100%; }
.mark-vis > * { transform-origin: 50% 100%; }


.sw { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; height: clamp(300px, 46vh, 460px); }
.sw li { position: relative; flex: 1 1 0; min-width: 0; border-radius: 8px; padding: 16px 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  font-size: 13px; transform-origin: 50% 0; transition: flex-grow .7s var(--glide); }
.sw li:hover { flex-grow: 1.9; }
.sw b { font: 400 clamp(15px, 1.25vw, 19px)/1.1 var(--display); }
.sw code { font: 500 13px/1.3 var(--body); letter-spacing: .04em; }
.sw span { opacity: .7; }
.sw .s-blue { background: var(--blue); color: var(--bone); box-shadow: inset 0 0 0 1px rgba(239, 235, 227, .45); }
.sw .s-bone { background: var(--bone); color: var(--ink); }
.sw .s-ink { background: var(--ink); color: var(--bone); }
.sw .s-ground { background: #dcd8d1; color: var(--ink); }
.sw .s-loud { background: var(--stop); color: var(--ink); }
.season { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.season li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid var(--line-b); }
.season li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--c); }
.season .z1 { --c: #b7a6e8; } .season .z2 { --c: #e8a60f; } .season .z3 { --c: #b8321f; } .season .z4 { --c: #1f4a3a; }


.type-vis { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.spec { position: relative; border-radius: 8px; padding: 22px 22px 20px; overflow: hidden; }
.spec small { display: block; font-size: 13px; letter-spacing: .04em; opacity: .7; margin-top: 4px; }
.spec .aa { display: block; line-height: .9; transform-origin: 0 100%; }
.sp-d { grid-row: span 2; background: var(--bone); color: var(--ink); display: flex; flex-direction: column; }
.sp-d .aa { font: 400 clamp(110px, 13vw, 210px)/.9 var(--display); color: var(--blue); }
.sp-d .abc { margin-top: auto; padding-top: 18px; font: 400 clamp(17px, 1.6vw, 24px)/1.15 var(--display); letter-spacing: .02em; overflow-wrap: anywhere; }
.sp-l { background: var(--ink); color: var(--bone); }
.sp-l .aa { font: 300 clamp(64px, 6.4vw, 100px)/.9 var(--body); }
.sp-l p { margin: 6px 0 0; font-size: 16px; }
.sp-l .w3 { font-weight: 300; margin-top: 14px; } .sp-l .w4 { font-weight: 400; } .sp-l .w5 { font-weight: 500; }
.type-vis .ph { aspect-ratio: auto; height: 100%; min-height: 150px; }


.path-vis { display: grid; grid-template-columns: .8fr 1fr; gap: 14px; align-items: center; }
.river { display: block; width: 100%; height: auto; border-radius: 8px; background: #dcd8d1; padding: 8%; grid-row: span 3; }
.river .ln { fill: none; stroke: var(--blue); stroke-width: 300; stroke-dasharray: 1; stroke-dashoffset: 1; }
.river .wd { fill: var(--ink); } .river .nq { fill: var(--blue); }
.path-vis .p2 { width: 92%; justify-self: end; } .path-vis .p3 { width: 84%; }


.day-vis { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.day-vis .d1 { grid-row: span 2; height: 100%; aspect-ratio: auto; }


.bk-js .mark-vis > *, .bk-js .type-vis > *, .bk-js .day-vis > *, .bk-js .path-vis .ph { opacity: 0; transform: translateY(40px) rotateX(-24deg) scale(.94);
  transition: opacity .7s ease, transform 1.2s var(--glide); transition-delay: calc(var(--i, 0) * 110ms + 150ms); }
.bk-js .sw li { opacity: 0; transform: rotateX(-88deg); transition: opacity .5s ease, transform 1.1s var(--pop), flex-grow .7s var(--glide); transition-delay: calc(var(--i, 0) * 120ms + 150ms); }
.bk-js .season li { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .8s var(--glide); transition-delay: calc(var(--i, 0) * 80ms + 800ms); }
.bk-js .ch .aa { transform: scale(.4); opacity: 0; transition: transform 1.3s var(--pop) .25s, opacity .6s ease .25s; }
.bk-js .river .ln { transition: stroke-dashoffset 2.2s var(--heavy) .3s; }
.bk-js .ch-txt > * { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform 1s var(--glide); transition-delay: calc(var(--i, 0) * 90ms); }
.ch.on .mark-vis > *, .ch.on .type-vis > *, .ch.on .day-vis > *, .ch.on .path-vis .ph, .ch.on .sw li, .ch.on .season li, .ch.on .ch-txt > * { opacity: 1; transform: none; }
.ch.on .aa { transform: none; opacity: 1; }
.ch.on .river .ln { stroke-dashoffset: 0; }


@media (min-width: 1024px) {
  .bk-kit.pin .kit-stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
    padding: clamp(96px, 13vh, 124px) 0 26px; }
  .bk-kit.pin .kit-view { margin-top: clamp(20px, 4vh, 44px); min-height: 0; }
  .bk-kit.pin .kit-track { display: flex; gap: 6vw; height: 100%; max-width: none; margin: 0; will-change: transform; }
  .bk-kit.pin .ch { flex: none; width: min(1180px, 84vw); height: 100%; }
  .bk-kit.pin .ch-vis { max-height: var(--avail, 60vh); }
  .bk-kit.pin .sw { height: min(calc(var(--avail, 60vh) - 60px), 440px); }
  .bk-kit.pin .mark-vis { width: min(100%, calc(var(--avail, 60vh) * 1.3)); justify-self: end; }
  .bk-kit.pin .type-vis { height: min(var(--avail, 60vh), 500px); grid-template-rows: auto minmax(0, 1fr); }
  .bk-kit.pin .sp-d .aa { font-size: min(13vw, 21vh); }
  .bk-kit.pin .type-vis .ph { min-height: 0; }
  .bk-kit.pin .path-vis { height: min(var(--avail, 60vh), 540px); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .bk-kit.pin .path-vis .ph { height: 100%; aspect-ratio: auto; }
  .bk-kit.pin .river { height: 100%; width: auto; max-width: 100%; justify-self: center; }
  .bk-kit.pin .day-vis { height: min(var(--avail, 60vh), 500px); }
  .bk-kit.pin .day-vis .ph { height: 100%; aspect-ratio: auto; }
  .bk-kit.pin .kit-rail { position: relative; display: flex; justify-content: center; gap: clamp(18px, 3vw, 48px); margin: 0 var(--m); padding-top: 18px; border-top: 1px solid var(--line-b); }
  .rail-ink { position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--bone); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  .kit-rail button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; border: 0; background: none; color: inherit; cursor: pointer;
    font: 500 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .55; transition: opacity .4s; }
  .kit-rail button::before { content: ""; width: 8px; height: 6px; border-radius: 1.5px; background: var(--stop); transform: scale(0); transition: transform .5s var(--pop); }
  .kit-rail button:hover, .kit-rail button.on { opacity: 1; }
  .kit-rail button.on::before { transform: none; }
}


.bk-get { position: relative; z-index: 2; padding: clamp(90px, 14vh, 160px) var(--m); background: var(--bone); color: var(--ink); }
.get-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4vw; align-items: end; }
.get-head h2 { margin: 0; font: 400 clamp(38px, 5vw, 80px)/1 var(--display); letter-spacing: -.01em; }
.get-head p { margin: 0; max-width: 32em; color: var(--mute); font-size: 18px; }
.knoll { list-style: none; margin: clamp(44px, 7vh, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.knoll li { padding: 18px 18px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.knoll h3 { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; font: 400 21px/1.15 var(--display); }
.knoll p { margin: 0; color: var(--mute); font-size: 16px; line-height: 1.55; }
.knoll .ic { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background-color .4s, color .4s, border-color .4s, transform .6s var(--pop); }
.knoll .ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.k-art { position: relative; aspect-ratio: 1 / 1; border-radius: 6px; background: #e3ded4; display: grid; place-items: center; overflow: hidden; transition: transform .8s var(--glide); }
.knoll li:hover .k-art { transform: translateY(-6px) rotate(-1.5deg); }
.knoll li:hover .ic { background: var(--blue); border-color: var(--blue); color: var(--bone); transform: rotate(-10deg); }
.k-logo .big { width: 72%; color: var(--blue); } .k-logo .big svg, .k-logo .sm svg { display: block; width: 100%; height: auto; }
.k-logo .sm { position: absolute; right: 10%; bottom: 10%; width: 17%; padding: 3%; border-radius: 6px; background: var(--ink); color: var(--bone); }
.k-col .k-art { display: flex; justify-content: center; align-items: center; }
.k-col i { width: 34%; aspect-ratio: 1; border-radius: 50%; margin: 0 -6%; transition: margin .9s var(--glide) .3s; }
.k-col i:nth-child(1) { background: var(--blue); } .k-col i:nth-child(2) { background: var(--bone); box-shadow: inset 0 0 0 1px var(--line); }
.k-col i:nth-child(3) { background: var(--ink); } .k-col i:nth-child(4) { background: var(--stop); }
.k-col.in i { margin: 0 -11%; }
.k-type .k-art { grid-auto-flow: column; gap: 6%; }
.k-type .a1 { font: 400 clamp(46px, 5vw, 84px)/1 var(--display); color: var(--blue); }
.k-type .a2 { font: 300 clamp(40px, 4.4vw, 74px)/1 var(--body); }
.k-guide .k-art { grid-auto-flow: column; gap: 0; perspective: 600px; }
.k-guide .pg { width: 34%; aspect-ratio: 3 / 4; background: var(--print); box-shadow: inset 0 0 0 1px var(--line); padding: 8% 7%; display: grid; align-content: start; gap: 9%; transition: transform 1s var(--glide) .3s; }
.k-guide .pg:first-child { transform-origin: 100% 50%; transform: rotateY(50deg); }
.k-guide.in .pg:first-child { transform: none; }
.k-guide .pg i { display: block; height: 5px; border-radius: 3px; background: rgba(17, 17, 17, .18); }
.k-guide .pg i:first-child { height: 12px; width: 70%; background: var(--blue); }
.k-guide .pg i:last-child { width: 60%; }
.k-files .k-art { grid-auto-flow: row; gap: 8px; align-content: center; }
.k-files span { width: 7em; height: 34px; display: grid; place-items: center; border-radius: 999px; font: 500 13px/1 var(--body); letter-spacing: .1em; border: 1px solid var(--line); background: var(--print);
  transition: transform .9s var(--pop); }
.k-files span:nth-child(1) { background: var(--blue); color: var(--bone); border-color: var(--blue); }
.k-files span:nth-child(2) { transform: translateX(-14%); } .k-files span:nth-child(3) { transform: translateX(14%); }
.k-files.in span:nth-child(2), .k-files.in span:nth-child(3) { transform: none; }


.bk-web { position: relative; z-index: 2; padding: clamp(90px, 14vh, 160px) var(--m); background: var(--ink); color: var(--bone); overflow: clip; }
.web-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.bk-web h2 { margin: 0 0 26px; font: 400 clamp(34px, 4vw, 62px)/1.02 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.web-txt p { margin: 0 0 16px; font-size: 18px; line-height: 1.6; opacity: .86; max-width: 31em; }
.web-txt a { color: var(--bone); text-decoration-color: var(--stop); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.web-vis { position: relative; min-height: clamp(380px, 46vw, 600px); }
.flow { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.flow path { stroke: var(--blue); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1.6s var(--heavy); transition-delay: calc(var(--i, 0) * 160ms + 300ms); }
.chips { position: absolute; z-index: 2; left: 0; top: 4%; height: 70%; margin: 0; padding: 0; list-style: none; display: grid; align-content: space-between; }
.chips li { width: clamp(76px, 7vw, 108px); aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; opacity: 0; transform: scale(.6);
  transition: opacity .5s ease, transform .9s var(--pop); transition-delay: calc(var(--i, 0) * 140ms); }
.chips .c-mark { background: var(--bone); color: var(--blue); padding: 14px; } .chips .c-mark span, .chips .c-mark svg { display: block; width: 100%; height: auto; }
.chips .c-col { background: #1d1d1f; display: flex; justify-content: center; align-items: center; box-shadow: inset 0 0 0 1px rgba(239, 235, 227, .14); }
.chips .c-col i { width: 30%; aspect-ratio: 1; border-radius: 50%; margin: 0 -4%; }
.chips .c-col i:nth-child(1) { background: var(--blue); } .chips .c-col i:nth-child(2) { background: var(--bone); } .chips .c-col i:nth-child(3) { background: var(--stop); }
.chips .c-aa { background: var(--blue); font: 400 clamp(30px, 2.8vw, 44px)/1 var(--display); }
.bwin { position: absolute; z-index: 1; right: 0; top: 10%; width: 74%; margin: 0; border-radius: 12px; overflow: hidden; background: #1d1d1f;
  box-shadow: 0 0 0 1px rgba(239, 235, 227, .14); opacity: 0; transform: translateX(60px) perspective(1400px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: opacity .8s ease .5s, transform 1.2s var(--glide) .5s; }
.bwin .bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; font-size: 12px; color: rgba(239, 235, 227, .7); }
.bwin .bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(239, 235, 227, .22); }
.bwin .bar span { margin-left: 12px; padding: 4px 14px; border-radius: 999px; background: rgba(239, 235, 227, .08); }
.bwin img { display: block; width: 100%; height: auto; }
.bphone { position: absolute; z-index: 2; right: 5%; bottom: 0; width: clamp(110px, 12vw, 170px); margin: 0; padding: 6px; border-radius: 26px; background: #0b0b0c;
  box-shadow: 0 0 0 1px rgba(239, 235, 227, .18); opacity: 0; transform: translateY(80px) rotate(4deg); transition: opacity .7s ease 1s, transform 1.3s var(--pop) 1s; }
.bphone img { display: block; width: 100%; height: auto; border-radius: 20px; }
.web-vis.on .flow path { stroke-dashoffset: 0; } .web-vis.on .chips li { opacity: 1; transform: none; }
.web-vis.on .bwin { opacity: 1; transform: perspective(1400px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: opacity .8s ease .5s, transform 1.2s var(--glide) .5s; }
.web-vis.on.settled .bwin { transition: transform .5s var(--glide); }
.web-vis.on .bphone { opacity: 1; transform: rotate(4deg); }


.bk-pull { position: relative; z-index: 2; isolation: isolate; overflow: clip; padding: clamp(90px, 14vh, 160px) var(--m); color: var(--bone);
  background: radial-gradient(60% 70% at 18% -6%, rgba(255, 255, 255, .16), transparent 70%), linear-gradient(180deg, #2331e0, var(--blue) 46%, var(--deep)); }
.bk-pull::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .28; background-image: var(--grain); }
.pull-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.bk-pull h2 { margin: 0 0 26px; font: 400 clamp(34px, 4vw, 62px)/1.02 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.pull-txt p { margin: 0 0 16px; font-size: 18px; line-height: 1.6; opacity: .9; max-width: 31em; }
.pull-stage { height: clamp(120px, 15vw, 230px); overflow: hidden; }
.pull-mark { display: block; height: 100%; color: var(--bone); }
.pull-mark svg { display: block; height: 100%; width: var(--mw, 100%); }
.pull-ctl { display: grid; gap: 14px; margin-top: 36px; font: 500 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.pull-ctl input { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 0; background: transparent; cursor: ew-resize; }
.pull-ctl input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--bone) var(--fill, 0%), rgba(239, 235, 227, .3) var(--fill, 0%)); }
.pull-ctl input::-moz-range-track { height: 2px; background: rgba(239, 235, 227, .3); }
.pull-ctl input::-moz-range-progress { height: 2px; background: var(--bone); }
.pull-ctl input::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 20px; margin-top: -9px; border-radius: 3px; background: var(--stop); transition: transform .3s var(--pop); }
.pull-ctl input::-moz-range-thumb { width: 34px; height: 20px; border: 0; border-radius: 3px; background: var(--stop); }
.pull-ctl input:active::-webkit-slider-thumb { transform: scale(1.15); }
.pull-ctl input:focus-visible { outline: 3px solid var(--bone); outline-offset: 6px; }


.bk-wall { position: relative; z-index: 2; padding: clamp(90px, 14vh, 160px) var(--m) clamp(110px, 16vh, 180px); background: var(--bone); color: var(--ink); overflow: clip; }
.wall-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4vw; align-items: end; }
.wall-head h2 { margin: 0; font: 400 clamp(38px, 5vw, 80px)/1 var(--display); letter-spacing: -.01em; }
.wall-head p { margin: 0; max-width: 32em; color: var(--mute); font-size: 18px; }
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(44px, 8vh, 90px); align-items: start; }
.wall .col { display: grid; gap: 22px; will-change: transform; }
.wall .col:nth-child(2) { margin-top: 70px; } .wall .col:nth-child(3) { margin-top: 24px; }
.wall figure { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: #e3ded4; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: transform .6s var(--glide); }
.wall figure:hover { --s: 1.035; z-index: 2; }
.wall img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--glide); }
.wall figure:hover img { transform: scale(1.06); }
.wall figcaption { position: absolute; left: 12px; bottom: 12px; padding: 8px 14px; border-radius: 999px; background: var(--bone); color: var(--ink); font: 500 13px/1 var(--body);
  transform: translateY(8px); opacity: .92; transition: transform .5s var(--glide), background-color .4s, color .4s; }
.wall figure:hover figcaption { transform: none; background: var(--blue); color: var(--bone); }


@media (max-width: 1023px) {
  .bk-hero { grid-template-columns: 1fr; gap: 10px; min-height: 0; padding-top: 112px; }
  .bk-hero h1 { max-width: 11ch; }
  .bk-stage { min-height: 0; padding: 70px 0 60px; }
  .bk-build { margin: 0; }
  .fl { border-width: 5px; }
  .fl.f1 { width: 92px; left: 0; top: 0; } .fl.f2 { width: 128px; right: 0; top: 4px; } .fl.f3 { width: 64px; left: 40%; top: -6px; }
  .fl.f4 { width: 72px; right: 4%; bottom: 0; } .fl.f5 { width: 100px; left: 34%; bottom: -10px; } .fl.f6 { display: none; }
  .bk-hero.go .fl { animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.1s); }
  .kit-head, .get-head, .wall-head, .web-grid, .pull-grid { grid-template-columns: 1fr; }
  .ch { grid-template-columns: 1fr; }
  .knoll { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knoll li:last-child { grid-column: span 2; }
  .knoll li:last-child .k-art { aspect-ratio: 2 / 1; }
  .wall { grid-template-columns: 1fr 1fr; gap: 12px; }
  .wall .col { display: contents; }
  .wall figcaption { left: 8px; bottom: 8px; padding: 6px 10px; font-size: 12px; transform: none; }
}
@media (max-width: 767px) {
  .bk-facts { gap: 10px 16px; } .bk-facts li { min-width: 0; flex: 1 1 40%; }
  .sw { height: 300px; gap: 6px; } .sw li { padding: 12px 8px; font-size: 11px; } .sw b { font-size: 13px; } .sw code { font-size: 11px; } .sw span { display: none; }
  .type-vis { grid-template-columns: 1fr 1fr; } .type-vis .ph { grid-column: span 2; height: auto; aspect-ratio: 4 / 3; }
  .sp-d { grid-row: auto; grid-column: span 2; }
  .path-vis { grid-template-columns: 1fr 1fr; } .river { grid-row: span 2; }
  .path-vis .p3 { grid-column: span 2; width: 100%; }
  .day-vis { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .day-vis .d1 { grid-row: auto; grid-column: span 2; aspect-ratio: 4 / 3; }
  .knoll h3 { font-size: 18px; } .knoll li { padding: 12px 12px 20px; } .knoll p { font-size: 15px; }
  .web-vis { min-height: 0; padding-top: 0; display: grid; gap: 16px; }
  .flow { display: none; }
  .chips { position: static; height: auto; display: flex; gap: 10px; }
  .chips li { width: 64px; }
  .bwin { position: relative; top: 0; width: 100%; }
  .bphone { right: 4%; bottom: -24px; width: 92px; border-radius: 18px; padding: 4px; } .bphone img { border-radius: 14px; }
  .wall .col:nth-child(n) { margin-top: 0; }
}
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }


@media (prefers-reduced-motion: reduce) {
  .bk-hero .fl, .bk-grid *, .bk-mark, .bk-stage figcaption, .bk-js .ch *, .chips li, .bwin, .bphone, .flow path, .k-art, .k-art * { transition: none !important; animation: none !important; }
  .fl { opacity: 1; scale: 1; } .bk-grid [pathLength], .flow path, .river .ln { stroke-dashoffset: 0; } .bk-grid .g-d, .bk-grid .g-t, .bk-stage figcaption { opacity: 1; } .bk-grid .g-d .dim { transform: none; }
  .bk-mark { clip-path: none; }
  .bk-js .ch * { opacity: 1 !important; transform: none !important; }
  .chips li, .bwin, .bphone { opacity: 1; transform: none; }
}