/* ==========================================================================
   NEWTECX — corporate design system (standalone preview)
   Built on the original NEW website's palette, type scale, easing and
   reveal choreography. Bilingual EN/AR: every directional rule uses
   logical properties so RTL needs no mirrored copies.
   ========================================================================== */

:root{
  --navy:#0E1B33; --navy-deep:#0A1426; --navy-soft:#16264a;
  --blue:#2A6BFF; --blue-bright:#3b7bff; --blue-soft:#8fb6ff; --blue-ghost:rgba(42,107,255,.08);
  --cta:#3563D9; --cta-hover:#2F59C7;
  --red:#E0312E;
  --light:#F4F6FA; --paper:#FFFFFF; --paper-2:#FBFCFE;
  --ink:#0E1B33; --muted:#5B647A; --faint:#8b94a8;
  --line:rgba(14,27,51,.10); --line-2:rgba(14,27,51,.07); --line-strong:rgba(14,27,51,.16);
  --line-dark:rgba(140,175,255,.14); --text-dark:rgba(215,228,252,.72); --text-dark-2:rgba(215,228,252,.56);

  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-ar:'IBM Plex Sans Arabic','Manrope',system-ui,'Segoe UI',sans-serif;

  --maxw:1240px; --gutter:40px; --header-h:76px;
  --radius:18px; --radius-lg:26px; --radius-sm:12px;
  --shadow-sm:0 2px 10px -4px rgba(14,27,51,.16);
  --shadow:0 24px 60px -28px rgba(14,27,51,.32);
  --shadow-lg:0 50px 100px -40px rgba(14,27,51,.45);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); font-size:17.5px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;}
html[dir="rtl"] body{font-family:var(--font-ar); font-size:17px;}
html.i18n-pending body{visibility:hidden;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4,p,figure,ul,ol{margin:0;}
ul,ol{padding:0; list-style:none;}
h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;}
button,input,select,textarea{font:inherit; color:inherit;}
button{cursor:pointer;}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px;}
.skip{position:absolute; inset-inline-start:12px; top:-60px; z-index:500; background:var(--navy); color:#fff; padding:10px 16px; border-radius:10px; font-weight:700; transition:top .2s;}
.skip:focus{top:12px;}
.ltr{direction:ltr; unicode-bidi:isolate;}

/* ---------- type ---------- */
.kicker{display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--blue);}
.kicker::before{content:""; width:26px; height:2px; background:currentColor; opacity:.9;}
.on-dark .kicker, .kicker.on-dark{color:var(--blue-soft);}
.eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(200,216,255,.74);}
.sq{width:9px; height:9px; flex:none; background:var(--red); display:inline-block;}
html[dir="rtl"] .kicker, html[dir="rtl"] .eyebrow{letter-spacing:.02em;}
.display{font-size:clamp(38px,5vw,68px); font-weight:800; line-height:1.03; letter-spacing:-.035em;}
.h1{font-size:clamp(34px,4.4vw,58px); font-weight:800; line-height:1.06; letter-spacing:-.03em;}
.h2{font-size:clamp(28px,3.3vw,44px); font-weight:800; line-height:1.1; letter-spacing:-.025em;}
.h3{font-size:clamp(20px,1.7vw,25px); font-weight:700; line-height:1.25; letter-spacing:-.01em;}
.lead{font-size:clamp(17px,1.45vw,21px); line-height:1.6; color:var(--muted);}
html[dir="rtl"] .display, html[dir="rtl"] .h1, html[dir="rtl"] .h2, html[dir="rtl"] .h3{letter-spacing:0; line-height:1.25;}
html[dir="rtl"] .display, html[dir="rtl"] .h1, html[dir="rtl"] .h2{font-weight:700;}
.muted{color:var(--muted);}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);}
.section{padding-block:clamp(72px,9vw,128px); position:relative;}
.section-sm{padding-block:clamp(52px,6vw,84px); position:relative;}
.bg-navy{background:var(--navy); color:#fff; position:relative; overflow:hidden;}
.bg-deep{background:var(--navy-deep); color:#fff; position:relative; overflow:hidden;}
.bg-light{background:var(--light);}
.bg-white{background:#fff;}
.bt{border-top:1px solid var(--line);}
.bg-navy .lead, .bg-deep .lead{color:var(--text-dark);}
.bg-navy .h1, .bg-navy .h2, .bg-navy .h3, .bg-deep .h2{color:#fff;}
.glow{position:absolute; inset:0; pointer-events:none; background:radial-gradient(900px 560px at 80% 0%, rgba(42,107,255,.22), transparent 62%), radial-gradient(680px 520px at 6% 100%, rgba(42,107,255,.12), transparent 60%);}
.dotgrid{position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.07) 1.4px, transparent 1.4px); background-size:34px 34px; -webkit-mask-image:linear-gradient(to bottom, #000, transparent 85%); mask-image:linear-gradient(to bottom, #000, transparent 85%);}
.rel{position:relative;}
.head{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,80px); align-items:end;}
.head .h2{margin-top:16px;}
.head-stack .h2{margin-top:16px;} .head-stack .lead{margin-top:18px; max-width:720px;}
.mt-l{margin-top:clamp(44px,5vw,64px);} .mt-m{margin-top:32px;} .mt-s{margin-top:18px;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:center;}
.split > *{min-width:0;}
.split.wide-l{grid-template-columns:1.12fr .88fr;} .split.wide-r{grid-template-columns:.9fr 1.1fr;}
.split.top{align-items:start;}
.links{display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:30px;}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:16px; line-height:1; padding:15px 26px; border-radius:999px; border:1px solid transparent; white-space:nowrap; transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s, color .2s;}
.btn svg{width:18px; height:18px; transition:transform .25s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
html[dir="rtl"] .btn svg{transform:scaleX(-1);}
html[dir="rtl"] .btn:hover svg{transform:scaleX(-1) translateX(4px);}
.btn-primary{background:var(--cta); color:#fff; box-shadow:0 8px 18px -10px rgba(47,89,199,.5);}
.btn-primary:hover{background:var(--cta-hover); transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(47,89,199,.55);}
.btn-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.3);}
.btn-light:hover{border-color:#fff; background:rgba(255,255,255,.07); transform:translateY(-2px);}
.btn-line{background:transparent; color:var(--navy); border-color:var(--line-strong);}
.btn-line:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-ghost); transform:translateY(-2px);}
.btn-lg{padding:18px 32px; font-size:17px;}
.btns{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px;}
.textlink{display:inline-flex; align-items:center; gap:8px; color:var(--blue); font-weight:700; font-size:15.5px; white-space:nowrap; padding-bottom:3px; border-bottom:2px solid transparent; transition:border-color .25s var(--ease);}
.textlink:hover{border-bottom-color:currentColor;}
.textlink::after{content:"\2192"; display:inline-block; transition:transform .25s var(--ease);}
.textlink:hover::after{transform:translateX(4px);}
html[dir="rtl"] .textlink::after{content:"\2190";}
html[dir="rtl"] .textlink:hover::after{transform:translateX(-4px);}
.bg-navy .textlink, .bg-deep .textlink, .on-dark .textlink{color:var(--blue-soft);}

/* ---------- reveal choreography (original NEW website timings) ---------- */
/* Entrance uses opacity + the independent translate property, so it never collides with a
   component's own hover transform; the stagger delay (--rd) applies to the entrance only,
   so hover and focus transitions stay immediate. Entrances start just before an element
   scrolls in (see the observer in newtecx.js) and are short, so content is already settling
   as it arrives. The homepage hero keeps its original, slower sequence (--rv-* below).
   Hover/press transitions share one 0.3s timing (--hover). */
:root{--rv-dur:.6s; --rv-y:16px; --hover:.3s;}
.reveal{opacity:0; translate:0 var(--rv-y);}
.reveal.reveal{transition:opacity var(--rv-dur) var(--ease) var(--rd,0s), translate var(--rv-dur) var(--ease) var(--rd,0s), transform var(--hover) var(--ease), box-shadow var(--hover) var(--ease), background-color var(--hover) var(--ease), border-color var(--hover) var(--ease), padding var(--hover) var(--ease), color .25s ease;}
.reveal.in{opacity:1; translate:none;}
.d1{--rd:.06s;} .d2{--rd:.12s;} .d3{--rd:.18s;} .d4{--rd:.24s;}
.hm-hero{--rv-dur:.75s; --rv-y:24px;}
.hm-hero .d1{--rd:.08s;} .hm-hero .d2{--rd:.16s;} .hm-hero .d3{--rd:.24s;} .hm-hero .d4{--rd:.32s;}
/* grouped entrance: one trigger per grid, children cascade 55ms apart */
.stagger.stagger > *{opacity:0; translate:0 12px; transition:opacity .55s var(--ease) calc(var(--si,0) * 55ms + .04s), translate .55s var(--ease) calc(var(--si,0) * 55ms + .04s), transform var(--hover) var(--ease), box-shadow var(--hover) var(--ease), background-color var(--hover) var(--ease), border-color var(--hover) var(--ease), color .25s ease;}
.stagger.in > *{opacity:1; translate:none;}
.no-js .reveal, .no-js .stagger > *{opacity:1; translate:none;}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;}
.site-header.scrolled{border-bottom-color:var(--line); box-shadow:0 6px 24px -16px rgba(14,27,51,.4);}
.nav{display:flex; align-items:center; gap:16px; height:var(--header-h);}
.brand{flex:none;}
.brand img{height:30px; width:auto;}
.nav-links{display:flex; align-items:center; gap:4px; margin-inline-start:10px;}
.nav-links > a, .nav-trigger{display:inline-flex; align-items:center; gap:6px; padding:10px 11px; border-radius:10px; font-size:15.5px; font-weight:700; color:var(--ink); background:none; border:0; white-space:nowrap; transition:background .2s, color .2s;}
.nav-links > a:hover, .nav-trigger:hover, .nav-links > a[aria-current="page"], .has-drop.current .nav-trigger{color:var(--blue); background:var(--blue-ghost);}
.nav-trigger svg{width:13px; height:13px; transition:transform .25s var(--ease);}
/* header menus — the original NEW website's comfort (light-blue icon tiles, roomy rows, soft
   hover backgrounds) on the corporate preview's structure: What We Do, Products, Industries,
   Company. Open state is .open (newtecx.js adds a short close grace period) or :hover; the
   ::after bridge spans the gap between trigger and panel. */
.has-drop{position:relative;}
.has-drop::after{content:""; position:absolute; top:100%; inset-inline:0; height:18px; display:none;}
.has-drop:hover::after, .has-drop.open::after{display:block;}
.drop{position:absolute; top:calc(100% + 10px); inset-inline-start:0; width:260px; max-width:calc(100vw - 32px); max-height:calc(100vh - var(--header-h) - 28px); overflow-y:auto; overscroll-behavior:contain; padding:12px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s; z-index:120;}
.has-drop:hover .drop, .has-drop.open .drop{opacity:1; visibility:visible; transform:none; transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;}
.has-drop:hover .nav-trigger svg, .has-drop.open .nav-trigger svg{transform:rotate(180deg);}
.drop-body{display:grid; gap:8px;}
.drop-col{display:flex; flex-direction:column; min-width:0;}
.drop-col + .drop-col{padding-inline-start:10px; border-inline-start:1px solid var(--line-2);}
.drop-h{margin:4px 12px 6px; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);}
html[dir="rtl"] .drop-h{letter-spacing:0; font-size:12.5px;}
.drop-list{display:grid; gap:2px;}
.drop-list.two{grid-template-columns:1fr 1fr; column-gap:6px;}
.drop-list > a{display:flex; align-items:center; gap:12px; min-width:0; padding:9px 10px; border-radius:12px; color:var(--ink); transition:background-color .18s ease, color .18s ease;}
.drop-list > a:hover, .drop-list > a:focus-visible{background:var(--light);}
.drop-list > a:hover .dt, .drop-list > a:focus-visible .dt{color:var(--blue);}
.drop-list > a[aria-current="page"]{background:var(--light);}
.drop-list > a[aria-current="page"] .dt{color:var(--blue);}
.drop a:focus-visible{outline:2px solid var(--blue); outline-offset:-2px;}
/* icon tiles: a fixed light-blue square (the original's .di), so states never shift text */
.drop .li{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:10px; background:var(--blue-ghost); color:var(--blue); transition:background-color .18s ease, color .18s ease;}
.drop .li svg{width:18px; height:18px;}
.drop-list > a:hover .li, .drop-list > a:focus-visible .li, .drop-list > a[aria-current="page"] .li{background:var(--blue); color:#fff;}
.drop .lt{display:flex; flex-direction:column; gap:3px; min-width:0;}
.drop .dt{display:block; font-size:15px; font-weight:600; line-height:1.3; color:var(--ink); transition:color .18s ease; overflow-wrap:anywhere;}
.drop .dd{display:block; font-size:13px; line-height:1.35; color:var(--muted); overflow-wrap:anywhere;}
html[dir="rtl"] .drop .dt, html[dir="rtl"] .drop .dd{line-height:1.5;}
.drop-more{display:inline-flex; align-items:center; gap:7px; align-self:flex-start; margin-top:6px; padding:8px 12px; border-radius:10px; font-size:14px; font-weight:700; color:var(--blue); transition:background-color .18s ease;}
.drop-more:hover{background:var(--blue-ghost);}
.drop-more .arr{width:15px; height:15px; transition:transform .25s var(--ease);}
.drop-more:hover .arr{transform:translateX(3px);}
html[dir="rtl"] .drop-more .arr{transform:scaleX(-1);}
html[dir="rtl"] .drop-more:hover .arr{transform:scaleX(-1) translateX(3px);}
/* per-menu sizes */
.drop-whatwedo{width:540px;} /* the original NEW website's What We Do: four categories, 2 × 2 */
/* What We Do: the original NEW website's tiles — 38px icon tile, title, one-line description */
.drop-whatwedo .li, .drop-company .li{width:38px; height:38px;}
.drop-whatwedo .li svg, .drop-company .li svg{width:20px; height:20px;}
/* What We Do + Company: the original NEW website's dropdown (sanad-site.css .drop / .di / .dt / .dd),
   on the Products menu's spacing (12px panel padding, 2px between rows, 12px icon gap; 10px row
   padding for the taller 38px tiles), 15px bold titles over 13px one-to-two-line descriptions;
   a row lightens on hover while its icon tile stays light blue; the current page's title is blue */
.drop-whatwedo, .drop-company{padding:12px;}
.drop-whatwedo .drop-list, .drop-company .drop-list{gap:2px;}
.drop-whatwedo .drop-list > a, .drop-company .drop-list > a{align-items:flex-start; gap:12px; padding:10px;}
.drop-whatwedo .dt, .drop-company .dt{font-weight:700; line-height:1.2;}
.drop-whatwedo .dd, .drop-company .dd{line-height:1.3; margin-top:3px;}
html[dir="rtl"] .drop-whatwedo .dt, html[dir="rtl"] .drop-company .dt{line-height:1.45;}
html[dir="rtl"] .drop-whatwedo .dd, html[dir="rtl"] .drop-company .dd{line-height:1.5; margin-top:2px;}
.drop-whatwedo .drop-list > a:hover .li, .drop-whatwedo .drop-list > a:focus-visible .li, .drop-whatwedo .drop-list > a[aria-current="page"] .li,
.drop-company .drop-list > a:hover .li, .drop-company .drop-list > a:focus-visible .li, .drop-company .drop-list > a[aria-current="page"] .li{background:var(--blue-ghost); color:var(--blue);}
.drop-whatwedo .drop-list > a:hover .dt, .drop-company .drop-list > a:hover .dt{color:var(--ink);}
.drop-whatwedo .drop-list > a[aria-current="page"], .drop-company .drop-list > a[aria-current="page"]{background:none;}
.drop-whatwedo .drop-list > a[aria-current="page"]:hover, .drop-company .drop-list > a[aria-current="page"]:hover{background:var(--light);}
.drop-whatwedo .drop-list > a[aria-current="page"] .dt, .drop-company .drop-list > a[aria-current="page"] .dt{color:var(--blue);}

.drop-products{width:640px;}
.drop-products .drop-body{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:12px;}
.drop-products .drop-feature + .drop-col{padding-inline-start:0; border-inline-start:0;}
.drop-industries{width:500px;}
.drop-industries .li, .drop-products .li{width:30px; height:30px; border-radius:9px;}
.drop-industries .li svg, .drop-products .li svg{width:16px; height:16px;}
.drop-products .drop-list > a{align-items:center; padding-block:6px;}
/* product lines: the Company menu's description style (13px, muted), one line each, tight under the title */
.drop-products .lt{gap:1px;}
.drop-products .dt{line-height:1.25;}
.drop-products .dd{line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
html[dir="rtl"] .drop-products .dt{line-height:1.4;}
html[dir="rtl"] .drop-products .dd{line-height:1.45;}
/* the Sanad panel keeps its own height (logo, line, Explore Sanad, Request a demo stay together)
   instead of stretching to the product list and opening a gap above Explore Sanad */
.drop-products .drop-body{align-items:start;}
.drop-industries .dt{font-size:14.5px;}
.drop-company{width:560px;} /* 20px over the original: "Ecosystem & Partnerships" stays on one line */
/* Products: Sanad as a dark featured panel beside the other products */
.drop-feature{display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:14px; color:#fff;
  background:radial-gradient(340px 220px at 100% 0%, rgba(42,107,255,.34), transparent 70%), linear-gradient(165deg, var(--navy-soft), var(--navy) 60%);}
.drop-feature .df-main{display:flex; flex-direction:column; align-items:flex-start; gap:9px; flex:1; padding:4px; border-radius:10px;}
.drop-feature .df-k{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-soft);}
html[dir="rtl"] .drop-feature .df-k{letter-spacing:0; font-size:12.5px;}
.drop-feature .df-logo{height:36px; width:auto; margin-block:4px 2px;}
.drop-feature .df-n{font-size:16px; font-weight:700; line-height:1.3; color:#fff;}
.drop-feature .df-t{font-size:14px; line-height:1.5; color:rgba(225,235,255,.8);}
html[dir="rtl"] .drop-feature .df-t{line-height:1.65;}
.drop-feature .df-go{display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:6px; font-size:14px; font-weight:700; color:#fff;}
.drop-feature .df-go .arr{width:16px; height:16px; transition:transform .25s var(--ease);}
.drop-feature .df-main:hover .df-go .arr, .drop-feature .df-main:focus-visible .df-go .arr{transform:translateX(4px);}
html[dir="rtl"] .drop-feature .df-go .arr{transform:scaleX(-1);}
html[dir="rtl"] .drop-feature .df-main:hover .df-go .arr, html[dir="rtl"] .drop-feature .df-main:focus-visible .df-go .arr{transform:scaleX(-1) translateX(4px);}
.drop-feature .df-demo{align-self:flex-start; padding:7px 13px; border-radius:999px; border:1px solid rgba(150,185,255,.32); font-size:13px; font-weight:600; color:rgba(230,238,255,.92); transition:background-color .18s ease, border-color .18s ease;}
.drop-feature .df-demo:hover{background:rgba(255,255,255,.08); border-color:rgba(190,212,255,.6);}
.drop-feature a:focus-visible{outline:2px solid var(--blue-soft); outline-offset:2px;}
.nav-spacer{flex:1;}
.nav-actions{display:flex; align-items:center; gap:12px;}
.lang-toggle{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; border:1px solid var(--line-strong); background:none; font-size:14px; font-weight:700; transition:border-color .2s, color .2s, background .2s;}
.lang-toggle:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-ghost);}
.lang-toggle svg{width:15px; height:15px; opacity:.8;}
.lang-toggle .lang-ar{font-family:var(--font-ar);}
.site-header .btn{padding:12px 20px; font-size:15px;}
.burger{display:none; width:44px; height:44px; border:1px solid var(--line-strong); border-radius:12px; background:none; align-items:center; justify-content:center;}
.burger span, .burger span::before, .burger span::after{display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:transform .25s var(--ease), background .2s;}
.burger span::before, .burger span::after{content:""; position:absolute; inset-inline-start:0;}
.burger span::before{top:-6px;} .burger span::after{top:6px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}
.mobile-panel{position:fixed; inset:var(--header-h) 0 0 0; z-index:90; background:#fff; padding:18px var(--gutter) 48px; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;}
.mobile-panel.open{opacity:1; visibility:visible; transform:none;}
.mobile-panel a{display:block; padding:15px 4px; border-bottom:1px solid var(--line-2); font-size:20px; font-weight:700;}
.mobile-panel .sub a{font-size:16px; font-weight:600; color:var(--muted); padding-inline-start:18px;}
.mobile-panel .btn{margin-top:22px; width:100%; border-bottom:0; font-size:17px;}
.mobile-panel .btn-line{border:1px solid var(--line-strong);}
.mobile-panel .btn + .btn{margin-top:10px;}
/* mobile: the same four groups as accordions */
.m-group{border-bottom:1px solid var(--line-2);}
.m-trigger{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:15px 4px; background:none; border:0; font:inherit; font-size:20px; font-weight:700; color:var(--ink); text-align:start; cursor:pointer;}
.m-trigger svg{width:16px; height:16px; flex:none; transition:transform .25s var(--ease);}
.m-trigger[aria-expanded="true"] svg{transform:rotate(180deg);}
.m-group.current > .m-trigger{color:var(--blue);}
.m-trigger:focus-visible{outline:2px solid var(--blue); outline-offset:-2px; border-radius:8px;}
.m-sub{padding:0 0 14px;}
.m-sub:not([hidden]){animation:panelIn .3s var(--ease);}
.mobile-panel .m-sub a{display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:0; font-size:16px; font-weight:600; color:var(--ink);}
.mobile-panel .m-sub a[aria-current="page"]{color:var(--blue);}
.mobile-panel .m-sub .m-all{display:inline-flex; margin-top:6px; padding:8px 4px; font-size:15px; font-weight:700; color:var(--blue);}
.m-sub .li{display:grid; place-items:center; flex:none; width:22px; height:22px; color:var(--blue);}
.m-sub .li svg{width:17px; height:17px; opacity:.85;}
.m-h{margin:12px 4px 4px; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);}
html[dir="rtl"] .m-h{letter-spacing:0; font-size:12.5px;}
@media (prefers-reduced-motion:reduce){
  .drop, .has-drop:hover .drop, .has-drop.open .drop{transition:none; transform:none;}
  .m-sub:not([hidden]){animation:none;}
  .m-trigger svg, .nav-trigger svg{transition:none;}
}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep); color:rgba(255,255,255,.66); padding-block:60px 30px;}
.site-footer a{transition:color .2s;}
.site-footer a:hover{color:#fff;}
.foot-top{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1);}
.foot-brand img{height:28px; width:auto; margin-bottom:18px;}
.foot-brand p{max-width:360px; font-size:14.5px; line-height:1.6;}
.foot-h{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#6f94d6; margin-bottom:16px;}
html[dir="rtl"] .foot-h{letter-spacing:.02em;}
.foot-nav a, .foot-contact a, .foot-contact span{display:block; font-size:15px; font-weight:600; margin-bottom:10px;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; padding-top:26px; font-size:13.5px; color:rgba(255,255,255,.48);}
.foot-social{display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(255,255,255,.05);}
.foot-social svg{width:15px; height:15px;}
.foot-legal{color:rgba(255,255,255,.66); text-decoration:underline; text-decoration-color:rgba(255,255,255,.24); text-underline-offset:3px;}

/* ---------- legal pages (privacy-policy.html, policies.html) ----------
   A contents list beside numbered sections at a reading width; plain type, thin separators, no decoration. */
.legal-grid{display:grid; grid-template-columns:minmax(200px,260px) minmax(0,760px); gap:clamp(40px,6vw,96px); align-items:start;}
.legal-toc{position:sticky; top:calc(var(--header-h) + 28px); padding-inline-end:24px; border-inline-end:1px solid var(--line);}
.legal-toc-h{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:14px;}
html[dir="rtl"] .legal-toc-h{letter-spacing:.02em;}
.legal-toc ol{display:grid; gap:2px;}
.legal-toc a{display:flex; gap:10px; padding:7px 0; font-size:14.5px; font-weight:600; line-height:1.4; color:var(--muted); transition:color .2s;}
.legal-toc a:hover{color:var(--blue);}
.legal-toc .legal-n{font-size:12.5px; padding-top:1px;}
.legal-n{flex:none; font-variant-numeric:tabular-nums; font-weight:700; color:var(--blue);}
.legal{font-size:16px; line-height:1.75; color:var(--muted);}
.legal-group{padding-bottom:22px; margin-bottom:6px; border-bottom:1px solid var(--line);}
.legal-group-t{font-size:clamp(22px,2vw,28px); font-weight:800; letter-spacing:-.02em; line-height:1.25; color:var(--ink);}
.legal-group-n{margin-top:6px; font-size:14px; color:var(--faint);}
.legal-s{padding-block:30px; border-bottom:1px solid var(--line);}
.legal-s:first-child{padding-top:0;}
.legal-s:last-child{border-bottom:0; padding-bottom:0;}
.legal-group + .legal-s{padding-top:24px;}
.legal-s + .legal-group{margin-top:40px;}
.legal-s h2{display:flex; align-items:baseline; gap:14px; font-size:clamp(19px,1.6vw,22px); font-weight:800; letter-spacing:-.015em; line-height:1.3; color:var(--ink); margin-bottom:12px;}
html[dir="rtl"] .legal-s h2{letter-spacing:0;}
.legal-s h2 .legal-n{font-size:14px;}
.legal-s p + p{margin-top:12px;}
.legal-s ul{display:grid; gap:8px; padding-inline-start:22px; list-style:disc;}
.legal-s li::marker{color:var(--blue);}
@media (max-width:900px){
  .legal-grid{grid-template-columns:minmax(0,1fr);}
  .legal-toc{position:static; padding:0 0 22px; border-inline-end:0; border-bottom:1px solid var(--line);}
}

/* ---------- page hero (inner pages) ---------- */
.page-hero{position:relative; overflow:hidden; background:var(--navy); color:#fff; padding-block:clamp(56px,7vw,104px) clamp(64px,8vw,112px);}
.page-hero .hero-img{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; mix-blend-mode:screen; -webkit-mask-image:linear-gradient(to left, #000 20%, transparent 85%); mask-image:linear-gradient(to left, #000 20%, transparent 85%);}
html[dir="rtl"] .page-hero .hero-img{-webkit-mask-image:linear-gradient(to right, #000 20%, transparent 85%); mask-image:linear-gradient(to right, #000 20%, transparent 85%); transform:scaleX(-1);}
.ph-grid{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,90px); align-items:center;}
.ph-grid.solo{grid-template-columns:1fr;}
.ph-grid > *{min-width:0;}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--text-dark-2); margin-bottom:26px;}
.crumbs a{color:var(--text-dark); transition:color .2s;} .crumbs a:hover{color:#fff;}
.crumbs i{font-style:normal; opacity:.5;}
.page-hero .h1{margin-top:20px; max-width:820px;}
.page-hero .lead{margin-top:22px; max-width:640px; color:rgba(228,236,252,.82);}
.ph-aside{position:relative;}
.ph-photo{border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,0,0,.8); aspect-ratio:4/3; border:1px solid rgba(255,255,255,.12);}
.ph-photo img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 1.6s var(--ease);}
.ph-photo.in img, .in .ph-photo img{transform:none;}
.ph-stats{display:grid; gap:0; border-top:1px solid var(--line-dark);}
.ph-stats div{display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:22px 0; border-bottom:1px solid var(--line-dark);}
.ph-stats b{font-size:clamp(40px,4.4vw,60px); font-weight:800; letter-spacing:-.03em; line-height:1; color:#fff;}
.ph-stats span{font-size:15px; font-weight:600; color:var(--text-dark); text-align:end;}
.ph-panel{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); padding:30px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.ph-panel .lbl{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-soft);}
html[dir="rtl"] .ph-panel .lbl{letter-spacing:.02em;}
.ph-panel p{margin-top:12px; font-size:17px; line-height:1.55; color:#fff; font-weight:600;}
.ph-logo{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.ph-logo img{height:46px; width:auto;}

/* ---------- home hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--navy); color:#fff; padding-top:clamp(72px,9vw,128px);}
.hero .glow{background:radial-gradient(900px 600px at 78% 30%, rgba(42,107,255,.26), transparent 62%), radial-gradient(700px 500px at 0% 100%, rgba(42,107,255,.12), transparent 60%);}
.net{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 36%, rgba(0,0,0,.9) 62%, #000 82%); mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 36%, rgba(0,0,0,.9) 62%, #000 82%);}
html[dir="rtl"] .net{-webkit-mask-image:linear-gradient(to left, transparent 0%, rgba(0,0,0,.2) 36%, rgba(0,0,0,.9) 62%, #000 82%); mask-image:linear-gradient(to left, transparent 0%, rgba(0,0,0,.2) 36%, rgba(0,0,0,.9) 62%, #000 82%);}
.net-cap{position:absolute; top:clamp(90px,11vw,150px); inset-inline-end:clamp(40px,8vw,140px); display:flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.16em; color:rgba(170,200,255,.62); transition:opacity .8s ease;}
.net-cap::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 12px rgba(59,123,255,.9);}
html[dir="rtl"] .net-cap{letter-spacing:.02em;}
.hero-in{position:relative; z-index:1;}
.hero .display{margin-top:26px; max-width:830px;}
.hero .lead{margin-top:24px; max-width:640px; color:rgba(228,236,252,.84);}
.hq-line{display:flex; align-items:center; gap:12px; margin-top:30px; font-size:13px; font-weight:700; letter-spacing:.16em; color:rgba(225,235,255,.64);}
html[dir="rtl"] .hq-line{letter-spacing:.02em;}
.proof{position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(56px,7vw,96px); border-top:1px solid var(--line-dark);}
.proof li{padding:26px 24px 30px; border-inline-start:1px solid rgba(140,175,255,.1);}
.proof li:first-child{padding-inline-start:0; border-inline-start:0;}
.proof b{display:block; font-size:clamp(30px,3vw,42px); font-weight:800; line-height:1; letter-spacing:-.02em; color:#fff;}
.proof li > span{display:block; margin-top:10px; font-size:14px; line-height:1.4; color:var(--text-dark);}

/* ---------- home: solutions band ---------- */
.sol-band{background:var(--navy); color:#fff; border-top:1px solid rgba(140,175,255,.1); position:relative; overflow:hidden;}
.sol-band::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(800px 420px at 50% 0%, rgba(42,107,255,.12), transparent 70%);}
.feat{position:relative; display:flex; gap:8px; align-items:stretch;}
.vsep{flex:0 0 1px; width:1px; align-self:stretch; background:linear-gradient(to bottom, transparent, rgba(150,185,255,.28), transparent);}
.feat-i{flex:1; display:flex; flex-direction:column; gap:14px; padding:30px 26px 28px; border-radius:16px; transition:background .35s var(--ease), transform .35s var(--ease);}
.feat-i:hover{background:rgba(60,100,190,.12); transform:translateY(-4px);}
.feat-top{display:flex; align-items:center; justify-content:space-between;}
.feat-ic{width:52px; height:52px; display:grid; place-items:center; color:rgba(170,200,255,.82); transition:color .35s, filter .35s, transform .35s var(--ease);}
.feat-ic svg{width:44px; height:44px;}
.feat-i:hover .feat-ic{color:#fff; transform:scale(1.06); filter:drop-shadow(0 0 12px rgba(90,140,255,.6));}
.num{font-size:13px; font-weight:700; letter-spacing:.14em; color:rgba(150,185,255,.5);}
.feat-i b{font-size:clamp(19px,1.6vw,23px); font-weight:700; line-height:1.25; color:#fff;}
.feat-i .s{font-size:15.5px; line-height:1.55; color:var(--text-dark-2); transition:color .35s;}
.feat-i:hover .s{color:rgba(225,235,255,.9);}
.feat-go{margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; color:var(--blue-soft); opacity:0; transform:translateY(6px); transition:opacity .35s var(--ease), transform .35s var(--ease);}
.feat-go svg{width:16px; height:16px;} html[dir="rtl"] .feat-go svg{transform:scaleX(-1);}
.feat-i:hover .feat-go, .feat-i:focus-visible .feat-go{opacity:1; transform:none;}
.more{position:relative; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px; margin-top:clamp(36px,4vw,52px); padding-top:26px; border-top:1px solid rgba(140,175,255,.12); font-size:16px;}
.more-l{font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(150,185,255,.58); margin-inline-end:10px;}
html[dir="rtl"] .more-l{letter-spacing:.02em;}
.more a{color:rgba(225,235,255,.84); font-weight:600; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;}
.more a:hover{color:#fff; border-bottom-color:rgba(255,255,255,.5);}
.more i{font-style:normal; color:rgba(150,185,255,.35);}
.more .textlink{margin-inline-start:auto; border-bottom-width:2px;}
.bg-light .more-l, .bg-white .more-l, .light .more-l{color:var(--faint);}

/* ---------- partner ledger & badges ---------- */
.ledger{display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);}
.ledger > *{position:relative; padding:34px 30px 32px; border-inline-start:1px solid var(--line-2); transition:background .35s var(--ease);}
.ledger > :first-child{border-inline-start:0;}
.ledger > *::before{content:""; position:absolute; top:0; inset-inline:30px; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease) .3s;}
html[dir="rtl"] .ledger > *::before{transform-origin:right;}
.ledger.in > *::before{transform:scaleX(1);}
.ledger.in > :nth-child(2)::before{transition-delay:.42s;} .ledger.in > :nth-child(3)::before{transition-delay:.54s;} .ledger.in > :nth-child(4)::before{transition-delay:.66s;}
.ledger > *:hover{background:var(--paper-2);}
.mark{height:44px; display:flex; align-items:center; margin-bottom:22px;}
.mark img{height:30px; width:auto;}
.wordmark{font-size:27px; font-weight:800; letter-spacing:-.02em; line-height:1; color:var(--navy);}
html[dir="rtl"] .wordmark{letter-spacing:0;}
.tier{display:inline-flex; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); background:var(--blue-ghost); border-radius:999px; padding:6px 12px;}
html[dir="rtl"] .tier{letter-spacing:.02em;}
.ledger p{margin-top:14px; font-size:15.5px; line-height:1.5; color:var(--muted);}
.ledger .textlink{margin-top:16px;}
.desig{display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,64px); align-items:center; margin-top:22px; padding:30px 34px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);}
.desig-l b{display:block; font-size:clamp(44px,4.4vw,60px); font-weight:800; letter-spacing:-.03em; color:var(--blue); line-height:1;}
.desig-l span{display:block; margin-top:8px; max-width:210px; font-size:14.5px; font-weight:700; line-height:1.35;}
.badges{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.badge{text-align:center;}
.badge img{height:58px; width:auto; margin-inline:auto; transition:transform .35s var(--ease);}
.badge:hover img{transform:translateY(-4px);}
.badge figcaption{margin-top:10px; font-size:12px; line-height:1.3; font-weight:700; color:var(--muted);}
.statement{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:start;}
.statement h3{font-size:clamp(24px,2.4vw,32px); font-weight:800; letter-spacing:-.02em; line-height:1.15;}
html[dir="rtl"] .statement h3{letter-spacing:0; line-height:1.35;}
.statement p{font-size:16.5px; line-height:1.6; color:var(--muted);}
.statement .textlink{margin-top:18px;}

/* ---------- photo, steps, numbered lists ---------- */
.photo{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/5;}
.photo.wide{aspect-ratio:16/9;} .photo.land{aspect-ratio:4/3;}
.photo img{width:100%; height:100%; object-fit:cover; transform:scale(1.07); transition:transform 1.6s var(--ease);}
.photo.in img{transform:none;}
.photo.shade::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(7,16,38,.72), rgba(7,16,38,0) 48%); pointer-events:none;}
.photo figcaption{position:absolute; inset-inline:28px; bottom:26px; z-index:1; color:#fff; font-size:20px; font-weight:700;}
.steps{margin-top:36px; border-top:1px solid var(--line);}
.step{display:grid; grid-template-columns:72px 1fr; gap:6px 18px; padding:24px 0; border-bottom:1px solid var(--line);}
.step .n{position:relative; padding-top:5px; font-size:15px; font-weight:800; letter-spacing:.08em; color:var(--blue);}
.step .n::after{content:""; position:absolute; top:34px; inset-inline-start:0; width:28px; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease) .35s;}
html[dir="rtl"] .step .n::after{transform-origin:right;}
.step.in .n::after{transform:scaleX(1);}
.step h3{font-size:clamp(21px,2vw,26px); font-weight:800; letter-spacing:-.02em;}
.step p{grid-column:2; font-size:16.5px; line-height:1.55; color:var(--muted);}
.numlist{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(28px,4vw,64px); border-top:1px solid var(--line);}
.numlist.three{grid-template-columns:repeat(3,1fr);}
.numlist li{display:grid; grid-template-columns:44px 1fr; gap:4px 14px; padding:26px 0; border-bottom:1px solid var(--line);}
.numlist .n{font-size:13px; font-weight:800; letter-spacing:.1em; color:var(--blue); padding-top:4px;}
.numlist h3{font-size:19px; font-weight:800; line-height:1.3; letter-spacing:-.01em;}
.numlist p{grid-column:2; font-size:15.5px; line-height:1.55; color:var(--muted);}
.numlist.plain li{grid-template-columns:28px 1fr;}
.numlist.plain li > p{grid-column:2; color:var(--ink); font-size:16.5px; font-weight:600;}
.bg-navy .numlist, .bg-deep .numlist{border-top-color:var(--line-dark);}
.bg-navy .numlist li, .bg-deep .numlist li{border-bottom-color:var(--line-dark);}
.bg-navy .numlist h3, .bg-deep .numlist h3{color:#fff;}
.bg-navy .numlist p, .bg-deep .numlist p{color:var(--text-dark);}
.bg-navy .numlist .n, .bg-deep .numlist .n{color:var(--blue-soft);}
.bg-navy .numlist.plain li > p{color:#fff;}
.check{display:grid; gap:14px;}
.check li{display:flex; gap:14px; align-items:flex-start; font-size:16.5px; line-height:1.5;}
.check li::before{content:""; flex:none; width:22px; height:22px; margin-top:2px; border-radius:7px; background:var(--blue-ghost) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A6BFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;}
.bg-navy .check li::before{background-color:rgba(143,182,255,.14);}

/* ---------- differentiators band ---------- */
.diffs{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:clamp(48px,6vw,72px); border-top:1px solid var(--line);}
.diffs > div{padding:28px 28px 6px 0; }
.diffs > div + div{padding-inline-start:28px; border-inline-start:1px solid var(--line);}
.diffs .n{font-size:13px; font-weight:800; letter-spacing:.1em; color:var(--blue);}
.diffs h3{margin-top:12px; font-size:19px; font-weight:800; line-height:1.3;}
.diffs p{margin-top:8px; font-size:15px; line-height:1.55; color:var(--muted);}

/* ---------- customers: tracks, wall, chips ---------- */
.stats-inline{display:flex; gap:clamp(28px,4vw,56px); justify-content:flex-end;}
.stats-inline b{display:block; font-size:clamp(34px,3.6vw,48px); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--blue);}
.stats-inline span{display:block; margin-top:8px; font-size:14px; font-weight:700; color:var(--muted);}
.tracks{display:grid;}
.track-row{display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:center; padding:18px 0; border-top:1px solid var(--line-2);}
.track-row:last-child{border-bottom:1px solid var(--line-2);}
.track-l{display:flex; align-items:baseline; gap:12px;}
.track-l h3{font-size:22px; font-weight:800;}
.count{display:inline-block; font-size:13px; font-weight:800; color:#fff; background:var(--blue); border-radius:999px; padding:5px 12px; line-height:1.2;}
.mq{overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);}
.mq-track{display:flex; align-items:center; gap:clamp(44px,5vw,76px); width:max-content; animation:mq 120s linear infinite;}
.mq.rev .mq-track{animation-name:mq-r;}
html[dir="rtl"] .mq .mq-track{animation-name:mq-r;} html[dir="rtl"] .mq.rev .mq-track{animation-name:mq;}
.mq:hover .mq-track{animation-play-state:paused;}
@keyframes mq{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes mq-r{from{transform:translateX(-50%);} to{transform:translateX(0);}}
.lg{flex:none; display:grid; place-items:center; height:64px;}
.lg img{height:52px; width:auto; max-width:170px; object-fit:contain; transition:transform .3s var(--ease);}
.lg:hover img{transform:scale(1.06);}
.lg.rev{background:var(--navy); border-radius:12px; padding:8px 14px;} .lg.rev img{height:44px;}
.lg.name{max-width:190px; font-size:14px; font-weight:800; line-height:1.25; color:var(--muted); text-align:center;}
.chips{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.chip{display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border:1px solid var(--line-strong); border-radius:999px; font-size:14.5px; font-weight:700; color:var(--ink); background:#fff; transition:border-color .2s, color .2s, background .2s, transform .25s var(--ease);}
a.chip:hover, button.chip:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-ghost); transform:translateY(-2px);}
button.chip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff;}
.bg-navy .chip{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.16); color:#fff;}
.wall-group + .wall-group{margin-top:44px;}
.country-head{display:flex; align-items:center; gap:16px; margin-bottom:22px;}
.country-head h3{font-size:24px; font-weight:800;}
.country-head .rule{flex:1; height:1px; background:var(--line);}
.wall{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.tile{position:relative; display:grid; place-items:center; min-height:170px; padding:26px 22px 44px; background:#fff; transition:background .35s var(--ease);}
.tile img{max-height:78px; max-width:80%; width:auto; object-fit:contain; transition:transform .35s var(--ease);}
.tile.rev img{background:var(--navy); padding:10px 14px; border-radius:10px; max-height:86px;}
.tile .nm{position:absolute; inset-inline:14px; bottom:14px; text-align:center; font-size:12.5px; font-weight:700; line-height:1.3; color:var(--muted); opacity:0; transform:translateY(5px); transition:opacity .3s var(--ease), transform .3s var(--ease);}
.tile.plate .nm{position:static; opacity:1; transform:none; font-size:15px; color:var(--ink);}
.tile:hover{background:#f4f7fd;} .tile:hover img{transform:translateY(-6px) scale(1.03);} .tile:hover .nm{opacity:1; transform:none;}
.tile.is-hidden{display:none;}
.wall-empty{padding:30px; text-align:center; color:var(--muted); background:#fff; border:1px dashed var(--line-strong); border-radius:var(--radius);}

/* ---------- portfolio (home) ---------- */
.portfolio{position:relative; display:grid; grid-template-columns:1fr 1px 1fr 1px 1.25fr; border:1px solid rgba(140,175,255,.16); border-radius:var(--radius-lg); background:rgba(255,255,255,.025);}
.portfolio > .vsep{width:auto;}
.pf{display:flex; flex-direction:column; gap:14px; padding:36px 34px; transition:background .35s var(--ease);}
a.pf:hover{background:rgba(60,100,190,.1);}
.pf-k{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(150,185,255,.66);}
html[dir="rtl"] .pf-k{letter-spacing:.02em;}
.pf-mark{height:46px; display:flex; align-items:center;}
.pf-mark img{height:40px; width:auto; transition:transform .35s var(--ease), filter .35s;}
a.pf:hover .pf-mark img{transform:translateY(-2px); filter:drop-shadow(0 0 12px rgba(90,140,255,.5));}
.pf-name{font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1; color:#fff;}
.pf p{font-size:16px; line-height:1.55; color:var(--text-dark);}
.pf .textlink{margin-top:auto;}
.suite li{padding:13px 0; border-top:1px solid rgba(140,175,255,.12);}
.suite li:first-child{border-top:0; padding-top:2px;}
.suite a{display:block;}
.suite b{display:block; font-size:15.5px; font-weight:700; color:#fff; transition:color .2s;}
.suite a:hover b{color:var(--blue-soft);}
.suite span{display:block; margin-top:3px; font-size:14px; line-height:1.4; color:var(--text-dark-2);}

/* ---------- regional ---------- */
.hqs{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.hq{position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; min-height:260px; padding:clamp(28px,3vw,40px); background:var(--navy); color:#fff; border-radius:var(--radius-lg);}
.hq::before{content:""; position:absolute; inset:-20%; z-index:-1; background:radial-gradient(420px 300px at var(--g,50% 30%), rgba(59,123,255,.36), transparent 66%); transition:transform 1.4s var(--ease);}
.hq:hover::before{transform:scale(1.12) translate(3%,-3%);}
.hq .dotgrid{z-index:-1;}
.geo{align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.12em; color:rgba(170,200,255,.62); direction:ltr; unicode-bidi:isolate;}
.hq h3{margin-top:auto; font-size:clamp(34px,3.4vw,50px); font-weight:800; letter-spacing:-.03em; line-height:1;}
html[dir="rtl"] .hq h3{letter-spacing:0; line-height:1.2;}
.hq p{margin-top:10px; font-size:16px; color:var(--text-dark);}
.hq-tag{align-self:flex-start; margin-top:22px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border:1px solid rgba(255,255,255,.26); border-radius:999px; padding:6px 13px;}
html[dir="rtl"] .hq-tag{letter-spacing:.02em;}
.dc-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; margin-top:18px; padding:24px 30px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);}
.dc{display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:700;}
.dc i{width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px var(--blue-ghost);}
.offices{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.office{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.office:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.office .type{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--blue);}
html[dir="rtl"] .office .type{letter-spacing:.02em;}
.office h3{margin-top:12px; font-size:22px; font-weight:800;}
.office .ctry{display:flex; align-items:center; gap:9px; margin-top:4px; font-size:15px; color:var(--muted);}
.flag{flex:none; display:block; width:24px; height:16px; object-fit:cover; border-radius:2px; box-shadow:0 0 0 1px rgba(14,27,51,.12);}
.hq .flag, .hq-card .flag{box-shadow:0 0 0 1px rgba(255,255,255,.22);}
.hq p.hq-ctry{display:flex; align-items:center; gap:10px;}
.people{margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2); display:grid; gap:10px;}
.people li b{display:block; font-size:15px; font-weight:700;}
.people li a{font-size:14.5px; color:var(--blue); font-weight:600; direction:ltr; unicode-bidi:isolate;}
.office.hq-card{background:var(--navy); color:#fff; border-color:transparent;}
.office.hq-card .ctry{color:var(--text-dark);} .office.hq-card .type{color:var(--blue-soft);}
.office.hq-card .people{border-top-color:var(--line-dark);} .office.hq-card .people a{color:var(--blue-soft);}
.tier-head{display:flex; align-items:center; gap:16px; margin-bottom:22px;}
.tier-head h3{font-size:14px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
html[dir="rtl"] .tier-head h3{letter-spacing:.02em;}
.tier-head .rule{flex:1; height:1px; background:var(--line);}

/* ---------- CTA band ---------- */
.cta-band{position:relative; overflow:hidden; background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:clamp(40px,6vw,76px);}
.cta-grid{position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,5vw,80px); align-items:end;}
.cta-band .h2{margin-top:16px; color:#fff;}
.cta-band .lead{margin-top:16px; color:rgba(255,255,255,.74);}
.contact-list{border-top:1px solid rgba(255,255,255,.12);}
.contact-list a, .contact-list div{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:16px; font-weight:700; color:#fff; transition:color .2s, padding .3s var(--ease);}
.contact-list a:hover{color:var(--blue-soft); padding-inline-start:6px;}
.contact-list .k{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(170,200,255,.62);}
html[dir="rtl"] .contact-list .k{letter-spacing:.02em;}

/* ---------- solutions page ---------- */
.lead-rows{border-top:1px solid var(--line);}
.lead-row{display:grid; grid-template-columns:80px 1.05fr 1fr auto; gap:clamp(18px,3vw,44px); align-items:start; padding:34px 0; border-bottom:1px solid var(--line); transition:background .35s var(--ease), padding .35s var(--ease);}
.lead-row:hover{background:var(--paper-2); padding-inline:18px;}
.lead-row .n{font-size:14px; font-weight:800; letter-spacing:.1em; color:var(--blue); padding-top:6px;}
.lead-row h3{font-size:clamp(22px,2.2vw,29px); font-weight:800; letter-spacing:-.02em; line-height:1.2;}
.lead-row .sum{margin-top:10px; font-size:16px; color:var(--muted); line-height:1.55;}
.solves .k{display:block; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:8px;}
html[dir="rtl"] .solves .k{letter-spacing:.02em;}
.solves p{font-size:16.5px; line-height:1.5; font-weight:600;}
.lead-row .textlink{align-self:center;}
.grid-lines{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-inline-start:1px solid var(--line);}
.grid-lines > *{padding:30px; border-inline-end:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .3s var(--ease);}
a.gl:hover{background:#fff;}
.gl .n{font-size:12.5px; font-weight:800; letter-spacing:.1em; color:var(--blue);}
.gl h3{margin-top:14px; font-size:20px; font-weight:800; line-height:1.25; letter-spacing:-.01em;}
.gl p{margin-top:10px; font-size:15px; line-height:1.55; color:var(--muted);}
.gl .textlink{margin-top:16px; font-size:14.5px;}
.bg-light .grid-lines > *{background:transparent;}
.principle{display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,60px); align-items:center;}
.principle .big{font-size:clamp(84px,10vw,150px); font-weight:800; letter-spacing:-.05em; line-height:.9; color:var(--blue-soft);}
.principle p{font-size:clamp(24px,2.6vw,36px); font-weight:800; line-height:1.25; letter-spacing:-.02em;}
.principle p span{display:block; color:var(--text-dark);}
html[dir="rtl"] .principle p{letter-spacing:0; line-height:1.45;}

/* capability index (tabs) */
.cap-index{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,4vw,56px); align-items:start;}
.cap-tabs{display:grid; border-top:1px solid var(--line-dark);}
.cap-tab{display:flex; align-items:center; gap:16px; width:100%; text-align:start; padding:17px 6px; background:none; border:0; border-bottom:1px solid var(--line-dark); color:var(--text-dark); font-size:17px; font-weight:700; transition:color .25s, padding .3s var(--ease);}
.cap-tab .n{font-size:12.5px; color:rgba(150,185,255,.5); letter-spacing:.1em; min-width:28px;}
.cap-tab:hover{color:#fff; padding-inline-start:12px;}
.cap-tab[aria-selected="true"]{color:#fff; padding-inline-start:12px;}
.cap-tab[aria-selected="true"] .n{color:var(--blue-soft);}
.cap-tab::after{content:""; margin-inline-start:auto; width:8px; height:8px; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 12px rgba(59,123,255,.9); opacity:0; transition:opacity .25s;}
.cap-tab[aria-selected="true"]::after{opacity:1;}
.cap-panel{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); padding:clamp(28px,3vw,40px); animation:panelIn .5s var(--ease);}
@keyframes panelIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.cap-panel .eb{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-soft);}
html[dir="rtl"] .cap-panel .eb{letter-spacing:.02em;}
.cap-panel h3{margin-top:12px; font-size:clamp(24px,2.4vw,32px); font-weight:800; letter-spacing:-.02em; line-height:1.15; color:#fff;}
html[dir="rtl"] .cap-panel h3{letter-spacing:0; line-height:1.35;}
.cap-panel > p{margin-top:14px; font-size:16.5px; line-height:1.6; color:var(--text-dark);}
.cap-items{display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; margin-top:26px;}
.cap-items b{display:block; font-size:15.5px; color:#fff;}
.cap-items span{display:block; margin-top:4px; font-size:14px; line-height:1.5; color:var(--text-dark-2);}
.cap-foot{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);}
.cap-out{margin-top:18px; font-size:15px; line-height:1.55; color:var(--blue-soft); font-weight:600;}

.duo{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.duo > div{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px;}
.duo h3{font-size:22px; font-weight:800;}
.duo p{margin-top:10px; color:var(--muted); font-size:16px;}
.duo .tier{margin-top:14px;}

/* ---------- detail pages ---------- */
.side-meta{display:grid; gap:0; border-top:1px solid var(--line-dark);}
.side-meta div{padding:16px 0; border-bottom:1px solid var(--line-dark);}
.side-meta .k{display:block; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-soft);}
html[dir="rtl"] .side-meta .k{letter-spacing:.02em;}
.side-meta .v{display:block; margin-top:6px; font-size:16px; font-weight:600; color:#fff; line-height:1.45;}
.platforms{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;}
.platform{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.platform:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.platform .vendor{font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--blue);}
html[dir="rtl"] .platform .vendor{letter-spacing:.02em;}
.platform h3{margin-top:10px; font-size:20px; font-weight:800;}
.platform p{margin-top:10px; font-size:15px; line-height:1.55; color:var(--muted);}
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px);}
.rel-col h3{font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:6px;}
html[dir="rtl"] .rel-col h3{letter-spacing:.02em;}
.rel-col a{display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-2); font-weight:700; font-size:16px; transition:color .2s, padding .3s var(--ease);}
.rel-col a::after{content:"\2192"; color:var(--blue);}
html[dir="rtl"] .rel-col a::after{content:"\2190";}
.rel-col a:hover{color:var(--blue); padding-inline-start:6px;}
.mini-logos{display:flex; flex-wrap:wrap; gap:14px; margin-top:22px;}
.mini-logos span{display:grid; place-items:center; height:76px; min-width:130px; padding:12px 18px; background:#fff; border:1px solid var(--line); border-radius:14px;}
.mini-logos img{max-height:50px; max-width:140px; width:auto; object-fit:contain;}
.mini-logos span.rev{background:var(--navy);}
.mini-logos span.plate{font-size:13.5px; font-weight:800; text-align:center; max-width:200px; line-height:1.3;}
.tech-row{display:flex; flex-wrap:wrap; gap:14px;}
.tech{display:grid; place-items:center; gap:10px; width:148px; padding:18px 12px; background:#fff; border:1px solid var(--line); border-radius:16px; text-align:center; transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.tech:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm);}
.tech img{height:42px; width:auto; max-width:110px; object-fit:contain;}
.tech span{font-size:12.5px; font-weight:700; color:var(--muted); line-height:1.3;}
.tech.txt{width:auto; min-width:148px; padding:18px 18px;}
.tech.txt span{font-size:14px; color:var(--ink);}
.purpose{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line);}
.purpose > div{padding:28px 28px 28px 0; border-bottom:1px solid var(--line);}
.purpose > div:not(:nth-child(3n+1)){padding-inline-start:28px; border-inline-start:1px solid var(--line);}
.purpose h3{font-size:19px; font-weight:800;}
.purpose p{margin-top:8px; font-size:15px; color:var(--muted); line-height:1.5;}
.purpose .chips{margin-top:16px;} .purpose .chip{font-size:13px; padding:7px 12px; display:inline-flex; gap:8px;}
.purpose .chip img{height:18px; width:auto;}
.comp-list{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.comp{display:grid; grid-template-columns:96px 1fr; gap:22px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px;}
.comp img{width:96px; height:auto;}
.comp h3{font-size:19px; font-weight:800;}
.comp p{margin-top:8px; font-size:15px; line-height:1.55; color:var(--muted);}
.comp .chips{margin-top:12px;} .comp .chip{font-size:12.5px; padding:6px 11px;}

/* products */
.prod-rows{display:grid; gap:clamp(64px,8vw,112px);}
.prod-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,96px); align-items:center;}
.prod-row:nth-child(even) .prod-media{order:2;}
.prod-media{position:relative; border-radius:var(--radius-lg); background:linear-gradient(160deg, #eef3fb, #f8fafd); border:1px solid var(--line); padding:clamp(18px,3vw,34px); overflow:hidden;}
.prod-media img{width:100%; height:auto; border-radius:12px; transition:transform 1.2s var(--ease);}
.prod-row:hover .prod-media img{transform:scale(1.02);}
.prod-media.dark{background:linear-gradient(160deg, var(--navy), var(--navy-soft)); border-color:transparent;}
.prod-k{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue);}
html[dir="rtl"] .prod-k{letter-spacing:.02em;}
.prod-row h3{margin-top:14px; font-size:clamp(26px,2.8vw,38px); font-weight:800; letter-spacing:-.025em; line-height:1.1;}
html[dir="rtl"] .prod-row h3{letter-spacing:0; line-height:1.35;}
.prod-row .tag{margin-top:10px; font-size:18px; font-weight:700; color:var(--ink);}
.prod-row .desc{margin-top:14px; font-size:16.5px; line-height:1.6; color:var(--muted);}
.prod-row .check{margin-top:22px;}
.prod-row .btns{margin-top:26px;}
.prod-logo{height:44px; width:auto;}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.gallery figure{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm);}
.gallery img{width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform 1s var(--ease);}
.gallery figure:hover img{transform:scale(1.04);}
.gallery.two{grid-template-columns:repeat(2,1fr);}
.gallery.contain img{object-fit:contain; background:linear-gradient(160deg,#eef3fb,#f8fafd); padding:14px;}

/* sanad journey: one Sanad bar under the corporate header on every Sanad page */
.sanad-bar{position:sticky; top:var(--header-h); z-index:80; background:rgba(10,20,38,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.08);}
.sanad-bar .wrap{position:relative; display:flex; align-items:center; gap:22px; height:58px;}
.sanad-bar .sb-home img{height:22px; width:auto;}
.sanad-bar nav{display:flex; align-items:center; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:none;}
.sanad-bar nav::-webkit-scrollbar{display:none;}
.sanad-bar nav > a, .sanad-bar .sb-drop > .nav-trigger{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:9px; font-size:14px; font-weight:700; color:rgba(225,235,255,.74); background:none; white-space:nowrap; transition:color .2s, background .2s;}
.sanad-bar nav > a:hover, .sanad-bar .sb-drop > .nav-trigger:hover, .sanad-bar .sb-drop.open > .nav-trigger{color:#fff; background:rgba(255,255,255,.06);}
.sanad-bar nav > a[aria-current="page"], .sanad-bar .sb-drop.current > .nav-trigger{color:#fff; background:rgba(255,255,255,.1);}
.sanad-bar nav > a:focus-visible, .sanad-bar .sb-drop > .nav-trigger:focus-visible, .sanad-bar .sb-home:focus-visible{outline:2px solid var(--blue-soft); outline-offset:-2px;}
.sanad-bar .btn{margin-inline-start:auto; padding:10px 18px; font-size:14px;}
.sanad-bar .sb-home{display:flex; flex:none; padding:6px 4px; border-radius:8px;}
/* "Sanad Platform" opens the original Sanad Platform menu: the eight products as icon tiles.
   The group is not positioned, so the panel hangs from the bar (not the scrolling nav) and is
   never clipped by it. */
.sanad-bar .sb-drop{position:static;}
.sanad-bar .sb-drop::after{top:100%; height:12px;}
.sanad-bar .drop-sanad{top:calc(100% + 6px); inset-inline-start:96px; width:560px;}
.drop-sanad .drop-list > a{align-items:flex-start; padding:12px;}
.drop-sanad .li{width:38px; height:38px;}
.drop-sanad .li svg{width:20px; height:20px;}
.drop-sanad .dd{margin-top:1px;}
.sanad-bar .sb-flat{display:none !important;}
.sp [id]{scroll-margin-top:150px;}
/* Sanad Platform page: each module card leads to its detail page */
.mod .mod-go{grid-column:2; justify-self:start; margin-top:12px; font-size:14.5px;}
.caps6{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line-dark); border-inline-start:1px solid var(--line-dark);}
.caps6 > div{padding:28px; border-inline-end:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);}
.caps6 .n{font-size:12.5px; font-weight:800; letter-spacing:.1em; color:var(--blue-soft);}
.caps6 h3{margin-top:12px; font-size:19px; font-weight:800; color:#fff;}

/* ---------- forms ---------- */
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,3vw,40px); box-shadow:var(--shadow-sm);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{display:grid; gap:7px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:14px; font-weight:700; color:var(--ink);}
.field label i{font-style:normal; color:var(--red);}
.field input, .field select, .field textarea{width:100%; padding:13px 15px; border:1px solid var(--line-strong); border-radius:12px; background:var(--paper-2); font-size:16px; transition:border-color .2s, box-shadow .2s, background .2s;}
.field textarea{min-height:140px; resize:vertical;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px var(--blue-ghost);}
.form-foot{display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; margin-top:24px;}
.form-done{display:none; padding:22px; border-radius:var(--radius); background:var(--light); border:1px solid var(--line);}
.form-done.show{display:block; animation:panelIn .5s var(--ease);}
.form-done h3{font-size:20px; font-weight:800;}
.form-done p{margin-top:8px; color:var(--muted);}
.form-done button{margin-top:14px;}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important;}
  .reveal, .stagger.stagger > *{opacity:1; translate:none; transform:none;}
  .mq-track{animation:none !important; flex-wrap:wrap; width:auto; justify-content:center; row-gap:24px;}
  .mq{-webkit-mask-image:none; mask-image:none;}
  .photo img, .ph-photo img{transform:none;}
  .ledger > *::before, .step .n::after{transform:scaleX(1);}
}

/* ---------- responsive ---------- */
/* tighten the header row on smaller laptops, then hand over to the burger menu */
@media (max-width:1340px){
  .nav-links > a, .nav-trigger{padding:10px 9px;}
  .site-header .btn{padding:11px 16px; font-size:14.5px;}
}
@media (max-width:1120px){
  .nav-links, .nav-actions .btn-cta, .nav-actions .btn-portal{display:none;}
  .burger{display:flex;}
  /* Sanad bar: the products are listed inline in the sideways-scrolling bar instead of a menu */
  .sanad-bar .sb-drop{display:none;}
  .sanad-bar .sb-flat{display:inline-flex !important;}
}
@media (max-width:1080px){
  .nav-links, .nav-actions .btn-cta, .nav-actions .btn-portal{display:none;}
  .burger{display:flex;}
  .ledger{grid-template-columns:1fr 1fr;}
  .ledger > :nth-child(3){border-inline-start:0;}
  .ledger > :nth-child(n+3){border-top:1px solid var(--line-2);}
  .desig{grid-template-columns:1fr;}
  .badges{grid-template-columns:repeat(3,1fr); row-gap:22px;}
  .portfolio{grid-template-columns:1fr 1px 1fr;}
  .portfolio > .vsep:nth-of-type(2){display:none;}
  .portfolio > .pf:last-child{grid-column:1 / -1; border-top:1px solid rgba(140,175,255,.14);}
  .offices{grid-template-columns:repeat(2,1fr);}
  .wall{grid-template-columns:repeat(4,1fr);}
  .lead-row{grid-template-columns:60px 1fr; }
  .lead-row .solves{grid-column:2;}
  .lead-row .textlink{grid-column:2; justify-self:start;}
  .foot-top{grid-template-columns:1fr 1fr;}
  .foot-brand{grid-column:1 / -1;}
}
@media (max-width:900px){
  :root{--gutter:24px; --header-h:68px;}
  .net, .net-cap{display:none !important;}
  .hero{padding-top:56px;}
  .proof{grid-template-columns:1fr 1fr;}
  .proof li{padding:22px 18px 24px;}
  .proof li:nth-child(3){padding-inline-start:0; border-inline-start:0;}
  .proof li:nth-child(n+3){border-top:1px solid rgba(140,175,255,.1);}
  .head, .split, .split.wide-l, .split.wide-r, .statement, .cta-grid, .ph-grid, .cap-index, .prod-row{grid-template-columns:1fr;}
  .head{gap:18px;}
  .split{gap:40px;}
  .prod-row:nth-child(even) .prod-media{order:0;}
  .feat{flex-direction:column; gap:0;}
  .feat .vsep{width:auto; height:1px; flex:0 0 1px; background:linear-gradient(to right, transparent, rgba(150,185,255,.28), transparent);}
  .feat-i{padding:24px 4px;}
  .feat-go{opacity:1; transform:none;}
  .more .textlink{margin-inline-start:0; width:100%; margin-top:8px;}
  .photo{aspect-ratio:4/3;}
  .stats-inline{justify-content:flex-start;}
  .track-row{grid-template-columns:1fr; gap:14px;}
  .hqs{grid-template-columns:1fr; gap:12px;}
  .hq{min-height:180px;}
  .numlist, .numlist.three{grid-template-columns:1fr;}
  .diffs{grid-template-columns:1fr;}
  .diffs > div, .diffs > div + div{padding:24px 0; border-inline-start:0; border-bottom:1px solid var(--line);}
  .grid-lines, .rel-grid, .purpose, .caps6{grid-template-columns:1fr 1fr;}
  .purpose > div, .purpose > div:not(:nth-child(3n+1)){padding:24px 20px 24px 0; border-inline-start:0;}
  .purpose > div:nth-child(even){padding-inline-start:20px; border-inline-start:1px solid var(--line);}
  .comp-list, .duo{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .wall{grid-template-columns:repeat(3,1fr);}
  .ph-aside{max-width:560px;}
  .sanad-bar{top:var(--header-h);}
}
@media (max-width:620px){
  body{font-size:16.5px;}
  .btns .btn, .cta-band .btn{width:100%;}
  .display{font-size:34px;} .hero .lead{font-size:17px;}
  .proof b{font-size:30px;} .proof li > span{font-size:13px;}
  .ledger{grid-template-columns:1fr;}
  .ledger > *{border-inline-start:0 !important; border-top:1px solid var(--line-2);}
  .ledger > :first-child{border-top:0;}
  .badges{grid-template-columns:repeat(3,1fr); gap:10px;}
  .badge img{height:44px;} .badge figcaption{font-size:10.5px;}
  .desig{padding:24px;}
  .portfolio{grid-template-columns:1fr;}
  .portfolio > .vsep{display:none;}
  .portfolio > .pf + .vsep + .pf{border-top:1px solid rgba(140,175,255,.14);}
  .pf{padding:28px 24px;}
  .dc-row{padding:20px; gap:12px 18px;}
  .lg img{height:42px; max-width:130px;} .lg.rev img{height:36px;}
  .grid-lines, .rel-grid, .purpose, .caps6, .gallery, .gallery.two, .offices{grid-template-columns:1fr;}
  .purpose > div, .purpose > div:nth-child(even){padding:22px 0; border-inline-start:0;}
  .wall{grid-template-columns:repeat(2,1fr);}
  .tile{min-height:132px;} .tile img{max-height:60px;}
  .form-grid{grid-template-columns:1fr;}
  .cap-items{grid-template-columns:1fr;}
  .comp{grid-template-columns:64px 1fr; gap:16px; padding:20px;} .comp img{width:64px;}
  .lead-row{grid-template-columns:1fr; gap:12px;}
  .lead-row .solves, .lead-row .textlink{grid-column:auto;}
  .lead-row:hover{padding-inline:0;}
  .ph-stats b{font-size:40px;}
  .foot-top{grid-template-columns:1fr;}
  .tech{width:calc(50% - 7px);}
  .sanad-bar .btn{display:none;}
  .principle{grid-template-columns:1fr;}
}

/* ---------- page-specific components ---------- */
.stat-grid{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-inline-start:1px solid var(--line);}
.stat-grid > div{padding:30px 26px; border-inline-end:1px solid var(--line); border-bottom:1px solid var(--line);}
.stat-grid b{display:block; font-size:clamp(40px,4.4vw,58px); font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--blue);}
.stat-grid > div > span{display:block; margin-top:12px; font-size:15px; font-weight:700; line-height:1.4;}
.photo-band{padding-inline:var(--gutter); max-width:calc(var(--maxw) + 2 * var(--gutter)); margin:0 auto clamp(72px,9vw,128px);}
.photo-band .photo{aspect-ratio:21/9;}
.stages{display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative;}
.stages::before{content:""; position:absolute; top:7px; inset-inline:0; height:1px; background:var(--line-strong);}
.stages li{position:relative; padding:34px 22px 0 0;}
.stages li + li{padding-inline-start:22px;}
.stages .dot{position:absolute; top:0; inset-inline-start:0; width:15px; height:15px; border-radius:50%; background:#fff; border:3px solid var(--blue);}
.stages li + li .dot{inset-inline-start:22px;}
.stages li:last-child .dot{background:var(--blue);}
.stages .n{font-size:12.5px; font-weight:800; letter-spacing:.1em; color:var(--blue);}
.stages h3{margin-top:10px; font-size:18px; font-weight:800; line-height:1.3;}
.stages p{margin-top:8px; font-size:14.5px; line-height:1.55; color:var(--muted);}
.sector-row{grid-template-columns:80px 1.2fr .8fr auto;}
.row-logos{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.row-logos span{display:grid; place-items:center; height:52px; padding:6px 10px; background:#fff; border:1px solid var(--line-2); border-radius:12px;}
.row-logos span.rev{background:var(--navy);}
.row-logos img{max-height:36px; max-width:96px; width:auto; object-fit:contain;}
.office-list{display:grid; margin-top:14px; border-top:1px solid var(--line);}
.office-list li{display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line);}
.office-list b{font-size:16.5px; font-weight:800;}
.office-list span{font-size:15px; color:var(--muted);}
.office-list em{font-style:normal; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue);}
html[dir="rtl"] .office-list em{letter-spacing:.02em;}
.page-hero .contact-list a{font-size:17px;}
@media (max-width:1080px){
  .stages{grid-template-columns:1fr; gap:0;}
  .stages::before{top:0; bottom:0; inset-inline-start:7px; inset-inline-end:auto; width:1px; height:auto;}
  .stages li, .stages li + li{padding:0 0 30px 0; padding-inline-start:40px;}
  .stages .dot, .stages li + li .dot{inset-inline-start:0;}
  .sector-row{grid-template-columns:60px 1fr;}
  .sector-row .row-logos{grid-column:2;}
}
@media (max-width:620px){
  .stat-grid > div{padding:22px 18px;}
  .sector-row{grid-template-columns:1fr;}
  .sector-row .row-logos{grid-column:auto;}
  .office-list li{grid-template-columns:1fr auto;}
  .office-list span{grid-column:1;}
  .office-list em{grid-row:1; grid-column:2;}
  .photo-band .photo{aspect-ratio:4/3;}
  .offices[style]{grid-template-columns:1fr !important;}
}
@media (min-width:621px) and (max-width:900px){ .offices[style]{grid-template-columns:repeat(2,1fr) !important;} }

/* ---------- overflow guards ---------- */
.prod-row > *, .cta-grid > *, .head > *, .statement > *, .cap-index > *, .rel-grid > *{min-width:0;}
@media (max-width:900px){ .textlink{white-space:normal; text-align:start;} }

/* ==========================================================================
   Sanad — restrained corporate integration (v3)
   The v1 page system above is unchanged. This block adds only:
   · the hero teaser and the one homepage highlight, and
   · the product components used on sanad.html.
   ========================================================================== */

/* hero teaser: a compact product reference under the corporate hero copy */
.sanad-teaser{display:inline-flex; align-items:center; gap:14px; margin-top:26px; padding:10px 16px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; transition:border-color .3s, background .3s, transform .3s var(--ease);}
.sanad-teaser:hover{border-color:rgba(143,182,255,.5); background:rgba(255,255,255,.09); transform:translateY(-2px);}
.sanad-teaser img{height:22px; width:auto;}
.sanad-teaser .st-sep{width:1px; height:20px; background:rgba(255,255,255,.18);}
.sanad-teaser .st-k{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(200,216,255,.74);}
html[dir="rtl"] .sanad-teaser .st-k{letter-spacing:.02em;}
.sanad-teaser .st-go{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--blue-soft);}
.sanad-teaser .st-go::after{content:"\2192"; transition:transform .25s var(--ease);}
html[dir="rtl"] .sanad-teaser .st-go::after{content:"\2190";}
.sanad-teaser:hover .st-go::after{transform:translateX(4px);}
html[dir="rtl"] .sanad-teaser:hover .st-go::after{transform:translateX(-4px);}

/* the one homepage Sanad highlight */
.sanad-hl{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(36px,5vw,72px); align-items:center; padding:clamp(28px,3.6vw,48px); border-radius:var(--radius-lg); background:rgba(255,255,255,.035); border:1px solid rgba(140,175,255,.16);}
.sanad-hl > *{min-width:0;}
.sanad-hl .logo{height:44px; width:auto; margin-top:20px;}
.sanad-hl h3{margin-top:18px; font-size:clamp(22px,2.2vw,30px); font-weight:800; line-height:1.2; letter-spacing:-.02em; color:#fff;}
html[dir="rtl"] .sanad-hl h3{letter-spacing:0; line-height:1.4;}
.sanad-hl .lead{margin-top:14px; font-size:17px;}
.sanad-hl .check{margin-top:22px;}
.sanad-hl .check li{font-size:15.5px; color:rgba(225,235,255,.9);}
.portfolio.two{grid-template-columns:1fr 1px 1.3fr;}
.frame{border-radius:16px; overflow:hidden; background:#fff; border:1px solid rgba(255,255,255,.16); box-shadow:0 40px 90px -40px rgba(0,0,0,.8);}
.frame .bar-ui{display:flex; align-items:center; gap:7px; height:34px; padding-inline:14px; background:#eef1f6; border-bottom:1px solid var(--line);}
.frame .bar-ui i{width:10px; height:10px; border-radius:50%; background:#cfd6e2;}
.frame img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top left;}
.frame figcaption{padding:12px 16px; font-size:13px; font-weight:700; color:var(--muted); background:#fff; border-top:1px solid var(--line);}

/* Sanad ecosystem (sanad.html hero) */
.spot{position:relative; border-radius:28px; padding:22px 22px 20px; background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 60%); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 50px 100px -50px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.12);}
.spot-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.spot-k{font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(170,200,255,.72);}
html[dir="rtl"] .spot-k{letter-spacing:.02em;}
.spot-flow{display:flex; align-items:center; justify-content:center; gap:10px; min-height:20px; margin-top:14px; font-size:12.5px; font-weight:700; color:rgba(225,235,255,.72); transition:opacity .35s ease; text-align:center;}
.spot-flow::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 12px rgba(59,123,255,.9); animation:blink 1.8s ease-in-out infinite;}
.spot-flow.fading{opacity:0;}
@keyframes blink{50%{opacity:.35;}}
.eco{position:relative; width:100%; aspect-ratio:1/.9; margin-top:4px;}
/* the link layer only (direct child): the node icons are svgs inside .eco too and must keep
   their own size, position and stroke */
.eco > svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.eco > svg path{fill:none; stroke:rgba(143,182,255,.16); stroke-width:1.1; transition:stroke .5s ease, stroke-width .5s ease;}
.eco > svg path.hot{stroke:#9dc0ff; stroke-width:2; filter:drop-shadow(0 0 4px rgba(93,142,255,.85));}
.eco > svg circle{fill:#bcd3ff; filter:drop-shadow(0 0 6px rgba(93,142,255,.95));}
.eco-light{position:absolute; inset:12%; border-radius:50%; background:radial-gradient(closest-side, rgba(66,124,255,.32), rgba(42,107,255,.08) 55%, transparent 76%); filter:blur(20px); animation:breathe 9s ease-in-out infinite;}
@keyframes breathe{50%{opacity:.75; transform:scale(1.06);}}
.eco-hub{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:min(150px,38%); padding:16px 18px; border-radius:20px; background:linear-gradient(158deg, rgba(255,255,255,.2), rgba(255,255,255,.05) 55%, rgba(255,255,255,.1)); border:1px solid rgba(255,255,255,.3); box-shadow:0 24px 60px -20px rgba(0,0,0,.8), 0 0 60px rgba(42,107,255,.35), inset 0 1px 0 rgba(255,255,255,.34);}
.eco-hub img{width:100%; height:auto;}
.eco-hub::after{content:""; position:absolute; inset:-1px; border-radius:inherit; border:1px solid rgba(157,192,255,.4); animation:ring 3.6s ease-out infinite;}
@keyframes ring{0%{transform:scale(.92); opacity:.9;} 70%{transform:scale(1.22); opacity:0;} 100%{opacity:0;}}
.eco-n{position:absolute; z-index:3; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 7px; border-radius:13px; white-space:nowrap; font-size:13px; font-weight:700; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 12px 30px -14px rgba(0,0,0,.75); transition:background .45s, border-color .45s, box-shadow .45s, transform .45s var(--ease);}
html[dir="rtl"] .eco-n{padding:7px 7px 7px 12px;}
.eco-n i{width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:8px; background:color-mix(in srgb, var(--c) 42%, transparent); transition:background .45s;}
.eco-n svg{width:15px; height:15px; fill:none; stroke:#fff; stroke-width:1.8;}
.eco-n.hot{transform:translate(-50%,-50%) scale(1.07); background:rgba(255,255,255,.15); border-color:color-mix(in srgb, var(--c) 70%, transparent); box-shadow:0 16px 40px -14px rgba(0,0,0,.8), 0 0 28px color-mix(in srgb, var(--c) 45%, transparent);}
.eco-n.hot i{background:var(--c);}
.spot-caps{display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:10px;}
.spot-cap{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color:rgba(225,235,255,.8); transition:color .4s;}
.spot-cap .ci{width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:linear-gradient(140deg,#3b7bff,#2A6BFF); box-shadow:0 0 18px rgba(42,107,255,.4); transition:box-shadow .4s;}
.spot-cap .ci img{width:16px; height:auto;}
.spot-cap .ci.ms{background:none; box-shadow:none;}
.spot-cap .ci.ms svg{width:18px; height:18px;}
.spot-cap.hot{color:#fff;} .spot-cap.hot .ci{box-shadow:0 0 30px rgba(59,123,255,.95);}
.spot-cap.hot .ci.ms{box-shadow:none; filter:drop-shadow(0 0 8px rgba(255,255,255,.6));}

/* platform architecture strip (sanad.html, light) */
.arch{display:grid; gap:10px;}
.arch-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.arch-mod{padding:9px 14px; border-radius:11px; font-size:14px; font-weight:700; color:var(--ink); background:color-mix(in srgb, var(--c) 10%, #fff); border:1px solid color-mix(in srgb, var(--c) 50%, transparent);}
.arch-base{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; border-radius:14px; overflow:hidden; background:var(--line); border:1px solid var(--line);}
.arch-base span{padding:14px 10px; text-align:center; font-size:14px; font-weight:700; color:var(--ink); background:#fff;}
.arch-ai{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 18px; border-radius:14px; font-size:14.5px; font-weight:800; color:var(--navy); text-align:center; background:linear-gradient(90deg, rgba(42,107,255,.08), rgba(91,123,255,.18), rgba(42,107,255,.08)); border:1px solid rgba(42,107,255,.3);}
.arch-ai::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); transform:translateX(-100%); animation:sweep 5s ease-in-out infinite;}
@keyframes sweep{60%,100%{transform:translateX(100%);}}

/* modules (sanad.html) */
.mods{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(28px,4vw,64px); border-top:1px solid var(--line);}
.mod{display:grid; grid-template-columns:48px 1fr; gap:6px 18px; padding:30px 0; border-bottom:1px solid var(--line);}
.mod .ic{grid-row:span 2; width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:color-mix(in srgb, var(--c) 13%, transparent);}
.mod .ic svg{width:24px; height:24px; fill:none; stroke:var(--c); stroke-width:1.8;}
.mod .tag{display:block; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--c);}
html[dir="rtl"] .mod .tag{letter-spacing:.02em;}
.mod h3{margin-top:6px; font-size:20px; font-weight:800; line-height:1.3;}
.mod p{grid-column:2; font-size:15.5px; line-height:1.55; color:var(--muted);}
.mod ul{grid-column:2; display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.mod ul li{font-size:13px; font-weight:700; padding:6px 11px; border-radius:999px; background:var(--light); color:var(--ink);}

/* Microsoft integrations, security layers, AI flow (sanad.html) */
.msi{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.msi > div{display:flex; align-items:center; gap:14px; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:16px; transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
.msi > div:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm);}
.msi img{width:34px; height:34px; flex:none; object-fit:contain;}
.msi b{display:block; font-size:16px; font-weight:800;}
.msi span{display:block; margin-top:2px; font-size:13.5px; color:var(--muted);}
.layers{display:grid; gap:12px;}
.layer{display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);}
.layer .ic{width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:12px; background:rgba(143,182,255,.14);}
.layer .ic svg{width:22px; height:22px; fill:none; stroke:var(--blue-soft); stroke-width:1.7;}
.layer > div{flex:1; min-width:0;}
.layer b{display:block; font-size:16.5px; font-weight:800; color:#fff;}
.layer > div > span{display:block; margin-top:2px; font-size:14px; color:var(--text-dark);}
.layer em{font-style:normal; flex:none; font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--blue-soft); border:1px solid rgba(143,182,255,.35); border-radius:8px; padding:5px 10px; direction:ltr;}
.aiflow{display:flex; flex-wrap:wrap; gap:12px;}
.aiflow > div{display:inline-flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); animation:aiLit 7.5s ease-in-out infinite; animation-delay:calc(var(--i) * 1.5s);}
html[dir="rtl"] .aiflow > div{padding:10px 10px 10px 14px;}
.aiflow b{font-size:14.5px; font-weight:800; color:#fff;}
.aiflow em{font-style:normal; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--blue); border-radius:7px; padding:4px 9px;}
@keyframes aiLit{0%,14%{border-color:rgba(143,182,255,.7); box-shadow:0 0 30px rgba(59,123,255,.4); background:rgba(59,123,255,.16);} 26%,100%{border-color:rgba(255,255,255,.12); box-shadow:none; background:rgba(255,255,255,.05);}}

@media (max-width:1080px){
  .msi{grid-template-columns:repeat(2,1fr);}
  .portfolio.two{grid-template-columns:1fr;}
  .portfolio.two > .vsep{display:none;}
  .portfolio.two > .pf:last-child{grid-column:auto; border-top:1px solid rgba(140,175,255,.14);}
}
@media (max-width:900px){
  .sanad-hl{grid-template-columns:1fr;}
  .arch-base{grid-template-columns:repeat(2,1fr);}
  .arch-base span:last-child{grid-column:1 / -1;}
  .mods{grid-template-columns:1fr;}
  .ph-aside .spot{max-width:520px;}
}
@media (max-width:620px){
  .sanad-teaser{flex-wrap:wrap; gap:10px 14px;}
  .sanad-teaser .st-sep{display:none;}
  .sanad-hl{padding:22px;}
  .spot{padding:16px;}
  .eco{aspect-ratio:1/1.02;}
  .eco-n{font-size:11px; padding:5px 9px 5px 5px; gap:6px;}
  html[dir="rtl"] .eco-n{padding:5px 5px 5px 9px;}
  .eco-n i{width:20px; height:20px;} .eco-n svg{width:12px; height:12px;}
  .eco-hub{padding:11px 12px; width:34%;}
  .msi{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .arch-ai::after, .eco-hub::after, .eco-light, .spot-flow::before, .aiflow > div{animation:none !important;}
}

/* ==========================================================================
   HOMEPAGE — Stage A experience upgrade (hm-*)
   Benchmarked on the original NEW website: photographic hero with a two-layer
   veil and masked network, a short navy "footing" band, a compact white
   credibility strip, varied section heights and one dark centrepiece.
   Scoped to homepage classes; inner pages are unaffected.
   ========================================================================== */

/* cinematic hero */
.hm-hero{position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; min-height:min(86vh,800px); padding-block:clamp(72px,9vw,120px) clamp(64px,8vw,104px); background:var(--navy-deep); color:#fff;}
.hm-hero-media{position:absolute; inset:-3%; z-index:-2; translate:var(--px,0) var(--py,0);}
.hm-hero-media img{width:100%; height:100%; object-fit:cover; object-position:68% 42%; animation:hmZoom 18s var(--ease) both;}
@keyframes hmZoom{from{transform:scale(1.12);} to{transform:scale(1);}}
.hm-hero-veil{position:absolute; inset:0; z-index:-1;
  background:radial-gradient(700px 480px at 78% 30%, rgba(42,107,255,.22), transparent 65%),
             linear-gradient(100deg, rgba(7,16,38,.95) 0%, rgba(7,16,38,.86) 36%, rgba(7,16,38,.52) 66%, rgba(7,16,38,.62) 100%),
             linear-gradient(to top, rgba(7,16,38,.94), rgba(7,16,38,.08) 48%);}
html[dir="rtl"] .hm-hero-veil{background:radial-gradient(700px 480px at 22% 30%, rgba(42,107,255,.22), transparent 65%),
             linear-gradient(-100deg, rgba(7,16,38,.95) 0%, rgba(7,16,38,.86) 36%, rgba(7,16,38,.52) 66%, rgba(7,16,38,.62) 100%),
             linear-gradient(to top, rgba(7,16,38,.94), rgba(7,16,38,.08) 48%);}
.hm-hero .net{z-index:0; translate:var(--px,0) var(--py,0); opacity:.85;}
.hm-hero .net-cap{z-index:1; top:auto; bottom:clamp(64px,8vw,104px);}
.hm-hero-in{position:relative; z-index:1; width:100%;}
.hm-h1{margin-top:24px; max-width:760px; font-size:clamp(36px,4.8vw,66px); font-weight:800; line-height:1.04; letter-spacing:-.035em;}
html[dir="rtl"] .hm-h1{letter-spacing:0; line-height:1.28; font-weight:700;}
.hm-lead{margin-top:22px; max-width:620px; font-size:clamp(17px,1.4vw,20px); line-height:1.6; color:rgba(228,236,252,.86);}
.hm-meta{display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; margin-top:32px;}
.hm-meta .hq-line{margin-top:0;}
.hm-meta .sanad-teaser{margin-top:0;}

/* solutions: the hero's short navy footing band */
.hm-band{position:relative; background:var(--navy-deep); color:#fff; border-top:1px solid rgba(140,175,255,.14); padding-block:clamp(48px,6vw,80px);}
.hm-band-head{display:block;}
.hm-h2{margin-top:12px; font-size:clamp(24px,2.6vw,36px); font-weight:800; line-height:1.15; letter-spacing:-.02em; color:#fff;}
html[dir="rtl"] .hm-h2{letter-spacing:0; line-height:1.4;}
.hm-sol{display:flex; align-items:stretch; gap:8px; margin-top:clamp(28px,3.4vw,40px);}
.hm-sep{flex:0 0 1px; align-self:stretch; background:linear-gradient(to bottom, transparent, rgba(150,185,255,.28), transparent);}
.hm-sol-i{flex:1; display:flex; flex-direction:column; gap:10px; padding:22px 20px 20px; border-radius:16px; transition:background .35s var(--ease), transform .35s var(--ease);}
.hm-sol-i:hover{background:rgba(60,100,190,.12); transform:translateY(-4px);}
.hm-sol-ic{width:46px; height:46px; color:rgba(170,200,255,.8); transition:color .35s, filter .35s, transform .35s var(--ease);}
.hm-sol-ic svg{width:40px; height:40px;}
.hm-sol-i:hover .hm-sol-ic{color:#fff; transform:scale(1.06); filter:drop-shadow(0 0 12px rgba(90,140,255,.6));}
.hm-sol-i b{font-size:clamp(18px,1.5vw,21px); font-weight:700; line-height:1.25; color:#fff;}
.hm-sol-s{font-size:15px; line-height:1.55; color:var(--text-dark-2); transition:color .35s;}
.hm-sol-i:hover .hm-sol-s{color:rgba(225,235,255,.9);}
.hm-sol-go{margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--blue-soft); opacity:0; transform:translateY(6px); transition:opacity .35s var(--ease), transform .35s var(--ease);}
.hm-sol-go svg{width:16px; height:16px;} html[dir="rtl"] .hm-sol-go svg{transform:scaleX(-1);}
.hm-sol-i:hover .hm-sol-go, .hm-sol-i:focus-visible .hm-sol-go{opacity:1; transform:none;}
.hm-band .more{margin-top:clamp(24px,3vw,36px);}

/* compact credibility strip */
.hm-proof{background:#fff; padding-block:clamp(44px,5vw,68px) clamp(36px,4vw,52px); border-bottom:1px solid var(--line);}
.hm-proof-top{display:grid; grid-template-columns:.85fr 1.15fr; gap:24px 40px; align-items:end;}
.hm-h3{margin-top:12px; font-size:clamp(22px,2.2vw,30px); font-weight:800; line-height:1.2; letter-spacing:-.02em;}
html[dir="rtl"] .hm-h3{letter-spacing:0; line-height:1.4;}
.hm-stats{display:grid; grid-template-columns:repeat(4,1fr);}
.hm-stat{padding-inline:18px; border-inline-start:1px solid var(--line);}
.hm-stat b{display:block; font-size:clamp(28px,2.8vw,40px); font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--blue);}
.hm-stat > span{display:block; margin-top:8px; font-size:13px; font-weight:600; line-height:1.35; color:var(--muted);}
.hm-tracks{margin-top:clamp(24px,3vw,36px);}
.hm-proof .links{margin-top:18px;}

/* shared section shells */
.hm-sec{position:relative; padding-block:clamp(72px,8vw,112px);}
.hm-mist{background:var(--light);}
.hm-paper{background:#fff;}
.hm-dark{overflow:hidden;}
.hm-dark > .glow{opacity:.9;}

/* partnerships bento */
.hm-bento{display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:18px;}
.hm-tile{position:relative; isolation:isolate; display:flex; flex-direction:column; gap:14px; padding:28px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;}
.hm-tile::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(420px 220px at 100% 0%, rgba(42,107,255,.10), transparent 70%); opacity:0; transition:opacity .45s var(--ease);}
html[dir="rtl"] .hm-tile::before{background:radial-gradient(420px 220px at 0% 0%, rgba(42,107,255,.10), transparent 70%);}
.hm-tile:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent;}
.hm-tile:hover::before{opacity:1;}
.hm-ms{grid-row:span 2;}
.hm-eng{grid-column:2 / span 2;}
.hm-tile-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; min-height:40px;}
.hm-tile-top img{height:30px; width:auto;}
.hm-tile h3{font-size:19px; font-weight:800; line-height:1.3;}
.hm-tile .textlink{margin-top:auto; align-self:flex-start;}
.hm-tile .chips .chip{font-size:13px; padding:7px 12px;}
.hm-desig{display:flex; align-items:baseline; gap:12px; padding-top:6px; border-top:1px solid var(--line-2);}
.hm-desig b{font-size:46px; font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--blue);}
.hm-desig > span{font-size:14.5px; font-weight:700;}
.hm-badges{display:grid; grid-template-columns:repeat(3,1fr); gap:16px 10px;}
.hm-badges figure{margin:0; text-align:center;}
.hm-badges img{height:54px; width:auto; margin-inline:auto; transition:transform .35s var(--ease);}
.hm-badges figure:hover img{transform:translateY(-4px);}
.hm-badges figcaption{margin-top:8px; font-size:11.5px; font-weight:700; line-height:1.3; color:var(--muted);}
.hm-dev{display:flex; flex-wrap:wrap; gap:10px;}
.hm-dev span{display:grid; place-items:center; width:72px; height:56px; border-radius:14px; background:var(--light); border:1px solid var(--line-2); transition:transform .3s var(--ease);}
.hm-dev span:hover{transform:translateY(-3px);}
.hm-dev img{max-height:30px; max-width:48px; width:auto;}
.hm-stack{margin-top:22px; padding-block:12px; border-block:1px solid var(--line);}
.hm-stack .mq-track{gap:clamp(36px,4vw,60px);}
.hm-stack-i{display:inline-flex; align-items:center; gap:10px; height:44px; filter:grayscale(1); opacity:.72; transition:filter .3s, opacity .3s;}
.hm-stack-i:hover{filter:none; opacity:1;}
.hm-stack-i img{height:28px; width:auto;}
.hm-stack-i span{font-size:14px; font-weight:700; color:var(--muted); white-space:nowrap;}

/* products: the dark centrepiece with one Sanad showcase */
.hm-show{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(36px,5vw,80px); align-items:center;}
.hm-show > *{min-width:0;}
.hm-show-logo{height:44px; width:auto; margin-top:20px;}
.hm-show h3{margin-top:18px; font-size:clamp(22px,2.2vw,30px); font-weight:800; line-height:1.2; letter-spacing:-.02em; color:#fff;}
html[dir="rtl"] .hm-show h3{letter-spacing:0; line-height:1.4;}
.hm-show .lead{margin-top:14px; font-size:17px;}
.hm-show .check{margin-top:22px;}
.hm-show .check li{font-size:15.5px; color:rgba(225,235,255,.9);}
.hm-show-vis{position:relative; perspective:1400px; padding:22px 18px;}
.hm-show-vis .frame{transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)); transition:transform .6s var(--ease);}
.hm-chip{position:absolute; z-index:2; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:14px; background:rgba(10,20,38,.86); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 20px 44px -18px rgba(0,0,0,.8); animation:hmFloat 6s ease-in-out infinite;}
html[dir="rtl"] .hm-chip{padding:10px 10px 10px 14px;}
.hm-chip .ci{width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px; background:linear-gradient(140deg,#3b7bff,#2A6BFF); box-shadow:0 0 18px rgba(42,107,255,.45);}
.hm-chip .ci img{width:17px; height:auto;}
.hm-chip .ci.ms{background:rgba(255,255,255,.06); box-shadow:none;}
.hm-chip .ci.ms svg{width:18px; height:18px;}
.hm-chip b{display:block; font-size:13px; font-weight:800; color:#fff;}
.hm-chip i{display:block; font-style:normal; font-size:11.5px; color:rgba(225,235,255,.66);}
.hm-chip-a{top:0; inset-inline-end:0;}
.hm-chip-b{bottom:0; inset-inline-start:0; animation-delay:-3s;}
@keyframes hmFloat{50%{transform:translateY(-8px);}}
.hm-more-prod{margin-top:clamp(56px,7vw,88px); padding-top:26px; border-top:1px solid var(--line-dark);}
.hm-more-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;}
.hm-pgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:20px;}
.hm-pcard{display:flex; flex-direction:column; gap:6px; padding:12px 12px 16px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); transition:transform .35s var(--ease), background .35s, border-color .35s;}
.hm-pcard:hover{transform:translateY(-5px); background:rgba(255,255,255,.07); border-color:rgba(143,182,255,.35);}
.hm-pim{position:relative; aspect-ratio:16/10; margin-bottom:8px; border-radius:11px; overflow:hidden; background:linear-gradient(160deg,#eef3fb,#f9fbfe);}
.hm-pim img{position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); object-fit:contain; transition:transform .8s var(--ease);}
.hm-pcard:hover .hm-pim img{transform:scale(1.04);}
.hm-pcard b{font-size:14.5px; font-weight:800; line-height:1.3; color:#fff; padding-inline:4px;}
.hm-pcard > span:last-child{font-size:13px; line-height:1.45; color:var(--text-dark-2); padding-inline:4px;}

/* delivery: image-led, with the original's moving spine */
.hm-deliver{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(40px,6vw,96px); align-items:center;}
.hm-deliver > *{min-width:0;}
.hm-dl-photo{position:relative; margin:0; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow-lg);}
.hm-dl-photo img{width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 1.8s var(--ease);}
.hm-dl-photo.in img{transform:none;}
.hm-dl-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(7,16,38,.74), rgba(7,16,38,0) 50%);}
.hm-dl-photo figcaption{position:absolute; inset-inline:28px; bottom:26px; z-index:1; color:#fff; font-size:20px; font-weight:700;}
.hm-spine{position:relative; margin-top:32px; padding-inline-start:30px;}
.hm-spine li{position:relative; display:grid; grid-template-columns:44px 1fr; gap:14px; padding:20px 0; border-bottom:1px solid var(--line);}
.hm-spine li:last-of-type{border-bottom:0;}
.hm-spine li::before{content:""; position:absolute; inset-inline-start:-30px; top:27px; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid var(--blue); box-sizing:border-box;}
.hm-spine .n{font-size:14px; font-weight:800; letter-spacing:.08em; color:var(--blue); padding-top:3px;}
.hm-spine h3{font-size:clamp(20px,1.9vw,24px); font-weight:800; letter-spacing:-.02em;}
html[dir="rtl"] .hm-spine h3{letter-spacing:0;}
.hm-spine p{margin-top:4px; font-size:16px; line-height:1.55; color:var(--muted);}
.hm-spine-line{position:absolute; inset-inline-start:6px; top:34px; bottom:34px; width:2px; background:linear-gradient(to bottom, rgba(42,107,255,.15), rgba(42,107,255,.55), rgba(42,107,255,.15)); transform:scaleY(0); transform-origin:top; transition:transform 1.4s var(--ease) .3s;}
.hm-spine.in .hm-spine-line{transform:scaleY(1);}
.hm-spine-line::after{content:""; position:absolute; left:-3px; width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 12px rgba(42,107,255,.75); animation:hmDrop 5.2s ease-in-out infinite 1.6s; opacity:0;}
@keyframes hmDrop{0%{top:0; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{top:calc(100% - 8px); opacity:0;}}

/* industries mosaic */
.hm-sectors{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.hm-sector{position:relative; display:flex; flex-direction:column; gap:12px; min-height:196px; padding:22px; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;}
.hm-sector:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent;}
.hm-sector-ic{width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:var(--blue-ghost); color:var(--blue); transition:background .35s, color .35s;}
.hm-sector-ic svg{width:24px; height:24px;}
.hm-sector:hover .hm-sector-ic{background:var(--blue); color:#fff;}
.hm-sector b{font-size:16.5px; font-weight:800; line-height:1.3;}
.hm-sector-n{margin-top:auto; display:flex; align-items:baseline; gap:8px; font-size:12.5px; font-weight:700; color:var(--muted); transition:opacity .3s;}
.hm-sector-n em{font-style:normal; font-size:24px; font-weight:800; color:var(--ink);}
.hm-sector-logos{position:absolute; inset:auto 0 0 0; display:flex; gap:8px; padding:14px 18px 16px; background:linear-gradient(to top, #fff 72%, rgba(255,255,255,0)); transform:translateY(100%); transition:transform .45s var(--ease);}
.hm-sector-logos span{display:grid; place-items:center; height:38px; min-width:52px; padding:4px 8px; border:1px solid var(--line-2); border-radius:9px; background:#fff;}
.hm-sector-logos span.rev{background:var(--navy);}
.hm-sector-logos img{max-height:26px; max-width:66px; width:auto; object-fit:contain;}
.hm-sector:hover .hm-sector-logos, .hm-sector:focus-visible .hm-sector-logos{transform:none;}
.hm-sector:hover .hm-sector-n{opacity:0;}

/* regional presence: schematic map from the OLD site's office positions */
.hm-reg{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,72px); align-items:center;}
.hm-reg > *{min-width:0;}
.hm-hqs{margin-top:30px; border-top:1px solid var(--line-dark);}
.hm-hqs li{display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:2px 16px; padding:16px 0; border-bottom:1px solid var(--line-dark); transition:padding .3s var(--ease);}
.hm-hqs li:hover, .hm-hqs li.hot{padding-inline-start:10px;}
.hm-hqs b{grid-column:1; font-size:clamp(24px,2.4vw,32px); font-weight:800; letter-spacing:-.02em; line-height:1.1; color:#fff; transition:color .3s;}
html[dir="rtl"] .hm-hqs b{letter-spacing:0;}
.hm-hqs li:hover b, .hm-hqs li.hot b{color:var(--blue-soft);}
.hm-hqs li > span:not(.geo){grid-column:1; font-size:15px; color:var(--text-dark);}
.hm-hqs .geo{grid-column:2; grid-row:1 / span 2; align-self:center;}
.hm-dcs{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:20px; font-size:15.5px; font-weight:700; color:rgba(225,235,255,.88);}
.hm-dcs i{font-style:normal; color:rgba(150,185,255,.4);}
.hm-dcs [data-office]{cursor:default; transition:color .25s;}
.hm-dcs [data-office]:hover{color:var(--blue-soft);}
/* the map has no frame: its land runs past the svg box and fades into the whole
   navy section (the section's overflow:hidden is the only edge) */
.hm-map{position:relative; margin:0; direction:ltr; pointer-events:none;}
.hm-map svg{display:block; width:100%; height:auto; overflow:visible;}
.hm-map .hm-pin{pointer-events:auto;}
.hm-land{fill:rgba(150,180,255,.07); stroke:rgba(150,180,255,.24); stroke-width:.8; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
.hm-arcs path{fill:none; stroke:rgba(143,182,255,.6); stroke-width:.32; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s var(--ease) calc(.4s + .14s * var(--i));}
.hm-map.in .hm-arcs path{stroke-dashoffset:0;}
.hm-pin circle{fill:#8fb6ff; transition:fill .3s, r .3s;}
.hm-pin.hq circle{fill:#fff;}
.hm-pin.hq .halo{fill:rgba(59,123,255,.4); transform-box:fill-box; transform-origin:center; animation:hmPulse 2.8s ease-out infinite;}
@keyframes hmPulse{0%{transform:scale(.8); opacity:.9;} 100%{transform:scale(2.6); opacity:0;}}
.hm-pin text{font-size:1.8px; font-weight:700; fill:rgba(225,235,255,.86); paint-order:stroke; stroke:var(--navy); stroke-width:.4px; stroke-linejoin:round; transition:fill .3s;}
.hm-pin.hq text{font-size:2.15px; font-weight:800; fill:#fff;}
.hm-pin.hot circle:not(.halo){fill:var(--blue-bright);}
.hm-pin.hot text{fill:var(--blue-soft);}

/* contact: a light closing band before the dark footer */
.hm-cta{background:linear-gradient(180deg, #fff 0%, var(--light) 100%); padding-block:clamp(64px,8vw,104px);}
.hm-cta-in{display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,5vw,80px); align-items:end; padding:clamp(32px,4.5vw,60px); background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);}
.hm-cta-in > *{min-width:0;}
.hm-contact{border-top:1px solid var(--line);}
.hm-contact a{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); font-size:16px; font-weight:700; transition:color .2s, padding .3s var(--ease);}
.hm-contact a:hover{color:var(--blue); padding-inline-start:6px;}
.hm-contact .k{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);}
html[dir="rtl"] .hm-contact .k{letter-spacing:.02em;}

/* responsive */
@media (max-width:1080px){
  .hm-bento{grid-template-columns:1fr 1fr;}
  .hm-ms{grid-row:auto; grid-column:1 / -1;}
  .hm-eng{grid-column:1 / -1;}
  .hm-badges{grid-template-columns:repeat(6,1fr);}
  .hm-pgrid{grid-template-columns:repeat(3,1fr);}
  .hm-sectors{grid-template-columns:repeat(3,1fr);}
  .hm-proof-top{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .hm-hero{min-height:0;}
  .hm-hero-veil, html[dir="rtl"] .hm-hero-veil{background:linear-gradient(to top, rgba(7,16,38,.96), rgba(7,16,38,.78) 55%, rgba(7,16,38,.62));}
  .hm-sol{flex-direction:column; gap:0;}
  .hm-sep{height:1px; flex:0 0 1px; background:linear-gradient(to right, transparent, rgba(150,185,255,.28), transparent);}
  .hm-sol-i{padding:20px 4px;}
  .hm-sol-go{opacity:1; transform:none;}
  .hm-stats{grid-template-columns:1fr 1fr; row-gap:18px;}
  .hm-stat:nth-child(3){border-inline-start:0; padding-inline-start:0;}
  .hm-stat:first-child{padding-inline-start:0; border-inline-start:0;}
  .hm-show, .hm-deliver, .hm-reg, .hm-cta-in{grid-template-columns:1fr;}
  .hm-dl-photo{aspect-ratio:4/3;}
  .hm-show-vis{padding:30px 8px;}
}
@media (max-width:620px){
  .hm-h1{font-size:34px;}
  .hm-bento{grid-template-columns:1fr;}
  .hm-badges{grid-template-columns:repeat(3,1fr);}
  .hm-badges img{height:44px;}
  .hm-pgrid{grid-template-columns:1fr 1fr;}
  .hm-sectors{grid-template-columns:1fr 1fr;}
  .hm-sector{min-height:168px; padding:18px;}
  .hm-chip i{display:none;}
  .hm-cta-in{padding:26px;}
  .hm-hqs .geo{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .hm-hero-media img{animation:none;}
  .hm-spine-line{transform:scaleY(1);}
  .hm-spine-line::after{display:none;}
  .hm-arcs path{stroke-dashoffset:0;}
}
@media (max-width:620px){ .hm-pin text{font-size:3.3px; stroke-width:.6px;} .hm-pin.hq text{font-size:3.7px;} .hm-pin circle:not(.halo){r:.85px;} .hm-pin.hq circle:not(.halo){r:1.1px;} }

/* ==========================================================================
   v5 — motion smoothness, section continuity and technology partners
   ========================================================================== */

/* in-page jumps land below the sticky header instead of under it */
main [id]{scroll-margin-top:calc(var(--header-h) + 18px);}

/* tactile press on primary controls (the original site's buttons lift; they now also settle) */
.btn:active{transform:translateY(0) scale(.98); transition-duration:.12s;}
.hm-tile:active, .hm-sector:active, .hm-pcard:active{transform:translateY(-1px); transition-duration:.12s;}

/* the delivery spine keeps its slow draw inside the stagger group */
.stagger.stagger > .hm-spine-line{transition:opacity .6s var(--ease) .2s, transform 1.4s var(--ease) .35s;}

/* hero: layers that move get their own compositing layer */
.hm-hero-media, .hm-hero .net{will-change:translate;}
.hm-hero-media img{will-change:transform;}
/* the hero now settles into the band below it in exactly the band's colour */
.hm-hero-veil{background:radial-gradient(700px 480px at 78% 30%, rgba(42,107,255,.22), transparent 65%),
             linear-gradient(100deg, rgba(7,16,38,.95) 0%, rgba(7,16,38,.86) 36%, rgba(7,16,38,.52) 66%, rgba(7,16,38,.62) 100%),
             linear-gradient(to top, #0A1426 0%, rgba(10,20,38,.9) 12%, rgba(10,20,38,.08) 52%);}
html[dir="rtl"] .hm-hero-veil{background:radial-gradient(700px 480px at 22% 30%, rgba(42,107,255,.22), transparent 65%),
             linear-gradient(-100deg, rgba(7,16,38,.95) 0%, rgba(7,16,38,.86) 36%, rgba(7,16,38,.52) 66%, rgba(7,16,38,.62) 100%),
             linear-gradient(to top, #0A1426 0%, rgba(10,20,38,.9) 12%, rgba(10,20,38,.08) 52%);}
.hm-band{border-top-color:rgba(140,175,255,.08);}

/* light-to-light chapters blend instead of switching: each mist section opens from white */
.hm-proof{border-bottom:0;}
#partners.hm-mist, #industries.hm-mist{background:linear-gradient(180deg, #fff 0, var(--light) 220px, var(--light) 100%);}
/* homepage "What we deliver" on white: the same band and layout, with ink text, blue glyphs and
   the navy logo variants (set in the generator) instead of the light-on-navy treatment */
.dlv-light .dlv-sep{background:linear-gradient(to bottom, transparent, var(--line-strong), transparent);}
.dlv-light .dlv-it:hover{background:var(--light);}
.dlv-light .dlv-ic{color:var(--blue);}
.dlv-light .dlv-ic img{opacity:1;}
.dlv-light .dlv-it:hover .dlv-ic{color:var(--blue); filter:drop-shadow(0 8px 16px rgba(42,107,255,.2));}
.dlv-light .dlv-it:hover .dlv-ic img{filter:none;}
.dlv-light .dlv-t{color:var(--ink);}
.dlv-light .dlv-it:hover .dlv-t{color:var(--blue);}
.dlv-light .dlv-it:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
/* homepage "Sectors we serve": one white section — the sectors, then the customer logo row */
.hm-sectors-sec{background:#fff;}
.hm-trusted{margin-top:clamp(48px,6vw,72px); padding-top:clamp(36px,4.5vw,52px); border-top:1px solid var(--line-2);}
.hm-trusted .trusted-head{align-items:center;}
/* dark chapters get depth at their edges: a lit centre, a faint horizon line at the top */
.hm-dark{box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.hm-dark::before{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(10,20,38,.45) 0, rgba(10,20,38,0) 160px, rgba(10,20,38,0) calc(100% - 160px), rgba(10,20,38,.35) 100%);}
.hm-dark > .wrap{position:relative; z-index:1;}

/* ---------- technology partners: official logos, equal standing ---------- */
.plogo{display:block; width:auto; max-width:100%; height:30px; object-fit:contain;}
.plogo.odoo{height:34px;}
.plogo.oracle{height:21px;}
.hm-partners{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.hm-partner{gap:16px;}
.hm-partner .tier{align-self:flex-start;}
.hm-plate{display:flex; align-items:center; height:76px; padding:0 22px; border-radius:16px; background:var(--light); border:1px solid var(--line-2); transition:background .35s var(--ease);}
.hm-partner:hover .hm-plate{background:#fff;}
.hm-bento2{display:grid; grid-template-columns:1.7fr 1fr; gap:18px;}
.hm-bento2 > *{grid-column:auto !important; grid-row:auto !important;}
.hm-designations{justify-content:space-between;}
.hm-designations .hm-desig{border-top:0; padding-top:0;}
.hm-desig > span{display:flex; flex-direction:column; gap:8px;}
.hm-desig-by .plogo{height:20px;}
.hm-designations .hm-badges{grid-template-columns:repeat(6,1fr);}
/* ledger (About, Partnerships): every partner mark sits on the same baseline */
.mark .plogo{height:28px;} .mark .plogo.odoo{height:32px;} .mark .plogo.oracle{height:19px;}
/* partnerships page */
.plogo-lg{height:52px; display:flex; align-items:center;}
.plogo-lg .plogo{height:40px;} .plogo-lg .plogo.odoo{height:46px;} .plogo-lg .plogo.oracle{height:28px;}
.pplates{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.pplate{display:grid; place-items:center; height:66px; padding:0 14px; background:#fff; border-radius:13px;}
.pplate .plogo{height:24px;} .pplate .plogo.odoo{height:27px;} .pplate .plogo.oracle{height:15px;}

@media (max-width:1080px){
  .hm-designations .hm-badges{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:900px){
  .hm-partners, .hm-bento2{grid-template-columns:1fr;}
  .hm-dark::before{display:none;}
}
@media (max-width:620px){
  .hm-plate{height:66px;}
  .pplates{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .btn:active, .hm-tile:active, .hm-sector:active, .hm-pcard:active{transform:none;}
  .hm-hero-media, .hm-hero .net, .hm-hero-media img{will-change:auto;}
}

/* =========================================================================
   v6 — selective refinements adapted from the corporate-first experiment
   (Solutions explorer, About "Why Newtecx" stage + photo plate, photographic
   Regional Presence hero). Entrances still come only from .reveal / .stagger.
   ========================================================================= */

/* Solutions — lead solutions explorer: the need on the left, the answer on a blueprint panel */
.slv{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4.5vw,64px); align-items:stretch;}
.slv-tabs{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.slv-tab{display:flex; align-items:flex-start; gap:18px; width:100%; margin:0; padding:24px 6px; text-align:start; background:none; border:0; border-bottom:1px solid var(--line); color:var(--muted); font:inherit; cursor:pointer; transition:color .25s ease, padding .35s var(--ease), background-color .35s var(--ease);}
.slv-tab .n{flex:none; min-width:28px; padding-top:4px; font-size:12.5px; font-weight:700; letter-spacing:.1em; color:var(--faint); transition:color .25s ease;}
.slv-t{display:flex; flex-direction:column; gap:6px; min-width:0;}
.slv-t b{font-size:clamp(18px,1.6vw,21px); font-weight:800; line-height:1.25; letter-spacing:-.01em; color:inherit;}
html[dir="rtl"] .slv-t b{letter-spacing:0; line-height:1.4;}
.slv-t .sum{font-size:15px; line-height:1.5; color:var(--faint); max-height:0; opacity:0; overflow:hidden; transition:max-height .45s var(--ease), opacity .35s ease;}
.slv-tab:hover{color:var(--ink);}
.slv-tab[aria-selected="true"]{color:var(--ink); padding-inline-start:14px; background:var(--paper-2);}
.slv-tab[aria-selected="true"] .n{color:var(--red);}
.slv-tab[aria-selected="true"] .sum{max-height:120px; opacity:1;}
.slv-tab:focus-visible{outline:2px solid var(--blue); outline-offset:-2px; border-radius:6px;}
.slv-panels{display:grid;}
.slv-panel{position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:22px; padding:clamp(30px,4vw,56px); border-radius:var(--radius-lg); color:#fff;
  background:linear-gradient(rgba(140,175,255,.065) 1px, transparent 1px) 0 0/32px 32px, linear-gradient(90deg, rgba(140,175,255,.065) 1px, transparent 1px) 0 0/32px 32px, radial-gradient(520px 360px at 100% 0%, rgba(42,107,255,.28), transparent 70%), var(--navy);
  box-shadow:var(--shadow-lg);}
.slv-panel[hidden]{display:none;}
.slv-panel::before, .slv-panel::after{content:""; position:absolute; width:18px; height:18px; border:solid rgba(170,200,255,.5); pointer-events:none;}
.slv-panel::before{top:16px; inset-inline-start:16px; border-width:1px 0 0 1px;}
.slv-panel::after{bottom:16px; inset-inline-end:16px; border-width:0 1px 1px 0;}
html[dir="rtl"] .slv-panel::before{border-width:1px 1px 0 0;}
html[dir="rtl"] .slv-panel::after{border-width:0 0 1px 1px;}
.slv-k{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-soft);}
html[dir="rtl"] .slv-k{letter-spacing:.02em; font-size:13px;}
.slv-prob{margin:-10px 0 0; font-size:clamp(22px,2.2vw,30px); font-weight:700; line-height:1.28; letter-spacing:-.015em; color:#fff; max-width:560px;}
html[dir="rtl"] .slv-prob{letter-spacing:0; line-height:1.45;}
.slv-caps{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.slv-caps li{font-size:14px; font-weight:600; color:rgba(225,235,255,.9); padding:7px 13px; border:1px solid rgba(150,185,255,.24); border-radius:999px; background:rgba(255,255,255,.035);}
.slv-out{display:flex; flex-direction:column; gap:8px; padding-top:20px; border-top:1px solid rgba(150,185,255,.18);}
.slv-out b{font-size:clamp(17px,1.4vw,20px); font-weight:600; line-height:1.45; color:#fff;}
.slv-panel .textlink{align-self:flex-start; color:var(--blue-soft);}
.slv-panel:not([hidden]) > *{animation:panelIn .55s var(--ease) both;}
.slv-panel:not([hidden]) > :nth-child(2){animation-delay:.05s;}
.slv-panel:not([hidden]) > :nth-child(3){animation-delay:.1s;}
.slv-panel:not([hidden]) > :nth-child(4){animation-delay:.15s;}
.slv-panel:not([hidden]) > :nth-child(5){animation-delay:.2s;}

/* About — capability plate on the office photograph */
.photo .cap-plate{position:absolute; inset-inline:clamp(18px,3vw,32px); bottom:clamp(16px,2.6vw,28px); z-index:1; display:flex; flex-wrap:wrap; gap:8px; font-size:inherit; font-weight:inherit;}
.cap-plate span{font-size:12px; font-weight:700; letter-spacing:.12em; color:#fff; padding:8px 14px; border-radius:999px; background:rgba(14,27,51,.5); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
html[dir="rtl"] .cap-plate span{letter-spacing:0; font-size:13px;}

/* About — Why Newtecx: editorial list; the evidence follows the reason in focus */
.why-sec{overflow:clip;} /* clips like hidden, but keeps the stage sticky */
.why-ed{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:start;}
.why-stage{position:sticky; top:calc(var(--header-h) + 36px); height:min(440px, calc(100vh - var(--header-h) - 72px)); min-height:360px; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(rgba(140,175,255,.07) 1px, transparent 1px) 0 0/32px 32px, linear-gradient(90deg, rgba(140,175,255,.07) 1px, transparent 1px) 0 0/32px 32px, rgba(255,255,255,.025);
  border:1px solid rgba(140,175,255,.16);}
.why-stage::before, .why-stage::after{content:""; position:absolute; width:18px; height:18px; z-index:3; pointer-events:none; border:solid rgba(170,200,255,.55);}
.why-stage::before{top:14px; inset-inline-start:14px; border-width:1px 0 0 1px;}
.why-stage::after{bottom:14px; inset-inline-end:14px; border-width:0 1px 1px 0;}
html[dir="rtl"] .why-stage::before{border-width:1px 1px 0 0;}
html[dir="rtl"] .why-stage::after{border-width:0 0 1px 1px;}
.why-pane{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:clamp(32px,4vw,56px); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .55s var(--ease), transform .55s var(--ease), visibility 0s .55s;}
.why-pane.is-on{opacity:1; visibility:visible; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease), visibility 0s;}
.wp-big{font-size:clamp(88px,10vw,156px); font-weight:800; line-height:.9; letter-spacing:-.05em; color:#fff;}
.wp-cap{margin-top:16px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-soft);}
html[dir="rtl"] .wp-cap{letter-spacing:.02em; font-size:14px;}
.wp-sub{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; align-self:stretch; margin-top:28px; padding-top:20px; border-top:1px solid rgba(150,185,255,.18); font-size:16px; color:var(--text-dark);}
.wp-sub b{font-size:26px; font-weight:800; color:#fff;}
.wp-sub i{font-style:normal; color:rgba(150,185,255,.5);}
.wp-logo{height:46px; width:auto;}
.wp-list{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px;}
.wp-list li{position:relative; padding-inline-start:20px; font-size:17px; font-weight:600; color:#fff;}
.wp-list li::before{content:""; position:absolute; inset-inline-start:0; top:.62em; width:7px; height:7px; background:var(--red);}
.wp-places{display:flex; flex-direction:column; gap:10px; align-self:stretch; margin-top:28px; padding-top:20px; border-top:1px solid rgba(150,185,255,.18);}
.wp-places > span{display:flex; align-items:baseline; justify-content:space-between; gap:16px;}
.wp-places b{font-size:clamp(26px,2.6vw,36px); font-weight:800; letter-spacing:-.02em; color:#fff;}
html[dir="rtl"] .wp-places b{letter-spacing:0;}
.wp-places em{font-style:normal; font-size:15px; font-weight:700; color:var(--blue-soft);}
.wp-plates{display:grid; gap:12px; align-self:stretch;}
.wp-plates > span{display:flex; align-items:center; height:68px; padding-inline:24px; background:#fff; border-radius:var(--radius-sm);}
.wp-photo{padding:0; justify-content:flex-end;}
.wp-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.wp-photo::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(7,16,38,.92), rgba(7,16,38,.15) 62%);}
.wp-steps{position:relative; z-index:2; display:flex; justify-content:space-between; gap:24px; align-self:stretch; padding:clamp(28px,3.4vw,44px);}
.wp-steps::before{content:""; position:absolute; top:calc(clamp(28px,3.4vw,44px) + 5px); inset-inline:calc(clamp(28px,3.4vw,44px) + 6px); height:1px; background:rgba(190,212,255,.45);}
.wp-steps > span{position:relative; max-width:46%; padding-top:26px; font-size:17px; font-weight:700; line-height:1.3; color:#fff;}
.wp-steps > span::before{content:""; position:absolute; top:0; inset-inline-start:0; width:11px; height:11px; border-radius:50%; background:var(--navy); border:2px solid var(--blue-soft);}
.wp-steps > span:last-child{text-align:end;}
.wp-steps > span:last-child::before{inset-inline-start:auto; inset-inline-end:0; background:var(--red); border-color:var(--red);}
.why-list{list-style:none; margin:0; padding:0;}
.why-item{padding:clamp(24px,2.6vw,34px) 0; border-top:1px solid var(--line-dark);}
.why-item:first-child{border-top:0; padding-top:0;}
.why-item .n{font-size:12.5px; font-weight:700; letter-spacing:.14em; color:rgba(150,185,255,.5); transition:color .4s ease;}
.why-item h3{margin-top:10px; font-size:clamp(21px,2vw,28px); font-weight:800; line-height:1.2; letter-spacing:-.015em; color:rgba(255,255,255,.5); transition:color .4s ease;}
html[dir="rtl"] .why-item h3{letter-spacing:0; line-height:1.4;}
.why-item p{margin-top:10px; max-width:520px; font-size:16.5px; line-height:1.6; color:rgba(215,228,252,.42); transition:color .4s ease;}
.why-item.is-on .n{color:var(--blue-soft);}
.why-item.is-on h3{color:#fff;}
.why-item.is-on p{color:var(--text-dark);}

/* Regional Presence — photographic hero (Doha), veiled toward the copy side */
.page-hero.has-photo{padding-block:clamp(72px,9vw,128px) clamp(80px,10vw,136px);}
.hero-photo{position:absolute; inset:0; overflow:hidden;}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:center 40%; transform:scale(1.05); animation:heroSettle 2.4s var(--ease) .1s forwards;}
@keyframes heroSettle{to{transform:none;}}
.hero-photo-veil{position:absolute; inset:0; background:linear-gradient(100deg, rgba(7,16,38,.95) 0%, rgba(7,16,38,.84) 40%, rgba(7,16,38,.5) 70%, rgba(7,16,38,.62) 100%), linear-gradient(to top, rgba(7,16,38,.9), rgba(7,16,38,.1) 50%);}
html[dir="rtl"] .hero-photo-veil{background:linear-gradient(-100deg, rgba(7,16,38,.95) 0%, rgba(7,16,38,.84) 40%, rgba(7,16,38,.5) 70%, rgba(7,16,38,.62) 100%), linear-gradient(to top, rgba(7,16,38,.9), rgba(7,16,38,.1) 50%);}
.page-hero.has-photo .wrap{position:relative;}

@media (max-width:900px){
  .slv{grid-template-columns:1fr;}
  .slv-panel{padding:28px 24px; gap:18px; border-radius:var(--radius);}
  .why-ed{grid-template-columns:1fr;}
  .why-stage{display:none;}
  .why-item .n{color:var(--blue-soft);}
  .why-item h3{color:#fff;}
  .why-item p{color:var(--text-dark);}
  .hero-photo-veil, html[dir="rtl"] .hero-photo-veil{background:linear-gradient(to top, rgba(7,16,38,.94), rgba(7,16,38,.72));}
}
@media (max-width:620px){
  .cap-plate span{font-size:10.5px; padding:6px 10px;}
}
/* =========================================================================
   v6.1 — homepage capability row, balanced client logos, marquee control
   ========================================================================= */

/* Homepage — four capabilities, each listing its solutions (compact, no tooltips) */
.hm-caps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:clamp(28px,3.4vw,40px);}
.hm-cap{position:relative; display:flex; flex-direction:column; gap:12px; padding:4px clamp(18px,2.2vw,30px);}
.hm-cap:first-child{padding-inline-start:0;}
.hm-cap:last-child{padding-inline-end:0;}
.hm-cap + .hm-cap::before{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:1px; background:linear-gradient(to bottom, transparent, rgba(150,185,255,.28), transparent);}
.hm-cap-ic{display:grid; place-items:center; width:44px; height:44px; color:rgba(170,200,255,.8); transition:color .35s ease, filter .35s ease;}
.hm-cap-ic svg{width:38px; height:38px;}
.hm-cap:hover .hm-cap-ic{color:#fff; filter:drop-shadow(0 0 12px rgba(90,140,255,.55));}
.hm-cap h3{font-size:clamp(18px,1.5vw,21px); font-weight:700; line-height:1.25; color:#fff;}
html[dir="rtl"] .hm-cap h3{line-height:1.4;}
.hm-cap ul{list-style:none; margin:2px 0 0; padding:0; display:grid; gap:9px;}
.hm-cap a{display:inline-flex; align-items:baseline; gap:10px; font-size:15px; line-height:1.4; color:var(--text-dark); transition:color .25s ease;}
.hm-cap a::before{content:""; flex:none; width:5px; height:5px; translate:0 -2px; background:rgba(150,185,255,.45); transition:background-color .25s ease;}
.hm-cap a.lead{color:rgba(235,242,255,.95); font-weight:600;}
.hm-cap a.lead::before{background:var(--red);}
.hm-cap a:hover{color:#fff;}
.hm-cap a:hover::before{background:#fff;}
.hm-cap a:focus-visible{outline:2px solid var(--blue-soft); outline-offset:3px; border-radius:3px;}
.hm-band-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px 32px;}
.hm-band-cta{padding-bottom:6px;}

/* Client logos — each box sized for equal visual weight (--w from the generator), never distorted */
.lg{height:auto; min-height:64px;}
.lg img, .lg.rev img{width:calc(var(--w, 130) * 1px); height:auto; max-width:none; object-fit:contain;}
.tile img, .tile.rev img{width:calc(var(--w, 130) * 1.12px); max-width:84%; height:auto; max-height:none; object-fit:contain;}

/* Homepage — client tracks: pause control; tracks also pause on hover and keyboard focus */
.hm-proof-links{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 20px;}
.mq-toggle{display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 11px; border:1px solid var(--line-strong); border-radius:999px; background:#fff; font:inherit; font-size:13px; font-weight:700; color:var(--muted); cursor:pointer; transition:color .2s ease, border-color .2s ease;}
.mq-toggle:hover{color:var(--ink); border-color:var(--ink);}
.mq-toggle:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.mq-toggle svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.mq-toggle .i-play{fill:currentColor; stroke:none;}
.mq-toggle .i-play, .mq-toggle .when-paused{display:none;}
.mq-toggle[data-paused="true"] .i-play, .mq-toggle[data-paused="true"] .when-paused{display:inline;}
.mq-toggle[data-paused="true"] .i-pause, .mq-toggle[data-paused="true"] .when-run{display:none;}
.hm-tracks.is-paused .mq-track, .hm-tracks:focus-within .mq-track{animation-play-state:paused;}
/* Marquees run on a left-anchored track in both languages: in RTL the track used to
   anchor right and slide out of view. Arabic keeps its reversed travel direction. */
html[dir="rtl"] .mq{direction:ltr;}

@media (max-width:900px){
  .hm-caps{grid-template-columns:1fr 1fr; row-gap:30px;}
  .hm-cap, .hm-cap:first-child, .hm-cap:last-child{padding-inline:0 18px;}
  .hm-cap:nth-child(even){padding-inline:20px 0;}
  .hm-cap:nth-child(odd)::before{display:none;}
}
@media (max-width:620px){
  .lg img, .lg.rev img{width:calc(var(--w, 130) * .78px);}
  .tile img, .tile.rev img{width:calc(var(--w, 130) * .82px);}
}
@media (max-width:520px){
  .hm-caps{grid-template-columns:1fr; row-gap:26px;}
  .hm-cap, .hm-cap:nth-child(even){display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:14px; row-gap:10px; padding-inline:0;}
  .hm-cap::before{display:none;}
  .hm-cap-ic{width:36px; height:36px;} .hm-cap-ic svg{width:32px; height:32px;}
  .hm-cap ul{grid-column:1 / -1;}
}

@media (prefers-reduced-motion:reduce){
  .mq-toggle{display:none;} /* the tracks are already static */
  .hm-cap-ic, .hm-cap a, .hm-cap a::before{transition:none;}
  .slv-panel:not([hidden]) > *{animation:none;}
  .slv-tab, .slv-t .sum, .why-item .n, .why-item h3, .why-item p{transition:none;}
  .why-pane, .why-pane.is-on{transition:none; transform:none;}
  .hero-photo img{animation:none; transform:none;}
}

/* =========================================================================
   v6.3 — motion refinements: off-screen loop rest, one hover physics
   ========================================================================= */

/* endless animations rest while their section is off-screen (class set in newtecx.js) */
.loops-off, .loops-off *, .loops-off *::before, .loops-off *::after{animation-play-state:paused !important;}

/* Hover physics: whole cards lift 3px, logos/images inside lift 3px, buttons and chips keep
   2px; every lift uses --hover (0.3s). Component cues stay as they were: icon glow, arrow
   nudge, image zoom inside product cards, map/office linking, the Sanad frame tilt. */
.feat-i:hover, .hm-sol-i:hover, .office:hover, .platform:hover, .tech:hover, .hm-tile:hover, .hm-pcard:hover, .hm-sector:hover, .msi > div:hover{transform:translateY(-3px);}
.badge:hover img, .hm-badges figure:hover img{transform:translateY(-3px);}
.tile:hover img{transform:translateY(-3px) scale(1.02);}
.feat-i, .hm-sol-i, .office, .platform, .tech, .hm-tile, .hm-pcard, .hm-sector, .msi > div, .tile, .tile img, .badge img, .hm-badges figure img, .lg img{transition-duration:var(--hover);}
/* press states (v5) still win over the lift while pressed */
.hm-tile:active, .hm-sector:active, .hm-pcard:active{transform:translateY(-1px); transition-duration:.12s;}
@media (prefers-reduced-motion:reduce){
  .hm-tile:active, .hm-sector:active, .hm-pcard:active{transform:none;}
}

/* ---------- About hero ----------
   The office photograph is a full-height panel running to the page edge on the image
   side (never mirrored, so the NEWTECX sign reads in both languages); navy gradients
   blend it into the text side and the foot, where the company figures sit. */
.ab-hero{--ab-copy:590px; position:relative; overflow:hidden; isolation:isolate; display:flex; min-height:clamp(620px,80vh,780px); background:var(--navy-deep); color:#fff;}
.ab-hero-media{position:absolute; top:0; bottom:0; inset-inline-end:0; inset-inline-start:max(52%, calc((100% - var(--maxw)) / 2 + var(--gutter) + var(--ab-copy) + 24px)); z-index:-2; overflow:hidden;}
.ab-hero-media img{width:100%; height:100%; max-width:none; object-fit:cover; object-position:95% 45%; animation:hmZoom 18s var(--ease) both;}
html[dir="rtl"] .ab-hero-media img{object-position:100% 45%;}
.ab-hero-media::after{content:""; position:absolute; inset:0;
  background:radial-gradient(520px 320px at 62% 8%, rgba(143,182,255,.16), transparent 70%),
             linear-gradient(90deg, var(--navy-deep) 0%, rgba(10,20,38,.6) 7%, rgba(10,20,38,0) 20%),
             linear-gradient(rgba(42,107,255,.06), rgba(42,107,255,.06));}
html[dir="rtl"] .ab-hero-media::after{background:radial-gradient(520px 320px at 38% 8%, rgba(143,182,255,.16), transparent 70%),
             linear-gradient(270deg, var(--navy-deep) 0%, rgba(10,20,38,.6) 7%, rgba(10,20,38,0) 20%),
             linear-gradient(rgba(42,107,255,.06), rgba(42,107,255,.06));}
.ab-hero-veil{position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(680px 480px at 12% 22%, rgba(42,107,255,.24), transparent 66%),
             linear-gradient(to top, var(--navy-deep) 0%, rgba(10,20,38,.88) 18%, rgba(10,20,38,0) 44%);}
html[dir="rtl"] .ab-hero-veil{background:radial-gradient(680px 480px at 88% 22%, rgba(42,107,255,.24), transparent 66%),
             linear-gradient(to top, var(--navy-deep) 0%, rgba(10,20,38,.88) 18%, rgba(10,20,38,0) 44%);}
.ab-hero .dotgrid{z-index:-1; width:50%; -webkit-mask-image:linear-gradient(to bottom, #000, transparent 75%); mask-image:linear-gradient(to bottom, #000, transparent 75%);}
html[dir="rtl"] .ab-hero .dotgrid{inset-inline-start:auto; right:0; left:auto;}
.ab-hero-in{position:relative; display:flex; flex-direction:column; width:100%; padding-block:clamp(40px,5vw,72px) clamp(32px,3.6vw,48px);}
.ab-hero-copy{max-width:var(--ab-copy); margin-block:auto;}
.ab-hero .h1{margin-top:22px; font-size:clamp(34px,3.9vw,54px);}
.ab-hero .lead{margin-top:24px; max-width:540px; font-size:clamp(17px,1.35vw,19.5px); line-height:1.65; color:rgba(232,239,252,.9);}
.ab-proof{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:clamp(40px,5vw,64px); border-top:1px solid rgba(160,190,255,.2);}
.ab-proof li{padding:22px 22px 0; border-inline-start:1px solid rgba(160,190,255,.14);}
.ab-proof li:first-child{padding-inline-start:0; border-inline-start:0;}
.ab-proof b{display:block; font-size:clamp(30px,3vw,42px); font-weight:800; line-height:1; letter-spacing:-.02em; color:#fff;}
.ab-proof li > span{display:block; margin-top:10px; font-size:14.5px; font-weight:600; line-height:1.4; color:rgba(225,235,255,.82);}
/* ---------- About: Who we are · regional band · what sets us apart ---------- */
/* photo + text sections, after the Public About page: the photograph keeps its own 3:2
   and runs out to the viewport edge on its side (square there, rounded toward the text);
   the section is the container, so 100cqw is the page width without the scrollbar */
.ab-who, .ab-apart{container-type:inline-size;}
.ab-who .split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(40px,5.5vw,88px); align-items:center;}
.ab-apart .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px,5.5vw,88px); align-items:center;}
.ab-bleed{--bleed:calc(-1 * (max((100cqw - var(--maxw)) / 2, 0px) + var(--gutter))); position:relative; margin:0; overflow:hidden; aspect-ratio:3/2;}
.ab-bleed img{width:100%; height:100%; object-fit:cover;}
.ab-bleed-start{margin-inline-start:var(--bleed); border-start-end-radius:var(--radius); border-end-end-radius:var(--radius);}
.ab-bleed-end{margin-inline-end:var(--bleed); border-start-start-radius:var(--radius); border-end-start-radius:var(--radius);}
.ab-copy .h2{margin-top:16px;}
.ab-copy .lead{margin-top:20px; max-width:32em;}
.ab-themes{display:grid; grid-template-columns:repeat(2,max-content); gap:10px 36px; margin-top:28px; font-size:15.5px; font-weight:700; color:var(--ink);}
.ab-themes li{display:flex; align-items:center; gap:10px;}
.ab-themes li::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--blue);}
@media (max-width:620px){ .ab-themes{grid-template-columns:1fr;} }

.ab-band{position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:flex-end; min-height:clamp(420px,40vw,560px); background:var(--navy-deep); color:#fff;}
.ab-band-bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 62%;}
.ab-band-scrim{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(10,18,38,.9) 0%, rgba(10,18,38,.66) 40%, rgba(10,18,38,.12) 100%),
             linear-gradient(to top, rgba(10,18,38,.6), rgba(10,18,38,0) 55%);}
html[dir="rtl"] .ab-band-scrim{background:linear-gradient(270deg, rgba(10,18,38,.9) 0%, rgba(10,18,38,.66) 40%, rgba(10,18,38,.12) 100%),
             linear-gradient(to top, rgba(10,18,38,.6), rgba(10,18,38,0) 55%);}
.ab-band-in{width:100%; padding-block:clamp(72px,9vw,120px) clamp(48px,6vw,80px);}
.ab-band .h2{margin-top:16px; max-width:620px; color:#fff;}
.ab-band .lead{margin-top:16px; max-width:540px; color:rgba(232,239,252,.86);}
.ab-band .links{margin-top:26px;}
.ab-band .textlink{color:var(--blue-soft);}

.ab-apart-list{margin-top:30px; border-top:1px solid var(--line);}
.ab-apart-list li{display:grid; grid-template-columns:34px minmax(0,1fr); gap:0 12px; padding-block:20px; border-bottom:1px solid var(--line);}
.ab-apart-list .n{padding-top:3px; font-size:12.5px; font-weight:800; letter-spacing:.1em; color:var(--blue);}
.ab-apart-list h3{font-size:18px; font-weight:800; line-height:1.3;}
.ab-apart-list p{margin-top:6px; font-size:15px; line-height:1.6; color:var(--muted);}
.ab-fig{display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin-top:10px; font-size:14px; font-weight:700; color:var(--ink); transition:color .2s;}
.ab-fig b{font-size:20px; font-weight:800; color:var(--blue);}
.ab-fig i{font-style:normal; color:var(--faint);}
.ab-fig:hover{color:var(--blue);}
@media (max-width:900px){
  .ab-who .split, .ab-apart .split{grid-template-columns:1fr; gap:36px;}
  .ab-bleed-start, .ab-bleed-end{margin-inline:calc(-1 * var(--gutter)); border-radius:0;}
  .ab-band-scrim, html[dir="rtl"] .ab-band-scrim{background:linear-gradient(to top, rgba(10,18,38,.92) 0%, rgba(10,18,38,.7) 45%, rgba(10,18,38,.25) 100%);}
}
@media (max-width:1080px){
  .ab-hero{--ab-copy:460px;}
}
@media (max-width:900px){
  .ab-hero{display:block; min-height:0;}
  .ab-hero-media{position:relative; inset:auto; aspect-ratio:3/2; max-height:62vh;}
  .ab-hero-media img, html[dir="rtl"] .ab-hero-media img{object-position:80% 45%;}
  .ab-hero-media::after, html[dir="rtl"] .ab-hero-media::after{background:linear-gradient(to top, var(--navy-deep) 0%, rgba(10,20,38,.5) 22%, rgba(10,20,38,0) 50%);}
  .ab-hero .dotgrid{display:none;}
  .ab-hero-veil{display:none;}
  .ab-hero-in{padding-top:8px;}
  .ab-hero-copy{max-width:none;}
  .ab-proof{grid-template-columns:1fr 1fr;}
  .ab-proof li:nth-child(3){padding-inline-start:0; border-inline-start:0;}
  .ab-proof li:nth-child(n+3){margin-top:22px;}
}
@media (prefers-reduced-motion:reduce){ .ab-hero-media img{animation:none;} }

/* ---------- solution platform cards: vendor logos ---------- */
.platform .vendor.vmark{display:flex; align-items:center; height:22px;}
.platform .vmark img{width:auto; max-width:120px; height:17px; object-fit:contain;}
.platform .vmark.odoo img{height:21px;} .platform .vmark.oracle img{height:12px;}
.platform h3.has-ic{display:flex; align-items:center; gap:10px;}
.platform h3.has-ic img{flex:none; width:24px; height:24px; object-fit:contain;}

/* ==========================================================================
   Microsoft Solutions — microsoft.html, microsoft-erp.html, microsoft-crm.html
   Built from the approved patterns: navy hero, photos running to the page edge
   (.ab-bleed, About), numbered rows on thin rules, light/white/navy rhythm.
   ========================================================================== */
/* product labels: Microsoft products carry the four squares, Newtecx work a blue dot */
.ms-tag{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--muted); white-space:nowrap;}
.ms-tag svg{width:11px; height:11px; flex:none;}
.ms-tag i{width:7px; height:7px; flex:none; border-radius:50%; background:var(--blue);}
.bg-navy .ms-tag{color:rgba(205,222,255,.78);}
.ms-ic{display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:12px; background:var(--blue-ghost); color:var(--blue);}
.ms-ic svg{width:22px; height:22px;}

/* overview hero: Microsoft products around the Microsoft mark */
.ms-ring{position:relative; width:min(100%,360px); aspect-ratio:1; margin-inline:auto; direction:ltr; container-type:inline-size;}
.ms-ring::before{content:""; position:absolute; inset:16%; border-radius:50%; border:1px dashed rgba(150,185,255,.28);}
.ms-ring::after{content:""; position:absolute; inset:30%; border-radius:50%; background:radial-gradient(circle, rgba(59,123,255,.35), transparent 70%);}
.ms-ring-core{position:absolute; top:50%; left:50%; z-index:1; transform:translate(-50%,-50%); display:grid; place-items:center;}
.ms-ring-core img{width:96px; height:auto;}
.ms-ring-i{position:absolute; top:50%; left:50%; z-index:1; display:grid; place-items:center; width:68px; height:68px; margin:-34px 0 0 -34px; border-radius:20px; background:#fff; box-shadow:0 18px 40px -18px rgba(0,0,0,.6); transform:rotate(var(--a)) translate(34cqi) rotate(calc(-1 * var(--a)));}
.ms-ring-i img{width:36px; height:36px; object-fit:contain;}
.ms-proof{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line-dark);}
.ms-proof > div{font-size:13.5px; line-height:1.4; color:var(--text-dark);}
.ms-proof b{display:block; font-size:20px; font-weight:800; color:#fff; line-height:1.2;}
.ms-proof > div:first-child b{font-size:16px;}
.ms-proof .textlink{grid-column:1 / -1; color:var(--blue-soft); justify-self:start;}
.page-hero .btns{align-items:center; gap:14px 26px;}
.page-hero .btns .textlink{color:var(--blue-soft);}

/* two pillars, ERP and CRM, separated by a rule rather than set in cards */
.ms-pillar-grid{display:grid; grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr); gap:clamp(28px,4.5vw,64px);}
.ms-pillar-grid .vsep{background:var(--line);}
.ms-pillar-k{display:flex; align-items:center; gap:12px; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--blue);}
html[dir="rtl"] .ms-pillar-k{letter-spacing:.02em;}
.ms-pillar-k img{width:34px; height:34px; object-fit:contain;}
.ms-pillar h3{margin-top:18px; font-size:clamp(22px,2.1vw,28px); font-weight:800; line-height:1.22; letter-spacing:-.015em;}
html[dir="rtl"] .ms-pillar h3{letter-spacing:0; line-height:1.45;}
.ms-pillar > p{margin-top:12px; font-size:16.5px; line-height:1.6; color:var(--muted); max-width:32em;}
.ms-pillar-mods{display:flex; flex-wrap:wrap; gap:8px 0; margin-top:20px; font-size:14.5px; font-weight:700; color:var(--ink);}
.ms-pillar-mods li + li::before{content:"\00B7"; margin-inline:10px; color:var(--blue);}
.ms-pillar .textlink{margin-top:22px;}

/* delivery steps, one numbered line */
.ms-deliver{margin-top:clamp(48px,6vw,80px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line);}
.ms-deliver-t{margin-top:14px; font-size:clamp(19px,1.7vw,23px); font-weight:800; line-height:1.3;}
.ms-deliver ol{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; margin-top:22px;}
.ms-deliver li{display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:2px solid var(--blue); font-size:15px; font-weight:700; line-height:1.35;}
.ms-deliver li + li{border-top-color:var(--line-strong);}
.ms-deliver .n{font-size:12px; font-weight:800; letter-spacing:.1em; color:var(--blue);}

/* AI & Copilot: Microsoft Copilot beside the assistants Newtecx builds */
.ms-ai-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,4vw,56px); align-items:start;}
.ms-ai-ms{padding:clamp(26px,3vw,36px); border:1px solid rgba(150,185,255,.2); border-radius:var(--radius-lg); background:rgba(255,255,255,.04);}
.ms-ai-logo{display:flex; align-items:center; gap:14px; margin-top:18px;}
.ms-ai-logo img{width:44px; height:auto;}
.ms-ai-logo h3, .ms-ai-nx h3{font-size:clamp(21px,1.9vw,26px); font-weight:800; color:#fff; line-height:1.25;}
.ms-ai-nx h3{margin-top:16px;}
.ms-ai-ms > p, .ms-ai-lead{margin-top:14px; font-size:16px; line-height:1.6; color:var(--text-dark);}
.ms-ai-list{margin-top:22px; border-top:1px solid var(--line-dark);}
.ms-ai-list li{padding:16px 0; border-bottom:1px solid var(--line-dark);}
.ms-ai-list b{display:block; font-size:16.5px; font-weight:800; color:#fff;}
.ms-ai-list span{display:block; margin-top:4px; font-size:15px; line-height:1.55; color:var(--text-dark);}
.ms-ai-list.two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(20px,3vw,40px);}
.ms-ai-nx .links{margin-top:22px;}

/* every day on Microsoft: photo to the page edge, three numbered rows */
.ms-every{container-type:inline-size;}
.ms-every .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,5.5vw,88px); align-items:center;}
.ms-rows{margin-top:28px; border-top:1px solid var(--line);}
.ms-rows > li{display:grid; grid-template-columns:34px minmax(0,1fr); gap:0 12px; padding-block:22px; border-bottom:1px solid var(--line);}
.ms-rows .n{padding-top:3px; font-size:12.5px; font-weight:800; letter-spacing:.1em; color:var(--blue);}
.ms-rows h3{font-size:18px; font-weight:800; line-height:1.3;}
.ms-rows p{margin-top:6px; font-size:15.5px; line-height:1.6; color:var(--muted);}
/* product marks at one height: square icons and the Power Platform wordmarks alike */
.ms-logos{display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:16px;}
.ms-logos img{width:auto; height:30px; max-width:140px; object-fit:contain;}

/* built by Newtecx: the apps as real screenshots, then portals and Sanad */
.ms-apps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,28px);}
.ms-apps a{display:flex; flex-direction:column; gap:6px; height:100%;}
.ms-app-shot{display:block; aspect-ratio:4/3; margin-bottom:10px; overflow:hidden; border-radius:var(--radius); background:#fff; border:1px solid var(--line); transition:transform var(--hover,.3s) var(--ease), box-shadow var(--hover,.3s) var(--ease);}
.ms-app-shot img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.ms-apps a:hover .ms-app-shot{transform:translateY(-3px); box-shadow:var(--shadow);}
.ms-apps b{font-size:16.5px; font-weight:800; line-height:1.3; transition:color .2s;}
.ms-apps a:hover b{color:var(--blue);}
.ms-app-t{font-size:14.5px; line-height:1.5; color:var(--muted);}
.ms-apps .ms-tag{margin-top:auto; padding-top:8px; white-space:normal;}
.ms-custom-foot{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,56px); margin-top:clamp(40px,5vw,64px); padding-top:clamp(28px,3vw,40px); border-top:1px solid var(--line);}
.ms-custom-foot h3{margin-top:14px; font-size:19px; font-weight:800; line-height:1.3;}
.ms-custom-foot p{margin-top:8px; font-size:15.5px; line-height:1.6; color:var(--muted);}
.ms-pair{display:flex; align-items:center; gap:16px;}
.ms-pair img{width:auto; height:30px;}
.ms-pair img:first-child{width:30px; object-fit:contain;}

/* ERP / CRM: hero platform panel */
.ms-platforms .ms-lockup{width:auto; height:30px; max-width:100%;}
.ms-platforms .lbl{display:block; margin-top:22px;}
.ms-platforms ul{margin-top:10px; display:grid; gap:8px;}
.ms-platforms li{font-size:16.5px; font-weight:700; color:#fff;}

/* ERP / CRM: module explorer (tabs, [data-tabs] in newtecx.js) */
.ms-x{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(24px,4vw,56px); align-items:start;}
.ms-x-tabs{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.ms-x-tab{display:flex; align-items:flex-start; gap:14px; width:100%; margin:0; padding:18px 8px; text-align:start; background:none; border:0; border-bottom:1px solid var(--line); color:var(--muted); font:inherit; cursor:pointer; transition:color .25s, padding .35s var(--ease), background-color .35s var(--ease);}
.ms-x-tab .ms-ic{width:38px; height:38px; border-radius:10px; background:transparent; color:var(--faint); transition:background-color .25s, color .25s;}
.ms-x-tab .ms-ic svg{width:20px; height:20px;}
.ms-x-t{display:flex; flex-direction:column; gap:4px; min-width:0; padding-top:6px;}
.ms-x-t b{font-size:17.5px; font-weight:800; line-height:1.25; color:inherit;}
.ms-x-t .sum{font-size:14.5px; line-height:1.45; color:var(--faint); max-height:0; opacity:0; overflow:hidden; transition:max-height .45s var(--ease), opacity .35s;}
.ms-x-tab:hover{color:var(--ink);}
.ms-x-tab[aria-selected="true"]{color:var(--ink); padding-inline-start:14px; background:var(--paper-2);}
.ms-x-tab[aria-selected="true"] .ms-ic{background:var(--blue-ghost); color:var(--blue);}
.ms-x-tab[aria-selected="true"] .sum{max-height:90px; opacity:1;}
.ms-x-tab:focus-visible{outline:2px solid var(--blue); outline-offset:-2px; border-radius:6px;}
.ms-x-panel{display:grid; gap:0; padding:clamp(8px,1.5vw,16px) clamp(24px,3vw,40px); border-radius:var(--radius-lg); background:var(--light);}
.ms-x-panel[hidden]{display:none;}
.ms-x-panel:not([hidden]) > *{animation:panelIn .5s var(--ease) both;}
.ms-mod{padding-block:clamp(22px,2.6vw,30px);}
.ms-mod + .ms-mod{border-top:1px solid var(--line);}
.ms-mod-h{display:flex; align-items:flex-start; gap:14px;}
.ms-mod-h > div{display:flex; flex-direction:column; gap:6px; min-width:0;}
.ms-mod-h h3{font-size:clamp(19px,1.6vw,22px); font-weight:800; line-height:1.25;}
.ms-mod-logo{margin-inline-start:auto; width:auto; height:30px; max-width:150px; object-fit:contain;}
.ms-mod-helps{margin-top:14px; font-size:16.5px; line-height:1.55; font-weight:600; color:var(--ink);}
.ms-mod-pts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; margin-top:14px;}
.ms-mod-pts li{position:relative; padding-inline-start:16px; font-size:15px; line-height:1.5; color:var(--muted);}
.ms-mod-pts li::before{content:""; position:absolute; inset-inline-start:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--blue);}
.ms-mod-apps{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:16px; font-size:14.5px; font-weight:700;}
.ms-mod-apps > span{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);}
html[dir="rtl"] .ms-mod-apps > span{letter-spacing:.02em;}
.ms-mod-apps a{display:inline-flex; align-items:center; gap:6px; color:var(--blue);}
.ms-mod-apps a .arr{width:14px; height:14px;}
html[dir="rtl"] .ms-mod-apps a .arr{transform:scaleX(-1);}

/* ERP / CRM: closing band — delivery or Sanad, beside the sectors */
.ms-close{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:clamp(32px,5vw,80px); align-items:start;}
.ms-close .ms-deliver{margin-top:0; padding-top:0; border-top:0;}
.ms-close .ms-deliver ol{grid-template-columns:repeat(3,minmax(0,1fr));}
.ms-together .ms-pair{margin-top:18px;}
.ms-together h3{margin-top:18px; font-size:clamp(21px,2vw,27px); font-weight:800; line-height:1.25;}
.ms-together > p{margin-top:10px; font-size:16px; line-height:1.6; color:var(--muted); max-width:36em;}
.ms-proofline{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:16px; font-size:15px; font-weight:600; color:var(--ink);}
.ms-together .textlink{margin-top:18px;}
.ms-sectors ul{margin-top:14px; border-top:1px solid var(--line);}
.ms-sectors li a{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; font-weight:700; transition:color .2s, padding .3s var(--ease);}
.ms-sectors li a:hover{color:var(--blue); padding-inline-start:6px;}
.ms-sectors .arr{width:16px; height:16px; flex:none; color:var(--blue);}
html[dir="rtl"] .ms-sectors .arr{transform:scaleX(-1);}
.ms-sectors .more-l{color:var(--faint);}
.ms-close-deliver .ms-deliver{margin-top:clamp(40px,5vw,64px);}
.ms-cross{margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid var(--line);}

@media (max-width:1080px){
  .ms-deliver ol{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ms-apps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ms-close{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .ms-pillar-grid{grid-template-columns:1fr;}
  .ms-pillar-grid .vsep{width:auto; height:1px;}
  .ms-ai-grid, .ms-x, .ms-custom-foot{grid-template-columns:1fr;}
  .ms-every .split{grid-template-columns:1fr; gap:36px;}
  .ms-x-tabs{flex-direction:row; overflow-x:auto; border-top:0; border-bottom:1px solid var(--line); scrollbar-width:none;}
  .ms-x-tabs::-webkit-scrollbar{display:none;}
  .ms-x-tab{flex:none; width:auto; align-items:center; padding:12px 14px; border-bottom:2px solid transparent;}
  .ms-x-tab[aria-selected="true"]{padding-inline-start:14px; background:none; border-bottom-color:var(--blue);}
  .ms-x-t{padding-top:0;}
  .ms-x-t .sum{display:none;}
  .ms-x-tab .ms-ic{width:30px; height:30px;}
}
@media (max-width:620px){
  .ms-proof{grid-template-columns:1fr 1fr;}
  .ms-proof > div:first-child{grid-column:1 / -1;}
  .ms-deliver ol, .ms-close .ms-deliver ol{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ms-ai-list.two, .ms-mod-pts, .ms-apps{grid-template-columns:1fr;}
  .ms-x-panel{padding-inline:20px;}
  .ms-ring{width:min(100%,300px);}
  .ms-ring-i{width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:16px;}
  .ms-ring-i img{width:30px; height:30px;}
}
@media (prefers-reduced-motion:reduce){
  .ms-x-panel:not([hidden]) > *{animation:none;}
  .ms-x-tab, .ms-x-t .sum{transition:none;}
}

/* ---------- How We Deliver (ported page, sanad-pages.css): the corporate page-hero ----------
   The original page opened on a white hero that ran straight into the white steps section. It now opens like
   every corporate page: navy, the network photograph and glow of .page-hero, then white steps → light
   capabilities → navy → closing band. The illustration sits on a white panel so the navy logo stays legible. */
.sp.sp-page-how-we-deliver .sp-hero{background:var(--navy); color:#fff; isolation:isolate;}
.sp.sp-page-how-we-deliver .sp-hero::before, .sp.sp-page-how-we-deliver .sp-hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;}
.sp.sp-page-how-we-deliver .sp-hero::before{background:url(../img/photo/network-dark.jpg) center / cover; opacity:.28; mix-blend-mode:screen; -webkit-mask-image:linear-gradient(to left, #000 20%, transparent 85%); mask-image:linear-gradient(to left, #000 20%, transparent 85%);}
html[dir="rtl"] .sp.sp-page-how-we-deliver .sp-hero::before{-webkit-mask-image:linear-gradient(to right, #000 20%, transparent 85%); mask-image:linear-gradient(to right, #000 20%, transparent 85%); transform:scaleX(-1);}
.sp.sp-page-how-we-deliver .sp-hero::after{background:radial-gradient(900px 560px at 80% 0%, rgba(42,107,255,.22), transparent 62%), radial-gradient(680px 520px at 6% 100%, rgba(42,107,255,.12), transparent 60%);}
.sp.sp-page-how-we-deliver .sp-hero .sp-kicker{color:var(--blue-soft);}
.sp.sp-page-how-we-deliver .sp-hero .sp-display{color:#fff;}
.sp.sp-page-how-we-deliver .sp-hero .sp-lead{color:rgba(228,236,252,.82);}
.sp.sp-page-how-we-deliver .sp-hwd-art-card{background:#fff; border-radius:var(--radius-lg); padding:clamp(28px,3vw,40px); box-shadow:0 40px 90px -40px rgba(0,0,0,.8);}