/* Sourcing-first landing page. Shared readable type scale: typography-system.css. */
@property --scene-light{syntax:"<color>";inherits:true;initial-value:#f3f3f3}
:root{--bg:#000000;--ink:#f5f5f5;--muted:#b8b8b8;--accent:#ffffff;--surface:#101010;--white:#ffffff;--line:#333333;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:2rem}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hanken Grotesk",sans-serif;font-size:var(--type-body);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:.25em}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:#ffffff33}
a:hover{color:var(--accent)}
a:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
p,h1,h2,h3,figure{margin:0}
h1,h2,h3{font-weight:500;line-height:1.08;letter-spacing:-.045em;text-wrap:balance}
p{max-width:65ch;text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
svg{flex-shrink:0}
section,[id]{scroll-margin-top:2rem}
.wrap{width:min(1320px,calc(100% - 96px));margin-inline:auto}
.skip-link{position:absolute;left:1rem;top:-6rem;background:var(--accent);color:var(--bg);padding:1rem;z-index:10}
.skip-link:focus{top:1rem}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:28px}
.wordmark{font-size:34px;line-height:1;letter-spacing:-.075em;font-weight:800;text-decoration:none;display:inline-flex;align-items:center}
.brand-star{font-size:26px;color:var(--accent);margin-left:4px}
.wordmark-small{font-size:10px;letter-spacing:.05em;writing-mode:vertical-rl;margin-left:5px}
.site-header nav{display:flex;align-items:center;gap:36px;font-size:var(--type-small)}
.site-header nav a{text-decoration:none}
.site-header .nav-contact{padding:10px 0;border-bottom:1px solid currentColor}
.hero{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;align-items:start;padding-top:38px;padding-bottom:40px}
.hero:has(.is-constellation){align-items:center}
.hero-copy{position:relative;z-index:2;padding-bottom:34px}
h1{font-size:clamp(42px,5vw,76px);max-width:15ch;font-weight:600;line-height:1.02;letter-spacing:-.055em}
.hero-description{font-size:var(--type-body-large);margin-top:28px;max-width:32ch;line-height:1.45}
.hero-business{margin-top:28px;color:var(--muted);max-width:38ch;font-size:var(--type-body-large);line-height:1.5}
.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:54px;padding:14px 22px;text-decoration:none;font-size:var(--type-body);font-weight:600;border-radius:3px;transition:background-color .18s,color .18s}
.primary{background:var(--accent);color:var(--bg)}
.primary:hover{background:var(--ink);color:var(--bg)}
.hero .button{margin-top:28px}
.hero-note{font-size:var(--type-label);color:var(--muted);margin-top:18px;max-width:36ch}
.collectible-display{position:relative;min-width:0;width:100%;max-width:740px;justify-self:end;transition:--scene-light 1.5s}
.constellation-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.display-piece{position:relative;min-width:0;transform:none}
.display-piece figure{margin:0}
.display-piece img{width:100%;aspect-ratio:1;object-fit:contain}
.display-piece figcaption{padding:12px 0 0;line-height:1.4;text-align:center}
.display-piece figcaption strong{display:block;font-weight:500;font-size:var(--type-small)}
.display-piece figcaption span,.display-piece figcaption a{display:inline-block;font-size:var(--type-caption);color:var(--muted);min-height:24px}
.scene-word{display:none}
.is-constellation .constellation-stage{position:relative;display:block;container-type:inline-size;aspect-ratio:1/1.16;perspective:1200px;isolation:isolate;overflow:clip;background:var(--bg)}
.is-constellation .constellation-stage:after{content:"";position:absolute;left:16%;right:16%;bottom:12%;height:8%;background:#08050b80;filter:blur(20px);border-radius:50%;pointer-events:none}
.is-constellation .scene-word{display:block;position:absolute;z-index:4;inset:1% 4% auto;text-align:right;white-space:normal;font-size:clamp(13px,3cqw,22px);line-height:1;font-weight:500;letter-spacing:.16em;color:var(--muted);pointer-events:none}
.is-constellation .display-piece{position:absolute;left:50%;top:50%;width:74cqw;z-index:1;opacity:0;transform:translate(-50%,-50%) translate3d(calc(var(--nx,0)*1cqw),calc(var(--ny,0)*.95cqw),var(--nz,-250px)) rotate(var(--angle,0deg)) scale(.3)}
.is-constellation .display-piece.is-support{opacity:.42;filter:brightness(.8)}
.is-ready .display-piece{transition:transform 1.5s cubic-bezier(.16,.8,.24,1),opacity 1s,filter 1s}
.is-constellation .display-piece figcaption{opacity:0;pointer-events:none}
.is-constellation .display-piece.is-front{z-index:3;opacity:1;filter:none;transform:translate(-50%,-50%) translate3d(0,0,60px) rotate(0deg) scale(1)}
.is-constellation .display-piece.is-front img{animation:product-arrives 1.5s cubic-bezier(.16,.8,.24,1) both}
.is-constellation .display-piece img{border-radius:0;box-shadow:none}
.is-constellation .display-piece figure{transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .22s ease-out}
.is-constellation .display-piece:focus-within figure{transform:none}
.is-constellation[data-entry="rise"]{--arrival-x:0%;--arrival-y:12%;--arrival-angle:-3deg}
.is-constellation[data-entry="glide"]{--arrival-x:12%;--arrival-y:2%;--arrival-angle:4deg}
.is-constellation[data-entry="sweep"]{--arrival-x:-12%;--arrival-y:4%;--arrival-angle:-4deg}
@keyframes product-arrives{from{transform:translate(var(--arrival-x),var(--arrival-y)) scale(.9) rotate(var(--arrival-angle));opacity:.3}to{transform:translate(0,0) scale(1) rotate(0);opacity:1}}
.is-constellation .display-piece.is-front figcaption{opacity:1;pointer-events:auto;padding-top:20px}
.is-constellation .display-piece.is-front figcaption strong{font-size:clamp(16px,2.8cqw,22px);font-weight:600}
.is-constellation[data-phase="recede"] .display-piece.is-front{opacity:.08;transform:translate(-50%,-50%) translate3d(0,-14cqw,-240px) rotate(-8deg) scale(.62)}
.is-constellation[data-entry="glide"][data-phase="recede"] .display-piece.is-front{transform:translate(-50%,-50%) translate3d(26cqw,3cqw,-240px) rotate(10deg) scale(.65)}
.is-constellation[data-entry="sweep"][data-phase="recede"] .display-piece.is-front{transform:translate(-50%,-50%) translate3d(-26cqw,5cqw,-240px) rotate(-12deg) scale(.65)}
.is-constellation[data-phase="recede"] .display-piece.is-front figcaption{opacity:0}
.is-constellation .is-excluded{display:none}
.journey{padding-top:48px;border-top:1px solid var(--line)}
.journey-heading{display:flex;align-items:center;justify-content:space-between;gap:3rem}
h2{font-size:clamp(32px,3vw,44px)}
.journey-heading>p{max-width:36ch;color:var(--muted)}
.journey-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin:42px 0 36px;padding:0}
.journey-steps li{position:relative;min-width:0}
.step-number{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--surface);color:var(--accent);border-radius:50%;font-size:var(--type-small);margin-bottom:20px}
.journey-steps li:not(:last-child):after{content:"";position:absolute;top:17px;left:50px;right:0;height:1px;background:var(--line)}
h3{font-size:var(--type-heading-small);font-weight:600;letter-spacing:-.025em}
.journey-steps p{margin-top:12px;color:var(--muted);font-size:var(--type-small)}
.final-cta{display:flex;align-items:center;justify-content:space-between;gap:36px;padding:40px;margin-top:54px;margin-bottom:54px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px}
.final-cta .primary{flex-shrink:0;background:var(--accent);color:var(--bg)}
.final-cta .primary:hover{background:var(--ink);color:var(--bg)}
.final-cta a:focus-visible{outline-color:var(--white)}
.final-cta p{margin-top:12px;color:var(--muted)}
.site-footer{border-top:1px solid var(--line);padding-block:28px 34px;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:var(--type-caption);color:var(--muted)}
.site-footer .wordmark{font-size:26px;color:var(--ink)}
.site-footer .brand-star{font-size:22px}
.site-footer p{margin-top:10px}
.footer-signoff{display:flex;align-items:center;gap:8px}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero{gap:20px;padding-top:30px}.journey-steps{gap:28px}.site-footer{flex-wrap:wrap}.footer-signoff{margin-left:auto}}
@media(max-width:800px){.hero{grid-template-columns:1fr}.hero-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;padding-bottom:0}h1{grid-row:1/5;font-size:52px;max-width:13ch}.hero-description{margin-top:6px;font-size:var(--type-body-large)}.hero-business{margin-top:12px}.hero .button{margin-top:18px;justify-self:start;gap:10px}.hero-note{margin-top:8px}.collectible-display{max-width:620px;width:100%;margin:30px auto 0}.journey-heading{gap:30px}.journey-heading>p{max-width:29ch}.final-cta{gap:24px;padding:30px}.final-cta .button{flex-shrink:0}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.site-header{padding-block:22px;gap:12px}.site-header nav{font-size:var(--type-label)}.how-link{display:none}.wordmark{font-size:30px}.brand-star{font-size:24px}.hero{padding-top:26px;gap:0}.hero-copy{display:block}h1{font-size:clamp(39px,10vw,54px);max-width:14ch}.hero-description{margin-top:22px;max-width:30ch}.hero-business{margin-top:12px;font-size:var(--type-small);max-width:40ch}.hero .button{margin-top:22px}.hero-note{margin-top:10px;font-size:var(--type-caption)}.collectible-display{margin-top:30px}.journey{padding-top:38px}.journey-heading{display:block}.journey-heading>p{margin-top:16px;max-width:35ch;font-size:var(--type-small)}.journey-steps{display:block;margin:28px 0}.journey-steps li{padding:0 0 24px 52px}.step-number{position:absolute;left:0;top:0}.journey-steps li:not(:last-child):after{top:44px;bottom:10px;left:16px;right:auto;height:auto;width:1px}.journey-steps h3{padding-top:4px}.journey-steps p{margin-top:8px}.final-cta{display:block;padding:28px 22px;margin-top:36px;margin-bottom:36px}.final-cta .button{margin-top:24px}.site-footer{display:grid;gap:18px;padding-block:24px}.footer-signoff{margin-left:0}}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.site-header .nav-contact{font-size:var(--type-caption)}.hero .button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.is-constellation .display-piece{transform:translate(-50%,-50%) translate(calc(var(--nx,0)*1cqw),calc(var(--ny,0)*1cqw)) scale(.42)!important}.is-constellation .display-piece.is-front{transform:translate(-50%,-50%)!important}}