/* Native scrolling with a short pinned horizontal process on every screen. */
html{scroll-behavior:smooth;scroll-padding-top:88px}
.header,html[lang=ar] .header{position:sticky;top:0;z-index:30;height:72px;background:var(--paper);box-shadow:0 1px 0 #1111110c}
.header::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--paper)}
.page-progress{position:fixed;top:72px;inset-inline:0;height:2px;z-index:31;pointer-events:none;background:transparent}
.page-progress i{display:block;height:100%;background:#aade42;transform:scaleX(0);transform-origin:left}
[dir=rtl] .page-progress i{transform-origin:right}
#website-preview{pointer-events:none}
.section{padding-block:38px}
.experiments,html[lang=ar] .experiments{padding-block:12px 26px}
.process-scroll{margin-block:0 12px}
.process-sticky,html[lang=ar] .process-sticky{top:var(--process-top,72px);padding-block:22px 18px}
.process-track{padding-inline:max(32px,calc((100vw - 1296px)/2));}
.process-bottom p{letter-spacing:.06em}
.process-scroll.is-swipe{height:auto!important}
.is-swipe .process-sticky{position:relative;top:auto;overflow:visible}
.is-swipe .process-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding-inline:20px;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#a6b77d transparent;touch-action:pan-x pan-y pinch-zoom}
.is-swipe .process-track{transform:none!important;width:max-content;flex-wrap:nowrap;padding-inline:20px}
.is-swipe .process-card{scroll-snap-align:start}
.is-swipe .process-bottom{display:flex}
@keyframes scroll-enter{from{transform:translateY(9px);opacity:.86}to{transform:none;opacity:1}}
.scroll-enter{animation:scroll-enter .36s ease-out both}
@media(max-width:760px){
 html{scroll-padding-top:80px}
 .header,html[lang=ar] .header{height:64px}
 .page-progress{top:64px}
 .section{padding-block:26px}
 .process-sticky,html[lang=ar] .process-sticky{padding-block:18px 12px}
 .process-card,html[lang=ar] .process-card{width:84vw;min-height:340px}
 .process-bottom p{font-size:9px;letter-spacing:.04em}
 html[lang=ar] .process-bottom p{font-size:12px;letter-spacing:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-enter{animation:none}.is-swipe .process-track{flex-wrap:wrap;width:auto}.is-swipe .process-card{width:100%}.process-bottom{display:none!important}}

/* Full-width header surface, with content aligned to the page grid. */
.header.wrap{width:100%;max-width:none;box-sizing:border-box;padding-inline:max(48px,calc((100% - 1296px)/2))}
@media(max-width:1100px){.header.wrap{padding-inline:32px}}
@media(max-width:760px){.header.wrap{padding-inline:20px}.header.open nav{inset-inline:20px}}