/* The three surfaces share one projection. Scroll changes their spacing only. */
.header{position:absolute;top:0;left:0;right:0;z-index:10}
.unpacking{height:175svh;min-height:1100px;position:relative;background:radial-gradient(ellipse at 80% 90%,#f9f3eb 0,transparent 50%),linear-gradient(118deg,#eee9e2 0%,#e8e4df 44%,#d9d0ca 100%)}
.unpacking-sticky{height:100svh;min-height:680px;position:sticky;top:0;display:grid;grid-template-columns:39% 61%;align-items:center;padding:110px var(--pad) 85px;overflow:clip}
.hero-copy{position:relative;z-index:4;align-self:center;padding-bottom:35px}
.hero-eyebrow{font-size:13px;letter-spacing:.025em;margin-bottom:35px;color:var(--muted)}
.hero-copy h1{font-size:clamp(52px,6.1vw,108px);font-weight:470;letter-spacing:-.04em;line-height:1.01;white-space:nowrap}
.hero-promise{font-size:clamp(20px,2.15vw,34px);line-height:1.38;letter-spacing:-.03em;color:var(--muted);margin-top:30px}
.hero-audience{font-size:15px;line-height:1.5;margin-top:32px}
.hero-copy .text-link{margin-top:28px;font-size:clamp(14px,1.35vw,20px);gap:26px;border-color:var(--ink)}
.object-region{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;margin-left:2%}
.object-fit{height:min(72svh,760px);min-height:490px;position:relative}
.layer-object{position:absolute;left:50%;top:50%;width:840px;height:720px;transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center;--open:1;isolation:isolate}
.object-shadow{position:absolute;left:110px;top:520px;width:570px;height:130px;border-radius:50%;background:rgba(65,43,46,.22);filter:blur(38px);transform:skewY(12deg) scaleX(calc(.68 + var(--open)*.32));opacity:calc(.8 - var(--open)*.2)}
.slab{position:absolute;width:350px;height:480px;transform:matrix(.94,.32,0,1,0,0);transform-origin:0 50%;will-change:left,top;filter:drop-shadow(13px 26px 14px rgba(63,39,43,.16));border-radius:17px}
.slab-face{position:absolute;inset:0;border-radius:17px;padding:30px 26px;overflow:hidden;border:1px solid rgba(255,255,255,.92);box-shadow:inset 3px 0 2px rgba(255,255,255,.8),inset -3px 0 5px rgba(83,58,66,.2),inset 0 3px 2px rgba(255,255,255,.9),0 1px 0 #bba9a6}
.slab-face:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.38),transparent 24%,transparent 68%,rgba(255,255,255,.22));box-shadow:inset 0 0 0 4px rgba(255,255,255,.12)}
.slab-edge{position:absolute;inset:1px -9px -2px 7px;border-radius:17px;background:linear-gradient(90deg,#d0bfb6,#faf2e8 45%,#aa9595 93%,#e7d9ce 100%);border:1px solid #b9a7a2;box-shadow:2px 1px 1px rgba(255,255,255,.8)}
.slab-heading{font-size:36px;font-weight:460;letter-spacing:-.04em;line-height:1.15;padding-bottom:25px;border-bottom:1px solid rgba(57,40,49,.17)}
.slab-software{z-index:3;left:calc(215px - var(--open)*195px);top:calc(80px + var(--open)*65px)}
.slab-software .slab-face{background:linear-gradient(125deg,#f3eee7 0%,#e8ddd3 60%,#f2eae1 100%)}
.slab-data{z-index:2;left:calc(245px + var(--open)*0px);top:calc(62px + var(--open)*0px)}
.slab-data .slab-face{background:linear-gradient(125deg,rgba(228,211,211,.96),rgba(212,192,194,.92) 58%,rgba(233,218,211,.96))}
.slab-agreements{z-index:1;left:calc(275px + var(--open)*195px);top:calc(44px - var(--open)*65px)}
.slab-agreements .slab-face{color:#e8ddd8;background:linear-gradient(120deg,#72565e,#49323c 48%,#392831 100%);border-color:#d1bdbd;box-shadow:inset 3px 0 3px #b99d9e,inset -3px 0 5px #291b23,inset 0 3px 2px #c8adae}
.slab-agreements .slab-edge{background:linear-gradient(90deg,#8f747b,#cdb0ad 50%,#50353d 90%,#b49696);border-color:#61454c}
.slab-agreements .slab-heading{border-color:#a58b8e;text-align:left}
.data-content{margin-left:148px;padding-top:6px}.data-content p{font-size:22px;letter-spacing:-.025em;line-height:1.25;padding:22px 0;border-bottom:1px solid rgba(57,40,49,.22)}.data-content p:last-child{border:0}
.agreement-content{margin:33px 0 0 139px}.agreement-content>span{font-size:12px;line-height:1.5;color:#c6b2b7;display:block}.agreement-content p{font-size:29px;line-height:1.17;letter-spacing:-.035em;margin-top:18px}.agreement-rule{height:1px;background:#8d7179;margin:30px 0}
.software-ui{margin-top:18px}.calendar-top{display:flex;justify-content:space-between;font-size:13px;color:#65535b}.calendar-days{display:flex;justify-content:space-between;margin:15px 0 19px;border-bottom:1px solid #cdbdb7;padding-bottom:17px}.calendar-days>span{font-size:10px;text-align:center;min-width:36px;padding:6px 0;color:#65535b}.calendar-days b{font-size:17px;display:block;font-weight:400;margin-top:4px;color:var(--ink)}.calendar-selected{background:#d4c0c1;border-radius:20px}.appointment{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #d1c1ba;font-size:12px}.appointment>span{font-size:10px;background:rgba(185,165,172,.22);padding:8px;border-radius:20px}.appointment p{flex:1}.appointment i{font-style:normal;font-size:16px}.software-foot{display:none}
.object-controls{position:absolute;bottom:5px;left:12%;right:0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}.object-controls button{min-height:44px;font-size:12px;padding:8px 0;border-bottom:1px solid var(--line);display:flex;gap:25px;align-items:center}.object-controls button span{font-size:18px}
.hero-bottom{position:absolute;bottom:28px;left:var(--pad);right:var(--pad);display:flex;align-items:end;justify-content:space-between;gap:25px;font-size:12px;color:var(--muted)}.hero-bottom a{display:flex;align-items:center;gap:16px;min-height:44px}.hero-bottom svg{width:18px;height:18px}
.approach-points{display:grid;grid-template-columns:repeat(3,1fr);gap:55px;margin:70px 0 60px}.approach-points article{padding-top:22px;border-top:1px solid #89737d}.approach-points article>span{font-size:12px;color:var(--metal)}.approach-points h3{font-size:31px;margin:24px 0 18px}.approach-points p{font-size:16px;line-height:1.65;color:#d0c3c5;max-width:35ch}.study-foot{padding-top:25px;border-top:1px solid #89737d}.judgement{padding-bottom:70px}
@media(min-width:1800px){.unpacking-sticky{grid-template-columns:40% 60%}.hero-copy h1{font-size:112px}.object-fit{height:820px}}
@media(max-width:1100px) and (min-width:761px){.unpacking-sticky{grid-template-columns:42% 58%;padding-left:32px;padding-right:25px}.hero-copy h1{font-size:6.2vw}.hero-eyebrow{font-size:11px}.hero-promise{font-size:2.2vw}.object-fit{min-height:410px}.object-controls{left:8%;font-size:10px}.hero-copy .text-link{font-size:14px;gap:12px}.hero-bottom{left:32px;right:25px}.approach-points{gap:30px}.approach-points h3{font-size:26px}}
@media(max-width:760px){.unpacking{height:auto;min-height:0}.unpacking-sticky{position:relative;height:auto;min-height:0;display:block;padding:38px var(--pad) 30px;overflow:clip}.hero-copy{padding:0}.hero-eyebrow{font-size:11px;margin-bottom:24px}.hero-copy h1{font-size:clamp(50px,12.5vw,84px);line-height:1.01}.hero-promise{font-size:22px;margin-top:23px}.hero-audience{font-size:13px;margin-top:22px}.hero-copy .text-link{font-size:15px;margin-top:17px}.object-region{margin:20px -12px 0;display:block}.object-fit{height:87vw;min-height:0;max-height:590px}.object-controls{position:relative;bottom:auto;left:auto;right:auto;margin:8px 12px 0;font-size:10px}.hero-bottom{position:relative;bottom:auto;left:auto;right:auto;margin-top:28px;align-items:center;font-size:11px}.hero-bottom a{font-size:0;gap:0}.hero-bottom a svg{width:20px;height:20px}.approach-points{display:block;margin:36px 0}.approach-points article{margin-top:30px;padding-top:18px}.approach-points h3{font-size:28px;margin:15px 0}.approach-points p{max-width:44ch}.judgement{padding-bottom:45px}}
@media(prefers-reduced-motion:reduce){.unpacking{height:auto;min-height:0}.unpacking-sticky{position:relative}.object-controls button{display:none}}
@media(max-width:760px){.unpacking-sticky{padding-top:135px}.object-fit{height:89vw}}


.object-controls button svg{width:16px;height:16px}


/* A single, centered invitation to continue. */
.hero-bottom{justify-content:center;align-items:center}
.hero-bottom a{flex-direction:column;gap:10px;font-size:17px;color:var(--ink)}
.hero-bottom a svg{width:24px;height:24px;animation:scroll-invitation 1.8s ease-in-out 3}
@keyframes scroll-invitation{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(prefers-reduced-motion:reduce){.hero-bottom a svg{animation:none}}