/* =========================================================================
   OSUSS AL-TAMIZ — site styles
   Built entirely on the tokens in colors_and_type.css. No :root overrides
   live here, so the design system alone controls colour and type.
   Brand rules honoured: drafting-paper beige, navy text, amber used sparingly,
   radii 0–8px, hairline borders, no gradients, no frosted glass.
   ========================================================================= */
/* tokens are linked separately in the template so they can be cache-busted */

*{box-sizing:border-box;}
html,body{margin:0; padding:0; min-height:100%;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body); color:var(--fg-1);
  background:var(--surface-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:var(--x-lh-en); overflow-x:hidden;
}
[dir="rtl"] body{line-height:var(--x-lh-ar);}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}

/* [1] focus ring — a token cannot add an outline that does not exist */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:var(--x-focus-ring); outline-offset:var(--x-focus-offset); border-radius:var(--radius-sm);
}

.container{max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter);}
.section{padding:var(--sp-9) 0;}
.section--tight{padding:var(--sp-8) 0;}
.muted{background:var(--surface-sunken);}

/* ---------- shared card surface (solid — the brand forbids frosted glass) ---------- */
.glass, .svc, .tool-card, .article, .model, .cred, .calc, .info-card, .member, .adm-card, .ph{
  background:var(--surface-raised); box-shadow:var(--shadow-inset); backdrop-filter:none;
  border-radius:var(--radius-lg);
}

/* ---------- Header — the one sticky layer allowed to blur ---------- */
.app-header{position:sticky; top:0; z-index:50; background:rgba(248,241,229,.88);
  backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border-default);}
.app-header__inner{display:flex; align-items:center; gap:var(--sp-5); height:74px;}
[dir="rtl"] .app-header__inner{flex-direction:row-reverse;}
.brand-lockup{display:flex; align-items:center; gap:10px;}
.brand-lockup__mark{width:34px; height:42px; flex-shrink:0; object-fit:contain;}
.brand-lockup__ar{display:block; font-family:var(--font-display-ar); font-weight:700; font-size:18px; line-height:1.15; color:var(--brand-navy-600); direction:rtl;}
.brand-lockup__en{display:block; font-family:var(--font-display-en); font-weight:600; font-size:9.5px; line-height:1.3; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3);}
.app-nav{display:flex; gap:var(--sp-5); margin-inline-start:auto;}
.app-nav a{font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--fg-2); padding:6px 0; border-bottom:2px solid transparent; transition:color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);}
.app-nav a:hover{color:var(--fg-1);}
.app-nav a.active{border-bottom-color:var(--brand-amber-500); color:var(--fg-1);}
.app-actions{display:flex; align-items:center; gap:10px;}

/* ---------- Buttons ---------- */
.btn{font-family:var(--font-body); font-size:14px; font-weight:600; padding:11px 20px;
  border:1px solid transparent; border-radius:var(--radius-md); cursor:pointer;
  transition:background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
.btn:active{opacity:.92;}
.btn--primary{background:var(--brand-amber-500); color:var(--brand-midnight);}   /* 7.8:1 */
.btn--primary:hover{background:var(--brand-amber-600);}
.btn--secondary{background:var(--brand-navy-600); color:var(--neutral-0);}
.btn--secondary:hover{background:var(--brand-navy-700);}
.btn--outline{background:transparent; color:var(--brand-navy-600); border-color:var(--brand-navy-600);}
.btn--outline:hover{background:var(--brand-navy-50);}
.btn--ghost{background:transparent; color:var(--fg-2); padding:11px 10px;}
.btn--ghost:hover{color:var(--fg-accent);}
.btn--ondark{color:var(--fg-on-dark-1); border-color:var(--border-inverse);}
.btn--ondark:hover{border-color:#fff; background:rgba(255,255,255,.08);}
.btn--login{padding:10px 15px;}
.btn .i{width:18px; height:18px;}

/* ---------- Lang toggle + icon buttons ---------- */
.lang-toggle{display:inline-flex; background:var(--surface-sunken); border:1px solid var(--border-default); border-radius:var(--radius-pill); padding:3px;}
.lang-toggle__btn{font-family:var(--font-display); font-size:12px; font-weight:600; padding:6px 13px; border-radius:var(--radius-pill); border:0; background:transparent; color:var(--fg-2); cursor:pointer; transition:background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);}
.lang-toggle__btn.active{background:var(--brand-navy-600); color:var(--neutral-0);}
.icon-btn{width:40px; height:40px; border-radius:var(--radius-md); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.icon-btn.wa{background:#1F7A55; color:#fff;}
.icon-btn.wa:hover{background:#175F42;}
.icon-btn .i{width:20px; height:20px;}
.nav-toggle{display:none; background:transparent; border:0; cursor:pointer; color:var(--brand-navy-600); padding:6px;}
.nav-toggle .i{width:26px; height:26px;}

/* [6] icons — SVG presentation attributes are not tokens */
.icon, .i{stroke-width:1.75; fill:none;}
.icon--accent{color:var(--fg-accent);}

/* ---------- Welcome video hero ---------- */
/* [4] geometry, not colour: the headline dropped below the fold without a cap */
.vhero{position:relative; min-height:0; height:clamp(440px, 72vh, var(--x-vhero-max));
  max-height:var(--x-vhero-max); overflow:hidden; display:flex; align-items:flex-end;
  border-bottom:1px solid var(--border-default);}
.vhero__media{position:absolute; inset:0; z-index:0; background:var(--brand-navy-600);}
.vhero video, .vhero img, .vhero__video{width:100%; height:100%; object-fit:cover;}
.vhero__video:not(.is-ready){opacity:0;}
.vhero__video.is-ready + .vhero__standin{display:none;}
.vhero__standin{position:absolute; inset:0; color:var(--brand-amber-500); background:var(--brand-navy-600);}
.vhero__grid{position:absolute; inset:0;
  background-image:linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:64px 64px;}
.vhero__draw{position:absolute; inset-inline:0; bottom:5%; width:100%; height:48%; opacity:.55;}
.vhero__draw .draw path, .vhero__draw .draw circle{stroke-dasharray:1400; stroke-dashoffset:1400; animation:vdraw 4.5s var(--ease-standard) forwards;}
.vhero__draw .draw *:nth-child(2){animation-delay:.35s}
.vhero__draw .draw *:nth-child(3){animation-delay:.6s}
.vhero__draw .draw *:nth-child(n+4){animation-delay:.85s}
@keyframes vdraw{to{stroke-dashoffset:0}}
.vhero__note{position:absolute; bottom:16px; inset-inline-end:20px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-on-dark-3);
  border:1px dashed var(--border-inverse); padding:5px 12px; border-radius:var(--radius-pill);}
.vhero__scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,53,86,.35) 0%, rgba(11,30,40,.85) 100%);}
.vhero__inner{position:relative; z-index:2; padding-bottom:clamp(2rem,4vw,3.25rem); max-width:var(--container-max);}
.vhero__eyebrow{font-family:var(--font-display-ar); font-size:15px; font-weight:700; color:var(--fg-on-dark-accent); margin-bottom:14px; display:inline-flex; align-items:center; gap:10px;}
.vhero__eyebrow::before{content:""; width:32px; border-block-start:var(--x-rule-amber);}
.vhero__title{font-family:var(--font-display-ar); font-weight:700; color:var(--fg-on-dark-1); margin:0 0 14px; font-size:clamp(2.1rem,3.4vw + 1rem,3.6rem); line-height:1.2;}
.vhero__title em{color:var(--fg-on-dark-accent); font-style:normal;}
.vhero__lede{font-size:clamp(1rem,1vw + .6rem,1.25rem); color:var(--fg-on-dark-2); max-width:640px; margin:0 0 22px;}
.vhero__cta{display:flex; gap:12px; flex-wrap:wrap;}
.vhero__scroll{position:absolute; z-index:3; bottom:18px; inset-inline-start:24px; width:44px; height:44px; border-radius:50%; border:1px solid var(--border-inverse); display:grid; place-items:center; color:#fff;}
.vhero__scroll:hover{background:var(--brand-amber-500); color:var(--brand-midnight); border-color:transparent;}
.vhero__scroll .i{width:20px; height:20px;}

/* ---------- Intro hero (second block) ---------- */
.hero{position:relative; padding:var(--sp-8) 0; overflow:hidden;}
.hero__bg-grid{display:none;}
.hero__watermark{position:absolute; inset-inline-end:-80px; bottom:-100px; width:520px; height:520px;
  background:url('assets/logo-mark-transparent.png') no-repeat center / contain;
  opacity:var(--x-watermark-opacity); pointer-events:none;}
.hero__inner{position:relative; display:grid; grid-template-columns:1.4fr 1fr; gap:var(--sp-8); align-items:center;}
[dir="rtl"] .hero__inner{grid-template-columns:1fr 1.4fr;}
.hero__eyebrow{font-family:var(--font-display); font-size:var(--fs-eyebrow); font-weight:600; color:var(--fg-accent); text-transform:uppercase; letter-spacing:var(--ls-eyebrow); margin-bottom:16px; display:inline-flex; align-items:center; gap:10px;}
[dir="rtl"] .hero__eyebrow{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0; font-size:16px;}
.hero__eyebrow::before{content:""; width:30px; border-block-start:var(--x-rule-amber);}
.hero__title{font-family:var(--font-display); font-weight:700; font-size:var(--fs-h1); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); margin:0 0 var(--sp-4); color:var(--fg-1);}
[dir="rtl"] .hero__title{font-family:var(--font-display-ar); letter-spacing:0; line-height:1.3;}
.hero__title em{color:var(--fg-accent); font-style:normal;}
.hero__lede{font-size:var(--fs-body-lg); color:var(--fg-2); margin:0 0 var(--sp-5); max-width:560px;}
.hero__cta{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
.hero__plate{background:var(--surface-inverse); color:var(--fg-on-dark-1); padding:var(--sp-6); border-radius:var(--radius-lg); border-inline-start:var(--x-rule-amber);}
.hero__plate-title{font-family:var(--font-display-ar); font-size:16px; color:var(--fg-on-dark-accent); margin:0 0 14px;}
.hero__plate-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-inverse); font-family:var(--font-mono); font-size:12px; gap:12px;}
.hero__plate-row:last-child{border-bottom:0;}
.hero__plate-row span:first-child{color:var(--fg-on-dark-3); font-size:11px; align-self:center;}
[dir="rtl"] .hero__plate-row span:first-child{font-family:var(--font-display-ar); font-size:13px;}
.hero__plate-row span:last-child{color:var(--fg-on-dark-1);}

/* index strip */
.hero__index{position:relative; margin-top:var(--sp-7); border-top:1px solid var(--border-default); display:grid; grid-template-columns:repeat(4,1fr);}
.hero__index a{display:flex; flex-direction:column; gap:6px; padding:18px; border-inline-start:1px solid var(--border-subtle); transition:background var(--dur-base) var(--ease-standard);}
.hero__index a:first-child{border-inline-start:0;}
.hero__index a:hover{background:var(--surface-sunken);}
.hero__index .n{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--fg-accent);}
.hero__index .t{font-family:var(--font-display-ar); font-size:16px; font-weight:600; color:var(--fg-1); display:inline-flex; align-items:center; gap:7px;}
.hero__index .t .i{width:15px; height:15px; color:var(--fg-3); transition:color var(--dur-base) var(--ease-standard);}
.hero__index a:hover .t .i{color:var(--fg-accent);}

/* ---------- Page hero (inner pages) — navy band ---------- */
.page-hero{position:relative; background:var(--surface-inverse); color:var(--fg-on-dark-1); overflow:hidden;}
.page-hero__inner{position:relative; z-index:2; padding:var(--sp-8) 0;}
.page-hero h1{font-family:var(--font-display); color:var(--fg-on-dark-1); font-weight:700; font-size:var(--fs-h1); letter-spacing:var(--ls-tight); margin:0 0 10px;}
[dir="rtl"] .page-hero h1{font-family:var(--font-display-ar); letter-spacing:0; line-height:1.3;}
.crumb{font-family:var(--font-mono); font-size:12px; color:var(--fg-on-dark-3); margin-bottom:14px; display:flex; gap:8px;}
[dir="rtl"] .crumb{font-family:var(--font-display-ar); font-size:14px;}
.crumb a:hover{color:var(--fg-on-dark-accent);}
.page-hero .lede{font-size:var(--fs-body-lg); color:var(--fg-on-dark-2); max-width:640px; margin:6px 0 0;}

/* ---------- Section headings ---------- */
.section__eyebrow{font-family:var(--font-display); font-size:var(--fs-eyebrow); font-weight:600; color:var(--fg-accent); text-transform:uppercase; letter-spacing:var(--ls-eyebrow); margin-bottom:14px; display:inline-flex; align-items:center; gap:10px;}
[dir="rtl"] .section__eyebrow{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0; font-size:16px;}
.section__eyebrow::before{content:""; width:30px; border-block-start:var(--x-rule-amber);}
.section__title{font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2); line-height:var(--lh-snug); letter-spacing:var(--ls-tight); margin:0 0 var(--sp-4); color:var(--fg-1); max-width:720px;}
[dir="rtl"] .section__title{font-family:var(--font-display-ar); letter-spacing:0; line-height:1.35;}
.section__lede{font-size:var(--fs-body-lg); color:var(--fg-2); max-width:660px; margin:0 0 var(--sp-7);}
.section--center{text-align:center;}
.section--center .section__eyebrow, .section--center .section__title, .section--center .section__lede{margin-inline:auto;}
.section--center .section__eyebrow{justify-content:center;}

/* [5] replaces the four deleted !important rules */
.band-navy{background:var(--surface-inverse); color:var(--fg-on-dark-1); border-radius:var(--radius-lg); padding:clamp(2rem,4vw,3.5rem);}
.band-navy .section__title{color:var(--fg-on-dark-1);}
.band-navy .section__eyebrow{color:var(--fg-on-dark-accent);}
.band-navy .section__lede{color:var(--fg-on-dark-2);}

/* ---------- Placeholder art (visitors see these — part of the design) ---------- */
.photo{position:relative; background:var(--x-ph-bg); color:var(--fg-3); display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-display); font-size:12px; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; min-height:100%; overflow:hidden;}
[dir="rtl"] .photo{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0; font-size:14px;}
.photo span{position:relative; z-index:2;}
.ph{position:relative; width:100%; height:100%; min-height:170px; display:flex; align-items:center; justify-content:center;
  background:var(--x-ph-bg); box-shadow:none; border-radius:0;}
.ph::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(to right, var(--x-ph-line) 1px, transparent 1px),
                   linear-gradient(to bottom, var(--x-ph-line) 1px, transparent 1px);
  background-size:26px 26px;}
.ph svg{position:relative; width:70%; max-width:250px; height:auto; color:var(--brand-amber-700);}
.ph__tag{position:absolute; bottom:10px; inset-inline-start:10px; z-index:3; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); border:1px dashed var(--border-strong); padding:3px 8px; border-radius:var(--radius-pill); background:var(--surface-raised);}
.ph--tall{min-height:260px;}
.ph-avatar{width:100%; aspect-ratio:1; border-radius:var(--radius-md); display:grid; place-items:center; background:var(--surface-sunken); font-family:var(--font-display-ar); font-weight:700; font-size:2rem; color:var(--brand-amber-800); border:1px solid var(--border-default);}
.figure{aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-inset);}

/* ---------- Service cards ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.svc{padding:var(--sp-6); display:flex; flex-direction:column; gap:12px; transition:box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);}
.svc:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.svc__num{font-family:var(--font-mono); font-size:11px; color:var(--fg-accent); letter-spacing:.12em; display:flex; align-items:center; gap:10px;}
.svc__num::before{content:""; width:18px; border-block-start:var(--x-rule-amber);}
.svc__ico{width:48px; height:48px; border-radius:var(--radius-md); background:var(--brand-amber-50); color:var(--brand-amber-800); display:inline-flex; align-items:center; justify-content:center;}
.svc__ico .i{width:24px; height:24px;}
.svc__title{font-family:var(--font-display); font-weight:700; font-size:var(--fs-h4); line-height:1.25; color:var(--fg-1); margin:0;}
[dir="rtl"] .svc__title{font-family:var(--font-display-ar); line-height:1.4;}
.svc__desc{font-size:var(--fs-body-sm); color:var(--fg-2); margin:0;}
.svc__cta{font-family:var(--font-display); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:var(--ls-eyebrow); color:var(--fg-accent); display:inline-flex; align-items:center; gap:6px; margin-top:auto; border-top:1px solid var(--border-subtle); padding-top:16px; transition:gap var(--dur-base) var(--ease-standard);}
[dir="rtl"] .svc__cta{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0;}
.svc:hover .svc__cta{gap:10px;}

/* ---------- Stats — navy band ---------- */
.stats{background:var(--surface-inverse); color:var(--fg-on-dark-1); padding:var(--sp-7) 0;}
.stats__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6);}
.stat__num{font-family:var(--font-display); font-weight:700; font-size:44px; line-height:1; color:var(--fg-on-dark-accent); letter-spacing:var(--ls-tight);}
.stat__label{font-family:var(--font-display); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:var(--ls-eyebrow); color:var(--fg-on-dark-2); margin-top:8px;}
[dir="rtl"] .stat__label{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0; font-size:15px;}

/* ---------- Why us ---------- */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6) var(--sp-7);}
.why-item{display:flex; gap:14px;}
.why-item .ico{flex-shrink:0; width:46px; height:46px; border-radius:var(--radius-md); background:rgba(255,255,255,.08); color:var(--fg-on-dark-accent); display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-inverse);}
.why-item .ico .i{width:22px; height:22px;}
.why-item h4{font-family:var(--font-display); color:inherit; margin:0 0 6px; font-size:var(--fs-h4);}
[dir="rtl"] .why-item h4{font-family:var(--font-display-ar);}
.why-item p{color:inherit; opacity:.82; font-size:var(--fs-body-sm); margin:0;}
/* on the light "how we work" grid the icons sit on beige */
.section:not(.band-navy) .why-item .ico{background:var(--brand-amber-50); color:var(--brand-amber-800); border-color:var(--border-default);}
.section:not(.band-navy) .why-item h4{color:var(--fg-1);}
.section:not(.band-navy) .why-item p{color:var(--fg-2); opacity:1;}

/* ---------- Prose (the 45 imported articles) ---------- */
/* [2] leading is per-script, not per-token */
.prose{max-width:720px;}
[dir="rtl"] .prose, [dir="rtl"] .article{line-height:var(--x-lh-ar); letter-spacing:0;}
[dir="ltr"] .prose, [dir="ltr"] .article{line-height:var(--x-lh-en);}
.prose p{color:var(--fg-2); font-size:var(--fs-body); margin:0 0 var(--sp-4);}
.prose h2{font-family:var(--font-display); color:var(--fg-1); font-size:var(--fs-h2); margin-block:var(--sp-7) var(--sp-3);}
.prose h3{font-family:var(--font-display); color:var(--fg-1); font-size:var(--fs-h3); margin-block:var(--sp-6) var(--sp-2);}
[dir="rtl"] .prose h2, [dir="rtl"] .prose h3{font-family:var(--font-display-ar);}
.prose ul, .prose ol{list-style:disc; padding-inline-start:1.5em; margin-block:var(--sp-4); color:var(--fg-2);}
.prose ol{list-style:decimal;}
.prose li + li{margin-block-start:var(--sp-2);}
.prose a{color:var(--fg-link); text-decoration:underline; text-underline-offset:3px;}
.prose strong{color:var(--fg-1);}
.prose img{border-radius:var(--radius-lg); margin:var(--sp-4) 0;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center;}
.checklist{display:grid; gap:12px; margin:var(--sp-4) 0 0;}
.checklist li{display:flex; gap:10px; align-items:flex-start; color:var(--fg-1); font-size:var(--fs-body-sm);}
.checklist .i{width:20px; height:20px; color:var(--fg-accent); flex-shrink:0; margin-top:2px;}

/* team + credentials */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);}
.member{padding:var(--sp-5);}
.member .avatar{aspect-ratio:1; border-radius:var(--radius-md); overflow:hidden; margin-bottom:12px;}
.member .name{font-family:var(--font-display); font-weight:600; color:var(--fg-1);}
[dir="rtl"] .member .name{font-family:var(--font-display-ar);}
.member .role{font-size:13px; color:var(--fg-accent);}
.cred-row{display:flex; flex-wrap:wrap; gap:var(--sp-4);}
.cred{display:flex; align-items:center; gap:10px; padding:15px 18px; font-size:var(--fs-body-sm); color:var(--fg-1); border-radius:var(--radius-md);}
.cred .i{width:20px; height:20px; color:var(--fg-accent);}
.logo-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.logo-strip .cred{justify-content:center; color:var(--fg-2); font-family:var(--font-display-ar); font-weight:600; min-height:66px;}

/* ---------- Portfolio ---------- */
.filter{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:var(--sp-6);}
.chip{font-family:var(--font-display); font-size:13px; font-weight:500; padding:8px 16px; border-radius:var(--radius-pill); border:1px solid var(--border-default); background:var(--surface-raised); color:var(--fg-1); cursor:pointer; transition:background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);}
[dir="rtl"] .chip{font-family:var(--font-display-ar);}
.chip:hover{border-color:var(--border-strong);}
.chip.active{background:var(--brand-navy-600); color:var(--neutral-0); border-color:var(--brand-navy-600);}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.tile{position:relative; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; display:block; box-shadow:var(--shadow-inset); transition:box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);}
.tile:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.tile .photo{min-height:100%;}
.tile .meta{position:absolute; inset-inline:0; bottom:0; z-index:3; padding:var(--sp-4); background:var(--x-overlay-hero); backdrop-filter:none; color:var(--fg-on-dark-1);}
.tile .meta .t{font-family:var(--font-display); font-weight:600; font-size:16px;}
[dir="rtl"] .tile .meta .t{font-family:var(--font-display-ar);}
.tile .meta .s{font-size:12px; color:var(--fg-on-dark-2); margin-top:2px;}
.tile .badge{position:absolute; top:12px; inset-inline-start:12px; z-index:3; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:var(--brand-amber-500); color:var(--brand-midnight); padding:4px 8px; border-radius:var(--radius-sm);}

/* design library */
.model-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.model{overflow:hidden; transition:box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);}
.model:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.model .thumb{aspect-ratio:4/3;}
.model .b{padding:16px; display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid var(--border-subtle);}
.model .b .t{font-family:var(--font-display); font-weight:600; color:var(--fg-1);}
[dir="rtl"] .model .b .t{font-family:var(--font-display-ar);}
.model .b .x{font-family:var(--font-mono); font-size:12px; color:var(--fg-accent);}

/* detail pages */
.spec-table{width:100%; border-collapse:collapse;}
.spec-table th, .spec-table td{text-align:start; padding:12px 0; border-bottom:1px solid var(--border-default); font-size:var(--fs-body-sm); color:var(--fg-1);}
.spec-table th{font-family:var(--font-display); color:var(--fg-3); font-weight:500; width:40%;}
[dir="rtl"] .spec-table th{font-family:var(--font-display-ar);}
.gallery-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.gallery-strip .figure{aspect-ratio:1;}
.cover-figure{aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-inset); margin-bottom:var(--sp-6);}
.cover-figure img{width:100%; height:100%; object-fit:cover;}
.article-meta{display:flex; gap:14px; align-items:center; font-family:var(--font-mono); font-size:12px; color:var(--fg-on-dark-3); margin-top:12px;}

/* ---------- Knowledge / articles ---------- */
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);}
.article{display:flex; flex-direction:column; height:100%; overflow:hidden; transition:box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);}
.article:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.article .thumb{aspect-ratio:16/9; overflow:hidden;}
.article .body{padding:var(--sp-5); display:flex; flex-direction:column; gap:8px; flex:1;}
.article .tag{font-family:var(--font-display); font-size:11px; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--fg-accent);}
[dir="rtl"] .article .tag{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0;}
.article h3{font-family:var(--font-display); font-size:var(--fs-h4); color:var(--fg-1); margin:0; line-height:1.35;}
[dir="rtl"] .article h3{font-family:var(--font-display-ar);}
.article p{font-size:var(--fs-body-sm); color:var(--fg-2); margin:0;}
.article .date{font-family:var(--font-mono); font-size:11px; color:var(--fg-3); margin-top:auto;}

/* free tools */
.tool-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.tool-card{display:flex; flex-direction:column; gap:12px; padding:var(--sp-5); height:100%; transition:box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);}
.tool-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.tool-card .ico{width:48px; height:48px; border-radius:var(--radius-md); background:var(--brand-amber-50); color:var(--brand-amber-800); display:inline-flex; align-items:center; justify-content:center;}
.tool-card .ico .i{width:24px; height:24px;}
.tool-card h3{font-family:var(--font-display); font-size:var(--fs-h4); color:var(--fg-1); margin:0;}
[dir="rtl"] .tool-card h3{font-family:var(--font-display-ar);}
.tool-card p{font-size:var(--fs-body-sm); color:var(--fg-2); margin:0; flex:1;}
.badge-soon{align-self:flex-start; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:var(--surface-sunken); color:var(--fg-2); padding:4px 8px; border-radius:var(--radius-sm); border:1px solid var(--border-default);}

.calc{padding:var(--sp-6); max-width:520px;}
.calc .row{display:grid; grid-template-columns:1fr 120px; gap:12px; align-items:center; margin-bottom:12px;}
.calc label{font-size:var(--fs-body-sm); color:var(--fg-1); font-weight:500;}
.calc input{padding:9px 12px; border:1px solid var(--border-default); border-radius:var(--radius-md); font-family:var(--font-mono); text-align:end; background:var(--neutral-0); color:var(--fg-1);}
.calc .out{margin-top:14px; padding-top:14px; border-top:1px solid var(--border-default); display:flex; justify-content:space-between; align-items:baseline;}
.calc .out .v{font-family:var(--font-display); font-weight:700; font-size:28px; color:var(--fg-1);}
.calc .out .v small{font-size:14px; color:var(--fg-3); font-weight:500;}

/* ---------- Forms ---------- */
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-7); align-items:start;}
.form{display:grid; gap:var(--sp-4);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);}
.field{display:grid; gap:6px;}
.field label{font-family:var(--font-display); font-weight:500; font-size:13px; color:var(--fg-2);}
[dir="rtl"] .field label{font-family:var(--font-display-ar); font-size:15px;}
.field input, .field select, .field textarea{font-family:var(--font-body); font-size:15px; padding:11px 13px; border:1px solid var(--border-default); border-radius:var(--radius-md); background:var(--neutral-0); color:var(--fg-1); width:100%; transition:border-color var(--dur-base) var(--ease-standard);}
.field input::placeholder, .field textarea::placeholder{color:var(--fg-3);}
.field textarea{min-height:130px; resize:vertical;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--brand-amber-500);}
.info-card{padding:var(--sp-6); background:var(--surface-inverse); color:var(--fg-on-dark-1); box-shadow:none;}
.info-card h3{font-family:var(--font-display); color:var(--fg-on-dark-1); margin:0 0 var(--sp-5);}
[dir="rtl"] .info-card h3{font-family:var(--font-display-ar);}
.info-row{display:flex; gap:14px; align-items:flex-start; margin-bottom:var(--sp-4);}
.info-row .ico{flex-shrink:0; width:42px; height:42px; border-radius:var(--radius-md); background:rgba(255,255,255,.08); color:var(--fg-on-dark-accent); display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-inverse);}
.info-row .ico .i{width:20px; height:20px;}
.info-row .t{font-weight:600; color:var(--fg-on-dark-1); font-size:15px;}
.info-row .s{color:var(--fg-on-dark-2); font-size:var(--fs-body-sm);}
.map-embed{aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-inset); margin-top:var(--sp-6);}

/* ---------- CTA band ---------- */
.cta-band{position:relative; background:var(--surface-inverse); color:var(--fg-on-dark-1); border-radius:var(--radius-lg); padding:var(--sp-8); text-align:center; overflow:hidden;}
.cta-band__grid{position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px;}
.cta-band > *{position:relative; z-index:2;}
.cta-band h2{font-family:var(--font-display); color:var(--fg-on-dark-1); margin:0 0 12px; font-size:var(--fs-h2);}
[dir="rtl"] .cta-band h2{font-family:var(--font-display-ar);}
.cta-band p{color:var(--fg-on-dark-2); margin:0 auto var(--sp-5); max-width:540px;}
.cta-band .row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* ---------- Portal cards ---------- */
.portal-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.portal-card{position:relative; display:block; background:var(--surface-inverse); color:var(--fg-on-dark-1); border-radius:var(--radius-lg); border-inline-start:var(--x-rule-amber); padding:var(--sp-6); overflow:hidden; transition:box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);}
.portal-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.portal-card__grid{position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:40px 40px;}
.portal-card > *{position:relative; z-index:2;}
.portal-card .eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-on-dark-accent); display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;}
.portal-card .eyebrow .i{width:18px; height:18px;}
.portal-card h3{font-family:var(--font-display-ar); font-size:var(--fs-h3); color:var(--fg-on-dark-1); margin:0 0 8px;}
.portal-card p{font-size:var(--fs-body-sm); color:var(--fg-on-dark-2); margin:0 0 18px; max-width:340px;}
.portal-card .go{font-family:var(--font-display-ar); font-size:14px; font-weight:600; color:var(--fg-on-dark-accent); display:inline-flex; align-items:center; gap:8px;}
.portal-card .go .i{width:18px; height:18px;}
.portal-card .tag{position:absolute; top:16px; inset-inline-end:16px; z-index:3; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:var(--radius-sm);}
.portal-card .tag--live{background:var(--brand-amber-500); color:var(--brand-midnight);}
.portal-card .tag--soon{background:rgba(255,255,255,.12); color:var(--fg-on-dark-2); border:1px solid var(--border-inverse);}

/* ---------- Footer ---------- */
.app-footer{background:var(--surface-deepest); color:var(--fg-on-dark-2); padding:var(--sp-8) 0 var(--sp-6);}
.app-footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:var(--sp-6);}
.app-footer .flogo{height:56px; width:auto; margin-bottom:16px;}
.app-footer .fdesc{font-size:var(--fs-body-sm); color:var(--fg-on-dark-2); max-width:320px;}
.app-footer h5{font-family:var(--font-display); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:var(--ls-eyebrow); color:var(--fg-on-dark-accent); margin:0 0 14px;}
[dir="rtl"] .app-footer h5{font-family:var(--font-display-ar); text-transform:none; letter-spacing:0; font-size:15px;}
.app-footer ul{display:flex; flex-direction:column; gap:10px;}
.app-footer a{color:var(--fg-on-dark-2); font-size:var(--fs-body-sm); transition:color var(--dur-base) var(--ease-standard);}
.app-footer a:hover{color:var(--fg-on-dark-accent);}
.social{display:flex; gap:8px; margin-top:14px;}
.social a{width:38px; height:38px; border-radius:var(--radius-md); display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-inverse); color:var(--fg-on-dark-2);}
.social a:hover{color:var(--fg-on-dark-accent); border-color:var(--brand-amber-500);}
.social .i{width:18px; height:18px;}
.app-footer__bottom{display:flex; justify-content:space-between; align-items:center; margin-top:var(--sp-7); padding-top:var(--sp-5); border-top:1px solid var(--border-inverse); font-family:var(--font-mono); font-size:12px; color:var(--fg-on-dark-3); gap:12px; flex-wrap:wrap;}
[dir="rtl"] .app-footer__bottom{font-family:var(--font-display-ar);}

.wa-float{position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:60; width:54px; height:54px; border-radius:50%; background:#1F7A55; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);}
.wa-float:hover{background:#175F42;}
.wa-float .i{width:26px; height:26px;}

/* ---------- Motion ---------- */
/* Entrance motion is ADDITIVE ONLY.
   Nothing is ever hidden by CSS: an element with no .in class renders normally.
   Adding .in simply plays a short entrance animation. An earlier version hid
   content by default and revealed it with JS — when the observer missed
   elements the page rendered completely blank, so this must not regress. */
@keyframes osussReveal{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
@keyframes osussRevealLeft{from{opacity:0; transform:translateX(-22px);} to{opacity:1; transform:none;}}
@keyframes osussRevealRight{from{opacity:0; transform:translateX(22px);} to{opacity:1; transform:none;}}
@keyframes osussRevealZoom{from{opacity:0; transform:scale(.97);} to{opacity:1; transform:none;}}
.js-motion [data-reveal].in, .js-motion .reveal.in{animation:osussReveal .6s var(--ease-standard) both;}
.js-motion [data-reveal="left"].in{animation-name:osussRevealLeft;}
.js-motion [data-reveal="right"].in{animation-name:osussRevealRight;}
.js-motion [data-reveal="zoom"].in{animation-name:osussRevealZoom;}
.js-motion [data-stagger].in > *{animation:osussReveal .55s var(--ease-standard) both;}
.js-motion [data-stagger].in > *:nth-child(1){animation-delay:.05s}
.js-motion [data-stagger].in > *:nth-child(2){animation-delay:.12s}
.js-motion [data-stagger].in > *:nth-child(3){animation-delay:.19s}
.js-motion [data-stagger].in > *:nth-child(4){animation-delay:.26s}
.js-motion [data-stagger].in > *:nth-child(5){animation-delay:.33s}
.js-motion [data-stagger].in > *:nth-child(6){animation-delay:.40s}
.app-nav a{position:relative;}
.app-nav a::after{content:""; position:absolute; inset-inline-start:0; bottom:-2px; height:2px; width:0; background:var(--brand-amber-500); transition:width var(--dur-slow) var(--ease-standard);}
.app-nav a:hover::after{width:100%;}

/* bilingual long-form blocks */
html[lang="ar"] [data-only="en"], html[lang="en"] [data-only="ar"]{display:none;}

/* ---------- Responsive ---------- */
@media (max-width:1140px) and (min-width:981px){ .btn--login .txt{display:none;} }
@media (max-width:980px){
  .hero__inner, [dir="rtl"] .hero__inner{grid-template-columns:1fr;}
  .svc-grid, .article-grid, .tool-grid, .model-grid, .gallery, .why-grid{grid-template-columns:1fr 1fr;}
  .hero__index{grid-template-columns:1fr 1fr;}
  .hero__index a:nth-child(odd){border-inline-start:0;}
  .portal-grid{grid-template-columns:1fr;}
  .logo-strip{grid-template-columns:repeat(3,1fr);}
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .stats__grid{grid-template-columns:repeat(2,1fr);}
  .app-footer__grid{grid-template-columns:1fr 1fr;}
  .split, .contact-grid{grid-template-columns:1fr;}
  .app-nav{display:none; position:absolute; top:74px; inset-inline:0; flex-direction:column; align-items:stretch; gap:0; background:var(--surface-raised); border-bottom:1px solid var(--border-default); padding:8px var(--gutter); margin:0;}
  .app-nav.open{display:flex;}
  .app-nav a{padding:13px 0; border-bottom:1px solid var(--border-subtle);}
  .nav-toggle{display:inline-flex; margin-inline-start:auto;}
}
@media (max-width:560px){
  .svc-grid, .article-grid, .tool-grid, .model-grid, .gallery, .why-grid, .team-grid,
  .stats__grid, .app-footer__grid, .form-row, .gallery-strip, .hero__index{grid-template-columns:1fr;}
  .hero__index a{border-inline-start:0; border-top:1px solid var(--border-subtle);}
  .hero__index a:first-child{border-top:0;}
  .logo-strip{grid-template-columns:1fr 1fr;}
  .lang-toggle{display:none;}
  .app-actions .btn--primary .txt{display:none;}
  .vhero__scroll{display:none;}
}

/* [7] a media query cannot live in a custom property */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important; scroll-behavior:auto !important;
  }
  .vhero video{display:none;}
}

/* ---------- Showcase film (click-to-play, carries its own audio) ---------- */
.showcase{margin:var(--sp-6) auto 0; max-width:960px; padding:0;}
.showcase__video{width:100%; aspect-ratio:16/9; display:block; background:var(--brand-navy-600);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md); object-fit:cover;}
.showcase__cap{margin-top:12px; text-align:center; font-family:var(--font-mono);
  font-size:12px; letter-spacing:.06em; color:var(--fg-3);}
[dir="rtl"] .showcase__cap{font-family:var(--font-display-ar); letter-spacing:0; font-size:14px;}