/* Revision02: follow the selected plate, keep devices still, improve legibility. */
@font-face{font-family:Space;src:url('assets/fonts/SpaceGrotesk.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
:root{--paper:#e4e2dc;--ink:#172129;--muted:#475259;--line:#b9bdb7;--sans:Space,Arial,sans-serif}
body{font-size:16px;font-weight:400}
.header{background:rgb(228 226 220 / 74%)}
.header nav{font-size:13px;font-weight:500}
h1,h2{font-weight:500;letter-spacing:-.045em}
h1 em,h2 em{font-style:normal}
.hero{padding-top:90px;min-height:720px}
.hero-copy{width:46%}
.hero h1{font-size:clamp(56px,5.25vw,84px);line-height:1.05;margin-bottom:26px}
.hero .eyebrow{font-weight:500;letter-spacing:.2em;font-size:10px}
.intro{font-size:16px;line-height:1.65;font-weight:400;max-width:410px;color:#202c33}
.hero-body{font-size:14px;color:#3f4a50;max-width:345px}
.hero-stage{left:32%;right:-2%;top:-20px;height:720px}
.stage-photo img{filter:brightness(.9) saturate(.83) contrast(1.035)}
.stage-light{mix-blend-mode:normal;background:radial-gradient(ellipse at 58% 47%,#a4bad422,transparent 70%)}
.stage-photo{mask-image:linear-gradient(to right,transparent,#000 21%),linear-gradient(to bottom,#000 82%,transparent);mask-composite:intersect}
.tablet-drift{left:21%;top:16%;width:49%;height:54%;will-change:auto}
.phone-drift{left:70%;top:30%;width:19%;height:49%;will-change:auto}
.device{transition:none}
.tablet,.tablet:hover{transform:rotateY(-9deg) rotateX(3deg) rotateZ(-4deg);border-radius:13px}
.phone,.phone:hover{transform:rotateY(-10deg) rotateZ(5deg)}
.orbit-lines{opacity:.95;stroke:none;overflow:visible}
.orbit-back{z-index:3}.orbit-front{z-index:8;pointer-events:none}
.satellite,.satellite[data-orb]{width:var(--orb-size);height:var(--orb-size);pointer-events:none}
.satellite img,.satellite:hover img{transform:none;transition:none;filter:drop-shadow(0 8px 9px #344b5b28)}
.satellite.blue img{filter:brightness(.79) saturate(1.4) drop-shadow(0 8px 9px #344b5b28)}
.satellite.champagne img{filter:sepia(.23) saturate(.9) brightness(.88) drop-shadow(0 8px 9px #344b5b28)}
.satellite.stone img{filter:grayscale(.7) brightness(.85) drop-shadow(0 8px 9px #344b5b28)}
.scene-caption{color:#3e4c52;font-size:10px;bottom:62px;right:13%}
.hero-foot{color:#414d52;font-size:11px}
.button{font-size:13px;border-radius:6px;min-height:47px;gap:24px}
.hero-copy>.button{background:#e5e3ddaa;color:var(--ink);border-color:#3a4449;padding:14px 22px;box-shadow:none}
.hero-copy>.button:hover{background:#d8d8d1}
.button.small{background:transparent;color:var(--ink);border-color:#657078;border-radius:5px;font-size:12px;font-weight:500}
.button.small:hover{background:#d2d5cf}
.hero-link{font-size:11px;color:#26343c}
.service-number{color:#4c595e}.service-name{font-size:14px}.service-summary{font-size:12px;color:#475259;max-width:190px}
.aside-copy{font-size:13px;color:#475259}
.service-card img{height:150px}
.example-copy>p:not(.eyebrow){font-size:14px}
.example-tabs button{font-size:12px}.example-note{font-size:12px!important}
.eyebrow{font-size:11px;color:#27353c}
.tiny-label{color:#4a565c;font-size:11px}
.text-link{font-size:13px}
.process{background:linear-gradient(125deg,#cbd4d5,#dedbd1 55%,#bac8ce)}
.process-intro>p:last-child{font-size:14px;color:#35474e}
.process-panel>p:not(.eyebrow){font-size:14px;color:#39494b}
.process-tabs button{font-size:14px}.process-tabs span{color:#4b5d61}
.process-document{background:#f0f2eddf}.process-document li{font-size:12px}.document-header{font-size:12px}.document-footer{font-size:10px;color:#445d55}.document-header small{color:#53625d}
.faq>div>p:not(.eyebrow){font-size:14px}.faq-list summary{font-size:15px}.faq-list details p{font-size:14px;color:#435059}
.journal>p:not(.eyebrow){font-size:14px}.journal input{font-size:14px;background:#efeee7}.journal .button{font-size:12px}.journal #journal-status{font-size:11px}
.invitation{background:linear-gradient(120deg,#dfbda5,#e4c5ad 50%,#c6b6aa)}
.invitation>p:not(.eyebrow){font-size:15px}
.footer-top p{font-size:12px}.footer-bottom{font-size:11px}
@media(min-width:1550px){.hero{min-height:790px;padding-top:110px}.hero-stage{height:780px}.hero h1{font-size:84px}}
@media(max-width:1000px) and (min-width:701px){.hero{min-height:670px;padding-top:85px}.hero h1{font-size:clamp(43px,5.45vw,58px)}.hero-stage{left:28%;right:-15%;height:650px;top:5px}.hero-copy{width:49%}.intro{font-size:14px;max-width:290px}.hero-body{font-size:13px;max-width:260px}.service-name{font-size:12px}.service-summary{font-size:11px}.service-card img{height:120px}}
@media(max-width:700px){
 .header{background:rgb(228 226 220 / 80%)}.header .button{font-size:11px}
 .hero{padding:48px 7% 60px;min-height:0}
 .hero-copy{width:100%}.hero h1{font-size:clamp(38px,11vw,58px);line-height:1.08}
 .hero .eyebrow{font-size:9px;letter-spacing:.15em}
 .intro{font-size:15px;max-width:350px}.hero-body{font-size:14px;max-width:335px}
 .hero-stage{position:relative;left:auto;right:auto;top:auto;height:400px;width:calc(100% + 24%);margin:8px -12% 0}
 .stage-photo{mask-image:linear-gradient(to bottom,transparent,#000 17%,#000 86%,transparent);mask-composite:add}
 .tablet-drift{left:19%;top:14%;width:50%;height:55%}
 .phone-drift{left:68%;top:29%;width:20%;height:50%}
 .satellite,.satellite[data-orb]{width:calc(var(--orb-size)*.65);height:calc(var(--orb-size)*.65)}
 .scene-caption{font-size:8px;bottom:37px}.hero-foot{font-size:9px}
 .service-name{font-size:13px}.service-summary{font-size:12px}.service-card img{height:140px}
 .example-copy>p:not(.eyebrow){font-size:14px}.example-note{font-size:12px!important}
 .process-tabs button{font-size:11px}.process-panel>p:not(.eyebrow){font-size:13px}.process-document li{font-size:11px}.document-header{font-size:10px}
 .faq-list summary{font-size:14px}.faq-list details p{font-size:13px}
 .journal>p:not(.eyebrow){font-size:13px}.journal .button{font-size:12px}.journal #journal-status{font-size:10px}
 .invitation>p:not(.eyebrow){font-size:14px}.footer-top p{font-size:10px}
}
