:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* The Accountant L.L.C-FZ
   Everything here is taken from the firm's emblem: its stripes, its ring, its ribbons and its light.
   Stripes  pictures are shown through four bars set in two pairs, like the emblem's stem, and every heading starts
            with the emblem's five short lines.
   Ring     icons and step numbers stand in rings, and a seal of fine interlaced lines turns behind the opening.
   Ribbons  a ribbon rises across the opening picture, bands of light flow under it, and a ribbon joins the steps of
            "How we work". Things arrive the way the ribbon travels: upward, toward the far side.
   Light    surfaces are lit from the corner where reading starts and fall away to deep navy, as the emblem does.
            What is bright is polished steel, a silver-blue of the logo's own hue, and light crosses it now and then.
   The logo itself keeps its own navy and steel blue.
   The home page is navy, with one band of steel and one of white; the other pages read on a pale ground with navy bands.
   Headings are set in Lora, and its italic carries their second tone; text is Poppins. In Arabic: Noto Naskh Arabic
   and IBM Plex Sans Arabic. One look in both themes (the brand is navy on white), so there are no dark-mode overrides. */
@property --t1{syntax:"<percentage>";inherits:false;initial-value:0%}
@property --t2{syntax:"<percentage>";inherits:false;initial-value:0%}
@property --t3{syntax:"<percentage>";inherits:false;initial-value:0%}
@property --t4{syntax:"<percentage>";inherits:false;initial-value:0%}
:root{
  --navy-950:#050d16; --navy-900:#08141f; --navy-850:#0b1a2a; --navy:#14263a; --navy-700:#1a2e45; --navy-600:#243c58;
  /* steel: the logo's blue, polished. 700 and 600 carry white text; 600 is also for words and marks on the pale grounds;
     300 and 200 are for words on navy; 400 is for rules, rings and glows */
  --steel-900:#1c3350; --steel-800:#274669; --steel-700:#315a88; --steel-600:#3a6aa0; --steel-500:#4a80bd; --steel-400:#6c9fd8; --steel-300:#9cc0ea; --steel-200:#c5dbf3;
  --silver:#e9f1fa; --tint:#e7edf5; --paper:#f4f7fb; --white:#fff;
  --ink:#14263a; --body:#44566b; --muted:#5a6c81; --line:#d5deea;
  --on-dark:#d7e1ec; --on-dark-2:#a9bbcf;
  --err:#a12a2a;
  /* chart: each month's revenue is one column; costs are steel, profit the navy */
  --chart-profit:#14263a; --chart-cost:#5f8fc7;
  --f-display:"Lora",Georgia,"Times New Roman",serif;
  --f-body:"Poppins","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-head:var(--f-body);
  --f-brand:"DM Serif Display",Georgia,"Times New Roman",serif;
  --wrap:76rem; --gutter:clamp(1rem,4vw,2.25rem); --r:3px; --r-l:6px; --head-h:4.6rem;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.3,1.45,.5,1); --sweep:cubic-bezier(.7,0,.2,1);
  --logo-accent:#4a6a8e;
  /* gradients that have a direction follow the reading direction; --lit is the angle light falls at */
  --side:90deg; --diag:135deg; --lit:155deg; --glow-x:84%;
  /* polished steel (carries navy words), blued steel (carries white words) and the navy plate */
  --metal:linear-gradient(var(--diag),#f8fbfe 0%,#d9e4f1 28%,#bccde2 50%,#e6eef7 72%,#cddaea 100%);
  --metal-blue:linear-gradient(var(--diag),#3f72ab 0%,#315a88 52%,#274669 100%);
  --navy-plate:linear-gradient(var(--lit),#1d3757 0%,#13273f 46%,#0c1b2c 100%);
  --hair:rgba(156,192,234,.2);
  color-scheme:light;
}
:root[dir="rtl"]{--side:270deg; --diag:225deg; --lit:205deg; --glow-x:16%}
:root[lang="ar"]{
  --f-display:"Noto Naskh Arabic","Geeza Pro","Traditional Arabic",Tahoma,serif;
  --f-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --f-brand:"Noto Naskh Arabic","Geeza Pro","Traditional Arabic",Tahoma,serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--body);font:400 .97rem/1.7 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.on-dark body{background:var(--navy-900)}
:root[lang="ar"] body{font-size:1.03rem;line-height:1.9}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.17;letter-spacing:-.008em;text-wrap:balance;color:var(--ink)}
:root[lang="ar"] h1,:root[lang="ar"] h2{font-weight:700;letter-spacing:0;line-height:1.6}
/* in Arabic the smaller headings stay in the text face, where space is tight */
:root[lang="ar"] h3{font-family:var(--f-body);font-weight:700;letter-spacing:0;line-height:1.55}
a{color:var(--steel-600)}
img,svg{max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--steel-500);outline-offset:2px}
.dark :focus-visible,.hero :focus-visible,.banner :focus-visible,.facts :focus-visible,.cta-flow :focus-visible,.site-footer :focus-visible,.topbar :focus-visible,.vpanel :focus-visible,.contact-side :focus-visible{outline-color:#fff}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;inset-inline-start:var(--gutter);top:-4rem;background:var(--navy);color:#fff;padding:.6rem 1rem;z-index:60;border-radius:var(--r)}
.skip:focus{top:.5rem}
main{position:relative}
main:focus{outline:none}
.ico{display:block;flex:none}
.ico:not([width]){width:1.5rem;height:1.5rem}
.arrow{display:inline-block;flex:none;transition:transform .3s var(--ease)}
[dir="rtl"] .arrow{transform:scaleX(-1)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
/* on the live site a phone number or an email address is a link: it keeps the look of the text around it, and is underlined when pointed at */
.contact-link{color:inherit;text-decoration:none}
.contact-link:hover,.contact-link:focus-visible{text-decoration:underline;text-underline-offset:.2em}
.paints{position:absolute}

/* what the words stand on decides their colours */
.light{--fg:var(--ink);--fg-2:var(--body);--fg-3:var(--muted);--rule:var(--line);--mark:var(--steel-600);--mark-2:var(--navy)}
.dark,.hero,.banner,.facts,.site-footer{--fg:#fff;--fg-2:var(--on-dark);--fg-3:var(--on-dark-2);--rule:var(--hair);--mark:#fff;--mark-2:rgba(156,192,234,.62)}

/* the second tone of a heading: italic, in steel. On navy it is polished: the letters are cut from a band of metal */
.hl{font-style:italic;font-weight:500;color:var(--steel-600)}
:root[lang="ar"] .hl{font-style:normal;font-weight:700}
.dark .hl,.hero .hl,.banner .hl,.facts .hl,.cta-flow .hl{color:#7fabdc}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* the metal is painted only where the element's own box is, so the box is let out on every side (and pulled back by the same
     amount, so nothing moves): otherwise the tails of letters and the lean of the italic would be cut off */
  .dark .hl,.hero .hl,.banner .hl,.facts .hl{padding:.24em .14em .24em .04em;margin:-.24em -.14em -.24em -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
    background:linear-gradient(100deg,#f4f8fd 0%,#9cc0ea 30%,#eef5fc 48%,#7fabdc 70%,#c5dbf3 100%) 0 0/220% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  [dir="rtl"] .dark .hl,[dir="rtl"] .hero .hl,[dir="rtl"] .banner .hl,[dir="rtl"] .facts .hl{padding:.4em .1em;margin:-.4em -.1em}
}

/* ---------- the emblem's five lines. The first is the bright one, as in the emblem. */
.stripes{display:block;width:2.5rem;height:1.375rem;--x:0;background:
  linear-gradient(var(--mark,var(--steel-600)) 0 0) var(--x) 0/100% 2px no-repeat,
  linear-gradient(var(--mark-2,var(--navy)) 0 0) var(--x) 25%/100% 2px no-repeat,
  linear-gradient(var(--mark-2,var(--navy)) 0 0) var(--x) 50%/100% 2px no-repeat,
  linear-gradient(var(--mark-2,var(--navy)) 0 0) var(--x) 75%/100% 2px no-repeat,
  linear-gradient(var(--mark-2,var(--navy)) 0 0) var(--x) 100%/100% 2px no-repeat}
[dir="rtl"] .stripes{--x:100%}

/* ---------- the ground of the home page: navy lit from the far upper corner, with the emblem's pinstripes, in pairs, very faint.
   The ground stays where it is while the page moves over it. */
.backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:
  radial-gradient(60rem 36rem at var(--glow-x) -8%,rgba(58,106,160,.46),transparent 62%),
  radial-gradient(46rem 32rem at calc(100% - var(--glow-x)) 62%,rgba(39,70,105,.5),transparent 64%),
  radial-gradient(40rem 26rem at 74% 108%,rgba(58,106,160,.3),transparent 62%),
  linear-gradient(160deg,#0d1e31,#0a1826 55%,#07111c)}
.backdrop::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 9.5rem,rgba(156,192,234,.06) 9.5rem calc(9.5rem + 1px),transparent calc(9.5rem + 1px) 9.9rem,rgba(156,192,234,.06) 9.9rem calc(9.9rem + 1px),transparent calc(9.9rem + 1px) 19rem);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
/* a soft light that follows the pointer across the ground (the script moves it; it shows once the mouse has moved) */
.glow{position:absolute;left:-22rem;top:-22rem;width:44rem;height:44rem;border-radius:50%;opacity:0;transition:opacity .9s;will-change:transform;
  background:radial-gradient(closest-side,rgba(108,159,216,.14),rgba(108,159,216,.05) 55%,transparent)}
.motion .glow.on{opacity:1}
/* one more light, which drifts slowly across the ground so the page is never quite still */
.backdrop::before{content:"";position:absolute;inset:-25%;background:radial-gradient(42rem 28rem at 32% 38%,rgba(108,159,216,.16),transparent 62%);will-change:transform}

/* ---------- buttons: plates. Where a button leads somewhere its arrow stands in a tab cut on the slant, and the tab's
   colour crosses the whole plate when the button is pointed at. */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:2.9rem;padding:.7rem 1.35rem;border-radius:var(--r);
  font:500 .92rem/1.3 var(--f-body);text-decoration:none;text-align:center;border:1px solid transparent;cursor:pointer;
  --tab:var(--steel-700);--tab-fg:#fff;--over:#fff;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .25s,color .3s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .arrow{transition:transform .3s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
[dir="rtl"] .btn:hover .arrow{transform:scaleX(-1) translateX(4px)}
.btn-tab{position:relative;align-self:stretch;display:grid;place-items:center;flex:none;width:3.15rem;margin-block:calc(-.7rem - 1px);margin-inline:.45rem calc(-1.35rem - 1px);
  padding-inline-start:.55rem;color:var(--tab-fg);background:var(--tab);clip-path:polygon(34% 0,100% 0,100% 100%,0 100%)}
[dir="rtl"] .btn-tab{clip-path:polygon(0 0,66% 0,100% 100%,0 100%)}
/* the fill that crosses the plate from the tab's side */
.btn::before{content:"";position:absolute;inset-block:-1px;inset-inline:-22% -22%;z-index:-1;pointer-events:none;background:var(--tab);
  transform:translateX(104%) skewX(-19deg);transition:transform .55s var(--sweep)}
[dir="rtl"] .btn::before{transform:translateX(-104%) skewX(19deg)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(0) skewX(-19deg)}
[dir="rtl"] .btn:hover::before,[dir="rtl"] .btn:focus-visible::before{transform:translateX(0) skewX(19deg)}
.btn:hover,.btn:focus-visible{color:var(--over)}
/* polished steel: the first choice on navy */
.btn-primary{background:var(--metal);color:var(--navy);border-color:rgba(255,255,255,.7);box-shadow:0 16px 30px -18px rgba(5,13,22,.9),inset 0 1px 0 #fff}
.btn-primary:hover{box-shadow:0 22px 38px -18px rgba(5,13,22,.95),0 0 0 4px rgba(156,192,234,.16)}
/* a band of light crosses the steel now and then */
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.85) 50%,transparent 64%)}
/* on the pale grounds the first choice is the navy plate, with a steel tab */
.light .btn-primary,.site-header .btn-primary,.form .btn-primary{background:var(--navy-plate);color:#fff;border-color:rgba(20,38,58,.4);--tab:var(--steel-600);box-shadow:0 16px 28px -18px rgba(5,13,22,.75)}
.light .btn-primary::after,.site-header .btn-primary::after,.form .btn-primary::after{content:none}
/* on a dark card that sits on a pale page the first choice is steel again */
.light .cta-flow .btn-primary{background:var(--metal);color:var(--navy);border-color:rgba(255,255,255,.7);--tab:var(--steel-700);box-shadow:0 16px 30px -18px rgba(5,13,22,.9),inset 0 1px 0 #fff}
.light .cta-flow .btn-primary:hover{color:#fff}
.light .cta-flow .btn-primary::after{content:""}
.btn-glass{background:rgba(233,241,250,.04);color:#fff;border-color:rgba(197,219,243,.5);--tab:var(--silver);--over:var(--navy)}
.btn-dark{background:var(--navy-plate);color:#fff;border-color:rgba(20,38,58,.5);--tab:var(--steel-600);box-shadow:0 16px 28px -18px rgba(5,13,22,.8)}
.btn-white{background:#fff;color:var(--navy);--tab:var(--navy);box-shadow:0 14px 28px -16px rgba(5,13,22,.7)}
.btn-ghost{background:transparent;color:var(--navy);border-color:#b9c6d5;--tab:var(--navy)}
.btn-s{min-height:2.5rem;padding:.5rem 1.05rem;font-size:.85rem}
.btn-s .btn-tab{width:2.8rem;margin-block:calc(-.5rem - 1px);margin-inline-end:calc(-1.05rem - 1px)}
.btn-mini{min-height:0;padding:.36rem .8rem;font-size:.8rem;background:#fff;border-color:var(--line);color:var(--ink);--tab:var(--navy)}
.btn-mini:hover{transform:none}
.textlink{display:inline-flex;align-items:center;gap:.45rem;font-weight:500;text-decoration:none;color:var(--steel-600)}
.textlink:hover{color:var(--navy)}
.textlink.on-dark{color:var(--steel-200)}
.textlink.on-dark:hover{color:#fff}
.textlink:hover .arrow{transform:translateX(4px)}
[dir="rtl"] .textlink:hover .arrow{transform:scaleX(-1) translateX(4px)}

/* ---------- sections, and the heading every section starts with: the five lines, then two tones */
.sec{position:relative;padding-block:clamp(3.5rem,7.5vw,6rem);overflow:hidden}
.sec.tight{padding-block:clamp(1.25rem,3vw,2.25rem)}
.light{background:var(--paper);color:var(--body)}
.light.alt{background:#fff}
.dark{color:var(--on-dark)}
.dark h2,.dark h3{color:#fff}
/* on the pale pages a dark section is a band of its own, lit like the emblem and ruled with its pinstripes */
.dark.band{isolation:isolate;background:
  repeating-linear-gradient(90deg,transparent 0 9.5rem,rgba(156,192,234,.05) 9.5rem calc(9.5rem + 1px),transparent calc(9.5rem + 1px) 9.9rem,rgba(156,192,234,.05) 9.9rem calc(9.9rem + 1px),transparent calc(9.9rem + 1px) 19rem),
  radial-gradient(46rem 24rem at var(--glow-x) -10%,rgba(58,106,160,.5),transparent 62%),
  radial-gradient(36rem 22rem at calc(100% - var(--glow-x)) 115%,rgba(39,70,105,.5),transparent 62%),
  linear-gradient(160deg,#0d1e31,#0a1826 55%,#07111c)}
.head{max-width:46rem;margin-bottom:clamp(1.9rem,3.6vw,2.9rem)}
.head .stripes,.intro-copy > .stripes,.about-copy > .stripes,.form > .stripes{margin-bottom:1.15rem}
.head h2{font-size:clamp(1.7rem,3.3vw,2.55rem);color:var(--fg)}
.head p{margin-top:1rem;max-width:40rem;color:var(--fg-3);font-size:1.02rem}
.head.center{margin-inline:auto;text-align:center}
.head.center .stripes,.head.center p{margin-inline:auto}
/* the logo's emblem, very faint, behind a section */
.wm{position:absolute;pointer-events:none;--logo-accent:currentColor}
.wm svg{display:block;width:100%;height:auto}
.sec > .wm{z-index:0;inset-inline-start:-9rem;top:1.25rem;width:min(28rem,70vw);color:var(--navy);opacity:.03}
.sec.dark > .wm{inset-inline-start:auto;inset-inline-end:-3rem;top:50%;translate:0 -50%;width:min(30rem,60vw);color:#fff;opacity:.04}
.sec > .wrap{position:relative;z-index:1}

/* ---------- rings: an icon stands in a ring; light runs round the ring when its card is pointed at */
.point-ico,.svc-ico,.svc-ask-ico,.diff-ico,.why-ico,.cinfo-ico,.vm-ico,.vpanel-ico,.mega-ico,.other-ico,.call-num-ico,.badge-ico{position:relative;display:grid;place-items:center;flex:none;width:3.1rem;height:3.1rem;border-radius:50%;
  color:#fff;background:radial-gradient(circle at 32% 24%,rgba(156,192,234,.3),rgba(156,192,234,.05) 62%);box-shadow:inset 0 0 0 1px rgba(156,192,234,.42)}
.point-ico::after,.svc-ico::after,.diff-ico::after,.why-ico::after,.cinfo-ico::after,.vm-ico::after,.other-ico::after,.mega-ico::after{content:"";position:absolute;inset:-1px;border-radius:50%;padding:2px;pointer-events:none;opacity:0;transition:opacity .4s;
  background:conic-gradient(from 0deg,transparent 0 58%,var(--ring-light,#fff) 80%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.point-ico .ico,.svc-ico .ico,.svc-ask-ico .ico,.diff-ico .ico,.why-ico .ico,.cinfo-ico .ico,.vpanel-ico .ico,.mega-ico .ico,.other-ico .ico,.badge-ico .ico{width:1.45rem;height:1.45rem;stroke-width:1.5}
/* on the pale grounds a ring is navy steel */
.light .why-ico,.light .cinfo-ico,.mega-ico,.other-ico,.light .call-num-ico{color:var(--steel-700);background:radial-gradient(circle at 32% 24%,#fff,var(--tint) 70%);box-shadow:inset 0 0 0 1px #b4c5d9;--ring-light:var(--steel-600)}

/* ---------- small things */
/* a short statement on a plate of polished steel, set over the edge of a picture */
.label-box{margin:0;padding:.75rem 1.5rem .8rem;border-radius:var(--r);background:var(--metal);color:var(--navy);
  font:italic 500 1.06rem/1.4 var(--f-display);text-align:center;box-shadow:0 22px 38px -20px rgba(5,13,22,.85),inset 0 1px 0 #fff}
:root[lang="ar"] .label-box{font-style:normal;font-weight:700;line-height:1.7}
.kicker{display:inline-flex;align-items:center;gap:.7rem;font:500 .76rem/1.4 var(--f-body);letter-spacing:.15em;text-transform:uppercase;color:var(--steel-200)}
.kicker::before{content:"";flex:none;width:1.5rem;height:.875rem;background:
  linear-gradient(#fff 0 0) 0 0/100% 1.5px no-repeat,
  linear-gradient(var(--steel-400) 0 0) 0 25%/100% 1.5px no-repeat,
  linear-gradient(var(--steel-400) 0 0) 0 50%/100% 1.5px no-repeat,
  linear-gradient(var(--steel-400) 0 0) 0 75%/100% 1.5px no-repeat,
  linear-gradient(var(--steel-400) 0 0) 0 100%/100% 1.5px no-repeat}
:root[lang="ar"] .kicker{letter-spacing:0;font-size:.92rem}
.pill{display:inline-block;padding:.2rem .65rem;border-radius:2px;border:1px solid rgba(156,192,234,.45);color:var(--steel-200);font:500 .68rem/1.5 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
:root[lang="ar"] .pill{letter-spacing:0;font-size:.82rem}
.tag{display:inline-block;padding:.2rem .6rem;border-radius:2px;background:rgba(5,13,22,.55);border:1px solid rgba(156,192,234,.5);color:#fff;
  font:500 .66rem/1.5 var(--f-body);letter-spacing:.07em;text-transform:uppercase}
:root[lang="ar"] .tag{letter-spacing:0;font-size:.8rem}

/* the phone number as text with a label */
.call-num{display:inline-flex;align-items:center;gap:.75rem;color:#fff;text-decoration:none}
a.call-num:hover b,a.call-num:focus-visible b{text-decoration:underline;text-underline-offset:.2em}
.call-num-ico{width:2.8rem;height:2.8rem}
.call-num-ico .ico{width:1.1rem;height:1.1rem}
.call-num small{display:block;font-size:.7rem;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2)}
:root[lang="ar"] .call-num small{letter-spacing:0;font-size:.84rem}
.call-num b{display:block;font:500 1.12rem/1.35 var(--f-display);font-variant-numeric:lining-nums;white-space:nowrap}
:root[lang="ar"] .call-num b{font-family:var(--f-body);font-weight:700;font-size:1.06rem}
.light .call-num{color:var(--ink)}
.light .call-num small{color:var(--muted)}

/* ---------- the strip above the header: the license on one side, the firm's number and address for mail on the other.
   It is plain text to read and select; it scrolls away with the page. */
.topbar{position:relative;z-index:41;background:var(--navy-950);color:var(--on-dark-2);font-size:.8rem;line-height:1.4;border-bottom:1px solid rgba(156,192,234,.12)}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:.35rem 1.5rem;min-height:2.3rem;padding-block:.35rem}
.topbar p{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.6rem;min-width:0}
.topbar-lic,.topbar-item{display:inline-flex;align-items:center;gap:.5rem;min-width:0}
.topbar svg{flex:none;width:.95rem;height:.95rem;color:var(--steel-400)}
.topbar .ltr{color:var(--on-dark);letter-spacing:.01em}
@media (max-width:52rem){.topbar .topbar-lic{display:none}.topbar-row{justify-content:center}}
@media (max-width:30rem){.topbar .topbar-mail{display:none}}

/* ---------- header: white, so the logo stands in its own colours; the pages in the middle, the language switch at the end */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:#fff;box-shadow:0 1px 0 var(--line);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 14px 34px -20px rgba(5,13,22,.6)}
.header-row{display:flex;align-items:center;gap:.85rem;min-height:var(--head-h)}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--navy);text-decoration:none;margin-inline-end:auto;min-width:0}
.brand svg{width:2.9rem;height:2.9rem;flex:none;transition:transform .5s var(--spring)}
.brand:hover svg{transform:rotate(-6deg) scale(1.06)}
.brand-text{min-width:0}
.brand-name{display:block;font-family:var(--f-brand);font-size:1.4rem;line-height:1.05;white-space:nowrap}
.brand-suffix{display:block;margin-top:.22rem;font:500 .62rem/1.2 var(--f-body);letter-spacing:.2em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
:root[lang="ar"] .brand-name{font-weight:700;font-size:1.32rem;line-height:1.3}
:root[lang="ar"] .brand-suffix{letter-spacing:0;font-size:.74rem;margin-top:0}

.nav{display:flex;align-items:stretch;align-self:stretch;gap:.1rem}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:.3rem;padding-inline:.9rem;color:var(--ink);text-decoration:none;font:500 .93rem/1.2 var(--f-body);white-space:nowrap;transition:color .2s}
/* under the page you are on: two fine lines, a pair of the emblem's pinstripes */
.nav-link::after{content:"";position:absolute;inset-inline:.9rem;bottom:calc(50% - 1.2rem);height:5px;border-block:1.5px solid var(--steel-600);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
[dir="rtl"] .nav-link::after{transform-origin:100% 50%}
.nav-link:hover,.nav-link[aria-current="page"],.has-mega:hover > .nav-link,.has-mega:focus-within > .nav-link{color:var(--steel-600)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after,.has-mega:hover > .nav-link::after{transform:scaleX(1)}
.nav-link .ico{width:.8rem;height:.8rem;margin-top:.1rem;transition:transform .3s var(--ease)}
.has-mega{display:flex;align-items:stretch}
.has-mega:hover > .nav-link .ico,.has-mega:focus-within > .nav-link .ico{transform:rotate(180deg)}
.nav-cta{align-self:center;margin-inline-start:.7rem;min-height:2.6rem;padding-block:.55rem;white-space:nowrap}
.nav-cta .btn-tab{margin-block:calc(-.55rem - 1px)}

/* the Services panel: an icon in a ring, the name and one line for each service */
.mega{position:absolute;inset-inline:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 34px 50px -30px rgba(5,13,22,.55);
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .22s ease,transform .28s var(--ease),visibility 0s .22s}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.mega > .wrap{padding-block:1.35rem 1.05rem}
.mega-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem 1.5rem}
.mega-item{display:flex;align-items:center;gap:.95rem;padding:.7rem 1rem;border:1px solid transparent;border-radius:var(--r-l);text-decoration:none;color:var(--ink);transition:background-color .2s,border-color .2s,transform .25s var(--ease)}
.mega-item:hover,.mega-item:focus-visible,.mega-item[aria-current="page"]{background:var(--paper);border-color:var(--line)}
.mega-item:hover{transform:translateX(3px)}
[dir="rtl"] .mega-item:hover{transform:translateX(-3px)}
.mega-ico,.other-ico{width:2.8rem;height:2.8rem;transition:background-color .25s,color .25s}
.mega-ico .ico,.other-ico .ico{width:1.3rem;height:1.3rem}
.mega-item:hover .mega-ico::after,.other:hover .other-ico::after{opacity:1}
.mega-text{min-width:0}
.mega-text b,.other-text b{display:block;font:600 1.04rem/1.35 var(--f-display);color:var(--ink)}
:root[lang="ar"] .mega-text b,:root[lang="ar"] .other-text b{font:700 1rem/1.5 var(--f-body)}
.mega-text small,.other-text small{display:block;font-size:.82rem;line-height:1.45;color:var(--muted)}
.mega-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;margin-top:.95rem;padding-top:.9rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--ink)}
.mega-foot b{font-weight:700}

.lang{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:#fff;padding:.5rem .8rem;border-radius:var(--r);cursor:pointer;
  font:500 .88rem/1.2 var(--f-body);color:var(--ink);white-space:nowrap;transition:border-color .2s,transform .2s}
.lang[lang="ar"]{font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;font-size:.95rem}
.lang[lang="en"]{font-family:"Poppins","Segoe UI",system-ui,Arial,sans-serif}
.lang .ico{color:var(--steel-600)}
.lang:hover{border-color:var(--steel-600);transform:translateY(-1px)}
.nav-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:.45rem .55rem;cursor:pointer;line-height:0;color:var(--navy)}

@media (max-width:66rem){
  .nav-link{padding-inline:.65rem}
  .nav-link::after{inset-inline:.65rem}
  .nav-cta{display:none}
}
@media (max-width:52rem){
  :root{--head-h:4.25rem}
  .nav-toggle{display:inline-flex}
  .nav{display:none;position:absolute;inset-inline:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-top:1px solid var(--line);
    padding:.35rem var(--gutter) 1.2rem;box-shadow:0 26px 40px -26px rgba(5,13,22,.55);max-height:calc(100vh - var(--head-h) - 1rem);overflow-y:auto;overscroll-behavior:contain}
  .nav.open{display:flex;animation:menu-in .3s var(--ease) backwards}
  .nav-link{padding:.85rem .25rem;border-bottom:1px solid var(--tint);font-size:1rem}
  .nav-link::after,.nav-link .ico{display:none}
  .has-mega{flex-direction:column}
  .mega{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;box-shadow:none;border:0;transition:none}
  .mega > .wrap{padding:0;max-width:none}
  .mega-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .mega-item{padding:.5rem .25rem;padding-inline-start:.9rem;border:0;border-radius:0;border-bottom:1px solid var(--tint);gap:.7rem}
  .mega-item:hover{transform:none}
  .mega-ico{width:2rem;height:2rem}
  .mega-ico .ico{width:1.05rem;height:1.05rem}
  .mega-text b{font-size:.95rem}
  .mega-text small,.mega-foot{display:none}
  /* across the whole menu: the words where reading starts, the tab at the far end */
  .nav-cta{display:flex;justify-content:space-between;align-self:stretch;margin:1rem 0 0;min-height:2.9rem;padding-block:.7rem}
  .nav-cta .btn-tab{margin-block:calc(-.7rem - 1px)}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}}
@media (max-width:26rem){
  .brand svg{width:2.4rem;height:2.4rem}
  .brand-name{font-size:1.18rem}
  .brand-suffix{font-size:.56rem;letter-spacing:.14em}
}
@media (max-width:22.5rem){
  .header-row{gap:.5rem}
  .brand{gap:.5rem}
  .brand svg{width:2.15rem;height:2.15rem}
  .brand-name{font-size:1.02rem}
  :root[lang="ar"] .brand-name{font-size:1.05rem}
  .brand-suffix{display:none}
  .lang{padding:.42rem .55rem;font-size:.84rem}
  .lang .ico{display:none}
  .nav-toggle{padding:.4rem .5rem}
}

/* ---------- footer: it opens with the emblem's five lines, drawn across the page */
.site-footer{position:relative;background:var(--navy-950);color:var(--on-dark-2);font-size:.9rem}
.on-dark .site-footer{background:rgba(5,13,22,.82)}
.footer-stripes{display:block;height:1.625rem;--x:0;background:
  linear-gradient(var(--side),var(--steel-300),rgba(156,192,234,0) 88%) var(--x) 0/100% 2px no-repeat,
  linear-gradient(var(--side),rgba(108,159,216,.55),rgba(108,159,216,0) 74%) var(--x) 25%/100% 2px no-repeat,
  linear-gradient(var(--side),rgba(108,159,216,.55),rgba(108,159,216,0) 62%) var(--x) 50%/100% 2px no-repeat,
  linear-gradient(var(--side),rgba(108,159,216,.55),rgba(108,159,216,0) 50%) var(--x) 75%/100% 2px no-repeat,
  linear-gradient(var(--side),rgba(108,159,216,.55),rgba(108,159,216,0) 40%) var(--x) 100%/100% 2px no-repeat}
[dir="rtl"] .footer-stripes{--x:100%}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr) minmax(0,1fr) minmax(0,1.3fr);gap:2rem clamp(1.5rem,3vw,3rem);padding-block:2.75rem 2.25rem}
.site-footer h2{margin-bottom:1rem;font:600 1.12rem/1.4 var(--f-display);color:#fff;letter-spacing:0}
:root[lang="ar"] .site-footer h2{font:700 1.05rem/1.5 var(--f-body)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.footer-brand{display:flex;align-items:center;gap:.7rem;color:#fff;margin-bottom:1rem;--logo-accent:#8fb0d6}
.footer-brand svg{width:2.9rem;height:2.9rem;flex:none}
.footer-brand .brand-suffix{color:var(--on-dark-2)}
.footer-about{max-width:23rem;color:var(--on-dark)}
.footer-lic{display:flex;gap:.5rem;align-items:flex-start;margin-top:.9rem;font-size:.84rem}
.footer-lic svg,.footer-contact svg{flex:none;width:1.05rem;height:1.05rem;margin-top:.28rem;color:var(--steel-300)}
.footer-links a{display:inline-flex;align-items:center;gap:.65rem;color:var(--on-dark);text-decoration:none;font-weight:500;transition:color .2s}
/* before each link: a short line that grows when the link is pointed at */
.footer-links a::before{content:"";flex:none;width:.7rem;height:2px;background:var(--steel-400);transition:width .3s var(--ease),background-color .25s}
.footer-links a:hover{color:#fff}
.footer-links a:hover::before{width:1.35rem;background:#fff}
.footer-contact li{display:flex;gap:.65rem;align-items:flex-start;color:var(--on-dark);overflow-wrap:anywhere}
.footer-legal{display:grid;justify-items:center;gap:.3rem;padding-block:1.25rem 1.6rem;border-top:1px solid rgba(156,192,234,.14);text-align:center;font-size:.82rem}
.motion-toggle{display:inline-flex;align-items:center;gap:.45rem;margin-top:.55rem;background:transparent;border:1px solid rgba(197,219,243,.34);color:var(--on-dark);border-radius:var(--r);padding:.6rem 1rem;font-size:.8rem;line-height:1.3;cursor:pointer;transition:border-color .2s,color .2s}
.motion-toggle:hover{border-color:#fff;color:#fff}
@media (max-width:58rem){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:32rem){
  .footer-grid{grid-template-columns:minmax(0,1fr);padding-block:2.25rem 1.75rem}
}

/* ---------- back to top: the ring fills as you go down the page */
.to-top{position:fixed;inset-inline-end:1.1rem;bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));z-index:35;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;border:0;
  background:var(--steel-700);color:#fff;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);box-shadow:0 14px 28px -12px rgba(5,13,22,.85);
  transition:opacity .3s,transform .3s var(--ease),visibility 0s .3s,background-color .2s}
.to-top.show{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.to-top:hover{background:var(--steel-600)}
.to-top .ico{width:1.1rem;height:1.1rem}
.to-top .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}
.to-top .ring circle{stroke:rgba(255,255,255,.25);stroke-width:2}
.to-top .ring .ring-on{stroke:#fff;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}

/* ---------- when a page opens, four bars lift away from it: the emblem's pinstripes, grown to the size of the screen.
   At rest the bars are out of sight above the screen, so a page that does not animate is simply there. */
.unveil{position:fixed;inset:0;z-index:90;display:flex;pointer-events:none;overflow:hidden}
.unveil i{flex:1 1 0;transform:translateY(-101%);background:linear-gradient(180deg,#0d1e31,#07111c);box-shadow:inset -1px 0 0 rgba(156,192,234,.16),inset 0 -2px 0 rgba(197,219,243,.5)}

/* ---------- pictures are shown through four bars set in two pairs, like the stem of the emblem.
   --t1 to --t4 are how far down each bar's top is cut, measured at its far edge; --s is the slant across one bar;
   --g and --G are half the gap inside a pair and half the gap between the pairs. On a right-to-left page the bars are mirrored. */
.bars{--g:3px;--G:7px;--s:2%;--t1:6%;--t2:4%;--t3:2%;--t4:0%;
  clip-path:polygon(
    0 100%,0 calc(var(--t1) + var(--s)),calc(25% - var(--g)) var(--t1),calc(25% - var(--g)) 100%,
    calc(25% + var(--g)) 100%,calc(25% + var(--g)) calc(var(--t2) + var(--s)),calc(50% - var(--G)) var(--t2),calc(50% - var(--G)) 100%,
    calc(50% + var(--G)) 100%,calc(50% + var(--G)) calc(var(--t3) + var(--s)),calc(75% - var(--g)) var(--t3),calc(75% - var(--g)) 100%,
    calc(75% + var(--g)) 100%,calc(75% + var(--g)) calc(var(--t4) + var(--s)),100% var(--t4),100% 100%)}
[dir="rtl"] .bars{clip-path:polygon(
    100% 100%,100% calc(var(--t1) + var(--s)),calc(75% + var(--g)) var(--t1),calc(75% + var(--g)) 100%,
    calc(75% - var(--g)) 100%,calc(75% - var(--g)) calc(var(--t2) + var(--s)),calc(50% + var(--G)) var(--t2),calc(50% + var(--G)) 100%,
    calc(50% - var(--G)) 100%,calc(50% - var(--G)) calc(var(--t3) + var(--s)),calc(25% + var(--g)) var(--t3),calc(25% + var(--g)) 100%,
    calc(25% - var(--g)) 100%,calc(25% - var(--g)) calc(var(--t4) + var(--s)),0 var(--t4),0 100%)}
/* the opening picture and the page banners: the bars step up toward the far side, as a rising chart does */
.bars.rise{--g:4px;--G:9px;--s:8%;--t1:27%;--t2:18%;--t3:9%;--t4:0%}

/* a photograph, and its clip where it has one, filling its frame */
.media{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:var(--navy)}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media video{opacity:0;transition:opacity 1.1s ease}
.media video.on{opacity:1}
/* light falls on the picture from the corner where reading starts, and the far foot falls away to navy */
.media::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--lit),rgba(233,241,250,.16) 0%,rgba(233,241,250,0) 30%,rgba(5,13,22,0) 62%,rgba(5,13,22,.42) 100%)}
/* the picture is a little taller than its frame, so it can slide as the page scrolls */
.media[data-px] img,.media[data-px] video{top:-40px;height:calc(100% + 80px)}

/* the ribbon that rises across a picture, and the gleam that passes along it */
.fig-ribbon{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
[dir="rtl"] .fig-ribbon{transform:scaleX(-1)}
.fig-ribbon path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.rb-band{stroke:url(#rb-g);stroke-width:11px;filter:drop-shadow(0 12px 12px rgba(5,13,22,.5))}
.rb-line{stroke:rgba(233,241,250,.7);stroke-width:1.5px}
.fig-ribbon .rb-tip{fill:#f4f8fd;filter:drop-shadow(0 8px 10px rgba(5,13,22,.5))}
.fig-glint{opacity:0;-webkit-mask:linear-gradient(45deg,transparent 48.200%,#000 50%,transparent 51.800%) 100% 0/300% 300% no-repeat;mask:linear-gradient(45deg,transparent 48.200%,#000 50%,transparent 51.800%) 100% 0/300% 300% no-repeat}
.fig-glint .rb-band{stroke:#fff;stroke-width:5px;filter:none}

/* the seal: a ring of fine interlaced lines that turns slowly; a light goes round it the other way */
.seal{position:absolute;aspect-ratio:1;pointer-events:none}
.seal canvas{display:block;width:100%;height:100%}
.seal-sheen{position:absolute;inset:0;border-radius:50%;opacity:.5;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(233,241,250,.6) 80%,transparent 95%);
  -webkit-mask-image:radial-gradient(closest-side,transparent 62%,#000 63%,#000 99%,transparent 100%);mask-image:radial-gradient(closest-side,transparent 62%,#000 63%,#000 99%,transparent 100%)}

/* ---------- opening slides: the words on one side, the picture standing as four rising bars on the other */
/* --col-gap and --col-a describe the two columns (the space between them, and the share the words take), so the seal can be
   placed from the same figures */
.hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;--col-gap:clamp(1.5rem,4.5vw,4.5rem);--col-a:.57}
.hero > .fx{position:absolute;inset-inline:0;bottom:0;z-index:-1;width:100%;height:64%;pointer-events:none}
/* The seal stands behind the picture. Its near edge is where the words' column ends, so its lines never pass behind the words;
   it is centred with a transform, which leaves `translate` free for its drift as the page scrolls (FLOATS in app.6-mount.js). */
.hero-seal{z-index:-1;top:50%;transform:translateY(-53%);
  inset-inline-start:calc(max(0px,(100% - var(--wrap)) / 2) + var(--gutter) + (min(100%,var(--wrap)) - 2 * var(--gutter) - var(--col-gap)) * var(--col-a));
  width:calc((min(100%,var(--wrap)) - 2 * var(--gutter) - var(--col-gap)) * (1 - var(--col-a)) + var(--col-gap) + 6rem)}
.slides{position:relative;z-index:1;display:grid}
.slide{grid-area:1/1;display:grid;align-items:center;min-height:clamp(30rem,70vh,38.5rem);padding-block:clamp(2.25rem,5vw,3.5rem) 1.25rem;
  opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
.slide.is-on{opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s}
.slide-grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:var(--col-gap);align-items:center;width:100%}
.slide-copy{min-width:0}
.slide-copy .kicker{margin-bottom:1.2rem}
.hero-title{font-size:clamp(2.1rem,4.55vw,3.6rem);line-height:1.07;letter-spacing:-.012em;color:#fff}
:root[lang="ar"] .hero-title{font-size:clamp(2rem,4.4vw,3.35rem);line-height:1.5}
.hero-title span{display:block}
.hero .lead{margin-top:1.3rem;max-width:34rem;font-size:1.05rem;color:var(--on-dark)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
.slide-fig{position:relative;min-width:0;height:clamp(21rem,54vh,31rem)}
/* the bars stand on a fine line, as columns stand on the axis of a chart */
.slide-fig::after,.banner-fig::after{content:"";position:absolute;inset-inline:-4%;bottom:-1px;height:1px;background:linear-gradient(var(--side),transparent,rgba(156,192,234,.75) 14%,rgba(156,192,234,.75) 86%,transparent)}
.hero-ui{position:relative;z-index:2;padding-block:.5rem 2.25rem}
.hero-ui-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.hero-dots,.hero-arrows{display:flex;gap:.6rem}
.dot{display:grid;gap:.45rem;width:3.75rem;padding:.4rem 0;background:none;border:0;color:rgba(255,255,255,.62);font:500 .98rem/1 "Lora",Georgia,serif;font-variant-numeric:lining-nums;text-align:start;cursor:pointer;transition:color .2s}
.dot:hover,.dot.is-on{color:#fff}
/* under each number a pair of fine lines; the slide on show fills the space between them as its time runs */
.dot i{position:relative;display:block;height:5px;border-block:1px solid rgba(197,219,243,.34);overflow:hidden}
.dot.is-on i::after{content:"";position:absolute;inset:0;background:var(--steel-200);transform:scaleX(var(--p,1));transform-origin:0 50%}
[dir="rtl"] .dot.is-on i::after{transform-origin:100% 50%}
.hero-arrow{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;border:1px solid rgba(197,219,243,.5);background:rgba(5,13,22,.4);color:#fff;cursor:pointer;
  transition:background-color .25s,color .25s,border-color .25s,transform .3s var(--ease)}
.hero-arrow:hover{background:var(--silver);color:var(--navy);border-color:#fff;transform:scale(1.06)}
.hero-arrow .ico{width:1.15rem;height:1.15rem}
[dir="rtl"] .hero-arrow .ico{transform:scaleX(-1)}
@media (max-width:56rem){
  .slide{min-height:0;padding-block:2.25rem 1rem}
  .slide-grid{grid-template-columns:minmax(0,1fr);gap:1.9rem}
  .slide-fig{height:clamp(13rem,54vw,21rem)}
  /* in one column the seal stands behind the foot of the picture, below the words and the buttons */
  .hero-seal{top:auto;bottom:-8rem;transform:none;inset-inline-start:auto;inset-inline-end:-8rem;width:27rem}
  .hero-ui{padding-block:.75rem 1.75rem}
}
@media (max-width:40rem){
  .hero-arrow{width:2.4rem;height:2.4rem}
  .rb-band{stroke-width:7px}
}
@media (max-width:26rem){
  .dot{width:2.6rem}
  .hero-dots,.hero-arrows{gap:.45rem}
}

/* ---------- tax dates worth knowing: a strip ruled like a page of accounts, closed top and bottom by a double rule */
.facts{position:relative;z-index:2;padding-block:.25rem clamp(2rem,4.5vw,3.25rem);color:var(--on-dark)}
.facts-row{position:relative;display:grid;grid-template-columns:minmax(0,14.5rem) minmax(0,1fr);gap:1.5rem clamp(1.25rem,3vw,2.75rem);align-items:center;padding-block:1.75rem;border-block:1px solid var(--hair)}
.facts-row::before,.facts-row::after{content:"";position:absolute;inset-inline:0;height:1px;background:var(--hair)}
.facts-row::before{top:3px}
.facts-row::after{bottom:3px}
.facts-cap{display:grid;gap:.85rem;justify-items:start;min-width:0}
.facts-cap h2{font-size:clamp(1.4rem,2.2vw,1.75rem);color:#fff}
.facts-cap h2 span{display:block}
.facts-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
/* between the columns: a pair of fine lines */
.fact{position:relative;min-width:0;padding-inline:clamp(.9rem,2vw,1.6rem);border-inline-start:1px solid var(--hair)}
.fact::before{content:"";position:absolute;inset-block:0;inset-inline-start:3px;width:1px;background:var(--hair)}
.fact-num{display:flex;align-items:baseline;gap:.5rem;font:500 clamp(2.5rem,4.6vw,3.55rem)/1 "Lora",Georgia,serif;font-variant-numeric:lining-nums tabular-nums;color:var(--steel-300)}
.fact-num.pct{direction:ltr;gap:.06rem}
[dir="rtl"] .fact-num.pct{justify-content:flex-end}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .fact-num > span:not(.fact-unit){background:linear-gradient(180deg,#fff 18%,#9cc0ea 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.fact-unit{font:500 .76rem/1.2 var(--f-body);letter-spacing:.13em;text-transform:uppercase;color:var(--steel-300)}
:root[lang="ar"] .fact-unit{letter-spacing:0;font-size:1.02rem}
.fact p{margin-top:.65rem;font-size:.85rem;line-height:1.55;color:var(--on-dark-2)}
:root[lang="ar"] .fact p{font-size:.92rem;line-height:1.75}
.facts-note{margin-top:.95rem;font-size:.8rem;color:var(--on-dark-2)}
@media (max-width:64rem){
  .facts-row{grid-template-columns:minmax(0,1fr)}
  .facts-cap{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.6rem 1.1rem}
  .facts-cap h2 span{display:inline}
  .fact:first-child{padding-inline-start:0;border-inline-start:0}
  .fact:first-child::before{content:none}
}
@media (max-width:46rem){
  .facts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 0}
  .fact:nth-child(odd){padding-inline-start:0;border-inline-start:0}
  .fact:nth-child(odd)::before{content:none}
  .fact:nth-child(even){padding-inline-end:0}
  .facts-cap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:23rem){
  .facts-grid{grid-template-columns:minmax(0,1fr)}
  .fact{padding-inline:0;border-inline-start:0}
  .fact::before{content:none}
}

/* ---------- four statements, an icon in a ring each, under a fine line */
.points{padding-block:0 clamp(1.5rem,4vw,2.5rem)}
.points-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem clamp(1.25rem,3vw,2.5rem)}
.points-row li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.95rem;align-items:center;min-width:0;padding-top:1.2rem;border-top:1px solid var(--hair)}
.points-row p{font-size:.93rem;font-weight:500;line-height:1.55;color:var(--on-dark)}
.points-row li:hover .point-ico::after{opacity:1}
@media (max-width:64rem){.points-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:30rem){.points-row{grid-template-columns:minmax(0,1fr);gap:0}.points-row li{padding-block:.9rem}}

/* ---------- the services, a picture each. A navy veil lies over each picture, deepest where the words are.
   In a grid every card shows everything. On the home page, with a mouse and room to spare (.svc-rail, further down),
   the five stand side by side like the emblem's stripes and the one pointed at opens. */
.svc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.1rem}
/* five cards: three in the first row, two wider ones in the second, so no place is left empty */
.svc{grid-column:span 2;display:flex;min-width:0}
.svc:nth-child(n+4){grid-column:span 3}
.svc-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:2.25rem;width:100%;min-height:19.5rem;padding:1.2rem 1.25rem 1.4rem;border-radius:var(--r-l);
  color:var(--on-dark);text-decoration:none;background:var(--navy-900);box-shadow:0 0 0 1px rgba(156,192,234,.18),0 34px 60px -44px rgba(0,0,0,.85);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.svc-pic{position:absolute;inset:0;z-index:-2;overflow:hidden}
.svc-pic img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.svc-card::before{content:"";position:absolute;inset:0;z-index:-1;transition:opacity .5s;
  background:linear-gradient(180deg,rgba(8,20,31,.5) 0%,rgba(8,20,31,.3) 28%,rgba(8,20,31,.86) 62%,rgba(5,13,22,.97) 100%)}
/* the light under the pointer, and the same light along the card's edge (the script sets --mx and --my) */
.svc-card::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(16rem 16rem at var(--mx,50%) var(--my,0%),rgba(156,192,234,.2),transparent 62%);opacity:0;transition:opacity .35s}
.svc-edge{display:none}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .svc-edge{display:block;position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s;
    background:radial-gradient(14rem 14rem at var(--mx,50%) var(--my,0%),rgba(233,241,250,.95),transparent 62%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
}
.svc-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:3.1rem}
.svc-ico{background:radial-gradient(circle at 32% 24%,rgba(156,192,234,.34),rgba(8,20,31,.7) 68%)}
/* a second veil is tied to the words themselves, so they are covered however tall the card and however long its text */
.svc-body{position:relative;min-width:0}
.svc-body::before{content:"";position:absolute;inset:-3.25rem -1.3rem -1.45rem;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(5,13,22,0),rgba(5,13,22,.66) 3.25rem,rgba(5,13,22,.74))}
.svc-body h3{font-size:1.32rem;color:#fff}
:root[lang="ar"] .svc-body h3{font-size:1.16rem}
.svc-more p{margin-top:.6rem;font-size:.9rem;line-height:1.62;color:var(--on-dark)}
.svc-go{display:inline-flex;align-items:center;gap:.45rem;margin-top:.95rem;font-weight:500;font-size:.9rem;color:var(--steel-200);transition:color .25s}
a.svc-card:hover{transform:translateY(-8px);box-shadow:0 0 0 1px rgba(156,192,234,.4),0 44px 70px -34px rgba(0,0,0,.95)}
a.svc-card:hover::after,a.svc-card:hover .svc-edge,a.svc-card:hover .svc-ico::after{opacity:1}
a.svc-card:hover .svc-pic img{transform:scale(1.07)}
a.svc-card:hover .svc-go{color:#fff}
a.svc-card:hover .svc-go .arrow{transform:translateX(4px)}
[dir="rtl"] a.svc-card:hover .svc-go .arrow{transform:scaleX(-1) translateX(4px)}
@media (max-width:60rem){
  .svc,.svc:nth-child(n+4){grid-column:span 3}
  .svc:last-child{grid-column:span 6}
}
@media (max-width:38rem){
  .svc,.svc:nth-child(n+4),.svc:last-child{grid-column:span 6}
  .svc-card{min-height:16.5rem}
}
@media (hover:hover) and (min-width:75rem){
  .svc-rail{display:flex;gap:.55rem;height:27rem}
  .svc-rail .svc,.svc-rail .svc:nth-child(n+4){flex:1 1 0;transition:flex-grow .8s var(--ease)}
  .svc-rail .svc.is-open{flex-grow:2.9}
  .svc-rail .svc-card{min-height:0;height:100%;padding-inline:1rem}
  /* the picture keeps its size while its panel opens and closes, so the panel is a window drawn across it */
  .svc-rail .svc-pic img{position:absolute;top:0;left:50%;width:30rem;max-width:none;translate:-50% 0}
  /* the name keeps one measure, so it breaks the same way open or closed */
  .svc-rail .svc-body h3{width:8.1rem;font-size:1.2rem;text-wrap:wrap}
  :root[lang="ar"] .svc-rail .svc-body h3{font-size:1.08rem}
  .svc-rail .svc-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
  .svc-rail .svc-more-in{overflow:hidden;min-height:0;width:24.5rem;opacity:0;transition:opacity .3s}
  .svc-rail .svc.is-open .svc-more{grid-template-rows:1fr}
  .svc-rail .svc.is-open .svc-more-in{opacity:1;transition:opacity .5s .28s}
  .svc-rail .tag{opacity:0;transition:opacity .3s}
  .svc-rail .svc.is-open .tag{opacity:1;transition-delay:.3s}
  /* a closed panel is dimmer than the open one */
  .svc-rail .svc-pic img{transition:filter .6s}
  .svc-rail .svc:not(.is-open) .svc-pic img{filter:brightness(.72) saturate(.8)}
  .svc-rail a.svc-card:hover{transform:none}
}
/* under the services: the line for someone who is not sure which one they need */
.svc-ask{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.3rem;margin-top:1.25rem;padding:1rem 1.25rem;border-radius:var(--r-l);border:1px solid var(--rule);color:var(--fg-2)}
.dark .svc-ask{background:linear-gradient(var(--side),rgba(58,106,160,.22),rgba(58,106,160,.04))}
.light .svc-ask{background:#fff}
.svc-ask-ico{width:2.8rem;height:2.8rem}
.light .svc-ask-ico{color:var(--steel-700);background:radial-gradient(circle at 32% 24%,#fff,var(--tint) 70%);box-shadow:inset 0 0 0 1px #b4c5d9}
.svc-ask p{flex:1 1 18rem;min-width:0}
.svc-ask b{font:600 1.08rem/1.4 var(--f-display);color:var(--fg);margin-inline-end:.35rem}
:root[lang="ar"] .svc-ask b{font:700 1.02rem/1.6 var(--f-body)}

/* ---------- the plate that asks for a call, and the card that closes each page */
.cta{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;
  padding:clamp(1.7rem,4vw,2.75rem) clamp(1.35rem,4vw,3.1rem);border-radius:var(--r-l)}
.cta-copy{flex:1 1 24rem;min-width:0}
.cta .stripes{margin-bottom:1rem}
.cta h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
.cta p{margin-top:.8rem;max-width:38rem}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.cta .wm{inset-inline-end:-2rem;top:50%;translate:0 -50%;width:17rem;z-index:-1}
.cta .fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
/* polished steel, brushed along its length; a light crosses it now and then */
.cta-steel{--mark:var(--steel-700);--mark-2:var(--navy);color:var(--navy);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.24) 0 1px,transparent 1px 3px),linear-gradient(100deg,#e3ebf5 0%,#f8fbfe 16%,#cbd9ea 38%,#eef3f9 56%,#b9cbe0 80%,#dde7f2 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(20,38,58,.28),0 44px 70px -40px rgba(0,0,0,.9)}
.cta-steel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-120%);background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.8) 50%,transparent 60%)}
.cta-steel h2,.dark .cta-steel h2{color:var(--navy)}
.cta-steel p{color:#22364d}
.cta-steel .wm{color:var(--navy);opacity:.07}
.cta-steel .call-num,.light .cta-steel .call-num{color:var(--navy)}
.cta-steel .call-num small,.light .cta-steel .call-num small{color:#33475e}
.cta-steel .call-num-ico,.light .cta-steel .call-num-ico{color:var(--navy);background:radial-gradient(circle at 32% 24%,#fff,rgba(255,255,255,.2) 70%);box-shadow:inset 0 0 0 1px rgba(20,38,58,.45)}
/* navy, with ribbons of light flowing across it */
.cta-flow{--mark:#fff;--mark-2:rgba(156,192,234,.62);color:#fff;background:var(--navy-plate);box-shadow:0 0 0 1px rgba(156,192,234,.22),inset 0 1px 0 rgba(233,241,250,.16),0 44px 70px -44px rgba(5,13,22,.9)}
.cta-flow h2,.light .cta-flow h2{color:#fff}
.cta-flow p{color:var(--on-dark)}
.cta-flow .wm{color:#fff;opacity:.05}
.cta-flow .call-num,.light .cta-flow .call-num{color:#fff;padding:.3rem;padding-inline-end:1.1rem;border-radius:999px;background:rgba(5,13,22,.42);box-shadow:inset 0 0 0 1px rgba(156,192,234,.22)}
.cta-flow .call-num small,.light .cta-flow .call-num small{color:var(--on-dark)}
.cta-flow .call-num-ico,.light .cta-flow .call-num-ico{color:#fff;background:radial-gradient(circle at 32% 24%,rgba(156,192,234,.3),rgba(156,192,234,.05) 62%);box-shadow:inset 0 0 0 1px rgba(156,192,234,.42)}
.closing{padding-bottom:clamp(2.75rem,6vw,4.5rem)}

/* ---------- about the firm: the words beside a picture */
.about-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about-copy{min-width:0}
.about-copy h2{font-size:clamp(1.6rem,3vw,2.35rem)}
.about-copy h2 span{display:block}
.about-copy p{margin-top:1rem}
.about-copy h2 + p{margin-top:1.35rem}
.about-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:1.75rem}
.about-figure{position:relative;padding-block:2.1rem 2.4rem}
.about-pic{aspect-ratio:5/4;overflow:hidden;background:var(--navy)}
.about-pic img,.diff-pic img,.intro-pic img,.contact-pic img,.step-pic img{display:block;width:100%;height:100%;object-fit:cover}
/* on the dark page a bright photograph is taken down a little, so it sits in the page instead of glaring out of it */
.dark .about-pic img,.dark .diff-pic img,.dark .step-pic img{filter:brightness(.92) saturate(.94)}
.about-figure .label-box{position:absolute;bottom:0;inset-inline-start:-1.5rem;max-width:calc(100% - 1rem);text-align:start}
/* the badge: a seal in a ring and three lines that light up in turn */
.badge{position:absolute;top:0;inset-inline-end:1.1rem;z-index:2;display:flex;align-items:center;gap:.85rem;padding:.6rem 1.2rem .6rem .7rem;border-radius:var(--r);background:var(--navy-plate);
  box-shadow:0 0 0 1px rgba(156,192,234,.34),0 22px 40px -20px rgba(0,0,0,.8)}
[dir="rtl"] .badge{padding:.6rem .7rem .6rem 1.2rem}
.badge-ico{width:2.7rem;height:2.7rem}
.badge-lines{list-style:none;margin:0;padding:0;display:grid}
.badge-lines li{font:500 .86rem/1.5 var(--f-body);color:#fff;white-space:nowrap}
:root[lang="ar"] .badge-lines li{line-height:1.7}
@media (max-width:56rem){
  .about-grid{grid-template-columns:minmax(0,1fr)}
  .about-figure{max-width:34rem;width:100%;margin-inline:auto}
  .about-figure .label-box{inset-inline-start:.75rem}
}

/* ---------- what makes the firm different: a picture beside five points, set out as ruled lines */
.diff{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(1.75rem,4.5vw,4rem);align-items:start}
.diff-figure{position:relative;aspect-ratio:4/3;margin-bottom:1.9rem}
.diff-pics{position:absolute;inset:0;background:var(--navy)}
.diff-pic{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.diff-pic.is-on{opacity:1}
.diff-figure .label-box{position:absolute;inset-inline:9%;bottom:-1.5rem;z-index:2}
.diff-tabs{list-style:none;margin:0;padding:0;display:grid;align-content:start;border-top:1px solid var(--hair)}
.diff-tab{position:relative;border-bottom:1px solid var(--hair);background:linear-gradient(var(--side),rgba(58,106,160,.36),rgba(58,106,160,.05)) 0 0/0% 100% no-repeat;transition:background-size .55s var(--ease)}
[dir="rtl"] .diff-tab{background-position:100% 0}
.diff-tab.is-on{background-size:100% 100%}
.diff-btn{display:flex;align-items:center;gap:1rem;width:100%;padding:.8rem 1rem;background:none;border:0;color:#fff;font:600 1.14rem/1.35 var(--f-display);text-align:start;cursor:pointer}
:root[lang="ar"] .diff-btn{font:700 1.03rem/1.5 var(--f-body)}
.diff-ico{width:2.7rem;height:2.7rem;transition:transform .45s var(--spring)}
.diff-ico .ico{width:1.3rem;height:1.3rem}
.diff-tab.is-on .diff-ico{transform:scale(1.07)}
.diff-tab.is-on .diff-ico::after{opacity:1}
.diff-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.diff-tab.is-on .diff-more{grid-template-rows:1fr}
.diff-more p{overflow:hidden;min-height:0;padding-inline:4.7rem 1rem;font-size:.93rem;line-height:1.6;color:var(--on-dark);opacity:0;transition:opacity .3s}
.diff-more p::after{content:"";display:block;height:1rem}
.diff-tab.is-on .diff-more p{opacity:1;transition-delay:.12s}
.measuring,.measuring *{transition:none!important}
@media (max-width:56rem){
  .diff{grid-template-columns:minmax(0,1fr)}
  .diff-figure{max-width:36rem;width:100%;margin-inline:auto;margin-bottom:2.4rem}
}
@media (max-width:26rem){.diff-more p{padding-inline-start:1rem}}

/* ---------- steps in order: numbered rings joined by a ribbon. Each step stands a little higher than the one before it,
   so the ribbon rises as it goes; on a narrow screen the rings run down the side instead. */
.steps-wrap{position:relative}
.steps-ribbon{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.steps-ribbon path{fill:none}
/* --p is how much of the ribbon has been drawn: it grows as the steps come up the screen */
.sr-band{stroke:var(--steel-400);stroke-width:3px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,1));filter:drop-shadow(0 0 7px rgba(108,159,216,.7))}
.sr-glint{stroke:#fff;stroke-width:3px;stroke-linecap:round;stroke-dasharray:.05 .95;stroke-dashoffset:.05;opacity:0}
.steps-ribbon .sr-tip{fill:var(--silver);opacity:calc((var(--p,1) - .93) * 16)}
.light .sr-band{stroke:var(--steel-500)}
.light .steps-ribbon .sr-tip{fill:var(--steel-600)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem clamp(1rem,2.6vw,2.25rem)}
.step{min-width:0;padding-top:calc((3 - var(--i,0)) * 1.6rem)}
.step-node{position:relative;display:grid;place-items:center;width:5.9rem;height:5.9rem;border-radius:50%;background:var(--navy-900);
  box-shadow:0 0 0 1px rgba(156,192,234,.6),0 0 0 7px var(--navy-900),0 0 0 8px rgba(156,192,234,.26),0 26px 40px -18px rgba(0,0,0,.85)}
.step-pic{position:absolute;inset:4px;border-radius:50%;overflow:hidden}
.step-pic img{transition:transform .9s var(--ease)}
.step:hover .step-pic img{transform:scale(1.1)}
.step-n{position:absolute;top:-.45rem;inset-inline-end:-.55rem;display:grid;place-items:center;min-width:2.15rem;height:1.6rem;padding-inline:.4rem;border-radius:2px;background:var(--metal);color:var(--navy);
  font:600 .84rem/1 "Lora",Georgia,serif;font-variant-numeric:lining-nums tabular-nums;box-shadow:0 8px 14px -8px rgba(0,0,0,.8)}
/* without pictures the ring holds the number itself */
.steps:not(.with-pics) .step-node{width:4.2rem;height:4.2rem;background:radial-gradient(circle at 32% 24%,#1d3757,var(--navy-900) 70%)}
.steps:not(.with-pics) .step-n{position:static;min-width:0;height:auto;padding:0;background:none;box-shadow:none;color:#fff;font-size:1.25rem}
.step h3{margin-top:1.35rem;font-size:1.22rem;color:var(--fg)}
:root[lang="ar"] .step h3{font-size:1.1rem}
.step p{margin-top:.5rem;font-size:.9rem;line-height:1.65;color:var(--fg-3)}
@media (max-width:52rem){
  .steps{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.25rem;align-items:start;padding-top:0;padding-inline-start:.5rem}
  .step-node{grid-row:1 / span 2;width:4.6rem;height:4.6rem}
  .step h3{margin-top:.5rem}
  .steps:not(.with-pics) .step-node{width:3.6rem;height:3.6rem}
  .steps:not(.with-pics) .step h3{margin-top:.2rem}
}

/* ---------- the firm's work in large type, always moving, between two double rules */
.ticker{position:relative;overflow:hidden;padding-block:clamp(.9rem,2.2vw,1.45rem);border-block:1px solid var(--hair);color:var(--silver)}
.ticker::before,.ticker::after{content:"";position:absolute;inset-inline:0;height:1px;background:var(--hair)}
.ticker::before{top:3px}
.ticker::after{bottom:3px}
.ticker-track,.marquee-track{display:flex;width:max-content;animation:tick 64s linear infinite}
.ticker ul{display:flex;flex:none;list-style:none;margin:0;padding:0}
.ticker li{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.2rem);padding-inline-end:clamp(1.2rem,3vw,2.2rem);font:600 clamp(1.5rem,3.3vw,2.45rem)/1.3 var(--f-display);white-space:nowrap}
.ticker li:nth-child(even){font-style:italic;font-weight:500;color:var(--steel-400)}
:root[lang="ar"] .ticker li{font-weight:700;line-height:1.75;font-size:clamp(1.4rem,3vw,2.2rem)}
:root[lang="ar"] .ticker li:nth-child(even){font-style:normal;font-weight:700}
/* between the words: the five lines */
.ticker li::after{content:"";flex:none;width:1.5rem;height:.875rem;background:
  linear-gradient(#fff 0 0) 0 0/100% 1.5px no-repeat,
  linear-gradient(var(--steel-400) 0 0) 0 25%/100% 1.5px no-repeat,
  linear-gradient(var(--steel-400) 0 0) 0 50%/100% 1.5px no-repeat,
  linear-gradient(var(--steel-400) 0 0) 0 75%/100% 1.5px no-repeat,
  linear-gradient(var(--steel-400) 0 0) 0 100%/100% 1.5px no-repeat}
.ticker:hover .ticker-track,.marquee:hover .marquee-track{animation-play-state:paused}
.marquee:focus-within .marquee-track{animation:none}
@keyframes tick{to{transform:translateX(var(--tick-to,-33.3333%))}}

/* ---------- clients: on a white band their logos pass by in a slow line, each in its own colours, with no frame and no caption;
   hover or focus to stop them. White, because most logos are drawn for a white page and need nothing behind them there. */
.marquee{position:relative;z-index:1;overflow:hidden;padding-block:.75rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* --lap is set from the length of the line, so a longer line passes at the same pace */
.marquee-track{animation-duration:var(--lap,70s)}
/* --k scales every logo together on small screens; --gap is the space between one logo and the next (app.2-blocks.js uses the same figure) */
.clients{--k:1;--gap:3.75rem;display:flex;flex:none;align-items:center;gap:calc(var(--gap)*var(--k));padding:0;padding-inline-end:calc(var(--gap)*var(--k));margin:0;list-style:none}
.clients li{flex:none;display:grid;place-items:center;min-height:calc(4.75rem*var(--k))}
.client{display:grid;place-items:center;color:inherit;text-decoration:none;border-radius:12px;transition:transform .35s var(--ease)}
.client img{display:block;max-width:none;width:calc(var(--w)*var(--k));height:calc(var(--h)*var(--k))}
a.client:hover{transform:scale(1.07)}
a.client:focus-visible{outline-offset:8px}
/* a logo drawn in white keeps the dark plate it needs; a file that already carries its dark ground is its own plate */
.client-plate{display:grid;place-items:center;padding:calc(.95rem*var(--k)) calc(1.15rem*var(--k));border-radius:12px;background:var(--plate)}
.client-plate.own{padding:0;overflow:hidden}
/* until a client's logo file arrives, the client is named in plain type */
.client-text{font:700 calc(1.08rem*var(--k))/1.25 var(--f-body);letter-spacing:.005em;white-space:nowrap;direction:ltr;unicode-bidi:isolate;color:var(--navy)}
@media (max-width:40rem){.clients{--k:.84;--gap:3rem}}

/* ---------- the band that opens every inner page: the title on navy, and beside it a picture standing as four rising bars
   on the band's lower edge, with the seal turning behind it */
.banner{position:relative;isolation:isolate;overflow:hidden;color:#fff;--col-gap:clamp(1.5rem,4vw,4rem);--col-a:.6;background:
  repeating-linear-gradient(90deg,transparent 0 9.5rem,rgba(156,192,234,.05) 9.5rem calc(9.5rem + 1px),transparent calc(9.5rem + 1px) 9.9rem,rgba(156,192,234,.05) 9.9rem calc(9.9rem + 1px),transparent calc(9.9rem + 1px) 19rem),
  radial-gradient(46rem 24rem at var(--glow-x) -10%,rgba(58,106,160,.55),transparent 62%),
  radial-gradient(34rem 20rem at calc(100% - var(--glow-x)) 120%,rgba(39,70,105,.55),transparent 62%),
  linear-gradient(160deg,#0d1e31,#0a1826 55%,#07111c)}
.banner-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--col-gap);align-items:end;padding-top:clamp(2.25rem,5vw,3.25rem)}
.banner-copy{min-width:0;padding-bottom:clamp(2rem,4.5vw,3rem)}
.banner h1{font-size:clamp(2rem,4.6vw,3.3rem);color:#fff}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.9rem;font-size:.84rem;color:var(--on-dark-2)}
.crumbs a{color:var(--steel-200);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.banner-sub{margin-top:.7rem;font:italic 500 clamp(1.05rem,2vw,1.3rem)/1.45 var(--f-display);color:var(--steel-200)}
:root[lang="ar"] .banner-sub{font:500 clamp(1rem,1.9vw,1.2rem)/1.7 var(--f-body)}
.partner-chip{display:inline-block;margin-top:.95rem;padding:.3rem .85rem;border-radius:2px;background:rgba(5,13,22,.4);border:1px solid rgba(156,192,234,.5);color:#fff;font:500 .82rem/1.5 var(--f-body)}
.banner-fig{position:relative;min-width:0;height:clamp(11rem,19vw,15.5rem)}
/* the seal's near edge is where the title's column ends, so its lines never pass behind the words */
.banner-seal{z-index:-1;top:50%;transform:translateY(-40%);
  inset-inline-start:calc(max(0px,(100% - var(--wrap)) / 2) + var(--gutter) + (min(100%,var(--wrap)) - 2 * var(--gutter) - var(--col-gap)) * var(--col-a));
  width:calc((min(100%,var(--wrap)) - 2 * var(--gutter) - var(--col-gap)) * (1 - var(--col-a)) + var(--col-gap) + 5rem)}
.banner .rb-band{stroke-width:8px}
@media (max-width:56rem){
  .banner-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .banner-copy{padding-bottom:1.75rem}
  .banner-fig{height:clamp(8rem,30vw,12rem)}
  /* in one column the seal stands behind the foot of the picture, below the title */
  .banner-seal{top:auto;bottom:-11rem;transform:none;inset-inline-start:auto;inset-inline-end:-6rem;width:20rem}
}

/* the sentence a page opens with, set large */
.intro-lead{max-width:52rem;margin:0 0 clamp(1.9rem,3.6vw,2.75rem);font:500 clamp(1.12rem,2vw,1.38rem)/1.6 var(--f-display);color:var(--ink)}
:root[lang="ar"] .intro-lead{font:500 clamp(1.08rem,1.8vw,1.22rem)/1.95 var(--f-body)}

/* ---------- what a page is about: the words on one side, a picture with its label on the other */
.intro-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(1.75rem,5vw,4.25rem);align-items:center}
.intro-copy{min-width:0}
.intro-copy h2{font-size:clamp(1.7rem,3.3vw,2.55rem)}
.intro-copy h2.stack span{display:block}
.intro-copy p{margin-top:1rem}
.intro-copy h2 + p{margin-top:1.35rem}
.intro-copy > .btn{margin-top:1.7rem}
.intro-figure{position:relative;margin:0;padding-bottom:1.7rem}
.intro-pic{aspect-ratio:4/3;overflow:hidden;background:var(--navy)}
.intro-figure .label-box{position:absolute;inset-inline:9%;bottom:0}
/* on a pale page the label is the navy plate, so it stands clear of the ground */
.light .label-box{background:var(--navy-plate);color:#fff;box-shadow:0 22px 38px -20px rgba(5,13,22,.7),inset 0 1px 0 rgba(233,241,250,.18)}
.intro-figure .badge{top:-1.5rem}
.intro-figure.with-badge{margin-top:1.5rem}
@media (max-width:56rem){
  .intro-grid{grid-template-columns:minmax(0,1fr)}
  .intro-figure{max-width:36rem;width:100%;margin-inline:auto}
}

/* ---------- what is included: a ruled, numbered list; the chosen line turns navy and points at the panel that opens beside it */
.vtabs{display:grid;grid-template-columns:minmax(0,23rem) minmax(0,1fr);gap:0 1.25rem;align-items:start;max-width:66rem}
.vtab{grid-column:1;position:relative;display:flex;align-items:baseline;gap:.8rem;width:100%;padding:.95rem 1.6rem .95rem .9rem;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);
  font:500 .96rem/1.4 var(--f-body);text-align:start;cursor:pointer;transition:color .3s,background-color .3s}
[dir="rtl"] .vtab{padding:.95rem .9rem .95rem 1.6rem}
.vtab:first-of-type{border-top:1px solid var(--line)}
.vtab:hover{background:var(--paper)}
.vtab:focus-visible{outline-offset:-3px}
.vtab-n{flex:none;font:500 1.02rem/1 "Lora",Georgia,serif;font-variant-numeric:lining-nums tabular-nums;color:var(--steel-600)}
.vtab.is-on{background:var(--navy-plate);color:#fff;border-color:transparent;clip-path:polygon(0 0,calc(100% - .85rem) 0,100% 50%,calc(100% - .85rem) 100%,0 100%)}
[dir="rtl"] .vtab.is-on{clip-path:polygon(100% 0,.85rem 0,0 50%,.85rem 100%,100% 100%)}
.vtab.is-on .vtab-n{color:var(--steel-300)}
.vtab.is-on:focus-visible{outline-color:#fff}
.vpanel{grid-column:2;grid-row:1 / span var(--n,6);align-self:stretch;position:relative;isolation:isolate;overflow:hidden;min-width:0;padding:clamp(1.5rem,3.2vw,2.5rem);border-radius:var(--r-l);color:var(--on-dark);
  background:repeating-linear-gradient(90deg,transparent 0 6rem,rgba(156,192,234,.06) 6rem calc(6rem + 1px),transparent calc(6rem + 1px) 6.4rem,rgba(156,192,234,.06) 6.4rem calc(6.4rem + 1px),transparent calc(6.4rem + 1px) 12rem),
    radial-gradient(26rem 16rem at var(--glow-x) 0,rgba(58,106,160,.55),transparent 64%),var(--navy-plate);
  box-shadow:0 44px 64px -40px rgba(5,13,22,.85)}
.vpanel[hidden]{display:none}
.vpanel-ico{width:3.6rem;height:3.6rem}
.vpanel-ico .ico{width:1.7rem;height:1.7rem}
.vpanel-n{margin-top:1.3rem;font:500 .78rem/1.3 var(--f-body);letter-spacing:.16em;color:var(--steel-300);direction:ltr;unicode-bidi:isolate;text-align:start}
[dir="rtl"] .vpanel-n{text-align:end}
.vpanel h3{margin-top:.45rem;font-size:clamp(1.3rem,2.4vw,1.65rem);color:#fff}
.vpanel h3 + p{margin-top:.8rem;max-width:34rem;font-size:1rem}
.vpanel .textlink{margin-top:1.5rem}
/* the item's number, very large and very faint, in the corner of the panel */
.vpanel::after{content:attr(data-n);position:absolute;inset-inline-end:1.1rem;bottom:-1.9rem;z-index:-1;font:600 9.5rem/1 "Lora",Georgia,serif;font-variant-numeric:lining-nums tabular-nums;color:rgba(233,241,250,.06)}
@media (max-width:50rem){
  /* on a phone the panel opens under its own line */
  .vtabs{grid-template-columns:minmax(0,1fr)}
  .vtab,.vpanel{grid-column:1;grid-row:auto}
  .vtab.is-on,[dir="rtl"] .vtab.is-on{clip-path:none}
  .vpanel{margin-block:.45rem .7rem}
}

/* ---------- what you get, beside the questions people ask: both as ruled lines */
.df-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,4.25rem);align-items:start}
.df-grid .head{margin-bottom:1.5rem}
.checks{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.checks li{display:flex;gap:.9rem;align-items:flex-start;padding:.95rem .25rem;border-bottom:1px solid var(--line);color:var(--ink);font-weight:500;line-height:1.55}
.checks svg{flex:none;width:1.5rem;height:1.5rem;margin-top:.05rem;padding:.3rem;border-radius:50%;background:var(--steel-600);color:#fff}
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);transition:background-color .3s}
.faq details[open]{background:var(--paper)}
.faq summary{display:flex;align-items:flex-start;gap:.9rem;padding:1rem .6rem;cursor:pointer;list-style:none;font:500 .97rem/1.5 var(--f-body);color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--steel-600)}
.faq summary:focus-visible{outline-offset:-3px}
.faq-plus{position:relative;flex:none;width:.95rem;height:.95rem;margin-top:.3rem}
:root[lang="ar"] .faq-plus{margin-top:.5rem}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;inset-inline:0;top:50%;height:2px;margin-top:-1px;background:var(--steel-600);transition:transform .3s var(--ease)}
.faq-plus::after{transform:rotate(90deg)}
.faq details[open] .faq-plus::after{transform:rotate(0)}
.faq details p{padding:0 .6rem 1.1rem;padding-inline-start:2.45rem;font-size:.93rem;color:var(--body)}
@media (max-width:56rem){.df-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- the other services, at the foot of a service page */
.others-sec{padding-block:clamp(2.5rem,5vw,3.75rem) clamp(1.25rem,3vw,2rem)}
.others{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.others li{display:flex;min-width:0}
.other{display:flex;align-items:center;gap:.8rem;width:100%;padding:1rem;border:1px solid var(--line);border-radius:var(--r-l);background:#fff;color:var(--ink);text-decoration:none;
  transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.other:hover{border-color:var(--steel-500);box-shadow:0 22px 34px -24px rgba(5,13,22,.55);transform:translateY(-3px)}
.other-text{flex:1;min-width:0}
.other-text b{font-size:1.02rem}
.other-text small{font-size:.78rem}
.other .arrow{color:var(--steel-600)}
.other:hover .arrow{transform:translateX(4px)}
[dir="rtl"] .other:hover .arrow{transform:scaleX(-1) translateX(4px)}
@media (max-width:64rem){.others{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:34rem){.others{grid-template-columns:minmax(0,1fr)}}

/* ---------- about: vision and mission on a dark band, each under a double rule */
.vm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,5vw,4.5rem)}
.vm-item{position:relative;min-width:0;padding-top:1.7rem;border-top:1px solid var(--hair)}
.vm-item::before{content:"";position:absolute;inset-inline:0;top:3px;height:1px;background:var(--hair)}
.vm-ico{width:3.6rem;height:3.6rem}
.vm-ico .ico{width:1.75rem;height:1.75rem;stroke-width:1.4}
.vm-item:hover .vm-ico::after{opacity:1}
.vm-item h2{margin-top:1.15rem;font-size:clamp(1.5rem,2.7vw,2.05rem)}
.vm-item p{margin-top:.75rem}
@media (max-width:44rem){.vm{grid-template-columns:minmax(0,1fr)}}

/* why choose us: five plates, three then two; each carries the five lines in its corner */
.why-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1.1rem}
.why-card{grid-column:span 2;position:relative;isolation:isolate;overflow:hidden;min-width:0;padding:1.6rem 1.5rem 1.7rem;border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.why-card:nth-child(n+4){grid-column:span 3}
.why-card::before{content:"";position:absolute;top:1.75rem;inset-inline-end:1.5rem;width:1.5rem;height:.875rem;opacity:.75;background:
  linear-gradient(var(--steel-500) 0 0) 0 0/100% 1.5px no-repeat,
  linear-gradient(var(--navy) 0 0) 0 25%/100% 1.5px no-repeat,
  linear-gradient(var(--navy) 0 0) 0 50%/100% 1.5px no-repeat,
  linear-gradient(var(--navy) 0 0) 0 75%/100% 1.5px no-repeat,
  linear-gradient(var(--navy) 0 0) 0 100%/100% 1.5px no-repeat}
/* the light under the pointer (the script sets --mx and --my) */
.why-card::after,.cinfo-card::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(15rem 15rem at var(--mx,50%) var(--my,0%),rgba(108,159,216,.22),transparent 62%);opacity:0;transition:opacity .35s}
.why-card:hover,.cinfo-card:hover{transform:translateY(-6px);border-color:#a9bdd4;box-shadow:0 30px 48px -32px rgba(5,13,22,.5)}
.why-card:hover::after,.cinfo-card:hover::after,.why-card:hover .why-ico::after,.cinfo-card:hover .cinfo-ico::after{opacity:1}
.why-ico{width:3.2rem;height:3.2rem}
.why-card h3{margin-top:1.1rem;font-size:1.22rem}
.why-card p{margin-top:.5rem;font-size:.93rem;color:var(--muted)}
@media (max-width:56rem){
  .why-card,.why-card:nth-child(n+4){grid-column:span 3}
  .why-card:last-child{grid-column:span 6}
}
@media (max-width:34rem){.why-card,.why-card:nth-child(n+4),.why-card:last-child{grid-column:span 6}}

/* team profiles are still to come: they keep a marked place on the page */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.slot{min-width:0;padding:1.5rem 1.25rem;border:1px dashed rgba(197,219,243,.5);border-radius:var(--r-l);text-align:center;color:var(--on-dark-2);
  background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(156,192,234,.06) 10px 20px)}
.slot .avatar{display:grid;place-items:center;width:4.4rem;height:4.4rem;margin:0 auto 1rem;border-radius:50%;border:1px dashed rgba(197,219,243,.6);background:rgba(233,241,250,.05);color:var(--steel-200)}
.slot b{display:block;font:600 1.06rem/1.4 var(--f-display);color:#fff}
:root[lang="ar"] .slot b{font:700 .98rem/1.5 var(--f-body)}
.slot span{font-size:.88rem}
/* ---------- the office: four pictures standing as four bars in two pairs, their tops stepping up toward the far side, like the
   picture of an opening. They carry no captions. At rest each picture is toned in the logo's navy and steel, so four pictures
   taken in four different lights read as one set; under the pointer a picture comes back to its own colours.
   --i is the bar's place (0 to 3); --s is the slant across one bar, and each bar starts one slant higher than the one before. */
.shots{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) .125rem repeat(2,minmax(0,1fr));column-gap:.5rem;max-width:64rem;margin-inline:auto;--s:4%}
/* the bars stand on a fine line, as columns stand on the axis of a chart */
.shots::after{content:"";position:absolute;inset-inline:-3%;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(var(--side),transparent,rgba(156,192,234,.75) 12%,rgba(156,192,234,.75) 88%,transparent)}
.light .shots::after{background:linear-gradient(var(--side),transparent,rgba(58,106,160,.55) 12%,rgba(58,106,160,.55) 88%,transparent)}
.shot{position:relative;isolation:isolate;overflow:hidden;min-width:0;aspect-ratio:4/5;background:var(--navy);
  --t1:calc((3 - var(--i,0)) * var(--s));clip-path:polygon(0 calc(var(--t1) + var(--s)),100% var(--t1),100% 100%,0 100%);
  transition:transform .45s var(--ease)}
[dir="rtl"] .shot{clip-path:polygon(0 var(--t1),100% calc(var(--t1) + var(--s)),100% 100%,0 100%)}
.shot:nth-child(3){grid-column:4}
.shot img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.94) brightness(1.04);transition:filter .6s ease,transform .9s var(--ease)}
/* The tone: the picture is taken down to greys; one layer lifts its darks and a layer of the logo's steel is laid over the whole,
   so the darks come out as the logo's navy (the first colour times the second) and the lights as pale steel.
   Only where the browser can blend layers: without that the picture simply stays in greys. */
@supports (mix-blend-mode:multiply){
  .shot::before,.shot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .6s ease}
  .shot::before{background:#2b3d4b;mix-blend-mode:lighten}
  .shot::after{background:var(--steel-300);mix-blend-mode:multiply}
}
.shot:hover{transform:translateY(-6px)}
.shot:hover img{filter:none;transform:scale(1.05)}
.shot:hover::before,.shot:hover::after{opacity:0}
.company-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:clamp(1.75rem,5vw,4.25rem);align-items:center;margin-top:clamp(2.75rem,6vw,4.25rem)}
/* where the firm's details open a section of their own, nothing stands above them */
.wrap > .company-grid:first-child{margin-top:0}
.company-grid .head{margin-bottom:1.25rem}
/* the firm's details as a ruled list, closed by a double rule as a column of figures is */
.company{position:relative;display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);border-top:1px solid var(--line);padding-bottom:3px;border-bottom:1px solid var(--line)}
.company dt,.company dd{padding-block:.85rem;border-bottom:1px solid var(--line);min-width:0}
.company dt{color:var(--muted);font-size:.9rem}
.company dd{color:var(--ink);font-weight:500}
.logo-card{display:grid;place-items:center;padding:clamp(1.75rem,3.5vw,2.5rem);border-radius:var(--r-l);background:linear-gradient(var(--lit),#fff,#e9eff6);border:1px solid var(--line);box-shadow:0 34px 54px -38px rgba(5,13,22,.55)}
.logo-card svg{display:block;width:min(100%,13.5rem);height:auto}
@media (max-width:60rem){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:52rem){
  .company-grid{grid-template-columns:minmax(0,1fr)}
  .logo-card{width:100%;max-width:20rem}
}
@media (max-width:46rem){
  /* on a narrow screen: two bars over two, each pair stepping up on its own */
  .shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;max-width:30rem}
  .shot:nth-child(3){grid-column:auto}
  .shot:nth-child(odd){--t1:var(--s)}
  .shot:nth-child(even){--t1:0%}
}
@media (max-width:34rem){
  .team{gap:.7rem}
  .slot{padding:1.1rem .8rem}
  .company{grid-template-columns:minmax(0,1fr)}
  .company dt{border-bottom:0;padding-bottom:0}
  .company dd{padding-top:.15rem}
}

/* ---------- contact */
.cinfo{list-style:none;margin:0 0 clamp(2rem,4vw,3rem);padding:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,1.25fr) minmax(0,.7fr);gap:1rem}
.cinfo-card{position:relative;isolation:isolate;overflow:hidden;display:grid;justify-items:start;align-content:start;gap:.3rem;min-width:0;padding:1.35rem 1.25rem;border:1px solid var(--line);border-radius:var(--r-l);background:#fff;box-shadow:0 30px 44px -38px rgba(5,13,22,.5);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.cinfo-ico{width:3rem;height:3rem;margin-bottom:.55rem}
.cinfo-ico .ico{width:1.25rem;height:1.25rem}
.cinfo .label{font:500 .72rem/1.4 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
:root[lang="ar"] .cinfo .label{letter-spacing:0;font-size:.86rem}
.cinfo .value{max-width:100%;font-weight:500;font-size:.95rem;color:var(--ink);overflow-wrap:anywhere;user-select:all}
.cinfo .btn{margin-top:.6rem}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.form{min-width:0;padding:clamp(1.4rem,3vw,2.2rem);border:1px solid var(--line);border-radius:var(--r-l);background:#fff;box-shadow:0 34px 54px -42px rgba(5,13,22,.55);scroll-margin-top:calc(env(safe-area-inset-top,0px) + 6rem)}
.form h2{font-size:1.7rem}
.form .hint{margin:.8rem 0 1.2rem;color:var(--muted);font-size:.88rem}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.field{display:grid;align-content:start;gap:.35rem;min-width:0}
.field.full{grid-column:1/-1}
.field label{font:500 .88rem/1.4 var(--f-body);color:var(--ink)}
.field label small{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;font:inherit;padding:.7rem .85rem;border:1px solid #aebccd;border-radius:var(--r);background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--steel-600);box-shadow:0 0 0 3px rgba(74,128,189,.4)}
.field [aria-invalid="true"]{border-color:var(--err)}
.field .err{color:var(--err);font-size:.84rem}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.25rem}
.form-foot p{flex:1 1 14rem;min-width:0;color:var(--muted);font-size:.84rem}
.form-alert{margin-bottom:1rem;color:var(--err);font-weight:500;font-size:.9rem}
/* the field no person is meant to see or reach (live site) is marked .hp and hidden the way .sr-only hides things: in its place, clipped to nothing */
/* while a request is on its way the button waits */
.btn[aria-busy="true"]{cursor:progress;opacity:.75}
.btn[aria-busy="true"]:hover{transform:none}
.btn[aria-busy="true"]::before{transform:translateX(104%) skewX(-19deg)}
[dir="rtl"] .btn[aria-busy="true"]::before{transform:translateX(-104%) skewX(19deg)}
.btn[aria-busy="true"]:hover{color:#fff}
.result h2{display:flex;gap:.6rem;align-items:center}
.result h2 svg{flex:none;color:var(--steel-600)}
.result > p{margin:.6rem 0 1rem;color:var(--muted)}
.request{margin:0 0 1rem;padding:1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font:inherit;font-size:.93rem;white-space:pre-wrap;overflow-wrap:anywhere;user-select:all;text-align:start}
.result-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.sendto{margin-bottom:1rem;font-size:.95rem;color:var(--ink)}
.sendto b{user-select:all}
/* beside the form: a picture, then the firm's line on the navy plate */
.contact-side{min-width:0;border-radius:var(--r-l);overflow:hidden;color:var(--on-dark);background:var(--navy-plate);box-shadow:0 34px 54px -38px rgba(5,13,22,.8)}
.contact-pic{aspect-ratio:16/10;overflow:hidden}
.contact-side-copy{position:relative;isolation:isolate;overflow:hidden;padding:1.5rem 1.5rem 1.7rem}
.contact-side-copy .wm{inset-inline-end:-2.5rem;bottom:-2.5rem;width:11rem;color:#fff;opacity:.06;z-index:-1}
.contact-side h2{margin-top:.9rem;font-size:1.45rem;color:#fff}
.contact-side p{margin-top:.8rem;font-size:.93rem}
.contact-side .lic{display:flex;gap:.5rem;align-items:flex-start;font-size:.86rem;color:var(--steel-200)}
.contact-side .lic svg{flex:none;width:1.05rem;height:1.05rem;margin-top:.28rem;color:var(--steel-300)}
@media (max-width:64rem){.cinfo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:56rem){.contact-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:34rem){.cinfo,.fields{grid-template-columns:minmax(0,1fr)}}

/* ---------- the monthly report example */
.report-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.report-grid .head{margin-bottom:0}
.report-grid .head h2 span{display:block}
.report-grid .head .btn{margin-top:1.7rem}
.report-grid .stage{width:100%;max-width:34rem;justify-self:end}
.stage{position:relative;min-width:0;padding:2.1rem .5rem 2rem}
.floaty{position:relative;animation:float 7s ease-in-out infinite}
.chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:.55rem;max-width:calc(100% - .5rem);padding:.55rem .95rem;border-radius:var(--r);
  background:var(--metal-blue);border:1px solid rgba(233,241,250,.34);color:#fff;
  font:500 .86rem/1.3 var(--f-body);box-shadow:0 18px 32px -14px rgba(5,13,22,.9),inset 0 1px 0 rgba(255,255,255,.22);animation:bob 5s ease-in-out infinite}
.chip svg{flex:none;color:#fff}
.chip-a{bottom:calc(100% - .5rem);inset-inline-start:-.9rem;animation-delay:-1.2s}
.chip-b{top:calc(100% - .5rem);inset-inline-end:-.9rem;animation-delay:-3.4s}
@media (max-width:56rem){
  .report-grid{grid-template-columns:minmax(0,1fr)}
  .report-grid .stage{justify-self:center}
}

/* The figure is a page from the monthly report a client receives: letterhead, three figures, one chart, advice. */
.report{container-type:inline-size;position:relative;z-index:1;background:#fff;color:var(--ink);border-radius:var(--r-l);overflow:hidden;min-width:0;
  box-shadow:0 0 0 1px rgba(233,241,250,.5),0 44px 70px -40px rgba(0,0,0,.85)}
.report > *{--pad:1.25rem}
.report-head{display:flex;align-items:center;justify-content:space-between;gap:.4rem 1rem;flex-wrap:wrap;padding:.8rem var(--pad);background:var(--navy);color:#fff;--logo-accent:#8fb0d6}
.report-brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.report-brand svg{width:2.6rem;height:2.6rem;flex:none}
.report-title{display:block;font:600 1.18rem/1.3 var(--f-display)}
:root[lang="ar"] .report-title{font:700 1.1rem/1.5 var(--f-body)}
.report-by{display:block;font-size:.8rem;color:#c9d5e3}
.report-tag,.report-label,.report-kpis dt{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
:root[lang="ar"] .report-tag,:root[lang="ar"] .report-label,:root[lang="ar"] .report-kpis dt{letter-spacing:0;font-size:.84rem}
.report-tag{color:#c9d5e3}
.report-label,.report-kpis dt{color:var(--muted);font-weight:500}

.report-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.report-kpis > div{display:grid;gap:.1rem;align-content:start;padding:.85rem var(--pad);min-width:0}
.report-kpis > div + div{border-inline-start:1px solid var(--line)}
.rk-val{font:600 1.4rem/1.3 "Lora",var(--f-body);color:var(--navy);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.rk-val small{font-size:.6em;font-weight:500;color:var(--muted)}
.rk-note{font-size:.78rem;line-height:1.4;color:var(--muted)}
.rk-up{color:var(--steel-600);font-weight:500}
.rk-up svg{display:inline-block;width:.75rem;height:.75rem;vertical-align:-.08em;margin-inline-end:.25rem}

.report-chart{position:relative;padding:.95rem var(--pad) .6rem}
.report-chart-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem 1rem;margin-bottom:.45rem}
.report-h{font-weight:500;font-size:.93rem;color:var(--ink)}
.report-sub{font-weight:400;font-size:.8rem;color:var(--muted);margin-inline-start:.35rem}
.report-legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .9rem;font-size:.8rem;color:var(--muted)}
.report-legend li{display:inline-flex;align-items:center;gap:.4rem}
.report-legend i,.report-tip i{flex:none;width:.6rem;height:.6rem;border-radius:2px;background:var(--chart-profit)}
.report-legend .k-cost,.report-tip .k-cost{background:var(--chart-cost)}
.report-tip .k-none{background:none}
.report-plot{position:relative;height:10.5rem;direction:ltr;cursor:default;touch-action:pan-y;border-radius:2px}
.report-plot svg{display:block;width:100%;height:100%}
.report-plot text{font-family:var(--f-body)}
.rp-grid{stroke:var(--tint);stroke-width:1;shape-rendering:crispEdges}
.rp-base{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.rp-tick{font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
:root[lang="ar"] .rp-tick{font-size:12px}
.rp-cost{fill:var(--chart-cost)}
.rp-profit{fill:var(--chart-profit)}
.rp-hl{fill:var(--tint)}
.rp-val{font-size:11.5px;font-weight:500;fill:var(--ink);font-variant-numeric:tabular-nums}
.report-tip{position:absolute;z-index:2;pointer-events:none;min-width:10rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:.45rem .65rem .5rem;font-size:.8rem;line-height:1.5;color:var(--ink);box-shadow:0 12px 24px -14px rgba(6,15,24,.55)}
.report-tip b{display:block;font-weight:700}
.report-tip .row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.report-tip .row span{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted)}
.report-tip .row strong{font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.report-tip .total{border-top:1px solid var(--ink);margin-top:.2rem;padding-top:.15rem}
.report-tip .total span{color:var(--ink);font-weight:500}
.report-tip .total strong{font-weight:700}

.report-advice{padding:.8rem var(--pad) 1rem;border-top:1px solid var(--line);background:#f6f9fc}
.report-label{margin-bottom:.4rem}
.report-advice ul{list-style:none;padding:0;display:grid;gap:.3rem}
.report-advice li{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem;line-height:1.5}
.report-advice .arrow{flex:none;width:.95rem;height:.95rem;margin-top:.22rem;color:var(--steel-600)}
:root[lang="ar"] .report-advice .arrow{margin-top:.4rem}

@container (max-width:27rem){
  .report > *{--pad:1rem}
  .report-kpis{grid-template-columns:minmax(0,1fr)}
  .report-kpis > div{grid-template-columns:minmax(0,1fr) auto;gap:0 1rem;align-items:center;padding-block:.6rem}
  .report-kpis > div + div{border-inline-start:0;border-top:1px solid var(--tint)}
  .report-kpis dt{grid-column:1;grid-row:1}
  .rk-note{grid-column:1;grid-row:2}
  .rk-val{grid-column:2;grid-row:1 / span 2}
}

/* ---------- motion. Content is complete at rest; these rules only add the way it arrives and the few things that keep moving.
   Everything travels the way the emblem's ribbon does: upward, toward the far side. */
@keyframes rise{from{opacity:0;transform:translateY(44px) scale(.985)}}
@keyframes fade-in{from{opacity:0}}
@keyframes zoom-in{from{opacity:0;transform:scale(.92)}}
@keyframes slide-start{from{opacity:0;transform:translateX(-60px)}}
@keyframes slide-end{from{opacity:0;transform:translateX(60px)}}
@keyframes pop{from{opacity:0;scale:.5}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes aurora{from{transform:translate3d(-6%,-4%,0) scale(1)}to{transform:translate3d(22%,14%,0) scale(1.25)}}
@keyframes kb{from{scale:1.09}to{scale:1}}
@keyframes card-in{from{opacity:0;transform:translateY(42px) scale(.96)}}
@keyframes bar-grow{from{transform:scaleY(0)}}
@keyframes label-in{from{opacity:0;transform:translateY(8px)}}
@keyframes panel-in{from{opacity:0;transform:translateY(12px)}}
/* each line of the badge takes its turn in white; the others wait in grey-blue */
@keyframes badge{0%,30%{color:#fff}37%,100%{color:#8ea3ba}}
/* the five lines are drawn one after another */
@keyframes stripes-in{
  0%{background-size:0 2px,0 2px,0 2px,0 2px,0 2px}
  28%{background-size:100% 2px,0 2px,0 2px,0 2px,0 2px}
  46%{background-size:100% 2px,100% 2px,0 2px,0 2px,0 2px}
  64%{background-size:100% 2px,100% 2px,100% 2px,0 2px,0 2px}
  82%{background-size:100% 2px,100% 2px,100% 2px,100% 2px,0 2px}}
/* words come up from behind the line they stand on */
@keyframes line-up{from{opacity:0;transform:translateY(100%);clip-path:inset(-10% -6% 100% -6%)}to{clip-path:inset(-10% -6% -16% -6%)}}
/* the four bars of a picture grow from its foot, one after another */
@keyframes bar1{from{--t1:100%}}
@keyframes bar2{from{--t2:100%}}
@keyframes bar3{from{--t3:100%}}
@keyframes bar4{from{--t4:100%}}
/* a ribbon is uncovered from where it starts to its tip, and then a gleam passes along it */
@keyframes draw{from{clip-path:inset(-12% 112% -12% -12%)}to{clip-path:inset(-12% -12% -12% -12%)}}
@keyframes glint-run{0%{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:0}8%{opacity:1}40%{opacity:1}48%,100%{-webkit-mask-position:0 100%;mask-position:0 100%;opacity:0}}
@keyframes sr-run{to{stroke-dashoffset:-.95}}
@keyframes turn{to{rotate:360deg}}
@keyframes turn-back{to{rotate:-360deg}}
/* light crosses polished steel, then the steel rests */
@keyframes sheen{0%,70%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@keyframes shimmer{from{background-position:100% 0}}
@keyframes unveil{from{transform:translateY(0)}}

/* scroll reveals: an element animates in as it reaches the screen, and again each time it is scrolled down to */
[data-reveal].in{animation:rise .9s var(--ease) backwards;animation-delay:var(--d,0s)}
[data-reveal="fade"].in{animation-name:fade-in}
[data-reveal="zoom"].in{animation-name:zoom-in}
[data-reveal="start"].in{animation-name:slide-start}
[dir="rtl"] [data-reveal="start"].in{animation-name:slide-end}
[data-reveal="end"].in{animation-name:slide-end}
[dir="rtl"] [data-reveal="end"].in{animation-name:slide-start}
[data-reveal].in .stripes,.footer-stripes.in{animation:stripes-in 1s var(--ease) calc(var(--d,0s) + .25s) backwards}
.footer-stripes.in{animation-duration:1.5s}
/* the second tone of a heading arrives with a light crossing it; icons land with a small bounce */
[data-reveal].in .hl{animation:shimmer 1.5s ease calc(var(--d,0s) + .3s) backwards}
[data-reveal].in .point-ico,[data-reveal].in .svc-ico,[data-reveal].in.why-card .why-ico,[data-reveal].in.cinfo-card .cinfo-ico,[data-reveal].in .step-node,[data-reveal].in .vm-ico{animation:pop .6s var(--spring) calc(var(--d,0s) + .25s) backwards}
/* pictures are drawn a little larger than their frames, so they can slide as the page scrolls (see FLOATS in app.6-mount.js) */
.motion .about-pic img,.motion .intro-pic img,.motion .contact-pic img{scale:1.12}
main.enter{animation:fade-in .45s ease backwards}

/* when a page opens, four bars lift away from it, one after another */
.unveil i{animation:unveil .85s var(--sweep) backwards}
.unveil i:nth-child(2){animation-delay:.07s}
.unveil i:nth-child(3){animation-delay:.14s}
.unveil i:nth-child(4){animation-delay:.21s}

.motion .backdrop::before{animation:aurora 36s ease-in-out infinite alternate}
/* the seal turns slowly; the light on it goes round the other way */
.motion .seal canvas{animation:turn 160s linear infinite}
.motion .seal-sheen{animation:turn-back 21s linear infinite}
/* the light that runs round a ring is always turning; it shows when its card is pointed at */
.motion .point-ico::after,.motion .svc-ico::after,.motion .diff-ico::after,.motion .why-ico::after,.motion .cinfo-ico::after,.motion .vm-ico::after,.motion .other-ico::after,.motion .mega-ico::after{animation:turn 2.8s linear infinite}
/* light crosses the steel buttons and the steel plate now and then */
.motion .btn-primary::after{animation:sheen 6.5s ease-in-out infinite}
.motion .cta-steel::after{animation:sheen 8.5s ease-in-out 1.2s infinite}

/* opening slides: the words come up line by line, the bars of the picture grow, the ribbon is drawn across them */
.motion .slide.is-on .s-anim{animation:line-up .95s var(--ease) backwards;animation-delay:calc(var(--i) * .1s + .3s)}
.motion .slide.is-on .hl.s-anim{animation:line-up .95s var(--ease) calc(var(--i) * .1s + .3s) backwards,shimmer 1.7s ease .9s backwards}
.motion .slide.is-on .media img,.motion .banner.in .media img{animation:kb 11s ease-out both}
.motion.props .slide.is-on .bars,.motion.props .banner.in .bars,.motion.props [data-reveal].in .bars{
  animation:bar1 1.05s var(--ease) calc(var(--d,0s) + .2s) backwards,bar2 1.05s var(--ease) calc(var(--d,0s) + .32s) backwards,bar3 1.05s var(--ease) calc(var(--d,0s) + .44s) backwards,bar4 1.05s var(--ease) calc(var(--d,0s) + .56s) backwards}
/* the four pictures of the office grow from their foot, one bar after another */
.motion.props .shot[data-reveal].in{animation:bar1 1.05s var(--ease) calc(var(--d,0s) + .15s) backwards}
.motion .slide.is-on .fig-ribbon,.motion .banner.in .fig-ribbon{animation:draw 1.6s var(--sweep) .8s backwards}
.motion .slide.is-on .fig-glint,.motion .banner.in .fig-glint{animation:glint-run 6.5s ease-in-out 2.8s infinite}
.banner.in .crumbs{animation:fade-in .6s ease .25s backwards}
.banner.in h1{animation:line-up .95s var(--ease) .3s backwards}
.banner.in .banner-sub,.banner.in .partner-chip{animation:rise .8s var(--ease) .5s backwards}
.motion .diff-pic.is-on img{animation:kb 7s ease-out both}
.motion .label-box.swap{animation:label-in .45s var(--ease)}
.motion .vpanel.is-on{animation:panel-in .45s var(--ease)}
.motion .badge-lines li{color:#8ea3ba;animation:badge 6s linear infinite;animation-delay:calc(var(--i) * 2s)}
.faq details[open] p{animation:rise .4s var(--ease) backwards}
/* the light that runs along the ribbon between the steps, once the ribbon is drawn */
.motion .sr-glint{opacity:calc((var(--p,1) - .9) * 9);animation:sr-run 4.6s linear infinite}

/* the report example: the card arrives, its columns grow, the advice slides in */
.stage.in .report{animation:card-in 1s var(--ease) .15s backwards}
.stage.in .chip-a{animation:pop .55s var(--spring) 1.05s backwards,bob 5s ease-in-out -1.2s infinite}
.stage.in .chip-b{animation:pop .55s var(--spring) 1.35s backwards,bob 5s ease-in-out -3.4s infinite}
.stage.in .grow .rp-col{transform-box:fill-box;transform-origin:50% 100%;animation:bar-grow .75s var(--ease) backwards;animation-delay:calc(var(--i) * 50ms + .6s)}
.stage.in .grow .rp-val{animation:fade-in .5s ease 1.5s backwards}
.stage.in .report-advice li{animation:slide-start .6s var(--ease) backwards;animation-delay:calc(var(--i) * 140ms + 1.5s)}
[dir="rtl"] .stage.in .report-advice li{animation-name:slide-end}

/* "Pause motion" in the footer holds every loop where it is and stops things sliding about */
.still .ticker-track,.still .marquee-track,.still .floaty,.still .chip{animation-play-state:paused}
.still .slide,.still .diff-pic,.still .svc,.still .svc-more,.still .svc-more-in{transition:none}

/* people who ask for less motion get the finished page: nothing loops, nothing slides */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .ticker-track,.marquee-track{width:auto;flex-wrap:wrap;justify-content:center}
  .ticker .dup,.marquee .dup{display:none}
  .ticker ul,.clients{flex:0 1 auto;flex-wrap:wrap;justify-content:center;padding-inline:var(--gutter)}
  .ticker li:last-child::after{display:none}
  .ticker li:last-child{padding-inline-end:0}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .clients{row-gap:1.75rem}
  .btn:hover,a.svc-card:hover,.why-card:hover,.cinfo-card:hover,.other:hover,.shot:hover,a.client:hover,.hero-arrow:hover{transform:none}
}