:root{color-scheme:dark;--navy:#020129;--ivory:#fbf7f4;--blue:#99b1ff;--lilac:#e1d2f3;--muted:#adacc5}
*{box-sizing:border-box}
html{min-width:320px;background:var(--navy)}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ivory);font-weight:400;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 90% 94%,#091744 0%,transparent 52%),var(--navy)}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--blue);color:var(--navy)}
:focus-visible{outline:2px solid var(--blue);outline-offset:9px}
.page{min-height:100svh;display:flex;flex-direction:column;max-width:1920px;margin:auto;padding:43px 3.6vw 36px;position:relative;overflow:hidden}
.header,.footer{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.brand{display:flex;align-items:baseline;gap:5px}.brand img{width:107px;height:auto}.brand span{font-size:20px;letter-spacing:-1px}
.location{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:12px}.location-dot{height:4px;width:4px;border-radius:50%;background:#dcfc75;box-shadow:0 0 12px #dcfc7544}
.hero{flex:1;display:grid;grid-template-columns:1.06fr 1fr;align-items:center;gap:0;min-height:650px;padding:64px 0 72px 3.4vw}
.copy{position:relative;z-index:2}.eyebrow{font-size:12px;line-height:1.6;text-transform:uppercase;letter-spacing:1.05px;color:#b4c1ed;margin:0 0 28px}
h1{font-size:clamp(44px,4.65vw,82px);font-weight:300;letter-spacing:-2.8px;line-height:1.22;margin:0;white-space:nowrap}
h1 span{color:var(--blue)}
.description{font-size:15px;line-height:1.7;margin:34px 0 0;max-width:510px;color:#e2e0e9;letter-spacing:.02px}
.contact{display:inline-flex;align-items:center;gap:22px;color:#b2bef2;margin-top:42px;padding-bottom:9px;font-size:15px;position:relative}
.contact:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:#99b1ff66;transform-origin:left;transition:background .3s,transform .3s}.contact:hover{color:var(--ivory)}.contact:hover:after{background:var(--ivory);transform:scaleX(.82)}.arrow{font-size:25px;line-height:1;transition:transform .35s}.contact:hover .arrow{transform:translate(4px,-4px)}
.art{position:relative;min-width:0;align-self:center;margin-left:-10px}
.universe{position:relative;display:block;width:100%;height:440px;border:0;background:none;color:inherit;padding:0;cursor:pointer;perspective:900px;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.orbit{display:block;position:absolute;left:50%;top:50%;width:83%;height:48%;border:1px solid #99b1ff20;border-radius:50%;transform:translate(-50%,-50%) rotate(-24deg);pointer-events:none;transition:opacity 1s}
.orbit-middle{width:53%;height:38%;border-color:#99b1ff1b;transform:translate(-50%,-50%) rotate(23deg)}
.orbit-inner{width:27%;height:21%;border-color:#99b1ff16;transform:translate(-50%,-50%) rotate(-14deg)}
.orbit-center{position:absolute;left:50%;top:50%;width:3px;height:3px;background:#e1d2f366;box-shadow:0 0 18px 3px #99b1ff18;border-radius:50%}
.object{position:absolute;left:50%;top:50%;display:block;will-change:transform;pointer-events:none}.object img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 18px #00000020)}
.tulip{width:clamp(105px,10.8vw,174px);height:clamp(115px,11.8vw,190px);transform:translate(-230px,-95px) rotate(-10deg)}
.bird{width:clamp(94px,9.4vw,150px);height:clamp(78px,7.8vw,125px);transform:translate(0,-170px) rotate(-14deg)}
.star{width:clamp(98px,9.5vw,152px);height:clamp(98px,9.5vw,152px);transform:translate(150px,-15px) rotate(12deg)}
.fold{width:clamp(88px,8vw,128px);height:clamp(74px,7vw,112px);transform:translate(-120px,100px) rotate(24deg)}
.flower{width:clamp(58px,6.2vw,100px);height:clamp(58px,6.2vw,100px);transform:translate(50px,90px)}
.spark{width:clamp(46px,4.8vw,77px);height:clamp(46px,4.8vw,77px);transform:translate(-100px,40px)}
.trapezoid{width:clamp(46px,4.6vw,74px);height:clamp(34px,3.4vw,55px);transform:translate(0,-50px)}
.cursor-ring{position:absolute;z-index:50;left:0;top:0;width:26px;height:26px;border:1px solid #bcc9ff99;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .45s,width .35s,height .35s;will-change:transform}.universe:hover .cursor-ring{opacity:1}.universe:active .cursor-ring{width:18px;height:18px}
.art-caption{margin:10px auto 0;text-align:center;color:#aebbe9;font-size:13px;min-height:3.2em;line-height:1.6;position:relative;letter-spacing:.2px;width:min(100%,540px)}.caption-text{display:block;text-wrap:balance}.object{pointer-events:auto}.object img,.fold-pair{pointer-events:none}
.dust{position:absolute;width:2px;height:2px;background:#99b1ff66;border-radius:50%;pointer-events:none}.dust-one{top:17%;left:25%}.dust-two{bottom:17%;right:22%}.dust-three{top:28%;right:11%;width:3px;height:3px;opacity:.5}
.footer{font-size:11px;color:var(--muted);letter-spacing:.15px}.motto{display:flex;align-items:center;gap:23px}.motto img{width:43px;height:26px;transition:transform .7s}.motto:hover img{transform:translate(5px,-3px) rotate(-5deg)}
.ambient{position:fixed;width:650px;height:650px;left:0;top:0;background:radial-gradient(circle,#344d9620,transparent 65%);pointer-events:none;opacity:0;transition:opacity 2s;will-change:transform}.has-pointer .ambient{opacity:1}
.mobile-break{display:none}
.brand .brand-mark{display:block;background:#ff6f6f;mask:url('assets/kit-logo.svg') center / 100% 100% no-repeat}
.brand-mark img{display:block;opacity:0}
@keyframes brand-palette{
  0%,100%{background-color:#99b1ff}
  20%{background-color:#dcfc75}
  40%{background-color:#e1d2f3}
  60%{background-color:#fbf7f4}
  80%{background-color:#ff6f6f}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .brand:hover .brand-mark{animation:brand-palette 1s steps(1,end) infinite}
}
@media(prefers-reduced-motion:no-preference){
  .brand:focus-visible .brand-mark{animation:brand-palette 1s steps(1,end) infinite}
}
@media(prefers-reduced-motion:reduce){
  .brand:hover .brand-mark,.brand:focus-visible .brand-mark{background:#99b1ff}
}
/* Original Figma silhouettes clip the raster shader fills, including their holes. */
.flower img{mask:url('assets/flower.svg') center / 100% 100% no-repeat}
.spark img{mask:url('assets/spark-mask.svg') center / 100% 100% no-repeat}
.chrome{width:clamp(53px,5.2vw,84px);height:clamp(53px,5.2vw,84px)}
.fur{width:clamp(90px,9vw,144px);height:clamp(80px,8vw,128px)}
.trapezoid img{mask:url('assets/trapezoid.svg') center / 100% 100% no-repeat;object-fit:fill}
.fold-pair{display:flex;width:100%;height:100%;align-items:center;gap:1px}
.object .fold-pair img{width:calc(50% - .5px);height:auto;filter:none}
@media(prefers-reduced-motion:no-preference){.entrance{animation:arrive 1.2s both cubic-bezier(.22,1,.36,1)}.eyebrow{animation-delay:.12s}h1{animation-delay:.22s}.description{animation-delay:.32s}.contact{animation-delay:.42s}.art{animation-delay:.3s}.footer{animation-delay:.55s}@keyframes arrive{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}}
@media(min-width:1600px){.hero{min-height:760px}.universe{height:520px}.eyebrow{font-size:14px}.description{font-size:17px}.contact{font-size:17px}.footer{font-size:13px}}
@media(max-width:1100px) and (min-width:761px){h1{font-size:4.6vw;letter-spacing:-1.9px}.hero{padding-left:1vw;min-height:570px}.eyebrow{font-size:10px;letter-spacing:.7px}.description{font-size:13px;padding-right:15px}.desktop-break{display:none}.universe{height:360px}.footer{font-size:10px}.motto{gap:12px}}
@media(max-width:760px){.page{padding:27px 25px 24px;min-height:100svh}.brand img{width:84px}.brand span{font-size:17px}.location{font-size:10px;gap:7px}.hero{display:flex;flex-direction:column;align-items:stretch;padding:75px 0 40px;min-height:0;gap:18px}.eyebrow{font-size:10px;letter-spacing:.6px;margin-bottom:22px}.mobile-break{display:block}h1{font-size:clamp(33px,7.7vw,58px);letter-spacing:-1.3px;line-height:1.25}.description{font-size:13px;line-height:1.7;max-width:340px;margin-top:26px}.desktop-break{display:none}.contact{font-size:13px;margin-top:27px;padding-bottom:7px;gap:20px}.art{margin:0;width:100%;max-width:500px;align-self:center}.universe{height:300px}.tulip{width:103px;height:115px}.bird{width:96px;height:79px}.star{width:93px;height:93px}.fold{width:82px;height:76px}.art-caption{font-size:11px;margin-top:-3px}.footer{font-size:9px;gap:20px;line-height:1.5}.footer>span{max-width:135px}.motto{gap:12px}.motto span{max-width:130px}.motto img{width:33px;height:21px}.cursor-ring{display:none}.ambient{display:none}}
@media(max-width:360px){.page{padding-inline:20px}.location{font-size:9px}h1{font-size:31px}.hero{padding-top:60px}.universe{height:270px}}
@media(max-width:760px){
  .art{margin-top:38px;width:145vw;max-width:none;flex-shrink:0}
  .universe{height:clamp(330px,87vw,460px)}
  .art-caption{margin-top:12px;width:calc(100vw - 50px);min-height:4.8em}
}
@media(min-width:761px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .copy{min-width:0;padding-right:24px}
  h1{font-size:clamp(26px,3.45vw,64px);letter-spacing:-1.7px}
  .eyebrow{max-width:320px}
  .description{max-width:370px;padding-right:0}
  .desktop-break{display:none}
  .art{margin-left:0}
  .universe{height:clamp(380px,min(42vw,60svh),640px)}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.ambient,.cursor-ring{display:none}}