@font-face{font-family:Manrope;src:url('../assets/Manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{--bone:#f1eade;--copper:#c5956b;--ground:#0c0f14;--muted:#b9b6ae;color-scheme:dark}
*{box-sizing:border-box}html{scrollbar-color:#716657 #0c0f14}body{margin:0;background:var(--ground);color:var(--bone);font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--copper);outline-offset:6px}button:disabled{opacity:.5;cursor:wait}h1,p{margin:0}
#journey{position:relative;height:270svh}.stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;touch-action:pan-y}
.backdrop{position:absolute;inset:-3%;z-index:0;overflow:hidden;background:#0d1117;will-change:transform}.backdrop video{width:100%;height:100%;object-fit:cover;opacity:.34;filter:grayscale(1) sepia(.2) brightness(.7) contrast(1.1);transition:opacity .8s}.tone{position:absolute;inset:0;background:linear-gradient(90deg,#0c0f1475,#0c0f1440 48%,#0c0f1420 75%),linear-gradient(0deg,#0c0f14,transparent 70%)}.studio-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 65% 34%,#9f82621e,transparent 54%)}.studio-only .backdrop video{opacity:0}
header{position:absolute;inset:0 0 auto;padding:30px 6%;display:flex;align-items:center;justify-content:space-between;z-index:8;background:linear-gradient(#0c0f1480,transparent)}.wordmark{font-weight:700;font-size:22px;letter-spacing:-.055em}.wordmark>span{color:var(--copper);padding-left:2px}.contact{display:flex;gap:38px;align-items:center;border:1px solid #c5956ba0;border-radius:30px;padding:12px 20px;font-size:12px;font-weight:500;background:#0c0f1460}.contact>span{color:var(--copper);font-size:18px;line-height:1}
.type-depth{position:absolute;inset:0;z-index:4;pointer-events:none;will-change:transform,opacity}.service{position:absolute;left:6%;top:19%;font-size:clamp(12px,1.15vw,16px);font-weight:450;line-height:1.6;letter-spacing:.005em;color:var(--copper);width:53%}.mobile-break{display:none}
.opening-title{position:absolute;left:6%;top:28%;font-size:9.5vw;line-height:1.02;letter-spacing:-.065em;font-weight:400;text-shadow:0 2px 24px #0c0f1450}.opening-title .headline-intro{display:block;font-size:.50em;font-weight:350;color:var(--bone);margin-bottom:.04em}.opening-title strong{display:block;font-weight:450}.opening-title .headline-tail{display:block;font-size:.365em;line-height:1.22;letter-spacing:-.045em;margin-top:.65em;color:var(--copper)}.headline-tail>span{display:block}
.watch-position{position:absolute;inset:0;z-index:3;pointer-events:none}#watch{display:block;width:100%;height:100%;mask-image:linear-gradient(to bottom,transparent,#000 19%,#000 91%,transparent)}#watch[hidden]{display:none}.static-watch{background:url('frames-preview/020.png') 78% 25%/60% auto no-repeat}
.benefits-copy{position:absolute;inset:0;z-index:5;pointer-events:none;visibility:hidden}.benefits-list{position:absolute;left:53%;right:5%;top:24%;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:28px}.benefits-list li{--delay:0s;position:relative;font-size:clamp(23px,2.8vw,42px);line-height:1.2;font-weight:400;letter-spacing:-.045em;opacity:0;transform:translate3d(22px,10px,0);transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .55s;transition-delay:var(--delay)}.benefits-list li:nth-child(2){--delay:.1s}.benefits-list li:nth-child(3){--delay:.2s}.benefits-list em{font-style:normal;color:var(--copper)}.benefit-number{position:absolute;left:-32px;top:.65em;font-size:9px;letter-spacing:.08em;color:#c5956ba0}
.s1-actions{position:absolute;left:53%;bottom:15%;display:flex;gap:14px;align-items:center;opacity:0;transform:translateY(12px);transition:opacity .65s .3s,transform .8s .3s}.s1-actions a{pointer-events:none}.work-action{background:var(--bone);color:#11151a;border:1px solid var(--bone);border-radius:30px;padding:14px 20px;display:flex;gap:25px;font-size:12px;font-weight:600;transition:background .2s}.work-action:hover{background:var(--copper);border-color:var(--copper)}.s1-actions .contact:hover{background:#c5956b25}.show-benefits .benefits-copy{visibility:visible}.show-benefits .benefits-list li,.show-benefits .s1-actions{opacity:1;transform:none}.show-benefits .s1-actions a{pointer-events:auto}
footer{position:absolute;left:6%;right:6%;bottom:28px;z-index:8;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.14em;color:#b5b2a6}.next{border:0;background:none;font-size:11px;letter-spacing:.02em;padding:8px 0}.next span{margin-left:24px;color:var(--copper)}.progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#c5956b0e;z-index:8}.progress>span{display:block;height:100%;width:100%;background:#c5956b70;transform:scaleX(0);transform-origin:left}.load-status{position:absolute;bottom:13%;left:6%;font-size:11px;color:var(--muted);z-index:10}.ready .load-status{display:none}
.review{padding:40px 6% 50px;display:flex;gap:35px;justify-content:space-between;background:#161a1e;border-top:1px solid #c5956b25}.review-label{font-size:9px;letter-spacing:.16em;color:var(--copper)}.review p{font-size:22px;margin:10px 0}.review small{display:block;color:var(--muted);max-width:500px;font-size:12px;line-height:1.6}.review-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}.review button{background:transparent;border:1px solid #c5956b60;border-radius:30px;padding:10px 18px;font-size:12px}.review button span{padding-left:20px;color:var(--copper)}.review a{font-size:12px;color:var(--muted)}.background-toggle{position:fixed;right:6%;bottom:72px;z-index:9;background:#0c0f1480;border:1px solid #c5956b25;border-radius:20px;font-size:10px;padding:8px 12px;color:var(--muted)}.background-toggle span{font-size:8px;margin-left:10px;color:var(--copper)}.studio-only .background-toggle span{color:#666}.review-visible .background-toggle{display:none}.show-benefits .background-toggle{right:auto;left:6%}
@media(min-width:651px) and (max-width:950px){.service{font-size:12px;max-width:320px}.mobile-break{display:block}.opening-title{top:33%;font-size:10vw}.opening-title .headline-tail{font-size:.43em}.benefits-list{top:27%;gap:24px}.benefits-list li{font-size:clamp(21px,2.8vw,27px)}.s1-actions{gap:9px}.s1-actions a{padding:11px 13px;font-size:10px;gap:12px}.benefit-number{left:-24px}}
@media(max-width:650px){#journey{height:290svh}.stage{min-height:600px}header{padding:24px 6% 28px;background:linear-gradient(#0c0f14eb,#0c0f14b0 50%,transparent)}.wordmark{font-size:19px}.contact{font-size:11px;padding:10px 14px;gap:23px}.service{top:88px;font-size:12px;width:88%;line-height:1.65}.mobile-break{display:block}.opening-title{top:47%;font-size:16.2vw}.opening-title .headline-intro{font-size:.52em}.opening-title .headline-tail{font-size:.48em;line-height:1.22;margin-top:.65em}#watch{mask-image:linear-gradient(to bottom,transparent,#000 19%,#000 var(--watch-solid,36%),transparent var(--watch-clear,44%))}.benefits-list{left:12%;right:5%;top:43%;gap:22px}.benefits-list li{font-size:clamp(23px,6.5vw,29px)}.benefit-number{left:-24px;font-size:8px}.s1-actions{left:6%;bottom:13%;gap:10px}.work-action,.s1-actions .contact{padding:12px 16px;font-size:11px;gap:18px}footer{bottom:23px;font-size:8px}.next{font-size:10px}.next span{margin-left:12px}.background-toggle{bottom:68px;font-size:9px;padding:7px 10px}.show-benefits .background-toggle{opacity:0;pointer-events:none}.review{flex-direction:column}.review p{font-size:20px}.review small{font-size:11px}.tone{background:linear-gradient(0deg,#0c0f14f0,#0c0f1480 35%,#0c0f1433 75%,#0c0f1460)}.static-watch{background-position:50% 6%;background-size:110% auto}.load-status{bottom:18%;font-size:10px}}
@media(max-width:370px){.s1-actions a{font-size:10px;padding:11px 12px;gap:12px}.benefits-list li{font-size:22px}.benefits-list{gap:18px}}
@media(max-height:700px) and (max-width:650px){.opening-title{top:46%;font-size:15.5vw}.opening-title .headline-tail{margin-top:.45em}.benefits-list{top:42%;gap:15px}.benefits-list li{font-size:clamp(22px,6vw,26px)}.s1-actions{bottom:12%}}
@media(prefers-reduced-motion:reduce){.backdrop video{display:none}.benefits-list li,.s1-actions{transition:none}.progress{display:none}}

.service{color:#ddd7cd;text-shadow:0 1px 12px #0c0f14}
@media(max-width:650px){.service{top:80px}}
@media(max-width:650px) and (max-height:650px){.service{top:76px;font-size:11px}}

/* S1 retains its original 270/290svh span; the extra distance belongs only to S2. */
:root{--s1-span:270svh;--s2-span:240svh}
#journey{height:calc(var(--s1-span) + var(--s2-span))}
.s1-measure{position:absolute;width:0;height:var(--s1-span);visibility:hidden;pointer-events:none}
.backdrop:after{content:"";position:absolute;inset:0;background:#0c0f14;opacity:calc(var(--detail-atmosphere,0)*.34)}
.detail-copy{position:absolute;z-index:5;left:53%;right:5%;top:21%;visibility:hidden;opacity:0;transform:translateY(18px);transition:opacity .7s,transform .9s cubic-bezier(.16,1,.3,1);pointer-events:none}
.detail-kicker{margin:0 0 23px;font-size:9px;letter-spacing:.16em;color:var(--copper)}
.detail-copy h2{font-weight:400;font-size:clamp(34px,4.25vw,66px);line-height:1.08;letter-spacing:-.055em;margin:0}
.detail-copy h2 span,.detail-copy h2 em{display:block}.detail-copy h2 em{font-style:normal;color:var(--copper)}
.detail-craft{margin-top:30px;font-size:clamp(15px,1.38vw,20px);line-height:1.65;font-weight:450;color:var(--bone)}.detail-craft span{display:block}
.detail-purpose{margin-top:20px;font-size:clamp(14px,1.2vw,18px);line-height:1.65;color:#b9b6ae;max-width:420px}
.show-detail .detail-copy{visibility:visible;opacity:1;transform:none}
.detail-caption{position:absolute;z-index:5;left:6%;bottom:13%;display:flex;align-items:center;gap:17px;font-size:11px;letter-spacing:.035em;opacity:0;transition:opacity .5s;pointer-events:none}
.detail-count{font-size:9px;color:var(--copper);letter-spacing:.12em}.detail-rule{height:1px;width:44px;background:#c5956b60}.detail-caption.visible{opacity:1}
.mechanism-toggle{position:absolute;z-index:9;left:6%;bottom:20%;font-size:10px;color:var(--muted);background:#0c0f1480;border:1px solid #c5956b50;border-radius:20px;padding:9px 13px;display:flex;gap:15px;align-items:center}.mechanism-toggle[hidden]{display:none}.mechanism-toggle span{color:var(--copper)}
.in-s2 .background-toggle{opacity:0;pointer-events:none}
.in-s2 header{background:linear-gradient(#0c0f14ef,#0c0f14a0 65%,transparent)}
.detail-caption.visible{padding:8px 11px;margin-left:-11px;background:#0c0f14b3;border-radius:3px}
@media(min-width:651px) and (max-width:950px){.detail-copy{top:25%;left:53%;right:4%}.detail-copy h2{font-size:clamp(29px,4.4vw,40px)}.detail-kicker{font-size:8px;margin-bottom:18px}.detail-craft{font-size:14px;margin-top:25px}.detail-purpose{font-size:13px;margin-top:15px}.desktop-break{display:none}}
@media(max-width:650px){:root{--s1-span:290svh;--s2-span:250svh}.detail-copy{left:6%;right:6%;top:45%}.detail-kicker{font-size:8px;margin-bottom:15px}.detail-copy h2{font-size:clamp(28px,8.8vw,39px);line-height:1.1}.detail-craft{font-size:14px;margin-top:20px;line-height:1.55}.detail-purpose{font-size:13px;margin-top:12px;line-height:1.6;max-width:310px}.desktop-break{display:none}.detail-caption{top:12%;bottom:auto;left:6%;gap:12px;font-size:10px}.detail-count{font-size:8px}.detail-rule{width:25px}.mechanism-toggle{left:auto;right:6%;top:12%;bottom:auto;padding:6px 10px;font-size:9px}}
@media(max-width:650px) and (max-height:700px){.detail-copy{top:43%}.detail-copy h2{font-size:clamp(27px,8vw,33px)}.detail-kicker{margin-bottom:12px}.detail-craft{margin-top:16px;font-size:13px}.detail-purpose{margin-top:10px;font-size:12px}.detail-caption{top:14%}.mechanism-toggle{top:14%}}
@media(prefers-reduced-motion:reduce){.detail-copy,.detail-caption{transition:none}}

/* Mobile S2 framing pass: desktop and S1 rules above remain unchanged. */
@media(max-width:650px){
 .detail-copy{top:48%;left:7%;right:7%}
 .detail-kicker{margin-bottom:11px}
 .detail-craft{margin-top:16px}
 .detail-purpose{margin-top:10px;max-width:300px}
 .detail-caption{top:15%;left:7%}
 .mechanism-toggle{top:15%;right:7%}
}
@media(max-width:650px) and (max-height:700px){
 .detail-copy{top:46%}
 .detail-kicker{margin-bottom:10px}
 .detail-craft{margin-top:13px}
 .detail-purpose{margin-top:9px}
 .detail-caption,.mechanism-toggle{top:16%}
}

/* S1 mobile only. Weight returns to zero before the S2 detail approach starts. */
@media(max-width:650px){
 body{--s1-mobile:1}
 .tone{opacity:calc(1 - var(--s1-mobile)*.48)}
 .backdrop video{opacity:calc(.34 + var(--s1-mobile)*.18)}
 .studio-only .backdrop video{opacity:0}
 .opening-title{top:49%;font-size:16.2vw}
 .opening-title .headline-tail{line-height:1.28;margin-top:.6em}
 .benefits-list{top:46%;gap:20px}
 .s1-actions{bottom:12%}
}
@media(max-width:650px) and (max-height:700px){
 .benefits-list{top:45%;gap:17px}
 .s1-actions{bottom:11%}
}

/* Mobile: a single exterior detail beat. Gear reveal is reserved for S3. */
@media(max-width:650px){
 :root{--s2-span:170svh}
 .tone{opacity:.52}
 .backdrop video{opacity:.52}
 .studio-only .backdrop video{opacity:0}
 .backdrop:after{opacity:calc(var(--detail-atmosphere,0)*.08)}
 .benefits-list li,.s1-actions{transition:none}
 .type-depth{transition:opacity .28s,transform .28s}
}
@media(max-width:650px) and (prefers-reduced-motion:reduce){.type-depth{transition:none}}

/* Mobile hero: immediate actions, one deliberate gesture and a short S2. */
.hero-actions{display:none}
@media(max-width:650px){
 :root{--s1-span:190svh;--s2-span:100svh}
 .service{top:76px;font-size:10px;line-height:1.6;max-width:210px}
 .opening-title{top:45%;font-size:16.2vw}
 .opening-title .headline-tail{font-size:.46em;margin-top:.46em;line-height:1.25}
 .hero-actions{position:absolute;z-index:7;left:6%;right:6%;bottom:10%;display:flex;gap:10px;align-items:center;transition:opacity .28s,transform .28s}
 .hero-actions a{padding:12px 17px;font-size:11px;gap:19px}
 .hero-actions .contact{background:#0c0f1460}
 .background-toggle{display:none}
 .benefits-list{top:43%;left:12%;gap:19px}
 .benefits-list li{font-size:clamp(22px,6.4vw,28px)}
 .s1-actions{bottom:11%}
 .detail-copy{top:48%}
 .detail-caption{top:15%}
 footer{bottom:20px}
}
@media(max-width:650px) and (max-height:700px){
 .opening-title{font-size:15.8vw;top:45%}
 .hero-actions{bottom:10%}
 .benefits-list{top:42%;gap:16px}
 .benefits-list li{font-size:clamp(21px,6.2vw,26px)}
 .detail-copy{top:46%}
}
@media(max-width:350px){.hero-actions a{font-size:10px;padding:11px 13px;gap:15px}}
@media(prefers-reduced-motion:reduce){.hero-actions{transition:none}}

/* More scroll is allocated to movement; the final reading hold stays short. */
@media(max-width:650px){:root{--s1-span:235svh;--s2-span:135svh}}