/* Native scrolling with a short pinned horizontal process on every screen. */
:root{--header-height:72px;--header-safe-top:env(safe-area-inset-top,0px)}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + var(--header-safe-top) + 16px);overscroll-behavior-y:none}
body{padding-top:calc(var(--header-height) + var(--header-safe-top));overscroll-behavior-y:none}
.header,html[lang=ar] .header{position:fixed;top:0;inset-inline:0;margin:0;z-index:30;height:calc(var(--header-height) + var(--header-safe-top));padding-top:var(--header-safe-top);background:var(--paper);box-shadow:0 1px 0 #1111110c;isolation:isolate}
.header::before{content:none}
.page-progress{position:absolute;top:auto;bottom:-2px;inset-inline:0;height:2px;z-index:1;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){
 :root{--header-height:64px}
 .header.open nav{top:calc(var(--header-height) + var(--header-safe-top))}
 .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}}