/* AZR pre-read — CSS مكوّنات مشترك (مستخرج من المرجع moh-awareness). الهوية من tokens.css */
/* الهوية تُستورد من tokens.css (كانن آزر v.03.1) — لا تُعرّف محلياً */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--ar); background:var(--cream); color:var(--ink);
  font-size:var(--body); line-height:1.75; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.en,.mono,[lang="en"]{font-family:var(--en)} .mono{font-family:var(--mono)}
.lat{font-family:var(--en);direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ── Progress journey rail ── */
.journey{position:fixed;top:0;right:0;width:3px;height:100vh;background:rgba(150,123,182,.12);z-index:100}
.jdot{position:absolute;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--azr);
  box-shadow:0 0 0 4px rgba(150,123,182,.18);transition:top .15s linear;top:0}
.jprog{position:absolute;top:0;right:0;width:3px;background:var(--azr);height:0;transition:height .15s linear}

/* ── Nav dots ── */
.navdots{position:fixed;top:50%;left:var(--space-4);transform:translateY(-50%);z-index:100;
  display:flex;flex-direction:column;gap:14px}
.navdots a{width:9px;height:9px;border-radius:50%;background:rgba(107,94,71,.25);
  transition:all .3s var(--ease);position:relative}
.navdots a:hover,.navdots a.on{background:var(--azr);transform:scale(1.35)}
.navdots a span{position:absolute;left:18px;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-size:11px;color:var(--mut);opacity:0;pointer-events:none;
  transition:opacity .3s;font-family:var(--mono)}
.navdots a:hover span{opacity:1}
@media(max-width:900px){.navdots{display:none}}

/* ── Section base ── */
section{padding:var(--space-9) var(--gutter);position:relative;max-width:var(--container);margin:0 auto}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.d1{font-size:var(--d1);line-height:.98;font-weight:800;letter-spacing:-.02em}
.d2{font-size:var(--d2);line-height:1.02;font-weight:800;letter-spacing:-.015em}
.h1{font-size:var(--h1);line-height:1.08;font-weight:800;letter-spacing:-.01em}
.h2{font-size:var(--h2);line-height:1.15;font-weight:700}
.h3{font-size:var(--h3);line-height:1.2;font-weight:700}
.lede{font-size:var(--lede);line-height:1.6;color:var(--mut);font-weight:400}
.serif-it{font-family:var(--serif);font-style:italic;font-weight:400}
.accent{color:var(--azr)}
.kicker{font-family:var(--mono);font-size:var(--label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--azr);font-weight:500;margin-bottom:var(--space-4);display:block}
.stage-num{font-family:var(--mono);font-size:var(--small);color:var(--mut-2);letter-spacing:.1em}

/* ── Hero ── */
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--container);padding-top:var(--space-7)}
#hero .eyebrow{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
#hero .wordmark{font-family:var(--mono);font-weight:500;letter-spacing:.15em;font-size:15px;color:var(--ink)}
#hero .eyebrow .sep{width:28px;height:1px;background:var(--rule)}
#hero .eyebrow .who{font-family:var(--mono);font-size:12px;color:var(--mut);letter-spacing:.1em}
.hero-scroll{margin-top:var(--space-8);display:flex;align-items:center;gap:var(--space-3);
  font-family:var(--mono);font-size:12px;color:var(--mut);letter-spacing:.1em}
.hero-scroll .line{width:40px;height:1px;background:var(--azr);animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.3;width:40px}50%{opacity:1;width:64px}}
/* ── Hero lockup (logos) + explore CTA — merged ── */
#hero .lockup{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap}
#hero .lockup img.azr{height:46px;width:auto;display:block}
#hero .lockup .x{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--mut-2);line-height:1}
#hero .lockup .client{display:flex;align-items:center;gap:var(--space-4)}
#hero .lockup img.moh{height:56px;width:auto;display:block}
#hero .lockup img.liwell-img{height:50px;width:auto;display:block}
#hero .lockup .liwell-cap{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--mut-2);align-self:flex-end;padding-bottom:4px}
#hero .addressed{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--mut);margin-bottom:var(--space-5);display:block}
.cta-explore{display:inline-flex;align-items:center;gap:12px;margin-top:var(--space-7);align-self:flex-start;
  font-family:var(--ar);font-weight:700;font-size:17px;color:var(--paper);background:var(--ink);
  padding:15px 32px;border-radius:var(--radius-pill);text-decoration:none;cursor:pointer;
  transition:transform .3s var(--ease),background .3s var(--ease);box-shadow:var(--shadow-md)}
.cta-explore:hover{background:var(--ink-deep);transform:translateY(-2px)}
.cta-explore .dot{width:9px;height:9px;border-radius:50%;background:var(--azr)}
.cta-explore .ar{font-family:var(--mono);transition:transform .3s var(--ease)}
.cta-explore:hover .ar{transform:translateY(3px)}
@media(max-width:600px){#hero .lockup img.moh{height:42px}#hero .lockup img.azr{height:36px}#hero .lockup img.liwell-img{height:40px}#hero .lockup .liwell-cap{display:none}#hero .d1{font-size:clamp(38px,11vw,58px)}}
/* ── الخاتمة: تعريف آزر بظهور كلمة-كلمة (مؤثر azr-arte) ── */
#cta .azr-intro{margin-top:var(--space-8);padding-top:var(--space-7);border-top:1px solid var(--rule)}
#cta .azr-intro{border-top-color:rgba(251,247,238,.16)}
#cta .intro-pre{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:rgba(251,247,238,.5);display:block;margin-bottom:var(--space-4)}
#cta .intro-seq{font-family:var(--ar);font-weight:500;font-size:clamp(22px,3vw,34px);line-height:1.62;color:#FBF7EE;max-width:740px;margin:0 auto}
#cta .cta-explore{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-lg)}
#cta .cta-explore:hover{background:#fff;color:var(--ink)}
#cta .intro-seq .word{display:inline-block;opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
#cta .intro-seq .word.on{opacity:1;transform:none}
#cta .azr-mark{height:30px;width:auto;display:block;margin:var(--space-6) auto 0;opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
#cta .azr-intro.done .azr-mark{opacity:1;transform:none}
#cta .explore-azr{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s}
#cta .azr-intro.done .explore-azr{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){#cta .intro-seq .word,#cta .azr-mark,#cta .explore-azr{opacity:1!important;transform:none!important}}

/* ── Frame corner tags ── */
.frame{position:fixed;inset:18px;pointer-events:none;z-index:90}
.frame span{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:rgba(107,94,71,.5);text-transform:uppercase}
.frame .tl{top:0;right:0} .frame .tr{top:0;left:0}
.frame .bl{bottom:0;right:0} .frame .br{bottom:0;left:0}
@media(max-width:700px){.frame{display:none}}

/* ── Divider / transition markers ── */
.transition{text-align:center;padding:var(--space-9) var(--gutter)}
.transition .mark{font-family:var(--serif);font-style:italic;font-size:clamp(28px,4vw,46px);
  color:var(--ink);line-height:1.3;max-width:760px;margin:0 auto}
.transition .mark .accent{font-style:italic}

/* ── Cards / stat ── */
.grid{display:grid;gap:var(--space-5)}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.g2,.g3{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:var(--space-6);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .n{font-family:var(--serif);font-size:clamp(48px,6vw,76px);line-height:1;color:var(--azr);font-style:italic}
.card .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--mut-2);
  text-transform:uppercase;margin-top:var(--space-3);display:block}
.card .desc{margin-top:var(--space-3);color:var(--ink-warm);font-size:16px;line-height:1.6}

/* ── Source link ── */
.src{margin-top:var(--space-3);display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;color:var(--azr-deep);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s;letter-spacing:.03em;direction:ltr}
.src:hover{border-color:var(--azr)}
.src::before{content:"\2197";font-size:12px}
.srcline{margin-top:var(--space-2);font-size:12px;color:var(--mut-2);line-height:1.5}
.srcline a{color:var(--azr-deep);text-decoration:none;border-bottom:1px solid var(--azr-soft)}
.srcline a:hover{border-color:var(--azr)}

/* ── Case study row ── */
.case{border-top:1px solid var(--rule);padding:var(--space-6) 0;display:grid;
  grid-template-columns:200px 1fr;gap:var(--space-6);align-items:start}
@media(max-width:820px){.case{grid-template-columns:1fr;gap:var(--space-3)}}
.case .name{font-weight:800;font-size:22px}
.case .name .tag{display:block;font-family:var(--mono);font-size:11px;color:var(--mut-2);
  letter-spacing:.1em;margin-top:6px;font-weight:400}
.case .body{color:var(--ink-warm);line-height:1.7}
.case .metric{color:var(--azr-deep);font-weight:700}

/* ── Spaces (collaboration) ── */
.space-card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-7);margin-bottom:var(--space-5);position:relative;overflow:hidden;
  transition:transform .4s var(--ease)}
.space-card:hover{transform:translateX(-6px)}
.space-card::before{content:"";position:absolute;top:0;right:0;width:4px;height:100%;background:var(--azr);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.space-card.in::before{transform:scaleY(1)}
.space-card .sp-num{font-family:var(--serif);font-style:italic;font-size:64px;color:var(--azr-soft);
  line-height:1;position:absolute;top:var(--space-4);left:var(--space-6)}
.space-card .obs{color:var(--mut);font-size:15px;line-height:1.7;margin:var(--space-3) 0 var(--space-4)}
.space-card .q{font-size:20px;font-weight:700;line-height:1.5;color:var(--ink);
  border-right:2px solid var(--azr);padding-right:var(--space-4)}
.space-card .q .accent{color:var(--azr-deep)}

/* ── Pull quote ── */
.pull{font-family:var(--serif);font-style:italic;font-size:clamp(30px,4.5vw,56px);
  line-height:1.25;color:var(--ink);max-width:900px}
.pull .accent{color:var(--azr)}

/* ── Two col text ── */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:start}
@media(max-width:820px){.twocol{grid-template-columns:1fr;gap:var(--space-5)}}
.bignum{font-family:var(--serif);font-style:italic;font-size:clamp(80px,12vw,160px);
  color:var(--azr);line-height:.9}

/* ── List ── */
ul.b{list-style:none;margin-top:var(--space-4)}
ul.b li{padding:var(--space-3) 0;border-bottom:1px solid var(--rule);padding-right:var(--space-5);position:relative;line-height:1.6}
ul.b li::before{content:"";position:absolute;right:0;top:calc(var(--space-3) + 12px);
  width:7px;height:7px;border-radius:50%;background:var(--azr)}

/* ── Footer / CTA ── */
#cta{background:var(--ink);color:var(--paper);max-width:none;margin:0;
  padding:var(--space-9) var(--gutter);text-align:center}
#cta .inner{max-width:var(--container);margin:0 auto}
#cta .h1{color:var(--paper)}
#cta .lede{color:rgba(251,247,238,.65)}
#cta .wordmark{font-family:var(--mono);letter-spacing:.15em;color:var(--azr);
  margin-top:var(--space-7);font-size:14px}
#cta .meta{font-family:var(--mono);font-size:11px;color:rgba(251,247,238,.4);
  margin-top:var(--space-3);letter-spacing:.1em}

.note{background:rgba(150,123,182,.08);border-radius:var(--radius-md);padding:var(--space-5);
  font-size:15px;color:var(--ink-warm);line-height:1.7;margin-top:var(--space-5)}
.note .nt{font-family:var(--mono);font-size:11px;color:var(--azr-deep);letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:var(--space-2)}

.sec-intro{max-width:760px;margin-bottom:var(--space-7)}
.tag-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.tag-row .t{font-family:var(--mono);font-size:11px;padding:5px 12px;border:1px solid var(--rule);
  border-radius:var(--radius-pill);color:var(--mut);letter-spacing:.05em}