/* ── the theme's buttons, neutralised once, before anything else ───────
   hello-elementor/reset.css paints every button: a #c36 border, a #c36 fill
   on hover, .5rem/1rem padding and a 3px radius. It targets `[type="button"]`
   as well as `button`, and an attribute selector weighs 0-1-0 against a bare
   element's 0-0-1 — which is why the controls we render WITH type="button"
   (the rails, the burger) kept the theme's padding while the untyped filter
   chips did not. Naming the same shapes ties the weight, and bridge.css
   loads last.

   This block sits at the very top on purpose: it is a floor, not a verdict.
   Every component class below is declared later, so on an equal tie the
   component wins and paints what it actually needs. */
button,[type="button"],[type="submit"],[type="reset"]{background:none;background-color:transparent;border:0;border-radius:0;box-shadow:none;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}
/* font and colour stay on the bare element (0-0-1) so any component class
   overrides them without a fight */
/* `font:inherit` alone also hands the button the body's 1.6 leading, but the
   design's buttons keep the user agent's `normal` — it never sets a line-height
   on one — and the difference made every hero pill 5px taller than drawn. */
button{color:inherit;font:inherit;line-height:normal}
/* the theme only REPAINTS on hover, so only paint is undone here. `font:inherit`
   used to sit in this list too, and `button:hover` (0-1-1) outranks the component
   classes that set the real size (`.pf`, 0-1-0) — so every button jumped to the
   body's 20px the instant the pointer touched it and the filter row reflowed. */
button:hover,button:focus,button:active,
[type="button"]:hover,[type="button"]:focus,[type="button"]:active,
[type="submit"]:hover,[type="submit"]:focus,[type="submit"]:active,
[type="reset"]:hover,[type="reset"]:focus,[type="reset"]:active{background:none;background-color:transparent;box-shadow:none;text-decoration:none}
button:hover,button:focus,button:active{color:inherit}
button::-moz-focus-inner{border:0;padding:0}
/* no blanket focus ring: it boxed the filter chips and the tall rails.
   Components declare their own indicator; this only stops the browser and
   the theme from drawing one we did not ask for. */
button:focus{outline:none}
button:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px}
/* the filter chip carries its state in the smile and the weight, not a box */
.pf:focus,.pf:focus-visible,.pf:hover,.pf:active{outline:none;background:none;box-shadow:none}
/* Elementor draws its own buttons and must keep them */
.elementor-button,.elementor-button:hover{background-color:revert;color:revert;padding:revert;border-radius:revert}

/* ── the design's margin reset, as a floor ─────────────────────────────
   The built design opens with `*{margin:0;padding:0;box-sizing:border-box}`.
   A global `*` reset cannot be re-applied inside WordPress without flattening
   Elementor's own chrome, and box-sizing is already handled by the theme. What
   actually diverged is heading and paragraph margins: hello-elementor adds
   1rem under every heading and .9rem under every paragraph, which stretched
   the methodology head and its CTA by ~17px each against the design.

   Weight 0-0-1 and declared first, so it beats the theme (same weight, loaded
   earlier) while every component rule below still wins. */
h1,h2,h3,h4,h5,h6,p{margin:0}
/* the user agent's own indents are part of what `*{margin:0;padding:0}` cleared
   in the design: a blockquote carries `margin:1em 40px` and a list
   `padding-inline-start:40px`. The challenge quote was 80px narrower than drawn
   and every «ما بنيناه» line 40px narrower. */
blockquote,figure,dl,dd,pre{margin:0}
ul,ol{padding:0}
/* the admin bar is WordPress's furniture, not part of the design */
#wpadminbar ul,#wpadminbar ol{padding:revert}
/* hello-elementor also rewrites heading leading and weight to 1.2 / 500. The
   design sets h1–h3 itself and leaves h4–h6 at the browser default — bold,
   inheriting the body's 1.6 — which is what gives a step title its height. */
h4,h5,h6{line-height:inherit;font-weight:bold}
/* The design's only link rule is `a{text-decoration:none;color:inherit}` and it
   declares no hover state at all. hello-elementor paints `a:active,a:hover
   {color:#336}` — the same placeholder palette as its #c36 button — and at
   0-1-1 that outranks every component class (0-1-0), so «احجز مكالمة» turned
   navy-blue under the cursor. Declared here, first: any component that wants a
   hover colour of its own states it later and wins the tie. */
a,a:hover,a:focus,a:active{color:inherit;text-decoration:none}
/* hello-elementor: `.page-content a,.comments-area a{text-decoration:underline}`
   — 0-1-1, so it beats every .btn on a page that is not an Elementor page.
   Neutralised at the same weight; .lg-s a is declared later and still wins. */
.page-content a,.comments-area a{text-decoration:none}

/* The design's body rule is `line-height:1.6` — unitless, so every descendant
   re-computes its own leading from its own font-size. Elementor's kit control
   can only emit px or em, and `1.6em` computes once on the body to a fixed
   25.6px that then INHERITS as a length: a 32px service title was being given
   25.6px of leading, which cost the services list 106px against the design.
   `body[class]` is 0-1-1 — enough to outrank the kit's `.elementor-kit-46`
   without hard-coding the kit's post id. */
body[class]{line-height:1.6}

/* ── the design system, ported verbatim ────────────────────────────────
   Container, buttons, headings and section furniture. These were only
   ported anchored to the header and footer before, so every section built
   after them inherited hello-elementor's defaults instead — an overflowing
   headline and a #c36 button. Unanchored here, once, for everything. */
#sa-hero-slot,.sa-section{position:static}
.container{max-width:var(--container);margin:0 auto;padding:0 32px}
.pt{font-family:'Thmanyah Sans','Tajawal',sans-serif;font-style:normal;font-weight:inherit}
.lat{font-family:var(--lat);direction:ltr;unicode-bidi:isolate}
.pad{padding:clamp(56px,6.5vw,88px) 0}
h1,h2,h3{font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--navy)}
.kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--lat);font-size:clamp(.72rem,1.9vw,.8rem);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.kick::before{content:"";width:30px;height:10px;flex-shrink:0;background:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cpath d='M3 5 C30 16 70 16 97 5' stroke='%23FF951A' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:100% 100%}
.btn{display:inline-flex;align-items:center;gap:12px;justify-content:center;font-family:var(--ar);font-weight:700;font-size:clamp(.85rem,2.4vw,.96rem);padding-block:6px;padding-inline:24px 6px;border-radius:100px;cursor:pointer;border:1.5px solid transparent;transition:.28s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.btn .ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:.34s cubic-bezier(.34,1.4,.5,1)}
.btn .ico svg{width:17px}
.btn:hover .ico{transform:rotate(-45deg)}
.btn-primary{background:var(--orange);color:#0a1424}
.btn-primary .ico{background:#0a1424;color:var(--orange)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(255,149,26,.6)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy .ico{background:var(--orange);color:#0a1424}
.btn-navy:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--navy);border-color:#dbe1ea}
.btn-ghost .ico{background:var(--navy);color:#fff}
.btn-ghost:hover{border-color:var(--navy)}
.btn-glass{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-glass .ico{background:var(--orange);color:#0a1424}
/* The link floor at the top of this file is 0-1-1, so on hover it would hand a
   button the colour of whatever section it sits in. Each button restates its
   own — the design changes only the background and border under the cursor.
   Section overrides (#services.dark-sec …) are heavier and still win. */
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{color:#0a1424}
.btn-navy:hover,.btn-navy:focus,.btn-navy:active{color:#fff}
.btn-ghost:hover,.btn-ghost:focus,.btn-ghost:active{color:var(--navy)}
.btn-glass:hover,.btn-glass:focus,.btn-glass:active{color:#fff}
.btn-glass:hover{background:rgba(255,255,255,.16)}
.dd-promo .btn{position:relative;z-index:2;align-self:flex-start;margin-top:4px;padding-block:5px;padding-inline:18px 5px;font-size:.9rem}
.dd-promo .btn .ico{width:32px;height:32px}
.dd-promo .btn .ico svg{width:15px}
.nav .btn{padding-block:5px;padding-inline:20px 5px}
.nav .btn .ico{width:34px;height:34px}
.nav .btn .ico svg{width:15px}
.hero>.container{width:100%}
.hero .container{position:relative;z-index:2}
.hero .kick{margin-bottom:30px}
.hero .container>*{animation:heroBlur .9s ease both}
.hero .container>*:nth-child(1){animation-delay:.1s}
.hero .container>*:nth-child(2){animation-delay:.28s}
.hero .container>*:nth-child(3){animation-delay:.5s}
.cta .container.cta-split{display:grid;text-align:start;grid-template-columns:1fr .95fr;gap:clamp(24px,3.4vw,52px);align-items:center; position:relative;z-index:2}
.cta .container{position:relative;z-index:2}
.cta .container:not(.cta-split){display:flex;flex-direction:column;align-items:center}
.about-card .kick{margin-bottom:18px}
#services.dark-sec .srv-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
#services.dark-sec .srv-cta .btn-ghost .ico{background:#fff;color:var(--navy)}
#services.dark-sec .srv-cta .btn-ghost:hover{border-color:#fff}
.hos-c .btn{align-self:flex-start;margin-top:auto}
.a2-copy .kick,.a2-copy h2,.a2-copy p,.a2-link{animation:heroBlur .9s ease both}
.a2-copy .kick{animation-delay:.62s}
@media(prefers-reduced-motion:reduce){.hero .container>*{animation:none}}
@media(prefers-reduced-motion:reduce){.a2-copy .kick,.a2-copy h2,.a2-copy p,.a2-link,.a2-stats,.a2-smile{animation:none}}

/* ── header, ported from the built design ──────────────────────────────
   Elementor's nav-menu widget cannot emit a two-column mega dropdown and
   Pro 3.31 has no mega-menu widget, so the markup comes from sa-header.php.
   These are the original site's own rules, re-anchored to #sa-hdr, with
   media queries kept inside their queries — flattening them once hid the
   whole nav, because the 600px block sets .nav-links{display:none}. */
:root{--navy:#0B1B32;--dark:#041121;--orange:#FF951A;--cream:#FBF3E9;--ink:#0B1B32;
  --muted:#5f718b;--white:#fff;--bg-soft:#F4F6FA;--line:#E7ECF3;--line-d:rgba(255,255,255,.14);
  --container:1280px;--ar:'Thmanyah Sans',sans-serif;--lat:'Thmanyah Sans',sans-serif}
#sa-hdr *{box-sizing:border-box}
/* the kit's body line-height is 1.9 for Arabic body copy; the header was drawn
   against 1.6 and inherits the looser value through Elementor, which stretched
   the dropdown by roughly a third */
#sa-hdr{line-height:1.6}
#sa-hdr p{margin:0}
#sa-hdr h4,#sa-hdr h5{margin:0;font-family:'Thmanyah Sans',sans-serif}
#sa-hdr a{text-decoration:none;color:inherit}
#sa-hdr .pt{font-family:'Thmanyah Sans',sans-serif;font-style:normal;font-weight:inherit}
body.admin-bar #sa-hdr{top:32px}
@media screen and (max-width:782px){body.admin-bar #sa-hdr{top:46px}}
.sa-header-slot,.sa-header-slot .elementor-widget-container{position:static}
/* hello-elementor prints its own page title above Elementor's canvas */
.page-header,.entry-header .entry-title{display:none!important}

#sa-hdr .btn{display:inline-flex;align-items:center;gap:12px;justify-content:center;font-family:var(--ar);font-weight:700;font-size:clamp(.82rem,3.4vw,.96rem);padding-block:6px;padding-inline:24px 6px;border-radius:100px;cursor:pointer;border:1.5px solid transparent;transition:.28s cubic-bezier(.4,0,.2,1);white-space:nowrap}
#sa-hdr .btn .ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:.34s cubic-bezier(.34,1.4,.5,1)}
#sa-hdr .btn .ico svg{width:17px}
#sa-hdr .btn:hover .ico{transform:rotate(-45deg)}
#sa-hdr .btn-primary{background:var(--orange);color:#0a1424}
#sa-hdr .btn-primary .ico{background:#0a1424;color:var(--orange)}
#sa-hdr .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(255,149,26,.6)}
#sa-hdr .btn-navy{background:var(--navy);color:#fff}
#sa-hdr .btn-navy .ico{background:var(--orange);color:#0a1424}
#sa-hdr .btn-navy:hover{transform:translateY(-2px)}
#sa-hdr .btn-ghost{background:transparent;color:var(--navy);border-color:#dbe1ea}
#sa-hdr .btn-ghost .ico{background:var(--navy);color:#fff}
#sa-hdr .btn-ghost:hover{border-color:var(--navy)}
#sa-hdr .btn-glass{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28)}
#sa-hdr .btn-glass .ico{background:var(--orange);color:#0a1424}
#sa-hdr .btn-glass:hover{background:rgba(255,255,255,.16)}
#sa-hdr{position:fixed;top:0;left:0;right:0;z-index:100}
#sa-hdr .nav-wrap{max-width:var(--container);margin:0 auto;padding:0 32px;transition:max-width .45s cubic-bezier(.4,0,.2,1),padding .45s}
#sa-hdr .nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 8px;border:1px solid transparent;border-radius:100px;transition:.45s cubic-bezier(.4,0,.2,1)}
#sa-hdr.scrolled .nav-wrap{max-width:940px;padding:14px 20px 0}
#sa-hdr.scrolled .nav{border-color:var(--line);box-shadow:0 16px 46px -22px rgba(11,27,50,.34);padding:9px 26px 9px 16px}
#sa-hdr.scrolled .nav::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);z-index:-1}
#sa-hdr .brand{display:flex;align-items:center}
#sa-hdr .brand-smile{height:21px;width:auto;transition:height .42s cubic-bezier(.4,0,.2,1),transform .28s}
#sa-hdr .brand:hover .brand-smile{transform:translateY(-2px) scale(1.06)}
#sa-hdr .brand-name{font-family:var(--ar);font-weight:800;font-size:1.44rem;color:var(--navy);white-space:nowrap;letter-spacing:normal;line-height:1.35;overflow:hidden;max-width:180px;opacity:1;margin-inline-start:11px;transition:max-width .45s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin .45s cubic-bezier(.4,0,.2,1)}
#sa-hdr.scrolled .brand-name{max-width:0;opacity:0;margin-inline-start:0}
#sa-hdr.scrolled .brand-smile{height:17px}
#sa-hdr .nav-links{display:flex;align-items:center;gap:30px}
#sa-hdr .nav-links a{color:var(--ink);font-weight:400;font-size:1rem;transition:.2s}
#sa-hdr .nav-links a:hover{color:var(--navy)}
#sa-hdr .nav-links a,#sa-hdr .drop-trigger,#sa-hdr .dt-text{position:relative}
#sa-hdr .dt-text{display:inline-flex;align-items:center}
#sa-hdr .nav-sm{position:absolute;left:0;width:100%;bottom:-9px;height:8px;opacity:0;transform:translateY(4px);transition:.3s cubic-bezier(.4,0,.2,1);pointer-events:none}
#sa-hdr .nav-sm path{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .42s ease .05s}
#sa-hdr .nav-links a:hover .nav-sm,#sa-hdr .nav-item:hover .drop-trigger .nav-sm{opacity:1;transform:translateY(0)}
#sa-hdr .nav-links a:hover .nav-sm path,#sa-hdr .nav-item:hover .drop-trigger .nav-sm path{stroke-dashoffset:0}
#sa-hdr .nav-links a.is-here .nav-sm,#sa-hdr .nav-item.is-here .drop-trigger .nav-sm{opacity:1;transform:translateY(0)}
#sa-hdr .nav-links a.is-here .nav-sm path,#sa-hdr .nav-item.is-here .drop-trigger .nav-sm path{stroke-dashoffset:0}
#sa-hdr .nav-links a.is-here{color:var(--navy);font-weight:700}
#sa-hdr .nav-item{position:relative;display:flex;align-items:center}
#sa-hdr .drop-trigger{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink);font-weight:400;font-size:1rem;transition:.2s}
#sa-hdr .drop-trigger .chev{width:13px;height:13px;transition:.3s}
#sa-hdr .nav-item:hover .drop-trigger{color:var(--navy)}
#sa-hdr .nav-item:hover .drop-trigger .chev{transform:rotate(180deg)}
#sa-hdr .dropdown{position:absolute;top:calc(100% + 18px);inset-inline-start:0;width:580px;display:grid;grid-template-columns:1.4fr 1fr;background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 34px 80px -30px rgba(11,27,50,.42);opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s cubic-bezier(.4,0,.2,1);z-index:200}
#sa-hdr .dropdown::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px}
#sa-hdr .nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
#sa-hdr .dd-list{padding:14px;display:flex;flex-direction:column;gap:2px}
#sa-hdr .dd-list a{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:14px;transition:.18s}
#sa-hdr .dd-list a:hover{background:var(--bg-soft)}
#sa-hdr .dd-list a svg{width:26px;height:26px;flex-shrink:0;color:var(--navy);transition:.2s}
#sa-hdr .dd-list a:hover svg{color:var(--orange)}
#sa-hdr .dd-list h5{font-size:1rem;font-weight:800;color:var(--navy);line-height:1.2}
#sa-hdr .dd-list p{font-size:.78rem;color:var(--muted);font-weight:400;margin-top:2px}
#sa-hdr .dd-promo{background:var(--navy);color:#fff;padding:26px 22px;display:flex;flex-direction:column;justify-content:center;gap:11px;position:relative;overflow:hidden}
#sa-hdr .dd-promo::before{content:"";position:absolute;top:-30%;left:-25%;width:80%;height:85%;background:radial-gradient(circle,rgba(255,149,26,.28),transparent 62%)}
#sa-hdr .dd-promo img{width:40px;position:relative;z-index:2}
#sa-hdr .dd-promo h4{font-size:1.14rem;color:#fff;position:relative;z-index:2;line-height:1.4;font-weight:800}
#sa-hdr .dd-promo p{font-size:.82rem;color:#aab9cf;line-height:1.7;position:relative;z-index:2}
#sa-hdr .dd-promo .btn{position:relative;z-index:2;align-self:flex-start;margin-top:4px;padding-block:5px;padding-inline:18px 5px;font-size:.9rem}
#sa-hdr .dd-promo .btn .ico{width:32px;height:32px}
#sa-hdr .dd-promo .btn .ico svg{width:15px}
#sa-hdr .nav-cta{display:flex;align-items:center;gap:12px}
#sa-hdr .nav-lang{display:inline-flex;align-items:center;font-family:var(--lat);font-weight:400;font-size:.9rem;color:var(--navy);background:transparent;border:1.5px solid #dbe1ea;border-radius:100px;padding:10px 18px;transition:.24s}
#sa-hdr .nav-lang .ico{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;flex-shrink:0;transition:.34s cubic-bezier(.34,1.4,.5,1)}
#sa-hdr .nav-lang .ico svg{width:14px}
#sa-hdr .nav-lang:hover{border-color:var(--navy);background:var(--navy);color:#fff}
#sa-hdr .nav-lang:hover .ico{transform:rotate(40deg)}
#sa-hdr .nav .btn{padding-block:5px;padding-inline:20px 5px}
#sa-hdr .nav .btn .ico{width:34px;height:34px}
#sa-hdr .nav .btn .ico svg{width:15px}
#sa-hdr .foot-brand .brand-logo{height:30px;margin-bottom:18px}
#sa-hdr #services.dark-sec .srv-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
#sa-hdr #services.dark-sec .srv-cta .btn-ghost .ico{background:#fff;color:var(--navy)}
#sa-hdr #services.dark-sec .srv-cta .btn-ghost:hover{border-color:#fff}
#sa-hdr .hos-c .btn{align-self:flex-start;margin-top:auto}


/* ── footer, ported from the built design ─────────────────────────────
   Widgets missed the heading marks, the icon shape and the spacing, so the
   markup comes from sa-footer.php and these are the original rules,
   re-anchored to #sa-ftr. Columns are three WordPress menus. */
#sa-ftr *{box-sizing:border-box}
#sa-ftr{line-height:1.6}
#sa-ftr a{text-decoration:none;color:inherit}
#sa-ftr p{margin:0}
#sa-ftr h5{margin:0;font-family:'Thmanyah Sans',sans-serif}
#sa-ftr .pt{font-family:'Thmanyah Sans',sans-serif;font-style:normal;font-weight:inherit}
.sa-footer-slot,.sa-footer-slot .elementor-widget-container{position:static}
#sa-ftr{background:var(--dark);color:#fff;padding:clamp(52px,6vw,74px) 0 30px}
#sa-ftr .fcard{max-width:var(--container);margin:0 auto;padding:0 32px}
#sa-ftr .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,36px); padding-bottom:clamp(28px,3.4vw,40px);border-bottom:1px solid var(--line-d)}
#sa-ftr .foot-brand .brand-logo{height:30px;width:auto;margin-bottom:18px}
#sa-ftr .foot-brand p{color:#93a6c0;max-width:270px;font-size:clamp(.86rem,2.2vw,.95rem);line-height:1.65}
#sa-ftr .foot-social{display:flex;gap:11px;margin-top:20px}
#sa-ftr .foot-social a{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.06); display:grid;place-items:center;transition:.22s;color:#93a6c0}
#sa-ftr .foot-social a:hover{background:var(--orange);color:#0a1424}
#sa-ftr .foot-social svg{width:19px;height:19px;stroke-width:1.9}
#sa-ftr .foot-social a[aria-label="بيهانس"] svg{width:23px;height:23px}
#sa-ftr .foot-social a[aria-label="لينكدإن"] svg{width:22px;height:22px}
#sa-ftr .foot-col h5{display:flex;align-items:center;gap:9px;font-family:var(--lat);font-size:.76rem; color:#93a6c0;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;font-weight:600}
#sa-ftr .foot-col h5 .sm{content:"";width:26px;height:9px;flex-shrink:0;display:block; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cpath d='M3 5 C30 16 70 16 97 5' stroke='%23FF951A' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-size:100% 100%}
#sa-ftr .foot-col a{display:flex;gap:10px;align-items:baseline;color:#cdd8e8;padding:6px 0; font-size:.94rem;transition:.2s}
#sa-ftr .foot-col a:hover{color:var(--orange)}
#sa-ftr .foot-col a i.n{font-family:var(--lat);font-size:.72rem;color:#6a7d97;font-style:normal; min-width:18px;flex-shrink:0;transition:.2s}
#sa-ftr .foot-col a:hover i.n{color:var(--orange)}
#sa-ftr .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px; flex-wrap:wrap;gap:14px}
#sa-ftr .foot-bottom p{color:#6a7d97;font-size:clamp(.8rem,2.1vw,.88rem)}
#sa-ftr .foot-legal{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
#sa-ftr .foot-legal a{color:#6a7d97;font-size:.88rem;transition:color .2s}
#sa-ftr .foot-legal a:hover{color:var(--orange)}

@media(max-width:900px){#sa-ftr .foot-top{grid-template-columns:1fr 1fr}#sa-ftr .foot-brand{grid-column:span 2}}
@media(max-width:600px){#sa-ftr .foot-top{grid-template-columns:1fr}#sa-ftr .foot-brand{grid-column:span 1}#sa-ftr .fcard{padding:0 20px}}

/* ── edge rails, ported verbatim from the built design ─────────────────
   25 base rules and 2 media queries, exactly as authored. The only things
   added are a transparent default for the twins (so a failed mask hides
   them instead of doubling the rail) and the native-button chrome reset
   that Firefox needs and Chrome does not. */
.follow{position:fixed;left:42px;top:50%;transform:translateY(-50%);z-index:90; display:flex;flex-direction:column;align-items:center;gap:7px}
.follow-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:1rem;font-weight:800; letter-spacing:.06em;color:var(--navy);margin-bottom:6px;transition:color .35s}
.follow-line{width:2.5px;height:38px;border-radius:2px;margin-bottom:8px; background:linear-gradient(180deg,var(--navy),rgba(11,27,50,0));opacity:.6;transition:background .35s,opacity .35s}
.follow a{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--navy); opacity:.75;transition:color .35s,opacity .22s,transform .22s}
.follow a svg{width:19px;height:19px;stroke-width:1.9}
.follow a[aria-label="بيهانس"] svg{width:23px;height:23px}
.follow a[aria-label="لينكدإن"] svg{width:22px;height:22px}
.follow a:hover{opacity:1;color:var(--orange)}
.follow.on-dark .follow-label{color:#fff}
.follow.on-dark .follow-line{background:linear-gradient(180deg,#fff,rgba(255,255,255,0))}
.follow.on-dark a{color:#fff}
.follow.on-dark a:hover{color:var(--orange)}
.follow{transition:color .35s}
.follow .follow-label,.follow-line,.follow a{transition:color .35s,background .35s}
.follow--white{z-index:91;pointer-events:none}
.follow--white .follow-label{color:#fff}
.follow--white .follow-line{background:linear-gradient(180deg,#fff,rgba(255,255,255,0));opacity:.85}
.follow--white a{color:#fff;opacity:.9}
.to-top.to-top--white{z-index:91;pointer-events:none;color:#fff}
.to-top{position:fixed;right:42px;top:50%;transform:translateY(-50%);z-index:90; display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--navy); cursor:pointer;background:transparent;border:0;font-family:var(--ar); opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,color .2s,transform .2s}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{color:var(--orange)}
.to-top svg{width:16px;height:16px}
.to-top span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:1rem;font-weight:800;letter-spacing:.06em}
.to-top .line{width:2px;height:52px;border-radius:2px;background:linear-gradient(180deg,rgba(11,27,50,0),currentColor)}
@media(max-width:1180px){.follow{display:none}}
@media(max-width:1100px){.to-top{display:none}}

/* the twins start invisible; the script reveals them only with a mask */
.follow--white,.to-top--white{opacity:0}

/* Firefox paints native button chrome that Chrome does not: an inner
   border on press and the platform appearance. Both are user-agent
   styles, which is what !important is for. */
.to-top,.follow a{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.to-top::-moz-focus-inner,.follow a::-moz-focus-inner{border:0!important;padding:0!important}
/* hello-elementor's reset fills every button #c36 on hover; the state has to
   be named or `button:hover` (0-1-1) outranks `.to-top` (0-1-0) */
.to-top,.to-top:hover,.to-top:focus,.to-top:active,
.follow a,.follow a:hover,.follow a:focus,.follow a:active{outline:0!important;box-shadow:none!important;background:none!important;background-color:transparent!important;border:0!important;text-decoration:none}
.to-top:focus-visible svg{outline:2px solid var(--orange)!important;outline-offset:4px;border-radius:50%}
.follow a:focus-visible{outline:2px solid var(--orange)!important;outline-offset:3px;border-radius:50%}

/* the labels are controls, not copy: a click that drifts must not select */
.follow,.follow *,.to-top,.to-top *{-webkit-user-select:none;user-select:none}

/* QA only: reveal the right rail without scrolling, and mirror its hover */
body.sa-qa-totop .to-top{opacity:1;visibility:visible}
body.sa-qa-totop-hover .to-top{opacity:1;visibility:visible;color:var(--orange)}

/* ── hero, ported verbatim from the built design ───────────────────── */
.hl{color:var(--orange)}
.hero{min-height:72vh;display:flex;align-items:center;padding:clamp(108px,11vh,132px) 0 clamp(18px,2vw,34px);position:relative;transition:--gx .3s ease-out,--gy .3s ease-out; background:radial-gradient(115% 95% at 74% 6%,rgba(255,149,26,.008) 0%,rgba(255,149,26,.003) 26%,transparent 54%),radial-gradient(78% 68% at 50% 48%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 72%),linear-gradient(160deg,#FFFFFF 0%,#FEFCFA 55%,#FCFDFE 82%,#FFFFFF 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 55%,#fff 100%)}
.hero>.container{width:100%}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-pattern{position:absolute;inset:-16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M9 12 Q14 18 19 12' fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-size:28px 28px;filter:url(#glassripple); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%)}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(80px)}
.hero-bg .b1{top:-14%;right:-6%;width:520px;height:520px;background:radial-gradient(circle,rgba(255,149,26,.02),transparent 70%)}
.hero-bg .b2{bottom:-24%;left:-10%;width:560px;height:560px;background:radial-gradient(circle,rgba(11,27,50,.28),transparent 70%)}
.hero-tex{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5; background: radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.7px) 0 0/22px 22px, radial-gradient(rgba(255,149,26,.4) 1px,transparent 1.7px) 11px 11px/44px 44px, repeating-linear-gradient(90deg,transparent 0 21px,rgba(255,255,255,.05) 21px 22px); -webkit-mask-image:radial-gradient(135% 105% at 70% 18%,#000 0%,rgba(0,0,0,.5) 55%,transparent 86%); mask-image:radial-gradient(135% 105% at 70% 18%,#000 0%,rgba(0,0,0,.5) 55%,transparent 86%)}
.hero-glass{position:absolute;inset:0;z-index:1;pointer-events:none; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%); mask-composite:intersect}
.hero-smile-bottom{position:absolute;left:50%;bottom:0;z-index:2;width:min(74vw,820px);height:auto;pointer-events:none; transform:translate(-50%,50%); filter:drop-shadow(0 -8px 26px rgba(11,27,50,.2)); animation:smileRise 1.1s cubic-bezier(.5,0,.2,1) .45s both}
.hero .container{position:relative;z-index:2}
.hero .kick{margin-bottom:30px}
.hero h1{font-size:clamp(2.9rem,9vw,7.4rem);line-height:.92;letter-spacing:-.045em}
.hero h1 .row2{display:flex;align-items:center;gap:.2em;flex-wrap:wrap}
.hero h1 .bigsmile{width:clamp(90px,13vw,180px);flex-shrink:0}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px)}
.hero-foot .sub{font-size:clamp(1.05rem,2.9vw,1.25rem);color:var(--muted);max-width:400px;line-height:1.6}
.hero-foot .acts{display:flex;gap:14px;flex-wrap:wrap}
.hero-badge{display:inline-flex;align-items:center;gap:9px;margin-bottom:28px;padding:9px 18px;border-radius:100px; font-size:.95rem;font-weight:600;color:var(--navy); background:rgba(255,149,26,.12); -webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5); border:1px solid rgba(255,149,26,.38); box-shadow:0 10px 34px -12px rgba(255,149,26,.55),inset 0 1px 0 rgba(255,255,255,.55)}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,149,26,.22)}
.hero h1 .hl{position:relative;display:inline-block}
.hero .container>*{animation:heroBlur .9s ease both}
.hero .container>*:nth-child(1){animation-delay:.1s}
.hero .container>*:nth-child(2){animation-delay:.28s}
.hero .container>*:nth-child(3){animation-delay:.5s}
.marquee{padding:62px 0 66px;position:relative;z-index:3;overflow:hidden; max-width:calc(var(--container) - 64px);margin:0 auto;border-radius:28px; background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4); border:1px solid var(--line);box-shadow:0 16px 46px -22px rgba(11,27,50,.34)}
.marquee-title{text-align:center;color:var(--muted);font-size:1.02rem;font-weight:500;margin-bottom:28px;padding:0 20px}
.marquee .strip{overflow:hidden;white-space:nowrap;position:relative}
.marquee .strip::before,.marquee .strip::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.marquee .strip::before{right:0;background:linear-gradient(270deg,#fdfefe,transparent)}
.marquee .strip::after{left:0;background:linear-gradient(90deg,#fdfefe,transparent)}
.marquee .row{display:inline-flex;gap:30px;align-items:center;animation:scroll 60s linear infinite}
.marquee img{height:44px;width:auto;flex-shrink:0;filter:brightness(0) saturate(100%) invert(9%) sepia(31%) saturate(2200%) hue-rotate(190deg);opacity:.6;transition:opacity .25s}
.marquee img:hover{opacity:1}
.hero .hero-logos{background:none;backdrop-filter:none;-webkit-backdrop-filter:none; border:0;box-shadow:none;border-radius:0;max-width:100%;margin:clamp(48px,6vh,84px) 0 0;padding:0;z-index:1}
.hero .hero-logos .marquee-title{color:var(--muted);font-size:1.16rem;font-weight:700;margin-bottom:26px}
.hero .hero-logos .strip::before, .hero .hero-logos .strip::after{display:none}
.hero .hero-logos .strip{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.hero .hero-logos img{height:52px}
.hero .hero-logos .row{gap:64px}
.hero::after{display:block;content:"";position:absolute;left:0;right:0;bottom:0;height:26%;z-index:0;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.72) 58%,#fff 100%)}
.hero h1 .dot{font-family:'Thmanyah Sans','Tajawal',sans-serif;font-style:normal;font-weight:inherit}
.hero-grid{position:absolute;inset:-16px;z-index:0;pointer-events:none; filter:blur(1.9px); background-image: linear-gradient(to right, rgba(11,27,50,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(11,27,50,.10) 1px, transparent 1px); background-size:38px 38px; -webkit-mask-image:radial-gradient(40% 40% at 68% 34%,#000 0%,rgba(0,0,0,.5) 46%,transparent 76%); mask-image:radial-gradient(40% 40% at 68% 34%,#000 0%,rgba(0,0,0,.5) 46%,transparent 76%)}
.about-card .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
@media(prefers-reduced-motion:reduce){.hero-smile-bottom{animation:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.hero .container>*{animation:none}}
@media(max-width:1380px){.marquee{margin-left:32px;margin-right:32px}}
/* the first two words stay on ONE line: font = (usable width)/(measured text
   coefficient) — AR pair is 5.92x the font size, EN 9.25x. Below the clamp
   floor (very small phones) the pair is allowed to wrap. */
@media(max-width:600px){.hero h1{font-size:clamp(2.2rem,calc(16.4vw - 11px),4.4rem)}
html[lang^="en"] .hero h1{font-size:clamp(1.9rem,calc(10.4vw - 7px),4.4rem)}}
@keyframes smileRise{from{opacity:0;transform:translate(-50%,82%)}to{opacity:1;transform:translate(-50%,50%)}}
@keyframes heroBlur{from{opacity:0;filter:blur(16px);transform:translateY(14px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* the same reset the rails needed, for every button we render */
.btn,.btn:hover,.btn:focus,.btn:active{
  outline:0;box-shadow:none;text-decoration:none;
  -webkit-appearance:none;-moz-appearance:none;appearance:none}
.btn::-moz-focus-inner{border:0;padding:0}

/* ── about, ported verbatim from the built design ── */
.about2{padding:clamp(56px,6vw,92px) 0 clamp(48px,5.5vw,84px);position:relative;overflow:hidden}
.a2-smile{position:absolute;left:clamp(-190px,-12vw,-90px);bottom:clamp(-70px,-6vw,-30px); width:min(52vw,540px);height:auto;z-index:0;pointer-events:none;opacity:.95; filter:drop-shadow(0 22px 34px rgba(11,27,50,.2))}
.a2-copy .kick,.a2-copy h2,.a2-copy p,.a2-link{animation:heroBlur .9s ease both}
.a2-copy .kick{animation-delay:.62s}
.a2-copy h2{animation-delay:.72s}
.a2-copy p{animation-delay:.84s}
.a2-link{animation-delay:.94s}
.a2-stats{animation:softRise .9s cubic-bezier(.4,0,.2,1) .78s both}
/* `backwards`, not `both`. A forwards-filled animation keeps holding its
   last keyframe — opacity:1 — and outranks every declaration that comes
   after it, which is why the breakpoints below appeared to do nothing.
   With `backwards` the from-state applies during the delay, and once the
   animation ends the element goes back to obeying its own rules. */
.a2-smile{animation:softRise 1.1s cubic-bezier(.5,0,.2,1) .68s backwards}
.a2-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,86px);align-items:start}
.a2-copy h2{font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.14;margin:16px 0 20px}
.a2-copy p{color:var(--muted);font-size:clamp(.98rem,2.6vw,1.08rem);line-height:1.75;max-width:430px}
.a2-link{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-weight:700; color:var(--navy);border-bottom:2px solid var(--orange);padding-bottom:4px;transition:.25s}
.a2-link svg{width:18px;transition:transform .25s}
.a2-link:hover{color:var(--orange)}
.a2-link:hover svg{transform:translateX(-5px)}
.a2-stats{position:relative;z-index:1}
.a2-steps-ttl{display:block;font-size:.8rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);margin-bottom:26px}
/* the same glass the header wears: rgba white at .82 over an 18px blur with a
   touch of saturation. The blur has to live on the CELLS, not on the grid —
   a backdrop-filter on the parent would blur the hairlines it draws with its
   own background, and the 1px gaps would smear.

   No shadow, deliberately: the card sits over the smile, and a shadow would
   cut it out of the page instead of letting it float on it. */
.a2-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(11,27,50,.09);border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.55)}
.a2-stat{padding:clamp(20px,2.4vw,32px) clamp(16px,2vw,26px);text-align:start;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
/* where the browser cannot blur, fall back to opaque white rather than to a
   translucent panel with the smile legible straight through the figures */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .a2-stat{background:#fff}
}
.a2-stat .num{font-family:var(--lat);font-weight:700;font-size:clamp(2.1rem,3.6vw,3.1rem); line-height:1;color:var(--navy);letter-spacing:-.02em; display:inline-block;position:relative;text-align:right; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.a2-stat .lbl{color:var(--muted);font-size:clamp(.85rem,2.3vw,.95rem);margin-top:8px}
.a2-stat .num .d{display:inline-block;will-change:transform}
.a2-stat .num .d.scram{color:var(--orange);opacity:.9;filter:blur(.35px)}
.a2-stat .num .d.lock{animation:digitLock .34s cubic-bezier(.2,.85,.2,1) both}
@media(prefers-reduced-motion:reduce){.a2-copy .kick,.a2-copy h2,.a2-copy p,.a2-link,.a2-stats,.a2-smile{animation:none}}
/* Below 900 the two columns become one, and the «أرقامنا» card — which is
   white — comes down on top of the smile. The smile is decoration, so it
   yields: it slides further out and fades as the viewport narrows, and is
   gone before it can sit half-buried under a white panel. */
@media(max-width:1100px){.a2-smile{left:-20vw;bottom:-11vw;opacity:.6}}
@media(max-width:900px){.a2-grid{grid-template-columns:1fr;gap:44px}
  .a2-smile{width:74vw;left:-30vw;bottom:-17vw;opacity:.28}}
@media(max-width:760px){.a2-smile{display:none}}
@keyframes heroBlur{from{opacity:0;filter:blur(16px);transform:translateY(14px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes softRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes digitLock{
    0%{transform:translateY(-7px) scale(1.14);color:var(--orange);filter:blur(1px)}
    60%{transform:translateY(1px) scale(.99)}
    100%{transform:none;color:var(--navy);filter:none}}

/* ── services, ported verbatim from the built design ── */
.srv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.srv-head h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.srv-head p{color:var(--muted);max-width:280px;font-size:clamp(.95rem,2.5vw,1.05rem);line-height:1.6}
.srow{display:grid;grid-template-columns:auto auto 1fr auto;gap:clamp(16px,2.4vw,34px);align-items:center;padding:clamp(26px,3.4vw,44px) clamp(14px,2vw,30px);border-radius:26px;transition:background .35s cubic-bezier(.4,0,.2,1),padding .35s cubic-bezier(.4,0,.2,1);position:relative}
.srow::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line);transition:opacity .3s}
.srow:last-child::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--line);transition:opacity .3s}
.srow:hover::before,.srow:hover::after,.srow:hover+.srow::before{opacity:0}
.srow .sico{width:clamp(30px,3vw,46px);color:var(--navy);transition:color .35s,transform .35s;flex-shrink:0}
.srow .sico svg{width:100%;height:auto;display:block}
.srow:hover .sico{color:var(--orange);transform:translateX(-4px)}
.srow .idx{font-family:var(--lat);font-weight:600;font-size:1.05rem;color:var(--muted);transition:.35s}
.srow .ttl{font-size:clamp(1.2rem,2.6vw,2rem);font-weight:900;letter-spacing:-.03em;color:var(--navy);transition:.35s}
.srow .en{font-family:var(--lat);font-weight:500;color:var(--muted);font-size:.95rem;margin-top:6px;transition:.35s}
.srow .arw{width:clamp(48px,5vw,62px);height:clamp(48px,5vw,62px);border-radius:50%;border:1.5px solid #d9e0ea;display:grid;place-items:center;flex-shrink:0;transition:.35s}
.srow .arw svg{width:22px;color:var(--navy);transition:.35s}
.srow:hover{background:var(--navy);padding-inline-end:clamp(24px,3vw,50px)}
.srow:hover .idx{color:var(--orange)}
.srow:hover .ttl,.srow:hover .en{color:#fff}
.srow:hover .en{opacity:.7}
.srow:hover .arw{background:var(--orange);border-color:transparent}
.srow:hover .arw svg{color:#0a1424;transform:rotate(-45deg)}
.srow .sdesc{color:rgba(255,255,255,.55);font-size:clamp(.86rem,2.3vw,.95rem);line-height:1.65;margin-top:7px;max-width:520px;transition:.35s}
#services.dark-sec .srow:hover .sdesc{color:var(--muted)}
.srv-cta{margin-top:clamp(34px,3.8vw,56px); display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.srv-cta h3{color:#fff;font-size:clamp(1.2rem,2.2vw,1.65rem);font-weight:900;letter-spacing:-.02em}
.srv-cta p{color:rgba(255,255,255,.6);margin-top:7px;font-size:clamp(.88rem,2.3vw,.97rem);max-width:430px}
.srv-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
#services.dark-sec .srv-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
#services.dark-sec .srv-cta .btn-ghost .ico{background:#fff;color:var(--navy)}
#services.dark-sec .srv-cta .btn-ghost:hover{border-color:#fff}
#services.dark-sec{background:var(--navy);color:#fff}
#services.dark-sec h2{color:#fff}
#services.dark-sec .srv-head p{color:rgba(255,255,255,.6)}
#services.dark-sec .srow::before, #services.dark-sec .srow:last-child::after{background:rgba(255,255,255,.14)}
#services.dark-sec .srow .idx{color:rgba(255,255,255,.5)}
#services.dark-sec .srow .ttl{color:#fff}
#services.dark-sec .srow .en{color:rgba(255,255,255,.55)}
#services.dark-sec .srow .sico{color:#fff}
#services.dark-sec .srow .arw{border-color:rgba(255,255,255,.28)}
#services.dark-sec .srow .arw svg{color:#fff}
#services.dark-sec .srow:hover{background:#fff}
#services.dark-sec .srow:hover .ttl{color:var(--navy)}
#services.dark-sec .srow:hover .en{color:var(--muted);opacity:1}
#services.dark-sec .srow:hover .idx{color:var(--orange)}
#services.dark-sec .srow:hover .sico{color:var(--orange)}
#services.dark-sec .srow:hover .arw{background:var(--orange);border-color:transparent}
#services.dark-sec .srow:hover .arw svg{color:#0a1424}
@media(max-width:600px){.srow{grid-template-columns:auto auto 1fr;gap:14px}.srow .arw{display:none}.srow .sico{width:30px}}

/* ── work, ported verbatim from the built design ── */
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.work-head h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.pfilter{display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,38px);margin:-10px 0 34px}
.pf{background:none;border:0;cursor:pointer;font-family:var(--ar);font-size:1rem;font-weight:400; color:var(--muted);padding:0 2px 14px;display:inline-flex;align-items:flex-start;gap:5px;transition:color .25s}
.pf:hover{color:var(--navy)}
.pf.is-on{color:var(--navy);font-weight:700}
.pf-text{position:relative;display:inline-block}
.pf-sm{position:absolute;left:0;width:100%;bottom:-11px;height:8px;opacity:0;transform:translateY(4px); transition:.3s cubic-bezier(.4,0,.2,1);pointer-events:none}
.pf-sm path{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .42s ease .05s}
.pf:hover .pf-sm{opacity:.5;transform:translateY(0)}
.pf:hover .pf-sm path{stroke-dashoffset:0}
.pf.is-on .pf-sm{opacity:1;transform:translateY(0)}
.pf.is-on .pf-sm path{stroke-dashoffset:0}
.pf-n{font-family:var(--lat);font-size:.72rem;font-weight:400;color:var(--muted);align-self:flex-start}
.pf.is-on .pf-n{color:var(--orange)}
.pcard{opacity:1;transform:none;transition:.35s cubic-bezier(.4,0,.2,1)}
.pcard.is-out{display:none}
.pcard.is-in{animation:pcardIn .38s cubic-bezier(.3,.8,.3,1) both}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff; display:flex;flex-direction:column;transition:.35s cubic-bezier(.4,0,.2,1)}
.pcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(11,27,50,.32);border-color:#d6dfeb}
.pcard-ph{position:relative;aspect-ratio:16/11;display:grid;place-items:center;overflow:hidden}
/* the cover fills the card; the monogram is the thing that sits small in the
   middle of one that has no cover yet. Two different jobs, two classes. */
.pcard-ph .pcard-img,
.pjn-ph .pcard-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pcard-ph .mono{width:clamp(60px,7vw,96px);opacity:.95;filter:drop-shadow(0 12px 26px rgba(0,0,0,.32))}
.pcard-badge{position:absolute;top:14px;inset-inline-start:14px;font-size:.76rem;font-weight:700; background:rgba(255,255,255,.93);color:var(--navy);border-radius:100px;padding:5px 12px}
.pcard-yr{position:absolute;top:14px;inset-inline-end:14px;font-family:var(--lat);font-size:.76rem; background:rgba(11,27,50,.55);color:#fff;border-radius:100px;padding:5px 11px}
.pcard-body{padding:20px;display:flex;flex-direction:column;flex:1}
.pcard-body h3{font-size:clamp(1.06rem,2.9vw,1.2rem);font-weight:900;letter-spacing:-.02em;color:var(--navy)}
.pcard-desc{color:var(--muted);font-size:.94rem;line-height:1.7;margin-top:8px}
.pcard-stack{font-family:var(--lat);font-size:.78rem;color:var(--muted);margin-top:14px;padding-top:14px; border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-lnk{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px; font-weight:700;font-size:.9rem;color:var(--navy);transition:.25s}
.pcard-lnk svg{width:16px;transition:transform .25s}
.pcard:hover .pcard-lnk{color:var(--orange)}
.pcard:hover .pcard-lnk svg{transform:translateX(-4px)}
@media(prefers-reduced-motion:reduce){.pcard.is-in{animation:none}}
@media(max-width:980px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:660px){.pgrid{grid-template-columns:1fr}}
@keyframes pcardIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* ── methodology, ported verbatim from the built design ── */
.mrail{display:grid;grid-template-columns:repeat(6,1fr);position:relative}
/* the connecting line sits behind the dots, at their vertical centre */
.mrail::before{content:"";position:absolute;top:19px;right:0;left:0;height:2px;background:var(--line)}
.mrail .ms{position:relative;padding:0 12px}
.mrail .ms-dot{width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--line);
  display:grid;place-items:center;font-family:var(--lat);font-weight:800;font-size:.86rem;
  color:var(--navy);position:relative;z-index:2;transition:border-color .3s,color .3s}
.mrail .ms:hover .ms-dot{border-color:var(--orange);color:var(--orange)}
.mrail h4{font-size:1rem;font-weight:900;letter-spacing:-.02em;color:var(--navy);margin:16px 0 8px}
.mrail p{color:var(--muted);font-size:clamp(.8rem,2.1vw,.88rem);line-height:1.8}
.mrail .ms-dur{display:block;margin-top:10px;font-family:var(--lat);font-size:.78rem;
  font-weight:700;color:var(--muted)}
@media(max-width:980px){.mrail{grid-template-columns:1fr 1fr 1fr}.mrail::before{display:none}}
@media(max-width:640px){.mrail{grid-template-columns:1fr 1fr}}
.mth-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-bottom:clamp(28px,3.4vw,42px)}
.mth-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-top:16px}
.mth-head p{color:var(--muted);max-width:320px;font-size:clamp(.88rem,2.3vw,.97rem)}
.mth-cta{margin-top:clamp(20px,2.4vw,28px);background:var(--navy);border-radius:24px;
  padding:clamp(24px,3vw,38px) clamp(22px,3vw,40px);
  display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.mth-cta h3{color:#fff;font-size:clamp(1.15rem,2.2vw,1.6rem);font-weight:900;letter-spacing:-.02em}
.mth-cta p{color:rgba(255,255,255,.6);margin-top:7px;font-size:clamp(.88rem,2.3vw,.97rem);max-width:430px}

/* ── clients, ported verbatim from the built design ── */
/* CLIENTS — quiet grid, greyscale until hover */
.cl-head{text-align:center;margin-bottom:34px}
.cl-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-top:14px}
.cl-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);
  border-radius:24px;overflow:hidden}
.cl-cell{display:grid;place-items:center;padding:34px 22px;transition:.3s;
  border-inline-start:1px solid var(--line);border-top:1px solid var(--line);
  opacity:.55;filter:grayscale(1)}
.cl-cell:nth-child(-n+4){border-top:0}
.cl-cell:nth-child(4n+1){border-inline-start:0}
.cl-cell:hover{opacity:1;filter:none;background:var(--bg-soft)}
/* Elementor's frontend sets `.elementor img{height:auto}` — 0-1-1, which
   outranks a lone `.cl-img` (0-1-0) and let every logo render at its own
   194px height. The cell class ties it back in our favour. */
.cl-cell .cl-img{height:70px;width:auto;display:block}
@media(max-width:860px){
  .cl-grid{grid-template-columns:repeat(2,1fr)}
  .cl-cell:nth-child(-n+4){border-top:1px solid var(--line)}
  .cl-cell:nth-child(-n+2){border-top:0}
  .cl-cell:nth-child(4n+1){border-inline-start:1px solid var(--line)}
  .cl-cell:nth-child(2n+1){border-inline-start:0}
  .cl-cell .cl-img{height:56px}}

/* ── testimonials, ported verbatim from the built design ── */
/* TESTIMONIALS — self-scrolling rail, pauses on hover */
.tv-head{text-align:center;margin-bottom:34px}
.tv-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:14px}
/* room inside the clipping box so the hover shadow isn't sliced off */
.tv-wrap{overflow:hidden;padding:26px 0 40px;margin:-26px 0 -40px;position:relative}
.tv-wrap::before,.tv-wrap::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.tv-wrap::before{right:0;background:linear-gradient(270deg,#fff,transparent)}
.tv-wrap::after{left:0;background:linear-gradient(90deg,#fff,transparent)}
.tv-row{display:flex;gap:18px;width:max-content;animation:tvScroll 46s linear infinite}
@keyframes tvScroll{from{transform:translateX(0)}to{transform:translateX(50%)}}
.tv-wrap:hover .tv-row{animation-play-state:paused}
.tv-c{flex:0 0 clamp(290px,26vw,360px);border:1px solid var(--line);border-radius:22px;
  padding:26px;display:flex;flex-direction:column;background:#fff;transition:.3s}
.tv-c:hover{border-color:#d6dfeb;box-shadow:0 22px 42px -26px rgba(11,27,50,.26)}
.tv-stars{display:inline-flex;gap:2px;color:var(--orange)}
.tv-st{width:15px}
.tv-c blockquote{font-size:.97rem;line-height:1.8;color:var(--ink);margin:14px 0 20px;flex:1}
.tv-who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.tv-av{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:grid;
  place-items:center;font-family:var(--lat);font-weight:800;font-size:.82rem;flex-shrink:0}
.tv-nm{font-weight:800;font-size:.94rem;color:var(--navy)}
.tv-rl{font-size:.81rem;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.tv-row{animation:none}}
/* ---- TESTIMONIALS on dark ---- */
#testimonials.dark-sec{background:var(--navy)}
#testimonials.dark-sec .tv-head h2{color:#fff}
/* the edge fades must match the dark band, not white */
#testimonials.dark-sec .tv-wrap::before{background:linear-gradient(270deg,var(--navy),transparent)}
#testimonials.dark-sec .tv-wrap::after{background:linear-gradient(90deg,var(--navy),transparent)}
#testimonials.dark-sec .tv-c{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12)}
#testimonials.dark-sec .tv-c:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.26);
  box-shadow:0 22px 42px -26px rgba(0,0,0,.5)}
#testimonials.dark-sec .tv-c blockquote{color:rgba(255,255,255,.86)}
#testimonials.dark-sec .tv-who{border-top-color:rgba(255,255,255,.13)}
#testimonials.dark-sec .tv-av{background:var(--orange);color:#0a1424}
#testimonials.dark-sec .tv-nm{color:#fff}
#testimonials.dark-sec .tv-rl{color:rgba(255,255,255,.55)}

/* ── products / hosting, ported verbatim from the built design ── */
.hos-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;
  margin-bottom:clamp(28px,3.4vw,42px)}
.hos-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-top:16px}
.hos-head p{color:var(--muted);max-width:330px;font-size:clamp(.88rem,2.3vw,.97rem)}
.hos-g{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hos-c{border-radius:26px;padding:clamp(26px,3.2vw,40px);display:flex;flex-direction:column}
.hos-c1{background:var(--navy);color:#fff}
.hos-c2{background:var(--cream)}
.hos-c h3{font-size:clamp(1.25rem,2.6vw,1.85rem);font-weight:900;letter-spacing:-.03em;
  line-height:1.16;color:var(--navy);margin:14px 0 10px}
.hos-c1 h3{color:#fff}
.hos-c2 p{color:var(--muted);font-size:.97rem}
.hos-l{list-style:none;display:grid;gap:12px;margin:18px 0 26px}
.hos-l li{display:flex;gap:12px;align-items:center;font-size:.96rem}
.hos-c1 .hos-l li{color:rgba(255,255,255,.82)}
.hos-c2 .hos-l li{color:var(--muted)}
/* each line carries its own icon instead of a repeated tick; the fixed 22px box
   keeps every label starting on the same vertical line despite differing ink widths */
.hos-i{width:22px;flex-shrink:0;display:block;color:var(--orange)}
.hos-i svg{width:100%;height:auto;display:block}
.hos-c .btn{align-self:flex-start;margin-top:auto}
@media(max-width:820px){.hos-g{grid-template-columns:1fr}}

/* ── journal, ported verbatim from the built design ── */
/* BLOG — oversized index numbers behind each card, fills navy on hover */
.bg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.bg-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-top:14px}
.bg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bg-c{position:relative;border-radius:22px;padding:clamp(24px,3vw,36px);background:var(--bg-soft);
  overflow:hidden;transition:background .35s cubic-bezier(.4,0,.2,1)}
.bg-c::before{content:attr(data-n);position:absolute;top:-16px;inset-inline-start:16px;
  font-family:var(--lat);font-weight:800;font-size:5.4rem;line-height:1;
  color:rgba(11,27,50,.06);transition:color .35s}
.bg-cat{position:relative;font-size:.78rem;font-weight:700;color:var(--orange)}
.bg-c h3{position:relative;font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.4;margin-top:9px;transition:color .35s}
.bg-c p{position:relative;color:var(--muted);margin-top:10px;font-size:.95rem;transition:color .35s}
.bg-rt{position:relative;display:block;font-size:.8rem;color:var(--muted);margin-top:16px;transition:color .35s}
.bg-c:hover{background:var(--navy)}
.bg-c:hover::before{color:rgba(255,149,26,.2)}
.bg-c:hover h3{color:#fff}
.bg-c:hover p,.bg-c:hover .bg-rt{color:rgba(255,255,255,.62)}
@media(max-width:820px){.bg-grid{grid-template-columns:1fr}}

/* ── closing call to action, ported verbatim from the built design ── */
/* CTA — bold */
/* `position:relative` is load-bearing here, not decoration: the orange glow is
   an absolutely positioned ::before, and with this section left static it had
   no containing block to sit in. It escaped the `overflow:hidden` above,
   stretched across the whole document, and painted its bright spot — «50% 12%»
   — at the top of every page. That was the warm wash over the heroes. */
.cta{position:relative;background:var(--navy);color:#fff;overflow:hidden;text-align:center}
/* the glow used a `circle` gradient in a 70%x130% box whose bottom edge sat
   inside the section — the disc was still opaque there, so overflow:hidden
   sliced it in a straight line. A percentage-extent ellipse always finishes
   fading inside its own box, so nothing can be clipped. */
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(68% 72% at 50% 12%,rgba(255,149,26,.24) 0%,rgba(255,149,26,.10) 42%,transparent 72%)}
.cta .container{position:relative;z-index:2}
.cta .container:not(.cta-split){display:flex;flex-direction:column;align-items:center}
.cta img.smile{width:96px;margin-bottom:28px;filter:drop-shadow(0 14px 34px rgba(255,149,26,.5))}
.cta h2{color:#fff;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;max-width:820px;letter-spacing:-.035em}
.cta p{color:#b9c6da;font-size:1.2rem;margin:22px 0 38px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* CTA — copy on one side, the chrome smile large on the other */
.cta .container.cta-split{display:grid;text-align:start;grid-template-columns:1fr .95fr;gap:clamp(24px,3.4vw,52px);align-items:center;
  position:relative;z-index:2}
.cta-split .cta-copy h2{color:#fff;font-size:clamp(1.9rem,4vw,3rem);line-height:1.22;margin-top:14px}
.cta-split .cta-copy p{color:rgba(255,255,255,.62);margin-top:14px;max-width:420px}
.cta-split .cta-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px;justify-content:flex-start}
.cta-smile{width:min(52vw,560px);height:auto;justify-self:center;
  filter:drop-shadow(0 22px 38px rgba(0,0,0,.45));
  will-change:transform;transform:translateZ(0)}
/* .cta .container.cta-split outranks a bare .cta-split, so the stacking
   rules must carry the same weight or they silently never apply */
@media(max-width:880px){.cta .container.cta-split{grid-template-columns:1fr;text-align:center}
  .cta-copy p{margin-inline:auto}
  .cta-split .cta-actions{justify-content:center}
  .cta-smile{width:min(70vw,320px);order:-1;margin-inline:auto}}
/* Elementor's `.elementor img{height:auto}` is 0-1-1 and would beat the smile's
   own sizing the way it beat the client logos */
.cta-split .cta-smile{height:auto}

/* ── work page hero, ported verbatim from the built design ── */
.crumb{display:flex;gap:9px;align-items:center;font-size:.86rem;color:var(--muted);margin-bottom:20px}
.crumb b{color:var(--navy);font-weight:700}
.crumb span{opacity:.5}
.crumb a{transition:color .2s}
.crumb a:hover{color:var(--orange)}
.wh{position:relative;overflow:hidden;text-align:center;
  padding:calc(88px + clamp(26px,3.2vw,52px)) 0 clamp(22px,2.4vw,36px)}
/* centred bright spot: the layout is symmetric, so an off-centre one would pull the eye */
.wh::before{content:"";position:absolute;inset:-16px;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(11,27,50,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,27,50,.10) 1px,transparent 1px);
  background-size:38px 38px;filter:blur(1.9px);
  -webkit-mask-image:radial-gradient(46% 54% at 50% 42%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%);
  mask-image:radial-gradient(46% 54% at 50% 42%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%)}
.wh .container{position:relative;z-index:2}
.wh .crumb{justify-content:center}
.wh h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.1;margin-top:14px}
.wh-lead{color:var(--muted);font-size:1.06rem;line-height:1.8;max-width:560px;margin:18px auto 0}
/* the filter lives in the hero: visitors arrive looking for one kind of work */
.wh-cats{display:flex;gap:clamp(18px,2.6vw,38px);flex-wrap:wrap;justify-content:center;margin-top:28px}
/* the filters are the same object on every page now: plain words, with the
   smile drawn under the one you are on. They carry .pf, so the look lives in
   one place and these classes are left to the scripts that read them. */
.wh .crumb,.wh .kick,.wh h1,.wh-lead,.wh-cats{animation:heroBlur .9s ease both}
.wh .crumb{animation-delay:.06s}
.wh .kick{animation-delay:.2s}
.wh h1{animation-delay:.32s}
.wh-lead{animation-delay:.46s}
.wh-cats{animation-delay:.6s}
@media(prefers-reduced-motion:reduce){
  .wh .crumb,.wh .kick,.wh h1,.wh-lead,.wh-cats{animation:none}}

/* ── project detail page, ported verbatim from the built design ── */
/* ---- PROJECT PAGE HERO (option 4: navy band, shot breaking out of it) ---- */
.pjh{position:relative;overflow:hidden;background:var(--navy);
  /* rounded bottom corners instead of a hard full-width cut; overflow:hidden above
     makes the grid sheet respect the curve too */
  border-end-start-radius:34px;border-end-end-radius:34px;
  /* the shot below is pulled up 60px, so the band must clear that much under the facts */
  padding:calc(88px + clamp(26px,3.2vw,52px)) 0 calc(60px + clamp(26px,3vw,44px))}
.pjh::before{content:"";position:absolute;inset:-16px;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);
  background-size:38px 38px;filter:blur(1.9px);
  -webkit-mask-image:radial-gradient(48% 56% at 58% 40%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%);
  mask-image:radial-gradient(48% 56% at 58% 40%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%)}
.pjh .container{position:relative;z-index:2}
.pjh .crumb{color:rgba(255,255,255,.6)}
.pjh .crumb b{color:#fff}
.pjh .crumb a:hover{color:var(--orange)}
.pjh h1{color:#fff;font-size:clamp(2.1rem,4.8vw,3.8rem);line-height:1.06;margin-top:16px}
.pjh-lead{color:rgba(255,255,255,.66);font-size:1.06rem;line-height:1.85;max-width:600px;margin-top:20px}
.pjh-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,42px);
  margin-top:clamp(28px,3.4vw,40px);padding-top:26px;border-top:1px solid var(--line-d)}
.pjh-facts dt{font-family:var(--lat);font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.pjh-facts dd{font-size:1rem;font-weight:700;color:#fff;margin-top:9px;line-height:1.6}
/* the cover breaks out of the navy band and sits over the white below it */
.pjh-shot-wrap{position:relative;z-index:3;margin-top:-60px;margin-bottom:clamp(26px,3vw,44px);
  /* softRise, not heroBlur: blurring a screenshot on entry reads as an out-of-focus image. */
  animation:softRise 1s cubic-bezier(.4,0,.2,1) .74s both}
@media(prefers-reduced-motion:reduce){.pjh-shot-wrap{animation:none}}
.pjh-shot{aspect-ratio:16/7;border-radius:22px;overflow:hidden;position:relative;
  background:linear-gradient(140deg,#0e2b46,#4c7cb6);
  box-shadow:0 30px 70px -30px rgba(11,27,50,.5)}
.pjh-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* placeholder texture — drops out of its own accord once a real cover is set */
.pjh-shot:empty::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:36px 36px}
.pjh .crumb,.pjh .kick,.pjh h1,.pjh-lead,.pjh-facts{animation:heroBlur .9s ease both}
.pjh .crumb{animation-delay:.06s}
.pjh .kick{animation-delay:.2s}
.pjh h1{animation-delay:.32s}
.pjh-lead{animation-delay:.46s}
.pjh-facts{animation-delay:.6s}
@media(prefers-reduced-motion:reduce){
  .pjh .crumb,.pjh .kick,.pjh h1,.pjh-lead,.pjh-facts{animation:none}}
@media(max-width:820px){.pjh-facts{grid-template-columns:1fr 1fr}}
/* ---- PROJECT: challenge + build (option 5) ---- */
.pjs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.pjs blockquote{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:900;letter-spacing:-.025em;
  line-height:1.45;color:var(--navy);border-inline-start:3px solid var(--orange);
  padding-inline-start:22px;margin-top:16px}
.pjs-list{list-style:none;display:grid;gap:16px;margin-top:18px}
.pjs-list li{display:grid;grid-template-columns:22px 1fr;gap:13px;align-items:start;
  color:var(--muted);line-height:1.8}
.pjs-list li svg{width:20px;color:var(--orange);margin-top:4px}
.pjs-list li b{color:var(--navy);font-weight:700}
.pjs-lbl{font-family:var(--lat);font-size:.76rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange)}
@media(max-width:860px){.pjs{grid-template-columns:1fr}}
/* ---- PROJECT: annotated screenshots (option 5) ---- */
.pjg-r{display:grid;grid-template-columns:1fr .62fr;gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(20px,2.6vw,34px) 0;border-top:1px solid var(--line)}
.pjg-r:last-child{border-bottom:1px solid var(--line)}
/* order alone would drop the shot into the narrow column and shrink it,
   so the track sizes flip with it — every shot stays the same width */
.pjg-r:nth-child(even){grid-template-columns:.62fr 1fr}
.pjg-r:nth-child(even) .pjg-sh{order:2}
.pjg-sh{aspect-ratio:16/10;border-radius:20px;overflow:hidden;position:relative;
  background:linear-gradient(140deg,#0e2b46,#4c7cb6)}
.pjg-sh img{width:100%;height:100%;object-fit:cover;display:block}
/* placeholder texture — drops out of its own accord once a real shot is set */
.pjg-sh:empty::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:36px 36px}
.pjg-n{font-family:var(--lat);font-size:.76rem;font-weight:700;letter-spacing:.14em;color:var(--orange)}
.pjg-r h4{font-size:1.24rem;font-weight:900;letter-spacing:-.02em;color:var(--navy);margin:10px 0}
.pjg-r p{color:var(--muted);line-height:1.9}
@media(max-width:860px){
  .pjg-r,.pjg-r:nth-child(even){grid-template-columns:1fr}
  .pjg-r:nth-child(even) .pjg-sh{order:0}}
/* ---- PROJECT: what it was built with (option 4, plain list) ---- */
.pjt{display:grid;border-top:1px solid var(--line)}
.pjt .r{display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:baseline;
  padding:18px 4px;border-bottom:1px solid var(--line)}
.pjt .n{font-family:var(--lat);font-size:1rem;font-weight:700;color:var(--navy)}
.pjt .d{color:var(--muted);font-size:.94rem;line-height:1.85}
@media(max-width:700px){.pjt .r{grid-template-columns:1fr;gap:6px}}
/* ---- PROJECT: three more projects (option 4) ---- */
.pjn{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pjn a{border:1px solid var(--line);border-radius:20px;overflow:hidden;display:block;
  transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .32s}
.pjn a:hover{transform:translateY(-5px);box-shadow:0 20px 40px -22px rgba(11,27,50,.34)}
.pjn-ph{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden}
.pjn-ph img{width:34%;height:auto;opacity:.9}
.pjn-bd{padding:18px}
.pjn-bd h4{font-size:1.04rem;font-weight:900;letter-spacing:-.02em;color:var(--navy)}
.pjn-meta{color:var(--muted);font-size:.9rem;margin-top:6px}
@media(max-width:860px){.pjn{grid-template-columns:1fr}}
/* ---- the header goes white while the page opens on the navy band ---- */
/* the design writes these against `header`; ours is #sa-hdr, so the selectors
   are rewritten — the ID also lifts them clear of the base header rules */
body.top-dark #sa-hdr:not(.scrolled) .nav-links a,
body.top-dark #sa-hdr:not(.scrolled) .nav-item > .drop-trigger{color:#fff}
body.top-dark #sa-hdr:not(.scrolled) .nav-links a.is-here{color:#fff;font-weight:700}
body.top-dark #sa-hdr:not(.scrolled) .nav-links a:hover,
body.top-dark #sa-hdr:not(.scrolled) .nav-item > .drop-trigger:hover{color:var(--orange)}
body.top-dark #sa-hdr:not(.scrolled) .nav-lang{color:#fff;border-color:rgba(255,255,255,.32)}
body.top-dark #sa-hdr:not(.scrolled) .nav-lang:hover{border-color:#fff}

/* ── about page, ported verbatim from the built design ── */
/* ---- ABOUT PAGE HERO (option 12 grid + chrome smile, layout أ) ---- */
.ah{position:relative;overflow:hidden;padding:calc(88px + clamp(26px,3.2vw,52px)) 0 clamp(22px,2.4vw,36px)}
/* the faint grid, brightest behind the headline rather than behind the smile */
.ah::before{content:"";position:absolute;inset:-16px;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(11,27,50,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,27,50,.10) 1px,transparent 1px);
  background-size:38px 38px;filter:blur(1.9px);
  -webkit-mask-image:radial-gradient(44% 50% at 62% 40%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%);
  mask-image:radial-gradient(44% 50% at 62% 40%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%)}
.ah .container{position:relative;z-index:2}
.ah-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,3.4vw,56px);align-items:center}
.ah-copy h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1;margin-top:14px}
.ah-lead{color:var(--muted);font-size:1.06rem;line-height:1.7;max-width:480px;margin-top:18px}
.ah-smile{width:min(44vw,440px);height:auto;justify-self:center}
/* Elementor's `.elementor img{height:auto}` is 0-1-1; the smile is sized by
   width so this only needs to survive, but the grid class keeps it explicit */
.ah-grid .ah-smile{height:auto}
/* entrance — same heroBlur the home hero uses, staggered per element. */
.ah .crumb,.ah .kick,.ah-copy h1,.ah-lead{animation:heroBlur .9s ease both}
.ah .crumb{animation-delay:.06s}
.ah .kick{animation-delay:.2s}
.ah-copy h1{animation-delay:.32s}
.ah-lead{animation-delay:.5s}
/* the smile rises instead of blurring — a 440px blur is an expensive paint */
.ah-smile{animation:ahSmile 1.15s cubic-bezier(.5,0,.2,1) .4s both}
@keyframes ahSmile{from{opacity:0;transform:translateY(26px) scale(.965)}
  to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .ah .crumb,.ah .kick,.ah-copy h1,.ah-lead,.ah-smile{animation:none}}
@media(max-width:860px){.ah-grid{grid-template-columns:1fr}.ah-smile{width:68vw;order:-1}}
/* ---- ABOUT: story in three numbered chapters (option 5) ---- */
.st-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;
  margin-bottom:clamp(28px,3.4vw,40px)}
.st-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-top:14px}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,34px)}
.st-c{padding-top:26px;border-top:1px solid var(--line)}
.st-c .n{display:block;font-family:var(--lat);font-weight:800;font-size:.8rem;color:var(--orange);margin-bottom:10px}
.st-c h3{font-size:1.1rem;font-weight:900;letter-spacing:-.02em;color:var(--navy);margin-bottom:9px}
.st-c p{color:var(--muted);font-size:.97rem;line-height:1.85}
/* the signature is the whole point of a first-person story — keep it visible
   next to the heading rather than buried under the last column */
.sig{display:flex;align-items:center;gap:13px}
.sig .av{width:46px;height:46px;border-radius:50%;flex-shrink:0;object-fit:cover;
  /* a hairline ring keeps the light photo background from bleeding into the page */
  box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--orange)}
.sig b{display:block;font-size:.98rem;color:var(--navy)}
.sig span{color:var(--muted);font-size:.86rem}
.st-head>div,.st-head .sig,.st-c{animation:heroBlur .9s ease both}
.st-head>div{animation-delay:.62s}
.st-head .sig{animation-delay:.72s}
.st-c:nth-child(1){animation-delay:.82s}
.st-c:nth-child(2){animation-delay:.92s}
.st-c:nth-child(3){animation-delay:1.02s}
@media(prefers-reduced-motion:reduce){
  .st-head>div,.st-head .sig,.st-c{animation:none}}
@media(max-width:880px){.st-grid{grid-template-columns:1fr}}
/* ---- ABOUT: principles, option 6 on a navy panel (variant أ) ---- */
.pr-panel{background:var(--navy);border-radius:32px;padding:clamp(30px,4vw,56px) clamp(20px,3vw,42px)}
.pr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;
  margin-bottom:clamp(26px,3.2vw,40px)}
.pr-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-top:14px;color:#fff}
.pr-head p{color:rgba(255,255,255,.6);max-width:320px;font-size:.97rem}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* on a dark panel the card cannot fill with navy, so it fills with white —
   same inversion the services rows use, keeping orange a sparing accent */
.pr-c{border:1px solid var(--line-d);border-radius:22px;padding:26px;position:relative;overflow:hidden;
  transition:background .34s cubic-bezier(.4,0,.2,1),border-color .34s}
.pr-c::before{content:attr(data-n);position:absolute;top:-14px;inset-inline-start:16px;
  font-family:var(--lat);font-weight:800;font-size:4.4rem;line-height:1;
  color:rgba(255,255,255,.07);transition:color .3s}
.pr-c .ic,.pr-c h4,.pr-c p{position:relative;transition:color .3s}
.pr-c .ic{display:block;width:30px;color:#fff;margin-bottom:14px}
.pr-c .ic svg{width:100%;height:auto;display:block}
.pr-c h4{color:#fff;font-size:1.1rem;font-weight:900;letter-spacing:-.02em}
.pr-c p{color:rgba(255,255,255,.62);font-size:.92rem;margin-top:8px;line-height:1.75}
.pr-c:hover{background:#fff;border-color:transparent}
.pr-c:hover::before{color:rgba(255,149,26,.22)}
.pr-c:hover .ic{color:var(--orange)}
.pr-c:hover h4{color:var(--navy)}
.pr-c:hover p{color:var(--muted)}
@media(max-width:900px){.pr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pr-grid{grid-template-columns:1fr}.pr-panel{border-radius:24px;padding:28px 20px}}
/* ---- ABOUT: team by discipline + partner strip ---- */
.tm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;
  margin-bottom:clamp(28px,3.4vw,42px)}
.tm-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-top:14px;max-width:620px}
.tm-head p{color:var(--muted);max-width:440px;font-size:.99rem;line-height:1.8}
.tm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tm-c{border:1px solid var(--line);border-radius:22px;padding:26px;transition:.32s cubic-bezier(.4,0,.2,1)}
.tm-c:hover{background:var(--bg-soft);transform:translateY(-4px)}
.tm-c .ic{display:block;width:30px;color:var(--navy);margin-bottom:16px;transition:color .3s}
.tm-c .ic svg{width:100%;height:auto;display:block}
.tm-c:hover .ic{color:var(--orange)}
.tm-c h4{font-size:1.08rem;font-weight:900;letter-spacing:-.02em;color:var(--navy)}
.tm-c p{color:var(--muted);font-size:.95rem;margin-top:9px;line-height:1.75}
/* the hero's partner strip, reused. Two things it must get right in RTL:
   the row has to be width:max-content (an inline box measures its own box, not
   its content) and the spacing has to ride on the items, or half the row lands
   mid-gap and the loop jumps. */
.tm-strip-wrap{margin-top:clamp(36px,4.4vw,60px)}
.tm-cap{text-align:center;color:var(--muted);font-size:1.02rem;font-weight:700;margin-bottom:24px}
.tm-strip{overflow:hidden;white-space:nowrap;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.tm-row{display:flex;width:max-content;align-items:center;animation:scroll 240s linear infinite}
.tm-row img{height:46px;width:auto;flex-shrink:0;margin-inline-start:64px;opacity:.6;
  filter:brightness(0) saturate(100%) invert(9%) sepia(31%) saturate(2200%) hue-rotate(190deg);
  transition:opacity .25s}
.tm-row img:hover{opacity:1}
@media(max-width:980px){.tm-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tm-grid{grid-template-columns:1fr}}

/* ── journal page, ported verbatim from the built design ── */
/* ---- BLOG PAGE HERO (option 2) ---- */
.bh{position:relative;overflow:hidden;text-align:center;
  padding:calc(88px + clamp(26px,3.2vw,52px)) 0 clamp(22px,2.4vw,36px)}
/* same grid sheet as the about hero, but centred — this layout is symmetric,
   so an off-centre bright spot would pull the eye away from the headline */
.bh::before{content:"";position:absolute;inset:-16px;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(11,27,50,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,27,50,.10) 1px,transparent 1px);
  background-size:38px 38px;filter:blur(1.9px);
  -webkit-mask-image:radial-gradient(46% 54% at 50% 42%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%);
  mask-image:radial-gradient(46% 54% at 50% 42%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%)}
.bh .container{position:relative;z-index:2}
.bh .crumb{justify-content:center}
.bh h1{font-size:clamp(2rem,5vw,3.6rem);line-height:1.1;margin-top:14px}
.bh-lead{color:var(--muted);font-size:1.06rem;line-height:1.8;max-width:520px;margin:18px auto 0}
/* the filter lives in the hero because this page is for browsing, not persuading */
.bh-cats{display:flex;gap:clamp(18px,2.6vw,38px);flex-wrap:wrap;justify-content:center;margin-top:28px}
/* the journal's filters are anchors, and the link floor at the top of this
   file hands every anchor `color:inherit` — so the two states restate the
   colours .pf gives a button */
.bh-cat:hover,.bh-cat:focus{color:var(--navy)}
.bh-cat.is-on,.bh-cat.is-on:hover,.bh-cat.is-on:focus{color:var(--navy);font-weight:700}
/* same entrance as the other pages, staggered top to bottom */
.bh .crumb,.bh .kick,.bh h1,.bh-lead,.bh-cats{animation:heroBlur .9s ease both}
.bh .crumb{animation-delay:.06s}
.bh .kick{animation-delay:.2s}
.bh h1{animation-delay:.32s}
.bh-lead{animation-delay:.46s}
.bh-cats{animation-delay:.6s}
@media(prefers-reduced-motion:reduce){
  .bh .crumb,.bh .kick,.bh h1,.bh-lead,.bh-cats{animation:none}}
/* ---- BLOG: article grid, cards fill with navy (option 5) ---- */
.pg-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:18px}
.pg-c{border:1px solid var(--line);border-radius:22px;padding:26px;position:relative;overflow:hidden;
  transition:background .34s cubic-bezier(.4,0,.2,1)}
/* the oversized index is background, not content — it must not sit above the text */
.pg-c::before{content:attr(data-n);position:absolute;top:-16px;inset-inline-start:16px;
  font-family:var(--lat);font-weight:800;font-size:5rem;line-height:1;
  color:rgba(11,27,50,.05);transition:color .3s}
.pg-c:hover{background:var(--navy)}
.pg-c:hover::before{color:rgba(255,149,26,.2)}
.pg-tag,.pg-c h4,.pg-meta{position:relative;transition:color .3s}
.pg-tag{display:inline-block;font-size:.76rem;font-weight:700;color:var(--orange)}
.pg-c h4{font-size:1.06rem;font-weight:900;letter-spacing:-.02em;color:var(--navy);
  margin:9px 0 12px;min-height:2.8em}
.pg-c:hover h4{color:#fff}
.pg-meta{color:var(--muted);font-size:.84rem;font-family:var(--lat)}
.pg-c:hover .pg-meta{color:rgba(255,255,255,.55)}
.pg-more{display:flex;justify-content:center;margin-top:34px}
@media(max-width:900px){.pg-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.pg-grid{grid-template-columns:1fr}}
/* ---- BLOG: featured article on a navy card (option 5) ---- */
.bf-card{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,3.4vw,50px);
  align-items:center;background:var(--navy);border-radius:28px;overflow:hidden}
/* a lighter navy so the placeholder reads as a distinct panel, not a hole */
.bf-ph{aspect-ratio:4/3;height:100%;background:linear-gradient(150deg,#12294a,#2b5288);position:relative}
.bf-ph::after{content:"صورة المقال";position:absolute;inset-inline-start:16px;bottom:14px;
  color:rgba(255,255,255,.45);font-size:.78rem}
/* once a real cover is set the caption has nothing to explain */
.bf-ph:has(img)::after{content:none}
.bf-ph img{width:100%;height:100%;object-fit:cover;display:block}
.bf-bd{padding:clamp(24px,3vw,42px)}
.bf-card h3{color:#fff;font-size:clamp(1.4rem,2.8vw,2rem);font-weight:900;letter-spacing:-.03em;
  line-height:1.2;margin:10px 0 12px}
.bf-card p{color:rgba(255,255,255,.68);margin-bottom:16px}
.bf-tag{display:inline-block;font-size:.78rem;font-weight:700;color:var(--orange)}
.bf-meta{color:rgba(255,255,255,.55);font-size:.86rem;font-family:var(--lat)}
.bf-card{animation:softRise 1s cubic-bezier(.4,0,.2,1) .72s both}
@media(prefers-reduced-motion:reduce){.bf-card{animation:none}}
@media(max-width:820px){.bf-card{grid-template-columns:1fr}}
/* ---- BLOG: newsletter (option 6) ---- */
/* rules instead of a filled panel — the cream card competed with the navy
   featured card two sections up */
.nl-card{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3.4vw,54px);align-items:center;
  border-top:1px solid var(--line);padding:clamp(28px,3.4vw,46px) 0 0}
.nl-card h3{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:900;letter-spacing:-.03em;
  color:var(--navy);margin:14px 0 10px}
.nl-card>div>p{color:var(--muted)}
.nl-count{display:flex;align-items:center;gap:10px;margin-top:16px;color:var(--muted);font-size:.9rem}
.nl-dots{display:flex}
.nl-dots i{width:26px;height:26px;border-radius:50%;background:var(--navy);border:2px solid #fff;
  display:block;margin-inline-start:-9px}
.nl-dots i:first-child{margin-inline-start:0}
.nl-form{display:flex;gap:10px;flex-wrap:wrap}
.nl-form input{background:#fff;border:1px solid var(--line);border-radius:100px;padding:13px 22px;
  font-family:var(--ar);font-size:.95rem;min-width:230px;flex:1;outline:0;color:var(--ink)}
.nl-form input::placeholder{color:var(--muted)}
.nl-form input:focus{border-color:var(--navy)}
.nl-note{color:var(--muted);font-size:.84rem;margin-top:12px}
@media(max-width:820px){.nl-card{grid-template-columns:1fr}}

/* ── services page, ported verbatim from the built design ── */
/* ---- SERVICES PAGE HERO (option 2: title right, copy + CTA left) ---- */
.svh{position:relative;overflow:hidden;
  padding:calc(88px + clamp(26px,3.2vw,52px)) 0 clamp(24px,2.8vw,40px)}
.svh::before{content:"";position:absolute;inset:-16px;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(11,27,50,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,27,50,.10) 1px,transparent 1px);
  background-size:38px 38px;filter:blur(1.9px);
  -webkit-mask-image:radial-gradient(46% 54% at 60% 40%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%);
  mask-image:radial-gradient(46% 54% at 60% 40%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%)}
.svh .container{position:relative;z-index:2}
/* the two columns sit on the same baseline, so the headline and the copy read as one line */
.svh-split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4.4vw,68px);align-items:end}
.svh h1{font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1.05;margin-top:16px}
.svh-lead{color:var(--muted);font-size:1.06rem;line-height:1.85;max-width:520px}
.svh .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.svh .crumb,.svh .kick,.svh h1,.svh-lead,.svh .acts{animation:heroBlur .9s ease both}
.svh .crumb{animation-delay:.06s}
.svh .kick{animation-delay:.2s}
.svh h1{animation-delay:.32s}
.svh-lead{animation-delay:.46s}
.svh .acts{animation-delay:.6s}
@media(prefers-reduced-motion:reduce){
  .svh .crumb,.svh .kick,.svh h1,.svh-lead,.svh .acts{animation:none}}
@media(max-width:900px){.svh-split{grid-template-columns:1fr;align-items:start}}
/* ---- SERVICES: the five cards (option 2, 40px marks) ---- */
.svg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svg-grid > a{border:1px solid var(--line);border-radius:22px;padding:28px;display:flex;flex-direction:column;
  transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .32s,border-color .32s}
.svg-grid > a:hover{transform:translateY(-5px);box-shadow:0 20px 42px -24px rgba(11,27,50,.32);border-color:#d6dfeb}
/* the marks are the same ones the home page rows use, so the two never drift apart */
.svg-ic{width:40px;color:var(--navy);flex-shrink:0;transition:color .35s}
.svg-ic svg{width:100%;height:auto;display:block}
.svg-grid > a:hover .svg-ic{color:var(--orange)}
.svg-grid h3{font-size:1.16rem;font-weight:900;letter-spacing:-.03em;line-height:1.2;
  color:var(--navy);margin:18px 0 10px}
.svg-grid p{color:var(--muted);line-height:1.85}
/* a bare arrow says nothing on its own — it carries its label */
.svg-lnk{display:inline-flex;align-items:center;gap:11px;font-size:.92rem;font-weight:700;
  color:var(--navy);margin-top:auto;padding-top:20px}
.svg-lnk .ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--bg-soft);color:var(--navy);transition:.34s cubic-bezier(.34,1.4,.5,1)}
.svg-lnk .ico svg{width:15px}
.svg-grid > a:hover .svg-lnk .ico{background:var(--orange);color:#0a1424;transform:rotate(-45deg)}
/* the link floor at the top of this file hands every anchor `color:inherit` on
   hover; the cards state their own so the label does not change under the cursor */
.svg-grid > a:hover,.svg-grid > a:focus{color:var(--navy)}
.svg-grid > a:hover .svg-lnk{color:var(--navy)}
/* five services in a three-column grid leave a hole; the sixth tile fills it with a call */
.svg-cta{background:var(--navy);border-color:var(--navy)!important}
.svg-cta h3{color:#fff;margin-top:0}
.svg-cta p{color:rgba(255,255,255,.66)}
.svg-cta .svg-lnk{color:#fff}
.svg-cta .svg-lnk .ico{background:var(--orange);color:#0a1424}
/* only the link label needs restating — in the design the tile's own colour
   stays navy and every child paints itself */
.svg-grid > a.svg-cta:hover .svg-lnk{color:#fff}
@media(max-width:900px){.svg-grid{grid-template-columns:1fr}}
/* ---- FAQ (option 10, shared with the hosting page) ---- */
.fq-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,3.4vw,50px);align-items:start}
.fq-list{display:grid;gap:10px}
/* native <details> — no script, and it still works with the keyboard */
.fq-list details{border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:background .3s}
.fq-list details[open]{background:var(--bg-soft)}
.fq-list summary{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:20px 22px;font-weight:800;font-size:1rem;color:var(--navy);cursor:pointer;list-style:none}
.fq-list summary::-webkit-details-marker{display:none}
.fq-chev{width:18px;flex-shrink:0;color:var(--muted);transition:transform .3s,color .3s}
.fq-list details[open] .fq-chev{transform:rotate(180deg);color:var(--orange)}
.fq-a{padding:0 22px 20px;color:var(--muted);font-size:.94rem;line-height:1.8}
/* the ask card follows the reader down the list: whoever does not find their
   answer would otherwise leave before reaching the cta */
.fq-ask{background:var(--cream);border-radius:24px;padding:clamp(24px,3vw,34px);position:sticky;top:calc(88px + 24px)}
.fq-ask h4{font-size:1.2rem;font-weight:900;letter-spacing:-.02em;color:var(--navy);margin-bottom:10px}
.fq-ask p{color:var(--muted);font-size:.94rem;margin-bottom:18px}
@media(max-width:860px){.fq-grid{grid-template-columns:1fr}.fq-ask{position:static}}

/* ── services page: the six cards inside the first screen ──────────────────
   A deliberate deviation from the built design, asked for after measuring:
   the grid ended 150px below the fold on a 1440x780 laptop. The rhythm is
   tightened here only — the hero's breathing room, the card padding, the mark
   and the link gutter — so nothing on any other page moves. Roughly 150px
   comes back, which puts all six cards inside a 780px viewport. */
/* the spacings ride on vh, not vw: what has to fit is the screen's HEIGHT, so
   a short laptop tightens itself and a tall one keeps the design's air */
.svh{padding:calc(88px + clamp(10px,2vh,28px)) 0 clamp(10px,1.8vh,22px)}
.svh .crumb{margin-bottom:clamp(8px,1.4vh,14px)}
.svh h1{margin-top:10px}
.svh .acts{margin-top:clamp(10px,2vh,18px)}
#list{padding-top:clamp(8px,1.4vh,16px)!important}
#list .svg-grid{gap:14px}
#list .svg-grid > a{padding:clamp(12px,2.2vh,20px)}
#list .svg-ic{width:34px}
#list .svg-grid h3{margin:clamp(8px,1.4vh,12px) 0 8px}
#list .svg-lnk{padding-top:clamp(10px,1.6vh,14px)}

/* the six cards now sit inside the first screen, so they join the hero's
   entrance instead of waiting for a scroll that never comes — the same
   reasoning the design writes out for the blog's featured card and the about
   story. softRise and not heroBlur: blurring six bordered cards is an
   expensive paint, and the design reserves the blur for text. The delays
   continue the hero's rhythm (its last element lands at .6s) rather than
   restarting it.

   `backwards`, not `both`: with `both` the animation's final `transform:none`
   would keep applying after it finished, and an animated value outranks a
   normal declaration — the card's `translateY(-5px)` hover lift would never
   move again. `backwards` only holds the FIRST frame during the delay. */
#list .svg-grid > a{animation:softRise .9s cubic-bezier(.4,0,.2,1) backwards}
#list .svg-grid > a:nth-child(1){animation-delay:.70s}
#list .svg-grid > a:nth-child(2){animation-delay:.78s}
#list .svg-grid > a:nth-child(3){animation-delay:.86s}
#list .svg-grid > a:nth-child(4){animation-delay:.94s}
#list .svg-grid > a:nth-child(5){animation-delay:1.02s}
#list .svg-grid > a:nth-child(6){animation-delay:1.10s}
@media(prefers-reduced-motion:reduce){#list .svg-grid > a{animation:none}}

/* Same rule, same reason: the first row of «أعمالنا» sits inside the entry
   viewport and was appearing fully formed. The grid already owns an entrance
   (`.pcard.is-in` runs pcardIn when the filter re-shows a card) — it simply was
   never triggered on load. `backwards` again, so the finished animation cannot
   pin transform and kill the card's hover lift. */
#projects .pgrid > .pcard{animation:softRise .9s cubic-bezier(.4,0,.2,1) backwards}
#projects .pgrid > .pcard:nth-child(1){animation-delay:.70s}
#projects .pgrid > .pcard:nth-child(2){animation-delay:.78s}
#projects .pgrid > .pcard:nth-child(3){animation-delay:.86s}
#projects .pgrid > .pcard:nth-child(4){animation-delay:.94s}
#projects .pgrid > .pcard:nth-child(5){animation-delay:1.02s}
#projects .pgrid > .pcard:nth-child(6){animation-delay:1.10s}
@media(prefers-reduced-motion:reduce){#projects .pgrid > .pcard{animation:none}}

/* The «لم تجد سؤالك؟» card sticks under the header, and it was landing too
   close to it. Two measured facts:
     · a visitor had 32px of air — enough to see, not enough to breathe
     · logged in, the gap was ZERO. WordPress pushes the fixed header down by
       the admin bar's height, but `position:sticky` measures from the viewport
       and does not move, so the two met exactly.
   So the offset grows to 48px, and the admin bar is added back when it exists. */
.fq-ask{top:calc(88px + 40px)}
body.admin-bar .fq-ask{top:calc(88px + 40px + 32px)}
/* the admin bar is 46px tall on narrow screens */
@media screen and (max-width:782px){body.admin-bar .fq-ask{top:calc(88px + 40px + 46px)}}

/* ── service detail pages, ported verbatim from the built design ── */
/* ---- SERVICE: how a design project runs (option 2) ---- */
  .mth5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.mth5 .c{border:1px solid var(--line);border-radius:18px;padding:22px 18px;
    transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .32s,border-color .32s}
/* same lift-and-shadow the project and service cards use; the border lightens,
     it does not darken */
  .mth5 .c:hover{transform:translateY(-4px);box-shadow:0 18px 36px -22px rgba(11,27,50,.32);
    border-color:#d6dfeb}
.mth5-mk{width:26px;color:var(--orange);flex-shrink:0;display:block}
.mth5-mk svg{width:100%;height:auto;display:block}
.mth5 .n{font-family:var(--lat);font-weight:800;font-size:.74rem;color:var(--orange);
    display:block;margin-top:14px}
.mth5 h4{font-size:.98rem;font-weight:900;letter-spacing:-.02em;color:var(--navy);margin:6px 0 8px}
.mth5 p{color:var(--muted);font-size:.86rem;line-height:1.8}
/* what lands in the client's hands at the end of the stage */
  .mth5 .out{display:inline-flex;align-items:center;gap:8px;background:var(--cream);border-radius:8px;
    padding:6px 11px;font-size:.78rem;font-weight:700;color:var(--navy);margin-top:12px;line-height:1.5}
.mth5 .out::before{content:"";width:13px;height:13px;flex-shrink:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23FF951A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 3.5 5.5 9.9 2.5 6.9'/%3E%3C/svg%3E");
    background-size:100% 100%}
.mth5 .dur{display:block;margin-top:10px;font-family:var(--lat);font-size:.78rem;
    font-weight:700;color:var(--muted)}
@media(max-width:1050px){.mth5{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.mth5{grid-template-columns:1fr}}
/* ---- SERVICE: the other four services (option 1) ---- */
  .oth-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.oth-grid > a{border:1px solid var(--line);border-radius:20px;padding:24px;
    display:flex;flex-direction:column;
    transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .32s,border-color .32s}
/* same lift-and-shadow as every other card on the site; the border lightens */
  .oth-grid > a:hover{transform:translateY(-5px);box-shadow:0 20px 42px -24px rgba(11,27,50,.32);
    border-color:#d6dfeb}
.oth-ic{width:28px;color:var(--navy);flex-shrink:0;display:block;transition:color .35s}
.oth-ic svg{width:100%;height:auto;display:block}
.oth-grid > a:hover .oth-ic{color:var(--orange)}
.oth-grid h4{font-size:1rem;font-weight:900;letter-spacing:-.02em;color:var(--navy);margin:14px 0 8px}
.oth-grid p{color:var(--muted);font-size:.86rem;line-height:1.8}
.oth-arw{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
    background:var(--bg-soft);color:var(--navy);margin-top:auto;margin-inline-start:auto;
    transition:.34s cubic-bezier(.34,1.4,.5,1)}
.oth-arw svg{width:14px}
.oth-grid > a:hover .oth-arw{background:var(--orange);color:#0a1424;transform:rotate(-45deg)}
@media(max-width:1000px){.oth-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.oth-grid{grid-template-columns:1fr}}
/* ---- SERVICE: who it is for (option 1) ---- */
  .fw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fw-c{border:1px solid var(--line);border-radius:22px;padding:28px}
.fw-mk{width:30px;color:var(--orange);flex-shrink:0;display:block}
.fw-mk svg{width:100%;height:auto;display:block}
.fw-c h4{font-size:1.08rem;font-weight:900;letter-spacing:-.02em;color:var(--navy);margin:16px 0 9px}
.fw-c p{color:var(--muted);line-height:1.85}
@media(max-width:900px){.fw-grid{grid-template-columns:1fr}}
/* ---- SERVICE: the "what is this?" badge on the title (option 5) ---- */
  /* a real <button>: reachable by keyboard, and it works without a mouse */
  /* the h1, the lead and the buttons each carry an entrance animation, and an
     animated element forms its own stacking context. Without lifting the h1, the
     panel's z-index stays trapped inside it and the later siblings paint on top. */
  .svp h1{position:relative;z-index:5}
/* the badge must never be orphaned on a line of its own, so it travels
     with the last word of the title */
  .hw-keep{white-space:nowrap}
.hw{position:relative;display:inline-block;vertical-align:super;margin-inline-start:8px;white-space:normal}
.hb{height:26px;border-radius:100px;border:1.6px solid var(--line);background:#fff;
    color:var(--muted);font-family:var(--ar);font-weight:800;font-size:.78rem;line-height:1;
    display:grid;place-items:center;cursor:pointer;padding:0 12px;transition:.24s;
    letter-spacing:normal}
.hb:hover,.hb:focus-visible{border-color:var(--orange);color:var(--orange);background:var(--cream)}
.hb:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.hp{position:absolute;z-index:40;top:calc(100% + 12px);inset-inline-end:-8px;
    width:min(360px,72vw);background:#fff;border:1px solid var(--line);border-radius:16px;
    padding:18px 20px;box-shadow:0 22px 50px -26px rgba(11,27,50,.4);
    font-size:.92rem;line-height:1.85;color:var(--muted);font-weight:400;letter-spacing:normal;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .22s,transform .22s,visibility .22s}
.hp b{color:var(--navy);font-weight:800}
/* hover reveals it, click pins it, focus keeps it open for keyboard users */
  .hw:hover .hp,.hw:focus-within .hp,.hb[aria-expanded="true"] + .hp{opacity:1;visibility:visible;transform:none}
.hp::before{content:"";position:absolute;top:-6px;inset-inline-end:18px;width:11px;height:11px;
    background:#fff;border-inline-start:1px solid var(--line);border-top:1px solid var(--line);
    transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){.hp{transition:none}}
/* ---- SINGLE SERVICE HERO (option 6 + illustration) ---- */
  .svp{position:relative;overflow:hidden;
    padding:calc(88px + clamp(22px,2.6vw,42px)) 0 clamp(22px,2.6vw,38px)}
.svp::before{content:"";position:absolute;inset:-16px;pointer-events:none;z-index:0;
    background-image:linear-gradient(rgba(11,27,50,.10) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(11,27,50,.10) 1px,transparent 1px);
    background-size:38px 38px;filter:blur(1.9px);
    -webkit-mask-image:radial-gradient(46% 54% at 62% 42%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%);
    mask-image:radial-gradient(46% 54% at 62% 42%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%)}
.svp .container{position:relative;z-index:2}
/* the copy column keeps its width; the illustration column gives some back */
  .svp-split{display:grid;grid-template-columns:1.14fr .86fr;gap:clamp(24px,3.6vw,56px);align-items:center}
.svp h1{font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.06;margin-top:14px}
.svp-lead{color:var(--muted);font-size:1.06rem;line-height:1.85;max-width:540px;margin-top:18px}
.svp .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
/* the illustration is a transparent cut-out, so it sits on any background */
  .svp-illus{width:100%;max-width:500px;height:auto;display:block;margin-inline-start:auto}
.svp .crumb,.svp .kick,.svp h1,.svp-lead,.svp .acts{animation:heroBlur .9s ease both}
.svp .crumb{animation-delay:.06s}
.svp .kick{animation-delay:.18s}
.svp h1{animation-delay:.3s}
.svp-lead{animation-delay:.42s}
.svp .acts{animation-delay:.54s}
.svp-illus{animation:softRise 1s cubic-bezier(.4,0,.2,1) .5s both}
@media(prefers-reduced-motion:reduce){.svp .crumb,.svp .kick,.svp h1,.svp-lead,.svp .acts,.svp-illus{animation:none}}
@media(max-width:920px){.svp-split{grid-template-columns:1fr}}


/* ── hosting page, ported verbatim from the built design ── */
/* ---- HOSTING PAGE HERO (option 4) ---- */
  .hh{position:relative;overflow:hidden;
    padding:calc(88px + clamp(26px,3.2vw,52px)) 0 clamp(22px,2.4vw,36px)}
/* grid sheet, centred behind the headline (which sits right in RTL) */
  .hh::before{content:"";position:absolute;inset:-16px;pointer-events:none;z-index:1;
    background-image:linear-gradient(rgba(11,27,50,.10) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(11,27,50,.10) 1px,transparent 1px);
    background-size:38px 38px;filter:blur(1.9px);
    -webkit-mask-image:radial-gradient(44% 52% at 62% 40%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%);
    mask-image:radial-gradient(44% 52% at 62% 40%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%)}
/* a very faint orange wash *under* the grid — percentage extents so it always
     finishes fading inside its own box and overflow:hidden can never slice it */
  .hh::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(58% 66% at 62% 30%,rgba(255,149,26,.10) 0%,
               rgba(255,149,26,.045) 45%,transparent 72%)}
.hh .container{position:relative;z-index:2}
.hh-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,60px);align-items:center}
.hh-copy h1{font-size:clamp(2rem,4.8vw,3.4rem);line-height:1.1;margin-top:14px}
.hh-lead{color:var(--muted);font-size:1.06rem;line-height:1.8;max-width:500px;margin-top:18px}
.hh-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hh .crumb,.hh .kick,.hh-copy h1,.hh-lead,.hh-acts,.tm-win{animation:heroBlur .9s ease both}
.hh .crumb{animation-delay:.06s}
.hh .kick{animation-delay:.2s}
.hh-copy h1{animation-delay:.32s}
.hh-lead{animation-delay:.46s}
.hh-acts{animation-delay:.58s}
.tm-win{animation-delay:.5s}
@media(max-width:860px){.hh-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hh .crumb,.hh .kick,.hh-copy h1,.hh-lead,.hh-acts,.tm-win{animation:none}}
/* ---- HOSTING: why us (option 1) ---- */
  .wh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;
    margin-bottom:clamp(28px,3.4vw,42px)}
.wh-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-top:14px}
.wh-head p{color:var(--muted);max-width:340px;font-size:.97rem}
.wh-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px}
.wh-c{border:1px solid var(--line);border-radius:22px;padding:26px;
    transition:background .32s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.4,0,.2,1)}
.wh-c:hover{background:var(--bg-soft);transform:translateY(-4px)}
.wh-c .ic{display:block;width:30px;color:var(--navy);margin-bottom:16px;transition:color .3s}
.wh-c .ic svg{width:100%;height:auto;display:block}
.wh-c:hover .ic{color:var(--orange)}
.wh-c h4{font-size:1.08rem;font-weight:900;letter-spacing:-.02em;color:var(--navy)}
.wh-c p{color:var(--muted);font-size:.93rem;margin-top:8px;line-height:1.75}
@media(max-width:900px){.wh-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.wh-grid{grid-template-columns:1fr}}
/* ---- HOSTING: plans (option 1) ---- */
  .pl-head{text-align:center;margin-bottom:clamp(28px,3.4vw,44px)}
.pl-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin:14px 0 10px}
.pl-head p{color:var(--muted);max-width:540px;margin:0 auto}
.pl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.pl-c{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;
    padding:clamp(22px,2.6vw,30px);position:relative;
    transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .32s}
.pl-c:hover{transform:translateY(-5px);box-shadow:0 26px 48px -30px rgba(11,27,50,.3)}
.pl-c.is-hot{border-color:transparent;background:var(--navy)}
.pl-badge{position:absolute;top:-12px;inset-inline-start:22px;background:var(--orange);color:#0a1424;
    font-size:.72rem;font-weight:800;padding:5px 13px;border-radius:100px}
.pl-c h4{font-size:1.05rem;font-weight:900;letter-spacing:-.02em;color:var(--navy)}
.pl-c.is-hot h4{color:#fff}
.pl-sub{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin-top:4px;letter-spacing:0}
.pl-c.is-hot .pl-sub{color:rgba(255,255,255,.6)}
.pl-price{display:flex;align-items:baseline;gap:7px;margin:14px 0 18px}
.pl-price b{font-family:var(--lat);font-size:2.3rem;font-weight:900;letter-spacing:-.03em;color:var(--navy)}
.pl-c.is-hot .pl-price b{color:#fff}
.pl-price span{color:var(--muted);font-size:.84rem}
.pl-c.is-hot .pl-price span{color:rgba(255,255,255,.6)}
.pl-c ul{list-style:none;display:grid;gap:10px;margin-bottom:20px}
.pl-c li{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;
    font-size:.9rem;color:var(--muted)}
.pl-c.is-hot li{color:rgba(255,255,255,.75)}
.pl-ic{display:block;width:17px;flex-shrink:0;color:var(--orange)}
.pl-ic svg{width:100%;display:block}
/* a Latin run inside an RTL line gets reordered by the bidi algorithm —
     "2 Cores" renders as "Cores 2" — so each value is isolated as its own island */
  .pl-c li b{font-family:var(--lat);font-weight:700;color:var(--navy);unicode-bidi:isolate}
.pl-c.is-hot li b{color:#fff}
.pl-c .btn{width:100%;justify-content:center;margin-top:auto}
.pl-c.is-hot .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.pl-c.is-hot .btn-ghost .ico{background:#fff;color:var(--navy)}
@media(max-width:1000px){.pl-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pl-grid{grid-template-columns:1fr}}
/* ---- HOSTING: free migration in three steps (option 2) ---- */
  .mg-head{text-align:center;margin-bottom:clamp(28px,3.4vw,42px)}
.mg-head h2{font-size:clamp(1.5rem,3vw,2.2rem);margin:14px 0 10px}
.mg-head p{color:var(--muted);max-width:520px;margin:0 auto}
.mg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative}
/* the rail sits behind the numbers and stops short of the outer edges so it
     reads as a path between them, not a line running off the section */
  .mg-steps::before{content:"";position:absolute;top:26px;right:12%;left:12%;height:2px;
    background:linear-gradient(90deg,var(--line),var(--orange),var(--line))}
.mg-s{text-align:center;position:relative}
.mg-n{width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--line);
    display:grid;place-items:center;margin:0 auto 16px;font-family:var(--lat);font-weight:800;
    color:var(--navy);transition:border-color .3s,color .3s}
.mg-s:hover .mg-n{border-color:var(--orange);color:var(--orange)}
.mg-s h4{font-size:1.05rem;font-weight:900;letter-spacing:-.02em;color:var(--navy)}
.mg-s p{color:var(--muted);font-size:.92rem;margin-top:8px}
.mg-cta{text-align:center;margin-top:clamp(26px,3vw,36px)}
@media(max-width:820px){.mg-steps{grid-template-columns:1fr;gap:26px}.mg-steps::before{display:none}}
/* ---- HOSTING hero: live-check terminal (replaces the price card) ---- */
  .hh-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.tm-win{background:var(--dark);border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);
    box-shadow:0 30px 60px -30px rgba(11,27,50,.5)}
.tm-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.tm-bar i{width:11px;height:11px;border-radius:50%;display:block}
.tm-bar i:first-child{background:#ff5f57}
.tm-bar i:nth-child(2){background:#febc2e}
.tm-bar i:nth-child(3){background:#28c840}
.tm-bar span{margin-inline-start:10px;font-size:.76rem;color:#7c93b4;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* the whole console is a Latin island: without an explicit direction the bidi
     algorithm would reorder every line inside this RTL page */
  .tm-body{padding:20px 18px;direction:ltr;text-align:left;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;line-height:1.95}
.tm-pr{color:var(--orange)}
.tm-cm{color:#dbe6f5}
.tm-ok{color:#5ad19a}
.tm-dim{color:#7c93b4}
.tm-hl{color:#fff;font-weight:700}
/* the check plays out line by line instead of arriving finished; --i is the
     line index so one rule staggers all seven */
  .tm-body>div{animation:tmLine .34s ease both;animation-delay:calc(.55s + var(--i) * .28s)}
@keyframes tmLine{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
/* each result lands a beat after its line, so the eye reads "checking… ok" */
  .tm-body .tm-ok{animation:tmOk .3s ease both;animation-delay:calc(.78s + var(--i) * .28s)}
.tm-cursor{display:inline-block;width:8px;height:1em;background:var(--orange);
    vertical-align:-2px;margin-inline-start:6px;animation:tmBlink 1.05s step-end infinite;
    animation-delay:2.6s;opacity:0}
@keyframes tmBlink{0%,100%{opacity:1}50%{opacity:0}}
.tm-body.is-rerun>div{animation:none}
@media(prefers-reduced-motion:reduce){.tm-body>div,.tm-body .tm-ok,.tm-cursor{animation:none;opacity:1;transform:none}}
/* ---- HOSTING: infrastructure logos (option 2) ---- */
  .if-cap{text-align:center;color:var(--muted);font-size:1.02rem;font-weight:700;
    margin-bottom:clamp(22px,2.6vw,30px)}
/* the 1px gaps are the grid lines: the container colour shows through them,
     so no per-cell borders and no doubled lines where cells meet */
  .if-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:24px;overflow:hidden}
.if-c{background:#fff;display:grid;place-items:center;padding:30px 20px;transition:background .3s}
.if-c:hover{background:var(--bg-soft)}
/* baked navy in the pixels — a CSS filter would be dropped on import */
  .if-c img{height:34px;width:auto;opacity:.6;transition:opacity .25s}
.if-c:hover img{opacity:1}
@media(max-width:1000px){.if-grid{grid-template-columns:1fr 1fr}}

/* ── hosting booking flow, ported verbatim from the built design ── */
/* ── booking step 02 · النطاق ──────────────────────────────── */
.fld{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;
  min-height:45px;display:flex;align-items:center;color:#9aa8bd;font-size:.95rem;margin-bottom:14px}
.lbl2{display:block;font-size:.84rem;font-weight:700;color:var(--navy);margin-bottom:7px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* the term is a choice, not a fact — it belongs in the form, not only in the summary */
.term{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.term label{border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;
  display:block;transition:.24s}
.term label:hover{border-color:#d6dfeb}
.term label.on{border-color:var(--orange);background:var(--cream)}
.tm-t{display:block;font-size:.94rem;font-weight:800;color:var(--navy)}
.tm-p{display:block;font-family:var(--lat);font-size:.9rem;font-weight:700;color:var(--muted);margin-top:6px}
.tm-sv{font-style:normal;font-family:var(--ar);font-size:.76rem;font-weight:700;color:var(--orange);
  background:#fff;border-radius:100px;padding:2px 8px;margin-inline-start:6px}
@media(max-width:700px){.term{grid-template-columns:1fr}}
/* ── country combobox ─────────────────────────────────────────────── */
.cy{position:relative;margin-bottom:14px}
.cy-btn{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;
  min-height:45px;display:flex;align-items:center;gap:10px;font:inherit;font-size:.95rem;
  color:var(--navy);cursor:pointer;text-align:start;transition:border-color .2s}
.cy-btn:hover{border-color:#d6dfeb}
.cy-btn:focus-visible,.cy.open .cy-btn{outline:none;border-color:var(--navy)}
.cy-v{flex:1}
.cy-ch{width:14px;color:var(--muted);display:block;transition:transform .24s}
.cy-ch svg{width:100%;display:block}
.cy.open .cy-ch{transform:rotate(180deg)}
.cy-pop{position:absolute;z-index:60;top:calc(100% + 6px);inset-inline-start:0;width:100%;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;
  box-shadow:0 24px 48px -24px rgba(11,27,50,.32)}
.cy-sr{position:relative;margin-bottom:8px}
.cy-si{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);
  width:14px;color:var(--muted);pointer-events:none}
.cy-si svg{width:100%;display:block}
.cy-q{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);
  padding:9px 12px;padding-inline-start:34px;font:inherit;font-size:.9rem;color:var(--navy)}
.cy-q:focus{outline:none;border-color:var(--navy);background:#fff}
.cy-list{list-style:none;margin:0;padding:0;max-height:210px;overflow-y:auto;overscroll-behavior:contain}
/* checkout, domain, done, review only */
#domain .cy-list li, #checkout .cy-list li, #review .cy-list li, #done .cy-list li{padding:9px 12px;border-radius:9px;font-size:.92rem;color:var(--navy);cursor:pointer}
.cy-list li[aria-selected="true"]{font-weight:800}
.cy-list li.hl,.cy-list li:hover{background:var(--bg-soft)}
.cy-none{padding:10px 12px;font-size:.9rem;color:var(--muted)}
/* ── «!» explainer on the summary labels ──────────────────────────── */
.wi{position:relative;display:inline}
.wi-b{width:16px;height:16px;border-radius:50%;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.7rem;font-weight:800;line-height:16px;text-align:center;
  background:var(--bg-soft);color:var(--muted);margin-inline-start:6px;
  vertical-align:middle;transition:.2s}
.wi-b:hover,.wi-b:focus-visible{background:var(--orange);color:#0a1424;outline:none}
.wi-p{position:absolute;z-index:70;top:calc(100% + 10px);inset-inline-start:-10px;
  width:min(250px,62vw);background:var(--navy);color:#fff;border-radius:12px;padding:11px 13px;
  font-size:.78rem;font-weight:500;line-height:1.75;text-align:start;
  box-shadow:0 20px 40px -22px rgba(11,27,50,.5);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.22s;pointer-events:none}
.wi:hover .wi-p,.wi-b:focus-visible + .wi-p,.wi-b[aria-expanded="true"] + .wi-p{opacity:1;visibility:visible;transform:none}
.sum-dark .wi-b{background:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.sum-dark .wi-b:hover,.sum-dark .wi-b:focus-visible{background:var(--orange);color:#0a1424}
.sum-dark .wi-p{background:#fff;color:var(--navy)}
/* the summary rows must not clip the popover */
.sum,.sumd{overflow:visible}
/* ست: numbered dots on a line */
.st1{display:flex;align-items:center;gap:0;margin-bottom:clamp(26px,3vw,40px)}
.st1 .s{display:flex;align-items:center;gap:11px}
.st1 .d{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font-family:var(--lat);font-weight:800;font-size:.84rem;background:var(--bg-soft);color:var(--muted)}
.st1 .s.on .d{background:var(--navy);color:#fff}
.st1 .s.done .d{background:var(--orange);color:#0a1424}
.st1 .t{font-size:.94rem;font-weight:700;color:var(--muted)}
.st1 .s.on .t{color:var(--navy)}
.st1 .ln{flex:1;height:2px;background:var(--line);margin:0 16px}
.st1 .ln.done{background:var(--orange)}
@media(max-width:760px){.st1 .t{display:none}.st1 .ln{margin:0 8px}}
/* تابس: pill tabs */
.st3{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.st3 span{border:1px solid var(--line);border-radius:100px;padding:10px 20px;font-size:.92rem;
  font-weight:700;color:var(--muted)}
.st3 span.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.st3 span.done{border-color:var(--orange);color:var(--orange)}
/* layout: form + sticky summary */
.ck{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,3.4vw,48px);align-items:start}
.ck-card{border:1px solid var(--line);border-radius:22px;padding:clamp(22px,2.8vw,32px)}
.sum{border:1px solid var(--line);border-radius:22px;padding:clamp(22px,2.6vw,28px);position:sticky;top:24px}
.sum h4{font-size:1.06rem;margin-bottom:16px}
/* every line carries a mark so the summary can be read at a glance */
/* an auto value column grows past the card; minmax(0,1fr) lets long specs wrap */
.sum .r{display:grid;grid-template-columns:18px auto minmax(0,1fr);gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--muted)}
.sum .r > b{text-align:start;justify-self:end;text-align:end}
.si{width:18px;color:var(--orange);flex-shrink:0;display:block}
.si svg{width:100%;height:auto;display:block}
.sum .tot{grid-template-columns:none}
/* the specs ride under the plan name instead of taking a row of their own */
.sum-spec{display:block;font-family:var(--lat);font-size:.74rem;font-weight:600;color:var(--muted);
  margin-top:6px;letter-spacing:0;unicode-bidi:isolate;text-align:left;line-height:1.75;
  overflow-wrap:anywhere}
/* the middots are separators, not text — give them room and mute them */
.sum-spec i{font-style:normal;color:#c3ccda;padding:0 3px}
.sum .r{align-items:start}
.sum .r span{padding-top:1px}
.sum-dark .sum-spec{color:rgba(255,255,255,.5)}
.sum .r b{color:var(--navy);font-weight:800}
.sum .tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;margin-top:6px}
.sum .tot span{font-size:.92rem;color:var(--muted)}
.sum .tot b{font-family:var(--lat);font-size:1.6rem;font-weight:800;color:var(--navy);letter-spacing:-.03em}
.sum-dark{background:var(--navy);border-color:var(--navy)}
.sum-dark h4{color:#fff}
.sum-dark .r{color:rgba(255,255,255,.62);border-bottom-color:rgba(255,255,255,.14)}
.sum-dark .r b,.sum-dark .tot b{color:#fff}
.sum-dark .tot span{color:rgba(255,255,255,.62)}
@media(max-width:900px){.ck{grid-template-columns:1fr}.sum{position:static}}
.pad h1.h-sec{margin-bottom:clamp(22px,2.8vw,38px)}
.bk-plan{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg-soft);
  border-radius:14px;padding:14px 18px;margin-bottom:18px;font-size:.9rem;color:var(--muted)}
.bk-plan b{color:var(--navy)}
.bk-plan .pr{font-family:var(--lat);font-weight:800;color:var(--navy);unicode-bidi:isolate}
.bk-plan a{margin-inline-start:auto;font-size:.84rem;font-weight:700;color:var(--orange)}
.bk-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.bk-routes label{border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;
  display:block;transition:.24s;position:relative}
.bk-routes label:hover{border-color:#d6dfeb}
.bk-routes input{position:absolute;opacity:0;width:0;height:0}
.bk-routes label:has(input:checked){border-color:var(--orange);background:var(--cream)}
.bk-routes label:has(input:focus-visible){border-color:var(--navy)}
.bk-routes .rt{display:block;font-size:.96rem;font-weight:800;color:var(--navy)}
.bk-routes .rd{display:block;font-size:.84rem;color:var(--muted);margin-top:6px;line-height:1.7}
.bk-routes .mk{width:22px;color:var(--orange);display:block;margin-bottom:12px}
.bk-routes .mk svg{width:100%;display:block}
@media(max-width:820px){.bk-routes{grid-template-columns:1fr}}
.bk-search{display:grid;grid-template-columns:1fr auto;gap:10px}
.bk-search input{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  background:#fff;min-height:47px;font:inherit;font-size:.95rem;color:var(--navy);
  direction:ltr;text-align:left;transition:border-color .2s}
.bk-search input::placeholder{color:#9aa8bd}
.bk-search input:focus{outline:none;border-color:var(--navy)}
.bk-search button{border:0;cursor:pointer;font:inherit}
.bk-res{border-radius:14px;padding:16px 18px;margin-top:14px;display:grid;
  grid-template-columns:22px 1fr auto;gap:14px;align-items:center}
.bk-res .mk{width:22px;display:block}
.bk-res .mk svg{width:100%;display:block}
.bk-res .nm{font-family:var(--lat);font-weight:800;color:var(--navy);font-size:.98rem;
  direction:ltr;text-align:right}
.bk-res .st2{font-size:.84rem;margin-top:3px}
.bk-res .pr{font-family:var(--lat);font-weight:800;color:var(--navy);unicode-bidi:isolate}
.bk-res.ok{background:#f2fbf5;border:1px solid #cdebd7}
.bk-res.ok .mk{color:#22a559}
.bk-res.ok .st2{color:#2f8b55}
.bk-res.no{background:#fdf4f4;border:1px solid #f0d5d5}
.bk-res.no .mk{color:#c4544f}
.bk-res.no .st2{color:#b45550}
.bk-res.no .nm{color:var(--muted);text-decoration:line-through}
.bk-sug{display:grid;gap:8px;margin-top:12px}
.bk-sug button{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;width:100%;
  border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:#fff;cursor:pointer;
  font:inherit;text-align:start;transition:.24s}
.bk-sug button:hover{border-color:#d6dfeb;box-shadow:0 12px 26px -20px rgba(11,27,50,.32)}
.bk-sug .nm{font-family:var(--lat);font-weight:700;color:var(--navy);font-size:.92rem;
  direction:ltr;text-align:right}
.bk-sug .pr{font-family:var(--lat);font-weight:800;color:var(--muted);font-size:.88rem;unicode-bidi:isolate}
.bk-sug .add{font-size:.84rem;font-weight:700;color:var(--orange)}
.bk-ns{background:var(--bg-soft);border-radius:14px;padding:18px;margin-top:14px}
.bk-ns .t{font-size:.86rem;font-weight:800;color:var(--navy);margin-bottom:10px}
.bk-ns code{display:block;font-family:var(--lat);font-size:.86rem;color:var(--navy);background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin-bottom:8px;
  direction:ltr;text-align:left}
.bk-ns p{font-size:.84rem;color:var(--muted);margin-top:8px}
.bk-note{font-size:.84rem;color:var(--muted);margin-top:16px;padding-inline-start:14px;
  border-inline-start:3px solid var(--line)}
[hidden]{display:none !important}
/* checkout only */
#checkout .bk-err{display:block;font-size:.8rem;color:#c4544f;margin-top:-8px;margin-bottom:12px}
.fld-in{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;
  min-height:45px;font:inherit;font-size:.95rem;color:var(--navy);margin-bottom:14px;
  transition:border-color .2s}
.fld-in::placeholder{color:#9aa8bd}
.fld-in:focus{outline:none;border-color:var(--navy)}
.fld-in.bad{border-color:#c4544f}
.fld-in[dir="ltr"]{text-align:left}
/* a phone reads left-to-right whole: the code must sit LEFT of the digits,
   so the pair runs LTR even inside an RTL page */
.tel-wrap{display:flex;align-items:stretch;direction:ltr;margin-bottom:14px}
/* the code button must stretch to the input's height, or the pair looks broken */
.tel-wrap .cy{margin-bottom:0;flex:0 0 auto;display:flex}
.tel-wrap .cy-btn{align-self:stretch}
.tel-wrap .cy-btn{border-radius:12px 0 0 12px;border-right:0;background:var(--bg-soft);
  padding:0 12px;gap:6px;min-height:45px;font-family:var(--lat);font-weight:700;font-size:.9rem;
  color:var(--navy);direction:ltr}
.tel-wrap .cy-v{flex:0 0 auto}
.tel-wrap .cy-pop{width:270px;inset-inline-start:auto;left:0;direction:rtl}
.tel-wrap .tel-in{border-radius:0 12px 12px 0;margin-bottom:0;flex:1;min-width:0;text-align:left}
/* checkout only */
#checkout .cy-list li{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cy-d{font-family:var(--lat);font-size:.82rem;font-weight:700;color:var(--muted);unicode-bidi:isolate}
/* the billing country is an address, not a phone — its list shows no codes */
.no-dial .cy-d{display:none}
/* billing address */
.addr-h{display:flex;align-items:center;gap:12px;margin:22px 0 14px}
.addr-h b{font-size:.94rem;font-weight:800;color:var(--navy);white-space:nowrap}
.addr-h span{flex:1;height:1px;background:var(--line)}
.addr-h i{font-style:normal;font-size:.78rem;color:var(--muted)}
.row3{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
@media(max-width:620px){.row2,.row3{grid-template-columns:1fr}}
.term label:has(input:checked){border-color:var(--orange);background:var(--cream)}
.term input{position:absolute;opacity:0;width:0;height:0}
.term label:has(input:focus-visible){border-color:var(--navy)}
.sum-col{position:sticky;top:24px;display:grid;gap:16px}
.sum-col .sum{position:static}
@media(max-width:900px){.sum-col{position:static}}
.rv-blk{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px}
.rv-blk:last-of-type{border-bottom:0;padding-bottom:0;margin-bottom:0}
.rv-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rv-h h4{font-size:1rem}
.rv-h .mk{width:17px;color:var(--orange);display:block;flex-shrink:0}
.rv-h .mk svg{width:100%;display:block}
.rv-h a{margin-inline-start:auto;font-size:.84rem;font-weight:700;color:var(--orange)}
.rv-l{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.92rem;color:var(--muted)}
.rv-l b{color:var(--navy);font-weight:700;justify-self:end;text-align:end;overflow-wrap:anywhere}
.rv-l b[dir="ltr"]{unicode-bidi:isolate;text-align:end}
/* the control-panel account */
.ac-note{display:grid;grid-template-columns:17px 1fr;gap:11px;background:var(--bg-soft);
  border-radius:12px;padding:13px 15px;font-size:.84rem;color:var(--muted);line-height:1.8;margin-bottom:16px}
.ac-note .mk{width:17px;color:var(--orange);display:block;margin-top:3px}
.ac-note .mk svg{width:100%;display:block}
.ac-note b{color:var(--navy)}
/* the login name is not a choice — it is the address given in step 03 */
.ac-user{font-size:.88rem;color:var(--muted);line-height:1.9;margin-bottom:16px}
.ac-user b{font-family:var(--lat);font-weight:700;color:var(--navy);unicode-bidi:isolate}
.ac-user a{font-weight:700;color:var(--orange);margin-inline-start:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* the field's content is Latin: run the wrapper LTR so the reserved padding
   and the eye button land on the same side */
.pw-wrap{position:relative;margin-bottom:8px;direction:ltr}
.pw-wrap input{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  padding-inline-end:44px;background:#fff;min-height:45px;font:inherit;font-size:.95rem;
  color:var(--navy);direction:ltr;text-align:left;transition:border-color .2s}
.pw-wrap input:focus{outline:none;border-color:var(--navy)}
.pw-wrap input.bad{border-color:#c4544f}
.pw-eye{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);width:17px;
  color:var(--muted);background:none;border:0;padding:0;cursor:pointer;display:block}
.pw-eye svg{width:100%;display:block}
.pw-bar{display:flex;gap:5px;margin:10px 0 6px}
.pw-bar i{flex:1;height:4px;border-radius:100px;background:var(--line);transition:background .25s}
.pw-bar.w1 i:nth-child(1){background:#c4544f}
.pw-bar.w2 i:nth-child(-n+2){background:#e0a038}
.pw-bar.w3 i{background:#22a559}
.pw-hint{font-size:.8rem;color:var(--muted);margin-bottom:14px}
/* review only */
#review .bk-err{display:block;font-size:.8rem;color:#c4544f;margin:-4px 0 12px}
/* the pay card, straight under the total */
.pay-card{border:1px solid var(--line);border-radius:22px;padding:clamp(20px,2.4vw,26px)}
.pay-card h4{font-size:1.02rem;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.pay-card h4 .mk{width:16px;color:var(--orange);display:block;flex-shrink:0}
.pay-card h4 .mk svg{width:100%;display:block}
.pay-note{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:.8rem;color:var(--muted);
  line-height:1.75;margin-bottom:16px}
.pay-note .mk{width:16px;color:var(--orange);display:block;margin-top:3px}
.pay-note .mk svg{width:100%;display:block}
/* PayPal draws one button per funding source, each inside its own frame — so
   the only styling that reaches them is what the SDK itself accepts (shape,
   colour, height), and that is set in JS beside the rest of the payment code.
   What is left for CSS is the room they sit in, and the one state that is
   ours: the wait between the page appearing and the SDK answering. */
.pp-stack{display:grid;gap:9px;margin-bottom:12px;min-height:46px}
.pp-wait{font-size:.8rem;color:var(--muted);text-align:center;padding:15px 0}
/* Methods that need no gateway. Drawn by us, so they carry the site's own
   type — the one thing PayPal's own buttons cannot be given. */
/* generating and keeping a password */
.pw-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
/* the label carries its own bottom margin for the plain fields; inside the
   row it would stack on top of the row's own and push the buttons off */
.pw-head .lbl2{margin-bottom:0}
.pw-acts{display:flex;gap:6px}
.pw-gen,.pw-copy{font:inherit;font-size:.76rem;font-weight:700;border:1px solid var(--line);
  background:#fff;color:var(--navy);border-radius:100px;padding:5px 13px;cursor:pointer;
  transition:border-color .2s,background .2s}
.pw-gen:hover,.pw-copy:hover{border-color:var(--navy);background:var(--bg-soft)}
.pw-keep{font-size:.78rem;color:var(--muted);line-height:1.75;margin-top:6px}

/* the moment between «approved» and «confirmed» */
.pay-card{position:relative}
.pay-card.is-paying > *:not(.pp-busy){opacity:.25;pointer-events:none;filter:grayscale(.5)}
.pp-busy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;padding:24px;background:rgba(255,255,255,.94);
  border-radius:inherit;z-index:3}
.pp-busy b{font-size:1rem;color:var(--navy)}
.pp-busy span:last-child{font-size:.84rem;color:var(--muted);line-height:1.8;max-width:32ch}
.pp-spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--line);
  border-top-color:var(--orange);animation:pp-turn .8s linear infinite}
@keyframes pp-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pp-spin{animation-duration:2.4s}}
.man-stack{display:grid;gap:9px;margin-bottom:12px}
.man-b{display:block;width:100%;text-align:start;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:13px 16px;cursor:pointer;font:inherit;transition:border-color .2s,box-shadow .2s}
.man-b:hover{border-color:var(--navy);box-shadow:0 10px 22px -18px rgba(11,27,50,.45)}
.man-b:disabled{opacity:.55;cursor:wait}
.man-b .man-l{display:block;font-weight:700;font-size:.96rem;color:var(--navy)}
.man-b .man-n{display:block;font-size:.8rem;color:var(--muted);margin-top:2px;line-height:1.6}
.man-card .man-d{white-space:pre-wrap;background:var(--bg-soft);border-radius:12px;padding:14px 16px;
  margin:12px 0;font-size:.9rem;line-height:1.9;color:var(--navy)}
.pp-sdk{font-size:.76rem;color:#9aa8bd;text-align:center;line-height:1.7;margin-top:10px}
/* The networks PayPal's card form actually takes. They were four boxes with
   the brand spelled inside them, which reads as a placeholder — because it
   was one. Drawn marks instead: Mastercard's is pure geometry, the rest are
   each brand's own wordmark in its own colour, at the size a card mark is
   meant to be read at rather than the 27px the placeholders sat in. */
.cards{display:flex;gap:6px;justify-content:center;margin-top:6px;align-items:center}
.cards i{width:40px;height:26px;border-radius:4px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;padding:2px;font-style:normal}
.cards i svg{width:100%;height:100%;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* named with the element too: a bare .sr-only loses to the theme's
   `input{width:100%}`, and the hidden field then widens the whole page */
input.sr-only,textarea.sr-only,select.sr-only{width:1px;min-width:0;padding:0;border:0}
.agree{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;cursor:pointer;
  font-size:.82rem;color:var(--muted);line-height:1.8;margin-bottom:15px}
.agree input{width:17px;height:17px;margin-top:3px;accent-color:var(--navy)}
.agree a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.back-l{display:block;text-align:center;font-size:.84rem;font-weight:700;color:var(--muted);margin-top:14px}
.dn-top{text-align:center;margin-bottom:clamp(28px,3.4vw,44px)}
.dn-mk{width:64px;height:64px;border-radius:50%;background:#f2fbf5;color:#22a559;
  display:grid;place-items:center;margin:0 auto 20px}
.dn-mk svg{width:32px}
.dn-top h1{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:12px}
.dn-top p{font-size:1rem;color:var(--muted);line-height:1.9;max-width:52ch;margin:0 auto}
.dn-ref{display:inline-flex;align-items:center;gap:10px;font-family:var(--lat);font-weight:800;
  color:var(--navy);background:var(--bg-soft);border-radius:100px;padding:9px 18px;margin-top:18px;
  unicode-bidi:isolate}
.dn-ref span{font-family:var(--ar);font-weight:700;font-size:.82rem;color:var(--muted)}
.dn-card{border:1px solid var(--line);border-radius:22px;padding:clamp(22px,2.8vw,30px);margin-bottom:16px}
.dn-card:last-child{margin-bottom:0}
.dn-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.dn-h h4{font-size:1rem}
.dn-h .mk{width:17px;color:var(--orange);display:block;flex-shrink:0}
.dn-h .mk svg{width:100%;display:block}
/* the panel block, the one thing the customer came here for */
.dn-panel{background:var(--navy);border-color:var(--navy)}
.dn-panel h4,.dn-panel .dn-h .mk{color:#fff}
.dn-panel .dn-h .mk{color:var(--orange)}
.dn-row{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:.92rem;
  color:rgba(255,255,255,.62);align-items:center;margin-bottom:16px}
.dn-row b{color:#fff;font-weight:700;justify-self:end;text-align:end;font-family:var(--lat);
  unicode-bidi:isolate;overflow-wrap:anywhere}
.dn-row b.ar{font-family:var(--ar)}
.dn-panel .note{font-size:.82rem;color:rgba(255,255,255,.62);line-height:1.8;margin-bottom:18px}
.dn-panel .btn-primary{width:100%;justify-content:center}
/* copyable lines */
.dn-copy{display:flex;align-items:center;gap:10px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:11px;padding:10px 13px;margin-bottom:8px;font-family:var(--lat);font-size:.88rem;
  color:var(--navy);direction:ltr;text-align:left}
.dn-copy .mk{width:15px;color:var(--muted);display:block;margin-inline-start:auto;flex-shrink:0}
.dn-copy .mk svg{width:100%;display:block}
.dn-note{font-size:.84rem;color:var(--muted);line-height:1.8;margin-top:10px}
/* the timeline */
.dn-steps{display:grid;gap:0}
.dn-steps li{display:grid;grid-template-columns:26px 1fr;gap:14px;position:relative;
  padding-bottom:20px;list-style:none}
.dn-steps li:last-child{padding-bottom:0}
.dn-steps li::before{content:"";position:absolute;inset-inline-start:12px;top:26px;bottom:0;
  width:2px;background:var(--line)}
.dn-steps li:last-child::before{display:none}
.dn-steps .n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--lat);font-weight:800;font-size:.72rem;background:var(--bg-soft);
  color:var(--muted);z-index:1}
.dn-steps li.done .n{background:#22a559;color:#fff}
.dn-steps li.done::before{background:#cdebd7}
.dn-steps .n svg{width:13px}
.dn-steps b{display:block;font-size:.94rem;color:var(--navy)}
.dn-steps span{display:block;font-size:.84rem;color:var(--muted);margin-top:5px;line-height:1.75}
/* help */
.dn-help{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.dn-help a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:100px;padding:9px 16px;font-size:.88rem;font-weight:700;color:var(--navy);
  transition:.24s}
.dn-help a:hover{border-color:#d6dfeb;box-shadow:0 12px 26px -20px rgba(11,27,50,.32)}
.dn-help .mk{width:15px;color:var(--orange);display:block}
.dn-help .mk svg{width:100%;display:block}
.dn-empty{text-align:center;padding:clamp(40px,6vw,80px) 20px}
.dn-empty p{color:var(--muted);margin-bottom:20px}

/* ── booking: two corrections, both of a kind we have met before ───────────
   1. hello-elementor styles fields by ATTRIBUTE — `input[type="text"]` and its
      siblings weigh 0-1-1, and every field class the design wrote weighs 0-1-0.
      So the theme won and each field came out with its #666 hairline, 3px
      corners and 8px/16px padding instead of the design's 1px var(--line),
      12px corners and 12px/14px. Naming the element alongside the class lifts
      the design back to the same weight, and bridge.css loads last.
   2. the order summary stuck 24px from the top of the WINDOW, which is under
      the fixed header — and under the admin bar too when signed in. Same fix
      as the FAQ card: clear the bar, then add the admin bar when it exists. */
input.fld-in,textarea.fld-in,select.fld-in{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;
  min-height:45px;font:inherit;font-size:.95rem;color:var(--navy);margin-bottom:14px}
input.fld-in:focus,textarea.fld-in:focus,select.fld-in:focus{outline:none;border-color:var(--navy)}
input.fld-in.bad,textarea.fld-in.bad{border-color:#c4544f}
/* raising the weight to beat the theme means carrying the design's WHOLE rule:
   my first attempt kept the border and dropped `padding-inline-start:34px`, and
   the search mark ended up sitting under the placeholder. */
input.cy-q{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);
  padding:9px 12px;font:inherit;font-size:.9rem;color:var(--navy);
  /* the mark now sits on the LEFT by request, so the room is reserved there */
  padding-inline-end:34px;padding-inline-start:12px}
input.cy-q:focus{outline:none;border-color:var(--navy);background:#fff}
.cy-sr .cy-si{inset-inline-start:auto;inset-inline-end:12px}
/* the phone field sits inside a joined control, so it keeps its square edge */
input.tel-in{border:1px solid var(--line);border-radius:0 12px 12px 0;padding:12px 14px;
  background:#fff;min-height:45px;font:inherit;font-size:.95rem;color:var(--navy);width:100%}
input.tel-in:focus{outline:none;border-color:var(--navy)}

.sum,.sum-col{top:calc(88px + 40px)}
body.admin-bar .sum,body.admin-bar .sum-col{top:calc(88px + 40px + 32px)}
@media screen and (max-width:782px){
  body.admin-bar .sum,body.admin-bar .sum-col{top:calc(88px + 40px + 46px)}}

/* ── the theme's white-on-hover, finally cornered ──────────────────────────
   hello-elementor paints `[type="button"]:hover{color:#fff}`. That selector
   weighs 0-2-0 — an attribute plus a pseudo-class — while the neutraliser at
   the top of this file only named the bare element (`button:hover`, 0-1-1).
   So any control we render WITH type="button" still went white under the
   cursor: the country picker showed an empty box because its label had turned
   the colour of the card behind it. Matching the weight ends it; every
   component that wants its own hover colour already states it at 0-2-0 or more
   and is declared later, so nothing else moves. */
[type="button"]:hover,[type="button"]:focus,[type="button"]:active,
[type="submit"]:hover,[type="submit"]:focus,[type="submit"]:active,
[type="reset"]:hover,[type="reset"]:focus,[type="reset"]:active{color:inherit}
/* the picker states its own, so the label cannot drift with its surroundings */
.cy-btn:hover,.cy-btn:focus,.cy .cy-btn:hover .cy-v{color:var(--navy)}

/* ── the step line walks backwards ─────────────────────────────────────────
   A finished step is a place the reader has already been, so it can be
   returned to. The current step and the ones ahead are not links: going
   forward past unfilled fields would only produce an error further along. */
.st1 a.s{text-decoration:none;color:inherit;cursor:pointer;border-radius:10px;
  padding:4px 6px;margin:-4px -6px;transition:background .2s}
.st1 a.s:hover{background:var(--bg-soft)}
.st1 a.s:hover .t{color:var(--navy)}
.st1 a.s:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ══ CONTACT PAGE ══ */
/* ---- CONTACT: form + channels (option 4) ---- */
  .cf-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.6vw,52px);align-items:start}
.cf label{display:block;font-size:.84rem;font-weight:700;color:var(--navy);margin-bottom:7px}
.cf input,.cf textarea,.cf select{width:100%;border:1px solid var(--line);border-radius:12px;
    padding:12px 14px;font-family:var(--ar);font-size:.95rem;color:var(--ink);background:#fff;
    margin-bottom:16px}
/* the border itself carries the focus state — no second ring, no halo */
  .cf input:focus,.cf textarea:focus,.cf select:focus{outline:none;border-color:var(--orange)}
.cf textarea{min-height:110px;resize:vertical}
.cf select{appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f718b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:left 14px center;background-size:16px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf button{border:0;cursor:pointer;font-family:var(--ar)}
.cf-note{font-size:.82rem;color:var(--muted);margin-top:14px}
/* the bundle picker only exists once the visitor asks for a bundle */
  .cf-bundle{border:1px solid var(--line);border-radius:14px;padding:16px 16px 6px;
    background:var(--bg-soft);margin:-6px 0 16px}
.cf-bundle[hidden]{display:none}
.cf-bundle .t{font-size:.82rem;font-weight:700;color:var(--navy);margin-bottom:12px}
.cf-bundle ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cf-bundle li{margin:0}
.cf-bundle label{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;
    color:var(--muted);cursor:pointer;margin:0}
.cf-bundle input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:var(--orange);flex-shrink:0}
@media(max-width:600px){.cf-bundle ul{grid-template-columns:1fr}}
/* the channels sit on navy so the form keeps the eye */
  .cf-dark{background:var(--navy);border-radius:24px;padding:clamp(24px,3vw,34px)}
.cf-dark .r{display:grid;grid-template-columns:22px 1fr;gap:16px;padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,.14);align-items:start}
.cf-dark .r:first-child{padding-top:0}
.cf-dark .r:last-child{border-bottom:0;padding-bottom:0}
.cf-dark a.r:hover .v{color:var(--orange)}
.cf-mk{width:22px;color:var(--orange);flex-shrink:0;display:block}
/* the real WhatsApp mark is a filled 16-box glyph, not a 14-box stroke */
  .cf-mk-fill svg{fill:currentColor}
.cf-mk svg{width:100%;height:auto;display:block}
.cf-dark h4{color:#fff;font-size:.98rem;font-weight:900;letter-spacing:-.02em;margin-bottom:5px}
.cf-dark .v{color:#fff;font-weight:800;font-size:.95rem;direction:ltr;text-align:right;
    margin-bottom:5px;transition:color .25s}
.cf-dark p{color:rgba(255,255,255,.6);font-size:.86rem;line-height:1.75}
@media(max-width:900px){.cf-grid{grid-template-columns:1fr}.cf-row{grid-template-columns:1fr}}
/* ---- CONTACT PAGE HERO (option 3) ---- */
  .cth{position:relative;overflow:hidden;text-align:center;
    padding:calc(88px + clamp(28px,3.4vw,56px)) 0 clamp(26px,3vw,44px)}
/* centred bright spot: the layout is symmetric */
  .cth::before{content:"";position:absolute;inset:-16px;pointer-events:none;z-index:0;
    background-image:linear-gradient(rgba(11,27,50,.10) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(11,27,50,.10) 1px,transparent 1px);
    background-size:38px 38px;filter:blur(1.9px);
    -webkit-mask-image:radial-gradient(46% 54% at 50% 40%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%);
    mask-image:radial-gradient(46% 54% at 50% 40%,#000 0%,rgba(0,0,0,.5) 48%,transparent 78%)}
.cth .container{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.cth .crumb{justify-content:center}
.cth h1{font-size:clamp(2rem,4.8vw,3.5rem);line-height:1.08;margin-top:14px}
.cth-lead{color:var(--muted);font-size:1.06rem;line-height:1.85;max-width:560px;margin:18px auto 0}
.cth .acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:28px}
/* an explicit promise beats a vague "we will get back to you" */
  .cth-prom{display:inline-flex;align-items:center;gap:10px;background:var(--cream);border-radius:100px;
    padding:9px 18px;font-size:.88rem;font-weight:700;color:var(--navy);margin-top:22px}
.cth-prom::before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0}
.cth .crumb,.cth .kick,.cth h1,.cth-lead,.cth .acts,.cth-prom{animation:heroBlur .9s ease both}
.cth .crumb{animation-delay:.06s}
.cth .kick{animation-delay:.18s}
.cth h1{animation-delay:.3s}
.cth-lead{animation-delay:.42s}
.cth .acts{animation-delay:.54s}
.cth-prom{animation-delay:.66s}
@media(prefers-reduced-motion:reduce){
    .cth .crumb,.cth .kick,.cth h1,.cth-lead,.cth .acts,.cth-prom{animation:none}}

/* ── added for the live page ────────────────────────────────────────────
   The honeypot must be gone from the layout without being «hidden» — a bot
   reading the DOM skips display:none, so the field is moved off-screen and
   left focusable only to a script that ignores tab order. */
/* NOT left:-9999px — in an RTL page a negative left extends the scrollable
   area by exactly that much, and the whole document grew to 11511px wide.
   The clip technique removes the field from view without moving it. */
.cf-hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cf-msg{margin:12px 0 0;font-size:.88rem;line-height:1.8;padding:12px 14px;border-radius:12px}
.cf-msg.ok{background:#e7f5ef;color:#1f7a5a}
.cf-msg.bad{background:#fbe8e7;color:#9c3b36}
.cf button:disabled{opacity:.6;cursor:wait}

/* nothing decorative may widen the document — a page that scrolls sideways on
   a phone reads as broken however deliberate the bleed was */
.hero,.hero-grid{overflow-x:clip}

/* ── «احجز مكالمة»: Google's schedule, inside our frame ────────────────────
   Google's page is another origin, so nothing of ours reaches inside it — the
   panel is the most we can do, and it is worth doing: a visitor thrown onto
   calendar.google.com mid-decision often does not come back. */
.bkc{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.bkc[hidden]{display:none}
.bkc-back{position:absolute;inset:0;background:rgba(11,27,50,.55);backdrop-filter:blur(3px);
  animation:bkcIn .2s ease}
.bkc-panel{position:relative;width:100%;max-width:760px;max-height:calc(100vh - 40px);
  background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 40px 90px -40px rgba(11,27,50,.6);animation:bkcUp .28s cubic-bezier(.2,.7,.3,1)}
.bkc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 24px 14px;border-bottom:1px solid var(--line)}
.bkc-kick{display:block;font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--orange);
  margin-bottom:4px}
.bkc-head h3{font-size:1.18rem;font-weight:800;color:var(--navy)}
.bkc-x{width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--muted);display:grid;place-items:center;cursor:pointer;
  transition:border-color .2s,color .2s}
.bkc-x:hover{border-color:var(--navy);color:var(--navy)}
.bkc-x svg{width:14px;display:block}
.bkc-body{flex:1;min-height:0;position:relative}
.bkc-body iframe{width:100%;height:min(620px,calc(100vh - 210px));display:block;border:0}
.bkc-fall{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  background:#fff;text-align:center;padding:30px}
.bkc-fall[hidden]{display:none}
.bkc-fall p{color:var(--muted);font-size:.95rem}
.bkc-note{padding:12px 24px 18px;font-size:.8rem;line-height:1.8;color:var(--muted);text-align:center}
@keyframes bkcIn{from{opacity:0}to{opacity:1}}
@keyframes bkcUp{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bkc-back,.bkc-panel{animation:none}}
@media (max-width:600px){
  .bkc{padding:0;align-items:stretch}
  .bkc-panel{max-width:none;max-height:100vh;border-radius:0}
  .bkc-body iframe{height:calc(100vh - 190px)}
}

/* ══ LEGAL PAGES ══ */
/* ── legal document ───────────────────────────────────────────────── */
.lg-top{padding-top:calc(88px + clamp(26px,3.2vw,52px));padding-bottom:clamp(20px,2.4vw,32px)}
.lg-top h1{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:14px}
.lg-date{display:inline-flex;align-items:center;gap:9px;font-size:.84rem;color:var(--muted);
  background:var(--bg-soft);border-radius:100px;padding:7px 15px;margin-bottom:18px}
.lg-date b{color:var(--navy);font-weight:700}
.lg-lede{font-size:1.02rem;color:var(--muted);line-height:1.95;max-width:62ch}
.lg-grid{display:grid;grid-template-columns:1fr 260px;gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:960px){.lg-grid{grid-template-columns:1fr}.lg-toc{position:static!important;
  border:1px solid var(--line);border-radius:18px;padding:20px;order:-1}}
/* contents */
/* the header is fixed and 88px tall, so a sticky panel that stops at 24px
   stops underneath it — its first two lines were being covered. The same
   `88px + gap` the FAQ panel already uses */
.lg-toc{position:sticky;top:calc(88px + 60px)}
.lg-toc b{display:block;font-size:.82rem;font-weight:800;color:var(--navy);margin-bottom:12px}
.lg-toc ol{list-style:none;counter-reset:t;margin:0;padding:0;display:grid;gap:2px}
.lg-toc a{display:grid;grid-template-columns:26px 1fr;gap:6px;padding:6px 8px;border-radius:9px;
  font-size:.86rem;color:var(--muted);line-height:1.6;transition:.2s}
.lg-toc a:hover{background:var(--bg-soft);color:var(--navy)}
.lg-toc a i{font-style:normal;font-family:var(--lat);font-weight:700;font-size:.76rem;color:#9aa8bd}
/* sections */
.lg-s{padding-bottom:clamp(26px,3vw,38px);margin-bottom:clamp(26px,3vw,38px);
  border-bottom:1px solid var(--line)}
.lg-s:last-child{border-bottom:0;margin-bottom:0}
.lg-s h2{font-size:clamp(1.15rem,2vw,1.4rem);margin-bottom:14px;display:grid;
  grid-template-columns:auto 1fr;gap:12px;align-items:baseline;scroll-margin-top:110px}
.lg-s h2 i{font-style:normal;font-family:var(--lat);font-size:.84rem;font-weight:800;color:var(--orange)}
.lg-s h3{font-size:1rem;margin:20px 0 10px}
.lg-s p{font-size:.95rem;color:var(--muted);line-height:2.05;margin-bottom:12px}
.lg-s p:last-child{margin-bottom:0}
.lg-s b{color:var(--navy);font-weight:700}
.lg-s a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* prose links keep their underline; a button is already visibly a button */
.lg-s a.btn,.lg-s a.btn:hover{text-decoration:none}
.lg-s ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:9px}
/* a grid li splits every inline child into its own cell — the text shatters.
   One flow with an absolute marker keeps the sentence a sentence. */
.lg-s li{position:relative;padding-inline-start:21px;font-size:.95rem;color:var(--muted);
  line-height:1.95}
.lg-s li::before{content:"";position:absolute;inset-inline-start:5px;top:.82em;
  width:6px;height:6px;border-radius:50%;background:var(--orange)}
/* a callout for the things that cost money if missed */
.lg-note{display:grid;grid-template-columns:18px 1fr;gap:12px;background:var(--cream);
  border-radius:14px;padding:16px 18px;margin:14px 0;font-size:.9rem;color:var(--muted);line-height:1.95}
.lg-note .mk{width:18px;color:var(--orange);display:block;margin-top:4px}
.lg-note .mk svg{width:100%;display:block}
.lg-note b{color:var(--navy)}
/* every decision the agency still has to make is left visible on purpose */
.todo{background:#FFF3D6;color:#8a5a00;border-radius:5px;padding:1px 7px;font-weight:700;
  font-size:.9em;white-space:nowrap}
.lg-tbl{width:100%;border-collapse:collapse;margin:14px 0;font-size:.9rem}
.lg-tbl th,.lg-tbl td{text-align:start;padding:11px 12px;border-bottom:1px solid var(--line);
  color:var(--muted);line-height:1.8;vertical-align:top}
.lg-tbl th{font-weight:800;color:var(--navy);font-size:.86rem;background:var(--bg-soft)}
.lg-tbl th:first-child{border-start-start-radius:10px}
.lg-tbl th:last-child{border-start-end-radius:10px}
.lg-wrap{overflow-x:auto}
.lg-cta{background:var(--navy);border-radius:24px;padding:clamp(26px,3.4vw,40px);text-align:center;
  margin-top:clamp(30px,4vw,52px)}
.lg-cta h3{color:#fff;font-size:clamp(1.2rem,2.2vw,1.6rem);margin-bottom:12px}
.lg-cta p{color:rgba(255,255,255,.68);font-size:.94rem;line-height:1.9;max-width:46ch;margin:0 auto 20px}


/* ── the mobile menu ───────────────────────────────────────────────────────
   The bar switches to the drawer at 1024, not 600: the dropdown is a 580px
   two-column panel, and a tablet has neither the width for it nor a hover to
   open it with. Below that width the links are in the drawer or nowhere.

   The burger is a pill, like everything else the header wears — two rules
   that cross into an ×, with the word «القائمة» beside them so the control
   says what it is instead of relying on a shape being understood. */
#sa-hdr .burger{display:none;align-items:center;gap:9px;cursor:pointer;
  padding:8px 14px 8px 10px;border-radius:100px;border:1px solid var(--line);
  background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font:inherit;font-size:.86rem;font-weight:700;color:var(--navy);
  transition:border-color .2s,background .2s}
#sa-hdr .burger:hover{border-color:var(--navy)}
#sa-hdr .burger-b{width:18px;height:12px;position:relative;display:block;flex:0 0 18px}
#sa-hdr .burger-b i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:currentColor;transition:transform .3s cubic-bezier(.2,.8,.3,1),top .3s}
#sa-hdr .burger-b i:nth-child(1){top:2px}
#sa-hdr .burger-b i:nth-child(2){top:8px}
#sa-hdr .burger[aria-expanded="true"] .burger-b i:nth-child(1){top:5px;transform:rotate(45deg)}
#sa-hdr .burger[aria-expanded="true"] .burger-b i:nth-child(2){top:5px;transform:rotate(-45deg)}
#sa-hdr .burger-t{line-height:1}

/* the panel hangs off the bar and wears the same glass */
.sa-drawer{position:absolute;top:calc(100% + 10px);left:16px;right:16px;z-index:99;
  border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 30px 60px -30px rgba(11,27,50,.45);
  animation:dwOpen .26s cubic-bezier(.2,.8,.3,1) backwards}
.sa-drawer[hidden]{display:none}
.sa-drawer-in{max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain;
  padding:10px 6px 14px}
@keyframes dwOpen{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.sa-drawer{animation:none}}

.dw-block{padding:2px 12px}
.dw-top{display:block;padding:13px 10px;font-size:1.06rem;font-weight:700;color:var(--navy);
  border-radius:12px;transition:background .18s}
.dw-top:hover,.dw-top:focus{background:var(--bg-soft)}
.dw-top.is-here{color:var(--orange)}
.dw-kids{display:grid;padding:0 10px 6px;margin-top:-2px}
.dw-kids a{padding:10px 14px 10px 10px;font-size:.95rem;color:var(--muted);border-radius:10px;
  position:relative;transition:background .18s,color .18s}
.dw-kids a::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:5px;height:5px;
  border-radius:50%;background:var(--line);transform:translateY(-50%);transition:background .18s}
.dw-kids a:hover{color:var(--navy);background:var(--bg-soft)}
.dw-kids a:hover::before{background:var(--orange)}

.dw-foot{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;
  padding:14px 22px 6px;margin-top:6px;border-top:1px solid var(--line)}
.dw-lang{font-size:.9rem;font-weight:700;color:var(--navy);border:1px solid var(--line);
  border-radius:100px;padding:10px 18px;transition:border-color .2s}
.dw-lang:hover{border-color:var(--navy)}

/* ── what the bar shows at each width ─────────────────────────────────── */
@media(max-width:1024px){
  #sa-hdr .nav-links,#sa-hdr .nav-lang{display:none}
  #sa-hdr .burger{display:inline-flex}
  /* the CTA moves up beside the menu button instead of sitting apart from it:
     on a narrow bar the two are one group, and a gap between them reads as a
     layout that ran out of room */
  #sa-hdr .nav-cta{gap:8px;margin-inline-start:auto;margin-inline-end:10px}
  #sa-hdr .nav{gap:0}
  #sa-hdr .nav-cta .btn{padding:11px 20px;font-size:.9rem}
  #sa-hdr .nav-cta .btn .ico{width:26px;height:26px}
}
@media(max-width:560px){
  #sa-hdr .burger-t{display:none}
  #sa-hdr .burger{padding:10px;gap:0}
  #sa-hdr .nav-cta .btn{padding:10px 16px;font-size:.86rem}
  .sa-drawer{left:10px;right:10px}
}
/* on a dark hero the bar is white until it scrolls */
body.top-dark #sa-hdr:not(.scrolled) .burger{color:#fff;border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.1)}
body.top-dark #sa-hdr:not(.scrolled) .burger:hover{border-color:#fff}

/* ── what has to turn round for English ───────────────────────────────────
   The site is drawn RTL-first, and most of it follows `dir` on its own —
   flexbox, logical padding, text alignment. What does NOT follow are things
   whose direction is baked into their shape: an arrow is a picture of a
   direction, and mirroring the page does not mirror the picture. */

/* every «→» in the design points the way Arabic reads. In English it points
   the other way, and a button whose arrow points backwards reads as «go
   back» — the opposite of what it does. */
/* every «→» the site draws, wherever it lives. The list was too narrow the
   first time: the service rows and the cards carry their own arrows and kept
   pointing the way Arabic reads. */
html[lang^="en"] .btn .ico svg,
html[lang^="en"] .srow .go svg,
html[lang^="en"] .srow-go svg,
html[lang^="en"] .a2-link svg,
html[lang^="en"] .back-l svg,
html[lang^="en"] .pf-go svg,
html[lang^="en"] .pcard-lnk svg,
html[lang^="en"] .svg-lnk .ico svg,
html[lang^="en"] .bcard .go svg,
html[lang^="en"] .dn-card .ico svg,
html[lang^="en"] .lg-cta .ico svg,
html[lang^="en"] .crumb svg{transform:scaleX(-1)}

/* The same arrow is printed in seventeen files inside a dozen different
   wrappers, so it now carries its own class and one rule turns all thirty of
   them. What still has to be named one by one is the hover: those rules write
   `transform` on the very same element, which replaces the mirror instead of
   adding to it, and a rotation has a handedness of its own — the mirror image
   of «rotate -45°» is «rotate +45°», not the same angle. */
html[lang^="en"] svg.sa-arw{transform:scaleX(-1)}

html[lang^="en"] .btn:hover .ico,
html[lang^="en"] #sa-hdr .btn:hover .ico,
html[lang^="en"] .svg-grid > a:hover .svg-lnk .ico,
html[lang^="en"] .oth-grid > a:hover .oth-arw{transform:rotate(45deg)}
html[lang^="en"] .srow:hover .arw svg{transform:scaleX(-1) rotate(-45deg)}
html[lang^="en"] .a2-link:hover svg{transform:scaleX(-1) translateX(-5px)}
html[lang^="en"] .pcard:hover .pcard-lnk svg{transform:scaleX(-1) translateX(-4px)}
html[lang^="en"] .srow:hover .sico{transform:translateX(4px)}

/* A wizard's two buttons are not a mirror of each other. Arabic puts «متابعة»
   first because first is where the eye starts; English expects Back on the
   left and the step forward on the right, so the pair is reversed and then
   pushed back to the start of the line. And «رجوع» points the way it came:
   its arrow is the one arrow on the page that must NOT follow the others. */
html[lang^="en"] .bk-acts{flex-direction:row-reverse;justify-content:flex-end}
html[lang^="en"] .bk-back svg.sa-arw{transform:none}
/* and it leads with the arrow rather than trailing it, the way a step back
   reads: ← Back. The two paddings swap with it, so the tight side stays the
   icon's side and the roomy one stays the text's. */
html[lang^="en"] .bk-back{flex-direction:row-reverse;padding-inline:6px 24px}

/* The strips hold two copies of their content and slide by half their width,
   which loops seamlessly only when they slide towards the copy. In Arabic the
   copy sits to the left, so the slide is positive; in English it sits to the
   right, and the same positive slide dragged the row off its own start and
   opened a gap. Same distance, opposite sign. */
@keyframes sa-scroll-ltr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[lang^="en"] .marquee .row,
html[lang^="en"] .tm-row,
html[lang^="en"] .tv-row{animation-name:sa-scroll-ltr}


/* the breadcrumb slash and the «·» separators are symmetrical; the list
   bullets are not — they sit on the start edge, which flips on its own
   because they were written with logical properties. Nothing to do there. */

/* the edge rails are physical by design (left/right, not start/end) so they
   keep their sides; «Follow us» on the left and «Scroll to top» on the right
   read the same in both directions. */

/* the smile bleeds off the start edge of the section; in English the start
   edge is the other one */
/* the value runs LTR so its digits read correctly, which also pins «end» to
   its own right edge — the page direction has to be named outright */
html[lang^="en"] .cf-dark .v{text-align:left}
/* EN keeps the smile whole: every bleed amount read as "cut" to the client, twice */
html[lang^="en"] .a2-smile{left:auto;right:clamp(16px,2vw,40px);bottom:clamp(8px,1.5vw,24px);width:min(470px,calc(50vw - 610px));transform:scaleX(-1)}
@media(max-width:1679px){html[lang^="en"] .a2-smile{display:none}}

/* Latin numerals in an English page never need the isolation the Arabic side
   puts around them, and the isolation adds a hairline gap before punctuation */
html[lang^="en"] [dir="ltr"]{unicode-bidi:normal}

/* the vertical rails read as labels, not as sentences — English sets those in
   caps, and the extra tracking keeps the letters from crowding when they are
   stacked on their side */
/* The white rails are revealed by a mask cut to the dark section's exact edge,
   so their opacity is geometry, not appearance: it has to land on the same
   frame as the scroll. Being clones, they were inheriting the .to-top fade
   that makes the button appear after 160px, which turned every crossing into a
   300ms cross-fade slow enough to watch. */
.follow--white,.to-top--white{transition:none}

/* The rail is the last thing in the document and its label is vertical, so it
   lands after the web font does — the word appeared mid-way through the hero's
   entrance and pulled the eye off it. It now waits for the fonts, then fades
   in on its own, which also hides the font swap. The script drops the class
   after 2.5s no matter what, so a failed font load never leaves it hidden. */
.follow{transition:color .35s,opacity .45s ease-out}
html.sa-rails-wait .follow{opacity:0;transition:none}

html[lang^="en"] .follow-label,
html[lang^="en"] .to-top span{text-transform:uppercase;letter-spacing:.12em;font-size:.86rem}

/* QA: cap the viewport-height hero so a full-page screenshot stays in proportion */
body.sa-qa-flat .hero{min-height:auto!important;padding-top:150px;padding-bottom:60px}


/* QA: paint a chip in its hover state for a still capture */
body.sa-qa-chip .pf:nth-of-type(2){color:var(--navy)}
body.sa-qa-chip .pf:nth-of-type(2) .pf-sm{opacity:.5;transform:translateY(0)}
body.sa-qa-chip .pf:nth-of-type(2) .pf-sm path{stroke-dashoffset:0}


/* ══ صفحة المقال ══════════════════════════════════════════════════════ */
.ap-prog{position:fixed;top:0;inset-inline:0;height:3px;z-index:120;pointer-events:none}
.ap-prog i{display:block;height:100%;width:0;background:var(--orange);transition:width .1s linear}

.ap-head{padding:clamp(48px,6vw,86px) 0 0}
.ap-head h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.15;max-width:20ch}
.ap-sub{color:var(--muted);font-size:1.12rem;line-height:1.85;max-width:56ch;margin-top:20px}
a.kick{transition:.24s}a.kick:hover{opacity:.75}

.ap-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px;
  padding-block:20px;border-block:1px solid var(--line)}
.ap-au{display:flex;align-items:center;gap:11px}
.ap-au img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.ap-au b{font-size:.95rem;font-weight:800;display:block;line-height:1.3}
.ap-au span{font-size:.82rem;color:var(--muted)}
.ap-dot{color:var(--muted);font-size:.88rem;display:flex;align-items:center;gap:8px}
.ap-dot svg{width:15px;flex-shrink:0}
.ap-share{margin-inline-start:auto;display:flex;gap:8px}
.ap-share a,.ap-share button{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;color:var(--muted);transition:.24s;background:none;cursor:pointer;padding:0}
.ap-share a:hover,.ap-share button:hover{border-color:var(--navy);color:var(--navy);transform:translateY(-2px)}
.ap-share svg{width:15px}
.ap-copy.done{border-color:var(--orange);color:var(--orange)}

.ap-cover{margin-top:34px;border-radius:26px;overflow:hidden}
.ap-cover img{width:100%;height:auto;display:block}
.ap-cover-ph{aspect-ratio:16/8;background:linear-gradient(150deg,#12294a,#2b5288)}
.ap-cover figcaption{color:var(--muted);font-size:.85rem;margin-top:12px;text-align:center}

.ap-grid{display:grid;grid-template-columns:1fr 260px;gap:clamp(32px,5vw,76px);
  align-items:start;padding:clamp(40px,5vw,64px) 0 clamp(56px,7vw,96px)}
.ap-prose{max-width:68ch;font-size:1.08rem;line-height:2}
.ap-prose h2{font-size:clamp(1.45rem,2.6vw,1.9rem);margin:52px 0 16px;scroll-margin-top:150px}
.ap-prose h3{font-size:1.16rem;margin:32px 0 10px;scroll-margin-top:150px}
.ap-prose p{margin-bottom:20px;color:#25384f}
.ap-prose ul,.ap-prose ol{margin:0 0 22px;padding-inline-start:24px}
.ap-prose li{margin-bottom:9px;color:#25384f}
.ap-prose li::marker{color:var(--orange)}
.ap-prose strong,.ap-prose b{font-weight:800;color:var(--navy)}
/* a link inside the article gets an orange underline that fills on hover —
   but the call-to-action button lives inside this same column, and orange
   letters on an orange button are letters you cannot see. Buttons opt out. */
.ap-prose a:not(.btn){color:var(--navy);border-bottom:2px solid var(--orange);font-weight:700}
.ap-prose a:not(.btn):hover{color:var(--orange);border-color:transparent}
.ap-prose img{border-radius:18px;margin:14px 0}
.ap-prose figure{margin:34px 0}
.ap-prose figcaption{color:var(--muted);font-size:.85rem;margin-top:10px;text-align:center}
.ap-prose blockquote{margin:34px 0;padding:22px 26px;background:var(--cream);border-radius:18px;
  border-inline-start:4px solid var(--orange);font-size:1.1rem;line-height:1.85;color:var(--navy)}
.ap-prose blockquote p:last-child{margin-bottom:0}
.ap-prose pre{background:var(--navy);color:#e6edf7;border-radius:16px;padding:20px 22px;
  overflow-x:auto;font-size:.92rem;line-height:1.7;direction:ltr;text-align:left;margin:26px 0}
.ap-prose :not(pre)>code{background:var(--bg-soft);border:1px solid var(--line);border-radius:7px;
  padding:2px 7px;font-size:.9em;direction:ltr;unicode-bidi:isolate}
.ap-prose table{width:100%;border-collapse:collapse;margin:26px 0;font-size:.97rem}
.ap-prose th,.ap-prose td{border:1px solid var(--line);padding:11px 14px;text-align:start}
.ap-prose th{background:var(--bg-soft);font-weight:800}

.ap-toc{position:sticky;top:calc(88px + 60px);border:1px solid var(--line);border-radius:22px;padding:22px}
.ap-toc h4{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:14px}
.ap-toc ol{list-style:none;counter-reset:t;margin:0;padding:0}
.ap-toc li{margin:0}
.ap-toc a{display:grid;grid-template-columns:26px 1fr;gap:8px;padding:7px 0;font-size:.9rem;
  color:var(--muted);line-height:1.5;transition:.22s;counter-increment:t;border:0}
.ap-toc a::before{content:counter(t,decimal-leading-zero);color:var(--orange);font-weight:700;font-size:.78rem}
.ap-toc a:hover,.ap-toc a.on{color:var(--navy);font-weight:700}
.ap-upd{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.84rem;color:var(--muted)}

.ap-cta{background:var(--navy);color:#fff;border-radius:26px;padding:clamp(28px,4vw,44px);
  display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:46px}
.ap-cta h3{color:#fff;font-size:clamp(1.2rem,2.4vw,1.7rem);margin-bottom:8px}
.ap-cta p{color:rgba(255,255,255,.7);font-size:.98rem;margin:0}
.ap-cta a{border:0}

.ap-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:40px}
.ap-tags a{border:1px solid var(--line);border-radius:100px;padding:7px 16px;font-size:.86rem;
  color:var(--muted);font-weight:400}
.ap-tags a:hover{border-color:var(--navy);color:var(--navy)}

.ap-rel{background:var(--bg-soft);padding:clamp(48px,6vw,80px) 0}
.ap-rel-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.ap-rel-head h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-top:12px}
.ap-rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ap-rcard{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:.3s}
.ap-rcard:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(11,27,50,.3)}
.ap-rcard .ph{aspect-ratio:16/9;background:linear-gradient(150deg,#12294a,#2b5288);overflow:hidden}
.ap-rcard .ph img{width:100%;height:100%;object-fit:cover}
.ap-rcard .bd{padding:20px}
.ap-rcard .tag{font-size:.74rem;color:var(--orange);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ap-rcard h3{font-size:1.05rem;line-height:1.45;margin:8px 0 10px}
.ap-rcard .m{color:var(--muted);font-size:.84rem}

@media(max-width:1000px){
  .ap-grid{grid-template-columns:1fr}
  .ap-toc{position:static;order:-1}
  .ap-rgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .ap-rgrid{grid-template-columns:1fr}
  .ap-meta{gap:12px}.ap-share{margin-inline-start:0}
}

/* ══ الصفحة كاملة — لقطة طويلة تزحف خلف نافذة ثابتة ══════════════════
   The window is 16:9 because the capture is 1920 wide: the visitor sees the
   page at the size it was designed for, one screenful at a time. `cqh` gives
   the keyframe the window's own height, so one rule fits captures of any
   length; the duration comes from the script, which divides the distance by a
   fixed speed — otherwise a taller page would race past a shorter one. */
.pjw-frame{max-width:1060px;margin:0 auto;border-radius:18px;overflow:hidden;
  background:var(--navy);box-shadow:0 40px 80px -44px rgba(11,27,50,.5)}
.pjw-bar{height:38px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#16263f}
.pjw-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22);flex-shrink:0}
.pjw-url{flex:1;margin-inline-start:8px;height:22px;border-radius:100px;background:rgba(255,255,255,.09);
  display:flex;align-items:center;padding:0 12px;color:rgba(255,255,255,.55);font-size:.72rem;
  font-family:var(--lat);overflow:hidden;white-space:nowrap}
.pjw-view{position:relative;aspect-ratio:16/9;overflow:hidden;background:#fff;container-type:size}
.pjw-img{width:100%;height:auto;display:block;will-change:transform;
  animation:pjw-creep var(--pjw-dur,60s) linear infinite alternate;animation-play-state:paused}
.pjw-frame.run .pjw-img{animation-play-state:running}
.pjw-frame:hover .pjw-img,.pjw-frame:focus-within .pjw-img{animation-play-state:paused}
@keyframes pjw-creep{from{transform:translateY(0)}to{transform:translateY(calc(-100% + 100cqh))}}
.pjw-hint{text-align:center;color:var(--muted);font-size:.84rem;margin-top:14px}

/* a phone cannot read a 1920-wide page in a 330px window, and there is no
   cursor to stop it with — so it stops moving and starts being swipeable */
@media(max-width:760px){
  .pjw-view{aspect-ratio:3/4;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .pjw-img{animation:none;transform:none}
  .pjw-hint::after{content:"اسحب داخل الإطار"}
  .pjw-hint{font-size:0}.pjw-hint::after{font-size:.84rem}
}
@media(prefers-reduced-motion:reduce){
  .pjw-img{animation:none;transform:none}
  .pjw-view{overflow-y:auto}
  .pjw-hint{display:none}
}

/* phone numbers always read left-to-right: without isolation RTL reorders their groups */
a[href^="tel:"]{unicode-bidi:plaintext}

/* the phone header: the EN label is twice the Arabic one, so the pill scales
   with the screen instead of shoving the logo and the burger; the gaps
   between the three are fixed so every phone width breathes the same */
@media(max-width:600px){
  #sa-hdr .btn{padding-inline:clamp(12px,3.6vw,20px) 5px;gap:clamp(6px,1.8vw,10px)}
  #sa-hdr .btn .ico{width:clamp(30px,8.5vw,36px);height:clamp(30px,8.5vw,36px)}
  #sa-hdr .btn .ico svg{width:clamp(13px,3.6vw,15px)}
  #sa-hdr .nav{gap:12px}
}

/* under 600px the logo must never be the flex item that gives way */
@media(max-width:600px){#sa-hdr .brand,#sa-hdr .brand img,#sa-hdr .brand svg{flex-shrink:0}}
/* and on the narrowest phones the pill sheds its arrow disc, not the logo */
/* EN only: the Arabic pill fits with its disc on every phone, and the disc is identity */
@media(max-width:429px){html[lang^="en"] #sa-hdr .btn .ico{display:none}html[lang^="en"] #sa-hdr .btn{padding-inline:16px;padding-block:12px}}