.hero,.hero *{box-sizing:border-box}
.hero{--yellow:#ffd400;--cream:#f6ecd6;--pink:#ff2d8a;--cyan:#19c3d6;--ink:#0e0a10;position:relative;overflow:hidden;min-height:0;background:#0e0a10;color:var(--cream);font-family:Archivo,system-ui,sans-serif;isolation:isolate}
.hero .bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero .bg-splash{position:absolute;inset:0;width:100%;height:100%}
.hero .blob{transform-box:fill-box;transform-origin:center;animation:kb-splash 1.1s cubic-bezier(.2,.8,.2,1) both}
.hero .halftone{position:absolute;inset:0;background:radial-gradient(circle,rgba(246,236,214,.10) 1px,transparent 1.7px) 0 0/8px 8px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 65% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 70% at 65% 45%,#000 20%,transparent 75%)}
.hero .grain{position:absolute;inset:0;width:100%;height:100%;opacity:.16;mix-blend-mode:overlay}
.hero .vignette{position:absolute;inset:0;background:radial-gradient(ellipse 85% 80% at 55% 45%,transparent 50%,rgba(0,0,0,.65) 100%)}
.hero .wrap{position:relative;max-width:1440px;margin:0 auto;padding:56px 48px 72px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:24px;align-items:center}
.hero .copy{position:relative;z-index:8;padding-top:12px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--cyan);padding:9px 14px;transform:rotate(-2deg);animation:kb-fadeUp .6s .1s both}
.hero .h1{margin:22px 0 0;font-family:'Bowlby One',Impact,sans-serif;font-weight:400;line-height:.92;letter-spacing:-.01em}
.hero .rem{display:block;font-size:clamp(50px,6.2vw,96px);color:var(--yellow);transform-origin:20% 70%;text-shadow:4px 5px 0 #000;animation:kb-slam .75s .25s cubic-bezier(.2,.9,.25,1.2) both}
.hero .rem-inner{display:inline-block;transform:skewX(-8deg)}
.hero .underline{display:block;width:min(92%,520px);height:22px;margin:-4px 0 6px 4px;overflow:visible}
.hero .underline path{stroke-dasharray:1;stroke-dashoffset:1;animation:kb-draw .55s 1.0s cubic-bezier(.6,0,.3,1) forwards}
.hero .line{display:block;clip-path:inset(-40% -100vw 0 -40px);padding:4px 10px 10px 0;margin-bottom:-8px}
.hero .word{display:inline-block;font-size:clamp(36px,4.4vw,68px);color:var(--cream);text-shadow:4px 4px 0 #000;animation:kb-wordUp .7s cubic-bezier(.2,.8,.2,1) both}
.hero .q{display:inline-block;color:var(--pink);animation:kb-qPop .6s 1.35s cubic-bezier(.3,1.6,.5,1) both}
.hero .lede{max-width:500px;margin:26px 0 0;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:#e8dcc3;animation:kb-fadeUp .7s 1.35s both}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;animation:kb-fadeUp .7s 1.55s both}
.hero .btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;font:800 16px/1 Archivo,sans-serif;text-decoration:none;border:3px solid #000;transition:transform .15s,box-shadow .15s}
.hero .btn-primary{background:var(--yellow);color:#000;box-shadow:5px 5px 0 var(--pink)}
.hero .btn-primary:hover{color:#000;transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--pink)}
.hero .btn-ghost{background:transparent;color:var(--cream);border-color:var(--cream)}
.hero .btn-ghost:hover{color:#000;background:var(--cream)}
.hero .scene{position:relative;width:100%;aspect-ratio:1132/941;container-type:inline-size;z-index:2}
.hero .abs{position:absolute}
.hero .strings{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.hero .strings path{fill:none;stroke:#e3173f;stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;animation:kb-draw .7s cubic-bezier(.6,0,.3,1) forwards;filter:drop-shadow(0 2px 1px rgba(0,0,0,.6))}
.hero .pol{position:absolute;width:11.5%;padding:.55cqw .55cqw 0;background:#f1e9d6;box-shadow:0 .8cqw 1.6cqw rgba(0,0,0,.55);z-index:2;--r:0deg;transform:rotate(var(--r));animation:kb-polIn .7s var(--d) cubic-bezier(.2,.8,.3,1.2) both,kb-sway 5s calc(var(--d) + .8s) ease-in-out infinite}
.hero .pol img{display:block;width:100%;aspect-ratio:1/1.08;object-fit:cover;filter:grayscale(1) contrast(1.15) sepia(.15)}
.hero .pol span{display:block;font:400 1.7cqw/1 'Permanent Marker',cursive;color:#1a1a1a;text-align:center;padding:.45cqw 0 .6cqw}
.hero .pin{position:absolute;left:50%;top:-.6cqw;width:1.5cqw;height:1.5cqw;margin-left:-.75cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8aa0,#c8102e 60%,#6d0016);box-shadow:0 .25cqw .3cqw rgba(0,0,0,.6)}
.hero .monitor{left:34.5%;top:3.2%;width:62%;aspect-ratio:1100/785;z-index:3;animation:kb-monIn 1s 1.3s cubic-bezier(.2,.8,.2,1) both}
.hero .monitor > img{display:block;width:100%;height:100%;position:relative;z-index:2;filter:drop-shadow(0 1.5cqw 2cqw rgba(0,0,0,.6))}
.hero .monitor::before{content:"";position:absolute;left:34%;top:12%;width:42%;height:48%;background:var(--cyan);filter:blur(4cqw);opacity:0;animation:kb-glow 2.2s 2.3s ease-out forwards;z-index:1}
.hero .glass{position:absolute;left:32.68%;top:9.94%;width:44.65%;height:52.63%;z-index:3;clip-path:polygon(0 5.4%,100% 0,99.2% 100%,2.5% 95.7%);background:#0c1210;overflow:hidden}
.hero .crt{position:absolute;inset:0;transform-origin:50% 55%;animation:kb-crtOn .9s 2.15s cubic-bezier(.5,0,.2,1) both}
.hero .win{position:absolute;left:3%;top:-10.25%;width:123.3%;height:120.5%;transform:perspective(57cqw) rotateY(-12deg) scale(.73);transform-origin:0 50%;background:#c9c4b6;border:.25cqw solid;border-color:#f4f1e8 #5a574f #5a574f #f4f1e8;display:flex;flex-direction:column;font-family:'Space Mono',monospace;color:#111}
.hero .titlebar{flex:0 0 auto;height:2.7cqw;display:flex;align-items:center;justify-content:space-between;padding:0 .5cqw;background:linear-gradient(90deg,#0b1f8a,#2f6bd6);color:#fff;font-weight:700;font-size:1.35cqw}
.hero .kb-type{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:kb-type .8s 2.75s steps(15,end) forwards;vertical-align:bottom}
.hero .tb-btns{display:flex;gap:.3cqw}
.hero .tb-btns i{display:block;width:1.6cqw;height:1.4cqw;background:#c9c4b6;border:.15cqw solid;border-color:#fff #333 #333 #fff}
.hero .wbody{flex:1 1 auto;display:flex;gap:.6cqw;padding:.6cqw;min-height:0}
.hero .graph{position:relative;flex:1 1 72%;background:#2b2d2c;border:.2cqw solid;border-color:#5a574f #f4f1e8 #f4f1e8 #5a574f;overflow:hidden}
.hero .graph::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none}
.hero .links{position:absolute;inset:0;width:100%;height:100%}
.hero .links line{stroke:#e9e4d6;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;animation:kb-draw .45s var(--d) ease-out forwards}
.hero .node{position:absolute;width:11%;transform:translate(-50%,-50%)}
.hero .node img{display:block;width:100%;aspect-ratio:1/1.1;object-fit:cover;border:.2cqw solid #f1e9d6;filter:grayscale(1) contrast(1.1);animation:kb-pop .4s var(--d) cubic-bezier(.3,1.6,.5,1) both}
.hero .node.center{width:21%}
.hero .node.center img{border:.4cqw solid #e3173f;filter:grayscale(.2) contrast(1.05);animation:kb-pop .55s 2.95s cubic-bezier(.3,1.6,.5,1) both,kb-pulse 1.8s 3.6s ease-in-out infinite}
.hero .menu{flex:0 0 27%;display:flex;flex-direction:column;gap:.45cqw;padding:.45cqw;background:#bdb8aa;border:.2cqw solid;border-color:#5a574f #f4f1e8 #f4f1e8 #5a574f}
.hero .mi{font-size:1.2cqw;padding:.45cqw .5cqw;background:#d8d3c5;border:.15cqw solid;border-color:#fff #4d4a43 #4d4a43 #fff;white-space:nowrap;opacity:0;animation:kb-fadeIn .3s var(--d) forwards}
.hero .mi.blink{animation:kb-fadeIn .3s var(--d) forwards,kb-hlBlink .5s 3.9s both}
.hero .mi.stay{animation:kb-fadeIn .3s var(--d) forwards,kb-hlStay .2s 4.45s forwards}
.hero .status{flex:0 0 auto;height:2.4cqw;margin:0 .6cqw .6cqw;padding:0 .5cqw;display:flex;align-items:center;font-size:1.15cqw;background:#0c1210;color:#5bff8a;border:.2cqw solid;border-color:#5a574f #f4f1e8 #f4f1e8 #5a574f;position:relative}
.hero .st{position:absolute;left:.5cqw;white-space:nowrap;overflow:hidden;width:0}
.hero .st1{animation:kb-type .7s 3.2s steps(26,end) forwards,kb-fadeOut .2s 4.5s forwards}
.hero .st2{color:#ffd400;animation:kb-type .6s 4.6s steps(24,end) forwards}
.hero .kb-cursor{position:absolute;width:3.2cqw;left:92%;top:92%;opacity:0;z-index:5;animation:kb-cursor 2.2s 3.3s cubic-bezier(.5,0,.3,1) forwards;filter:drop-shadow(.2cqw .2cqw 0 rgba(0,0,0,.6))}
.hero .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.55));pointer-events:none;animation:kb-flicker 4s 3s steps(2) infinite;z-index:4}
.hero .kb-flash{position:absolute;inset:0;background:#e9fffb;opacity:0;animation:kb-flash .5s 2.2s ease-out both;z-index:6}
.hero .fig{left:12.1%;top:5.8%;width:34.5%;aspect-ratio:714/1514;z-index:4;animation:kb-figDrop 1s .85s cubic-bezier(.35,0,.35,1) both;kb-cursor:pointer}
.hero .fig .body{position:absolute;left:0;top:50.86%;width:100%;height:auto}
.hero .fig .head{position:absolute;left:0;top:0;width:100%;height:auto;transform-origin:51.5% 99%;animation:kb-bobDamp 1.7s 1.7s ease-out,kb-bobIdle 2.8s 3.4s ease-in-out infinite;will-change:transform}
.hero .fig:hover .head{animation:kb-bobFast .7s ease-in-out infinite}
.hero .shadow{left:14%;top:92%;width:31%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);z-index:3;animation:kb-shadowIn 1s .85s ease-in both}
.hero .vhs{left:53%;top:71%;width:40%;height:24%;z-index:3}
.hero .tape{position:absolute;width:31cqw;height:4.5cqw;--r:0deg;transform:rotate(var(--r));border-radius:.3cqw .3cqw .5cqw .5cqw;display:flex;align-items:center;gap:1cqw;padding:0 1.1cqw;background:linear-gradient(180deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.05) 7%,transparent 22%,transparent 78%,rgba(0,0,0,.55) 100%),radial-gradient(ellipse 30% 60% at 12% 40%,rgba(255,255,255,.05),transparent 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),#18161b;box-shadow:0 .28cqw 0 #070609,0 .3cqw 0 .05cqw rgba(255,255,255,.04),0 1cqw 1.3cqw rgba(0,0,0,.7),inset 0 .12cqw 0 rgba(255,255,255,.2),inset 0 -.15cqw 0 rgba(0,0,0,.6);animation:kb-vhsDrop .7s var(--d) cubic-bezier(.35,0,.3,1) both}
.hero .grip{flex:0 0 2.4cqw;height:58%;border-radius:.15cqw;background:repeating-linear-gradient(90deg,#09080b 0 .22cqw,#2b282f .22cqw .42cqw);box-shadow:inset 0 .1cqw .1cqw rgba(0,0,0,.8)}
.hero .screw{flex:0 0 .7cqw;height:.7cqw;border-radius:50%;background:radial-gradient(circle at 40% 35%,#6b6670,#1b191e 70%)}
.hero .label{position:relative;flex:1 1 auto;height:74%;display:flex;align-items:center}
.hero .paper{position:absolute;inset:0;box-shadow:0 .08cqw .1cqw rgba(0,0,0,.5)}
.hero .hw{position:relative;display:block;white-space:nowrap;line-height:1}
.hero .curl{position:absolute;pointer-events:none}
.hero .lbl-a .paper{background:radial-gradient(ellipse 40% 90% at 92% 70%,rgba(110,80,40,.38),transparent 70%),radial-gradient(ellipse 20% 50% at 6% 20%,rgba(90,70,40,.25),transparent 70%),radial-gradient(circle at 60% 30%,rgba(0,0,0,.06) 0 .15cqw,transparent .2cqw) 0 0/2.3cqw 1.7cqw,linear-gradient(#f2ecdd,#e4dbc5);clip-path:polygon(0 4%,40% 0,78% 3%,93% 0,93% 0,100% 38%,99% 70%,100% 100%,62% 97%,30% 100%,1% 96%,.6% 50%)}
.hero .lbl-a .curl{right:-.2cqw;top:-.35cqw;width:2.2cqw;height:1.9cqw;background:linear-gradient(215deg,transparent 46%,#fbf7ec 49%,#d7cdb4 70%,#bcae8e 100%);transform:rotate(-6deg);filter:drop-shadow(-.2cqw .25cqw .2cqw rgba(0,0,0,.45));clip-path:polygon(0 0,100% 100%,0 100%)}
.hero .lbl-a .hw{padding-left:6%;font:400 2.1cqw 'Permanent Marker',cursive;color:#141414;transform:rotate(-2deg);letter-spacing:.02em}
.hero .lbl-b .paper{background:linear-gradient(180deg,#c8102e 0 13%,#f7f3ea 13% 16%,transparent 16%),repeating-linear-gradient(180deg,transparent 0 1.05cqw,rgba(60,90,170,.35) 1.05cqw 1.13cqw),radial-gradient(ellipse 35% 80% at 4% 90%,rgba(120,90,40,.35),transparent 70%),linear-gradient(#f4efe2,#e9e1cc);clip-path:polygon(9% 0,100% 0,100% 100%,0 100%,0 62%,4% 40%,6% 22%)}
.hero .lbl-b .curl{left:-.3cqw;top:-.1cqw;width:2cqw;height:1.6cqw;background:linear-gradient(135deg,#d8cfb8 0,#f7f2e6 45%,transparent 52%);filter:drop-shadow(.25cqw .2cqw .2cqw rgba(0,0,0,.45));clip-path:polygon(0 0,100% 0,0 100%);transform:rotate(8deg)}
.hero .lbl-b .tag{position:absolute;left:12%;top:20%;font:700 .75cqw/1 'Space Mono',monospace;letter-spacing:.12em;color:#8a2030}
.hero .lbl-b .hw{padding-left:28%;padding-top:.6cqw;font:400 1.55cqw 'Rock Salt',cursive;color:#1d2f7a;transform:rotate(1deg)}
.hero .lbl-c .paper{background:radial-gradient(ellipse 25% 70% at 70% 100%,rgba(90,60,20,.35),transparent 70%),radial-gradient(ellipse 50% 30% at 30% 0,rgba(255,255,255,.35),transparent 70%),linear-gradient(90deg,rgba(0,0,0,.08),transparent 20%,transparent 80%,rgba(0,0,0,.12)),#e3cf6e;clip-path:polygon(0 0,58% 3%,100% 0,98% 50%,100% 100%,22% 100%,14% 82%,6% 100%,0 96%)}
.hero .lbl-c .curl{left:5.5%;bottom:-.55cqw;width:2.2cqw;height:1.4cqw;background:linear-gradient(20deg,transparent 40%,#c9b55a 48%,#efe0a0 100%);filter:drop-shadow(0 -.2cqw .2cqw rgba(0,0,0,.4));clip-path:polygon(0 100%,100% 100%,50% 0);transform:rotate(-14deg)}
.hero .lbl-c .hw{padding-left:7%;font:700 2.45cqw 'Caveat',cursive;color:#2a2622;transform:rotate(-1deg)}
.hero .scuff{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 32%,transparent 34%),linear-gradient(80deg,transparent 70%,rgba(255,255,255,.05) 71%,transparent 72.5%);pointer-events:none}

@keyframes kb-fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes kb-fadeIn{from{opacity:0}to{opacity:1}}
@keyframes kb-fadeOut{to{opacity:0}}
@keyframes kb-slam{0%{opacity:0;transform:scale(2.6) rotate(-12deg)}55%{opacity:1;transform:scale(.92) rotate(-2deg)}78%{transform:scale(1.05) rotate(-4.5deg)}100%{opacity:1;transform:scale(1) rotate(-4deg)}}
@keyframes kb-wordUp{from{transform:translateY(115%) rotate(5deg)}to{transform:none}}
@keyframes kb-qPop{0%{transform:scale(0) rotate(-90deg)}100%{transform:scale(1) rotate(8deg)}}
@keyframes kb-draw{to{stroke-dashoffset:0}}
@keyframes kb-splash{0%{opacity:0;transform:scale(.15)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes kb-monIn{0%{opacity:0;transform:translateX(35%) rotate(7deg)}70%{opacity:1;transform:translateX(-1.5%) rotate(-.8deg)}100%{opacity:1;transform:none}}
@keyframes kb-glow{0%{opacity:0}30%{opacity:.75}100%{opacity:.35}}
@keyframes kb-crtOn{0%{opacity:0;transform:scale(0,.006)}35%{opacity:1;transform:scale(1,.006);filter:brightness(5)}70%{transform:scale(1,1);filter:brightness(1.8)}100%{opacity:1;transform:none;filter:none}}
@keyframes kb-flash{0%{opacity:0}20%{opacity:.9}100%{opacity:0}}
@keyframes kb-type{to{width:100%}}
@keyframes kb-pop{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes kb-pulse{0%,100%{box-shadow:0 0 0 0 rgba(227,23,63,.7)}50%{box-shadow:0 0 0 .8cqw rgba(227,23,63,0)}}
@keyframes kb-hlBlink{0%,100%{background:#d8d3c5;color:#111}20%,80%{background:#0b1f8a;color:#fff}}
@keyframes kb-hlStay{to{background:#0b1f8a;color:#fff}}
@keyframes kb-cursor{0%{opacity:0;left:92%;top:92%}10%{opacity:1}35%{left:84%;top:11%}55%{left:84%;top:11%}80%{left:84%;top:30%}88%{transform:scale(.8)}100%{opacity:1;left:84%;top:30%;transform:scale(1)}}
@keyframes kb-flicker{0%{opacity:1}50%{opacity:.85}}
@keyframes kb-figDrop{0%{opacity:0;transform:translateY(-130%)}55%{opacity:1;transform:translateY(0)}68%{transform:translateY(-5%)}82%{transform:translateY(0)}91%{transform:translateY(-1.4%)}100%{opacity:1;transform:translateY(0)}}
@keyframes kb-shadowIn{0%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes kb-bobDamp{0%{transform:rotate(0)}10%{transform:rotate(-13deg) translateY(1.5%)}26%{transform:rotate(10deg)}42%{transform:rotate(-7deg) translateY(.8%)}58%{transform:rotate(4.5deg)}74%{transform:rotate(-2.5deg)}100%{transform:rotate(0)}}
@keyframes kb-bobIdle{0%,100%{transform:rotate(0)}25%{transform:rotate(3.2deg) translateY(.3%)}75%{transform:rotate(-3.2deg) translateY(.3%)}}
@keyframes kb-bobFast{0%,100%{transform:rotate(0)}25%{transform:rotate(11deg) translateY(1%)}75%{transform:rotate(-11deg) translateY(1%)}}
@keyframes kb-polIn{0%{opacity:0;transform:translateY(-50%) rotate(calc(var(--r) - 35deg)) scale(1.35)}60%{opacity:1;transform:translateY(3%) rotate(calc(var(--r) + 4deg)) scale(.97)}100%{opacity:1;transform:rotate(var(--r))}}
@keyframes kb-sway{0%,100%{transform:rotate(var(--r))}50%{transform:rotate(calc(var(--r) + 2.2deg))}}
@keyframes kb-vhsDrop{0%{opacity:0;transform:translate(8%,-260%) rotate(calc(var(--r) + 14deg))}60%{opacity:1;transform:translate(0,4%) rotate(calc(var(--r) - 1.5deg))}80%{transform:translate(0,-6%) rotate(calc(var(--r) + .6deg))}100%{opacity:1;transform:rotate(var(--r))}}

@media (max-width:900px){
.hero .wrap{grid-template-columns:minmax(0,1fr);padding:28px 16px 48px;gap:8px}
.hero .scene{max-width:640px;margin:0 auto}
.hero .bg-splash{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 48%,#000 68%);mask-image:linear-gradient(to bottom,transparent 0,transparent 48%,#000 68%)}
}
@media (prefers-reduced-motion:reduce){
.hero *,.hero *::before{animation-duration:.001s !important;animation-delay:0s !important;animation-iteration-count:1 !important}
}

/* Integration resets: keep the supplied hero typography and composition intact. */
.hero{border-radius:24px;margin-top:40px;margin-bottom:38px}
.hero .h1{font-family:'Bowlby One',Impact,sans-serif;text-transform:none;text-shadow:none;letter-spacing:-.01em;font-weight:400;line-height:.92}
.hero .eyebrow{font-family:'Space Mono',monospace}
.hero .lede{font-family:Archivo,system-ui,sans-serif}
.hero .word{font-weight:400}
.hero .hero-stage{position:relative}
.hero .btn:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
#play{scroll-margin-top:24px}
@media(max-width:600px){.hero{border-radius:18px;margin-top:40px}.hero .word{font-size:clamp(27px,6.8vw,40px)}.hero .rem{font-size:clamp(43px,11vw,64px)}}

/* The logo now belongs to the hero, replacing the separate page masthead. */
.hero .hero-logo{display:block;width:114px;max-width:45%;margin:-40px 0 18px -24px;text-decoration:none;animation:kb-fadeUp .6s .1s both}
.hero .hero-logo img{display:block;width:100%;height:auto;transition:transform .25s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.hero .hero-logo:hover img{animation:brand-hover-wiggle .7s ease-in-out both}}
.hero .h1{margin-top:0}
@media(max-width:900px){.hero .hero-logo{width:104px;margin:-4px 0 14px -4px}}
.hero .hero-logo{position:relative;height:auto;padding:0;background:none;border:0;box-shadow:none;transform:none;perspective:none}
.hero .hero-logo::before,.hero .hero-logo::after{content:none;display:none}
.hero .hero-logo img{position:static;aspect-ratio:auto;object-fit:contain}
/* Logo: centered across the hero box, 20px from its top edge. The copy column is padded to clear it. */
.hero .hero-logo{position:absolute;top:20px;left:0;right:0;z-index:9;width:103px;max-width:40%;margin:0 auto}
.hero .wrap{padding-top:132px}
@media(max-width:900px){.hero .hero-logo{width:94px;margin:0 auto}.hero .wrap{padding-top:120px}}

/* Remember, 20% smaller at every size. */
.hero .rem{font-size:clamp(40px,4.96vw,77px)}
/* Phones and tablets: tighter copy so the bobblehead and computer sit higher. */
@media(max-width:900px){
.hero .underline{width:min(66%,380px);height:16px;margin-bottom:2px}
.hero .copy{padding-top:0}
.hero .lede{margin-top:14px;line-height:1.45}
.hero .ctas{margin-top:18px}
body main>.hero{justify-content:flex-start}
body main>.hero .wrap{padding-top:92px;padding-bottom:20px;gap:0}
.hero .hero-logo{top:12px;width:84px}
}
@media(max-width:600px){.hero .rem{font-size:clamp(34px,8.8vw,51px)}}
/* Narrow phones: the step rail needs the top right, so the logo moves to the left edge. */
@media(max-width:520px){.hero .hero-logo{left:16px;right:auto;margin:0}}
/* Keep the desktop hero within the space above the universal footer. */
@media(min-width:901px){body main>.hero .wrap{padding-bottom:22px}}
/* Intro copy, 1pt smaller. */
.hero .lede{font-size:calc(clamp(16px,1.35vw,19px) - 1pt)}