:root{
  --ink:#0a0a0b;
  --coal:#131315;
  --smoke:#1d1d20;
  --porcelain:#f2f1ed;
  --paper:#fbfaf8;
  --em:#00a97a;
  --em-soft:#4fd3ab;
  --em-deep:#04412f;
  --mute-d:#8e8f8c;
  --mute-l:#6e6f6b;
  --hair-d:rgba(255,255,255,.12);
  --hair-l:rgba(10,10,11,.12);
  --max:1440px;
  --nav-h:calc(80px + env(safe-area-inset-top,0px));
  --pad:clamp(18px,4vw,64px);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--ink);color:var(--porcelain);overflow-x:clip;
  font-family:'Alexandria','Noto Sans Arabic','Geeza Pro',Tahoma,sans-serif;font-weight:400;
  font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-family:'Alexandria','Noto Sans Arabic','Geeza Pro',Tahoma,sans-serif;font-weight:700;line-height:1.3;letter-spacing:-.03em;text-wrap:balance}
html[dir="ltr"] h1,html[dir="ltr"] h2,html[dir="ltr"] h3,html[dir="ltr"] h4{font-family:'Bricolage Grotesque','Alexandria',sans-serif;font-weight:800;line-height:.98;letter-spacing:-.045em}
p{margin:0}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--em);outline-offset:4px}
.mono{font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;font-variant-numeric:tabular-nums}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
/* progress + nav */
.prog{position:fixed;inset-inline:0;top:0;height:2px;background:transparent;z-index:95}
.prog i{display:block;height:100%;width:0;background:var(--em);transition:width .1s linear}
.nav{position:fixed;inset-inline:0;top:0;z-index:90;transition:background .4s,border-color .4s}
.nav-in{display:flex;align-items:center;gap:24px;min-height:var(--nav-h);padding-top:env(safe-area-inset-top,0px);position:relative}
.nav img{width:128px;filter:none;transition:filter .4s}
.nav-links{display:flex;gap:clamp(16px,2vw,28px);margin-inline-start:auto}
.nav-links a{font-size:.85rem;color:rgba(242,241,237,.72);transition:color .25s;position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transition:transform .3s}
.nav-links a:hover{color:var(--porcelain)}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav-links a.on{color:var(--em-soft)}
.nav-tools{display:flex;align-items:center;gap:8px}
.lang{border:1px solid var(--hair-d);border-radius:999px;padding:8px 15px;color:rgba(242,241,237,.8);transition:.25s}
.lang:hover{border-color:var(--em);color:var(--em-soft)}
.burger{display:none;border:1px solid var(--hair-d);border-radius:9px;padding:9px 11px}
.nav.light{background:rgba(251,250,248,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--hair-l)}
.nav.light .nav-links a{color:rgba(10,10,11,.66)}
.nav.light .nav-links a:hover{color:var(--ink)}
.nav.light .nav-links a.on{color:var(--em)}
.nav.light .lang{border-color:var(--hair-l);color:rgba(10,10,11,.8)}
.nav.light img{filter:invert(1) hue-rotate(180deg) saturate(1.4) brightness(.55)}
.nav.solid{background:rgba(10,10,11,.8);backdrop-filter:blur(16px);border-bottom:1px solid var(--hair-d)}
/* ============ stacked chapters ============ */
.stack{position:relative}
.chapter{position:relative;min-height:auto;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;border-start-start-radius:34px;border-start-end-radius:34px;padding-block:clamp(88px,9vw,144px)}
.chapter:first-child{border-radius:0}
.ch-in{width:100%;transition:none}
.dark{background:var(--ink);color:var(--porcelain)}
.coal{background:var(--coal)}
.light{background:var(--paper);color:var(--ink)}
.porc{background:var(--porcelain);color:var(--ink)}
.light .mono,.porc .mono{color:var(--mute-l)}
.dark .mono,.coal .mono{color:var(--mute-d)}
/* ============ hero ============ */
.hero{border-radius:0;justify-content:flex-end;min-height:100svh;padding-block:calc(var(--nav-h) + 120px) max(56px,env(safe-area-inset-bottom,0px));isolation:isolate}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;direction:ltr}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,10,11,.95) 6%,rgba(10,10,11,.5) 52%,rgba(10,10,11,.55) 100%)}
.hero .ch-in{position:relative;z-index:2}
.hero-top{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-bottom:clamp(40px,10vh,110px)}
.hero-top .mono{color:var(--em-soft)}
.hero h1{font-size:clamp(2.25rem,4.9vw,4.5rem);line-height:1.5;color:#fff;max-width:16ch}
html[dir="ltr"] .hero h1{font-size:clamp(2.5rem,5.2vw,5rem);line-height:1.06;max-width:17ch}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(1.2deg);animation:wr 1s cubic-bezier(.16,1,.3,1) forwards}
@keyframes wr{to{opacity:1;transform:none}
}
.hero h1 .em{color:var(--em-soft)}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-top:clamp(26px,4vw,46px)}
.hero-foot p{max-width:62ch;color:rgba(242,241,237,.76);font-size:clamp(1rem,1.3vw,1.1rem);opacity:0;animation:wr 1s .55s cubic-bezier(.16,1,.3,1) forwards}
.scroll-cue{display:flex;align-items:center;gap:12px;opacity:0;animation:wr 1s .75s cubic-bezier(.16,1,.3,1) forwards}
.scroll-cue .line{width:60px;height:1px;background:linear-gradient(to inline-end,var(--em),transparent);position:relative;overflow:hidden}
.scroll-cue .line::after{content:"";position:absolute;inset-block:0;width:22px;background:var(--em-soft);animation:sweep 2.2s ease-in-out infinite}
@keyframes sweep{0%{inset-inline-start:-24px}
100%{inset-inline-start:60px}
}
.btn{display:inline-flex;align-items:center;gap:11px;padding:15px 27px;border-radius:999px;font-weight:500;font-size:.9rem;border:1px solid transparent;transition:.25s;font-family:'Alexandria','Noto Sans Arabic','Geeza Pro',Tahoma,sans-serif}
.btn svg{width:15px;height:15px;flex:none;transition:transform .25s}
html[dir="rtl"] .btn svg{transform:scaleX(-1)}
.btn:hover svg{transform:translateX(4px)}
html[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(4px)}
.btn-em{background:var(--em);color:#04150e}
.btn-em:hover{background:var(--em-soft);box-shadow:0 12px 40px -12px rgba(0,169,122,.7)}
.btn-ink{background:var(--ink);color:var(--porcelain)}
.btn-ink:hover{background:var(--smoke)}
.btn-wire{border-color:rgba(255,255,255,.26);color:var(--porcelain)}
.btn-wire:hover{border-color:var(--em);color:var(--em-soft)}
/* ============ manifesto ============ */
.manifesto{justify-content:center}
.manifesto .mono{display:block;margin-bottom:clamp(24px,4vw,44px)}
.mf-text{font-family:'Alexandria','Noto Sans Arabic','Geeza Pro',Tahoma,sans-serif;font-weight:500;font-size:clamp(1.8rem,3.8vw,3.4rem);line-height:1.55;letter-spacing:-.025em;max-width:28ch}
html[dir="ltr"] .mf-text{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;line-height:1.18;max-width:28ch}
.mf-text .w{opacity:.16;transition:opacity .25s linear}
.mf-text .w.on{opacity:1}
.mf-text .w.em{color:var(--em)}
.mf-foot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);flex-wrap:wrap;margin-top:clamp(30px,5vw,56px);border-top:1px solid var(--hair-l);padding-top:26px}
.mf-foot p{max-width:48ch;color:var(--mute-l);font-size:1rem}
/* ============ services rail ============ */
.rail-outer{position:relative}
.rail-pin{position:relative;padding-block:clamp(88px,8vw,120px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:var(--coal);
  border-start-start-radius:34px;border-start-end-radius:34px}
.rail-head{padding-inline:var(--pad);padding-block:0 32px;max-width:var(--max);margin-inline:auto;width:100%;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.rail-head h2{font-size:clamp(1.5rem,3.4vw,2.7rem);max-width:18ch}
.rail-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--em) transparent;gap:clamp(14px,1.6vw,26px);padding-inline:var(--pad);padding-bottom:14px}
.card{position:relative;display:flex;flex-direction:column;flex:none;scroll-snap-align:start;width:clamp(280px,28vw,400px);aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:var(--smoke);isolation:isolate}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.card:hover img{transform:scale(1.06)}
.card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(8,8,9,.85),rgba(8,8,9,.45) 45%,rgba(8,8,9,.08))}
.card-in{position:relative;z-index:2;padding:clamp(18px,2vw,28px);display:grid;gap:10px}
.card .mono{color:var(--em-soft)}
.card h3{font-size:clamp(1.05rem,1.5vw,1.35rem);color:#fff}
.card p{font-size:1rem;color:rgba(242,241,237,.8);line-height:1.7}
.rail-bar{max-width:var(--max);margin-inline:auto;width:100%;padding-inline:var(--pad);padding-top:clamp(16px,2.5vh,28px);display:flex;align-items:center;gap:16px}
.rail-bar .track{flex:1;height:2px;background:var(--hair-d);position:relative;overflow:hidden}
.rail-bar .track i{position:absolute;inset-block:0;inset-inline-start:0;width:20%;background:var(--em);transition:transform .12s linear}
/* ============ cycle ============ */
.cycle-outer{position:relative}
.cycle-pin{position:relative;padding-block:clamp(88px,8vw,120px);display:flex;align-items:center;background:var(--porcelain);color:var(--ink);
  border-start-start-radius:34px;border-start-end-radius:34px;overflow:hidden}
.cycle-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:center;width:100%}
.cycle-left{display:grid;gap:18px}
.big-n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(5rem,17vw,15rem);line-height:.8;letter-spacing:-.06em;color:var(--em);font-variant-numeric:tabular-nums}
.cycle-left h2{font-size:clamp(1.5rem,3.2vw,2.5rem)}
.cycle-left p{color:var(--mute-l);max-width:40ch}
.cycle-list{display:grid;gap:0;border-top:1px solid var(--hair-l)}
.cy{display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;align-items:baseline;padding-block:clamp(11px,1.6vh,18px);border-bottom:1px solid var(--hair-l);
  opacity:1;transition:opacity .35s,padding-inline .35s}
.cy.on{opacity:1}
.cy.on .cy-t{color:var(--em)}
.cy .mono{color:var(--mute-l)}
.cy-t{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(1.1rem,2.2vw,1.7rem);letter-spacing:-.03em;transition:color .35s}
.cy-ar{font-family:'Alexandria','Noto Sans Arabic','Geeza Pro',Tahoma,sans-serif;font-weight:600;font-size:clamp(1rem,1.9vw,1.45rem);letter-spacing:-.03em}
.cy p{font-size:.92rem;color:var(--mute-l);line-height:1.7}
/* ============ pillars plate ============ */
.plate{position:relative;isolation:isolate}
.plate .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.5}
.plate::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(10,10,11,.96) 34%,rgba(10,10,11,.6))}
.plate .ch-in{position:relative;z-index:2}
.pil-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(26px,4vw,44px)}
.pil{background:rgba(255,255,255,.045);border:1px solid var(--hair-d);border-radius:18px;padding:clamp(18px,2vw,28px);backdrop-filter:blur(8px);transition:.35s}
.pil:nth-child(2){transform:translateY(clamp(14px,2.4vw,34px))}
.pil:nth-child(4){transform:translateY(clamp(14px,2.4vw,34px))}
.pil:hover{background:rgba(0,169,122,.1);border-color:rgba(0,169,122,.4)}
.pil .mono{color:var(--em-soft)}
.pil h3{font-size:1.05rem;margin:14px 0 10px}
.pil p{font-size:.92rem;color:rgba(242,241,237,.66);line-height:1.75}
/* ============ foundation ============ */
.fnd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,30px);margin-top:clamp(26px,4vw,44px)}
.fnd{border-top:2px solid var(--ink);padding-top:20px;display:grid;gap:12px}
.fnd h3{font-size:clamp(1.15rem,2vw,1.5rem)}
.fnd p{color:var(--mute-l);font-size:.96rem}
.vals{margin-top:clamp(30px,5vw,54px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.v{border-top:1px solid var(--hair-l);padding-top:16px;display:grid;gap:8px}
.v h4{font-size:1rem}
.v p{font-size:.86rem;color:var(--mute-l);line-height:1.7}
/* ============ contact ============ */
.ct{justify-content:center}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,5vw,70px);align-items:start;margin-top:clamp(26px,4vw,46px)}
.ct h2{font-size:clamp(2rem,6vw,4.6rem);max-width:14ch}
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-family:'JetBrains Mono',monospace;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-d)}
.field input,.field textarea,.field select{width:100%;padding:12px 2px;border:0;border-bottom:1px solid var(--hair-d);background:transparent;color:var(--porcelain);font:inherit;font-size:1rem;border-radius:0;transition:border-color .25s}
.field select option{background:var(--coal);color:var(--porcelain)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--em)}
.field textarea{min-height:88px;resize:vertical}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.note{font-size:.84rem;color:var(--mute-d)}
.ct-side{display:grid;gap:18px;align-content:start}
.ct-line{border-top:1px solid var(--hair-d);padding-top:14px;display:grid;gap:5px}
.ct-line strong{font-weight:400;font-size:1rem;unicode-bidi:plaintext}
.ct-line a:hover{color:var(--em-soft)}
footer{position:relative;z-index:5;background:var(--ink);border-top:1px solid var(--hair-d);overflow:hidden}
.foot-mark{display:flex;justify-content:center;padding-block:clamp(26px,4vw,52px)}
.foot-mark img{width:min(78vw,760px);opacity:.9}
.foot-line{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;padding-block:20px 30px;border-top:1px solid var(--hair-d)}
.foot-line .mono{color:var(--mute-d)}
.toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translate(-50%,14px);background:var(--em);color:#04150e;padding:12px 22px;border-radius:999px;font-size:.88rem;font-weight:500;opacity:0;pointer-events:none;transition:.22s;z-index:99}
html[dir="rtl"] .toast{transform:translate(50%,14px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
html[dir="rtl"] .toast.show{transform:translate(50%,0)}

/* Shared sizing: natural document flow keeps every chapter reachable. */
html{scroll-padding-top:calc(var(--nav-h) + 20px);overflow-x:clip}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
.nav-in>a,.nav-tools{flex-shrink:0}
.nav-tools button{min-width:44px;min-height:44px}
.nav.light .burger{color:var(--ink);border-color:var(--hair-l)}
.hero video{pointer-events:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0)}
.hero .ch-in{min-width:0}
.hero h1 .w{max-width:100%;overflow-wrap:anywhere}
.hero-foot{margin-top:24px}
.scroll-cue{min-height:28px}
.scroll-cue .line{background:linear-gradient(90deg,var(--em),transparent)}
.mono[data-i$="_k"]{font-size:.875rem;letter-spacing:.12em}
.mf-text .w{display:inline-block}
.rail-head,.rail-bar{padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.rail-head h2{font-size:clamp(1.8rem,3vw,2.7rem);max-width:23ch}
.rail-track{width:100%;direction:inherit}
.card .mono,#railN{direction:ltr;unicode-bidi:isolate;justify-self:start}
.rail-bar{display:none}
.rail-outer.is-pinned .rail-pin{position:sticky;top:0;height:100svh;padding-block:calc(var(--nav-h) + 24px) 40px}
.rail-outer.is-pinned .rail-track{overflow:visible;scroll-snap-type:none;will-change:transform;padding-bottom:0}
.rail-outer.is-pinned .card{width:clamp(280px,25vw,380px);height:clamp(300px,calc(100svh - 420px),480px);aspect-ratio:auto}
.rail-outer.is-pinned .rail-bar{display:flex}
.cycle-outer.is-pinned .cycle-pin{position:sticky;top:0;min-height:100svh;padding-block:calc(var(--nav-h) + 24px) 56px}
.cycle-outer.is-pinned .cy{opacity:.42}
.cycle-outer.is-pinned .cy.on{opacity:1}
.cy.on .cy-ar{color:var(--em)}
.pil:nth-child(2),.pil:nth-child(4){transform:none}
.seed,.hl{color:var(--em)}
.plate .hl{color:var(--em-soft)}
.field,.ct-side,.ct-line,.ct-line strong,.foot-line>*{min-width:0}
.field input,.field textarea,.field select{min-width:0;max-width:100%}
.ct-line strong,.foot-line a{overflow-wrap:anywhere;letter-spacing:normal}
.foot-line{padding-inline-end:max(90px,env(safe-area-inset-left,0px));padding-bottom:36px}
.foot-line .mono[data-i="foot_a"]{font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:normal;font-family:'Alexandria','Noto Sans Arabic','Geeza Pro',Tahoma,sans-serif;text-transform:none;color:var(--porcelain)}
.btn-wa{background:#1fab63;color:#04150e}
.btn-wa:hover{background:#25c974}
.wa-float{position:fixed;inset-inline-end:max(20px,env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:96;width:52px;height:52px;border-radius:50%;background:#1fab63;color:white;display:grid;place-items:center;box-shadow:0 10px 24px #0004}
.wa-float svg{width:27px;height:27px}
.toast{max-width:calc(100vw - 36px);text-align:center}
@media(max-width:1100px){
  .cycle-grid{grid-template-columns:1fr;gap:36px}
  .big-n{font-size:clamp(5rem,13vw,9rem)}
  .pil-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vals{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ct-grid{gap:32px}
}
@media(max-width:1000px){
  .nav-links{position:absolute;inset-inline:0;top:100%;display:none;flex-direction:column;gap:0;margin:0;padding:12px var(--pad) 24px;background:var(--ink);border-bottom:1px solid var(--hair-d);max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
  .nav.light .nav-links{background:var(--paper)}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;font-size:1rem;border-bottom:1px solid var(--hair-d)}
  .nav-tools{margin-inline-start:auto}
  .burger{display:grid;place-items:center}
}
@media(max-width:760px){
  :root{--nav-h:calc(72px + env(safe-area-inset-top,0px));--pad:24px}
  .nav img{width:110px}
  .nav-in{gap:12px}
  .chapter,.rail-pin,.cycle-pin{padding-block:80px;border-radius:26px 26px 0 0}
  .hero{border-radius:0;min-height:100svh;padding-block:calc(var(--nav-h) + 140px) calc(78px + env(safe-area-inset-bottom,0px))}
  .hero h1{font-size:clamp(2rem,7.8vw,3.25rem);line-height:1.4;max-width:18ch}
  html[dir="ltr"] .hero h1{font-size:clamp(2.3rem,9vw,3.5rem);line-height:1.08;max-width:16ch}
  .hero-foot{display:grid;gap:24px;margin-top:22px}
  .hero-foot p{font-size:1rem;line-height:1.85}
  .scroll-cue{font-size:.75rem}
  .mf-text{font-size:clamp(1.65rem,6.4vw,2.65rem);line-height:1.7;max-width:none}
  html[dir="ltr"] .mf-text{font-size:clamp(2rem,7.5vw,3rem);line-height:1.2;max-width:none}
  .mf-foot{grid-template-columns:1fr;gap:24px;margin-top:32px}
  .rail-head{align-items:start;gap:18px;padding-bottom:28px}
  .rail-head h2{font-size:1.85rem}
  .card{width:min(82vw,360px);aspect-ratio:4/5;border-radius:18px}
  .card-in{padding:24px}
  .card h3{font-size:1.15rem;line-height:1.5}
  .card p{font-size:1rem}
  .ct-grid,.fnd-grid{grid-template-columns:1fr;gap:32px}
  .row2{grid-template-columns:1fr}
  .vals{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .form .btn{min-height:48px;justify-content:center;flex:1 1 100%;font-size:1rem}
  .ct-side{margin-top:12px}
  .foot-line{display:grid;gap:22px;padding-block:24px 84px;padding-inline-end:var(--pad)}
  .foot-line .mono{letter-spacing:.04em;line-height:2}
  .wa-float{width:48px;height:48px;inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:420px){
  :root{--pad:20px}
  .pil-grid{grid-template-columns:1fr}
  .hero h1{font-size:2rem}
  .rail-head h2{font-size:1.65rem}
  .card-in{padding:20px}
  .cy{grid-template-columns:32px minmax(0,1fr);gap:12px}
  .cy p{font-size:1rem}
}
@media(max-height:600px) and (min-width:600px){
  .hero{min-height:100svh;padding-block:calc(var(--nav-h) + 48px) 48px}
  .hero h1,html[dir="ltr"] .hero h1{font-size:clamp(2rem,4.2vw,3rem);line-height:1.25;max-width:24ch}
  .hero-foot{margin-top:18px;gap:16px}
  .scroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero h1 .w,.hero-foot p,.scroll-cue,.mf-text .w{opacity:1!important;transform:none!important}
}

/* ================= Arabic typography safety =================
   Arabic is a joined script: any positive letter-spacing pulls the letters
   apart, and negative tracking crowds the marks (hamza, shadda) until they
   disappear. Tracking is therefore switched off for Arabic and kept only on
   runs that are genuinely Latin or numeric. */
html[dir="rtl"] body,
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,
html[dir="rtl"] p,html[dir="rtl"] span,html[dir="rtl"] a,html[dir="rtl"] li,
html[dir="rtl"] .mono,html[dir="rtl"] .lbl,html[dir="rtl"] .field label,
html[dir="rtl"] .mf-text,html[dir="rtl"] .cy-ar,html[dir="rtl"] .stmt,
html[dir="rtl"] .btn,html[dir="rtl"] button,html[dir="rtl"] input,
html[dir="rtl"] select,html[dir="rtl"] textarea,html[dir="rtl"] option{
  letter-spacing:0 !important;
}

/* Latin and numeric runs keep their tracking */
html[dir="rtl"] .num,
html[dir="rtl"] [dir="ltr"],
html[dir="rtl"] [dir="ltr"] *,
html[dir="rtl"] .step h3,
html[dir="rtl"] .fnd .mono,
html[dir="rtl"] .card .mono,
html[dir="rtl"] .rail-bar .mono,
html[dir="rtl"] .lang,
html[dir="rtl"] .foot-line .mono[data-i="foot_b"]{
  letter-spacing:.16em !important;
}
html[dir="rtl"] .big-n{letter-spacing:-.05em !important}

/* Arabic never wants the Latin uppercase transform either */
html[dir="rtl"] .mono[data-i],html[dir="rtl"] .field label,
html[dir="rtl"] .foot-line .mono[data-i="foot_a"]{text-transform:none}

/* keep the marks above the letters readable at small sizes */
html[dir="rtl"] .mono,html[dir="rtl"] .field label{font-size:.78rem;line-height:1.9}

/* Arabic labels take the Arabic face, not the Latin mono */
html[dir="rtl"] .mono[data-i],
html[dir="rtl"] .field label,
html[dir="rtl"] .foot-line .mono[data-i="foot_a"],
html[dir="rtl"] .ct-line .mono{
  font-family:"Alexandria","Noto Sans Arabic","Segoe UI","Geeza Pro",Tahoma,sans-serif;
  font-weight:500;
}

/* Arabic marks need space above the baseline at every size. */
html[dir="rtl"] h1{font-weight:600}
html[dir="rtl"] .hero h1 .w{line-height:1.5;padding-block:.08em;overflow:visible}
html[dir="rtl"] .mono[data-i],html[dir="rtl"] .field label{font-size:.875rem;line-height:1.9}
html[dir="rtl"] .foot-line .mono[data-i="foot_a"]{font-size:clamp(1rem,1.5vw,1.2rem)}
html[dir="rtl"] .hero .hero-foot p{font-weight:400}
.hero .ch-in{overflow:visible}
.hero h1{overflow:visible}
.mf-text .w{padding-block:.04em}
@media(min-width:761px) and (max-width:1100px){
 .fnd-grid{grid-template-columns:1fr;gap:32px}
 .ct-grid{grid-template-columns:1fr;gap:40px}
 .mf-foot{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){.hero h1{font-size:2.125rem}}
@media(max-width:360px){:root{--pad:18px}.hero h1{font-size:1.95rem}}

/* Preserve the desktop chapter transition only when the whole section fits. */
.chapter.can-stick{position:sticky;top:0;min-height:100svh}
.ct-line a,.foot-line a{display:inline-flex;align-items:center;min-height:44px}

/* Desktop hero aligned with the client's supplied reference. */
.brand-ending{white-space:nowrap}
.seed-stop{color:var(--ink)}
@media(min-width:1001px){
  :root{--nav-h:calc(74px + env(safe-area-inset-top,0px))}
  .nav:not(.light){background:rgba(10,10,11,.92);border-bottom:1px solid var(--hair-d);backdrop-filter:blur(16px)}
  .nav .wrap,.hero .wrap{max-width:1560px}
  .nav-in{gap:20px}
  .nav img{width:112px}
  .nav-links{gap:28px}
  .nav-links a{font-weight:300}
  .hero{padding-bottom:0}
  .hero .ch-in{padding-bottom:calc(clamp(6px,.7vw,10px) + 4px)}
  .hero h1{font-size:clamp(1.95rem,4.9vw,4.2rem);line-height:1.3;max-width:20ch}
  html[dir="rtl"] .hero h1{font-weight:700}
  html[dir="rtl"] .hero h1 .w{padding-block:0;line-height:inherit}
  html[dir="ltr"] .hero h1{font-size:clamp(2rem,5.2vw,4.5rem);line-height:1.04;max-width:16ch}
  .hero .hero-foot{margin-top:clamp(14px,1.6vw,22px)}
  .hero .hero-foot p{font-size:clamp(.92rem,1.1vw,1rem);line-height:1.7;max-width:62ch;font-weight:300}
  html[dir="rtl"] .hero .hero-foot p{font-weight:300}
  .hero .scroll-cue .mono{font-size:.68rem}
  .hero-in-view .wa-float{visibility:hidden;pointer-events:none}
}