/* ============================================================
   Sirat Studio, base: tokens, typography, chrome, shared primitives
   ============================================================ */

:root{
  --paper:#EDE9E1; --paper-2:#E4DFD5; --ink:#1A1815; --ink-2:#5F5A4D; --ink-body:#3A352D;
  --hair:#D4CEC1; --lapis:#1E3F73; --lapis-2:#2F63AE;
  --f-display:'Piazzolla','IBM Plex Sans Arabic',Georgia,serif;
  --f-body:'Inter Tight','IBM Plex Sans Arabic',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono','IBM Plex Sans Arabic',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden;height:100vh;height:100svh}
::selection{background:var(--lapis);color:var(--paper)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--lapis);outline-offset:3px}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.mono.lap{color:var(--lapis)}
.xs{font-size:9.5px;letter-spacing:.16em}
#cur{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;background:var(--lapis);z-index:500;
  pointer-events:none;mix-blend-mode:multiply;transform:translate(-50%,-50%);transition:width .45s var(--ease),height .45s var(--ease)}
#cur.big{width:92px;height:92px}
#cur b{font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
#cur.big b{opacity:1}
@media(hover:none){#cur{display:none}}
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 28px;mix-blend-mode:multiply;transition:transform .6s var(--ease)}
nav.hide{transform:translateY(-120%)}
.logo{font-family:var(--f-display);font-size:clamp(22px,2vw,30px);font-weight:400;letter-spacing:-.015em;line-height:1;white-space:nowrap}
.logo sup{font-family:var(--f-mono);font-size:.32em;vertical-align:super;letter-spacing:0;color:var(--ink-2)}
.nav-links{display:flex;gap:26px;flex-wrap:wrap}
.nav-links a{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--ink);transition:width .45s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-links a sup{font-size:8px;color:var(--lapis-2)}
.pill{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:14px 24px;
  border:1px solid var(--ink);position:relative;overflow:hidden;z-index:1;display:inline-block}
.pill::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.pill:hover{color:var(--paper)}
.pill:hover::before{transform:translateY(0)}
.pill.solid{background:var(--lapis);border-color:var(--lapis);color:var(--paper)}
.pill.solid::before{background:var(--ink)}
.rv{overflow:hidden;display:block;padding-bottom:.18em;margin-bottom:-.18em}
.rv > *{display:block;transform:translateY(140%);opacity:0;transition:transform 1s var(--ease),opacity 1s var(--ease)}
.rv.on > *{transform:translateY(0);opacity:1}
.fade{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fade.on{opacity:1;transform:none}
.hook{margin-top:13px;font-size:16.5px;line-height:1.55;color:var(--ink-body);max-width:40ch}
.read{margin-top:16px;display:inline-flex;align-items:center;gap:9px;border-bottom:1px solid var(--ink);padding-bottom:3px}
.read i{transition:transform .5s var(--ease);font-style:normal}
.metrics{display:flex;gap:26px;flex-wrap:wrap}
.metrics div b{font-variant-numeric:lining-nums;display:block;font-family:var(--f-display);font-size:clamp(26px,3vw,44px);font-weight:400;color:var(--lapis);line-height:1;letter-spacing:-.02em}
.metrics div span{display:block;margin-top:6px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);max-width:16ch}
footer{border-top:1px solid var(--hair);padding:36px 28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;background:var(--paper);position:relative;z-index:3}
@media(max-width:820px){
  nav{padding:14px 18px}.nav-links{gap:14px}
  .logo{font-size:19px}
  .hero-main{padding:32px 18px}.hero-bar{padding:16px 18px}
  .hero h1{font-size:clamp(38px,10vw,64px)}
  .sec-head{padding:64px 18px 18px}
  .svc{grid-template-columns:1fr;gap:14px;padding:32px 18px}
  .tile-ui{padding:20px 18px}
  .tile-bot{grid-template-columns:1fr;gap:18px}
  .metrics{gap:16px}
  #pre{padding:28px 18px}
}
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--lapis);color:var(--paper);
  padding:12px 18px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{left:8px;top:8px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[lang="ar"],[dir="rtl"]{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;direction:rtl}
[lang="ar"] .mono,[dir="rtl"] .mono{letter-spacing:0;text-transform:none}
.ar{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;direction:rtl;text-align:right;line-height:1.9}
.rv,.rv>*{overflow-wrap:normal}
p,li,figcaption{text-wrap:pretty;hyphens:none}
.lede,.sub,.hook,.blurb{text-wrap:pretty}
body.lock{overflow:auto!important;height:auto!important}
.rv>*,.fade{transform:none!important;opacity:1!important}
#cur.big{width:78px;height:78px}
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;background:linear-gradient(var(--paper) 40%,transparent)}
.back{display:inline-flex;align-items:center;gap:8px}
.back i{font-style:normal;transition:transform .5s var(--ease)}
.back:hover i{transform:translateX(-5px)}
footer{border-top:1px solid var(--hair);padding:34px 28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation:none!important}
  .rv > *,.fade{transform:none!important;opacity:1!important}
}

/* ---- selectors shared by home + case study pages ---- */
h1,h2,h3,h4,.roll,.metrics b,.hmetrics b,.impact b,.facts b,.scope b,.ab .big{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.chero h1,.hero h1,.cta h2,.next h3,.tile-bot h3,.sec h2,.sec h3,.stack-line{padding-bottom:.02em}
.hero h1,.chero h1{text-wrap:balance}

h1,h2,h3,h4,.stack-line,.tile-bot h3,.next h3{text-wrap:balance}

/* ============================================================
   Mobile hardening
   ============================================================ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{-webkit-tap-highlight-color:transparent}
body{overscroll-behavior-y:contain}

/* respect the notch and the home indicator */
nav{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
footer{padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right));
  padding-bottom:max(34px,calc(20px + env(safe-area-inset-bottom)))}

/* touch targets: nothing tappable under 44px */
@media(hover:none){
  .nav-links a,.back,.read,.feat-link,.index a{min-height:44px;display:inline-flex;align-items:center}
  .store,.pill,.btn{min-height:48px;padding-top:0;padding-bottom:0;align-items:center;display:inline-flex}
  .tile,.next{-webkit-touch-callout:none}
}

/* small screens: raise the floor on type so nothing is unreadable */
@media(max-width:640px){
  .mono{font-size:11px;letter-spacing:.1em}
  .mono.xs,.xs{font-size:10.5px;letter-spacing:.1em}
  .logo sup{font-size:.4em}
  .sec p{font-size:16.5px;line-height:1.68}
  .sec ul li{font-size:11px}
  .metrics div span,.impact span,.stat p{font-size:12.5px}
}