.buildup{--hero-h:max(100svh, 620px);--datum-y:calc(var(--hero-h) * .62);--spine-x:10px;--cols:4;--cell:calc((100cqw - 2 * var(--gutter)) / var(--cols));--w:min(64cqw, 300px);--unit:calc(var(--w) / 420);position:relative;container-type:inline-size}@media (min-width:768px){.buildup{--hero-h:max(86svh, 640px);--spine-x:calc(var(--gutter) / 2);--cols:12;--w:clamp(300px, min(30cqw, 60svh), 680px)}}.hero-backdrop{height:var(--hero-h);position:absolute;inset:0 0 auto}.hero-backdrop:after{content:"";background:linear-gradient(to bottom, #ecebe88c 75%, var(--color-concrete-50));position:absolute;inset:0}.setting-out{inset:0 var(--gutter);background-image:linear-gradient(90deg,#18181812 1px,#0000 1px),linear-gradient(#18181812 1px,#0000 1px);background-size:var(--cell) var(--cell);border-right:1px solid #18181812;position:absolute}.laser-v{top:var(--spine-top,0px);height:calc(var(--spine-end,100%) - var(--spine-top,0px));left:calc(var(--spine-x) - 1px);background:var(--color-red-600);transform-origin:top;width:2px;position:absolute;box-shadow:0 0 4px #b80a0e59}.laser-tick{top:calc(var(--spine-end,100%) - 2px);left:calc(var(--spine-x) - 1px);background:var(--color-red-600);transform-origin:0;width:24px;height:2px;position:absolute;box-shadow:0 0 4px #b80a0e59}.build .laser-v{transform:scaleY(0)}.build .laser-tick{transform:scaleX(0)}.laser-shot{left:calc(var(--spine-x) - 2px);top:var(--spine-top,0px);visibility:hidden;background:linear-gradient(to bottom, #b80a0e00, var(--color-red-600) 75%, #ff4a4f);width:4px;height:120px;position:absolute;box-shadow:0 0 10px #b80a0e99}.hero{z-index:1;height:var(--hero-h);position:relative}.hero-copy{left:0;right:0;top:calc(var(--header-h) + 20px);position:absolute}.hero-title{letter-spacing:-.02em;font-size:clamp(2.5rem,10.8vw,6.25rem);font-weight:800;line-height:.92}.hero-sub{max-width:34ch;color:var(--color-slate);margin-top:.875rem;font-size:1.0625rem;line-height:1.45}.hero-ctas{flex-wrap:wrap;gap:.625rem;margin-top:1.25rem;display:flex}@media (min-width:768px){.hero-copy{top:calc(var(--header-h) + clamp(2rem, 9svh, 6.5rem));max-width:calc(var(--gutter) + 7 * var(--cell))}.hero-title{font-size:clamp(3.5rem,min(6.4vw,11svh),8.5rem)}.hero-sub{max-width:40ch;margin-top:1rem;font-size:clamp(1.1875rem,.55vw + .8rem,1.625rem)}.hero-ctas{margin-top:1.5rem}}.stack-col{z-index:2;pointer-events:none;position:absolute;inset:0}.stack-sticky{height:var(--hero-h);--dock:0;position:sticky;top:0}.stack-anchor{transform:translate(-50%, -50%) translate(calc(var(--dock) * (50cqw - 100px)), calc(var(--dock) * (var(--header-h) + 68px - var(--hero-h) * .72))) scale(calc(1 - var(--dock) * .5));position:absolute;top:72%;left:50%}.dock-bar{left:0;right:0;top:var(--header-h);height:112px;padding-left:var(--gutter);padding-right:calc(100px + var(--w) * .3125 + 12px);background:var(--color-concrete-50);opacity:clamp(0, calc((var(--dock) - .66) * 3), 1);border-bottom:1px solid #1818181a;align-items:center;gap:.75rem;display:flex;position:absolute}.dock-bar .stamp{align-self:center}.dock-name{text-wrap:balance;font-weight:650;line-height:1.2}@media (min-width:768px){.stack-col{width:calc(var(--gutter) + 5 * var(--cell));left:auto}.stack-anchor{top:auto;left:auto;right:calc(var(--gutter) + var(--cell) * .5);bottom:calc(38% - var(--w) * .15);transform:none}.dock-bar{display:none}}@media (max-width:767px){html:not(.build) .stack-sticky{position:relative}}.build .buildup .layer:not([data-layer=slab]) .face{opacity:0;visibility:hidden}html:not(.build) .buildup .layer[data-finish]:not([data-finish=vinyl]){display:none}.buildup-section{z-index:1;padding-inline:var(--gutter);position:relative}@media (min-width:768px){.buildup-section{max-width:calc(var(--gutter) + 7 * var(--cell))}}.prep{padding-top:5rem}.finish{padding-top:3rem;padding-bottom:18svh}@media (min-width:768px){.finish{padding-bottom:30svh}}.finish-head{align-items:center;gap:1rem;display:flex}.steps{margin-top:3rem}.step{grid-template-columns:auto 1fr;align-content:start;column-gap:1rem;min-height:28svh;display:grid;position:relative}.step-finish{column-gap:.875rem;min-height:20svh}@media (min-width:768px){.step{min-height:60svh}.step-finish{min-height:40svh}}.step:before{content:"";top:.8rem;left:calc(var(--spine-x) + 1px - var(--gutter));width:calc(var(--gutter) - var(--spine-x) - 3px);background:var(--color-concrete-400);height:1px;position:absolute}.step[data-state=active]:before{background:var(--color-red-600)}.step-title{font-size:clamp(1.5rem,2.4vw,2.25rem);font-weight:750;line-height:1.05}.finish-name{letter-spacing:-.015em;font-size:clamp(1.75rem,3.4vw,3.25rem);font-weight:800;line-height:1}.finish-link{align-items:baseline;gap:.35em;display:inline-flex}.finish-link-arrow{transition:transform .2s var(--ease-out-strong);flex:none}.finish-link:active .finish-link-arrow{transform:translate(3px)}@media (hover:hover) and (pointer:fine){.finish-link:hover .finish-link-arrow{transform:translate(3px)}}.step-copy{max-width:46ch;color:var(--color-slate);margin-top:.75rem;font-size:1.0625rem;line-height:1.5}@media (min-width:768px){.step-copy{font-size:1.1875rem}}.step-reading{align-items:center;gap:.5rem;margin-top:1rem;font-size:.9375rem;font-weight:600;display:inline-flex}.step-finish>.tick{margin-top:.7rem}[data-state=active] .tick{background:var(--color-red-600);box-shadow:none}[data-state=done] .tick,html:not(.build) .tick{background:var(--color-ink)}
