:root{--ink:#252421;--soft:#555049;--ground:#f8f4ed;--header:clamp(100px,6.9vw,180px);--gutter:6.5vw}
*{box-sizing:border-box}html{scroll-padding-top:var(--header)}body{margin:0;background:var(--ground);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #725d49;outline-offset:6px}button:active,.primary:active{transform:translateY(1px)}::selection{background:#bca78e;color:#252421}
header{position:fixed;inset:0 0 auto;height:var(--header);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;z-index:10;background:transparent;transition:background .2s ease-out}body.past-intro header{background:#faf7f0f5}header nav{display:flex;align-items:center;gap:clamp(30px,4vw,70px)}header nav a,header nav button{font-size:18px;background:none;border:0;padding:12px 0}header nav a:hover,header nav button:hover{text-decoration:underline;text-underline-offset:6px}.contact,.primary{background:var(--ink);color:#faf7f0;border:0;padding:15px 30px;font-size:17px;white-space:nowrap;display:inline-block}.contact:hover,.primary:hover{background:#45413a}.logo-window{display:block;position:relative;width:194px;height:70px;overflow:hidden}.logo-window img{position:absolute;width:267px;height:auto;max-width:none;left:-34px;top:-130px;filter:url(#logo-ink)}
.story{height:400svh}.stage{height:100svh;position:sticky;top:0;overflow:hidden;background:#d6c6b3}.environment,.poster,.set-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.environment{object-position:center center}.poster{opacity:1}.set-scene{opacity:0;pointer-events:none}#box{position:absolute;inset:0;width:100%;height:100%;opacity:0}.ready #box{opacity:1}.ready .poster{opacity:0}.opening-copy{position:absolute;left:var(--gutter);top:25%;width:43%;max-width:660px}.opening-copy h1{font-size:clamp(45px,4.8vw,80px);font-weight:400;letter-spacing:-.045em;line-height:1.08;margin:0 0 30px}.opening-copy p{font-size:clamp(17px,1.35vw,22px);line-height:1.6;max-width:540px;margin:0 0 34px;color:#49443f;text-wrap:pretty}
#tools{position:relative;margin-top:-100svh;scroll-margin-top:var(--header);visibility:hidden}body.explorer-ready #tools{visibility:visible}.product-view{height:100svh;position:relative;overflow:hidden}.product-view>img{width:100%;height:100%;object-fit:cover}.product-copy{position:absolute;left:22%;top:32%;width:32%;max-width:500px}.number{font-size:13px;letter-spacing:.18em;color:#665c51}.product-copy h2{font-size:clamp(42px,4vw,67px);font-weight:400;letter-spacing:-.045em;line-height:1.08;margin:26px 0}.description{max-width:360px;line-height:1.6;font-size:20px;color:#504a42}.product-copy a{display:inline-block;margin-top:8px;border-bottom:1px solid #8b7865;padding-bottom:7px}.tabs{display:flex;justify-content:center;gap:clamp(25px,4vw,65px);padding:24px 30px 30px;background:var(--ground);position:relative}.tabs button{border:0;background:none;font-size:18px;padding:8px 3px 12px;position:relative}.tabs button::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);transform:scaleX(0);transition:transform .18s ease-out}.tabs button[aria-selected=true]::after,.tabs button:hover::after{transform:scaleX(1)}#details{padding:12px var(--gutter) 80px;scroll-margin-top:125px}.details-crop{position:relative;width:100%;max-width:1200px;aspect-ratio:1/.34;margin:auto;overflow:hidden}.details-crop img{position:absolute;top:0;left:0;width:100%;height:auto;transform:translateY(-58.5%)}.captions{max-width:1200px;display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:15px auto 0}.captions h3{font-size:21px;font-weight:400;margin:0}.study-note{text-align:center;padding:25px;color:#696055;font-size:13px;border-top:1px solid #ded4c7}.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
dialog{border:0;background:#f8f4ed;color:var(--ink);max-width:560px;padding:55px}dialog::backdrop{background:#25242180}dialog h2{font-size:36px;font-weight:400}dialog p{font-size:18px;line-height:1.6}.close{position:absolute;right:20px;top:15px;border:0;background:none;font-size:28px}.return{border:0;background:var(--ink);color:var(--ground);padding:14px 20px}
@media(prefers-reduced-motion:reduce){.story{height:100svh}.stage{position:relative}.poster{opacity:1!important}#box,.set-scene{display:none}.opening-copy{opacity:1!important;transform:none!important}#tools{margin-top:0;visibility:visible!important}*{scroll-behavior:auto!important}}
@media(max-height:760px){:root{--header:86px}.opening-copy{top:24%}.opening-copy h1{font-size:clamp(42px,4.1vw,62px);margin-bottom:22px}.opening-copy p{font-size:17px;margin-bottom:24px}}
@media(max-width:900px){:root{--gutter:32px}header nav{gap:20px}header nav a,header nav button{font-size:15px}.logo-window{transform:scale(.82);transform-origin:left center;width:165px}.contact{font-size:14px;padding:12px 18px}.opening-copy h1{font-size:40px}.opening-copy p{font-size:16px}.product-copy{left:10%}.description{font-size:17px}}

/* Match the mockup's neutral grotesk proportions rather than the old Jakarta.
   Generated type is not an identifiable font file; this is a visible match. */
@media(min-width:901px){
 .opening-copy{max-width:none;width:43%;top:25%}
 .opening-copy h1{font-size:4.5vw;letter-spacing:-.035em;line-height:1.08;margin-bottom:2.1vw}
 .opening-copy p{font-size:1.32vw;line-height:1.5;max-width:37vw;margin-bottom:2.4vw}
 header nav a,header nav button{font-size:clamp(18px,1.22vw,36px)}
 header nav{gap:4.3vw}
 .contact,.primary{font-size:clamp(17px,1.25vw,36px);padding:1.15vw 2.5vw}
 .logo-window{width:13.5vw;height:4.86vw}
 .logo-window img{width:18.54vw;left:-2.36vw;top:-9.03vw}
 .product-copy{max-width:none}
 .product-copy h2{font-size:4vw}
 .description{font-size:1.4vw;max-width:26vw}
 .number{font-size:clamp(13px,.92vw,28px)}
 .product-copy a,.tabs button{font-size:clamp(18px,1.25vw,36px)}
}
/* Desktop composition: reserve the product selector within the viewport. */
@media(min-width:901px){
 :root{--header:clamp(86px,4.7vw,116px);--selector:76px}
 header nav a,header nav button{font-size:clamp(18px,1.1vw,22px)}
 header nav{gap:clamp(34px,3.5vw,72px)}
 .contact,.primary{font-size:clamp(17px,1.15vw,22px);padding:17px 32px}
 .logo-window{width:230px;height:83px}
 .logo-window img{width:316px;left:-40px;top:-154px}
 .opening-copy{top:28%;width:44%}
 .opening-copy h1{font-size:clamp(54px,4.1vw,100px);margin-bottom:32px}
 .opening-copy p{font-size:clamp(18px,1.2vw,26px);max-width:670px;margin-bottom:32px}
 .set-scene{top:var(--header);height:calc(100% - var(--header) - var(--selector));transform-origin:center center}
 .product-view{height:calc(100svh - var(--selector));padding-top:var(--header)}
 .product-view>img{height:100%;object-fit:cover}
 .tabs{height:var(--selector);padding:12px 30px;align-items:center;gap:clamp(28px,3.4vw,70px)}
 .tabs button{font-size:clamp(18px,1.15vw,24px)}
 .preview-tabs{position:absolute;bottom:0;left:0;right:0;z-index:3;background:#e5d8c8}
 #tools>.tabs{background:#e5d8c8}
 .product-copy{top:30%;left:24%}
 .product-copy h2{font-size:clamp(48px,3.8vw,84px)}
 .description{font-size:clamp(19px,1.25vw,25px);max-width:440px}
 .number{font-size:15px}
 .product-copy a{font-size:20px}
 body.past-intro header{background:#eee3d4f5}
}
@media(prefers-reduced-motion:reduce){.preview-tabs{display:none}}
@media(min-width:901px){
 :root{--header:clamp(90px,4.1vw,144px);--selector:clamp(76px,4vw,100px)}
 header nav a,header nav button{font-size:clamp(18px,.85vw,30px)}
 .contact,.primary{font-size:clamp(17px,.9vw,28px);padding:18px 36px}
 .logo-window{width:clamp(194px,8.2vw,300px);height:clamp(70px,2.96vw,108px)}
 .logo-window img{width:clamp(267px,11.27vw,413px);left:clamp(-53px,-1.44vw,-34px);top:clamp(-202px,-5.5vw,-130px)}
 .opening-copy h1{font-size:clamp(54px,3.8vw,140px)}
 .opening-copy p{font-size:clamp(18px,.9vw,32px);max-width:880px}
 .tabs button{font-size:clamp(18px,.9vw,30px)}
}
@media(min-width:901px){.story{height:850svh}}
.tour-panel{position:absolute;inset:0;pointer-events:none}
.tour-panel:not([inert]){pointer-events:auto}
.tour-image{position:absolute;left:0;top:var(--header);width:100%;height:calc(100% - var(--header) - var(--selector,76px));object-fit:cover}
.tour-panel .product-copy{top:30%}
.complete-details{position:absolute;right:var(--gutter);bottom:32px;border-bottom:1px solid #8b7865;padding-bottom:7px;font-size:20px}
#details[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.story{height:100svh}.tour-panel{display:none}}
@media(min-width:901px){.environment{width:140%;height:140%;left:-20%;top:-40%;object-fit:fill}}
@media(min-width:901px){
 .environment{width:100%;height:100%;left:0;top:0;object-fit:cover}
 .opening-copy{width:35%}
 .opening-copy h1{font-size:clamp(50px,3.5vw,134px);letter-spacing:-.035em}
 .opening-copy p{max-width:100%;font-size:clamp(18px,1vw,36px)}
}
@media(min-width:901px){.story{height:1250svh}}
@media(min-width:901px) and (max-width:3500px){
 .opening-copy{width:40%}
 .opening-copy h1{font-size:clamp(52px,4vw,140px)}
 .opening-copy p{font-size:clamp(18px,1.12vw,36px)}
}
@media(prefers-reduced-motion:reduce){.story{height:100svh}}
:root{--ground:#bdb7af}
.stage{background:#bdb7af}
body.past-intro header{background:#bdb7aff2}
.tabs,.preview-tabs,#tools>.tabs{background:#bdb7af}
#details{background:#bdb7af;padding-top:38px}
.details-crop{aspect-ratio:3840/1648;max-width:1800px}
.details-crop img{position:relative;width:100%;height:auto;transform:none}
.captions{max-width:1800px}
.study-note{background:#272623;color:#ded9d1;border-top:0}
@media(prefers-reduced-motion:reduce){#box{display:block}.poster{display:none}}
/* Product framing and calmer desktop scroll score. Text and controls keep their size. */
@media(min-width:901px){
 .story{height:1650svh}
 .tour-panel,.product-view{background-image:url('media/studio-plate.png');background-size:cover;background-position:center}
 .set-scene,.product-view>img,.tour-image{transform:scale(.9);transform-origin:center center;mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);mask-composite:intersect}
}
@media(prefers-reduced-motion:reduce){.story{height:100svh}}
@media(min-width:901px){.set-scene,.product-view>img,.tour-image{object-fit:contain;mask-image:linear-gradient(to right,transparent,#000 1.5%,#000 98.5%,transparent);mask-composite:add}}
@media(min-width:901px){
 .set-scene,.product-view>img,.tour-image{object-fit:cover;object-position:center bottom;mask-image:linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 98%,transparent);mask-composite:intersect}
}
@media(min-width:901px){
 .set-scene,.product-view>img,.tour-image{object-fit:contain;object-position:center;--picture-inset:max(0px,calc((100vw - (100svh - var(--header) - var(--selector))*16/9)/2));mask-image:linear-gradient(to right,transparent calc(var(--picture-inset) - 1px),#000 calc(var(--picture-inset) + 9vw),#000 calc(100% - var(--picture-inset) - 9vw),transparent calc(100% - var(--picture-inset) + 1px)),linear-gradient(to bottom,transparent,#000 12%,#000 94%,transparent);mask-composite:intersect}
}

@media(min-width:901px){body.past-intro header{background:transparent}.preview-tabs{background:transparent}}
/* Quiet ending: transparent email row, then the approved charcoal footer. */
.launch-section{position:relative;padding:clamp(110px,10vw,260px) var(--gutter) clamp(120px,11vw,280px);background:#bdb7af;scroll-margin-top:var(--header)}
.launch-section::before{content:'';position:absolute;inset:0;background:url('media/studio-plate.png') center/cover;mask-image:linear-gradient(transparent,#000 22%,#000 75%,transparent);pointer-events:none}
.launch-content{position:relative;max-width:1100px;margin:0 auto;text-align:center}
.launch-kicker{font-size:clamp(12px,.65vw,20px);letter-spacing:.2em;margin:0 0 32px}
.launch-content h2{font-size:clamp(52px,4.1vw,132px);font-weight:400;letter-spacing:-.045em;line-height:1.07;margin:0 0 26px}
.launch-intro{font-size:clamp(19px,1.1vw,32px);color:#504c47;margin:0 0 60px}
.launch-form{max-width:760px;margin:0 auto;text-align:left}
.launch-form label{font-size:clamp(14px,.8vw,22px);display:block;margin-bottom:12px}
.email-line{display:flex;align-items:stretch;border-bottom:1px solid #5c5650;gap:25px;padding-bottom:16px}
.email-line input{width:100%;min-width:0;background:transparent;border:0;color:var(--ink);font:inherit;font-size:clamp(21px,1.4vw,36px);padding:14px 0;outline-offset:5px}
.email-line input::placeholder{color:#68615b}
.email-line button{flex-shrink:0;background:#252421;color:#f1ece5;border:0;font-size:clamp(17px,.9vw,26px);padding:16px 28px}
.email-line button span{margin-left:24px}
.email-line button:disabled{cursor:default;opacity:.65}
.connection-note{font-size:13px;line-height:1.6;color:#59534d;margin:15px 0 0}
.site-footer{position:relative;background:#272623;color:#eae6df;padding:70px var(--gutter) 30px}
.footer-main{display:flex;align-items:center;justify-content:space-between;gap:55px;padding-bottom:55px}
.footer-brand .logo-window img{filter:brightness(0) invert(.9)}
.site-footer nav{display:flex;gap:clamp(25px,3vw,80px);align-items:center}
.site-footer nav a,.site-footer nav button{font-size:clamp(16px,.8vw,26px);background:none;border:0;color:inherit;padding:10px 0}
.site-footer nav a:hover,.site-footer nav button:hover{text-decoration:underline;text-underline-offset:6px}
.social-icons{display:flex;gap:24px;align-items:center}
.social-icon{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center}
.social-icon svg{width:28px;height:28px}
.footer-bottom{border-top:1px solid #ffffff20;padding-top:25px;display:flex;align-items:center;justify-content:space-between;font-size:14px;color:#b8b3ab}
.footer-language{display:flex;gap:24px}.footer-language [aria-current]{color:#eae6df}.pending-language{opacity:.55}
body.at-closing header{background:#bdb7aff2}body.at-footer header{visibility:hidden}
@media(min-width:901px) and (max-width:1200px){.footer-main{gap:25px}.site-footer nav{gap:22px}}
.footer-brand .logo-window img{filter:url(#logo-ink) brightness(0) invert(.9)}

/* Desktop typography trial. */
@font-face{font-family:'Veyrik Cormorant';src:url('media/fonts/cormorant-garamond.woff2') format('woff2');font-style:normal;font-weight:300 700;font-display:swap}
@font-face{font-family:'Veyrik Manrope';src:url('media/fonts/manrope.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
@media(min-width:901px){
 body{font-family:'Veyrik Manrope',Arial,sans-serif;font-weight:400}
 .opening-copy h1,.product-copy h2,.launch-content h2,dialog h2,.captions h3{font-family:'Veyrik Cormorant',Georgia,serif;font-weight:500;letter-spacing:-.015em;line-height:1.04}
 .opening-copy h1{font-size:clamp(58px,4.3vw,154px)}
 .product-copy h2{font-size:clamp(56px,4.1vw,140px)}
 .launch-content h2{font-size:clamp(62px,4.5vw,154px)}
 .captions h3{font-size:clamp(26px,1.1vw,38px);line-height:1.2}
 header nav a,header nav button,.tabs button,.contact,.primary,.email-line button{font-weight:500;letter-spacing:-.015em}
 .opening-copy p,.description,.launch-intro{line-height:1.65;letter-spacing:-.012em}
 .number,.launch-kicker{font-weight:500;letter-spacing:.16em}
}

/* More physical scroll room, without capturing or cancelling wheel input. */
@media(min-width:901px){.story{height:2200svh}}
.scene-transition-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:url('media/studio-plate.png') center/cover;opacity:0;transition:opacity 550ms ease-out}
@media(prefers-reduced-motion:reduce){.story{height:100svh}.scene-transition-veil{display:none}}