/* Revision03: image-locked art with separately moving screen planes and satellites. */
:root{--paper:#e7e5df}
.header{background:rgb(231 229 223 / 32%);border-color:#ffffff25;backdrop-filter:blur(8px)}
.hero{margin-top:-91px;padding:0;height:56.4453125vw;min-height:650px;max-height:903px;overflow:hidden}
.hero-stage{inset:0;width:100%;height:100%;pointer-events:none;isolation:isolate;overflow:hidden}
.header .logo{width:200px}.header .logo img{height:43px}
.scene-canvas{position:absolute;left:0;top:0;width:1024px;height:578px;transform-origin:0 0;filter:brightness(.965) saturate(.96);isolation:isolate}
.reference-art{position:absolute;left:0;top:0;width:1024px;height:578px;display:block;overflow:hidden;z-index:0;mask-image:linear-gradient(to bottom,#000 96%,transparent)}
.reference-art img{width:1024px;height:1536px;max-width:none;display:block}
.hero-copy{position:absolute;left:4.7%;top:18.5%;width:43%;z-index:10;pointer-events:auto}
.hero .eyebrow{font-size:clamp(8px,.88vw,12px);line-height:1.65;letter-spacing:.25em;font-weight:400;margin-bottom:24px}
.hero h1{font-size:clamp(58px,5.6vw,90px);font-weight:400;line-height:1.03;letter-spacing:-.055em;margin-bottom:23px}
.hero h1 em{font-style:normal}
.hero .intro{font-size:clamp(14px,1.42vw,20px);line-height:1.5;max-width:340px;margin-bottom:27px;color:#28323a}
.hero-copy>.button{font-size:clamp(11px,1vw,14px);background:#efeee938;border-color:#4f575c;border-radius:3px;gap:34px;min-height:44px;padding:12px 20px}
.hero-meta{font-size:clamp(7px,.7vw,10px);letter-spacing:.22em;line-height:1.8;text-transform:uppercase;margin-top:50px;color:#34414a;border-left:1px solid #6b7475;padding:14px 0 0 0;position:relative;border-left:0}
.hero-meta:before{content:'';display:block;height:32px;border-left:1px solid #59676d;position:absolute;top:-34px;left:0}
.hero-foot{border:0;left:auto;right:3%;bottom:10px;z-index:15;padding:0;background:#e7e5df50;border-radius:8px}
.hero-foot>span{display:none}
.motion-toggle{padding:4px 8px;font-size:9px}
.orbit-paths{position:absolute;left:0;top:0;width:1024px;height:578px;z-index:6;opacity:.92;overflow:visible}
.orbit-back,.orbit-front{display:none}
.satellite,.satellite[data-orb]{position:absolute;left:0;top:0;width:var(--orb-size);height:var(--orb-size);z-index:8;opacity:1;visibility:visible;pointer-events:none;transition:none;will-change:transform}
.satellite img,.satellite:hover img{transform:none;transition:none;filter:drop-shadow(0 4px 5px #40566620)}
.satellite.blue img{filter:drop-shadow(0 4px 5px #40566625)}
.satellite.champagne img,.satellite.stone img{filter:drop-shadow(0 4px 5px #40566620)}
.device-drift.tablet-drift,.device-drift.phone-drift{position:absolute;left:0;top:0;perspective:none;transform-origin:0 0;will-change:auto;pointer-events:none}
.tablet-drift{z-index:3}.phone-drift{z-index:4}
.device,.tablet,.tablet:hover,.phone,.phone:hover{width:100%;height:100%;padding:0;border:0;border-radius:0;transform:none;box-shadow:none;background:none;transition:none}
.screen,.phone .screen{border:0;border-radius:0;height:100%;width:100%;overflow:hidden;background:#f2eee5}
.camera,.tablet-edge{display:none}
.demo-page,.phone .demo-page{height:calc(var(--screen-height)*4);background:#ece9df;color:#303930;font-size:10px}
.demo-fold{height:var(--screen-height);position:relative;overflow:hidden}
.demo-exact{background:#e9e6dd}
.demo-exact img{position:absolute;left:0;top:0;width:1024px;height:1536px;max-width:none;transform-origin:0 0}
.demo-live{padding:28px;background:#eeece3;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:15px}
.demo-live h3{font:32px/1.07 var(--serif);letter-spacing:-.035em;margin:0}
.demo-live p{font:10px/1.5 var(--sans);margin:0 auto;max-width:270px}
.demo-live small{font:7px var(--sans);letter-spacing:.14em}
.demo-live img{width:100%;height:57%;object-fit:cover;object-position:65% center}
.demo-live.photo{padding:0;background:#dcd7c9;display:grid;grid-template-rows:64% 36%;gap:0}
.demo-live.photo>div{align-self:center;padding:12px 20px}
.demo-live.photo h3{font-size:26px}.demo-live.photo img{height:100%}
.demo-live.end{background:#ebe7dc;color:#303930}
.demo-live.end b{font:18px var(--serif);font-weight:400}
.phone .demo-live{padding:15px 9px;gap:12px}
.phone .demo-live h3{font-size:24px}.phone .demo-live p{font-size:7px}.phone .demo-live small{font-size:5px}
.phone .demo-live.photo>div{padding:8px}.phone .demo-live.photo h3{font-size:20px}.phone .demo-live.end b{font-size:29px}
.demo-live.story{padding:10px 14px;display:grid;grid-template-rows:24px 156px 1fr;gap:9px;text-align:left}
.mini-nav{display:flex;align-items:center;justify-content:space-between;font:6px var(--sans);border-bottom:1px solid #c9c8bb;padding-bottom:6px}
.mini-nav b{font:17px var(--serif);font-weight:400}
.story-grid{display:grid;grid-template-columns:42% 58%;gap:9px;overflow:hidden;align-items:center}
.story-grid>div{padding:4px}.story-grid h3{font:23px/1.05 var(--serif);letter-spacing:-.025em;margin:10px 0}
.story-grid p{font:7px/1.4 var(--sans)}.story-grid small{font:5px var(--sans)}
.story-grid>img{width:100%;height:100%;object-fit:cover;object-position:67% center}
.product-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;overflow:hidden}
.product-strip img{height:100%;width:100%;object-fit:cover}.product-strip img:nth-child(1){object-position:90% center}.product-strip img:nth-child(2){object-position:50% center}.product-strip img:nth-child(3){object-position:70% center}
.demo-live.photo h3{font-size:22px;margin:5px 0}.demo-live.photo p{font-size:8px}
.demo-live.end{padding:11px 15px;display:grid;grid-template-rows:24px 118px 1fr 24px;gap:8px;text-align:left}
.journal-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:hidden}.journal-pair img{width:100%;height:100%;object-fit:cover}.journal-pair img:nth-child(1){object-position:85% center}.journal-pair img:nth-child(2){object-position:60% center}
.demo-live.end h3{font-size:22px;margin:7px 0}.demo-live.end p{font-size:8px}.mini-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #c9c8bb;font:5px var(--sans);padding-top:4px}
.mini-footer b{font-size:18px!important}
.phone .demo-live.story{padding:5px 7px;grid-template-rows:19px 158px 1fr;gap:5px}
.phone .mini-nav b{font-size:13px}.phone .mini-nav>span{font-size:3px}
.phone .story-grid{grid-template-columns:1fr;grid-template-rows:65% 35%;gap:3px}.phone .story-grid>img{grid-row:1}.phone .story-grid>div{grid-row:2;padding:2px}
.phone .story-grid h3{font-size:14px;margin:4px 0}.phone .story-grid p{font-size:4px}.phone .story-grid small{font-size:3px}
.phone .demo-live.photo h3{font-size:17px}.phone .demo-live.photo p{font-size:6px}
.phone .demo-live.end{padding:7px;grid-template-rows:19px 110px 1fr 20px;gap:6px}.phone .demo-live.end h3{font-size:17px}.phone .demo-live.end p{font-size:5px}.phone .demo-live.end .mini-nav b{font-size:13px}.phone .mini-footer span{font-size:3px}
@media(min-width:1550px){.hero{padding:0;min-height:0}.hero h1{font-size:96px}.hero-stage{height:100%}}
@media(max-width:1000px) and (min-width:701px){.hero{height:63vw;min-height:560px;padding:0}.hero-stage{inset:0;height:100%}.hero-copy{width:43%;top:20%;left:4.7%}.hero h1{font-size:5.9vw}.hero .intro{font-size:14px;max-width:260px}.hero-meta{margin-top:40px;font-size:7px}}
@media(max-width:700px){
 .header{background:#e7e5dfc2}.header .logo{width:116px}.header .logo img{height:31px}.hero{margin-top:0;height:auto;min-height:0;max-height:none;padding:42px 7% 30px;overflow:hidden}
 .hero-copy{position:relative;left:auto;top:auto;width:100%}.hero .eyebrow{font-size:9px;letter-spacing:.18em;line-height:1.7;margin-bottom:25px}
 .hero h1{font-size:clamp(40px,11.4vw,60px);line-height:1.05;margin-bottom:22px}
 .hero .intro{font-size:15px;line-height:1.55;max-width:310px;margin-bottom:25px}
 .hero-copy>.button{font-size:12px;min-height:45px;gap:24px;padding:12px 17px}.hero-meta{display:none}
 .hero-stage{position:relative;left:auto;right:auto;top:auto;width:calc(100% + 16.3%);aspect-ratio:724/555;height:auto;margin:22px -8.15% 0}
 .reference-art{mask-image:linear-gradient(to bottom,transparent 70px,#000 155px,#000 560px,transparent 578px)}
 .hero-foot{bottom:3px;right:5%}.motion-toggle{font-size:8px}
 .satellite,.satellite[data-orb]{width:var(--orb-size);height:var(--orb-size)}
}