/* SUPLIVIA v3 — built on SUPLIVIA Brand Identity Guidelines v1.0 (Oct 2026).
   Colour p.14–15 · Type p.16 · Graphic language (bar, route lines, arrow) p.17 · Digital p.30 */

/* Display: Inter (Latin) + Cairo (Arabic). Text: Inter (Latin) + IBM Plex Sans Arabic. */
@font-face{font-family:"Sup Display";src:url("assets/fonts/cairo-600.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Sup Display";src:url("assets/fonts/cairo-700.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Sup Display";src:url("assets/fonts/inter-600.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-05FF,U+2000-206F,U+20A0-20CF,U+2190-21FF}
@font-face{font-family:"Sup Display";src:url("assets/fonts/inter-700.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-05FF,U+2000-206F,U+20A0-20CF,U+2190-21FF}
@font-face{font-family:"Sup Text";src:url("assets/fonts/plex-arabic-400.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Sup Text";src:url("assets/fonts/plex-arabic-500.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Sup Text";src:url("assets/fonts/plex-arabic-600.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Sup Text";src:url("assets/fonts/plex-arabic-700.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Sup Text";src:url("assets/fonts/inter-400.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-05FF,U+2000-206F,U+20A0-20CF,U+2190-21FF}
@font-face{font-family:"Sup Text";src:url("assets/fonts/inter-500.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-05FF,U+2000-206F,U+20A0-20CF,U+2190-21FF}
@font-face{font-family:"Sup Text";src:url("assets/fonts/inter-600.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-05FF,U+2000-206F,U+20A0-20CF,U+2190-21FF}
@font-face{font-family:"Sup Text";src:url("assets/fonts/inter-700.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-05FF,U+2000-206F,U+20A0-20CF,U+2190-21FF}

:root{
  /* Brand palette (p.14) */
  --navy:#071B33;--deep:#0D3B7A;--royal:#1A56DB;--sky:#6CB4FF;--ice:#EAF2FD;
  --slate:#52627A;--mist:#CFD8E6;--silver:#A8B3C2;--ink:#0B1220;--white:#FFFFFF;
  /* Semantic */
  --text:var(--navy);--text-2:var(--slate);--line:var(--mist);
  --on-navy:#FFFFFF;--on-navy-2:#B8C6DA;
  --royal-hover:#1547B8;--danger:#B42318;--danger-bg:#FEF3F2;--ok:#067647;
  --font-display:"Sup Display","Segoe UI",Arial,sans-serif;
  --font-text:"Sup Text","Segoe UI",Arial,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:104px;
  --r:4px;--r-card:6px;
  --max:1200px;--header-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* Route lines: 72° (matches the symbol's arrow sweep), 1px white at 14%, 28px apart — navy grounds only */
  --route-lines:repeating-linear-gradient(108deg,rgba(255,255,255,.14) 0 1px,transparent 1px 28px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;font-family:var(--font-text);font-size:16px;line-height:1.5;color:var(--text);background:var(--white);font-variant-numeric:tabular-nums}
html[lang=ar] body{font-size:17px;line-height:1.7}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--royal);outline-offset:3px}
.on-navy :focus-visible{outline-color:var(--sky)}
[tabindex="-1"]:focus{outline:none}
::selection{background:var(--sky);color:var(--navy)}
.container{width:min(100% - 48px,var(--max));margin-inline:auto}
.ltr{direction:ltr;unicode-bidi:isolate}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:16px;height:16px}
[dir=rtl] .flip{transform:scaleX(-1)}

/* Type scale (p.16): Display Bold −2%, headings Semibold −1%, labels Semibold caps +14%. Arabic: never letter-spaced. */
.display{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,5.2vw,4rem);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
.h3{font-family:var(--font-display);font-weight:600;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
html[lang=ar] :is(.display,.h2,.h3){letter-spacing:0;line-height:1.3}
.label{font-family:var(--font-text);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--royal)}
html[lang=ar] .label{letter-spacing:0;font-size:14px}
.on-navy .label{color:var(--sky)}
.lead{font-size:1.125rem;color:var(--text-2);max-width:60ch}
.on-navy .lead{color:var(--on-navy-2)}
.muted{color:var(--text-2)}
.small{font-size:14px}
/* Royal bar (p.17): short rule above headlines */
.bar{display:grid;gap:var(--s4);justify-items:start}
.bar::before{content:"";inline-size:64px;block-size:5px;background:var(--royal)}
.on-navy .bar::before{background:var(--sky)}

/* Skip link + notice */
.skip-link{position:absolute;z-index:1000;inset-inline-start:16px;top:-60px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r);font-weight:600}
.skip-link:focus{top:12px}
.notice{background:var(--ice);color:var(--navy);font-size:13px;border-bottom:1px solid var(--mist)}
.notice .container{display:flex;align-items:center;justify-content:center;gap:var(--s3);min-height:40px}
.notice button{border:0;background:none;inline-size:36px;block-size:36px;border-radius:var(--r);display:grid;place-items:center;flex:none;color:var(--navy)}
.notice button:hover{background:rgba(7,27,51,.06)}

/* Header (p.30): white, horizontal compact lockup 36px high */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--mist)}
.header-inner{height:var(--header-h);display:flex;align-items:center;gap:var(--s6)}
.brand{flex:none;display:block;padding-block:4px}
.brand img{height:36px;width:auto}
.main-nav{margin-inline-start:auto}
.nav-list{display:flex;list-style:none;gap:var(--s1)}
.nav-list a{display:flex;align-items:center;min-height:44px;padding:0 12px;font-weight:500;font-size:15px;color:var(--slate);position:relative;transition:color .15s}
.nav-list a:hover{color:var(--navy)}
.nav-list a[aria-current=page]{color:var(--navy);font-weight:600}
.nav-list a[aria-current=page]::after{content:"";position:absolute;inset-inline:12px;bottom:-14px;height:3px;background:var(--royal)}
.header-actions{display:flex;align-items:center;gap:var(--s2);flex:none}
.lang{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;background:none;font-weight:600;font-size:14px;color:var(--navy);border-radius:var(--r)}
.lang:hover{background:var(--ice)}
.menu-toggle{display:none;inline-size:44px;block-size:44px;border:1px solid var(--mist);background:#fff;border-radius:var(--r);place-items:center;color:var(--navy)}

/* Buttons — arrow device as direction cue */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r);border:1.5px solid transparent;font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn .icon{transition:transform .2s var(--ease)}
.btn:hover .icon.arrow{transform:translateX(3px)}
[dir=rtl] .btn:hover .icon.arrow{transform:scaleX(-1) translateX(3px)}
.btn-primary{background:var(--royal);color:#fff}
.btn-primary:hover{background:var(--royal-hover)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--deep)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--ice)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--ice)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{border-color:#fff}
.btn-sm{min-height:44px;padding:0 16px;font-size:14px}
.link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;color:var(--royal)}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.on-navy .link{color:var(--sky)}

/* Sections */
.section{padding-block:var(--s9)}
.section-sm{padding-block:var(--s8)}
.navy{background:var(--navy);color:#fff}
.ice{background:var(--ice)}
.routes{position:relative;isolation:isolate}
.routes::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--route-lines);-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%);pointer-events:none}
[dir=rtl] .routes::before{-webkit-mask-image:linear-gradient(270deg,transparent,#000 55%);mask-image:linear-gradient(270deg,transparent,#000 55%)}
.head{display:flex;align-items:end;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s7)}
.head > div{display:grid;gap:var(--s3);max-width:720px}

/* Hero (p.30): flat navy, route lines, large symbol */
.hero{overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:var(--s7);min-height:min(620px,80vh);padding-block:var(--s8)}
.hero-copy{display:grid;gap:var(--s5)}
.hero-copy .lead{font-size:1.2rem}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.hero-mark{justify-self:center;width:min(100%,420px);opacity:1}
.hero-mark img{width:100%;height:auto}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:14px;color:var(--on-navy-2);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.14)}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta span::before{content:"";inline-size:6px;block-size:6px;background:var(--sky);border-radius:50%}

/* Service cards */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--mist);border-radius:var(--r-card);overflow:hidden;background:var(--mist);gap:1px}
.service{background:#fff;padding:var(--s6);display:grid;gap:var(--s3);align-content:start}
.service .ico{inline-size:44px;block-size:44px;border-radius:var(--r);background:var(--ice);color:var(--royal);display:grid;place-items:center}
.service p{color:var(--text-2)}

/* Product cards */
.grid-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--mist);border-radius:var(--r-card);overflow:hidden;transition:border-color .15s,transform .2s var(--ease)}
.card:hover{border-color:var(--navy)}
.card:focus-within{border-color:var(--royal);box-shadow:0 0 0 2px var(--royal)}
.card-media{aspect-ratio:4/3;background:var(--ice);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.card:hover .card-media img{transform:scale(1.03)}
.card-body{display:grid;gap:6px;padding:var(--s4) var(--s4) var(--s5);flex:1;align-content:start}
.card-body .label{color:var(--slate);font-size:11px}
html[lang=ar] .card-body .label{font-size:13px}
.card-title{font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.3}
.card-title a::after{content:"";position:absolute;inset:0}
.card-cta{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--s2);font-size:14px;font-weight:600;color:var(--royal)}
.tag-new{position:absolute;top:12px;inset-inline-start:12px;background:var(--navy);color:#fff;font-size:12px;font-weight:600;padding:3px 8px;border-radius:var(--r)}

/* Steps — arrow device between steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);list-style:none;counter-reset:s}
.step{display:grid;gap:var(--s3);align-content:start;position:relative;padding-top:var(--s5);border-top:2px solid var(--navy)}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--royal);letter-spacing:.08em}
.step p{color:var(--text-2);font-size:15px}

/* Map */
.map-wrap{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s7);align-items:start}
.map-frame{position:relative;border-radius:var(--r-card);overflow:hidden}
.map{width:100%;height:auto;max-height:600px;display:block;direction:ltr}
.map .land{stroke:rgba(255,255,255,.2);stroke-linecap:round}
.map .ctry{stroke-linecap:round;transition:stroke .2s,opacity .2s}
.map .ctry.network{stroke:var(--sky)}
.map .ctry.target{stroke:#fff;opacity:.75}
.map .ctry.dim{opacity:.35}
.map .route{fill:none;stroke:var(--sky);stroke-width:1.5;stroke-dasharray:4 6;opacity:.8;vector-effect:non-scaling-stroke}
.map .route.on{opacity:1;stroke-width:2.5;stroke-dasharray:none}
.map .pin{cursor:pointer;outline:none}
.map .pin .hit{fill:transparent}
.map .pin .dot{fill:var(--sky);stroke:var(--navy);stroke-width:3;vector-effect:non-scaling-stroke}
.map .pin.target .dot{fill:var(--navy);stroke:#fff;stroke-width:2.5}
.map .pin .ring{fill:none;stroke:var(--sky);stroke-width:2;opacity:0;vector-effect:non-scaling-stroke;transition:opacity .2s}
.map .pin.target .ring{stroke:#fff}
.map .pin.on .ring,.map .pin:hover .ring,.map .pin:focus-visible .ring{opacity:1}
.map .pin text{fill:#fff;font-family:var(--font-text);font-weight:600;paint-order:stroke;stroke:var(--navy);stroke-width:4px;stroke-linejoin:round}
.map .pin.on text{fill:var(--sky)}
.map .port circle{fill:#fff;stroke:var(--navy);stroke-width:2;vector-effect:non-scaling-stroke}
.map .port text{fill:var(--on-navy-2);font-family:var(--font-text);font-weight:500;paint-order:stroke;stroke:var(--navy);stroke-width:4px}
.map.light .land{stroke:var(--mist)}
.map.light .ctry.network,.map.light .ctry.sel{stroke:var(--royal)}
.map.light .ctry.target{stroke:var(--navy);opacity:.5}
.map.light .pin .dot{fill:var(--royal);stroke:#fff}
.map.light .pin text{fill:var(--navy);stroke:#fff}
.map-legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:13px;color:var(--on-navy-2);margin-top:var(--s4)}
.map-legend span{display:inline-flex;align-items:center;gap:8px}
.lg{inline-size:12px;block-size:12px;border-radius:50%;flex:none}
.lg.network{background:var(--sky);box-shadow:0 0 0 2px var(--navy),0 0 0 3px var(--sky)}
.lg.target{background:var(--navy);box-shadow:0 0 0 2px #fff}
.lg.port{background:#fff;inline-size:8px;block-size:8px}
.lg.route{inline-size:22px;block-size:0;border-top:2px dashed var(--sky);border-radius:0}
.seg{display:inline-flex;padding:3px;border-radius:var(--r);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);margin-bottom:var(--s4)}
.seg button{min-height:40px;padding:0 16px;border:0;border-radius:3px;background:none;color:var(--on-navy-2);font-weight:600;font-size:14px}
.seg button[aria-pressed=true]{background:#fff;color:var(--navy)}

.country-list{display:grid;list-style:none;border-top:1px solid rgba(255,255,255,.14)}
.country-btn{width:100%;display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s3) 0;border:0;border-bottom:1px solid rgba(255,255,255,.14);background:none;color:#fff;text-align:start;transition:color .15s}
.country-btn .nm{flex:1;font-weight:600}
.country-btn .role{font-size:13px;color:var(--on-navy-2)}
.country-btn .icon{color:var(--on-navy-2);transition:transform .2s var(--ease)}
.country-btn:hover .nm{color:var(--sky)}
.country-btn[aria-pressed=true] .nm{color:var(--sky)}
.country-btn[aria-pressed=true] .icon{color:var(--sky)}
.country-group{font-size:12px;color:var(--on-navy-2);margin:var(--s5) 0 var(--s2)}
html:not([lang=ar]) .country-group{text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.country-card{margin-top:var(--s5);padding:var(--s5);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-card);display:grid;gap:var(--s3)}
.country-card h3{color:#fff}
.country-card p{color:var(--on-navy-2);font-size:15px}
.country-card dl{display:grid;gap:var(--s2);font-size:14px}
.country-card dt{color:var(--on-navy-2)}
.country-card dd{font-weight:600}
.chip{display:inline-flex;align-items:center;gap:6px;justify-self:start;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.chip.network{background:var(--sky);color:var(--navy)}
.chip.target{border:1px solid #fff;color:#fff}

/* Callout + checklist */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:start}
.checklist{list-style:none;display:grid;border-top:1px solid var(--mist)}
.checklist li{display:grid;grid-template-columns:28px 1fr;gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--mist)}
.checklist .ico{color:var(--royal);padding-top:2px}
.checklist strong{display:block;font-weight:600}
.checklist span{font-size:14px;color:var(--text-2)}

/* CTA band */
.cta{background:var(--royal);color:#fff}
.cta .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding-block:var(--s7)}
.cta p{color:#DCE6FB;margin-top:6px}

/* Page header */
.page-head{padding-block:var(--s8) var(--s7)}
.page-head .container{display:grid;gap:var(--s4)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;font-size:14px;color:var(--on-navy-2)}
.crumbs li+li::before{content:"/";margin-inline-end:8px;opacity:.6}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.light-crumbs ol{color:var(--text-2)}

/* Catalog */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between;margin-bottom:var(--s6);padding-bottom:var(--s4);border-bottom:1px solid var(--mist)}
.filters{display:flex;flex-wrap:wrap;gap:var(--s2)}
.filter{min-height:44px;padding:0 16px;border:1px solid var(--mist);border-radius:var(--r);background:#fff;font-weight:500;font-size:14px;display:inline-flex;align-items:center;gap:8px;transition:border-color .15s,background-color .15s,color .15s}
.filter:hover{border-color:var(--navy)}
.filter[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.filter .n{font-size:12px;opacity:.7}
.box{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;background:var(--ice);border-radius:var(--r-card);padding:var(--s5) var(--s6);margin-top:var(--s7)}
.box p{color:var(--text-2);max-width:60ch}

/* Product detail */
.detail{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s8);align-items:start}
.detail-photo{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:var(--s2)}
.detail-photo .ph{aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--ice)}
.detail-photo img{width:100%;height:100%;object-fit:cover}
.detail-photo figcaption{font-size:12px;color:var(--text-2)}
.detail-photo figcaption a{text-decoration:underline}
.detail-copy{display:grid;gap:var(--s5)}
.specs{width:100%;border-collapse:collapse;font-size:15px}
.specs caption{text-align:start;padding-bottom:var(--s3)}
.specs th,.specs td{padding:14px 0;text-align:start;border-bottom:1px solid var(--mist);vertical-align:top}
.specs th{font-weight:500;color:var(--text-2);inline-size:40%;padding-inline-end:var(--s4)}
.specs tr:first-child>*{border-top:2px solid var(--navy)}
.tbc{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--slate);background:var(--ice);border-radius:var(--r);padding:2px 8px}

/* Generic cards */
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.panel{border:1px solid var(--mist);border-radius:var(--r-card);padding:var(--s6);display:grid;gap:var(--s3);align-content:start;background:#fff}
.panel p{color:var(--text-2)}
.panel.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.panel.dark p{color:var(--on-navy-2)}
.panel .ico{inline-size:44px;block-size:44px;border-radius:var(--r);background:var(--ice);color:var(--royal);display:grid;place-items:center}
.panel.dark .ico{background:rgba(108,180,255,.14);color:var(--sky)}
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-card);overflow:hidden}
.values div{background:var(--navy);padding:var(--s5);display:grid;gap:var(--s2)}
.values strong{font-family:var(--font-display);font-size:1.25rem}
.values p{color:var(--on-navy-2);font-size:14px}
.channels{list-style:none;display:grid;border-top:1px solid var(--mist)}
.channels li{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--mist)}
.channels .ico{inline-size:40px;block-size:40px;border-radius:var(--r);background:var(--ice);color:var(--royal);display:grid;place-items:center;flex:none}
.channels span{display:block;font-size:14px;color:var(--text-2)}

/* Form */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s7);align-items:start}
.form{display:grid;gap:var(--s7)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{display:flex;align-items:center;gap:var(--s3);padding:0;margin-bottom:var(--s5);width:100%;padding-bottom:var(--s3);border-bottom:2px solid var(--navy)}
legend .n{font-family:var(--font-display);font-weight:700;color:var(--royal);font-size:14px}
legend .h3{flex:1}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.field{display:grid;gap:6px;align-content:start;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:14px}
.req{color:var(--danger);margin-inline-start:2px}
.opt{font-weight:400;color:var(--text-2);font-size:13px;margin-inline-start:6px}
.field :is(input,select,textarea){width:100%;min-height:48px;border:1px solid var(--silver);border-radius:var(--r);background:#fff;padding:10px 14px;font-size:16px;transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:110px;resize:vertical}
.field :is(input,select,textarea):hover{border-color:var(--slate)}
.field :is(input,select,textarea):focus{outline:none;border-color:var(--royal);box-shadow:0 0 0 3px rgba(26,86,219,.25)}
.field [aria-invalid=true]{border-color:var(--danger);background:var(--danger-bg)}
.hint{font-size:13px;color:var(--text-2)}
.err{display:none;align-items:center;gap:6px;font-size:13px;color:var(--danger);font-weight:500}
.field.bad .err{display:flex}
.qty{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:var(--s2)}
.dest{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:var(--s5);align-items:start}
.dest-map{margin:0;border-radius:var(--r-card);overflow:hidden;background:#fff;border:1px solid var(--mist)}
.dest-map figcaption{font-size:12px;color:var(--text-2);padding:6px 10px;border-top:1px solid var(--mist);min-height:30px}
.summary-err{border-inline-start:4px solid var(--danger);background:var(--danger-bg);padding:var(--s4) var(--s5);border-radius:var(--r)}
.summary-err h2{font-size:16px;font-weight:600;color:var(--danger);display:flex;gap:8px;align-items:center}
.summary-err ul{margin-top:var(--s2);padding-inline-start:var(--s5);font-size:14px}
.summary-err a{text-decoration:underline;color:var(--danger)}
.consent{display:flex;gap:var(--s3);align-items:flex-start;font-size:14px;color:var(--text-2)}
.consent input{inline-size:20px;block-size:20px;margin-top:3px;accent-color:var(--royal);flex:none}
.consent a{color:var(--royal);text-decoration:underline}
.form-end{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s5);border-top:1px solid var(--mist)}
.aside{display:grid;gap:var(--s4);position:sticky;top:calc(var(--header-h) + 24px)}
.aside ol{display:grid;gap:var(--s3);list-style:none;counter-reset:a}
.aside li{display:grid;grid-template-columns:28px 1fr;gap:var(--s2);color:var(--on-navy-2);font-size:15px}
.aside li::before{counter-increment:a;content:"0" counter(a);font-weight:700;color:var(--sky);font-size:13px;padding-top:2px}

/* Success */
.done{max-width:620px;margin-inline:auto;display:grid;gap:var(--s4);justify-items:center;text-align:center}
.done .mark{inline-size:64px;block-size:64px;border-radius:50%;background:#E7F6EE;color:var(--ok);display:grid;place-items:center}
.done dl{width:100%;text-align:start;border-top:2px solid var(--navy)}
.done dl div{display:flex;justify-content:space-between;gap:var(--s4);padding:12px 0;border-bottom:1px solid var(--mist);font-size:15px}
.done dt{color:var(--text-2)}
.done dd{font-weight:600}

.prose{max-width:760px;display:grid;gap:var(--s4)}
.prose p{color:var(--text-2);font-size:17px}

/* Footer */
.site-footer{padding-block:var(--s8) var(--s5);font-size:15px;color:var(--on-navy-2)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--s7);padding-bottom:var(--s6);border-bottom:1px solid rgba(255,255,255,.14)}
.f-logo{width:240px;height:auto}
.f-grid h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:var(--s3)}
html[lang=ar] .f-grid h2{letter-spacing:0;font-size:14px}
.f-grid ul{list-style:none;display:grid}
.f-grid a{display:inline-flex;align-items:center;min-height:36px}
.f-grid a:hover{color:#fff}
.f-bottom{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s5);font-size:13px}
.f-countries{color:#fff;font-weight:500}

.mobile-cta{display:none}
.reveal{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (max-width:1100px){
  .grid-products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .map-wrap{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s6)}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .aside{position:static;grid-template-columns:1fr 1fr}
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .menu-toggle{display:grid}
  .header-actions .btn{display:none}
  .main-nav{position:fixed;inset:var(--nav-top,72px) 0 0;background:#fff;padding:var(--s4) 24px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s var(--ease),visibility 0s .2s;overflow:auto;margin:0}
  .main-nav.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s var(--ease)}
  .nav-list{flex-direction:column}
  .nav-list a{min-height:56px;font-size:18px;border-bottom:1px solid var(--mist);padding:0 4px}
  .nav-list a[aria-current=page]::after{inset-inline:auto;inset-inline-start:-24px;bottom:12px;top:12px;width:4px;height:auto}
  .main-nav .btn{display:flex;width:100%;margin-top:var(--s5)}
  .hero-grid{grid-template-columns:1fr}
  .hero-mark{display:none}
  .services,.cols-3{grid-template-columns:1fr}
  .split,.detail{grid-template-columns:1fr;gap:var(--s6)}
  .detail-photo{position:static}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-grid>div:first-child{grid-column:1/-1}
}
@media (min-width:961px){.main-nav .btn{display:none}}
@media (max-width:720px){
  :root{--header-h:64px}
  .container{width:min(100% - 32px,var(--max))}
  .section{padding-block:var(--s8)}
  .head{flex-direction:column;align-items:start;margin-bottom:var(--s6)}
  .brand img{height:30px}
  .lang .long{display:none}
  .actions .btn{flex:1 1 100%}
  .grid-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .card-body{padding:var(--s3) var(--s3) var(--s4)}
  .card-title{font-size:16px}
  .steps,.cols-2,.fields,.aside,.values{grid-template-columns:1fr}
  .dest{grid-template-columns:1fr}
  .dest-map{max-width:280px}
  .cta .container{flex-direction:column;align-items:stretch}
  .box{padding:var(--s5)}
  .f-grid{grid-template-columns:1fr}
  .map .pin text{font-size:30px}
  .mobile-cta{display:flex;gap:var(--s2);position:fixed;inset-inline:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--mist)}
  .mobile-cta .btn:first-child{flex:1}
  body.has-cta{padding-bottom:76px}
}
@media (max-width:360px){.grid-products{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}