/* =========================================================================
   Mr.Consulto — site design system
   Palette (locked, brand_identity.md): IVORY #F4E7C8 · CHARCOAL #1C1D20
   OFF-WHITE #F5F4F2 · BLACK #0C0C0C.  GOLD FOIL = print only, never screen.
   Type: Alexandria (arabic + latin body) · Instrument Serif (latin display)
         IBM Plex Mono (technical labels).  All self-hosted — no CDN call.
   ========================================================================= */

@font-face{font-family:'Alexandria';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/Alexandria_300_ar.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/Alexandria_300_lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Alexandria_400_ar.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Alexandria_400_lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Alexandria_600_ar.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Alexandria_600_lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Alexandria_700_ar.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Alexandria';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Alexandria_700_lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/InstrumentSans_var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/InstrumentSerif_400_normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/InstrumentSerif_400_italic.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/IBMPlexMono_400_normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/IBMPlexMono_500_normal.woff2') format('woff2')}

:root{
  --ivory:#F4E7C8;
  --charcoal:#1C1D20;
  --offwhite:#F5F4F2;
  --black:#0C0C0C;

  --ink:var(--ivory);
  --surface:var(--charcoal);

  --i-90:rgba(244,231,200,.90);
  --i-70:rgba(244,231,200,.70);
  --i-55:rgba(244,231,200,.55);
  --i-38:rgba(244,231,200,.38);
  --i-18:rgba(244,231,200,.18);
  --i-10:rgba(244,231,200,.10);
  --i-05:rgba(244,231,200,.05);

  --c-70:rgba(28,29,32,.70);
  --c-55:rgba(28,29,32,.55);
  --c-16:rgba(28,29,32,.16);
  --c-08:rgba(28,29,32,.08);

  --maxw:1180px;
  --gutter:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--charcoal);
  color:var(--ivory);
  font-family:'Instrument Sans','Alexandria',system-ui,sans-serif;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[lang="ar"] body{direction:rtl}
html[lang="en"] body{direction:ltr}
::selection{background:var(--ivory);color:var(--charcoal)}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:760px;margin-inline:auto}
.center{text-align:center}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{font-weight:600;line-height:1.18;letter-spacing:-.01em}
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,
html[lang="en"] .h-display{
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.005em;
}
.h-display{font-size:clamp(31px,5.3vw,63px);line-height:1.30;max-width:min(100%,900px)}
html[lang="en"] .h-display{font-size:clamp(36px,6.4vw,78px);line-height:1.10;max-width:min(100%,880px)}
h2{font-size:clamp(27px,3.8vw,44px);line-height:1.22}
h3{font-size:20px;line-height:1.45}
p{font-size:clamp(15.5px,1.5vw,17.5px)}
.lead{font-size:clamp(17px,1.9vw,21px);line-height:1.65;color:var(--i-70)}
.mut{color:var(--i-70)}

/* inverted word — the ONLY emphasis device (no second colour, per brand law) */
.inv{
  background:var(--ivory);color:var(--charcoal);
  padding:.06em .2em .12em;
  border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
html[lang="en"] .inv{padding:.02em .18em .06em}

/* mono label */
.label{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--i-55);
  display:inline-block;
}
html[lang="ar"] .label{
  font-family:'Alexandria',sans-serif;letter-spacing:0;
  text-transform:none;font-weight:600;font-size:13px;
}
.rule{height:1px;width:56px;background:var(--i-38);margin-block:24px}

/* ------------------------------------------------------------- surfaces */

.sec-light{background:var(--ivory);color:var(--charcoal)}
.sec-light .label{color:var(--c-55)}
.sec-light .mut,.sec-light .lead{color:var(--c-70)}
.sec-light .rule{background:var(--c-16)}
.sec-light .inv{background:var(--charcoal);color:var(--ivory)}
.sec{padding-block:clamp(72px,10vw,132px);position:relative}






/* liquid glass — ivory tinted, same optical trick as the references */
.glass{
  position:relative;overflow:hidden;
  background:rgba(244,231,200,.045);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:none;
}
.glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.2px;
  background:linear-gradient(180deg,
    rgba(244,231,200,.45) 0%, rgba(244,231,200,.14) 22%,
    rgba(244,231,200,0) 42%, rgba(244,231,200,0) 58%,
    rgba(244,231,200,.14) 78%, rgba(244,231,200,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.sec-light .glass{background:rgba(28,29,32,.035)}
.sec-light .glass::before{
  background:linear-gradient(180deg,
    rgba(28,29,32,.35) 0%, rgba(28,29,32,.10) 22%,
    rgba(28,29,32,0) 42%, rgba(28,29,32,0) 58%,
    rgba(28,29,32,.10) 78%, rgba(28,29,32,.35) 100%);
}



/* --------------------------------------------------------------- header */
.site-head{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  transition:background .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head.stuck{
  background:rgba(28,29,32,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--i-18);
}
.nav{
  max-width:var(--maxw);margin-inline:auto;padding:18px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:11px}
.brand img{height:28px;width:auto}
.brand span{font-family:'Alexandria',sans-serif;font-size:19px;letter-spacing:.005em}
.navlinks{display:flex;align-items:center;gap:clamp(18px,2.2vw,30px);font-size:14.5px}
.navlinks a{color:var(--i-70);transition:color .2s}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--ivory)}
.langsw{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;
  border-radius:999px;padding:7px 15px;color:var(--i-70);
}
html[lang="en"] .langsw{font-family:'Alexandria',sans-serif;letter-spacing:0}
.navtoggle{display:none;border-radius:999px;padding:8px 15px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;color:var(--i-70)}

/* ----------------------------------------------------------------- hero */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding-block:132px clamp(44px,7vw,84px);
  overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:0;background:var(--charcoal)}
.hero-media img,.hero-media video,.hero-media canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero-media canvas{opacity:0;transition:opacity .5s}
.hero-media canvas.on{opacity:1}
.hero-media video{opacity:0;transition:opacity .5s}
.hero-media video.on{opacity:1}
/* scrim: keeps ivory type legible over any frame (brand law: never type on bare image) */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top, rgba(28,29,32,.94) 0%, rgba(28,29,32,.62) 38%, rgba(28,29,32,.34) 68%, rgba(28,29,32,.72) 100%);
}
.hero-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(244,231,200,.05) 1px,transparent 1px);
  background-size:3px 3px;mix-blend-mode:overlay;
}
.hero > .wrap{position:relative;z-index:3;width:100%}
.hero-top{
  position:absolute;inset-block-start:112px;inset-inline:var(--gutter);z-index:3;
  max-width:var(--maxw);margin-inline:auto;
  display:flex;justify-content:space-between;align-items:flex-start;gap:32px;
}
.svc{display:flex;flex-direction:column;gap:7px}
.svc span{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--i-70);
}
html[lang="ar"] .svc span{
  font-family:'Alexandria',sans-serif;letter-spacing:0;
  text-transform:none;font-size:13.5px;font-weight:500;
}
.hero-intro{max-width:340px;text-align:end;font-size:16px;line-height:1.65;color:var(--i-70)}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  border-inline-start:2px solid var(--ivory);
  background:rgba(244,231,200,.10);backdrop-filter:blur(10px);
  padding:8px 14px;margin-bottom:26px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
html[lang="ar"] .hero-badge{font-family:'Alexandria',sans-serif;letter-spacing:0;text-transform:none;font-size:13px;font-weight:600}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}
.hero-foot{
  position:absolute;inset-block-end:26px;inset-inline:var(--gutter);z-index:3;
  max-width:var(--maxw);margin-inline:auto;
  display:flex;justify-content:space-between;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.18em;color:var(--i-38);
}
html[lang="ar"] .hero-foot{font-family:'Alexandria',sans-serif;letter-spacing:0;font-size:12px}

/* kinetic 3D mark (hero variant B) */
.mark3d-stage{
  position:absolute;inset:0;z-index:1;display:flex;
  align-items:flex-start;justify-content:center;
  padding-top:min(16vh,150px);perspective:1100px;
}
.mark3d{
  width:min(30vw,290px);transform-style:preserve-3d;opacity:.92;
  transition:transform .18s cubic-bezier(.2,.8,.3,1);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
.mark3d .l{position:absolute;inset:0;display:grid;place-items:center}
.mark3d img{width:100%;height:auto}
.mark-halo{
  position:absolute;inset-block-start:-8%;inset-inline:0;height:78%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side at 50% 40%,rgba(244,231,200,.10),rgba(244,231,200,0) 72%);
}
/* variant B keeps the type clear of the mark with its own floor gradient */
.hero-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(28,29,32,.96) 0%,rgba(28,29,32,.80) 32%,rgba(28,29,32,.10) 62%,rgba(28,29,32,0) 100%);
}
.haze{position:absolute;inset:0;z-index:0}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 28px;border-radius:999px;font-size:14.5px;font-weight:600;
  transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s;
  will-change:transform;
}
html[lang="en"] .btn{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:13px;letter-spacing:.06em}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--ivory);color:var(--charcoal)}
.btn-solid:hover{box-shadow:0 12px 34px rgba(244,231,200,.18)}
.sec-light .btn-solid{background:var(--charcoal);color:var(--ivory)}
.sec-light .btn-solid:hover{box-shadow:0 12px 34px rgba(28,29,32,.22)}
.sec-light .btn-glass{color:var(--charcoal)}
.btn-glass{color:var(--ivory);border-radius:999px}
.btn-glass:hover{background:rgba(244,231,200,.10)}



.btn .arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
html[lang="ar"] .btn:hover .arw{transform:translateX(-3px)}

/* ----------------------------------------------------------------- grids */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.g2,.g3{grid-template-columns:1fr}}

.card{
  border-radius:14px;padding:30px 28px;
  transition:transform .4s var(--ease);
  transform-style:preserve-3d;
}
.card h3{margin-bottom:11px}
.card p{font-size:15.5px;line-height:1.7;color:var(--i-70)}
.sec-light .card p{color:var(--c-70)}

.card .tag{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--i-38);display:block;margin-bottom:14px;
}
html[lang="ar"] .card .tag{font-family:'Alexandria',sans-serif;letter-spacing:0;text-transform:none;font-size:12.5px;font-weight:600}
.sec-light .card .tag{color:var(--c-55)}


/* thesis lines */
.thesis{font-size:clamp(19px,2.4vw,27px);font-weight:600;line-height:1.5;padding-block:28px;border-bottom:1px solid var(--i-18)}
.sec-light .thesis{border-color:var(--c-16)}
.thesis:last-child{border-bottom:none}


/* numbered steps */
.step{display:flex;gap:22px;align-items:flex-start;padding-block:28px;border-bottom:1px solid var(--i-18)}
.sec-light .step{border-color:var(--c-16)}
.step:last-of-type{border-bottom:none}

.step .n{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--i-38);min-width:32px;padding-top:5px}
.sec-light .step .n{color:var(--c-55)}

.step h3{margin-bottom:7px}
.step p{font-size:15.5px;color:var(--i-70)}
.sec-light .step p{color:var(--c-70)}


/* chips */
.chips{display:flex;flex-wrap:wrap;gap:11px;justify-content:center}
.chip{
  border-radius:999px;padding:9px 19px;font-size:14px;font-weight:500;color:var(--i-70);
  transition:transform .25s var(--ease),color .25s;
}
.chip:hover{transform:translateY(-2px);color:var(--ivory)}
.sec-light .chip{color:var(--c-70)}
.sec-light .chip:hover{color:var(--charcoal)}



/* principles strip */
.strip{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,52px);justify-content:center;align-items:center}
.strip span{font-size:14.5px;font-weight:600;color:var(--i-70)}
.sec-light .strip span{color:var(--c-70)}


/* post cards */
.post{border-radius:14px;padding:26px 24px;display:block;transition:transform .35s var(--ease)}
.post:hover{transform:translateY(-5px)}
.post .plat{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.18em;color:var(--i-38);display:block;margin-bottom:13px}
.sec-light .post .plat{color:var(--c-55)}

.post h4{font-size:16.5px;font-weight:600;line-height:1.55;margin-bottom:12px}
.post .go{font-size:13px;color:var(--i-55)}
.sec-light .post .go{color:var(--c-55)}


/* FAQ */
.faq{border-bottom:1px solid var(--i-18)}
.faq:first-of-type{border-top:1px solid var(--i-18)}
.sec-light .faq,.sec-light .faq:first-of-type{border-color:var(--c-16)}

.faq summary{
  cursor:pointer;list-style:none;padding-block:26px;font-size:18px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'IBM Plex Mono',monospace;font-size:21px;color:var(--i-38);flex:none;transition:transform .3s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .a{padding-block:0 28px;color:var(--i-70);font-size:16px;max-width:70ch}
.sec-light .faq .a{color:var(--c-70)}


/* form */
.form{max-width:600px;margin-inline:auto;border-radius:18px;padding:clamp(26px,4vw,42px)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--i-55);margin-bottom:8px}
.field input,.field textarea{
  width:100%;background:rgba(244,231,200,.04);border:1px solid var(--i-18);
  color:var(--ivory);padding:14px 16px;font:inherit;font-size:15.5px;border-radius:8px;
  transition:border-color .2s,background .2s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--i-55);background:rgba(244,231,200,.07)}
.field textarea{min-height:132px;resize:vertical}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form-note{font-size:13px;color:var(--i-38);margin-top:14px;text-align:center}
.form-status{margin-top:14px;font-size:14px;text-align:center;min-height:22px}
.form-status.ok{color:#A9C9A4}
.form-status.err{color:#D9A3A3}
.alt{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* footer */
.site-foot{border-top:1px solid var(--i-18);padding-block:52px}
.footgrid{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:30px}
.footlinks{display:flex;gap:22px;flex-wrap:wrap;font-size:14px}
.footlinks a{color:var(--i-55);transition:color .2s}
.footlinks a:hover{color:var(--ivory)}
.foot-mut{font-size:12.5px;color:var(--i-38)}

/* display headline: lines rise behind a soft mask (the reference move) */
.ln{display:block}
.ln.rv{
  opacity:0;transform:translateY(26px);
  clip-path:inset(-12% 0 102% 0);
  transition:opacity .9s var(--ease),transform 1.05s var(--ease),clip-path 1.05s var(--ease);
}
.ln.rv.in{opacity:1;transform:none;clip-path:inset(-12% 0 -14% 0)}
@media(prefers-reduced-motion:reduce){
  .ln.rv{opacity:1;transform:none;clip-path:none;transition:none}
}

/* --------------------------------------------------------------- motion */
.rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.40s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .card,.post,.btn,.chip{transition:none}
}

/* ----------------------------------------------------------- responsive */
@media(max-width:860px){
  .hero-top{
    position:static;flex-direction:column;gap:18px;margin-bottom:34px;
    inset-inline:auto;padding-inline:var(--gutter);
  }
  .hero-intro{text-align:start;max-width:none}
  .hero{justify-content:center;padding-block:120px 96px}
  .hero-foot{display:none}
}
@media(max-width:760px){
  .navlinks{display:none}
  .navtoggle{display:block;background:rgba(244,231,200,.08)}
  .footgrid{flex-direction:column;gap:22px}
}


/* ====== HERO — حقل مجسّمات ثلاثية الأبعاد يمشي ويتكرر ======
   كل اختصاص له مجسّم سلكي، والمجسّمات كلها حاضرة سوية بحجم واحد
   ومسافات واحدة، موزّعة توزيعاً عشوائياً مدروساً (صفوف متبادلة الاتجاه
   مع إزاحة وجَورة محسوبة)، وتتكرّر بلا نهاية تماماً كما كانت الكلمات.
   الرسم كله كانفس: خطوط عاجية على فحمي، بلا صور وبلا لون ثانٍ. */
.nh{position:relative;min-height:100svh;overflow:hidden;background:var(--charcoal);
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-block:150px clamp(38px,6vw,84px);
    --mx:50%;--my:42%;--fade:0}
.nh-field{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.nh-lines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(244,231,200,.05) 0 1px,transparent 1px 6px);
  mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 64%,transparent 94%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 64%,transparent 94%)}
.nh-glow{position:absolute;left:0;top:0;width:1100px;height:1100px;z-index:1;pointer-events:none;
  margin:-550px 0 0 -550px;will-change:transform;
  transform:translate3d(var(--gx,50vw),var(--gy,40vh),0);
  background:radial-gradient(circle at 50% 50%,
     rgba(244,231,200,.10) 0%,rgba(244,231,200,.035) 30%,transparent 52%)}
.nh-vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(72% 36% at 50% 0%,rgba(244,231,200,.08),transparent 72%),
    radial-gradient(120% 80% at 50% 40%,transparent 0%,rgba(28,29,32,.34) 58%,rgba(28,29,32,.86) 100%),
    linear-gradient(to top,rgba(28,29,32,.97) 0%,rgba(28,29,32,.84) 24%,
      rgba(28,29,32,.26) 58%,rgba(28,29,32,.60) 100%)}
/* حبيبات فيلم خفيفة — عمق سينمائي بلون واحد */
.nh-grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.075;background-size:240px 240px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .91 0 0 0 0 .78 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* تلميح التمرير */
.nh-scroll{position:absolute;inset-block-end:28px;inset-inline-start:var(--gutter);z-index:5;
  display:flex;align-items:center;gap:11px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--i-38)}
html[lang="ar"] .nh-scroll{font-family:'Alexandria',sans-serif;letter-spacing:0;font-size:12px;text-transform:none}
.nh-scroll i{position:relative;width:46px;height:1px;background:var(--i-18);overflow:hidden;display:block}
.nh-scroll i::after{content:"";position:absolute;inset:0;background:var(--ivory);
  transform:translateX(-100%);animation:nhscan 2.4s var(--ease) infinite}
html[dir="rtl"] .nh-scroll i::after{animation-name:nhscanr}
@keyframes nhscan{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@keyframes nhscanr{0%{transform:translateX(100%)}60%,100%{transform:translateX(-100%)}}
/* الكتلة العاجية تنكشف بمسح من جهة البداية */
.nh .ln .inv,.ph .ln .inv{display:inline-block;clip-path:inset(0 100% 0 0);animation:nhwipe 1.05s var(--ease) .55s both}
html[dir="rtl"] .nh .ln .inv,html[dir="rtl"] .ph .ln .inv{clip-path:inset(0 0 0 100%);animation-name:nhwiper}
@keyframes nhwipe{to{clip-path:inset(0 0 0 0)}}
@keyframes nhwiper{to{clip-path:inset(0 0 0 0)}}
.nh-names{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

.nh > .wrap{position:relative;z-index:5;width:100%;
  transform:translate3d(0,calc(var(--fade) * -32px),0);
  opacity:calc(1 - var(--fade) * 1.15)}
.nh-badge{display:inline-flex;align-items:center;gap:10px;letter-spacing:0;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:uppercase;
  color:var(--i-70);border:1px solid var(--i-18);border-radius:999px;padding:7px 15px}
html[lang="ar"] .nh-badge{font-family:'Alexandria',sans-serif;font-size:13px;text-transform:none}
.nh-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ivory);
  animation:nhpulse 2.6s ease-out infinite}
@keyframes nhpulse{0%{box-shadow:0 0 0 0 rgba(244,231,200,.45)}
  70%{box-shadow:0 0 0 11px rgba(244,231,200,0)}100%{box-shadow:0 0 0 0 rgba(244,231,200,0)}}
.nh h1{margin-top:20px}
.nh .h-display{line-height:1.54}
html[lang="en"] .nh .h-display{line-height:1.22}
.nh .inv{padding:.02em .18em .07em}
html[lang="en"] .nh .inv{padding:0 .16em .05em}
.nh .ln{display:block}
.nh-sub{margin-top:20px;max-width:min(100%,560px);font-size:clamp(15px,1.7vw,18px);
  line-height:1.7;color:var(--i-70)}
.nh-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:clamp(24px,3.4vw,36px)}

@media(max-width:860px){
  .nh{padding-block:118px clamp(26px,5vw,38px)}
  .nh-scroll{display:none}
  .nh-sub{max-width:100%}
  .nh-cta .btn{flex:1 1 auto;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .nh-badge::before,.nh-scroll i::after{animation:none}
  .nh .ln .inv{animation:none;clip-path:none}
}


/* ====== هيرو الصفحات الداخلية — مشهد كانفس مخصّص لكل صفحة ====== */
.ph{position:relative;min-height:clamp(560px,84svh,880px);overflow:hidden;background:var(--charcoal);
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-block:150px clamp(40px,6vw,72px);--fade:0}
.ph-field{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.ph-lines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(to bottom,rgba(244,231,200,.05) 0 1px,transparent 1px 6px);
  mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 64%,transparent 94%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 24%,#000 64%,transparent 94%)}
.ph-vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(72% 36% at 50% 0%,rgba(244,231,200,.06),transparent 72%),
    linear-gradient(to top,rgba(28,29,32,.97) 0%,rgba(28,29,32,.70) 22%,
      rgba(28,29,32,.08) 52%,rgba(28,29,32,.55) 100%)}
.ph-grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.075;background-size:240px 240px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .91 0 0 0 0 .78 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ph-names{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ph > .wrap{position:relative;z-index:5;width:100%;
  transform:translate3d(0,calc(var(--fade) * -30px),0);opacity:calc(1 - var(--fade) * 1.15)}
.ph-copy{max-width:600px}
.ph .h-display{font-size:clamp(31px,4.9vw,58px);line-height:1.52;margin-top:16px}
html[lang="en"] .ph .h-display{line-height:1.20}
.ph .inv{padding:.02em .18em .07em}
html[lang="en"] .ph .inv{padding:0 .16em .05em}
.ph .ln{display:block}
.ph-lead{margin-top:18px;max-width:560px;font-size:clamp(15px,1.7vw,18px);line-height:1.7;color:var(--i-70)}

/* فهرس الخدمات — شريط أفقي أسفل الهيرو */
.ph-index{list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;display:flex;gap:0;
  border-top:1px solid var(--i-18);overflow-x:auto;scrollbar-width:none}
.ph-index::-webkit-scrollbar{display:none}
.ph-index li{flex:1 0 auto;display:flex;flex-direction:column;gap:6px;padding:14px 16px 0 0;
  color:var(--i-38);cursor:pointer;position:relative;transition:color .35s var(--ease);min-width:118px}
html[dir="rtl"] .ph-index li{padding:14px 0 0 16px}
.ph-index li::before{content:"";position:absolute;top:-1px;inset-inline-start:0;height:1px;width:0;background:var(--ivory);
  transition:width .35s var(--ease)}
.ph-index li .n{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;direction:ltr;unicode-bidi:isolate}
.ph-index li .t{font-size:13.5px;font-weight:600;letter-spacing:0;white-space:normal;line-height:1.3}
html[lang="en"] .ph-index li .t{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.ph-index li:hover{color:var(--i-70)}
.ph-index li.on{color:var(--ivory)}
.ph-index li.on::before{width:calc(100% - 16px);animation:phfill 3.4s linear both}
@keyframes phfill{from{width:0}to{width:calc(100% - 16px)}}

@media(max-width:860px){
  .ph{min-height:clamp(560px,88svh,820px);padding-block:118px clamp(26px,5vw,38px)}
  .ph-lead{max-width:100%}
  .ph-index li{min-width:104px}
  .ph-index li .t{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .ph .ln .inv{animation:none;clip-path:none}
  .ph-index li.on::before{animation:none;width:calc(100% - 16px)}
}


/* ============ أعمالنا — بطاقة لكل اختصاص مع مجسّمه الدوّار ============ */
.wkgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.wkc{position:relative;display:flex;flex-direction:column;border:1px solid var(--i-18);
  border-radius:14px;overflow:hidden;background:rgba(244,231,200,.02);
  transition:border-color .35s var(--ease),transform .45s var(--ease)}
.wkc:hover{border-color:var(--i-38);transform:translateY(-3px)}
.wkc-art{position:relative;aspect-ratio:16/9;border-bottom:1px solid var(--i-10);
  background:radial-gradient(60% 70% at 50% 45%,rgba(244,231,200,.055),transparent 72%)}
.wkc-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wkc-body{padding:clamp(18px,2.2vw,26px)}
.wkc-body h3{font-size:clamp(17px,1.9vw,21px);letter-spacing:0}
.wkc-body p{margin-top:9px;font-size:15px;line-height:1.65;color:var(--i-70)}
.wkc-flow{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:7px 0;counter-reset:wk}
.wkc-flow li{position:relative;display:inline-flex;align-items:center;gap:7px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--i-55)}
html[lang="ar"] .wkc-flow li{font-family:'Alexandria',sans-serif;font-size:12px;letter-spacing:0}
.wkc-flow li::before{counter-increment:wk;content:counter(wk,decimal-leading-zero);
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--i-38);
  border:1px solid var(--i-18);border-radius:4px;padding:2px 4px;direction:ltr}
.wkc-flow li:not(:last-child)::after{content:"";width:14px;height:1px;background:var(--i-18);
  margin-inline:9px}
.sec-light .wkc{border-color:var(--c-16);background:rgba(28,29,32,.03)}
.sec-light .wkc-body p{color:var(--c-70)}
.sec-light .wkc-flow li{color:var(--c-55)}

/* ============ من نحن — بطاقة الحقائق ============ */
.facts{display:grid;grid-template-columns:1fr;gap:0;margin:0}
.fact{display:grid;grid-template-columns:minmax(120px,.32fr) 1fr;gap:14px 22px;
  padding-block:16px;border-bottom:1px solid var(--c-16);align-items:baseline}
.fact:first-child{border-top:1px solid var(--c-16)}
.fact dt{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-55)}
html[lang="ar"] .fact dt{font-family:'Alexandria',sans-serif;letter-spacing:0;
  text-transform:none;font-size:13px;font-weight:600}
.fact dd{margin:0;font-size:15.5px;line-height:1.65}

@media(max-width:860px){
  .wkgrid2{grid-template-columns:1fr}
  .fact{grid-template-columns:1fr;gap:5px;padding-block:14px}
}


/* ================= أيقونات المنصات + زر واتساب العائم ================= */
.soc{display:inline-flex;width:16px;height:16px;flex:0 0 16px}
.soc svg{width:100%;height:100%;display:block}
.footlinks a{display:inline-flex;align-items:center;gap:8px}
.post .plat{display:inline-flex;align-items:center;gap:7px}
.post .plat .soc{width:14px;height:14px;flex-basis:14px;opacity:.85}

/* زر واتساب — ظاهر على كل صفحة، بعيد عن أي محتوى */
.wafab{position:fixed;z-index:70;inset-block-end:clamp(18px,2.4vw,28px);
  inset-inline-end:clamp(18px,2.4vw,28px);
  display:inline-flex;align-items:center;gap:0;height:54px;padding:0 6px;
  border-radius:999px;background:var(--ivory);color:var(--charcoal);
  box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:hidden;
  transition:gap .45s var(--ease),padding .45s var(--ease),
             box-shadow .35s var(--ease),transform .35s var(--ease)}
.wafab::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(244,231,200,.45);animation:wapulse 3s ease-out infinite;pointer-events:none}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(244,231,200,.40)}
  70%{box-shadow:0 0 0 16px rgba(244,231,200,0)}100%{box-shadow:0 0 0 0 rgba(244,231,200,0)}}
.wafab-ico{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;flex:0 0 42px}
.wafab-ico svg{width:26px;height:26px;display:block}
.wafab-lbl{max-width:0;opacity:0;white-space:nowrap;font-size:14px;font-weight:600;letter-spacing:0;
  transition:max-width .5s var(--ease),opacity .35s var(--ease),margin .5s var(--ease)}
html[lang="en"] .wafab-lbl{font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  font-weight:500;letter-spacing:.04em}
.wafab:hover,.wafab:focus-visible,.wafab.open{padding-inline-end:20px}
.wafab:hover .wafab-lbl,.wafab:focus-visible .wafab-lbl,.wafab.open .wafab-lbl{
  max-width:260px;opacity:1;margin-inline-start:4px}
.wafab:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(0,0,0,.45)}
.wafab:active{transform:scale(.97)}
@media(max-width:860px){
  .wafab{height:50px;inset-block-end:16px;inset-inline-end:16px}
  .wafab-ico{width:38px;height:38px;flex-basis:38px}
  .wafab-ico svg{width:24px;height:24px}
  .wafab-lbl{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.wafab::after{animation:none}}
/* لا يزاحم قائمة الجوال المنزلقة */
body.menu-open .wafab{opacity:0;pointer-events:none;transition:opacity .2s}


/* ============ الإنكليزية: خط لاتيني مصاحب لـ Instrument Serif ============
   Instrument Sans للنص والواجهة (بدل الخط المونو في كل مكان)، ويبقى
   IBM Plex Mono للأرقام والعدّادات فقط. المقاسات مرفوعة قليلاً لأن
   ارتفاع حرف الـ x فيه أقل من Alexandria. */
html[lang="en"] body{font-size:17.5px;line-height:1.72;letter-spacing:-.004em}
html[lang="en"] .lead{font-size:clamp(18px,2vw,22px);line-height:1.62}
html[lang="en"] .nh-sub,html[lang="en"] .ph-lead{font-size:clamp(16.5px,1.8vw,19px);line-height:1.66}
html[lang="en"] .card p,html[lang="en"] .step p{font-size:16.5px;line-height:1.66}
html[lang="en"] .wkc-body p{font-size:16px}
html[lang="en"] .fact dd{font-size:16.5px}
html[lang="en"] .faq .a{font-size:17px}
html[lang="en"] .form label{font-size:13.5px}
html[lang="en"] .form input,html[lang="en"] .form textarea{font-size:16px}
html[lang="en"] .form-note,html[lang="en"] .foot-mut{font-size:14px}
html[lang="en"] .footlinks a{font-size:14.5px}
html[lang="en"] .navlinks a{font-size:15.5px;letter-spacing:-.005em}
html[lang="en"] .post h4{font-size:17px}
html[lang="en"] .strip span{font-size:15px}

/* الملصقات والوسوم: أحرف كبيرة متباعدة بخط النص نفسه، لا مونو */
html[lang="en"] .label,
html[lang="en"] .card .tag,
html[lang="en"] .post .plat,
html[lang="en"] .hero-badge,
html[lang="en"] .nh-badge,
html[lang="en"] .ph-index li .t,
html[lang="en"] .fact dt,
html[lang="en"] .nh-nm,
html[lang="en"] .nh-rail b,
html[lang="en"] .langsw,
html[lang="en"] .navtoggle,
html[lang="en"] .nh-scroll{
  font-family:'Instrument Sans',system-ui,sans-serif;font-weight:600;
}
html[lang="en"] .label{font-size:12.5px;letter-spacing:.15em}
html[lang="en"] .card .tag{font-size:11.5px;letter-spacing:.13em}
html[lang="en"] .post .plat{font-size:11.5px;letter-spacing:.13em}
html[lang="en"] .hero-badge,html[lang="en"] .nh-badge{font-size:12.5px;letter-spacing:.09em}
html[lang="en"] .ph-index li .t{font-size:12px;letter-spacing:.07em}
html[lang="en"] .fact dt{font-size:12.5px;letter-spacing:.13em}
html[lang="en"] .nh-nm{font-size:13.5px;letter-spacing:.09em}
html[lang="en"] .nh-rail b{font-size:12.5px;letter-spacing:.1em}
html[lang="en"] .langsw{font-size:12.5px;letter-spacing:.07em}
html[lang="en"] .navtoggle{font-size:12px;letter-spacing:.14em}
html[lang="en"] .nh-scroll{font-size:11.5px;letter-spacing:.16em}
html[lang="en"] .wkc-flow li{font-family:'Instrument Sans',system-ui,sans-serif;
  font-weight:500;font-size:12.5px;letter-spacing:.02em;text-transform:none}
/* الأزرار: خط النص بوزن أثقل بدل المونو */
html[lang="en"] .btn{font-family:'Instrument Sans',system-ui,sans-serif;
  font-weight:600;font-size:14.5px;letter-spacing:-.005em;text-transform:none}
html[lang="en"] .wafab-lbl{font-family:'Instrument Sans',system-ui,sans-serif;
  font-weight:600;font-size:14px;letter-spacing:-.005em}
/* المونو يبقى للأرقام فقط */
html[lang="en"] .step .n,html[lang="en"] .nh-num,
html[lang="en"] .ph-index li .n,html[lang="en"] .wkc-flow li::before{
  font-family:'IBM Plex Mono',monospace}

/* أيقونة داخل العنوان — خط عاجي رفيع، بلا لون ثانٍ */
.h-ico{display:inline-block;width:.72em;height:.72em;vertical-align:-.02em;margin-inline:.12em}
.h-ico svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.inv .h-ico{color:var(--charcoal)}
.btn .ico{display:block}
.btn:active{transform:scale(.97)}

/* ===================== إطار التركيز على البطاقات ==========================
   الزوايا فقط — نفس مفردة «إطار التركيز» المستعملة بالريلات.
   ::before محجوز للزجاج، فالإطار مرسوم على ::after بقناع زوايا. */
.card{position:relative}
.card::after{
  content:"";position:absolute;inset:11px;border:1.2px solid var(--ivory);border-radius:9px;
  opacity:0;pointer-events:none;transition:opacity .32s var(--ease);
  -webkit-mask:
    linear-gradient(#000,#000) top left/18px 18px no-repeat,
    linear-gradient(#000,#000) top right/18px 18px no-repeat,
    linear-gradient(#000,#000) bottom left/18px 18px no-repeat,
    linear-gradient(#000,#000) bottom right/18px 18px no-repeat;
  mask:
    linear-gradient(#000,#000) top left/18px 18px no-repeat,
    linear-gradient(#000,#000) top right/18px 18px no-repeat,
    linear-gradient(#000,#000) bottom left/18px 18px no-repeat,
    linear-gradient(#000,#000) bottom right/18px 18px no-repeat;
}
.card:hover::after{opacity:.8}
.sec-light .card::after{border-color:var(--charcoal)}


/* ===================== قائمة الجوال المنزلقة ============================== */
.sheet-back{
  position:fixed;inset:0;z-index:70;background:rgba(12,12,12,.45);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.sheet-back.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;inset-block:0;inset-inline-end:0;z-index:80;
  width:min(88vw,360px);height:100dvh;background:#191A1D;
  box-shadow:-14px 0 52px rgba(0,0,0,.45);
  display:flex;flex-direction:column;padding:22px var(--gutter) 30px;
  transform:translateX(100%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
html[dir="rtl"] .sheet{transform:translateX(-100%)}
.sheet.on{transform:translateX(0)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;
  border-bottom:1px solid var(--i-18)}
.sheet-close{width:38px;height:38px;border-radius:999px;border:1px solid var(--i-18);
  display:grid;place-items:center;color:var(--i-70)}
.sheet nav{display:flex;flex-direction:column;gap:4px;padding-block:26px}
.sheet nav a{font-size:19px;font-weight:600;padding-block:10px;color:var(--i-70);
  opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s}
.sheet.on nav a{opacity:1;transform:none}
.sheet nav a[aria-current]{color:var(--ivory)}
.sheet-foot{margin-top:auto;display:flex;flex-direction:column;gap:11px}
.sheet-foot .btn{width:100%;justify-content:center}
@media(min-width:761px){.sheet,.sheet-back{display:none}}


/* ===================== شبكة الأعمال ===================== */
.wkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.wkgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.wkgrid{grid-template-columns:1fr}}
.wk{position:relative;border-radius:14px;overflow:hidden;background:#131417;
    transition:transform .4s var(--ease)}
.wk:hover{transform:translateY(-5px)}
.wk img{width:100%;height:auto;display:block;filter:brightness(.92);transition:filter .4s var(--ease)}
.wk:hover img{filter:brightness(1.04)}
.wk figcaption{padding:22px 20px 24px}
.wk .tag{font-family:'Alexandria',sans-serif;font-size:12.5px;font-weight:600;
  color:var(--i-38);display:block;margin-bottom:9px}
.wk h3{font-size:18px;margin-bottom:8px}
.wk p{font-size:14.5px;color:var(--i-70);line-height:1.65}

/* أيقونة الخدمة */
.svc-ico{display:block;width:30px;height:30px;color:var(--i-55);margin-bottom:16px}
.sec-light .svc-ico{color:var(--c-55)}
.svc-ico svg{width:100%;height:100%;display:block}



/* ===================== شريط صورة داخل الصفحة ===================== */
.band{position:relative;height:clamp(240px,34vw,420px);overflow:hidden;border-radius:16px}
.band img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.86)}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(28,29,32,.85),rgba(28,29,32,.05))}
.band figcaption{position:absolute;inset-block-end:22px;inset-inline-start:26px;z-index:2;
  font-family:'Alexandria',sans-serif;font-size:14px;color:var(--i-70)}


/* ===== كشف بضبابية صاعدة — توقيع برومبت NovaAI ===== */
@keyframes riseBlur{
  0%{opacity:0;transform:translateY(30px);filter:blur(13px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
.nh .rv,.ph .rv{opacity:0;transform:none;transition:none;
  animation:riseBlur 1.15s cubic-bezier(.16,1,.3,1) both}
.nh .rv.d1,.ph .rv.d1{animation-delay:.16s}
.nh .rv.d2,.ph .rv.d2{animation-delay:.30s}
.nh .rv.d3,.ph .rv.d3{animation-delay:.46s}
.nh .rv.d4,.ph .rv.d4{animation-delay:.60s}
.nh .ln.rv,.ph .ln.rv{clip-path:none}
@media(prefers-reduced-motion:reduce){
  .nh .rv,.ph .rv{animation:none;opacity:1}
}