/* Page-change choreography inspired by 21st.dev Page Transition and Magic UI Blur Fade.
   Native snapshots hold the outgoing page while the incoming surface reveals. */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.58s}
::view-transition-image-pair(root){isolation:isolate}
::view-transition-old(root){animation:yms-page-out .38s cubic-bezier(.4,0,.2,1) both;mix-blend-mode:normal}
::view-transition-new(root){animation:yms-page-in .58s cubic-bezier(.22,1,.36,1) both;mix-blend-mode:normal}
body>nav{view-transition-name:yms-navigation}
::view-transition-group(yms-navigation){animation:none}
::view-transition-old(yms-navigation){animation:none;opacity:0}
::view-transition-new(yms-navigation){animation:none}
@keyframes yms-page-out{from{opacity:1;transform:none}to{opacity:.55;transform:translateY(-10px) scale(.992)}}
@keyframes yms-page-in{from{opacity:0;transform:translateY(18px);clip-path:inset(7% 0 0 0 round 18px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 0)}}
html:not(.flow-native-transitions).flow-page-entering body>:is(main,section,header,footer){animation:yms-content-in .5s cubic-bezier(.22,1,.36,1) both}
html:not(.flow-native-transitions).flow-page-leaving body>:is(main,section,header,footer){opacity:.65;translate:0 -6px;transition:opacity .18s ease,translate .18s ease}
html.flow-page-leaving body{pointer-events:none}
@keyframes yms-content-in{from{opacity:.45;translate:0 12px}to{opacity:1;translate:0 0}}
.flow-intro,.pageveil{display:none!important}
html.yms-language-restoring body>:is(main,section,header,footer){visibility:hidden}
.yms-reveal-pending{opacity:0!important;translate:0 10px}

body:not(.yms-editorial-page)>nav::before{display:none!important}
@media(max-width:480px){
  body:not(.yms-editorial-page)>nav{top:12px;width:min(310px,calc(100% - 30px));min-height:52px;gap:5px;padding:6px 7px 6px 13px;border-radius:20px}
  body:not(.yms-editorial-page)>nav .logo img{height:20px}
  body:not(.yms-editorial-page)>nav .links{gap:5px}
  body:not(.yms-editorial-page)>nav .pill{font-size:.72rem;padding:.65em .85em;line-height:1.1}
  body:not(.yms-editorial-page)>nav .links .langtoggle{display:inline-flex!important;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;min-height:32px;font-size:.76rem}
  body:not(.yms-editorial-page)>nav .burger{width:34px;height:34px}
}

/* Notebook: make the light area a real section rather than a clipped page panel. */
body.flow-notebook main{max-width:none;width:100%;margin:0;border-radius:0;background:#f1f3f8;box-shadow:none;clip-path:none;padding:clamp(98px,12vh,140px) var(--pad) clamp(80px,11vh,130px)}
body.flow-notebook main>.kicker,body.flow-notebook main>h1,body.flow-notebook main>.lede,body.flow-notebook main>.entries,body.flow-notebook main>.cta{width:min(1120px,100%);margin-inline:auto}
body.flow-notebook main>h1{max-width:1120px;font-size:clamp(3.4rem,6.3vw,7rem);line-height:.99}
body.flow-notebook main>.lede{max-width:1120px;margin-top:25px;font-size:clamp(1rem,1.45vw,1.17rem);line-height:1.65}
body.flow-notebook main>.entries{max-width:1120px}
body.flow-notebook .entries a{padding-block:clamp(23px,3vw,38px)}
body.flow-notebook .entries .body h2{font-size:clamp(1.4rem,2.45vw,2.45rem)}
body.flow-notebook .notebook-section-title{width:min(1120px,100%);margin:clamp(65px,8vw,110px) auto 0;color:#0e0e0e;font:600 clamp(1.7rem,3vw,2.6rem)/1.1 'Clash Display','Inter',sans-serif;letter-spacing:-.02em}
body.flow-notebook main>.cta{max-width:1120px;background:transparent;border:0;border-top:1px solid rgba(14,14,14,.17);border-radius:0;padding:70px 0 0;color:#0e0e0e}
body.flow-notebook .cta h2,body.flow-notebook .cta p b{color:#0e0e0e}
body.flow-notebook .cta p{color:rgba(14,14,14,.7)}
body.flow-notebook .cta .pill-solid{background:#0e0e0e;color:#fff}
body.flow-notebook .cta .pill-solid:hover{background:#3d66c4;color:#fff}
body.flow-notebook .cta .pill-ghost{color:#0e0e0e;border-color:rgba(14,14,14,.25)}
@media(max-width:700px){
  body.flow-notebook main{padding-top:125px}
  body.flow-notebook main>h1{font-size:clamp(2.65rem,10vw,4rem)}
  body.flow-notebook main>.cta{padding-top:42px}
}
html[dir="rtl"] body.flow-notebook main>h1{font-family:'Alexandria',sans-serif;font-weight:700;line-height:1.35;letter-spacing:0}
html[dir="rtl"] body.flow-notebook .notebook-section-title,html[dir="rtl"] body.flow-notebook .entries .body h2{font-family:'Alexandria',sans-serif;font-weight:700;letter-spacing:0;line-height:1.4}

/* The old inset light slabs look like separate canvases. Use full-width acts. */
body.flow-about .act.lit{width:100%;max-width:none;margin:0;border-radius:0;box-shadow:none;clip-path:none;padding-inline:max(var(--pad),calc((100% - 1320px)/2 + var(--pad)))}
body.flow-services .below{width:100%;max-width:none;box-shadow:none;clip-path:none;padding-inline:max(var(--pad),calc((100% - 1320px)/2 + var(--pad)))}
@media(max-width:819px){body.flow-about .act.lit,body.flow-services .below{padding-inline:var(--pad)}}

/* Keep every Services scene centered as a two-column composition on desktop. */
@media(min-width:901px){
  body.flow-services .scene .inner,html.film-on body.flow-services .scene .inner{width:100%;max-width:1160px;margin-inline:auto}
  body.flow-services .srow{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,4.5vw,70px)}
  body.flow-services .stext,body.flow-services .scard{min-width:0}
}

.flow-service-paths{max-width:1320px;margin:0 auto;padding:clamp(90px,10vw,140px) var(--pad);background:#111214;color:#fff}
.flow-service-path-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(230px,.5fr);gap:5vw;align-items:end;margin-bottom:clamp(42px,6vw,76px)}
.flow-service-path-head>span{grid-column:1/-1;color:#6c9aff;font:700 .7rem/1.2 'Inter',sans-serif;letter-spacing:.18em}
.flow-service-path-head h2{font:600 clamp(3rem,6vw,6rem)/1 'Clash Display','Inter',sans-serif;letter-spacing:-.025em}
.flow-service-path-head p{color:rgba(255,255,255,.65);font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.6}
.flow-service-path-list{border-top:1px solid rgba(255,255,255,.22)}
.flow-service-path{display:grid;grid-template-columns:62px minmax(0,1fr) 34px;align-items:center;gap:24px;min-height:130px;padding:22px 12px;border-bottom:1px solid rgba(255,255,255,.22);color:#fff;transition:background .25s,padding .25s}
.flow-service-path:hover{background:#202532;padding-inline:24px}
.flow-service-path:focus-visible{outline:2px solid #6c9aff;outline-offset:-3px}
.flow-service-path small{align-self:start;margin-top:15px;color:#6c9aff;font:600 .8rem/1.2 ui-monospace,monospace}
.flow-service-path>span{display:flex;align-items:baseline;gap:clamp(22px,3vw,50px)}
.flow-service-path strong{font:600 clamp(2rem,4vw,4.2rem)/1 'Clash Display','Inter',sans-serif;letter-spacing:-.025em;white-space:nowrap}
.flow-service-path em{max-width:20em;color:rgba(255,255,255,.62);font:400 clamp(.9rem,1.2vw,1rem)/1.5 'Inter',sans-serif;font-style:normal}
.flow-service-path svg{color:#6c9aff;transition:transform .25s}
.flow-service-path:hover svg{transform:translate(4px,-4px)}
html[dir="rtl"] .flow-service-path-head h2,html[dir="rtl"] .flow-service-path strong{font-family:'Alexandria',sans-serif;font-weight:700;letter-spacing:0;line-height:1.4}
html[dir="rtl"] .flow-service-path em,html[dir="rtl"] .flow-service-path-head p,html[dir="rtl"] .flow-service-path-head>span{font-family:'Alexandria',sans-serif;letter-spacing:0}
html[dir="rtl"] .flow-service-path svg{transform:scaleX(-1)}
html[dir="rtl"] .flow-service-path:hover svg{transform:scaleX(-1) translate(4px,-4px)}
@media(max-width:760px){
  .flow-service-path-head{display:block;margin-bottom:40px}
  .flow-service-path-head>span{display:block;margin-bottom:24px}
  .flow-service-path-head h2{font-size:clamp(2.7rem,9vw,4rem)}
  .flow-service-path-head p{margin-top:22px;max-width:35ch}
  .flow-service-path{grid-template-columns:42px minmax(0,1fr) 26px;gap:12px;min-height:110px;padding:20px 0}
  .flow-service-path>span{display:block}
  .flow-service-path strong{display:block;white-space:normal;font-size:clamp(1.6rem,6vw,2.5rem)}
  .flow-service-path em{display:block;margin-top:9px}
  .flow-service-path svg{width:24px}
}

/* A quieter laptop scale: retain the mobile composition and readable body copy. */
@media(min-width:960px){
  .flow-home #hero{min-height:min(820px,84svh);padding-top:108px;padding-bottom:54px}
  .flow-home #hero h1{font-size:clamp(4.1rem,6.8vw,6.15rem)}
  html[dir="rtl"] .flow-home #hero h1{font-size:clamp(4rem,5.6vw,5.5rem)}
  .flow-home #hero .sub{font-size:clamp(.96rem,1.35vw,1.08rem)}
  .flow-home #hero .ctas{margin-top:30px}
  .flow-home #work{padding-block:clamp(92px,9.5vw,132px)}
  .flow-home #work .card:first-child .media{min-height:520px}
  .flow-home #work .card:first-child .ctitle{font-size:clamp(1.9rem,3.1vw,2.9rem)}
  .flow-home #services h2,.flow-home #work h2,.flow-home #reviews h2{font-size:clamp(2.7rem,4.5vw,3.6rem)}
  .flow-home #cta h2{font-size:clamp(3.2rem,6vw,5.1rem)}
  .flow-home #founder{padding-block:clamp(95px,10vw,138px)}
  .flow-home #founder blockquote{font-size:clamp(1.9rem,2.8vw,2.9rem)}
  .flow-routes{padding-block:clamp(100px,10vw,142px)}
  .flow-routes h2,.flow-process h2{font-size:clamp(3.3rem,5.2vw,5.8rem)}
  html[dir="rtl"] .flow-routes h2,html[dir="rtl"] .flow-process h2{font-size:clamp(3rem,4.7vw,5.2rem)}
  .route-row{min-height:122px}
  .route-main strong{font-size:clamp(2rem,3.55vw,3.9rem)}
  .flow-process{padding-block:clamp(95px,9.5vw,138px)}
  .process-display{min-height:340px}
  .process-step{padding-block:21px}
  .flow-service-paths{padding-block:clamp(85px,9vw,125px)}
  .flow-service-path-head h2{font-size:clamp(2.8rem,5.2vw,5.2rem)}
  html[dir="rtl"] .flow-service-path-head h2{font-size:clamp(2.7rem,4.7vw,4.8rem)}
  .flow-service-path{min-height:118px}
  .flow-service-path strong{font-size:clamp(2rem,3.5vw,3.7rem)}
  body.flow-work-page header.page h1{font-size:clamp(2.7rem,5.2vw,3.8rem)}
  body.flow-work-page .card .ctitle{font-size:clamp(1.2rem,2.15vw,1.65rem)}
  body.flow-notebook main>h1{font-size:clamp(3rem,5.4vw,6rem)}
  body.flow-notebook .entries .body h2{font-size:clamp(1.4rem,2.15vw,2.1rem)}
  body.flow-services #hero h1{font-size:clamp(3.4rem,6vw,5.1rem)}
  body.flow-about #hero h1{font-size:clamp(3.2rem,5.6vw,4.8rem)}
  body.flow-about h2.big{font-size:clamp(2rem,4.4vw,3.3rem)}
  body.flow-case main{padding-top:clamp(74px,7vw,104px)}
  body.flow-case main>h1{font-size:clamp(3.7rem,5.85vw,6.5rem)}
  html[dir="rtl"] body.flow-case main>h1{font-size:clamp(3.25rem,5vw,5.8rem)}
  body.flow-case main>h2{font-size:clamp(2.1rem,3.3vw,3.3rem)}
  body.flow-case .metrics .mt b{font-size:clamp(2.5rem,3.75vw,4rem)}
  body.flow-case main>.cta h2{font-size:clamp(2.6rem,4.35vw,4.9rem)}
  .yms-page h1,.yms-reading h1{font-size:clamp(2.8rem,5vw,4.65rem)}
  .yms-service .yms-hero h1{font-size:clamp(3.2rem,5.3vw,5.8rem)}
  html.ar .yms-page h1{font-size:clamp(2.7rem,4.3vw,4rem)}
  html.ar .yms-service .yms-hero h1{font-size:clamp(3rem,5vw,5rem)}
  main .step h1{font-size:clamp(1.7rem,4vw,2.7rem)}
}

@media(prefers-reduced-motion:reduce){
  html.flow-page-entering body>:not(nav):not(.mmenu):not(.flow-intro):not(script):not(style),html.flow-page-leaving body>:not(nav):not(.mmenu):not(.flow-intro):not(script):not(style){animation:none!important;transition:none!important;opacity:1!important}
  .flow-intro,html.flow-intro-active .flow-intro{display:none!important;animation:none!important}
}

@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 ::view-transition-old(root),::view-transition-new(root){animation:none!important}
 .yms-reveal-pending{opacity:1!important;translate:none!important}
 html.flow-page-entering body>:is(main,section,header,footer),html.flow-page-leaving body>:is(main,section,header,footer){animation:none!important;translate:none!important;opacity:1!important}
}