:root{color-scheme:dark;--navy:#041122;--white:#f8f7f3;--cyan:#40e8f4;--gold:#efc885;--line:#ffffff28;--px:0px;--py:0px;--rx:0deg;--ry:0deg;--scroll:0px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--white);font-family:Arial,Helvetica,sans-serif}a{color:inherit}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:6px}.skip{position:absolute;top:-100px;left:20px;z-index:20;background:white;color:#041122;padding:15px}.skip:focus{top:10px}.header{position:relative;z-index:10;display:flex;align-items:center;gap:35px;max-width:1600px;margin:auto;padding:23px 5vw}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap;font-size:18px;font-weight:800;letter-spacing:.07em}.brand img{display:block;object-fit:contain}.header nav{display:flex;gap:28px;margin-left:auto}.header nav a,.footer nav a{font-size:14px;text-decoration:none}.header nav a:hover,.footer nav a:hover{color:var(--cyan)}.motion{border:1px solid #ffffff40;background:#061426aa;color:#dce5ed;font-size:12px;padding:10px 13px;border-radius:30px;cursor:pointer}.motion:hover{border-color:var(--cyan)}.hero{position:relative;isolation:isolate;overflow:hidden;margin-top:-88px;padding-top:88px}.environment{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.glass-background{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.045) translate3d(var(--px),var(--py),0);will-change:transform}.reflections{position:absolute;inset:0;perspective:1300px}/* Artwork remains on separate glass surfaces; lighting moves across the surface. */
.reflection{position:absolute;overflow:hidden;isolation:isolate;mix-blend-mode:screen;opacity:.58;will-change:transform;transform:translate3d(var(--dx,0px),var(--dy,0px),0) rotate(var(--angle));mask-image:linear-gradient(180deg,transparent,#000 12%,#000 76%,transparent);animation:reflection-breathe 18s ease-in-out infinite alternate}
.reflection img{width:100%;height:100%;object-fit:cover;filter:saturate(.48) contrast(1.16) brightness(.82);opacity:.74;mix-blend-mode:luminosity;transform-origin:center;animation:art-drift 26s ease-in-out infinite alternate}
.reflection::before,.reflection::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1}
.reflection::before{background:linear-gradient(112deg,transparent 17%,#fff2 30%,#efffff85 31%,#fff1 32%,transparent 41%,#fff1 67%,transparent 69%);background-size:220% 100%;background-position:var(--light-x,50%) center;mix-blend-mode:screen;opacity:.7}
.reflection::after{background:linear-gradient(105deg,#d6faff65,transparent 1.2%,transparent 96%,#fff5),linear-gradient(180deg,#ffffff30,transparent 20%,transparent 80%,#ffffff18);box-shadow:inset 1px 0 2px #fff8,inset -2px 0 8px #b5efff40;opacity:.64}
.reflection-blue{left:35%;top:1%;width:23%;height:67%;--angle:-12deg;clip-path:polygon(0 0,100% 8%,80% 100%,8% 92%);background:linear-gradient(130deg,#06b8dc55,#063c7255 65%,#0ab8ca22)}
.reflection-blue img{object-position:25% center}
.reflection-pink{right:-3%;top:3%;width:31%;height:47%;--angle:14deg;clip-path:polygon(0 0,100% 10%,100% 100%,5% 85%);background:linear-gradient(125deg,#e597c533,#a21c7444 60%,#65287322);animation-delay:-5s}
.reflection-pink img{object-position:60% center;animation-delay:-6s}
.reflection-gold{right:-3%;top:37%;width:25%;height:58%;--angle:-9deg;clip-path:polygon(0 5%,100% 0,100% 100%,12% 91%);background:linear-gradient(130deg,#f8d29144,#aa651c44 60%,#f3c37e11);animation-delay:-9s}
.reflection-gold img{object-position:15% center;animation-delay:-12s}
.floor-reflection{position:absolute;right:3%;bottom:1%;width:42%;height:19%;transform:scaleY(-1) skewX(-22deg);opacity:.16;filter:blur(3px);overflow:hidden;mask-image:linear-gradient(to top,#0009,transparent 85%);mix-blend-mode:screen}
.floor-reflection img{width:100%;height:100%;object-fit:cover}
.environment{mask-image:linear-gradient(to right,transparent,#000 42%),linear-gradient(to bottom,#000 80%,transparent);mask-composite:intersect}
.hero-inner{max-width:1600px;margin:auto;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:5vw;align-items:center;padding:44px 5vw 74px;min-height:780px}.hero-copy{position:relative;z-index:4;padding:15px 0 45px}.eyebrow{font-size:12px;letter-spacing:.22em;line-height:1.6;color:#b6d4e1;margin:0 0 27px}.hero h1{font:400 clamp(48px,4.8vw,79px)/1.04 Georgia,serif;letter-spacing:-.045em;margin:0 0 28px}.hero h1 em,.section-heading h2 em{font-style:normal;color:var(--gold)}.lead{font:400 clamp(22px,2vw,29px)/1.35 Georgia,serif;color:#e1e5e9;margin:0 0 20px}.intro-copy{max-width:390px;color:#b4c1cd;font-size:16px;line-height:1.6;margin:0 0 28px}.actions{display:flex;align-items:flex-start;flex-direction:column;gap:21px}.primary{background:var(--cyan);color:#03202d;text-decoration:none;border-radius:40px;padding:18px 26px;display:inline-flex;align-items:center;gap:29px;font-size:17px;font-weight:700;box-shadow:0 3px 24px #0cdcf02b;transition:transform .25s,box-shadow .25s}.primary:hover{transform:translateY(-3px);box-shadow:0 6px 38px #0cdcf064}.secondary{font-size:15px;text-underline-offset:7px;text-decoration-color:var(--cyan)}.showcase{position:relative;min-width:0;perspective:1400px;padding:0 45px 0 15px}.reader-position{max-width:435px;margin:auto;animation:reader-float 10s ease-in-out infinite;transform-style:preserve-3d}.reader{position:relative;display:block;text-decoration:none;overflow:hidden;border:10px solid #111820;border-radius:36px;background:#f4efe5;color:#27282b;box-shadow:0 0 0 1px #d8e6eb88,4px 6px 0 #44515c,25px 45px 65px #0009,-12px 0 42px #22c8fa24;transform:rotateY(calc(-7deg + var(--ry))) rotateX(var(--rx));transition:box-shadow .3s;will-change:transform}.reader:hover{box-shadow:0 0 0 1px #fff9,4px 6px 0 #44515c,25px 45px 65px #0009,-12px 0 65px #22c8fa50}.reader-header{display:flex;justify-content:space-between;align-items:center;padding:27px 27px 8px;font:600 24px Georgia,serif}.translation{font:12px Arial,sans-serif;color:#6f747a;letter-spacing:.14em}.passage{padding:0 27px;font:16px/1.55 Georgia,serif}.passage p{margin:17px 0}.passage sup{font:11px Arial,sans-serif;color:#888d92;margin-right:9px}.reader-art{position:relative;margin:21px 0 0}.reader-art>img{display:block;width:100%;height:265px;object-fit:cover;object-position:center}.reader-art figcaption{display:grid;gap:7px;padding:15px 25px 18px;background:#0b1a2b;color:white}.reader-art figcaption>span:first-child{font-size:10px;letter-spacing:.19em;color:#d6b67e}.reader-art strong{font:400 20px Georgia,serif}.art-invitation{font-size:12px;color:#93e7f3}.last{padding-bottom:14px}.scene-caption{position:absolute;right:-15px;bottom:55px;font-size:10px;line-height:1.8;letter-spacing:.2em;writing-mode:vertical-rl;color:#ffedc8}.hero-foot{display:flex;justify-content:center;gap:clamp(35px,10vw,160px);padding:24px 20px 28px;border-top:1px solid var(--line);background:#031123bd;font:16px Georgia,serif;letter-spacing:.23em;text-transform:uppercase}.section{max-width:1400px;margin:auto;padding:0 6vw}.lenses{padding-top:100px;padding-bottom:110px;display:grid;grid-template-columns:.9fr 1.3fr;gap:85px}.section-heading h2{font:400 clamp(35px,3.5vw,53px)/1.1 Georgia,serif;letter-spacing:-.04em;margin:0 0 22px}.section-heading>p:last-child{max-width:340px;color:#aebbc8;line-height:1.65;font-size:16px}.lens{display:grid;grid-template-columns:25px 1fr auto;gap:14px 18px;border-top:1px solid var(--line);padding:25px 0;text-decoration:none;align-items:center}.number{font-size:11px;color:#768c9f}.lens h3{font:400 29px Georgia,serif;margin:0}.lens p{grid-column:2/-1;margin:0;max-width:430px;font-size:15px;line-height:1.6;color:#aebbc8}.status{grid-column:3;grid-row:1;font-size:11px;color:#8093a5}.live{color:var(--cyan)}a.lens:hover h3{color:var(--cyan)}.footer{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:25px;padding-top:30px;padding-bottom:35px}.footer .brand{font-size:14px}.footer p{font-size:13px;color:#9baebe}.footer nav{display:flex;gap:22px;margin-left:auto}.js-motion .reveal{opacity:0;transform:translateY(25px);transition:opacity .75s,transform .75s}.js-motion .reveal.visible{opacity:1;transform:none}.motion-paused *{animation-play-state:paused!important}.motion-paused .reveal{opacity:1;transform:none}.motion-paused .glass-background,.motion-paused .reader,.motion-paused .reflection{will-change:auto}@keyframes reader-float{0%,100%{transform:translateY(0) rotateZ(-1deg)}50%{transform:translateY(-12px) rotateZ(.3deg)}}@keyframes reflection-breathe{from{opacity:.48}to{opacity:.64}}@keyframes art-drift{from{transform:scale(1.03) translateX(-1%)}to{transform:scale(1.1) translateX(1%)}}
@media(min-width:1700px){.hero-inner{min-height:850px}.glass-background{object-position:center 60%}}
@media(max-width:1100px){.hero-inner{gap:20px;padding-inline:4vw}.hero h1{font-size:55px}.showcase{padding:0 10px}.reader-header{padding-inline:22px}.passage{padding-inline:22px;font-size:15px}.reader-art>img{height:225px}.scene-caption{display:none}.lenses{gap:45px}.header{gap:20px}.header nav{gap:18px}}
@media(max-width:760px){.header{padding:18px 22px;gap:15px}.brand{font-size:15px;gap:9px}.brand img{width:31px;height:31px}.header nav{display:none}.motion{margin-left:auto;font-size:11px;padding:9px 11px}.hero{margin-top:-74px;padding-top:74px}.hero-inner{grid-template-columns:1fr;gap:30px;padding:40px 24px 50px;min-height:0}.hero-copy{padding:0;max-width:530px}.eyebrow{font-size:11px;margin-bottom:20px}.hero h1{font-size:clamp(46px,9.5vw,68px)}.lead{font-size:24px}.intro-copy{max-width:440px}.environment{top:510px;bottom:0;left:-25%;right:-25%;height:auto;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);mask-composite:add}.glass-background{object-position:65% center}.reflection-blue{left:10%;width:37%}.reflection-pink{right:0;width:48%}.reflection-gold{right:0;width:38%;top:40%}.showcase{padding:30px 14px 10px;max-width:480px;width:100%;margin:auto}.reader-position{max-width:365px}.reader{border-width:8px;border-radius:30px}.reader-header{padding-top:23px}.reader-art>img{height:245px}.passage{font-size:16px}.hero-foot{font-size:11px;letter-spacing:.16em;gap:25px}.lenses{grid-template-columns:1fr;gap:30px;padding-top:65px;padding-bottom:60px}.section-heading h2{font-size:43px}.section-heading>p:last-child{max-width:500px}.footer{gap:14px}.footer p{margin:0}.footer nav{width:100%;margin:8px 0 0}.reflection{animation-duration:20s}.floor-reflection{display:none}}
@media(max-width:380px){.hero-inner{padding-inline:18px}.hero h1{font-size:43px}.header{padding-inline:18px}.brand{font-size:13px}.primary{font-size:15px;padding:17px 22px;gap:20px}.showcase{padding-inline:0}.passage{font-size:15px;padding-inline:18px}.reader-art>img{height:220px}.lens{gap:12px}.lens h3{font-size:25px}.status{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reader{transform:none}.glass-background{transform:none}.reflection{will-change:auto}.js-motion .reveal{opacity:1;transform:none}}

/* Tall glass is selected by picture only on mobile. Original desktop scene retained. */
.glass-picture{position:absolute;inset:0;display:block}
.hero h1{font-weight:700;letter-spacing:-.055em;line-height:1.01}
.section-heading h2,.lens h3{font-weight:700}
.lead{font-weight:700}
.reflection img{mix-blend-mode:luminosity}
.reflection-gold img{mix-blend-mode:soft-light;filter:saturate(.85) contrast(1.2) brightness(1.2);opacity:.95;object-position:50% 35%}
.reflection-violet{left:44%;top:57%;width:24%;height:32%;--angle:9deg;clip-path:polygon(7% 0,100% 12%,90% 100%,0 83%);background:#714f9650;animation-delay:-12s}
.reflection-violet img{mix-blend-mode:luminosity;object-position:center;opacity:.65}
.reflection-silver{right:18%;top:0;width:17%;height:34%;--angle:-17deg;clip-path:polygon(0 5%,94% 0,100% 94%,8% 100%);background:#4cabb62e;animation-delay:-7s}
.reflection-silver img{mix-blend-mode:soft-light;filter:contrast(1.4);opacity:.8}
@media(max-width:760px){
 .environment{inset:0;height:auto;mask-image:linear-gradient(to bottom,#000 92%,transparent);mask-composite:add}
 .glass-background{object-fit:cover;object-position:center bottom;transform:none}
 .hero-copy{padding:0 0 14px;text-shadow:0 2px 20px #041122b3}
 .hero h1{font-size:clamp(45px,10.6vw,72px);font-weight:700;line-height:1.02}
 .hero-inner{padding-top:40px}
 .reflections{mask-image:linear-gradient(to bottom,transparent 25%,#000 45%,#000 92%,transparent)}
 .reflection-blue{left:-9%;top:32%;width:50%;height:43%}
 .reflection-pink{right:-8%;top:24%;width:48%;height:35%}
 .reflection-gold{right:-12%;top:58%;width:49%;height:38%}
 .reflection-violet{left:-12%;top:72%;width:53%;height:26%}
 .reflection-silver{right:10%;top:42%;width:37%;height:30%}
 .section-heading h2{font-size:clamp(36px,9.5vw,48px)}
}
@media(max-width:380px){.hero h1{font-size:43px}.lead{font-size:22px}}
/* Product carousel: the phone turns independently of pointer tilt and floating. */
.phone-turn{position:relative;transform-style:preserve-3d}
.phone-turn .reader{transform:translateZ(3px);backface-visibility:hidden;min-height:670px}
.phone-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border:8px solid #334452;border-radius:36px;background:linear-gradient(135deg,#152a3c,#040b12);box-shadow:inset 0 0 0 1px #b4d5e544;transform:rotateY(180deg) translateZ(3px);backface-visibility:hidden;color:#c6d3dd;font-size:13px;letter-spacing:.16em}
.phone-back img{width:68px;height:68px}
.hero-inner{min-height:820px}.hero-copy{min-height:610px;display:flex;flex-direction:column;justify-content:center}
.hero-foot{gap:0;padding:0 5vw;position:relative;z-index:5;letter-spacing:0;text-transform:none}
.product-tab{position:relative;flex:1;max-width:330px;min-height:92px;border:0;border-top:3px solid transparent;background:transparent;color:#a5b7c8;cursor:pointer;text-align:left;padding:20px 26px;transition:color .3s,background .3s,border-color .3s}
.product-tab span{display:block;font:700 clamp(17px,1.7vw,24px) Georgia,serif}.product-tab small{display:block;font:10px Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase;margin-top:9px;color:#9fb0c0}
.product-tab[aria-pressed=true]{border-top-color:var(--cyan);color:#fff;background:#ffffff09}.product-tab[aria-pressed=true] small{color:var(--cyan)}.product-tab:hover{background:#ffffff0d;color:#fff}
.carousel-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero .coming-soon{display:inline-flex;align-items:center;min-height:56px;padding:17px 25px;border:1px solid #efd29c66;border-radius:40px;color:#efd29c;font-size:16px;font-weight:700;background:#111a24c7}
.hero[data-product=history]{--cyan:#ecc795;--gold:#ecc795}.hero[data-product=philosophy]{--cyan:#c4b7ff;--gold:#c4b7ff}
.reflections{transition:opacity .25s}.hero.switching .reflections{opacity:0}
.reader.preview-history{background:#ece0c8;color:#3b3026}.reader.preview-philosophy{background:#19182b;color:#f0ebfa}
.preview-content{padding:28px 25px}.preview-kicker{display:flex;justify-content:space-between;gap:8px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}.preview-content h2{font:700 35px/1.06 Georgia,serif;margin:27px 0 15px}.preview-content p{font:17px/1.5 Georgia,serif}.preview-picture{width:100%;height:200px;object-fit:cover;margin:7px 0 17px}.preview-history .preview-picture{filter:sepia(.65)}.preview-divider{height:1px;background:currentColor;opacity:.2;margin:20px 0}.preview-note{font:11px/1.5 Arial,sans-serif!important;letter-spacing:.04em;opacity:.65}.question-card{border-top:1px solid #ffffff26;padding:16px 0;font:19px/1.3 Georgia,serif}.preview-philosophy .preview-picture{height:170px;filter:saturate(.45)}
@media(max-width:760px){.hero-inner{min-height:0}.hero-copy{min-height:560px;padding-bottom:0}.hero-foot{padding:0 12px}.product-tab{padding:15px 7px;min-height:86px;text-align:center}.product-tab span{font-size:clamp(13px,3.7vw,20px)}.product-tab small{font-size:8px;letter-spacing:.05em}.phone-turn .reader{min-height:660px}.phone-back{border-radius:30px}.preview-content{padding:25px 20px}.preview-content h2{font-size:32px}}

@font-face{font-family:Bricolage;src:url('/assets/fonts/bricolage-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{--heading-font:Bricolage,Arial,Helvetica,sans-serif}
.hero h1,.section-heading h2,.lens h3,.preview-content h2,.reader-header,.reader-art strong,.product-tab span{font-family:var(--heading-font);font-weight:800;letter-spacing:-.045em}
.hero h1{font-size:clamp(36px,3.7vw,60px);line-height:1.16}
.section-heading h2{font-size:clamp(28px,2.9vw,44px);line-height:1.2}
.lens h3{font-size:24px;line-height:1.25}
.preview-content h2{font-size:27px;line-height:1.25}
.reader-header{font-size:20px}.reader-art strong{font-size:17px;line-height:1.35}
.product-tab span{font-size:clamp(14px,1.3vw,19px);line-height:1.4}
.lead{font-family:Arial,Helvetica,sans-serif;font-size:clamp(20px,1.8vw,26px);font-weight:700;line-height:1.45;letter-spacing:-.025em}
@media(max-width:760px){.hero h1{font-size:clamp(28px,8.1vw,52px);line-height:1.18}.section-heading h2{font-size:clamp(25px,7vw,38px)}.preview-content h2{font-size:clamp(21px,6vw,27px)}.product-tab span{font-size:clamp(10px,2.75vw,16px);letter-spacing:-.035em}.lens h3{font-size:22px}.lead{font-size:22px}.reader-header{font-size:18px}}

/* Fixed, photographed device: only the app screen changes between products. */
.showcase{perspective:none}
.reader-position{width:min(100%,360px);max-width:360px;animation:none;transform:none;transform-style:flat}
.phone-turn{width:100%;aspect-ratio:876 / 1796;transform:none!important;transform-style:flat;position:relative}
.phone-turn .reader.device-preview{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;transition:none;overflow:visible;will-change:auto;backface-visibility:visible}
.device-screen{position:absolute;left:10.1%;top:5.1%;width:79.8%;height:90.2%;object-fit:contain;border-radius:13% / 5.5%;background:#f4efe5}
.device-shell{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(12px 22px 22px #0006)}
.device-caption{margin:12px 0 0;text-align:center;font:10px/1.5 Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#aebdc9}
@media(max-width:760px){.reader-position{width:min(100%,330px);max-width:330px}.showcase{padding:18px 0 10px}.phone-turn .reader.device-preview{min-height:0}.scene-caption{display:none}}

.hero[data-product=history] .device-screen{background:#ece0c8}
.hero[data-product=philosophy] .device-screen{background:#19182b}

/* Atmospheric light and dust stay behind the readable content. */
.hero h1,.section-heading h2,.lens h3,.product-tab span{font-weight:700;letter-spacing:-.05em}
.hero h1{font-size:clamp(42px,4.5vw,72px);line-height:1.03}
.hero[data-product=philosophy]{--cyan:#e2bc87;--gold:#e2bc87}
.device-screen{background:#070b12}
.hero[data-product=history] .device-screen{background:#0b252c}
.hero[data-product=philosophy] .device-screen{background:#e6dfce}
.atmosphere{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;mask-image:linear-gradient(to right,transparent 15%,#000 50%);opacity:.8}
.hero-inner{position:relative;z-index:1}
.atmosphere i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#e0f5ff;box-shadow:0 0 9px 2px #9be9ff55;opacity:0;animation:drifting-mote var(--duration) linear var(--delay) infinite}
.light-beam{position:absolute;top:-25%;height:150%;width:26%;opacity:.3;mix-blend-mode:screen;transform:rotate(24deg);filter:blur(18px);animation:light-drift 19s ease-in-out infinite alternate}
.beam-cyan{left:40%;background:linear-gradient(90deg,transparent,#67d8f21f 40%,#b9faff66 49%,transparent 60%)}
.beam-amber{right:5%;background:linear-gradient(90deg,transparent,#eda95b12 30%,#ffcc8455 50%,transparent 64%);animation-delay:-9s;animation-duration:23s}
.device-floor{position:absolute;left:0;top:calc(100% - 28px);width:100%;height:130px;overflow:hidden;pointer-events:none;opacity:.6;filter:blur(.8px);mask-image:linear-gradient(to bottom,#000,transparent 95%);transition:opacity .24s}
.reflected-device{position:relative;width:100%;aspect-ratio:876 / 1796;transform:scaleY(-1);transform-origin:center}
.reflected-device .device-shell{filter:none}
.device-caption{margin-top:105px;position:relative;z-index:1}
.hero.switching .device-floor{opacity:.12}
@keyframes drifting-mote{0%{transform:translate3d(0,35px,0);opacity:0}20%{opacity:.55}75%{opacity:.3}100%{transform:translate3d(28px,-90px,0);opacity:0}}
@keyframes light-drift{from{transform:translateX(-20px) rotate(20deg);opacity:.15}to{transform:translateX(25px) rotate(27deg);opacity:.38}}
@media(max-width:760px){.hero h1{font-size:clamp(36px,10.4vw,62px)}.hero[data-product=philosophy] h1{font-size:clamp(32px,9.4vw,56px)}.atmosphere{mask-image:linear-gradient(to bottom,transparent 20%,#000 45%);opacity:.65}.device-floor{height:95px}.device-caption{margin-top:75px}.light-beam{width:55%;filter:blur(10px)}.beam-cyan{left:0}.beam-amber{right:-15%}}
@media(prefers-reduced-motion:reduce){.atmosphere i{animation:none;opacity:.15}.light-beam{animation:none;opacity:.18}}

/* A restrained turn, with the reflected image compressed along the floor plane. */
.phone-turn .reader.device-preview{transform-origin:50% 97%}
.device-floor{top:calc(100% - 28px);height:140px;opacity:.42;filter:blur(1.5px);mask-image:linear-gradient(to bottom,#000 0%,#0009 35%,transparent 95%)}
.reflected-device{transform:skewX(-12deg) scaleY(-.24) translateY(-100%);transform-origin:50% 0}
.phone-turn::after{content:"";position:absolute;left:13%;right:13%;bottom:2%;height:10px;border-radius:50%;background:#02070b99;filter:blur(6px);pointer-events:none}
@media(max-width:760px){.device-floor{top:calc(100% - 21px);height:105px}}


/* Tall-image surface masks remain specific to mobile. */
@media(max-width:760px){
.reflections .reflection{inset:0;width:100%;height:100%;transform:none;animation:none;mask-image:none;background:none;opacity:.25}
.reflections .reflection img{animation:none;transform:none;object-fit:cover;opacity:.7}
.reflections .reflection::before,.reflections .reflection::after{display:none}
.reflections .reflection-blue{clip-path:polygon(4.6% 45%,35% 52.5%,24% 74%,12% 73%)}
.reflections .reflection-pink{clip-path:polygon(43% 42.4%,99% 55.6%,99% 67.5%,81.5% 58.2%,62% 62.7%,71% 81%,24% 74%)}
.reflections .reflection-gold{clip-path:polygon(62.5% 63%,81.5% 58.5%,99% 68.3%,99% 76%,81.5% 70%,75.5% 89%,73% 83%)}
.reflections .reflection-violet{clip-path:polygon(15.5% 61%,72% 82.8%,24% 89%,17.5% 88.7%)}
.reflections .reflection-silver{clip-path:polygon(82% 70.4%,99% 76.6%,99% 90.4%,76.5% 88.9%)}
.reflections .floor-reflection{display:none}

}

@media(min-width:761px){.reflections{left:32%}.glass-background{transform:none}}

@media(min-width:761px){.glass-picture,.reflections{transform:translateX(-10vw)}}

/* Both layers share the rendered image coordinates, including its cover crop. */
@media(min-width:761px){
 .glass-picture{left:-10vw;right:0;transform:none}
 .glass-background{object-position:center center;transform:none}
 .reflections{transform:none;mask-image:none}
 .reflections .reflection{inset:0;width:100%;height:100%;transform:none;animation:none;mask-image:none;background:none;opacity:.3}
 .reflections .reflection img{position:absolute;animation:none;transform:none;object-fit:cover;opacity:.65}
 .reflections .reflection::before,.reflections .reflection::after{display:none}
 .reflections .reflection-blue{clip-path:polygon(54% 0,69% 0,61% 79%,54% 78%,59% 53%)}
 .reflections .reflection-blue img{left:54%;top:0;width:15%;height:80%}
 .reflections .reflection-pink{clip-path:polygon(70% 0,99.5% 0,99.5% 21%,93% 18%,84% 26%,88% 66%,67% 28%)}
 .reflections .reflection-pink img{left:66%;top:0;width:34%;height:70%}
 .reflections .reflection-violet{clip-path:polygon(60% 27%,89% 77%,64% 81%,61% 80%)}
 .reflections .reflection-violet img{left:60%;top:27%;width:30%;height:55%}
 .reflections .reflection-gold{clip-path:polygon(84% 26%,93% 18%,94% 40%,91% 38%,89.5% 79%)}
 .reflections .reflection-gold img{left:84%;top:18%;width:11%;height:63%}
 .reflections .reflection-silver{clip-path:polygon(91.5% 39%,99.5% 47%,99.5% 82%,90% 80%)}
 .reflections .reflection-silver img{left:90%;top:38%;width:10%;height:45%}
 .reflections .floor-reflection{display:none}
}

@media(min-width:761px){.glass-picture{left:-30vw;right:0}}

/* Let desktop copy use the available blue space. */
@media(min-width:761px){.hero-copy{width:calc(100% + 3vw);max-width:none}.hero-copy .intro-copy{max-width:100%}.hero h1{font-size:clamp(42px,5.2vw,82px)}}

/* Place the mirrored phone on the photographed floor, not below its floating body. */
.device-floor{top:var(--floor-offset,100%);height:120px;opacity:.58;filter:blur(1.2px);mask-image:linear-gradient(to bottom,#000,transparent 95%)}
.reflected-device{transform:skewX(-8deg) scaleY(-.22) translateY(-100%)}
.phone-turn::after{top:var(--floor-offset,100%);bottom:auto;height:8px;background:#02070b66;filter:blur(8px)}
.device-caption{opacity:.65}
