/* آريا تيك — الهوية v2: the skin (1.41.0). Loaded last, over every page's own stylesheet: the layouts stay as they were,
   and what the identity fixes is said once here — the page's ground, the type, the buttons, the fields, the cards, the
   navy sections, and the identity's own marks (the line that ends in a dot, the LED dot grid, the icon in a mint circle,
   the dotted hero price). The tokens are static/app.css's :root, named as brand/BRAND_V2/tokens.json names them. */

/* ── ground and type ── */
body{background:var(--surface);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body)}
h1,h2,h3,h4,legend,summary,label,th,button,.btn,.pill,.chip,.chipbtn,.lang-switch,.aud-go b,.desk-nav a,.drawer a,.drawer .group,.soon,.tab,.sec-head a,.w2-need b,.tile9 b,.kind b,.offer-card b,.ol b,.vp-tabs label,.vh-n{font-family:var(--font-heading)}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:700;color:var(--ink)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:700;color:var(--ink)}
h3{font-weight:500;color:var(--ink)}
.num,bdi.num,output,.cur,[data-price],[data-bar-price],.offer-price,.tot-row b,time,.vh-tag b{font-family:var(--font-latin);font-variant-numeric:tabular-nums}
.cur{font-family:var(--font-latin);font-weight:600;font-style:normal;letter-spacing:.02em}
a[href^="tel:"] .num,a[href^="tel:"] bdi{font-family:var(--font-latin);font-weight:700;letter-spacing:.12em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (min-width:900px){.w2-head h1,.page-head h1{font-size:var(--fs-h1);line-height:52px}}

/* ── buttons: the main one is mint with navy words, never white on mint ── */
.btn{min-height:52px;padding:0 22px;border-radius:var(--radius-md);font:500 var(--fs-btn)/22px var(--font-heading);box-shadow:none}
.btn-primary{background:var(--cta-bg);color:var(--cta-ink);box-shadow:none}
.btn-mint{background:var(--mint);color:var(--on-mint);box-shadow:none}
.btn-primary:hover{background:var(--cta-hover);color:var(--cta-ink)}
.btn-primary:focus-visible{outline:3px solid var(--cta-bg);outline-offset:3px}
.btn-mint:hover{background:#49A998;color:var(--on-mint)}
.btn-ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn-ghost:hover{background:var(--surface-raised);box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn-light{background:var(--surface-raised);color:var(--navy)}
.btn-sm{min-height:44px;padding:0 16px;border-radius:var(--radius-md);font-size:var(--fs-btn-sm)}
.theme-navy .btn-ghost,.foot .btn-ghost,.w2-help .btn:not(.w2-help-btn){background:transparent;color:var(--on-navy);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}

/* ── fields ── */
.field,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{border-radius:var(--radius-md);border:1.5px solid var(--border-strong);background:var(--surface-raised);color:var(--ink);font-family:var(--font-body)}
.field:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(22,117,101,.28)}

/* ── cards, tiles, panels: one radius, one soft shadow ── */
.card,.offer-card,.ol,.tile9,.kind,.w2-need,.w2-mini,.w2-sol,.w2-calc,.plan-card,.role-card,.faq details,.w2-shot,.part{border-radius:var(--radius-lg);border-color:var(--line);background-color:var(--surface-raised);box-shadow:var(--shadow-card)}
.card{padding:var(--space-4)}
@media (min-width:900px){.card{padding:var(--space-6)}}
.chip,.soon,.badge{border-radius:var(--radius-sm)}
.chip.ok,.soon{background:var(--mint-soft);color:var(--mint-ink);border-color:transparent}
.soon.pop{background:var(--navy);color:var(--on-navy)}
.pill{border-radius:var(--radius-md);background:var(--mint-soft);color:var(--mint-ink)}
.chips button,.chipbtn{border-radius:var(--radius-pill);border-color:var(--line);font-size:var(--fs-btn);min-height:40px}
.chips button[aria-pressed="true"],.chipbtn.on{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.w2-need{border-width:1.5px}
#need-cctv:checked~.w2-needs [for=need-cctv],#need-wifi:checked~.w2-needs [for=need-wifi],#need-build:checked~.w2-needs [for=need-build]{background:var(--navy);border-color:var(--navy);color:var(--on-navy);box-shadow:none}
#need-cctv:checked~.w2-needs [for=need-cctv] b,#need-wifi:checked~.w2-needs [for=need-wifi] b,#need-build:checked~.w2-needs [for=need-build] b,#need-cctv:checked~.w2-needs [for=need-cctv] small,#need-wifi:checked~.w2-needs [for=need-wifi] small,#need-build:checked~.w2-needs [for=need-build] small{color:var(--on-navy)}

/* ── sections: 32 between them on a phone, 48 on a wide screen; the title's line that ends in a mint dot (LineDot) ── */
.sec{padding-block:var(--space-8)}
@media (min-width:900px){.sec{padding-block:var(--space-12)}}
/* 1.51.0, the owner: «سوّهم سطر واحد: الخط بعدين كلمة العروض، وكل العروض هم تكون بنفس السطر» — the head of every section is one row:
   the line and its dot, then the title, at the start; the pill of «see all» at the end, on the middle line of the title's first line.
   A title too long for a phone wraps by itself; the pill stays beside its first line. */
.sec-head{align-items:flex-start}
.sec-head h2{position:relative;min-width:0;padding:4px 0;padding-inline-start:46px;font-size:var(--fs-h2);line-height:32px}
.sec-head h2::before{content:"";position:absolute;top:19px;inset-inline-start:0;display:block;width:26px;height:2px;margin:0;background:var(--navy)}
.sec-head h2::after{content:"";position:absolute;top:15px;inset-inline-start:26px;width:10px;height:10px;border-radius:50%;background:var(--mint)}
.sec-head>a{flex:none}
.sec-head a,.w2-all,a.more{color:var(--mint-ink)}

/* ── the bar at the top and the one at the bottom ── */
.topbar{background:var(--navy);backdrop-filter:none;border-bottom:1px solid var(--navy)}       /* 1.53.0, the owner: «البار فوق خلّه كحلي» */
.topbar .icon-btn,.topbar .lang-switch,.topbar .desk-nav,.topbar .desk-nav a{color:#fff}
.topbar .icon-btn:hover,.topbar .lang-switch:hover,.topbar .desk-nav a:hover{background:rgba(255,255,255,.12)}
.topbar .pill{background:rgba(255,255,255,.12);color:#fff;white-space:nowrap}          /* 1.58.0: a quiet button on the navy bar — a mint icon, white words, one line */
.topbar .pill .ico{color:var(--mint)}
.topbar .pill:hover{background:rgba(255,255,255,.2)}
@media (min-width:900px){.topbar [data-menu-open]{display:none}}          /* the links stand in the bar itself on a wide screen: no menu button beside them */
.topbar :focus-visible{outline-color:#fff}
.topbar .brand img,.drawer .brand img{display:block;width:auto;height:42px}
.oh-bar{background:var(--surface-raised);backdrop-filter:none;box-shadow:var(--shadow-up)}
.oh-bar .t{font-size:var(--fs-ui);line-height:20px;color:var(--ink-muted)}
.oh-bar .t b{font-family:var(--font-heading);font-size:var(--fs-body);line-height:22px;color:var(--ink)}
.amt{display:inline-block;white-space:nowrap}

/* ── the hero and the banners stand on the post grey, flat, with the LED dots fading in from one edge (DotGrid) ── */
.w2-hero,.hero,.page-hero{position:relative;isolation:isolate;background:var(--surface-post)}
.w2-hero::before,.hero::after{content:"";position:absolute;inset:0 auto 0 0;z-index:-1;width:min(46%,420px);background:url("brand/dots-grey.ef8e5c497ec6.svg") 0 0/240px 240px;-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent);opacity:1;pointer-events:none}
.hs-light,.oh-slide.v4{background:var(--surface-post)}
.hs-navy,.hs-green,.hs-media,.oa,.offer-card.follow .oa,.oh-slide.v2,.oh-hero,.oh-dark,.teaser,.ph{background:var(--navy)}
.oh-hero::before,.oh-slide::before,.oh-dark::before,.teaser::before{background:url("brand/dots-navy.32e892df6af0.svg") 0 0/240px 240px}
.oh-hero::after,.hx .oh-hero::after{background:none}
.guide-art,.work.alt{background:var(--mint-soft)}

/* ── the navy sections: the house's panel, the footer, «دعنا نساعدك», the total bars ── */
.vh,.foot,.w2-help,.totalbar.navy{--surface:#151D35;--surface-raised:#1F2A4B;--ink:#FFFFFF;--ink-muted:#AEB6C8;--mint-ink:#54BAA7;--line:#2E3A5E;--border-strong:#6E7A96;--focus:#54BAA7}
.vh{background:var(--navy);border-radius:var(--radius-lg);box-shadow:none}
.vh::before{background:url("brand/dots-navy.32e892df6af0.svg") 0 0/240px 240px}
.vh-line{border-color:var(--line);border-radius:var(--radius-md);background:rgba(21,29,53,.86)}
.vh-line b,.vh-line.h3-count{color:var(--mint)}
.vh-n,.vh-side button{border-radius:var(--radius-md);border-color:#6E7A96;background:rgba(21,29,53,.8);color:var(--on-navy)}
.vh-n.on{background:var(--mint);border-color:var(--mint);color:#151D35;box-shadow:none}
.vp-tabs{border-radius:var(--radius-pill);border-color:#6E7A96}
#vp-f0:checked~.vp-tabs [for=vp-f0],#vp-f1:checked~.vp-tabs [for=vp-f1]{background:var(--mint);color:#151D35}
.w2-help{background:var(--navy);border-radius:var(--radius-lg)}
.w2-help h2,.w2-help p{color:var(--on-navy)}
.w2-help .w2-help-btn{background:var(--mint);color:#151D35}
.foot{background:var(--navy);color:#AEB6C8}
.foot a{color:var(--on-navy)}

/* ── the services: a white line icon in a mint circle (IconCircle) ── */
.tile9-ico,.w2-need-ico,.badge-ico{width:52px;height:52px;border-radius:50%;background:var(--mint);display:grid;place-items:center;color:#fff}
.tile9-ico img,.w2-need-ico img{width:30px;height:30px;filter:brightness(0) invert(1)}
.w2-need-ico{width:36px;height:36px}.w2-need-ico img{width:22px;height:22px}
.w2-need b{font-size:var(--fs-ui);line-height:19px}
.badge-ico .ico{stroke:#fff}
.ico{stroke-width:2}

/* ── prices: the hero price of a screen in the brand's dotted type, once; an offer's red only where a price is struck ── */
.w2-mini-price .w2-price b,.price-hero b .num{font-family:var(--font-accent);font-weight:700;font-size:var(--fs-price-hero);line-height:1;letter-spacing:.02em;color:var(--ink)}
.price-hero b .num{font-size:var(--fs-price-xl);font-weight:700}
@media print{.price-hero b .num{font-size:30pt}}
@media (min-width:900px){.w2-mini-price .w2-price b{font-size:var(--fs-price-hero)}}
.w2-mini-price .w2-price .cur{font-size:var(--fs-body);color:var(--ink-muted)}
.offer-price s,.tot-row s,.big-price s,s.was{color:var(--offer-ink);text-decoration-color:var(--offer)}
.offer-price bdi,.tot-row b{color:var(--ink)}
.field-err{color:var(--danger)}

/* ── movement: once, between 0.3 and 1.5 seconds ── */
.vh.scan .vh-scan,.vh-plan.scan .vp-scan{animation-duration:.9s;animation-iteration-count:1}
/* what waits below the screen comes in once, from the side the language starts on: the right for Arabic, the left for English */
/* 1.67.0, the owner's approved motion (brand/generated/mockups/MOTION_SPEC.md): once, as a part comes into sight; transform and
   opacity only, so nothing changes its height or pushes what is under it; and none of it with «reduce motion» or on the first
   screen (static/motion.js adds the waiting state after load, only to what is below the screen). */
:root{--ease-in:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.4,0,1,1);--t-fast:180ms;--t-base:320ms;--t-slow:450ms}
/* rise: a part comes up 12px as it appears */
.mo .mo-wait:not(.sec-head){opacity:0;transform:translateY(12px)}
.mo .mo-in:not(.sec-head){transition:opacity .4s var(--ease-in),transform .4s var(--ease-in);transition-delay:.12s}
/* …and the rows and cards inside it follow one another, 60ms apart, six at the most */
.mo .mo-wait .lrow,.mo .mo-wait .nb-c{opacity:0;transform:translateY(12px)}
.mo .mo-in .lrow,.mo .mo-in .nb-c{transition:opacity .4s var(--ease-in),transform .4s var(--ease-in);transition-delay:.12s}
.mo .mo-in .lrow:nth-child(2),.mo .mo-in .nb-c:nth-child(2){transition-delay:.18s}.mo .mo-in .lrow:nth-child(3),.mo .mo-in .nb-c:nth-child(3){transition-delay:.24s}
.mo .mo-in .lrow:nth-child(4),.mo .mo-in .nb-c:nth-child(4){transition-delay:.3s}.mo .mo-in .lrow:nth-child(5){transition-delay:.36s}.mo .mo-in .lrow:nth-child(n+6){transition-delay:.42s}
/* logos: each settles in, 40ms apart */
.mo .mo-wait .bl-c{opacity:0;transform:scale(.96)}
.mo .mo-in .bl-c{transition:opacity .3s var(--ease-in),transform .3s var(--ease-in);transition-delay:.12s}
.mo .mo-in .bl-c:nth-child(2){transition-delay:.16s}.mo .mo-in .bl-c:nth-child(3){transition-delay:.2s}.mo .mo-in .bl-c:nth-child(4){transition-delay:.24s}.mo .mo-in .bl-c:nth-child(5){transition-delay:.28s}.mo .mo-in .bl-c:nth-child(6){transition-delay:.32s}.mo .mo-in .bl-c:nth-child(n+7){transition-delay:.36s}
/* the head of a section: its line is drawn from the reading side, then its dot */
.mo .sec-head h2::before{transform-origin:right center;transition:transform .3s var(--ease-in)}
[dir=ltr] .mo .sec-head h2::before,[dir=ltr].mo .sec-head h2::before{transform-origin:left center}
.mo .sec-head h2::after{transition:transform .2s var(--ease-in) .25s}
.mo .sec-head.mo-wait h2::before{transform:scaleX(0)}
.mo .sec-head.mo-wait h2::after{transform:scale(0)}
/* a price that changes (window.SWAP): up and out, then in from below; the cell keeps its size */
[data-cv-price],[data-wifi-price],[data-bar-price],[data-alt-price],[data-price]{display:inline-block}
.ps-out{opacity:0;transform:translateY(-6px);transition:opacity .12s var(--ease-out),transform .12s var(--ease-out)}
.ps-pre{opacity:0;transform:translateY(6px)}
.ps-in{transition:opacity var(--t-fast) var(--ease-in),transform var(--t-fast) var(--ease-in)}
@media (prefers-reduced-motion:no-preference){
  /* the signal: a ring from the dot of «مباشر», 1.3s of every 6s */
  .cv-live i{position:relative}
  .cv-live i::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;color:var(--offer);opacity:0;animation:sig 6s var(--ease-in) infinite}
  /* what a visitor opens himself: its inside fades in */
  details[open]>.ms-b,details.card[open]>:not(summary),.sys[data-open="true"] .sys-b{animation:fold-in var(--t-fast) var(--ease-in)}
}
@keyframes sig{0%{transform:scale(1);opacity:.55}22%{transform:scale(2.4);opacity:0}100%{transform:scale(2.4);opacity:0}}
@keyframes fold-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.mo .mo-wait,.mo .mo-in,.mo .mo-wait *,.mo .mo-in *,.mo .sec-head h2::before,.mo .sec-head h2::after,.ps-out,.ps-pre,.ps-in{opacity:1!important;transform:none!important;transition:none!important}}


/* ── the hero keeps to one screen on a phone: the bar at the bottom is one line of name and one of price ── */
.oh-bar .t{min-width:0;font-size:var(--fs-small);line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oh-bar .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:899px){.vh.h3-on .vh-stage{height:clamp(250px,calc(100svh - 470px),400px)}}
.w2-mini{align-items:center}
.w2-mini-price .w2-price{align-items:baseline;gap:6px}

/* ── the one promise the brand repeats, under the packages: a soft mint label with the mint dot ── */
.promise{display:flex;align-items:center;gap:var(--space-2);width:fit-content;max-width:100%;margin:var(--space-4) 0 0;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);background:var(--mint-soft);color:var(--ink);font:500 var(--fs-body)/22px var(--font-heading)}
.promise::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--mint)}

/* ── 1.41.1 ── */
/* «KD» stands to the right of its number wherever a price stands alone: the pair reads left to right */
.tot-row b,.oh-amount,.offer-price .amt,.hs-price,.big-price{direction:ltr;unicode-bidi:isolate}
.tot-row b .cur,.oh-amount .cur{font-size:var(--fs-body);color:var(--ink-muted);margin-inline-start:4px}
/* caption: the one size under the secondary 15 — dates, badges, the small notes that must stay small */
.caption{font-size:var(--fs-small);line-height:20px}
/* the bilingual logo in the bar on a wide screen */
.topbar .brand picture{display:block}
@media (min-width:900px){.topbar .brand img{width:auto;height:48px}}
/* 1.68.0, the spec's wipe of a section's title: the title is uncovered from the reading side after its line and its dot are
   drawn. «clip-path» on the title itself — the one movement of the site that is neither transform nor opacity, by the
   manager's written leave, on the titles of sections alone; it changes no size and moves nothing. */
.mo .sec-head.mo-wait h2{clip-path:inset(-8px -8px -8px calc(100% - 46px))}
.mo .sec-head.mo-wait:lang(en) h2{clip-path:inset(-8px calc(100% - 46px) -8px -8px)}
.mo .sec-head.mo-in h2{clip-path:inset(-8px);transition:clip-path var(--t-slow) var(--ease-in) .3s}
@media (prefers-reduced-motion:reduce){.mo .sec-head h2{clip-path:none!important}}